Search Results

Blink int LED_PIN = 2; void setup() { // put your setup code here, to run once: pinMode(LED_PIN,OUTPUT); } void loop() { // put your main code here, to run repeatedly: delay(100); digitalWrite(LED_PIN,HIGH); // turn the LED on (HIGH is the voltage...

Client Functions: discord.Client(): Creates a new Discord client. client.run(TOKEN): Connects the client to Discord using the provided token. client.logout(): Logs the client out of Discord. client.get_channel(id): Retrieves a channel by ID. client.ge...

Discord.py คืออะไร? Discord.py เป็น library ของ Python เพื่อใช้ในการสร้าง Discord bots. โดยมีการออกแบบเพื่อให้สะดวกในการใช้และทำงานร่วมกับ Discord API. ทำให้สามารถ สร้าง Bot อเนกประสงค์ที่สามารถโต้ตอบและดำเนินการฟังก์ชันต่างๆ ภายในเซิร์ฟเวอร์ Discord ได้ S...

Ping Pong Bot คืออะไร? หลักการของปิงปองบอทคือเมื่อ user พิมพ์ข้อความว่า "ping" ลงใน server ตัวบอทของเราก็จะส่งข้อความว่า "pong" กลับมานั่นเอง โดยในการสร้างปิงปองบอทนั้น เริ่มจาก สร้าง Ping Pong Bot 1. สร้าง discord connection  ขั้นแรกให้น้องๆสร้างไฟล์ที่ช...

ให้ต่อวงจรในรูปแบบนี้ Personal Hotspot ในเวิร์คชอปนี้ เราจะใช้ Hotspot แยกของแต่ละกลุ่ม โดยแต่ละกลุ่มสามารถเลือก 1 เครื่องในการแชร์ฮอตสปอร์ตให้กับ ESP32 board การแชร์ฮอตสปอร์ตจากคอมพิวเตอร์ สามารถทำได้โดยเปิด Control Plane แล้วกดคลิ๊กขวาที่ Mobile Hotspot > G...

Deploy การ Deploy คือการที่ทำให้เว็บไซต์ของเราที่อยู่ภายในวงเน็ตเวิร์คให้ขึ้นไปอยู่บนเซิร์ฟเวอร์ เพื่อให้สามารถเข้าถึงจากสาธารณะได้ ถึงแม้คอมพิวเตอร์ของเราจะสามารถทำงานเป็นเซิร์ฟเวอร์ได้ แต่คอมพิวเตอร์ของเรานั้นไม่มี IP address ที่ทำให้ผู้อื่นสามารถเข้าถึงจาก...

MUI ( Material UI )   MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components. Material ...

Responsive Design  Responsive design is an approach to web design in which the interface adapts to the device's layout, facilitating usability, navigation and information seeking.   Break Point ?  Each breakpoint (a key) matches with a fixe...

UI framework / CSS frameworks in the frontend development they are have many way to styles your web application for example pure CSS style, SCSS is a pre processing style with CSS, Tailwind, Bootstraps, Material UI, ChakraUI, AntUI and other more. CSS Fram...

Figure1. Front-End Front-end development refers to the process of creating the user interface and user experience of a website or web application. It involves the design and implementation of the visible aspects of a website that users interact with direc...

In traditional web development, when you create a form, the browser takes care of most things. React, however, gives us more control. Instead of letting the browser handle the form, we can use React to manage it ourselves. It might sound a bit fancy, but don...

React is a JavaScript library for building user interfaces. React' s most obvious feature is that it writes complex code in separate chunks, each of which can perform separate tasks. It enables developers to create reusable UI components that efficiently u...

How to Create React Project  Make sure you've already install node js + npm  1. Open your terminal, and move to any directory that you want to keep the project.  2. Type the following command to create React Project npx create-react-app yourAppName or...

Rendering  Rendering is to render the React element we created in the browser using ReactDOM. Re-rendering  Happens when a rendered React element has a props or state that has changed from the previous render. That React element will be rendered aga...

Key Concepts and Functions: useState: The useState hook is used to create and manage the state of the form data (formData). It initializes the state with default values. handleChange Function: The handleChange function is called whenever ther...

What Are Controlled Components? In React, we like to keep everything in check. A "controlled component" means React is in control of what's happening in the form. It helps us manage things more easily. Multiple kinds of input Let's make our form more inte...

What is Form Validation ? Sometimes people forget to fill in the form properly. Form validation will help them by adding some basic checks to make sure that people will fill the form correctly. We use Regex (Regular Expression) to validate our data. The r...

 yup and react-hook-form is your life saver.  Yup are powerful tools in the React ecosystem for form validation and form handling. Let's explore it together. Installation : Go to your project and run this command. npm install react-hook-form @hookform/...

What is single page application ? A Single Page Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. In SPAs, the page does not reload ...

When you create React app, it does not include the page routing function. React Router is one of the popular solution to make routing in React application. It allows you to define routes in your application and navigate between different views or components ...