css

  • "#CSS based state management" Wild look on how CSS custom properties can be used to store state utilizing the way inheritance works in CSS. https://www.mayank.co/blog/css-for-js-state #frontend

  • Untitled post 58557

    Developer: "I didn't set a max-height to the element in #CSS. I don't think anyone will notice." Me: πŸ€”

  • Finding "the best way" to create animated gradient borders in #CSS https://bejamas.io/blog/css-animated-gradient-border/?ref=web-design-weekly.com Sadly this doesn't seem to currently work in #Firefox for me.

  • If you work in #frontend coding and want some reading material over any upcoming break about some things missed in 2023 this might be nice: "Friday Front-End’s Top Links of 2023" https://spaceninja.com/blog/2023/ff-top-ten-2023/ #JavaScript #CSS #HTML

  • "How we reduced #CSS size and improved performance across GOV.UK" https://gds.blog.gov.uk/2023/12/15/how-we-reduced-css-size-and-improved-performance-across-gov-uk/ "We removed 32 stylesheets across 7 applications and more than 600 lines of CSS by removing unused CSS – styles that are no longer used anywhere" #frontend

  • An interactive guide to making #SVG spinners. https://fffuel.co/svg-spinner/ #CSS #frontend

  • Nice bit of a #CSS roundup here. "More Surprising Powers of CSS" (Via @chriscoyier) https://blog.codepen.io/2023/12/11/chris-corner-more-surprising-powers-of-css/

  • Using date-based #CSS to make old web pages *look* old https://shkspr.mobi/blog/2023/12/using-date-based-css-to-make-old-web-pages-look-old/ via @Edent

  • "#CSS Wrapped: 2023" Summary of what got introduced, what got popular enough to use, and the big shifts. https://developer.chrome.com/blog/css-wrapped-2023 "Now, every modern browser supports container queries, subgrid, the :has() selector, and a whole plethora of new color spaces and functions." #frontend

  • Untitled post 58492

    A nice looking #SVG Tutorial, learning step by step with a fun interface. #css #frontend https://svg-tutorial.com/

  • Making "noisy" #SVG or adding noise texture with only code. #frontend #css https://daniel.do/article/making-noisy-svgs/ Pretty cool. Expecting @chriscoyier to mention this in a future Shoptalk Show. πŸ˜‰ See also: https://css-tricks.com/grainy-gradients/

  • Hide and Debug Empty Elements with #CSS via @michelle. https://css-irl.info/hide-and-debug-empty-elements-with-css/ "use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content)." #frontend

  • dompdf ( dompdf/dompdf )

    HTML to PDF converter for PHP Created by dompdf on Nov 12, 2012.

  • "You don't need #JavaScript for that." https://www.htmhell.dev/adventcalendar/2023/2/ "Choose the least powerful language suitable for a given purpose… On the web this means preferring HTML over #CSS, and then CSS over JS."

  • Thought by 2023 I'd be forced away from foundations of HTML #PHP #JavaScript #CSS (and #WordPress). A partial list of "hot and need to learn to survive" things over the past 20 years that didn't derail me: – Flash/ActionScript– ColdFusion– Ruby on Rails– (Countless JS "frameworks" that mostly don't exist today)– Go– JAMSTACK– React– AMP–…

  • The "isolation" property is the "#CSS property you didn't know you needed". I don't remember reading / learning about this before. πŸ€” https://dev.to/francescovetere/the-css-property-you-didnt-know-you-needed-3fk0 It basically provides more control over how elements interact with the rest of the document, and it is often an elegant solution for z-index issues.

  • The `hanging-punctuation property` in #CSS via @chriscoyier https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/

  • "Animotion" is a web app that creates #CSS animations visually with no code by dragging, resizing, rotating, clipping… …includes keyframes editor, animations and 29 built-in easings. https://cssanimotion.pages.dev/ #developers #frontend

  • Getting started with #CSS container queries https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/

  • This is a cool guide. An Interactive Guide to #CSS Grid https://www.joshwcomeau.com/css/interactive-guide-to-grid/

  • Changing Colors in an #SVG Element Using #CSS and #JavaScript https://www.kirupa.com/web/changing_colors_svg_css_javascript.htm

  • Bubble Sort…in PURE #CSS? 😱 https://dev.to/grahamthedev/bubble-sortin-pure-css-no-js-3bb1

  • Untitled post 58321

    Nice #CSS feature for Safari and Chrome (Firefox?). Select element now with horizontal rules! https://developer.chrome.com/en/blog/hr-in-select/?ref=web-design-weekly.com

  • "How Bear does analytics with #CSS" https://herman.bearblog.dev/how-bear-does-analytics-with-css/

  • Untitled post 58282

    For #CSS nerds: Styling External Links with Attribute Selectors https://css-irl.info/styling-external-links-with-attribute-selectors/?ref=web-design-weekly.com

  • Nice for #CSS folks. Learn how to use @scope to select elements only within a limited subtree of your DOM. https://developer.chrome.com/articles/at-scope/?ref=web-design-weekly.com via @bramus

  • An Anchored Navbar Solution #CSS via @Meyerweb https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/

  • Be nice when this standard comes: Textareas with auto-increasing height using #CSS https://www.amitmerchant.com/textarea-auto-increase-height/?ref=web-design-weekly.com

  • The Ultimate Low-Quality Image Placeholder Technique #CSS https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

  • TIL about the :empty property in #CSS. I love how i can keep learning about new things in CSS, even the ones I think I should have stumbled on already (or maybe I did and I didn't remember).