Saveti – CSS

Using Feature Queries in CSS Jen Simmons shows how to use @supports to see whether or not a particular feature (CSS property or value) is supported in the current browser.  Read more Smooth as Butter: Achieving 60 FPS Animations with CSS José Rosário shares some tips on achieving performant animations in CSS.  Read more From Our Sponsor FullStory See what your users see. Capture everything, and we mean everything (including the full DOM and console logs), about your customer experience with one easy-to-install script.   Try it for free! Articles & Tutorials `font-display` for the Masses Jeremy Wagner digs into a brand new CSS feature, that once it percolates through the browser ecosystem, will be great for performance.  Read more Flexible Typography with CSS Locks Tim Brown shows how to use `CSS locks` when you need specific fluid behavior, contained within certain boundaries.  Read more Writing Efficient CSS In this talk, Joe Reeve gives an introduction to browser implementations of CSS selectors and explains what that means for you.  Watch video Setting up a Living Styleguide in Jekyll Hugo Giraudel looks at how to put together a styleguide of components for your design using Jekyll and the Liquid template engine.  Read more Jobs Simplify Your Job Search with Hired (SF, NYC, London, & 14 more Tech Hubs) With Hired, companies apply to hire you – get salary and equity offers up front from companies like Facebook, Postmates, & Square.  Try Hired Today Tools SVGInjector A fast, caching, dynamic inline SVG DOM injection library.  Check it out image-diff A handy tool that lets you create image differential between two images.  Check it out Inspiration CSS 3D Box with Mock Shadow A simple (but beautiful) CSS animation created by Laurence Archer.  Get inspired Until Next Week If you like this newsletter, please consider supporting us on Patreon. Thank you! Happy coding,Zoran Jambor

Locally Scoped CSS Variables: What, How, and Why Una Kravets explains how leveraging CSS Variable scope can improve the size, specificity, and semantics of your stylesheets. Read more Celebrate the Web by Using Another Browser than Google’s Chrome David Heinemeier Hansson on why you should try to incorporate a browser other than Chrome into your routine.  Read more From Our Sponsor Who attends An Event Apart? Front-end coders. UX, UI, & interaction designers. Content strategists and project managers. Site owners, marketers, and managers. They all attend AEA. Maybe it’s because no other conference delivers the education, inspiration, and community spirit of this uniquely comprehensive web event.  Join us at the AEA nearest you! Articles & Tutorials Thoughts on Self-Documenting CSS Keith J. Grant shares his thoughts on self-documenting CSS.  Read more Fun with Viewport Units Miriam Suzanne demonstrates a couple of creative use-cases for viewport units.  Read more How the minmax() Function Works Ire Aderinokun explains how the minmax() function of CSS Grid works.  Read more An Intro to Web Components with Otters Monica Dinculescu, with a little help from otters, will tell you what Web Components are and teach you how to use them.  Read more 70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization Jens Oliver Meiert looks at the CSS of top 200 content websites and draws some interesting conclusions. (We repeat ourselves too much. ) Read more Promoted Link Visuals are processed 60K times faster in the brain than text. Find the perfect visuals for your project at iStock. Easily search millions of authentic images and video clips at iStock. com and ensure your project truly stands out. Until June 18th you can save 15% with code C38PC46N. Make an impact without breaking the bank.  Join Now Tools Tad Tad is a free (MIT Licensed) desktop application for viewing and analyzing tabular data. Check it out Better Less Cross-compatible syntax highlighting for Less. The package currently works with Sublime Text, Atom, Textmate 2, and Visual Studio Code. Check it out Inspiration Flexbox Zombies Flexbox is incredibly powerful, but also very hard to master. That’s why Dave Geddes created a fun course that will help you learn the ins and outs of Flexbox. (The course requires registration, but it’s free and well worth it. ) Get inspired Until Next Week Thanks for reading! If you find the content valuable, please consider supporting the newsletter on Patreon. Happy coding,Zoran Jambor

 CSS Isn’t Black Magic    Aimee Knight takes a deep dive into browser internals to see how our styles are parsed and rendered.  Read more   How to Create a Pattern Library and Why You Should Bother   Paul Boag explains how can a pattern library help you ensure that your websites and apps are consistent and easy to maintain.  Read more     How CSS Developers Can Pay Off Student Loans Faster   Did you take out student loans to become a CSS dev? Student Loan Hero has free blog posts to help you pay off your student loans — faster and easier. Trusted by 1 million monthly readers.  Read Recent Blog Post     Let’s Talk About Speech CSS   Eric Bailey explains why you should learn what CSS Speech Module can and can’t do, and how it can help you create robust interfaces for all users, regardless of their ability or circumstance.  Read more   Performance Markers   Surma demonstrates how to effectively measure performance in your web apps.  Watch video   The Accessibility Cheatsheet   Ire Aderinokun highlights some practical examples from the very extensive WCAG guidelines of what we can do to make our websites more accessible.  Read more   CSS Architecture with ReactJS   Douglas Gimli explains how to apply CSS architecture to projects using ReactJS.  Read more   Reducing CSS Bundle Size 70% by Cutting the Class Names and Using Scope Isolation   Gajus Kuizinas shows how can you rename CSS class names at the compilation time in React using Webpack.  Read more   TOOLS   DomFlags   DomFlags is a DevTools extension that lets you create bookmarks to deeply nested DOM elements.  Check it out   CSS Database   CSS Database is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.  Check it out   INSPIRATION   CSS-Only Image Slider Using SVG Patterns       Damián Muti created an experimental image slider that showcases the power of SVG patterns.  Get inspired