Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Deck.gl – визуализация данных

Uber выпустил в “опен соурс” библиотеку для визуализации данных – deck.gl. Построена на канвасе и может выводить на самом деле большие куски данных. Отвлекусь и скажу, что большие датасеты в том же d3 сложно выводить, потому что в итоге это будет svg и если все это еще нужно анимировать, то это достаточно проблематично. Хотя у d3 есть и свои преимущества.

Deck.gl – позволяет добиваться очень интересных растровых визульных эффектов. Смотрится очень эффектно. Так что конечно имеет смысл смотреть и пробовать. Честно говоря, я даже и не подозревал, что Uber уделяет столько времени визуализации данных.

deck-gl

Поделиться:

node js и проблемы с dns

Не так давно столкнулся с достаточно странной проблемой с node.js. В нашем проекте сервер строится из сервисов и все это дело держится на кубернетисе. Сервисы на бэке пишутся на скале, а прослойкой между беком и фронтом решается через node.js. Веселая такая конструкция вобщем.

Ничего не предвещало затыков и тут на одной из новых машин мы не смогли вывести запросы к внешним сервисам. Машина на Ubuntu, собирались на ней разрабатывать, а тут к серверам не достучаться. Начали копать, выходит что с браузера да запрос уходит куда надо, а вот из node.js нет. Проблема точно в DNS, потому что и ошибка соответствующая – getaddrinfo ENOTFOUND, да и других вариантов как-то нет, все же на кубернетисе и к нему через openvpn стучимся.

Но вот куда пилить дальше непонятно, вроде уже все осмотрели. На стаковефлов нашелся совет:

Changing the priority of dns at /etc/nsswitch.conf it works:
hosts: dns files

Понятное дело, что в моем файле Name Service Switch (/etc/nsswitch.conf) строчка выглядела иначе, но похоже:

Поправили вот на это:

В итоге все заработало. Алилуйя!

Кто-нибудь сталкивался с подобным?
Зачем так было прописано?

Поделиться:

slate – настраиваемый текстовый редактор

Уже не первый раз вижу текстовый редактор slate в трендинге на гитхабе. Ребята видно что ценят и довольны. Выглядит неплохо. Никто не пробовал?

slate

Поделиться:

Frontend аудит сайта – drom.ru

Сайт drom.ru очень быстрый, прямо радует с какой скоростью он загружается. Поэтому вопросу о нагруженности сети нету. Соответственно любая оптимизация в этом направлении (минификация, собирание файлов в один и т.п.) не даст сколько-нибудь ощутимого результата. Вместе с тем, если сайт планирует расширять функционал, особенно на фронте, то имеет смысла задуматься о качестве кода, об этом и поговорим.

drom

CSS

По стилям есть вопросы только с именованием. Все сделано по БЭМ’у, но встречаются вот такие моменты b-media-cont b-media-cont_margin_huge. Тут не понятно почему есть модификатор на модификаторе “_margin_huge”. Или второе подчеркивание уже не признак модификатора, а просто разделение? Может и так, но сложно читается.

Я не нашел каскадов – это очень правильно.

 

JS

Сразу обращаем внимание на первую строчку в js файлах:

drom-use-strict

Кажется, что такого в строчке "use strict"; – все же по феншую. Но не совсем, дело в том что объявление этой директивы в глобальном скопе в потенциале может быть проблемным. Так как при таком подходе браузер будет от всех библиотек на странице этого стандарта, а они могут не соответствовать. В общем подход хороший, но чреватый.

Распространенный подход при работе с jQuery – хранить состояние приложения и данные в DOM’е. В данном случае, есть функция, которая собирает данные из html элемента.

drom-data-in-tags

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

Кстати, обратите внимание на то, что глобальная функция parseInt используется со вторым параметром, в данном случае это “10”. Ребята определенно используют eslint для проверки кода, что очень хорошо. Собственно то, что используется проверка стилей кода понятно и по первым строкам файла, но parseInt с двумя параметрами это такой явный почерк 😉

В коде очень не хватает шаблонизатора, часто встречаются вот такие куски:

drom-template

Такой код сложно редактировать и править. Его сложно переносить в другую часть приложения и он просто выглядит оторванно от своего окружения: js, js, js и тут бах и html, потом снова js пошел. Вместе с этим сайт подгружает шаблонизатор jinja, но где он используется не понятно.

Плюс настораживает вот этот момент:

drom-template-br

Два переноса строки? Для того чтобы появилось место ниже? Хорошо бы это решить через css.

Заключение

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

  • Следите за тем как вы объявляете "use strict";, потому что вы не знаете с какими проблема столкнетесь подключая сторонний код.
  • Используйте файловые менеджеры – webpack или хотя бы browserify.
  • Минифицируйте код и распределяйте его загрузку по задачам.
  • Используйте фреймворки для стройной архитектуры приложения.
  • Пора начинать использовать ES6 😉
Поделиться:

Тестируем скорость выборки css селекторов

Каждый раз как говорю о том, что нужно оптимизировать css селекторы, не использовать каскады, то слышу в ответ – “так и так быстро работает, тем более на небольшом количестве элементов”. И тут сложно не согласиться – действительно быстро, если немного элементов, более того вы скорее всего и не сталкивались толком с проблемами медлительности из-за кривых стилей.

Ребята, но это же не значит, что можно на это забить 🙂 Проблемы со стилями не приходят внезапно – они накапливаются и нужно заботиться об оптимизации всегда. Разумеется я не призываю делать измерять какой цикл работает быстрее for или while, это, наверное, через чур, но css же у вас будет до фиг. Потом вам его не исправить, проще будет выкинуть и написать заново.

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

Я не сомневаюсь, что каждый поступит так как сам считает нужным, мы же все красавчики 😉

В конце покажу вам разницу во времени выборки. Тестировать будем 3 каскадных селектора:

  • div.box:not(:empty):last-of-type .box__title
  • .box_last > .box__content > .box__title
  • .box:nth-last-child(-n+1) .box__title

За выводами прошу вот сюда (откройте консольку для результатов): Тест выборки селекторов

css-cascade-test

Поделиться:

e2e тесты – чем пользуетесь?

Постоянно слежу за тем, какие решения для end-to-end (e2e) тестирования появляются на рынке. Пока не на чем конкретно не остановился, но интересные решения записываю. Вот сейчас читал статью E2E Testing React applications with TestCafe. Автор рассказывает о применении автоматическом тестировании с использованием TestCafe

e2e-testcafe

Кто-нибудь использует? Как впечатления?

Поделиться:

Как установить docker на Ubuntu 17.04

Новая версия убунту вышла пару дней назад и я решил таки поставить на нее докер. Да, да, версия не четная, поставил, потому что люблю жить на краю пропости. И мне лень ждать пока выйдет обновленный под нее докер. Поэтому немножко танцев с бубнами на обеспечены.

docker-container

Внимание! Еще раз – это описание того, как ставить докер на Ubuntu 17.04, когда сам докер еще официально не поддерживает эту версию. Так что если хотите поэкспериментировать, то велкам, поехали.

Для начала официальная инструкция по установки докеру находится вот тут. Очень рекомендую ознакомиться. Она рабочая, даже в применении к новой версии Ubuntu. За исключение того как обращаться к репозиторию.

Это значит, что вы смело идете по всем пунктам до момента когда нужно определить url репозитория. Дело в том, что вот эта строчка:

подставит имя вашей операционки (для Ubuntu 17.04 это “zesty”) и docker скачиваться не будет.

Для того чтобы это обойти нужно использовать имя предыдущей версии – “xenial”, то есть полная команда будет следующей:

Все, после этого продолжаем установку как написано в инструкции.

Поделиться:

Slack перевел свое приложение на TypeScript

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

Slack свое десктопное приложение написал на js и запаковал с использованием электрона. Очень интересное для меня решение, плюс крайне правильное – сразу решили все проблемы кроссплатформенности. Понятное дело, что при таком подходе код должен писаться на js, ну куда они иначе денутся-то 🙂

Однако, внезапно выяснилось, что они решили перевести всю кодовую базу приложения на TypeScript. Причины очевидны и о них все говорят, кто принял подобное решение – ловля ошибок на стадии написания кода, а не в продакшене. Этому конечно способствует строгое типирование.

slack-ts

У этого подхода есть минусы, которые меня и настораживает в TypeScript’е:

  • Сильно разрастается кодовая база. Строгое типирование и интерфейсы нужно описывать, все это занимает место.
  • Подход TypeScript’а отличается от обычного js – а это значит, что нужны программисты, которые бы в этом разбирались, иначе же треш получится. Соотвественно:
    • Существующие программисты должны перейти на новую парадигму и не писать говнокода, потому что они думают в старых рамках.
    • Нанимать новых, сложнее потому что нужно чтобы они либо знали ts, либо были готовы на него перейти, потому что это не одно и тоже что писать на чисто js

Как результат я пока TypeScript за рамки своих проектов не вывел.

А вы пользуетесь им в продакшене? И если да, то как впечатления?

Поделиться:

Frontend аудит сайта – vc.ru

Для начала небольшой дисклаймер – в таких обзорах передо мной не стоит целью рассказать о недостатках сайта. На самом деле я искренне придерживаюсь идеи: “Если это работает, то это не уродливо”. Вместе с тем, мне всегда интересно посмотреть на код других команд, подумать над тем как я бы подошел к решению подобных задач и заодно дать пример читателям.

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

vc-ru

CSS

CSS сделан по БЭМ, вопросов к этому почти нет. Встречается некое смешение стилей, но не сильное и придираться сильно не хочется. Все сделано хорошо, каскадов почти нет. Единственный момент – имеет смысл объединить все файлы стилей, который загружаются с vc.ru, нет никакого преимущества в том, что они грузятся по отдельности.

Network

Не использует gzip на стороне сервера. Имеет смысл включить – меньше файлы будут для отправки на сторону клиента:

vc-gzip

JS

Сайт использует два основный файла для js:

  • app.top.min.js
  • app.bottom.min.js

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

В данном случае такой подход облегчает рендер страницы и пользователь видит данные раньше. Сценарий получается следующий:

1. Загружается app.top.min.js, на это уходит чуть меньше секунды (800-900 мс), его эвалюация занимает всего 30 мс. Рендер потом не нагружается, поэтому почти сразу виден контент.

2. Пользователь уже видит содержимое страницы, но интерактивные элементы еще не готовы (прошло 2,5 секунды после запросы).

3. Через 3,5 секунды закончен рендер основного html и браузер начинает загружать app.bottom.min.js, на это тоже уходит меньше секунды.

4. Теперь начинается “тяжелая работа”. Эвалюация app.bottom.min.js занимает уже 1080 мс, поскольку в этом файлы самые “весомые” скрипты приложения.

Теперь достаточно очевидно зачем разделять js на две части – пользователь раньше видит контент. Это основная цель любого сайта – вывести контент как можно раньше.

Давайте посмотрим на сам код.

Антипаттерн jQuery обертки. Классический случай – зачем столько раз обертывать
$(this)
, лучше сделать один раз и сохранить в переменную:

vc-jquery-antipattern

Вместо этого стоит сделать вот так var $this = $(this);, а потом уже исользовать $this. А еще лучше вот так:

Обратите внимания, что js по сути получает состояние из html и в нем же потом его будет хранить. При изменении идет отправка данных на сервер:

vcru-post

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

Более правильным было бы хранить состояние в некой модели и изменять html в зависимости от изменений самой модели. Такой подход поддерживается всеми фреймворками: backbone, angular, react (в сцепке с flux, redux или чем-то подобным), и т.п. Конечно можно и самому написать, было бы желание.

Поделиться:

Бесплатный курс – Browser Rendering Optimization

Простой и доступный курс от udacity – Browser Rendering Optimization.

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

browser-rendering-optimization

Поделиться: