96
DAJ SIĘ WYRĘCZYĆ Tomasz Dziuda JoomlaDay Warszawa 2014

Daj się wyręczyć - Joomla Day Polska 2014

Embed Size (px)

DESCRIPTION

Prezentacja na temat optymalizacji pracy, nie tylko na poziomie tworzenia kodu.

Citation preview

Page 1: Daj się wyręczyć - Joomla Day Polska 2014

DAJ SIĘ WYRĘCZYĆTomasz Dziuda

!JoomlaDay Warszawa 2014

Page 2: Daj się wyręczyć - Joomla Day Polska 2014

LUB PO PROSTU...

Page 3: Daj się wyręczyć - Joomla Day Polska 2014

NIE DAJ SIĘ WYKOŃCZYĆ :-)

Page 4: Daj się wyręczyć - Joomla Day Polska 2014

–Typowy Klient po odkryciu gotowców w projekcie

“Dlaczego chce Pan za to zlecenie XXXX złotych skoro korzysta Pan z gotowego szablonu?”

Page 5: Daj się wyręczyć - Joomla Day Polska 2014

NIE O TYM JEST TA PREZENTACJA ;-)

Page 6: Daj się wyręczyć - Joomla Day Polska 2014

Źródło: (https://twitter.com/iamdevloper/status/458263644628078592)

Page 7: Daj się wyręczyć - Joomla Day Polska 2014

ZŁOŻONOŚĆ PROJEKTÓW WWW ROŚNIE

Page 8: Daj się wyręczyć - Joomla Day Polska 2014

A CZAS TRWANIA DOBY SIĘ NIE ZMIENIA

Page 9: Daj się wyręczyć - Joomla Day Polska 2014

AUTOMATYZACJA?

Page 10: Daj się wyręczyć - Joomla Day Polska 2014

AUTOMATYZACJA?

Page 11: Daj się wyręczyć - Joomla Day Polska 2014

AUTOMATYZACJA?

Page 12: Daj się wyręczyć - Joomla Day Polska 2014

AUTOMATYZACJA?

Page 13: Daj się wyręczyć - Joomla Day Polska 2014

CO WARTO ZAUTOMATYZOWAĆ?

Page 14: Daj się wyręczyć - Joomla Day Polska 2014

• Powtarzalne czynności

Page 15: Daj się wyręczyć - Joomla Day Polska 2014

• Powtarzalne czynności

• Zadania w których łatwo można zaprogramować kolejne etapy

Page 16: Daj się wyręczyć - Joomla Day Polska 2014

• Powtarzalne czynności

• Zadania w których łatwo można zaprogramować kolejne etapy

• Warto zwracać uwagę na złożoność oraz zasobożerność rozwiązania automatycznego

Page 17: Daj się wyręczyć - Joomla Day Polska 2014

JAK ŻYĆ AUTOMATYZOWAĆ?

Page 18: Daj się wyręczyć - Joomla Day Polska 2014

WYGODNY EDYTOR

Page 19: Daj się wyręczyć - Joomla Day Polska 2014

SUBLIME TEXT

Page 20: Daj się wyręczyć - Joomla Day Polska 2014

EMMET

ul>li*3>a

<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=“"></a></li> </ul>

-webkit-box-sizing: ; -moz-box-sizing: ; box-sizing: ;

-box-sizing: ;

Page 21: Daj się wyręczyć - Joomla Day Polska 2014

AUTOPREFIXER

Page 22: Daj się wyręczyć - Joomla Day Polska 2014

LINTER

Page 23: Daj się wyręczyć - Joomla Day Polska 2014

EMMET LIVESTYLE

Page 24: Daj się wyręczyć - Joomla Day Polska 2014

GUTTER COLOR

Page 25: Daj się wyręczyć - Joomla Day Polska 2014

DOCBLOCKR

Page 26: Daj się wyręczyć - Joomla Day Polska 2014

LESS PARSER

[brak screena]

On po prostu działa ;-)

Page 27: Daj się wyręczyć - Joomla Day Polska 2014

PRZYDATNE WTYCZKI

Emmet (http://emmet.io/)

!Emmet Live Style

(http://livestyle.emmet.io/)

!AutoPrefixer

(https://github.com/sindresorhus/sublime-autoprefixer)

Linter (https://github.com/SublimeLinter/SublimeLinter)

!LESS Parser

(https://github.com/timdouglas/sublime-less2css)

!Gutter Color

(https://sublime.wbond.net/packages/Gutter%20Color)

!DocBlockr

(https://github.com/spadgos/sublime-jsdocs)

Page 28: Daj się wyręczyć - Joomla Day Polska 2014

ALTERNATYWY

Codekit (https://incident57.com/codekit/)

!Grunt.js

(http://gruntjs.com/)

!Atom

(https://atom.io/)

!Wypasione IDE ;-)

Page 29: Daj się wyręczyć - Joomla Day Polska 2014

SPÓJNA STYLISTYKA KODU

Page 30: Daj się wyręczyć - Joomla Day Polska 2014

.EDITORCONFIG

Page 31: Daj się wyręczyć - Joomla Day Polska 2014

# określamy katalog bazowyroot = true!!!!!!!!!

Page 32: Daj się wyręczyć - Joomla Day Polska 2014

# określamy katalog bazowyroot = true!# konfiguracja dla wszystkich plików[*]end_of_line = lfinsert_final_newline = true!!!!

Page 33: Daj się wyręczyć - Joomla Day Polska 2014

# określamy katalog bazowyroot = true!# konfiguracja dla wszystkich plików[*]end_of_line = lfinsert_final_newline = true!# konfiguracja dla plików *.js[*.js]indent_style = spaceindent_size = 4

Page 34: Daj się wyręczyć - Joomla Day Polska 2014

SCAFFOLDING

Page 35: Daj się wyręczyć - Joomla Day Polska 2014
Page 36: Daj się wyręczyć - Joomla Day Polska 2014

GENEROWANIE KOMPONENTU

npm install -g generator-joomla-component !yo joomla-component

Page 37: Daj się wyręczyć - Joomla Day Polska 2014

GENEROWANIE KOMPONENTU

Page 38: Daj się wyręczyć - Joomla Day Polska 2014

GENEROWANIE KOMPONENTU

Page 39: Daj się wyręczyć - Joomla Day Polska 2014

GENEROWANIE KOMPONENTU

Page 40: Daj się wyręczyć - Joomla Day Polska 2014

SUBGENERATORY

yo joomla-component:model “test_model”

Page 41: Daj się wyręczyć - Joomla Day Polska 2014

ALTERNATYWY

Brunch (http://brunch.io/)

!!

Loom (https://github.com/rpflorence/loom)

Page 42: Daj się wyręczyć - Joomla Day Polska 2014

UNIKANIE NUDNYCH ZADAŃ

Page 43: Daj się wyręczyć - Joomla Day Polska 2014
Page 44: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?

Page 45: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?• Tworzymy package.json

Page 46: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?• Tworzymy package.json

• Tworzymy Gruntfile.js

Page 47: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?• Tworzymy package.json

• Tworzymy Gruntfile.js

• Wchodzimy do katalogu z projektem

Page 48: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?• Tworzymy package.json

• Tworzymy Gruntfile.js

• Wchodzimy do katalogu z projektem

• Aktualizujemy wszystkie zależności z package.json poprzez npm install

Page 49: Daj się wyręczyć - Joomla Day Polska 2014

JAK TO DZIAŁA?• Tworzymy package.json

• Tworzymy Gruntfile.js

• Wchodzimy do katalogu z projektem

• Aktualizujemy wszystkie zależności z package.json poprzez npm install

• Uruchamiamy zadania komendą grunt lub grunt <nazwa_zadania>

Page 50: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { ! ! ! ! ! !!!};

Page 51: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { grunt.initConfig({ !!!!! !!!!! }); !!!};

Page 52: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ! ! }); !! };

Page 53: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); !!!};

Page 54: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks(‘grunt-contrib-uglify'); !};

Page 55: Daj się wyręczyć - Joomla Day Polska 2014

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); };

Page 56: Daj się wyręczyć - Joomla Day Polska 2014

PRZYDATNE PLUGINY• grunt-csscss

• grunt-jsbeautifier

• grunt-cssbeautifier

• grunt-contrib-jshint

• grunt-contrib-less

• grunt-contrib-watch

• Więcej na: http://gruntjs.com/plugins

Page 57: Daj się wyręczyć - Joomla Day Polska 2014

ALTERNATYWY

Gulp.js !

(http://gulpjs.com/)

Page 58: Daj się wyręczyć - Joomla Day Polska 2014

AUTOMATYCZNE WYKLIKIWANIE

Page 59: Daj się wyręczyć - Joomla Day Polska 2014

CASPER.JS

Page 60: Daj się wyręczyć - Joomla Day Polska 2014

var casper = require('casper').create({ !!!!!!!!!!!!});

Page 61: Daj się wyręczyć - Joomla Day Polska 2014

var casper = require('casper').create({ verbose: true, logLevel: “debug", !!!!!!!!!});

Page 62: Daj się wyręczyć - Joomla Day Polska 2014

var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, !!!!});

Page 63: Daj się wyręczyć - Joomla Day Polska 2014

var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, viewportSize: { 'width': 1280, 'height': 1024 } });

Page 64: Daj się wyręczyć - Joomla Day Polska 2014
Page 65: Daj się wyręczyć - Joomla Day Polska 2014

casper.start(); !!!!!!

Page 66: Daj się wyręczyć - Joomla Day Polska 2014

casper.start(); !casper.setHttpAuth('admin', ‘demo'); !!!!

Page 67: Daj się wyręczyć - Joomla Day Polska 2014

casper.start(); !casper.setHttpAuth('admin', ‘demo'); !casper.thenOpen('http://domain.com/administrator/index.php', function() { this.echo('Logged to HTACCESS', 'INFO'); });

Page 68: Daj się wyręczyć - Joomla Day Polska 2014

casper.then(function() { !! }); !

Page 69: Daj się wyręczyć - Joomla Day Polska 2014

casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); !!}); !

Page 70: Daj się wyręczyć - Joomla Day Polska 2014

casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); !

Page 71: Daj się wyręczyć - Joomla Day Polska 2014

casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); !casper.run();

Page 72: Daj się wyręczyć - Joomla Day Polska 2014

ALTERNATYWY

Phantom.js (http://phantomjs.org/)

!Slimer.js

(http://slimerjs.org/)

!Nightwatch.js

(http://nightwatchjs.org/)

Page 73: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW

Page 74: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW• Generujemy strukturę z użyciem Yeomana

Page 75: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW• Generujemy strukturę z użyciem Yeomana

• Dostosowujemy plik .editorconfig

Page 76: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW• Generujemy strukturę z użyciem Yeomana

• Dostosowujemy plik .editorconfig

• Kod CSS tworzymy w LESS/SASS

Page 77: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW• Generujemy strukturę z użyciem Yeomana

• Dostosowujemy plik .editorconfig

• Kod CSS tworzymy w LESS/SASS

• W trakcie prac automatycznie optymalizujemy i testujemy kod z użyciem Grunta

Page 78: Daj się wyręczyć - Joomla Day Polska 2014

WORKFLOW• Generujemy strukturę z użyciem Yeomana

• Dostosowujemy plik .editorconfig

• Kod CSS tworzymy w LESS/SASS

• W trakcie prac automatycznie optymalizujemy i testujemy kod z użyciem Grunta

• Przy tworzeniu kodu wspieramy się Emmetem, EmmetLive, GutterColor

Page 79: Daj się wyręczyć - Joomla Day Polska 2014

GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?

Page 80: Daj się wyręczyć - Joomla Day Polska 2014

GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?

• Testy jednostkowe kodu w PHP i JS

Page 81: Daj się wyręczyć - Joomla Day Polska 2014

GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?

• Testy jednostkowe kodu w PHP i JS

• Własne rozwiązania testujące kod (np. z użyciem CasperJS, PhantomJS, SlimerJS)

Page 82: Daj się wyręczyć - Joomla Day Polska 2014

GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?

• Testy jednostkowe kodu w PHP i JS

• Własne rozwiązania testujące kod (np. z użyciem CasperJS, PhantomJS, SlimerJS)

• Automatyczne generowanie dokumentacji z kodu

Page 83: Daj się wyręczyć - Joomla Day Polska 2014

A POZA KODEM?

Page 84: Daj się wyręczyć - Joomla Day Polska 2014

MARKDOWN

Page 85: Daj się wyręczyć - Joomla Day Polska 2014

MARKDOWN

# Nagłówek![Link](http://domain.com)!* Element I* Element II* Element III

Page 86: Daj się wyręczyć - Joomla Day Polska 2014

MARKDOWN

# Nagłówek![Link](http://domain.com)!* Element I* Element II* Element III

Page 87: Daj się wyręczyć - Joomla Day Polska 2014

MARKDOWN

# Nagłówek![Link](http://domain.com)!* Element I* Element II* Element III

<h1>Nagłówek</h1>!<a href=“http://domain.com”>Link</a>!<ul><li>Element</li><li>Element II</li><li>Element III</li></ul>

Page 88: Daj się wyręczyć - Joomla Day Polska 2014

BOOKMARKLETY

Page 89: Daj się wyręczyć - Joomla Day Polska 2014

VIEWPORT RESIZER

http://lab.maltewassermann.com/viewport-resizer/

Page 90: Daj się wyręczyć - Joomla Day Polska 2014

DOM MONSTER

http://mir.aculo.us/dom-monster/

Page 91: Daj się wyręczyć - Joomla Day Polska 2014

SUBTLE PATTERNS BOOKMARKLET

http://bradjasper.com/subtle-patterns-bookmarklet/

Page 92: Daj się wyręczyć - Joomla Day Polska 2014

PRZYDATNE APLIKACJE

Page 93: Daj się wyręczyć - Joomla Day Polska 2014

CIEKAWE APLIKACJE

Automator

Page 94: Daj się wyręczyć - Joomla Day Polska 2014

CIEKAWE APLIKACJE

Automator Alfred

Page 95: Daj się wyręczyć - Joomla Day Polska 2014

CIEKAWE APLIKACJE

TextExpander

Automator Alfred

Page 96: Daj się wyręczyć - Joomla Day Polska 2014

KONTAKT

Lead Developer @ www.gavick.com !@dziudek !http://dziudek.pl