Basic Speed-Tweaking on: - Template Level - Server Settings - organize your work-flow The major point here is the work-flow. How to get more done in less (not the css-preprocessor) time. Personally I make heavy usage of SASS. I will briefly introduce some of my favorite tools like Codekit, Alfred, PhpStorm (Windows users can use FireApp instead of CodeKit). Session is also recorded for youtube: https://www.youtube.com/watch?v=S8lncY3b9lA

1. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
HOW TO SPEED UP
JOOMLA!
development & website

2. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
WHAT TO EXPECT
• parts of my personal work flow
• chaos (most will be live) … not anymore to save your sanity
• my workflow is not perfect

3. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
© Will of Azathoth by Scott Purdy

4. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
WHAT SHALL WE DO?
• Build a joomla website
• install the usual subjects (JCE, Akeeba Backup …)
• make the website load faster

5. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
SORRY WINDOWS USERS

6. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
WORKFLOW
Alfred app + power tools

7. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
• can setup own automatizations
start / stop all development apps

8. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

9. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
SETTING UP A WORKFLOW

10. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
SCRIPTS ARE POSSIBLE

11. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
tell application "Firefox" to quit

12. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
• cool workflows to import from website
• open folder in Sublime Text 2
• font-awesome 4

13. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

14. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
Cool Help Sublime Text & Font Awesome

15. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

16. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
I AM OUT …

17. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
SUBLIME TEXT 2
zen coding / emmet (ctrl + E, ctrl + alt + Enter)

18. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
EMMET & ZEN CODIN
• HTML
• CSS
• You have to be able to think in HTML
• think first …
• then code

19. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

20. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
EVERY DAY EXAMPLE
plain text to HTML

21. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

22. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
MAMP PRO 3
Win XAMPP … :-/

23. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

24. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
PHP SETTINGS
MAMP Pro

25. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

26. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
PREPARATION
• Use Joomla 3 installation
• installed joostrap 3 (www.jostrap.com)
• change LESS to bootstrap SASS
• use PHPStorm for editing the files

27. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
TEMPLATE FOLDER

28. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
ASSESTS = SASS FOLDER
later we will replace „normal“ stylesheets - sorry Phil

29. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
PHPSTORM
also available on Win ;-)

30. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
ADVANTAGES OF
PHPSTORM
• free for open source projects
• fast (setup and „working-speed“)
• php code suggestions and help
• configure everything / many plug ins
• can use external libraries
Joomla! Framework / Joomla! Libraries

31. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
TEMPLATE
set Joomla! as external library

32. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

33. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
NOW YOUR LIFE IS EASIER
use php and Joomla! Framework / classes

34. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

35. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
CODEKIT
SASS Integration + Browser refresh

36. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
WATCHED FOLDER
just the template folder

37. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
FOR A SHORT
INTERRUPTION
that´s the chaotic part

38. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
SASS
• fusion of stylesheets and programming (functions,
variables)
• functionality is tested and improves
• make changes faster get faster websites!
• worth the learning curve!

39. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
TAKE WHAT YOU NEED
comment out what you do not need > reduce file size

40. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
VARIABLES IN CSS
phpStorm shows you the colors :-)

41. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

42. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
LOAD THE NEW CSS
• load the new css to our template

43. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
JUST LOAD ONE CSS FILE

44. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

45. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
MERGE JS
• set all the files to merge
• set output path (2014-03-18_myJS.js)
// @codekit-prepend "js/jquery-1.10.2.js"
// @codekit-prepend "js/bootstrap.js"
// @codekit-prepend "js/scrolltop.js"

46. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
WE ARE NEARLY THERE
putting it all together …

47. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
BROWSER REFRESH
the cool part starts …

48. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
PREVIEW
opens own codekit webserver that does the reloading

49. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
MAMP PRO
http://workflow.local:8888/

50. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
CODEKIT
http://franks-macbook-pro.local:5757/

51. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
BY THE WAY
don´t lose your </head>
big thanks to @SniperSister (David Jardin)

52. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso

53. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
„Well, it's nothing very special. Try to be nice to
people, avoid eating fat, read a good book
every now and then, get some walking in, and
try and live together in peace and harmony with
people of all creeds and nations.“
Monthy Python - The Meaning of Life
THANK YOU

54. (my ) workflow
Frank Delventhal - www.deweso.de - @deweso
TOOLS I USED• jkickstart.com http://www.jkickstart.com
• alfred app + powerpack
http://www.alfredapp.com/
• phpStorm http://www.jetbrains.com/phpstorm/
• Sublime Text 2 http://www.sublimetext.com/
• MAMP Pro 3 http://www.mamp.info/
• codekit https://incident57.com/codekit/