JavaScript Indonesia Channel

Latihan membuat Line Chart dengan JavaScript

https://www.freecodecamp.org/news/how-to-make-line-charts-in-javascript/

---

Membuat fungsi Scroll to Top dengan JavaScript

https://javascript.plainenglish.io/how-to-scroll-back-to-the-top-of-a-scrollable-div-with-javascript-e3e8ff690011

---

Tips dan trik dalam pemrograman JavaScript

https://javascript.plainenglish.io/master-these-8-javascript-development-tips-to-avoid-working-overtime-54c0bddaa311

---

#line #chart #tips #scroll #top

freeCodeCamp.org

Line Charts Tutorial – How to Create a Line Graph in JavaScript

Data visualization is a vast field with so many different types of charts [https://datavizcatalogue.com/] to learn and create. But there are several basic, evergreen graphs that every data designer and web developer dealing with analytics should know how…

699 views00:13

JavaScript Indonesia Channel

Membuat web portfolio dengan React JS dan animasi scroll

https://blog.logrocket.com/building-react-portfolio-website-locomotive-scroll/

#react #gsap #portfolio #scroll

LogRocket Blog

Building a React portfolio website with Locomotive Scroll - LogRocket Blog

This article will take a look at the react-locomotive-scroll package, a React library for handling and creating different scroll animations.

755 views01:44

JavaScript Indonesia Channel

Beberapa cara untuk implementasi infinite scroll menggunakan JavaScript

https://javascript.plainenglish.io/3-ways-to-implement-infinite-scroll-7b2b7e47d58d

---

Beberapa cara untuk membalik nilai String di Javascript

https://www.freecodecamp.org/news/how-to-reverse-a-string-in-javascript-in-3-different-ways-75e4763c68cb/

---

Beberapa Scope yang terdapat pada JavaScript

https://javascript.plainenglish.io/theres-always-one-you-don-t-know-the-9-scopes-of-js-722964fa0c10

---

#scroll #infinite #string #reverse #scope

Medium

3 Ways To Implement Infinite Scroll

From the Efficient IntersectionObserver API to the Simple scroll and wheel Events

1.0K views23:48

JavaScript Indonesia Channel

Pengenalan data binding di React JS

https://www.joshwcomeau.com/react/data-binding/

---

Mengenal teknik fetching data di Next JS

https://betterprogramming.pub/a-deep-dive-into-next-js-13-data-fetching-220d7cca8066

---

Cara implementasi infinite scroll di Next JS

https://www.freecodecamp.org/news/how-to-implement-infinite-scroll-in-next-js/

---

#react #nextjs #scroll #infinite

Joshwcomeau

Data binding in React: how to work with forms in React • Josh W. Comeau

As developers, we don't like working with forms, but they're a critical part of most web applications! In this tutorial, you'll learn exactly how to wire up all of the different form controls in React. Never forget how to data-bind a checkbox or radio button…

896 views22:51

JavaScript Indonesia Channel

Pengenalan scroll animation dengan CSS

https://dev.to/link2twenty/future-of-css-scroll-animations-52ia

---

Pengenalan element property :not dan :has pada CSS

https://javascript.plainenglish.io/understanding-not-and-has-in-css-c5b013b4905e

---

#css #scroll #animation #has #not

DEV Community

Future of CSS: Scroll Animations

Today we're going to be looking at scroll based animations as a part of animation-timeline, at the...

468 views00:46

JavaScript Indonesia Channel

Cara menyimpan posisi Scroll dengan JavaScript

https://medium.com/front-end-weekly/boost-user-experience-memorizing-scroll-position-with-javascript-2adfb6ca6c2b

#scroll #position #javascript

Medium

Boost User Experience: Memorizing Scroll Position with JavaScript

Never lose your place: Learn how to remember the scroll position using JavaScript

491 views01:20

JavaScript Indonesia Channel

Latihan dari Web Dev Simplified membuat scroll animation dengan CSS yang menarik

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

#css #webdevsimplified #scroll #animation

YouTube

How To Create This Unbelievable CSS Scroll Animation

I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. I even decided to make the challenge more difficult by doing nearly everything in just plain CSS instead of doing it all in JavaScript. In this video…

531 views01:33

JavaScript Indonesia Channel

Membuat Navbar dengan fungsi scrollable di React JS

https://dev.to/ryaddev/building-a-scrollable-navbar-with-react-a-step-by-step-guide-268p

#scroll #navbar #react

DEV Community

Building a Scrollable Navbar with React: A Step-by-Step Guide

Are you looking to create an engaging and interactive website with a dynamic scrolling navbar? You’ve...

801 views00:21

JavaScript Indonesia Channel

CandDev - How to Create Infinite Scroll in React | TanStack React Query
https://www.youtube.com/watch?v=DOKp4KiVIb4

#react #tanstack #reactQuery #infinite #scroll

YouTube

How to Create Infinite Scroll in React | TanStack React Query

In this video we are gonna learn how to create infinite scroll in react, we can use button "load more" to show more data, also we are gonna use "react-intersection-observer" to make it auto fetch when we scroll down.

👨‍💻Code:
https://github.com/candraK…

1.6K views01:22

JavaScript Indonesia Channel

Cand Dev - How to Create Horizontal Scroll Animation with Just CSS
https://www.youtube.com/watch?v=tv9ZR6Dw2js

#css #scroll #animation #horizontal

YouTube

How to Create Horizontal Scroll Animation with Just CSS

Animation is always fun, so let's create a horizontal image scroll effect with pure CSS.

🔗Source:
[learn flexbox in here] https://css-tricks.com/snippets/css/a-guide-to-flexbox

👋🏻
https://mynameischand.tech

🌎 Find Me Here:
Instagram : https://www.inst…

466 views23:44

JavaScript Indonesia Channel

Online Tutorials - Simple Scroll Animation using CSS & Javascript
https://www.youtube.com/watch?v=fJylA5cP-fM

#css #animation #scroll

YouTube

Javascript Scroll Animation

Master Frontend to Backend 👇
https://bit.ly/frontend-to-backend-ebook
------------------
Revolutionize projects with our advanced source code. Elevate innovation, accelerate development, and gain a competitive edge. Your key to success is here. Transform…

713 views00:12

JavaScript Indonesia Channel

All About Infinite Scrolling using React and JavaScript
https://levelup.gitconnected.com/infinite-scrolling-using-react-and-javascript-aa587e9009db

—-

Zod: Why you’re using TypeScript wrong
https://medium.com/ekino-france/zod-why-youre-using-typescript-wrong-b0c1583df089

—-

React Js Clean Code Guide
https://harendra21.medium.com/react-js-clean-code-guide-7d7c63a10726

—-

5 React useState Mistakes That Can Put Your Job at Risk: Avoid These Pitfalls!
https://medium.com/@Evelyn.Taylor/%EF%B8%8F-5-react-usestate-mistakes-that-can-put-your-job-at-risk-avoid-these-pitfalls-95848f94eace

——

5 Common Mistakes with useEffect
https://javascript.plainenglish.io/5-common-mistakes-with-useeffect-4475fa5bcfd3

—-

#react #infinite #scroll #useEffect #useState

Medium

All About Infinite Scrolling using React and JavaScript

Please subscribe my youtube channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg

736 views23:13

JavaScript Indonesia Channel

How to Learn React in 2024 – A Step-by-Step Guide
https://www.freecodecamp.org/news/how-to-learn-react-step-by-step/

—-

MERN Stack Roadmap – How to Learn MERN and Become a Full-Stack Developer
https://www.freecodecamp.org/news/mern-stack-roadmap-what-you-need-to-know-to-build-full-stack-apps/

—-

Enhancing Performance With React Query's Caching
https://blog.openreplay.com/enhancing-performance-with-react-query-caching/

—-

Enhancing User Engagement: Seamless User Onboarding In React With Intro.Js
https://blog.openreplay.com/seamless-user-onboarding-with-introjs/

—-

Working With Environment Variables In React
https://blog.openreplay.com/working-with-environment-variables-in-react/

—-

Implementing React scroll animations with Framer Motion
https://blog.logrocket.com/react-scroll-animations-framer-motion/

—-

#react #learning #nextjs #scroll #env #onboarding #introjs

freeCodeCamp.org

How to Learn React in 2024 – A Step-by-Step Guide

There's never been a better time to learn React than in 2024. In this comprehensive guide, I'll show you how I would go from knowing nothing about React to becoming a job-ready, junior React developer in 3 to 6 months. Keep in mind that becoming a sk...

820 views01:15

JavaScript Indonesia Channel

Next.js 14 Authentication Tutorial with Clerk
https://www.youtube.com/watch?v=UqjJLhCm2-k

—-

Horizontal Scroll Animation in React with Pure CSS
https://www.youtube.com/watch?v=Utla0G3krAg

#candDev #react #nextjs #auth #css #scroll

YouTube

Next.js 14 Authentication Tutorial with Clerk

In this tutorial, we'll learn how to implement Clerk with Next.js, using the latest version of this technology. By following this video, you will see how easy it is to add authentication to your Next.js project

👨‍💻Code:
https://github.com/candraKriswinarto/nextjs…

411 views00:00

JavaScript Indonesia Channel

Tailwind & JavaScript Project - Products Filtering UI

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

—-

Javascript Scroll Animation | scrollTrigger
https://www.youtube.com/watch?v=9IeiowbVMNU

—-

#tailwind #scroll #animation #trigger

YouTube

Tailwind & JavaScript Project - Products Filtering UI

In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript.

Code:
https://codepen.io/bradtraversy/pen/oNVKXBo

20 Projects Course:
https://www.traversymedia.com/20-Vanilla-JavaScript…

505 views00:12

JavaScript Indonesia Channel

Vanilla JavaScript Infinite Scrolling Image Slider
https://www.youtube.com/watch?v=-VHF1Gxku7E

#scroll #infinite #slider

YouTube

Vanilla JavaScript Infinite Scrolling Image Slider

All Source Code : https://www.patreon.com/onlinetutorials
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…

471 views23:46

JavaScript Indonesia Channel

How to Hide Navbar on Scroll Down & Show on Scroll Up using Javascript

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

#html #css #navbar #scroll

YouTube

How to Hide Navbar on Scroll Down & Show on Scroll Up using Javascript

542 views23:36

JavaScript Indonesia Channel

How to Create Infinite Scrolling in React Using the Intersection Observer API

https://www.freecodecamp.org/news/infinite-scrolling-in-react/

---

How to Create an Inventory List with React useReducer, Axios, and JSON Server

https://www.freecodecamp.org/news/create-an-inventory-list-with-react-usereducer-axios-and-json-server/

---

useActionState — A New Hook in React

https://dev.to/random_ti/useactionstate-a-new-hook-in-react-5blm

---

How to Use Cypress for End-to-End Testing Your React Apps

https://www.freecodecamp.org/news/cypress-for-end-to-end-testing-react-apps/

---

Top 10 React.js Tips and Tricks Everyone Should Know

https://dev.to/vyan/top-10-reactjs-tips-and-tricks-everyone-should-know-2m18

---

#react #cypress #infinite #scroll #tips

freeCodeCamp.org

How to Create Infinite Scrolling in React Using the Intersection Observer API

Hi fellow developers! Have you ever wondered how social media apps like Facebook and Instagram keep you scrolling endlessly through your feed? This user experience, designed to load new content on demand, uses a technique called infinite scrolling. T...

326 views00:30

JavaScript Indonesia Channel

Array Unshift — In 2 Minutes — JavaScript
https://www.youtube.com/watch?v=sZ5q4iCMdAA

—-

Object Freeze — In 2 Minutes — JavaScript
https://www.youtube.com/watch?v=QaQHeF9KYtA

—-

How to Animate Image on Scroll With Vanilla JavaScript
https://www.youtube.com/watch?v=EP_7A6L4La0

—-

Asynchronous JavaScript Course – Async/Await , Promises, Callbacks, Fetch API
https://www.youtube.com/watch?v=OFpqvaJ3QYg

—-

#array #unshift #freeze #Object #async #promise #callback #scroll #image

YouTube

How To Add To the Start of Arrays - JavaScript Array Unshift (In 2 Mins)

The array "unshift" method in JavaScript lets you add items to the beginning of an array. This is opposed to "push" which adds items to the end of the array. Let's have a look at it and it's intricacies.

For your reference, check this out:
https://devel…

279 views00:31

JavaScript Indonesia Channel

Horizontal Page Scroll using Vanilla Javascript
https://www.youtube.com/watch?v=b307v2azSrc

—-

Removing Image Backgrounds with CSS

https://blog.openreplay.com/removing-image-backgrounds-with-css/

—-

@property Is One Of The Coolest New CSS Features
https://www.youtube.com/watch?v=sd34qnxSeoU

—-

CSS Frameworks vs Custom CSS – What's the Difference?

https://www.freecodecamp.org/news/css-frameworks-vs-custom-css/

—-

Integrate Lightning CSS into your project

https://blog.openreplay.com/integrate-lighting-css-into-your-project/

#css #html #scroll

YouTube

Horizontal Page Scroll using Vanilla Javascript

468 views23:27