Пережить JavaScript-апокалипсис

Спасибо всем, кто посетил семинар Kickstarter по разработке 3 декабря 2019 года в Philips, Бангалор. Было очень приятно видеть вас всех здесь в качестве зрителей, и в завершение моей сделки вот дополнительный материал с семинара (в форме этой статьи).

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

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

Понимание JavaScript

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

Мы рассмотрели, как работает среда выполнения JavaScript и роль цикла событий во всем этом. Чтобы больше узнать о цикле событий, посмотрите объяснение Джейка здесь (одно из лучших, которые я когда-либо встречал по циклам событий). Кроме того, вот небольшая визуализация во время выполнения, которую я использовал во время демонстрации, спасибо Филипу Робертсу за его создание для его выступления на конференции по JavaScript. Я настоятельно рекомендую вам немного поиграть с ним, чтобы лучше понять, как работают очереди событий и циклы событий.

Чтобы дать вам пример, давайте посмотрим на приведенный ниже фрагмент кода. Мы вызываем API, сохраняем его в локальной переменной и пытаемся распечатать данные. Однако это окажется «неопределенным» при регистрации, так как при выполнении функции «console.log» обратный вызов из промиса, вероятно, ожидает в очереди микрозадач, ожидающих помещения в стек вызовов перед конец цикла событий.

Чтобы решить эту проблему, вам придется использовать async-await в «монтированной» функции, которая будет ожидать ответа API, прежде чем записывать значение в консоль. Ниже показано, как мы можем это сделать.

Полезные советы и рекомендации по CSS

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

Один очень продуктивный способ написать хороший и отзывчивый CSS — это использовать «rem» и «em» вместо их заклятого врага «px». Они обеспечивают довольно большой контроль и дополнительные преимущества по сравнению с «px», например, в случае, если пользователь с ослабленным зрением изменит базовый размер браузера, «rem» и «em» будут масштабироваться вверх и вниз.

Мне нравится рассматривать 1 бэр как 10 пикселей, и есть хороший способ настроить это идеально. Поскольку в большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей, я бы просто установил размер корневого шрифта на 62,5%.

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

Давайте рассмотрим несколько приемов CSS, которые мы рассмотрели сегодня.

Если вы действительно увлекаетесь CSS, загляните на этот канал YouTube, где вы найдете несколько потрясающих примеров скоростного кодирования.

Ресурсы сегодняшних презентаций:

  • Канбан-доска содержит все ресурсы, которыми я поделился на разных этапах сессии.
  • В Репозитории GitHub есть окончательный объединенный код, который вы все разработали на практическом занятии семинара.
  • Fake API Servers размещает поддельные API, которые мы использовали во время сеанса интеграции API.
  • Презентация, использованная на семинаре, находится здесь (Google Диск)

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

Если вы хотите связаться со мной, вот несколько мест, где вы можете это сделать:

Кроме того, загляните в мое новое Портфолио, которое я недавно создал, опробовав несколько новых приемов CSS, я показал вам некоторые из них во время демонстрации. Буду рад поделиться остальными с вами, если вы заинтересованы, просто спросите об этом в любое время.

До следующего раза, ребята, большое спасибо!