4 заметки с тегом

инструменты

Выбирайте правильные инструменты

Разработчики, которые имели медленный сайт или не имели его, с популярностью React переводят сайты на Gatsby, а потом радостно пишут в Твиттер о 90-100 в Lighthouse и рекомендуют перенести старый WordPress-блог на новый JS-фреймворк. И даже те, кто имел статический сайт на HTML с 70 в Lighthouse, переписывают его на Gatsby, который оптимизирует сайт за них и выдает хорошие цифры в тестах.

Проблема в том, что вам скорее всего не нужен JavaScript для личного блога. Gatsby крут плагинами, но всё, что нужно от него, — генерация страниц из Markdown. Клиент не хочет видеть JS-бандл. Gatsby нужен для сложных сайтов с анимациями и интерактивом, например, для этого блога — он издает звуки, персонажи двигаются, а примеры кода запускаются на месте. React с его JSX, где интерактив легко встраивается в текст, идеально здесь подходит, а еще у Gatsby хорошая поддержка MDX, чтоб делать такое же с Markdown.

Ситуация описывается так:

@twanttobealighi: реакт делает сложное простым, а простое невозможным

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

Возьмите полную статику: Eleventy, — используйте плагины для сжатия кода и картинок или напишите свой код в десять строк и дайте клиенту минималистичный набор HTML + CSS. Это тоже даст 100 в Lighthouse, но ниже буду написаны цифры, более глубоко описывающие скорость загрузки: первая отрисовка, время до взаимодействия с сайтом, самый крупный элемент сайта, — которые будут в разы меньше, а в сложных тестах вы наберете лучший результат.

А пишу я это потому, что у меня тоже сперва была полная статика с Jekyll, а потом я поддался количеству плагинов в Gatsby и автоматической оптимизации изображений. Но недавно я переписал сайт на Eleventy за три дня. Выбирайте правильные инструменты.

Почему надо дать Файерфоксу шанс

Используешь Хром? У меня плохие новости для тебя. В эру браузерной монополии мы должны оглядываться на другие браузеры, давайте сделаем это.

Ситуация

Гугл оккупировал весь веб Хромом. У него больше половины всех юзеров.

Инфографика популярности браузеров на всех платформах
Инфографика популярности браузеров на всех платформах

Сафари на втором месте только из-за популярности АйОС и МакОС.

Обновление Файерфокса

Сейчас большинство разработчиков выбирают между Хромом и Файерфоксом. В 2017 году Мозилла выпустила обновленную версию своего браузера — Файерфокс Квантум с новыми настройками внешнего вида, улучшенной поддержкой расширений, приватностью и, что самое главное, скоростью. В два раза быстрее, чем старый Файерфокс и быстрее, чем Хром.

Сравнение скорости Файерфокса Квантум и старого Файерфокса
Сравнение скорости Файерфокса Квантум и старого Файерфокса

Файерфокс ипсользует собственный движок с новым Квантум ЦСС и Квантум DOM рендерингом. Много объяснений в блоге Мозиллы. Хром использует больше оперативной памяти, чем Файерфокс. Также, Файерфокс имеет много полезных фишек, как отображение ненужных ЦСС правил и поддержка prefers-color-scheme: dark медиа правил, которые у Хрома только в бете.

Демонстрация темного режима в новом Файерфоксе
Демонстрация темного режима в новом Файерфоксе

Боитесь насчет расширений? Сейчас большинство разработчиков пишут расширения для одинаково Хрома и Файерфокса.

Последняя причина — антимонополия. Надо давать шанс другим компаниям, которые меньше и тогда станет заметно, как развивается фронтенд. Перенесите все свои закладки в Файферфокс на неделю и попробуйте его.

Разработчик? Замени это сейчас

До сих пор используешь это? Я отказался и теперь более продуктивный как фронтенд разработчик. Список вещей, которые тебе надо заменить сейчас.

ВС Код — редактор, который я теперь использую
ВС Код — редактор, который я теперь использую

Список инструментов, которые я больше не использую, и чем я их заменил:

  1. Atom → Sublime Text → VS Code. Я начал кодить с Codecademy (они первые в гугле). Мой первый HTML код я скопировал в Atom и сохранил на компьютер. Я выбрал его, потому что давно, когда искал текстовый редактор, натыкался на Атом и в описании у него было что-то связанное с кодом. Потом я перешел на Sublime Text и он был хорош. Я написал в нем много вышедших и не вышедших сайтов. Потом я услышал о VS Code — он был для меня слишком сложным после Sublime, но я полностью перешел.
  2. Beautify → Prettier. Форматировать код вручную очень тяжело, поэтому я решил автоматизировать этот процесс. Сперва использовал расширение Beautify, но потом перешел на Prettier с его конфигурационными файлами.
  3. Стандартный моноширинный шрифт → Fira Code. Шрифт даже для разработчика очень важен. Раньше я не обращал на это внимания и однажды я увидел в твиттере один интересный шрифт с новой функцией для меня — лигатурами. Это был Fira Code. Сейчас он очень популярен.
  4. jQuery → чистый JS. Я начал писать на JavaScript с туториала по jQuery на ютубе. Там говорилось, что jQuery чище, меньше, легче и позволяет решать задачи в несколько строк, которые в JavaScript пишутся в 200. Но после я понял, что у чистого JS больше поддержки, он чище, легче и занимает меньше места со стандартной поддержкой браузера.
  5. CSS → SASS. Просто нравится синтаксис родитель { ребенок {} }.
  6. Jekyll → Gatsby. Gatsby более прогрессивен и имеет много оптимизация из коробки.
  7. Lighthouse → PageSpeed Insights. Просто более стабильно.

Статья будет дополняться вечно.

Как и чем я занимаюсь

Сперва, кто я — уже полтора года начинающий веб-разработчик, пишу на HTML, CSS, JS, учу React.

Технический сетап

Я использую Dell Inspiron 13 с 256 ГБ SSD, 8 ГБ RAM и Intel Core i5. Да, я не тот крутой пользователь Мака, который приходит домой, открывает свой ноутбук одним пальцем, использует эксклюзивный платный софт и потом твитит красивые скриншоты программ с тенями.

Софтверный сетап

Я установил на ноутбук две системы — Windows 10 и Ubuntu — всегда последние версии. Windows занимает 200 ГБ, остальное место под Ubuntu. Потому что мне нравится Unix, но Linux пока что не такая независимая система.

Мой рабочий стол
Мой рабочий стол

Программы

Настало время самого интересного. Давайте посмотрим на весь путь создания сайта:

  1. Сперва надо задизайнить. Для этих целей я использую две программы Affinity Photo и Figma. Чаще вторую. Я не люблю софт от Adobe.
  2. Дальше надо написать то, что нарисовал. Я не использую IDE — вместо этого есть Visual Studio Code — мощная и красивая замена. VS Code — что-то между текстовым редактором и IDE. Если мне надо быстро записать несколько строк, то я открываю его младшего брата — Sublime Text. Он самый быстрый редакатор и выглядит хорошо.
  3. Часто мне надо спланировать работу. Для этого я использую Notion и Google Keep. Notion — для текстов, Keep — для списка задач.

Остальные инструменты:
а) терминал — встроенный в VS Code,
б) браузеры — Chrome и Firefox.

На этом все. Надеюсь, вы нашли что-нибудь интересное здесь.