​Code Review FastAPI. Docker. Общение. Пишем простое приложение на Vue и Vuetify

Привет, это моя первая сходка с подписчиками (на самом деле, что-то близкое к стриму, но у каждого есть возможность говорить). На ней мы пообщались, познакомились, я провёл Code Review бэкенда на FastAPI, разобрался с Docker, написал простенькое приложение на Vue (используя axios и vuetify) для взаимодействия с предоставленным бэкендом.

Все, кто не успел, но хотел попасть на эту сходку — не расстраивайтесь, потому что мне такой формат понравился, мы обязательно это как-нибудь повторим!

P. S. За качество видео заранее извиняюсь, но именно такое оно на выходе из zoom.

Тайпскрипт

Привет! Сегодня у меня небольшой соц. опрос, касательно typescript.

Что вас ждёт на курсе алгоритмов от Яндекс.Практикума

Довольно интересная статья, в которой описывается неприятная ситуация, произошедшая с одним из курсов Яндекс.Практикума. Заставляет задуматься и в очередной раз пересмотреть своё отношение к компании яндекс.

https://habr.com/ru/post/518372/

Библиотека анимаций

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

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

https://animxyz.com/

Обрезка изображений прямо в браузере

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

Есть адаптация плагина под все наиболее часто используемые фреймворки (Vue, Ember, Angular, React).

Статья о плагине: https://blog.logrocket.com/cropping-images-in-the-browser-with-vue-js/
Сайт самого плагина (можно потыкать демку прямо там!): https://fengyuanchen.github.io/cropperjs/

Обмен данными между вкладками

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

Где-то месяцев 7 назад меня немного смутило расширение функционала localStorage с добавлением к нему событий (есть и встроенные), потому что я рассчитывал сделать свой state-manager, используя Storage.prototype, но учитывая изначальный дизайн этой фичи — становится понятно, что она нацелена исключительно на шэринг данных из DOM-хранилища между вкладками, но никак не на то, как работает привычный state-manager.

Если вам интересно изучить способы обмена данными между вкладками в браузере, рекомендую эту статью:
https://nuancesprog.ru/p/10982/

Разбираемся с CSS Scroll Snap

Как-то я имел дело с CSS-свойствами scroll-snap, использовал я их для реализации так называемого «поблочного скролла», но итоговый результат никого не устроил (потому, что эти свойства не совсем для таких кейсов предназначены).

Ахмад Шадид решил рассмотреть эти свойства с позиции более нативного скролла для мобильных устройств, что довольно интересно. В этой статье разбираются все значения для каждого из свойств scroll-snap с примерами и интересными демками (демки рекомендую потыкать с телефона).

Думаю теперь попробовать переосмыслить какой-нибудь элемент вроде того же слайдера (делать слайдер на сайте — далеко не самая лучшая идея, но это тема отдельного поста) с использованием scroll-snap вместо использования js для динамического изменения аргумента у свойства transform: translateX(), которое применяется к каждому из элементов внутри слайдера, создавая таким образом эффект прокрутки.

https://ishadeed.com/article/css-scroll-snap/

​Нативный popup в браузерах?

С того момента, как Edge перешёл на движок Chromium — компания Microsoft старается сделать вклад в развитие веба, повысить удобство для разработчиков. Хотя, возможно, они и раньше много всего интересного предлагали, а я просто упускал. Но сейчас о каждом их действии, которое направлено на внедрение каких-либо новых нативных фич — слышно буквально из каждого утюга.

Понятно, что в данном случае не одни инженеры из Microsoft участвуют в добавлении нового нативного элемента в браузеры, кроме них в этой же лодке — Google и Salesforce. И я считаю, что раз уж и Google здесь, то такого элемента стоит ждать в браузерах нативно (полагаю, что могут и в течение года его принять, если всё пройдёт хорошо). Открытым остаётся вопрос о том, как будут обстоять дела с поддержкой у движка Webkit, на котором работает Safari. Про Gecko, на котором работает Firefox — я молчу, они всегда всё внедряют довольно быстро (тот же flex-gap в Safari до сих пор находится в стадии Technology Preview, а в Firefox и Chromium работает довольно давно).

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

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

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md

​4 недели для новых привычек

Привет!

Опять меня довольно давно не было. Сессия наконец-то закрыта, есть целая неделя каникул (наивно полагать, что работы стало меньше).

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

Вот список вещей, которые я бы хотел изменить в своей жизни за этот месяц:

1. Вернуть ежедневные списки дел

Ещё в самом начале моего повторного активного начала ведения этого канала (вроде, это был 2019) — я показал, что составляю таблицы с ежедневными списками дел и считаю эффективность по количеству выполненного за день. Можно было бы ещё поиграться с приоритетами и весами в расчёте эффективности, но это ведёт к излишнему погружению в не самые важные процессы, на мой взгляд. Поэтому я вернулся к простому и минималистичному приложению для ведения todo-листов — Teuxdeux. Возобновил подписку.

Основная цель ежедневных списков дел — лучшая организованность.

2. Отказаться от доставок продуктов

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

3. Отказаться от такси без реальной необходимости

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

4. Исправить режим

Тут всё просто и логично, этот пункт вытекает из первого. Если я буду иметь хорошо спланированный день, то у меня не будет проблем с тем, чтобы вовремя лечь и вовремя встать. А учитывая, что я хочу к 8 утра уже быть работоспособным — нужно ложиться в 22:00 и вставать в 6:00. Тогда я и восемь часов просплю и с утра будет больше времени, чтобы прийти в себя и привести в порядок то, что происходит вокруг. Сюда же входит и то, что на протяжении последнего месяца с 21 часа дисплей моего смартфона окрашивает всё в чб, а из доступных приложений остаются только те, которые могут мне понадобиться в любое время дня и суток (мессенджеры и соц. сети сюда не входят, разумеется). Заканчивается этот запрет в 7 утра, чтобы первый час после пробуждения я проводил не с телефоном в обнимку.

P. S. по поводу видео — возможно, запишу завтра новый урок по курсу, который будет больше направлен на бэкенд и исправление ошибок прошлого

Автоматическое тестирование фронтенда прямо в браузере

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

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

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

Почитать подробнее можно здесь: https://habr.com/ru/post/539156/

Зачем нужен vue?

Отличное видео про основы, которое поможет вам сформировать понимание того, как работают современные фреймоврки.

https://www.youtube.com/watch?v=4xyb_tA-uw0

Соотношение сторон в CSS

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

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

Источник: https://web.dev/aspect-ratio/

​Итоги февраля

Привет, хочу признаться сразу — я не справился со своим же челленджем (кроме доставки продуктов), о котором писал 01.02. Всё так же много катался на такси, не смог найти время, чтобы записать хотя бы один новый ролик, а с подъёмом в 6 — смог справляться всего недели полторы, потом как-то иссякла мотивация.

Почему так? Всё просто: мои любимые переработки! Я ведь так люблю работать по ночам и выходным — вы себе даже не представляете (разумеется, это сарказм).

Куда я опять пропадал? Честно признаюсь, я очень сильно выгорел за январь и потерял любой стимул работать в той компании, где я за полгода смог дойти до руководящей должности и заиметь целую команду в подчинение. Потерял я его из-за руководства, которое, очевидно — справлялось плохо. Подробнее об этом я расскажу в подкасте. Отныне я самозанятый, но свою первую работу в IT — я не бросал и пока что не собираюсь (хочется, как минимум, написать диплом).

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

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

К съёмке роликов на YouTube хотел приступить сегодня, но столкнулся с тем, что немного охрип из-за того, что приболел. Как только голос нормализуется — видео сразу же начнут появляться. Постараюсь публиковать их дважды в неделю.

***

Резюме. Чего я хочу добиться в марте:

1. Завтра я поделюсь с вами ссылкой на мой публичный дневник, в котором будут только детали и результаты моей работы в рамках каждого дня
2. Бой такси! Теперь я изучаю общественный наземный транспорт (смешно, но за все 4 года жизни в СПб я так на нём особо и не покатался)
3. Режим 6-22 (с 6 до 7 утра доступа к телефону и интернету нет, так же как и с 21 до 22)
4. 2 видео в неделю
5. Бой всем хвостам по учёбе!

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

Спасибо, что остаётесь со мной! На YouTube совсем скоро целых 500 подписчиков!

Социальный опрос

Интересно узнать, что вы думаете о ClubHouse, голосуйте в следующем посте!

пытаюсь всё успеть

Как и обещал — завёл отдельный канал (https://www.tg-me.com/kantetry/3). Не призываю вас обязательно подписываться, но буду рад поддержке.

​Как работают очереди тасок в JS

Как вы знаете, в JS есть такая штука как Event Loop — по сути — цикл, который ходит по событиям и обрабатывает их. Но одного этого понимания явно недостаточно. У каждого из событий, которое он должен обработать есть определённый приоритет, например: Promise выполнится первее setTimeout, а происходит это потому, что setTimeout — макротаска, а Promise — микротаска. И у них разные очереди выполнения. Кроме макро- и микротасок есть общая очередь, которая обрабатывается первостепенно (обычный синхронный код).

Микротаски — исходят исключительно из нашего кода (в основном, их генерируют как раз промисы). Макротаски — это события, которые может генерировать и пользовтель (click, submit, mouseleave и так далее).

В чём между ними разница для Event Loop?

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

Когда и что нам следует использовать?

Микротаски стоит использовать, когда вы хотите исполнить асинхронный код синхронным путём (то есть async/await, Promise). Во всех остальных случаях — макротаски (разумеется, когда это необходимо).

На картинке наиболее понятная иллюстрация работы Event Loop.


Что почитать?

Видео по теме: https://youtu.be/8eHInw9_U8k

Довольно объёмная статья: https://javascript.info/event-loop

Обсуждение на stackoverflow: https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context

Спецификация whatwg: https://html.spec.whatwg.org/#event-loop-processing-model

Вопрос про setTimeout vs Promise: https://stackoverflow.com/questions/38752620/promise-vs-settimeout

Lazy-load роуты во Vue

Зачем нужны lazy-load роуты?

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

Когда нужно начинать это использовать?

Понятно, что если у вас маленькое приложение, в котором до 5-7 (цифра как пример, это не ориентир) представлений — вам рано задумываться о подобных вещах. Но если вы чётко понимаете, что есть какой-то раздел сайта, который не является востребованным для пользователя (например, настройки, в которые он не слишком часто заходит) — стоит попробовать такой образ организации вашего бандла.


Что почитать?

Официальная документация Vue router по этой теме: https://router.vuejs.org/guide/advanced/lazy-loading.html

Небольшая, но емкая статья про организацию биения по чанкам с помощью указания специальных динамических комментариев для Webpack: https://css-tricks.com/lazy-load-routes-in-vue-with-webpack-dynamic-comments/

HTML через вебсокеты

Очень интересная статья про трудности привычного всем SPA-подхода, стоимость разработки и нерешенные этим подходом проблемы. Что предлагает автор? Общаться с сервером по вебсокетам, отбросив таким образом все проблемы с реактивностью и получать сразу преподготовленный HTML по этим самым вебсокетам, возложив на JS единственную обязанность: отрисовать изменения. Крайне рекомендую ознакомиться со статьёй, потому что она заставляет задуматься о том, как стоило бы решать различные проблемы SPA-подхода (те же React Server Components не просто так появились ведь).

Ссылочка: https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/