Latihan dari Web Dev Simplified tentang pengenalan event listener di JavaScript dan yang dipasang pada DOM Element

https://youtu.be/XF1_MlZ5l6M

---

Mengenal apa itu Functions, element yang sering dipakai di dalam JavaScript

https://dev.to/avinesh49/functions-the-bread-and-butter-of-javascript-programming-3jh6

---

Mengenal apa itu Class di JavaScript ES2015, dan hubungannya dengan Prototype Inheritance JavaScript

https://levelup.gitconnected.com/prototypal-inheritance-the-big-secret-behind-classes-in-javascript-e7368e76e92a

#es6 #eventListener #functional #class #prototype

Membuat kustomisasi tampilan Form Input dan Text Area dengan CSS

https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/

---

Beberapa metode CSS untuk menambahkan garis batas atau border ke dalam element CSS

https://moderncss.dev/the-3-css-methods-for-adding-element-borders/

---

Beberapa kelebihan Tailwind CSS yang menarik untuk membuat desain aplikasi web

https://css-tricks.com/why-i-love-tailwind/

---

Membuat border atau garis batas dengan efek melengkung

https://dev.to/5t3ph/single-side-curved-border-with-css-box-shadow-50eo


#css #input #form #border #tailwind

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

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

#fullstack #roadmap

JavaScript Weekly 518
12/15/2020

• News The 'Import on Interaction' Pattern
• News The JavaScript Christmas Advent Calendar 2020
• News The Easiest Way to Monitor Node: Automatic Instrumentation
• News Get Ready to Up Your (Google) Apps Script
• News Deno 1.6 Released: You Can Now Build Executables
• News A Deep Dive Into Rome: Linting, Compiling, and Bundling
• News How to Create a 'Client-Serverless' JAMstack App with Netlify, Gatsby and Fauna
• News Breakpoints and console.log Is the Past, Time Travel Is the Future
• News Sticky Table Headers with React Hooks
• News 'No One Ever Got Fired for Choosing React'
• News How to Create a Favicon That Changes Automatically
• News Node.js + Express: An OpenTelemetry Deep Dive
• News A Chat with RedwoodJS's Tom Preston-Werner
• News From Callback Hell to Callback Heaven
• News The 'Async Disposer' Pattern in JavaScript
• News Electron React Boilerplate 2.0: A Foundation for Scalable Cross-Platform Apps
• News htmlparser2 6.0.0: A Forgiving HTML and XML Parser
• News Announcing Prisma Migrate Preview - Simplified Database Migrations
• News SiriWave: The Apple Siri Waveform Replicated in Pure JavaScript
• News eslint-config-prettier 7.0: Turns Off ESLint Rules That Might Conflict with Prettier
• News Software Developer (Austin, TX)
• News Senior Web Developer (Node/ReactJS) - Remote
• News Find Your Next Job Through Vettery


Tags: #weekly #nodejs
JavaScript Indonesia Community

Catatan rilis Firefox 84 dan beberapa fitur baru di dalamnya.

https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/

#firefox

Tips dari Samantha Ming tentang menambahkan element data dan manipulasi data di dalam Array dengan beberapa cara

https://www.samanthaming.com/tidbits/87-5-ways-to-append-item-to-array/

---

Contekan cheatsheet penting untuk melakukan manipulasi URL dengan bantuan window.location Object

https://www.samanthaming.com/tidbits/86-window-location-cheatsheet/

---

Latihan panjang menggunakan Promise API untuk resolve dan reject hasil pengolahan data

https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/

---

Pengukuran performa untuk setiap jenis looping Array di JavaScript

https://blog.bitsrc.io/measuring-performance-of-different-javascript-loop-types-c0e9b1d193ed

---

Latihan menggunakan Array.map untuk manipulasi data Array JavaScript

https://levelup.gitconnected.com/map-learning-javascripts-array-methods-by-building-them-32b4facb78c5

---

Menggabungkan dua Array dengan metode Array Destructuring

https://jsmates.com/blog/merging-many-arrays-using-array-destructuring

---

#es2015 #array #map #promise #windowLocation #location #merge #loop

Komparasi beberapa package manager seperti Yarn, PNPM, dan NPM

https://blog.logrocket.com/javascript-package-managers-compared/

---

Mengenal Package manager lain selain NPM yang memiliki beberapa kelebihan

https://blog.bitsrc.io/npm-clients-that-are-better-than-the-original-cd54ed0f5fe7

---

#packageManager #npm #yarn #pnpm

Menggunakan Composition API di dalam project Nuxt JS

https://blog.logrocket.com/handling-server-side-applications-with-nuxts-composition-api/

---

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

https://dev.to/strapi/build-a-jamstack-food-ordering-application-with-strapi-gridsome-and-snipcart-1-dlg
--
https://dev.to/strapi/build-a-jamstack-food-ordering-application-with-strapi-gridsome-and-snipcart-2-2don

---

Latihan dari channel Programming With Erik membuat aplikasi Vue sederhana yang terintegrasi dengan layanan AWS Amplify

https://youtu.be/Q70eWux2xpQ

#vue #nuxt #composition #aws #amplify #gridsome #strapi

Menggunakan Create React App CLI dengan Linaria CSS in JS library

https://medium.com/better-programming/create-react-app-with-linaria-9938b3b8e94

—-

Cara menggunakan Tailwind CSS versi 2.x ke dalam aplikasi Next JS

https://medium.com/better-programming/how-to-set-up-tailwind-css-v2-0-with-next-js-10-4a82c8f8caaa

#react #next #tailwind #cssInJS #linaria

Latihan penting dari Junior Developer Central tentang membuat offscreen navigation menu yang bersifat responsive ketika dibuka di layar smartphone

https://youtu.be/ZS3w5K0QtAA

---

Latihan ini merupakan kelanjutan dari latihan sebelumnya yaitu membuat Drop down menu yang bersifat responsive mobile

https://youtu.be/Wloh_n6M91Q

---

Latihan dari Online Tutorials membuat efek paralax yang mengikuti pergerakan kursor Mouse

https://youtu.be/-BexUIbuRp8

---

Latihan membuat efek Hamburger Menu dengan menggunakan CSS

https://dev.to/uzomezu/just-css-css-only-hamburger-nav-animation-h0a

---

#css #html #navigation #offscreen #dropdown #paralax #hamburger #menu

Beberapa artikel baru di Medium JavaScript Indonesia.

—-

Artikel yang ini saya tulis untuk pengenalan Worker Thread Pool, dan untuk bagi yang belum tau bahwa kini Node JS runtime sudah mendukung proses komputasi dan manipulasi data yang berat dan rumit.
-
Mengenal Proses Asinkronus dan Implementasi Worker Thread di Express JS
https://medium.com/javascript-indonesia-community/mengenal-proses-asinkronus-dan-implementasi-worker-thread-di-express-js-22b65fa351a4
—-

Setup Mongodb, Mongoose, Node.JS, Express dan JWT bagian 2–Mengenal ORM Model
https://medium.com/javascript-indonesia-community/setup-mongodb-mongoose-node-js-express-dan-jwt-bagian-2-mengenal-orm-model-100060ef4b41

—-

Membuat Restfull Api Menggunakan Express JS, ORM Sequelize dan MySQL Part 3: Login dan Register

https://medium.com/javascript-indonesia-community/membuat-restfull-api-menggunakan-express-js-orm-sequelize-dan-mysql-part-3-login-dan-register-7f3e42e4a42f

#nodejs #workerthread #async #await #worker #nodejs #express #sequilize #orm

Latihan memasang kustomisasi pada Terminal Linux dan Mac dengan Zsh, Oh My Zsh, dan Powerlevel10K

https://youtu.be/pUFbLQOQ50M

---

Contoh konfigurasi Terminal di MacOS dan Linux dengan menggunakan Zsh, OhMyZsh, dan Powerlevel10K

https://medium.com/weekly-webtips/my-terminal-setu-iterm2-zsh-powerlevel10k-f7101ffc72c2

---

Latihan menggunakan perintah terminal dan Bash script

https://dev.to/bobbyiliev/introduction-to-bash-scripting-5571

#zsh #terminal #powerlevel10k #bash

Tips mengamankan aplikasi backend web Node JS Express dengan Helmet JS middleware

https://wanago.io/2020/12/14/security-express-applications-helmet-middleware/

---

Contoh Stack teknologi aplikasi web berbasis Node JS yang dapat jadi referensi penggunaan.

https://dev.to/mjgs/robust-nodejs-deployment-architecture-5go6


---

#nodejs #express #helmet #architecture #stack

Latihan membuat backend REST API dengan Fastify JS

https://www.sitepoint.com/create-rest-api-fastify/

---

Membuat aplikasi Express JS dan MongoDb dan deploy ke layanan AWS Lambda dengan Github Actions

https://www.sitepoint.com/a-guide-to-serverless-deployment-with-express-and-mongodb/

---

Pengenalan database NoSQL dan penambahan data ke dalam kolom kolom relasi nya

https://blog.logrocket.com/nosql-wide-column-stores-demystified/

---

Memperkenalkan Nexus Schema, GraphQL Client yang dibuat oleh Prisma IO

https://www.prisma.io/blog/announcing-the-release-of-nexus-schema-v1-b5eno5g08d0b/

---

Mengambil data GraphQL dengan React Hooks SWR

https://hasura.io/blog/graphql-data-fetching-swr-react-hooks-hasura/

#nodejs #fastify #express #graphql #nexus #prisma

Video terbaru dari Kalle Hallden tentang penggunaan Linux yang sangat cocok untuk aktivitas programming dan software development, serta tips untuk migrasi dan belajar Linux.

https://youtu.be/otDOHt_Jges

---

Latihan menggunakan beberapa perintah dasar Bash Shell Linux yang biasa digunakan sehari hari

https://youtu.be/J2zquYPJbWY

---

Latihan memasang kustomisasi pada Terminal Linux dan Mac dengan Zsh, Oh My Zsh, dan Powerlevel10K

https://youtu.be/pUFbLQOQ50M

---

Contoh konfigurasi Terminal di MacOS dan Linux dengan menggunakan Zsh, OhMyZsh, dan Powerlevel10K

https://medium.com/weekly-webtips/my-terminal-setu-iterm2-zsh-powerlevel10k-f7101ffc72c2

---

Latihan menggunakan perintah terminal dan Bash script

https://dev.to/bobbyiliev/introduction-to-bash-scripting-5571

—-

Belajar Linux secara langsung perlu menggunakan langsung terpasang di perangkat (dual boot atau single boot) agar terbiasa dan fokus belajar, tanpa perlu emulasi VM dan sejenisnya.

Why you should use real Linux instead | by Italo Baeza Cabrera | For Linux Users | Medium
https://medium.com/for-linux-users/wsl-2-why-you-should-use-real-linux-instead-4ee14364c18

#zsh #terminal #powerlevel10k #bash

Tips penting membuat tampilan halaman aplikasi web yang bersifat responsive UI

https://dev.to/flovetstack/5-best-practices-for-responsive-ui-design-5c8

#responsive #ui #design

Latihan dari Digital Ocean tentang membuat aplikasi Next JS sederhana, dan melakukan deploy ke layanan Serverless Digital Ocean yang bernama App Platform

https://www.digitalocean.com/community/tutorials/how-to-deploy-a-next-js-app-to-app-platform

---

Menambahkan Google Analytics di dalam Next JS dengan bantuan React Context

https://dev.to/markkdev/setting-up-google-analytics-with-react-context-in-next-js-23h1

---

Next JS dan Vercel baru saja mendapatkan pendanaan Series B dari investor, dan memberikan roadmap baru untuk perkembangan Vercel ke depan

https://rauchg.com/2020/next-for-vercel
-
https://venturebeat-com.cdn.ampproject.org/v/s/venturebeat.com/2020/12/16/vercel-picks-up-40-million-to-advance-react-framework

---

Menggunakan React Hooks dan React Context sebagai state management pengganti Redux

https://itnext.io/react-hooks-with-context-as-a-state-management-solution-526d1c13a07d

---

Latihan panjang membuat game permainan catur dengan React JS

https://levelup.gitconnected.com/how-to-create-a-simple-chess-app-with-react-e18c0179b167

---

Komparasi library Jest dan Enzyme yang akan sering dipakai dalam unit testing di React

https://blog.logrocket.com/jest-and-enzyme-unit-testing-in-react-in-2021/

—-

Membuat halaman Portofolio dengan Gatsby JS dan deploy ke layanan Netlify Function

https://medium.com/javascript-in-plain-english/in-4-steps-you-can-build-and-deploy-a-portfolio-site-1c7792427bc2

#nextjs #react #vercel #game #chess #hooks #redux #statemanagement #testing #enzyme #jest #gatsby #netlify

Sampel latihan panjang pembuatan aplikasi web dengan JavaScript modern sebanyak 20 contoh kasus

https://medium.com/better-programming/i-built-20-web-projects-with-vanilla-javascript-in-20-days-4a1cd91a3760

—-

Perbedaan antara null dan undefined pada variabel kosong di JavaScript

https://medium.com/javascript-in-plain-english/the-difference-between-null-and-undefined-in-javascript-bf9ff374e544

—-

Konfigurasi ESLint dan Prettier untuk proyek berbasis JavaScript dan Node JS agar kode menjadi lebih rapi.

https://medium.com/javascript-in-plain-english/a-minimal-node-js-setup-part-2-eslint-prettier-vs-code-7963768dbb30

#learning #es2015 #null #undefined #prettier #eslint

Menambah performa Node JS backend agar semakin cepat dan lebih cepat dengan Clustering API di Node JS

https://medium.com/better-programming/scaling-node-js-applications-with-multiprocessing-b0c25511832a

—-

Beberapa operasi yang menyebabkan blocking event loop sehingga perlu bantuan proses asinkronus dengan Promise atau Async Await di Node JS

https://ecommerce-consultant.medium.com/blocking-and-non-blocking-operations-in-nodejs-c30d5208e50

—-

Beberapa referensi latihan pembuatan backend API dengan Node JS yang bagus

https://medium.com/better-programming/5-node-js-express-tutorials-to-go-from-beginner-to-expert-f658b9331402

—-

Latihan panjang membuat Reverse Proxy dengan Express JS dan Node JS

https://medium.com/better-programming/how-to-build-a-reverse-proxy-with-express-87a31ec2ec80

—-

#nodejs #cluster #fork #reverseProxy #express #async #await #eventLoop

Cara menggunakan TypeScript di dalam proyek berbasis Next JS

https://blog.logrocket.com/using-next-js-with-typescript/

---

Cara sederhana konfigurasi proyek berbasis TypeScript

https://itnext.io/simple-setup-for-your-typescript-project-d96f66113b41

#typescript #config