Category: One Off Articles



CSS Font Weights Explained

Posted on November 3, 2015 by - One Off Articles

Those not too hip with typography might at one point wonder, “Why are the font weights on a ranking scale from 100 to 900?” Where are those numbers coming from? It was actually an interesting questions brought up to me recently that I hadn’t thought much of. After all, no one’s breaking the internet over not knowing why font-weight can take a numerical value from 0 to 900 and why anyone would want to use the numerical scale over the (arguably) more intuitive, lighter, normal, bold, bolder scale.

There are a surprising, delightful and numerous amount of things about CSS that harkens back to design theory and borrows from typography principles and font-weight’s number system is a pale echo of a type family’s numbering system. Before I get to explaining the numbers, we have to explore a few terms related to typography first.

A type family (or font-family as far as CSS properties go) is a typeface and all of its total variants. Where you might have Helvetica identified as a type family. Inside that family you’ll have members like Helvetica Roman, Helvetica Italic, Helvetica Bold.

Variants within a type family are different styles of that same typeface. For example, the Italics for a typeface is an example of a variant. Small caps style within a type family is another example of a variant. Within CSS, we declare different variants for our font-families by using font-variant.

Weights within a type family are generally considered how thick or thin a typeface appears. On the lowest end of the scale, you have the thinnest of thin characters. On the other side, you have big, bold and thick characters. As you’ve probably guessed by now, font-weight is what you generally use to affect the weight of your web typefaces. And it is with font-weight that we’re going to dive into the numbering system.

The Typography Numbering System

Most large type families have a numbering system that dates back to some of the earliest examples of variant and weight-rich typefaces such as Univers and Helvetica. These typefaces typically have family members that run the gamut of thick, thin, condensed, wide, and so on. So a type numbering system was devised to easily catalog and describe the various members of–let’s say, Univers. Where you could say, Univers Normal, you could also say Universe 430. Why does 430 mean normal?

  1. The first digit identifies the weight of a typeface.
  2. The second digit identifies its amount of compression (ex. condensed, ultrawide, etc).
  3. The third digit signifies the stance (roman or italic).

Typically in the numbering system, 400 is identified as “normal” weight, 30 signifies normal compression, and 0 would mean that the typeface is roman or upright. So that is what we mean by Univers 430. It is of the type family, Universe. It is normal in weight, normal in compression and upright roman in stance.

Another example might be Times New Roman 631. This would mean a Bold and Italic Times New Roman. 600 typically represents bold, 30 would indicate normal compression and the 1 identifies it as an italic variant.

Last example, Helvetica 620. This is Helvetica bold, upright and condensed. The 600 indicates Bold, the 2 is meant to represent condensed, and the 0 identifies this as an upright variant.

So that’s the typography numbering system in a nutshell. Many designers typically prefer to identify the typefaces by name–because many of us are not creatures particularly fond of nondescript numbering systems. I don’t blame you, I’m not hip on it most of the time either. But even I have to admit to its simplified, condensed elegance. However, it should be more obvious now how and where font-weight gets its numbers and considering how many web fonts have large swaths of weights, why not keep in mind what the numbers mean?

100 – The lightest of the light.
200 – Light.
300 – Book.
400 – Normal.
500 – Semibold.
600 – Bold.
700 – Extra Bold.
800 – Ultra Bold.
900 – Black.

Maybe some day CSS spec will catch up to the type family numbering system and we’ll be declaring our font-families as Proxima Nova 431. For more fabulous insights on typography as well as a quick and useful read about typefaces, check out Erik Spiekermann and E.M. Ginger’s, Stop Stealing Sheep & Find Out How Type Works (2nd Edition).

Resources

Fontfeed, It’s All in the (Type) Family
Great resource that showcases a more visual chart of the original font numbering system with Univers’ two digit example. Also takes a jab at Helvetica and I’m always for a bit of that.



The Benefits of Managed WordPress Hosting

Posted on September 3, 2015 by - One Off Articles

If you don’t plan on digging too deep into server management and all you need to do is host a WordPress site, you can’t go wrong with either of these fine folks.

WPEngine
Starts at $29/month. WPEngine is a solid hosting solution that at least two of my clients have used in the past. They have an excellent reputation as being one of the fastest and most reliable WP dedicated hosts out there. And well worth the monthly fee for the peace of mind, expertise and speed that they deliver.

Flywheel
Starts at $15/month. Flywheel is speedy, has great up times and also offers peace of mind backups and security. All of it backed up with a friendly small team of professionals.

I know some clients have balked at the prices they see  attached to these hosts compared to their features. After all, a standard shared host can offer them unlimited space, unlimited bandwidth, and all for $5 or less a month in many cases. Why on earth shell out $15 or more a month for hosting? Is WordPress hosting really that much different than a regular website? So let’s look at this from the start.

Is Hosting a WordPress Website Different Than a Regular Website?

In some ways, yes. WordPress is a Content Management System (CMS) built with PHP and using a MySQL Database. While most small websites do perfectly fine running WordPress on a shared host, many people interested in running WordPress rarely have a 5 page site to only use the backend to update text once in a while. Chances are pretty good that the reason most clients who went with WordPress do it for its blogging capabilities, social media extensions, eCommerce options, scheduling, database, and on and on. What I’m getting at is, the vast majority of people running WordPress websites aren’t content with five static pages.

If they’re updating a blog often, running an eCommerce store or really anything that sends data and retrieves data from the MySQL database on a regular basis, you are relying on the server to receive those messages and send back the necessary data. The more calls you make to the server, the slower your website is to load and perform functions because it has to send the message to the server and wait for the server to get back to it.

Now, we all know that the more people sitting on the same server, the slower the website tends to be. After all, those people are all running sites too. Some of them static HTML/CSS, but with more and more businesses running WordPress sites, server loads are going up as more websites send and receive data using server resources.

This is where a dedicated WordPress host such as Flywheel and WPEngine come into play. They’ve optimized for these types of scenarios, server messages get received faster and are sent back faster as a result. This means your site loads quickly, freakishly quick. The kind of quick massive companies spend tens of thousands a year to accomplish with much more expensive and expansive server architecture.

So bottom line, is hosting a WordPress site different from a regular site? Yes, especially if you’re using the Database a lot. How much faster is WPEngine or Flywheel than a regular host? Oliver Nielson from WebMatros.com did a comparison between the major WordPress Hosts versus a very well-respected general host–MediaTemple. And the results are pretty telling. Check them out.

 Is WordPress Security Really That Much of a Problem?

No, but that’s if you know what you’re doing. Hire a developer who knows what they’re doing. And you consistently follow the developer’s recommendations and advice regarding security of your own site. That’s a lot of “ifs” and what I encounter is that clients often drop their website maintenance shortly after deployment. They can hardly be blamed, clients should be focusing on their business not worrying over their website. There are the basics of keeping a WordPress site safe:

1) Keep your WordPress Core up to date.
2) Keep your plugins up to date.
3) Don’t use a theme or plugin that you’re unsure of in terms of quality.
4) Uninstall and replace all outdated or unsupported plugins.
5) Keep strong passwords and,
6) Avoid being compromised at the local machine level.

It seems like a lot to think about, and I’m not even getting into the what-ifs of spammers or brute force attacks that hammer the login pages in an attempt to suss out your password–and that’s just the predictable stuff. This is really where a dedicated WordPress host comes in handy. They track the security issues for you, they do the backups, they monitor the server, and if something does happen the majority of them can mitigate the damage, stop it before it goes too far and restore your site back to the way it should be. If you’re running eCommerce, or doing anything that handles customer data, it’s worth it to shell out for the peace of mind, in my opinion.

What About Unlimited Space and Bandwidth?

I addressed the unlimited space and bandwidth myth in an earlier post: Choosing a Good Web Host. Chances are pretty good that shared hosts don’t actually mean unlimited space and bandwidth and they’re just using those features to draw in customers, betting that the vast majority of their customers won’t even come close to the limits they actually have in mind. What you get is an upper limit they won’t tell you about, and if you cross over that limit the host might throttle your usage, send you messages about your resource consumption or strongly insist that you upgrade your account.

I rest more easily going with hosts who are upfront about what you’ll get over the ones who either won’t tell you or offer you misleading features and then throttle you back when you actually take advantage of those features. So yes, the two dedicated WP hosts I listed above (and there are other great ones, these are just the two I have experience with) do have limits on what resources you can eat up, but they are disclosing it and not selling pie-in-the-sky unlimited space and bandwidth. You will get exactly what you pay for, you know what you’re paying for, and you know you are guaranteed to be allocated those resources.

Now the capacities are pretty low, and if you want more, you need to be prepared to pay more for it. If the capacity is going to be a problem, I generally bump up to recommending a managed VPS. Everything costs something, unfortunately.

Ultimately, what hosting you or your clients end up on is dependent upon the website, what’s being run on it, and how much the client will expect to pay for hosting. There’s definitely a lot of benefits to going with a dedicated, optimized WordPress server. Peace of mind, simplicity and security features are some of the most attractive reasons.

Resources

Flywheel, Managed WordPress Hosting
WPEngine / Managed WordPress Hosting
Managed WordPress Hosting Pros and Cons, Sitepoint



The Difference Between Deprecated, Depreciated, Obsolete

Posted on August 27, 2015 by - One Off Articles

OK, laugh all you want, but I used to think deprecated was depreciated. Never had an issue with obsolete, but I recently felt a little better about myself when an acquaintance and much more experienced programmer used “depreciated” instead of deprecated to describe something. It made me wonder if anyone else had the same confusion I did.

My problem started with English and my perceived understanding of words–and my attitude towards looking up words in the dictionary. My style has always been, “Word I don’t recognize? Eh, I’ll just assume its meaning within the context of the sentence/paragraph”. You see, I hadn’t ever really used the word deprecated before I got into development. To me, it always meant: “To disapprove of something”. Which is technically accurate, if somewhat vague. The word didn’t mean enough to me, like it was too general to use in a programming context to describe something that was outdated, being replaced or out of fashion. I was wrong (obviously).

Which is why I thought depreciated was the correct word, which to me seemed to mean more like, “something that’s worth less as time goes on”. Which I looked up prior to dropping the word from use when describing aging programming practices because it seems to be geared towards the value or worthiness of something. While it’ll still work in a lexical sense (don’t look at me, I’m not a writer–certainly not a technical one anyway), I can understand why more people use deprecated instead.

So here, the difference between deprecated, depreciated and obsolete as they related to development and programming. And when to use each so you never have an embarrassing moment again…

Deprecated: Something is becoming outdated, or slowly being phased out. Often, a deprecated practice or element is still in use, but it is encouraged to stop using it as it may become obsolete in the next iteration or release. An example of a deprecated HTML element is the <center> tag.

Depreciated: Something is being reduced in value over a period of time. The homes on Mount Terrible are worth less year after year, it means their property values are depreciating.

Obsolete: No longer being used, dropped from standards. The HTML <blink> tag is obsolete and should not be used anymore, tragically.

So there you have it. Three words. Two of which beginning developers and programmers get mixed up now and then.



How to Enable Experimental Chrome Features

Posted on August 18, 2015 by - One Off Articles

There are a lot of reasons why you want to enable experimental Chrome features, whether you’re a developer looking to stay on the cutting edge of new technologies or a user who just wants to see the latest and greatest things. Enabling experimental features in Chrome will allow you to preview some of the awesome new things out there.

There are a few downsides to enabling experimental features, browser instability is one of them and security and privacy concerns are another. So understand that there are definitely some downsides when you turn experimental features on. Let’s get to actually doing it now.

How to Enable Experimental Chrome Features

1) In your Chrome browser’s address bar, enter chrome://flags/ then hit enter.

chromegl

2) You’ll be taken to a page listing all the experimental features available that you can enable or disable at a whim. One of the features that I tend to like keeping on is the Experimental Web Platforms option. Simply click on the Enable link:

webplat

4) Once you click on the Enable link, a button will appear in the bottom left of your browser telling you to Relaunch Chrome. You should Enable all the features you want before Relaunching by clicking the button.

relaunchchro5) Once relaunched, your experimental feature(s) should be enabled now.

Disabling Experimental Chrome Features

Disabling experimental features can be done in pretty much the same way as enabling them.

1) In your Chrome browser’s address bar, enter chrome://flags/ then hit enter.

2) Locate and click on the Disable link on all the features you want to turn off.

3) Click on the Relaunch Now button to reload Chrome and turn those features off.

Again, be aware that not all experimental features are stable, some can present security risks or even cause data corruption. It’s recommended to turn on only those experimental features that you will use, and once you stop using them, turn them off. In the mean time, check the resources links to see some cool experimental features you can play around with.

Resources

10 Experimental Features You Need to Try, BlogThinkBig
TechAdvisory, 5 Experimental Chrome Features



Colors on the Web RGB vs. HEX vs. HSLa

Posted on June 12, 2013 by - One Off Articles

For people just starting out in web design, finding out about all the different languages and their various nuances is difficult enough. Add in the fact that web languages change on a daily basis–even plain old HTML and CSS have hundreds of considerations to take into account, and all this stuff can be pretty overwhelming. One of the sources of confusion that I’m often asked about is the difference between RGB and HEX and why someone would want to use one or the other.

The Definitions

Before we get into when you use one or the other, we have to do some defining and for this, we’ll go back to a topic near and dear to my heart: Color Theory.

RGB or Red/Green/Blue is a color model. Similar to the more familiar RYB (Red/Yellow/Blue) model that most people are more familiar with if they’ve studied the color wheel. RGB is the color model used for websites. We use RGB instead of RYB because it is additive. An additive color model is one that works for illuminated media–which is a fancy way of saying, content that lights itself. Additive can also be thought of as colors that add up to emit light. When you’re using the RYB color model (or even the CMYK model) you should be working with subtractive color. This means that instead of lighting itself up, the content is displayed on a surface where light is bouncing off of it. This is because subtractive colors work by reflecting and absorbing light.

The Difference Between HEX and RGB

Back to the question at hand. This is an example of a HEX color code:

#33743b

This is the same HEX color code in RGB, where red is the first number, green is the second, blue is the third:

51, 116, 59

Having looked at those two, you’re probably wondering why on earth you would ever use RGB, considering the first example is a lot easier to remember and type out. The thing is, both versions have different uses, even if the end result is usually the same.

The one time you may wish to convert from HEX to RGB is when you need to access the opacity or alpha of an element. At which point, you would use RGBA. A typical RGBA value would look like this:

51, 116, 59, 0.65

In the above code, the first three values represent the Red, Green, Blue values and the last value (0.65) represents the alpha. At 0.65 alpha, we are seeing the above colors at 65% opacity.

Then There’s HSLa

HSLa stands for Hue Saturation Lightness alpha. HSLa somewhat resembles RGBA, except the first value stands for our Hue–or color. We declare our colors by looking at the color wheel. The wheel is–obviously–a circle where reds are around the 0 degrees to 360 degrees area, 120 degrees are our greens, and 240 degrees are our blues.

Saturation is expressed as a percentage. When we talk about the saturation of a color, we’re talking about how much grey it has. AT 100% the saturation is all the way up and we are viewing the color fully.

Lightness is also expressed as a percentage and describes how much black or white we have in a color. At 0% we have full black. At 100% we have full white.

Opacity works as a decimal like it does in RGBA, where 1 represents fully opaque, 0 represents fully transparent, and everything in between is partially opaque. For example, 0.45 means that an element is 45% opaque.

A typical HSLa value looks like this:

310, 30%, 20%, 0.65

Writing CSS for HEX, RGBA & HSLa

Here are some examples for how you would write a CSS rule for a paragraph tag using these three values.

First, let’s look at HEX:

p {
color: #25547f;
}

Here’s that same declaration, only in RGBA this time:

p {
color: rgba(37, 84, 127, 1);
}

And here’s the same declaration in HSLa:

p {
color: hsla(209, 55%, 32%, 1);
}

Which one to use?

HEX is very attractive because it’s short and simple to remember and type out. But HEX might not work for you in all situations, which is when you may wish to consider one of the other two methods. Both of which have their pluses and minuses.

RGBA is well-known and supported in older versions of Internet Explorer (9 and older). It has an additional field for alpha values which come in handy when you want to work with opacity.

HSLa is a newer, more intuitive way to work with colors. Unlike RGBA where we have to mesh some numbers around to get the color we want, we can grab the Hue then work with percentages to get the saturation and lightness levels that we need. HSLa also includes an alpha value for opacity.

The one thing to note regarding HSLa is that, like I said above, it isn’t supported by older versions of Internet Explorer. So if you were going to use HSLa, you’ll need to rely on some fallback codes and this could mean bringing in RGBA or HEX. A typical fallback code for an HSLa statement would look like this:

p { 
    color: #25547f;
    color: hsla(209, 55%, 32%, 1);
}

In the above code, the first declaration is a HEX value that’s meant to work as our fallback. The second declaration is for HSLa and will be used for browsers that can support it.

Some stuff to make things easy

Some designers/developers use programs that favor HEX over RGBA, and some even use programs that have built-in tools for HSLa, but what if you find yourself needing to convert one to the other? Here are some online tools to help you convert these values back and forth:

HEX to RGB: Converts HEX values into RGB.

RGB to HEX: Converts RGB to HEX.

HSL Color Picker: Can convert HEX or RGB into HSL.