Links

 https://nomadmania.com/my_map/

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // Fetch data from API

https://jsfiddle.net/

https://codesandbox.io/

https://owasp.org/www-project-top-ten/

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");

vscode

File-Prefs-Settings: Format on save 

plugins: live server,  runner,  Quokka.js (plugins; gear icon->command palette-quokka, start on current file), esLint

prettier: https://www.youtube.com/watch?v=1zR43aM8db8

CTRL+D: multiselect

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

jsx
import 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

jsx
import 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

jsx
import 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

jsx
import 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

jsx
import 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

1. Purpose:

   • useMemo: Memoizes a value to optimize performance.
   • useCallback: Memoizes a function to avoid unnecessary re-renders.
   • useEffect: Manages side effects in a component.

2. Timing:

   • useMemo: Runs during render.
   • useCallback: Runs during render, but memoizes the function reference.
   • useEffect: Runs after the render.

3. 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

психо

Савельев "чтобы они представляли, как мир устроен"  https://youtu.be/_xfdhlaBgEk?t=291

diodes

 Ultra-High-Speed Switching diodes

1SS226 1.6-4

1SS181 Reverse recovery time trr IF = 10mA (Fig.1) ― 1.6 4.0 ns 

1SS184

yaesu ft-847 diodes: 1SS83, DAN235U

varicap: 

KV1471 $2.6/20

https://pdf.datasheetcatalog.com/datasheet/philips/BB809.pdf

10pcs 100% original new TO92 BB112 BB910 TO-92 $1/10 $1/20

910 $1.2/20

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

 

2SC1904 130 50mA 150V

2SC4137 400 0.1A 20V

2SC3423 200 50mA 150V 0.5W

2SC3421 120 1A 120V 10W

2SC1567 120 0.5A 100V 5W

2SC1358 500V  4.5A 50W

2SC1360 300MHz 50mA 1W 50V

BC847 300MHz

BC557 200MHz

2N5551/2N5401 100-300MHz

python

     Simple Python WebSocket Server https://www.toptal.com/tornado/simple-python-websocket-server

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'