• Начните использовать ES6 и SASS в браузерах сегодня by Ast

    javascript

    Браузеры всегда были очень инертной средой для исполнения наших программ. Даже когда язык JavaScript ещё не развивался так быстро как сейчас, браузеры уже не успевали за ним. Годами на троне сидел какой-нибудь хтонический монстр вроде IE6 и заставлял с ним считаться каждого. Нам пришлось на долгое время забыть об использовании чистых языковых конструкций и научиться доверять очередной библиотеке, знающей разницу между браузерами и их версиями. Появились армии разработчиков, неплохо знающих jQuery, но как огня боящихся самого языка JavaScript. В то же время, дела со стилями в чем-то были еще хуже. Несмотря на появление множества новых свойств, сам формат не получил вообще никаких значимых улучшений и, в сыром виде, даже сейчас едва ли может быть удобен кому-либо.

    Конечно, со временем, ситуация начала исправляться: поддержка JavaScript стала лучше, появились полифиллы для устаревших браузеров, компиляторы CSS и, наконец, транспайлеры в ES6. Но, к сожалению, это всё не доступно из коробки каждому, это удовольствие нужно настраивать разработчику и не всем из нас ясно как же это сделать. На первый взгляд всё кажется намного сложнее, чем дела обстоят на самом деле. Кажется, что если у вас нет специального сервера для сборки, CI, CD, какого-нибудь хитрого сборщика, то не стоит и пытаться что-то сделать. Но, на самом деле, это и не требуется.

    Read more
  • Just saying «Hello» and chilling around by Ast

    I have never been really good at writing. I won some rewards in my childhood. I wrote some shitty verses in my youth. None of those achievements really were significant for the universe around me. It was all like a silly child play with the symbols I barely know. Move one back and another forward, make a stanza, make another one, make them a little bit more shiny. I experienced that well-known fear of a blank page. And I experienced that recursive «oh, I can do this paragraph better» annoying thing too. But I love writing, I really do. I have dreamt about writing a book all my life long just like my grandfather had dreamt before me. That’s why I have decided to write my thoughts in English: to master my slack skills with practice that makes me happy.

    We are what we do and what we think about. The oceans of information we swim in are unstable in our epoch. Their coast and bottom are changing their shapes every second with new memes rising and fighting each other to the bloody death. The key point is that those ideas are battling mostly in English. Native speakers are lucky in some way: they don’t need to do anything to be in the middle of that storm and to see every glimpse of new fancy ideas worth knowing about.

    Not that I say that other languages are not good. They are wonderful, all of them. But they act in this battle as smidge waves in the far away bays. And what I am interested in as a contemporary engineer and transhumanist is this battle itself. I want to be in the vanguard of this mess crushing metaphoric skulls with my own great axe of knowledge and will.

    And then again I asked myself a question: «Do I really want to battle ooze and slime in memetic swamps of my native language? Do I really want to waste my life for that dolorous purpose?»

    So here I am now.

  • Как я перестал бояться и полюбил конфиг by Ast

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

    Лишь совсем простые приложения могут обойтись без файла конфигурации. У остальных всегда найдется, что хранить в конфиге: настройки окружения, настройки логики, часто меняющиеся фрагменты текста, etc. Словом, вопроса «что хранить в конфигурации» обычно не возникает: кандидатов достаточно. А вот вопрос «как хранить конфигурацию» возникает часто и еще чаще решается не самыми оптимальными способами. В этой статье я хотел бы рассмотреть варианты хранения конфигурации приложения, их плюсы и минусы.

    Read more
  • Бесплатный сертификат от Letsencrypt by Ast

    Зачем это?

    У защищенного соединения есть множество преимуществ перед старым добрым http: защита от перехвата траффика, защита от подмены содержимого, лучшее ранжирование в поисковых системах и т.д. Мне вот, например, нравится зеленый значок в адресной строке. Раньше за всё это удовольствие нужно было платить, поэтому сертификаты можно было увидеть только на крупных проектах, либо платежных системах (где риск компрометации данных велик и без сертификата вас просто не поймут). Проект letsencrypt.org призван изменить это положение вещей раз и навсегда.

    Read more
  • Latest docker for Ubuntu LTS by Ast

    For Ubuntu 14.04 LTS

    Latest docker version (automatic update)

    apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
    echo "deb https://apt.dockerproject.org/repo ubuntu-trusty main" >> /etc/apt/sources.list.d/docker.list
    apt-get update
    apt-get purge lxc-docker*
    apt-get install docker-engine
    

    And result will be like this:

    docker -v
    Docker version 1.9.0, build 76d6bc9
    

    Latest docker-compose version

    curl -L https://github.com/docker/compose/releases/download/1.5.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
    chmod +x /usr/local/bin/docker-compose
    
  • Валидация форм на React JS by Ast

    Нам нужны формы. Больше форм.

    Любой разработчик знает это. Каким бы хитрым фреймоворком вы ни пользовались, какие бы неожиданные идеи ни привносила в процесс разработки ваша очередная революционная концепция, как бы ни был устроен поток данных приложения, вам никуда не уйти от форм. Как только ваше приложение требует ввода более-менее сложных данных, старое доброе решение остается самым простым и эффективным, самым понятным пользователю и простым в реализации. И в React Js та же самая, старая как мир история — нам снова нужны формы.

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

    Но не в этом случае. Если назначить props уже после создания элемента (чего делать не стоит — это, к слову, warning), они не сохранятся после пересоздания компонента, когда React решит еще раз запустить render(). Так что жесткая связь лишает главного преимущества React — реактивных view. Правильным решением было бы использовать события — они позволяют общаться элементам, не связывая их напрямую друг с другом. Всё, что для этого нужно — общая шина. Предлагаю своё решение, вы можете сразу посмотреть демо.

    Read more
  • Как показать себя и свои наработки by Ast

    grok

    За что мы боремся?

    В жизни разработчика регулярно возникает необходимость показать результаты работы кому-либо еще — коллеге, заказчику, тестировщику. Всё довольно просто, если вы сидите в одной комнате или, хотя бы, здании: можно пригласить его к своему столу (скорее всего придется пообещать кофе или печеньки) и показать лично на собственном мониторе. Всё сложнее, если вы находитесь в разных районах, городах или даже странах. А иногда вам может пригодиться доступный из интернета API, развернутый локально — например, если вы разрабатываете или тестируете мобильные приложения.

    Read more
  • Модальное окно на React JS by Ast

    bycycle

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

    И хотя в арсенале любого фронтенд-разработчика есть простая как топор функция confirm(), будем честны: она страшна как смертный грех, по-разному выглядит в разных браузерах и запросто может разрушить весь эффект от вашего крутого дизайна. Выход один — использовать собственное модальное окно. Всё крайне просто, если вы используете какой-нибудь jQuery и императивно командуете DOM-элементом, в котором оно описано, тем более что и готовых решений существует множество. А вот если вы используете React JS с его парадигмой реактивного программирования, решение может быть достаточно хитрым из-за особенностей связи между родительскими и дочерними компонентами.

    Read more
  • Docker ambassador pattern by Ast

    Ambassador

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

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

    Read more
  • Миграция медиабиблиотеки Wordpress в S3 by Ast

    В жизни каждого разработчика есть такие задачи, которыми невозможно гордиться, а упоминать их немного стыдно — потому что всё, абсолютно всё, связанное с такими задачами плохо. Поговорим, например, о Wordpress: он хранит данные в сериализованных массивах в базе данных, не умеет в миграции данных, нарушает все мыслимые и немыслимые, гласные и негласные правила написания хорошего кода... Но зато используется в продакшене, приносит бизнесу деньги, а значит — должен поддерживаться, развиваться... а, ну еще вам может понадобиться перенести всю медиа-библиотеку на S3 (на самом деле, это может быть любой CDN).

    Примерный план действий такой:

    1. Установить плагин для работы с S3
    2. Найти все изображения
    3. Залить их на S3
    4. Изменить пути до изображений в постах
    5. По возможности сохранить рассудок

    Чтобы было веселее — все эти действия должны произойти в автоматическом режиме, без нажимания кнопочек в админке, изменения конфигов, т.к. установка предполагается в AWS Elastic Beanstalk. И лучше не спрашивайте меня почему.

    Read more