Senior Frontend - javascript, html, css. Страница 48

Just a Marble Создано на canvas и анимировано при помощи WebGL. 👉 @seniorFront

👉 @seniorFront

Shopping Cart Preloader Оригинальный загрузчик, созданный из svg картинки, анимированной в CSS. 👉 @seniorFront

Calculate age in years Создайте функцию, которая принимает две даты. Она должна посчитать разницу в годах между этими датами. Примеры: getAge(new Date('1913/01/01'), new Date('2013/01/01') === 100 getAge(new Date('2008/02/29'), new Date('2032/03/01')) === 24 getAge(new Date('2008/01/01'), new Date('2000/01/01')) === -8 👉 @seniorFront

Menu micro-interaction Кнопка, открывающая навигационное меню, созданная на HTML и SCSS. 👉 @seniorFront

scroll-behavior Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной. При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll-behavior не повлияет на поведение браузера. html { scroll-behavior: smooth; } 👉 @seniorFront

CSS Only 3D Text Rotation Animation Effects В этом видео автор создает 3D текст. Для этого он создает CSS переменные для каждой текстовой строки. Значения для этих переменных задаются в HTML через инлайн стили. После этого он использует в CSS эти переменные, в CSS transform, устанавливая тем самым градус поворота теста. 👉 @seniorFront

Weather Box Реализовано с использованием препроцессоров Pug и Sass. 👉 @seniorFront

Онлайн-митап «Асинхронный рендеринг в React 18 и принципы практичного рефакторинга» ⏰ Дата и время: 24 августа, 14:00 (по МСК) Программа митапа: 🎙Рефакторинг. Как поджечь свой велосипед и не пожалеть об этом? Рассмотрим проблему техдолга под разными углами, поговорим о том, что учитывать и какие практики использовать, чтобы обойти подводные камни, уменьшить риски и держать ситуацию под контролем, обсудим какие аргументы уместно предоставить менеджеру, чтобы развеять его опасения. 🎙Чудеса асинхронного рендеринга Рассмотрим под лупой асинхронный рендеринг в React проведем краткий экскурс в его историю, путь становления от экспериментальной фичи до полноценного появления в React 18, посмотрим на текущее состояние, что его ждет в светлом будущем и причем тут fiber. 👉 Подключайтесь, смотрите и задавайте вопросы спикерам. Участие бесплатное, нужно только зарегистрироваться. До встречи 🔥

Mobile Tab Navigation Простое меню с табами, которое переключает картинки. Сверстано на HTML и CSS. Логика переключения реализована на чистом JS. 👉 @seniorFront

text-overflow Свойство text-overflow определяет, как будет обрезаться текст, если он не влезает в доступную область полностью. Работает только если элементу заданы также свойства white-space со значением nowrap и overflow со значением hidden, scroll или auto. Код ниже обрежет текст, добавив в конце строки многоточие. Также добавлены свойства, без которых text-overflow не сработает: p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 👉 @seniorFront

CSS Icon Hover Effects В этом видео для каждого элемента автор создает два блока - один с иконкой, а второй с текстом и градиентом. При наведении первый блок скрывается, а второй показывается. Плавность достигается использованием CSS transition. 👉 @seniorFront

Scaleable buttons Кнопки, сверстанные на Html и Less. Каждая кнопка - это чекбокс, при активации которого задействуются CSS анимации. 👉 @seniorFront

Найти работу в айти можно 2 методами: Первый. Бесконечно скроллить HeadHunter и пытаться что-то выклевать на LinkedIN. Офигеть от условий и закрыть. Второй. Подписаться на JavaScript Job. Это база адекватных предложений, где даже для новичков много мест с хорошей з/п. Тут найдете работу как в Яндексе (именно сюда крупняки присылают вакансии напрямую), так и в молодых стартапах! В общем, не теряйте времени и находите работу в 2 клика: @JScript_jobs

Radio scanning Сцена создана на canvas и чистом JS. 👉 @seniorFront

​Программист нашего времени: кто он — ремесленник или мастер Попробуем разобраться, почему программирование из искусства и творчества превратилось в повседневный рутинный конвейер. Потогонный конвейер Релизы следуют один за другим, все участники разработки ПО вечно не укладываются в намеченные сроки и работают сверхурочно. И всё это делается с одной целью — поскорее продать потребителю готовый продукт. Тут уже не до изысков разработки и не до качественного кода — конвейер не должен останавливаться. Пластмассовый мир С другой стороны, кому сейчас нужны долговечность и качество? Большая часть написанного кода будет использоваться в системе максимум несколько месяцев, а затем будет заменена или переработана. Какой тогда смысл писать этот код идеально? Набор «Сделай сам» Современная среда разработки ПО тоже не поощряет программистов к написанию быстрых и эффективных приложений. Для создания даже простейших решений используются многочисленные фреймворки, платформы. Эти инструменты упрощают и ускоряют разработку. Но при этом процесс программирования превращается в сборку программ из готовых кубиков-блоков. Искусство программирования Так кто же такой современный разработчик? Похоже, что в современном мире разработки творческих мастеров совсем не ждут. Часто приходится встречать такое отношение «Программирование — это ремесло и программист с творческим подходом к делу вреден и брать на работу не надо».Многие из мастеров, чтобы выжить, вынуждены маскироваться под ремесленников: иначе не получится уложиться в запредельно сжатые сроки разработки. 👉 @seniorFront

Поиск Frontend вакансий для мидлов и сеньоров ⚡️ Ребята из Masterhub создали чат-бота, который рассылает разработчикам релевантные Frontend вакансии без спама Настрой бота за 1 минуту и получай до 50 вакансий в неделю, отобранных по твоим предпочтениям @MasterHuBot

Custom wire geometry Создано и анимировано при помощи библиотеки Three.js. 👉 @seniorFront