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

ReactJS *

JavaScript-библиотека для создания интерфейсов

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

Реализация нейронной сети для соревнования Digit Recognizer на Kaggle и её прикладное использование. Часть №2

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

Статья является продолжением первой части, в которой была обучена нейронная сеть для решения задачи соревнования Digit Recognizer на Kaggle. В предыдущей статье был использован трюк, который увеличил точность нейронной сети в контексте результатов соревнования (до 0.99 896), в результате чего позиция автора в лидерборде значительно выросла. В данной статье мы рассмотрим каким образом можно интегрировать и использовать обученную модель нейронной сети в систему для распознавания рукописных цифр.

Читать далее

Микрофронтенды в SSR: опыт Авито

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

Фронтенд-разработчик Дарья Саенко рассказывает, как в Авито реализовали микрофронтенды с поддержкой серверного рендеринга.

Читать далее

TypeScript: infer и conditional types. Продвинутый TS на примерах

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

Разбираемся, что же такое conditional types и как написать свои утилиты, такие как ReturnType, InstanceType, NonNullable и др., при помощи ключевых слов infer и extends.

Читать далее

JSX: как разделять логику и отрисовку в разметке, сгенерированной методом map

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

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

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

Читать далее

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

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

Запустили сайт HomeBro, который ищет квартиры сразу на всех топовых сайтах объявлений. Все предложения по недвижке на одной карте + уведомления о новых вариантах в телегу.

Читать далее

Первый месяц жизни приложения BookDesk или как меня пытались взломать

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

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

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

Читать далее

План «Барбаросса» от Vue.js

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

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

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

Читать далее

Talkvio — не капибара и не старый пикабу. Модуль серверной индексации для поисковиков для Nginx. Альтернатива Next.js

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

Читая такие статьи как про Капибару, мне хочется упомянуть один свой старый/новый проект, в изначальном виде я затеял как проект реставрации старого форума сети Минска (uruchie.org) из далеких 2006-2012 годов, который хранился у меня в замороженном виде последние 10 лет. Не так давно я решил его расконсервировать и заняться реставрацией в свободное время, того, фактически, что осталось еще со времен локальных сетей. 

Я сразу отбросил почти все что было, это старый движок vBulletin - на тот момент крайне перспективный и развивающийся движок форума на PHP, и убрав почти все, оставив только базу данных из 250 000 сообщений и 5000 пользователей начал реализовывать новые концепции которые хотелось видеть. Если кому-то интересно то, кстати, одна из причин гибели такого старого и долгого проекта был именно vBulletin и безопасность.

Ссылка на рабочую версия нового ресурса: https://talkvio.com (заходим, регистрируемся, пишем, предлагаем идеи)

За основу взял что душе угодно для таких целей:

Backend: NodeJS + MySQL + Redis + Manticore (у меня с ним был крайне приятный опыт на других своих старых проектах) + Bash + отдельные модули на Python + Nginx

UI: React

Дальше в статье будет рассказываться как в проекте организован серверный рендеринг исключительно для поисковиков, и как вы можете повторить опыт для своего JS проекта не выполнял почти никаких модификаций проекта на основе пакета Puppeteer + Nginx.

Читать далее

Многооконное веб приложение — решение для перегруженных интерфейсов

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

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

Основа стека React + Redux.

Читать далее

WebAssembly: короткий обзор ассемблера для фронтенда

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

В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят. И конечно же я хотел поделиться рецептом приложения. Возьмем наш любимый React и добавим Yew, приправим всё это webpack-ом и добавим щепоточку module‑federation. Статья будет интересна всем, кто хочет познакомиться с WebAssembly и добавить разнообразия в список используемых фреймворков и библиотек для написания пользовательских компонентов.

Читать далее

Как мы отказались от styled-components в React Native приложениях

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

Styled-components является стандартом написания стилей для многих команд, которые разрабатывают приложения на React Native. Но мы не всегда задумываемся, зачем мы тащим это в продукт и какую выгоду получим. А что если от styled-components больше вреда, чем пользы? Я поделюсь нашим опытом в Профи и попробуем разобраться вместе.

Читать далее

Управление состоянием в React с использованием Valtio

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

Когда дело доходит до управления состоянием в React-приложениях, может возникнуть сложность с выбором подходящей библиотеки. Есть довольно много решений, и каждое со своими особенностями и преимуществами. В таком многообразии выбрать оптимальный вариант становится настоящим вызовом. Меня зовут Станислав Быков, и в этой статье я расскажу про Valtio — простое, но мощное решение для управления состоянием в React.

Читать далее

React + Three.js. Создаём собственный 3D шутер. Часть 2

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

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

В статье вы познакомитесь с библиотекой React Three Fiber и научитесь создавать интерактивные 3D-игры.

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

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

Добавление WebAuthn в веб-приложение

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

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

Читать далее

Использование Content-Security-Policy вместе с React & Emotion

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

Content-Security-Policy (CSP) - это HTTP заголовок, который улучшает безопасность веб-приложений за счет запрета небезопасных действий, таких как загрузка и отправка данных на произвольные домены, использование eval, inline-скриптов и т.д. В этой статье будет сделан фокус на директиве style-src и ее использование вместе с CSS-in-JS библиотекой emotion.

Читать далее

Flutter VS React Native

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

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

Поскольку мобильные телефоны становятся умнее, пользователи также становятся умнее с каждым днем. Каждый клиент перед выбором и покупкой изучает его функции и используемые технологии. Когда дело доходит до разработки ОС Android и iOS, каждая компания задумывается о том, как лучше всего предоставить своим клиентам мобильное приложение с превосходным пользовательским интерфейсом (пользовательский интерфейс) и выдающимся UX (пользовательский опыт). Компании стараются предоставлять приложения, совместимые с несколькими платформами и позволяющие быстрее разрабатывать их в одном месте. Затем на место приходят Flutter и RN (React Native). Оба являются кроссплатформенными платформами для разработки мобильных приложений.

Читать далее

Почему я не буду использовать Next.js

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

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

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

С момента выхода Remix в 2020 году я использовал именно этот фреймворк. Мне он настолько понравился, что на следующий год я устроился в эту компанию, чтобы помочь с развитием сообщества, а через 10 месяцев ушёл работать в EpicWeb.dev, где теперь обучаю людей всему необходимому для создания фулстек-приложений. И Remix играет в этом значительную роль, являясь веб-фреймворком, который аналогично Next.js нацелен на решение задач, связанных с созданием веб-приложений.

Поскольку Next.js аналогичен Remix, многие спрашивают, почему для преподавания фулстек-разработки в EpicWeb.dev я предпочёл именно Remix. И текущая статья станет ответом на этот их вопрос.
Читать дальше →

Redux-toolkit и переиспользование кода

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

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

Каждый разработчик стремиться соблюсти DRY принцип, но переиспользование кода в redux-toolkit имеет свои особенности и у кого-то могут возникнуть трудности, поэтому в данной статье описаны несколько вариантов переиспользования кода при создании слайсов через createSlice, начнем с самого очевидного, и постараемся создать гибкое и расширяемое решение, и конечно же не забудем typescript.

createSlice

Создание приложения для real-time обмена геоданными с React, Socket.io и Leaflet

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

Есть много руководств о том, как сделать приложение для общения в реальном времени на React и Socket.io. Создание таких приложений в том числе полезно для самообучения. Но мне захотелось чего-то более творческого. Пришла идея сделать приложение, где можно делиться местоположением.

Подробности

Как я добился чистой архитектуры на фронтенде

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

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

Читать далее

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