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

Создайте функцию, которая принимает двумерный массив чисел 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

🥶 Забудь о Web2 Программировании: Переходи на Web3 и Зарабатывай От $60,000!

Если ты разработчик, но до сих пор не в теме Web3, то упустил множество возможностей. Middle Web3 разработчики уже зарабатывают от $5,000 до $8,000 в месяц!

🔎 Что такое Web3 в двух словах, и как стать мастером блокчейн-разработки?
🔎 Какие перспективы ждут именно тебя на рынке Web3, учитывая твой текущий стек?
🔎 Вакансии, зарплаты и требования к блокчейн-разработчикам: разберем на реальных примерах с рынка.
🔎 Как за 2 года увеличить доход до $5,000+ и стать Middle в Web3?
🔎 Апгрейд: как стать более востребованным, не меняя текущий стек?

✈️ И даже поделимся секретами релокации и работы в международной компании!

🗺 Построим личный роадмеп и разберем все это на 30-минутной бесплатной консультации:

Как действующему программисту расширить стек до Web3 и стать блокчейн-разработчиком на Solidity, увеличив доход в $ за несколько месяцев!

👨‍💼 Кто проводит?

Рекрутеры Crypton Studio — крупнейшей студии блокчейн-разработки в Европе (6 лет на рынке, более 160+ сотрудников, в числе которых 63% разработчиков, огромное портфолио из более чем 100 успешно реализованных проектов для клиентов из 20 стран). Они запустили новый проект MarniD и телеграм-канал, где можно учиться на их опыте!

Места на консультацию ограничены

Если ты действующий разраб, то переходи на сайт и оставляй заявку — ссылка

Команда свяжется с тобой и забронирует слот на Zoom! Узнай о своих возможностях на рынке будущего!

Inview Animation

Все анимации созданы при помощи библиотеки gsap.

👉 @seniorFront

​⭐️ Прочитайте доклад на YaTalks — самой масштабной конференции Яндекса для IT-комьюнити

Ведущие эксперты в индустрии, учёные и практикующие разработчики — более 100 спикеров выступят на YaTalks 2023 с техническими докладами и научно-популярными лекциями.

До 1 октября принимаем заявки от разработчиков интерфейсов. Главное требование — подготовить актуальный и уникальный доклад, который будет интересен широкой аудитории.

Поделитесь опытом на YaTalks, если вы:

🟡 Занимаетесь кросс-платформенной разработкой

🟡 Внедряете Server-Driven UI

🟡 Используете нестандартные архитектурные паттерны

🟡 Создаёте темы оформления и работаете с дизайнерами

🟡 Тестируете интерфейсы и оптимизируете скорость их работы

🟡 Разрабатываете один продукт несколькими командами

🟡 Отвечаете за доступность интерфейсов для людей с ограниченными возможностями

🟡 Работаете с медиаконтентом

🟡 Налаживаете взаимодействие с несколькими магазинами приложений

🟡 Запускаете ML-технологии на клиенте

🟡 Создаёте решения, связанные с развитием приватности

🟡 Разрабатываете интерфейсы для нестандартных устройств или конкретных платформ

🟡 Занимаетесь унифицированной аналитикой пользовательских действий

🟡 Владеете эффективными практиками построения северных API для клиентских приложений

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

Заполняйте форму и ждите письмо от программного комитета — ответим всем до 14 октября.

Сама конференция пройдёт 5 и 6 декабря в Москве и Белграде. Онлайн-трансляция будет доступна всем желающим.

Подать доклад.

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

Merging Letter Toggle

Буквы - это svg картинка, стили которой изменяются при нажатии на checkbox.

👉 @seniorFront

CSS :not(:hover) Effects

В этом видео создается галерея картинок с эффектом при наведении.

👉 @seniorFront

👉 @seniorFront

🔥 Все для сайта от 49 ₽/мес!

В SpaceWeb вы можете разместить сайт по привлекательной цене, а также получите:

✔️ Домен для вашего сайта при заказе на год.
✔️ Автоустановка Wordpress, Joomla и других популярных CMS.
✔️ Антивирусная проверка сайтов и возможность автоматического лечения.
✔️ Техническая поддержка в течение 1-2 минут в чате и по телефону.

Переходите и тестируйте бесплатно в течение 14 дней

👍Запустить сайт

Или подпишитесь на канал и следите за тем, как SpaceWeb развивает IT в России.

Реклама. ООО "СпейсВэб". erid: 2Vtzqxi3kB4

Loading Text Animation

В CSS анимируются свойства opacity и transform со значением translateY().

👉 @seniorFront