SlideShare a Scribd company logo
Web Development with
      Sass and CoffeeScript
      Brian P. Hogan




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
What about you?



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Web pages run on CSS
               and JavaScript



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

GraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTO

REST est devenu un standard pour les APIs web. Mais malgré sa popularité, il est plein de défauts. Son successeur existe et il vient de Facebook. Venez découvrir en détail le principe, la mise en oeuvre et l’écosystème de GraphQL.

blendwebmixblendwebmix 2017la cuisine du web
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval

The document summarizes Simon Willison's talk at An Event Apart Chicago 2009 about building things fast using modern web development techniques and tools. The talk discusses trends in rapid interactive development using client-side JavaScript, web frameworks that facilitate quick prototyping and deployment, and building a Twitter client in under 50 lines of JavaScript code to demonstrate these techniques.

SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programs

In this manual there are 16 exercises for PHP, MySQL. this will help the students who are pursuing B.Sc Computer Science.

phpmysqlvariables
CSS feels limited
                   and repetitive



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
and many people don’t
            really understand
               JavaScript


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
We need to use
          better tools to build
            modern web apps.


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS

1) BOSS (Build Your Own Search Service) is a Yahoo API that allows developers to build custom search applications and services by accessing Yahoo's search index and data through a RESTful API. 2) The API can be used to search the web, images, news and other sources. It returns search results in JSON or XML format that can be displayed however the developer wants. 3) Examples are provided showing how to use the BOSS API from JavaScript to dynamically search terms and display results, as well as examples using other programming languages and frameworks. Additional features and enhancements to the BOSS API are also highlighted.

hackdayindiabossintroduction
PHP Tutorial (funtion)
PHP Tutorial (funtion)PHP Tutorial (funtion)
PHP Tutorial (funtion)

This document provides examples and explanations of various PHP functions for working with strings, numbers, and other data types. It includes functions for string manipulation like substr(), str_replace(), strpos(), explode(), and implode(). Numeric functions demonstrated include type checking, conversion between binary, octal, hexadecimal and decimal numbers. Other functions covered are trim(), list(), printf()/sprintf() for formatting output, and math functions like floor(), ceil() and round(). Examples are given for each function to illustrate its usage.

Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]

Søkemotorer kan løse langt fler utfordringer enn en søkeboks gir. Du har kanskje et søkeproblem uten å være klar over det? Elasticsearch, en open source søkemotor bygd på Lucene, får stadig mer oppmerksomhet - ikke bare fordi den er glimrende til å løse typiske søkeproblemer, men også fordi den kan brukes til analyse- og "big data"-utfordringer. Foredraget gir en oversikt over hva søkemotorer er gode på, relaterte problemer du kommer over, hvordan Elasticsearch kan bidra – samt hvordan den passer inn i teknologistacken din. Det er ingen tutorial, men med et relativt høyt tempo og eksempler med realistisk kompleksitet gis en oversikt over hva som er mulig. Vi runder av med hvordan Elasticsearch kan klassifiseres i mylderet av "NoSQL"-databaser.

luceneelasticsearchsearch
CoffeeScript lets us
          write complex JS with
             simpler syntax.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Sass gives us
                extensions to CSS.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Sass + CoffeeScript +
           automated workflow


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
CoffeeScript



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com     Rate this talk at http://spkr8.com/t/8682

Recommended for you

Php 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the GoodPhp 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the Good

In this session, we'll look at a typical PHP application, review a few of the horrible mistakes the fictional developer made, and then refactor the app according to some best practices. Along the way you might even learn a thing or two about PHP you don't already know.

beginnerphprefactoring
PHP 1
PHP 1PHP 1
PHP 1

This document provides an introduction and overview of PHP basics including: - PHP syntax and how to write basic PHP code - Variables, data types, and variable scopes in PHP - Operators, conditional statements (if/else, switch), and loops (while, for) in PHP - Working with arrays, strings, and functions - Form handling using $_POST, $_GET, and $_REQUEST superglobals - The document serves as a tutorial for PHP fundamentals.

Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP

This document provides an overview of leveraging graph databases in PHP. It begins with an introduction to graph databases and their data model. It then discusses Neo4j, a popular graph database, and its query language Cypher. The document demonstrates connecting to Neo4j from PHP, creating and querying nodes and relationships, and provides an example of modeling content like a news feed as a graph using the LASTPOST and NEXTPOST relationships to link content in order.

graph storyphpneo4j
It’s more of a new
                syntax than a new
                     language.


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Some jQuery




                           $(function() {
                               $("a#get").click(function(e) {
                               .get("/ajax/get",
                                  {name: "John",time: "2pm"},
                                  function(data) {
                                    $("#result").html(data);
                                  }
                               );
                             });
                           });




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com              Rate this talk at http://spkr8.com/t/8682
in CoffeeScript




                           $ ->
                             $("a#get").click (e) ->
                                $.get "/ajax/get",
                                  {name: "John", time: "2pm"},
                                  (data) ->
                                     $("#result").html(data)




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com              Rate this talk at http://spkr8.com/t/8682
CoffeeScript borrows
            from Python and Ruby
                  syntax.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit

The document discusses using the MetaCPAN API to retrieve and filter data from the MetaCPAN database. It provides examples of using the API to fetch author data for a specific author, search for authors by profile or country, and filter results. It also covers more advanced techniques like using Boolean filters, sorting results, and pagination via the scrolling API. Additional resources and tips are provided, such as caching responses and enabling compression.

metacpancpanperl
Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP

The document discusses leveraging graph databases in PHP applications. It provides an overview of graph databases, their data model consisting of nodes, properties and relationships. It then demonstrates connecting to Neo4j from PHP using the Neo4jPHP wrapper, querying the graph database with Cypher, and modeling a news feed content structure as a graph of connected content nodes. Sample code is shown for adding new content nodes to a user's news feed graph through a LASTPOST relationship.

phpgraph databasesneo4j
Code obfuscation, php shells & more
Code obfuscation, php shells & moreCode obfuscation, php shells & more
Code obfuscation, php shells & more

Code Obfuscation, PHP shells & more What hackers do once they get passed your code - and how you can detect & fix it. Content: - What happens when I get hacked? - What's code obfuscation? - What are PHP shells? - Show me some clever hacks! - Prevention - Post-hack cleanup What is this not about: - How can I hack a website? - How can I DoS a website? - How can I find my insecure code?

hacksecurityphp
CoffeeScript uses
        significant whitespace
              for scope.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
CoffeeScript compiles
          to regular, plain old
               JavaScript.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Declaring variables and objects

                                               var box, colors, firstName, lastName;

      firstName = "Homer"                      firstName = "Homer";
      lastName = "Simpson"                     lastName = "Simpson";

      colors = ["Green", "Blue", "Red"]        colors = ["Green", "Blue", "Red"];

      box =                                    box = {
        height: 40                                height: 40,
        width: 60                                 width: 60,
        color: red                                color: red
                                               };




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com             Rate this talk at http://spkr8.com/t/8682
JavaScript functions

        // function declaration. Visible anywhere (hoisting)
          (function hello(name){
           alert("Hello " + name + "!");
        }


        // function expression, visible to the scope of the var
        var hello = function(name){
          alert("Hello " + name + "!");
        }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com            Rate this talk at http://spkr8.com/t/8682

Recommended for you

Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra

Presented at the Symfony Live Portland 2013 in Portland (Oregon), USA The recording of the talk is available at http://bit.ly/sl-portland2013-video

resthypermediaapi
Inc
IncInc
Inc

This document contains PHP code for a web shell that provides a backdoor access to a compromised server. It defines variables for authentication, colors, and default actions. It also contains functions for handling authentication, printing headers/footers, and executing commands via the aliases array. The aliases array defines commands to run on both Windows and Linux servers, including commands to find/locate files and directories.

php part 2
php part 2php part 2
php part 2

This document provides code examples for performing common PHP tasks like connecting to a MySQL database, selecting, inserting, updating, and deleting data. It also demonstrates how to open, read, and write to files, create and retrieve cookies, use PHP sessions to store and access user data across pages, and handle exceptions using try/catch blocks. The code snippets show the basic syntax and functions for working with databases, files, cookies, sessions, and exceptions in PHP.

Function declaration in CoffeeScript


       hello ->
         alert "Hello"




       hello (name) ->
         alert "Hello #{name}"



                                -> (thin arrow)




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com          Rate this talk at http://spkr8.com/t/8682
CoffeeScript uses function expressions.


       hello (name) ->
         alert "Hello #{name}!"




        var hello = function(name){
          alert("Hello " + name + "!");
        }




                   #{} interpolates strings.

Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682
New syntax
              means new features.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
a jQuery example

                $(function() {
                  var displayError, displaySuccess, url;
                  $("form").submit(function(event) {});
                  event.preventDefault();
                  url = $(this).attr("href");
                  $.ajax({
                     url: url + ".js",
                     success: function(data, status, xhr) {
                        displaySuccess($("#form"));
                     },
                     error: function(xhr, status, error) {
                        displayError(error);
                     }
                  });
                  displaySuccess = function(form) {
                     var element;
                     element = $("<p>Thanks for signing up!").addClass("success");
                     element.insertAfter(form);
                     form.hide();
                  };
                  displayError = function(error) {
                     $("#notice").attr("html", error);
                  };
                });


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                     Rate this talk at http://spkr8.com/t/8682

Recommended for you

WordPressでIoTをはじめよう
WordPressでIoTをはじめようWordPressでIoTをはじめよう
WordPressでIoTをはじめよう

This document discusses using a Raspberry Pi to log temperature and humidity readings and display the data in a graph on a WordPress site. It describes creating a custom post type to store fever log entries, registering REST API routes to log readings and retrieve the history, and using a Python script and crontab to automatically log readings. JavaScript and CSS are used to display a graph of the fever readings on the WordPress site.

wordpressiotraspberry pi
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]

The document discusses a JavaScript function that calculates the difference between two dates and times entered by a user. It first validates that the dates and times are in the proper format. It then converts the dates and times to Date objects, calculates the difference between them in milliseconds, and breaks that down into weeks, days, hours, minutes and seconds to display to the user. The function returns false so the form it is used in will not submit.

AnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFacesAnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFaces

PrimeFaces, JavaServer Faces icin gelistirllen ve dunya capinda populer olan zengin bir arayuz kutuphanesidir. Bu sunumda PrimeFaces Bilesenleri, Mobil, Ajax Push, Tema Destegi gibi modullerin yani sira PrimeFaces ekibinin gelistirdigi yeni jQuery javascript kutuphanesi PrimeUI'da tanitilmaktadir.

primecagatayprimefaces
jQuery $(function(){})

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) ->
                         displaySuccess($("form"))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
jQuery event handler

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) ->
                         displaySuccess($("form"))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
jQuery $.ajax

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) ->
                         displaySuccess($("form"))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
success and error callbacks

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) ->
                         displaySuccess($("form"))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682

Recommended for you

Primefaces Confess 2012
Primefaces Confess 2012Primefaces Confess 2012
Primefaces Confess 2012

This document provides information about Çagatay Çivici and PrimeFaces. Çagatay Çivici is a JSF expert group member and lead of PrimeFaces. PrimeFaces is an open source Java server faces component library developed by PrimeTeknoloji, where Çagatay is a co-founder. The document outlines features of PrimeFaces like being lightweight, easy to use, supporting over 100 UI components, and advanced Ajax capabilities.

primefaces jsf
Building Go Web Apps
Building Go Web AppsBuilding Go Web Apps
Building Go Web Apps

Presented at GothamGo 11/15/2014. TL;DR - Don't use frameworks, a few choice packages will get you where you want to go.

golangweb
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2

An introduction to Facebook Graph API and OAuth 2. This presentation covers basic example of Facebook Graph API, and including how OAuth 2 client-side flow works.

javascriptoauthoauth 2
-> leaves (this) scope alone.

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) ->
                         displaySuccess($("form"))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
=>



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
=> binds this to the function body

                $ ->
                  $("form").submit (event) ->

                     event.preventDefault()
                     url = $(this).attr "href"

                     $.ajax
                       url: url + ".js"
                       success: (data, status, xhr) =>
                         displaySuccess($(this))
                       error: (xhr, status, error) ->
                         displayError error

                  displaySuccess = (form) ->
                   element = $("<p>Thanks for signing up!").addClass("success")
                   element.insertAfter form
                   form.hide()

                  displayError = (error) ->
                    $("#notice").attr "html", error




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
Comprehensions



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

Blog Hacks 2011
Blog Hacks 2011Blog Hacks 2011
Blog Hacks 2011

This document summarizes blog hacking techniques from 2004 to 2011. It provides 5 hacks including using a CSS framework for layout and styling, media queries for responsive design, embedding YouTube videos, syntax highlighting for code snippets, and using pubsubhubbub for real-time updates. The document encourages continuing to blog and have fun exploring new methods.

blogkamakurapmhacks
YAP / Open Mail Overview
YAP / Open Mail OverviewYAP / Open Mail Overview
YAP / Open Mail Overview

The document discusses Yahoo's Application Platform and Open Mail services. It provides examples of using the Yahoo Application Platform (YAP), OpenID, OAuth, SDKs and REST APIs to develop applications. It also provides examples of using OpenSocial to fetch and insert user data and activities. Finally, it discusses Open Mail and enhancing the email experience through contextual plugins.

opensocialoauthopen mail
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal

There are more smart people building software now than there have been at any point in the past, which means that it's more important than ever to stay on top of new developments, libraries, frameworks, and everything else. To really take advantage of this wealth of innovation, however, you've got to look beyond your normal community -- what's going on in Python? And how can we use that to make our Ruby lives easier? In this session, we'll explore that question. We'll look at actual examples of code and concepts borrowed and reimplemented to form a better idea of when it's appropriate and when it'll fall flat.

coderuby
Simple iteration


                  alert color for color in ["red", "green", "blue"]




         var colors = ["red", "green", "blue"];
         for (i = 0, length = colors.length; i < length; i++) {
           var color = colors[i];
           alert(color);
         }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                    Rate this talk at http://spkr8.com/t/8682
“for in”


         people = [
           {name: "Homer", age: 42}
           {name: "Bart", age: 10}
         ]

         for person in people
           alert "#{person.name} is #{person.age} years old"




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com         Rate this talk at http://spkr8.com/t/8682
That’s just the
                        beginning.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Existential operator (?)


          total ?= 0




         if (typeof total !== "undefined" && total !== null) {
            total;
         } else {
            total = 0;
         };




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682

Recommended for you

Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScript

My Twin Cities Code Camp talk covers how to develop client-side code test-first with Jasmine and CoffeeScript.

coffeescriptjasminetdd
Data Visualisations In IavaScript
Data Visualisations In IavaScriptData Visualisations In IavaScript
Data Visualisations In IavaScript

Andy Parker and Mike Hill won an egg race with their entry for the SPA 2011 competition. Their winning entry involved using SVG paths, JSON data structures, and JavaScript libraries like D3 and Raphael to create interactive data visualizations. The document provided several useful links about techniques and libraries for creating SVG and canvas graphics and visualizing data in JavaScript.

Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery

This document provides an introduction to JavaScript and jQuery. It discusses where JavaScript is used, some popular uses of JavaScript like Google Maps and Twitter, and the basics of JavaScript including variables, functions, and control logic. It also introduces jQuery, describing what it is and how it can be used to select elements, handle events, and manipulate the DOM. The document recommends putting scripts at the end of the page body for optimal performance and emphasizes progressive enhancement.

Object-oriented
                        JavaScript



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Classes
                         var Person, p;
                         Person = (function() {
                           function Person(options) {
                              this.firstname = options.firstname;
                              this.lastname = options.lastname;
                              this.age = options.age;
                           }
                           Person.prototype.fullname = function() {
                              return "" + this.firstname + " " + this.lastname;
                           };
                           return Person;
                         })();

                         p = new Person({
                           firstname: "Brian",
                           lastname: "Hogan"
                         });

                         alert(p.fullname());




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                     Rate this talk at http://spkr8.com/t/8682
Classes
                         var Person, p;
                         Person = (function() {
                           function Person(options) {
                              this.firstname = options.firstname;
                              this.lastname = options.lastname;
                                   class Person
                              this.age = options.age;
                                     constructor: (options) ->
                           }
                                       @firstname = options.firstname
                           Person.prototype.fullname = function() {
                                       @lastname = options.lastname
                              return "" + this.firstname + " " + this.lastname;
                                       @age = options.age
                           };
                           return Person;
                                     fullname: ->
                         })();
                                       "#{@firstname} #{@lastname}"
                         p = new Person({
                           firstname: "Brian",
                           lastname:="Hogan"
                                  p   new Person
                         });      alert p.fullname()


                         alert(p.fullname());




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                     Rate this talk at http://spkr8.com/t/8682
We can even extend classes!


       class basicWindow
         constructor: ->                      class mainWindow extends basicWindow
           @window = Ti.UI.createWindow({       constructor: ->
              backgroundColor: "#F5F5ED"          super
           })                                     @window.backgroundColor = "#fff"

         open: ->
           @window.open()




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com               Rate this talk at http://spkr8.com/t/8682

Recommended for you

Os Pruett
Os PruettOs Pruett
Os Pruett

This document discusses various technologies related to Ajax and web services, including: 1. Ajax started as an acronym for Asynchronous JavaScript and XML. 2. It describes common web service protocols like REST and SOAP. REST uses HTTP methods to perform CRUD operations on resources while SOAP uses an XML envelope. 3. It provides an example of using Ajax with a simple Perl script to retrieve the answer to "What is the meaning of life?" stored on a server and display it in the browser.

Zendcon 2007 Api Design
Zendcon 2007 Api DesignZendcon 2007 Api Design
Zendcon 2007 Api Design

The document discusses API design in PHP for the Ning platform. It covers how the PHP API provides an interface to the Ning REST APIs, which are used for content storage, user profiles, tagging, search, and more. Examples are given of using the PHP XN_Content class to create and save content to the REST API. The document emphasizes designing APIs that promote predictability, stability, and human performance over computer performance.

Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine

This document discusses cross-domain mashups using jQuery and Google App Engine. It describes common techniques for dealing with the same-origin policy, including proxies, JSONP, and building sample applications that mashup Twitter data, geotagged tweets, and maps. Examples include parsing RSS feeds from Twitter into JSONP and displaying tweets on a map based on their geotagged locations. The document concludes by noting issues with trust, failures, and limitations for enterprise use.

jsonpappenginejquery
How do we use it?
                                In the web browser itself

                                via Node.js

                                With Ruby, via Guard




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com            Rate this talk at http://spkr8.com/t/8682
In the browser?
                       <script language="text/coffeescript">
                         people = [
                           {name: "Homer", age: 42}
                           {name: "Bart", age: 10}
                         ]

                         for person in people
                           do (person) ->
                             alert "#{person.name} is #{person.age} years old"
                       </script>

                       <script src="coffee-script.js"></script>




                                (this is slow.)

Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                     Rate this talk at http://spkr8.com/t/8682
With Node.js
              Install Node.js

              Install npm

              npm install -g coffee-script

              coffee --compile --output js/ coffee/

              coffee -o js/ -cw coffee/




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Ruby and Guard
              Install Ruby

              gem install guard-coffeescript

              In our project

                   guard init coffeescript

                   guard




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682

Recommended for you

Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju

Talk on PrimeFaces: Next Generation JSF Component Suite, by Apache MyFaces committer and PMC member, Cagatay Civici.

myfacesprimefacesjava server faces
Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju

PrimeFaces is a next generation JavaServer Faces (JSF) component suite that provides 70+ rich UI components and features like Ajax push technology. It was created by Cagatay Civici in 2008 and is now used by thousands of developers worldwide. Some key features include easy Ajax implementation, unobtrusive JavaScript, mobile frameworks like TouchFaces, and integration with technologies like Spring and Portlets. The documentation and community support resources make it easy for developers to learn and use PrimeFaces in their projects.

primefacesjava server facesjsf
HappyKardashian.com for #FVCP
HappyKardashian.com for #FVCPHappyKardashian.com for #FVCP
HappyKardashian.com for #FVCP

The document describes the development of a fun website called HappyKardashian.com using various technologies including Red Hat OpenShift for hosting, RedBeanPHP as an ORM library to generate database structures, and Twitter Bootstrap for responsive design templates. Twitter OAuth authentication was also integrated to allow posting tweets directly from the site to celebrate Kardashian family anniversaries stored in the database.

redbeanphpbootstrapopenshift
Guard watches input
      folders for changes
      and writes output
      files.

Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Guard works with Sass
      too.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Sass
                                Syntactically Awesome
                                Stylesheets




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com      Rate this talk at http://spkr8.com/t/8682
Sass gives CSS
      everything programmers
      want.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks

The document discusses various techniques for improving web applications, including: 1. Enabling in-place AJAX reloading of pages using jQuery. 2. Optimizing page loads by only rendering necessary content for AJAX requests. 3. Adding hash URLs to enable back-button functionality when using AJAX. 4. Improving cross-browser compatibility by detecting browsers and conditional loading of styles.

hamljavascriptruby
Hacking with hhvm
Hacking with hhvmHacking with hhvm
Hacking with hhvm

The document summarizes HHVM, a virtual machine for executing PHP code. Some key points: - HHVM is a drop-in replacement for PHP that compiles PHP to bytecode and uses a just-in-time (JIT) compiler to optimize for performance. - It supports most PHP syntax and features like Hack which adds type hints. It also has its own features like async functions, user attributes, and XHP for building components with XHTML syntax. - HHVM is faster than PHP due to its JIT compiler which performs type inference and compiles hot code paths to native machine code. Benchmark tests show significant performance improvements over PHP for applications like Magento and Symfony.

huhu
huhuhuhu
huhu

This document discusses using jQuery and Google App Engine to create cross-domain web mashups in 3 sentences or less: The document introduces techniques for creating cross-domain web mashups using jQuery to make AJAX calls across domains and Google App Engine for hosting, discussing JSONP and proxies to overcome the same-origin policy limitation. It then provides an example mashup that displays tweets tagged with a hashtag on a map by geocoding hashtag names to locations and querying Twitter, Google Maps, and other domains.

CSS

                                .sidebar {
                                  color: #000;
                                  border: 1px solid #000;
                                }

                                .sidebar p {
                                  margin-bottom: 20px;
                                }

                                .sidebar ul {
                                  margin-bottom: 10px;
                                }

                                .sidebar h1 {
                                  margin-bottom: 0;
                                }

                                .main{
                                  color: #000;
                                }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com               Rate this talk at http://spkr8.com/t/8682
CSS

                                .sidebar {
                                  color: #000;
                                  border: 1px solid #000;
                                }

                                .sidebar p {
                                  margin-bottom: 20px;
                                }

                                .sidebar ul {
                                  margin-bottom: 10px;
                                }

                                .sidebar h1 {
                                  margin-bottom: 0;
                                }

                                .main{
                                  color: #000;
                                }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com               Rate this talk at http://spkr8.com/t/8682
CSS

                                .sidebar {
                                  color: #000;
                                  border: 1px solid #000;
                                }

                                .sidebar p {
                                  margin-bottom: 20px;
                                }

                                .sidebar ul {
                                  margin-bottom: 10px;
                                }

                                .sidebar h1 {
                                  margin-bottom: 0;
                                }

                                .main{
                                  color: #000;
                                }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com               Rate this talk at http://spkr8.com/t/8682
Sass to
      the rescue!




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

Django
DjangoDjango
Django

Django is a high-level Python web framework that allows developers to build web applications quickly by automating common tasks and following best practices. It provides features like an object-relational mapper, form validation, security, internationalization, and more out of the box. The document then outlines how to install, configure, and build basic applications with Django.

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with Hugo

Most web sites don’t have data that changes, so why power them with a database and take the performance hit? In this talk we’ll explore static site generation using Hugo, an open-source static site generator. You’ll learn how to make a master layout for all pages, and how to use Markdown to create your content pages quickly. Then we’ll explore how to deploy the site we made to production. We’ll automate the entire process. When you’re done, you’ll be able to build and deploy static web sites quickly with minimal tooling.

hugohtml5css
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and Ansible

Need a web server? So did I. But setting everything up by hand is tedious. In this talk, you'll see how to build a load-balanced web server using Ansible, Terraform, and DigitalOcean, a cloud provider aimed at developers. First, you'll see how to build out the servers and load balancer, and then you'll see how to use Ansible Playbooks to install and upload the web site. When we're done, you'll have scripts you can run to set up your own environment.

Variables!

                                $measure: 20px
                                $color: #ce4dd6

                                .sidebar
                                  background-olor: $color
                                  border: 1px solid lighten($color, 20%)

                                  p
                                       margin-bottom: $measure

                                  ul
                                       margin-bottom: $measure / 2

                                  h1
                                       margin-bottom: 0




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                         Rate this talk at http://spkr8.com/t/8682
Variables and helper functions!

                                $measure: 20px
                                $color: #ce4dd6

                                .sidebar
                                  background-olor: $color
                                  border: 1px solid lighten($color, 20%)

                                  p
                                       margin-bottom: $measure

                                  ul
                                       margin-bottom: $measure / 2

                                  h1
                                       margin-bottom: 0




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                         Rate this talk at http://spkr8.com/t/8682
Scope with nesting

                                $measure: 20px
                                $color: #ce4dd6

                                .sidebar
                                  background-olor: $color
                                  border: 1px solid lighten($color, 20%)

                                  p
                                       margin-bottom: $measure

                                  ul
                                       margin-bottom: $measure / 2

                                  h1
                                       margin-bottom: 0




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                         Rate this talk at http://spkr8.com/t/8682
Indented Sass                                                SCSS
         $measure: 20px                             $measure: 20px;
         $color: #000                               $color: #000;

         .sidebar                                   .sidebar{
           color: $color                              color: $color;
           border: 1px solid $color                   border: 1px solid $color;

           p                                            p{
                margin-bottom: $measure                      margin-bottom: $measure;
                                                        }
           ul
                margin-bottom: $measure / 2             ul{
                                                          margin-bottom: $measure / 2;
           h1                                           }
                margin-bottom: 0
                                                        h1{
                                                          margin-bottom: 0;
                                                        }
                                                    }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                 Rate this talk at http://spkr8.com/t/8682

Recommended for you

Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with Vagrant

Need a Linux box to test a Wordpress site or a Windows VM to test a web site on IE 10? Creating a virtual machine to test or deploy your software doesn’t have to be a manual process. Bring one up in seconds with Vagrant, software for creating and managing virtual machines. With Vagrant, you can bring up a new virtual machine with the software you need, share directories, copy files, and configure networking using a friendly DSL. You can even use shell scripts or more powerful provisioning tools to set up your software and install your apps. Whether you need a Windows machine for testing an app, or a full-blown production environment for your apps, Vagrant has you covered. In this talk you’ll learn to script the creation of multiple local virtual machines. Then you’ll use the same strategy to provision production servers in the cloud. I work with Vagrant, Terraform, Docker, and other provisioning systems daily and am excited to show others how to bring this into their own workflows.

Docker
DockerDocker
Docker

Docker is an amazing tool, but unless you work with it every day, you're probably left with a ton of questions. What's a container? What's an image? What's the difference between Docker, Machine, Compose, and Swarm? Why the heck should I care? Well, Docker makes it easier than ever to deploy and scale your applications and services. In addition, it lets you simulate your production environment on your local machine without heavy virtual machines. In this talk, we'll explore the basics of Docker, create a custom image for a web application, create a group of containers, and look at how you can put your apps into production on various cloud providers. At the end of the talk, you'll have the knowledge you need to put this to use with your own applications.

dockerdevops
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open Source

This document provides guidance on how to get started contributing to open source projects. It first defines what open source software is, noting that it is both free as in beer and free as in speech. It then lists reasons for contributing such as learning from others, giving back, discovering new tools and technologies, and potentially getting paid. The document outlines steps to take which include building a small project, using version control with Git, choosing an open source license, writing a README file, and sharing the code publicly by pushing it to GitHub. Lastly, it describes how to contribute such as fixing issues, providing design work, testing projects, and engaging with the relevant community.

open sourcegitcommunity
But wait...
          there’s more!




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Modularization

            _mixins.scss                    @import "mixins";
                                            @import "reset";
                                            @import "base";

            _reset.scss                     @import "fonts";




            _base.scss




            _fonts.scss




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com         Rate this talk at http://spkr8.com/t/8682
Reusable Functions (mixins)
                                             blockquote {
      @mixin rounded($radius){
                                               width: 225px;
                border-radius: $radius;
                                               padding: 15px 30px;
           -moz-border-radius: $radius;
                                               margin: 0;
        -webkit-border-radius: $radius;
                                               position: relative;
      }
                                               background: #faa;
                                               @include rounded(20px);
                                             }



                                              .button {
                                                cursor: pointer;
                                                color: #000;
                                                text-decoration: none;
                                                @include rounded(12px);
                                              }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com             Rate this talk at http://spkr8.com/t/8682
Mixins + Interation + Variables

            @mixin shadow($x, $y, $offset, $color)
              @each $prefix in "", -moz-, -webkit-, -o-, -khtml-
                #{$prefix}box-shadow: $x $y $offset $color




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com        Rate this talk at http://spkr8.com/t/8682

Recommended for you

Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm

Come explore Elm, a functional programming language for making web things. Elm aims to solve some of the same problems that Ember, React, and Angular 2 solve, but in a radically different way. Strong and static typing ensures that data you pass around in your apps really is what you think it is. A simple and tried-and-true architecture makes it easy to understand, and great tooling makes it fun to use.

softwareopen sourceelm
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.

The document discusses accessibility for web developers. It covers a variety of accessibility topics like supporting users who are blind, have low vision, are deaf or hard of hearing, have physical or cognitive disabilities. It provides tips for making web content accessible to all users, including using semantic HTML, alternative text for images, captions for videos, keyboard navigation and more. It also discusses tools for testing accessibility.

htmlaccessibilityweb design and development
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

The document discusses responsive design, including defining responsive design antipatterns like designing for large screens first or sending too much data. It also covers best practices like handling content in a mobile-first approach, using image replacement techniques, collapsing navigation menus, leveraging tools like grid frameworks, Sass, CoffeeScript, Jasmine, and creating organized, reusable code. The goal is to design sites that work well across devices through a structured, tested process.

Mixins + Interation + Variables

            @mixin shadow($x, $y, $offset, $color)
              @each $prefix in "", -moz-, -webkit-, -o-, -khtml-
                #{$prefix}box-shadow: $x $y $offset $color




                       box-shadow: 5px 5px 5px #dddddd;
                       -moz-box-shadow: 5px 5px 5px #dddddd;
                       -webkit-box-shadow: 5px 5px 5px #dddddd;
                       -o-box-shadow: 5px 5px 5px #dddddd;
                       -khtml-box-shadow: 5px 5px 5px #dddddd; }




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com            Rate this talk at http://spkr8.com/t/8682
Create well-organized
          folders and libraries
             of stylesheets.




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
or use Compass.




                   http://compass-style.org/




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Compass has helpers

             @import 'compass'
             @include box-shadow(#ddd 5px 5px 5px)




                       box-shadow: 5px 5px 5px #dddddd;
                       -moz-box-shadow: 5px 5px 5px #dddddd;
                       -webkit-box-shadow: 5px 5px 5px #dddddd;
                       -o-box-shadow: 5px 5px 5px #dddddd;}




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com            Rate this talk at http://spkr8.com/t/8682

Recommended for you

Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch

If you've ever looked into how to create Gems, you've probably seen a bunch of ways to do that. Project generators like Hoe, Jeweler, and the like offer some nice ways to get started, but they may often be overkill for many projects. If you're just starting out, why not learn to do it from scratch? In this talk, we'll create our own gem from scratch, using only things that are provided by Ruby, its standard library, and RubyGems to craft a simple gem. You'll learn how to set up a project, how to write and run tests, how to use Rake to quickly build the gem, and even how to create a gem that installs an executable command-line program.

ruby madisonruby
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced Ruby

The document provides an introduction to advanced Ruby concepts. It discusses how Ruby is expressive, dynamic, extendable, and flexible. It then covers various Ruby concepts like requiring files, testing, message passing, classes vs instances, blocks and lambdas, monkeypatching, and modules. The document aims to demonstrate how to work with these concepts through examples. It concludes by mentioning a demo project that puts the concepts together.

tccc10programmingruby
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into Words

Turning Passion Into Words provides tips for aspiring authors on how to turn their passion into words. It discusses understanding your audience and defining your target reader profile. It also covers defining your thesis, outlining your writing, connecting with readers, and getting published traditionally or through self-publishing. The document gives advice on voice, research, consistency, and using tools like Markdown to write more efficiently.

docbookwritingpublishing
How do we use it?

                                via Sass

                                via a supported IDE

                                With Ruby, via Guard




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com              Rate this talk at http://spkr8.com/t/8682
with Sass

              Install Ruby

              $ gem install sass

              $ sass --watch sass:stylesheets




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682
Ruby and Guard
              Install Ruby

              gem install guard-sass

              In our project

                   guard init sass

                   guard



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682
Using Sass and
                         CoffeeScript
                           together


Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

HTML5 and CSS3 Today
HTML5 and CSS3 TodayHTML5 and CSS3 Today
HTML5 and CSS3 Today

See where HTML5 and CSS3 are today and how you can use them in your projects.

html5css3cvcc
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex

Beyond the massive hype of Ruby on Rails, there's an amazing world of frameworks, DSLs, and libraries that make the Ruby language a compelling choice when working on the web. In this talk, you'll get a chance to see how to use Ruby to quickly build a static web site, create complex stylesheets with ease, build a simple web service, crete a simple Websocket server, and test your existing applications. Finally, you'll see a few of the ways Rails really can make developing complex applications easier, from advanced database querying to rendering views in multiple formats.

ruby web
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library

My talk from Ruby Hoedown MMX. We talked about the Ruby standard library and how sometimes we reinvent things when we have perfectly good tools waiting for us to use them.

ruby hoedown
Mindscape Web
                            Workbench
               http://www.mindscapehq.com/products/web-workbench




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com         Rate this talk at http://spkr8.com/t/8682
Ruby and Guard
              Install Ruby

              gem install guard-sass guard-
              coffeescript

              In our project

                   guard init sass

                   guard init coffeescript

                   guard

Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682
Let’s talk deployment



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Rails 3.1 and
                           Capistrano



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682

Recommended for you

Intro to Ruby
Intro to RubyIntro to Ruby
Intro to Ruby

This document provides an introduction to the Ruby programming language from Brian Hogan. It discusses Hogan's background as a designer who grew to love programming after learning Ruby. It provides overviews of common Ruby concepts like objects, variables, classes and testing. It also demonstrates examples of Ruby code and highlights libraries like Haml, Sass, Sinatra and Cucumber. The overall message is that Ruby can make developers productive and happy. Resources are included for trying Ruby online.

cvcc
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7

This document provides an introduction to the Ruby programming language. It discusses Ruby's object-oriented nature, dynamic typing, syntax similarities to other languages like Java and C#, and the ease of learning Ruby. It also demonstrates simple Ruby code examples for arrays, hashes, classes, inheritance and modules. Testing practices like TDD (test-driven development) are emphasized. Popular Ruby web frameworks like Ruby on Rails, Sinatra and libraries like HAML and SASS are also introduced.

ruby tccc7
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with Shoes

Presentation for the October 1 ECRuby Open House. A shorter version of the Twin Cities Code Camp IV slideshow with updated content.

ecrubyrubyshoes
Asset Packaging



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
So instead of this...




             <link rel="stylesheet" href="stylesheets/layout.css">
             <link rel="stylesheet" href="stylesheets/style.css">
             <script src="javascripts/jquery-1.7.0.min.js"></script>
             <script src="javascripts/app.js"></script>




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com             Rate this talk at http://spkr8.com/t/8682
...let’s do this:




             <link rel="stylesheet" href="assets/app.css">
             <script src="assets/app.js"></script>




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com           Rate this talk at http://spkr8.com/t/8682
Ruby + Guard + Jammit

                      Install Ruby

                      $ gem install guard-jammit




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com        Rate this talk at http://spkr8.com/t/8682

Recommended for you

The Why Of Ruby
The Why Of RubyThe Why Of Ruby
The Why Of Ruby

Simple introduction to Ruby and what it can do for you, not just technically, but professionally. Promotional presentation for our user group.

Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven Testing

This document discusses the importance of story-driven testing and automated testing. It emphasizes that testing needs to be easy, quick, and part of the project schedule. It also stresses involving domain experts and users to ensure quality. Cucumber allows writing tests in a natural language format that both technical and non-technical team members can understand, facilitating communication. Automating tests with tools like Cucumber and Webrat helps enforce quality and keeps projects on track.

Learning To Walk In Shoes
Learning To Walk In ShoesLearning To Walk In Shoes
Learning To Walk In Shoes

Presentation slides and notes from my April 4th talk on Shoes, the cross-platform GUI framework written in Ruby.

rubykidsshoes
Sass, CoffeeScript,
                Jammit
              watch Sass files for changes

                   Place output css in tmp/ folder

              watch CoffeeScript files for changes

                   Place output js in tmp/ folder

              Use Jammit to combine them.

Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682
config/assets.yml
               stylesheets:
                 app:
                   - tmp/app.css
                   - tmp/style.css

               javascripts:
                 app:
                   - javascripts/jquery-1.6.4.js
                   - tmp/app.js




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com          Rate this talk at http://spkr8.com/t/8682
Guardfile

                guard "coffeescript", :input => "coffeescripts", :output => "tmp"

                guard "sass", :input => "sass", :output => "tmp"

                guard "jammit" do
                  watch(/^javascripts/(.*).js/)
                  watch(/^stylesheets/(.*).css/)
                  watch(/^tmp/(.*).js/)
                  watch(/^tmp/(.*).css/)
                end




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                        Rate this talk at http://spkr8.com/t/8682
Jammit places
                          files in
                        public/assets
            <link rel="stylesheet" href="assets/app.css">
            <script src="assets/app.js"></script>




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com        Rate this talk at http://spkr8.com/t/8682

Recommended for you

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Deploy with Rake
                   SERVER = "yourhost.com"
                   USERNAME = "yourusername"
                   REMOTE_FOLDER = "/home/#{USERNAME}/yourhost.com"
                   REMOTE_FOLDER = 22
                   require 'net/scp'

                   desc "compile CSS, js files"
                   task :compile do
                     require 'guard'
                     Guard.setup
                     Guard::Dsl.evaluate_guardfile
                     Guard::guards.each{|guard| guard.run_all}
                   end

                   desc "Deploy web site"
                   task :deploy => :compile do
                     Net::SSH.start(SERVER, USERNAME, {:port => PORT} ) do |ssh|
                       ssh.sftp.rmdir File.join(REMOTE_FOLDER, "public")
                       ssh.scp.upload! "public", REMOTE_FOLDER, :recursive => true
                     end
                   end




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com                     Rate this talk at http://spkr8.com/t/8682
qedproject
      https://github.com/napcs/qedproject




Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682
qedproject
              Install Ruby

              gem install qedproject

              qedproject myapp -c -s -a -l jquery

                   creates app with Sass,
                   CoffeeScript, Asset packaging, and
                   jQuery

                   Sets up Guard and a simple Rake
                   file for deployment
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682
Demo



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com    Rate this talk at http://spkr8.com/t/8682

Recommended for you

[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf

Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.

infrastructure as codeclouddevops
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM

Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.

quantum communicationsshannon's channel theoremclassical theory
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Short syntax                     Nested
                                           Selectors
          Catch errors at
          compile time                     Variables

          List                             Mixins
          Comprehensions
                                           Composition
          Classes



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
With asset packaging
and automated deployment...



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
...CoffeeScript and Sass
      make developers happy.



Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com   Rate this talk at http://spkr8.com/t/8682
Questions?




    http://pragprog.com/book/wbdev/web-
            development-recipes
Brian P. Hogan
twitter: @bphogan
www.webdevelopmentrecipes.com       Rate this talk at http://spkr8.com/t/8682

Recommended for you

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

programmingcodingcivil engineering
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx

Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.

rpa in transportationrpa in transportation industryrpa in transportation sector
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text

More Related Content

What's hot

PHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vulnPHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vuln
Sandro Zaccarini
 
Api pain points
Api pain pointsApi pain points
Api pain points
Phil Sturgeon
 
Php web backdoor obfuscation
Php web backdoor obfuscationPhp web backdoor obfuscation
Php web backdoor obfuscation
Sandro Zaccarini
 
GraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTO
La Cuisine du Web
 
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval
Simon Willison
 
SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programs
SULTHAN BASHA
 
Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS
Christian Heilmann
 
PHP Tutorial (funtion)
PHP Tutorial (funtion)PHP Tutorial (funtion)
PHP Tutorial (funtion)
Tinnakorn Puttha
 
Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]
foundsearch
 
Php 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the GoodPhp 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the Good
Jeremy Kendall
 
PHP 1
PHP 1PHP 1
Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP
Jeremy Kendall
 
(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit
Olaf Alders
 
Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP
Jeremy Kendall
 
Code obfuscation, php shells & more
Code obfuscation, php shells & moreCode obfuscation, php shells & more
Code obfuscation, php shells & more
Mattias Geniar
 
Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
Markus Lanthaler
 
Inc
IncInc
php part 2
php part 2php part 2
php part 2
Shagufta shaheen
 
WordPressでIoTをはじめよう
WordPressでIoTをはじめようWordPressでIoTをはじめよう
WordPressでIoTをはじめよう
Yuriko IKEDA
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]
shafiullas
 

What's hot (20)

PHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vulnPHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vuln
 
Api pain points
Api pain pointsApi pain points
Api pain points
 
Php web backdoor obfuscation
Php web backdoor obfuscationPhp web backdoor obfuscation
Php web backdoor obfuscation
 
GraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTO
 
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval
 
SULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programsSULTHAN's - PHP MySQL programs
SULTHAN's - PHP MySQL programs
 
Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS
 
PHP Tutorial (funtion)
PHP Tutorial (funtion)PHP Tutorial (funtion)
PHP Tutorial (funtion)
 
Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]
 
Php 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the GoodPhp 102: Out with the Bad, In with the Good
Php 102: Out with the Bad, In with the Good
 
PHP 1
PHP 1PHP 1
PHP 1
 
Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP
 
(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit(Ab)Using the MetaCPAN API for Fun and Profit
(Ab)Using the MetaCPAN API for Fun and Profit
 
Leveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHPLeveraging the Power of Graph Databases in PHP
Leveraging the Power of Graph Databases in PHP
 
Code obfuscation, php shells & more
Code obfuscation, php shells & moreCode obfuscation, php shells & more
Code obfuscation, php shells & more
 
Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
 
Inc
IncInc
Inc
 
php part 2
php part 2php part 2
php part 2
 
WordPressでIoTをはじめよう
WordPressでIoTをはじめようWordPressでIoTをはじめよう
WordPressでIoTをはじめよう
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]
 

Similar to Web Development with CoffeeScript and Sass

AnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFacesAnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFaces
Ankara JUG
 
Primefaces Confess 2012
Primefaces Confess 2012Primefaces Confess 2012
Primefaces Confess 2012
cagataycivici
 
Building Go Web Apps
Building Go Web AppsBuilding Go Web Apps
Building Go Web Apps
Mark
 
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
Thai Pangsakulyanont
 
Blog Hacks 2011
Blog Hacks 2011Blog Hacks 2011
Blog Hacks 2011
Yusuke Wada
 
YAP / Open Mail Overview
YAP / Open Mail OverviewYAP / Open Mail Overview
YAP / Open Mail Overview
Jonathan LeBlanc
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
Ben Scofield
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScript
Brian Hogan
 
Data Visualisations In IavaScript
Data Visualisations In IavaScriptData Visualisations In IavaScript
Data Visualisations In IavaScript
annashipman
 
Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery
Dan Pickett
 
Os Pruett
Os PruettOs Pruett
Os Pruett
oscon2007
 
Zendcon 2007 Api Design
Zendcon 2007 Api DesignZendcon 2007 Api Design
Zendcon 2007 Api Design
unodelostrece
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju
Skills Matter
 
Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju
Skills Matter
 
HappyKardashian.com for #FVCP
HappyKardashian.com for #FVCPHappyKardashian.com for #FVCP
HappyKardashian.com for #FVCP
Eric Michalsen
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
ambiescent
 
Hacking with hhvm
Hacking with hhvmHacking with hhvm
Hacking with hhvm
Elizabeth Smith
 
huhu
huhuhuhu
Django
DjangoDjango
Django
webuploader
 

Similar to Web Development with CoffeeScript and Sass (20)

AnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFacesAnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFaces
 
Primefaces Confess 2012
Primefaces Confess 2012Primefaces Confess 2012
Primefaces Confess 2012
 
Building Go Web Apps
Building Go Web AppsBuilding Go Web Apps
Building Go Web Apps
 
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
 
Blog Hacks 2011
Blog Hacks 2011Blog Hacks 2011
Blog Hacks 2011
 
YAP / Open Mail Overview
YAP / Open Mail OverviewYAP / Open Mail Overview
YAP / Open Mail Overview
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScript
 
Data Visualisations In IavaScript
Data Visualisations In IavaScriptData Visualisations In IavaScript
Data Visualisations In IavaScript
 
Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery
 
Os Pruett
Os PruettOs Pruett
Os Pruett
 
Zendcon 2007 Api Design
Zendcon 2007 Api DesignZendcon 2007 Api Design
Zendcon 2007 Api Design
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App EngineCross Domain Web
Mashups with JQuery and Google App Engine
Cross Domain Web
Mashups with JQuery and Google App Engine
 
Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju
 
Primefaces Nextgen Lju
Primefaces Nextgen LjuPrimefaces Nextgen Lju
Primefaces Nextgen Lju
 
HappyKardashian.com for #FVCP
HappyKardashian.com for #FVCPHappyKardashian.com for #FVCP
HappyKardashian.com for #FVCP
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Hacking with hhvm
Hacking with hhvmHacking with hhvm
Hacking with hhvm
 
huhu
huhuhuhu
huhu
 
Django
DjangoDjango
Django
 

More from Brian Hogan

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with Hugo
Brian Hogan
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and Ansible
Brian Hogan
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with Vagrant
Brian Hogan
 
Docker
DockerDocker
Docker
Brian Hogan
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open Source
Brian Hogan
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
Brian Hogan
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.
Brian Hogan
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Brian Hogan
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch
Brian Hogan
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced Ruby
Brian Hogan
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into Words
Brian Hogan
 
HTML5 and CSS3 Today
HTML5 and CSS3 TodayHTML5 and CSS3 Today
HTML5 and CSS3 Today
Brian Hogan
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex
Brian Hogan
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library
Brian Hogan
 
Intro to Ruby
Intro to RubyIntro to Ruby
Intro to Ruby
Brian Hogan
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7
Brian Hogan
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with Shoes
Brian Hogan
 
The Why Of Ruby
The Why Of RubyThe Why Of Ruby
The Why Of Ruby
Brian Hogan
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven Testing
Brian Hogan
 
Learning To Walk In Shoes
Learning To Walk In ShoesLearning To Walk In Shoes
Learning To Walk In Shoes
Brian Hogan
 

More from Brian Hogan (20)

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with Hugo
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and Ansible
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with Vagrant
 
Docker
DockerDocker
Docker
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open Source
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced Ruby
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into Words
 
HTML5 and CSS3 Today
HTML5 and CSS3 TodayHTML5 and CSS3 Today
HTML5 and CSS3 Today
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library
 
Intro to Ruby
Intro to RubyIntro to Ruby
Intro to Ruby
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with Shoes
 
The Why Of Ruby
The Why Of RubyThe Why Of Ruby
The Why Of Ruby
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven Testing
 
Learning To Walk In Shoes
Learning To Walk In ShoesLearning To Walk In Shoes
Learning To Walk In Shoes
 

Recently uploaded

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 

Recently uploaded (20)

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 

Web Development with CoffeeScript and Sass

  • 1. Web Development with Sass and CoffeeScript Brian P. Hogan Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 2. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 3. What about you? Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 4. Web pages run on CSS and JavaScript Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 5. CSS feels limited and repetitive Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 6. and many people don’t really understand JavaScript Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 7. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 8. We need to use better tools to build modern web apps. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 9. CoffeeScript lets us write complex JS with simpler syntax. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 10. Sass gives us extensions to CSS. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 11. Sass + CoffeeScript + automated workflow Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 12. CoffeeScript Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 13. It’s more of a new syntax than a new language. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 14. Some jQuery $(function() { $("a#get").click(function(e) { .get("/ajax/get", {name: "John",time: "2pm"}, function(data) { $("#result").html(data); } ); }); }); Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 15. in CoffeeScript $ -> $("a#get").click (e) -> $.get "/ajax/get", {name: "John", time: "2pm"}, (data) -> $("#result").html(data) Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 16. CoffeeScript borrows from Python and Ruby syntax. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 17. CoffeeScript uses significant whitespace for scope. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 18. CoffeeScript compiles to regular, plain old JavaScript. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 19. Declaring variables and objects var box, colors, firstName, lastName; firstName = "Homer" firstName = "Homer"; lastName = "Simpson" lastName = "Simpson"; colors = ["Green", "Blue", "Red"] colors = ["Green", "Blue", "Red"]; box = box = { height: 40 height: 40, width: 60 width: 60, color: red color: red }; Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 20. JavaScript functions // function declaration. Visible anywhere (hoisting) (function hello(name){ alert("Hello " + name + "!"); } // function expression, visible to the scope of the var var hello = function(name){ alert("Hello " + name + "!"); } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 21. Function declaration in CoffeeScript hello -> alert "Hello" hello (name) -> alert "Hello #{name}" -> (thin arrow) Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 22. CoffeeScript uses function expressions. hello (name) -> alert "Hello #{name}!" var hello = function(name){ alert("Hello " + name + "!"); } #{} interpolates strings. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 23. New syntax means new features. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 24. a jQuery example $(function() { var displayError, displaySuccess, url; $("form").submit(function(event) {}); event.preventDefault(); url = $(this).attr("href"); $.ajax({ url: url + ".js", success: function(data, status, xhr) { displaySuccess($("#form")); }, error: function(xhr, status, error) { displayError(error); } }); displaySuccess = function(form) { var element; element = $("<p>Thanks for signing up!").addClass("success"); element.insertAfter(form); form.hide(); }; displayError = function(error) { $("#notice").attr("html", error); }; }); Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 25. jQuery $(function(){}) $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 26. jQuery event handler $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 27. jQuery $.ajax $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 28. success and error callbacks $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 29. -> leaves (this) scope alone. $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) -> displaySuccess($("form")) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 30. => Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 31. => binds this to the function body $ -> $("form").submit (event) -> event.preventDefault() url = $(this).attr "href" $.ajax url: url + ".js" success: (data, status, xhr) => displaySuccess($(this)) error: (xhr, status, error) -> displayError error displaySuccess = (form) -> element = $("<p>Thanks for signing up!").addClass("success") element.insertAfter form form.hide() displayError = (error) -> $("#notice").attr "html", error Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 32. Comprehensions Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 33. Simple iteration alert color for color in ["red", "green", "blue"] var colors = ["red", "green", "blue"]; for (i = 0, length = colors.length; i < length; i++) { var color = colors[i]; alert(color); } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 34. “for in” people = [ {name: "Homer", age: 42} {name: "Bart", age: 10} ] for person in people alert "#{person.name} is #{person.age} years old" Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 35. That’s just the beginning. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 36. Existential operator (?) total ?= 0 if (typeof total !== "undefined" && total !== null) { total; } else { total = 0; }; Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 37. Object-oriented JavaScript Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 38. Classes var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; this.age = options.age; } Person.prototype.fullname = function() { return "" + this.firstname + " " + this.lastname; }; return Person; })(); p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname()); Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 39. Classes var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; class Person this.age = options.age; constructor: (options) -> } @firstname = options.firstname Person.prototype.fullname = function() { @lastname = options.lastname return "" + this.firstname + " " + this.lastname; @age = options.age }; return Person; fullname: -> })(); "#{@firstname} #{@lastname}" p = new Person({ firstname: "Brian", lastname:="Hogan" p new Person }); alert p.fullname() alert(p.fullname()); Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 40. We can even extend classes! class basicWindow constructor: -> class mainWindow extends basicWindow @window = Ti.UI.createWindow({ constructor: -> backgroundColor: "#F5F5ED" super }) @window.backgroundColor = "#fff" open: -> @window.open() Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 41. How do we use it? In the web browser itself via Node.js With Ruby, via Guard Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 42. In the browser? <script language="text/coffeescript"> people = [ {name: "Homer", age: 42} {name: "Bart", age: 10} ] for person in people do (person) -> alert "#{person.name} is #{person.age} years old" </script> <script src="coffee-script.js"></script> (this is slow.) Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 43. With Node.js Install Node.js Install npm npm install -g coffee-script coffee --compile --output js/ coffee/ coffee -o js/ -cw coffee/ Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 44. Ruby and Guard Install Ruby gem install guard-coffeescript In our project guard init coffeescript guard Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 45. Guard watches input folders for changes and writes output files. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 46. Guard works with Sass too. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 47. Sass Syntactically Awesome Stylesheets Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 48. Sass gives CSS everything programmers want. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 49. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 50. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 51. CSS .sidebar { color: #000; border: 1px solid #000; } .sidebar p { margin-bottom: 20px; } .sidebar ul { margin-bottom: 10px; } .sidebar h1 { margin-bottom: 0; } .main{ color: #000; } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 52. Sass to the rescue! Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 53. Variables! $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0 Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 54. Variables and helper functions! $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0 Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 55. Scope with nesting $measure: 20px $color: #ce4dd6 .sidebar background-olor: $color border: 1px solid lighten($color, 20%) p margin-bottom: $measure ul margin-bottom: $measure / 2 h1 margin-bottom: 0 Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 56. Indented Sass SCSS $measure: 20px $measure: 20px; $color: #000 $color: #000; .sidebar .sidebar{ color: $color color: $color; border: 1px solid $color border: 1px solid $color; p p{ margin-bottom: $measure margin-bottom: $measure; } ul margin-bottom: $measure / 2 ul{ margin-bottom: $measure / 2; h1 } margin-bottom: 0 h1{ margin-bottom: 0; } } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 57. But wait... there’s more! Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 58. Modularization _mixins.scss @import "mixins"; @import "reset"; @import "base"; _reset.scss @import "fonts"; _base.scss _fonts.scss Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 59. Reusable Functions (mixins) blockquote { @mixin rounded($radius){ width: 225px; border-radius: $radius; padding: 15px 30px; -moz-border-radius: $radius; margin: 0; -webkit-border-radius: $radius; position: relative; } background: #faa; @include rounded(20px); } .button { cursor: pointer; color: #000; text-decoration: none; @include rounded(12px); } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 60. Mixins + Interation + Variables @mixin shadow($x, $y, $offset, $color) @each $prefix in "", -moz-, -webkit-, -o-, -khtml- #{$prefix}box-shadow: $x $y $offset $color Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 61. Mixins + Interation + Variables @mixin shadow($x, $y, $offset, $color) @each $prefix in "", -moz-, -webkit-, -o-, -khtml- #{$prefix}box-shadow: $x $y $offset $color box-shadow: 5px 5px 5px #dddddd; -moz-box-shadow: 5px 5px 5px #dddddd; -webkit-box-shadow: 5px 5px 5px #dddddd; -o-box-shadow: 5px 5px 5px #dddddd; -khtml-box-shadow: 5px 5px 5px #dddddd; } Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 62. Create well-organized folders and libraries of stylesheets. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 63. or use Compass. http://compass-style.org/ Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 64. Compass has helpers @import 'compass' @include box-shadow(#ddd 5px 5px 5px) box-shadow: 5px 5px 5px #dddddd; -moz-box-shadow: 5px 5px 5px #dddddd; -webkit-box-shadow: 5px 5px 5px #dddddd; -o-box-shadow: 5px 5px 5px #dddddd;} Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 65. How do we use it? via Sass via a supported IDE With Ruby, via Guard Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 66. with Sass Install Ruby $ gem install sass $ sass --watch sass:stylesheets Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 67. Ruby and Guard Install Ruby gem install guard-sass In our project guard init sass guard Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 68. Using Sass and CoffeeScript together Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 69. Mindscape Web Workbench http://www.mindscapehq.com/products/web-workbench Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 70. Ruby and Guard Install Ruby gem install guard-sass guard- coffeescript In our project guard init sass guard init coffeescript guard Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 71. Let’s talk deployment Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 72. Rails 3.1 and Capistrano Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 73. Asset Packaging Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 74. So instead of this... <link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/style.css"> <script src="javascripts/jquery-1.7.0.min.js"></script> <script src="javascripts/app.js"></script> Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 75. ...let’s do this: <link rel="stylesheet" href="assets/app.css"> <script src="assets/app.js"></script> Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 76. Ruby + Guard + Jammit Install Ruby $ gem install guard-jammit Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 77. Sass, CoffeeScript, Jammit watch Sass files for changes Place output css in tmp/ folder watch CoffeeScript files for changes Place output js in tmp/ folder Use Jammit to combine them. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 78. config/assets.yml stylesheets: app: - tmp/app.css - tmp/style.css javascripts: app: - javascripts/jquery-1.6.4.js - tmp/app.js Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 79. Guardfile guard "coffeescript", :input => "coffeescripts", :output => "tmp" guard "sass", :input => "sass", :output => "tmp" guard "jammit" do watch(/^javascripts/(.*).js/) watch(/^stylesheets/(.*).css/) watch(/^tmp/(.*).js/) watch(/^tmp/(.*).css/) end Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 80. Jammit places files in public/assets <link rel="stylesheet" href="assets/app.css"> <script src="assets/app.js"></script> Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 81. Deploy with Rake SERVER = "yourhost.com" USERNAME = "yourusername" REMOTE_FOLDER = "/home/#{USERNAME}/yourhost.com" REMOTE_FOLDER = 22 require 'net/scp' desc "compile CSS, js files" task :compile do require 'guard' Guard.setup Guard::Dsl.evaluate_guardfile Guard::guards.each{|guard| guard.run_all} end desc "Deploy web site" task :deploy => :compile do Net::SSH.start(SERVER, USERNAME, {:port => PORT} ) do |ssh| ssh.sftp.rmdir File.join(REMOTE_FOLDER, "public") ssh.scp.upload! "public", REMOTE_FOLDER, :recursive => true end end Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 82. qedproject https://github.com/napcs/qedproject Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 83. qedproject Install Ruby gem install qedproject qedproject myapp -c -s -a -l jquery creates app with Sass, CoffeeScript, Asset packaging, and jQuery Sets up Guard and a simple Rake file for deployment Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 84. Demo Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 85. Short syntax Nested Selectors Catch errors at compile time Variables List Mixins Comprehensions Composition Classes Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 86. With asset packaging and automated deployment... Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 87. ...CoffeeScript and Sass make developers happy. Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682
  • 88. Questions? http://pragprog.com/book/wbdev/web- development-recipes Brian P. Hogan twitter: @bphogan www.webdevelopmentrecipes.com Rate this talk at http://spkr8.com/t/8682

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. Everyone who&amp;#x2019;s done something on the web knows something about these languages.\n
  5. Despite the new properties from CSS3, the language itself lacks basic features that programmers expect.\n
  6. \n
  7. Instead many developers go out to StackOverflow and swipe some code, slap it in the project, and cause all sorts of trouble for previous developers.\n
  8. The solution is for us to use better tools and workflows to build our applications.\n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. It borrows the indentation of Python and some of the language features of both Python and Ruby.\n
  17. \n
  18. \n
  19. Variable declarations are all done by omitting the var keyword. CoffeeScript automatically adds this so we don&amp;#x2019;t accidentally get a variable in the wrong scope.\n
  20. We can define functions many ways in Javascript. These are the two most popular - we can use &amp;#x201C;function declarations&amp;#x201D; or we can use function expressions. \n
  21. The thin arrow defines our functions. If we want to take in parameters, we list them before the fat arrow. Everything within the function is indented. \n
  22. If we have no params for our function, we simply use the dash rocket. If we do want to have params come in, we can specify them before the dash rocket in parentheses.\n
  23. CoffeeScript always turns out regular JavaScript, but some of that JavaScript can be really, really hard to follow, so people don&amp;#x2019;t write it very often.\n
  24. Let&amp;#x2019;s take a look at this jquery example. We have a form submission, and we have two events attached to the ajax request we fire during the form submission. It&amp;#x2019;s a lot of callbacks and it&amp;#x2019;s a bit hard to follow.\n
  25. We can replace the documentReady jQuery method with a simple dollar sign and a dash rocket\n
  26. Then we can locate an element just like we would with jQuery, but we declare the click handler with the dash rocket again.\n
  27. jQuery&amp;#x2019;s ajax method takes a settings object. We can define the object literal using CoffeeScript&amp;#x2019;s syntax\n
  28. Then since CoffeeScript uses the function expression form of function declaration, we declare the success and error callbacks using the same dashrocket feature.\n
  29. the &amp;#x2018;this&amp;#x2019; keyword references the current context we&amp;#x2019;re in. In the submit handler, (this) refers to the element that received the click. But in the success handler, we don&amp;#x2019;t have access to that element anymore - &amp;#x2018;this&amp;#x2019; has changed so we have to use jquery again to grab the element.\n
  30. This is the fat arrow. It works like the thin arrow except for one very important feature - it passes the scope of this into the function\n
  31. Now &amp;#x201C;this&amp;#x201D; is bound and handled for us. We do a lot of hacks to avoid this in JavaScript. CoffeeScript gives us a language feature to solve that.\n
  32. We can use CoffeeScript syntax to loop over collections much more easily.\n
  33. Like in Ruby, we can iterate over arrays easily. This is equivalent to the typical &amp;#x201C;for&amp;#x201D; loop we are all used to writing\n
  34. We can even iterate over collections of objects this way. This writes 100% cross-browser javascript code. We often bring in things like Underscore.js or jquery just for things like this, but with CoffeeScript we&amp;#x2019;re not forcing our users to download those libraries just so we can have some convenience.\n
  35. CoffeeScript has some amazing syntax that saves us some time.\n
  36. We can use this to initialize a variable if it&amp;#x2019;s not already defined.\n
  37. JavaScript isn&amp;#x2019;t really an object-oriented language, even though programmers pretend it is. \n
  38. We can have classes in JavaScript. But to do that, we&amp;#x2019;d need to write monster code like this.\n
  39. We can replace that with this CoffeeScript code.... which is a LOT nicer.\n
  40. \n
  41. but how do we actually *use* it?\n
  42. We can use it in the browser. CoffeeScript is actually written in CoffeeScript, thus the interpreter is a JS file.\n
  43. We can also install Node.JS and NPM to get the &amp;#x2018;coffee&amp;#x2019; command on our machines.\n
  44. Or we can use Guard and Ruby. \n
  45. Guard is a simple commandline utility that watches folders for changes and executes tasks. It works on Windows and OSX and many Linux flavors.\n
  46. More on Guard in a bit, but first, let&amp;#x2019;s talk about Sass\n
  47. Sass is how I write my stylesheets\n
  48. As a programmer, I miss certain things in CSS, like variables and functions\n
  49. Look at how much CSS makes us repeat ourselves. We have to repeat this sidebar selector three times just so we can specify that we want to target elements within the sidebar scope.\n
  50. These repeated color codes make it hard for us to refactor styles later.\n
  51. And look at these measurements. These should be computed or something.\n
  52. \n
  53. We can declare variables and even work with them. Notice that the 20px value can be divided, while still retaining its suffix?\n
  54. We can also work with colors. We can use functions to alter the colors.\n
  55. And we can nest selectors so we can avoid repeating ourselves. This makes scoping so much more apparent.\n
  56. There&amp;#x2019;s a different syntax, if the whitespace indentation stuff isn&amp;#x2019;t your thing.\n
  57. The variables and nesting go a long way to making our CSS less repetitive, but we can go even farther.\n
  58. We can break up our styles into smaller files that we can compose together, and then build one main stylesheet out of those parts.\n
  59. We can create mixins, or reusable functions to build up a library of common, useful features for our stylesheets.\n
  60. And we can make them even more powerful, by combining mixins and iteration with our variables.\n
  61. This is a great way to reduce duplication in our code.\n
  62. We can then create some pretty amazing collections of reusable code.\n
  63. But we can also use Compass, a nice framework for working with Sass\n
  64. So instead, we just use Compass&amp;#x2019; helpers instead of building our own. And there are a lot of them.\n
  65. but how do we actually *use* it?\n
  66. \n
  67. Or we can use Guard and Ruby. \n
  68. So now you&amp;#x2019;re all excited about these things.\n
  69. Support in Visual Studio 2010 for Sass and CoffeeScript\n
  70. Or we can use Guard and Ruby. Guard can watch for CoffeeScript and Sass files at the same time.\n
  71. Deployment should be automated. The days of moving files by FTP should be over, so there should be some script or process that pushes apps to production.\n
  72. Basically done for you thanks to the asset pipeline. Deployment is handled by Capistrano tasks.\n
  73. We&amp;#x2019;ve got all these stylesheets and JavaScript files, but our browser shouldn&amp;#x2019;t have to make people download all of these files.\n
  74. This makes the end user download multiple files which means additional HTTP requests.\n
  75. Let&amp;#x2019;s combine our css and JS files so we eliminate the need for those extra requests.\n
  76. To do this, we can use Ruby, Guard, and Jammit.\n
  77. We can put Guard to work along with Jammit, an asset packager which will combine our JS and CSS files into single files, with compression.\n
  78. So we list our stylesheets that we want to combine, and we do the same with JS. We tell Jammit to look in the tmp folder, which is where Sass and CoffeeScript are placing the generated JS files. Our web page will reference these in the public/ folder\n
  79. This is a Guardfile that specifies the folders we want to watch. \n
  80. We just need to make sure our web page looks in the assets/ folder for the files.\n
  81. We then script the deployment. We could use any scripting language, really, but by using Rake, which is written in Ruby, we can actually invoke Guard and tell it to force compilation of our assets. When we run our deploy task, our compile task runs first, thanks to the =&gt; dependency declaration.\n
  82. qedproject is a simple command-line utility written in Ruby for creating projects that let you work with sass and Coffeescript. It&amp;#x2019;s a work in progress but I use it when I&amp;#x2019;m trying to figure something out.\n
  83. \n
  84. \n
  85. To sum it up, here are the main benefits to both of these technologies\n
  86. \n
  87. I&amp;#x2019;ve stopped writing regular CSS, and I&amp;#x2019;m looking to stop writing regular JavaScript. There are too many productivity advantages.\n
  88. Thanks for coming.\n