Posts

Bahasa, Framework dan Tool yang harus Dipelajari Ditahun 2017

Perkembangan industri software akan terus berjalan kedepan tanpa henti. Pada tahun 2016 kita telah melihat rilisan terbaru dari bahasa pemrograman populer, framework dan tool-tool yang memberi kita lebih banyak kekuatan dan mengubah cara kita bekerja. Sulit untuk melacak segala sesuatu yang baru, sehingga sekarang kami telah merangkumnya yang bisa manbantu Anda dalam mempelajarinya selama dua belas bulan kedepan.

Tren

Progressive Web App

Pada tahun 2016 kami melihat munculnya konsep Progressive Web App. Ini merupakan aplikasi web yang bekerja secara offline dan memberikan yang asli, pengalaman seperti aplikasi. Progressive Web App dapat ditambahkan ke homescreen smart device Anda dan bahkan dapat mengirimkan pemberitahuan push, menjembatani kesenjangan dengan aplikasi mobile asli. Kami berfikir bahwa pada tahun 2017 PWA akan menjadi lebih penting dan layak dipelajari lagi.

Bot Hype

Semua orang sekarang membicarakan tentang bot. Dari platform untuk menjalankannya, framework untuk membuatnya, hingga komunitas pun membahasnya. Bot adalah aplikasi mobile baru, dan jika Anda bergegas Anda dapat menangkap gelombang sementara semua orang. Setelah mereda, bots mungkin akan diturunkan ke beberapa peran yang membosankan seperti customer support otomatis.

Konsolidasi frontend framework

Dalam komunitas JavaScript kita memiliki churn yang luar biasa dari framwork dan tool-tool, dengan yang baru seminggu lahir. Sebaliknya, kita melihat framework populer bertukar ide dan menggabungkan inovasi  yang diajukan oleh pendatang baru. Jadi pada tahun 2017 tidak peduli banyaknya framework JS utama Anda pilih, fiturnya sebagian besar sebanding.

Cloud

Perusahaan dan developer dimana-mana merangkul “cloud”. Cloud merupakan infrastruktur komputer virtual yang tersedia pada permintaan dan sepenuhnya di konfigurasi dari panel kontrol. Tiga besar penyedia cloud AWS, Google Cloud dan Azure. Berkat mereka yang sedang berlangsung harga kompetisi telah jatuh, membawanya dalam anggaran perusahaan kecil dan develop individu. Mengakrabkan diri dengan alur kerja cloud akan menjadi investasi yang baik untuk 2017.

Machine Learning

Machine Learning (ML) telah meledak dipopularitas selama dua belas bulan terakhir. Dan pertandingan bersejarah  AlphaGo vs Lee Sedol pada bulan Maret, semakin meluas. Sistem smart komputer yang belajar dari data mentah, merevolusi cara kita berinteraksi dengan perangkat mobile kami. Oleh kelihatannya, ML akan menjadi faktor yang lebih besar pada tahun 2017.

languages

Bahasa

JavaScript terus melanjutkan kecepatan yang luar biasa dari inovasinya. Dikatalisasi oleh jadwal rilis cepat dari web browser, standar JS diperbarui setiap tahun. Edisi berikutnya ES2017, diharapkan akan selesai pada pertengahan 2017. Ini akan membawa fitur impian banyak developer JS – asyns/await untuk bekerja dengan fungsi asychronous. Dan terimakasih kepada Babel, Anda dapat menulis ES2017 di setiap browser bahkan hari ini.

TypeScript 2.1 dirilis pada akhir tahun 2016, membawa async/await untuk browser lama dan meningkatkan inferensi tipe. TypeScript merupakan bahasa diketik statis yang mengkompilasi ke JavaScript. Ia menambahkan fitur canggih seperti model OOP klasik dan optional  statis ketikan untuk membuat codebase besar lebih mudah untuk mempertahankan.  TypeScript adalah bahasa pilihan untuk menulis Angular 2 apps, dan kami menyarankan untuk mencobanya.

C# 7.0 diharapkan pada tahun 2017 akan meningkatkan bahasa sudah sangat baik. Microsoft mengejutkan semua orang ketika mereka memperkenalkan open source Visual Studio Kode Editor dan Net Core. Keduanya berjalan di Linux, Windows dan MacOS dan memungkinkan Anda untuk menulis aplikasi cepat dan performa di C#. Sebuah komunitas yang hidup membentuk sekitar kedua  tool ini, dan kami yakin ada tahun yang menarik didepannya.

Python 3.6 dirilis pada bulan Desember. Hal ini memperkuat tempatnya sebagai bahasa scripting pilihan untuk devs, IT pro dan ilmuwan. Sangat cocok untuk otomatisasi, development web, pembelajaran mesin dan komputasi ilmiah. Perpecahan  python 2/3 telah menjadi perjuangan sepanjang tahun bagi komunitas, tetapi hari ini Anda dapat yakin memilih 3 dan menikmati dukungan library penuh. Bagi mereka yang membutuhkan kinerja ekstra, mereka dapat kita lihat PyPy, sebuah JIT alternatif yang diaktifkan Python runtime.

Ruby 2.3. dirilis tahun ini dengan beberapa perbaikan kinerja. Ruby juga merupakan pilihan yang baik sebagai bahasa tujuan scripting umum, tapi akan bagus ketika dipasangkan dengan Rails. Ruby 3×3 inisiatif diumumkan, yang akan mencoba untuk membuat ruby rilis 3 kali 3 lebih cepat bahwa versi saat ini, membuka pintu untuk menggunakan ruby dalam konteks yang lebih.

PHP 7.1 dirilis pada bulan Desember dan membawa tambahan kecil untuk bahasanya. PHP dibangun berdasarkan perbaikan kinerja utama pada versi 7.0 tahun lalu, mengubah PHP menjadi sebuah platform yang cepat untuk membangun aplikasi web. Kami merekomendasikan PHP The Right Way untuk praktek yang baik dan modern dalam mengambil atau membangun aplikasi web dalam bahasa pemrograman.

Java 9 diharapkan pada tahun 2017 dan akan datang dengan fitur baru seperti repl untuk mengevaluasi kode support HTTP 2.0 dan API baru. Ada permintaan yang kuat untuk pengembang Java berbakat dan luasnya proyek menarik menggunakan bahasa tersebut. Jika Java bukan hal yang membuat Anda tertarik ada sejumlah bahasa berdasarkan JVM seperti Kotlin dan Scala yang dapat Anda Check.

Swift 3 dirilis awal tahun ini. Ini adalah visi Apple untuk bahasa pemrograman modern yang memudahkan development aplikasi di iOS dan MacOS. Swift bersifat open source dan telah menarik komunitas besar. Versi 4 direncanakan untuk 2017, yang akan meningkatkan bahasa dan memperkenalkan API Server, menjadikannya pilihan yang baik untuk menulis aplikasi web dan backend.

Jika Anda mencari sesuatu yang lebih menarik, Anda dapat mencoba Crystal dan Elixir, yang keduanya menggabungkan sintaks ruby seperti friendly dengan kinerja yang unggul. Atau Anda dapat melihat kedalam bahasa fungsional seperti Haskell atau Clojure. Dua bahasa bagus lainnya Rust dan Go yang kami sarankan.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu JS (ES2017), naskah, C#, Python, Ruby, PHP7, Java/Kotlin/Scala.

frontend

Frontend

Platform web membuat dua kemajuan besar baru-baru ini – Web Assembly dan Service Workers. Mereka membuka gerbang untuk aplikasi web yang cepat dan performan yang menjembatani kesenjangan dengan aplikasi dikompilasi asli. Pekerja layanan khususnya adalah teknologi yang memungkinkan untuk Progresif Web App dan membawa dukungan untuk Notifikasi pada platform web, dengan API lebih untuk diikuti dimasa depan.

Angular.js  dirilis tahun 2016. Framework ini didukung oleh Google dan sangat populer dengan perusahaan dan perusahaan besar. Ia memiliki beberapa fitur yang membuat segala sesuatu tentang tulisan dari web ke dekstop dan aplikasi mobile mungkin. Framework tersebut ditulis dalam TypeScript, yang juga merupakan bahasa yang direkomendasikan untuk menulis aplikasi ini. Ada banyak cara membaca, tapi kami pikir belajar Angular 2 tahun 2017 akan menjadi investasi yang baik.

Vue.js juga melihat rilis 2.0 tahun 2016. Vue.js meminjam ide-ide yang baik dari Angular, React dan Ember dan menempatkan mereka menjadi mudah untuk menggunakan paket. Hal ini juga cukup sedikit lebih ramping dan lebih cepat dari dua yang pertama. Kami sarankan Anda mencobanya di tahun ini.

Ember adalah pilihan lain yang solid untuk framework JavaScript. Mendukung binding data, auto-update template, komponen dan server-side rendering. Salah satu mandaat yang memiliki lebih dari pesaingnya, adalah bahwa hal itu lebih matang dan stabil. Perubahan memutuskan jauh lebih jarang dan nilai kompatibilitas mundur komunitas. Hal ini membuat pilihan framework yang baik untuk aplikasi berumur panjang.

Dua framework lain yang layak dilihat adalah Aurelia dan React. Ekosistem disekitar React telah berkembang jauh lebih rumit dalam setahun terakhir, sehingga sulit untuk merekomendasikan untuk pemula. Tapi devs berpengalaman dapat menggabungkan library dengan GraphQl, Relay, Flux dan Immutable.js menjadi solusi tumpukan penuh komprehensif.

Tidak ada kompilasi frontend akan lengkap tanpa menyebutkan Bootstrap. Versi 4 saat ini sedang dalam Alpha dan rilis diharapkan pada tahun 2017. Perubahan penting adalah komponen card dan grid flexbox, yang memodernisasi framework dan membuatnya lebih asyik untuk dikerjakan.

SASS dan LESS tetap menjadi dua preprocessor CSS yang paling populer saat ini. Meskipun vanilla CSS akhirnya mendapatkan dukungan untuk variabel, SASS dan LESS masih unggul dengan dukungan mereka untuk mixin, fungsi dan organisasi kode.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu Angular 2, Vue.js, Ember, Bootstrap, LESS/SASS

backend

Backend

Ada banyak pilihan untuk backend, semua datang ke preferensi Anda dari bahasa pemrograman atau kebutuhan kinerja tertentu. Tren yang sedang berlangsung dalam pengembangan web adalah logika bisnis untuk pindah dari backend, mengubah layer yang menjadi API yang dikonsumsi oleh frontend dan aplikasi mobile. Tapi full stack framework sederhana sering dan lebih cepat untuk mengembangkannya, dan masih merupakan pilihan yang valid untuk banyak aplikasi web.

Node.js adalah cara utama untuk menjalankan JS luar browser. Node.js menunjukan rilisan baru ditahun ini, yang meningkatkan kinerja dan menambahkan cakupan untuk seluruh ES6 spect. Node memiliki framework untuk membangun API cepat, server, aplikasi dekstop dan bahkan robot, dan komunitas yang luas menciptakan setiap jenis modul dibayangkan. Beberapa framework yang Anda mungkin ingin Anda lihat diantaranya : Express, Koa, Next, Nodal.

Php adalah bahasa web pertama dan terpenting dan memiliki banyak framework untuk dipilih. Berkat dokumentasi dan fitur yang sangat baik LARAVEL telah membentuk komunitas yang aktif. Zend framework versi 3 yang menandai upgrade besar untuk framework berorientasi bisnis. Symfony juga melihat banyak rilis baru ditahun ini. Menjadikannya pilihan yang lebih baik sebagai solusi full stack.

Untuk Ruby, framework Rails adalah pilihan utama. Versi 5.0 dirilis pada tahun 2016, membawa dukungan untuk Web Sockets, modus API dan banyak lagi. Sinatra juga merupakan pilihan yang baik untuk aplikasi kecil, dengan versi 2.0 diharapkan suatu waktu pada 2017.

Python memiliki full stack sendiri/ minimal framework combo dalam bentuk Django dan Flask. Django 1.10 dirilis pada bulan Agustus memperkenalkan pencarian teks penuh untuk Postgres dan layer middleware dirombak.

Ekosistem Java juga memiliki framework populer untuk dipilih. Play dan Spark dua pilihan yang solid dan sebagai bonusnya dapat digunakan dengan skala yang sama.

Untuk yang bersemangat ada juga Phoenix, yang ditulis dalam Elixir dan upaya untuk menjadi alternatif fitur yang lengkap untuk Rails dengan kinerja yang unggul. Jika Elixir adalah salah satu bahasa yang Anda ingin pelajari di tahun 2017, maka coba Phoenix.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu full stack framework backend, framework  mikro.

databases

Database

PostgreSQL dua versi telah rilis ditahun 2016 yaitu 9.5 dan 9.6. yang membawa fungsi UPSERT lama dinanti yang perlu kita tahu dari MySQL (ON DUPLICATE KEY UPDATE) baik pencarian full teks dan peningkatan kecepatan karena query paralel, replikasi lebih efisien, agregasi, pengindeksan dan sorting. Postgres digunakan untuk besaran, dataset skala terabyte, serta untuk busy aplikasi web, dan optimasi ini dipersilakan.

MySQL 8.0 akan dirilis berikutnya banyak di database. Diharapkan kadang-kadang ditahun 2017 dan itu akan membawa banyak perbaikan sistem. MySQL masih menjadi sistem manajemen database yang paling populer dan banyak industri yang memanfaatkannya dari rilisan terbarunya.

Bagi penggemar NoSQL, kami merekomendasikan CouchDB. CouchDB merupakan sistem penyimpanan JSON cepat dan terukur yang mengekspos REST-ful HTTP API. Database mudah digunakan dan menawarkan kinerja yang hebat. PouchDB merupakan mitra spiritual untuk CouchDB yang bekerja sepenuhnya dalam browser dan dapat sinkron dengan Couch. Hal ini memungkinkan Anda untuk menggunakan Pouch di offline siap aplikasi web, dan sinkronisasi otomatis setelah konektivitas internet tersedia.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu Postgres, MySQL, CouchDB, Redis

tools

Tool

Yarn adalah manajer paket untuk node.js yang dikembangkan oleh Facebook. Yarn merupakan upgrade atas tool bar perintah npm dan menyediakan installer lebih cepat, keamanan yang lebih baik dan membangun deterministik. Masih menggunakan npm paket registrasi sebagai backend, sehingga Anda memiliki akses ke ekosistem yang luar biasa yang sama dari modul javaScript. Yarn kompatibel dengan format package.json bahwa npm penggunaan, dan hanya menginstal cepat.

Dua open source code editor yang paling populer – Visual Studio Code dan atom telah melihat jumlah yang luar biasa dari inovasi dalam 12 bulan terakhir. Kedua proyek ini dibangun dengan menggunakan teknologi web dan telah menarik komunitas besar yang menggemarinya. Setiap editor memiliki plugin yang tersedia yang memeriksa sintaks, linting dan refaktoring tool untuk beberapa bahasa.

Git adalah sistem kontrol versi source code yang paling populer diluar sana. Hal ini serverless dan Anda dapat mengubah folder dikomputer Anda ke repositori. Jika Anda ingin share kode, Anda memiliki banyak pilihan seperti GitLab, Bitbucket dan Github untuk beberapa nama. Untuk 2017 kami menyarankan Anda membiasakan diri dengan baris perintah git, karena akan berguna lebih dari yang Anda pikirkan.

Aplikasi dekstop belum mati. Meskipun aplikasi web menjadi lebih banyak dan lebih mumpuni, kadang-kadang Anda perlu kemampuan yang kuat dan API yang hanya tidak tersedia untuk platform web. Dengan tool-tool seperti Electron dan NW.js Anda dapat menulis aplikasi dekstop dengan menggunakan teknologi web. Anda dapat akses penuh ke sistem  operasi dan luasnya modul yang tersedia untuk npm.

Sebuah tren baru-baru ini dalam organisai tim software yakni memiliki developer yang bertanggungjawab atas penyebaran software mereka sendiri. Juga disebut DevOps, ini mengarah ke rilis lebih cepat dan perbaikan lebih cepat dari masalah dalam produksi. Developer dengan pengalaman operasi sangat dihargai perusahaan, sehingga keakraban dengan teknologi yang memungkinkan itu akan menjadi nilai tambah yang sangat besar dari sekarang. Beberapa tool yang kami sarankan adalah Ansible dan Docker. Pengalaman dengan baris perintah Linux dan keterampilan administrasi sistem dasar juga akan melayani Anda dengan baik.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu Yarn, Git, Visual Studio Code, Electron, Ansible, Docker.

tech

Teknologi

Cloud telah memenangkan lebih dari seluruh industri software, dengan perusahaan besar menutup pusat datanya dan memindahkan seluruh infrastrukturnya disana. Tiga platform utama adalah AWS, Google Cloud dan Azure.  Ketiganya bagus, pernah memperluas set fitur, termasuk mesin virtual, database host, layanan pembelajaran mesin dan banyak lagi. Harga akan turun dengan cepat dan cloud berada dalam jangkauan perusahaan kecil dan pengembang individu. Untuk 2017, itu akan menjadi pengalaman belajar yang baik untuk menyebarkan proyek sampingan ke salah satu penyedia layanan ini.

Artificial inteligence adalah kata kunci 2016. Pidato pengakuan dan klasifikasi citra hanya dua dari pengguna yang menghadapi aplikasi teknologi, dengan mesin dapat menjangkau bahkan melebihi tingkat kinerja manusia. Ada banyak startup yang berlaku AI dan Machine Learning untuk domain baru. Dan banyak proyek open source yang dirilis seperti Arus Tensor Google dan Toolkit Kognitif Microsoft. Machine Learning adalah topik matematika yang sangat berat, dan baginya yang baru memulai ada kursus online yang komprehensif yang tersedia.

Virtual Reality (VR) dan Augmented Reality (AR) telah ada untuk sementara waktu, tapi akhirnya teknologi ini cukup matang untuk menawarkan pengalaman yang menarik. Facebook (Oculus Rift), Google (Daydream) dan Microsoft (Windows Holographic) semua memiliki platform virtual reality yang menyambut pihak ketiga developer. VR headset masih menghadapi tantangan seperti menghilangkan kebosanan dan menawarkan kasus penggunaan menarik diluar game, tetapi mendapatkannya disana.

Pelajari salah satunya atau lebih beberapa diantaranya yaitu Cloud deployment, library machine learning, VR Development.

Prototyping di Browser: Tips dan Tool untuk Desainer

Tugas prototype web adalah sebuah proses yang luas untuk membuat gambaran rangka dasar dengan fitur interaktif. Sementara gambaran rangka dasar mungkin masih gambaran statis atau sketsa, prototype sering interaktif dengan fungsi untuk semua halaman utama.

Program editing grafis selalu menjadi pilihan yang paling populer untuk prototyping. Tapi dalam beberapa tahun terakhir lebih banyak pengembang (developer) yang beralih ke prototyping di browser. Hal ini jauh lebih cepat, lebih bersih dan sederhana ketika membangun merek proyek baru. Tapi bagaimana cara kita memulainya?

Dalam postingan ini kita akan membahas tentang dasar-dasar prototyping di browser dan info tentang tool untuk membantu Anda selama dalam proses tersebut.

Dasar-dasar dari Browser Prototyping

Website dapat digambarkan sebagai interface digital yang dibangun agar berjalan dalam web browser. Banyak desainer ingin membuat interface tersebut di editor grafis sebelum pindah ke coding.

Tapi itu lebih dimengerti bagi website prototype di browser untuk melihat bagaimana setiap fitur bekerja, dan untuk mengukur konsep awal seperti struktur layout dan animasi halaman.

Belum ada cara terbaik untuk prototype meskipun kebanyakan desainer memiliki rutinitas mereka sendiri untuk memulai sebuah proyek baru. Banyak desainer masih lebih suka untuk memulainya di Photoshop, tapi mulai dibrowser memiliki banyak keuntungan.

  • Mudah untuk menguji dan mengubah sistem grid
  • Breakpoints dapat ditambahkan sesuai keinginan
  • Efek dinamis seperti menu dropdown dapat diuji langsung
  • Anda mulai dengan basis kode kecil dan perlahan-lahan tambahkan lagi yang lebih

Photoshop tidak memungkinkan Anda untuk secara dinamis berinteraksi dengan mockup. Hal ini juga berlaku untuk breakpoint responsif dimana Anda perlu untuk membuat dokumen individu atau kelompok layer breakpoint.

Pada akhirnya prototype browser adalah representasi yang lebih akurat dari interface akhir. Mockup dan sketsa yang datar dan statis. Ini masih merupakan aset berharga, tapi akhirnya Anda akan membutuhkan layout interaktif. Inilah sebabnya mengapa browser prototyping menghemat banyak waktu.

Anda dapat melompat langsung dari sketsa awal ke browser untuk membuat prototype web interaktif dengan semua fitur-fitur utama yang Anda butuhkan dalam versi akhir.

Tool yang digunakan untuk mencapai prototype akan sangat bervariasi. Tapi jangan mempersamakan tool dalam proses tersebut.

Anda dapat membuat prototype dalam browser menggunakan HTML/CSS dasar, library open source, atau tool lain seperti browser add-ons. Tidak peduli apa yang Anda gunakan tujuannya selalu sama: untuk membuat kerangka UI interaktif dengan model bagaimana situs akhir akan berjalan.

Proses Prototyping

Mungkin ini merupakan cara terbaik dengan memulai dengan sketsa kertas untuk melakukan rendering ide. Sketsa ini bisa dilakukan dalam program grafis, tetapi Anda pada umumnya memiliki lebih banyak kebebasan ketika bekerja di atas kertas.

Dengan cepat beralih ide-ide baru dan hanya mendapatkan nuansa kasar untuk desain. Anda bisa menandakan kolom, gutter dan membuat catatan tertulis untuk menggambarkan properti container (width, padding, dll)

01-sketches-wireframe-design

Setelah sketsa terlihat baik Anda dapat pindah ke browser. Bertujuan untuk merancang layout grayscale dasar pertama. Hal ini dapat dilakukan dengan banyak sumber daya yang berbeda seperti Placehold.it yang menghasilkan gambar abu-abu dasar dari berbagai ukuran.

Dengan layout abu-abu sederhana Anda dapat lebih fokus pada grid, tipografi, spasi dan unsur-unsur dinamis seperti slideshow atau menu dropdown. Tujuan dari tahap ini adalah untuk merancang bagaimana layout harus berjalan tanpa terganggu oleh estetika.

02-placehold-it-webapp-images

Anda ingin meluruskan semua link potensial dengan browser bug dan breakpoints responsif. Mendapatkan layout keseluruhan dan fungsional di semua browser.

Dari sana Anda dapat dengan cepat menambahkan konten, gambar dan style terkait tanpa khawatir tentang gambaran yang lebih besar. Ini benar-benar strategi terbaik untuk prototyping di browser karena Anda berfokus pada unsur besar pertama.

Jika layout break di Firefox itu akan terlihat sama apakah Anda memiliki warna atau tidak. Tapi itu jauh lebih mudah untuk memperbaiki masalah layout saat Anda hanya mementingkan tata letak.

Setelah Anda memiliki prototype yang berfungsi penuh Anda akan memiliki waktu yang jauh lebih mudah untuk coding fitur tambahan seperti background, tile, icon dan fitur lainnya yang sejenis.

Ada banyak hal yang harus dipertimbangkan dalam tahap prototype ini. Setiap proyek akan memiliki tujuan sendiri, tapi disini adalah daftar singkat dari tujuan mempertimbangkan saat prototyping.

  • Apakah layout berjalan disemua browser utama?
  • Apakah ada cukup ruang putih diantara elemen?
  • Apakah semua elemen halaman dinamis berfungsi dengan baik?
  • Apakah Anda konfigurasi semua yang diperlukan breakpoint responsif?

Tool Browser Prototyping

Sangat penting untuk dicatat Anda benar-benar tidak memerlukan tool khusus atau library untuk membangun prototype browser. Anda dapat menulis HTML/CSS/JS kode secara umum dan mendapatkan prototype siap kerja dengan cepat.

Tapi ada begitu banyak library yang dapat menghemat waktu. jQuery adalah contoh library terbaik yang dapat membantu saat menulis JavaScript.

Anda seharusnya merasa bebas untuk menggunakan resource apapun yang Anda rasa nyaman. Tetapi jika Anda sedang mencari tool-tool baru kami sangat menyarankan opsi berikut. Semuanya benar-benar bebas dan super mudah untuk menambahkan ke tahap prototype.

Chrome Workspace

03-chrome-workspaces-devtools

Ada fitur mungil yang bagus di Google Chrome DevTool disebut Workspace. Ini merupakan direktori lokal pada disk Anda yang dapat diikat ke browser ketika editing.

Jika Anda membuat HTML/CSS prototype sederhana dan buka di chrome, Anda akan dapat mengedit pada panel DevTool. Dengan menciptakan Workspace, kamu bisa menyelamatkannya di browser suntingan lokal ke file di komputer Anda. Anda juga dapat membuat file baru dan menduplikasi kode lokal di Chrome.

Sebagian besar pengembang sudah menggunakan DevTool jadi hal ini merupakan cara bagus untuk membuat prototype dalam browser. Lihat tutorial singkat ini untuk setup workspace di Chrome.

Bootstrap

04-bootstrap-css-open-source

Setiap developer frontend harus tahu tentang library Bootstrap. Muncul dengan komponen pre-built dan class CSS untuk setiap elemen halaman dapat Anda bayangkan.

Anda akan mendapatkan button, column, tab widget tab, menu drop down dan banyak fitur situs umum lainnya. Tidak perlu untuk menulis sesuatu dari awal karena Bootstrap sudah mencakup semuanya.

Satu-satunya kelemahannya adalah karena sangat banyak website yang menggunakan Bootstrap akan menjadi agak membosankan. Jika Anda ingin menimpa Bootstrap dengan custom style Anda sendiri maka hal itu merupakan libarary prototyping besar.

Foundation

05-zurb-foundation-resource-prototyping

Salah satu pilihan yang sangat populer lainnya adalah ZURB Foundation. Menurut kami Foundation jauh lebih bersih dan sederhana daripada Bootstrap, hanya karena tidak memiliki banyak style default.

Foundation ini sangat mudah untuk ditimpa dengan style Anda sendiri untuk tombol, link dan widget. Bootstrap sering digunakan dalam proyek-proyek yang menggunakan style Bootstrap secara umum. Tapi Foundation begitu dasar dan Anda hampir harus menambahkan style custom.

Foundation merupakan framework yang powerfull yang datang dengan semua komponen utama yang sama seperti Bootstrap, tetapi tanpa style yang unik.

Pure CSS

06-pure-css-open-source-library

Framework CSS/JS lain yang kami rekomendasikan adalah Pure CSS. Open source seperti Foundation dan Bootstrap. Muncul dengan grid, tipografi, button, dan kompunen dinamis juga.

Mungkin Pure CSS ini merupakan campuran yang baik dari fungsi dan estetika. Hal ini jelas sederhana, tapi tepat untuk prototype apapun dan hanya menawarkan banyak fitur dalam satu library ringkas.

Handcraft

07-handcraft-prototyping-tool-extension

Berikut adalah add-on unik Google Chrome yang memungkinkan developer untuk menyimpan dan berbagi prototype online. Disebut Handcraft dan dapat didownload secara gratis di Chrome Web Store.

Setiap kali Anda sedang membangun prototype hal yang paling umum yaitu menulis semua kode secara lokal. Dengan Handcraft Anda dapat meyimpan prototype ini secara online dengan URL unik untuk mempercepat proses sharing dengan yang lain. Hal itu membuat pekerjaan Anda lebih mudah ketika berkolaborasi dengan klien atau anggota tim kreatif Anda.

Kesimpulan

Cara terbaik untuk memulai dengan prototyping browser hanya perlu berlatih. Apakah Anda memiliki proyek mendatang atau jika Anda perlu untuk membuat sesuatu hanya memulainya dan rajin berlatih browser prototyping

Awalnya merasa aneh tetapi dari waktu ke waktu dapat membuat proses building yang lebih sederhana. Dan jika Anda bekerja dengan salah satu source diatas dijamin Anda akan terkesan seberapa cepat Anda dapat mengembangkan layout dari awal. Semoga bermanfaat jangan lupa sharing yah

Tool dan Service Web Desain Responsif

Web desain responsif adalah pendekatan besar yang memungkinkan pengguna untuk merasakan dan mengalami keindahan merancang resolusi tinggi, bahkan dalam aplikasi pocket mereka seperti smartphone dan tablet komputer. Melihat kembali beberapa tahun lalu dan Anda bisa menilai perubahan-perubahan yang terjadi di sayap mendesain web. Para desainer terikat untuk membuat versi yang kompatibel tidak hanya untuk dekstop resolusi tinggi, tetapi juga cocok untuk layar rendah dengan resolusi apapun. Desainer berterimakasih kepada tool dan service web desain responsif yang selalu ada untuk membuatnya dengan perbedaan dan memuaskan klien dalam arti sebenarnya.

Ada tool web desain responsif tertentu dengan fungsi yang berbeda yang mampu mendeteksi media dimana situs yang sedang dijalankan dan untuk menyediakan pengguna dengan produktivitas terbaik sementara membuatnya sempurna dibaca dan membantu user untuk menavigasi melalui situs. Tujuan untuk menggunakan teknik yang berbeda adalah membuat desain dengan kemampuan yang menyesuaikan gadget hi-tech yang akan datang, tidak peduli seberapa canggihnya.

Ketika saatnya untuk membicarakan tentang tool web desain responsif, materi yang membuat perbedaan antara merancang tradisional dan mendesain web responsif ini teknik yang digunakan untuk membuat desain responsif. Tidak seperti gaya lebar tetap, desain responsif menggunakan grid fleksibel yang mudah cocok dengan resolusi layar. Jadi sekarang saatnya untuk menghapus rumus width dan memilih pada grid fleksibel yang memungkinkan unsur-unsur untuk dapat mengatur ulang dan mengubah ukuran according sesuai dengan resolusi layar. Layout liquid adalah pilihan lain yang tersedia, tetapi mereka tidak seefektif grid fleksibel.

Konsep penting lain yang berkaitan dengan perancangan web responsif adalah faktor resolusi layar. Hal ini sudah dikatakan bahwa tujuan dari perancangan ini adalah untuk mencocokan dengan resolusi layar, tetapi sering kali tampaknya penting untuk mengkover setiap kemungkinan resolusi, itu tidak mudah untuk melayani, menggunakan grid fleksibel saja. Resolusi yang paling dikagumi adalah 1024×768, seperti ipad yang menggunakan resolusi yang sama. Pada saat yang sama, sebagian besar monitor juga digunakan dibawah resolusi yang sama. Oleh karena itu sebagai seorang desainer Anda harus memodifikasi grid fleksibel dengan cara yang dapat dengan mudah melayani tujuan pengunjung maksimum. Juga, sekarang Anda dapat menguji situs Anda menggunakan mobile test.

Tool dan Service Web Desain Responsif

Adaptive Image di HTML

118

Sebuah solusi drop-in yang secara otomatis membuat, mengolah dan memberikan versi perangkat yang sesuai gambar website Anda. Tidak ada perubahan mark-up yang diperlukan. Adaptif Image dimaksudkan untuk digunakan dengan desain responsif yang dikombinasikan dengan teknik gambar fluid.

Responsive Twenty Ten

218

Kami telah mengambil tema anak dan telah membuat sebuah plugin untuk tema Twenty Ten Anda! Jadi, jika Anda memiliki anak Twenty Ten dan ingin menjadi responsif, hanya menggunakan plugin ini.

Sencha.io

318

Layanan aplikasi yang memungkinkan Anda memberikan gambar dan data ke perangkat mobile lebih cepat dan biaya lebih efektif. Sencha.io adalah Src & Sync, satu set layanan cloud yang memungkinkan developer untuk mengoptimalkan pengiriman aset bergerak dan sinkronisasi offline dan rekan data.

Responsive Data Table

418

Dia memiliki point yang baik. Data tabel bisa sangat luas, dan selalu begitu. Sederet data tunggal perlu disimpan bersama-sama untuk masuk dalam sebuah tabel. Tabel dapat melenturkan lebar, tetapi hanya bisa menjadi begitu sempit sebelum mulai membungkus sel isinya tidak sesuai atau sekedar tidak bisa mendapatkan tabel terbatas.

Screenfly by QuickTool

56

Menguji situs web apapun dibanyak resolusi layar umum, termasuk monitor dekstop tablet, dan perangkat mobile yang lebih kecil.

Responsivepx

66

Masukan url ke situs Anda – lokal atau online: keduanya bekerja – dan menggunakan kontrol untuk mengatur lebar dan tinggi dari viewport Anda untuk menemukan lebar breakpoint yang tepat dalam pixel. Kemudian menggunakan informasi tersebut dalam media query untuk membuat desain responsif.

Responsive Web Desain Sketch Sheet

76

Jika wireframe desain Anda diatas kertas, Anda akan menemukan Responsif Web Desain Skecth Sheet sangat berguna. Ada beberapa yang berbeda layout Anda bisa mendownload secara gratis, yang masing-masing menunjukan beberapa viewport perangkat.

ProtoFluid

95

Pesatnya propotyping dari adaptive CSS dan desain responsif.

mediaQueryBookmarklet

105

mediaQuery bookmarklet memberikan representasi visual dari dimensi viewport saat ini dan yang paling baru dilepas media query.

PxtoEM

119

PxtoEM adalah konversi px em dibuat sederhana. Pilih ukuran body font Anda dalam pixel (px) dan keluar dengan pixel lengkap (px) ke tabel konversi em, membuat desain web elastis dengan CSS sekejap.

resizeMyBrowser

124

Tool sederhana, useful dan bagus aplikasi pengubah ukuran jendela browser untuk Web designer dan developer.

Responsive Design Testing

134

Pengujian desain responsif untuk umum.

Debugging CSS Media Query

144

Dalam desain web responsif kita bekerja dengan situasi yang berbeda, lebar dan ukuran viewport. Fluiditas dan perilaku adaptif merupakan subjek heboh saat ini, dan itu sangat dibenarkan ketika melihat mobile browser landscape saat ini. Kami melakukannya dengan CSS Media Query. Tapi kadang-kadang bisa berantakan – Kami akan berbagi tips cepat untuk menandakan (dengan CSS murni) media query yang benar-benar telah di keluarkan.

WebPutty

154

WebPutty memberikan Anda editor sintaks CSS Anda dapat menggunakannya dari mana saja, kekuatan SCSS dan kompas, side-by-side jendela preview, dan penerbitan instan dengan minifikasi, kompresi dan menyembunyikan control otomatis.

Skeleton

165

Skeleton merupakan koleksi kecil dari file CSS dan JS yang dapat membantu Anda dengan cepat mengembangkan situs yang terlihat cantik diberbagai ukuran, baik itu laptop layar 17” atau iPhone.

1140px CSS Grid System

174

1140 grid cocok dengan monitor 1280. Pada monitor yang lebih kecil menjadi fluid dan menyesuaikan dengan lebar browser. Melalui titik tertentu menggunakan media query untuk melayani hingga versi mobile, yang pada dasarnya susunan semua kolom diatas satu sama lain sehingga arus informasi masih masuk akal. Scrap 1024! Desain pada 1140 untuk 1280 dan dengan sangat sedikit pekerjaan tambahan, itu akan menyesuaikan dirinya untuk bekerja pada hampir setiap monitor, bahkan mobile.

Less Framework 4

184

Less Framework adalah sistem grid CSS untuk mendesain website adaptif. Less Framework berisi 4 layout dan 3 set preset tipografi, semua didasarkan pada grid tunggal.

FitText

204

FitText membuat ukuran font yang fleksibel. Menggunakan plugin ini pada fluid atau layout responsif Anda untuk skalabilitas pokok yang mengisi lebar dari elemen parent.