Почему PASETO лучше для аутентификации, чем JWT
В веб-разработке одним из наиболее популярных решений является аутентификация на основе токенов. Чаще всего для создания системы аутентификации используют JWT (порой даже там, где это не нужно). Но несмотря на популярность, JWT имеет ряд недостатков. Поэтому появляются новые решения для аутентификации на основе токенов. В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.
Ссылка
#статьи
В веб-разработке одним из наиболее популярных решений является аутентификация на основе токенов. Чаще всего для создания системы аутентификации используют JWT (порой даже там, где это не нужно). Но несмотря на популярность, JWT имеет ряд недостатков. Поэтому появляются новые решения для аутентификации на основе токенов. В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.
Ссылка
#статьи
👍8❤1
const { firstName: myName } = { firstName: 'Lydia' };
console.log(firstName);👍6
Пояснение к предыдущему посту
Используя деструктурирующее присваивание, мы можем распаковывать значения из массивов или свойства из объектов в отдельные переменные:
Также свойство можно распаковать из объекта и присвоить переменной с именем, отличным от имени свойства объекта:
В этом случае firstName не существует как переменная, поэтому попытка доступа к ее значению вызовет ReferenceError.
Примечание. Помните о свойствах глобальной области видимости:
Всякий раз, когда Javascript не может найти переменную в текущей области видимости, то поднимается вверх по цепочке областей видимости и ищет ее на каждом уровне, и если достигает области верхнего уровня, также известной как Глобальная область, и все еще не находит нужной ссылки, то выдает ReferenceError.
В браузерах, таких как Chrome, name является устаревшим свойством глобальной области. В этом примере код выполняется внутри глобальной области и нет определяемой пользователем локальной переменной name, поэтому интерпретатор ищет предопределенные переменные/свойства в глобальной области видимости, что в случае браузеров происходит через объект window и возвращается значение window.name, которое равно пустой строке.
В NodeJS такого свойства в "глобальном" объекте нет, поэтому попытка доступа к несуществующей переменной вызовет ReferenceError.
Используя деструктурирующее присваивание, мы можем распаковывать значения из массивов или свойства из объектов в отдельные переменные:
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.
🔥8👎3👍2❤1
Вам не нужен для этого JavaScript
Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…
Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.
Ссылка
#статьи
Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…
Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.
Ссылка
#статьи
❤8👍3👎3
Server-side rendering и практики работы с запросами
Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик, ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на web-performance и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.
Ссылка
#статьи
Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик, ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на web-performance и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.
Ссылка
#статьи
👍7🤡2
Оффлайновое использование Git
Некоторые компании, защищая свои системы от несанкционированного доступа, используют изолированные компьютерные сети, или полностью обходятся без сетей. Работа в таких системах может быть сопряжена со сложностями, но нельзя сказать, что в них невозможно разрабатывать программные проекты. А особую важность в подобных ситуациях имеет подбор подходящего инструмента для контроля версий наподобие Git.
Ссылка
#статьи
Некоторые компании, защищая свои системы от несанкционированного доступа, используют изолированные компьютерные сети, или полностью обходятся без сетей. Работа в таких системах может быть сопряжена со сложностями, но нельзя сказать, что в них невозможно разрабатывать программные проекты. А особую важность в подобных ситуациях имеет подбор подходящего инструмента для контроля версий наподобие Git.
Ссылка
#статьи
👍6
Введение в View Transitions API
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Ссылка
#статьи
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Ссылка
#статьи
👍7
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));👍6
Пояснение к посту выше
Функция 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' регистрируется.
Если мы снова вызываем функцию 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' регистрируется.
🔥10👎2
11 полезных фичей Chrome DevTools
Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.
Возможно вы уже видели эти фичи и используете их на постоянной основе, а возможно это именно те фичи, которых вам так давно не хватало в вашей работе.
Ссылка
#статьи
Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.
Возможно вы уже видели эти фичи и используете их на постоянной основе, а возможно это именно те фичи, которых вам так давно не хватало в вашей работе.
Ссылка
#статьи
👍4🔥3
CodeRoll | Frontend pinned «Вопросы с собеседования: Promise.all Очень часто на собеседованиях любят давать заданию что бы собеседуемый написал свою реализацию Promise.all, эту задачу я встречал во многих крупных компаниях. И хотелось бы поделиться с вами решением этой задачи с подробным…»
Когда «as never» — единственное, что работает
Эта статья — перевод оригинальной статьи "When 'as never' Is The Only Thing That Works".
as never, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Ссылка
#статьи
Эта статья — перевод оригинальной статьи "When 'as never' Is The Only Thing That Works".
as never, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Ссылка
#статьи
👍7🤡1
var status = '😎'
setTimeout(() => {
const status = '😍'
const data = {
status: '🥑',
getStatus() {
return this.status
}
}
console.log(data.getStatus())
console.log(data.getStatus.call(this))
}, 0)
🤯8👍1
👍8
Пояснение к предыдущему посту
Значение ключевого слова this зависит от того, где вы его используете. В методе, как и в методе getStatus, ключевое слово this ссылается на объект, которому принадлежит метод. Метод принадлежит объекту data, поэтому this относится к объекту data. Когда мы регистрируем this.status, регистрируется свойство status объекта data, которое является "🥑".
С помощью метода call мы можем изменить объект, на который ссылается ключевое слово this. В функциях ключевое слово this относится к объекту, которому принадлежит функция. Мы объявили функцию setTimeout для объекта global, поэтому в функции setTimeout ключевое слово this ссылается на объект global. В глобальном объекте есть переменная с именем status со значением "😎". При регистрации this.status выводится "😎".
С помощью метода call мы можем изменить объект, на который ссылается ключевое слово this. В функциях ключевое слово this относится к объекту, которому принадлежит функция. Мы объявили функцию setTimeout для объекта global, поэтому в функции setTimeout ключевое слово this ссылается на объект global. В глобальном объекте есть переменная с именем status со значением "😎". При регистрации this.status выводится "😎".
👏13
Искусство типизации: TypeScript Utility Types
Что вы чувствуете от познания нового? За себя скажу, что в такие моменты просветления меня переполняет неподдельная детская радость от свершившегося открытия. Жаль, что этих моментов становится всё меньше. К чему я это? Когда мне в голову мне пришла мысль о написании статьи на эту тему, я сразу вспомнил то ощущение прозрения, которое испытал в момент открытия Utility Types. Всё сразу встало на свои места, и я понял какого кусочка пазла мне всё это время не хватало. Именно о нём я расскажу далее.
TypeScript Utility Types - это набор встроенных типов, которые можно использовать для манипулирования типами данных в коде. Рассмотрим их подробнее.
Ссылка
#js
Что вы чувствуете от познания нового? За себя скажу, что в такие моменты просветления меня переполняет неподдельная детская радость от свершившегося открытия. Жаль, что этих моментов становится всё меньше. К чему я это? Когда мне в голову мне пришла мысль о написании статьи на эту тему, я сразу вспомнил то ощущение прозрения, которое испытал в момент открытия Utility Types. Всё сразу встало на свои места, и я понял какого кусочка пазла мне всё это время не хватало. Именно о нём я расскажу далее.
TypeScript Utility Types - это набор встроенных типов, которые можно использовать для манипулирования типами данных в коде. Рассмотрим их подробнее.
Ссылка
#js
👍5👎1
End-to-end тестирование React приложения с помощью Playwright
End-to-end (e2e) тестирование — это способ убедиться, что каждый шаг, который пользователь делает, и все изменения данных проходят без проблем. Оно не заменяет другие виды тестирования, а, наоборот, дополняет их, обеспечивая комплексную проверку функциональности, производительности и стабильности всего приложения.
В нашем проекте изначально использовались только юнит тесты и то, не в активном режиме и необязательные. QA тестировщика тоже не было, а потребность в тестировании всего приложения была и хотелось автоматизировать важные базовые флоу для регрессионного тестирования.
Ссылка
#статьи
End-to-end (e2e) тестирование — это способ убедиться, что каждый шаг, который пользователь делает, и все изменения данных проходят без проблем. Оно не заменяет другие виды тестирования, а, наоборот, дополняет их, обеспечивая комплексную проверку функциональности, производительности и стабильности всего приложения.
В нашем проекте изначально использовались только юнит тесты и то, не в активном режиме и необязательные. QA тестировщика тоже не было, а потребность в тестировании всего приложения была и хотелось автоматизировать важные базовые флоу для регрессионного тестирования.
Ссылка
#статьи
👍4❤2🔥1