Pull to refresh
69
0
Алексей Гурьянов @Guria

UX Developer, Cerebral JS Core team member

Видео доклада «Пишем #b_ правильно» с WebCamp 2015

Reading time 1 min
Views 10K
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.

Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.

Слайды: delka.github.io/talks/webcamp/2015/bem


Читать дальше →
Total votes 21: ↑18 and ↓3 +15
Comments 19

Манипулирование БЭМ-структурой с помощью Bemy

Reading time 3 min
Views 6.9K
Если вы используете БЕМ-методологию в своих проектах и выделяете БЕМ-сущности указанным ниже образом, то bemy существенно упростит вам жизнь, избавив от необходимости вручную создавать файлы блоков.



Если вы также используете deps.js файлы формата enb, то bemy будет вам особенно полезен, так как приняв на выход путь к этому файлу, bemy создаем файловую структуру блока (по умолчанию с css-файлами).
Читать дальше →
Total votes 19: ↑15 and ↓4 +11
Comments 38

Динамическое обновление веб-страницы

Reading time 5 min
Views 128K
image

Введение


Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?

Посмотрим, как можно ответить на эти вопросы.
Читать дальше →
Total votes 27: ↑12 and ↓15 -3
Comments 19

Не учите фреймворки, учите архитектуру

Reading time 5 min
Views 198K
Некоторое время назад у меня состоялся интересный разговор, коллега активно защищал Angular, говорил, что тот ускоряет веб-разработку. Я более десяти лет разрабатываю сложные web-сервисы, работал в Microsoft, в Spotware Systems на Кипре, сейчас создаю приложение для стартапа из Кремниевой долины, и в общем то слежу за трендами. Однако почувствовал себя динозавром, потому что не видел смысла использовать фронтэнд-фреймворки до того момента, а оказалось, что это уже мейнстрим. Шёл 2014-й год, я погрузился в мир Angular, Knockout и Backbone, что из этого вышло, почему я от них в итоге отказался и рекомендую коллегам сделать то же самое – под катом.
Читать дальше →
Total votes 152: ↑133 and ↓19 +114
Comments 123

RSConf: Обзор и видеоматериалы фронтенд-конференции в Минске

Reading time 9 min
Views 9.6K
image

The Rolling Scopes — минское сообщество фронтенд/javascript разработчиков. Мы занимаемся проведением митапов, воркшопов и Q&A сессий. А в этом году доросли до уровня, не побоюсь сказать этого слова, международной конференции. Наше 20-е мероприятие получилось помасштабнее остальных. В связи с этим непременно хочется поделиться деталями проведения, атмосферой и, конечно же, материалами.
Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Comments 5

Поиск опечаток в проекте

Reading time 1 min
Views 12K
Вычитывая документацию к одной библиотеке, обнаружил более десятка опечаток. Документация увесистая и редактируют её несколько человек.

Многократно просматривать тексты на опечатки нет времени и желания, копипастить тексты в онлайн-сервисы — долго и утомительно, хотелось как-то автоматизировать процесс. В итоге появился yaspeller на основе API Яндекс.Спеллера.
Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Comments 12

Магия одного div. Мастеркласс от создателя a.singlediv.com

Reading time 7 min
Views 49K
Почему Single Div?

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

Но почему именно один DIV?

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

Я решила запустить проект a.singlediv.com, где намеревалась каждые несколько дней размещать нечто новенькое, созданное с помощью CSS. Я поставила перед собой ограничение использовать только один DIV.
Читать дальше →
Total votes 74: ↑71 and ↓3 +68
Comments 23

Ещё один пост о сборке front-end проекта

Reading time 15 min
Views 84K
Js app starter

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

Что умеет делать сборщик:
  • Собирать front-end проект для development & production окружений.
  • Собирать по несколько js/css бандлов на проект.
  • Использовать стиль CommonJS модулей в браузере.
  • Использовать ES6-синтаксис.
  • Спрайты, картинки и многое другое.

Читать дальше →
Total votes 24: ↑22 and ↓2 +20
Comments 12

Используем время простоя веб-приложения для фоновых задач

Reading time 4 min
Views 14K
Я люблю, когда мои приложения бегут со скоростью 60 fps, даже на мобильных устройствах. А еще я люблю сохранять состояние моего приложения, например, открытые окошки или введенный текст в localstorage и метаданных пользователя (если он зарегистрирован), чтобы, закрыв его, работу с ним можно было бы продолжить позже с того же места, в том числе и на другом устройстве.

Это все прекрасно, вот только сегодня я столкнулся с одной проблемой. Дело в том, что есть у меня одно боковое меню, offcanvas, и его состояние (открыто/закрыто) я тоже бы хотел сохранить в браузере и учетной записи пользователя. Вот только запись в localstorage и AJAX реквест на обновление в БД асинхронны и они все время норовят запускаться прямо во время сложной анимации, крадя у меня пару-другую фреймов, что особенно заметно на мобильных устройствах. Очевидно, мне бы хотелось, чтобы данные сохранялись после того, как анимация завершится, а не в критичный момент моего приложения, но как?
Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Comments 14

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

Reading time 29 min
Views 107K
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →
Total votes 96: ↑79 and ↓17 +62
Comments 37

SummaryJS: самое интересное из мира JavaScript за последнюю неделю

Reading time 2 min
Views 22K
Две недели назад я начал вести свой подкаст на тему JavaScript. И каждую неделю у меня накапливается большой список интересных статей, видео и новостей, которыми интересно было бы поделиться с сообществом. В связи с этим я решил попробовать выложить вот такой набор интересных материалов.

На Хабре есть как минимум 2 еженедельных обзора мира фронтенда. Они классные, но пишут про весь фронтенд. А я пытаюсь больше уделять внимание JavaScript.

Если понравится — пишите, буду продолжать. Если нет — тоже пишите.
Читать дальше →
Total votes 45: ↑36 and ↓9 +27
Comments 12

300 потрясающих бесплатных сервисов

Reading time 11 min
Views 1.6M


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16 +309
Comments 107

Дайджест продуктового дизайна, январь 2015

Reading time 17 min
Views 16K
Уже почти пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-декабрь 2014.

Дайджест продуктового дизайна, январь 2015
Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Comments 0

Анонимный Дед Мороз 2014 — Пост хвастовства новогодними подарками

Reading time 1 min
Views 12K
image

Привет, %username%!

В запустившемся несколько позже обычного «Хабра АДМ-2014» уже 33 человека получили свой новогодний подарок!

Давайте хвастаться своими подарками на зависть тем, кто был забанен в этом сезоне ;-)

С НАСТУПИВШИМ НОВЫМ 2015 ГОДОМ!

Традиционная форма для обращения к эльфам тут.
Total votes 40: ↑35 and ↓5 +30
Comments 62

Изоморфный БЭМ

Reading time 7 min
Views 14K
Когда появился node.js, многие web-разработчики стали задумываться о возможности использовать один и тот же код как на клиенте, так и на сервере. Сейчас существует несколько фреймворков, ставящих подход «пишем код один раз, используем везде» во главу угла, время от времени появляются новые. Вот и я не смог пройти мимо, пишу подобный микро-фреймворк — bnsf. Он предназначен для тех, кто предпочитает создавать front-end своих приложений по БЭМ-методологии, пользуясь соответствующим набором технологий и инструментов.

Давайте попробуем начать писать front-end для простого одностраничного web-приложения, используя bnsf. Чтобы не отвлекаться на создание back-end части, будем использовать в качестве back-end'a API vk.com. Наше приложение будет состоять всего из двух страниц, главной — с формой поиска пользователей по идентификатору — и вторичной, на ней будем выводить информацию о выбранном пользователе.
Читать дальше →
Total votes 25: ↑19 and ↓6 +13
Comments 31

02 Ссылки для UX-специалистов

Reading time 3 min
Views 33K
В этой подборке продолжаю делиться информационными ресурсами, где можно почерпать новые знания, отследить новые методы, техники и аналитку, а также улучшить свои навыки в области UX. В отдельном абзаце собрал некоторые материалы по UX в области носимых устройств.


Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Comments 0

Как загрузить виртуальный корпоративный Office 2013 с сайта Microsoft

Reading time 5 min
Views 60K
Хочу поделиться сценарием работы с приложениями Microsoft Office, не требующем ни поиска дистрибутива, ни установки пакета, ни обновления. Уже несколько лет для подписчиков Office365 предлагается версия Click2Run офисного пакета, которая скачивает, по сути уже установленный Office с последними обновлениями. Неприятный момент в том, что Click2Run версия распространяется лишь в Retail варианте, требующем специального ключа и ручной активации, или подписки на Office365. Однако, что-то повлияло на политику компании, и без особой помпезности стала доступна для скачивания и Volume (корпоративная) версия Office 2013, которая активируется вашим KMS сервером, или другим методом активации, и которую хотя и нельзя использовать как Click2Run, можно штатно сконвертировать в виртуальное приложение APP-V 5.0. Сейчас я расскажу о том, как легально скачать полный набор установленных и обновленных продуктов Microsoft Office, и как оптимально им пользоваться, не засоряя системы. Если будет интерес, впоследствии расскажу и об аналогичном сценарии для более новой версии Office, которая сейчас в стадии бета тестирования, — как получать обновленные сборки из первых рук и пользоваться ими не мешая своим локальным стабильным версиям продукта.
Читать дальше →
Total votes 31: ↑25 and ↓6 +19
Comments 8

Как загрузить последний Office с сайта Microsoft без всякого App-V

Reading time 4 min
Views 72K
На прошлой неделе я написал заметку «Как загрузить виртуальный корпоративный Office 2013 с сайта Microsoft», где описал, как при помощи Office Deployment Tool загрузить последнюю корпоративную версию Office 2013 и сконвертировать её в формат виртуального пакета APP-V 5.0. Очевидно, что виртуализация приложений интересна для массового развертывания, для сценариев ферм терминального доступа, и для энтузиастов, часто обновляющих ОС на домашнем ПК, — например, устанавливая регулярные сборки Windows 10 по программе Windows Insider, и не желающих переустанавливать вручную все приложения. Для более простого пользователя существует совсем тривиальный сценарий установки Microsoft Office всё тем же Deployment Tool в режиме Click2Run. Отличий от способа, описанного в прошлой заметке два. Во-первых, не нужна конвертация пакета в формат APP-V, (соответственно, не нужен сам APP-V и махинации в PowerShell) – прямо после загрузки пакета мы его одной командой приготовим к Click2Run использованию. Второе отличие будет более печальным – для режима работы Click2Run доступны лишь Retail версии Office 2013, — следовательно, продукт потребуется активировать вручную. Рассмотрим процесс по шагам.
Читать дальше →
Total votes 18: ↑15 and ↓3 +12
Comments 5

Information

Rating
Does not participate
Location
Самарская обл., Россия
Date of birth
Registered
Activity