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

Если вы разработчик и у вас есть пара минут, порефлексируйте, пожалуйста, с нами о происходящем в небольшом опросе. Ваши ответы помогут крупному работодателю понять, где теперь открывать офисы и какая помощь и поддержка вам нужны. Пройти опрос

Wi-Fi Fail Animation Это SVG картинка, анимируемая в CSS. 👉 @seniorFront

Magic area on hover/focus При наведении или фокусе задействуются gsap анимации. 👉 @seniorFront

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

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

Animated BottomBar Набор из разных анимаций перехода, применяемых к элементам навигационного меню. 👉 @seniorFront

in operator Оператор in возвращает true, если свойство содержится в указанном объекте или в его цепочке прототипов. В примере ниже показаны некоторые способы использования оператора in. // Массивы var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); 0 in trees // true 3 in trees // true 6 in trees // false "bay" in trees // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе) "length" in trees // true (length является свойством Array) // Уже существующие объекты "PI" in Math // true // Пользовательские объекты var mycar = {make: "Honda", model: "Accord", year: 1998}; "make" in mycar // true "model" in mycar // true 👉 @seniorFront

📚Век живи, век учись — пора и Angular открыть! ⏰14 ноября в 20:00 пройдёт открытый урок: "Разработка приложений на Angular. Основные преимущества и возможности" 💢Angular - это мощный фреймворк от Google, который используется для создания мобильных приложений. 📌За 1, 5 часа на занятии с опытным экспертом мы: - Познакомимся с Angular CLI, two-way data binding, templates, routing, services; - Как экономить время на разработке c этими технологиями; - Получим расширяемый, легко поддерживаемый и структурированный код. 👨‍🎓Урок проведёт Виктор Березин, Frontend Architect / Senior Full Stack Developer и преподаватель курса “Angular Developer” в OTUS. 🔴 Чтобы записаться на вебинар, пройдите вступительный тест: https://otus.pw/VNKq/ Это занятие является частью онлайн-курса «Angular Developer» от OTUS.

Pure CSS3 3D Flipbook Loader Создано без использования JS. Состоит из трех элементов, к которым применяется CSS анимация. 👉 @seniorFront

Sum Strings as Numbers Вам даны два числа в виде строк. Создайте функцию, которая вернет сумму этих чисел в виде строки. Это не простая ката, у может возникнуть сложность с большими цифрами. Пример: sumStrings('1','2') // => '3' 👉 @seniorFront

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке! 15–21 ноября Роман Чернов, веб-разработчик с 8-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью. На эти 7 дней план такой: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг; - Получишь советы по доработке своего проекта от профессионального fullstack-разработчика. В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. 👉 Забрать бесплатно 7 дней обучения frontend-разработке А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.

Crazy Pie Chart Диаграмма, созданная из svg картинки, анимированная при помощи библиотеки d3. 👉 @seniorFront

Backgrounds Effects В этом видео автор создает множество блоком, которым задает через HTML задает значения CSS переменным. Исходя из этих значений устанавливаются параметры CSS анимаций. 👉 @seniorFront

Blue dots Создано на canvas и JS. 👉 @seniorFront

Если ты Java-разработчик или фронтендер и не знаешь, кого ждут на митапе BRO.JS в Казани, — прочитай второе слово. Конечно, тебя! Митап — возможность наладить полезные связи, обменяться опытом и узнать прикладную информацию от экспертов. В качестве спикеров выступят senior-фронтендеры СберБанка Онлайн и лидер компетенции web в проекте СберИнвестор. Они расскажут: • об отличиях протокола http3 от предыдущих версий; • как применять технологию WebTransport; • как поддерживать стабильным open-source-решение на enterprise-проектах; • как внутри enterprise-проекта работать с формами; • как сделать переход с selenium-like-инструмента на Cypress. Помимо выступлений спикеров, будут воркшопы, кофе-брейки и вручения призов. 🕖 Дата мероприятия: 14–15 ноября, 17:00 🚩 Место проведения: Казань, ул. Спартаковская, 2к2, школа 21

Old Film Effect Эффект создан на чистом CSS при помощи бесконечных анимаций. 👉 @seniorFront

👉 @seniorFront

Стилизация — неотъемлемая часть работы над любым веб-приложением. Как сделать вёрстку корректной и понять, какие инструменты лучше подойдут для нового проекта или рефакторинга уже существующего приложения? Обсудим это на бесплатном вебинаре «CSS: на чём писать в 2023» вместе с Артуром Стамбульцяном, Frontend Team Lead компании Ton. Разберём технологии PostCSS, Sass, Less, Styled Components, CSS Modules и Tailwind, сравним их друг с другом и выясним, есть ли среди них явный фаворит. Встречаемся в следующий вторник, 15 ноября, в 19:00 (по Москве). Регистрируйтесь по ссылке!