DEV Community: Gleb Svechnikov

Minimal loader with progress

Gleb Svechnikov — Mon, 28 Aug 2023 19:58:00 +0000

Recently I've discovered default behavior of HTML progress tag.
If you don't provide any attributes, progress acts like loader.

<progress/>

That is how it look:

In Firefox
In Chrome
In Safari Although it does not look&feel identical in browsers, it looks ok, even for light theme.

Such loader solution could be useful for rapid prototyping and minimal interfaces.

Minimal dark/light theme toggle

Gleb Svechnikov — Sat, 24 Jun 2023 11:00:43 +0000

There are a lot of implementations for color scheme switch/toggle
My favorite one probably made be Adam Argyle

But I think I've found even most minimal solution.
Few prerequisites:

In general you might have more them 2 themes, but I think dark/light is enough, therefore I'll need only toggle button
User might have system preference for dark/light and I want to be able to use in my code
If user want to change theme he/she should be able to do it with one click/touch
For current implementation I don't want to store toggle state in any, I suppose that developer will decide where to store such info it could be anything like state manager, cookies, Local/Session Storage, user settings on backend.

For design I've decided to use MDI icon theme-light-dark
and button that invert background/foreground colors with help of CSS system colors such as WindowText/Window

System preference I am getting with window.matchMedia("(prefers-color-scheme: dark)")

Example you might find in following codepen:

Minimal adaptive carousel slider

Gleb Svechnikov — Mon, 17 Oct 2022 07:05:06 +0000

Lately I needed to implement a carousel slider for website, none of the sliders that I've founded suited design that I needed so I've created another one.

Key idea of this slider that it has very little JS and work independently from other slider on the page

All JS is basically two functions for Next and Previous buttons:

const nextSlide = (event) => {
  const slider = event.parentNode.children[1];
  slider.append(slider.children[0]);
}
const prevSlide = (event) => {
  const slider = event.parentNode.children[1];
  slider.prepend(slider.children[slider.children.length - 1])
}

As you might see from code it depends on layout and moves slides right in DOM Node.
Pretty simple, don't you think?

Also it uses media-query in order to react to screen width:

.item {
  flex: 1 0 25%;
  min-height: 200px;
  text-align: center;
  height: auto;
}

@media (max-width: 1024px) {
  .item {
    flex: 1 0 33%;
  }
}
@media (max-width: 768px) {
  .item {
    flex: 1 0 50%;
  }
}

@media (max-width: 576px) {
  .item {
    flex: 1 0 100%;
  }
}

Example you might find in following codepen: