BetterWebList's Weekly Roundup - Week #2

Victor Ofoegbu — Thu, 21 May 2020 20:14:47 +0000

Hey There!: BetterWebList is a daily curation of 3 articles to help you build better experience on the web. This is the weekly roundup featuring 10 of the most exciting & informative resources in the past week. Reach out to me on Twitter for headsup/suggestions.

And without further ado 🏃‍♀️

How We Created a Dark UI For GitLab's Web IDE: A lot of considerations go into making awesome dark mode experiences. This article from the GitLab engineering blog walks through their process of implementing dark mode on the GitLab Web IDE.
An Introduction to Accessible Data Visualizations With D3.js: Everyone's into COVID-19 dashboards these days and there's a huge chance you've built one. Sarah Fossheim starts this insightful series on accessible data visualizations with D3.js. The article covers color contrast, presenting content to screen readers and other possible improvements.
Disclosure Widgets: Adrian Roselli writes about the nuances of making a disclosure widget on the web. He talks about browser support, polyfills, and screen reader support. Adrian's focus on web standards makes him the best person to share his learnings
How to Build a Chrome Extension: Sarah Drasner shares how ridiculously easy it is to build a chrome extension. If you're never made one before, you know how complex it sounds. After reading this article, I had a few ideas of extensions I'll build in my spare time. Awesome read peeps
In Defense of The Modern Web: It's very likely you've seen Tom MacWright's article; Second-guessing The Modern Web. If you haven't you really should. Rich Harris reacts to a few of Tom's idea, highlighting awesome work to make the web fast by folks at Next, Gatsby, Marko etc.
Accessible Images For When They Matter Most: You might have heard a bunch of people say add alt="" to all your images! It turns out this isn't much of great advice. Most times, we use images that are decorative and wouldn't make sense for assistive technology to announce. This is a long, informative read from Carie Fisher, so be ready for the ride.
Form Design: Multiple Inputs Versus One Input: I always look forward to Adam Silver's design-focused ****articles. In this one, he writes about input patterns that split user entries into smaller inputs (Much like credit card & phone numbers). He talks about the challenges of those kinds of controls as well as when we should use them
How to Tame Line Height in CSS: Caleb Williams dives deep into the line-height property and shows how it relates to leading in print design. After reading this article, I learned line-height works more like padding-top/bottom. You might want to read this one too.
Setting TypeScript For Modern React Projects Using Webpack and Babel: It's safe to assume almost no one writes large projects without TS & Webpack. If you're curious how starters like CRA, etc works, you might want to check this one out. In this article Blessing Krofegha sets up a React project from scratch with TypeScript & Webpack. This article came right on time as this is something I've been interested in lately.
Understanding Destructuring, Rest Parameters, and Spread Syntax: It took me lots of articles to understand the differences between spread and rest operators. I literally had the click after reading this article from Tania Rascia. This is a long one, but it feels kinda natural coming from her.

Stay safe and see you next week - Victor
PS: Checkout BetterWebList

Betterweb List's Weekly Roundup - Week #1

Victor Ofoegbu — Sun, 26 Apr 2020 04:45:28 +0000

This week's roundup of Betterweb List features exciting articles on performance, accessible typography, internalization, and beautiful text effects. There's a lot of awesomeness and exciting things to learn so let's dive right in.

NB: Betterweb List is a daily curation of 3 of the most exciting and essential articles to help you build better experiences on the web. Check it out here

The Cost of Javascript Frameworks: Tim Kadlec Talks about how the adoption of frontend frameworks increases dependency on JavaScript. JS has to be downloaded, parsed and executed, on the main thread! It's also very shocking how sites with jQuery are almost 17 times the React number.
Accessible Font Sizing, Explained: Andres Galante goes into the specifics of accessible font sizing on the web. He talks about how we can make a huge difference by using the browser's default accessible sizing, giving users the ability to resize the text without breaking our sites.
Better Form Inputs for Better Mobile User Experiences: Alex Holachek goes beyond the surface to show us how much more goodness we can get by using the right input types. Dates, time, tel, are all wired directly to the OS to show the appropriate keyboard types. It was an exciting read!
CSS for internationalisation: Chen Hui Jing explains where CSS can help internalization efforts on the web. I'm guessing you're curious how. Same here. But a typical example is the :lang selector used to style elements in a different language from the rest of the page. He also talks about writing modes and logical properties.
Building a Scalable CSS Architecture With BEM and Utility Classes: Sebastiano Guerriero writes about building a CSS architecture that's efficient and consistent. I personally learned that there's no one size fits all method for styling elements. He talks about using a mix of Global styling, BEM, and utility classes. You should really read this one!
Constrained CSS grids without max-width.: If you build lots of sites, you must have found yourself locked in a max-width container. How can you make things edge to edge without introducing another parent element? Ethan writes about a solution using CSS Grids and the calc() function.
Different Approaches to Responsive CSS Motion Path: Michelle Barker explores how we can make responsive CSS motion paths. She also talks about how the layout can break while resizing occurs and using Resize Observer to scale the text appropriately.
Chrome 83 Beta: Cross-site Scripting Protection, Improved Form Controls, and Safe Cross-origin Resource Sharing: Chrome 83 Beta ships with trusted types for DOM manipulation, improved form controls due to work on Chromium, New cross-origin policies, Origin trials on Native file system, Performance.measureMemory(), etc.
Engineering code quality in the Firefox browser: A look at our tools and challenges: Here's an interesting article from the firefox engineering team about code quality. It covers areas like Static analysis, linting, coding style, and code coverage.
Quick stats: The firefox browser has about 21 million lines of code.
Creating Playful Effects With CSS Text Shadows: If you're looking for something to spice up your day, then you might want to check out Sarah Fossheim's article on CSS Tricks. This isn't the first time I'm seeing text effects generated with box shadows, but Sarah is so creative with them. What have I been doing with box shadows all my life?

That'll be all for now. Stay tuned for next week's roundup. See Betterweb List for a daily curation and please share a resource with me🙏

Stay safe and strong

DEV Community: Victor Ofoegbu

BetterWebList's Weekly Roundup - Week #2

Betterweb List's Weekly Roundup - Week #1