Как заопенсорсить npm-пакет с нормальным деплоем, CI и демо (без потери радости к жизни)

Давайте еще воспользуемся npm-хуками и добавим postbuild скрипт, который будет копировать README.md в папку со сборкой. Так мы никогда не забудем обновить описание пакета на NPM.

Почему бы не добавить README.md и папку со сборкой в секцию files в package.json?

И еще вопрос: кто или что в итоге вызывает npm-скрипт release? По идее, он должен вызываться при merge в master-ветку?

CSS переменные и цветовая тема для сайта в несколько строк

Зачем здесь вообще использовать препроцессор? Просто пишем:

[data-theme-style='normal'] {
  --color: hsl(var(--theme-color), 15%, 44%);
  --background-color: hsl(var(--theme-color), 30%, 10%);
}

Так избавляемся от лишней вложенности, повышения специфичности, трудного чтения препроцессорного костыльного (~'...') кода. А отвязка от html в селекторе дает возможность оформить разные элементы на странице разными темами, например, секции на лендинге.

<section data-theme-style="normal"><!-- content --></section>
<section data-theme-style="dark"><!-- content --></section>

Переполнение и потеря данных в CSS

А если несколько рядов?

Переполнение и потеря данных в CSS

В кругу тех, кто занимается версткой, «переполнение» вполне себе нормальный и часто используемый термин.

.container больше не нужен

В примерах автора это не так очевидно, но данная техника позволяет добиться желаемого. Выставите значение переменной --container-width, например в 1200px, и посмотрите, как это работает — https://jsfiddle.net/z86wt2uh/

.container больше не нужен

Это не совсем так. Если размер экрана будет меньше, чем заданная ширина контейнера, то padding'ы станут равными нулю, так как выражение внутри calc(50% - width / 2) будет отрицательным.

Но тут всплывает еще одна проблема — нам нужны какие-то минимальные зазоры, чтобы контент не прилипал к краям экрана. Тут могла бы помочь функция max, но она пока поддерживается только в новых Safari. Минимальный padding можно эмулировать с помощью прозрачного border, но в таком случае изначально элегантное решение обрастает костылями.

Набросал пример — https://jsfiddle.net/6kqa4t7n/.

.container больше не нужен

calc(50vw + 590px)

Тут нужен знак "минус"

.container больше не нужен

Количество элементов можно уменьшить, если смешать класcы brif-wrapper и container на одном DOM-узле. А так представленная техника рассматривалась достаточно давно в книге CSS Secrets за авторством Lea Verou.

P.S.: почему используете дробные пиксели в медиа запросах, например (min-width: 1199.98px)?

Как организовать разработку и поддержку блога на WordPress в 2К19 году и не налажать

Лучше использовать такой трюк:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?<?php echo time(); ?>" />

Наверно, хотели написать filemtime() вместо time()?

Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

Управление шкалой типов

В контексте статьи type это «шрифт», а не «тип».

Инструменты для создания адаптивного сайта без доступа к сайту

Вот мой простейший конфиг:

let browserSync = require('browser-sync').create();

browserSync.init({
    proxy: 'http://site.com',
    serveStatic: ['static'],
    files: ['static/**/*.*'],
    rewriteRules: [
        {
            match: /<\/head>/i,
            fn: (req, res, match) => `<link rel="stylesheet" href="/custom.css" />`
        },
        {
            match: /<\/body>/i,
            fn: (req, res, match) => `<script async src="/scripts.js"></script>`
        }
    ]
});

В serveStatic указываем из какой папки брать файлы. В rewriteRules пишем где в html и какие файлы вставлять.

Инструменты для создания адаптивного сайта без доступа к сайту

Для подобных целей использую browser-sync. Его можно использовать для внешнего сайта как прокси и инжектить стили и скрипты из локальной папки.

Кастомизируем select на чистом css

Чем данный способ не устраивает?

8 приемов работы с CSS: параллакс, «липкий» футер и другие

Пример с чекбоксами на MacOS в Chrome 72:

У дизайнера новая идея? Что может быть проще

Такой способ стилизации не лишен недостатков. Предположим, в компоненте Dialog уже были стилизованы компоненты Button подобным образом:

.dialog :global(button) { /* ... например, имеют синий цвет */ }

Что преобразуется с помощью Svelte к виду:

.dialog.svelte-8d16lv button { /* ... */ }

И поскольку SubmitButton тоже находится внутри Dialog начнутся коллизии стилей:

.submit.svelte-138xsye button { /* ... */ }
.dialog.svelte-8d16lv button { /* ... */ }

Поле загрузки файлов, которое мы заслужили

Firefox по каким-то неведомым причинам отказывается применять свойства к метке при фокусе на input[type=file].

Если учитывать относительно современные версии Firefox, то баг можно вылечить с помощью css-псевдокласса :focus-within.

Сам баг: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196

Поле загрузки файлов, которое мы заслужили

Только ни пробелом, ни enter'ом на такой label не нажать. Только мышкой.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №327 (13 — 19 августа 2018)

Иногда вы переводите слишком буквально.

Техники сохранения времени CSS.

Это вообще что такое? Наверно имелось ввиду "экономящие время" или "простые".

Ограничение длины текста через градиент

Как ни странно, свойство -webkit-background-clip работает в последних Edge и Firefox

Типографика и современный CSS

жаль, что переносы Хром не поддерживает

Стоит отметить, что Chrome не поддерживает переносы только на Windows. На Mac пример с hyphens отображается корректно.