Кевин Денг (создатель Vapor) получил ежемесячное спонсорство от VoidZero в размере $1024

Еще столько же дают совместно Эван и Vue.js, и еще около $1000 все остальные

Прошлой осенью Кевин жаловался, что ему не на что содержать семью, и поэтому он забросил Vapor

Как и ожидалось, Эван использует полученные VoidZero инвестиции для вознаграждения работающим во Vue и Vite экосистемах людям, но как-то уж очень экономно он это делает.

#vapor #voidzero

Даже во сне думаешь о UI/UX, реализуешь адаптивность, отзывчивость, тестируешь на всех разрешениях, потом открываешь супер популярный сайт и не можешь до конца меню пролистать, свою станцию выбрать, потому что экран кончился, а меню уходит ниже...

#ux

Эван думает так же

#ai

Книжки

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

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