JavaScript Indonesia Channel

Latihan penting dari Smashing Magazine tentang membuat element range input yang memiliki bentuk desain sama ketika dibuka di semua browser

https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/

#range #input #smashingMagazine

Smashing Magazine

Creating A Custom Range Input That Looks Consistent Across All Browsers — Smashing Magazine

Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In this article, we’ll take a look at the quirkiness of the HTML range input and…

602 views23:36

JavaScript Indonesia Channel

Latihan bersama Josh Comeau tentang pembuat Gradient dengan menggunakan CSS

https://www.joshwcomeau.com/css/make-beautiful-gradients/

---

Latihan dasar menggunakan Form input untuk membuat text box di HTML

https://www.freecodecamp.org/news/text-box-in-html-the-input-field-html-tag/

---

Latihan dasar membuat animasi di dalam aplikasi web dengan library GSAP

https://blog.bitsrc.io/practical-guide-to-getting-started-with-gsap-greensock-animation-platform-21ff9638ea70

---

#css #gradient #joshComeau #gsap #html #input

Joshwcomeau

Make Beautiful Gradients in CSS (with linear-gradient, radial-gradient, or conic-gradient) • Josh W. Comeau

Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB colors. Fortunately, we can work around this quirk, and create beautiful, lush, saturated gradients.

589 views01:49

JavaScript Indonesia Channel

Latihan bertahap membuat editor input form pada halaman web

https://www.smashingmagazine.com/2022/02/develop-text-editor-web/

#input #form #smashingMagazine

Smashing Magazine

How To Develop A Text Editor For The Web — Smashing Magazine

How do text typing and editing work on the web? Although this process might seem straightforward, there is a lot of technical nuance behind its apparent simplicity. This article looks at how typing on the web works.

830 views23:41

JavaScript Indonesia Channel

Mengenal template dasar HTML5 untuk file index.html dan penjelasan beberapa tag di dalamnya

https://www.freecodecamp.org/news/html-starter-template-a-basic-html5-boilerplate-for-index-html/

---

Beberapa tipe input HTML yang jarang diketahui dan dipakai

https://javascript.plainenglish.io/html-input-types-you-dont-know-about-e885142a0506

---

Menggunakan semantic HTML dan ARIA agar mempermudah accessibility halaman web

https://dev.to/fig781/website-accessibility-with-html-17ap

---

#html #html5 #boilerplate #aria #semantic #accesibility #input

freeCodeCamp.org

HTML Starter Template – A Basic HTML5 Boilerplate for index.html

By Dillion Megida HTML has different tags, some of which have semantic meanings. A basic boilerplate for an HTML file looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...

349 views00:14

JavaScript Indonesia Channel

Latihan membuat Select Input Component dengan React JS, bersama Web Dev Simplified

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

#input #select #react #webdevsimplified

YouTube

This Is The Perfect Project For Your React/TypeScript Resume

PropelAuth: https://bit.ly/PropelAuthWDS

Select components are one of the most important components you will use in React, but how exactly do you create a good select component. In this video I will breakdown how to create a select component in React using…

416 views00:53

JavaScript Indonesia Channel

Membuat form dengan tampilan credit card bersama Web Dev Simplified

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

#webdevsimplified #credit #form #input

YouTube

How To Create This Advanced Credit Card Form With CSS/JavaScript

I recently stumbled upon a really cool CodePen of some credit card inputs and one design in particular stuck out to me. I spent a bunch of time recreating it...

805 views01:02

JavaScript Indonesia Channel

Latihan dari Dcode tentang cara mendeteksi perubahan di dalam input form dengan JavaScript

https://youtu.be/TuDp9m1zYww

#input #form #change #dcode

YouTube

How to Detect User Input with JavaScript

In today's video I'll be going over a few techniques to detect changes to input fields or keyboard events with JavaScript. This is perfect for instant form validation or building games on the web.

The 4 events covered are onchange, oninput, onkeydown and…

737 views23:05

JavaScript Indonesia Channel

Pengenalan tentang event delegation di JavaScript

https://www.freecodecamp.org/news/event-delegation-javascript/

—-

Membuat clear button di dalam input element

https://javascript.plainenglish.io/how-to-put-a-clear-button-inside-an-html-text-input-box-2b392864e87b

---

#event #delegation #input #button

freeCodeCamp.org

Event Delegation in JavaScript –Explained with an Example

By Dillion Megida Event Delegation is a pattern based upon the concept of Event Bubbling. It is an event-handling pattern that allows you to handle events at a higher level in the DOM tree other than the level where the event was first received. Ther...

583 views01:40

JavaScript Indonesia Channel

Latihan membuat animasi label input dengan menggunakan CSS bersama Online Tutorials

https://youtu.be/kcKkQgRz6K8

#css #onlinetutorials #html #label #input

YouTube

CSS Input Label Animation | Floating Placeholder Text @OnlineTutorialsYT

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…

452 views23:48

JavaScript Indonesia Channel

Latihan penting menambahkan masking input di Vue JS input field

https://blog.logrocket.com/creating-vue-masked-input-fields/

#vue #input #masking

LogRocket Blog

Creating Vue.js masked input fields - LogRocket Blog

Implement masked inputs in Vue.js in this tutorial, which includes reference GIFs and images alongside code demos for the Maska library.

828 views01:23

JavaScript Indonesia Channel

Membaca route parameter dengan Input decorator di Angular

https://www.freecodecamp.org/news/use-input-for-angular-route-parameters/

#angular #input #router

freeCodeCamp.org

How to Use @Input() to Read Angular Route Parameters

By Deborah Kurata One of the new features in Angular v16 is automatic route parameter mapping using the @Input() decorator. What does that mean? Well, you may have code that reads route parameters using the Activated Route service, like this: priva...

459 views01:23

JavaScript Indonesia Channel

Pengenalan React Hooks untuk membuat forms input

https://youtu.be/_tUdtt6H5CE

#hooks #react #input

YouTube

This New React Hook Changes How You Use Forms

React Simplified Course: https://reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-_tUdtt6H5CE

React recently announced a new experimental hook that makes working with forms so much easier. This hook solves issues…

661 views00:57

JavaScript Indonesia Channel

7 React Projects to Build in 2024

https://www.freecodecamp.org/news/react-projects-to-build-in-2024/

---

Common React Mistakes Front End Developers Make

https://blog.openreplay.com/common-react-mistakes-front-end-developers-make/

---

Securing User PIN Input In React

https://blog.openreplay.com/securing-pin-input/

---

Next.js 14 - Server Actions TUTORIAL | Type Safety, Error Handling, Pending States
https://www.youtube.com/watch?v=UKupfEuUc1M

—-

Top 10 Mistakes To Avoid When Using React in 2024
https://blog.bitsrc.io/10-mistakes-when-building-react-apps-in-2024-9a3ab6775348

—-

#react #project #pin #input #security #tips #nextjs

freeCodeCamp.org

7 React Projects to Build in 2024

To be confident with using React, you need to build real-world projects. But what projects are worth building in 2024? I have put together a list of seven projects that I think are ideal for becoming a confident React developer, from simple to comple...

753 views23:29

JavaScript Indonesia Channel

How To Create Responsive Image Slider In HTML CSS & Javascript
https://www.youtube.com/watch?v=tthIRPzN61Y

—-

nth-child() vs nth-of-type() Selectors in CSS – What’s the Difference?
https://www.freecodecamp.org/news/nth-child-vs-nth-of-type-selector-in-css/

—-

How to Use the <input> Element to Access a Mobile Device's Camera
https://www.freecodecamp.org/news/how-to-use-input-element-to-access-camera-on-mobile/

—-

#css #image #slider #html #input #selector

YouTube

How To Create Responsive Image Slider In HTML CSS & Javascript

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…

872 views01:01

JavaScript Indonesia Channel

Create Your Own Input Field with JavaScript Web Components
https://www.youtube.com/watch?v=OqtexwJvI3I

—-

18 JavaScript Tips: You Should Know for Clean and Efficient Code
https://blog.stackademic.com/18-javascript-tips-you-should-know-for-clean-and-efficient-code-1e185353a542

—-

6 Cool Modern JavaScript Features Most Developers Don’t Know About
https://javascript.plainenglish.io/6-cool-modern-javascript-features-most-developers-dont-know-about-fc9ad774645a

—-

#web #components #dcode #input #field

YouTube

Create Your Own Input Field with JavaScript Web Components

In today's video I'll show you how to build your own custom input field using web components. It'll support features such as adding an error message programmatically, and forwarding on some attributes.

🏫 My Udemy Courses - https://www.udemy.com/user/domenic…

451 views00:21

JavaScript Indonesia Channel

How to Style Username and Password Input Fields — HTML & CSS Tutorial
https://www.youtube.com/watch?v=RFGiYHPKWgg

#css #html #input #dcode

YouTube

How to Style Username and Password Input Fields — HTML & CSS Tutorial

In today's video I'll show you how to build a set of inputs to represent a username and password combo for your website. We then use CSS to add some extra flavour to the design.

🏫 My Udemy Courses - https://www.udemy.com/user/domenic-corso/
🎨 Download my…

458 views00:58

JavaScript Indonesia Channel

Get Selected Text with JavaScript: Quick & Easy Tutorial

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

#text #input #dcode

YouTube

Get Selected Text with JavaScript: Quick & Easy Tutorial

In this video, let's have a look at how to get the currently selected text on a web page using JavaScript. I'll also be showing you how to react to when your user changes their text selection.

For your reference, check this out:
https://developer.mozilla.org/en…

378 views00:22

JavaScript Indonesia Channel

An Introduction to HTML for Beginners

https://www.freecodecamp.org/news/introduction-to-html/

---

HTML input types with examples

https://dev.to/wasifali/html-input-types-with-examples-4n5c

---

#html #input

freeCodeCamp.org

An Introduction to HTML for Beginners

HTML, which stands for HyperText Markup Language, serves as the foundation of web development. It enables you to create interactive web pages, structure content, and effectively communicate your message. In this guide, we'll explore HTML comprehensi...

466 views08:27

JavaScript Indonesia Channel

Array With — In 2 Minutes — JavaScript
https://www.youtube.com/watch?v=qtT-MDviMjA

—-

Learn Closures In 13 Minutes
https://www.youtube.com/watch?v=47SPG8TvUXA

—-

Learn TypeScript - Full Course for Beginners
https://www.youtube.com/watch?v=SpwzRDUQ1GI

—-

Create a Pin Input with HTML, CSS & JavaScript
https://www.youtube.com/watch?v=9XhiSNjg9eo

—-

Cursor In & Out Ripple Effect using CSS & Javascript
https://www.youtube.com/watch?v=KoAlhCbekag

—-

#array #dcode #closure #pin #input

YouTube

Array With — In 2 Minutes — JavaScript

The array "with" method in JavaScript lets you make a copy of an existing array, but change a value at a specified index. It also supports negative indexes.

For your reference, check this out:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe…

309 views00:59

JavaScript Indonesia Channel

HTML5 Input Types You May Not Be Using

https://blog.openreplay.com/html5-input-types-you-may-not-be-using/

—-

CSS Magic: Elegant One Liners
https://blog.openreplay.com/css-elegant-one-liners/

—-

Understanding the !important Property in CSS
https://blog.openreplay.com/understanding-the-important-property-in-css/

—-

Unveiling 10 Hidden Gems of HTML
https://blog.openreplay.com/unveiling-ten-hidden-gems-of-html/

—-

Custom Data Attributes in HTML5
https://blog.openreplay.com/custom-data-attributes-in-html5/

—-

#html #css #input #form

Openreplay

HTML5 Input Types You May Not Be Using

Learn about components you may need

451 views01:01

About

Blog

Apps

Platform