JavaScript Indonesia Channel

Membuat aplikasi fullstack JavaScript dengan menggunakan React Next JS dan Firebase Database

https://blog.logrocket.com/building-a-fullstack-application-with-next-js-and-firestore-db/

---

Membuat fungsi push notifications dengan Firebase Cloud Messaging ke aplikasi React JS

https://blog.logrocket.com/push-notifications-with-react-and-firebase/

---

Latihan membuat halaman carousel sederhana di React JS

https://dev.to/rakumairu/simple-react-carousel-24m0

---

Membuat tampilan menu Tab dengan React JS

https://dev.to/ziratsu/create-lovely-react-tabs-4g41

---

Konfigurasi Next JS untuk menggunakan TypeScript , ESLint, Jest, Enzyme dan Storybook

https://medium.com/javascript-in-plain-english/how-to-setup-next-js-typescript-eslint-storybook-jest-enzyme-610451591df0

—-

Membuat halaman dengan mode AMP (Accelerated Mobile Pages) dengan menggunakan Next JS

https://medium.com/javascript-in-plain-english/next-js-amp-list-65b27cef0db6

#firebase #react #nextjs #tabs #carousel #fcm #notification #amp

LogRocket Blog

Next.js and Firebase DB full-stack app tutorial | LogRocket Blog

Learn how to set up Firestore's Cloud Firestore and communicate with the database through a Next.js app with API endpoints.

1.9K viewsRian YW, 00:14

JavaScript Indonesia Channel

Latihan dari Traversy Media membuat slider seperti carousel yang berfungsi pada smartphone pada layar sentuh.

https://youtu.be/5bxFSOA5JYo

#slider #carousel #touch

YouTube

Build a Touch Slider with HTML, CSS & JavaScript

Build a full screen touch slider with HTML, CSS & JavaScript

Full Screen Touch Slider Repo:
https://github.com/bushblade/Full-Screen-Touch-Slider

React Component Repo:
https://github.com/bushblade/react-touch-drag-slider

YouTube Video Codepen:
https:/…

898 viewsRian YW, 01:03

JavaScript Indonesia Channel

Latihan dari Online Tutorials membuat tampilan Responsive Menu dengan Hover Effect

https://youtu.be/NB-giDS97DU

---

Mengatur tampilan dan susunan layout dengan CSS Grid

https://youtu.be/VWYmx-zXSLk

---

Menambahkan efek Gradient di bagian border pada element Card

https://youtu.be/1zFlSLD01Uw

---

Membuat jam analog dengan tampilan Glassmorphism

https://youtu.be/Li2apfUzKeE

---

Latihan menggunakan Swiper JS untuk menampilkan halaman testimonial dengan carousel effect

https://youtu.be/E7mGqt7v3Uc

#css #grid #hover #effect #carousel #glassmorphism

YouTube

Align Item Using CSS Grid | Tutorial For Beginners

Also Watch : Align Text Using CSS Flex | Tutorial For Beginners
https://youtu.be/04_8QvV0Sew
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exper…

732 viewsRian YW, 00:45

JavaScript Indonesia Channel

Latihan panjang membuat CSS Carousel dengan navigasi menggunakan fungsi JavaScript

https://css-tricks.com/a-super-flexible-css-carousel-enhanced-with-javascript-navigation/

---

Tips optimasi memuat halaman dengan teknik content-visibility auto

https://web.dev/content-visibility/

---

#css #carousel #contentVisibility

CSS-Tricks

A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation | CSS-Tricks

Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a

638 viewsRian YW, 23:32

JavaScript Indonesia Channel

Latihan membuat Carousel dengan CSS, JavaScript, dan HTML

https://css-tricks.com/a-super-flexible-css-carousel-enhanced-with-javascript-navigation/

---

Pengenalan Resize Observer API untuk membangun responsive UI

https://javascript.plainenglish.io/how-to-build-a-highly-responsive-ui-with-resizeobserver-api-e645d3c578d5

---

Mengenal CSS Pseudo Class Selector seperti :where dan :is

https://itnext.io/css-where-is-pseudo-class-functions-33964d0de461

#css #carousel #where #is #selector #resizeObserver

CSS-Tricks

A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation | CSS-Tricks

Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a

1.1K viewsRian YW, 00:22

JavaScript Indonesia Channel

Beberapa referensi framework CSS yang penggunaannya bersifat utility CSS

https://blog.logrocket.com/top-utility-first-css-frameworks/

---

Latihan dari Freecodecamp tentang pembuatan beberapa layout HTML dengan bantuan CSS Grid

https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/

---

Membuat Carousel yang bersifat infinite dengan CSS

https://dev.to/wparad/making-an-infinite-css-carousel-2dek

---

#css #utility #carousel #grid #cssGrid #freecodecamp

LogRocket Blog

Top utility-first CSS frameworks - LogRocket Blog

Compare Tailwind, Tachyons, Shed.css, Basscss, and Expressive to learn how your project can benefit from a utility-first CSS framework.

769 viewsRian YW, 23:29

JavaScript Indonesia Channel

Latihan panjang bersama John Komarnicky membuat Slider atau Carousel Component di Vue JS 3

https://youtu.be/rZQ72SFGYwk

#vue #johnKomarnicky #carousel #slider

YouTube

Build a Dynamic & Reusable Carousel/Slider Component Using Vue 3 & Composition API

In this video we build out a dynamic & reusable carousel/slider component using vue 3. We create this using the composition api, slots & props.
-----------------------------------------------------------------------------------------------------
Repo:…

679 viewsRian YW, 00:58

JavaScript Indonesia Channel

Latihan bersama Dcode tentang membuat Carousel sederhana dengan HTML, JavaScript dan CSS

https://youtu.be/XtFlpgaLbZ4

---

Tips dari Junior Developer Central tentang menambahkan Box Shadow di sisi element dengan CSS

https://youtu.be/xnwlf18jUyI

---

Pengenalan tentang Image Tag di HTML

https://www.freecodecamp.org/news/img-html-image-tag-tutorial/

#html #css #carousel #dcode #boxshadow #juniorDeveloperCentral

YouTube

How to Create a Carousel (Basic) - HTML, CSS & JavaScript Web Design Tutorial

Link to SOURCE CODE:
https://codepen.io/dcode-software/pen/BaRMvJo

In today's video I'll be showing you how to create a basic carousel using HTML, CSS and JavaScript. This is a very simple solution with no fancy animations but as a result, doesn't require…

968 views01:28

JavaScript Indonesia Channel

Tips membuat carousel di web biar ga asal jadi dan malah menghambat performa web app

https://blog.bitsrc.io/dont-let-carousels-kill-your-application-ba5ce27f6d10

#carousel #tips #performance

Medium

Don’t Let Carousels Kill Your Application

Website carousel best practices for better UX and Performance

361 views00:45

JavaScript Indonesia Channel

Cara melakukan konfigurasi ESLint dan Prettier di project React JS

https://dev.to/knowankit/setup-eslint-and-prettier-in-react-app-357b

---

Membuat halaman Carousel dengan library React Slick

https://betterprogramming.pub/build-an-image-carousel-with-react-slick-7afd7fee566e

---

Membuat drag and drop upload dengan library Dropzone UI

https://dev.to/jinssj3/dropzone-ui-the-new-way-of-providing-drag-and-drop-file-uploads-in-react-app-5djd

---

#react #eslint #prettier #dropzone #carousel

DEV Community

Setup ESLINT and PRETTIER in React app

Setting up ESlint and Prettier is tedious for beginners, I know this because I have faced this issue...

696 views00:27

JavaScript Indonesia Channel

Melakukan migrasi ke Firebase SDK 9 pada React JS

https://blog.logrocket.com/refactor-react-app-firebase-v9-web-sdk/

---

Konsep pengenalan Functional Programming di React JS

https://blog.logrocket.com/fundamentals-functional-programming-react/

---

Membuat gambar Carousel dengan library React Slick

https://blog.logrocket.com/create-carousel-react-slick/

---

Menambahkan fungsi filter di Datatable dengan React Table library

https://www.robinwieruch.de/react-table-filter

---

#react #firebase #table #carousel #functional

LogRocket Blog

Refactor a React app with the new Firebase v9.x Web SDK - LogRocket Blog

The modular format of the new Firebase v9.x Web SDK provides a faster web experience than its v8.x predecessor.

589 views00:23

JavaScript Indonesia Channel

Latihan membuat gambar Carousel dengan HTML, CSS, JavaScript dari channel Web Dev Simplified

https://youtu.be/9HcxHDS2w1s

#webdevsimplified #carousel

YouTube

How To Create An Animated Image Carousel With CSS/JavaScript

Free CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html

Image carousels are some of the oldest web design staples that continue to be incredibly popular to this day. In this video I will show you how to create your very own…

873 views00:33

JavaScript Indonesia Channel

Memperkenalkan library Swiffy Slider, library untuk membuat Carousel dan Slider dengan mudah dan menggunakan JavaScript murni

https://github.com/dynamicweb/swiffy-slider

#slider #carousel #library

GitHub

GitHub - dynamicweb/swiffy-slider: Super fast carousel and slider with touch for optimized websites running in modern browsers.

Super fast carousel and slider with touch for optimized websites running in modern browsers. - dynamicweb/swiffy-slider

659 views01:15

JavaScript Indonesia Channel

Latihan bersama Dcode dalam. membuat halaman landing page atau home page yang berisi pintasan halaman atau App Screen, dan ditambahkan Swiper JS untuk carousel nya

https://youtu.be/mQZ12wNXYXU

#dcode #carousel #app #landing #page #swiper

YouTube

Build Your Own App Screen with JavaScript and CSS Grid

View the SOURCE CODE:
https://codepen.io/dcode-software/pen/NWaJXGq

In today's video we'll be building an app screen using HTML, CSS and JavaScript. This is easily done with the help of Swiper - an awesome library to create touch friendly slides and carousels.…

799 views00:50

JavaScript Indonesia Channel

Membuat fungsi horizontal scrolling dengan menggunakan CSS, bersama Kevin Powell

https://www.youtube.com/watch?v=3yfswsnD2sw

#kevinPowell #carousel #horizontal #scroll

YouTube

Create a horizontal media scroller with CSS

Horizontal scrolling components are becoming more and more common, so let's look at the CSS behind them!

💻 The starting code: https://codepen.io/kevinpowell/pen/NWwNvEG
💻 The finished version: https://codepen.io/kevinpowell/pen/ExbKBQa

🔗 Links
✅ Replay…

828 views00:30

JavaScript Indonesia Channel