Webmaster-Source » General

Why Animated GIFs Suck

Matt — Mon, 28 Apr 2014 23:57:56 +0000

Not only does the ever-popular animated GIF have an extremely limited color palette (256 colors), due to its roots in the 1980s, but its primitive compression is a colossal waste of bandwidth. A modern video format produces files a fraction of the size, and with far superior image quality.

Take this clip as an example:

WebM (94KB) & H.264 (141KB) Video

Animated GIF (1741KB)

The fancy HTML video loads in a fraction of the time, and plays more smoothly. Note that, in this example, there’s no quality difference because I converted an existing GIF into a video. (This is the same process GfyCat uses.)

This is a pretty big deal in a world with slow connection speeds and puny cellular data caps. Watching about a thousand GIFs the size of this one (which is fairly modest as far as GIF file sizes ago) would easily put you over a 2GB data cap.

If you’re interested in converting GIFs to a proper image format, I made a fun command-line tool called GIFnuke. You can run it on a file, or a URL, and it will use ffmpeg to produce a tiny WebM file automatically. (No MP4 version yet, you’ll have to do that manually if you need it.)

The Lost Type Co-op

Matt — Wed, 10 Jul 2013 11:52:09 +0000

Looking for some good, high-quality fonts? In a similar vein to the League of Moveable Type, the Lost Type Co-op provides a selection of elegant typefaces using a pay-what-you-want model. Many of the available fonts feature a “@font-face” badge that signifies that the creator has granted permission for the font to be embedded on the Web, though not all of them do, so you have to watch out for that if you’re looking with that purpose in mind.

When you go to download a font, you’re presented with a form where you input the dollar-value you wish to pay for the font. It can be anything, even zero. The full price goes to the author of the font.

The Lost Type Co-op [losttype.com]

How IMDB’s Speedy Search Suggestions Work

Matt — Wed, 01 May 2013 11:35:56 +0000

If you type a few letters into the search field over at the Internet Movie Database, you might notice how fast it is. That’s because they’re not served dynamically from their primary servers. IMDB, instead, serves the JSON data for search suggestions from a CDN, resulting in a significant speed boost. They use pregenerated static files to make this possible.

For example, if you visit this URL, you’ll get a JSON file of results for Harry Potter films:

http://sg.media-imdb.com/suggests/h/harry.json

The “h” directory means the query starts with an “h,” as they group their result sets alphabetically, and the “harry” part is what was typed into the search box. So if you wanted results that would match Doctor Who, you could use /d/doct.json. (Spaces are replaced with underscores.)

They only seem to have result sets for 4-5 character inputs, though. So you can query “ince” but not “inception.” The latter will result in an error. I guess most searches common enough to be matched in the suggestion box are covered within that limitation.

It’s a clever implementation, and it has to save a lot of computing power on a site that large, in addition to being fast.

(Note that this is not a public API, and IMDB/Amazon probably wouldn’t be happy about you scraping it or anything like that. But it’s a nice thing to learn from.)

Best of 2012

Matt — Tue, 01 Jan 2013 23:59:29 +0000

Today Webmaster-Source enters its seventh year. Historically I have done a quick roundup of some of the more interesting posts from the previous year, and I intend to continue with that tradition going into the new year.

So, without further ado, let us recap.

January

February

March

What is a Kibibyte?
Scripting News Hits 15 Year Mark, and Other Really Old Websites
What to Do After You Install Ubuntu Server in VMwware Fusion
Prediction: Higher Resolution MacBooks Soon to Come — Well, that was a solid prediction, wasn’t it?
BrowserQuest: A Massively Multiplayer Game in HTML5 and JavaScript

April

May

June

July

August

September

October

November

December

Mozilla Persona: Single Sign On Finally Done Right?

Matt — Wed, 10 Oct 2012 11:18:52 +0000

Mozilla Persona, the rebranded name for the foundation’s BrowserID project, just reached its public beta stage. The goal of the project is to create a distributed identity system that removes the need to register and log in to every site you visit. You’ll have an account with either Persona.org or eventually another provider, which will issue session tokens to relying sites when you click on a button to log in on the site.

From a user standpoint, it’s a seamless experience. When you click on a button to log in via Persona, a window pops open and asks you which of your associated email addresses you wish to sign in with. Upon clicking it, you’re logged in to the site for 30 days (or 24 hours on an untrusted computer). You can already try it out on a few sites, such as this beta crossword page on TheTimes.co.uk.

It currently works in all major browsers with the pop-up window, but the eventual plan is for browsers to integrate Persona. So you could have a little button in the upper right corner that shows which Persona is currently active, and have a part of the UI slide down to approve new sites requesting access. (This would be great for public and shared computers. A couple of clicks to sign out of your Persona, and you’ve made sure that your sessions on every site you’ve used are closed. No more leaving Facebook or whatever logged in on a shared computer.)

It’s also very easy to integrate Persona into an existing web site. Easier than Facebook or Twitter sign on, it has been said. It’s just a little bit of JavaScript and a server-side request to a URL.

It’s all kind of like OpenID, only in a form that’s more convenient and easier for ordinary users to understand. You can find a more technical explanation here, along with some links showing how to integrate it with a web site.

Commonly Misused Proverbs

Matt — Thu, 21 Jun 2012 11:41:02 +0000

It’s interesting how commonly-used aphorisms eventually become used in a context opposite to their actual meaning. One particularly egregious example is the phrase “it’s just a few bad apples,” frequently used to defend a group or organization from the actions of a few. Variations of that theme are a staple of modern political rhetoric.

The correct aphorism, which you have doubtlessly heard a few times in your life, goes “one bad apple spoils the barrel.” The reason? Because when an apple over-ripens and spoils, it produces ethylene, which acts as a ripening agent and causes the other apples in the container to go bad as well.

So when you try to defend a group by referencing the “bad apples” analogy, you are in fact supporting the argument that the organization is rotten.

Now how about “Jack of all trades, master of none?” Usually used disparagingly toward somebody who has many skills, but is not outstanding in any specific one, its traditional usage is less so. A Jack-of-all-trades would be a generalist rather than a specialist, sometimes called a polymath or a “Renaissance man.” Leonardo da Vinci and a number of ancient Greek philosophers come to mind. Would you disparage any of the classical great minds, a great many of which dabbled in many areas instead of focusing on a single field? I doubt it.

The “master of none” part seems to be a more recent addition to the adage, and other, longer versions of the saying exist.

“Jack of all trades, master of none,
Oftimes better than a master of one”

Wikipedia has a list of interesting variants from other languages, as well as a bit on the history of the phrase.

I’m not as knowledgeable of the history of “curiosity killed the cat,” but a well-known retort to it is “and satisfaction brought it back.” It seems that it could originate from a play performed by The Lord Chamberlain’s Men, a group including William Shakespeare, where the phrase “care’ll kill a Cat” appears. (“Care” being defined as “worry” or “sorrow” in this context.) It shows up again in Much Ado About Nothing.

Prediction: Higher Resolution MacBooks Soon to Come

Matt — Thu, 22 Mar 2012 11:40:42 +0000

The addition of a 2048×1536 pixel “retina” display on the latest model of the iPad has created an interesting conundrum: many developers will no longer be able to fit the iOS Simulator on their computer screens. If you toggle it into the mode added for the third-generation iPad, it’s too big to fit on the screen of any MacBook or iMac. According to Paul Haddad, developer of Tweetbot, it just barely fits on his 30″ Apple Cinema monitor.

Simulator at least fits on the 30″, barely. twitter.com/tapbot_paul/st…

— Paul Haddad (@tapbot_paul) March 9, 2012

If you’re not familiar with iOS development, the Simulator is used to run an Xcode project on a Mac instead of waiting for the freshly compiled binary to sync to the device and then launch. (Also, sometimes you may not have an iOS device handy while you’re making a minor bug fix…or you might not have an iPad yet at all!)

I can’t be the only one to think it strange that Apple would, in the long term, make it difficult for developers to work on their apps on anything other than a desktop Mac driving a 30″ monitor. (That’s a surefire way to cut down on software for the new iPad!)

This, to me at least, seems like a strong suggestion that a refresh of the MacBook Pro line is on the way, bringing with it screen resolutions equal to or higher than the iPad’s. Maybe the iMacs will get a resolution bump, too.

Edit: Ars Technica is now reporting (it’s uncanny, they posted just a few hours after me…) that the latest Mountain Lion beta has double-sized graphic resources, indicating that this is something Apple is at least working towards.

What is a Kibibyte?

Matt — Mon, 05 Mar 2012 11:44:15 +0000

If there are eight bits in a byte, how many bytes are there in a kilobyte? If you’re familiar with computers, you might say 1,024, while someone who is less so may say 1,000. Who is right?

Surprisingly, the person who answered 1,000 would be correct.

Historically, there were 1,024 bytes in a kilobyte. That created a problem, though. The Latin-derived kilo, mega and giga prefixes refer to base-ten numbers, which means using them for binary denominations would conflict with the SI/metric system. So in 1999 the International Electrotechnical Commission defined the kilobyte and its siblings as being base ten, introducing a new system for binary units.

Enter the kibibyte.

A kibibyte (abbreviated as KiB) is 1,024 bytes. The equivalent to a megabyte (10⁶) is the mebibyte (2²⁰) and the gigabyte (10⁹) is the gibibyte (2³⁰).

What does this mean for you? Nothing, probably. Unless you’re doing some programming work where specificity is very important, or dealing with very large amounts of data, measuring data in base ten is perfectly sensible. Hard disk manufacturers have been doing it for years, and some operating systems now even use base ten units. Apple has done it since Snow Leopard (OS X 10.6), though I think Microsoft may still use base two while labeling the numbers incorrectly. Most Linux distributions use base two, though they usually label the values with the proper suffix.

Anyway, it’s certainly interesting. It reminds me of another bit of numerical confusion. Network speeds are usually measured and advertised in megabits per second, as bytes aren’t really relevant to the “tubes,” and its not uncommon for sub-byte chunks of data to be sent down the line. Meanwhile, a lot of software displays the speed of downloads in megabytes per second instead. This creates confusing situations occasionally. (Convention is to use a lower-case “m” for megabits and a capital one for megabytes.)

Twitter’s Bootstrap CSS Redesigned to Look Like Facebook

Matt — Tue, 17 Jan 2012 11:02:08 +0000

I guess it was only a matter of time. Someone has taken Twitter’s Bootstrap CSS project and re-skinned it to look a bit more like Facebook. FBootstrap, as it is called, should be very useful for those who make Facebook applications and enhancements for fan pages. In addition to meshing well with Facebook’s design, the grid CSS has been tweaked to match the widths of fan page tabs (520px) and application canvases (760px).

Many of the elements don’t look quite like Facebook’s, especially the form fields, but they’re close enough that the average user won’t notice. The modal boxes have one of the closest adaptations.

Fbootstrapp [GitHub]

Best of 2011

Matt — Sun, 01 Jan 2012 04:00:35 +0000

Well, it’s been another year of blogging. 2011 was a pretty busy year for me, and I got a few fun projects done. Minimus, my free Mac application for easily compressing CSS and JavaScript, is one such thing.

Anyway, now’s the time when I usually do my annual rundown of statistics and the best (or most newsworthy) posts from each month of the year.

Monthly Page Views: 39,286
Monthly Unique Visitors: 29,568
RSS Subscribers: 662 (average over 30 days)
Toolbar PageRank: 5
Approved Comments: 3,554
Akismet Spam Comments Blocked (to date): 533,824
Legit Comments to Spam Ratio: ~1:150
Total Tweets: 8,609