JavaScript *

Вот уже несколько лет React Native является горячей темой в мире мобильной разработки. Неудивительно – он взял мир технологий штурмом, предложив способ разработки мобильных приложений как для iOS, так и для Android одновременно.

React Native - единый фреймворк, чтобы управлять ими всеми.​

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

Однако, прежде чем вы решите пойти ва-банк с React Native, очень важно понять, как он работает, и решить, лучше ли он подходит для вашего проекта.

Каковы его главные преимущества и самые большие недостатки? Чем он отличается от других платформ кросс-разработки? И последнее, но не менее важное: о чем должны знать ваши разработчики, прежде чем они отправятся в путешествие по React Native?

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

Хабр! Добро пожаловать снова.

Сегодня я расскажу о том как писатели хабра теряют свои статьи из за ошибок в работе редактора Хабра. Мне бы очень хотелось чтобы разработчики Habr или Chromium услышали меня и исправили эту проблему как можно скорее.

Привет, я Антон, преподаватель JavaScript в Elbrus Bootcamp. Недавно Институт образования НИУ ВШЭ выяснил, что 94% поступающих к нам не имели опыта программирования, и при этом 93% устраиваются разработчиками в течение 3-х месяцев после обучения. Но разве реально всего за 12 недель научить кого-то разработке? 

Мой ответ — да, если это не курсы, а буткемп. Решил показать Хабру один день в школе моими глазами. О том, что из этого обеспечивает результат, предлагаю подискутировать в комментариях.

Statoscope — это инструмент для анализа webpack-бандлов, а я его автор и мейнтейнер. Он зародился в далеком 2016 году как эксперимент, а теперь это полноценный тулкит для просмотра, анализа и валидации сборки.

В ноябре на конференции HolyJS я выступил с докладом о Statoscope и провёл воркшоп по его использованию. Зрителям понравилось, так что мы с организаторами HolyJS решили, что доклад может пригодиться и читателям Хабра — поэтому сделали текстовую версию. Видеозапись тоже прилагаем.

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

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

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

Бывает так, что ваше приложение обрабатывает графику и нуждается в высокой производительности – например, если это сервис для бронирования мест в зале, который мы показали в одной из прошлых статей. При этом зачастую нужны плавный зум или скроллинг элементов, а также поддержка различных библиотек. Рассмотрим, как сохранить производительность и скорость, на примере работы с библиотекой react-three-fiber.

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

Хочу поделиться с вами заметками о Docker.

Заметки состоят из 4 частей: 2 теоретических и 2 практических.

Если быть более конкретным:

• эта часть посвящена самому Docker, Docker CLI и Dockerfile;
• в второй части рассказывается о Docker Compose;
• в третьей части мы разработаем приложение, состоящее из 3 сервисов (клиента, админки и API) и базы данных (PostgreSQL);
• в четвертой части мы это приложение "контейнеризуем".

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

Эта статья для тех, кто только начинает свой путь в написании больших React приложений, но все еще использует только console.log для их дебага. Мы с вами рассмотрим работу с расширением для браузера "React Developer Tools" на простом примере, который в дальнейшем вы сможете применить в своих проектах. Это расширение дает возможность просмотра дерева компонентов, их props, состояния и контекста. Также достаточно просто отловить неэффективные компоненты, которые подвергаются повторному рендерингу, посмотреть сколько на это уходит времени и построить графики для визуализации эффективности компонентов. Благодаря этой информации вы не только сможете оптимизировать ваше приложение, но и более глубоко изучить React и понять все тонкости работы с ним.

Преобразуем картинку с черным фоном в прозрачный фон без хитрых наложений слоёв в Photoshop'е и сохраним в прозрачный PNG. Пример кода на JavaScript.

Меня зовут Алексей Новохацкий, я – Software Engineer. Сейчас работаю над архитектурой высоконагруженных систем, провожу технические собеседования, воплощаю в жизнь собственные проекты.

Как известно, Node.js хорошо справляется с I/O intensive задачами. А вот для решения CPU bound мы имеем несколько вариантов – child processes/cluster, worker threads. Также есть возможность использовать другой язык программирования (C, C++, Rust, Golang) в качестве отдельного сервиса/микросервиса или через WebAssembly скрипты.

В данной обзорной статье будут описаны подходы к использованию Golang в разработке Node.js приложений для запуска некоторых CPU intensive задач (простой суммы чисел, последовательности Фибоначчи, а также для таких хеш-функций как md5 и sha256).

Какие у нас есть варианты?

1. Попытаться решить CPU bound задачи только с помощью Node.js

2. Создать отдельный сервис, написанный на Golang и "общаться" с нашим приложением с помощью запросов/брокера сообщений и т.д. (в данной статье будут использованы обычные http запросы)

3. Использовать Golang для создания wasm файла, что позволит использовать дополнительные методы в Node.js

Меня зовут Михаил Сахнюк и я разрабатываю фронтенд уже более шести лет. Сейчас я фронтенд разработчик в Miro. 

В статье рассмотрим:

• как оптимизировать веб-приложение и ускорить его загрузку;

• почему это важно;

• какие инструменты помогут в работе над оптимизацией, замерами и контролем результатов;

• преимущества работы с загружаемыми модулями в приложениях.

Ускорение загрузки приложения — это комплексная задача, которая решается всей командой разработчиков. В статье расскажу, что могут предпринять фронтенд разработчики, опуская варианты сетевой оптимизации с использованием HTTP2 или оптимизации скорости ответов сервера.

Статья — конспект моего доклада на конференции Mergeconf 2021 в Иннополисе. 

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

— поделиться с Хабром видеозаписями общедоступной части (суммарно по всем конференциям это более ста часов видео!)

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

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

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

На днях прочитал интересную статью, в которой демонстрируется возможность использования WebAssembly-модулей (далее — Wasm), скомпилированных из Rust, в React-приложении.

Так вот, статья интересная, но автор толком ничего не объясняет, видимо, исходя из предположения, что читатели, как и он, владеют обоими языками программирования (JavaScript и Rust).

Поскольку я не отношусь к этой категории (пока не знаю Rust), но люблю как следует разбираться в интересующих меня вещах, представляю вашему вниманию собственную версию.

Исходный код проекта.

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

Привет ?, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто ?

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

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

Когда “еще один пуллинг каждый N секунд” стучится вам в код. Время подумать про вебсокеты a.k.a полнодуплексное соединение.

Речь пойдет про socket.io , не совсем web socket а скорее микс при участии web socket. Но очень удобный в использовании сразу из коробки. 

Деструктурирующее присваивание в JavaScript — это изящный способ извлечения значений из массивов и объектов, при котором в полной мере реализуется принцип DRY (англ. Don’t repeat yourself — «Не повторяйся»).

Цель этой статьи — продемонстрировать, как именно работают деструктурирующие присваивания массивов и объектов в JavaScript.

Поэтому без лишних слов предлагаю приступить к деструктуризации массивов.

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

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

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

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

Мы разработаем простой Express-сервер, способный обрабатывать стандартные CRUD-запросы, с фиктивной базой данных, реализованной с помощью lowdb.

Затем мы подробно опишем наше API, сгенерируем JSON-файл с описанием и визуализируем его.

Так, например, будет выглядеть описание POST-запроса к нашему API:

Исходный код проекта.

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