Название компонентов React

При создании компонентов хорошей практикой является их именование. Это помогает анализировать трассировку стека ошибки при использовании инструментов разработчика React.

Плохая практика:

 default () => <form>...</form>

Хорошая практика:

 default function Form() {
  return <form>...</form>
}

👉 @sWebDev

Highlight.js

Highlight.js - библиотека для выделения синтаксиса. Благодаря ей можно осуществлять поиск кода между тегами pre и code.
Основными преимуществами является поддержка 197 языков, совместимость с большинством JS фреймворков, автоматическое распознавание языка.

👉 @sWebDev

QR-коды на Next.js

QR-кодов в нашей жизни становится с каждым днём все больше. В статье узнаем, как используя библиотеку Next.js добавить QR-код в собственное веб-приложение.

👉 @sWebDev

Another Datepicker

Анимированный выбор даты, созданный на библиотеке GSAP. Код проекта по ссылке.

👉 @sWebDev

Пет-проект на React. Как мы «озвучивали» интернет

Сталкивались ли вы с отсутствием подкастов на нужную тему одновременно с большим количеством текстовой информации по этому вопросу? Думаю, многие да. Не исключением является и герой статьи - Антон Малыгин, который решил создать собственный проект по озвучке интернета на React. Все подробности доступны по ссылке.

👉 @sWebDev

ReSvelte

ReSvelte - инструмент разработчика Svelte и визуализатор дерева компонентов. По мере того, как разработчики создают приложения на Svelte, дерево компонентов становится все более объемным. Ненужный повторный рендеринг компонентов и некорректное размещение компонентов в дереве — проблемы, преследующие многих разработчиков. Рассмотрим, как благодаря ReSvelte их решить.

👉 @sWebDev

Давать имена компонентам React или нет?

Нужно создать компонент в React. Но, как правильно это сделать?

Вариант 1:

 default function Form() {
  return <form>...</form>
}

Вариант 2:

 default () => <form>...</form>

Если сомневаетесь, то подсказка в посте за 03.10.

👉 @sWebDev

Quiz App with React + GSAP

CSS викторина, созданная на библиотеке React и Gsap. Ознакомиться с кодом можно по ссылке.

👉 @sWebDev

Тестирование компонентов React

Разбираемся, как правильно протестировать компоненты React. Изучаем особенности и пошаговое руководство по данному процессу.

👉 @sWebDev

Hole

Анимация обрушающегося пола, выполненная на Three.js.

👉 @sWebDev

Создание директив Angular

Довольно часто при разработке Angular приложения приходится создавать пользовательские директивы (Angular custom directive). Создание самой простой директивы атрибута ограничивается классом, обернутым декоратором @Directive() с заданием необходимой конфигурации. Выглядит так:

  selector: '[zoom]',
})
export class ZoomDirective {}

Квадратные скобки являются указателем того, что это именно директива атрибут. Созданная в примере Angular директива уже может использоваться, но на данный момент она ничего не делает.

👉 @sWebDev

Анимированное сердце на React

Проект анимированной кнопки в форме сердца, выполненный на React.

👉 @sWebDev

Polymer.js

Polymer.js – это созданная в Google библиотека JavaScript, которая позволяет повторно использовать элементы HTML для создания приложений с компонентами. Она представляет собой набор полифиллов (спецификаций веб-компонентов) для создания собственных настраиваемых и повторно используемых элементов на основе API веб-стандартов. Библиотека может распределять пользовательские элементы по сети, чтобы пользователи обращались к ним с помощью HTML Imports.

👉 @sWebDev

О пользе и вреде FullStack-фреймворков на примере Meteor.js

Имеет ли смысл использовать FullStack-фреймворки? Безусловно, да. Быстрая разработка и заинтересованные специалисты — это просто подарок для любого проекта. Но, как и у любого процесса тут есть свои подводные камни, рассмотрим их в материале по ссылке.

👉 @sWebDev

Перенаправление рефов React

Перенаправление рефов позволяет автоматически передавать реф компонента одному из его дочерних элементов. В примере мы используем React.forwardRef в компоненте FancyButton, чтобы получить реф и передать его в дочерний DOM-элемент button.

 FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// Теперь реф будет указывать непосредственно на DOM-узел button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Таким образом, когда мы будем применять FancyButton в других компонентах, мы сможем получить реф находящегося в нём DOM-узла button и использовать его так же, как если бы мы рендерили непосредственно button.

👉 @sWebDev

Silent Movie Text Effect

Проект анимированного текста из старого кинематографа. Выполнено с использованием библиотеки GSAP js.

👉 @sWebDev

Electron JS

Фреймворк, разработанный GitHub. Позволяет создавать нативные графические веб-приложения. Фреймворк включает в себя Node.js для работы с back-end и библиотеку веб-рендеринга из Chromium.

👉 @sWebDev

Как создать собственную директиву в Angular?

Вам необходимо создать собственную Angualar директиву, как вы это сделаете?

Вариант 1:

 
@Component({
  selector: 'the-first',
  template: ` <p>First</p> `,
})
export class FirstComponent {
  constructor(private someSrv: SomeDataService) {
    console.log(someSrv.data)
    someSrv.data = 3
  }
}

Вариант 2:

 FormGroup = new FormGroup({
  fullName: new FormControl(''),
  numbers: new FormArray([
    new FormControl(''),
    new FormControl(''),
  ]),
})

Вариант 3:

  selector: '[zoom]',
})
export class ZoomDirective {}

Сомневаетесь? Вернитесь к нашему посту за 10.10.

👉 @sWebDev

Svidget

Svidget.js - JavaScript фреймворк для создания удивительных и полностью интерактивных SVG виджетов. Разбив на основные компоненты свой графический контент, вы сможете быстро и легко вставлять его на любой сайт, сохраняя четкое разделение между SVG и HTML.

👉 @sWebDev