davidbisset.social

css

  • Dropflow is a #CSS layout engine for node or <canvas> https://github.com/chearon/dropflow

  • “#CSS Button Styles You Might Not Know” Some tips in here I’ll be applying in my work. https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/

  • "It’s only a matter of time before #Tailwind collapses. The vendor-specific language and the misleading communication cannot hold water very long… Learn to write clean HTML and #CSS and stay relevant for years to come.” https://nuejs.org/blog/tailwind-misinformation-engine/ (I don't use Tailwind but I don't avoid or hate it, but do note posts that share pros/cons).

  • #CSS for printing to paper https://voussoir.net/writing/css_for_printing

  • Snake…in pure #HTML⁉️ [no #JavaScript, no #CSS, no images!!] 😱 https://dev.to/grahamthedev/snakein-pure-html-no-js-no-css-no-images-2ccg #coding

  • "My talk on #CSS runtime performance" #frontend https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-performance/ "I just want web developers to consider the cost of CSS, and to get more comfortable with using the DevTools to understand which kinds of CSS patterns may be slowing down their website." via @nolan

  • Some cool #CSS stuff: CSS-only Tooltip Shape or Speech Bubble made with a single-element and customizable using CSS variables. https://css-generators.com/tooltip-speech-bubble/

  • A #JavaScript library for converting HTML to JSON, and #JSON to HTML, with templating, attributes, and #CSS support. https://github.com/williamtroup/JHson.js

  • The New #CSS Math: pow(), sqrt(), and exponential friends https://danielcwilson.com/posts/mathematicss-powers/ #frontend

  • #CSS has an infinity constant. Playing with Infinity in CSS: https://codersblock.com/blog/playing-with-infinity-in-css/ #frontend

  • Tailwind vs. Semantic CSS "This study compares two websites with identical design: the commercial Spotlight template from developers of #Tailwind vs the same site with semantic #CSS." https://nuejs.org/blog/tailwind-vs-semantic-css/

  • Heat.js ( williamtroup/Heat.js )

    🌞 A lightweight JavaScript library that generates customizable heat maps, charts, and statistics to visualize date-based activity and trends. Created by williamtroup on Jan 09, 2024.

  • JsonTree.js ( williamtroup/JsonTree.js )

    🔗 A lightweight JavaScript library that generates customizable tree views to better visualize JSON data. Created by williamtroup on Feb 22, 2024.

  • High Definition #CSS Color Guide https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide

  • Untitled post 58868

    .door { position: absolute; top: -50px;} #CSS #memes

  • Going beyond pixels and (r)ems in #CSS – Relative length units based on font. https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-font

  • A highly configurable switch component using modern #CSS techniques. A good amount of config options. #Safari leading the way on this. https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css

  • Interesting: The #CSS Working Group (WG) "resolved to officially work on native custom functions and mixins". https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591 https://css.oddbird.net/sasslike/mixins-functions/

  • Josh W Comeau just published “How to Center a Div: The Ultimate Guide to Centering in #CSS”. https://www.joshwcomeau.com/css/center-a-div/ #frontend

  • Untitled post 58805

    Nice #CSS "Blurry Shimmer Effect" (works in Firefox too!). A step-by-step explanation of how it comes together using a combination of masks, gradients, and backdrop-filter property. https://www.smashingmagazine.com/2024/01/css-blurry-shimmer-effect/?ref=web-design-weekly.com

  • "Web Development Is Getting Too Complex, And It May Be Our Fault" #webdev https://www.smashingmagazine.com/2024/02/web-development-getting-too-complex/ "Are #HTML, #CSS, and a touch of #JavaScript enough to build your website or web application? If so, then stick with those. What I am afraid of is adding complexity for complexity’s sake and inadvertently raising the barrier to entry for…

  • The Most Underused #CSS Media Queries: "hover" and "any-hover" which let you detect if a user is able to hover over elements on your website https://jacobpadilla.com/articles/hover-media-query

  • Untitled post 58772

    .dresser { align-left: -20px;} #CSS #memes

  • Untitled post 58748

    Woot! Yes! Bringing Back Horizontal Rules in Select Elements #WebKit #CSS https://webkit.org/blog/14933/bringing-back-horizontal-rules-in-select-elements/

  • 🧡 these wooden toggle switches. Vintage look in modern web apps. https://codepen.io/nicolasjesenberger/details/mdomqGR #CSS

  • 12 Modern #CSS One-Line Upgrades "…properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience." https://moderncss.dev/12-modern-css-one-line-upgrades/ via @5t3ph

  • Bookmarking: List of websites for "free #HTML templates w/ vanilla #CSS". https://dev.to/luciantartea/10-best-websites-for-free-html-templates-vanilla-css-3gmn

  • Untitled post 58689

    This is potentially cool for #frontend developers. It's a site that allows you to build and customize #CSS only loaders. https://www.loadership.com/ #webdev

  • Fading content using transparent gradient in #CSS https://www.amitmerchant.com/fading-content-using-transparent-gradients-in-css/

  • Nice introduction to the new View Transitions API (although supported mostly by #Chrome and #Edge at this point) #CSS https://12daysofweb.dev/2023/view-transitions/?ref=web-design-weekly.com Both Firefox and Webkit are currently working on their implementation