Фронтенд

Открытый скрипт для браузера IKEA 3D Model Downloader добавляет на сайте IKEA кнопку «Download 3D» на страницы товаров. Проект позволяет скачать файл с точной 3D-моделью дивана, стола или шкафа. Очень удобно для планирования ремонта. Можно закинуть мебель в 3D-планировщик квартиры, посмотреть, как она встанет по размерам, прикинуть цвета и сочетания, а не покупать вслепую «по картинке» Работает на всех версиях сайта IKEA и с новой версией тоже. По сути — примерка мебели у себя дома, только в цифре.

Попробовал вчера Kурсор впервые:
ШОК!!!

-Сказать дорого, ничего не сказать. После всех оптимизаций какие толкьо можно было выкрутить с помощью перплексити от 1 до 16м токенов в запрос? Да ну на х…
-Молниеносное отупение. Вместо того чтобы понимать какой компонент нужно доделать руками или через чат, тупо жми кнопку все будет ок. Только плати.

Вообщем вывод:

• если у тебя большой проект: плати и тупи;

• если у тебя сайтик, то повезло. Радуйся и не думай.

А лично я , кроме удобного интерфейса , не увидел ни чего хоть на 1% нужного. Знаю тут ни кто не поддержит) ну и ладно)))

Яндекс жжет!

ESLint, Prettier и что не так с насаждением единого стиля

Упомянутые материалы:

• Автоформатирование

• Отступы

• Форматирование имён

+ Копилка благодарностей

Функциональное программирование перевернуло фронтенд: почему JS возвращается к платформам?

Функциональное программирование перевернуло фронтенд-разработку, но теперь индустрия возвращается к платформенным подходам — почему и как это меняет JS-экосистему?

Статья «Как функциональное программирование изменило фронтенд и почему отрасль возвращается к платформе» разбирает эволюцию: от чистого FP к гибридным решениям, с примерами и выводами для фронтендеров.

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

С новым рабочим годом, Хабр
Мы в SSP SOFT опять расширяем команду и ждем ваши резюме

Кто мы? Занимаемся заказной разработкой ПО и предоставляем крупным клиентам выделенные команды на ИТ-аутсорсинг.

В 2025 году SSP SOFT вошел в число лидеров найма ИТ-специалистов на российском рынке — за год мы наняли 179 сотрудников!
И главное — в 2026 году найм продолжается.

У нас новый московский офис в 2025 году у самой Красной площади! А еще есть вакансии в офис в Томске и на удаленку из любой точки России.

Открытые вакансии в SSP SOFT: это реальные проекты, дружная команда и атмосфера, где работать — продуктивно, без выноса мозга и микро-менеджмента. В январе 2026 ищем гуру, кто готов в новое профессиональное будущее вместе с нами.

1️⃣ Fullstack разработчика (C# + React) (https://vk.cc/cT6vMP)
2️⃣ Python Разработчика (ML Engineer) (https://vk.cc/cT6vNp)
3️⃣ Программиста 1С (https://vk.cc/cT6vNR)
4️⃣ Fullstack-разработчика (Java+Go/React) (https://vk.cc/cT6vOl)

Что вас ждет в SSP SOFT:
✅ Рост: Центр компетенций для максимального апгрейда скиллов.
✅ Свобода геолокации: Возможность работать удаленно, гибрид или офис.
✅ Баланс: Работаем, чтобы жить, а не наоборот.

🎁 Приятные бонусы: ивенты для всей команды, ДМС для штата, обучение и бенефиты.

Подробности о вакансиях читайте на нашей странице ХХ.ру, но туда откликаться необязательно. Ждем резюме в ЛС нашему HR Lead Алине (https://t.me/AONikitina). Не забудьте добавить «секретную фразу» в сопроводительное письмо, «Увидел(а) вакансию на Хабре».

Желаем всем успешной карьеры в 2026 году 🚀)

Решил сегодня почитать, что пишут в Ангуляр комьюнити Хабра, и увидел сильно популярный пост с аж 51 лайком и 71 закладкой.

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

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

Автор условно говорит, что у нас есть плохой пример использования:

this.http.get('/api/data').subscribe((data) =>; {
  this.data = data; // Что если запрос не вернётся?
});

и затем приводит хороший пример с сигналами и RxJs:

readonly data = signal([]);
readonly error = signal(null);

loadData() {
  this.http.get('/api/data').pipe(
    tap(() =>; this.error.set(null)), // Сбрасываем предыдущую ошибку перед загрузкой
    catchError((err) =>; {
      this.error.set('Не удалось загрузить данные');
      return of([]); // Возвращаем пустой массив, чтобы поток не прерывался
    })
  ).subscribe((result) =>; {
    this.data.set(result);
  });
}

я даже не буду указывать на количество антипатернов и плохих практик в данном примере, я просто покажу правильный пример с сигналами и RxJs:

interface State<T = object> {
  data: T[];
  error: string | null;
}

@Component({...})
export class BestRxJs {
  private http = inject(HttpClient);
  private loadDataAction$ = new Subject<void>();

  private state$ = this.loadDataAction$.pipe(
    switchMap(() => 
      this.http.get<State[]>('/api/data').pipe(
        map((result) => ({ data: result, error: null })),
        catchError(() => of({ data: [], error: 'Не удалось загрузить данные' })),
        startWith({ data: [], error: null })
      )
    ),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  readonly private state = toSignal(this.state$, {
    initialValue: { data: [], error: null } 
  });

  readonly protected data = computed(() => this.state().data);
  readonly protected error = computed(() => this.state().error);

  protected loadData(): void {
    this.loadDataAction$.next();
  }
}

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

Почему стоит использовать protected в Angular компонентах?

Если вы используете в своих компонентах только public и private, вы упускаете возможность сделать архитектуру чище. Я предлагаю четко разделять ответственность членов класса.

Часто мы по инерции делаем public любые методы и свойства, которые нужны в шаблоне (HTML). Но public в TypeScript означает, что это публичный API компонента - к этим методам может получить доступ любой родительский компонент через @ViewChild.

Почему стоит использовать protected:

1. Явное намерение: protected сигнализирует, что метод предназначен для использования внутри класса или в его шаблоне, но не должен вызываться извне.

2. Защита от регрессии: Если другой разработчик попытается вызвать такой метод через @ViewChild, TypeScript выдаст ошибку. Это заставит его задуматься: «Действительно ли мне нужно делать этот метод публичным?» или «Может, стоит создать отдельный метод для API?».

3. Читаемость: Открывая код, вы сразу видите: public - для внешнего мира, protected - для шаблона, private - для внутренней логики сервисов и подписок.

Разделяйте Public API и внутреннюю логику шаблона - ваш код станет надежнее и понятнее.

@Component({
  selector: 'app-user-profile',
  template: `
    <!-- В шаблоне мы без проблем обращаемся к protected свойствам -->
    <div class="card">
      <h3>{{ userName() }}</h3>
      <button (click)="onUpdateClick()">Обновить</button>
        @if(isLoading()) {
          <div>Загрузка...</div>
        }
    </div>
  `
})
export class UserProfileComponent {
  // PRIVATE: Внутренняя логика. 
  // Не доступно ни в шаблоне, ни родительскому компоненту.
  private _userId = 123;

  // PROTECTED: Доступно только внутри класса и в ШАБЛОНЕ.
  // Идеально для переменных состояния UI и обработчиков событий.
  protected userName = signal('Алексей');
  protected isLoading = signal(false);

  protected onUpdateClick(): void {
    this.logAction();
    console.log('Кнопку нажали в шаблоне');
  }

  // PUBLIC: Публичный API компонента.
  // Только эти методы мы разрешаем вызывать родительскому компоненту.
  public resetState(): void {
    this.userName.set('Гость');
    this.isLoading.set(false);
  }

  private logAction(): void {
    console.log(`Action logged for userId: ${this._userId}`);
  }
}

пет-проект невозможно доделать - только выпустить в открытую бету

Что ж, встречайте открытую бету проекта

📚📚📚📚📚📚📚📚📚📚
SweetReader!
📚📚📚📚📚📚📚📚📚📚

Что это:
Пространство для авторов и читателей, упор сделан на книги с высоким уровнем визуала (графические романы, комиксы, манги, книги с упором на иллюстрации). 

Преимущества:
Три настраиваемых режима просмотра книг, поиск и фильтры по произведениям, лайки, избранные, страницы авторов и всё в этом духе.

На текущий момент это MVP - буквально базовая версия продукта, есть планы по его доработке и даже (о, ужас) "дорожная карта", которую, может быть, я реализую )))

_____

Должен упомянуть, что автор идеи и базового дизайна, которые я впоследствии доработал - Семён Диваченко.

Буду рад обратной связи тут в комментариях. Если найдёте баг или ошибку (а это на текущей стадии несложно), в меню есть кнопка "Ошибка?" специально для неравнодушных пользователей.

Lex Kravetski в ФБ написал оду Микрософт Ворду, с которым у меня плохие отношения еще с конца 1980-х, когда он был под DOS-ом в графическом режиме. Причем тогда Ворд был еще более-менее, хотя бОльшая часть его функциональности лично мне не была нужна, для форматированных текстов хватало Лексикона от Eugene Veselov из ВЦ Академии Наук, затем уехавшим в Микрософт и ныне ставшим очень политизированным.

Главные проблемы с Вордом для меня начались после 2000 года, когда у него стало прыгать форматирование невпопад, особенно в текстах с комбинацией списков, таблиц и картинок. Lex такую проблему упоминает с позиции своих оппонентов: "блин, даже пробел в нём как-то странно работает, по коей причине даже простое форматирование сделать тяжело."

Из-за этого прыгания я сейчас для редактирования форматированных текстов как правило использую простой текстовый редактор joe (который имитирует редактор в TurboC 1988 года, но с квадратными блоками), а в нем - .md Markdown, который потом конвертирую в .pdf с помощью программы pandoc.

Также использую Google Doc, в нем форматирование не прыгает, как в Microsoft Word и в Libre Office, а сделано по человечески.

Раньше еще писал в текстовом редакторе на HTML, но Markdown удобнее, так как читабильнее в голом виде. Если вы еще не выучили Markdown и мучаетесь Вордом - просто нагуглите его в википедии, он учится за 15 минут.

Как получить почти бесконечное зацикливание без использования циклов и без переполнения стека вызовов:

// Установите N = 64, и эта функция никогда не завершится  
// Количество вызовов (calls) = 2^(N+1)  
// Максимальная глубина вложенности = N

let calls = 0
const N = 18
function func(state, visited) {
  calls++
  if (calls > 10_000_000) {
    throw new Error('calls: ' + calls)
  }
  if (visited.includes(state)) return

  const newVisited = [...visited, state]

  func((state + 1) % N, newVisited)
  func((state + 1) % N, newVisited)
}

func(0, [])
console.log('calls:', calls)

Почему это работает без переполнения стека?

func(0, [])
├── func(1, [0])
│   ├── func(2, [0,1])
│   │   └── ... глубина растёт до N
│   │           и перебираются все возможные комбинации значений в newVisited
│   └── func(2, [0,1]) - возвращается, глубина УМЕНЬШАЕТСЯ
└── func(1, [0])       - второй вызов, стек уже освободился

А Garbage Collector (GC) при этом бесконечно удаляет созданные ранее массивы newVisited

Стек "дышит" - достигает максимума N, потом сворачивается, потом снова растёт. Это обход огромного дерева, имеющего небольшую глубину, но очень большую ширину. Это не бесконечная рекурсия. Но при N = 64 количество вызовов будет 2^65 (примерно 10^19) - это займёт тысячи лет, и стек никогда не переполнится.

Коллеги, всем привет!

За годы менторства по Angular (в том числе в HTML Academy) я заметил одну системную проблему: студенты и даже миддлы часто знают синтаксис RxJS, но не понимают реактивного мышления. В итоге мы получаем subscribe внутри subscribe и императивную лапшу.

Я искал интерактивные курсы, но большинство бесплатных ресурсов ограничиваются основами.

Курс бесплатный. Делал для себя и студентов, но теперь делюсь со всеми.

Буду рад фидбеку и баг-репортам (проект активно допиливаю).

Ссылка на курс: https://rxjs-course-avy.web.app/

Команда разработчиков Chrome собрала на одной странице все крупные изменения в CSS за 2025 год. У каждой новой фичи есть подробное описание, интерактивная демонстрация, примеры кода и информацию о поддержке в основных браузерах.

Друзья, классная новость! Мы с коллегами из GitVerse закончили разработку интеграции! 

Теперь в Gramax можно подключить GitVerse в качестве хранилища. Работает в лучшем виде: клонирование, синхронизация, коммит, пуш — все как и должно быть ✨

Это была масштабная и интересная работа: мы вместе анализировали API, чтобы получилось максимально удобно. Потому будем очень рады увидеть ваши плюсики!

Gramax — Open Source-платформа для работы с документацией в подходе Docs as Code. GitVerse — AI-first платформа для работы с кодом.

React One Click Component

Поделюсь самодельным расширением для VS Code, которое позволяет создавать React-компоненты в один клик.

Что умеет:

• гибкое именование файлов: выбор между PascalCase, camelCase, kebab-case или snake_case для генерируемых файлов;

• работа с .tsx и .jsx для файлов компонентов, а также .scss, .css, .less и .sass для стилей;

• редактируемые шаблоны: настройка содержимого генерируемых файлов прямо в VS Code;

• опциональное создание файлов реэкспорта и стилей.

Более подробный readme на странице расширения, ссылка на исходники там же. На мой взгляд экстешнен написан таким образом, что его довольно легко переписать для любого web-фреймворка.

На всякий случай: ни с какими внешними сервисами и нейронками расширение не взаимодействует)

Массовая замена HTML-разметки в Sublime Text с помощью RegExp

При работе с HTML часто возникает рутинная задача: есть десятки однотипных элементов, которые нужно заменить на реальную разметку. Делать это вручную - долго и рискованно, также можно легко допустить ошибку.

В моём случае это были заглушки вида:

<p>Image 1</p>
<p>Image 2</p>
<p>Image 3</p>

Нужно было превратить их в теги изображений, сохранив номера файлов изображений.

Почему не руками

Ручная правка подходит только для пары строк. Когда элементов больше 10–20, возрастает риск:

• ошибиться в номере изображения

• забыть закрыть тег

• нарушить единообразие разметки

Поэтому логичнее использовать инструменты, которые уже есть в редакторе.

Решение через Sublime Text и RegExp

В Sublime Text есть мощный поиск и замена с поддержкой регулярных выражений. Этого более чем достаточно для задачи.

Открываем HTML-файл и вызываем панель замены:

• Ctrl + H (Windows / Linux)

• Cmd + Alt + F (macOS)

Обязательно включаем режим Regular Expression (иконка .*).

Шаблон поиска

<p>Image (\d+)</p>

Разберём выражение:

• <p>Image — фиксированная часть

• (\d+) — группа захвата, которая находит любое число

• </p> — закрывающий тег

Число внутри скобок сохраняется как первая группа.

Шаблон замены

<img src="images/\1.jpg">

Здесь \1 — ссылка на первую группу захвата из шаблона поиска. На её место подставляется найденное число.

В результате:

• Image 1 → images/1.jpg

• Image 12 → images/12.jpg

Проверка и замена

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

После этого можно смело использовать Replace All — Sublime Text заменит все подходящие строки за один шаг.

Подводные камни

Несколько моментов, о которых легко забыть:

• если не включить RegExp, \1 подставлен не будет

• в Sublime используется именно \1, а не $1

• шаблон чувствителен к пробелам и регистру

Альтернативы

Для подобных задач подойдут и другие инструменты:

• sed в терминале

• массовая генерация HTML через bash-циклы

• аналогичная замена в VS Code

Но если файл уже открыт в Sublime Text, RegExp — самый быстрый вариант.

Вывод

Регулярные выражения в Sublime Text позволяют эффективно автоматизировать рутинные правки HTML без дополнительных скриптов и плагинов. Даже простые приёмы вроде групп захвата экономят время и снижают количество ошибок.

Дополнительно

Более подробная пошаговая инструкция с ориентацией на новичков опубликована в моём блоге:

https://kodprog.ru/kak-bystro-zamenit-tekst-na-tegi-img-v-sublime-text

Доброго всем. Первая публикация, прошу не особо...

Не стану растекаться мыслью по древу, пост - следствие поиска по запросам типа "как лучше вставить и анимировать SVG иконки", и подобным в том же ключе. Так как самыми релевантными ответами поиска не удовлетворён, решил написать свой, во-первых, чтобы услышать сообщество. Мало ли, возможно технология уже вовсю применяется в фреймворках, и на поиск все забили "всё и так слишком очевидно".
Во-вторых, сам до сих пор копаюсь в ванильном, поэтому, если старшие товарищи найдут сей вариант приемлемым, пусть пост останется как справка, вроде "а чё, так можно было?". Если же такая практика не применима по ряду пока неизученных мной причин, пост тоже пусть остаётся дополненный комментариями, как пример того "как не надо делать". В общем.

Решил упаковать спрайт в Web Components. Для примера взял отображение файловых иконок, за подопечных три распространённых файловых формата .docs, .xls, .pdf. Раз уж мне и так пришлось испытать муки отсутствия музы( вообще ни разу не художник), прошу отнестись с пониманием к внешнему виду конечного продукта. Упор был на простоту, контролируемость, компоновку. В том смысле, что косметика человеком с утончённым восприятием этого мира может быть применима отдельно.
Да, и ещё один аспект постарался обыграть - наличие общих свойств для всех иконок, коими выбрал подложку, и текст mime типа, и уникальные для каждой иконки элементы, ими выступили "брендовые" цвета и элементы. Так, выбор иконок файловых форматов для спрайта показался оптимальным.
Далее, в общем код(сокращённо, рабочий пример по ссылке), совсем немного к нему объяснений и ссылка на песочницу. И, само собой, ожидание комментариев.

customElements.define("wc-icon-file",
  class WC_ICON_FILE extends HTMLElement {
    constructor() {
      super();
      this.#preform = '';
      this.#mime = '';
      this.#unic = '';      
    }  
    connectedCallback() {
      this.init();
      this.innerHTML=this.#preform;
    } 
    init() {
      this._mime = this.getAttribute('data-mime');
      let availableMime = {
        xlsfile: `<g class="wc-icon-${this.#mime}">
          <line style="stroke-width:3;stroke-linecap:butt;" x1="13" x2="17" y1="24" y2="24"/>
          <line style="stroke-width:3;stroke-linecap:butt;" x1="18" x2="22" y1="24" y2="24"/>
          // и т.д.
          <text x="8" y="19" class="f-mime">.xls</text>
          </g>`,
        docfile: `<g class="wc-icon-${this.#mime}">
          <line style="stroke-width:1.8;stroke-linecap:round;" x1="20" x2="24" y1="23" y2="23"/>
          <line style="stroke-width:1.3;stroke-linecap:round;" x1="16" x2="30" y1="27" y2="27"/>
          // и т.д.
          <text x="8" y="19" class="f-mime">.doc</text>
        </g>`,
          pdffile: `<path class="wc-icon-${this.#mime}" d="m 21.963376,23.938571 // и т.д. />
          <text x="8" y="19" class="f-mime">.pdf</text>` 
        }      
        this.#unic = availableMime[this.#mime];
        this.#preform = `<svg class="wc-icon-file" viewBox="0 0 48 48">
           <path class="${this.#mime}" d="M13.528 3.087 30 3l8 9-.316 28.075c-.035 3.151-1.09 
            4.143-3.716 4.11h-20.44 c-2.303.095-3.676-.718-3.716-4.11V7.197c-.03-2.459
            1.504-4.198 3.716-4.11z"/>
            ${this.#unic}
            </svg>`
  }; 
});
let wcIconFile = document.createElement('wc-icon-file');
// export {wcIconFile} по необходимости

Сам компонент на странице объявляется как обычно:

<wc-icon-file data-mime="xlsfile"></wc-icon-file>
<wc-icon-file data-mime="docfile"></wc-icon-file>
<wc-icon-file data-mime="pdffile"></wc-icon-file>    

Код прокомментирую на предмет того, что в init() пришлось соблюсти порядок объявления переменных. Для определения схожих классов с разными "модификаторами" сначала брался атрибут в компоненте. По нему же делалась выборка this.#unic впоследствии вставляемая в this.#preform . Стили здесь не привожу, отмечу лишь, что настройки :hover и анимации там вполне работают.

Благодарю, что уделили время.

Google представил топ лучших расширений для Chrome в 2025 году: 

• HARPA AI: позволяет автоматизировать любую работу в интернете: мониторинг сайтов, напоминания, боты, поиск, скрапинг; 

• Quillbot: если работаете с текстом — это вам. Проверка орфографии, рерайт ИИ‑текста, подборка синонимов и даже проверка осмысленности текста;

• Monica и Sider: добавляют в браузер боковую панель с самыми полезными нейронками. Удобный доступ к сразу нескольким чат‑ботам, быстрой генерации картинок и видео, проверке и переводу документов; 

• Fireflies и Bluedot: помогут в создании заметок и автоматической расшифровке бесконечных созвонов; 

• QuestionAI и eJOY: школьники и студенты, а это вам — помощник по выполнению домашних заданий и разбору тем по любым предметам. 

• Adobe Photoshop: быстрый доступ к Фотошопу. Веб‑версия проще, но там есть все нужные инструменты для редактирования фотографий, в том числе ИИ‑фотошоп;

• Phia: шопинг‑расширение с ИИ для автоматического сравнения цен при покупках в браузере. Идеально, если все ещё мечтаете найти дешёвые ОЗУ.

Похоже, того фронтендера, который знал, что такое margin, уже оптимизировал "Режим ИИ". Либо вайбкодинг есть - поэтому отступов нет 😅

Я часто вижу, как разработчики испытывают трудности с i18next. И действительно, это технология интернационализации, которую нелегко освоить.

Несмотря на это, i18next остаётся решением по умолчанию, которое ChatGPT рекомендует для внедрения i18n. Мы слишком часто попадаемся на удочку страниц «Get Started» (да, оно работает, но действительно ли это сделано правильно?).

На практике я замечаю, что многие проекты пропускают самые критичные аспекты интернационализации, особенно связанные с SEO: перевод метаданных, теги hreflang, локализация ссылок, настройка sitemap и robots.txt.

Что ещё хуже, почти половина проектов, использующих i18next (особенно после роста популярности ИИ), не структурируют контент по неймспейсам или же загружают все неймспейсы при каждом запросе.

Последствия? Вы можете заставлять каждого пользователя загружать контент всех страниц на всех языках, даже если он посещает только одну страницу. Например: при 10 страницах и 10 языках 99% загружаемого контента никогда не будет использовано. Совет: используйте анализатор бандла, чтобы выявить это.

Чтобы решить проблему, я подготовил руководство о том, как правильно интернационализировать приложение Next.js 16 с i18next в 2025 году.

Вот ссылка: https://intlayer.org/ru/blog/nextjs-internationalization-using-next-i18next