CategoryJavaScript

October 24, 2013 — Much of that page weight could be reduced if images were conditionally optimized based on device width, pixel density and modern image formats. These reductions would result in faster loading times, but the debate isn’t about whether to optimize images for different devices, but about how to go about doing so. In this article, Shawn Jansepar will take a look at Mobify.js, which lets us generate small images for small devices from a single high-resolution image. Read more…

October 7, 2013 — Sometimes the simplest JavaScript features are sitting right under our noses and we just haven’t had a lot of exposure to them. In this article, Louis Lazaris won’t be talking about jQuery, and he won’t be looking at structural code concepts or patterns. Instead, he is going to introduce you to some pure JavaScript features that you can use today and that you might not have ever considered before. Read more…

September 18, 2013 — While working for Simple Focus, a couple of our designers noticed how images always scaled perfectly. The line length of hypertext, on the other hand, changes based on its parent element’s width, which has a negative effect on readability. One of our designers asked, “wouldn’t it be nice, if text worked more like images?” and a few weeks later FlowType.JS was fully-developed and ready to be sent into the world. Here’s the process of how we got there. Read more…

September 17, 2013 — This article scratches the surface of the Three.js library. Once you are comfortable with the API, experimenting with particles, mapping and more complicated meshes can yield incredible results. Three.js is a gold mine for creating beautiful and complex Web experiments. Taking the extremely simple demonstration explained here and turning it into a mind-blowing experiment merely takes experimentation and the willingness to try new things. Read more…

September 2, 2013 — Emotional interaction is an important, but frequently neglected, component that must be considered in Web design. Crafting an element of surprise on Web pages can raise visitor engagement without obfuscating important content, sidelining mobile visitors or disadvantaging users who require accessibility features. Naturally, this must always be balanced with the need to guide users through the website. Read more…

August 27, 2013 — Navigation Timing API provides easy access to accurate page timing information, but it is still insufficient to draw a complete picture. Whether we need to support browsers that do not currently implement the Navigation Timing or get information about resources not included in the current page, be sure to find out more about the user’s network bandwidth or whether their support for IPv6 is better or worse than their support for IPv4. All of the techniques presented here were developed while writing Boomerang though not all of them made it into the code yet. Read more…

August 15, 2013 — Web helps designers and developers find the best inspiration and resources for their projects. Even though there are different tutorials and tips available online, Oleg Solomka feels that HTML5 canvas techniques are missing the most. Good news: he had the chance to fulfill this wide gap. In this article, Oleg would like to share his experience and story of how he brought the “Jelly Navigation Menu” to life! Read more…

August 9, 2013 — Backbone.js provides structure to JavaScript applications, but it leaves a lot of design patterns and decisions up to developers who end up running into common problems when they first begin developing in Backbone.js. In this article, Phillip Whisenhunt will explore different design patterns that you can use in your Backbone.js applications, and he’ll look at many of the common gotchas that trip up developers. Read more…

August 8, 2013 — Tools for live CSS editing aren’t new these days. So, why would someone ever need to create yet another tool and even call it a “live CSS editor of the new generation”? In this article, Sergey Chikuyonok would like to introduce Emmet LiveStyle. This plugin takes a completely different approach on updating CSS. Unlike other live editors, it doesn’t simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other. Read more…

June 13, 2013 — If Sacha Greif has learned one thing in his years as a designer, it’s that people are lazy. Instead, what if he built an app that lets the user add their Twitter account to a list in a single click? This won’t be a traditional tutorial. Instead, it will be a play-by-play walkthrough of how he coded the app in one hour, including the usual dumb mistakes and wrong turns. Read more…