Frontend Focus Issue 530: February 23, 2022
source link: https://frontendfoc.us/issues/530
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Frontend Focus Issue 530
Frontend Focus
#530 — February 23, 2022 | Read on the web
🔒 How Everything We're Told About Website Identity Assurance is Wrong — Dives into how website trust is communicated online (certificates, SSL, and the like) — and how such things can often prove to be misleading.
Troy Hunt
Using Flexbox to Create a Dynamic Line Separator — How to make use of the default flexbox stretching behaviour to create a dynamic line separator. A solid tutorial told in Ahmad’s usual accessible style, with code examples and visuals to help move things along.
Ahmad Shadeed
Walkthrough of an Easy Angular Data Grid with Examples — You could write your own data grid, but why would you when this one already exists. See how easy it is to set up, bind data, group, sort, page, and more. Fiddle with the live samples or install it and try it for yourself, but don’t miss it.
Kendo UI for Angular sponsor
Testing Pipeline 101 For Frontend Testing — If you want to introduce a testing build routine here’s a quick look at how to get on the right track — specifically with the help of some testing frameworks and GitHub actions.
Ramona Schwerin
▶ Builder a Greener Web — A 20-minute talk on the environmental impact of our sites and what considerations you may want to take into account when it comes to the carbon footprint of your digital projects.
Michelle Barker
⚡️ Quick bits:
- Fresh data suggests that Microsoft Edge is on the verge of overtaking Safari as the world's second most popular desktop browser.
- This is a neat tip I'd forgotten about: You can shave up to 90% off the size of Google Fonts by declaring only the characters you actually need.
- This 'manifesto' aims to highlight the importance of including bidirectional text in your product.
- An analysis of top 1 million websites found 21 million tracking cookies belonging to 1200 companies 😱
📙 Tutorials, Articles & Opinion
A Complete Guide to CSS Cascade Layers — We’ve featured a few good links and resources on this topic over the last few weeks, and this one seems to be the most thorough yet — covering its origins, how it works, use cases, and more. Quick refresher: The @layer
feature allows us to define explicit contained layers of specificity (so we can avoid hacks).
Miriam Suzanne
Subsetting Font Awesome to Improve Performance — How to go about removing any unused glyphs from the font files so that it reduces the overall file size.
Adam Rackis
Survivorship Bias in Web Performance — Why your analytics shows your site as faster than it is, and why First Contentful Paint (FCP) is a particularly good metric to optimize for.
Simon Hearne
Are You Up to Date on Webhooks? 🤔 — Learn how to structure and version webhooks, how to build a webhooks backend, and why you should use them. Read more.
Hook Relay sponsor
The No-Nonsense Styling Method — A set of guidelines compiled to make styling “less surprising and more predictable”. Specifically, it aims to increase the scalability, maintainability, readability, and ease of change of your CSS.
Ben Lorantfy
Animating-In a Newly Added Element — Using @keyframes
just might remove the need for JavaScript when animating newly added DOM elements.
Stephanie Eckles
What Makes Writing More Readable? — Does a really good job of highlighting the benefits of plain language (with a neat toggle to see the before/after). The advice here is obviously applicable in several areas of life, but well worth considering from a web copy angle too.
Rebecca Monteleone and Jamie Brew
How to Make 'Slanted' Containers with CSS in 3 Steps
Dave Seidman
Creating a Read Progress Bar in React and TailwindCSS
Anshuman Bhardwaj
Senior Frontend Engineer (React) — Remote / NYC — We're the leading spend management platform for businesses. Small cross-functional front-end operations using React and TypeScript.
Ramp
Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired
🔧 Code, Tools & Resources
Simple.css: A 'Classless' CSS Framework — Similar to SPCSS, which we shared previously. This one includes dark mode and some nice typographic features for quickly setting up landing pages or other simple projects: "By 'classless' I mean that there are no CSS classes anywhere in the CSS or the HTML." Semantic HTML FTW!
Simple.css
Stylo: An Open Source WYSIWYG Rich Text Editor for JavaScript — Based on a web component, no dependencies, and you can configure the default toolbar to suit your app’s needs. Being able to edit the project's homepage is a neat touch.
David Dal Busco
Project Management for Software Teams Has Never Been Easier
Shortcut (formerly Clubhouse.io) sponsor
Atropos: Touch-Friendly 3D Parallax Hover Effects — The easiest and fastest way to fool the eye into thinking the screen has somehow developed three-dimensional capabilities (and, admittedly, annoy some users - so be careful) is to use parallex effects as demonstrated on the project's homepage.
Vladimir Kharlampidi
Mailwind: Use Tailwind CSS to Design HTML Emails — Just add Tailwind’s utility classes as you normally would, then install and run Mailwind via npm to generate the accompanying CSS or inlined HTML.
Soheil Rashidi
A Pure CSS Working Stopwatch — This is a neat little CSS stopwatch demo that actually works — which is possible thanks to the Houdini @property
(as such it only works in Chrome and Edge right now). Give it a try.
Jhey Tompkins codepen
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK