Reddit Unveils Reddit Answers: A Smarter Way to Search and Explore Discussions

December 10th, 2024 No comments
22

If you’ve ever used Reddit to dig for answers or insights, you know how much gold is hidden in its threads—but finding it isn’t always straightforward.

That’s where Reddit Answers, the platform’s new AI-powered feature, steps in. Think of it as your personal guide to navigating Reddit’s vast treasure trove of conversations.

Here’s everything you need to know about Reddit Answers, how it works, and why it might just become your go-to tool for discovering information.

What is Reddit Answers?

Reddit Answers is Reddit’s way of making its platform smarter and easier to use. It takes your questions—anything from “What’s the best way to learn a new language?” to “How do I fix a squeaky door?”—and provides an AI-generated summary based on discussions across Reddit.

But it doesn’t stop there. It also points you to related posts and communities where you can dive deeper into the topic.

Think of it as the lovechild of Google Search and Reddit, combining the search power of AI with the authenticity of real user conversations.

Image courtesy of Reddit Answers

Why Should I Use It?

If you’ve ever felt overwhelmed scrolling through endless Reddit threads, this tool might be just what you need. Here’s how Reddit Answers helps:

  • Saves You Time: Instead of sifting through dozens of posts, you get a quick, curated answer.
  • Keeps It Authentic: The insights come straight from Reddit’s communities, meaning they’re packed with real-world advice and experiences.
  • Makes Exploring Easier: Want more details? Reddit Answers provides links to the original posts and related communities so you can dive as deep as you want.

For instance, if you’re researching the best gear for a hiking trip, Reddit Answers might summarize advice from multiple communities, then lead you to posts where outdoor enthusiasts discuss their favorite brands and strategies.

How Can You Use Reddit Answers?

As of now, Reddit Answers is available to a limited number of English-speaking users in the U.S. If you’re lucky enough to have access, you can use it to:

  1. Ask Broad Questions: Don’t know where to start? Throw in a general query and let Reddit Answers guide you.
  2. Explore Communities: Use the links provided to find niche communities full of experts and enthusiasts.
  3. Save for Later: Found a goldmine of advice? Bookmark the links to revisit them anytime.

Is It Destroying the Essence of Reddit?

The real magic of Reddit has always been its messiness—the diverse perspectives, the debates, the occasional rabbit holes that lead you to unexpected gems.

Reddit Answers seeks to cut through that chaos, but some might argue that it also filters out the spontaneity and depth that make Reddit special.

If you’re looking for a quick answer, this feature might be perfect. But if you’re the kind of person who values the journey as much as the destination, you might find yourself missing the raw, unedited experience of diving into threads yourself.

To sum up

Right now, Reddit Answers is only available to a limited group of users in the United States, but Reddit plans to roll it out to more regions and languages soon.

Whether it becomes a cornerstone of the Reddit experience will depend on how it evolves. Will it remain a helpful shortcut, or will it fundamentally reshape how people interact with the platform?

There’s also the question of trust. AI is great at summarizing, but it’s not immune to error or bias.

Will Reddit Answers capture the nuances of human conversations, or will it risk misrepresenting them? These are questions Reddit users—and the platform itself—will need to grapple with as the feature grows.

Go to Reddit Answers

Categories: Designing, Others Tags:

CSSWG Minutes Telecon (2024-12-04): Just Use Grid vs. Display: Masonry

December 10th, 2024 No comments
Pinterest showing a masonry layout

The CSS Working Group (CSSWG) meets weekly (or close to it) to discuss and quickly resolve issues from their GitHub that would otherwise be lost in the back-and-forth of forum conversation. While each meeting brings interesting conversation, this past Wednesday (December 4th) was special. The CSSWG met to try and finally squash a debate that has been going on for five years: whether Masonry should be a part of Grid or a separate system.

I’ll try to summarize the current state of the debate, but if you are looking for the long version, I recommend reading CSS Masonry & CSS Grid by Geoff and Choosing a Masonry Syntax in CSS by Miriam Suzanne.

In 2017, it was frequently asked whether Grid could handle masonry layouts; layouts where the columns (or the rows) could hold unevenly sized items without gaps in between. While this is just one of several possibilities with masonry, you can think about the layout popularized by Pinterest:

In 2020, Firefox released a prototype in which masonry was integrated into the CSS Grid layout module. The main voice against it was Rachel Andrew, arguing that it should be its own, separate thing. Since then, the debate has escalated with two proposals from Apple and Google, arguing for and against a grid-integrated syntax, respectively.

There were some technical worries against a grid-masonry implementation that were since resolved. What you have to know is this: right now, it’s a matter of syntax. To be specific, which syntax is

a. is easier to learn for authors and

b. how might this decision impact possible future developments in one or both models (or CSS in general).

In the middle, the W3C Technical Architecture Group (TAG) was asked for input on the issue which has prompted an effort to unify the two proposals. Both sides have brought strong arguments to the table over a series of posts, and in the following meeting, they were asked to lay those arguments once again in a presentation, with the hope of reaching a consensus.

Remember that you can subscribe and read the full minutes on W3C.org

The Battle of PowerPoints

Alison Maher representing Google and an advocate of implementing Masonry as a new display value, opened the meeting with a presentation. The main points were:

  1. Several properties behave differently between masonry and grid.
  2. Better defaults when setting display: masonry, something that Rachel Andrew recently argued for.
  3. There was an argument against display: masonry since fallbacks would be more lengthy to implement, whereas in a grid-integrated the fallback to grid is already there. Alison Maher refutes this since “needing one is a temporary problem, so [we] should focus on the future,” and that “authors should make explicit fallback, to avoid surprises.”
  4. “Positioning in masonry is simpler than grid, it’s only placed in 1 axis instead of 2.”
  5. Shorthands are also better: “Grid shorthand is complicated, hard to use. Masonry shorthand is easier because don’t need to remember the order.”
  6. “Placement works differently in grid vs masonry” and “alignment is also very different”
  7. There will be “other changes for submasonry/subgrid that will lead to divergences.”
  8. “Integrating masonry into grid will lead to spec bloat, will be harder to teach, and lead to developer confusion.”

alisonmaher: “Conclusion: masonry should be a separate display type”

Jen Simmons, representing the WebKit team and advocate of the “Just Use Grid” approach followed with another presentation. On this side, the main points were:

  1. Author learning could be skewed since “a new layout type creates a separate tool with separate syntax that’s similar but not the same as what exists […]. They’re familiar but not quite the same”
  2. The Chrome proposal would add around 10 new properties. “We don’t believe there’s a compelling argument to add so many new properties to CSS.”
Table of properties that display: masonry would add. (around 10 new properties)
  1. “Chromium argues that their new syntax is more understandable. We disagree, just use grid-auto-flow
  2. “When you layout rows in grid, template syntax is a bit different — you stack the template names to physically diagram the names for the rows. Just Use Grid re-uses this syntax exactly; but new masonry layout uses the column syntax for rows”
  3. “Other difference is the auto-flow — grid’s indicates the primary fill direction, Chrome believes this doesn’t make sense and changed it to match the orientation of lines”
Difference in template syntax between Just use Grid vs display: masonry
  1. “Chrome argues that new display type allows better defaults — but the defaults propose aren’t good […] it doesn’t quite work as easily as claimed [see article] requires deep understanding of autosizing”
  2. “Easier to switch, e.g. at breakpoints or progressive enhancement”
  3. “Follows CSS design principles to re-use what already exists”

The TAG review

After two presentations with compelling arguments, Lea Verou (also a member of the TAG) followed with their input.

lea: We did a TAG review on this. My opinion is fully reflected there. I think the arguments WebKit team makes are compelling. We thought not only should masonry be part of grid, but should go further. A lot of arguments for integrating is that “grid is too hard”. In that case we should make grid things easier. Complex things are possible, but simple things are not so easy.

Big part of Google’s argument is defaults, but we could just have smarter defaults — there is precedent for this in CSS if we decided that would help ergonomics We agree that switching between grid vs. masonry is common. Grid might be a slightly better fallback than nothing, but minor argument because people can use @supports. Introducing all these new properties increasing the API surfaces that authors need to learn. Less they can port over. Even if we say we will be disciplined, experience shows that we won’t. Even if not intentional, accidental. DRY – don’t have multiple sources of truth

One of arguments against masonry in grid is that grids are 2D, but actually in graphic design grids were often 1D. I agree that most masonry use cases need simpler grids than general grid use cases, but that means we should make those grids easier to define for both grid and masonry. The more we looked into this, we realize there are 3 different layout modes that give you 2D arrangement of children. We recommended not just make masonry part of grid, but find ways of integrating what we already have better could we come up with a shorthand that sets grid-auto-flow and flex-direction, and promote that for layout direction in general? Then authors only need to learn one control for it.

The debate

All was laid out onto the table, it was only left what other members had to say.

oriol: Problem with Jen Simmons’s reasoning. She said the proposed masonry-direction property would be new syntax that doesn’t match grid-auto-flow property, but this property matches flex-direction property so instead of trying to be close to grid, tries to be close to flexbox. Closer to grid is a choice, could be consistent with different things.

astearns: One question I asked is, has anyone changed their mind on which proposal they support? I personally have. I thought that separate display property made a lot more sense, in terms of designing the feature and I was very daunted by the idea that we’d have to consider both grid and masonry for any new development in either seemed sticky to me but the TAG argument convinced me that we should do the work of integrating these things.

TabAtkins: Thanks for setting that up for me, because I’m going to refute the TAG argument! I think they’re wrong in this case. You can draw a lot of surface-level connections between Grid and Masonry, and Flexbox, and other hypothetical layouts but when you actually look at details of how they work, behaviors each one is capable of, they’re pretty distinct if you try to combine together, it would be an unholy mess of conflicting constraints — e.g. flexing in items of masonry or grid or you’d have a weird mish-mash of, “the 2D layout.

But if you call it a flex you get access to these properties, call it grid, access to these other properties concrete example, “pillar” example mentioned in webKit blog post, that wasn’t compatible with the base concepts in masonry and flex because it wants a shared block formatting context grid etc have different formatting contexts, can’t use floats.

lea: actually, the TAG argument was that layout seems to actually be a continuum, and syntax should accommodate that rather than forcing one of two extremes (current flex vs current grid).

The debate kept back and forth until there was an attempt to set a general north star to follow.

jyasskin: Wanted to emphasize a couple aspects of TAG review. It seems really nice to keep the property from Chrome proposal that you don’t have to learn both, can just learn to do masonry without learning all of Grid even if that’s in a unified system perhaps still define masonry shorthand, and have it set grid propertie

jensimmons: To create a simple masonry-style layout in Grid, you just need 3 lines of code (4 with a gap). It’s quite simple.

jyasskin: Most consensus part of TAG feedback was to share properties whenever possible. Not necessary to share the same ‘display’ values; could define different ‘display’ values but share the properties. One thing we didn’t like about unified proposal was grid-auto-flow in the unified proposal, where some values were ignored. Yeah, this is the usability point I’m pounding on

Another Split Decision

Despite all, it looked like nobody was giving away, and the debate seemed stuck once again:

astearns: I’m not hearing a way forward yet. At some point, one of the camps is going to have to concede in order to move this forward.

lea: What if we do a straw poll. Not to decide, but to figure out how far are we from consensus? +1 lea

The votes were cast and the results were… split.

Straw Poll for Just Use Grid, showing a split result. 12 NOs, 13 YES and 5 ABSTAIN

florian: though we could still not reach consensus, I want to thank both sides for presenting clear arguments, densely packed, well delivered. I will go back to the presentations, and revisit some points, it really was informative to present the way it was.

That’s all folks, a split decision! There isn’t a preference for either of the two proposals and implementing something with such mixed opinions is something nobody would approve. After a little over five years of debate, I think this meeting is yet another good sign that a new proposal addressing the concerns of both sides should be considered, but that’s just a personal opinion. To me, masonry (or whatever name it may be) is an important step in CSS layout that may shape future layouts, it shouldn’t be rushed so until then, I am more than happy to wait for a proposal that satisfies both sides.

Further Reading

Relevant Issues


CSSWG Minutes Telecon (2024-12-04): Just Use Grid vs. Display: Masonry originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Smashing Meets Product Design

December 10th, 2024 No comments

I had the pleasure of hosting a recent Smashing Magazine workshop on product design, subbing for Vitaly Friedman who usually runs these things.

What? A front-ender interviewing really smart people about their processes for user research, documenting requirements, and scaling teams around usability? I was a product designer once upon a time and even though it’s been a long time since I’ve flexed that muscle, it was a hoot learning from the guests, which included: Chris Kolb, Kevin Hawkins, and Vicky Carmichael.

The videos are barred from embedding, so I’ll simply link ’em up directly to YouTube:

I also moderated a follow-up discussion with Chris and Kevin following the presentations.

A few of my choice takeaways:

  • Small teams have the luxury of being in greater, more intimate contact with customers. Vicky explained how their relatively small size (~11 employees) means that everyone interfaces with customers and that customer issues and requests are handled more immediately.
  • Large teams have to be mindful of teams forming into individual silos. A silo mentality typically happens when teams scale up in size, resulting in less frequent communication and collaboration. Team dashboards help, as do artifacts from meetings in multiple formats, such as AI-flavored summaries, video recordings, and documented decisions.
  • Customers may appear to be dumb, but what looks like dumbness is often what happens when humans are faced with a lack of time and context. Solving “dumb” user problems often means coming at the problem in the same bewildered context rather than simply assuming the customer “just doesn’t get it.”

Smashing Meets Product Design originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

CSS Wrapped 2024: 17 Features Transforming Modern Web Design

December 10th, 2024 No comments

In 2024, CSS has introduced a suite of features that significantly enhance web design capabilities, offering developers more control and flexibility.

The “CSS Wrapped 2024” initiative by Chrome DevRel highlights 17 notable additions across components, interactions, and developer experience.

Components Enhancements

  • Field Sizing: The field-sizing property allows form elements like textarea, select, and input to automatically adjust their size based on content, eliminating the need for JavaScript workarounds.
  • Animate to height: auto: With the interpolate-size property, developers can smoothly transition elements to intrinsic sizes such as height: auto, min-content, and max-content, enabling more dynamic layouts.
  • Exclusive

    : Enhancements to the

    element now support exclusive behavior, allowing only one disclosure to be open at a time, which is particularly useful for accordion interfaces.
  • Styleable

    : Developers can now apply custom styles to the

    and

    elements, providing greater design flexibility.
  • Anchor Positioning: The new anchor positioning feature enables precise placement of elements relative to anchors, facilitating complex overlay designs.

Interaction Improvements

  • Custom Scrollbars: CSS now allows for the styling of scrollbars, enabling designs that align with the overall aesthetic of the website.
  • Cross-Document View Transitions: This feature facilitates seamless transitions between different documents, enhancing user experience during navigation.
  • Scroll-Driven Animations: Developers can create animations that respond to scroll events, adding interactivity and engagement to web pages.
  • Scroll Snap Events: New events provide better control over scroll snapping behavior, improving the precision of scroll interactions.

Developer Experience Enhancements

  • Backdrop Inheritance: This feature allows elements to inherit backdrop styles, ensuring consistent theming across components.
  • light-dark() Function: The light-dark() function enables responsive design adjustments based on the user’s theme preference, enhancing accessibility.
  • @property: This at-rule allows for the definition of custom properties with specific syntax and inheritance rules, improving CSS variable management.
  • Popover API: The Popover API provides a standardized way to create and manage popover elements, streamlining the development of interactive components.
  • @starting-style: This at-rule defines the initial styles of an element before any animations, ensuring consistent animation behavior.
  • ruby-align: Enhancements to the ruby-align property improve the rendering of East Asian typography, supporting better internationalization.
  • paint-order: The paint-order property allows developers to control the painting order of fill, stroke, and markers, providing finer control over SVG rendering.
  • CSSOM Nested Declarations: Support for nested declarations in the CSS Object Model (CSSOM) simplifies the manipulation of nested styles via JavaScript.

These advancements reflect the collaborative efforts of browser engineers, specification writers, and the developer community, marking a significant leap forward for CSS in 2024.

For a comprehensive overview and demos of these features, visit the CSS Wrapped 2024 page.

Categories: Designing, Others Tags:

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:

Mastering SVG Arcs

December 9th, 2024 No comments

So, I love drawing birds with code. Inspired by my brother’s love for birdwatching, I admire the uniqueness of their feathers, colors, and sounds. But what I notice most is the way their bodies curve and different birds can have dramatically different curves! So, I took my love for drawing with SVG graphics and used it to experiment with bird shapes. Over time, I’ve drawn enough to become incredibly adept at working with arc shapes.

Here are a few of my recent works. Inspired by designs I came across on Dribbble, I created my versions with code. You can browse through the code for each on my CodePen.

But before we dive into creating curves with arcs, please pause here and check out Myriam Frisano’s recent article, “SVG Coding Examples: Useful Recipes For Writing Vectors By Hand.” It’s an excellent primer to the SVG syntax and it will give you solid context heading into the concepts we’re covering here when it comes to mastering SVG arcs.

A Quick SVG Refresher

You probably know that SVGs are crisp, infinitely scalable illustrations without pixelated degradation — vectors for the win! What you might not know is that few developers write SVG code. Why? Well, the syntax looks complicated and unfamiliar compared to, say, HTML. But trust me, once you break it down, it’s not only possible to hand-code SVG but also quite a bit of fun.

Let’s make sure you’re up to speed on the SVG viewBox because it’s a key concept when it comes to the scalable part of *SVG. We’ll use the analogy of a camera, lens, and canvas to explain this concept. Think of your browser window as a camera and the SVG viewBox as the camera lens focusing on the painting of a bird you’ve created (the SVG). Imagine the painting on a large canvas that may stretch far beyond what the camera captures. The viewBox defines which part of this canvas is visible through the camera.

Let’s say we have an SVG element that we’re sizing at 600px square with width and height attributes directly on the element.

<svg width="600px" height="600px">

Let’s turn our attention to the viewBox attribute:

<svg width="600px" height="600px" viewBox="-300 -300 600 600">

The viewBox attribute defines the internal coordinate system for the SVG, with four values mapping to the SVG’s x, y, width, and height in that order.

Here’s how this relates to our analogy:

  • Camera Position and Size
    The -300, -300 represents the camera lens’ left and top edge position. Meanwhile, 600 x 600 is like the camera’s frame size, showing a specific portion of that space.
  • Unchanging Canvas Size
    Changing the x and y values adjusts where the camera points, and width and height govern how much of the canvas it frames. It doesn’t resize the actual canvas (the SVG element itself, which remains at 600×600 pixels). No matter where the camera is positioned or zoomed, the canvas itself remains fixed.

So, when you adjust the viewBox coordinates, you’re simply choosing a new area of the canvas to focus on without resizing the canvas itself. This lets you control the visible area without changing the SVG’s actual display dimensions.

You now have the context you need to learn how to work with elements in SVG, which is where we start working with arcs!

The Element

We have an element. And we’re viewing the element’s contents through the “lens” of a viewBox.

A allows us to draw shapes. We have other elements for drawing shapes — namely , , and — but imagine being restricted to strict geometrical shapes as an artist. That’s where the custom element comes in. It’s used to draw complex shapes that cannot be created with the basic ones. Think of as a flexible container that lets you mix and match different drawing commands.

With a single , you can combine multiple drawing commands into one smooth, elegant design. Today, we’re focusing on a super specific path command: arcs. In other words, what we’re doing is drawing arc shapes with .

Here’s a quick, no-frills example that places a inside the example we looked at earlier:

<svg width="600px" height="600px" viewBox="-300 -300 600 600">
  <path d="M 0 0 A 100 100 0 1 1 200 0" 
    fill="transparent"
    stroke="black"
    stroke-width="24"
  />
</svg>

Let’s take this information and start playing with values to see how it behaves.

Visualizing The Possibilities

Again, if this is the we’re starting with:

<path d="M 0 0 A 100 100 0 1 1 200 0"/>

Then, we can manipulate it in myriad ways. Mathematically speaking, you can create an infinite number of arcs between any two points by adjusting the parameters. Here are a few variations of an arc that we get when all we do is change the arc’s endpoints in the X () and Y () directions.

See the Pen Arc Possibilities b/w 2 points [forked] by akshaygpt.

Or, let’s control the arc’s width and height by updating its radius in the X direction () and the Y direction (). If we play around with the value, we can manipulate the arc’s height:

See the Pen Rx [forked] by akshaygpt.

Similarly, we can manipulate the arc’s width by updating the value:

See the Pen Rx [forked] by akshaygpt.

Let’s see what happens when we rotate the arc along its X-axis (). This parameter rotates the arc’s ellipse around its center. It won’t affect circles, but it’s a game-changer for ellipses.

See the Pen x-axis-rotation [forked] by akshaygpt.

Even with a fixed set of endpoints and radii ( and ), and a given angle of rotation, four distinct arcs can connect them. That’s because we have the flag value that can be one of two values, as well as the flag that is also one of two values. Two boolean values, each with two arguments, give us four distinct possibilities.

See the Pen 4 cases [forked] by akshaygpt.

And lastly, adjusting the arc’s endpoint along the X () and Y () directions shifts the arc’s location without changing the overall shape.

See the Pen endx, endy [forked] by akshaygpt.

Wrapping Up

And there you have it, SVG arcs demystified! Whether you’re manipulating radii, rotation, or arc direction, you now have all the tools to master these beautiful curves. With practice, arcs will become just another part of your SVG toolkit, one that gives you the power to create more dynamic, intricate designs with confidence.

So keep playing, keep experimenting, and soon you’ll be bending arcs like a pro — making your SVGs not just functional but beautifully artistic. If you enjoyed this dive into arcs, drop a like or share it with your friends. Let’s keep pushing the boundaries of what SVG can do!

Categories: 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: