Быстрый Фронтенд

2022-02-21 08:01:46 Новости фронтенда: нерегулярно, но от всего сердца

1. Результаты глобального опроса State of JS 2021 приехали. Там мы можем узнать, что среднестатистический фронтендлер — белый молодой мужчина с огромной зарплатой, а также посмотреть на красивый график с взлетом и падением любви к gulp. Для самых внимательных — все новинки джаваскрипта и браузерных апи с процентом знающих респондентов (на этом канальчике я писал почти про все из списка, кто внимательно читал — тот умничка).

2. А вот вам текст про то как пользоваться File System Access API. Оно было в опросе из предыдущего пункта, и лишь 22% фронтендеров его использовали — есть шанс ознакомиться и щеголять потом своей элитарностью. Ну, или в работе использовать, куки-то не резиновые.

3. Прикиньте, у нас тут ES22. Это сейчас этот год. За 5 минут можно ознакомиться со всем списком нововведений, за три минуты можно прочитать чего там важного по мнению Bartosz Salwiczek. А можно и за одну: приватные поля у классов, await вне функций, error.cause, указывающее на ошибку, вызвавшую ошибку (вызвавшую ошибку вызвавшую ошибку, даешь прототипы ошибок), .at() в итерабельных сущностях, Object.hasOwn и индексы мэтчей в регулярочках.

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

5. Я решил, что на пятом пункте нужно выдохнуть и немножко расслабиться. А тут как раз Ахмад Шадид написал про CSS Container Queries (перевод). Открыть/Комментировать

2022-02-07 06:01:16 Замечательного вам понедельника, друзья.

1. Chrome 98, вот и он. И, боже мой, нам завезли градиентные шрифты с новым форматом COLRv1. Я не шучу, ваш хром теперь так же хорош, как ваш ворд, добавьте старый добрый skew — и вы сможете повторить дизайн обложки вашего лучшего школьного реферата. Еще он умеет хорошо сжимать эмоджи, если вы из этих. Ну и пачка менее важных вещей: CORS preflight requests в приватных сетях, Region Caption API (для кропа захватываемых видосов, пока что в origin trial), Lighthouse версии 9, улучшения панели доступности и инструментов отладки кеша при хождении вперед и назад по вашей истории

2. Вы молодые, шутливые, поэтому вот вам статейка про то, как запилить свой блог на новомодном Remix. Лезьте.

3. Привычный onscroll в связке с getBoundingClientRect для показа анимации только тогда, когда ваш юзер наконец доскроллит до нужного элемента, уходит в прошлое с появлением вкусного Intersection Observer API. Доступно во всех вечнозеленых браузерах, есть неплохая статья о применении на 5 минут чтения. Веб — это как жить в строящемся доме: вчера унитаз поставили, завтра воду дадут.

4. Лучшие Котики в вебе (кто-нибудь знает кто это? я бы занес им на патреон) понятно написали про CSS layers вот тут. Немного ломает голову в первые минуты, так как залезает в самую основу построения вашей таблицы стилей: в прекрасном CSS будущего мы сможем управлять приоритетностью стилей, объявляя их в слоях. Стили вне слоев обладают наивысшим приоритетом, так что большие проекты переносить на это будет запарненько, но вот начинать новые в этой парадигме — удивительный кайф. Да и пакеты со всякими компонентами удобно будет выделять на отдельный слой, порядком объявления выставляя приоритет, и больше не ломая голову как перебить !important в любимом бутстрапе.

5. Помните, как Ахмад Шадид делал дырки? Он все никак не уймется: продолжает играть с SVG и написал нам об этом статью, чтобы мы прочитали, офигели и может быть где-то использовали. Как обычно интересно, местами хочется перекреститься. Открыть/Комментировать

2022-01-31 00:01:07 Выпуск новостей как ни в чем не бывало. Итак, чего новенького за прошедший месяц?

1. Chrome 97 вышел, у нас теперь есть findLast() и findLastIndex() в массивах, HTMLScriptElement.supports() для определения поддерживаемых типов скриптов и Web Transport API (это новый протокол для двунаправленного общения с низкой задержкой через HTTP/3). Ну и Recorder в девтулзах. Ох, Recorder. Запись сценариев поведения на странице, которая не работает. С виду все просто: тыкаешь rec, загружаешь страничку и делаешь все то, что нужно потом повторять, но не хочется делать это руками, но у меня почему-то вышло воспроизвести один сценарий из пяти. У кого получилось больше? А еще их можно экспортировать, но нельзя импортировать Все понимаю, ранний доступ, да и мои ожидания — это мои проблемы. Или я что-то неправильно жал?

2. FireFox: лисичка обкакалась дважды. Сначала они чуть не начали поддерживать прием пожертвований в крипте, что вызвало нехилый бугурт у множества важных людей, включая основателя проекта Джейми Завински и разработчика движка Gecko, Питера Линсса. Потом FF и вовсе слег с дисфункией сервиса телеметрии и лежал без сознания вплоть до хотфикса. Не болей, лисонька.

3. Faker (популярный генератор случайных данных, 3 млн скачиваний в неделю) совершил рокскомнадзор. Разработчик обиделся на то, что он работает в опенсорсе (а кушоц все еще хочется!), и выкатил версию 6.6.6 с пустой репой и убитыми бранчами. Все офигели, гитхаб залочил ему доступ к аккаунту (имеет право, есть в пользовательском соглашении), комьюнити оперативно снабдило всех страждущих бэкапом стабильной версии. Теперь понятно зачем нужен Arctic Vault?

4. Design Tokens Community Group собрали всех разработчиков современного ПО для разработки интерфейсов в одной комнате и пытается прийти к единому стандарту дизайн-токенов. Токены — это такие подробно именованные переменные в дизайне, которые можно использовать в пределах дизайн-системы и экспортировать вовне, например, в эти ваши фронтенды. Я считаю, что это очень хорошо, чем ближе дизайн к фронтенду и чем больше мы понимаем контекст и методы работы друг друга — тем лучше работает процесс производства. Token life matters.

5. AngularJS. В прошлом году мы оставили наши горести, салаты, отсутствие утренних пробежек и наш самый первый Angular. Все, никаких контроллеров ng-if в вашей прекрасной разметке, непонятного пугающего $scope и божественной проверки состояния гигантским циклом, дед, совершивший революцию, заслуженно отправляется на пенсию.

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

2021-12-29 08:01:35 1. Вы знали, что Date() в Javascript уже больше 25 лет? И оно отказывается эволюционировать. Поэтому давайте посмотрим на Temporal API. И понадеемся на его появление в браузерах, ведь пока оно — только proposal. Однажды мы удалим moment.js из package.json. Не с ненавистью, но с благодарностью, ибо мы перерастем эту dependency.

2. Хорошие новости на улице фронтенда: клонировать объекты теперь можно без JSON.parse(JSON.stringify(o)), сторонних библиотек и самописных рекурсий. Сегодня на сцену выходит Structured Clone. Говорят, он был доступен и ранее, но добраться до него было тяжеловато. Говорят, V8 специально оптимизировал JSON.parse для быстрой работы ваших хаков. Много чего говорят, типичный современный фронтенд, вы поняли Почитайте про новое апи тут, оно тоже со своими приколами: например, тихо выбрасывает методы из клонируемого объекта, класс делает объектом, а на Error и элементы DOM вообще плюется ошибками. Но это запланированные ограничения, читайте документацию. Есть в канарейках всех мастей, можно смело начинать использовать.

3. Очень любопытная статья "THE INVISIBLE JAVASCRIPT BACKDOOR" от Wolfgang Ettlinger про атаку символами юникода: заменяете ǃ на ! — и вот уже ваше сравнение стало присваиванием, а с виду и не скажешь. Да, это разные символы, присмотритесь. В юникоде еще много таких, похожих на операторы, но ими не являющихся. Ходите на код-ревью с дизайнером шрифтов теперь.

4. Давайте поговорим про псевдокласс :has() в CSS. Он прикольный, с ним можно так:
li:has(ul):after
И теперь мы можем нарисовать у элемента списка пимпу, если внутри него есть ul. Ну не чудесно ли? Еще больше прикольных и местами вообще волшебных кейсов — в статье (приготовьтесь, там сложно). Пока только Safari TP 137, но зато по умолчанию и без всяких там флагов. У остальных браузеров — в работе.

5. Ну и если вы вдруг пропустили — веб-альманах 2021. Это залипательный отчет о состоянии и тенденциях аж всего веба за прошедший год на основании данных из HTTP Archive. Прокрастинируем, котики, обогащаемся духовно. Открыть/Комментировать

2021-12-27 15:39:52 И снова привет!

Заключительный пост, привезенный из отпуска. Статья Винстона Ройса “Managing the development of large software systems”. Написана в 1970 году, недавно юбилей был. Прочитал по совету моего другана Фредерика Брукса. Читал 20 минут - камон, это статья.

Ройс пишет, что фундаментально процесс производства маленькой софтины состоит из двух шагов, “Анализ” и “Производство“. Для большой софтверной системы шагов больше. Пример смотрите на скриншоте 1.

Правда, скриншот что-то напоминает? Не буду томить - это классическое и, вероятно, первое изображение так называемого каскадного (водопадного) процесса. Интересно здесь то, что Ройс приводит это изображение в качестве примера и сразу же пишет, что подобный процесс неминуемо привёл бы к провалу. Вот так новости! Первый раз упомянули водопад и сразу провал? Почему так печально?

Все от того, что обратная связь из поздних этапов разработки имеет высокие шансы уничтожить плоды трудов предыдущих этапов. Так называемые “хвостовые риски” появляются в момент, когда работа вроде бы почти завершена. Эта обратная связь отправляется на предыдущий этап в виде “у вас тут не работает как описано“. Хорошо, если можно поправить и забыть. Но что, если поправить нельзя? Что, если надо менять архитектуру еще выше по потоку? Это уже совсем другие затраты времени и денег! Почему мы не узнали об этом раньше? Смотрите схему реальной обратной связи на скриншоте 2.

Что делать в таком случае? Ройс предлагает знакомый вариант. Если хотите, назовите его MVP. Он говорит, что если бы мы могли ввести стадию “предварительной реализации“, то там мы заранее увидели бы хотя бы намеки на хвостовые риски. Смотрите скриншот 3. Напоминает что-нибудь? Подскажу - вероятно, это одно из самых ранних изображений гибкого процесса с итеративно-инкрементальной моделью.

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

Ответ простой и глупый одновременно. Уже в восьмидесятые, через 18 лет после выпуска статьи, Министерство Обороны США искало себе удобный и логичный метод разработки софта. В статье Ройса, на скриншоте 1, они увидели рекламу каскадной модели. Так этот метод и получил официальное признание - в доктрине DOD-STD-2167A какой-то офисный клерк сказал, что софт надо разрабатывать каскадно. Оттуда это утекло в доктрину НАТО. А оттуда в разработку по всему миру.

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

Прикладываю официальную ссылочку для ознакомления со статьей Открыть/Комментировать

2021-12-27 15:39:52 #самчитаю
канал моего друга Максима с хорошими рецензиями на книги Открыть/Комментировать

2021-12-23 08:01:42 Thursday, dudes

1.‎ Вышел Safari 15.2. Во-первых, это четвертый релиз Safari за год, что уже вау. Во-вторых, теперь там реализован File System Access API. Это урезанный своим загончиком, но вполне рабочий инструмент для чтения и записи файлов. Наконец-то. Говорите, стало безопасно?

2. Внезапно, Edge. В хорошем контексте. Хотя, отпустив осла, эти ребята явно стали счастливее. В общем: в девтулзы направляется прикольный иструмент Detached Elements для ловли утечек памяти, написанный этими замечательными людьми с добрыми лицами. Тем, кто болел от профилирования памяти в тулзах Chrome (скорее всего и туда эта штука заедет, движок-то один).

3. Кастомный селект! Ну как, сжалось все внутри? У меня сжалось. Но есть надежда, и опять от Edge. Смотрите: в канатейке можно поэкспериментировать с новым селектом-конструктором. По ссылке — твит с гифкой и ссылочкой на codepen с примером, работающим на данный момент только в Edge Canary.

4. А помните писькомерку для браузеров от гугла? Ту, что про флексы, гриды, aspect-ratio, трансформации и position sticky и корректную их работу (читай: прохождение тестов) в Crome, FF и Safari. Они тут отчитываются о том, как стало хорошо. И правда ведь, стало. Помните, как они ломанулись в самом начале? Смотрите в статью, там приятные зеленые цифры у всех участников.

5. А вы знали, что в джетбрейновских IDE можно менять фон? Я не знал, спасибо @qmzik за этот прикол. Открыть/Комментировать

2021-12-15 08:02:00 Среда! Хорошей вам среды.

1. Новый Firefox 95 вышел, в нем есть: атрибут inputmode, указывающий тип всплывающей виртуальной клавиатуры (раньше был доступен только андроидам), свойство browserSettings.overrideContentColorScheme для установки предпочитаемой цветовой схемы (кроме стандартных light/dark есть значения system и browser, для получения настроек ОС и браузера соответственно), изоляция сайтов, заключающаяся в запуске страниц с разных доменов в разных процессах (теперь включена у всех), работающий по умолчанию RLBox (предварительная компиляция сторонних библиотек, являющихся компонентами браузера, для проверки их безопасности), крипто-вкусный randomUUID() в пределах https, кастомные курсоры на Android и еще несколько всякого интересного. Изучать тут.

2. Новый Ахмад Шадид подоспел, сегодня — с коллекцией CSS-сниппетов, решающих проблемы вашей версточки. Очень длинный список с разбором кейсов, Ахмад обещает его дополнять. Нойс, однозначно в закладки.

3. Если вы молодой и злой — идите разбираться как работает Вебпак.

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

5. Если вы где-то между этими состояниями и у вас все отлично, то почитайте о том, как использовать псевдоэлементы. С первого взгляда скучно, но интересное кроется деталях. Например, я не знал про CSS-функции counter() и attr() (MDN заботливо предупреждает, что последний вне content работает в порядке эксперимента и в иных свойствах никто вам ничего не обещает).

6. Напоследок — монетка в копилку интересных знаний не только для собесов: подробный материал о различии между requestAnimationFrame и requestIdleCallback. Кушайте, мои сладкие. Открыть/Комментировать

2021-11-30 08:00:36 Добрейшего вторничка, уважаемые. Не нашел новостей, от которых хотелось орать, поэтому сегодня добрый выпуск годноты про CSS:

1.⁠ Две недели как доступен к прочтению новый Ахмад Шадид (да, я буду теперь так говорить, мол: "Читали нового Шадида? Ах, он, как всегда, великолепен!"). На этот раз — с небольшим, но интересным кейсом о поведении position: sticky в контексте CSS Grid, которое на самом деле не баг, фича.

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

3. Помните, недавно вспоминали как устроены современные ресеты и нормалайзеры для CSS? Джош Камю делится своим вариантом, который он растил и полировал все эти годы. И поясняет за каждую строку. Читать тут.

4. Интересная статья про каскад от HTML Academy. С дурацким названием, но я все равно прочитал, и оказалось очень занимательно. Хорошо упорядочивает имеющиеся знания о стилях и углубляет понимание работы браузера с CSS, сильно рекомендую.

5. Напоследок — приятный гайд по цветам на 15 минут чтения от Michelle Barker: что такое HSL, HWB, LAB и LCH, как смешивать цвета функциями и даже какой цвет на сайте меньше посадит аккумулятор (я не шучу). Открыть/Комментировать

2021-11-17 08:01:36 1. Chrome 96 вышел. Да, зачастил он с новым релизным циклом в четыре недели. Штош, посмотрим что у нас сегодня: PWA получили возможность регистрировать свои особые ссылки с URL protocol handlers, HTTPS по умолчанию при наличии такового, PaymentRequest API для режима basic-card деприкейтится, CSS псевдокласс :autofill, который будет срабатывать на автоматическим заполненные браузером инпуты, и смешная проверка user agent для подготовки к трехзначым версиям браузеров (все регулярки перепроверили? ).

2. Я недавно наткнулся на очень интересное «на почитать» про хуки Реакта. И почитал! Ничего необычного, просто если хотите, чтобы кто-то наконец проговорил для вас все про работу встроенных реактовских (и редаксовских, прости, Витя) хуков человеческим языком — вам сюда.

3. Хорошая статья про дженерики в TS — это хороший повод начать наконец использовать их во всю мощь. Вот статья.

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

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

P.S. В прошлой публикации я просил вас полайкать видосик. Кто не лайкнул? Открыть/Комментировать