---
title: "#319: How Stripe Designs Beautiful Websites"
publication: "Frontend Focus"
issue: 319
published_at: "2017-12-06"
canonical_url: "https://frontendfoc.us/issues/319"
---

#319: How Stripe Designs Beautiful Websites

This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/319)

Frontend FocusIssue 319 — December 6, 2017[Web Content Accessibility Guidelines For People Who Haven't Read Them](https://24ways.org/2017/wcag-for-people-who-havent-read-them/?utm_source=frontendfocus&utm_medium=email)A detailed look over the _WCAG_ - a starting point in making your sites work better for all. Alan Dalton 
[How Stripe Designs Beautiful Websites](https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/?utm_source=frontendfocus&utm_medium=email)Examining the tips and tricks used to make Stripe’s frequently copied site design a notch above the rest. Lee Robinson 
[Lint the Web Forward with Sonarwhal](https://24ways.org/2017/lint-the-web-forward-with-sonarwhal/?utm_source=frontendfocus&utm_medium=email)[Sonarwhal](https://sonarwhal.com/) is a linting tool for accessibility, security, and other Web best practices. Stephanie Drescher 
[![GrapeCity SpreadJS\](https://copm.s3.amazonaws.com/dc7b5c88.jpg)](https://www.grapecity.com/en/download/spreadjs?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=SpreadJS_12-17)[Try SpreadJS, the Most Powerful JavaScript Spreadsheet Component: Fast, Flexible, No Excel Dependency](https://www.grapecity.com/en/download/spreadjs?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=SpreadJS_12-17)Deliver intuitive, efficient, multi-functional, pure JavaScript spreadsheets for enterprise apps. GrapeCity SpreadJSSponsor
[Cascading Web Design with Feature Queries](https://24ways.org/2017/cascading-web-design/?utm_source=frontendfocus&utm_medium=email)An introduction to the concept of ‘cascading web design’, an approach made possible with feature queries. Chen Hui Jing 
[The (Far) Future of CSS](https://vimeo.com/242890906?utm_source=frontendfocus&utm_medium=email)A speculative look into the future of CSS and [Houdini’s](https://github.com/w3c/css-houdini-drafts/wiki) goal of making CSS user-extensible. Tab Atkins 
[Debugging React Perf with React 16 and Chrome DevTools](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad?utm_source=frontendfocus&utm_medium=email)An in-depth step-by-step visual walkthrough demonstrating how to audit JavaScript runtime performance and find slow rendering components. Ben Schwarz 
[The Front-End Checklist](https://frontendchecklist.io/?utm_source=frontendfocus&utm_medium=email)A more dynamic front-end development and deployment checklist based on [an article](https://codeburst.io/the-front-end-checklist-8b2292fdda44) we linked last month. David Dias 


Jobs

- [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q2-17)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q2-17). X-Team
- [Software Engineer – Web Clients, ReactJS+Redux](https://careers-discovery.icims.com/jobs/18956/software-engineer---web-clients/job?utm_source=frontendfocus&utm_medium=email)Join a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more! Discovery Digital Media
- [Front-End Engineer](https://www.indeed.com/prime?sid=cooperpress&kw=frontend12.6)Indeed Prime is a free service that connects you to hundreds of companies. Indeed Prime

In Brief

[Evolution of 'img': GIFs Without the GIF in Safari](https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/?utm_source=frontendfocus&utm_medium=email) news 
Safari Technology Preview is now supporting loading MP4 videos via img tags.
Performance Calendar

[W3C Invites Implementations of CSS Color Module Level 3](https://www.w3.org/blog/news/archives/6691?utm_source=frontendfocus&utm_medium=email) news
W3C

[$20 Free on a New Linode Account](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-sponsored) 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.
Linode Cloud HostingSponsor

[Debugging CSS Grid Layouts with Firefox Grid Inspector](https://www.smashingmagazine.com/2017/12/grid-inspector/?utm_source=frontendfocus&utm_medium=email) tutorial
Chen Hui Jing

[Providing Alternate Content for Screen Reader Users](https://www.24a11y.com/2017/providing-alternate-content-screen-reader-users/?utm_source=frontendfocus&utm_medium=email) tutorial
Sam Joehl

[Manageable Utility Systems with CSS Variables](https://seesparkbox.com/foundry/manageable_utility_systems_with_css_variables?utm_source=frontendfocus&utm_medium=email) tutorial 
A look at the difference between Sass variables and new CSS variables.
Kasey Bonifacio

[Happier HTML5 Form Validation](https://daverupert.com/2017/11/happier-html5-forms/?utm_source=frontendfocus&utm_medium=email) tutorial
Dave Rupert

[A Frontend Developer’s Guide to GraphQL](https://css-tricks.com/front-end-developers-guide-graphql/?utm_source=frontendfocus&utm_medium=email) tutorial
CSS Tricks

[How to Use CSS Gradients on the Web](https://webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web--cms-29922?utm_source=frontendfocus&utm_medium=email) tutorial 
Plenty of examples here for getting to grips with using gradients on the web.
Adi Purdila

[Progressive Image Loading using Intersection Observer and SQIP](https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/?utm_source=frontendfocus&utm_medium=email) tutorial 
SQIP is an SVG-based LQIP (Low Quality Image Placeholders) technique.
Performance Calendar

[Live Coding Session: Deploying Node.js Web Apps to App Service on Linux](https://aka.ms/appservicelinux?utm_source=frontendfocus&utm_medium=email) 
Learn how to build & package a Node app & deploy it through a CI system to Azure App Service on Linux.
MicrosoftSponsor

[AudioWorklet: What, Why, and How](https://www.youtube.com/watch?v=g1L4O1smMC0) video 
Hongchan Choi, a software engineer on the Chrome team, goes in depth about what the new AudioWorklet is, why it’s a great step for Web Audio, and how it works.
WebAudio PDX

[Why CSS Grid Is Better Than Bootstrap for Creating Layouts](https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163?utm_source=frontendfocus&utm_medium=email) opinion
Per Harald Borgen

[Bauble Toggle: A Christmas Bauble Toggle Control](https://codepen.io/chrisgannon/pen/ZaPmKp/?utm_source=frontendfocus&utm_medium=email) demo
CodePen

['Strike Off' ToDo List Animation](https://codemyui.com/strike-off-todo-list-animation/?utm_source=frontendfocus&utm_medium=email) demo code 
When you tick an item, it gets struck out with an animation.
Code My UI

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/319)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK