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

Как мы сделали незаметную капчу? Как сделать так, чтобы капча работала и отсеивала ботов, а пользователям не приходилось вводить текст с картинки? На этот вопрос отвечают разработчики Yandex SmartCaptcha — в статье они делятся историей создания сервиса, рассказывают про изменение кода, рефакторинг архитектуры, невидимую для пользователя проверку и заботу о людях. Читайте статью в новом блоге Yandex Cloud и Yandex Infrastructure на Хабре, и не забудьте подписаться, чтобы не пропустить истории о том, как мы строим инфраструктуру Яндекса и делаем публичную облачную платформу.

Night && Day Toggle Button Внутри переключателя находится svg картинка, которая анимируется в CSS. 👉 @seniorFront

Какие свойства CSS можно использовать для создания анимаций и плавных переходов? Некоторые из наиболее распространенных свойств: 1. transition - позволяет задать плавный переход между двумя состояниями элемента, например, изменение цвета фона при наведении мыши. 2. animation - позволяет создавать сложные анимации с помощью ключевых кадров (keyframes), которые задают различные состояния элемента на разных этапах анимации. 3. transform - позволяет изменять форму, размер и положение элемента, включая повороты, масштабирование, смещение и т.д. 4. filter - позволяет применять различные эффекты к элементам, такие как размытие, насыщенность, яркость и т.д. 5. opacity - позволяет изменять прозрачность элемента. 6. scroll-snap - позволяет создавать плавный скроллинг между различными элементами на странице. 👉 @seniorFront

Какие паттерны в React нужно знать JS-разработчику? ✔️Разберем основные паттерны на открытом уроке 16 мая в 20:00 мск в OTUS. Занятие пройдет в рамках онлайн-курса «React.js Developer» в OTUS. На занятии мы также применим несколько часто встречающихся паттернов на практике. Больше навыков работы с React.js вы сможете получить на курсе. Хороший разработчик всегда думает о качестве и удобстве использования кода, особенно при написании библиотек компонентов. Сообщество React разработало несколько классных паттернов, которые помогут создать идеальные компоненты с лучшей контролируемостью и расширяемостью. ✍️Для участия пройдите вступительный тест https://otus.pw/K8mX/ Курс доступен в рассрочку. Нативная интеграция. Информация о продукте www.otus.ru

3D Cards Вёрстка реализована с использованием возможностей препроцессоров Pug и SCSS. В JS создана логика поворота карточки, зависящая от положения курсора пользователя. 👉 @seniorFront

Убрать минимум Напишите функцию, которая принимает массив чисел, обрабатывает его и возвращает новый массив, в котором не будет самого меньшего числа из данного массива. Если наименьших чисел несколько, функция должна убрать число с наименьшим индексом. Примеры: removeSmallest([1,2,3,4,5]) = [2,3,4,5] removeSmallest([5,3,2,1,4]) = [5,3,2,4] removeSmallest([2,2,1,2,1]) = [2,2,2,1] 👉 @seniorFront

Navigation bar concept Оригинальное меню, созданное на HTML и CSS. 👉 @seniorFront

Futuristic CSS Animated Card В этом видео создаются анимированные карточки с эффектами при наведении. 👉 @seniorFront

Add Button Interaction Это svg картинка, анимированная при помощи сервиса SVGator. 👉 @seniorFront

Это — Антон Резник, у него более 12 лет опыта во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд? Антон с нуля создал веб-версию Telegram на базе собственной реализации реактивного UI-фреймворка. А ещё однажды он написал систему «Умный дом» для своей квартиры на чистом JavaScript! Сейчас Антон тимлид в команде рекламы ВКонтакте, где создаётся frontend нового рекламного кабинета. Его работа состоит из сложных архитектурных решений, задач производительности и интеграций с другими командами. Вместе со своими коллегами с не менее классным опытом, Антон собрал весь свой опыт воедино на курсе Frontend. По секрету расскажем, что там действительно много практики и инсайтов индустрии. Так что если вы junior+ или middle фронтендер и хотите научиться работать над масштабными проектами, вам сюда! Новый поток стартует 18 мая, а по промокоду SENIORFRONT20 вы получите скидку 5%. Советуем начать учиться прямо сейчас, так как с 15 мая цена на курс поднимется. Начать обучение

👉 @seniorFront

Order button animation Анимация реализована при помощи библиотеки gsap. 👉 @seniorFront

Login Form В этом видео создается анимированная форма входа на HTML и CSS. 👉 @seniorFront

Bouncy Block Clock Оригинальные часы, логика работы которых создана в JS. Анимации реализованы в CSS. 👉 @seniorFront

Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC 18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем: — Плюсы и минусы микросервисного подхода — Как мигрировать монолит на микросервисы — Решение на базе NodeJS + протокола GRPC. В результате у вас будет база для создания своего микросервиса на NodeJS. Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты. Для участия пройдите вступительный тест https://otus.pw/rNGY/ Нативная интеграция. Информация о продукте www.otus.ru

Sparkly Button Эффект при наведении создается при помощи теней и CSS анимаций. 👉 @seniorFront

​Способы стать лучшим разработчиком Управление продуктом - Учитесь проводить исследования и делать выводы на их основе. - Изучите несколько способов документирования требований (Jobs to be Done, истории пользователей в Given-When-Then и т.д.) - Изучайте и практикуйте общение с заинтересованными лицами(стейкхолдерами). - Устройте интервью с менеджером по продуктам (оплатите ему обед или кофе). Это будет крайне полезный опыт, я обещаю. Смотрите интервью менеджеров по продуктам в интернете. - Изучите лучшие техники по общению с подчиненными и мотивации людей непосредственно без прямого управления. Научитесь влиять на других. - Узнайте, как тестировать идеи, проверять варианты с помощью A/B или многовариантного тестирования. - В вашей нынешней компании возьмите на себя ответственность предлагать инновационные идеи и применять неординарный подход к проблемам. - Слушайте различные подкасты про менеджмент и другие источники информации, которые помогут вам расти. Управление проектами - Изучите некоторые приемы и методы управления проектами/программами. - Улучшите свои навыки тайм-менеджмента. - Изучите несколько инструментов для управления проектами, таких как Jira, Asana, Trello. - Узнайте, на какие этапы делятся большие проекты. Например, что нужно, чтобы построить мост или здание. Маркетинг - Узнайте от корки до корки о SEO, платном поиске, рефералах, email-маркетинге, социальном маркетинге и т.д. - Узнайте о контент-маркетинге, копирайтинге и используйте свои навыки письменного общения, чтобы делиться с людьми решениями их проблем, продвижением продуктов и т.д. - Соберите примеры лучших продающих текстов, рекламы и других материалов для дальнейшего использования в качестве источника вдохновения. - Выучите базовую аналитику (включая инструменты и подходы), воронку конверсии, отток и другую метрику, которую вы бы хотели использовать в вашем маркетинге. - Читайте топовые книги по маркетингу, влиянию на людей и брендингу. Например, «22 Непреложных Закона Маркетинга» и другие. 👉 @seniorFront

Futuristic Dial Button Свёрстано на HTML и SCSS. В JS прописана логика смены классов при нажатии на кнопки. 👉 @seniorFront