OR 

Render Snarky Comments in Comic Sans

Hilarious idea by Zach Leatherman. To test if a comment is "snarky" or not, there is an npm package up to the task. On this site, we generally just delete snarky comments, but I still run a WordPress plugin that allows me to "feature" or "bury" comments. It‘s old but it still works fine in the latest WordPress. We use the bury functionality for comments that aren‘t rude, snarky, or spam, but also don‘t add much to the post. Re

favicon of http://css-tricks.com

Every Layout

Every Layout is a new work-in-progress website and book by Heydon Pickering and Andy Bell that explains how to make common layout patterns with CSS. They describe a lot of the issues when it comes to the design of these layouts, such as responsive problems and making sure we all write maintainable code, and then they‘ve provided a handy generator at the end of each article to create our own little frameworks for dealing with these things.

favicon of http://css-tricks.com

Drop caps & design systems

Ethan Marcotte has written up his process for how to make drop caps accessible for screen readers and browsers alike. All of that is very interesting and I‘m sure I‘ll use a technique like this in the near future, but the part that made me hop out of my seat is where Ethan notes his experience with design systems at Vox: Since rolling out our new and improved drop caps, we‘ve continued to iterate on them. (Including fixing a nu

favicon of http://css-tricks.com

How to Increase Your Page Size by 1,500% with webpack and Vue

What we don‘t have are enough articles showing you how to increase your page size. In fact, the only article I could find was this one from the Geek Squad which ended up being about making the font size bigger. This is a good start, but I think we can do better. The post How to Increase Your Page Size by 1,500% with webpack and Vue appeared first on CSS-Tricks.

favicon of http://css-tricks.com

Building a Conference Schedule with CSS Grid

It‘s hard to beat the feeling of finding a perfect use for a new technology. You can read every handy primer under the sun and ooh-and-ahh at flashy demos, but the first time you use it on your own project that‘s when things really click. I gained a new appreciation for CSS Grid when building a flexible layout for a conference schedule. The needs of the project aligned perfectly with grid‘s strengths: a two-dimensional (vertical

favicon of http://css-tricks.com

If you can build a site with WordPress.com, you should build your site on WordPress.com.

That‘s what I like to tell people. I‘ve seen too many websites die off, often damaging the company along the way because the technical debt of hosting and maintaining the website is too much in the long term. For a few examples, there is the domain name itself to handle and the tricky DNS settings to go along with it. There is choosing and setting up web hosting, which often requires more long-term maintenance than many folks would li

favicon of http://css-tricks.com

How to Section Your HTML

It has been brought to our attention in the comments that some of the techniques used in this article result in a poor user experience for screen reader users. Daniel has updated the post accordingly with alternate markup in several of the examples and demos. We‘ll continue to make edits to address other things that others have noticed. Thanks for being such an awesome community where we can all learn and grow together. The sectioning eleme

favicon of http://css-tricks.com

Weekly Platform News: Mozilla‘s AV1 Encoder, Samsung One UI CSS, DOM Matches Method

In this week‘s weekly roundup, Vimeo and Mozilla partner up on a video encoding format, how to bind instructions to to form fields using aria labels, the DOM has a matching function, and Samsung is working on its own CSS library. The post Weekly Platform News: Mozilla‘s AV1 Encoder, Samsung One UI CSS, DOM Matches Method appeared first on CSS-Tricks.

favicon of http://css-tricks.com

Reduced Motion Picture Technique, Take Two

Did you see that neat technique for using the picture element with source media="" to serve an animated image (or not) based on a prefers-reduced-motion media query? After we shared that in our newsletter, we got an interesting reply from Michael Gale: What about folks who love their animated GIFs, but just didn‘t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI? I thought Read art

favicon of http://css-tricks.com

Hello Subgrid!

Rachel Andrew‘s talk at CSSconf is wonderful because it digs into one of the most exciting changes that‘s coming soon to a browser near you: subgrid! That‘s a change to the CSS Grid spec that allows for much greater flexibility for our visual designs. Subgrid allows us to set one grid on an entire page and let child elements use that very same grid tracks. The reason why I‘m very excited is because this solves one of the m

favicon of http://css-tricks.com

So, you think you‘ve got project management nailed down

Who needs a project manager? You‘re an organized person who can keep track of your own work, right? Wrong. Well, wrong if you‘re part of a team. The thing about being self-organized is that it‘s related to project management but not synonymous with it. Case in point: what happens if your project relies on someone else‘s involvement? Sure you‘re organized, but can you always say the same about your co-workers? Chances

favicon of http://css-tricks.com

Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin

WordPress released their anticipated over to the post editor, nicknamed Gutenberg, which is also referred to as the block editor. It transforms a WordPress post into a collection of blocks that you can add, edit, remove and re-order in the layout. Before the official release, Gutenberg was available as a plugin and, during that time, I was interested in learning how to create custom blocks for the editor. I was able to learn a lot about Gutenberg

favicon of http://css-tricks.com

Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon

In this week‘s roundup, Chrome is adding an install option for Progressive Web Apps, Opera GX comes to Windows, the ECMAScript proposals get an update, and CSS Scroll Snap is coming to a Firefox browser near you. The post Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon appeared first on CSS-Tricks.

favicon of http://css-tricks.com

Components, yo.

I see VuePress just went 1.0. Explained simply, it‘s a static site generator based on Vue. But of course, you work in Vue, which means you work in components. All the modern JavaScript frameworks are component-based. Even when they disagree with each other about specific things (like how Svelte requires compilation), they all seem to agree on the model of working in components. React is all components. A popular static site generator for R

favicon of http://css-tricks.com