--- title: "A web accessibility win following Supreme Court decision" publication: "Frontend Focus" issue: 412 published_at: "2019-10-09" canonical_url: "https://frontendfoc.us/issues/412" --- This week's HTML, CSS, browser, and frontend news #412 — October 9, 2019 [Read on the Web](https://frontendfoc.us/issues/412) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1570617606/pmxew8vd7zqkchmc1ezh.jpg)](https://www.cnbc.com/amp/2019/10/07/dominos-supreme-court.html) [Supreme Court Hands Victory to Blind Man Who Sued Domino's Over Site Accessibility](https://www.cnbc.com/amp/2019/10/07/dominos-supreme-court.html) — [Back in August](https://frontendfoc.us/issues/403) we shared news that pizza company Domino’s was requesting for a lawsuit, requiring its website to be accessible to blind people, [to be shut down](https://www.theverge.com/2019/8/1/20750913/dominos-pizza-website-accessible-blind-supreme-court-lawsuit). The Supreme Court has now denied that petition — a significant win for disability advocates. Tucker Higgins [ASPIRE: Ideals to Aspire to When Building Websites](https://www.filamentgroup.com/lab/aspire/) — In relation to the item above, here Scott makes the case that sites should aspire to be Accessible, Secure, Performant, Inclusive, Responsive and Ethical. Scott Jehl [![\](https://copm.s3.amazonaws.com/c04a5b1f.jpg)](https://www.ably.io/concepts/feathersjs) [A Technical Deep Dive into FeathersJS](https://www.ably.io/concepts/feathersjs) — FeathersJS is easy to integrate, data agnostic, and highly customizable. Is it the holy grail of frameworks for realtime apps and APIs? This article puts Feathers through its paces and answers the question: when is FeathersJS too lightweight? Ably sponsor [The Evolution of Web Content Management](https://remotesynthesis.com/blog/evolution-of-web-content-manaagement) — A look at the evolution of web content management from the early days of the web to the headless, cloud-based CMS systems of today. Brian Rinaldi [How to Read A Web Page Test Waterfall Chart](https://nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/) — If like me, you often look at a waterfall chart and get a bit lost as to what it all means, you’ll find this to be a handy reference, explaining it all in very accessible way. Matt Hobbs 💻 **Jobs** [React JS Developer (Remote)](https://www.komoot.com/jobs/reactjs-developer) — We’re looking for an ambitious React developer to help us make komoot the place to go to plan outdoor adventures. KOMOOT [Mobile App Developer Wanted for High-Growth Fundraising Platform](https://job.careersjs.com/9rx) — This company has a big vision, and everyone embraces it, not because it’s a weird cult or something, but only because it’s ethical and cool. CareersJS [Find A Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📙 **Articles, Tutorials & Opinion** [Avoid 100vh On Mobile Web](https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html) — If you’re using viewport units in CSS to style an element to take up the full screen height (using `height: 100vh`), you may want to reconsider. David recommends an alternative approach using JavaScript. David Chanin [An Interview with an 'Adult Site' Developer](https://davidwalsh.name/pornhub-interview) — Now this won’t be for everyone, but regardless of your stance, this is an interesting look into the decisions behind the tech choices and how they all work at one of the web’s largest adult sites. David Walsh [Clipping, Clipping, and More Clipping!](https://css-tricks.com/clipping-clipping-and-more-clipping/) — An exploration of how the CSS `clip-path` property can be used to create interesting effects. Mikael Ainalem [The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning](https://www.telerik.com/kendo-react-ui/react-hooks-guide/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-react-hooks-guide&utm_content=sponsored-link) — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Progress KendoReact sponsor [Retro Nostalgia & Why My New Website Looks Like Windows 98](https://ash.ms/2019-10-02/retro-website-launch/) — This developer was feeling _“particularly nostalgic for the days of Geocities and floppy disks”_ so created a new (and well-realised) Windows 98-style personal site paying homage to such an ‘idealized past’. [Here’s the UI library behind it](https://github.com/ashkyd/ui95). Ash Kyd [Verify Phone Numbers On The Web with The SMS Receiver API](https://web.dev/sms-receiver-api-announcement) — It’s still early days for this API, but here’s an initial look at how the planned SMS Receiver API will work. Eiji Kitamura [How to Build a Progressive Web App (PWA) with only Vanilla JS](https://t.co/YefLIvh6NZ?amp=1) — Bring a native-like experience to your webapps with this grab bag of techniques including styling, fonts, Service Workers, and creating a manifest file. Sayan Mondal ▶[Accessibility in Web Standards and Its Future in Software. Listen Now](https://www.heroku.com/podcasts/codeish/16-accessibility-in-web-standards) Heroku sponsorpodcast [Spacing, Grids and Layouts: Creating a Spatial System](https://www.designsystems.com/space-grids-and-layouts/) — How to define baseline grids, column grids, spacing and layouts. Elliot Dahl [Trying to Make Sense of Gmail CSS Support](https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-2019-edition-b7cc132ee226) — As an email publisher this sort of knowledge can prove invaluable… Rémi Parmentier 💡 **Tip of the Week** supported by [![Flatiron School\](https://res.cloudinary.com/cpress/image/upload/v1569835285/yikqe1bzageyk33kuuwc.png)](https://flatironschool.com/?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=ct--cam-no_campus-mkt-gbl-gb-&utm_content=--homepage--rid-rec9VypBDYFV4rt50) **Defining quotation styles with the `` tag** When styling your site you may be happy with the "default, straight quotation style", but if you're keen on getting your typography _just right_ then there is a way to ensure your [quotation marks are “smart”](http://smartquotesforsmartpeople.com) via CSS. As [explained here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q), the HTML `` element signals that the contained text is a short inline quotation. Most browsers implement this by surrounding the text in "quotation marks". You can, however, add a style to modify what automatically appears around the text: q { quotes: "“" "”"; } It may be hard to make out in email, but this rule will wrap your inline quote with alternative 'smart' quotation marks. [This blog post expands](https://www.codementor.io/codementorteam/10-awesome-css3-tricks-a2kow9z73#2-smart-quotes) on how this simple tip can be used for multilingual sites, such as using differing quotation rules for different languages (like German). Another idea is outlined in [this recent blog post from Michael Lazarski](https://dev.to/lampewebdev/css-quickies-the-quotes-property-and-the-q-html-tag-1n33), who shows how this technique can even be used with emoji for an 🙌 altogether different 🙌 approach. This Tip of the Week is sponsored by [Flatiron School](https://flatironschool.com/?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=ct--cam-no_campus-mkt-gbl-gb-&utm_content=--homepage--rid-rec9VypBDYFV4rt50), where you can learn [software engineering](https://flatironschool.com/career-courses/coding-bootcamp?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=ct--cam-no_campus-mkt-gbl-gb-&utm_content=--software%20engineering%20--rid-rec57c65wr8puyg68), [data science](https://flatironschool.com/career-courses/data-science-bootcamp?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=ct--cam-no_campus-mkt-gbl-gb-&utm_content=--data%20science--rid-recEZFVkn3Tyn2DHH), or [UX/UI design](https://flatironschool.com/career-courses/ux-ui-design-bootcamp?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=ct--cam-no_campus-mkt-gbl-gb-&utm_content=--uxui%20design--rid-recPdvMASoESoj7Ol) in just 15 weeks online or on campus. 🔧 **Code, Tools & Resources** [moveable: A Library for Dragging, Resizing, Scaling and More](https://github.com/daybrush/moveable) — If you want to manipulate an element in any way (warping, pinching, rotating, etc) this library can probably help. [Demo here](https://daybrush.com/moveable/). Daybrush (Younkue Choi) [Facebook Design: Images and Sketch Files of Popular Devices](https://facebook.design/devices) — These sort of collections always prove handy to have stored away in your bookmarks. Facebook [AniX: A 'Super Easy and Lightweight' CSS Animation Library](https://a-jie.github.io/AniX/) AniX 🗓 **Upcoming Events** [Accessibility Scotland, October 25 — Edinburgh, UK](https://accessibility.scot) — One day of talks. Friendly, open discussion about accessibility. [Performance Now, November 21-22 — Amsterdam, Netherlands](https://perfnow.nl) — A single track conference with fourteen world-class speakers, covering the most important web performance insights. VueConfTO 2019, November 11-12 — Toronto, Canada — First ever Vue Conference in Canada. Biggest in North America, with great workshops and talks. [Frontend Con, November 26-27 — Warsaw, Poland](https://frontend-con.io) — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom