CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Пояснение к предыдущему посту

С необязательным оператором связывания ?. нам больше не нужно явно проверять, действительны ли более глубокие вложенные значения или нет. Если мы пытаемся получить доступ к свойству со (нулевым) значением undefined или null, выражение замыкается и возвращает undefined.

person.pet?.name: person имеет свойство с именем pet: person.pet не нулевое. Оно имеет свойство с именем name, и возвращает Mara. person.pet?.family?.name: person имеет свойство с именем pet: person.pet не нулевое. pet не имеет свойство с именем family, person.pet.family нулевое. Выражение возвращает undefined. person.getFullName?.(): person имеет свойство с именем getFullName: person.getFullName() не нулевое, и может быть вызвано, возвращает Lydia Hallie. member.getLastName?.(): member не определено: member.getLastName() нулевое. Выражение возвращает undefined.
Насколько потолстел JavaScript к 2024 году?

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

И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?

Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить.

Ссылка

#js
const groceries = ['banana', 'apple', 'peanuts'];

if (groceries.indexOf('banana')) {
console.log('We have to buy bananas!');
} else {
console.log(`We don't have to buy bananas!`);
}
Пояснение к предыдущему посту

Мы передали условие groceries.indexOf("banana") в оператор if. groceries.indexOf("banana") возвращает 0, что является ложным значением. Поскольку условие в операторе if ложно, выполняется код в блоке else, и в лог выводится We don't have to buy bananas!.
Костыли из 90-х и принцип HTML First

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

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

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

Ссылка

#html
const config = {
languages: [],
set language(lang) {
return this.languages.push(lang);
}
};

console.log(config.language);
Краткий обзор фреймворка Svelte

Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.

Ссылка

#статьи
const name = 'Lydia Hallie';

console.log(!typeof name === 'object');
console.log(!typeof name === 'string');
Что будет на выходе?
Anonymous Quiz
25%
false true
38%
true false
26%
false false
11%
true true
Пояснение к предыдущему посту

typeof name возвращает "строку". Строка "string" является истинным значением, поэтому !typeof name возвращает логическое значение false. false === "object" и false === "string" оба возвращают false.

(Если бы мы хотели проверить, был ли тип (не)равен определенному типу, мы должны были написать !== вместо !typeof)
Вам нравится читать контент на этом канале?

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

Следуйте 3 простым шагам, чтобы сделать это:

1) Регистрируйтесь по ссылке: https://telega.in/c/coderoll
2) Пополняйтесь удобным способом
3) Размещайте публикацию

Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
const add = x => y => z => {
console.log(x, y, z);
return x + y + z;
};

add(4)(5)(6);
Что будет на выходе?
Anonymous Quiz
56%
4 5 6
8%
6 5 4
16%
4 function function
21%
undefined undefined 6
Пояснение к предыдущему посту

Функция add возвращает стрелочную функцию, которая возвращает стрелочную функцию, которая возвращает стрелочную функцию (все еще тут?). Первая функция получает аргумент x со значением 4. Мы вызываем вторую функцию, которая получает аргумент y со значением 5. Затем мы вызываем третью функцию, которая получает аргумент z со значением 6. Когда мы пытаемся получить доступ к значениям x, y и z в функции последней стрелки, движок JS поднимается вверх по цепочке областей видимости, чтобы найти значения для x и y соответственно. Это возвращает 4 5 6.
Обрезать нельзя сжать. Как ускорить метрики проекта без больших вложений

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

Ссылка

#статьи
async function* range(start, end) {
for (let i = start; i <= end; i++) {
yield Promise.resolve(i);
}
}

(async () => {
const gen = range(1, 3);
for await (const item of gen) {
console.log(item);
}
})();
Пояснение к предыдущему посту

Функция генератора range возвращает асинхронный объект с обещаниями для каждого элемента в диапазоне, который мы передаем: Promise {1}, Promise {2}, Promise {3}. Мы устанавливаем переменную gen равной асинхронному объекту, после чего зацикливаем ее, используя цикл for await ... of. Мы устанавливаем переменную item равной возвращаемым значениям Promise: сначала Promise {1}, затем Promise {2}, затем Promise {3}. Так как мы ожидаем значение item, разрешается обещание, возвращаются разрешенные значения обещания: 1, 2, затем 3.
Авторизация и управление доступом на основе ролей для фронтенда

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.

Ссылка

#статьи