Conversation

Notices

1. Embed this notice
   Volpeon :drgn_verified: :drgn_smol: (volpeon@is-a.wyvern.rip)'s status on Sunday, 30-Jun-2024 16:56:32 JST Volpeon :drgn_verified: :drgn_smol:

   I'm finally done bringing my design system up-to-date. Every component now uses logical CSS rules and has clearly visible focus indicators. I threw out some other components I rarely used, and instead added a shiny new card component that's sure to be useful. I also changed the variable structure to fix many small annoyances, and color palettes are now absolutely consistent and accessible thanks to better color spaces and contrast algorithms.
   
   Feels good. :drgn_happy:

   • kaia likes this.
   • Embed this notice
     Volpeon :drgn_verified: :drgn_smol: (volpeon@is-a.wyvern.rip)'s status on Sunday, 30-Jun-2024 16:56:41 JST Volpeon :drgn_verified: :drgn_smol:

     in reply to

     Website is updated. Build time went down by 5 seconds and the compiled CSS file is 70kb smaller.
     
     (btw, I find it unfair that many of those ___kb club sites disallow Gzip because CSS compresses extremely well. In practice, a 200kb CSS file will only be a fraction of a 50kb web font)
     
     Now I can finally make the changes I planned to make in the first place before I got annoyed by my design system. :woozy_baa:

     kaia likes this.
   • Embed this notice
     kaia (kaia@brotka.st)'s status on Sunday, 30-Jun-2024 16:57:05 JST kaia

     in reply to
     @volpeon what technology is it built with? :FernPeek2:
   • Embed this notice
     kaia (kaia@brotka.st)'s status on Sunday, 30-Jun-2024 17:10:19 JST kaia

     in reply to
     @volpeon thank you, I never ever heard about any of these :blobcatcomfreading:
     iced depresso likes this.
   • Embed this notice
     Volpeon :drgn_verified: :drgn_smol: (volpeon@is-a.wyvern.rip)'s status on Sunday, 30-Jun-2024 17:10:20 JST Volpeon :drgn_verified: :drgn_smol:

     in reply to

     • kaia

     @kaia@brotka.st I use SASS. I built a framework for it with some pretty complex capabilities, most notably the BEM system which auto-generates selectors following BEM conventions, and the property trees which let me organize and do static analysis of native CSS variables.
     The demo site is generated from Pug templates. They're pretty neat for quick prototyping.

     kaia and iced depresso like this.
   • Embed this notice
     garfieldairlines.net (garfieldairlines@fedi.garfieldairlines.net)'s status on Sunday, 30-Jun-2024 17:48:54 JST garfieldairlines.net

     in reply to

     @volpeon@is-a.wyvern.rip if your webserver has gzip_preload on don't forget to (also does br and zstd) : find . -type f -regex ".*\.\(atom\|conf\|css\|eot\|htm\|html\|js\|json\|jsx\|md\|otf\|rss\|scss\|sitemap\|svg\|text\|ts\|tsx\|ttf\|woff\|woff2\|xt\|wasm\|xml\|yaml\)$" -exec zstd --ultra {} \+ ; find . -type f -regex ".*\.\(atom\|conf\|css\|eot\|htm\|html\|js\|json\|jsx\|md\|otf\|rss\|scss\|sitemap\|svg\|text\|ts\|tsx\|ttf\|woff\|woff2\|xt\|wasm\|xml\|yaml\)$" -exec brotli --best {} \+ ; find . -type f -regex ".*\.\(atom\|conf\|css\|eot\|htm\|html\|js\|json\|jsx\|md\|otf\|rss\|scss\|sitemap\|svg\|text\|ts\|tsx\|ttf\|woff\|woff2\|xt\|wasm\|xml\|yaml\)$" -exec zstd --ultra --format=gzip {} \+

     kaia likes this.