Everything worth knowing about CSS margins and color input controls

#400 — July 17, 2019 Read on the Web 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 label text could be the placeholder text? An interesting concept! Christopher Schmitt Managing Multiple Backgrounds with Custom Properties — A clever use for CSS variables here. Chris Coyier A Look At z-index Values Seen in The Wild — There’s not a lot to learn here, but it’s just the sort of data and analysis I enjoy seeing. Unsurprisingly, people love using z-index values like 1000 and 9999 just to make sure their element of choice is rendered on top 😄 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 💡 Tip of the Week supported by How to add a custom scrollbar to your page A site rocking a distinctive scrollbar isn't something that's overly common, mainly due to limited browser support, but it can prove to be a nice little touch — whether you make it bigger and easier to grab, or have it match your brand colours. Here's how to do it by way of some CSS pseudo-properties. To start out, you can change the width by defining one in a -webkit-scrollbar declation like so: body::-webkit-scrollbar {     width: 1.2em; } Changing the color of the scrollbar makes use of the following selector: body::-webkit-scrollbar-thumb {     background-color: #f06529; } These are just two examples of what you can do. As I mentioned earlier, current support for custom scrollbars is limited (Certain versions of Chrome, Opera & Safari) — but it's worth noting that official scrollbar styling is coming. If you're going to implement a custom scrollbar on your site there are a few usability considerations to keep in mind, cheifly around target size and contrast. Adrian Roselli outlines some baseline rules to keep in mind here. This article on CSS-Tricks is also worth a look. This week's tip is sponsored by Pantheon, the WebOps platform built for agility. 40% of users abandon a website that takes over three seconds to load, and a one second delay can reduce conversions by 7%. Get your free website health check from Pantheon. 🔧 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Ü    🗓 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.

by via Frontend Focus