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

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

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

И прогрессивный рендеринг — это не одна технология, а их комплекс. Чаще всего на собеседовании от вас ждут такие способы, как ленивая загрузка, разбиение приложения на мелкие файлы или 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 документация на русском языке. Я не пишу в канал, но накидываю заготовки туда. В целом, контрибьютить туда максимально просто, так что думаю, что в ближайшее время я появлюсь в авторах и там.

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

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

Искренне о важном​

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

На данный момент у меня готово некоторое количество постов наперед и я планирую запускать канал снова. Сделать всё чуть более серьезно и методично. Зарекаться о постоянном выходе постов тут не в моих силах, хотя очень хотелось бы, но я просто не хочу давать несдерживаемых обещаний. Даже не для читателя скорее, а для себя. Я уверен, что больше половины актуальных подписчиков откроют канал и в ту же секунду закроют его, а некоторые и отпишутся после напоминания о его существовании, но меня это не особо волнует.

С момента выхода последнего поста, я чуть ли не каждый день думал о канале и об утерянных возможностях, связанных с ним. Но, в своё оправдание скажу, что я просто выгорел. Мне не хватило мотивации продолжать, потому что в какой-то момент моя жизнь превратилась в 16-ти часовую работу семь дней в неделю и я был готов жертвовать чем угодно. Мне оказалось слишком тяжело совмещать постоянную работу, образование, пет-проекты, менторинг, учёбу в ВУЗе и кучу других активностей, поэтому канал попал под горячую руку с целью сохранить всё остальное. Так расставились приоритеты.

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

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

И всё же, я не зря терял время. У меня появился новый опыт и куча новых знаний. Контента накопилось столько, что уже сейчас заготовленных постов должно хватить как минимум на 2 месяца. Подход к каналу я кардинально изменил и оптимизировал настолько, насколько сейчас способен. Даже удалось делегировать какие-то активности и теперь над этим каналом буду стараться не я один, чему я несказанно рад. На конечном контенте это не должно сказаться, зато времени от написания поста до его публикации должно проходить гораздо меньше.

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

#blog

Что такое полифилы и зачем они нужны

Одна из главных проблем web-разработки — скорость поддержки инструментов. И речь не об обновлении фреймворков или библиотек, а об обновлении браузеров.

Достаточно долгое время многим разработчикам в кошмарах снился прекрасный и ужасный Internet Explorer, что в последнее время, к слову, закончилось (зато теперь у нас есть Safari).

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

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

Так ли всё ужасно? Не совсем.

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

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

Пример полифила для метода some:

if (!Array.prototype.some) {
  Array.prototype.some = function(callback) {
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i, this)) {
        return true;
      }
    }
    return false;
  };
}

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

Автоматически полифилы можно добавить в свой код при использовании разных инструментов сборки, например Babel.

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

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

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

#web #theory #javascript