JavaScript

Get Started with Debugging JavaScript in Chrome DevTools

Kayce Basques wrote an excellent interactive tutorial that explores how to debug JavaScript with DevTools. Kayce looks into a number of techniques and options that I was completely unaware of and, as he notes in the beginning of the tutorial, if you’re still using console.log to find bugs in your code (like me) then this article is written just for you (also me).

Clean Code JavaScript

Inspired by Robert C. Martin's book Clean Code, Ryan McDermott put together a repo with some software engineering best practices as they apply to JavaScript in particular. The repo has tons of great guidelines for beginning programmers, and good reminders for seasoned maintainers.

I'm a particular fan of this style of teaching because it focuses on legibility as much as writing. This ensures that our codebases are friendly to the next developer who comes along, even if it's ourselves.

Prefer `defer` Over `async`

Steve Souders:

Comparing the ASYNC and DEFER waterfalls, we see that using DEFER makes DOM Interactive fire sooner and allows rendering to proceed more quickly.

Even though <script async></script> is more commonly seen in the wild, defer is typically preferable as they can never block other syncronous scripts, as well as load in predictable source order.

Lazy-Loading Disqus Comments

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.

(more…)

Native Browser Copy To Clipboard

It wasn't that long ago where you couldn't programmatically copy text to the clipboard from the web without using Flash. But it's getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google's developer site.

Here's the example from that article:

See the Pen Copy Text with a Button (Google Example) by Chris Coyier (@chriscoyier) on CodePen.

That article says it's not supported in Safari, but it is as of Safari 10, which only dropped in September.

You don't need a library to do this stuff, as evidenced by the above demo. But, there is one: clipboard.js. It's only 3kb gzipped. The purpose is to give you a bit of a cleaner API to work with, like success and error events, and configuration through data-* attributes. Here's a demo of that:

See the Pen Simplest Possible Clipboard.js by Chris Coyier (@chriscoyier) on CodePen.

An Introduction to mo.js

mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with. Its author, Oleg Solomoka (otherwise known as @legomushroom) creates incredibly impressive demos and tutorials for the library's offerings that you should check out, but in this article we’ll run through a really quick overview of features and tutorials to get you started.

(more…)

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag