Будни фронта

Как сделать эффект печатной машинки с помощью CSS

2022-01-27T18:27:18.457Z

В этой статье вы узнаете, как сделать текст вашего сайта динамичным и более привлекательным, используя эффекты печатной машинки в чистом CSS.

Эффект печатной машинки предполагает постепенное появление текста, как будто он печатается на ваших глазах.

Добавление эффекта печатной машинки к фрагментам текста поможет привлечь посетителей вашего сайта и заинтересовать их в дальнейшем чтении. Эффект печатной машинки можно использовать для многих целей, например, для создания привлекательных посадочных страниц, элементов призыва к действию, персональных веб-сайтов и демонстрации кода.

Эффект печатной машинки легко создать

Все, что вам понадобится для того, чтобы разобраться в этом уроке - это базовые знания CSS и CSS-анимации.

Вот как будет работать эффект пишущей машинки:

Анимация печатной машинки будет показывать наш текстовый элемент, изменяя его ширину от 0 до 100%, шаг за шагом, используя функцию CSS steps().
Анимация мигания будет анимировать курсор, который "набирает" текст.

Создание веб-страницы для нашего эффекта набора текста

Сначала создадим веб-страницу для демонстрации печатной машинки. Он будет включать контейнер <div> для нашего печатного текста с классом typed-out:

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
  </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Стилизация контейнера для текста печатной машинки

Теперь, когда у нас есть макет веб-страницы, давайте стилизуем <div> с помощью класса "typed-out".

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

Обратите внимание, что для того, чтобы эффект печатной машинки работал, мы добавили следующее:

"overflow: hidden;" и "width: 0;", чтобы содержимое текста не было видно до тех пор, пока не начнется эффект набора текста.
"border-right: .15em solid orange;", чтобы создать курсор печатной машинки.

Перед созданием эффекта набора текста, чтобы остановить курсор на последней букве typed-out элемента после того, как он будет полностью набран, как это сделала бы печатная машинка (или текстовый процессор), мы создадим контейнер для typed-out элемента и добавим display: inline-block;:

.container {
  display: inline-block;
}

Создание анимации раскрытия текста

Анимация печатной машинки создаст эффект того, что текст внутри typed-out элемента печатается буква за буквой. Мы будем использовать правило анимации @keyframes CSS:

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

Как вы можете видеть, все, что делает эта анимация, это изменяет ширину элемента от 0 до 100%.

Теперь мы включим эту анимацию в наш класс typed-out и установим направление анимации на forward, чтобы убедиться, что текстовый элемент не вернется к width: 0 после завершения анимации:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

Наш текстовый элемент будет просто раскрываться одним плавным движением слева направо:

Ссылка на Codepen

Добавление шагов для достижения эффекта печатной машинки

Пока что наш текст раскрывается, но плавно, не раскрывая текст буква за буквой. Это начало, но, очевидно, это не то, как выглядит эффект печатной машинки.

Чтобы эта анимация раскрывала наш текстовый элемент буква за буквой (или по шагам), как это делает печатная машинка, нам нужно разделить анимацию typing, включенную классом typed-out, на шаги, чтобы она выглядела так, как будто текст набирается. В этом нам поможет функция CSS steps():

.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 1.6rem;
  width: 0;
  animation: 
    typing 1s steps(20, end) forwards;
}

Как вы видите, мы разделили анимацию typing на 20 шагов с помощью функции CSS steps(). Вот что мы видим сейчас.

Ссылка на Codepen

Вот наш полный код на данный момент:

<html>
  <head>
    <title>Typewriter effect</title>
  </head>
  <style>
    body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: 0;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
  </style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
  <div class="typed-out">Web Developer</div>
</div>
</body>
</html>

Настройка шагов для более длительного эффекта

Чтобы приспособиться к длинным фрагментам текста, необходимо увеличить шаги и продолжительность анимации набора текста.

Ссылка на Codepen

Настройка шагов для более короткого эффекта

А чтобы приспособиться к более коротким фрагментам текста, нужно уменьшить шаги и продолжительность анимации набора текста:
Ссылка на Codepen

Настройка кода для эффекта мигающего набора текста

Мы можем сделать курсор тоньше или толще, изменив его свойство border-right: .15em solid orange;, или сделать курсор другого цвета, задать ему border-radius, настроить частоту его мигания и многое другое.

Ссылка на Codepen

Вы можете поэкспериментировать с этими свойствами в демо-версии на CodePen и посмотреть, что еще вы можете придумать!

Комбинирование элементов анимации

Теперь, когда вы знаете, как сделать эффект печатной машинки в CSS, пришло время продемонстрировать несколько практических и актуальных случаев использования этого эффекта.

Эффект печатания портфолио

Можно использовать такой пример для личного портфолио. Эффекты печатной машинки могут выделить ваше веб-резюме/личный сайт и сделать его более привлекательным.

Демо-версия CodePen.

Эффект типизации API

Вот пример посадочной страницы API.

Вы можете потренироваться с демонстрацией этого API на CodePen.

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

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

Заключение

Мы видели в этой статье, как легко с помощью CSS создать анимированный текст "печатной машинки". Этот эффект печатания определенно может придать интерес и восхищение вашим веб-страницам.

Однако в конце стоит сделать небольшое предупреждение. Этот прием лучше всего использовать на небольших участках некритичного текста, просто чтобы создать немного дополнительной привлекательности. Но будьте осторожны и не полагайтесь на него слишком сильно, так как использование подобной CSS-анимации имеет некоторые ограничения. Обязательно протестируйте текст, напечатанный на пишущей машинке, на различных устройствах и при разных размерах экрана просмотра, так как результаты могут отличаться на разных платформах. Также подумайте о конечных пользователях, использующих вспомогательные технологии, и в идеале проведите несколько тестов на удобство использования, чтобы убедиться, что вы не усложняете жизнь своим пользователям. Если вы можете сделать что-то с помощью чистого CSS, это еще не значит, что вы должны это делать. Если эффект печатной машинки важен для вас и вы хотите использовать его для более важного контента, возможно стоит рассмотреть также решения на JavaScript.

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

Источник: https://www.sitepoint.com/css-typewriter-effect/

Yarn vs npm: все, что вам нужно знать

2022-01-26T10:28:15.106Z

В этом руководстве мы сравним Yarn и npm - два самых популярных менеджера пакетов. Мы рассмотрим их все преимущества и недостатки, чтобы помочь вам выбрать, какой из них использовать для своих проектов.

Изложение основ

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

Менеджер пакетов - это инструмент, который автоматически обрабатывает зависимости проекта различными способами. Например, с помощью него мы можем устанавливать, удалять, обновлять и модернизировать пакеты, настраивать параметры проекта, запускать скрипты и так далее. Всю тяжелую и утомительную работу делает менеджер пакетов, оставляя нам только самое интересное - само программирование.

npm означает Node Package Manager. Он был представлен в 2010 году, положив начало новой эре в веб-разработке. До этого момента зависимости проекта загружались и управлялись вручную. npm стал волшебной палочкой, которая вывела веб-разработку на новый уровень.

На самом деле npm включает в себя три составляющих:

веб-сайт для управления различными аспектами вашей работы с npm
реестр для доступа к обширной публичной базе данных пакетов JavaScript
интерфейс командной строки (CLI) для взаимодействия с npm через терминал

Однако, когда большинство людей говорят о npm, они обычно имеют в виду последний - инструмент CLI. Он поставляется в качестве менеджера пакетов по умолчанию с каждой новой установкой Node. Это означает, что вы можете начать использовать его сразу же.

Yarn расшифровывается как Yet Another Resource Negotiator. Менеджер пакетов Yarn - это альтернатива npm, выпущенная компанией Facebook в октябре 2016 года. Первоначальной целью создания Yarn было устранение недостатков npm, таких как производительность и проблемы безопасности. Yarn был быстро позиционирован как безопасный, быстрый и надежный инструмент управления зависимостями JavaScript.

Но команда npm извлекла для себя урок и быстро заполнила пробелы в npm, реализовав недостающие функции.

Давайте быстро перенесемся во времени, чтобы увидеть общую картину:

2010: выпущен npm с поддержкой Node.
2016: Выпущен Yarn. Он показывает гораздо большую производительность, чем npm. Он также генерирует файл yarn.lock, который делает совместное использование и точную репликацию репозиториев намного проще и предсказуемее.
2017: Выпущен npm 5. Он предлагает автоматическую генерацию файла package-lock.json в ответ на yarn.lock.
2018: Выпущен npm 6 с улучшенной безопасностью. Теперь npm проверяет уязвимости безопасности перед установкой зависимостей.
2020: Выпущены Yarn 2 и npm 7. Оба пакета имеют новые возможности, которые мы увидим позже в этом руководстве.
2021: Выходит Yarn 3 с различными улучшениями.

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

В оставшейся части этого руководства мы рассмотрим основные сходства и различия между npm и Yarn.

Yarn и npm: сравнение установки

Мы начнем наше сравнительное исследование с процесса установки как npm, так и Yarn.

Установка самих менеджеров пакетов

Как я отметил выше, npm поставляется с предустановленным Node, поэтому нет необходимости устанавливать npm вручную.

В отличие от этого, Yarn нужно устанавливать отдельно. Во-первых, нам нужно установить Yarn глобально:

npm install -g yarn

Затем мы можем использовать его для каждого проекта, установив нужную версию внутри нашего проекта. Для этого нужно выполнить команду yarn set version в корневом каталоге проекта:

yarn set version berry

В данном случае berry - это версия, которую мы хотим установить.

Если мы хотим обновить версию до последней, мы выполним следующее:

yarn set version latest

С Yarn мы можем использовать разные версии для каждого проекта.

Чтобы сделать то же самое с npm, вам потребуется установить nvm (Node Version Manager).

Установка зависимостей проекта

Теперь давайте посмотрим, как устанавливаются зависимости проекта.

Когда мы запускаем npm install, зависимости устанавливаются последовательно, одна за другой. Логи вывода в терминале информативны, но немного трудночитаемы.

Чтобы установить пакеты с помощью Yarn, мы выполняем команду yarn. Yarn устанавливает пакеты параллельно, что является одной из причин, почему он быстрее, чем npm. Если вы используете Yarn 1, вы увидите, что журналы вывода yarn чистые, визуально различимые и краткие. Они также упорядочены в виде дерева для удобства восприятия. Но это меняется в версиях 2 и 3, где журналы не такие интуитивно понятные и человекочитаемые.

До этого мы видели, что npm и Yarn имеют разные команды для установки пакетов. В следующем разделе мы рассмотрим больше команд.

Сравнение команд npm и Yarn

npm и Yarn имеют много общих команд, но есть и много неидентичных команд. Давайте сначала рассмотрим некоторые из похожих команд:

npm init | yarn init: создание нового пакета
npm run | yarn run: запуск скрипта, определенного в package.json
npm test | yarn test: тестирование пакета
npm publish | yarn publish: опубликовать пакет
npm cache clean | yarn cache clean: удалить все данные из папки cache

Эти команды упрощают переключение между двумя менеджерами, но есть некоторые неидентичные команды, которые могут вызвать путаницу. Давайте посмотрим, что это за команды в следующем списке:

npm install | yarn: установка зависимостей
npm install [package] | yarn add [package]: установка пакета
npm install --save-dev [package] | yarn add - -dev [package]: установка пакета в качестве зависимости для разработки
npm uninstall [package] | yarn remove [package]: удаление пакета
npm uninstall --save-dev [package] | yarn remove [package]: удаление пакета, зависящего от разработки
npm update | yarn upgrade: обновление зависимостей
npm update [package] | yarn upgrade [package]: обновление пакета

В Yarn также есть несколько уникальных команд, которые не имеют аналогов в npm. Например, команда why отображает причину необходимости пакета: это может быть зависимость, нативный модуль или зависимость от проекта.

Yarn против npm: скорость и производительность

Когда Yarn или npm нужно установить пакет, они выполняют ряд задач. В npm эти задачи выполняются для каждого пакета и последовательно, то есть он будет ждать, пока пакет будет полностью установлен, прежде чем переходить к следующему. В отличие от него, Yarn выполняет эти задачи параллельно, что повышает производительность.

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

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

Yarn vs npm: сравнение безопасности

Одно из главных критических замечаний в адрес npm касается безопасности. Предыдущие версии npm имеют несколько серьезных уязвимостей в безопасности.

Начиная с версии 6, npm проверяет пакеты во время установки и сообщает вам, если обнаружены какие-либо уязвимости. Мы можем выполнить эту проверку вручную, запустив npm audit для установленных пакетов. Если будут найдены уязвимости, npm даст нам рекомендации по безопасности.

Как видно на скриншоте выше, мы можем запустить npm audit fix для устранения уязвимостей пакетов, и деревья зависимостей будут исправлены, если это возможно.

И Yarn, и npm используют криптографические хэш-алгоритмы для обеспечения целостности пакетов.

Yarn vs npm: сравнение возможностей

Как и в случае с командами, некоторые функции npm и Yarn являются общими, но есть и некоторые различия. Давайте сначала рассмотрим общие возможности этих двух менеджеров пакетов.

Создание файла блокировки

В package.json, файле, в котором npm и Yarn ведут учет зависимостей проекта, номера версий не всегда точны. Вместо этого вы можете задать диапазон версий. Таким образом, вы можете выбрать конкретную мажорную и минорную версию пакета, но позволить npm установить последний патч, который может исправить некоторые ошибки.

В идеальном мире семантического версионирования исправленные релизы не будут содержать никаких ломающих изменений. Но, к сожалению, это не всегда так. Стратегия, используемая npm, может привести к тому, что на двух компьютерах окажется один и тот же файл package.json, но будут установлены разные версии пакета, что, возможно, приведет к появлению ошибок.

Чтобы избежать несоответствия версий пакетов, точная установленная версия фиксируется в файле блокировки пакетов. При каждом добавлении модуля npm и Yarn создают (или обновляют) файл package-lock.json и yarn.lock соответственно. Таким образом, вы можете быть уверены, что на другой машине установлен точно такой же пакет, но при этом в файле package.json определен диапазон допустимых версий.

Использование рабочих областей

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

Удаленный запуск скриптов

Команда npx используется для запуска скриптов из ./node_modules/.bin. Она также позволяет выполнять пакеты из реестра npm, не устанавливая их в зависимости вашего проекта. Например, вы можете создать новое приложение React, выполнив следующее:

npx create-react-app my-app

В Yarn вы можете достичь того же результата, используя эквивалентную команду dlx:

yarn dlx create-react-app my-app

Остальные функции, которые мы будем изучать, уникальны для Yarn.

Нулевые установки

При нулевой установке кэш хранится в каталоге вашего проекта в папке .yarn. Когда вы используете такие команды, как yarn или yarn add <package>, Yarn создаст файл .pnp.cjs. Этот файл содержит иерархию зависимостей, используемую Node для загрузки пакетов вашего проекта. Таким образом, вы можете получить к ним доступ практически в нулевое время.

Plug'n'Play (Подключи и работай)

Plug'n'Play - это альтернативная стратегия установки. Вместо того чтобы генерировать каталог node_modules и оставлять решение проблемы на усмотрение Node, Yarn генерирует единственный файл .pnp.cjs, который сопоставляет пакеты с их расположением на диске и списком зависимостей. Эта возможность может привести к более быстрому запуску проекта, лучшей оптимизации дерева зависимостей, более быстрому времени установки и, конечно, устраняет необходимость в папке node_modules.

Лицензия

В Yarn встроена функция проверки лицензий, которая может быть полезна в различных случаях при разработке приложений.

Yarn vs npm: какой менеджер пакетов выбрать

Мы рассмотрели различные сходства и различия npm и Yarn, но так и не определили, что лучше и какой из них выбрать. Как всегда, ответ зависит от наших желаний и требований.

В качестве общего руководства позвольте мне в заключение дать следующий совет:

Выбирайте npm, если вас устраивает ваш текущий рабочий процесс, вы не хотите устанавливать дополнительный инструмент и у вас мало места на диске.
Выбирайте Yarn, если вам нужны такие замечательные возможности, как Plug'n'Play, вам нужна функциональность, которой не хватает в npm, и у вас достаточно места на диске.

Если вам все еще трудно принять четкое решение между npm и Yarn, вы можете попробовать pnpm, который пытается объединить лучшее от обоих пакетных менеджеров и является третьим крупным игроком в среде пакетных менеджеров.

Заключение

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

И, наконец, не раздумывайте. Просто выберите один из них и переходите к самому интересному: созданию отличных приложений!

Источник: https://www.sitepoint.com/yarn-vs-npm/

Изучение Vite через исходный код

2022-01-21T19:56:22.324Z

Как вы, вероятно, слышали, в экосистеме front-end есть новый крутой инструмент для сборки под названием Vite. Хотя он был создан Эваном Ю (который также создал Vue.js), он не зависит от фреймворка, поэтому вы можете использовать Vite с Vue.js, React.js, Svelte.js или даже с обычным JavaScript.

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

Теперь, без лишних слов, давайте создадим приложение с помощью Vite.

Создание приложения с Vite

Для данной демонстрации мы создадим проект Vue, используя эту команду:

npm init vite@latest

(Наличие @latest гарантирует, что вы всегда получите последнюю версию, когда будете выполнять npm install внутри этого нового проекта).

В качестве примечания, вы могли видеть устаревшую версию команды init.

Как вы можете видеть, предупреждение об устарелости говорит нам использовать npm init vite вместо этого.

Эта новая команда, по сути, является сокращением для:

npx create-vite

Это позволит установить и запустить инструмент под названием create-vite, который подскажет вам, какой проект вы создаете. Вы выберете имя и шаблон.

Выберите имя для вашего проекта.

И выберите шаблон для использования.

Для изучения вы можете использовать либо vanilla, либо vue.

Далее мы изучим инструмент create-vite через его исходный код на GitHub.

Изучение исходного кода Vite

Сначала зайдите на страницу Vite в GitHub по адресу github.com/vitejs/vite.

Затем перейдите в папку packages.

Здесь вы можете увидеть create-app и create-vite.

create-app отвечает за первоначальную команду, которая говорит "deprecated (устаревший)". Здесь нас интересует папка create-vite. В ней находятся все встроенные шаблоны для создания проектов.

Внутри папки packages мы также можем увидеть несколько папок plugin для нескольких встроенных плагинов.

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

Шаблоны

Понятие шаблона можно легко понять: это стартовый код для нового проекта.

Внутри папки packages/create-vite вы должны увидеть дюжину папок template-*.

📁 /packages/create-vite

Как вы видите, Vite поддерживает шаблоны для различных фреймворков (и их TypeScript-аналогов).

Вы можете выбрать vanilla в команде create-vite.

Если вы выберете vanilla, он возьмет файлы из папки packages/template-vanilla и клонирует их как ваш новый проект.

📁 /packages/template-vanilla

Вы также можете выбрать vue из списка:

Если вы выбрали vue, он будет клонировать файлы в папке packages/template-vue как ваш новый проект.

📁 /packages/template-vue

Сгенерированный проект из шаблона vue будет иметь стандартную структуру папок, которую вы ожидаете от проекта Vue.

Итак, это шаблон. Теперь поговорим о плагине.

Плагины

Как я уже говорил, Vite не привязан к конкретным фреймворкам. Он способен создавать проекты для различных фреймворков благодаря своей системе плагинов.

Из коробки Vite предоставляет плагины для Vue, Vue with JSX и React.

Вы можете изучить код каждого встроенного плагина в папке packages:

📁 /packages

Примечание: plugin-legacy предназначен для устаревших браузеров, которые не поддерживают встроенный ESM.

Наиболее распространенный способ использования этих плагинов - через соответствующие шаблоны. Например, шаблон Vue требует использования плагина Vue, а шаблон React - плагина React.

Проект, созданный с помощью шаблона vanilla, не имеет представления о том, как обслуживать однофайловые файлы компонентов Vue (SFC). Но проект Vue, созданный с помощью Vite, сможет обрабатывать файлы типа SFC. И он также знает, как упаковать весь проект Vue для продакшена.

Если мы сравним соответствующие файлы package.json шаблона Vue и ванильного шаблона, мы легко поймем, почему это так.

📁 /packages/template-vanilla/package.json

📁 /packages/template-vue/package.json

template-vue содержит все то же, что и template-vanilla, плюс три дополнительных пакета.

📁 /packages/template-vue/package.json

"dependencies": {
    "vue": "^3.2.6" // 1
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1", // 2
    "@vue/compiler-sfc": "^3.2.6", // 3
    "vite": "^2.5.4"
  }

vue - это основная библиотека, которая работает во время выполнения проекта
@vitejs/plugin-vue - плагин, отвечающий за обслуживание и компоновку проекта Vue
@vue/compiler-sfc необходим для компиляции SFC-файла

Поэтому можно с уверенностью сказать, что эти три пакета дают проекту Vite возможность понимать код Vue. Пакет @vitejs/plugin-vue - это "мост", соединяющий ядро системы Vite с фреймворком Vue.js.

Vue-плагин

Как мы видели в package.json плагина Vue, пакет @vitejs/plugin-vue отвечает за сборку проекта Vue.

Vite делегирует работу по сборке Rollup, который является еще одним очень популярным инструментом сборки. Взаимосвязь между плагинами полагается на ядро vite для вызова кода пакета плагина в некоторые определенные моменты времени. Эти определенные моменты называются хуками. Разработчик плагина должен решить, какой код будет выполняться в каждом хуке.

Например, в исходном коде плагина Vue можно увидеть некоторые из этих хуков.

📁 /packages/plugin-vue/src/index.ts

async resolveId(id) {
  // component export helper
  if (id === EXPORT_HELPER_ID) {
    return id
  }
  
  if (parseVueRequest(id).query.vue) {
    return id
  }
},

load(id, ssr = !!options.ssr) {
  if (id === EXPORT_HELPER_ID) {
    return helperCode
  }

  const { filename, query } = parseVueRequest(id)
  // выбрать соответствующий блок для виртуальных модулей подчастей
  if (query.vue) {
    if (query.src) {
      return fs.readFileSync(filename, 'utf-8')
    }
    const descriptor = getDescriptor(filename, options)!
    let block: SFCBlock | null | undefined
    if (query.type === 'script') {
      // обработка слияния <script> + <script setup> через compileScript()
      block = getResolvedScript(descriptor, ssr)
    } else if (query.type === 'template') {
      block = descriptor.template!
    } else if (query.type === 'style') {
      block = descriptor.styles[query.index!]
    } else if (query.index != null) {
      block = descriptor.customBlocks[query.index]
    }
    if (block) {
      return {
        code: block.content,
        map: block.map as any
      }
    }
  }
},

transform(code, id, ssr = !!options.ssr) {
  const { filename, query } = parseVueRequest(id)
  if (query.raw) {
    return
  }
  if (!filter(filename) && !query.vue) {
    if (!query.vue && refTransformFilter(filename)) {
      if (!canUseRefTransform) {
        this.warn('refTransform requires @vue/compiler-sfc@^3.2.5.')
      } else if (shouldTransformRef(code)) {
        return transformRef(code, {
          filename,
          sourceMap: true
        })
      }
    }
    return
  }
    if (!query.vue) {
    // основной запрос
    return transformMain(
      code,
      filename,
      options,
      this,
      ssr,
      customElementFilter(filename)
    )
  } else {
    // запрос на подблок
    const descriptor = getDescriptor(filename, options)!
    if (query.type === 'template') {
      return transformTemplateAsModule(code, descriptor, options, this, ssr)
    } else if (query.type === 'style') {
      return transformStyle(
        code,
        descriptor,
        Number(query.index),
        options,
        this
      )
    }
  }
}

А в основном пакете vite, Rollup будет использоваться для вызова вышеуказанных хуков плагина.

📁 /packages/vite/src/node/build.ts

// сначала собирает все используемые плагины
const plugins = (
  ssr ? config.plugins.map((p) => injectSsrFlagToHooks(p)) : config.plugins
) as Plugin[]

...

// затем поместите плагины и все остальное в объект options
const rollupOptions: RollupOptions = {
  input,
  preserveEntrySignatures: ssr
    ? 'allow-extension'
    : libOptions
    ? 'strict'
    : false,
  ...options.rollupOptions,
  plugins,
  external,
  onwarn(warning, warn) {
    onRollupWarning(warning, warn, config)
  }
}

...

// наконец, делегировать rollup
const bundle = await rollup.rollup(rollupOptions)

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

Другими словами, плагин Vite - это расширение плагина Rollup.

Команды Vite

Возвращаясь к шаблону Vue, давайте уделим немного внимания опции scripts.

📁 /packages/create-vite/template-vue/package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Это конфигурации, которые позволяют нам выполнять следующие команды внутри проекта Vite:

npm run dev для запуска сервера разработки
npm run build для создания production сборки
npm run serve для предварительного локального просмотра указанной production сборки

Приведенные выше команды сопоставлены со следующими командами:

vite
vite build
vite preview

Как видите, пакет vite - это то, с чего все начинается.

Вы можете получить представление о том, какие еще сторонние инструменты задействованы, заглянув в файл package.json пакета vite.

📁 /packages/vite/package.json

"dependencies": {
  "esbuild": "^0.12.17",
  "postcss": "^8.3.6",
  "resolve": "^1.20.0",
  "rollup": "^2.38.5"
},

Как вы можете видеть, vite на самом деле использует два разных пакетника за кадром: Rollup и esbuild.

Rollup vs esbuild

Vite использует оба этих пакетника для различных видов деятельности.

Rollup используется Vite для основных нужд пакетирования. А esbuild используется для совместимости и оптимизации модулей. Эти шаги известны как процесс "Предварительного объединения зависимостей" (Dependency Pre-bundling). Этот процесс считается "тяжелым", поскольку его необходимо выполнять на основе каждого модуля, а в проекте обычно используется много модулей.

Совместимость модулей означает преобразование различных форматов (модули UMD или CommonJS) в стандартный формат ESM.

Оптимизация предназначена для объединения всех различных файлов из одного зависимого пакета в одно "нечто", которое затем нужно получить только один раз.

Rollup был бы слишком медленным для обработки тяжелых вещей по сравнению с esbuild. Esbuild на самом деле является самым быстрым инструментом сборки. Он быстрый, потому что разработан на Go (язык программирования).

Вот сравнение, приведенное на сайте официальной документации.

Как видите, esbuild не просто быстрый, он находится на совершенно другом уровне. Вот почему Vite работает молниеносно.

Заключение

В этой статье мы узнали, что:

команда npm init vite использует инструмент create-vite
пакет create-vite содержит все встроенные шаблоны
специфичный для фреймворка шаблон зависит от соответствующего специфичного для фреймворка плагина
плагины реализованы в архитектуре, основанной на хуках
Vite использует Rollup и esbuild за кадром.

Теперь у вас должно быть твердое понимание системы Vite. Но на практике вам понадобятся другие общие возможности, которые мы здесь не рассмотрели. Самыми распространенными из них являются поддержка TypeScript и препроцессора CSS.

Источник: https://www.sitepoint.com/exploring-vite-source-code/

Фрагменты React: простой синтаксис для повышения производительности

2022-01-15T15:38:57.960Z

Фрагменты React были представлены в ноябре 2017 года в версии React 16.2.0. Хотя они существуют уже давно, многие разработчики React избегают их использования, или применяют их, не зная, что это такое. Фрагменты React - это начальная, но ключевая функция, и каждый разработчик React должен освоить ее, независимо от уровня квалификации. Кроме того, учитывая, как давно они стали частью React, их уже нельзя игнорировать.

Итак, давайте рассмотрим все, что вам нужно для освоения фрагментов React.

Почему существуют фрагменты React

Как указано в официальной документации React, возврат более чем одного элемента HTML - это часто желаемое поведение для компонентов React. Чтобы добиться этого, вы должны обернуть все эти элементы тегом HTML. Это связано с тем, что React требует, чтобы компоненты возвращали только один элемент HTML. Самым простым решением было бы использовать тег <div>. С логической точки зрения этот дополнительный <div> обычно можно считать неуместным, но он имеет последствия.

Во-первых, постоянно используя такой подход, вы делаете DOM более вложенным и, следовательно, более медленным для рендеринга. Во-вторых, такой подход может привести к некорректному HTML, как вы вскоре увидите.

Например, допустим, у вас есть компонент Table, который отображает таблицу HTML, колонки которой отображаются с помощью другого компонента под названием Columns. Вот код, который вы можете использовать для этого:

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

// обертка div, используемая для возврата двух тегов <td>
function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

В результате будет выведен следующий HTML, который является недопустимым, поскольку <div> не может быть дочерним элементом <tr>.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

React-фрагменты были введены именно для решения этой проблемы.

Что такое React-фрагменты

Фрагменты React включают в себя специальный синтаксис, который позволяет группировать список HTML-элементов без добавления дополнительных узлов в DOM. Другими словами, Фрагменты React позволяют группировать несколько дочерних компонентов без внесения лишней разметки в отображаемый HTML, предлагая решение проблемы, рассмотренной ранее, и многих других.

Как их использовать

Вы можете использовать фрагменты React, обернув дочерние элементы, которые будут возвращены вашим компонентом, тегом <React.Fragments>. Возвращаясь к приведенному выше примеру, компонент Columns будет написан следующим образом:

function Columns() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

Это приведет к тому, что компонент Table будет переведен в следующий HTML:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

Как вы можете видеть, в отображаемом HTML нет тега обертки. В отличие от того, что было раньше, это не приведет к некорректному HTML.

В фрагментах React также можно использовать короткий синтаксис, который выглядит как пустой тег:

// использование <> - это то же самое, что использование <React.Fragment>
// использование </> - это то же самое, что использование </React.Fragment>
function Columns() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

Это приводит к тому же результату, что и в примере выше. Поэтому помните, что пустой тег - это сокращение для <React.Fragment>.

Когда их использовать

В принципе, вы должны использовать React Fragments в любом случае, чтобы не использовать лишнюю обертку <div>, чтобы заставить ваш компонент возвращать более одного элемента HTML.

Поэтому не думайте о фрагментах Reаct как о замене <div> в вашем HTML. Напротив, рассматривайте их как способ избежать ненужных тегов и получить в результате лучшую структуру разметки.

Существует три варианта использования фрагментов React. Давайте рассмотрим их все.

1. Обертывание нескольких элементов HTML

Как вы уже догадались, обертывание нескольких элементов HTML является наиболее распространенным случаем использования фрагментов React. Всякий раз, когда вам нужно определить компонент React, который должен возвращать несколько элементов HTML, вы должны обернуть их тегом <React.Fragment> или <>. Как мы уже видели, это рекомендуемый подход, поскольку использование любого другого оберточного тега может привести к некорректному HTML.

Давайте посмотрим их в действии при определении компонента, возвращающего четыре HTML-элемента.

// возвращение 4 <div> без добавление дополнительной обертки <div>
function FragmentExample () {  
  return (
    <>
      <div>
        First div
      </div>
      <div>
        Second div
      </div>
      <div>
        Third div
      </div>
      <div>
        Fourth div
      </div>
    </>
  );  
}
ReactDOM.render(
  <FragmentExample/>,
  document.getElementById('container')
);

Ссылка на Codepen

2. Фрагменты с ключом

Как указано в документации React, фрагменты, объявленные с помощью явного синтаксиса <React.Fragment>, могут иметь ключи, и это полезно при работе с любой коллекцией JavaScript. Обратите внимание, что при использовании краткого синтаксиса это не так.

Например, допустим, у вас есть массив объектов, где каждый элемент представляет автора. Ваша цель - отобразить всех авторов, используя данные из этого массива. Этого можно достичь путем отображения каждого элемента массива на соответствующий HTML-элемент, который, согласно требованиям React, должен иметь уникальный ключ. Поскольку фрагменты React поддерживают ключевые реквизиты, вы можете использовать их для достижения этой цели без введения дополнительной разметки. Давайте посмотрим на это на живом примере:

Ссылка на Codepen

3. Условный рендеринг

Когда дело доходит до условного рендеринга, React требует, чтобы вы возвращали один элемент в обеих ветвях. Именно здесь на помощь приходят фрагменты React, позволяющие более легко выводить группы элементов и избегать добавления ненужных дополнительных тегов, как в следующем примере:

Ссылка на Codepen

Заключение

В этой статье мы рассмотрели фрагменты React и почему они являются неизбежной функцией, которую должен освоить каждый разработчик React. Фрагменты позволяют создавать лучшую структуру DOM, избегая вставки ненужных <div>. Кроме того, более чистая структура разметки означает более короткое время рендеринга, что является отличным решением. Фрагменты React позволяют вам писать более чистый, поддерживаемый и читаемый код.

Источник: https://www.sitepoint.com/react-fragments-introduction/

5 лучших инструментов для передачи дизайна в 2022 году

2022-01-13T20:22:36.391Z

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

"Передача дизайна" подразумевает под собой предоставление дизайна UI разработчику, который будет его программировать (верстать). До появления термина "передача дизайна" его передача была сложной, неприятной и часто катастрофической задачей. В те времена Adobe Photoshop был единственным доступным инструментом для проектирования пользовательских интерфейсов, а инструментов и/или функций для дизайна не существовало. Преобразование дизайна в код именовалось "нарезкой PSD".

За нарезку PSD (документа Photoshop) отвечал разработчик, что было очень неприятно, поскольку разработчики по понятным причинам не хотели работать с инструментами дизайна. Дизайнеры вручную документировали спецификации дизайна, чтобы сделать все более понятным, но это все равно приводило к визуальным/функциональным несоответствиям и бурным дискуссиям с разработчиками.

Передача дизайна сегодня

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

Современные дизайнеры и разработчики считают процесс передачи дизайна одним из ключевых процессов разработки, будь то создание системы дизайна или продукта с нуля. Более того, инструменты разработки UI, такие как Figma, предлагают функции передачи и системы разработки вместе.

Что на самом деле делают инструменты передачи дизайна?

Инструменты передачи помогают:

дизайнерам подготовить свои проекты к проверке
разработчикам в проверке и переводе проектов в код
дизайнерам и разработчикам сотрудничать и общаться

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

Давайте рассмотрим пять лучших инструментов для передачи дизайна.

Figma

Платформы: Web, macOS, Linux, Windows
Цена: 3 тарифа: Бесплатный, $12 в месяц, $45 в месяц

Хотя Figma не так совершенна, как Zeplin, в плане количества поддерживаемых языков кода, она переводит стили дизайна в CSS (для веб), Swift (для iOS/macOS/iPadOS) и XML (для Android). Однако это в любом случае должно покрывать большинство случаев передачи дизайна.

Альтернативные инструменты передачи дизайна могут быть установлены в качестве плагинов Figma для случаев, когда дизайн необходимо перевести в Sass, Less, Stylus, код React Native и т. д.

Изображения можно экспортировать или копировать в буфер обмена в формате SVG или PNG, все сразу или по отдельности, в любом разрешении.

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

Figma - это не только самый используемый инструмент для передачи дизайна, но и для пользовательских потоков, пользовательских интерфейсов, интерактивных прототипов, систем проектирования и контроля версий (согласно исследованию 2020 Design Tools Survey). Хотя Zeplin является самым популярным инструментом для передачи данных благодаря тому, что он поддерживает больше языков программирования, Figma не слишком отстает от него, поскольку он многофункционален и позволяет выполнять гораздо больше функций, чем просто передача данных.

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

Zeplin

Платформы: Web, macOS, Windows
Импорт из: Sketch, Figma, Adobe XD, Photoshop
Стоимость: Имеет 3 тарифа. Бесплатный, $6/месяц, $12/месяц

Zeplin поддерживает больше языков, чем Figma (React Native, Sass, Less, Stylus и т.д. в дополнение к стандартным Swift, XML и CSS). Он также дешевле, чем аналогичные инструменты Figma, хотя это объясняется тем, что аналогичные инструменты Figma многофункциональны и охватывают гораздо большую часть рабочего процесса проектирования пользовательского интерфейса. Zeplin является самым высоко оцененным инструментом для передачи дизайна, поэтому некоторые дизайнеры склонны не замечать этот недостаток.

Чтобы использовать Zeplin, вам придется сначала создать дизайн с помощью Photoshop, Adobe XD, Sketch или Figma, поэтому совершенно понятно, что некоторые дизайнеры предпочитают, чтобы рабочий процесс по созданию пользовательского интерфейса ограничивался одним инструментом, и, вероятно, именно поэтому Figma используется чаще, чем Zeplin.

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

InVision

Платформы: Web, macOS, Windows
Цена: $0/месяц, $7.95/месяц

Инструмент передачи дизайна Inspect компании InVision, который работает в рамках Specs и Prototype, является лишь одним из инструментов в большом наборе средств совместной работы над дизайном компании InVision.

Однако InVision Studio (инструмент InVision для проектирования пользовательского интерфейса) - это то место, где вы, скорее всего, будете создавать свои проекты, прежде чем передавать их разработчикам. Studio доступна для пользователей macOS и Windows.

Хотя стоимость пакета InVision составляет всего 7,95 долларов за пользователя в месяц, что звучит как выгодная сделка по сравнению с аналогичными инструментами, в последнее время компания InVision была вовлечена в негативные отзывы из-за чрезмерных затрат на маркетинг инструментов, которые не оправдали надежд. Основная критика заключается в том, что инструменты InVision иногда кажутся полуфабрикатами и не связанными друг с другом, даже после отложенного запуска. В отличие от этого, Figma работает как единое приложение безупречно.

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

Инструмент Inspect от InVision может переводить стили дизайна в CSS, Less, Sass, SCSS, Stylus, Swift/Objective-C (Apple) и XML (Android) - впечатляющий список. Если вы знакомы с экосистемой InVision, выбор Inspect для процесса передачи дизайна будет неплохим вариантом.

Adobe XD

Платформы: macOS, Windows
Стоимость: $0/месяц, $9.99/месяц, $22.99/месяц

До сих пор мы обсуждали инструменты для передачи дизайна (Zeplin), многофункциональные инструменты проектирования пользовательского интерфейса, включающие передачу дизайна (Figma), и дизайнерские комплексы с несколькими полуинтегрированными инструментами, включающими передачу дизайна (InVision). Из всех этих инструментов Adobe XD наиболее похож на Figma, поскольку тоже является многофункциональным инструментом проектирования пользовательского интерфейса.

Adobe XD - солидный соперник в этом списке, не имеющий сильных недостатков. На самом деле, если вы уже знакомы с экосистемой Adobe, Adobe XD может быть лучшим выбором, особенно если у вас уже есть подписка на Adobe Creative Cloud (в этом случае у вас может быть доступ к Adobe XD).

Если нет, то $9,99/месяц - это все равно справедливая цена, поскольку она предлагает те же функции, что и Figma, за меньшие деньги. Однако, поскольку мы говорим о передаче дизайна, стоит отметить, что Adobe XD только переводит стили в CSS. Но он включает в себя обычные функции (переключение форматов, экспорт активов, извлечение контента).

В целом, если вам требуется только передача дизайна в CSS и/или вы уже знакомы с экосистемой Adobe, Adobe XD - достойный выбор. В этих двух случаях платить больше за подписку на Figma может оказаться излишним.

Sketch

Платформы: macOS
Цена: $9/месяц, $99/год

Наряду с Figma и Adobe XD, Sketch - это еще один многофункциональный инструмент проектирования, который может облегчить большую часть рабочего процесса проектирования пользовательского интерфейса, включая передачу дизайна. Однако, к сожалению, Sketch поддерживает только перевод стилей дизайна в CSS (как Adobe XD).

Еще одним недостатком Sketch является то, что его основное приложение поддерживает только пользователей Mac, хотя, поскольку передача дизайна осуществляется через URL-адрес, которым можно поделиться, это не должно вызывать беспокойства у разработчиков (но это следует учитывать, если в вашей команде несколько дизайнеров).

В целом, Sketch не является лучшим, но и не плох. Он остается в пятерке лучших, потому что дизайнерам нравится его UX.

Еще пять инструментов передачи дизайна

Несмотря на то, что следующие инструменты передачи дизайна не так широко используются, как вышеупомянутые предложения, их стоит рассмотреть, если те, не подходят вам или вашей команде. Кроме того, несколько из перечисленных ниже инструментов (UXPin и Marvel) принадлежат к более крупной экосистеме инструментов, а рабочие процессы лучше держать в рамках одной экосистемы. (То есть, если вы уже используете UXPin или Marvel, будет хорошей идеей использовать их и для передачи).

Заключение

Судя по инструментам для передачи дизайна в этом списке (ранжированном по количеству пользователей), очевидно, что дизайнеры предпочли бы ограничить рабочий процесс проектирования пользовательского интерфейса одной экосистемой, а еще лучше - одним инструментом. Клиенты тоже не прочь заплатить больше.

Лично я с этим согласен. Платить больше за Figma, которая охватывает весь рабочий процесс проектирования пользовательского интерфейса (включая передачу дизайна) не только в рамках одной экосистемы, но и одного инструмента/интерфейса, безусловно, стоит. Тем не менее, я бы смирился с необходимостью синхронизировать дизайн с Zeplin, поскольку он обеспечивает высокий пользовательский опыт.

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

Источник: https://www.sitepoint.com/best-design-handoff-tools/

13 фильмов для программистов, которые стоит посмотреть

2022-01-08T20:16:49.563Z

Кроме "Матрицы", "Девушки с татуировкой дракона" и "Игры в имитацию", существует множество замечательных фильмов о программистах.

В этой статье Вы найдёте множество фильмов о программистах, о которых, возможно, не слышали.

1) Социальная сеть (2010)

Несмотря на то, что в фильме "Социальная сеть" один из самых известных миллиардеров Марк Цукерберг изображен не в самом хорошем образе, он по-прежнему является одним из самых вдохновляющих фильмов для программистов. Фильм рассказывает об основателе Facebook, который создает сайт, проводя большую часть своих дней за программированием.

Фильм рассказывает о том, как Facebook прошел путь от крошечной идеи близнецов Уинклвосс до 500 миллионов пользователей. И, поскольку сейчас у сайта социальной сети почти три миллиарда пользователей, поклонники все еще ждут "Социальную сеть 2".

2) Девушка с татуировкой дракона (2011)

Как и "Социальная сеть", "Девушка с татуировкой дракона" снята Дэвидом Финчером. Но у них есть еще одно сходство, поскольку оба главных героя - программисты.

Более конкретно, Лисбет Саландер - компьютерный хакер, который помогает Микаэлю раскрыть убийство.

3) Стив Джобс (2015)

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

Фильмы "Стив Джобс" и "Джобс" вышли в прокат одновременно, причем последний был еще одним кинобиографией об основателе компании Apple. Фильм 2015 года состоит из трех частей, каждая из которых посвящена запуску разных продуктов.

4) Матрица (1999)

Фильм "Матрица" - прекрасный пример киберпанка. До того, как стать Нео, мистер Андерсон был простым компьютерным программистом по имени Томас, но то, что последовало за этим, является новаторской высокой концепцией о смоделированной реальности, которая полна взрывного действия.

Четвертый фильм серии, "Воскрешение Матрицы", вышел на экраны в 2021 году. В трейлере Нео не помнит, что такое Матрица, так что он вполне может снова стать программистом.

5) Игра в имитацию (2014)

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

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

6) Военные игры (1983)

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

В последнее время хакеры стали серьезной угрозой, ведь они могут получить доступ к большому количеству личной информации. А поскольку дети получают компьютеры в подарок все в более раннем возрасте, "Военные игры" и его главный герой Дэвид (Мэтью Бродерик) предсказали будущее.

7) Трон (1982)

"Трон" - это увлекательный фильм для программистов, который стоит посмотреть по многим причинам. Прежде всего, фильм рассказывает о Кевине Флинне, программисте и разработчике видеоигр, который в итоге переносится в программное обеспечение, которое он разрабатывал.

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

8) Рыба-меч (2001)

"Рыба-меч" - это, по сути, смесь "Матрицы" и "Одиннадцати друзей Оушена".

Как и "Одиннадцати друзей Оушена", в фильме рассказывается о команде грабителей банков, но для того, чтобы украсть 9,5 миллиардов долларов, им нужен лучший компьютерный программист. "Рыба-меч" - это интересный и уникальный взгляд на фильм о грабежах, а эстетику конца 90-х годов приятно пересматривать.

9) Кадры (2013)

Фильмы о программистах, как правило, слишком серьезны, но "Кадры" - это комедия о двух идиотах, которые каким-то образом устраиваются на стажировку в Google. Это один из немногих фильмов с хорошим использованием product placement, поскольку весь фильм рассказывает о том, как прекрасен Google.

Хотя есть комедии гораздо лучшего качества, "Кадры" понравится любому программисту-энтузиасту только за то, как он демонстрирует кампусы Google. Между велосипедами Google и капсулами для сна, фильм представляет собой рекламу, которая хорошо работает.

10) Пятая власть (2013)

Фильм "Пятая власть" рассказывает о Джулиане Ассанже (Бенедикт Камбербэтч), реально существующем активисте и программисте, создавшем WikiLeaks. Когда он создает платформу, где любой анонимный пользователь может сливать правительственные секреты, а его жизнь превращается в триллер.

Возможно, это также является одной из причин того, что фильм не получил такого признания, как другие в этом списке, поскольку он больше полагается на мелодраму и меньше на достоверные факты. Камбербэтч явно любит играть программистов, ведь он не только играет главную роль в фильме "Пятая власть", но и Алана Тьюринга в "Игре в имитацию".

11) Пираты Кремниевой долины (1999)

Во-первых, это фильм не о корпорациях «Apple» и «Microsoft». Фильм о людях, которые смогли «перевернуть мир». Фильм рассказывает о том, как 5 человек смогли не просто стать богатыми и знаменитыми, а затмить таких гигантов как «IBM». Конечно, все внимание фокусируется на 2-х личностях: Билле и Стиве. Это не просто программисты и разработчики, очкарики и ботаники.

В фильме отлична, передана суть, почему на данный момент монополистом является Microsoft, а не Apple. Билл, во-первых, бизнесмен. Он знал как себя вести, когда открывать рот, а когда молчать. Когда ждать, а когда делать шаг. И полная его противоположность — Стив. Импульсивный, горячий, эмоциональный. Он не боится своих идей и не боится воплощать их в жизнь.

Последний диалог между Биллом и Стивом актуален до сих пор. Apple делает действительно продукты, на порядок «выше», чем Microsoft, но это действительно уже не важно.

12) Джобс: Империя соблазна (2013)

Стив Джобс... Что вам приходит на ум, когда вы слышите это имя? CEO Apple и Pixar, создатель одного из первых персональных компьютеров, новатор, требовательный и авторитарный перфекционист. Человек, бросивший колледж и ставший миллиардером. Таким мы знаем Джобса по биографиям и презентациям, но каким же он был на самом деле? Каким его знали друзья и коллеги? Именно на эти вопросы и попытались ответить создатели фильма 'Джобс: Империя соблазна'.

13) Социальная дилемма (2020)

Данная картина показывает достаточно много серьезных проблем, связанных не только с социальными сетями, но и с IT гигантами в целом. Если рассуждать о пользе и вреде социальных сетей, то польза перевешивает. Благодаря социальным сетям у нас появилось множество профессий, возможность гибко лавировать в прослойках общества, контактировать с людьми на расстоянии и множество других благ. Они перманентно и крепко впились в нашу жизнь и будет сложно что-либо с этим поделать.

Фронтенд-разработчик - что учить в 2022 году?

2022-01-06T21:43:06.072Z

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

1. Что такое фронтенд-разработка?

Фронтенд веб-разработка, также известная как разработка на стороне клиента - это практика создания HTML, CSS и JavaScript для веб-сайта или веб-приложения таким образом, чтобы пользователь мог видеть их и взаимодействовать с ними напрямую. Проблема, связанная с разработкой внешнего интерфейса, заключается в том, что инструменты используемые для создания внешнего интерфейса, постоянно меняются. Следовательно, разработчику необходимо быть в курсе того, как постоянно развивается эта область.

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

2. Сфера деятельности Frontend разработчика

Frontend разработка - это проектирование, анализ и отладка кода приложений. Другими словами, frontend-разработка отвечает за управление дизайном, внешним видом и функциональностью веб-сайта.

В целом, будущее выглядит светлым для тех, кто хочет стать frontend разработчиком. Недавние исследования предсказывали, что к 2021 году только в США будет не хватать около 1 миллиона разработчиков. По данным аналогичных исследований, в остальном мире ситуация будет еще хуже.

По данным Бюро трудовой статистики США, с 2016 по 2026 год занятость веб-разработчиков в США вырастет на 15%. Этот показатель намного выше, чем в среднем по всем другим профессиям.

3. С чего начать?

Чтобы стать успешным Frontend разработчиком. Вам необходимо обладать некоторыми важными навыками.

Frontend-разработчику необходим хорошо укомплектованный личный набор инструментов. Поэтому навыки frontend разработчика включают в себя необходимость:

Знать HTML, CSS, JavaScript.
Владеть опытом работы с веб-фреймворками (React.js, Angular.js, Vue.js).
Иметь опыт работы с приложениями для графического дизайна (Adobe Illustrator или Photoshop, Figma).
Понимание принципов SEO
Обладать навыками "решения проблем"
Уметь общаться с членами команды, руководителями и клиентами
Обладать навыками межличностного общения

4. Чему нужно научиться?

Необходимые навыки варьируются в зависимости от должности и проекта, над которым предстоит работать. Некоторым компаниям нужны только основы, но с солидным опытом; другие ищут настоящих профессионалов, разработчиков, которые также неплохо разбираются и в UI и UX дизайне.

4.1 Технологии для изучения:

4.1.1. HTML5 и CSS

Язык разметки гипертекста (HTML) и каскадные таблицы стилей (CSS) - это гайки и болты веб-сайта. В то время как HTML придает веб-страницам структуру, CSS помогает стилизовать элементы HTML с помощью цвета, шрифтов, шрифта и многого другого.

Освоение HTML и CSS является ОБЯЗАТЕЛЬНЫМ. Честно говоря, не иметь их под рукой - неприемлемо для фронтенд разработчика. HTML, ключевой структурный компонент любого веб-сайта, вместе с CSS, уже позволяет создавать некоторые базовые веб-сайты и приложения. Однако, чтобы сделать его интерактивным, вам нужен JavaScript! Но без знания HTML и CSS его невозможно внедрить в сайт или приложение.

4.1.2. JavaScript

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

4.2. Фреймворки

Фреймворки - это заранее написанные модули кода для таких распространенных элементов сайта, как интерфейсы входа в систему и поиска. Их легко внедрять и использовать многократно.

4.2.1. Фреймворки JavaScript

В зависимости от команды, с которой вы собираетесь работать, или от проекта, скорее всего, будет задан фреймворк, с которым вы должны быть знакомы. Знание самого языка - это одно, но умение работать в рамках фреймворка - это дополнительный навык, без которого мало что получится, особенно если вы хотите создать какой-то реальный проект для клиента. Наиболее популярными являются Angular, React и Vue.js - знакомство с одним из них будет большим плюсом.

React.js

React - это фронтенд библиотека JavaScript с открытым исходным кодом, используемая для создания интерактивных пользовательских интерфейсов (UI), что помогает повысить скорость работы приложений. Это один из самых простых для изучения фреймворков, который был разработан Facebook для решения проблем с поддержкой кода из-за постоянных дополнений и улучшений. Он до сих пор поддерживается Facebook и другими отдельными frontend разработчиками.

Angular.js

Angular - это современный фреймворк с открытым исходным кодом на основе TypeScript и один из самых рейтинговых инструментов разработки программного обеспечения. Особенности Angular Directives позволяют разработчикам программировать специальное поведение DOM, что делает возможным создание полного и динамического HTML-контента. Angular имеет функцию иерархической вставки зависимостей, которая делает компоненты кода удобными для тестирования, многократного использования и более легкого управления: она помогает определить зависимости кода как внешние элементы, отделяя компоненты от их зависимостей.

Vue.js

Vue - один из самых дружелюбных к новичкам фреймворков, с хорошо проработанной документацией и поддерживающим сообществом. Vue имеет широкий выбор инструментов, таких как инструменты end-to-end тестирования, системы установки плагинов, инструменты отладки в браузере, серверный рендерер, менеджер состояний и другие.

4.2.2 CSS фреймворки

Фреймворки CSS это оптимизация рабочего процесса. Разработчику лучше знать их, потому что он сможет получить те же результаты за меньшее время и с меньшим количеством набора текста. Еще одним важным аспектом является отзывчивый дизайн - сайты и приложения, которые отлично работают на любом устройстве и размере. Знание того, как преобразовать сайт из статичного в гибкий, необходимо, но еще лучше сэкономить время, используя фреймворки, в которых это уже встроено.

4.2.2.1. Bootstrap

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

4.2.2.2. Tailwind CSS

Tailwind - это CSS-фреймворк для быстрого создания интерфейсов пользователя. Он включает в себя классы, позволяющие создавать UI пользовательского интерфейса прямо в пользовательской разметке. В отличие от Bootstrap, где вы получаете заранее разработанные компоненты, которые можно использовать в качестве основы для дальнейшей разработки, Tailwind не имеет готового шаблона, но позволяет быстро внедрить свой стиль.

4.2.2.3. Bulma

Bulma - это современный CSS-фреймворк, основанный на flexbox. Он предоставляет гибкий дизайн и компоненты пользовательского интерфейса, ориентированные на мобильные устройства, и имеет модульную структуру, позволяющую внедрять только то, что вы хотите включить в свой веб-дизайн. Bulma предлагает современную систему сетки на основе flexbox.

4.3 Инструменты

4.3.1 Веб-браузер

Веб-браузер - это ПО, как мы знаем, используемое для получения, отображения и просмотра информации в сети. Как правило, браузеры работают на компьютере, планшете или телефоне, но в последнее время браузер можно найти практически на чем угодно (например, на холодильнике, в автомобиле и т.д.).

Наиболее распространенными веб-браузерами являются следующие:

Chrome
Safari
Internet Explorer (Примечание: не Edge, а IE 9 - IE 11)
Firefox
Edge

С помощью инструментов разработчика (которые вы открываете в браузере) вы можете экспериментировать с каждым элементом сайта. Почему это важно? Потому что, не меняя ничего в коде, вы можете проверить, как эти изменения повлияют на сайт или приложение, пока оно открыто в браузере. Это также помогает при поиске ошибок и недостатков.

4.3.2 Инструменты проектирования

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

Ниже приведены некоторые полезные инструменты для дизайна:

Adobe Photoshop
Adobe Illustrator
Adobe XD
Adobe InDesign
Figma

4.4 Оптимизация производительности веб-сайта (WPO)

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

Например, можно оптимизировать изображения и сделать компоненты страницы более легкими в зависимости от устройства без ущерба для функциональности сайта, этим обычно занимаются сборщики сайтов, такие как webpack, vite, parcell и другие, которые тоже необходимо знать разработчику.

4.5 Поисковая оптимизация (SEO)

Поисковая оптимизация - это практика увеличения посещаемости сайта посредством результатов поиска.

Как правило, для надзора за практикой SEO существует отдельная команда. Однако знание основ может помочь вам определить, где разместить заголовки, метаописания и текст на сайте, чтобы поисковые системы могли легко их найти.

4.6. Контроль версий с помощью Git:

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

4.6.1. Git

Git это система контроля версий. Она активно поддерживается и имеет открытый исходный код, созданный тем же основателем операционной системы Linux. Каждый разработчик, имеющий рабочую копию кода, может легко получить доступ к полной истории изменений, что упрощает редактирование и восстановление кода.

5. Софт скилы

5.1. Решение проблем

Работа над проектом и каждой мелкой задачей - это ежедневная забота frontend разработчика, но проблемы решаются шаг за шагом, вместе с командой. Однако если что-то не работает на сайте, фронтенд-разработчик должен это исправить! Решать проблемы и делать так, чтобы все работало, должно быть мышлением каждого профессионального разработчика.

5.2. Командная работа

Как было сказано выше, хорошая коммуникация является ключевым фактором! Работа в команде обычно является частью повседневной жизни frontend разработчика. Даже если вы работаете как фрилансер, вам придется хорошо общаться с клиентами и в какой-то степени работать с ними над проектом. Умение работать в команде, поддерживать других разработчиков и спрашивать совета, когда это необходимо, делает рабочий процесс более гладким, и в итоге вы быстрее получаете конечный продукт.

5.3. Хорошая коммуникация

Разрушая стереотип из ситкома о разработчиках, вы должны уметь хорошо общаться. Прежде всего, работа между дизайнерами UI/UX, front и backend должна проходить гладко, чтобы завершить проект. Конечно, в agile-компаниях, занимающихся разработкой ПО, вы также получаете менеджера проекта, который помогает с потоком информации, и SCRUM-мастера, который помогает с процессом. Тем не менее, без некоторых базовых навыков межличностного общения работать с другими людьми будет не так просто. Эффективная коммуникация необходима, когда вы работаете с другими людьми. Также важно уметь излагать и доносить то, что вы задумали - написание документации, которую другие могут прочитать и понять, высоко ценится.

Заключение

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

Напишите в комментариях, какие навыки Вам нужно изучить из нашего списка и какие мы не указали?

Источник: https://www.raftlabs.co/development/frontend-developer-complete-roadmap

Имитируемые методы массивов: как писать безупречно чистый код JavaScript

2021-12-25T21:01:29.091Z

В этой статье мы увидим, как методы массивов, которые изменяют исходный массив, усложняют нам жизнь. Но не все так плохо и печально. Мы перепишем код так, чтобы нас эта проблема больше не тревожила.

Мутация массивов в JavaScript

Массивы в JavaScript - это просто объекты, что означает, что их можно изменять. Фактически, многие встроенные методы массивов изменяют сам массив. Это может означать, что золотое правило, описанное выше, будет нарушено просто при использовании одного из встроенных методов.

Вот пример, показывающий, как это потенциально может вызвать некоторые проблемы:

const numbers = [1,2,3];
const countdown = numbers.reverse();

Этот код выглядит нормально. У нас есть массив с именем numbers, и мы хотим, чтобы другой массив с именем countdown перечислял числа в обратном порядке. И, кажется, это работает. Если проверить значение переменной countdown, то это то, что мы ожидаем:

countdown
<< [3,2,1]

Неприятным сопутствующим результатом этой операции является то, что метод reverse() изменил и массив numbers. Это совсем не то, чего мы хотели:

Что еще хуже, обе переменные ссылаются на один и тот же массив, поэтому любые изменения, которые мы впоследствии внесем в одну из них, повлияют на другую. Предположим, мы используем метод Array.prototype.push(), чтобы добавить значение 0 в конец массива countdown. То же самое будет сделано и с массивом numbers (поскольку они оба ссылаются на один и тот же массив):

countdown.push(0)
<< 4
countdown
<< [3,2,1,0]
numbers
<< [3,2,1,0]

Именно этот результат может остаться незамеченным - особенно в большом приложении - и привести к очень трудно отслеживаемым ошибкам.

Методы изменяющегося массива в JavaScript

И reverse - не единственный метод массива, который вызывает подобные мутации. Вот список методов массива, которые изменяют массив, к которому они обращаются:

Немного смущает то, что у массивов также есть некоторые методы, которые не изменяют исходный массив, а возвращают новый массив:

Эти методы возвращают новый массив в зависимости от операции, которую они выполнили. Например, метод map() можно использовать для удвоения всех чисел в массиве:

const numbers = [1,2,3];
const evens = numbers.map(number => number * 2);
<< [2,4,6]

Теперь, если мы проверим массив numbers, то увидим, что вызов метода не повлиял на него:

numbers
<< [1,2,3]

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

В Ruby есть хорошее решение этой проблемы в том, как он использует нотацию "bang". Любой метод, вызывающий постоянное изменение вызывающего его объекта, заканчивается символом !. [1,2,3].reverse! перевернет массив, а [1,2,3].reverse вернет новый массив с перевернутыми элементами.

Имитируемые методы массивов: Давайте исправим этот мутирующий беспорядок!

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

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

Поскольку мы не собираемся исправлять Array.prototype, эти функции всегда будут принимать сам массив в качестве первого параметра.

Pop

Давайте начнем с написания новой функции pop, которая возвращает копию исходного массива, но без последнего элемента. Обратите внимание, что Array.prototype.pop() возвращает значение, которое было извлечено из конца массива:

const pop = array => array.slice(0,-1);

Эта функция использует Array.prototype.slice() для возврата копии массива, но с удаленным последним элементом. Второй аргумент -1 означает прекращение резки за 1 место до конца. Мы можем увидеть, как это работает, на примере ниже:

const food = ['🍏','🍌','🥕','🍩'];
pop(food)
<< ['🍏','🍌','🥕']

Push

Далее создадим функцию push(), которая будет возвращать новый массив, но с добавленным в конец новым элементом:

const push = (array, value) => [...array,value];

Здесь используется оператор spread для создания копии массива. Затем он добавляет значение, указанное в качестве второго аргумента, в конец нового массива. Вот пример:

const food = ['🍏','🍌','🥕','🍩'];
push(food,'🍆')
<< ['🍏','🍌','🥕','🍩','🍆']

Shift и Unshift

Аналогично мы можем написать замены для Array.prototype.shift() и Array.prototype.unshift():

const shift = array => array.slice(1);

Для нашей функции shift() мы просто отрезаем первый элемент из массива вместо последнего. Это можно увидеть на примере ниже:

const food = ['🍏','🍌','🥕','🍩'];
shift(food)
<< ['🍌','🥕','🍩']

Наш метод unshift() вернет новый массив с новым значением, добавленным в начало массива:

const unshift = (array,value) => [value,...array];

Оператор spread позволяет нам размещать значения внутри массива в любом порядке. Мы просто помещаем новое значение перед копией исходного массива. Как это работает, можно увидеть на примере ниже:

const food = ['🍏','🍌','🥕','🍩'];
unshift(food,'🍆')
<< ['🍆','🍏','🍌','🥕','🍩']

Reverse

Теперь давайте попробуем написать замену для метода Array.prototype.reverse(). Он будет возвращать копию массива в обратном порядке, вместо того чтобы изменять исходный массив:

const reverse = array => [...array].reverse();

Этот метод по-прежнему использует метод Array.prototype.reverse(), но применяется к копии исходного массива, которую мы создаем с помощью оператора spread. Нет ничего плохого в том, чтобы мутировать объект сразу после его создания, что мы здесь и делаем. Мы можем видеть, как это работает в примере ниже:

const food = ['🍏','🍌','🥕','🍩'];
reverse(food)
<< ['🍩','🥕','🍌','🍏']

Splice

Наконец, давайте разберемся с Array.prototype.splice(). Это очень универсальная функция, поэтому мы не будем полностью переписывать то, что она делает. Вместо этого мы сосредоточимся на двух основных вариантах использования функции slice: удаление элементов из массива и вставка элементов в массив.

Удаление элемента массива

Начнем с функции, которая вернет новый массив, но с удаленным элементом с заданным индексом:

const remove = (array, index) => [...array.slice(0, index),...array.slice(index + 1)];

Для этого используется Array.prototype.slice(), чтобы разделить массив на две половины - по обе стороны от элемента, который мы хотим удалить. Первый срез возвращает новый массив, копируя элементы исходного массива до индекса перед элементом, указанным в качестве аргумента. Второй фрагмент возвращает массив с элементами после удаляемого элемента, вплоть до конца исходного массива. Затем мы помещаем их оба вместе в новый массив с помощью оператора spread.

Мы можем проверить, что это работает, попытавшись удалить элемент с индексом 2 в приведенном ниже массиве food:

const food = ['🍏','🍌','🥕','🍩'];
remove(food,2)
<< ['🍏','🍌','🍩']

Добавление элемента массива

Наконец, давайте напишем функцию, которая будет возвращать новый массив с новым значением, вставленным в определенный индекс:

const insert = (array,index,value) => [...array.slice(0, index), value, ...array.slice(index)];

Эта функция работает аналогично функции remove(). Она создает два фрагмента массива, но на этот раз включает элемент с указанным индексом. Когда мы снова соединяем эти два фрагмента вместе, мы вставляем между ними значение, указанное в качестве аргумента.

Мы можем проверить, как это работает, попробовав вставить эмодзи в виде кекса в середину нашего массива продуктов:

const food = ['🍏','🍌','🥕','🍩']
insert(food,2,'🧁')
<< ['🍏','🍌','🧁','🥕','🍩']

Теперь у нас есть набор методов неизменяемого массива, которые оставляют наши исходные массивы в покое. Я сохранил их все в одном месте на CodePen, поэтому смело копируйте их и используйте в своих проектах. Вы можете разделить их по пространствам имен, сделав их методами одного объекта, или просто использовать их как есть, когда это необходимо.

Этих методов достаточно для большинства операций с массивами. Если вам нужно выполнить другую операцию, помните золотое правило: сначала создайте копию исходного массива с помощью оператора spread. Затем сразу же примените к этой копии все мутирующие методы.

Источник: https://www.sitepoint.com/immutable-array-methods-javascript/

5 способов исправить ошибки с помощью Git

2021-12-23T16:57:21.454Z

Независимо от того, насколько вы опытны, практика разработки невозможна без ошибок. Но что отличает программистов от лучших программистов, так это то, что они умеют исправлять свои ошибки!

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

Отмена некоторых локальных изменений

Программирование - это часто беспорядочный процесс. Временами кажется, что вы делаете два шага вперед и один назад. Другими словами: часть кода, который вы написали, прекрасна... а часть - не очень. Вот где Git может помочь вам: он позволяет сохранить то, что хорошо, и отбросить те изменения, которые вам больше не нужны.

Давайте рассмотрим пример сценария с некоторыми "локальными" изменениями (они же изменения, которые мы еще не коммитили).

У нас есть проблемный файл general.css. Давайте сначала разберемся с ним. Изменения, которые мы внесли, пошли в совершенно неправильном направлении. Давайте отменим все эти действия и воссоздадим последнее закоммиченное состояние этого файла:

$ git restore css/general.css

Обратите внимание, что в качестве альтернативы я мог бы использовать команду git checkout для достижения того же результата. Но поскольку у git checkout так много разных задач и значений, я предпочитаю более новую команду git restore (которая ориентирована исключительно на такие задачи).

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

И снова на помощь приходит git restore - но на этот раз с помощью -p, потому что мы хотим спуститься на уровень "patch":

$ git restore -p index.html

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

Вы заметите, что я ввел "n" для первого фрагмента (чтобы сохранить его) и "y" для второго фрагмента (чтобы отбросить его). После завершения процесса видно, что сохранился только первый, необходимый фрагмент изменений - как мы и хотели!

Возврат определенного файла в предыдущее состояние

Иногда требуется восстановить определенный файл до определенной версии. Например, вы знаете, что index.html работал нормально в какой-то более ранний момент времени, но теперь это не так. Тогда вы хотите вернуть время назад, но только для этого конкретного файла, а не для всего проекта!

Прежде всего, необходимо выяснить, какую именно часть проекта мы хотим восстановить. При правильном наборе параметров вы можете заставить команду git log показать вам историю только нашего единственного файла:

$ git log -- index.html

Оно показывает нам только те коммиты, в которых был изменен index.html, что довольно полезно для поиска ошибки.

Если вам нужно больше информации и вы хотите посмотреть на содержимое этих коммитов, вы можете попросить Git показать вам фактические изменения в этих коммитах с помощью флага -p:

$ git log -p -- index.html

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

$ git checkout <bad-commit-hash>~1 -- index.html

Добавление ~1 к хэшу плохого коммита даст указание Git'у сделать именно это: перейти на одну версию раньше ссылающегося коммита.

Выполнив эту команду, вы увидите, что index.html в вашей локальной рабочей версии изменен: Git восстановил для нас последнюю правильную версию файла!

Восстановление потерянной версии с помощью Reflog

Еще одним замечательным инструментом исправления в арсенале Git'а является "Reflog". Его можно рассматривать как журнал, в котором Git протоколирует все движения указателя HEAD, происходящие в вашем локальном репозитории - такие вещи, как коммиты, чек-ауты, слияния и ребейзы, cherry-pick'и и сбросы. Все наиболее интересные действия прекрасно отображаются в этом журнале!

Такой журнал идеально подходит для тех случаев, когда дела идут неважно. Итак, давайте для начала устроим небольшую поломку, которую потом можно будет устранить с помощью Reflog.

Допустим, вы были уверены, что ваши последние коммиты никуда не годятся: вы хотели от них избавиться и поэтому использовали git reset для возврата к предыдущей версии. В результате "плохие" коммиты исчезли из вашей истории коммитов - как вы и хотели.

Дальше вы замечаете, что это была плохая идея: на самом деле коммиты были не так уж плохи! Но плохая новость, конечно, в том, что вы только что стёрли их из истории коммитов вашего репозитория!

Это классический случай для инструмента Git'а Reflog! Давайте посмотрим, как он может спасти вас:

$ git reflog

Во-первых, Reflog очень легко открыть: для этого достаточно выполнить простой git reflog.
Во-вторых, вы заметите, что записанные состояния отсортированы в хронологическом порядке, причем самое новое находится вверху.
Если вы присмотритесь, то увидите, что самый верхний (то есть самый новый) элемент - это действие "сброс". Что мы и сделали 20 секунд назад. Очевидно, журнал работает.
Если теперь мы захотим отменить наш непроизвольный "сброс", мы можем просто вернуться к прежнему состоянию - что также аккуратно показано здесь! Мы можем просто скопировать хэш коммита этого предыдущего состояния в буфер обмена и продолжить работу оттуда.

Чтобы восстановить прежнее состояние, мы можем либо снова использовать git reset, либо просто создать новую ветку:

$ git branch happy-ending e5b19e4

Как мы можем с радостью убедиться, наша новая ветка содержит коммиты, которые, как мы думали, потеряли из-за случайной ошибки при git reset!

Восстановление удаленной ветки

Рефлог может быть полезен и в других ситуациях. Например, когда вы по неосторожности удалили ветку, которую действительно (!) не следовало удалять. Давайте посмотрим на наш пример:

$ git branch
  * feature/analytics
    master

Представим, что наш заказчик проекта говорит нам, что прекрасная функция analytics, над которой мы работали, больше не нужна. Конечно же, мы удалим соответствующую ветку feature/analytics!

feature/analytics - это наша текущая ветка HEAD. Чтобы иметь возможность удалить ее, мы должны сначала переключиться на другую ветку:

$ git checkout master
$ git branch -d feature/analytics
error: The branch 'feature/analytics' is not fully merged.
If you are sure you want to delete it, run 'git branch -D feature/analytics'.

Git говорит нам, что мы собираемся сделать что-то действительно значимое: поскольку feature/analytics содержит уникальные коммиты, которые больше нигде не присутствуют, удаление этой функции уничтожит некоторые (потенциально ценные) данные. Что ж... поскольку функция больше не нужна, мы можем продолжать:

$ git branch -D feature/analytics
Deleted branch feature/analytics (was b1c249b).

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

И снова мы сталкиваемся с неприятной ситуацией, когда мы могли потерять ценные данные! Так что давайте посмотрим, сможет ли Reflog спасти нас еще раз:

$ git reflog

Прежде чем мы решили удалить нашу ветку, нам пришлось выполнить git checkout, чтобы от нее переключиться (поскольку Git не позволяет удалять текущую ветку). Конечно, эта процедура также была зарегистрирована в Reflog. Чтобы восстановить удалённую ветку, мы можем теперь просто взять предыдущее состояние в качестве отправной точки для новой ветки:

$ git branch feature/analytics b1c249b

И вуаля: наша ветка восстановилась!

Перенос коммита в другую ветку

В заключение приведем еще одну классику из серии "О нет!": коммит в не той ветке.

Сегодня во многих командах действует правило, запрещающее коммиты непосредственно в давно работающие ветки, такие как "main", "master" или "develop". Как правило, новые коммиты должны попадать в эти ветки только через слияния/ребейзы. И все же мы иногда забываем и делаем коммит напрямую...

Давайте рассмотрим следующий сценарий в качестве примера.

Мы должны были сделать коммит на feature/newsletter, но по неосторожности нажали на master. Давайте рассмотрим решение проблемы шаг за шагом.

Во-первых, мы должны убедиться, что на этот раз мы находимся в правильной ветке, поэтому мы проверяем feature/newsletter:

$ git checkout feature/newsletter

Теперь мы можем безопасно перенести этот коммит с помощью команды cherry-pick:

$ git cherry-pick 26bf1b48

Мы можем взглянуть на feature/newsletter и увидим, что теперь коммит существует и здесь.

Пока всё хорошо. Но cherry-pick не удалил коммит из master ветки, где его никогда не должно было быть. Поэтому нам придётся навести порядок и там:

$ git checkout master
$ git reset --hard HEAD~1

Мы переключаемся обратно на master и затем используем git reset, чтобы удалить ненужный коммит из истории. Наконец, все вновь исправлено.

Мы не можем избежать ошибок! Каким бы лучшим программистом мы ни были, время от времени мы будем ошибаться. Поэтому вопрос не в том, совершаем ли мы ошибки, а в том, насколько хорошо мы умеем с ними справляться и устранять проблемы.

Источник: https://www.sitepoint.com/5-ways-to-undo-mistakes-with-git/

Введение в PostCSS

2021-12-14T05:19:48.841Z

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

Значение и ограничения препроцессоров

Большинство разработчиков CSS знакомы с препроцессорами. Такие инструменты, как Sass, Less и Stylus, ввели такие понятия, как партиции файлов, вложенность, переменные и миксины. Некоторые функции постепенно появляются в родном CSS, но препроцессор по-прежнему полезен для управления большими кодовыми базами и поддержания единства стиля в коде.

Трудно представить себе работу без препроцессора CSS, но есть и минусы:

Препроцессоры не являются расширяемыми или ограничиваемыми. Большинство препроцессоров - это "черный ящик", который предоставляет вам определенный набор поддерживаемых функций. Можно написать пользовательские функции, но функциональность, выходящая за рамки данного инструмента, остается невозможной - например, вставка SVG в качестве фонового изображения. Аналогично, вы не можете остановить разработчиков, использующих опции, которых вы предпочли бы избежать, такие как @extend или глубокая вложенность. Линтинг может помочь, но он не остановит препроцессор от компиляции корректного файла.
Препроцессоры предоставляют свой собственный синтаксис. Код препроцессора может напоминать CSS, но ни один браузер не сможет разобрать этот файл. Синтаксис отличается, и если ваш инструмент изменится или станет недоступным, ваш код потребует обновлений, чтобы сделать его пригодным для использования.

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

Что такое PostCSS?

PostCSS - это не препроцессор (хотя он может работать как таковой). Это инструмент Node.js, который берет валидный CSS и улучшает его. Даже те, кто использует Sass, Less или Stylus, часто выполняют шаг PostCSS после первоначальной компиляции CSS. Вероятно, вы сталкивались с плагином PostCSS Autoprefixer, который автоматически добавляет префиксы -webkit, -moz и -ms к свойствам CSS, которые их требуют.

Сам по себе PostCSS ничего не делает. Это синтаксический разборщик, который токенизирует код CSS для создания абстрактного синтаксического дерева. Плагин может обработать это дерево и соответствующим образом обновить свойства. После того, как все плагины завершат свою работу, PostCSS переформатирует все обратно в строку и выводит в файл CSS.

Доступно около 350 плагинов, и большинство из них выполняют одну задачу, например, инлайнинг @import деклараций, упрощение функций calc(), работа с изображениями, линтинг синтаксиса, минификация и многое другое. Более удобный поиск плагинов доступен в каталоге плагинов PostCSS.

Преимущества PostCSS

PostCSS является для CSS тем же, чем Babel является для JavaScript. Он может взять стандартную таблицу стилей, которая работает в последних браузерах, и вывести CSS, который работает везде - например, преобразовать новое свойство inset обратно в свойства top, bottom, left и right. Со временем вы можете отказаться от этого процесса, поскольку все больше браузеров поддерживают inset. Конечно, некоторые плагины позволяют анализировать синтаксис препроцессора, который не является стандартным CSS, но вы не обязаны их использовать.
Используйте плагины и функции, которые вам нужны. PostCSS является настраиваемым, и вы можете использовать те плагины, которые вам нужны. Например, вы можете поддерживать партиклы (partials) и вложенность, но не разрешать переменные, циклы, миксины, мапы и другие возможности, доступные в Sass.
Обеспечьте индивидуальную настройку для каждого проекта. Индивидуальная настройка проекта может расширить или уменьшить набор плагинов, используемых в других местах. Возможности намного разнообразнее, чем у любого препроцессора.
Пишите собственные плагины для PostCSS. Существует широкий спектр плагинов для расширения синтаксиса, разбора будущих свойств, добавления возвратов, оптимизации кода, обработки цветов, изображений, шрифтов и даже написания CSS на других языках, таких как испанский и русский. Если вдруг вы не найдете то, что вам нужно, вы можете написать свой собственный плагин PostCSS на JavaScript.
Возможно, вы уже используете PostCSS. Вы можете удалить зависимости от препроцессора, если уже используете плагин PostCSS, например AutoPrefixer. PostCSS не обязательно быстрее или легче, чем использование препроцессора, но он может обрабатывать все CSS за один шаг.

Установка PostCSS

PostCSS требует Node.js, но в этом руководстве демонстрируется, как установить и запустить PostCSS из любой папки - даже из тех, которые не являются проектами Node.js. Вы также можете использовать PostCSS из webpack, Parcel, Gulp.js и других инструментов, но мы будем придерживаться командной строки.

Установите PostCSS глобально в вашей системе, выполнив следующее:

npm install -g postcss-cli

Убедитесь, что он работает, введя это:

postcss --help

Установка вашего первого плагина PostCSS

Чтобы сделать что-то практичное, вам потребуется как минимум один плагин. Хорошим вариантом является плагин импорта PostCSS, который инлайнит все объявления @import и объединяет ваши CSS в один файл. Установите его глобально следующим образом:

npm install -g postcss-import

Чтобы протестировать этот плагин, откройте или создайте новую папку проекта, например cssproject, затем создайте подпапку src для ваших исходных файлов. Создайте файл main.css, чтобы загрузить все партиклы:

/* src/main.css */
@import '_reset';
@import '_elements';

Затем создайте файл _reset.css в той же папке:

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

После этого создайте файл _elements.css:

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

Запустите PostCSS из корневой папки проекта, передав входной CSS-файл, список плагинов для --use и имя --output файла:

postcss ./src/main.css --use postcss-import --output ./styles.css

Если у вас нет ошибок, следующий код будет выведен в новый файл styles.css в корне проекта:

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

Обратите внимание, что PostCSS может выводить файлы CSS в любом месте, но папка вывода должна существовать; он не будет создавать структуру папок за вас.

Включение и отключение карт источников

По умолчанию выводится встроенная карта исходного текста. Когда скомпилированный CSS-файл используется в HTML-странице, при его просмотре в инструментах разработчика браузера будет показан исходный src-файл и строка. Например, при просмотре стилей <body> будет выделена строка 2 src/_elements.css, а не строка 8 styles.css.

Вы можете создать внешнюю карту источников, добавив переключатель --map (или -m) к команде postcss. Пользы от этого немного, кроме того, что CSS-файл становится чище, и браузеру не нужно загружать карту исходников, если только не открыты инструменты разработчика.

Вы можете удалить карту источников с помощью опции --no-map. Всегда используйте эту опцию при выводе CSS-файлов для продакшен развертывания.

Установка и использование плагина AutoPrefixer

Плагин Autoprefixer часто является первым знакомством разработчика с PostCSS. Он добавляет префиксы поставщиков в соответствии с использованием браузера и правилами, определенными на сайте caniuse.com. Префиксы поставщиков меньше используются в современных браузерах, которые скрывают экспериментальную функциональность за флагами. Однако все еще существуют свойства, такие как user-select, для которых требуются префиксы -webkit-, -moz- и -ms-.

Установите плагин глобально с помощью этого:

npm install -g autoprefixer

Затем укажите его как еще один параметр --use в команде postcss:

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

Изучите объявление label в строке 11 файла styles.css, чтобы увидеть свойства, привязанные к производителю:

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

AutoPrefixer использует модуль browserlist для определения того, какие префиксы браузера необходимо добавить. По умолчанию это:

> 0,5%: браузер с долей рынка не менее 0,5%
последние 2 версии: последние два выпуска этих браузеров
Firefox ESR: включая Firefox Extended Support Releases
не устаревший: любой браузер, который не снят с производства

Вы можете изменить эти настройки по умолчанию, создав файл .browserslistrc.

> 2%

Или вы можете добавить массив "browserslist" в package.json в проекте Node.js.

"browserslist": [
   "> 2%"
]

Для адресации браузеров с долей рынка 2% и более требуется только префикс -webkit- в Safari:

label {
  -webkit-user-select: none;
          user-select: none;
}

Минимизация CSS с помощью cssnano

cssnano минимизирует CSS, удаляя пробелы, комментарии и другие ненужные символы. Результаты могут быть разными, но вы можете ожидать уменьшения файлов на 30%, которые можно развернуть на продакшен серверах для повышения производительности веб-страниц.

Установка cssnano глобально:

npm install -g cssnano

Затем добавьте его в команду postcss. Мы также включим --no-map, чтобы отключить карту источников:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

Это сокращает CSS-файл до 97 символов:

*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

Автоматическая сборка при изменении исходных файлов

Опция PostCSS --watch автоматически собирает ваш CSS-файл при изменении любого из исходных файлов. Вы также можете добавить переключатель --verbose, который сообщает, когда происходит сборка:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

Ваш терминал покажет Waiting for file changes. Внесите изменения в любой файл, и файл styles.css будет перестроен. PostCSS также сообщит о любых проблемах, таких как синтаксические ошибки.

Для завершения нажмите Ctrl | Cmd + C в терминале.

Создание файла конфигурации PostCSS

Команда postcss становится длинной и громоздкой по мере добавления дополнительных плагинов и опций. Вы можете создать конфигурационный файл JavaScript, который определяет все опции и может логически определить, запущен ли он в среде разработки или производства.

Создайте файл конфигурации с именем postcss.config.cjs в корне папки вашего проекта. Также обратите внимание на следующее:

вы можете поместить файл в другую папку, но при запуске postcss вам нужно будет указать --config <dir>
вы можете использовать postcss.config.js в качестве имени файла, но PostCSS может не работать в проектах Node.js, у которых "type": "module" в package.json

Добавьте следующий код в файл postcss.config.cjs:

// Конфигурация PostCSS
module.exports = (cfg) => {
  const devMode = (cfg.env === 'development');

  return {
    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]
  };
};

PostCSS передает объект cfg, который содержит параметры командной строки.

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}

Модуль должен возвращать объект с необязательными свойствами:

map: настройка карты источника
parser: использовать ли синтаксический анализатор не-CSS (например, плагин scss).
plugins: массив плагинов и конфигураций для обработки в указанном порядке

Приведенный выше код определяет, есть ли у команды postcss опция --env. Это сокращение для установки переменной окружения NODE_ENV. Чтобы скомпилировать CSS в режиме разработки, запустите postcss с опцией --env development и, опционально, установите --watch --verbose. Это создает встроенную карту исходников и не минифицирует вывод:

postcss ./src/main.css --output ./styles.css --env development --watch --verbose

Чтобы работать в производственном режиме и компилировать минифицированный CSS без карты исходников, используйте следующее:

postcss ./src/main.css --output ./styles.css

В идеале, вы можете запускать их как скрипты терминала или npm, чтобы еще больше сократить усилия по набору текста.

Опыт PostCSS

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

В руководстве по использованию PostCSS в качестве настраиваемой альтернативы Sass приведено больше примеров конфигурации и вариантов плагинов.

Дальнейшие ссылки:

Домашняя страница PostCSS
PostCSS CLI
список плагинов для PostCSS
каталог плагинов для PostCSS с возможностью поиска
плагины на npmjs.com для PostCSS
Написание плагина для PostCSS

Источник: https://www.sitepoint.com/an-introduction-to-postcss/