Background Animation

В этом видео создается анимация при движении мыши на CSS и JS.

👉 @seniorFront

Реакция разраба на дизайнера, который презентует концепт сайта с анимациями и эффектами

👉 @seniorFront

Lightweight Water Distortion Effect

Реализовано на canvas и чистом JS. Можно изменять параметры анимации, а также подгружать свою картинку.

👉 @seniorFront

Social Card Hove

Карточки, свёрстанные на HTML и CSS.

👉 @seniorFront

Image Trails Effects

В этом видео создается эффект проявления картинок при движении мыши на чистом CSS.

👉 @seniorFront

Business Card

Карточка - визитка web разработчика, реализованная на HTML и SCSS.

👉 @seniorFront

Пивомида

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

Пирамида пивных банок возводит в квадрат количество банок на каждом уровне: 1 банка на верхнем уровне, 4 на втором, 9 на следующем, 16, 25...

Завершите функцию beeramid, чтобы получить количество полных уровней пирамиды из пивных банок, которую вы можете построить, учитывая параметры:
ваш реферальный бонус и цена банки пива

Пример:

beeramid(1500, 2); // should === 12
beeramid(5000, 3); // should === 16

👉 @seniorFront

SOLID на котиках

Каждый программист хоть раз слышал о принципах SOLID. На собеседованиях и экзаменах в вузах многие из нас пытались вспомнить, о чем же был тот самый принцип Лисков. Однако вряд ли цель преподавателей и интервьюеров — заставить нас заучивать строчки из учебников. SOLID действительно помогает писать качественный код, когда во всем разберешься! Если вы этого еще не сделали, добро пожаловать под кат. Еще раз взглянем на то, как устроены всем известные принципы. Обещаю — без духоты, все рассмотрим на примерах с котиками.

👉 @seniorFront

​В чём разница между event.preventDefault и event.stopPropagation?

event.preventDefault() и event.stopPropagation() — это два метода, которые используются для управления поведением событий в JavaScript. Они выполняют разные задачи и полезны в различных сценариях.

event.preventDefault()
Предотвращает поведение браузера по умолчанию для события. Это может быть полезно, когда вы хотите отменить действие, которое обычно происходит при определенном событии.

Примеры:

Отмена отправки формы:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не отправлена!');
});

Отмена перехода по ссылке:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Переход по ссылке отменен!');
});

event.stopPropagation()
Предотвращает дальнейшее распространение события по дереву DOM. Это полезно, когда вы хотите остановить событие от всплытия (bubbling) или захвата (capturing) к родительским элементам.

Примеры:

Остановка всплытия события:

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Клик на child');
});

document.querySelector('.parent').addEventListener('click', function() {
  console.log('Клик на parent');
});

В этом примере клик на .child элемент не вызовет обработчик клика на .parent элементе.

👉 @seniorFront

Looping words

Стилизовано в CSS и анимировано библиотекой gsap.

👉 @seniorFront

​Почему программисты никогда не вымрут

Буквально 20 минут назад прочел статью - Сгенерированный ИИ код сделает вас плохим программистом. И у меня созрела мысль, которую я до этого нигде не читал.

Итак, о чем статья то. Я ни в коем случае не обесцениваю труд автора, но я прочел ее краткое содержание примерно так:

Почему нельзя писать код с помощью нейросетей:
- Вы станете тупым
- Вас никто не будет уважать
- Это вообще не дело

Лично я вообще не переживаю насчет того, что скоро скайнет захватит мир, потому что:
- Зачем зря переживать
- У меня есть работа
- Я уверен, что ближайшие десять лет моих знаний хватит, чтобы не оказаться в нищете.

В комментариях большая часть аудитории разделились на два лагеря:
- Первые: да с этим чатом гпт у вас сгниют мозги!
- Вторые: пусть гниют, мы то хотя бы не умрем в нищете!

Для меня утверждение - "люди с чатом гпт - лучшие работники, чем без него" - просто бред.

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

Любые нейронки, это просто инструмент. И меня уже начинают раздражать тезисы, которые утверждают, что благодаря какому-либо инструменту, вы станете востребованным профессионалом.

Тоже самое, что сказать - "код на C++ говно, на python гораздо лучше. Кто пишет на python, за тем будущее". Ах, да... Такой тезис периодически звучал последние несколько лет.

Хороший программист - это профессионал, финальный продукт деятельности которого удовлетворяет заказчика. Если тебе надо выбивать дырки на перфокарте и написание "hello, world!" отнимает у тебя неделю, то это не удовлетворит ни одного заказчика. Если вносить правки в систему умеет 2 человека в мире, такой продукт ни одного вменяемого человека также не устроит.

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

👉 @seniorFront

Как убить самоорганизацию в команде: вредные советы для лидера

Сегодня многие компании переходят на гибридный формат работы, где команды нуждаются в особом подходе для поддержания самоорганизации — процесса, при котором люди выполняют задачи без постоянного контроля руководителя. Я поделюсь своими наблюдениями, почему в современных условиях самоорганизация не происходит «магически» и что должен делать тимлид, чтобы помочь команде достичь этой цели.

👉 @seniorFront

Responsive app switcher or carousel

Реализовано на чистом CSS при помощи CSS animation-timeline.

👉 @seniorFront

Cursor in & Out Ripple Effects

В этом видео создается анимация при наведении на карточку, зависящая от положения курсора пользователя. Параметры анимации задаются в JS при срабатывании события mousemove.

👉 @seniorFront

В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻

Что такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?

Обо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.

Нет у меня никакого выгорания, наверное

👉 @seniorFront

Lotsa Notifications

Логика работы уведомлений реализована на чистом JS.

👉 @seniorFront

Fancy wipe

На текст накладывается CSS mask, и затем анимируется свойство mask-position.

👉 @seniorFront

CSS Circular Image Rotate Animation Effects

В этом видео создается анимированная карусель с картинками на чистом CSS.

👉 @seniorFront