Rezha Julio

Hi!
My name is Rezha Julio
I am a chemist graduate from Bandung Institute of Technology. Currently working as Data Engineer at Traveloka.
You can reach me by email:

contact@rezhajulio.id

, @ Q Q

Powered by Hugo

filter by tags

CSS Grid on Production

time to read 2 min | 331 words

Today we have new tools/toys like CSS Grid which allows far greater control than we’ve ever had before, but at the same time, it allows us to let go of our content and allow it to find it’s own natural fit within the constraints of our design.

Personally, I’ve been looking at CSS Grid as a way to force elements to go where I want them to which is certainly one way to look at it, but it also offers a more natural “fit where I can” approach which I’m beginning to explore and having a lot of fun with.

While you’re getting started with CSS Grid you’re sure to be thinking that you can’t use this is production because it’s only supported in the latest browsers. While the support is true it doesn’t preclude you from starting to use it. Every browser that does support CSS Grids also supports @supports. This means that you can do something like this:

.wrapper {
  max-width: 1200px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: minmax(150px, auto);
}
/*float the side bar to the left and give it a width, but also tell it the grid column to go in  if Grid is supported */
.sidebar {
  float: left;
  width: 19.1489%;
  grid-column: 1;
  grid-row: 2;
 }
/*float the content to the right and give it a width, but also tell it the grid column to go in  if Grid is supported */
.content {
  float: right;
  width: 79.7872%;   
  grid-column: 2;
  grid-row: 2;
}

This will give you a site that works in all browsers that do not support Grid because it’s ignored and looks at the floats and widths. Then if Grid is supported then we want to remove the widths otherwise the elements will take up that width of the grid track rather than the parent.

@supports (display: grid) {
.wrapper > * {
  width: auto;
  margin: 0;
  }
}

Voila, you have a fallback layout AND grid in one.

Kompresi CSS menggunakan Python

time to read 2 min | 221 words

Jangan siksa pengunjung website mu dengan bloated CSS

CSS (Cascading Style Sheet) merupakan salah satu komponen penting dalam sebuah website. Tanpa CSS, sebuah website dapat dipastikan memiliki tampilan yang tidak begitu indah dilihat. Namun ketika sebuah website memiliki komponen yang cukup banyak, ukuran file CSS ini akan menjadi cukup besar sehingga memperlambat akses website kamu. Disini saya akan kasih script kecil yang dapat digunakan untuk memperkecil ukuran css kamu.

Disini kita butuh sebuah library python bernama cssmin, installasi nya cukup mudah, cukup dengan mengetik pip install cssmin

Pastikan installasi anda sudah terinstall pip tentunya. Cssmin ini dapat dibilang import dari YUI css compressor yang berbasis java. Untuk memperkecil banyak file css sekaligus, gue akan berikan snippet code nya.

import cssmin, time, glob  
#nama file output, disini gue beri nama all_UnixTime.css
#contoh file output all_1376637310.css
outfilename = ‘all_’ + str((int(time.time()))) + ".css"  
#membaca setiap file css dalam 1 folder
with open(outfilename, ‘wb’) as outfile:  
    for fname in glob.glob(‘*.css’):
        with open(fname, ‘r’) as rawfile:
            #mengecilkan css
            minified_file = cssmin.cssmin(rawfile.read())
            #menulis css yang sudah diperkecil ke file output
            outfile.write(minified_file)
    outfile.write(‘/* ===end of ‘ + fname + ‘===*/\n’)

simpan dalam sebuah file misalkan css.py, lalu letakkan dalam 1 folder bersama file css anda, lalu eksekusi dengan menjalankan ini di command line loe

python css.py  

Untuk yang ingin mempelajari lebih jauh library cssmin, silahkan kunjungi githubnya

RECENT SERIES

  1. java 101 (13):
    Apr 29, 2017 - Translating Scanner tokens into primitive types
  2. python data structure (5):
    May 03, 2017 - Enhance your tuples
  3. python function (2):
    Apr 16, 2017 - Lambda Functions in Python
  4. python generator (4):
    Apr 26, 2017 - Next, Function or Method ?

Friends of Rezha