Frontend News aims to keep you updated with what's happening in the world of web dev! With the latest news and resources from the design & development community.

Netlify Puzzle

The Making of: Netlify’s Million Devs SVG Animation Site

The following article captures the process of building the Million Developers microsite for Netlify. This project was built by a few folks and we’ve captured some parts of the process of building it here.

Read it ➡️

Bricks with gaps

A Lightweight Masonry Solution

Firefox is now implementing masonry in CSS via an experimental feature. This tutorial shows us how to set it up, including a JavaScript fallback for the rest.

Read it ➡️

Redux For Use In A Real-World Application Article Card

Setting Up Redux For Use In A Real-World Application

It's fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump!

Read it ➡️

TypeScript Logo

TypeScript, Minus TypeScript

TypeScript is incredibly powerful, but is often difficult to read for beginners and carries the overhead of needing a compilation step before it can run in a browser. Let's take a more detailed look!

Read it ➡️

Draw your favourite cars example

How To Create A Porsche 911 With Sketch (Part 3)

This tutorial is geared more towards experienced illustrators, but if you’re new to Sketch, you should be able to profit from it, too. Be sure to check out Part 1 and Part 2 first!

Read it ➡️

Smashing Checklists Header

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Meet Smashing Magazines' Smart Interface Design Patterns Checklist Cards, a deck of 100 cards with questions to ask when designing and building any interface component

Read it ➡️

Flatfile Importer

Building Custom Data Importers: What Engineers Need to Know

In this article, we’ll address the current problems with importing data and discuss a few key product features that are necessary to consider if you’re faced with a decision to build an in-house solution.

Read it ➡️

A Practical Guide To Product Tours In React Apps Aritcle Card

A Practical Guide To Product Tours In React Apps

In the following guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.

Read it ➡️

Sapper And Strapi

Creating A Static Blog With Sapper And Strapi

This article will take you through how to build a Svelte-powered static blog with Sapper and Strapi, as well as how to deploy the website to Netlify.

Read it ➡️

HTML Headings Depiction

HTML for Subheadings and Headings

A neat look into some considerations to make when structuring HTML headings.

Read it ➡️

Shoptalk Logo

Web Components, Frameworks vs Vanilla, Accessible Numbers, and SVG Memory Usage

A look at web components and web component libraries, when and why you should use a framework vs vanilla HTML/CSS/JS, how to make phone numbers more accessible, trying to figure out state, and some thoughts on SVG memory usage.

Listen up ➡️

Contrast Example

Nailing the Perfect Contrast Between Light Text and a Background Image

Trying to stamp out poor text contrast on background images is a lot like playing Whac-a-Mole. Instead of guessing, we can solve this problem with HTML <canvas> and a little bit of math.

Read it ➡️

Previous Issue: