CodeBase | Frontend
2.03K subscribers
488 photos
224 videos
4 files
795 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
Как работает 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
👍2
⚙️ Что такое свойство backdrop-filter в CSS и зачем оно используется?

Свойство 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
👍42
👩‍💻 Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.

Возвращает true или false и не изменяет исходный массив


➡️ Пример:

Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.
Возвращает true или false и не изменяет исходный массив


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

includes() выполняет проверку на наличие значения
• Работает корректно с примитивами (string, number, boolean)
• Читабельнее и безопаснее, чем indexOf() !== -1

includes() — простой и выразительный способ писать понятные проверки без лишней логики


CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥1
Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.


👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFGhsAzd ИП Галактионов Тихон Витальевич, ИНН 771618975809
This media is not supported in your browser
VIEW IN TELEGRAM
Вот что происходит, когда просишь ИИ отцентрировать div

CodeBase | Frontend | #meme
😁81🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
В случае, если долго грузится пост или видео, рассмотрите, пожалуйста, возможность перейти в МАХ
😁5
This media is not supported in your browser
VIEW IN TELEGRAM
Найдена идеальная анимация для загрузочного экрана 🤔

CodeBase | Frontend | #meme
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7😁31
🖥 Этот CSS пора оставить в прошлом

Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥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