👩‍💻 Шпаргалка по хукам в React

Хуки  -  это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам  -  развеять имеющиеся сомнения.

Читать...


Original post link: t.me/frontendnoteschannel/3790
Forwarded and filtered by @smartfeed_bot

⚙️ Как сделать чистый код еще чище

Предлагаем практический пример улучшения, казалось бы, чистого кода на сетевом и UI-уровне. Посмотрите, как в процессе продуманного рефакторинга - путем удаления всего лишнего (вложений, типов), уменьшения отступов, выполнения модульной разбивки - можно повысить уровень читаемости и производительности проекта.

Читать...


Original post link: t.me/frontendnoteschannel/3794
Forwarded and filtered by @smartfeed_bot

​​​​Алгоритмы и структуры данных для начинающих

Уверенное применение структур данных и алгоритмов имеет важное значение при создании программ. Изучить основы поможет серия коротких видеоуроков с примерами на JavaScript. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:

https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af

#javascript #алгоритмы


Original post link: t.me/tproger_web/4732
Forwarded and filtered by @smartfeed_bot

⚡Как работает фронтенд: от загрузки сайта до современных инструментов
Об этом расскажет Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН НИУ ВШЭ.

Программа вебинара:
🔸Из каких частей состоит браузер
🔸Как происходит загрузка веб-страницы: клиент-серверное взаимодействие и рендеринг фронтенда в браузере
🔸Обзор базовых технологий: HTML, CSS и JavaScript
🔸Современные инструменты: обзор React, Vue и Angular
🔸Основные концепции React
Дата: 31 июля
Время: 18:30
🔗Участие бесплатное, требуется регистрация: по ссылке.


Original post link: t.me/senior_front/2139
Forwarded and filtered by @smartfeed_bot

👩‍💻 Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами

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

Читать...


Original post link: t.me/frontendnoteschannel/3802
Forwarded and filtered by @smartfeed_bot

Find numbers with 3 divisors

Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).

Пример:

solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8

👉 @seniorFront


Original post link: t.me/seniorFront/4324
Forwarded and filtered by @smartfeed_bot

Animated Upload Modal

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

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

Нет использования фреймворков, но код использует библиотеку crypto в классе Utils для генерации случайных чисел.

🌐Ссылка на код


Original post link: t.me/senior_front/2143
Forwarded and filtered by @smartfeed_bot

🖥 Neo-Brutalism UI Kit – дизайн в ретро-стиле с яркими цветами и насыщенными черными тенями, напоминающий о первых днях интернета.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1893
Forwarded and filtered by @smartfeed_bot

​Архитектура фронтенда и какой она должна быть

Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала.

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

Domain Driven Design
Много умных дядек, таких как Мартин Фаулер и дядюшка Боб, написали много статей про него. На бэкенде в больших и сложных проектах он неплохо себя зарекомендовал. Но есть и много изъянов: туча абстракций, для простых действий нужно писать много кода, ну и разобраться, как готовить DDD та еще задача.
Есть примеры как готовить это на фронте, но, как видно, проблемы никуда не уходят и кол-во абстракций удручают.

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

Джимми Богарт в своей статье пишет что DDD подход не совершенен и избыточен, и, как следствие, он предлагает переработанный подход vertical slices. И это отличный подход, о котором стоит почитать отдельно. Эта идея довольно простая и мы можем адаптировать ее к фронтенд приложениям.

Clear architecture
Также есть попытки следовать всем постулатам чистой архитектуры и абстрагироваться от представления совсем. В этом случае мы сможем подменять view на любой фреймворк или вообще отказаться от его использования. Интересный подход и в некоторых случаях вполне обоснован и может оказаться отличным решением. Самый частый кейс, это использование одной и той же логики в браузере и на мобильном приложении.
Подробнее об этом можно почитать тут.

FSD - Feature Sliced Design
И недавно для меня стало открытием методология FSD - Feature Sliced Design. На мой взгляд лучшем решением будет обратить внимание именно на эту методологию.
Методология не привязана к конкретному стеку технологий и применима к большинству frontend-приложений. Документация содержит примеры реализации на JavaScript + React, но FSD успешно адаптируется и к другим комбинациям инструментов.

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

👉 @seniorFront

​​Сервис сокращения ссылок goo.gl перестанет работать в 2025 году

Google официально объявила о завершении работы сервиса сокращения ссылок goo.gl с 25 августа 2025 года. Компания отметила, что такое решение принято из-за растущего количества новых популярных сервисов: https://developers.googleblog.com/en/google-url-shortener-links-will-no-longer-be-available/

Google отключает обслуживающую часть URL Shortener. Это действие затронет всех разработчиков, использующих ссылки, созданные с помощью сервиса. Такие URL-адреса больше не будут возвращать ответ после 25 августа 2025 года.

Начиная с 23 августа 2024 года ссылки goo.gl начнут отображать промежуточную страницу для определённого процента существующих ссылок, уведомляя пользователей о том, что эта ссылка перестанет поддерживаться после 25 августа 2025 года. Со временем процент ссылок будет увеличиваться. Страница будет отображаться вплоть до даты закрытия сервиса, после чего все ссылки будут возвращать ответ 404.

#google

​​​Old but gold: Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css


Original post link: t.me/tproger_web/4744
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 1 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Веб-страница: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Годных инструментов вам в ленту: DevToys — мультитул программиста

Забавный швейцарский ножик програмиста с рейтингом 4.9 на Microsoft Store. В нем:
— конвертер JSON <> YAML и других сочетаний;
— (Де)кодировщики;
— Генераторы хэшей, Lorem Ipsum
— Компрессоры изображений и многое другое.

Репозиторий проекта

#инструменты


Original post link: t.me/tproger_web/4749
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 2 messages
Our filtering prevented you from: 8 messages

Top 3 source channels:
Веб-страница: 3 message(s)
Сайтодел | GitHub, Верстка, Сайты, FullStack: 2 message(s)
Senior Frontend - javascript, html, css: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

👩‍💻 👩‍💻 Тестирование производительности разных JavaScript-трюков на Windows 10 и Google Chrome 107.0.5304.107 + Mozilla Firefox 107.0.

Читать


Original post link: t.me/senior_front/2152
Forwarded and filtered by @smartfeed_bot

👩‍💻 Проблема устаревших замыканий и способы ее решения в React

Хотите проникнуть в одну из самых страшных тайн JavaScript-кода, называемую "устаревшими замыканиями"? Первая часть руководства поможет понять, что такое замыкания, почему они возникают и в чем заключается проблема устаревших замыканий.

Читать...


Original post link: t.me/frontendnoteschannel/3820
Forwarded and filtered by @smartfeed_bot

​Какие способы изоляции стилей существуют ?

Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов:

Использование уникальных имен классов
Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

CSS-модули
Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

CSS-in-JS
Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

Shadow DOM
Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

Scoped CSS
Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

👉 @seniorFront

​Как справиться с рабочим стрессом

Давайте посмотрим на динамику профессионального стресса, чтобы понимать, как с ним справляться.
Э. Ф. Зеер выделяет три основные стадии развития стресса у человека.

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

Вторая стадия начинается, когда человек полностью или частично теряет самоконтроль. Многие люди отмечают, что в состоянии стресса делали то, что в спокойном состоянии никогда бы не сделали. В результате человек чувствует опустошение и усталость.

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

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

Стрессовый сценарий запускается практически автоматически, и важно отслеживать свое эмоциональное состояние и помогать себе в таких случаях.

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

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

👉 @seniorFront

👩‍💻 21 рекомендация по HTML

Как сделать код информативным, усовершенствовать структуру, доступность и поисковую оптимизацию? Прокачайте навыки его написания этими полезными приемами с атрибутами, тегами, элементами. Рекомендации снабжены сниппетами.

Читать...


Original post link: t.me/frontendnoteschannel/3826
Forwarded and filtered by @smartfeed_bot

Relax, take IT easy: как вернуть спокойствие в работу. Три инструмента специально для айтишников

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

В своей публикации автор рассказывает, как люди сами создают себе ад на работе и как сами могут себе помочь. Даёт три полезных инструмента, позволяющие управлять замкнутыми кругами, в которые многие из нас время от времени попадают. А в конце – бонус.

👉 @seniorFront


Original post link: t.me/seniorFront/4347
Forwarded and filtered by @smartfeed_bot

Pure — уникальная интернет-операционная система с открытым исходным кодом, работающая прямо в браузере

Проект, начавшийся как личная инициатива одного разработчика, быстро привлёк внимание сообщества и сегодня поддерживается на 38 языках, с более чем 150 000 установок и 22 000 звезд на GitHub.

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

Открытый исходный код делает систему доступной для модификации, что привлекает разработчиков, стремящихся адаптировать её под свои нужды.

Показательный случай, который в очередной раз доказывает, что если сделать что-то интересное, то рано или поздно твой проект найдет своего пользователя


Original post link: t.me/tproger_web/4758
Forwarded and filtered by @smartfeed_bot