3. Part 1:
● Introduction
● Coding guidelines
● Servers
● Tools & automatization
● Starter templates
● Responsive web design
Schedule
Part 2:
● Git & team work
● Frameworks & libraries
● Modular CSS: SMACSS, BEM
● Javascript patterns
● Coding challenge, Q&A
4. A bigger project
● More than one frontend developer
○ sometimes more than 1 team
● Multiple & different page types
● Long term development goal
● Responsive
● Pure frontend or framework based solution
5. Architecture
● Technology stack (frameworks)
● Code organization
● Coding guidelines
● RWD
○ fluid vs. adaptive
○ Mobile first vs. desktop first
● Icons system / images
● Performance
● Workflow
7. ● Maintain simple & clean structure for your code
○ keep your code separated in assets folders
■ javascripts
■ css / sass
■ images
■ fonts
■ other stuff
● look for best practices for your framework
● organize in modules instead by type
Code organization
8. ● don’t mix spaces & tabs
○ I suggest to configure your editor to indent everything with 2 spaces
○ but this is never ending war ;-)
○ use good code editor
■ webstorm / phpstorm is quite powerful
● maintain clean & usable code
○ comment well
○ keep good variable names
○ use consistent naming convention
● UTF-8 everywhere
○ <div class="♫">
Coding guidelines
9. HTML guidelines
● keep the code well formatted
● use html5 doctype
○ occasionally check it with W3C validator
● keep all tags lowercase
● wrap all attributes in double quotes
● try to write semantic html
○ but don’t overdo with html5 semantic tags
○ good reference at http://html5doctor.com/
● keep in mind accessibility
○ learn about aria tags
10. ● keep the code well formatted
● don’t rely on using ID-selectors for styling
● use lowercase-class-names
○ write semantic class names
○ separate with hyphens
○ unless you consider using BEM / SMACSS
● avoid long selectors
○ especially watch out for nesting in sass
○ learn & understand how CSS cascade works
○ avoid using !important
CSS guidelines - selectors
11. ● use shorthand properties
○ padding: 10px 20px;
● don’t overuse -vendor-prefixes too much
○ use autoprefixer
○ they need to come before standard property
● try to avoid using pixel units everywhere
○ learn about rems
● use #hex colors & rgba when wants opacity
CSS guidelines
12. CSS guidelines
● keep media-queries close to relevant sections
● separate bigger sections with block comments
● organize code into meaningful sections
○ don’t write everything in the bottom
○ find the “right place”
13. SASS guidelines
● avoid nesting selectors
○ or try to keep it up to 2-3 levels
■ or really, avoid!
● use sass @imports to organize your css code
○ start name of imported partial with underscore
■ _grid.scss, _config.scss
○ organize into components, modules, shared etc..
● use variables!
○ at least for colors & media-query breakpoints
14. Javascript guidelines
● keep the code well formatted
● make sure you understand basics concepts of Javascript
● use single quotes for strings
● always use expanded blocks syntax
○ if (condition) { }
● use semicolons;
● var camelCase your variable & function names
● ModuleNames should start from capital letter
15. Javascript guidelines
● use JSHint or ESLint to catch your errors
● learn couple useful module patterns
○ jQuery plugin
○ http://addyosmani.com/resources/essentialjsdesignpatterns/book/
○ http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
● learn about ES6
16. Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
});
// The rest of the code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
17. Revealing module pattern
var MyModule = (function(window, undefined) {
var myState = 0;
function initialize() {
console.log('Module initialized...');
}
function setState(data) {
state = data;
}
return {
init: initialize,
someOtherMethod: myOtherMethod
};
})(window);
MyModule.init(); // logs “Module initialized…”
MyModule.setState(3);
18. jQuery plugin
;(function ( $, window, document, undefined ) {
var pluginName = "myPluginName",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// Place initialization logic here
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, "plugin_" + pluginName )) {
$.data( this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );
19. jQuery guidelines
● don’t abuse $(selector)
○ remember to cache references to object
○ keep prefix of your variable with $ to indicate its a jquery object
■ eg. $container = $('.container');
● consider using custom class as hooks for your events
○ $('.js-button-submit')
● when binding events, preffer using .on()
○ Avoid anonymous functions for debugging
○ Use custom namespace for events
○ Use delegation
20. jQuery guidelines
● don’t put everything in $.ready function
● use $.ajax instead of $.get, $.post methods
● use Promise syntax for handling responses
○ $.ajax({ … })
■ .done(successHandler)
■ .fail(errorHandler)
● don’t use jQuery animations
● avoid CSS changes via jQuery
○ prefer class toggling
21. jQuery guidelines
● use jquery 2.x
○ unless IE8
● load it from external CDN for caching benefits
● don’t use too many jQuery plugins
○ check size
○ check github page for issues
● think twice before using jQuery UI
● bootstrap JS relies on jquery
● http://gregfranko.com/jquery-best-practices/
22. ● Working with file:// protocol is unreliable.
● Use web server
○ Apache2
○ PHP
○ Node.js
○ Ruby/Python
● Vagrant
● MAMP / WAMP
○ I don’t recommend
Serving files locally
23. Apache2
● Most popular server
● Already available in Mac OS X & Ubuntu
○ Need little bit of tweaking, config breaks after update
● I guess also possible on Windows…
● Need to setup virtual hosts if you have multiple sites
○ I prefer to do this anyway
24. ● Easy to use
● Available from PHP 5.4
○ Available in OS X (5.6), Easy to install on Ubuntu (5.5)
■ apt-get install php5
○ I guess also possible on windows…
● php -S localhost:8080
PHP built-in server
25. ● Useful when you’re building Webapp / SPA
● Just one gulp plugin
○ npm install --save-dev gulp-connect
● Not so easy for dynamic templates
gulp.task('server', function() {
connect.server();
});
Node.js / gulp-connect
26. ● Full OS using virtualization
● Every developer have the same environment
● Powerful configuration
○ You can keep that in git
○ Requires some knowledge
● Useful for framework setup with lots of dependencies
● Slow and problematic on windows
Vagrant
29. Grunt
The JavaScript Task Runner
● Configuration…
● Lots of plugins
● Operates on files
● But…
○ Seems like not updated lately
○ Community shifted to gulp
33. Automate and enhance your workflow
● Gulp is the new grunt
● Active community
● Simple configuration
● Organized around streams
● Faster & less config
gulp.js
36. npm & node.js packages
npm is the package manager for node.js
● pure node.js packages
● simple setup, without much of configuration
● easy to maintain
37. npm
● Install package
○ npm install jshint --save-dev
● Configure
○ package.json
● Run
○ npm run script name
42. Semantic versioning
Semantic versioning: MAJOR.MINOR.PATCH
● Patch releases: 1.0 or 1.0.x or ~1.0.4
● Minor releases: 1 or 1.x or ^1.0.4
● Major releases: * or x
43. Getting started
Take something as your starting point:
● Web Starter Kit from Google
● HTML5 Boilerplate
● Bootstrap
● yeoman generator
44. Web Starter Kit is an easy way to start a new project.
● build process,
● boilerplate HTML
● styles (material design)
Web Starter Kit from Google
45. HTML5 Boilerplate
The web’s most popular front-end template
● HTML Page Structure
● Normalize.css
● Modernizr.js
● jQuery from CDN with local fallback
46. Bootstrap from Twitter
Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile first projects on the web.
● Not really a boilerplate
● But you can use basic template
● http://getbootstrap.com/getting-started/#template
47. ● Start using git if you haven’t already started
○ Github - free for open source projects
○ Bitbucket - unlimited private repositories, limited users
○ Gitlab - self hosted github UI clone
Git
48. Git - commits convention
[FEATURE] Implements lazy loading for products carousel (max 70 chars)
Adds JS module to loads products for carousel using AJAX triggered after document
ready. Implementation is using sttic JSON as example.
- JS module to load products
- CSS for loading animation
- Example of JSON for products
Ref: JIRA-1392
49. ● Basic
○ only dev / master
● Feature branches
○ use pull / merge requests for code review
● Gitflow
○ when working on multiple releases & feature branches
Git - Branching model
50. ● git status
○ read what’s there ;-)
● git reset
○ git reset
○ git reset head --hard
○ git reset origin/master --force
● git revert
○ git revert commit-sha
○ creates new commit
Git - Command line
51. ● git cherry-pick
○ git cherry-pick commit-sha
○ creates new commit
● git rebase
○ git rebase -i head~2
○ is rewriting history
● git merge
○ git merge your-branch-name
○ resolve conflicts correctly
Git - Command line
52. ● git pull
○ git fetch origin + git merge
○ git pull --rebase
■ create cleaner history
● git stash
○ git stash
○ git stash pop
● git log
○ git lg
○ git lg | grep JIRA-1234
Git - Command line
54. jQuery
● Site enhancements
○ sliders
○ galleries
○ AJAX
○ not much business logic
● DOM manipulation
● Simple custom event system
● Form validation
○ parsley.js
55. Bootstrap
● UI library for the web
● SCSS / Less components
○ Include only what you need with sass imports
○ You can use SASS @extend
● Same for JS
○ you can include only what you need
● Useful
○ grid
○ forms
○ modal
56. Modernizr
● Feature detection for browsers
○ append CSS classes to html
○ Modernizr JS object for testing properties
● Generate custom build
● Does not have to be included in the head
57. Backbone.js
● Simple structure for web application
○ Models, Collections, Views, Routers
○ Less abstraction
○ Simple, still popula
● http://addyosmani.github.io/backbone-fundamentals/
58. Angular
● The “enterprise” frameworks
● Most popular kinda MVC framework
● Easy 2 way binding
● Performance issues
● Angular 2 on the way
59. React
● Library from Facebook
● High performance
○ Virtual DOM
● Organized around components & state
65. BEM
BEM – Block Element Modifier is a methodology, that helps you to achieve
reusable components and code sharing in the front-end
● Naming conventions
● Independent modular blocks
● Flexible and allows for customization
66. BEM - Example
.block {}
.block__element {}
.block--modifier {}
// example of search for
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
67. BEM
Learn more about BEM:
● http://getbem.com/
● https://css-tricks.com/bem-101/
● http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
bem-syntax/
● http://www.smashingmagazine.com/2012/04/a-new-front-end-
methodology-bem/