Web Design Weekly #248

August 15, 2016 - Jake Bresnehan

Headlines

Design Doesn’t Scale.

An epic post by Stanley Wood that looks at how the Spotify design team, spread across different time-zones, projects and competing objectives, found a way to work together to create a coherent experience. (medium.com)

Journey to Enjoyable, Maintainable Styling with React

Mikey Murphy shares his learning journey to styling. From what started as a single CSS file now includes the likes of Aphrodite, ITCSS, CSSNext, CSSModules and more. If you are working in a component based architecture this is a must read. (medium.com)

Articles

Practical SVG

Chris Coyier has released a new book called Practical SVG. Here is a taster chapter, all about sizing SVGs, to get you excited. (alistapart.com)

Bootstrap considered harmful

Using front-end frameworks come with all sorts of side effects if used incorrectly. This post looks into the pros and cons of using Bootstrap but is also applicable to other frameworks. Nice simple educational read. (hiddedevries.nl)

Image Upload and Manipulation with React

Need to handle image uploads within a React application? Damon Bauer has you covered. Damon looks at all the edge cases to help you create a solid image uploading process without server-side tools. (css-tricks.com)

How I built a Progressive Beer app

Dean Hume decided to pair his love of beer with Service Workers to create a nice little web app. Just a reminder that having pet projects is a great way to learn. (deanhume.com)

Var, Const, Let

An easily digestible post that explains when to use `const` or `let`. (remysharp.com)

Tools / Resources

HyperDev – Developer playground for building full-stack web apps, fast

Combining automated deployment, instant hosting and collaborative editing, HyperDev gets you straight to coding with no setup. Build products, prototype ideas and invite teammates to collaborate on code together. (hyperdev.com)

Fractal

A tool to help you build & document web component libraries and then integrate them into your web projects. (fractal.build)

Staticman – Static sites with superpowers

Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static Jekyll site running on GitHub Pages. (staticman.net)

Getting started with GraphQL queries and mutations

Tim Lucas gives the low down on GraphQL which is a new standard for defining, querying and documenting APIs in a human-friendly way. After reading this post, learning GraphQL is now high on the to do list. (building.buildkite.com)

Web Starter

Build and deploy a React website quickly on Heroku. (github.com)

Stuff I wish I’d known sooner about service workers (github.com)

Setting up Flow when you’ve already got Babel in place (medium.com)

SVG Images as React Components With Webpack (diessi.ca)

Inspiration

Teams Who Share Personal Stories Are More Effective (hbr.org)

Refactoring CSS Without Losing Your Mind (speakerdeck.com)

Working Remotely (snook.ca)

Jobs

Product Designer at Xero

We’re looking for an experienced Product Designer to work on our most important projects and initiatives. You will work closely with global design and product team leadership to craft experiences that help small businesses succeed by better connecting them with their employees and customers. (xero.com)

Front End Developer, Design Tools at Twitter

The Twitter Design team is looking for a Front End Developer to build tools to help our Designers collaborate more easily, and improve the design quality of our apps. This role will be directly responsible for the development of our internal Human Interface Guidelines tools, which support the work of Twitter’s product design team. (twitter.com)