Зачем размещают статический контент на отдельные домены?

Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
- CSS, JavaScript
- Изображения, видео
- Шрифты, иконки

Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.

Зачем использовать отдельные домены для статики?

Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее

Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.

Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру

Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик

Как настроить отдельный домен для статики?

Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com

Настроить веб-сервер или CDN
Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

👉 @seniorFront

Lowpoly holy space cow

Это SVG картинка, анимированная в JS.

👉 @seniorFront

​КАША в голове, КАША в коде — как навести порядок

Новички в программировании часто ныряют в сложные проекты, вдохновившись успехами других. Но без фундамента — это дорога к хаосу. Вот 7 советов, чтобы не сгореть на старте:

Фундамент важнее фасада
Сначала разберись в основах, а потом строй "свой Instagram". Без понимания основ твой код — декорация, которая рухнет на первом вопросе.

Пиши понятный код
Назови переменные так, чтобы через неделю не гадать, что делает doIt(). Простые имена и структура спасут нервы тебе и коллегам.

Не зубри, а ищи
Не пытайся запомнить всё. Знай, что инструмент существует, и умей его найти (Google/ИИ в помощь).

Копипаст — не грех
Гуглить и копировать — норм. Главное, учись задавать вопросы чётко, а не "у меня не работает".

Уточняй проблему
Не понимаешь код? Разбей проблему на части: что именно неясно? Назови проблему — и половина уже решена.

Простота > сложность
Сложные имена и конструкции не делают код умнее. Делай понятно, читабельно и без лишних заморочек.

Экспериментируй
Первое решение — не всегда лучшее. Пробуй разные подходы, сравнивай, учись. Пока учишься, ошибаться не страшно.

Итог: строй фундамент, пиши просто, не бойся гуглить и экспериментировать. Тогда каша в голове превратится в порядок!

👉 @seniorFront

Роль СТО: как из разработчика вырасти в технологического лидера

В этом посте я поделюсь своим видением эволюции технического лидера команды до CTO крупного подразделения, про возникавшие на моем пути вызовы и постараюсь сформулировать практические советы, которые помогли мне с ними справляться. Надеюсь, они будут полезны и вам.

👉 @seniorFront

Get lost into space

Сцена создана и анимирована при помощи библиотеки Three.js

👉 @seniorFront

CSS Card Hover Effects

В этом видео создаются карточки с 3D эффектом переворота при наведении на HTML и CSS.

👉 @seniorFront

Pov: выдал джуну задачу и наблюдаешь за работой

👉 @seniorFront

Space Junk preloader

Оригинальный загрузчик, реализованный на HTML и CSS. Анимирован библиотекой TweenMax.

👉 @seniorFront

One Page sliding Nav

Навигационное меню, реализованное с использованием препроцессоров Pug и Stylus.

👉 @seniorFront

Wavy Shape Card

В этом видео создается карточка с границей в форме волны на чистом CSS

👉 @seniorFront

Wow Winter Blanket

Реализовано с использованием библиотеки Three.js

👉 @seniorFront

Сравнение строк

Напишите функцию, которая проверяет, может ли строка быть воссоздана с использованием символов двух других строк.

Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки

Функция не должна быть чувствительна к регистрам, а также должна использовать все символы из строк.

Примеры:

isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false

👉 @seniorFront

Техники антипродуктивности

К чёрту продуктивность.

Лично я более 10 лет варился в супе техник продуктивности и борьбы с прокрастинацией, многое что пробовал. Искал ту технику, которая будет подходить лично мне. Ведь, кажется, что надо найти тот подход, который сработает для тебя. И тогда ты вдруг станешь успевать делать больше дел в срок.

Но это не так, и в этой статье я попробую донести смысл того, как действительно делать больше, не становясь более продуктивным.

👉 @seniorFront

​Как можно работать с датами в js?

В JavaScript для работы с датами можно использовать:

- Date – встроенный объект
- Библиотеку Intl.DateTimeFormat – для форматирования
- Библиотеки (moment.js, date-fns, luxon) – для удобной работы

Встроенный объект `Date`
Создание даты

const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z

Способы создания даты

new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)

Получение значений

const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth());    // 1 (февраль, потому что январь — 0)
console.log(date.getDate());     // 25
console.log(date.getDay());      // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours());    // Часы
console.log(date.getMinutes());  // Минуты
console.log(date.getSeconds());  // Секунды
console.log(date.getTime());     // Время в миллисекундах (Unix timestamp)

Изменение даты

const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030

Форматирование даты

const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString());  // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString());  // "Tue, 25 Feb 2025 12:34:56 GMT"

Форматирование с Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."

Библиотеки (более удобные способы)
date-fns (легковесная альтернатива Moment.js)

npm install date-fns

import { format, addDays } from "date-fns";

const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней

moment.js (устаревший, но популярный)

npm install moment

import moment from "moment";

const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней

luxon (современная альтернатива Moment.js)

npm install luxon

import { DateTime } from "luxon";

const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней

Разница между датами

const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");

const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)

👉 @seniorFront

Canvas Loader

Реализовано на canvas и чистом JS.

👉 @seniorFront

Почему найти работу в 2025 году стало почти невозможно?

Раньше поиск работы был прост: обновил резюме, откликнулся на вакансии, прошёл пару собеседований — и вот оффер. Больше откликов — больше шансов. Но в 2025 году это уже квест на выживание. Требуют 5 лет опыта, возраст до 30, навыки работы за троих, знание нейросетей и TypeScript, готовность к стрессу и KPI без чёткого ТЗ. Найти работу стало не просто сложно — почти нереально. Разбираемся, почему.

"Низкая безработица" — миф?
Росстат рапортует: безработица на уровне 2,4% — исторический минимум. Но реальность другая. На hh.ru в мае 2025 вакансий на 28% меньше, чем в 2024, а резюме — на 29% больше. На одну позицию разработчика — 100–500 откликов. HR’ы тонут в резюме, а соискатели — в конкуренции.

Джунам дверь захлопнулась
Новичкам и карьеристам-свитчерам особенно тяжело:
- Стажировок почти нет — компании не хотят обучать, им нужны готовые мидлы+.
- На junior-позиции откликаются опытные специалисты, которых сократили.
- Рынок переполнен однотипными резюме от выпускников курсов.

IT уже не тот остров стабильности
До 2022 года IT-шники жили в раю: открой резюме на hh.ru — и отбивайся от рекрутеров. Уволился без плана? Найдёшь работу за пару недель. Теперь даже мидлы+ с 5 годами опыта ищут месяцами. Мои знакомые с сильным бэком сидят без офферов — и это норма.

Почему так?
- После 2022 года компании урезали бюджеты, многие уехали, рынок стал локальным.
- ИИ забирает простые задачи: джунам не дают шанса, ведь код пишут нейросети.
- Хайп «войти в IT» породил толпу одинаковых кандидатов.
- Зарплаты стагнируют, а требования растут: ждут многозадачности за скромные деньги.

Что ещё бесит?
- Собеседования превратились в марафон: 3+ этапа, тестовые, которые никто не смотрит.
- Работодатели предлагают проектные роли или частичную занятость, но с полной ответственностью.
- Обучение? Забудьте. Все хотят готовых спецов.

Что делать?
Рынок сузился, конкуренция бешеная, а требования запредельные. Устроиться в 2025 — это подвиг, а не норма. Но если IT — ваше, не сдавайтесь. Работайте над навыками, ищите ниши, где ИИ пока не рулит, и держите фокус. Прорвётесь!

P.S. Это не нытьё, а честный взгляд на рынок. Если вы в поиске работы — дело не только в вас. Рынок перегрелся и забыл про новичков. Но у тех, кто горит делом, шансы есть всегда.

👉 @seniorFront

UX не так прост. 18 примеров темных паттернов

Темные паттерны, также известные как обманные или манипулятивные, — элементы UX-дизайна, которые подталкивают (может и не умышленно) пользователей к действиям, которые те не планировали совершать.

Спонтанные покупки, потеря личных данных, оформление подписок — зачастую вызваны наивностью, доверчивостью или когнитивными искажениями пользователей. Но как правило, все в интересах бизнеса!

В краткосрочной перспективе такой подход вполне может принести выгоду вроде роста продаж или вовлеченности. А что в долгосрочной? Подрыв доверия и вред пользователям? В статье разбираем, что такое темные паттерны, оцениваем их распространенность и рассматриваем 18 конкретных примеров.

👉 @seniorFront

Direction-aware 3D hover effect

В JS создана логика определения стороны, с которой приходит курсор пользователя и установки соответствующего CSS класса.

👉 @seniorFront

Responsive Image Slider

В этом видео создается анимированная карусель картинок на HTML и CSS.

👉 @seniorFront

Поймали JavaScript за руку!

👉 @seniorFront