Что происходит, когда вы вводите в браузер URL-адрес?

Давайте рассмотрим этот процесс пошагово:

1️⃣ Пользователь вводит в браузер URL и нажимает Enter. Первое, что нам нужно сделать, это преобразовать URL в IP-адрес. Браузер ищет IP-адрес в нескольких уровнях кэша.

2️⃣ Если IP-адрес не удается найти ни в одном из кэшей, браузер обращается к DNS-серверам для выполнения рекурсивного DNS-поиска, пока IP-адрес не будет найден.

3️⃣ Теперь, когда у нас есть IP-адрес сервера, браузер посылает на него HTTP-запрос. Для безопасного доступа к ресурсам сервера всегда следует использовать протокол HTTPS. Сначала браузер устанавливает TCP-соединение с сервером с помощью трехстороннего рукопожатия TCP.

4️⃣ Сервер обрабатывает запрос и отправляет ответ. Ответ состоит из 3 частей: HTML, CSS и Javascript. Браузер анализирует HTML и формирует дерево DOM. Он также анализирует CSS и генерирует дерево CSSOM. Затем он объединяет дерево DOM и дерево CSSOM в дерево рендеринга. Браузер отображает содержимое пользователю.

@react_tg

🔴Проблема: Необходимо создать постоянно обновляемый диалог на React, который сам управляет своей видимостью.

🟢Решение: Создайте компонент DialogButton, который управляет видимостью диалога.

Не нужно объявлять и управлять состоянием для каждого экземпляра диалога.

📌Dev

@react_tg

⭐️Совет по CSS!⭐️

Для создания инвертированного эффекта :hover вы можете использовать режим mix-blend-mode с настраиваемыми свойствами :hover.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

Классная фишка в том, что использование режима mix-blend-mode действует как инвертор цвета, что хорошо работает с монохромными элементами управления.

Что касается того, как переместить этот код в JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
--active: 1;
}
button span {
transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
transition: transform 0.25s;
}

@react_tg

⚡️ 10 сайтов для отработки навыков работы с фронтендом:

1. Frontend Mentor
https://frontendmentor.io

2. Codewars
https://codewars.com

3. Codewell
https://codewell.cc

4. JavaScript30
https://javascript30.com

5. Кодербайт
https://coderbyte.com

6. CSS Battle
https://cssbattle.dev

7. FreeCodeCamp
https://freecodecamp.org/learn/

8. Frontend Practice
https://frontendpractice.com

9. Задачи CodePen
https://codepen.io/challenges/?re

10. Dev Challenges
https://devchallenges.io

@react_tg

🐈‍⬛ Действительно хороший вариант кнопки, никогда не видел ничего подобного.

Даже немного поиграл с ней 😅.

https://rive.app

@react_tg

🔥🔥 Вышел Redux Toolkit 2.0!!!🔥🔥

В свежей версии добавлены новые возможности, ускорена работа, уменьшен размер пакета и удалены устаревшие опции.

Она сопровождается обновлениями для всех наших пакетов семейства Redux.

https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0

@react_tg

🔥 Дайджест полезных материалов из мира React за неделю

Почитать:
— Многооконное веб приложение — решение для перегруженных интерфейсов
— Как мы отказались от styled-components в React Native приложениях
— Билдер Vue 3 веб приложений
— 8 бесплатных курсов по большим языковым моделям
— Современные варианты баз данных
— Typescript: лучшие практики
— Архитектура серверного рендеринга для SPA
— Интересные трюки HTML. Экстремальный минимализм
— Как сгенерировать безопасный, типизированный Node.js API с использованием Prisma, TypeGraphQL и graphql-query-purifier
— Unveiling the Unparalleled Style: Essentials Hoodie Collection by Fear of God
— Animated 3D text with bubble background using html,css
— Reinforcing my ReactJS Knowledge
— Solid.js vs React: Which is Better in 2024?
— Yes! There’s a Technology that’s Faster than React!
— Resolving React Hook Error and Building a Simple Todo List Page
— Uncovering the React Universe: The Starter Guide
— Mastering useState: A Guide to Avoiding Common Pitfalls in React Development
— Mastering React Performance: In-Depth Guide to useCallback and useMemo. 🚀
— 3 Things I Learned by Building a Portfolio Website

Посмотреть:
🌐 Ollama — модель уровня GPT. Используй GPT без ограничений и абсолютно бесплатно.
🌐 Refactoring a React component - Design Patterns
🌐React Zero to Hero (5 Days)
🌐 WTF Do These Even Mean (⏱ 13:44)
🌐 This New Tailwind Feature Is A Game Changer (⏱ 00:59)

Хорошего дня!

@react_tg

⚛️ Я не слишком беспокоюсь о повторных рендерах в React. (если только я не вижу проблем с производительностью).

Однако мне важно понимать, как работает процесс рендеринга.

@react_tg

Совет React: используйте пользовательский хук для обработки состояний массива в ваших компонентах ↓

@react_tg

Чистая архитектура фронтенда

В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD.

В чем важность архитектуры фронтенда?

Функциональные и нефункциональные требования должны применяться не только к бэкенду, но и к фронтенду. Именно архитектура фронтенда позволяет полностью реализовать потребности бизнеса. Кроме того, она дает более четкое представление о сложности проектов, тем самым сокращая время их создания, риски и стоимость. Однако, на мой взгляд, наибольшая ценность фронтенд-архитектуры заключается в том, что она обеспечивает поддерживаемость и масштабируемость любого проекта.

Что представляет собой архитектура фронтенда?

📌 Читать

@react_tg

🔥 Дайджест полезных материалов из мира React за неделю

Почитать:
— Сложность алгоритмов. Разбор Big O
— Я счастлив, что больше не веб-разработчик
— Mobile Web, навигация и при чем тут Nginx
— Микрофронтенд для самых маленьких
— Кастомизация бессерверных функций без применения промежуточного ПО
— KISS your website или как написать уважаемый сайт на аутсорсе, глава первая
— Что выбрать: Npm, Yarn или Pnpm?
— Pixel Combats Api
— Анатомия shadcn/ui
— Валидация формы с помощью AJV, Vue.js и TypeScript
— How Validate Form Input Data In React Or Any JavaScript Web Application ?
— Fixing Fetch Waterfalls in React
— Svelte journey | Part 2
— How many of you use cloud emulators for testing?
— Svelte : Toji Fushiguro of Javascript Frameworks.
— Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization
— Unveiling the Power of React Hooks: A Comprehensive Guide
— Tips for styling React apps in JavaScript
— This Week In React #167: Hydration, Remix, Server Components, cache, perf, Glow, Unistyles, Expo, :has(), Tailwind, date-fns...
— Mastering Redux Toolkit in Your React Projects

Посмотреть:
🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01)
🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52)

Хорошего дня!

@react_tg