Prismic.io has published a collection of lists for many types of css/javascript/svg driven animations to enhance your web apps' user experience. Each example includes real-world use cases and clear code examples in the appropriate languages.

The collection includes:

1. Text Animations
2. Hover Effects
3. Button Animations
4. Background Effects, and
5. Image Effects

"CSS Animation Collection: 150+ Examples & Code"

https://prismic.io/guides/css-animations

Create an #HTML dialog when you click an image: "So, I worked some HTML <dialog> magic and set it up so that as I add images to a post, you can click on them and see them a bit bigger in a pop up!" https://cassidoo.co/post/html-dialog-on-image-click/

I love looking at people's website source code, especially when I stumble across cool things like this:

view-source:https://www.write-on.org/

If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!

Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.

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

New Kitten release

• Fix: messages that are promises are properly awaited before being sent.

https://kitten.small-web.org

Kitten automatically and transparently handles asynchronous content in your templates for you so you don’t have to worry about it. One place where this wasn’t working properly is if you addressed `this.component` to stream a custom update of your component manually instead of calling the `this.update()` method of Kitten component instances.

e.g.,

```js
export default class AdminPage extends kitten.Page {
// …
onSelectedPost (data) {
this.send(kitten.html`<${this.component} postId='${data.selectedPost.postId}' />`)
}
}
```

I can't get my head around the off-canvas menu I have to build for work... Context is plain react (no ssr). Which markup is the best? Dialog and inside nav with ul li? Or a nav with the trigger button and dialog (with ul li) inside it??? Or I am overthinking and should build a simple disclosure pattern?

#Development #Techniques
Never lose a z-index battle again · How to set the highest possible z-index in CSS https://ilo.im/163b5p

_____
#CssCalc #WebDev #Frontend #HTML #CSS

Dans cette vidéo, découvrez comment #publier une #application web #statique (#HTML, #CSS, #JS) sur la #Forge des communs numériques éducatifs #LaForgeEdu, sans serveur (ni PHP, ni Node).

À partir d’un modèle de site simple disponible sur la Forge.

https://tube-sciences-technologies.apps.education.fr/w/3ad1PETV3uvkjpzKCHGfQ7

Nous verrons comment :
- #bifurquer le dépôt vers son propre espace,
- personnaliser le titre et les paramètres du projet,
- remplacer les fichiers du modèle par ceux de son application,
- effectuer un commit,
- activer la publication dans l’onglet "Pages" pour générer un lien public simplifié.

Un tutoriel pas-à-pas pour mettre rapidement en ligne ses propres ressources pédagogiques.

A favorite hobby of mine has become collecting outdated, preferably chintzy, tech books. My most recent is the MS-DOS 6.2 guide.

#TIL: Vielleicht bin ich ja der letzte der davon erfahren hat, aber #mastodon hat auch #html Meta Tag(s) für die author Darstellung.

https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon/

Pro development tip. Don't comment out the PHP code byt using HTML commenting.

<!--
<?php phpinfo(); ?>
-->

Outputs everything cleanly commenting out. #security #oops #html #php

This works better.
<?php # phpinfo(); ?>

#Development #Techniques
How to open and close HTML dialogs · You’ll use a little JS today but none in the future https://ilo.im/163b4u

_____
#Dialogs #Modals #Invokers #Browser #WebDev #Frontend #HTML #CSS #JavaScript

Do you know the flex-wrap property? It allows flex items to wrap but it has another "secret" behavior not related to wrapping.

Many are not aware of this hidden functionality but it is never too late to learn about it!

https://css-tip.com/flex-wrap/

#Development #Techniques
Multi-step logins with password manager support · The problem with email-first logins and how to solve it https://ilo.im/163at0

_____
#Logins #Forms #Passwords #PasswordManagers #SSO #Accessibility #Usability #WebDev #Frontend #HTML

SELFHTML wird 30! Das wollen wir feiern!

Am Samstag, den 24.05.2025 gibt es …
12:00 Unconference mit Beiträgen zu RWD, Screenreadern und mehr
17:00 Stadtrundgang Stadt.Wand.Kunst
19:00 Abendessen

https://forum.selfhtml.org/self/2025/apr/11/self-treffen-2025-unconference/1819538#m1819538

My nerdy special-interest-having ass wishes there was #Fediverse software that lets you, no, actually *requires* you to use semantic markup for your posts. I want my <abbr>s and my <dfn>s and even all the #Schema #microformats!

I wanna add semantic info to literally everything on the whole wide web and I am not afraid.

The only depressing thought in the back of my head is that no software will ever do anything cool with all that information...

旋宮圖 Hsüan Kung Diagram
https://yongzs1218.github.io/hsuan-kung/
在AI的指導下，我用JavaScript、CSS和HTML架設了一份網頁版「旋宮圖」。該圖可用於旋宮犯調實踐，之調、爲調轉換等場景。

Under the guidance of AI, I developed a web-based “Hsüan Kung Diagram” using JavaScript, CSS, and HTML. This diagram is designed for Hsüan²-kung (Xuán-gōng, 旋宮) and Fan⁴-tiao⁴ (Fàn-diào, 犯調) practices, including scenes such as Chih-tiao⁴ (Zhī-diào, 之調) and Wei²-tiao⁴ (Wéi-diào, 爲調) transformations. 旋宮 and 犯調 are traditional Chinese modulation or transposition concepts, 之調 and 爲調 are traditional Chinese key notation systems.

AIの指導のもと、私はJavaScript、CSS、HTMLを用いてウェブ版「旋宮図（せんきゅうず）」を構築しました。この図は、旋宮犯調（せんきゅうはんちょう）の実践や、之調（しちょう）・爲調（いちょう）の変換などのシナリオに活用できます。

Dưới sự hướng dẫn của AI, tôi đã xây dựng một ”Đồ Huyền Cung (圖旋宮)“ phiên bản web bằng JavaScript, CSS và HTML. Bản đồ này có thể ứng dụng trong thực hành chuyển điệu Huyền Cung Phạm Điệu (旋宮 犯調), cũng như chuyển đổi giữa hệ thống Chi Điệu (之調) và Vi Điệu (爲調).／𨑜事向引𧵑AI，碎㐌𡏦𥩯“圖旋宮”翻版web憑JavaScript，CSS吧HTML。版圖尼固體應用𥪝轉調 旋宮-犯調，拱如轉𢷮𡧲系統之調吧爲調。

AI의 지도 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 버전 「선궁도(旋宮圖)」를 구축했습니다. 이 도표는 선궁 범조(旋宮 犯調) 실습 및 지조(之調)·위조(爲調) 변환 시나리오에 활용될 수 있습니다.／AI의 指導 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 版 「旋宮圖(선궁도)」를 構築했습니다. 이 圖表는 旋宮 犯調(선궁 범조) 實習 및 之調(지조)·爲調(위조) 轉換 시나리오에 活用될 수 있습니다.