Halo gan...

Pada kesempatan (pertama) kali ini penulis mau coba list / share alat tempur apa aja yang disuka dipake / digunain di dunia web. Oh iya, karena sebagian kategori itu toolnya ada banyak, jadi yang dishare hanya tools2 yang sering dipake atau yang populer. Berikut daftar alat - alat tempur untuk web development :

BONUS : === keren !, main game sambil baca :v [link]http://zty.pe/?text=e041cb5f65d76caf[/link]

=================== FRONTEND DEVELOPER

------------------------------ 1. DASAR - DASAR FRONT END ------------------------------ - HTML - CSS - JAVASCRIPT - JQUERY

------------------------------ 2. CSS TOOLS ------------------------------ - CSS PREPROCESSORS : sering digunain oleh front-end developer, Dimana fungsinya agar kode CSS mudah dikembangkan atau dimodifikasi. Fungsi lainnya agar seorang pengembang gak perlu mengulang2 kode yg sama atau istilahnya DRY (Don’t Repeat Your Self). Belajar disini -> [link]https://sekolahkoding.com/kelas/sass-css-dengan-kekuatan-super[/link] --- Sass [link]http://sass-lang.com/[/link] --- Less [link]http://lesscss.org/[/link] --- Stylus [link]http://stylus-lang.com/[/link]

- FRAMEWORK CSS : Library untuk ngubah tampilan website jadi responsive, sesuai dibanyak device misalnya hp, tablet --- Bootstrap [link]http://www.bootstrap.com/[/link] *populer --- Foundation [link]http://foundation.zurb.com/[/link] --- Skeleton [link]http://getskeleton.com/[/link] --- Semantic Ui [link]http://semantic-ui.com/[/link] --- PureCSS [link]http://purecss.io/[/link] --- Gumby [link]http://www.gumbyframework.com/[/link]

------------------------------ 3. TASK RUNNERS : Fungsi utamanya untuk menjalankan beberapa tugas misalnya mengecilkan ukuran gambar, compile CSS dll sekaligus dengan sekali perintah. ------------------------------ - Grunt [link]http://gruntjs.com/[/link] - Gulp [link]http://gulpjs.com/[/link]

------------------------------------------------ 4. MVC JAVASCRIPT FRAMEWORKS ------------------------------------------------ - Angular.js [link]https://angularjs.org/[/link] *populer - Backbone.js [link]http://backbonejs.org/[/link] - React.js [link]https://facebook.github.io/react/[/link] - Ember.js [link]http://emberjs.com/[/link] - Vue.js [link]http://vuejs.org/[/link] ------------------------------------------------ UNIT TESTINGNYA - Mocha - Jasmine

--------------------------------- 5. LIBRARY JAVASCRIPT --------------------------------- - Drop.js : efek dropdown keren link : [link]http://github.hubspot.com/drop/docs/welcome/[/link] - Dynamics.js : tambahin efek animasi ke web agan dengan library ini !! link : [link]http://dynamicsjs.com/[/link] - Sticker.js : buat sticker keren link : [link]http://stickerjs.cmiscm.com/[/link] - Bespoke.js : efek presentasi (kayak ms power point) cocok buat porfolio kayaknya :D link : [link]http://markdalgleish.com/projects/bespoke.js/[/link] - skrollr : pingin buat web dengan efek parallax ? pake library ini cocok banget... link : [link]http://prinzhorn.github.io/skrollr/[/link]

=================== BACKEND

-------------------------------------------- 1. PEMROGRAMAN WEB : Ada banyak dan ada macam2 dan biasanya banyak yang pake PHP. *untuk yang tanda kurung adalah framework yg dipakenya -------------------------------------------- - C# (.net) - Phython (Django) - Java (Spring, Play) - PHP (Laravel, CodeIgniter, YiiFramework...) - Node.js (Express.js, Sails.js) - Ruby (Ruby On Rails, Sinatra)

----------------------------- 2. DATABASE : Untuk nyimpen data ----------------------------- - MySQL [link]https://www.mysql.com/[/link] - MariaDB (cloningan mysql) [link]https://mariadb.org/[/link] - MongoDB [link]https://www.mongodb.org/[/link] - PostgreSQL [link]http://www.postgresql.org/[/link] - Redis [link]http://redis.io/[/link] - SQLite [link]https://sqlite.org/[/link]

----------------------- 3. CHACHING ----------------------- - Nginx [link]https://nginx.org/[/link] - Apache [link]http://www.apache.org/[/link]


BACAAN/BLOG UNTUK WEB DEVELOPER ---------------------------------------------------------------------------------------- - Smashing Magazine [link]https://www.smashingmagazine.com/[/link] - Six Revisions [link]http://sixrevisions.com/[/link] - Coding Horror [link]https://blog.codinghorror.com/[/link] - Scoth.io [link]https://scotch.io/[/link] -------------------------- BAHASA INDONESIA -------------------------- - CodePolitan [link]https://www.codepolitan.com/[/link] *keren

KOMUNITAS UNTUK PARA WEB DEVELOPER ---------------------------------------------------------------------------------------- - Stack Overflow : lebih dari 4 jt programmer diseluruh dunia siap membantu agan2 yang kesusahan / stuck pas ngoding. [link]http://stackoverflow.com/[/link] *keren - Front-end Front : Komunitas yang khusus untuk front end developer, disini agan bisa share link2 penting masalah front end. [link]https://frontendfront.com/[/link] - Refind : Sama seperti front-end front. Cuma yang bedanya disini ada kategorinya, misalnya design, ux, programming dll. [link]https://refind.com/[/link] - Web Developer Forum : Disini agan bisa belajar gimana cara buat website dari html, css, js dan bisa saling bertanya antar member [link]http://www.webdeveloper.com/forum/[/link] - Sekolah Koding : Forum programming dari indonesia yang isinya tutorial pemrograman web. Fitur2 unik yang disediain diantaranya track/perjalanan, perpustakaan, mading, upacara, podcast, forum dll. [link]https://sekolahkoding.com[/link] *rekomendasi, keren, mantep

TOOL UNTUK TEST KECEPATAN WEBSITE : kecepatan website merupakan salah satu faktor penting untuk menjadikan website agan lebih baik dan lebih user friendly ---------------------------------------------------------------------------------------- - Google Page Speed : Website ini akan menganalisa website dan memberikan tips - tips penting dan apa yang harus diperbaiki. [link]https://developers.google.com/speed/pagespeed/insights/[/link] *keren - Pingdom : Salah tool terbaik untuk ngetest kecepatan / waktu loading pada sebuah website. [link]https://tools.pingdom.com/[/link] *keren - Web Page Test : Tool ini, akan membantu untuk ngetest performa website dengan berbagai macam pilihan lokasi. [link]https://www.webpagetest.org/[/link] - GTmetrix : sama seperti Google PageSpeed. Setelah di analisa websitenya, agan akan dikasih tau tips2 apa yang kurang dan yang harus dibenerin pada websitenya. [link]https://gtmetrix.com/[/link]

TOOL KOLABORASI ANTAR TEAM / DEVELOPER ---------------------------------------------------------------------------------------- - Slack : Aplikasi chatting untuk developer. [link]https://slack.com[/link] - trello : layanan untuk manajemen perencanaan / istilahnya To Do list. Tapi, kalo trello ini lebih keren lagi soalnya banyak fitur yg sangat memudahkan. [link]https://trello.com/[/link] *keren, mantep - glip : glip nyediain fitur chatting secara realtime dan terintegrasi. Fasilitas lainnya, video, sharing kalender dan masih banyak lagi.. [link]https://glip.com/[/link] - jira : dengan software ini, teman2 bisa merencanakan kerjaanya, melihat hasilnya dan kemudian melaunching / merilis hasilnya. [link]https://www.atlassian.com/software/jira[/link] - asana : sebuah tim bisa ngawasin project2nya, liat projectnya, bisa buat task2nya.. dll. [link]https://asana.com/[/link] *keren

TEMPAT SHARING CODING / MELAKUKAN EXPERIMENT ---------------------------------------------------------------------------------------- - JS Bin : Teman2 bisa melakukan experiment programming ataupun sharing coding. Disini ada HTML, CSS, JavaScript, Markdown, Jade dll. [link]http://jsbin.com/[/link] - JSfiddle : Tempat ngetest kode HTML, CSS ataupun Javascript dibrowser secara realtime [link]https://jsfiddle.net/[/link] - Codeshare : sharing koding agan dengan devoper lain secara realtime. [link]https://codeshare.io/[/link] - Codepen : tempat sharing koding ataupun cari inspirasi web. https://codepen.io/ *keren, mantep - Dabblet : Testing HTML ataupun CSS secara interaktif. [link]http://dabblet.com/[/link]

MARKDOWN EDITOR : sebuah tool untuk konversi dari TEXT ke HTML. Contoh2 website yang pake markdown diantaranya ada GitHub, StackOverflow dll :D. Informasi lebih lengkapnya bisa dilihat disini -> [link]http://daringfireball.net/projects/markdown/[/link]. Belajar sekarang !!! -> [link]https://sekolahkoding.com/kelas/belajar-markdown[/link] ---------------------------------------------------------------------------------------- - StackEdit : Editor online gratis untuk buat markdown. [link]https://stackedit.io/[/link] - Texts : text editor sederhana untuk markdown yang hanya tersedia pada Windows & Mac - Sublime Text : text editor populer ini ternyata punya fitur markdown. [link]https://www.sublimetext.com/[/link] - MarkdownPad : markdown untuk windows [link]http://markdownpad.com/[/link]

WEB YANG MENGAJARKAN KITA CARA KODING YANG BENAR & SESUAI STANDAR ---------------------------------------------------------------------------------------- - PHP : The Right Way [link]http://www.phptherightway.com/[/link] *ada banyak bahasa termasuk indonesia - JS : The Right Way [link]http://jstherightway.org/[/link] - HTML&CSS : The Right Way [link]http://htmlcsstherightway.org/[/link]

PACKAGE MANAGER : tools yang digunakan untuk menginstall package2 mau html, css, js ataupun php. Kegunaanya ? kalo misalkan teman2 ingin mendownload framework CSS sebut saja Bootstrap.. otomatis harus mengunjungi websitenya lalu download. Dengan package manager semuanya jadi dipermudah, misalkan untuk Frontend pakenya Bower.. tinggal ketik bower install bootstrap di command line dst... ---------------------------------------------------------------------------------------- - Bower : package manager untuk HTML, CSS dan Javascript [link]https://bower.io/[/link] - Npm : package manager untuk Javascript [link]https://www.npmjs.com/[/link] - Composer : package manager untuk PHP [link]https://getcomposer.org/[/link]

GIT : Untuk mengatur source code aplikasi. Salah satu contohnya, kalo source code teman2 error, dengan git teman2 bisa mengembalikan source code ke versi tertentu, ke tanggal tertentu dll. Untuk lebih detailnya, kesini aja -> [link]https://sekolahkoding.com/kelas/apa-itu-git[/link] ---------------------------------------------------------------------------------------- - Github [link]github.com[/link] - Bitbucket [link]https://bitbucket.org[/link] *ane pake ini - GitLab [link]https://about.gitlab.com/[/link]

TEXT EDITOR : Alat untuk ngoding ---------------------------------------------------------------------------------------- - Atom [link]https://atom.io/[/link] *keren - Brackets [link]http://brackets.io/[/link] - Notepad ++ [link]https://notepad-plus-plus.org/[/link] - Sublime Text [link]https://www.sublimetext.com/[/link] *keren - Vim [link]http://www.vim.org/[/link]

WEB SERVER LOCAL : Server untuk jalanin website di komputer secara offline ---------------------------------------------------------------------------------------- - XAMPP [link]https://www.apachefriends.org/index.html[/link] *populer - MAMP [link]https://www.mamp.info/en/[/link] - Wamp [link]http://www.wampserver.com/en/[/link] - Vagrant [link]https://www.vagrantup.com/[/link] - Laragon [link]https://laragon.org/[/link] - AMPPS [link]http://www.ampps.com/[/link]

ICON : Tempat nyari2 icon buat website ---------------------------------------------------------------------------------------- - Font Awesome [link]http://fontawesome.io/[/link] - Icon Finder [link]https://www.iconfinder.com/[/link] - Icons8 [link]https://icons8.com/[/link] - Flaticon [link]http://www.flaticon.com/[/link] - iconmonstr [link]http://iconmonstr.com/[/link]

CHROME EXTENSION ---------------------------------------------------------------------------------------- - Piktab deskripsi : extension yang menurut ane keren... saat nginstall extension ini, default Home Page agan bakal berubah menjadi Home Page yang banyak resource untuk desain web. Selain itu, bakalan muncul juga menu untuk cari icon, vector, sketch dengan mudah link : [link]https://chrome.google.com/webstore/detail/piktab/nkhjnpgcnmdpeikbeegmibjcfjpamjnp?hl=en[/link] - Page Ruler deskripsi : suka ane pake buat ngukur lebar layout website, satuan yang dipakenya PX. link : [link]https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en[/link] - Web Developer deskripsi : toolbar yang isinya tool web developer (berguna banget). Ada banyak pilihan, contohnya untuk disable javascript, disable css, Jadi, agan bisa ngedebug dengan cepat. link : [link]https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm[/link] - Window Resizer deskripsi : extensions untuk ngetest website di macam2 device dengan cepat. link : [link]https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en[/link] - Nimbus Screenshoot deskripsi : untuk ngambil gambar / screenshoot halaman web. Sebenernya ada banyak extensions buat screenshooot. Tapi kalo ane suka yang ini ! link : [link]https://chrome.google.com/webstore/detail/nimbus-screenshot-and-scr/bpconcjcammlapcogcnnelfmaeghhagj?hl=en[/link]

INSPIRASI DESAIN WEB : inspirasi desain kalo buat web, kalo misalkan bingung desain tampilan login, layout dll. ---------------------------------------------------------------------------------------- - Webdesign Inspiration [link]www.webdesign-inspiration.com[/link] - Codepen https://codepen.io/ \* mantep & keren - Dribbble https://dribbble.com/ - Template Monster http://www.templatemonster.com/ - Awwwards http://www.awwwards.com/

Mungkin itu aja dulu tulisannya, beberapa kategori akan penulis update. Kalo temen2 SK ada yang mau nambahin silahkan !

Semoga bermanfaat !!