Scoped CSS

Posted on May 17, 2013 in Blog, HTML5 | 0 comments

CSS has always been the weakest link for me in terms of creating larger web apps. PHP, JS? Now manageable. But over the years, CSS has remained the most stubborn language to structure well. You can have dozens of CSS files, but any line in any one of them can affect any element in any page. The horror. It seems like no matter what decisions you make on how to organize the CSS, you end up running into problems. I think the relative absence of CSS design patterns relative to other languages hints at the problem – it’s just not something that developers have been able to properly address, due to the limitations of the language itself.

(On a related note, thank heavens for CSS pre-parsers).

This is why I’m so excited about the new scoped HTML5 attribute for the style tag, which just landed in Firefox 21 (out now!). It lets you scope your CSS based on the location in the DOM. Here’s a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<body>
   <h1>An h1, styled according to the browser defaults</h1>
   <div>
      <style scoped>
      h1 {
         color: red;
      }
      </style>
      <h1>A style-scoped h1. Holy crap it's red!</1>
   </div>
</body>
</html>

If you’re running FF21 you can see an example here:
http://www.benjaminkeen.com/experiments/scoped.html

There’s still a long way to go, but this is tremendously encouraging. I have little doubt that Web Component shim developers (Polymer, anyone?) will be making use of this new feature in no time.

Hopefully the other browser vendors will implement this soon. As always, see caniuse.com to keep up to date:
http://caniuse.com/style-scoped

Read More

generatedata.com: site update

Posted on May 15, 2013 in Data Generator, Open Source Projects | 0 comments

This weekend, assuming all goes well I’ll be rolling out the new generatedata.com. And about time! I’d originally expected to get the script re-written by January, but found myself spending inordinate amounts of time birding and doing other non-programming related activities. Oops.

The new website is a private fork of the free, downloadable version I’ve been re-writing this last year, which includes a few additional features: a donation section and some extra blurb for people to learn more about the script.

I’ve enjoyed the re-write tremendously, but very happy to see it finally get out there. I’ll make another post when it’s been released.

Read More

New job: CBC Music!

Posted on May 15, 2013 in Blog, Training / Conferences | 0 comments

I’m extremely excited to say I’ll be starting a new position at CBC Music, here in Vancouver in mid-June. I’ll be in a similar role as web developer, doing what I can do to help out with cbcmusic.ca – mobile, desktop – as well as hanging out with the celebs, naturally.

I’ve been at Central1 Credit Union for a total of 3 years now (with a year break in the middle) and as much as I’ve enjoyed it, it’s definitely time for a change. This last year I’ve worked almost entirely on helping design and develop a large-scale JS framework built on requireJS. I learned a fair amount but it’s definitely time for new challenges.

So, in a little over a week I’ll be saying goodbye to my co-workers, then flying off to Florida for a couple of weeks to go to JSConf (a javascript conference) and for my honeymoon (did I mention I got married?) then back to Vancouver to start the new position.

Can’t sodding wait. CBC!

Read More

Documentation complete!

Posted on Apr 27, 2013 in Data Generator, Open Source Projects | 0 comments

The Data Generator 3.0.0 User Documentation and Developer Documentation are now online:

http://benkeen.github.io/generatedata/

This is the first time I’ve used github pages for the site, and I gotta admit it’s pretty convenient. None of the default themes really suited my needs, so I did a quick bootstrap customization to get it looking right. I made the pages work responsively, so it should load moderately well on mobile devices.

Next step: update the website. Then, onto newer projects…….. :D

Read More