Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2👍1
Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений.
Пример:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
Решение задачи
function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}
// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
Please open Telegram to view this post
VIEW IN TELEGRAM
• Упрощаем CSS-анимации с помощью свойств display и размеров элемента
• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года
• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS
• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке
• Разработка Task Manager с нуля до полнофункционального продукта
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1
Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript.
Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
box-shadow в CSS и как оно работает?box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени.<div class="box">Я с тенью</div>
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
}
</style>
🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Ты сделал админку, отладочный дашборд или просто лог-страницу. Вроде «только для себя» — но ты в ней путаешься.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или
<meta>.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com;">
<title>Пример CSP</title>
</head>
<body>
<script src="https://apis.example.com/library.js"></script>
<script>
// Этот скрипт выполнится, так как он разрешен
console.log("Скрипт из разрешенного источника работает.");
</script>
<script>
// Этот скрипт нарушит политику CSP, так как он inline
alert("Inline скрипт заблокирован!");
</script>
</body>
</html>
🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Утечки памяти мешают пользователям долго работать с вашим веб-приложением – из-за них можно потерять аудиторию. Попробуем разобраться как этого издежать.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Определите функцию, которая принимает целочисленный аргумент и возвращает логическое значение true или false в зависимости от того, является ли целое число простым.
Натуральное число, большее 1, у которого нет положительных делителей, кроме 1 и самого себя.
Требования
• Вы можете предположить, что вам будет предоставлен целочисленный ввод.
• Вы не можете предполагать, что целое число будет только положительным. Вам • также могут быть даны отрицательные числа ( или 0 ).
Пример кода:
is_prime(1) /* false */
is_prime(2) /* true */
is_prime(-1) /* false */
Решение задачи
function isPrime(num) {
if (num <= 1) {
return false;
}
if (num === 2) {
return true; // 2 - единственное четное простое число
}
if (num % 2 === 0) {
return false; // исключаем все четные числа, кроме 2
}
// Проверка делимости от 3 до квадратного корня из num
for (let i = 3; i <= Math.sqrt(num); i += 2) {
if (num % i === 0) {
return false;
}
}
return true;
}
// Примеры использования
console.log(isPrime(1)); // false
console.log(isPrime(2)); // true
console.log(isPrime(-1)); // false
console.log(isPrime(17)); // true
console.log(isPrime(18)); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Поскольку все уведомления E_STRICT были преобразованы в E_NOTICE начиная с PHP 8.0, в PHP 8.4 константа E_STRICT объявлена устаревшей.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Иногда важно знать, поддерживается ли функция браузером или нет, чтобы можно было что-нибудь предпринять. Возможно, загрузить полифилл или просто выбрать другой подход. В статье рассматриваются новые возможности браузеров и тесты их поддержки браузером.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
XML – один из самых популярных расширяемых языков разметки. В небольшом обзоре рассказываем о редакторах, которые позволяют работать с ним наиболее эффективно.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
• Черт тебя возьми, CSS. Часть 3
• Как мы перенесли web-сервис в Телеграм Mini Apps
• PostHog для UX-дизайнера: от анализа данных до повышения зарплаты
• Пример создания Full Stack проекта, используя функциональное тестирование как инструмент дизайна
• Где взять энергию? Эпидемия выгорания айтишников
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
В этом руководстве мы создадим компонент ввода тегов с автозаполнением, используя React JS без сторонних библиотек.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
