Aleksandr Rogozhkin
71 subscribers
58 photos
14 videos
35 links
Frontend разработчик о работе, жизни и ценностях.

Instagram: https://www.instagram.com/aleksandr_frontend/
YouTube: https://www.youtube.com/@aleksandr_frontend
Habr: https://habr.com/ru/users/atomr_mf/

Чат: https://t.me/+3nnKgTp1GQNkMDFi
Download Telegram
🖥 Подробное ревью интернета в 2024 году

Cloudflare выпустила ежегодный отчет по статусу интернета во всем мире.
Пробежимся по самому интересному:

➡️ Интернет трафик вырос на 17.2%
➡️ Гугл остается самым популярным. OpenAI держит первое место в категории Generative AI. Binance - топ в крипте. WhatsApp самый популярный месенджер. Facebook самая популярная соц сеть
➡️ Трафик Starlink от Илона Маска вырос в 3.3 раза

Что по технологиям?

➡️ React, PHP и jQuery были самыми популярными
➡️ Go обогнал NodeJS в автоматизировании API запросов (не намного, но все же)
➡️ Google Chrome самый популярный браузер, но для MacOS Safari опережает Chrome. Что удивительно, так на винде Edge второй по популярности, Firefox даже не упомянули(
➡️ 41.3% мирового трафика - это мобильные устройства

Настоятельно рекомендую к прочтению всем. Очень подробно с графиками и цифрами каждый пункт описан

Ссылка - Cloudflare 2024 Year in Review

#news
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥31👏1
💥 Github Copilot стал бесплатным

Мне на почту пришло письмо с информацией о включении Github Copilot в моей аккаунт. Перешел по ссылке, скачал плагин для вебшторма и все заработало
Про оплату ни строчки не встретил

Но не забываем, что это не генератор, а только помощник, а именно copilot (второй пилот)
Каждый его ответ проверяем и, либо модифицируем под бизнес/требования/задачу, либо как можно больше уточнений ему скрамливаем.

🎄 Отличный подарок к НГ нам сделали, бегом проверять почту

Возможно, сделаю как нибудь отдельный пост по опыту использования LLM в работе

#dev #ai
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥21
👩‍💻 Base UI. Не просто "еще одна либа"

В альфа-версию вышла довольно интересная unstyled UI-библиотека, где в число авторов вошли Material UI.
Одной из самых главных проблем всех подобных библиотек является невозможность безболезненно стилизовать импортируемые компоненты. В Base UI все компоненты поставляются "голыми".

В итоге разработчик получает функциональные и доступные (a11y) компоненты, которые легко интегрировать с любой дизайн-системой, будь то Tailwind, CSS-модули или CSS-in-JS.
Кроме того, из коробки многие компоненты имеют дата-атрибуты. Например, для Switch можно использовать атрибуты [data-checked] и [data-unchecked] для стилизации.

Примеры компонентов Base UI:

❤️ Поля ввода (Input, Select, Checkbox, Radio).
❤️ Компоненты управления (Button, Slider, Switch).
❤️ Контейнеры и элементы оформления (Modal, Popover, Menu).

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

export default function ExampleCheckbox() {
return (
<label className={styles.Label}>
<Checkbox.Root defaultChecked className={styles.Checkbox}>
<Checkbox.Indicator className={styles.Indicator}>
<CheckIcon className={styles.Icon} />
</Checkbox.Indicator>
</Checkbox.Root>
Enable notifications
</label>
);
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
return (
<svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
<path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
</svg>
);
}


Основные особенности Base UI:

❤️ Чистота и гибкость -
Компоненты поставляются без встроенного стиля, что позволяет разработчикам легко настраивать внешний вид с помощью CSS или других стайлинговых решений

❤️ Доступность (a11y) -
Все компоненты спроектированы с учётом доступности, что упрощает разработку интерфейсов, соответствующих стандартам WCAG

❤️ Модульность -
Можно импортировать только нужные компоненты, что сокращает объём бандла и улучшает производительность приложения

❤️ Поддержка TypeScript -
Все компоненты написаны на TypeScript, что обеспечивает строгую типизацию и лучшее взаимодействие с IDE.

Ссылка

Очень советую попробовать эту библиотеку, если раньше не доводилось работать с подобными (TanStack и тд).
Одним из недостатков на данный момент отмечу то, что она поддерживает только React. Однако не думаю, что это является существенным минусом - для альфа-версии это вполне простительно.

#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥21👍1
🏠 Пропал на парочку дней из-за этого. Не шашлык

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

🗺 Год назад мы с женой купили этот участок и всё это время думали, что на нём возвести в первую очередь. Понятное дело, что дом, гараж, какие-то хозпостройки, но было много вопросов: в каком месте, какой материал, что строить первым, где будет кессон, септик (и какой именно) и т. д. Но самое первое, что нужно было сделать — это расчистить участок от молодого леса.

❗️С задней стороны участка вид на лес сохранится навсегда потому, что за ним проходит граница охранной зоны водонапорной башни, поэтому "нарезки" на участки ИЖС или другого типа не будет.

🌲 Как я ни крутил будущие постройки при планировании, было ясно, что оставить редкие берёзки не получится — они либо будут мешать, либо со временем их всё равно придётся срубить. Когда ездил пилить в первый раз, даже оставил две большие сосны, но в итоге тоже пришлось их убрать. Они стояли прямо посередине участка, а строить вокруг сосен не видел смысла. В будущем они принесли бы только проблемы. Поэтому к вопросу деревьев и другой растительности вернёмся после того, как утвердим план участка и расположение строений.

На данный момент участок выровняли. Была куча земли посередине — разровняли. Следующим шагом уже будет стройка (надеюсь)

В будущем могу подробнее рассказывать про этапы строительства и про то, каково это — заниматься стройкой сейчас: цены, подведение электричества, необходимые работы, личный опыт и т. д. Занимаюсь своими руками всем, чем могу. Приобрел вот фермерскую бензопилу, научился ею пользоваться и обслуживать, например.
Такие посты будут редкими на канале — просто чтобы разбавить технические (хоть последний и был "несколько дней назад")

P.S. Канал не мёртв, он готовится к взлёту. Ауф

#стройка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍42
🔥 Вышла Node.js 24: что важно знать фронтендерам (и бэкендерам тоже!)
Not just another update!


📣 Из главных новостей:

Новые JavaScript фичи — обновился движок js (V8), теперь есть поддержка RegExp.escape, Float16Array, Error.isError и много чего другого, что приближает Node к современному браузерному js и избавляет вас от необходимости разрабатывать собственные велосипеды

URLPattern становится глобальным — Не нужно больше импортировать его вручную, что отлично подходит для чистой маршрутизации и сопоставления URL-адресов без регулярок

Улучшили встроенный инструмент для тестов — мало, кто знал (я в том числе), но простенькие тесты можно писать без mocha или jest, а использовать встроенную утилиту node:test
import { test } from 'node:test';  
test('check sum', () => { assert.equal(1+1, 2) });


NPM v11 - завезли производительности, улучшение безопасности и лучшую совместимость с современными пакетами js, например, с esbuild или vite

Что касается разработки бэкенда:

➡️ Улучшение в node:fs — методы для работы с файлами стали стабильнее (например, fs.openAsBlob())
➡️ Безопасность — обновления в криптографии и TLS
➡️ Worker Threads — меньше накладных расходов при работе с потоками

⚠️ Deprecations. Что устарело и больше не будет поддерживаться:

🔹url.parse() в рантайме — теперь нужно использовать WHATWG URL API
🔹tls.createSecurePair — удалено как устаревшее
🔹SlowBuffer — устарел в рантайме

И несколько еще минорных изменений

👀 Отпишитесь, как вам обновление. Полезно или нет?
Мне, как фронтенд разработчику, выделилось только обновления в тест раннерах (я вообще о таком даже и не знал)

#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍31
👩‍💻 Эй, ****! Знаешь, что грузится быстрее твоего раздутого, переусложнённого говна? Чистый HTML, без всякой херни.

Начинаем утро с напоминания о такой штуке, как HTML, и что совсем не обязательно повсеместно использовать фреймворки в каждом проекте.

По ссылке можно вспомнить (или ознакомиться), как выглядят ванильный HTML

https://justfuckingusehtml.com/

#dev
Please open Telegram to view this post
VIEW IN TELEGRAM
👍63🔥2👏1😁1
💠 Как Windows App (он же RDP) не может годами научиться работать с DPI

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

Итак, начнём с железа.

- macbook pro м3, 18 ГБ, Sequoia 15.5
- клавиатура nuphy air75
- мышь logitech g305
- Dell Thunderbolt WD19TB 180W докстанция
- монитор Xiaomi Mi Curved Gaming Monitor 34

Необходимо подключиться к удалённому рабочему столу по RDP. Первое, что приходит в голову — Remote Desktop приложение. Гугл говорит, что мелкомягкие продолжают поддерживать приложение под мак и переименовали его в Windows App (спойлер: в нашем случае абсолютно никакой разницы, на старых версиях баг актуален).

Пробую подключаться к уд. столу и наблюдаю оооочень неприятный инпут-лаг. Первым делом пытаюсь разобраться, в чём может быть дело, но после 1–2 часов ресерча понимаю, что проблема большая и решения на поверхности нет. К концу дня баг остаётся нерешённым, перепробовано куча других клиентов: Jump Desktop, Royal TSX, Remote Desktop (несколько прошлых версий). Вроде бы более-менее пропадает инпут-лаг на Jump Desktop, но он подключается раз через раз.

Промежуточный итог — несколько дней мучался с подключением через Jump Desktop, но работать уже можно было, если получилось подключиться. Конечно же, мне это не подошло, и я пересел на винду. Там проблем с подключением не было, но мне такой вариант для работы не подходит. Винда у меня только для игрушек, и запускаю я её раз в месяц обычно — всё для работы у меня на маке.

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

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

Здесь я понимаю, что скролл и ввод с клавиатуры работают без лагов — тормозит только мышь. Нахожу дома старенькую проводную мышь, подкидываю к маку — и отклик практически как нативный! Думаю, что, скорее всего, дело в беспроводном соединении, и нужно просто заменить мышь на проводную. Вспоминаю, что где-то должна лежать ещё одна мышь х7, подключаю её — инпут-лаг снова вернулся. Мыши, по сути, различаются только кнопкой изменения DPI. Это наводит на мысль, что дело в аппаратном ускорении, и что Remote Desktop протокол не научили обрабатывать его.

Да, так и есть — мелкомягкие до сих пор не могут пофиксить этот баг на macOS. Даже если включить первое положение DPI на мыши механически, через программульки отключить аппаратное ускорение — это не поможет. Но с винды подключиться можно, и всё будет работать исключительно.
Иду в Ситилинк и ищу полноразмерную беспроводную мышь без аппаратного ускорения, но такую найти сложно. Беру чуть максимально приближённую к полноразмерной, пробую подключиться — и всё работает как нужно. Да, инпут-лаг всё-таки минимальный остаётся по сравнению с трекпадом, но всё же работать уже можно.

Если когда-то и вы сталкивались с подобным багом, то вот решение — использование только мышей без кнопки изменения DPI. RDP плохо обрабатывает/высчитывает скорость перемещения указателя, и из-за этого возникает инпут-лаг.

PS: у коллеги примерно такой же сетап, но внешний трекпад — инпут-лага не наблюдается. Видимо, трекпад — что внешний, что нативный — без аппаратного ускорения, и поэтому проблем это не вызывает.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👨‍💻42👍1🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
Новое в CSS: функция if(). Если вам мало JS в JS файлах, то давайте писать еще и в CSS

⌨️ Давно не виделись, но тут в Chrome 137 появилась функция if() прямо в CSS — и это может здорово упростить вашу жизнь. Вот как это работает:

1️⃣ Медиа‑запросы прямо в свойствах

property: if(
условие-1: значение-1;
условие-2: значение-2;
else: значение-дефолт;
);


Пример с кнопкой:
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}


🖱 Если мышь → ширина 30 px.
💻 Если сенсор → ширина 44 px

2️⃣ Проверка возможностей браузера

body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3;
);
&::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "OKLCH есть!";
else: "OKLCH нет :(";
);
}
}


Если браузер поддерживает OKLCH — используем и выводим сообщение
Если нет — делаем фолбэк

3️⃣ Состояние через атрибуты и style()

<div class="card" data-status="complete">…</div>


.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}


Done — обводка зелёная, фон светло‑зелёный
In progress — синий вариант
Другой вариант — просто серый

Почему это удобно?

Всё прямо в одном месте — не нужно переносить логику в медиа‑ или support‑запросы
Возникает ощущение "условного CSS"
Код читабельнее, проще поддержку

⚙️ Реальный пример
Представьте, что вам нужно один и тот же элемент стилизовать в зависимости от контекста:

1. При наведении — слегка увеличивать
2. На мобилах — показывать компактнее
3. Если поддерживается новый цветовой формат — использовать его.

С if() вы можете разместить всё в одном блоке:

.my-widget {
padding: if(media(max-width: 600px): 8px; else: 16px);
transform: if(style(--hovered: true): scale(1.05); else: none);
border-color: if(
supports(color: oklch(...)): oklch(...);
else: lightgray
);
}


🌈 Итог
CSS-функция if() — это мощный инструмент, делающий стили гибче и чище. Пока что это эксперимент в Chrome 137, но идея отличная и заслуживает внимания. Да, js в css снова, но зато нативно 🏖

Что думаете, коллеги? Уже прикидываете, где её применить?

#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍4🔥1
👩‍💻 TypeScript 5.9. Что стоит знать

TypeScript 5.9 вышел 1 августа 2025 и принес сразу несколько обновлений:

1. import defer - отложенный импорт для лучшей производительности

Теперь можно импортировать модуль, но не запускать его код сразу - он выполнится только при первом обращении к его экспортам. Например:

import defer * as feature from "./heavy-module.js";

// ещё ничего не произошло

console.log(feature.someValue); // только здесь выполнится модуль


Это спасение для модулей с тяжёлой инициализацией, особенно при старте приложения

2. Новый --module node20 — стабильный режим для Node.js v20

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

{
"compilerOptions": {
"module": "node20"
}
}


Этот режим точно соответствует поведению Node.js 20 и по умолчанию ставит target: es2023

3. tsc --init теперь проще и понятнее

По умолчанию генерируется компактный tsconfig.json с современными настройками:

❤️"strict": true
❤️"jsx": "react-jsx"
❤️"isolatedModules": true
… и другими, рекомендованными для современных проектов

4. Улучшенные подсказки (hover) в VS Code

❤️Expandable Hovers (Preview): теперь можно разворачивать/сворачивать типы прямо в tooltip с помощью + и –.
❤️Configurable Maximum Hover Length: длина подсказки увеличена, и её можно настроить (js/ts.hover.maximumLength), чтобы была вся нужная информация

5. Оптимизации компиляции и производительности

❤️Кэширование instantiation типов. Менее затратная компиляция при работе с большими типами (особенно для Zod, tRPC и т.п.)
❤️Более быстрые проверки существования файлов, что ускоряет компиляцию в больших проектах

Подробнее о релизе - https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/

З.Ы: В целом, ничего особенного кроме фичи с defer. Главное, что нет ничего плохого и на том спасибо

#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍2🔥1