Tools for Modern Web Development Workflow

From web trends, to tools that let us create modern web sites. Given to the NYC Code Camp at the Microsoft Offices on July 23rd, 2014.

Grunt, Gulp, Typecast, Typescript, Coffeescript, Modernizr, AngularJs, Ember, Backbone, Pre-Processors and general junk

Transcript

3. Having a good name is a big deal. 3
4. So right now in term of design, flat design is a trend. We went from skeumorphism (http://en.wikipedia.org/wiki/Skeuomorph) and have moved to much more flat, simplier designs. Lack of gradients, shadows, depth etc. In many ways, Windows was the leader in this trend with the introduction of their design language and aesthetic with Metro. 4
5. Flat design – big images, typography 5
6. There is a trend in the color palette for flat design as well http://flatuicolors.com/ 6
7. Another example of simple, flat design 7
8. http://flipp.ca/ 8
9. Mcdonalds site – https://myburger.mcdonalds.co.uk/gallery 9
10. Medium. An entire site based mostly on typography. 10
11. Brooklynbeta https://brooklynbeta.org/2014 11
12. http://littlebigdetails.com/ Focuses on small snippets of exceptional usability. Could also exist in error messages. 12
13. Kleenex – soon as you get to the bottom, the tissues become gray to signal end of the box 13
14. Search for Fibonacci on Youtube, and it brings up results using that sequence. An opportunity to delight the user in a meaningful way https://www.youtube.com/results?search_query=fibonacci 14
15. Tone - 15
16. Error messages are now seen an opportunity to engage your audience 16
17. Full page scrolling is the norm, with many plugins and functionality that animate the page down for example. We used to say scrolling was bad, that the fold was important. Devices have changed this. We’d rather scroll on a device, than wait for the page to load again. 17
18. Scrolling We used to say let’s not scroll. Now its fine. Lazy loading 18
19. Is it death of the global navigation? We have seen a trend in very sparse navigation and it often being hidden. 19
20. Hamburger icon – drawer icon. Has in some ways become the standard, altho this is arguable. 20
21. Simplified nav. 21
22. Hidden nav on desktop before logo 22
23. Hidden nav on desktop on right 23
24. http://www.google.com/intl/all/nexus/ http://webstore-us.scotch-soda.com/ http://www.ohlandmusic.com/ https://www.kickstarter.com/team 24
25. http://www.dock.cz/en Fullscreen image and a hidden nav. Oh stuff just got real 25
26. http://www.dock.cz/en Fullscreen image and a hidden nav. Oh stuff just got real 26
27. “A great name is the difference between selling an idea or not” - http://www.slideshare.net/purewest/howto-namethings 27
28. So now, as we build these modern experiences, we have serious device fragmentation. Which means resolution fragmentation. 28
29. http://cdn.gifbay.com/2013/01/jack_nicholson_going_crazy-26036.gif It’s enough to drive the average developer crazy 29
30. http://img.pandawhale.com/13483-panda-turns-over-shopping-cart-q8MZ.gif 30
31. In visual studio - Mindscape Web Workbench It gives you support for Sass, Less, CoffeeScript etcs 31
32. Lots of 3rd party apps that support css preprocessors CodeKit Compass.app Less.app Development ides like Coda, Phpstorm, VISUAL STUDIO 32
33. It will ensure you don’t repeat yourself Code easier – use variables that you can repeat CSS more organized Can allow team dev a bit better More object oriented way to write css. Nested selectors etc. They allow: Partials Variables Extending Classes Nested Inheritance Functions Mixins 33
34. Browser render fonts differently so you need to be testing on all the platforms Types as a service – font embedding There are a bunch of services, means that fonts ---- FOUT – the idea that you get a flash of the fonts before the page rendered TYPE KIT, GOOGLE FONTS, FONTS.COM ETC Most important - 34
35. Typecast .com 35
36. Icon fonts help reduce size and ensure your icons look good at every size 36
37. So let’s talk about javascript 37
38. What do people typically start with? They start with things like bootstrap – scaffolding & behavior Modernizr – feature detection. Normalize – reset CSS to a standard baseline as all browsers have varying CSS defaults JQUERY – for dom selection = animation. Bootstrap – layout and behavior. Bloated. 38
39. There is movement to drop jquery. To move towards a more vanilla web, where you write what you need. Jquery was initially released in 2006. November 8th, IE 7 was released. This should put it in perspective. Browsers varied much more back then, and did not adhere to standards. 39
40. Typescript – created by Microsoft Coffeescript – GWT Clojure 40
41. Typescript is a typed superset of JS, compiles to plain JS, open source. It allows you to do things like data typing 41
42. Coffeescript syntax borrows from ruby. It compiles down to JS. It adds functionality that the language doesn’t support. 42
43. Automation and build processes have found their way into web development. Many who have used ANT in the past will be familiar with many of these processes. 43
44. Build processors are typically just things you do when you are testing or creating a build. We can do this for things like minifying or concating your code Maybe we wrote stuff in a preprocessor and we want to compile it Perhaps we have development level variables 44
45. Build processors are typically just things you do when you are testing or creating a build. We can do this for things like minifying or concating your code Maybe we wrote stuff in a preprocessor and we want to compile it Perhaps we have development level variables 45
46. Gulp Grunt Task Js All Javascript task runners. A task runner can help you with productivity, by automating some standard repetitive tasks for you. npm install -g grunt npm install -g grunt-cl Gulp is said to be easier npm install -g gulp 46
47. Gulp Grunt Task Js All Javascript task runners. A task runner can help you with productivity, by automating some standard repetitive tasks for you. npm install -g grunt npm install -g grunt-cl Gulp is said to be easier npm install -g gulp 47
48. Gulp Grunt Task Js All Javascript task runners. A task runner can help you with productivity, by automating some standard repetitive tasks for you. npm install -g grunt npm install -g grunt-cl Gulp is said to be easier npm install -g gulp 48
49. Example of what gulp looks like for a basic task such as compiling sass and moving it over. 49
50. - npm install -g bower 50
51. Yeoman Basically creates your scaffolding npm install -g yo Tonnes of generators for what you need. 51
52. What do frameworks do and how do they help 52
53. There are a bunch of frameworks. Too many to mention. All with there own features, some more lightweight than others. Ember, Angular Can js Backbone Most of these frameworks are MVC - Model View Controller. They separate areas of concerns. Ember and Angular are the most strict – and are less flexible than something like Backbone. Frameworks give you an abstract base – from which you can add custom code. Most frameworks offer things like routing, views, data binding ( auto sync of data between model / view ) . Angular for example provides two way binding. 53
54. You need to consider features that you need from each framework. Does it do routing? Two way binding? How flexible is it? What is the community like? Actively developed? Active documentation? 54
55. Patterns and approaches people are using – for JS, for building sites, for CSS> 55
56. We talk a lot about how things need to be modular. Components. Device Agnostic. Mobile first. 56
57. http://en.wikipedia.org/wiki/Asynchronous_module_definition Modules encapsulate a piece of code into a unit and allows a way to define or export it It can also refer to other units of code The AMD format – avoids use of globals , encapsulates the definition, allows for many modules in a single file etc 57
58. Require.js File loader and dependency manager Allows you to write modules that have depenedancies 58
59. http://patternlab.io/ - pattern lab, brad frost 59
60. http://bradfrostweb.com/blog/post/atomic-web-design/ - brad frost 60
61. http://danielmall.com/work/crayola/ - components – Daniel mall 61
62. http://danielmall.com/articles/rif-element-collages/ - dan mall 62
63. Jonathon Snook – scalable and modular css https://smacss.com/ 63
64. Start it all over again. Work on quality. Get feedback. Improve. Submit. 64