📑 Запускаем свой RTMP сервер для стриминга

Иногда YouTube или Twitch не подходят как стриминговая платформа — скажем, если вы пилите портал с вебинарами или контентом 18+, нарушаете авторские права или хотите максимально отгородить свою трансляцию от остального интернета. У них есть много альтернатив как в виде сервисов (те же минусы, недостаток контроля и непредсказуемая политика), так и в виде self-hosted решений.

В этой статье мы разберём минимальную цепочку действий для запуска своего RTMP-сервера с плеером.

#статьи #web #coding

🛠 Moveable — интересная библиотека, которая принимает любой HTML-элемент и переводит его в режим «свободного преобразования», позволяя захватить его с помощью мыши и изменить его размер, форму, ориентацию и положение.

#инструменты #html

💡 Присвоения примитивных и ссылочных типов

▍Часть 2

Перед прочтением рекомендуем ознакомиться с первой частью.

...Например, в коде ниже переменной var2 присваивается значение var1. Т. к. var1 является примитивом (String), то переменной var2 присваивается строковое значение var1, и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения var2 никак не отразятся на var1.

let var1 = 'My string';
let var2 = var1;

var2 = 'My new string';

console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

А теперь попробуем то же самое с типом Object.

let var1 = { name: 'Jim' }
let var2 = var1;

var2.name = 'John';

console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

Если бы вы ждали от кода выше такого же поведения, как и с примитивами, — это, вероятнее всего, вызвало бы ошибки. Подобное может быть особенно неудобным, если вы решите создать функцию, которая будет изменять какой-нибудь Object.

#советы #coding #js #web

🎁 Бесплатная раздача для подписчиков

Специально для подписчиков наших каналов о программировании, мы бесплатно раздаем файл  📦 Freedom Messaging App UI Kit через UI8 Bot. Чтоб получить этот файл бесплатно, достаточно нажать на кнопку под постом.

Внимание! Раздача ограничена по времени.

🔥 Лучшее на канале за неделю

1. Запускаем свой RTMP сервер для стриминга.

2. Moveable — интересная библиотека, которая принимает любой HTML-элемент и переводит его в режим «свободного преобразования».

3. Присвоения примитивных и ссылочных типов.

📑 Незаметная психология e-com сайтов

Есть в Америке один спец, который изучает психологию и применяет ее, главным образом, в е-коммерции. Зовут его Ник Коленда, а его книги на Амазоне — настоящее открытие для меня лично и источник вдохновения там, где попытки поднять конверсию заходят в тупик.

Впрочем, найти книги Ника на русском языке можно, например, на Литресе, но их мало. Собственно, как и переводов статей. О чем пишет Ник, в трех словах в этой статье.

#статьи #советы #web

Выберите правильный вариант 👇🏼 #test #js

🛠 Prettier —  это форматировщик кода, который обеспечивает согласованный стиль всего вашего кода. Он гарантирует, что независимо от того, кто вносит свой вклад в код, форматирование и стиль останутся неизменными. Его можно настроить для запуска при сохранении редактора или в средах CI.

#инструменты #js

📖 Изучаем Angular 2
🖋 Пабло Дилеман, 2017

Эта книга поможет вам освоить основы проектирования и разработки компонентов Angular 2, обеспечивая полный охват синтаксиса языка TypeScript. После
создания первых компонентов мы объединим их в полноценное веб-приложение. Затем перейдем к реализации маршрутов в Angular 2, узнаем, как организовать поддержку разных состояний приложения и навигацию между компонентами.

💾 Скачать книгу

#book #angular #typesctipt #js

💡 Замыкания в JavaScript

Замыкания — важный паттерн для приватизации переменной. В примере ниже createGreeter возвращает анонимную функцию, которой доступна переданная переменная greeting со значением «Hello». После эта переменная будет доступна для sayHello.

function createGreeter(greeting) {
 return function(name) {
   console.log(greeting + ', ' + name);
 }
}

const sayHello = createGreeter('Hello');

sayHello('Joe');
// Hello, Joe

Продолжение следует...

#советы #coding #js #web

Выберите правильный вариант 👇🏼 #test #js

📖 Веб-компоненты в действии
🖋 Бен Фаррелл, 2020

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

💾 Скачать книгу

#book #web

📑 Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

Что такое портал?

Представьте себе компонент select. У него есть выпадашка с вариантами на выбор. Если хранить ее в том же месте в DOM, что и сам компонент, можно нарваться на ряд проблем. Нижестоящие элементы могут выскочить поверх, а контейнер — срезать содержимое...

#статьи #angular #typesctipt

🛠 Vant — более 60 компонентов для Vue.js, включая ввод формы, различные виды мобильных меню, а также другие виджеты, такие как цифровые кнопки, панели поиска, средство загрузки файлов и многое другое. Она также поддерживает настраиваемые темы и содержит понятные, простые в использовании документы.

#инструменты #js

💡 Замыкания в JavaScript

Часть 2

Перед прочтением рекомендуем ознакомиться с первой частью.

...Или же более «правдоподобный» пример. У вас может быть некая функция apiConnect(apiKey), которая возвращает некоторые методы с использованием API ключа. В таком случае этот ключ нужно передать только один раз.

function apiConnect(apiKey) {
 function get(route) {
   return fetch(`${route}?key=${apiKey}`);
 }

 function post(route, params) {
   return fetch(route, {
     method: 'POST',
     body: JSON.stringify(params),
       headers: {
         'Authorization': `Bearer ${apiKey}`
       }
     })
 }
 return { get, post }
}

const api = apiConnect('my-secret-key');

// Больше передавать ключ не нужно
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

#советы #coding #js #web

📑 Что не так с WebAssembly?

Современные браузеры могут намного больше, чем рендеринг веб-страниц. Это стало одной из причин появления WebAssembly. Эта технология создана в попытке вывести скорость решения сложных задач на новый уровень, построить мост между JavaScript и машинным кодом.

WebAssembly, в теории, может позволить кому угодно писать низкоуровневый код, выполняющийся в браузере, в безопасном виртуальном окружении. И, что ещё интереснее, технология WASM (сокращение от WebAssembly) была спроектирована как цель компиляции для других языков, позволяя коду, который обычно выполняют в серверной среде (например — коду, написанному на C или на C++), компилироваться в соответствующий формат и выполняться в браузере.

У WASM был огромный потенциал и невероятные перспективы. Что же пошло не так? Почему WASM, через 3 года после релиза, ещё не используется в каждом веб-проекте? Есть ли у WASM будущее в веб-разработке? Поищем ответы на эти вопросы.

#статьи

Выберите правильный вариант 👇🏼 #test #js