Alur belajar lengkap pengembangan aplikasi web modern berbasis JavaScript dan Node JS, dan contoh contoh stack nya.

https://www.freecodecamp.org/news/how-to-learn-web-dev-in-2021-roadmap/

---

Jalur belajar pengembangan aplikasi web modern yang menggunakan JavaScript dan Node JS

https://medium.com/swlh/2021-js-fullstack-web-developer-roadmap-part1-d86ac51d5c39

---

Channel Codedamn merilis roadmap atau alur belajar menjadi fullstack web developer modern dengan teknologi berbasis Node JS dan JavaScript. Beberapa teknologi dan framework yang dipakai dapat dilihat pada tautan berikut

https://youtu.be/kYIDqbHlZtk

---

Prediksi perkembangan teknologi aplikasi web di tahun 2021 yang akan datang oleh Codedamn

https://youtu.be/RqSUZ3mn5kM

---

Latihan panjang dari Codedamn tentang pengenalan HTML dan konsep penggunaan CSS untuk mengatur tampilan element HTML

https://youtu.be/XhqEuyWjbdo

---

#roadmap #fullstack #nodejs #mern #mean #mevn #learning #guide

Tips penting menggunakan Media Query untuk kalkulasi skala ukuran element aplikasi web dengan mudah

https://www.freecodecamp.org/news/responsive-pages-and-color-themes-with-minimal-css/

---

Pengenalan parameter CSS Flexbox yaitu justify-content dengan beberapa nilai di dalamnya, seperti space between, center, flex end, dst

https://dev.to/adiatiayu/css-flexbox-justify-content-2ljk

---

Mengenal isi parameter CSS background dan beberapa nilai yang dapat ditambahkan ke dalamnya.

https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4

---

Membuat tombol like dan animasi nya yang berbentuk seperti hati dengan CSS

https://dev.to/uzomezu/just-css-css-like-button-animation-2ll6

---

Mengenal library yang bernama NES CSS, yang dapat membuat tampilan element seperti gaya Retro atau 8 bit

https://dev.to/redlotusdesignz/overview-of-the-nes-css-framework-4deh

---

Daftar build tools untuk CSS yang dirangkum dari survey State of CSS

https://levelup.gitconnected.com/5-css-build-tools-that-you-should-know-in-2021-d662ab4ffebd

---

#css #responsive #mediaquery #flexbox #background #tools #retro

Latihan membuat template atau layout email di Vue JS dengan bantuan MJML Tools Component

https://blog.logrocket.com/creating-responsive-emails-using-vue-js-and-mjml/

---

Mengenal reaktivitas di dalam parameter Vue JS dan cara mengatasinya

https://blog.logrocket.com/your-guide-to-reactivity-in-vue-js/

---

Latihan pengenalan Slots di Vue JS

https://blog.logrocket.com/a-deep-dive-into-vue-slots/

---

Latihan panjang membuat aplikasi web dengan Vue JS 3,TypeScript, Vuex, dan Composition API

https://soshace.com/building-web-apps-with-vue-3-composition-api-typescript-vuex4-0/

---

Mengakses data secara real time dengan Apollo GraphQL di aplikasi Vue JS

https://soshace.com/real-time-subscriptions-with-vue-and-graphql/

---

Deploy aplikasi Nuxt JS ke layanan Netlify Hosting

https://medium.com/javascript-in-plain-english/deploy-a-nuxtjs-application-to-netlify-9301099d0c28

#vue #reactivity #typescript #vuex #composition #graphql #apollo #netlify #email #mjml

Latihan panjang dan berseri, yaitu membuat aplikasi pemesanan makanan dengan Strapi CMS, Vue Gridsome, dan Snipcart

https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-6-6

---

Membuat aplikasi Nuxt JS dengan kombinasi Strapi CMS dan Tailwind CSS, kemudian deploy ke layanan Heroku Hosting

https://strapi.io/blog/how-i-hosted-my-strapi-cms-driven-website-for-free

---

Catatan rilis dari Headless CMS yaitu Strapi CMS versi 3.4

https://strapi.io/blog/product-updates-relational-fields-displayed-in-the-list-view

#strapi #vue #nuxt #cms #gridsome #foodOrdering #snipcart #jamstack

Latihan panjang dari Traversy Media membuat aplikasi web realtime dengan Node JS, Socket IO, dan Twitter API untuk memantau kicauan secara realtime

https://youtu.be/PjjjhGW4ceM

---

Panduan menggunakan Middleware di Express JS, dan beberapa Middleware penting yang sering digunakan di Express JS

https://blog.logrocket.com/express-middleware-a-complete-guide/

---

Menggunakan Puppeteer Headless Recorder untuk membuat unit testing tampilan aplikasi web

https://blog.logrocket.com/headless-recorder-browser-automation/

---

Latihan penting membuat dokumen PDF dari halaman Web HTML, dengan bantuan Puppeteer dan Playwright

https://dev.to/checkly/generating-pdfs-invoices-manuals-and-more-from-web-pages-using-puppeteer-playwright-3l07

---

Latihan membuat fungsi pengirim email dengan Node JS, Nodemailer, SMPTP Gmail, dan Oauth2

https://dev.to/chandrapantachhetri/sending-emails-securely-using-node-js-nodemailer-smtp-gmail-and-oauth2-g3a

---

Latihan berseri membuat aplikasi pemesanan makanan bagian pertama

https://dev.to/the22mastermind/online-food-ordering-app-1-594j

---

#nodejs #socketio #realtime #express #twitter #middleware #puppeteer #playwright #pdf #nodemailer #oauth2

Beberapa cara penting untuk membuat element menjadi ke tengah dengan menggunakan CSS

https://web.dev/centering-in-css/

#css #center #centering

Pengenalan Async Cookie Store API yang berguna untuk mengambil data Cookie dengan Promise / Async Await

https://blog.logrocket.com/the-async-cookie-store-api-a-new-treat-for-web-developers/

---

Daftar Course gratis dari Pluralsight untuk menyambut ulang tahun JavaScript ke 25

https://css-tricks.com/25-years-of-javascript-25-free-courses/

---

Daftar tips penting untuk manipulasi String pada JavaScript yang jarang diketahui

https://dev.to/kais_blog/10-awesome-javascript-string-tips-you-might-not-know-about-4ep2

---

Menambah gaya tampilan Console Log seperti halnya pada library Chalk JS

https://www.bennadel.com/blog/3942-styling-console-log-output-with-a-chalk-inspired-formatter-using-javascript-proxies.htm

---

#cookies #async #promise #chalk #console #log

Contoh penggunaan fungsi Flat Array dari JavaScript ES2019

https://www.samanthaming.com/tidbits/71-how-to-flatten-array-using-array-flat/

---

Tips penting untuk membuat salinan Object atau clone Object JavaScript

https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

---

Mengecek suatu variabel berbentuk Array atau bukan dengan isArray

https://medium.com/dailyjs/better-array-check-with-array-isarray-dae0283263be

---

Pengenalan Prototype Object dan Class di JavaScript

https://dev.to/waseemmansour/js-objects-prototypes-and-classes-simplified-4poa

---

#flat #flatten #isArray #object #clone #class #prototype

Cara menggunakan mode Progressive Web Apps PWA di aplikasi React

https://blog.logrocket.com/setting-up-a-pwa-with-service-workers-and-create-react-app/

---

Latihan bagian ketiga membuat aplikasi static PWA dengan React JS

https://itnext.io/react-static-pwa-tutorial-part-iii-ed91e0fa1d10

---

Latihan dan panduan panjang dalam bentuk handbook untuk pengenalan React JS dari Flavio Copes

https://www.freecodecamp.org/news/react-beginner-handbook/

---

Memperkenalkan Tldr React, aplikasi web yang berisi kumpulan pintasan kode atau snippet dan cheatsheet untuk penulisan React JS

https://tldreact.dev/

---

Latihan melakukan pengambilan data dengan Fetch API pada React JS

https://hackernoon.com/how-to-fetch-data-from-an-api-in-reactjs-j11q34k0

#react #pwa #serviceWorker #fetch #snippet #guide

Repository Github penting yang berisi daftar penulisan dan praktek terbaik (Best practices) untuk pengembangan aplikasi backend berbasis JavaScript dan Node JS

https://github.com/goldbergyoni/nodebestpractices

---

Cara melakukan debugging di dalam aplikasi Node JS dengan bantuan VS Code Debugger

https://hackernoon.com/introductory-guide-to-debug-nodejs-apps-with-built-in-or-vs-code-debugger-871u34cn

---

Latihan membuat REST API dengan Express JS dan database MySQL

https://medium.com/dailyjs/node-js-mysql-tutorial-a-step-by-step-getting-started-guide-with-express-js-rest-api-287858df4e8d

---

#nodejs #bestPractice #debugger #restApi #express

Cara melakukan perintah SSH dari backend Node JS ke VPS atau server lain, dengan Node SSH

https://medium.com/weekly-webtips/how-to-ssh-using-node-js-f41952afe1da

#ssh #nodejs

Daftar panjang referensi penting dalam belajar pengembangan aplikasi web modern

https://dev.to/rahxuls/free-ultimate-resources-for-front-end-development-in-2021-giveaway-3838

#guide #resource

Memperkenalkan Jotai, state management React JS yang bebas Redux

https://blog.bitsrc.io/redux-free-state-management-with-jotai-2c8f34a6a4a

#jotai #state #management #redux

Daftar design pattern atau anti pattern yang buruk dan perlu dihindari dalam penulisan kode

https://www.freecodecamp.org/news/antipatterns-to-avoid-in-code


#design #pattern

Mengenal apa itu Optional Chaining dari JavaScript Modern ES2020

https://dev.to/iamdarshshah/optional-chaining-in-javascript-28h3

---

Penerapan algoritma dan struktur data pada JavaScript ES2015

https://hackernoon.com/algorithms-and-data-structures-implemented-in-es6-javascript-h41w342t

---

Memahami cara kerja manajemen memori dan penggunaan memori pada JavaScript Engine v8

https://hackernoon.com/understanding-memory-management-in-javascript-wx2f31wx

---

Perbedaan antara event handler dan event listener di JavaScript

https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34

---

Memahami perbedaan setTimeout dan setInterval di JavaScript

https://levelup.gitconnected.com/understanding-javascript-settimeout-and-setinterval-75907b70dc1b

---

Pengenalan Strict Mode di JavaScript dan kenapa harus menggunakannya

https://hackernoon.com/why-do-we-need-strict-mode-fy1s31jj

---

Pengenalan Typed Array dan contoh penggunaannya di JavaScript

https://hackernoon.com/javascript-typed-arrays-beginners-guide-ld1x3136

---

Memahami apa itu Prototype di JavaScript dan contoh penggunaan Prototype Chaining

https://hackernoon.com/understanding-prototype-chain-and-inheritance-in-javascript-5c2w31oa

---

Latihan menggunakan Async Await dan Promise untuk proses asinkroknus di JavaScript

https://hackernoon.com/asynchronous-javascript-for-beginners-q11231ep

---

Memahami apa itu fungsi Array map, filter, dan reduce

https://medium.com/weekly-webtips/map-filter-and-reduce-in-javascript-728f2b9ace8

#es2020 #optionalChaining #prototype #strictMode #typedArray #eventListener

Beberapa cara untuk konversi nilai Number, Boolean, Object ke bentuk String JavaScript

https://www.samanthaming.com/tidbits/62-5-ways-to-convert-value-to-string/

---

Contekan cheatsheet penting dalam penggunaan Fetch API

https://www.freecodecamp.org/news/fetch-api-cheatsheet/

---

Latihan membuat AI game catur dengan JavaScript

https://dev.to/zeyu2001/build-a-simple-chess-ai-in-javascript-18eg

---

Latihan membuat AI yang tidak bisa dikalahkan pada game Tic Tac Toe dengan JavaScript

https://www.freecodecamp.org/news/minimax-algorithm-guide-how-to-create-an-unbeatable-ai/

---

Beberapa cara mencari element tertentu di dalam Array

https://medium.com/better-programming/5-methods-to-search-items-in-javascript-arrays-8e04cdd4448d

#string #game #ai #chess #tictactoe #fetch #array #search

Memperkenalkan Vue Use, repository Github yang berisi kurasi atau daftar plugin berbasis Composition API untuk Vue JS 3

https://github.com/antfu/vueuse

#vue #composition

Cara memasang Node JS dengan benar dengan Node Version Manager NVM, dan memperbarui ke NPM 7

https://medium.com/better-programming/use-nvm-to-manage-node-js-and-npm-versions-2bd0d0875f9f

---

Latihan membuat REST API sederhana dengan Express JS

https://dev.to/thisdotmedia/let-s-build-a-web-app-with-npm-and-express-2e1f

---

Contoh penggunaan Serverless Framework yang dikombinasikan dengan Webpack, Babel, dan Knex JS

https://dev.to/jamesingold/setting-up-a-serverless-project-with-webpack-babel-and-knex-346b

#nvm #nodejs #npm #express #serverless

Latihan panjang membuat aplikasi I web notifikasi harga saham atau Stock Price, dengan React JS, Apollo GraphQL, dan Hasura GraphQL engine

https://www.smashingmagazine.com/2020/12/stocks-price-notifier-app-react-apollo-graphql-hasura/

---

Latihan sederhana membuat REST API dengan bantuan Next JS

https://dev.to/noclat/build-a-full-api-with-next-js-1ke

---

Tips deploy aplikasi JAMStack Next JS ke Netlify CMS

https://dev.to/devbyrayray/how-to-build-and-deploy-a-jam-stack-website-fast-with-nextjs-in-5-steps-1kp2

#react #nextjs #graphql #apollo #jamstack

Daftar referensi untuk library JavaScript yang dipakai untuk menampilkan data Spreadsheet atau Excel

https://hackernoon.com/5-free-javascript-spreadsheet-libraries-in-2021-581r3zfn

#spreadsheet #library