Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
Годных инструментов вам в ленту: 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
Forwarded from Frontender's notes [ru]
👩‍💻 Find the missing term in an Arithmetic Progression

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

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

Пример кода

findMissing([1, 3, 5, 9, 11]) == 7


Решение задачи🔽


function findMissing(arr) {
// Вычисляем разности между последовательными элементами
const diffs = [];
for (let i = 1; i < arr.length; i++) {
diffs.push(arr[i] - arr[i - 1]);
}

// Определяем правильную разность, которая встречается чаще всего
const correctDiff = diffs.sort((a, b) =>
diffs.filter(v => v === a).length - diffs.filter(v => v === b).length
).pop();

// Ищем место, где разность отличается от правильной
for (let i = 1; i < arr.length; i++) {
if (arr[i] - arr[i - 1] !== correctDiff) {
return arr[i - 1] + correctDiff;
}
}

return null; // Если все в порядке, возвращаем null (хотя это не должно случиться)
}

// Примеры использования:
console.log(findMissing([1, 3, 5, 9, 11])); // Вывод: 7
console.log(findMissing([2, 4, 6, 10])); // Вывод: 8
console.log(findMissing([10, 20, 30, 50])); // Вывод: 40
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Chat UI Kit – дизайн для чатов с шапкой, футером и объемными аватарками. Главная страница имеет множественный градиент в сине-зеленых оттенках.

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


Original post link: t.me/sitodel/1908
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
This media is not supported in your browser
VIEW IN TELEGRAM
✅️ 3D-эффект перехода между элементами

В этом проекте интересным образом реализован эффект перехода между элементами. Так, например, вы можете, просматривая изображения в галереи, узнать подробности или описание, наведя на изображение. При этом, если до этого курсор был на другой карточке, то возникнет эффект «перекатывания кубика».

Посмотреть код и поиграть с эффектом можно тут:

https://codepen.io/noeldelgado/pen/nweYMz


Original post link: t.me/senior_front/2171
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Windows XP – полупрозрачный стеклянный логотип Windows. Отличный пример того, как можно представить графику в 3D-формате.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1916
Forwarded and filtered by @smartfeed_bot
👩‍💻 Ionic vs React Native: ключевые различия, о которых следует знать перед началом работы

Для разработки мобильных приложений требуется, чтобы оно работало на разных операционных системах и чтобы не переписывать код под отдельную операционную систему используют фреймворки. В этой статье расскажем о двух таких фреймворках: Ionic и React Native.

Читать...


Original post link: t.me/frontendnoteschannel/3859
Forwarded and filtered by @smartfeed_bot
🖥 Как создать мощную фронтенд-архитектуру

Что такое «Feature Sliced» дизайн во фронтенде? Поговорим о том, как он работает, какие плюсы и минусы, и что получается на выходе.

Читать...


Original post link: t.me/frontendnoteschannel/3864
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Manufactured

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

https://codepen.io/saifkeralite/pen/RwMJgVd


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