Полное руководство по управлению JWT во фронтенд-клиентах

Знакомимся с JWT и отвечаем на самые острые вопросы, включая его преимущества перед токенами сессии, противодействие атакам CSRF и XSS, а также продолжительное сохранение сессий при выходе пользователя.

https://nuancesprog.ru/p/8460

@nuancesprog #статьи #GraphQL

#CSS #tips

CSS свойство white-space

Оно говорит браузеру, как работать с множественными пробелами и переносами строк.

Пример:
<p>I have multiple spaces
and a line break</p>

white-space: normal
Строки будут переноситься, если в строке не будет хватать места

white-space: nowrap
Повторяющиеся пробелы игнорируются, переводы строк не используются.

white-space: pre
Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.

white-space: pre-line
Повторяющиеся пробелы игнорируются, переводы строк обрабатываются.

white-space: pre-wrap
Обрабатываются повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.

#CSS #tips

CSS-анимация: основные концепты и многое другое

https://dev.to/petrepan_/css-animation-the-basic-concept-and-more-2aki

#js #tips

Коллекции JavaScript – Set, Map, WeakMap и WeakSet

Обычные массивы уже всем надоели - давайте посмотрим на свежее пополнение в JavaScript: сеты, мапы и их "слабые" версии.

Читать: https://prglb.ru/57wxq

В статье описан интерфейс каждой коллекции и приведены полезные кейсы использования.

#javascript #core

Как улучшить производительность сайта с помощью мониторинга реальных пользователей

Обзор инструментария, доступного из консоли браузера, который поможет вам извлечь полезную информацию о времени и скорости загрузки вашего сайта и проанализировать его производительность в целом.

https://nuancesprog.ru/p/8508

@nuancesprog #статьи #JavaScript

#js #tips

Управление памятью в JavaScript, утечки памяти и как с ними справляться

Перевод третьей статьи из цикла How JavaScript works - на этот раз про утечки памяти, о которых мы всегда забываем.

Читать: https://prglb.ru/4s21z

#vue #book #english

Building Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js

Автор: Carlos Rojas
Год издания: 2020

Скачать книгу

#vue #english

В чём разница между CSS Grid и Flexbox

Если коротко, CSS Grid — для разметки, Flexbox — для компонентов. Если наглядно, то посетите замечательный сайт, где на пальцах объясняются главные отличия:

https://tprg.ru/NXsD

Почувствуйте себя официантом, расставляющим тарелки, но перед этим обязательно покушайте: от такого интерактива текут слюнки.

#фронтенд #css

ES6 - шаблонные строки

Шаблонные строки заключены в обратные кавычки () .
Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}).

Возможности:

1. Многострочность

console.log(`string text line 1
string text line 2`);
// "string text line 1
//  string text line 2"

2. Интерполяция выражений

 a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

3. Сырые строки

 tag(strings) {
  return strings.raw[0];
}

tag`string text line 1 \\n string text line 2`;
// выводит "string text line 1 \\n string text line 2",
// включая 'n' и два символа '\'

4. Вложенные шаблоны

 classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

Как Vue Composition API заменяет Vue Mixins

https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/

Правильный ответ: Все объявления корректны

Свойство content допускает использование самых разных значений и даже их комбинацию.
Пример: https://codepen.io/mohnatus-the-lessful/pen/MWKvRpy
Документация: https://developer.mozilla.org/ru/docs/Web/CSS/content

Подробный разбор свойства content читайте в статье Вот что я не знал о content.

#css

Добро пожаловать в ад…зависимостей JavaScript

Зависимость - тут, зависимость - там, и вот уже ваш проект гнется под грузом всевозможных пакетов. Не спешите отчаиваться! Вас ждет подробное руководство по укрощению гидры зависимостей, а также перечень необходимых команд и инструментов для контроля за ними.

https://nuancesprog.ru/p/8559

@nuancesprog #статьи #JavaScript

jest vs jasmine: основные отличия

В чем разница между двумя самыми популярными решениями для тестирования и почему jest один, а карма всегда в связке с жасмином?

Читать: https://prglb.ru/tej1

#testing #jest #jasmine

#laravel #vue #tips