Frontend Developer

Знакомьтесь, Алина Карашова - кандидат экономических наук, доцент, квалифицированный финансовый консультант, лектор общества «Знание», квалифицированный инвестор, более 6 лет в инвестициях У Алины авторский канал для тех, кто хочет углубиться в тему личных финансов и инвестиций В своем канале Алина: ➖комментирует важнейшие экономические события [Зачем подняли НДС?] ➖дает комментарии по наиболее важным инвестиционным инструментам и компаниям [Как инвестировать в доллары?] ➖ пишет про ловушки и лайфхаки поведенческих финансах, например, как накопить на отпуск незаметно для бюджета ➖ берет интервью у первых лиц ЦБ: только в этом году Алина беседовала Алексеем Заботкиным, директором департамента ДКП ЦБ Ганганом и даже задавала вопросы Набиулинной на пресс-конференции по ключевой Подписывайтесь, чтобы не пропустить 👇 https://t.me/investing_for_life

укп

Маленькие прописные буквы, или капитель, это особый стиль оформления текста. Они выглядят как прописные, но по высоте совпадают со строчными. Такой приём давно используется в типографике для выделения отдельных фрагментов и придания тексту выразительности. Это легко реализовать и в вебе, в CSS достаточно задать свойство font-variant-caps small-caps включает капитель только для строчных букв all-small-caps превращает в капитель и строчные, и прописные ➡️ @byFrontDeveloper

Держите классную находку для веб-разработчиков Cursor Effects это набор ретро-эффектов курсора с кучей вариаций. Бесплатно, open source, и встраивается в проект буквально за пару строк кода. Мгновенно добавляет сайту креатива и выделяет его среди остальных :) github.com/tholman/cursor-effects ➡️ @byFrontDeveloper

Знаете ли вы, что свойство align-content применяется к блочным элементам? Более того, вы можете использовать значение space-around, чтобы выровнять содержимое по вертикали Читайте эту статью, чтобы узнать, почему (и раскрыть еще больше тайн выравнивания) 🧀 ➡️ @byFrontDeveloper

Сохраняй себе 5 топовых тулз для веб-разработчиков Эти инструменты ускоряют работу, помогают писать чище и экономят время. Отличный набор, который стоит держать под рукой: SVG Flag Icons — nucleoapp.com/svg-flag-icons EmbedPDF — embedpdf.com FliiipBook — fliiipbook.com use-mcp — github.com/modelcontextprotocol/use-mcp DayPicker — daypicker.dev Пригодятся в любом проекте 🎵 ➡️ @byFrontDeveloper

Неожиданный лайфхак для разработчиков 🤯 Оказывается, любую страницу в браузере можно превратить в текстовый редактор одной строкой JavaScript:

document.designMode = "on";

Всё содержимое страницы становится редактируемым, режим можно включать и выключать в любой момент, работает во всех топовых браузерах — Chrome, Firefox, Safari, Edge. Удобная штука для быстрых мокапов, проверки идей по UI или просто чтобы пофаниться. Иногда самые мощные фичи годами лежат прямо на поверхности 🙂 ➡️ @byFrontDeveloper

Можно сделать UI чище, уменьшив или убрав скроллбары с помощью свойства scrollbar-width Пример тонкого скроллбара:

ul {
  scrollbar-width: thin;
}

Пример скрытого скроллбара (область остаётся скроллируемой):

.cards-container {
  scrollbar-width: none;
}

Подойдет под сайдбары, таблицы данных, чат-панели, дашборды с кучей скроллов, карусели, тач-интерфейсы. В итоге скролл работает, но UI выглядит аккуратнее. 🥺 ➡️ @byFrontDeveloper

Эволюция HTML в сторону меньшего количества JavaScript Атрибуты command позволяют вызывать методы DOM-элементов без написания JS-кода. Фича уже работает в Chrome и Edge, а скоро появится в Firefox и Safari. Теперь, чтобы открыть или закрыть модалку, достаточно всего пары строк HTML ❤️ ➡️ @byFrontDeveloper

Этот HTML-тег никто не использует, а он реально крутой ➡️ @byFrontDeveloper

Совет по CSS Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы. Это легко делается с помощью CSS-фильтров.

/* Для светлой темы */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* Для тёмной темы */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

➡️ @byFrontDeveloper

CSS в реальной жизни ➡️ @byFrontDeveloper

Набравший популярность лайфхак для GitHub Хочешь мгновенно получить документацию по любому репозиторию с помощью ИИ? Просто зайди в репо и в адресной строке замени github на deepwiki Через секунду у тебя будет готовая документация по проекту прямо в браузере. 😠 ➡️ @byFrontDeveloper

Фронт меняет font-size у текста кнопки. Клиент: ➡️ @byFrontDeveloper

OriginUI продолжает развиваться и становится все интереснее для разработчиков. Это библиотека React-компонентов с минималистичным дизайном и большим набором готовых решений, которые удобно сгруппированы по категориям и имеют разные вариации. Код можно сразу копировать и вставлять в проект, экономя часы на верстку и дизайн. 🙂 Попробовать: originui.com ➡️ @byFrontDeveloper

Когда вы знаете CSS, вы видите все по-другому. ➡️ @byFrontDeveloper

Библиотека face-api.js уже давно доступна и активно используется для распознавания лиц прямо в браузере. Она работает без сервера и позволяет определять лицо, возраст, пол и эмоции на JavaScript в реальном времени. Установка через npm:

npm i face-api.js

➡️ @byFrontDeveloper

Совет по CSS Цвет по умолчанию у чекбоксов и радиокнопок можно менять с помощью свойства accent-color ➡️ @byFrontDeveloper

Бесплатный AI-инструмент от Google только что навсегда изменил образование 🤯 Теперь в NotebookLM можно конвертировать любую статью или ссылку на документацию в полноценный видео-туториал. Раньше инструмент умел делать только текстовые конспекты и подкаст-стиль аудиоуроки из PDF, документов или ссылок. С новым обновлением он может за считанные секунды собирать структурированные видео-объяснения. В демо ниже превратили статью про JavaScript-функции на MDN в полный видео-обзор. И это только начало. Онлайн-образование станет намного доступнее и эффективнее :) ➡️ @byFrontDeveloper

Это один из лучших AI-инструментов для разработчиков 🔥 Он позволяет визуально генерировать полностью структурированные базы данных с помощью обычных текстовых запросов. Просто опиши, что тебе нужно, и он соберёт всё мгновенно. Таблицы, поля и связи создаются автоматически, экономя часы на ручной настройке. Отлично подходит для прототипов и MVP. Линк: database.build ➡️ @byFrontDeveloper