Веб-страница

11 марта 2025 07:04

Как повысить вашу продуктивность с помощью кроссбраузерных функций DevTools

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

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

#советы

Веб-страница

10 марта 2025 05:09

Что такое анимация во фронтенд разработке и как ее использовать? Разбираем движение света от фонаря

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

И первая часть про движение света от фонаря.

#фронтенд

Веб-страница

09 марта 2025 08:04

tabs-broadcast — библиотека для синхронизации вкладок

tabs-broadcast — это открытая библиотека JavaScript для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей.

Как она работает, читайте в статье: https://habr.com/ru/articles/887448/

#javascript #библиотека

Веб-страница

07 марта 2025 19:12

Как устроен Node.js изнутри

Node.js — интересный инструмент для веб-разработчиков. В этой статье мы узнаем, из чего состоит Node.js, разберёмся, как внутренние компоненты Node.js взаимодействуют друг с другом, и изучим репозиторий проекта Node.js на GitHub.

https://www.smashingmagazine.com/2020/04/nodejs-internals/

#бэкенд #nodejs

Веб-страница

06 марта 2025 21:03

Что такое рекурсия и как с ней работать

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

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

А вы используете рекурсию в своих проектах?

Веб-страница

05 марта 2025 20:03

Как конфигурировать Git

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

О том, как это сделать правильно, узнаете в статье: https://habr.com/ru/articles/886538/

#git

Веб-страница

04 марта 2025 18:09

ESLint теперь официально поддерживает линтинг CSS

Об этом появилась информация в блоге команды. Для настройки необходимо установить плагин @eslint/css. Он обеспечивает синтаксический анализ с помощью CSSTree и правил CSS.

Чтобы использовать плагин, установите его с помощью npm:

npm install @eslint/css -D

Веб-страница

03 марта 2025 21:13

Проверьте свои репозитории. Вдруг там и до первой версии рановато

Веб-страница

02 марта 2025 18:33

Что ж, мои маленькие веб-разработчики, пора баиньки. А чтобы вам крепче спалось держите сказку на ночь.

Веб-страница

01 марта 2025 16:17

разработчик сделал пинг-понг во вкладках браузера

Пользователь Nolen Royalty сделал «Faviconic Pong», где игра происходит между главным окном Chrome и 240 фавиконами. В игре есть ракетки, мяч и табло для подсчета очков.

Код залипалова можно глянуть здесь. А разобраться, как он работает — вот тут.

@your_tech

Веб-страница

28 февраля 2025 21:04

SSL и SSL-сертификаты для новичков

Тема SSL, сертификатов и вот этого всего довольно сложная. Но эта статья должна помочь вам разобраться в теме так, чтобы хоть что-то отложилось в голове.

Переходите по ссылке и читайте: https://habr.com/ru/articles/884898/

#ssl

Веб-страница

27 февраля 2025 19:21

Оптимизация загрузки ресурсов с помощью Fetch Priority API

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

В этой статье вы узнаете, как работать с этим API и где он поддерживается в настоящее время:

https://web.dev/fetch-priority/

#api

Веб-страница

26 февраля 2025 20:06

Зато 5 минут и работает. А баги и в остальные 4 часа 55 минут поправить можно

Веб-страница

25 февраля 2025 21:02

Ликбез про компьютерным сетям 💬

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

Таймкоды:

0:00 - Вступление
0:38 - Зачем знать сети?
1:48 - OSI/ISO - TCP/IP
8:19 - MAC-адрес
9:35 - IP-адрес
10:48 - Порты
11:50 - Маски и подсети
13:34 - Белые и серые подсети
14:41 - NAT network address translation
15:54 - Чем отличается TCP и UDP?
18:03 - Как работает DNS?
19:09 - Траблшутинг
20:34 - О чем не поговорили, но тоже очень важно

#сети #видео

Веб-страница

24 февраля 2025 20:34

Image Hover Effect на чистом CSS

Этот проект предлагает создание необычного эффекта при наведении на изображение — текст получает эффекты негатива, но только на некоторую область.

Как повторить такой эффект у себя в проекте, можно узнать тут:

https://codepen.io/ig_design/pen/WNrWezW

#codepen #css

Веб-страница

10 марта 2025 19:14

Doom запустили на типах TypeScript

Энтузиасты взяли и запилили полноценный рантайм для WebAssembly, но вся магия — на типах TypeScript. И да, они запустили на этой штуке Doom. Как им это удалось, они рассказали в видео.

Кармак дуреет с этой прикормки!

#typescript #ненормальноепрограммирование

Веб-страница

09 марта 2025 18:17

Что такое Island Architecture

Island Architecture (или «архитектура островов») — это современный подход к созданию веб-страниц, который сочетает преимущества статического контента и интерактивных элементов. Основная идея заключается в том, чтобы разделить страницу на статическую часть и изолированные «острова» — компоненты, которые могут быть динамическими и интерактивными. Это позволяет улучшить производительность, упростить разработку и сделать сайт более удобным для SEO.

Как это работает?

Представьте веб-страницу как карту, где большая часть территории — это статический контент, а отдельные «острова» — это интерактивные элементы. Например:

Статическая часть: текст статьи, изображения, заголовки — всё то, что загружается быстро и не требует JavaScript для отображения.

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

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

Преимущества Island Architecture

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

— SEO-дружественность. Статическая часть легко индексируется поисковыми системами, а интерактивные элементы изолированы и не мешают процессу.

— Удобство разработки. Каждый «остров» можно разрабатывать и тестировать отдельно, используя разные технологии для разных островов, если это требуется.

Недостатки и ограничения

— Если страница содержит много интерактивных элементов (например, социальные сети или сложные приложения), загрузка множества островов может снизить производительность.

— Так как концепция относительно новая, для её реализации часто нужны специфические фреймворки, такие как Astro или Marko, либо собственные решения.

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

Island Architecture идеально подходит для сайтов, где преобладает статический контент, но требуется несколько интерактивных элементов. Например, блоги, простые интернет-магазины или новостные сайты.

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

#простымисловами

Веб-страница

08 марта 2025 06:34

Если это не логично, то нужно добавить ещё один =. Логично?

Веб-страница

07 марта 2025 12:22

Используем tan(atan2()) для работы с вьюпортами в CSS

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

Как это работает и где можно использовать, подробно рассказано здесь.

#css #фронтенд #лайфхак

Веб-страница

06 марта 2025 13:32

Меняем JS-библиотеку анимации на View Transitions

Теперь не нужно подтягивать тяжелые JavaScript библиотеки для анимаций в ваш проект. В Chrome и Safari появилась поддержка View Transitions API. Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS.

Как это работает вы можете увидеть здесь.

#фронтенд #css #javascript

Веб-страница

05 марта 2025 10:59

Функции в CSS? Серьёзно?

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

Но вот пощупать функции в тестовой версии нам никто не запретит. Поэтому открываем статью и смотрим, как CSS превращается в язык, прости Господи, программирования.

Все подробности здесь: https://css-tricks.com/functions-in-css/

#css

Веб-страница

04 марта 2025 11:12

Сможете сделать устойчивую систему на Java?

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

Проверьте свои силы в новом квизе: https://tprg.ru/zEI5

А результатами делитесь в комментариях.

#квиз

Веб-страница

03 марта 2025 11:07

Как задеплоить вебаппку «Телеграма» всего за 20 минут

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

#telegram #webapp #miniapp

Веб-страница

02 марта 2025 08:13

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Веб-страница

01 марта 2025 00:33

Немного полезной информации о слотах в Vue.js

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

Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/

#vue #фронтенд

Веб-страница

28 февраля 2025 15:12

Следим за NPM-пакетами правильно

pkg-size — это инструмент, который поможет вам проанализировать влияние NPM-пакетов на размер локальных node_modules и бандла при сборке проекта.

Как его установить и использовать, узнаете здесь: https://pkg-size.dev

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

Веб-страница

27 февраля 2025 10:07

Благотворительный проект «Дело в собаке» ищет администратора сайта с функциями вёрстки

До 6 часов в неделю, удалёнка, без зарплаты.

«Дело в собаке» — полностью волонтёрский проект. Он посвящён собакам-помощникам для людей с разными ментальными и физическими заболеваниями, например депрессией, диабетом или астмой.

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

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

Что нужно делать?

— Сверстать сайт по готовому дизайну и перенести на сервер (сайт на Vue.js), настроив почту и разделы сайта по запросу.
— Администрировать сайт.

Сайт: https://delovdogs.ru/

Подробности о вакансии: https://gorodrabot.ru/vacancy/922041017/administrator_sayta_verstka_v_blagotvoritelnyiy_proekt_moskva

Связаться с руководителем проекта: @Nyta_Gins

Веб-страница

26 февраля 2025 14:07

10 полезных библиотек для фронтенд-разработки

Некоторые из них вам, возможно, знакомы, но некоторые смогут удивить. Например, тут вы найдете современную альтернативу библиотеке lodash, дополнение к Moment.js, библиотеку для работы с элементами Drag'n'Drop и многое другое.

Переходите по ссылке и выбирайте самые полезные для вас:

https://nuancesprog.ru/p/24406/

#фронтенд #библиотека

Веб-страница

25 февраля 2025 13:03

Skeleton Mammoth

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

Познакомиться со всеми возможностями можно на странице проекта.

#библиотека #css

Веб-страница

24 февраля 2025 11:34

Микрофронтенды: 9 шаблонов для каждого разработчика

Архитектура микрофронтендов  —  это современный взгляд на проектирование приложений. Так независимые части разрабатываются отдельными командами и в итоге складываются в единую систему.

У этого архитектурного стиля много преимуществ, но требуется корректная интеграция этих частей. В этой статье рассматриваются девять подходов для решения этой проблемы, преимущества и недостатки их практического применения:

https://nuancesprog.ru/p/27823/

#микрофронтенд #фронтенд