Forem: David Kistauri

Auto dark theme for the website

David Kistauri — Fri, 04 Oct 2019 19:22:06 +0000

I don’t want to prove, that you need a dark theme, just look:

Now we have a dark theme on the web. Safari, Chrome, Firefox and other browsers are support dark theme for websites.

Use it. Now I’ll explain how to make a good dark theme.

Start point — this website. Look and scroll. If you see it in light mode, try to switch themes in your settings. There’s dark mode support, but I’ll go back to the development process.

The blog was in light colors with contrast blocks — links on articles. It’s easy to start because I am using not a colored background. Let’s define the logic, to understand, how we’ll build the dark mode.

Logic

Have: a light theme\
Will have: fundament for the dark mode

The visitor doesn’t expect theme toggle, he wants to set mode once in system settings and forget about it. If the user left the light mode, he doesn’t want to see our blog in dark mode. If the user sets the dark mode — light blog especially not that he needs. So we need to give a task to the website to define the user’s color theme and set the same on the website.

CSS

Have: a common CSS code\
Will have: CSS variables to define all in one place

Going to CSS and understand, that we need to use variables. Write rules with variables and next use it:

:root {
  /* Defining variables */
  --background-color: #fafafa;
  --foreground-color: #121212;
  --accent-color: #ff5252;
}

div {
  color: var(--foreground-color);
  background-color: var(--background-color);
}

a:hover {
  color: var(--accent-color);
}

Google:

«Use dark grey — rather than black — to express elevation and space in an environment with a wider range of depth. Apply limited color…»

— told, that using black (#000000) for a dark theme is bad — using dark grey is better. Setting color for a dark theme. If there are more than three colors: background, text and accent color — inverting colors are bad, you need to analyze colors and how they work.

@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Redefining color variables for dark theme */
    --background-color: #121212;
    --foreground-color: #fafafa;
  }
}

Work with colors

Have: common colors invert\
Will have: replacing one color with others

Accent colors should be lighter, to save contrast. But the dark theme isn’t just about replacing colors. Google is giving advice, that blocks, that on the top, more near to the user, should be lighter. To place a block with the same color as a background, you should add a border.

Don’t make large areas to bright and contrast. Change design that way, so there will be more dark colors. In my blog, I am using one scheme: light theme — bright colored blocks (links to article), dark theme — dark blocks with colored text. Colors replaced with lighter variants.

To check colors contrast, Chrome has a cool tool in dev tools: open dev tools (Ctrl|Cmd + Shift + I) and enable cursor (Ctrl|Cmd + Shift + C), hover text and see little window with contrast number and checkmarks. If you click on the color in styles, you’ll see contrast ration and lines, which help you to choose proper colors.

Use this tool, here you can find cool colors and define yours to get additional colors for different themes.

Summing up: variables, proper colors, media-styles for the dark theme.

My blog, where you can see this dark theme: davidkistauri.ru/blog

Design things and logic on my website

David Kistauri — Sun, 22 Sep 2019 09:39:52 +0000

I recently launched my portfolio blog site and decided to tell about the little things in the design of website. Some things I peeked on other blogs, like Ilya Birman's Aegea, and adopted to my website.

Every example in this articles is translated to English because my website is in Russian

Thing with headers

The header is showing the hierarchy. If I am on the main page, the header is my name "David Kistauri", if I am on the blog page, it's main header + "Blog": "David Kistauri. Blog", if I am on the tags page, it's main header + "Blog" + "Tags": "David Kistauri. Blog. Tags".

This rule isn't for template pages like articles, product pages or pages for each tag, because of "David Kistauri. Blog. How to use VS Code if you are writing" is a mockery of the reader, especially those who come in from the phone — header is too long.

Thing with links

Links in the blog — the first two can be clicked, the third — no, because we are already in the blog, and two more — additional: the blog has tags and you can subscribe to it

There are links above the header on every page. They are divided into two types: primary and secondary. There are three primary links: the main page, projects page and blog page — these are sections of the site.

Primary links

If I am not on the page — link is blue if I am on the page — link isn't clickable and has a black (white in dark mode) background if I am on the page section — ex. /blog/all/, the link is clickable with black (white in dark mode) background and blue text. This complaint setting is for understanding hierarchy by looking at links.

Secondary links

There are no constant secondary links. Sometimes there are no secondary links. It depends on the page. These links are additional. The blog has two secondary links: to list of tags and to RSS. These links have a blue text.

If you'll hover a primary link — this link change a background color, if you'll hover a secondary link — this link change a text color.

Place of secondary links

Besides the header, there are secondary links in the list of tags and notes. These links are located differently — in tags list, they inlined, like bricks, in notes list each link starts with a new line.

I have a note about "brick-link" design in my Telegram channel. Tags are located this way because there is a connection between them — one note may have a lot of tags; people often visit tags list to see a list of themes, not for find one tag.

Links to notes are located separately because every note is a separate content unit and "brick-link" design makes search harder. Also, notes names are long, so long bricks isn't cool.

Thing with dividers

All sections are connected (or divided) with divider. There is a big margin above the divider and a small margin under the divider. I've read about this reception in Igor Shtang's note.

Thing with a dark mode

You need a dark mode. Especially if you are building the blog — a product with long articles. Stop to torment owl-readers with bright colors. The task isn't just to change white background to black background. You need to pick up good colors so that in the dark version all the elements can be seen and shadows worked.

Bright colors should not occupy a large area and should be properly substituted for the elements, background and text color. In the list of posts, I removed the colored background from the blocks and set its title - not much bright, darker. I will tell you more about the dark theme in the next note.

Visit my website — https://davidkistauri.ru
This article in Russian — https://davidkistauri.ru/blog/all/ya-u-mamy-designer/

Twitter and his search

David Kistauri — Thu, 22 Aug 2019 13:30:48 +0000

Recently, Twitter has changed its search icon to hashtag in the web version. This was not the best solution.

Changing the icon to another one is always difficult — you have to get used to it, especially if the changes take place in a social network with a billion users.
Search in all interfaces has long time been associated with a magnifying glass icon, so changing the icon to something else for the sake of individualism is not cool.

But Twitter had another reason. Initially, the homepage was always arranged in chronological order and showed tweets only from those to whom the user is subscribed. Then Twitter decided to use the algorithms, but users didn't like it and they started to switch the feed back to the chronological order.

Twitter decided to create a second feed and put it on the search menu, as it's now in Instagram. So there is no longer a search menu, and the search string became part of the new feed, that' s why Twitter decided to change the icon. But users still associate this menu not with hashtags or the second tape, and with the search, so the experiment failed.

But at the same time, Twitter still has a separate search menu on each page, so it looks logical only to choose: the tape of interest or the menu with the search — do not interfere.

Now they have done the following: on the wide screens, where there are icons with signatures, the search is signed by the word and marked with a hashtag icon, and on narrow screens, where there are no signatures, the icon changes to a magnifying glass. But between these two states there is an intermediate one, where there are no signatures, but the icon is marked with a hashtag — it is confusing.

Want to Learn a New Framework? Start with this

David Kistauri — Sun, 07 Jul 2019 15:03:09 +0000

Save it, learn it, write it — only in this order. Today I want to tell you about my work-learn process. Work and learn are coupled because in programming world to work good we need to learn good and learn a lot.

I can divide an article into the parts. How I store:

Bookmarks
Links
Knowledges

Bookmarks

I am using Chrome and Firefox and in both of them, I have constantly opened bookmarks bar. On it I have only websites that I use now, that's because the bar is dynamic and updates frequently.

Besides, I don't love overfill bar and I've to save bookmarks without names, only with icons. Another proof of icons importance.

General principles of bookmarks location:

Social media and news websites
Tools
Materials for learning

Social media and news websites. My main social media is Twitter. Also, I use local popular VK, but not so often. Twitter I open 10+ times per day every day, that's because Twitter is on the bar, VK isn't.

News I getting from Dev.to, Hackernews and Reddit. But I use them not so frequently, because of all useful content duplicates in Twitter by official accounts or by some users.

Tools. In front end dev world we need a lot of tools like color palette, online code formatters, admin panels, and documentation. But most of these instruments using only when starting a new project or when supporting it. I don't have these tools on the bookmarks bar.

I only have something like cloud storage, task and source manager.

As my task manager, I use Google Keep. It helps me and I used to manage all of my projects in it. I create a new board for every new project, add tasks and subtasks and sort them by emojis.

Material for learning. This is the most inconstant part of the bookmarks bar, because I add new material, that I learning now and remove old. More often it's courses, articles and — most important — documentation. It's important because it was written by authors of learning object and updates often.

For example: recently I've learned React and have official docs in my bookmarks bar and some additional links. After this, I decided to repeat OOP in JS and added one course and one article about OOP in ES6.

Links storages

Despite the fact that my links in bookmarks are very shorted, I love minimalism and short their quantity.

So I need to store useful links and links, that I want to read later somewhere. For those purposes I use Telegram. Telegram as good in storing links as a messenger.

In Telegram, I have two private channels: Inbox and Links.

Inbox. In this channel, I store different materials that I want to read/learn soon. That list I update often and not so often check.

What about caching? Most of the websites now support Instant View — a Telegram technology, that allows to open articles from websites fast and change reading mode. This feature automatically caches all links even if I shared a link from the notebook and didn't open it on mobile.

Links. This channel updates rare and only by articles and videos, that I don't need soon. I can store here an article about something, that I want to learn in the future or link for use as an argument in the dispute.

How I learn

David Kistauri

@dtroode

Yesterday started learning @sveltejs. Writing all to markdown file. All text is written by me, code from examples. You can see the bold and italic text (red on the left): this is my own thoughts for better memorization

12:16 PM - 11 Jun 2019

0 0

In the modern world of front end and programming, devs need to learn something every time and renew base of knowledge, that's because I learn something new and repeat something old.

In the last time, I have opened the new, although primitive way for remembering — write. I write documentation and parallelly in neighbor window writing it. Important! Writing by my own words, not copy, otherwise, it's just another documentation. Because I am not a native English speaker, learning docs in English and especially writing helps for improving English skills.

For every new material, I create a new folder for code examples with file learn.md for writing. All files I contain in Markdown and regularly backup.

Conclusion

My collection needs new links, send me to Twitter or to Telegram.

What I learned after a year and half of developing

David Kistauri — Sat, 22 Jun 2019 12:21:20 +0000

I started to code in January 2018. After more than a year I changed a lot of things in my development process.

First of all, I am a frontend developer. This means that I use HTML, CSS, JS.

Let's start with a list:

Atom → Sublime Text → VS Code. I started to code on codecademy (it's first in Google). My first HTML code I copied to Atom and saved on a computer. I have chosen Atom because a long time ago I've searched for a good text editor and see a lot of recommendations. Next, I switched to Sublime Text and loved it. I write a lot of non-realise websites and some realized. Next, I heard about the VS Code. It's been very complicated for me but after a few weeks, I completely switched.
Beautify → Prettier. It's very hard to format code by hands, so I need to automize this process. I have used Beautify but recently switched to Prettier with config files.
Default monospace font → Fira Code. The font is a very important thing in the development process. I didn't think much of it before. And once I saw in Twitter some interesting font with a new thing for me — ligatures support. It was Fira Code. Now it's a very popular font.
jQuery → clean JS. I started to code in JS from jQuery tutorial on YouTube. The tutorial said that jQuery is cleaner, smaller, easier and with jQuery you can write a solution for the task in a few strings that take in JS 200 strings. But after some time I've understand that clean JS has more support, cleaner, easier and takes a minimum of space with default support in browsers.
CSS → SASS. Just love this parent { child } syntax.
Jekyll → Gatsby. Gatsby is a more progressive static site generator with a lot of default optimizations.
Lighthouse → PageSpeed Insights. So I love green scores in Lighthouse and love it. Recently Google moved Lighthouse to the web with more stability.

If I remember more, I'll extend an article.

Write in comments your openings.

Why you need to give Firefox a chance

David Kistauri — Sat, 22 Jun 2019 08:44:27 +0000

We live in the era of browser monopoly. Google occupied the whole web by its Chrome. Chrome has more than 50% of users:

Safari is on the second place just because of macOS popularity.

Now, most of the developers choose between Chrome and Firefox. And in 2017 Mozilla released their updated version of Firefox — Firefox Quantum with new customization settings, better extensions support, privacy and what's more important — speed. 2x faster than old Firefox and faster than Chrome.

Firefox using their own new engine with new Quantum CSS and Quantum DOM rendering. A lot of explanations here. And Chrome uses a lot of memory, Firefox — less.

Also, Firefox has a lot of useful features like showing useless CSS rules and supports prefers-color-scheme: dark media rules, that Chrome supports only in beta now.

Do you scare about extensions? Now, most developers write their extensions for both Chrome and Firefox.

And the final reason — stop the monopoly. Give a chance to other companies that smaller and you can see how frontend develops.

Move all your bookmarks in Firefox for one week and try.