Потребовалось больше шести лет на то, чтобы CSS Grid был реализован во всех браузерах. На протяжении всей истории спецификации, она была переполнена противоречиями. В 2011… Подробнее »Flexbox и CSS Grid: разрушение мифов
Progressive Web Apps используют последние технологии браузеров, позволяющие установить ваше веб-приложение на мобильное устройство и пользоваться им очень быстро, даже офлайн. В статье описан минимум шагов, которые необходимо сделать, чтобы Angular 2 приложение считалось прогрессивным и его можно было установить на рабочий стол прямо из браузера.Подробнее »Progressive Web App и Angular
В этой статье я не собираюсь делать обзор между VS Code и каким-то редактором или IDE. Я хочу поделиться своим опытом перехода с PhpStorm на Visual Studio Code, работая с проектами, в которых используется typescript, js, node.js и php.Подробнее »О том, как я перешел с PhpStorm на VS Code
Если вы web-разработчик, то наверняка слышали такое понятие как «Progressive Web App».
Данное определение является немного расплывчатым и несколько спорным. Но в целом, идея заключается в том, что веб-страница, которая «приняла нужные витамины», ведет себя как обычное приложение установленное из App Store. Изначально страница открывается, как обычно в окне браузера, но если она обладает правильным функционалом, пользователь сможет позволить браузеру «Добавить на рабочий стол» эту страницу. Ранее данный функционал использовался в качестве закладок.Подробнее »Progressive Web Apps — будущее веба
Наверняка каждый из вас хотя бы раз встречал сайт, в котором по мере скролла появляются элементы с различными css3 анимациями. Для реализации таких эффектов и приданию динамичности сайту в целом можно использовать библиотеку animate.css. О том как ее использовать я расскажу далее.Подробнее »CSS3 анимация c помощью animate.css
В эру мобильных технологий каждая уважающая себя компания или владельцы сайтов создают мобильные приложения, что бы пользователям было еще удобней, быстрее и приятней воспользоваться их услугами. И это логично, ведь чем удобней доступ к сервису, тем больше у него аудитория, а следовательно и больше возможной прибыли. Но не все заказчики могут себе позволить найм нужного количества разработчиков для создания нескольких нативных приложений для разных платформ, да и не все студии имеют нужных специалистов. Но представьте себе технологию, которая позволит обычным разработчикам сайтов создавать кросс-платформенные приложения зная лишь как верстать и javascript. Круто? И я так думаю. Ниже я хочу поведать вам о невероятном фреймворке, который позволит компилировать html5+css+js код в нативные приложения сразу под несколько платформ.Подробнее »Гибридные приложения, разработка c Ionic
Если несколько front-end разработчиков работают на одном проекте, это только вопрос времени, когда один из них станет писать код как ему придет на ум. И когда разработчики начинают работать со строками кода не придерживаясь определенного стиля написания, тогда и начинаются потери во времени, проблемы с пониманием написанного, споры.
Для урегулирования этих проблем существуют стайлгайды, придерживаясь которых, можно повысить ясность кода и облегчить дальнейшую поддержку проекта. Именно о стайлгайде работы с sass я и хочу поведать.Подробнее »Стайлгайд: синтаксис sass
Вы давно хотите изучить sass, но не знали с чего начать? Или вы и так уже используете sass, но знания поверхностные и их хотелось бы прокачать? Данная статья поможет вам уверенно использовать всю мощь препроцессора sass и получать удовольствие от работы с ним.Подробнее »Используем препроцессор sass
После того как Apple, объявили о прекращении поддержки flash, нам открылся новый рынок с широкими горизонтами, а именно разработка новых и портирование уже существующих игр на html5. Даже малым веб-студиям начали сыпаться заказы на портирование игр и именно поэтому я представляю вводный курс в весьма известный и многофункциональный фреймворк CreateJS, который включает в себя такие пакеты: EaselJS, TweenJS, SoundJS и PreloadJS.Подробнее »Создание html5 приложений с помощью CreateJS
Представьте себе ситуацию, когда Вы часами трудились над макетом, отшлифовали все элементы под все размеры экранов и вроде бы, в режиме отзывчивого дизайна во всех браузерах все нормально, но вот открываете сайт на телефоне и все выглядит не так, как Вы задумывали. Шрифты больше, анимации медленные, элементы формы сами на себя не похожи. И Вам приходится тратить драгоценное время на поиски в интернете решения проблемы. В данной статье я расскажу о часто встречаемых подводных камнях, знание которых, существенно сэкономит время при разработке.Подробнее »Распространенные ошибки Responsive Design
В данной статье я расскажу, как автоматизировать процесс построения дерева классов с вложенностью в вашем sass файле, для верстки документа построенного по методологии БЭМ.
БЭМ — методология для фронт-енда от Яндекса. Суть которой улучшить понимание верстки между разработчиками проекта, ускорить процесс разработки и повысить качество фронт-енда за счет независимости блоков друг от друга.
Flexbox-сетка, имеет название «CSS-модуль раскладки гибких блоков» – новый раскладочный модуль в CSS3, он создан для задания выравнивания, направления и порядка блоков в родительском контейнере, даже если их размер динамически изменяем или неизвестен. Основная фишка flex-блока — это способность изменять параметры (ширину или высоту) своих дочерних элементов, чтобы как можно лучше заполнить свободную область на экранах с различной высотой и шириной.
Данные видео расскажут о необходимых свойствах и помогут сверстать flexbox-сетку для вашего проекта:Подробнее »Делаем сетку с помощью flexbox