Всё про фронтенд на YaTalks 2023: рассказы от топовых экспертов

Ждём вас на конференции YaTalks 2023 — крупнейшем мероприятии Яндекса для IT-сообщества. Более 100 экспертов в индустрии соберутся, чтобы поделиться кейсами и идеями, которыми можно вдохновиться. Выступления будут 5 и 6 декабря: офлайн — в Москве и Белграде, онлайн — в любой точке мира.

Вот о чём сможете узнать в первый день ↓

«Тернистый путь в open source» — с какими проблемами и вызовами пришлось столкнуться, когда раскрывали код DataLens в open source и переносили разработку в публичный GitHub-репозиторий.
Андрей Мелихов, ведущий разработчик, Yandex Cloud

«Слоистый CSS со взбитыми сливками» — развеем миф о том, что в CSS редко что-то меняется кардинально, а проблему изоляции стилей никак не решить.
Никита Дубко, доброжелюбный бородач, «Веб-стандарты»

«Тестировать нельзя мучиться: собственная ферма мобильных устройств для тестирования в Сбере» — зачем нужна ферма мобильных устройств, откуда она в Сбере и почему специалистам без неё уже никуда.
Владимир Коржев, руководитель направления в Digital Platform, Сбер

В меню не только доклады, но и нетворкинг, лайвкодинг, кофе с коллегами, карьерные консультации и живые встречи с топовыми экспертами. Регистрируйтесь по ссылке на один из дней и приходите ↓

Зарегистрироваться

Реклама. ООО "Яндекс". erid: 2VtzqwGo5Ew

⚛️ Совет React

Рендеринга можно избежать, если переосмыслить структуру компонента и использовать композицию (смотреть в гифке).

@react_tg

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

Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— Gpen Demystified: Expert Insights from Dumpsarena
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
— How to handle loading screens in Next JS
— Bape Sta White: A Classic Sneaker Icon
— Utilising createPortal to build walkthrough experiences in React applications
— VSCode Plugin For Feature Flags
— Protected Routes with React.js and Next.js
— 3D Toggle Switch

Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)

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

#digest #react

@react_tg

Что происходит, когда вы вводите в браузер 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