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

Pipe в Angular Angular pipe, или просто фильтр, нужен для преобразования данных прямо в HTML-шаблоне. Например, отображение даты и времени в желаемом формате или задание формата вывода числового значения. В Angular имеется ряд встроенных фильтров, но также предусмотрена возможность создания собственных. Рассмотрим пример использования встроенного date pipe. date-pipe-example.component.ts.

  selector: 'date-pipe-example',
  template: `
    <p>
      Transformed date:
      {{ exampleDate | date: 'dd.MM.yyyy' }}
    </p>
  `,
})
export class DatePipeExampleComponent {
  exampleDate = new Date(2000, 12, 12)
}

Как видно из примера, наименование Angular pipe указывается после символа |, следующим за значением, которое необходимо преобразовать. 👉 @sWebDev

Как перенаправить реф React? Вам нужно перенаправить реф компонента одному из его дочерних элементов, как вы это сделаете? Забыли? Ищите ответ в нашем посте за 13.10. 👉 @sWebDev

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

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

Silent Movie Text Effect Проект анимированного текста из старого кинематографа. Выполнено с использованием библиотеки GSAP js. 👉 @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

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

Rust — мультипарадигменный современный язык, который можно применять не только для написания бэкендов, но и для фронтенд-разработки. Почему Rust хорош во Frontend-разработке? 🤔 ⚡️Обсудим 20 октября в 20:00 на бесплатном вебинаре Rust и Frontend в OTUS. 📚На занятии мы: - Поговорим, о том, что Rust успешно занял развивающуюся нишу компиляции в WebAssembly - Увидим, что Rust может использоваться не только как основной, но и как вспомогательный инструмент для уже существующих веб-проектов. 👉 Для регистрации на вебинар пройдите вступительный тест: https://otus.pw/t2Z6/ Это занятие — часть онлайн-курса Rust Developer для специалистов с опытом программирования.

Вторая волна отъезда из-за мобилизации - через пару месяцев дефицит опытных ребят станет ещё заметнее. Получать ЗП за границей, без конского налога, можно только полгода. Дальше придется увольняться, поэтому работу ищут уже сейчас и освобождают рабочие места... Продолжение поста ➡️ Подписывайся - будет много полезной и интересной инфы.

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

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

Профессия «Фронтенд-разработчик» на Хекслете включает в себя гораздо больше, чем кажется на первый взгляд. На курсе мы даем даем фундаментальные основы и развиваем алгоритмическое мышление. Несколько сотен практических заданий в онлайн-тренажере – лишь часть обучения. Вы будете участвовать в разработке открытых проектов Хекслета на GitHub, напишите 4 полноценных приложения для бизнеса и попрактикуетесь в решении реальных кейсов от компаний-партнеров. Цель любого обучения – это трудоустройство. Мы пройдем путь до первой работы в IT вместе с вами.  Начните прямо сейчас. Вводные курсы профессии доступны бесплатно сразу после регистрации.

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

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

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

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

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

Quiz App with React + GSAP CSS викторина, созданная на библиотеке React и Gsap. Ознакомиться с кодом можно по ссылке. 👉 @sWebDev