davidobryakov | Unsorted

Telegram-канал davidobryakov - @davidobryakov

629

Немного преподаю, немного управляю. Автор — @kantegory Github — https://github.com/kantegory Дзен — https://dzen.ru/dobryakov Boosty — https://boosty.to/dobryakov YouTube — https://youtube.com/@dobryakov Блог — https://blog.kantegory.me

Subscribe to a channel

@davidobryakov

👩‍💻 Принцип DI / IoC — Бэкенд-разработка на Node.JS #6

#solid #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео разбираем принцип dependency injection и его использование на практике в express.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Пример из видео: https://github.com/inversify/inversify-express-example
Презентация: https://docs.google.com/presentation/d/1yXC0oczjMlvYeFOKedzOLcct_C1FoLJl1kLXeXAu5DE/edit?usp=sharing
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

👩‍💻 Основы работы с TypeScript, работа Sequelize Typescript — Бэкенд-разработка на Node.JS #4

#typescript #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео продолжаем говорить об основах TypeScript, разбираем связку Sequelize-Typescript с Express.JS.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Пример из видео: https://github.com/kantegory/express-sequelize-boilerplate
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

👩‍💻 Основы работы с Express, Sequelize — Бэкенд-разработка на Node.JS #2

#express #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео будем разбираться с основами Express, Sequelize. Разберём пример простого приложения.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Пример простого express-приложения: https://github.com/kantegory/mentoring/tree/master/14_express_example
Пример с express generator: https://github.com/kantegory/mentoring/tree/master/22_express_generator_example
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

👩‍💻 React, микрофронтенды и shared ui — как решали проблему общих компонентов между микросервисами в альфа-банке

#react #frontend #ui

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

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

А как бы вы решили такую проблему? Пишите в комментариях👇

📖 Источник:

Что такое Shared UI, как он нам помог и причём тут микросервисы — https://habr.com/ru/company/alfa/blog/701720/

Читать полностью…

@davidobryakov

😠 Частые косяки в современных интерфейсах

#ux #frontend #дизайн

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

1) приложения, в которых нельзя отключить рекламные пуши;
2) сброс выбранного города или неверное его отображение;
3) выбор дат без возможности ввода с клавиатуры;
4) буквенная клавиатура для телефонных номеров и неуместная автокоррекция ввода;
5) наш сайт использует куки, разрешите нам использовать куки, куки-куки-куки...

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

📖 Источник:

Это ужасно бесит — подборка косяков, постоянно встречающихся от сайта к сайту, от приложения к приложению — https://habr.com/ru/post/709494/

А вас бесит что-то из этих пунктов? Голосуйте в опросе👇

Читать полностью…

@davidobryakov

🔍 Как работает язык программирования?

#база #разработка #новичкам

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

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

Если говорить кратко, то весь пайплайн исполнения программы делится на следующие шаги:

1) считывание исходного кода компилятором;
2) лексический анализ (выделение токенов: операторов, переменных итд);
3) синтаксический анализ (он же парсинг; на этом этапе считывается массив токенов, по которому строится абстрактное синтаксическое дерево)
4) интерпретация (если язык является интерпретируемым)
5) компиляция в машинный код;
6) исполнение программы.

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

📖 Источники:

1) Как работает язык программирования? — https://youtube.com/watch?v=1kMqMfsWvkk
2) Создаем свой ЯЗЫК ПРОГРАММИРОВАНИЯ. Лексер, Парсер, Абстрактное синтаксическое дерево (AST) — https://youtube.com/watch?v=Ezt3vBok5_s

Читать полностью…

@davidobryakov

🖱 Атрибут cursor

#браузеры #frontend #css

Продолжаю небольшой цикл про повышения удобства пользовательского опыта. Сегодня поговорим про CSS-свойство cursor.

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

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

- wait/progress (контент загружается);
- not allowed (действие совершить нельзя);
- help (выводит знак вопроса);
- grab и grabbing (в основном, нужны чтобы показать draggable элементы);
- zoom in / zoom out (приближение / отдаление, соответственно).

Про остальные типы вы можете почитать в доке: https://doka.guide/css/cursor/

Читать полностью…

@davidobryakov

📝 Настраиваем автокомплит правильно

#frontend #браузеры #автозаполнение

Интересная статья от яндекса про правильную настройку автокомплита на фронтенде. Довольно глубоко рассматривается внутренне устройство автокомплита и какие действия предпринимает браузер, чтобы сопоставить поля (по атрибуту id, name, placeholder и label) и сохранённые значения пользователя.

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

Читать статью: https://habr.com/ru/company/yandex/blog/686668/

Читать полностью…

@davidobryakov

📹 Настраиваем JSON-сервер с авторизацией на примере приложения для заметок

Привет! Это запись моего вебинара, в рамках курса по фронтенд-разработке в ИТМО, по настройке JSON-сервера с авторизацией на примере приложения для заметок.

Смотреть: https://youtu.be/_yvw_tAUGZw
Прошлый урок: https://youtu.be/onoRgoj0Xus
Плейлист «Фронтенд-разработка 2022»: https://www.youtube.com/playlist?list=PLAhg4XYCffEmD3I5HD3YuvBPhG2KR4OBj

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

Пример из видео: https://github.com/kantegory/mentoring/tree/master/18_bootstrap_api_example
Документация JSON-server: https://github.com/typicode/json-server
Документация JSON-server-auth: https://www.npmjs.com/package/json-server-auth
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2022
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

Как работают селекторы в CSS? Разбираемся на примерах

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

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

Ссылка на презентацию: https://docs.google.com/presentation/d/12XGe0u1SJu7PkGuYCl_V_sIpYhhs3iZ2OYAdd07Or3o/edit?usp=sharing
Раздел по CSS в доке: https://doka.guide/css/
Комбинированные селекторы в доке: https://doka.guide/css/combined-selectors/
Раздел по CSS на MDN: https://developer.mozilla.org/ru/docs/Web/CSS/Reference
Раздел по селекторам на MDN: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors
Лекция в текстовом формате: https://blog.kantegory.me/frontend-css-basics

Читать полностью…

@davidobryakov

🔍 CSS, который скрывает Figma

#фронтенд #css #дизайн

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

В тексте разбирается по кусочкам из чего строится UI приложения Figma и там довольно много особенностей, за которые легко зацепиться глазом. К примеру, то, как они придумали сложить несколько разных гридовых обёрток для достижения желаемого результата.

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

Что могу добавить от себя: я явно делал бы это иначе (скорее всего, через bootstrap), но не потому, что это единственный верный путь, а потому, что для меня такой путь более удобен и понятен в текущий момент моего профессионального развития.

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

https://ishadeed.com/article/figma-css/

***

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

Читать полностью…

@davidobryakov

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

#django #python #backend

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

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

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

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

Читать полностью…

@davidobryakov

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

#django #python #backend

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

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

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

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

Читать полностью…

@davidobryakov

Что нужно знать 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)

Читать полностью…

@davidobryakov

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

Читать полностью…

@davidobryakov

👩‍💻 Документация API, swagger, postman — Бэкенд-разработка на Node.JS #5

#документация #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео разбираем средства для документации и тестирования API: swagger, postman.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Пример из видео: https://github.com/kantegory/mentoring/tree/master/16_express_swagger_example
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

👩‍💻 Основы работы с TypeScript — Бэкенд-разработка на Node.JS #3

#typescript #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео поговорим об актуальности использования TypeScript, его отличиях от JavaScript, обсудим систему типов.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Пример из видео: https://github.com/kantegory/mentoring/tree/master/15_express_typescript_example
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

👩‍💻 О курсе — Бэкенд-разработка на Node.JS #1

#nodejs #backend #вебинар

Привет! Это запись моего вебинара, в рамках курса по бэкенд-разработке в ИТМО. В этом видео обсудим то, что будет ожидать вас в этом курсе, поговорим про технологии, которые предстоит изучить, рассмотрим темы и разделы.

▶️ Смотреть на Дзен | Смотреть на YouTube

Плейлист на Дзен | Плейлист на YouTube

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

Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Backend-2023
Ютуб: dobryakov" rel="nofollow">https://youtube.com/@dobryakov
Блог: https://blog.kantegory.me
Дзен: https://dzen.ru/dobryakov
Бусти: https://boosty.to/dobryakov

Читать полностью…

@davidobryakov

⛔️ Прекращайте оправдываться

#работа #культура #новичкам

Интересный пост с хабра, в котором автор делится историей про одного из своих сотрудников, который постоянно оправдывался, вместо того, чтобы решить проблему. Года три назад, я услышал фразу, которая и сформировала моё окончательное отношение к работе в IT: «программист — это человек, который умеет решать проблемы». По сути, в этом посте, автор говорит о том же самом, сдвигая акцент в сторону того, что разработчики должны перестать оправдываться и пытаться снять с себя ответственность. В целом, я согласен с ним от и до, поскольку и сам бывал в ситуациях, когда с виду, подающий надежды начинающий специалист, не может справиться с элементарной задачей и пытается сделать кого-то виноватым, не признавая своих ошибок. Мы пытаемся с этим работать и делать своих сотрудников более ответственными, но получается не всегда.

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

📖 Источник:

Прекращайте оправдываться — https://habr.com/ru/post/709516/

А вы что думаете? Сталкивались ли с подобными ситуациями? Или, может, замечали такое за собой? Делитесь в комментариях 👇

Читать полностью…

@davidobryakov

👩‍💻 Vuetify — всё?

#vue #vuetify #фронтенд

Недавно сдувал пыль с некогда моего любимого UI-фреймворка и обнаружил, что Vuetify так и не смогли до конца перевести на Vue3, который вышел аж в 2020м году. И, как оказалось, заметил это не я один... Принёс вам статейку, в которой разбирается вся история некогда одного из наиболее успешных UI-фреймворков для Vue.

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

А вы что используете? Пользовались ли Vuetify? Если да, то смогли ли найти ему замену?

📖 Источник:

Взлет и падение Vuetify. Некролог — https://habr.com/ru/post/709492/

Читать полностью…

@davidobryakov

📱 Кроссплатформенная разработка. Всё плохо?

#vue #nativescript #mobile

Последние несколько месяцев мне довелось довольно тесно познакомиться с NativeScript (писал я, конечно, на Vue).

Впечатления остались смешанными. Честно признаюсь, что кроме NativeScript удалось раньше попробовать только React Native и не сказать, что мне было приятно. Слышал и интересовался Flutter, но руки так до него и не дошли. Если вдруг у вас есть опыт разработки на Flutter / React Native / NativeScript / etc. — поделитесь в комментариях, будет интересно почитать.

Сразу скажу, что моё мнение довольно субъективно, поскольку я вообще не мобильный разработчик и мои знания не уходят дальше приложения для просмотра погоды на Kotlin с корутинами и кешированием. На swift я немножко писал, но поскольку макбука у меня раньше не было — полноценным этот опыт тоже назвать нельзя.

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

Но я как фанат Vue решил, что хочу попробовать NativeScript и каково было моё разочарование, когда я начал в это погружаться, увидев насколько из рук вон плохо там работает CSS, а невозможность использования ряда привычных JS-библиотек меня вконец добила. С другой стороны — это интересный челлендж, который заставляет мозги, привыкшие к ламповому JS-зоопарку, шевелиться и пытаться найти решения в условиях жёстких ограничений. Как никогда ранее, я ощутил насколько творческим может быть программирование, если тебя оторвали от того, что есть в современных браузерах.

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

Я бы точно не советовал новичкам NativeScript, да и кросстплатформу, в целом. Это очень нелегко, а когда у вас нет достаточного опыта, но есть желание «войти в IT» — это может напрочь погасить всю вашу мотивацию. Когда хотя бы годика два побарахтаетесь в JS-зоопарке и будете готовы читать исходники инструментов, потому что документация не очень подробная — тогда и можете лезть в NativeScript.

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

Читать полностью…

@davidobryakov

⌨️ Учимся правильно отображать клавиатуру

#frontend #браузеры #mobile

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

Как улучшить пользовательский опыт? Продолжаем небольшой цикл статей про браузеры и удобства (вчерашний пост был про автокомплит).

Сегодня рекомендую вам ознакомиться со статьёй на medium, в которой рассказывается про влияние атрибута type у элемента input на то, какая клавиатура будет показываться пользователю с мобильного устройства.

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

Используйте атрибут type правильно, чтобы сделать чью-то жизнь немного удобнее и будет вам счастье!

Читать статью: https://medium.com/front-end-chummies/control-types-including-virtual-keyboards-associated-with-14-html-input-types-4a0b216d68c6

Читать полностью…

@davidobryakov

👩‍💻 Python 3.11 — что нового?

#python

На канале «Диджитализируй!» вышло видео про релиз Python 3.11

Собрал для вас краткую выжимку по обновлению.

Улучшения по оптимизации:

- ⚡️ скорость работы увеличилась на 25% в реализации CPython

- 👩‍💻 адаптивная оптимизация байт-кода

Улучшения по DX (developer experience):

- 📝 улучшенный traceback

- ✍️ заметки для исключений

- 🔢 группировка исключений и асинхронных задач

- 👩‍💻 добавлены TypedDict, LiteralString и Self в type hints

- 📁 добавлена библиотека для работы с TOML-файлами

***

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

Официальные release notes: https://docs.python.org/3.11/whatsnew/3.11.html
Видео с канала «Диджитализируй!»: https://www.youtube.com/watch?v=hF_hul5k07A

Читать полностью…

@davidobryakov

Друзья, видео теперь будут дублироваться на дзен. Это видео уже доступно там: https://dzen.ru/video/watch/6339c9261f4fed281d923ef8

И теперь меня можно поддержать на boosty. Гору уникального контента пока обещать не буду, но что-то грандиозное уже готовится :)

Читать полностью…

@davidobryakov

🪤 Ты побеждаешь, Tailwind?

#фронтенд #bootstrap #tailwind

Сидел читал статейки на хабре и наткнулся на статью-сравнение Tailwind и Bootstrap за авторством Томаса Димнета. В которой говорилось о том, что Bootstrap морально устарел (а Bootstrap 5 и вовсе не получился, отказ от jQuery был ошибкой и всё такое), внутри самого фреймворка есть путаница между компонентами и утилитами, а документация и вовсе сложная и непонятная. Tailwind же — напротив весь такой модный, прогрессивный и с хорошим DX.

Сразу расставлю точки над И и признаюсь, что с Tailwind я знаком поскольку постольку и в проектах его не использую, из чего моё мнение может быть совсем не объективным, но те минусы Bootstrap5, которые приводит автор оригинала статьи кажутся мне абсурдными:

- путаница между компонентами и утилитами (разбирается на примере компонент для заголовков h1-h6 и утилитах для установки размера текста);
- сложность настройки через SASS (в документации мало объяснений о том, как правильно кастомизировать Bootstrap);
- все сайты на Bootstrap выглядят одинаково и теряют свою идентичность (аргумент в том, что бутстраповские компоненты плохо кастомизируются, но я, как человек написавший штук 50 сайтов на bootstrap могу с уверенностью заявить, что это не так. Разумеется, вам потребуется время, чтобы прописать кастомные стили, но что в этом плохого? Нет ни одного UI фреймворка, который не нужно было бы подгонять под UI вашего дизайнера, если вы не ограничиваете его набором компонентов заранее);
- кастомизировать шрифты в Bootstrap — это сложно (и это тоже не является правдой, поскольку замена шрифтов — это подключение одного CSS-файлика, причём довольно небольшого).

Есть и ответ от deathshadow">Джейсона Найта на статью Димнета, в котором он разбирает почему и bootcrap и failwind (именно так он их называет в своей статье) одинаково плохи, а примеры на vanilla, приведённые Димнетом — безграмотны. Крайне рекомендую прочитать.


Как вам эта дискуссия? Кто для вас прав? И что вам нравится больше — bootcrap или failwind? Пишите в комментарии 👇

***

Ссылки:

Взлет и падение Bootsrap (перевод на хабре): https://habr.com/ru/company/ispmanager/blog/686080/
Взлет и падение Bootstrap (оригинал): https://betterprogramming.pub/the-rise-and-fall-of-bootstrap-68d4cd703666
Failwind: путь для невежственных: https://medium.com/codex/the-fail-of-tailwind-the-go-to-for-the-ignorant-7b0aaea405bb

Читать полностью…

@davidobryakov

🌐 Свой VPN — что может быть лучше в это непростое время?

А сделать его можно буквально за 5-10 минут и довольно дёшево. Рекомендую освежить в памяти мою старую статейку по поводу настройки собственного VPN:

https://blog.kantegory.me/vpn

Читать полностью…

@davidobryakov

Здравствуйте, 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

Читать полностью…

@davidobryakov

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

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

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

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

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

Читать полностью…

@davidobryakov

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

#django #подборка

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

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

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

Читать полностью…

@davidobryakov

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

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

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

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

Читать полностью…
Subscribe to a channel