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

generatedata.com beta #2

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

The generatedata.com rewrite project is definitely on the final stretch! This latest Beta contains all the remaining user account CRUD functionality, which wraps up all remaining development. As usual, you can find it here:
http://beta.generatedata.com

There are a few more changes coming down the pipe.

  • First, I’ve added a simple User Documentation section here: http://benkeen.github.io/generatedata/. It’s crude right now, but it won’t take long to get ship-shape.
  • Secondly, I’m going to be moving the Developer Doc out of the downloadable script and into that section. Initially, I thought having a one-stop shop of all documentation within the main download (PHPDoc, JSDoc + Developer Doc) would be extremely convenient, but I’ve lately been rethinking this, due to the next point…
  • I’ve removed the built-in PHPDoc, and will shortly be doing the same for the JSDoc. Frankly it was just more fuss than it’s worth. In today’s world, github easily allows for browsing of the code – and the additional layer of auto-generated documentation just didn’t add enough value. The code is very readable. If you were able to make sense of the auto-generated doc, then you were able to make sense of it via the source code.

I’ve also started on the new generatedata.com website. I forked the public project into a private repo so I can easily update the codebase from upstream. Should work well, I think.

And… that’s pretty much it! I’m quite pleased with my progress these last few days.

Read More