CodeRoll | Frontend
Відкрити в Telegram
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
Показати більше4 235
Підписники
+124 години
-57 днів
-4930 день
Архів дописів
4 235
const add = () => {
const cache = {};
return num => {
if (num in cache) {
return `From cache! ${cache[num]}`;
} else {
const result = num + 10;
cache[num] = result;
return `Calculated! ${result}`;
}
};
};
const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));4 235
Введение в View Transitions API
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Ссылка
#статьи
4 235
Ответьте на 1 вопрос и книги ваши на 30 дней за 0 рублей
Более 200 000 книг и аудиокниг разных жанров в Букмейте. Попробуйте бесплатно!
Попробовать
#реклама 16+
bookmate.ru
О рекламодателе
4 235
Оффлайновое использование Git
Некоторые компании, защищая свои системы от несанкционированного доступа, используют изолированные компьютерные сети, или полностью обходятся без сетей. Работа в таких системах может быть сопряжена со сложностями, но нельзя сказать, что в них невозможно разрабатывать программные проекты. А особую важность в подобных ситуациях имеет подбор подходящего инструмента для контроля версий наподобие Git.
Ссылка
#статьи
4 235
Server-side rendering и практики работы с запросами
Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик, ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на web-performance и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.
Ссылка
#статьи
4 235
Вам не нужен для этого JavaScript
Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…
Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.
Ссылка
#статьи
4 235
Пояснение к предыдущему посту
Используя деструктурирующее присваивание, мы можем распаковывать значения из массивов или свойства из объектов в отдельные переменные:
const { firstName } = { firstName: 'Lydia' };
// Версия ES5:
// var firstName = { firstName: 'Lydia' }.firstName;
console.log(firstName); // "Lydia"
Также свойство можно распаковать из объекта и присвоить переменной с именем, отличным от имени свойства объекта:
const { firstName: myName } = { firstName: 'Lydia' };
// Версия ES5:
// var myName = { firstName: 'Lydia' }.firstName;
console.log(myName); // "Lydia"
console.log(firstName); // Тут будет ошибка Uncaught ReferenceError: firstName is not defined
В этом случае firstName не существует как переменная, поэтому попытка доступа к ее значению вызовет ReferenceError.
Примечание. Помните о свойствах глобальной области видимости:
const { name: myName } = { name: 'Lydia' };
console.log(myName); // "lydia"
console.log(name); // "" ----- Браузер, например, Chrome
console.log(name); // ReferenceError: name is not defined ----- NodeJS
Всякий раз, когда Javascript не может найти переменную в текущей области видимости, то поднимается вверх по цепочке областей видимости и ищет ее на каждом уровне, и если достигает области верхнего уровня, также известной как Глобальная область, и все еще не находит нужной ссылки, то выдает ReferenceError.
В браузерах, таких как Chrome, name является устаревшим свойством глобальной области. В этом примере код выполняется внутри глобальной области и нет определяемой пользователем локальной переменной name, поэтому интерпретатор ищет предопределенные переменные/свойства в глобальной области видимости, что в случае браузеров происходит через объект window и возвращается значение window.name, которое равно пустой строке.
В NodeJS такого свойства в "глобальном" объекте нет, поэтому попытка доступа к несуществующей переменной вызовет ReferenceError.4 235
const { firstName: myName } = { firstName: 'Lydia' };
console.log(firstName);4 235
Обучаем Java-разработчиков оплата после выхода на работу
В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты.
Если задуматься, то все в выигрыше
—Ты получаешь работу с хорошей зарплатой, мы получаем процент за инвестиции в тебя и продолжаем прокачивать твои навыки еще 2 года;
— в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше;
— мы развиваем твои навыки и после курсов: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут;
— мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов.
Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку!
Узнать больше
#реклама
kata.academy
О рекламодателе
4 235
Почему PASETO лучше для аутентификации, чем JWT
В веб-разработке одним из наиболее популярных решений является аутентификация на основе токенов. Чаще всего для создания системы аутентификации используют JWT (порой даже там, где это не нужно). Но несмотря на популярность, JWT имеет ряд недостатков. Поэтому появляются новые решения для аутентификации на основе токенов. В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.
Ссылка
#статьи
4 235
Пояснение к ответу
Object.freeze делает невозможным добавление, удаление или изменение свойств объекта (если только значение свойства не является другим объектом).
Когда мы создаем переменную shape и устанавливаем ее равной замороженному объекту box, shape также ссылается на замороженный объект. Вы можете проверить, заморожен ли объект, используя Object.isFrozen. В этом случае Object.isFrozen(shape) возвращает true, поскольку переменная shape имеет ссылку на замороженный объект.
Поскольку shape заморожен, и поскольку значение x не является объектом, мы не можем изменить свойство x. x по-прежнему равно 10, и {x: 10, y: 20} регистрируется.
4 235
const box = { x: 10, y: 20 };
Object.freeze(box);
const shape = box;
shape.x = 100;
console.log(shape);4 235
Дизайн в FIGMA с нуля. Бесплатный курс + портфолио
Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool.online
О рекламодателе
4 235
Depot — брендинговое агентство №1 в России
На счету креативного агентства Depot — более пяти тысяч успешных кейсов, награды большинства международных премий и первое место российского рейтинга креативности в категории «Брендинг». В нашем арсенале — команда топовых специалистов и глобальная поддержка международного брендингового альянса GLBA и европейской ассоциации дизайна упаковки EPDA. Мы гордимся, что вот уже 25 лет развиваем индустрию брендинга в Москве, России и за ее пределами.
Узнать больше
#реклама
depotwpf.ru
О рекламодателе
4 235
Browsing Context, WindowProxy, Window
Каждый Frontend-разработчик знает, что такое объект Window. С самими объектом, вроде бы, все понятно. Но при детальном рассмотрении оказывается, что браузер никогда не отдает этот важнейший глобальный объект напрямую. В этой статье я предлагаю разобраться в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.
Ссылка
#статьи
4 235
История HTML. Часть 1. Гипертекст и гипермедиа
Появления языка HTML, обычно датируют концом 80-х — началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие «гипертекст» и «гипермедиа»? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.
Ссылка
#html
Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
