TechHub

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/Evolutions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Evolutions</a> Is CSS-in-JS still a thing? · What worked, what didn’t, and what’s next <a href="https://ilo.im/1631d7" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/1631d7</a>_____ <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</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/Tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tailwind</a> <a href="https://mastodon.social/tags/StyleX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StyleX</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/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> <a href="https://mastodon.social/tags/Library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Library</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>

caitpAvoid the temptation to do <a href="https://mstdn.social/tags/CssInJs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssInJs</a>, avoid the temptation to make fancy Hamburger Menus, avoid the temptation to load content dynamically with fetch without also supporting loading ahead-of-time. Avoid the urge to require JS form validation, avoid the urge to use JS to negotiate a form's endpoint. Avoid the urge to do anything pointlessly fancy just to read a fricken news article. Establish ways to circumvent inhuman agents without script access

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/Trends" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Trends</a> 2024 JavaScript Rising Stars · Top starred GitHub projects in the past year <a href="https://ilo.im/161qje" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/161qje</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/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/Library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Library</a> <a href="https://mastodon.social/tags/StaticSites" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StaticSites</a> <a href="https://mastodon.social/tags/CssInJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssInJS</a> <a href="https://mastodon.social/tags/Tooling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tooling</a> <a href="https://mastodon.social/tags/AI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AI</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/Backend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Backend</a>

jmsfbsReleased a <a href="https://mastodon.social/tags/cssinjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssinjs</a> lib for <a href="https://mastodon.social/tags/mithriljs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mithriljs</a> today with support for reactive css vars.<a href="https://github.com/JAForbes/super-mithril-css" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/JAForbes/super-mithril-css</a>Nice to package up and release something that's been sitting there in a fork for years.Though not sure it gets more niche than announcing a <a href="https://mastodon.social/tags/mithriljs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mithriljs</a> lib on mastodon.<a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Kai, sounds like the sky<a href="https://mastodon.kinlane.com/@kin" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kin</a> <a href="https://toot.cafe/@JesseSkinner" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@JesseSkinner</a> a small correction “over learning anything that is not their primary language” <a href="https://mastodon.social/tags/cssinjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssinjs</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/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Techniques</a> The undeniable utility of CSS :has · “The CSS :has selector is incredibly powerful.” <a href="https://ilo.im/1601qb" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/1601qb</a>_____ <a href="https://mastodon.social/tags/FeatureDetection" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FeatureDetection</a> <a href="https://mastodon.social/tags/EventListener" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#EventListener</a> <a href="https://mastodon.social/tags/DarkMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DarkMode</a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</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/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/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Vesa PiittinenWhichever to blame:- <a href="https://mastodon.social/tags/NextJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NextJS</a> is good in loading CSS in the wrong order, and having a mismatch between development and production.- <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> is great for creating CSS loading order issues for frameworks.These issues happen particularly easily if you maintain library as a fully separate project from the consuming apps.Just being happy of the decision to start moving much more of our stuff to global <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> earlier this year.CSS layers is another solution to fix this, but will need work.

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/Outlooks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Outlooks</a> CSS in React Server Components · Understanding the future of CSS-in-JS and React <a href="https://ilo.im/15ykt9" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15ykt9</a>_____ <a href="https://mastodon.social/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> <a href="https://mastodon.social/tags/ServerComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ServerComponent</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/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Backend</a> <a href="https://mastodon.social/tags/RSC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RSC</a>

pablolarah🔵🔴 CSS in React Server Components by Josh W. Comeau <a href="https://mastodon.social/@joshwcomeau" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@joshwcomeau</a> <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> <a href="https://mastodon.social/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://www.joshwcomeau.com/react/css-in-rsc/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.joshwcomeau.com/react/css-in-rsc/</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/Trends" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Trends</a> 2023 JavaScript Rising Stars · Top starred GitHub projects in the past year <a href="https://ilo.im/15xkvu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15xkvu</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/Backend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Backend</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/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/CssInJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssInJS</a> <a href="https://mastodon.social/tags/StaticSite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StaticSite</a> <a href="https://mastodon.social/tags/StateManagement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StateManagement</a> <a href="https://mastodon.social/tags/GraphQL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GraphQL</a>

pablolarah🟤🟡 Exploring the shift from CSS-in-JS to headless UI libraries by Elijah Asaolu @asaolu_elijah at @LogRocket <a href="https://mastodon.social/tags/cssinjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssinjs</a> <a href="https://mastodon.social/tags/headless" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#headless</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://blog.logrocket.com/exploring-shift-css-in-js-headless-ui-libraries/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.logrocket.com/exploring-shift-css-in-js-headless-ui-libraries/</a>

Sal RahmanWhy don't some people like CSS-in-JS?Is it because code written in CSS-in-JS don't allow you to take advantage of the "cascading" nature of CSS?Is it because you can't take advantage of selectors?Is it because there might be some compilation steps required when employing CSS-in-JS? And if compilation isn't used, there might be some render-time slowdown?<a href="https://techhub.social/tags/css" class="mention hashtag" rel="tag">#css</a> <a href="https://techhub.social/tags/javascript" class="mention hashtag" rel="tag">#javascript</a> <a href="https://techhub.social/tags/jsx" class="mention hashtag" rel="tag">#jsx</a> <a href="https://techhub.social/tags/react" class="mention hashtag" rel="tag">#react</a> <a href="https://techhub.social/tags/solidjs" class="mention hashtag" rel="tag">#solidjs</a> <a href="https://techhub.social/tags/preact" class="mention hashtag" rel="tag">#preact</a> <a href="https://techhub.social/tags/cssinjs" class="mention hashtag" rel="tag">#cssinjs</a> <a href="https://techhub.social/tags/webdevelopment" class="mention hashtag" rel="tag">#webdevelopment</a>?

InautiloPast informs the present: Our approach to CSS · The evolution of CSS and its methodologies <a href="https://ilo.im/10bo7u" rel="nofollow noopener noreferrer" target="_blank">https://ilo.im/10bo7u</a> · by <a href="https://mastodon.online/@colepeters" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@colepeters</a> _____ <a href="https://mastodon.social/tags/development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#development</a> <a href="https://mastodon.social/tags/approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#approaches</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/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</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/AtomicCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AtomicCSS</a> <a href="https://mastodon.social/tags/BEM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BEM</a> <a href="https://mastodon.social/tags/OOCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OOCSS</a> <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> <a href="https://mastodon.social/tags/CSSmodules" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSmodules</a> <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://mastodon.social/tags/WebStandard" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebStandard</a>

InautiloThe State of CSS 2022 · Results of the annual developer survey about the latest trends in CSS <a href="https://ilo.im/zlc3j" rel="nofollow noopener noreferrer" target="_blank">https://ilo.im/zlc3j</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/trends" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#trends</a> <a href="https://mastodon.social/tags/survey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#survey</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/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a> <a href="https://mastodon.social/tags/library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#library</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/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a>

Vint ProxJust made a conclusion that avoiding <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> makes sense only for reset stylesheet, and even then you'd want to inject it via <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> Import Assert syntax (es-module-shims <a href="https://mastodon.social/tags/polyfill" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#polyfill</a>). Embrace single-file <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>, <a href="https://mastodon.social/tags/KISS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#KISS</a>!

Vint ProxAfter some more digging, I found dreaded polyfills to make <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> and <a href="https://mastodon.social/tags/buildless" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buildless</a> understand each other, also ditching <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a> out: 📜 <a href="https://github.com/calebdwilliams/construct-style-sheets" rel="nofollow noopener noreferrer" target="_blank">https://github.com/calebdwilliams/construct-style-sheets</a> 📜 <a href="https://github.com/guybedford/es-module-shims#css-modules" rel="nofollow noopener noreferrer" target="_blank">https://github.com/guybedford/es-module-shims#css-modules</a>

Vint ProxOne does not simply do <a href="https://mastodon.social/tags/buildless" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#buildless</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>, while employing <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> *AND* avoiding <a href="https://mastodon.social/tags/CSSinJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSinJS</a>. :blobsweats: I start to sound like insane interop advocate here, can anyone relate? :BlobhajSadReach:

pablolarah🔺 CSS vs. CSS-in-JS: How and why to use each by Rahul Chhodde at @LogRocket <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/cssinjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssinjs</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://blog.logrocket.com/css-vs-css-in-js/" rel="nofollow noopener noreferrer" target="_blank">https://blog.logrocket.com/css-vs-css-in-js/</a>

Recent searches

Search options

Administered by:

Server stats:

#cssinjs