The CSS foundation of the BBC’s popular sports site is under 9kb. This in-depth review looks at the performance decisions behind their approach to CSS.
Shaun Bent
Lea Verou noticed in the latest HTML specs that ‘slider’ controls have many cool features that aren’t widely implemented, so she’s produced a polyfill for one.
Lea Verou
A 17 minute talk looking at things like CSS modules, variables, custom selectors and tools to let you use them right now.
Christian Vuerings
Learn how to build functional, reactive web applications in Angular 2 with a Redux inspired library, @ngrx/store and observables from Rx.js.
Frontend Masters
Sponsor
Used for ‘preformatted text’ like code listings, the ‘pre’ tag throws up some special formatting concerns you need to consider.
Chris Coyier
“We have creative directors and design directors, but we don’t seem to have any front-end directors. And maybe we should.”
Jeffrey Zeldman
At Render 2016, Google’s Jake Archibald stressed the importance of getting Web content rendered ASAP and some of the new Web technologies that can help.
Jake Archibald
Positioned grid items have some special features, explained in this handy post that’s ideal for any working with CSS Grid already.
Manuel Rego Casasnovas
A look at responsive design patterns such as mega dropdown navigation, content grids, maps and charts, and responsive art direction.
Vitaly Friedman
Jobs
Can't find the right job? Want companies to apply to you? Try Hired.com.
In Brief
Make Dashes in HTML Comments No Longer Cause Parsing Errors? news Tweaks being considered for WHATWG’s HTML standard. WHATWG
Progressive Web App Dev Summit 2016 (Amsterdam, NL) news Two days of talks, labs and access to the Chrome engineers to discuss the future of the web. Google
Rangle’s Online Angular 2 Training: Now Free rawurl course Master RESTful API's, ES6, TypeScript and more with the experts who developed the Angular 2 debugging tool, Augury. Attend remotely or in person as it suits the needs of you and your team. RANGLE.IO Sponsor
Single Character Transforms with CSS and JS tutorial A look at how to animate individual characters using CSS animations. Simon Codrington
Make Your Own Responsive SVG Graphs and Infographics tutorial Alex Walker
Building Animated Covers for Video with Sprites tutorial A large JPEG sprite sheet proves more efficient than an animated GIF. Kawandeep Virdee
CSS Coding Techniques tutorial Tips for writing better, easier-to-maintain CSS code. Belén Albeza
5 Ways to a Sticky Footer tutorial Chris Coyier
A Walk Through an Effective Way to Debug CSS tutorial Ben Frain
Ways You Can Tell The Browser How To Optimize tutorial The CSS will-change and contain properties, and responsive image attributes. Chris Coyier
SVG in Motion video Sara Soueidan
What's New in Chrome 51 for Developers video 3 minute video on Intersection Observers, Passive Event Listeners and the Credential Management API. YouTube
5 More Awesome New Mozilla Technologies opinion Tofino, AFrame, Dev Toolbar, Platform Status, and pdf.js. David Walsh
Stop Painting and Have A Meaningful Interaction with Me opinion “Time to First Meaningful Interaction” seems more useful than merely how quickly bytes arrive to the browser. Dion Almaer
The Aural UI of HTML Elements tools A large demonstration of how various HTML elements are rendered in audio by screen readers. Steve Faulkner and Léonie Watson
A Collection of Web Safe CSS Font Stacks tools CSS Font Stacks
Flex Layout Attributes (FLA) tools Two custom HTML attributes (layout and self ) you can use as shortcuts for flexbox style layout direction. ProgressiveRed
ClosestColor: Analyzes Your CSS for Close Color Matches tools Instead of adding yet another color to your CSS, find the closest existing one to reuse. ClosestColor
Lightning fast SSD hosts for your HTML5 project rawurl tools Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use code HTML520 for $20 credit. Linode Sponsor
WebGazer.js: Democratizing Webcam Eye Tracking in the Browser code Brown HCI Group
|