Как стать автором
Поиск
Написать публикацию
Обновить
327.46

JavaScript *

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

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

Я делаю тестовые лучше тебя! 1/3 (фронтенд)

Время на прочтение6 мин
Количество просмотров4.3K

Я и сам до конца не знаю, является ли заголовок статьи кликбейтом или нет. Разберёмся в комментариях. Только давайте по-честному! Согласен с тезисами — напиши, что статья огонь, поставь лайк и всё такое. Не согласен — аргументируй, а не просто: «бред»! Есть что добавить (идеи, фишечки) — добро пожаловать в комментарии.

Привет, меня зовут Андрей Шпилевский, и в этой статье я расскажу, почему я делаю тестовое лучше большинства, а также дам советы, как проходить этот этап быстро и максимально эффективно. Тема достаточно большая, поэтому будет разбита на 3 части. Это первая и начну ее я, пожалуй, не с советов: ‘Делай так, спина болеть не будет’, а с лирического вступления, которое, на самом деле, важнее, чем какие-либо пункты.

Читать далее

Введение в WebSocket и Socket.IO

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров12K

Введение

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

Socket.IO — это библиотека, которая расширяет возможности WebSocket, предоставляя механизмы автоматического переподключения и fallback-режимы для более стабильной работы в нестабильных сетевых условиях

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

Читать далее

Three.js с нуля на практике: как за несколько часов создать аркадную 3D-игру. Часть 1

Уровень сложностиПростой
Время на прочтение31 мин
Количество просмотров13K

Привет! На связи Кристина, фронтенд-разработчик в отделе рекламных спецпроектов KTS.

Наша команда создает визуально эффектные проекты, цель которых — привлечь внимание пользователей. Мы постоянно экспериментируем с разными технологиями и подходами, и вот, наконец, добрались до 3D-анимаций. Недавно я начала изучать Three.js и хочу поделиться своим опытом.

В сети есть множество статей и уроков по Three.js для начинающих, но большинство из них — это теоретический материал. Я же хочу показать, как создавать 3D-анимации на практике. Эта статья будет первой в цикле о разработке простой игры, в которой нужно строить башню из блоков.

Для успешного прохождения туториала достаточно владеть JavaScript и ООП. Каждый этап сопровождается ссылкой на codepen с комментариями в коде. А в конце вас ждет играбельный codepen-блок: вы можете сразу посмотреть на промежуточный результат, в котором уже реализована базовая игровая механика. В статье же я пошагово разберу, как к этому результату прийти.

Читать далее

Поддержка webextensions под Андроид

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров1.1K

Добрый день!


Меня зовут Тимур и я программист.


Сегодня я хочу представить очередную свою работу, точнее рабочий черновик. Да, я в курсе — дураку полработы не показывают, но так и на хабре то не дураки сидят. Итак, сегодня я расскажу как перенес поддержку webextensions в chromium под Андроид, что работает а что не работает, как пользоваться тем что работает и когда будет работать то что не работает.

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

Попытка написать свою реализацию встроенных хуков состояния в React + создание простого стейт менеджера

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.2K

Недавно давно я смотрел ничем не примечательный техническое интервью и услышал фразу от интервьюируемого: «Ну можно написать свой useReducer или useState». Мне врезалась эта фраза в голову, ибо я никогда в серьез не задумывался как они работают под капотом и в исходниках особо не копался, максимум в типах. Поэтому я решил их воссоздать с минимальным количеством зависимостей и попытался интегрировать в реакт.

Читать далее

Каррируем React-компоненты: функциональные паттерны на фронтенде

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров6.1K

Современный React все больше соответствует идеалам функционального программирования.

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

Эти паттерны плотно укоренились в сознании фронтенд-разработчиков, делая наш код значительно чище, читаемее и предсказуемее.

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

Читать далее

LocaleCompare в JavaScript: правильная и удобная сортировка строк с учетом языка

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров2.7K

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

Читать далее

Найди x: React + MobX + SSR + x = Счастье

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров1.2K

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

Читать далее

JavaScript: структуры данных и алгоритмы. Часть 8

Уровень сложностиСредний
Время на прочтение30 мин
Количество просмотров3.7K


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


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


Сегодня мы поговорим об алгоритмах сортировки.


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


Интересно? Тогда прошу под кат.

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

Drizzle ORM — современная типизированная ORM для реляционных БД в JS/TS

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.5K

Удивился, что про столь популярный продукт не было статьи на Хабре, срочно это исправляю. Drizzle ORM — это #2 самая желаемая ORM по опросам, и она даже вошла в top 50 JavaScript Rising Stars 2024, заняв 27 место.

Читать далее

Как мы боролись с лишними рендерами в react

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров7.9K

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

Читать далее

Интеграция Vue.js в Битрикс24: Как разработать сложный фронтенд за два месяца

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров7.4K

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

Читать далее

Backend-for-Frontend (BFF): решение проблемы взаимодействия фронтенда и бэкенда

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров9.8K

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

Что такое Backend-for-Frontend (BFF)?

Backend-for-Frontend (BFF) — это архитектурный паттерн, который помогает устранить разрыв между фронтендом и бэкендом. BFF выступает промежуточным слоем, который адаптирует данные и логику бэкенда под нужды конкретного фронтенда. Это позволяет фронтенд-командам работать с API сразу, а бэкенд-разработчикам подключать логику по мере готовности, что значительно ускоряет процесс разработки и снижает количество доработок.

Читать далее

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

Разработка трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров9.7K

Подробная инструкция по разработке трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта электроэнергии.

Читать далее

Пять нужных кастом-хуков для React

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров8.4K

React предоставляет программисту прекрасный базовый набор хуков и с каждой версией их количество и функционал увеличивается.

Трудно представить код современного React-приложения без таких функций как useState, useEffect, useRef и так далее.

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

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

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

Ниже мы рассмотрим примеры некоторых из них.  

Читать далее

Пока Apple саботирует развитие PWA, мы сделали демо с контактами, пуш-уведомлениями и биометрией

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3.3K

Хабр не раз выручал нашу команду, когда заказчик ставил задачу, которую мы никогда не делали. В недавнем кейсе по разработке демо-приложения PWA мы подсмотрели в статьях несколько полезных советов и тоже решили написать о своем опыте. Поговорим о PWA, развитие технологии и про то, кому это выгодно и не очень. Кстати, меня зовут Сергей Филатов и я веб-разработчик в R-Style Softlab. 

Читать далее

Ускоряем документацию в 10 раз

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров7.8K

Исправить опечатку в документации занимало 5 минут компиляции. Страницы с картинками загружались медленно.

Я считаю, чтобы посмотреть документацию не нужен JavaScript. Расскажу как переехал с docusaurus + react на starlight + astro и оптимизировал сайт под экологию.

Читать далее

Миграция на строгий TypeScript: наш путь и собственное решение

Время на прочтение7 мин
Количество просмотров8.2K

Наш проект имеет долгую историю. И за это время подходы к разработке фронтенда успели несколько раз измениться. В какой-то период в проекте можно было встретить код на JavaScript, CoffeeScript и TypeScript. Плюс сам TypeScript успел обновиться несколько раз за время существования проекта со второй до пятой версии.

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

В общем, если вам знакома эта ситуация, то статья для вас. Меня зовут Максим Овчарик, я ведущий фронтенд-разработчик в Selectel. Под катом расскажу, как мы строили процесс миграции кода на строгий режим TypeScript.
Читать дальше →

Обновление Capacitor приложений в обход сторов

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров844

В данной статье я хочу затронуть такую интересную тему, как обновление бандла Capacitor-приложений (CodePush, live update и т.д).

Сталкивались ли Вы когда-нибудь с ситуацией, когда необходимо незначительно обновить мобильное приложение, написанное на Capacitor?

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

А если нужно сделать релизы во всех популярных магазинах? Google Play, RuStore, AppGallery и, конечно же, самые нерасторопные из существующих — App Store. Выпуск во всех интересующих магазинах может занять значительное время. Вы, конечно, можете автоматизировать этот процесс при помощи различных инструментов, но, так или иначе, это занимает время на одобрение модераторами.

Читать далее

Продвинутое использование библиотеки React Router v7: как упростить сложную навигацию и улучшить производительность

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров7.7K

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

Погнали!

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