Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DAJ SIĘ WYRĘCZYĆ 
Tomasz Dziuda 
! 
JoomlaDay Warszawa 2014
LUB PO PROSTU...
NIE DAJ SIĘ WYKOŃCZYĆ :-)
“Dlaczego chce Pan za to zlecenie XXXX złotych 
skoro korzysta Pan z gotowego szablonu?” 
–Typowy Klient po odkryciu gotow...
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ść ...
JAK ŻYĆ AUTOMATYZOWAĆ?
WYGODNY EDYTOR
SUBLIME TEXT
EMMET 
ul>li*3>a 
-webkit-box-sizing: ; 
-moz-box-sizing: ; 
box-sizing: ; 
<ul> 
<li><a href=""></a></li> 
<li><a href=""...
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:/...
ALTERNATYWY 
Codekit 
(https://incident57.com/codekit/) 
! 
Grunt.js 
(http://gruntjs.com/) 
! 
Atom 
(https://atom.io/) 
...
SPÓJNA STYLISTYKA KODU
.EDITORCONFIG
# określamy katalog bazowy 
root = true 
! 
! 
! 
! 
! 
! 
! 
! 
!
# określamy katalog bazowy 
root = true 
! 
# konfiguracja dla wszystkich plików 
[*] 
end_of_line = lf 
insert_final_newl...
# określamy katalog bazowy 
root = true 
! 
# konfiguracja dla wszystkich plików 
[*] 
end_of_line = lf 
insert_final_newl...
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 wsz...
JAK TO DZIAŁA? 
• Tworzymy package.json 
• Tworzymy Gruntfile.js 
• Wchodzimy do katalogu z projektem 
• Aktualizujemy wsz...
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: { 
...
module.exports = function(grunt) { 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
uglify: { 
options: { 
...
module.exports = function(grunt) { 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
uglify: { 
options: { 
...
PRZYDATNE PLUGINY 
• grunt-csscss 
• grunt-jsbeautifier 
• grunt-cssbeautifier 
• grunt-contrib-jshint 
• grunt-contrib-le...
ALTERNATYWY 
Gulp.js 
! 
(http://gulpjs.com/)
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('FA...
var casper = require('casper').create({ 
verbose: true, 
logLevel: “debug", 
onError: function(self, m) { 
console.log('FA...
casper.start(); 
! 
! 
! 
! 
! 
!
casper.start(); 
! 
casper.setHttpAuth('admin', ‘demo'); 
! 
! 
! 
!
casper.start(); 
! 
casper.setHttpAuth('admin', ‘demo'); 
! 
casper.thenOpen('http://domain.com/administrator/index.php', ...
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.captureSe...
casper.then(function() { 
this.fill('#form-login', { 
'username': 'admin', 
'passwd': 'demo' 
}, true); 
! 
this.captureSe...
ALTERNATYWY 
Phantom.js 
(http://phantomjs.org/) 
! 
Slimer.js 
(http://slimerjs.org/) 
! 
Nightwatch.js 
(http://nightwat...
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 
• ...
WORKFLOW 
• Generujemy strukturę z użyciem Yeomana 
• Dostosowujemy plik .editorconfig 
• Kod CSS tworzymy w LESS/SASS 
• ...
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ż...
GDZIE JESZCZE MOŻNA 
ZAOSZCZĘDZIĆ CZAS? 
• Testy jednostkowe kodu w PHP i JS 
• Własne rozwiązania testujące kod (np. z uż...
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 ...
BOOKMARKLETY
VIEWPORT RESIZER 
http://lab.maltewassermann.com/viewport-resizer/
DOM MONSTER 
http://mir.aculo.us/dom-monster/
SUBTLE PATTERNS 
BOOKMARKLET 
http://bradjasper.com/subtle-patterns-bookmarklet/
PRZYDATNE APLIKACJE
CIEKAWE APLIKACJE 
Automator
CIEKAWE APLIKACJE 
Automator Alfred
CIEKAWE APLIKACJE 
Automator Alfred 
TextExpander
KONTAKT 
Lead Developer @ www.gavick.com 
! 
@dziudek 
! 
http://dziudek.pl
Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014
Upcoming SlideShare
Loading in …5
×

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

842 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. DAJ SIĘ WYRĘCZYĆ Tomasz Dziuda ! JoomlaDay Warszawa 2014
  2. 2. LUB PO PROSTU...
  3. 3. NIE DAJ SIĘ WYKOŃCZYĆ :-)
  4. 4. “Dlaczego chce Pan za to zlecenie XXXX złotych skoro korzysta Pan z gotowego szablonu?” –Typowy Klient po odkryciu gotowców w projekcie
  5. 5. NIE O TYM JEST TA PREZENTACJA ;-)
  6. 6. Źródło: (https://twitter.com/iamdevloper/status/458263644628078592)
  7. 7. ZŁOŻONOŚĆ PROJEKTÓW WWW ROŚNIE
  8. 8. A CZAS TRWANIA DOBY SIĘ NIE ZMIENIA
  9. 9. AUTOMATYZACJA?
  10. 10. AUTOMATYZACJA?
  11. 11. AUTOMATYZACJA?
  12. 12. AUTOMATYZACJA?
  13. 13. CO WARTO ZAUTOMATYZOWAĆ?
  14. 14. • Powtarzalne czynności
  15. 15. • Powtarzalne czynności • Zadania w których łatwo można zaprogramować kolejne etapy
  16. 16. • 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
  17. 17. JAK ŻYĆ AUTOMATYZOWAĆ?
  18. 18. WYGODNY EDYTOR
  19. 19. SUBLIME TEXT
  20. 20. EMMET ul>li*3>a -webkit-box-sizing: ; -moz-box-sizing: ; box-sizing: ; <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=“"></a></li> </ul> -box-sizing: ;
  21. 21. AUTOPREFIXER
  22. 22. LINTER
  23. 23. EMMET LIVESTYLE
  24. 24. GUTTER COLOR
  25. 25. DOCBLOCKR
  26. 26. LESS PARSER [brak screena] On po prostu działa ;-)
  27. 27. 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)
  28. 28. ALTERNATYWY Codekit (https://incident57.com/codekit/) ! Grunt.js (http://gruntjs.com/) ! Atom (https://atom.io/) ! Wypasione IDE ;-)
  29. 29. SPÓJNA STYLISTYKA KODU
  30. 30. .EDITORCONFIG
  31. 31. # określamy katalog bazowy root = true ! ! ! ! ! ! ! ! !
  32. 32. # określamy katalog bazowy root = true ! # konfiguracja dla wszystkich plików [*] end_of_line = lf insert_final_newline = true ! ! ! !
  33. 33. # określamy katalog bazowy root = true ! # konfiguracja dla wszystkich plików [*] end_of_line = lf insert_final_newline = true ! # konfiguracja dla plików *.js [*.js] indent_style = space indent_size = 4
  34. 34. SCAFFOLDING
  35. 35. GENEROWANIE KOMPONENTU npm install -g generator-joomla-component ! yo joomla-component
  36. 36. GENEROWANIE KOMPONENTU
  37. 37. GENEROWANIE KOMPONENTU
  38. 38. GENEROWANIE KOMPONENTU
  39. 39. SUBGENERATORY yo joomla-component:model “test_model”
  40. 40. ALTERNATYWY Brunch (http://brunch.io/) ! ! Loom (https://github.com/rpflorence/loom)
  41. 41. UNIKANIE NUDNYCH ZADAŃ
  42. 42. JAK TO DZIAŁA?
  43. 43. JAK TO DZIAŁA? • Tworzymy package.json
  44. 44. JAK TO DZIAŁA? • Tworzymy package.json • Tworzymy Gruntfile.js
  45. 45. JAK TO DZIAŁA? • Tworzymy package.json • Tworzymy Gruntfile.js • Wchodzimy do katalogu z projektem
  46. 46. 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
  47. 47. 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>
  48. 48. module.exports = function(grunt) { ! ! ! ! ! ! ! ! };
  49. 49. module.exports = function(grunt) { grunt.initConfig({ ! ! ! ! ! ! ! ! ! ! }); ! ! ! };
  50. 50. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ! ! }); ! ! };
  51. 51. 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' } } }); ! ! ! };
  52. 52. 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'); ! };
  53. 53. 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']); };
  54. 54. PRZYDATNE PLUGINY • grunt-csscss • grunt-jsbeautifier • grunt-cssbeautifier • grunt-contrib-jshint • grunt-contrib-less • grunt-contrib-watch • Więcej na: http://gruntjs.com/plugins
  55. 55. ALTERNATYWY Gulp.js ! (http://gulpjs.com/)
  56. 56. AUTOMATYCZNE WYKLIKIWANIE
  57. 57. CASPER.JS
  58. 58. var casper = require('casper').create({ ! ! ! ! ! ! ! ! ! ! ! ! });
  59. 59. var casper = require('casper').create({ verbose: true, logLevel: “debug", ! ! ! ! ! ! ! ! ! });
  60. 60. var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, ! ! ! ! });
  61. 61. var casper = require('casper').create({ verbose: true, logLevel: “debug", onError: function(self, m) { console.log('FATAL:' + m); self.exit(); }, viewportSize: { 'width': 1280, 'height': 1024 } });
  62. 62. casper.start(); ! ! ! ! ! !
  63. 63. casper.start(); ! casper.setHttpAuth('admin', ‘demo'); ! ! ! !
  64. 64. casper.start(); ! casper.setHttpAuth('admin', ‘demo'); ! casper.thenOpen('http://domain.com/administrator/index.php', function() { this.echo('Logged to HTACCESS', 'INFO'); });
  65. 65. casper.then(function() { ! ! }); !
  66. 66. casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! ! }); !
  67. 67. casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); !
  68. 68. casper.then(function() { this.fill('#form-login', { 'username': 'admin', 'passwd': 'demo' }, true); ! this.captureSelector(‘admin.png', '#main'); }); ! casper.run();
  69. 69. ALTERNATYWY Phantom.js (http://phantomjs.org/) ! Slimer.js (http://slimerjs.org/) ! Nightwatch.js (http://nightwatchjs.org/)
  70. 70. WORKFLOW
  71. 71. WORKFLOW • Generujemy strukturę z użyciem Yeomana
  72. 72. WORKFLOW • Generujemy strukturę z użyciem Yeomana • Dostosowujemy plik .editorconfig
  73. 73. WORKFLOW • Generujemy strukturę z użyciem Yeomana • Dostosowujemy plik .editorconfig • Kod CSS tworzymy w LESS/SASS
  74. 74. 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
  75. 75. 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
  76. 76. GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS?
  77. 77. GDZIE JESZCZE MOŻNA ZAOSZCZĘDZIĆ CZAS? • Testy jednostkowe kodu w PHP i JS
  78. 78. 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)
  79. 79. 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
  80. 80. A POZA KODEM?
  81. 81. MARKDOWN
  82. 82. MARKDOWN # Nagłówek ! [Link](http://domain.com) ! * Element I * Element II * Element III
  83. 83. MARKDOWN # Nagłówek ! [Link](http://domain.com) ! * Element I * Element II * Element III
  84. 84. 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>
  85. 85. BOOKMARKLETY
  86. 86. VIEWPORT RESIZER http://lab.maltewassermann.com/viewport-resizer/
  87. 87. DOM MONSTER http://mir.aculo.us/dom-monster/
  88. 88. SUBTLE PATTERNS BOOKMARKLET http://bradjasper.com/subtle-patterns-bookmarklet/
  89. 89. PRZYDATNE APLIKACJE
  90. 90. CIEKAWE APLIKACJE Automator
  91. 91. CIEKAWE APLIKACJE Automator Alfred
  92. 92. CIEKAWE APLIKACJE Automator Alfred TextExpander
  93. 93. KONTAKT Lead Developer @ www.gavick.com ! @dziudek ! http://dziudek.pl

×