Фронтенд

Переписываем примеры из популярных стейт-менеджеров на kr-observable используя только две функции.

Удивляюсь вот чему — облачные провайдеры ИИ / создатели моделей и агентов вроде OpenAI, Anthropic, Perplexity — тратят многие миллиарды долларов на создание и обучение своих моделей, одно только "железо" стоит миллиарды и требует постоянного обновления... Лучшие умы планеты, которых переханчивают в Meta за сотни миллионов долларов создают невероятные модели. Сотни разметчиков размечают данные, лучшие девопсы раскатывают десятки тысяч серверов, чтобы всё работало быстро и стабильно.

При этом desktop-приложения (да и мобильные тоже) у всех них — просто слёзы (я активно использую LLM и ИИ-агенты и у меня подписки на десятки сервисов, есть уже статистика). Такое наверное хороший студент может написать за месяц, но только лучше.

Как вообще такое может быть?...

Можно было бы очень долго перечислять конкретные недостатки: отсутствие возможности сохранить файл в perplexity (нужно выделять копировать текст целиком), невозможность удобно скопировать текст почти везде (то MD-форматирование теряется, то реализовно неудобно), сильно ограниченный функционал "проектов" в OpenAI (ими нельзя поделиться, по ним нельзя искать итп) и так далее.

Как так получается у них — я не понимаю)

7 полезных плагинов для фронтенд-разработки в VS Code!

Сегодня хочу поделиться с вами списком полезных плагинов для Visual Studio Code, которые упростят вашу работу и повысят производительность.

1. ESLint — находит ошибки и баги в JS/TS коде. Незаменим для профессиональной разработки. 🛠

2. Prettier — автоматически форматирует код по стандартам. Никаких споров о стилях! 📊

3. Code Spell Checker — ищет опечатки в коде и комментариях. Больше никаких ошибок из-за опечаток! Для русского языка нужно установить дополнительный плагин Russian - Code Spell Checker 🔍

4. DotENV — подсветка синтаксиса для .env файлов. Переменные окружения больше не путаются! 📦

5. GitLens — показывает, кто и когда менял каждую строку кода. Незаменим для работы в команде.

6. NPM outdated — показывает устаревшие зависимости в проекте. Не пропустите важные обновления! ⏳

7. SonarQube — анализирует качество кода, ищет уязвимости. 🔐

Установите эти плагины и сделайте свою работу ещё эффективнее! 💻

Сделал для Хабра чорный минималистичный широкий userstyle, возможно вам тоже понравится

https://gitlab.com/vitaly-zdanevich-styles/habr

Жёсткая структура React-компонентов

При работе над React-приложениями я часто сталкиваюсь с тем, что мои коллеги смешивают в одном файле и JSX, и CSS-in-JS стили, и логику, и типы компонента. Работать с таким месивом очень сложно. Даже если настаивать на выделении логики, стилей и типов в отдельные файлы, это то делается, то нет. Для введения жёсткой структуры компонентов мною была написана простейшая библиотека react-component-structure.

https://github.com/sergeyshpadyrev/react-component-structure

Работает она простейшим образом. Любой компонент необходимо разделить на три хука и файл с типами:

-| Component
    -| index.ts
    -| logic.ts
    -| render.tsx
    -| style.ts
    -| types.ts

В файле logic.ts мы пишем хук useLogic - контроллер компонента, включающий в себя всю его бизнес-логику - все хуки useCallback, useEffect, useMemo и подобные. В этом хуке у нас есть доступ к props компонента.

import { useCallback, useState } from 'react';
import type { Props } from './types';

const useLogic = (props: Props) => {
    const [count, setCount] = useState(props.defaultCount);

    const onClickMinus = useCallback(() => setCount((c) => c - 1), []);
    const onClickPlus = useCallback(() => setCount((c) => c + 1), []);

    return {
        count,
        onClickMinus,
        onClickPlus,
    };
};

export default useLogic;

В файле styles.ts мы помещаем хук useStyle со стилями нашего компонента. Тут мы можем использовать inline-стили, CSS-in-JS или Tailwind. В этом хуке у нас есть доступ к props нашего компонента и к его контроллеру.

import type { Props } from './types';
import useLogic from './logic';
import { useMemo } from 'react';

const useStyle = (props: Props, logic: ReturnType<typeof useLogic>) =>
    useMemo(
        () => ({
            counter: {
                fontSize: logic.count + 10,
            },
            title: {
                color: props.color,
            },
        }),
        [logic.count, props.color],
    );

export default useStyle;

В файле render.tsx мы помещаем хук useRender с JSX, то бишь отображение компонента. В этом хуке у нас есть доступ и к props компонента, и к его контроллеру logic, и к стилям.

import type { Props } from './types';
import type useLogic from './logic';
import type useStyle from './style';

const useRender = (props: Props, logic: ReturnType<typeof useLogic>, style: ReturnType<typeof useStyle>) => {
    return (
        <div>
            <div style={style.title}>Hello {props.greeting}!</div>
            <div style={style.counter}>Count: {logic.count}</div>
            <div onClick={logic.onClickMinus}>Decrease</div>
            <div onClick={logic.onClickPlus}>Increase</div>
        </div>
    );
};

export default useRender;

В index.ts файле мы соединяем все три хука с помощью функции createComponent:

import { createComponent } from 'react-component-structure';

import useLogic from './logic';
import useRender from './render';
import useStyle from './style';

const Component = createComponent({ useLogic, useRender, useStyle });

export default Component;

И в файле types.ts мы объявляем тип для props компонента:

export interface Props {
    color: string;
    defaultCount: number;
    greeting: string;
}

Если у компонента нет props, то можно объявить их так:

export type Props = unknown

При использовании каждый компонент нашего приложения имеет чёткую структуру, состоящую из файлов контроллера, отображения, стилей и типов. Это разделение подобно разделению на HTML (отображение), CSS (стили) и JavaScript (контроллер) в ванильных JS-приложениях.

Если подход и библиотека вам понравились, поставьте репозиторию звезду на гитхабе. Надеюсь этот подход будет вам полезен.

Unit-тесты во фронтенде: развеиваем мифы

После статьи о навыках джуниоров многие не согласились с моей оценкой unit-тестов. Давайте посмотрим, где они действительно полезны, а где создают иллюзию ценности.

Если вы начинающий разработчик, вас наверняка убеждали:
«Без unit-тестов никуда! Всё должно быть покрыто тестами!»
Но так ли это на самом деле?

Где unit-тесты полезны:

• Бизнес-логика и утилиты (форматирование данных, расчёты)

• Кастомные хуки (управление состоянием, формы)

• Критичные функции (редкий зверь во фронтенде)

Где они бесполезны (и даже вредны):

• UI-компоненты (скриншотные тесты часто ломаются из-за изменений вёрстки)

• API с моками (моки не показывают реальное поведение сервера)

• Тестирование библиотек (проверяете чужой код)

Что использовать вместо?

1. Интеграционные тесты — проверяют реальные сценарии

2. Zod для валидации API — предотвращает ошибки из-за неожиданных данных

3. Ручные проверки — быстрее и точнее, чем скриншотные тесты

Для джуниора unit-тесты — не приоритет. Важнее:

• Глубокое изучение фреймворка

• Умение работать с API

• Навык чтения и отладки кода

Не стоит тратить время на «тесты ради тестов». Сосредоточьтесь на том, что действительно поможет в работе.

«То, для чего Cи недостаточно хорош»: МойОфис выпустил трёхтомник по Lua

Lua — актуальный и востребованный в разработке язык программирования, но литературы на русском языке про него по-прежнему немного. Мы решили это исправить и выпускаем трёхтомник, в котором собрали всё, что нужно знать о Lua, и показали, как именно он работает на примере редакторов МойОфис — от основ синтаксиса до создания надстроек и автоматизации обработки электронных документов.

«Lua предлагает то, для чего Си недостаточно хорош: достаточную удалённость от аппаратного обеспечения, динамические структуры, отсутствие избыточности и лёгкость тестирования и отладки. С самого начала Lua создавался для реальных сценариев взаимодействия с хост-программами, такими как МойОфис, и предлагает инструменты для опытных программистов, чтобы проявить свои творческие способности», — Роберту Иерузалимски, один из основных создателей языка программирования Lua.

Первый том — уже третье переиздание классической книги Роберту. Предыдущие два издания также вышли в свет при поддержке МойОфис.

Второй и третий тома — первый выпуск учебников Дмитрия Шульгина, старшего тренера по продуктам Учебного центра МойОфис («Хаб Знаний МойОфис»), посвященных созданию макрокоманд и надстроек в наших текстовых и табличных редакторах.

В них вы найдёте:

• что такое макросы и надстройки, как устроена автоматизация в МойОфис и зачем все это нужно (к слову, о разработке макросов мы подробно писали здесь);

• основы Lua — от переменных и типов данных до пользовательских функций;

• примеры работы со списками, листами, ячейками, а также задания для закрепления материала;

• примеры создания надстроек для ускорения и автоматизации операций: от вставки изображений и рецензирования до печати и локализации интерфейса.

Каждая глава сочетает теорию, рекомендации и практические задания, которые можно выполнить прямо в наших редакторах.

Книга подойдёт как опытным разработчикам, так и новичкам в Lua и автоматизации. А если хотите глубже погрузиться в тему — присоединяйтесь к нашим курсам по Lua.

Чек-лист для эффективного технического интервью

1. Подготовка: что сделать перед собеседованием

• Определите 3 главных навыка, необходимых для вакансии. Например: «Оптимизация React», «Работа с легаси-кодом (React классы)», «Работа с Redux».

• Подготовьте реальные задачи из вашего проекта, а не абстрактные алгоритмы.

• Четко опишите стек технологий и проблемы проекта, чтобы кандидат понимал контекст.

Пример: «У нас проект на React 16.8. Остались классовые компоненты, которые нужно переписать на хуки, и мы используем классический Redux».

2. Структура собеседования

А. Вводная часть (5-10 минут)

• Представьтесь и расскажите о проекте простым и понятным языком.

• Спросите кандидата, есть ли у него опыт работы над подобными задачами.

Б. Проверка навыков (30-50 минут)

1. Практическая задача (5-10 минут)

   • Дайте кандидату упрощенную версию реальной проблемы. Например: «Нужно переписать классовый компонент на хуки и подключить его к Redux, а затем оптимизировать рендер».

   • Позвольте кандидату воспользоваться интернетом для поиска информации. Главное, чтобы он показал процесс решения задачи, а не просто копировал ответ.

2. Гибкие вопросы (5-10 минут)

   • В процессе выполнения задачи или после ее завершения (на мой взгляд, лучше после) задавайте вопросы, которые помогут вам лучше понять подход кандидата.

   Пример: «Вы использовали кеширование. Расскажите подробнее, как это поможет нашему проекту?»

3. Финальное обсуждение задачи (10-15 минут)

   • Обсудите решение задачи целиком, что получилось, а что можно улучшить.

4. Если все навыки не уместились в одну задачу, вернитесь к шагу 1.

В. Заключение (5-10 минут)

• Дайте кандидату возможность задать вопросы о проекте.

• Объясните, какие будут следующие шаги, чтобы не оставлять его в подвешенном состоянии.

3. Критерии оценки

Оценивайте кандидата по конкретным показателям, а не по субъективным впечатлениям:

1. Понимание проблемы — видит ли кандидат суть задачи?

2. Процесс решения — как ищет ответ, какие вопросы задает?

3. Качество кода — читаемость, оптимизация.

4. Коммуникация — может ли кандидат объяснить свои решения?

Пример оценки:

• ✅ «Правильно переписал с классов на хуки и подключил Redux» — отличный кандидат!

• ⚠️ «Правильно настроил кеширование, но забыл useCallback в одном месте» — нужно обсудить детали.

• ❌ «Не смог объяснить, почему компонент ререндерится» — потенциальные риски для проекта.

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

В SpaceWeb запустили конструктор сайтов с ИИ

Новый день – новый релиз! Сегодня рассказываем о новой фиче — интегрировали в конструктор сайтов SpaceWeb искусственный интеллект. В обновленной версии можно быстро запустить сайт и подготовить референсы для клиентских проектов. Интерфейс генератора сайтов максимально удобен и интуитивен: с помощью функции перетаскивания и поддержки искусственного интеллекта можно легко настроить сайт под свои нужды и сделать его уникальным. 

Что делает ИИ в конструкторе?

• Генерирует контент: автоматически создает заголовки, тексты и разделы сайта.

• SEO-оптимизирует: формирует мета-заголовки, мета-описания и ключевые слова, помогая продвигать сайт в поисковых системах.

• Обновляет и редактирует сайт: быстро и легко вносит изменения в структуру, контент и оформление.

• Адаптирует веб-ресурс под задачи бизнеса: в конструктор встроено 200 шаблонов, среди которых обязательно найдется подходящий.

В конструктор также интегрированы инструменты для онлайн-торговли, есть большой выбор плагинов, подключена защита от DDoS уровня L3-L4, автоматически фильтрующая трафик от сетевых и транспортных атак. Создавать сайты можно сразу на нескольких языках, благодаря автоматической поддержке более 50 языков. Тарификация зависит от числа сайтов, объема диска и количества шаблонов. Протестировать новый сервис можно уже сейчас на сайте.

30 лет без дизайна и миллиард в кассе

На днях я рассказывал историю о том, как в 2004-м «улучшил» простую гостевую книгу, заменив ее на «правильный» форум и этим убил живое сообщество. Главный вывод был в том, что нельзя ломать работающую систему, не поняв, какую настоящую задачу она решает для пользователей.

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

Для тех, кто не в курсе: Craigslist - это что-то типа Авито, но в США, т.е. такая гигантская доска объявлений. Ее дизайн застрял где-то в 1998 году: синие ссылки, простейшая верстка, ноль графики. По любым современным меркам UI/UX - это катастрофа. При этом компания с крошечной командой зарабатывает сотни миллионов (а по некоторым оценкам - более миллиарда) долларов в год. Работает там от силы 50 человек (!) Если пересчитаем выручку, то окажется, что на каждого сотрудника приходится 4 млн. долларов в год (!) Очень круто!

И тут я смотрю на Craigslist и понимаю: их «ужасный» сайт — это моя «неудобная» гостевая книга, только в масштабе всей Америки. Они поняли то, чего не понял я в 20 лет, и не стали «чинить» то, что не сломано.

Почему этот «примитивный» дизайн работает и приносит миллиарды?

1. Скорость. Сайт загружается мгновенно. Нет тяжелых фреймворков, мегабайтов JavaScript и аналитических скриптов. Чистая функция.

2. Плотность информации. Никаких баннеров, всплывающих окон и модных карточек. Только текст и ссылки. Вы видите максимум полезной информации на одном экране.

3. Отсутствие трения. Хочешь разместить объявление? Нажимай и размещай. Не нужна регистрация (как я понял), подтверждение почты и двухфакторная аутентификация, чтобы продать старый стул. Сервис не мешает тебе делать то, зачем ты пришел.

4. Привычка. Миллионы людей пользуются им десятилетиями. Они знают каждую ссылку наизусть. Любой редизайн вызовет у этой аудитории не восторг, а гнев. Они потеряют свой привычный и предсказуемый инструмент.

Мой «улучшенный» форум вводил трение: регистрация, создание тем, сложная структура. Я убил легкость и анонимность. Точно так же любой «современный» редизайн Craigslist с React, модными анимациями и персонализацией убьет его главное преимущество - скорость и простоту.

Вывод для любого IT-руководителя:

Это вечный соблазн для любого технаря — переписать старое, «кривое», но работающее легаси на новый, блестящий стек. Нам кажется, что мы сделаем «лучше». Но главный вопрос: «лучше» для кого? Для вас или для пользователя, который просто хочет за 3 секунды решить свою задачу?

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

А в вашей практике есть свой внутренний «Craigslist»? Старый, неудобный, но незаменимый сервис, который все мечтают переписать, но боятся трогать?

---

Понравилась эта история? Это пример того, как я анализирую ошибки и извлекаю из них практические уроки. В моем ТГ канале Код ИТ-директора я гораздо чаще делюсь подобными мыслями, короткими кейсами и полезными инструментами, которые не всегда доходят до формата большой статьи.

Там — больше «живых» заметок из окопов управления IT-бизнесом и возможность напрямую задать вопрос.

Подписывайтесь, что бы получать больше инсайтов без воды Тыц

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

Реакт уже никогда в жизни не догонит angular по производительности и функциональности) Рано или поздно от реакта откажутся, потому что библиотека всегда будет уступать полноценному фреймворку. Жду коммы от джунов, которые в жизни не работали с крупными проектами

Теперь реки, озёра и моря на карте 2ГИС стали реалистичнее — с солнечными бликами и волнами.

Для начала, чтобы придать поверхности глубину и рельефность, мы перешли от плоских текстур к текстурам с нормалями. Это позволило воде реагировать на свет: в зависимости от направления освещения она начинает вести себя по-разному — появляется объём, тени на гребнях, есть ощущение материи.

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

Увидеть это великолепие уже можно в веб-версии 2ГИС и в самых свежих версиях для мобильных платформ.

Про текстуры ещё можно прочитать в наших статьях про небо и освещение.

🔥 Монолитный фронтенд тормозит ваш проект? Пора задуматься о микрофронтендах!

Если разработка кажется бесконечной, внедрение фич превращается в квест, а код стал клубком из зависимостей — вы не одни. Мы знаем эту боль не понаслышке!

Наш новый вебинар «Архитектурный перелом: что делать, когда фронтенд трещит по швам» — это честный разговор о реальном пути перехода от монолитного фронтенда к микрофронтендам. Никакой воды, только реальный опыт: когда сложность системы достигла критической точки, мы решились на глобальные перемены.

📅 Дата: 14.08.2025

⏰ Время: 17:00-18:00 (Мск)

👨‍🎓 Спикер: Акманова Елизавета — старший аналитик ГК «Юзтех», преподаватель школы системного анализа.

Что будет на эфире?

✔️ Разберем объективные причины, которые подтолкнули нас к смене архитектуры.

✔️ Реальные плюсы и минусы микрофронтендов.

✔️ Практические кейсы, неочевидные вызовы и решения.

✔️ Честные выводы и советы, чтобы ваш переход был максимально гладким.

👉Зарегистрироваться

SOLID как священная корова? 🤔
Я думал, что пост о «фальшивых сеньорах» пройдёт спокойно — ну, очередной крик души о собеседованиях. 😅 Но нет! Хабровчане увидели слово «SOLID» и решили, что это вызов их святыне. Хотя я ничего плохого про него не сказал — просто отметил, что в React 2025 спрашивают про него по инерции. 😕

Где магия, а где фарс? ✨
Комментатор с саркастичным «быдлокод» (спасибо за реакцию, коллега!) будто подтвердил мою мысль: SOLID — это не религия, а инструмент. 🛠
SRP (Single Responsibility) в React — это о компонентах. Но если ваш «компонент формы» содержит логику, стили, валидацию и даже полёт на Марс, это не нарушение SOLID’а, а просто плохой код. 🌙
DIP (Dependency Inversion) в мире хуков и Context API чаще выглядит как «передать пропс» или «создать useClient», чем как «абстрактный фабричный фасад». 🧩
LSP (Liskov Substitution) в функциональном программировании? Его там просто нет. Или вы верите, что Button и IconButton должны наследоваться от AbstractClickable? 🤔

Если кандидат не может объяснить даже это, а только бормочет о «SOLID — это про ответственность» и использует ChatGPT, это не про принципы, а про некомпетентность. 🙅‍♂️

Про GPT и кандидатов-попугаев 🦜
«Чатжпт вам расскажет» — именно! Но если человек не может пересказать своими словами, он не понимает. А если не понимает, как он будет применять это на практике? 😵

Вывод 📜
SOLID — это хорошо. Плохо — догматично использовать его без понимания, где он нужен, а где создаёт лишние сложности. 🚫

🤡 «Фальшивые сеньоры»: как меня пытались обмануть кандидаты

Кандидат с «идеальной памятью»

Сидит передо мной разработчик. Отвечает на вопросы... странно:

Простые вещи вроде «что такое замыкание» — щёлкает как орешки.

Сложные вопросы — делает паузу на 15 секунд... и выдаёт академический ответ.

Решил проверить на практике:

✅ Теория — 10 из 10

❓ Практика — 6 из 10: простые и типовые задачи легко, рефакторинг с адской болью

❌ Объяснить, что и для чего делал — 0 из 10. Поддержать диалог, хоть как-то отойти от шаблонов — это всё не про таких кандидатов.

Напоминает студента, который выучил билеты, но не понимает предмет. Скорее всего, ему кто-то подсказывал, или он просто зазубрил типовые ответы.

«SOLID? Ну это когда ответственно»

Обычно я не люблю спрашивать про SOLID (кому вообще это нужно в React в 2025?). Но тут поведение кандидата было подозрительным — решил проверить.

Диалог:

— Расскажи про SOLID

— Это принцип единственной ответственности!

— Я жду продолжения

— Всё...

— Больше ничего не помнишь?

— Ну это основная часть....💥

Тут всё еще грустнее, видимо, GPT просто выкинул перед кандидатом 5 принципов без пояснения, что все 5 принципов образуют SOLID.

Так к чему это я:

Иногда люди кажутся хорошими специалистами, но их знания поверхностны. Они не могут объяснить свои действия, поддержать разговор или предложить что-то новое. Такие люди могут подвести в важный момент. Важно отличать настоящих профессионалов от тех, кто только красиво отвечает на вопросы, чтобы собрать сильную команду для решения сложных задач.

MoscowJS 67 X A?.Frontend

Приглашаем вас на регулярную встречу фронтенд-сообщества в неформальной обстановке 28 августа. В этот раз — MoscowJS в гостях у Альфа-Банка.

В программе:

• От JavaScript к DeFi: как инженеры могут изменить мир финансов. Спикер: Даниил Швецов, Full Stack Engineer.
  Доклад познакомит JavaScript-инженеров с основами DeFi: ключевыми концепциями, математическими моделями и работой с JS SDK.

• Архитектура микрофронтендов: от А до Single Spa. Спикер: Павел Шлыков, Team Lead Frontend.
  Поговорим о микрофронтендах с нуля: от принципов и базовой реализации до инструментов вроде Module Federation и single-spa. Разберёмся, как всё устроено, и рассмотрим нестандартные подходы.

• Под капотом платформы. Спикер: Антон Марченко, Ведущий разработчик.
  Доклад об опыте сборки платформы из готовых решений и объединения приложений через iframe, Module Federation и webview. Узнаете про выбор подходов и работу с командами.

• Гильдия: место, где разработчик перестаёт быть одиноким кузнецом. Спикер: Владислав Сазонов, Head of Frontend.
  Чувствуете себя одиноким фронтендером? Есть решение — гильдия. В докладе — о том, как этот формат помогает расти, делиться опытом и не выгорать, а также краткий исторический экскурс.

Присоединяйтесь онлайн и офлайн — зарегистрироваться можно по ссылке.

Где: г. Москва, Андропова пр-т., 18, к. 3 (офис Альфа-Банка)

Вам не нужен Activity Bar в vscode!

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

Раз. Убираем Activity Bar. В нем есть три типа иконок: нужные нам часто, нужные иногда, совсем ненужные. Логика такая: для нужных мы создаем горячие клавиши (или пользуемся существующими). Для средне-нужных используем cmd+p и выбор команды. Ненужными – не пользуемся :)

Кастомные настройки для горячих клавиш для управления разными View (плюс к стандратным):

[
    {
        "key": "shift+cmd+g",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "ctrl+shift+g",
        "command": "-workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "shift+cmd+o",
        "command": "outline.focus"
    }
]

Два. Убираем Side Bar. Большую часть времени он не нужен. В основном нам просто нужно читать и реже писать код. Зачем нам Side Bar? Убирается основной по cmd+b, а второй по cmd+alt+b.

Но если оставить Side Bar справа, то его появление / скрытие будет двигать код. Что будет мешать. Потому – убираем его вправо.

Настройки:

{
    "workbench.activityBar.location": "hidden",
    "workbench.sideBar.location": "right"
}

Три. И не забудьте поместить Command Palette в центр рабочей области. Так будет удобнее: появяться она будет сразу перед глазами. Просто перетаскиваем мышкой.

Ссылка со всеми материалами: https://github.com/sobolevn/the-best-python-course/blob/main/minimal_vscode Там будет много полезного.

TypeScript и C++ в одном бинаре. Первый open source-проект от МойОфис

Команда МойОфис выложила в open source собственную разработку — компилятор tsnative. Это кроссплатформенный инструмент, который объединяет удобство TypeScript с производительностью C++ в одном приложении. Исходники — на GitHub под лицензией Apache 2.0.

Компилятор tsnative — это первая и ключевая часть более масштабного проекта под названием AntiQ, в котором мы переосмысляем подход к кроссплатформенной разработке без тяжёлых фреймворков.

AntiQ разделен на два самостоятельных компонента. Сейчас в open source опубликован только tsnative — главный модуль, в котором сосредоточена основная логика и заложены архитектурные принципы всей платформы.

Зачем это нужно?

tsnative — это кроссплатформенный компилятор, преобразующий TypeScript в нативный машинный код. Он обеспечивает бесшовную интеграцию с C++ без glue-кода или JavaScript-движков, объединяя удобство высокоуровневой разработки с производительностью системного кода. В результате вы получаете один бинарник, собранный из двух языков.

Как это работает:

• C++-функции помечаются TS_EXPORT;

• генерируются .d.ts-декларации для TS;

• TypeScript- и C++-код собираются через LLVM;

• на выходе — один исполняемый файл, без обёрток.

// math.cpp
#include "TS.h"
TS_EXPORT int add(int a, int b) {
return a + b;
}
// index.ts
console.log(add(2, 3)); // -> 5

// index.ts
console.log(add(2, 3)); // -> 5

Проект может быть интересен тем, кто:

• делает нативные приложения, но хочет писать часть логики на TS;

• ищет замену закрытым коммерческим компиляторам;

• любит ковыряться в сборке, кросс-компиляции и низкоуровневом коде.

Открытый код — не просто «выложили и забыли». Мы хотим, чтобы проектом пользовались, коммитили, обсуждали. Поэтому будем рады pull request’ам, issue и звёздочкам. Всё как обычно :)

Исходники на GitHub

Если у вас есть вопросы или комментарии, вы можете задать их в чате проекта: https://t.me/antiqmyoffice

Представлен обучающий курс по Python под названием Advanced Python Mastery от Дэвида Бизли, автора нескольких книг-бестселлеров по этому языку программирования и одного из главных знатоков Python. В базе курса представлены данные по работе на уровне процессора и компилятора до продвинутых концепций программирования на Python и самых актуальных фреймворков, а также десятки материалов с PyCon.