👩‍💻 light/dark mode

Анимированное переключение светлой и темной темы. Сделано на Pug и SCSS.

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

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

• PHP и Laravel дайджест новостей за июль 2024 года

• PWA vs Native: где приложения для iOS и Android больше никогда не пригодятся

• Нагрузочное тестирование в разработке веб-приложений

• Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

• Как работать удаленно, мои наблюдения и рекомендации

🔄 React не обязателен: 5 крутых альтернатив для фронтенда

React — топовый инструмент для создания интерфейсов, но не всегда он лучший выбор. Иногда есть более простые и эффективные библиотеки и фреймворки, которые могут подойти лучше.

Читать...

👩‍💻 Абортим асинхронные задачи в JavaScript с методами AbortSignal.timeout() и AbortSignal.any()

Скорее всего, ты ещё не слышал про два полезных метода в JavaScript — AbortSignal.timeout() и AbortSignal.any(). Они помогают правильно останавливать асинхронные операции и работают в большинстве веб-браузеров.

Читать...

👩‍💻 Find the missing letter

Напишите метод, который принимает массив последовательных букв в качестве входных данных и возвращает недостающую букву в массиве.

Вы всегда получите действительный массив. И в нем всегда будет отсутствовать ровно одна буква. Длина массива всегда будет составлять не менее 2.

Пример кода:

['a','b','c','d','f'] -> 'e'
['O','Q','R','S'] -> 'P'

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

function findMissingLetter(array) {
for (let i = 0; i < array.length - 1; i++) {
// Если разница в кодах символов между текущей и следующей буквой больше 1
if (array[i].charCodeAt(0) + 1 !== array[i + 1].charCodeAt(0)) {
// Возвращаем пропущенную букву
return String.fromCharCode(array[i].charCodeAt(0) + 1);
}
}
throw new Error("No missing letter found");
}

// Примеры использования:
console.log(findMissingLetter(['a','b','c','d','f'])); // 'e'
console.log(findMissingLetter(['O','Q','R','S'])); // 'P'

✨ Tailwind CSS: Как Добавить Эффектные Анимации

Анимации с Tailwind CSS оживят ваш интерфейс и сделают его более динамичным. Взгляните на примеры, где показано, как настроить такие эффекты, как вращение, подпрыгивание, пульсация, переворачивание и покачивание.

Читать...

🛠 17 топовых инструментов для фронтенда

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

Читать...

👩‍💻 Neon Clock

Сцена с неоновыми часами. Сделана на SCSS и JavaScript.

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

👩‍💻 React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android

Виджеты - это инструменты, которые делают домашний экран более привлекательным и предоставляют полезную информацию. Рассказываем, как создавать виджеты для Android и iOS и как внедрить их в приложение на React Native.

Читать...

👩‍💻 Сбросы базовых CSS-стилей для применения в любом приложении

Устали переписывать снова и снова базовые CSS-стили? Предлагаем код со сбросами, который можно вставить в корневой CSS-набор любого проекта.

Читать...

👩‍💻 Как работает JavaScript Proxy

Раскройте для себя возможности JavaScript Proxy, углубившись в настройку операций с объектами и контроль над ними. Используя JavaScript Proxy, вы будете создавать надежные и безопасные приложения.

Читать...

👩‍💻 Bit Counting

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

Пример: Двоичное представление 1234 равно 10011010010, поэтому в этом случае функция должна возвращать 5

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

function countBits(n) {
return n.toString(2).split('0').join('').length;
}

// Примеры использования:
console.log(countBits(1234)); // Вывод: 5
console.log(countBits(7)); // Вывод: 3 (двоичное представление 7 равно 111)
console.log(countBits(9)); // Вывод: 2 (двоичное представление 9 равно 1001)
console.log(countBits(15)); // Вывод: 4 (двоичное представление 15 равно 1111)

👩‍💻 Операторы равенства == и === в JavaScript

В JavaScript есть два разных оператора равенства: == и ===. Они оба используются для сравнения значений, но между ними есть различие.

Читать...

👩‍💻 JavaScript однострочники, которые сэкономят кучу времени

Эти короткие, но мощные строчки кода поднимут твои навыки JavaScript на новый уровень и ускорят работу в разы.

Читать...

👩‍💻 Как правильно оптимизировать изображения в HTML

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

Читать...

👩‍💻 Firefly Button

Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript.

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

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

• Ваш плеер работает неправильно, или Как мы учили свой движок выбирать наилучшее качество видео

• V8. Работа со строкам. Пополняем словарный запас

• Как построить мост между JavaScript и C++ через WASM, или гайд для самых маленьких

• Как понять, что сайт был загружен из кэша

• Сериализация сущностей с помощью декораторов на TypeScript

👩‍💻 Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Овладейте искусством создания бесшовных и визуально привлекательных взаимодействий с перетаскиванием в React-приложениях с помощью библиотеки React Beautiful Dnd.

Читать...

👩‍💻 Будущее CSS: новейшие возможности языка декорирования

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

Читать...

👩‍💻 Хештег и точка

В этой задаче необходимо реализовать генератор хештэгов.

Условия:
— Выходная строка должна начинаться с хештега ( # )
— Во всех словах первая буква должна быть заглавной
— Если окончательный результат длиннее 140 символов, функция вернёт false
— Если ввод или результат представляет собой пустую строку, то функция должна вернуть false

Пример кода:

generateHashtag(" Hello there thanks for trying my Kata") => "#HelloThereThanksForTryingMyKata"
generateHashtag("    Hello     World   ") => "#HelloWorld"
generateHashtag("") => false

Решить задачу ⬅️

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

function generateHashtag(str) {
if (str.trim() === "") {
return false;
}

const words = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1));
const hashtag = "#" + words.join("");

return hashtag.length <= 140 ? hashtag : false;
}

console.log(generateHashtag(" Hello there thanks for trying my Kata")); // "#HelloThereThanksForTryingMyKata"
console.log(generateHashtag(" Hello World ")); // "#HelloWorld"
console.log(generateHashtag("")); // false