Пояснение к предыдущему посту
С синтаксисом import * as name мы импортируем все exports из файла module.js в файл index.js, тогда и создается новый объект с именем data. В файле module.js есть два экспорта: экспорт по умолчанию и именованный экспорт. Экспорт по умолчанию - это функция, которая возвращает строку "Hello World", а именованный экспорт - это переменная с именем name, которая имеет значение строки "Lydia".
Объект data имеет свойство default для экспорта по умолчанию, другие свойства имеют имена именованных экспортов и их соответствующие значения.
Объект data имеет свойство default для экспорта по умолчанию, другие свойства имеют имена именованных экспортов и их соответствующие значения.
React + TypeScript: необходимый минимум
Преимущества изучения TS могут быть сведены к следующему:
- ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
- в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
- рефакторить код и обновлять зависимости станет гораздо проще.
Эта статья представляет собой минимальное введение по использованию TS в React.
Ссылка
#react
Преимущества изучения TS могут быть сведены к следующему:
- ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
- в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
- рефакторить код и обновлять зависимости станет гораздо проще.
Эта статья представляет собой минимальное введение по использованию TS в React.
Ссылка
#react
class Person {
constructor(name) {
this.name = name
}
}
const member = new Person('John')
console.log(typeof member)React: полное руководство по повторному рендерингу
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Ссылка
#react
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Ссылка
#react
function giveLydiaPizza() {
return 'Here is pizza!'
}
const giveLydiaChocolate = () =>
"Here's chocolate... now go hit the gym already."
console.log(giveLydiaPizza.prototype)
console.log(giveLydiaChocolate.prototype)Какой будет вывод?
Anonymous Quiz
35%
{ constructor: ...} { constructor: ...}
10%
{} { constructor: ...}
26%
{ constructor: ...} {}
29%
{ constructor: ...} undefined
Пояснение к предыдущему посту
Обычные функции, такие как функция giveLydiaPizza, имеют свойство prototype, которое является объектом (прототипом объекта) со свойством constructor. Однако функции со стрелками, такие как функция giveLydiaChocolate, не имеют этого свойства prototype. undefined возвращается при попытке доступа к свойству prototype с использованием giveLydiaChocolate.prototype.
Анализируем виды тестов для Frontend
С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .
Ссылка
#статьи
С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .
Ссылка
#статьи
const person = {
name: 'Lydia',
age: 21
}
for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}Какой будет вывод?
Anonymous Quiz
32%
name Lydia and age 21
47%
["name", "Lydia"] and ["age", 21]
9%
["name", "age"] and undefined
12%
Error
Пояснение к предыдущему посту
Object.entries (person) возвращает массив вложенных массивов, содержащий ключи и объекты:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Используя цикл for-of, мы можем перебирать каждый элемент массива, в данном случае подмассивы. Мы можем мгновенно деструктурировать подмассивы в цикле for, используя const [x, y]. x равен первому элементу в подмассиве, y равен второму элементу в подмассиве.
Первым подмассивом является [ "name", "Lydia" ], где x равно "name", и y равно "Lydia", которые выводятся в лог. Вторым подмассивом является [ "age", 21 ], где x равно "age", и y равно 21, которые выводятся в лог.
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Используя цикл for-of, мы можем перебирать каждый элемент массива, в данном случае подмассивы. Мы можем мгновенно деструктурировать подмассивы в цикле for, используя const [x, y]. x равен первому элементу в подмассиве, y равен второму элементу в подмассиве.
Первым подмассивом является [ "name", "Lydia" ], где x равно "name", и y равно "Lydia", которые выводятся в лог. Вторым подмассивом является [ "age", 21 ], где x равно "age", и y равно 21, которые выводятся в лог.
Заметка о полезных возможностях современного CSS
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")Пояснение к предыдущему посту
... args - прочие параметры. Значение прочих параметров - это массив, содержащий все оставшиеся аргументы и может быть передан только последним! В этом примере прочие параметры были вторым аргументом. Это невозможно, и это приведет к синтаксической ошибке.
Приведенный выше пример работает. Это возвращает массив [ 'banana', 'apple', 'orange', 'pear' ]
function getItems(fruitList, favoriteFruit, ...args) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")
Работаем с HTTP API: разбор частых проблем и методы их решения
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
function nums(a, b) {
if (a > b) console.log('a is bigger')
else console.log('b is bigger')
return
a + b;
}
console.log(nums(4, 2))
console.log(nums(1, 2))Какой будет вывод?
Anonymous Quiz
54%
a is bigger, 6 and b is bigger, 3
24%
a is bigger, undefined and b is bigger, undefined
9%
undefined and undefined
13%
SyntaxError
Пояснение к предыдущему посту
В JavaScript мы не должны явно указывать точку с запятой (;), однако движок JavaScript все равно добавляет их после операторов. Это называется автоматической вставкой точек с запятой. Например, оператором могут быть переменные или ключевые слова, такие как throw, return, break и т.д.
Здесь мы написали инструкцию return и другое значение a + b в новой строке. Однако, поскольку это новая линия, движок не знает, что это на самом деле значение, которое мы хотели бы вернуть. Вместо этого он автоматически добавляет точку с запятой после return. Вы можете увидеть это как:
return;
a + b
Это означает, что a + b никогда не достигается, так как функция перестает выполняться после ключевого слова return. Если значение не возвращается, как здесь, функция возвращает значение undefined. Обратите внимание, что после операторов if / else автоматической вставки нет!
В JavaScript мы не должны явно указывать точку с запятой (;), однако движок JavaScript все равно добавляет их после операторов. Это называется автоматической вставкой точек с запятой. Например, оператором могут быть переменные или ключевые слова, такие как throw, return, break и т.д.
Здесь мы написали инструкцию return и другое значение a + b в новой строке. Однако, поскольку это новая линия, движок не знает, что это на самом деле значение, которое мы хотели бы вернуть. Вместо этого он автоматически добавляет точку с запятой после return. Вы можете увидеть это как:
return;
a + b
Это означает, что a + b никогда не достигается, так как функция перестает выполняться после ключевого слова return. Если значение не возвращается, как здесь, функция возвращает значение undefined. Обратите внимание, что после операторов if / else автоматической вставки нет!
Интеграция React и AngularJS через Webpack Module Federation
Представьте себя в ситуации, когда вы вступаете в проект с задачей развивать огромное легаси приложение, созданное пять лет назад на первой версии Angular. Это приложение напоминает забытый кладезь, о функционировании которого уже никто в компании не имеет представления. В его недрах скрыта система авторизации и множество модулей, управляющих бизнес-логикой, все это сплетено в единую структуру с помощью уже не самого актуального инструмента сборки – Gulp. Как будто этого было недостаточно, зависимости приложения все еще требуют загрузки через bower, что добавляет еще один слой устаревших технологий. В этом контексте ваша задача обретает не только технический, но и почти археологический аспект – вам предстоит не просто восстановить работоспособность этой цифровой реликвии, но и обновить ее, не потеряв при этом ценности закодированных в ней знаний и опыта.
Ссылка
#статьи
Представьте себя в ситуации, когда вы вступаете в проект с задачей развивать огромное легаси приложение, созданное пять лет назад на первой версии Angular. Это приложение напоминает забытый кладезь, о функционировании которого уже никто в компании не имеет представления. В его недрах скрыта система авторизации и множество модулей, управляющих бизнес-логикой, все это сплетено в единую структуру с помощью уже не самого актуального инструмента сборки – Gulp. Как будто этого было недостаточно, зависимости приложения все еще требуют загрузки через bower, что добавляет еще один слой устаревших технологий. В этом контексте ваша задача обретает не только технический, но и почти археологический аспект – вам предстоит не просто восстановить работоспособность этой цифровой реликвии, но и обновить ее, не потеряв при этом ценности закодированных в ней знаний и опыта.
Ссылка
#статьи