JavaScript *

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

Привет, друзья!

Хочу поделиться с вами заметками о Next.js (надеюсь, кому-нибудь пригодится).

Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений.

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

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

Кроме того, существуют специальные инструменты, такие как react-snap, позволяющие превратить React-SPA в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head с помощью таких утилит, как react-helmet. Однако Next.js существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap). Он также предоставляет множество других интересных возможностей.

• Документация
• Примеры

Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React. Также обратите внимание, что заметки не сделают вас специалистом по Next.js, но позволят получить о нем исчерпывающее представление.

Заметки состоят из 2 частей. Это часть номер раз.

Итерация вторая.

Привет, друзья!

Можете ли вы ответить на вопрос о том, в чем заключается разница между requestAnimationFrame и requestIdleCallback?

Если можете, то я завидую глубине ваших знаний. Я не смог, когда меня об этом спросили. Более того, в тот момент я даже не знал о существовании интерфейса requestIdleCallback. Теперь знаю и хочу с вами этими знаниями поделиться.

Сразу уточним, что названные интерфейсы предоставляются браузером и к ECMAScript отношения не имеют.

Что касается поддержки, то с requestAnimationFrame все хорошо, а с requestIdleCallback, в основном из-за Safari, этого современного IE, ситуация хуже.

Рассматриваемые интерфейсы позволяют разработчикам получать доступ к процессу рендеринга страницы. Также они очень тесно связаны с циклом событий (event loop) браузера.

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

Примеры этой статьи собраны в двух репозиториях (один для vue2, другой для vue3), с идентичным исходным кодом.

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке.

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

Если у вас есть опыт написания однофайловых Vue компонентов, вы, вероятно, сталкивались с написанием CSS в своем компоненте. Они позволяют разработчикам группировать код более логическими способами, а не разбивать компоненты по используемому языку (HTML, CSS или JavaScript). Возможность группировать стили компонентов непосредственно рядом с HTML-кодом, к которому он применяется, является одним из основных преимуществ Vue, включая возможность применять CSS к компоненту, чтобы он не влиял на другие части пользовательского интерфейса.

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

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

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

Давайте рассмотрим стратегии синхронизации клиентского и серверного кода.

Продолжаем погружаться в отладку с Firefox DevTools. Во второй части разбираем, что такое точки останова в отладчике, как ими пользоваться и почему они — замена console.log.

Тот самый момент.

«Tomorrow will transform your career». Именно с таким заголовком пришло письмо с приглашением на конференцию. Неплохой заголовок для привлечения внимания. Конечно же, Vercel уже давно не та компания, которой нужно привлекать к себе внимание, тем не менее у них весьма завидное внимание к деталям, не говоря уже о том, что они привносят в наш мир.

Полученные командой Vercel инвестиции в C раунде (в размере $102млн) на продолжение создание веба будущего, поддержка команды google «Аврора» и большое комьюнити позволило выпустить столь крупный релиз всего через 4 месяца после предыдущего, не менее интересного, релиза.

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

Здравствуйте, меня зовут Дмитрий Карловский и я… прилетел к вам на турбо-реактивном самолёте. Основная суть реактивного двигателя изображена на картинке.

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

Это — текстовая расшифровка выступления на SECON.Weekend Frontend'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

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

В этой заметке я бы хотел остановиться на различных нюансах, полезных при отладке. Какие-то из них я почерпнул в сети (например в комментариях на Хабре), до каких-то додумался сам. Надеюсь вы найдёте для себя что-нибудь полезное.

Под катом:

— Как отладить popup-ы, которые исчезают при потере фокуса
— Как убить повисший JS-цикл, не убивая вкладку
— Различные нюансы работы с breakpoint-ми
— Методы ведения войны с sourceMaps
— Перехват network-запросов
— Как отладить race-condition
— Почему стоит опасаться галочки "disable cache"
— Что делать если у вас не Hi-DPI экран?

Используете для отладки JavaScript-кода только console.log? Есть способ получше! Отладчик в Firefox DevTools помогает быстро находить ошибки в коде и бережёт ваши нервы и время.

Привет, друзья!

В этой статье я покажу вам, с чего начинается React.

Что это означает? Это означает, что мы разработаем мини-версию React, которая сможет выполнять следующий код:

import '../style.scss'
import MyReact from './my-react'

const buttonStyles = {
 border: 'none',
 outline: 'none',
 padding: '0.3rem 0.5rem',
 marginLeft: '0.5rem',
 backgroundImage: 'linear-gradient(yellow, orange)',
 borderRadius: '2px',
 boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
 cursor: 'pointer'
}

/** @jsx MyReact.createElement */
function Counter() {
 const [value, setValue] = MyReact.useState(1)
 const [count, setCount] = MyReact.useState(1)

 return (
   <section>
     <h1 className='title'>Hello from MyReact!</h1>
     <div className='box'>
       <input
         style='width: 80px; padding: 0.15rem 0.5rem;'
         type='number'
         value={value}
         onInput={(e) => {
           setValue(Number(e.target.value))
         }}
       />
       <button
         style={buttonStyles}
         onClick={() => {
           setCount((count) => count + value)
         }}
       >
         Increment
       </button>
     </div>
     <h2 className='subtitle'>
       Count: <span className='count-value'>{count}</span>
     </h2>
     <ul className='list'>
       {['React', 'from', 'scratch'].map((item) => (
         <li>{item}</li>
       ))}
     </ul>
   </section>
 )
}

MyReact.render(<Counter />, document.getElementById('app'))

Как вы могли догадаться, наша версия будет называться MyReact.

Исходный код проекта.

Скриншот:

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

Как создать библиотеку в Google Apps Script. Короткий, но подробный гайд про создание, подключение и использование библиотеки в гугл скриптах.