Через 7 минут начнётся трансляция, где руководители и преподаватели Школы разработки интерфейсов рассказывают про школу и отвечают на вопросы. Присоединяйтесь!

→ https://goo.gl/FMi9UL

Саша Беспоясов вместе с Вадимом Юмадиловым и Андреем Романовым сделали крутой лонгрид «Фронтенд — это не больно!»

Ребята разбирают важные вопросы, типа:

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

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

Там ещё ссылки на всякие книжки и видосы по теме есть. Держите:

→ https://goo.gl/yn31Pj

Сегодня расскажу про два инструмента, которые улучшат вашу работу с API.

JSONView

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

На сайте у них ссылка на расширение для Файрфокса, но в сторе вашего браузера скорее всего есть это расширение под ваш браузер

→ https://goo.gl/Y9U6CG

HTTPie

А это консольная утилита, которая позволяет делать всё то же, что и curl, только наконец-то удобно. Посылать GET, POST, PUT и пр. запросы с понятным синтаксисом, отправлять формы, отправлять JSON. Подсвечивает хедеры и результат. Короче, это curl с человеческим лицом.

→ https://goo.gl/nZXUhr

Автофокус

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

Мелочь, а раздражает.

А вот ↑ как сделано, к примеру, в Тинькофф Банке. Заходишь на страницу, и фокус уже в поле стоит. Сразу можно ввести пароль, без лишних движений.

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

В HTML5 для этого даже специальный атрибут есть — autofocus. Ставите его инпуту, и при открытии страницы фокус будет в этом инпуте.

Попапов это тоже касается — если вы открываете попап, в котором есть форма, ставьте фокус в первое поле. Это можно сделать на JavaScript, у полей есть метод focus, использовать можно вот так:

document.querySelector('.popup input').focus()

Зацените, как ↑ сделана работа с фокусом в инструменте «Файлы Sitemap» Яндекс.Вебмастере. В форму нужно ввести адрес сайтмапа, который нужно скормить роботу. После отправки формы фокус встаёт обратно в поле, при этом текст не удаляется, а только выделяется.

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

Я собрал для себя несколько чеклистов для разных ситуаций, чтобы быть как-то увереннее в завтрашнем дне. У меня так мозг успокаивается, есть иллюзия контроля. Может и вам пригодится https://gist.github.com/isqua/432260ff425b1ab2442ecb69d0902f6c

Сегодня стартанул открытый бесплатный лекторий летних школ Яндекса. Можно смотреть лекции, которые проходят в школах мобильной разработки, бекенда, фронтенда и менеджмента.

На сайте есть расписание лекций, можно смотреть только по интересующим темам.

Вот: https://academy.yandex.ru/lp/open-lectures

Когда я начинал вести блог, я преподавал фронтенд «свитчерам» — взрослым, которые хотели перейти из других профессий в IT. У многих из них тогда был недостаточный уровень английского. Это было барьером, чтобы изучить что-то новое. Невозможно прочитать доку к библиотеке, если нет перевода, статью в журнале, доклад послушать. Я тогда решил вести свой блог только на русском, чтобы контент был им доступен, и в целом чтобы делать свой скромный вклад в «фронтенд-рунет».

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

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

Написал пост про алиасы для импортов в TypeScript. Небольшая деталь, которая может повлиять на удобство разработчиков. Я рассмотрел «читаемость» основных вариантов.

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

И ещё немного набрасываю на barrel-файлы, это которые index.ts с реэкспортами остального контента.

https://isqua.ru/en/blog/2024/11/10/imports-in-typescript-projects/

Как я потратил кучу времени на Next.js и всё равно ушёл на Astro

У меня есть один волонтёрский проект. Там есть и статические страницы, и веб-приложение, работающее с API.

1️⃣ Старая схема: Webpack, SSG и сложная сборка

Всё приложение я написал на React, а сборку в далёком 2018-м настроил на webpack:

1. Компиляция в два бандла — серверный и клиентский.
2. Рендеринг через ReactDOMServer.renderToStaticMarkup в HTML.

Конфиг был сложный: TypeScript, PostCSS, проксирование в API для локальной разработки, обработка ассетов.

2️⃣ Как я зря возился с Next.js

На днях решил обновить и сделать красиво. Самый популярный тулинг для реакта сейчас Next.js. Мне пришлось разложить все страницы по-некстовски, особенно бесят квадратные и круглые скобки в именах папок. Но Next поддерживает экспорт в HTML на этапе билда — то что нужно. В конфиге указал: output: "export" и проксирование в бек через опцию rewrites:

const nextConfig: NextConfig = {
  output: "export",
  async rewrites() {
    return [{
      source: "/api/:path*",
      destination: "https://my-api.net/api/:path*",
    }];
  },
};

Но получил ошибку, что проксирование не поддерживается: Specified "rewrites" will not automatically work with "output: export". See more info here: https://nextjs.org/docs/messages/export-no-custom-routes

Попробовал создать кастомную middleware — тоже нелья с "output: export"! Решил включать экспорт только для сборки прода:

const isDevelopment = process.env.NODE_ENV === "development";
const nextConfig: NextConfig = {
  output: isDevelopment ? undefined : "export",
  async rewrites() {
    return [{
      source: "/api/:path*",
      destination: "https://my-api.net/api/:path*",
    }];
  },
};

Теперь Next проксирует, но есть нюанс:

1. Next редиректит /api/events/?limit=1 → /api/events?limit=1 (убирает слэш)
2. my-api.net редиректит обратно /api/events?limit=1 → /api/events/?limit=1.

Добавил опцию skipTrailingSlashRedirect: true, но проблема осталась. Чтобы разобраться, запустил Next.js с переменной окружения DEBUG=*, дёрнул запрос и стал смотреть логи:

parsedUrl: { pathname: '/api/events', query: { limit: '1' } }

Он парсит URL без слэша и дёргает API по этому урлу, API редиректит обратно, и цикл замыкается.

Вечером зашёл новости почитать, а у Next нашли серьёзную уязвимость в middleware: https://security.snyk.io/vuln/SNYK-JS-NEXT-9508709

3️⃣ Как я решил всё за пару правок с Astro

Описывал свои приключения другу @timmarinin_blog, а он мне и говорит:

А тебе в конце статические HTML нужны? Возьми Astro.

Поставил — всё завелось почти без изменений. Вынес PostCSS-конфиг в отдельный файл и настроил в Astro прокси для API:

export default defineConfig({
  integrations: [react()],
  vite: { server: { proxy: {
    '/api': {
      target: 'https://my-api.net',
      changeOrigin: true,
    }
  } } },
});

Чтобы не переписывать приложение, роутинг оставил на react-router, а во всех astro-страничках сделал один и тот же код:

---
import Root from "@/app/entries/Root.astro";
---
<Root url={Astro.url.pathname} />

А Root.astro рендерит React-компонент внутри HTML-обвязки:

<Page><ReactRoot url={Astro.url.pathname} client:load /></Page>

Получилась простая сборка, удобное проксирование и минимум костылей. У Astro под капотом Vite, так что я и сторибук сразу на Vite переключил, и тесты с Jest на Vitest мигрировал. Минус 600 строк кода и конфигурации, и минус половина зависимостей, натурально package-lock в 2 раза похудел!

4️⃣ Выводы
1. С подходящим инструментом задачи решаются проще.
2. Советуйтесь с людьми с релевантным опытом для поиска новых идей!

Вечер пятницы, листал ленту в LinkedIn и наткнулся на пример кода для компонента-загрузчика. Не удержался и переписал без эффектов :)

Для примера взял rtk-query с флагом skip (можно на react-query с флагом enabled) и react-router с компонентом <Navigate>, чтобы:

- убрать все эффекты
- описать зависимости между запросами декларативно
- вынести роутинг прямо в JSX

Получился компонент, который легко читать сверху вниз и просто тестировать, и никаких эффектов! Норм же? :)

Если есть что сказать, пишите каменты в linkedin. Ну и в коннекты там добавляйтесь, чего уж!