A 'div' that looks different in each major browser

#348 — July 11, 2018 Read on the Web Frontend Focus A 'div' That Looks Different In Each Major Browser — A neat demonstration of how specs don’t guarantee an identical result across browsers. Here’s the CodePen to try it for yourself. Martijn Cuppens on Twitter Writing IE-Friendly CSS Grid Code — Want to lean on CSS Grid but not get in trouble for abandoning Internet Explorer 11 users? Using Autoprefixer and keeping some rules in mind will help you get there. Daniel Tonon CSS Working Group Working on Native CSS Nesting Support — It’s still a long way from getting browser support, but the ball is now truly rolling on native support for Sass-like style nesting in ordinary CSS. Thanks to Tobi Reif for sending this in. World Wide Web Consortium How to Do Functional Programming with JavaScript? — JavaScript developers, here’s a handy resource for your reference stack. This essential cheat sheet outlines syntax features that enable you to express your code using functional programming techniques. Check it out. Progress Kendo UI sponsor 15 HTML Element Methods You’ve Potentially Never Heard of — The DOM is full of delights, some of which David pokes at here, including scrollIntoView, getBoundingClientRect, and select. David Gilbertson Pattern Library First: An Approach For Managing CSS — Rachel Andrew looks at how using a pattern-based approach can make CSS easier to manage across a project. In this case, she uses Fractal to manage components which use CSS Grid. Rachel Andrew Web Components in 2018 — What we call “Web Components” is really a set of often separately specified Web technologies, including Shadow DOM, Custom Elements, and HTML templates. James Milner An Introduction to the CSS Paint API — The CSS Paint API allows you to call a special paint JavaScript function wherever you might ordinarily write a value where an image is expected by a CSS property. Google also has a guide to this feature which is, as yet, only supported in Chrome. Ruth John Intent to Ship in Blink/Chrome: Web Locks API — Web Locks is an API that lets scripts asynchronously gain locks over resources such as data stores. Blink-Dev 💻 Jobs Sr. Front-End Engineer, Creator Tools - New York City — We empower video creators to tell exceptional stories and to connect with their audiences & communities. Build the future with us. Vimeo Front-end Designer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote. Helical Levity Find A Job Through Vettery — Vettery matches top tech talent with fast-growing companies. Create your profile to get started. Vettery 📘 Tutorials Physics-Based Background Scroll Effects — Creating physics-based scroll effects using the open-source framework Matter.js. Will Boyd Performance Auditing: A Firefox Developer Tools Deep Dive — An in-depth guide to making use of the performance-related tools within Firefox. Ahmed Bouchefra Gallery Grid with CSS Grid — How to simply add a variable number of images into a blog post and have the scaling handled for you. Laura Kalbag CSS Grid in IE: Faking an Auto-Placement Grid with Gaps Daniel Tonon WebRTC and the Mechanics of Peer-to-Peer Networking Alexander Zlatkov Experimenting with First Input Delay in the Chrome UX Report — First Input Delay is the time it takes for a page to respond to a user’s first interaction with it, and ideally that’s under 100 milliseconds. Google Developers How to Quickly Prototype Apps with CSS Grid and CSS Variables Per Harald Borgen How to Build Complicated Grids using CSS Grid — A real-world example showing the creation of an unconventional homepage grid layout. Dan Webb On Leading and Trailing Spaces in HTML Attribute Values Louis Lazaris 🔧 Code and Tools 30 CSS Radio Button Styles Demonstrated with CodePen Freebie Supply Browsh: A Fully-Modern Text-based Browser, Rendering to TTY and Browsers — A fun one, this. It uses headless Firefox behind the scenes but renders graphics and video out to terminal. Browsh web-riimote: Turn Your Phone Into a 3D Controller for the Web Omkar Konaraddi

by via Frontend Focus