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

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

Функционал нашего приложения будет следующим:

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

Репозиторий с исходным кодом проекта.

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

Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

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

В настоящее время практически все ИТ-продукты работают с персональной информацией пользователя: ФИО, телефон, e-mail, паспортные и другие идентифицирующие данные. Для  обеспечения защиты прав и свобод, человека и гражданина при обработке его персональных данных в Российской Федерации существует Федеральный закон от 27.07.2006 N 152-ФЗ “О персональных данных”.

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

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

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

Когда вы разрабатываете сайт, то либо решаете проблему пользователя, либо нет. Будет это эффективный инструмент для бизнеса, приносящий прибыль, или это будет еще один сайт в сети Интернет? Это зависит от множества факторов…

Прим. Wunder Fund: мы занимаемся высокочастотной торговлей и это заставляет нас часто думать об оптимизации кода, но в основном, конечно, плюсового. В этой короткой статье описаны несколько подходов к оптимизации Python-программ по памяти. И хотя много проблем можно решить, просто докупив ещё памяти, но не все.

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

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

Преимущества данного метода:

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

Гибкость: использование любых фреймворков, перенос доменов адаптеров в другие проекты, добавление новых адаптеров без изменения исходного кода.

Легкая изменчивость: изменения в одной области нашего приложения не влияют на другие области.

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

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Настройки
  
  • select
  • include
  • where
  • orderBy
  • distinct
• Вложенные запросы
• Фильтры и операторы
  
  • Фильтры
  • Операторы
• Фильтры для связанных записей
• Методы клиента
• Транзакции
  
  • $transaction
  • Интерактивные транзакции

Первая часть.

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

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

Работа богата практическими примерами. Она будет полезна специалистам разного профиля.

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

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

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

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

Основная ошибка в подборе изображений для сайта - перфекционизм.

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

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

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Инициализация проекта
• CLI
• Схема
  
  • Типы данных
  • Атрибуты
  • Функции атрибутов
  • Отношения
• Клиент
  
  • Запросы
  • findUnique
  • findFirst
  • findMany
  • create
  • update
  • upsert
  • delete
  • createMany
  • updateMany
  • deleteMany
  • count
  • aggregate
  • groupBy

Вторая часть.

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

К старту курса по Fullstack-разработке на Python делимся подборкой расширений Visual Studio Code, среди которых вы найдёте генератор документации для кода JavaScript на базе ИИ и лёгкий, простой клиент REST API. За подробностями приглашаем под кат.

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

Рядовой случай: заказали сайт, web-студия его разработала, протестировала и успешно сдала проект, а в течение гарантийного срока (3-6 месяцев) исправила баги. На первый взгляд все в порядке. Что еще нужно?

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

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

В этой небольшой статье я хочу рассказать вам о File System Access API (далее — FSA), позволяющем читать и записывать файлы в локальную систему пользователя с помощью браузера.

Основные источники:

• Черновик спецификации
• Раздел на MDN

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

Асинхронное программирование в однопоточных средах JavaScript

Оглавление

1. Введение в асинхронное программирование

"Если не говорить о желаемом - оно может так и не стать действительным". В. Синявский.

Рассмотрим простой пример, чтобы понять, зачем нужны регулярные выражения. Допустим, перед нами стоит задача — найти и заменить местоимение 'ее' на 'его' в строке 'Быстрее всего мы догоним ее на машине'. 

Самое очевидное решение — использовать прямую замену, применив встроенную в JavaScript функцию replace():

'Быстрее всего мы догоним ее на машине'.replace('ее', 'его');

Однако 'ее' также является окончанием слова 'Быстрее', а .replace() заменит первое вхождение подстроки. В итоге мы получим ожидаемо неверный результат: 'Быстрего всего мы догоним ее на машине'. Поэтому необходимо проверить строку на наличие символа, стоящего перед 'ее': если это пробел, можно делать замену.

Больше примеров и неочевидные выводы о том, нужны ли фронтендерам регулярки — внутри статьи.