Анимированная bootstrap кнопка меню «гамбургер»

Кнопка «гамбургер» стала своего рода стандартом для мобильных версий сайтов, по нажатию на которую, появляется или скрывается меню сайта. Но стандартная кнопка в bootstrap никак не изменяется при нажатии. Ниже находится сниппет, добавляющий популярную анимацию (превращение в крестик) для данной кнопки.Подробнее »Анимированная bootstrap кнопка меню «гамбургер»

Стайлгайд: синтаксис sass

Если несколько front-end разработчиков работают на одном проекте, это только вопрос времени, когда один из них станет писать код как ему придет на ум. И когда разработчики начинают работать со строками кода не придерживаясь определенного стиля написания, тогда и начинаются потери во времени, проблемы с пониманием написанного, споры.

Для урегулирования этих проблем существуют стайлгайды, придерживаясь которых, можно повысить ясность кода и облегчить дальнейшую поддержку проекта. Именно о стайлгайде работы с sass я и хочу поведать.Подробнее »Стайлгайд: синтаксис sass

Используем препроцессор sass

Вы давно хотите изучить sass, но не знали с чего начать? Или вы и так уже используете sass, но знания поверхностные и их хотелось бы прокачать? Данная статья поможет вам уверенно использовать всю мощь препроцессора sass и получать удовольствие от работы с ним.Подробнее »Используем препроцессор sass

Создание html5 приложений с помощью CreateJS

После того как Apple, объявили о прекращении поддержки flash, нам открылся новый рынок с широкими горизонтами, а именно разработка новых и портирование уже существующих игр на html5. Даже малым веб-студиям начали сыпаться заказы на портирование игр и именно поэтому я представляю вводный курс в весьма известный и многофункциональный фреймворк CreateJS, который включает в себя такие пакеты: EaselJS, TweenJS, SoundJS и PreloadJS.Подробнее »Создание html5 приложений с помощью CreateJS

Плавная прокрутка на iOS

По умолчанию все страницы в браузерах под iOS имеют импульсную прокрутку «momentum scrolling», которая позволяет странице еще продолжать движение после скролла. Подобное инерционное движение можно наблюдать если толкнуть шайбу по льду. Можно подумать, что подобными свойствами должны обладать все элементы страницы, у которых задан внутренний скролл, но это не так.Подробнее »Плавная прокрутка на iOS

Распространенные ошибки Responsive Design

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

Ускоряем верстку по БЭМ

В данной статье я расскажу, как автоматизировать процесс построения дерева классов с вложенностью в вашем sass файле, для верстки документа построенного по методологии БЭМ.

Прежде всего, что такое БЭМ?

БЭМ — методология для фронт-енда от Яндекса. Суть которой улучшить понимание верстки между разработчиками проекта, ускорить процесс разработки и повысить качество фронт-енда за счет независимости блоков друг от друга.

Подробнее »Ускоряем верстку по БЭМ

Простой js шаблонизатор

Недавно пришлось столкнуться с уже готовым очень простым проектом, в котором было необходимо добавить вывод дерева категорий и товаров в них. Данные приходили в виде json через запросы к API. В арсенале на фронте был лишь jQuery, а привыкнув к шикарному шаблонизатору Angular’а, я не хотел вновь возвращаться к конкатенации строк, и подключать какой-то фреймворк естественно не имело смысла. Мне необходим был минимальный шаблонизатор, который мог бы повторять куски верстки подобно директивам angular, с условиями и переменными.Подробнее »Простой js шаблонизатор

Mac OS X — самая популярная ОС среди разработчиков

По последним результатам исследования StackOverflow, на 2016 операционная система OS X является самой популярной среди разработчиков. По итогам анкетирования, 26,2% специалистов предпочитают Mac OS X, а популярность Linux упала до 21,7%.

Подробнее »Mac OS X — самая популярная ОС среди разработчиков

Делаем сетку с помощью flexbox

Flexbox-сетка, имеет название «CSS-модуль раскладки гибких блоков» – новый раскладочный модуль в CSS3, он создан для задания выравнивания, направления и порядка блоков в родительском контейнере, даже если их размер динамически изменяем или неизвестен. Основная фишка flex-блока — это способность изменять параметры (ширину или высоту) своих дочерних элементов, чтобы как можно лучше заполнить свободную область на экранах с различной высотой и шириной.

Данные видео расскажут о необходимых свойствах и помогут сверстать flexbox-сетку для вашего проекта:Подробнее »Делаем сетку с помощью flexbox

Генератор домена с проверкой доступности

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

Для решения этой проблемы можно воспользоваться тремя методами:

  1. Регистрироваться в зонах 2-го уровня.
  2. Заплатить приличную сумму за красивый домен в зоне 1-го уровня.
  3. Быть оригинальным и придумать домен, который другие еще не заняли.

Именно для третьего метода мною был давненько разработан простой сервис для генерации оригинальных доменов и мгновенной проверки их доступности в популярных зонах.

Подробнее »Генератор домена с проверкой доступности