💡 CSS Tip!

Two circles, one arrow, and CSS magic. 🪄

A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩

https://css-tip.com/connected-circles/

The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).

#CSS #HTML

Stop crawling my HTML you dickheads – use the API

Link: https://shkspr.mobi/blog/2025/12/stop-crawling-my-html-you-dickheads-use-the-api/
Discussion: https://news.ycombinator.com/item?id=46265579

#html

Il fait un temps à rester bien au chaud sur internet alors je vous fais un méga 🧶 d'avant solstice autour du #SmallWeb #smöl #tiny #FolkWeb #IndieWeb #OldWeb #Libre #Décentralisé #Distribué #Punk #DIY #artisanal #bidouille #bricole #vintage #lowtech #lighttech #fauché #ecofeministe #magique #html #css #anarchiste #decolonial #mesh #faitmain #handmade #archives #zines #zones #autohébergement #rss #statique #tilde ~ 🖤 @slowpress @Saint_loupBaptiste @orelauwen @pcet@mastodon.top @icimeliméli @lelibreauquotidien & 🦫

Useful patterns for building HTML tools

Link: https://simonwillison.net/2025/Dec/10/html-tools/
Discussion: https://news.ycombinator.com/item?id=46223882

#html

The untold history of web development:

1990: HTML invented.
1994: CSS invented to fix HTML.
1995: JS invented to fix HTML/CSS.
2006: jQuery invented to fix JS.
2010: AngularJS invented to fix jQuery.
2013: React invented to fix AngularJS.
2014: Vue invented to fix React & Angular.
2016: Angular 2 invented to fix AngularJS & React.
2019: Svelte 3 invented to fix React, Angular, Vue.
2019: React hooks invented to fix React.
2020: Vue 3 invented to fix React hooks.
2020: Solid invented to fix React, Angular, Svelte, Vue.
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid.
2021: React suspense invented to fix React, again.
2023: Svelte Runes invented to fix Svelte.
2024: jQuery still used on 75% of websites.

(By https://twitter.com/fireship_dev)

#Web #Development #HTML #CSS #JavaScript #React #ReactJS #JQuery #Svelte #Angular #AngularJS

Today was the first time in my career I've actually used the <ruby> tag.

Granted I'm not using it exactly what it was designed for, but it's a decent compromise in having a fat icon accompanied by a small explanatory text, as opposed to doing this with a lot more CSS and some other semantically uninteresting containers.

#css #html #webdev

Live Blog Writer - An extension with WYSIWYG editor for VS Code with support for WordPress, Blogger, Ghost, and Substack blogs

https://marketplace.visualstudio.com/items?itemName=alvinashcraft.live-blog-writer

#vscode #blogs #extensions #blogging #tools #html #ghostblog #blogger #wordpress #substack

0.6.1 of django-new has been released. 🚀

- Lots of UI tweaks.
- `--data` flag for data-specific applications.
- Generate `summary.html` for a user-friendly explanation of the newly created application (h/t @ehmatthesEric Matthes).
- BETA: `--install` to install packages (only `whitenoise` currently supported).

🛠️ https://github.com/adamghill/django-new
📦 https://pypi.org/project/django-new/

#Django #Python #WebDev #API #HTML

Y’all. I made this cute little animation to show that a link was successfully copied. I use it on my writing site.

It’s not monumental, but I really like it. My son said it feels “very satisfying.”

#Design #CSS #Javascript #HTML #UI #Animation #InteractionDesign #WebDesign

HTML as an Accessible Format for Papers

Link: https://info.arxiv.org/about/accessible_HTML.html
Discussion: https://news.ycombinator.com/item?id=46173825

#html

They said Fizz Buzz using CSS (and HTML), but what about a pure CSS version with no HTML? It's possible!

https://css-tip.com/fizz-buzz/

A fun CSS-only experiment using modern features.

#CSS #HTML

💡 CSS Tip!

How many selectors do you know for the HTML element? Only two, right? There are more!

It's time to discover the hidden selectors of the HTML element.

https://css-tip.com/root-selectors/

Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss another cool selector?

#CSS #HTML

💡 CSS Tip!

Another classic component made easy using corner-shape. A gallery of skewed images with a hover effect.

https://css-tip.com/skewed-images/

It can be done with old features, but this one is direction-aware! One code for both directions (left-to-right and right-to-left)

#CSS #HTML

0.4.0 of django-new is released. 🚀

Now with interactive mode! ✨

`uvx django-new` steps through prompts to create a #Django application. It also shows the tree structure of all of the folders and files that were created.

Both features thanks to the brilliant `rich` from @willmcgugan.

🛠️ https://github.com/adamghill/django-new
📦 https://pypi.org/project/django-new/

#Python #HTML #webdev

0.3.0 of `django-new` released.

- Add `--version`.
- Add `--starter` option for project templates (this is the same as Django project templates, but trying to use different terminology)
- Improved handling of creating applications in existing folders by prompting the user for clarification.

🛠️ https://github.com/adamghill/django-new
📦 https://pypi.org/project/django-new/

#Django #Python #Web #HTML

0.2.0 of django-new has been released. 🎉

`uvx django-new [--api] [--web] [--worker] name [folder]`

- Basic project and app creation for APIs, websites, and worker use cases.
- Optionally create minimal applications similar to DEP-15 (aka, all files in one folder).
- Slightly opinionated folder structure to get you going, but no major decisions that force you into a corner.
- Only includes a few lukewarm takes.

🛠️ https://github.com/adamghill/django-new
📦 https://pypi.org/project/django-new/

#Django #Python #Web #HTML

💡 CSS Tip!

A direction-aware arrow is good, but what about a generic way to make any CSS Shapes direction-aware? It's possible!

https://css-tip.com/direction-aware-shapes/

The code is simple and doesn't require any modern features, so it's well-supported.

#CSS #HTML

An interactive demo: https://codepen.io/t_afif/full/YPqezLv via @codepen

#CSS #HTML

💡 CSS Tip!

Use modern CSS to create an arrow shape that adjusts according to the direction and writing mode. A direction-aware shape!

https://css-tip.com/arrow/

Another cool use case of corner-shape

#CSS #HTML

An article about triangles and CSS. I have always said that using borders to draw triangles with CSS is a hacky solution and shouldn't be used... but there are exceptions.
https://alvaromontoro.com/blog/68086/drawing-triangles-with-css-using-borders-an-exception

Spoiler alert: they involve logical properties... and most places that suggest using borders still use physical properties instead.

#css #html #webdev

No more `npm i some-heavy-otp-input` because @tylersticka comes with a super simple solution.

https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

#html

Another demo using Anchor Positioning and tooltips. This time, the arrow will get stretchy 👀

https://css-tip.com/tooltip-anchor-4/

Still 100% CSS magic! 🪄

#CSS #HTML

This date picker run-down is excellent - thank you @dbDavid Bushell ☕

https://pikaday.dbushell.com

#css #html #accessibility

💡 CSS Tip!

Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.

https://css-tip.com/responsive-stacked-img/

No hardcoded values, no magic numbers, and the gap is transparent!

#CSS #HTML

📚 It's here! CSS in Depth Second Edition is now available in print! 📘

Use code pbgrant3 to get 45% off and get up to date with the latest CSS has to offer: https://shortener.manning.com/a1Qx

#CSS #WebDev #html #js

I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.

Thankfully, it doesn’t have to be complicated: https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

#HTML #CSS #JavaScript

Re- #introduction - I joined mastodon.social Feb 02, 2017, and have delighted in the fediverse since.

#developer since web dev was just #HTML, then server side with #csharp, #dotnet and now #javascript is running everything!

Love #drmfree videogames, standup #comedy that punches up, #heavymusic, and going to gigs.

Moulded by the teachings of #terrypratchett, I care about people, #equality and fairness (ergo, lean left, Anti-Tory and #antifascist!)

@stefanStefan Bohacek thank you! Going to save this for later #foss #html

<var>

Represents the name of a variable in a mathematical expression or a programming context.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var

#HTML #WebDev #DailyHTML

Marko – A declarative, HTML‑based language that makes building web apps fun

Link: https://markojs.com/
Discussion: https://news.ycombinator.com/item?id=45858905

#html

HTML Slides with notes

Link: https://nbd.neocities.org/slidepresentation/Slide%20presentation%20about%20slides
Discussion: https://news.ycombinator.com/item?id=45842777

#html

setHTML(), Trusted Types and the Sanitizer API. Ollie Williams explains how the new setHTML() method and Sanitizer API help prevent XSS by safely inserting HTML into the DOM. Combined with the Trusted Types API, they provide a modern, configurable way to control what elements and attributes are allowed, eventually replacing libraries like DOMPurify. Supported in Firefox Nightly and Chrome Canary. #security #html

https://olliewilliams.xyz/blog/sanitizer/

Abandonware of the web: do you know that there is an HTML tables API?

Link: https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/
Discussion: https://news.ycombinator.com/item?id=45781293

#html

Show HN: In a single HTML file, an app to encourage my children to invest

Link: https://roberdam.com/en/dinversiones.html
Discussion: https://news.ycombinator.com/item?id=45758421

#html

Hello Fediverse, hello Bits&Baeume,

I’ve moved recently, time for a (re)introduction — and a heartfelt Thank You! to @benBen

I am a writer, copywriter, online editor, and I generally write a lot; I design websites with plain HTML/CSS/JS or using WordPress and other CMS; occasionally I work as a speaker, podcast producer, sound designer — to mention the most important bits.

My blog: https://wernerprise.com/blog (mostly German, but I am considering making it bilingual at some point.)

Climate catastrophe is on my mind, degrowth close to my heart; capitalism needs a short leash!

Also, I still take SARS-CoV-2 and COVID-19 very seriously. Thus:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIsNotOver #WearAMask #TeamCaution #CleanAir
#NewHere #Intro #ClimateCatastrophe #Capitalism #WealthRedistribution #TaxTheRich #Democracy #AntiAI #AntiFa #StopConsumerism #WeAreThe99Percent
#HTML #CSS #JavaScript #Webdesign #WordPress

Hallo Fediverse, hallo Bits&Baeume,

ich bin umgezogen und erst seit ein paar Stunden hier auf dem neuen Server, deswegen eine kurze Vorstellung — und ein herzliches Dankeschön an @benBen

Ich bin Texter und Online-Redakteur, schreibe auch sonst viel; ich gestalte Websites in HTML, mit WordPress oder anderen CMS, arbeite außerdem gelegentlich als Sprecher, Podcast-Produzent, Sounddesigner – um mal die wesentlichen Dinge genannt zu haben.

Mein Blog: https://wernerprise.com/blog

Mir liegt die Klimakatastrophe auf der Seele und Degrowth (Décroissance) am Herzen; Kapitalismus braucht straffe Zügel!

Außerdem nehme ich nach wie vor SARS-CoV-2 und COVID-19 ernst. Daher:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIstNichtVorbei #WearAMask #MaskeAuf #DieMaskeBleibtAuf #TeamVorsicht #CleanAir
#NeuHier #Intro #Klimawandel #KlimaKatastrophe #Kapitalismus #Umverteilung #Reichensteuer #Demokratie #AntiKI #AntiFa #Konsumstop #WirSindDie99Prozent
#HTML #CSS #JavaScript #Webdesign #WordPress

Web devs can have a bit of JS, as a treat, but only if you behave.

(this is what behaving looks like)

#WebDev #NoJS #CSS #HTML

Don't forget these tags to make HTML work like you expect

Link: https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/
Discussion: https://news.ycombinator.com/item?id=45719140

#html

when it's time to write the Good Web Apps™

#HTML #NoJS #WebDev

Getting the screen dimension with a simple calc? Yes, it's possible!

https://css-tip.com/screen-dimension/

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)

#CSS #HTML

How does the semantic html community feel about using the <details> element to “expand” into a form submission confirmation, when submitting “dangerous” operations, instead of a <dialog>? Notably, the thing I’m working on is currently fully JS-optional so far, and I would like to keep it that way.

EDIT: Oh it looks like <button> has command and commandfor, which can open a <dialog> now.

EDIT2: oops, but it's not baseline yet, and won't be for a while. It just released in preview for Safari and Firefox. ~sigh~

#HTML #JavaScript #webdev

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

https://css-tip.com/position-area/

Example with position-area: top 👇

#CSS #HTML

A quick, beginner-friendly walkthrough on how to make a nice-looking, accessible image gallery and host it for free with Neocities.

https://stefanbohacek.com/blog/making-a-free-image-gallery-with-neocities-org/

#tutorial #gallery #ImageGallery #HTML #neocities #LearnToCode

Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

https://css-tip.com/tooltip-anchor-3/

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍

#CSS #HTML

I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.

36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣

#CSS #HTML

Previously we wrote about Reciprocate, a library for adding signal-based reactivity to server-rendered #HTML #WebComponents.

Pretty cool problems to have solved, but what if you wanted more dynamic client-side smarts and the ability to write declarative templates with a trusty html`` function?

Tada! 🎉 Thanks to Joe Pea @trusktrJoe Pea that #WebDev problem has also been solved. Wire up these two solutions together, and you'll be authoring new UI components using familiar DX. 🙌
https://thathtml.blog/2025/10/nimble-html-adds-great-dx-to-ui-components/

💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

https://css-tip.com/position-area/

#CSS #HTML

For those who wanted to see the code behind my CSS-only magical sticky auto-expanding sidebar nav in action, I've put together a little CodePen for you! I've narrowed down the relevant code to just what's needed to get this to work, with some very minimal JavaScript to improve the accessibility of it! I've even left you a little challenge in there for you, let me see how you accomplish it!

#css #html #javascript #webdev #a11y

https://codepen.io/Snugug/pen/VYezVKr
https://mas.to/@snugug/115259058092836805

I feel that "#JavaScript is purely terrible and should be obliterated from the planet because modern #CSS is enough" crowd often miss the role it plays in dictating the weight of importance for new features that flow into native #HTML and #CSS.

Its right there in chapter four of "HTML5 for Web Designers" (Jeremy Keith)

Developers hack together a solution with #JS and eventually browser vendors go "oh snap, yeah, maybe we *could* just have CSS for popular thing" and out it comes.

You can't have amazing CSS without browser vendors understanding what is important for developers. Its a lovely, beautiful feedback loop.

#WebDev #HTML