Как стать автором
Обновить
16
0
Константин Ляшко @kokis

Руководитель продукта

Отправить сообщение

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

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

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



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

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

Что такое холакратия и почему она вам не нужна

Время на прочтение12 мин
Количество просмотров151K
Холакратия скоро станет новым модным баззвордом в мире IT-бизнеса, какими в своё время стали стартапы, аджайл и лин. Уже сейчас в Силиконовой долине поднялся невероятный хайп: компании уровня Medium, Zappos и Airbnb вовсю внедряют Конституцию 4.0, появляются форки и альтернативные системы, рождается куча мисконцепций, спекуляций и критики в адрес этой модели распределения власти. Скоро тренд доберётся до наших северных широт и вызовет ещё больше непонимания из-за трудностей перевода. Давайте опередим события и попробуем разобраться, что такое холакратия, откуда она взялась и какую пользу может принести.



Кнопка обслуживает предпринимателей, и так уж получается, что нам всегда нужно быть чуточку впереди, чтобы предлагать самые крутые решения. Поэтому мы обожаем пробовать всё новое. Эксперименты с холакратией мы начали несколько месяцев назад: набили первые шишки, пообщались с консультантами из США, почувствовали первые улучшения и продолжаем внедрять и изучать. В первой статье расскажем про важные для понимания базовые штуки, а в следующих поделимся собственным опытом и ответим на популярные вопросы.
Читать дальше →
Всего голосов 52: ↑37 и ↓15+22
Комментарии109

Ускоряем понимание коммерческого или технического текста: как перестать бояться писать просто

Время на прочтение9 мин
Количество просмотров91K


Читать молча мы научились относительно недавно. Раньше не было иного логичного способа читать, кроме как строго вслух. Фактический процесс чтения напоминает слушание двух голосов: один проговаривает слова текста, второй переводит их для нас на понятный нам язык.

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

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

Поэтому сейчас я расскажу базовые вещи, которые можно делать прямо здесь и сейчас у вас на сайтах.
Читать дальше →
Всего голосов 117: ↑112 и ↓5+107
Комментарии51

GTD на кухне: чем накормить голодного программиста

Время на прочтение9 мин
Количество просмотров56K
imageИтак, как и обещал в первой части, продолжаем упрощать бытовую жизнь хабражителя. Сегодня 8 марта (кстати, девушки, поздравляю!) и части мужчин хочется порадовать своих женщин и освободить их от «рабского труда» на кухне, а другой части – приготовить для себя не традиционные пельмени\вареники\сосиски, а что-то посущественней.
Вот несколько проверенных рецептов, которые пригодятся и первым, и вторым.

Осторожно, много картинок. Голодным не входить!
Читать дальше →
Всего голосов 220: ↑168 и ↓52+116
Комментарии214

Рассказы о копирайте и интеллектуальной собственности

Время на прочтение3 мин
Количество просмотров47K


Вот уже некоторое время мы с коллегами составляем список художественных произведений на тему копирайт-пиратство. И вот недавно я неожиданно узнал, что пользователь под ником Рыжий Тигра (связаться с ним пока не удалось) тоже давно составляет подобный список, и он нашел таких произведений гораздо больше. Желающие могут ознакомиться с его списком и дополнениями в комментариях по поисковой фразе «хрестоматия копирайта».

Я объединил наши списки, и постарался отбросить наименее интересные работы, которые часто представляют собой просто художественно оформленные споры о копирайте. В итоге получилось около 20 рассказов. Ссылки приведены только для тех работ, которые авторы опубликовали сами, или распространяются по свободным лицензиям (были случаи, когда авторы протестовали против размещения ссылок на произведения). Некоторые вещи написаны профессионалами, некоторые — любителями, в том числе программистами. Не советую читать сразу все подряд, так как тема, в общем-то, одна, и может наскучить, хотя сюжеты и драматические эффекты встречаются весьма разнообразные.
Читать дальше →
Всего голосов 37: ↑30 и ↓7+23
Комментарии13

О речи, языке и музыке

Время на прочтение16 мин
Количество просмотров10K
Disclaimer No. 1. В прошлый раз я несколько переусердствовал с набросом, результатом чего стал настолько эпический срач в комментах, что я боюсь туда заглядывать, за что прошу прощенья у всех, кому не ответил. Исправляюсь и привожу одну хорошую и годную статью, которая, вообще-то, писалась для другого ресурса, но там меня больше нет.

Disclaimer No. 2. Никакого отношения к тематике Хабра эта статья не имеет, писать про это в комментах не надо. Не нравится хаб «Научно-популярное» — отпишись молча.

Я думаю, многие из вас задумывались о смысле музыки. Поймёт ли представитель дикого племени музыку Бетховена? А средневековый житель — музыку «Битлз»? Насколько универсален музыкальный язык и почему вообще мы способные его понимать?

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

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

Читать дальше →
Всего голосов 57: ↑46 и ↓11+35
Комментарии45

Собственная радиостанция Spreaker.com

Время на прочтение2 мин
Количество просмотров2.4K


Наверняка вы хотя бы раз задумывались о том что бы вести свое шоу на радио, сидеть в мягком кресле в студии и комментировать события, ставить любимую музыку и принимать звонки благодарных слушателей. В свое время я даже думал о том что бы собрать что нибудь вроде радио точки, и вещать на ближайшую округу, однако как всегда интернет нас опередил.
Читать дальше →
Всего голосов 49: ↑46 и ↓3+43
Комментарии12

Семейный бизнес в сфере IT. Мои три золотых правила

Время на прочтение7 мин
Количество просмотров106K
image

Предисловие


Помните мою предыдущую статью? В ней я рассказала о том, как мы с мужем основали собственный бизнес. Точнее, муж основал, а я чуть позже к нему присоединилась.

То, чем мы тогда занимались, очень сложно назвать бизнесом. Это скорее была работа в паре. Мы никогда не договаривались: ты делаешь это, а я это. Разделение обязанностей сложилось само собой.

Вы спросите: «Кто же в вашей команде главный?». Скажем так, мы оба прекрасно понимаем, кто главный. Но вслух это не обсуждаем, потому как один из нас может обидеться, а вторая слишком много о себе возомнит…

Конечно я шучу. Все решения принимаются вместе. Я не буду врать, что мы всегда мыслим одинаково и никогда не расходимся во мнении. Однако, мы научились слушать и понимать друг друга. Научились договариваться. Я думаю, это важно для любых бизнес-партнеров, независимо от того, являетесь вы семьей или нет.
Читать дальше →
Всего голосов 168: ↑162 и ↓6+156
Комментарии65

Психологическая деформация программистов. Взгляд с обеих сторон баррикад

Время на прочтение6 мин
Количество просмотров137K
Само наличие психологической деформации у какой-либо профессии, как правило, достаточно спорный момент ввиду того, что у разных людей она проявляется по-разному. Однако общую тенденцию можно выделить и, пожалуй, настало то время когда можно достаточно смело говорить, что программисты всё же имеют свой особенный психологический портрет который обусловлен их профессиональной деятельностью.

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

И что же них такого деформированного?
Всего голосов 461: ↑436 и ↓25+411
Комментарии558

Правительства боятся интернета[! или ?]

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

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

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

Давайте рассмотрим ситуацию под лупой
Всего голосов 127: ↑91 и ↓36+55
Комментарии97

Мобильные приложения для веб-разработчиков

Время на прочтение6 мин
Количество просмотров24K
Путь разработчика мобильного приложения часто начинается с выбора: разрабатывать под iOS, Android или Windows? Этот выбор мгновенно уменьшает размер вашей потенциальной аудитории, но разработчики вынуждены принимать подобные решения. Те, кто хочет присутствовать по всех трех магазинах приложений, приходят к необходимости переписывать приложение под каждую платформу.



Visual Studio позволяет поддерживать максимальный охват пользователей, достигая при этом значительного повторного использования кода. С помощью Xamarin C#-разработчики могут поддерживать общую бизнес-логику между iOS, Android и Windows-приложениями. С помощью Apache Cordova веб-разработчики могут достичь максимального повторного использования кода, создавая кросс-платформенные приложения на HTML, CSS и JavaScript.

В этой статьей мы посмотрим в деталях, как вы можете использовать расширение “Multi-Device Hybrid Apps” для Visual Studio, для второго сценария – создания кросс-платформенных приложений с использованием веб-стандартов. Чтобы следовать за статьей:

Читать дальше →
Всего голосов 34: ↑29 и ↓5+24
Комментарии7

Удаленная работа: как мы это делаем

Время на прочтение4 мин
Количество просмотров106K
Я проработал удаленно почти 10 лет, и познал разные стороны такой работы: как плохую так и хорошую. Я понял, что удаленная работа подходит определенному типу людей. Вы должны уметь фокусироваться, мотивировать себя, а также грамотно управлять своим временем. У вас нет этих качеств? Ничего, поначалу я тоже ничего этого не умел.
Читать дальше →
Всего голосов 75: ↑65 и ↓10+55
Комментарии65

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

Время на прочтение20 мин
Количество просмотров315K
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

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

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
Всего голосов 335: ↑318 и ↓17+301
Комментарии244

12 малоизвестных возможностей CSS

Время на прочтение8 мин
Количество просмотров137K
CSS — не очень сложный язык. Но даже если вы пишете таблицы стилей в течении многих лет, наверняка бывают моменты, когда вы узнаете еще что-нибудь новенькое: свойства или значения, которые вам не доводилось использовать, детали спецификации, о которых вы не имели понятия.

В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случай, в хозяйстве пригодится.
Читать дальше →
Всего голосов 115: ↑99 и ↓16+83
Комментарии55

Бесплатное программное обеспечение от JetBrains для образовательных учреждений

Время на прочтение1 мин
Количество просмотров32K
Хабравчане!

Многие студенты интересуются — есть ли у компании JetBrains бесплатные лицензии для обучения. Настало время внести ясность.

Eсли вы студент и хотите использовать наши продукты для образования, знайте: у нас существуют аудиторные лицензии (classroom licenses), абсолютно бесплатные, которые мы предоставляем всем образовательным учреждениям. С их помощью студенты могут свободно пользоваться всеми нашими продуктами без ограничений по функциональности.

Читать дальше →
Всего голосов 74: ↑70 и ↓4+66
Комментарии62

Обзор бесплатных сервисов для веб-разработки

Время на прочтение4 мин
Количество просмотров143K
Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится.

Всем нам иногда хочется попробовать новую идею, запилить какой-нибудь сайтик про манулов, но чтоб обязательно на node.js, хайлоад реди, с мемкешем, монго, фейловером и с претензией на мировое господство. У меня для Вас хорошие новости: благодаря щедрости проклятых западных капиталистов всё это можно получить совершенно бесплатно.
Читать дальше →
Всего голосов 157: ↑136 и ↓21+115
Комментарии113

Несколько интересностей и полезностей для веб-разработчика (выпуск 2)

Время на прочтение3 мин
Количество просмотров83K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Webflow



С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js


Функциональный и простой инструмент для создания параллакс эффекта.

Читать дальше →
Всего голосов 124: ↑114 и ↓10+104
Комментарии27

Обзор открытой IDE Adobe Brackets

Время на прочтение5 мин
Количество просмотров121K

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

Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда.

Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

(под катом скриншоты ~1.5Mb)
Читать дальше →
Всего голосов 61: ↑58 и ↓3+55
Комментарии30

«Однопоточный программист»

Время на прочтение5 мин
Количество просмотров47K
Всё нижеизложенное вымысел, основанный на реальных событиях.

Не являясь мастером писать заметки, пытался «с пылу с жару» изложить это вчера. Но просто и доступно выстроить мысли в стройном порядке «по горячим следам» не вышло.

Кроме того на личном опыте выяснилось, что описываемый подход, хоть он, на первый взгляд и кажется мне очень простым, статистически таким не является. Известное высказывание о том, что «простые вещи, они самые сложные» оказывается в данном случае верным.

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

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

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

UPD3 спасибо dimka_ben: под «однопоточностью» подразумевается особенность мышления конкретного индивидуума, когда в один момент времени он может думать только о чем-нибудь одном.

Читать дальше →
Всего голосов 92: ↑77 и ↓15+62
Комментарии129

Pixi.js — 2D движок с прозрачной поддержкой WebGL

Время на прочтение1 мин
Количество просмотров81K
Pixi.js позволяет использовать мощь WebGL для рендеринга 2D-сцен, совершенно не вникая в подробности реализации, более того, он умеет самостоятельно определять наличие поддержки WebGL и переключаться между способами рендеринга. В отсутствие WebGL рендеринг осуществляется средствами canvas. Кроме того в Pixi.js реализован граф сцены, поддержка текстур и спрайтов, чуть больше недели назад в нём появилась поддержка интерактивности — на спрайты можно повесить обработчики событий мыши и тачскрина.
Читать дальше →
Всего голосов 64: ↑61 и ↓3+58
Комментарии48

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность