Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Extra Maps for jQuery Vector Maps Plugin

jQuery Vector Maps Plugin

Need a JQVMap for a specific country? Get it here

Today I have been playing around with the JQVmaps plugin for jQuery and it looked very familiar because it is basically a modified version of another jQuery plugin called jVectorMap. There are differences in the code as these are two different plugins or projects but there are many more maps provided on jVectorMap compared to JQVmaps. The map data is not the same but it is close enough and can be easily converted (there is also a python converter script to generate any kind of map from shape files).
Read more

Sample WebM, Ogg, and MP4 Video Files for HTML5

HTML5 Video Sample Files

If you are playing around with the HTML5 Video tag you might need some sample video files and these video files have to be in different web formats. The problem is that different browsers support different types of video files, so to provide proper cross-browser support, you need to convert your video into many different formats. I plan on writing more about HTML5 Video and some cool things that it allows you to do but as a start, I wanted to convert one small video file into a lot of different formats and provide these files as a sample video for anyone to use in their tests and projects.
Read more

Social Media Explained

Social Media

Have you seen the Social Media Explained photo above? I just saw it the other day and thought it was a great way to quickly understand what the big social websites are all about. But, where is Tumblr? And the Google Plus description could be better, even though I do feel like Google plus is getting way more use among employees in general. Even though this is probably made as a joke, I think its a good example to people who think about creating social websites: you should be able to define your idea in a really simple and concise statement. Now, if I could improve this list a little, it would read like this:
Read more

Grab Twitter Results with PHP and Remove Retweets and Duplicates

PHP script to grab twitter search results

A twitter search for many keywords gives us interesting results but the default search results are filled with retweets and duplicates (or tweets that are very similar). So, I wanted to share some php code that will leverage the Twitter API and grab tweets via a search query but parse the results through some functions that remove similar tweets, retweets, and transform link text into actual links.

To start, retrieving twitter search results is pretty straightforward, we don’t even need an API key, and there is a filter parameter that you can pass to remove retweets in the API: filter:retweets
Read more

User Agent Strings for Common Browsers

Browser Trends for 2012

I needed to do take some screenshots today of a website using different browsers so I looked into PhantomJs to automate this work. Installing and running phantom was very straightforward, just some JS magic, but I needed to drive different browsers and to do that I had to get some User Agent strings.
Read more

WordPress Screenshot Service for Better Lists

WordPress Screenshot app

In the last week I have made two lists about online resources and tools beneficial for web development and design but my lists did not have any images of the tools provided. Pictures are awesome and they really add a lot of value but I did not want to waste my time creating images for every tool I listed.

It turns out that WordPress has a screenshot service that you can leverage via a url which is really beneficial to improve my lists of good resources. Using the service is easy, take a look at this url:
Read more

Web Development Tools and Resources Online

Development Resources and Tools

Good tools can be extremely helpful in programming so I wanted to share a list of web development tools that I have been collecting over some time. The list below includes online tools covering all areas of web development, including different generators, cheat sheets, and code snippets plus other random tools which make dev work more efficient. So far I have 53 different online development tools listed and I hope that you can benefit from these:

CSS Resources

PrimerCSS – undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.

CSS Lint – an open source CSS code quality tool.

0 to 255 – is a simple tool that helps web designers find variations of any color

ProCSSor – Advanced CSS Prettifier

Spritebox – create CSS classes and IDs from a single sprite image


Read more

Design Tools and Resources Online

Design Resources

If you do any web design or graphics work, you will find many of the following online resources very helpful. I have been bookmarking these for a while and wanted to share my collection. Below you will find 35 online design tools:

Dribble - show and tell for designers. Image inspiration.

COLOURlovers – creative community where people share colors, palettes and patterns.

wordmark.it – helps with font selection process by quickly displaying font previews.

placehold.it – A quick and simple image placeholder service.

Lorempixel – Placeholder Images for every case.


Read more