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

Scroll Based Animation Анимации и логика их запуска при прокрутке реализованы в JS, без использования библиотек. 👉 @seniorFront

Frontend-разработчики, Сбер приглашает вас познакомиться и пройти все этапы отбора в команду на One Day Offer, который состоится 5 марта ⚡️ Если вы уже больше двух лет занимаетесь коммерческой разработкой, знаете React и получили профильное образование — не упустите возможность стать частью команды и получить оффер всего за один день. 👉 Чем вы будете заниматься, если успешно пройдете техническое интервью? Поддерживать и развивать официальный сайт СберБанка — онлайн-витрину сервисов и продуктов банка, а также его экосистемы. Команда фронтенда в Сбере состоит из 100+ крутых специалистов топ-компаний мира и использует в своей работе автоматизированную инфраструктуру разработки в облаках и только самый современный стек: React, TypeScript, NodeJS, Webpack, PostCSS и др. Если вы хотите стать частью команды — переходите по ссылке, регистрируйтесь на One Day Offer и готовьтесь к собеседованию 😉

​queueMicrotask Это браузерное API, которое выполняет переданный код асинхронно. Принимает функцию, которая будет передана в очередь микрозадач; Возвращает undefined. queueMicrotask(() => { console.log('Хэй, я выполнюсь асинхронно!') }) Код выше схож со сценарием использования setTimeout(). Оба выполнят код асинхронно: setTimeout(() => { console.log('Хэй, я выполнюсь асинхронно благодаря setTimeout') }, 0) Так в чем же принципиальная разница между ними? queueMicrotask() добавляет переданную функцию в очередь микрозадач. Функции в этой очереди выполняются одна за другой (FIFO: First in First Out) — когда текущая функция выполнилась, запускается следующая функция в очереди. Все микрозадачи в очереди будут выполнены только после того, как текущий стек вызовов окажется пустым, но перед выполнением следующей макрозадачей. Если вернуться к сравнению с setTimeout(), то передаваемые в него функции этого относятся к макрозадачам. Каждая из них будет взята из очереди задач, после того как управление передастся циклу событий. Поэтому, если вызвать queueMicrotask() после setTimeout(), или наоборот — функция, переданная в queueMicrotask(), начнёт своё исполнение первой. 👉 @seniorFront

Snow Fox Создано и анимировано на HTML и CSS. 👉 @seniorFront

Двойная сортировка Вам дан массив, состоящий из чисел и слов. Вам нужно написать функцию, которая вернет отсортированный массив, в котором сначала идут числа по возрастанию, а затем слова в алфавитном порядке. Примеры: dbSort(["Banana", "Orange", "Apple", "Mango", 0, 2, 2]) //[0,2,2,"Apple","Banana","Mango","Orange"]); dbSort(["C", "W", "W", "W", 1, 2, 0]) //[0,1,2,"C","W","W","W"]); 👉 @seniorFront

Scroll driven gallery Эффект создается при помощи библиотеки scroll-timeline.js и CSS анимаций. 👉 @seniorFront

Profile Card В этом видео создается и анимируется карточка профиля на HTML, CSS и JS. 👉 @seniorFront

SVG animation Набор SVG картинок, анимированных в CSS. 👉 @seniorFront

Letter Animation Все анимации созданы в CSS. Логика их запуска реализована в JS. 👉 @seniorFront

👉 @seniorFront

Colorful Button Ripple Effects При нажатии на кнопку через JS создаются элементы, которые затем анимируются в CSS. 👉 @seniorFront

Не так давно слово "РЕЛОКЕЙТ" стало очень популярным в России Но у всех, кто думает о переезде ОЧЕНЬ МНОГО ВОПРОСОВ Плюс к тому, каждый день появляется множество новых и непонятных нововведений. И то, что было актуально вчера - сегодня уже не имеет никакого смысла. "Как перейти речку?" Спросить у того, кто ее перешел. С переездом так же. Какую страну выбрать? Как перевести и не потерять деньги? Как не попасть на большие налоги? Как выбрать недвижимость? Решить эти и другие вопросы тебе поможет финансовый советник - Наталья Смирнова Наталья помогла людям переехать более чем в 45 стран! И собрала вокруг себя весь тот опыт, который получила она и ее ученики. Сейчас она рассказывает как сделать релокейт максимально понятным и безопасным. Наталья знает самые последние нововведения и делится только актуальной информацией. Специально для вас Наталья записала эфир – как она выбирала страну для релокейта. Запись доступна по ссылке и действует лишь 24 часа.

Electrified button Внутри кнопки svg картинка, анимируемая при помощи библиотеки gsap. 👉 @seniorFront

🔥Тест по JavaScript от OTUS 🔥 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТ https://otus.pw/fxYG/ 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

​Профессиональная деформация программистов Ни для кого не секрет, что то, чем мы занимаемся большую часть своей жизни, оказывает прямое влияние на нашу личность, склад ума и характера. Любопытно проследить, как меняется человек, когда посвящает свою жизнь программированию. Гиперконцентрация При работе над кодом попросту невозможно на что-либо отвлекаться, нужна максимальная концентрация и сосредоточенность. Программисты часто переносят это состояние и в обычную жизнь. Особенно странно это будет выглядеть при выполнении самых обычных бытовых дел: мытье посуды, пола, стирке и т. д. Трудности с общением или его отсутствие Такие проблемы появляются далеко не у всех, и не всегда, но тенденция все же есть. Проблема в том, что программист все свое время сосредоточен на коде, программе. То есть, большую часть времени он не думает о людях. Именно этот факт и будет отличать его от, например, аккаунт-менеджера, которому приходится долго и продуктивно общаться с клиентами. Причинно-следственные связи повсюду Если код не работает, то он не работает не просто так, а по конкретной причине. Чтобы написать качественный код, обязательно нужно уметь строить причинно-следственные связи.Часто говорят, что программисты обладают техническим складом ума, для них действительно важно продумывать, какое действие какие последствия вызовет, какое развитие событий повлечет за собой даже самое крохотное изменение.В реальной жизни это может проявляться в повышенном интересе к устройству и функционированию практически любой вещи. 👉 @seniorFront

Carousel with drag and wheel Анимация запускается при прокрутке колеса мыши. Сама анимация и логика её запуска созданы в JS. 👉 @seniorFront

​Приглашаю на курс для будущих и начинающих тимлидов Многие проходят путь от работника‑интроверта к лидеру команды, который постоянно работает с людьми. От нового руководителя начальство ждет уже не личных достижений, а успеха целой команды. Появляются новые обязанности и новые вопросы. Как нанимать сотрудников? Как мотивировать? Как организовать рабочий процесс? Я Марина Перескокова, эксперт с 15-летним опытом работы в IT. Последние 7 лет управляю IT-командами. Я прошла путь от разработчика до тимлида и знаю, как тяжело адаптироваться к новой должности: раньше ты спокойно писал код, а теперь — нужно учиться вести переговоры, правильно организовывать время, отвечать не только за себя, но и за команду. 5 марта стартует мой курс для будущих и начинающих IT‑руководителей. Он поможет вам управлять командой увереннее и даст понимание, что и как должен делать тимлид в своей работе. Вы узнаете, как: 📌 Давать обратную связь так, чтобы вдохновлять сотрудников. 📌 Организовать слаженную команду, где все работают эффективно и без конфликтов. 📌 Оставаться эффективным, если весь день приходится бегать по встречам. 📌 Применять Scrum, но не утонуть в менеджерских обрядах. 📌 Сделать из группы людей команду. 📌 Быть тимлидом, которому нравится его работа, а не страдать с понедельника по пятницу. Когда: курс стартует 5 марта и будет длиться два месяца. Формат: онлайн‑вебинары, четыре групповых тренинга и домашние задания с обратной связью. Кому подойдет: будущим и начинающим тимлидам, а еще опытным руководителям, которые хотят систематизировать знания. Буду рада видеть вас на курсе!

Split Landing Page Плавность трансформаций задается при помощи свойства transition со значением ease-in-out. 👉 @seniorFront