✈️ Code Ready | Frontend
Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready
Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться;
• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит;
• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки;
• статус-страница на отдельном хостинге/CDN.
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready
✈️ Code Ready | Frontend
Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
📣 Code Ready | #статья
Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;• Рассказывается, как построить и отладить автоматический конвейер наполнения, который после настройки генерирует около 14 000 страниц в неделю;🔊 Продолжайте читать на Habr!
📣 Code Ready | #статья
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
🖥 Note-taking Mobile iOS App – дизайн приложения для заметок. Его особенности - это неяркие светлые тона, кремовый фон и скругленные углы.
Сайтодел | #макет #figma
✈️ Code Ready | Frontend
Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security
Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Code Ready | Frontend
🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
📣 Code Ready | #репозиторий
🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Smoothie Bowl Transition Prototype – прототип для анимации с вращающимися тарелками. Во вкладке "design" есть разные варианты цветового оформления страницы.
Сайтодел | #макет #figma
🖥 Smoothie Bowl Transition Prototype – прототип для анимации с вращающимися тарелками. Во вкладке "design" есть разные варианты цветового оформления страницы.
Сайтодел | #макет #figma
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🎨 Цветовая палитра макета "Gradients WebSite Template":
Сайтодел | #палитра
🎨 Цветовая палитра макета "Gradients WebSite Template":
HEX | RGB #EC6E9B | rgb(236,110,155)#F3A042 | rgb(243,160,66)#27438C | rgb(39,67,140)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
💾 Skeuomorphic Toggle Switch – реалистичные 3D-переключатели, которые написаны на HTML и CSS без использования JavaScript.
Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
💾 Header Navigation Menu – кнопка с раскрывающимся меню сайта. Ее иконка трансформируется в крестик с помощью вращения ее элементов вокруг центра.
Сайтодел | #сниппет #css
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.
Сайтодел | #макет #figma
🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.
Сайтодел | #макет #figma
✈️ Сайтодел | GitHub, Верстка, Сайты, FullStack
💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.
Сайтодел | #сниппет #css
💾 Hover Effect for Headers – восемь анимированных эффектов для заголовков слайдов. Некоторые из них влияют на отдельные буквы, а некоторые – на всё слово.
Сайтодел | #сниппет #css