Front-end workflows & best practices

Talk for dwodense about front-end workflow & best practices.
devdk regi. gulp, sass, grunt, less, sublime text

Transcript

1. DWODENSE 12. AUGUST 2014 Front-end workflow and best practices.
2. HELLO WORLD! Hvad vi er, hvem vi er og hvad vi laver.
3. ME.DEVDK.ORG GRATIS BNC - wow, so cheap, much love.
4. THE POWER OF SASS No rules, let’s play!
5. SASS Syntactically Awesome Stylesheets
6. DON’T BE SASSY, BUT DO IT SASSY. Import, Seperate & Comment @import 'core/reset'; @import ‘helpers/extends'; @import 'helpers/variables'; // core // helpers
7. LET’S NOT OVERDO IT GUYS. Variables, Mixins & Functions
8. SASS IS A TOOL, USE IT. Naming, prioritizing & cleaning up.
9. BE CLEVER, NAME IT FOR WHAT IT IS Folder structure scss style.scss /core _reset.scss _grid.scss /helpers _mixins.scss _extends.scss _variables.scss /pages _profile.scss /sections _header.scss _footer.scss _sidenav.scss
10. GULP, IT’S NOT PUKE If you don’t know it, you’re a pussy.
11. GULP - og kom igang med det, som det egentlig handler om.
12. SOUNDS GREAT, BUT HTF* DOES IT WORK Automated, Stream, Elegant API * how the fuck
13. THE BASICS var gulp = require('gulp'), gutil = require('gulp-util'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), ! gulp.task('js', function() { gulp.src(['./src/js/vendor/**/*.js', './src/js/**/*.js']) .pipe(uglify()) .pipe(concat('app.min.js')) .on('error', gutil.log) .pipe(gulp.dest('./public/assets/js')); });
14. SHITLOADS OF PLUGINS Concat, autoprefixr, cmq, uglify, minifycss, jshint
15. VERSION CONTROL & DEPLOYMENT Keep that shit synced
16. LARAVEL ENVOY
17. SIMPLE TASK @task('deploy', ['on' => 'web']) cd /var/www/me.devdk.org/ git pull origin master composer update php artisan migrate --seed --force @endtask
18. THANKS FOR YOUR TIME Let’s have a beer, and make this community the best.
19. thesassway.com gulpjs.com youtu.be/mw_xWTkMJEM laravel.com/docs/ssh#envoy-task-runner LINKS gifs by madebyradio.com/