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

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

Поиск дефектов, основанный на гадании
Для нахождения дефекта разбросайте по программе случайным образом 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

​Имена, которых следует избегать

Избегайте обманчивых имен или аббревиатур
Убедитесь в том, что имя не является двусмысленным. Скажем, FALSE обычно является противоположностью TRUE, и использовать такое имя как сокращение фразы «Fig and Almond Season» было бы глупо.

Избегайте переменных, имеющих разную суть, но похожие имена
Если у вас есть две таких переменных, попытайтесь переименовать одну из них или изменить аббревиатуры. Избегайте имен вроде clientRecs и clientReps. Они различаются только одной буквой, и это трудно заметить.

Избегайте имен, включающих цифры
Если наличие цифр в именах действительно имеет смысл, используйте вместо отдельных переменных массив. Если этот вариант неуместен, цифры в именах еще более неуместны. Например, избегайте имен file1 и file2 или total1 и total2. Почти всегда можно найти более разумный способ проведения различия между двумя переменными, чем дополнение их имен цифрами.

Избегайте слов, при написании которых люди часто допускают ошибки
Absense, acummulate, acsend, calender, concieve, defferred, definate, independance, occassionally, prefered, reciept, superseed и многие другие орфографические ошибки весьма распространены в англоязычном мире.

Избегайте смешения естественных языков
Если в проекте участвуют программисты разных национальностей, обяжите их именовать все элементы программы, используя один естественный язык. Понять код другого программиста непросто; а код, написанный на юго#восточном диалекте марсианского языка - невозможно.

Не используйте имена, которые совершенно не связаны с тем, что представляют переменные
Использование имен вроде margaret и pookie практически гарантирует, что никто другой их не поймет. Не называйте переменные в честь девушки, жены, любимого сорта пива и т. д., если только девушка, жена или сорт пива не являются представляемыми в программе «сущностями».

👉 @seniorFront