JavaScript *

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

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

В данной статье мы будем воспроизводить звук в браузере на примере небольшого проекта под названием Punk riff generator.

В проекте заложена нехитрая идея: дать возможность генерировать и воспроизводить в браузере 4 случайных аккорда, которые можно было бы в последствии использовать как основу для очередной панк-песни. Ну не здорово ли?

На Хабре я часто вижу статьи о реализации тех или иных фич на Python-фреймворках. Я объединил все эти фичи в реальный проект с открытым исходным кодом, чтобы у вас сложилась целостная картина. Мы с вами создадим UX/UI на Figma, напишем фронтенд на HTML, CSS, SASS, Bootstrap и JavaScript, создадим ER-диаграмму в MySQL Workbench, напишем бекэнд на Flask, создадим регистрацию через социальные сети OAuth 2.0 в один клик, используем брокер сообщений и асинхронную очередь Celery для отправки писем на электронную почту, сделаем WYSIWYG-редактор, реализуем полнотекстовый поиск Elasticsearch, закешируем Redis, покроем тестами pytest и запустим в Docker-контейнерах, поговорим о многопроцессности для WSGI-шлюза Gunicorn.

Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress.

Я люблю box-тени.

Четыре года назад я выяснил, что мой процессор M1 может рендерить безумное количество таких теней, поэтому решил извлечь из них максимум, и мне это удалось. Если вам интересно, как пользоваться box-тенями, чтобы создать современный стиль UX, то вы не по адресу. Но если вам нравятся творчество и эксперименты, то продолжайте чтение.

Я хочу поделиться худшими примерами того, что можно сделать при помощи box-теней в одном div. Примерами, которые не должны работать, однако почему-то работают. Но прежде чем приступить, нужно ответить на вопрос: что же такое box-тень?

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

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

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

Полагаю, статья будет интересна всем разработчикам React, а также тем, кто любит разбираться с тонкостями работы JavaScript и браузерных API.

Предполагается, что вы имеете некоторый опыт работы с React, и вам не надо объяснять, что такое порталы и для чего они нужны.

Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.

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

В мире фронтенд-разработки существует множество различных фреймворков, которые помогают сделать процесс создания веб-приложений более удобным и эффективным. Я являюсь частью этого мира уже более 4-х лет, сейчас занимаю должность фронтенд разработчика в компании Loyalty Labs. За все время в IT я познакомилась с разными инструментами и фреймворками, и хотела бы обсудить трёх "гигантов" в области frontend: React, Angular и Vue.

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

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

- Основы создания простого приложения с использованием FastAPI.

- Основные HTTP‑запросы: POST, GET, PUT и DELETE.

- Принципы работы с Pydantic моделями и их интеграцию в FastAPI.

- Использование инструментов Alembic и SQLAlchemy для управления базой данных.

- Настройку асинхронной работы с базой данных PostgreSQL в SQLAlchemy.

- Реализацию кастомной авторизации и аутентификации в FastAPI.

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

TLDR

В этой статье мы научим авто самостоятельно парковаться с помощью генетического алгоритма.

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

Примерно на сороковом поколении авто начнут понимать, что такое авто-парковка, и начнут приближаться к парковочному месту:

Каждый мечтает стать немного богаче — вернуться в 2011 год и купить биткоинов на всю стипендию, чтобы сегодня быть уважаемым человеком. Возможно ли это? Скорее всего нет. Но тем не менее, если мы хотим накопить денег на квартиру или безбедную старость, то задаемся вопросом: в какой валюте или акции хранить перспективно и безопасно? Простой ответ — ни в какой. Если оглянуться в прошлое, то любая национальная валюта теряет в цене, а акции то растут, то падают, как и криптовалюта. Точно предсказать, как будет себя вести конкретная валюта в будущем, — невозможно.

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

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

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

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

Здесь вот и приходят на помощь решения CSS‑in‑JS, объединяющие фичи JS и CSS.

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. 

Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

Я бросил себе вызов: симулировать 1000000 (миллион) частиц на чистом Javascript на телефоне, используя только CPU и добившись 60 FPS.

Поехали.

Задача не особо сложна, если выполнять всю работу на GPU, но правило гласит, что нужно пользоваться только CPU, при этом работая на JS, так что никакого WASM.

Сегодня мы продемонстрируем как создавать back-end приложения на Node.js c PostqreSQL. В качестве примера создадим простейший back-end на Node.js с использованием PostgreSQL.

Почему именно Node.js и PostgreSQL? Node.js имеет хорошую скорость и асинхронность, а PostgreSQL, в свою очередь, является мощной и надежной СУБД.

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