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

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

Поделиться:

Сервер – болванка

Забавный сервис для генерных ответов на запросы – httpbin.org. Когда нет под рукой сервера, а нужно протестировать некий функционал на фронте. Сервис просто возвращает вам то, что вы ему послали. Все просто и удобно.

httpbin-org

Поделиться:

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

Разберем достаточно популярный сайт lifehack.ru. Сайт посещаемый, должен поддерживать достаточно большой поток посетителей и соответственно уделять внимание своей кодовой базе. Слишком много по поводу серверной части сказать не могу, однако, несколько советов найдется.

Поехали!

lifehack

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

CSS

Вместе с этим оформление css классов несколько непонятное. Кажется, что разработчики используют БЭМ, но в какой-то странной форме. Есть несколько нотаций: с двойным подчеркиванием, либо с двойным тире, на сайте же используются обе. То есть элементы могут объявляться так .top-menu--wrapper и в то же время вот так .fixed-menu__progress-bar.

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

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

90% стилей на странице не используется, однако присутствует в загружаемых css файлах. Я подозреваю, что часть из них может быть задействована на других страницах, однако, если на главной есть так много “холостых” стилей, то есть повод задуматься. Вполне возможно, что часть из них нужно выпилить

screen-shot-2017-04-15-at-16-20-26

Network

Выполняется достаточно много запросов к серверу. Причем среди них много запросов к разным частям css и js файлов. По-хорошему стоило бы их объединить. Особенно те, что на своем же сервере и лежат. Сейчас с lifehacker.ru загружается 16 css и 18 js файлов.

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

JS

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

all.min.js – основной файл со скриптами темы. Название вводит в заблуждение, файл не минифицирован, хотя конечно стоит это сделать.

Заглянем внутрь этого файла и постараемся разобраться в коде и сразу видим вот такую функцию:

return

Внезапно 🙂 Видимо никому ненужная функция на 30 строчек.

Достаточно часто в коде встречается вот такой анти-паттерн при работе с jQuery:

jquery-doc

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

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

Ссылки по теме:
https://ru.bem.info/
jQuery Anti-Patterns and Best Practices

Поделиться:

Webpack – коротенечко почему он так удобен

Отличная статья о том почему webpack так удобен. Только основные моменты, никакой воды – 7 пунктов – прочитал за чашкой кофе и пошел просветленный дальше.

https://github.com/petehunt/webpack-howto

webpack

Поделиться:

Новая разметка grid, цвет каретки, стиль декоративной линии, position sticky

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

Новая разметка grid

css-grid-example-01

В сентябре прошлого года я писал о том, что в браузеры собираются внедрять новую css разметку. Так вот она уже в хроме! Можно брать и пользоваться. Кстати, поддерживается всеми современными браузерами.

Сайт с примерами для легкого старта – gridbyexample.com.

Цвет каретки

Цвет каретки теперь можно задавать в css. Я даже и не ожидал, что кто-то об этом подумает. А вот как жизнь-то поворачивается. Поддержка в остальных браузерах конечно хромает, но не на обе ноги 😉

See the Pen caret-color by Artem Demo (@artemdemo) on CodePen.

Стиль декоративной линии

Линия text-decoration всегда зависела от цвета текста. С этим можно было только смириться и если нужно было как-то выходить из положения, от использовали альтернативные подходы. Однако, у нас теперь есть возможность задавать ее стиль напрямую! Поддержка, конечно, не во всех браузерах.

See the Pen text-decoration by Artem Demo (@artemdemo) on CodePen.

position:sticky

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

Что же это такое. Проще всего конечно показать – посмотрите пример ниже, просто проскрольте список, впечатлитесь, а потом посмотрите, что все это сделано без js. Да, Карл! Прилипающий заголовок при скролинге теперь можно делать без js! Просто автомагия какая-то…

See the Pen position: sticky by Artem Demo (@artemdemo) on CodePen.

Поддержка пока хромает, но мы бодро смотрим в будущее.

Ссылки по теме:
Chrome 57: Grid based layouts, Media Session API and more
Chrome 56: Web Bluetooth, CSS Position Sticky, and HTML5 By Default

Поделиться:

Переписываю angular 2 + wordpress rest api

Таки решился переписать приложение angular 2 + wordpress rest api. Причин тому несколько:

  • Ангулар подрос и уже не 2, а 4-я версия на дворе.
  • Мой подход в прошлый раз был так себе – стоит сделать все более “опрятно”.
  • Да и в принципе хорошо пробовать что-то новое, с чем не работаешь ежедневно.

И первое впечатление от ангулара – много библиотек нужно подключать для старта. Это проблема и раньше была, но я надеялся, что все устаканется, но нет, все так и осталось и никуда не денется. Ну а вообще, конечно, дух джавы прямо витает над каждой строчкой 🙂

Поделиться: