Dimensi TutupBotol: Web Programming

Showing posts with label Web Programming. Show all posts

Monday, November 26, 2018

Konversi SASS ke CSS menggunakan GruntJS

Dipostingan sebelumnya kita udan nyiapin environment development buat gruntjs. Trs udah nyoba2in juga gimana caranya ngebuat dan ngerunning task. So dipostingan ini kita akan mencoba mengkompile atw mengkonvert sass ke css menggunakan gruntjs.

Pertama-tama, mari kita buat kode sass yang sangat sederhana saja seperti terlihat pada gambar dibawah :

Jadi intinya kita ngebuat folder baru 'sass'. Terus didalem sass ini ada file adimixins.scss yang isinya bisa dilihat diatas. Terus mixins tersebut diload di styles.scss....
Siiipssss.... Berikutnya kita install dl package dari npm yaitu node-sass dan grunt-sass buat ngekonvert file sass tersebut diatas ke csss. Cara installnya bisa dilihat dicommand prompt screen dibawah :

Jadi sekarang kita udah punya grunt-sass dan node-sass di packge.json kita seperti terlihat dibawah :

Okie berikutnya kita load grunt-sass di Gruntfile.js. Untuk ngeload kita bisa liad contohnya di grunt-sass pagenya. Dari page tersebut kita masukin kode dibawah :

module.exports = function(grunt) {
    const sass = require('node-sass');
    // Configuration
    grunt.initConfig({
        // pass in options to plugins
        // refenrece to files etc
        sass: {
            options: {
                implementation: sass
            },
            dist: {
                files: [{
                    src: 'sass/styles.scss',
                    dest: 'css/main.css'
                }]
            }
        }
    });

    
    // Load plugins
    grunt.loadNpmTasks('grunt-sass');

    
    // Register tasks
    grunt.registerTask('convert-sass', 'sass');
    
    grunt.registerTask('run', function() {
        console.log('running task from grunt');
    });

    grunt.registerTask('testajjah', function() {
        console.log('running test task from grunt');
    });

    grunt.registerTask('allTasks', ['run', 'testajjah'])
}

Kode diatas intinya ngebuat konfigurasi sassnya. Jadi styles.scss (di sass/styles.css) yang bakalan dikonvert ke css yang lokasinya di css/main.css. Trs di line 22, kita ngeload grunt-sassnya dan diline 26 kita ngebuat grunt task yang baru. So klu kita run 'grunt convert-sass', hasilnya adalah :

Siipss... sekian untuk proses konversinya... semoga bermanfaat... :-)

Friday, January 26, 2018

Webpack untuk Pemula

Di postingan sebelumnya kita udah maen javascript tanpa make webpack. Naah dipostingan ini kita bakalan naroin webpack. Jadi klu yg belum liad2 postingan sebelumnya... Silahkan lihat disini...

Github untuk postingan ini bisa dilihat disini....
Ok... pertama-tama sebelum install webpack, kita harus install nodejs dl... di sini Hisoka pake node js versi 6.11.1

Nah... setelah install nodejs, berikutnya kita inisialisasi projectnya dl... jalanin 'npm init' terus ikuti langkah2 yg terlihat diconsole...

Naah...tinggal ketik YES... dan enter... trs kita dapat file package.json yg isinya kek gini :

Terus berikutnya baru kita install webpacknya. Tinggal running command ini :
npm i webpack --save-dev

--save-dev itu nunjukin klu webpack syarat dipake buat development....

Nah stelah slese diinstall kita bisa liad perubahannya dengan penambahan folder node_modules sama di package.jsonnya...

Berikutnya kita kasih tau webpacknya buat ngebuild file app.js. So tambain gini di package.json :

Siipss... jadi webpacknya bakalan nyari file app.js ters hasil kompilasinya ditaro di folder dist/bundle.js... Ok next kita ubah kode javascript di app.js soalnya dia bakalan diload sm webpacknya pertama kali... so beralih ke app.js dan ubah jadi kek gini :

Siipss... cuma nambain import bla bla dari file poipo-dom-loader.js.. .Ters kita ubah juga poipo-dom loadernya kek gini biar bisa di import :

Siiipss... daaah deeeeh.... tinggal running webpacknya pake command :
npm run poipo_build
Hasilnya :

Setelah berhasil di build kita liad ada folder baru 'dist' yg isinya bundle.js.... naah bundle.js ini kita load ke file.htmlnya kek gini :

Daaan... Hasilnya...

Siipss... daaah....

Btw... 1 tambahan... buat ngekompile webpack, kita bisa pake minified version. Minified version itu biasanya buat production. Jadi bundle.js-nya lebih kecil file sizenya... Nah cara buat bikin kayak gitu kita tambain kode berikut di package.json...

So tinggal ditambain flag '-p' ajjah.. itu maksnya build buat production... Trs klu kita pengen build tinggal pake "npm run poipo_build_prod"... bundle.js-nya dikomparasi klu pake -p dan g' pake -p...

Naah.. tuh.. file sizenya cm skitar 1kB,,,beda klu g' pake -p yg sizenya sekitar 4kB... dan berikut komparasi isi bundle.js-nya...
Klu g' pake -p :

Klu pake -p :

Siiipsss... sekian dl untuk part ini... sampai jumpa di part berikutnya... :)

Tuesday, October 3, 2017

HTTP Response Code

100 = Continue
101 = Switching Protocols
102 = Processing (WebDAV)

200 = OK
201 = Created
202 = Accepted
203 = Non-Authoritative Information
204 = No Content
205 = Reset Content
206 = Partial Content
207 = Multi-Status (WebDAV)
208 = Already Reported (WebDAV)
226 = IM Used

300 = Multiple Choices
301 = Moved Permanently
302 = Found
303 = See Other
304 = Not Modified
305 = Use Proxy
306 = (Unused)
307 = Temporary Redirect
308 = Permanent Redirect (experimental)

400 = Bad Request
401 = Unauthorized
402 = Payment Required
403 = Forbidden
404 = Not Found
405 = Method Not Allowed
406 = Not Acceptable
407 = Proxy Authentication Required
408 = Request Timeout
409 = Conflict
410 = Gone
411 = Length Required
412 = Precondition Failed
413 = Request Entity Too Large
414 = Request-URI Too Long
415 = Unsupported Media Type
416 = Requested Range Not Satisfiable
417 = Expectation Failed
418 = I'm a teapot (RFC 2324)
420 = Enhance Your Calm (Twitter)
422 = Unprocessable Entity (WebDAV)
423 = Locked (WebDAV)
424 = Failed Dependency (WebDAV)
425 = Reserved for WebDAV
426 = Upgrade Required
428 = Precondition Required
429 = Too Many Requests
431 = Request Header Fields Too Large
444 = No Response (Nginx)
449 = Retry With (Microsoft)
450 = Blocked by Windows Parental Controls (Microsoft)
451 = Unavailable For Legal Reasons
499 = Client Closed Request (Nginx)

500 = Internal Server Error
501 = Not Implemented
502 = Bad Gateway
503 = Service Unavailable
504 = Gateway Timeout
505 = HTTP Version Not Supported
506 = Variant Also Negotiates (Experimental)
507 = Insufficient Storage (WebDAV)
508 = Loop Detected (WebDAV)
509 = Bandwidth Limit Exceeded (Apache)
510 = Not Extended
511 = Network Authentication Required
598 = Network read timeout error
599 = Network connect timeout error

Reference :

http://www.restapitutorial.com/httpstatuscodes.html#

Tuesday, July 11, 2017

array_change_key_case di PHP

Fungsi array_change_key_case intinya ngubah key suatu array menjadi huruf kapital atau menjadi huruf kecil. Contohnya seperti terlihat di bawah

Hasilnya :

Tuesday, April 25, 2017

Dasa Jade Template - NodeJS

Di postingan sebelumnya kita udah ngekonfig node express yg basic... Naah disini kita nyoba2 jade template yg basic2... :)
Contoh jade templatenya bisa dilihat di layout.jade didalam folder views kyk gambar di bawah :

Terus 'block content' itu bisa dilihat didalam index.jade kyk gini :

Tampilannya seperti ini :

Friday, April 21, 2017

SailsJS untuk Pemula - part I

Pertama-tama mari kita install SailsJS-nya pake npm ajjah. Silahkan jalankan perintah ini :

'npm i sails -g --no-optional'

Naah... disitu -g flag buat global directory, trus --no-optional biar g' usah nginstall dependencies di windows (soalnya skrg lg make windows 7)

Silahkan ditunggu beberapa menit biar packagenya kedownload ke repo local kita. Tar klu udah selese, kita bisa nyoba pake command 'sails -h' yg hasilnya kek gini :