The Changelog: Software Development, Open Source - Formalize and News Roundup "Design Edition" (Interview)

Episode Date: March 22, 2011

Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog.

Welcome to the Changelog episode 0.5.3. I'm Adam Stachowiak. And I'm Winn Netherland. This is the Changelog. We cover what's fresh and new in the world of open source. If you found us on iTunes, we're also on the web at the changelog.com we're also up on github head to github.com slash explore you'll find some training repos some feature repos from the blog as well as our audio podcasts if you're on twitter follow changelog show and me adam stack and i'm penguin p-e-n-g-w-i-n-n join for a special roundup episode by mr. Nathan Smith, aka the 960 dude. Nathan, why don't you introduce yourself for the three people out there that don't know who you are. Hey guys, I'm back again because Wynn wanted me to be on the show.

Not Adam. So I am. Oh, and Adam. So thanks for having me. Cool, you've got some new codes to talk about since the last time you were on the changelog. So last time we talked about the 960 CSS grid system. Now you're out with formalize at formalize.me is the URL. What's this all about?

Oh, yeah. I kind of alluded to that. It was in progress last time we talked, but it wasn't launched yet. Basically, it's as close as you can get to a form reset. So rather than try to make the forms look crazy different or replace anything on the fly with JavaScript, creating accessibility issues, it just tries to take the elements that are there and make them look as close to the default that you can

that all the browsers will kind of agree on. So at a glance, it's not supposed to stand out necessarily. It's just supposed to look at it and say, yeah, it looks like a form. So that's pretty much it. But, I mean, there's quite a bit of code involved, but, you know, it's an accessible approach. So what's the idea here? So that the forms look exactly the same in all browsers or just enough? As close as humanly possible without resorting to hiding elements

and creating fake elements with JavaScript. So what's the deal with browsers and forms anyway? I mean, is this an operating system affinity that they have or is it more just each browser has its own way of displaying form elements honestly it's kind of like seinfeld says who are the ad wizards came up with that one i would love to sit down with whoever decided you know on all these different browsers that we're going to go a different way than the operating system or whatever. I mean, Chrome on OS X looks totally different than Chrome on Windows or Chrome on Ubuntu or Linux or whatever.

Same with Firefox and stuff. So, I mean, they try to keep to the operating system default, but they're even different amongst themselves within the same operating system. So, formalize is an attempt to get them as close as possible to one another. So 960 is pure CSS, but in formalize you've got JS library support for Dojo, MooTools, Cintia, jQuery, Prototype, even YUI. So what's the JavaScript component here? It's just a little, what do you call it, polyfill that will add HTML5 form support to browsers that don't have it natively. So if you're in like IE6 or IE7, the autofocus attribute will work,

the placeholder attribute will work, stuff like that. So it does a check first to see if those already work in the browser, and if so, it leaves them alone so you get the browser native handling. Have you seen the exhaustive HTML5 cross-browser polyfills on the Modernizr repo on GitHub? I have. Those are pretty cool. For this, I just wanted to do pretty much the styling

and then the small polyfills were low-hanging enough for just the autofocus and, or sorry, autofocus and placeholder and that type of thing. So, I mean, because a lot of those already exist, I didn't want to attempt to just recreate the wheel there, but what I couldn't find was something that made form elements look kind of default-ish across the browser spectrum. What sort of feedback are you getting on formalize from the community? It seems to be pretty well received. I actually had a guy call me at 1030 last night that wanted to talk about it. That's always fun. I wasn't sure how he got my email or phone number. I wasn't sure how he got

my home phone number, I should say. So I was like, I'd really love to talk to you about that, but if you send me an email, it'd be a lot better. Because, you know, when you've got a kid, you don't want to be talking web at like 1030 at night, so. Talking to web at 1030 at night, so this is not something you normally do with your wife, is talk web? I mean, I'll chat with people, but I mean, it's a whole other thing to have a phone conversation with somebody that doesn't even introduce themselves. Just immediately pick up the phone. Hey, did you do formalize? Yes. Cool. I have a few questions. Who are you? You know, a little weird.

Were you telling me the other day that you went out to dinner with your wife and she didn't want to talk HTML5, JavaScript, or CSS3? Right. So, you know, I said I could frame it as food, clothing, and shelter, but, you know, that didn't go over too well. Well, looking at the demo, you actually have quite a bit of different camp support. You've got Dojo, you've got jQuery, MooTools. It seems you've put demonstrations up in each one. What was involved in that? Initially, I did it in jQuery.

Then I had somebody volunteer with a poll request for MooTools, and I thought, well, if somebody wanting to do it for MooTools, there's probably a chance that they want it for other libraries too. So I went ahead and did the Dojo prototype and Yahoo ones because I was already familiar with those. And then another guy volunteered to do the Sencha one, or the, I guess it's EXTJS. So, yeah, basically I didn't want people to look at it and say,

oh, this is cool, but, oh, I can't use it because we've already standardized on a library that it doesn't support. So I'm going to ask the number one question probably on everybody's mind is that you're a recent SAS convert, but this is in CSS. Right. Well, it actually comes with a, like, underscore formalized.sas file that you can use if you want. Boom. Just like that. can use if you want. Boom.

Just like that. So boom. So boom. So what's a CSS to SAS convert look like these days? Pretty much like a web developer. I don't know. I guess the last time on the show you asked me about SAS and I hadn't really used it, so my answer was like, yeah, it seems good.

My initial response to win was get off my lawn, you know. I remember that. But, you know, I've been using it since starting this new job at HP, and we use it as a team. So kind of like, you know, you jump on the project, and it's already in the project, so you kind of run with it. And I really thought I would miss the curly braces and even was wondering, like, oh, man, is this going to ruin me for real CSS?

But I think, you know, after a certain point, you realize CSS is not so complex that it's going to kill your understanding of the language itself. So beyond just killing CSS, what about things like CSS3 support, like rounded corners, the things that actually take up, like, eight lines to support all browsers? Oh, yeah, I mean, not having to type, like, dash web support, the rounded corners, the things that actually take up eight lines to support all browsers? Oh, yeah, I mean, not having to type dash WebKit, dash Moz, and all the permutations is awesome.

How much time do you think you've saved? Not just time, but also just brain cycles. Yeah, I think, too, at the end of the day, you're not typing all that stuff over and over, so probably saving on like metacarpal i don't know um it's i can't you know quantify the exact amount of time but i certainly feel more productive using sass i kind of hear this song in the background do you hear that it's a whole new world i'm going back to aladdin is that where you're going hey dude you

put the movie things out there all the time so I pull one out of the cup I'm just like probably sort of cracked up but your choice of movies is like children's cartoons and things that's great I keep it simple you know you know what's funny is I love the indented syntax of SAS

the SCSS syntax still supports the curly braces but we both prefer the indented syntax, the original Sass syntax. But what's funny is I prefer the indented whitespace in Sass, but yet I prefer Ruby over Python. But just to prove there is a yin and yang to the universe, it seems like I'm giving all the curly braces back

in my mustache templates. I love mustache as a templating language. You guys used it? No. templates. I love mustache as a templating language. You guys used it? No. No. I have not. However.

So much to teach you guys. Since Wynn likes it, I have the feeling I'll be using it on a project in the future very soon. Absolutely, dude. Well, the good thing about Sass really is that it's so easily converted from one to the other. So you can pick a camp if you want. Like for me, I got a couple extensions out there that I actually deploy. I write the SAS, but I have a rake task to convert it to SCSS before I actually ship the gem. So it's available to both camps.

I'm agnostic. Huh. To me, just as an end user, and it, it sounds like you prefer SAS too, but, um, you know, I thought I would like SCSS, but once I got into it, it's like, if you're going to go different, go all out, you know, and save that typing. I don't know. It just seems more logical. Yeah, totally. I'm with you. But the, the point really with that is that you've got, uh, people who are scared of SAS is like, Oh, I've got to change things. Just like the comment for you had at first too. But if they're just a CSS player, they can easily just use that SASS, or sorry, the SCSS, because it's basically CSS.

I mean, you could just drop CSS right in that file and it runs. No problem. I guess what I like about SASS is when you go into a SASS file, you know that you're in a SASS file. You don't have to look and say, okay, are there any variables being used in here? Aside from, I mean, obviously looking at the file extension, but it seems a little more straightforward to me. You know, one of the things that you liked

when we chose the Intended Syntax for the project we're working on is the one less decision to make around how do I format my style sheets? Because with the intended syntax, there's really only one way to arrange your style sheet code with the CSS traditional syntax. Everybody's got their own opinions on how to format it. Oh, yeah, I mean, it keeps the one-line CSS riffraff out.

Well, not only that, but I mean, not to jump on the sister project of SAS, but Haml does the same thing for HTML. Yeah, I can't tell you how many times I've got to the end of a file, you know, ERB or HTML file, and you see close div, div, div, div, div, div, and you're like, what? Well, okay, I know somewhere something's unclosed, but I don't know what it is. You haven't felt it the best unless you've actually dealt with a conflict with Git, and you've got a massive ERB file or straight-up HTML file, and try to work your way out of that. What's worse is when one of the closing DIT tags, the missing

ones are down in a partial somewhere. Yeah, that's true. On the flip side, sometimes I'm like, I really just want to do a data-attribute. Is that so hard? As with any abstraction, it seems like the simple things are what become hard you know with abstractions that make the incredibly hard things very simple yeah i think there's trade-offs either way but i i mean i prefer hamil if it's on a project already um i would probably say that i you know that's the old saying or whatever came for the hamil stayed for the sass so if i came for the s and Hamill, I'll take or leave.

Kind of like, meh, I like it, but I wouldn't like, you know, cry if it wasn't in a project. But I would cry if there was no SAS, that's for sure. I might shed a tear. I would definitely shed a tear. With so much SAS talk, I know we're a little lighter on the listenership so far because there were some comments in the convoy room the other night about someone saying if I hear Hamill and Sass one more time on the changelog,

I'm going to shoot myself in the face. Uh-oh. Our condolences to your families. Let's do a roundup show, shall we? Let's kick it off. Who's first? And this is totally unscripted. Obviously.

So, Adam, what would you like to talk about first? I think just kind of continuing down the whole style framework, let's talk about HSL. So before this conversation, I kind of got a little bit of a brain teaser from Wynn about what HSL is. And Nathan, I guess you kind of backed me up with not really being sure about where this fits in.

Right, yeah. Initially I was like, so wait, I know RGB is of backed me up with not really being sure about where this fits in. Right, yeah. Initially, I was like, so wait. I know RGB is like a numerical equivalent of hex, but what is HSL? Right. So we got Brandon Mathis picking up the cool domain HSLPicker.com, and he threw up a very snazzy, very beautiful site to demonstrate a lot of, I guess, some of SaaS in the behind, because I know that he's a Sass dude. And then some nifty JavaScript.

But Wynn, HSL, what is it, bud? For those that don't know, HSL is hue, saturation, and either lightness or luminosity, depending on your flavor. Basically, it's the three dimensions that I think how the human brain works around picking color. Normally, when you sit down to pick a color, you start playing with those RGB sliders, and you're like, what the heck?

And then you flip over, if you're on Mac, you flip over to those crayons, and you pick the one that's closest just by the crayon color. That's right. But HSL, give it a look. Basically, you have three sliders. The first one's the hue, so it goes from red to red.

So you can choose red through the oranges, the colors of of the rainbow all the way to meets red on the other side the second one is the saturation so the zero saturation is totally grayscale and 100% saturation has the full color component of the color and then the third dimension there is the luminosity or the lightness and so you can go darker or lighter. So that's usually how a designer, when we sit down to pick colors for a design, you want something that's a little warmer or something's a little darker, something's a little more washed out, you know, those types of scenarios. So this is a good way to pick those. And for those of you who know Brandon Mathis from, I think it was 0.1.1.

Fancy buttons. Yeah, not only fancy buttons, but also the kind of file-based blogging. What was it called? What was that show called? Octopress. Oh, no, not his project, but what was that show about? Oh, open source publishing. Okay.

So, yeah, he's got that cool Octopress kind of fork of Jekyll, which is snazzy because it kind of jumps out of the box with some cool styles. And Octopress is cool, but I will out-Brandon. He IMed me the other night and said he was taking a serious look at Nesta, Nesta CMS. Oh, of course. Why wouldn't he? Of course those links will be in the show notes. Up next is, I guess, Reveal, which is a jQuery modal for HTML5 and data attributes. Now, I haven't actually had a lot of experience with these data attributes yet, but I've been meaning to.

So we've got an expert on the show, Mr. Nathan Smith. Tell us what data attributes are. So in the past, you would have a tag, and you would want to store just a little bit of information. So if it was a link, you could abuse the rel attribute even though you weren't really describing what you're linking to. You just have, like, a dead link with a pound and you say rel equals triggers modal or whatever.

So I think, you know, the HTML working group, they realized that people were yearning. There's this deep yearning in the hearts of web developers for some custom attribute. So for that, you have data- and then whatever. So you could say, like, data-filling equals and say peanut butter jelly, and that's valid because you have data- at the beginning.

So recently, Dojo 1.6 came out, and they used to have, like, you would say, you know, tag name name div dojo widget equals and then whatever and now instead they say data dash and they have those type of things kind of prefixed with data to make it valid HTML5 So why data dash

and not just using the attributes no namespacing? I think it just makes it easier on the browser to know that they're all kind of living off the same thing. And eventually, with JavaScript, it's not implemented cross-browser, but eventually you'll be able to say,

have your element and say.data. whatever the dash is after that. So let's say you have data-peanutbutter-jelly. You could say data.peanutbutter.jelly, and that would return you the value of whatever is inside that, the quoted attribute value. So that would be cool because it's kind of object-oriented way to store little data snippets. This modal is from Zurb.

It's 100% buzzword compliant because it's jQuery, HTML5, and has data attributes. But Zurb does some awesome work. If you haven't checked out their designs, they've got a nice little sandbox up at zurb.com where they show a lot of their CSS tricks. It's actually funny you posted this one, too, because the day before you posted this, I was like, wow, this is awesome. Oh, actually, I posted this one because I saw you watched it on GitHub. Okay, okay, nice.

And I watched it because I was like, I've got to blog about this. And you beat me to it, which is awesome. I'm going to switch gears and talk about Rawler. You guys seen Rawler? I have not. I have not. Did we actually hear about this from our friends over on the Ruby show? Did we really?

Yeah. About two or three episodes ago, maybe four. I'm happy to give a shout out. Holla. So Rawler basically is a way to crawl your website and find broken links. So, it's a gem you install, gem install Roller. It's got a nice command line interface,

but you basically say Roller and give it a URL, and there in the blog post, I give it the changelog.com, and it starts crawling our website. Looking for 404s. Luckily, we didn't find any. Got a lot of 301s, just the way that Tumblr works. But it's a nice way to crawl your website looking for broken links. This is actually quite good news, actually,

to probably any one or two SEOs that listen to this because I can imagine becoming into a project and wanting to know, like, tell me about my site. You know, spider this thing. Give me a gist of, like, past things and have some, you know, kind of calendar data against what was spidered and what was found and what was not. Yeah, because when you're content farming,

you want to make sure that your crops are well watered, right? Speaking of, speaking of challah even, you guys seen Mahalo? Boom. With the content farm rules change over at Google's doing to those guys? So you got 20% layoff.

That's the suck. Yeah, so basically people were getting used to and even getting down to a science, being able to game Google's algorithm. They recently had an update to it, which pushed a lot of those content farms off the first page and subsequently dropped all their revenue from ads and whatnot. Would you classify eHow.com in that category? I'd say About.com ranks above them, but even that's kind of questionable. So, yeah.

When you see, you know, how-to articles on how to beat a nicotine addiction, I guess that one's semi-useful. I saw one article that was talking about content farms and linked to one that was like, how to make friends at college. It was like, step one, go meet people. Like, really? Step two, don't just stay in your dorm room. Like, how's people. Really? Step two, don't just stay in your dorm room. How's that, an article? It'd be interesting to see how the change in the Google index changes the web.

Because Google's index, I think, is slanted towards folks like us. It's amazing how you can put in just an ordinary word that happens to be a GitHub repo, and that repo's at least in the top three. It's pretty good on medical terms, too. But yeah, everyday ordinary searches kind of hit or miss. Did you guys see Inception? I did. I actually saw it three times in the theater. Three times in the theater.

I think the first time that I saw it was on a four-inch screen. We'll have to put that in the show notes to explain that, that weird noise. So I had to watch it again when I got home and then, um, you know, check out the, uh, the repo that we posted on the changelog. This one was uber popular inception. The movie explained in C code. This was from our friend, Steve Klabnick. Actually it's all this when it came out, it came out, um, I guess last summer. Um, I hadn't seen the movie, so it wasn't that interesting to me at that point.

But after I saw the movie, it's crazy. It came out on DVD, and Steve posted this in 181 retweets on this deal. It's just crazy popular. For those that don't know, it's basically the plot of the movie written in C. We also had a version of this in JavaScript. Right, Nathan? Yeah, there's a gist out there we can put in the show notes. Basically, and I think that's where we discovered console.group,

which is pretty cool. For Firebug? Yeah, so in Firebug, and I'm a WebKit inspector and so forth, you can not only say console.log, but you can say console.group, and then every subsequent console.log will roll up under that group. So what this guy had done was had several console.groups, one representing each dream level, and then gone all the way down to the undefined dream space

and then bubbled all the way back up. So this is a pretty cool example. It's a good way, I guess, to teach people that know about the movie how to read javascript and or vice versa i was kind of disappointed at the bottom it didn't have a little token though yeah totem well totem is that what they're called yeah totem like the uh the beer fest 2011 site what was the url to that i'll put it in the show notes i'll have to find that one but that was a for a party at South by Southwest.

It was done by Alex Guyron of CSS Beauty and include, N-C-L-U-D dot com. Made really good use of CSS3 animation. So as you scrolled, it zoomed in further and further and further. And if you went all the way down, there was a little

spinning top totem. When we clicked it clicked it to zoom all the way back out and say, beer by Southwest or something to that effect with a little sound effect. We've seen that effect in opening title sequences for movies for years. I wonder if this is going to be something that, if it's just a novelty, if this is going to be of use

in any sort of application scenario, the zoom into the app interface, we shall stay tuned. Compass Magic. We can't get away from SAS, especially since Nathan is on board. So Compass Magic extends SAS with the power of ImageMagick. Did you guys see this one? I remember you mentioning it. Well, it's built on RMagic and ImageMagic.

Those are the two standard tools if you're slinging the Ruby and want to do anything with ImageMagic. CompassMagic, you know, Compass supports out-of-the-box CSS gradients, but not all browsers support them. So this one will actually build static images based on the same linear gradient syntax and just compile images on the fly so you can just ship those images with your CSS code

and they work in any browser. That is awesome. It's pretty nifty. So who wrote this? This is from, and you were going to ask that, let me click the link, Stan Angeloff. Not Ashkenaz?

Not Jeremy Ashkenaz. Not this one. There's at least three repos in the changelog that are not Jeremy Ashkenaz's. This is actually really cool because a lot of times I catch myself in this scenario without this, just putting a background color, being lazy, or going the extra stretch of actually doing the gradient if I really want to be nice to the browser and don't support it.

You know, all it's doing is providing mix-ins, right? So you can still mix and match those standard compass mix-ins for the linear gradient, but just also supply a magic G-I-C-K namespace to to mix in above that one so that for older browsers it would pick that up so basically outputs like a png which is immediately redeclared as a css three gradient so that if the browser doesn't understand that css3 gradient it already has in

its mental model of how to paint it to use the background image instead. Exactly. Nice. It's a nice little syntax, too. So the example that we listed here on the blog is magic erase blue, which sets a default background color for whatever you're painting there, and then a linear gradient. You supply your color stops and then set your left and right corners.

It will actually draw rounded corner images for you. So I guess next up we had jQuery Mobile Alpha 3, which is the pow-pow. You excited about this one? Say what? Have you played with this one since Alpha 2? I have a little bit, yeah. It's pretty cool. What I like is that it takes, you know, the look and feel of, I guess,

several different mobile OSs, and it tries to kind of hit a sweet spot of looking good within each one without trying to look native. And I guess the logic there, I mean, I haven't talked to the jQuery mobile team directly about why they chose that way, but I think it's kind of cool because then, let's say, like there's an ios update that changes the way buttons look or or the way you know a particular background on a type of page looks that way you're not scrambling to try to update every time because you have your own look and feel for your app it's um you know it looks it looks um tasteful yet it's not uh trying to go one-to-one with the os that it's in. You know, the thing that struck me over the Alpha 2 release that was prior to this is just the amount of speed.

So the Alpha 2, as you would scroll even on the iPhone 4, which is quite a beefy mobile device, you would see the checkerboard transparent background underneath the document for a ways down the page while it was trying to paint the document. And this one seems a lot zippier. Yeah, I know they've been working a lot on speed and responsiveness. It's got to be a big problem to build a mobile framework that spans the amount of devices that they're looking to support

with a single code base. Yeah, I mean, it's a large undertaking. I heard John Rezeg on another podcast. I can't remember which one. You listen to other podcasts? I know, right? I mean, but you listen to other podcasts. I know. Right. Um, but I mean, I always check this one first and then I double check. And then if nothing else is posted on the change, like then I go listen to other podcasts. Good deal. But anyways,

John Rezic had said, uh, you know, he's talking about the expense that would go into testing on every, uh, mobile, mobile OS and how many phones you'd have to buy. And the interviewer was saying, oh, wow, so how do you guys do it? And he said, we buy a bunch of mobile phones and test on every OS. There's no real way around it in his mind. He was saying that's something that jQuery Mobile tries to do so that you as a web developer don't have to go and incur that cost yourself. They shoulder the burden for you, huh? Yep.

So how does this change the markup? Yeah, there's a little, I mean, there's somewhat generated markup. Back to data attributes, buddy. Boom, that's right. Yeah, so they have, you know, the data dash attribute, making generous use of that to mark which DOM elements need to be styled by jQuery mobile. What's kind of cool, though, is because most, I would say all mobile browsers, all good

ones anyways, understand that the, what's it called, attribute selector, so you can use that and not have to worry about browsers like IE6 not understanding that, and so it's something you can sprinkle in your markup and know that it's just going to work. Speaking of jQuery, you just got back from DrupalCon. You gave a jQuery talk up there, right? I did. What was the turnout at DrupalCon this year?

It was pretty cool. It was about 3,000 people total. I'm not sure of the exact turnout to my talk, but it was pretty packed, so that was cool. I talked a little bit about Formalize and a little bit about the jQuery desktop, I'm not sure of the exact turnout to my talk, but it was pretty packed, so that was cool. I talked a little bit about Formalize and a little bit about the jQuery desktop. It was just kind of fun to see if I could do a desktop and a browser. So it was good.

I talked about why you should namespace your JavaScript and not have a bunch of global functions sitting out in the global namespace. It was pretty cool. I'm hoping they'll have the video posted soon and let you guys know if they do. So what got you into Drupal? Actually, it was my friend Matt Farina, who does a lot of work in Drupal and works for Palantir.net.

They do big Drupal projects. He said, there's going to be a design for Drupal kind of camp in Boston at MIT, and you should really come speak. I was like, dude, I know nothing about Drupal, and I'm not sure if I want to use it. And he said, well, you know, just come and talk on 960. So I submitted a talk, and one of the other guys that was going to be there, unbeknownst to me, had already given a talk on 960 at several Drupal camps

in different countries and so forth. So he said, hey, do you want to just, like, come partner with me and pretty much read off my slides? And I said, yeah, that would be great, you know. So, you know, it kind of came for the talk and stayed for the community. It was pretty cool. Once I started looking at it and wrapped my head around it, it, you know, found the theming to be pretty intuitive.

So it's definitely not something I'd want to write myself. So, you know, as a front-end guy, any CMS that kind of helps me is a good one to me. You're running 960GS on it? Yeah. So on my own site, I've got it in there. They actually launched Drupal.org based on 960, stripping out the CSS classes they didn't need and kind of renaming them to what they wanted.

But the grid is there in full effect. Boom. I guess the only thing I want to say about that, just to plug myself for a quick second since there's some loud booms going on, Swordsforge.net actually runs something that's similar to 960 as well called Grid Coordinates. Grid Coordinates. A SaaS project. But we talk plenty about SaaS, so

that was just a quick plug, but bigger in the world is the world of open source as it pertains to the government. We had a post a while back called Open Government and it was intended to essentially shine a light on opengovernment.org, which

is an open source Ruby project headed up by Sunlight Foundation and those good folks, which we actually had an episode on a long time back. Seems to be a growing space. There's a whole conference that I'll be attending in Oklahoma City in May called Gov2OA, which will be talking a lot about open government. But we had these guys on the show to talk about Open Congress and some of their efforts in the Open States Project. It was really interesting to see transparency shining a light into our government and letting us see a little bit more about the gears of government

and sometimes how scary that is. I think one cool thing about this is just that if you're the kind of person who wants to step up, maybe just learn about code, you can jump into this Rails-based project and learn a few things. There's tons of API stuff. They were pulling stuff from Google and many other sources

to bring in all this data. So it's, in my opinion, visually as well as, you know, for backend devs, it's quite a nice project to just kind of like cherry pick from. You know, that's the cool thing about having, you know, GitHub out there that has not only projects that you can go and fork and run yourself, but live sites that you can go and you want to feature on the site, you can contribute the feature and give it back. And if it's the patch is accepted patch is accepted, they'll push it live. I remember GemCutter, which became the new rubygems.org started out that way.

We wanted avatar support. You go in, you fork it, you add the avatar support and boom, it's up in the site in a couple of weeks. This broadcast brought to you by Boom! This is a fun project. I like this a i'm a uh a speech empath so when people start using uh phrases around me i pick them up so that's not always a good thing that's why i

don't hang around with people with tourettes stylus i don't know stylus This was one of yours, buddy I know, I know but I'm saying, just in general here's the first thing about this the CSS preprocessor world aka Sass, Less Sass.js whatever

has got one more, not so much a contender but contributed to the importance of pre-processing CSS. And here's the deal. There's so many ways to pre-process CSS, and we're talking Compass, SAS, less JS, Stylus, all of these out there. It just belies, you know, a broken language, something that is just begging for more power, Captain. Yeah, I think when CSS was created, the idea was like, well, let's treat designers with kid gloves.

But I think more and more things are shifting from web pages and websites to web applications. Front-end developers slash designers are wanting that power, more of a programmatic environment. So by happenstance, Adam, you retweeted a Zeldman tweet over the weekend from, I guess, a year ago, where he said, real web designers code always have, always will. That was the leading message in a Southwest Southwest panel I attended last weekend, pretty much the same name, designers who can't code, no excuse. But what I found interesting, I went there looking for any hint of Compass SaaS, any sort of, even jQuery frameworks and things, and the skewed audience of the room,

their definition of code was getting out of Photoshop and actually writing the markup. I think there's this slider between Adobe World and what goes in the browser. I think we've made it our mission to get more developer experience into the hands of designers and also on the other end try to help developers

not make their pages suck as much i mean there's only so much automation you can do in the sass slash uh you know pre-processing world but definitely i think that um it kind of aggravates me a little bit to see such a phenomenal designer have no idea how to make it a real web page you know at the end of the day you can't teach or you can't um you know program things like white space and vertical rhythm with your typography and color theory and some of these things like even the white space thing 960 does a great job of giving you a groove but it still takes a human eye to figure out, you know, the elements of a good design. I guess what frustrates me is curmunginy designers that don't want to learn new tools and would rather command C, command V their way, you know, just brute force to a new

design instead of working a little faster and putting more brainwaves, as you said earlier, on the actual design itself. So I mostly agree with that, but I'll play devil's advocate for a second here. I've worked with people that are phenomenal designers that do know how to code, and it translates to, as a front-end developer, if you are handed a design they've done, it's super easy to slice it up because they know the medium they're designing for what's possible and what you can accomplish. I've also worked with guys that are amazing designers, understand

everything about typography and white space and texture and so forth, who would be the first to tell you that they don't code. And some of those, though, really challenging to translate into code when you are handed that type of design is actually kind of fun because here's somebody that's not designing with constraints in mind at all. And it was not only challenging but fun to bring that to fruition as a web page in the browser and say, look, there's no compromise on the design at all. But, man, I really had to think kind of how am I going to make some of these things work because the person handing me the design didn't place any code constraints on themselves?

I've heard that argument in the past. I guess I've seen people that have pulled off both extremely well, and they're rare, L.A. at J. Stocks being one of them, but that really get both ends of it. So I guess I'm not sold on the idea that you're mutually exclusive, that you can be a great designer, and suddenly if you start learning the development medium, that things are going to fall out of your head or you start putting artificial constraints on your design. I think it would definitely behoove any purely visual designer to learn more about the medium they're working in, whether that be knowing paper weight and the stock of what's going to be printed or, you know, in our case, how it's going to translate into the web. I think that's the biggest one. You know, I've worked with a lot

of really, really gifted print designers. And, you know, I got, I started cutting my teeth in print design years ago. But working with those guys, they don't understand, as you say, the medium. They don't understand something so basic as browser width and screen size, screen resolution. It's just very hard to translate even what they do know of design

into that new medium. One of the most best that I know of, at least, print designers turned web developer, Sorry, web designer. I correct myself there. But his name is Mike Hoos, works at Carsonified. And I'm sure that you guys will echo this whenever I shut up. But he's by far one of the best print designer's turn web designer that I just adore his designs. Yeah, I think, you know, when you have that background, you know, or, you know, take somebody

like Jason Santamaria, too, that went to school for design, has, you know, done the letterpress, knows, you know, the medium through and through in the history behind every typographical decision he makes, you know, I think that does translate into the web. And, you know, somebody like,'re you're saying that can it gives you a depth a richness to what you produce that you probably wouldn't see if you didn't have that type of background i always feel like a hack when i try to do any type of grunge or textured background i'm like i can do it but i never feel like i always feel like i'm trying to pass it off i'm like does this look grungy enough? Because I don't know.

So this entire conversation kind of popped up around Stylus, which was one of the latest creations of LearnBoost. We've covered, I don't know, how many LearnBoost projects have we covered? Ah, LearnBoost and even TJ on his own. Yeah. But Stylus has a beautiful homepage. So the next question I have for you, and which is sort of loaded, is how does Stylus' homepage stack up against the top 10 reasons

why I won't use your open source project? I feel like I need to set a big fat caveat on that. If you read the first paragraph of the post, it wasn't as snarky as the link bait headline proved to be, but hey, it did drive some traffic. I was happy with that. Just some pointers. People don't read on the web. People don't read. They read headlines and they retweet.

Even Dr. Nick, when we had him on the show a couple of shows ago, he's like, oh, I read the first couple. But I always am suspect of somebody that's tweeting me when his wife's having a baby too. So I doubt he was actually reading the post, but 10 things that you can do to, um, you know, get the word out about your, uh, open source project. So not necessarily a litmus test. So it's funny as we've had loads of mail at ping at the changelog.com. If you would like to submit name and town, name and town, if you wish to opine. You know, top ten reasons of submitting your, or to promote your open source project.

It's funny, we get submissions now that say, you know, here's my ten-point checklist. I think you'll find that I meet all of these criteria. It's like, well, it's not, I mean, I appreciate it. You started a movement, dude. I guess. Yeah, you get like 200 points for spelling your name right on the SAT, right? Yes.

There you go. Read me. There you go. So it's not meant to be a filter. What it is is meant to guide you in some just practical things that you can do to expose the world to your great open source project. Because we scratch a scratch on a scratch on open source, and we just can't cover it all. We're drinking from this fire hose, and we pick up things that interest us.

And for the guys out there that say that we cover too much Ruby and JavaScript, well, if you know Python, hey, contribute. Or in this case, this episode's big, gigantic gorge of SaaS talk and front-end talk. Yeah, this is the change-logging design edition is what this one's going to go out as. But nonetheless, this post was...

I've been talking with John Long about Serve. He was on the last podcast with us, 05.2. But we actually took this list and started comparing what we want Serve's homepage to be in comparison to what this is and just does the project add-up. So I think this truly does have some legs and you're right. The people don't read the headline totally,

you know, painted the world for this post. Not that it's not creditable, but it certainly gave it a lot of legs and sort of controversy and sort of conversations. But I honestly think that this is extremely helpful. Well, if you're not turning anybody off,

you're not turning anybody on, I guess is the takeaway. So I'm glad that, you know, a couple of folks at least, uh, has sent me private messages that, you know, they went out and created a homepage for their project just after reading this post, which, uh, makes me happy. Um, be even happier if they use a 960 grid system on said, said post. So, well, actually, um Well, actually, at the time you wrote that post, Formalize was out there. It was on GitHub. It had multiple library support or whatever,

but there was no homepage. So that's kind of what spurred me to make a homepage for it. There you go. Here's the last point on that. And the reason I said this, and I actually had a tweet back and forth with Ryan Bates, who runs the excellent, most excellent Railscast.com. So if you came into the Rails community after he started that, I'm sure that you cut your teeth on those awesome screencasts where he walks you through different parts of Rails.

But, you know, we were going back and forth on Hacker News where he said, basically, I don't buy into the whole SEO argument of why you need a homepage for your project, because I searched for CanCan, which is one of his projects, and it's an ordinary term, right? It's a dance, right? Former theater. And yet, his GitHub project is the first hit on Google. But my retort was, you know, that's true, but then you have to know what you're searching for. But if I search for Ruby authorization, which is what CanCan provides, the only hit on the first page of Google is a blog post, not written by him,

but is outlining how much they love CanCan. That's really what the changelog's doing. We're doing nothing but shining a light on other people's projects, right? We're just trying to expose the great work that you, the listeners, are doing. And so part of how we do that is we take your project, we take your witty yet poorly SEOed project description, we turn it into sometimes a link bait headline.

If we can work HTML5 in there, it works really well. Speaking of which, HTML5 boilerplate just hit 1.0 and was updated today. Boom. Paul Irish needs to come on the show. I saw him at Southwest Southwest. He's promised. So we'll have to start turning the screws on that. I'd like to put that into, what was that.ly service we use for getting Sabotory, Libby?

It might not even be up at this point. That whole domain is Libya. Oh, that's true. But just to complete the thought on that, what we're doing is just pointing traffic at your project, and then over time, of course, your GitHub project is going to be the number one hit for your project on Google, and that's the way we want it.

We just want people to know about your project. So to add some weight to that argument, I just did a search for formalize, and other than the way we want it. We just want people to know about your project. So to add some weight to that argument, I just did the search for formalize and other than the definition in line, you know, from the dictionary.com, the number one result is my blog post. And then number four down is formalize me. And if you search for form CSS,

mine's number six. So there you go. Great points. You need to blog about your stuff too. That's excellent point. And I just, I mean, I love how you owned a word of the English language. I'm just going to take, you know, ordinary word. I'm going to make a project out of it.

I will be number one in PageRank. Well, to be fair, I did search and make sure that nobody else had a project by that name. Did you really? It's like the new trademark search for open source stuff, you know? What's funny is that there was a Java library called jQuery before John Resig made it into a JavaScript library. And I think they had to like change their name or kill the project or something. But I mean, there's no way you're going to find that one now when you search.

You know, it's funny. I come across repos all the time on GitHub that, you know, formerly so-and-so because there was this other project out there, right? We even talked about that in, you know, Hudson that became Jenkins. The name they wanted was Alfred. There was already that Alfred app, which you like, Nathan. Yeah, it's awesome. Basically Quicksilver on steroids.

Quicksilver on steroids. Quicksilver on steroids or as... I think it was Brandon Mathis was talking about how... I guess Alfred was a tricycle and Launch Bar was a motorcycle with a rocket pack. I don't want a rocket pack. I just need something getting me quickly from point A to point B just locally. Well, Alfred's not open source, but since we're talking about it, I use LaunchBar. And the only reason I haven't switched is because I like to hit Command-Alt-Return, which basically gives me the last 25 clipboard history, basically. And that's the only reason I don't move,

because I love, I use so much my clipboard history, especially if you're copying and pasting code or you're writing something and you kind of need to go back in history with what you copied. It's been really nice for me. Like, tons of stuff. I've got the same shortcut wired up to command slash.

I get my clipboard history. It's really, really cool. So you use LaunchBar as well? I am a LaunchBar guy. Yeah. Definitely. And the only reason I think it's because it came with MacHeist, which was the precursor to the new AppSumo.

Have you guys seen all these deals? That's where we got our... Change log sticker Mule stickers. So the show did have a sponsor. Oh, actually, no. We paid them money. Sticker Mule, if you're listening, we know that you're fans of the show

because I have a tweet to back that up. We would love it. Must be true. We're holding you to it. Cool. That's it for this special design edition of the changelog. Do you want to throw in that one last thing, which is how to style Firefox specifically?

Oh, dude. We can put that in the show notes. I forgot all about that. So, yeah, just like, you know, what was the other thing that we learned about the group and console? Who knows how long that's been out in WebKit or Firebug. Firebug, yeah. We've been doing this for years, and you learn something every day.

You found out a way to target Firefox today without adding a class to the HTML or body tags. Yeah, so don't go overboard with this, but if you need to do slight tweaks, you can say at-mozdocument space url-prefix with parentheses and you can pass in your url or you can leave it blank and it'll just apply to whatever page it happens on. And then within there you just put your styles

like span, color black, font weight, whatever, bold. So we'll have a little, we'll have a link to that in the show notes and a gist probably. And as my wife would say, as my wife would say, yet you've never picked up any chicks with these skills. Says who?

True. Except for her. But it's the skills that pay the bills. That's true. I'm going to steal that bit of yours as you might like to know them. Food, shelter, and clothing. Yup, yup. That's it for a special design edition of the Change Log. Thanks, Mr. and clothing. Yup, yup. That's it for a special design edition

of the Change Log. Thanks, Mr. Nathan Smith, for joining us. Yes, sir. Thank you. Thank you for having me. Cool. And we'll see you next time. See you then. For the first time Safe in your arms As the dark passion