Web Design Weekly #372

Headlines

Don’t Serve Burnt Pizza

When you ship a minimum viable product you risk not actually testing your product, but rather a poor or flawed version of it. A bit of a topical point but I feel Jiaona Zhang nails it. (firstround.com)

Opening up the data behind your design systems (figma.com)

Sponsor Web Design Weekly and reach over 30,142 passionate designers and developers

Articles

No, Absolutely Not

Robin Rendle has some wise words around the difference between a junior and senior front-end developer. Worth a read as he has some pretty solid points. (css-tricks.com)

Design APIs: The Evolution of Design Systems

As the needs of software-driven businesses grow even larger, design systems are evolving — they are beginning to look and work like APIs. Matthew Strom explains. (matthewstrom.com)

Thinking about color

A deep dive into how the talented Cloudflare team went about reworking the use of colour within their products. (cloudflare.design)

Build your own React

Incase you have lots of free time you might want to rewrite React from scratch. Rodrigo Pombo gives a step by step guide. It follows the architecture from the real React code. In all seriousness, some great insights in this. (pomb.us)

How Discord achieves native iOS performance with React Native (discordapp.com)

Tools / Resources

FAB – Frontend Application Bundles

FABs are a compile target for frontend applications. They unify static sites, single page applications as well as server-rendered JavaScript UIs in one bundle format, allowing instant deployment to a wide range of hosting platforms. (fab.dev)

Facebook and Microsoft Partnering on Remote Development

In teaming with Microsoft, Facebook are aiming to further improve remote development extensions, with a focus on enabling engineers to do remote development at scale with Visual Studio Code. (developers.facebook.com)

How Do You Remove Unused CSS From a Site?

So you have a CSS bloat issue and you are thinking of removing unused code. How do you go about it? Well Chris Coyier puts some ideas on the table to help you make that decision. (css-tricks.com)

Miro

Where distributed teams work together via an online whiteboard and collaboration platform. (miro.com)

Step by step guide to becoming a modern Frontend developer (roadmap.sh)

Console cheat sheet for JavaScript developers (gitconnected.com)

The state of web fonts in 2019 (httparchive.org)

What Are Design Tokens? (smashingmagazine.com)

Inspiration

Scott Bolinger on WordPress and the future of the independent developer (poststatus.com)

Inspirational Websites (tympanus.net)

Jobs

Frontend Software Engineer at Canva

Our culture is unlike anywhere else and our offices are designed and constantly improved to let you do your best work. At Canva you can be part of a company that is growing rapidly, building a product that users really love. Just check out our Twitter stream. (canva.com)

Senior UI/UX Designer at Hello Design

Hello Design is looking for an experienced Senior UI/UX Designer to make the future with us. You will define user experiences and design cutting-edge interfaces for web and other interactive mediums from concept through creation. (hellodesign.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Global Design Survey (dribbble.com)

The post Web Design Weekly #372 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #371

Headlines

Expect change in your design career. Choose growth.

No one works in a future-proof field, designers included. But if you recognize that change is coming and help others along the way, you can future-proof yourself. (abstract.com)

React Conf 2019 (youtube.com)

Get Your Free .design Domain Name!

Thinking of building your portfolio? .design is like .com & .net, but it’s more relevant to what you do as a designer. Claim yours today. (porkbun.com)

Articles

Things We Can’t (Yet) Do In CSS

In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future. (smashingmagazine.com)

A Guide to Collaborating on Design Systems

A collection of workflow tips for making design system improvements while mitigating inconsistencies. (invisionapp.com)

Moving towards a faster web

A brief article that floats the idea that Chrome may identify sites that typically load fast or slow for users with unique visual cues. (chromium.org)

Building User Experiences with Concurrent Mode and Suspense

At React Conf 2019 it was announced that React will support Concurrent Mode and Suspense. This post introduces the best practices for using them. (reactjs.org)

Rethinking the Front-end

The first article in this series aims to provide perspectives around the problems and goals of front-end development. (gitconnected.com)

Making Instagram faster: Code size and execution optimizations (instagram-engineering.com)

Accidental or intentional design? (tannerchristensen.com)

Tools / Resources

Speed tooling evolutions: 2019 and beyond

This talk covers the newest user-centric metrics in Chrome’s developer tools, and how to leverage the newest features and products to build and maintain an exceptionally fast experience for all of your users. (youtube.com)

GSAP 3 Is Available Now

The most significant upgrade the library has ever had. With 50+ new features, there’s a lot to be excited about. This post dives into all the highlights. (greensock.com)

Paged.js

An open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. (pagedmedia.org)

Learn React Context in 5 Minutes – A Beginner’s Tutorial (freecodecamp.org)

Motion Design in UI – Designing in the Browser (youtube.com)

The Front-End Tooling Survey 2019 – Results (ashleynolan.co.uk)

Inspiration

Chrome Dev Summit 2019 – All Sessions (youtube.com)

Video Game Console Logos (reaganray.com)

Jobs

Product Designer at Hive

We’re looking for a designer who crafts pixel-perfect experiences, based on user journeys that are natural, intuitive and powerful. (hive.com)

Junior Designer at Hyped

Fast paced growth and exciting upcoming projects have necessitated the next stellar designer, you, to join our team. All the usual startup perks are included, unlimited coffee and beer, dogs in the office, casual everyday, competitive salary. (hyped.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Gatsby Cloud: The best way to build and maintain Gatsby sites (gatsbyjs.com)

The post Web Design Weekly #371 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #370

Headlines

Design Ops at Spotify

A really great insight into how Design Ops at Spotify work and how they went about building out this area within the company. (spotify.design)

The Five Senses of UX (medium.com)

Sponsor Web Design Weekly and reach over 30,086 passionate designers and developers

Articles

Speed Up Your Website With WebP

As more of our browsers, devices and software support WebP, it’s time that web designers started adopting it as their default image format. (smashingmagazine.com)

Designing the Facebook Company Brand

As Facebook has grown into a suite of products they have been evolving the company brand. Here is a look into the decisions they have made. (facebook.design)

Everyone uses CSS frameworks

A CSS framework is a tool. It’s not good or bad, and it doesn’t define you as a developer but is does help you. (medium.com)

How Netflix Uses Psychology

A look behind the scenes at how Netflix keeps you engaged and addicted. (uxdesign.cc)

The Current State of Styling Selects in 2019 (css-tricks.com)

Tools / Resources

Be Theme Challenge: Pick ONE of their 450+ pre-built websites

Be Theme just added a NEW lot of pre-built websites and dares you to pick just 1. If you like your themes like your coffee: strong, fast, and helps you finish your work in half the time… then you’re going to love Be Theme’s 450+ gallery. (muffingroup.com)

Moving From Sketch To Figma

Switching tools isn’t a decision to be taken lightly. Here’s a nuts-and-bolts and behind-the-scenes look at how Help Scout migrated design systems from Sketch to Figma. (smashingmagazine.com)

Modern JavaScript features you may have missed

Jimmy Breck-McKye shares some modern JS features that didn’t get much airtime when they first came out. (breck-mckye.com)

Line Awesome — Free Beautiful Icon Font (icons8.com)

What’s New In DevTools (Chrome 79) (developers.google.com)

GitBook – Document Everything (gitbook.com)

Exciting new features in Vue 3 (vueschool.io)

Inspiration

UX Design Process Best Practices (medium.com)

Smashing Podcast Episode 1 (smashingmagazine.com)

Jobs

Junior Designer at Hyped

Fast paced growth and exciting upcoming projects have necessitated the next stellar designer, you, to join our team. All the usual startup perks are included – unlimited coffee and beer, dogs in the office, casual everyday, competitive salary. (hyped.com)

Senior Product Designer at Square

We are looking for a senior-level Product Designer to drive design execution for our Commerce Platform efforts – including horizontal services like Prices, Identities, Catalog, Orders, and Analytics & Reporting. Commerce Platform offers a unique design challenge that requires designers to design for many products and platforms in parallel. (squareup.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Debugging Front End is not only a matter of tech (uxdesign.cc)

The post Web Design Weekly #370 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #369

Headlines

The Iceberg of React Hooks

Without in-depth knowledge, performance problems can arise and code complexity can increase due to subtle bugs and leaky abstractions. In this post, Sandro Dolidze demonstrates common problems and ways to fix them. (medium.com)

Browser Engine Diversity (css-tricks.com)

Articles

Investigate animation performance with DevTools

In this post, Milica Mihajlija covers how browser rendering works and how to navigate DevTools to diagnose animation performance issues. (calibreapp.com)

Variable fonts & the new Google Fonts API

An article that covers what the new Google Fonts API means for developers and some examples to get started quickly. (rwt.io)

An Explanation of How the Intersection Observer Watches

Travis Almand look at how to use Intersection Observer Watches, how they works and what exactly they provide to us as developers. (css-tricks.com)

React Lazy: a take on preloading views

Maxime Heckel explains how to add preloading to your route based code split apps. (maximeheckel.com)

Two Browsers Walked Into a Scrollbar (filamentgroup.com)

Tools / Resources

Working with GitHub Actions

GitHub Actions are still in beta and are changing quickly. But if you are looking to get started the possibilities are endless. This guide is mostly about pointing to documentation and exploring some fun ways to use GitHub Actions. (jeffrafter.com)

Sharing TypeScript Code Between Web and React Native

John Rumble shares some of the challenges his team has encountered when sharing code between their existing monorepo built with webpack and their new React Native app which is all TypeScript. (atomicobject.com)

Visual Regression Testing in Design Systems

Visual regression testing in a design system helps detect unintended changes. Patrick Fulton explains this type of testing and shares some effective tools for implementing it. (seesparkbox.com)

React Native 0.61 with Fast Refresh (facebook.github.io)

The perfect responsive menu (polypane.rocks)

Moving beyond console.log() (gitconnected.com)

Inspiration

What my online course generated (indiehackers.com)

Our Current Stack (codepen.io)

Jobs

Frontend Engineer at Cuvva

We’re looking for a mid to senior front-end software engineers who have worked in engineering teams within high-growh, high-scale startups, who will operate with a high level of autonomy. You must care deeply about building applications with well thought out architecture, and a very keen eye for detail and precision. (https://www.cuvva.com)

Product Designer at Postlight

We’re looking for a thoughtful and passionate Product Designer to join our team. You will become a central part of the product team, working directly with product managers and clients to solve big problems and alongside our engineers to build performant, user-centric products for the web and mobile. (postlight.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Practical Ways to Write Better JavaScript (stackoverflow.blog)

The post Web Design Weekly #369 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Wed Design Weekly #368

Headlines

The Ugly Truth about Design Systems

Mark Boulton shares his concerns he has with the current thinking of what constitutes a good design system in our industry. (markboulton.co.uk)

Caniuse and MDN compatibility data collaboration (mozilla.org)

Sketch version control & design workflow management.

Abstract: Design workflow management for product design teams using Sketch. Sign your team up for a free, 14-day trial today. Get a Free Trial. (abstract.com)

Articles

The problem with tooltips and what to do instead

Although tooltips allow you to squeeze additional information on screen, they have a number of problems. Adam Silver explains some of the downsides of tooltips and what to do instead. (adamsilver.io)

The Big O Notation – An Introduction

Big O notation is used in computer science to describe the performance or complexity of an algorithm. If you have heard of the term but don’t understand it, this is a great starting point. (dev.to)

Overflow And Data Loss In CSS

In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content. (smashingmagazine.com)

Trim the Fat From Your Bundles

In this post, Eyal Eizenberg goes over a real world example from his work at Wix where he was able to trim the bundle size by about 80% using Webpack Analyzer and React Lazy/Suspense. (wix.engineering)

Making Instagram faster (instagram-engineering.com)

Tools / Resources

Firefox 69

Version 69 features a number of nice new additions including JavaScript public instance fields, the Resize Observer, Microtask APIs, CSS logical overflow properties and lots more. (mozilla.org)

How to learn D3.js

An amazing resource that covers all things D3.js built by Amelia Wattenberger. (wattenberger.com)

Can I Email

A website similar to Can I Use dedicated to support in email clients. (caniemail.com)

Settings to emojify and prettify your terminal (stefanjudis.com)

How to do a code review (github.io)

React Rally 2019 (youtube.com)

VSCode Basics (egghead.io)

Inspiration

Finding Creative Inspiration in Collaboration (medium.com)

Smashing Magazine Is Thirteen! (smashingmagazine.com)

Jobs

Product Designer at Daily Harvest

As an early member of the Product Design team, you will play a critical role in bringing our product and brand vision to life in our iOS app and on the web. In this role, you will create useful, educational, and inspirational experiences that will enhance our customer’s interactions with Daily Harvest. (daily-harvest.com)

Senior Designer at Relevant

We’re looking for a designer to help us correct this imbalance by bringing simple, beautiful software to healthcare non-profits across the U.S. As our first design hire, you’ll have the opportunity to have a major impact across the company. (relevant.healthcare)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

My favorite CSS trick (dev.to)

The post Wed Design Weekly #368 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #367

Headlines

Where did the web’s personality go?

Is the internet boring now? Jake Underwood reflects on the years gone by and asks the questions, where did the web’s old personality go? Why did it leave? And how do we get it back? (invisionapp.com)

What happens when you open a new install of a browser (twitter.com)

Sponsor Web Design Weekly and reach over 30,042 passionate designers and developers

Articles

Faster Image Loading With Embedded Image Previews

The Embedded Image Preview technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data. (smashingmagazine.com)

Designing address forms for everyone, everywhere

Virginia Start shares a 5-step guide for designing global addresses that she devised during her research for Shopify’s International team. (shopify.com)

Logic-less JSX

This article presents approaches that we can use to keep the mess out of our JSX, and make our code more readable and maintainable. (verekia.com)

CSS Can Do This… And It’s Terrifying (aaron-powell.com)

Tools / Resources

Find Your Minute of Mindfulness

If you want the benefits of meditation–reduced anxiety, relaxed calm, improved focus–but don’t enjoy the practice of meditation, you should try this. Cactus is designed to help you find a minute of mindfulness and provides a private place for your thoughts. And it’s free. (cactus.app)

PWA Asset Generator

A handy tool that automatically generates splash screen and image assets for your Progressive Web App in order to provide native-like user experiences on multiple platforms. (github.com)

Grab-and-go layouts for React

Includes code examples for Rebass, Theme UI, and Emotion. (react-layouts.com)

Craft 3.3 Released with GraphQL and Headless Mode (craftcms.com)

Reactime: A Time Travel Debugger for React (github.com)

Color Tools For Designers (medium.muz.li)

Inspiration

Jeremy Keith – Building The Web (youtube.com)

Intercom’s New Design Site (intercom.design)

Jobs

Designer at Mailchimp

We’re looking for a Designer to join our Brand Design team. This role will collaborate with other designers to execute a variety of creative projects that make working at Mailchimp a wonderful experience and elevates our brand to our customers and the communities we serve. (mailchimp.com)

UX/UI Designer at Homebot

Homebot is looking for a highly collaborative UX/UI Designer that has a passion for taking complex problems and distilling them down into a beautiful, simple experience for the user. (homebot.ai)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Why I have a problem with React (sonniesedge.net)

The post Web Design Weekly #367 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #366

Headlines

Learning CSS by Reading Specifications

Hui Jing sheds some light into why reading CSS specifications is immensely helpful to build a strong understanding of CSS. (chenhuijing.com)

The tools we use: Challenging dogma in the design process (intercom.com)

All-in-one visual testing and review platform

Visual testing enables you and your team to catch visual bugs and review UI changes across browsers and responsive widths automatically. (percy.io)

Articles

The power of visual in product design

An article that looks into how visual elements affect our perception, recognition and memory by interacting with digital products. (uxdesign.cc)

Using Native JavaScript Modules in Production Today

Philip Walton explains how to bundle modules (including the use of dynamic import and granular code splitting), explains why it’s usually more performant than classic scripts and shows how he handle browsers that don’t support modules. (philipwalton.com)

JavaScript to Know for React

Kent C Dodds shares a few JavaScript features that he highly recommends learning to become more effective with building applications with React. (kentcdodds.com)

CSS Units Explained

CSS has several options for which units to use when determining the size of various CSS properties. Learning all your options for CSS units can be key for styling in a way that’s easy to manage and looks great on any screen. (alligator.io)

Largest Contentful Paint

Making it easier to know when a page’s important content has loaded. (web.dev)

Tools / Resources

Useful Pens for Everyday Front End Development

A collection of CodePen pens put together by Sarah Drasner that are super useful for everyday dev. (codepen.io)

New React DevTools

A lot has changed in version 4. At a high level, this new version offers significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. (reactjs.org)

Extra CSS

A CSS Houdini library for making your site a little more extra. (extra-css.netlify.com)

Technical Writing with Rachel Andrew (shoptalkshow.com)

How to Jest Snapshot Test the Difference (robinwieruch.de)

Lazy load embedded YouTube videos (css-tricks.com)

Microsoft Edge Beta (windows.com)

Inspiration

A Year of Working Remotely (mikeindustries.com)

Work Responsibly (workresponsibly.org)

Jobs

Web Designer

Komoot is Europe’s most popular cycling and hiking app. Our technology empowers millions of people to get outside and discover more of the great outdoors. We’re now looking for a Web Designer who enjoys clean code and great design to help us change the way people explore! (komoot.com)

Product Designer at BlueVine

As a Product Designer at BlueVine, you’ll directly impact the look and feel of our product and lead strategic initiatives. You’ll be involved with launching new product, scaling our platform to work across multiple product lines and ensuring the platform works for small businesses, channel and strategic partners. (bluevine.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Is CSS a programming language? (overflowaudible.com)

The post Web Design Weekly #366 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #364

Headlines

All the best engineering advice I stole from non-technical people

Marianne Bellotti passes on some great advice that has stuck with her during the process of becoming a better manager. (medium.com)

Domino’s is locked in a legal battle over the future of web design. (fastcompany.com)

Sponsor Web Design Weekly and reach over 30,142 passionate designers and developers

Articles

Native lazy-loading for the web

Starting with Chrome 76, you’ll be able to use the new “loading” attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library. This article dives into the details. (web.dev)

Tips to Help You Avoid React Hooks Pitfalls

React Hooks require a bit of a change in the way you think about React Component Lifecycles, State, and Side Effects. If you’re not thinking about React Hooks properly it can be easy to fall into problematic scenarios. (kentcdodds.com)

Is UX writing boring?

Having troubles standing out? Lack motivation when it comes to UX writing? Hopefully this post by Steve Howe re-sparks that passion to go above and beyond. (medium.com)

Multi-column manipulation

Heydon Pickering shares some of his recent tinkering with multi-column layout. (every-layout.dev)

Tools / Resources

How to fetch data with React Hooks?

In this tutorial, Robin Weruch explains how to fetch data in React with Hooks by using the state and effect hooks. He also dives into implementing custom hooks. (robinwieruch.de)

Paaatterns

A collection of beautiful patterns for all vector formats. (lstore.graphics)

Rebass – React primitive UI components (rebassjs.org)

Duotone – Font Awesome Icons (fontawesome.com)

Electron version 6 (electronjs.org)

Inspiration

Making a Realistic Glass Effect with SVG (css-tricks.com)

Gatsby Theme Jam (gatsbyjs.org)

Jobs

Senior Front-end Engineer at WeTransfer

We are looking for someone to join the Paste team with all things technical. You’ll be responsible for the design, implementation and maintenance of key features of Paste. Together with the team you will take your ideas from implementation to production. (wetransfer.com)

Front-end Developer at Clock

This is a fantastic opportunity for a Front-end Developer to further their career and really make their mark in an established and growing agency that provides genuine opportunities to develop your skill set. (clock.co.uk)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

2019 Design Systems Survey (seesparkbox.com)

The post Web Design Weekly #364 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #363

Headlines

Using the Web On A Budget

Data can be prohibitively expensive, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight data budget and offers practical tips for reducing our websites’ data footprint. (smashingmagazine.com)

Jumpstart Your Career in User-Centered Design (UX/UI)

Improve the usability and accessibility of websites, apps, and more with a new online certificate in User-Centered Design (UX/UI), offered from Parsons at Open Campus. Get started now. (newschool.edu)

Articles

Why React Hooks?

The marketing pitch for Hooks is that you’re able to use state inside function components. In reality, Hooks are much more than that. They’re about improved code reuse, composition, and better defaults. Tyler McGinnis explains. (tylermcginnis.com)

Truths about digital accessibility

Creating, maintaining, or evaluating accessible technology? Here are some things to keep in mind. (ericwbailey.design)

Don’t Build That App

Luke Jackson demonstrates how to build up a modern dev environment (like create-react-app) just by using “the platform” and squeezing out every drop of potential from the latest language features. (formidable.com)

What I Like About Vue

Dave Rupert has been enjoying working with Vue and thought he’d compile a simple list of the things he likes about it. (daverupert.com)

CSS Mistakes

I’m not a fan of the title of this post but it actually has some good tips for people getting into writing CSS. (painlesscss.com)

Tools / Resources

Form design

This guide is quick and to the point — a whistle stop tour of the knowledge Adam Silver has accrued over the years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics. (adamsilver.io)

Open Source Gatsby Themes

High-quality and customizable Gatsby themes to quickly bootstrap your website. (themes.lekoarts.de)

Linc in 3 Minutes – Continuous Delivery for Front-end Applications (linc.sh)

Blazing Fast WordPress Sites With Gatsby (scotch.io)

What’s new in Streamline 3.0 (medium.com)

Font Style Matcher (meowni.ca)

Inspiration

Ooops, I guess we’re full-stack developers now. (full-stack.netlify.com)

A Beginner’s Journey to Launching a Website (css-tricks.com)

Jobs

User Experience Researcher at TaskRabbit

We’re looking for an experienced user researcher to help us understand and empathize with our Clients and Taskers so we can make informed and data-driven decisions when solving product challenges. (taskrabbit.com)

Senior UI/UX Designer at ClickView

We’re looking for someone who loves to both take on challenging design problems and rapidly iterate designs based on feedback from our UX Researcher and most importantly, our customers. (clickview.com.au)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Designing in tools like Sketch, Figma, etc. seem like a waste of time. (twitter.com)

The post Web Design Weekly #363 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #362

Headlines

Design tools are holding us back

Tom Johnson feels that our tools are still using methods, workflows, and features from graphic and visual design. Which is pretty true. A solid rant. (uxdesign.cc)

The Modern Front-End Design System Stack (jxnblk.com)

Sponsor Web Design Weekly and reach over 30,042 passionate designers and developers

Articles

Designing And Building A PWA Without A Framework

The first of a three part series that looks at designing and building a simple Progressive Web Application called ‘In/Out’, built without a framework. (smashingmagazine.com)

The Simplest Way to Load CSS Asynchronously

There are several ways to make CSS load asynchronously, but none are as intuitive as you might expect. Scott Jehl explains. (filamentgroup.com)

When to break up a component into multiple components

There are various reasons to split code into components. In this post Kent C Dodds looks into it and explains the pros and cons. (kentcdodds.com)

A Look Inside the Slack rewrite

A new version of Slack is rolling out, built from the ground up to be faster, more efficient, and easier to work on. This post digs into how they went about doing the rewrite and why. (slack.engineering)

Tools / Resources

Fundamentals of JavaScript

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript – the set of core skills you should know before branching off into other frameworks, libraries, etc. (syntax.fm)

Changefeed App

A beautiful changelog for your product in seconds. Keep your users up to date and engaged with every update your team ships. (changefeed.app)

Treat

Themeable, statically extracted CSS‑in‑JS with near‑zero runtime. (github.io)

Understanding Progressive JPEG and WebP Formats (shopify.com)

Understand the JavaScript SEO basics (developers.google.com)

History and effective use of Vim (begriffs.com)

Introduction to React (jscomplete.com)

Inspiration

The History of Web Design (thehistoryofweb.design)

Repo Lovers (repolovers.com)

Jobs

Product Designer at Sticker Mule

We are looking for a Sr. Product Designer to help create and refine features that drive growth and make our customers happier. (stickermule.com)

Designer at Sprout Social

We’re looking for Product Designers to join our team as we continue to build beautiful, helpful and easy-to-use software that powers human connection. (sproutsocial.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Twitter’s Redesign Isn’t About You (medium.com)

The post Web Design Weekly #362 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #361

Headlines

The Future of Websites: Headless CMSs

In order to really grasp the elegance of headless CMS – and its possibilities – you have to cut through the clutter and understand how they work fundamentally. Dan Fries explains. (scotch.io)

Get Your Free .design Domain Name

Thinking of building your portfolio? .design is like .com & .net, but it’s more relevant to what you do as a designer. Claim yours today. (porkbun.com)

Articles

Building a design system — where to start?

In this post, Shane Williams gives some great advice on how and where to start if you are lost. Even if you have a design system in place he drops some solid knowledge. (uxdesign.cc)

CSS Lists, Markers, And Counters

In this article Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters. (smashingmagazine.com)

Why is my webpack build slow?

Sam Saccone has some hot tips to help you understand and put in place some system to address this issue. Great article. (samsaccone.com)

Tools / Resources

Popups – Problematic Trends and Alternatives

In this article, Anna Kaley discusses key factors to consider, along with realistic alternatives to popups that preserve the sites intent and the users’ experience. (nngroup.com)

React Fundamentals: Props vs State

A simple and informative post that dives into the difference between props and state in React. (kentcdodds.com)

Eva Design System

Customisable Design System easily adaptable to your brand. (colors.eva.design)

The Many Ways to Include CSS in JavaScript Applications (css-tricks.com)

Typography exercises to improve your skills (dribbble.com)

GraphQL and WordPress (syntax.fm)

Next.js 9 (nextjs.org)

Inspiration

Shape Up – Stop Running in Circles and Ship Work that Matters (basecamp.com)

Why I Stopped Using Multiple Monitors (hackernoon.com)

Jobs

UI/UX Designer at Campspot

Campspot is looking for a talented UI/UX Designer to join our team in either our Denver or Chicago office. Our ideal candidate is someone who has a wide variety of skills and is able to contribute across the many steps of the design process. (campspot.com)

Product Designer at Braze

Are you a critical thinker? Are you willing to challenge ideas and receive feedback? Are you comfortable with ambiguity? We are seeking a fearless and passionate Product Designer to join our growing Product Design team. (braze.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Popup Trombone (matthewrayfield.com)

The post Web Design Weekly #361 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #360

Headlines

Chaos Design

Adam Morse’s epic write up from a recent talk he gave. Grab a beer or a coffee and enjoy this wonderful thoughtful piece. (mrmrs.cc)

The World-Wide Work (vimeo.com)

Sponsor Web Design Weekly and reach over 30,142 passionate designers and developers

Articles

Why Did I Have Difficulty Learning React?

Even though Jonathan Snook talks about React and the other technologies that are generally used with it, this is a very applicable story that we can all gain some inspiration from. (snook.ca)

How Google Pagespeed works

It’s no secret that speed has become a crucial factor in increasing revenue and lowering abandonment rates. In this post, Ben Schwarz uncovers how PageSpeed calculates it’s critical speed score. (calibreapp.com)

How we built a component library that people enjoy using

Chase McCoy shares some of the tools that his team used to build a component library that they all love using. (medium.com)

Frank Chimero on causing ‘good trouble’

Frank Chimero shares what he’s up to, how he feels about modern working and what he’s got in store next. (creativeboom.com)

Developing a Robust Font Loading Strategy for CSS-Tricks

Great to get an insight into the super talented mind of Zach Leatherman on how he went about developing the font strategy for CSS-Tricks. (zachleat.com)

Choose Boring Technology (boringtechnology.club)

Tools / Resources

CSS Custom Properties

In this article, Miriam Suzanne takes a deeper dive into the CSS Custom Properties for Cascading Variables. (smashingmagazine.com)

Components AI

A new way to explore generative design systems (components.ai)

Sizzy

The browser made for responsive design (sizzy.co)

CodeSandbox Templates (codesandbox.io)

The cost of JavaScript in 2019 (v8.dev)

Gatsby Theme Jam (gatsbyjs.org)

Inspiration

Figma’s Dylan Field on building design tools (dribbble.com)

The Designer’s Growth Model (medium.com)

Jobs

Product Designer at Visible

We are looking for a high-impact product designer who is eager to take ownership of a product and continue to shape the complete user experience. You’ll join our product team and help drive our next phase of growth. (visible.vc)

Front-End Developer at Endo

Enodo is looking for a talented front-end developer to join our fast-moving, lean product development team. (enodoinc.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

User Inyerface – A worst-practice UI experiment (userinyerface.com)

The post Web Design Weekly #360 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #359

Headlines

What I Learned Co-Founding Dribbble

Dan Cederholm reflects on what he has learned from building a community for designers, running a business and navigating some tough life years. Super inspiring stuff. (medium.com)

Why I (Still) Love Tech (wired.com)

Sponsor Web Design Weekly and reach over 30,162 passionate designers and developers

Articles

Optimizing Google Fonts Performance

Google Fonts are easy to implement, but they can have a big impact on your page load times. Danny Cooper explores how we can load them in the most optimal way. (smashingmagazine.com)

The 10 Component Commandments

This article gives you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use. (dev.to)

8 DOM features you didn’t know existed

Louis Lazaris shares eight lesser-known DOM features that have strong browser support. He goes into details about each one with some great interactive demos. (logrocket.com)

One simple trick to optimize React re-renders (kentcdodds.com)

Tools / Resources

How To Create A PDF From Your Web Application

In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you. (smashingmagazine.com)

The Layout Instability API

Detect unexpected layout shifts in JavaScript. (web.dev)

Dark Mode JS

This handy package utilises the matchMedia API and its listeners, in combination with the prefers-color-scheme media query, in order to fire functions whenever you’re in Dark Mode. (github.com)

Webhint

A linting tool that will help you with your site’s accessibility, speed, security and more. (webhint.io)

React Fiber Deep Dive with Dan Abramov (youtube.com)

Styled Components version 5 (medium.com)

Inspiration

Making Yourself Uncomfortable To Grow (syntax.fm)

Three Predictions From the State of CSS 2019 Survey (css-tricks.com)

Jobs

Front-End Developer at Endo

Enodo is looking for a talented front-end developer to join our fast-moving, lean product development team. (enodoinc.com)

Product Designer at Visible

We are looking for a high-impact product designer who is eager to take ownership of a product and continue to shape the complete user experience. You’ll join our product team and help drive our next phase of growth. (visible.vc)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

The Technical Side of Design Systems (bradfrost.com)

The post Web Design Weekly #359 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #358

Headlines

Thinking Beyond Screens

In the attention economy, we’re all fighting for our users’ attention. This post covers how to avoid dark UX patterns and practice responsible digital design. (framer.com)

Relearn CSS layout (every-layout.dev)

Collect visual feedback on your designs.

BugHerd pins feedback directly to the page. It’s like using sticky notes on a website. Try BugHerd Free. (bugherd.com)

Articles

Drop caps & design systems

Ethan Marcotte reminds us that most design systems work is rarely flashy or sudden. Rather, it involves communication, iteration, and slow, careful research. (voxmedia.com)

Good Code Reviews, Better Code Reviews

Gergely Orosz’s personal take on what good code reviews look like and what great ones – better than good – are. (blog.pragmaticengineer.com)

How We Write Full Stack JavaScript Apps

This post is aimed at those interested to learn how Elie Steinbock and his team build full stack apps. (medium.com)

Firefox: The Evolution Of A Brand

A peek behind the curtain of how the new brand look was born. (blog.mozilla.org)

Things I Learnt The Hard Way (blog.juliobiason.net)

Tools / Resources

Everything You Need to Know About Date in JavaScript

Date within JavaScript land can actually be quite simple if you know what to watch out for. In this article, Zell Liew walks you through everything you need to know about the Date object. (css-tricks.com)

Tips for Effective Product Design

A handful of useful tips to help you create the best product you can for your users. This article covers effective ways to communicate system status and how using progressive disclosure can reduce visual load. (timgale.me)

Using Cypress to Write Tests for a React Application

Cypress is just one end-to-end testing framework that does all that clicking work for us and that’s what this post dives into. (css-tricks.com)

Gatsby site search with Lunr.js

Building site search for a static website isn’t easy. Here’s how you can leverage Lunr.js to create search components that are accessible, fast and extensible. (assortment.io)

Build a Todo App in React Using Hooks (upmostly.com)

List of (Advanced) JavaScript Questions (github.com)

Plugins are coming to Figma (figma.com)

Inspiration

Digital Craft Symposium – 2019 (youtube.com)

All Emojis (listemoji.com)

Jobs

Front End Engineer at Goodreads (Amazon)

Join Goodreads to serve more that 80 million of our customers and build UX for reviews, emails, tools for authors and librarians, and more! You’ll primarily be focused on the display layer but you’ll have opportunities to work full-stack (goodreads.com)

Senior Product Designer at Lumosity

As Product Design Lead on the Mindfulness team, you’ll work in close collaboration with Product Managers, Content Creators, Engineers, UX-Researchers, and other Designers to meet the needs of Lumosity customers. (lumosity.com)

The post Web Design Weekly #358 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #357

Headlines

Micro Frontends

In this article Cam Jackson describes a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. (martinfowler.com)

The State of CSS 2019 (freecodecamp.org)

Be: Find the perfect pre-built website for any design project (450+ examples)

Browse through 450+ pre-built websites that cover 40+ industries and businesses. From corporate websites to blogs and portfolios, you’ll find exactly what you need to the tiniest detail. (themes.muffingroup.com)

Articles

The CSS Mindset

A great article by Max Böck that helps shine some light on getting into the CSS mindset to produce better CSS and enjoy it. (mxb.dev)

The Problem With Web Components

Web components are becoming increasingly popular within the web community. They offer a way to standardise and encapsulate JavaScript-enhanced components without a framework. However, web components have a number of drawbacks which this post dives into. (adamsilver.io)

Styling In Modern Web Apps

A detailed dive into the different ways of organising styling in modern applications which often have complex interfaces and design patterns. (smashingmagazine.com)

Your first performance budget with Lighthouse

A look into how you can set up a performance budget and enforced it to help you develop faster sites. (bitsofco.de)

Keep it simple

One thing that is often forgotten about accessibility is that keeping things simple and utilising semantic HTML gets you most of the way towards providing a fully accessible experience for everyone. (andy-bell.design)

Truths I unlearned as junior developer (monicalent.com)

Tools / Resources

Theme UI

Build consistent, themeable React UIs based on design system constraints and design tokens. (theme-ui.com)

Is Your Design System Stable?

The value of a design system is being able to build better products faster by making design reusable. This post digs into 4 ways to streamline the testing process to make them stable. (medium.com)

Responsive Image Breakpoints Generator (responsivebreakpoints.com)

8 Useful JavaScript Tricks (devinduct.com)

Medium to own blog (github.com)

ReactEurope 2019 (youtube.com)

Inspiration

What does React Beautiful DND cost to maintain? (dev.to)

Does the perfect portfolio exist? (itsnicethat.com)

Jobs

Marketing Designer at Everplans

Everplans is distributed direct-to-consumer, as well as through financial professionals, insurance companies, and employers. We are looking for an ambitious designer to join our growing team and help take our brand to another level creatively. (everplans.com)

Product Designer at Passport

Are you passionate about communicating ideas and products to users in creative, usable and visually compelling ways? As a Digital Product Designer, you’ll work with our product, development and marketing teams to design the future of our web and mobile applications leveraged by millions of users. (passportinc.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Periodic Table of Amazon Web Services (awsgeek.com)

The post Web Design Weekly #357 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #356

Headlines

You Got This

Through the rosy lens of memory, learning HTML and Photoshop back in the day was a breeze. Now I’m learning new tech, and it’s hard. Maybe you’re in the same boat. (automattic.design)

How to do hard things (drmaciver.com)

Sponsor Web Design Weekly and reach over 30,162 passionate designers and developers

Articles

The State of Fluid Web Typography

Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used? (betterwebtype.com)

Front-End Documentation, Style Guides and the Rise of MDX

This article is a broad overview of the tools available for writing documentation and for building style guides. Not all the tools listed here make use of MDX but it’s increasingly being incorporated into documentation tooling. (css-tricks.com)

Accessible Icon Buttons

Sara Soueidan shares some insights into the different ways you can make your icon-only buttons accessible. (sarasoueidan.com)

Prioritizing

In this post, Sarah Drasner explores how to sift through the inevitable weight of our to-do lists so that we can be efficient and clear with our direction. (css-tricks.com)

Reducing motion with the picture element (bradfrost.com)

Tools / Resources

Storyblok

Storyblok has the user experience of a page builder with a modern headless architecture behind. This gives the developer freedom and the editor a self-explaining and intuitive interface. (storyblok.com)

Digging Into The Display Property

Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior. (smashingmagazine.com)

The future is dark

Things to keep in mind when designing a dark mode for your app or websites. (medium.com)

Eleventy

A simpler static site generator. (11ty.io)

Everything You Ever Wanted to Know About inputmode (css-tricks.com)

How to use array reduce for more than just numbers (jrsinclair.com)

JavaScript Clean Code – Best Practices (devinduct.com)

Material-UI v4 is out (medium.com)

GraphQL Predictions (graphqleditor.com)

Inspiration

Modus – a place designers can level up their skills and knowledge. (modus.medium.com)

React with Dan Abramov (softwareengineeringdaily.com)

Jobs

Senior Product UI/UX Designer at Highrise

We are looking for a skilled and enthusiastic UI/UX artist excited to make the world both more accessible and fun. You will be working to construct delightful user experiences around play and friendships. (joinhighrise.com)

Digital Designer at Pusher

As a Digital Designer at Pusher, you’ll be able to take ownership of those experiences across our marketing site and other web projects. Alongside others, you’ll translate our vision, content, and brand identity into beautiful, interactive journeys for our customers on the web. (pusher.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

GitHub Sponsors – a new way to contribute to open source (github.blog)

The post Web Design Weekly #356 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #355

Headlines

What Does it Mean to Be “Full Stack”?

If you are confused about the term “Full Stack” this post by Chris Coyier might shed some light on what it means in this day and age. (css-tricks.com)

Google Fonts is Adding Font-Display (zachleat.com)

Articles

Unraveling the JPEG

JPEG images are everywhere in our digital lives, but behind the veil of familiarity lie algorithms that remove details that are imperceptible to the human eye. This produces the highest visual quality with the smallest file size, but what does that look like? (parametric.press)

Authentication in React Applications

Kent Dodds explains how to handle user authentication in modern React Applications with context and hooks. (kentcdodds.com)

5 Pillars of a Design System

Design Systems are beasts that want to get tamed. With the right preparation, diligence and perseverance we can get it done. Tim Schoch shares his advice. (medium.com)

Refactoring Backend Engineering Hiring at Slack

A look into how one of the most powerful tech company is revamping their hiring process. (slack.engineering)

The new evergreen Googlebot (googleblog.com)

Tools / Resources

Faster smarter JavaScript debugging in Firefox DevTools

So much has been done to improve the Firefox DevTools in recent months. This post highlights the main changes and shares what the future holds. Even if you happen to use the Chrome DevTools this post is worth a read. (mozilla.org)

GitHub Package Registry

With GitHub Package Registry you can safely publish and consume packages within your organization or with the entire world. Exciting times. (github.com)

SVG Properties and CSS

A deep and thorough dive into all of the SVG elements that are available as well as the CSS properties to style them. (css-tricks.com)

TypeScript 3.5 Release Candidate (microsoft.com)

Tailwind CSS Version 1 (tailwindcss.com)

Inspiration

I’ve Forgotten More JavaScript Than Most People Ever Learn (gitconnected.com)

Google I/O 2019 – Definitive Guide to Design (design.google)

Jobs

Layout Designer at Canva

Canva’s templates team aims to build the world’s best design marketplace with a library of designs that offer our users a wide variety of usable and dynamic content, and to do that, we need the help of talented designers that can create and curate amazing content, but also help pave the way for the future of our template library. (canva.com)

Senior Product Designer at Mokriya

We are growing our team of Product Design experts, and we’re looking for people who share our passion for creating products people love. (mokriya.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Oh shit, git! (ohshitgit.com)

The post Web Design Weekly #355 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #354

Headlines

What is design?

Berlin based designer, Koos Looijesteijn does a pretty great job at looking at the different angles and coming up with a concise answer in this post. (kooslooijesteijn.net)

Inside Microsoft’s surprise decision to work with Google (theverge.com)

Articles

Implementing a Mockup: CSS Layout Step by Step

In this post, Dave Ceddia shows us a way to approach layouts wholistically, as a cohesive problem to be solved. Top notch post. (daveceddia.com)

Technical debt — leverage or liquidate?

It’s not always a case of debt = bad. Used intelligently, technical debt provides quick fixes to problems and boosts innovation. However, you’ll soon know when your tech debt’s not serving you well. (blog.ably.io)

Dear Client, Here’s Why That Change Took So Long

Al Tenhundfeld shares a letter that he has written variations of numerous times over the years. The letter has some great takeaways to help communicate with stakeholders the next time we receive a similar question. (simplethread.com)

Making the Move from jQuery to Vue

This guide is more for people who may be coming from years of jQuery experience and want to see how things can be done with Vue. (css-tricks.com)

Tools / Resources

The Web Project Guide

Each month, two chapters are posted about some aspect of the web project process – from understanding your site’s users to understanding the ins and outs of server maintenance. It’s sure to be a great resource. (webprojectbook.com)

Understanding Shadow DOM

A super informative post by Faraz Kelhini that explores various aspects of the Shadow DOM. If it’s a new concept to you, this is a great read. (blog.logrocket.com

Using GitHub Issues for Blog Comments (danyow.net)

Remote Development with VS Code (visualstudio.com)

The Basics around React and ES6 (paper.dropbox.com)

React Patterns and Templates (codepen.io)

Inspiration

Selling UI Tools – Here is what we learned (freecodecamp.org)

Building a JavaScript guitar pedalboard (trysmudford.com)

Jobs

Creative Director at Plato

As Creative Director you will be responsible for managing Plato’s day-to-day creative work, working with our distributed network of designers to create and maintain an exceptional quality bar of work. (useplato.com)

Senior Brand Designer at Mode

As a Brand Designer on Mode’s Design team, you’ll help refine and up-level our brand as we bring Mode to organizations everywhere. You’ll bring to life engaging, cohesive experiences for analysts, data scientists, and other data pros across our marketing and content sites, decks, print materials, cultural artifacts, and more. (mode.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

What does Unsplash cost in 2019 (medium.com)

The post Web Design Weekly #354 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #353

Headlines

A Website is a Car and Not a Book

Do you feel your craft is undervalued? Are you losing the passion? This little article by Robin Rendle might be exactly what you need to read before getting into the day. Maybe you can even pass it around your workplace so others understand what you do. (css-tricks.com)

Front-end Developer Handbook 2019 (frontendmasters.com)

Get a Free .design Domain Name For Your Website

Thinking of building your portfolio? Brand your website with a .design domain name. Your .design name includes free email & Site Builder. (porkbun.com)

Articles

Measuring Animation Performance with Dev Tools

In this post, Chloe Hwang takes a look at the most important part of performance: how to measure and diagnose bottlenecks. (viget.com)

Art Direction For The Web Using CSS Shapes

Andy Clarke goes beyond basic of CSS Shapes and shows us how we can use them to create five types of distinctive and engaging layouts for art-directed designs. (smashingmagazine.com)

Lessons Learned Building Our Website With Craft CMS

Lee Munroe shares some things this team love about Craft and what they learned along the way during a recent rebuild. (onesignal.com)

You Are Not Google

Next time you need to decide on some technology it might be a good idea to follow a decision process like UNPHAT which this post explains. (bradfieldcs.com)

Long-form websites and typography (lawler.io)

Tools / Resources

Design Systems

A Figma publication for design systems creators, designers, developers and managers. (designsystems.com)

Testing for Visual Regressions with Percy

Paul Ryan explains how to setup Percy within our projects along with integrating CircleCI into the workflow. (css-tricks.com)

The Web Developer’s Guide to DNS (rjzaworski.com)

Form Validation with Vuelidate (css-tricks.com)

jQuery 3.4.0 Released (jquery.com)

MDX v1 (mdxjs.com)

Inspiration

How I Aligned My Side Project with a Full-Time Career (indiehackers.com)

9 Ways to Stay Sane While Working Remotely (syntax.fm)

Jobs

Senior UX Designer at Ubuntu Designers

We are looking for an expert in current design thinking with an appetite for technology and innovation: you will be working on desktop applications as well as web applications for enterprise cloud services and an operating system for IoT and embedded devices, bringing exciting new projects to life and improving existing ones. (canonical.com)

Product Designer at Mixpanel

We are a small, collaborative team of multidisciplinary designers, and are looking for experienced product designers to help us dive deeper into our product vision. Our process always begins with product vision and is a highly collaborative between the product and design teams. (mixpanel.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Twitter Emoji (twemoji.twitter.com)

The post Web Design Weekly #353 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #352

Headlines

The Technical Debt Myth

Technical debt has become a widespread metaphor used to communicate the need for refactoring code — and it’s one that fills developers with feelings of dread. (helpscout.com)

Microsoft Edge preview builds: The next step in our OSS journey (windows.com)

Bildr Studio: Design + Development In An Integrated Workflow

Bildr Studio is a web-based design tool that is integrated with a full development environment for teams to create & publish production-ready apps. Eliminate hand-off and bring your developers in earlier to build the app as you design it. Test changes in real-time and then share, export, or launch. (bildr.com)

Articles

Native image lazy-loading for the web

In this post, Addy Osmani looks at the new loading attribute which brings native img and iframe lazy-loading to the web. (addyosmani.com)

UI/UX Patterns You Literally Cannot Design

A look into some of the patented UI elements/interactions that we as designers can’t replicate due to legal reasons. Quite a fascinating post. (medium.com)

Managing Z-Index In A Component-Based Web Application

The z-index property, despite all that’s written about it, is still widely misunderstood and mishandled. Adhering to some principles, however, we can easily avoid these issues. (smashingmagazine.com)

Redux to Hooks: A Case Study

After several years of using Redux for his projects Sergey Ryzhov decided to try the useReducer/useContext approach instead. Here is what he learnt. (staleclosures.dev)

Conservation of Energy in Web Development (gitconnected.com)

Tools / Resources

We refreshed Figma’s UI: An inside look at our process

For the past 6 months the Figma team have been working on a fresh coat of paint for Figma’s UI. In this post they reveal all the changes. From typography and layout to colour and iconography. (figma.com)

Editor.js

A block-styled editor. Each block is represented by a plugin. With lots of ready-to-use plugins this looks like it is worth keeping an eye on. (github.com)

Automate your WordPress development workflow (wordpressify.co)

React-Redux Version 7 (github.com)

Web development, illustrated. (illustrated.dev)

Inspiration

Dieter Rams designed products to last a lifetime (abc.net.au)

CSS Battle (cssbattle.dev)

Jobs

Product Designer at Mixpanel

We are a small, collaborative team of multidisciplinary designers, and are looking for experienced product designers to help us dive deeper into our product vision. Our process always begins with product vision and is a highly collaborative between the product and design teams. (mixpanel.com)

User Experience Researcher at BookBub

This is a highly collaborative role, in which you’ll have the opportunity to work with multiple product teams and many disciplines while conducting primary research as well as leveling up our collective research practice across the organization. Your work will help us create useful, usable, and delightful new products and features for our customers. (bookbub.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Stack Overflow’s annual Developer Survey Results (stackoverflow.com)

The post Web Design Weekly #352 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly