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

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
А там еще и комментов нет...

CodeBase | Frontend
| #meme
This media is not supported in your browser
VIEW IN TELEGRAM
Бэкендер пытается центрировать <div>

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

Атрибут required используется в формах HTML для обозначения обязательных полей. Он предотвращает отправку формы, если поле не заполнено, и помогает валидировать данные без JavaScript.

➡️ Пример:

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


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

required указывает браузеру, что поле не должно быть пустым.
• Работает без JavaScript, улучшая поведение форм "из коробки".
• Показывает встроенные ошибки валидации, улучшая UX.
• Часто используется вместе с другими атрибутами: type, pattern, minlength.

Атрибут required — это простой и надёжный способ сделать формы интерактивнее и безопаснее.

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
Сделай правильный выбор!

CodeBase | Frontend | #meme
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Fluid Simulation - cцена с интересной симуляцией жидкости с текстом CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Надизайнил теперь все это кодить 🫠

CodeBase | Frontend | #meme
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Что такое свойство object-position в CSS и зачем оно используется?

object-position
— это CSS-свойство, которое управляет положением содержимого внутри элемента, например, изображения или видео, особенно когда используется object-fit для обрезки.

➡️ Пример:

<img src="image.jpg" class="preview" alt="Пример изображения">

<style>
.preview {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top right; /* Смещаем фокус к верхнему правому углу */
}
</style>


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

object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.
object-position: top right; указывает, какую часть изображения показывать в приоритете.
• Можно использовать значения вроде center, bottom, 20% 80% и др.

Свойство object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN 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