Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
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
Spread

Spread — это специальный оператор в JavaScript, позволяющий расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.

Объясним подробнее: в примере на картинке функция Math.max() не может принять массив arr, т. к. эта функция в принципе не принимает массивы. Оператор spread (три точки — ...) здесь нужен для того, чтобы передать в функцию массив в виде нескольких отдельных значений.


Original post link: t.me/senior_front/2248
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 19 messages
Today you received: 1 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: 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: 9 messages
Today you received: 0 messages
Our filtering prevented you from: 9 messages

Top 3 source channels:
Frontender's notes [ru]: 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
This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 0 messages
Our filtering prevented you from: 9 messages

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, 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
Поиск по тексту? Поиск по фото? А может... поиск по видео?

Google решила обойти OpenAI на повороте и запустила в тестовом режиме Поиск на основе видео.

Работает просто — вы загружаете ролик, а Google начинает использовать его для поиска информации.

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


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