Pull to refresh
7
0
Евгений Терещенко @Jman

Frontend Developer

Send message

Скрытая цена CSS-in-JS-библиотек в React-приложениях

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


Читать дальше →
Total votes 25: ↑24 and ↓1+38
Comments5

Установка Facebook image recognition package. Все грабли в одном месте

Reading time22 min
Views6.8K

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


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


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


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

Читать дальше →
Total votes 38: ↑37 and ↓1+36
Comments4

Консоль разработчика Google Chrome: десять неочевидных полезностей

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

image

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Читать дальше →
Total votes 88: ↑83 and ↓5+78
Comments62

Полное практическое руководство по Docker: с нуля до кластера на AWS

Reading time39 min
Views1.6M



Содержание



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


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


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


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



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

Читать дальше →
Total votes 125: ↑124 and ↓1+123
Comments44

Проблема с режимом сна в Mac OS Lion

Reading time3 min
Views88K
Mac OS Lion

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

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

Читать дальше →
Total votes 48: ↑33 and ↓15+18
Comments115

меньше читать, больше работать

Reading time3 min
Views660
У меня с детства не любовь к книгам в которых рассказывают:
  • Как заработать миллион;
  • Как лучше тренироваться (признаюсь, когда занимался боксом, решил прочитать одну книжку, какого-то известного тренера);
  • Как стать красивым(ой);
  • Как стать умным(ой);
  • Как добиться успеха;
Читать дальше →
Total votes 15: ↑12 and ↓3+9
Comments11

Пишем Magic 8-Ball для Android

Reading time12 min
Views16K


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

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

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

Для успешной работы нам будут нужны установленные jdk, android sdk, eclipse и ADT плагин. Как это сделать, доступно написано здесь.
Читать дальше →
Total votes 105: ↑89 and ↓16+73
Comments15

Flask-Admin

Reading time4 min
Views59K
Доброе время суток.

Хочу представить проект, над которым работал в последнее время: Flask-Admin. Если в двух словах, это расширение для фреймворка Flask, которое позволяет быстро создавать административный интерфейс в стиле Django.
Читать дальше →
Total votes 46: ↑45 and ↓1+44
Comments22

Консоль для маководов: Beyond the GUI

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

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

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


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

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

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

Вот о некоторых особенностях маковской консоли далее и пойдёт речь.
Поехали!
Total votes 104: ↑91 and ↓13+78
Comments126

Драйвер для PostgreSQL на Node.js

Reading time3 min
Views32K
Быстрый Node.js

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

К сожалению, в сообществе node.js, на данный момент сложилась такая ситуация, что подавляющее большинство драйверов к распространённым сервисам имеет ряд существенных недостатков, не позволяющих приложениям достигать заслуженных высот эффективности и стабильности. Вы наверняка слышали все эти ужасающие истории о том, что «node.js течёт», оно “игрушечное”, не предназначенное для применения в настоящей высоконагруженной среде. Однако, как мы убедились на собственном опыте, с умом написанное ПО для ноды блестяще справляется со всеми испытаниями суровых боевых реалий. И здесь мы приходим к главному вопросу: что же мешает среднестатистическому node.js-драйверу нормальной работе?
Читать дальше →
Total votes 31: ↑23 and ↓8+15
Comments19

Директивы в Angularjs для начинающих. Часть 1

Reading time5 min
Views198K
На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Читать дальше →
Total votes 47: ↑44 and ↓3+41
Comments45

Директивы в Angularjs для начинающих. Часть 2

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

Генераторы статических веб-сайтов

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

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

Читать дальше →
Total votes 16: ↑11 and ↓5+6
Comments16

Время подключать исходники. Введение в Source Maps

Reading time19 min
Views55K
В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.
Читать дальше →
Total votes 28: ↑24 and ↓4+20
Comments3

Миграция на Grunt v0.4

Reading time5 min
Views9.1K

Предисловие


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

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

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


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

  • компиляция stylus в css;
  • склеивание js-файлов;
  • проверка JavaScript линтером;
  • минификация склеенных js-файлов;
  • запуск unit-тестов (qUnit);
  • отслеживание изменений исходных файлов и автоматический перезапуск вышеперечисленных задач.
Читать дальше →
Total votes 33: ↑30 and ↓3+27
Comments13

CSS анимации на реальном проекте

Reading time9 min
Views92K


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

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

В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать дальше →
Total votes 95: ↑87 and ↓8+79
Comments66

Используем паттерн Наблюдатель(Observer) для создания индикатора выполнения процесса на Javascript

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

пример внутри
Total votes 64: ↑51 and ↓13+38
Comments28

JavaScript паттерны… для чайников

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

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

Читать дальше →
Total votes 118: ↑108 and ↓10+98
Comments46

Application Cache API — новые возможности и проблемы

Reading time15 min
Views44K
Голая баба. ШуткаПостепенно концепция стандарта HTML5 становиться реальностью. Браузеры начинают поддерживать новые возможности, которых так не хватало. Но с новыми возможностями появляются и новые проблемы.
В данной статье рассматривается Application Cache API — совокупность функций, обеспечивающих продвинутое кэширование ресурсов web-приложения, и с помощью которых можно просматривать загруженные ранее сайты без подключения к сети Интернет. Особое внимание я уделил практическому использованию и проблемам Application Cache.
Читать дальше →
Total votes 22: ↑22 and ↓0+22
Comments23

Information

Rating
Does not participate
Location
Киевская обл., Украина
Date of birth
Registered
Activity