Laravel Elixir Tidbit

The case

You do know that multiple <link> and <script> tags will cause your browser to do multiple requests to the server, don’t you?

Well, I am not saying anyone on my team doesn’t, but surely no one cares (at the moment).

In my current project, we have like 20+ <script> tags and the same goes for <link> tags for stylesheets. Most of them are from plugins. I don’t know how long it takes to load those resources one by one (I think Chrome Dev Tools can analyse the timings) but it is horrendous to see all those requests in your browser debugging tool.

So let’s learn another tool so we can optimize both our workflow and our application. Please welcome

Laravel Elixir

The buildup

If you are a Javascript developer, you’ve probably heard or used a task runner such as Gulp or Grunt. Laravel Elixir is a layer of abstraction on top of the task runner in our Laravel app. It uses Gulp internally for the task and it is simpler than to use Gulp directly. You have less stuff to configure.

Here I won’t repeat what Laravel docs say on using Laravel Elixir. You can read it by yourself; it’s pretty straightforward.

I will point out things I found by experimenting with Laravel Elixir instead.

Oh, for you who are running Laravel 5.4, it is renamed to Laravel Mix instead.

TIL

• Compiling SCSS to one CSS file does not work

  What the docs say…

  Again, like the less method, you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:

    elixir(function(mix) {
        mix.sass([
            'app.scss',
            'controllers.scss'
        ], 'public/assets/css');
    });
  

  Boo…It doesn’t work at all.

  If I put the name of a CSS file as the second argument, Laravel Elixir will create a directory with that name and then put the compiled CSS files in that directory. So no compilation to single CSS file.

  But there is a workaround.

    elixir(function(mix) {
        mix.sass("*", "resources/assets/css/");
        mix.styles("*");
    });
  

  Easy, eh.

Belajar Perintah Linux

Kuis Mingguan

Setiap Jumat pukul 10.00 WIB, kami, tim Praja, mempunyai sesi yang disebut “Kuis Mingguan”. Programmer-programmer tim Praja berkumpul dalam satu ruangan dan membahas topik seputar dunia pemrograman. Satu minggu sebelumnya, topik akan diberikan bersama dengan tugas yang harus kami selesaikan dalam waktu satu minggu.

Perintah Linux

Pada kuis kali ini, tim Praja mempelajari perintah-perintah Linux yang dapat membantu kami dalam pekerjaan. Nah, walaupun perintah-perintah ini dapat di googling dan sudah banyak di blog-blog lain, aku akan menuliskan hasil pembelajaranku disini. Aku menggunakan Bash on Windows agar dapat menjalankan perintah bash pada sistem operasi Windows 10.

Aku sendiri sebelumnya tidak banyak tahu tentang perintah di bash , mungkin karena sudah terbiasa dengan PowerShell Windows, jadi hanya tahu perintah yang ada di kedua shell (Contoh: ls, pwd, cd).

OK. Mari kita simak tugasnya.

Tugas / TIL

• Mengetahui folder saat ini: pwd

• Mengetahui sisa space: df

  Flag yang berguna:

  • -h : output ukuran dengan satuan
  • -l : output hanya file system lokal
  • -t : output hanya tipe file system tertentu
  • -T : output dengan tipe file system

• Mengetahui ukuran folder saat ini: du -sh

  Flag yang berguna:

  • -s : total ukuran folder saat ini (sama dengan -d 0)
  • -d : total untuk folder dengan kedalaman N dari folder saat ini
  • -h : ukuran dengan satuan

• Mengetahui ukuran folder tertentu: du DIRECTORY

• File permission: stat -c %A FILE/DIRECTORY

  Flag yang berguna:

  • -t : format satu baris
  • -c : output sesuai format. Format yang berguna:
    • %A : permission dalam format manusia
    • %a : permission dalam format oktal

• Change file permission: chmod PERMISSION FILE/DIRECTORY

  Flag yang berguna:

  • -R : mengubah permission secara rekursif

• Create folder: mkdir DIRECTORY

  • -p : membuat folder dalam folder

• File operation (copy, copy recursive, move, delete, delete folder)
  • copy (recursive) : cp [-arf] SOURCE DEST
    • -a : copy dengan atribut yang sama
    • -r : rekursif
    • -f : paksa copy
  • move/rename : mv SOURCE DEST
  • delete (recursive) : rm [-rf] FILE/DIRECTORY
  • delete directory : rmdir

• upload file from local to remote (sftp, scp)

  1. Jalankan sftp
  2. put SOURCE DEST

• download file from remote to local (sftp, scp)

  1. Jalankan sftp
  2. get SOURCE DEST

• synchronize file/folder between to location : rsync SOURCE DEST

  Flag yang berguna:

  • -a : sinkron dengan symlink, hak permisi
  • -z : mengurangi beban transfer
  • -P : menampilkan progres dan mengaktifkan –partial
  • –delete : menghapus file yang tidak terdapat pada source
  • –partial : mengizinkan rsync parsial, yaitu dapat berhenti/mulai di tengah proses rsync

• mengetahui fungsi wc

  Flag yang berguna:

  • -c : jumlah byte
  • -m : jumlah karakter (termasuk newline)
  • -w : jumlah kata
  • -l : jumlah baris
  • -L : panjang dari baris terpanjang

• mengenali ttg chaining operation (|, >, », <, «)

  • | : pipe
  • > : redirect stdout
  • >> : redirect dan append stdout
  • < : redirect stdin
  • « : redirect dan append stdin

• mengetahui jumlah file dalam folder dgn chain 2 command: ls | wc -l

• mengetahui jumlah kata dalam file: wc -w

• mengetahui fungsi grep, sed, awk
  • grep : menemukan konten yang cocok dengan pola yang dicari
  • sed : mengubah aliran stdin dan mengembalikan hasilnya ke stdout
  • awk : filter custom
• menggunakan fungsi grep sebagai chain dari fungsi lain ls | grep .php

Ekstra

• menampilkan informasi pengguna sekarang : id

  Flag yang berguna:

  • -g : group
  • -G : gid
  • -u : user

• menampilkan isi file teks : less

Choosing an Integer as Primary Key in Relational Database

The case

I found bugs in the modules I created with our in-house CRUD builder. It turned out that those tables with VARCHAR type as primary key couldn’t be updated. Supposedly, primary keys can be of any type as long as they are unique. But our CRUD builder doesn’t allow non-auto-increment primary keys.

I didn’t mind changing my schema but I was curious on why I should use auto-increment integer as primary keys. After some googling, here’s what I learned…

TIL

Why an integer is a better choice for the primary key (i.e. a surrogate key)?

1. Integer is small. PK must be indexed for faster search. The more compact the primary key, the more efficient the management of the index.
2. Again, integer is small as foreign keys. Having small keys everywhere minimizes database size.
3. It’s headache-proof. Neither user nor programmer has to come up with primary keys with some logic in defining it. The key is auto-incremented.
4. Most stable. There’s no reason to change the value as it has no meaning/logic associated with it. Otherwise, changing primary keys results in changing all the foreign keys and it is an expensive process.

The other option

Choosing natural keys (e.g. product code, country code) with types like VARCHAR is definitely possible. But the memory and maintenance costs of it don’t justify it.

Hi, thanks for stopping by. I guess I will post snippets of my TIL here today onward. It serves as a one-stop portal for what I learned. Feel free to look around.

-d0ct0r4r6a-

What Happened in February?

How’s it going?

February was a month full of twists and turns. I was on 3 different flights in one week time. I went to Singapore on the 8th to attend NTU Career Fair the next day. And I stayed for 3 days there till my sister finished her entrance exam. I know I had said this in person, but to whomever lent a hand for me, I am very much grateful — I will repay your kindness in time.

I learned…

Since I moved in to Jakarta, I had more learning resources within my reach. Though I haven’t had a fixed learning path. In summary, I learned what Test-Driven Development is (which gave me something to discuss with my interviewers in BCA), how to use frameworks such as Angular and React, and some new stuff from ES6.

More likely than not, you would like to know how I have turned all those learning to real projects. You have to wait the next post for that. ;)

“What’s next?” is also a good question. For March, I am planning to deep dive the React environment. It’s no use to read much about frameworks, MVC, without getting your hands dirty on a particular framework. As for my reason in choosing React, I just heard one big tech-based Indonesian company was using React for their front-end so yeah…

On a side note…

I told you my old blog was being shut and this new blog’s taking its place. Hehehe…changed my mind. Here, you will read posts about my programming journey: resources, TILs, TIFUs, career-related, and whatnot. While the other blog, it’s more like an experimental ground, a curcol (translation: contemplation, ranting, and the like) place, and everything else about me.

New Year, New Blog

Hi! A warm welcome to you!

Intro

My name is Arga Saragih. I am an Indonesian-Bataknese guy. I graduated with a degree in Electrical Engineering from Nanyang Technological University. I am quite a maverick. My hobbies include reading lots of books, writing human-readable codes, learning stuff (chess, as such), and singing. I am available for hire and looking for Engineering jobs.

About this website

This website is built by Jekyll with the Hyde theme. I am planning to discontinue my previous blog and start writing here. Also, it will serve as the main page for my Github projects.

But, as you can see, it’s pretty dull now. Stay tuned for updates!