HTML *

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.

CDN(Content Delivery Network) - это подход, позволяющий хранить части страниц вашего сайта на других серверах. Обычно это кастомные шрифты, таблицы стилей, скрипты и иконки. CDN хорош тем, что позволяет кэшировать часто используемые библиотеки типа jQuery, не загружая их заново для каждого сайта. При большом количестве подключаемых файлов на странице, браузер не может делать много запросов к одному домену одновременно. Однако использование CDN, расположенного на другом домене, позволяет обойти эту проблему. На сайтах с огромной посещаемостью CDN позволяет экономить ресурсы серверов. В общем это замечательная технология. А под катом я расскажу, почему первым делом при получении сайта на поддержку, я вырезаю все ссылки на CDN и заменяю их на локальные ресурсы.

Привет, Хабр! Сегодня хочется поговорить про XPath — мощный и гибкий инструмент для работы с веб-интерфейсами, который при этом почему-то остается не особенно популярным. Статей и мануалов по XPath очень много, и в этом посте я постараюсь рассказать, как мы применяем данный инструмент и почему считаем его более эффективным, чем другие подходы. Если вам знаком термин “селектор”, а тем более — если вы слышали про XPath, добро пожаловать под кат, там много полезного!

Владимир Матасов, выпускник курса Skillbox по веб-вёрстке, рассказал о своём опыте работы с плагином Emmet. Также подготовил инструкции по основным возможностям и командам для начинающих верстальщиков.

Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи. 

Как вы думаете, многие люди используют дома холодильники и стиральные машины? Наверное практически все. А ломается эта техника? Еще как! А всегда ли ее потом чинят? Наверное кто-то чинит. А кто-то не чинит, а хочет от нее избавиться. А как проще всего избавиться? Вынести на помойку? А если вы живете на 3…5 этаже без лифта? Может быть выкинуть в окно? ;-) Нет, гораздо проще дать бесплатное объявление типа «Отдам даром старый холодильник. Морозит кое как самовынос  и самовывоз». Объявление можно дать на авито или юлу. Указать свой номер телефона и всегда найдутся желающие взять технику. Что-то можно будет сдать в прием лома, что-то пустить на запчасти, а что-то может и починить, если есть навыки.

Только вот есть интересные моменты: сколько может найтись таких желающих и как быстро они найдутся?

Забегая вперед скажу: желающих может найтись много, и найдутся они очень быстро. В СПб, в среднем, холодильник в любом состоянии находит нового владельца за 1…2 минуты. Время очень короткое, неправда  ли? А теперь я расскажу мою историю по порядку.

Несколько лет назад, мне по работе приходилось мотаться по городу. Причем ездил я в основном на метро и на маршрутках. Сидел и копался на сайтах объявлений в поисках чего-то интересного из компьютерных раритетов и прочих штуковин. И случайно напоролся на объявление об отдаче то ли газовой плиты, то ли еще чего-то похожего. И отдавали рядом с моим домом. Решив, разжиться на халявку этой техникой я дождался станции (чтобы не так шумно было) и позвонил, но мне ответили, что все, уже отдано. А прошло минуты 3…4. Ого-го, что-то быстро. И я стал уже целенаправленно искать подобные объявления, и да, они находились, только реально что-то взять уже не выходило. Я всегда опаздывал.

Всем привет! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.

В прошлый раз один из моих коллег рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью, могут найти её по ссылке. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI.

В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.

Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.

Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.

Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

Технология WebRTC, предоставленная Google для всеобщего использования в 2011 году, нашла широкое применение в системах видео коммуникации, трансляции видео, для создания групповых чатов, видеоконференций, роботов телеприсутствия и роботов-промоутеров. Ее главным достоинством является реализация базовых методов и классов непосредственно в браузере, что обеспечивает широчайшую совместимость с различными ОС и аппаратными платформами. В предлагаемой статье описывается реализованный нами метод масштабирования видео для передачи средствами WebRTC, с использованием Javascript и HTML5.

Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.

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