 Buzzwordy title, but talk to you kind of basically about using serve with sass and compass Nowadays I tend not to use a lot of design tools other than like making quick assets In terms of like designing a whole page. I tend to just kind of jump right into the browser Right or wrong better or worse. So I'm going to talk to you about that today So I do mobile web stuff and you actually see things at the company called project two or two We have a Austin office in the Dallas office, and we're going to be opening Seattle pretty soon If you are the type that feels like you have to write everything down You can just go here and kind of skip your skip having to do that if you still want to take notes It's fine by me. Just don't feel like you have to So yeah, oh, sorry, I'll do all in this for a sec so it used to be that You know we would make a design and it would be a PSD or a fireworks PNG or whatever it might it might be And we design everything out right and we'd show that to the clients to get approval and everything's static And there's a drop-down where we'd have a comp for that the drop-down not expanded and the drop-down for the you know Comp for the drop-down expanded Everybody get this URL So truth be told like I kind of missed those days because it was easy, right? and you could still do that but I tend to think of That is not what we do anymore, and that's kind of the that's kind of the design equivalent of this code which This isn't exactly what I ran to on a client site recently, but it's not very far off And so I kind of feel like you know our workflows have kind of evolved since then right we're not doing table-based Layouts where we're just fighting against specificity to try to get that one TD to be the color. We want it to be right And so back in the day or I mean still we have these great design tools at our disposal in adobe It's continuing to kind of evolve and you know make better HTML 5 tools But then you know this happened and I think this is the pivotal point at which Basically my world fell apart. I don't know about yours this article came out And I kind of was like all right had it open in a browser tab for a few days, and I finally read it and I was like Wait, this is gonna change everything. No, I like things the way they are And of course that article and that site now looks like this And if you constrain the site the site can do that and you're like oh my gosh everybody's doing it So that's the term responsive web design that was coined coined by Ethan Marcott in his seminal article Responsive web design and Basically, it means using fluid fluid grids and media queries to make things kind of flexi and fit any any screen, right? He also wrote a book So when I heard about this technique at first I felt kind of shock and denial like no way that cannot be done And then I felt guilty for like After having read that continuing to make finish up that client side I was working on it was a fixed width right and then bargain will like maybe they'll go away I mean flash was a fad maybe media queries are not here to stay You know and then I kind of felt depressed after it took root and more and more sites were launching Over how little I knew about responsive design then it then I started looking up like well Hey, I could learn CSS I unlearned table-based layouts. Maybe I can learn this this flexible stuff And then I kind of reconstructed my way of thinking and finally I felt hope like I think I can actually do this So yes, those are loosely interpreted the various stages of grief So I went through denial and bargaining and it finally kind of we come out the other end of having our world turned on its head With responsive design and realize that this is gonna take kind of a new It's gonna require a totally new workflow if that's gonna be our final product So then the naysayers cropped up. This is actually a guy pushing back against naysayers But one of the critiques which we heard about this morning is what do we do about images, right? So responsive design is bad for performance because you're sending down a desktop image to a mobile phone and how dare you, you know But like any technique you can't really blame the technique itself. It's really more in the implementation So I kind of think a responsive design like accessibility. It's not an add-on at the end You know your client doesn't bring you a site. That's totally out of Compliance with accessibility and said you know say add can we tick the checkbox of accessibility or can you make it responsive? You know so I'm like sure yeah When's the next full redesign that you're gonna gut everything and redo it over and you know like redo everything? I mean you can add some media queries to kind of hide what's there for desktop But really you want to be planning from the beginning and I like this illustration because it's it's not good If you're trying to use the stairs, it's not really that great if you're trying to use the ramp either And I mean what do you have to use for the handrail on the other side? It's like this spiky fence thing so anyways I just love that picture as an example of tacking on stuff at the end instead of playing from the beginning So basically if you're a designer or if you're a developer having this wall divide of you're gonna Do the psds and you talk to the client and I don't need to talk to the client or know who the client is really and all I know is when I see psds putting in front of me. They're fine. All you've agreed upon them with the client now I'm gonna code them. It's not really the ideal workflow So I think of it as we need to change our vantage point and see our our role in a kind of continuum of Of the project rather than I'm gonna do my siloed work Then I'll hand it hand it to you you do your siloed work and then after me as a front-end developer is done Then I hand it to the server side developer and he does his siloed work These are my two kids. So I had to have an excuse to put them in there So it's not to say that design tools visual design tools are going away But we also have new design tools or new code tools that have arisen to help us as front-end developers One of those being sass another being compass. I would say compass is the sass What jQuery is the javascript sass is pretty cool and then compass just like makes it awesome This is how I like to think of my code organization Almost borderline OCD on the left there Everything nicely separated even the dots in the bowl are pulled off And then when we pull it when we push it down to the browser It can be mung together minified and concatenated into one file because the browser just cares about like machine code at that Point doesn't need to be readable to a human I also like to use this analogy that CSS has a good heart, right? I mean if you've seen Captain America He will take on any bad guy no matter how bad of a beating he will get and he will not quit Let's keep on keeping on but the definition insanity is trying the same thing over and over and expecting a different result Right, so I think we've kind of promised ourselves like the next project. It will be better I will not use the word important at all And it will be this utopian front-end and then we get into the project and more than one person's editing it And it all falls apart right because hell is other people's code So I think of sass is kind of giving it a little bit more if you have You have iterators you can do loops you can do comparison like if then logic And you have variables and you have mix-ins where you can have style chunks that are injected into other Context and then compass gives you some awesome stuff to handle CSS 3 like I never want to write another browser Vendor prefix again. I just I write compass and it takes care of all that for me So I don't mind memorizing things on the left Whereas like the stuff on the right I would not put on any human being to ever have to know You'd want to automate that somehow be that with the pre-processor or some IDE Because really I mean eventually it's all gonna be This stuff on the bottom right all those vendor prefixes are gonna go away when this one great day All the browsers agree at the same time and just overnight we get the memo like it's it's perfect You can use it now, you know Border bottom left radius is 4px and you don't have to have dash k h team out or any of that other stuff Also, this is pretty cool, too You can turn on experimental support for SVG which I always turn it on I don't know I feel feel kind of like a scientist because I'm turning on this experimental thing And I write one line of code background linear gradient from white to light gray and it creates all this stuff and that giant blob like this huge string That's a base 64 encoded SVG file that goes from white to ccc And it's infinitely scalable horizontally and vertically and that's for IE 9 because it can do base 64 backgrounds But it can't do CSS gradients, so that's kind of cool If you're kind of on the fence about trying sass or compass This is just a overwhelming list of IDEs to say that don't let that be an excuse So about two years ago I joined HP and we were Ruby on rails team At the time I was told we're gonna prototype and serve I'm like sounds good and I ended up liking it, which is good. So for the past two years or so at various jobs And on various projects. I've been enjoying using serve That's just get dash serve comm and I like to joke with John long who made serve like that's not exactly the most Googleable open source project name So I like to leave the URL up there because if you just Google for serve, you'll get the phone book, right? So this is the site basically it lets you use ERB if you're familiar with that templating from rails or Hamel Hamel is kind of like HTML with no closing tags. It's white space sensitive So it just kind of adds all your closing tags as it parses So it's really cool because it's all in temptation based and it makes it so you never have to play the what div closing Tag, you know, what what starting tag does this closing div tag close? And of course you can do sass and compass and there's also some ways to get coffee script working in there today I'm just gonna talk about sass and compass though So I kind of think of serve is like like if if compass is Captain America serve like brings so much more to the table And since I can't show you any client stuff. I've worked on using serve I'm gonna talk about a site I made today called unsomantic How many here have used like or heard of the 960 grid system and love or hate it? Everybody can put their hand up or if you're if you don't care then keep your hand down. I guess um So yeah, a lot of people would call that unsomantic and I kind of think of class names as being devoid of semantics unless you're using micro formats So I decided to thumb my nose that whole back-and-forth naysayin and just call my new grid framework unsomantic calm so here's that at the You know, it's a home page on desktop a little brief definition Adjective unsomantic is a non-existent word that developers used to tear down work of their peers Now it's also now CSS framework. I mean if the shoe fits, let's wear it, right? Here's the same Site but at a mobile width And so I think of kind of what I do is in terms of wireframing and prototyping kind of like this which is basically that Everything that I do everything that a designer does and everything that I a does if you're a designer Your final deliverable is not a PSD and then you're done if you're an IA your final deliverable should not be in your mind a PDF and you're done in Me as a front-end developer. I shouldn't say well it works as flat HTML It's up to the server side guy to figure that out, right? Like we talked about before needs to be a vantage point of I'm seeing this through to completion unless that thing launches then I have failed Or I like to say that everything else kind of burns away in the atmosphere, you know all our documentation all our business Requirements gathering all that is kind of what hits the atmosphere and dies and the final project goes on and you know Lives on and source of greater heights So to that end serve is basically the V the view layer of rails MVC When I say view really I'm just talking about HTML and If you've ever done like a PHP include you've done basically what serve is doing except in Ruby, so there's nothing like magic about it So this is an index HTML dot erb file. It's basically what's served on the homepage that's unique to the homepage There's a sibling file called layout that points to the application If you've done net this is basically like a master page is the layout layout concept Then yield is what spits out the actual view into the file and we also we also have Part in a partial and a separate file The head of the document which includes style sheets and there's all sorts of craziness going on there And this is in no way how you should build a real website because I've got like if some variables are set Then I'm gonna go right to left language and if it's not set then I'm gonna assume left to right and if you set Adapt js to true that means you're not using media queries. You're swapping in and out live CSS Or you're swapping out CSS files live with JavaScript So anyways because I built this site to facilitate showing off a grid framework I felt like I needed to have the site itself show off every permutation And then there's some cool stuff you can do and serve which this is also a convention of rails It's called the content for a block so anywhere in any other page or any other partial I can type content for style sheets do and then make sure I type end at the end in between there I can just freely type CSS and if that exists it'll get Injected down here into a style tag and I also have the same thing set up for JavaScript So that actually appears up in the head of the document And if I type JavaScript within a content for that will appear all the way at the bottom of the document after every other Script tag has loaded So let's look at SAS variables I like to keep all my variables in a separate file called vars You can name it kind of whatever the naming doesn't really matter So that is consumed by the base grid files like all right cool. I'm following with you So that that can extend what are called placeholders So this is could basically be thought of as a class name that never Emits its styles unless it's also used with extend so it's a it's like a silent Chunk of code ready to be used in a style sheet But if you don't use it your style sheet doesn't increase in size or anything So that's imported by the responsive partial Yeah, another import right so you might be thinking what this guy does not know what he's doing And I'm not even trying to say I do I'm just saying this is where the imports go So that gets imported on into the context into the scope of a media query So I've got the grid base that is common across mobile and desktop. I've got a mobile Mobile partial that's pulled into the context of my media query breakpoint, which is 767 pixels That's one pixel less than the iPad So if you're on anything smaller than that you'll get mobile and anything iPad and up it gets like desktop slash tablet e-layout And then the last one brings in you know beyond 767 pixels and up So that's like what is going on so then that is actually consumed by the code that you would write If you have it like application sass file or styles sass file Then we have one more here just for like some little tweaks. I'm doing to the navigation You might be wondering like why is what is the point of separating everything out so much like you just love imports You also might be wondering like oh, so here's a here's how you can compress things You also might be wondering like with that many at imports How many like subsequent chaining daisy chain of HTTP requests is that right like we all know that at importing too much Stuff is bad The cool thing about sass is when you at import something into a file it just becomes one file So at this point we're we're just keeping things Separated so that we can scope them so got things like this here The benefit of that is then it all becomes one file and it can be minified and it's concatenated and you know Just basically machine code for the browser So yeah, I've covered that So the astute observers might have noticed as I was flipping through the slides like that's a heck of a lot of flat CSS files like are you using all of those on the site and the answer is no I'm pulling those into separate files so that when you click on links from the site You can see just the grid code by itself and not have to see like the header and footer of the the site That's displaying the framework because that's irrelevant to what you're going to try to do with it Those are the those are the flat files that live out in the repo on github And this is why I separate things out because then I can pass a variable that says laying forward and laying reverse And then I just import the exact same partial and I have everywhere that the word right or left would appear It's variable eyes. So if you're making a site to be read in Hebrew or Arabic from right to left You just set these two variables import and everything else So it's right. Everything's you know push and pull classes are all reversed And also for older IE for IE 8 and below that don't understand media queries I reassemble the same site as I did an application which is for good browsers Except I don't have any media queries and I'm not bringing in the mobile grid So instead I bring in the base of my grid and my desktop grid and that's it and that gives IE 7 and IE 8 a fixed-width layout And you might be wondering wait you're treating IE differently You can't not give it a fluid like or you can't not give it a responsive layout that goes down to mobile Except when we think about it IE 7 can't be used on on mobile or isn't you know browser share wise So I don't see anything wrong with serving a desktop look-and-sight to a desktop oriented browser So hot tip to Nicholas Gallagher for the idea He had this great blog post that basically described exactly what I just showed you And he works at Twitter now and he said the other day are you new to front-end web development? Here's a secret nobody knows what they're doing either and I would include myself in that in that category So maybe I don't know what I'm doing, but here's an idea anyways Here's a little this is a Ruby function in my view helpers file If flat html is set to true then I emit this string of dot html And if it's not then I give an empty string and Then I set it in this partial called vars where I've just got this one variable. That's either true or false and In here in my actual view files. I have this little function that says html Okay, you probably think I'm crazy. I wouldn't argue So further evidence. I probably don't know what I'm doing. I have a command line Set up like a shortcut. This can be in a bash file or a z shell Basically, I don't want to type CD and serve every time I want to just serve the site locally And then when I want to export to flat html, I don't want to have to remember all this So I type just on semantic site html and I'll set this up for like various client projects So it could be like client underscore site underscore html to show them templated a flat html that runs through this crazy list and shows me all the files that it made and Then it makes this folder that I'm putting out on the web and it makes me a templates zip file so I can if the client is like Well, I don't I don't want to preview in the browser. What if I'm offline? I want to look at it like for some reason some people love to have that like on their hard drive and that's kind of why I have that That function so that we can serve it with clean URLs from the internet or have dot html Extensions for if they want to browse it just on their local machine And they don't have to like an have an Apache instance running or anything So I'm gonna demo real quick. That's okay with you guys First off any questions like any any stuff that I cover that you want want to see in the demo I know the code was kind of small, but I can zoom in All right, then I'm just gonna demo what I want to demo So I've got the project file here And you kind of see like where I'm going with the like got here's my view Here's the layouts application. Here's the partials like I have like different style sheets partials that pull in different stuff Here's the head footer so I'm gonna go in here and find my unsubmitted comm folder. I'm just gonna delete that and Then I'm gonna show you how that works when I run it here Actually, let's run let's run serve locally real quick I Set this down to type So serve always runs off a port for 4000 which is kind of cool because it won't conflict with rails which runs on port 3000 So you can see here like I've got the links and It's actually pointing to demo dash responsive with no extension But again, if I come here in my vars file and I comment out false And I make that true and I hit save I come back over here and run my crazy magic Then this will output and create that unsymmetric folder that I just deleted Open Chrome So now if I go Here you'll notice that that's actually a dot html extension then I can email the client and say Hey, look here's a This template file that you wanted me to send you and then they can open that and you know They can browse around the actual thing that we're building for them So it's kind of cool So that's kind of it for me, I know I breeze through any any particular questions or yep I do it so that when we want to preview things out on the web And or if like I'm given something to a developer and their route is going to exactly match my clean URL Then they don't have to worry about okay Well, Nathan made all these in and dot html and I have to do it like a fine replace, you know Oh, gotcha Okay, cuz serve is just the V like you'd probably have like an environment variable and if you're doing like a real rails at this Is me faking it up So Anything Yep, I like to hit up Chris Epstein on I am but I'm not sure that scales for him I Guess just I mean there's a community mailing list that I'm on I'll chime in every now and then but mostly I just read and Like I'm just kind of a lurker and I learned passively by seeing other people's questions asked and answered I mean the documentation site is pretty good, but it also Doesn't help if you don't know what to search for right? So it's like not knowing the spelling of a word and trying to use it use a dictionary, right? Yeah, so this I don't know if this is helpful, but like I I have completely documented like How to consume like all the different That's that should be indented there how to consume all the different placeholders and stuff so that that will at least like help With a concept of like silent placeholders, but some people call them silent classes because it's like using extend in the class name in sass Yeah, I don't know. I've just kind of Join mailing lists and you know that type of stuff Yep. Oh, no, no, like I can let me come back here So here's serve running locally And that's like live I can make a change and see that I only run that build step when I'm ready And I want to export to flat HTML So like if you go to unsmantic.com It's like this is all out there It's just flat HTML, but like I don't know if you've seen that old begging strips commercial where dogs don't know it's not bacon like Users don't have to know it's not URL mod rewrite or anything. You know, it's just straight up Oh, and this is what this is what serve ships with options multi views will make Apache be like you supply to URL that's close enough for me You don't need that you don't need the dot HTML in the end. I'll go find you a file that looks like that So that's what allows you to have clean URLs when you deploy in the the surf site itself runs on Just like flat HTML Like if I go to get started I could this is easily add like dot HTML So Like if you're doing Let's say you're doing like WordPress or Drupal site or whatever I probably wouldn't use serve for that just because it's already got its own templating system But this is great for me if I'm on a Rails project And it's in flux like on the server side I don't have to pester a Rails developer to be like, hey Can you set me up a controller with these views because I want to just do flat HTML And the nice thing is like for the most part unless they totally disagree with like my logic like my code Not might not be the rest best. I don't consider myself like a Rubyist or whatever, but Like they might have a more elegant way of doing that But like they can see my thought process of if the page is a responsive left to right then add the class of on You know that like that type of stuff and I found that even working with dot net developers They'd like to see the the raw serve code or the you know the ERB because I can see okay Well, I'll split out my dot net partials that way, you know Let's just a little bit more. I guess Sophisticated way of doing flat HTML, but you could probably get the same with like PHP includes or that type of thing I just liked it it mirrors the views of rails and I can just say here we go Look, I'm a you know, I'm not a Rails developer, but I play one on the internet or whatever, so Any other questions cool will be I'll put the Slides back up to where you can download the deck I also made a get repo of the serve dot or the unsubmitted comm site So if you want to go and pull that down and run it locally as a serve project you can just kind of see how I did some of that So, yeah, thanks for coming