Сегодня наткнулся на список ресурсов по accessibility от Марси Саттон. Нашёл я его через твит Флориана Бэйенса — разработчика из Нидерландов. Флориан слеп с самого рождения, поэтому его рекомендации стоит уделить как минимум немного внимания.

В этом списке есть много ссылок на ресурсы от W3C, сайты, курсы, инструменты и книги, посвящённые a11y:
- A11y Style Guide
- Google/Udacity Web Accessibility course
- Accessibility Wins
- Inclusive Design Patterns
- Accessibility for Everyone
- и т.д.

Я не специалист по a11y, но кажется, что подборка очень хорошая. Добавил себе в закладки.

#a11y #list

https://marcysutton.com/web-accessibility-resources

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

С начала года там появилось шесть новых статей:
- String.prototype.matchAll
- Numeric separators
- Array.prototype.flat and Array.prototype.flatMap
- Promise combinators
- Object.fromEntries
- Symbol.prototype.description

Во всех статьях есть краткое объяснение работы новых фич и много примеров. По WebAssembly пока нет ни одной статьи, но это не снижает ценность ресурса.

#js #v8 #list

https://v8.dev/features

Евгений Обрезков написал небольшую статью, в которой он разрушает самые популярные мифы, связанные с WebAssembly — "Three myths about WebAssembly". Вот небольшой пересказ, разбавленный моими мыслями.

Первый миф. "WebAssembly — это язык общего назначения". WebAssembly — это бинарный переносимый формат. Хотя у него и есть текстовое представление, он остаётся целью компиляции для других языков.

Второй миф. "WebAssembly — замена JavaScript". WebAssembly был разработан для того, чтобы работать в тандеме с JavaScript, а не заменить его. При этом WebAssembly поможет нативным языкам более эффективно работать с Web API, но это можно считать сайд-эффектом, а не целью создания WebAssembly. Как бы то ни было JavaScript сейчас слишком распространён, чтобы его можно было заменить в мгновение ока.

Третий миф. "WebAssembly быстрее JavaScript". Здесь нельзя однозначно заявить, правда это или нет, так как на скорость работы WebAssembly-кода будут влиять используемые оптимизации во время компиляции. В свою очередь JS-движки могут оптимизировать JavaScript-код настолько качественно, что в некоторых случаях он может быть производительнее, чем скомпилированный C++ код.

Статья небольшая, но в ней всё написано по делу. К слову, ссылку на неё я увидел в твите официального аккаунта WebAssembly.

#webassembly #list

https://blog.ghaiklor.com/2019/06/18/three-myths-about-webassembly/

Деструктуризация — удобное средство для доступа к свойствам объектов и элементам массивов, но оно не ограничивается только этими сценариями. Дмитрий Павлютин написал статью с описанием неочивидных подходов с использованием этой фичи — "5 Interesting Uses of JavaScript Destructuring".

1. С помощью деструктуризации можно обменивать значения переменных таким же образом, как это можно сделать в python: [a, b] = [b, a];.
2. Можно легко получить первый элемент массива с подстановкой дефолтного значения, если этого элемента нет: const [firstColor = 'white'] = colors;.
3. Комбинируя деструктуризацию с rest-оператором, можно отбросить первый элемент массива: const [, ...lastNumbers] = numbers;.
4. Деструктуризация работает для всех объектов, которые имплементируют протокол итерирования (строки, массивы, Map, Set). Например, таким образом можно получить первую букву в строке: const [firstChar] = 'cheese';.
5. Используя динамические свойства объектов, можно получить заранее неизвестное свойство объекта: const { [nameProp]: name = 'Unknown' } = obj;.

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

https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

#js #es2015 #list

Tproger вчера запостил (https://xn--r1a.website/tproger_web/193) awesome-список, посвящённый мобильной web-разработке, который я веду больше года. Там есть разные статьи, книги и инструменты, которые могут помочь в создании быстрого mobile-friendly сайта. Рекомендую посмотреть подборку всем web-разработчикам, так как пользователей интернета сейчас больше всего именно на мобильных платформах.

#mobile #list

https://github.com/myshov/awesome-mobile-web-development

Нашёл в твиттере ссылку на интересную статью Франсуа Шолле — "Notes to Myself on Software Engineering".

Статья представляет собой список "напоминалок" про процесс разработки софта, проектирование API и про карьеру. Хочу выделить из неё пять пунктов:

— Хороший софт делает трудные вещи простыми. Если на первый взгляд проблема кажется сложной, это не означает, что решение тоже должно быть сложным.
— При проектировании сценариев взаимодействия с API следует задать самому себе несколько вопросов. Какие это сценарии? Какая оптимальная последовательность действий для их достижения? Какой наиболее простой программный интерфейс может это реализовать?
— API создаётся для пользователей. Проявляйте эмпатию вне зависимости от того, пользуются ли им профессионалы или новички.
— Продуктивность сводится к высокой скорости принятия решений и к действию.
— Прогресс в карьерном росте выражается не количеством людей, которым вы управляете, а в том, какую ценность вы даёте миру.

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

#list #softwaredesign #career

https://medium.com/s/story/notes-to-myself-on-software-engineering-c890f16f4e4d

Корри Хаус — известный спикер в React-сообществе — поделился своим пятилетним опытом работы с React — "Lessons learned from 5 years in React".

Документ содержит 63 пункта про работу с компонентами, JSX, про управление состоянием приложения, производительность, переиспользование компонентов и их тестирование. Есть пара пунктов, которые хочется выделить. Не используйте во всех компонентах без исключения useMemo, shouldComponentUpdate, PureComponent. Используйте их только там, где они нужны. Если бы их использование не несло дополнительные накладные расходы, они были бы включены по умолчанию. Если есть в этом смысл, используйте в своих компонентах имена, которые используются в Web-платформе (`onBlur`, onChange и т.п.). Используйте as как пропс для модификации типа верхнеуровневого элемента.

Есть в списке пара пунктов, которые у меня вызвали вопросы. Например, полный отказ от тестирования снепшотами. Вместо них Корри предлагает использовать Percy или Chromatic. Это очень жёсткая позиция. Проблема со снепшотами возникает только тогда, когда их очень много. Если для компонента создаётся один снепшот, то этого вполне достаточно для отлавливания непреднамеренного изменения кода.

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

#react #list #experience

https://www.dropbox.com/s/tsid5bnphznbvjv/

Если вы не следили за фронтендом в этом году, не беда. Трей Хаффин подвёл итоги 2019 года в статье — "A Recap of Frontend Development in 2019". Вот самое главное:

— По количеству скачиваний React остаётся на первом месте, за ним идёт jQuery, на третьем и четвёртом месте — Angular и Vue.

— WebAssembly официально стал четвёртым языком web'а. В начале декабря WebAssembly Core Specification стал официальным стандартом W3C.

— TypeScript набирает обороты. В опросе StackOverflow TypeScript поделил второе место вместе с Python, уступив Rust.

— В React и в его экосистеме упор делался на developer experience и user experience. React-сообщество начало активно использовать хуки — новый механизм для создания stateful компонентов.

— Готовится выпуск альфы третьей версии Vue. Весь этот год активно шла работа над новой версией фреймворка.

— Команда Angular в этом декабре (или начале следующего года) зарелизит девятую версию фреймворка. В ней по умолчанию будет включён новый пайплайн компиляции/рендеринга — Ivy. Благодаря новому пайплайну будет уменьшен размер генерируемого бандла и ускорена перекомпиляция проекта.

— Svelte — фреймворк-компилятор для написания SPA-приложений — потихоньку становится конкурентом React/Vue/Angular.

— Вышла версия спецификации ECMAScript 2019. Добавлены Object.fromEntries(), String.trimStart(), Array.flat(), Array.flatMap(), Symbol.description, try/catch binding и т.д.

— Node.js Fundation и JS Foundation сформировали единый фонд OpenJS Foundation. Фонд поддерживают Google, IBM, Microsoft.

Пост получается очень большим, пожалуй, остановлюсь. Если хотите узнать больше, советую заглянуть в статью.

#js #list #recap

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

На risingstars.js.org была опубликована подборка самых популярных JavaScript проектов за 2019 год. Этот топ в отличие от State of JS формируется на основе прироста количества звёзд за год.

Самые популярные проекты: 1) Vue.js, 2) VS Code, 3) React, 4) Vue Element Admin, 5) Svelte. До этого момента никогда не слышал про Vue Element Admin — довольно мощное решение для создания админок.

Самые популярные фреймворки: 1) Vue.js, 2) React, 3) Svelte, 4) Angular, 5) Omi. Omi — фреймворк для создания компонентов на базе Web Components с помощью Virtual DOM, может использоваться вместе с React, Vue.js, Angular.

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

#list #js

https://risingstars.js.org/2019/en/

Сегодняшний пост будет про софт сикллы. Николас Закас — лид eslint и автор книг про JavaScript — позавчера опубликовал пост про свой подход к решению проблем в программировании, в менеджменте, в быту, — "How I think about solving problems".

При решении любой проблемы Николас задаёт себе пять вопросов:
1) Действительно ли это проблема?
2) Эта проблема должна быть решена?
3) Эта проблема должна быть решена сейчас?
4) Эту проблему должен решать я?
5) Есть ли более простая проблема, которую можно решить вместо этой?

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

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

Статья хорошая, рекомендую почитать.

#productivity #list #musings

https://humanwhocodes.com/blog/2020/02/how-i-think-about-solving-problems