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 more4 111
Subscribers
-224 hours
-137 days
-3930 days
Posts Archive
4 110
Пояснение к предыдущему посту
Мы устанавливаем переменную city равной значению свойства с именем city для объекта person. У этого объекта нет свойства с именем city, поэтому переменная city имеет значение undefined.
Обратите внимание, что мы не ссылаемся на сам объект person! Мы просто устанавливаем переменную city равной текущему значению свойства city объекта person.
Затем мы устанавливаем city равным строке "Amsterdam". Это не меняет объект person - нет ссылки на этот объект.
При регистрации объекта person возвращается неизмененный объект.
4 110
const person = {
name: 'Lydia',
age: 21
}
let city = person.city
city = 'Amsterdam'
console.log(person)4 110
End-to-end тестирование React приложения с помощью Playwright
End-to-end (e2e) тестирование — это способ убедиться, что каждый шаг, который пользователь делает, и все изменения данных проходят без проблем. Оно не заменяет другие виды тестирования, а, наоборот, дополняет их, обеспечивая комплексную проверку функциональности, производительности и стабильности всего приложения.
В нашем проекте изначально использовались только юнит тесты и то, не в активном режиме и необязательные. QA тестировщика тоже не было, а потребность в тестировании всего приложения была и хотелось автоматизировать важные базовые флоу для регрессионного тестирования.
Ссылка
#статьи
4 110
Искусство типизации: TypeScript Utility Types
Что вы чувствуете от познания нового? За себя скажу, что в такие моменты просветления меня переполняет неподдельная детская радость от свершившегося открытия. Жаль, что этих моментов становится всё меньше. К чему я это? Когда мне в голову мне пришла мысль о написании статьи на эту тему, я сразу вспомнил то ощущение прозрения, которое испытал в момент открытия Utility Types. Всё сразу встало на свои места, и я понял какого кусочка пазла мне всё это время не хватало. Именно о нём я расскажу далее.
TypeScript Utility Types - это набор встроенных типов, которые можно использовать для манипулирования типами данных в коде. Рассмотрим их подробнее.
Ссылка
#js
4 110
Пояснение к предыдущему посту
Значение ключевого слова this зависит от того, где вы его используете. В методе, как и в методе getStatus, ключевое слово this ссылается на объект, которому принадлежит метод. Метод принадлежит объекту data, поэтому this относится к объекту data. Когда мы регистрируем this.status, регистрируется свойство status объекта data, которое является "🥑".
С помощью метода call мы можем изменить объект, на который ссылается ключевое слово this. В функциях ключевое слово this относится к объекту, которому принадлежит функция. Мы объявили функцию setTimeout для объекта global, поэтому в функции setTimeout ключевое слово this ссылается на объект global. В глобальном объекте есть переменная с именем status со значением "😎". При регистрации this.status выводится "😎".
4 110
var status = '😎'
setTimeout(() => {
const status = '😍'
const data = {
status: '🥑',
getStatus() {
return this.status
}
}
console.log(data.getStatus())
console.log(data.getStatus.call(this))
}, 0)4 110
Международный учебный центр беспилотной авиации
Как получить профессию в самой быстроразвивающейся отрасли?
Специальности: Оператор бпла, Специалист по борьбе с бпла, Аналитик данных, Инструктор по подготовке операторов.
Узнать на сайте оператор-бпла.рф
Узнать больше
#реклама
оператор-бпла.рф
О рекламодателе
4 110
Когда «as never» — единственное, что работает
Эта статья — перевод оригинальной статьи "When 'as never' Is The Only Thing That Works".
as never, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Ссылка
#статьи
4 110
Мастер-класс по выбору идеального сервера в офис.
Привет, вы знаете, зачем нужен сервер в офисе? А как он работает, где его лучше разместить, и что нужно докупить для стабильной работы?
Так и думал — прыгайте в статью "Как выбрать сервер для офиса", там я подробно рассказываю, как подобрать железо, какого производителя выбрать, нюансы и подборки для офисов от 5 до 50 человек.
Статья рассчитана на людей без опыта в IT-оборудовании, но и бывалым админам будет что вспомнить. Если понадобится консультация технического специалиста, то пишите в чат на сайте или звоните по телефону 8 800 755-25-51 — ответим на любые вопросы.
Приятного чтения, друзья :)
Перейти на сайт
#реклама
servermall.ru
О рекламодателе
4 110
11 полезных фичей Chrome DevTools
Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.
Возможно вы уже видели эти фичи и используете их на постоянной основе, а возможно это именно те фичи, которых вам так давно не хватало в вашей работе.
Ссылка
#статьи
4 110
Пояснение к посту выше
Функция add является функцией запоминателем. С помощью запоминания мы можем кэшировать результаты функции, чтобы ускорить ее выполнение. В этом случае мы создаем объект cache, в котором хранятся ранее возвращенные значения.
Если мы снова вызываем функцию addFunction с тем же аргументом, она сначала проверяет, получило ли оно уже это значение в своем кеше. В этом случае будет возвращено значение кэша, что экономит время выполнения. Иначе, если он не кэшируется, он вычислит значение и сохранит его после.
Мы вызываем функцию addFunction три раза с одним и тем же значением: при первом вызове значение функции, когда num равно 10, еще не кэшировано. Условие оператора if num in cache возвращает false, и выполняется блок else: Calculated! 20 регистрируется, и значение результата добавляется в объект кеша. cache теперь выглядит как {10: 20}.
Во второй раз объект cache содержит значение, возвращаемое для 10. Условие оператора if num in cache возвращает true, а 'From cache! 20' выводится в лог.
В третий раз мы передаем 5 * 2 в функцию, которая оценивается как 10. Объект cache содержит значение, возвращаемое для 10. Условие оператора if num in cache возвращает true, а 'From cache! 20' регистрируется.
4 110
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 110
Введение в View Transitions API
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Ссылка
#статьи
4 110
Ответьте на 1 вопрос и книги ваши на 30 дней за 0 рублей
Более 200 000 книг и аудиокниг разных жанров в Букмейте. Попробуйте бесплатно!
Попробовать
#реклама 16+
bookmate.ru
О рекламодателе
4 110
Оффлайновое использование Git
Некоторые компании, защищая свои системы от несанкционированного доступа, используют изолированные компьютерные сети, или полностью обходятся без сетей. Работа в таких системах может быть сопряжена со сложностями, но нельзя сказать, что в них невозможно разрабатывать программные проекты. А особую важность в подобных ситуациях имеет подбор подходящего инструмента для контроля версий наподобие Git.
Ссылка
#статьи
