SlideShare a Scribd company logo
FRONTEND DEVELOPMENT
Supercharge your frontend development with little languages
and smart tools
Dave Jeffery
@DaveJ
dave@davejeffery.com

Freelance frontend guy.
How I like to develop

• Invest

time getting the set up right

• Write

descriptive code

• Use

tools that are 'of' the web
#1: Coffeescript for your
Javascript
• Coffeescript
• Minimal

is just Javascript

syntax

• Javascript:

‘The Good Parts’
Coffeescript: Links

• Coffeescript: http://coffeescript.org/
• The

Little Book on CoffeeScript: http://arcturo.github.io/library/
coffeescript/

• Literate

Coffeescript: http://ashkenas.com/literate-coffeescript/
COFFEESCRIPT DEMO
#2: Sass for your CSS

• Sass

is just CSS

• Great

mixins available, especially Bourbon & Foundation
Sass Examples 1

• Variables
$primary-color: #cc0000;

• Mixins
@include background-image(linear-gradient(-45deg, #aaa, #ccc);
Sass Examples 2
• Nesting
.menu {
background: #fff;
&::before { @include triangle(25px, #333, up); }
> ul { list-style: none; }
}

• Partials
@import ‘_typography’;
Sass: Links
• Sass: http://sass-lang.com/
• Bourbon: http://bourbon.io/
• Compass: http://compass-style.org/
• Foundation: http://foundation.zurb.com/
• Stylus: http://learnboost.github.io/stylus/
• Less: http://lesscss.org/
Jade for your HTML

•

doctype html
html(lang="en")
head
title Page Title
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
AngularJS

•Two-way

data binding
Angular: Links
• AngularJS: http://angularjs.org/
• Angular

Classy: http://davej.github.io/angular-classy/

• Polymer: http://www.polymer-project.org/
• React: http://facebook.github.io/react/
• Ember: http://emberjs.com/
Grunt

• Automation
• Thousands

of plugins
Grunt: Links
• Grunt: http://gruntjs.com/
• Makefile
• Gulp: http://gulpjs.com/
• CodeKit

(Mac): https://incident57.com/codekit/

• Prepros

(Windows): http://alphapixels.com/prepros/

• Write

your own
DEMO

More Related Content

Similar to Frontend Development - Supercharge your frontend development with little languages and smart tools

Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
canarymason
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
BookNet Canada
 
Websites & framworks: web at Everntoe
Websites & framworks: web at EverntoeWebsites & framworks: web at Everntoe
Websites & framworks: web at Everntoe
Ryan Burgess
 
SUGUK Let me script that for you
SUGUK Let me script that for youSUGUK Let me script that for you
SUGUK Let me script that for you
sharepointbaker
 
An Introduction to CoffeeScript
An Introduction to CoffeeScriptAn Introduction to CoffeeScript
An Introduction to CoffeeScript
Ramkumar Murugadoss
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
mwrather
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
SPTechCon
 
Froyo to kit kat two years developing & maintaining deliradio
Froyo to kit kat   two years developing & maintaining deliradioFroyo to kit kat   two years developing & maintaining deliradio
Froyo to kit kat two years developing & maintaining deliradio
Droidcon Berlin
 
Rapid WordPress theme development
Rapid WordPress theme developmentRapid WordPress theme development
Rapid WordPress theme development
Jonny Allbut
 
Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*
The Wolff
 
Less presentation
Less presentationLess presentation
Less presentation
Todd Shelton
 
Week 4 css recap and js
Week 4   css recap and jsWeek 4   css recap and js
Week 4 css recap and js
brianjihoonlee
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
Nick Cooley
 
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
Eric Sembrat
 
Style Is Cool
Style Is CoolStyle Is Cool
Style Is Cool
Fran Herrero Pérez
 
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and TweaksAPEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
Marko Gorički
 
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
Mario Hernandez
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
Eric Sembrat
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
The Environment Restaurant
The Environment RestaurantThe Environment Restaurant
The Environment Restaurant
Martin de Keijzer
 

Similar to Frontend Development - Supercharge your frontend development with little languages and smart tools (20)

Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
 
Websites & framworks: web at Everntoe
Websites & framworks: web at EverntoeWebsites & framworks: web at Everntoe
Websites & framworks: web at Everntoe
 
SUGUK Let me script that for you
SUGUK Let me script that for youSUGUK Let me script that for you
SUGUK Let me script that for you
 
An Introduction to CoffeeScript
An Introduction to CoffeeScriptAn Introduction to CoffeeScript
An Introduction to CoffeeScript
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Froyo to kit kat two years developing & maintaining deliradio
Froyo to kit kat   two years developing & maintaining deliradioFroyo to kit kat   two years developing & maintaining deliradio
Froyo to kit kat two years developing & maintaining deliradio
 
Rapid WordPress theme development
Rapid WordPress theme developmentRapid WordPress theme development
Rapid WordPress theme development
 
Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*
 
Less presentation
Less presentationLess presentation
Less presentation
 
Week 4 css recap and js
Week 4   css recap and jsWeek 4   css recap and js
Week 4 css recap and js
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
 
Style Is Cool
Style Is CoolStyle Is Cool
Style Is Cool
 
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and TweaksAPEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
 
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
The Environment Restaurant
The Environment RestaurantThe Environment Restaurant
The Environment Restaurant
 

Recently uploaded

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 

Recently uploaded (20)

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 

Frontend Development - Supercharge your frontend development with little languages and smart tools

  • 1. FRONTEND DEVELOPMENT Supercharge your frontend development with little languages and smart tools
  • 3. How I like to develop • Invest time getting the set up right • Write descriptive code • Use tools that are 'of' the web
  • 4. #1: Coffeescript for your Javascript • Coffeescript • Minimal is just Javascript syntax • Javascript: ‘The Good Parts’
  • 5. Coffeescript: Links • Coffeescript: http://coffeescript.org/ • The Little Book on CoffeeScript: http://arcturo.github.io/library/ coffeescript/ • Literate Coffeescript: http://ashkenas.com/literate-coffeescript/
  • 7. #2: Sass for your CSS • Sass is just CSS • Great mixins available, especially Bourbon & Foundation
  • 8. Sass Examples 1 • Variables $primary-color: #cc0000; • Mixins @include background-image(linear-gradient(-45deg, #aaa, #ccc);
  • 9. Sass Examples 2 • Nesting .menu { background: #fff; &::before { @include triangle(25px, #333, up); } > ul { list-style: none; } } • Partials @import ‘_typography’;
  • 10. Sass: Links • Sass: http://sass-lang.com/ • Bourbon: http://bourbon.io/ • Compass: http://compass-style.org/ • Foundation: http://foundation.zurb.com/ • Stylus: http://learnboost.github.io/stylus/ • Less: http://lesscss.org/
  • 11. Jade for your HTML • doctype html html(lang="en") head title Page Title script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
  • 13. Angular: Links • AngularJS: http://angularjs.org/ • Angular Classy: http://davej.github.io/angular-classy/ • Polymer: http://www.polymer-project.org/ • React: http://facebook.github.io/react/ • Ember: http://emberjs.com/
  • 15. Grunt: Links • Grunt: http://gruntjs.com/ • Makefile • Gulp: http://gulpjs.com/ • CodeKit (Mac): https://incident57.com/codekit/ • Prepros (Windows): http://alphapixels.com/prepros/ • Write your own
  • 16. DEMO