Обложка канала

Programmer Way | IT и фриланс

5127 @ProgrammerwayIT
Открыть

Личный блог фронтендера, делюсь мыслями, фишками, материалами для обучения

  • Programmer Way | IT и фриланс

    ​​ScrollReveal. Библиотека для создания анимации при скролле. Если нужно быстро добавить простую анимацию на сайт, то можно использовать эту библиотеку, я использовал её в нескольких своих пет-проектах, у нее есть подробная документация, хотя сама библиотека не такая уж и большая, поэтому рассчитывать на какую-то супер сложную анимацию не приходиться. Если вы хотите создать более кастомную анимацию, то лучше написать с нуля, если же вы хотите сделать сайт более привлекательным для пользователя, добавив небольшие анимации при скролле на сайт и сделать это быстро, то вот отличный вариант. Прикреплю ссылку на пример анимации при помощи ScrollReveal, а также гайд по созданию кастомной анимации при скролле PS: С последним днем лета:)

  • Programmer Way | IT и фриланс

    ​​Переезд в Бельгию. Всем привет, мир меняется, и если вчера можно было говорить, что такая относительно спокойная, умеренная жизнь может продлиться еще десятки лет, то сегодня это уже кажется какой-то утопией. Сейчас у меня начался довольно непростой этап в жизни — переезд в Бельгию из-за войны в Украине, перспективы жить и учиться во время воздушных тревог, рискуя каждый день, далеко не то, что хочется делать в наши дни, поэтому мы решили уехать Почему Бельгия? Просто у нас там есть знакомые, которые пол года назад уже туда приехали и неплохо освоились, а больше у нас вариантов и не было. Не знаю на сколько я тут задержусь, ориентировочно пока все не закончится, может вообще прийдется остаться навсегда. В любом случае, впереди долгий этап интеграции, изучения языка, знакомство с культурой. Да и плюсом будет опыт жизни в Европе Пока страна нравиться, естественно, многое тут по-другому, но при этом очень много схожего, как-никак, живем на одной планете. Буду стараться выкладывать полезные материалы по программированию и делиться успехами в IT и не только

  • Programmer Way | IT и фриланс

    ​​Sinauw. Всем привет! Давно не выходили посты, постараюсь исправиться, думаю нас ждет еще много интересного, буду стараться обо всем рассказывать. На днях закончил верстку лендинга, где было очень много js, на главном экране можно выбрать подходящий курс из предложенных или написать свой, при этом они не могут повторяться + добавил удаление. Также пришлось повозиться с ховерами для карточек курсов, если устройство тачскрин, то показывается просто кнопка, а если есть курсор, то кнопка изначально скрыта и при наведении показывается. Есть плавный скролл к якорю по нажатию на ссылки меню. Еще сделал кастомный видео плеер, он не совсем идеальный, но в целом работает так, как мне надо. В последнем блоке добавил офигенную анимацию сменны оттенка, кому интересно, оставлю ссылку на видео, откуда взял код, анимация реально крутая и делает сайт намного дороже В планах сделать какое-то fullstack приложение, с большим функционалом и крутым дизайном. Получилась отличная практика, думаю сверстать еще пару макетов, результат и код прикреплю к посту:

  • Реклама

  • Programmer Way | IT и фриланс

    Что отвечать на каверзные вопросы на собеседованиях? Знаю, что сейчас многие задумываются над переездом в другую стану или банально ищут более стабильную кампанию за рубежом. Очень важно подготовиться к собеседованию и знать, что ответить когда просят рассказать что-то о себе. Эти вредные зарубежные эйчары любят задавать вопросы, которые ставят людей в тупик. Например: 🔹 Tell us a couple of words about yourself? — Расскажите немного о себе? — Да что сказать: родился, учился, женился… 🔹 Why do you want to work for us? — Почему вы хотите у нас работать? — Потому что мне нужны деньги, а вы их платите! 🔹 Why do you want to leave your company? — Почему хотите уйти из текущей компании? — Начальник дурак и всё делает не так! Поэтому хочу посоветовать вам прийти в этот понедельник на разбор вопросов с собеседования в риал-тайм формате. Проходить это будет в телеграм-канале RelocationDEV

  • Programmer Way | IT и фриланс

    ​​LocalStorage и sessionStorage. Хранилища текстовой информации в браузере. LocalStorage можно сравнить с cookies, но он не отправляется на сервер, а находиться в браузере, соотвественно там можно хранить больше информации(до 5мб). Эта возможность есть только у браузерного api, поэтому не получится обратиться к своему localStorage где-то на сервере Основное отличия localStorage от sessionStorage можно понять с названия: sessionStorage активен пока активна текущая сессия(вкладка браузера), а localStorage сохраняет данные даже при закрытие браузера, поэтому чаще используют именно localStorage Давайте попробуем создать переключатель темы на сайте: 1) Создадим ключ через localStorage.setItem("theme”, ”light”), если ещё не был создан 2) Затем при клике на кнопку будем получать текущее значение localStorage.getItem(“theme”) и если оно равно строке “light”, то обращаемся к localStorage.theme = “dark”, если нет, то наоборот ставим значение light Хотя localStorage хранит только строки, мы всегда можем передать туда json, только не забывайте при получение объекта из localStorage делать JSON.parse. Также советую по посмотреть видео на эту тему:

  • Programmer Way | IT и фриланс

    Самый мощный плагин для создания страниц на WordPress с помощью перетаскивания Этот и другие плагины которые упрощают создание сайтов публикуют на канале Лениво без кода подпишись!

  • Programmer Way | IT и фриланс

    ​​Chart.js. Chart.js — это большая библиотека для создания графиков, гистограмм, радарных диаграмм и тд. Библиотека имеет большой функционал и огромные возможности кастомизации. Есть обширная документация, но, как по мне, в ней мало примеров кода, которые можно сразу скопировать и посмотреть наглядно. Поэтому когда я разбирался с данной библиотекой, то больше искал ответы на stackoverflow или на официальном ютуб канале Chart.js, ниже приведу ссылку на то, что получилось у меня сделать и небольшое видео про данную библиотеку

  • Programmer Way | IT и фриланс

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

  • Programmer Way | IT и фриланс

    ​​🔥 Новый формат получения IT специальности - Буткемп. Что это такое? 💪 Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах. ▶️ Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат. ⚡️ В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 869 человека. 93% из них нашло работу в течение 3 месяцев после выпуска. Буткемп работает как офлайн (Москва и Санкт-Петербург), так и онлайн. ✅ Подробнее о формате Буткемп можно узнать на Дне открытых дверей в ближайщий понедельник. Или записывайтесь на бесплатный мастер-класс, чтобы не терять зря драгоценное время

  • Programmer Way | IT и фриланс

    ​​Mustache.js. Решил немного переделать попапы у себя на сайте, раньше они создавались отдельно для каждого элемента работ и затем, при загрузке новых блоков, их приходилось создавать уже для новых элементов. А еще повторно навешивать обработчик события на них, так как когда скрипт проходился по массиву элементов, то там было одно количество, а после загрузки на странице появились еще элементы, но скрипт уже отработал и не знает, что надо открыть попап по клике на подгрузившийся блок Убрал обработчик с блоков и поставил его на body, чтобы потом просто отлавливать клик по элементу и по кнопке закрытия попапа сразу. Попапы для каждого блока тоже убрал. Теперь каждый раз по клике на блок работы создается новый попап, куда подставляются значения из объекта, который я создал для каждого блока и поместил в data атрибут, это позволило неплохо оптимизировать сайт и теперь вместо 20 блоков всего лишь 1 Блок попапа я поместил в тег template, он не рендерится в DOM дереве и служит для взаимодействия с js, это нужно было для того, чтобы для разных языков были разные попапы. Я, конечно, мог поместить верстку попапа в js, но тогда менять текст кнопок для каждого языка было бы затруднительно, а подключать react по мелочи тоже не хотелось. Поэтому решил для более удобного взаимодействия с template использовать библиотеку Mustache.js, она позволяет легко вставлять данные в свой шаблон и удобно работать с объектами. Эта библиотека отлично подходит для того, чтобы быстро получить готовый html, основанный на каких либо данных, тоже самое можно было бы сделать и через нативный js, через тот же insertAdjacentHTML, но мне было быстрее и удобнее использовать мustache, кому интересно почитать про библиотеку, оставлю статью ниже

  • Programmer Way | IT и фриланс

    Исследование Фриланса в ИТ Проводим опрос опытных фрилансеров, а также тех кто еще не фрилансил. Наша цель: понять с какими проблемами сталкиваются ИТ специалисты на фрилансе / удаленке. Будем благодарны за уделенное время (3-4 мин) и в конце расшарим статистику. https://qvilr70q3v9.typeform.com/to/ZTtJo5rN
    Remote work research

    Turn data collection into an experience with Typeform. Create beautiful online forms, surveys, quizzes, and so much more. Try it for FREE.

    Typeform

  • Programmer Way | IT и фриланс

    ​​Ошибка пути. Всем привет, решил поделиться одним багом, а точнее рассказать про его решение. Однажды решил создать react проект с использованием TypeScript, все вроде бы прошло нормально, но при запуске самого приложение не хватало одного webpack модуля. Решил повторно его установить, но ничего не помогло. Решил загуглить, но единственное, что я нашел — это похожий вопрос без единого ответа. После долгих и мучительных поисков, оказалось, что проблема была не в самом "утерянном" модуле или, как может показаться, в неисправной установке, а в пути. Просто папка, в которую я пытался установить проект, содержала #, что привело к неисправной работе webpack В общем, если у вас появиться проблема, которую вы не можете решить, попробуйте посмотреть на неё с другой стороны, возможно, проблема кроется совсем в другом. Иногда пути решения могут показаться неочевидными, но не стоит сразу бежать и решать в лоб, стоит остановиться и взглянуть на задачу по-другому

  • Programmer Way | IT и фриланс

    ▪️Напоследок дня собрали для Вас подборку IT каналов: 🖥 Чайников.нет — автор канала рассказывает о тонкостях работы с ПК и софтом, одна ссылка заменит тысячу курсов и сайтов. 🔝 'noreferrer nofollow' href='https://t.me/+RxYzhuBcX1ZiOTNi'>Шпаргалки программиста — самые полезные гайды и материалы в шпаргалках. Материалы , которые помогут выйти на новый уровень в программирование. ⚡️ Просто: разработка — Свежие статьи по фронтенду каждый день. YouTube-канал с уроками, а также чат на тысячу человек — прилагаются. 🙌 Типичный Верстальщик — авторский канал веб-разработчицы, где освещается преимущественно верстка сайтов и фронтенд. 👾 '_blank' rel='noreferrer nofollow' href='https://t.me/itsec_news'>ITsec News — новые уязвимости ПО и сайтов, утечки приватных данных, разоблачение хакеров. Если кредитную систему «Сбера» взломают, об этом напишут здесь! 🔥 R4marketing — авторский канал, с огромным количеством русскоязычных обучающих материалов по языку R, must have в области Data Science. 💼 job for devs — лучшие вакансии в сфере IT. Высокооплачиваемая работа доступна из любой точки мира! ☝️Настоятельно рекомендуем подписаться на все каналы

  • Programmer Way | IT и фриланс

    ​​Marico. Недавно сверстал небольшой многостраничник, сам макет был несложный, но я заметил, что моя верстка значительно улучшилась, и хотя до идеала еще далеко, сама верстка становится более надежной. Из примеров могу привести выпадающее меню, которое сделано с учетом тачскринов и корректно работает, позволяя получить доступ к выпадающему списку и самой ссылке меню. В адаптиве старался поменьше прибегать к изменению каких-то базовых стилей, вместо этого использовал адаптивное свойство и перестраивал где надо структуру, так удавалось меньше времени тратить на адаптив и сохранить нормальное восприятие сайта Еще сделал небольшую svg анимацию при скрытии/показе пароля у иконки, но думаю это заслуживает отдельного поста, так как тема анимаций у svg ну очень уж обширная, и я даже не знаю и малой доли от всей этой темы, пока мне достаточно точечно что-то применять для выполнения нужных мне задач Я думаю, что лучше изучать темы по мере их использования и не забивать голову лишней информацией, которая пригодиться в 1/100 случаев, тем более гугл никто не отменял, но это касается только дополнительных тем, все базовые знания должны быть в голове, иначе придется каждый раз гуглить отличия split от splice. А все второстепенные темы можно учить по мере их использования, так как если ты будешь редко их использовать, то, рано или поздно, забудешь их

  • Programmer Way | IT и фриланс

    Дружище привет! Скорее всего ты даже не знал, что есть наше сообщество, но мы это сейчас исправим!)   В нашем сообществе ты сможешь найти: 1. Интересные статьи, которые помогут тебе в обучение. 2. Легкие задачи для повышения уровня знаний 3. Чат с теплотой и поддержкой  4. У нас есть свой Иосиф (рисованный)  Не подписался - не it-шником остался - подписаться

  • Реклама

  • Programmer Way | IT и фриланс

    ​​Smooth Scroll. Небольшая библиотека для создания плавного скролла. Я часто использую её в своих проектах, если вам нужно создать кнопку для прокрутки к какому-то блоку или вверх страницы, то можете подключить эту библиотеку, инициализируете библиотеку через new SmoothScroll туда передаете нужный вам селектор, например все ссылки a[href*="#"] и объект со всеми настойками, по-умолчанию speed, это количество миллисекунд, необходимое для прокрутки на 1000 пикселей, но если вам надо, чтобы прокрутка занимала одинаковое количество времени, то установите speedAsDuration как true, еще есть большое количество типов анимации и событий, подробнее:

  • Programmer Way | IT и фриланс

    Самый низкострессовый способ попробовать себя в роли Frontend-разработчика, не рискуя совершенно ничем: спринт-курс от Хекслета. Основы JavaScript за 2 недели! Вас ждет: 72 урока с практикой в онлайн-тренажере 2 вебинара с разбором сложных тем и полноценная лайвкодинг-сессия помощь и поддержка наставника, развернутая обратная связь. . 😱Ещё раз: не нужно иметь никаких знаний ни в программировании, ни в математике. Курс длится всего 14 дней и даст вам полное представление о профессии и о том, стоит ли погружаться в неё с головой. Начинаем 26 мая. Присоединяйтесь!

  • Programmer Way | IT и фриланс

    ​​Min(), max() и clamp(). Динамика важна, как часто вам приходилось делать динамический адаптив? Иногда нам сложно манипулировать процентами или другими динамическими величинами в css. Чтобы задать некие рамки для динамических значений можно использовать функции min, max и clamp. У них уже достаточно неплохая поддержка, поэтому если вам не надо поддерживать старые браузеры, то можете смело пользоваться Синтаксис очень простой: в функцию min через запятую передаём значения, из которых функция вернёт наименьшее, max соответственно — большее. Clamp тоже довольно полезная функция, которая создаёт уже диапазон значений Приведу простой пример: у нас есть главный экран и фиксированная шапка, экран сделан фулскрином, но контент находиться не по центру экрана, а сдвинут с помощью padding на 30vh вниз. Если просто задать верхний отступ 30vh, то все будет отлично работать, но если высота устройства будет слишком маленькая, то контент будет налезать на шапку, удобным решением будет написать padding-top: max(30vh,100px) тогда если 30vh будет меньше 100px, то все будет отображаться корректно Прикреплю статью с более подробным описанием работы этих css-функций, в частности и про работу clamp

© Telegram-site 2018-2026

Сайт про Telegram каналы(неофициальный) | Почта для связи: [email protected]