all posts Senior Frontend - javascript, html, css

Environment Impact Cards Реализовано на HTML и SCSS. Анимировано библиотекой gsap. 👉 @seniorFront

Stairway В этом видео создается бесконечная анимация лестницы на чистом CSS. 👉 @seniorFront

Wave Создано и анимировано на HTML и SCSS. 👉 @seniorFront

Как ускорить свой карьерный трек на пути к Senior Frontend Developer? 🚀 👉🏻 Если вы только начали свой путь в разработке или уже работаете по профессии, но хотите быстрее расти по грейдам — знакомьтесь с IT Mentor. Это проект, где вы можете стать React-разработчиком без вложений с нуля или усилить скиллы. Все, что нужно, — это мотивация и погружение в нашу образовательную среду. 📚 Мы собираем студентов одного уровня в небольшие группы и даем возможность учиться в комфортном темпе без отрыва от основной работы. 🔥 А главный бонус — оплата за обучение производится только после трудоустройства: если вы не найдете работу (или работу нового грейда с повышением зп)  — ничего не платите. Что будет в программе? ⬇️ — GIT (GITHUB, GITLAB), Основы HTML, CSS3, React, TypeScript, JavaScript, Redux, — работа на реальном проекте под руководством тимлида, —  курс подготовки к собеседованиям и карьерные консультации, где опытные менторы подсветят нужные точки роста и проработают вашу самопрезентацию. Подробнее о курсе и оставить заявку — по ссылке https://clck.ru/3DPkub  🧑🏻‍💻 Реклама. ИП Тюльников ИНН 526223159257.

Radial Menu Animation Кнопка меню - это SVG картинка, анимированная библиотекой gsap. 👉 @seniorFront

Тот самый гаджет, который помогает протянуть до пятницы 👉 @seniorFront

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. Тебя ждёт: 1. Удалённая работа; 2. График свободный от 3-х часов в день; 3. Зарплата от 1000$/мес. 🔥 С нас обучение, практика и помощь с выходом на фриланс. Проводим бесплатный онлайн-интенсив по Frontend-разработке, где показываем, как разрабатывать сайты и веб-приложения. За 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в этом году зарабатывать от 1000$ на вёрстке сайтов. 👉 Пройди 7 дней обучения бесплатно, и ты поймёшь, что это не просто слова

Parallax Text Effects В этом видео реализуется параллакс эффект для текста. Поворот реализован при помощи CSS transform: skew(). Движение текста привязано к курсору при помощи события mousemove. 👉 @seniorFront

Хотите узнать, как программировать игры и приложения, или просто давно мечтали изучить Java? 👩‍💻 Попробуйте свои силы на бесплатном мини-курсе Skillbox! За 4 занятия вы научитесь создавать свои первые программы и получите бесценный опыт в IT👨‍💻 В программе: — Основы языка Java и сравнение с Python — Практика: создаём Telegram-бота, программу для обработки данных и чат на Spring — Живой эфир с экспертом, который ответит на ваши вопросы 🎁 Регистрация подарит вам гайд по профессии Java-разработчика, а также доступ к изучению английского языка на год. Начните бесплатно: https://bootcamp.skillbox.ru/java-short

Volume Control Оба элемента сцены - это SVG картинки, анимированные в JS. 👉 @seniorFront

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс. https://t.me/+ID4yYy2ZhnplNTQy

В помощь разработчику: 6 полезных библиотек визуализации данных Cегодня поделюсь подборкой из шести библиотек, которые помогут в ежедневной работе. Среди них простые и сложные, с возможностью глубокой кастомизации и без нее. Все они могут здорово облегчить работу программиста, когда нужно визуализировать какие-то данные. 👉 @seniorFront

«Группа Астра» проводит первую бесплатную практическую конференцию для разработчиков Astra DevConf 2024. Разработчики ИТ-компаний раскроют секреты эффективной и безопасной разработки, а также поделятся практическими кейсами. На конференции мы: — покажем как реализовать разработку, сборку и тестирование в облаке; — расскажем как легко и просто опубликовать ваше приложение в RuStore; — поведаем, как разрабатывалась Astra Linux восьмого поколения (новый визуальный стиль - Astra Proxima, современная пакетная база и пр.); — развенчаем миф о том, что запустить современные игры на Astra Linux невозможно; — и многое другое. Для участников конференции будет доступен: — личный кабинет разработчика, в котором можно бесплатно скачивать решения «Группа Астра» для целей изучения и разработки (в том числе ОС Astra Linux 1.8); — портал с документацией, где можно найти различные инструменты для разработки, примеры кода и готовые стенды для тестирования. Дата и время: 24 сентября, в 10:00 Формат: онлайн/офлайн Регистрация доступна по ссылке. Поехали!

​Почему брейнштормы бесполезны Вспомните последнюю хорошую идею, которая пришла к вам в голову и при каких обстоятельствах это случилось. Возможно, вы принимали ванну, сидели в парке под деревом, а может быть, вас осенило во сне. Но вряд ли по-настоящему инновационное решение родилось во время командного брейншторма в офисной переговорке или на Zoom-совещании. Метод брейншторма был разработан Алексом Осборном в 40-х годах именно для создания прорывных идей, что же пошло не так? Дело не в самой механике, а в том какие ошибки допускают при её использовании. Приведу самые распространенные недочеты, которые вижу на практике чаще всего. Придумывание идей в группе Типичная картина для крупной организации: приглашают 20-30 человек, чтобы охватить как можно больше мнений и компетенций, всех участников распределяют по командам. Группы отбирают лучшие идеи и презентуют их друг другу. Зачастую результаты у команд похожие или одинаковые, а реально в брейншторме участвуют 5, в лучшем случае 10 человек. Сьюзан Кейн в своей книге «Сила интровертов в непрерывно болтающем мире» приводит несколько причин такой ситуации: - Социальная леность: человек в группе прилагает меньше усилий, чем при индивидуальной работе, так как считает свой вклад менее важным - Снижение продуктивности, Production Blocking: пока самые ассертивные участники группы говорят о своих решениях, другие слушают их, вместо придумывания своих идей - Социальное давление, Evaluation apprehension: люди боятся выглядеть глупо в глазах других и предпочитают умолчать рискованные и смелые идеи - Регрессия к среднему: самые талантливые участники перформят на среднем уровне группы Голосование за лучшие идеи Коллектив голосует не за самую хорошую идею, а за решения ассертивных участников, которые лучше их продают. Еще хуже, если заказчику брейншторма предоставляют только победившие предложения. Г. Бернс доказал, что на уровне биологии мозга мы склонны соглашаться с мнением группы. Плохая модерация Даже волшебный компас не работал, когда капитан Джек Воробей не знал, куда хочет попасть. Модератор должен обладать экспертизой в области задачи, которую решает заказчик брейншторма, в идеале он и проводит мероприятие. Также организатор должен быть в контексте особенностей команды брейншторма: «забирать микрофон» у самых громких и подбадривать тихонь. Эффективность будет значительно выше, если модератор понимает, для чего проводит встречу и как именно будет использованы ее результаты, где расставить акценты и к чему мотивировать группу. 👉 @seniorFront

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Swipeable Video Cards Свёрстано на Pug и SCSS. Логика перелистывания карточек реализована в JS. 👉 @seniorFront

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend tests & tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @Frontend_tasks

​Что такое Virtual DOM? Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом. Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения. Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

В этом случае каждое изменение непосредственно обновляет DOM, что может быть неэффективно при множественных обновлениях.

Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return 
Новый текст
;
  }
}
```

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный. Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной. 👉 @seniorFront

Оптимизация производительности Vue.js приложений: Практическое руководство Vue.js — один из самых популярных фреймворков для создания пользовательских интерфейсов. Однако, как и в любом крупном веб-приложении, при увеличении количества компонентов и данных, производительность может снижаться. Оптимизация производительности — важный аспект, который влияет на пользовательский опыт и SEO-оценки. В этом руководстве мы рассмотрим практические подходы и техники, которые помогут вам улучшить производительность Vue.js приложений. 👉 @seniorFront

Numbers of Letters of Numbers Если мы запишем цифры «60» как английские слова, то получим «sixzero»; количество букв в «sixzero» равно семи. Количество букв в слове «seven» — пять. Количество букв в слове «five» — четыре. Количество букв в слове «four» — четыре: мы достигли устойчивого равновесия. Создайте функцию, которая проведет все эти преобразования и вернет их в массиве. Примеры:

numbersOfLetters(60) --> ["sixzero", "seven", "five", "four"]
numbersOfLetters(1) --> ["one", "three", "five", "four"]

👉 @seniorFront

Scroll Based Animation Логика запуска анимаций при прокрутке реализована в JS. 👉 @seniorFront

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥 Мы научим вас создавать и тренировать нейронные сети, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер: 🧬 Оценка выброса CO2 по параметрам машины 🧬 Сегментация изображения для робота доставщика 🧬 Трекинг людей на видео 🧬 Распознавание речи и другие Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайшую среду. Вы узнаете, как освоить самую востребованную профессию!

CSS SVG Neon Loader Animation Effects В этом видео создается с нуля SVG картинка-загрузчик, анимированная в CSS. 👉 @seniorFront

Большая конференция Яндекс Рекламы на ВТБ Арене 22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут: ✅ Как развиваться специалистам в сфере рекламы ✅ Как продвигаться и продавать в интернете ✅ Какие тренды в маркетинге появляются сейчас Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга. Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично. Конференция бесплатная, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

⭐️21 сентября Альфа-Банк проведёт A?.Frontend Day — конференцию, которую вы не захотите пропустить. 📆Когда: 21 сентября с 10:00 до 19:00 📍Где: офлайн в Москве и онлайн На конференции выступят крутые эксперты, каждый из которых готов поделиться своим опытом и сообщить о новейших разработках: 🧷Вадим Царегородцев из Ostrovok.ru расскажет о Valibot — инструменте, который помогает сделать валидацию данных в JavaScript гибкой и безопасной. 🧷Сергей Попов из Skillbox сообщит о проблемах внедрения изменений в компаниях и предложит способы их решения. 🧷Никита Мамизеров объяснит, как внедряли BDUI в Альфа-Банк, с какими сложностями столкнулись и что в итоге получилось. 🧷Никита Ульшин из Т-банка расскажет о паттернах отказоустойчивости, которые помогут минимизировать риски и обеспечить стабильную работу вашего приложения. Мы подготовили программу на весь день, на A?.Frontend Day вас ждут: онлайн и офлайн-активности, подарки для участников и, конечно же, афтепати, на котором можно расслабиться после насыщенного дня🍸 Регистрация Ещё больше полезного в Alfa Frontend Community

all CSS Реализовано без использования JS. Свёрстано и анимировано при помощи препроцессоров Pug и SCSS. 👉 @seniorFront

👩‍💻 Программирование теперь в Telegram! Вот 8 обучающих каналов по самым востребованным направлениям в IT. Выбирай своё направление: 👩‍💻 Frontend: @code_ready 📖Общее IT: @roadmap_ready 👩‍💻 Python: @python_ready 👩‍💻 Java: @java_ready 👩‍💻 C#: @csharp_ready 👩‍💻 C/C++: @cpp_ready 🖥 Базы Данных & SQL: @sql_ready 🖥 Design: @time_design 📌 Ресурсы, гайды, шпаргалки, книги, задачи и статьи для каждого языка программирования.

Pop Up / Overlay Свёрстано на HTML и SCSS. Логика раскрытия видео реализована в JS. 👉 @seniorFront

Только вчера же отпуск взял 👉 @seniorFront

CSS & JS Background Animation Effects В этом видео создаётся CSS анимация, которая запускается при событии 'mousemove'. 👉 @seniorFront

Share & Social Semicircles Свёрстано и анимировано с использованием возможностей препроцессоров Haml и SCSS. 👉 @seniorFront

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

Отделяй и делегируй или Как безболезненно разгрузить менеджера В этой статье я хотел бы ответить на вопрос: на что нужно обратить внимание руководителю при передаче отдельной функции исполнителю? Или всё достаточно просто, и мы зря здесь сегодня собрались? В термин «функция» я закладываю смысл какой-либо прямой деятельности руководителя. Давайте вместе попробуем разобраться и понять, есть ли подводные камни в этом вопросе и, если есть, то какие. Спойлер: получилась небольшая (большая) шпаргалка, подсматривая в которую, руководителю будет проще понять, на что же обратить внимание при передаче своей функции исполнителю. 👉 @seniorFront

Серия хакатонов в рамках ИТ-конференции «Импульс Т1» стартует в Ижевске! Соревнование пройдёт с 20 по 23 сентября в гибридном формате. Призовой фонд – 600 000 рублей! К участию приглашаются команды начинающих специалистов и опытных айтишников в составе от 3 до 5 человек. Обращаем ваше внимание, что 22 и 23 сентября будет необходимо очное присутствие как минимум троих членов команды! Хакатон Т1 — это 48 часов решения реальных продуктовых задач от одного из ведущих ИТ-холдингов страны! В каждом из двух треков будут определены по 3 команды победителей, которые разделят между собой призовой фонд. Треки хакатона: «SDK приоритезатор: плагин обратной связи по продукту» Создать SDK, который позволит пользователям голосовать за новые функции приложения и/или сайта. Результаты голосования будут передаваться продуктовой команде для улучшения продукта на основе пользовательских предпочтений. «АгроНавигатор: оптимальные полеты БПЛА» Разработайте систему, которая рассчитывает полетные задания для БПЛА с учетом всех летных характеристик и нормальных погодных условий. Призы: 1 место: 140 000 рублей 2 место: 90 000 рублей 3 место: 70 000 рублей Награждается топ-3 команды в каждом из двух треков. Расписание: ➡️ 20-21 сентября — онлайн-этап (открытие задач, два чекпоинта) ➡️ 22-23 сентября — офлайн-этап в г. Ижевск (один чекпоинт, защита проектов) Участники очного этапа хакатона смогут не только побороться за карьерные перспективы и призы, но и — стать частью масштабной ИТ-конференции «Импульс Т1», где эксперты холдинга расскажут о главных трендах индустрии, поговорят об инженерии, науке и технологиях, а также поделятся своим практическим опытом; — получить работу мечты, пройдя собеседование прямо на площадке ИТ-конференции: подать заявку на участие в One Week Offer от Т1 может каждый участник хакатона при регистрации! ➡️ Успейте зарегистрироваться до 16 сентября, чтобы не пропустить приглашение на хакатон: https://cnrlink.com/hackt1izhevskseniorfront Реклама. ООО "Т1". ИНН: 7720484492. erid: LjN8KUW2V

​Анатомия техдолга. Излечим ли пациент? Почти все ИТ-компании имеют технический долг, но не у каждой есть с ним сложности. Где же эта тонкая грань? Данный вопрос становится проблемой, когда он либо бесконтрольный, либо проценты уже слишком высоки. «Долговая яма» очень сильно влияет на вовлеченность команды, особенно в случаях, когда данный код достается «в наследство». Сопровождение такого кода становится тяжелой, а иногда и невыполнимой задачей. Отсюда вытекают негативные последствия: - Большие временные затраты - Сложность внедрения новыx фич, которые могут увеличить сам долг. - Снижение мотивации команды и общей комфортной среды внутри. - Выгорание и отсутствие интереса. Один из основных способов решения – рефакторинг кода (контролируемый процесс улучшения кода или процесса старой кодовой базы без внесения в него новых возможностей). Существуют и другие способы уменьшения долга: - Стабильная реструктуризация и рефакторинг – создание небольших задач на оптимизацию, выделение времени в процессе доработок и внесение нового функционала. - Приоритетность – вытекает из прошлого пункта. Если затраты времени неимоверно высоки, то в приоритете исправить ситуацию, нежели добавить новых фишек и, тем самым, увеличить %. - Внедрение ревью (желательно многоступенчатого), стандартов написания и стиля кода, развитие команды и совместное обсуждение, встречи. Внедрение систем автоматической проверки кода. - Разработка ТД, схем процессов, данных и архитектуры в целом. Помогает выявить проблемы на основе визуализированных и технических данных. Отличный вариант – проектирование полного бизнес-процесса на этапе создания функционала поможет избежать проблем в будущем при определённом уровне команды, поддержка актуальности документации позволит «новичкам» (не только уровень программирования, но и просто новая команда или сотрудник) вникнуть в процесс быстрее и проще. Но данный способ является больше утопией в современной разработке, чем повседневностью. Мы для себя выявили следующе правило – оставь после себя лучше, чем было. То есть при исправлении ошибки или доработке какого-либо файла, мы пробегаемся глазами и стараемся поправить те вещи, которые нам не понравились или видно, что можно сделать лучше. 👉 @seniorFront

sticky stacking on scroll Логика перелистывания карточек реализована в JS и задействуется по событию 'scroll'. 👉 @seniorFront

​Как часто происходит рендер в React? Первоначальный рендеринг Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.

function App() {
  return ;
}

Обновление состояния Когда состояние компонента изменяется, React вызывает рендеринг компонента. Это позволяет компоненту отобразить новые данные.

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    

      
{count}
       setCount(count + 1)}>Increment
    
  );
}

Обновление пропсов Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    

       setValue(value + 1)}>Change Value
      
    
  );
}

function ChildComponent({ value }) {
  return 
{value}
;
}

Обновление контекста Когда значение контекста изменяется, все компоненты, использующие этот контекст, будут ререндериться.

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    
       setValue('updated')}>Update Context
      
    
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return 
{contextValue}
;
}

Обновление при изменении ключа Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    

      {items.map(item => (
        
{item}
      ))}
       setItems([4, 5, 6])}>Change Items
    
  );
}

Чтобы уменьшить количество ненужных рендеров, можно использовать: - PureComponent и React.memo для функциональных компонентов. - shouldComponentUpdate для классовых компонентов. - useMemo и useCallback для мемоизации значений и функций в функциональных компонентах. 👉 @seniorFront

Даты в Javascript наконец-то пофиксят Из всех последних изменений, которые будут внедрены в ECMAScript, моим любимым с большим отрывом от остальных стало предложение Temporal. Это предложение очень прогрессивное, мы уже можем воспользоваться этим API при помощи полифила, разработанного командой FullCalendar. В этой статье я расскажу об одном из его главных преимуществ: у нас наконец появился нативный объект, описывающий Zoned Date Time. 👉 @seniorFront

String incrementer Вам дана строка. Если она заканчивается числом, то прибавьте к этому числу 1. Если она не заканчивается числом, то вставьте 1 в конец строки. Примеры:

foo -> foo1

foobar23 -> foobar24

foo0042 -> foo0043

foo9 -> foo10

foo099 -> foo100

👉 @seniorFront

Trippy Hue Boids Частицы созданы и анимированы на canvas и чистом JS. 👉 @seniorFront

Drag and Drop with JavaScript В этом видео создаётся Drag and Drop на чистом JS при помощи браузерных событий "dragover" и "drop". 👉 @seniorFront

Accordion Оригинальные карточки, свёрстанные и анимированные на HTML и CSS. 👉 @seniorFront

Ищем людей, которые пройдут по нехоженым тропам трэвел-теха и предложат оригинальные решения. Собираемся на О! Хакатоне — мероприятии от Островка с призовым фондом в один миллион рублей. Тебя ждут задания на двух треках: 👉🏻 динамическое ценообразование, 👉🏻 система ранжирования отелей. Также можно будет посетить лекции, мок-интервью и AMA-сессии с разработчиками Островка. Все активности пройдут в онлайн-формате с 28 сентября по 5 октября 2024 года. Участвовать можно из любой точки мира. Регистрируйся по ссылке до 19 сентября и стань автором лучшего тревел-тех-решения.

UI - Flip Card Оригинальные анимированные карточки, реализованные на HTML и CSS. 👉 @seniorFront

🚀 Мок-собеседование в Авито! Как правильно подготовиться к собеседованию на позицию технического руководителя в Авито? Ответ уже на канале AvitoTech по ссылке! Команда Авито вместе с Андреем Смирновым, руководителем клиентской разработки в X5 Tech показывают, как проходит кейс-интервью для технических менеджеров, TeamLead, TechLead, TUL и CTO. Узнайте о формате интервью, задачах, которые предлагаются кандидату, и ключевых ожиданиях от роли. Смотрите сейчас!

Применил паттерн "Адаптер", но что-то пошло не так 👉 @seniorFront

21 сентября в расслабленной обстановке на свежем воздухе пройдёт Код-пленэр от Яндекса! Встретимся с коллегами из Яндекса, чтобы порисовать кодом в саду, послушать про творчество в IT, поделиться опытом решения рабочих и не только проектов и подышать свежим воздухом в одну прекрасную сентябрьскую субботу. Главным событием станет воркшоп по p5.js. На нём ваши навыки программирования пригодятся неожиданным образом: с помощью кода вырастите дерево, которое станет частью общего диджитал-леса. Вечером мы увидим получившийся лес на большом экране. А потом завершим день у костра под DJ-сеты. Заполняйте форму как можно подробнее и регистрируйтесь! До встречи на Код-пленэре! 🔥

Scratch Effects В этом видео создается эффект защитного слоя, который можно стереть курсором. Реализовано на чистом JS. 👉 @seniorFront

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

Pastel drawing buttons Кнопки, стилизованные и анимированные на чистых HTML и CSS. 👉 @seniorFront

Сочи, встречаемся 12 сентября на митапе IT Talk by Sber! ⛱ Must visit событие для разработчиков, тестировщиков, инженеров по сопровождению и владельцев продуктов. Ведь мы собрали экспертов из разных команд и городов, чтобы рассказать об автоматизации работы при помощи AI-ассистента, инженерных процессах и кейсах крупных IT-компаний. Спикеры и темы 👇 ✔️ Владимир Ярославский, Сбер: «Giga IDE: зачем Сберу собственная платформа разработки?» ✔️ Анатолий Шипов, СберТех: «GitVerse – дом для вашего кода» ✔️ Максим Вишневский, Циан: «Функциональные тесты: развёртывание, интеграция в CI и сбор покрытия» Место сбора: конференц-зал «Панорама» отеля SEA GALAXY, ул. Черноморская, 4. Обязательно регистрируйтесь и приходите 12 сентября в 18:30 – не пожалеете! 😉

Как понять, что твой мидл готов стать сеньором? Гайд для тимлида (и не только) Новый грейд — это не просто лычка IT-спеца. По сути, это кульминация работы над задачами и решений различных кейсов, которыми он занимался на своей позиции. Но на этот новый уровень айтишник переходит не один. Важным звеном в процессе повышения разраба зачастую оказывается тимлид — он как наставник должен навести «молодого джедая на путь истинный», помочь своему мидлу наконец-то стать сеньором-помидором. В «Лаборатории Касперского» существует устоявшийся и прозрачный пайплайн повышения мидлов — промоушен-комитет. В этой статье я подробно расскажу об этом процессе с точки зрения руководителя: от подготовки и сбора кейсов до получения кандидатом заветного грейда. 👉 @seniorFront

Мы за бесплатное обучение Подборка каналов для роста и развития в сфере Frontend-разработки 👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке. 💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков. Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

​Типы проблемных разработчиков Почему важно знать разные типы трудных сотрудников? Подумайте об этом в таком ключе: если вы пытаетесь отладить часть кода, вам сначала нужно понять, что делает каждая его строка, верно? Точно так же, чтобы эффективно бороться с проблемным поведением и управлять им, вам сначала нужно понять мотивы сотрудника и как такое поведение может повлиять на команду. Прокрастинаторы Они склонны откладывать выполнение задач, часто сосредотачиваясь на менее важных делах и игнорируя критически важные. У них могут быть проблемы с тайм-менеджментом, они часто недооценивают время, необходимое для выполнения задач. Такое поведение может привести к срыву дедлайнов, стрессу для команды и потенциальным рискам для проекта. Управление прокрастинаторами требует баланса твердости и поддержки. Установите четкие сроки и регулярно проверяйте их выполнение. Заставьте их отчитываться за соблюдение этих сроков. Помогите им расставить приоритеты и при необходимости предложите прокачать навыки тайм-менеджмента. Следите за тем, чтобы они ежедневно обновляли информацию о проделанной работе и завершенных делах в инструментах управления проектами. Помните, что цель не в микроменеджменте, а в том, чтобы направить прокрастинаторов к более здоровым и полезным рабочим привычкам. Одинокие волки Они считают себя самыми компетентными и предпочитают работать в одиночку, часто сопротивляясь совместным усилиям. Ведь зачем вам помощь другого человека, если он намного хуже вас? Обычно они участвуют в командных обсуждениях только для того, чтобы сказать всем, что они «могли бы сделать это за 3 дня». Хотя их самоуверенность иногда может быть преимуществом, она также может привести к разобщенности и потенциальному несоответствию действий целям команды. И самое главное – людям не нравится работать с одинокими волками. Есть два способа управлять одинокими волками – принять их или заставить сотрудничать. Принятие означает, что этот человек очень ценен для вашего бизнеса, и его комфорт важнее, чем общий моральный дух команды. Не рекомендуется, но все же это возможный компромисс, если вы считаете одинокого волка суперпрофессионалом. Обещающие слишком много Люди, обещающие слишком много, склонны чересчур оптимистично оценивать свои возможности или время, необходимое для выполнения задач, и скрывать, когда все идет не так, как планировалось. Даже во время обновления статуса они могут сказать: «все отлично», несмотря на то, что им трудно найти решение и они сталкиваются с препятствиями – потому что все еще надеются закончить задачу в срок. Они часто не выполняют свои обещания, что приводит к разочарованию и недоверию в команде и к владельцам продукта. Управление людьми, которые обещают слишком много включает в себя: - установление реалистичных ожиданий вместе с членами команды; - определение подходящего срока для проекта и разделение его на подзадачи (также вместе с членами команды); - после этого все договариваются, сколько времени займет каждая из этих подзадач. Ещё больше типов, а также дополнительные советы в статье. 👉 @seniorFront

Pixie Dust Input При вводе текста генерируются частицы и анимируются на canvas. 👉 @seniorFront

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

​Назовите отличия директив v-show и v-if во Vue Это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально. Основные отличия Рендеринг в DOM: Элемент с

v-if

рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM. Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display. Переключение состояния:

v-if

: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.

v-show

: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display. Использование в условиях:

v-if

: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.

v-show

: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно. Примеры: С v-if:

export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};

В этом примере элемент

будет добавляться или удаляться из DOM при каждом нажатии на кнопку. С v-show:

export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};

В этом примере элемент

всегда присутствует в DOM, но его видимость контролируется с помощью CSS. 👉 @seniorFront

Клиент-серверная архитектура. SA для самых маленьких Сперва давайте обратимся к всея знаний - великому Интернету и узнаем, что за зверь такой эта клиент-серверная архитектура. Итак, как гласит гугл: Клиент-серверная архитектура — это модель взаимодействия в компьютерной сети, где задачи распределены между двумя основными компонентами: клиентами и серверами. Отсюда понятно, что нам надо разобраться с двумя новыми понятиями: клиент и сервер. Let's go. 👉 @seniorFront

Help the Fruit Guy Вам дан массив строк, представляющий собой набор фруктов - свежих и испорченных. Для испорченных фруктов добавляется приставка rotten. Создайте функцию, которая заменит испорченные фрукты свежими. Пример: Дано -

["apple","rottenBanana","apple"]

Результат -

["apple","banana","apple"]

👉 @seniorFront

ThreeJS Toys Создано и анимировано при помощи библиотеки Three.js 👉 @seniorFront

Только вчера же отпуск взял

Spotlight Effect В этом видео создается эффект подсветки курсора на CSS и JS. 👉 @seniorFront

Services section Свёрстано на HTML и стилизовано при помощи tailwind. Эффект при наведении реализован в SCSS. 👉 @seniorFront

Fractal Lightning Реализовано и анимировано на canvas и чистом JS. 👉 @seniorFront

Объяснил джуну архитектуру проекта 👉 @seniorFront

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Next Level Lightsaber В этом видео создаётся анимация появления текста на чистом CSS. Неоновый эффект реализован при помощи теней. 👉 @seniorFront