Веб-разработка *

Привет! Меня зовут Андрей Якобчук, я ведущий фронтенд-разработчик в Muse Group. Мы постоянно работаем над ускорением клиентской части наших сайтов. К тому же Гугл с его метриками Core Web Vitals с каждым годом придаёт всё большее значение отзывчивости и стабильности интерфейса сайтов и понижает в ранжировании те, которые считает неудобными для пользователя. В статье я расскажу о том, какие подходы мы используем для измерения и мониторинга перфоманса сайтов, а также дам рекомендации, как можно улучшить ваш проект. 

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

Сегодня хочу поговорить про то как НЕ надо учить TypeScript. Какие ошибки чаще всего делают новички и почему TypeScript может так сильно раздражать? Это перевод оригинальной статьи.

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

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

Мы разработаем простое приложение для сведения аудио и видео со следующим функционалом:

• пользователь выбирает одно видео и несколько аудио, хранящихся в его файловой системе;
• когда пользователь нажимает на кнопку для начала записи, запускается воспроизведение выбранных файлов, захватываются их медиапотоки;
• захваченные потоки объединяются в один и передаются для записи;
• в процессе записи пользователь может менять источник аудиоданных;
• пользователь может приостанавливать (например, для изменения источника аудиоданных) и продолжать запись;
• по окончанию записи генерируется видеофайл в формате WebM — превью сведенного контента и ссылка для его скачивания.

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

Репозиторий.

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

Если вам это интересно, прошу под кат.

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

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

На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные задачки. Теперь имею дело с терабайтами трафика и 50 млрд событий в сутки. И хотя современные телефоны в 1 000 раз мощнее любого оборудования двадцатилетней давности, я до сих пор оптимизирую. Думал даже, что это со мной что-то не так. Но потом понял, что все постоянно что-нибудь оптимизируют. 

Эта статья в меньшей степени о том, почему нужно бороться за производительность, и в большей о том, на что сейчас стоит заменить устаревший стек из JPEG, JSON, gzip и TCP — и как это сделать. 

Спойлер: у нас есть решение и мы его не только показываем — ссылки на open source в конце статьи.

Когда вы открываете любой сайт — например, google или facebook, вы видите конечный продукт. Но чтобы этот продукт увидеть, и пощупать, нужно:

1. Написать код приложения

2. Собрать проект

3. Поднять его на сервере приложения

Сегодня я расскажу про третий этап: что вообще такое сервер приложения и зачем он нужен.

За 6 часов сделал первую версию игры и ворвался в тренды Твиттера с одного твита. Привлек 100 000 пользователей за неделю, а также попал в ведущие СМИ страны. Как это было и что я для этого сделал можно узнать в статье.

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

На днях, бороздя просторы Сети в поисках вдохновения, наткнулся на Zustand, инструмент для управления состоянием React-приложений, наиболее полно (среди более чем многочисленных альтернатив) отвечающий моим представлениям о, если не идеальном, то адекватном современному React state manager (см., например, эту статью).

Рассказу о нем и будет посвящена данная статья. Сначала немного теории, затем немного практики — по традиции, "запилим" простую "тудушку".

Репозиторий.

Если вам это интересно, прошу под кат.

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

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

Мы поговорили с Валей Броницкой, которая отвечает за визуальный контент в Доке, а также с дизайнером интерактивных примеров Светой Коробцевой и иллюстратором Кирой Кустовой. Они рассказали, как рисуют обложки, иллюстрируют статьи с помощью демок, схем и анимаций и как идут к тому, чтобы каждый автор мог создать визуал к своей статье и не переживать за собственные дизайнерские навыки.

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

Привет Хабр! Друзья зовут меня Данил, я web-разработчик в МегаФоне и работаю над системой обработки обращений наших пользователей. А их у нас огромное количество, и я каждый раз удивляюсь богатому русскому языку.

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

Если вы только планируете создать сайт, но не знаете на какой системе управления контентом (CMS) его сделать — рекомендую ознакомиться со статьей, чтобы не потратить деньги на разработку зря.

Каждый год веб совершает огромные шаги в светлый мир будущего (или тёмный, смотря какой вы предпочитаете). Инструменты один за другим добавляют тёмные темы, а крупные гиганты обновляют и улучшают свои системы дизайна, чтобы они оставались актуальны в расширяющемся тёмном мире. Внедрение темной темы значительно улучшает пользовательский опыт и, как следствие, бизнес показатели. Например, недавно одна из крупнейших бразильских новостных компаний Terra, после добавления темной темы, увеличила количество посещённых за сеанс страниц на 170% и снизила показатель отказов на 60% (т.е. в 2,5 раза) [читать статью].

По собранным Android Authority (2514 опрошенных) данным и анализу Томаса Стейнера (243 опрошенных), более 80% пользователей используют тёмную тему. Конечно же, выборку сложно назвать однозначно правдивой, ведь опросы проходили на технических форумах, но в целом можно говорить о том, что темной темой пользуется добрая половина интернета.

Первая часть цикла по большей части была посвящена истории css-переменных – их созданию, развитию и становлению, а также содержала примеры темизации как на уровне планирования и дизайна, так и на уровне разработки клиентской части, включая различные способы темизации и смены тем [Темизация. История, причины, реализация]. В этой статье, поднимаясь на ступень выше, речь пойдёт о клиент-серверном взаимодействии и возможностях современных браузеров в контексте темизации.

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

В этой статье я хочу рассказать вам о Temporal, новом API для работы с датой и временем в JS.

• Описание предложения
• Черновик спецификации
• Рецепты по использованию Temporal

Источником вдохновения для меня послужила эта замечательная статья.

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

Если вам это интересно, прошу под кат.

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

Писать кнопочки и формочки на React - дело не хитрое. Но почти всегда фронтовые проекты превращаются в нечто трудночитаемое и едва ли поддерживаемое. Визуально различия проектов на React и JQuery со временем сохраняются, а вот developer experience с точки зрения трудозатрат на поддержку становится примерно одинаковым.