Логово верстальщика
8.07K subscribers
996 photos
48 videos
4 files
1.65K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👩‍💻 Text Illumination

Сцена с анимированным появлением текста. Сделана на SVG и CSS.

Открыть код...
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) и зачем она нужна?

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
👩‍💻 Как выбрать библиотеку для управления состоянием в Vue.js

Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Is a number prime?

Определите функцию, которая принимает целочисленный аргумент и возвращает логическое значение 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
👩‍💻 PHP 8.4: Константа E_STRICT объявлена устаревшей

Поскольку все уведомления E_STRICT были преобразованы в E_NOTICE начиная с PHP 8.0, в PHP 8.4 константа E_STRICT объявлена устаревшей.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
1
👩‍💻 Тесты поддержки браузерами современных веб-функций на JavaScript

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 15 лучших редакторов XML для продуктивной разработки

XML – один из самых популярных расширяемых языков разметки. В небольшом обзоре рассказываем о редакторах, которые позволяют работать с ним наиболее эффективно.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как создать компонент тегов с автозаполнением на React

В этом руководстве мы создадим компонент ввода тегов с автозаполнением, используя React JS без сторонних библиотек.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Обрабатываем ошибки в React: полное руководство

Независимо от уровня внимательности и количества написанных тестов всегда что-то может пойти не так. Рассмотрим обработку ошибок в React: что делать при их появлении, как их выявить и устранить.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👩‍💻 Управление памятью JavaScript: как избежать утечек памяти и повысить производительность

Если вы разрабатывали приложения, то могли сталкиваться с такой проблемой, как утечка памяти. В сегодняшней статье мы расскажем об управлении памятью в JS и о том, как не допустить ее утечек.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое замыкания (closures) в JavaScript?

Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

function makeCounter() {
let count = 0;
return function() {
return ++count;
};
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2


🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.


🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM