I just saw this awesome talk by Merlin Mann (@hotdogsladies) titled Scared Shitless.
If there’s something you want to do but you’ve been too scared to do it maybe you should watch this. Get a little courage. Get some gumption! And do the damn thing! ROOOOOAAAAR!
Over the past few weeks I put together this talk for my team at GE to help get everyone on the same page with AMD modules. I figured it’d be cool if I removed any GE specific stuff and open sourced the presentation, so here it is!
The video is around 35 minutes long and there’s a slide deck available on Github that has clickable links and whatnot. Enjoy!
Yesterday I did a post on the HTML5 <template> tag which is part of the new Web Components standard. I didn’t go into a ton of explanation as to why I’m so interested with this spec and I think jumping right to the <template> tag was probably pretty confusing for folks who don’t have the same needs as me. I want to back up a bit and present a high level overview of Web Components and then illustrate why this is such an important concept.
If you’ve been following the Google Chrome release announcements you may have noticed some interesting terms popping up as of late. Phrases like “Shadow DOM”, “Custom Elements” and “Template”. These are all part of a new standard referred to as Web Components and the latest versions of Chrome are starting to implement them. Basically a Web Component is an encapsulated bit of markup, styles and script that allow you to reuse widgets across your page without worrying about accidental collisions. For a practical example consider Twitter Bootstrap and its myriad of buttons, dropdowns and badges. Bootstrap comes with a lot of CSS which means, right out of the gate, there are a ton of class names which you probably shouldn’t use for your own elements. Want to define a class of .container? Too bad, Bootstrap already uses that name. Want to upgrade Bootstrap in a few months? OK, but you need to double check that none of their new classes conflict with any of yours. Kind of a pain, right? Wouldn’t it be awesome if you could use all the little widgets from Bootstrap and not worry at all about possible collisions? Well, that’s what Web Components are trying to solve and so today I want to look at one part of the Web Components standard: The Template Tag.
hubot. How on Earth did we exist without you? Really I feel like I can demarcate my life into two phases: the time before hubot, and all the awesomeness after. For those not in the know, hubot is an amazing chatbot created by the team at Github. Out of the box he has a ton of cool features but once you start digging into the hubot scripts catalog things get WAY more interesting.
One of the most exciting projects is play, a combination iTunes remote and streaming music player. Play lets you broadcast music to everyone on your team and allows anyone in the chatroom to dictate what goes into the queue. Personally, I don’t use iTunes all that much, opting instead to use rdio for all my music needs. I figured, wouldn’t it be cool if hubot could do all the same stuff he does for play…but with rdio! So that’s what I set out to build.
11/19/2013: Updated to work with LESS v1.5.1 which now has support for v3 source maps
If you’ve spent much time with preprocessors like LESS you’ve probably discovered their one rather crippling flaw: debugging. With thousands of lines of LESS code suddenly turning into even more thousands of lines of CSS, it can become nearly impossible to tell where a particular style originated. Thankfully the Chrome team is addressing this problem with their recent support for CSS source maps.
Today I’ll teach you how to rework your LESS preprocessor so it plays nice with Chrome and reunites you with your old friend: the CSS inspector.