Latihan dari Web Dev Simplified dalam menggunakan Next JS
https://www.youtube.com/watch?v=NgayZAuTgwM
—-
Latihan menggunakan React Router 6
https://www.freecodecamp.org/news/how-to-use-react-router-version-6/
---
Menggunakan local storage di React JS
https://www.freecodecamp.org/news/how-to-use-localstorage-with-react-hooks-to-set-and-get-items/
#localstorage #react #nextjs #webdevsimplified
https://www.youtube.com/watch?v=NgayZAuTgwM
—-
Latihan menggunakan React Router 6
https://www.freecodecamp.org/news/how-to-use-react-router-version-6/
---
Menggunakan local storage di React JS
https://www.freecodecamp.org/news/how-to-use-localstorage-with-react-hooks-to-set-and-get-items/
#localstorage #react #nextjs #webdevsimplified
YouTube
Learn Next.js 13 With This One Project
React Simplified Course: https://reactsimplified.com
Next.js is constantly evolving and one of the biggest updates is the addition of server components and server actions. This video goes over all the new Next.js 13 changes and how you can use these new…
Next.js is constantly evolving and one of the biggest updates is the addition of server components and server actions. This video goes over all the new Next.js 13 changes and how you can use these new…
Pengecekan nilai Null dan undefined di TypeScript
https://javascript.plainenglish.io/beginners-guide-how-to-check-null-and-undefined-in-typescript-c6492a07b609
#null #undefined #typescript
https://javascript.plainenglish.io/beginners-guide-how-to-check-null-and-undefined-in-typescript-c6492a07b609
#null #undefined #typescript
Medium
Beginner’s Guide: How to Check Null and Undefined in TypeScript
Learn the basics of checking null and undefined values in TypeScript for beginners.
Cara melakukan DOM manipulation dengan JavaScript
https://itnext.io/mastering-the-art-of-efficient-javascript-dom-manipulation-899b5cbf5a3f
—-
Pengenalan tentang Beacon API pada JavaScript
https://javascript.plainenglish.io/must-know-javascript-api-beacon-api-4abe0bee29ff
—-
Penggunaan Maps dan Set pada JavaScript
https://fadamakis.com/be-cool-start-using-javascript-maps-and-sets-df613e8c6ed5
—-
#dom #maps #sets #beacon
https://itnext.io/mastering-the-art-of-efficient-javascript-dom-manipulation-899b5cbf5a3f
—-
Pengenalan tentang Beacon API pada JavaScript
https://javascript.plainenglish.io/must-know-javascript-api-beacon-api-4abe0bee29ff
—-
Penggunaan Maps dan Set pada JavaScript
https://fadamakis.com/be-cool-start-using-javascript-maps-and-sets-df613e8c6ed5
—-
#dom #maps #sets #beacon
Medium
Mastering the Art of Efficient JavaScript DOM Manipulation
Learn how to efficiently modify the DOM so your app’s performance is not affected
Latihan dari Online Tutorials membuat paralax scrolling dengan GSAP
https://www.youtube.com/watch?v=oHR5qZmPhmM
#css #html #onlineTutorials
https://www.youtube.com/watch?v=oHR5qZmPhmM
#css #html #onlineTutorials
YouTube
How to Make Parallax Scrolling Website using GSAP Scrolltrigger
Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exp…
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exp…
Menggunakan Container Query di CSS
https://www.freecodecamp.org/news/container-queries-responsive-design-beyond-the-viewport/
#css #container #query
https://www.freecodecamp.org/news/container-queries-responsive-design-beyond-the-viewport/
#css #container #query
freeCodeCamp.org
How to Use Container Queries – Responsive Design Beyond the Viewport
Before now, making your website responsive was limited to resizing HTML elements with media queries. This was, and still is, a brilliant innovation for web development in general. But web development has evolved with the advent of JavaScript frameworks—particularly…
Beberapa teknik shorthand pada JavaScript
https://javascript.plainenglish.io/15-javascript-shorthand-ultimate-cheatsheet-d1f71a363a90
—-
Beberapa fitur JavaScript yang jarang diketahui
https://fatfish.medium.com/4-cool-modern-javascript-features-most-developers-dont-know-about-6ef4d33a8232
—-
Penerapan prinsip SOLID pada JavaScript
https://javascript.plainenglish.io/mastering-solid-principles-in-javascript-building-robust-and-maintainable-code-6acbf078c4d2
—-
Latihan penggunaan Axios di JavaScript
https://www.freecodecamp.org/news/axios-react-how-to-make-get-post-and-delete-api-requests/
#shorthand #solid #axios
https://javascript.plainenglish.io/15-javascript-shorthand-ultimate-cheatsheet-d1f71a363a90
—-
Beberapa fitur JavaScript yang jarang diketahui
https://fatfish.medium.com/4-cool-modern-javascript-features-most-developers-dont-know-about-6ef4d33a8232
—-
Penerapan prinsip SOLID pada JavaScript
https://javascript.plainenglish.io/mastering-solid-principles-in-javascript-building-robust-and-maintainable-code-6acbf078c4d2
—-
Latihan penggunaan Axios di JavaScript
https://www.freecodecamp.org/news/axios-react-how-to-make-get-post-and-delete-api-requests/
#shorthand #solid #axios
Medium
15 JavaScript Shorthand Techniques — Ultimate CheatSheet
You can learn a lot from this collection, so look it over✨
Panduan tentang pengenalan Node JS
https://www.freecodecamp.org/news/what-exactly-is-node-guide-for-beginners/
---
Cara menggunakan Rabbit MQ di Node JS
https://www.freecodecamp.org/news/how-to-use-rabbitmq-with-nodejs/
---
Menggunakan selenium di Node JS
https://javascript.plainenglish.io/a-beginners-guide-to-using-selenium-in-node-js-51ea596c8bc9
---
#nodejs #selenium #rabbitmq
https://www.freecodecamp.org/news/what-exactly-is-node-guide-for-beginners/
---
Cara menggunakan Rabbit MQ di Node JS
https://www.freecodecamp.org/news/how-to-use-rabbitmq-with-nodejs/
---
Menggunakan selenium di Node JS
https://javascript.plainenglish.io/a-beginners-guide-to-using-selenium-in-node-js-51ea596c8bc9
---
#nodejs #selenium #rabbitmq
freeCodeCamp.org
What Exactly is Node.js? A Guide for Beginners
By Amazing Enyichi Agu If you're thinking about doing back-end development using JavaScript, you will hear the term ‘Node.js’. Node is often associated with developing powerful web servers. But what exactly is Node.js? Is it a JavaScript framework ju...
Penggunaan Zustand di Next JS
https://javascript.plainenglish.io/building-a-shopping-cart-with-zustand-a-practical-guide-to-react-state-management-with-typescript-73ec10c66fb7
---
Authentication dengan http only cookie di Next JS
https://javascript.plainenglish.io/next-js-secure-authentication-using-http-only-cookie-graphql-or-rest-a4ef94cec9e8
---
Validasi form di React JS dengan React Hook Form
https://javascript.plainenglish.io/how-to-create-and-validate-forms-with-react-hook-form-b2ca2f763d3f
---
#nextjs #zustand #auth
https://javascript.plainenglish.io/building-a-shopping-cart-with-zustand-a-practical-guide-to-react-state-management-with-typescript-73ec10c66fb7
---
Authentication dengan http only cookie di Next JS
https://javascript.plainenglish.io/next-js-secure-authentication-using-http-only-cookie-graphql-or-rest-a4ef94cec9e8
---
Validasi form di React JS dengan React Hook Form
https://javascript.plainenglish.io/how-to-create-and-validate-forms-with-react-hook-form-b2ca2f763d3f
---
#nextjs #zustand #auth
Medium
Building a Shopping Cart with Next.js and Zustand: State Management with TypeScript
Learn how to implement Zustand persisting state
Beberapa tips penggunaan Angular dalam RxJS operator
https://medium.com/@garcia.alberto.4.2012/angular-tricks-to-become-a-pro-part-2-rxjs-operators-1cf581b9bbd2
#angular #rxjs
https://medium.com/@garcia.alberto.4.2012/angular-tricks-to-become-a-pro-part-2-rxjs-operators-1cf581b9bbd2
#angular #rxjs
Medium
Angular tricks to become a pro. RxJS operators
In this post, I have gathered the RxJS tricks that I use the most to boost my Angular applications.
Latihan panjang membuat clone Leet Code dengan Next JS, Firebase dan Tailwind CSS
https://www.freecodecamp.org/news/build-and-deploy-a-leetcode-clone-with-react-next-js-typescript-tailwind-css-firebase/
---
Membuat loading component dengan Next JS dan React Suspense
https://blog.logrocket.com/create-loading-component-next-js-13-react-suspense/
---
Menambahkan fitur zoom halaman di React JS
https://blog.logrocket.com/adding-zoom-pan-pinch-react-web-apps/
---
#react #nextjs #zoom
https://www.freecodecamp.org/news/build-and-deploy-a-leetcode-clone-with-react-next-js-typescript-tailwind-css-firebase/
---
Membuat loading component dengan Next JS dan React Suspense
https://blog.logrocket.com/create-loading-component-next-js-13-react-suspense/
---
Menambahkan fitur zoom halaman di React JS
https://blog.logrocket.com/adding-zoom-pan-pinch-react-web-apps/
---
#react #nextjs #zoom
freeCodeCamp.org
Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase
Solving coding challenges on the LeetCode website is a great way to improve your developer skills. But an even better way to improve your skills is to develop your own LeetCode website. We just published a course on the freeCodeCamp.org YouTube chann...
Membuat Navigation bar dengan Dropdown menu yang responsive
https://www.freecodecamp.org/news/how-to-build-a-responsive-navigation-bar-with-dropdown-menu-using-javascript/
---
Latihan menggunakan Indexed Db database
https://blog.logrocket.com/using-indexeddb-complete-guide/
—-
Beberapa tips penting penggunaan JavaScript
https://javascript.plainenglish.io/10-super-useful-javascript-tricks-a7b47cbafc0d
—-
Tips penggunaan "this" pada JavaScript
https://medium.com/@sodiq.akanmu001/transform-your-code-with-the-magic-of-this-in-javascript-a9a48bb1bf25
#navbar #dropdown #responsive #indexedDb #this
https://www.freecodecamp.org/news/how-to-build-a-responsive-navigation-bar-with-dropdown-menu-using-javascript/
---
Latihan menggunakan Indexed Db database
https://blog.logrocket.com/using-indexeddb-complete-guide/
—-
Beberapa tips penting penggunaan JavaScript
https://javascript.plainenglish.io/10-super-useful-javascript-tricks-a7b47cbafc0d
—-
Tips penggunaan "this" pada JavaScript
https://medium.com/@sodiq.akanmu001/transform-your-code-with-the-magic-of-this-in-javascript-a9a48bb1bf25
#navbar #dropdown #responsive #indexedDb #this
freeCodeCamp.org
How to Build a Responsive Navigation Bar with a Dropdown Menu using JavaScript
By Victor Eke Navigation bars are essential components used a lot in websites and web apps. As a web developer, you will need to be able to customize them, either for a client project or a basic portfolio site. In this guide, you'll learn how to buil...
Beberapa pola yang dibuat dengan menggunakan CSS
https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl
—-
Ilustrasi penggunaan Flexbox CSS yang perlu diketahui
https://dev.to/arafat4693/the-only-css-flexbox-illustration-you-will-ever-need-4nnf
#css #flexbox
https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl
—-
Ilustrasi penggunaan Flexbox CSS yang perlu diketahui
https://dev.to/arafat4693/the-only-css-flexbox-illustration-you-will-ever-need-4nnf
#css #flexbox
DEV Community
I created 100+ unique CSS patterns | The best collection 🤩
After the CSS Loaders and the CSS Underline/Overlay animations, I am back with another big...
Melihat beberapa fitur baru dari ES2023
https://dev.to/jasmin/what-is-new-in-es2023-4bcm
—-
Pengenalan beberapa fitur baru dari JavaScript Object
https://dev.to/catherineisonline/javascript-for-beginners-objects-4khn
—-
Tips dan trik penggunaan TypeScript
https://dev.to/ruppysuppy/7-secret-typescript-tricks-pros-use-3ckg
#typescript #tips #es2023 #object
https://dev.to/jasmin/what-is-new-in-es2023-4bcm
—-
Pengenalan beberapa fitur baru dari JavaScript Object
https://dev.to/catherineisonline/javascript-for-beginners-objects-4khn
—-
Tips dan trik penggunaan TypeScript
https://dev.to/ruppysuppy/7-secret-typescript-tricks-pros-use-3ckg
#typescript #tips #es2023 #object
DEV Community
What's new in ES2023? 👀
Last year I wrote an article about the new features of ES2022 this year let's check out the new...
Beberapa tips penggunaan Chat GPT yang perlu diketahui
https://dev.to/hackertab_org/50-chat-gpt-prompts-every-software-developer-should-know-tested-9al
—-
Beberapa plugin Chat GPT yang perlu dicoba
https://dev.to/jon_snow789/top-10-chatgpt-plugins-you-cant-miss-1k68
—-
#openAI #chatGPT
https://dev.to/hackertab_org/50-chat-gpt-prompts-every-software-developer-should-know-tested-9al
—-
Beberapa plugin Chat GPT yang perlu dicoba
https://dev.to/jon_snow789/top-10-chatgpt-plugins-you-cant-miss-1k68
—-
#openAI #chatGPT
DEV Community
50 Chat GPT Prompts Every Software Developer Should Know (Tested)
In this article, we'll explore some awesome ChatGPT-4 prompts specifically tailored for software...
Beberapa keahlian JavaScript yang perlu diketahui
https://javascript.plainenglish.io/18-powerful-javascript-skills-for-senior-engineers-17c51990997e
---
Penjelasan komparasi antara variable yang sama tapi bernilai false
https://javascript.plainenglish.io/did-you-know-x-x-can-return-false-9c48ec84c572
---
Penjelasan tentang apa itu Nullish Coalescing
https://javascript.plainenglish.io/javascript-what-is-nullish-coalescing-a30f36b4d92f
---
Menambahkan line break pada HTML5 canvas
https://javascript.plainenglish.io/how-to-add-line-breaks-into-the-html5-canvas-with-filltext-f95ae79a6d67
---
#skill #canvas #nullish #coalescing
https://javascript.plainenglish.io/18-powerful-javascript-skills-for-senior-engineers-17c51990997e
---
Penjelasan komparasi antara variable yang sama tapi bernilai false
https://javascript.plainenglish.io/did-you-know-x-x-can-return-false-9c48ec84c572
---
Penjelasan tentang apa itu Nullish Coalescing
https://javascript.plainenglish.io/javascript-what-is-nullish-coalescing-a30f36b4d92f
---
Menambahkan line break pada HTML5 canvas
https://javascript.plainenglish.io/how-to-add-line-breaks-into-the-html5-canvas-with-filltext-f95ae79a6d67
---
#skill #canvas #nullish #coalescing
Medium
18 Powerful JavaScript Skills for Senior Engineers
Niche and useful skills,every senior engineers should master!
Beberapa library input form text editor yang dapat dicoba
https://javascript.plainenglish.io/13-flexible-and-scalable-rich-text-editors-to-try-in-2023-e32a93aa8de1
#library
https://javascript.plainenglish.io/13-flexible-and-scalable-rich-text-editors-to-try-in-2023-e32a93aa8de1
#library
Medium
13 Flexible and Scalable Rich Text Editors to Try in 2023
As front-end developers, we often need to add text content to our websites and applications. Unlike traditional text editors, rich text…
Panduan unit testing di React JS
https://dev.to/refine/a-comprehensive-guide-of-react-unit-testing-18bh
—-
Latihan penggunaan state management Zustand
https://dev.to/refine/how-to-use-zustand-3okc
—-
Membuat sistem penawaran real time dengan Next JS
https://dev.to/novu/building-a-bidding-system-with-nextjs-cg1
—-
Membuat daftar list yang panjang dengan Next JS
https://dev.to/github20k/building-the-biggest-list-of-useful-open-source-libraries-2ppk
#react #nextjs #zustand #library
https://dev.to/refine/a-comprehensive-guide-of-react-unit-testing-18bh
—-
Latihan penggunaan state management Zustand
https://dev.to/refine/how-to-use-zustand-3okc
—-
Membuat sistem penawaran real time dengan Next JS
https://dev.to/novu/building-a-bidding-system-with-nextjs-cg1
—-
Membuat daftar list yang panjang dengan Next JS
https://dev.to/github20k/building-the-biggest-list-of-useful-open-source-libraries-2ppk
#react #nextjs #zustand #library
DEV Community
A Comprehensive Guide of React Unit Testing
Author: Chidume Nnamdi Introduction Unit testing is a crucial step in the software...
Mengenal Tools berbasis AI untuk membantu pemrograman yang bernama Boxy AI
https://dev.to/codesandboxio/meet-boxy-your-new-ai-coding-assistant-161e
#ai #boxy #tools
https://dev.to/codesandboxio/meet-boxy-your-new-ai-coding-assistant-161e
#ai #boxy #tools
DEV Community
Meet Boxy, Your New AI Coding Assistant
Bring your ideas to life faster by having AI contextually explain, generate and refactor code.
Latihan dari Cand Dev membuat kalkulator umur dengan React JS
https://www.youtube.com/watch?v=v38u6Uf5hfs
#react #candDev #age #calculator
https://www.youtube.com/watch?v=v38u6Uf5hfs
#react #candDev #age #calculator
YouTube
Build Age Calculator App in React: Project for beginner
In this tutorial, we learn how to create an Age Calculator App using React, this project is best for beginner if you just starting learn React.
👨💻Code:
https://github.com/candraKriswinarto/birth-age
🔗Source:
- vite [https://vitejs.dev/guide/]
- date-fns…
👨💻Code:
https://github.com/candraKriswinarto/birth-age
🔗Source:
- vite [https://vitejs.dev/guide/]
- date-fns…
Membuat Docker Container untuk Node JS dan bantuan dari layanan Kinsta
https://www.smashingmagazine.com/2023/04/building-dockerizing-nodejs-app-stateless-architecture-kinsta/
#nodejs #kinsta #docker
https://www.smashingmagazine.com/2023/04/building-dockerizing-nodejs-app-stateless-architecture-kinsta/
#nodejs #kinsta #docker
Smashing Magazine
Building And Dockerizing A Node.js App With Stateless Architecture With Help From Kinsta — Smashing Magazine
Dockerizing your Node.js apps can lead to smashing success—offering consistency, easy debugging, and hassle-free dependency management. When you host this container on Kinsta, you also benefit from high-speed performance, robust security, and top-notch scalability.…