tixie , to Random stuff
@tixie@guerilla.studio avatar
inautilo , to Random stuff
@inautilo@mastodon.social avatar

“The simplicity of HTML and CSS now feels like a radical act. To build a website with just these tools is a small protest against platform capitalism: a way to assert sustainability, independence, longevity.” — Jarrett Fuller


Codeberg , to Random stuff
@Codeberg@social.anoxinon.de avatar

developers around? We'd appreciate a helping hand with improving the Codeberg dark theme (also w.r.t. colour contrast), or even more contributors to Forgejo.

If you're interested, please say "Hi".

davidbisset , to Random stuff
@davidbisset@phpc.social avatar

How to think about responsive images. https://danburzo.ro/responsive-images-html/

cheeaun , to Random stuff
@cheeaun@mastodon.social avatar

Wow reading this thread makes my front-end blood boil: “How to handle lack of respect towards frontend teams?” https://www.reddit.com/r/webdev/s/CUmJbACeoI

tixie , to Random stuff
@tixie@guerilla.studio avatar

Sorry my brain is foggy today.😖
Can someone explain the difference between overscroll-behavior and -webkit-overflow-scrolling?

Is the second just an early and touch only devices version or are there some major differences?

anatudor Bot , to Random stuff
@anatudor@mastodon.social avatar

Sometimes I code cool things.

If you're a patron on Patreon, you may have already seen this interactive demo and the filter effects the basics of which it illustrates here.

Now it's public for everyone to see on https://codepen.io/thebabydino/pen/ZEPKeLz

I hope you like it, getting the layout right ended up being hundreds of hours of work.

Demo illustrating the feColorMatrix used to suppress/ select individual RGB channels. Offers multiple comparison and test image options. Viewport adaptive.

anatudor OP Bot ,
@anatudor@mastodon.social avatar

Extracting a single channel from the input is what made the following possible with little code, no text duplication whatsoever and no wrapping of individual letters in an element each.

✨ complex shadows
✨ wavy text
✨ randomly offset letters in paragraph

youronlyone , (edited ) to News from fediverse
@youronlyone@c.im avatar

A list of alternative webclients for various software:

Notes:

  • webclient: you use your own credential from your own instance
  • Listed are: official webclient hosts; or an instance list.
  • Optional: other instances.
  • In alphabetical order.

For :
1: https://nemmy.app
2: https://slemmy.libdb.so
3: https://vger.app

For Mastodon and :
1: https://brutaldon.org — also works with text-based browsers like Lynx.
2: https://www.halcyon.social/instances.php|| https://halcyon.mstdn.social — Twitter-look
3: https://phanpy.social — also works as a PWA
4: https://fe.soapbox.pub

For :
1: https://elk.zone || https://elk.infosec.exchange — default in https://mozilla.social
2: https://pinafore.social
3: https://semaphore.social
4: https://trunks.social — with mobile clients

For more, see: https://codeberg.org/fediverse/delightful-fediverse-clients

anatudor Bot , to Random stuff
@anatudor@mastodon.social avatar

One thing that has always annoyed me about :empty is that it doesn't work for elements that have text content, but no element children.

:has() fixes this problem.

:not(:has(*)) selects elements that don't have element children, even if they have text content.

ricard , to Random stuff
@ricard@ricard.social avatar

:css3: I cant' wait to have support to CSS Grid: Masonry

I just tried it behind a flag in Firefox, looks fantastic

layout.css.grid-template-masonry-value.enabled  

➡️ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout

inautilo , to Random stuff
@inautilo@mastodon.social avatar


Apple is finally allowing full Chrome/Firefox on iOS · The company has to comply with new EU regulations. https://ilo.im/15xsc3

ricmac , to Random stuff
@ricmac@mastodon.social avatar

New from me @TheNewStack -> Locofy's new "Large Design Model" (LDM) enables users to convert a web design into frontend code with the click of a button. I spoke to the founders. https://thenewstack.io/locofy-launches-large-design-model-to-turn-designs-to-code/

anatudor Bot , to Random stuff
@anatudor@mastodon.social avatar

Firefox and Safari don't show the title-produced tooltip on :focus, only on :hover! Chromium browsers do and so did pre-Chromium Edge and IE10+ (see https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/).

Live test https://codepen.io/thebabydino/pen/JjBBbqr

y0nei , to Programming
@y0nei@headpat.exchange avatar

Go + templ + htmx

The only good stack out there (opinionated). You don’t need 40MB of memory taken just to start the Node.js runtime and seas of NPM dependencies just to get basic functionality working. I’m excited to learn this when I finish my portfolio.

anatudor Bot , to Random stuff
@anatudor@mastodon.social avatar

There are some areas of I absolutely suck at. One of them is typography. So can anyone help me out?

https://stackoverflow.com/q/77670501/1397351

How much vertical space does a letter occupy if the text-orientation is upright and the line-height is 1?

It's not 1lh as I would think. 😟

Boosts appreciated. 🙏

davidbisset , to Random stuff
@davidbisset@phpc.social avatar

Hey folks. Did you watch @photomatt State of the Word 2023? Thoughts? Questions? Predictions?

Here's the recording:

https://www.youtube.com/watch?v=1MwT9EEkguE

RyunoKi , to Random stuff
@RyunoKi@layer8.space avatar

Due to a difficult contract situation I'm currently open to employment offers as / .

(Assuming backend is Node.js or )

I can handle frameworks and libraries like , & but can also achieve amazing results w/ & .

I'm happy to share my knowledge in , & software architecture

Remote Work pref. I've worked internationally before (Portugal, India) but insist on German jurisdiction.

inautilo , to Random stuff
@inautilo@mastodon.social avatar


Understanding HTML landmarks and how to apply them · How to translate visual information into HTML landmarks https://ilo.im/15g6df


Tain05 , to Random stuff

Hello! Today is my first day on Mastodon! Anything interesting I should know about this platform?

youronlyone ,
@youronlyone@c.im avatar

@Tain05 Welcome to the network!

Firstly, don't forget to post your (with that hashtag), as many fediverse users are following/watching that hashtag. You can also check: https://fediverse.info/explore/people

Secondly, don't be shy in using hashtags in your post and on your profile description. Hashtags will help big time in content discovery.

Now, the technical terms you might encounter, and hopefully won't get confused.

  • There are different fediverse software available, for example is the one running on your instance. Each software offers a different set of features.

For example, there is (flagship server at https://firefish.social) (bonus: you can attach more than 4 images); there is (flagship server at https://pixelfed.social) which is geared towards sharing images (you can attach more than 4 images). There is also (flagship: https://bookwyrm.social), think ; and (think and ); or and ; to mention a few.

  • An instance is the same as a server. Each instance is running on one particular fediverse software.

  • Different instances are interoperable and interconnected. They do this through the protocol, which is a managed by the @w3c.

  • There are also fediverse group services like https://chirp.social and https://a.gup.pe - Chirp Social allows for moderation but requires creating an admin account. Guppe groups doesn't offer moderation features, however, it is the easiest to create (in case you are interested in starting your own). Both are free-of-charge.

  • There are also custom available. Some instances offer their own custom frontend. This is different from themes/skins. For example, this post, I sent it from the https://phanpy.social frontend for Mastodon. There is also https://trunks.social frontend also for Mastodon. Think , but you're accessing it from .

  • There are also mobile apps available. Some can handle different fediverse software, some only made specifically for one particular fediverse software.

For some :

  • The fediverse was born in 2008-05-18 when Evan Prodromou sent the first message “This is my first post”.

  • The term “fediverse” was only coined on 2012-05-25 by Mark Eckenwiler. It was known originally as which was coined by Luke Slater on 2010-03-14.

  • The current protocol, ActivityPub, was started on 2014-09-06 and only became a web standard on 2018-01-23. The first protocol was known as which later was replaced by in 2010-03-04.

For more links and resources:
1: Fediverse software list: https://codeberg.org/fediverse/delightful-fediverse-apps
2: Fediverse apps: https://codeberg.org/fediverse/delightful-fediverse-clients
3: Fediverse history: https://codeberg.org/ddfon/federated-sns/src/branch/main/fediverse-history.markdown

Again, welcome and glad you joined the Fediverse network!

robin , to Non Political Twitter French
@robin@toulouse.social avatar

🇫🇷 Les listes de front-end alternatifs que j'ai pu trouver sur internet étant très peu à jour, j'en ai démarré une nouvelle.
N'hésitez pas à me faire des suggestions sur Codeberg ou ici.

🇬🇧 As the lists of alternative front ends I've found on the internet are not very up-to-date, I've started a new one. Feel free to make suggestions on Codeberg or here.

https://codeberg.org/skynet2982/awesome-alternative-front-ends

anatudor Bot , to Random stuff
@anatudor@mastodon.social avatar

Coding a pure 🌈 spinner...

The 4th version* of a thing I first made over a decade ago https://codepen.io/thebabydino/pen/poGyEyg?editors=1100 - now with less code than ever!

*Limited to browsers that support animating CSS custom properties and hue interpolation methods. As of Oct '23, that's no Firefox.

The Pen description contains a list of changes over the years... the history of how CSS got better, I guess.

Screenshot of rainbow spinner.
/* relevant code only */ @property --a { syntax: ''; initial-value: 0deg; inherits: false } .spinner { width: min(100%, 18em); aspect-ratio: 1; padding: 1em; border-radius: 50%; box-shadow: 2px 2px 17px ; background: url(amur_leopard_14.jpg) 50%/ cover content-box, conic-gradient(in hsl longer hue from var(--a), hsl(0, 100%, 80%) 0 0); animation: a 2s linear infinite; } @keyframes a { to { --a: 1turn } }

ALT
  • Reply
  • Loading...
  • maegul , to Random stuff
    @maegul@hachyderm.io avatar

    Someone on hacker news thought to suggest that the influx of tech bros is partly responsible for bad design in modern web dev … can you guess how calm they remained over there?

    https://news.ycombinator.com/item?id=38034023

    ojbaeza , to Random stuff Spanish
    @ojbaeza@mas.to avatar

    Si hay frontends en la sala, os dejo esta oferta de la empresa donde trabaja mi mujer. https://mnfrd.co/459hC0P

    PavelASamsonov , to Random stuff
    @PavelASamsonov@mastodon.social avatar

    Too many designers and devs focus on mobile "features" of dubious utility and neglect the core functionality of every software product: the form.

    The loop of "read thing -> enter data -> click button" needs to work smoothly before anything else. Much has been written about the first and last two but @scottjenson has a valuable contribution here about the middle step: the abysmal current-state experience of text entering & editing on mobile.

    https://jenson.org/text/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • supersentai
  • WatchParties
  • Rutgers
  • steinbach
  • Lexington
  • cragsand
  • mead
  • RetroGamingNetwork
  • mauerstrassenwetten
  • loren
  • xyz
  • PowerRangers
  • AnarchoCapitalism
  • kamenrider
  • Mordhau
  • itdept
  • neondivide
  • space_engine
  • AgeRegression
  • WarhammerFantasy
  • Teensy
  • learnviet
  • bjj
  • khanate
  • electropalaeography
  • MidnightClan
  • jeremy
  • fandic
  • All magazines