​Infinity в JavaScript

В JavaScript существуют специальные значения: Infinity и -Infinity. Эти значения используются как границы в алгоритмах как бесконечно большое и бесконечно малое значение соответственно.

Получить такие значения можно явно:

let a = Infinity

Или в некоторых случаях, например:

1 / 0    //  Infinity
-1 / 0   // -Infinity

В целом, особо тут обсудить больше нечего. Пост скорее просветительский, из разряда «глянь что могу».
Спасибо за прочтение.

#javascript

Сделал на реакте блог, просто от безделья. Там некоторые посты с канала. Если кому-то интересно как канал мог бы выглядеть в форме сайта, то пощупать можно тут.

Страница проекта на guthub: markdown-github-blog

#blog

​Что такое this

Часто понятие контекста this у новичков и не только вызывает массу вопросов.

Если максимально просто, то контекст — это объект. Это первый пункт, который необходимо запомнить. Контекст — это всегда объект, которому принадлежит исполнение кода. Что это значит?
Разберем на примере браузера:
Допустим, что есть функция foo()

function foo() {
    console.log(this === window)
}

Это весь наш код.  Если мы вызовем эту функцию в глобальной области видимости, то увидим в консоли значение true. Это происходит потому что наша функция вызывается относительно глобального объекта window. Вызов принадлежит объекту window. Более того,
this.hasOwnPropery('sayHi') === true

Созданная нами функция является методом внутри глобального объекта. Поэтому ключевое слово this в этом случае действительно равно объекту window.

Давайте попробуем создать класс с методом, который покажет нам контекст объекта, инстанса класса:

class Bar {
    constructor(number) {
   this.number = number
   this.name = 'denis'
    }
  
    showThis() {
   console.log(this)
    }
}

const bar = new Bar(5)
bar.showThis()

Достаточно простой код. Мы создаем класс Bar, в методе constructor объявляем контекст нашего класса. При вызове метода showThis мы увидим ожидаемый объект:

{
  name: "denis",
  number: 5
}

Метод showThis вызывается относительно объекта bar и его контекста. Поэтому мы видим созданный объект из конструктора класса. Если бы на вход к конструктору было подано другое значение, то мы получили бы и, соответственно, другой контекст. Отсюда получаем самые важные свойства контекста:

Контекст — ближайший вышестоящий объект, который управляет вызовом кода.
Контекст динамичен.
Контекст доступен по ключевому слову this.

На самом деле, this — это лишь ссылка на запись в памяти, которая указывает на контекст.  А если это всего лишь ссылка, то значит мы можем управлять контекстом, вау! На управлении контекстом реализованы несчетное количество паттернов и концепций. Об управлении контекстом мы поговорим позже, а за управление контекстом отвечают методы call,apply и bind. Их нужно знать и уметь применять, ждите новый пост.

Из нюансов:
1. Глобальный контекст разный на разных платформах: в браузере это объект window, в nodejs это объект global. 
2. Контекст разный в зависимости от режима работы: в режиме "use strict;" или без него. О том, что такое "use strict;" я тоже скоро расскажу.
3. Стрелочные функции не имеют собственного контекста. Их контекст всегда указывает на глобальный объект.
4. В DOM-API ключевое слово this указывает на объект event.currentTarget(). Для понимание этого пункта рассмотрите код ниже.

<button onclick="console.log(this.innerHTML)"> 
    Текст внутри кнопки
</button>

При нажатии на кнопку в консоли увидим сообщение "Текст внутри кнопки".
Занятно, но с современными фреймворками, наверное, бесполезно.

На этом всё. Спасибо за прочтение, это важно для меня.

#javascript #web #theory

​Pet-проекты и где они обитают

Почти год назад в этом канале я писал о pet-проектах. В том посте я рассказал совсем базовые вещи: что это такое и почему стоит попробовать. Сегодня хочу снова поднять эту тему немного в другом ключе.

Обучение программированию — это не только теория, на мой взгляд. Наоборот, хороший программист — это далеко не тот человек, кто использует правильные термины или знает абсолютно все микромоменты в технологии. Хороший программист — это человек творческий, способный решать задачи бизнеса быстро, дешево и качественно. Способный быстро адаптироваться к новым условиям и найти выход из ситуации, в которую попал впервые. Именно поэтому на многих собеседованиях вас просят писать код на обычной бумаге. Это заставляет вас работать в заведомо некомфортных условиях, и если вы в таких условиях пишете качественный код, то вы — хороший программист.

И как бы глубоки ваши теоретические знания ни были, без практических навыков вы не сможете показать хороший результат. А чтобы получить новые практические навыки и поэкспериментировать с технологиями, есть отличный вариант — pet-проекты. Замкнутый круг.

И в этом случае pet-проекты выступают прям панацеей для получения новых навыков. Идеи для таких проектов можно искать где угодно, но я бы посоветовал banda.works.

Вообще, это небольшая команда, которая делает открытые проекты для помощи в обучении и трудоустройстве новичкам в вебе. И сайт с pet-проектами — это один из проектов этой команды.
И сервис, на самом деле, находка. Там бесплатно размещены не только интересные проекты, но и некоторые вступительные испытания крупных компаний. Так что это отличный вариант изучить что-то действительно востребованное на рынке. Там, кстати, удобная сортировка по технологиям, так что если вы хотите написать проект на условном React, то сортировка делается в 1 клик.

Ещё тема трудоустройства поднимается в их телеграм канале: @bandaworks_bb.
Так же советую. Рекламу в этом канале я не продаю, так что этой рекомендации более чем можно доверять.

Примерно такие мысли на сегодня, спасибо за прочтение. Это важно для меня.

#blog #useful

​​Сказ о том, как я HTML в JPG конвертировал...

Обычно, когда я пишу посты в канал, я использую фотошоп для создания картиночки к нему. Эта картинка присутствует у подавляющего большинства постов и я думаю для многих это уже неотъемлемая часть стиля всего канала. И часто эта самая картинка — большая проблема для меня. Для её создания мне нужен сам фотошоп, время, куча ненужных действий и вот это вот всё неприятное. И пусть я делаю всё это по шаблону, который подготовил заранее, даже тут моя лень находит способ помешать мне. А лень — двигатель прогресса, это уж точно.

В общем, проблем несколько:
— Лень
— Занимает относительно много времени и не приносит удовольствия
— Посты можно оформить только с ПК
— Я счастливый обладатель MacBook на M1, так что для нормальный работы в Photoshop нужно тратиться на лицензию

Я решил найти другое решение: бесплатное, быстрое, удобное и кросс-платформенное. И нашел.

Для решения задачи я хотел использовать Python, но решение это было не лучшее. Нет нормального API для работы с DOM элементами, нужна песочница для запуска браузера, работает медленнее, а самое главное - на Python у меня гораздо меньше опыта. Я реализовал рабочий вариант на imgkit достаточно быстро, но он не устроил меня, код удалён.

Ну и, соответственно, я решил использовать node js. Я имею куда больше опыта c node и javascript, так что рабочее решение, которое по моим тестам работало быстрее решения на Python в 7.5 раз, было готово меньше чем через 20 минут.

Я быстро накатил первую попавшуюся из поиска библиотеку node-html-to-image, воспользовался неплохой документацией, сверстал максимально странный, но рабочий макет и вот, мой html конвертируется в изображение за, в среднем, 2.4 секунды. Ещё за полчаса я изучил библиотеку node-telegram-bot-api и создал на основе скрипта-генератора удобный для себя интерфейс для управления им. Теперь картинки к моим постам генерируются на бесплатном хостинге heroku, и делают они это через API бота в телеграм. Процесс выглядит так.

В итоге, процесс создания картинки максимально упрощён. Я могу оформить пост с любого устройства, где поддерживается клиент телеграмма (то есть даже с утюга), мне не нужно платить за подписку на Photoshop и я даже могу делегировать создание постов на кого-то куда проще.

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

Можно было написать лучше, может быть на питоне это генерировалось бы за миллисекунды, мне плевать. Оно работает и выполняет свою задачу более чем удовлетворительно. Картинка к этому посту уже сделана через бота. Сравнив её с прошлыми, где все сделаны вручную, я думаю, вы оцените качество результата. Можете, кстати, поискать на картинке пасхалку. Милая штука, на мой взгляд.

Делюсь. Вот. Спасибо за прочтение, это правда важно для меня.

#blog #useful #github #design #chatbot

​​Проблема 0.1 + 0.2

Часто на собеседовании можно встретить такой вопрос:

Что будет выведено в консоль?
0.1 + 0.2 == 0.3 // ?

Любой адекватный человек, который знает школьную математику, ответил бы, что в консоли будет выдано значение true, но это неверный ответ. Будет false.

0.1 + 0.2 === 0.30000000000000004

Что за бред? Почему? Зачем?

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

Представление нашей десятичной алгебры в компьютере задано в двоичной системе счисления, как байт код, нулями и единицами. И сложность заключается в том, что число 0.1 в двоичной системе непредставимо. Это просто невозможно записать.

Всё далеко не так просто, но если кратко, то суть проблемы заключается именно в этом. Стоит понимать, что почти все современные и не только языки программирования считают с определенным допуском по точности. То есть не максимально точно, а с определенным её порогом. Слишком высокая точность вычислений приведет к тому, что языки будут совершать математические операции дольше. Поэтому используется та точность, которая будет удовлетворять нас по производительности, но, при этом, сведёт математические ошибки к минимально возможным. Эта самая точность по умному называется репрезентативностью.

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

Спасибо за прочтение, это важно для меня.

#theory

​​Итерирование по сущностям: filter

Код из примеров очень сложно читать в самом Telegram из-за его размера, так что все примеры для простоты я перенёс в телеграф.

Ранее я уже рассматривал методы итерирования по массиву map и reduce. Предлагаю дополнить этот список методом filter.

1. filter возвращает новый массив без изменения старого
2. Параметром принимает callback, который должен вернуть значение типа boolean или значение, которое будет преобразовано к boolean, например пустую строку
3. В новый массив попадут все значения, для которых функция callback вернула значение, подобное true

Например, необходимо получить список всех положительных чётных чисел из списка (пример 1)
Или из списка customers нужно получить всех покупателей, которые подтвердили свой аккаунт (пример 2)
В результате получим два искомых покупателя. То есть из объекта даже можно возвращать одно из полей, не применяя к нему никаких вычислений.

Полная сигнатура метода:

filter(function callback(element, index, array) { ... }, thisArg)

Где callback - функция, а thisArg - значение, которое будет использовано как this в callback функции.

И filter, как метод, можно использовать в цепочке, тем самым оформляя решения крайне читабельно и красиво, например:
Написать функцию, которая на вход получает массив слов, а возвращает общую длину всех слов палиндромов. Пример сказочный, но допустим (пример 3)

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

Чаще всего хватает одного метода или комбинации двух из трёх методов. Эта задача усложнена намеренно, чтобы оправдать использование трёх методов сразу. И даже эту задачу можно решить лишь с использованием filter и reduce, map тут избыточен.

Есть еще много способов итерации по сущностям, например те же разные виды цикла for. Их я разберу чуть позже. Ну а пока, спасибо за прочтение, это важно для меня ❤️

#javascript #web #theory #useful

​​Что такое чистая функция

Я часто смотрю видео с собеседований и этот вопрос встречается чуть ли не в каждом втором собеседовании на разных уровнях. И больше всего удивляет, что даже мидлы не знают что это такое и не могут дать точного определения. А я могу 🙂

Чистая функция — это функция, обладающая сразу двумя свойствами:

1. Функция зависит только от входных параметров, на одинаковых наборах входных значений возвращается один и тот же результат вне зависимости от внешних факторов.
2. Функция не влияет на что-либо вне себя. Чистая функция не может изменять внешние переменные, управлять чем-либо извне, создавать файлы, изменять входные параметры по ссылкам и т.д.

Максимально просто, но почему-то знают не все.

Также я подготовил примеры чистых и не чистых функций. Размещаю их по ссылкам, чтобы не раздувать пост в объёме. Примеры на JavaScript, но код более чем читаемый.

Чем чистые функции так полезны и почему это хорошо? Они ведут себя предсказуемо и их легко тестировать. Чистые функции поддаются тестированию проще других, не мутируют, не вызывают непоняток. Поэтому они так ценятся и в без того проблемном JavaScript. И в других языках, конечно.

На этом всё. Спасибо за прочтение ❤️

#javascript #theory

​​Какие типы данных есть в JavaScript

В любом языке базовым вопросом будет назвать типы данных и JavaScript тут не исключение. Разберем один из самых частых вопросов на собеседовании.

Итак, в JavaScript есть 6 типов:
- number
- string
- boolean
- null
- undefined
- object

Первые 5 являются примитивами, а object является сложным типом данных. Также ES6 принёс в язык типы BigInt и Symbol.
Из особенностей:

typeof null // 'object'
typeof [] // 'object'
typeof (() => {}) // 'function'
typeof function() {} // 'function'
typeof NaN // 'number'

const a = new Set()
const b = new Map()

typeof a // 'object'
typeof b // 'object'

1. typeof null === 'object' — это официальная ошибка, которая сохраняется ради обратной совместимости кода. На самом деле null — это отдельный примитив.
2. Массив не является отдельным типом данных. Это объект
3. Так же, как массив, Map, Set, WeakMap, WeakSet — это объекты.
4. Хоть функция и обрабатывается оператором typeof как 'function', на самом деле, функция — это тоже объект. Почему так мы разберём чуть позже, но вообще функции называют объектами первого класса. Так что на самом деле функция — это тоже объект.
5. typeof NaN === 'number'. Вот такой прикол вам оставили разработчики, да. Not A Number — это инстанс Number. Для проверки NaN есть специальная глобальная функция isNaN().

Тот ответ, что я описал — это максимально точный и развёрнутый ответ. Не стоит приплетать что-то еще. И на этом всё. Спасибо за прочтение и интерес, это правда важно для меня.

#javascript #theory

​​Методы управления контекстом вызова

Ранее мы разбирали что такое this и там я пообещал рассказать о методах call, apply и bind. Этот пост как раз об этом.

Итак, все эти 3 метода созданы для управления контекстом вызова функции. Давайте рассмотрим пример:

const person = {
  name: "Deins",
  greet(greeting = 'Hi') {
    console.log(`${greeting}, ${this.name}`)
  }
}

const channel = {
  name: "progway"
}

// Hi, Denis
person.greet()

// Hello, progway
person.greet.call(channel, 'Hello')

// Привет, Денис
person.greet.apply({name: 'Денис'}, ['Привет'] ) 

const greetMax = 
  person.greet.bind({name: "Макс"}, 'Привет')

// Привет, Макс
greetMax()

Без кода всё равно не разобраться.

У объекта person есть метод greet, который за контекст вызова берёт как раз объект person. Но если мы хотим применить к этому методу другой контекст, например созданный заранее объект channel или новый произвольный объект, то необходимо использовать вышеописанные 3 метода.

call, apply — применяют новый контекст к функции, принимая новый контекст первым параметром, а далее вызывают функцию с указанными аргументами.

call принимает аргументы функции через запятую, а apply принимает их списком. Это основное отличие между этими двумя методами.

bind — так же применяет контекст и через запятую принимает параметры для вызова, НО

Самым важным отличием является то, что методы apply и call сразу же вызывают функцию и возвращают её результат, а метод bind создает новую функцию относительно аргументов и контекста, но не вызывает её. Такую функцию мы можем сохранить в переменную и вызвать позже.

Такие манипуляции встречаются часто, но для чего именно они нужны мы тут разбирать не будем, оставим это на потом.

И на этом пока всё. Спасибо за прочтение, это важно для меня.

#javascript #theory

​​Специфичность CSS

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

Итак, специфичность указывает на то, какой стиль будет применён к элементу. На это влияет три показателя:
— Место определения селектора
— Вес селектора
— Директива !important

Разберем их по порядку:
• Специфичность выше, если свойство объявлено ниже. То есть в примерах

body {
 color: black;
 color: red;
}

div {
 width: 100px;
}

div {
 width: 400px;
}

Элемент body будет иметь правило color: red;, а элемент div будет иметь правило width: 400px;, так как эти свойства объявлены ниже и "перезаписали" вышеописанные свойства.

• Вес селектора — это величина, которую считают по разному. Есть как минимум два способа, но тут главное понять принцип. Я расскажу только об одном из них.

Каждый тип селектора имеет свой вес:
Тег — 1
Класс — 10
ID — 100
Inline — 1000

Посчитаем вес селектора на примере:

div = 1 
div.className = 1 + 10 == 11 
#id .className = 100 + 10 == 110
div > span = 1 + 1 == 2 

К элементу применяются свойства от селектора, который имеет самый высокий вес. Если вес селекторов одинаковый, то применяется тот селектор, что описан позже.

• Но если в селекторе с меньшим весом или объявленном выше к свойству применить директиву !important, то в таком случаем специфичность такого правила будет максимальной и применится то правило, что помечено директивой.
Запись выглядит так:

div {
 color: red !important;
}

div {
 color: blue;
}

В примере к элементу div будет применено правило color: red;.
Использование этой директивы является плохим тоном и оправдано только в самых крайних случаях.

Спасибо за прочтение. Это важно для меня.

#web #theory

​​Есть ли в JavaScript перегрузка функций?

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

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

function foo(x, y) {
  ...
}

function foo(x, y, z ) {
  ...
}

foo(x, y)    // вызовется первая функция
foo(x, y, z) // вызовется вторая функция

Перегрузки функций в JavaScript нет. При интерпретации кода выше, интерпретатор переопределит значение по ссылке foo и при вызове функции с разным количеством аргументов мы будем вызывать одну и ту же функцию, только:

foo(1, 2)
// x = 1
// y = 2
// z = undefined

foo(1, 2, 3)
// x = 1
// y = 2
// z = 3

Может быть только одна функция с именем foo, которая вызывается с любыми аргументами. А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.

Для более удобной реализации логики в функциях с динамичным количеством аргументов в JavaScript реализован доступ к «лишним» аргументам через псевдомассив arguments. О нём и пойдёт речь в следующем посте.

Ну а пока он ещё не вышел, вы можете сделать доброе дело и порекомендовать мой канал своим друзьям, товарищам, коллегам. Моей благодарности не будет предела.

Спасибо за прочтение. Это очень важно для меня ❤️

#javascript #theory

​​Лишние аргументы и arguments

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

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

function foo() {
 console.log(arguments)
}

foo(1,2,3)
// { '0': 1, '1': 2, '2': 3 }

Да и вообще, почему я пишу, что это псевдомассив, если в результате мы видим, что arguments — объект? На самом деле это объект, подобный массиву. Это обычный объект, у которого реализован геттер length и к которому можно применять некоторые другие операторы итерируемых сущностей. Но у arguments нет других методов массива, например shift или push.

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

function sum() {
  return [...arguments].reduce((acc, cur) => acc + cur, 0)
}

Как вы можете заметить, я применяю Spread оператор к arguments, потому что у этого псевдомассива нет метода reduce. Таким образом получается функция, которая соответствует задаче.

sum(1,2,3,4,5) // 15
sum(1,2,3,4,5,6,7,8,9) // 45
sum(10, 20) // 30
sum() // 0 

Есть ещё миллионы примеров применения arguments, но об этом в другой раз. А пока что у меня всё. Спасибо за прочтение и интерес.

#javascript #theory

​​Различия блочных и строчных элементов

Простой вопрос с собеседования, в котором путается много новичков. Предлагаю расставить всё по местам.

Итак, все элементы в HTML делятся на две основные группы: блочные и строчные.

Блочные элементы - это та группа элементов, которые при размещении занимают всю доступную ширину. Блочные элементы всегда становятся друг под другом.

Строчные элементы - это группа элементов, ширина которых соответствует ширине контента внутри них. В отличии от блочных элементов, они располагаются в строку, если для этого хватает места.

Также тип элемента можно изменять при помощи стилей. Если блочному элементу необходимо задать поведение строчного, то достаточно для него указать правило display: inline. Для обратной ситуации по аналогии указывается display: block.

Также существует что-то среднее между блочным и строчным элементом. Для этого необходимо задать правило display: inline-block.

Пример блочных элементов: <div>, <p>, <ul>, <h1>

Пример строчных элементов: <a>, <span>, <strong>, <img>

Из интересного, в более старых версиях HTML было так, что в блочные элементы можно было вкладывать как блочные, так и строчные элементы. А в строчные можно было вложить только строчные. Сейчас такого нет. В HTML5 порядок вложения тегов ни на что не влияет. В новой спецификации используется категориальное деление тегов. Об этом в других постах.

И на этом всё. Достаточно просто, но почему-то вызывает много путаницы. Да и для повторения лишним не будет. Спасибо за прочтение, это важно для меня ❤️

#web #theory

​​Зачем нужен DOCTYPE в HTML

Вроде бы все знают, что в начале каждого HTML документа необходимо указывать магический тег <!DOCTYPE html>, но мало кто может объяснить зачем это нужно делать. Все делают, вот и я делаю тоже. В этом посте расскажу зачем.

Этот тег - отдельная структура в языках разметки, которая называется Document Type Definition или аббревиатура DTD. Похожие определяющие тип документа теги или свойства встречаются, например, в SVG или XML:

<?xml version="1.0" encoding="UTF-8"?>

<svg 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink"
>

И этот тег как раз определяет версию документа. Думаю так же многие знают, что актуальная сейчас версия — HTML5. Чтобы сказать браузеру, что мы используем именно эту версию языка HTML, в начале документа мы указываем тег, который соответствует этой версии, то есть:

<!DOCTYPE html>

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

И на этом у меня всё. Спасибо за прочтение, это важно для меня.

#web #theory

​​Понятия URL, URI и URN

Когда речь заходит о локации документов и адресации, в голову всегда приходит такое понятие, как URL. Это так называемая ссылка для получения документа. Но на самом деле это лишь часть общей теории о локации документов, и сейчас мы разберём эту тему подробнее.

Итак, в адресации существует 3 понятия:
URI - Uniform Resource Identifier - общий идентификатор ресурса.
URL - Uniform Resource Locator - подмножество URI, которое указывает на адрес к ресурсу и механизм обращения к ресурсу.
URN - Uniform Resource Name - имя ресурса, которое записывается по определенному шаблону и является частью URI, но не гарантирует доступность этого ресурса.

На примере это выглядит так:

URI: https://github.com/grnbows/markdown-github-blog#usage
URL: https://github.com/grnbows/markdown-github-blog
URN: github.com/grnbows/markdown-github-blog#usage

https:// в данном случае называется механизмом обращения к ресурсу, #usage — самим ресурсом, в всё что между — это путём до ресурса.

И механизмом обращения может быть конечно-же не только https:// или http://. Также механизмом обращения будет, например ftp://, smb://, file:// и т.д.

И так же важно знать, что:
URL - это всегда URI
А URI - не всегда URL

Это связано с тем, что в URL не входит ресурс, как #usage в примере.

На этом у меня всё. Спасибо за прочтение, это важно для меня. И спасибо, что для моего канала показали большую активность в опросе выше. Ценю.

#web #theory

​​Что такое cookies

Эти окошки с уведомлением об использовании cookies на сайте лично мне уже надоели 🙂Предлагаю хотя бы разобраться что это такое.

cookies — это способ хранить данные на стороне клиента. Сервер присваивает к ответу на запрос некоторую key-value структуру данных, которая сохраняется на стороне клиента. А после клиент при каждом обращении к этому серверу будет отправлять эти самые cookies в составе каждого запроса. Таким образом, cookies — это данные, которые постоянно летают от пользователя к серверу и обратно.

Эта концепция очень востребована в вебе, так как позволяет реализовать большой блок функционала на сайте, например:
— Аутентификация
— Отслеживание разных статусов пользователя
— Локальные настройки пользователя
— Отслеживание действий и предпочтений пользователя
— и т.д.

Также cookies бывают разных уровней:
— Сессионные cookies — удаляются после закрытия браузера
— Постоянные cookies — удаляются через какой-то установленный промежуток времени и не удаляются при закрытии браузера
— Сторонние cookies — куки, которые не привязаны к домену
— Супер cookie — доступны на уровне доменной зоны ( .ru, например )
— Зомби cookie — кукисы, которые сложно или невозможно удалить ( их восстанавливают через JavaScript даже после удаления )

Когда использовать куки? Тогда, когда какая-то информация на сервере нам нужна постоянно. Когда актуальность и скорость в приоритете. Но стоит учитывать, что максимальный размер вообще всех cookies - 4093 байта или почти 4 КБайта. Это очень маленький размер.

Тот же localstorage, например, позволяет хранить данные размером до 10 Мегабайт.

Также учитывайте и то, что для хранения cookies у пользователя необходимо запрашивать разрешение. На всё остальное разрешение нам не нужно, делаем что хотим.

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

#web #theory

​​Как запретить изменение объекта

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

Для объяснения введём объект для примеров:

const obj = {
 name: "progway",
 type: "channel",
 subscribers: 435
}

Чтобы запретить изменения объекта существует два метода — Object.freeze и Object.seal. Они оба запрещают изменять объект, но только по разному.

Object.seal запрещает добавлять в объект новые свойства. Если мы попытаемся добавить в объект новое поле, например avatar, которое будет URL-ом до аватарки канала, то мы это сделать не сможем. Но изменять свойства объекта получится:

Object.seal(obj)
obj.avatar = '...url'
obj.subscribers = 999

После выполнения этого кода получим объект:

{
 name: "progway",
 type: "channel",
 subscribers: 999
}

Свойство avatar просто не будет добавлено. При этом в strict режиме мы получим TypeError. Об этом режиме расскажу в следующих постах, но это важно знать уже сейчас.

Object.freeze действует на объект так же, как и Object.seal, но при этом не позволяет изменять уже записанные свойства. Состояние полностью замораживается и не может быть изменено:

Object.freeze(obj)
obj.avatar = '...url'
obj.subscribers = 9999

После выполнения получим объект:

{
 name: "progway",
 type: "channel",
 subscribers: 435
}

Все манипуляции с объектом проигнорируются, в strict режиме так же получаем TypeError.

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

const obj = {
 name: "progway",
 type: "channel",
 avatar: {
    url: "...url",
    extension: "jpeg"
  }
}

Object.freeze(obj)
obj.avatar.extension = "png"

После выполнения кода получим:

{
 name: "progway",
 type: "channel",
 avatar: {
    url: "...url",
    extension: "png"
  }
}

То есть проблем с изменениями нет.

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

И на этом у меня всё, спасибо за прочтение, это важно для меня ❤️

#theory #web

Хоть где-то ваш голос важен

В посте выше я сказал, что хочу провести новый опрос, вот в чём суть:
В этом канале я часто разбираю теоретические вопросы с собеседования, но так же на этих самых собеседованиях встречаются задачи. Идея заключается в том, чтобы ввести и разборы задач с собеседования, которые будут выходить время от времени под новым хештегом #task. Думаю, что это будет полезно многим и мы немного разбавим теорию практикой, что очень полезно. А вы что думаете?