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

Todo List Сделан на React и TypeScript. Анимации реализованы в SCSS. 👉 @seniorFront

Morphing Submit Button Содержимое кнопки - svg картинка. При нажатии на кнопку изменяются CSS классы на элементах кнопки. 👉 @seniorFront

​Что такое адаптивность Адаптивность сегодня – это возможность оставаться эффективным на фоне постоянно меняющихся обстоятельств. ⠀ По сути, адаптивность = приспособляемость к переменам. И чем быстрее ты это делаешь, тем эффективнее работаешь. Но у такой гибкости есть свои нюансы: ⠀ - Адаптация к переменам всегда идет рука об руку со стрессоустойчивостью. Невозможно быть гибким, не умея управлять собственным стрессом; ⠀ - Когда ты легко принимаешь перемены, то этап стагнации дается очень тяжело. Именно в этот момент можно тренировать навык адаптивности. ⠀ Несколько советов: 1. Избегайте долгосрочных постановок. Короткие спринты позволят вам быстрее увидеть результат, а рухнувшие планы не будут выбивать из колеи. ⠀ 2. Снижайте тревожность. Простой инструмент – проигрывайте сценарии самого плохого развития событий в своей голове заранее. Разработайте план действий, смотрите шире. Так вы подготовите мозг и не будете паниковать в момент стресса. ⠀ 3. Пробуйте себя в разной деятельности. Если вы технарь до мозга и костей - попробуйте написать художественную историю. Если вы никогда не танцевали – сходите на пробное занятие. Никогда не ели морепродукты – самое время попробовать. Новый вид деятельности формирует в мозге новые нейронные связи, что делает ваш образ мышления более гибким. 👉 @seniorFront

27 апреля AGIMA проводит новый вебинар для тимлидов. Расскажут о наставничестве, грейдировании и архитектуре. Ссылка на программу митапа. Он подойдет тимлидам, менеджерам проектов и разработчикам любого уровня. Программу составили так, чтобы охватить как Soft, так и Hard Skills. Поэтому интересно будет всем, кто работает с командой. Затронут 3 блока тем: — как стать крутым наставником для команды; — как грамотно выбрать архитектуру для проекта; — как мотивировать сотрудников. Обо всем расскажут на примерах из практики. Дадут конкретные советы, поделятся опытом. Тезисы докладов и регистрация — по ссылке выше. Старт 27 апреля в 19:00 мск. Присоединяйтесь!

Random Stacked Images При загрузке страницы активируется скрипт, который выводит рандомные картинки с рандомным градусом поворота. Анимации реализованы при помощи web animation API. 👉 @seniorFront

👉 @seniorFront

Curvy Koi Fish Сцена сделана при помощи препроцессоров Pug и SCSS. Для вращения автор анимирует CSS свойство transform со значением rotate. 👉 @seniorFront

Object extend Создайте функцию, которая принимает несколько объектов в качестве параметров и возвращает новый объект со всеми свойствами из входных объектов. Примеры: extend( {a: 1, b: 2}, {c: 3} ) // should === {a: 1, b: 2, c: 3} extend( {a: 1, b: 2}, {c: 3}, {d: 4} ) // should === {a: 1, b: 2, c: 3, d: 4} extend( {a: 1, b: 2}, {a: 3, c: 3} ) // should === {a: 1, b: 2, c: 3} 👉 @seniorFront

Text by circles Текст создается на canvas, в js создана сложная логика отрисовка букв. 👉 @seniorFront

Принцип каскада Каскад — одно из важнейших понятий в CSS. Само название CSS — Cascading Style Sheets, «каскадные таблицы стилей» явно упоминают это неочевидное определение. Точнее, в определении каскада принимает участие не только специфичность, но и в первую очередь источник этих правил и область видимости. Также имеет важное значение порядок в коде (какие свойства были объявлены «позже», те «важнее»). Источники правил Чем выше — тем «важнее»: 1. Стили во время CSS-переходов (transition); 1. Браузерные стили с !important; 2. Пользовательские стили с !important; 3. Авторские (мы с вами пишем именно эти стили) стили с !important; 4. Стили во время анимаций; 5. Обычные (т. е. без !important) авторские стили; 6. Обычные пользовательские стили; 7. Обычные браузерные стили. 👉 @seniorFront

​Рынку требуются Frontend-разработчики уровня PRO. Обучение и трудоустройство берём на себя От вас: — Желание стать востребованным IT-специалистом и зарабатывать от 180 000 руб/мес (по данным сайта hh. ru) — Наличие компьютера или ноутбука — Возможность уделять от 4 до 6 часов в неделю на обучение и немного упорства От нас: — Знания, навыки и компетенции, которые требуют на собеседованиях крупные кампании — Сильный преподавательский состав экспертов-практиков в IT-секторе — Cтажировка в Geekbrains и трудоустройство после обучения Что нужно будет делать: Frontend-разработчик отвечает за внешний вид сайта или мобильного приложения: он верстает шаблоны, красиво оформляет текст и изображения, улучшает взаимодействие пользователя с интерфейсом. Без frontend-разработчика не получится создать удобный цифровой продукт. Освоить все эти необходимые навыки с нуля и получить востребованную IT-специальность вы можете на онлайн-курсе “Факультет Frontend-разработки” с гарантированным трудоустройством от Geekbrains. Курс идеально подходит для новичков, начинающих веб-разработчиков и практикующих IT-специалистов. За это время вы с нуля научитесь:: — Верстать сайты и овладеете адаптивной версткой. — Создавать одностраничные приложения. — Работать с HTML и CSS, Node.js. — Владеть инструментами для модульной сборки — Parcel и Webpack. — Использовать Vue.js и основных библиотек его экосистемы, разрабатывать компоненты на Vue.js. — Работать с библиотекой ReactJS. — Использовать концепцию Flux с применением библиотек Redux. А по итогу обучения под наставничеством опытного ментора вы создадите 5 дипломных проектов, пройдете этапы профессиональной разработки: от поиска идеи до тестирования и релиза продукта и получите опыт командной разработки. Во время обучения вас ждёт самая настоящая стажировка в Geekbrains, результатом которой станут: умение работать в команде, пополнение портфолио, возможность указать работу над проектом в качестве профильного опыта работы в резюме. И это еще не всё! Мы дарим подарки всем студентам: Изучение английского языка с Kespa Английский для IT - специалистов Ключ от продуктов JetBrains Пока вы читаете этот пост, кто-то уже записался на онлайн-курс «Факультет Frondend-разработки». Переходите по ссылке и оставляйте заявку: https://clc.to/zVSXKg

CSS Light Bulb В этом видео автор создает оригинальный loader, состоящий из ламп. Сама лампа состоит из двух картинок - включенной лампы и выключенной. Для создания перехода между картинками автор использует CSS keyframes. 👉 @seniorFront

Scroll Rocket Автор обрабатывает событие "scroll", изменяет стили ракеты и неба. 👉 @seniorFront

Из джуна в мидл разработчика: какие навыки нужны, чтобы расти по грейдам?🚀 Главной трудностью начинающих фронтенд-разработчиков является непонимание, в какую сторону развиваться и какие навыки прокачивать, чтобы расти профессионально. Чтобы помочь разработчикам, мы создали Карту компетенций и собрали все основные навыки, востребованные на рынке фронтенд-разработки. По этим навыкам мы подготовили курсы, которые помогут прокачаться до мидла и решать более масштабные задачи, расти в доходе и проходить собеседования в крупные продуктовые компании. О том, с чего начать обучение джуну и какие навыки развивать, мы рассказываем в статье⚡️ Перейти к статье📝

Animated Social Links Каждый блок состоит из нескольких слоев, стили которых изменяются при наведении. 👉 @seniorFront

​Шифрование в вебе Интернет был создан как компьютерная сеть передачи данных военного назначения. Удивительно, но интернет сам по себе не содержит никаких специальных возможностей для шифрования данных. Вся ответственность и нагрузка по передаче конфиденциальных данных лежит на плечах пользователей сети. Так, письма, веб-страницы, данные пользователей, документы на протяжении большого времени передавались в открытом виде, чем активно пользовались злоумышленники. Только в последние годы ситуация начала меняться. Браузеры требуют от сайтов использовать сертификаты безопасности, почтовые серверы используют защищённые протоколы для пересылки писем, программы используют защищённые API, некоторые операции с данными пользователей возможны только при наличии ключей доступа (токенов или электронной подписи). Шифрование в вебе, за исключением отдельных специальных случаев, можно свести к нескольким вариантам: - Защищённые протоколы передачи данных. - Сертификаты безопасности. - Электронная цифровая подпись. - Хэш-функции. Подробнее о сертификатах безопасности можно прочитать в статье «SSL-сертификаты». Протоколы TLS, HTTP, HTTPS описаны в статьях «Протокол HTTP» и «Работа с сетью». 👉 @seniorFront

Infinity В этом видео автор создает множество span элементов, которые стилизует и анимирует в CSS. 👉 @seniorFront

Expanding flex cards При нажатии на карточку изменяется её CSS свойство flex-grow. Плавность достигается использованием transition-duration. 👉 @seniorFront