Alignment Buttons

Анимации реализованы при помощи библиотеки TweenMax.

👉 @seniorFront

Устроиться фронтендером в Яндекс за выходные

23–24 сентября устраиваем Weekend Offer Frontend. Решите фронтенд-квиз, а после за 2 дня пройдите технические секции и собеседования с командами. Если всё сложится хорошо — сразу же получите офер.

В мероприятии участвуют 17 команд: HR Tech, Поиск, Рекламные продукты, Yandex Cloud, 360, Яндекс Браузер, Бизнес-приложения, Умный дом, Yandex Infrastructure, Лавка, Еда, Недвижимость, Аренда, Авто.ру, CM.Expert, Путешествия и Буткемп. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным.

Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны.

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". erid: 2VtzqvZLipH

​Объясните различие между Object.freeze() и const

const используется для объявления переменных с неизменными (константными) значениями. Когда вы объявляете переменную с помощью const, вы не можете повторно присвоить ей новое значение. Это означает, что значение const не может быть изменено после его инициализации. Например:

 const pi = 3.14159;
 pi = 3.14; // Ошибка! Нельзя присвоить новое значение константе

Object.freeze() используется для замораживания (блокировки) объекта в JavaScript. Когда объект заморожен с помощью Object.freeze(), его свойства становятся неизменными. Вы не можете добавлять, удалять или изменять существующие свойства объекта. Например:

 const person = {
   name: 'John',
   age: 25
 };

 Object.freeze(person);

 person.age = 30; // Изменение свойства объекта не приведет к ошибке, но не сработает
 person.gender = 'male'; // Не удастся добавить новое свойство

 console.log(person); // Вывод: {name: 'John', age: 25}

Важно отметить, что Object.freeze() работает только на поверхностном уровне объекта. Это значит, что если объект содержит вложенные объекты, то их свойства могут быть изменены. Для полного замораживания объекта, включая его вложенные объекты, вам может понадобиться рекурсивно применить Object.freeze() ко всем его свойствам.

👉 @seniorFront

Galaxy

Создано и анимировано в JS при помощи WebGL.

👉 @seniorFront

​Руководство Дьявола по отладке

В свое время Данте отвел нижний круг ада самому Сатане. Но с тех пор кое-что изменилось, и сейчас Сатана охотно делит нижний круг с программистами, не умеющими эффективно отлаживать программы. Он мучает программистов, заставляя их отлаживать программы с использованием популярных принципов из следующего списка.

Поиск дефектов, основанный на гадании
Для нахождения дефекта разбросайте по программе случайным образом console.log и изучите выходные данные. Если так найти дефект не получается, попробуйте изменить тот или иной фрагмент — может, что и сработает.

Тщательный анализ проблемы — пустая трата времени
Скорее всего проблема тривиальна, и ее не нужно полностью понимать, чтобы исправить. Достаточно ее просто найти.

Исправление ошибок самым очевидным образом
Обычно можно просто устранить специфические симптомы проблемы, а не тратить время на внесение крупного амбициозного исправления, которое может затронуть всю программу.
Вот прекрасный пример:
x = Compute( y )
if ( y = 17 )
x = $25.15 — если y = 17, метод Compute() не работает; мы это исправляем
Зачем анализировать метод Compute() в поисках причин непонятной проблемы со значением 17, если можно просто написать частный случай в очевидном месте?

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

👉 @seniorFront

Самое тупое во Фронтенде – это искать макеты

В сети полно актуальных источников. И один из них – канал Макеты для верстки.

Если хотите иметь крутое портфолио, обязательно подпишитесь

Falling text

Цвет букв рандомно генерируется в JS. Анимировано с использованием библиотеки gsap.

👉 @seniorFront

⚡️EXOZ Frontend Meetup 20.10.23

🔘 Полностью бесплатное участие;
🔘 Возможность участвовать как оффлайн, так и онлайн;
🔘 Общение с интересными людьми;
🔘 Дискуссия со спикерами после доклада;


Какие темы докладов вас ждут:
— CI/CD для чайников фронетнедров;
— Психологическое здоровье в IT: лайфхаки по селф-менеджменту;
— Предметно-ориентированная архитектура frontend приложений;
— Менторство в IT. Как стать наставником, о котором ты мечтал сам;
— State management в мире js — гармония или хаос;

И, конечно, только докладами мы не обойдемся.

Вас также ожидает:
➖Активности между докладами;
➖Дискуссии со спикерами;
➖Видео материалы докладов;
Только для оффлайн части:
➖Наш мерч;
➖Фото отчет;
➖Кофе брейки;
➖Большой розыгрыш призов в конце;

Зарегистрироваться на мероприятие

Следить за новостями в telegramm

Modern Button Styles

Подборка из 45 кнопок на HTML и CSS.

👉 @seniorFront

CSS Glassmorphism Cards Hover Effects

В этом видео создаются полупрозрачные размытые карточки. Такой эффект достигается использованием CSS backdrop-filter со значением blur.

👉 @seniorFront

IT-ипотека от 2,5%: все фичи от отделки до мебели

«Самолет» меняет представление о загородной жизни и предлагает проект, где максимально апдейтнули городской уровень комфорта — «Дмитров Дом».

🏘 Здесь классный фронтенд: готовые дома площадью от 61 до 225 м², полноценная экосистема, где все находится в шаговой доступности, а также единое оформление всех пространств. Можно взять MVP с базовой отделкой, а можно добавить в ипотеку полезных фич: кухню, мебель, баню, террасу и беседку.

🌐 Бэкенд тоже не подводит: все коммуникации, в том числе и высокоскоростной интернет, уже проведены — начинать спринты можно сразу после заезда. Работает профессиональная управляющая компания в доступе 24/7 в один клик в приложении — уникальная опция для ИЖС.

Преимущества проекта в его инфраструктуре, которая позволяет жить без забот: интернет даже на улице, коворкинг, поликлиника, школа, детский сад, магазины и кафе, конный клуб, собственный досуговый центр и многое другое — всё в шаговой доступности.

В сентябре загородный ...

Card Pagination

Пагинация реализована пакетом pure-pajinate. Свёрстано с использованием препроцессоров Pug и SCSS.

👉 @seniorFront

Когда вы опытный специалист, рано или поздно возникают вопросы: куда расти дальше и как? Ответы на них можно узнать в карьерной онлайн-лаборатории Практикума. Мы уже подготовили диджитал-реагенты и настроили приборы.

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

→ Определить свой вектор

👉 @seniorFront

Hover Effect

Оригинальный эффект при наведении на карточку, созданный на чистом CSS.

👉 @seniorFront

Чтобы вырасти в уверенного мидла, нужно хотя бы 1,5—2 года коммерческих проектов. Но процесс можно ускорить, если освоить новые технологии и отточить софты в условиях, близких к реальной работе. Это не заменит рабочей практики, но поможет собрать базу, набраться уверенности и проверить себя.

Прокачать нужные мидлу навыки, чтобы расти в карьере на скорости х2, можно на курсе Яндекс Практикума.

Изучать теорию предстоит сразу на на командных проектах.
1. Разработка мессенджера
Будете использовать только JavaScript, Typescript, CSS и API браузера, чтобы углубить знания основных инструментов.

2. Создание веб-игры с нуля
Продумаете макеты и логику, реализуете клиентскую часть и бэкенд, задеплоите в облако. Лучше разберётесь в смежных сферах — алгоритмах,
DevOps и других.

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

→ Начать учиться

Иногда работу мечты не нужно долго искать, достаточно вовремя откликнуться на подходящую вакансию 😉

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

Ничего лишнего, только открытые роли в Авито с удобной навигацией по тегам — подписывайтесь!

Реклама. Рекламодатель ООО “КЕХ еКоммерц". erid: 2VtzqwNpQgR

Image Gallery

В этом видео создаётся 3D галерея картинок на CSS и JS.

👉 @seniorFront

Keyhole animation

Анимация создана библиотекой gsap. Запуск анимации осуществляется при помощи gsap scrollTrigger.

👉 @seniorFront

Крестики-нолики

Создайте функцию, которая принимает двумерный массив чисел 3x3
[[0, 0, 1],
[0, 1, 2],
[2, 1, 0]]
0 - пустота
1 - крестик
2 - нолик

Ваша функция должна вернуть:
-1, если игра не завершена
1, если победили крестики
2, если победили нолики

👉 @seniorFront

Gooey Menu Concept

Оригинальное меню, созданное с использованием WebGL + GSAP.

👉 @seniorFront