Data, Maps, Usability, and Performance
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).
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.
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:
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
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.
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:
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:
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
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.