Как работает SVG ViewBox
Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.
Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case
https://svg.bradwoods.io/lessons/viewbox
CodeBase | Frontend | #animate
Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.
Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case
https://svg.bradwoods.io/lessons/viewbox
CodeBase | Frontend | #animate
👍2
Свойство
backdrop-filter применяет визуальные эффекты к фону за элементом, а не к самому элементу.Чаще всего используется для blur-эффекта в модальных окнах и стеклянных интерфейсах
<div class="card">Контент</div>
<style>
body {
background: url(bg.jpg) no-repeat center / cover;
}
.card {
width: 300px;
padding: 20px;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
}
</style>
•
blur() — размытие•
brightness() — яркость•
contrast() — контраст•
saturate() — насыщенностьbackdrop-filter позволяет создавать современные UI-эффекты без изображений и JS, но требует полупрозрачного фона и поддержки браузером
CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2
Метод
includes() проверяет, содержится ли элемент в массиве.Возвращает true или false и не изменяет исходный массив
Метод includes() в JavaScript и как он используется
Метод includes() проверяет, содержится ли элемент в массиве.
Возвращает true или false и не изменяет исходный массив
•
includes() выполняет проверку на наличие значения• Работает корректно с примитивами (
string, number, boolean)• Читабельнее и безопаснее, чем
indexOf() !== -1includes() — простой и выразительный способ писать понятные проверки без лишней логики
CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
Как frontend-разработчику вырасти в ЗП?
День сурка frontend-разработчика выглядит так
Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов
Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».
И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.
Реклама, erid: 2W5zFGhsAzd ИП Галактионов Тихон Витальевич, ИНН 771618975809
День сурка frontend-разработчика выглядит так
Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов
Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».
И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...
Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.
Реклама, erid: 2W5zFGhsAzd ИП Галактионов Тихон Витальевич, ИНН 771618975809
Forwarded from Ленивый вайб-программист
This media is not supported in your browser
VIEW IN TELEGRAM
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
😁5
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7😁3❤1
Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS.
CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1🔥1
<noscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.Пример:
<noscript>
<p>Please enable JavaScript to use this website.</p>
</noscript>
- Контент внутри
<noscript> отображается только при отключенном JavaScript.- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.
CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
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
❤3