Javascript

Объект URL в JavaScript: полный разбор ⏩Итак, создать объект URL можно 2 способами: — Конструктор URL():

const url = new URL("https://www.example.com/path?query=123#hash");

— Использование window.location:

const currentUrl = new URL(window.location.href);

⏩Из чего состоит URL Вот некоторые составляющие URL : — href: полный URL. — protocol: протокол, например https:. — host: хост (доменное имя и порт). — hostname: только доменное имя. — port: только порт. — pathname: путь после доменного имени и порта. — search: строка запроса, начинающаяся с ?. — hash: якорь, начинающийся с #. — origin: протокол + домен + порт. ⏩Допустим, у нас есть такой URL, включающий все эти части:

https://www.example.com:8080/path/page.html?query=123#section

⏩Тогда объект URL для него будет выглядеть так:

const url = new URL("https://www.example.com:8080/path/page.html?query=123#section");

⏩А если мы попытаемся вывести значения разных свойств, получим следующее:

console.log(url.href);     // https://www.example.com:8080/path/page.html?query=123#section
console.log(url.protocol); // https:
console.log(url.host);     // www.example.com:8080
console.log(url.hostname); // www.example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path/page.html
console.log(url.search);   // ?query=123
console.log(url.hash);     // #section
console.log(url.origin);   // https://www.example.com:8080

⏩Ещё вы можете изменить любую часть URL, изменяя соответствующее свойство.

url.search = "?newquery=456";
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456#section

⏩Объект URLSearchParams в сочетании с объектом URL упрощает работу с параметрами запроса.

const params = new URLSearchParams(url.search);
params.set("newparam", "value");
url.search = params.toString();
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456&newparam=value

@javascriptv

🖥 Создание приложения Node.js с TypeScript ⏩Полезная статья о том, как настроить TypeScript для создания приложений Node.js с pnpm, Node.js, TypeScript и ES Modules для удобной разработки. План статьи Понимание инструментов Добавление файлов конфигурации — package.json — "type": "module" в package.json — Зависимости — Конфигурация TypeScript — .gitignore — Каталог src Добавление скриптов — Скрипт build — Скрипт start — Скрипт dev —— tsc --watch —— node --watch —— run "/dev:/" 📎 Статья @javascriptv

🔥 Monolith - это инструмент CLI для сохранения полных веб-страниц в виде отдельных HTML-файлов. Он объединяет все ресурсы в один файл, обеспечивая автономный доступ и простое архивирование. ▪ Github @javascriptv

🖥 Понимание среды выполнения JavaScript Хорошая статья, описывающая, как JavaScript работает под капотом. Описывается, как во всём этом процессе участвует куча, стек вызовов, цикл событий и т.д. Особенно это актуально освежить перед собеседованием, скорее всего пригодится. Некоторые факты из статьи: ⏩JavaScript имеет уникальную модель выполнения, основанную на движке. ⏩В среде выполнения JavaScript есть два основных компонента: куча (Heap) и стек вызовов (Call Stack). ⏩Куча предоставляет место для хранения переменных и экземпляров, создаваемых программой. ⏩Стек вызовов играет важную роль в выполнении кода, записывая точку в программе, где выполняются операции. ⏩JavaScript использует асинхронную модель для выполнения операций, которые могут занять непредсказуемое количество времени. ⏩Web API, Очередь Обратных Вызовов и Цикл Событий обеспечивают неблокирующее поведение JavaScript. 📎 Статья @javascriptv

🖥 Полезная статья о функциях высшего порядка в Javascript Функция высшего порядка — это просто функция, которая либо принимает одну или несколько функций в качестве аргументов, либо возвращает функцию в качестве результата. В этой статье мы рассмотрим, что такое функции высшего порядка, почему они полезны и как использовать их в своём коде. Абстрагируясь от общих шаблонов и операций, функции высшего порядка облегчают написание чистого и многократно используемого кода. Функции высшего порядка полезны по нескольким причинам: ⏩Абстракция: Инкапсулируя общие паттерны и операции, функции высшего порядка позволяют писать более абстрактный и многократно используемый код. Это облегчает сопровождение кодовой базы, а также рассуждения о ней. ⏩Композиция: Функции высшего порядка позволяют создавать сложные операции путём объединения простых функций. Это делает ваш код более модульным, гибким и лёгким для понимания. ⏩Лаконичность: Функции высшего порядка могут сделать код более лаконичным и выразительным, сократив объем кода, который вам нужно написать. Это облегчает написание и понимание сложной логики, а также отладку кода. 📎 Статья @javascriptv

🖥 Полезная статья о функциях высшего порядка в Javascript Функция высшего порядка — это просто функция, которая либо принимает одну или несколько функций в качестве аргументов, либо возвращает функцию в качестве результата. В этой статье мы рассмотрим, что такое функции высшего порядка, почему они полезны и как использовать их в своём коде. Абстрагируясь от общих шаблонов и операций, функции высшего порядка облегчают написание чистого и многократно используемого кода. Функции высшего порядка полезны по нескольким причинам: ⏩Абстракция: Инкапсулируя общие паттерны и операции, функции высшего порядка позволяют писать более абстрактный и многократно используемый код. Это облегчает сопровождение кодовой базы, а также рассуждения о ней. ⏩Композиция: Функции высшего порядка позволяют создавать сложные операции путём объединения простых функций. Это делает ваш код более модульным, гибким и лёгким для понимания. ⏩Лаконичность: Функции высшего порядка могут сделать код более лаконичным и выразительным, сократив объем кода, который вам нужно написать. Это облегчает написание и понимание сложной логики, а также отладку кода. 📎 Статья @javascriptv

⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы? Знакомая история? Тогда давай к нам! 🚀 PREAX — онлайн-стажировка для frontend-разработчиков. Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам. ЧТО ВНУТРИ? 🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами. 🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки. 🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг. 🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше. 🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь. 🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий. 🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой. В итоге получишь реальный опыт работы в команде! Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО! Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755

📌Годный контент по CSS и какие в нём появились нововведения О чём говорится в статье: 🔘В CSS появились новые единицы измерения области просмотра, такие как vh, vw, vmin и vmax. 🔘Эти единицы не всегда учитывают особенности мобильных устройств, что приводит к проблемам с адаптивным дизайном. 🔘Были определены новые состояния: большой экран просмотра и малый экран просмотра, и введены новые единицы: svh и svw. 🔘Тригонометрические функции стали доступны прямо в CSS, что упрощает управление функциями трансформации и генерацию случайных значений. 🔘Трансформации теперь можно разделять и применять по отдельности, что делает код более компактным. 🔘Продвинутый синтаксис nth-child позволяет выбирать дочерние элементы по порядковому номеру и добавлять класс элемента. 🔘Ключевое слово @scope позволяет создавать пространства имён и задавать стили с ограниченной областью видимости. 📎 Статья Enjoy) @javascriptv

Телеграм-канал фронтендерского сообщества Яндекса Yandex for Frontend — канал от фронтендеров Яндекса. Рассказываем, как мы делаем красивые и функциональные интерфейсы в наших продуктах, и показываем людей, которые двигают фронтенд-разработку вперёд. *Подписывайтесь* 👉 **https://t.me/yandex4frontend

🖥 Несколько супер-полезных однострочников на JS ⏩Проверить, является ли путь относительным

const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true

⏩Проверить, является ли строка шестнадцатеричным цветом

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

isHexColor('#012'); // true
isHexColor('#A1B2C3'); // true
isHexColor('012'); // false
isHexColor('#GHIJKL'); // false

⏩Подсчитать количество разных дней между двумя датами

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Скопировать в буфер обмена

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

@javascriptv

🖥 Факт дня — метод String.fromCharCode() в JS ⏩Статический метод String.fromCharCode() возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16. Синтаксис

String.fromCharCode(num1[, ...[, numN]]

num1, ..., numN — Последовательность чисел, являющихся значениями единиц кода UTF-16. Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится. Метод String.fromCharCode() возвращает примитивную строку, а не объект String. Поскольку метод fromCharCode() является статическим методом объекта String, вы всегда должны использовать его как String.fromCharCode(), а не как метод созданного вами экземпляра String. ⏩Пример использования метода fromCharCode().

String.fromCharCode(65, 66, 67);  // "ABC"

📎 Полная таблица UTF-16 ⏩Как заставить его работать с большими значениями Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод fromCharCode() может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со всеми допустимыми значениями Юникода (занимающими до 21 бита) одного метода fromCharCode() недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод String.fromCodePoint() (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы. @javascriptv

👨‍💻 Как управлять командой, если сотрудники находятся в разных городах? Ведь руководитель не может следить за настроением подчинённых на удалёнке. Помочь может виртуальное пространство от Яндекс 360 с инструкцией о том, как лучше организовать рабочий процесс. О выстраивании работы в разных часовых поясах и сохранении эффективности даже на дистанционке ребята расскажут 20 марта в 11:00 по Москве. Ещё есть время, чтобы зарегистрироваться на вебинар, сделать это можно здесь 👈

🖥 Немного о замыканиях в Javascript ⏩Замыкание — это функция, которая имеет доступ к переменным, присутствующим в ее цепочке областей видимости, даже если внешняя функция перестает существовать. Чтобы понять суть замыканий, мы сначала рассмотрим их характеристики: — Даже если внешняя функция перестает существовать, замыкание по-прежнему имеет доступ к ее переменным. — Замыкания не имеют доступа к параметру args своей внешней функции. Давайте разберем подробнее первый пункт. Это основная функциональность любого замыкания. В этом сама суть замыканий и принцип работы. Чтобы увидеть это в действии, мы выполним вот эту функцию buttonProps:

let buttonProps = (borderRadius) => {
  const createVariantButtonProps = (variant, color) => {
    const newProps = {
      borderRadius,
      variant,
      color
    };
    return newProps;
  }
  return createVariantButtonProps;
}

let primaryButton = buttonProps("1rem"); 

Вызов функции buttonProps вернет нам другую функцию, которая является нашим замыканием. Теперь давайте выполним это замыкание:

const primaryButtonProps = primaryButton("primary", "red");

В результате выполнения замыкание возвращает следующий объект:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

⏩Итак, почему замыкания по-прежнему имеют доступ к переменным, которые определены вне их области видимости, даже если внешняя функция перестает существовать (например, borderRadius)? ⏩Ответ прост: замыкания не хранят статические значения. Вместо этого они хранят ссылки на переменные, находящиеся внутри цепочки областей видимости. Таким образом, даже если внешняя функция умирает, внутренняя функция, то есть замыкание, по-прежнему имеет доступ к родительским переменным. 📎 Читать подробнее @javascriptv

🖥 3D Scrolling Gallery/Timeline - 3D-прокрутка, выполненная с помощью SVG, CSS и библиотеки GSAP.js https://codepen.io/creativeocean/pen/gOvYEgq @javascriptv

🖥 Асинхронные итераторы в JavaScript ▶️Итак, кейс. Мы работаем с Node.js, и нам нужно прочитать файл, строка за строкой. В Node есть API для такого типа функций, который называется readLine (полную документацию можно найти здесь). Это API событий, которые вы можете прослушивать следующим образом:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./file.txt'),
  crlfDelay: Infinity
})

reader.on('line', (line) => console.log(line))

И допустим, у нас есть простой файл:

line 1
line 2
line 3

Если мы запустим этот код для созданного нами файла, то получим построчный вывод на консоль. Однако работа с событиями — не самый лучший способ получить сопровождаемый код, так как они срабатывают не по порядку, ну и не только. ▶️Решение В дополнение к API событий readline также предоставляет асинхронный итератор. Это означает, что вместо чтения строки через слушателей в событии line мы будем читать строку при помощи нового способа использования ключевого слова for. Представим, что у нас есть интерфейс, который всегда возвращает промис, разрешенный для нашей строки рассматриваемого файла. Чтобы разрешить эти промисы по порядку, нам нужно сделать примерно следующее:

async function readLine (files) {
  for (const file of files) {
    const line = await readFile(file) // Imagine readFile is our cursor
    console.log(line)
  }
}

Однако благодаря асинхронным итерациям (например, readline) мы можем сделать так:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./xpto.txt'),
  crlfDelay: Infinity
})

async function read () {
  for await (const line of reader) {
    console.log(line)
  }
}

read()

Обратите внимание, что теперь мы используем новое определение for — for await (const x of y). 📎 Читать подробнее @javascriptv

Вариант для тех, кто ищет виртуальный сервер с хорошей веб-защитой — Aéza: – Виртуальные сервера до 6.0 ГГц на лучших процессорах; – Профессиональная фильтрация атак StormWall; – Круглосуточная поддержка; – Anycast фильтрация; – Низкие цены; – 15% кешбэка по ссылке. Бесконечно можно смотреть на три вещи: на огонь, воду и скидку от Aeza! Говорят: твоё от тебя не уйдет. А зачем ждать? Динозавры тоже ждали и остались в прошлом Используй 50% скидку и погнали в будущее! Кроме того, сейчас Aéza раздает личные бесплатные сервера, забираем тут. Регистрация, подписка, платежи не потребуются. Реклама. Индивидуальный предприниматель Лобанов Леонид Константинович. ИНН 781625705648 erid: LjN8KEr3S

🖥 Выполнение JavaScript кода, хранящегося в строке: методы ▶️Итак, если коротко, то для того чтобы выполнить JavaScript-код, записанный в виде строки, можно воспользоваться функцией eval():

eval("alert('Выполнено!');"); 

В результате появится всплывающее окно с текстом "Выполнено!". Но будьте осторожны: функция eval() может выполнить любой скрипт, который ей будет предоставлен. Функция eval() обладает большими рисками для безопасности. Важно убедиться в том, что JavaScript-строка правильно обработана перед ее использованием в eval(), так как инъекции кода могут иметь серьезные последствия. Альтернативы для запуска строк JavaScript ▶️Использование функции конструктора `Function`

let func = new Function("return 'Привет, мир!';");
func(); // Привет, мир!

Этот метод умеет обходить внешний контекст. ▶️Модуль `vm` в Node.js В Node.js существует модуль vm, который предоставляет отдельный контекст для выполнения JavaScript-строк.

const vm = require('vm');
const script = new vm.Script("console.log('Привет из VM');");
script.runInThisContext(); // Привет из VM

▶️Безопасное выполнение с помощью `vm2` в Node.js vm2 предоставляет ограниченное окружение для запуска ненадежного кода.

const { VM } = require('vm2');
const vm = new VM();
vm.run("console.log('Выполнение в песочнице');"); // Выполнение в песочнице

Не забудьте следить за обновлениями в части безопасности и обратите внимание на устаревшие API в vm2, чтобы избежать проблем. ▶️Запуск скриптов с помощью jQuery Ни одна замена не сможет заменить добрые старые теги <script>, которые можно использовать для запуска JavaScript-строк с помощью jQuery.

let code = "$('body').append('<p>Привет от jQuery!</p>');";
$('<script>').attr('type', 'text/javascript').text(code).appendTo('body'); // Привет от jQuery!

@javascriptv

It's just CSS Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript. https://codepen.io/tiffachoo/pen/wvyXRzL

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 16 марта.

🖥 Релиз Restate 0.8 🌟 Состоялся релиз системы для создания отказоустойчивых рабочих процессов Restate 0.8. Код проекта опубликован на GitHub под лицензией Put Restate under Business Source License от Restate Software. Согласно пояснению разработчиков проекта, Restate отлично подходит для создания: ⏩рабочих процессов типа Lambda как код (Lambda Workflows as Code) ⏩транзакционных обработчиков RPC ⏩обработки событий с помощью Kafka В версии Restate 0.8 разработчики уделили большое внимание доработке API, учтя отзывы пользователей, чтобы уменьшить трудности при создании сервисов Restate. Также там добавлены комбинаторы промисов (Promise combinators), которые позволяют детерминированно комбинировать промисы. Например, если вы хотите дождаться вызова службы A или вызова службы B, то Restate позаботится о записи того, какой из промисов был выполнен первым, и в конечном итоге воспроизведёт этот выбор, когда это необходимо. В новой версии проекта доступны все комбинаторы стандартной библиотеки JavaScript. Всё это звучит многообещающе, посмотрим) 🖥 GitHub @javascriptv