FrontEnd Focus 265 - smooth web animations, unlimited workshops
CSS Grids, Flexbox and Box Alignment: Our New System For Web Layout
Rachel Andrew explains that by understanding flexbox you’re very close to understanding much of grid layout. Plenty of great CodePen examples here.
How to Build A Responsive Grid System
Zell sets outs to prep you with the knowledge needed to build a custom-made grid in this tutorial.
10 Principles for Smooth Web Animations
Handy insights and approaches for reaching the much desired 60fps for your site’s animations.
Unlimited LIVE online front-end engineering workshops
Starting this week, Frontend Masters is offering all their LIVE online workshops from world-class experts, 100% free for members! Get unlimited access to ALL live online workshops, plus 50+ courses for just $39/mo.
309 Useful CodePens for Everyday Front End Development
A large CodePen collection collated by Sarah Drasner featuring techniques that may prove useful in everyday front-end dev.
How and Why You Should Inline Your Critical CSS
Why you should be inlining your critical CSS, as well as how to do it using Grunt, npm modules and other tools.
SkateJS: Cross-Framework Web Component Library Built on W3C Specs
A library built on top of the W3C web component specs for writing functional and performant web components with a small footprint.
Cooperative Scheduling with requestIdleCallback
Firefox Nightly has support for requestIdleCallback, a method for having a function be called in the main thread during a window of idle time.
HeadlessBrowsers: A List of (Almost) All Headless Web Browsers in Existence
A collection of web browsers without a graphical user interface, controlled programmatically. Useful for automation, testing, and other purposes.
IN BRIEF
Google's Mobile-First Indexing Approach NEWS Google’s algorithms will eventually primarily use the mobile version of a site’s content. GOOGLE
Announcing Dart Sass: A Dart Implementation of the Sass CSS Pre-Processor NEWS It’s fast, and compatible with JavaScript, naturally. SASS
CSS 'position: sticky' To Be Enabled by Default in Chrome 56 NEWSCHROME PLATFORM STATUS
CSS Round Display Specifications NEWS A look at support for round displays in CSS and how to use the features in Crosswalk. JOONE HUR
Download 'Intelligent Caching' from O'Reilly Media Use 'Intelligent Caching' as a resource & guide for optimizing performance on your site or app. Download now. STACKPATH SPONSOR
Rendering the Mandelbrot Set with WebGL TUTORIALNICEBYTE
Generating Sounds Programmatically in the Browser with JavaScript TUTORIALMARC G GAUTHIER
Get Started on the CSS of the Future with PostCSS-cssnext TUTORIALSITEPOINT
Capturing an Image from the User via the Browser TUTORIALPAUL KINLAN
The State of Responsive 3D Shapes TUTORIAL An incredibly thorough guide. ANA TUDOR
Building a responsive HTML5 app? Learn the must-know techniques in this whitepaper If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web. PROGRESS SPONSOR
WebVR: Developing for the Immersive Web SLIDEDECKTONY PARISI
A Look at the Chinese Language and Typography on the Web STORY A thorough look into how Chinese typography is displayed on the web. CHEN HUI JING
Custom Elements: An Ecosystem Still Being Worked Out OPINIONPAUL KINLAN
Web Fonts, Boy, I Don't Know OPINION “Web fonts are okay”, but Monica proclaims it’s your “responsibility to make your site load super fast” when using them. MONICA DINCULESCU
Rethinking Responsive Design OPINION ”. . the future of the web exists beyond screens. ”UNA KRAVETS
Why I Won’t Be Using the Fetch API in My Apps OPINIONSHAHAR TALMI
CSS Architecture for Design Systems OPINIONBRAD FROST
Tool to Produce Gradient Fallbacks for An Image That Resembles The Original TOOLS Inspired by Harry Roberts’ article. BEN BRIGGS
ChaosSocket: A WebSocket Mocking Interface CODEHECTOR ZARCO
WordPress 4. 7 Beta 4
WordPress 4. 7 Beta 4 is now available!
This software is still in development, so we don’t recommend you run it on a production site. Consider setting up a test site just to play with the new version. To test WordPress 4. 7, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the beta here (zip).
For more information on what’s new in 4. 7, check out the Beta 1, Beta 2, and Beta 3blog posts, along with in-depth developer guides on make/core. We’ve made about 60 changes in the last few days for beta 4, including tweaks to Twenty Seventeen, custom CSS, and the REST API content endpoints.
Do you speak a language other than English? Help us translate WordPress into more than 100 languages!
If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.