Membuat starter project dengan Next JS

https://www.freecodecamp.org/news/how-to-create-a-nextjs-starter-to-easily-bootstrap-a-new-react-app/

---

Latihan dasar membuat project React JS dengan membuat form sederhana dengan React Hooks

https://www.freecodecamp.org/news/beginner-react-project-build-basic-forms-using-react-hooks/

---

Membuat form Sign In yang bernanimasi dengan React dan CSS
https://dev.to/cooljasonmelton/build-this-cool-sign-in-form-with-react-and-css-10of
---

Latihan lengkap membuat aplikasi Todo List dengan MERN Stack

https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/

---

Membuat fungsi CRUD sederhana dengan Facebook Recoil

https://blog.logrocket.com/crud-with-facebook-recoil/

---

#nextjs #react #mern #nodejs #express #forms #hooks #recoil

Panduan lengkap belajar menggunakan Git Version Control

https://medium.com/front-end-weekly/complete-git-version-control-system-fb59f6163ea3

---

Cara menghapus branch di local dan remote server Git

https://www.techiediaries.com/delete-local-remote-git-branches/

#git #branch #guide

Contekan Cheatsheet panjang yang berisi panduan React JS dengan TypeScript

https://github.com/typescript-cheatsheets/react

#cheatsheet #react #typescript

Latihan panjang membuat konversi koordinat dan sebaliknya dan ditampilkan ke dalam peta Google Maps dengan Geocoding , menggunakan Vue JS, Firebase dan Maps Geocoding API

Video
https://www.youtube.com/watch?v=L6DhmAnq_IY

Latihan tertulis
https://medium.com/javascript-in-plain-english/address-geocoding-with-google-geocoding-api-vuejs-and-firebase-694c0922df52

—-

Latihan menggunakan Vue Formulate untuk membuat form generator di Vue JS
https://www.youtube.com/watch?v=XZF71ij463Y

—-

Latihan membuat Translator Bahasa dengan Vue JS dan AWS Amplify
https://www.youtube.com/watch?v=VVb_qQFqE4M

——

Latihan membuat aplikasi Todo List dengan Vue JS , Vuetify, VueFire, Firebase

https://www.youtube.com/watch?v=tkvQVt2sX7Y


#vue #maps #geocoding #firebase #vueformulate #form #generator #todolist #vuetify

Latihan berseri membuat aplikasi MEVN Stack bagian keenam

#6 Membuat Tampilan Form Input Reset Password di Vue Js dengan Vuetify https://youtu.be/Cmj-SbwnKYc

#mevn #vue #nodejs #express

Latihan sederhana membuat gRPC service dengan Node JS

https://medium.com/javascript-in-plain-english/building-a-grpc-service-with-node-js-370b576d3809

—-

Tips dan snippet kode dalam menggunakan MongoDB, Express JS, Socket IO , dan PostgreSQL

https://medium.com/javascript-in-plain-english/node-js-tips-mongodb-express-and-socket-io-and-postgres-afaf246b9fdd

—-

Beberapa tips yang baik dalam penggunaan Node JS Express JS .
https://medium.com/javascript-in-plain-english/node-js-best-practices-express-apps-8de9023402e4

Set environment NODE_ENV ke production
https://stackoverflow.com/questions/9198310/how-to-set-node-env-to-production-development-in-os-x

—-

#nodejs #grpc #snippet #express #socketio #redis #postgresql #env

Membuat Proxy di backend Node JS Express JS dengan Middleware http-proxy-middleware , untuk mengakses API dari backend web yang lain dan agar tidak terkena error Cross Origin CORS

https://davidwalsh.name/simple-node-js-proxy

#nodejs #cors #proxy

Cara membuat Import Alias di dalam aplikasi web Angular dan TypeScript

https://blog.bitsrc.io/short-typescript-import-paths-in-angular9-22ce34bd424d

---

Beberapa referensi UI Component untuk Angular

https://medium.com/javascript-in-plain-english/16-best-angular-ui-frameworks-d8e2f96a190

#angular #ui #component #alias #importAlias

Latihan menggunakan SVG Icons dan Sprites di Angular

https://dev.to/itnext/material-design-icons-font-vs-svg-and-how-to-use-svg-sprites-in-angular-4pch

---

Lazy Loading router di Angular untuk performa aplikasi yang lebih baik

https://dev.to/salimchemes/optimising-angular-performance-with-lazy-loading-and-quicklink-3j66

---

Sampel cara deploy aplikasi MEAN stack ke Amazon Web Service dengan Docker

https://dev.to/tgotwig/simple-mean-stack-deployment-by-aws-cloudformation-docker-nkp

---

Membuat Chart JS dengan data real-time di Angular

https://dev.to/bartoszgajda55/using-angular-and-chart-js-to-build-real-time-charts-1078

---

Library untuk membuat Progress Bar di Angular

https://dev.to/kken94/a-complete-angular-progress-bar-33ml

#angular #svg #icons #mean #lazyloading #progressBar

Contoh penggunaan JSON Stringify di Javascript dengan contoh kasusnya.

https://www.freecodecamp.org/news/parse-json-object-with-js-example/

---

Cara mengakses JSON Object yang parameter key nya menggunakan spasi.

https://fullstact.blogspot.com/2020/06/access-json-with-spaces-in-javascript.html

#json #space #stringify #key #value

Latihan membuat data pura-pura atau dummy data dengan Node JS dan Faker JS

https://dev.to/myogeshchavan97/how-to-generate-mock-data-within-seconds-using-node-js-2e4l

---

Membuat Mock data untuk GraphQL API dengan json-graphql-server library

https://blog.bitsrc.io/mock-graphql-apis-using-json-graphql-server-c1c6e5f7793

---

Cara melakukan web Scrapping dengan Cheerio pada suatu aplikasi web yang bersifat SSR / Server Side Rendered

https://dev.to/michaelburrows/scrape-sever-side-rendered-html-content-with-javascript-24bi

---

Cara konversi Callback ke bentuk Promise pada Node JS API

https://dev.to/gabrielrufino/converting-callbacks-to-promise-approach-on-node-js-2bn4

---

#nodejs #mockdata #fakerjs #cheerio #webscrapping #promise #callback

Panduan panjang tentang penggunaan Kubernetes untuk koordinator container Docker

https://www.freecodecamp.org/news/the-kubernetes-handbook/

---

Panduan panjang tentang penggunaan Docker Container

https://www.freecodecamp.org/news/the-docker-handbook/

---

Tips dan trik dalam menggunakan Docker di Node JS

https://dev.to/nodepractices/docker-best-practices-with-node-js-4ln4


#docker #kubernetes #tips #trick

Cara menambahkan GraphQL API ke dalam Nest JS dan Nx Workspace

https://dev.to/beeman/add-graphql-to-a-nestjs-api-in-a-nx-workspace-2p8n

---

Contoh penggunaan Sessions dan Authentication di Nest JS

https://dev.to/nestjs/authentication-and-sessions-for-mvc-apps-with-nestjs-55a4

---

Catatan rilis TypeScript versi 4.x

https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/

#nodejs #typescript #nestjs #nx #graphql

Latihan membuat tampilan untuk mobile web dengan Mint UI dan Vue JS

http://blog.logrocket.com/building-mobile-ui-using-mint-ui-vue-js/

---

Membuat visualisasi data dengan Vue JS dan D3 JS

https://blog.logrocket.com/data-visualization-with-vue-and-d3/

---

Cara membuat plugin untuk Vuex State Management

https://blog.logrocket.com/how-to-create-a-custom-vuex-plugin/

---

Tips struktur project dan design pattern Vue JS untuk aplikasi skala besar

https://blog.bitsrc.io/4-best-practices-for-large-scale-vue-js-projects-9a533450bdb2

---

Menambahkan rich text editor WYSIWG ke dalam aplikasi Nuxt JS

https://medium.com/js-dojo/how-to-add-rich-text-editor-in-nuxtjs-cfc3d1ee3ecf


#vue #d3 #chart #vuex #pattern #scaling #mobile #mintUI #nuxt #wysiwg

Berikut adalah contoh kerangka project untuk aplikasi web dengan JavaScript dan Node JS Express JS. Kerangka project ini biasa disebut boilerplate. Ada dua boilerplate yang dibuat yaitu boilerplate untuk aplikasi web front end dengan JavaScript modern , dan aplikasi web backend dengan Express JS Node JS .
-
Keduanya menggunakan fungsi Webpack, beberapa plugin Webpack pilihan, Babel, ES2015++ , dan fungsi bundling project untuk mode production.

-

Untuk boilerplate Express Node JS, ditambahkan juga logger Winston, mock data dengan Faker, Worker Thread untuk proses komputasi berat di backend, Clustering API, dan beberapa middleware pengaman dasar yang biasa dipakai untuk REST API.

-

Selengkapnya tentang boilerplate ini bisa cek di blog JS Indonesia ini.

https://medium.com/javascript-indonesia-community/kerangka-project-sederhana-untuk-javascript-node-js-backend-dan-front-end-4682d447a944

#nodejs #webpack #express #boilerplate

Memperkenalkan Sneaks API , daftar endpoint REST API untuk informasi sepatu Sneaker dari berbagai merek

https://github.com/druv5319/Sneaks-API


#api #rest #sneaker #shoe

Memperkenalkan Teleport, aplikasi testing API seperti Postman yang berbasis web dan menggunakan MERN Stack Node JS

https://dev.to/rajdeepc/building-teleport-an-alternative-to-postman-2c5i

---

Latihan membuat aplikasi Fullstack Javascript dengan Serverless , Node JS , React, dan GraphQL, kemudian deploy ke layanan Amazon Web Services AWS

https://dev.to/dabit3/full-stack-serverless-building-a-real-time-chat-app-with-graphql-cdk-appsync-and-react-1dbb

---

Latihan menggunakan React Hooks useState dan useEffect untuk Shopping Cart sederhana

https://dev.to/papasanto/build-a-react-hooks-shopping-cart-with-usestate-and-useeffect-39hk

#teleport #postman #mern #nodejs #express #react

Latihan panjang pengenalan CSS Grid untuk membuat layout tampilan

https://www.freecodecamp.org/news/intro-to-css-grid-layout/

#css #grid

Menggunakan ES Module di sisi browser dengan bantuan import Maps

https://blog.logrocket.com/es-modules-in-browsers-with-import-maps/

---

Latihan menggunakan ES Modules secara native browser

https://www.carlrippon.com/javascript-modules-in-2020/

---

Latihan membuat Javascript library dengan Webpack dan Babel

https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/

---

#esm #importMap #webpack #babel #library

Memperkenalkan Perf Track, layanan web untuk perbandingan performa framework Javascript berdasarkan sampel web yang tersedia

https://perf-track.web.app/

---

Optimasi performa aplikasi web dengan penggunaan media gambar WebP dan video WebM

https://blog.bitsrc.io/website-optimization-with-media-formats-such-as-webp-and-webm-1df43bd252d

#performance #perftrack #webp #webm

Beberapa snippets penting yang sering dipakai dalam operasi data di JavaScript, seperti :
maxItemOfArray , areAllEqual , averageOf , reverseString , sumOf , findAndReplace , RGBToHex , shuffle , removeFalseValues , removeDuplicatedValues , getTimeFromDate , capitalizeAllWords , isValidJSON , scrollToTop , isValidNumber, dst

https://medium.com/javascript-in-plain-english/18-useful-javascript-snippets-for-common-tasks-you-can-use-from-today-96fa03ce3df6

—-

Beberapa tips dalam penulisan JavaScript seperti menggunakan Promise reject pada fungsi Async Await, mematikan element Div dari interaksi mouse, mendapatkan koordinat dari click mouse di Canvas, dst
https://medium.com/javascript-in-plain-english/javascript-tips-disabling-divs-dynamic-script-elements-and-more-af9dcbf18ffb
—-

#snippets #tips