Category Archive
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?
JavaScript
- Avoid Comparison Surprises
JavaScript's automatic type conversion can produce some strange results. Thankfully it's easy to avoid. - Beware of
typeof
An examination of some unusual JavaScript behavior and how to (mostly) work around it. - Don’t Trust Client-Side JavaScript
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
Code hoisting in JavaScript can cause some strange and unexpected behavior if you don't know what's going on behind the scenes. - 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
The: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. - WebAIM
Outstanding accessibility tools and resources. - You Might Not Need jQuery
A useful repository of JavaScript snippets, even if you've never used jQuery. - Stack Overflow
The go-to source for programming questions and answers. - The Wayback Machine
Would you like to go back in time today? - DuckDuckGo
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. - Twemoji
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
- 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. - Perfection
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.
Writing
- 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 wordthatyou 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.