Better Development

Marx Tseng

@marx_tseng
https://marxtseng.github.io

Wed Oct 24 2018

Agenda

  • MDX-DECK
  • ESLint
  • Prettier
  • REST
  • Gulp
  • VS Code
  • Vim
  • Git
  • Nginx

MDX-DECK

MDX-based presentation decks
  • πŸ“ Write presentations in markdown
  • βš›οΈ Import and use React components
  • πŸ’… Customizable themes and components
  • 0️⃣ Zero-config CLI
  • πŸ’β€β™€οΈ Presenter mode
  • πŸ““ Speaker notes

https://github.com/jxnblk/mdx-deck

ESLint

The pluggable linting utility for JavaScript and JSX

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

https://eslint.org

ESLint : Sample

  const human = {
    gender: 'male',
    age: 20,
    blood: 'A'
  };
  
  console.log('human["gender"] :', human['gender']);

  console.log('human.gender :', human.gender);
  
  const { gender } = human;

  console.log('gender :', gender);

ESLint : config

[ .eslintrc ]
  {
    "extends": ["airbnb", "prettier"],
    "parser": "babel-eslint",
    "plugins": ["react", "jsx-a11y", "import", "prettier"],
    "rules": {
      "prettier/prettier": "error",
      "react/jsx-filename-extension": "off",
      "camelcase": "off",
      "no-undef": "off",
      "object-curly-newline": "off"
    }
  }

Prettier

Opinionated Code Formatter
  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

https://prettier.io

Prettier : config

[ .prettierrc ]
  {
    "singleQuote": true,
    "trailingComma": "all"
  }

REST / RESTful

REST is acronym for REpresentational State Transfer
  • REST Client (VSCode Extension)
  • VialHttp (Vim Plugin)
  • Advanced REST client (Chrome Extension)

Gulp

Automate and enhance your workflow

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

https://gulpjs.com

Gulp : Sample

  var gulp = require('gulp');
  var pug = require('gulp-pug');
  var less = require('gulp-less');
  var minifyCSS = require('gulp-csso');
  var concat = require('gulp-concat');
  var sourcemaps = require('gulp-sourcemaps');
  
  gulp.task('html', function(){
    return gulp.src('client/templates/*.pug')
      .pipe(pug())
      .pipe(gulp.dest('build/html'))
  });
  
  gulp.task('css', function(){
    return gulp.src('client/templates/*.less')
      .pipe(less())
      .pipe(minifyCSS())
      .pipe(gulp.dest('build/css'))
  });
  
  gulp.task('js', function(){
    return gulp.src('client/javascript/*.js')
      .pipe(sourcemaps.init())
      .pipe(concat('app.min.js'))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build/js'))
  });
  
  gulp.task('default', [ 'html', 'css', 'js' ]);

VS Code

Code editing. Redefined. Free. Open source. Runs everywhere.
  • Meet IntelliSense.
  • Print statement debugging is a thing of the past.
  • Git commands built-in.
  • Extensible and customizable.

https://code.visualstudio.com

VS Code : Extensions

  • VS Code ESLint extension
  • Prettier formatter for Visual Studio Code
  • REST Client
  • Gulp Tasks

https://marketplace.visualstudio.com/VSCode

Vim

The ubiquitous text editor
  • persistent, multi-level undo tree
  • extensive plugin system
  • support for hundreds of programming languages and file formats
  • powerful search and replace
  • integrates with many tools

https://www.vim.org

Vim : Plugins

  • vim-syntastic/syntastic
  • prettier/vim-prettier
  • baverman/vial
  • baverman/vial-http
  • KabbAmine/gulp-vim

https://vimawesome.com
https://vim-bootstrap.com

Nginx

nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server

https://nginx.org/en

Nginx : config

  server {
    listen       80;
    server_name  classroom.marxtseng.io;
    return 301 https://$host$request_uri;
  }
  
  server {
    listen       443 ssl;
    server_name  classroom.marxtseng.io;
  
    ssl_certificate      /usr/local/etc/nginx/ssl/server.crt;
    ssl_certificate_key  /usr/local/etc/nginx/ssl/server.key;
  
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
  
    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
  
    location / {
      proxy_pass http://127.0.0.1:3000;
      proxy_http_version 1.1;
      proxy_set_header 'Access-Control-Allow-Origin' '*';
      proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
      proxy_set_header 'Access-Control-Allow-Headers' 'X-Requested-With, Accept, Content-Type, Origin';
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header 'Access-Token' $http_access_token;
    }
  }

Thanks, make it better!

I'm not stupid.