Menambahkan style pada text placeholder form input dengan CSS

https://www.samanthaming.com/tidbits/57-styling-css-placeholder/

---

Latihan membuat progress bar atau loading effect yang bernama Shimmering effect, seperti pada halaman YouTube

https://dev.to/stackfindover/youtube-loading-animation-using-html-and-css-44c2

---

Latihan membuat step progress bar yang bersifat responsif dengan CSS, HTML, dan JavaScript

https://www.freecodecamp.org/news/how-to-build-a-responsive-and-dynamic-progress-bar/

---

Membuat efek paralax dengan Tailwind CSS

https://dev.to/dailydevtips1/tailwind-css-parallax-effect-5hjd

---

Membuat header halaman yang berbentuk video dengan Tailwind CSS

https://dev.to/dailydevtips1/tailwind-css-full-screen-video-header-5539

---

Menggunakan template Tailwind CSS yang bernama Tailblocks

https://dev.to/sidchaudhary04/how-to-quickly-build-a-website-using-tailwindcss-and-tailblocks-k22


#css #placeholder #form #input #tailwind #shimmering #progress #step #paralax #header

Penggunaan Docker Container untuk menjalankan aplikasi Angular di server production

https://dev.to/wkrzywiec/build-and-run-angular-application-in-a-docker-container-19pm

---

Implementasi JSON Web Token JWT di aplikasi web Angular bagian Authentication

https://dev.to/bezkoder/node-js-angular-11-jwt-authentication-authorization-example-4add


---

Menggunakan state management NgRx untuk menyimpan status atau state dari component Angular

https://indepth.dev/posts/1408/how-to-manage-angular-state-in-your-components

---

Menambahkan Jest untuk unit testing di Angular

https://indepth.dev/posts/1406/integrate-jest-into-an-angular-application-and-library

---

Daftar UI library yang berisi component UI untuk Angular

https://medium.com/javascript-in-plain-english/10-popular-angular-ui-libraries-to-try-in-2021-5a24c8aaa902

#angular #docker #ngrx #jest #jwt #component #ui

Kumpulan tools dan layanan penting yang dapat dipakai untuk membantu pengembangan aplikasi web modern

https://dev.to/denicmarko/50-free-tools-and-resources-you-re-gonna-love-part-2-452n

#tools

JavaScript Weekly 519
12/22/2020

• News JavaScriptLandia: The OpenJS Foundation's 'Individual Supporter Program'
• News A Growing Collection of 100+ Node.js Best Practices
• News 10 React Security Best Practices
• News JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox
• News Styling console.log() Output Formatting with CSS
• News What Is GraphQL?
• News Improve Serverless Observability With AWS Lambda Extensions Integration
• News Using Airtable as a Database to Store Realtime Messages
• News An Engineering Leader’s Guide to OpenTelemetry
• News Things I Wished More Developers Knew About Databases
• News Moiva.io: A JavaScript Library Comparison Tool
• News AWS SDK for JavaScript Version 3 Now Generally Available
• News Stream Chat React Native v2.0.0 Released
• News JSweet 3.0: A Java to JavaScript Transpiler
• News tiny-swiper: An 'Ingenious' JavaScript Carousel
• News Dynamoose 2.5.0: A Modeling Tool for Amazon's DynamoDB
• News Full Stack Senior JavaScript/Node.js Developer - Video Platform
• News JavaScript Developer at X-Team (Remote)
• News Find a Job Through Vettery


Tags: #weekly #nodejs
JavaScript Indonesia Community

Latihan dari channel Thu Nghiem tentang membuat aplikasi web dengan tampilan responsive dengan CSS

https://youtu.be/CrryRvjYsgc

---

Kumpulan latihan HTML dan CSS dari Online Tutorials di bulan November 2020 lalu

https://youtu.be/c8oB0JO5mdw

---

Beberapa cara untuk membuat element ke tengah Vertical Center

https://blog.logrocket.com/13-ways-to-vertical-center/

---

Latihan membuat animasi on hover pada layout hexagonal dari channel Online Tutorials

https://youtu.be/pRTHM-pVS9w


#css #html #responsive #center

Programming With Erik merilis latihan pengenalan React Next JS 10 dan melakukan komparasi dengan Vue Nuxt JS

https://youtu.be/dVQDaaUIrIM

---

Latihan menambahkan Chart JS ke dalam React

https://dev.to/harshilparmar/how-to-use-chart-js-in-react-17jp

---

Latihan membuat aplikasi daftar film dengan React JS

https://www.freecodecamp.org/news/react-movie-app-tutorial

---

Latihan panjang membuat aplikasi JAMStack dengan React Redwood JS, Fauna Db, dan deploy ke Vercel

https://css-tricks.com/deploying-a-serverless-jamstack-site-with-redwoodjs-fauna-and-vercel/

---

#nextjs #nuxtjs #redwood #react #movie #faunadb #chartjs

Melakukan testing API untuk Express JS dengan Jest dan library Supertest

https://dev.to/mhmdlotfy96/testing-nodejs-express-api-with-jest-and-supertest-1bk0

—-

Mengenal apa itu Redis Db dan cara penggunaannya di Nest JS untuk cache manager

https://medium.com/javascript-in-plain-english/what-is-redis-and-how-to-use-it-with-nest-js-3cd1de0fe13b

—-

Pengenalan Filesystem API module atau fs module di Node JS

https://medium.com/javascript-in-plain-english/learn-node-js-part-6-ef3ce1c7021c

—

Komparasi beberapa library Web Scrapping di Node JS

https://medium.com/javascript-in-plain-english/web-scraping-101-with-node-js-52710b02aa7e

#nodejs #jest #express #supertest #fs #nest #redis #scrapping

Latihan menggunakan Docker untuk pengembangan aplikasi berbasis Node JS

https://medium.com/dailyjs/how-to-use-docker-with-node-js-a-step-by-step-tutorial-including-docker-compose-ac238c9e7778

---

Latihan dasar cara menggunakan Docker Container

https://hackernoon.com/docker-beginners-guide-5e2c31qv

---

Beberapa tips dan trik best practices dalam menggunakan Docker

https://blog.bitsrc.io/best-practices-for-writing-a-dockerfile-68893706c3

---

Latihan sederhana pengenalan Docker Container dan contoh penggunaannya

https://www.freecodecamp.org/news/what-is-docker-used-for-a-docker-container-tutorial-for-beginners

#docker #nodejs #bestPractice

Node Weekly 2020
12/21/2020

• News A Growing Collection of 100+ Node.js Best Practices
• News 11 Top Node ORMs, Query Builders & Database Libraries in 2020
• News New Course: Production-Grade TypeScript
• News You (Possibly) Don't Need Moment.js
• News Node Modules at 'War': Why CommonJS and ES Modules Can’t Get Along
• News How I Build Backends for Webapps
• News Tutorial: Supercharge Stream Feeds with Algolia & GraphQL
• News Deno 1.0: What You Need to Know
• News Introducing Yarn 2: Big Steps Forward for the Popular Package Manager
• News Socket.io 3.0 Released: A Realtime Framework for Node and Browser
• News An Engineering Leader’s Guide to OpenTelemetry
• News Playwright: A Node Library to Automate Chromium, Firefox and WebKit
• News Fastify 3.0: A Fast 'Low-Overhead' Web Framework for Node
• News Node.js Developer at X-Team (Remote)
• News Find a Job Through Vettery


Tags: #weekly #nodejs
NodeJs Indonesia Community

Latihan panjang dari JavaScript Mastery membuat aplikasi Expense Tracker atau pengatur pengeluaran dan pemasukan dengan React JS dan Node JS. Dilengkapi dengan Voice to Tech Recognition di dalamnya.

https://youtu.be/NnUFOWR_V4Y

---

Latihan panjang membuat aplikasi web Toko Online atau e-commerce dengan React JS dan Stripe Payment

https://youtu.be/377AQ0y6LPA

---

Latihan panjang membuat aplikasi web modern dengan MERN Stack, untuk contoh kasus aplikasi pencatat event atau acara.

https://youtu.be/ngc9gnGgUdA

Bagian kedua latihannya dengan cara deploy aplikasi web ke Heroku
https://youtu.be/aibtHnbeuio


#react #expenseTracker #heroku #mern #express #nodejs #mongodb #ecommerce

Latihan berseri dari channel Diligent Dev tentang membuat aplikasi mobile berbagi foto gambar dengan Ionic, Vue JS, dan Firebase

https://youtu.be/jHy1whzDk1s

---

Latihan membuat mood Generator dengan Nuxt JS dan Tailwind CSS

https://dev.to/dawntraoz/random-potato-mood-generator-using-nuxt-and-tailwindcss-26f4/

#vue #ionic #tailwind #firebase #nuxt #photo

Panduan pengenalan Object Oriented di dalam JavaScript

https://medium.com/javascript-in-plain-english/object-oriented-javascript-3f74e02a436f

—-

Beberapa aturan dalam menulis kode JavaScript dengan design pattern yang baik dan bersifat SOLID Clean Code

https://medium.com/javascript-in-plain-english/15-rules-for-writing-clean-javascript-8e2b2b426515

—

Beberapa fitur baru di JavaScript yang sering digunakan sehari-hari

https://medium.com/javascript-in-plain-english/5-new-javascript-features-you-should-know-adb410c2bf0a

—-

Pengenalan apa itu Callback di JavaScript

https://dmitripavlutin.com/javascript-callback/

---

Pemahaman tentang Nullish Coalescing di dalam Javascript

https://www.freecodecamp.org/news/nullish-coalescing-operator-in-javascript/

Latihan menggunakan Clipboard API di dalam JavaScript bagian sisi front end atau client side browser, untuk fungsi Cut, Copy, dan Paste

https://www.sitepoint.com/clipboard-api/

---

Latihan menggunakan Promise API dan kombinasi dengan Async Await di JavaScript

https://www.freecodecamp.org/news/learn-promise-async-await-in-20-minutes/

---

Beberapa tips penulisan kode JavaScript yang menarik untuk dicoba

https://www.freecodecamp.org/news/javascript-hacks/

---

Konfigurasi request Interceptor di dalam Axios

https://blog.bitsrc.io/setting-up-axios-interceptors-for-all-http-calls-in-an-application-71bc2c636e4e

#promise #async #clipboard
#oop #solid #cleancode #tips #es2015 #callback #nullish #coalescing

Memperkenalkan Hex Palette, layanan web gratis untuk membuat kumpulan warna atau Palette Generator untuk pewarnaan tampilan aplikasi

https://hexpalette.com/

#color #palette #generator

Latihan menggunakan Clipboard API di dalam JavaScript bagian sisi front end atau client side browser, untuk fungsi Cut, Copy, dan Paste

https://www.sitepoint.com/clipboard-api/

---

Latihan menggunakan Promise API dan kombinasi dengan Async Await di JavaScript

https://www.freecodecamp.org/news/learn-promise-async-await-in-20-minutes/

---

Beberapa tips penulisan kode JavaScript yang menarik untuk dicoba

https://www.freecodecamp.org/news/javascript-hacks/

---

Memahami penggunaan Nullish Coalescing di JavaScript ES2020

https://www.freecodecamp.org/news/nullish-coalescing-operator-in-javascript/

---

Konfigurasi request Interceptor di dalam Axios

https://blog.bitsrc.io/setting-up-axios-interceptors-for-all-http-calls-in-an-application-71bc2c636e4e

#promise #async #clipboard #nullish #coalescing

Beberapa alternatif dari Vuex dan contoh penggunaan Composition API

https://blog.logrocket.com/do-you-really-need-vuex/

---

Beberapa catatan rilis dari Vuex 4 yang diperuntukkan bagi Vue JS 3

https://www.smashingmagazine.com/2020/12/vuex-library/

---

Latihan berseri menggunakan Supabase IO sebagai alternatif Firebase pada aplikasi Vue JS dan Ionic

https://dev.to/aaronksaunders/video-series-getting-started-vuejs-supabase-io-the-open-source-firebase-alternative-50n2

---

Latihan berseri membuat aplikasi mobile dengan Ionic Capacitor, Google Maps, dan Vue JS

https://dev.to/aaronksaunders/vue-google-maps-example-project-maps-markers-geocoder-api-map-resizing-adding-markers-adding-infowindow-2g26

---

Latihan berseri membuat aplikasi Nuxt JS dengan Dark Mode

https://dev.to/hostman_com/dark-mode-how-to-create-your-first-nuxt-js-app-part-2-35ni

—-

Latihan membuat Toggle Button dengan Vue JS

https://medium.com/javascript-in-plain-english/toggle-button-in-vue-js-89c612ad6b1a

#vue #nuxt #supabase #firebase #ionic #toggle #button #vuex #composition

Mengenal LocalForage, yaitu library untuk manajemen browser storage dengan mudah, seperti IndexedDb dan LocalStorage dengan Promise API

https://blog.logrocket.com/localforage-managing-offline-browser-storage/

---

Cara mengambil data lokasi di browser dengan bantuan Geolocation API

https://dev.to/denvercoder1/getting-the-user-s-location-with-javascript-47m0

---

Memahami cara kerja Nullish Coalescing di JavaScript ES2020

https://www.freecodecamp.org/news/nullish-coalescing-operator-in-javascript/

---

Pengenalan Peer Dependency di dalam Node Modules dan JavaScript Modules

https://blog.bitsrc.io/understanding-peer-dependencies-in-javascript-dbdb4ab5a7be

---

#nullish #coalescing #OptionalChaining #peer #localstorage #promise #geolocation

Latihan panjang dari Freecodecamp membuat aplikasi seperti Instagram dengan React Native, React Expo, Firebase Database, dan Redux

https://www.freecodecamp.org/news/build-an-instagram-clone-with-react-native-firebase-firestore-redux-and-expo/

---

Menggunakan fungsi Authentication dari library Next Auth untuk Next JS

https://blog.logrocket.com/how-to-use-nextauth-js-for-client-side-authentication-in-next-js/

---

Daftar library Modal Component untuk React JS

https://blog.logrocket.com/top-react-modal-components-for-2021/

---

Latihan panjang membuat aplikasi I sosial media dengan MERN Stack dan GraphQL

https://www.freecodecamp.org/news/learn-how-to-use-react-and-graphql-to-make-a-full-stack-social-network/

---

#react #mern #nextjs #nodejs #reactNative #firebase #modal #component

Contoh integrasi TypeScript ke dalam Svelte JS

https://css-tricks.com/integrating-typescript-with-svelte/

---

Mengenal penggunaan Iterator di dalam TypeScript

https://dev.to/gsarciotto/iterators-in-typescript-1d78

---

Penggunaan Utility Type ya g terdapat di dalam TypeScript

https://dev.to/kais_blog/11-awesome-typescript-utility-types-you-should-know-4a8j

---

#typescript #svelte #utility #iterator

Latihan sederhana membuat CMS dengan Angular dan Firebase

https://medium.com/javascript-in-plain-english/create-a-cms-with-angular-firebase-8ecdf0dd63d9

---

Latihan membuat aplikasi web sederhana dengan Angular, Node JS Express JS, dan CRUD ke database PostgreSQL

https://dev.to/bezkoder/angular-11-node-js-postgresq-crud-example-with-express-rest-apis-1c83

—-

Latihan membuat Dark Mode di Angular dengan bantuan Angular Material

https://sevriukovmk.medium.com/angular-material-dark-mode-f1baee78d8af

#angular #firebase #cms #nodejs #postgresql

Mengenal apa itu Progressive Web Apps dan cara melakukan testing di perangkat mobile selama proses development

https://dev.to/haideralipunjabi/testing-pwas-on-mobile-devices-during-development-22mm

https://levelup.gitconnected.com/testing-pwas-on-mobile-devices-during-development-c38ee43d4e4d


#pwa #testing #mobile