Cloudflare выпустила ежегодный отчет по статусу интернета во всем мире.
Пробежимся по самому интересному:
Настоятельно рекомендую к прочтению всем. Очень подробно с графиками и цифрами каждый пункт описан
Ссылка - Cloudflare 2024 Year in Review
#news
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3✍1👏1
Мне на почту пришло письмо с информацией о включении Github Copilot в моей аккаунт. Перешел по ссылке, скачал плагин для вебшторма и все заработало
Про оплату ни строчки не встретил
Но не забываем, что это не генератор, а только помощник, а именно copilot (второй пилот)
Каждый его ответ проверяем и, либо модифицируем под бизнес/требования/задачу, либо как можно больше уточнений ему скрамливаем.
#dev #ai
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2✍1
В альфа-версию вышла довольно интересная unstyled UI-библиотека, где в число авторов вошли Material UI.
Одной из самых главных проблем всех подобных библиотек является невозможность безболезненно стилизовать импортируемые компоненты. В Base UI все компоненты поставляются "голыми".
В итоге разработчик получает функциональные и доступные (a11y) компоненты, которые легко интегрировать с любой дизайн-системой, будь то Tailwind, CSS-модули или CSS-in-JS.
Кроме того, из коробки многие компоненты имеют дата-атрибуты. Например, для Switch можно использовать атрибуты
[data-checked]
и [data-unchecked]
для стилизации.Примеры компонентов Base UI:
Рассмотрим на первый взгляд простой, но гибкий в разработке компонент — 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 или других стайлинговых решений
Все компоненты спроектированы с учётом доступности, что упрощает разработку интерфейсов, соответствующих стандартам WCAG
Можно импортировать только нужные компоненты, что сокращает объём бандла и улучшает производительность приложения
Все компоненты написаны на TypeScript, что обеспечивает строгую типизацию и лучшее взаимодействие с IDE.
Ссылка
Очень советую попробовать эту библиотеку, если раньше не доводилось работать с подобными (TanStack и тд).
Одним из недостатков на данный момент отмечу то, что она поддерживает только React. Однако не думаю, что это является существенным минусом - для альфа-версии это вполне простительно.
#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥2✍1👍1
Всем привет! Думаю, лучше времени для такого поста уже не будет, поэтому в перерыве между порциями шашлыка и отдыха предлагаю посмотреть на природу и начало загородной жизни
На данный момент участок выровняли. Была куча земли посередине — разровняли. Следующим шагом уже будет стройка (надеюсь)
В будущем могу подробнее рассказывать про этапы строительства и про то, каково это — заниматься стройкой сейчас: цены, подведение электричества, необходимые работы, личный опыт и т. д. Занимаюсь своими руками всем, чем могу. Приобрел вот фермерскую бензопилу, научился ею пользоваться и обслуживать, например.
Такие посты будут редкими на канале — просто чтобы разбавить технические (хоть последний и был "несколько дней назад")
#стройка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍4 2
🔥 Вышла Node.js 24: что важно знать фронтендерам (и бэкендерам тоже!)
📣 Из главных новостей:
✅ Новые JavaScript фичи — обновился движок js (V8), теперь есть поддержка
✅ URLPattern становится глобальным — Не нужно больше импортировать его вручную, что отлично подходит для чистой маршрутизации и сопоставления URL-адресов без регулярок
✅ Улучшили встроенный инструмент для тестов — мало, кто знал (я в том числе), но простенькие тесты можно писать без
✅ NPM v11 - завезли производительности, улучшение безопасности и лучшую совместимость с современными пакетами js, например, с
Что касается разработки бэкенда:
➡️ Улучшение в node:fs — методы для работы с файлами стали стабильнее (например, fs.openAsBlob())
➡️ Безопасность — обновления в криптографии и TLS
➡️ Worker Threads — меньше накладных расходов при работе с потоками
⚠️ Deprecations. Что устарело и больше не будет поддерживаться:
🔹 url.parse() в рантайме — теперь нужно использовать WHATWG URL API
🔹 tls.createSecurePair — удалено как устаревшее
🔹 SlowBuffer — устарел в рантайме
И несколько еще минорных изменений
👀 Отпишитесь, как вам обновление. Полезно или нет?
Мне, как фронтенд разработчику, выделилось только обновления в тест раннерах (я вообще о таком даже и не знал)
#dev #news
Not just another update!
RegExp.escape
, Float16Array
, Error.isError
и много чего другого, что приближает Node к современному браузерному js и избавляет вас от необходимости разрабатывать собственные велосипедыmocha
или jest
, а использовать встроенную утилиту node:test
import { test } from 'node:test';
test('check sum', () => { assert.equal(1+1, 2) });
esbuild
или vite
Что касается разработки бэкенда:
И несколько еще минорных изменений
Мне, как фронтенд разработчику, выделилось только обновления в тест раннерах (я вообще о таком даже и не знал)
#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍3✍1
Начинаем утро с напоминания о такой штуке, как HTML, и что совсем не обязательно повсеместно использовать фреймворки в каждом проекте.
По ссылке можно вспомнить
https://justfuckingusehtml.com/
#dev
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3🔥2👏1😁1
На одном из проектов мне понадобилось подключиться к удалённому рабочему столу винды с мака, и это была целая история, о которой я и поведаю. На удивление, в интернетах крайне мало информации о проблемах, с которыми я столкнулся, и поэтому уверен, что кому-то пригодится эта информация.
Итак, начнём с железа.
- 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
👨💻4❤2👍1🔥1
✨ Новое в CSS: функция if(). Если вам мало JS в JS файлах, то давайте писать еще и в CSS
⌨️ Давно не виделись, но тут в Chrome 137 появилась функция if() прямо в CSS — и это может здорово упростить вашу жизнь. Вот как это работает:
1️⃣ Медиа‑запросы прямо в свойствах
Пример с кнопкой:
🖱 Если мышь → ширина 30 px.
💻 Если сенсор → ширина 44 px
2️⃣ Проверка возможностей браузера
Если браузер поддерживает OKLCH — используем и выводим сообщение
Если нет — делаем фолбэк
3️⃣ Состояние через атрибуты и style()
Done — обводка зелёная, фон светло‑зелёный
In progress — синий вариант
Другой вариант — просто серый
✅ Почему это удобно?
Всё прямо в одном месте — не нужно переносить логику в медиа‑ или support‑запросы
Возникает ощущение "условного CSS"
Код читабельнее, проще поддержку
⚙️ Реальный пример
Представьте, что вам нужно один и тот же элемент стилизовать в зависимости от контекста:
1. При наведении — слегка увеличивать
2. На мобилах — показывать компактнее
3. Если поддерживается новый цветовой формат — использовать его.
С
🌈 Итог
CSS-функция🏖
Что думаете, коллеги? Уже прикидываете, где её применить?
#dev #news
property: if(
условие-1: значение-1;
условие-2: значение-2;
else: значение-дефолт;
);
Пример с кнопкой:
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
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 — используем и выводим сообщение
Если нет — делаем фолбэк
<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
Aleksandr Rogozhkin
Please open Telegram to view this post
VIEW IN TELEGRAM
😢5🤔2🤯1
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
js/ts.hover.maximumLength
), чтобы была вся нужная информация5. Оптимизации компиляции и производительности
Подробнее о релизе - https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/
З.Ы: В целом, ничего особенного кроме фичи с defer. Главное, что нет ничего плохого и на том спасибо
#dev #news
Please open Telegram to view this post
VIEW IN TELEGRAM
Что слушаешь фоном за работой? (можно несколько ответов)
Anonymous Poll
42%
Музыка (жанр по настроению)
17%
Белый шум (дождь, костер, ветер и тд)
8%
Аудиокниги
50%
В полной тишине с включенным шумодавом
50%
Естественные не отвлекающие звуки (кафейня, летник и тд)
8%
Свой вариант дополню в комментариях