@progway

media запросы

2020-09-24T19:03:00.449Z

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

Как это работает?

Как же работает медиа запрос? - По факту, он просто изменяет указанные css-стили в зависимости от указанного свойства.

Почему нельзя использовать js функции для масштабирования блоков? - медиа запрос работает мгновенно, в то время как js сначала подгрузить оригинал и только потом его видоизменит

Синтаксис

Медиа запросы прописываются в css файле и имеют довольно логичный синтаксис

@media (свойство) {
    .классы блоков для изменения
}

В целом, все интуитивно понятно. Ключевое слово @madia для объявления запроса, в скобах указывается свойство в зависимости от которого будут меняться стили( в данной статьей мы рассмотрим вариант бального масштабирования, поэтому будем использовать свойство max-width: n px )

Ну а в теле запроса указываются стили для определенных html-объектов.

Практика

Теперь предлагаю использовать наши знания на практике, сверстав адаптивное меню

P.s. код использован из моей последней работы

Разбираться верстку и стили я не вижу смысла поэтому просто покажу исходный код

html:

<header>
    <div class="container">
        <nav class="menu">
            <ul>
                <li><div class="logo"><a href="/">G3</a></div></li>
                <li class="menuelems"><a href="/news">Новости</a></li>
                <li class="menuelems"><a href="http://">Информация</a></li>
                <li class="menuelems"><a href="http://">Учительская</a></li>
                <li class="menuelems"><a href="http://">Наша жизнь</a></li>
                <li class="menuelems"><a href="http://">Стажировка</a></li>
                <li class="menuelems"><a href="http://">Медиацентр</a></li>
                <li class="menuelems"><a href="http://">Файлы</a></li>
                <li class="menuelems"><a href="http://">Прочее</a></li>
                <li class="hiddenmenu"><a href="http://"><img src="/static/img/shortmenu.png" alt=""></a></li>
            </ul>
       </nav>
   </div>
</header>

Вы можете заметить тут li-элемент с классом hiddenmenu, запомните его он пригодится нам в дальнейшей работе

css:

header {
    background: rgb(00, 00, 00);
}
ul {
    display: flex;
    list-style-type: none;
}
.container {
    max-width: 1500px;    
    margin: auto 10%;    
    padding-top: 1.5%;    
    padding-bottom: 1.5%;
.menu ul li {
    list-style-type: none;    
    font-size: 17px;    
    width: 15%;    
    padding-right: 1.5%;    
    padding-left: 1.5%;    
    color: white;    
    text-align: center;    
    line-height: 100%;
}
.menu ul li a {
    line-height: none;    
    display: inline-block;    
    vertical-align: middle;    
    text-decoration: none;
}
.menuelems a {
    color: white;    
    font-family: 'Pacifico', serif;
}
.logo {
    font-size: 30px;    
    font-family: 'Mrs Sheppards', cursive;
}
.logo a {
    color: rgb(105,136,184);
}
.hiddenmenu {
    display: none;    
    float: right;
}
.hiddenmenu a {
    display: inline-block;
    width: 100%;
}
.hiddenmenu a img {
    width: 60%;
}

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

И так, что тут следует отметить:

Во-первых, элемент с классом hiddenmenu. В обычно состоянии этого элемента не видно благодаря заданному параметру display: none
Во-вторых, для удобства я задал всем элементам меню один стиль, чтобы у них не возникало трудностей с исчезновением

Теперь начинаем творить волшебство, объявляем media-запрос с условием max-width: 420px. Делать будем адаптив под мобильные устройства. То есть, если экран пользователя меньше или равен 420px( а это чуть больше чем ширина 8 plus ) то стили указанные в теле запроса будут применены.

@media (max-width: 420px ) {
   .menuelems {
       display: none;    
   }    
   .hiddenmenu {
       display: block;        
       margin-left: 55%;    
   }    
   .container {
       padding-top: 3%;        
       margin: auto;    
   }    
   .logo {        
       line-height: 100%;    
   }
}

Примерно так выглядит мой media-запрос, самое главное что здесь происходит - это изменение значения display у menuelems и у hiddenmenu. Как вы помните изначально hiddenmenu у нас был скрыт, а menuelems обладал свойством flex. Сейчас же мы немного изменили ситуацию и скрыли от пользователя menuelems, а вместо него проявили hiddenmenu

ВАЖНО

Медиа-запросы нужно всегда писать в конце css-файла.

Надеюсь я все понятно объяснил, а вот не посредственно результат нашего кода:

Стандартная версия

Адаптивная версия

Если вам был интересен и полезен урок, то дайте знать фит-бэком)

Удачи, программисты!

Weekly log #2

2020-09-20T12:51:49.183Z

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

И так, что я сделал за эти 2 недели, если честно почти нихуя :)

Я сверстал один лендинг для портфолио
Понял, что отзываться на заказы пока что смысла нет. Во-первых, я пока что реально не готов. А во-вторых нужно хотя бы 10 - 15 работ в портфолио, без этого никак
Начал разбираться с медиа-запросами, так как без адаптива в этом мире никуда. В целом все легко и просто, думаю запилить вам статейку о медиа-запросах с небольшой практической частью.
Отобрал несколько ВУЗов, сейчас буду следить за их олимпиадами и принимать в них участие.

На данный момент я пишу сайт для школы( это работа для портфолио если что ), который планирую доделать до конца. То есть не только верстку и анимации, но и бэкенд завести. Все таки про node.js забывать нельзя его тоже нужно тренить.

Хочу еще раз поставить себе цели на сентябрь-октябрь. Как по-мне с ними лучше понимаешь что именно нужно делать.

Заполнить портфолио. Хотя бы создать 10 разнообразных работ, если вам нужен какой-то сайт. То пишите в лс сделаю все максимально дешево, при условии что разрешите разместить работу в портфолио
Выучить какой-то фронтенд фреймворк до среднего уровня. Скорее всего это будет React
Делать минимум одну статью в две недели помимо отчетов.
Постараться добить 1000 подписчиков в телеграмме

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

На этом все,
Удачи программисты!

Weekly log #1

2020-09-06T19:18:14.932Z

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

Отчет

Сейчас активно занимаюсь фрилансом. Верстаю работы для портфолио и отвечаю на все заявки, которые смогу осилить, пока что никто не откликнулся НО ВСЕ ВПЕРЕДИ.
На этой неделе сверстал два лендинга. Один на тему балльных танцев, а второй для магазина автозапчастей. В целом получилось неплохо, но есть куда расти
Начал активно изучать тему вузов. Даже екселевский файл для этого создал, пока что топ три в списке желаний это СПБГу, ИТМО и Питерский политех. Да-да, я хочу свалить в питер
Про школу упомянул, пока что ничего нового, но год обещает быть интересным. Так как у меня полностью убрали из программы химию, биологию, географию и второй ин яз, и компенсировали это 6 часами математики, 4 информатики и 5 физики. Класс!

На следующей неделе продолжу делать работы в портфолио, еще хочу попробовать сделать одну анимацию на Js. Если получится замучу вам урок :D

Удачи, программисты!

Подводим итоги 2-ух месячного марафона

2020-08-31T18:48:51.953Z

Привет друзья! Сегодня 31 августа, а это говорит о том что мой марафон окончен и сейчас я хочу подвести его итоги.

Цели, которые я ставил вы можете посмотреть здесь - https://teletype.in/@progway/JlajR-21O А сейчас я расскажу о том как проходил этот марафон и как я изменился после него.

Ну во-первых, любые цели мотивируют тебя работать. Так же это случилось и со мной, последние два месяца я писал код примерно по 5-8 часов в день и это дало свои плоды:

Я закончил 3 проекта. Морской бой, Блог и телеграм бот( о нем расскажу в ближайшие дни в отчете )
Из-за интенсивной работы я сильно импрувнулся, если раньше сверстать лэндинг с формой регистрации и админ панелью для меня было сложной, объемной задачей. То сейчас я выполняю это за 3-4 дня под музычку и даже особо не напрягаясь( ладно я пизжу, баги бывают везде и всегда не зависимо от того насколько ты импрувнулся ). Для примера, верстка блога у меня заняла дня 3, а лендинг для портфолио я сверстал часов за 7 непрерывной работы
Я начал выходить на фриланс. Пунктом выше упомянул, что сейчас нахожусь в стадии заполнения портфолио и отвечаю на каждый заказ, который смогу выполнить.
По-мимо программирования я развивал свой телеграмм канал и за время марафона объем нашего комьюнити вырос примерно на 280 человек. До тысячи нам осталось меньше 150 участников, поэтому планирую преодолеть эту отметку к концу сентября.
Про спорт и режим особо разглагольствоваться не буду, просто хочу сказать, что стал вести более правильный образ жизни. И это реально увеличило мою продуктивность, то есть правильный режим сна, спорт и питания безумно сильно влияет на продуктивность в любой занятости.

Что будет дальше?

Раз уж я взялся я объемную разговорную статью, то предлагаю поднять тему контента и моей занятости в ближайшие 9 месяцев.

Кто не знал мне 16, поэтому я пойду в 10 класс => у меня будет примерно в 2 раза меньше времени на канал и программирование. Все это я говорю к сокращению кол-ва постов в телеге... Скорее всего они будут выходить раз в неделю( обязательно ) и время от времени чаще.

Про контент. Это преимущественно будут отчеты по типу постов под #марафон, только сейчас это станет weekly_logами. Так же хотя бы раз в месяц-два буду брать интервью( возможно они будут браться в дискорде и публиковаться на ютубе в виде подкастов ), ну и делать образовательный контент по мере его надобности.

Вообщем, все будет так же круто. Просто приоритет программирования больше, чем у телеграма и думаю это логично :)

Как-то так, увидимся через неделю
Удачи, программисты!

Deploy node.js приложения на heroku

2020-08-27T11:13:37.503Z

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

В качестве хостинга мы будем использовать heroku, так как он бесплатный.

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

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

node_moduls

Все папки и файлы записанные в этот список не будут добавляться в git-репозиторий

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

heroku login - после чего нужно будет нажать на любую клавишу кроме "q" и залогиниться на открывшемся в браузере окне
git init - инициализируем локальный git-репозиторий в проекте
git add . - добавляем все файлы
git commit -m "Ваша комментарий" - заливаем все в репозиторий

Теперь нужно перейти по этой ссылке https://dashboard.heroku.com/apps и создать новое приложение( кнопка в правом верхнем углу ). После чего оно появится в списке ваших проектов, теперь нажимаем на него и переходим в пункт deploy

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

Теперь клонируем все на наш удаленный репозиторий:

heroku git:remote -a progwaytest

И пушим его на сам хост:

git push heroku master

Прописываем в консоль heroku open и наслаждаемся рабочим приложением.

На этом все,

Удачи программисты!

Анимация на ванильном js

2020-08-08T11:05:53.842Z

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

Теория

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

Кстати, анимация у нас будет накладываться на hr, расположенный под блоком меню.

Практика

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

<nav class="menu" id="menu">
    <ul>
        <li><div class="logo"><a href="/">
            <ul>
                <h1><span class="prog">Prog</span><span class="way">Way</span></h1>
            </ul></a>
        </div></li>
        <li><a onmouseover="animation('soft', 'over')" onmouseout="animation('soft', 'out')" class="amenu" href="/soft">Софт</a><hr class="step0" id="soft"></li>
        <li><a onmouseover="animation('quizs', 'over')" onmouseout="animation('quizs', 'out')" class="amenu" href="/quizs">Задачи</a><hr class="step0" id="quizs"></li>            
        <li><a onmouseover="animation('posts', 'over')" onmouseout="animation('posts', 'out')" class="amenu" href="/posts">Статьи</a><hr class="step0" id="posts"></li>
    </ul>
</nav>

Теперь рассмотрим стили

.menu {
    display: block;    
    width: 100%;    
    padding-bottom: 0;    
    box-shadow: 0px 15px 5px 10px #272933;  
}

ul {
    list-style: none;
    margin: 0% 0%;
}

.menu li {
    padding-top: 1em;
    width: 100%;    
    text-align: center;
}

.menu ul {
    display: flex;      
    background: #18171c;    
    padding-left: 15%;    
    padding-right: 15%;    
    height: 100%;
}

.menu a {
    height: 100%;    
    display: block;    
    color: white;    
    font-weight: bold;    
    background: #18171c;    
    text-decoration: none;    
    font-size: 18px;
}

.menu li {
    width: 15%;    
    padding-left: 4.3%;    
    height: 100%;    
    text-align: center;    
    vertical-align: middle;
}

.amenu {
    padding-top: 4%;    
    font-family: 'Didact Gothic', sans-serif;
}

.prog {
    color: white;    
    font-size: 25px;
}

.way {
    color: #9966cc;    
    font-size: 25px;
}

.step0 {
    width: 0%;
}

.step1 {
    width: 10%;
}

.step2 {
    width: 20%;
}

.step3 {
    width: 30%;
}

.step4 {
    width: 40%;
}

.step5 {
    width: 50%;
}

.step6 {
    width: 60%;
}

.step7 {
    width: 70%;
}
 
.step8 {
     width: 80%;
}
 
.step9 {
    width: 90%;
}

.step10 {
    width: 100%;
}

А сейчас самое интересное... JAVASCRIPT код, но перед этим предлагаю подробнее рассмотреть верстку отдельного элемента меню

<li><a onmouseover="animation('soft', 'over')" onmouseout="animation('soft', 'out')" class="amenu" href="/soft">Софт</a><hr class="step0" id="soft"></li>

Элементу <a> мы задаем функцию animation в аргументы onmouseover и onmouseout. А функция в свою очередь принимает id hr-а( будет нужен для выбора определенного hr ) и over/out( это будет влиять на одно из условий в функции )

Элементу <hr> мы изначально задаем класс step0 и id, в моем случае это "soft".

Теперь перейдем в javascript-файл и изучим код функции

var timerover;
var timerout;
function animation(id, where) {
    var hr = document.getElementById(id)
    if (where == "over"){
        clearInterval(timerout)
        timerover = setInterval(morewidth, 20);
        
        function morewidth(){
            var classnow = hr.className
            if (classnow == "step0"){
                hr.className = "step1"
            } else if (classnow == "step1"){
                hr.className = "step2"
            } else if (classnow == "step2"){
                hr.className = "step3"            
            } else if (classnow == "step3"){
                hr.className = "step4"
            } else if (classnow == "step4"){
                hr.className = "step5"            
            } else if (classnow == "step5"){                
                hr.className = "step6"            
            } else if (classnow == "step6"){                
                hr.className = "step7"            
            } else if (classnow == "step7"){                
                hr.className = "step8"            
            } else if (classnow == "step8"){                
                hr.className = "step9"            
            } else if (classnow == "step9"){                
                hr.className = "step10"                
                clearInterval(timerover)
            }
        }
    } else if (where == "out") {
        clearInterval(timerover)
        timerout = setInterval(lesswidth, 20);
        
        function lesswidth(){
            var classnow = hr.className
            if (classnow == "step10"){
                hr.className = "step9"
            } else if (classnow == "step9"){                
                hr.className = "step8"            
            } else if (classnow == "step8"){                
                hr.className = "step7"            
            } else if (classnow == "step7"){                
                hr.className = "step6"            
            } else if (classnow == "step6"){                
                hr.className = "step5"            
            } else if (classnow == "step5"){                
                hr.className = "step4"            
            } else if (classnow == "step4"){                
                hr.className = "step3"            
            } else if (classnow == "step3"){                
                hr.className = "step2"            
            } else if (classnow == "step2"){                
                hr.className = "step1"            
            } else if (classnow == "step1"){                
                hr.className = "step0"                
                clearInterval(timerout)            
            }
        }    
    } 
}

Давайте по порядку:

В самом начале мы создаем 2 переменных: timerover и timerout. Они нам нужны для начала и завершения интервалов.
Потом уже в теле функции мы задаем проверку на аргумент "where"( предлагаю изучить первое ответвление, так как второе почти полностью индентично )
Здесь мы отчищаем timerout и запусткаем интервал timerover. В аргумент интервала передаем функцию( в данном случае morewidth, и частоту запуска 20мс )
Теперь приступим к функции morewidth. Тут мы получаем класс hr на данный момент и проверяем его. При выполнении условия мы меняем его класс, тем самым увеличивая width элемента на 10%. И если доходим до step10 отчищаем интервал.

ВАЖНО

Не забывайте чистить интервал, иначе две функции буду противодействовать друг другу.

Итог

Это один из вариантов реализации анимации, я показал как это сделать именно на ванильном javascript`е. А что у нас получилось можете посмотреть в моем телеграм канале.

На сегодня все,
Удачи, программисты!

Мой софт для программирования

2020-08-06T20:31:14.010Z

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

ConEmu

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

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

Надоел черный фон? - Легко, в conemu можно сделать кастомный фон
Нужно несколько окон, но между ними бесит перемещаться? - Каждое новое окно будет отображаться во вкладках.
Часть пользуетесь комбинациями клавиш? - Вуаля, здесь можно все!!!

И это только самый важные настройки для меня. Так что всем советую

https://conemu.ru/ru/

VS Code

Да, это возможно не совсем то что вы ожидали. Но я хочу рассказать пожалуй о самым лучшем редакторе кода( из всех что я пробовал ). Из плюсов это приятный дизайн( как по мне это очень важно, ведь в программе вы будите сидеть почти 24/7). А второй плюс, это ОГРОМНОЕ КОЛ-ВО плагинов, которыми вы можете настроить vscode полностью под себя

Colormania

Если вы верстаете сайты, то вы 100% нуждаетесь в красивых цветах. Это приложение поможет получить вам, любой нужный вам цвет во всех форматах.

https://colormania.ru.uptodown.com/windows

Subcolor

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

Сам сайт - https://subcolor.github.io/

Workbench

Если вы веб-разработчик, то 100% работаете с базами данных. В том же самом node.js или asp.net таблицы можно создавать непосредственно в коде, но как по мне это не удобно.

Поэтому я предлагаю вам приложение Workbench, в котором вы с можете работать с вашей базой данных напрямую через язык mysql. Даже если вы не знаете этот язык, вы выучите его за 5 секунд. ЭТО ПРОСТО АНГЛИЙСКИЙ

https://dev.mysql.com/downloads/workbench/

Вот такой вот список, если вы нашли для себя что-то полезное - поставьте лайк <3

Split Strings решение

2020-07-29T20:32:42.297Z

И так, эта задача уже посложнее... Приступим!

Изначально нам нужно проверить четное или не четное кол-во элементов хранит наша строка.

Если в строке четное кол-во символов, то запускаем цикл с шагом в 2 единицы и в итоговый массив добавляем пару символов. Номер шага и номер шага + 1
А если результат проверки обратный, мы опять же запускаем цикл с шагом в 2 единицы. Но каждый шаг проверяем typeof(i + 1 элемент) на то что он undefined. Если приравнен создаем пару элемент [шаг] и "_". В обратном случае, идем по плану сверху указанного кода.

Вот код функции:

function solution(str){
  var res = []
  var midres = "";
  if (str.length % 2 == 0){
    for (var i = 0; i < str.length; i = i + 2){
      midres = str[i] + str[i + 1]
      res.push(midres)
    }
  } else if (str.length % 2 != 0){
    for (var i = 0; i < str.length; i = i + 2){
      if (typeof(str[i + 1])== "undefined"){
        midres = str[i] + "_"
        res.push(midres)
      } else {
        midres = str[i] + str[i + 1]
        res.push(midres)
      }
    }
  }
  return res
}

Does my number look big in this? Решение

2020-07-27T20:41:28.050Z

И так, нам в функцию дается число. Нам нужно каждый его элемент возвести в кол-во элементов числа и сложить все это

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

В конце проверять равенство res и value, и в зависимости от этого возвращать true/false

function narcissistic(value) {
  var sval = String(value)
  var res = 0;
  for (var i= 0; i < sval.length; i++){
    res += Math.pow(sval[i], sval.length)
  }
  if (res == value){
    return true
  } else {
    return false
  }
}

List Filtering решение

2020-07-24T19:23:21.853Z

И так, приступим к решению. По условию нам дается массив с двумя типами данных:

Строки
Числа

Поэтому мы будем получать массив, затем перебирать его при помощи for и проверять тип каждого элемента( это мы будем делать при помощи функции typeof() )

Ну а если этот элемент является числом, то добавляем его в итоговый массив.

function filter_list(l) {
    var res = []
    for (var i = 0; i < l.length; i++){
      if (typeof(l[i]) == "number"){
        res.push(l[i])
      }
    }
    return res
}