Рубрика «javascript» - 80

Возможности современного JavaScript, о которых вы могли не знать - 1

Несмотря на то, что в последние семь лет я пишу на JavaScript почти каждый рабочий день, должен признаться, что уделяю мало внимания сообщениям о нововведениях от ES. Главные возможности вроде async/await и прокси — это одно, но ещё каждый год идёт поток мелких поэтапных изменений, которые не попадают в моё поле зрения, поскольку всегда находится что-то более важное для изучения.

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

Сегодня мы поговорим о сборщиках проектов (о бандлерах), об инструментах, которые облегчают жизнь разработчиков. Суть работы бандлеров заключается в том, что они берут JavaScript-код, содержащийся во множестве файлов, и упаковывают его в один или несколько файлов, определённым образом упорядочивая и подготавливая к работе в браузерах. Более того, благодаря различным подключаемым модулям (плагинам) и загрузчикам, код можно минифицировать, можно упаковывать, помимо кода, и другие ресурсы (вроде CSS-файлов и изображений). Бандлеры позволяют использовать препроцессоры, умеют разделять код на фрагменты, загружающиеся тогда, когда в них возникнет необходимость. Но их возможности этим не ограничиваются. Фактически, речь идёт о том, что они помогают организовывать процесс разработки.

image

Существует множество бандлеров. Например — Browserify и webpack. Хотя эти сборщики проектов представляют собой замечательные инструменты, лично я обнаружил, что их сложно настраивать. С чего начать настройку? Этот вопрос особенно актуален для новичков, для тех, кого может немного испугать такое понятие, как «конфигурационный файл».

Именно поэтому я, как правило, пользуюсь сборщиком проектов Parcel. Я наткнулся на этот бандлер случайно, когда смотрел одно учебное видео на YouTube. Там давались советы по ускорению разработки. Показанная в этом видео рабочая среда была сильно завязана на Parcel. После этого я решил, что и мне стоит попробовать этот бандлер.
Читать полностью »

image

Чтобы по-настоящему понять колесо, нужно его самостоятельно переизобрести.

На днях я провел собеседование на должность senior javascript разработчика. Мой коллега, который также принимал участие в собеседовании, попросил кандидата написать функцию, которая будет выполнять HTTP-запрос, и повторять его несколько раз в случае сбоя.

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

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

Не повезло.

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

Но код, который он написал на доске, не имел никакого смысла. У него было только смутное понимание концепции Promise в JavaScript, и он не смог рассказать про него доходчиво.

Это может быть простительно, если вы начинающий разработчик, но если вы претендуете на руководящую должность, этого недостаточно. Как он отладит сложную цепочку Promise и затем объяснит другим, что он сделал?
Читать полностью »

Компилируем FFmpeg в WebAssembly (=ffmpeg.js): Часть 2 — Компиляция с Emscripten - 1

Список переведённых частей серии:

  1. Приготовления
  2. Компиляция с Emscripten (вы тут)
  3. Конвертация avi в mp4


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

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

В этой части мы разберём:

  1. Как настроить окружение для Emscripten в Docker
  2. Использование emconfigure и emmake 
  3. Как решать проблемы, возникающие при компиляции FFmpeg с Emscripten

Читать полностью »

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

Каскадная инвалидация кэша. Часть 2 - 1
Читать полностью »

У Радислава Гандапаса есть отличная книга Полная Ж. В ней говорится о том, как оценить направления своей жизни, и как разработать план развития.

Мне захотелось создать инструмент, который будет в моем смартфоне и поможет составить мой радар.

image

Читать полностью »

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №386 (21 — 27 октября 2019) - 1

Читать полностью »

На практике в 80-90% случаев веб-приложение тормозит из-за фронтенда: интервью с Иваном Акуловым - 1

Иван Акулов — Google Developer Expert в веб-технологиях и основатель перформанс-компании PerfPerfPerf. Уже совсем скоро на HolyJS 2019 Moscow он проведет воркшоп, посвященный, как ни странно, перформансу — поиску проблем в React, дебагу медленных приложений и другим рантайм-вещам. 

Чтобы больше погрузить читателей и посетителей HolyJS 2019 Moscow в тему, мы обсудили с Иваном:

  • Самые популярные проблемы перформанса;
  • Чем измерять производительность и в чем могут быть проблемы;
  • Как оптимизировать перформанс;
  • Поиск проблем с производительностью в React;
  • Пользу перехода на HTTP/2 и HTTP/3;
  • Паким фреймворком лучше пользоваться на новых проектах;
  • О пользе WebAssembly;
  • Где искать полезную информацию о перформансе;
  • О чем будет его воркшоп и кому на него будет интересно прийти (и зачем вообще ходить на воркшопы).

Вопросы задают Дмитрий Махнёв и Артём Кобзарь из программного комитета HolyJS.

Читать полностью »

image

Доброго времени суток, Хабровчане!

Хочу рассказать о том, как я недавно узнал о неких "хуках" в React. Появились они относительно недавно, в версии [16.8.0] от 6 февраля 2019 года (что по скоростям развития FrontEnd — уже очень давно)

Прочитав документацию я заострил свое внимание на хуке useReducer и сразу же задал себе вопрос: "Эта штука способна полностью заменить Redux!?" потратил несколько вечеров на эксперименты и теперь хочу поделиться результатами и своими выводами.

Читать полностью »

Вот уже несколько лет, как почти каждая статья о передовых подходах к кэшированию рекомендует пользоваться в продакшне следующими методиками:

  • Добавление в имена файлов информации о версии содержащихся в них данных (обычно — в виде хэша данных, находящихся в файлах).
  • Установка HTTP-заголовков Cache-Control: max-age и Expires, управляющих временем кэширования материалов (что позволяет исключить повторную валидацию соответствующих материалов для посетителей, возвращающихся на ресурс).

Каскадная инвалидация кэша. Часть 1 - 1

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

filename: '[name]-[contenthash].js'

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js