​Что такое 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

Animating Button Text

В этом видео создается кнопка с текстом, анимируемым при наведении на JS.

👉 @seniorFront

Юзеры vs Интуитивно понятный интерфейс

👉 @seniorFront

Interactive Gradient & Glassmorphism with noise

Движущийся градиент - это SVG картинка, анимируемая в JS при движении мыши.

👉 @seniorFront

Notification bell - it's on fire

Создано и анимировано на HTML и SCSS.

👉 @seniorFront

Нужно развернуть приложения быстрее? С Облаком Рег.ру это возможно!

Мы предлагаем мгновенный запуск сервисов, линейку процессоров от мощных до очень мощных ( включая AMD EPYC и высокочастотные E2388), управление через панель или API. С нашими готовыми образами для Docker и GitLab вы сможете начать работу в несколько кликов.
Присоединяйтесь к нашему каналу, чтобы узнать, как облако Рег.ру помогает в разработке, и быть в курсе актуальных IT-новостей.

Реклама. ООО «Регистратор доменных имен РЕГ.РУ». ИНН 7733568767 erid:2VtzqwAzDNA

Cursor In & Out Ripple Effect

В этом видео создается эффект, следующий за курсором при наведении на карточку на CSS и JS.

👉 @seniorFront

accordion gallery zoom animation

При наведении задействуются CSS трансформации.

👉 @seniorFront

Vowel one

Вам дана строка из гласных и согласных букв, а также спецсимволов. Создайте функцию, которая трансформирует гласные буквы в 1, а все остальные символы в 0.

Примеры:
vowelOne( "abceios" ) // "1001110"
vowelOne( "aeiou, abc" ) // "1111100100"

👉 @seniorFront

HTML и CSS ошибки, влияющие на доступность

я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

В этой статье рассматриваются следующие аспекты:
- какие сюрпризы есть при использовании свойства display;
- о чём нужно помнить при вёрстке кнопки «Показать пароль»;
- зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
- как можно переборщить с заголовками и какие проблемы будут.

👉 @seniorFront

​Дерево DOM

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом.

Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.

Построим, для начала, дерево DOM для следующего документа.

<html>
  <head>
    <title>О лосях</title>
  </head>
  <body>
     Правда о лосях
   </body>
</html>

В этом дереве выделено два типа узлов.

1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.

DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.

👉 @seniorFront

Animated Weather Card

Отображаемые параметры, а также стили разных экранов задаются через JS. Дождь и снег сделаны при помощи библиотеки Particles.js

👉 @seniorFront

CSS-классы: отживший свой век инструмент?

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

Почему?

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

Автор предлагает задуматься над альтернативными решениями, которые предлагают более гибкие и функциональные инструменты.

Что думаете вы? Делитесь своим мнением в комментариях!

👉 @seniorFront

Canon TDD

В этой статье автор приводит вредные советы относительно того, как нужно делать TDD. Берите ответственность за качество своей работы на себя так, как вам удобно, если только вы действительно берёте на себя эту ответственность.

👉 @seniorFront