React JS

🖥 Compound components - это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока. На гифке пример, как вы можете использовать этот паттерн, чтобы сделать свои компоненты открытыми для расширения и закрытыми для модификации. @react_tg

🔥🔥 Вышел Redux Toolkit 2.0!!!🔥🔥 В свежей версии добавлены новые возможности, ускорена работа, уменьшен размер пакета и удалены устаревшие опции. Она сопровождается обновлениями для всех наших пакетов семейства Redux. https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0 @react_tg

Действительно хороший вариант кнопки, никогда не видел ничего подобного. Даже немного поиграл с ней 😅. http://rive.app @react_tg

🖥 Сайты вы найдете сниппеты кода Javascript: ➽ javascripting - http://javascripting.com ➽ codepen - http://codepen.io ➽ codemyui - http://codemyui.com ➽ jsfiddle - http://jsfiddle.net ➽ jsbin - http://jsbin.com ➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/ ➽ freefrontend - http://freefrontend.com ➽ snippit - http://snippit.io ➽ codesandbox - http://codesandbox.io ➽ glitch - http://glitch.com ➽ tabnine - http://tabnine.com ➽ github - http://github.com @react_tg

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 6 декабря.

⚡️ 10 сайтов для отработки навыков работы с фронтендом: 1. Frontend Mentor http://frontendmentor.io 2. Codewars http://codewars.com 3. Codewell http://codewell.cc 4. JavaScript30 http://javascript30.com 5. Кодербайт http://coderbyte.com 6. CSS Battle http://cssbattle.dev 7. FreeCodeCamp http://freecodecamp.org/learn/ 8. Frontend Practice http://frontendpractice.com 9. Задачи CodePen http://codepen.io/challenges/?re 10. Dev Challenges http://devchallenges.io @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

🏆 Stagger Cube — вращающийся куб с анимацией расширения-уменьшения квадратиков в каждой из сторон. Реализована с помощью CSS и JavaScript https://codepen.io/hexagoncircle/pen/qBdEGrj @react_tg

Чёрная Пятница в Практикуме заканчивается 30 ноября. Выберите любой курс до 30.11 и учитесь на 20% дешевле. → Выбрать курс

💡 Нашел новое место для вдохновения дизайном сайтов. Сайт → http://seesaw.website @react_tg

🔴Проблема: Необходимо создать постоянно обновляемый диалог на React, который сам управляет своей видимостью. 🟢Решение: Создайте компонент DialogButton, который управляет видимостью диалога. Не нужно объявлять и управлять состоянием для каждого экземпляра диалога. 📌Dev @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

💻 Профессия «Фронтенд-разработчик».  Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. Уже во время обучения вы вступите в программу «Карьерный трек», чтобы найти свою первую работу в IT.  Пройдите 5 бесплатных уроков и поймите, подходит ли вам профессия! COSMO чёрная пятница: успейте получить скидку 30 000р. Расширяем горизонты Вселенной - добавим +6 месяцев сопровождения наставника и карьерного консультанта после завершения обучения. Переходите по ссылке, выбирайте скидку и забирайте подарки🎁 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

🖥 React + Three.js. Создаём собственный 3D шутер. Часть В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня можно создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Автор серии статей делает шутер и рассказывает о процессе в формате пошагового гайда. Код проекта и ссылки на статьи на английском: https://github.com/JI0PATA/fps-game Перевод одной из частей на русском: https://habr.com/ru/articles/774090/ @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

🔥🔥🔥 5 подборок вопросов для собеседования по Frontend 1. JavaScript https://github.com/sudheerj/javascript-interview-questions 2. React https://github.com/sudheerj/reactjs-interview-questions 3. Vue https://github.com/sudheerj/vuejs-interview-questions 4. Angular https://github.com/sudheerj/angular-interview-questions 5. Front-End https://github.com/h5bp/Front-end-Developer-Interview-Questions @react_tg

Команда Яндекс Такси приглашает на бесплатный митап для фронтенд-разработчиков. В программе: — Интернационализация от i до n. Наш опыт разработки в международных реалиях. — Паттерны построения UI-компонентов, их комбинация и использование для обеспечения доступности. — Различия между package-based и integrated монорепозиториями и преимущества больших технологических компаний в использовании их. Афтепати для участников в завершение вечера! Место встречи: онлайн и офлайн в башне «Око», Москва-Сити. Время: 18:00, 23 ноября. Количество мест в офлайне ограничено. Регистрация началась. Подробнее Реклама. ООО "ЯНДЕКС.ТАКСИ". ИНН 7704340310. erid: LjN8KUHNi

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

Всё про фронтенд на YaTalks 2023: рассказы от топовых экспертов Ждём вас на конференции YaTalks 2023 — крупнейшем мероприятии Яндекса для IT-сообщества. Более 100 экспертов в индустрии соберутся, чтобы поделиться кейсами и идеями, которыми можно вдохновиться. Выступления будут 5 и 6 декабря: офлайн — в Москве и Белграде, онлайн — в любой точке мира. Вот о чём сможете узнать в первый день ↓ «Тернистый путь в open source» — с какими проблемами и вызовами пришлось столкнуться, когда раскрывали код DataLens в open source и переносили разработку в публичный GitHub-репозиторий. Андрей Мелихов, ведущий разработчик, Yandex Cloud «Слоистый CSS со взбитыми сливками» — развеем миф о том, что в CSS редко что-то меняется кардинально, а проблему изоляции стилей никак не решить. Никита Дубко, доброжелюбный бородач, «Веб-стандарты» «Тестировать нельзя мучиться: собственная ферма мобильных устройств для тестирования в Сбере» — зачем нужна ферма мобильных устройств, откуда она в Сбере и почему специалистам без неё уже никуда. Владимир Коржев, руководитель направления в Digital Platform, Сбер В меню не только доклады, но и нетворкинг, лайвкодинг, кофе с коллегами, карьерные консультации и живые встречи с топовыми экспертами. Регистрируйтесь по ссылке на один из дней и приходите ↓ Зарегистрироваться Реклама. ООО "Яндекс". erid: 2VtzqwGo5Ew

🔥 Дайджест полезных материалов из мира React за неделю Почитать: — Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация — Путешествие JavaScript-кода через движок V8 — Использование Content-Security-Policy вместе с React & Emotion — Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика — Что такое деление по модулю в JavaScript? — Почему я не буду использовать Next.js — Redux-toolkit и переиспользование кода — Разработка браузерных игр с использованием Phaser3, React, Typescript — Два frontend фреймворка. Два подхода — Как не программист, вероятно, написал самую быструю библиотеку в мире — [Discussion] What's the new big thing in web dev in the past 2 years? — Significant Small Changes to improve UI / UX — What kind of properties can be passed across the React Native bridge? — Flatiron - Phase 5 — Conversations with Computers: Coding as an Art Form — WebCrumbs: We are stitching together the future of the modern web — The evolution of Web Development: from dial-up to instant React — React useMemo — Exploring React State Management: From Simple to Sophisticated Solutions — Amazing radio buttons Посмотреть: 🌐 Why Signals Are Better Than React Hooks (⏱ 16:30) 🌐 Node Just Released This Amazing Feature! (⏱ 00:44) 🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22) 🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49) Хорошего дня!