Upgrade to Pro — share decks privately, control downloads, hide ads and more …

各種工具介紹

 各種工具介紹

新進成員訓練

David Kuo (Davy)

December 22, 2015
Tweet

More Decks by David Kuo (Davy)

Other Decks in Education

Transcript

  1. 2

  2. 3

  3. 7

  4. 12

  5. 18

  6. 19

  7. role :demo, %w{example.com example.org example.net} task :uptime do on roles(:demo),

    in: :parallel do |host| uptime = capture(:uptime) puts "#{host.hostname} reports: #{uptime}" end end 20
  8. 22

  9. 23

  10. Vagrant.configure("2") do |c| c.vm.box = "precise32" c.vm.hostname = "myprecise.box" c.vm.network

    :private_network, ip: "192.168.0.42" c.vm.provider :virtualbox do |vb| vb.customize [ "modifyvm", :id, "--cpuexecutioncap", "50", "--memory", "256", ] end end 24
  11. 26

  12. powershell_script 'Install IIS' do code 'Add-WindowsFeature Web-Server' guard_interpreter :powershell_script not_if

    "(Get-WindowsFeature -Name Web-Server).Installed" end # World Wide Web Publishing Service service 'w3svc' do action [:enable, :start] end 28
  13. 30

  14. --- - hosts: webservers vars: http_port: 80 max_clients: 200 remote_user:

    root tasks: - name: ensure apache is at the latest version yum: name=httpd state=latest - name: write the apache config file template: src=/srv/httpd.j2 dest=/etc/httpd.conf notify: - restart apache - name: ensure apache is running (and enable it at boot) service: name=httpd state=started enabled=yes handlers: - name: restart apache service: name=httpd state=restarted 31
  15. 33

  16. 34

  17. 35

  18. 36

  19. <?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateTasksTable extends Migration {

    public function up() { Schema::create('tasks', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->timestamps(); }); } public function down() { Schema::drop('tasks'); } } 41
  20. <?php use App\Task; use Illuminate\Http\Request; Route::get('/', function () { $tasks

    = Task::orderBy('created_at', 'asc')->get(); return view('tasks', [ 'tasks' => $tasks ]); }); 46
  21. // resources/views/layouts/app.blade.php <!DOCTYPE html> <html> <body> <div class="container"> <nav class="navbar

    navbar-default"> <!-- Navbar 內容 --> </nav> </div> @yield('content') </body> </html> 47
  22. // resources/views/tasks.blade.php @extends('layouts.app') @section('content') <!-- Add more form --> @if

    (count($tasks) > 0) @foreach ($tasks as $task) <!-- Styling --> {{ $task->name }} <!-- Remove Button --> @endforeach @endif @endsection 48
  23. 49

  24. 51

  25. class CreateTasks < ActiveRecord::Migration def change create_table :tasks do |t|

    t.string :name t.timestamps null: false end end end 56
  26. class TasksController < ApplicationController before_action :set_task, only: [:show, :edit, :update,

    :destroy] # GET /tasks # GET /tasks.json def index @tasks = Task.all end # GET /tasks/1 # GET /tasks/1.json def show end #... 60
  27. # app/views/layouts/application.html.erb <!DOCTYPE html> <html> <body> <div class="container"> <nav class="navbar

    navbar-default"> <!-- Navbar 內容 --> </nav> </div> <%= yield %> </body> </html> 62
  28. # app/views/tasks/index.html.erb <!-- Add more form --> <% @tasks.each do

    |task| %> <!-- Styling --> <%= task.name %> <!-- Remove Button --> <% end %> 63
  29. 64

  30. 66

  31. var express = require('express'); var app = express(); app.get('/', function

    (req, res) { res.send('Hello World!'); }); var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Listening at http://%s:%s', host, port); }); 67
  32. 68

  33. 69

  34. 70

  35. <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"

    /> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" /> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 71
  36. <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button"

    class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria- controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> 72
  37. <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead"> Use

    this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document. </p> </div> </div> 73
  38. 74

  39. <button class="btn btn-primary">1</div> <button class="btn btn-success">2</div> <button class="btn btn-info">3</div> <button

    class="btn btn-warning">4</div> <button class="btn btn-danger">5</div> <button class="btn btn-link">6</div> 77
  40. 78

  41. 79

  42. 80

  43. 81

  44. 82

  45. 83 <!-- Latest compiled and minified CSS --> <link rel="stylesheet"

    href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" /> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
  46. 87 <button class="ui red button">Red</button> <button class="ui orange button">Orange</button> <button

    class="ui yellow button">Yellow</button> <button class="ui olive button">Olive</button> <button class="ui green button">Green</button>
  47. 88 <div class="ui labeled button"> <div class="ui red button"> <i

    class="heart icon"></i> Like </div> <a class="ui basic red left pointing label"> 1,048 </a> </div>
  48. 89 <div class="ui labeled button"> <div class="ui basic blue button">

    <i class="fork icon"></i> Forks </div> <a class="ui basic left pointing blue label"> 1,048 </a> </div>
  49. 91

  50. 92

  51. 93

  52. 94

  53. 97

  54. 101

  55. 102

  56. 103

  57. 104

  58. 105

  59. 106

  60. 108 <body ng-controller="PhoneListCtrl"> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp">

    <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body>
  61. 109

  62. 110 var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope) {

    $scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.', 'age': 1}, {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.', 'age': 2}, {'name': 'MOTOROLA XOOM™', 'snippet': 'The Next, Next Generation tablet.', 'age': 3} ]; $scope.orderProp = 'age'; });
  63. 111

  64. 112

  65. 113

  66. 114

  67. 116

  68. 118 var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed:

    0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); ReactDOM.render(<Timer />, mountNode);
  69. 119 var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed:

    0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); ReactDOM.render(<Timer />, mountNode);
  70. 120 var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed:

    0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); ReactDOM.render(<Timer />, mountNode);
  71. 122

  72. 123

  73. 124

  74. 125

  75. 126

  76. 127 <div class="ui labeled button"> <div class="ui red button"> <i

    class="heart icon"></i> Like </div> <a class="ui basic red left pointing label"> 1,048 </a> </div>
  77. 129

  78. 130 # Assignment: number = 42 opposite = true #

    Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5]
  79. 131 var list, number, opposite, square; number = 42; opposite

    = true; if (opposite) { number = -42; } square = function(x) { return x * x; }; list = [1, 2, 3, 4, 5];
  80. 132 # Objects: math = root: Math.sqrt square: square cube:

    (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)
  81. 133 var math, num, race, square, slice = [].slice; math

    = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : []; return print(winner, runners); }; if (typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); } cubes = (function() { var i, len, results; results = []; for (i = 0, len = list.length; i < len; i++) { num = list[i]; results.push(math.cube(num)); } return results; })();
  82. 134

  83. 135 nav ul { margin: 0; padding: 0; list-style: none;

    } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
  84. 136 nav { ul { margin: 0; padding: 0; list-style:

    none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
  85. 138

  86. 139 @include keyframes(slide-right) { 0% { @include transform( translate(0.0px, 0.0px)

    ); } 50% { @include transform( translate(200.0px, 0.0px) ); } 100% { @include transform( translate(150.0px, 150.0px) ); } }
  87. 140 @-moz-keyframes slide-right { /* ... */ } @-webkit-keyframes slide-right

    { /* ... */ } @-ms-keyframes slide-right { /* ... */ } @keyframes slide-right { /* ... */ }
  88. 141 .box1 { background-color: red; width: 35px; height: 35px; @include

    border-radius(25px); @include animation(slide-right 1s linear 0s infinite alternate); }
  89. 142 .box1 { background-color: red; width: 35px; height: 35px; -moz-border-radius:

    25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-animation: slide-right 1s linear 0s infinite alternate; -moz-animation: slide-right 1s linear 0s infinite alternate; -ms-animation: slide-right 1s linear 0s infinite alternate; animation: slide-right 1s linear 0s infinite alternate; }
  90. 143