Nice Terminal

sudo apt install zsh git curl

# Install Powerline Fonts
git clone https://github.com/powerline/fonts.git --depth=1 ~/powerline_fonts && sh ~/powerline_fonts/install.sh && rm -rf ~/powerline_fonts

# Install Oh My ZSH
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

# Use ZSH as default shell
chsh -s /bin/zsh

# Ganti ZSH_THEME menjadi agnoster
vi ~/.zshrc

Ganti default font di Terminal menggunakan Powerline fonts

Iklan

Menggunakan jQuery dengan Vue CLI 3

Menggunakan jQuery dengan Vue CLI 3

Sudah lama nggak nulis blog. Hehe … Yang lain pada pindah ke Medium, saya masih setia dengan WordPress. Soalnya WordPress statistik-nya jauh lebih bagus daripada Medium. Liat dashboard lebih enak.

Ehm! Jadi gini, kebetulan ada pertanyaan tentang bagaimana menggunakan jQuery dengan Vue CLI 3? Kasusnya pakai template dari ThemeForest, yang mana template tersebut sudah banyak fitur, plugin yang menggunakan jQuery. Mau convert semua ke Vue.js? Tentu ini akan memakan waktu yang cukup lama.

Solusinya gampang. Pertama, pastikan sudah install jquery dengan npm install jquery atau kalau pakai yarn add jquery

Kedua, buat file .eslintrc di root project. Lalu isi dengan

{
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  }
}

Ini alasannya agar eslint tidak rewel saat menggunakan $ atau jQuery. Soalnya kedua keyword itu tidak di-import. Kalau mau di-import bisa-bisa saja. Tapi capeklah.

Ketiga, edit file vue.config.js di root project. Kalau belum ada bikin aja sendiri. Lalu isi dengan

const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    config
      .plugin('provide')
      .use(webpack.ProvidePlugin, [{
        $: 'jquery',
        jquery: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }]);
  },
}

Inti sebenarnya adalah mengkonfigurasi Webpack (build tools yang digunakan oleh Vue CLI 3) agar menggunakan jQuery.

Dah, gitu aja.

Video Editor List

Ini cuma list Video Editor yang mau saya explore lebih lanjut. Beberapa sudah pernah pakai, tapi eksplorasinya belum mendalam.

Membuat fitur email aktivasi pada saat registrasi di Laravel 5.4

Membuat fitur email aktivasi pada saat registrasi di Laravel 5.4

Ada diskusi di Laravel Group tentang Sentinel yang memiliki fitur email aktivasi pada saat registrasi. Untuk membuat fitur tersebut, apakah bisa tanpa bantuan package dari pihak ketiga? Jawabannya tentu saja bisa.

Sebelum dimulai, saya asumsikan Laravel anda sudah terkonfigurasi dengan benar. Sehingga sudah bisa mengirimkan email dan save data ke database.

Migration

Hal pertama yang perlu anda lakukan adalah menambahkan dua field ke users table. Kira-kira begini migration-nya.

$table->string('activation_token')->nullable()->unique();
$table->datetime('activated_at')->nullable();

Mail

Setelah itu, jalankan perintah artisan berikut

php artisan make:mail UserActivation -m emails/activation

Perintah di atas akan men-generate dua file, yaitu app/Mail/UserActivation.php dan resources/views/emails/activation.blade.php

Edit file app/Mail/UserActivation.php

Tambahkan public property $user dan parameter $user ke __construct. Juga sedikit modifikasi pada method build. Kira-kira menjadi seperti ini

public $user;

public function __construct(User $user)
{
    $this->user = $user;
}

public function build()
{
    return $this->markdown('emails.verification', $this->user->toArray());
}

Berikutnya kita edit file resources/views/emails/activation.blade.php

@component('mail::message')
# Activate your account

Klik link berikut untuk mengaktifkan akun anda.

@component('mail::button', ['url' => url('activation/' . $user->activation_token) ])
Aktifkan!
@endcomponent

Thanks,

{{ config('app.name') }}
@endcomponent

Route

Edit routes/web.php, tambahkan route baru untuk handle activation token

Route::get('activation/{token}', function ($token)
{
    $user = App\User::where('activation_token', $token)->first();

    if ($user) {
        $user->activated_at = \Carbon\Carbon::now();
        $user->save();

        return 'Your account has been activated.';
    }

    return 'Invalid activation token.';
});

Registrasi

Agar tutorialnya simple dan seragam, saya asumsikan anda menggunakan php artisan make:auth untuk membuat registrasi.

Tambahkan method di bawah ini ke app/Http/Controllers/Auth/RegisterController.php

protected function registered(Request $request, $user)
{
    \Mail::to($user)->send(new \App\Mail\UserActivation($user));

    return 'Please check your mail box.';
}

Masih di file yang sama, pada method create, tambahkan activation_token

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),

         // Tambahin ini nih...
         // Btw, jangan lupa nambahin 'activation_token' pada
         // property $fillable di file app/User.php
        'activation_token' => str_random(64),
    ]);
}

Selesai! Sekarang anda bisa coba lakukan registrasi. Lalu cek email, dan visit URL yang ada di email.

Kesimpulan

Membuat fitur mengirimkan email untuk aktivasi di Laravel sangat mudah. Sehingga penggunaan package tambahan tidak diperlukan.

Anda juga bisa mengubah fitur aktivasi lewat email menjadi aktivasi yang lain. Misalnya aktivasi menggunakan SMS dengan menggunakan fitur Notification di Laravel.

Contoh source code bisa dilihat di https://github.com/mul14/demo-account-activation-via-email-laravel54

Buka PDF dari JS

Ini tulisan supaya gak cape nyari-nyari lagi di Google. 😐

Kalo mau buka PDF dari JavaScript di browser, bisa pake cara ini. Contoh ini pakai axios sebagai http client.

async function openPdfWindow() 
{
    const pdfWindow = window.open()

    const url = 'dummy.pdf'

    const response = await axios.get(url, {
        responseType: 'blob',
    })

    const file = new Blob([response.data], {type: 'application/pdf'})

    const fileURL = URL.createObjectURL(file)

    pdfWindow.location = fileURL
}

Alternatif lain bisa pake base64.

Vim with Dvorak keymap

Vim with Dvorak keymap

Akhirnya ada yang nanya tentang Vim dan Dvorak, jadi ada topik. :3

Jika anda menggunakan Vim dengan keyboard layout Dvorak, bukan berarti anda harus mengganti semua tombol menjadi Dvorak. Anda bisa menggunakan Dvorak hanya pada saat mengetik (insert mode), dan tetap menggunakan Qwerty di normal/visual mode. Jadi posisi tombol HJKL tetap berurutan di DHTN, tidak terpecar-pencar. Ini mirip dengan Dvorak-Qwerty yang pernah saya bahas.

Mau? Lha, trus caranya supaya bisa gitu gimana?

Gampang sekali. Buka vim anda, lalu ketik :set keymap=dvorak. Well done. Sekarang anda bisa menggunakan Qwerty di normal/visual mode, dan Dvorak di insert mode.

Kalau mau permanent, tambahkan saja command tadi ke ~/.vimrc.

Bagi yang ingin tau lebih lanjut, sebenernya Vim menyimpan dvorak keymap ini pada /usr/share/vim/vim80/keymap/dvorak.vim.