Внедрение зависимостей

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

"undefined" против "null"

"undefined" – присутствует у переменной, которая была объявлена, но значение для неё задано не было
"null" – обозначает пустое или несуществующее значение, которое явно присваивается переменной

"undefined" и "null" не равны при строгом сравнивании:

Дополнительно почитать на тему разницы между этими двумя значениями можно здесь

#массив

Подделка API

Тесты и программные компоненты, которые ты хочешь протестировать, в большинстве случаев имеют зависимости. Типичной зависимостью может быть, например, внешний источник данных. Было бы непрактично вызывать настоящий API в тестовой среде или в процессе разработки. В данной статье автор демонстрирует 4 способа подделки API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Получение фрагментов url-адреса

Объект "window.location" имеет набор полезных методов и свойств. С помощью них мы можем получить данные про протокол, хост, порт, домен и тому подобное из url-адреса браузера.

Одно из свойств, которое мне кажется очень полезным

window.location.search

Свойство "search" возвращает фрагмент строки url-адреса, находящийся после вопросительного знака: "?project=js".

Для получения параметров запроса, помимо "location.search" можно использовать ещё один полезный API, называемый "URLSearchParams".

let project = new URLSearchParams(location.search).get('project');

В результате получаем "js"

#url

Подсчет длины текста

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Переменные let и const

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

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

#переменные

AbortController

Интерфейс AbortController представляет собой объект контроллера, который позволяет прерывать один или несколько веб-запросов по мере необходимости. Связь с запросом DOM осуществляется с помощью объекта AbortSignal. Данная статья знакомит с возможностями AbortController.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Фильтр уникальных значений

Тип Set был введен в ES6, и наряду с оператором «spread» ... мы можем использовать его для создания нового массива с уникальными значениями.

Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

#массив

CORS

Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Длина кэш-массива в циклах

Когда вы изучаете for для циклов, то следуете стандартной процедуре:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Тем не менее, при таком синтаксисе цикл for повторно проверяет длину массива при каждой итерации.

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

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

В принципе, почти то же самое, что и выше, но при увеличении размера цикла мы получим значительную экономию времени.

#циклы

Геометрия объектной модели документа

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Оценка короткого замыкания (оценка Маккарти)

Тернарный оператор — быстрый и эффективный способ написать простые (а иногда и не очень простые) conditional statements:

х> 100? «больше 100»: «меньше 100»;
х> 100? (x> 200? «больше 200»: «между 100-200»): «меньше 100»;

Но иногда даже тернарный оператор сложнее, чем требуется. Вместо него мы можем использовать ‘and’ && и ‘or’ || логические операторы для оценки некоторых выражений еще более кратким способом. Его часто называют «коротким замыканием» или «оценкой короткого замыкания».

#полезно

SPA потоки и состояния

SPA (одностраничное приложение) — это реализация веб-приложения. Она загружает только один веб-документ, а затем обновляет содержимое тела этого единственного документа с помощью API-интерфейсов JavaScript, таких как XMLHttpRequest и Fetch. Делимся статьей, где автор рассказывает про SPA потоки и состояния.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Преобразование в Boolean

Кроме обычных логических функций true и false, JavaScript также рассматривает все другие значения как truthy или falsy.

Пока не указано иное, все значения в JavaScript — truthy, за исключением 0, "", null, undefined, NaN и, конечно, false. Последние являются falsy.

Мы можем легко переключаться между теми и другими, используя оператор !, который также преобразует тип в логический.

#типы

Замена фона видео

Делимся статьей, где автор рассказывает о 2 инструментах MediaPipe. Selfie Segmentation позволяет выделять людей в кадре. Face Mesh предоставляет сетку лица человека, которая работает в реальном времени даже на мобильных устройствах.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Расширения Chrome

Делимся статьей, где автор рассказывает про полезные расширения для Chrome. Есть как и общие расширения для всех, так и более специфические. Например, для определения фреймворка, шрифтов. Также есть список расширений для GitHub.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Преобразование в строку

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

#типы

Web Speech API

Web Speech API позволяет использовать голосовые данные в веб-приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (преобразование текста в речь) и SpeechRecognition (асинхронное распознавание речи). Благодаря этой статье ты познакомишься с Web Speech API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Преобразование в целое число

Этот способ может быть использован и для преобразования логического типа данных boolean в обычные числовые значения, как показано ниже:

console.log(+true); // Return: 1
console.log(+false); // Return: 0

#типы

Задачи на Promise

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение. В данной статье продемонстрированы основные задачи на Promsie, которые часто спрашивают на собеседованиях. Присутствует код с подробными комментариями.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью