Web-технологии

Я вас категорически приветствую. Сегодня я вам расскажу о том, как мне удалось написать наиуникальнейший домашний проект без пап, мам, кредитов, а также без различного рода курсов (юзал только официальные доки, Stackoverflow, Quora, Reddit и мёртвые форумы 2007 года) - Список Дел (он же ToDo List). Казалось бы, что может быть более банальным? С одной стороны, читатель, ты абсолютно прав, но с другой - не всё так однозначно. Но обо всём по порядку...


О себе
Мальчик, 34 годика. В 2010 году окончил ДВАГС по специальности менеджмент, после ВУЗа относительно непродолжительное время работал торговым представителем, чуть позже, в 2011 я решил попробовать себя в веб-разработке, и меня позвали на работу в маленькую, но очень гордую дальневосточную IT-контору, которая как раз и специализировалась на Web (jQuery, Backbone, ExtJS, C#, MSSQL). Для меня на тот момент доступна была лишь базовая вёрстка, ибо знаний и опыта в этой области в те времена у меня особо не было, однако за пару лет я кое-чего поднабрался, хоть в программировании и не преуспел, - отсутствие технического бэкграунда и жизненного опыта мне тогда недоставало, но писать "лапшу" на jQuery, приправленную небольшим количеством логики, мне-таки удавалось (с переменным успехом). Дальшейшее отсутствие, прежде всего, денежных перспектив, а также карьерного роста с учётом моей врождённой тупизны вкупе породили мысль покинуть несостоявшегося IT-гиганта (который, как мне позже стало известно, в скором времени распался) и привели меня на госслужбу - в министерство информационных технологий и связи Х. края в отдел развития систем электронного документооборота, где я работал следующие пару лет, устанавливая ЭЦП и помогая тётенькам исправить то, что "само" ломалось. В то же время со мной случилась секта, йога, ретриты, путешествия... Короче, я уволилися с госслужбы и переехал вместе с родителями на юг нашей необъятной. Потом опять были путешествия, автостоп по забугорью, попутно попадались мелкие проекты по вёрстке на удалёнке. Менялись города, страны, а мозгов так и не прибавилось. Затем по до сих пор мне самому непонятной причине я захотел пойти в море матросом. Сказано - сделано. Учёба на морских курсах, практика и первая жуткая работа на местном флоте за 500 долларов, где вокруг вода, чайки и беспробудные алкаши - влажные мечты весьма значительно расходились с отягощающей реальностью. Чуть позже я переквалифицировался в буфетчики (помощник повара), о чём я уже писал на Пикабу, и пошёл в "большие моря" и на "большие пароходы", денег стало тоже чуть больше. Кстати говоря, работа в море мне нравится до сих пор, но в ней есть одно "НО": если ты стал моряком, то другой жизни у тебя больше не будет, как ни старайся, ну, кроме разве что, если ты капитан (да и то, не всё там так радужно), но это не мой случай, и, как выяснилось, это мне не совсем подходит. Последний контракт я пробыл в море 8 месяцев, совершил, практически кругосветное путешествие (Владивосток, Китай, Корея, Новая Зеландия, Австралия, Таити, Новая Каледония, Ямайка, Панама, США, Англия, Франция, Нидерланды), но выйти на берег мне так ни разу и не удалось из-за запрета портовых властей в связи с пандемией, т.е., я побывал везде и одновременно нигде - какая ирония... Зато я видел все оттенки воды. Ха-ха.
На сегодняшний день на берегу я нахожусь уже год, живу в Калиниграде с девушкой, занимаюсь всякими мелочами и одновременно постигаю ремесло web-разработчика, и для себя я твёрдо решил, что море обойдётся без меня (хотя мне до сих пор звонят с предложениями о работе время от времени), и что я-таки хочу жить и работать на берегу и найти удалённую работу, очень желательно в IT в связи с тем, что айтишка - это хорошо, интересно, при основательном подходе вполне денежно, да и какое-никакое представление об этом у меня уже имеется, хоть актуальных знаний мне сейчас явно недостаёт, но это не проблема - терпение и труд, как говорится... А путешествий и относительно острых ощущений мне уже хватило, и пора бы уже подумать о семье, карьере и других "земных" вещах. Лирики, пожалуй, достаточно, перейдём к делу.


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

Гостю доступен только один список, который хранится локально в браузере (в Local Storage) и, соотвественно, недоступен на других устройствах. Возможности в этом случае ограничены добавлением, редактированием, ранжированием (перемещением) и удалением пунктов списка.

Зарегистрированному пользователю доступно создание неограниченного количества списков, включая сохранение списка гостя, если таковой имелся, а также сохранение всех иных данных в БД. Для каждого списка в данном случае доступен всё тот же функционал (создание, редактирование, ранжирование и удаление пунктов списка), однако есть супер-пупер-друпер-мега-киллер-фича - это шаринг списков между пользователями и возможность одновременного их редактирования в режиме реального времени (посредством WebSocket). "Зачем это нужно?" - спросите вы. А я вам отвечу словами бессмертного лидера культовой группы Bredor Эскобара: "Ну да хер его знает." Хотел поработать с веб-сокетами в рамках учебного проекта и всего делов. Также добавлен стандартный административный раздел, чтобы не править данные напрямую ручками в базе.


Код и демо
Frontend: todo-client
Backend: todo-server
За код сильно прошу не пинать - я не профи. И да, я знаю, что есть кое-какой технический долг, но до этого руки пока не дошли (и никогда не дойдут, естественно).

Demo: https://infseeker-todo.(tk) - надобно скобки убрать. Т.к., к сожалению, Пикабу запрещает публикацию адресов с доменом tk (Tokelau), но я взял этот домен, т.к. он бесплатный и для публикации домашнего проекта вполне подходит.

Тестовые пользователи для тех, кто не хочется регистрироваться:
Пользователь 1:
Имя: TestUserOne
Пароль: TestUserOne123

Пользователь 2:
Имя: TestUserTwo
Пароль: TestUserTwo123


Технологический стек
Backend:
Web-Фреймворк (API): Flask (Python)
База данных: PostgreSQL
Веб-сервер: Gunicort + Nginx
ORM: Flask SQLAlchemy + Flask Marshmallow
Аутентификация: Flask Login
Авторизация: Flask Principal
SMTP-интерфейс: Flask Mail
Планировщик заданий: Flask APScheduler
Защита от ботов: Google reCaptcha v3
Админка: Flask Admin
WebSocket: Flask SocketIO

Frontend:
JS-Фреймворк: Vue 3
Сборщик проекта: Vite
Роутинг: Vue Router
Защита от ботов: Google reCaptcha v3
Валидация форм: Vuelidate
Локализация интерфейса: Vue i18n
Всплывающие уведомления: Vue Toastification
Drag'n'Drop: Vue Draggable Next
Редактор изображений: Vue Advanced Cropper
CSS-фреймворк: Bootstrap 5
CSS-тема: Sneat
WebSocket: SocketIO

Demo VDS:
Дата-центр: Россия, Королёв (Rucloud)
ОС: Ubuntu 18.04
Процессор: 1x2.2ГГц
Память: 0.5Гб
HDD: 10Gb


Процесс разработки
Постараюсь кратенько обозначить основные моменты в процессе планирования, разработки и тестирования проекта.
Общий срок, начиная от идеи составил 3,5 календарных месяца (с середины мая 2022 до начала сентября 2022), однако реальный срок непосредственной разработки составил чуть больше 2-х месяцев.

Общий процесс разработки проекта строился примерно следующим образом:
- Первичное планирование - наброски идеи проекта (Confluence)
- Прототипирование (основные экраны и элементы интерфейса) (Figma)
- Разработка пользовательских сценариев (User Stories) (Confluence)
- Текстовое описание базового функционала (Confluence)
- Постановка и выполнение задач по разработке, тестирование (Jira)

Методологией разработки был выбран недо-Scrum (1-недельные спринты, в спринт задачи в основном попадали напрямую из головы, а не из беклога, оценка сроков выполнения задач была номинальной, а тестирование происходило обычно сразу в продакшене), т.е., по сути, это был обыкновенный Waterfall, приправленный самообманом.
Однако, несмотря на все недочёты, разработка была спланирована, начата, закончена, и проект запущен в условный продакшн на демо-сервере. В планах было уложиться в 2 месяца, но, как это обычно бывает, согласно первому закону Паркинсона, сроки были чуть расширены.

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

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


Что я вспомнил и чему научился
Frontend:
- HTML 5 (структура, семантика)
- CSS 3 (Flex, Grid, Animation и пр.) + Bootstrap 5
- Основы JS, включая фичи ES6+
- Основы Vue 3, построения SPA-приложений, компонентный подход
- Работа с роутами (Vue Router)
- Работа с Local Storage
- Работа с асинхронными запросами и данными
- Реализация взаимодействия клиентов в реальном времени посредством WebSocket (SocketIO)

Backend:
- Основы Python 3
- Flask (REST API + Admin)
- Регистрация пользователей и работа с правами доступа (Flask Login)
- Работа с данными и ORM (Flask SQLAlchemy + Flask Marshmallow)
- Основы SQL, PostgreSQL
- Работа с WebSocket (Flask SocketIO)

Другое:
- Работа с Git, Github, Github Actions (автоматический деплой в продакшн по SSH на пуш)
- Конфигурирование Nginx и Gunicorn (настройка служб, воркеров, редиректа, HTTPS и пр.)
- Работа с Linux, командной строкой
- Работа с инструментами разработки (VSCode + плагины, pgAdmin, Postman, Chrome DevTools)


Что дальше?
Если вопрос касается данного проекта, то его разработка завершена окончательно и бесповоротно, т.е., всё, что я планировал сделать, я сделал. Теперь остаётся подтянуть и собрать воедино все накопленные знания и усиленно искать работу. Понятно, что в наше время это непросто, плюс возраст, плюс отсутствие соответствующего образования делают из меня не самого желанного кандидата даже на позицию джуниора, но, я думаю, как-нибудь прорвёмся, да и проект мой, я считаю, вполне себе годная демка моих знаний и скиллов, пускай это слишком сильно сказано, но, тем не менее. Будем верить в лучшее и двигаться вперёд. Мир!

Благодарю за внимание.

Телеграм - https://t.me/havaevau_webstudy

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

Но действительно ли всё это надо? Разработчик в самом деле обязан проводить всё своё свободное время за написанием кода? А обязан ли разработчик постоянно развиваться?

Токсичное комьюнити

Как мантра, в комьюнити бесконечно повторяется возглас: «Разработчик обязан развиваться!» В самом этом тезисе нет ничего плохого, но пугает то, как часто, громко и жёстко он звучит.

Зайдите на Medium или любой другой ресурс со статьями и вбейте в поиск developer must или developer should — вы получите сотни статей, рассказывающих, что же разработчик обязан знать и делать. Разработчик обязан иметь блог, иметь пет и выучить 10 языков программирования.

Токсичность работодателей

Мало того что окружение капает нам этим развитием на мозги — работодатели готовы усилить это и превратить в полноценный водопад нервозности.

Миру уже не нужны просто разработчики. Миру нужны 10x developers, top talents, rock-stars. Других и нанимать-то грешно. Ты не альфа, а бета? Иди дальше. У тебя нет пет-проектов? Ты недостаточно предан программированию!

Человек спокойно работает себе мидлом, делает мидловские задачи и доволен жизнью? «Что-то засиделся ты в мидлах» — надо заставить его стать сеньором. Хороший сеньор? Дуй в техлиды. Или в тимлиды: раз ты целый сеньор, то хочешь управлять командой. Хочешь ведь, да?

К чему это приводит

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

Под её влиянием разработчики нервно глядят вокруг себя: «А точно ли я достаточно развиваюсь? А не развиваются ли все вокруг быстрее меня?» Люди пытаются учить ещё больше, расти ещё быстрее, сжигая свои ресурсы в этой бессмысленной гонке. Синдром самозванца вспыхивает и берёт разработчика под своё крыло.

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

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

Следующий шаг — выгорание или полноценная депрессия. 83% разработчиков выгорают. Мало того что наша работа и так достаточно нервная и сложная — мы же ещё не даём себе отдыхать, заставляем себя учиться снова и снова, чтобы не отстать от неведомых «всех», меняем работу на нелюбимую, зато более красиво звучащую.

Так обязан разработчик развиваться или нет?

Нет, разработчик не обязан развиваться. Люди вообще друг другу ничего не должны.

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

А вот если вы хотя бы мидл, то такая опция для вас есть. В конце концов, не всем повезло найти своё призвание. Или ваше призвание вам известно, но не может прокормить вас. В этом нет ничего плохого!

Запомните

Первое — вы не обязаны развиваться. И уж тем более вы не обязаны тратить всё своё свободное время на развитие рабочих навыков.

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

Третье — если вы руководитель, перестаньте насильно причинять добро.

Телеграм - https://t.me/havaevau_webstudy

Сodepen-проект «My Stuff» наглядно демонстрирует современные возможности препроцессоров для HTML и CSS, а именно Pug и SCSS. Посмотрите сами, как относительно малым количеством строк, можно реализовать интересный анимированный рисунок:

https://codepen.io/annampawl/pen/yLvoGQY

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

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

Телеграм - https://t.me/havaevau_webstudy

Основы

Бывает, что содержимое элемента не помещается в нем, так как оно слишком велико. И чтобы сделать содержимое прокручиваемым, можно использовать overflow: auto. Благодаря ему полосы прокрутки будут отображаться по умолчанию.

Вы можете кастомизировать скроллбар используя свойства scrollbar с префиксом -webkit в сочетании с обычными свойствами ширины scrollbar-width и цвета scrollbar-color.

Хочу сказать про плагин postcss-scrollbar - он создает свойства скроллбара с префиксом -webkit из стандартных свойств. Это дает возможность получить получить кросс-браузерные стили, например через такой код:

.scroll-container {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: hsl(0 0% 50%);
/* postcss-scrollbar will add the -webkit version automatically! */
}

Темы и scrollbar

На многих сайтах при переключении на темный режим скроллбары "застревают" в белом

Есть отличные свойства - color-scheme, через которые это можно исправить. Но юзать их вам придется не только в ситуациях с полосой прокрутки. Можете почитать об этом более подробно здесь - https://web.dev/color-scheme/

html {
/* defer to OS preference */
color-scheme: dark light;
/* override, assuming the theme toggler sets a data-theme attribute */
&[data-theme=light] { color-scheme: light; }
&[data-theme=dark] { color-scheme: dark; }
}

Как предотвратить смещение верстки

При использовании overflow: auto может возникнуть проблема - смещение верстки. Решить её поможет overflow: overlay - скроллбар никогда не будет занимать место и/или overflow: scroll - полоса прокрутки всегда будет на месте

А с помощью scrollbar-gutter: stable вы можете "сказать" браузеру, чтобы он зарезервировал место для полос прокрутки.

.scroll-container {
overflow: scroll;
@supports (scrollbar-gutter: stable) {
overflow: auto;
scrollbar-gutter: stable;
}
}

На этом все, прокачивайте свои скроллбары, пишите: был ли у вас опыт в их кастомизации?