CodeBase | Frontend
2.13K subscribers
361 photos
128 videos
2 files
520 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

🌟 Изучите шаг за шагом, как создать современный веб-макет с помощью HTML и CSS. Идеально подходит для новичков, желающих развить практические навыки в веб-разработке!

🕞 Продолжительность: 4:00:18

🔗 Ссылка

CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Работать и не уставать, достигать цели, но делать это в кайф - реально!
Как научиться делать дела и не выгорать?

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

▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?

Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!

👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️light/dark mode — Стильное переключение темной темы с анимацией.

Технологии: Pug, SCSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Почти Ванильный Фронтэнд

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

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое метод 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Какой стул с багами выберешь ты?

CodeBase | Frontend | #meme
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Weather Widgets — Анимированный виджет погоды.

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
Интересная расшифровка

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

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

➡️ Пример:

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


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

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

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

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Text Illumination — Сцена с анимированным появлением текста.

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Что такое свойство 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Firefox против гигантов: битва за интернет

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

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Animated Navigation List — Анимированный список с кнопками навигации.

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Card Mouse Hover Effect — Карточки с интересным эффектом при наведении.

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
Имба: в сети обнаружили мегашпаргалку с самыми полезными нейросетями на все случаи жизни.

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

Подпишись и находи для себя крутые нейросети бесплатно: https://t.me/+24HM3S2siv0zY2Vi
Please open Telegram to view this post
VIEW IN TELEGRAM