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

Алгортим сортировки “sleep sort”

Это потрясающе 🙂

Поделиться:

Что бы вы назвали “7-ю чудесами” из мира программирования

Мой свободный перевод ответа на вопрос What do you think are the “7 wonders” of the coding world? Ответ короткий, но настолько интересный, что не возможно не поделиться.

Прекрасный вопрос!

Семь чудес из мира программирования:

Виртуальная память. Без нее нам бы все так же приходилось бы думать о рациональном дизайне программного обеспечения.
ООП. Программирования больше не вызывает высокого ментального напряжения, переходящего в сумасшествие.
IDEs. Даже законченный идиот может писать программы с хорошим IDE. Многое объясняет кстати.
HTML5/ECMAscript. Для программистов это тоже самое, что и рэп для музыкантов. (Я рэпер! *примечание переводчика)
Scrum. Способ позволить менеджерам думать, что они конторлируют проект.
Stackoverflow. Без комментариев.
Кофейные напитки. Разве нужны пояснения?

Поделиться:

Магический метод для всех “get” обращений к объекту

Уф, ну и заголовок. Хотя звучит весьма весомо %) В чем суть – предположим у нас есть некий объект:

Что произайдет, если мы обратимся к несуществующему свойству этого объекта?

Ничего интересного – мы получим undefined. Ошибки не будет.

А что получится, если обратимся по цепочке несуществующих свойств?

А вот тут уже вылете ошибка “Cannot read property ‘exist’ of undefined”. Это стандартное поведение интерпритатора, думаю неожиданностей тут нет. Вопрос – как это можно обрабатывать?

Есть несколько вариантов. Можно проверять наличие свойства на каждом шагу:

Либо обернуть в try & catch

Это тоже давно известный подход. А есть ли еще способ? Стандартный ответ из мира ES5 – “нет, других вариантов нет”, можно конечно проверять наличие свойств через “.hasOwnProperty()”, но этот подход не ушел далеко от предыдущих примеров, поэтому им мы конечно заниматься не будем.

С приходом ES6 появился еще один интересный вариант, который и был реализован в библиотеке object-locator, которая позволяет тварить следующую магию:

Такой подход стал возможен с использованием нового конструктора Proxy(). Сама библиотека совсем маленькая и весь ее исходный код это только несколько строчек:

Proxy() позволяет “следить” за обращениями к свойствам объекта и переписывать их на лету. Разумеется такая магия возможна только нативными средствами, поэтому никакой babel не сможет переписать это в ES5. Печальный минус, но с другой стороны можно смелее смотреть в будущее.

Поделиться:

GitKraken – кроссплатформенный редактор для git’а

Я почти не пользуюсь GUI для работы с git’ом. Когда я только начинал программировть, то не было ничего интересного под linux, да меня в принципе сразу приучили к команддной строке, так что никакие интерфейсы не требовались. Потом появилась IDEA с ее интеграцией с гитом, и это мне отлично дополняло работу в командной строке.

Кстати, то что я постоянно работаю с гитом в командной строке видно по этому тегу – #git 😉

Однако, я все равно слежу за разными проектами, тем более если они пишутся на технологиях фронта. Так я наткнулся на GitKraken. Кроссплатформенный интерфейс для работы с гитом.

gitkraken

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

gitkraken-remote-branches

GitKraken написан на электроне и использует открытые библиотеки: NodeGit, libgit2. Именно это и позволяет ему достаточно просто поддерживать кросплатформенность.

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

Поделиться:

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

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

Поделиться: