🖥 Почти Ванильный Фронтэнд

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

🔗 Ссылка

CodeBase | Frontend | #article

👩‍💻 Что такое метод splice() в JavaScript и как он используется?

splice() — это метод массивов в JavaScript, который изменяет оригинальный массив, удаляя, добавляя или заменяя элементы. Он полезен для управления содержимым массива на месте.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Удаляем 2 элемента, начиная с индекса 1
numbers.splice(1, 2);
console.log(numbers); // [1, 4, 5]

// Вставляем новые элементы на индекс 1
numbers.splice(1, 0, 99, 100);
console.log(numbers); // [1, 99, 100, 4, 5]

🗣️ В этом примере:

• splice(1, 2) удаляет два элемента начиная с индекса 1.
• splice(1, 0, 99, 100) вставляет два элемента без удаления.
• Метод изменяет исходный массив, в отличие от slice().

CodeBase | Frontend | #JS

⚡️Weather Widgets — Анимированный виджет погоды.

Технологии: SVG, SCSS и TypeScript

🔗 Ссылка

CodeBase | Frontend | #animate

⚙️ Что такое атрибут disabled в HTML и зачем он используется?

Атрибут disabled делает элемент формы неактивным. Такой элемент не реагирует на действия пользователя и не отправляется вместе с формой.

➡️ Пример:

<form>
  <label>
    Email:
    <input type="email" disabled>
  </label>
  <button type="submit">Отправить</button>
</form>

🗣️ Почему полезно:

• disabled блокирует ввод и клики по элементу
• Поле с disabled не попадёт в данные формы при отправке
• Полезно для временного отключения полей, кнопок и выпадающих списков
• Можно использовать с JavaScript, чтобы включать/выключать поля динамически.

Атрибут disabled помогает контролировать поведение формы и предотвращать действия пользователя в ненужный момент.

CodeBase | Frontend | #Основы

⚡️Text Illumination — Сцена с анимированным появлением текста.

Технологии: SVG и CSS

🔗 Ссылка

CodeBase | Frontend | #animate

⚙️ Что такое свойство white-space в CSS и зачем оно используется?

white-space — это CSS-свойство, которое управляет отображением пробелов и переносом строк внутри элемента. Оно определяет, как браузер будет обрабатывать пробелы, табуляции и переводы строк.

➡️ Пример:

<div class="text">
  Этот   текст  
  сохраняет    пробелы
  и переносы.
</div>

<style>
  .text {
    white-space: pre; /* Сохраняем пробелы и переносы */
    border: 1px solid black;
  }
</style>

🗣 В этом примере:

• white-space: normal; — пробелы схлопываются, текст переносится автоматически (значение по умолчанию).
• white-space: nowrap; — текст не переносится.
• white-space: pre; — сохраняются все пробелы и переносы, как в коде.

Это свойство полезно для оформления кода, вывода логов и управления форматированием текста.

CodeBase | Frontend | #CSS

🖥 Firefox против гигантов: битва за интернет

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

🔗 Ссылка

CodeBase | Frontend | #article

⚡️Animated Navigation List — Анимированный список с кнопками навигации.

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️Card Mouse Hover Effect — Карточки с интересным эффектом при наведении.

Технологии: CSS и JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate

✅ Имба: в сети обнаружили мегашпаргалку с самыми полезными нейросетями на все случаи жизни.

Сохраняем самое крутое:
🤩Claude 3.7 Sonnet — мастхев для программистов
🤩Same New — быстрая копия интерфейса сайта
🤩Openrouter — доступ ко всем ИИ
🤩Suno AI — своя музыка с нейросетью

Подпишись и находи для себя крутые нейросети бесплатно: https://t.me/+24HM3S2siv0zY2Vi

Матрица: когда бахнул сразу две капсулы

🤩 Я хочу стать программистом ©

Классика во всех смыслах

🤩 Я хочу стать программистом ©