JavaScript *

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

D3 одна из наиболее популярных javascript-библиотек для создания динамических и интерактивных визуализаций данных. Сегодня ее используют сотни тысяч сайтов и web-приложений.

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

Однако, интеграция D3 в web-приложение, построенное на React, на практике оказывается не самой простой задачей.

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

18 мая 2018 в Digital October(Москва) пройдет DevConf — большая ежегодная конференция для веб-разработчиков, где обсуждают обо всем самом новом в мире программирования для веб. Программа определяется голосованием за доклады.


В секции BackEnd: будущее PHP, мышление агрегатами, сервис-ориентированная архитектура, немного про блокчейн, трудности переписывания проекта, tracing, profiling, etc.

В секции FrontEnd: React, GraphQL, Node.JS, WebRTC видеозвонки, телевизоры, тесты и разработчик PhantomJs.

В секции Storage: PostgreSQL, MySQL, ProxySQL, SphinxSearch, ClickHouse и немного(много) про сжатие данных.

WebRTC, технология голосовых и видеозвонков в браузерах (а еще realtime передачи произвольных данных, peer-to-peer пробивания NAT и захвата экрана) никогда не была простой. Долгая история, несовместимости между браузерами, запутанная документация, множество решаемых задач и используемых протоколов. Возможность позвонить и принять звонок из браузера всегда была одной из ключевых «фишек» нашей платформы Voximplant, и так как мы в этом неплохо разбираемся, то стараемся следить за интересными статьями и адаптировать их для аудитории Хабра. Под катом перевод свежей статьи от ребят из callstats.io — сервиса сбора статистики по качеству звонков для браузера. В небольшой статье они рассказывают о протоколе RTP с помощью которого, собственно, браузер и передает пакеты с голосом или видео.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Вопрос, стоит ли хранить javascript и css ресурсы веб-страницы в LocalStorage браузера или позволить ему самому отрабатывать кэширование, не имеет однозначного ответа. Есть плюсы и минусы. С моей точки зрения, основной плюс — скорость загрузки — перевешивает все остальное. Это очень хорошо чувствуют пользователи EDGE и 3G.

Для поклонников стандартного кэша браузеров, гордо показывающих на слово «Кэшировано» в Средствах разработчика, советую открыть Fiddler и увидеть, что по каждому кэшированному ресурсу за 304 HTTP ответом всё равно идет запрос. Затем советую зайти на что-нибудь типа pingdom.com и увидеть, что непосредственно передача данных во всем времени исполнения запроса занимает проценты. То есть толку в абсолютном значении от такого кэширования — кот наплакал, особенно если файлы небольшие.

С каждым годом происходит развитие технологий, используемых разработчиками front-end. И здесь речь идет не только о конкретных фреймворках и архитектурных паттернах для реализации клиентской логики в браузерах, но и о различных альтернативных инструментах, таких как, например, генераторы статических сайтов. Их основной целью является упрощение процесса создания статических сайтов. Безусловно они не являются универсальным инструментом, но в некоторых случаях они подходят как нельзя лучше:

• Прототип web-интерфейса
• Блог с редко обновляемым контентом
• Отдельная статическая часть другого web-приложения
• Сайт-визитка или landing-page
• Онлайн-документация

Многие знают Минко Гечева (rhyme.com) по книге «Switching to Angular» и по тексту «Angular Performance-Checklist», помогающему Angular-разработчикам оптимизировать свои проекты. На нашей декабрьской конференции HolyJS 2017 Moscow он тоже развивал тему Angular-производительности, выступив с докладом «Faster Angular applications». А теперь на основе этого выступления мы подготовили хабрапост, переведя все на русский. Добро пожаловать под кат! А если предпочитаете англоязычную видеозапись выступления, прилагаем и ее тоже:

Многие вставали перед выбором той или иной библиотеки для работы с формами в ReactJS. Когда я выбирал подходящую мне, разные библиотеки казались идеальными НО: форма на конфигах или колбеки в onSubmit эвенте, или асинхронный submit. Почему формы для реакта не соответствуют принципам реакта, почему они выглядят как что-то особенное? Если эти вопросы приходили вам в голову, или вы любите формы, приглашаю к прочтению статьи.

Наверняка вы часто замечали, сколько всякого мусора лежит внутри node modules. Это тесты, бенчмарки, ридми файлы, лицензии, тайпскрипт, и ещё безумное количество мусора, который можно более-менее безопасно удалить. Что мы собственно и сделаем в этом посте.
Картинку про вес node module я и так упоминал последние несколько публикаций, так что вот вам другая, которая в целом отражает текущую ситуацию. В качестве саундтрека к посту рекомендуется Little Big, “Life in da trash”.

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Типичный юзкейс для Kibana — смотрим логи, видим ошибки, создаем тикеты по ним. Логов у нас довольно много, места для их хранения мало. Поэтому просто вставить ссылку на документ из Elasticsearch/Kibana недостаточно, особенно для низкоприоритетных задач: пока доберемся до нее, индекс с логом может быть уже удален. Соответственно, приходится документ сохранять в файл и прикреплять к тикету.

Если один раз это делать, то это еще куда ни шло, но создавать уже десять тикетов подряд будет тупо лень, поэтому я решил это «быстренько» (ха-ха) автоматизировать.


Под катом: статья для пятницы, экспериментальная фича javascript, пара грязных хаков, небольшая регулярка с галочками, reverse proxy, проигрыш безопасности удобству, костыли и очевидная картинка из xkcd.

В данной публикации я покажу как с нуля настроить и запустить homebridge(реализация HomeKit Accessory Protocol на nodejs) на базе Raspberry Pi, Weinzierl KNX BAOS 838 module kBerry и bobaos.

Стандарт ES6 принёс в мир JavaScript-разработки новые синтаксические конструкции и замечательные возможности, которые, кроме прочего, улучшают читаемость текстов программ, позволяют сделать их лаконичнее и выразительнее. Всё это позволяет разработчику решать те же задачи, что и раньше, написав меньше кода. «Пишем меньше — делаем больше», — это идея, которая вдохновила автора материала, перевод которого мы сегодня публикуем, на исследование возможностей ES6. В частности, здесь он сравнивает ES5 и ES6 и рассматривает варианты практического использования новых конструкций.

Как реализовать в браузере игру, на которой годы назад залипал без всякого браузера? С какими сложностями столкнёшься в процессе, и как их можно решить? И, наконец, зачем вообще это делать?

В декабре на конференции HolyJS Александр Коротаев (Tinkoff.ru) рассказал, как он сделал браузерную версию «Героев». Ранее уже появилась видеозапись доклада, а теперь для Хабра мы сделали ещё и текстовую версию. Кому удобнее видео — запускайте ролик, а кому текст — читайте его под катом:

Недавно в офисе Авито прошёл четвёртый по счёту митап-сателлит Moscow.js — Moscow SPA, встреча для фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application). Прозвучали доклады от представителей Mail.ru, Альфа-Банка и Авито, а в конце встречи прошла панельная дискуссия о том, каким должно быть SPA сегодня. Под катом — видеозаписи и презентации докладов и ссылка на фотоотчёт.

В webpack 4.6.0. появилась поддержка директив prefetch и preload (они выглядят, соответственно, как «магические комментарии» webpackPrefetch и webpackPreload к командам import()). С их помощью браузеру можно давать подсказки о ресурсах, которые могут понадобиться пользователю в недалёком будущем. Браузер заблаговременно загружает такие ресурсы, что позволяет улучшить впечатление пользователя от работы с сайтом.



В материале, перевод которого мы сегодня публикуем, речь пойдёт о том, как пользоваться этими директивами для оптимизации производительности веб-сайтов.

В первой статье я рассказал о цели, сделал небольшое описание проекта. В данной публикации я расскажу о текущем положении дел и развитии проекта.

История не повторяется, история улучшается.

Цитата с пачки табака. Далее я показажу, что улучшилось за четыре месяца работы над проектом.

Сегодня состоялся одновременный релиз Node.js v10 (LTS) и NPM v6. Данное событие особенно важно, оно знаменует собой новую веху для всей платформы и превносит много значимых изменений и улучшений во всей кодовой базе Node.js. Появилась поддержка новых алгоритмов шифрования.