October 9, 2019 #412 — October 9, 2019Read on the WebFrontend Focus Supreme Court Hands Victory to Blind Man Who Sued Domino’s Over Site Accessibility — Back in August 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. The Supreme Court has now denied that petition — a significant win for disability advocates.Tucker HigginsASPIRE: Ideals to Aspire to When Building Websites — 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 A Technical Deep Dive into 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 sponsorThe Evolution of Web Content Management — 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 RinaldiHow to Read A Web Page Test 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? JobsReact JS Developer (Remote) — We’re looking for an ambitious React developer to help us make komoot the place to go to plan outdoor adventures.KOMOOTMobile App Developer Wanted for High-Growth Fundraising Platform — 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.CareersJSFind A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.Vettery? Articles, Tutorials & OpinionAvoid 100vh On Mobile Web — 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 ChaninAn Interview with an ‘Adult Site’ Developer — 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 WalshClipping, Clipping, and More Clipping! — An exploration of how the CSS clip-path property can be used to create interesting effects.Mikael AinalemThe React Hooks Guide: In-Depth Tutorial with Examples. Start Learning — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks.Progress KendoReact sponsorRetro Nostalgia & Why My New Website Looks Like Windows 98 — 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.Ash KydVerify Phone Numbers On The Web with The SMS Receiver API — It’s still early days for this API, but here’s an initial look at how the planned SMS Receiver API will work.Eiji KitamuraHow to Build a Progressive Web App (PWA) with only Vanilla JS — 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 NowHeroku sponsorpodcastSpacing, Grids and Layouts: Creating a Spatial System — How to define baseline grids, column grids, spacing and layouts.Elliot DahlTrying to Make Sense of Gmail CSS Support — As an email publisher this sort of knowledge can prove invaluable…Rémi Parmentier? Tip of the Weeksupported by Defining quotation styles with the tagWhen 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” via CSS.As explained here, 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 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, 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, where you can learn software engineering, data science, or UX/UI design in just 15 weeks online or on campus.? Code, Tools & Resourcesmoveable: A Library for Dragging, Resizing, Scaling and More — If you want to manipulate an element in any way (warping, pinching, rotating, etc) this library can probably help. Demo here.Daybrush (Younkue Choi)Facebook Design: Images and Sketch Files of Popular Devices — These sort of collections always prove handy to have stored away in your bookmarks.FacebookAniX: A ‘Super Easy and Lightweight’ CSS Animation LibraryAniX ? Upcoming EventsAccessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.Performance Now, November 21-22 — Amsterdam, Netherlands — 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 — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world. Source link