👩‍💻 Scroll Trigger Image Zoom

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

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

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

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

• HTML-теги с искусственным интеллектом

• Концепция временного View state в JavaScript

• Бесплатный курс по созданию сайтов для детей: 7 уроков по HTML и CSS с нуля

• Программирование — это вообще не просто!

• «Голая Java» или разработка без всего

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

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

Читать...

🔍 Как найти утечки памяти на сайтах и в веб-приложениях

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

Читать...

👩‍💻 Slice! No JS, no text duplication!

Эффект разрезанного текста. Сделана на Pug и SCSS.

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

👩‍💻 Как выбрать библиотеку для управления состоянием в Vue.js

Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества.

Читать...

👩‍💻 PHP 8.4: Константа E_STRICT объявлена устаревшей

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

Читать...

👩‍💻 Тесты поддержки браузерами современных веб-функций на JavaScript

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

Читать...

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

🖥 15 лучших редакторов XML для продуктивной разработки

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

Читать...

📣 Отцы JavaScript и Node.js, вместе с 10 000 разработчиков, обратились к Oracle с просьбой

Создатели JavaScript Брендан Айк и Node.js Райан Дал, совместно с более чем 10 000 разработчиков, подписали открытое письмо к Oracle, призывая компанию отказаться от торговой марки JavaScript.

Основная претензия заключается в том, что Oracle фактически забросила марку, оставшуюся ей после приобретения Sun Microsystems в 2009 году.

Читать...

👩‍💻 Как создать компонент тегов с автозаполнением на React

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

Читать...

👩‍💻 Diorama

Интерактивная диорама в виде мини ПК. Сделана на SCSS и ThreeJS.

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

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

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

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

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

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

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

👩‍💻 Обрабатываем ошибки в React: полное руководство

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

Читать...

👩‍💻 Управление памятью JavaScript: как избежать утечек памяти и повысить производительность

Если вы разрабатывали приложения, то могли сталкиваться с такой проблемой, как утечка памяти. В сегодняшней статье мы расскажем об управлении памятью в JS и о том, как не допустить ее утечек.

Читать...

👩‍💻 Массив++

Учитывая массив целых чисел любой длины, верните массив, в котором единица добавлена к значению, представленному массивом.

Массив не может быть пустым. Допускаются только неотрицательные однозначные целые числа. Возвращайте null для недопустимых входных данны

Пример кода:

upArray([2,3,9]) => [2,4,0]
upArray([4,3,2,5]) => [4,3,2,6]
upArray([1,-9]) => null

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

function upArray(arr) {
if (arr.length === 0 || arr.some(num => num < 0 || num > 9)) {
return null;
}

for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] < 9) {
arr[i]++;
return arr;
}
arr[i] = 0;
}

arr.unshift(1);
return arr;
}

// Примеры использования функции
console.log(upArray([2, 3, 9])); // => [2, 4, 0]
console.log(upArray([4, 3, 2, 5])); // => [4, 3, 2, 6]
console.log(upArray([1, -9])); // => null