Defront — про фронтенд-разработку и не только
5.01K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
Аллен Вирфс-Брок (редактор спецификаций ES5 и ES2016) представил большую научную статью (190 страниц) про историю развития JavaScript, которую он написал в соавторстве с Бренданом Айком. Эта статья будет опубликована в журнале "Proceedings of the ACM on Programming Languages".

Немного полистал — в ней есть много всего интересного. Например, рассказывается, почему спецификация получила название ECMAScript. Это был долгий и сложный процесс — Sun не захотела передавать права на торговую марку "JavaScript" организации ECMA, когда началась работа над спецификацией. Эта же участь постигла другое название "LiveScript" — Netscape тоже не захотела передавать права на свою торговую марку. Тем не менее работа над спецификацией уже во всю шла, и как плейсхолдер использовался "ECMAScript". В конечном счёте участники TC39 не смогли выбрать другое подходящее название и сошлись на том, что оставят ECMAScript.

Аллен и Брендан проделали очень большую работу при написании статьи. Must read для всех, кто интересуется историей web'а и JavaScript.

#js #history

https://zenodo.org/record/3707008#.XmvrZ0MxWHo (preprint)
Спецификация ECMAScript 2020 будет официально выпущена в июне. Набор новых фич и улучшений утверждён и уже не будет меняться. Среди нововведений можно найти улучшенный раздел про порядок перечисления свойств объекта с помощью цикла for-in, над которым работал Кевин Гиббонс

Исторически спецификация практически не накладывала ограничения на порядок перечисления свойств при использовании for-in, так как не удавалось достичь консенсуса по этой теме. Одна из причин разногласий была в том, что у каждого движка есть свои особенности реализации. Большие изменения в этой части спецификации означали бы большой объём работы для разработчиков всех движков. Тем не менее есть негласные правила при работе c for-in, которым должны следовать разработчики браузеров, чтобы не сломать web. Эти правила и были закреплены в ES2020.

Теперь спецификация гарантирует, что при использовании for-in сначала будут идти свойства, ключи которых обычные числа (в порядке возрастания ключа). Затем свойства, ключи которых строки (в хронологическом порядке их добавления). А затем свойства, созданные с помощью Symbol (в хронологическом порядке их добавления). Это поведение не гарантируется для случаев, когда во время перечисления свойств изменяется прототип, удаляются или добавляются новые свойства в объект или его прототип, изменяется прототип или когда у свойства изменяется параметр enumerable. Также спецификация гарантирует порядок только для обычных объектов, то есть порядок не гарантируется для Proxy, Array, arguments и т.п.

#js #specification #es2020 #history

https://github.com/tc39/proposal-for-in-order
https://tc39.es/ecma262/#sec-enumerate-object-properties
https://tc39.es/ecma262/#sec-ordinaryownpropertykeys
В начале июня выйдет седьмое издание "JavaScript: The Definitive Guide" (книга с носорогом). Дэвид Флэнаган вспоминает былое и рассказывает, какие фичи платформы больше не актуальны и описания которых не будет в книге — "JavaScript Features To Forget".

Не будет информации про arguments. В современном js вместо него используют ...args. У конкатенации строк раньше были проблемы с производительностью, поэтому появился паттерн, когда строки добавлялись в массив и затем объединялись с помощью .join(). С развитием движков и после добавления в стандарт шаблонных строк это больше не актуально. Не будет ничего про document.write(). Он активно использовался в эру pre-DOM для изменения страницы во время её парсинга. Ничего не будет про <frameset> и <frame>. Фреймы давно изжили себя, так они портят пользовательский опыт. Не будет в книге описания методов document.getElementById(), document.getElementsByName() и т.п. В современном вебе вместо них используют более гибкие document.querySelector() и document.querySelectorAll().

Формально новая версия Definitive Guide не будет больше "definitive". Седьмое издание будет рассказывать только про актуальные возможности платформы, для всего унаследованного добра остаётся шестое издание книги.

#js #history #book

https://davidflanagan.com/2020/05/12/javascript-to-forget.html
Increment — журнал про разработку — в этом месяце был полностью посвящён фронтенду. Там много постов от разработчиков из мира фронтенда. Среди них есть статья Эвана Ю "The process: Making Vue 3", где он рассказывает про разработку Vue 3 и особенности его работы.

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

Из статьи узнал, что первые прототипы были написаны с использованием Flow, но команде приходилось поддерживать тайпинги для TS, которые были востребованы гораздо больше чем Flow-тайпинги. В итоге от Flow отказались в пользу TypeScript. Ещё в статье есть интересные технические детали работы Vue 3. В новой версии компилятор шаблонов был полностью переписан. В его основу лёг пайплайн на базе AST-трансформаций, который позволил компоновать оптимизации времени компиляции в виде плагинов трансформаций. Статический анализ шаблонов и новая архитектура позволили ускорить работу с Virtual DOM до 10 раз в бенчмарках рендеринга.

Очень хорошая статья. Советую почитать всем, даже тем, кто не работает с Vue.

#vue #internals #history #jsframeworks

https://increment.com/frontend/making-vue-3/
Эверт Пот написал статью про синтаксис ECMAScript 4 — "ECMAScript 4: The missing version".

ECMAScript 4 бы очень большим проектом по модернизации JavaScript. Работа над этой спецификацией шла 9 лет (1999-2008), но была полностью переосмыслена, переродившись в ES5 и ES2015.

В ECMAScript 4 хотели добавить стогую систему типов с поддержкой классов (в итоге они появились в ES2015) и интерфейсов. Было запланировано добавление новых типов: byte, int, unit, double, decimal. Практически ни один из этих типов не попал в последующие версии языка, но на данный момент ведётся работа над пропозалом для добавления в JS типа decimal. Планировали добавить пакеты (packages) для организации кода. Но вместо пакетов в ES2015 решили добавить модульную систему. Существовало расширение ES4 — E4X, которое позволяло работать с XML прямо в JavaScript. Можно сказать, что E4X стал прародителем современного JSX.

Интересная статья. Рекомендую почитать, если интересуетесь историей JavaScript.

#js #history #specification

https://evertpot.com/ecmascript-4-the-missing-version/
Мальте Юбэл из Google рассказал про историю возникновения и развития проекта Accelerated Mobile Pages — "Looking back at five years of AMP".

Проект появился в 2015 году как результат обсуждения с издателями проблем распространения контента. На тот момент большие сайты очень сильно уступали в скорости нативным приложениям. Google представил свое видение для решения этих проблем — проект AMP. Несмотря на очень хорошие показатели вовлечённости рядовых пользователей AMP столкнулся с критикой. При просмотре AMP-страниц url оригинального источника был недоступен, в top-stories выдачи google продвигался только AMP-контент. Для решения первой проблемы были привлечены разработчики браузеров, которые сделали так, чтобы при шаринге AMP-страниц копировался оригинальный URL. Позже была представлена возможность распространения AMP со сторонних доменов. Вторая проблема будет решена благодаря внедрению в поиск сигналов о скорости страниц. Обещают, что хорошо работающие страницы будут попадать в top-stories без проблем.

Интересная статья. В неё стоит заглянуть, если разрабатываете контент-проект или если интересуетесь историей web.

#history #google

https://blog.amp.dev/2020/06/19/looking-back/
Крис Лили — технический директор W3C — рассказал о проблемных частях CSS — "Why is CSS... the way it is?".

В спецификации CSS у некоторых фич есть недостатки. Например, свойство float плохо специфицировано для сложных случаев. Работа с цветами неудобна при реализации дизайн систем или просто для определения цвета английскими словами ( gainsboro, orchid и т.п. ничего не говорят об оттенке). Есть проблемы при работе с диапазонами Unicode-значений в свойстве unicode-range.

Некоторые эти проблемы связаны с тем, что во времена зарождения спецификации было важно, чтобы язык был максимально простым. Простота реализации была важна для добавления CSS в Internet Explorer и Netscape Navigator. Другие проблемы были связаны с тем, что при ревью новых фич у проверяющих не было необходимого опыта.

Все эти проблемы известны. Над ними либо работают в данный момент (например, с цветами), либо эти проблемные фичи были заменены более продвинутыми альтернативами (например, вместо float для разметки страницы сейчас рекомендуется использовать flex и grid ).

Очень интересная статья. Рекомендую почитать всем, кто интересуется историей развития web'а.

#css #history

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/
Ричард Фельдман — автор книги "Elm in Action" — рассказал про сдвиг парадигм программирования — "The Next Paradigm Shift in Programming".

За 50 лет существования индустрии программирование эволюционировало от использования goto до идеи отказа от сайд эффектов. Технологии и подходы достигали своего пика и медленно сходили на нет. Ричард рассказывает про то, что на данный момент ООП достигло своего пика и рано или поздно оно будет заменено новыми подходами. Доказательство этому повышенный интерес к функциональному программированию. Практически все современные языки поддерживают фичи из фп. Можно найти книги от программирования в функционально стиле в JavaScript, в C++, Java и т.п. Более того основные фичи ООП (инкапсуляция, наследование, методы) либо признаны неэффективными, либо для них есть альтернативы (модули, композиция, функции первого класса).

Очень интересный доклад. Рекомендую посмотреть.

#talk #fp #history

https://www.youtube.com/watch?v=6YbK8o9rZfI
Нашёл статью Эрика Лоуренса, в которой рассказывается про историю появления алгоритма сжатия Brotli.

Brotli — это детище Google, которое было разработано Юрки Алакуйяла и Золтаном Сабадка. До Brotli Юрки разработал алгоритм сжатия Zopfli, который был совместим с DEFLATE, но работал на 5% лучше всех альтернатив. Brotli — это идейное продолжение Zopfli, комбинирующее алгоритм Хаффмана и LZ77. Он был разработан для формата шрифтов WOFF2, но потом был адаптирован для сжатия передаваемых данных между браузером и web-сервером.

Ребята из Google до внедрения Brotli экспериментировали с другими форматами сжатия (bzip2, SDCH). Во время экспериментов иногда возникали проблемы совместимости с промежуточными прокси-серверами и шлюзами, поэтому для предотвращения проблем доставки данных было решено сделать так, чтобы Brotli был доступен только по HTTPS.

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

#performance #algorithm #history

https://textslashplain.com/2015/09/10/brotli/
Месяц назад проходила конференция для разработчиков виртуальных машин, на которой Вячеслав Егоров рассказал про историю развития языка программирования Dart — "10 Years of Dart".

Dart начал разрабатываться инженерами Google в 2011 году. Первая версия не была статически типизируемой в обычном смысле, в ней была поддержка опциональных типов, и все оптимизации выполнялись на уровне JIT-компилятора (то есть во время выполнения кода). В 2015 году с появлением Flutter текущая имплементация языка не могла обеспечить хорошую производительность на iOS, потому что Apple запрещает использовать JIT-компиляцию в обычных программах. Команда Dart попыталась реализовать AOT-компиляцию (то есть до этапа выполнения кода) на базе существующего JIT-компилятора, но столкнулась с проблемами. Для решения этих проблем Dart должен был стать полноценным статически типизируемым языком. Над второй мажорной версией разработчики работали три года — Dart 2.0 зарелизился в 2018 году.

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

#dart #history #internals #talk

https://www.youtube.com/watch?v=e-58C8aGBM4
Дэвид Нолэн — ведущий разработчик ClojureScript — рассказал про свой путь в разработке, про ClojureScript и о том, как он стал его основным майнтейнером.

Дэвид говорит, что самое ценное, что он перенял от Ричарда Хикки (автор Clojure), умение говорить "нет". При работе над проектами, которые используют большое количество людей, нужно уметь говорить "нет", чтобы иметь силы продолжать работать над важными фичами. Но не нужно просто отказывать, нужно мотивировать находить своё решение. Если пользователи приходят с багами, самое лучшее, что можно сделать — помочь им самим исправить проблемный код. Также работа над проектом должна приносить радость, иначе можно быстро выгореть.

Интересная статья. В первую очередь рекомендую почитать всем, кто поддерживает open source проекты.

#opensource #clojurescript #history

https://github.com/readme/david-nolen
В декабре 2020 года вебу исполнилось 30 лет. Дэниэл Кэо вспомнил ранние дни веба и написал про это статью — "Out of the Matrix: Early Days of the Web".

Дэниэл работал техническим писателем и редактором журнала NeXTWORLD, когда он узнал про Тима Бернерса-Ли и его проект World Wide Web. Дэниэл познакомился с Тимом и захотел опубликовать статью про веб, но ему не получилось убедить главного редактора, так как интернет тогда был в зачаточном состоянии, и им пользовались только учёные из CERN.

Интересно, что самый первый браузер — Nexus, который был сделан Тимом Бернерсом-Ли до Mosaic — имел встроенные инструменты для редактирования HTML-страниц. Потом эту функциональность добавили нативно в SDK NeXTSTEP. Но с релизом браузеров за пределами операционной системы NeXT, эта функция потерялась.

Ещё Дэниэл предложил Тиму использовать вместо HTML новый формат для редактируемого PostScript от Adobe (который получил название PDF). Он организовал встречу Роберта Кайо (одна из ключевых фигур в популяризации веба) c менеджментом Adobe, но, как мы уже знаем, HTML пережил это событие.

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

#web #history

https://blog.yax.com/posts/early-days-of-the-web-1991/
В блоге CSSSR была опубликована статья про судьбу первых web-браузеров — "История фронтенда: Браузер, который умел всё".

В статье рассказывается про WorldWideWeb — самый первый браузер, над которым работал Тим Бернерс-Ли и который позднее был переименован в Nexus. Рассказывается про систему организации данных для Macintosh — некий прообраз современного веба, но без поддержки сети. С помощью этой системы была сделана знаменитая игра Myst. Ещё в 1991 году вышла первая версия ViolaWWW — браузер, который поддерживал добавление на страницу апплетов-приложений на языке Viola.

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

#web #history

https://blog.csssr.com/ru/article/frontend-history-the-browser-that-could-do-everything/
https://www.youtube.com/watch?v=7nrDctGYOIk
Алекс Котлярский из Facebook рассказал про историю развития React API — "React API evolution".

Прошло уже почти восемь лет с момента релиза первой публичной версии React. За этот период подход к написанию компонентов поменялся несколько раз. Сначала компоненты создавались с помощью React.createClass причём в версии 0.3.0 нужно было самостоятельно биндить методы, использующие this, с помощью React.autoBind. В 0.4.0 автобиндинг был включён по умолчанию. Затем официальным механизмом для создания компонентов стали ECMAScript классы и функциональные компоненты. По ходу дела разработчики стали использовать High Order Components (HOC) для композиции поведения компонентов. HOC не были идеальным решением для работы с поведением, поэтому в 2019 году ребята из команды React представили хуки.

Интересная статья. Рекомендую почитать в первую очередь всем, кто недавно начал работать с React.

#react #history

https://frantic.im/react-api-evolution
В блоге CSSSR была опубликована вторая часть статьи про историю фронтенда — "История фронтенда: JavaScript как отражение новой эпохи".

Во второй части рассказывается про историю появления и развития веб-стандартов. HTML и JavaScript пережили похожий процесс: сначала была жёсткая конкуренция браузеров с хаотичным внедрением фич, затем предпринималась попытка стандартизации, которая была отвергнута сообществом (XHTML) или стала неудачной из-за слишком больших амбиций (ECMAScript 4), потом был застой, а затем продуктивная работа вместе с сообществом. HTML и JavaScript стали живыми стандартами, которые обновляются каждый год и поддерживаются всеми браузерами.

Рекомендую почитать статью, если интересуетесь историей развития веба. Ещё есть видеоверсия, но статья интереснее (имхо).

#history #web

https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/
https://www.youtube.com/watch?v=sgyoKkAfGpU (видео)
Ахмад Шадид написал статью про прошлое и настоящее кроссбраузерной CSS-разработки — "The State of CSS Cross-Browser Development".

Раньше разработчики сталкивались с большим количеством кроссбраузерных проблем. Ситуация стала гораздо лучше после появления гридов, флексбоксов и ухода на пенсию IE. Тем не менее ещё остаются нерешённые кроссбраузерные проблемы. Например, Safari растягивает изображения внутри флекс-контейнеров, position: sticky для заголовков таблиц работает неконсистентно, анимация гридов есть только в Firefox и т.п.

Хорошая новость заключается в том, что в рамках инициативы Compat2021 Google, Microsoft, Igalia и Mozilla начали работу над улучшением поддержки CSS-стандартов, которые наиболее критичны для разработчиков.

#css #history

https://ishadeed.com/article/cross-browser-development/
Александр Косс рассказал про историю появления и развития библиотеки date-fns.

Разработка библиотеки началась осенью 2014 года. На тот момент date-fns не претендовал на замену Moment.js и включал в себя одну функцию startOfDay (у аналогичной функции в Moment.js были проблемы с производительностью). У проекта не было какой-либо стратегии развития, дополнительные функции добавлялись по мере необходимости.

В 2015 году Александр нанял своего брата, чтобы он сделал порт функций из Moment.js. С этого момента проект начал набирать небольшую популярность. В 2016 году Дэн Абрамов попиарил date-fns у себя в твиттере. После этого события пришло очень много новых пользователей, вскрылись проблемы, которые можно было решить только изменением API. Большой поток запросов, багов и сопутствующей работы привёл к тому, что Александр перегорел. Но в 2019 году смог выделить три месяца на фулл-тайм разработку date-fns, и в августе 2019 года вышла вторая версия с переделанным API, из-за чего многие пользователи остались недовольны.

Тем не менее проект продолжал расти, набирать популярность и привлекать средства на opencollective. На данный момент команда разработки привлекла половину необходимого бюджета для дальнейшего развития и поддержки date-fns.

В общем, крутая история. Передаю разработчикам свой респект.

#opensource #history #date

https://twitter.com/kossnocorp/status/1392449481053032450
Как Google Closure Compiler помог в разработке TypeScript

Люк Хобан рассказал об истории появления TypeScript — "The first TypeScript demo".

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

Стив Люко увидел потребность в новом инструменте и начал работать над Strada (первое название TypeScript). Через некоторое время к нему присоединился Люк Хобан, он помог в разработке парсера. Они хотели успеть сделать полноценный прототип к началу внутренней конференции, но не успевали, так как Стив повредил кисть. Нужно было написать тайпчекер. Люк придумал хак. Они изменили компилятор так, чтобы JavaScript генерировался с аннотациями типов для Google Closure Compiler. Этот код отправлялся в веб-версию компилятора на сервера Google для проверки типов. Демка заработала, в проект поверили, и затем появилась первая версия TypeScript.

Очень интересная статья. Рекомендую почитать.

#typescript #history

https://medium.com/hackernoon/the-first-typescript-demo-905ea095a70f
Почему ссылки синие?

Элиза Бланшар написала статью про то, почему на многих сайтах ссылки синего цвета — "Why are hyperlinks blue?"

В первых интерфейсах для гиперссылок использовался чёрный цвет с подчёркиванием или рамками. С распространением цветных мониторов гиперссылки стали приобретать разные цвета, например, в клиенте Gopher (предтеча веб) использовался зелёный цвет. Mosaic стал первым браузером, который закрепил за ссылками привычные цвета: синий для обычных ссылок и тёмно-фиолетовый для посещённых. Почему был выбран синий цвет для обычных ссылок, точно неизвестно. Есть теория, что на этот выбор повлиял интерфейс Windows, который закрепил за синим цветом сигнал интерактивности.

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

#web #history #ux

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/
CORS — история появления и нюансы использования

Джейк Арчибальд написал статью про CORS с интерактивными примерами — "How to win at CORS".

Впервые управление кроссдоменными-запросами появилось в Flash с помощью файла /crossdomain.xml, в котором описывались права доступа сторонних сайтов. В 2005 году рабочая группа W3C Voice Browser Working Group предложила альтернативное решение для XML-ресурсов. Так как XML не получил широкого распространения для представления HTML-документов, предложение рабочей группы трансформировалось в CORS (Cross-Origin Resource Sharing), который управляется с помощью HTTP-заголовка: Access-Control-Allow-Origin.

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

#web #security #history

https://jakearchibald.com/2021/cors/
👍2