Web Design Weekly #351

Headlines

Simple & Boring

Chris Coyier has put together a meandering waltz through what other people have to say about simplicity. Entertaining and enlightening. (css-tricks.com)

What’s new on iOS 12.2 for Progressive Web Apps (medium.com)

Bildr Studio: Build The Real App As You Design It.

Bildr Studio is a new web-based tool for production teams to design, test and launch full-stack web applications to production. It allows designers and developers to collaborate together in real-time to bring their visions to life in a single environment. (bildr.com)

Articles

John Maeda: “In reality, design is not that important”

The head of inclusion and computational design at WordPress parent company Automattic thinks that designers should be more like supporting actors to the leading characters at tech companies – the developers and product managers. (fastcompany.com)

An Illustrated Guide to Map, Reduce, and Filter Array Methods

Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power. This post by Una Kravets is a great read if you are new to these concepts. (css-tricks.com)

Avoiding the “Boolean Trap” When Designing React Components

I’m a bit of fan of using booleans within simple React components but after reading this post by Filip Danić I’ll be reevaluating my process. (spicefactory.co)

Scope in CSS

Peter-Paul Koch explains CSS scope for JavaScript developers. (quirksmode.org)

Name It, and They Will Come (overreacted.io)

Tools / Resources

DropCSS is an unused CSS cleaner

It takes your HTML and CSS as input and returns only the used CSS as output. (github.com)

Blurred Borders in CSS

Ana Tudor shares some awesome CSS trickery on how to visually blur the border of an element. (css-tricks.com)

Email Me

Offer an interactive experience whenever a visitor clicks on an email link on your site. (emailme.chat)

Remove Image Background (remove.bg)

Deploy CodeSandbox to Netlify (netlify.com)

Inspiration

Lessons learned building a design system at scale (booking.design)

Untrusted – A JavaScript adventure game (alexnisnevich.github.io)

Jobs

Remote Visual Designer at School of Motion

We’re looking for a Visual Designer who can do a little UI, some graphic design, and bonus points if you understand the world of motion. (schoolofmotion.com)

Sr. Product Designer at HelloSign

If you’re passionate about designing intuitive interfaces that make the most daunting of tasks delightful, we want to hear from you. HelloSign is looking for an experienced UX designer to join our Product team. (hellosign.com)

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

Last but not least…

10 Lessons Learned Conducting Code Reviews (dev.to)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #350

Headlines

Design Interviewing

Kurt Varner offers some transparency and advice based on his own experience being an interviewer and hiring manager at Dropbox. (medium.com)

Design, meet organization.

What would you make if you had tools designed for the way you like to create? Step into the future of work with Airtable. (airtable.com)

Articles

Writing Resilient Components

Another epic post by Dan Abramov. If you you are interested in becoming a better developer this post is worth reading. A lot of focus is on React but I’m sure you’ll get something out of it. (overreacted.io)

The Psychological Trap of Freelancing

People who attach dollar signs to their time — or “value time like money” — tend to be overwhelmingly less happy than those who don’t, because their nonworking hours suddenly seem less important. (thecut.com)

Who has the fastest website in F1?

Jake Archibald compares the performance of 10 recently updated Formula One (the motor-racing sport) sites. He digs into the common issues and shares the tools and techniques used for testing. (jakearchibald.com)

Don’t let TypeScript slow you down

Vitaly Belman shares some ideas that might help you improve your productivity with TypeScript. (medium.com)

Do you really know how a lockfile works for yarn and npm packages? (snyk.io)

Tools / Resources

Web Design Made Easier with Version Control & Workflow

With Abstract, you can version Sketch files, request reviews, present work, collect feedback, and hand specs off for development. All from one place. (abstract.com)

An Introduction to Web Components

In this article, Caleb Williams discuss why Web Components are a great tool to deliver high-quality user experiences without complicated frameworks or build steps and that don’t run the risk of becoming obsolete. (css-tricks.com)

Getting started with PostCSS in 2019

PostCSS is a tool for transforming CSS with JavaScript plugins. It provides features via its extensive plugin ecosystem to help improve your CSS writing experience. (logrocket.com)

Sigle – A beautiful decentralized & open source blog maker (sigle.io)

Everything you need to know about Loading Animations (medium.com)

Tailwind CSS v1 – beta (github.com)

React Router v5 (reacttraining.com)

Inspiration

Confronting My Fears in the Hope of Retiring Early (indiehackers.com)

Web Design & Art History (webflow.com)

Jobs

Sr. Product Designer at HelloSign

If you’re passionate about designing intuitive interfaces that make the most daunting of tasks delightful, we want to hear from you. HelloSign is looking for an experienced UX designer to join our Product team. (hellosign.com)

Freelance Brand Designer at Plato Design

Plato is looking for a wide range of experienced design thinkers to help deliver interesting, useful design projects to their customers. As a freelance designer, you can be located anywhere and take on as many or as few projects as you’d like. (useplato.com)

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

Last but not least…

I Used The Web For A Day On Internet Explorer 8 (smashingmagazine.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #349

Headlines

Learning to Learn

Building for the Web is an overwhelming place. With so much information where does one start? Hopefully this article by Sarah Drasner can help guide you in the right direction. (css-tricks.com)

Developers revive first Web browser (home.cern)

Visual Composer’s new name and the confusing story behind it

The Visual Composer users have found themselves confused lately. You have probably seen the two, WPBakery and Visual Composer Website Builder. So the big question is: Which is the original one? (visualcomposer.com)

Articles

A framework to give better design feedback

Feedback has a vital role in product development. Not only can it nurture the product, but it also can nurture the people who build the product. (yellowstroke.com)

7 Reasons to Host WordPress Yourself

Although hosting WordPress yourself can seem scary to those who haven’t done it, it’s really just fear of the unknown. By taking an educational approach and starting with low-risk sites, you can ease into it with little-to-nothing to lose and plenty to gain. (deliciousbrains.com)

Server Rendering with React and React Router

In this post, Tyler McGinnis starts from scratch and slowly builds a server side React app while breaking down some of the complexity as he goes. (tylermcginnis.com)

Cache-Control for Civilians

This article will give you a solid caching strategy to help make all the difference for your visitors. (csswizardry.com)

KV Storage: the Web’s First Built-in Module (developers.google.com)

Tools / Resources

Progressive Web Apps Training

This course shows you how to convert web pages to PWAs. It looks into using service workers, APIs, and an application shell architecture for meaningful offline experiences, fast first load, and easy user reengagement upon repeat visits. (developers.google.com)

Form Validation Using Custom React Hooks

Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. (upmostly.com)

Hooks, State, Closures, and useReducer

If you’ve ever tripped while converting or implementing class component patterns to hooks, you might want to dig into this post. (adamrackis.dev)

A Complete Guide to useEffect (overreacted.io)

Understanding == vs === (felix-kling.de)

UX Timeline (uxtimeline.com)

Inspiration

‘Move fast and break things’ isn’t a worthy slogan (seths.blog)

Remote Working (integralist.co.uk)

Jobs

Product Designer at Affinity

Design is a driving force at Affinity. You’ll be tasked with distilling the immense complexity of our users’ workflows and data streams into beautiful, intuitive experiences. You’ll collaborate with cross-functional teams on every aspect of product development, from whiteboarding Affinity’s next great idea to fine-tuning pixels right before launch. (affinity.co)

UX Designer at Spur

We are currently hiring a UX Designer who wants to create beautifully designed deliverables in a fast-paced, user-centric environment. As part of our design team, you will have a fantastic opportunity to join a company in hyper-growth mode. (spurjobs.com)

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

Last but not least…

Bringing Sketch to the Browser – Starting Late 2019 (blog.sketchapp.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #348

Headlines

Color Spaces

Color is one of those areas with seemingly infinite depth of complexity. In this article, Bartosz Ciechanowski goes deep into the complexity but aims to keep it simple. An epic article. (ciechanow.ski)

World Wide Web (css-tricks.com)

Design + Development, Together at Last

Designers and developers need an integrated workflow. Bildr Studio combines design tooling with the power of a full development environment. Build the real app as you design it. (bildr.com)

Articles

When Is A Button Not A Button?

In this article, Vadim Makeev explains how you can create a proper interactive button for your users — one that shouldn’t be confused for anything else. (smashingmagazine.com)

The Dark Side of the Grid

This is part 1 of 3 in a series of articles that aim to give you an overview of potential implementation pitfalls, or in other words, the dark side of the grid. (matuzo.at)

How to add custom Angular Material Theme in Angular

Angular Material gives you nice inbuilt design features to design your Angular components seamlessly. In this post, Anup Sarkar explains how to write a custom angular-material-theme for an Angular application. (medium.com)

Using Custom React Hooks to Simplify Forms

A look into using custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. (upmostly.com)

Tools / Resources

Making Google Fonts Faster

If you use Google Fonts on your website or web application, a few additional steps can lead to much faster load times as this article explains. (medium.com)

SkySilk Cloud – Host your Website for as Low as $2/Month

SkySilk is a boutique-style cloud service which offers a wide variety of Linux applications and clean OS templates to deploy and host your websites, applications, game servers, and more. Plans start as low as just $2/month for .5 GB RAM, 200 Mb/s bandwidth, and 10 GB SSD storage. (skysilk.com)

JavaScript Loading Priorities

Addy Osmani has put together a handy table of JavaScript loading priorities in Chrome. (addyosmani.com)

i18n Literally

A simple way to introduce internationalisation to your JS. (github.com)

Cheatsheet for React users using TypeScript (github.com)

Collection of React Hooks (nikgraf.github.io)

CSS selectors cheatsheet (medium.com)

Styled System v4 (styled-system.com)

Inspiration

Chris Coyier’s Favorite CodePen Demos (davidwalsh.name)

Awesome Design Systems (github.com)

Jobs

Product Designer at Gusto

As a Senior Product Designer, you’ll take ownership of a large area of the Gusto product and be involved in the entire product development process, from early research and visioning to tweaking pixels up to launch. (gusto.com)

Design Systems at Zendesk

we’re looking for a self-starting senior designer with an impeccable sense of beauty and craft, who will elevate our product’s aesthetics and usability. Your standards are pixel-perfect, with exceptional interaction design and an eye for accessibility, localisation, and motion. (zendesk.com)

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

Last but not least…

I ruin developers’ lives with my code reviews and I’m sorry (habr.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #347

Headlines

The Future of WordPress

Now that some time passed since the global rollout of the new Gutenberg block editor, which was met with some controversy, Alex Panagis thinks it’s a great time to reflect on 2018 and see what’s in store for the future of WordPress in 2019. (wp-modula.com)

Lessons from 6 software rewrite stories (medium.com)

Get ready for your next interview – Practice for free

Practice your coding skills on Pramp, a peer-2-peer mock interviews platform. We’ll match you with other awesome engineers. (pramp.com)

Articles

Why I Write CSS in JavaScript

For three years, Max Stoiber has styled his web apps without any .css files. Instead, has written all the CSS in JavaScript. Max explains. (mxstbr.com)

React lifecycle methods in plain, approachable language

What are lifecycle methods? How do the new React16+ lifecycle methods fit in? How can you intuitively understand what they are and why they are useful? (blog.logrocket.com)

Web security at N26

A beginner-friendly in-depth look at the measures in place making the N26 web platform secure and available. (medium.com)

Designer & Developer Collaboration survey (2018)

A survey conducted in late 2018 on collaboration between designers and developers; and also what each discipline should know about the other. (weblog.200ok.com.au)

How to use Firebase Realtime Database in React

Part 8 of the 8 part series showcasing the power of Firebase. (robinwieruch.de)

We migrated to Next.js to serve our home page 7.5× faster (manifold.co)

Tools / Resources

The Magic of React-Based Multi-Step Forms

While reducing perceived complexity on the front end building a multi-step form can feel complex and overwhelming. Thankfully, Nathan Sebhastian helps us break things down in a relatively straightforward manner using React as the base. (css-tricks.com)

How @supports Works

Chris Coyier explains how the @supports query works and provides a large selection of use cases so you can understand it with ease. (css-tricks.com)

Design Story

An app that delivers a transparent design process for designers, developers, project managers and stakeholders. (designstory.io)

Progressive React

A small checklist to help make your React site more performant. (houssein.me)

My Twitch Live Coding Setup (medium.com)

Gatsby vs Next (syntax.fm)

Inspiration

Reflecting on My Failure to Build a Billion-Dollar Company (medium.com)

Behind the Scenes: The Design of Beacon (helpscout.com)

Jobs

Front-end developer at Qonto

As part of the tech team, you join a crew of experienced people working on making the best possible user experience and on building the most scalable code base we could think of. Our stacks are Ruby and Go for the backend and EmberJS for the frontend. (qonto.eu)

Full-Stack Engineer at Plato Design

We are looking for engineers who can take ownership of large parts of our architecture. This requires thoughtful tradeoffs such as when to incur technical debt vs when to engineer something more robustly. If you are up for the challenge get in touch. (useplato.com)

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

Last but not least…

GitHub’s menus & dialogs without JavaScript (twitter.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #346

Headlines

Rendering on the Web

As developers, we are often faced with decisions that will affect the entire architecture of our applications. This can be a difficult, since there are a number of different ways to build a website. (developers.google.com)

How to choose your field of software engineering (medium.com)

Design + Development, Together at Last

Designers and developers need an integrated workflow. Bildr Studio combines design tooling with the power of a full development environment. Build the real app as you design it. (bildr.com)

Articles

The only reason your CSS fails

Facundo Corradini shares four core concepts that he believes, if taught correctly, would save us from 99% of CSS issues. They are block formatting context, box model, stacking context and the cascade. (blog.logrocket.com)

Write your first React Hook!

In this article, Leonardo Maldonado reviews how we are managing state in React, understand why React Hooks are really a game-changer and learn to write our very first React Hook. (hashnode.com)

The ineffectiveness of lonely icons

If your target audience is a general population, you should not be using icons alone to convey anything meaningful. By doing so, you have made assumptions that are unlikely to be appropriate to a general audience. (mattwilcox.net)

Overcoming RESTlessness

New API protocols like GraphQL, gRPC and Apache Kafka have risen in popularity as alternatives to REST-inspired HTTP APIs. This article argues that the strength of the REST paradigm cannot be reflected in one-on-one protocol comparisons. (infoq.com)

How Browsers Provide Everything Users Need

Some wise words from Eric Bailey about the possible outcomes if we alter the browser experience. (alistapart.com)

Links that don’t go anywhere should be buttons (christianheilmann.com)

Tools / Resources

Bootstrap 4.3.0

With over 120 combined closed issues and merged pull requests this release brings improvements to the utilities, some prep work for moving on to v5’s development, removing jQuery in favour of regular JavaScript and addressing the growing code base. (blog.getbootstrap.com)

GitHub Actions

A selection of open source actions. GitHub Actions are still in beta but are likely to be a game changer in the not too distant future. (github-actions.netlify.com)

How do you manage state in your React application? (news.ycombinator.com)

Public build pages for open source (buildkite.com)

Vue 2.6 released (medium.com)

Next.js 8 (nextjs.org)

Inspiration

UX Design Case Studies – Best of 2018 (casestudy.club)

Crazy Pure CSS Loader (codepen.io)

Jobs

Product Designer at Yelp

We’re looking for a senior Product Designer that can help Yelp conquer challenging opportunities across a range of mobile and web products. (yelp.com)

React Engineer at Unsplash

The web engineering team is responsible for all things unsplash. We use modern and well-supported tools to build the best possible version of our product and we need help. (unsplash.com)

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

Last but not least…

Announcing the State of CSS 2019 Survey (medium.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #345

Headlines

On Simplicity

It’s cool to use the latest and greatest tech; but we should always ask if our choices really benefit the user, or if we do it mostly for ourselves. (mxb.at)

React as a UI Runtime (overreacted.io)

Be: The WordPress Theme that follows the latest design trends

Be Theme is a ThemeForest top-three bestseller, with over 143,000 downloads to date. With a 4.81/5 rating based on 5,360 reviews, this WordPress theme looks to be an ideal solution to satisfy your clients’ needs. (muffingroup.com)

Articles

The end of the celebrity designer

A more open approach to design helps build better products and demystifies the process for the rest of the company. (goabstract.com)

A Guide To CSS Support In Browsers

In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them. (smashingmagazine.com)

Build Better Component Libraries with Styled System

The Styled System library is very simple on its face, but it provides a powerful API that solves a lot of common component library problems. Alan Smith takes a closer look at how. (medium.com)

How to Turn Your Angular App into a Progressive Web App

In this article, the Gistia engineering team share some great knowledge on how to convert your Angular app into a PWA. (gistia.com)

Tools / Resources

Custom Cursor Effects

A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels. (tympanus.net)

Indigo Player

Indigo player is a modern, highly extensible video player written in TypeScript. It plays MPEG-DASH / HLS and MPEG-4 is built on top of the HTML5 video element. (github.io)

SVG Filters 101

This guide will help you understand what SVG filters are and show you how to use them to create your own visual effects. (tympanus.net)

Google Play Store now open for Progressive Web Apps (medium.com)

Web Platform Podcast: Episode 182 – Web Performance Monitoring (thewebplatformpodcast.com)

Applying Styles Based on the User Scroll Position with Smart CSS (pqina.nl)

React v16.8: The One With Hooks (reactjs.org)

React-Redux Roadmap (github.com)

Inspiration

Pure CSS lettering, a bad and fun idea (kennethormandy.com)

Remote life: What’s it all about? (invisionapp.com)

Jobs

React Engineer at Unsplash

The web engineering team is responsible for all things unsplash. We use modern and well-supported tools to build the best possible version of our product and we need help. (unsplash.com)

Product Designer at Yelp

We’re looking for a senior Product Designer that can help Yelp conquer challenging opportunities across a range of mobile and web products. (yelp.com)

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

Last but not least…

Can’ t Unsee (cantunsee.space)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #344

Headlines

Paying tribute to the web with View Source

The web is just a marvel of a platform. So unique. So empowering. It’s easy to just fall into the trap of “what can the web do for me, for my business, for my customers”. Some times it’s worth taking a step back and ask yourself: What can I do for the web? (signalvnoise.com)

The “Bug-O” Notation (overreacted.io)

Articles

The Great Divide

Based on lots of written developer sentiments, interviews and in-person discussions, Chris Coyier has put together a great blog post that captures the current state of peoples thinking and where we are heading. (css-tricks.com)

How LinkedIn Uses Data to Improve Video Performance

A look into the various data points collected during video playback and how that are leveraged to drive powerful improvements in video performance. (engineering.linkedin.com)

What is tree shaking and how does it work?

Tree shaking is a method of optimising code bundles by eliminating any code from the final file that isn’t actually being used. Ire Aderinokun explains in great detail. (bitsofco.de)

Functional Programming Fundamentals

In this post, Matthew Gerstman covers the fundamentals of Functional Programming and how they apply to modern JavaScript. (matthewgerstman.com)

Tools / Resources

Lighthouse Bot

A repository containing the frontend and backend for running Lighthouse in CI and integration with Github Pull Requests. (github.com)

Programming Fonts

Test drive programming fonts online in your browser. (programmingfonts.org)

Color – A tool for exploring and creating color palettes (cloudflare.design)

How to use web fonts in CSS (blog.logrocket.com)

Kirby CMS 3.0 (getkirby.com)

Inspiration

Tips for Work Life Balance (syntax.fm)

My Grid Layout (kizu.ru)

Jobs

React Engineer at Unsplash

The web engineering team is responsible for all things unsplash. We use modern and well-supported tools to build the best possible version of our product and we need help. (unsplash.com)

Senior Front-End Dev/Designer at Lucid

We’re looking for an experienced frontend developer with expertise in Liquid and an eye for design. This would be an ideal fit for someone with 5+ years of professional experience and 2+ years of Shopify/Liquid experience. (lucid.nz)

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

Last but not least…

Google Takes Its First Steps Toward Killing the URL (wired.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #343

Headlines

The Ethics of Web Performance

Tim Kadlec shares his thoughts on whether performance really is a moral or ethical concern, or if that’s all heavy-handed exaggeration. (timkadlec.com)

Get a Free .design Domain Name For Your Website!

A .design domain is like .com and .net, but it’s more relevant to designers. Your .design name includes free email hosting & Site Builder. (porkbun.com)

Articles

CSS doesn’t suck

Andy Bell writes about CSS positively to counter the falsities that are spread over the internet on a weekly basis. More of these types of articles please. Good job Andy. (andy-bell.design)

Designing the Flexbox Inspector

Victoria Wang shares a behind-the-scenes look at the UX patterns and processes that helped shape the inspector. (hacks.mozilla.org)

The Flexbox Holy Albatross

An entertaining read by Heydon Pickering that explores some tricky Flexbox jazz. (heydonworks.com)

When And How To Use CSS Multi-Column Layout

Rachel Andrew explains why it is different to other layout methods and shows some useful patterns and sites which showcase it well. (smashingmagazine.com)

The internet, but not as we know it: life online in China, Cuba and India (theguardian.com)

Tools / Resources

Lucid

A Chrome Developer Tool designed to help debug React-GraphQL applications. Easily visualise the component hierarchy, state/props data and state changes of your React application and more. (reactlucid.io)

Mail To Links Tool

A quick and easy way to generate markup for mailto links without having to worry about the annoying formatting. (mailtolink.me)

Storybook 4.1

Hot on the heels of the massive Storybook 4.0 release. This time around, the team focused on performance, compatibility and convenience. (medium.com)

New ES2018 Features Every JavaScript Developer Should Know (css-tricks.com)

A UX Guide For Designing Error Pages (blog.prototypr.io)

JavaScript Rising Stars (risingstars.js.org)

Inspiration

Say hello,new logo – Slack (slackhq.com)

CSS-Tricks – Design v17 (css-tricks.com)

Jobs

Product Designer at Discord

If you’re interested in joining a passionate team of designers and gamers that are designing features that will be used by millions of gamers across the world, come help us do that. Also please bring some toast. We have hella butter. (discordapp.com)

Senior Product Designer at Monzo

We’re looking for a seasoned and empathetic problem-solver, with tons of experience in digital product design, to help us deliver the best banking experience possible. (monzo.com)

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

Last but not least…

What CSS Taught Me (youtube.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #342

Headlines

It’s 2019 and I Still Make Websites with my Bare Hands

Matt Holt’s words are music to my ears. A very entertaining read that might make you think twice when installing another dependancy or utilising another framework. (medium.com)

Programming Sucks

If you are a programmer, make time for this. (stilldrinking.org)

A comprehensive look back at front-end in 2018 (logrocket.com)

Articles

Understanding the Virtual DOM

Ire Aderinokun explains what the virtual DOM is, how it differs from the original DOM, and how it is used. (bitsofco.de)

A Quick CSS Audit and General Notes About Design Systems

Robin Rendle shares some thoughts about how he and his team go about auditing CSS. Some really good take aways if you happen to be battling a large complex CSS codebase. (css-tricks.com)

New horizons in CSS: Houdini and the Paint API

Houdini gives us access to the CSS object model for the very first time. Instead of updating styles in JavaScript, we can write code that the browser understands and can parse as CSS. (logrocket.com)

Reflections from a designer turned product manager

Suelyn Yu shares some reflections on how the two roles feel different on a day-to-day basis. (uxdesign.cc)

An inside look at how modern browsers work (twitter.com)

Tools / Resources

SVG Gradient Map Filter

This tool creates SVG Gradient Map Filter from given colours. You can use ready palettes or edit them and get yours. (yoksel.github.io)

Get a Free .design Domain Name For Your Website!

A .design domain is like .com and .net, but it’s more relevant to designers. Your .design name includes free email hosting & Site Builder. (porkbun.com)

How To Learn CSS

This article by Rachel Andrew outlines the key fundamentals of CSS and resources for further reading on key areas of modern CSS development. (smashingmagazine.com)

Five of the most popular DevTools tips from last year (umaar.com)≥

Front-End Performance Checklist 2019 (smashingmagazine.com)

Styling a Select Like It’s 2019 (filamentgroup.com)

Go-to web stack today? (ycombinator.com)

Inspiration

Micro-interactions that will inspire your next project (invisionapp.com)

Things I Don’t Know (overreacted.io)

Jobs

Frontend Engineer at Tidelift

We’re looking for frontend engineers who are comfortable in the browser, crafting JavaScript, CSS, and HTML. You should have experience working with a team to build a custom web application. (tidelift.com)

Senior Product Designer at Monzo

We’re looking for a seasoned and empathetic problem-solver, with tons of experience in digital product design, to help us deliver the best banking experience possible. (monzo.com)

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

Last but not least…

The most liked CodePen Pens of 2018 (codepen.io)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #341

Headlines

The State of Web Browsers

Ferdy Christant shares some thoughts on the current landscape of web browsers and what the future holds. (ferdychristant.com)

WordPress 5.0 “Bebo” (wordpress.org)

Articles

Should I Use JavaScript to Load My Web Fonts?

Recently, browser support for new and safer CSS-only strategies have left some developers wondering: are JavaScript methods to load web fonts necessary? Are they useful? Zach Leatherman digs in. (filamentgroup.com)

What do you name color variables?

One of the hardest parts of developing, naming things…. In this post Chris Coyier does a little roundup of various ways people name their color variables. (css-tricks.com)

Why you should use GatsbyJS to build static sites

This article looks into why GatsbyJS has gained popularity. (freecodecamp.org)

Ways Facebook Scales Their Design System

Product designer Jeff Smith shares insight, expert advice and actionable tips based on the design process at Facebook. (framer.com)

Making the web better through more open source collaboration

Microsoft just announced that they intend to adopt Chromium in the development of Microsoft Edge on the desktop to create better web compatibility for their customers and less fragmentation of the web for all web developers. (blogs.windows.com)

Tools / Resources

SkySilk – Deploy Linux Servers for as Low as $1/Month

SkySilk is a boutique-style cloud platform where you can deploy cloud servers for your websites, applications, and more. Choose from more than 40+ one-click templates including Ubuntu, Node.js, WordPress, GitLab, and many others. Also available on iOS mobile. (skysilk.com)

Accessible SVG Icons with Inline Sprites

Marco Hengstenberg visits the practice of using SVG icons with inline sprites, and how to ensure these icons are accessible. (24a11y.com)

An Alfred Workflow for WebPageTest

Tim Kadlec shares a handy Alfred workflow for submitting test to WebPageTest. (timkadlec.com)

Ruby 2.6.0 Release Candidate 1 Released (ruby-lang.org)

Google Labs Web Components (css-tricks.com)

Design Tools survey results (uxtools.co)

Inspiration

Modernizing the Web Playback UI (medium.com)

2019 UI and UX Design Trends (shakuro.com)

Jobs

ReactJS Developer at Komoot (Remote)

Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for an ambitious ReactJS developer to join our team. (komoot.com)

Product Designer at Lonely Planet

As a Product Designer, you will be helping define and drive the future of digital design across Lonely Planet products. You’ll take on complex tasks and transform them into intuitive, accessible and easy-to-use design solutions for millions of users. (lonelyplanet.com)

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

Last but not least…

Flying a Drone with React and Node.js (youtube.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #340

Headlines

Warp and Weft

Some pretty thoughtful words from Paul Lloyd. It’s hard to summarise as he tackles quite a few distinct areas so pour yourself a big cup of coffee and enjoy his wise words. (paulrobertlloyd.com)

The State of JavaScript 2018 (stateofjs.com)

Articles

The Power of Web Components

Despite the long standardization process, the emerging promise of Web Components puts more power in the hand of creators. Now that the technology is available in browsers, the future of Web Components is in your hands. What will you build? (hacks.mozilla.org)

Why and how to use WebP images today

WebP is an image format developed by Google in 2010 and is supported in 72% of browsers globally used. In this post Ire Aderinokun explains how you can utilise WebP in your sites today. (bitsofco.de)

Things UX Designers Should Know

David Travis shares his thoughts about important areas of importance for aspiring and current professionals in the industry. (uxmastery.com)

What, exactly, is the DOM?

The Document Object Model, or the “DOM”, is an interface to web pages. It is essentially an API to the page, allowing programs to read and manipulate the page’s content, structure, and styles. (bitsofco.de)

Migrating SpaceX API to GraphQL (medium.com)

React 16.x Roadmap (reactjs.org)

Tools / Resources

CSS Animation 101

This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects. (github.com)

React setState() in 10 minutes

A great article aimed for new React developers that have doubts about how setState works and how to use it correctly. (freecodecamp.org)

5 Ways to Style React Components (blog.bitsrc.io)

WordPress 5.0 Release Candidate (wordpress.org)

The Front-End Checklist (frontendchecklist.io)

State of Houdini (youtube.com)

Inspiration

How to balance full-time work with creative projects (thecreativeindependent.com)

Experiencing Japan as a designer (prototypr.io)

Jobs

Marketing Designer at Help Scout

We’re looking for someone who’s super thoughtful, intentional, humble, meticulous, and weird, and self-motivated, and funny, and tenacious, and super creative, and did I say self-motivated? (helpscout.com)

Front End Software Engineer at SgiFig

As a Software Engineer at SigFig, you will work with a team of brilliant developers to build solutions to help investors. (sigfig.com)

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

Last but not least…

Responsive Images on the Apple Watch (ericportis.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #339

Headlines

Web Dev

A greate resource for developers of all backgrounds to learn, create, and solve on the web. It’s meant to not only educate developers, but help them apply what they’ve learned to any site they work on, be it personal or business. (web.dev)

Designing, laws, and attitudes (ethanmarcotte.com)

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

Articles

CSS and Network Performance

Harry Roberts does a rather large brain dump of all things relating to CSS and performance. A great read for all abilities. (csswizardry.com)

CSS Frameworks Or CSS Grid?

Rachel Andrews shares a range of reasons why people use a third-party framework and the positive and negative things about doing so. (smashingmagazine.com)

Difference between currentColor & Custom Properties

Mike Riethmuller explains some interesting differences between how currentColor and custom properties work. Both are examples of dynamic properties in CSS but how they are resolved differs in some very important ways. (madebymike.com.au)

Why are tech companies making custom typefaces?

A look into the growing trend among large technology companies creating their own typefaces. (arun.is)

The “C” in CSS

A classic post from Thomas Yip that looks into detail about what the Cascade means within CSS. (css-tricks.com)

Inlining or Caching? Both Please. (filamentgroup.com)

Tools / Resources

The Ultimate Web Design Tool: A Browser

Oliver Williams shares some thoughts around why the browser is still the best tool for designing. (logrocket.com)

React Hooks

In this episode Wes and Scott discuss React Hooks – what they are, why you might want to use them, their differences with regular classes, and more. (syntax.fm)

Static Site Generators for Documentation (kahlillechelt.com)

PageSpeed Insights, now powered by Lighthouse (blog.chromium.org)

Inspiration

A look into How Basecamp uses CSS Grid in production. (xotv.me)

Thank you for 100 million repositories (blog.github.com)

Jobs

Senior UI Engineer – Sailthru (NYC)

Join our team in building next-gen apps that help marketers deliver the right message to the right person at the right time. Build modern, component-based UIs (React, Redux, CSS Modules, Styled Components, Storybook) and help us leverage ML for intelligent features. (sailthru.com)

Product Designer at Wirecutter

You will be the sole designer on the Wirecutter team, which means an immense responsibility and opportunity to shape the future of the website. You’ll work together with a tightly knit team of product thinkers, editors, and engineers to shepherd and improve the core of what millions of Wirecutter readers know and love us for. (thewirecutter.com)

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

Last but not least…

Things Nobody Told Me About Being a Software Engineer (anaulin.org)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #338

Headlines

The Three Types of Performance Testing

In this post, Harry Roberts introduces three types of testing (Proactive, Reactive and Passive) and dives into how and when they should be carried out, and what their aims and outcomes should be. (csswizardry.com)

How we made Carousell’s mobile web experience 3x faster

A 6-month retrospective on building a Progressive Web App. (medium.com)

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

Articles

Introducing Hooks

Hooks are a new feature proposal that lets you use state and other React features without writing a class. (reactjs.org)

Server-Side Split Testing for Static Websites

For the past year Julian Gaviria, has taken a deep dive into server-side split testing, In this post he runs through some of his findings as well as how to go about setting up your own testing stack. (julian.is)

What’s New in WordPress 5.0

WordPress is completely revamping how users and developers use the CMS with their new Gutenberg editor. If you happen to be a WordPress developer this post by Brian Jackson is worth a quick read. (kinsta.com)

Continuous Integration: The What, Why and How

Jeff Wainwright dives into the wonderful world of Continuous Integration. This is your post if you need to get your head around it. (css-tricks.com)

Tools / Resources

How to organize your git branches

Darío Kondratiuk explores some ways of organizing branches, so you don’t get lost in a sea of code. (hardkoded.com)

An Annotated Webpack Config

A com­plete real-world pro­duc­tion exam­ple of a sophis­ti­cat­ed Web­pack 4 config. (nystudio107.com)

useHooks

One new React Hook recipe every day. (usehooks.com)

React Create App now officially supports TypeScript (twitter.com)

Using dark mode in CSS with MacOS Mojave (paulmillr.com)

Over 600 web development RSS feeds (github.com)

Inspiration

Function – How technology is shaping culture & communications (glitch.com)

Being a Solo Designer (the-pastry-box-project.net)

Jobs

ReactJS Developer at Komoot (Remote)

Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for an ambitious ReactJS developer to join our team. (komoot.com)

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

Last but not least…

All the talks from React Conf 2018 (youtube.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #337

Headlines

Design in China

Design in China is still relatively new and with that comes unique challenges and opportunities. In this great post, Tobias van Schneider interviews Guang Yu and Nod Young to enlighten us. (vanschneider.com)

React Conf (youtube.com)

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

Articles

How Facebook 3D Photos Work

Facebook recently rolled out a new feature, 3D Photos, or, as they call it in their JavaScript: 2.5D Photos. In this post Yuri Artiukh dives under the hood to see how it is implemented. (medium.com)

React Higher-Order Components

In this post Tyler McGinnis takes a look at the most popular pattern for accomplishing code reuse amongst components in a React app, Higher-Order Components. (tylermcginnis.com)

How to Run Design Exercises on a Remote Team

More and more companies offer remote work, especially for engineering teams. But very few organizations foster a remote-first environment for their designers. (medium.com)

Tools / Resources

GraphQL Designer

A prototyping tool to develop full-stack GraphQL applications. With a few simple inputs, GraphQL Designer auto generates code for download, to start and implement your new application including GraphQL root queries, schemas, mutations, and client queries. (github.com)

Just the Docs

A nice looking, high customizable, responsive Jekyll theme for documentation with built-in search. Easily hosted on GitHub pages. (github.com)

Testing JavaScript

Learn the smart, efficient way to test any JavaScript application. (testingjavascript.com)

Incomplete List of Mistakes in the Design of CSS (csswg.org)

A handy collection of cheatsheets (devhints.io)

Frontend tests – What nobody said to you (slides.com)

React v16.6.0 (reactjs.org)

Angular v7 (blog.angular.io)

Inspiration

How do you keep your motivation high? (indiehackers.com)

How I Do Web Development from my iPad Pro Full Time (curtismchale.ca)

Jobs

Brand Designer at Algolia

Algolia is seeking a creative, pragmatic and multi-disciplinary Brand Designer for a full-time position in Paris. You’ll be joining our small, but talented international design team (algolia.com)

Front-end Engineer at Jilt

We’re looking for a smart, detail-oriented person to join our team as our first front-end engineer and help build fast, intuitive interfaces in React. (skyverge.com)

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

Last but not least…

What Most Remote Companies Don’t Tell You About Remote Work (blog.doist.com)

Farewell, Glenn Rander-Pehrson – Mr PNG (sourceforge.net)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #336

Headlines

Start Performance Budgeting

If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. (addyosmani.com)

Hard Costs of Third-Party Scripts

Dave Rupert shares some thoughts around the User Experience costs of third-party scripts. (daverupert.com)

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

Articles

How do you organize your design files?

If you happen to be lacking a little structure with your files, or are keen to improve on how you work this is a good read. (loremipsum.ueno.co)

Our tried and tested way to scale design with systems

Canva product designer Iain Dowling shares how they use a systems-first approach to tackle design challenges in product delivery. (product.canva.com)

Rhythm in Web Typography

Rhythm in typography is just like rhythm in music. A text can either flow like a masterpiece symphony performed by an in-tune orchestra, or it can be a disjointed flimsy song by a one-man band wannabe. (betterwebtype.com)

Dealing with Dependencies Inside Design Systems (medium.com)

Tools / Resources

Git Catastrophes and Tips to Avoid Them

In this post, János Kubisch highlights some git features that might be less used/known, but can end up saving you when things go south in your codebase. (blog.risingstack.com)

Concepts Every JavaScript Developer Should Know

A repository created with the intention of helping developers master concepts in JavaScript. (github.com)

Unit testing ReactJS Redux Actions and Reducers with Jest

Arron Harden explains why having unit tests for Redux classes not only helps with testing code before it gets delivered, but it also acts as a permanent regression suite. (itnext.io)

Favicon Checker

Compare your favicons on all major web browsers, including native dark and light modes. (colinkeany.com)

Introducing ACF Blocks for Gutenberg (advancedcustomfields.com)

Styled Components v4 (medium.com)

Ember 3.4 Released (emberjs.com)

GitHub Actions (github.com)

Inspiration

13 Games in ≤ 13kB of JavaScript (blog.github.com)

Pure CSS Toggle Buttons (codepen.io)

Jobs

Front End Developer at Envy Labs

We’re on the lookout for a new Front End Developer. Members of the front end team work directly with our developers, designers, and clients to realize a collective product vision. (envylabs.com)

Jr full-stack engineer at Sticker Mule

Some of our current projects include migrating to a service architecture, inter-service communication with GCloud PubSub and GRPC, API Gateway based GraphQL, event sourcing persistence and CQRS, and manufacturing and artwork processing automation. (stickermule.com)

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

Last but not least…

Working as a Designer on the Google Plus Team (daringfireball.net)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #335

Headlines

Designing design systems

The Clearleft team share some great insights in how a correctly implemented design system can help large organisations improve their web experience for their customers. (clearleft.com)

ARM Instruction Set Includes Optimizations Just for JavaScript (daringfireball.net)

See how your visitors are really using your website

The fast & visual way to understand your users. Hotjar All-in-one Analytics and Feedback is the new and easy way to: ✓ Get ‘in-the-moment’ visual feedback ✓ See how people are really using your site ✓ Uncover insights to make the right changes (hotjar.com)

Articles

The Psychology of Design

Jon Yablonski shares his thoughts on why every designer should learn the fundamentals of psychology. A great read. (alistapart.com)

Use Cases For Flexbox

A look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? (smashingmagazine.com)

The 3 Elements of Great UX Writing

Really great UX writing can help your product stand out in even the most crowded markets. In this post, Sofia Quintero covers the three elements of really good UX writing that will help take your product or app to the next level. (blog.nomnom.it)

Confessions of a UX Designer

Chris Kiess outlines the mistakes he has made and has seen teams make  that inhibit the final product and user’s experience. (blog.prototypr.io)

A guide to color accessibility in product design

There’s a lot of talk about accessible design, but have you ever thought about color accessibility? (medium.com)

Tools / Resources

JavaScript Visualizer

A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript. (tylermcginnis.com)

Working with Babel 7 and Webpack

In this post you’ll set up a project with Webpack and Babel 7. You’ll learn the basics of Babel and get an overview of some cool features. (thebasement.be)

Refactoring Angular Apps

Christian Lüdemann looks at two levels of abstraction; one is the architecture of the app and the other is how to keep the code clean in the first place. (christianlydemann.com)

Reusable Components in React

In this post, Rajat shows us how to create a simple reusable React component and also goes through some of the best practices that can help you build better components. (blog.bitsrc.io)

What’s New in Create React App 2.0 Video Series (medium.com)

Plans for the Next Iteration of Vue.js (medium.com)

Figma – Introducing Smart Selection (figma.com)

Inspiration

CodePen Radio – GraphQL (codepen.io)

Multibox Menu (tympanus.net)

Jobs

Head of Engineering at Bunny

As leader of the engineering team, your main goal will be to facilitate the achievement of our ambitious 100% YoY growth while enabling us to become more creative, more efficient, and better learners. (wearebunnyinc.com)

Front-end Engineer at Creative Market

Join the team to help us continue our meteoric growth, and your work will be used by millions of people every month. As a front-end engineer, you’ll work on a team of talented individuals working closely together to ship the best possible product. (creativemarket.com)

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

Last but not least…

Advanced React & GraphQL (advancedreact.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #334

Headlines

One Small Step for the Web…

Tim Berners-Lee shares some wise words about why he has always believed the web is for everyone and why he is always fighting fiercely to protect it. (medium.com)

What is Modular CSS?

Modular CSS is a collection of principles for writing code that is performant and maintainable at scale. This post is a must read if you happen to be writing any CSS. (spaceninja.com)

Articles

How browser rendering works — behind the scenes

A look into the steps your browser takes to convert HTML, CSS and JavaScript into a working website you can interact with. (blog.logrocket.com)

Putting things on top of other things

Isabel Brison dives into the fun world of stacking contexts: what they are, when they happen and why. (tellthemachines.com)

Accurately measuring layout on the web

The browser rendering pipeline is complicated. For that reason, it’s tricky to measure the performance of a webpage, especially when components are rendered client-side and everything becomes an intricate ballet between JavaScript, the DOM, styling, layout, and rendering. (nolanlawson.com)

The Shapes of CSS

By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element. The master of CSS, Chris Coyier explains. (css-tricks.com)

Tools / Resources

Create React App 2.0

Create React App 2.0 has been released and it brings a year’s worth of improvements in a single dependency update. Congrats to all involved. (reactjs.org)

The Complete Guide to Lazy Loading Images

In this guide, Rahul Nanwani covers all of the ins and outs of lazy loading images, a technique that helps improve the time it takes for a web page to load by deferring image loads until they are needed. (css-tricks.com)

Building A PWA Using Angular 6

In this tutorial you’ll learn how to build a Progressive Web Application, step by step, implementing the core tenets of PWAs using the Angular CLI v6. (smashingmagazine.com)

Easily Boost the Delivery of Static Websites in AWS (kylegalbraith.com)

Mastering Modular JavaScript (github.com)

Webpack Config Tool (jakoblind.no)

Inspiration

Design Details no. 267 – Don’t Wanna Yuck Anyone’s Yum (spec.fm)

From idea to typeface: How are fonts designed? (underscoretype.com)

Jobs

Product Designer at InVisionApp

If you have a passion for product design and an aptitude to work in a collaborative environment, can demonstrate empathy and strong advocacy for our users, while balancing the vision and constraints of engineering, then this might be the role for you. (invisionapp.com)

Front-end Engineer at Creative Market

Join the team to help us continue our meteoric growth, and your work will be used by millions of people every month. As a front-end engineer, you’ll work on a team of talented individuals working closely together to ship the best possible product. (creativemarket.com)

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

Last but not least…

Countdown Timer – Track your launch or deadline (countdowntimer.info)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #333

Headlines

The 9am Rush Hour

Do you feel overwhelmed at the vast array of approaches and tooling? Struggle with performance? Fight almost daily to create compelling apps & sites that work across devices and browsers? If so, you’ll probably enjoy this. (medium.com)

Responsive Images

An excerpt from his new book, Image Performance, Mat Marquis shines a light on one of the biggest challenges for website performance. (alistapart.com)

Things To Consider When Evaluating A JavaScript Library (freecodecamp.org)

Articles

Idle Until Urgent

Philip Walton shares a strategy he has dubbed “Idle Until Urgent”. The main idea being, to treat UI work as non-essential by default and only upgrade render priority when certain criteria are met. (philipwalton.com)

Designing with real data

Zach Johnston goes into detail about how Dropbox uses Framer X and real data to design. If you have recently adopted Framer X this is a must read. (medium.com)

All Fired Up About Specificity

Chris Coyier pulls together some thoughts over a recent twitter poll that escalated a little. (css-tricks.com)

Cache your React event listeners to improve performance

Charles Stover shares some advice on an under-appreciated concept in JavaScript to help the performance of your code. (medium.com)

Why Google is the most important design company of 2018

In an exclusive interview with Fast Company, CEO Sundar Pichai explains how Google got design and is nailing it. (fastcompany.com)

How and why I redesign my portfolio every year (uxdesign.cc)

Tools / Resources

Measure Performance with the RAIL Model

A user-centric performance model that breaks down the user’s experience into key actions. RAIL’s goals and guidelines aim to help you ensure a good user experience. I have linked to this in the past but it has just been updated. (developers.google.com)

Get ready for your frontend interview. Practice for free.

Increase your chances of success with extra practice. Schedule a peer-2-peer mock interview on Pramp – make sure you ace your next technical interview (pramp.com)

What’s New in Safari 12

Safari 12 ships with iOS 12 and macOS 10.14. The main highlights are icons in tabs, automatic strong passwords, 3D & AR model viewer and more. (developer.apple.com)

Gatsby Version 2 Released (gatsbyjs.org)

Framer X Is Here (framer.com)

ColorBox
(colorbox.io)

Inspiration

Shop Talk Show – Dan Mall on Building a Portfolio (shoptalkshow.com)

Notes to Myself on Software Engineering (medium.com)

Jobs

Senior UX Engineer at InVisionApp

Help shape the next generation of digital design tools by joining the InVision team as a UX Engineer. (invisionapp.com)

Front-end Engineer at Creative Market

Join the team to help us continue our meteoric growth, and your work will be used by millions of people every month. As a front-end engineer, you’ll work on a team of talented individuals working closely together to ship the best possible product. (creativemarket.com)

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

Last but not least…

What makes a good front-end developer? (css-tricks.com)

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

by Jake Bresnehan via Web Design Weekly

Web Design Weekly #332

Headlines

The ‘Capable Web’: A 10 Year Retrospective

The Chrome team highlight some of the major changes they have helped bring to the web in the last 10 years. (blog.chromium.org)

Accessibility is not a feature

Ethan Marcotte shares some strong thoughts about how we should be treating accessibility within our work. A must read. (ethanmarcotte.com)

Articles

A Portfolio Hiring Managers Can’t Deny

Dan Mall shares some really great advice for helping you land your dream job. Even if you are not looking this is worth bookmarking. (danmall.me)

Behind the scenes of my latest book on JavaScript

A behind the scenes look at Dr. Axel Rauschmayer’s latest book, “JavaScript for impatient programmers”. (2ality.com)

Getting Remote Critique Right

Remote work brings with it some challenges that need careful pruning to create a successful and happy team. One of the first things that comes to mind is critique, a daunting task when in the same room as people, let alone hundreds or thousands of miles away from one another. (medium.com)

Designing With Code (matthewstrom.com)

Tools / Resources

Styled Components Version 4

A brand new global styles API, native support for the “as” and “ref” props, removal of .extend, full React v16 StrictMode-compliance, tons of speed and lots more. (medium.com)

An Intro to Web Site Testing with Cypress

Cypress is a new-ish test runner with some features that take some of the friction out of end-to-end testing. In this post Devon Campbell gives a great run through of how to get up and running. (css-tricks.com)

Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance. (progressivetooling.com)

React Webworker

A React component for easy communication with a Web Worker. It leverages the Render Props pattern for ultimate flexibility as well as the new Context API for ease of use. (github.com)

mkcert

A simple zero-config tool to make locally trusted development certificates with any names you’d like. (github.com)

Oh Mamma, I’m in love with Gradient (medium.muz.li)

Put Your Webpack Bundle On A Diet (contentful.com)

Inspiration

React Podcast (reactpodcast.simplecast.fm)

Refactoring UI (refactoringui.com)

Jobs

Senior Product Designer at Canva

We currently have 11 Product Designers based in Sydney and we ideally want to double in size over the next 6 months. We’re hiring at multiple levels so whether you have 3 years or 15 years experience, we’d love to hear from you. (canva.com)

Senior UI/UX Designer at Twitch

As a Senior UI/UX Designer, you will design impactful products for creating and consuming content for 100+ million Twitch users worldwide. The team has done ground-breaking work in Video Premieres, bringing previously recorded content to a live audience. (twitch.tv)

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

Last but not least…

Chrome’s turning 10, here’s what’s new (blog.google)

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

by Jake Bresnehan via Web Design Weekly