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

Как не просто выучить Python, а разобраться в алгоритмах и структурах данных, автоматических тестах, освоить Django и всё необходимое для качественной разработки в команде? Например, освоить профессию на Хекслете. Курс невозможно просто «отсидеть» или «прослушать», на нём дают только самое необходимое для условий реального продакшена — доступ к Open Source проектам, базе тестовых задач для подготовки к собеседованиям, кейсы для портфолио. Так что многие студенты получают оффер ещё во время обучения. Работодатели указывают курсы Хекслета как преимущество при найме.

​​Параллакс галерея. Крутая анимированная галерея с использованием параллакса и различных анимаций, написано с использованием swiper, автор использует динамические величины: vh, vw, чтобы все отображалось адекватно на разных расширениях, заголовок имеет градиентный цвет, а на фоне небольшие блики текущей картинки, что добавляет атмосферности для такой галереи, видео небольшое, но в нем много полезных моментов, которые могут пригодиться в других проектах, демо:

Хочешь стать мидлом быстро и безболезненно? Тогда тебе к нам! Канал JavaScript заметки позволит тебе прокачать навыки до уровня middle за считанные недели абсолютно бесплатно! Эксклюзивный, актуальный материал по современному JS каждый день. Расширяй свои знания с нами!

Таймер на чистом js. Сделал анимированный таймер, получилось создать эффект слайдера с задержкой посередине. Для кнопок решил использовать делегирование событий, чтобы можно было добавлять сколько угодно кнопок, но не прописывать постоянно событие клик на каждую. Для каждой кнопки задал специальный data-атрибут со временем выполнения таймера, например "2:30", потом это все преобразуется в массив [2,3,0], таким образом можно удобно изменять значение каждого столбца времени, демо:

Какие навыки нужно развивать IT-специалисту, чтобы оставаться востребованным в 2022-м? Все секреты, как увидеть возможности в новой реальности, раскроют эксперты в сфере образования, психологии, финансах и HR на открытой онлайн-конференции от Skillbox. Что вы узнаете:  - Какие изменения на рынке труда происходят сейчас и чего ждать в ближайшем будущем - Какие знания могут увеличить вашу ценность на рынке труда - Какие навыки необходимо развивать, чтобы оставаться востребованным специалистом - Какие психологические техники помогут устоять во время резких и неожиданных изменений - Как будет развиваться российская IT-индустрия в ближайшие годы - Как грамотно распорядиться личным бюджетом в период финансовой нестабильности Во время трансляции эксперты ответят на вопросы, которые вы отправите заранее. Чтобы задать свой вопрос экспертам и спикерам уже сейчас, переходите по ссылке и регистрируйтесь на бесплатную онлайн-конференцию: https://clc.to/dwf-6w И это ещё не всё! Всех участников конференции ждут подарки!

​​Async await. В прошлом посте мы разобрали примерную работу промисов, они отлично справляются со своей задачей, но существует также и более новый способ взаимодействия с асинхронным кодом — async await, под капотом используются те же промисы, но синтаксис более простой и читабельный. Прежде всего, чтобы javascript понял, что мы будем работать в асинхронной функции, нужно перед ключевым словом function написать async, теперь мы можем перед асинхронной операцией прописать await и присвоить результат в соответствующую переменную, например response, и весь следующий код будет выполняться только после того, как выполниться асинхронный код. Теперь мы можем работать с переменной response так, как будто это обычная переменная и мы пишем синхронный код, если мы хотим после этого сделать еще один запрос, то нам нужно всего лишь еще раз создать переменную и написать await перед запросом. Вот небольшое видео про работу async await:

Привет дорогой друг!💙 Наверняка, ты хотел пройти курс с того или иного языка программирования. Но цена, тебя явно оттолкнула. Так вот, хочу посоветовать топовый канал ProSliv в котором ты найдешь: 🔹Курсы по Python, Java, C#, HTML и другие 🔹Развитие и мышление 🔹Криптовалюта и бизнес Все курсы находятся в открытом доступе абсолютно БЕСПЛАТНО! 🔵Подписывайся пока не поздно!

​​Promise. Интерфейс для обработки асинхронных операций. Promise позволяет избавляться от вложенности и выполнять код так, как если бы он был синхронным. Для создания промиса нужно внутрь new Promise() поместить функцию(executor), ее аргументы resolve и reject — колбэки. Внутри этой функции мы делаем различные асинхронные действия, по завершению которых, в зависимости от результата, вызываем один из колбэков. Если мы успешно получили результат, то вызываем resolve и передаём туда наше значение. Если произошла ошибка(сервер не ответил или ответ не совпал с тем, что мы ожидали), то мы вызываем reject с объектом ошибки С созданием разобрались, но как нам получить результат работы нашего промиса(ответ от сервера, изменённое значение переменной), для этого мы используем метод then, который нужно вызвать у промиса и, по его завершению, мы получим доступ к данным, которые были переданы в resolve, если мы хотим обработать ошибку, то используем метод catch, куда первым аргументом передается ошибка. Если нам нужно в любом случае сделать какое-то действие, то можно использовать метод finally, он отработает в любом случае, это хорошо подходит для очистки, например остановка загрузки, так как нам не так важен результат Promise.then тоже возвращает промис, поэтому мы можем вызвать на нем ещё один then, что позволяет нам создавать большие цепочки асинхронных запросов, избегая вложенности Зачастую нам не приходиться создавать promise через new Promise, этим занимаются библиотеки для работы с асинхронностью, например axios, но нужно знать то, что находиться под капотом у всех этих библиотек, чтобы грамотно с ними работать, ведь можно на каждую задачу создать по библиотеке/фреймворку и спокойно их использовать, но программистам платят не за знание определённых синтаксических конструкций, а за решения и то, насколько они верные, зависит от знания тонкостей того или иного языка или библиотеки, ну и конечно же мышления. Приложу статью, в которой будет более детально рассказано про работу с промисами, советуют прочесть

YourCodeReview Стартап, который готовит IT-специалистов к собеседованиям, позволяет выявить слабые стороны и проходить собесы на все 100 Вот, как вас оптимизируют менторы — HRы и Senior-программисты YourCodeReview в рамках 4-недельной подготовки: - вместе разберёте свои ошибки, узнаете свои слабые места и получите гайд по исправлению - научитесь правильно себя презентовать и продавать - приведёте своё резюме в порядок вместе с Senior-разработчиком и HRом - получите фидбэк по тестовым Самая крутая фича — пройдёте 4 собеседования с Senior-ом и HR🔥 В итоге — станете готовыми к собесу в любую компанию и узнаете, сколько реально стоите на рынке.  Оставляй заявку и записывайся на подготовку, места ещё есть!

​​Createx. Сверстал простенький многостраничник по одному марафону, открыл для себя пару новых моментов: переиспользование блоков и создания их с учетом возможности смены контента; разделение блоков по отдельным html файлам, подход неплохой, но когда слишком много секций, то становиться сложно ориентироваться, поэтому не буду внедрять к себе. Из необычного: использовал библиотеку скролла Smooth Scroll и библиотеку для создания кастомных селектов Choices.js Сам сайт простой, я бы сказал шаблонный, но именно такие чаще всего и попадаются, если мы говорим о типичных многостраничниках, интересно было создавать независимый блок и потом просто внедрять его в разных местах, посмотреть готовый вариант и код:

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

​​Перенос домена. Решил перенести свой домен с reg.ru к другому поставщику услуг, причин было несколько, одна из них — возможность продлевать хостинг и домен с одного аккаунта. Некоторые из вас тоже могут столкнуться с такой задачей, например, если другой поставщик предлагает вам лучшие условия. Поэтому решил поделиться своим опытом Перед переносом, нужно уточнить некоторые моменты с вашим поставщиком услуг, если вы подходите под требования, то можно продолжать, иногда может случаться так, что нужно подождать некоторое время перед переносом домена. Затем вам нужно разблокировать свой домен для переноса, посмотреть включена ли блокировка можно в базе данных Whois, там же вы можете найти различную информацию о домене, например, если хотите связаться с его владельцем Дальше запросите Auth-code, который нужно будет указать при запросе на перенос у нового поставщика, и в течении 5 дней домен будет перенесён, у меня это заняло где-то 3 дня, так как на тот момент reg.ru был перегружен. Как вы видите это довольно непростой процесс, но делать вы это будете не часто, хотя с первого раза у меня возникло много вопросов. Я запросил перенос не указывая Auth-code, поэтому мне пришлось обращаться в техподдержку за помощью, благо все прошло хорошо и теперь я могу оплачивать свой домен и хостинг в одном месте

IT вакансии релокацией ✈️ и удаленкой по всему миру GoTechPeople - канал для cпециалистов из IT сектора России, Украины, Беларуси, а также для IT HR и рекрутеров. Мы ежедневно размещаем новые и актуальные вакансии IT компаний с релокацией или на удаленку в разные страны мира. Присоединяйтесь https://t.me/Gotechpeople!

​​CurrentColor. На самом деле это очень полезное значение, позволяющее удобно контролировать смену цвета сразу у нескольких элементов. Например: вы создали псевдоэлемент линии для ссылки, у которой при ховере должен измениться цвет самого текста и линии, придётся обратится к самому элементу и элементу линии для изменения цвета, но можно заранее в :before или :after прописать background: currentColor тогда нужно будет обращаться только к родителю. Либо если внутри ссылки есть svg иконка, имеющая тот же цвет, что и у текста, то для самой иконки нам нужно написать fill: currentColor, таким образом мы сокращаем код и не повторяемся

​​Svg в html. Svg — разметка позволяющая создавать изображения, которые можно масштабировать без потери качества. Дизайнеры очень часто используют векторные иконки, логотипы и другие элементы дизайна на странице, так вот, как лучше взаимодействовать с данной разметкой? Есть несколько способов, выбирайте тот, который понравиться 1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться  2) Вставить svg прямо в разметку, все так же сохраняете изображение к себе на компьютер, открываете его через редактор и копируете содержимое, потом просто вставляете в разметку и получаете готовую икону, которую можно спокойно изменять, очень просто и удобно, но также имеет свои недостатки, например, если svg изображение очень большое и состоит из множеств элементом, то будет неудобно прописывать ему стили, а также разбираться в коде, если таких изображений много. Подойдёт в тех случаях, когда векторной графики на сайте не много, либо если у вас стоит задача детально работать с svg, добавлять различные анимации, следить за состоянием, изменять при помощи js и тд 3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов 4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку

​​Крутой 3d слайдер. Отличный пример кастомизации swiper.js, много различных интересных элементов, которые в совокупности создают особый эффект, очень круто проработан фон и тени, добавлен дым, освещение и мерцание, что добавляет еще больше атмосферности для слайдера, создан крутой 3d эффект для картинок, демо прикреплю к посту, видео идёт всего час, поэтому можете выделить себе время и насладиться просмотром:

​​#нетвойне. Ребят, думаю каждый знает что произошло 24.02, я долго думал писать или нет. Я проснулся от взрывов, взяв телефон я узнал, что началась война. Поначалу у меня не было чувства страха, а лишь большое непонимание почему это произошло. И по факту неважно кто прав, а кто виноват. Я просто против любой войны и убийства людей. По поводу постов: хотели бы вы чтобы я выпускал сейчас посты или лучше сделать перерыв на неопределенное время? Напишите пожалуйста ниже

​​Any-hover. Иногда ховеры могут смотреться не очень(особенно на телефонах), но иногда они даже мешают, чтобы исправить эту проблему существует специальный медиа запрос @media(any-hover: hover) на caniuse появилась хорошая поддержка и лишь некоторые браузеры(кто-то ещё пользуется IE?) не поддерживают данное свойство, медиа запрос можно вывести в отдельный сниппет и смело использовать в своих проектах. Это будет очень полезно для кнопок, чтобы при нажатии убрать анимацию наведения на телефонах и заменить ее анимацией нажатия. Подробнее про этот и похожие медиа запросы в статье: