Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
This is a daily stats digest!
Today the bot processed: 13 messages
Today you received: 0 messages
Our filtering prevented you from: 13 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Frontender's notes [ru]: 4 message(s)
Веб-страница: 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
This is a daily stats digest!
Today the bot processed: 22 messages
Today you received: 0 messages
Our filtering prevented you from: 22 messages

Top 3 source channels:
Frontender's notes [ru]: 10 message(s)
Senior Frontend - javascript, html, css: 9 message(s)
Веб-страница: 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
Неоновая веб-страница своими руками

Этот codepen-проект позволяет минимальными усилиями добиться очень стильной и симпатичной надписи в стиле ярких неоновых вывесок

Никакого JavaScript — только чистые HTML и CSS!

Заглянуть в код и подсмотреть, как реализовать такое, можно по ссылке.


Original post link: t.me/tproger_web/4808
Forwarded and filtered by @smartfeed_bot
Что такое Virtual DOM?

Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом.

Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения.

Пример без Virtual DOM:
const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

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


Пример с использованием Virtual DOM (пример на React):
class MyComponent extends React.Component {
render() {
return <div>Новый текст</div>;
}
}
```

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

Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной.

👉 @seniorFront
Почему брейнштормы бесполезны

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

Метод брейншторма был разработан Алексом Осборном в 40-х годах именно для создания прорывных идей, что же пошло не так? Дело не в самой механике, а в том какие ошибки допускают при её использовании. Приведу самые распространенные недочеты, которые вижу на практике чаще всего.

Придумывание идей в группе
Типичная картина для крупной организации: приглашают 20-30 человек, чтобы охватить как можно больше мнений и компетенций, всех участников распределяют по командам. Группы отбирают лучшие идеи и презентуют их друг другу. Зачастую результаты у команд похожие или одинаковые, а реально в брейншторме участвуют 5, в лучшем случае 10 человек. Сьюзан Кейн в своей книге «Сила интровертов в непрерывно болтающем мире» приводит несколько причин такой ситуации:

- Социальная леность: человек в группе прилагает меньше усилий, чем при индивидуальной работе, так как считает свой вклад менее важным
- Снижение продуктивности, Production Blocking: пока самые ассертивные участники группы говорят о своих решениях, другие слушают их, вместо придумывания своих идей
- Социальное давление, Evaluation apprehension: люди боятся выглядеть глупо в глазах других и предпочитают умолчать рискованные и смелые идеи
- Регрессия к среднему: самые талантливые участники перформят на среднем уровне группы

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

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

👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
voqal — голосовое управление IDE от JetBrains

Попытки «кодить ртом» уже были, но теперь всё иначе: ошибки speech-to-text исправляет GPT.

Представьте, как близкие разработчика слышат команды: «kill parents with fork», «kill others» — и не догадываются, что это просто управление процессами...

Сам инструмент бесплатный, но за GPT-токены придется заплатить.

Репозиторий доступен по ссылке.


Original post link: t.me/tproger_web/4813
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 21 messages
Today you received: 2 messages
Our filtering prevented you from: 19 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 14 message(s)
Frontender's notes [ru]: 3 message(s)
Веб-страница: 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
This media is not supported in your browser
VIEW IN TELEGRAM
Wave

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

👉 @seniorFront


Original post link: t.me/seniorFront/4489
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Серый взрыв

Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает:

Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне.
Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе.
Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg.

Определяет функцию doArt, которая делает следующее:
Удаляет все старые линии с SVG-элемента, если они есть.

Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях.

Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML.

Вызывает функцию doArt один раз при загрузке страницы.

Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану.

Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child.

🌐Ссылка на код
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивный кубик 3D

В примере код создает интерфейс, который позволяет вращать 3D-кубик, нажимая на разные оси. Он использует CSS и Pug для создания графики и взаимодействия. CSS отвечает за стилизацию и анимацию кубика, а Pug - за генерацию HTML-кода. Pug - это шаблонизатор, который позволяет писать HTML с меньшим количеством символов и более читабельным синтаксисом.

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


Original post link: t.me/senior_front/2230
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 18 messages
Today you received: 1 messages
Our filtering prevented you from: 17 messages

Top 3 source channels:
Senior Frontend Developer | JavaScript, React, HTML & CSS: 5 message(s)
Веб-страница: 5 message(s)
Senior Frontend - javascript, html, css: 4 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
Когда лопнет IT-пузырь

Последние двадцать лет IT-индустрия привлекает к себе всё больше внимания, и это совсем не удивляет. Карьера в IT изменила жизни огромного количества людей в странах СНГ, открыла перед ними новые возможности и обеспечила высокий уровень жизни. Многие, вдохновляясь историями чужого успеха, меняют сферу деятельности, чтобы успеть отхватить себе «лакомый кусочек». Но всё ли так радужно в IT? Со стремительным развитием технологий возникают тревожные звоночки. Вдруг эта идиллия — лишь мыльный пузырь, готовый вот-вот лопнуть?

Сценарий №1. Всех заменит ИИ
Вероятно, вы слышали высказывания главы Nvidia Дженсена Хуанга о том, что больше нет необходимости изучать программирование, поскольку искусственный интеллект заменит большую часть IT-специалистов. Действительно, эту угрозу ощущают немало профессионалов своего дела. Уже сейчас медленно, но верно ИИ проникает во многие рабочие процессы, частично заменяя некоторые позиции.
Однако давайте посмотрим на это с другой стороны. Да, мир постоянно меняется, и мы с вами никак не можем этому помешать. Тем не менее, несмотря на рост уровня автоматизации, многие процессы по-прежнему требуют человеческого участия и глубокого понимания. Создание эффективного ИИ, его тестирование и совершенствование — это задачи, в которых человеческий элемент невозможно полностью заменить.
Как мне кажется, развитие ИИ создаст новые возможности не только для специалистов, занятых в разработке, внедрении и обслуживании этих технологий, но и всех, кто сможет адаптироваться и научится использовать нейросети в свою пользу.

Сценарий №2. Переизбыток специалистов на рынке
Время от времени я просматриваю вакансии на hh.ru. За последние пару лет заметно выросло количество откликов по многим направлениям в IT.
Думаю, есть несколько причин такого ажиотажа. Во-первых, государство поддерживает это направление: во многих учебных заведениях появились или расширились факультеты для подготовки IT-специалистов. Во-вторых, количество онлайн-курсов, которые обещают обучить с нуля и заманивают учеников громкими обещаниями, увеличивается день ото дня. Всё это плодит кучу новичков в сфере, готовых стартануть с меньшей зарплатой и на менее выгодных условиях.
Конкуренция растёт, а зарплаты, которые раньше были стабильно высокими, начинают снижаться. Это может продолжаться в течение нескольких лет, приводя к тому, что даже опытные ребята будут долго искать работу.

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

👉 @seniorFront
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 1 messages
Our filtering prevented you from: 9 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 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
This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 0 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Senior Frontend Developer | JavaScript, React, HTML & CSS: 4 message(s)
Веб-страница: 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
Mozilla обвинили в скрытой слежке через Firefox

Совсем скоро мы станет свидетелями юридической битвы: австрийская правозащитная организация Noyb подала иск против Mozilla, утверждая, что функция Privacy Preserving Attribution ведёт к несанкционированному сбору данных.

Mozilla заявляет, что PPA повышает безопасность интернет-рекламы и сохраняет анонимность пользователей, однако Noyb считает, что функция нарушает закон и превращает браузер в инструмент для отслеживания эффективности рекламы.

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

#Mozilla #Privacy #GDPR #Firefox #Noyb


Original post link: t.me/tproger_web/4835
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 1 messages
Our filtering prevented you from: 9 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 3 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
Original post link: t.me/tproger_web/4839
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 0 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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
This is a daily stats digest!
Today the bot processed: 18 messages
Today you received: 0 messages
Our filtering prevented you from: 18 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Frontender's notes [ru]: 3 message(s)
Сайтодел | GitHub, Верстка, Сайты, FullStack: 1 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
Зачем нужны сокеты ?

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

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

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

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

Гибкость и контроль
Предоставляют разработчикам большую гибкость и контроль над тем, как устанавливаются и управляются сетевые соединения. Разработчики могут определять, какие протоколы использовать (TCP, UDP и др.), как обрабатывать ошибки и потерю пакетов, а также как оптимизировать производительность для конкретных требований приложения.

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

👉 @seniorFront
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:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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