Review Week 3

Materi Pekan 3 Fase 0

Mempelajari DOM, Dev Tools, SVG, dan mengenal komunitas developer

Materi Hacktiv8 pekan ini sebagian besar bercerita mengenai DOM. Apa itu sebenarnya DOM? DOM adalah sebuah singkatan dari Document Object Model, untuk lebih jelasnya mari simak artikel di bawah ini :

1. Mengenal DOM, Event dan Event Listener

Document Object Model (DOM) merupakan antarmuka pemrograman untuk dokumen HTML dan XML (juga SVG) terkait. Dengan DOM, kita bisa mengetahui dan mengatur struktur representasi dokumen melalui program terutama JavaScript. Program dapat mengolah struktur, style, dan isi dari dokumen tersebut. Maka dari itu DOM membutuhkan dan menghubungkan antara dokumen dan kode pemrograman.

Seperti yang telah diketahui sebelumnya bahwa hampir semua hal di JavaScript adalah objek, maka begitupun pada HTML yang kita ketahui melalui DOM. Kombinasi interaksi antarmuka antara DOM dan JavaScript ini juga dapat dilakukan karena adanya Application Programming Interface (API). API memungkinkan sebuah program berkomunikasi dengan program yang lain dengan cara tertentu. Dengan API, bahasa selain JavaScript seperti Python dan Ruby jadi bisa juga mengakses dokumen HTML dan XML.

DOM API di HTML umumnya adalah untuk node ataupun objek element, document, dan window. Setiap hal tersebut memiliki berbagai property (nilai) dan method (aksi), bahkan bisa juga dipasang sebuah penangan kejadian (event handler) sehingga jika ada kejadian tertentu dilakukan suatu statement akan dijalankan. Urutan atau strukturnya diatur secara hierarkis seperti pohon berikut.

• window: frame, parent, self, top
  • history
  • location
  • document
    • element: body, h1, p, button, dll

Hubungan antar berbagai "object" tersebut atau yang akan kita sebut seterusnya dengan "node" adalah antara parent untuk yang di atasnya, children untuk yang di bawahnya, dan sibling yang hierarkinya sama.

Jadi secara garis besar, DOM adalah semua element dalam dokumen yang memiliki keterkaitan satu sama lain. Dengan memahami apa itu DOM, kita selanjut nya bisa menjelajahi DOM, mengubah value dari DOM, ataupun memberikan style sesuai keinginan kita.

Pada DOM juga terdapat istilah event, yaitu ineraksi antara user dan web page. Misal saat user mengklik tombol kiri pada suatu elemen di page, itulah yang disebut dengan Event. Sedangkan jika ada reaksi dari elemen tersebut atas tindakan user, berarti elemen tersebut telah dimodifikasi dengan DOM Event Listener. 

2. Mengenal Dev Tools

Dev Tools merupakan sebuah alat built-in khusus yang biasanya terdapat pada browser kita. Dev tools ini berfungsi alat bantu kita dalam memahami susunan elemen dan informasi dari sebuah webpage. Pada devtools ini juga terdapat fungsi memudahkan debugging. Untuk akses ke Dev Tools bawaan browser, bisa dengan cara tekan Ctrl+Shift+i atau Ctrl+shift+j . Dev tools pun akan segera terpampang pada browser kita. Ada sebuah tutorial pada Code School dari Google jika kita berminat untuk mengenal devtools lebih jauh. Pengoperasiannya relatif mudah dan user-friendly. Sangat bermanfaat bagi kita sebagai calon developer untuk dapat belajar banyak dengan dev tools.

3. Mengenal SVG 

SVG adalah singkatan dari Scalable Vector Graphic. Dengan menggunakan SVG, kita bisa membuat gambar format vector pada web ! keren ! Bagi yang belum tahu, secara umum format gambar dalam web terbagi menjadi 2, yaitu raster dan vector. Contoh gambar yang berformat raster adalah foto. Lebih spesifik lagi, setiap gambar yang terdiri dari pixel pixel disebuat gambar raster, gambar raster memiliki ciri-ciri akan pecah dan buram jika mengalami pembesaran.

Berbeda dengan gambar vector, format ini tidak akan mengalami blur atau pecah jika mengalami pembesaran. Hal ini dapat terjadi dikarenakan vector tidak tersusun atas pixel rigid yang akan muncul jika mengalami pembesaran. 

Maka dari itu sangat diharapkan kita menguasai teknik ini agar bisa membuat gambar dengan format vector sesuai yang kita inginkan.

4. Mengenal Komunitas Developer

Menjadi seorang programmer tentunya akan dihadapkan pada permasalahan-permasalahan terkini di bidang teknologi pemrograman. Akan ada banyak update terbaru dari ilmu ini ataupun kabar-kabar terkini yang akan sangat berguna bagi pekerjaan kita jika kita tau hal tersebut. Dalam hal ini, keberadaan sebuah komunitas yang dapat menunjang karir kita merupakan sebuah solusi. Dengan adanya komunitas, kita bisa saling berbagi mengenai info terbaru, update ilmu dan teknologi terbaru, serta saling sharing masalah pemrograman. Bahkan dengan adanya komunitas kita bisa berbagi info mengenai job offer atau project lain yang akan menguntungkan kita. 

5. Membuat Blog Post

Sejujurnya week 3 sudah lewat dari sepekan yang lalu, tapi apa daya baru bisa diselesaikan sekarang karena waktu belajar yang tidak efektif serta dikejar-kejar kantor untuk delivery tugas dan data-data karena sudah mau resign. Jadwal belajar pun jadi tidak berjalan dengan baik, ditambah tugas yang menurut saya agak sulit. dan adanya kesalahpahaman konsep(menggunakan jQuery di script tanpa refer link) di awal membuat saya frustasi duluan dengan tugas di week 3. Maka dari itu blog post saya cukupkan sampai sini karena mau mengejar materi week 4. Terima kasih. 

Review Week 2

Materi Pekan 2 Fase 0

Mempelajari JavaScript( ); 

Pekan kedua dari kelas online hacktiv8 membahas dan mengenalkan kepada kami apa itu javascript. Mungkin banyak dari kita yang sudah sering mendengar mengenai javascript(js), namun belum paham betul makhluk apa sebenarnya js itu.

Secara umum, materi yang kami dapatkan pekan ini adalah :

1. Mengenal JavaScript( );

Javascript adalah sebuah bahasa pemrograman yang memiliki banyak fungsi, mulai dari mengolah data dan angka, membuat objek, memahami logika, dll. Js sendiri banyak digunakan sebagai dasar dari aplikasi-aplikasi yang sering kita temukan. Berikut ini hal yang dipelajari mengenai js :

• Memahami dan menggunakan dasar pemrograman dengan JavaScript
• Memahami dan menggunakan struktur dan tipe data di JavaScript
• Memahami berbagai sistem angka
• Memahami dan menggunakan object dan JSON di JavaScript
• Memanfaatkan code style guide untuk JavaScript
• Memahami alur logika di JavaScript
• Memahami function dan method di JavaScript

2. Mengenal Algoritma dan Pseudocode

Algoritma adalah sebuah terminologi yang bisa juga diartikan 'urutan dan logika'. Kita menggunakan algoritma sebagai dasar dalam pembuatan program. Program yang baik, proses pembuatannya akan diawali dengan penggambaran diagram algoritma mengenai program tersebut. Diagram itu akan berisi mulai dari awal program itu berjalan sampai tujuan akhir dari program tersebut. Disetiap bagian diagram akan ada penjelasan mengenai program tersebut. Apa yang akan dilakukan oleh program tersebut untuk setiap kasus harus ada penjelasannya dari diagram tersebut. Sehingga coder akan mudah memahami maksud, tujuan dan sifat program tersebut dan bisa membuat program code yang baik berdasarkan algoritma tersebut.

Pseudocode bisa dibilang sebagai bahasa manusia yang ditampilkan dalam format bahasa komputer. Tujuan dari pseudocode sama dengan algoritma, yaitu mempermudah pemahaman mengenai pembuatan suatu program.

3. Tugas Membuat Program

Setelah kita dianggap paham mengenai js, selanjutnya kita ditugaskan untuk membuat program atau aplikasi sebagai berikut :

• Membuat fungsi matematika dasar
• Membuat permainan suit lokal
• Membuat daftar kontak sederhana

Meskipun aplikasi ini sederhana, ternyata dalam pembuatannya cukup rumit dan mengharuskan kita membaca banyak referensi. Disamping itu kita juga harus sabar diri jika menghadapi situasi yang menjengkelkan, misalnya : fungsi kita sudah betul namun ada masalah pada syntax(aturan penulisan). Sempat saya beberapa kali mengalami hal ini. :tired_face:

Selanjutnya kita juga evaluasi diri dan merefleksikan apa saja yang sudah kita pelajari dan kita capai hingga saat ini. Dengan adanya fase ini kita bisa lebih menilai diri kita sebenarnya sampai sejauh mana pemahaman kita, hal apa yang benar-benar sudah kita kuasai dan apa yang belum.

4. Membuat Blog Post

Maka dari itu pekan ini saya menulis lagi di blog mengenai summary kegiatan pekan ini. Sejujurnya banyak materi yang belum ter-rangkum, misalnya : pengenalan web literacy, open source, node.Js, babel, dll. Hanya saja saya merasa energi dan waktu untuk pekan ini tersedot oleh JavaScript, sehingga belum baca cukup banyak referensi mengenai hal itu. Akan saya update lagi mengenai hal tersebut pada blog post ini saat saya sudah paham mengenai semua itu. 

Review Week 1

Materi Pekan 1 Fase 0

Mempelajari Dasar-dasar Pemrograman

Pada pekan pertama kelas online yang diadakan oleh Hacktiv8, kami mempelajari dasar-dasar pemrograman secara umum, Kami juga dikenalkan dengan aplikasi yang umum dipakai para developer seperti Slack, Git dan GitHub. Selain itu kami juga dikenalkan dengan bahasa yang dipakai untuk men-design sebuah web, yaitu HTML dan CSS untuk menghiasnya. 

Secara umum, materi yang kami dapatkan pekan ini adalah :

1. Mengenal Git dan GitHub

Git adalah sebuah aplikasi version control yang biasa digunakan seorang developer. Aplikasi ini terhubung dengan sebuah web bernama GitHub. GitHub ini bentuknya adalah seperti forum komunitas developer yang memiliki kemampuan bagi para developer untuk dapat saling merevisi projrct satu sama lain dan melihat hasil dari revisinya tersebut secara terpisah. Dari sini kemudian kami mempelajari hal-hal berkaitan yang menunjang pembelajaran untuk Git dan GitHub, misalnya: 

• Belajar command line lebih lanjut, karena Git menggunakan perintah command line.
• Membuat web pada Github 
• Clone repositori ke local (local = PC)
• Mempelajari perintah tambahan seperti add, commit, push, pull pada Git.
• Memahami cara kerja Git lebih lanjut dengan cara terus menggunakannya

2. Mengenal HTML dan CSS

HTML dan CSS adalah bahasa yang umum digunakan pada pemrograman. Kali ini kami dengan pengetahuan secukupnya diinstruksikan untuk membuat dan mengembangkan website yang telah dibuat pada GitHub. 

Secara umum, HTML berfungsi sebagai struktur konten pada sebuah web dengan default strktur berupa: html, head, body. Dari struktur utama ini kemudian banyak tag tambahan untuk pengaturan posisi halaman web, seperti div,  span , dll. Pada html juga dilakukan "pendefinisian variabel" yang dilakukan dengan cara menambahkan "class" ataupun "id" pada bagian tertentu.

Sedangkan CSS berfungsi sebagai penentu style dari variabel yang sudah dideklarasikan pada HTML. Contoh: position, width and height, dll.

Selanjutnya kami juga diminta untuk mempelajari basic HTML lebih lanjut, seperti menggunakan meta data, header, footer, komentar, paragraf, table, gambar dan form. 

Lalu kami juga mempelajari basic CSS, yaitu membuat style pada page dengan color, background color, font size, position, height, weight, border, transition, animation, dsb.

Mempelajari aturan penulisan HTML juga ternyata sangat penting karena harapannya semua developer memiliki skill standar terkait penulisan HTML.

Setelah kami (dianggap) paham tentang hal tersebut, selanjutnya kami membuat artikel dan news. Mulai dari sini pembelajaran mulai fokus kepada konten dan aplikasi.

3. Menganalisa dan memahami dasar-dasar suatu website

Dalam hal memahami dan menganalisa suatu website, kami diberikan tugas sebagai berikut :

• Mempelajari proses pembuatan website
• Mengenal wireframe
• Mengenal design thinking
• Mengevaluasi UI (User Interface) dan UX (User Experience) sebuah website
• Memahami perbedaan AWD (Adaptive Web Design) dan (RWB (Responsive Web Design)

Dengan melihat materi yang diberikan, saya menyadari jika membuat website yang powerful dan beautiful tidaklah mudah. Untuk membuat website yang powerful dan high-impact kita membutuhkan sebuah goal yang jelas, target viewers yang sesuai dan melakukan evaluasi secara berkala dan terukur. Sedangkan untuk membuat website yang beautiful dan colorful, kita harus melihat dari sudut pandang viewers, mengerti apa yang orang butuhkan ketika berkunjung ke web kita, dan bagaimana kita membuat pengunjung nyaman dengan tampilan web kita.

Maka dari itu munculah suatu terminologi baru dalam cabang ilmu computer science, yaitu Adaptive Web Design dan Responsive Web Design. Kedua hal ini merupakan tuntutan dari UX karena perkembangan teknologi telah melahirkan device dengan berbagai macam ukuran, dan hal ini merupakan tantangan bagi tiap developer untuk dapat membuat tampilan web sebaik mungkin yang dapat diimplementasikan ke berbagai macam devices.

4. Mengevaluasi Core Value dan Refleksi Diri

Setelah kita mempelajari berbagai hal mengenai website, kami diarahkan untuk mengenal diri sendiri lewat core value. Apa itu core value? Secara umum CV adalah nilai-nilai yang akan selalu kita pegang dan bawa dalam setiap fase hidup kita, baik saat kita senang maupun susah. Dengan kita menyadari adanya CV ini kita diharapkan memahami apa goals dan pegangan kita untuk menjalani kehidupan kita. Karena mengenal diri sendiri sangat penting supaya tidak kehilangan arah dalam hidup. Dari sekumpulan nilai yang disediakan, saya memilih 8 nilai ini sebagai Core Value saya :

ADIL; BERANI; BIJAK; HARGA DIRI; INTEGRITAS; KOMITMEN; TANGGUNG JAWAB, dan TANTANGAN;

Penjelasan lengkapnya silahkan lihat page github saya.

Selanjutnya kita juga evaluasi diri dan merefleksikan apa saja yang sudah kita pelajari dan kita capai hingga saat ini. Dengan adanya fase ini kita bisa lebih menilai diri kita sebenarnya sampai sejauh mana pemahaman kita, hal apa yang benar-benar sudah kita kuasai dan apa yang belum. 

5. Membuat Blog Post

Maka dari itu saya kembali menulis di blog ini setelah hampir 4 tahun vakum. Semoga dengan ikut program ini blog saya yang telah berlumut ini dapat dihidupkan kembali (lumayan hits sudah 10.000++).