​Подробная настройка Content Security Policy (CSP)

Если вы сталкивались с такими типами атак, как внедрение скриптов (XSS) или выполнение нежелательного кода (инъекция), то CSP может вам пригодиться.

С его помощью можно определить набор допустимых источников для каждого типа ресурса, а браузеры будут блокировать попытки загрузки ресурсов из недопустимых источников.

Ловите подробный туториал о том, как его настроить:

https://habr.com/ru/articles/757332/

#безопасность

Подборка VS Code-плагинов для фронтенд-разработчиков

Плагины в Visual Studio Code представляют собой набор инструментов, которые различным способом способны упростить работу программиста. Например, плагин quokka.js — обеспечивает мгновенную отладку и вывод результатов javascript-выражений в реальном времени.

Если вы хотите ускорить процесс написания кода или избавиться от некоторых монотонных задач, то советуем вам прочитать данную статью:

https://habr.com/ru/articles/756782/

#vscode

Звучит?

Карточки цен на CSS

Если вы работаете над созданием интернет-магазина, то вас может заинтересовать этот проект. Анимированные ценники, написанные на чистом css помогут сделать ваш сайт более привлекательным. Для работы с CSS в этом проекте использовался препроцессор SCSS.

Посмотреть исходный код можно по ссылке:

https://codepen.io/jcoulterdesign/pen/NxMoja

#codepen

​Что такое «временная мёртвая зона» в ES6?

В ES6 выполняется подъём переменных и констант, объявленных с использованием ключевых слов let и const (выполняется и подъём сущностей, объявленных с использованием ключевых слов var, class и function).

Однако в коде имеется зона, простирающаяся от входа в область видимости до объявления переменной или константы. При обращении к переменной или константе в этой зоне будет выдана ошибка. Это и есть «временная мёртвая зона» (Temporal Dead Zone, TDZ).

В данном примере TDZ заканчивается после объявления aLet, но не после присвоения aLet значения.

#основы

​Music App в стиле рисунка

Отличный вариант пет-проекта для вашего портфолио.
Автор реализовал пользовательский интерфейс аудиоплеера в стиле рисунка. Проект написан на HTML и CSS.

Можете попробовать повторить его самостоятельно или, взяв его за основу, создать собственный вариант приложения:

https://codepen.io/havardob/pen/JjJXqZm

#codepen

Коротко о моём HTML

​Задачи по JavaScript

Завершите решение так, чтобы оно сортировало переданный массив чисел. Если функция передает пустой массив или значение null/nil, она должна вернуть пустой массив.

Пример:

solution([1, 2, 10, 50, 5]); // должен вернуть [1,2,5,10,50]
solution(null); // должен вернуть []

Поделитесь своими результатами в комментариях👇

#задачи

​Задачи по JavaScript

Вчера мы опубликовали задачу, а вот и один из вариантов её решения.

Если у вас есть более лаконичный ответ, то предлагаем вам поделиться им в комментариях👇

#задачи

Подборка актуальных вакансий

— Python-разработчик в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— Разработчик PHP Middle+ / Senior в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Python-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет

— Middle+ Senior Java-разработчик Сфера в Иннотех
Где: удалённо
Опыт: от 3 лет

— Java IT Lead / Руководитель группы разработки Сфера в Иннотех
Где: удалённо
Опыт: от 3 лет

— Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Senior Frontend Developer в Kokoc Group
Где: удалённо
Опыт: от 4 лет

— Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет

— Senior / Lead Backend Java Developer HR TECH (Проект Атомкор) в Гринатом
Где: удалённо
Опыт: не указан

#вакансии #работа

​Паттерны реактивности в JavaScript

«Реактивность» — это то, как системы реагируют на обновление данных. Cовременный JavaScript позволяет достигать реактивности множеством различных способов. Мы можем комбинировать паттерны для реактивного рендеринга, логгирования, анимирования, обработки пользовательских событий и других вещей, происходящих в браузере.

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

В этой статье автор собрал и объяснил функционал 17 паттернов:

https://habr.com/ru/articles/757770/

#javascript

​В чём разница между объектами Map и WeakMap?

Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной. Пример на картинке ниже.

После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным.

В результате оказывается, что объекты WeakMap позволяют сборщику мусора избавляться от тех своих записей, на ключи которых нет ссылок во внешних переменных. Объекты map хранят пары ключ/значение вне зависимости от наличия или отсутствия внешних ссылок на ключи. То же самое можно сказать и о реализации структуры данных Map с использованием обычных массивов. В WeakMap используются «слабые» ссылки на ключи. Они не препятствуют работе сборщика мусора в том случае, если на объект, используемый в роли ключа, нет других ссылок.

#основы

​Ликбез по распространённым Client-Side уязвимостям

Client Side-уязвимости — это слабые места или ошибки в ПО, работающем на стороне пользователя (обычно в контексте веб-браузера или мобильного приложения), которые можно использовать для хакерских атак или несанкционированного доступа к системе.

Для того чтобы этого не допустить, предлагаем вам изучить самые распространённые виды уязвимости на стороне клиента и некоторые методы Client-Side защиты:

https://habr.com/ru/companies/bastion/articles/757590/

#безопасность

​Ускорение в 30 раз — requestIdleCallback

Автор статьи столкнулся с проблемой медленной обработки фильтров в своём проекте. Дело в том, что происходил расчёт (распределение по типам и раскидывания данных по компонентам для каждого типа) и отрисовка даже в свернутых категориях фильтров. Для решения этого вопроса он решил воспользоваться данным методом.

Эта статья может быть полезна для понимания использования и влияния requestIdleCallback:

https://habr.com/ru/articles/759150/

#оптимизация

Управляемая игральная кость на CSS

Проект написан без применения JavaScript, хоть здесь и предусмотрено управление её положением. Вся работа выполнена с помощью препроцессоров Pug и SCSS.

Посмотреть как это реализовано можно здесь:

https://codepen.io/HunorMarton/pen/mdERrLy

#codepen

​Ключевое слово debugger

Выражение debugger — это инструмент отладки кода. Он останавливает выполнение скрипта JavaScript и вызывает (если есть) функцию отладки.

У этого ключевого слова то же действие, что и у точек останова в окне отладчика.

Если отладка не доступна, то выражение debugger ничего не делает.

В следующем примере, если отладчик включен, то выполнение кода будет остановлено перед выполнением третьей строки:

#основы

Лоадер-акробат

Проект выполнен с помощью SVG и CSS-анимации. Автор не использовал JavaScript, поэтому такой элемент практически никак не влияет на нагрузку, но может сделать ваш сайт интереснее.

Посмотреть код можно тут:

https://codepen.io/jkantner/pen/VwrYggy

#codepen