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.
- Don’t Use Inline Styles
Find out why inline styles are bad news.
- CSS Terminology
Wondering what a selector is in CSS? What about a rule, or a declaration? Find out in this tip!
- HTML for Keyboard Shortcuts
Want to talk about keyboard shortcuts or other input on the web? Wow, have I got the element for you!
- How to Easily Style the Current Navigation Element
This trick makes it easy to give the current section's navigation element a unique appearance, and it scales easily as your site grows.
- How to Easily Scale Text Dynamically with CSS
Ever wish your text could scale with the size of the viewport?
- 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.
- Access Object Properties with Variables
You can access object property values using any expression that evaluates to the name of the property you're after.
- Default Values for Arguments
Assigning default values to your function arguments may be simpler than you think.
- How to Avoid Confusing Code Hoisting Surprises
- Don’t Write Magic, Hard-to-Understand Code
Neat code tricks can be tempting to use, but today's tip explains why you should put clarity first.
- Computers: Almost Always Great at Math
Find out why 0.1 + 0.2 doesn't always equal 0.3.
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.
- Users Can’t Have an Experience Until You Ship
Wherein I provide a simple way to determine when it's time to release what you're working on.
- Don’t Get Overwhelmed
Your website doesn't need to be perfect.
- Simplify Your Forms
The easier and less intimidating your forms are the better they'll work for both you and your visitors.
- Accessible Can Be Beautiful
Making an accessible site does not mean you have to make a boring site.
- Make Sure Your Text is Legible
Can everyone read what you have to say comfortably?
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
- Stack Overflow
The go-to source for programming questions and answers.
- The Wayback Machine
Would you like to go back in time today?
How does a more powerful, less creepy search engine sound?
- Grammar Girl
English is a complicated language; even the best writers have questions sometimes. Luckily there's a great place to find answers.
Looking for a great emoji library you can use pretty much anywhere? Look no further!
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.
- Remove Annoying Fixed Elements
A quick and easy way to make more room for the content you care about.
- Search for Text on Websites (Plus a Bonus Meta Tip!)
Quickly search for any text on a web page, and find out why not writing this tip would have been a huge mistake.
- How to Easily Open a Link in a New Tab
Shopping? Find something you want to read later? Doing research? Find out how to make these tasks easier.
- A Quick Fix for Unbalanced Stereo Audio
Ever come across some audio or video online where all the sound is coming out of only one speaker? Annoying, right? Here's the solution.
- Quickly Focus the URL/Search Bar
Web browsers offer some really useful keyboard shortcuts. Here's one of the lesser-known, yet extremely useful ones.
- 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.
- You Can’t Please Everyone
Some people aren't going to like the things you make, and that's okay.
- Great Design Serves the Audience
Always remember who you're designing for.
- Failure is a Natural Part of the Process
Find out why embracing failure is critical to your success.
- Great Design Comes from Deep Understanding
Intimate knowledge of the problem domain is required to craft an incredible solution.
- 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.
- Delete That
Learn about a word
thatyou can remove from many of your sentences.
- What Does Your Audience Want from Your Copy?
Context is key when it comes to writing great website copy.
- Don’t Punish Yourself for Writing Badly
Writing might seem simple, but it's a very difficult skill to master. Don't beat yourself up if you're still improving.
- Don’t Wait for Inspiration to Strike
Motivation and momentum are the result of, not the catalyst for, hard work.