SlideShare a Scribd company logo
1 of 17
The buzzwords/phrases heard most often:
• HTML5 (of course!)
• Javascript libraries & frameworks (such as jQuery)
• GitHub (open source collaboration)
• SASS (or other CSS precompilers)
• Mobile (native or web app?)
• Responsive (grids & flexibility)
• One-page Web Apps (use that client! Fewer round-
trips!)
• Web design is becoming more like software
development
• Users expect richer experience, increased
interactivity, and speed
• Device independence requires planning from back-
end to front-end
• Mobile developers unhappy with browser support and
HTML5 promises. Much talk of developing native apps
instead.
• Developer Tools and Workflow
• JavaScript Frameworks, Libraries and APIs
• HTML5
• CSS & Precompilers
• Collaborative Spaces
• Social Media
• Browser Support
• Mobile Development
• Responsive/Adaptive Design & Development
• JSHint: detect errors in JavaScript
• Testing automation:
• Deployment automation
• Yoeman: manage workflow, libraries & testing
• LiveReload: view CSS edits with no reload
• CodeKit: compiles Less, Sass, & Stylus files.
Combines, minifies & error-checks JavaScript.
• Paraphrased from Rebecca Murphey’s article at:
http://http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
• Once upon a time, editing files, testing them locally…and then FTPing
them to the server was the essential workflow of a front-end dev…
• Something has changed in the last couple of years.
• Maybe it’s the result of people starting to take front-end dev seriously
• Maybe it’s browser vendors mostly getting their sh** together
• Or maybe it’s front-end devs …see[ing the] light about the process of
software development…
Here are some helpful tools (per Paul Irish, Mike Taylor, Angus Croll, and Vlad
Filippov)
• JavaScript
• Git (and a GitHub account)
• Modularity, dependency management and production builds
• In-Browser Developer Tools
• Command line
• Client-side templating
• CSS preprocessors
• Testing
• Process automation
• Code quality
• MDN - collaborative front-end development documentation
• Go to a library and start reading books.
• If you are the application then the collection of books is
the library.
• The shelves, the cupboards, and the compound that
houses all this constitutes the framework.
• Everything you come in contact while performing the task
of reading the books is the API.
• Dojo
• Enyo
• Ext JS
• Google Web Toolkit
• jQuery
• Midori
• MochiKit
• MooTools
• Prototype
• Qooxdoo
• Ember
• Underscore
• JavaScriptMVC
• Spine
• Backbone
• Knockout
• Sammy
• Angular
• SproutCore
Precompilers allow the use of variables, conditionals,
nested rules, mixins, and operations in CSS and then
parse it to regular styles. These are a few of the most
popular precompilers and authoring frameworks:
• SASS: Ruby
• Less: PHP
• Stylus:
• Compass: CSS3 authoring framework with mixins,
functions, and helpers for SASS.
• CodeKit: compiles Less, Sass, Stylus, and more.
• GitHub: Uses Git (fast, efficient, distributed
version control system for collaborative
development.)
• Beanstalk: Uses Subversion, Mercurial, Git.
• Google Code Hosting:
• Bitbucket:
Create mobile applications for iOS, Android, Blackberry, Windows
Phone, Palm WebOS, Bada and Symbian using the HTML, CSS and
JavaScript.
There was so much information, and so many great
resources to investigate. Can’t possibly put them all in
this presentation (however, initially, I did try! Whew!)
Please refer to Confluence for further investigation.
Also, I will continue my research into many of these
technologies on edydawsonwebdev.wordpress.com
Thank you!

More Related Content

What's hot

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 

What's hot (20)

Bayt training
Bayt trainingBayt training
Bayt training
 
What is front-end development ?
What is front-end development ?What is front-end development ?
What is front-end development ?
 
'Less' css
'Less' css'Less' css
'Less' css
 
Web designing course content
Web designing course contentWeb designing course content
Web designing course content
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Jquery
JqueryJquery
Jquery
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Debugging WordPress
Debugging WordPressDebugging WordPress
Debugging WordPress
 
WordPress as a CMS (short version)
WordPress as a CMS (short version)WordPress as a CMS (short version)
WordPress as a CMS (short version)
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Taming 3rd party content
Taming 3rd party contentTaming 3rd party content
Taming 3rd party content
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
From Junior Dev to Senior Dev
From Junior Dev to Senior DevFrom Junior Dev to Senior Dev
From Junior Dev to Senior Dev
 
Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
 
WordPress as an Application Framework
WordPress as an Application FrameworkWordPress as an Application Framework
WordPress as an Application Framework
 
Bringing a Design Language to Life
Bringing a Design Language to LifeBringing a Design Language to Life
Bringing a Design Language to Life
 
Social Sciences Librarians Boot Camp 2012: Zotero and Mendeley
Social Sciences Librarians Boot Camp 2012: Zotero and MendeleySocial Sciences Librarians Boot Camp 2012: Zotero and Mendeley
Social Sciences Librarians Boot Camp 2012: Zotero and Mendeley
 

Similar to Edy Dawson Notes on SF HTML5 Dev Conf

Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 

Similar to Edy Dawson Notes on SF HTML5 Dev Conf (20)

Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Greenfield Java 2013
Greenfield Java 2013Greenfield Java 2013
Greenfield Java 2013
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Frontend as a first class citizen
Frontend as a first class citizenFrontend as a first class citizen
Frontend as a first class citizen
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
JS - The Unknown Basics.pptx
JS - The Unknown Basics.pptxJS - The Unknown Basics.pptx
JS - The Unknown Basics.pptx
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
End-to-end W3C APIs
End-to-end W3C APIsEnd-to-end W3C APIs
End-to-end W3C APIs
 
Women Who Code, Ground Floor
Women Who Code, Ground FloorWomen Who Code, Ground Floor
Women Who Code, Ground Floor
 
Bridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A StorybookBridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A Storybook
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 

Edy Dawson Notes on SF HTML5 Dev Conf

  • 1.
  • 2. The buzzwords/phrases heard most often: • HTML5 (of course!) • Javascript libraries & frameworks (such as jQuery) • GitHub (open source collaboration) • SASS (or other CSS precompilers) • Mobile (native or web app?) • Responsive (grids & flexibility) • One-page Web Apps (use that client! Fewer round- trips!)
  • 3. • Web design is becoming more like software development • Users expect richer experience, increased interactivity, and speed • Device independence requires planning from back- end to front-end • Mobile developers unhappy with browser support and HTML5 promises. Much talk of developing native apps instead.
  • 4. • Developer Tools and Workflow • JavaScript Frameworks, Libraries and APIs • HTML5 • CSS & Precompilers • Collaborative Spaces • Social Media • Browser Support • Mobile Development • Responsive/Adaptive Design & Development
  • 5. • JSHint: detect errors in JavaScript • Testing automation: • Deployment automation • Yoeman: manage workflow, libraries & testing • LiveReload: view CSS edits with no reload • CodeKit: compiles Less, Sass, & Stylus files. Combines, minifies & error-checks JavaScript.
  • 6. • Paraphrased from Rebecca Murphey’s article at: http://http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ • Once upon a time, editing files, testing them locally…and then FTPing them to the server was the essential workflow of a front-end dev… • Something has changed in the last couple of years. • Maybe it’s the result of people starting to take front-end dev seriously • Maybe it’s browser vendors mostly getting their sh** together • Or maybe it’s front-end devs …see[ing the] light about the process of software development…
  • 7. Here are some helpful tools (per Paul Irish, Mike Taylor, Angus Croll, and Vlad Filippov) • JavaScript • Git (and a GitHub account) • Modularity, dependency management and production builds • In-Browser Developer Tools • Command line • Client-side templating • CSS preprocessors • Testing • Process automation • Code quality • MDN - collaborative front-end development documentation
  • 8. • Go to a library and start reading books. • If you are the application then the collection of books is the library. • The shelves, the cupboards, and the compound that houses all this constitutes the framework. • Everything you come in contact while performing the task of reading the books is the API.
  • 9. • Dojo • Enyo • Ext JS • Google Web Toolkit • jQuery • Midori • MochiKit • MooTools • Prototype • Qooxdoo • Ember • Underscore • JavaScriptMVC • Spine • Backbone • Knockout • Sammy • Angular • SproutCore
  • 10.
  • 11. Precompilers allow the use of variables, conditionals, nested rules, mixins, and operations in CSS and then parse it to regular styles. These are a few of the most popular precompilers and authoring frameworks: • SASS: Ruby • Less: PHP • Stylus: • Compass: CSS3 authoring framework with mixins, functions, and helpers for SASS. • CodeKit: compiles Less, Sass, Stylus, and more.
  • 12. • GitHub: Uses Git (fast, efficient, distributed version control system for collaborative development.) • Beanstalk: Uses Subversion, Mercurial, Git. • Google Code Hosting: • Bitbucket:
  • 13.
  • 14.
  • 15. Create mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the HTML, CSS and JavaScript.
  • 16.
  • 17. There was so much information, and so many great resources to investigate. Can’t possibly put them all in this presentation (however, initially, I did try! Whew!) Please refer to Confluence for further investigation. Also, I will continue my research into many of these technologies on edydawsonwebdev.wordpress.com Thank you!