March 14, 2018 #331 — March 14, 2018Read on the WebFrontend FocusUnderstanding Margin Collapse in CSS — A visual look at a fundamental CSS concept: margins that ‘collapse’ against each other. Except when they don’t.Jonathan HarrellSay Hello to Houdini and the CSS Paint API — Houdini is a W3C effort to build ways for developers to get low-level access to CSS features and the CSS Paint API leans on that work in letting you dynamically generate graphics that are then used in CSS properties. Still experimental but this is a fine intro to tech that may be big news later on.Will Boyd Why Your Site is Slow — Issues like slow queries and redundant JS files are often blamed when a site is slow, although there are numerous factors that can affect performance. This presentation dives into the many answers to this question and looks for the root causes.Pantheon sponsor? Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses — A practical look at local overrides, introduced in Chrome 65, a feature to maintain changes you make in DevTools across fresh page loads.Harry RobertsSwapping Images with the ‘sizes’ Attribute — sizes lets you help the browser in picking the right image when multiple options are available via srcset, but it can be used creatively to good effect as seen in the loupe demo here.Scott JehlTake the 2018 Front-End Tooling Survey — Looking to gather input from frontend devs and shed some light on the tooling habits across the web dev industry. This has been run a few times before with interesting results.Ashley NolanFirefox 59 Released: What’s New for Developers — Firefox 59 has entered general release. Nothing huge for developers, but some cool stuff including calc() is now supported in color values and media query values, font-optical-sizing, Pointer Events, and developer tool improvements.Mozilla? JobsFrontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.X-TeamSenior Frontend Engineer (Berlin) — Explore conversational commerce with Google Assistant, chatbots, and social media to bring the best experience to our customers.ZALANDOFind a Job You’re Passionate About — Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job.Vettery? NewsHappy 29th Birthday to the World Wide Web — Without it, you might be reading Gopher Weekly right now.Coralie Mercier (W3C)CSS Text Decoration Module Level 4: First Public Working Draft — Covers CSS features relating to text decoration – underlines, shadows, etc.W3CCityJSConf: March 26 (London) — Tickets for the Kyle Simpson workshop sessions are still available.Firefox to Disable W3C Proximity & Ambient Light Sensor APIsCatalin Cimpanu? Articles and TutorialsCSS Grid One Year On — It’s a year since Firefox became the first browser to ship spec-compliant CSS Grid support (IE 10 had an earlier variant.)Rachel Andrew? CSS Variables: A New Hope — Truths, myths, and lies about CSS variables. Plus some neat demos.Mauricio PalmaAuto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` — “At first glace of the names, it might seem like auto-fill and auto-fit are opposites. But in fact, the difference between is quite subtle.”Sara SoueidanBuilding a Static Site With Components Using NunjucksSmashing MagazineNotched Boxes with ‘clip-path’ — Forget rounded corners on elements, what about angled corners?Chris Coyier? Writing CSS with Accessibility in MindManuel MatuzovicA DIY Web Accessibility BlueprintBeth RaduenzelStitch: The Latest (And Best) Way to Build Your Appmongodb sponsorHow to Find and Fix Brittle CSSTrevor MillerAnimating Elements Along SVG Paths with JavaScriptLuis Manuel? Code and ToolsA Browser-Based CSS Grid Template BuilderAnthony DugoisUnCSS: Remove Unused Styles From Your StylesheetsGiacomo Martino$20 Free On A New Linode Account — Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.Linode Cloud Hosting sponsorSloth: One-Click Network Throttling in Chrome — A quick way to go slow for testing purposes. Chrome Web Store. Or use DevTools’ built-in throttling.Artem DenysovRough.js: Canvas Graphics with a Hand-Drawn, Sketchy Appearancereact-css-grid-table: A React Table Library using CSS Grid Layout — Psst.. did you know we also have a React newsletter now?Rebecca ParkFix JavaScript Bugs Like a Boss ?ROLLBAR sponsor ? Golden OldiesAnimating Your Site’s Hero Header with CSSDonovan HutchinsonCSS Tip: Use ‘:not’ to Save Time and Lines of CodeTimothy B SmithThe Trials and Tribulations of the ‘title’ AttributeScott O’HaraHow to Use Flexbox to Create a Modern Card Design LayoutAbbey Fitzgerald Source link