Edge on macOS, Firefox 67, and creating data tables with CSS Grid

#392 — May 22, 2019 Read on the Web 🚀 Frontend Focus Microsoft Edge Preview Builds for macOS Now Available — First unveiled several weeks ago, the new Microsoft Edge preview is based on top of the Chromium rendering engine but was Windows only. Now, a macOS build of the ‘Canary’ version is available. Microsoft Edge Team Firefox 67 Released — The latest release channel of Firefox is out bringing support for prefers-color-scheme (so you create those ‘dark mode’ styles) as well as a new rendering architecture. Of particular note to developers is that different installs of Firefox can now run side by side using different profiles which may be helpful for testing. Mozilla Hacks Free Guide: The Evolution of JavaScript Tooling — In this guide, an analysis of Angular, React, and Vue is provided along with a comparison of attributes, strengths, and weaknesses to assist developers with their decision making process for tooling. Download the guide to learn more. SENCHA sponsor A Deep Dive into Native Lazy-Loading for Images and Frames — With the weight of assets like videos and images on pages heavier than ever, lazy loading is a nice way to improve the user experience by only loading assets as needed. Erk Struwe The 'Inside' Problem: How to Break Out and Make An Element Full Width — Let’s say you need a full-width container to get an edge-to-edge background but you want the contents to remain in their usual position. Here are several approaches, each with pros and cons. (We just had to feature this as it’s such a common front-end design problem.) Chris Coyier Folding the DOM: Using 3D CSS Transforms to 'Fold Up' Images — The ‘trick’ to creating an image folding effect with CSS transforms is to have multiple identical images and then transform them separately. This is a great, interactive tutorial that’s based around React, although the underlying CSS principles are usable anywhere. Josh W. Comeau Flexible Data Tables with CSS Grid — <table>, originally used for both layouts and tables, became used for tables only (and HTML email!) as CSS became more capable. Well, now, how about skipping <table> even for tabular data? Here’s how to use CSS Grid to make nice tables for tabular data. Adam Lynch 💻 Jobs Front-End Engineer - Apple Inc. (CA, US) — Love the challenge of solving complex problems? Be part of a team with strengths crafting JavaScript apps for iCloud Analytics. Apple Product-Focused & Driven Frontend Engineers in Stockholm — Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company. Diet Doctor Sweden AB Find a Frontend Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers. Vettery 📘 Tutorials Vue.js and SEO: How to Optimize Reactive Sites for Search Engines — Are sites created with front-end rendered frameworks indexed by Google? Or do you need to set up pre-rendering? Paolo performed an experiment to see the reality. Paolo Mioni Three.js Fundamentals: A Tutorial — This is a very extensive and impressive set of tutorials on using Three.js to create browser-based 3D experiences. Greggman Everything You Ever Wanted to Know About inputmode — The inputmode attribute can influence mobile browsers as to which keyboard (or extra characters) they display to enter things like email addresses or phone numbers. Christian Oliff Get the Fastest Website Deployments. Ever — Learn the most effective way to build better apps faster. Buddy sponsor In Chrome 76 You Can Hide the 'Add to Home' Info Bar — If a PWA passes the ‘installability checklist’ on Android, a special ‘add to home screen’ bar appears at the bottom of the screen. As a developer you can now override this behavior. Peter Mclachlan (Google) How to Create an Accessible Language Picker — Note that this is based around the CodyHouse CSS and JS component framework. Claudia Romano Why and How to Use WebP Images Today — WebP is an image format developed by Google in 2010 as a more efficient alternative to formats like PNG and JPG. As of Firefox 65, Safari is the only major browser to not support it. Ire Aderinokun How I Navigate Hundreds of Chrome Tabs with JXA and Alfred — This is really niche but is an interesting technical solution to managing large numbers of tabs. Renan Cakirerk 💡 Tip of the Week supported by Making use of the download attribute The download attribute, when used on an anchor tag, will tell a browser to directly download the linked resource, rather than navigate to it. Here's how to put it into practice: <a href="data_2019.csv" download="2019 Data (CSV)">   Download data </a> As highlighted above, the download attribute can also be used to change what name is displayed upon downloading — a handy way to display something more readable over possible 'ugly' filenames. This is just a simple way to handle download links when server-side configuration isn't available for certain file extensions, say. It's worth noting however that you can only use this for same-origin URLs for security reasons. This week's tip is sponsored by Microsoft Azure. Do you want to use MySQL without worrying about managing, securing, and scaling your database? Learn more about Azure Database for MySQL and get started in minutes. 🔧 Code and Tools Tornis: Watch and Respond to Changes in the Browser's Viewport — A JavaScript library that tracks pointer position, viewport size, scroll position, etc. and lets you perform actions based upon them. Robb Owen Micron.js: A Micro Interaction Library — Add CSS-powered visual interactions to DOM elements. Webkul Grow Your Cloud Service Business with Manifold Manifold sponsor Rough.js: Draw Web Graphics with a Hand-Drawn, 'Sketchy' Appearance — Supports both drawing on Canvas or using SVG. Preet Shihn Reveal.js 3.8.0: An HTML Presentation Framework — A now mature framework that continues to get frequent updates and releases. Hakim El Hattab Embetty: Display 3rd Party Content Like Tweets or YouTube Videos Without Compromising Privacy — Involves using a proxy server you host yourself. heise online A WebGL Fluid Simulation — Simply beautiful and fun to play with. Pavel Dobryakov demo    🗓 Upcoming Events JSNation, June 5-7 — Amsterdam, the Netherlands — A 2-day event focusing exclusively on JavaScript development. Front Utah 2019, June 6-7 — Salt Lake City — Two days of learning better ways to work together with your team and be inspired to grow your career in UX or product management. Pixel Pioneers, June 7 — Bristol, UK — A one-day conference of practical design and frontend talks, featuring eight speakers (preceded by a workshop day). CSS Day, June 13-14 — Amsterdam, Netherlands — Features eight world-class sessions by eight world-class speakers about curious, 'badly-known', or otherwise interesting CSS features. CSSCamp 2019, July 17 — Barcelona, Spain — A one-day, one-track conference for web designers and developers. An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience.

by via Frontend Focus