Обновить
256K+

JavaScript *

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

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

Декларативный шопинг в интернете с помощью Payment Request API и Angular

Время на прочтение5 мин
Охват и читатели5.8K
Как давно вы платили на веб-сайте в один клик с помощью Google Pay, Apple Pay или заранее заданной в браузере картой?

У меня такое получается редко.

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

Это не очень удобно. Особенно когда знаешь об альтернативе: в последние пару лет стандарт Payment Request API позволяет легко решать эту проблему в современных браузерах.

Давайте разберемся, почему его не используют, и попробуем упростить работу с ним.


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

Генератор музыки. Web Audio API. Опыт новичка

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

Контекст и предыстория


Мне 62. Года три назад решил попробовать написать достаточно сложную систему, до этого было только 20 строк на бэйсике в 1981 г., когда нам на 5 курсе радио-факультета (НГТУ, ранее НЭТИ) воткнули 3 месяца информатики. Профессионалом принято считать того, кто предметом владеет и на нем зарабатывает, так что по факту я — новичок.

С другой стороны, я почти всю жизнь занимался относящимися к музыке алгоритмами, застал процесс развития и железа, и ПО и по мере сил участвовал в нем. В 1978 разработал и собрал синтезатор а-ля Mini-Moog (полагаю, 1-й за Уралом), разработал и выпускал 1-ю в СССР звуковую карту с синтезатором для Агат7(9) — советский аналог Apple II, проектировал модуль FM-синтеза для одного из заводов, сотрудничал с Cakewalk (США), PGMusic (Канада), PowerFX (Швеция) — чаще по схеме: «идеи и воплощение от нас, бюджет — от них», участвовал в международных музыкальных выставках MusikMesse (Германия), NAMM (США) и пр.
Читать дальше →

3 способа рендеринга больших списков в Angular

Время на прочтение6 мин
Охват и читатели23K
В 2020 году фронтенд-фреймворки стали лучше, эффективнее и быстрее. Но, даже учитывая это, рендеринг больших списков без «замораживания» браузера всё ещё может оказаться сложной задачей даже для самых быстрых из существующих фреймворков.

Это — один из тех случаев, когда «фреймворк является быстрым, а код — медленным».



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

Автор статьи, перевод которой мы сегодня публикуем, хочет исследовать существующие способы вывода больших списков на веб-страницах и поговорить о сферах их применения.
Читать дальше →

ES6-модули в браузере: готовы они уже или нет?

Время на прочтение8 мин
Охват и читатели13K
Слышали об использовании ES6-модулей в браузере? Собственно — это обычные ES6-модули. Только применяются они в коде, предназначенном для браузеров.


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

Что происходит, когда JS-модуль импортируют дважды?

Время на прочтение3 мин
Охват и читатели15K
Начнём этот материал с вопроса. ES2015-модуль increment содержит следующий код:

// increment.js
let counter = 0;
counter++;

export default counter;

В другом модуле, который мы назовём consumer, вышеприведённый модуль импортируется 2 раза:

// consumer.js
import counter1 from './increment';
import counter2 from './increment';

counter1; // => ???
counter2; // => ???

А теперь, собственно, вопрос. Что попадёт в переменные counter1 и counter2 после выполнения модуля consumer?



Для того чтобы ответить на этот вопрос, нужно понимать то, как JavaScript выполняет модули, и то, как они импортируются.
Читать дальше →

Малоизвестные, но популярные JS-фреймворки для фронтенда

Время на прочтение5 мин
Охват и читатели15K
Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.
Читать дальше →

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

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

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


Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.


image


А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Читать дальше →

Докеризация приложения, построенного на базе React, Express и MongoDB

Время на прочтение6 мин
Охват и читатели65K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как упаковывать в контейнеры Docker веб-приложения, основанные на React, Express и MongoDB. Здесь будут рассмотрены особенности формирования структуры файлов и папок таких проектов, создание файлов Dockerfile и использование технологии Docker Compose.


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

Не пиши одно и то же: как переиспользуемые компоненты React помогут фронтенд-разработчику быстрее создавать приложения

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

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

Я занимаюсь фронтенд-разработкой уже 10 лет и расскажу о применении компонентов для создания элементов фронтенда — это значительно упрощает жизнь фронтенд-разработчика.

Написано при поддержке Mail.ru Cloud Solutions.
Читать дальше →

Чему меня научил мой коммит в Angular

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

Сегодня я расскажу, как попал в контрибьюторы Angular. Оказалось, это совсем не сложно и весьма увлекательно! Получилась драма с четырьмя актами и одной моралью. Вот, как всё было.

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

YouTube — Ошибка. Повторите попытку позже. Идентификатор воспроизведения: <...>

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


Чуть больше месяца назад стал замечать, что почти каждая попытка посмотреть видео с YouTube на десктопном компьютере начинается с сообщения об ошибке.

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

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

Под катом — причина возникновения ошибки (для тех, кому лень читать, это AdBlock), и что с этим можно сделать. Конечно, кроме отключения самого блокировщика рекламы.
Читать дальше →

5 малоизвестных возможностей JSON.stringify()

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


Доброго времени суток, друзья!

В этой небольшой заметке я хочу рассказать вам о некоторых редко используемых возможностях JSON.stringify(). Возможно, они окажутся вам полезными.

JSON.stringify() часто используется при отладке для преобразования объекта или обычной строки в строку в формате JSON. Но как данный метод используется, и можем ли мы обойтись toString()? Давайте попробуем это сделать.

// создаем объект user
const user = {
    name: 'Harry Heman',
    age: 29,
    job: 'developer'
}

// преобразуем объект в строку, используя стандартный метод toString(), и выводим результат в консоль
console.log(user.toString()) // [object Object]

[object Object] — это не совсем то, что мы хотели увидеть, не правда ли?

Не спрашивайте, зачем мы вообще используем toString(). Предположим, что нам жизненно необходимо перевести объект в строку.

Теперь попробуем использовать JSON.stringify():

console.log(JSON.stringify(user)) // {"name":"Harry Heman","age":29, "job": "developer"}

Мы сделали это, Карл!

Однако возможности JSON.stringify() этим не исчерпываются.
Читать дальше →

История о том, как я разработал язык программирования

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

Привет Хабр! Меня зовут Ильдар. Мне 29 лет. Программирую с 2003 года. За свою жизнь создал 4 фреймворка и язык программирования. В этом посте я поделюсь своим опытом, инсайтами, которые я получил при разработке языка программирования BAYRELL Language. Заранее прощу прощения за возможные синтаксические и пунктуационные ошибки в тексте и отсутствие картинок.

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

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

Хабр Конвертер: чтобы версталось легко

Время на прочтение3 мин
Охват и читатели14K
Наверняка многие из вас хотя бы однажды пользовались хабраконвертером, который официально рекомендован администрацией Хабра — https://shirixae.github.io/habraconverter-v2/. Несколько лет назад его создал хабравчанин meta4, а потом доработал Shirixae. Принцип простой: открываете гуглодок с постом, Ctrl-A, Ctrl-C и вставляете в окно конвертера. Нажимаете кнопку «Конвертировать» и получаете готовый код вёрстки, который можно вставлять в редактор Хабра и публиковать. Только перед этим нужно пройтись и поправить кое-какие мелочи.

И всё бы хорошо, если верстать приходится не слишком часто. Или посты небольшие, несложные. Но если вы верстаете помногу, и в постах есть и картинки, и таблицы, и куски кода, то из раза в раз приходится делать рутину: вставлять нужные пустые строки и убирать лишние, заменять теги <sоurce> на <cоde>, и т.д. и т.п. Мы решили потратить день, чтобы потом долетать за час, и допилили конвертер.

Новая версия лежит тут, а под катом — перечисление доработок.
Читать дальше →

Полное руководство по HTML-атрибутам data-*

Время на прочтение8 мин
Охват и читатели115K
Представляем вашему вниманию перевод статьи, посвящённой использованию атрибутов data-*. Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.


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

Что такое «чистый код» в 2020-м?

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

«Чистый код» и чистый кот

Разработчиков хлебом не корми, дай поспорить о чистоте кода: например, недавно шумиху навёл пост Дэна Абрамова «Goodbye, Clean Code».

Но при этом у самого понятия «чистый код» нет чёткого определения. Главная книга по этому вопросу — «Clean Code», где Роберт «Дядюшка Боб» Мартин сразу заявляет: «сколько программистов, столько и определений». Впрочем, из этого он делает не вывод «говорить об этом бесполезно», а вывод «стоит сравнить разные определения». Поэтому в книге он привёл мнения нескольких выдающихся программистов о том, что такое чистый код.

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

В апреле Дядюшка Боб прилетит в Петербург выступить на трёх наших конференциях, и они как раз по трём разным направлениям (про .NET-разработку, про тестирование и про JavaScript). Поэтому мы спросили нескольких спикеров этих конференций, что такое чистый код для них, чтобы сравнить мнения экспертов индустрии в 2020-м.

А поскольку тема холиварная, наверняка кто-то из вас окажется не согласен с какими-то из мнений. В таком случае айда спорить в комментариях, это тоже весело!

UPD: Когда мы писали эту статью, Роберт планировал приехать на наши конференции. К сожалению, ситуация изменилась. Также из-за запрета на проведение массовых мероприятий мы перенесли конференции на другие даты. Следите за обновлениями на сайте конференции. 13 марта мы обновили этот пост, чтобы он не содержал некорректную информацию.

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

Борьба с утечками памяти в веб-приложениях

Время на прочтение13 мин
Охват и читатели17K
Когда мы перешли от разработки веб-сайтов, страницы которых формируются на сервере, к созданию одностраничных веб-приложений, которые рендерятся на клиенте, мы приняли определённые правила игры. Одно из них — аккуратное обращение с ресурсами на устройстве пользователя. Это значит — не блокировать главный поток, не «раскручивать» вентилятор ноутбука, не сажать батарею телефона. Мы обменяли улучшение интерактивности веб-проектов, и то, что их поведение стало больше похоже на поведение обычных приложений, на новый класс проблем, которых не существовало в мире серверного рендеринга.


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

Может, нам слегка успокоиться с JavaScript?

Время на прочтение8 мин
Охват и читатели74K
У меня очень странная проблема с браузером. Скрипты на некоторых страницах просто не работают, пока не пройдёт около 20 секунд.

Что бы вы ни собирались предложить — да, я уже думала об этом, и нет, не помогло. Я рассказываю об этом не в надежде, что кто-то подскажет с отладкой, а потому что этот случай заставил меня остро осознать некоторые, как бы сказать… причуды… разработки на фронте.

(В самом деле, даже не пытайтесь диагностировать проблему по одному предложению, не надо, я слышала и перепробовала почти всё, что вы можете себе представить).
Читать дальше →

Работа с GeoJSON в среде Node.js: практическое знакомство

Время на прочтение7 мин
Охват и читатели27K
GeoJSON — это стандартизованный формат представления географических структур данных, основанный на JSON. Существует множество замечательных инструментов для визуализации GeoJSON-данных. При этом данный формат хорош не только в деле хранения координат неких точек. Он, помимо точек, позволяет описывать и другие объекты: линии, полигоны, коллекции объектов.


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

Интернационализация: как сделать веб доступным для всех

Время на прочтение13 мин
Охват и читатели9.2K
Ecma International, Technical Committee 39 или по-простому TC39 — это группа JavaScript-разработчиков, создателей реализаций технологий, академиков и других заинтересованных сторон, которые вместе с сообществом поддерживают и развивают JavaScript как платформу.

Участники TC39 обычно рассказывают что-то интересное, пользуясь своим глубоким пониманием JavaScript. Но кое-кому кажется, что они слишком далеко ушли от проблем простых разработчиков. Где разработчик языка, и где человек, который каждый день на практике пишет фронтенды?

Давайте познакомимся с докладом, который сочетает и глубину понимания, и высокую практическую применимость. Встречайте новый рассказ Romulo Cintra о проблемах интернационализации, которые будут решены новым API, которое вскоре появится в JavaScript.



Romulo Cintra — делегат TC39, работает в разработке и архитектуре уже более 10 лет, специализируется на вебе, мобильной разработке и облаках. В этом докладе из первых рук сопредседателя MessageFormat Working Group вы узнаете, какие варианты решения существующих проблем есть уже сейчас, и в каком виде их собираются решать посредством нового API в самом JavaScript.

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

Далее повествование от лица спикера.