Как стать автором
Обновить
-1
Карма
0
Рейтинг
Зирка Андрей @BlackStar1991

Увлеченный сайтодел

Анимация грида в CSS

Время прочтения 4 мин
Просмотры 3.7K
Блог компании SkillFactory Разработка веб-сайтов *CSS *Программирование *
Туториал
Перевод

Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1.

Читать дальше →
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 4

Топ рекомендаций по Core Web Vitals на 2023 год

Время прочтения 11 мин
Просмотры 3K
Блог компании Timeweb Cloud Разработка веб-сайтов *CSS *JavaScript *HTML *
Обзор
Перевод


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.


Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.


Web Vitals — это инициатива Google, цель которой — предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете (источник).


Интересно? Тогда прошу под кат.

Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Комментарии 0

Делаем свернутый контент доступным с помощью hidden=until-Found

Время прочтения 3 мин
Просмотры 1.5K
CSS *JavaScript *HTML *
Туториал
Перевод

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

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

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

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 1

Как использовать API Google Analytics

Время прочтения 3 мин
Просмотры 1.1K
Разработка веб-сайтов *API *
Туториал
Перевод

В этой статье я расскажу вам о том, как использовать API Google Analytics для получения данных и отображения их на своём сайте самым простым способом.

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

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 0

Сага о SEO, часть 1: серверный рендеринг

Время прочтения 18 мин
Просмотры 6.4K
Блог компании Национальная Медиа Группа Серверная оптимизация *Поисковая оптимизация *

Наверняка хотя бы раз в жизни вы или ваши знакомые в поисках приятного досуга на вечер обращались к Яндексу или Гуглу с запросами вроде “кино онлайн бесплатно” или “смотреть сериалы 2021”. Если так, не стоит стесняться, вы такой не один, с подобными запросами в Яндекс, например, обращаются несколько миллионов человек в месяц. При этом, скорее всего, как и большинство пользователей с таким запросом, вы не имеете преференций относительно того, где вам этот контент покажут, и перебираете ссылки в выдаче сверху вниз, пока не найдете устраивающий вас ресурс. А значит, владельцы этих ресурсов максимально заинтересованы в том, чтобы

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 6

Сага о SEO, часть 2: разметка

Время прочтения 8 мин
Просмотры 3.5K
Блог компании Национальная Медиа Группа Серверная оптимизация *HTML *Поисковая оптимизация *

В предыдущей части статьи мы разбирались, как обеспечить поисковым роботам доступ к HTML-коду страницы. С вами снова Александр Усков, я ведущий разработчик more.tv, и в этом посте мы поговорим о том, что именно представляет из себя этот код и что можно сделать, чтобы сделать его максимально «понятным» и содержательным и для поисковых систем, и для браузеров.

Читать далее
Всего голосов 14: ↑10 и ↓4 +6
Комментарии 3

Настройка Webpack 5

Время прочтения 29 мин
Просмотры 18K
Разработка веб-сайтов *CSS *JavaScript *HTML *ReactJS *
Туториал
Из песочницы

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 37

14 КБ это слишком много. Делаем сайты меньше 1 КБ

Время прочтения 6 мин
Просмотры 28K
Блог компании RUVDS.com Хостинг Разработка веб-сайтов *CSS *HTML *

Минимализм хорош во всех отношениях. Во-первых, это красиво. Во-вторых, эффективно. Разница в скорости загрузки сайтов особенно заметна на фоне монструозных корпоративных приложений с мегабайтами скриптов, тормозящих практически на любом устройстве. Поразительно, что за годы компьютеры ускорились в десятки раз, а сайты грузятся медленнее, чем раньше (график на КДПВ за 2011–2019 гг, статистика по скорости от Httparchive.org). Только подумайте, на сколько же сайтам нужно жиреть каждый год, чтобы сохранить эти тормоза!

Известно, что для минимизации задержки важным рубежом является 14 КБ. Если ужать веб-страницу или её первую часть в меньший объём, загрузка сильно ускоряется из-за спецификации TCP, которая определяет максимальный размер пакета в 1500 байт (из них 1460 полезных) и алгоритма медленного старта TCP, ограниченного десятью пакетами.

Но 14 КБ — не предел оптимизации. Далеко не предел.
Читать дальше →
Всего голосов 72: ↑71 и ↓1 +70
Комментарии 73

Что нового можем делать с формами в 2022?

Время прочтения 5 мин
Просмотры 14K
CSS *JavaScript *HTML *
Обзор
Перевод

Браузеры постоянно добавляют новые функции HTML, JavaScript и CSS. Вот несколько полезных дополнений к работе с формами, которые вы могли пропустить…

Читать далее
Всего голосов 20: ↑18 и ↓2 +16
Комментарии 11

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

Время прочтения 10 мин
Просмотры 9.7K
Блог компании Россельхозбанк Разработка веб-сайтов *JavaScript *Совершенный код *ReactJS *
Перевод

Практическое руководство по написанию лаконичного кода и повторному использованию вспомогательных функций JS в проектах.

Читать далее
Всего голосов 14: ↑8 и ↓6 +2
Комментарии 3

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

Время прочтения 10 мин
Просмотры 3.9K
Блог компании Конференции Олега Бунина (Онтико) CSS *Интерфейсы *HTML *Браузеры

Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность.

Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 1

GraphQL, что ты такое?

Время прочтения 7 мин
Просмотры 13K
Блог компании HeadHunter Разработка веб-сайтов *

Привет! Сегодня у нашей статьи два автора — бэкенд-разработчик Артём и фронтенд-разработчик Илья. 

Примерно год назад мы решили попробовать внедрить graphQL у себя в проекте и сейчас хотим поделиться, как это происходило. Расскажем, что такое GraphQL, как его внедряли, почему мы вообще решили с ним подружиться и как начать взаимодействовать с API бэкенда словно вы граф, а не холоп.

Если лень читать или больше нравится видеоформат — вам сюда

Читать далее
Всего голосов 12: ↑9 и ↓3 +6
Комментарии 22

Пять распространенных ошибок памяти в JavaScript

Время прочтения 8 мин
Просмотры 7.7K
JavaScript *ReactJS *
Из песочницы
Перевод

Или советы по предотвращению утечек памяти в ваших веб-приложениях.

В JavaScript нет примитивов управления памятью. Вместо этого память управляется виртуальной машиной JavaScript посредством процесса восстановления памяти, который известен как Garbage Collection.

Но если мы не можем заставить его работать, как мы узнаем, что он будет работать правильно? Что мы знаем об этом? Выполнение скрипта приостанавливается во время процесса — это освобождает память для недоступных ресурсов. Скрипт недетерминирован и не будет проверять всю память за один раз, а будет выполняться в несколько циклов. Этот процесс непредсказуем и будет выполняться при необходимости.

Значит ли это, что нам не нужно беспокоиться о выделении ресурсов и памяти? Конечно, нет. Если вы не будете осторожны, у вас будут утечки памяти.

Читать далее
Всего голосов 7: ↑6 и ↓1 +5
Комментарии 10

Введение в SVG-анимации для верстальщиков

Время прочтения 36 мин
Просмотры 15K
Разработка веб-сайтов *CSS *JavaScript *
Туториал


Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

Читать дальше →
Всего голосов 28: ↑27 и ↓1 +26
Комментарии 12

11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

Время прочтения 4 мин
Просмотры 37K
Разработка веб-сайтов *JavaScript *Google Chrome HTML *Учебный процесс в IT
Туториал
Перевод

Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.

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

Давайте посмотрим
Всего голосов 62: ↑56 и ↓6 +50
Комментарии 23

Глубокое погружение в функцию CSS :where()

Время прочтения 7 мин
Просмотры 5.6K
CSS *HTML *
Перевод

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

В этом уроке мы узнаем про функцию псевдокласса :where() и покажем, как ее можно использовать в продакшене. Мы обсудим наложение, специфичность в отношении функции :where(), а также рассмотрим некоторые конкретные варианты использования.

Поехали!

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 8

Всё о веб-анимациях в 2022

Время прочтения 7 мин
Просмотры 24K
Блог компании HTML Academy Разработка веб-сайтов *CSS *HTML *Компьютерная анимация *

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

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

Анимация на КПДВ: Дилан Баунманн, codepen.

Читать далее
Всего голосов 20: ↑19 и ↓1 +18
Комментарии 8

Производительность фронтенда: большое приложение на реактивном SSR-топливе

Время прочтения 12 мин
Просмотры 4.8K
Блог компании SuperJob Блог компании Конференции Олега Бунина (Онтико) Высокая производительность *Разработка веб-сайтов *JavaScript *

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

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

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021. Он рассказал о серверном рендеринге на примере приложения SuperJob. Читайте под катом, как SuperJob пришли к своей реализации серверного рендеринга, узнав по пути много интересного. Узнаете, когда хорош SSR и как он работает, из чего он устроен, чем может быть полезен и кому.  

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 1

JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API

Время прочтения 12 мин
Просмотры 6.7K
Блог компании Timeweb Cloud Разработка веб-сайтов *JavaScript *Node.JS *



Привет, друзья!


В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).


Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).


Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.


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


Остальных прошу под кат.

Читать дальше →
Всего голосов 13: ↑13 и ↓0 +13
Комментарии 13

Классификация текста с использованием моделей трансформеров

Время прочтения 6 мин
Просмотры 6.1K
Python *Машинное обучение *Читальный зал Искусственный интеллект

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

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 4

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность