Всем привет! Это разработческий канал от сотрудников Red Collar.
Каждую неделю один из сотрудников компании рассказывает о своих задачах, сложностях, решениях, делится полезными ссылками и мыслями на тему разработки.

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

В компании занимаемся двумя направлениями:
- Разработкой сложных продуктов, сервисов для сотен тысяч пользователей для ведущих финтех-, телеком-, IT-, HoReCa- и логистических компаний.
- Созданием эстетичных корпоративных и промосайтов, которые становятся лучшими в своей сфере и берут самые сложные международные награды.

По тегам можно найти темы:
#rdclr_frontend — #Vanilla_JS #JavaScript #React #WebGL

#rdclr_backend — #Java #Python #PHP #NN

#rdclr_DevOps

#rdclr_QA

#product (мысли, применимые к сервисно-продуктовым историям)
#aesthetic (про эстетичность интерфейсов) #teamlead — про роль, практики и рост в тим-лида
#optimization (про оптимизацию кода для скорости и плавности работы проекта) и #library (набор инструментов для упрощения жизни разработчика)
#read (полезные ссылки для изучения нового материала)
#meme (на посмеяться) и #news (новости)

Чтобы совместить два тега — введите оба в поисковую строку канала.

Всем привет! Меня зовут Даша и на этой неделе я пишу от лица разработки Red Collar. Сейчас я фронт и пишу на ванильном JS. Сегодня мы с вами будем говорить о веб-компонентах.

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

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

#rdclr_frontend #Vanilla_JS

Создание веб-компонента.

К примеру, вам нужно сделать, чтобы при нажатии на кнопку вам открывалось одно и тоже модальное окно, но каждое со своей информацией и стилями.

Вместо какого-либо тега вы используете название вашего компонента. К примеру, это «modal-button».
Это название вы используете как название класса в camelCase и связываете в customElements.define.

#rdclr_frontend #Vanilla_JS #code

Что если вам нужно использовать стандартные теги для веб-компонента?

Тогда нужно добавить атрибут is="modal-button" в компоненте. В JS вам нужно наследовать свойства от HTMLButtonElement, а не HTMLElement, в блоке define вы уточняете, что расширяете свойства элемента <button>.

#rdclr_frontend #Vanilla_JS #code

При создании веб-компонента, браузер создает его в DOM и первым делом вызывает constructor(), после него connectedCallback().

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

Когда компонент удаляется из DOM, вызывается disconectedCallback(). Здесь происходит освобождение памяти — отключаются внешние обработчики, таймеры и т.д.

#rdclr_frontend #Vanilla_JS #code

Немного про контекст в веб-компонентах.

В компонентах this — это и сам элемент из разметки, и экземпляр класса в js. Через this мы получаем нужные нам свойства из дата-атрибутов (this.dataset.color, this.dataset.text) и объявляем новые свойства в нашем классе (this._color, this._text).

Веб-компоненты на примере можно посмотреть по ссылке: https://jsfiddle.net/drLt21yn/

#rdclr_frontend #Vanilla_JS #code

Всем привет! Меня зовут Иван, и на этой неделе я пишу от лица разработки Red Collar. Сейчас я бэк и пишу на python. На этой неделе посмотрим на интересные библиотеки и соединим полученные знания в проект.

#rdclr_backend #python

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

pip install postgresql-wheel

После запуска в виртуальном окружении python у вас будет полноценный PostgreSQL: изолированный, скомпилированный и не требующий sudo.
Теперь через код можно создавать и удалять сервера. Данный пакет будет работать только под Linux.
https://github.com/michelp/postgresql-wheel

#rdclr_backend #python #read

Насколько трудно объединять крайне полезные библиотеки с другими библиотеками? У Sebastián Ramírez это выходит отлично.

Сегодня посмотрим на SQLModel. Без SQLModel нужно было провалидировать входные данные pydantic, а потом написать код для модели данных, используя SQLAlchemy. Благодаря SQLModel решается проблема дублирования кода модели.

https://github.com/tiangolo/sqlmodel

#rdclr_backend #python #read

Мы уже познакомились с Себастьяном Рамирез по библиотеке SQLModel, но это не самая популярная библиотека у Себастьяна. Фреймворк FastAPI — это быстро набирающий популярность инструмент для разработки HTTP сервисов на Python. FastAPI из коробки дает тайпинг для валидации данных вкупе с библиотекой pydantic, автогенерацией openapi спецификации и много приятных мелочей. Была затронута и тема популярности: для примера, у фреймворка Django сейчас — 60к звезд на GitHub, а у FastAPI — 37к.

https://github.com/tiangolo/fastapi

#rdclr_backend #python #read

Автоформаттер black принял «политику стабильности». В 2022 ожидайте стабильный релиз. После принятия «политики стабильности» фреймворк Django собираются начать форматировать свой код при помощи black.

Стоит заметить, что автоформаттер black постепенно становится де-факто стандартом оформления кода.

https://twitter.com/llanga/status/1455496802812239876

#rdclr_backend #python #news

Всем привет! Меня зовут Андрей и в компании Red Collar я занимаю позицию Backend Java-разработчика. На этой неделе у меня будет много ревью-кода от стажеров до middle разработчиков, поэтому вначале рассмотрим решения и инструменты, с помощью которых можно повысить качество проекта.

#rdclr_backend #java

MapStruct
Сегодня утром я проводил код-ревью нашего java-стажера и заметил участок кода, который можно автоматизировать.

В разработке Spring-based приложений зарекомендовал себя подход разделения приложения на «слои» — Controller -> Service -> Repository (в базовом представлении). При его использовании важно следить, чтобы нижний слой не имел доступа к слою выше. Наших данных это тоже касается и, если в слое контроллеров у нас участвуют сущности БД, то это считается плохим тоном и требуется проводить рефакторинг. Тут нам на помощь приходят DTO (Data Transfer Object), в которые мы заносим данные из наших сущностей и оперируем уже ими.

И, чтобы не делать это вручную, можно использовать библиотеку MapStruct. В лучших традициях спринга она помогает с помощью «магических» аннотаций конвертировать один объект в другой, снимая с нас большой пласт работы.
Попробовав однажды, писать вручную уже не захочется!

Ссылка на библиотеку — https://mapstruct.org/

#rdclr_backend #java #library

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

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

Тут на помощь приходит CriteriaApi. Данный пакет инструментов позволяет динамически строить запрос в БД, оперируя объектами, а не самим SQL. Вдобавок к этому, Spring фреймворк предоставляет нам интерфейс Specification<T>, который упрощает взаимодействие с CriteriaApi. Пример работы приведен на картинке ниже.

#rdclr_backend #java