#391 — May 15, 2019 |
🚀 Frontend Focus |
|
|
Google Fonts Adds Zach Leatherman |
|
Accessibility Insights: A Tool to Guide You Through a Web Accessibility Check — Available as a Chrome (and Edge Insider!) extension or a Windows app, this tool from Microsoft will guide you through doing an accessibility assessment on a Web site including both automated and manual checks. Microsoft |
Build Maps That Feature Your Brand & Your Data — Struggling to find a mapping product that does justice to what you’ve built? Mapbox makes it easier than ever to build, implement, and customize amazing maps. See for yourself why 1.2M developers are building with Mapbox - Sign up for free. Mapbox sponsor |
|
Integrating Third-Party Animation Libraries to a Project — I wasn’t expecting an in-depth tutorial on front-end animation approaches to include a history of Dreamweaver and jQuery, but that’s just how deep this post goes. Travis Almand |
|
Building a Web Audio API Guitar Pedalboard — This is really fun! You can play with the pedalboard for yourself (no guitar needed, there’s a musical sample available) or just learn how the whole thing was set up. Trys Mudford |
|
Polypane: A (Paid) Browser for Responsive Web Development and Design — It’s not every day we see a browser aimed at development, but this commercial (with a free trial) Chromium based browser brings some interesting ideas to the table nonetheless. Polypane |
💻 Jobs |
|
Product-Focused & Driven Frontend Engineers in Stockholm — Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company. Diet Doctor Sweden AB |
|
Find A Frontend Job On Vettery — Vettery specializes in tech roles and is completely free for job seekers. Vettery |
📘 Tutorials |
|
Creating a 'Chinese Window Lattice' with CSS — If you like drawing interesting shapes using CSS alone, this is for you and is pretty darn clever in its use of the little seen Yuan Chuan |
|
A Pure CSS Simone Vittori |
|
The Parallel Streaming of Progressive Images with HTTP/2 — Image-optimized HTTP/2 multiplexing makes all progressive images across a page appear visually complete in half of the time. Here’s how. Andrew Galloni and Kornel Lesiński (Cloudflare) |
|
Learn GraphQL by Doing - 2 Hour GraphQL Tutorials for Frontend Developers — A series of open-source GraphQL tutorials with videos. Now featuring tutorials for React, Vue, ReactNative & iOS developers. Hasura sponsor |
|
SVG Properties and CSS — The relationship between SVG and normal HTML and CSS can seem a little complicated at times, so guides like this are always welcomed. And if you like this, maybe you’ll like seeing how to change the color an SVG on hover. Katherine Kato |
|
A New (and Easy) Way to Hide Content Accessibly Zell Liew |
|
How to Combine Sass Color Functions and CSS Variables — This is pro level Sass-work right here. Grab a cup of ☕️ Claudia Romano |
|
4 CSS Filters For Adjusting Color — This is an old post, but still very relevant given our Tip of the Week (below) :-) Steven Bradley |
|
Styling HTML Checkboxes is Hard - Here's Why Areknawo |
|
🔧 Code and Tools |
|
Tailwind CSS 1.0 Released — Tailwind is a popular low-level CSS framework that provides useful building blocks for more easily styling things your own way. If you’re already using Tailwind, be sure to check out the upgrade guide. Tailwind |
|
CSSFX: Simple Click-to-Copy CSS Effects — It really is simple. Here’s a page with 45 different button and loading effects, click on one and you get the code to copy/paste. Jonathan Olaleye |
|
Get the Fastest Website Deployments. Get Started Free Buddy sponsor |
|
headingsMap: Shows the Structure of Headings on Pages — Another tool that’s helpful in performing a basic accessibility audit. Chrome Web Store |
|
Feather: 279 Minimal Monochromatic Line-Based Icons — These icons are as simple as it gets but cover all the essentials such as alerts, popular services, user icons, etc. Cole Bemis |
|