Анализируем виды тестов для 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, что добавляет еще один слой устаревших технологий. В этом контексте ваша задача обретает не только технический, но и почти археологический аспект – вам предстоит не просто восстановить работоспособность этой цифровой реликвии, но и обновить ее, не потеряв при этом ценности закодированных в ней знаний и опыта.
Ссылка
#статьи
class Person {
constructor() {
this.name = 'Lydia'
}
}
Person = class AnotherPerson {
constructor() {
this.name = 'Sarah'
}
}
const member = new Person()
console.log(member.name)Какой будет вывод?
Anonymous Quiz
29%
"Lydia"
29%
"Sarah"
32%
Error: cannot redeclare Person
10%
SyntaxError
Пояснение к предыдущему посту
Мы можем установить классы равными другим классам/конструкторам функций. В этом случае мы устанавливаем Person равным AnotherPerson. Свойство name этого конструктора - Sarah, поэтому свойство name для нового экземпляра класса Person member - это Sarah.
Анимация в браузерах и как с ней работать
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Ссылка
#статьи
const info = {
[Symbol('a')]: 'b'
}
console.log(info)
console.log(Object.keys(info))Какой будет вывод?
Anonymous Quiz
33%
{Symbol('a'): 'b'} and ["{Symbol('a')"]
15%
{} and []
29%
{ a: "b" } and ["a"]
23%
{Symbol('a'): 'b'} and []
Пояснение к предыдущему посту
Symbol не является перечисляемый. Метод Object.keys возвращает все перечисляемые свойства ключа для объекта. Symbol не просматривается таким образом, и возвращается пустой массив. При регистрации всего объекта будут видны все свойства, даже не перечисляемые.
Это одно из многих качеств символа: помимо представления совершенно уникального значения (которое предотвращает случайное столкновение имен в объектах, например, при работе с 2 библиотеками, которые хотят добавить свойства к одному и тому же объекту), вы также можете "скрыть" свойства объектов таким образом (хотя и не полностью. Вы можете получить доступ к символам, используя метод Object.getOwnPropertySymbols()).
Это одно из многих качеств символа: помимо представления совершенно уникального значения (которое предотвращает случайное столкновение имен в объектах, например, при работе с 2 библиотеками, которые хотят добавить свойства к одному и тому же объекту), вы также можете "скрыть" свойства объектов таким образом (хотя и не полностью. Вы можете получить доступ к символам, используя метод Object.getOwnPropertySymbols()).
Не стоит недооценивать HTML
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Ссылка
#html