Сегодня не про задачки, а про трюки в JS. Пример, как можно сократить запись Math.ceil и Math.floor. Не то, чтобы это круто, но в чужом коде, особенно в NPM пакетах такое может встречаться. Чтобы это не вызывало вопросов и не было ощущения что тут какая-то магия(а тут нет никакой магии, просто нужно знать как работают операторы). Где-то такой код генерится “машиной”, всякими обфускаторами и минификаторами. А где-то люди сами пишут такой код.

https://medium.com/@frontman/math-ceil-math-floor-2697a224190

В Chrome 65 появилась возможность менять значения стилей в DevTools без с брасывания при перезагрузке. Называется фича Local Overrides

https://developers.google.com/web/updates/2018/01/devtools#overrides

Как написать бекенд не будучи бекенд разработчиком? Выход: serverless-архитектура.Что выбрать для serverless-архитектуры и что это?

Тут нам поможет Крис Койер и его ресурс со списокм сервисов и объяснением концепции — https://thepowerofserverless.info/

Начиная с июля 2018 года пользователи Chrome будут получать предупреждения о небезопасности посещения сайтов по протоколу HTTP.

Если вы еще не используете защищенное соединение HTTPS и HTTP/2, то советую научиться делать это сейчас. Умение работать с HTTPS и что такое HTTP/2 уже спрашивают даже на собеседованиях.

Как легко и без SMS получить и настроить HTTPS? Либо заюзать LE и сборку докер контейнера с автовыпиской сертификатов, либо вовсе все это отдать на откуп Cloudflare, который просто маленький Amazon для маленьких энтерпрайзов.

https://goo.gl/onade7

Сегодня пара слов про работу с массивами в JS. В целом работа с массивами (aka списками) в JavaScript — это большая тема. Данный пост навеян недавним собеседованием. Вопрос простой: Как получить значение последнего элемента массива?

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

const [last] = arr.slice(-1)

https://goo.gl/UZokp7

Небольшая заметка о том, как я сочетанием CSS свойтсв Zoom и Scale добился плавных контуров и пофиксил анимацию.

https://medium.com/@frontman/css-zoom-scale-2a07ffc1bcb4

Как сгенерить символьно числовой ID на JS не прибегая к библиотекам с md5 и тому подобное? На самом деле на JS легко генерятся простые несекурные ID, а так же легко сгенерить UUID. Как всегда 1 минута на прочтение магических рун: https://goo.gl/6QqrsL

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

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

https://vc.ru/33311-rynok-zarplat-frontend-razrabotchikov

Есть очень старая задачка: создать массив N размерности и заполнить его числами от 0 до N. Были времена, когда ее спрашивали на собеседованиях. Сейчас вряд ли кто-то всерьез будет спрашивать про нее на техническом интервью, но в жизни и быту она периодически встречается. Раньше для этих целей использовали сложную конструкцию вида:

let n = 10
const arr = Array.apply(null,{length:n}).map(Number.call, Number)

Отчасти эта задача и была интересна для собеседования своей “магией”. Если человек мог написать такую конструкцию и объяснить что тут просиходит — он точно знал как работает call, чем отличается от apply, что такое array-like объект, как устроен класс Array в JS и так далее. Сейчас это уже не обязательно, ведь у нас есть ES6+.

С приходом новых стандартов ES2016 и прчих задача стала скучна, а реализация стала более читаемая и идиоматична. Теперь эта же задача может быть решена таким образом:

const arr = [...Array(n)].map((_,i)=>i)

Спред оператор можно заменить на Array.from(), например и тому подобные:

const arr = Array.from(Array(n)).map((_,i)=>i)

В итоге задача сошла на нет и ее уже редко где встретишь на собеседовании. А были времена, когда меня такое спрашивали и были времена, когда я не мог ответить на этот вопрос 🙂

Если покопаться, можно найти еще разновидности, но они будут повторять эти базовые концепции. Просто будут другие методы и способы инициализации стартового экземпляра Array.

Небезызвестный Сергей Рубанов aka @chicoxyzzy мне напомнил, что Array.from принимает 2й необязательный аргумент. Так что педпоследний пример можно переписать так:

const arr = Array.from(Array(n), (_, i) => i)

или так

const arr = Array.from({ length: n }, (_, i) => i)

Во 1х - все таки довел выпуск до финала. Во 2х, теперь есть возможность выпуск слушать не только в SC, на сайте и айтюнс, но и в телеге, прямо тут

Слушать на сайте и в SC: https://radiojs.ru/2018/02/radiojs-51/

Слушать в телеге:
https://news.1rj.ru/str/itradiostream

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

const arr = [...Array(n).keys()]

Вообще подумал, что стоит разобрать челлендж, так как там очень интересные задачи и есть очень сложные. Чего стоит random4. Кстати про рандом - это отдельная тема, которую хочется так же разобрать и обсудить. Но обо всем по порядку…

Кстати, если кто-то не знал, предлагаю порешать https://alf.nu/ReturnTrue
Мой ник MAY✪R. В квесте от меня запушено 4 задачи =)

Очень крутая реализация мимишной формы авторизации. Фишка вся в анимированном аватаре, который следит за действиями. Это шедевр. Сразу захотелось разобраться как это делается и научиться делать похожие

https://codepen.io/dsenneff/pen/QajVxO?editors=1010

Если вас интересует возможность построения универсальной архитектуры, которая будет в себе позволять использовать любой фреймворк, для начала стоит ознакомиться с тем, что другие уже успели сделать в этом направлении. Подборка статей на тему Микросервисной архитектуры на клиенте https://goo.gl/JTC9Te