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.

Quickly Focus the URL/Search Bar

Browsing the Web •

One of the best, lesser-known keyboard shortcuts web browsers offer is Command + L (Mac/iOS) or Control + L (Windows/Linux). This keyboard shortcut will immediately bring focus to the location bar and select whatever’s there.

With this keyboard shortcut you can make quick work of many common tasks. Here are some examples for Mac and iOS (to use these on Windows or Linux just use the Control key instead of Command unless otherwise noted):

  • Hit Command + L followed by Command + C to copy the current search or URL.
  • Hit Command + L and immediately start typing to replace whatever’s in the location bar.
  • Hit Command + L and then the left or right arrow keys to go to the beginning or end of whatever’s in the location bar.

Twemoji

Resources & Links •

Twemoji bills itself thusly:

A simple library that provides standard Unicode emoji support across all platforms.

Twemoji includes raster and vector versions of every emoji, as well as useful JavaScript libraries that make using them in your project a breeze. The icing on the cake is the liberal licensing, meaning you can use Twemoji even in commercial projects.

Make Sure Your Text is Legible

UX & Accessibility •

Keep contrast in mind when styling your text. Not everyone has perfect vision, and as we age our eyes take in less and less light. Light text on light backgrounds, dark text on dark backgrounds, and any text against a visually-cluttered background will be hard or impossible for many people to read.

When styling text you can use WebAIM’s Color Contrast Checker to make sure your text can easily be read by everyone.

Computers: Almost Always Great at Math

JavaScript •

One of the reasons I love computers so much is because I hate math. Math and I do not get along, so having a magic device that can do most any math problem I throw at it instantly and accurately has a great deal of appeal for me.

Except, well, sometimes that accuracy piece isn’t all it’s cracked up to be.

Let’s take a look at an extremely simple bit of code:

var result = 0.1 + 0.2;

After running this code you’d expect the result variable to contain the value 0.3, but that’s not what happens. When this code is run the value stored in the result variable will, in fact, be 0.30000000000000004.

I know what you’re thinking, but no, this isn’t another strange JavaScript thing. This is, in fact, a strange computer thing. If you were to run similar code in languages like C or Java you would get the same result.

The reason for this behavior has to do with how computers translate back and forth between the base 10 numbering system we humans are used to and the base 2 numbering system they use internally. If you’re curious about it check out the aptly named 0.30000000000000004.com website for the technical details (and links to even more technical details).

Suffice it to say, you should be careful when doing floating point math. Run some tests and make sure you’re getting the results you expect. If you’re not, make changes to how you do math based on what you now know about how computers handle floating point numbers.

How to Easily Scale Text Dynamically with CSS

HTML & CSS •

Usually the size of text on a web page is defined using the em or px units of measure, like this:

font-size: 16px;

The 16px value here defines the height of the invisible box text is rendered in.

This is often fine, but sometimes something a bit more dynamic would come in handy. For example, imagine being able to have the text on a page increase or decrease as the width of the viewport increased or decreased. That would come in handy, wouldn’t it?

Good news: You can do this with the vw unit.

font-size: 6vw;

This CSS defines the height of the invisible box text is rendered in as a percentage of the width of the viewport (vw stands for viewport width). That means text will get larger as the viewport width increases, and smaller as the viewport width decreases.

Give it a try, you’ll be surprised how useful and interesting it can be.

Don’t Wait for Inspiration to Strike

Writing •

There’s a common misunderstanding about inspiration: Many people think it precedes getting started, that it comes before putting in hard work. They think it springs forth from an unknown source, ready to propel, a source of energy unto itself.

Nothing could be further from the truth.

Inspiration does not spring forth from nothing, it grows from the seed of effort. Beginning is the best way to cultivate inspiration.

The same is true of momentum; an object at rest will remain at rest unless acted upon. Motivation and energy aren’t just going to spontaneously appear. Like a fire they need to be built from the kindling of desire and the spark of doing work. Only after you’ve created the right environment and put in the hard work of getting things started will things really start to ignite.

If you want to be motivated to write, you need to write to get motivated.

Great Design Comes from Deep Understanding

Design •

If you asked me to design a traffic light I wouldn’t take the job unless I had years to get up to speed. I drive, I use traffic lights every day, but I don’t have a deep understanding of how they work or their context. Thus, I am ill equipped to design a traffic light well.

The dynamics of traffic flow, connectivity with other systems, the ability for law enforcement to override the signals… I don’t have any idea how any of that works, let alone how to improve it. And that’s just the stuff I have a vague awareness of! There are doubtless significant aspects of traffic light design that I don’t even know about. I don’t know what I don’t know, and that’s an incredible obstacle to designing well.

I could attempt to create a working traffic light right now, but it would be full of flaws. Issues would arise the instant I hit the limit of my current knowledge. I would be forced to make assumptions, and every assumption would be another chance to do things horribly wrong. Bad design is often the product of assumptions, and my traffic light would be full of them.

If you want to design something well you need to start with a deep understanding of the problem you’re trying to solve, the goals you’re trying to accomplish, and the context of it all. Without that, you’re just guessing and rolling the dice.