Кастомизация тега select

#фронтенд #браузеры #нововведение

Уверен, многие фронтендеры сталкивались с задачей кастомизации тега select, потому что дизайнеры постоянно придумывают что-то новое. А что, если эту кастомизацию добавят в браузеры?

В своём ролике "Попап вместо селекта", Вадим Макеев показывает новый экспериментальный элемент selectmenu, призванный решить проблему кастомизации селекта.

Смотреть: https://www.youtube.com/watch?v=mG0VFWCTnZI

Как вы думаете, решит ли новый элемент старую проблему? Делитесь своим мнением в комментариях, давайте пообщаемся :)

Продолжение курса "Своя фриланс-биржа": быть или не быть?

Некоторые из вас знают, что у меня на Youtube-канале есть курс "Своя фриланс-биржа" последний урок в нём выходил около года назад, а первый и вовсе — в мае 2020. Понятно, что с мая 2020, когда это всё начиналось — я успел выучить довольно много всего нового и хотел бы полностью переработать курс.

Всвязи с этим, у меня есть вопрос. Как лучше поступить — выпустить серию роликов по исправлению ошибок и рефакторингу, или сделать полностью новый курс? (голосуйте в опросе ниже, либо в посте на вкладке "сообщество")

UPD:

курс по стеку django + vue

Firefox остался один?

#браузеры #фронтенд

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

Мне, как фанату Firefox — довольно грустно, что он вот уже больше 10 лет теряет пользователей. Хотя, в нём есть всё, что вам нужно и, — даже немного больше. На мой взгляд, как фронтендера, именно в Firefox самые удобные DevTools и их фича с контейнерами (читайте: мультиаккаунтинг) — тоже супер крутая, я пользуюсь ей каждый день и на постоянной основе.

А каким браузером пользуетесь вы и почему? Голосуйте в опросе ниже и пишите в комментах, интересно узнать :)

Ссылка на статью: https://habr.com/ru/company/mvideo/blog/646137/

UPD:

Если кому-то интересно, я начал пользоваться Firefox ещё 11.12.2019, хотел просто месяц попробовать, но в итоге перешёл с концами :)

Джуниоры 2 года спустя

В 2019м году на канале Senior Software Vlogger вышел ролик, в котором 8 человек поделились историей своего старта в IT. И буквально на днях он выпустил продолжение к этому ролику, в котором они рассказывают, что изменилось в их жизни за 2 года, делятся опытом. На мой взгляд — интересный эксперимент. Если вдруг хотите узнать мою историю (или поделиться своей), пишите в комментах и я подумаю над роликом по теме :)

Смотреть: https://www.youtube.com/watch?v=z0akCxqPl_g
Прошлый ролик: https://www.youtube.com/watch?v=vovaUbBDunc

Делаем UI-компоненты с помощью CSS и SVG

#фронтенд #svg #css

Крутая статья от Ахмада Шадида с большим количеством примеров применения CSS и SVG для создания сложных UI-компонентов, например, маска для аватарки, в которой предусмотрена выемка под индикатор онлайн/оффлайн.

Так же сильно удивило насколько простым может быть решение для создания ломанной линии под заголовком, которые довольно эффектно смотрятся но довольно сложно делаются на практике (я всегда делал кучу всяких перевёрнутых рамочек в CSS, но использовав в этом месте не только CSS, но и SVG — я бы мог гораздо проще решить свою проблему).

Есть ролик по схожей теме от Вадима Макеева, в котором он с помощью CSS и SVG делает диалоговое облачко (имею ввиду "Speech balloon" как в комиксах...), его тоже рекомендую к просмотру.

Использовали ли вы SVG для таких кейсов? Поделитесь в комментариях своими примерами, если не жалко :)

Читать: https://ishadeed.com/article/building-components-svg-css/

Как побороть тревожность в IT и не сгореть в погоне за знаниями и деньгами

Новый выпуск "Доктор Кот" с канала "Мы обречены" подсвечивает довольно важную проблему тревожности в IT (и не только). Евгений Кот объясняет в чём разница между тревогой и тревожностью, чем они обусловлены и как с ними справляться. Кроме этого, рассказываются так же и истории подписчиков по теме, что позволяет почувствовать некоторую причастность и понять, что ты не один такой. Для меня эта проблема не то, что бы очень актуальна, кроме тех моментов, когда проводишь какие-либо манипуляции на продакшн-сервере у многомиллионного бизнеса...

Сталкивались ли вы с подобными проблемами? Как вы боретесь с этим?

Смотреть: https://www.youtube.com/watch?v=8AlQ9OKatOk

Как ВКонтакте ускоряли

#оптимизация #браузеры #фронтенд

Люблю подобные статьи от крупных игроков, поскольку это позволяет узнать, каким образом инженеры той или иной компании подошли к решению проблемы перформанса. Помню, читал нечто на схожую тему от одноклассников, они занимались server-side рендерингом реакт-компонентов так ещё и через GraalVM на Java.

Почему подобные статьи — это круто? Потому, что позволяют посмотреть на ситуацию с другой стороны и задуматься о том же MessagePack вместо JSON (теперь захотелось попробовать) и увидеть, что на самом деле оптимизации перформанса куда более обширные, чем те, которыми мы привыкли ограничиваться (lazy-load, эффективные форматы изображений).

Читать: https://habr.com/ru/company/vk/blog/594633/

Про опыт одноклассников: https://habr.com/ru/company/odnoklassniki/blog/480808/

И всё-таки, где интерфейсы лучше?

#интерфейсы #ux #фронтенд

Думаю, вы не единожды слышали, что в России самый крутой онлайн-банкинг в мире, но так ли это на самом деле?

Очень интересное исследование от Тинькофф на тему того, где всё-таки интерфейсы удобнее: у нас или за границей. Конечно, исследование на 39 людях — не то, что бы супер исследование, поскольку выборка довольно мала и данные могут не соответствовать действительности, но сами доводы в статье — интересные и правдивые, на мой взгляд.

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

Ссылка на статью: https://habr.com/ru/company/tinkoff/blog/645645/

Надёжный CSS

#css #фронтенд #best_practices

Надёжный (или устойчивый, вопрос локализации) — это коллекция сниппетов, позволяющая писать CSS-код надёжно и не испытывать проблем в будущем. Иными словами — набор хороших практик для часто встречающихся проблем, собранный Ахмадом Шадидом в одной статье "Defensive CSS".

Тут есть и про long content о котором я писал почти год назад (до сих пор постоянно возвращаюсь к этой статье, чтобы вспомнить решение той или иной проблемы). И про текст поверх картинок и много чего ещё полезного. По сути, это краткая выжимка из нескольких статей Шадида без лишних подробностей. В общем, крайне рекомендую. Эта статья попала в мою небольшую коллекцию важных ресурсов, к которым я периодически обращаюсь при работе.

Ссылка на статью: https://ishadeed.com/article/defensive-css

UPD:

Появился перевод на Хабре (если кому-то так удобнее): https://habr.com/ru/post/648537/

​Да кто такой этот ваш DDD?!

#подборка #программирование #ddd

То ли у меня поменялось инфополе, то ли я, что называется "дорос" до определённого уровня квалификации, но всё чаще и чаще я стал замечать разговоры о DDD, о котором я как-то слышал и в общих чертах знал, но детально никогда не разбирался. Решил устаканить для себя вопрос о DDD и понять, нужно ли агитировать за его применение в будущих проектах или пока рановато.

Если говорить кратко, DDD — это подход, который нацелен на изучение предметной области предприятия в целом или каких-то отдельных бизнес-процессов.

То есть, нам бы хорошо либо самим быть Domain Expert, либо иметь такого Domain Expert у себя в команде/в качестве приглашённого эксперта, чтобы лучше понимать бизнес-процессы в определённой предметной области и перекладывать их на конечную реализацию нашего проекта/продукта.

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

1) Ёмкая статья на хабре — "Что можно узнать о Domain Driven Design за 10 минут?" (https://habr.com/ru/company/dododev/blog/489352/)
2) Большой сборник различных полезностей на Github — "Awesome DDD" (https://github.com/heynickc/awesome-ddd)
3) Применение DDD в django — "Domain-driven design, Hexagonal architecture of ports and adapters, Dependency injection и Python" (https://habr.com/ru/post/559560/)

Как организовать хороший Code Review в команде

Отличный ролик с канала "S0ER", посвящённый организации Code Review. Лично для меня, ряд моментов после него прояснился и процесс ревью (который то есть, то нет) у нас в команде после этого обязательно изменится и обретёт более очерченные рамки, чем сейчас (есть набор правил, которым должен соответствовать код и если он им не соответствует, то возвращается обратно).

А как у вас в команде организован Code Review? Пишите в комментарии, интересно узнать :)

Смотреть: https://www.youtube.com/watch?v=cc0gpWr_kR8

No-code и ИИ заменят программистов?

Довольно часто в последнее время слышу это странное мнение: "ИИ развивается так быстро, что скоро всех программистов заменят нейросети. No-code/zero-code решения заменят программистов." А сегодня даже попался ролик в рекомендациях на эту тему, в котором, на мой взгляд, довольно аргументированно объясняют почему это утверждение не то, что бы очень близко к правде.

Да и сам я, если честно, считаю, что хорошего специалиста вряд ли можно заменить нейросетью. Разработчики довольно часто решают весьма нетривиальные задачи, решение которых не скинешь на ИИ, а No-code/Zero-code — просто мощные инструменты (чаще всего, когда говорят No-code — подразумевают конструкторы сайтов и мобильных приложений, но это не совсем так, дальше расскажу про свой опыт), но фронтендеров они не заменят.

Я работаю с No-code решением для интеграций между разными сервисами — Zapier и точно могу сказать, что если человек не является разработчиком, то он вряд ли что в этом поймёт и на данный момент — это всё ещё не ориентировано на массовый сегмент. Вам всё равно нужно знать хотя бы азы: http-заголовки, форматы данных, понимать как работает ветвление и так далее, поэтому пока что No-code (подразумеваю всё что угодно кроме конструкторов сайтов) — это инструмент, сделанный программистами для других программистов и не более.

А как вы считаете — заменит ли нас ИИ и No-code или нет? Пишите в комментарии, давайте пообщаемся :)

А вот и ссылка на ролик, который натолкнул меня на эти размышления: https://www.youtube.com/watch?v=tOSvFyH4jEo

Подборка лучших библиотек для Django

#django #подборка

Почти по каждому из популярных инструментов на Github делают подборку самых лучших библиотек/инструментов/дополнений и так далее. Django, разумеется, не стал исключением. В подборке Awesome Django много реально крутых и полезных решений, как то: django-jazzmin (кастомизируемая красивая админ-панель), django-import-export (инструмент для импорта и экспорта данных в различных форматах), django-loginas (кнопка для логина под любым юзером), djoser (отличная библиотека для REST-авторизации) и так далее. Весь список можете увидеть по ссылке ниже.

А какие библиотеки вы чаще всего используете при работе с Django? Делитесь в комментариях, если наберётся много крутых решений, запилю отдельный пост с вашими рекомендациями :)

Ссылка на Awesome Django: https://github.com/wsvincent/awesome-django

Что нужно знать python backend developer для устройства на работу

#django #python #backend

Сегодня по просьбе подруги составил список всех вещей, которые, на мой взгляд, позволят вам устроиться на работу на должность "Python Backend Developer". Это не то, что бы выжимка из вакансий, скорее, мой личный опыт проведения собеседований по требованиям различных работодателей. Если вам есть что добавить, то жду вас в комментариях :)

Фреймворки:

- django (+ django-rest-framework)
- flask/fastapi (+ alembic, sqlalchemy)

Базы данных:

- redis
- postgresql

Основы:

- http-протокол, http-методы
- что такое CORS и как его победить
- linux/unix на уровне понимания работы по ssh
- понимание концепции MVC и принципа работы паттерна репозиторий (паттерн репозиторий больше нужен для работы с SQLAlchemy, потому что она не настолько удобна и полна как django orm, в django orm эту работу выполняют менеджеры моделей)

Что нужно знать в django:

- работа с django ORM: https://docs.djangoproject.com/en/4.0/topics/db/queries/
- менеджеры моделей: https://docs.djangoproject.com/en/4.0/topics/db/managers/
- формы: https://docs.djangoproject.com/en/4.0/ref/forms/ (опционально)
- сигналы: https://docs.djangoproject.com/en/4.0/topics/signals/ (на уровне концепции)
- admin actions: https://docs.djangoproject.com/en/4.0/ref/contrib/admin/actions/ (опционально)
- в целом работа с админкой: https://docs.djangoproject.com/en/4.0/ref/contrib/admin/ (на уровне концепции)
- отправка емейлов: https://docs.djangoproject.com/en/4.0/topics/email/ (опционально)
- сериализаторы, вьюшки и пермишены из drf: https://www.django-rest-framework.org/
- полезные библиотеки: https://github.com/adamchainz/django-cors-headers, https://djoser.readthedocs.io/en/latest/, https://django-constance.readthedocs.io/en/latest/, https://rsinger86.github.io/django-lifecycle/, https://django-jazzmin.readthedocs.io/
- важная проблема с админкой, о которой стоит знать: https://stackoverflow.com/questions/16755312/django-admin-change-form-load-quite-slow

Что нужно знать/уметь в flask/fastapi:

- работа с ORM SQLAlchemy: https://docs.sqlalchemy.org/en/14/intro.html
- работа с alembic: https://alembic.sqlalchemy.org/en/latest/
- работа с TortoiseORM (опционально): https://tortoise.github.io/index.html
- понимание async/await или работа с asyncio

Общие требования:

- работа с очередями задач с помощью Celery/RabbitMQ (на уровне перевода отправки емейлов в фоновом режиме и выполнения каких-то периодических задач)

Инструменты:

- git
- docker, docker-compose (на уровне: могу прочесть конфиг, могу запустить проект, могу написать свой простой конфиг)
- gunicorn/uvicorn (иметь представление о том что это и для чего используется)
- nginx (понимание на уровне директив location и upstream)

🤯 Linux прямо в браузере? Легко!

#браузеры #linux #wasm

Нашёл крутую статью, в которой рассказывается, как удалось запустить linux-консоль прямо в браузере, которая умеет запускать deb-пакеты. По сути, это бессерверный терминал, работающий на HTML5 и WebAssembly.

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

А что вы об этом думаете? Пишите в комментариях, давайте пообщаемся на эту тему :)

​Делаем авторизацию по номеру телефона или email в Django

#django #python #backend

Привет! Это пилотный выпуск моего мини-курсика по REST-авторизации с помощью Django. Сегодня разберём способы расширения пользовательской модели, напишем кастомный бэкенд для аутентификации, подключим djoser, настроим работу с его сигналами и даже отправим ссылку для подтверждения регистрации на пользовательский email.

Смотреть: https://youtu.be/r_eI5FLIPKw

Полезные ссылки:

Ролик про авторизацию и регистрацию: https://www.youtube.com/watch?v=q0u4yRUSDzI
Что нужно знать python backend developer для устройства на работу: https://www.tg-me.com/davidobryakov/1140
Способы расширения кастомной модели пользователя: https://habr.com/ru/post/313764/
Документация djoser: https://djoser.readthedocs.io/
Исходный код из урока: https://github.com/kantegory/django-rest-auth-core/tree/lesson-1

Здравствуйте, CSS Cascade Layers

#css #фронтенд #браузеры

Новый подход к организации каскадности CSS-кода, который появится в ванильном CSS. Думаю, сама проблема, которая этой технологией решается — довольно понятна.

Вот, как CSS Cascade Layers описаны в спецификации:

"Cascade Layers will allow authors to manage their internal cascade logic, without relying entirely on the specificity heuristic or source order." — дословно — "Cascade Layers позволят авторам управлять их внутренней каскадной логикой, не полагаясь только на исходный порядок или эвристику специфичности."

Язык спецификации, конечно, немного запутан, но общая суть читается легко.

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

По сути, теперь не исходный порядок кода определяет последовательность применения стилей, а ВЫ, просто явно указывая, какой из слоёв стоит применять с приоритетом выше над другими.

Ссылка на статью: https://ishadeed.com/article/cascade-layers/#introducing-css-cascade-layers

Как не расстрелять свои ноги с Django, транзакциями и исключениями

#django #python #backend

Крутой информативный ролик от канала "Диджитализируй!" про транзакции и эксепншены в Django, рекомендую к просмотру. Здесь разбирают так же и работу со средним слоем (middleware), что делает ролик ещё более полезным.

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

Сталкивались ли вы с подобными проблемами? Как решали? Делитесь в комментариях :)

Ссылка: https://www.youtube.com/watch?v=u2t1aLYu2QU