Frontender Libs - обзор библиотек JS / CSS

Particles.js

Particles.js — это легковесная библиотека JavaScript, которая позволяет создавать и анимировать частицы на веб-странице. Она часто используется для создания фона с анимацией частиц, который может быть интерактивным и реагировать на действия пользователя, такие как перемещение мыши.

👉 @sWebDev

Часто вы отвлекаетесь при программировании?

❤️ - У меня получается концентрироваться.

👍 - Бывает.

👉 @sWebDev | #юмор

Shader-Experiment

Настраиваемая анимация на Three.js.

👉 @sWebDev

Объединение объектов с useSetState в React

useSetState — это хук, который позволяет объединять объекты в их текущем состоянии, аналогично this.setState в классовом компоненте.

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

import { useSetState } from 'react-use';

const Demo = () => {
  const [state, setState] = useSetState({});

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => setState({ hello: 'world' })}>hello</button>
      <button onClick={() => setState({ foo: 'bar' })}>foo</button>
      <button 
        onClick={() => {
          setState((prevState) => ({
            count: (prevState.count || 0) + 1,
          }));
        }}
      >
        count
      </button>
    </div>
  );
};

В этом примере, кнопка "hello" обновляет состояние, добавляя hello: 'world'. Кнопка "foo" обновляет состояние, добавляя foo: 'bar'. Кнопка "count" увеличивает значение счетчика count на 1. Этот подход помогает управлять состояниями, объединяя их в один объект.

👉 @sWebDev

Подборка удобных интерфейсов.

👉 @sWebDev | #юмор

Работа с методами жизненного цикла

Какой метод жизненного цикла компонента в Angular используется для выполнения собственных проверок и действий, которые не могут быть захвачены встроенными механизмами обнаружения изменений?

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

👉 @sWebDev

Blaze.js

Blaze.js — это библиотека шаблонов JavaScript, изначально разработанная для Meteor, платформы полного стека для создания веб-приложений. Она проста в использовании, предлагает декларативный синтаксис для описания пользовательских интерфейсов и поддерживает реактивные данные, автоматически обновляя интерфейс при изменении данных.

👉 @sWebDev

Travel carousel

Интерактивная карусель карточек с использованием Swiper.js.

👉 @sWebDev

Angular сделает RxJS необязательным; разработчики Drupal перейдут на Headless

Статья обсуждает, как Angular сделает библиотеку RxJS необязательной, упрощая работу для разработчиков, и как разработчики Drupal переходят на headless CMS, используя Drupal как бэкенд с современными JavaScript-фреймворками на фронтенде, что позволяет создавать более динамичные веб-приложения.

👉 @sWebDev

Canvas sprite-sheet bubbles

Интерактивные мыльные пузыри реализованные с помощью GSAP.

👉 @sWebDev

Clusterize.js

Clusterize.js — легковесная JavaScript-библиотека для эффективного отображения больших списков данных в веб-приложениях. Она улучшает производительность, рендеря только видимую часть списка и обновляя её по мере прокрутки.

👉 @sWebDev

Task failed successfully

👉 @sWebDev | #юмор

ScrollTrigger Image Zoom

Зум переход на странице с использованием GSAP.

👉 @sWebDev

Айтишников без опыта берут в Сбер

И в другие IT-гиганты. Но ваш проект должен отличаться в 5-10 раз от кучи стандартных портфолио. Современный стек, модные технологии, отвечать требованиям работодателя, решать реальные проблемы пользователя.

Все эти критерии получится соблюсти, если сделать проект на микросервисной структуре на Kafka.

Ребята из FAANG School подготовили полезную лекцию, где сэкономят время, нервы и дадут пошаговую инструкцию, как создать идеальный проект для портфолио.

Вы узнаете, как:
– выбрать тему проекта, чтобы попадать в требования работодателей
– расширить свой проект фичами настоящей высоконагруженной системы
– перейти от древнего монолита к современным микросервисам
– реализовать фичи в проекте с помощью микросервисов и Kafka
– представить ваш проект в резюме, чтобы доказать профессионализм

Переходите и забирайте подарок - Большую Шпаргалку по Kafka с подробной информацией о концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.

Ленивое обнаружение роутов в React

Метод unstable_patchRoutesOnMiss в React Router позволяет загружать дополнительные роуты динамически, реализуя разделение кода.

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

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path === "/a") {
        let route = await getARoute();
        patch("root", [route]);
      }
    },
  }
);

async function getARoute() {
  return { path: 'a', Component: A };
}

В этом примере, если пользователь переходит по пути /a, метод unstable_patchRoutesOnMiss загружает роут динамически и добавляет его к роуту root.

👉 @sWebDev

Работа с рендерингом в React

Какой метод реализует React.PureComponent для предотвращения ненужных рендеров?

Если забыли, то вернитесь к посту от 01.07.2024.

👉 @sWebDev

WakaTime

WakaTime — это плагин для отслеживания времени, предназначенный для разработчиков. Он интегрируется с текстовыми редакторами и IDE, а также с браузерами, такими как Chrome, и предоставляет автоматическое отслеживание времени, аналитику использования языков программирования и инструменты для повышения производительности.

👉 @sWebDev

Собеседование в IT-компанию: что нужно знать джуниору

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

👉 @sWebDev