Laravel Tips

Must have Items

  • debug
1
composer require barryvdh/laravel-debugbar --dev

Laravel Blade Snippets 1.18.0 @ block in a single line problem

  • edit ~/.vscode/extensions/onecentlin.laravel-blade-1.18.0/out/src/services/BladeFormatter.js
1
2
3
4
5
6
7
8
@@ -21,6 +21,7 @@
             return "\n" + match;
         });
         output = output.replace(/(\s*)\@include/g, "\n" + this.indentPattern + "@include");
+        output = output.replace(/\s*(@[a-z]+)\n/g, "\n" + this.indentPattern + "$1\n")
         output = output.replace(/(\s*)\@endsection/g, "\n@endsection\n");
         // fix #57 url extra space after formatting
         output = output.replace(/url\(\"(\s*)/g, "url\(\"");
  • before
1
2
3
4
5
6
<div class="top-right links">
    @auth
    <a href="{{ url('/home') }}">Home</a> @else
    <a href="{{ route('login') }}">Login</a>
    <a href="{{ route('register') }}">Register</a> @endauth
</div>
  • after
1
2
3
4
5
6
7
8
<div class="top-right links">
@auth
    <a href="{{ url('/home') }}">Home</a>
@else
    <a href="{{ route('login') }}">Login</a>
    <a href="{{ route('register') }}">Register</a>
@endauth
</div>

custom guard

Clear cache

1
2
3
4
5
6
7
composer dump-autoload
php artisan clear-compiled
php artisan cache:clear
php artisan route:clear
php artisan view:clear
php artisan config:clear
php artisan optimize  // command not found in 6.5

Session examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$value = $request->session()->get('key', 'default');
$value = $request->session()->get('key', function () {
    return 'default';
});

$data = $request->session()->all();
$request->session()->has('key')         // false if the value is null
$request->session()->exists('key')      // true even the value is null

$request->session()->put('key', 'value');

$value = $request->session()->pull('key', 'default');   // fetch value and delete

// delete
$request->session()->forget('key');
$request->session()->forget(['key1', 'key2']);
$request->session()->flush();

// live until next following request
$request->session()->flash('status', 'Task was successful!');
$request->session()->keep(['key1', 'key2']);

Tutorials

Vscode Cookbook

Run multiple vscode in dedicaated environments (Ubuntu)

Let’s make multiple vscode environements that have own extensions and configuration.

System Default

  • Default user data directory

    1
    ~/.vscode

  • Default extention directory

    1
    ~/.vscode/extentions

  • Run vs code with a specific directory

    e.g) $APP_ROOT

    1
    /usr/share/code/code --user-data-dir $APP_ROOT --extensionHomePath $APP_ROOT/extensions

VSCode for Angular

user-data-dir: ~/.vscode-angular

  • Make a desktop launcher (~/.local/share/applications/vscode-angular.desktop)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [Desktop Entry]
    Encoding=UTF-8
    Version=1.0
    Type=Application
    Name=Visual Studio Code for Angular
    Icon=/opt/icons/vscode-angular.png
    Path=/usr/share/code
    Exec=/bin/sh -c "/usr/share/code/code --user-data-dir $HOME/.vscode-angular --extensionHomePath $HOME/.vscode-angular/extensions"
    StartupNotify=false
    OnlyShowIn=Unity;
    X-UnityGenerated=true

    enjoy~~

Vue Cookbook

Installation

1
sudo npm install -g @vue/cli-init

Create a new project

1
2
3
4
5
6
7
vue init webpack <project-name> or
vue create <project-name>
cd  <project-name>

npm install --save vuex
npm install --save bootstrap font-awesome
npm install --save axios vue-axios

  • Build with base-href

    Make a vue.config.js in the application root.

    1
    2
    3
    4
    5
      module.exports = {
      baseUrl: process.env.NODE_ENV === 'production'
        ? '/<your-base-href>/'
        : '/'
    }

Configure deploy setting for gh-pages

1
npm i angular-cli-ghpages --save-dev
1
2
3
4
"scripts": {
  ...
  "deploy": "npx ngh --no-silent"
}

How to watch, observe state values

  • use watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default() {

  computed: {
    count() {
      return this.$store.gettters.count;
    }
  },

  watch: {
    count(newCount, oldCount) {
      this.count = newCount;
    }
  },

}
  • use mapGetters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { mapGetters } from 'vuex';

export default {
  computed: {
      ...mapGetters({
        count: 'getCount'
      })
  }
}

// store

const getters = {
  getCount: state => state.xxxx.length,
}

Remove #bang on URL

Add router opotions { mode: ‘history’}

1
2
3
4
5
6
7
8
export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})

ESlint for vscode

1
2
3
4
5
6
7
8
9
10
11
12
13
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
  "extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
  { "language": "html", "autoFix": true },
  { "language": "vue", "autoFix": true },
  { "language": "javascript", "autoFix": true },
  { "language": "javascriptreact", "autoFix": true }
]

elasticsearch

Start from docker

  • Pulling the image
1
docker pull docker.elastic.co/elasticsearch/elasticsearch:6.4.2
  • Run in Development Mode
1
docker run -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" docker.elastic.co/elasticsearch/elasticsearch:6.4.2

  • Dockerfile

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    FROM docker.elastic.co/elasticsearch/elasticsearch:6.4.2

    ENV ES_HOME /opt/elasticsearch
    WORKDIR ${ES_HOME}

    ENV discovery.type single-node
    ENV ES_HEAP_SIZE 512m
    ENV MAX_OPEN_FILES=65535
    ENV MAX_LOCKED_MEMORY=unlimited

    #VOLUME ${ES_HOME}/es-data

    EXPOSE 9200 9300

  • Run

  • 1
    docker-compose up -d --build elasticsearch

  • Test

  • 1
    2
    3
    curl -XPUT http://localhost:9200/test/_doc/1 -H 'Content-Type: application/json' -d '{"id": 1, "name": "tom" }'

    {"_index":"test","_type":"_doc","_id":"1","_version":1,"result":"created","_shards":{"total":2,"successful":1,"failed":0},"_seq_no":0,"_primary_term":1}
    1
    2
    3
    curl http://localhost:9200/test/_doc/1

    {"_index":"test","_type":"_doc","_id":"1","_version":1,"found":true,"_source":{"id": 1, "name": "tom" }}

Todo

Javascript

What is an event loop?

Angular & NgRx

1
npm install @ngrx/{store,store-devtools,entity,effects} --save

Framesworks

  • Aurelia, VueJS, React

CSS

  • Understanding of BEM, SMACS or OOCSS coding principles
  • Working knowledge of WCAG 2.0 accessibility standards (Level AA)

Understanding of BEM, SMACS or OOCSS coding principles

BEM (Block Element Modifier) ::= Naming convention of CSS classes

e.g)
block ::= login form
element ::= login button
modifier ::= mobile version of login form

1
2
3
4
.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

SMACS (Scalable and Modular Architecture for CSS) ::= CSS style guide

  • Base
  • Layout
  • Module
  • State
  • Theme

How to Create Self-signed SSL Certificate in my Angular5 App (localhost)

Let’s make self-signed certificate and set it for angular 6 https://localhost:4200 server.

Move to the project and create a directory

1
2
cd [project_name]
mkdir certs

Generate a self-signed cert

-days 3650 : 10 years expire time
-nodes : skip passphrase

1
openssl req -x509 -newkey rsa:4096 -sha256 -keyout certs/localhost.key.pem -out certs/localhost.cert.pem -days 3650 -nodes -subj '/CN=localhost:4200'

Add package.json

1
2
3
"scripts": {
  "start:ssl": "ng serve --aot --ssl --ssl-key './certs/localhost.key.pem' --ssl-cert './certs/localhost.cert.pem'",
},

Run local SSL server

1
npm run start:ssl

Open the browser https://localhost:4200

Useful Links