Web Apps

Keyboard Layout Analzer 2.0

4 Comments

On Sunday I uploaded the new version of the Keyboard Layout Analyzer. It has a plethora of new features and charts, and a new layout design. My goal was to create something that was more useful and easier on the eye.

Several key features are currently missing from the app (saving/loading of layouts, heatmap stats, etc), and I hope to have those finished within the next week or two. I’ll do a second post, when version 2.1 is released, to chronicle those features. I decided to launch the new app before I had finished everything because I was worried my to-do list would get too large, and I’d simply just never finish before moving onto another project (I have quite a few unfinished projects). Work is also about to get a little hectic in two weeks, so I figured it was best to launch while I had some extra time on my hands. Below is a list of what’s new in the app.

  • Resigned layout.
  • Code rewritten from scratch (mostly because I just wanted to start fresh).
  • New configuration keyboard that allows you to set finger placement, finger start positions, and modifier characters for each key. Also supports drag and drop for ease of use.
  • Drop down for loading sample texts (hopefully more to come soon).
  • Bar charts comparing fingers are now available for distance and finger usage. For row usage, a row usage bar chart is presented.
  • Distance traveled is now broken down by finger.
  • Distance, finger usage, and row usage are displayed by a selectable unit type (percent, key strokes, etc).
  • Stats on consecutive finger and hand usage have been added in.
  • An adjustable number of layouts can be compared.
  • New algorithm for determining the best layout.

Many of the new features are user driven. I received around 8 emails, and they were all extremely helpful in guiding the direction the app took – so thank you to everyone who gave feedback (even if I didn’t implement every idea – yet at least). Hopefully in another week or two I’ll do another update chronicling the remaining features.

Lastly, I had a request to keep the original version intact and available, and have decided to make it available here. If you use IE8 or below, you’ll automatically be redirected there anyway.

Random Thoughts

Don’t want to use JavaScript? What about Tcl? Or LOLCODE?

Wouldn’t it be neat if web browsers had more client-side languages available? Wouldn’t it be kind of cool if you could code up your app in Tcl and place it in a script tag? Well, it turns out you actually can (sort of)! The below Tcl code is mostly non-sense, but it does do some DOM manipulation, and you can see it in action here. 

<script type="text/tcl">

proc appendTextNodeToElement {divId text} {
    set div [document getElementById $divId]
    set textNode [document createTextNode $text]
    $div appendChild $textNode
}

proc listNames {name1 name2} {
    if {== $name1 $name2} {
        set nameStr $name1
    } else {
        set nameStr "$name1 and $name2"
    }
    puts "hi $nameStr"
    return $nameStr
}

appendTextNodeToElement "testDiv1" "This is a test!"
set names [listNames "Bob" "Alice"]
appendTextNodeToElement "testDiv2" $names
appendTextNodeToElement "testDiv3" "2 + 2 = [+ 2 2]"

</script>

It turns out that when a web browser is parsing a script tag, if it doesn’t recognize the “type” attribute, it will ignore the code within the tag. This allows newer browsers to support additional languages without breaking older browsers. However, the older browsers still leave the contents between its opening and closing tags there, so if you have some JavaScript code that will parse and interpreted it, you can execute it.

The idea fascinated me and I wanted to see if I could whip up a proof of concept. I found a neat open source Tcl interpreter written in C called Picol, which was only 550 lines and covered only a sub-set of the language. I figured this was perfect for my needs and decided to see if I could port it to JavaScript. The port was really straight forward and I was pretty amazed when I actually saw it working. I went ahead and added in a few DOM manipulation functions, but decided not to get too carried away. The code for this is available here. I only went far enough to get a proof of concept though, so it’s not very feature rich. I also don’t really have any plans to go further with this, I just sort of got excited at the idea and wanted to see what would happen.

I also decided to search around and see anyone else had ported other languages for use on the client side. I ended up finding some code written by a Dutch programmer which allows for LOLCODE in the browser (zip mirrored here). However, rather than interpreting the code, his method converts the LOLCODE to JavaScript, and then appends this new JavaScript into the web page via a script tag. Still neat though.

Also, I’m aware interpreting code with an interpreted language isn’t the best idea performance wise, and that there is currently a growing number of languages that compile into JavaScript. So client-side developers aren’t technically limited to just JavaScript, but I do still find the idea of JavaScript-based interpreters kind of neat.

Lastly, there are a couple of JavaScript Tcl interpreters out there already. I played around with a few, but ultimately found them a little too confusing, and I wasn’t sure they were made for what I wanted to do (basically act as a JavaScript substitute), so I passed them over when doing this experiment. However, I’ll link to them below for those of you who are curious.

Book Reviews

Book Review: “The Tangled Web: A Guide to Securing Modern Web Applications”

The Tangled Web

Security is a hot right now*. You see TV commercials touting degrees in Information Security, you see news stories on hacking done by Anonymous, and you hear people throwing around terms like “cyber security” and “cyber attacks”. So when offered a review copy of The Tangled Web, my interest was piqued. The book aims to take its readers on a walk through of the modern web stack, and to explain the web’s vulnerabilities and what can be done to avoid them. It’s geared at software engineers and security professionals, and is written by a security expert at Google.

The book is divided into 3 sections. The first section aims to describe the anatomy of the web. It goes over URLs, the HTTP protocol, CSS, HTML, JavaScript, non-HTML document types, and browser plugins, all with a security mind set. I felt I was pretty familiar with the URL syntax, but was surprised to learn about some of the tricky URLs that could be created. Most people probably wouldn’t think twice before visiting this URL: http://bing.com&q=test@1249763400 – what happens depends on what browser you’re using.

The second section of the book covers Browser Security, and was to me the most interesting part of the book. The fundamental security policy of the browser is the Same Origin Policy (SOP), which puts content isolation rules in place to keep web sites from interfering with one another. In most web browsers, the origin for a page is defined by its scheme, host, and port. Though apparently for IE versions before 9, only the scheme and host are taken into account – unless you’re dealing with the XMLHttpRequest (XHR) object, then IE takes all 3 into account when defining the origin.

My favorite browser flaw talked about in this section was the one on the getComputedStyle/currentStyle API. Back in 2002, it was discovered that JavaScript could be used to look at the computed color of visited links to determine if a visitor had visited a particular site. Thousands of checks could be made a second, thus any website you went to could snoop-in on your browsing habits if it wanted to. Fixes for this security issue were put in place around 2010.

Another neat trick that was talked about was trying to load an authentication-requiring image from a third party site and using the image’s onload and onerror events to see if the user had logged into that site (a good discussion of this can be found here). This idea can further be extended to third party APIs. If a website doesn’t put the proper security in place for its API, malicious sites can do all sorts of mischief to their visitors, all without them noticing.

The last section of the book is the shortest (32 pages) and focuses on coming security features. This section of the book didn’t really grab me, but there were a few bits that piqued my interest. Cross-Origin Request Sharing finally allows developers to use the XHR object in a cross domain fashion, but until older browsers are phased out, developers will have to create a fall-back behavior if they decide to use it.

Overall I enjoyed the book and found it worth reading. I do, however, wonder if framing security around a discussion of the web stack was the best way to go. The author contends that arbitrary taxonomies of vulnerabilities aren’t as informative, and that some problems don’t fit into buzzword friendly names like Cross-Site Scripting (XSS) or SQL Injection, but I think information is more accessible when organized that way. Reorganizing chapters around a taxonomy of problems like XSS, CSRF, etc, would also probably make it a better reference for developers. Though to his credit, the author does devote the last few pages to common web problems like XSS, CSRF, etc, and indicates the pages where these problems are discussed (since they come up throughout the book).

If you’re a web developer and want to get a better understanding of security I think this is a very good book and worth checking out. However, if you’re not a web developer, I wouldn’t pick this up unless you had a technical interest in web security. Lastly, if you’re interested in the book I’d recommend reading the sample chapter on the HTTP protocol, since it gives a good preview of what the book is like.

*This may be area specific. I live in Maryland, and the BRAC has been driving a lot of job growth. So it maybe it’s better to say it’s hot in the Maryland area, and possibly other places too.

General News, Web Apps, web development

New Keyboard Layout Analyzer (Preview)

1 Comment

You can now try out a preview version of the new Keyboard Layout Analyzer. I completely re-did it from scratch. I know I’ve done that before, but I’ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can see a screen capture of the new configuration page.

Configuration Tab

The biggest problem with the previous Analyzer was that it didn’t have the best configuration options. And even then, the top-based tab interface led to a lot of people not even noticing that configuration options existed. My main goal was to make configuration much more intuitive and flexible.

The previous Analyzer also assumed keys to be atomic and wouldn’t let you mix and match characters from different keys. For English keyboards this was mostly fine, but when I started learning about Foreign layouts and specialized layouts like the Programmer Dvorak, I realized I’d made a fatal mistake. The old code centered around atomic keys and even used image icons for the configuration display. For this version, I decided to draw the keyboard on a canvas element and to allow keys to mix and match characters. Theoretically, the new setup could even analyze unusual layouts like the Maltron layout, but I haven’t yet created Keyboard Maps for that layout, nor have done much testing in that area (though it’s a goal).

I also tried to make the app look more visually appealing and to provide a better user experience. The old layout was kind of amateurish looking, a number of people didn’t utilize the top-based tabbed interface, and the amount of scrolling you had to do on the output page made it easy to miss interesting information – not to mention that I was using pie charts, which are notoriously bad at presenting this type of information (I had a decent number of people email me asking me to switch to bar charts). I tried my best at making something that was reasonably ok looking, and I hope the new side-tabs making navigating the information easier.

I’ve recently taken on a lot at work, so that has slowed me down quite a bit, but I hope to finish off the rest of the output sections in the coming month. If you find any bugs or have any suggestions please let me know!

Random Thoughts

Pronouncing SQL: S-Q-L or Sequel?

87 Comments

I know, I know, tomato-tomahto, but I’ve had people tell me I say it wrong when said each way, which has left me rather confused, so I decided to do some research and figure out how SQL is actually pronounced. SQL is the language used for querying and managing data in a relational database system. Some people say S-Q-L and some people say “sequel”. This difference in pronunciation also effects the writing of documentation. The indefinite article that’s used before the term (a or an) is based on how it’s pronounced (try saying “a SQL” and “an SQL”). No one wants to sound ignorant, so which way is correct? It turns out they’re both correct/acceptable, but that the S-Q-L way of saying it is more “official”.

SQL was initially developed at IBM by Donald Chamberlin and Raymond Boyce. It was initially called “Structured English Query Language” (SEQUEL) and pronounced “sequel”, though it later had to have it’s name shortened to “Structured Query Language” (SQL) due to trademark issues. It was created to supplant the then popular QUEL database language, and the name “sequel” was meant as a pun (it was the sequel to QUEL) [1]. However, this leads to the big question – was language still called “sequel” after the name change?

If you look at Oracle’s official documentation on SQL, it says it’s still pronounced “sequel” [2]. However, if you look at MySQL’s official documentation, it says “MySQL” is officially pronounced “‘My Ess Que Ell’ (not ‘my sequel’)” [3], and Wikipedia says SQL is officially pronounced “S-Q-L” and references an O’Reilly book on the subject [4]. So this is no help, the major sources aren’t agreeing on the way it’s “officially” pronounced.

Then a thought occurred to me: SQL was created in the 70’s, the creators are probably techies, I can probably just email them and ask them how it’s pronounced! Ray Boyce had passed away at a young age, but Don Chamberlin was alive and now teaching at a university. I felt a little silly, but I decided to fire off a short email to him:

Hello Don,

I’m sorry to waste your time with such a silly question, but I’ve often heard SQL pronounced S-Q-L or as Sequel. I’ve also seen the official pronunciation listed both ways. According to wikipedia, you and Raymond Boyce created the language and it was shortened to SQL after some legal dispute. So my question is, is there an official pronunciation to SQL? Thank you for your time.

– Pat

To my delight, he replied back:

Hi Pat,

Since the language was originally named SEQUEL, many people continued to pronounce the name that way after it was shortened to SQL. Both pronunciations are widely used and recognized. As to which is more “official”, I guess the authority would be the ISO Standard, which is spelled (and presumably pronounced) S-Q-L.

Thanks for your interest,
Don Chamberlin

I felt a little dumb wasting his time with such a goofy question, but I was thrilled he replied back. Later I would find out that he himself pronounces it as “sequel” [5], so it’s interesting he would be so unbiased, though I suppose his pronunciation is consistent with him noting that the original guys kept calling it “sequel”. With this I felt I had found my answer: Both were acceptable, though the standard indicated S-Q-L was probably more official.

I don’t have any plans to be that guy and start correcting people who say “sequel”, though now I feel I can at least defend saying S-Q-L if someone tries to correct me. Additionally, while this may seem like a really trivial matter, some people seem to take it rather seriously. On a thread at Oracle’s message forum, a DBA who pronounces it “sequel” mentioned that “I’ve rejected interviewees because they didn’t know how to pronounce SQL … If you can’t pronounce it correctly, then I have doubts as to your ability to use it correctly.” [6] Though then again, the Oracle community seems to have adopted the “sequel” way of saying it, so maybe adapting to whatever environment you’re in is the best policy. Whatever the case, knowing why it’s said one way or another can useful.

[1] http://www.ibphoenix.com/resources/documents/design/doc_123
[2] http://docs.oracle.com/cd/B10501_01/server.920/a96540/intro.htm
[3] http://docs.oracle.com/cd/E17952_01/refman-5.1-en/what-is-mysql.html
[4] http://en.wikipedia.org/wiki/Sql
[5] http://www.youtube.com/watch?v=ghxpXpTuALM#t=33m23s
[6] https://forums.oracle.com/forums/thread.jspa?threadID=630585&start=15&tstart=0

Random Thoughts, Web Apps, web development

Is ___ more of a boy’s name, or a girl’s name?

2 Comments

Photo By Zach Klein

So my boss came into my office on Friday and off handily asked me if “Stacy” was more of a boy’s name, or more of a girl’s name. I immediately thought “piece of cake!” and brought up my Baby Naming Trends Tool, only to be really confused that there was no feature for determining this. “Wait, I remember programming this feature last Fall, where is it?” I thought. Then I remembered I had waited to push the update out until I finished a couple of other features (which remain unfinished). D’oh!

Since male vs female feature was kind of fun, I decided cut out the unfinished functionality (for now), and push out the update so users could query the data. Now you can see if names are more popular for girls or for guys. Just place a “m:” or “f:” before a name when you enter it in. Here are some examples of names commonly given to both boys and girls:

  • Casey – Very close, more male leaning though.
  • Jordan – More male leaning.
  • Mackenzie – More female leaning.
  • Pat – A nick name, but popular with female babies in the 30’s and 40’s (though it’s almost no longer used). Patrick and Patti are more popular.
  • Quinn – More female leaning.
  • Riley – More males, but trending towards more females.
  • Stacy – More female leaning.
  • Taylor – More female leaning.

However, when creating this feature, I noticed some interesting abnormalities. No popular names seemed to be 100% male or female, even names that were obviously male or female. For example, according to the data, 11 females were named John in 2010, and during its peak popularity, when 80,000 males a year were being named John, the data says 200-300 females a year were being named John. Even though that means only ~0.375% of John’s were female, it still seems bizarre that someone would name a baby girl “John”. I wondered if this was a mistake on my part, but the underlying data showed the numbers to be correct.

The idea that someone would give a baby girl or boy a name of the opposite sex isn’t too far fetched, I know a few guys with names more commonly associated with girls, but are there really hundreds of guys named Jennifer walking around in the US? I accept that there may be a hand full, but my guess for the real reason this anomaly appears is because nurses or doctors sometimes make mistakes when recording the data. That makes me a little sad, but I suppose any data that’s hand recorded is going to have some errors. Though if this is the case, since this data comes from the US Social Security website, does this mean that these people may have their sex incorrectly recorded on their birth certificate? Though then again, perhaps people give a name for their baby, but then change it when it’s born and they find out it’s a different sex. Or then again, maybe there are lots of male Jennifers out there. Whatever the case, it makes for an interesting blip in the data.

Keyboard Layout Analyzer Update

I’ve rewritten the Keyboard Layout Analyzer. Back in November I told a guy I was close to being done and would have a new version up in “2 weeks”. I then told two other people in December who asked for additional features that I’d have it up in “2 weeks”. I now feel a little bit like a jack ass, but I honestly have been really busy. My new plan is to simply put up a preview version soon. The new app is mostly done, but rough around the edges in the output department.

General News

Coming updates

Photo By gureu

Two updates for the price of one today. It’s been killing me that I haven’t been posting more. I’ve been switching between projects a lot lately and I’m ultimately left with a lot of stuff that’s between 25%-75% done.

Coming up within the next month there will be a make-over/overhaul of an existing app. I also started some big updates for the baby naming tool, but temporarily shelved them when I started the remake of the previously mentioned app – though I’m not sure when these updates will be out. I’ve also been experimenting with FireFox addons, but I haven’t yet put together anything interesting. Sometimes I feel like I have programmer ADD.

Anyway, I just wanted to let you all know I’m still actively working on stuff for this site and haven’t forgotten about it. Sorry it’s been so quiet lately!

Development Thoughts

Testing your Linux skills

Photo By mkrigsman

If you’re a developer, you probably find yourself using Linux at least some of the time. Knowing your way around the OS can make your life a lot easier, and I’ve sometimes found myself wishing I knew certain commands or concepts a lot sooner. I’m no expert, but since I thought it might be useful, I’ve put together a short quiz to test your Linux skills.

Important Note: Since you are reading this through a feed reader or by email, the answers will be right below the question. On the main blog entry the answers are hidden until you mouse over or click on the “+” next to the question. Click here to be taken to the blog entry if you wish to not see the answers.

So, let’s get started…

  1. What does the cd command do when handed each of the following inputs: “-“, “/tmp” and “~”? [+]

    • “cd -” changes the current directory to the directory you were previously in.
    • “cd /tmp” changes the current directory to “/tmp”
    • “cd ~” changes the current directory to your home directory.

  2. What are two ways of copying a text file without using the cp command? [+]

    • cat the file and redirect the output to a new file.
    • Use the scp command (secure copy).

  3. You want your console window to continuously show you the latest updates to a log file as its being updated. How would you do this? [+]

    • Use the tail command with the -f flag.
    • Use the less command with the +F option (personal favorite).

  4. What is the difference between the “which” and “whereis” commands? [+]

    • which shows the full path of a given command.
    • whereis locates source, binary, and manual files for a given command.

  5. How would you find all of the files modified within the last day under a particular directory structure? [+]

    • find ./ -type f -mtime -1

  6. What is the purpose of the “/etc” and “/var” directories? [+]

    • The main directory layout for all Linux systems is based on the Filesystem Hierarchy Standard (FHS).
    • The “/etc” directory contains host-specific, system-wide configuration files (sometimes called “Editable Text Configuration”).
    • The “/var” directory contains “variable files”, or files whose content is expected to continuously change during the normal operation of the system (ex: log files).

  7. What are “cron jobs”? [+]

    • Linux systems have a program called “cron” which runs in the background and executes jobs (commands, scripts, etc) based on a schedule defined in a crontab file. This allows you to routinely do certain tasks. A “cron job” refers to a job run by the cron daemon.

  8. What does the “nohup” command do? [+]

    • Short for No Hang Up, this command allow you to execute a command that will keep going after you’ve logged out (ie, one that ignores hang up signals).

  9. You have a directory tree which contains all of the files for a web application. You want to make a list of all of the files that contain a phone number in the format of “(XXX) XXX-XXXX”. How would you do this? [+]

    • The key insight is to use the grep command with the -R flag (recursive directory search), -l flag (list files) and a regular expression to find the phone numbers.
    • As a side note, this used to be a popular interview question that Amazon gave to potential applicants (for more info, see the “Notes” section at the bottom of this post).

  10. What is the name of the official Linux kernel mascot? [+]

    • Tux.

Mouse over or click the +’s to see possible answers (though I didn’t include all possible answers – so you may have thought of some solutions that aren’t listed).

If you found yourself doing poorly, or just want to refresh your linux skill set, check out:

http://www.funtoo.org/wiki/Linux_Fundamentals,_Part_1

They have some of the best tutorials I’ve seen on Linux. However, if anyone knows of any other good tutorials let me know and I’ll add them here too.

Notes:

  • For more information on question 9, click here and go to the section titled “Area Number Three: Scripting and Regular Expressions”.
JavaScript, Web Apps

Plotting and Analyzing US Baby Naming Data

11 Comments

Photo By mahalie

I’ve created a new tool that allows you to query US baby naming data from the past 130 years and play around with it on an interactive chart. I got the idea after stumbling upon the data at the US Social Security website.

To cut to the chase, below you can see some interesting effects of our culture on naming trends.

  • Star Wars – George Lucas created the names “Anakin” and “Padme”, and he had a big impact on the number of babies given the name “Han”, “Leia” and “Luke”. I didn’t include Luke on the chart because it dwarfed the others so much, but between 1880 and 1977, 18,027 babies were named Luke, between 1977 and now, 176,125 babies were given that name.
  • Hermione – Apparently Hermione is a real name, though the 478 babies given the name since 2000 were probably due to the recent popularity in the Harry Potter series.
  • US Presidents – My friend Ben found this one. Back in the early twentieth century, who got elected president had a big impact on what people named their babies.
  • Reagan and Kennedy – I don’t want to get too political, and I’m just talking out of my ass here, but I wonder if the idealizing of past political heroes (from different sides of the aisle) has led to the recent surge in these names.
  • Ninja Turtles – The Ninja Turtle craze of the late-80’s / early 90’s seems to have caused a small impact on naming trends in that time period.
  • Paris – Paris Hilton’s sex tape leaked onto the internet in 2003 and became a big news story. For some reason this inspired hundreds of people to name their kid after her.
  • Osama – The frequency of people naming their kid “Osama” actually increased after the 1998 embassy bombings, but I’m guessing after 9-11, people realized naming their kid after after the world’s most wanted terrorist was probably not a good idea.
  • Miley – In 2005, 26 babies were born with the name “Miley”. In March of 2006, Hannah Montana debuted with star Miley Cyrus on the Disney Channel. That year the name started to sky rocket in popularity, and peaked in popularity in 2008 when 2,643 babies were given the name.
  • Selena – In 1995, this name shot up in popularity by 400%, with 3,839 babies given the name “Selena”. This was most likely was caused by the 1995 death of latin super star “Selena Quintanilla-Pérez“. Interestingly, Selena Gomez has not had the effect on “Selena” that Miley Cyrus has had with “Miley”.
  • Carson – This name had been slowly increasing in popularity, but it started to skyrocket in 1998, which coincidentally was the year MTV debuted its mega hit TV show TRL, with host Carson Daily. The name has maintained its popularity, so its probably not all due to Daily, but since TRL was a young person’s show, and not many notable people are named Carson, he probably had some effect in getting the ball rolling.
  • Shirley – Shirley Temple shot to super stardom in 1934 with Bright Eyes, and so did the use of her name for new borns.
  • Britney – Britney Spears dropped “…Baby One More Time” in 1999 and had a big impact on the “Britney” (interestingly, the version spelled “Brittany” stayed in steep decline during this time period).

These were all found by just trying out different names and looking at the time period for when the names peaked or dropped in popularity.

Chart Library and Modifications

For those of you who are curious, I used Martin Kleppmann’s PlotKit repo as a starting place for the chart (that repo is a heavily modified version of Plotkit with lots of new features and fixes). I then modified it to add in some additional features and minor bug fixes, including the mouse interaction stuff. I’ll probably submit my changes back to him at some point, though right now I feel like I kind of hacked stuff into it, so I’ll probably wait until I polish it up and the changes are field tested more. If you have any trouble with the chart please let me know.

The mouse interaction stuff was done by creating a separate canvas element and having it overlay the chart. The dynamic dots you see are then drawn on this canvas. This is done because re-drawing the whole chart is time consuming. The one exception to this is IE7 (and possibly IE8), for which I couldn’t get the overlay to work. So for those browsers, the whole chart re-drawn when it changes. So you’ll notice if you use IE7 that mouse interaction isn’t smooth, while if you use Chrome, FireFox, or IE9, things should be pretty smooth.

Book Reviews

“The Book of CSS3” Book Review

The Book of CSS3

I had been wanting to learn more about CSS3, so when offered a review copy of The Book of CSS3, I accepted knowing that at the minimum, I’d at least get exposure to a bunch of cool new design features. Luckily, the book itself is well written and proves to be a great guide to what’s available now, and to what’s coming soon.

The book is written for web developers who are familar with CSS and who may have played around with some of the new CSS3 features, like rounded corners and drop shadows, but who are looking to get a fuller understanding of what it is and what they can do with it. After explaining a bit about what CSS3 is, remarking on its modular nature (the spec is broken into modules so that browsers can implement individual modules without having to implement the whole CSS3 spec right way) and giving a short write up of its troubled history (work on the CSS3 spec originally started way back in 1998), the book launches into chapters on individual CSS3 topics – you can see the full table of contents here.

The flow of the book from one topic to the next is pretty good, but with the exception of chapters dealing with animation and transformation, most of the chapters can pretty much be read in any order. However, the earlier chapters cover topics that are more widely accessible, stable, and cross-browser than the later chapters, so reading the book start to finish is probably advantageous. The structure of each chapter is very similar, with the author discussing a little about the topic and then leading you through various sections where features are described and showed off with examples. Cross-browser techniques (where relevant) and compatibly are also mentioned.

One of the early topics that really piqued my interest was Web Fonts. With Web Fonts you can use any font you want, even a crazy hand written one, and users will see it when viewing your webpage. The author even provides some cool links to some CSS3 font resources like Google Web Fonts, which makes it really easy for you to include and use fonts in a cross-browser manner.

Another topic that I enjoyed was “Transitions and Animations”. Animations let you move and change elements during a given time period. Unfortunely for us, the Animations module, at least for now, is only implemented in Webkit browsers (Chrome and Safari). However, Transitions are currently available in all of the major browsers except IE. A “Transition” is an animation that happens between two different states. They allow you to give a smooth feel to certain style changes. For example, say you wanted to change the color of a link, but you wanted the change to come in gradually. You could do that like so:

Example test: Mouse over this link!

As you can see, the hover pseudo-class changes the link to color to red, but since we’ve setup a transition for the color property, the link transitions from black to red over the period of 1 second, instead of abruptly changing to red. This effect also applies to other properties, and is especially neat when changing a div’s position or size.

Near the end of the book some yet-to-be implemented features are discussed. Chief among them is the “Template Layout Module”, which would allow you to lay out items on a page in way that is similar to a grid, but a in fashion that is little more intuitive. The Template Layout Module is made even more interesting by the fact that even though it is currently not implemented in any browser, you can still use it by using a JavaScript library written by Alexis Deveria.

I feel like I learned a lot from this book and that it not only contained a lot of useful information, but that the information was presented well. The only draw back to reading this kind of book is that CSS3 is still in flux right now and certain features will change as things are ironed out, however, much of what’s talked about is reasonably stable, and knowing about what’s coming will probably give you a better footing for the features when they finally arrive. If you’re looking to learn more about CSS3, this is definitely a book to look into.