3D Landscape Game

3D сцена со сменой времени на Three.js.

👉 @sWebDev

noUiSlider

Лёгкий и доступный JavaScript-слайдер диапазона с поддержкой мультитач и клавиатуры. Полностью анимирован с использованием GPU, что обеспечивает высокую производительность даже на старых устройствах. Идеально подходит для адаптивных дизайнов и не имеет внешних зависимостей.

👉 @sWebDev

Работа с CdkVirtualScrollViewport

Когда CdkVirtualScrollViewport обновляет элементы списка?

Забыли? Вернитесь к посту от 24.02.2025.

👉 @sWebDev

У вас будут какие-то оправдания?

👍 - Дорогой дневник...

❤️ - Мне не стыдно.

👉 @sWebDev | #юмор

Предзагрузка всех модулей в Angular

В Angular модули загружаются лениво (lazy loading), чтобы не перегружать приложение. Однако, если модули нужны часто, можно предзагрузить их заранее с preloadAllModules.

Пример:

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Этот код заставляет Angular загружать все модули в фоне после загрузки главного модуля. Это уменьшает задержки при переходах, но увеличивает начальную загрузку.

👉 @sWebDev

Golden Cider

3D интерактивная моделька для лого на Three.js.

👉 @sWebDev

Так веб-разработка же простая, правда?

👍 – Конечно, что тут сложного?

❤️ – Мне один раз приснилось, что продакшн можно сломать одной строчкой… смешно, правда?

👉 @sWebDev | #юмор

Glider.js

Glider.js — это компактный и гибкий карусельный слайдер, который не требует jQuery и работает плавно даже на мобильных устройствах. В отличие от тяжелых аналогов, он предлагает нативную поддержку перелистывания, кастомизацию через CSS и API для управления поведением.

👉 @sWebDev

Loader

Анимация загрузки на Anime.js.

👉 @sWebDev

Сохранение данных формы в React: современный подход с Nuqs

В веб-разработке часто требуется сохранять состояние форм, чтобы предотвратить потерю данных при обновлении страницы или поделиться заполненной формой с другими. Традиционные методы, такие как localStorage, имеют ограничения, включая невозможность совместного использования данных и отсутствие встроенной валидации. Nuqs предлагает современное решение, позволяя сохранять состояние формы в URL с поддержкой типизации и валидации. Это упрощает обмен данными и устраняет необходимость в серверной инфраструктуре. Если вы хотите улучшить управление состоянием форм в своих React-приложениях, ознакомьтесь с возможностями Nuqs.

👉 @sWebDev

Anime.js hover effect

Анимация при наведении на Anime.js.

👉 @sWebDev

Vanilla-tilt.js

Vanilla-tilt.js — это легковесная библиотека, позволяющая добавлять эффект 3D-наклона к элементам на странице. Она реагирует на движения мыши, создавая плавные анимации без лишних зависимостей.

👉 @sWebDev

Какой первый аргумент передаётся в FormControl?

Что передаётся в FormControl первым аргументом?

Забыли? Вернитесь к посту от 03.03.2025.

👉 @sWebDev

Если джун — это нейросеть, то его база данных...

👍 – Stack Overflow.

❤️ – Код с курсов по веб-разработке.

👉 @sWebDev | #юмор

Управление асинхронным рендерингом

Метод flushSync() позволяет немедленно обновить состояние и выполнить ререндер, обходя пакетную обработку обновлений. Это полезно, когда требуется мгновенно обновить интерфейс перед выполнением других операций, например, чтением размеров DOM.

Например, кнопка изменяет текст элемента, и нам нужно получить его новую ширину до следующего рендера:

import { useState } from "react";
import { flushSync } from "react-dom";

function Example() {
  const [text, setText] = useState("Нажми меня");
  const spanRef = useRef(null);

  function handleClick() {
    flushSync(() => {
      setText("Текст изменился!");
    });
    
    console.log("Ширина:", spanRef.current.offsetWidth);
  }

  return (
    <div>
      <button onClick={handleClick}>Изменить</button>
      <span ref={spanRef}>{text}</span>
    </div>
  );
}

flushSync() гарантирует, что offsetWidth обновится после изменения текста, а не после следующего рендера.

👉 @sWebDev

Traffic Run Game

Игра на на Three.js.

👉 @sWebDev

Когда на собеседовании спрашивают, ты фронт или бек, а ты до сих пор гуглишь, как центрировать div.

👍 – Издержки универсальности!

❤️ – Я думал, это они мне скажут кто я.

👉 @sWebDev | #юмор

Window-Engine

Window-Engine — библиотека для создания перетаскиваемых окон без зависимостей. Позволяет реализовать многозадачный интерфейс в веб-приложениях, сохраняя взаимодействие адаптивным, включая поддержку сенсорных экранов.

👉 @sWebDev