OR 

Breaking down CSS Box Shadow vs. Drop Shadow

Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs. Not too long after box-shadow was introduced, a working draft for CSS Filters surfaced and, with it, a Breakin

favicon of http://css-tricks.com

A Bit on Buttons

Here‘s three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme of the button element: never use them outside of forms unless injected with JavaScript. A Bit on Buttons is a post from CSS-Tricks

favicon of http://css-tricks.com

MDN Product Advisory Board

We all know and love MDN for already being the best documentation for web features out there. It looks like it‘s poised to get even better with Google and Microsoft both joining a new board. Mozilla‘s vision for the MDN Product Advisory Board is to build collaboration that helps the MDN community collectively maintain MDN as the most comprehensive, complete, and trusted reference documenting the most important aspects of modern browse

favicon of http://css-tricks.com

5 Tips for Starting a Front-End Refactor

For the last two weeks, I‘ve been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven‘t been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue? Well, 5 Tips for Starting a F

favicon of http://css-tricks.com

Sponsor: Media Temple

(This is a sponsored post.) Media Temple is my web host here at CSS-Tricks. I still remember what it was like buying my first web hosting, pointing a domain name to it, FTPing into that server, and having the files I put there appear in the web browser. Powerful stuff, kids. Watch out or you might try to turn it into a career! I‘ve upgraded my server a few times since then, but it‘s still a pretty standard grade Sponsor: Media Templ

favicon of http://css-tricks.com

Let There Be Peace on CSS

Cristiano Rastelli: In the last few months there‘s been a growing friction between those who see CSS as an untouchable layer in the ‘separation of concerns‘ paradigm, and those who have simply ignored this golden rule and have found different ways to style the UI, typically applying CSS styles via JavaScript. He does a great job of framing the "problem", exploring the history, and pointing to things that make this seem rather wa

favicon of http://css-tricks.com

CSS-Tricks Chronicle XXXII

Hey y‘all! Time for a quick Chronicle post where I get to touch on and link up some of the happenings around the site that I haven‘t gotten to elsewhere. Technologically around here, there have been a few small-but-interesting changes. Site search is and has been powered by Algolia the last few months. I started up writing some thoughts about that here, and it got long enough I figured I‘d crack it off into it‘s own blo

favicon of http://css-tricks.com

Writing Smarter Animation Code

If you‘ve ever coded an animation that‘s longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish. In these videos, I‘ll show you the techniques that the pros use keep their code clean, manageable, and easy to revise. Scrip

favicon of http://css-tricks.com

A Look Back at the History of CSS

When you think of HTML and CSS, you probably imagine them as a package deal. But for years after Tim Berners-Lee first created the World Wide Web in 1989, there was no such thing as CSS. The original plan for the web offered no way to style a website at all. There‘s a now-infamous post buried in the archives of the WWW mailing list. It was written by Marc Andreessen in 1994, who would go on to co-create both the A Look Back at the Histor

favicon of http://css-tricks.com

On-Site Search

CSS-Tricks is a WordPress site. WordPress has a built-in search feature, but it isn‘t tremendously useful. I don‘t blame it, really. Search is a product onto itself and WordPress is a CMS company, not a search company. You know how you can make a really powerful search engine for your site? Here you go: form action="https://google.com/search" target="_blank" type="GET" input type="search" name="q" input type="submit" value="sear

favicon of http://css-tricks.com

Wufoo

(This is a sponsored post.) When asked "Why Wufoo?" they say: Because you‘re busy and want your form up and running yesterday. Wufoo is a form builder that not only makes it fast and easy to build a form so you really can get it up and running in just minutes, but also has all the power you need. What makes forms hard are things like preventing spam, adding logic, making them mobile friendly, and integrating what you collect Wufoo is a po

favicon of http://css-tricks.com

You can get pretty far in making a slider with just HTML and CSS

A "slider", as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to You can get pretty far in making a slider with jus

favicon of http://css-tricks.com

I haven‘t experienced imposter syndrome, and maybe you haven‘t either

In recent years it‘s become trendy to discuss how we all apparently suffer from this imposter syndrome - an inability to internalize one‘s accomplishments and a persistent fear of being exposed as a ‘fraud‘. I take two issues with this: it minimizes the impact that this experience has on people that really do suffer from it. we‘re labelling what should be considered positive personality traits - humility, an accepta

favicon of http://css-tricks.com

Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)

It sure is nice having a whole codebase that is perfectly compliant to a set of code style guidelines. All the files use the same indentation, the same quote style, the same spacing and line-break rules, heck, tiny things like the way zero‘s in values are handled and how keyframes are named. It seems like a tall order, but these days, it‘s easier than ever. It seems to me it‘s become a two-tool game: A tool to automatically fix

favicon of http://css-tricks.com

Exploring Data with Serverless and Vue: Filtering and Using the Data

In this second article of this tutorial, we‘ll take the data we got from our serverless function and use Vue and Vuex to disseminate the data, update our table, and modify the data to use in our WebGL globe. This article assumes some base knowledge of Vue. By far the coolest/most useful thing we‘ll address in this article is the use of the computed properties in Vue.js to create the performant filtering of the table. Read on! Article

favicon of http://css-tricks.com

The Art of Comments

I believe commenting code is important. Most of all, I believe commenting is misunderstood. I‘m tentative to write this article at all. I am not a commenting expert (if there is such a thing) and have definitely written code that was poorly commented, not commented at all, and have written comments that are superfluous. I tweeted out the other day that "I hear conflicting opinions on whether or not you should write comments. But I get than

favicon of http://css-tricks.com

Getting Nowhere on Job Titles

Last week on ShopTalk, Dave and I spoke with Mandy Michael and Lara Schenck. Mandy had just written the intentionally provocative "Is there any value in people who cannot write JavaScript?" which guided our conversation. Lara is deeply interested in this subject as well, as someone who is a job seeking web worker, but places herself on the spectrum as a non-unicorn. Part of that discussion was about job titles. If there was a ubiquitously accep

favicon of http://css-tricks.com

Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions

I work on a large team with amazing people like Simona Cotin, John Papa, Jessie Frazelle, Burke Holland, and Paige Bailey. We all speak a lot, as it‘s part of a developer advocate‘s job, and we‘re also frequently asked where we‘ll be speaking. For the most part, we each manage our own sites where we list all of this speaking, but that‘s not a very good experience for people trying to explore, so I made a demo that ma

favicon of http://css-tricks.com

Mtis

Kelly Sutton writes about programming, working with teams and the relationship to the Greek word Mtis: Mtis is typically translated into English as ‘cunning‘ or ‘cunning intelligence.‘ While not wrong, this translation fails to do justice to the range of knowledge and skills represented by mtis. Broadly understood, mtis represents a wide array of practical skills and acquired intelligence in responding to a constantly cha

favicon of http://css-tricks.com

Building a Progress Ring, Quickly

On some particularly heavy sites, the user needs to see a visual cue temporarily to indicate that resources and assets are still loading before they taking in a finished site. There are different kinds of approaches to solving for this kind of UX, from spinners to skeleton screens. If we are using an out-of-the-box solution that provides us the current progress, like preloader package by Jam3 does, building a loading indicator becomes easier. For

favicon of http://css-tricks.com