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

🔝 Самые интересные статьи за последние дни:

• Черт тебя возьми, CSS. Часть 3

• Как мы перенесли web-сервис в Телеграм Mini Apps

• PostHog для UX-дизайнера: от анализа данных до повышения зарплаты

• Пример создания Full Stack проекта, используя функциональное тестирование как инструмент дизайна

• Где взять энергию? Эпидемия выгорания айтишников

👩‍💻 Рекомендации по обработке и регистрации ошибок в React

Как правильно обрабатывать и регистрировать ошибки в React, какие инструменты стоит для этого выбрать?

Читать...

👩‍💻 Всё о циклах в JavaScript

В каждом языке программирования есть циклы. Циклы выполняют операцию (т. е. часть работы) несколько раз, обычно по одному разу для каждого элемента массива или списка, или просто повторяют операцию до тех пор, пока не будет выполнено определённое условие.

Читать...

👩‍💻 AggregateError в JavaScript

AggregateError помогает обрабатывать сразу несколько ошибок в JavaScript. Это упрощает управление кодом и делает его более надежным.

Читать...

👩‍💻 Anagram Detection

Анаграмма - это результат перестановки букв в слове для получения нового слова (см. Википедию).

Примечание: анаграммы не чувствительны к регистру

Завершите функцию, чтобы вернуть значение true, если два приведенных аргумента являются анаграммами друг друга; в противном случае верните значение false.

Пример кода:

"foefet" is an anagram of "toffee"
"Buckethead" is an anagram of "DeathCubeK"

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

function isAnagram(str1, str2) {
// Приводим строки к нижнему регистру и сортируем их
const normalize = str => str.toLowerCase().split('').sort().join('');

// Сравниваем отсортированные строки
return normalize(str1) === normalize(str2);
}

// Примеры использования:
console.log(isAnagram("foefet", "toffee")); // true
console.log(isAnagram("Buckethead", "DeathCubeK")); // true
console.log(isAnagram("hello", "world")); // false

🐞 Топ-7 инструментов для отладки JavaScript: мастхэвы для любого разработчика

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

Читать...

👩‍💻 Scroll Trigger Image Zoom

Страница с эффектом зума при скролле. Сделана на CSS и JavaScript.

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

👩‍💻 CSS свойство contain

CSS Containment используется для оптимизации и открытия возможностей стилизации путём изоляции элементов от остальной части страницы. Различные значения contain (size, paint, layout и т. д.) обеспечивают различные преимущества и компромиссы.

Читать...

👩‍💻 "Умные" макеты с контейнерными запросами

Современный CSS даёт множество новых, простых способов решения старых проблем, но часто новые функции не только решают старые проблемы, но и открывают новые возможности.

Читать...

👩‍💻 Освоение безопасной для типов JSON-сериализации в TypeScript

Предлагаем руководство по использованию TypeScript для безопасной для типов сериализации и десериализации данных в формате JSON. Освоение этой стратегии позволит своевременно обнаруживать потенциальные ошибки во время разработки приложения.

Читать...

🔝 Самые интересные статьи за последние дни:

• Как (не)удачно превращали LLM в 2d виртуальных сотрудников

• Магия CSS на практике: советы по вёрстке от гика. Часть 4

• Три способа оптимизировать работу с памятью на Go с помощью memory pools

• Шаблоны для эффективной работы с DOM с помощью современного чистого JavaScript

• Как устроено хранение разных типов данных в веб-буфере обмена

👩‍💻 21 хорошая практика для очень хороших React проектов

Несколько практических советов для улучшения качества кода.

Читать...

🧩 Учись работать с незнакомым кодом, как с лабиринтом

Попадая на проект с чужим кодом, легко заблудиться и запаниковать. Но хаос только кажется хаосом.

👉 Совет: начни с поиска контрольных точек: основного файла, точки входа, главной функции. Построй ментальную карту проекта: как данные проходят через код, как устроена архитектура. Так ты быстрее поймёшь суть и будешь увереннее править баги.

🖥 ТОП-5 популярных технологий для создания сайтов: просто и понятно для новичков

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

Читать...

👩‍💻 7 методов оптимизации производительности React

Производительность - важнейший аспект веб-приложения. Однако одностраничные приложения React (SPA) известны плохой производительностью. Рассмотрим 7 методов, которые помогут это исправить и обеспечить беспроблемный пользовательский опыт.

Читать...

🖥 Как выбрать IDE, если вы начинающий веб-разработчик

Начинающие веб-разработчики часто сталкиваются с трудностями при выборе интегрированной среды разработки (IDE). Рассказываем, как не прогадать и не усложнить себе жизнь.

Читать...

📈 Подборка статей для вашей карьеры

• Как ручному тестировщику стать автоматизатором?

• Сколько времени тратить на работу?

• Найм дизайнеров глазами лида

• Software Architect vs Solution Architect

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

👀 Как использовать Redis для кэширования и очередей в веб-приложениях

Для ускорения веб-приложений есть множество инструментов и паттернов. Один из них — key-value система Redis. Рассказываем, как ее установить и настроить для повышения производительности и надежности.

Читать...

👩‍💻 Получение размера окна на чистом CSS

Вы не поверите, но теперь в CSS можно определять свойства, выполнять математические вычисления и даже напрямую получать размер окна! В этой статье мы расскажем вам, как это делается.

Читать...

👩‍💻 Распространенные алгоритмы и структуры данных в JavaScript: стеки, очереди и связные списки

Рассмотрим другие (массивоподобные) структуры – стеки, очереди и связные списки.

Читать...