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

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

Забавный сервис для генерных ответов на запросы – 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-я версия на дворе.
  • Мой подход в прошлый раз был так себе – стоит сделать все более “опрятно”.
  • Да и в принципе хорошо пробовать что-то новое, с чем не работаешь ежедневно.

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

Поделиться:

Давай обсудим в скайпе

Мне достаточно часто пишут с предложением пообщаться по скайпу. Причем ни толком темы, ни самих вопросов заранее никто не присылает. Максимум – это достаточно прозрачное направление вроде “Есть вопросы по reactjs” или “Вопросы по angularjs” или “Есть идея, давай в скайпе обсудим”.

skype

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

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

Поделиться:

Мои eslint настройки

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

screen-shot-2017-04-11-at-9-54-28

Мой eslint базируется на airbnb – так уж получилось, что именно airbnb являются самым популярным вариантом по индустрии и я решил не отходить от моды 😉 Однако, меня конечно не во всем устраивает их подход, поэтому я перекрываю некоторые их правила своими, особенно что касается разработки под реакт.

В общем рекомендую такой подход и всячески его поддерживаю. Мои настройки можно посмотреть вот здесь:

https://github.com/artemdemo/eslint-config-artem
https://github.com/artemdemo/eslint-config-artem-react

Ссылки по теме:
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
Выносим настройки eslint в отдельный репозиторий

Поделиться:

Debugging The Web (Chrome Dev Summit 2016)

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

Поделиться:

Chrome DevTools Masterclass

Пробежимся по основным моментам:

  • Открываем экспериментальные возможности инструментов разработчика в хроме.
  • Используем workspace для работы с исходным кодом прямо в хроме.
  • Используем Command Menu для быстрого доступа к всем командам (Command+Shift+P).
  • Network Panel – активируем Capture screenshots для записи скриншотов (иконка с камерой, на той же строчка, что и кнопка записи сетевой активности)
  • Расширенный фильтр загруженных ресурсов. Например, по размеру “larger-than:10K” (бес пробелов), либо негативный поиск по тому же условию “-larger-than:10K”; по статусу “status-code:500”
  • Добавление колонки в “Network Panel”, если хотим отображать какие-то кастомные headers.
  • Оптимизация анимации – Rendering -> Paint Flashing, для того чтобы определить приходится ли браузеру рендерить заново много элементов.
  • Для движущихся элементов, например, бокового меню стоит использовать css свойства transform: translateX(), translate3d() и т.п. вместе с will-change: transform. Это оптимизирует рендеринг, так как браузер выведет такие элементы в отдельный слой рендера.
  • Посмотреть сколько есть слоев и почему хром из разделил можно во вкладке Layers. Если ее сразу не видно, то нужно ее включить в DevTools Menu (три вертикальные точки) -> More Tools -> Layers
  • Удерживая различные клавиши (Shift, Command, Alt) можно увеличивать или уменьшать css шагами по 10, 100 и 0.1 единиц (Если не удерживать, то шаг будет равен единице).
  • Используем getEventListeners(element) в консоле для того, чтобы получить список обработчиков событий, которые висят на переданном элементе.
  • Глобальный поиск по всем файлам проекта во вкладке Search (вкладка в нижней части DevTools, там где открывается консоль)
  • Conditional breakpoint – кликаем правой клавишей мыши по номеру строки, на которую хотим добавить breakpoint, во всплывающем окне мы можем прописать условие, которое если возвращает true, то breakpoint срабатывает, если нет, то проходит дальше. Можно добавить тут команду console.log(variable) , для того чтобы отслеживать переменную в скопе и код не будет стопориться, так как console.log() всегда вернет undefined.
  • Чекбокс Async позволяет получать более детальный “стактрейс” после того как код остановился по брейкпойнту, особенно когда брейкпойнт находился внутри асинхронной функции
  • Snippets – библиотека блоков кода, которые можно быстро взять и внедрить в любую страницу. DevTools -> Sources -> Snippets.
    Удобство в том, что они хранятся в хроме и доступны по запросу.

Ссылки по теме:
Как открыть скрытые экспериментальные возможности в хроме (инструкция со скриншотами)
Umar Hansa – рассылка и курсы по DevTools
Addy Osmani
Paul Irish

Поделиться:

Peek – запись десктопа в gif на linux

Понадобилось записать небольшой фрагмент десктопа и приложить это в пул-реквесте. С видело не получится, потому что github и bitbucket откажутся загружать его на свои сервера. Значит только gif. Начал искать решение для линукса. В итоге наткнулся на весьма интересный проект – Peek. Официального релиза еще не было, но для моих задач все сработало отлично.

Peek - gif recorder for linux

Под убунту можно поставить через командную строку: https://github.com/phw/peek#ubuntu

Но я в итоге скачал установочный файл от OpenSUSE Tumbleweed. Там выбираем Ubuntu 16.04 -> Show unstable packages (на а что поделать, раз официального релиза еще не было). Скачиваем установочный пакет дебиана и ставим как обычно.

Поделиться: