en
Feedback
CodeRoll | Frontend

CodeRoll | Frontend

Open in Telegram

OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads

Show more
4 112
Subscribers
-124 hours
-177 days
-4030 days
Posts Archive
Краткий обзор фреймворка Svelte Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагат
Краткий обзор фреймворка Svelte Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript. Ссылка #статьи

Что будет на выходе?
Anonymous voting

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

console.log(config.language);

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

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

Что будет на выходе?
Anonymous voting

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!`);
}

Насколько потолстел JavaScript к 2024 году? Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи
Насколько потолстел JavaScript к 2024 году? Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов! И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли? Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить. Ссылка #js

Пояснение к предыдущему посту С необязательным оператором связывания ?. нам больше не нужно явно проверять, действительны ли более глубокие вложенные значения или нет. Если мы пытаемся получить доступ к свойству со (нулевым) значением 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.

Что будет на выходе?
Anonymous voting

const person = {
  firstName: 'Lydia',
  lastName: 'Hallie',
  pet: {
    name: 'Mara',
    breed: 'Dutch Tulip Hound'
  },
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());

Как я пытался писать функциональные компоненты без хуков на react Хуки позволили нам перейти с классового компонента на функц
Как я пытался писать функциональные компоненты без хуков на react Хуки позволили нам перейти с классового компонента на функциональный. Они решили проблему хранения состояния между перерисовками функционального компонента и отчасти упростив написание логики. Почему же я предлагаю отказаться от них? Ссылка #react

Какой из следующих наборов параметров вернет 6?
Anonymous voting

function sumValues(x, y, z) {
  return x + y + z;
}

Динамические Breadcrumbs на React, React Router и Apollo GraphQL Хлебные крошки - важнейшая часть навигации приложения. В кла
Динамические Breadcrumbs на React, React Router и Apollo GraphQL Хлебные крошки - важнейшая часть навигации приложения. В классическом исполнении они отражают текущее положение пользователя в иерархии. А отображение названия карточки товара, статьи или любой другой сущности - это уже, как правило, задача компонента отвечающего за отображение самой сущности. Однако, все может оказаться не так просто. По каким-либо причинам дизайнер, заказчик или другая неведомая сила будет категорично настаивать, чтобы название отображалось именно в хлебных крошках. Ссылка #статьи

Пояснение к предыдущему посту Обычно, когда мы устанавливаем объекты равными null, эти объекты получают статус собрано в мусор, так как больше нет ссылок на этот объект. Однако, поскольку функция обратного вызова внутри setInterval является стрелочной функцией (таким образом, привязанной к объекту config), функция обратного вызова по-прежнему содержит ссылку на объект config. Пока есть ссылка, объект не будет собирать мусор. Так как это интервал, установка config в null или delete-ing config.alert не приведет к сбору мусора для интервала, поэтому интервал все равно будет вызываться. Его следует очистить с помощью clearInterval(config.alert), чтобы удалить его из памяти. Поскольку он не был очищен, функция обратного вызова setInterval будет по-прежнему вызываться каждые 1000мс (1с).

Что произойдет?
Anonymous voting

let config = {
  alert: setInterval(() => {
    console.log('Alert!')
  }, 1000)
}

config = null

Запросы, хуки и спагетти Во время разработки веб-приложений мы порой делаем запросы на сервер внутри useEffect прямо в компон
Запросы, хуки и спагетти Во время разработки веб-приложений мы порой делаем запросы на сервер внутри useEffect прямо в компоненте с визуальным составляющим. Однако не всегда очевидно, что смешивание логики с интерфейсом может привести к усложнению кодовой базы. В этой статье мы рассмотрим, как неправильное разделение ответственности может негативно сказаться на ваших компонентах, и какие подходы помогут избежать подобных проблем. Ссылка #react

Пояснение к предыдущему посту Каждая функция имеет свой собственный контекст исполнения (или область видимости). Функция getName сначала ищет в своем собственном контексте (области видимости), чтобы увидеть, содержит ли она переменную name, к которой мы пытаемся получить доступ. В этом случае функция getName содержит собственную переменную name: мы объявляем переменную name с ключевым словом let и значением 'Sarah'. Переменные с ключевым словом let (и const) поднимаются в начало функции, в отличие от var, которые не инициализируется. Они недоступны до того, как мы объявим (инициализируем) их строку. Это называется "временной мертвой зоной". Когда мы пытаемся получить доступ к переменным до их объявления, JavaScript выдает ReferenceError. Если бы мы не объявили переменную name в функции getName, движок javascript посмотрел бы вниз по цепочки области действия. Внешняя область имеет переменную с именем name со значением Lydia. В этом случае он бы записал Lydia. let name = 'Lydia' function getName() { console.log(name) } getName() // Lydia