Glide To Reveal with CSS :has()

Создано и анимировано без использования JS.

👉 @seniorFront

Свойство transform

Свойство transform применяется для поворота, масштабирования, наклона или сдвига элемента.

При этом, в потоке элемент остаётся на прежней позиции. То-есть, увеличение картинки с помощью transform: scale(2) не раздвинет соседние элементы картинки, а заставит её частично их перекрывать. Это является минусом transform. Плюсом же можно назвать высокую производительность этого решения.

Например, благодаря наличию transform считается антипаттерном анимирование width и height.

Некоторые функции transform:
- matrix();
- perspective();
- rotate();
- translate();
- scale();
- skew().

В transform можно передавать сразу несколько функций:
transform: translateX(10px) rotate(10deg) translateY(5px);

👉 @seniorFront

Drop-down menu

В JS созданы кастомный курсор, логика переключения темы и логика открытия меню.

👉 @seniorFront

​Учи код правильно!

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

1. Создание плана обучения: Разработайте список тем, которые вы хотите изучить, и сформулируйте цели, которые хотите достичь. Это поможет вам сосредоточиться на ключевых областях и следить за прогрессом.

2. Работа над проектами: Начните с маленьких проектов и постепенно увеличивайте сложность, чтобы применять изученные навыки и совершенствовать их.

3. Код-ревью: Найдите напарника или наймите репетитора, с которым вы можете делиться своим кодом и получать обратную связь. Это поможет вам избежать ошибок и улучшить качество кода.

4. Участие в сообществе: Участвуйте в сообществе программистов на форумах, социальных сетях, конференциях и митапах, чтобы получать поддержку и вдохновение от других людей, которые идут той же дорогой.

5. Практика решения задач: Решайте задачи и упражнения, чтобы практиковать и закрепить навыки. Есть множество онлайн-ресурсов, таких как LeetCode, HackerRank и CodeWars, где вы можете найти множество задач для отработки.

6. Делайте перерывы: Не забывайте отдыхать, особенно если вы чувствуете утомление или раздражение. Регулярные перерывы помогут вам обновить мысли и сохранять вашу концентрацию. Попробуйте заниматься активностями, которые вам нравятся, такими как спорт, чтение , чтобы отдохнуть и вернуться к работе с новыми силами. Компьютерные игры — это не отдых, если что.

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

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

👉 @seniorFront

WebGL liquid masking

Создано на canvas при помощи технологии WebGL.

👉 @seniorFront

Rubber Button

Оригинальная кнопка, реализованная на HTML и CSS.

👉 @seniorFront

Animated Number Spinner

В этом видео создается шкала, которая заполняется или уменьшается при нажатии на кнопки. Логика изменения значений реализована в JS. Анимировано в CSS.

👉 @seniorFront

👉 @seniorFront

Hexagon Grid

Создано с использованием препроцессоров Haml и SCSS. Форма карточек реализована при помощи CSS clip-path.

👉 @seniorFront

Scroll with light (CSS only)

Создано без использования JS. Задействуется свойство animation-timeline со значением scroll().

👉 @seniorFront

Falling Stars

Элементы генерируются в JS и анимируются в CSS.

👉 @seniorFront

Interactive Form

Форма реализована на HTML и SCSS.

👉 @seniorFront

Получите средний символ

Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.

Пример:
getMiddle("testing") = "t"

👉 @seniorFront

Hover slider (dark/light)

Кастомный курсор и логика переключения тем реализованы в JS.

👉 @seniorFront

В чем разница между контролируемыми и неконтролируемыми компонентами в React?

Разница между контролируемыми (управляемыми) и неконтролируемыми компонентами заключается в том, как они управляют своим состоянием и обновляют его.
Управляемые компоненты — это компоненты, состояние которых контролируется React. Компонент получает свое текущее значение и обновляет его через входные параметры. Он также запускает функцию обратного вызова при изменении значения. Это означает, что компонент не хранит собственное внутреннее состояние. Вместо этого родительский компонент управляет и передает значение управляемому компоненту.

 import { useState } from 'react'; 

 function App() { 
   const [value, setValue] = useState(''); 

   return ( 
     <div> 
       <h3>Controlled Component</h3> 
       <input name="name" value={name} onChange={(e) => setValue(e.target.value)} />
       <button onClick={() => console.log(value)}>Get Value</button> 
     </div> 
   ); 
 }

Неконтролируемые компоненты, с другой стороны, управляют своим состоянием внутренне с помощью ссылок или других методов. Они хранят и обновляют свое состояние независимо, не полагаясь на входные параметры или обратные вызовы. Родительский компонент имеет меньший контроль над состоянием неконтролируемых компонентов.

import { useRef } from 'react';

function App() {
const inputRef = useRef(null);

return (
<div className="App">
<h3>Uncontrolled Component</h3>
<input type="text" name="name" ref={inputRef} />
<button onClick={() => console.log(inputRef.current.value)}>Get Value</button>
</div>
);
}

👉 @seniorFront