repeat()
в JavaScript и как он используется?repeat()
— это метод строк в JavaScript, который позволяет повторить строку указанное количество раз. Он полезен для форматирования вывода, создания шаблонов и генерации текстовых данных.const text = "JS ";
// Повторяем строку 3 раза
console.log(text.repeat(3)); // "JS JS JS"
// Создаём разделитель
console.log("-".repeat(10)); // "----------"
•
repeat(3)
повторяет строку три раза, объединяя их в одну строку.•
repeat(10)
создаёт разделитель из 10 символов -.CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
autocomplete
в HTML и зачем он используется?Атрибут
autocomplete
управляет автозаполнением форм в браузере. Он позволяет указывать, должны ли поля формы предлагать сохранённые данные (например, логины, адреса, номера карт), тем самым ускоряя ввод для пользователей.<form autocomplete="on">
<label>
Имя:
<input type="text" name="name" autocomplete="name">
</label>
<label>
Email:
<input type="email" name="email" autocomplete="email">
</label>
</form>
•
autocomplete="on"
— включает автозаполнение (по умолчанию).•
autocomplete="off"
— отключает его для конкретного поля или всей формы.• Можно указать тип данных (
email
, name
, street-address
и т. д.) для более точной подстановки.• Улучшает UX, особенно при повторном заполнении форм.
Грамотное использование
autocomplete
делает формы более быстрыми и удобными для пользователей.CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
aspect-ratio
в CSS и зачем оно используется?
aspect-ratio
— это CSS-свойство, которое позволяет задавать соотношение сторон элемента (ширина к высоте). Оно особенно полезно для адаптивной верстки, когда нужно сохранить форму элемента независимо от содержимого или экрана.<div class="box"></div>
<style>
.box {
width: 100%;
aspect-ratio: 16 / 9; /* Соотношение 16:9 */
background-color: lightblue;
}
</style>
•
aspect-ratio: 16 / 9;
заставляет элемент сохранять форму прямоугольника с шириной в 16 единиц и высотой в 9.• Это особенно удобно для видео, изображений, контейнеров с неизвестной высотой.
• Работает без необходимости использовать
padding-hack
или JavaScript.Свойство
aspect-ratio
делает вёрстку проще и адаптивнее без дополнительных обёрток и расчётов.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
slice()
в JavaScript и как он используется?slice()
— это метод массивов и строк в JavaScript, который возвращает копию части массива или строки без изменения оригинала. Он полезен для обрезки, копирования и извлечения подмножеств данных.const arr = [10, 20, 30, 40, 50];
console.log(arr.slice(1, 4)); // [20, 30, 40]
const str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"
•
slice(1, 4)
возвращает элементы с индексом 1 по 3 включительно (4 не включается).•
slice(0, 4)
возвращает первые 4 символа строки.• Метод не мутирует оригинальные данные, что делает его безопасным при работе с копиями.
CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
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
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #js #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
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
CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Работать и не уставать, достигать цели, но делать это в кайф - реально!
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
Как научиться делать дела и не выгорать?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: 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