Интеграция Typescript в существующее VueJS приложение

Три шага для внедрения типизированного JS в ваш проект!

Читать: https://prglb.ru/1r9em

#frameworks #vue #typescript #tools

#css #tips

CSS анимация

Плейлист от Виталия Менчуковского, посвященный анимации в CSS: https://prglb.ru/3w5u7

#video #css #animation

Поддержка темного режима на вашем сайте

https://jec.fyi/blog/supporting-dark-mode

#webpack #tips

Руководство для начинающих по WEBPACK (Очень простое)

Сколько лет уже его использую, но все еще читаю руководства)

https://webdevblog.ru/ochen-prostoe-rukovodstvo-dlya-nachinajushhih-po-webpack/

Безопасное использование target="_blank"

Когда страница открыта с помощью target="_blank" - она имеет доступ к window.opener, это может быть использовано мошенниками

Пример:

1. Вы делитесь страницей на facebook
2. На ней присутствует код - window.opener.location = 'https://phishingwebsite'
3. Этот код перезагружает открытый таб на копию facebook, которая просит повторно авторизоваться

Вуаля - пользователь вводит учетные данные на фишинговой странице

Как избежать:

Реализуйте ссылки в таком виде (noreferrer - для старых браузеров)

<a href="/share" rel="noopener noreferrer" target="_blank">Перейти</a>

В таком случае у отрытой страницы не будет доступа к открывшему ее табу браузера

#seniorFrontHTML

#CSS #tips

Эффект складывания журнала на CSS

https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

#js #jwt #tips

https://vuejsdevelopers.com/2019/04/15/api-security-jwt-json-web-tokens/

#js #deno #course

Полное руководство по управлению 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