P.S. Не согласен с нарисованным

#meme

https://ios404.com/

Чего нет в iOS по сравнению с Android

#ios #android

Белорусский фулстек на заработках в Европе

Кому зайдет - Internal flight

#video #offtop

Тихо и незаметно вышел Svelte 5 со своими рунами - самый близкий Vue по духу фронтенд фреймворк

Ну и стандартно за два дня уже три дополнительных минорных релиза

Из новинок декларируется:

- более высокая производительность
- более гранулированная система реактивности с рунами
- более выразительный синтаксис шаблонов с фрагментами (snippets) и атрибутами событий
- встроенная поддержка TypeScript
- обратная совместимость с предыдущим синтаксисом

#svelte

Пару недель назад в интернете и Твиттере прошла ярая дискуссия по поводу Web Components, в которой принял участие и Evan You.

С моей точки зрения, веб компоненты являются неким ориентиром, стандартом на которые должны/могут ориентироваться фронтенд фреймворки и разработчики на них. Он дает две ключевые вещи - декомпозицию системы на более мелкие части, и инкапсуляцию HTML, JS и CSS в одном компоненте. Vue взял эти принципы у него, и, наверное, из всех фреймворков ближе всего идеологически к веб компонентам.

Но этот стандарт не может и не сможет заменить фронтенд фреймворки и даже приблизиться к ним в плане удобства и функционала. Да, на Web Components можно прекрасно писать большие приложения, но ему "не хватает" трех вещей, которыми избаловали современные фреймворки своих пользователей - связывания переменных шаблона и скрипта, директив в HTML и реактивности данных в JS.

И вряд ли они когда-то появятся, потому что любая их реализация будет частным случаем и будет означать, что это уже не просто HTML, и не просто JS. А такого быть не должно в W3C мире, потому что в его спецификациях стандарты, которым десятки лет, и которые должны просуществовать еще десятки лет.

#webcomponents

В 2024 году в CSS завезли типизацию переменных

Нетипизированное CSS property:

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

Типизированное CSS property

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

Через JS

window.CSS.registerProperty({
  name: "--background-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "blue",
});

Типы (syntax): <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, или список типов данных и значений ключевых слов.

Поддержка в браузерах уже полная

———

P.S. Типизация нужна, если это свойство используется в transition

Пример 1

Пример 2

#css

Недавно Эван сказал, что Vue близок к тому, чтобы быть "feature complete" (функционально полным).

Абсолютно согласен.

Гранит стабильности в безумстве появляющихся каждый день хайпожорских фронтенд перверсий.

#evanyou #vuejs

Если у вас в проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1) Поставить Vite плагин vite-plugin-json5
2) Поставить расширение json5 для VS Code для подсветки синтаксиса
3) Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

#json #tip #dx

В CSS есть scroll-driven animations, которые позволяют делать сложные красивые анимации [почти] без JS

Демо

Документация

#css #animation

Нашел интересный сервис - https://assayo.online/

По логам GIT репозитория дает разную статистику, в том числе местоположение его разработчиков

Определяет это по времени коммитов, разным языковым символам, популярным именам в стране и др.

Мои координаты точно нашел.

#git

Современные браузеры поддерживают Text fragments

Это когда можно сделать ссылку на страницу, с выделением на ней определенного текста

Общий синтаксис:

https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Пример:
https://vue-faq.org/ru/book/Chapter_2__Software_Design_Principles_and_Patterns.html#:~:text=Программирование,проблем

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

Большое интервью Эвана Ю о Voidzero

Есть субтитры на русском

#evanyou #voidzero

Замутил тут проект от нечего делать.

Есть сайт знакомств, там 9000 кандидаток. Настоящих, не ботов.
Работает наподобие Тиндера - с пролистыванием. Ну и описание у каждой немаленькое.

Листать вручную и читать всё - влом
Написал на Playwright бота, который все это пролистал и загрузил как HTML.

Распарсил в JSON.
Выделил четкие параметры (возраст, блондинка/брюнетка, локейшн и т.п.) - это хард-скилы.
Выделил нечеткие - описание, увлечения, мечты и т.д. - это софт-скилы.

Загрузил все в БД.

Дальше фильтруем сперва по хард-скилам. Остается пару тысяч вариантов.

Выгружаем всё частями в CSV для экономии, и скармливаем батчами AI с нужным промптом - подходим ли по интересам, насколько серьёзные у нее намерения и тому подобное. В gpt-4o-mini, чтоб недорого.

Ну он ранжирует, и получаем 30 самых подходящих потенциальных невест с хорошим приданным и прямыми ссылками на профили.

День работы.

#pet #ai

Марвин Джон Химейер (Marvin John Heemeyer; 28 октября 1951 — 4 июня 2004) — владелец мастерской в Гранби, штат Колорадо, военный инженер на пенсии, аэродромный техник ВВС США.

После длительного конфликта с компанией Mountain Park Concrete (бетонный завод) и местными властями по поводу территории, на которой находилась его мастерская, он оборудовал бульдозер Komatsu D355A-3 бронёй и разрушил 13 административных зданий (в том числе все здания, принадлежавшие бетонному заводу), после чего покончил жизнь самоубийством.

Это происшествие также известно в СМИ и интернете как «Война Марвина Химейера», а его бульдозер — как KillDozer

#offtop #video

К новости выше

«Куда ты ведешь нас?.. не видно ни зги! —
В сердцах к Владилену вскричали враги: —
Экспертами стать мы хотели Реакта,
Но света не видно в конце сего тракта.
«Куда ты завел нас?» — реактер вспрошал.
«Туда, куда надобно! — Минин сказал. —

Убейте! замучьте! — моя здесь могила!
Но знайте и рвитесь: во Vue наша сила!
Предателя, мнили, во мне вы нашли:
Их нет и не будет на вьюшной земле!
В ней каждый фреймворк сей с младенчества любит
И душу изменой свою не погубит».

«Злодей! — закричали враги, закипев, —
Умрешь под мечами!» — «Не страшен ваш гнев!
Кто с Vue в сердце ходит, тот бодро, и смело,
И радостно гибнет за правое дело!
Ни казни, ни смерти и я не боюсь:
Не дрогнув, умру за родимую Vue!»

«Умри же! — реактеры злобно вскричали,
И сабли над Мининым враз засверкали! —
Погибни, предатель! Конец твой настал!»
И медленно Минин весь в ранах упал!
Снег чистый чистейшая кровь обагрила:
Лишь губы шепнули: "Во Vue наша сила!"

#literature #creative #minin

Pinia Colada появилась и как Nuxt модуль

Сколько в Nuxt уже [неправильных] способов заменить fetch(), включая Tanstack?

#pinia #nuxt

VS Code позволяет отключить аппаратное ускорение при отрисовке, что может заметно убыстрить IDE при плохом GPU или проблемах с драйверами

1. Preferences > Configure Runtime Arguments
2. Добавить: "disable-hardware-acceleration": true

Или сразу в .vscode/argv.json

#vscode #tip #optimization

Хеллоувин!

#offtop

Из святой троицы JS, HTML и CSS последний развивается, наверно, быстрее всех

Если надо анимировано удалить какой-то блок (fade-out), то раньше использовался opacity + transition. Кроме того, блок надо было еще и реально удалить - чтобы не мешал в DOM-e, это делалось либо одновременной установкой height:0 (и блок все равно в DOM-e), либо js решение setTimeout() + display:none. Оба некрасивые.

Сейчас в большинстве браузеров поддерживаются еще 4 способа для подобного рода задач.

1. animation

.fade-out {
  animation: fade-out 0.25s forwards;
}

/* Keyframe animations */
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

2. transition-behavior: allow-discrete;

.card {
  transition: opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

3. @starting-style

.card {
  @starting-style {
    opacity: 0;
  }

  opacity: 1;
  transition: opacity 0.5s;
}

4. calc-size()

.card { 
  height: 0; 
}

.card.open { 
  height: calc-size(auto);
}

#css #tip