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

​Хук useReducer в React

useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.

Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях:

Пример

 import React, { useReducer } from 'react'

 const initialState = 0
 const reducer = (state, action) => {
   switch (action) {
     case 'increment': return state + 1
     case 'decrement': return state - 1
     case 'reset': return 0
     default: return state
   }
 }

 const ReducerExample = () => {
   const [count, dispatch] = useReducer(reducer, initialState)

   return (
     <div>
       {count}
       <button onClick={() => dispatch('increment')}>+1</button>
       <button onClick={() => dispatch('decrement')}>-1</button>
       <button onClick={() => dispatch('reset')}>reset</button>
     </div>
   )
 }

 export default ReducerExample

Сначала мы определяем начальное состояние и редуктор. Затем передаем их в useReducer(). Хук возвращает текущее значение состояния и диспетчер, который используется для обновления состояния. Когда пользователь нажимает на кнопку, происходит отправка определенной операции в редуктор, который обновляет счетчик на основе операции. Мы может определять столько операций, сколько требуется нашему приложению.

👉 @seniorFront

Джентельменский набор трушного фронтендера

Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер.

Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.

Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.

JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.

codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты

Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!

Развивайся с нами, ведь так проще!

Interactive Wheel Menu

В JS созданы обработчики событий, в которых изменяются значения CSS переменных и data атрибутов.

👉 @seniorFront