JavaScript Indonesia Channel

JavaScript Weekly 532
04/06/2021

• News Deno Gets a Company, Some Money, and a Distributed VM
• News Announcing TypeScript 4.3 Beta
• News How to Model JSON to Get the Most Out of Your Document Database
• News NativeScript 8.0 Released
• News Tagify 4.0: An Elegant Input Component for Tags
• News Make Your Jest Tests Faster by Changing a Single Setting
• News A Look at Class static Initializer Blocks in V8 9.1
• News How to Build a Financial Dashboard with React
• News On JavaScript Closures
• News Discussing Skypack and Snowpack with Fred Schott
• News Getting Started with React and D3.js
• News How to Ship 2x Faster
• News Delay Dispatching Actions in Redux using Thunk Middleware
• News Working with Media Queries from JavaScript
• News Cheetah Grid 1.0: 'Fastest' Open-Source Data Table for the Web?
• News d3-graphviz 4.0: D3-Powered Graphviz DOT Graph Rendering
• News Free Chat & Activity Feed APIs for Qualifying Teams
• News A Recreation of the Spotify Client Built with Angular 11
• News Software Engineer at Carbon Five
• News Remote Full-Stack Software Developer Opportunity
• News Find Software Engineering Jobs with Hired

Tags: #weekly #nodejs
JavaScript Indonesia Community

784 viewsRian YW, 04:22

Forwarded from Nodejsweekly News

Node Weekly 382
04/06/2021

• News How to Migrate Your App from Express to Fastify
• News April 2021 Security Releases Coming Next Week
• News How to Model JSON to Get the Most Out of Your Document Database
• News Middy 2.0: Node Middleware Engine for AWS Lambda
• News Node v15.13.0 (Current) Released
• News Node v12.22.0 (LTS) Released
• News Node.js Developer at X-Team (Remote)
• News Find Software Engineering Jobs with Hired
• News A Deep Dive into the Eleventy Static Site Generator
• News Examples of Go(lang) Compared to Node.js
• News How the Popular netmask Package Was Vunerable to Octal Input Data
• News Video: Configure NGINX as a Reverse Proxy with Node.js
• News Managing Multiple Threads In Node
• News How To Deploy Your Node App on AWS with NGINX and SSL
• News What's New in Mongoose 5.12: Populate Transform
• News eslint-plugin-clean-regex: ESLint Plugin for Better Regular Expressions
• News Faker.js 5.5: Generate Realistic Fake Data in Node and Browser
• News Husky 6.0: Git Hooks Made Easier
• News See Your Microservices, Build Your Node.js Apps Faster
• News Node Redis 3.1.0: A High Performance Redis Client Library
• News Prray: A 'Promisified' Array
• News Worker 0.10.0: A High Performance Node + Postgres Job Queue

Tags: #weekly #nodejs
NodeJs Indonesia Community

761 viewsRian YW, 04:26

JavaScript Indonesia Channel

Latihan membuat blog dengan Gatsby JS dan Netlify CMS

https://javascript.plainenglish.io/how-to-create-a-blog-with-gatsby-and-netlify-cms-c8616861bd1b

—-

Latihan panjang membuat aplikasi Portfolio dengan Airtable API, React, Next.js dan Tailwind CSS

https://javascript.plainenglish.io/building-a-simple-portfolio-with-airtable-api-react-next-js-tailwind-css-7a24fcf3b5e6

—-

#nextjs #gatsby #react #tailwind #cms #netlify #airtable

Medium

How to Create a Blog with Gatsby and Netlify CMS

A blog is a useful tool for a budding developer. It helps you internalise what you have learnt. While writing, you can research the topic…

790 viewsRian YW, 23:22

JavaScript Indonesia Channel

Latihan dari Dcode tentang penggunaan salah satu fitur keren di JavaScript yaitu Nullish Coalescing

https://youtu.be/RA8RHgzPokk

#es2020 #dcode #nullish #coalescing

YouTube

Optional Chaining Operator (?.) in JavaScript

The optional chaining operator in JavaScript is convenient as it allows the developer to specify an object's property as being optional, and only return a value if the specified property is not "null" or "undefined" - otherwise return "undefined".

It's helpful…

497 viewsRian YW, 23:23

JavaScript Indonesia Channel

Latihan sederhana dari Fireship menghapus node_modules dari project yang sudah tidak terpakai dengan npkill

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

https://dev.to/nirazanbasnet/delete-nodemodules-like-a-pro-1727

#fireship #npkill #npm #nodemodules

YouTube

Delete node_modules like a Pro #Shorts

Are you a JS developer with a full hard drive? Learn a powerful command 🥋 to analyze and delete all your "node modules" folders quickly.

#js #webdev #shorts

Official docs https://npkill.js.org/

788 viewsRian YW, 23:28

JavaScript Indonesia Channel

Daftar referensi penting berisi artikel latihan JavaScript Modern, library JavaScript, dan kumpulan snippets atau potongan kode untuk fungsi di JavaScript, yang dirangkum oleh Smashing Magazine

https://www.smashingmagazine.com/2021/04/vanilla-javascript-code-snippets/

#esm #learning #course

Smashing Magazine

Vanilla JavaScript Code Snippets — Smashing Magazine

A guide to vanilla JavaScript code snippets — with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.

1.8K viewsRian YW, 23:35

JavaScript Indonesia Channel

Latihan membuat fungsi pengecekan kalimat atau String palindrome dengan JavaScript

https://javascript.plainenglish.io/build-a-palindrome-checker-in-vanilla-javascript-3470304100a5

—-

Beberapa fitur penting di JavaScript yang jarang diketahui orang.

https://betterprogramming.pub/6-lesser-known-javascript-features-d45060a999ed

#palindrome #esm #tips

Medium

Build a Palindrome Checker in Vanilla JavaScript

Learn how to build a palindrome checker in Vanilla JavaScript in just a few easy to follow steps.

494 viewsRian YW, 00:24

JavaScript Indonesia Channel

Kumpulan tips dan trik penggunaan HTML yang dirangkum oleh Marko Denic

https://markodenic.com/html-tips/

#html #css #tips #markoDenic

HTML Tips

In this article I’ll share some tips and advice about HTML.

618 viewsRian YW, 00:38

JavaScript Indonesia Channel

Latihan menggunakan Flexbox CSS untuk mengatur posisi element di dalam HTML

https://www.freecodecamp.org/news/css-positioning-and-flexbox-explained/

---

Tips membuat pesan error yang baik dengan UI UX yang baik juga

https://www.freecodecamp.org/news/how-to-write-helpful-error-messages-to-improve-your-apps-ux/

#flexbox #css #ui #ux

freeCodeCamp.org

How CSS Positioning and Flexbox Work – Explained with Examples

By Nishant Kumar If you have ever used CSS, then you know how hard it is to position elements. But by the end of this tutorial you'll know much more about CSS positioning and Flexbox, and you'll be able to position elements in your dream project like...

579 viewsRian YW, 00:49

JavaScript Indonesia Channel

Latihan membangun game multiplayer dengan Phaser JS dan Node JS

https://javascript.plainenglish.io/develop-your-first-multiplayer-browser-game-io-99931c7d3a5b

#game #phaserjs #nodejs

Medium

Build a Multiplayer Browser Game with Phaser and Web Sockets

Browser games do not require any client software or anything to install. Some people just absolutely love it and are amazing gamers, while…

845 viewsRian YW, 01:17

JavaScript Indonesia Channel

Latihan dari Online Tutorials tentang membuat Navbar yang responsive dengan HTML, CSS, dan JavaScript

https://www.youtube.com/watch?v=FhjyRg-LYKc

—-

Latihan membuat halaman web responsive dengan style Glassmorphism

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

—-

Latihan sederhana membuat Toggle Icon dengan CSS, HTML, dan JavaScript

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

—-

Membuat komponen Sidebar halaman yang dapat tertutup ketika element di luar di klik

https://www.youtube.com/watch?v=iP63fDXk-W8

---

Latihan membuat fitur auto play video ketika ada event mouse hover ke atas video

https://youtu.be/dx4oAxaR1As

#onlinetutorials #navbar #responsive #css #sidebar #glassmorphism #toggle #icon #video

YouTube

Responsive Navbar using Html CSS & Javascript | Close Navbar When Click Outside

Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D

Another Course : Build Complete Real World Responsive Websites from Scratch…

1.3K viewsRian YW, 01:38

JavaScript Indonesia Channel

Membuat service worker secara otomatis dengan Workbox

https://blog.bitsrc.io/how-to-generate-service-workers-automatically-b6bbbaa632c3

#serviceworker #pwa #workbox

Medium

How to Generate Service Workers Automatically

Using Workbox with Webpack to Generate Service Workers

784 viewsRian YW, 03:29

JavaScript Indonesia Channel

Memperkenalkan Moovie JS, library untuk membuat media player di tampilan aplikasi web

https://github.com/BMSVieira/moovie.js

#library #mediaPlayer #moovie

GitHub

GitHub - BMSVieira/moovie.js: Movie focused HTML5 Player

Movie focused HTML5 Player. Contribute to BMSVieira/moovie.js development by creating an account on GitHub.

808 viewsRian YW, 23:28

JavaScript Indonesia Channel

Latihan berseri dari Zach Gollwitzer tentang Flexbox CSS

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

#flexbox #css #ZachGollwitzer

YouTube

The Ultimate CSS Flexbox Course (part 3/4)

Flexbox will make your life as a front-end developer easier period. Flexbox allows you to create CSS layouts easier than ever before, and in this video, I'll show you how in detail.

🔗 Lesson specific links 🔗

Flexbox Cheat Sheet - https://yoksel.github.io/flex…

673 viewsRian YW, 23:40

JavaScript Indonesia Channel

Design Course merilis latihan tentang membuat tema VS Code dengan tools online.

https://youtu.be/uQoYH2wLlhY

Tools nya dapat diakses disini
https://themes.vscode.one/

#designcourse #theme #code

YouTube

Creating a Visual Studio Code Theme - EASILY!

https://bit.ly/31T4tea - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? https://designcourse.com
-- Today, I'm going to create a visual studio code theme with a relatively easy to use tool that's made specifically for the…

587 viewsRian YW, 23:43

JavaScript Indonesia Channel

Tips sangat penting yang berisi cara memperbaiki performa aplikasi web tahap demi tahap, sehingga menghasilkan nilai yang baik setelah audit oleh Lighthouse

https://css-tricks.com/fixing-a-slow-site-iteratively/

#pwa #performance #lighthouse

CSS-Tricks

Fixing a slow site iteratively | CSS-Tricks

Site performance is potentially the most important metric. The better the performance, the better chance that users stay on a page, read content, make

458 viewsRian YW, 00:31

JavaScript Indonesia Channel

Latihan menggunakan library Billboard JS untuk membuat tampilan chart atau diagram

https://blog.logrocket.com/how-to-use-billboard-js/

---

Latihan membuat Discord Bot dengan Node JS

https://www.freecodecamp.org/news/create-a-discord-bot-with-javascript-nodejs/

---

Mengenal fitur "Top Level Await" yang telah tersedia di Node JS versi 14 ke atas.

https://www.stefanjudis.com/today-i-learned/top-level-await-is-available-in-node-js-modules/

---

Latihan membuat endpoint API dengan standard Open API yang baik dan benar

https://www.freecodecamp.org/news/how-to-build-explicit-apis-with-openapi/

---

Menambahkan element iframe pada hasil scrapping dengan Puppeteer

https://levelup.gitconnected.com/how-to-include-iframes-in-puppeteers-html-output-8f2f36b5f36c

---

Memahami tentang Closure di JavaScript

https://betterprogramming.pub/understanding-javascript-closures-87838e459cc8

#nodejs #chart #billboardjs #puppeteer #topLevel #await #discord #bot #openAPI #closure

LogRocket Blog

Creating charts in Node.js with billboard.js - LogRocket Blog

Improve your user experience and clean up data visualization using billboard.js, a chart library based on D3 v4+.

878 viewsRian YW, 01:09

JavaScript Indonesia Channel

Beberapa cara untuk menggabungkan atau merge Array di JavaScript

https://dmitripavlutin.com/javascript-merge-arrays/

---

Beberapa cara dalam membuat Object JavaScript

https://hackernoon.com/creational-design-patterns-in-javascript-a-brief-tutorial-35w3304

---

Mengenal konsep Immutability dan Mutability di JavaScript

https://hackernoon.com/mutability-and-immutability-in-javascript-explained-in-detail-x7q33ag

---

Memahami penggunaan DOM Event Listener di JavaScript dan HTML

https://devdojo.com/bo-iliev/dom-event-listeners

---

#array #merge #eventListener #immutability #mutability

Dmitri Pavlutin Blog

3 Ways to Merge Arrays in JavaScript

How to merge arrays in JavaScript using spread operator, array.concat(), and array.push().

680 viewsRian YW, 01:16

JavaScript Indonesia Channel

Tips penting dalam penggunaan CSS yang akan sering dipakai sehari hari

https://uxplanet.org/10-lifesaving-html-css-tricks-for-designers-11bbf76729eb

—-

Membuat Timeline View dengan CSS murni dan HTML

https://blog.bitsrc.io/how-to-create-a-timeline-with-pure-css-862ffea5b99b

—-

#css #tips #trics #timeline

Medium

10 lifesaving HTML/CSS tricks for designers

From CSS setups to Server-Side rendering, 10 tips for designers who want to start web development.

863 viewsRian YW, 01:19

JavaScript Indonesia Channel

Latihan dari Freecodecamp tentang membuat aplikasi web modern dengan tema e-commerce dengan menggunakan Vue JS 3 dan Django Python Framework

https://youtu.be/Yg5zkd9nm6w

—-

Konfigurasi Vue JS untuk menggunakan Vite module bundler

https://levelup.gitconnected.com/set-up-a-vue-app-running-on-vite-e816247a24e2

#vue #django #ecommerce #vite

YouTube

E-commerce Website With Django and Vue Tutorial (Django Rest Framework)

Learn how to build an e-commerce website using Django and Vue from scratch. Django uses Python Vue uses JavaScript.

Django Rest Framework is used to build the API and backend.
The frontend is a separate Vue project. To handle the payments, we implement Stripe.…

1.3K viewsRian YW, 01:42

JavaScript Indonesia Channel

Forwarded from AL Code

Pengenalan sekaligus latihan menggunakan CSS Variabel

https://youtu.be/lcoYVCMCiqE

#alcode #css

YouTube

CSS Variables / Custom Properties

🔥 Promo Unlimited Hosting Niagahoster : diskon up to 75% + gratis domain + SSL 🔥
👍🏼 Gunakan kode kupon WPUNPAS untuk tambahan diskon 10%
👉🏼 Klik https://bit.ly/niagahosterwpu

---
Download Source Code Awal
https://github.com/sandhikagalih/belajar-css-variable…

555 viewsRian YW, 12:06