Обновить
137.2

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

JavaScript: как из Fetch сделать Axios?

Время на прочтение20 мин
Охват и читатели17K


Привет, друзья!


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


С чего все началось?


Прочитал статью Kent C. Dodds "Replace axios with a simple custom fetch wrapper", изучил несколько аналогичных утилит других разработчиков и решил, что могу сделать лучше. О том, насколько мне это удалось, судите сами.


Ссылки


Исходный код проекта находится здесь.


Обертка в виде npm-пакета — very-simple-fetch (хотел назвать пакет просто simple-fetch, но это название оказалось занято).


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


Что насчет Axios?


Наша обертка будет сильно похожа на axios. Это объясняется тем, что axios — лучший из известных мне инструментов для отправки HTTP-запросов. Он одинаково хорошо работает как в браузере, так и в Node.js. Безусловно, разработчики axios проделали большую работу. Однако в большинстве случаев нам для решения повседневных задач, связанных с разработкой веб-приложений, не требуется весь функционал, предоставляемый этим инструментом. Если в цифрах, то размер axios составляет 371 Кб, а размер very-simple-fetch — 9.33 Кб.

Читать дальше →

Использование типов TypeScript вместо Swagger

Время на прочтение11 мин
Охват и читатели4.4K

Сегодня я расскажу о том, как мы можем с помощью типов написать простое расширение для ExpressJS.

А если вы в своём приложении/приложениях используете только решения на TypeScript(JavaScript), то у вас отпадёт необходимость в Swagger.

Вообще, одно из главных преимуществ разработки серверного кода на NodeJS — это один язык программирования с Web-интерфейсом/React/Vue-Native. Это даёт возможность написать общий код в одном месте только один раз и использовать его затем везде.

Именно это мы сейчас с вами и попытаемся сделать.

Читать далее

Как собрать свой Lighthouse

Время на прочтение11 мин
Охват и читатели8.9K

Чем интенсивнее наш feature delivering, тем быстрее падает производительность. И, конечно, приходит время автоматизировать процесс слежения, чтобы просадка не дошла до прода или даже staging-окружения.

Про прод-мониторинг, оптимизацию и ручной анализ производительности легко узнать на web.dev. Но по автоматизации слежения за производительностью до того, как фичи покатятся в прод, информации не так уж много. Сегодня расскажу, как для профилирования собрать практически свой Lighthouse, чтобы проводить performance-тесты и успешно бороться с просадкой в работе команды фронтендеров.

Читать далее

Пришло время избавиться от Angular и сэкономить миллиарды долларов

Время на прочтение6 мин
Охват и читатели60K
Я знаю, что эта статья вызовет поток гневных комментариев, но… так тому и быть. Кто-то должен наконец озвучить то, о чём уже некоторое время размышляют программисты, обладающие некоторым опытом.

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



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

Каждый день мне на почту приходят вакансии. Компании всех размеров и мастей рыщут в поисках ОПЫТНЫХ Angular 4, 5, 6, 7, 8, 10, 12-разработчиков, которые как минимум 5 лет занимались разработкой и поддержкой того дурдома, который все называют «современнейшими пользовательскими интерфейсами».

Это — не нечто «современнейшее». Это — дурдом.

Несколько лет назад я был на собеседовании в EA (Electronic Arts). Там мне сказали, что компания избавляется от всех своих UI-фреймворков и возвращается к написанию кода на чистом JavaScript (речь идёт о модулях, или о том, что тот, кто работает с jQuery, назвал бы JS-плагинами). Я был удивлён и заинтригован.

Теперь о причинах подобного хода знают не только в EA, но и во всех остальных компаниях.
Читать дальше →

Как сделать магический шар на Three.js

Время на прочтение9 мин
Охват и читатели9.5K

Конечно же, после смерти Flash веб не превратился в простую, скучную плоскость. К старту курса по фронтенду показываем, как при помощи Three.js и технологии WebGL создать магический шар с анимацией внутри объёма. Автор статьи не только опубликовал код на CodePen для удобной демонстрации, но и добавил на страницу ползунки, чтобы вы могли экспериментировать с шаром и сразу видеть результат. В конце вы найдёте ссылку на исходный код на Github и демонстрацию не на CodePen.

Читать далее

NEST-NEXT: Best Practices — Часть 2

Время на прочтение16 мин
Охват и читатели9.8K

Это вторая часть статьи о применении комбинации технологий nest.js и NEXT.js. В первой части был создан и настроен проект, а также выбран способ отправки данных для SSR, в результате чего проект уже удовлетворял большинство потребностей при разработке простого сайта. В этой части можно узнать о том, как выжать максимум пользы из nest-next: Hot Module Replacement, CDN, удобный SSR и разворачивание "за слешом".

Читать далее

О ходе создания игры «Колобок» в июле

Время на прочтение2 мин
Охват и читатели2.1K

В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Время на прочтение17 мин
Охват и читатели73K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


Читать дальше →

Будущее Web это HTML через WebSockets

Время на прочтение12 мин
Охват и читатели14K

Будущее веб архитектуры  программного обеспечения уже обретает формы и на этот раз server-side рендеринг (опять). Но есть кое-что новое,  а именно передача HTML по WebSocket.

Подход с использованием SPA(Single Page Appllication) и JSON API привел к тому, что многие команды разработки погрязли в бесконечных спорах о структуре данных и ошибках синхронизации между этими двумя слоями. Это увеличивает стоимость разработки, замедляет релизный цикл и сокращает время, которое можно было бы потратить на инновации.

Читать далее

Как называть функции во фронтенде

Время на прочтение2 мин
Охват и читатели7.5K

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Читать далее

Как сэкономить годы разработки при правильном направлении зависимостей

Время на прочтение5 мин
Охват и читатели6.6K

Привет Хабр!

В данной статье я планирую развить тему важности умения "Программировать на уровне интерфейсов", а именно обсудить направление зависимостей. Это достаточно важная тема, так как только осознавая направленность зависимостей, можно спроектировать действительно гибкое и масштабируемое приложение (Данная статья является расшифровкой видео).

Читать далее

NFC приходит в web

Время на прочтение5 мин
Охват и читатели23K

Это должно было быть примерно в 2012 году, когда Google выпустил первые телефоны с поддержкой NFC (Google Nexus S) вместе с обновлением для Android, которое позволило разработчикам использовать API NFC. Я хорошо помню, что заплатил несколько евро за несколько тегов NFC, чтобы попробовать (сегодня эти теги стоят очень дёшево). Хотя я был очень убежден, и команда CX Labs анонсировала множество прототипов, таких как покупки с помощью NFC, Apple потребовалось много лет, чтобы внедрить NFC и, наконец, открыть API для своих разработчиков. О NFC почти забыли... Но сейчас 2021 год, и большинство телефонов имеют встроенное оборудование NFC. Основной вариант использования - платежи, эмуляция карты NFC - один из трех режимов работы NFC, и большинство из нас ежедневно используют Apple или Google Pay.

Это означает, что функция NFC широко доступна для разработчиков, но, честно говоря, она не очень часто используется, кроме как через платежные приложения, поддерживаемые Google/Apple. Но только в мае 2021 года вышел Chrome для Android 91, который теперь поддерживает веб-NFC - любой веб-разработчик может экспериментировать и использовать NFC на простых HTML-страницах. Хотя Safari от Apple и другие браузеры снова опаздывают в игру, это может снова ознаменовать момент для нового прорыва в технологии NFC. Web NFC снижает барьер для разработчиков и, что более важно, функциональность NFC теперь может быть частью Интернета: никаких установок.

Читать далее

Адаптируем старую библиотеку UI компонентов для работы с TypeScript кодом

Время на прочтение10 мин
Охват и читатели5.2K

Многие NPM библиотеки написаны на JavaScript. Что же с этим делать во время миграции на TypeScript? Нам потребовалось написать объявления типов для нашей библиотеки UI компонентов. Мы хотели получить инструмент, который мог бы служить дополнительной документацией. Мы также хотели собрать в одном месте всё, что можно использовать при вызове того или иного метода нашего JS пакета. Расскажу, какие шаги мы выполнили и что получили в результате.

Читать далее

Ближайшие события

Обезболиваем RegEx

Время на прочтение5 мин
Охват и читатели12K

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

Можно ли вообще не использовать регулярные выражения? А в каких случаях нельзя? Что делать, если использовать все-таки приходится? Предлагаю разобраться с этим. Определим ситуации, когда регулярные выражения можно не использовать, когда нужно использовать и как сделать так, чтобы не было мучительно больно к ним возвращаться.

Читать далее

NEST-NEXT: Best Practices — Часть 1

Время на прочтение13 мин
Охват и читатели35K

Это первая часть статьи о применении комбинации технологий nest.js и NEXT.js, где будет рассмотрено создание проекта, подключение фреймворков и выбор эффективного способа работы с SSR. Во второй части можно узнать о HMR, использовании данных при SSR и разворачивании "за слешом".

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №479 (26 — 31 июля 2021)

Время на прочтение2 мин
Охват и читатели7.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Как создать 3d игру прямо в браузере

Время на прочтение7 мин
Охват и читатели12K

Ссылка на обучающее видео

Привет всем. Сегодня я вам расскажу как легко вы можете создать 3d игру прямо в вашем браузере и сделать вы сможете это очень быстро, примерно за минут 30.

Узнать как

IntelliJ IDEA 2021.2

Время на прочтение9 мин
Охват и читатели16K

Привет, Хабр!

Вышел наш летний релиз — IntelliJ IDEA 2021.2! Обновление можно скачать с нашего сайта или в Toolbox App. Кроме того, можно обновиться из самой IDE или с помощью snap-пакета, если вы являетесь пользователем Ubuntu.

Читать далее

@teqfw/vue

Время на прочтение11 мин
Охват и читатели3.8K

Комментарии коллег к моей последней статье "Почему я 'мучаюсь' с JS" навели меня на мысль, что публикации, касающиеся Tequila Framework, нужно помещать в хаб "Ненормальное программирование".


Почему-то идеи:


  • создание больших web-приложений на "ванильном" JS;
  • отказ от упаковщиков и транспиляторов;
  • логическое пространство имён для прямого доступа к es6-модулям зависимостей, вместо импорта-экспорта на уровне npm-пакетов;
  • автозагрузчик кода и инъекция зависимостей, использующие пространство имен;
  • es6-модули, работающие без изменений одинаково как в браузере, так на стороне nodejs и в тестах;
  • отладка в браузере точно того же кода как тот, что создаётся в редакторе;

вот это всё относится к разряду "ненормального" в современной web-разработке.


В этой публикации — пример построения "нормального" PWA-приложения с использованием "нормальных" Vue 3 и Quasar UI на базе "ненормальной" платформы Tequila Framework.


Читать дальше →

Как искать и выбирать npm-пакеты? Шпаргалка для начинающих

Время на прочтение4 мин
Охват и читатели12K

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет

В реестре npm — более миллиона пакетов почти для чего угодно. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, отправлять сообщения в центр уведомлений операционных систем, работать с препроцессорами Less и Sass и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом. 

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

Читать далее

Вклад авторов