All tips and tricks, by category.
Switch to the chronological archive.
HTML & CSS
- Intuitive Box Sizing
The default box model in CSS is a bit strange. Learn how to fix it.
- Easy Layout Debugging with Outlines
Quickly see hidden dimensions (without messing with your layout) using a bit of CSS.
- Set a Character Set
Avoid garbled content and security issues by adding a single element to your pages.
- Smart Line Height
Find out why using a length or percentage value for your line heights is a bad idea.
- Watch Out for Trailing Commas in CSS
How a common best practice in many programming languages can wreak havoc in CSS.
- HTML Terminology
Ever wonder what the difference is between a tag and an element? Or what, exactly, an attribute is? If so, this is the tip for you!
- Specify Automatic Form Functionality
Find out how to take your forms from frustrating to fabulous with four simple attributes.
- Avoid Comparison Surprises
- Beware of
Why client-side code should never be trusted for anything critical.
- Embrace Curly Braces
Curly braces are technically optional in some cases, but omitting them is not a good idea.
- Tips for Naming Variables
Not too short, not too long, and keep your target audience in mind.
- Naming Functions & Keeping Them Simple
A simple method to both name functions well and keep your code manageable.
- Be Careful with Code Formatting
Most of the time the way you format your code doesn't matter. Most of the time.
UX & Accessibility
- Your HTML Element Needs a Language Attribute
Adding a single attribute helps with both automatic translation and accessibility.
- Text Readability Basics
A comfortable reading experience is key to engaging with your audience.
- Write Great Alternative Text for Images
How to write great descriptions for your images to improve accessibility, user experience, and SEO.
- Use Caution when Changing Default Outline Styles
Why removing default outline styles without replacing them with something else is a bad idea.
- Use What You Build
Don't rely on assumptions; take the time to put your work through its paces.
- You Can’t Hover on a Touchscreen
:hoverpseudo-class enables a wealth of functionality, but if you use it for anything critical you're excluding a huge number of people.
- Make Small MP3s that Sound Great
Learn what the MP3 encoding options mean and the settings I recommend to strike a good balance between audio quality and file size.
Resources & Links
- The Best Web Docs: MDN
My go-to reference for fundamental web technologies.
- Can I Use?
What browsers support what?
- Unsplash: A Myriad of Free Photos
An incredible resource for high-resolution images.
- Down for Everyone Or Just Me?
No need to ask a human, there's a great free service that can answer this question for you!
- Let’s Encrypt
Find out how to enable HTTPS (SSL/TLS) on your website for free. No catch, no downsides.
Outstanding accessibility tools and resources.
- You Might Not Need jQuery
Browsing the Web
- Log Out Without Logging Out
A legitimate reason to use private browsing while you're working.
- Restore Recently Closed Web Pages
Didn't mean to close that tab? Here's how to get it back!
- Supercharge Your Web Browser’s Built-In Search
Take your web browser's built-in search to the next level.
- Quickly Cycle Through Browser Tabs
Learn how to quickly navigate the tabs in your web browser using your keyboard.
- Quickly Bypass Your Web Browser’s Cache
Seeing an out-of-date version of your website? Here's the quick fix.
- Change the Size of Text on Any Web Page
How to quickly make any text on the web easier to read.
- Understanding Private Browsing
Private browsing may not be as private as you think.
- Design is How it Works
This perspective on design has acted as a guiding light for me for years.
- Great Design Seems Obvious
How to avoid a common pitfall during the design process.
Why good enough really is good enough.
- Only Break Rules You Understand
Rules are made to be broken, but make sure you're truly improving things before you do.
- White Space is Your Friend
Empty space is filled with vitally important qualities.
- Empathy is Key to Great Design
To craft a great solution you have to understand the people experiencing the problem.
- Select the Right Image Format
Find out how to pick the right image format for the job.
- Link Wisely
The web's greatest superpower is the hyperlink. Learn how to make your links the best they can be.
- Write to a Single Person
Are you speaking to your audience in the best way possible?
- Write Concisely
Why keeping your copy short and to the point is worth the effort.
- Don’t Revise as You Write
Find out why it's critical to keep writing and editing separate.
- Find a Proofreader
Improve your writing with the critical eye of another person.
- Powerfully Potent Proofreading
A simple strategy to increase your effectiveness when editing and proofing your own work.
- Recognize & Avoid Passive Voice
Improve the clarity and flow of your writing by avoiding passive voice.