Upload
tomasz-dziuda
View
419
Download
4
Embed Size (px)
DESCRIPTION
Prezentacja na temat optymalizacji pracy, nie tylko na poziomie tworzenia kodu.
Citation preview
DAJ SIĘ WYRĘCZYĆTomasz Dziuda
!JoomlaDay Warszawa 2014
LUB PO PROSTU...
NIE DAJ SIĘ WYKOŃCZYĆ :-)
–Typowy Klient po odkryciu gotowców w projekcie
“Dlaczego chce Pan za to zlecenie XXXX złotych skoro korzysta Pan z gotowego szablonu?”
NIE O TYM JEST TA PREZENTACJA ;-)
Źródło: (https://twitter.com/iamdevloper/status/458263644628078592)
ZŁOŻONOŚĆ PROJEKTÓW WWW ROŚNIE
A CZAS TRWANIA DOBY SIĘ NIE ZMIENIA
AUTOMATYZACJA?
AUTOMATYZACJA?
AUTOMATYZACJA?
AUTOMATYZACJA?
CO WARTO ZAUTOMATYZOWAĆ?
• Powtarzalne czynności
• Powtarzalne czynności
• Zadania w których łatwo można zaprogramować kolejne etapy
• 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
JAK ŻYĆ AUTOMATYZOWAĆ?
WYGODNY EDYTOR
SUBLIME TEXT
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: ;
AUTOPREFIXER
LINTER
EMMET LIVESTYLE
GUTTER COLOR
DOCBLOCKR
LESS PARSER
[brak screena]
On po prostu działa ;-)
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)
ALTERNATYWY
Codekit (https://incident57.com/codekit/)
!Grunt.js
(http://gruntjs.com/)
!Atom
(https://atom.io/)
!Wypasione IDE ;-)
SPÓJNA STYLISTYKA KODU
.EDITORCONFIG
# określamy katalog bazowyroot = true!!!!!!!!!
# określamy katalog bazowyroot = true!# konfiguracja dla wszystkich plików[*]end_of_line = lfinsert_final_newline = true!!!!
# 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
SCAFFOLDING
GENEROWANIE KOMPONENTU
npm install -g generator-joomla-component !yo joomla-component
GENEROWANIE KOMPONENTU
GENEROWANIE KOMPONENTU
GENEROWANIE KOMPONENTU
SUBGENERATORY
yo joomla-component:model “test_model”
ALTERNATYWY
Brunch (http://brunch.io/)
!!
Loom (https://github.com/rpflorence/loom)
UNIKANIE NUDNYCH ZADAŃ
JAK TO DZIAŁA?
JAK TO DZIAŁA?• Tworzymy package.json
JAK TO DZIAŁA?• Tworzymy package.json
• Tworzymy Gruntfile.js
JAK TO DZIAŁA?• Tworzymy package.json
• Tworzymy Gruntfile.js
• Wchodzimy do katalogu z projektem
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
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>
module.exports = function(grunt) { ! ! ! ! ! !!!};
module.exports = function(grunt) { grunt.initConfig({ !!!!! !!!!! }); !!!};
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ! ! }); !! };
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' } } }); !!!};
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'); !};
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']); };
PRZYDATNE PLUGINY• grunt-csscss
• grunt-jsbeautifier
• grunt-cssbeautifier
• grunt-contrib-jshint
• grunt-contrib-less
• grunt-contrib-watch
• Więcej na: http://gruntjs.com/plugins
AUTOMATYCZNE WYKLIKIWANIE
CASPER.JS
var casper = require('casper').create({ !!!!!!!!!!!!});
var casper = require('casper').create({ verbose: true, logLevel: “debug", !!!!!!!!!});
var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, !!!!});
var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, viewportSize: { 'width': 1280, 'height': 1024 } });
casper.start(); !!!!!!
casper.start(); !casper.setHttpAuth('admin', ‘demo'); !!!!
casper.start(); !casper.setHttpAuth('admin', ‘demo'); !casper.thenOpen('http://domain.com/administrator/index.php', function() { this.echo('Logged to HTACCESS', 'INFO'); });
casper.then(function() { !! }); !
casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); !!}); !
casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); !
casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); !casper.run();
ALTERNATYWY
Phantom.js (http://phantomjs.org/)
!Slimer.js
(http://slimerjs.org/)
!Nightwatch.js
(http://nightwatchjs.org/)
WORKFLOW
WORKFLOW• Generujemy strukturę z użyciem Yeomana
WORKFLOW• Generujemy strukturę z użyciem Yeomana
• Dostosowujemy plik .editorconfig
WORKFLOW• Generujemy strukturę z użyciem Yeomana
• Dostosowujemy plik .editorconfig
• Kod CSS tworzymy w LESS/SASS
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
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
GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?
GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?
• Testy jednostkowe kodu w PHP i JS
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)
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
A POZA KODEM?
MARKDOWN
MARKDOWN
# Nagłówek![Link](http://domain.com)!* Element I* Element II* Element III
MARKDOWN
# Nagłówek![Link](http://domain.com)!* Element I* Element II* Element III
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>
BOOKMARKLETY
VIEWPORT RESIZER
http://lab.maltewassermann.com/viewport-resizer/
SUBTLE PATTERNS BOOKMARKLET
http://bradjasper.com/subtle-patterns-bookmarklet/
PRZYDATNE APLIKACJE
CIEKAWE APLIKACJE
Automator
CIEKAWE APLIKACJE
Automator Alfred
CIEKAWE APLIKACJE
TextExpander
Automator Alfred
KONTAKT
Lead Developer @ www.gavick.com !@dziudek !http://dziudek.pl