Some Modern Tools for Developers

Transcript

2. Node.js & Ruby & Terminal https://nodejs.org/ http://rubyinstaller.org/ Terminal your BFF
3. IDE WebStorm for Front-End Development PHPStorm = Webstorm + PHP https://jetbrains.com/
4. WebStorm - PHPStorm Features • Best Code Intellisense • Built-in Terminal • REST Service Tool • GIT Support • Emmet (Zen Coding) Support • PRE-Compilers Support (SASS, Coffee) • Modern Tools Support - Gulp, Bower, etc… • ...
5. WebStorm - PHPStorm Features List of Full Features https://jetbrains.com/webstorm/features/ https://jetbrains.com/phpstorm/features/ Course: Be Awesome in PHPStorm
6. Editor Sublime Text 2/3 - https://sublimetext.com Brackets - http://brackets.io/ Atom - https://atom.io/
7. Local Server [WIN] WampServer - http://wampserver.com/ [MAC] MAMP PRO - https://mamp.info/en/
8. WampServer PHP Extensions / Apache Modules - Enable / Disable
9. WampServer h Alias Name: my-custom-app Address: http://localhost/my-custom-app Alias Name: my-custom-app-2 Address: http://localhost/my-custom-app-2 Alias Name: my-custom-app-3 Address: http://localhost/my-custom-app-3
10. WampServer Online / Offline Mode http://YOUR_INTERNAL_IP/
11. WampServer PHP Built-in Server command: php -S localhost:PORT
12. GIT https://bitbucket.org/ http://sourcetreeapp.com/
14. GIT - SourceTree App http://sourcetreeapp.com/
15. GIT - SourceTree App Registration FREE: http://sourcetreeapp. com/register/
16. GIT - Bitbucket - Smart Commits JRA-34 #time 1w 2d 4h 30m JRA-34 #comment corrected indent issue JRA-090 #resolve Fixed this today …. <KEY> <COMMAND> <value> https://confluence.atlassian.com/display/FISHEYE/Using+smart+commits https://confluence.atlassian. com/display/Cloud/Processing+JIRA+issues+with+commit+messages
17. GIT Ignore .gitignore: .idea /node_modules /vendor .sass-cache
18. Forget to add to .gitignore? git rm --cached . git add . git commit
19. Emmet (Zen Coding) http://emmet.io/ Cheat Sheet
20. SASS + Compass SASS = CSS PREProcessor Compass = SASS Framework http://sass-lang.com/ http://compass-style.org/
21. SASS + Compass
22. SASS (Requires Ruby) Install Ruby - http://rubyinstaller.org/ Install SASS - gem install sass Install Compass - gem install compass
23. SASS/Compass Features • Variables • Nesting • Partials • Mixins (Functions) • Compass Helpers • ...
24. SASS Formats / Syntax File Extensions: *.scss and *.sass scss = css + advanced css sass = clean, simple, bracketless (no {})
25. SASS Variables app.scss app.css
26. SASS Nesting
27. SASS Mixins
28. SASS Partials
29. Compass Sprites http://compass-style.org/help/tutorials/spriting/
30. Compass Demos Demo: Background Gradients Demo: CSS3 Transition Demo: Font Face Example Demo: Box-shadow ...
31. Configuration (config.rb) https://gist.github.com/nathansmith/1179395
32. Watch and Compile command: compass compile # or command: compass watch # start a new project command: compass init # clean compiled files command: compass clean
33. Resources - SASS / Compass http://sass-lang.com/ http://compass-style.org/ http://www.hongkiat.com/blog/getting-started-saas/ http://thesassway.com/intermediate/spriting-with-sass-and-compass http://teamtreehouse.com/library/compass-basics Course: http://leveluptuts.com/tutorials/sass-tutorials Course: http://leveluptuts.com/tutorials/compass-tutorials
34. CoffeeScript & TypeScript http://coffeescript.org/ npm install -g coffee-script http://typescriptlang.org/ npm install -g typescript Next Version of JS
35. CoffeeScript Classes & Inheritance
36. TypeScript Classes
37. TypeScript Inheritance
38. HTML PREProcessors http://haml.info/ http://jade-lang.com/
39. HAML
40. Jade
41. Source Maps & Workspace
42. Source Maps & Workspace • https://developer.chrome.com/devtools/docs/workspaces • http://www.sitepoint.com/using-source-maps-debug-sass-chrome/ • http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome- devtools--net-36636
43. JSBin http://jsbin.com/
44. NPM & package.json https://www.npmjs.com/
45. NPM Modules /node_modules add that folder .gitignore .idea /node_modules ...
46. Gulp.JS - Javascript Task Runner http://gulpjs.com/ npm install -g gulp
47. Gulp Features • Set-up a Node.js Server • Concatenate Files • Minify Files • Precompile Assets (CSS, JS, HTML) • Extendable (by Plugins) • ...
48. Essential Gulp Plugins gulp-sass - Compile SASS to CSS gulp-compass - Compile Compass to CSS gulp-uglify - Minify JS Files gulp-concat - Concatenate (Merge) Multiple files into one gulp-browser-sync - Synchronize browser with project ( http://browsersync.io/ ) … laravel/elixir - Laravel specific, but All-in-one gulp plugin. ... http://gulpjs.com/plugins/
49. gulpfile.js var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('scripts', function() { return gulp.src('src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('dist/js')); }); gulp.task('watch', function() { gulp.watch('src/*.js', ['scripts']); });
50. Gulp Resources • Getting Started With Gulp.js • Course: Learning Gulp • http://gulpjs.com/ • https://github.com/laravel/elixir • http://laravel.com/docs/5.0/elixir • https://laracasts.com/index/elixir
51. Bower & Package Management http://bower.io/ npm install -g bower
52. Bower - List of Packages http://bower.io/search/ command: bower search [package] bower search jquery
53. Bower - Install/Update Packages install command: bower install jquery install and save: bower install jquery --save update command: bower update jquery uninstall command: bower uninstall jquery
54. Bower.json command: bower init bower.json
55. Bower Configuration - .bowerrc /bower_components ( default ) .bowerrc { “directory” : “packages” } http://bower.io/docs/config/
56. Javascript Frameworks http://emberjs.com/ http://backbonejs.org/ https://angularjs.org/ http://knockoutjs.com/ https://facebook.github.io/react/
57. AngularJS • 2-way data binding • Filters • Directives - Custom HTML snippets • 3rd-party libraries • … Showcases: https://builtwith.angularjs.org/ Best Practices: https://github.com/mgechev/angularjs-style-guide https://github.com/johnpapa/angular-styleguide
58. AngularJS Resources • https://egghead.io/ • http://ngmodules.org/ • angular free course • https://thinkster.io/a-better-way-to-learn-angularjs/
59. AngularJS Directory Structure
60. Javascript Helpers http://underscorejs.org/
61. Underscore.js
62. lodash.js https://lodash.com/
63. Kendo UI http://www.telerik.com/kendo-ui
64. Kendo UI - Components • Grid • Chars • Editor • Upload • Window • Tree View • Auto Compete • Date Picker • Multi Select • Buttons • Tabs • Sorting • Filtering • …. http://demos.telerik.com/kendo-ui/
65. Kendo UI - Grid
66. Kendo UI Grid
67. + =
68. Kendo Grid - AngularJS
69. Kendo Grid AngularJS
70. Kendo UI - Resources http://www.pluralsight.com/courses/introduction-to-kendoui http://www.pluralsight.com/courses/kendo-ui-angularjs-from-scratch
71. HTML5 Mobile Applications https://mbookmakers.adjarabet.com/ Built with: jQuery Mobile Access: Safari/Browser App Store / Google Play - NO
72. HTML5 Mobile Applications NO jQuery Use Vanilla JS, AngularJS ... NO GIF Animations Use CSS Animations, GSAP Modular Approach Single Page Application
73. HTML5 Mobile Applications Mobile App Icon Generator Sencha Touch
74. Composer - PHP Package Management https://getcomposer.org/ Windows Installer https://packagist.org/
75. Composer - composer.json
76. Composer - Commands composer create-project laravel/laravel . composer require author/package-name composer require-dev author/package-name composer install composer update composer dump-autoload -o vendor/autoload.php
77. Laravel - PHP Framework http://laravel.com/
78. Laravel - Installation composer create-project laravel/laravel Laravel installer: laravel new app_name Artisan: php artisan serve # http://localhost:8000
79. Laravel - Routes /app/Http/routes.php http://laravel.com/docs/5.0/routing
80. Laravel - Controllers /app/Http/Controllers UserController.php
81. Laravel - REST Resource Controllers
82. Laravel - Database Queries
83. Laravel - Eloquent ORM ORM - Object Relational Mapping db table: users (plural, lowercase) eloquent model: User.php (singular, capitalize)
84. Laravel - Eloquent ORM app/User.php
85. Laravel - Eloquent - CRUD Create Read Update Delete
86. Laravel - Eloquent - CRUD
87. Laravel - Eloquent - Where Clause
88. Laravel - Eloquent - Mass Assignment
89. Laravel - Eloquent - JSON/Array
90. Laravel - Eloquent - Relationships • One To One • One To Many • Many To Many • Has Many Through • Polymorphic Relations • Many To Many Polymorphic Relations
91. Relationships - One to One
92. Relationships - One to Many
93. Relationships - Many to Many
94. Relationships - Has Many Through
95. Polymorphic Relations
96. Many To Many Polymorphic Relations
97. Laravel - Eloquent - Eager Loading X
98. Laravel - Eloquent - Eager Loading V
99. Laravel - Model Events • creating • created • updating • updated • saving • saved • deleting • deleted • restoring • restored
100. Laravel - Authentication
101. Laravel - Views
102. Laravel - Blade Template
103. Laravel - Blade Template
104. Laravel - Blade Template
105. Laravel - Localization
106. Laravel - Localization
107. Laravel - Localization
108. Laravel - Artisan CLI
109. Laravel - Artisan CLI
110. Laravel - Migrations database/migrations/XXXXXXXX_create_users_table.php
111. Laravel - Migrations
112. Laravel - Migrations
113. Laravel Database Seeding
114. Laravel - Resources Documentation Laravel 5 From Scratch What's New in Laravel 5.0