Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools

Alat Penting Untuk Alur Kerja Pembangunan Front-end Modern

by
Read Time:18 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Ketika Anda memikirkannya, frasa, "pembangunan front-end modern" adalah hal yang relatif baru! Jika dibandingkan dengan platform dan industri yang bersaing, web masih dalam tahap awal. Dikatakan demikian, seseorang hanya perlu membaca Twitter feed khusus pengembangan, atau mengatakan halo pada beberapa saluran IRC yang berlaku untuk menyadari betapa cepatnya teknik dan proses kami maju ke era modern dari pengembangan front-end.

Hand-code beberapa HTML (dalam semua topi, tentu saja), tambahkan sentuhan CSS sebaris, masukkan GIF animasi favorit Anda, dan selesai!

Sangat menyenangkan untuk bernostalgia kembali ke hari-hari, belum lama ini, ketika proses pembuatan situs web sederhana melibatkan sedikit lebih dari editor teks (mungkin bahkan Notepad), dan sedikit pemahaman HTML dan CSS. Bukan penggemar Internet Explorer 7? Nah saat itu, di akhir tahun sembilan puluhan, kita sedang memperdebatkan Internet Explorer 3, jika Anda bisa membayangkan! Meskipun ekosistem tidak sematang sekarang, prosesnya lebih sederhana. Hand-code beberapa HTML (dalam semua topi, tentu saja), tambahkan sentuhan CSS sebaris, masukkan GIF animasi favorit Anda, dan selesai! Unggah bad boy itu ke Geocities, dan tunggu sampai lalu lintas masuk!

Ahh, dulu memang lebih enak. Namun, untungnya, web telah sangat matang sejak saat itu. Bahkan, sebagai sebuah komunitas, kita telah menyetujui sejumlah besar praktik terbaik dan perkakas. Menggunakan kontrol versi untuk berkolaborasi dalam proyek sumber terbuka. Kita merangkul pengembangan berbasis tes untuk JavaScript (menggunakan alat, seperti Mocha dan Jasmine). Mencegah "menemukan kembali roda" -itus, dengan cara memanfaatkan upaya untuk berkontribusi pada pustaka yang sangat diuji, seperti jQuery. Kita telah membebaskan diri dari kode spageti yang tidak dapat diuji, dengan menginjili perlunya kerangka kerja khusus, seperti Backbone dan Ember. Kita bahkan telah menerapkan prinsip-prinsip pemrograman berorientasi objek ke CSS (OOCSS)! Ya, ladies and gentleman, ini waktu yang sangat baik untuk menjadi pengembang front-end!

Di lautan alat, pustaka, dan kerangka kerja, mana yang harus Anda gunakan?

Sementara semua ini mungkin tampak luar biasa pada awalnya (jangan khawatir, seharusnya, kita semua merasa seperti itu pada satu titik atau lainnya), masing-masing item yang tercantum di atas adalah prasyarat untuk membangun modern, aplikasi lintas-browser. Satu-satunya pertanyaan adalah: di lautan alat, pustaka, dan kerangka kerja, mana yang harus Anda gunakan? Atau, taruh lebih langsung, bagaimana Anda memisahkan software dari hal serupa? Artikel ini akan memberikan pendapat yang agak opini tentang alat apa yang harus Anda gunakan, bersama dengan beberapa alternatif untuk setiap kategori.


Editor

Mari kita begini: jika Anda tidak tahu seluk-beluk editor kode Anda, maka Anda melakukannya dengan salah. Jika Anda memegang posisi yang secara virtual memberi mandat delapan jam sehari kerja dalam satu editor kode (mari kita jujur; lebih dari itu), bukankah seharusnya Anda mendedikasikan sumber daya yang diperlukan untuk mengoptimalkan alur kerja Anda sebanyak mungkin? Bahkan pengurangan lima detik ke tugas dalam alur kerja harian Anda dapat menambah penghematan waktu yang signifikan, selama satu tahun.

Jika Anda sudah beristirahat dengan tenang di dalam editor yang sama selama sepuluh tahun terakhir, mungkin inilah waktunya untuk mempertimbangkan beberapa alternatif.

Sublime Text 3

Bahkan beberapa tahun yang lalu, Anda akan berjuang untuk menemukan pengembang yang tahu apa itu Sublime Text. Maju cepat untuk hari ini, dan itu mudah editor kode yang merupakan perubahan di industri. Alasannya sangat jelas; sementara para editor yang bersaing, seperti TextMate dan Coda, telah jatuh di pinggir jalan atau mengecewakan basis penggunanya dengan pembaruan yang sangat buruk, tim Sublime Text (terdiri dari satu orang, percaya atau tidak) memfokuskan sebagian besar upaya mereka pada aspek yang paling penting alur kerja pengembangan Anda: kecepatan. Dan, bocah lelaki itu sangat luhur. Dengan keystroke sederhana, Anda akan menemukan diri Anda beralih dari file ke file dengan kemudahan dan kecanggihan sedemikian rupa hingga Anda akan merasa ngeri memikirkan menjelajah secara manual melalui pohon file, seperti diri Anda sebelumnya.

Seperti kebanyakan hal dalam hidup, ada alasan untuk popularitas Sublime. Meskipun tidak gratis, itu editor kode terbaik yang tersedia saat ini. Periode.


"Ada alasan untuk popularitas Sublime."

LightTable

Jika Sublime Text menawarkan editor kode tradisional puncak, maka LightTable berharap untuk sepenuhnya merevolusi pengalaman pengkodean. Meskipun masih sangat dalam keadaan alfa, kemajuan sejauh ini sangat menjanjikan. Bayangkan memiliki kemampuan untuk mengevaluasi JavaScript Anda secara real time, tanpa harus meninggalkan editor. Tingkat umpan balik waktu nyata ini belum pernah terjadi sebelumnya. Gabungkan kecepatan dan konfigurabilitas Vim, dengan keanggunan yang kami harapkan dari aplikasi modern; LightTable menawarkan ini dan lainnya. Mungkinkah melampaui Teks Sublim di 2013? Kita harus menunggu dan melihat! Sampai saat itu, tetap awasi yang satu ini!


"Bisakah LightTable melampaui Teks Sublim di 2013? Kita harus menunggu dan melihat!"

WebStorm

Meskipun pasti ada gerakan menjauh dari IDE penuh dalam beberapa tahun terakhir, namun, banyak yang terus memperjuangkan manfaatnya. Untungnya, ada berbagai opsi untuk dipilih! Terutama, tim JetBrains telah melakukan pekerjaan luar biasa dalam beberapa tahun terakhir mempertahankan berbagai platform-spesifik IDE, termasuk WebStorm, PHPStorm, dan RubyMine.

Jika Anda adalah orang yang lebih menyukai IDE semacam itu, taruh penawaran JetBrains di bagian atas daftar "to review" Anda. Anda tidak akan kecewa.


"Jika Anda adalah orang yang lebih memilih IDE semacam itu, tempatkan penawaran JetBrains di bagian atas daftar" untuk ditinjau "."

Vim

Anda mungkin berpikir untuk diri sendiri, "mengapa Vim dimasukkan dalam daftar alat modern?" Sementara Vim, atau aslinya Vi, memang telah ada selama beberapa dekade, kebenarannya adalah bahwa ini adalah editor modern yang tetap dalam perkembangan aktif. Dalam hal kemampuan dan kecepatannya, sulit untuk mencapai Vim. Namun, ingatlah bahwa jika Anda memberinya kesempatan, Anda harus merencanakan pelatihan selama berbulan-bulan. Ini editor yang sangat sulit untuk digunakan. Namun, setelah Anda melakukan keybindings tersebut ke memori, Anda akan tak terhentikan!


"Vim adalah editor yang sangat sulit untuk digunakan."

Brackets

Brackets adalah unik karena itu adalah editor kode sumber terbuka yang dikembangkan oleh Adobe, yang membutuhkan HTML, CSS, dan JavaScript yang ekstrim: itu dibuat dengan teknologi itu! Akibatnya, selama Anda memiliki pemahaman yang relatif dasar tentang JavaScript, Anda sudah memiliki alat yang diperlukan untuk memperluas editor sesuai keinginan Anda. Pengembang front-end melakukan hal ini setiap hari, pada kenyataannya.

Meskipun masih membutuhkan beberapa polesan, Kurung sangat banyak dalam pengembangan aktif. Berharap untuk melihat yang satu ini memberikan Teks Sublime untuk uangnya tahun ini!


"Berharap untuk melihat Bracket memberikan Teks Sublimat sebuah lari untuk uangnya tahun ini!"


JavaScript Frameworks

Karena industri terus berkembang, kita mulai melihat adopsi metodologi baru secara luas untuk memberikan pengalaman yang sangat responsif di web: SPA, atau aplikasi web satu halaman. Sementara, di masa lalu, upaya yang ambisius ini akan membutuhkan kode luar biasa, untungnya, berkat berbagai kerangka kerja, prosesnya lebih mudah daripada sebelumnya! Alat-alat berikut akan memulai proses Anda.

Backbone

Saat ini jagoan berkuasa dari kerangka JavaScript (setidaknya, dalam hal popularitas), Backbone menyediakan struktur untuk kode jQuiz spageti jorok Anda!

Meskipun mungkin memerlukan sedikit pemikiran ulang, ketika datang ke pemahaman Anda tentang kerangka MVC (atau MV *) sisi klien (terutama, jika Anda datang dari kerangka sisi server, seperti Rails atau Laravel), sekali Anda sepenuhnya memahami hal-hal penting, Anda akan menemukan diri Anda menulis kode elegan yang bersih, modular, dan tepat ke bawah.

Berharap untuk kursus singkat di Backbone? Lihat Tuts+ Premium dan CodeSchool; mereka akan menyiapkan Anda dalam waktu singkat.


"Backbone menyediakan struktur untuk kode jQuilla spaghetti jQuery Anda!"

Ember.js

Ember adalah penerus spiritual untuk SproutCore, JavaScript framework kuat yang berusaha mengarahkan UI Cocoa ke web. Alasan untuk perubahan nama berasal dari fakta bahwa basis kode benar-benar ditulis ulang dari awal, dalam upaya untuk melepaskan diri dari sejumlah kode warisan dan cara berpikir yang salah.

Sebagaimana tim Ember menaruhnya, keberhasilan Backbone membuktikan kepada mereka bahwa komunitas pengembang memang menginginkan kemampuan untuk membangun aplikasi sisi klien yang responsif, namun, mereka juga memiliki pengalaman bertahun-tahun dalam menyusun UI kustom dengan HTML dan CSS. Upaya SproutCore untuk mengganti ini, yang mendukung UI Kakao-nya, bukanlah jalur yang benar.

Dari kegagalan ini datang Ember, sebuah framework baru yang mencetuskan jalannya melalui komunitas pengembangan pada kecepatan rekor. Jika Backbone tidak cukup sesuai dengan tagihan, pindah ke Ember.


"Jika Backbone tidak cukup sesuai dengan tagihan, pindah ke Ember."

AngularJS

Angular, dikembangkan dan didukung oleh Google, mengambil jalur yang berbeda, dengan menyediakan alat yang diperlukan Anda untuk memperluas kosakata HTML untuk aplikasi Anda, sesuai kebutuhan. Sementara beberapa orang merasa bahwa pengikatan data semacam ini membuat kode yang berantakan dan tidak terpisah, yang lain mendukung fleksibilitas dan kemudahan pengembangannya.

Seperti yang tim Angular katakan, HTML tidak dirancang untuk mengelola pandangan dinamis. Angular mengisi celah yang mencolok ini. Apa pendapatmu?


"HTML tidak dirancang untuk mengelola pandangan dinamis. Angular mengisi celah yang mencolok ini."

Knockout.js

Salah satu framework JavaScript modern asli, Knockout, yang mendahului Angular, juga, mendukung pendekatan pengikatan data untuk membangun aplikasi responsif dengan jumlah kode yang minimal.

Sementara, sekali lagi, banyak pengembang yang menentang pendekatan ini, tidak dapat disangkal bahwa itu memiliki kelebihannya. Apa yang mungkin membutuhkan ratusan baris kode di Backbone dapat diselesaikan dengan beberapa lusin di Knockout. Satu-satunya pertanyaan adalah: bisakah Anda tidur di malam hari, dengan semua data yang mengikat dalam HTML Anda? Tidak ada jawaban yang benar untuk pertanyaan ini. Hanya preferensi.


"Apa yang mungkin membutuhkan ratusan baris kode di Backbone dapat diselesaikan dengan beberapa lusin di Knockout."

Meteor

Meteor adalah JavaScript full-stack baru, diberdayakan oleh Node.js. Ini dijamin untuk merevolusi cara Anda mendekati menulis aplikasi web yang sangat responsif dan dinamis.

Bayangkan menulis seluruh aplikasi Anda hanya dengan JavaScript; bukan hanya sisi klien, tetapi juga lapisan persistensi! Dengan setiap API yang ditawarkan dalam satu bahasa, bayangkan kenyamanan dan fleksibilitas yang dapat disediakan!

Meskipun kerangka belum mencapai versi 1.0, selama pengembangan tetap aktif, Anda harus benar-benar menyelidiki pendekatan baru ini untuk menulis aplikasi.


"Bayangkan menulis seluruh aplikasi Anda hanya dengan JavaScript."

Mocha

Sebagaimana dicatat sebelumnya, dunia front-end telah sangat matang dalam setengah dekade terakhir. Pada satu titik, komunitas meringis pada meskipun menulis bahkan satu baris JavaScript. Maju cepat hari ini, dan tidak hanya ada gelombang perpustakaan dan kerangka kerja JavaScript yang nampaknya tak berujung, tetapi pengujian (dan bahkan pola TDD) telah mendorong ke depan dan tengah.

Sementara ada berbagai kerangka uji untuk dipilih, termasuk Jasmine dan QUnit, menurut pendapat penulis ini, bereksperimen dengan Mocha pertama, yang diciptakan oleh orang yang sama yang berada di belakang Stylus dan kerangka Express: TJ Holowaychuk.


"Mocha dibangun oleh orang yang sama yang berada di belakang Stylus dan kerangka Express: TJ Holowaychuk."


Preprocessors

Selama bertahun-tahun, masyarakat front-end diperdebatkan atas Apakah CSS preprocessing yang diperlukan. Bahasa adalah satu sederhana; Mengapa kita yang rumit itu? Untungnya, seiring berjalannya waktu, dan ketika tumpukan web semakin matang, mayoritas pengembang front-end memahami kenyataan bahwa, sampai bahasa itu sendiri, menjadi lebih matang, preprocessing adalah kebutuhan untuk semua situs web yang paling sepele. . Jangan khawatir: banyak dari kenyamanan preprocessor ini perlahan tetapi pasti bekerja dengan cara mereka ke dalam bahasa. Hal-hal ini membutuhkan waktu.

Sass

Sebagaimana dinyatakan dalam situs webnya, Sass membuat CSS menyenangkan lagi. Variabel, bersarang, mixin... Sass memiliki semuanya. Lebih penting lagi, jika tujuan Anda adalah untuk mempelajari preprocessor paling populer yang tersedia, serta berbagai kerangka kerja yang dibangun di atasnya, seperti Kompas, Sass harus menjadi pilihan Anda.

Sass bahkan dapat membentuk dirinya sendiri sesuai dengan kebutuhan Anda. Jika gaya indent-spesifik asli .sass Sintaks merasa asing bagi Anda, maka cukup beralih ke format alternatif .scss, dan lanjutkan menulis stylesheet Anda dengan cara yang sama yang telah Anda lakukan selama bertahun-tahun.

Kemungkinannya adalah, jika Anda bergabung dengan tim pengembangan dalam waktu dekat, Sass akan menjadi preprocessor pilihan mereka, dan salah satu yang akan diminta untuk Anda pelajari.


"Sass membuat CSS menyenangkan lagi."

LESS

Sebagian besar, Anda akan menemukan bahwa tiga preprocessor CSS paling populer, Sass, LESS, dan Stylus kurang lebih sama. Hanya perbedaan sintaks moderat yang memisahkan ketiganya. Di masa lalu, LESS telah menjadi pilihan yang lebih mudah didekati untuk desainer web, karena menawarkan sintaks seperti CSS yang dapat dibaca (sesuatu yang pada awalnya tidak ditawarkan Sass). Sebagai bonus tambahan, seseorang hanya perlu mengimpor satu file JavaScript untuk menikmati fleksibilitas stylesheet dinamis.


"Secara tradisional, LESS telah menarik lebih banyak bagi para desainer web daripada Sass."

Stylus

Sebagai pendatang baru, Stylus mungkin menawarkan fleksibilitas paling banyak dari ketiga preprocesor dalam daftar ini. Lebih memilih titik koma? Simpan. Benci menggunakan titik dua untuk memisahkan properti dan nilai? Hapus mereka! Kuncinya adalah fakta bahwa Stylus memberi Anda kemampuan untuk menyesuaikan stylesheet Anda sesuai keinginan Anda. Dapat dikonfigurasi dengan sebaik-baiknya!

Satu-satunya downside (dan yang signifikan, pada saat itu) adalah bahwa, karena usianya, kemungkinan besar bahwa anggota di tim pengembangan Anda, atau kontributor komunitas jika Anda mengembangkan aplikasi open source, kemungkinan besar belum akrab dengan Stylus.


"Konfigurasi yang terbaik."

CoffeeScript

CoffeeScript, seperti banyak orang katakan, membuat JavaScript bisa dikelola. Ini dimulai dengan menghapus bagian yang jelek. Titik koma? Hilang. Braces? Itu juga dibuang. Tanda kurung? Mari kita buat mereka opsional. Ini kemudian menyediakan sejumlah fitur, yang, untuk semua maksud dan tujuan, diterjemahkan menjadi gula sintaksis. Ruang lingkup leksikal, splats, array comprehension, CoffeeScript menawarkan semuanya, sementara akhirnya kompilasi ke JavaScript vanili.

Berkat peningkatan adopsi dan perbaikan pada peta sumber, banyak kelemahan untuk menggunakan preprocessor seperti itu dengan cepat menjadi non-isu. Jika Anda mempertanyakan kebutuhan untuk preprocessor lain, jangan takut; seperti Sass, banyak inovasi CoffeeScript akan diimplementasikan ke ECMAScript versi mendatang.


"CoffeeScript membuat JavaScript dapat dikelola."

TypeScript

Bagi mereka yang tidak bisa terhubung dengan sintaks RubyScript seperti biasa, TypeScript adalah alternatif yang sangat baik. Ini memungkinkan Anda untuk terus menulis dalam dialek JavaScript, sambil merangkul tambahan terbaru untuk ECMAScript 6. Mirip dengan CoffeeScript, pada akhirnya, kode Anda dikompilasi menjadi JavaScript sederhana yang dapat berjalan di browser.


"TypeScript memungkinkan Anda untuk terus menulis dalam dialek JavaScript, sambil merangkul tambahan terbaru ke ECMAScript 6."

CodeKit

CodeKit, dibuat oleh Bryan Jones yang selalu lucu, meledak ke dunia front-end pada tahun 2012, dan sekarang digunakan oleh situs-situs seperti BarackObama.com dan Engadget. Seperti steroid untuk pengembang web, ia menggabungkan berbagai kompiler, minifiers, dan optimasi ke dalam satu aplikasi Mac yang indah. Jika Terminal terasa seperti kotak hitam untuk Anda, membatasi kemampuan Anda untuk merangkul dan memanfaatkan preprocessor yang disebutkan sebelumnya, maka CodeKit adalah solusi Anda.


"CodeKit meledak ke dunia front-end pada 2012."

LiveReload

LiveReload sangat mirip dengan CodeKit. Bahkan, mengabaikan beberapa perbedaan UI, dan beberapa fitur unik CodeKit, kedua aplikasi akan memungkinkan Anda untuk mendapatkan dari titik A sampai Z, sehingga untuk berbicara.

Seperti CodeKit, LiveReload memungkinkan Anda untuk memantau sistem file untuk perubahan, dan melakukan pra-pemrosesan dan penyusunan yang diperlukan sebagai respons. Ini juga akan memperbarui browser secara otomatis setelah menyimpan setiap file.

Tidak seperti CodeKit, bagaimanapun, LiveReload tersedia untuk Mac dan Windows. Dalam terjemahan, jika Anda pengguna Windows, LiveReload adalah, secara default, satu-satunya pilihan Anda. Jangan khawatir; itu bagus!


"LiveReload tersedia untuk Mac dan Windows."


Libraries

Kemungkinannya adalah, sebelum keberhasilan jQuery, Anda melihat JavaScript dalam cahaya yang sama dengan Voldemort. Jangan mengucapkan namanya, dan hindari dengan segala cara. Meskipun jQuery bukanlah pustaka pertama yang menyediakan solusi untuk berbagai masalah lintas peramban yang ada pada saat itu, pada kenyataannya, pustaka pertama yang menawarkan solusi yang menarik bagi perancang front-end setiap hari. Sejak itu, tak terhitung pengembang yang telah mengikuti sesuai dengan perpustakaan mereka sendiri yang sangat baik.

jQuery

Apa yang perlu diperhatikan tentang jQuery yang belum pernah dikatakan? jQuery membuat JavaScript dapat didekati dan memicu generasi baru pengembang sisi klien yang antusias. Itu mungkin pujian terbesar yang bisa dibayarkan seseorang ke pustaka. Meskipun tentu saja bukan jawaban untuk setiap masalah, ketika harus memanipulasi DOM, tidak ada alat yang lebih baik.


"Saat memanipulasi DOM, tidak ada alat yang lebih baik."

Underscore

Pernahkah Anda merasa bahwa JavaScript tidak memiliki banyak fungsi asli yang jelas, seperti findpluck, atau shuffle? Jika demikian, Anda pasti tidak akan menjadi yang pertama. Untungnya, pustaka Underscore yang populer menyediakan fungsionalitas yang hilang ini. Anggap saja sebagai sabuk utilitas yang menawarkan beberapa lusin fungsi pembantu yang Anda akan, jika tidak, kode dari awal, seperti untuk setiap proyek baru.

Jika Anda menggunakan Backbone, maka Anda mungkin sudah akrab dengan Underscore, karena ini adalah ketergantungan yang keras dari framework.


"Pernahkah Anda merasa bahwa JavaScript tidak memiliki banyak fungsi asli yang jelas?"

D3

d3js.org
D3 adalah pustaka visualisasi data berbasis-JavaScript yang fantastis yang memungkinkan Anda untuk mengikat data ke DOM, dan kemudian melakukan transformasi ke dokumen. Untuk mempelajari lebih lanjut, lihat repositori GitHub D3 untuk galeri besar contoh untuk memvisualisasikan berbagai kumpulan data.


"D3 adalah pustaka visualisasi data berbasis JavaScript yang fantastis."


Tools dan Utilities

Setelah Anda mengoptimalkan alur kerja pengkodean Anda, dengan cepat menjadi jelas bahwa perkakas dan fungsi tambahan mungkin diperlukan. Alat-alat tersebut termasuk semuanya dari loader modul, untuk menguji runners.

RequireJS

Pada titik tertentu, Anda pasti akan mulai menarik diri dari ide untuk menumpuk semua JavaScript Anda dalam satu file. Ketika hari ini terjadi, Anda akan segera menemukan RequireJS, yang merupakan pemuat file/modul. Sayangnya, meskipun, beralih ke pendekatan modular untuk menulis JavaScript adalah proses yang lebih sulit daripada yang diharapkan. Setelah Anda memahami konsep AMD, Anda kemudian harus memecahkan kode logistik: bagaimana Anda menyiapkan RequireJS? Bagaimana dengan pustaka non-AMD? Bagaimana dengan manajemen ketergantungan? Bagaimana dengan konfigurasi dan optimasi? Benar, ada kurva belajar yang terlibat, tetapi itu benar-benar sepadan.


"RequireJS adalah loader modul paling populer yang tersedia saat ini."

Testem

Satu penghalang yang signifikan untuk pengujian adalah fakta sederhana yang kadang-kadang dapat mengambil banyak pengaturan untuk get up dan running. Semakin lama waktu yang dibutuhkan, semakin besar kemungkinan pengembang tidak akan repot-repot. Itu sebabnya Testem sangat fantastis; itu membuat pengujian semudah mungkin, dan yang lebih penting, menyenangkan!

Grunt

Pada intinya, Grunt adalah alat baris perintah berbasis tugas sederhana untuk membuat aplikasi JavaScript. Anggap saja sebagai alat yang dapat menjalankan berbagai operasi kecil, namun umum. Kompilasi, minifikasi, uji coba, penerapan - masing-masing dapat dan harus diotomatiskan. Dengan Grunt, proses yang panjang seperti ini dapat diterjemahkan ke dalam satu perintah tunggal.

Normalize

Kita semua pernah mengalaminya; situs web Anda ditampilkan dengan indah di Chrome dan Firefox, tetapi kemudian Anda melihatnya di Internet Explorer, dan sepakat dengan fakta bahwa Anda akan mendedikasikan beberapa jam berikutnya untuk mendukung lintas-browser.

Normalize membuat semua browser menjadikan elemen sebagai mode yang konsisten. Pernahkah Anda mengalami gangguan debugging inkonsistensi ketinggian tiga piksel, dari browser ke browser? Dengan Normalize, Anda tidak akan pernah berurusan dengan itu lagi!


"Normalize membuat semua browser membuat elemen dalam mode yang konsisten."

HTML5 Boilerplate

HTML5 Boilerplate adalah produk dari pengalaman bertahun-tahun dan mengutak-atik. Ini adalah kick-starter proyek utama, dan digunakan oleh perusahaan seperti Google, Microsoft, dan NASA. Bagian yang terbaiknya, bahkan jika Anda tidak pernah sepenuhnya merangkul proyek, tetap menjadi sumber yang fantastis, jika hanya untuk tujuan copy dan paste.


"Produk yang memiliki pengalaman dan mengutak-atik bertahun-tahun."

Twitter Bootstrap

Sementara dunia pengembangan sering memberitakan perlunya kode yang dapat digunakan kembali, kebenarannya adalah, ketika menyangkut CSS, saran ini, lebih sering daripada tidak, diabaikan. Berapa kali Anda menemukan diri Anda menulis gaya yang diperlukan untuk posting blog atau kotak pesan? Jika hanya seseorang yang akan memberikan paket bersih dengan komponen yang dapat digunakan kembali ini, kita dapat merancah aplikasi baru dengan kecepatan luar biasa!

Masukkan Bootstrap. Dikembangkan oleh tim di Twitter, Bootstrap menyediakan sejumlah besar komponen dan kelas (baik CSS dan JavaScript berbasis) untuk meminimalkan jumlah kode boilerplate yang harus ditulis untuk setiap proyek baru. Ini mencakup semuanya mulai dari stylesheet yang disetel ulang, hingga tombol cantik, ke kotak modal yang diaktifkan JavaScript. Khusus untuk non-desainer di antara kamu, Bootstrap adalah pilihan yang fantastis.


"Khusus untuk non-desainer di antara kalian, Bootstrap adalah pilihan yang fantastis."

Foundation 4

Jika Twitter Bootstrap tidak cukup menggelitik selera Anda, maka pilihan kedua Anda pastinya adalah Yayasan 4, oleh orang-orang di Zurb. Mirip dengan Bootstrap, Foundation menawarkan jaringan yang fleksibel, plugin JavaScript, dan berbagai komponen CSS untuk perancah cepat. Maksudnya adalah Anda tidak bisa salah dengan salah satu pilihan. Pada akhirnya, ia datang ke satu hal: preferensi pribadi. Yang mana yang terasa tepat untukmu?


"Jika Twitter Bootstrap tidak cukup menggelitik selera Anda, maka pilihan kedua Anda pastinya adalah Foundation 4."


Kesimpulan

Itu benar: ketika ekosistem kita matang, begitu juga kebutuhan untuk melanjutkan pendidikan dan percobaan dengan alat dan kerangka kerja terbaru. Tapi, hei, kita mendaftar untuk ini; tidak ada pertengkaran yang diijinkan! Kita memiliki kesempatan unik untuk menjadi, dalam skema besar hal-hal, kru pengembangan utama dalam inovasi paling revolusioner dalam sejarah: internet.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.