Daj się wyręczyć - Joomla Day Polska 2014
-
Upload
tomasz-dziuda -
Category
Technology
-
view
419 -
download
4
description
Transcript of Daj się wyręczyć - Joomla Day Polska 2014
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