How to boost your web development efficiency​

by Markus Hatvan

Git Hooks with lint-staged

Git hooks are scripts that get executed before or after commands such as git commit or git push.

Possible scenarios:

• pre-commit hook: code gets linted and reformatted to avoid commiting dirty code and fighting over different code styles
• pre-push hook: unit/e2e tests get executed to avoid pushing code that would fail the pipeline in the CI

Title Text

• Bullet One
• Bullet Two
• Bullet Three

Git Hooks with lint-staged

{
  "lint-staged": {
      "concurrent": false,
      "subTaskConcurrency": 1,
      "linters": {
          "*.html": [
              "autoformat-html",
              "git add"
          ],
          "*.{scss,js}": [
              "prettier --write --single-quote true --print-width 100",
              "git add"
          ],
          "*.ts": [
              "autoformat-ts",
              "lint",
              "git add"
          ]
      },
      "ignore": ["**/*.min.scss", "**/*.min.js"]
  },
  "scripts": {
      "autoformat-ts": "find src/ -iname *.ts | 
        xargs ${NODE_PATH:-node_modules}/.bin/clang-format -i",

      "autoformat-html": "find src/ -iname *.html | 
        xargs ${NODE_PATH:-node_modules}/.bin/js-beautify --config ./jsbeautifyrc -r",

      "lint": "${NODE_PATH:-node_modules}/.bin/tslint --fix --project tsconfig.json 
        --config tslint.json && echo '### finished linting ###'"
  }
}

package.json

DisableFormat: false

BasedOnStyle: Google

AlignAfterOpenBracket: true
AlignConsecutiveAssignments: false
AlignConsecutiveDeclarations: true
AlignEscapedNewlinesLeft: true
AlignOperands: true
AlignTrailingComments: true
AllowAllParametersOfDeclarationOnNextLine: true
AllowShortBlocksOnASingleLine: false
AllowShortCaseLabelsOnASingleLine: false
AllowShortFunctionsOnASingleLine: None
AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
AlwaysBreakAfterDefinitionReturnType: false
AlwaysBreakAfterReturnType: None
AlwaysBreakBeforeMultilineStrings: false
AlwaysBreakTemplateDeclarations: true
BinPackArguments: false
BinPackParameters: false
BreakBeforeBinaryOperators: None
BreakBeforeBraces: Attach
BreakBeforeTernaryOperators: true
BreakStringLiterals: true
Cpp11BracedListStyle: false
ColumnLimit: 100
ConstructorInitializerAllOnOneLineOrOnePerLine: true
ConstructorInitializerIndentWidth: 4
ContinuationIndentWidth: 2
IndentCaseLabels: true
IndentWidth: 2
IndentWrappedFunctionNames: false
JavaScriptQuotes: Single
JavaScriptWrapImports: true
Language: JavaScript
MaxEmptyLinesToKeep: 1
NamespaceIndentation: None
ReflowComments: true
SpaceBeforeAssignmentOperators: true
SpaceBeforeParens: ControlStatements
SpaceInEmptyParentheses: false
SpacesBeforeTrailingComments: 2
SpacesInAngles: false
SpacesInContainerLiterals: false
SpacesInParentheses: false
SpacesInSquareBrackets: false
UseTab: Never

.clang-format

Autoformatting Typescript

Prettier vs typescript-formatter vs clang-format

also sorts imports by criteria

Showcase Time!

Autoformatting HTML

{
  "html": {
    "indent_level": 0,
    "indent_size": 2,
    "indent_with_tabs": false,
    "eol": "\n",
    "end_with_newline": true,
    "preserve_newlines": true,
    "wrap_attributes": "force-aligned",
    "contentUnformatted": "", 
    "unformatted": []
  }
}

.jsbeautifyrc

most important feature imo: attributes wrap aligned!

JS-Beautify -> Dafuq?!

do you even Emmet bro?

Autoprefixer + Browserslist

webpack.prod.js

package.json

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

 module: {
      rules: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader'
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins: function() {
                    return [require('precss'), require('autoprefixer')];
                  }
                }
              },
              {
                loader: 'sass-loader'
              }
            ]
          }),
          include: [helpers.root('src', 'public', 'styles')]
        }
      ]
    },

purifycss-webpack

webpack.prod.js

  /**
   * Plugin: ExtractTextPlugin
   * Description: Extracts imported CSS files into external stylesheet
   *
   * See: https://github.com/webpack/extract-text-webpack-plugin
   */
  new ExtractTextPlugin('main.[contenthash].bundle.css'),

  new PurifyCSSPlugin({
    // Give paths to parse for rules. These should be absolute!
    paths: glob.sync(path.join(__dirname, '../src/app/**/*.html')),
    // verbose: true,
    purifyOptions: {
      whitelist: ['*modal*', '*popover*', '*bs-popover-bottom*', '*fade*', '*show*', '*slider*']
    },
    minimize: true
  }),

Questions so far?

Installing ZSH

Installing Oh-my-zsh Framework

Terminal workflow

Configuring .zshrc

ZSH_THEME="maran"

plugins=(last-working-dir wd colorize zsh-autosuggestions zsh-syntax-highlighting)

ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE='fg=yellow'

alias dcu="docker-compose up"
alias dcb="docker-compose build"

VSCode monthly iteration plan

VSCode Insiders with daily builds

Visual Studio Code

{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.ngfactory.ts": true,
    "**/*.ngsummary.json": true,
    // "**/*.bundle.js": true,
    "**/*.dll.js": true,
    "**/*.dll.js.map": true,
    // "**/dist/*": true,
    // "**/dll/*": true,
    // "**/compiled/*": true,
    "**/usr/*": true,
    "**/coverage/*": true,
    "**/_node-modules": true
  },
  "html.suggest.angular1": false,
  "html.format.wrapAttributes": "force-aligned",
  "html.format.contentUnformatted": "",
  "html.format.unformatted": "",
  "editor.detectIndentation": false,
  "editor.wordWrap": "on",
  "editor.mouseWheelZoom": true,
  "editor.renderControlCharacters": true,
  "workbench.colorTheme": "Atom One Dark",
  "explorer.openEditors.visible": 0,
  "workbench.startupEditor": "none",
  "htmlhint.options": {
    "attr-lowercase": false
  },
  "beautify.language": {
    "html": ["do-not-match-any-document"],
    "js": ["do-not-match-any-document"]
  },
  "window.zoomLevel": 0,
  "explorer.decorations.badges": false,
  "typescript.autoImportSuggestions.enabled": false,
  "editor.tabSize": 2,
  "extensions.ignoreRecommendations": false,
  "editor.renderWhitespace": "none",
  "explorer.confirmDragAndDrop": false,
  "problems.decorations.enabled": false,
  "diffEditor.ignoreTrimWhitespace": true,
  "editor.suggestSelection": "recentlyUsed",
  "javascript.implicitProjectConfig.checkJs": true,
  "git.autofetch": true
}

settings.json

Visual Studio Code

HINT:

files.exclude hides files/folders not only from search, but also from vscode file tree!

Visual Studio Code

Angular.ng-template

DavidAnson.vscode-markdownlint

EditorConfig.EditorConfig
HookyQR.beautify
Mikael.Angular-BeastCode
PeterJausovec.vscode-docker

Shan.code-settings-sync
WallabyJs.quokka-vscode
Zignd.html-css-class-completion
abusaidm.html-snippets
akamud.vscode-theme-onedark
christian-kohler.path-intellisense
codezombiech.gitignore
dbaeumer.vscode-eslint
donjayamanne.githistory

doublefint.pgsql
eg2.tslint
eg2.vscode-npm-script

felixfbecker.php-intellisense

formulahendry.auto-close-tag

formulahendry.auto-rename-tag

formulahendry.code-runner
ionutvmi.path-autocomplete

jakob101.RelativePath

jasonnutter.search-node-modules
joelday.docthis
magicstack.MagicPython
mkaufman.HTMLHint
mohsen1.prettify-json

mrmlnc.vscode-apache
ms-python.python
ms-vscode.azure-account
naumovs.color-highlight

patrys.vscode-code-outline

redhat.vscode-yaml
robinbentley.sass-indented
steoates.autoimport
thekalinga.bootstrap4-vscode
waderyan.gitblame
wayou.vscode-todo-highlight
xabikos.JasmineSnippets
xabikos.JavaScriptSnippets

code(-insiders) --install-extension {{author}}.{{extension}}

Angular-Starter Boilerplate

Franz App

Various Resources

Th   nk you for your    ttention!