https://nomadmania.com/my_map/
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // Fetch data from API2024-08-17
Links
2024-08-06
Selenium
https://googlechromelabs.github.io/chrome-for-testing/#stable
unzip & copy to /opt/chromedriver
download latest chrome.deb;
sudo dpkg -i google-chrome-stable_current_amd64.deb
pom.xml:
<dependencies>
<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.23.0</version>
</dependency>
</dependencies>
System.setProperty("webdriver.chrome.driver", "/opt/chromedriver");
WebDriver driver = new ChromeDriver();
driver.get("http://www.google.com");
2024-07-14
vscode
File-Prefs-Settings: Format on save
plugins: live server, runner, Quokka.js (plugins; gear icon->command palette-quokka, start on current file), esLint
2024-06-18
React forms
Working with form data in React can be approached in several ways, depending on the complexity of the form and the specific requirements of your application. Here are some common methods:
1. Controlled Components
In controlled components, form data is handled by the React component’s state. This is the most common method for managing form data in React.
Example
jsximport React, { useState } from 'react';
const ControlledForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};
export default ControlledForm;
2. Uncontrolled Components with Refs
Uncontrolled components store form data in the DOM itself and use refs to access the data. This approach is useful for simple forms or when integrating with non-React libraries.
Example
jsximport React, { useRef } from 'react';
const UncontrolledForm = () => {
const nameRef = useRef();
const emailRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log({
name: nameRef.current.value,
email: emailRef.current.value,
});
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" ref={nameRef} />
</div>
<div>
<label>Email:</label>
<input type="email" ref={emailRef} />
</div>
<button type="submit">Submit</button>
</form>
);
};
export default UncontrolledForm;
3. Using Form Libraries
Form libraries like Formik and React Hook Form can simplify form management by handling validation, state, and submission more efficiently.
Formik Example
jsximport React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const SignupForm = () => {
return (
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={Yup.object({
name: Yup.string().required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
})}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
}}
>
<Form>
<div>
<label htmlFor="name">Name:</label>
<Field name="name" type="text" />
<ErrorMessage name="name" component="div" />
</div>
<div>
<label htmlFor="email">Email:</label>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />
</div>
<button type="submit">Submit</button>
</Form>
</Formik>
);
};
export default SignupForm;
React Hook Form Example
jsximport React from 'react';
import { useForm } from 'react-hook-form';
const HookForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name:</label>
<input {...register('name', { required: 'Name is required' })} />
{errors.name && <span>{errors.name.message}</span>}
</div>
<div>
<label>Email:</label>
<input {...register('email', { required: 'Email is required', pattern: { value: /^\S+@\S+$/i, message: 'Invalid email address' } })} />
{errors.email && <span>{errors.email.message}</span>}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default HookForm;
4. Custom Hooks
For more complex forms, you can create custom hooks to manage form state and validation logic.
Example
jsximport React, { useState } from 'react';
const useForm = (initialValues) => {
const [values, setValues] = useState(initialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setValues((prevValues) => ({
...prevValues,
[name]: value,
}));
};
const resetForm = () => {
setValues(initialValues);
};
return [values, handleChange, resetForm];
};
const CustomHookForm = () => {
const [formData, handleChange, resetForm] = useForm({ name: '', email: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
resetForm();
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};
export default CustomHookForm;
Summary
- Controlled Components: Use when you want React to manage form state.
- Uncontrolled Components: Use when you prefer to keep form data in the DOM and access it with refs.
- Form Libraries (Formik, React Hook Form): Use for complex forms that require robust validation and state management.
- Custom Hooks: Use for custom form logic and state management.
React hooks
useMemo
useMemo
is a hook that memoizes the result of a function, caching its return value to optimize performance. It recalculates the memoized value only when one of its dependencies has changed.
Use Cases
- Performance Optimization: When you have expensive calculations that you don’t want to run on every render.
- Pure Functions: Memoize the results of pure functions that return the same output for the same inputs.
Syntax
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Example
import React, { useMemo, useState } from 'react';
const ExampleComponent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
const expensiveComputation = (num) => {
console.log('Running expensive computation...');
return num * 2;
};
const memoizedResult = useMemo(() => expensiveComputation(count), [count]);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<h2>Memoized Result: {memoizedResult}</h2>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type something..."
/>
</div>
);
};
export default ExampleComponent;
In this example, expensiveComputation
will only run when count
changes, not when text
changes.
useEffect
useEffect
is a hook that allows you to perform side effects in function components. It runs after the render and can run again when its dependencies change.
Use Cases
- Data Fetching: Fetching data from an API when the component mounts.
- Subscriptions: Setting up and cleaning up subscriptions.
- DOM Manipulations: Directly manipulating the DOM after render.
- Side Effects: Any other side effects that are not pure computations, such as logging.
Syntax
useEffect(() => {
// Effect logic
return () => {
// Cleanup logic (optional)
};
}, [dependencies]);
Example
import React, { useEffect, useState } from 'react';
const ExampleComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted or count changed');
return () => {
console.log('Cleanup if count changes or component unmounts');
};
}, [count]);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default ExampleComponent;
In this example, the effect runs when the component mounts and whenever count
changes. The cleanup function runs before the effect runs next time and when the component unmounts.
useCallback
useCallback
is a hook that returns a memoized version of the callback function that only changes if one of its dependencies has changed. It's particularly useful to avoid unnecessary re-renders by preventing functions from being recreated on every render.
Use Cases
- Passing Callbacks to Child Components: When you pass a callback to a child component that depends on props or state, using
useCallback
ensures that the function reference remains the same unless dependencies change. - Optimizing Performance: It can be used to optimize performance in scenarios where functions are recreated unnecessarily, causing unwanted renders.
Syntax
const memoizedCallback = useCallback(() => {
// Callback logic
}, [dependencies]);
Example
import React, { useState, useCallback } from 'react';
const ChildComponent = React.memo(({ onClick }) => {
console.log('ChildComponent rendered');
return <button onClick={onClick}>Click me</button>;
});
const ExampleComponent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type something..."
/>
<ChildComponent onClick={handleClick} />
</div>
);
};
export default ExampleComponent;
In this example, handleClick
will only be recreated if its dependencies change. This prevents ChildComponent
from re-rendering unnecessarily.
Key Differences
Purpose:
useMemo
: Memoizes a value to optimize performance.useCallback
: Memoizes a function to avoid unnecessary re-renders.useEffect
: Manages side effects in a component.
Timing:
useMemo
: Runs during render.useCallback
: Runs during render, but memoizes the function reference.useEffect
: Runs after the render.
Usage:
useMemo
: Use when you have an expensive calculation that should not re-run on every render unless dependencies change.useCallback
: Use when you have a function that you don't want to be recreated on every render unless dependencies change.useEffect
: Use for side effects like data fetching, subscriptions, or any code that should run after the component has rendered.
When to Use Each
- Use
useMemo
when you have computationally expensive operations and you want to memoize the result to avoid re-computation on every render. - Use
useEffect
when you need to perform side effects such as data fetching, updating the DOM, or subscribing to services. - Use
useCallback
when you need to memoize a function to prevent it from being recreated unnecessarily, especially when passing it as a prop to child components.
By understanding the distinct roles of these hooks and applying them appropriately, you can optimize your React applications for both performance and functionality
2024-05-14
2024-03-05
transistor bipolar
Pc | Uce | Ic | ft,MHz | Cc | hfe | ||||
---|---|---|---|---|---|---|---|---|---|
SOT-23 | |||||||||
BFR92(BFT92 pnp) | npn | 25mA | 5G | ||||||
BFR93 | npn | 0.18 | 12 | 35mA | 6G | 25 | |||
BFR193 | npn | 0.4 | 30 | 80mA | 6-8G | 50-200 | |||
BFR540 | npn | 0.5 | 15 | 0.12 | 9G | 100 | |||
SOT-89 | |||||||||
2SC3357 | npn | 1.2 | 5/100 | 0,1 | 6,5G | ||||
2SD2150 | npn | 20 | 3 | 290 | 25 | ||||
SOT-223 | |||||||||
BFG97 | 1 | 15 | 0.15 | 5G | 25 | ||||
BFG591 | npn | 2 | 2.15/10 2.10 |
15 | 0.2 | 7G | 60-250 | ||
BFG135 | npn | 1 | 15 | 0.15 | 7G | 80 | |||
BFG196 | 0.8 | 0.1 | 7G | ||||||
BFP420 | npn | 0.06 | 18G | 60 | |||||
TO-92 | |||||||||
2N2222/2N2907 | pnp | 0.5 | 40 | 0.6 | 250 | 35-300 | |||
npn | |||||||||
S9018 (J8) 1й каскад умвч |
0.2 W | 15 | 0.05 | 600 | 100-200 | ||||
2N3906/3904 | pnp | 0.31 | 40 | 0.2 | 250 | ||||
2SC2035 2й каскад умвч |
npn | 0.6 | 17 | 0.3 | 350 | 10 | |||
MMBTH10 (MPSH10) | npn | 50mA | 650 | $1.7/100 | |||||
2SC2538 | npn | 0.7W | 0.4A | 40V | 175app | $2.5/5 $2/10 | |||
2SC2053 | npn | 0.2W | 0.3A | 40V | $2/10 | ||||
TO-126 | |||||||||
2SC3950 CRT 2SC3950 | 20V | 0.5A | 1-5W | 20 | 0.5 | 2G | 10-180 | ||
27MHz | |||||||||
2SC2314 TO-126 pdf | 1A | 2(5)W | $4/10 $2/10 | ||||||
2SC2078 TO-220 pdf | 3A | 4(10)W | |||||||
2SC1969 TO-220 | 6A | 16W | $4/10 | ||||||
2SC2075 Toshiba | 3(10)W | ||||||||
175MHz | |||||||||
2SC1970, 71 pdf, 71,72 TO220 | 17V | 2A | 6W(1-12) | $6/5 | |||||
2SC2538 TO92L | 17V | 0.4A | 0.7(3)W | ||||||
2SC2053 pdf | npn | 0.6W | 0.3A | 40V | vhf | $2.5/5 | |||
2024-01-02
2023-12-26
VSCode
https://www.grepper.com/answers/31148/visual+studio+code+auto+indent
On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I
git config --global credential.helper 'cache --timeout=604800'