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
:langselector 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
Top comments (0)