Apa Itu Front End Developer?

Apa itu front end developer

Front End Developer adalah salah satu dari sekian banyak bidang pekerjaan yang ada di dalam dunia pemrograman Website & Mobile. Pada suatu proses pembuatan website atau aplikasi, umumnya terdapat 3 komposisi utama yang sangat penting agar website atau aplikasi dapat dinikmati secara sempurna. 3 komposisi tersebut adalah Front End Developer, Backend Developer, dan Web Designer atau UI/UX Designer.

3 komposisi utama ini harus saling bekerja sama dengan baik agar tercipta sebuah website atau aplikasi yang indah yang dapat memanjakan penggunanya.

Apa tugas seorang Front-end Developer?

Seorang Front End Developer bertugas untuk menerapkan interface dan experience yang telah diberikan oleh seorang desainer Website atau UI/UX Designer. Setelah tugas tersebut selesai, Front End Developer masih memiliki tugas lain (menurut saya ini hanyalah tugas opsi), yaitu menghubungkan atau melakukan intregasi website atau aplikasi yang telah dibuat dengan data yang telah disediakan oleh Backend Developer.

Apa Perbedaan Antara Front End & Back End Developer?

front end vs back end

Front end developer dan Backend developer dapat dibedakan dari lingkup kerja & tugasnya, serta bahasa yang digunakan.

Dari segi bahasa yang digunakan, seorang Front end Developer umumnya menggunakan HTML, CSS, dan JavaScript, sedangkan seorang Backend Developer umumnya menggunakan Golang, PHP, Python, Ruby dan lain sebagainya.

Untuk memahami lebih lanjut tentang perbedaan Front end dan Back end, penulis ingin bertanya kepada pembaca.

Setiap harinya kita pasti membuka sebuah website kan? Seperti facebook, google, twitter, situs berita, dan lain sebagainya. Saya rasa jawabannya adalah "YA PASTI".

Yang kita lihat pada layar, serta interaksi yang kita lakukan pada website tersebut, seperti klik tombol, membuka menu, menggeser sebuah gambar, dan lain sebagainya, hal tersebut merupakan lingkup kerja yang dilakukan oleh seorang Frontend Developer. Sedangkan seorang Backend Developer bekerja dibalik itu semua dengan cara menyajikan data yang dibutuhkan oleh Front end Developer untuk ditampilkan di layar.

Relasi Antara Front end Developer dan Backend Developer

Kita bayangkan ada sebuah website sederhana berisi halaman login. Pada halaman login terdapat 2 teks input, yaitu teks input untuk e-mail dan teks input untuk password.

Front end Developer memiliki kewajiban untuk merekam value e-mail dan password yang diberikan/di inputkan oleh user.

Saat user selesai mengisi inputan e-mail dan password, user menekan tombol "submit", saat ada aksi tekan tombol "submit" Front end Developer bertugas untuk mengirim sebuah request(permintaan) kepada Backend Developer, request yang dikirim oleh Front end berisi e-mail, dan password yang telah direkam sebelumnya.

Backend Developer kemudian menerima data dari request yang dikirim oleh Front end Developer, data yang diterima oleh Backend Developer end berisi e-mail, dan password.

Backend Developer kemudian bertugas untuk mencocokkan data yang diterima dari request tadi ke dalam database.

Pada tahapan ini, ada atau tidak adanya data yang cocok, antara data yang ada di dalam database dengan data yang diterima, Backend developer wajib memberikan informasi (response) tersebut kepada Front end Developer.

Sehingga front end dapat menjelaskan kepada user tentang hasil(response) dari aksi login yang dilakukan oleh user tersebut.

Perbedaan Lingkup Kerja Front end Developer dan Backend Developer

Tahap-tahap untuk menjadi  seorang Front end Developer?

Apabila kita telaah dunia front end development pada 5 tahun terakhir, mungkin kita akan sering mendengar terminologi yang belum pernah kita dengar pada artikel, dan video seperti ES6, jQuery, React, Redux, Webpack, Babel, TDD, JEST, Git, async, OOP, functional-style, npm, Node.js, Yarn, SQL, NoSQL, Graph databases, MongoDB, Angular.

Jika sekitar tahun 2010 kita hanya butuh HTML, CSS, JavaScript atau mungkin jQuery dalam membuat website, pata tahun 2020 sekarang ini sudah sangat amat jauh berbeda, bahkan ada sebagian orang yang menganggap jika jQuery sudah masuk ke zona "outdated" alias zona lawas yang sudah harus ditinggalkan.

Front end development memiliki pertumbuhan yang sangat cepat, sehingga standarisasi seorang Front end developer juga ikut semakin rumit, dan muncul terminologi diatas.

Berdasarkan research dan pengalaman saya di dunia Front end Development, saya membagi hal yang harus dilalui seorang Front end Developer kedalam beberapa tahap, berikut adalah tahapannya:

*Dapat memilih salah-satu dari sekian opsi yang ada, namun baik apabila kita dapat memahami opsi lainnya

Front end Developer Roadmap

Berapa gaji seorang Front-End Developer di Indonesia?

Dengan banyaknya rintangan yang harus dilalui untuk menjadi seorang front end developer yang keren, mungkin muncul sebuah pertanyaan Berapa sih gaji seorang Front end Developer? Emang sesuai dengan yang sudah dilalui?.

Saya mendapatkan data dari beberapa situs seperti techinasia.com, careerexplorer.com, dll. Dan setelah saya rangkum dari beberapa situs tersebut saya mendapat nilai rata-rata.

Di Indonesia gaji seorang front end developer berkisar pada angka:

Kesimpulan

Lebih dari 20 tahapan yang harus dilalui untuk menjadi seorang Front end Developer, itu angka yang cukup banyak, dan butuh waktu yang tidak sedikit.

Saya sangat menyadari jika hal ini dapat membuat seseorang yang ingin mulai belajar akan berjalan mundur perlahan karena sudah takut melihat list yang sebanyak itu.

Oleh karena itu pada series ini kita akan sama-sama belajar untuk menjadi seorang Front end Developer dengan menggunakan sebuah project atau istilahnya real world example, sehingga dapat lebih mudah memahami tentang maksud dan tujuan dari sebuah tahapan yang harus dilalui seorang front end developer.

Terminologi yang banyak disebutkan di atas hanyalah sebuah tools, framework, metode, dan lain sebagainya yang front end developer butuhkan di tahun 2018 kedepan.

Saran saya jangan terlalu dipikirkan, relax saja, dan jangan takut, karena saya yakin semua akan paham jika waktunya sudah tepat.

Oleh karena itu, saya mencoba menulis artikel ini untuk membimbing teman-teman agar menjadi seorang Front end Developer yang ciamik dan hebat.

Jangan lupa untuk selalu buka situs ini, karena series ini akan selalu di perbaharui. Jika ada masukan atau pertanyaan, teman-teman dapat bertanya melalui kolom komentar. Saya akan berusaha menjawab sebaik mungkin.

Sebelum langsung ke tutorial cara membersihkan mechanical keyboard dengan cara yang paling sederhana, saya ingin kilas balik sedikit tentang "Apa itu mechanical Keyboard?", untuk sekedar menambah wawasan bagi yang belum mengerti tentang mechanical keyboard.

Apa itu mechanical keyboard?

Mechanical keyboard adalah sebuah keyboard yang tidak menggunakan karet (membran) atau rubber dome untuk menahan setiap key pada keyboardnya.

Mechanical keyboard menggunakan pegas atau tuas mekanik dari besi yang terletak pada switch keyboard.

Setiap switchnya berdiri sendiri-sendiri, tidak tergantung sama lain, sehingga jika ada 1 kerusakan pada switch tertentu kita hanya perlu mengganti 1 saja.

Apa itu Membran Keyboard atau Rubber Dome?

Sedangkan ini adalah switch dari sebuah keyboard membran atau rubber dome

Jika ada kerusakan pada keyboard circuit, cara paling mudah adalah dengan membeli yang baru.

Mechanical Keyboard Milik Saya

Saya pernah memiliki mechanical keyboard TKL (Ten keyless) tanpa cursor, Cherry MX Blue Switches, dengan merek Anne Pro.

Dan itu menjadi penyesalan terbesar saya dalam membeli keyboard, bukan karena mereknya, tapi penyesalan terletak pada kurangnya kelihaian saya dalam menggunakan keyboard tanpa cursor. Saya seorang progammer, dan bagi saya cursor adalah segalanya.

Selain itu Cherry MX Blue menjadi penyesalan karena cukup berat untuk mengetik, dan BERISIK. Semua pecinta mechanical keyboard pasti sudah paham jika Cherry MX Blue adalah switch yang cukup berisik.

Keyboard yang saat ini saya gunakan telah berumur 2 tahun, keyboard ini bermerek Cherry MX Board 2.0, dengan switch Cherry MX Red Linier.

Dan menurut saya ini adalah keyboard terbaik yang saya miliki saat ini, selain cukup ringan dijari, tidak berisik, juga terlihat oldies. Karena tanpa lampu RGB yang terlihat seperti odong-odong.

https://www.youtube.com/watch?v=L0imIrewuQg

^{Ini adalah odong odong}

Membersihkan Mechanical Keyboard

Tahun lalu saya sudah membersihkan keyboard ini, dan sekarang adalah tahun berikutnya, jadi saya membersihkan keyboard ini 1 tahun sekali. Dan ini adalah kondisi keyboard saya setelah 1 tahun tidak dibersihkan:

Alat Tempur Untuk Membersihkan Keyboard

1. Kuas pembersih laptop
   
2. Keypuller
   
3. Cairan Pembersih Laptop
   
4. Air sabun Sunlight. Sunlight sudah terkenal dari masa kemasa untuk membersihkan segala perabot rumah, dan juga harganya murah, karena ini tutorial sederhana, ya saya gunakan seadanya saja.
   

Memulai Pembersihan Keycaps

Hal yang pertama harus kalian lakukan adalah mencabut seluruh keycaps yang ada pada keyboard dengan keypuller. Kenapa keypuller? Ya agar lebih mudah, daripada pada kuku, bisa capek dan sakit.

Setelah seluruh keycaps tercabut, kalian cukup rendam kedalam air sabun SunLight.

Setelah direndam, kalian ambil satu persatu keycaps, dan bersihkan dengan kuas yang tadi disiapkan.

Setelah dibersihkan semuanya, tanpa tertinggal noda yang membandel, kalian bisa jemur dibawah terik matahari.

Memulai Pembersihan Keyboard

Hal yang sulit adalah membersihkan bagian dalam keyboard yang tidak memiliki fitur removable switches.

Cara paling mudah adalah dengan menyemprotkan cairan pembersih laptop dari jarak 30cm, dan jangan banyak-banyak ya, cukup sampai lembab saja.

Setelah disemprot dengan cairan pembersih, kalian cukup gunakan kuas yang tadi disiapkan untuk membersihkan sela-sela keyboard. Dan menurut saya hasilnya cukup bersih.

Setelah kita pastikan semuanya selesai, kita bilas dengan air bersih, dan pastikan tidak ada sabun yang tertinggal. Setelah itu kita dapat menjemur keyboard dibawah terik matahari.

Merakit Kembali Mechanical Keyboard

Setelah menjemur kurang lebih 1jam, pastikan keyboard dan keycaps benar-benar dalam keadaan kering. Dan keyboard siap untuk dirangkai kembali. Begini hasil akhirnya, sangat bersih dibanding sebelumnya.

Jika kita berselancar di dunia maya, kita sering menjumpai berbagai macam tipe file dokumen, seperti audio, picture, pdf, ppt, docx, dan lain sebagainya. Sebagai pelajar atau mahasiswa pasti sangat sering menemukan dokumen tersebut jika sedang mencari tugas di internet.

Orang-orang dapat menemukan file tersebut tidak lain karena sumbangsih dari  para author di Internet yang melakukan upload dokumen. Dokumen tersebut sejatinya hanya bisa di download, namun ada cara agar para penjelajah internet dapat menikmatnya tanpa harus melakukan download terlebih dahulu.

Nah, pada artikel ini, akan dibahas cara untuk menampilkan PDF tanpa JavaScript di Browser

Html Object element

Pada HTML, mungkin tidak banyak dari kita yang mengetahui sebuah element <object> , dengan adanya element <object> ini, kita dapat menanamkan (embed) file PDF yang kita miliki ke dalam HTML tanpa pustaka pihak ketiga. Caranya sangat mudah :

1. Pastikan kita sudah memiliki URL file pdf yang ingin ditampilkan.
2. Tambahkan attribute type dengan value application/pdf ke object element.
3. Tambahkan attribute data dengan value URL pdf yang ingin ditampilkan ke object element.
4. Set height and width sesuai keigininan.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding pdf</title>
  </head>
  <body>
    <h1>My pdf</h1>
    <object
      type="application/pdf"
      data="URL_pdf_yang_ingin_ditampilkan/sample.pdf"
      width="600"
      height="700"
    >
    </object>
  </body>
</html>

Output - Menampilkan Pdf tanpa JavaScript

Demo

Menurut statistik yang diambil dari https://gs.statcounter.com/browser-market-share, browser safari setidaknya memiliki 15% pengguna dari seluruh total pengguna internet. Angka 15% cukuplah besar, oleh karenanya kita perlu peduli melakukan testing website kita di safari agar kita memiliki gambaran bagaimana experience website kita di pengguna browser safari.

Apakah melakukan testing di Chrome Browser sudah cukup?

Tidak bro, kalau cuman di test di browser Chrome sangat tidak cukup. Kenapa perlu di test di browser safari? Selain jawabannya ada di paragraf diatas, yang harus kita ketahui adalah browser safari dan browser Chrome menggunakan Engine yang berbeda dalam merender sebuah web. Kira-kira seperti ini daftarnya:

Bagaimana cara instalasi Safari Browser di Linux?

Jadi yang perlu kita perhatikan adalah pada engine yang digunakan, karena safari menggunakan Webkit engine, dan safari tidak dapat di install di Linux, cara paling mudah yang dapat kita lakukan adalah menginstal browser yang menggunakan Webkit engine di Linux. Dan browser yang dapat di install bernama browser Gnome Web

Browser Gnome Web

Browser Gnome Web pada mulanya disebut dengan browser Epiphany hingga 2012. Gnome web sendiri adalah browser web gratis dan open-source berbasis WebKitGTK, yang dikembangkan oleh GNOME, dan ini adalah default browser untuk GNOME.

Cara installnya gampang banget, kalian tinggal menuju ke https://snapcraft.io/epiphany disana ada tombol installnya kok. ?

Segini dulu artikel dari saya, dan jika artikel ini dirasa membantu kalian, share ya,atau jika ada yang perlu saya koreksi, saya dengan senang hati menerima masukan. Terimakasih.

Saya masih inget beberapa tahun kebelakang, ingin rasanya buka Instagram di PC, namun sulit banget. Yang masih saya ingat adalah harus install BlueStack, Genymotion, dll. Semua itu serba repot.

Berkat teknologi web yang semakin canggih, mungkin kita pernah atau bahkan sering mendengar kata PWA atau singkatan dari Progressive Web Apps, singkat cerita teknologi Progressive Web Apps saat ini memungkinkan para developer Website untuk membawa experience yang ada di mobile apps kedalam sebuah web app. Dan salah satu keuntungan dari Progressive Web Apps sendiri adalah Installable.

Itu berarti memungkin pengguna untuk “menyimpan” Web App kedalam Home Screen device atau Komputer tanpa perlu repot-repot menggunakan App Store dan men-download dari sana. Dan saat ini Instagram sudah menerapkan hal tersebut.

Cara menggunakan Instagram di Komputer

Pertama kita buka Instagram.com di Browser, pada tutorial ini, mimin menggunakan Chrome Browser versi 76

Kedua kita buka developer tools, Gunakan pintasan keyboard Ctrl+Shift+I (Windows) atau Cmd+Opt+I (Mac)

Ketiga kalian harus mengaktifkan Toogle Device

Keempat kalian harus refresh browser kalian, dan tampilan instagram akan menjadi seperti dibawah ini, dan akan muncul sebuah popup dengan permintaan untuk menambahkan Instagram ke Home screen kalian.

Jika popup tersebut tidak muncul, pada address bar browser kalian dapat menekan tombol plus diatas. Setelah itu akan muncul sebuah request dari Chrome untuk melakukan install app, kalian konfirmasi dengen menekan tombol Install seperti dibawah ini:

Jika seluruh proses diatas berhasil, selamat Instagram dapat di akses melalui PC komputer kalian.