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

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

Этот проект не самый простой, поэтому возникает вопрос, зачем он нужен, если есть готовые фреймворки типа Keras, TensorFlow и Caffe, где, как говорится, «сел и поехал»? А ответ прост: нужен гибкий инструмент с возможностью расширения, с которым подружится Python. Научились мы отличать кита от чайки, но что нам это даст? IFunny серьёзно делает весёлое приложение и хочет удивлять пользователей новыми фичами, так почему бы не изучить такое богатое направление и применить?

Прочитав этот разбор, вы станете на шаг ближе к просветлению. Готовы? Тогда хватайте ручку, бумагу и приступаем!

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

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

Содержание

• Вопросы и ответы
  
• Введение
  
  • Пре-реквизиты
    
  • Настройка компьютера
    
  
  
• 1.0 Играем с Busybox
  
  • 1.1 Docker Run
    
  • 1.2 Терминология
    
  
  
• 2.0 Веб-приложения и Докер
  
  • 2.1 Статические сайты
    
  • 2.2 Образы
    
  • 2.3 Наш первый образ
    
  • 2.4 Dockerfile
    
  • 2.5 Docker на AWS
    
  
  
• 3.0 Многоконтейнерные окружения
  
  • 3.1 SF Food Trucks
    
  • 3.2 Сети Docker
    
  • 3.3 Docker Compose
    
  • 3.4 AWS Elastic Container Service
    
  
  
• 4.0 Заключение
  
  • 4.1 Следующие шаги
    
  • 4.2 Фидбек автору
    

Вопросы и ответы

Что такое Докер?

Определение Докера в Википедии звучит так:

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

Ого! Как много информации.

После установки обновления огромное количество пользователей жалуются на некорректную реакцию компьютера на выход из режима сна, причём независимо от типа устройства, будь то iMac, Macbook или Mac Mini. Проявляется это таким образом: после погружения компьютера в сон, его уже невозможно разбудить традиционными способами: открытием крышки ноутбука, нажатием кнопки включения, etc, приходится делать hard reset. Главная прелесть заключается в том, что существует множество модификаций этого бага: у кого-то он проявляется только если вводить компьютер в режим сна путём закрытия крышки, у кого-то только путём нажатия «Режим сна» в меню; у кого-то он проявляется только при подключённом MagSafe, а у кого-то только при работе от аккумулятора. У меня же он проявляется крайне экзотическим образом: система просыпается, но ведёт себя так, как будто её перезапускали, — все приложения загружаются заново.

Что интересно, единого лекарства против этого нету. На форуме поддержки предлагают огромное количество решений проблемы, но ни один из них не помогает всем и наверняка.
Этот пост — сборка всех возможных решений отсюда: https://discussions.apple.com/thread/3190738.

У меня с детства не любовь к книгам в которых рассказывают:

• Как заработать миллион;
• Как лучше тренироваться (признаюсь, когда занимался боксом, решил прочитать одну книжку, какого-то известного тренера);
• Как стать красивым(ой);
• Как стать умным(ой);
• Как добиться успеха;

По мотивам поста Шарик, отвечающий на вопросы

В данной статье мы напишем локализованный Magic 8-Ball для Android, которому можно будет задать вопрос, потрясти и получить ответ. Небольшая вибрация оповестит нас о том, что тряски достаточно.

Статья рассчитана на тех, кто уже написал хелловорлд под Android и собирается идти дальше в этом направлении. Полная версия исходного кода лежит на google code. Там же можно попробовать файл magic-8-ball 1.1.apk во вкладке download.

Для успешной работы нам будут нужны установленные jdk, android sdk, eclipse и ADT плагин. Как это сделать, доступно написано здесь.

Доброе время суток.

Хочу представить проект, над которым работал в последнее время: Flask-Admin. Если в двух словах, это расширение для фреймворка Flask, которое позволяет быстро создавать административный интерфейс в стиле Django.

Доброго дня, уважаемые хабравчане-маководы!

Сегодня я расскажу как увеличить эффективность работы в Mac OS X за счёт использования консоли.

Лирическое отступление

Думаю, ни для кого не секрет, что Mac OS является Unix-based системой, но переработанной почти до неузнаваемости. Даже консоль засунули куда подальше — не сразу и найдёшь. И вся система нацелена на использование GUI, при дефолтных настройках даже переключение между кнопками по Tab не работает — без мыши никуда. И тем не менее, Мак — это не только окошки, не только док и лаунчер. Мак это ещё и вся мощь shell скриптов и консоли!

Если Вы пришли из мира M$, то для начала неплохо бы поучить общие команды shell'а, например, по вот этому учебному пособию. Как минимум, нужно усвоить команды перехода по каталогам и способы запуска программ и скриптов.

Если Вы пришли в мир Mac OS из мира Linux'а и FreeBSD, то, скорее всего, знаете как минимум основы shell-скриптинга. Но и для вас в статье может оказаться кое-что интересное, ведь в маке есть уникальные консольные команды, которые так же полезно знать.

Вот о некоторых особенностях маковской консоли далее и пойдёт речь.

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

К сожалению, в сообществе node.js, на данный момент сложилась такая ситуация, что подавляющее большинство драйверов к распространённым сервисам имеет ряд существенных недостатков, не позволяющих приложениям достигать заслуженных высот эффективности и стабильности. Вы наверняка слышали все эти ужасающие истории о том, что «node.js течёт», оно “игрушечное”, не предназначенное для применения в настоящей высоконагруженной среде. Однако, как мы убедились на собственном опыте, с умом написанное ПО для ноды блестяще справляется со всеми испытаниями суровых боевых реалий. И здесь мы приходим к главному вопросу: что же мешает среднестатистическому node.js-драйверу нормальной работе?

На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!

На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Часть 1

Эта замета о нескольких генераторах статических веб-страниц. Список различных движков — в самом конце.

Jekyll появился, когда Tom Preston-Werner, сооснователь GitHub, устав от блогерских платформ вроде Wordpress или Blogger, задался вопросом: "А что случится, если я буду писать в блог так, как я разрабатываю програмные продукты?" Посты в нем создаются в файлах в формате Textile и проспускаются через движок шаблонов Liquid. И тот, и другой весьма популярны среди рубистов.

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.

Предисловие

18 февраля вышел релиз Grunt v0.4.0, с чем всех и поздравляю. Если вы еще не знакомы с Грантом — прошу пройти на официальный сайт или почитать ознакомительную статью на Хабре. Вкратце, Грант позволяет автоматизировать склеивание и минификацию js-файлов, запуск тестов, проверку кода с помощью JSHint и многое другое.

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

Зачем я использую Grunt

Как любому ленивому frontend-разработчику, мне нужен был инструмент, который автоматизирует рутинные задачи, позволяя сосредоточиться непосредственно на разработке. Так я нашел Грант, который делал за меня следующее:

• компиляция stylus в css;
• склеивание js-файлов;
• проверка JavaScript линтером;
• минификация склеенных js-файлов;
• запуск unit-тестов (qUnit);
• отслеживание изменений исходных файлов и автоматический перезапуск вышеперечисленных задач.

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

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

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

Идея паттерна Observer заключается в создании зависимости типа один ко многим. При изменении состояния одного объекта(субъекта), зависящие от него объекты(наблюдатели) об этом оповещаются и обновляются. Это нужно для согласования состояния взаимосвязанных объектов без их жесткой связанности.

Однажды вечером, сразу после того, как я закончил разбираться с наследованием в JS, мне пришла в голову идея, что пора бы заняться чем-нибудь посложнее — например паттернами. На столе внезапно оказалась книжка Gof, а на экране ноутбука появился труд с названием «JavaScript patterns».

В общем, спустя пару вечеров, у меня появились описания и реализации на JavaScriptе самых основных паттернов — Decorator, Observer, Factory, Mediator, Memoization (не совсем паттерн, а скорее техника, но мне кажется что она прекрасно в этот ряд вписывается) и Singleton.

Постепенно концепция стандарта HTML5 становиться реальностью. Браузеры начинают поддерживать новые возможности, которых так не хватало. Но с новыми возможностями появляются и новые проблемы.
В данной статье рассматривается Application Cache API — совокупность функций, обеспечивающих продвинутое кэширование ресурсов web-приложения, и с помощью которых можно просматривать загруженные ранее сайты без подключения к сети Интернет. Особое внимание я уделил практическому использованию и проблемам Application Cache.