As I have mentioned previously, WordPress has a great screenshot service that allows you to make quick screenshots from any valid url. The image above is a WordPress generated screenshot, just look at the source of this page. People like to visualize things, so screenshots in articles can improve the user experience and it’s nice to offload the work to a third party (WordPress). However, dynamically generated screenshots have a performance cost and it’s kind of wasteful to keep asking WordPress to regenerate the same screenshot when my use case only needs a screenshot generated once.
Read more
Every year, a handful of websites publish daily articles on some interesting subjects for the first 24 days of December. I have first seen this advent calendar of tech posts on 24ways a couple of years ago. This year, 24ways has once again delivered some great posts on web design and development goodness. A few days ago, I was also introduced to a great HTML5 and CSS3 advent calendar from DigitalPaint. Even my favorite magazine, The Economist, does a seasonal christmas countdown of the most popular maps and charts in December. Below, I am going to give you a quick summary, or alternative title with links, of all the 2012 Advent Calendar Articles on Development and Design:
Read more
Do you remember ColorAPI? What happened to it? Well, it got me thinking about creating my own color scheme generator from a online photos using HTML5 CANVAS and JavaScript. A little research landed me on Andrey Okonetchnikov’s Colorist. I glanced at the code (I put it on JSFiddle if you want to take a look) and realized that the script does calculations around average color of different slices of the dropped image. I like this approach, it is fast, but I wish that I could limit the amount of colors on the palette to a certain number.
This script does not do that because when colors from different slices are similar, the getAverageColor function combines them to make a new color, so the amount of colors you get on your palette depends on the image. This is important because we don’t want to have very similar colors on the palette. However, we do want to limit the amount of colors, so how can this be done?
Read more
How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?
I have been a long time fan of jqPlot for its open source approach, simplicity, examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery. Recently, however, D3 has really caught my eye. It uses JavaScript, HTML, SVG and CSS to really bring data to life. It is also open sourced, does not depend on jQuery, has a ton of examples, and there are even some good charting libraries based on D3. The other big player is HighCharts, also written in pure JavaScript with all demos that you can view and edit in JSFiddle and it also has some powerful features. Beyond these three, there are many more useful JavaScript charting libraries worth considering. Here is a list of the top 50 JS libraries for making charts and graphs:
Read more
I have been recently reading about Image Scaling and Pixelation and wanted to create a simple HTML5 image resizer. It turns out that someone beat me to it as I found JS-Image-Resizer on GitHub and it even implements HTML5 Web Workers. It features a two-pass resizing algorithm and I think it looks pretty good, but I still wanted to share some research I have done into image scaling with JavaScript.
Read more
Recently, I have seen a couple different JavaScript face detection demos based on the HTML5 getUserMedia API. I even made my own face detection demo based on the HTML5 video tag. Beyond human faces, we also have face detection for cats in JavaScript, nudity detection, and much more with js-objectdetect, a JavaScript library for real-time object detection.
Read more
Image by Michel Rousseau
If you are creating HTML5 games, it makes a lot of sense to start out with some game engine or framework. The good news is that there are many free HTML5 game engines and frameworks out there, from very minimal to pretty complex. Below I will cover some of the most popular HTML5 game frameworks and I will also cover particle systems, game tutorials, examples, and demos. To start, I think it makes a lot of sense to take a step back and watch these slides on HTML5 game development.
Read more
Most people know about jsFiddle because it is an amazing tool that allows you to quickly test and share small pieces of code. No wonder my jsFiddle examples post is getting a ton of traffic. But, there are many other awesome web based sandbox testing tools that you might find useful. Did you know that there are SQL and NodeJS sandboxing tools out there? It is so convenient to quickly mess around with code online and collaborate with other programmers. Below you will find some of the best free code playgrounds and sandboxing tools for testing, debugging and sharing your code snippets (I put my favorites in bold).
Read more
The HTML5 Boilerplate is a really popular staring place for front-end development today and I have to agree that it is pretty awesome. You can also select a mobile version and a boilerplate for emails. Personally, however, I like to start with much less. This boilerplate has many things (htaccess file, robots.txt, polyfills) that I am not really concerned about when just stating out; I want something simple. If you click on the “Get Custom Build” link, it takes you to Initializr, which then let’s you generate the HTML5 boilerplate customized to your liking. I love the various things you can select, like Bootstrap, and all the things you can deselect. I highly recommend using Initializr as a starting point, but below I will cover many more options to consider when choosing a boilerplate.
Read more
Previously, I wrote about generating typos based on misplacing your finger on a keyboard, or proximity based misspelling. But, another way to think about typos is to consider the words that people generally misspell. If you could query a list of misspelled words, it would be pretty easy to search and replace correct word or words with typos. Generally, the use case is for the reverse, correcting someone’s typos, but in some cases I think you could get some extra SEO juice from generating a couple typos for your main keywords. So, the idea is that I will pass a phrase, perhaps a title of some blog entry, and a function will return an array of phases with common misspellings of different words in the phrase. But first, let’s start with a list of common typos.
Read more
