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

2021-11-10 08:00:52 Wednesday, my dudes! Новостей вам:

1. Вышел Firefox 94. Сегодня в меню: CSS layer (новый important в неумелых руках, новый мощный инструмент управления каскадом в умелых, пока за флагом), статический метод supports() у HTMLScriptElement, проверяющий поддерживается ли импортируемый тип скрипта текущим браузером (спойлер: поддерживается), выгрузка вкладок браузера из памяти на специальной страничке about:unloads, а также пестрый букет всяких улучшений в работе всего подряд.

2. Еще у нас новый Node v17.1.0, в котором теперь есть поддержка JSON import assertion.

3. А помните про такой CSS Reset? Это когда давным давно ты лендос на фрилансе верстаешь срочно и дефолтные margin опять мешают, надо идти в гугл эту фиговину искать. Итак, margin все так же мешает, фронтендеры все так же гуглят, а CSS Reset тем временем эволюционирует. В статье рассказывается много интересного про CSS Reset и CSS Normalize в целом, почитайте, интересное.

4. Ахмад Шадид в своей новой статье рассказывает о создании такого простого на первый взгляд компонента как бабл сообщения в чате. В качестве примера взят бабл фейсбука, с сотрудниками которого в процессе написания статьи он активно консультировался в твиттере (инсайды!). Почитать и понять, что баблы не совсем то, чем кажутся, категорически рекомендую тут.

5. Поговорим про CORS? Ну как, флешбеки с любимой ошибкой всплывают в памяти? Джейк Арчибальд очень интересно рассказывает как эта политика зарождалась, как работает и от чего защищает, а также кулстори, куда уж без них. Например, как раньше кодом установки бэкграунда можно было своровать чужую переписку в Yahoo Mail. And that's just the tip of the shitberg. J.Archibald

6. Свежайшие «307 пакетов» — тут, сегодня вы сможете послушать как выглядит построение API со стороны бэкенда и почему бэкендеры не в восторге от GraphQL. Очень интересный выпуск, я его даже, пожалуй, переслушаю по пути на работу.

99. У «пакетов» выходил еще один классный выпуск, про тесты, в конце которого Витя за сто лайков пообещал трехчасовой разбор всех видов тестирования. Сейчас там не хватает всего 63 лайка, а порадовать коллег очень хочется, ведь они явно не договорили и очень хотят еще поговорить про тесты. Про все тесты. Про 100% покрытие тестами. Про тесты на тесты. Три часа разговора про тесты. Про тесты из тестов. Поможем ребятам, а? Открыть/Комментировать

2021-11-01 08:00:14 С локдауном вас, друзья.

1. Поговорим о девтулзах в грядущем Chrome 96? Пощупайте канарейку, там интересно! Смотрите: появился переключатель, врубающий эмуляцию Auto Dark Theme (эта фича выходит в origin trial на Android), новая вкладка CSS Overview, по клику собирающая статистику по всем цветам, шрифтам и медиа-запросам на страничке, возможность копировать CSS-свойства в удобном для использования в JS виде (помещает значение свойства в кавычки) и еще много чего интересного.

2. NodeJS 17 уже здесь! А обзорная статья — здесь. Из нового: продолжается расширение поддержки промисов в разных API (на этот раз это Readline module), OpenSSL 3.0 и V8 версии 9.5. Также вышла NodeJS 16.13.0, которая переводит 16 версию ноды в статус Long Term Support. Обновляем прод.

3. Зимой планирует релизиться React 18, нас ждут батчинг в асинхронных операциях (это про стаки setState), конкурентный режим рендеринга, который со временем должен уменьшить количество блокирующих рендеров и улучшить пользовательский опыт, Transition API (угадайте для чего) и Suspense API в SSR, с которым мы больше не будем обязаны ждать полной гидрации страницы. Подробнее вы можете послушать в паре небольших видео (раз и два), которые отлично подойдут как фон для любых домашних дел. Стань сениором, пока убираешь какахи своего кота!

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

5. Давненько не было статей от Ахмада Шадида? Я тоже заскучал немного, вот вам их. На этот раз речь пойдет о новом CSS-свойстве overscroll-behavior, позволяющем забыть о старых костылях по блокировке прокрутки страницы за всплывшим попапом, когда в самом попапе уже скроллить нечего.

6. А вечер помогут скрасить юные смешные голоса моих замечательных коллег в новом выпуске подкаста «307 пакетов». Помните, в прошлый раз они заманили к себе в студию HR и все-все у нее спросили? На этот раз гость — настоящий рекрутер, можете послушать кулстори про рекрутинг в подъезде и найм в тиндере. Открыть/Комментировать

2021-10-20 08:00:22 Доброе утро! Соберитесь, впереди новость аж из семи пунктов. Погнали:

1. Chrome 95 вышел! Теперь у нас есть EyeDropper API (теперь на самих сайтах можно будет использовать пипетку и просто забирать цвет со странички), нативный роутинг с URLPattern и обновленные защищенные платежи. Также часть новостных источников сообщают, что вебаппы теперь смогут запускаться по своим особым ссылкам, но официальный сайт говорит, что это появится только в 96 версии .

2. V8 обновился до версии 9.6, он будет включен в Chrome 96, ждем 4 недели. В новой версии по умолчанию доступна поддержка Reference Types в WebAssembly (уже есть в Safari и Firefox).

3. Deno вырос до версии 1.15, опять добавилось возможностей у Web Crypto API, V8 обновили до 9.5 и добавили вотчер встроенному линтеру. Расти, динозаврик, расти.

4. Бесценный сайт, который вы порекомендуете своему другу, который тоже решил стать фронтендером. Если вас так же угнетает серость и монотонность старого доброго learn.javascript.ru. Полностью на русском языке!

5. А хотите написать мультиселект? Стойте, ну куда вы побежали? Бесподобный Adam Argyle продолжает свою серию статей о реализации различных компонентов и следующая его статья как раз об этом. Можно выдыхать.

6. Если вы любите копать поглубже, но не готовы дробить документацию — вот тут Felix Kling разобрал с комментариями как в нашем любимом JS работает нестрогое сравнение.

7. А на вечер — ну вы поняли, да? На этот раз мои прекрасные коллеги беседуют с HR о том, чем она отличается от рекрутера и к̶т̶о̶ ̶в̶о̶о̶б̶щ̶е̶ ̶п̶о̶ ̶ж̶и̶з̶н̶и̶ как она помогает нам не сойти с ума и быть чуточку счастливее. Открыть/Комментировать

2021-10-15 08:00:07 Доброе утро. Вот новости:

1. Firefox 93 уже тут. Читаем обзор и радуемся. Из интересного: подвезли изображения в формате .avif (сжимаются лучше чем WebP, JPEG, PNG и GIF), свопинг памяти для жирных и голодных вкладок, а также статические блоки инициализации в классах (напомню, тут можно про них почитать).

2. TypeScript 4.5 в бете и совсем скоро позволит нам импортировать типы и функции одним импортом. Ставь лайк если тоже было больно. По ссылке — обзор беты.

3. Котики обещали серию статей про алгоритмы — котики держат свое слово. По ссылке вторая статья из серии — на этот раз про стеки, очереди и связные списки. Не останавливайтесь, маленькие котики

4. Статья про DOM от Макса Кравеца позволит вам разложить по полочкам традиционную объектную модель документа, ее теневого брата и виртуальную ее ипостась.

5. Давно не было про доступность? Вот тут Татьяна Фокина сделала подборку основных тем с пояснениями и ссылками. Прекрасная работа, материалов все больше, а теперь у нас есть целый гайд по гайдам, который вы тоже когда-нибудь обязательно прочтете.

6. На вечер — свежий, дымящийся выпуск обаятельных «307 пакетов», на этот раз — про документацию, отсутствие документации и войну, которая никогда меняется. Уберите от экранов маленьких детей (они все равно не поймут вашей боли). Открыть/Комментировать

2021-10-08 08:00:17 Новости фронтенда с подножия Казбека. Привет из отпуска.

1. Давайте почитаем про безопасность фронтенда. Что? У меня тоже сроки горят, давайте хотя бы прочтем. И запомним. Спасибо Глебу Михееву за конспект доклада Татьяны Новиковой на Frontend Conf Live 2020.

2. Вот тут — про плохое: Fernando Doglio написал статью-чеклист о том, что во фронтенде сейчас делать не стоит и о чем не следует забывать. Знаю, вы так не делаете. Но передайте ссылочку тому коллеге, который еще использует var и пытается защищать jQuery.

3. Ура, алгоритмы! Если вы фронтендер и вам сейчас стало страшно — вам сюда. Если вы не фронтендер — странно, но рад, что читаете меня, спасибо. По сабжу: CAT.IN-WEB начали писать серию статей о структурах данных и алгоритмах, в первой из них — пояснения за терминологию, массивы и пять способов их сортировать. Не то чтобы Array.sort кто-то запретил, но знать это полезно — и не только для собеседований.

4. Аттракцион невиданной щедрости: FrontenderConf открывают трансляцию из своего зала с самым страшным названием. Ни на одной конфе у меня не получалось быть больше чем в одном зале одновременно, так что можете считать, что посмотрите ее целиком.

5. Статья на вечер. Ахмад Шадид рассказывает о найденном им на главной странице Facebook интересном приеме: border-radius элемента меняется в зависимости от того, занимает ли элемент весь экран. Чтобы стало интересно, выглядит оно так:
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))); Открыть/Комментировать

2021-09-29 08:00:08 1. В Chrome 94 появилась возможность задавать цветовые пространства. Например, теперь можно использовать пространство P3, более приятное для человеческого глаза, чем тот же старый добрый RGB (P3, например, используют в кинотеатрах, а еще в мобильной технике и ноутбуках — первыми так делать придумали в apple). Также подвезли Web Codecs API для продвинутой работы с видео и WebGPU API для низкоуровневых манипуляций с видеокартой. And more!

2. Safari обновился до версии 15, и впервые за долгое время это происходит без обновления самой операционной системы MacOS. Появились поддержка aspect-ratio для блочных элементов, ES6 Modules в Workers и ServiceWorkers, поддержка WebGL 2 и верхнеуровневый await. А также, внимание, theme-color доехал! Красим табики, улыбаемся.

3. Stefan Baumgartner написал статью "TypeScript: In defense of any", немного успокаивающая острую аллергию программистов на использование типа any в Typescript. Мораль статьи: нужно быть умненьким. Are you okay, ?

4. Обзор недалекого будущего: статья Игоря Агапова о том, что нас ждет в ECMAScript 2022.

5. На вечер — статья от Ахмада Шадида о том, как и когда пользоваться новомодными Container Queries, которые скоро вкатятся в браузеры, а следовательно, и в наши с вами фронтендерские будни.

1.9K viewsAlexander Bu, 05:00

Открыть/Комментировать

2021-09-21 12:32:20 Немного новостей фронтенда на обед.

1. Chrome Devtools 95 несет нам множество прикольных возможностей: в CSS можно будет менять единицы измерения в выпадающем списке и регулировать цифровые значения движением мыши (вроде давным-давно так можно было делать в Emmet?). Появилась возможность прятать issues в соответствующей вкладке (не забывайте, так они не исчезают из кода!). Собственные свойства объекта теперь жирненькие, а Propertiies в (угадайте какой вкладке) напротив, стали плоскими. Ну и сниппеты отсортировали в алфавитном порядке, красота.

2. Вышла Node.js 16.9.0. А следом вышла Node.js 16.9.1 с пачкой мелких фиксов. Подвезли V8 9.3, а также добавили инструмент Corepack, который позволит нам работать с yarn и pnpm без установки. Или работать дальше с npm и ничего не заметить.

3. По соседству Deno обновилась до версии 1.14, теперь в нашем распоряжении есть Typescript 4.4 и V8 9.4 (нода, догоняй), добавлены новые методы Web Crypto API и возможность кастомизации опций deno lint и deno fmt, а также большая пачка иных нововведений. И божечки, какой же у Deno все-таки милый логотип.

4. Firefox тем временем уже 92, теперь тут тоже есть метод Object.hasOwn, а также набор приятных мелочей вроде accent-color для управления цветом галочки чекбокса (или пипки радиобаттона) и size-adjust для управления размером запасного шрифта, если с основным что-то пошло не так. Открыть/Комментировать

2021-09-19 17:46:57 #сампользуюсь
Нашел сервис для быстрого прототипирования (делал на нем телеграм-бота для поиска по компонентам фигмы). Синхронно и долгий ответ на запросы, зато снимает вопрос обвязки и подключения апи, удобно для простых мвп Открыть/Комментировать

2021-09-18 10:00:22 Суббота, чилл, годные статеечки. Поехали!

1. Для разминки — хорошо раскладывающая все по полочкам статья от Stephen Stchur и Thomas Steiner о поведении эвентов в браузере. Да, capturing и bubbling — тот самый вопрос, на который вы правильно ответили, устраиваясь на позицию джуна, но с тех пор прошло много лет, вы знаете как все работает, но не уверены точно в нюансах.

2. Помните, в прошлой новости было про статические блоки инициализации в классах в новом V8? Вы тоже не поняли зачем и решили попозже почитать нафига это нужно? Час настал! Вот тут статья с объяснением от Dr. Axel Rauschmayer.

3. А вы любите псевдоэлементы? Я люблю. Но если любишь — отпускай, говорит Marcel Moreau в своей статье «Reducing The Need For Pseudo-Elements». И правда, верстка уже переросла многие привычные приемы.

4. Про доступность. Вы знаете доступность? А практикуете? Попробуйте начать хотя бы пета сразу с оглядкой на нее, а вот вам, кстати, гайд. Ждите пост исключительно о доступности — материалов за пару месяцев скопилось много.

5. О том, как сделать так, чтобы ваши тени были реально классными, а не на глазок в последний момент (я сейчас про верстку, если что) пишет Josh Comeau в своей новой статье. Долго, подробно, с классными примерами и залипательными ползунками, которые можно подергать. Открыть/Комментировать

2021-09-15 08:00:06 1. В V8 release v9.4 появились статические блоки инициализации классов. Они вызываются один раз, при создании экземпляра. Ожидаем в Chrome 94.

2. О новом и приятном: статья Simon Plenderleith о новинках в NodeJS, в которой с примерами рассказано о встроенной генерации идентификаторов с crypto.randomUUID(), отмене http-запросов при помощи AbortController, API на промисах и визуальном отделении встроенных в NodeJS модулей от сторонних библиотек, которое выглядит так:
import url from "node:url";

3. Чтобы отдохнуть от новостей, вот вам набор кулстори о том, как в вебе хотели как лучше, но что-то пошло не так и пришлось немножко костылить. Узнайте, где getComputedStyle сработает не так, как вы ожидаете, и почему это хорошо.

4. Если хотите наконец освоить шорткаты в вашей IDE — Ислам Виндижев в подкасте CSSSR рекомендует замечательный сайт для тренировки этого навыка. Например, вот тут можно найти курс клавиатурных сокращений для IntelliJ IDEA.

5. А на вечер — новый, особо токсичный выпуск подкаста «307 пакетов» от моих замечательных коллег. Послушайте по пути домой, они на самом деле хорошие. Открыть/Комментировать