Archive

Author Archive

Yet Another Anchor Positioning Quirk

December 9th, 2024 No comments

I strongly believe Anchor Positioning will go down as one of the greatest additions to CSS. It may not be as game-changing as Flexbox or Grid, but it does fill a positioning gap that has been missing for decades. As awesome as I think it is, CSS Anchor Positioning has a lot of quirks, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has bugged me since I first saw it.

The inception

It all started a month ago when I was reading about what other people have made using Anchor Positioning, specifically this post by Temani Afif about “Anchor Positioning & Scroll-Driven Animations.” I strongly encourage you to read it and find out what caught my eye there. Combining Anchor Positioning and Scroll-Driven Animation, he makes a range slider that changes colors while it progresses.

CodePen Embed Fallback

Amazing by itself, but it’s interesting that he is using two target elements with the same anchor name, each attached to its corresponding anchor, just like magic. If this doesn’t seem as interesting as it looks, we should then briefly recap how Anchor Positioning works.

CSS Anchor Positioning and the anchor-scope property

See our complete CSS Anchor Positioning Guide for a comprehensive deep dive.

Anchor Positioning brings two new concepts to CSS, an anchor element and a target element. The anchor is the element used as a reference for positioning other elements, hence the anchor name. While the target is an absolutely-positioned element placed relative to one or more anchors.

An anchor and a target can be almost every element, so you can think of them as just two div sitting next to each other:

<div class="anchor">anchor</div>
<div class="target">target</div>

To start, we first have to register the anchor element in CSS using the anchor-name property:

.anchor {
  anchor-name: --my-anchor;
}

And the position-anchor property on an absolutely-positioned element attaches it to an anchor of the same name. However, to move the target around the anchor we need the position-area property.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}
CodePen Embed Fallback

This works great, but things get complicated if we change our markup to include more anchors and targets:

<ul>
  <li>
    <div class="anchor">anchor 1</div>
    <div class="target">target 1</div>
  </li>
  <li>
    <div class="anchor">anchor 2</div>
    <div class="target">target 2</div>
  </li>
  <li>
    <div class="anchor">anchor 3</div>
    <div class="target">target 3</div>
  </li>
</ul>

Instead of each target attaching to its closest anchor, they all pile up at the last registered anchor in the DOM.

CodePen Embed Fallback

The anchor-scope property was introduced in Chrome 131 as an answer to this issue. It limits the scope of anchors to a subtree so that each target attaches correctly. However, I don’t want to focus on this property, because what initially caught my attention was that Temani didn’t use it. For some reason, they all attached correctly, again, like magic.

What’s happening?

Targets usually attach to the last anchor on the DOM instead of their closest anchor, but in our first example, we saw two anchors with the same anchor-name and their corresponding targets attached. All this without the anchor-scope property. What’s happening?

Two words: Containing Block.

Something to know about Anchor Positioning is that it relies a lot on how an element’s containing block is built. This isn’t something inherently from Anchor Positioning but from absolute positioning. Absolute elements are positioned relative to their containing block, and inset properties like top: 0px, left: 30px or inset: 1rem are just moving an element around its containing block boundaries, creating what’s called the inset-modified containing block.

A target attached to an anchor isn’t any different, and what the position-area property does under the table is change the target’s inset-modified containing block so it is right next to the anchor.

A target element inset-modified containing block shrunk to be in the top left corner of an anchor

Usually, the containing block of an absolutely-positioned element is the whole viewport, but it can be changed by any ancestor with a position other than static (usually relative). Temani takes advantage of this fact and creates a new containing block for each slider, so they can only be attached to their corresponding anchors. If you snoop around the code, you can find it at the beginning:

label {
  position: relative;
  /* No, It's not useless so don't remove it (or remove it and see what happens) */
}

If we use this tactic on our previous examples, suddenly they are all correctly attached!

CodePen Embed Fallback

Yet another quirk

We didn’t need to use the anchor-scope property to attach each anchor to its respective target, but instead took advantage of how the containing block of absolute elements is computed. However, there is yet another approach, one that doesn’t need any extra bits of code.

This occurred to me when I was also experimenting with Scroll-Driven Animations and Anchor Positioning and trying to attach text-bubble footnotes on the side of a post, like the following:

A blog post body with paragraphs, the paragraphs have footnotes attached on the sides

Logically, each footnote would be a target, but the choice of an anchor is a little more tricky. I initially thought that each paragraph would work as an anchor, but that would mean having more than one anchor with the same anchor-name. The result: all the targets would pile up at the last anchor:

CodePen Embed Fallback

This could be solved using our prior approach of creating a new containing block for each note. However, there is another route we can take, what I call the reductionist method. The problem comes when there is more than one anchor with the same anchor-name, so we will reduce the number of anchors to one, using an element that could work as the common anchor for all targets.

In this case, we just want to position each target on the sides of the post so we can use the entire body of the post as an anchor, and since each target is naturally aligned on the vertical axis, what’s left is to move them along the horizontal axis:

CodePen Embed Fallback

You can better check how it was done on the original post!

Conclusion

The anchor-scope may be the most recent CSS property to be shipped to a browser (so far, just in Chrome 131+), so we can’t expect its support to be something out of this world. And while I would love to use it every now and there, it will remain bound to short demos for a while. This isn’t a reason to limit the use of other Anchor Positioning properties, which are supported in Chrome 125 onwards (and let’s hope in other browsers in the near future), so I hope these little quirks can help you to keep using Anchor Positioning without any fear.


Yet Another Anchor Positioning Quirk originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

30 Most Exciting New Tools For Designers, December 2024

December 9th, 2024 No comments
001

2024 has seen an explosion in AI-powered tools and services, some genuinely helpful, others simply bandwagon jumping. 

It is clear that, with or without AI, the things designers and developers find most useful haven’t fundamentally changed: good quality design resources to make good work; productivity tools to get that work done faster; and business helpers to get the job in the first place, and get paid for it while maybe having a little fun along the way.

Each month, we have selected what we hope you will find most useful from the scores of offerings that have become available this past year. And now, as 2024 draws to a close, we’d like to present you with – in our opinion – the best of the best covering all of these areas. Enjoy!

Kittl

Kittl has been around for a few years now, but 2024 saw some pretty major updates to this design platform. Most notable included an AI copilot, image sets, and improved image generation and editing.

Randoma11y

Randoma11y generates colors based on contrast ratio, ensuring that every combination will meet accessibility requirements. 

Screen Ruler

Does what it says on the tin: Screen Ruler lets you get the measurements for elements, margins, and padding without having to drill down in your browser’s devtools.

003

Balance

Balance time tracker acknowledges that taking regular breaks is both good for mental health and makes us more productive in the long run.

004

Finmei

Keeping track of the business side of things is a necessary evil for many freelancers, and this simple invoicing and expenses manager is designed to make things easier.

005

Punch Back

This little stress buster might be our favorite of the year. Keep your cool with clients by taking your frustrations out on this app.

006

ReCraft

ReCraft’s image generator allows you to create sets of images in a consistent style – handy if you need a set of icons in a hurry.

007

Chromafy

With Chromafy’s browser extension you can test different color palettes on live sites. Palettes can be up to 5 colors.

008

Free Faces

Free Faces is a curated gallery of free fonts from a variety of sources. Sort by style for a faster search if you know what you want or have a more leisurely browse.

009

Intentional

Tell Intentional what task you want to focus on in a work session, and it will (virtually) slap you on the wrist if you wander off on the web.

010

Layers

If you are looking for an alternative to Behance or Dribbble, Layers is a community platform where designers can share their work. There’s a designers directory and a jobs board, too.

011

SVGator

SVGator is an online SVG animation editor that requires no coding skills to use.

012

Finder Hub

This little utility brings up a floating Finder window when you hover over the notch on your MacBook screen – a small thing but surprisingly helpful.

013

Scopey

Scope creep is a real problem for freelancers and small agencies. Scopey acts like an account exec by helping produce detailed quotes and managing change requests and cost updates.

014

Fonts Ninja

Fonts Ninja’s latest offering is this fonts showcase. Bookmark fonts you like, and when you’ve made up your mind, follow the link to buy directly from the creator foundry.

015

Moodboard Creator

Defeat the blank page/screen by giving MoodBoard a few keywords and its AI will generate a mood board to get you started.

016

Stretch It

This timer is simple, but there’s something fun and appealing about it. Set it by pulling it down from your (Mac) menu bar.

017

Gigapixel AI

If you’re stuck with too small or too low-quality images, Gigapixel AI can step in. Its algorithm can enlarge images without loss of quality and clean up pixelation.

018

Atomize

Atomize design system for Figma includes 200+ styles, 200+ variables, 700+ components, and sample screens. Use it as design scaffolding to speed up your UI build time.

019

TimeFrame

TimeFrame brings together to-do lists, time trackers, task timers, and calendars in one app to help boost your productivity.

020

Font Interceptor

Font Interceptor not only identifies all the fonts on a chosen web page, it lets you download them and try them out. Note: the people behind this do not support stealing fonts.

021

Focumon

If you are someone who finds gamification helpful, Focumon might be for you: it’s a productivity timer that collects and trains ‘monsters’ for you as you work.

022

Done

Done is a simple weekly planner with a minimal, intuitive user interface. It has the functionality you need without taking up your time to use it.

023

Rohesta

Rohesta is a serif font best suited to display. It makes a strong statement, with a nostalgic feel thanks to its elegant curves.

024

Sidekick

Sidekick is a chromium based browser designed to boost productivity. As well as blocking distracting adverts and notifications, it integrates your most used web apps and keeps your tabs organized.

025

Shotune

Create and edit design mockups from screenshots using Shotune’s online editor.

026

Spectrum

Spectrum is a library of over 100 free, editable vector shapes. There are all sorts of shapes, from simple circles to complex stars, with more to be added regularly.

027

Drop

Drop is a file transfer platform aimed at creatives. It allows you to showcase and share your work as well as simply send files.

028

DynaUI

This UI component library is built in React, Tailwind CSS, and Framer Motion. Components are animated, fully customizable, and free, with a paid option for templates and sections. Coding skills are required.

029

HourlyRate

HourlyRate is a platform for freelancers and small businesses that now combines a jobs board with CRM and accounting facilities. Based on your profile, it can suggest jobs from multiple boards, including Behance, LinkedIn and Freelancer.  

030
Categories: Designing, Others Tags:

The Heartfelt Story Behind CSS’s New Logo

December 8th, 2024 No comments

In the fast-paced, technical world of web development, it’s easy to forget the human stories that lie behind the technology we use every day.

Recently, the unveiling of CSS’s official logo brought one such story to light—a deeply touching narrative that reminds us of the personal connections and emotions that shape the digital tools we take for granted.

The new CSS logo is not just a symbol of a technology that underpins the web; it’s a tribute to love, loss, and the strength of a community that honors its members in meaningful ways. Central to this story is the color “Rebecca Purple” (#663399), which features prominently in the design.

A Tribute to Rebecca Meyer

“Rebecca Purple” is a color with a profound backstory. It was introduced to the CSS color palette in 2014 to honor Rebecca Meyer, the late daughter of Eric Meyer, a renowned web designer and developer.

Rebecca passed away at just six years old after a brave battle with brain cancer. Her favorite color was purple, and in her memory, the web development community united to adopt “Rebecca Purple” as an official CSS color name.

This initiative was not only a heartfelt tribute but also a testament to the compassion and solidarity within the web community. By embedding Rebecca’s favorite color into CSS, developers created a lasting legacy that continues to remind us of the human stories behind the code.

A Logo With a Deeper Meaning

The inclusion of “Rebecca Purple” in the new CSS logo elevates it from a simple design to a powerful emblem of remembrance and community.

The logo’s design incorporates clean lines and modern aesthetics, but it’s the choice of color that makes it extraordinary. It serves as a visual representation of the collaborative, empathetic spirit that drives innovation in the web industry.

This decision wasn’t just about paying tribute to Rebecca—it was about celebrating the web’s role in connecting people and stories. The web is not just a tool for communication or commerce; it’s a space where personal narratives can live on, touching lives in unexpected ways.

The Community’s Role in Shaping the Web

The story behind “Rebecca Purple” and the CSS logo reflects a broader truth about the web: it is built by people for people. Each line of code, each design decision, and each innovation is the result of human creativity and collaboration.

The adoption of Rebecca’s favorite color into CSS is a poignant example of how the web community can come together to create something beautiful and meaningful.

A Legacy That Lives On

As web developers and designers, we often focus on the technical details—getting the layout right, ensuring performance, optimizing for accessibility. But stories like Rebecca’s remind us why we do what we do: to build a web that connects us, not just through data and content, but through empathy and shared humanity.

The CSS logo, with its nod to “Rebecca Purple,” now stands as a symbol of this mission. It reminds us that the web is more than technology; it’s a canvas for stories, memories, and connections that transcend the digital realm.

So, the next time you use “Rebecca Purple” in your CSS stylesheets, take a moment to reflect on its origins. It’s more than just a color—it’s a legacy, a tribute, and a testament to the heart of the web community.

Categories: Designing, Others Tags:

Pinterest Predicts Design Trends for 2025

December 7th, 2024 No comments
1 1
Image courtesy of Pinterest

Design Trends for Web and Digital Spaces

  • Rococo Revival Online
    Lavish, ornamental aesthetics inspired by the Rococo era are set to dominate. Designers can expect to see digital experiences emulating intricate table settings, layered textures, and classical typefaces that evoke elegance and nostalgia. With searches for “rococo party” up 140%, this trend is a golden opportunity for brands targeting luxury and event-oriented audiences.
  • Primary Play in UI Design
    Bold, youthful primary colors are finding their way into website layouts, app interfaces, and brand palettes. This trend resonates particularly with Gen Z audiences, reflecting their preference for playful, approachable designs. Expect to see vibrant, hand-drawn elements, murals, and abstract shapes making their way into landing pages and digital marketing assets.
  • Terra Futura Aesthetic
    Sustainability and earthy tones will continue to shape web design, emphasizing eco-friendly values. Minimalistic layouts paired with natural textures, plant-inspired patterns, and interactive garden visuals can elevate a brand’s commitment to the environment. This trend aligns with the increasing popularity of “self-sufficient garden” searches, which have spiked by 115%.

Fashion and Beauty Trends: Impact on Branding and Visual Identity

  • Cherry Coded Branding
    Deep red tones are set to dominate visual identities, particularly for brands aiming to convey passion, energy, and boldness. Designers can explore gradients and overlays with cherry hues in hero images, call-to-actions, and logo design. The 325% increase in searches for “cherry vibe” signals a strong shift toward this striking color.
2
Image courtesy of Pinterest
  • Castlecore Websites
    The medieval-inspired “castlecore” aesthetic is making waves, with a 45% increase in searches for “castle house plans.” For designers, this translates to opportunities in creating fantasy-inspired websites and immersive storytelling platforms with gothic typefaces, stone textures, and regal motifs.
  • Moto Boho in Visual Storytelling
    A fusion of rugged and bohemian styles, “moto boho” is expected to influence product photography, web visuals, and branding for lifestyle and fashion brands. Incorporate edgy leather textures, fringed animations, and rugged layouts for a distinctive look.
  • Aura-Inspired UX/UI
    Reflective of mood and individuality, the “aura beauty” trend brings vibrant, mood-based colors to the forefront. Interactive web elements, dynamic gradients, and personalized color schemes can create deeper user connections, making this trend ideal for e-commerce and personal branding sites.
  • Sea Witchery in Digital Branding
    Mysterious and oceanic themes are captivating audiences, offering endless inspiration for dark mode designs, flowing animations, and mermaid-inspired palettes. This trend’s allure lies in its ability to create immersive and enigmatic digital experiences.

How Designers Can Apply These Trends

For web designers and digital creatives, these emerging styles offer a framework to innovate and refresh client projects:

  1. Incorporate Nostalgia: Explore historical aesthetics like Rococo and medieval-inspired elements in layouts and branding to create emotional connections.
  2. Play with Bold Colors: Integrate primary colors or mood-based palettes to enhance visual engagement, especially for Gen Z-focused projects.
  3. Embrace Sustainability: Use eco-friendly motifs, minimalistic designs, and earthy tones to align with socially conscious brands.
  4. Experiment with Immersion: Tap into storytelling trends like “Sea Witchery” and “Castlecore” to craft experiences that transport users to another world.
3
Image courtesy of Pinterest

As these trends continue to shape audience preferences, designers who adopt them early will position themselves as innovators in the digital landscape.

From user interfaces to marketing collateral,

Pinterest has unveiled its much-awaited 2025 trend forecast, offering a sneak peek into the creative directions set to define design, lifestyle, and branding aesthetics in the coming year.

The trends highlighted by “Pinterest Predicts” resonate with both emerging and established audiences, providing valuable insights for designers, web developers, and creatives looking to stay ahead.

With an impressive track record of 80% accuracy, these predictions reveal the themes that will influence visual storytelling, UX/UI design, and branding strategies across industries.

Image courtesy of Pinterest

Design Trends for Web and Digital Spaces

  • Rococo Revival Online
    Lavish, ornamental aesthetics inspired by the Rococo era are set to dominate. Designers can expect to see digital experiences emulating intricate table settings, layered textures, and classical typefaces that evoke elegance and nostalgia. With searches for “rococo party” up 140%, this trend is a golden opportunity for brands targeting luxury and event-oriented audiences.
  • Primary Play in UI Design
    Bold, youthful primary colors are finding their way into website layouts, app interfaces, and brand palettes. This trend resonates particularly with Gen Z audiences, reflecting their preference for playful, approachable designs. Expect to see vibrant, hand-drawn elements, murals, and abstract shapes making their way into landing pages and digital marketing assets.
  • Terra Futura Aesthetic
    Sustainability and earthy tones will continue to shape web design, emphasizing eco-friendly values. Minimalistic layouts paired with natural textures, plant-inspired patterns, and interactive garden visuals can elevate a brand’s commitment to the environment. This trend aligns with the increasing popularity of “self-sufficient garden” searches, which have spiked by 115%.

Fashion and Beauty Trends: Impact on Branding and Visual Identity

  • Cherry Coded Branding
    Deep red tones are set to dominate visual identities, particularly for brands aiming to convey passion, energy, and boldness. Designers can explore gradients and overlays with cherry hues in hero images, call-to-actions, and logo design. The 325% increase in searches for “cherry vibe” signals a strong shift toward this striking color.
2
Image courtesy of Pinterest
  • Castlecore Websites
    The medieval-inspired “castlecore” aesthetic is making waves, with a 45% increase in searches for “castle house plans.” For designers, this translates to opportunities in creating fantasy-inspired websites and immersive storytelling platforms with gothic typefaces, stone textures, and regal motifs.
  • Moto Boho in Visual Storytelling
    A fusion of rugged and bohemian styles, “moto boho” is expected to influence product photography, web visuals, and branding for lifestyle and fashion brands. Incorporate edgy leather textures, fringed animations, and rugged layouts for a distinctive look.
  • Aura-Inspired UX/UI
    Reflective of mood and individuality, the “aura beauty” trend brings vibrant, mood-based colors to the forefront. Interactive web elements, dynamic gradients, and personalized color schemes can create deeper user connections, making this trend ideal for e-commerce and personal branding sites.
  • Sea Witchery in Digital Branding
    Mysterious and oceanic themes are captivating audiences, offering endless inspiration for dark mode designs, flowing animations, and mermaid-inspired palettes. This trend’s allure lies in its ability to create immersive and enigmatic digital experiences.

How Designers Can Apply These Trends

For web designers and digital creatives, these emerging styles offer a framework to innovate and refresh client projects:

  1. Incorporate Nostalgia: Explore historical aesthetics like Rococo and medieval-inspired elements in layouts and branding to create emotional connections.
  2. Play with Bold Colors: Integrate primary colors or mood-based palettes to enhance visual engagement, especially for Gen Z-focused projects.
  3. Embrace Sustainability: Use eco-friendly motifs, minimalistic designs, and earthy tones to align with socially conscious brands.
  4. Experiment with Immersion: Tap into storytelling trends like “Sea Witchery” and “Castlecore” to craft experiences that transport users to another world.
3
Image courtesy of Pinterest

As these trends continue to shape audience preferences, designers who adopt them early will position themselves as innovators in the digital landscape.

From user interfaces to marketing collateral, 2025’s Pinterest Predicts is a treasure trove of inspiration for the creative industry.

Categories: Designing, Others Tags:

CSS Wrapped 2024

December 6th, 2024 No comments

Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024, highlighting 17 new features

That breaks down (approximately) as:

Five components

Interactions

Developer experience

Plus:


CSS Wrapped 2024 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Introducing ChatGPT Pro: The Ultimate Assistant Tool for Coders

December 6th, 2024 No comments
o1 pro mode loading card 1 .png

OpenAI has just leveled up its game with ChatGPT Pro, a premium subscription aimed at users who want to supercharge their coding, research, and innovation.

Priced at $200/month, this new tier delivers advanced features, high-performance models, and tools that cater specifically to the needs of professionals like you.

Let’s break it down and see why ChatGPT Pro is a must-have for coders and tech innovators.

What’s New in ChatGPT Pro?

ChatGPT Pro is packed with cutting-edge features designed to give you more power, speed, and reliability. Here’s what you’re getting:

1. Unlimited Access to Advanced Models

  • o1 and o1 Pro Mode: The o1 model, initially previewed as “Strawberry,” is a game-changer in coding, mathematics, and scientific reasoning. Pro mode takes it up a notch by using additional computational resources to provide even sharper, more nuanced responses.
  • Advanced Voice Mode: Seamlessly integrate voice input into your workflow for a hands-free, efficient experience. Perfect for quick debugging sessions or brainstorming ideas on the go.
  • More Models: Access a suite of models, including o1-mini and GPT-4o, offering versatility for every type of task.

2. Real-Time Feedback and Progress Indicators

One of the standout features for coders is the progress bar in tasks that involve complex computations or lengthy responses. Think of it as your real-time assistant showing you where the process stands—no more second-guessing or waiting indefinitely during intricate operations.

3. Enhanced Computational Power

For heavy-duty tasks like running simulations, debugging extensive codebases, or handling massive datasets, ChatGPT Pro allocates extra computational resources to ensure lightning-fast and accurate performance.

Why Coders Will Love ChatGPT Pro

ChatGPT Pro isn’t just another AI model—it’s a tool built with developers in mind. Here’s how it can help you:

1. Debugging Made Easy

  • Code Diagnosis: Struggling with a cryptic error? ChatGPT Pro’s advanced reasoning can analyze your code and suggest fixes with detailed explanations.
  • Code Optimization: The model can refactor your code for performance, readability, or compliance with best practices.

2. Building Smarter, Faster

  • API Integration Support: Get assistance with complex API integrations, complete with sample code and implementation guides.
  • Framework Mastery: From React to Django, ChatGPT Pro offers insights and helps you troubleshoot issues in your favorite frameworks.

3. Collaborative Problem Solving

  • Team Workflow: Whether you’re brainstorming architecture designs or stuck on a challenging algorithm, ChatGPT Pro is like having a senior developer on standby.

4. Precision for Complex Queries

  • Pro mode ensures detailed and context-aware answers for multi-layered questions, especially in areas like cryptography, machine learning, or distributed systems.

What Makes Pro Mode Unique?

The o1 pro mode stands out because it’s tailored for advanced users who need more than standard AI assistance. It doesn’t just process your queries—it truly understands them.

Whether it’s providing optimized solutions to NP-complete problems or offering insights into cutting-edge technologies, this mode is built for depth and precision.

Is ChatGPT Pro Worth It for Coders?

If you’re serious about coding, development, or research, ChatGPT Pro is a no-brainer. For $200/month, you’re getting:

  • Advanced AI capabilities.
  • Tools designed to make you more productive.
  • Access to a rapidly evolving platform that’s setting the standard for professional-grade AI.

Whether you’re debugging a tricky problem, automating workflows, or brainstorming your next big project, ChatGPT Pro is here to elevate your productivity and creativity.

Check out the full details here.

Categories: Designing, Others Tags:

Knowing CSS is Mastery to Frontend Development

December 6th, 2024 No comments

Anselm Hannemann on the intersection between frameworks and learning the basics:

Nowadays people can write great React and TypeScript code. Most of the time a component library like MUI, Tailwind and others are used for styling. However, nearly no one is able to judge whether the CSS in the codebase is good or far from optimal. It is magically applied by our toolchain into the HTML and we struggle to understand why the website is getting slower and slower.

Related, from Alex Russell:

Many need help orienting themselves as to which end of the telescope is better for examining frontend problems. Frameworkism is now the dominant creed of frontend discourse. It insists that all user problems will be solved if teams just framework hard enough. This is non-sequitur, if not entirely backwards. In practice, the only thing that makes web experiences good is caring about the user experience — specifically, the experience of folks at the margins. Technologies come and go, but what always makes the difference is giving a toss about the user.


Knowing CSS is Mastery to Frontend Development originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

HTML Tables: The Layout Hack That Somehow Worked

December 6th, 2024 No comments

Ah, the humble HTML table. Once the crown jewel of web design, now a relic that makes modern developers roll their eyes and mutter, “Not this again.”

For those who lived through the early internet days, tables were everything.

They weren’t just for organizing data—they were the web designer’s duct tape, scaffolding, and blank canvas. Nested tables? Oh, that’s where the magic (or madness) happened.

Grab your coffee (or therapy cat); we’re diving into the wild world of tables.

A Brief History: When Tables Ruled the Web

Back in the ’90s, CSS wasn’t the stylish, responsive powerhouse it is today. Instead, web designers had one tool to bring order to the chaos of the web: tables. Need a multi-column layout? Use a table. Want pixel-perfect alignment? Add a table inside a table! Fancy a header bar? That’s right, table time.

Developers built sites like Russian nesting dolls, stuffing tables within tables within tables. It was a symphony of

,

, and

.

Sure, your HTML ended up looking like the blueprint for an IKEA bookshelf, but it worked! Mostly. Sometimes. Until you had to debug it.

Nested Tables: The Russian Doll of Nightmares

Ah, nested tables—a concept so notorious, it might as well come with a warning label: “Abandon hope, all ye who enter here.”

Let’s say you had a simple layout idea. Easy, right? But by the time you finished nesting tables for your header, sidebar, footer, and “fun, animated GIF section,” your HTML looked like it had been possessed by a rogue AI. Forget styling; you needed a PhD in archaeology just to locate that one rogue

that was causing your layout to implode.

Modern devs with their fancy flexbox and grid don’t know the struggles. Nested tables were the original escape rooms of web design. If you could debug a deeply nested table layout in under an hour, you deserved a medal—or at least a drink.

The Art of Table Borders

Now let’s talk aesthetics. Table borders were an art form. Should you go for solid or dashed? One pixel or three? Fancy double borders? Oh, the possibilities were endless.

Of course, if you wanted something truly avant-garde, you’d color each cell differently. Sure, it made your website look like a clown threw up on it, but boy, was it bold.

Pro tip from 1998: if your table wasn’t working, just add border="1". It didn’t solve anything, but at least you could see the chaos you created.

Tables vs. CSS: The Great Breakup

The arrival of CSS was a bittersweet moment for tables. Suddenly, tables weren’t needed for layout anymore. They were unceremoniously dumped into the “data-only” corner of HTML. Flexbox and Grid swept onto the scene like rockstars, making layout design intuitive and responsive.

But tables weren’t bitter. Oh no. They just quietly sat in the corner, waiting for the next poorly designed email template to drag them back into the spotlight.

Tables Today: The Comeback Kid

Don’t call it a comeback—they never left. Sure, they’re not the layout workhorse they once were, but tables are still essential for displaying data. Try using flexbox for a spreadsheet. Go ahead, we’ll wait. Tables know their worth.

And nested tables? They’re like the eccentric uncle at a family reunion—rarely seen, deeply confusing, and the source of stories that will haunt you forever.

In Conclusion: A Love Letter to Tables

Tables may not be trendy, but they’re reliable. They’ve been there for us, through Geocities and beyond. They’ve taught us patience, problem-solving, and how to cry quietly at 2 a.m. while fixing a broken layout.

So, let’s pour one out for the humble table. You were the unsung hero of early web design, and for that, we’ll always respect you. Just… maybe stay away from nesting, okay?

Categories: Designing, Others Tags:

Pantone Unveils Color of the Year: Mocha Mousse

December 5th, 2024 No comments
34534

Pantone has unveiled its Color of the Year for 2025: Mocha Mousse (PANTONE 17-1230), a warm, soft brown that exudes comfort and sophistication.

This selection reflects a cultural gravitation towards harmony and balance, offering designers a versatile hue to enrich their creative projects.

Understanding Mocha Mousse

Mocha Mousse is a light brown shade that evokes a sense of warmth and indulgence, reminiscent of its namesake dessert.

Leatrice Eiseman, Executive Director of the Pantone Color Institute, describes it as a color that reflects the need for harmony, aligning with current global sentiments.

Image courtesy of Pantone.com

Applications in Design

Fashion: Mocha Mousse has made significant inroads into fashion, with designers like Fendi, Acne, and Gucci incorporating it into their collections. Its adaptability allows it to serve as both a foundational neutral and a standout feature, pairing well with a spectrum of colors from muted tones to vibrant accents.

Interior Design: In interior spaces, Mocha Mousse offers a calming backdrop that complements various styles, from modern to rustic. It harmonizes with soft hues like sage green and dusty rose, as well as bolder shades like burgundy and ochre, making it suitable for elements such as walls, furniture, and décor accessories.

Graphic Design: For graphic designers, Mocha Mousse provides a grounded and inviting tone, ideal for branding that seeks to convey reliability and warmth. Its neutrality ensures compatibility with diverse color palettes, enhancing both digital and print media.

For Pantone Color of the Year 2025, we look to a mellow brown hue whose inherent richness and sensorial and comforting warmth extends further into our desire for comfort, and the indulgence of simple pleasures that we can gift and share with others.”

Laurie Pressman – Vice President of the Pantone Color Institute

343333333
Image courtesy of Pantone.com

Incorporating Mocha Mousse into Your Designs

  • Pairing with Other Colors: Combine Mocha Mousse with deep reds or gold accents to create a luxurious feel, or with soft blues and greens for a more tranquil ambiance.
  • Textures and Materials: Utilize materials like suede, leather, or natural fibers in Mocha Mousse to add depth and tactile appeal to your designs.
  • Seasonal Versatility: Mocha Mousse’s warmth makes it suitable for autumnal themes, while its softness allows for seamless integration into spring and summer palettes.
pantone color of the year 2025 landing page harmonies hero relaxed elegance
Image courtesy of Pantone.com

Conclusion

Embracing Mocha Mousse in your design projects can foster a sense of comfort and elegance, resonating with contemporary trends that prioritize authenticity and emotional connection.

Its versatility across various design disciplines makes it a valuable addition to any creative toolkit.

Official Pantone Website

Categories: Designing, Others Tags:

Take a look: Adobe’s 2025 Creative Trends Forecast

December 5th, 2024 No comments

In a world that often feels both hyperconnected and disconnected, Adobe’s 2025 Creative Trends Forecast captures the essence of what today’s consumers are craving.

It’s a fascinating mix of opposites—fantasy and reality, nostalgia and futurism, simplicity and immersion.

These trends, identified by Adobe, give us a glimpse into how art and design are shaping—and being shaped by—our collective psyche. Let’s dive into these themes and explore what they mean for creatives, brands, and anyone who loves design.

1. Fantastic Frontiers: Where Imagination Runs Wild

Have you noticed how much people are drawn to the magical and otherworldly these days? Whether it’s through fantastical movie settings or AI-generated surrealist art, there’s an undeniable pull towards the extraordinary. Adobe calls this trend “Fantastic Frontiers,” and it’s all about creating dreamlike experiences that offer an escape from the mundane.

Think of it as a response to the pressures of everyday life. After all, who wouldn’t want a moment to step into a world where gravity doesn’t exist, colors glow in unexpected ways, and imagination has no limits? Tools like generative AI are making this more accessible than ever, enabling creators to whip up visuals that feel straight out of a dream.

For brands, tapping into this trend isn’t just about visual appeal—it’s about creating an emotional refuge. Offering consumers a chance to escape, even for a moment, can be incredibly powerful.

2. Levity and Laughter: The Power of Play

Here’s something we all know deep down—life is better when we laugh. Adobe’s forecast highlights how humor continues to dominate the creative space. And it’s no surprise: studies show that funny ads stick with us longer and are far more likely to get shared. It’s the meme culture effect!

Brands are leaning into this trend big time, using clever puns, absurd scenarios, and playful designs to stand out in a crowded digital landscape. Think of those ads that make you chuckle and instantly want to share them with your friends. That’s the magic of humor—it makes us feel connected, even in a virtual space.

For creators, this trend is a call to not take things too seriously. Humor humanizes brands and creates authentic moments that resonate, making it a creative goldmine.

Explore the gallery

3. Time Warp: Nostalgia Meets Futurism

Isn’t it funny how we’re always looking back while moving forward? The “Time Warp” trend captures this perfectly, blending elements of nostalgia with futuristic aesthetics. It’s like pairing retro typography with holographic visuals—unexpected, but it works.

This trend speaks to our love for the familiar. Whether it’s the comforting vibes of 80s neon or the sleek optimism of mid-century modern, mixing past and future gives audiences a fresh perspective on the world around them. It’s like a remix of history, reimagined for today.

For brands, this is an opportunity to play with storytelling. How can you make something old feel new again? How can you give a futuristic twist to something classic? The possibilities are endless.

4. Immersive Appeal: Blurring Reality and Fantasy

Here’s where technology truly shines. “Immersive Appeal” is all about pulling people deeper into experiences through augmented reality (AR), virtual reality (VR), and interactive design. It’s not just about seeing—it’s about feeling, touching, and engaging.

Imagine walking into a store and virtually trying on clothes before you buy them or attending a concert where holograms of your favorite artists perform right in your living room. These aren’t just futuristic fantasies—they’re happening now, and they’re reshaping how we interact with the world.

For creatives, the challenge is to push boundaries. How can you create something so immersive that people can’t help but lose themselves in it? For brands, it’s about building experiences that go beyond the screen and create genuine connections.

What Do These Trends Mean for Creatives?

Adobe’s 2025 trends paint a picture of a world that wants it all—magic and humor, nostalgia and innovation, simplicity and immersion. For creators, this is both exciting and daunting. How do you balance these contrasting desires? How do you use them to tell stories that resonate?

The key lies in understanding your audience. Are they looking for an escape, a laugh, a trip down memory lane, or a cutting-edge experience? Sometimes, they might want a bit of everything.

For brands, this is a wake-up call. Creativity isn’t just about making things look good—it’s about making people feel something.

Whether it’s the wonder of a surreal landscape, the joy of a clever joke, or the awe of stepping into a new reality, these trends remind us that emotion is at the heart of impactful design.

As we move into 2025, the lines between art, technology, and culture will continue to blur. The creative world is evolving faster than ever, and trends like these are just the beginning.

Explore the galleries at Adobe or Read the full report

Categories: Designing, Others Tags: