@FrontendFightrs
@jjmu15

facebook.com/frontendFightersBudapest

meetup.com/Frontend-Fighters-Budapest

WELCOME!

Sponsors

Watch this space

Project Foundations

&
Media Query Bubbling

Frontend Development Today

Find what works for you! 

The Fuck

https://github.com/nvbn/thefuck

Oh My Zsh

http://ohmyz.sh/

Text

Text

Modularise Your Files 

Use the BEM methodology

One Step Further
Media Query Bubbling

Task Runners

Benefits

• Sass Compilation
• File concatonation
• file minification
• image optimisation
• live reload
• JSHint and CSSLint
• build jobs

Example!

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload');

// Styles
gulp.task('sass', function() {
  return sass('assets/style.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'));
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src([
      'assets/js/jquery.js',
      'assets/js/sitewide.js',
      'assets/js/_contentWidget.js',
  ])
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// Images
gulp.task('images', function() {
  return gulp.src('assets/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'));
});

// Default task
gulp.task('default', function() {
    gulp.start('sass', 'scripts', 'images');
});


// Watch
gulp.task('watch', function() {

  // Watch framework files
  gulp.watch('assets/scss/**/**/*.scss', ['sass']);
  // Watch .scss files
  gulp.watch('assets/scss/**/*.scss', ['sass']);
  // Watch .js files
  gulp.watch('assets/js/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('assets/images/**/*', ['images']);

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

"Real" Development Environemnts

Example

# .vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.

Vagrant.configure(2) do |config|

  # VM Box
  config.vm.box = "chef/centos-6.5"
  
  # VM IP
  config.vm.network "private_network", ip: "193.169.34.16"

  # synced folders
  config.vm.synced_folder "/Users/jamie/Sites/personal/project1/", "/var/www/html/project1/public_html", :nfs => true
  config.vm.synced_folder "/Users/jamie/Sites/personal/project2/", "/var/www/html/project2/public_html", :nfs => true

  config.vm.synced_folder ".", "/vagrant", disabled: true

end

Version Control

Git Flow

Lets Simplify Again!

Each workflow has its own branch!

2 Permanent branches!
Staging/Testing & Production

Tested locally and only merged when complete!

Any questions?

JSConf Budapest 2016

€50 Discount!

Got something to say?

Thanks

@jjmu15

@frontendFightrs