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

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

Прочный фундамент для API: Docker + Node.js + Nginx + Postgres При создании новых проектов, заложить надежный фундамент труднее всего. Поэтому мы изучим универсальную сборку для бэкенда на Node.js c Postgres в Docker. И, конечно, обязательно отдадим статику через Nginx. 👉 @sWebDev

JS Booster – канал в котором публикуются заготовки интерфейсов, задачи и полезные статьи для веб-разработчиков. Материалы будут полезны для любого уровня подготовки! Подпишись и улучши свою работу! 👇

Анимированная кнопка отписки на Gsap.js Проект анимированной кнопки отписки, выполненный на Gsap.js. 👉 @sWebDev

Приручаем многопоточность в Node.js (часть 1: базовые концепты) Первая часть из цикла статей о многопоточности в Node.js. Материал поможет улучшить производительность вашего Node.js-приложения и разобраться в ряде продвинутых функций данной библиотеки. 👉 @sWebDev

Marko.js Marko.js не так популярен, как Angular, React.js, Vue.js или Svelte. Marko.js является проектом ebay.com, который с 2015 года стал достоянием opensource. Именно на этой библиотеке построен фронтенд ebay.com. Ознакомиться с функционалом данного фреймворка можно по ссылке. 👉 @sWebDev

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