TechHub

131 posts114 participants2 posts today

Martine Dowden<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> shannanigans time on <a href="https://mastodon.social/tags/youtube" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#youtube</a> and <a href="https://mastodon.social/tags/twitch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#twitch</a> come hang out!Youtube: www.youtube.com/@MartineDowdenTwitch: www.twitch.tv/martine_dowden

Aakash WebWant to add a Self-Hosted sharing or follow my profile icon ? Try Socializer.CSS. A <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> library to create sharing icon of multiple style or shape you want.🟢 55+ social networks 🟢 6 button shapes 🟢 and more🔗 <a href="https://www.aakashweb.com/css-libraries/socializer-css/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.aakashweb.com/css-libraries/socializer-css/</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Releases</a> WebKit features in Safari 18.4 · An epic tour of the new features in WebKit <a href="https://ilo.im/16331y" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/16331y</a>_____ <a href="https://mastodon.social/tags/Safari" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Safari</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebApp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebApp</a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DevTools</a> <a href="https://mastodon.social/tags/Security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Security</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

jfmblinux :jeditux:SVG and PNG tech iconsDownload, copy and paste tech icons in SVG and PNG format for your projects. <a href="https://mastodon.jfmblinux.fr/tags/Html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Html</a> <a href="https://mastodon.jfmblinux.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.jfmblinux.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.jfmblinux.fr/tags/PNG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PNG</a> <a href="https://mastodon.jfmblinux.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> <a href="https://mastodon.jfmblinux.fr/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fediverse</a> <a href="https://mastodon.jfmblinux.fr/tags/Pixelfed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pixelfed</a> <a href="https://mastodon.jfmblinux.fr/tags/Nextcloud" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Nextcloud</a> <a href="https://techicons.dev/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://techicons.dev/</a>

Aral BalkanNew Kitten update• 🥳 Kitten HTML templates and kitten.Component component render functions can now be async.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.The kitten.Component version also has a refresh button that streams a different three to the page.For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/async" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#async</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/templates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templates</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/generators" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#generators</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

RecurringBloatwareTrying to build my personal blog, what do you folks think I should go with? CVA or Tailwind Variants?I am learning towards CVA because it is CSS-library agnostic.I am also not sure on how to deal with conflict resolution in CVA. Do I use twMerge?<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/variants" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#variants</a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind</a>

DazNormalize CSS or CSS reset? <a href="https://fosstodon.org/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

LobstersThe <select> element can now be customized with CSS via <a href="https://mastodon.social/@matheusrich" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@matheusrich</a> <a href="https://lobste.rs/s/bocapp" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lobste.rs/s/bocapp</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://developer.chrome.com/blog/a-customizable-select" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/a-customizable-select</a>

Andrew Malek"Every interaction should feel polished and engaging, especially buttons... A well-animated button can capture attention, reinforce branding, and make the experience more enjoyable." <a href="https://techhub.social/tags/CSS" class="mention hashtag" rel="tag">#CSS</a> <a href="https://frontendmasters.com/blog/reanimating-the-css-day-buttons/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontendmasters.com/blog/reanimating-the-css-day-buttons/</a>

GripNews🌕 CSS 自定義 `<select>` 元素現已可用 ➤ 告別單調的下拉選單：CSS 自訂 `<select>` 元素為網頁設計開啟新篇章 ✤ <a href="https://developer.chrome.com/blog/a-customizable-select" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/a-customizable-select</a> Chrome 瀏覽器已推出一項新功能，允許網頁開發者使用 CSS 自訂 `<select>` 元素的外觀和行為。這項功能基於 `appearance: base-select` CSS 屬性，它提供了一個可配置且可樣式化的基礎狀態，讓開發者可以更自由地設計 `<select>` 元素，並在選項中加入豐富的 HTML 內容，例如圖像和 SVG。雖然此功能存在潛在的相容性風險，但 Chrome 透過實驗性功能逐步推出，以確保穩定性。 + 終於可以不用自己客製化下拉選單了！這個功能太方便了，可以讓網站的外觀更一致。 + 聽起來很棒，但希望 Chrome 能確保這個功能不會破壞現有的網站，畢竟很多網站都有自己的 `<select>` 樣式。 <a href="https://mastodon.social/tags/%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#網頁開發</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Chrome</a>

Friday Front-EndLayered Text Headers: "Being able to control the `paint-order` in <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability." <a href="https://frontendmasters.com/blog/layered-text-headers/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/layered-text-headers/</a>

Windows Portable AppsUseful Apps for Windows OS that Increase Your Daily Productivity! (Microsoft Store) <a href="https://apps.microsoft.com/search/publisher?name=25%2F8" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://apps.microsoft.com/search/publisher?name=25%2F8</a> . <a href="https://mastodon.social/tags/Automation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Automation</a> <a href="https://mastodon.social/tags/Windows" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Windows</a> <a href="https://mastodon.social/tags/windows11" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#windows11</a> <a href="https://mastodon.social/tags/windows10" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#windows10</a> <a href="https://mastodon.social/tags/Windows7" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Windows7</a> <a href="https://mastodon.social/tags/Infosec" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Infosec</a> <a href="https://mastodon.social/tags/netsec" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#netsec</a> <a href="https://mastodon.social/tags/cybersec" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cybersec</a> <a href="https://mastodon.social/tags/CyberSecurity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CyberSecurity</a> <a href="https://mastodon.social/tags/passwordmanager" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#passwordmanager</a> <a href="https://mastodon.social/tags/unicode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unicode</a> <a href="https://mastodon.social/tags/regex" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#regex</a> <a href="https://mastodon.social/tags/binary" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#binary</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#100DaysOfCode</a> <a href="https://mastodon.social/tags/portableapps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#portableapps</a>

Adam Smith<a href="https://beige.party/@AbramKedge" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@AbramKedge</a> Agreed. Let’s create a pull request for English.I think we should remove the “e” in “height”. Here’s my reasoning. It makes these other words more closely related. ↔️ wide → width ↕ high → hightHonorable mentions: • width / hidth • weidth / height <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Hacker News 50The <select> element can now be customized with CSSLink: <a href="https://developer.chrome.com/blog/a-customizable-select" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.chrome.com/blog/a-customizable-select</a> Discussion: <a href="https://news.ycombinator.com/item?id=43532830" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://news.ycombinator.com/item?id=43532830</a><a href="https://social.lansky.name/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Abram Kedge 🏴󠁧󠁢󠁳󠁣󠁴󠁿🇨🇦Today I am irrationally irritated that width and height do not have the same number of letters.It would make my code so much tidier.<a href="https://beige.party/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Daniel SchildtEspecially useful for designers is when they realise that a lot of the fancy visual effects from Figma etc. can be recreated with CSS.Even more, when realising that those can become reusable CSS styles for building things faster in the future. That way designers can build their own visual toolkit.<a href="https://mementomori.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mementomori.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Roel NieskensI'm thinking of font features that could mess with calculating the width of a string of text.The most obvious is optical sizing. This changes the width of glyphs at certain font sizes, so a text at font-size:16px might be 100px wide, but that doesn't mean it'll be 200px wide at font-size:32px.Another could be `rand`, when supported: if you get different glyphs on your virtual canvas than on screen, calculations get borked.Anything else? 🤔 <a href="https://typo.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://typo.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fonts</a> <a href="https://typo.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Frontend DogmaCreating Animated Accordions With the “details” Element and Modern CSS, by <a href="https://front-end.social/@stefan" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@stefan</a> (@builderio.bsky.social):<a href="https://www.builder.io/blog/animated-css-accordions" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.builder.io/blog/animated-css-accordions</a><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/animations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#animations</a> <a href="https://mas.to/tags/transitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#transitions</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Guides</a> Must-know Interop features 2025 · A learning guide for the next couple of months <a href="https://ilo.im/1631b4" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/1631b4</a>_____ <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/Interoperability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Interoperability</a> <a href="https://mastodon.social/tags/AnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AnchorPositioning</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/WebVitals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebVitals</a> <a href="https://mastodon.social/tags/WebPerf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebPerf</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Ana Tudor 🐯Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/XJWxLWV" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XJWxLWV</a>cc <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bramus</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scroll</a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scrollAnimation</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gradientText</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a>

Recent searches

Search options

Administered by:

Server stats:

#css