Исследование CSS-свойства flex

Жаль, что нет алгоритма расчета flex-shrink (как это сделано для flex-grow) для полноты статьи.

[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

Возможно, дело было с MediaStream?

[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

image.src = URL.createObjectURL(file);

Затем этот же image после onload отрисовать на canvas через ctx.drawImage.
Пример — https://codepen.io/monochromer/pen/MWgOWyx?editors=0010

Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Написать можно и в другом виде:

@media (bp.$xs <= width < bp.$sm) {
  /* ... */
}

Политика общего происхождения и CORS: визуальное руководство

del

Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Не вижу ничего плохого в том, чтобы руками писать media queries в современном виде, слегка приправленные sass'ом и обработанные postcss-плагином:

/* файл breakpoints.scss */
$xs: 320px; 
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

/* файл main.scss */
@use 'breakpoints' as bp;

@media (width >= bp.$xs) and (width < bp.$sm) {
 /* ... */
}

Нативный способ покрасить SVG-иконки

И для этого надо открыть отдельную страницу с достаточно тяжеловесной WebIDE.

Нативный способ покрасить SVG-иконки

Да, но в статье компонент сделан так, что он работает только с одним файлом-иконкой.

Нативный способ покрасить SVG-иконки

Если на экране будет 20 разных иконок, то будет 20 запросов. Последующие загрузки будут оптимизированы http-кэшем, но тогда уж лучше склеивать все символы в один файл.

TailwindCSS – очередной фреймворк или новый шаг эволюции?

Как я понял, основная идея подхода, как и сказал автор — "никаких лишних стилей". Это хорошо работает, когда в проекте есть достаточно строгая дизайн-система с ограниченным набором цветов, отступов и пр. В таком случае при создании новых компонентов, экранов (страниц) CSS не должен расти в размерах (или не на много прибавит веса).

Но все, сто может быть автоматизировано, должно быть автоматизировано. Создавать россыпь атомарных классов должен некий сборщик/компилятор, а не разработчик.

Мое видение работы:

1. В режиме разработки пишем как обычно:
   

   <button class="button" />

   
   

   .button {
   display: inline-flex;
   padding: 12px 16px;
   color: #333;
   }

2. В режиме тестирования отладки компилятор уже создал атомарные классы, но оставил возможность искать нужный компонент прямо в инспекторе браузера. Это удобно для разработчиков/дизайнеров.
   

   <button class="d-if py-3 px-4 c-text" data-original-class="button" />

3. Для режима эксплуатации удаляем data-атрибуты (или можем оставить, если HTML не сильно раздувается).
   

   <button class="d-if py-3 px-4 c-text" />

Поэтому лучше взять что-то вроде CSS-blocks или Deterministic StyleSheets.

TailwindCSS – очередной фреймворк или новый шаг эволюции?

1. Раз уж добавил класс .button, то почему бы и все нужные стили на него не навесить?
2. Есть у меня компонент — в виде макроса для nunjucks:
   

   {% macro button() %}
   <button class="d-flex px-4 a-1 b-2 c-3 d-4">
   {{ caller() }}
   </button>
   {% endmacro %}

   
   

   Только как найти его в исходниках, глядя в инспектор браузера?

   
   

Устройство ленивой загрузки в популярных фронтенд-фреймворках

Пишите код текстом, пожалуйста!

TailwindCSS – очередной фреймворк или новый шаг эволюции?

А что делать, если у какого-нибудь компонента нужно поменять оформление с px-4 на px-6? Предположим, что нет никакого фреймворка. Как найти нужный html-шаблон в проекте? Если сделать поиск редакторе по px-4, то, боюсь, там будет 100500 совпадений.

Как починить все самому, если баг-репорты игнорируются: отлаживаю wkhtmltopdf под Windows

Попробовал распечатать локальный html-файл с картинками в Chrome. Фоновые картинки не подгрузились.

Где-то советуют использовать стили

body {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

Но мне они не помогли. Задал явно формат:

@page {
  size: A4 portrait;
}

и заработало. Странно.

Могу ошибаться, но в wkhtmltopdf (как и в PhantomJS) используется древняя версия движка Webkit, еще та, что была до разделения на собственно Webkit и Blink (который сейчас в Chrome). Поэтому для печати лучше использовать Puppeteer или Playwright.

5 главных причин того, что JS-разработчики будут использовать Deno вместо Node

Скорее будет использоваться файл deps.ts с реэкспортом:

export { moment } from `<URL>`;

И тут мы возвращаемся к файлам, где объявлены все зависимости.

Хотя это, возможно, будет удобно, где нужно в зависимости от переменных окружения подсунуть другую реализацию модуля, для тестов, например.

5 главных причин того, что JS-разработчики будут использовать Deno вместо Node

ts-node нужен для разработки, а не для реальной эксплуатации.

5 главных причин того, что JS-разработчики будут использовать Deno вместо Node

А механизм import загружает модули в асинхронном режиме...

А как обеспечивается в редакторах автодополнение свойств, методов и пр., если модуль еще не загружен и неизвестно что там?

Deno v1.0: Безопасная среда выполнения для JavaScript и TypeScript. Обзор возможностей

Больше нет package.json, теперь принято использовать deps.ts

Но ведь и в package.json для Node.js можно написать пути до git-репозиториев с указанием ветки/теги/коммита, а не название пакета в централизованном хранилище.

React, performance и -500 миллисекунд на старте — история наших оптимизаций в цифрах

<link rel="preload" href="best_font_ever.otf" as="font" type="font/otf" crossorigin="anonymus">

А не пробовали еще использовать оптимизированный формат для шрифтов — woff2 или woff и удалять неиспользуемые глифы?

Axios или Fetch: чем пользоваться в 2019 году?

ky-universal