This media is not supported in your browser
VIEW IN TELEGRAM
Нашли удобное расширение Tinkerfont, которое позволяет тестировать шрифты прямо на реальных сайтах — без DevTools и правок CSS.
Можно посмотреть, какие шрифты использует страница, заменить их на любой из 1900+ Bunny Fonts или загрузить свой, а затем сразу скопировать код подключения.
Полезный инструмент для быстрого подбора типографики.
#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
Расскажи про useDeferredValue в React. Для чего он нужен?
import { useState, useDeferredValue } from "react";
function Search() {
const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);
return (
<>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<Results query={deferredQuery} />
</>
);
}
⚠️ useDeferredValue не заменяет debounce.
Он не использует таймер, не уменьшает количество запросов к API и не предотвращает рендеры. Он лишь позволяет React выполнить обновление с более низким приоритетом.
👍 — знал/а
🔥 — стало понятнее
#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12🥰4
В Deno 2.9 появилась команда deno desktop, которая позволяет превратить проект на JavaScript или TypeScript в нативное приложение для Windows, macOS и Linux.
Поддерживаются Next.js, SvelteKit, Astro, Remix, Nuxt, Vite и другие популярные фреймворки
Можно использовать системный WebView или встроенный Chromium, а также доступны автообновления и кросс-компиляция.
#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
👏6🥰3❤2👾1
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли Comimi — JS/TS-библиотеку для создания собственных читалок прямо в браузере.
Что умеет:
— разные режимы чтения;
— несколько вариантов отображения страниц;
— гибкая настройка поведения ридера;
— подходит для веб-просмотра комиксов и манги.
Полезно, если разрабатываете собственную платформу с цифровыми изданиями или просто ищете готовое решение вместо реализации с нуля.
#stack #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🥰2🤔2
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰2
🔐 Можно ли защититься от ботов без тотального трекинга пользователей?
Mozilla представила концепцию PACT (Private Access Control Tokens) — систему анонимных учетных данных для веба.
Как работает:
🈂️ Сайт получает подтверждение, что перед ним «добросовестный пользователь», но не узнаёт его личность и не может отслеживать между сайтами.
🈂️ Вместо отпечатков браузера, обязательной регистрации или постоянных CAPTCHA предлагается использовать криптографические токены с ограничением по частоте запросов (rate limiting).
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#under_hood #security
Mozilla представила концепцию PACT (Private Access Control Tokens) — систему анонимных учетных данных для веба.
Как работает:
#under_hood #security
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔3🥰2
Если картинка должна полностью заполнить контейнер, но при этом сохранить пропорции, используйте object-fit.
img {
width: 100%;
height: 250px;
object-fit: cover;
}
Что делает object-fit: cover:
— заполняет контейнер целиком;
— сохраняет пропорции изображения;
— автоматически обрезает лишние части, если они не помещаются.
#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰3
🔥 Открытое занятие по AgentOps — курс стартовал!
Сегодня в 19:00 по МСК пройдет первое занятие нового потока, на которое может прийти каждый. Оцените пользу нашего подхода на ретрансляции урока в VK!
👨💻 Спикер: Андрей Носов
Тема: Архитектура управления: state machine для AI-агентов
Будем разбираться, как использовать State machine в качестве главного оружия против стохастики (непредсказуемости) LLM.
Что в программе:
● State machine: инварианты и терминальные состояния;
● Паттерны маршрутизации: Supervisor, ReAct, Plan-and-Solve;
● Детекция циклов и настройка аварийных выходов;
● Абстракция от модели: как сделать каркас, который переживет смену LLM/провайдера;
● Адаптация графов под ограничения локальных моделей;
● Версионирование графов и миграции стейта.
Результат занятия: Вы поймете, как спроектировать надежный каркас агента с жестким контролем исполнения и переходов.
👉 Подписывайтесь на нашу группу ВКонтакте, чтобы не пропустить старт трансляции!
Сегодня в 19:00 по МСК пройдет первое занятие нового потока, на которое может прийти каждый. Оцените пользу нашего подхода на ретрансляции урока в VK!
👨💻 Спикер: Андрей Носов
Тема: Архитектура управления: state machine для AI-агентов
Будем разбираться, как использовать State machine в качестве главного оружия против стохастики (непредсказуемости) LLM.
Что в программе:
● State machine: инварианты и терминальные состояния;
● Паттерны маршрутизации: Supervisor, ReAct, Plan-and-Solve;
● Детекция циклов и настройка аварийных выходов;
● Абстракция от модели: как сделать каркас, который переживет смену LLM/провайдера;
● Адаптация графов под ограничения локальных моделей;
● Версионирование графов и миграции стейта.
Результат занятия: Вы поймете, как спроектировать надежный каркас агента с жестким контролем исполнения и переходов.
👉 Подписывайтесь на нашу группу ВКонтакте, чтобы не пропустить старт трансляции!
🥰2
В Wasp объяснили, почему в экосистеме JavaScript нельзя просто установить один пакет, который сразу добавит UI, серверную логику, миграции и API.
#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4
Иногда ветку удаляют по ошибке — локально или даже на удалённом репозитории. А потом всплывает, что там был нужный код или незавершённая работа. Поднимать заново неудобно, особенно если не помнишь последний коммит.
Решение:
git reflog
git checkout -b my-branch <commit_hash>
— git reflog покажет историю всех действий, даже удалённых веток,
— можно найти нужный commit_hash,
— checkout -b создаст ветку заново с того же коммита.
#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🥰4🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
В Safari появилась поддержка display: grid-lanes — нового режима раскладки для Pinterest-подобных сеток.
Теперь карточки разной высоты можно размещать без JavaScript и сторонних библиотек:
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Apple подготовила отдельный сайт с примерами, интерактивными демо и подробным гайдом по новой возможности.
⚠️ Пока grid-lanes работает только в Safari.
#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10🥰4👍2👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Оказывается, для этого уже есть calc-size().
Вместо фиксированной высоты можно написать:
min-block-size: calc-size(fit-content, min(size, 12em));
max-block-size: calc-size(stretch, min(size, 30em));
Такой подход позволяет <select> автоматически подстраиваться под количество элементов, но при этом не занимать весь экран и не становиться слишком маленьким.
Пока calc-size() поддерживается не везде, поэтому автор показывает, как реализовать кроссбраузерный fallback.
#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤4🥰3
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Meta открыла исходный код своей дизайн-системы Astryx
Компания выложила в open source Astryx — внутреннюю дизайн-систему, которую использует уже более 8 лет.
Что внутри:
🔹 150+ готовых UI-компонентов;
🔹 7 встроенных тем оформления;
🔹 поддержка кастомизации;
🔹 ориентирована на создание крупных интерфейсов.
🤖 Хотите глубже разобраться, как AI помогает в современной разработке? Посмотрите курс по AI-агентам в Proglib Academy 🔗
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack
Компания выложила в open source Astryx — внутреннюю дизайн-систему, которую использует уже более 8 лет.
Что внутри:
🔹 150+ готовых UI-компонентов;
🔹 7 встроенных тем оформления;
🔹 поддержка кастомизации;
🔹 ориентирована на создание крупных интерфейсов.
#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥5🥰3
🔥 Каверзный вопрос с собеса
Метод
🔍 Что происходит на самом деле:
➕ radix = 0 означает автоопределение системы счисления:
• если строка начинается с '0x' или '0X' → основание = 16
• во всех остальных случаях → используется основание = 10
Поэтому '1' интерпретируется как десятичная.
➕ системы счисления с основанием 1 не существует => Nan
➕ '11' в двоичной системе — это 3₁₀ => 3
❇️ parseInt('11', 2) парсит всю строку как двоичную, потому что она корректна полностью.
Распространённый миф — будто бы берётся только первый символ; это неверно.
✅ Как исправить:
Или проще:
🐸 Библиотека фронтендера
#career_merge #middle
Метод
.map() передаёт в колбэк три аргумента: текущий элемент, индекс и исходный массив. Функция parseInt принимает: строку и radix — основание системы счисления. Поэтому индекс массива попадает в radix.
parseInt('1', 0)
• если строка начинается с '0x' или '0X' → основание = 16
• во всех остальных случаях → используется основание = 10
Поэтому '1' интерпретируется как десятичная.
parseInt('7', 1)
parseInt('11', 2)
Распространённый миф — будто бы берётся только первый символ; это неверно.
['1', '7', '11'].map(str => parseInt(str))
Или проще:
['1', '7', '11'].map(Number)
#career_merge #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍4🌚2👏1
🔥 ИИ-выходные: Собери своего AI-агента за 2 дня
Хватит просто читать про ИИ, пора собирать автономные системы руками! 1–2 августа пройдет хардкорный онлайн-интенсив для junior-middle разработчиков.
Формат: теория ➡️ сразу практика. Вы будете управлять AI-инструментами.
🛠️ Как всё пройдет:
Для кого: Вы пишете на Python, работаете с Git и терминалом. (С нуля не подойдет, темп очень быстрый!)
Артефакт на выходе: Рабочий репозиторий с вашим агентом, который не стыдно показать команде.
👨💻 Спикер: Алексей Жиряков (Сбер, GenAI).
Места ограничены!
👉 Изучить программу и занять место
Хватит просто читать про ИИ, пора собирать автономные системы руками! 1–2 августа пройдет хардкорный онлайн-интенсив для junior-middle разработчиков.
Формат: теория ➡️ сразу практика. Вы будете управлять AI-инструментами.
🛠️ Как всё пройдет:
День 1 (Суббота): разбираем анатомию агента, подключаем инструменты (shell, GitHub, Postgres) и дебажим трейсы.
День 2 (Воскресенье): собираем собственного агента под вашу задачу, настраиваем Eval + Guardrails (чтобы бот не галлюцинировал) и проводим демо.
Для кого: Вы пишете на Python, работаете с Git и терминалом. (С нуля не подойдет, темп очень быстрый!)
Артефакт на выходе: Рабочий репозиторий с вашим агентом, который не стыдно показать команде.
👨💻 Спикер: Алексей Жиряков (Сбер, GenAI).
Места ограничены!
👉 Изучить программу и занять место
❤3🥰2🙏2
React Tips - Memoization is NOT a Performance Strategy.pdf
300.3 KB
Когда приложение начинает тормозить, многие сразу добавляют useMemo, useCallback или React.memo. На практике главный прирост производительности чаще дает архитектура компонентов.
Что действительно помогает:
🔵 держать состояние как можно ближе к месту использования;🔵 не поднимать state выше, чем это необходимо;🔵 уменьшать количество лишних ререндеров;🔵 использовать мемоизацию только там, где она действительно оправдана.
#under_hood #react
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍4🥰2
Главное изменение релиза — нативный порт TypeScript на Go. Теперь tsc, language server, автодополнение, диагностика и --watch работают заметно быстрее, особенно на больших кодовых базах.
По данным команды TypeScript, на крупных проектах ускорение сборки обычно составляет 8–12x. Например:
🔵 VS Code: 125.7s → 10.6s🔵 Sentry: 139.8s → 15.7s🔵 Playwright: 12.8s → 1.47s
В TypeScript 7.0 пока нет стабильного программного API, поэтому часть инструментов и фреймворков вроде Vue, Astro, Svelte, MDX и Angular-шаблонов может пока оставаться на TypeScript 6.
#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
👏7🥰3🔥2👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁15
🤨 Как заставить AI-агента не ломать архитектуру, а нормально писать код?
Мы привыкли общаться с ИИ промптами, но для автономных систем это путь к бесконечным циклам и сливу бюджета. Чтобы убрать хаос, инженеры переходят на Spec-Driven Development (SDD).
Вот как этот подход меняет работу агента на практике:
🔹Контракт вместо текста. Сначала пишется строгая спецификация (JSON-схема/OpenAPI) и автотесты. Агент зажат в рамки интерфейсов, за которые физически не может выйти.
🔹Контроль на шагах. Внутри петли Think-Act-Observe агент сверяет действия со спецификацией.
🔹Саморефлексия. Если ИИ нарушил типы или «додумал» лишнее, тест падает. Агент получает ошибку в контекст и сам правит код, не выходя за рамки ТЗ.
Это лишь база того, как укротить ИИ-разработку. Если вы хотите глубоко внедрить эту методологию, научиться проектировать архитектурные контракты и собирать отказоустойчивые системы — оставляйте заявку на наш новый курс по Spec-Driven Development. Стартуем совсем скоро🙂
Мы привыкли общаться с ИИ промптами, но для автономных систем это путь к бесконечным циклам и сливу бюджета. Чтобы убрать хаос, инженеры переходят на Spec-Driven Development (SDD).
Вот как этот подход меняет работу агента на практике:
🔹Контракт вместо текста. Сначала пишется строгая спецификация (JSON-схема/OpenAPI) и автотесты. Агент зажат в рамки интерфейсов, за которые физически не может выйти.
🔹Контроль на шагах. Внутри петли Think-Act-Observe агент сверяет действия со спецификацией.
🔹Саморефлексия. Если ИИ нарушил типы или «додумал» лишнее, тест падает. Агент получает ошибку в контекст и сам правит код, не выходя за рамки ТЗ.
Это лишь база того, как укротить ИИ-разработку. Если вы хотите глубоко внедрить эту методологию, научиться проектировать архитектурные контракты и собирать отказоустойчивые системы — оставляйте заявку на наш новый курс по Spec-Driven Development. Стартуем совсем скоро🙂
🥰3
В этой подборке мы сосредоточимся на использовании watch и watchEffect в Vue.js для отслеживания изменений в данных и выполнения действий в ответ на эти изменения.
1. Watch и WatchEffect на практике — примеры самых часто используемых компонентов вместе с наблюдателями.
2. Работа с состоянием во Vue и React — отличия, использование, как перекликаются между двумя фреймворками.
3. watch vs watchEffect — когда использовать какой подход
4. Как выбрать библиотеку для управления состоянием — преимущества и недостатки Vuex и Pinia, а также советы по выбору подходящего инструмента для вашего проекта.
5. watchEffect — введение в watchEffect, который автоматически отслеживает все реактивные зависимости внутри своей функции.
#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🥰3🙏1🥱1