#344 — June 13, 2018 |
Frontend Focus |
The New (and Old) CSS Units You've Never Heard About — Exploring the newly defined CSS units that have been recently or are going to be implemented in browsers, including Massimo Artizzu |
Manipulating Pixels Using Canvas — If you’ve not worked with the canvas element in the past few years, this is a practical, easy to follow walkthrough of producing some handy pixel-based effects with it. Welling Guzman |
💻 New Course: A Practical Guide to Algorithms with JavaScript — Bored by the academic approach of most data structures and algorithms courses? This is for you. Solve algorithms and analyze space and time complexity in both an interview setting and in your day-to-day development. Frontend Masters sponsor |
Image Inconsistencies: How and When Browsers Download Images — Browsers don’t download images referenced in CSS until the CSS object model is built which could lead you to use Harry Roberts |
Creating a Bar Graph with CSS Grid — A walkthrough of a cute way to create a basic bar graph using CSS grid layout and variables. Preethi Kasireddy |
▶ Introducing MapKitJS: Bring Apple Maps To Your Sites — Although still in beta, you can now integrate Apple Maps directly on your own site. This video session from WWDC runs through how you could use it. Related documentation here. Apple |
▶ Designing Web Content for the Apple Watch — watchOS 5 brings web content to the Apple Watch by rendering rich HTML in Messages and Mail. Apple Developer |
AV1 Video Support Added to 'Can I Use' — Not a lot to see yet as it’s only supported in Firefox and Chrome behind a setting, but this video format could become more significant in future. Can I Use |
💻 Jobs |
Remote Front End Developer (React Native & Rails) — Join us, work remotely from North America, and help build software that matters. Aha! |
Have You Tried Vettery? — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform. Vettery |
📘 Tutorials |
Animating Images and Videos with Curtains.js — Curtains.js uses WebGL to turn images and videos into a plane that can be animated in a ‘curtain’-like way. It’s a striking effect, but be careful not to overuse it. Martin Laxenaire |
CSS Media Queries: A Quick Reference and Guide Alligator |
Building a Responsive Image as an SVG — How to create a logo that responds to its own aspect ratio. Nils Binder |
Creating a Visual Studio Code Theme — Not your typical frontend work, but as VS Code is built using JavaScript and HTML, many concepts transfer across. Sarah Drasner |
Easier 'Scrollytelling' with position: sticky — A neat effect demonstrated simply and in a surprisingly little amount of code. Elaina Natario and Russell Goldenberg |
Submitting HTML Forms using Vue, React, or Hyperapp Ogundipe Samuel |
See Why Facebook, Spotify, & fastlane Trust CircleCI with Their CI/CD — The shortest distance from idea to execution. Automate your development process quickly, safely, and at scale. CircleCI sponsor |
A Comprehensive Guide to Flexbox Alignment — A good primer to help understand how items get aligned along flexbox’s two axes. Anna Monus |
How to Build a Toggle Control 'Smiley Face' using HTML and CSS — A neat trick for this simple visual effect. Eder Diaz |
Deprecations and Removals in Chrome 68 — Chrome 68 will be the stable release in about a month. Google Developers |
Designing Web Content for watchOS — Some early pointers on building pages for the Apple Watch. Erik Runyon |
Keeping Up with Browser Updates Raymond Camden |
Some Time-saving Chrome DevTools Shortcuts Dmitry Pashkevich |
🔧 Code and Tools |
Implement 200+ Tools with the Flip of a Switch – Get Started for Free Segment sponsor |
LuminJS: Progressively Highlight Any Text on a Page — For drawing attention to text or, perhaps, showing progress. Preet Shihn |
Pull to Refresh.js: A 'Pull to Refresh' Feature with No Markup Needed Box Factura |
Swup: CSS Transitions Between Website Pages Georgy Marchuk |
SQIP: A SVG-based 'Low Quality Image Preview' Technique — Generate tiny SVG-based placeholders on the server side. Tobias Baldauf |
Linux Cloud Hosting Starting at 1GB of RAM for $5/mo Linode Cloud Hosting sponsor |