Sabtu, 27 Agustus 2016

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.
  • windowframeparentselftop
    • history
    • location
    • document
      • elementbodyh1pbutton, dll
Visualisasi DOM Tree


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. 

Minggu, 14 Agustus 2016

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. 

Minggu, 07 Agustus 2016

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++).

Sabtu, 23 Maret 2013

Akumulasi Kartu Liga Kosan Habib

------------------Update GameWeek 11-----------------
Yellow Cards (4 Yellow Card = 1 Match Ban)
CardsNama PemainNama Klub
2A. ColeChelsea
2Gael ClichyManchester City
2Phillip LahmBayern Munchen
1AbateAC Milan
1Antonio ValenciaManchester United
1Arturo VidalJuventus
1Bacary SagnaArsenal
1Bastian SchwensteigerBayern Munchen
1BoneraAC Milan
1CleverleyManchester United
1D. StankovicInter Milan
1Diego MilitoInter Milan
1J. ZanettiInter Milan
1Javi MartinezBayern Munchen
1John TerryChelsea
1Jose PintoBarcelona
1K. AsamoahJuventus
1Laurent KoscielnyArsenal
1Marco VucinicJuventus
1PelusoJuventus
1PuyolBarcelona
1Rio FerdinandManchester United
1Samir NasriManchester City
1SamuelInter Milan
1VidicManchester United


Red Card (1 Red Card = 1 Match Ban)
CardsNama PemainNama Klub
1Andrea PirloJuventus
1David AlabaBayern Munchen
1MascheranoBarcelona
1Thomas VermaelenArsenal

Rabu, 06 Maret 2013

Top Skorer dan assist liga kosan habib

-----------------------Top Skorer Liga Kosan Habib-----------------------

Update GameWeek 11


GolNama PemainNama Klub
11Mario GomezBayern Munchen
11Zlatan IbrahimovicPSG
9Toni KroosBayern Munchen
7Wayne RooneyManchester United
6Demba BaChelsea
6Sergio AgueroManchester City
5Edin DzekoManchester City
5Mario BalotelliAC Milan
5Olivier GiroudArsenal
5Robin Van PersieManchester United
4Ezequiel LavezziPSG
4Lionel MessiBarcelona
3Arjen RobbenBayern Munchen
3Carlos TevezManchester City
3Diego MilitoInter Milan
3Giampaollo PazziniAC Milan
3Javier PastorePSG
3Jeremy MenezPSG
3Marko VucinicJuventus
3QuagliarellaJuventus
2Antonio CassanoInter Milan
2David BeckhamPSG
2Frank RiberyBayern Munchen
2Juan MataChelsea
2MandzukicBayern Munchen
2NaniManchester United
2PazziniAC Milan
2RobinhoAC Milan
2Theo WalcottArsenal
2Thomas MullerBayern Munchen
2Xavi HernandesBarcelona
2Yaya ToureManchester City
1A. SanchezBarcelona
1A. YoungManchester United
1Abou DiabyArsenal
1AlexPSG
1Andreas IniestaBarcelona
1BadstuberBayern Munchen
1C. TelloBarcelona
1D. StankovicInter Milan
1Danny WelbeckManchester United
1Juan JesusInter Milan
1Lucas MouraPSG
1Lukas PodolskiArsenal
1MarchisioJuventus
1MatuidiPSG
1NenePSG
1Nigel De JongAC Milan
1PatoAC Milan
1PedroBarcelona
1PodolskiArsenal
1PuyolBarcelona
1Rodrigo PalacioInter Milan
1S. CazorlaArsenal
1Samir NasriManchester City
1Vincent KompanyManchester City
1Xerdan ShaqiriBayern Munchen




--------------------Top Assist Liga Kosan Habib----------------------

Update GameWeek 11
AssistNama PemainNama Klub
7Ezequiel LavezziPSG
4Frank RiberyBayern Munchen
4RobinhoAC Milan
4Thomas MuellerBayern Munchen
4Zlatan IbrahimovicPSG
3Arjen RobbenBayern Munchen
3David SilvaManchester City
3Javier PastorePSG
3Kevin-Prince BoatengAC Milan
3Sergio AgueroManchester City
3Toni KroosBayern Munchen
2Danny WelbeckManchester United
2RamiresChelsea
2Robin Van PersieManchester United
2Thiago SilvaPSG
2Wayne RooneyManchester United
2Xavi HernandezBarcelona
1Abou DiabyArsenal
1Alexis SanchezBarcelona
1Andre ArshavinArsenal
1Andreas IniestaBarcelona
1Antonio CassanoInter Milan
1Antonio ValenciaManchester United
1ArmandPSG
1Bastian SchweinsteigerBayern Munchen
1Carlos TevezManchester City
1ChantomePSG
1ConstantAC Milan
1David VillaBarcelona
1Demba BaChelsea
1Diego MilitoInter Milan
1Eden HazardChelsea
1GarganoInter Milan
1GervinhoArsenal
1James MilnerManchester City
1Javi MartinezBayern Munchen
1Juan MataChelsea
1KuzmanovicInter Milan
1Lionel MessiBarcelona
1Lucas MouraPSG
1Lukas PodolskiArsenal
1MandzukicBayern Munchen
1Mario BalotelliAC Milan
1MontolivoAC Milan
1NaniManchester United
1Nicholas AnelkaJuventus
1Phillip LahmBayern Munchen
1Ryan GiggsManchester United
1Samir NasriManchester City
1Theo WalcottArsenal
1Xerdan ShaqiriBayern Munchen