Логово верстальщика

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

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

🔝 Самые интересные статьи за последние дни: • Черт тебя возьми, CSS. Часть 3 • Как мы перенесли web-сервис в Телеграм Mini Apps • PostHog для UX-дизайнера: от анализа данных до повышения зарплаты • Пример создания Full Stack проекта, используя функциональное тестирование как инструмент дизайна • Где взять энергию? Эпидемия выгорания айтишников

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

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

👩‍💻 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

#vacancy #вакансия #версталльщик #juniorfrontend 📌Компания: SonderAds 📌Позиция: Верстальщик / Junior Front-end (арбитраж) 📌Локация: удаленно из любой точки мира 📌 Формат: full-time 5/2 📌ЗП: Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) 🚀 Ищешь удалённую full-time работу, хочешь развиваться во фронтенде и делать проекты, которые напрямую влияют на результат? Интересно верстать лендинги и разбираться, как работает рекламный трафик? Тогда тебе к нам. 🚀 Что ты будешь делать: — Верстка и доработка лендингов по готовым шаблонам — Правки и доработка HTML / CSS / JavaScript (адаптив, визуальные правки, логика скриптов) — Настройка кнопок, ссылок, редиректов, форм — Использование AI-инструментов для ускорения работы — Настройка доменов и интеграция трекеров — Проверка корректной работы лендингов перед запуском трафика Что мы ожидаем от тебя: — Опыт работы верстальщиком / junior front-end от 1 года —Понимание структуры лендингов: кнопки, ссылки, формы, редиректы —Знания и уверенное владение HTML, CSS, JavaScript —Умение читать и править чужой код —Умение пользоваться AI-инструментами (ChatGPT, Claude и др.) —Английский на уровне чтения технической документации —Самостоятельность и ответственное отношение к технической части работы Будет плюсом — Опыт работы с лендингами под рекламный трафик и трекерами — Понимание целей и мотивации пользователей на рекламных лендингах — Базовое понимание конверсионных воронок — Общее представление об арбитражных связках и взаимодействии лендинга с трафиком Что мы предлагаем: — Обучение и поддержку внутри команды - всё нужное для старта дадим — Интересные проекты с масштабными возможностями — Стабильную зарплату - чтобы можно было сосредоточиться на работе — Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) — Формат full-time 10-19:00 (время Кипра) Полностью удаленный формат работы. — Оплачиваемые отпуск (20 рабочих дней) и больничные Чтобы откликнуться на позицию, заполните форму 😉 Если остались вопросы, пишите — @Sonder_Ads @Anastasi_SonderAds @Marharyta_M8

👩‍💻 Как выбрать библиотеку для управления состоянием в Vue.js Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества. Читать...

🔍 Как найти утечки памяти на сайтах и в веб-приложениях Утечки памяти мешают пользователям долго работать с вашим веб-приложением – из-за них можно потерять аудиторию. Попробуем разобраться как этого издежать. Читать...

⚙️ Что такое 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-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.

🖥 Подробнее тут

🧨 Работа с куки-файлами хуже сапёрного дела Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами. Читать...

📈 Подборка статей для вашей карьеры • Как ручному тестировщику стать автоматизатором? • Сколько времени тратить на работу? • Найм дизайнеров глазами лида • Software Architect vs Solution Architect • От юношеской мечты до реализации, верхом на депрессии

👩‍💻 Text Illumination Сцена с анимированным появлением текста. Сделана на SVG и CSS. Открыть код...

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

🎨 UI для разработчика — это тоже UI Ты сделал админку, отладочный дашборд или просто лог-страницу. Вроде «только для себя» — но ты в ней путаешься. 👉 Совет: даже если интерфейс внутренний, подходи к нему как к продукту. Сделай удобно, понятно, визуально чисто. Чем меньше усилий тратится на навигацию — тем больше остаётся на работу.

⚙️ Что такое 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 добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

🖥 Подробнее тут

👩‍💻 Fluid Simulation Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов. Читать...

🔝 Самые интересные статьи за последние дни: • Упрощаем CSS-анимации с помощью свойств display и размеров элемента • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года • Возможности поля HTML-документа, часть 2. Внедряем CSS и JS • Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке • Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 Подсчёт частоты элементов в массиве Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений. Пример:

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}