A simple, practical example of how CSS variables (supported in all major browsers except Edge) can lead to looser coupling and better code when JS needs to interact with CSS.
A significant change for one of the most used developer sites in the world. This post digs into the changes made and how they performed during A/B testing.
What is the performance reality of embedding external assets directly into pages or stylesheets? The conclusion is ‘Base64 still feels like a huge anti-pattern.’
Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. Learn more
The Web Speech API provides the ability to voice-enable your website by using the SpeechRecognition and the SpeechSynthesis interfaces.
Some of the ideas currently in discussion at the W3C regarding the Selectors Level 4 Draft.
Essentially a list of 113 HTML elements which link to pages explaining their use and the attributes they support, if any. There’s a similar reference for CSS
Covers basic HTML, CSS, the box model, flexbox, floats, etc. Suited for beginners but I found the flexbox page
a good primer on its own.
Interneting Is Hard
Can't find the right job? Want companies to apply to you? Try Hired.com.
Editor's Draft of CSS Timing Functions Level 1 news
Achieving 60 FPS Mobile Animations with CSS3 tutorial
Jose Roasario shares tips for animating elements in mobile contexts.
A Basic Introduction to CSS Attribute Selectors tutorial
[href$="5555"] for links to URLs ending in ‘5555’.
Front-end ♥ npm; npm ♥ you
Bring npm to work to unblock collaboration, quit reinventing the wheel, and build amazing things.
npm, Inc. Sponsor
Exercises in Flexbox: Simple Web Components tutorial
Creating a 'Rollover' Map of the US with SVG and JS tutorial
CSS Grid Layout Terminology, Explained tutorial
HTML Canvas Cheatsheet tutorial
HTML5 for the Mobile Web: Browser Forms and Input Types story
An overview of new form controls, how they look, behave and are supported on various mobile browsers.
CSSO: A CSS Minifier with Structural Optimizations tools
A Collection of 180 Curated CSS3 'Web Gradients' tools
Create data-intensive, feature-rich web and mobile apps with Sencha Ext JS tools
Learn how to design, develop and test data-intensive web apps that run on desktops, tablets, and smartphones with Sencha Ext JS
Sencha, Inc. Sponsor
ScrollDir: Leverage Vertical Scroll Direction in CSS Via a Data Attribute code
Dollar Shave Club
SVGO: A Node-Based Tool for Optimizing SVG Files code
A long standing project but still getting frequent updates.
Rythm.js: Make Elements On Your Page 'Dance' code
A funny effect but warning: music autoplays.
Sticky-Kit: jQuery Plugin for Sticky Elements code
Attach elements to the page when the user scrolls.
Fluid Paint: A WebGL-based Painting Experience demo
A browser-based WebGL painting simulator. Code.