Паттерны проектирования JavaScript
Год: 2025
Автор: Ди Франческо Уго
Язык: Русский
#ru #JavaScript
CodeBase | Frontend | #book
Год: 2025
Автор: Ди Франческо Уго
Язык: Русский
Раскройте потенциал паттернов проектирования jаvascript. Найдите структурированные решения распространенных задач разработки, пригодные для многократного использования и повышающие масштабируемость, производительность и удобство сопровождения кода. Узнайте, как применение этих паттернов позволяет создавать более чистый и понятный код, способствует организации совместной работы в команде, сокращает количество ошибок и экономит время и силы. Автор дает исчерпывающее представление о паттернах проектирования в современном jаvascript (ES6+) и приводит практические примеры их применения. Сначала вы познакомитесь с порождающими, структурными и поведенческими паттернами проектирования в идиоматическом для jаvascript стиле, а затем переключитесь на архитектурные паттерны и паттерны пользовательского интерфейса. Вы узнаете, как применять паттерны, характерные для таких библиотек, как React, и распространять их на фронтенд и микрофронтенд. В последней части книги представлены и проиллюстрированы паттерны улучшения производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны высокопроизводительных асинхронных вычислений.
#ru #JavaScript
CodeBase | Frontend | #book
👍3❤1🔥1
HTML and CSS
Год: 2023
Автор: Kumar T
Язык: Английский
#en #HTML #CSS
CodeBase | Frontend | #book
Год: 2023
Автор: Kumar T
Язык: Английский
Веб―разработчики - это ваше универсальное руководство по HTML и CSS! Научитесь использовать HTML для форматирования текста и структурирования веб-страниц. Разберитесь со структурой HTML-документа, прежде чем создавать формы, ссылаться на гиперссылки, встраивать активный контент и многое другое. Затем оформляйте свои страницы с помощью CSS: создавайте согласованные дизайны с помощью селекторов, модели box, каскадного алгоритма и наследования. Дополните свой опыт разработки на стороне клиента знакомством с JavaScript. С подробными примерами кода вы освоите HTML и CSS в кратчайшие сроки!
Ваше полное руководство по HTML5 и CSS3
#en #HTML #CSS
CodeBase | Frontend | #book
👍4✍2👏2
trim() в JavaScript и как он используется?trim() — это метод строк в JavaScript, который удаляет пробелы и скрытые символы (переводы строк, табуляции) в начале и конце строки. Это полезно при обработке пользовательского ввода и очистке данных.const text = " Привет, мир! ";
console.log(text.trim()); // "Привет, мир!"
console.log(text.trimStart()); // "Привет, мир! "
console.log(text.trimEnd()); // " Привет, мир!"
•
trim() удаляет пробелы с обеих сторон строки.•
trimStart() — удаляет только в начале, trimEnd() — только в конце.CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤3
🔗 ссылка
CodeBase | Frontend | #CSS #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
tabindex в HTML и зачем он используется?Атрибут
tabindex управляет порядком перехода по элементам с клавиатуры (с помощью Tab). Это важно для удобства навигации и доступности веб-страниц.<button tabindex="2">Кнопка 2</button>
<button tabindex="1">Кнопка 1</button>
<button tabindex="3">Кнопка 3</button>
•
tabindex="0" делает элемент доступным для Tab по умолчанию.•
tabindex="-1" исключает элемент из последовательности табуляции, но сохраняет фокусируемость через JavaScript.•
tabindex="1" (и выше) изменяет порядок фокуса, но злоупотреблять этим не стоит — лучше использовать естественный порядок DOM.Правильное использование
tabindex улучшает доступность и удобство навигации для всех пользователейCodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥2
user-select в CSS и зачем оно используется?user-select — это CSS-свойство, которое управляет возможностью выделения текста пользователем. Оно полезно для защиты контента от копирования или улучшения UX в интерфейсах.<p class="no-select">Этот текст нельзя выделить.</p>
<style>
.no-select {
user-select: none; /* Запрещает выделение текста */
}
</style>
•
user-select: none; запрещает выделение текста пользователем.•
user-select: all; позволяет выделять весь текст при клике.•
user-select: text; (по умолчанию) разрешает выделение.Свойство
user-select удобно для защиты контента, предотвращения случайного выделения и улучшения взаимодействия с пользователем.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7✍5👏2
Дронов_В_А_HTML_и_CSS_25_уроков_для_начинающих_2020.pdf
7.2 MB
HTML и CSS. 25 уроков для начинающих
Год: 2020
Автор: Дронов В. А.
Язык: Русский
#RU #CSS #HTML
CodeBase | Frontend | #book
Год: 2020
Автор: Дронов В. А.
Язык: Русский
В книге 25 иллюстрированных уроков, 100 практических упражнений на тему разработки простых веб-сайтов и более 50 заданий для самостоятельной работы. Дано введение в веб-разработку, раскрыты основы HTML, CSS и работы в WWW. Объяснено, как с помощью HTML структурировать и форматировать текст, работать с графикой и мультимедиа, таблицами, гиперссылками, веб-формами, фреймами и метаданными. Рассказано, как средствами CSS оформлять веб-страницы, использовать блоки, списки и таблицы, изображения и гиперссылки, элементы управления, фон и колонки, располагать, выводить и скрывать элементы, делать макеты веб-страниц, выполнять преобразования, анимацию, медиазапросы и др.
Электронное приложение-архив на сайте издательства содержит коды всех примеров и пяти учебных веб-сайтов.
#RU #CSS #HTML
CodeBase | Frontend | #book
👍4🔥4👏2
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
👍7🔥3❤2
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
👍9❤3
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
👍9🔥4✍1
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
👍9🔥2
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
👍8
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
👍5❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁11👍1
object-position в CSS и зачем оно используется?
object-positionobject-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
👍7