Using the web on a 50 MB budget

#402 — July 31, 2019 Read on the Web Frontend Focus I Used The Web For A Day On A 50 MB Budget — Data can be prohibitively costly, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight ‘data budget’ and offers (a lot of) practical tips for reducing our own sites’ footprint. There is genuinely a lot of useful stuff in this post — read it! (And I might be showing my age here but I remember when aiming for 30KB total was a thing..!) Chris Ashton Form Design: From Zero to Hero All in One Blog Post — A quick and to-the-point guide for designing forms that “everyone can use and complete as quickly as possible”. Adam Silver Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today. Cloudinary sponsor The Real 'Dark Web': The Quiet Majority of Web Developers? — An interesting opinion piece that reflects upon the quiet majority of Web developers, and how the minority of developers using cutting edge tools and techniques are not truly representative. Charlie Owen Sites Could Be Liable for Helping Facebook Secretly Track Your Web Browsing, Says EU Court — The argument is that users should have to consent to being tracked with 'Like' buttons. Adi Robertson New (US) Bill Would Ban Autoplay Videos and Endless Scrolling — US lawmakers are taking aim at Web-based features that are ‘designed to be addictive.’ Early days, but this could become a commonly discussed topic in years to come. Makena Kelly 💻 Jobs Senior UI Designer (Munich) — Shape the product design of the leading digital wealth management FinTech in Europe, located in the heart of Munich. Scalable Capital GmbH We’re Trusted by Over 100k Developers to Help Them Find Their Dream Job — Get matched with companies like Apple, Skyscanner and KPMG based on your skills. They apply to you, salary upfront and no recruiters. hackajob 📙 Articles, Tutorials & Opinion Creating an Accessible Inline List with Bullets Between Items — Basically a horizontal list with a character between each item, a · bit · like · this. Artem Sapegin output: HTML's Native Live Region Element — A look at the output element and it’s suitability for creating a native toast element (plus accessibility considerations and quirks). Scott O'Hara ▶  Design System Magic with CSS Houdini — A look at how Houdini features can be used in your design systems today. Samuel Richard Backend for Frontend – How to Develop Custom SPAs with Tailored API — Need to refresh your software without breaking the business logic on the backend? Introduce the Backend for Frontend. The Software House sponsor An Overview of CSS Animation Libraries — A look at the current landscape of CSS animation libraries and how they vary. Chris Coyier ▶  Writing Tests For CSS Is Possible! Don’t Believe The Rumors — Overcoming “egoprogrammophobia” by writing tests to refactor your CSS. Gil Taylor How to Add Flexbox Fallback to CSS Grid — Adding a flexbox fallback to a calendar built with CSS Grid. Zell Liew Quick Tip: Responsive Iframes — What you need to do to make an iframe responsive on a website. It’s trickier than it looks and CSS is definitely involved. Chris Coyier The State of JavaScript: 2019 and Beyond. Get the Whitepaper Progress Kendo UI sponsor Why You Should Definitely Learn How to Use CSS-in-JS Brent Jackson 🔧 Code, Tools & Resources A Satisfying Liquid Simulation — Merges WebAssembly and WebGL together. Shake the window about to see it in action. Uses the LiquidFun engine and the regl WebGL library. Lorenzo Cadamuro A Web Tool to Create 'Striped Text' and Get Styled Components Code — One of several visual design tools on Components.ai. This one lets you dynamically create a stripy text effect and provides CSS and Styled Components code to use in your apps. Components.ai x-autosuggest: Autosuggest Results Based On Input — A JavaScript autosuggest input. Here’s a demo. Ivan Nikolić Gradient Magic — A growing gallery of unique CSS Gradients. Jordan Marshall    🗓 Upcoming Events WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers everything from basic web accessibility principles to advanced accessibility techniques. Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation. Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'. CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS. 🐦 ...and finally A good reminder that it's always worth knowing about the actual technology you're using as well as the interfaces to it. A bit like knowing how to add by hand as well as how to use a calculator..

by via Frontend Focus