Книжки

Общеполезное

The Pragmatic Programmer by Andrew Hunt and David Thomas
Code Complete by Steve McConnell

Coding

Clean Code by Robert C. Martin
Refactoring by Martin Fowler

Software Architecture

Designing Data-Intensive Applications by Martin Kleppmann
Object-Oriented Analysis and Design with Applications by Grady Booch

Design Patterns

Design Patterns by Eric Gamma and Others
Domain-Driven Design by Eric Evans

Data Structures and Algorithms

Introduction to Algorithms by Cormen, Leiserson, Rivest, and Stein
Cracking the Coding Interview by Gayle Laakmann McDowell

#learning #book

Дожили

В Chrome 135 появилась возможность стилизовать нативный <select>

Теперь сайт Аэроэкспреса пофиксят...

#chrome #css

Большой обзор rich text editors для встраивания в свой фронт

#editor #lib

В конце прошлого года маленькие любители атомарного CSS помогли владельцу Tailwind Адаму Уэтену въехать вот в этот новый домик.

Платные продукты и услуги, связанные c Tailwind , приносят Адаму несколько миллионов долларов в год

#tailwind

В CSS есть @scope функция, ограничивающая область применения стилей:

<template>
  <div class="box">
    <button class="button">Click me</button>
  </div>
</template>

<style>
  @scope (.box) {
    .button {
      color: red;
    }
  }
</style>

Однако полной замены Vue scoped она не может дать. Например, потому, что если компонент выше вывести списком, то во Vue у каждого будет свой data атрибут и своя область видимости стилей, а у @scope всё смешается

Но для ванильных случаев это полезное нововведение

#css

Глубокое клонирование реактивных объектов в Vue 3

Vue 3 использует Proxy для реактивности, что создает проблемы при попытке клонировать объекты. Стандартные методы работают не так, как ожидается:

const state = reactive({ user: { name: "Al" } });

// Проблемы:
const badCopy1 = { ...state }; // сохраняет Proxy-ссылки
const badCopy2 = JSON.parse(JSON.stringify(state)); // теряет методы и Proxy

3 рабочих способа

1. Комбинация toRaw + structuredClone

import { toRaw } from 'vue';

const original = reactive({ data: 123 });
const copy = structuredClone(toRaw(original));

2. Ручное глубокое копирование

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

const copy = reactive(deepClone(toRaw(original)));

3. Библиотечные решения

import { cloneDeep } from 'lodash-es';
const copy = reactive(cloneDeep(toRaw(obj)));

#tip #reactivity

Пятничная клубничка

Стартап Argil предлагает загрузить видео себя (или не себя) и создать такого вот клоника для OnlyFans

#ai

Хорошая библиотека Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)

Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить :key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...

Немного радует, что довольно часто обновляется и фиксят баги.

P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.

#lib #arkui

Наткнулся не так давно на шикарный анимационный сериал - Love.Death.&.Robots. Давно такого удовольствия не получал.

Досмотрел последний эпизод (там независимые короткометражки). Самый безумный из всех, наверно - Jibaro

#video #offtop

Статья о современном минимальном наборе фавиконок для сайта

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

// manifest.webmanifest
{
   "icons": [
       { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
       { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ]
}

#webdev

Почему неконтролируемого использования watch лучше избегать?

1. Нарушение реактивного потока

watch часто скрывает логику реактивности. Например, отслеживание изменения переменной для вызова побочного эффекта (fetch) делает поток данных менее предсказуемым, особенно если эффекты затрагивают несколько компонентов.

Vue поощряет однонаправленную реактивность (данные -> шаблон). watch часто используется для обратной связи (данные -> данные), что усложняет отладку.

2. Плохая читаемость

Цепочки watch внутри компонента превращаются в плохо понимаемый в спагетти-код.

Плохо для рефакторинга - логика, разбросанная по watch, сложно переносится в composables.

3. Производительность

watch с deep: true может создать нагрузку при отслеживании больших объектов или массивов.

watch часто дублирует логику, которую можно выразить через computed. Вычисляемые свойства кешируются и эффективнее.

Неотписанные watch в динамических компонентах (например, внутри v-if) могут накапливаться и вызывать утечки памяти.


watch — это аварийный выход для случаев, когда декларативных подходов недостаточно. Если возможно, нужно старайться решить задачу через computed, props или события.

#reactivity #watch