🖥 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

PostgreSQL в 3 МБ: сервер базы данных в браузере!

Команда ElectricSQL представила PGlite — JavaScript-библиотеку, которая позволяет запускать полноценный сервер PostgreSQL прямо в веб-браузере.

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

Подробности о том, в какой проект уже успели внедрить новинку можно на нашем сайте: https://tproger.ru/news/postgresql-server-upakovali-v-javascript-biblioteku-razmerom-3-mb


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

🖥 Chat UI Kit – дизайн для чатов с шапкой, футером и объемными аватарками. Главная страница имеет множественный градиент в сине-зеленых оттенках.

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


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

🖥 Самые интересные публикации за последние дни:

• Сериализация сущностей с помощью декораторов на TypeScript

• От Web к Native с React

• Обучение детей HTML, CSS, JavaScript: обзор курса по созданию сайтов

• Как улучшить работу сайта с помощью оптимизации изображений Image Stack

• Удалёнка до того, как стала удалёнкой


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

window.navigator

Это свойство возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий.

Часто используемые свойства:
userAgent возвращает строку, которая содержит название браузера. Не стоит использовать это свойство, чтобы определить браузер пользователя! Спецификация рекомендует браузерам передавать минимум информации в userAgent, значение может меняться от версии к версии.

language возвращает предпочитаемый язык интерфейса в виде языкового тега. Например, en, ru, en-US и т.д. Обычно это язык, установленный в настройках браузера.

languages возвращает массив предпочитаемых языков в порядке предпочтительности. Первый в списке будет язык, который возвращает navigator.language.

cookieEnabled возвращает true, если браузер пользователя поддерживает куки и они включены, false в противном случае.

onLine возвращает true, если у пользователя есть подключение к сети. Браузеры вкладывают разные смыслы в понятие «онлайн», поэтому это свойство — ненадёжный источник данных.

clipboard — это удоб­ный до­ступ к бу­фе­ру об­мена из Clipboard API. Объект предоставляет несколько методов для сохранения информации в буфер и чтения из него. write — универсальный метод для сохранения данных в буфер. Можно использовать специальный writeText, если вы уверены, что нужно скопировать только текст. Оба метода асинхронные и возвращают Promise. Для чтения из буфера есть аналогичные read и readText.
clipboard доступен только при работе с HTTPS или localhost. Если clipboard не доступен, вы можете использовать старый подход через document.execCommand('copy').

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

Методы объекта navigator служат для взаимодействия с другими WebAPI. Например, метод vibrate, который вызывает вибрацию пользовательского устройства, если она поддерживается: navigator.vibrate(200)

👉 @seniorFront

📊 ТОП-7 библиотек визуализации данных в 2024 году: обзор и сравнение

Подробный обзор 7 популярных библиотек для визуализации данных. Сравниваем функциональность, производительность и удобство использования Latitude, D3.js, Chart.js, Apache ECharts, Nivo, Plotly и Victory.

Читать...


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

​80% разработчиков недовольны своей работой. Причина не в ИИ и не в коде

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

Не оправдавшиеся ожидания и технический долг
Технический долг – главный источник раздражения у разработчиков. Работа с несовершенными системами деморализует людей и затрудняет выполнение сложных задач.

Культура суеты и бюрократия
Давление, вызванное необходимостью уложиться в сроки, в ИТ-индустрии часто доходит до крайности. Разработчиков подстегивают выполнять задачи как можно быстрее, чтобы получить как можно больше дохода. Возрастающее давление в компаниях оборачивается завышенными ожиданиями и выгоранием.
Кроме того, существует вечная проблема бюрократии, которой особенно подвержены крупные компании. Бесконечные совещания и оторванные от реальности требования начальства создают и усиливают ощущение бессмысленности.

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

Несмотря на то, что работа не доставляет им удовольствия, большинство разработчиков пишет код в нерабочее время в качестве хобби (68%). Также почти 40% пишут код в нерабочее время ради профессионального роста или ускоренного обучения при помощи онлайн-курсов. Что наводит на мысль: проблема кроется вовсе не в коде!

👉 @seniorFront