“Building Better Webs"

In a world where over half of all internet traffic goes to Big Tech sites, the weird and wonderful web seems to be shrinking. Join @oluOnline at Front End North 2025 to examine how we can take back our webs.

Olu's talk → https://frontendnorth.com/speakers/olu-niyi-awosusi

Who here knows about font files? Can anyone help me out with a glyph question?

Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR

Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.

Web Component Base (WCB) by Ayo Ayco (@ayo) | https://ayos.blog/wcb/

We’re featuring Jorge Toloza in today’s spotlight—a creative developer whose motion-focused tutorials and interactive work have inspired the Codrops community.

Explore his story, favorite projects, and the ideas behind his beautifully crafted web experiences: https://tympanus.net/codrops/2025/03/27/developer-spotlight-jorge-toloza/

#Development #Guidelines
Navigation for keyboard users · How to build a keyboard-friendly navigation https://ilo.im/162xlc

_____
#Accessibility #Keyboard #ScreenReader #WebDev #Frontend #ARIA #HTML

Thursday there'll be the next #IndieWeb #FrontEnd Study Hall (Number 024!) where we have lively conversations investigating, troubleshooting, upgrading, fixing, and learning HTML and CSS and related stuff. https://events.indieweb.org/2025/03/front-end-study-hall-024-j8dtucnWT7Iz

Enlace para añadir solicitudes a Tarddigrade

https://github.com/tarddigradeOrg/tarddigrade/issues/new?template=feature_request.md

Welcome to a new week in 2025. Pages for #btconf Berlin with first speakers and tickets are online. Find everything here and stay tuned for more!

https://beyondtellerrand.com/events/berlin-2025

#Development #Approaches
Revisiting CSS ‘border-image’ · “It remains one of the most underused CSS tools.” https://ilo.im/162y7m

_____
#Image #Decoration #Callout #Button #Design #WebDesign #WebDev #Frontend #SVG #CSS

#frontend and #fullstack devs: Be optimistic about API calls. Research has shown that as little as 100ms of delay is the time it takes for a user to go from perceiving they did something to perceiving they are waiting on something. And 250ms is enough for them to be upset about it.

I've seen too many instances where the UI doesn't update til the API call returns or a #signalr event comes back. If you can anticipate a response, let the UI assume it will succeed for the best UX that feels "magic"

Who here uses #Hometown as their #frontend ?

I pushed that CSS hologram effect experiment a bit more, now with 7 new images + gradients.

The effect doesn't work on iOS Safari (It doesn't play nice with background-position: fixed;) so I've attached a video too.

CodePen: https://codepen.io/HejChristian/full/YPzLbYX/4403478dc2c73307336a426ee5e3cc38

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

Why do people default to React and JavaScript for front end and UIs?

As a backend developer whose frontend experience is mostly from using Phoenix and Django, which utilize server-side rendering, I’m wondering why most people choose React and JavaScript as the “default” frontend solution, even for pages and SaaS products that don’t really benefit from any additional client-side interactivity.

#Development #Techniques
HTML button groups for keyboard users · Keyboard-friendly ‘menu’, ‘menubar’, ‘toolbar’, and ‘tablist’ https://ilo.im/162rp7

_____
#Accessibility #ScreenReader #Keyboard #WebDev #Frontend #ARIA #HTML #JavaScript

It used to be quite challenging to set the precedence of individual #CSS rules without a lot of headaches. (This encouraged the practice of authoring many small utility classes that do very little on their own.)

Thankfully, that’s no longer the case. Here’s a simple example: https://cloudfour.com/thinks/cowardly-defaults-and-courageous-overrides-with-modern-css/

#tinyCSStip

DON'T use layered text-shadows for text outlines just because text-stroke is broken (https://mastodon.social/@anatudor/112410224855133935), they are going to produce ugly corners, thickened roundings and angled lines.

DO: use `paint-order: stroke fill` instead!