Apa Itu Front End Developer?

Apa itu frontend 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?

frontend vs backend

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

Front endBackend
HTML, CSS, JavaScript, dllPython, Golang, PHP, Ruby, dll.
AksesibilitasArsitektur Server
Cross Browser TestingSecurity
SEO implementationApplication Programmable Interface (API)A

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:

KelasKualifikasi Yang Harus Dilalui
Kelas 1HTML
CSS
JavaScript
jQuery Framework
Bootstrap Framework
Penggunaan GIT
Instalasi Web pada Hosting
Konfigurasi Domain, SSL
Kelas 2Package Manager (Yarn, NPM) *
Task runner (NPM Script, Gulp, dll) *
CSS Arsitektur (BEM, OOCS, SMACSS) *
CSS Preprocessor (SASS, PostCSS, LESS, dll) *
CSS Framework (Material UI, Reactstrap, Tailwind) *
Modern CSS (Styled-components, CSS Module) *
Linter dan Formatter (Prettier, ESlint)
Module Bundler (Webpack, Parcel, Rollup) *
Menggunakan Framework (React, VueJS, Angular, Svelte) *
Memahami state management (Redux, Mobx, Unistore) *
Kelas 3Memahami Testing (Unit test, Integration Test, Functional Test)
Menggunakan Testing Framework (Jest, Cypress, Enzyme, dll) *
Type checker (Typescript, Flow) *
Progressive Web Apps
Server Side Rendering
GraphQL
Static Site Generator
Mobile Apps (Javascript Framework) *
Desktop Application (Electron, Proton, dll) *
Web Assembly
Dll.

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

Frontend Developer Roadmap

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:

LevelGaji
JuniorRp 5.000.000 - Rp 7.500.00
MidRp. 7.500.000 - 15.000.000
SeniorLebih dari Rp. 15.000.000

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.

Macbook Pro

Macbook merupakan salah satu device yang banyak dimiliki oleh seorang software developer, designer, dll. Menurut saya pribadi, Macbook adalah perangkat komputer yang memberikan experience sangat baik dari segi performa, touchpad, layar retina, dan masih banyak hal lainnya yang mungkin juga dirasakan oleh para Apple Fanboy.

Bagi saya pribadi, kekurangan Macbook terletak pada harga yang ditawarkan. Untuk mendapatkan sebuah Macbook dengan layar Retina Display kita setidaknya harus mengeluarkan budget minimal 12juta rupiah. Untuk tipe terbaru Macbook Pro 16inch Retina Display di bandrol dengan harga paling murah 35juta rupiah. Harga yang menurut saya sangat fantastis alias mahal bagi saya yang memiliki pendapatan biasa-biasa saja ? .

Dibalik harganya yang mahal, layar retina display yang ciamik ini tidak lepas dari sebuah permasalahan yang cukup menjengkelkan. Masalah ini sebenarnya sudah muncul lama sekali, namun Apple belum juga memberikan solusi atau bahkan pengumuman yang kongkrit untuk masalah ini. Masalah tersebut terletak pada layarnya yang kerap mengalami staingate.

Apa itu Staingate?

Staingate adalah masalah yang terjadi pada layar retina di Macbook, permasalahan ini terletak pada coating layar yang sedikit demi sedikit terkikis, masalah ini muncul karena layar yang bersentuuhan dengan keyboard, atau muncul saat dilakukan pembersihkan layar dengan cara yang kurang tepat. Hal ini menyebabkan layar sangat tidak nyaman dilihat dan sangat mengganggu, apalagi bagi seorang desainer, ye kan? ? .

Staingate Pada Macbook

Jika teman-teman membuka google untuk mencari cara menghilangkan staingate, teman-teman akan menemukan beberapa cara untuk menghilangkannya, salah satunya dengan listerine mouth wash yang belum pernah saya coba tentunya. Saya sendiri pernah mengalami staingate, namun tidak begitu parah, hanya sekedar bercak tombol keyboard yang ada di layar Macbook, dan itu sangat mengganggu dan tidak dapat dihilangkan.

Bagaimana mencegah staingate pada Macbook ?

Pepatah diatas sering kali kita dengar, dan menurut saya, petatah ini juga berlaku pada kasus ini. Apabila Macbook yang kita miliki tidak mendapatkan fasilitas replacement layar secara gratis, kita setidaknya harus mengeluarkan budget minimal 6-7jt (Macbook Pro 2016) untuk mengganti layar retina, mahal banget kan? ?

Sebelum permasalahan itu terjadi dan saya harus keluar uang yang cukup banyak, saya inisiatif melindungi layar Macbook dengan cara paling murah, yaitu dengan memasang screen guard dengan harga kisara 50-100ribu saja.

Apa itu MDSB Skin Protector?

Sebenarnya di toko online sangat banyak pilihan screen protector, namun berdasar pada pengalaman, saya sering gagal saat melakukan pemasangan screen protector. So... daripada habis uang namun hasil kurang bagus, saya percayakan kepada seseorang yang udah jago dalam memasang screen protector, ini adalah foto saat proses pemasangan:

Pemasangan Screen Protector di Macbook

Akhirnya saya percayakan lagi ke MDSB Skin Protector di Hi-tech Mall Surabaya, ini kedua kalinya saya memasang screen protector untuk Macbook, pertama pada awal tahun 2017 lalu, dan yang kedua minggu kemarin.

Alasan saya mempercayakan ke MDSB Skin Protector tidak lain karena mereka cukup profesional dalam menangani screen protector, hasilnya sangat rapih, pokoknya bagus banget, dan ada pilihan dof maupun glossy. Ini adalah hasilnya:

Hasil Pemasangan Screen Protector untuk Melindungi Staingate Pada Macbook

Hasil Pemasangan Screen Protector untuk Melindungi Staingate Pada Macbook

Ada 2 pilihan screen protector, ada yang glossy dan dof, kebetulan saya pakai glossy, karena stocknya lagi nggak ada untuk tipe 15inch. ? Jadi sekian tulisan saya tentang staingate. Terimakasih teman-teman

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.

gambar dari keyboard mechanical

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

gambar dari keyboard membran

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.

keyboard arryanggaputra

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:

keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra

Alat Tempur Untuk Membersihkan Keyboard

  1. Kuas pembersih laptop
    kuas pembersih laptop
  2. Keypuller
    keypuller mechanical keyboard
  3. Cairan Pembersih Laptop
    keypuller mechanical keyboard
  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.
    keypuller mechanical keyboard

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.

merendam mechanical keyboard

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

membersihkan mechanical keyboard

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

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.

menjemur mechanical keyboard

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.

menjemur mechanical keyboard

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.

hasil membersihkan mechanical keyboard

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

Menampilkan PDF pada HTML tanpa JavaScript - 1

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:

https://en.wikipedia.org/wiki/Comparison_of_browser_engines

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.

Gnome web browser

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.