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

1. DAJ SIĘ WYRĘCZYĆ
Tomasz Dziuda
!
JoomlaDay Warszawa 2014

2. LUB PO PROSTU...

3. NIE DAJ SIĘ WYKOŃCZYĆ :-)

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. NIE O TYM JEST TA
PREZENTACJA ;-)

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

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

8. A CZAS TRWANIA DOBY SIĘ NIE ZMIENIA

9. AUTOMATYZACJA?

10. AUTOMATYZACJA?

11. AUTOMATYZACJA?

12. AUTOMATYZACJA?

13. CO WARTO
ZAUTOMATYZOWAĆ?

14. • Powtarzalne czynności

15. • Powtarzalne czynności
• Zadania w których łatwo można zaprogramować
kolejne etapy

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. JAK ŻYĆ AUTOMATYZOWAĆ?

18. WYGODNY EDYTOR

19. SUBLIME TEXT

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. AUTOPREFIXER

22. LINTER

23. EMMET LIVESTYLE

24. GUTTER COLOR

25. DOCBLOCKR

26. LESS PARSER
[brak screena]
On po prostu działa ;-)

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. ALTERNATYWY
Codekit
(https://incident57.com/codekit/)
!
Grunt.js
(http://gruntjs.com/)
!
Atom
(https://atom.io/)
!
Wypasione IDE ;-)

29. SPÓJNA STYLISTYKA KODU

30. .EDITORCONFIG

31. # określamy katalog bazowy
root = true
!
!
!
!
!
!
!
!
!

32. # określamy katalog bazowy
root = true
!
# konfiguracja dla wszystkich plików
[*]
end_of_line = lf
insert_final_newline = true
!
!
!
!

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. SCAFFOLDING

36. GENEROWANIE KOMPONENTU
npm install -g generator-joomla-component
!
yo joomla-component

37. GENEROWANIE KOMPONENTU

38. GENEROWANIE KOMPONENTU

39. GENEROWANIE KOMPONENTU

40. SUBGENERATORY
yo joomla-component:model “test_model”

41. ALTERNATYWY
Brunch
(http://brunch.io/)
!
!
Loom
(https://github.com/rpflorence/loom)

42. UNIKANIE NUDNYCH ZADAŃ

44. JAK TO DZIAŁA?

45. JAK TO DZIAŁA?
• Tworzymy package.json

46. JAK TO DZIAŁA?
• Tworzymy package.json
• Tworzymy Gruntfile.js

47. JAK TO DZIAŁA?
• Tworzymy package.json
• Tworzymy Gruntfile.js
• Wchodzimy do katalogu z projektem

48. 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

49. 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>

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

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

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

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'
}
}
});
!
!
!
};

54. 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');
!
};

55. 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']);
};

56. PRZYDATNE PLUGINY
• grunt-csscss
• grunt-jsbeautifier
• grunt-cssbeautifier
• grunt-contrib-jshint
• grunt-contrib-less
• grunt-contrib-watch
• Więcej na: http://gruntjs.com/plugins

57. ALTERNATYWY
Gulp.js
!
(http://gulpjs.com/)

58. AUTOMATYCZNE
WYKLIKIWANIE

59. CASPER.JS

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

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

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

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

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

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

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

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

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

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

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

72. ALTERNATYWY
Phantom.js
(http://phantomjs.org/)
!
Slimer.js
(http://slimerjs.org/)
!
Nightwatch.js
(http://nightwatchjs.org/)

73. WORKFLOW

74. WORKFLOW
• Generujemy strukturę z użyciem Yeomana

75. WORKFLOW
• Generujemy strukturę z użyciem Yeomana
• Dostosowujemy plik .editorconfig

76. WORKFLOW
• Generujemy strukturę z użyciem Yeomana
• Dostosowujemy plik .editorconfig
• Kod CSS tworzymy w LESS/SASS

77. 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

78. 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

79. GDZIE JESZCZE MOŻNA
ZAOSZCZĘDZIĆ CZAS?

80. GDZIE JESZCZE MOŻNA
ZAOSZCZĘDZIĆ CZAS?
• Testy jednostkowe kodu w PHP i JS

81. 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)

82. 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

83. A POZA KODEM?

84. MARKDOWN

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

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

87. 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>

88. BOOKMARKLETY

89. VIEWPORT RESIZER
http://lab.maltewassermann.com/viewport-resizer/

90. DOM MONSTER
http://mir.aculo.us/dom-monster/

91. SUBTLE PATTERNS
BOOKMARKLET
http://bradjasper.com/subtle-patterns-bookmarklet/

92. PRZYDATNE APLIKACJE

93. CIEKAWE APLIKACJE
Automator

94. CIEKAWE APLIKACJE
Automator Alfred

95. CIEKAWE APLIKACJE
Automator Alfred
TextExpander

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