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

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

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

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

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

Читать...

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

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

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

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

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

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

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

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

Читать...

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

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

Читать...

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

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

Читать...

👩‍💻 Scroll Trigger Image Zoom

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

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

🐞 Топ-7 инструментов для отладки 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

👩‍💻 AggregateError в JavaScript

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

Читать...

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

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

Читать...

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

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

Читать...

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

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

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

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

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

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

📊 Обзор лучших библиотек для визуализации данных в 2024 году

Визуализация данных — важная часть любого проекта, связанного с аналитикой и обработкой данных. Мы рассмотрим 7 библиотек: Plotly, D3.js, Nivo, Latitude, Apache ECharts, Victory и Chart.js.

Читать...

🗺 Учись ориентироваться в чужом коде через его историю

Открываешь проект, а там гора кода, структура неочевидная, и ты не понимаешь, зачем всё так сделано?

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

👩‍💻 5 способов создать элементы DOM из HTML прямо в JavaScript

Пять простых способов, как с помощью чистого JavaScript добавлять динамический контент на веб-страницы. Эти методы помогут сделать это гибко и без лишних проблем с безопасностью.

Читать...

👩‍💻 Введение в Alpine.js

Alpine.js — легковесный JavaScript фреймворк. Позволяющий создавать интерактивные пользовательские интерфейсы без написания большого количества JavaScript-кода.

Читать...

👩‍💻 Синтаксис относительного цвета — примеры использования

Поддержка синтаксиса относительного цвета в CSS теперь повсеместна (вперёд, к взаимодействию!), поэтому рассмотрим некоторые базовые (и всё ещё очень полезные) варианты использования, например, применение альфы к цвету, который у вас есть под рукой.

Читать...

👩‍💻 На вкус и цвет...

Напишите функцию, которая принимает строку в PascalCase и возвращает строку в snake_case. Символы нижнего регистра могут быть цифрами. Если метод получает число в качестве входных данных, он должен вернуть строку.

Пример кода:

toUnderscore("TestController") => "test_controller"
toUnderscore("MoviesAndBooks") => "movies_and_books"
toUnderscore("App7Test") => "app7_test"
toUnderscore(1) => "1"

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

function toUnderscore(string) {
// Если входное значение число, вернуть его как строку
if (typeof string === 'number') {
return string.toString();
}

// Преобразовать PascalCase в snake_case
return string
.replace(/([A-Z])/g, '_$1') // Вставить подчеркивание перед каждой заглавной буквой
.toLowerCase() // Преобразовать всю строку в нижний регистр
.replace(/^_/, ''); // Удалить начальное подчеркивание, если оно есть
}

// Примеры использования:
console.log(toUnderscore("TestController")); // "test_controller"
console.log(toUnderscore("MoviesAndBooks")); // "movies_and_books"
console.log(toUnderscore("App7Test")); // "app7_test"
console.log(toUnderscore(1)); // "1"

👩‍💻 Продвинутые советы и хитрости console.log

Console – встроенный отладчик браузера. Многие разработчики постоянно используют в коде console.log() для вывода отладочных сообщений, но этот инструмент может предложить гораздо больше.

Читать...