WebBeaver

Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Перевод статьи «How SVG Fragment Identifiers Work» от Криса Койера. Но <use> — это инлайновый SVG. Он не поможет, если вы хотите использовать часть SVG в теге <IMG> или в background-image...

Перевод статьи (Now More Than Ever) You Might Not Need jQuery. С момента выхода jQuery в 2006 году, DOM и нативные API браузеров улучшаются не по дням, а по часам. Люди пишут статьи «Вам не нужен jQuery» с 2013 года (посмотрите на оригинал и его репозитарий). Не хочется ворошить осиный улей, но с момента выхода последней статьи некоторые вещи изменились. Браузеры внедряют новые API, которые помогают избавиться от боли, при написании кода без вспомогательных библиотек, многие из которых копируют jQuery...

Как сделать простую анимированную SVG-фигуру и использовать её как маску? Для начала в иллюстраторе или в любом другом векторном редакторе рисуем фигуру. Я рисовал с помощью инструмента «Кривизна». Боковые точки сделал опорными (двойным кликом), чтобы между ними не образовывалась дуга, которая выходит за пределы монтажной области. Это у нас будет первый кадр. Рисуем ещё. Можно просто сдвинуть какие-то точки, можно нарисовать заново. Главное — чтобы количество точек было одинаковым на всех кадрах...

Элемент <path> в SVG является основным способом рисования. С помощью него можно нарисовать всё что угодно! Я слышал, что на самом деле все другие элементы для рисования, в конечном счёте, используют path. Он имеет один атрибут для описания того, что рисуется: аттрибут <d>. Его значение — это мини-синтаксис и он выглядит довольно непонятно: это длинная строка с кучей цифр и букв. Я не эксперт, но решил поковыряться в нём. Эта статья является вольным переводом статьи Криса Койера «The SVG `path` Syntax: An Illustrated Guide»...

Вольный перевод статьи «Getting Started with Offline First using». Настало время «Offline first». Техника «Mobile first» де-факто стала стандартом при разработке современных сайтов. Но в мире, где все пользуются мобильными, мы не можем быть уверенны в качестве связи. Пора начать думать об «Offline first». Этот урок покажет, как добавить оффлайн-функциональность на ваш сайт за 10 минут. Когда вы закончите, ваши пользователи больше не будут видеть экран с ошибкой, при потере соединения. Вместо этого вы сможете контролировать содержимое, которое они увидят...

Почти на каждом сайте бывают какие-либо формы. И периодически их нужно бывает заполнять. Лично я ненавижу это делать, особенно с телефона. Недавно узнал, что пользователю можно чуть облегчить жизнь, подставив нужную клавиатуру. Всё что нужно сделать — это добавить пару параметров в тег поля: Поле e-mail Отключаем автокоррекцию, автоматическое увеличение первой буквы, добавляем значок собачки на клавиатуру, чтобы пользователю не нужно было переключать клавиатуру в меню символов. <input type="email" autocapitalize="off" autocorrect="off" autocomplete="email"> Поле телефона Меняем стандартную клавиатуру на телефонную...

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

Итак, очередной вольный перевод статьи Zell Liew под названием «PX, EM or REM Media Queries?».  Все примечания автора и его плоские шуточки окрашены в светлый цвет, дабы не мозолить глаза. Погнали!+ Вы когда-нибудь задумывались о том, какие единицы использовать в медиа-запросах: px, em или rem? Я вот задумывался и теперь решил выяснить, что же использовать. Когда я создавал библиотеку mappy-breakpoints, чуть больше года назад, я использовал rem-ы. Затем, после разговора с Sam Richard, я переключился на em, потому что узнал, что особой разницы между ними нет...

Недавно понадобилось создать для сайта интерактивную карту, с кликабельными районами. Было ясно, что это делается с помощью SVG, но как? В общем, вот небольшая инструкция по созданию ссылок произвольной формы для сайта. Результат работы. Для создания SVG использовал Adobe Illustrator CC2015. В принципе, можно использовать любой векторный редактор, но в примере именно он. 2. Кликаем на «Монтажные области», выбираем «Подогнать по границам иллюстрации». 3. Далее выбираем инструмент «Перо», и точками создаём нужную область на картинке...

Недавно натолкнулся на статью Zell Liew «Viewport Unit Based Typography». Она показалась мне очень интересной, поэтому решил перевести, по мере своих возможностей, и выложить её у себя. Сразу предупреждаю, что знание английского у меня не ахти какое, поэтому перевод получился вольный. Если вы заметили что-то уж слишком вопиющее — просьба написать в комментариях. Второй момент: предыдущую статью про rem и em не перевожу, поэтому начальное лирическое отступление пропускаю. Итак, поехали… Что такое viewport-юниты?...