Arm1.ru

Adding Dark Mode support for a website

Dark mode on a website

iOS 13 coming this fall will include dark mode. Current macOS already has dark mode. With bringing dark mode to iOS Apple also recommends to web developers to adopt colours for dark mode.

It's pretty easy to implement. All you need is to change CSS for your website and add something like that:

:root {
  color-scheme: light dark;
  --body-background-color: white;
  --body-text-color: #2F2F2F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #222222;
    --body-text-color: #E2E2E2;
  }
}

body {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

So you're adding support for colour schemes with color-scheme: light dark; and defining CSS variables.

If you need to test it you can try the latest Safari in latest betas of iOS or macOS or (maybe) Safari developer preview. Developer tools in Safari have a special button to test dark mode.

Dark Mode for a website in Safari

Interesting: in macOS 10.15 default body background for dark mode is also dark. But in 10.14 it will be white in Safari and Firefox. You need to specify the background colour for the dark scheme if you want to support macOS < 10.15. Apple didn't mention that during the WWDC session. All they did was just remove the background-color property from CSS to let OS choose the background colour. They provide the NSHipster website as an example but its CSS also contains background colour property in CSS to support previous macOS versions :)

I've added dark scheme support to my Space In Box site. Also check the NSHipster site that has it too.

This article is some kind of summary from WWDC video Supporting Dark Mode in Your Web Content.

comment comments

Benchmarks: Vapor 3 vs. Vapor 2

After migrating (almost rewriting) my small project from Vapor 2 to Vapor 3 I've run benchmarks to compare performance. I didn't run benchmarks for the last version of Vapor 2.x so I will compare Vapor 2.1.0 to results of Vapor 3.1.0.

My server configuration:

  • 2 GB RAM
  • 1 CPU Core
  • SSD
  • 125 MBPS Out
  • Ubuntu 16.04.2 LTS
  • CouchDB

Benchmark from other server has been launched as:

wrk -t4 -c20 -d5m https://my_url

API just gets some data from CouchDB and returns it as JSON. Vapor project has been compiled with Swift 4.2.

Читать далее...

comment comments

Select like a Boss для Safari в Mac App Store

Select like a boss for Safari

24 сентября вышла новая версия macOS - Mojave. А вместе с ней и Safari 12, который теперь поддерживает установку расширений только из Mac App Store. Пришлось запилить приложение с расширением.

Загрузить

comment comments

JPG to HEIF converter

JPG to HEIF converter

Today I've decided to experiment with HEIF that was introduced by Apple with macOS 10.13 and iOS 11. They said that it has the same quality with much lower file size.

It's supported in the latest versions of macOS and iOS and last models of iPhone can take pictures in that format.

I'm thinking about compressing my home archive of photos and videos. I was experimenting with HEVC (H.265) and results were great - I had reduced the size of my videos by encoding them to HEVC with an awesome util called HandBrake.

I found the only way to convert JPG to HEIF (which has HEIC extension). It's possible with the Preview app from macOS. But it would be interesting for me if I can do it by myself in Swift. So I did :)

My folder with 64 photos from my action camera was 203 mb in JPG format. And it's only 31.3 mb in HEIC.

macOS and iOS support it from the box. And what's interesting - it's easy to add pictures in this format to the Photos library and it will appear on all your devices that use iCloud. But if you want to export this picture from the Photos library - it will be converted to JPG on the fly, so it looks like you can't export the original HEIC file.

The converter is free and open source (but it's for macOS only): https://github.com/makoni/jpg-to-heif-converter

comment comments

Анимация касания индикатора в UISlider

Анимация касания индикатора в UISlider

Стояла задача - при касании слайдера анимировать в приложении сделать анимированное увеличение ползунка. Так же, как это сделано у Apple в приложениях Apple Music и Podcasts в плеере, когда начинаешь перематывать позицию воспроизведения. Пока искал способ стандартными средствами, убил немало времени. Очень не хотелось писать прям свой кастомный слайдер, хотелось использовать системный UISlider, что мне, в итоге, и удалось.

Читать далее...

comment comments

SMS Антикредит

Надоел мне СМС-спам, который мне периодически приходит - то кредит предлагают, то ипотеку. Как раз, просматривая один из видосов с WWDC, увидел, что Apple дали API для фильтрации SMS-сообщений. Если сработает твой фильтр - то такие сообщения будут приходить без звукового или вибросигнала, втихую, и попадать в отдельную категорию спама в Сообщениях.

Недолго думая, запили такой вот фильтр и выложил в App Store. Надеюсь, кому ещё, кроме меня, пригодится.

comment comments