Google и Yandex SEO оптимизация для SPA приложений

Google и Yandex SEO оптимизация для SPA приложений

Google и Yandex утверждают, что что-то уже могут по индексированию SPA приложений. В статье показаны результаты проведенного эксперимента по индексации чистого SPA вебсайта. Результат: Google - хорошо, Yandex - не очень Читать далее

Подробнее
[Перевод] Atomic CSS здорового человека. UnoCSS

[Перевод] Atomic CSS здорового человека. UnoCSS

Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS. Читать далее

Подробнее
[Перевод] Atomic CSS здорового человека

[Перевод] Atomic CSS здорового человека

Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS Что такое Atomic CSS? Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека: > Атомарный CSS — это подход к архитектуре CSS, при котором предпочтение отдается небольшим, одноцелевым классам с именами, основанными на визуальной функции. Читать далее

Подробнее
Интересные трюки HTML. Экстремальный минимализм

Интересные трюки HTML. Экстремальный минимализм

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

Подробнее
Сокровища HTML: 7 тегов, которые упростят вам жизнь

Сокровища HTML: 7 тегов, которые упростят вам жизнь

Все мы знакомы с широко используемыми HTML тегами, такими как , , , и . Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :) Читать далее

Подробнее
Как наложить макет на вёрстку через PerfectPixel

Как наложить макет на вёрстку через PerfectPixel

Привет! Меня зовут Сергей Криворучко, я работаю наставником на курсе «Фронтенд-разработчик» в Практикуме. Иногда у студентов возникают сложности с PerfectPixel — расширением Chrome, совмещающим макет из Figma с вёрсткой в браузере. В этом материале я расскажу, как корректно экспортировать макет, установить PerfectPixel, управлять расширением и находить элементы страницы, которые стоит поправить на вёрстке. Для примера взял макет, с которым работают студенты на курсе. Читать далее

Подробнее
[Перевод] Использование Content-Security-Policy вместе с React & Emotion

[Перевод] Использование Content-Security-Policy вместе с React & Emotion

Content-Security-Policy (CSP) - это HTTP заголовок, который улучшает безопасность веб-приложений за счет запрета небезопасных действий, таких как загрузка и отправка данных на произвольные домены, использование eval, inline-скриптов и т.д. В этой статье будет сделан фокус на директиве style-src и ее использование вместе с CSS-in-JS библиотекой emotion. Читать далее

Подробнее
[Перевод] Что нового в Chrome 119?

[Перевод] Что нового в Chrome 119?

Начиная с Chrome 104 для вновь созданных или обновленных файлов cookie с указанием даты истечения срока действия действует ограничение - не более 400 дней. Теперь это ограничение будет применено к уже хранящимся файлам cookie задним числом. После первого запуска Chrome 119+ и однократного переноса базы данных срок действия этих файлов будет ограничен до 400 дней. Влияние этого изменения пользователи смогут ощутить не ранее чем через 400 дней после выхода Chrome 119, и то только для…

Подробнее
Как я создал проходную

Как я создал проходную

Будучи являясь студентом, нам предложили поучаствовать в одной программе. В данной программе нам преподавали курсы из различных областей, как бизнеса, так и программирования. Вот некоторые из них: «Основы.NET и знакомство с платформой разработки веб‑приложений», «Азы программирования на основе 1С», «HTML и CSS», «Навыки работы с системой управления версиями Git», «Javascript». По прохождению всех курсов, мы должны были показать, чему мы научились, поэтому нам заранее предложили направления

Подробнее
[Перевод] Наклонные края с постоянным углом в CSS

[Перевод] Наклонные края с постоянным углом в CSS

Данный материал – перевод статьи "Sloped edges with consistent angle in CSS" Килиана Валхофа. Мне, как начинающему forntend-разработчику, этот материал был интересен. Полагаю, эта статья будет полезна и другим начинающим или обучающимся фронтендерам. Читать далее

Подробнее
«Нейрогород»: игра на знание JavaScript про фронтендерские баги

«Нейрогород»: игра на знание JavaScript про фронтендерские баги

Нейроград — первый виртуальный мегаполис, в который вот-вот прибудут пользователи. Но есть проблема — кто-то испортил внешний облик города. Целевая атака? Козни тайного врага? Выясните, кто стоит за этим! А заодно — устраните все баги, обращая внимание на любые странные и необычные явления во внешнем облике города. Читать дальше →

Подробнее
[Перевод] Вышел Chrome 118

[Перевод] Вышел Chrome 118

CSS @scope. Правило @scope at-rule позволяет разработчикам распространять правила стилей на заданный корень описания и стилизовать элементы в соответствии с близостью к этому корню. С помощью @scope можно отменять стили, основанные на близости, что отличается от обычных стилей CSS, которые применяются только на основе порядка и специфики источника. В следующем примере имеется две темы. Читать далее

Подробнее