Сердце Фреймворка: Философия и Практика Dependency Injection в Angular
Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.
👉 @frontendInterview
Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.
👉 @frontendInterview
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Тимлид должен джуна похвалить и попросить больше ничего такого на работу не таскать
👉 @frontendInterview
👉 @frontendInterview
🔥7❤1
Почему нельзя отправлять в get запросах чувствительную информацию?
URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.
Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.
Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.
Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.
Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.
HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).
Использование POST-запросов в качестве альтернативы
Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
👉 @frontendInterview
URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.
Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.
Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.
Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.
Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.
HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).
Использование POST-запросов в качестве альтернативы
Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Secure Form</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
</body>
</html>
👉 @frontendInterview
❤3👍2
Грокаем функциональное мышление
Кодовые базы разрастаются, становясь всё сложнее и запутаннее, что не может не пугать разработчиков. Как обнаружить код, изменяющий состояние вашей системы? Как сделать код таким, чтобы он не увеличивал сложность и запутанность кодовой базы?
Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее.
Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности.
Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания.
👉 @frontendInterview
Кодовые базы разрастаются, становясь всё сложнее и запутаннее, что не может не пугать разработчиков. Как обнаружить код, изменяющий состояние вашей системы? Как сделать код таким, чтобы он не увеличивал сложность и запутанность кодовой базы?
Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее.
Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности.
Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания.
👉 @frontendInterview
Get the Middle Character
Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.
Пример:
👉 @frontendInterview
Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.
Пример:
getMiddle("testing") = "t"👉 @frontendInterview
Протокол IPv6
IPv6 или Internet Protocol version 6 — сетевой протокол, который обеспечивает передачу данных между компьютерами и другими устройствами в интернете.
Основная идея заключается в том же, в чём идея интернета — прямой связности и построении одноранговой сети (P2P). По сравнению с IPv4 (актуальной, но устаревающей версией), в IPv6 исправили баги и добавили решения, связанные с адресацией, маршрутизацией и автоматизацией.
Основные преимущества протокола в вебе:
- Прямые соединения: преимущество для голосовой связи (VoIP) и аудио-, видео- и конференц-связи (WebRTC), так как нет разделения на частные (серые) и публичные (белые) адреса.
- Удобство в отладке: нет необходимости использовать программное обеспечение вроде ngrok.
- Меньше проблем с блокировками: у каждого устройства свой уникальный IP-адрес. Меньше шансов, что вас заблокируют из-за соседа на хостинге.
- Снижается вероятность столкнуться с капчей на анти-DDoS-сервисах при входе на сайт.
- Косвенные SEO-преимущества: Google может учитывать доступность сайта по IPv6, политики Apple.
- Актуальность в развивающихся странах: во многих регионах провайдеры используют только IPv6, что важно, если делаете международный продукт.
IPv6-адрес состоит из 128 бит, которые записываются в виде восьми групп по четыре шестнадцатеричных символа (хекстета).
Посмотрим на адрес 2001:0db8:4ac7:fddd:8da3:981f:fbda:1e43. Выглядит страшно, но на практике всё просто. Адрес делится на две части:
- 2001:0db8:4ac7:fddd — глобальный префикс, который определяет провайдер.
- 8da3:981f:fbda:1e43 — уникальный идентификатор устройства в сети.
В отличие от IPv4, вы можете представить вторую половину как универсальный уникальный идентификатор устройства (UUID).
👉 @frontendInterview
IPv6 или Internet Protocol version 6 — сетевой протокол, который обеспечивает передачу данных между компьютерами и другими устройствами в интернете.
Основная идея заключается в том же, в чём идея интернета — прямой связности и построении одноранговой сети (P2P). По сравнению с IPv4 (актуальной, но устаревающей версией), в IPv6 исправили баги и добавили решения, связанные с адресацией, маршрутизацией и автоматизацией.
Основные преимущества протокола в вебе:
- Прямые соединения: преимущество для голосовой связи (VoIP) и аудио-, видео- и конференц-связи (WebRTC), так как нет разделения на частные (серые) и публичные (белые) адреса.
- Удобство в отладке: нет необходимости использовать программное обеспечение вроде ngrok.
- Меньше проблем с блокировками: у каждого устройства свой уникальный IP-адрес. Меньше шансов, что вас заблокируют из-за соседа на хостинге.
- Снижается вероятность столкнуться с капчей на анти-DDoS-сервисах при входе на сайт.
- Косвенные SEO-преимущества: Google может учитывать доступность сайта по IPv6, политики Apple.
- Актуальность в развивающихся странах: во многих регионах провайдеры используют только IPv6, что важно, если делаете международный продукт.
IPv6-адрес состоит из 128 бит, которые записываются в виде восьми групп по четыре шестнадцатеричных символа (хекстета).
Посмотрим на адрес 2001:0db8:4ac7:fddd:8da3:981f:fbda:1e43. Выглядит страшно, но на практике всё просто. Адрес делится на две части:
- 2001:0db8:4ac7:fddd — глобальный префикс, который определяет провайдер.
- 8da3:981f:fbda:1e43 — уникальный идентификатор устройства в сети.
В отличие от IPv4, вы можете представить вторую половину как универсальный уникальный идентификатор устройства (UUID).
👉 @frontendInterview
👍2❤1
Чем является глобальная функция 'setTimeout'?
Anonymous Quiz
67%
Часть Browser API
26%
Часть JavaScript
7%
Часть EcmaScript
1%
Сторонняя утилита
This media is not supported in your browser
VIEW IN TELEGRAM
Управляем тем, какую область фоновая картинка будет занимать внутри элемента.
Свойство background-origin определяет, откуда начинается отсчёт фона элемента — от границы (border), внутреннего отступа (padding) или содержимого (content). Это влияет на позиционирование фонового изображения или градиента.
Пример
👉 @frontendInterview
Свойство background-origin определяет, откуда начинается отсчёт фона элемента — от границы (border), внутреннего отступа (padding) или содержимого (content). Это влияет на позиционирование фонового изображения или градиента.
Пример
.background-origin {
background-origin: padding-box;
}👉 @frontendInterview
👍2
Где искать работу в IT в 2025: честный разбор платформ для поиска работы программистам, продактам и дизайнерам
Разбираю популярные платформы для поиска работы в IT, объясняю почему LinkedIn не работает, Toptal — не про фриланс, а hh — это просто боль.
👉 @frontendInterview
Разбираю популярные платформы для поиска работы в IT, объясняю почему LinkedIn не работает, Toptal — не про фриланс, а hh — это просто боль.
👉 @frontendInterview
Что такое прогрессивный рендеринг?
Anonymous Quiz
9%
Генерация HTML только на стороне клиента
78%
Отправка HTML с сервера в порядке приоритетности для более быстрого отображения важного контента
7%
Полная загрузка страницы перед отображением
6%
Автоматическая загрузка всех ресурсов страницы одновременно
❤1👍1
Обзор CSS-in-JS
CSS-in-JS — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.
Существуют разные решения CSS-in-JS, но их объединяет общий принцип: стили описываются непосредственно в JavaScript-коде. Это может делаться с помощью объектов, шаблонных строк или через вызов специальных функций, которые обрабатывают определения стилей. Независимо от конкретного синтаксиса, эти JavaScript-описания затем преобразуются таким образом, что стили применяются к компонентам через уникальные идентификаторы. Чаще всего это автоматически сгенерированные CSS-классы — например, вместо общего класса .button может быть создан уникальный класс вроде .acz123_button или .Component-button-aXyZ. Такой подход обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты, и упрощает управление ими.
Вот несколько популярных CSS-in-JS библиотек: Styled Components, Emotion, Styled JSX и vanilla-extract.
👉 @frontendInterview
CSS-in-JS — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.
Существуют разные решения CSS-in-JS, но их объединяет общий принцип: стили описываются непосредственно в JavaScript-коде. Это может делаться с помощью объектов, шаблонных строк или через вызов специальных функций, которые обрабатывают определения стилей. Независимо от конкретного синтаксиса, эти JavaScript-описания затем преобразуются таким образом, что стили применяются к компонентам через уникальные идентификаторы. Чаще всего это автоматически сгенерированные CSS-классы — например, вместо общего класса .button может быть создан уникальный класс вроде .acz123_button или .Component-button-aXyZ. Такой подход обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты, и упрощает управление ими.
Вот несколько популярных CSS-in-JS библиотек: Styled Components, Emotion, Styled JSX и vanilla-extract.
👉 @frontendInterview
👎3👍2
First Course in Algorithms Through Puzzles (2019)
Этот учебник знакомит с основными алгоритмами и объясняет их аналитические методы. Все алгоритмы и методы, представленные в этой книге, хорошо известны и часто используются в реальных программах. Книга начинается с базовых моделей, и никаких предварительных знаний не требует. Эта книга подходит для студентов старших курсов технических направлений, а также для самостоятельного изучения начинающими специалистами, интересующимися увлекательной областью алгоритмов.
Более 40 упражнений разного уровня сложности. Решения и комментарии ко всем упражнениям приводятся в последней главе.
👉 @frontendInterview
Этот учебник знакомит с основными алгоритмами и объясняет их аналитические методы. Все алгоритмы и методы, представленные в этой книге, хорошо известны и часто используются в реальных программах. Книга начинается с базовых моделей, и никаких предварительных знаний не требует. Эта книга подходит для студентов старших курсов технических направлений, а также для самостоятельного изучения начинающими специалистами, интересующимися увлекательной областью алгоритмов.
Более 40 упражнений разного уровня сложности. Решения и комментарии ко всем упражнениям приводятся в последней главе.
👉 @frontendInterview
Степень 4
Напишите функцию, который возвращает true, если заданный параметр является степенью 4, и false, если не является. Если параметр не является целым числом (например, строкой, массивом), метод также должен возвращать false.
Пример:
👉 @frontendInterview
Напишите функцию, который возвращает true, если заданный параметр является степенью 4, и false, если не является. Если параметр не является целым числом (например, строкой, массивом), метод также должен возвращать false.
Пример:
powerOf4(16) = return true; "4^4 = 16"
👉 @frontendInterview
👎3
Please open Telegram to view this post
VIEW IN TELEGRAM
Что такое Long polling?
Это техника, используемая для реализации связи между клиентом и сервером в веб-приложениях, чтобы поддерживать обновление данных в реальном времени. В отличие от обычных HTTP-запросов, long polling позволяет клиенту ждать ответа от сервера дольше, что помогает уменьшить задержку при получении новых данных.
Как работает
1. Клиент отправляет HTTP-запрос к серверу.
2. Сервер не отвечает сразу, а задерживает ответ до тех пор, пока не появятся новые данные или не истечет таймаут.
3. Когда данные становятся доступными или истекает таймаут ожидания, сервер отправляет ответ клиенту.
4. Клиент обрабатывает полученные данные и немедленно отправляет новый запрос к серверу для получения следующих обновлений.
Сервер на Node.js с использованием
Клиентский код на JavaScript
Плюсы
- Реальное время
Лонг-полинг позволяет получать данные в реальном времени без необходимости постоянно проверять сервер с частыми запросами.
- Снижение нагрузки на сервер
По сравнению с обычным полингом (когда клиент постоянно отправляет запросы с фиксированным интервалом), лонг-полинг уменьшает количество HTTP-запросов, что снижает нагрузку на сервер.
- Простота реализации
Лонг-полинг легче внедрить и поддерживать в сравнении с более сложными технологиями, такими как WebSockets.
Минусы
- Задержка
Хотя лонг-полинг уменьшает задержку по сравнению с обычным полингом, он все же может иметь небольшие задержки в зависимости от времени ожидания и частоты событий.
- Ресурсоемкость
Держание соединений открытыми в течение длительного времени может быть ресурсоемким для сервера, особенно при большом количестве клиентов.
- Неоптимальность
Лонг-полинг менее эффективен по сравнению с WebSockets, которые предоставляют постоянное двустороннее соединение.
👉 @frontendInterview
Это техника, используемая для реализации связи между клиентом и сервером в веб-приложениях, чтобы поддерживать обновление данных в реальном времени. В отличие от обычных HTTP-запросов, long polling позволяет клиенту ждать ответа от сервера дольше, что помогает уменьшить задержку при получении новых данных.
Как работает
1. Клиент отправляет HTTP-запрос к серверу.
2. Сервер не отвечает сразу, а задерживает ответ до тех пор, пока не появятся новые данные или не истечет таймаут.
3. Когда данные становятся доступными или истекает таймаут ожидания, сервер отправляет ответ клиенту.
4. Клиент обрабатывает полученные данные и немедленно отправляет новый запрос к серверу для получения следующих обновлений.
Сервер на Node.js с использованием
expressconst express = require('express');
const app = express();
let messages = [];
let clients = [];
// Endpoint для отправки сообщений
app.post('/messages', (req, res) => {
const message = req.body.message;
messages.push(message);
// Уведомляем всех клиентов
clients.forEach(client => client.res.json({ message }));
clients = [];
res.status(200).send('Message sent');
});
// Endpoint для получения сообщений (лонг-полинг)
app.get('/messages', (req, res) => {
if (messages.length > 0) {
res.json({ message: messages.pop() });
} else {
clients.push({ req, res });
}
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});Клиентский код на JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Polling Example</title>
</head>
<body>
<h1>Long Polling Example</h1>
<div id="messages"></div>
<script>
function pollMessages() {
fetch('/messages')
.then(response => response.json())
.then(data => {
const messageDiv = document.createElement('div');
messageDiv.textContent = `New message: ${data.message}`;
document.getElementById('messages').appendChild(messageDiv);
pollMessages(); // Отправляем новый запрос после получения сообщения
})
.catch(error => {
console.error('Error:', error);
setTimeout(pollMessages, 5000); // Повторный запрос через 5 секунд при ошибке
});
}
// Начинаем лонг-полинг
pollMessages();
</script>
</body>
</html>
Плюсы
- Реальное время
Лонг-полинг позволяет получать данные в реальном времени без необходимости постоянно проверять сервер с частыми запросами.
- Снижение нагрузки на сервер
По сравнению с обычным полингом (когда клиент постоянно отправляет запросы с фиксированным интервалом), лонг-полинг уменьшает количество HTTP-запросов, что снижает нагрузку на сервер.
- Простота реализации
Лонг-полинг легче внедрить и поддерживать в сравнении с более сложными технологиями, такими как WebSockets.
Минусы
- Задержка
Хотя лонг-полинг уменьшает задержку по сравнению с обычным полингом, он все же может иметь небольшие задержки в зависимости от времени ожидания и частоты событий.
- Ресурсоемкость
Держание соединений открытыми в течение длительного времени может быть ресурсоемким для сервера, особенно при большом количестве клиентов.
- Неоптимальность
Лонг-полинг менее эффективен по сравнению с WebSockets, которые предоставляют постоянное двустороннее соединение.
👉 @frontendInterview
👍1👎1