A run through some of the ‘good bits’ of the CSS Flexible Box Layout specification.
David Gilbertson
Scrolling opens a lot of doors to designers but isn’t without its drawbacks. Some tips on how to approach ‘long scroll’ experiences.
Nick Babich
Google will remove support for PNaCl early next year from “everywhere except inside Chrome Apps and Extensions” shifting their focus over to WebAssembly instead.
Brad Nelson
Get a full history in your source control system. See who made changes, what they did & why. See how.
Red Gate
Sponsor
In this session from Google I/O, Addy Osmani covers PWA best practices, patterns for efficiently loading websites and the latest tools for getting fast and staying fast.
Google Chrome Developers
TJ VanToll explains why, despite the ridicule CSS sometimes gets from the developer community, he still loves it for its flexibility, simplicity and power.
Telerik Developer Network
Slides and a thorough write up of a talk on accessibility within the context of responsive web design.
Scott Jehl
Browserlist provides information to tools like Autoprefixer and postcss-normalize (and more) to let you specify which browsers you want to target.
Chris Coyier
A look at why “writing your styles in JavaScript isn’t such a terrible idea after all”.
Mark Dalgleish
Simon Codrington illustrates some UI design ideas using CSS animation and gradients.
SitePoint
Jobs
Can't find the right job? Want companies to apply to you? Try Hired.com.
In Brief
Page Scroll Animations Made Easy with the AOS Library tutorial Gajendar Singh
On-Scroll Morphing Background Shapes tutorial A decorative website background effect where SVG shapes are morphing and transforming on scroll. Powered by anime.js and scrollMonitor.js. Mary Lou
Full Page Background Video Styles tutorial Tips and approaches for using videos as backgrounds. The Media Temple Blog
Making Custom Properties (CSS Variables) More Dynamic tutorial Dan Wilson
Accurately Checking for CSS Grid Support in Microsoft Edge tutorial Greg Whitworth
The CSS Fractional Unit (fr) In Approachable, Plain Language tutorial Ohans Emmanuel
How to Create Perfectly Centered Text With Flexbox tutorial Craig Campbell
👞🕷 [Free until June 26] Squash Common JavaScript Bugs Course Join Todd Gardner's course on Debugging and Fixing Common JavaScript Errors. You’ll be armed to squash bugs for good. Frontend Masters Sponsor
Chrome Won opinion ”..it’s safe to say that Chrome is eating the browser market, and everyone else except Safari is getting obliterated.” Andreas Gal
What is the Future of Front End Web Development? opinion Chris Coyier
HTML5: Where The Core Web Technology Is Headed Now opinion Paul Krill
Muuri: Create Responsive, Sortable, Filterable and Draggable Grid Layouts tools A JavaScript powered layout tool. Demo here. Haltu
Flexbox Cheatsheet: Click to Copy Flexbox Properties to Your Clipboard tools Valery Liubimov
Firefox Screenshots: A New In-Beta Web Screenshot Tool tools Mozilla
$20 Free Credit on a new account. Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit. linode Sponsor
VideoContext: Experimental HTML5+WebGL Video Composition and Rendering API code BBC
Elongated/Extruded CSS Text Shadows code Mixfont
Progress Nav: An Example of Page Navigation That Shows Progress demo CodePen
HN PWA: Hacker News Clients as Progressive Web Apps demo Along the lines of TodoMVC, these are example PWAs built with different frameworks. HNPWA
|