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

Animated Navigation Menu Indicator В этом видео создается меню с иконками и анимированный индикатор, который указывает на активный пункт меню. 👉 @seniorFront

Представляем refine — open-source headless React-фреймворк (6.9K ⭐️ на GitHub) для CRUD-приложений. С ним вы можете быстро создать админку или дашбоард, при этом код останется гибким для изменений.✨ refine бесшовно связывается с UI-фреймворками и поставляется с готовыми интеграциями для Ant Design System, Material UI, Mantine и Chakra UI 🚀 GitHub: https://github.com/refinedev/refine

CSS animation with direction change Демонстрация работы CSS свойства scroll-snap. 👉 @seniorFront

Cityscape При нажатии на части сцены задаются различные CSS классы, которые запускают анимации и трансформации. 👉 @seniorFront

Learn frontend tips - telegram-канал в котором вы найдёте подсказки для frontend разработчиков по: ✓ HTML ✓ CSS ✓ JavaScript ✓ UX/UI

👉 @seniorFront

CSS Text Hover Animation Effects В этом видео создается эффект при наведении на текст при помощи стилизации псевдо элементов. 👉 @seniorFront

Column chart with pie charts inside Демонстрация работы диаграмм, построенных при помощи библиотеки amCharts. 👉 @seniorFront

🟡Что нового в PostgreSQL 15? Обсудим 31 января 20:00 на открытом уроке онлайн-курса «Базы данных» в OTUS вместе с 🧑‍💻 Евгением Аристовым, разработчиком с 20-летним опытом и архитектором баз данных — https://otus.pw/UB2D/ На вебинаре «PostgreSQL 15. Новый функционал» мы обсудим: 🟠Деплой в Yandex Cloud и настройку защищенного подключения. 🟠Варианты обновления с предыдущих версий PostgreSQL и их особенности. 🟠Подводные камни при обновлении версий. ⚠️ Материал будет полезен разработчикам и администраторам. ➡️Для РЕГИСТРАЦИИ на занятие пройдите вступительный тест https://otus.pw/UB2D/

Neon Cursor Реализовано при помощи Three.js. Настройки анимации задаются в JS. 👉 @seniorFront

​Какие навыки стоит прокачать программисту чтобы зарабатывать больше Навык № 1 - Разговорный английский язык Как удаленка существенно расширяет выбор работодателей, так и средний (B1, Intermediate) уровень владения разговорным английским языком открывает дополнительные возможности работать на иностранные и международные компании или аутсорсеров, обслуживающих иностранных клиентов. Навык № 2 - Самопрезентация Каким бы крутым специалистом вы не были, никто об этом не узнает, если вы сами не сможете об этом хорошо рассказать, то есть презентовать себя. Как минимум, нужно уметь понятным языком рассказывать о том, что вы делали в своей предыдущей профессиональной деятельности - над какими проектами вы работали, какую пользу это принесло вашему работодателю и его клиентам. Желательно подготовить рассказ о себе и своей профессиональной деятельности в нескольких форматах по времени - на 30 сек, на 2-3 минуты, на 5-7 минут, на полчаса. Тогда вопросы - “расскажите о себе” или “чем вы занимаетесь” - не будут ставить вас в тупик. Навык № 3 - Самоорганизация Удаленная работа требует более высокой самодисциплины, так как часто никто не следит, чем вы занимаетесь. Поэтому стоит изучить методики самоорганизации и применять их. Наличие самодисциплины и развитых навыков самоорганизации считается признаками опытного и высококвалифицированного специалиста. 👉 @seniorFront

Minimal keyboard Верстка создана с использованием возможностей препроцессоров Pug и SCSS. В JS реализована логика запуска анимаций при нажатии на соответствующие кнопки клавиатуры или на виртуальные кнопки при помощи мыши. 👉 @seniorFront

​Метод reduce Метод arr.reduce(callback[, initialValue]) используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата. Он применяет функцию callback по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат. Аргументы функции callback(previousValue, currentItem, index, arr): previousValue – последний результат вызова функции, он же «промежуточный результат». currentItem – текущий элемент массива, элементы перебираются по очереди слева-направо. index – номер текущего элемента. arr – обрабатываемый массив. Кроме callback, методу можно передать «начальное значение» – аргумент initialValue. Если он есть, то на первом вызове значение previousValue будет равно initialValue, а если у reduce нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.

 var arr = [1, 2, 3, 4, 5]

// для каждого элемента массива запустить функцию, // промежуточный результат передавать первым аргументом далее

 var result = arr.reduce(function(sum, current) {
   return sum + current;
 }, 0);
 alert( result ); // 15

sum - предыдущий результат current - текущее значение 0 - initialvalue 👉 @seniorFront

Snow Реализовано без использования JS. Каждому элементу рандомно задается размер и время падения в SCSS. 👉 @seniorFront

Stones on the Table У Боба на столе в ряд лежат камни. Каждый камень может быть красным, зеленым или синим (R, G, B). Помогите Бобу найти минимальное количество камней, которое ему нужно убрать со стола, чтобы все смежные камни были разных цветов. Примеры: "RGBRGBRGGB" => 1 "RGGRGBBRGRR" => 3 "RRRRGGGGBBBB" => 9 👉 @seniorFront

Experimental Gradient Editor Приложение для генерации градиента, написанное на Vue. 👉 @seniorFront

Animated Circular Our Team В этом видео создается раздел страницы "Наша команда" в оригинальном стиле на CSS и ванильном JS. 👉 @seniorFront

Бесплатное обучение дизайну с нуля. Вместе сделаем портфолио из 4+ работ с личной поддержкой от наставника. Что вы получите? — Фидбэк (мощный разбор всех ДЗ от куратора) — Тусовка (личный кабинет с уроками + живой чат) — Портфолио и экзамен (упакуем по урокам и проверим) — Мастер-класс "как заработать на дизайне" и найти клиента 🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов. → Начать обучение бесплатно Программа бесплатного курса: — Обучение по Figma с нуля и 4+ дз с личным разбором — Изучение основ дизайна (контент, сетки, композиция т.д.) — Создание анимации интерфейса — Все о профессии и доходе дизайнера (поиск клиентов и реальный доход) 👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы