Code School just launched JavaScript.com, a page dedicated to all things JS. Basically, the page is split into Resources and News, which can also be subscribed to via an Email Newsletter called FiveJS (5 Minutes of JavaScript).
First thought: Heck, i wanna to know what they paid for this domain.
Second thought while looking through the news and resources: After all these years working with the web it still amazes me how much knowledge you can get for free.
Quotes on Design is a page that serves quotes about design, curated by Chris Coyier. They just rebuilt it using the WP-API to fetch posts from WordPress.
Up to this point, Quotes on Design (QoD) used a bit of custom code to query the WordPress database and serve up quotes. This was used for the site itself, and for its API to allow use on external sites. With the excitement surrounding the upcoming WordPress JSON REST API, we thought it would be fun to rebuild the site to use the WP API instead of our own custom code.
It’s nice to see more and more real world examples using the WP-API popping up lately. In this post on CSS-Tricks, Andy Adams details exactly how they built it which makes it a perfect tutorial if you want to get familiar with the WP-API.
A great presentation by Beau Lebens about how to build dynamic Applications using Backbone.js and the upcoming WP-API.
We often use jQuery just because we’re used to work with it. This page nicely demonstrates how easy some common functionality could be replaced with plain JS.
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.
If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you’re only targeting more modern browsers, you might not need anything more than what the browser ships with.
Definitely something i will come back to next time i’m tempted to implement jQuery just to switch some classes easily.
Last week this jQuery Plugin popped up a lot on different channels. First: Yes, it looks pretty! But quick and easy? Not really.
I could imagine something like this could work for simple select fields, where you have just a handful of options to choose from. Maybe for the order quantity in a checkout process or something like that. But for a date-picker it doesn’t cut it.
If you work with a lot of images, performance issues can quickly add up and become pretty complicated to tackle. Lazy Loading is one popular technique how we can approach this and with Lazy Load XT there seems to be a new solution which also supports things like srcset, horizontal scrolling or video elements.
Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times.
Just recently i implemented jQuery Lazy Loading on a portfolio page and we were able to bring the pagesize down to some kilobytes (until first render) from what was around 4MB and even over 16MB on retina screens. The site was built some years ago, so srcset or <picture> elements weren’t an option and we used retina.js which was quite fast, but loads the small version and then the retina version on top. Not ideal, i know.
So, lazy loading was a great help in reducing all that, but when implementing it i struggled not only with some possible negative SEO implications (which i’m still trying to fully understand) but also it was very hard to combine retina.js with the jQuery Lazy Loading.
Lazy Load XT is a new script which uses jQuery, Zepto.js or DomTastic to deliver lazy loading functionality and it includes srcset support as well as many other of the things i missed. Also, i like the modular way it is built which let’s you choose which plugins or extensions you need and thus let you save some more kb’s from your bottom line.
It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. They get away with this by detecting the direction of the cursor’s path.
Ben Kamens (lead dev at Khan Academy) takes a look at how Amazon handles their Mega-Dropdown.
He even wrote a little jQuery Plugin and shared it on GitHub.