​​Что такое lazy load

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

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

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

В вёрстке чаще всего это задаётся через свойство load:

<img src="image.jpg" loading="lazy" alt="..." />

Есть и другие способы, но их оставим как домашнее заданее 🙂

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

#web #theory

​​Что такое прогрессивный рендеринг

Довольно старая и интересная концепция в вебе, которую очень любят интервьюеры.

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

И прогрессивный рендеринг — это не одна технология, а их комплекс. Чаще всего на собеседовании от вас ждут такие способы, как ленивая загрузка, разбиение приложения на мелкие файлы или SSR.

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

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

#web #theory

​​Основные структуры данных: Очередь

Очередь — это структура данных, которая подчиняется принципу FIFO, что расшифровывается как «First In First Out», то есть первым будет доступен тот элемент, который положен в очередь первым.

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

Так же как и для стека, в JavaScript очередь может быть реализована через нативные методы массива: push и shift. Первый добавляет элемент в конец, а второй из начала удаляет и возвращает. Выглядеть это будет примерно так:

const queue = []
queue.push(1)
queue.push(2)
queue.shift() // 1
queue.shift() // 2
queue.shift() // undefined

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

class Queue {
  constructor() {
    this.queue = []
  }
  
  enqueue(value) {
    this.queue.push(value)
  }
  
  dequeue() {
    return this.queue.shift()
  }
}

const queue = new Queue()
queue.enqueue(1)
queue.enqueue(2)
queue.dequeue() // 1
queue.dequeue() // 2
queue.dequeue() // undefined

enqueue — вставить элемент в очередь
dequeue — удалить элемент из очереди и получить его

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

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

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

#theory #data

​​Способы создания объекта

Тоже очень популярный вопрос с собеседований по JavaScript, который показывает ваши познания в своеобразном мире объектов. Итак, существует 4 разных метода:

1. Литеральная нотация

const obj = {}

2. Через функцию конструктор или класс. Стоит помнить, что классы в JavaScript — это обёртка над функциями конструкторами, так что объединяю эти два способа в один

function CatFunc(name) {
 this.name = name
}

Cat.prototype.run = function() {
 console.log("run")
}

class CatClass {
 constructor(name) {
  this.name = name
 }

 run() {
  console.log("run")
 } 
}

const barsik = new CatFunc("Барсик")
const tom = new CatClass("Том")

3. Через конструктор объекта

const obj = new Object()

4. Через метод-конструктор объекта

const obj = Object.create(Object.prototype)

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

#web #javascript #theory

​​Мутабельные и иммутабельные данные

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

Данные называются мутабельными, если после создания они могут менять своё состояние. Соответственно, иммутабельные данные своего состояния менять не могут.

В JavaScript как пример мутабельных данных возьмём массив, а иммутабельных — строку.

const mutableArray = [1,2,3]
const immutableStroke = "progway"

mutableArray.push(4) 
// [1,2,3,4]
immutableStroke[0] = "A" 
// "progway"

Строка не изменилась, в отличии от массива. И, кстати, в Python всё сработало бы идеально, так как строки там — мутабельны.

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

И я напоминаю, что массив — это тоже объект в JavaScript.

typeof [] // "object"

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

#web #javascript #theory

​​Операторы сравнения в JavaScript

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

Итак, в JavaScript есть несколько операторов сравнения: больше, меньше... и всё это не особо интересно. Внимание стоит уделить типам, а именно операторам == и ===.

И разница в этих двух операторах довольно примитивная, сначала рассмотрим пример:

"1" === 1 // false
2 == "2" // true 

Суть в том, что двойное равенство работает с автоприведением типов. Поэтому в JavaScript строка "2" и число 2 могут быть равны. И работает это итеративно. При использовании двойного равенства, интерпретатор JavaScript старается привести данные к одному типу. Если привести не получается, то последним действием итерации сравнения, грубо говоря, используется оператор ===.

Тройное же равенство всегда вернёт false, если типы сравниваемых значений разные.

Аналогично == и === есть операторы != и !==, суть та же.

Использованием операторов с автоприведением типов считается плохим тоном.

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

#web #javascript #theory

​​Разница for..in и for..of

В JavaScript есть много способов перебрать итерабельные объекты, и циклы for..in и for..of — способы, достойные внимания.

Эти циклы — это что-то очень похожее на обычный for, что удивительным назвать сложно. Я бы назвал это некоторой надстройкой, сейчас объясню почему.

Для начала рассмотрим код:

const arr = [10,20]

for (let key in arr) {
 console.log(key)
}

for (let value of arr) {
 console.log(value)
}

Цикл for..in перебирает сущность по его перечисляемым свойствам. В массиве такими свойствами являются индексы элементов, а в объекте, например, — ключи объекта.

Поэтому после первого цикла в консоли мы увидим значения "0" и "1"

Цикл for..of перебирает только те сущности, где реализован внутренний итератор, обычно возвращающий значения объекта. Тут мы не будем углубляться о том что это такое, разберёмся позже. Скорее важно понимать, что цикл применим только к итерируемым объектам. Обычный объект итерируемым не является.

И, в целом, на этом всё. Общий вывод кода выше будет такой:

"0"
"1"
10
20

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

#web #javascript #theory

Кстати, про 500 человек на канале я так ничего и не написал...

...Но видимо настало время, ведь более крутой картинки на этот случай я не найду.

Вот так выглядит 547 человеков пауков. Спасибо восьмилапым товарищам за эту цифорку✨

#blog

​​Логические операторы JavaScript

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

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

if (x > 0 && (y === 2 || y === 7)) {
 doSomething()
}

Сегодня будем говорить о чём-то более интересном.

1. Всего операторов три: &&, ||, !
2. Преобразовать значение к типу boolean быстро можно, используя двойное отрицание.

let name = "Denis"
let age
let obj = { age }

!!name // true
!!age // false
!!obj // true

3. Оператор || возвращает первое истинное значение.

const name = "Denis" || "Max" || undefined
// name = "Denis"

4. Оператор && возвращает первое ложное значение.

const age = 20 && '' && null
// age = ''

5. Операторы || и && можно использовать вместо if.

let x, y

true && (x = 2)
true || (y = 10)

// x = 2
// y = undefined

Это первое, что приходит в голову на эту тему.

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

#web #javascript #theory

​​Преобразование строки в число

Хочу, кстати, рассказать об интересном и неявном способе преобразовать строку в число в JavaScript. Речь идет о плюсике. Об обычном плюсике, да. Выглядит это так:

const string = "20"
const num = +string
const num2 = 10 + +string
// num = 20
// num2 = 30, не ошибка

Коротко и со смыслом мне кажется, ведь на этом, по сути, и правда всё.

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

#web #theory #javascript

​​Оператор объединения с null '??'

Относительно новая замена оператору || в быту разработчика. Рассмотрим вот такую ситуацию:

С сервера приходит адрес пользователя, который может быть null либо undefined. В таком случае, обработать этот кейс можно так:

const state = (json.city !== null && json.city !== undefined) ? json.city : "default"

Какая-то совсем страшная кроказябра написана сверху, не так ли?

А можно записать вот так:

const state = json.city ?? "default"

Оператор ?? возвращает первый аргумент, если он не null/undefined, иначе второй. В этой ситуации это однозначно спасает ситуацию и делает код более читаемым.

И кто-то заметит, что вместо ?? можно использовать ||. А вот и нет. Такая ситуация:

Что если в вышепредставленном json есть поле score. Оно либо ноль, либо null/undefined.

Смотрим код:

// json.score = 0

json.score || 1000 // 1000
json.score ?? 1000 // 0

Оператор ?? работает только с null и undefined, а || также обрабатывает falsy-значения.

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

#web #theory #javascript

​​Что такое Spread и Rest операторы и в чём их отличие

Итак, Rest оператор — это оператор, который позволяет собрать лишние аргументы. Сразу на примере:

function foo(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

foo(1, 2, 3, 4, 5, 6);

// a, 1
// b, 2
// manyMoreArgs, [3, 4, 5, 6]

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

Spread оператор, в свою очередь, не применяется как способ развернуть один объект в другой:

const arr1 = [1, 2]
const arr2 = [4, 5]
const arr3 = [...arr1, 3, ...arr2]

// arr3, [1, 2, 3, 4, 5]

Так же это работает не только с массивами, но и, например, с объектами.

Разница Spread и Rest оператора заключается конечно же в том, какой результат выполнения они имеют. Но можно заметить, что они имеют одинаковый синтаксис (...). Отсюда сделаем замечание, что:

— Rest оператор применяется только в объявлении функции с целью создания коллекции аргументов.
— Spread оператор применяется во всех остальных случаях.

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

#web #theory #javascript

​​Что такое нечистый объект

Информации нет в интернете, кстати. Не знаю почему, но видел этот вопрос только на тестовом собеседовании, а вот в интернете ответа просто нет. Эксклюзив, получается 🙂

Итак, понятие "нечистый объект" появляется в контексте клонирования объекта. Нечистым объектом называется тот объект, который внутри себя содержит ссылки на себя же.

Пример:

const obj = {
 foo: 1, 
 bar: obj
}

или

const obj = {
 foo: 1, 
 bar: {
  obj.x
 },
 x: obj.bar
}

Тут объект ссылается сам на себя, из-за чего при копировании код будет завершаться переполнением стека вызова.

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

#web #theory #javascript

​​Какой объект называется итерабельным

Сегодня поговорим о том какой объект называется итерабельным, а именно, какой объект можно проитерировать при помощи цикла for..of.

У любого итерабельного объекта в JavaScript присутствует специальный ключ [Symbol.Iterator]. По этому ключу доступен генератор, который предоставляет для итерации значения. Подробнее о работе генераторов я расскажу в другой раз.

Следовательно, чтобы сделать объект неитерабельным, необходимо удалить это свойство.

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

#web #theory #javascript

​​Откуда методы у примитивов

В JavaScript, как и в других языках, есть примитивы, подробнее тут, но что это в целом такое? Когда мы записываем конструкцию типа:

const year = 2021

Мы не создаём объект, мы просто задаём числовое значение переменной. Но при этом, у этого примитива доступны методы. Так как же?

Дело в том, что интерпретатор JavaScript в рантайме создаёт конструкторы-обёртки над примитивами. Я думаю все знают, что для каждого примитива существуют соответствующие классы типа Number, String...

Так вот, например, такой код:

year.toString()

Будет на деле исполняться как:

new Number(year).toString()

Мы создаём объект примитива на основе примитивного значения и у полученного объекта вызываем методы.

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

#web #theory #javascript

​​Абсолютный и относительный путь

Два понятия из мира файловых систем. Сейчас разберемся что это такое.

Абсолютный путь — полный путь до файла в файловой системе.

Windows:
C:\Program Files\Internet Explorer\iexplorer.exe

UNIX: 
/Users/denisputnov

Относительный путь — путь до файла в файловой системе относительно исполняемого файла.

Как пример, возьмём папку рабочего стола в Unix-системах:

При запуске терминала я оказываюсь в папке /Users/denisputnov. Чтобы зайти в папку рабочего стола я могу написать cd ./Desktop или cd Desktop. Тут я использую относительный путь. Или могу использовать абсолютный и записать команду как cd /Users/denisputnov/Desktop

В этом и заключается вся разница.

В последнее время немного выгорел от постов через день. Постараюсь выпускать посты чаще, но пока всё достаточно печально в этом вопросе 🙂

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

#useful

​​Что такое БЭМ

БЭМ — методология разработки, созданная в Яндексе. Это компонентный подход написания HTML и CSS, который подразумевает разделение интерфейса на независимые блоки.

Вообще, БЭМ, — это далеко не единственная методология разработки, но на данный момент она, наверное, самая модная в рамках СНГ. Часто знание БЭМ требуется даже от джунов.

Описывать сам БЭМ я не буду, да это и не имеет смысла. На официальном сайте есть очень классное руководство, я не напишу лучше.

Разберёмся, скорее, почему БЭМ и действительно ли нужно его учить.

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

Я использую БЭМ и люблю его. Мне нравится этот подход разбиения на составляющие, потому что во многом это упрощает понимание кода и упрощает его поддержку. Так же, что важно, код становится переиспользуемым. Многие блоки проще перемещать со страницы на страницу или дублировать на одной странице, приходится писать меньше кода.

В моём опыте использования не было ничего плохого, что было бы связанно с БЭМ, поэтому всем советую.

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

#web #theory #useful

​​Шпаргалка по пинципам ООП.

Один из самых частовстречающихся вопросов по ООП с собеседований. Разберёмся в этой теме кратко, такого ответа чаще всего хватит интервьюеру.

1. Наследование.

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

В первую очередь это используется для переиспользования уже написанного кода, что должно упростить и ускорить разработку. Классы строятся друг на друге, что выстраивает чёткую иерархию.

2. Абстрация.

Абстрация — выделение главного. Суть заключается в выделении только самого главного и абстрагировании от незначительного. Например, у класса Auto мы создадим поля, например, fuel, mark, age, engine, а от поля lightsColor абстрагируемся, так как для нашей задачи это не важно.

3. Инкапсуляция.

Это скрытие чего либо, ограничения доступа к данным и к возможности их изменения. Как пример — код от учетной записи. Если записать его на листочке и повесить его на монитор, то любой «пользователь», севший за компьютер, получит к ней доступ и сможет поменять пароль. Так же для пользователя выглядят публичные переменные класса.

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

4. Полиморфизм.

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

class Person {
 say() {
   console.log("I'm nobody")
  }
}

class Programmer extends Person {
 say() {
   console.log("I'm programmer")
  }
}

class Director extends Person {
 say() {
   console.log("I'm director")
  }
}

У объектов классов Person, Programmer и Director, одинаковый интерфейс взаимодействия. При том, что они имеют разные типы, поведение подобное. Это и есть смысл полиморфизма.

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

#web #theory #javascript

​​Как только будет время

Постов нет 158 дней, я не против ставить новые рекорды.

Канал не то чтобы заброшен, но времени на него нет, это правда.

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

С момента прекращения выхода постов, из канала ушло почти 100 человек. Это нормально, потому что мертвые чаты тоже нужно чистить. И классно, что ушли не все. Согласно аналитике канала, 99.1% подписчиков было в сети в последние сутки, и просмотры на постах растут каждый день, так что я надеюсь, что вы не просто забыли о существовании этого канала.

Будет ли что-то дальше? Конечно будет. Не совсем понимаю когда и как, но я часто думаю о том, в каком формате мне было бы удобно продолжить писать. Есть несколько идей, я постараюсь разобраться в них как можно быстрее. Мне нравится писать. Ты можешь написать мне какой контент для тебя актуален в личку или сделай это анонимно через гугл формы. Если у тебя есть подобные мысли, то мне было бы очень интересно их почитать или послушать.

Забавно, что постов после перерывов было так много, что можно вводить отдельный хэштег.

​​Что со мной произошло вообще

Под хэштегом #blog хочу рассказать что со мной произошло за эти 158 дней с момента последнего поста.

Я не терял время просто так, не пропил его, не потратил на 100 уровней в какой-то игре, а, как мне кажется, потратил его с пользой для себя.

— Работа, конечно же
Я устроился как Junior Software Engineer в NetCracker на стеке React, TypeScript, Redux, работаю я уже 5 месяцев. За это время мой кругозор и скилл, как мне кажется, увеличились кратно. Забавно, что в эту компанию не берут джунов с рынка без внутренних курсов. Для меня сделали исключение, это приятно.

— Пет-проекты
Я много работал помимо основной работы. Моё кладбище заброшенных проектов больше, чем у гугла, кстати. Но хотя бы один проект я довел до какого-то логического конца, им я поделюсь чуть позже, ведь туда можно даже контрибьютить. Раньше я думал, что без пет-проектов учиться просто нереально сложно. Сейчас я понимаю, что это не сложно, это просто невозможно. Если вы до сих пор сидите в ловушке гайдов на ютубе, то лучшее, что вы можете сделать — закрыть гайд и создать новый репозиторий на GitHub.

— Курсы The Rolling Scopes Community
Начались вчера. Курсы, по сути, от EPAM, хоть им и очень хочется отвязаться от имени компании. Пока что для уровня Junior, а позже перезачислюсь на уровень Middle. В этом я, кажется, уже уверен. Курсы для меня сейчас — просто способ пробежаться по основам, обменяться опытом с разработчиками ниже и выше уровня, чем я. Начались они крайне спонтанно, как, в целом, и всё лучшее в моей жизни.

— Doka
Open Source Front-End документация на русском языке. Я не пишу в канал, но накидываю заготовки туда. В целом, контрибьютить туда максимально просто, так что думаю, что в ближайшее время я появлюсь в авторах и там.

Думаю, что это основные вехи за последнее время. Есть ещё что рассказать, но это уже не так значимо.

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