istavros

How to make simple slideshow using cool CSS and JS features

Stavros Ioannidis — Sun, 13 Nov 2022 00:35:35 GMT

Hello. Today I'm making a simple slideshow using cool CSS and JS features. I'm gonna be using:

CSS variables
CSS transformations
CSS functions
CSS grid
JS Proxy

The HTML

<div class="slideshow">
  <div class="slides-container">
    <div class="slides">
      <img class="slide" src="https://picsum.photos/600/300?v=1" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=2" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=3" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=4" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=5" alt="">
    div>
  div>
  <div class="bullets">
  div>
  <div class="buttons">
    <button type="button" class="prev">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
      svg>

    button>
    <button type="button" class="next">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      svg>
    button>
  div>
div>

Let's break it down.

We have a div containing the whole slideshow with a class of .slideshow. This container has 3 immediate children. The first is the .slides-container which will act as the "window" behind which our slides will be showing. Then there is an empty .bullets container where we will dynamically put the bullets based on the number of slides. And the last one is the .buttons container, with the .prev and .next buttons.

Inside the .slides-container there is another container with a class of .slides which holds all our slides. This div will be moving right and left behind our "window" to reveal the active slide.

For the images I used pictures from https://picsum.photos, and for the .prev and .next buttons I used some icons from https://heroicons.com.

The CSS

First, let's define some CSS variables that we will use later.

:root {
  --max-size: 600px;  
  --size: min(var(--max-size), 100vw);
  --active: 0;
}

The --max-size is the maximum size of each slide. The --size is the calculated size of the whole slideshow. It will be 100vw for screens smaller than --max-size, and --max-size for larger screens. The --active variable holds the index of the active slide.

Now, the outer container will be a CSS grid with 1 column and 2 rows. The first row will contain the slides and the buttons, and the second row will contain the bullets.

.slideshow {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  gap: 10px;
  width: var(--size);
}

Then, our "window". The .slides-container will sit in column 1 and row 1 of the parent grid. It will create a hole (a window), by having a transparent background and hiding anything overflowing.

.slides-container {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
}

Then the .slides. This is a div containing all our slides. It has display: flex to put everything in a row, and it will move around to reveal the active slide. The interesting part here is the calculation of the container position based on the active slide and the size of the slideshow. It is -1 * size * active. Let's say the size is 600px. When the active slide is the 0th one, then it will give us 0 move on the x-axis. When the active is the 1st, then it will give -1 * 600px * 1 = -600px so it will move 600px to the left.

.slides {
  display: flex;
  transform: translateX(calc(-1 * var(--size) * var(--active)));
  transition: transform 0.3s ease;
}

Our images need to have a width equal to the --size variable, in order to be responsive. This is because their parent is really long and we can't rely on the image taking up all the available width and having a height of auto.

img {
  width: var(--size);
}

Then the buttons container. This div has to sit on top of the slides. I don't like using position: absolute so I used the grid feature of putting multiple elements in the same grid cell. So I put it in the same grid cell as the .slides-container. The problem with this is that I cannot click on the slides themselves. If the slides had a link I wouldn't be able to click on it because another div is in front of it. To tackle this problem I added pointer-events: none at the buttons container. Now I cannot click the buttons. So I add pointer-events: all at the buttons. The buttons in this container will be in the middle vertically and at the sides horizontally.

.buttons {
  z-index: 1;
  display: flex;
  justify-content: space-between; /* Horizontally at the sides */
  align-items: center; /* Vertically in the middle */
  padding: 10px;
  grid-column: 1;
  grid-row: 1;
  pointer-events: none;
}

I don't think it is essential to include the buttons styling here. I have a codepen later to showcase the slideshow demo.

The .bullets container sits in row 2 of the slideshow grid. It aligns the bullets at the center.

.bullets {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Each bullet is round and the one corresponding to the active slide has different styling.

So far we have this. It doesn't work yet, but it's styled.

https://codepen.io/istavros/pen/BaVRGGb

The javascript

First, let's keep some useful stuff in variables.

// We keep references to all needed elements.
const slideshow = document.querySelector(".slideshow");
const slidesContainer = slideshow.querySelector(".slides");
const slides = slideshow.querySelectorAll(".slide");
const bulletContainer = slideshow.querySelector(".bullets");
const prev = slideshow.querySelector(".prev");
const next = slideshow.querySelector(".next");
const length = slides.length;

Then, let's create the bullets based on the slide count. I use documentFragmet here to insert new elements into the DOM.

// Automatically create the bullets based on
// the amount of slides we have.
const fragment = document.createDocumentFragment();
slides.forEach((slide, index) => {
  const bullet = document.createElement("span");
  bullet.classList.add("bullet");
  if (!index) {
    // Set the first bullet as active
    bullet.classList.add("active");
  }
  // Add the click functionality to the bullet
  bullet.addEventListener("click", () => active.slide = index);
  fragment.appendChild(bullet);
});
bulletContainer.appendChild(fragment);

// Keep a reference to the bullets
// so we can add/remove the .active class.
const bullets = bulletContainer.querySelectorAll(".bullet");

Now let's add functionality to the buttons. When clicking on the .next button we want to increase the active index by 1, and when clicking on the .prev button we want to decrease the active index by 1. When we reach the last slide and click next, it should go back to the first. And when we are at the first and click previous it should go to the last one. However, I don't really like to put this logic into the click handlers, because by clicking .next I don't care which one is the next one. Just show me the next. So I used the magic of JavaScript Proxy. You may have noticed that in the bullet click listener I used active.slide to set the active slide index. Here is how it goes.

// We use Proxy to include some kind of reactivity.
// By just changing active.slide, the DOM gets
// changed automatically, without the need to
// make the DOM changes within the event handlers.
const active = new Proxy(
  { slide: 0 },
  {
    set(obj, prop, value) {
      if (prop == "slide") {
        // If we click "prev" while on the first slide
        // then go to the last one.
        if (value < 0) {
          value = length - 1;
        }

        // If we click "next" while on the last slide
        // then go to the first one.
        if (value >= length) {
          value = 0;
        }

        // Make the appropriate DOM changes
        slidesContainer.style.setProperty("--slide", value);
        bullets[obj[prop]].classList.remove("active");
        bullets[value].classList.add("active");
      }

      // Actually set the active.slide prop to it's new value
      obj[prop] = value;
      return true;
    }
  }
);

As stated in the MDN website

The Proxy object allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties.

I give the Proxy a target object as the first argument, and a handler as the second argument. Into the handler there is a setter function. The first argument obj is the target object { slide: 0 }. The second argument prop is the property we are setting, in our case slide. And the third argument is the value we are setting to the property. Into the setter is where I put all the logic for calculating which slide is the one that should be showing, and making the appropriate DOM changes. We can see that the only DOM change that has to be done is to set the --active CSS variable the the appropriate active slide index, and to toggle the .active class on the corresponding bullet.

With the help of the JavaScript Proxy, I am able to separate concerns and add very simple click handlers at the .prev and .next buttons.

// Add the prev/next functionality to the buttons
prev.addEventListener("click", () => active.slide--);
next.addEventListener("click", () => active.slide++);

Here is the completed codepen.

https://codepen.io/istavros/pen/JjZGBpY

And finally here is another codepen. It's the same as the last one, but if you press space, it goes 3D to show how the elements are placed on top of each other, and how the "window" works.

https://codepen.io/istavros/pen/QWxvJwJ

I hope you liked the techniques I used to make this slideshow. I would love to hear better alternatives. I'm always up for learning something new.

Thanks for reading this far!

How to create a brand logo grid

Stavros Ioannidis — Sun, 30 Oct 2022 20:33:12 GMT

In this post I will demonstrate how to create a brand logo grid like the one below:

The tricky part of such a grid is the colored gap between the logo tiles.

The solution I came up with, I think is acceptable. I added a 1px box-shadow to the grid items, and I used the wrapper’s :after element to hide the "border" around the grid

.brand-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

  // this is the empty space where the lines will go
  gap: 1px;

  width: 100%;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    // Remove pointer events because
    // this element covers everything.
    pointer-events: none;

    // By using negative inset value
    // we make the :after pseudo-element
    // 2px larger than its parent.
    // This is because the lines that we want to hide,
    // overflow the container because they are shadows.
    inset: -2px;

    // this 3px box shadow will hide 
    // the overflown lines, and 1 more px.
    box-shadow: inset 0 0 0 3px #fff;
  }

}

.item {
  padding: 30px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px #ddd;
}

https://codepen.io/istavros/pen/JjZoeXW

Two ways to handle ltr/rtl on a page.

Stavros Ioannidis — Fri, 21 Oct 2022 20:23:30 GMT

When creating a multilingual web page you might need to handle languages written from right to left. This comes with some design issues.

First, you must add the dir attribute to your root () element. But the dir attribute alone cannot tackle everything. Sometimes you might have an image next to a paragraph, and a margin-left spacing them out. When you switch to the rtl language, you end up with a paragraph with a left margin, and an image stuck on the right side of it.

I will show you two ways that I have used to solve this problem.

Using CSS variables

The first way I thought was using CSS variables and some calculations to play with the left margin.

html[dir="ltr"] {
  --ltr: 1;
  --rtl: 0;
}

html[dir="rtl"] {
  --ltr: 0;
  --rtl: 1;
}

p {
  margin-left: calc(var(--ltr) * 20px);
  margin-right: calc(var(--rtl) * 20px);
}

What I do here is assign a number (0, 1) to the "boolean" variables --ltr and --rtl, declaring which direction is enabled. When the dir changes, the variables swap values. Then I calculate the left and right margins by multiplying the variables with the desired pixel value. So in ltr the left margin will be 1 × 20px = 20px, and the right margin will be 0 × 20px = 0. When we change to rtl the margins will swap values.

https://codepen.io/istavros/pen/zYjgPQe

Using modern CSS

This is a clever way of setting the margins based on a boolean enabled/disabled variable. But, there is a better way by using modern CSS.

p {
  margin-inline-start: 20px;
}

And that's it. Way less code, and more elegant. It actually instructs the browser to add a 20px margin at the "start" of the x-axis. The start of the x-axis is relative to the direction set by the dir attribute. So in this case the browser will set a 20px left margin on ltr direction, and a 20px right margin on rtl direction.

https://codepen.io/istavros/pen/OJZKQOq

Work needs meaning

Stavros Ioannidis — Fri, 14 Oct 2022 22:23:12 GMT

Hello again. In this post, I'm going to share a thought I had.

For the last six months, I've been struggling with not-so-interesting work. It was some things that I had to do that were so boring I almost believed that I didn't like my job anymore. I was in a downward spiral of thoughts about quitting and trying to follow a different career. My spirit had died as I had lost every drop of creativity that programming usually has.

In all that I had some people telling me that if I don’t enjoy what I do then it’s time to move on and do something else. Easier said than done though when you have a family depending on you.

So I started listening to podcasts and watching YouTube videos about productivity, happiness, and well-being.

I got from this that people need some kind of meaning, ownership, and creativity in their work, to enjoy It and feel fulfilled.

After every YouTube video or podcast episode I watched or listened to, I felt motivated to continue the hard work and finish my assignments.

Inspired by these people I decided that I had to “create” meaning, ownership, and creativity in every task I had to do, to sustain my mental peace. So I started adding small touches of creative work within the boring stuff. And this kept me going for six months.

Although this tactic was helping, I was still feeling that I didn’t like this job anymore.

This was until I sat my ass down for a weekend and remade an old application that we use in the company. This time I used newer, better, and more exciting technologies. It was as if a light came upon me. I started enjoying coding again. I found my lost creativity, my inner peace. I will not get paid extra for the work I put in on the weekend, but I enjoyed every second of it and this is what matters most.

When I showed the remade application to my boss and colleagues, they all liked it a lot. They also said that they could see that I made it with love and attention to detail. From now on we will be using this new version of the application that I made.

I found meaning in this because it’s an essential application for the company’s goals.

I felt I owned the application because I created everything myself and made the necessary decisions. I felt I had ownership of the application because it is I who will continue supporting and developing it.

I found creativity in every decision I made and thought about how it should work.

Sometimes we have to do boring tasks in life (or work). Yet, we should try to find, or create, some interest within the tasks. When I had to code a boring redesign I tried hard to come up with something interesting to add to it. I ended up creating the interactive gradient scrollbar that I wrote about in a previous post. This was the little touch of creativity that I needed to get me going and finish the task.

Thank you, and have a great day!

How to choose between grid and flex for a listing page

Stavros Ioannidis — Fri, 22 Jul 2022 16:06:37 GMT

When we need to show a list of items, such as products in a product list page, we have the following two css alternatives:

display: grid
display: flex

I will demonstrate both here and I will explain why I choose one over the other.

Usually, we have a container around our content that limits its width to a maximum to keep it readable on large screens. In the demonstrations below I will use a container with a max-width of 400px and an Item width of 100px with a 10px gap between items. This means each row will fit 3 items (3x100px + 2x10px = 320px), and 80px will remain empty. We also need the items to be centered within the container.

Using flex

When using flex to create a grid-like structure we have to use flex-wrap. We make sure that the dimensions of our items are ok using flex-shink and flex-grow if needed. We need items to be centered so we will use justify-content: center. Here is a demo:

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

https://codepen.io/istavros/pen/JjLJNjj

We can see a problem here. The last row is not complete and the items are centered within this row. This doesn’t look like items in a grid. If we change to justify-content: flex-start everything will be on the left side, and all the available free space will be on the right. Not pretty.

Using grid

By using grid we don’t need to define something like flex-wrap but we need to define the columns' widths. In our example, we know that each item needs to be 100px wide, and the number of columns should vary depending on the width of the container. To achieve this we will use the repeat function with the auto-fill value. To center the items in the container we will use again justify-content: center.

Here is the demo:

ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    justify-content: center;
    gap: 10px;
}

https://codepen.io/istavros/pen/YzaQVrV

The difference here is that although we used justify-content: center the last row is left aligned and the items are kept within the grid lines. This is much better than flex for this case.

A grid with justify-content: center centers the whole grid, while a flex container with justify-content: center centers the individual items.

Conclusion

With our demonstrations here we showed that when you’re making a listing page it’s better to use display: grid rather than display: flex. Flex has its advantages in different use cases.

If you enjoyed this post, please share.

How to create an interactive gradient scrollbar

Stavros Ioannidis — Thu, 21 Jul 2022 08:06:57 GMT

I was recently working on implementing a new design for a project. The site branding had two main colors, and, even though it was not in the design, I thought I would change the scrollbar background to the primary branding color.

It was better than the default browser scrollbar, but I had the idea to make it even better. So I decided to make a gradient scrollbar using the two branding colors. But having the scroll thumb with this gradient background wasn’t enough either… so I decided to make it more interactive.

My Idea was as you scroll, the scroll thumb background should change, starting from the primary and ending with the secondary branding colors.

This is how I did it. This works only on WebKit browsers of course.

First lets see the default scrollbar

https://codepen.io/istavros/pen/ExEmXRL

I changed from that to only having a solid color scroll thumb

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 3px solid #fff;
}

https://codepen.io/istavros/pen/KKomqea?editors=0100

Next step is to make the gradient. I set the gradient background to the scroll track.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}

https://codepen.io/istavros/pen/bGvWRmp?editors=0100

Then I tried to create a scroll thumb with a “hole” to reveal the gradient background.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 0 10px 10px 0;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
}

https://codepen.io/istavros/pen/PoRmjXq?editors=1100

And now the only thing missing is to hide the rest of the scroll track. I used a really large outline on the scroll thumb for that.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
  outline: 99999px solid #fff;
}

And this is the final result

https://codepen.io/istavros/pen/oNqWeLK?editors=1100

If you liked this small tip, share it with your friends…

Messing with the global user in Drupal 7

Stavros Ioannidis — Sat, 15 Apr 2017 19:49:21 GMT

There are times when you need to run some code as a specific user. You might want to send an email and the content is subject to the receiving users’ permissions on the site. Sometimes you might need to run some code as user 1 and not the logged-in user.

In situations like these, you need to change the global user to the user you want to impersonate.

It’s not that difficult to do so. Here is an example.

global $user;  
$user = user_load(1);

// your code here.

This example is soooo wrong. Ok, you change the global user object to user 1 so now the logged-in user has super admin access to your site…

A better example is the following

global $user;  
$old\_user = clone $user;  
$user = user_load(1);

// your code here.

$user = $old_user;

Ok, that’s better. We change the user to user 1, we do what we have to do, and then we reassign the old user to the global user object. Everything is back to where it was supposed to be and we are all happy.

But we are humans and we make mistakes. And if these mistakes are made in our code we might end up with exceptions thrown. So let’s take a more careful look at the example above. We have cloned the logged-in user object and kept it in a variable. Then we assigned user 1 to the global user. Then we run my code and finally, we reassigned the cloned user object to the global one. Oh, wait… what if our code running as user 1 throws an exception. The global user will not be reassigned the right value and we are stuck with a user logged in as user 1! THAT IS BAD! If the user realizes what’s happening they might just hack the hell out of our site with our permission.

So let's refactor the example a bit to make it “immune” to exceptions.

global $user;  
$old\_user = clone $user;

try {  
  $user = user\_load(1);  
  // your code here.

}

finally {  
  $user = $old\_user;  
}

Phew… now it looks ok. We wrapped our code in a try-finally block so even if our code throws an exception it will return the global user to the right one in the ‘finally’ part.

But there is another vulnerability here. Did you find it?

Me neither. A user of the site may find it though.

It doesn’t have to do exactly with impersonating a user. In some parts of your code, you may need to print information for a specific user. For example, we had a blog and we want to print the name of a post author with a link to a page with this author’s posts. So we go about it like this…

$user = user_load(<user_id>);  
print $user->name;

Cool, we printed the name of our user on the blog post page. But what if within the same scope someone (or maybe us) had used the global user the same way we used in the examples above

global $user;

We wanted to just print a user’s name but we also changed the global user to the user who authored the blog post. What if user 1 had authored this blog post. Now anyone reading this post would have ‘root’ access to our site. THIS IS BAD!

The solution to this problem for me is to use $GLOBALS['user'] instead of global $user; whenever we want to use the global user in any way.

If we want to make it even more robust we should disable saving session data whenever we change the global user like so

$old_user = clone $GLOBALS['user'];  
$old_session = drupal_save_session();

try {  
  drupal_save_session(FALSE);  
  $GLOBALS['user'] = user_load(1);  
  // our code  
}  
finally {  
  $GLOBALS['user'] = $old_user;  
  drupal_save_session($old_session);  
}

Nice, now we can be sure that the global user will not be affected by whatever we do in there.

But it’s too much code to write every time we need to impersonate a user. Let's make it a function.


function run_as_user($tmp_user, $function) {
  if (!is_callable($function)) {
    return FALSE;
  }
  $args = func_get_args();
  array_shift($args); // remove $tmp_user
  array_shift($args); // remove $function 

  $old_user = clone $GLOBALS['user'];
  $old_session = drupal_save_session();
  try {
    drupal_save_session(FALSE);
    $GLOBALS['user'] = $tmp_user;
    return call_user_func_array($function, $args);
  }
  finally {
    $GLOBALS['user'] = $old_user;
    drupal_save_session($old_session);
  }
  return FALSE;
}

function run_as_user_by_id($uid, $function) {
  if ($tmp_user = user_load($uid)) {
    $args = func_get_args();
    $args[0] = $tmp_user;
    return call_user_func_array('run_as_user', $args);
  }

  return FALSE;
}

function run_as_user_by_mail($email, $function) {
  if ($tmp_user = user_load_by_mail($email)) {
    $args = func_get_args();
    $args[0] = $tmp_user;
    return call_user_func_array('run_as_user', $args);
  }

  return FALSE;
}

function run_as_user_by_name($name, $function) {
  if ($tmp_user = user_load_by_name($name)) {
    $args = func_get_args();
    $args[0] = $tmp_user;
    return call_user_func_array('run_as_user', $args);
  }

  return FALSE;
}

// EXAMPLE
run_as_user_by_id(1, function() {
  // code to execute as user 1
});

Some things are happening here.

First, we create the function run_as_user which takes a user object and a callable as arguments. Any extra arguments will be passed to the callable as its arguments (using call_user_func_array).

Then we create three utility functions so that we can impersonate a user by id, email, and name.

At the end, we can see a usage example.

Conclusion

Messing with the global user might be very dangerous on a drupal site. It could make an anonymous user super administrator. My suggestion is not to use global $user syntax as someone might use the user variable for other stuff. Instead, we should use the $GLOBALS['user'] to refer to the global user object. I also gave a code snippet I use for safe user impersonation within my projects.

Do you think my code is not safe enough, or just stupid? Write a comment to put me in my place.