@stefan@front-end.social avatar

stefan

@stefan@front-end.social

Sharing web dev tricks with 4.7k people at webweekly.email

Today I learned Blogger

Maintaining tiny-helpers.dev

Pronouns: he/him

This profile is from a federated server and may be incomplete. Browse more on the original instance.

stefan, to random
@stefan@front-end.social avatar

The new Web Weekly is out! 🎉 This time:

✅ browser lies
✅ CSS text-emphasis
✅ CSS paint-order
✅ the long-animation-frame perf event
✅ the two competing masonry proposals
➕ As always, new tools and platform updates.

https://www.stefanjudis.com/blog/web-weekly-129/

stefan, to random
@stefan@front-end.social avatar

Oh wow — I just opened MDN in vanilla Chrome (I usually use FF with adblocker) and there are three ads on docs pages these days?

Mailgun ad
GitLab ad

rysiek, to random
@rysiek@mstdn.social avatar

I just discovered @stefan 's blog and holy moly there's some damn neat stuff there!

Loving this:
https://www.stefanjudis.com/a-firefox-only-minimap/

stefan,
@stefan@front-end.social avatar

@oblomov @rysiek There’s not enough space to show it on a phone. :)

bastianallgeier, to random
@bastianallgeier@mastodon.social avatar

I'm going through various AI coding helpers for a few months now. I want to keep an open mind and understand if there's something really mind-blowingly helpful. But so far, I haven't found anything that is more than "nice to have". I think it's also a lot about the tasks that we need to solve at @getkirby Coding speed is never really an issue. That's why I don't massively profit from autocompletion help. The obstacles are always conceptual questions. Did you find anything indispensable for you?

stefan,
@stefan@front-end.social avatar

@bastianallgeier I “enjoyed” copilot a lot initially, but after the first wow you'll notice that the errors really slow you down.

My free copilot access was cut this week and I'm going old school right now. :D So far I'm not missing anything.

stefan,
@stefan@front-end.social avatar

@bastianallgeier Yeah. And it breaks the zone. 🤷

stefan, to random
@stefan@front-end.social avatar

The new Web Weekly is out! 🎉

This time:

✅ Masonry grid coming to Webkit
✅ Funky img element CSS effects
✅ attributes vs properties
✅ AbortSignal.timeout
✅ maxlength considered harmful
➕ As always, new tools and platform updates.

Enjoy!

https://www.stefanjudis.com/blog/web-weekly-128/

stefan, to random
@stefan@front-end.social avatar

Alright, real talk: I have @code's minimap disabled because it only looks fancy. But the new ability to set marks might make me reconsider.

// MARK: and //#​region should work in the newest version.

stefan, to random
@stefan@front-end.social avatar

When the tech FOMO hits you this stat never gets old.

https://blog.jquery.com/2024/04/17/upgrading-jquery-working-towards-a-healthy-web/

stefan, to random
@stefan@front-end.social avatar

Haha! Apparently, some people celebrate a new "web day" — JS Naked Day.

It's 4/24 and this is heck smart. 😂 👇

https://js-naked-day.org

stefan, to random
@stefan@front-end.social avatar

The new Web Weekly is out!

This time:

✅ useTransition
✅ popover boilerplate code
✅ the Trusted Types API
✅ @​scoped component styles
✅ language-dependent CSS quotes
➕ As always, new tools and platform updates.

Enjoy!

https://www.stefanjudis.com/blog/web-weekly-127/

stefan,
@stefan@front-end.social avatar

@bramus Thanks for pushing this long overdue browser feature. ;)

stefan, to random
@stefan@front-end.social avatar

CSS quick tip: if you're adding quotation characters use open-quote and close-quote as content because they consider the document language. 💪

https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

stefan, to random
@stefan@front-end.social avatar

@bastianallgeier Heyooo!

Ich benutze gerade zum ersten mal Kirby und wollt nur mal rüberschreiben “I dig it! A lot!”. :D

Ich hatte almost 0 ramp up time im aktuellen Projekt und fummele schon freudig am content model rum. Macht alles Sinn! 💯

stefan, to random
@stefan@front-end.social avatar

TIL — image sitemaps are a thing.

https://macarthur.me/posts/image-sitemaps/ https://macarthur.me/posts/image-sitemaps/

stefan, to random
@stefan@front-end.social avatar

Just came across a post "Count Visitors With Free API" and it includes the serverless fn powering my site's little stats counter.

I have no words.🤦‍♂️

Let's see if they accept the PR to remove my "public" API. 😅

stefan,
@stefan@front-end.social avatar

@Cykelero Yeah, they "respected my decision" (their words) and removed it.

Still seems very strange to me to share obviously private API endpoints as free. 🤷

stefan,
@stefan@front-end.social avatar

@Cykelero I mean building on someone else’s stuff if you can't affort it is one thing. Not cool, but alright…

Promoting someone else’s as free stuff for SEO / engagement on dev.to, that's def "scrappy”. 🫣

stefan, to random
@stefan@front-end.social avatar

WebAIM's new Million accessibility report is out.

The last years looked promising, but 2024 comes with an uptick in detectable accessibility errors. :/

I wonder if this effect is because of AI and LLM assistance?

https://webaim.org/projects/million/

stefan, to random
@stefan@front-end.social avatar

After all these years, TIL that margin: auto can have an effect on absolute positioned elements.😱

https://www.stefanjudis.com/today-i-learned/auto-margin-works-with-absolute-positioned-elements/

Huge thanks to @joshwcomeau for this trick!

Video alt: centering an absolute positioned element with margin: auto

Centering an absolute positioned element via

stefan, to random
@stefan@front-end.social avatar

With iOS Safari 17.4, all browsers support select elements including horizontal lines with hr. 😉 👇

https://codepen.io/stefanjudis/pen/QWPNYON

HTML: a

stefan, to random
@stefan@front-end.social avatar

Safari's recent tech preview includes the safe keyword for flex properties. Firefox/Chromium ship it already.✨

I updated an old blog for you to learn about safe flexbox alignment. 😊

https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

Using safe alignment (align-items: safe center;) in a flex container to prevent data loss.

stefan, to random
@stefan@front-end.social avatar

The new Web Weekly is out! This time:

✅ CSS clip-path tooltips
✅ Serverless horror stories
✅ The "perfect" web dev storm
✅ Infinity in CSS
✅ Git config options you should know about
➕ And as always, new tools and platform updates.

Enjoy!

https://www.stefanjudis.com/blog/web-weekly-124/

stefan, to random
@stefan@front-end.social avatar

The results of WebAim’s screen reader user survey are out. 👇

https://webaim.org/projects/screenreadersurvey10/

Survey result showing that 85% think that websites should be built more accessible. The rest thinks that screen readers need to improve.
Graphic with the most problematic items: 1) Captcha 2) Interactive elements 3) Ambiguous links/buttons 4) Unexpected screen changes 5) Lack of keyboard accessibility 6) Missing/improper alt text 7) Complext/difficult forms 8) Missing/improper headings 9) Too many links 10) Complext data tables

stefan, to random
@stefan@front-end.social avatar

For the RSS lovers — “RSS is dead”. 👇

It scans all the folks you're following on the Fediverse and scrapes all the available RSS feeds. 👏

https://rss-is-dead.lol/

List of folks Stefan’s following with their RSS feeds.

stefan, to random
@stefan@front-end.social avatar

Haha, @lonekorean found the ultimate z-index hack. 😅

https://codersblock.com/blog/playing-with-infinity-in-css/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • everett
  • magazineikmin
  • hgfsjryuu7
  • vwfavf
  • mdbf
  • ethstaker
  • Youngstown
  • slotface
  • ngwrru68w68
  • rosin
  • PowerRangers
  • kavyap
  • DreamBathrooms
  • normalnudes
  • khanakhh
  • thenastyranch
  • osvaldo12
  • tacticalgear
  • Durango
  • cubers
  • InstantRegret
  • GTA5RPClips
  • tester
  • cisconetworking
  • modclub
  • Leos
  • provamag3
  • All magazines
    •