CategoryTechniques

August 2, 2021 — After analyzing CSS and its weaknesses, and management giving a green light to the refactoring project, it’s time to get to work. A team needs to agree on the internal code standards and best practices, plan out the refactoring strategy, and outline individual tasks. We need to set up a visual regression testing suite, and a maintenance plan to enforce the new standards and best practices in the future. Read more…

July 9, 2021 — Accessibility is often overlooked or bolted on to the end of a project from the experiences in Todd’s career in web development and design. The case for accessibility is something we as people who create and build things for the web should be implementing and advocating for from the inception of a project to the release or handoff and beyond. Read more…

July 5, 2021 — HSL colors are very powerful when we use them the right way. They can save us time and effort and even help us to explore options for how to apply color to design. In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects. Read more…

June 28, 2021 — In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more. It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and save time in the long run. Read more…

June 10, 2021 — Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there. Read more…

May 26, 2021 — Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers. Carie will also be running an online workshop on Accessible Front-End Patterns all around front-end accessibility. Read more…

March 11, 2021 — Ideally, a CSS auditing tool would provide some insights about how heavily CSS implact rendering performance, and which operations lead to expensive layout recalculations. It could also highlight what properties don’t affect the rendering at all (like Firefox DevTools does it), and perhaps even suggest how to write slightly more efficient CSS selectors. In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Starting out with a few tools for getting to the bottom of CSS. Read more…

February 23, 2021 — A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive gradient image effect for extra flair. Read more…

February 8, 2021 — We use abstractions and conventions to hide away the tricky and error-prone parts, which in turn makes it easier for everyone who needs to do the same task. The ideas Steven Frieson shares here should be actionable in most applications depending on your styling solution and browser support. Migrating to use this system is not very risky since stacking contexts are already scoped individually; you can migrate one context as it already exists at a time. Read more…

December 3, 2020 — Markdown is a powerful markup language that allows editing and formatting in plain text format that can then be parsed and rendered as HTML. It has a declarative syntax that is both powerful and easy to learn for technical and non-technical folks. However, due to the consequential ambiguities in its original specification, there have been a number of distinct flavors (or custom versions) that aim to erase those ambiguities as well as extend the original syntax support. This has led to a steep divergence from what can be parsed and what is rendered. CommonMark aims to provide a standardized specification of Markdown that reflects its real-world usage. Read more…