Что будет на выходе?
Anonymous Quiz
39%
We have to buy bananas!
47%
We don't have to buy bananas
9%
undefined
5%
1
Пояснение к предыдущему посту
Мы передали условие groceries.indexOf("banana") в оператор if. groceries.indexOf("banana") возвращает 0, что является ложным значением. Поскольку условие в операторе if ложно, выполняется код в блоке else, и в лог выводится We don't have to buy bananas!.
👍14
Костыли из 90-х и принцип HTML First
На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
В разных областях информатики применим принцип минимальных привилегий. Среди прочего он означает, что для решения любой задачи следует выбирать самый простой подходящий инструмент. Другими словами, не нужно усложнять решение без необходимости. А самый лучший код — это его отсутствие.
В применении на веб-разработку это означает, что если нам для задачи достаточно базового HTML, то не нужно усложнять решение.
Ссылка
#html
На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
В разных областях информатики применим принцип минимальных привилегий. Среди прочего он означает, что для решения любой задачи следует выбирать самый простой подходящий инструмент. Другими словами, не нужно усложнять решение без необходимости. А самый лучший код — это его отсутствие.
В применении на веб-разработку это означает, что если нам для задачи достаточно базового HTML, то не нужно усложнять решение.
Ссылка
#html
👍11🔥2🤝1
const config = {
languages: [],
set language(lang) {
return this.languages.push(lang);
}
};
console.log(config.language);🤯6
Что будет на выходе?
Anonymous Quiz
33%
function language(lang) { this.languages.push(lang }
7%
0
30%
[]
30%
undefined
❤8
Краткий обзор фреймворка Svelte
Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.
Ссылка
#статьи
Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.
Ссылка
#статьи
👍8🔥1🤔1
const name = 'Lydia Hallie';
console.log(!typeof name === 'object');
console.log(!typeof name === 'string');
❤6👍3
Пояснение к предыдущему посту
typeof name возвращает "строку". Строка "string" является истинным значением, поэтому !typeof name возвращает логическое значение false. false === "object" и false === "string" оба возвращают false.
(Если бы мы хотели проверить, был ли тип (не)равен определенному типу, мы должны были написать !== вместо !typeof)
(Если бы мы хотели проверить, был ли тип (не)равен определенному типу, мы должны были написать !== вместо !typeof)
❤8🥴7👍2
Вам нравится читать контент на этом канале?
Возможно, вы задумывались о том, чтобы купить на нем интеграцию?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/c/coderoll
2) Пополняйтесь удобным способом
3) Размещайте публикацию
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
Возможно, вы задумывались о том, чтобы купить на нем интеграцию?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/c/coderoll
2) Пополняйтесь удобным способом
3) Размещайте публикацию
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
🔥6
const add = x => y => z => {
console.log(x, y, z);
return x + y + z;
};
add(4)(5)(6);🤯7👍5
Что будет на выходе?
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.
👍10🔥2❤1
Обрезать нельзя сжать. Как ускорить метрики проекта без больших вложений
Мы не раз читали на Хабре, почему важно иметь быстрые сайты, как это влияет на посещаемость, время на странице, глубину и прочее. Но каждый раз это инструкции о том, как поменять инфраструктуру серверов, потратить десятки часов на разработку и ощутимое количество денег. В случае больших корпораций, конечно же, такие действия оправданы. А маленькие стартапы обычно таким и вовсе не занимаются, фокусируясь на других задачах.
Ссылка
#статьи
Мы не раз читали на Хабре, почему важно иметь быстрые сайты, как это влияет на посещаемость, время на странице, глубину и прочее. Но каждый раз это инструкции о том, как поменять инфраструктуру серверов, потратить десятки часов на разработку и ощутимое количество денег. В случае больших корпораций, конечно же, такие действия оправданы. А маленькие стартапы обычно таким и вовсе не занимаются, фокусируясь на других задачах.
Ссылка
#статьи
👍6👏1🎉1
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);
}
})();👍5🤯4
Пояснение к предыдущему посту
Функция генератора range возвращает асинхронный объект с обещаниями для каждого элемента в диапазоне, который мы передаем: Promise {1}, Promise {2}, Promise {3}. Мы устанавливаем переменную gen равной асинхронному объекту, после чего зацикливаем ее, используя цикл for await ... of. Мы устанавливаем переменную item равной возвращаемым значениям Promise: сначала Promise {1}, затем Promise {2}, затем Promise {3}. Так как мы ожидаем значение item, разрешается обещание, возвращаются разрешенные значения обещания: 1, 2, затем 3.
👍7👨💻2👏1
Авторизация и управление доступом на основе ролей для фронтенда
В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.
Ссылка
#статьи
В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.
Ссылка
#статьи
👍7❤2🔥1
const myFunc = ({ x, y, z }) => {
console.log(x, y, z);
};
myFunc(1, 2, 3);
🤯7
Что будет на выходе?
Anonymous Quiz
28%
1 2 3
14%
{1: 1} {2: 2} {3: 3}
12%
{ 1: undefined } undefined undefined
45%
undefined undefined undefined
Пояснение к предыдущему посту
myFunc ожидает объект со свойствами x, y и z в качестве аргумента. Поскольку мы передаем только три отдельных числовых значения (1, 2, 3) вместо одного объекта со свойствами x, y и z ({x: 1, y: 2, z: 3}), то x, y и z имеют значение по умолчанию undefined.
🔥13