Programmer Way | IT и фриланс
Open in Telegram
Делиться моим путём до вершин IT индустрии! Сайт: tsykunov.com Топовый чат: t.me/best_of_it Условия рекламы: tsykunov.com/price Автор: @nikitakokos
Show moreThe country is not specifiedThe category is not specified
3 344
Subscribers
-224 hours
-187 days
-9330 days
Posts Archive
Artificial Intelligence - одно из самых трендовых направлений в IT-индустрии. Поэтому мы решили поделиться свежим каналом с большой базой знаний и богатым практическим опытом о применении Искусственного Интеллекта в бизнесе и tech стартапах - Новое Электричество.
Пробелы в теории.
Раз уж это мой блог, то я тут рассказываю не только про свои успехи, но и про провалы. Вчера я узнал, что много не знал и это так и есть
У меня проявились проблемы с теорией флекса, я использовал сокращённое свойство flex не понимая, что оно делает, просто потому, что это работает. Все таки теория важна и стоит понимать зачем писать то или иное свойство, ведь на этом строится база для больших и интересных проектов и без этих знаний не получиться по-настоящему творить
Каждый в моей ситуации сделал бы свои выводы. Я же почитал статью на MDN, буду ещё не раз к ней обращаться, чтобы запомнить и больше не делать таких глупых ошибок, хотя надо было просто учить теорию, такие дела
Новый рубеж.
Во время школы времени почти не было. Теперь буду восстанавливать прежний уровень и через день выпускать статьи
В планах сверстать 2 интернет магазина по марафонам, ещё нашёл большое количество ярких и современных макетов, которые буду верстать на каникулах. В идеале ещё написать свой чат на реакте(нашёл целый плейлист по созданию чата), пока не планирую развиваться в сторону react, но думаю навыки не будут лишними, а js подтягивать тоже важно
Могу по запросу скинуть ссылки на курсы, пишите в личку. Желаю вам заниматься тем, чем нравиться, вне зависимости от жизненных обстоятельств!
Wordpress для разработчика.
Уроков много, но все они бегло пробегаются по основам и очень сложно найти реально годные и крутые видео. Сам по себе Wordpress это большая тема в которую стоит углубиться, чтобы лучше понимать психологию создания сайтов
Мой друг запустил серию видео для разработчиков, которые хотят прокачивать свои знания и разрабатывать крутые темы и плагины тык
Обводка текста CSS.
Прикольный эффект для текста, который выделит ваш сайт на фоне других, рекомендую делать большой font-size, чтобы обводка лучше смотрелась, обычно встречал в различных выпадающих меню, но это уже на ваше усмотрение. Посмотреть пример можно тут
Кому интересно, вот код из примера:
a{
font-size: 80px;
font-weight: 700;
-webkit-text-stroke-color: #ba5353;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.02em;
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-image: linear-gradient(#ba5353 0%,#ba5353 100%, );
transition: all .5s ease;
background-size: 0 100%;
-webkit-background-size: 0 100%;
@media (min-width: 992px){
&:hover{
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
}
}
Отправка заявок на почту.
Очень часто требуется реализовать отправку сообщений из формы заказчику на почту или телеграмм(об этом уже был пост). А сегодня речь пойдет о валидации и отправки на почту без перезагрузки страницы(с помощью Ajax)
Валидация формы — дополнительная проверка на правильность заполнения формы через js
пример:
В поле с почтой обязательно должны быть символы @ и .
С помощью Ajax можно отправлять запросы на сервер без перезагрузки страницы, это очень удобно. Подготовил очень подробный часовой урок по валидации форм и отправкой их на почту, советую посмотреть
Если есть вопросы — пишите в чате
Улучшение верстки номер №4.
В прошлых частях мы поговорили о снипетах и рабочем месте. А тема сегодняшнего поста пойдёт о препроцесорах. одни из самых популярных препроц. Это
• Sass
• Scss
• Less
Основана их суть — ускорения верстки. Одни из основных возможностей предпроцесоров:
Циклы, Переменные, Миксины И удобный синтаксис. Также предпроцесоры очень помогают при вёрстке по методологиям (Например Бем). Я рекомендую попробовать каждый из них, и выбрать лучшие для себя. Но less уже почти не используется, поэтому рекордную выбирать между sass и scss, в прикрепленном ролике подробно описываются различия этих препроцессоров
#Улучшениеверстки
Приоритетность стилей в css.
Иногда нужно перебить какой-то стиль или записать свой поверх другого, но многие путают приоритеты, сегодня разберёмся
Самый маленький приоритет имеет обращение к элементу, например
p {
color: red;
}
Затем следуют классы
.red{
color: red;
}
Но классы пересевает id
#blue{
color: blue;
}
Id перебивает стили внутри тега(в HTML файле)
<p style = "color: green"></p>
А потом идёт легендарный !important
p {
color: red !important;
}
PS: обращения можно вкладывать друг в друга, так будет расти их приоритет, подробнее тык
Анимация сайта.
Сегодня расскажу какие бывают анимации и где их использовать, начнём с простого:
1) анимация при наведении
Это та анимация, которая срабатывает, когда ты наводишь курсором на ссылку, записывается обычными средствами css
@media (min-width: 992px){
&:hover{
}
}
2) keyframes анимация
Тут уже больше возможностей и есть где разгуляться фантазии. Благодаря keyframes можно делать покадровую анимацию элемента, задавать задержку, продолжительность, тип... Знаю отличный и понятный урок по keyframes тык
3) анимация при скролле
Это уже более обширный вид анимации, для которого обычно подключают библиотеки вроде wow.js и других. Но я нашёл другую более удобную библиотеку под названием ScrollReveal, библиотека позволяет гибко, а главное быстро настраивать анимацию при прокрутке страницы. Все готово уже с коробки, осталось только пользоваться
+ 1 к портфолио.
Сверстал небольшой, но красивый лендинг, использовал mobile first и анимацию средствами нативного js. Кому интересно, то прикреплю код, кстати подписывайтесь на github . Итог можно посмотреть тут
SSL.
Думаю многие видели замочек на некоторых сайтах, так вот это SSL сертификат, он служит для более быстрой и безопасной передачи данных. Обычно его дают бесплатно на один год домен провайдеры, а потом нужно доплачивать некую сумму
Лично я решил не брать, хотя https протокол выглядит посолиднее и если у вас интернет магазин или какой-то проект где нужны данные пользователей(вроде кредитных карт или паспортных данных), то лучше переплатить, но получить безопасное соединение и меньший шанс утечки информации
А вообще если тебе интересно, какие ещё есть протоколы и как работает интернет, то советую глянуть это видео тык
Рано или поздно каждый веб программист приходит к необходимости приобрести хостинг, ведь если ты никогда не работал с ним, то на реальном проекте придётся потратить немало времени на понимание
Блок Элемент Модификатор.
Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать и обновлять долгое время. БЭМ значительно ускоряет верстку, я пробовал писать классы по-разному, но остановился на этой методологии
Основным плюсом БЭМ является возможность использовать блок несколько раз и не путаться
во вложенности, ну и конечно модификаторы. Приведу очень частый пример, есть title, но в некоторых блоках он чёрный и можно просто добавить класс title_black и тогда будет понятно зачем он нужен и не будет нагромождения непонятных классов
Хороших уроков по бэму не нашёл, если знаете — поделитесь в чате, но лучше всего познавать на практике, это будет намного эффективнее
I miss you!
Нашёл крутую мини-библиотеку, которая меняет иконку станицы, когда пользователь переключает вкладку. Видел это на некоторых сайтах и мне всегда было интересно как это сделано, теперь ты тоже знаешь. Единственный минус — наличие jQuery, но в остальном хорошее дополнение для сайта
Домен и хостинг.
Теперь я владелец сайта в интернете. Планирую поковыряться в возможностях хостинга и потестить всякие штуки вроде отправки писем на почту и тд. А пока расскажу как все было:
Доменное имя. Домен который я планировал был уже занять, поэтому я просто выбрал tsykunov.com , приобрёл на reg.ru , после оплаты на почту пришло письмо с логином и паролем, а так же подтверждением почты.
Хостинг. С хостингом все немного посложнее, выбор был большой, да и я не разбираюсь в них. Выбор был между макхостом, beget и hostinger. Изначально планировал купить на hostinger с расположением в Нидерландах, но слишком низкая цена заставила насторожиться(возможно, потом перейду на него), а пока решил выбрать beget
Ещё одна небольшая работа в портфолио.
Сегодня решил немного поверстать, получилась прикольная работа, из фич: адаптивный слайдер, прикольный бургер и решил поиграться с ховерами в футере
Улучшение для верстки №3.
Правильно выбранная среда разработки значительно ускоряет процесс. Поставь тему с цветами не режущими глаз, например я использую horizon theme
Но на этом среда разработки не заканчивается. Стул, стол, освещение — играют важную роль. Стоит уже сразу задумываться о своём здоровье, выбери удобный для себя стул, настрой освещение, чтобы комфортно было работать и можно было сосредоточиться именно на процессе, а не на скрипящем стуле
Самое первое на что нужно обращать при выборе железа, нет, это не на мощность, а на экран, в идеале лучше купить сразу несколько мониторов
Улучшая среду ты ускоряешь процесс
Возможно ли сделать уникальный сайт быстро?
Так не бывает 😢
А вот бесплатные HTML шаблоны и PSD макеты современных сайтов на 10 различных тематик - это есть у нас!
✅ Подписывайтесь на Шаблоны сайтов бесплатно !
DLE.
Постов не было т. к. трудился над заказом. Пару слов о заказе: сайт с электронными книгами, нужно было сделать редизайн(поменять стили, цвета, шрифты и расположение блоков), бюджет был 50$
Сайт находился на cms DLE, не сильно разбираюсь в рейтингах, но комьюнити маленькое. На сайте не было файлов .php, вместо них были .tpl(что-то типа упрощенного php, встречался с ними, когда брал заказы по opencart), но при открытии файлов все буквы у меня почему-то слетали, потом я загуглил и оказалось что у сайта другая кодировка, файлы соответственно нужно открывать с такой кодировкой, теперь буду внимательней
Image Uploader.
Сделал первый проект из недавнего поста о 8 идеях для Full Stack. Получилось даже лучше чем планировал, сделал за все выходные.
Все четко по ТЗ:
•Файлы можно загрузить дропом в область или нажав на кнопку
•Они автоматически(без перезагрузки страницы) летят на сервер
•Во время загрузки срабатывает прелоадер
•По итогу выводиться картинка и ссылка(копируется в буфер обмена по нажатии на кнопку)
•Ссылка ведёт на картинку
Задание выполнено, даже сделал адаптивно. Поиграться с кодом можно тут, скоро куплю домен и хостинг и уже смогу кидать демо с бэкендом
Улучшение верстки №2.
Вторая часть рубрики, сегодня речь пойдет о снипеттах
Допустим что бы создать структуру документа в html вводим ! + tab. За этим способом вы можете вводить в программу свои "сокращения". Снипетты можно создать не только для html, но и для любых языков программирования. Правильно сделанные снипетты могут ускорить процесс програмивания в решении рутинных задач
Также к этому посту будет прикреплённо видео с подробным разбором снипеттов в vs code
