Сообщество - Web-технологии
Добавить пост

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

336 постов 5 152 подписчика

Популярные теги в сообществе:

728

CSS и авторские права

Делая сайт на тильде приспичило мне выровнять текст по ширине. Так как стандартным функционалом это не предусмотрено был добавлен код:

CSS и авторские права Авторские права, Tilda, CSS

В интернете полно сайтов, которые продают много подобных "модов". За код который выравнивает текст по ширине просят на одном сайте 700 деревянных.

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

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

Сегодня ютуб блочит видео за нарушение авторских прав

CSS и авторские права Авторские права, Tilda, CSS

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

Код текстом для лл

<style>
.danjus {
text-align: justify;
text-indent: 20px;
}
</style>
<script>
window.onload = function () {
const items = document.querySelectorAll(".tn-atom");
items.forEach((el) => {
if (el.innerHTML.length > 50) {
el.classList.add("danjus");
}
});
};
</script>

Показать полностью 2
16

Нужна подработка. Есть чо?

Уважаемые! Нужна подработка. Пока машинка в ремонте и таксовать не могу. А могу взять вашу рутину для низкоквалифицированных падаванов.
Могу в разные панельки вирт хостинга, вордпресс, вукоммерс, поправить html/css по конкретным запросам, муторно и долго заполнять карточки товаров и т.п. Гуглю норм, решения нахожу.

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

Не уверен, туда ли я зашёл, если чо снесите.
тг @cccapwe11

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

26

Адаптивная вёрстка: что это, а главное зачем

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

Если вы забьете болт на адаптивность, то будьте готовы к тому, что ваш сайт будет открываться криво у какого-нибудь Антона из Пензы с телефоном 5-летней давности с не самым актуальным разрешением.


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

Наш уютный канал в телеграме

Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

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



Частичное решение: делаем всё гибким


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

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

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


- Hiding and Revealing Portions of Images;

- Creating Sliding Composite Images;

- Foreground Images That Scale With the Layout.


На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.


<h1 id="logo"> 
<a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/>
</a> </h1>

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).



Гибкие изображения


Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:


img {max-width: 100%;}

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.


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



Ещё один способ: отзывчивые изображения


Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.


Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:


<script src="picturefill.js"></script>

Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.


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


<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">

Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.

Для более явного контроля над изображениями существует элемент picture.

Интересная фича для iPhone


В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:

Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

Для решения данной проблемы используется тег meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы


Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.


Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.


style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Структурные элементы */
#wrapper{
width: 80%; 
margin: 0 auto; 
background: #fff; 
padding: 20px;
}
#content{
width: 54%; 
float: left; 
margin-right: 3%;
}
#sidebar-left{
width: 20%; 
float: left; 
margin-right: 3%;
}
#sidebar-right{
width: 20%; 
float: left;
}

mobile.css (дочерний):

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

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


О других особенностях адаптивной верстки в CSS в статье о нетривиальных моментах разработки фронтэнда на CSS.



Адаптивная вёрстка с помощью медиазапросов CSS3


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


Пример:


@Media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
Медиазапрос заработает только когда min-width будет больше или равна 600 px.


@Media screen and (max-width: 600px) {

.aClassforSmallScreens {
clear: both; font-size: 1.3em;
}
}

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.


В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:


@Media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}

@Media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}

@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}

Также значения медиазапросов можно комбинировать:

@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>



JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();

// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>


Низкий поклон всем тем, кто дочитал. Вы герои

Показать полностью 5
20

Очередной мемчанский


Telegram

Очередной мемчанский Кросспостинг, Pikabu Publish Bot, Мемы, IT
16

Введение в бэкенд для чайников

Хочу сделать серию уроков по серверной разработке для новичков. Вот первый ролик

22

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков

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


Канал с вкусностями для новичков во front-end

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

1. Object.entries

Большинство разработчиков используют метод Object.keys для итерации по объекту. Этот метод возвращает только массив ключей объекта, а не значения. Можно использовать Object.entries для получения как ключа, так и значения.

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

Чтобы выполнить итерацию по объекту, можем сделать следующее:

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

Оба подхода, описанные выше, возвращают один и тот же результат, но Object.entries позволяет легко получить пару ключ-значение.



2. Метод replaceAll

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

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

Но в ES12 в String.prototype добавлен новый метод replaceAll, который заменяет все вхождения строки другим строковым значением:

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

3. Числовой разделитель


Можно использовать символ подчеркивания «_» в качестве числового разделителя, для упрощения подсчета количества нулей в числе.

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

Разделитель также можно использовать с числами BigInt, как в следующем примере:

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

Это делает число более читабельным.



4. document.designMode


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

4 крутые функции JavaScript, о которых не знает большинство junior разработчиков Программирование, IT, Разработка, Javascript, Web, Web-программирование, Веб-разработка, Длиннопост

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



Заключение


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

Показать полностью 7
13

Анимированные кнопки выравнивания на CSS

Еще больше таких решений для новичков во front-end

Анимированные кнопки выравнивания на CSS Программирование, IT, Web-программирование, Веб-дизайн, Веб-разработка, CSS, Гифка

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


https://codepen.io/jkantner/pen/xxWZeLz

41

Как я свой первый учебный Fullstack-проект писал

Как я свой первый учебный Fullstack-проект писал Программирование, Python, Javascript, Nginx, Flask, Vue, IT, Linux, Разработка, Веб-разработка, Самообразование, Длиннопост

Я вас категорически приветствую. Сегодня я вам расскажу о том, как мне удалось написать наиуникальнейший домашний проект без пап, мам, кредитов, а также без различного рода курсов (юзал только официальные доки, 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)


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

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

Показать полностью 1
Отличная работа, все прочитано!