Cursor Move + Card Hover Effects

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

👉 @seniorFront

Glitching Text

Анимация искажения текста, реализованная в SCSS.

👉 @seniorFront

Write Number in Expanded Form

Вам будет дан номер, и вам нужно будет вернуть его в виде строки в расширенной форме
Все числа будут целыми числами больше 0

Пример:

expandedForm(12); //  '10 + 2'
expandedForm(42); //  '40 + 2'
expandedForm(70304); //  '70000 + 300 + 4'

👉 @seniorFront

Психологический тупик в ИТ-карьере: как я преодолевал «выгорание» и почему сопротивлялся изменениям

В этой статье я хочу поделиться личным опытом и рассказать о том, как я оказался в «психологическом тупике». Расскажу на что это было похоже, с какими трудностями столкнулся, какие варианты перепробовал и что мне действительно помогло.

👉 @seniorFront

​Как использовать useEffect ?

Это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости.
Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти.
Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга.

Примеры использования:

Запуск эффекта один раз
Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

Выполнение при изменении зависимостей
Чтобы выполнить эффект при изменении определённых значений:

const [count, setCount] = useState(0);

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости

Очистка эффекта
Пример использования функции очистки:

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

👉 @seniorFront

Rotating text, falling letters

В JS создана логика запуска CSS трансформаций для каждой буквы слова.

👉 @seniorFront

Вот вам вопросы для прокрастинации

Вопросы разные, все они присланы пользователями.

Если бы 8-битного бога спросили, какое самое большое число, что он ответил?
255

Как понять, что проект нужно переписывать заново?
Когда время на рефакторинг кода для внедрения изменений (фичи) больше, чем время для написания кода самого изменения (фичи). Зачёт по смыслу.

Согласно легенде ОН — глаз небесного белого орла, который после битвы с черным колдуном упал на Землю и стал камнем. Другой ОН стоил около 4000 рублей и для многих стал первым проводником в мир программирования.
Агат

Что появилось раньше, print(), или 'Hello world!' как фраза, с которой сталкивался каждый программист?
print(), т.к. без него не было бы и 'Hello world!'

В чём отличие геймера от тестировщика игр?
Один тратит деньги, а другой зарабатывает. Зачёт по смыслу.

Одна из татуировок иронично символизирует разделение одного с другим и одновременно неотделимость одного от другого. В коде и одно, и другое так же часто неотделимы. Назовите одно и другое на любом языке.
</head> <body> Зачёт по смыслу.

На одной забавной картинке в интернете собрались вместе театр, лиса, лев, старый грязный унитаз и ЦВЕТ, который есть в лисе, во льве и в театре. Какое слово автор заменил словом «ЦВЕТ»?
Хром (Chrome)

Если камень — это 0, бумага — это 31 а ножницы — 6, то какими числами сказать «отлично», «наберу»?
1, 17. В кулаке согнутые пальцы нули, а выпрямленные единицы рассматриваем как двоичную систему счисления

Нельзя сказать, чтобы их подбрасывало в 6 раз сильнее на таких же по высоте кочках. Но сидеть им было явно неудобно и фактически они стояли при езде. Так что пришлось всё же сделать для них нечто, чтобы их не выбросило вовсе. А что именно сделали для них?
«Ремни безопасности». Их установили на четырёхколёсных транспортных планетоходах для передвижения людей по поверхности Луны.

МРТ, рентген, «дышите‑не‑дышите», простукивание. Подумайте о том, что был же тот, кто первый начал стучать и — назовите тару.
Бочка. В 1761 году в Вене вышла книга молодого врача Ауенбруннера, посвященная распознаванию болезней. Она начиналась словами благодарности отцу врача, потомственному пивовару, за оригинальную идею — выстукивание грудной клетки пациента, по аналогии с выстукиванием пивных бочек. Вот так проверка пивных бочек привела к врачебному способу исследования.

Еще больше вопросов в статье

👉 @seniorFront

14 инструментов для генерации изображений с кодом

В этой статье мы рассмотрим 14 крутых инструментов, которые помогают превращать код в красивые картинки. Каждый из них имеет свои фишки и подойдёт для разных задач. Кто-то любит минимализм, кому-то важна возможность кастомизации, а кто-то вообще хочет делать анимации с кодом — для всех найдётся свой вариант. Эта подборка точно поможет вам найти инструмент, который сделает ваши фрагменты кода не только понятными, но и визуально привлекательными.

👉 @seniorFront

range slider hamster

В зависимости от выбранной скорости запускаются различные CSS анимации.

👉 @seniorFront

Creative Banner Hover Effects

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

👉 @seniorFront

Как работает API:

👉 @seniorFront

Shy Ghost

Создано и анимировано в HTML и SCSS. Логика запуска анимаций реализована в JS.

👉 @seniorFront

CSS Info Cards

Карточки, свёрстанные на HTML и SCSS.

👉 @seniorFront

Ghost Text

В этом видео создается эффект исчезновения текста при помощи CSS blur и transform при наведении.

👉 @seniorFront

action button with checkbox trick

Реализовано на HTML и Less, без использования JS.

👉 @seniorFront

1's, 0's and wildcards

Верните массив, содержащий все возможные значения, которые можно получить, заменяя '?' нулём или единицей.

Пример:

'101?' -> ['1010', '1011']
'1?1?' -> ['1010', '1110', '1011', '1111']

👉 @seniorFront

Как использовать менеджер состояний NgRx для Angular-проектов

Итак, начнем с определения. В контексте веб-разработки менеджер состояний NgRx — это инструмент, который управляет глобальным для всего приложения состоянием. Согласно документации, он является инструментом изоляции побочных эффектов для создания более чистой архитектуры компонентов. Также с введением NgRx появляются инструменты для разработки и отладки, расширяющие возможности создания различных типов приложений.

В этой статье разбираются особенности применения, плюсы и минусы NgRx.

👉 @seniorFront

Как работает браузер ?

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

Запрос ресурса:
Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с http:// или https://, браузер отправляет запрос на сервер.

        GET /index.html HTTP/1.1
    Host: example.com

DNS-разрешение:
Браузер преобразует доменное имя (например, example.com) в IP-адрес с помощью DNS-сервера.

Установка соединения:
Браузер устанавливает TCP-соединение с сервером, а если используется https, то устанавливает также SSL/TLS-соединение для безопасной передачи данных.

Отправка HTTP-запроса:
Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.

        GET /index.html HTTP/1.1
    Host: example.com

Получение HTTP-ответа:
Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.

        HTTP/1.1 200 OK
    Content-Type: text/html

    <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

Разбор (парсинг) HTML:
Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.

        <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

Обработка CSS:
Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).

       h1 {
        color: blue;
    }

Построение рендер-дерева:
DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.

Визуализация (рендеринг):
Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).

Обработка JavaScript:
Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.

document.querySelector('h1').textContent = 'Hello, JavaScript!';

Асинхронные операции:
Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.

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

👉 @seniorFront

Noise Abstraction

Реализовано на canvas с использованием библиотеки simplex-noise.

👉 @seniorFront