CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
infosec - это один из самых ламповых каналов по информационной безопасности, где говорят об истории ИТ, публикуют актуальные новости и пишут технический материал на разные темы:

- Что из себя представляет официально взломанный iPhone от Apple?
- К чему могла привести опечатка в инфраструктуре платёжной системы MasterCard?
- Авторский материал для ИБ специалистов с закрытого хакерского форума XSS;
- Бесплатный бот, который проверит файлы на предмет угроз более чем 70 антивирусами одновременно.

А еще у нас часто проходят розыгрыши самых актуальных и новых книг для ИБ специалистов. Так что присоединяйся, у нас интересно!
🔥32👏2
⚙️ Что такое атрибут aria-hidden в HTML и зачем он используется?

Атрибут aria-hidden используется для управления доступностью элементов на веб-странице. Он скрывает элемент от экранных читалок, но не влияет на его видимость для пользователей.

➡️ Пример:

<!-- Иконка, не нужная для экранных читалок -->
<span aria-hidden="true">🔔</span>

<!-- Видимый, но скрытый от читалок текст -->
<p aria-hidden="true">Этот текст будет проигнорирован</p>


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

aria-hidden="true" предотвращает озвучивание декоративных элементов.
• Используется для скрытия дублирующегося контента, например, иконок, дублирующих текст.
• Улучшает доступность и делает сайты более удобными для пользователей с ограниченными возможностями.

Атрибут aria-hidden помогает создавать семантически корректные интерфейсы, соответствующие стандартам Web Accessibility (WCAG).


CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2👌2
⚙️ Что такое свойство visibility в CSS и зачем оно используется?

visibility — это CSS-свойство, которое управляет видимостью элемента, но при этом не удаляет его из документа. Оно позволяет скрывать элементы без изменения их занимаемого пространства.

➡️ Пример:

<div class="box">Этот блок всегда виден</div>
<div class="box hidden">А этот скрыт, но занимает место</div>

<style>
.box {
width: 200px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}

.hidden {
visibility: hidden; /* Элемент становится невидимым, но остаётся на месте */
}
</style>


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

visibility: hidden; скрывает элемент, но он по-прежнему занимает место в разметке.
display: none; убирает элемент полностью (в отличие от visibility).

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

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍83🔥2
👩‍💻 Что такое метод padStart() в JavaScript и как он используется?

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

➡️ Пример:

const num = "7";

// Дополняем до двух символов нулями
console.log(num.padStart(2, "0")); // "07"

// Выравнивание текста
console.log("JS".padStart(5, "-")); // "--JS"


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

padStart(2, "0") превращает "7" в "07", полезно для форматирования чисел.
padStart(5, "-") добавляет символы до нужной длины.

CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥42
Лови!

Тут полезные факты про AI с легкой подачей, свежие новости Tech и около айтишных тематик

Если тебе хочется каждый день получать выжимку, что происходит важного в мире ИИ и Tech, а так же, потратив всего 2 минуты в день - узнать 90% из мира AI - залетай!

telegram: That's IT
3👍2🔥2💩1
💐 Какое счастье, что именно в начале весны, когда всё расцветает и начинает наполняться жизненной силой, мы можем поздравить вас с женским праздником очарования, красоты и женственности — Днём 8 Марта!
Никто, кроме женщины, не сможет почувствовать всю глубину и многогранную палитру возрождения природы. Только ей дoступно сакральное понимание любви, из которой рождается новая жизнь, созидается доброта и изобилие, раскрываются все человеческие ресурсы. Сияйте, наслаждайтесь каждым мгновением жизни, наполняйте себя и всех вокруг светом, теплом и благодатью.

CodeBase | Frontend |
5👍3🔥2
⚙️ Что такое атрибут role в HTML и зачем он используется?

Атрибут role используется для улучшения доступности веб-страниц. Он сообщает вспомогательным технологиям (например, экранным читалкам), какую функцию выполняет элемент.

➡️ Пример:

<!-- Обозначение навигационного меню -->
<nav role="navigation">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>

<!-- Определение элемента как диалогового окна -->
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Подтвердите действие</h2>
<button>ОК</button>
</div>


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

role="navigation" помогает читалкам распознавать меню.
role="dialog" делает <div> доступным как модальное окно.

CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥2
Пройдите тест из вселенной Назад в будущее 

Проверьте себя: попробуйте спасти мир и стать DevOps всех времён.
7 вопросов для инженеров и девопс инженеров.

🚀 Пройти тест в боте

Всем участникам скидка на курсы Слёрма.
Эффективный TypeScript

Автор: Вандеркам Д.
Год: 2025
Язык: Русский

Способен ли TypeScript устранить проблемы, которыми так знаменит JavaScript? Да, но его изучение потребует определенных усилий, времени и практики.
Эти правила позволят ускорить и облегчить знакомство с TypeScript. Каждое правило — это конкретная рекомендация, рассказывающая на примерах, что можно и чего нельзя делать в TypeScript и как грамотно работать с этим языком. Эта книга поможет подняться с уровня начинающего или среднего пользователя, знакомого с основами TypeScript, на уровень TS-эксперта, который может профессионально работать с этим языком.
Второе издание было обновлено для TypeScript 5 и включает две новые главы, посвященные программированию на уровне типов и рецептам TypeScript.


#ru #TypeScript

CodeBase | Frontend | #book
👍7🥰3👏2
⚙️ Что такое свойство pointer-events в CSS и зачем оно используется?

pointer-events — это CSS-свойство, которое управляет тем, может ли элемент реагировать на клики, наведение и другие события мыши. Оно позволяет делать элементы "прозрачными" для взаимодействия пользователя.

➡️ Пример:

<button class="disabled-btn">Нажми меня</button>

<style>
.disabled-btn {
background-color: gray;
color: white;
pointer-events: none; /* Элемент игнорирует клики */
cursor: not-allowed;
}
</style>


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

pointer-events: none; делает кнопку некликабельной, но оставляет её видимой.
• Это удобно для отключения кнопок, слоёв с анимацией или создания "сквозных" элементов.
• Значение pointer-events: auto; возвращает стандартное поведение.

Свойство pointer-events полезно для дизайна UI, управления интерактивностью и создания анимаций.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍72🔥2
🔍 IT без багов не бывает, но с ними можно жить!
Вы тестировщик, разработчик или просто любите IT? Тогда добро пожаловать в I’m QA, bitch! — канал, который понимает вашу боль.
💥 Что вас ждёт?
Мемы про баги — потому что без смеха в этой профессии не выжить.
Разборы эпичных фейлов — учимся на чужих (и своих) ошибках.
Советы по тестированию — делаем софт стабильнее, а нервы крепче.
Руководство по выживанию в IT — дедлайны, релизы, багрепорты без истерики.
👀 Почему стоит подписаться?
🔸 “Не воспроизводится” — худший ответ на багрепорт, и это здесь понимают.
🔸 Канал поможет стать тем QA, которому доверяют.
🔸 Любовь к IT — с мемами, лайфхаками и порцией иронии в каждом посте.
🔥 Подписывайтесь сейчас — и будьте тем, кто находит баги, а не тем, кто их делает!
👉 Подписаться 
P.S. Если не подпишетесь, следующая ошибка в продакшн будет на вашей совести. 😏
2🥴1
Паттерны проектирования JavaScript

Год: 2025
Автор: Ди Франческо Уго
Язык: Русский

Раскройте потенциал паттернов проектирования jаvascript. Найдите структурированные решения распространенных задач разработки, пригодные для многократного использования и повышающие масштабируемость, производительность и удобство сопровождения кода. Узнайте, как применение этих паттернов позволяет создавать более чистый и понятный код, способствует организации совместной работы в команде, сокращает количество ошибок и экономит время и силы. Автор дает исчерпывающее представление о паттернах проектирования в современном jаvascript (ES6+) и приводит практические примеры их применения. Сначала вы познакомитесь с порождающими, структурными и поведенческими паттернами проектирования в идиоматическом для jаvascript стиле, а затем переключитесь на архитектурные паттерны и паттерны пользовательского интерфейса. Вы узнаете, как применять паттерны, характерные для таких библиотек, как React, и распространять их на фронтенд и микрофронтенд. В последней части книги представлены и проиллюстрированы паттерны улучшения производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны высокопроизводительных асинхронных вычислений.


#ru #JavaScript

CodeBase | Frontend | #book
👍31🔥1
HTML and CSS

Год: 2023
Автор: Kumar T
Язык: Английский


Веб―разработчики - это ваше универсальное руководство по HTML и CSS! Научитесь использовать HTML для форматирования текста и структурирования веб-страниц. Разберитесь со структурой HTML-документа, прежде чем создавать формы, ссылаться на гиперссылки, встраивать активный контент и многое другое. Затем оформляйте свои страницы с помощью CSS: создавайте согласованные дизайны с помощью селекторов, модели box, каскадного алгоритма и наследования. Дополните свой опыт разработки на стороне клиента знакомством с JavaScript. С подробными примерами кода вы освоите HTML и CSS в кратчайшие сроки!
Ваше полное руководство по HTML5 и CSS3



#en #HTML #CSS

CodeBase | Frontend | #book
👍42👏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
👍73
🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

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

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

🔗 ссылка

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
👍62🔥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
👍75👏2
Дронов_В_А_HTML_и_CSS_25_уроков_для_начинающих_2020.pdf
7.2 MB
HTML и CSS. 25 уроков для начинающих

Год: 2020
Автор: Дронов В. А.
Язык: Русский

В книге 25 иллюстрированных уроков, 100 практических упражнений на тему разработки простых веб-сайтов и более 50 заданий для самостоятельной работы. Дано введение в веб-разработку, раскрыты основы HTML, CSS и работы в WWW. Объяснено, как с помощью HTML структурировать и форматировать текст, работать с графикой и мультимедиа, таблицами, гиперссылками, веб-формами, фреймами и метаданными. Рассказано, как средствами CSS оформлять веб-страницы, использовать блоки, списки и таблицы, изображения и гиперссылки, элементы управления, фон и колонки, располагать, выводить и скрывать элементы, делать макеты веб-страниц, выполнять преобразования, анимацию, медиазапросы и др.
Электронное приложение-архив на сайте издательства содержит коды всех примеров и пяти учебных веб-сайтов.


#RU #CSS #HTML

CodeBase | Frontend | #book
👍4🔥4👏2