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

Как перенаправить реф React?

Вам нужно перенаправить реф компонента одному из его дочерних элементов, как вы это сделаете?

Забыли? Ищите ответ в нашем посте за 13.10.

👉 @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

Marko.js

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

👉 @sWebDev

Приручаем многопоточность в Node.js (часть 1: базовые концепты)

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

👉 @sWebDev

Анимированная кнопка отписки на Gsap.js

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

👉 @sWebDev

Прочный фундамент для API: Docker + Node.js + Nginx + Postgres

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

👉 @sWebDev

Профессия «Фронтенд-разработчик» на Хекслете включает в себя гораздо больше, чем кажется на первый взгляд.

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

Вы будете участвовать в разработке открытых проектов Хекслета на GitHub, напишите 4 полноценных приложения для бизнеса и попрактикуетесь в решении реальных кейсов от компаний-партнеров.

Цель любого обучения – это трудоустройство. Мы пройдем путь до первой работы в IT вместе с вами. 

Начните прямо сейчас. Вводные курсы профессии доступны бесплатно сразу после регистрации.

Skeleton.js

Библиотека для создания веб-приложений. Обладает собственной CSS сеткой и кроссбраузерностью.

👉 @sWebDev

Mobile VR Sonic

По ссылке мини-игра, выполненная на Three.js.

👉 @sWebDev

Select на React

По ссылке пошаговое руководство по созданию select с применением React.

👉 @sWebDev

Как преобразовать значения в Angular приложении?

При работе с приложением может возникнуть ситуация, когда вам необходимо преобразовать значение и сделать это нужно максимально быстро и в минимум строк кода. Например, если приложение на Angular, то можно использовать один из встроенных фильтров. Именно этот фильтр мы рассматривали в посте за 17.10.

👉 @sWebDev

Аудиотека на GSAP.js

Проект аудиотеки, выполненный на GSAP.js. Данный функционал можно использовать, например, для создания собственного музыкального сервиса или раздела с музыкой в вашем веб-приложении.

👉 @sWebDev

Использование private переменных в шаблоне

Создание Angular приложения просто невозможно без ошибок. Не всегда очевидно, в каком месте или в какой части кода она таится, а поиск может отнять немало времени. Например, использование private переменных в шаблоне является плохой практикой, т.к. все свойства компонента или сервиса, которые объявлены с модификатором private, должны использоваться исключительно в пределах своего класса. Обращение к ним в шаблоне или другом сервисе приведет к генерации исключения, но только в момент сборки приложения.

Воспроизведём ошибку:

  selector: 'private-error',
  template: ` <div>{{ message }}</div> `,
})
export class PrivateErrorComponent {
  private message: string = 'Variable should be public'
  constructor() {}
}

Выполним сборку:
ng build --prod

В консоли увидим следующее:
Property 'message' is private and only accessible within class 'PrivateErrorComponent'.

👉 @sWebDev

React, я люблю тебя, но ты сводишь меня с ума

Перевод резонансной статьи, посвященной React. Материал написан в шуточной форме, однако, это не уменьшает ее пользы при рассмотрении особенностей и подводных камней данной библиотеки.

👉 @sWebDev