MacOS Driven Development

2014 год

.header::after {
    content: '';
    width: 100vw;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #d6d8d9;
}

.header::after {
    content: '';
    width: 100vw;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #d6d8d9;
}

<picture>
    <source type="image/webp"
            srcset="img-mobile@1x.webp 1x,
                    img-mobile@2x.webp 2x">
    <img src="img-mobile@1x.jpg"
         srcset="img-mobile@2x.jpg 2x"
         alt="Привет, мир!">
</picture>

.bg {
    background-image: url('img/bg@1x.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    .bg {
        background-image: url('img/bg@2x.jpg');
    }
}

var OSName = "Unknown";
if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) OSName="Windows 10";
if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) OSName="Windows 8";
if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) OSName="Windows 7";
if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) OSName="Windows Vista";
if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) OSName="Windows XP";
if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) OSName="Windows 2000";
if (window.navigator.userAgent.indexOf("Mac")            != -1) OSName="Mac/iOS";
if (window.navigator.userAgent.indexOf("X11")            != -1) OSName="UNIX";
if (window.navigator.userAgent.indexOf("Linux")          != -1) OSName="Linux";

Общие принципы

• Должна быть кнопка отмены действия.
• Обработка клавиши Esc.
• Кнопка действия закрывает окно.
• Обработка клавиш Enter и/или Space.
• Текст кнопки — чёткое описание действия.

Доли браузеров (февраль 2019)

• ...
• IE 11 — 2.72%
• Safari 11 — 2.57%
• Edge 17 — 1.69%
• ...

Шрифты по умолчанию

Pixel Perfect

Клавиатурные сокращения

• Windows: Ctrl + C
• macOS: ⌘ + C

document.addEventListener("keydown", function(e) {
    var isMac = window.navigator.platform.match("Mac");
    if ((isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 67) {
        e.preventDefault();
        // обработка Ctrl/Cmd + C
    }
}, false);

Тестировщики

• умеют лучше;
• не пропустят баг, потому что "фича";
• медленное появление фичи у пользователей.

Отдельное устройство для тестирования

• разработчик не пропустит баг сам;
• дорого;
• поддержка инфраструктуры.

Две параллельные системы

• разработчик не пропустит баг сам;
• относительно дёшево;
• поддержка инфраструктуры.

Разрабатывать сразу на Windows

• дёшево;
• можно на сдачу купить разработчику второй монитор;
• баги видно сразу;
• разглаживаются морщины.