#400 — July 17, 2019 |
Frontend Focus |
Everything You Need To Know About CSS Margins — At first glance, margins place space around DOM elements, pushing other elements away, but things can get complicated fast when you think about how margins can collapse together or introduce Flexbox or CSS Grid. Rachel Andrew |
Color Inputs: A Deep Dive into Cross-Browser Differences — This really is a ‘deep dive’. Certainly deeper than I needed, but I admire Ana’s ability to go so deep into analyzing the styling of a browser-supplied input component. You will absolutely learn something but, as one commenter notes, “that’s nightmare territory.” Ana Tudor |
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 |
Debugging CSS Grid with Firefox Dev Tools — When you build a layout using CSS grid you end up with rows, columns, cells, etc. but they’re not really elements so visualizing and debugging them can be tough.. but Firefox’s dev tools have some nifty features to help. Chris Nwamba |
Debug the DOM in VS Code using Elements for Microsoft Edge — A look at a new Visual Studio Code extension, Elements for Microsoft Edge, that lets you inspect and debug the DOM directly from within VS Code and see the impact of changes to the page in real time. Paul Gildea |
The MDN Web Docs Have a New React-Powered Homepage — It’s in beta now but the popular frontend developer resource site is trying a React-driven front-end. Mozilla |
💻 Jobs |
Frontend Developer - Remote — Build the web’s next-level document collaboration library with React. PSPDFKit |
Get Hired Based on Your Skills Not Your CV — Our AI makes it easier and quicker to match with top frontend jobs, with no recruiters and an average salary of £70k. hackajob |
📙 Tutorials & Opinion |
Avoid Placeholder Text by Animating Form Labels — Placeholder text has some (minor) usability issues, but what if your Christopher Schmitt |
Managing Multiple Backgrounds with Custom Properties — A clever use for CSS variables here. Chris Coyier |
A Look At Philippe Suter |
Web Unleashed - The Front-End Developer Event in Toronto, Sept 13-14 — Networking, sessions, workshops and more. Save 20% on tickets to #WEBU19 with code FRONTENDFOCUS. FITC sponsor |
Scrolling Is Easier Than Clicking — “Cognitively, it’s easier to move a little where you are than to go somewhere else.” Joshua Porter |
How To Build a 'Sketch' Plugin with JavaScript — Sketch is a popular (but commercial) vector graphics editor for macOS and you can dynamically extend it with JavaScript. Smashing Magazine |
Improve Your JavaScript Knowledge By Reading Source Code — 👍 If you get stuck with a certain API or language feature, reading other people’s source code is a great way to break out of a funk. Carl Mungazi |
Three Predictions From the State of CSS 2019 Survey Sacha Greif |
The Web Can't Survive a Monoculture — You have the power to prevent the Web becoming a Chrome-dominated monoculture, says Mike. Mike Pennisi |
Using HTML Validator Badges Again? — Remember when sites used to declare their code was both semantic and followed W3C guidelines by displaying validator badges with pride? Should we bring them back..? Bradley Taunt |
|
🔧 Code, Tools & Resources |
Exthouse: Analyze The Impact of a Browser Extension on Web Performance — If you build browser extensions, you need this! It’s a tool powered by Lighthouse that provides a report about an extension’s impact on overall Web performance. treo.sh |
webhint: A Linting Tool for Web Best Practices — A customizable (and extensible) tool that checks your site for accessibility, performance, security, and other concerns. JS Foundation |
The State of JavaScript: 2019 and Beyond. Get the Whitepaper Progress Kendo UI sponsor |
Color Accessibility: Tools and Resources to Help You Design Inclusive Products — “All the resources, tips and tools I regularly use to build and check the color accessibility of my products in one place.” It’s a good selection. Stéphanie Walter |
Doggo Ipsum: The Doggo Nonsense Text Generator — Want some pointless auto generated text to pad out a mock Web page design? Skip Lorem Ipsum and enjoy this dog-themed doggerel. Mike Lee |
SurveyJS: A JavaScript Survey and Form Library — Here’s a live demo. Devsoft Baltic OÜ |
|