Frontender Magazine

Исполнение JavaScript кода с помощью LESS CSS препроцессора

Эксперименты с выполнением JavaScript с помощью LESS CSS препроцессора и его практическим использованием.

Javascript с использованием статической памяти и пулов объектов

Если ваше приложение после некоторого времени перестаёт работать нормально, вполне вероятно, что вы столкнулись с проблемой чрезмерного использования памяти сборщиком мусора в JavaScript. Суть этого явления, а также способы уменьшения его негативного влияния на производительность приложения мы рассмотрим в статье.

Создание отзывчивых веб-страниц с помощью режима эмуляции устройств Chrome DevTools

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

Gulp + Browserify и всё, всё, всё

Это статья, которая поможет вам разобраться в том, как использовать вместе Gulp и Browserify, и почему это следует делать.

Введение в browserify

Весь этот чудесный код для 'npm', менеджера пакетов node.js … вот бы можно было использовать этот код в браузере? Так мы можем! Используя browserify.

Убийцы оптимизации

В этой статье я расскажу о том, как избегать написания кода, который будет работать значительно хуже, чем вы думаете. В частности, покажу антипаттерны, которые не позволяют V8 (также относится к Node.js, Opera и Chromium) оптимизировать ваши функции.

Покажите себя с помощью ngrok

ngrok мощный инструмент, удовлетворяющий особенную потребность в предоставлении доступа к локальному серверу друзьям и клиентам.

Во все тяжкие (Циклы в библиотеках JavaScript)

Хотите использовать forEach из EcmaScript-5 вместо $.each, чтобы не подключать весь jQuery? Хотите перейти с Underscore на Lo-Dash? Есть один нюанс, знание которого поможет избежать долгих поисков места, где всё почему-то сломалось.

Почему ContentEditable ужасен

В первый раз, когда я сидел за столом напротив Якоба он прямо меня спросил: «Как бы ты написал текстовый редактор?».

Я нарисовал древообразную структуру на доске, взмахнул руками и сказал «это говенный редактор». Затем нарисовал колонку контейнеров со стрелками указывающими на массивы, еще немного помахал руками и сказал «это хороший редактор».

Якоб приподнял бровь.

Этот пост — то, что я ответил бы ему тогда, если бы у меня был год на раздумья.

Контекстные меню HTML5

Один из брильянтов в пыли спецификации HTML5 это контекстные меню. Они позволяют разработчикам создавать свои собственные контекстные меню для определенных блоков с помощью элементов menu и menuitems.

Переосмысление отзывчивого SVG

Многие уже научились использовать SVG-иконки в качестве замены растровых. Это большой плюс, для пользователей с дисплеями высокой четкости, а это на сегодняшний день большая часть техники Apple и конкурентов. Но преимущества SVG на этом не заканчиваються, мы можем пойти дальше и сделать иконки отзывчивыми, инкапсулировав в SVG стили и JavaScript!

WTF, HTML и CSS?

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

Хранение веб-шрифтов в CDN

Как известно, для улучшения производительности статику лучше хранить в CDN. В частности веб-шрифты.

Создаем первый плагин для Grunt

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

Динамически-создаваемые «асинхронные скрипты» являются вредными

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

3D-моделирование в браузере с помощью three.js

С появлением WebGL разработчики получили возможность заниматься 3D-моделированием прямо в браузере. Однако это требовало применения сложного математического аппарата для вычисления трансформаций при создании объектов и их анимации. Библиотека three.js избавила разработчиков от математической рутины, предоставив больше свободы для работы с 3D-графикой. Статья представляет собой краткое руководство по началу работы с three.js на примере создания и анимации простой трехмерной сцены.

Grunt- и Gulp-таски для оптимизации производительности

Снижение производительности может влиять на вовлечённость пользователей и их ощущения от пользования сайтом. К счастью, команда проекта «Make The Web Faster» из Google предложила набор лучших практических рекомендаций для поддержания ваших страниц лёгкими, быстрыми и привлекательными. В статье представлены и описаны Grunt- и Gulp-плагины для автоматизации соблюдения этих рекомендаций.

Создание непрямоугольных макетов при помощи CSS-форм

В этой статье детально описаны примеры использования новых свойств CSS, а именно shape-inside и shape-outside, с помощью которых придать тексту любую форму будет легче и создание макетов наподобие печатных журналов станет более реальным.

Искусство семантики HTML, часть 1

Опытного верстальщика не испугать фразой «семантичная вёрстка», он прекрасно разбирается в семантике элементов, которыми пользуется повседневно, и всегда использует самые походящие по смыслу элементы. Или… это не совсем так?

7 проверенных в бою правил для написания веб-приложений на backbone.js

Приложения на Backbone не придерживаются строгой архитектуры. Основная идея, которую несёт документация: используйте инструменты этого фреймворка так, как вам хочется. Благодаря такому подходу Backbone хорош для абсолютно разных задач, и на нём очень просто начать писать приложения. Однако с другой стороны, это приводит к тому, что новички совершают ошибки в самом начале работы с данным фреймворком. Для того чтобы избежать ошибок, предлагаем вам несколько правил и подсказок.

Как находить время для своих проектов

«Цели — это мечты с дедлайнами», — такими словами Рэйчел Эндрю начинает статью, в которой рассказывает про опыт планирования и запуска своего проекта. Проблемы с планированием, нехватка времени, тяжёлая работа и непонимание со стороны близких это всё с чем вы столкнётесь и Рэйчел советует как вам с этим справиться.

СДЧПВС: слишком длинный чтобы поместиться в строчку

Рано или поздно нам приходится столкнуться с необходимостью поместить длинный отрезок текста без пробелов (ссылку или многосложное слово) в узкий родительский контейнер. С этой задачей может справиться и сам браузер путем переноса части текста на следующую строку. Но не всегда результат нас устроит. Рассмотрим приёмы, позволяющие добавить переносы именно там, где это нужно.

Создание RDP клиента на Yeoman и AngularJS

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

Почему стиль кода имеет значение

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

Отслеживание ошибок с помощью Google Analytics

С помощью Google Analytics вы можете замерить эффективность рекламной компании, количество просмотров и уникальных пользователей. Эта статья предлагает беглую реализацию, на уровне доказательства идеи, отслеживания ошибок на вашем сайте. После неё вы всегда сможете узнать, что у вас на сайте «бомбануло», даже если тестировщики это проглядели.

Как сделать Flappy Bird на HTML5 с помощью Phaser

Flappy Bird небольшая милая игра с простой механикой, и я подумал, что она будет превосходным примером для урока о создании игр с помощью HTML5. Поэтому в этой статье мы попробуем сделать упрощенную версию Flappy Bird в 65 строчек кода.

Красивые анимации состояний с помощью animation-play-state

Все просто, когда анимация элемента начинается сразу, при загрузке страницы. Однако когда анимация включается по изменению состояний :hover, :active, :focus или просто изменению класса вызванного с помощью JavaScript, все становится несколько интереснее. Давайте будем делать такую анимацию красиво.

Автоматизация задач с помощью npm run

На сегодняшний день существует несколько популярных инструментов для сборки проектов: GruntJS, Gulp, Broccoli, Hammer, brunch… у каждого из этих инструментов существует свое коммьюнити, плагины, API, но, зачастую, автоматизация сборки представляет собой весьма тривиальную операцию, в которой эти инструменты могут быть излишними — для их автоматизации может вполне хватить возможностей npm. Так что, если вы хотите научиться с помощью npm и бесконечных возможностей shell автоматизировать сборку проектов, то эта статья для вас.

Техника создания текстурного текста

Предлагаем к вашему вниманию описание нескольких приёмов по добавлению текстуры для шрифта. Кроме того, в статье приведены запасные решения для браузеров, которые не поддерживают некоторые из использованных CSS-свойств. Для всех приёмов представлены иллюстрации с финальным результатом.

Как строгий режим "use strict" в JavaScript может сэкономить вам пару часов

Директива "use strict" накладывает ряд ограничений на код JavaScript, тем самым позволяя нам отгородиться от потенциальных опасностей языка. В частности, от кода, который соответствует старому стандарту и противоречит актуальному. Эта короткая статья покажет вам, что при использовании этой директивы вероятность ошибки снижается в разы.

Что такое DOM?

Зачастую, не все начинающие разработчики понимают, что же такое объектная модель документа, более известная как DOM. Иногда по ошибке, её путают с кодом HTML-страницы в редакторе, или с исходным кодом в режиме просмотра такового в
браузере. Крис Койер (Chris Coyier) постарался очень простыми словами объяснить, что же такое DOM, и какое отношение эта модель имеет к HTML и JavaScript коду, который пишут разработчики.

Раскрытие тайны this в JavaScript

В этой статье я хочу пролить свет на использование this в JavaScript и привнести немного ясности и понимание о том, как this работает. Это знание не относится к чёрной магии и не является запретным, наоборот — понимание механизма работы this чрезвычайно полезно для всех JavaScript-разработчика.

Массив в JavaScript: slice против splice

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

Разработка удобных алгоритмов взаимодействия

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

Разработка веб-приложений по принципу «Автономность прежде всего»

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

Частичное применение в JavaScript с помощью bind()

Если вы в самом начале своего пути в JavaScript, то привязка функций – это то, что будет волновать вас в последнюю очередь. Однако, когда вы начинаете понимать, что вам необходим способ избавиться от присваиваний вроде var that = this или var self = this, встречающихся на каждом шагу, метод bind() — именно то, что вам поможет.

Хватит писать циклы for. Пришло время использовать Underscore.

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

Чуть больше SASS для (БЭ)Модификаторов

Ни для кого не секрет, что методология БЭМ с каждым годом становится все популярнее как у отечественных, так и у зарубежных разработчиков. Одним из показателей постоянно увеличивающейся популярности является тот факт, что многие разработчики ищут способы «форкнуть», развить БЭМ, адаптируя его под свои потребности и экспериментируя с результатом. В статье рассматривается одна из подобных попыток развить БЭМ, и адаптировать его под использование вместе с SASS, которая привела автора к формулированию концепции БЭВМ.

Искушение Sass

Автор одной из лучших книг о HTML5, Джереми Кит, делится с нами своими мыслями относительно будущего CSS в целом, и сложившегося отношений CSS с препроцессорами, такими как Sass, в частности. Вне всяких сомнений, что CSS должен развиваться, но стоит ли увеличивать сложность стандарта ради его развития, тем более что уже сейчас препроцессоры выполняют все те же функции, о которых говорится применительно к будущему CSS?

Почему Sass?

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

Журнал Frontender Magazine: почти год с вами!

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

Десять причин нашего перехода с иконочного шрифта на SVG

Ян Фезер (Ian Feather), фронтенд разработчик сайта компании-туроператора Lonely Planet, делится причинами, которые привели к решению перейти с отображения иконок при помощи иконочного шрифта на использование SVG-файлов. Также описаны преимущества и недостатки обоих приёмов, наиболее удачные решения для обхода проблем, возникающих при использовании SVG.

После… или нет, перед… что-то я запутался

Псевдоэлементы ::before и ::after позволяют избежать загромождения разметки декоративными элементами, и у большинства веб-разработчиков не вызывают никаких вопросов. Однако, если хорошо разобраться, они противоречат одному из принципов идеологии веб-стандартов, а именно - они не отвечают требованиям семантики.

Разрабатываем более качественные API на JavaScript

Хотите написать собственную библиотеку на JavaScript? Отлично! И хотя на первый взгляд в этом нет ничего сложного, необходимо учесть все нюансы, делающие API по-настоящему удобным. Эта статья про то, как написать библиотеку, которая будет так же удобна и приятна в использовании, как, например, jQuery, Prototype или Underscore.

JavaScript-хаки для хипстеров

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

Gulp или Grunt, да всё равно

Сквозь текст этой статьи красной нитью проходит призыв — думайте своей головой. Да, возможно, Grunt медленный и не такой лаконичный, как gulp. Но, ведь у gulp тоже есть свои проблемы — потоковая система NodeJS очевидна далеко не каждому разработчику, количество плагинов, написанных для gulp, на порядок меньше, чем для Grunt, а его API ориентирован в основном на работу с файлами. Противопоставлять одну систему сборки другой достаточно легко, но стоит ли это делать? Автор статьи призывает нас выбирать инструмент, исходя из собственных потребностей, а не под влиянием трендов.

Пишем свой генератор для Yeoman

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

Потоковая передача данных в стиле gulp для Grunt, или для другого таск-менеджера

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

Пишем качественный код на jQuery

На текущий момент jQuery, вне всякого сомнения, самая популярная JavaScript-библиотека. Однако, если использовать её неправильно, есть шанс занять слишком много ресурсов браузера и затормозить процессы, выполняющиеся на странице пользователя, до невозможности. Бибилотека jQuery задумывалась, чтобы сделать JavaScript более читаемым, но мы научились писать нечитаемый код и на ней. В этой статье изложено несколько приемов, позволяющих «распутать» ваш jQuery-код, сделать его красивее и быстрее.

Исследование бездны null и undefined в JavaScript

Когда в JavaScript следует использовать null, а когда undefined? Райан Морр (Ryan Morr) делится своими размышленями об этих двух крайне необычных типах данных.

Фронтенд Средиземья, часть вторая

Вторая часть рассказа о создании промосайта к фильму «Хоббит: Пустошь Смауга», который так же является одним из последних экспериментов для Google Chrome. Статья рассчитана на людей, которые сталкиваются в повседневной работе с задачами, связанными с разработкой одностраничных приложений на основе JavaScript. Авторы статьи подробно описали процесс создания проекта и дали несколько весьма ценных советов по разработке подобных сайтов, их отладке и оптимизации производительности.

Простое и удобное gulp‑окружение для разработки html5‑игры меньше, чем за 5 минут

Желаете попробовать новые технологии или сделать небольшой проект для себя? Попробуйте поработать с gulp — новым и перспективным таск-менеджером для node-проектов. В этой статье несколькими легкими нажатиями клавиш создаётся удобное окружения для разработки html5-игры, подходящее и для обычного небольшого проекта.

Gulp — как глоток свежего воздуха после Grunt

Буквально на днях, в декабре, состоялся релиз таск-менеджера gulp.js, который является достойной альтернативой сверхпопулярному приложению Grunt. Давайте попробуем разобраться, зачем был создан gulp, и в чем его отличие от Grunt.

Фронтенд Средиземья, часть первая

Первая часть рассказа о создании промосайта (по совместительству эксперимента Chrome) для фильма «Хоббит: Пустошь Смауга». Автор делится интересным опытом, полученным при разработке мини-игр на WebGL, ориентированных на мобильные устройства. Советы по оптимизации кода, графики и несколько трюков, которые пригодятся в работе.

Разработка многопользовательских игр с помощью Node.js и Socket.IO

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

Игра с дополненной реальностью: технический обзор

Цель данной статьи — рассказать о процессе разработки игры с дополненной реальностью, «An AR Game», завоевавшей главный приз в конкурсе приложений Dev Derby, проходившем под патронажем фонда Mozilla в марте 2013 года. Игровая механика проекта строится на перемещении катящихся игровых элементов из пространства с двухмерной физикой в трёхмерное пространство.

Создание двухмерной браузерной игры на основе PhysicsJS

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

Grunt для тех, кто считает штуки вроде него странными и сложными

Крис Койер (Chris Coyier) в своей статье пошагово объясняет принцип работы с утилитой Grunt. Установка без подводных камней, начало использования, а также, улучшение и автоматизация процесса разработки при помощи Grunt, и какие реальные преимущества из этого всего можно извлечь. И, самое главное, почему не стоит бояться его использовать.

Простое документирование JavaScript с помощью YUIDocs и Grunt.js

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

Глубокое погружение в мутные воды загрузки скриптов

Загрузить JavaScript на странице — казалось бы, что может быть проще? Однако, не так просто сделать это эффективно. Эта статья не только рассказывает о тонкостях использования атрибутов defer и async, но и предлагает ряд интересных техник, как традиционных, так и более агрессивных. Наша цель — ответить на довольно нетривиальный вопрос о том, как предсказуемо загружать JavaScript так, чтобы совсем не задерживать отрисовку страницы.

«Котик» и «Домик» — новые CSS-селекторы

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

Не, не слышал

Что лучше: кивать, когда не до конца понимаешь, о чем речь, или собраться с силами, признать свою недостаточную осведомленность и перевернуть рабочий процесс с ног на голову только лишь для того, чтобы стать еще на шаг ближе к абсолютному знанию. И вообще, есть ли оно, такое знание, в профессии разработчика? Рассуждения и выводы делает Лиза Дэнжер Гарднер, разработчик мобильного стартапа Cloud Four.

60 кадров в секунду с помощью pointer-events: none; при прокрутке

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

Как работает event loop в Node.js

В статье автор, просто и понятно объясняет как работь с I/O в Node.js, рассказывает об устройстве событийного цикла, и подробно показывает на примерах, почему разработчики отказались от многопоточности или использования отдельных процессов для каждого запроса в стиле Apache и PHP.

Введение в события DOM

За всё время работы в фронтенде у меня сложилось впечатление, что ни один из просмотренных мной источников не дал чёткого объяснения, как работают события DOM. В этой статье представлен подробный обзор этой темы, описаны основы работы с событиями DOM, а также внутренние аспекты их работы и возможности их использования для решения часто встречающихся практических задач.

Правильные модули

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

Экологичный веб-дизайн

Вряд ли вы раньше задумывались, оказывает ли работа вашего сайта влияние на окружающую среду. Тем не менее, вклад интернета в увеличение загрязнения атмосферы растет год от года. Джеймс Кристи (James Christie) провел настоящую исследовательскую работу, показывающую это влияние, и предложил несколько способов снижения вредного воздействия каждого отдельного сайта на экологическую ситуацию в мире.

Быстрая инициализация проекта

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

Использование полноэкранного режима на мобильных устройствах

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

Новый тег <template>: введение стандарта шаблонизации на стороне клиента

Вряд ли кто-либо возразит тому факту что использование шаблонов значительно упрощает жизнь и экономит время веб-разработчику. В спецификации для HTML-шаблонов от W3C определён новый элемент <template>, который является реализацией стандарта шаблонизации для DOM на стороне клиента.

Теневая модель документа: продвинутые концепции и DOM API

Заключительная статья в цикле о теневой модели документа (Shadow Dom), в которой описано как можно использовать нескольких корневых элементов теневого дерева для одного ведущего элемента, создать теневую модель документа на JavaScript, а также представлен визуализатор работы теневой модели документа.

Теневая модель документа: CSS и стили

Продолжение цикла статей о Теневой модели документа (Shadow DOM). Во второй статье цикла рассмотрены особенности инкапсуляции стилей теневого дерева, а также способы её обхода: настройка наследования стилей страницы и обеспечение возможности добавления пользовательских стилей третьей стороной.

Теневая модель документа (Shadow DOM)

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

Познакомимся с Mutation Observers

Наблюдатели за изменениями (Mutation Observers) – легкий, современный способ отслеживать изменения внутри DOM вашего документа. В статье рассмотрены типовые задачи, которые можно решать с помощью наблюдателей за изменениями, и приведены подробные листинги.

Grunticon

SVG все более уверенно находит применение в веб, но браузеры, которые не поддерживает этот формат, все еще активно используются, а подготовка svg для имплементации — достаточно трудоемкий процесс. Grunticon это задача для Grunt, которая позволяет автоматизировать подготовку материалов, необходимых для имплементации в браузерах, которые поддерживают svg, и мягкой деградации в тех, которые его не поддерживают.

Руководство по Node.js для начинающих

Сейчас нет недостатка в обучающих материалах по Node.js, но большинство из них охватывают либо какие-то конкретные варианты использования, либо темы, применимые уже тогда, когда у вас есть работающий Node. То тут, то там я вижу комментарии вроде «я скачал Node, что теперь?».

Создание системы частиц в 200 строчек JavaScript

Хотели бы вы свою вселенную с частицами, излучателями и гравитацией? Меньше чем в 200 строчек чистого JavaScript мы напишем свою собственную систему частиц с излучателями и полями гравитации

Использование свойства pointer-events с медиа-запросами

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

Дизайн кода: организация JavaScript

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

Теперь WebKit поддерживает srcset, и это здорово!

С поддержкой srcset внутри WebKit возможности для создания веб-сайтов с отзывчивыми изображениями значительно выросли. В первую очередь этот атрибут важен для случаев, когда изображения являются частью содержимого вашего сайта, а не относятся только к его представлению. srcset — гибкое нативное решение, которое получить большое развитие в будущем — и оно прекрасно работает вместе с элементом picture, тем самым давая возможности для очень гибкой настройки отзывчивых изображений.

CSS-области и почему вы будете их использовать

CSS-области (CSS Regions) — это рабочий черновик спецификации, которая позволяет распределять текст между различными частями страницы. Потенциал этой спецификации огромен и, не смотря на то, что на данный момент поддержка спецификации браузерами далека от идеала, давайте посмотрим, как можно познакомится с ее возможностями уже сейчас.

Настраиваемые элементы: как определять новые элементы в HTML

Настраиваемые элементы (Custom Elements) — одно из низкоуровневых API внутри крупного HTML5-API веб-компонентов (Web Components) — дает нам инструмент для расширения словаря HTML, который в первую очередь скажется на красоте и логике HTML-разметки. В статье описываются основные приемы использования этого API (который поддерживается пока только в Google Chrome) и то, как его можно использовать вместе с другими низкоуровневыми API HTML5: шаблонами (HTML Templates) и теневым DOM (Shadow DOM).

Вокруг всемирной паутины за восемьдесят минут

Отправьтесь в кругосветное путешествие по всемирной паутине вместе с веб-разработчиком Филеасом Фоггом IV и энтузиастом интернационализации Жаном Паспарту III и откройте для себя тайны традиций типографики из разных уголков земного шара. В этом вам поможет Ричард Ишида, руководитель программы по интернационализации консорциума W3C.

Начинаем писать CSS

Если вы считаете, что знаете о процессе написания CSS всё, что только можно знать, вполне вероятно, что вы ошибаетесь. В своей статье болгарский программист Кразимир Цонев рассказывает о концепциях, которые помогли ему сделать процесс создания CSS проще, приятнее и быстрее: препроцессоры, БЭМ, атомный дизайн, органический CSS и прочее.

Семантичный CSS с умными селекторами

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

Полезные псевдо-селекторы

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

Полное руководство по Flexbox

Модуль Flexbox-лейаута ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический.

Сравнение и противопоставление ins, del и s

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

Запрашивайте кадры анимации для лучшей производительности

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

Электронные издания и веб

Кому-то это нравится, кому-то нет, но электронные книги прочно и надолго вошли в нашу жизнь. Их популярность во всем мире растёт с каждым годом. Создание электронных изданий с использованием ключевых веб-технологий HTML, CSS, SVG и др. — это новая интересная ниша для веб-разработчиков, которую консорциум W3C не мог проигнорировать.

Модули в ECMAScript 6: будущее уже сейчас

Как известно, в ECMAScript 6, следующей версии JavaScript, будет включена работа с модулями. В этой статье затронуты в первую очередь принципы работы модулей в ECMAScript 6. Также дается описание инструментов, которые позволяют вам сейчас использовать ECMAScript 6 модули.

60 кадров в секунду или динамический пререндеринг CSS-анимаций

Создание всё более красивых анимаций для сайтов — это то, чем я занимался последние пару лет. И каждый, кто будет заниматься тем, же чем и я предстоит сложный выбор: что использовать JS или CSS? Ленивый разработчик внутри вас будет просить о гибких JavaScript-анимациях, думающий о пользователях и производительности, разработчик будет пытаться (и плакать) использовать CSS-анимации. Более того, выбрав CSS-анимации перед вами встанет ещё один тяжёлый выбор. Но я нашёл решение, избавляющее вас от мук выбора. Rekapi и модуль CSSRenderer позволит вам добиться гибкости JS и плавности CSS-анимаций без лишней головной боли!

classList API

С появлением classList API веб-разработчики получили простой способ добавить, удалить и проверить наличие отдельных классов для элемента HTML. Благодаря ему теперь управлять классами без проблем могут даже те, кто не слишком хорошо владеет Javascript-фу и опасается HTML5 API.

Вопрос безопасности

Вирджиния Галиндо, председатель рабочей группы консорциума W3C по веб-криптографии, делится своими впечатлениями от работы над безопасностью сети в W3C и участия в собрании технического пленарного и консультационного комитета (TPAC). В рассказе также описано текущее состояние спецификаций API для криптографических операций и планы на будущее рабочей группы W3C по веб-криптографии.

Проектирование услуг за пределами экрана

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

Выбираем решение для изображений в отзывчивом дизайне

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

Решение проблем c @font-face в медиазапросах

Подключенные шрифты могут сделать сайт более привлекательным. Однако когда дело касается мобильных устройств, их использование может существенно повлиять на производительность, потому является нежелательным. В статье описан способ выборочного подключения шрифтов для разных типов устройств с помощью правила @font-face в медиазапросе. Также предложено решение для браузеров, которые не поддерживают @-правила в медиазапросах.

Мяч на чистом CSS

В статье представлен простой способ создания сферических объектов на чистом CSS. Бильярдный шар, теннисный мяч, анимированное глазное яблоко, дрожащий мыльный пузырь, даже вращающийся глобус Земли – используя предложенный способ можно создать множество объектов, список которых ограничен только фантазией.

Что такое <datalist> в HTML5 и где его использовать

Один из новых HTML5-элементов datalist, даёт нам быстрое и естественное решение для реализации подсказок к тексту, который начал вводить пользователь. В статье рассказано, что такое список вариантов <datalist>, в каких случаях его использование уместно, какие у него есть ограничения и что делать с браузерами, которые его не поддерживают.

Элемент <progress>

При разработке сайтов и веб-приложений часто появляется необходимость информировать пользователя о продвижении выполнения его запроса или задачи. С целью упростить жизнь разработчиков при добавлении индикатора прогресса выполнения задачи в HTML5 добавлен элемент <progress>.

Разметка для подзаголовков

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

Воссоздание сцены из обучающего видео игры PORTAL с помощью CSS

Что бы создавать в браузере внушительные 3D проекты не нужен JavaScript. В этой статье я докажу это на примере того, как можно воссоздать и анимировать сцену из обучающего видео игры Portal используя исключительно CSS.

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

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

Элемент main

Элемент <main> недавно был официально добавлен в спецификацию HTML W3C. Теперь, когда шумиха по этому поводу немного улеглась, настало время разобраться где и когда имеет смысл его использовать, а так же как обстоят дела с ARIA и какие браузеры на данный момент его поддерживают.

Разработка дизайна по контрольным точкам

Разработка отзывчивого дизайна — сложный процесс. Как построить этот процесс? Как выбрать контрольные точки для медиа-выражений? Как веб-приложение или сайт должны вести себя, значение ширины окна браузера попадает между этими точками? Вашему вниманию предлагается фрагмент книги Стивена Хэя «Рабочий процесс проектирования отзывчивого дизайна» (Responsive Design Workflow).

Нативные эквиваленты функций jQuery

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

Приём «машинка с клоунами»: адаптация изображений в отзывчивом веб-дизайне

Адаптивные изображения в последнее время стали острой темой для обсуждений в мире адаптивного и отзывчивого веб-дизайна. Эстель Вейл (Estelle Weyl) предлагает свое решение для этого вопроса: помещение несколько растровых изображений, оптимизированных под разные типы экранов в отзывчивый SVG.

Пишем тестируемый JavaScript

У всех наступал момент, когда ваше JavaScript-приложение, начавшееся с нескольких полезных строчек, разрасталось на тысячу строк, затем на две, дальше — больше. Постепенно функция начинает принимать чуть больше параметров; ветки условий получают ещё немного условий. И в один прекрасный день появляется баг: что-то сломано. И нам предстоит распутать весь этот бардак в коде.

Современные приёмы и методики в типографике (редакция 2013 года)

Команда Smashing magazine провела исследование текущих трендов в веб-типографике и изменений, которые в ней произошли за последние четыре года. В процессе исследования были изучены 50 авторитетных сайтов: международные газеты, журналы и блоги. В статье предоставлена статистика приёмов типографики, использованных на этих сайтах.

Кнопки в сторону: обзор интерфейсов с жестовым управлением

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

WYSIWTF

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

Ускорение загрузки сайта на мобильных устройствах

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

Использование консоли Google Chrome

Какие особенности существуют у встроенной консоли браузеров на базе WebKit и Blink? Вы знаете, чем отличается console.profile() от обычного profile() и про возможности настройки вывода и фильтрации, про работу из консоли с панелью Timeline и обращение к последним вызванным в инспекторе элементам? Это только малая толика того, о чём рассказывается в этой статье.

Как избежать лишних загрузок для отзывчивых изображений

Одним из нововведений в HTML5 стал элемент <picture>, придуманный для реализации отзывчивых изображений без использования JavaScript или сложных проверок на стороне сервера. В этой статье мы разберемся как работает резервный контент для <picture>, в каких случаях он перестает работать и как это можно исправить.

Хореография спасёт вашу иерархию!

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

Адаптивно-отзывчивый: разбираемся в терминологии

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

Магические числа в CSS

Несмотря на довольно весёлое название, магические числа - это плохо. В CSS магическими можно назвать числа, которые «работают» в определённых обстоятельствах, но очень хрупки и склонны к сбоям, когда эти обстоятельства изменяются. В статье на примерах показано применение магических чисел, их недостатки и аргументы почему таких чисел лучше избегать.

Создание и установка простого приложения для Firefox OS

Выход Geeksphone с FirefoxOS и открытие соответствующего апп-стора обещает нам новый рынок для наших приложений. В статье рассказывается о первом опыте создания приложения для FirefoxOS и поверхностно рассматриваются несколько проблем, которые возникли в процессе. Интересно?

Честность веб-материалов

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

Влияют ли CSS-свойства на производительность отрисовки страницы?

Я долго занимался написанием программных растеризаторов для работы с 3D, и для меня стало очевидным то, что производительность при отрисовке страницы будет меняться в зависимости от использованных CSS-свойств. Например, растеризация маленького изображения на экран происходит по совершенно другому алгоритму, чем отрисовка тени падающей на объект произвольной формы. Таким образом возникает вопрос: как различные CSS-свойства влияют на время отрисовки страницы?

Информация, которой хочется поделиться: донесите свое сообщение используя метаданные

Пользователи социальных сетей часто делятся ссылками на страницы, которые кажутся им интересными. Как с помощью схем метаданных OpenGraph и Twitter Cards сделать так, чтобы ссылка на страницу вашего сайта выглядела максимально привлекательно в ленте новостей пользователя, и зачем вообще это делать – рассказывается в этой статье.

Ваш логотип — всё еще изображение … как и мой!

Логотип это изображение, а не заголовок. Следовательно, с точки зрения семантики, он должен быть прописан в разметке как элемент img, а не h1, как это делают на многих веб-сайтах. В статье предложен метод достижения баланса между использованием семантически подходящих тегов и производительностью при выборе разметки для логотипов.

Как предотвратить снижение производительности при использовании подключаемых шрифтов

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

Используйте короткие селекторы

Существует простое правило: "Чем короче селектор, тем он эффективнее". В этой статье подробно рассказывается, почему разработчикам стоит следить за длиной используемых селекторов, и на примерах объясняются возможности их оптимизации.

Как работает автоматическое позиционирование в CSS?

Иногда мы используем те или иные технологии не пытаясь разобраться как они работают. Вы уверены что знаете как будет работать свойство auto в том или ином случае? Стивен Брэдли предгалагает разобраться в том как рассчитать числовой аналог для auto и как оно будет зависить от применения значения auto для смежных атрибутов.

Использование SVG

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

Простой (и довольно грубый) способ создания адаптивных таблиц

В настоящее время существует множество способов создания адаптивных таблиц, но все они не лишены недостатков. Хотите увидеть еще один, не требующий JavaScript и содержащий всего пару строк CSS, способ сделать таблицу адаптивной? Взгляните!

Дизайн, ориентированный на улучшение читабельности

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

Долой отзывчивый дизайн

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

Советы и приемы по подготовке стилей для печати

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

Эпоха символьных шрифтов

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

Используйте MathML с CSS деградацией

Иногда нам необходимо показать пользователю сложное математическое выражение. Мы можем вывести его в виде растрового изображения, которое не будет масштабироваться без потерь, и будет ужасно с точки зрения его доступности для пользователей с ограниченными возможностями. Или можем использовать MathML, который превосходно встраивается в HTML5, и для которого можно обеспечить кроссбраузерность, как с помощью полифилов, так и с помощью обычного CSS.

Отзывчивый дизайн: война ещё не выиграна

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

Взлом тега <a> в 100 символов

Совсем недавно я обнаружил, что JavaScript позволяет изменять атрибут href тега <a> после того, как вы кликнете по нему. Это может показаться не таким уж серьезным на первый взгляд, но будьте уверены, так покупатели могут попасться на крючок и передать свои личные данные мошенникам.

Как писать эффективные с точки зрения производительности CSS-селекторы

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

Погружение в CSS градиенты

Градиенты в CSS являются очень мощным инструментом и, понимая как они работают, вы можете создавать различные текстуры и фигуры без использования изображений. Рассмотрим практический пример создания разноцветного колеса, с использованием одного элемента DOM и градиентов.

Проблема стилизации элементов форм

Кроссбраузерное оформление элементов форм – это непростая задача. Спецификация CSS Level 2 не предусматривает их единого стилевого оформления, предоставляя производителям браузеров возможность самостоятельно определять стили по умолчанию. Тем не менее, некоторые веб-разработчики реализовали и описали способы приведения элементов форм к единому виду в разных браузерах. Данная статья описывает проблемы, возникающие при стилизации форм, и объясняет возможные способы их решения.

Два лица вашего сайта

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

Дизайн с Device API, учитывающий окружающую среду

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

Когда ID становятся болью в…

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

Головокружительное погружение в БЭМ

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