Daily Tips & Tricks for Web Enthusiasts

Get new tips and tricks in your inbox every week!

You can also follow @CoreAssistance on Twitter (where I tweet about each day's tip), subscribe to the RSS feed, browse the archive, or start with the first tip.

Supercharge Your Web Browser’s Built-In Search

Browsing the Web •

You’re really going to love this one.

  1. Open your web browser’s preferences.
  2. Change your default search engine to DuckDuckGo.
  3. Enjoy incredibly versatile search right from your browser’s address/search field by using DuckDuckGo’s bangs.

What the heck is a DuckDuckGo bang, you ask? It’s a bit of text you add to your search that makes magic happen. Let me explain!

If you’ve followed the steps above, and DuckDuckGo is now your default search engine, you can easily search the web for pants by typing the following into your address/search bar:

pants

That would take you to the normal DuckDuckGo search for pants.

But what if you wanted to search Amazon for pants instead? Just type this:

pants !a

That !a at the end is a DuckDuckGo bang, and including it in your search will take you directly to a search for pants on Amazon’s site!

To be clear, this will not show you results from Amazon on DuckDuckGo, or inside a DuckDuckGo wrapper, or any other nonsense. No, this will take you directly to Amazon’s site and search for pants there, directly from your browser’s address/search bar, all in a single step.

Cool, right? There’s more!

Maybe now it’s time to check eBay for pants:

pants !e

Want to learn more about pants in general on Wikipedia?

pants !w

Are the DuckDuckGo search results not sufficient to quench your thirst for pants knowledge? Try Google instead:

pants !g

Or maybe you want to see some images of pants from Google Images?

pants !gi

Wondering what people on Twitter are saying about pants?

pants !tw

The list goes on. There are currently almost 10,000 bangs to choose from, all easily searchable, so finding and memorizing your favorites is a piece of cake.

And, as icing on said cake, DuckDuckGo is a great search engine that respects your privacy and doesn’t track you.

Your web browser’s built in search just got better by an order of magnitude. Enjoy!

Unsplash: A Myriad of Free Photos

Resources & Links •

Unsplash describes itself thusly:

Beautiful, free photos. Gifted by the world’s most generous community of photographers. 🎁

And that’s exactly what it is: a massive (currently over 300,000) collection of completely free, high resolution images you can use for literally anything:

All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.

If you’re curious about the history and motivation behind Unsplash, check out their manifesto. It’s an interesting read.

While its primarily a great source of images for projects, I also find Unsplash to be an invaluable resource for other reasons: Browsing the images is a great source of inspiration, many of the photos make for some stunning wallpaper, and you can extract some great color palettes from the collection.

Write Great Alternative Text for Images

UX & Accessibility •

The <img> element has an alt attribute that should be populated with text describing that image. The content of an image’s alt attribute is used in various situations:

  • Search engines can’t see images the same way people do, so they’re going to look at the content of the alt attribute instead.
  • When people have their browsers configured to not load images (which is more people than you might think; many have restrictive data and/or bandwidth limits).
  • Non graphical browsers, including screen readers, will use the text in the alt attribute in place of the image.
  • If the image fails to load, or the image format is not supported by the browser, the alternative text will be displayed instead.

If you find yourself wondering what you should put in an alt attribute ask yourself this question: If you were describing this website to a friend over the phone, and they had no way to view it, how would you describe this image? The answer is what you put for the value of that image’s alt attribute.

Some image elements are not integral to the content of the page, like decorative images. If you wouldn’t mention a particular image to your friend on the phone that <img> element should still have an alt attribute, but its value should be an empty string, like this:

<img alt="" src="...">

An alt attribute with an empty string indicates that non-visual browsers, like screen readers, can simply ignore the image.

For images that are a key part of the content, but have no appropriate textual description, the alt attribute should be omitted entirely (but this is almost never the case).

Don’t Trust Client-Side JavaScript

JavaScript •

It’s important to remember that the JavaScript embeded or attached to your website is going to be run inside a web browser you don’t control, which is running on a computer you don’t control. Your code can be disabled or altered by various browser extensions, configurations, and developer tools.

Most of the time your code will run just fine, but you can’t count on it. Make sure your site works well even if JavaScript is disabled, and don’t use client-side JavaScript for anything critical.

The most common mistake made with trusting client-side JavaScript is relying on it to validate form input. It’s a great idea to give people a better experience by letting them know about issues before they even submit a form using JavaScript, but you have to remember that JavaScript may never even be executed. Data validation and sanitation must be done on the server side regardless.

Note that this tip only applies to client-side JavaScript running in the web browsers of your visitors, not JavaScript (or other code) running on your server.

Set a Character Set

HTML & CSS •

It’s important to define a character set for your HTML pages. The character set tells the web browser how the characters (letters, numbers, punctuation, etc.) are encoded, and doing so is a bigger deal than you might think.

The most common character set issue is special characters (including emoji) and other content not showing up properly. That’s annoying, but it gets worse. An incorrect or missing character set can actually be a significant security issue that opens the door to cross-site scripting attacks.

The good news is that defining a character set is easy. You just need to add a single <meta> element with a charset attribute as the first thing in your page’s <head>, like this:

<meta charset="UTF-8">

There are a few things you need to pay attention to when setting your character set:

  • The UTF-8 character set is highly recommended for pretty much all use cases these days.
  • Make sure the character set you define in your <meta> element matches the character encoding of the actual source files you’re using. You can usually select the character encoding in the preferences of your text editor, or when saving your files.
  • Make sure your character set <meta> element is the first thing in your <head>, as some web browsers will only look at the first 1024 bytes of a file before choosing a character encoding for the entire page.
  • Note that if the web server serving your page sets a Content-Type header, the character set defined in that header will override your <meta> element (but that doesn’t mean you shouldn’t set one in your HTML anyway).

Write to a Single Person

Writing •

If you want to make your copy more engaging, avoid writing as if you were speaking to a large group. Instead, write to a single, imaginary person who represents the rough average of your target audience.

Writing to a single person can have a huge impact, and strengthens your connection to your readers. Take this sentence, for example:

Core Assistance helps people share and create things on the web.

That is vague and disconnected. It refers to some nebulous group of “people” that you, the reader, may or may not be a part of. The phrasing also distances the author from the reader; it’s not me speaking to you, it’s just a general statement with no clear audience.

Now compare the example above to this:

Core Assistance is here to help you share and create things on the web.

Not a lot of those words changed, but the difference is profound. The gap between the author and reader has been closed. The relationship is now clear and comfortable. The purpose is clear. You, the reader, are clearly who I’m talking to. You are the one I want to help. It’s clear you’re in the right place.

Again, imagine that single individual that represents your target audience. Bring them into sharp focus in your mind. Visualize them sitting in front of you. What do you want to tell them? What are the words that would come out of your mouth?

Write that down.

Great Design Seems Obvious

Design •

One of the most difficult things about great design is recognizing it once you achieve it.

Something that is designed well will often appear simple and obvious, which can be counterintuitive when you’re the one doing the designing. You pour a huge amount of time and effort into creating something only to have it all culminate in something that other people would look at and say, “Oh, yeah, of course.” It can be demoralizing and distressing. Worst of all, it can make it seem like you’re not done yet.

One of the worst mistakes a designer can make is deciding that something seems too simple or too obvious, and then making it worse by trying to fix something that isn’t broken. The best design is often the design that people don’t notice.

If you find yourself working on something and you reach a point where it’s simple, functional, and intuitive you should probably stop right there. Great design isn’t about showcasing the work you put in, it’s about being the best solution to the problem you originally set out to solve.