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

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript

Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.

Читать...

📝 Подборка вакансий для лидов

Техлид фронтенд-разработки (React и Vue)
• TypeScript, JavaScript, React, Next.js, Vue.js, Nuxt.js
• от 200 000 до 250 000 ₽ | опыт не указан

Team Lead Vue.JS/Golang (команда Promo Games)
• Vue.js, Pixi.JS, Golang, PostgreSQL, Redis
• Уровень дохода не указан | от 2 лет

Team Lead разработки (Angular)
• Angular 14+, Node.js (Nest.js), MongoDB (ORM mongoose), PostgreSQL (ORM sequelize)
• Уровень дохода не указан | от 5 лет

⚙️ Что такое 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

• От юношеской мечты до реализации, верхом на депрессии

📝 Подборка вакансий для сеньоров

Ведущий React Native разработчик
• HTML, CSS, TypeScript, React, React Native
• от 200 000 до 250 000 ₽ | от 1-3 лет

React Native Senior Developer
• Git, GitLab, iOS, React Native, JavaScript, TypeScript, Адаптивная верстка
• от 200 000 до 300 000 ₽ | от 5 лет

Senior FullStack Developer (TS, React.JS, Nest.JS)
• Linux, Docker, Redis, MongoDB, React, NestJS, TypeScript
• Уровень дохода не указан | от 4 лет

Fullstack TypeScript Developer
• TypeScript, Node.js, SQL, React, Git, Docker
• Уровень дохода не указан | опыт не указан

👩‍💻 Text Illumination

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

Открыть код...

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

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

Читать...

👩‍💻 Динамический поиск в списке

Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст.

Ожидаемое поведение:

• При вводе текста список фильтруется по введённым данным.
• Поиск нечувствителен к регистру.
• Если текстовое поле пустое, отображается весь список.

Решение задачи🔽

<input type="text" id="searchInput" placeholder="Введите текст для поиска">
<ul id="itemList">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
<li>Peach</li>
</ul>

const searchInput = document.getElementById('searchInput');
const itemList = document.getElementById('itemList');
const items = itemList.getElementsByTagName('li');

searchInput.addEventListener('input', () => {
const filter = searchInput.value.toLowerCase();

Array.from(items).forEach((item) => {
const text = item.textContent.toLowerCase();
item.style.display = text.includes(filter) ? '' : 'none';
});
});

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.

Читать...

📝 Подборка вакансий для джунов

Frontend разработчик (React)
• React, Redux, HTML, CSS, TypeScript, Webpack
• Уровень дохода не указан | от 3 лет

Frontend developer (Angular)
• JavaScript, Angular, TypeScript, HTML5, CSS3, REST, Git, SASS, WebPack
• Уровень дохода не указан | опыт не указан

Frontend разработчик (React)
• React, TypeScript, JavaScript, Node.js, Express, Git
• Уровень дохода не указан | опыт не указан

Frontend developer (Vue.js)
• Vue.js, Nuxt.js, JavaScript, ES6, Git, REST, SASS, LESS, WebPack, Gulp, Grunt
• от 140 000 до 180 000 ₽ | опыт не указан

Frontend разработчик (Angular)
• Angular 13+, TypeScript, JavaScript, RxJs, Git, Leaflet, Ionic, Chart.js, CI/CD
• от 120 000 ₽ | опыт не указан

⚙️ Что такое 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.

Открыть код...

📝 Подборка вакансий для джунов

Junior React Разработчик
• HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack
• от 60 000 до 90 000 ₽ | опыт не указан

Разработчик Laravel и REACT в Scrum команду
• Laravel, React, REST API, Git
• от 50 000 до 1 000 000 ₽ | опыт не указан

JavaScript Developer (NGFW)
• JavaScript, React, TypeScript, Node.js
• Уровень дохода не указан | от 2 лет

Frontend разработчик (Vue.js)
• JavaScript, TypeScript, Vue.js, SASS, Gulp, WebPack, HTML, CSS
• от 50 000 до 90 000 ₽ | опыт не указан

👩‍💻 Анимация "пульсации" кнопки

Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени.

Ожидаемое поведение:

• Кнопка остаётся статичной, пока на неё не навели мышь.
• При наведении запускается бесконечная анимация "пульсации".
• При убирании мыши анимация прекращается.

Решение задачи🔽

<button class="pulse-button">Наведи на меня</button>

.pulse-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}

.pulse-button:hover {
animation: pulse 1s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

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

👩‍💻 Улучшение производительности с делегированием событий

Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.

Читать...

📝 Подборка зарубежных вакансий

React Native Developer Middle
• React Native, JavaScript, TypeScript, REST API, Git
• от 1000 до 1500 $ | опыт не указан

Fullstack Developer
• React, Vue.js, Webpack, TypeScript, Node.js, MongoDB
• от 3800 до 6500 $ | от 5 лет

React.js Developer
• React.js, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js
• от 5000 $ | от 5 лет

Fullstack разработчик (JavaScript, PHP, SQL), веб программист
• PHP, JavaScript, HTML, CSS, jQuery, Node.js, React, SQL
• от 1800 $ | опыт не указан