Programmer Way | IT и фриланс. Страница 3

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

Переживаете, что изучение английского для работы в IT займёт слишком много времени? Спокойно🙌 English For IT уже обо всём позаботились! Присоединяйтесь к БЕСПЛАТНОМУ онлайн-марафону по IT-английскому, который прошли уже 30K+ человек😱 Онлайн марафон от English For IT — это: 🔥 3 дня интенсивной практики и мотивации 🔥 закрытое Telegram-сообщество с единомышленниками и менторами 🔥 полезные чек-листы в подарок 🔥 возможность поучаствовать в розыгрыше AirPods Если вы хотите быстро втянуться в IT-английский и узнать, как улучшать свои знания, чтобы вам не пришлось формально изучать язык больше НИКОГДА, регистрируйтесь❤️ Следующий марафон УЖЕ 7 ФЕВРАЛЯ, осталось не так много времени⏰

Ruby Home. Сверстал небольшой лендинг кампании по аренде жилья в Америке, необычный главный экран: элемент поиска немного выпирает, реализованы табы и селекты для выбора параметров поиска, блок с логотипами превращается в слайдер на мобильных устройствах и планшетах, для позиционирования карточек использовал grid, необычные решения для адаптива блока с иконками были использованы нестандартные решения: пришлось немного изменить верстку в ходе адаптива, но зато на планшетах сетка смотрится очень хорошо, постарался максимально качественно сверстать этот макет, чтобы оценить свои силы, в планах улучшить стартовый шаблон и пройти один марафон по верстке

Пройди стажировку в IT  Стажировка в «ИнфоТеКС» Академии поможет погрузиться в будущую профессию, перенять опыт специалистов нашей компании и прокачать свои скилы на максимум! Набор открыт: Томск Санкт-Петербург Уфа Пенза Что тебя ждет?    . Стипендия по итогам каждого месяца!  · Погружение в сферу ИБ технологий.  · Работа в команде специалистов.  · Получение практического опыта. · Гибкий график работы. Ты сам составляешь свое расписание! · Кейс с работой над реальными проектами компании.  С первых дней ты станешь частью коллектива и примешь участие в корпоративной жизни компании. Будь готов к пицце, настольным играм, кино и тематическим мероприятиям в InfoTeCS Академии 🍕 Если ты можешь выделить 3,5 месяца и не менее 20 часов в неделю, заполни анкету на сайте: https://clck.ru/apLV3 Заявки на участие принимаем до 14.02.2022, тестовые задания до 28.02.2022.

​​Neuro.  Небольшой сайт с крутой анимацией перемещения по планетам, вращение планет сделано просто передвигающийся картинкой, но эффект очень красивый, можно почувствовать себя космо-туристом и просто насладиться красивой анимацией, давно была такая идея, но никак руки не доходили, все ссылки прикреплю к посту и всех с наступающим В этом году я узнал много нового (не только по программированию) Столкнулся с морем трудностей, взял крупный заказ, примерно определил дальнейший путь и понял, что мне нужно ещё много чего учить, хотя за этот год я значительно преуспел: начал учить react и redux, лучше изучил grid, стал лучше верстать и делать адаптив, старался делиться успехами и неудачами в своём телеграмм канале, но в последние время что-то редко это получалось. Надеюсь в 2022 больше изучать и углубиться в программирование, чаще выпускать посты и больше заниматься спортом. Желаю всем хороших праздников, меньше багов и побольше читабельного и красивого кода:)

​​Работа с Date. Всем привет, недавно досмотрел видео, где создавалась копия Вконтаке на react и решил добавить отображение времени для постов и сообщений, казалось, что сделать это будет проще простого: просто записываешь дату, время, а затем показываешь, но нет; обычно в соц сетях время показывается по-разному: если пост вышел недавно, то можно показать время относительно текущего(5 минут назад, 1 час и тд.), когда прошло уже достаточно времени можно показать что-то по типу «Сегодня в 20:00», если пост уже давний, то смысла нет показывать его точное время, можно просто записать дату Поэтому решил записать число миллисекунд прошедших с 1.01.1970 и потом просто сравнивать с текущим значением и выбрать подходящий формат, для удобной работы решил подключить momentjs, так как есть ещё нюансы, например, если пост вышел до 12, а текущее время уже после, то надо записать «Вчера», чтобы это все не считать можно воспользоваться функционалом библиотеки, а какие вы используете библиотеки для работы с датой или используете чистый js? Напишите в чате!

​​Material UI. Библиотека для создания UI для ваших react приложений. Если вы не хотите париться над вёрсткой и не нуждаетесь в каком-то сложном функционале, то вы можете использовать готовые компоненты и даже целые секции из Material UI. Очень полезно, если вам не слишком важен визуал или у вас мало времени на создание верстки. Также подойдёт для тех, кому надо что-то быстро протестить и быстро накидать тестовую структуру проекта, чтобы потом уже конкретно заняться визуалом. Нашёл небольшой курс, где вкратце рассказывается про данную UI библиотеку:

Шифр Цезаря. Шифр Цезаря — это вид шифра, в котором каждый символ в тексте заменяется символом, находящимся на некотором постоянном числе позиций впереди или позади него в алфавите. Написал небольшое приложение, в котором можно зашифровать и расшифровать английский текст, а также выбрать сдвиг и направление(вперёд/назад) куда будет сдвигаться буква, например: если сдвиг 3 и направление по-умолчанию(вперёд), то a -> d, b -> e, c -> f и тд. Результат и код прикреплю к посту, можете потестить:

​​TypeScript. Обычный JavaScript, но со встроенными типами. Когда js начал набирать популярность, а бизнес начал создавать все больше приложений со сложным функционалом, разработчики задумались о том, как расширять и поддерживать существующие приложения. Нативный js приносил как и быструю скорость и лёгкость в освоении, так и много новых проблем, одна из них была типизация Объявление переменных без заданных типов приносило непредсказуемости в код, а, как следствие, кучу багов. Вдохновившись типизацией других языков(Java, C# и тд) разработчик из Microsoft создал TypeScript, который полностью совместим с js и компилируется в него при сборке Буду делиться моими успехами в изучение TypeScript-a. А пока хочу посоветовать небольшое вводное видео про основы ts:

RGym. Сверстал небольшой, но довольно интересный макет: сайт спортзала, много элементов дизайна, которые выходят за контейнер, поэтому пришлось немного повозиться с адаптивом и сомой структурой; анимированный слайдер на главной с плавными переходами. Время на адаптив значительно уменьшилось благодаря адаптивному свойству, подробнее в этом посте. Затрат на подборы размеров шрифта и отступов больше нет, думаю продолжать использовать этот миксин в своих проектах, в планах ещё сверстать пару макетов Код и сам сайт прикреплю к посту:

​​Изучать что-то новое. Если вы идёте в каком-то направлении и вам это надоело, попробуйте изучить какую-то новую тему/подход, например вы работаете с redux и react, и вам это надоело, тогда попробуйте поменять redux на mobx и начать его учить Почему вам может надоесть? Чаще всего это происходит из-за рутины: вы уже все изучили в той или иной сфере и не двигаетесь, поэтому у вас нет трудностей, которые бы вы преодолевали и получали новый опыт. Ещё одним плюсом изучения новых тем будет то, что вы расширяете кругозор и узнаёте почему надо делать именно так, делаете выводы и сравниваете ваши старые знания с той темой, в которой вы пока новичок

​​Axios. Библиотека для более удобной отправки запроса на сервер, создано на базе fetch, но с более коротким и простым синтаксисом, может использоваться в любых проектах, часто используется в связке с react для взаимодействия с различными api Нашёл крутой урок, где рассказывается про основные функции и преимущества данной библиотеки:

​​React pizza. Очень крутой курс, который я рекомендую всем новичкам, действительно просто и с нуля объясняется про компонент, пропсы и хуки. Из минусов: иногда автор чересчур детально описывает некоторые моменты, но можно проставить на 2х или промотать. Используются библиотеки redux, axios, для работы с бд используется json-server, а сам проект можно выложить на heroku По итогу я сделал крутое приложение, в котором можно отсортировать и выбрать пиццы, изменять размер, тип теста, количество, а все эти параметры потом можно собрать и передать на сервер, демо прикреплю к посту:

​​Итоги зелёного лета. За это лето я узнал много нового и сделал много проектов, завершил курсы «Путь самурая», «Funiro» и «React пицца»(об этом расскажу совсем скоро). Касательно GitHub, то я старался каждый день заливать туда что-то, были дни, когда не получалось физически, а бывало и просто лень, я старался сохранить тенденцию, и у меня это получилось Поначалу все шло очень даже хорошо: я не пропускал ни дня почти месяц, но потом я не делал коммиты 5 недель по субботам из-за того, что у меня не получалось; примерно в тот момент я понял, что надо давать себе отдыхать и делать перерывы, ведь у меня не было цели программировать каждый день, я хотел только делать это регулярно. Следующие недели я старался отдыхать некоторые дни и переключаться Итог: я понял, что программирование каждый день приносит хороший результат на небольших отрезках времени, если программировать каждый день без перерыва очень долго, то рано или поздно это надоест и прогресс замедлиться или вовсе пропадёт интерес к этому, а если программировать без интереса — наступит выгорание. Надо делать для себя перерывы, чтобы отдохнуть и переключиться

​​Рекурсия. Когда функции вызывают сами себя — этот процесс называют рекурсией. Это напоминает цикл while, соотвественно функция не может вызывать себя бесконечно, поэтому должно быть условие выхода из рекурсии. Если это условие будет написано неверно или его не будет, то call stack будет переполнен и вылезет ошибка, поэтому внимательно проверяйте условия, когда работаете с рекурсией Для корректной работы нам также нужно написать правило движение по рекурсии, например: у нас есть массив экранов, внутри которых есть свои элементы, которые надо анимировать с определенной задержкой, а также показывать нужный экран, в таком случае мы можем использовать рекурсию: создадим функцию и передадим туда массив, нулевому элементу добавим класс, пробежимся циклом по внутренним элементам первого экрана(чтобы анимировать их) и на последней итерации вызовем ту же функцию, с тем же массивом, но без первого элемента. Условием выхода будет нулевая длинна переданного массива, так мы поймём, что элементы закончились и перебирать больше нечего. Похожий функционал я реализовывал, когда делал эффект дыма  Нашёл отличный урок про рекурсию с подробным объяснением и примерами: