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

Пишем drag-and-drop загрузчик файлов для React приложения с помощью Context, подхода Compound components и нескольких кастомных хуков

Всех приветствую!

Это продолжение серии статей, где мы рассмотрим еще несколько методов, которые помогут улучшить производительность приложения. Мы поговорим о том, как использовать entity manager, unit of work, bulk inserts и batching processing для более эффективной работы с базой данных.

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

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

В данной статье мы расскажем как перевести статический веб-сайт с Markdown (Zola, Hugo, Jekyll, Pelican, Gatsby, и д.р.) на все языки мира и поддерживать переводы в актуальном состоянии при изменении исходных текстов.

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

С активным развитием и распространением технологии WebAssembly (сокращённо WASM) появилась возможность создавать веб-модули, которые можно загружать с сервера и исполнять их прямо в браузере! Мы не смогли пройти мимо такой возможности, и, после долгих оптимизаций, представили свой модуль, умеющий распознавать банковские карты, баркоды, машиночитаемые зоны, номера телефонов и документы прямо в браузере.

Дальше мы расскажем о том, как с помощью wasm-модуля от Smart Engines распознать номер банковской карты, просто поднеся её к веб-камере ноутбука.

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

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

Мы собрали пул UI-библиотек для React-проектов.

Привет! Я Дима, разработчик онлайн-бухгалтерии. Предлагаю на примере простой задачи разобрать два подхода к созданию модальных окон, связанных с url: императивный и декларативный.

Часто на фронтенде нужно открывать модальные окна по определенному пути. Из коробки ангуляр не предоставляет такой возможности, так же как и популярные ui-kit-библиотеки. И разработчики каждый раз ищут способ, как это сделать.

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

Но, как всякий другой язык программирования, Python имеет ряд уязвимостей, о которых мы подробно поговорим в этой статье. Так как статья ориентирована прежде всего на разработчиков Python, то мы будем говорить об ошибках в коде, которые по тем или иным причинам могут допустить программисты в процессе разработки. И начнем мы с рассмотрения инъекций команд.

Всем привет! На связи Александр Разыграев, я разрабатываю модуль ESMP Metrica, а в свободное время преподаю web-разработку студентам в институте, также преподавал на курсах переподготовки.

Часть студентов во время занятия повторяют действия и код за преподавателем. Примерно треть из них часто не успевала и сигнализировала мне, например, останавливали словами: «Подождите, я не успеваю записывать код …».

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

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

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

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

Привет! Раз в месяц мы в Moscow Python Podcast собираемся и обсуждаем новые релизы, PEP, заинтересовавшие нас инструменты и статьи. В апреле поговорили об исследовании экосистемы Django от JetBrains, LTS-релизе Django 4.2, релизе Pandas 2.0 и свежих PEP. Под катом — текстовая выжимка из обсуждения.

Обычно процесс оптимизации типичного backend'а на php включает:

• оптимизации SQL‑запросов в БД;

• оптимизации работы с кэшем (повышение hitrate, увеличение объёма кэшируемых данных);

• оптимизация внутренних процессов в backend (вынесение тяжёлых процессов в асинхронный режим, оптимизация внутренних структур данных)

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

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

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

Сейчас понятие «микрофронтенды» встречается довольно часто, но что это такое и какие задачи они решают? Зачем нам микрофронтенды, если есть микросервисы или монолит? И стоит ли тащить микрофронтенды в свой проект только потому, что это модно? Расскажу об этом, а также о трёх способах организации микрофронтендов: Podium, Single-SPA и Module Federation. Какой среди них лучший и нашли ли разработчики в нём панацею? Об этом читайте под катом.

Привет, я Паша Розов, CPO платформенных решений. Это моя первая статья на Хабре, жду с нетерпением порцию замечаний и критики в свой адрес, но лучше больше накидайте в сторону платформы, о которой пойдёт речь. Комментарии, которых так ждёт и боится каждый новый автор, помогут мне сделать продукт лучше. 

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

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

Одна из самых старых и самых популярных площадок с деревьями комментариев — это Reddit. Правда, большая часть его пользователей едина в одном: его интерфейс ужасен. Но его API открыто, поэтому на выбор есть множество клиентских приложений, особенно для мобильных телефонов — Joey, Relay, Slide и Boost и другие. Их авторы — как правило, и сами недовольные стандартным интерфейсом Реддита — потратили много времени и сил на поиск удобного интерфейса для комментариев. И большая их часть пришла к очень похожим вариантам дизайна.

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

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

По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.

Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?

В статье попробуем разобраться в теме и найти ответы.