Best of Smashing Magazine — 2024
- 1
- 2
Smashing Magazine·2y
It’s Time To Talk About “CSS5” — Smashing Magazine
Since the release of CSS3 in 2009, the landscape of Cascading Style Sheets (CSS) has evolved dramatically with numerous new features. However, the terminology around CSS versions has lagged, leading to confusion in the developer community. The CSS-Next community, comprising members from the W3C's CSS Working Group and other web enthusiasts, aims to redefine CSS eras to better reflect modern capabilities. By labeling features that have shipped since 2013 as part of CSS4 and the latest features as CSS5, the group hopes to simplify learning and teaching CSS while providing a shared understanding of its evolution. They encourage community feedback and participation to help shape the future of CSS.
- 3
- 4
Useful CSS Tips And Techniques — Smashing Magazine
CSS has become more powerful with new features and techniques. Learn about CSS tips and techniques, testing HTML with CSS, self-modifying CSS variables, hanging punctuation, fixing aspect-ratio issues, and the ongoing debate on masonry layout in CSS.
- 5
Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
Learn how to use the :has() pseudo-class in CSS to apply conditional styling based on a selected option in a <select> element. This technique allows for styling not only the selected element, but also its parent and even further up the chain. Practical use cases include styling mandatory <select> elements and creating style variations of components.
- 6
Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine
Philip Braunen delves into solving the tricky combination of sticky headers and full-height elements on a webpage. He explains why simple solutions often fail due to CSS's intricacies and presents a robust method using CSS Grid. This approach avoids common pitfalls like fixed heights and container wrapping, providing a flexible and maintainable solution for layouts needing dynamic sizing.
- 7
SVG Coding Examples: Useful Recipes For Writing Vectors By Hand — Smashing Magazine
Learn practical tips for hand-coding SVGs, including creating simple shapes like rectangles, circles, and lines. Explore SVG coordinate systems, the <viewBox> attribute, and techniques for coding SVG with JavaScript. Enhance your SVGs with accessible attributes and group elements to manage transformations and repetitions efficiently.
- 8
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Learn how to create infinite-scrolling logos in HTML and CSS without using the deprecated marquee element. The technique involves using CSS animation and absolute positioning to achieve the desired effect. The HTML structure is kept simple with just a marquee container and logo images. Flexbox is used to position the images, and a CSS mask is used to create a fading effect. The animation is achieved using keyframes and CSS variables. The tutorial provides step-by-step instructions and code examples.
- 9
Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine
This post explores how to create modern CSS layouts without the need for a framework. It introduces four CSS classes for different layout approaches, including fluid layouts and repeating layouts. The article also covers the use of cascade layers and CSS variables for greater control over the layouts.
- 10
Creating Custom Lottie Animations With SVGator — Smashing Magazine
SVGator introduces comprehensive support for Lottie files, enhancing its versatility as a one-stop tool for vector animations. The platform now supports exporting in various video and image formats alongside Lottie, catering to a wide array of user needs. Users can test SVGator's functionalities for free, with the option to start projects from existing Lottie files or create new animations from scratch. It offers seamless integration with web and mobile applications, making it a valuable tool for developers and designers.
- 11
Beyond CSS Media Queries — Smashing Magazine
Media queries have limitations in terms of viewport focus, difficulty in management, and lack of responsiveness. Flexbox and Grid are alternative options for responsive design. Container queries allow for context-aware responsive layouts.
- 12
CSS min() All The Things — Smashing Magazine
The post explores the CSS min() function, showcasing its flexibility in combining various units to create responsive designs. It highlights the function's potential benefits and limitations, compares min() with other CSS techniques like media queries, and provides examples of how min() can be used for font sizing, margins, padding, and other layout properties. The author suggests that while min() is powerful, it shouldn't be the sole approach for responsive design.
- 13
Uniting Web And Native Apps With 4 Unknown JavaScript APIs — Smashing Magazine
The post discusses four lesser-known JavaScript APIs that have the potential to bridge the gap between web and native applications, enhancing the functionality of Progressive Web Apps (PWAs). These APIs include the Screen Orientation API, Device Orientation API, Vibration API, and Contact Picker API. Each API's capabilities, browser support, and practical implementation are explored through detailed examples and code snippets.
- 14
Integrating Image-To-Text And Text-To-Speech Models (Part 1) — Smashing Magazine
Explore the integration of vision-language and text-to-speech models to build applications that generate audio descriptions from images. Learn about the components involved in creating audio description tools, the functionality of VLM and TTS models, and practical examples of their use. By the end, you'll have an application that converts image content into spoken language.
- 15
What Are CSS Container Style Queries Good For? — Smashing Magazine
CSS Container Style Queries are a proposed feature that allows for querying an element's styles and applying styles to other elements based on certain conditions. They provide a new way to approach responsive design, but their usefulness and practicality are still under debate.
- 16
How To Build A Multilingual Website With Nuxt.js — Smashing Magazine
Learn how to build a multilingual website using Nuxt.js, leveraging the nuxt-i18n library for internationalization. The guide covers setting up a Nuxt.js project, using lazy-loading for translations, and fetching dynamic localized content from Hygraph. It also explores advanced features like interpolation, pluralization, and date/time translations to enhance the multilingual experience.
- 17
Decision Trees For UI Components — Smashing Magazine
Design teams can use decision trees for UI components to avoid never-ending discussions, confusion, and misunderstanding. Examples of decision trees for UI components are provided by Doctolib, Workday, Lyft, NewsKit, and Nucleus.
- 18
Designing For Gen Z: Expectations And UX Guidelines — Smashing Magazine
Generation Z values accessibility, inclusivity, sustainability, and authenticity in digital experiences. Contrary to common belief, they do not have short attention spans but are selective and critical of content. Designers should focus on mobile-only designs, genuine content, and support intrinsic motivation. Gen Z prefers real-world reflections and accessibility features out of the box, and they tend to rely on social circles and influencers over traditional advertising.
- 19
How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers — Smashing Magazine
Creating effective microcopy can significantly improve user experience by ensuring that interface text is clear, concise, and user-friendly. Key tips include making the text role-playable, being transparent on sensitive topics, using clear button labels, providing context for actions, avoiding excessive politeness, and ensuring consistency in terminology. Additionally, avoid using tech jargon, minimize the use of negative phrases, and ensure that titles and buttons are understandable independently of body text.
- 20
Switching It Up With HTML’s Latest Control — Smashing Magazine
HTML has introduced a native switch control that aims to improve the accessibility and usability of the component. The switch control can be styled using pseudo-elements, and support can be detected using CSS or JavaScript. However, there are concerns about the coupling of switches and checkboxes and the inconsistent communication with assistive technologies. Despite these concerns, the native switch control offers a more consistent approach to creating switch components.
- 21
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
CSS scroll-driven animations allow for dynamic effects linked to scrolling without the need for JavaScript or external libraries. These animations run on the main thread, providing smooth, high-performance experiences. They are currently supported in Chrome and Firefox (with a flag), but not yet in Safari. Scroll progress timelines and view progress timelines are two types of scroll-driven animations that can be easily implemented and customized in CSS.
- 22
Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website — Smashing Magazine
While Google Lighthouse is a powerful and convenient tool for assessing website performance, it provides an incomplete picture as it relies on simulated data. For a more accurate and comprehensive understanding, it's important to incorporate tools that use real-user data such as those integrating Chrome User Experience Report (CrUX) and real-time user monitoring (RUM) services like DebugBear.
- 23
Best Practices For Naming Design Tokens, Components, Variables, And More — Smashing Magazine
This post explores best practices for naming design tokens, components, variables, and more. It covers naming conventions, inspiration for naming, design token naming playbook, flexible design token taxonomy, naming colors, common names for UI components, variables taxonomy map, and design token names inventory. It offers valuable resources and workshops for those interested in diving deeper into design tokens and design systems.
- 24
Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering — Smashing Magazine
This post discusses the challenges and options for stateful DOM rendering in vanilla JavaScript, exploring the use of libraries and frameworks. It covers the three categories of markup, provides code examples for rendering and interactivity, and highlights the limitations and complexities of DIY approaches.
- 25
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
Learn how to use custom properties in CSS to animate the colors of a gradient and create complex animations. Discover the benefits of using @property to define variables with custom specifications.