Через 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» Яндекс.Вебмастере. В форму нужно ввести адрес сайтмапа, который нужно скормить роботу. После отправки формы фокус встаёт обратно в поле, при этом текст не удаляется, а только выделяется.

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

​​Новый проект! 🎉

В канале последнее время было тихо не просто так — мы с Артёмом Самофаловым кое-что готовили. Сейчас расскажу.

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

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

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

Мы перелопатили кучу источников: книг, статей, научных работ, примеров. Для каждого принципа подобрали случаи из реальных проектов, с которыми мы работали. Нашли подходящие примеры из «идеального мира». Подобрали шаблоны проектирования и приёмы рефакторинга, которые помогают эти принципы соблюдать. Отобрали антипаттерны, которых советуют избегать.

А ещё для каждого принципа мы приготовили вопросы и тесты для самопроверки! (Вы знаете, что делать.)

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

Я собрал для себя несколько чеклистов для разных ситуаций, чтобы быть как-то увереннее в завтрашнем дне. У меня так мозг успокаивается, есть иллюзия контроля. Может и вам пригодится 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. Советуйтесь с людьми с релевантным опытом для поиска новых идей!