DevGang
Авторизоваться

Как создавать элементы HTML-аккордеона с использованием JavaScript и без него

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

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

Я покажу вам, как это сделать без использования JavaScript, а затем мы добавим немного JavaScript, чтобы сделать его еще лучше.

JavaScript Coercion: за пределами основ. Осмысление неявного преобразования типов

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

Принуждение — странная тема в JavaScript, поэтому многие склонны игнорировать эту тему. Однако мы не можем игнорировать то, что ведет себя нелогично. Мы начнем с изучения того, как абстрактные операции и приведение происходят неявно. После этого мы обсудим, почему они важны.

Docker — настройка локальной среды разработки JS и Python

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

Как быстро создавать динамические изображения с помощью Node.js и Puppeteer

В наше время многочисленные сайты создают страницы, которыми пользователи делятся в разных социальных сетях или мессенджерах. Благодаря тегам Open Graph ссылки могут иметь изображение предварительного просмотра, которое привлекает еще больше внимания, например с помощью тега og:image. Но обычно многие веб-сайты не прикладывают особых усилий к предварительному просмотру изображений и просто добавляют одно изображение на большинство страниц. Если изображения нет, парсеры пытаются автоматически найти первое доступное подходящее изображение и использовать его.

Typescript: шаблон объединения разных типов

Давайте поговорим об одном интересном шаблоне в Typescript, этот шаблон называется Discriminated Type Union или Discriminated Union Type. Прежде чем мы углубимся в эту тему, нам нужно понять проблему. Я напишу с вами код:

type PokemonState = {
  status: "Loading" | "Success" | "Error";
  pokemon?: { name: number; sprite: string; hp: number };
  error?: { message: string };
};

Улучшение SEO в NextJS

Сделать React-приложение SEO-дружелюбным очень сложно. Тем не менее, есть несколько способов сделать это. И сегодня я расскажу вам о них.

Проблема с обычным React

React не подходит для SEO... или подходит?

Если вы действительно заботитесь о SEO, то использование обычного React может быть не самой лучшей идеей. Вам стоит обратить внимание на Next.js.

Создание анимации скремблирования текста с помощью JavaScript

Эффект шифрования текста — это классная анимация, которая быстро раскрывает текст путем случайной смены символов — точно так же, как те сцены в фильмах, где хакеры расшифровывают строки текста! Вдохновленные блогом Evervault, мы создадим навигационное меню с таким эффектом, когда вы нажимаете на ссылки. Кроме того, мы предоставим вам как светлую, так и темную версии меню, так что вы сможете интегрировать этот пример в любой из наших шаблонов Tailwind.

JavaScript Метод Substring

Этот пост о том, как эффективно использовать метод String.prototype.substring() в JavaScript. Мы рассмотрим несколько примеров, чтобы понять, как это работает, поиграем, чтобы понаблюдать за несколькими закономерностями и изучить причуды.

JavaScript substring() - это строковый метод, который обычно используется для извлечения и сохранения части строки. Во время извлечения исходная строка остается нетронутой, а целевая часть возвращается как новая строка.

Идеальный компонент с бесконечной прокруткой для Nuxt

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

Изменение цвета фона при прокрутке с помощью JavaScript

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

Ранее мы уже создавали учебные пособия по этой теме, например, по анимации "водопада" карточек при прокрутке или по градиентному раскрытию текста. Сегодня мы добавим к этому списку еще один пример: изменение цвета фона страницы при прокрутке.

Этот эффект позволит придать дизайну динамичность и сделать каждый раздел уникальным.

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу