​Что такое React Reconciliation (Cверка) и как он работает?

Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.

Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.

При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.

По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.

👉 @seniorFront

pointer-particles

Это Web Component, реализованный на canvas и чистом JS.

👉 @seniorFront

​Обучающие игры для разработчиков

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

Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.

Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.

CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.

SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.

Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.

👉 @seniorFront

Докер контейнеры и прикладная некромантия

В этой статье автор рассказывает про забавный пример использования контейнеров - для запуска и обновления древних веб сервисов.

Будет два живых примера:
- Медиавики, вики-движок на PHP, древняя инсталляция - обновляем с версии 1.24 от сентября 2014 года.
- Забавный инструмент для генерации комиксов в стиле xkcd, написанный на Node.JS, и в последний раз обновлявшийся в марте 2013 года. Поднимаем и исследуем. Будут внезапные сюжетные повороты, и трагическая концовка.

Интересно, как воскресить эти артефакты древности? Тогда погнали!

👉 @seniorFront

Info Cards

Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера реализован в JS.

👉 @seniorFront

Text Scroll Animation using CSS & Javascript

В этом видео создается анимация текста при прокрутке. Для этого создается обработчик события "scroll", в котором изменяется значение свойства transform.

👉 @seniorFront

Удалёнщик пришел поработать в офис

👉 @seniorFront

switch

Оригинальный переключатель, свёрстанный на HTML и CSS. Логика переключения реализована в JS.

👉 @seniorFront

loading idea

Анимировано в CSS. При помощи transform: translate3d.

👉 @seniorFront

Only Wavy Text Loading Animation Effects

В этом видео создается анимация текста на чистом CSS.

👉 @seniorFront

Revolving Text

Текст генерируется в JS и анимируется в CSS. Параметры анимации настраиваются при помощи CSS переменных.

👉 @seniorFront

Портфолио, которое хотят видеть рекрутеры

Не тратьте время на пет-проекты. Сделайте проект на микросервисной структуре на Kafka и заберите свой оффер в крупную IT-компанию. Все потому что проект не должен быть стандартным crud-приложением, а иметь в основе то, чего ждет каждый работодатель – микросервисы.

Ребята из FAANG School подготовили полезную лекцию, где расскажут, как собрать идеальный проект для портфолио:

– что ждет работодатель и какие темы выбрать для проекта
– какой стек технологий самый востребованный
– как перейти от древнего монолита к современным микросервисам
– когда и зачем добавлять Kafka в проект-портфолио

Участников ждут подарки: классный мерч, полезные материалы, возможность пройти индивидуальную карьерную сессию и грант на обучение.

Переходите и забирайте Большую Шпаргалку по Kafka с подробной информацией об основных концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.

HyperMorph 3000

Реализовано на canvas и чистом JS

👉 @seniorFront

​Что такое Flux - архитектура? Какие сущности она имеет?

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

Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.

В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:

- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.

- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.

- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.

- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.

👉 @seniorFront

«Мне нравится обучать программированию и информатике»: пост для репетиторов и тех, кто хоть раз задумывался ими стать

Все мы привыкли воспринимать репетиторство, как хобби или подработку. На самом деле, каждый из наших учеников и подписчиков может сильно преуспеть в этой сфере и сделать её основной статьей дохода. И, самое главное, сделать вклад в будущее школьников и студентов, которые только в начале своего пути в IT.

Рекомендуем прочитать эту статью👉: https://t.me/mishaberezovoy

Автор статьи — Михаил Березовой. Студент факультета компьютерных наук ВШЭ, олимпиадник. За 5 лет репетиторства он разработал систему, которой пользуются все начинающие репетиторы, а действующие с её помощью сокращают время работы и увеличивают доход.

Его советам точно можно доверять, читайте даже не задумываясь.

ЗАБРАТЬ СТАТЬЮ

HyperMorph 3000

Реализовано на canvas и чистом JS

👉 @seniorFront

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты с нуля сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Создашь проект на Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Сделаешь сайту адаптив;
6. Получишь проверку домашек от кураторов;
7. В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.

А главное, ты узнаешь, что тебе делать, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.

Начинаем уже завтра.

👉 Успей проскочить на интенсив бесплатно

Бонусом для портфолио тебе выдадут именной сертификат после окончания интенсива и успешной сдачи всех домашних работ.

​Синдром спасателя: как перестать брать на себя слишком много?

Синдром спасателя — это когда человек всегда старается помогать другим, даже если это вредит ему самому. Такие люди часто ставят чужие интересы выше своих собственных, что может обернуться проблемами в жизни.

Осознайте проблему
Синдром спасателя часто проявляется незаметно, когда человек постепенно берёт на себя всё больше и больше обязанностей. Вас просят помочь сделать отчёт, выгрузить данные, объяснить, как работает очередь на бекенде, хотя вы всего лишь фронтендер.
Чтобы осознать проблему, постарайтесь проанализировать свои действия и реакции. Запишите, сколько времени вы тратите на помощь другим и как это влияет на ваши собственные задачи.

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

Учись говорить «нет»
Многие из нас чувствуют вину или страх отказать, но важно помнить, что отказ — это не проявление эгоизма, а забота о своём благополучии.
Начните с малого: учитесь отказывать на незначительные просьбы и постепенно переходите к более сложным случаям. Попробуйте мягкие формулировки, такие как: «Сейчас я не могу помочь, но, возможно, позже», или: «У меня много дел, давай обсудим это позже». Если у вас есть таск-трекер, просите завести задачу — это часто отбивает охоту у половины людей.

Делегируй задачи
Часто неумением передавать задачи страдают руководители: «Я сделаю лучше и быстрее, и вообще, тут делов на полчаса», а в итоге весь день куда-то исчезает. Не бойтесь делегировать — так вы сможете развивать свою команду и себя в том числе.

👉 @seniorFront

Расширяем возможности мобильного приложения на WebView

Часто разработчики используют только встроенный API взаимодействия JavaScript c нативными кодом, например Web API, но нам этого оказалось мало, и мы расширили спектр возможностей подхода web-native. Внутри статьи я расскажу, какой подход выбрал, как к этому пришёл, и, как обошёл возникшие проблемы. Подчеркну плюсы и минусы использования своего решения и в конце предложу несколько идей дальнейшего развития выбранного пути.

👉 @seniorFront

Heart Like - Jump!

Иконка сделана из SVG, а также дополнительных div, стилизованных и анимированных в SCSS.

👉 @seniorFront