DEV Community: tsanak

AutoTyping.js: create animated typing effect

tsanak — Sun, 05 Jul 2020 18:14:59 +0000

AutoTyping.js

AutoTyping.js is a lightweight (1.86 kb) and easy to use library that helps you create animated typing effects.

It is a very small project that I finished in this weekend, so it is not super polished or feature rich.

Learn more about it on the Github repo or at it's website.

See it in action

How to use

Grab the minified version of the library from dist/autotyping.js
Create the html element:
```
<span id="selector"></span>
```

Create a new instance of the library:

const typing = new AutoTyping('#selector', [
    'array of',
    'text',
    'lorem ipusm'
]);

Start the typing effect
```
typing.start();
```

Options

There are a few options to customize the behavior of the library and you can find them in Github repo.

Some of them are the following:

typeSpeed (Integer) in ms, default: 150
Controls the writing speed of each character.
deleteSpeed (Integer) in ms, default: 150
Controls how fast/slow each character is deleted.
waitBeforeDelete (Integer) in ms, default: 1000
Controls the waiting time before deleting a word.
waitBetweenWords (Integer) in ms, default: 1000
Controls the waiting time before writing the next word.

Examples in Codepen

Outro

Hope you found this useful, I will gladly accept any comment (improvement, bug, opinion) about this in the comments below 🙂.

Create a Simple 0-dependency Toast (part 2) - Class-based

tsanak — Sun, 29 Mar 2020 19:51:20 +0000

Intro

Please read the first of this two part mini-series to get a better understanding of this post 🙂.

A few minutes after I published the first post on how to create a simple Toast, I started thinking about ways to make it better and easier to use.

After some thinking, I decided that the best way to easily manage and create Toasts is through classes. So I created a class-based Toast, that accepts a few options to customize the functionality.

These options are the following:

title: (string) What the toast will "say" [default: '']
timer: (int) How long before the Toast auto expires in ms [default: 2000]
alwaysOn: (boolean) Overrides the timer option and the Toast doesn't auto expire [default: false]
dismiss: (boolean) Shows an 'x' icon, when user clicks the icon => the Toast closes [default: false]

How it works

First the styles are the following:

.toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  background-color: #213cfd;
  background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  -webkit-transition: bottom 350ms;
  -moz-transition: bottom 350ms;
  -o-transition: bottom 350ms;
  -ms-transition: bottom 350ms;
  transition: bottom 350ms;
}

.toast.active {
  bottom: 20px;
}

.toast--dismiss {
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 12px;
    cursor: pointer;
}

You can customize the css to fit your needs: change the background color of the Toast, the position etc.

The javascript class:

class Toast {
    constructor(title = '', {
        timer = 2000,
        alwaysOn = false,
        dismiss = false
      } = {}) {
        this.autoTimer = null;
        let self = this;
        /* Close all previous Toasts */
        document.querySelectorAll('.toast').forEach(el => {
            el.classList.remove('active');
        })
        this.title = title;
        /* Check if timer is valid integer */
        let ms = parseInt(timer);
        if(isNaN(ms) || ms < 1) {
            ms = 2000;
        }
        this.toast_el = document.createElement('div');
        this.toast_el.classList.add('toast');
        this.toast_el.innerText = title;

        if(dismiss) {
            let toast_dismiss = document.createElement('button');
            toast_dismiss.setAttribute('type', 'button');
            toast_dismiss.classList.add('toast--dismiss');
            toast_dismiss.innerHTML = "&#10006;";

            this.toast_el.appendChild(toast_dismiss);

            toast_dismiss.addEventListener('click', () => {
                /* Remove Toast when user click on 'x' button */
                self.toast_el.classList.remove('active');
                setTimeout(function() {
                    document.querySelector('body').removeChild(self.toast_el);
                }, 100);
                clearTimeout(self.autoTimer);
            });
        }
        /* Append Toast element to body */
        document.querySelector('body').appendChild(this.toast_el);
        setTimeout(function() {
            self.toast_el.classList.add('active');
        }, 100);

        if(!alwaysOn) {
            /* Auto expire the Toast after the specified ms */
            this.autoTimer = setTimeout(function() {
                self.toast_el.classList.remove('active');

                setTimeout(function() {
                    document.querySelector('body').removeChild(self.toast_el);
                }, 100);
            }, ms);
        }
    }
}

Examples

1. Classic Toast

document.querySelector('#btn-show-toast').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a classic toast! 👏", {
        timer: 2000
    });
});

2. Dismissable Toast with timer

document.querySelector('#btn-show-toast--dismiss').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a dismissable toast with auto expire! 👏", {
        timer: 2000,
        dismiss: true
    });
});

3. Always-on, dismissable Toast

document.querySelector('#btn-show-toast--dismiss--no-timer').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a dismissable toast without timer! 👏", {
        dismiss: true,
        alwaysOn: true
    });
});

Demo with all the code

Outro

🎉 Thank you for reading through all the post! 🎉

If you have any questions or feedback, let me know in the comments 🗨.

Create a Simple 0-dependency Toast

tsanak — Sun, 29 Mar 2020 13:54:22 +0000

What is a Toast?

Toast notification is popup type of message notification that auto expires. It usually carries small amount of information for the user and it can be used for feedback to the user's action.

An example of a Toast is the following:

The user clicks on the Copy to Clipboard button and the Toast:

informs the user that the text was copied to his/her clipboard
disappears after a short amount of time (e.g. 2 seconds)

How to create it

Sneak peek:

I will begin with the structure of the toast



<div id="toast"></div>

Next step is to add some css to make it beautiful



#toast {
  position: fixed;
  bottom: 20px;
  width: 100%;
  max-width: 300px;
  background-color: #213cfd;
  background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  user-select: none;
}

How it looks now:

Slide animation



#toast {
  bottom: -50px;
  -webkit-transition: bottom 350ms;
  -moz-transition: bottom 350ms;
  -o-transition: bottom 350ms;
  -ms-transition: bottom 350ms;
  transition: bottom 350ms;
}

#toast.active {
  bottom: 20px;
}

The above css code accomplishes the slide animation. The trick is to use the transition css property on the bottom and animate the change for 350ms.

Now I will add a little Javascript code to toggle the .active class on the #toast element.



document.addEventListener("DOMContentLoaded", () => {
  let hasTime = null;
  /* When the user clicks on a button => show the Toast */
  document.querySelector('#btn-show-toast').addEventListener('click', (e) => {
    const toaster = document.querySelector('#toast');
    /* Add text to the Toast */
    toaster.innerText = "✔️ This is a toast! 👏";
    /* 
    by adding the .active class the Toast 
    will slide up to the user's screen 
    */
    toaster.classList.add('active');
    if(hasTime != null) {
      clearTimeout(hasTime);
    }
    /* After two seconds, close the Toast (slide-down) */
    hasTime = setTimeout(function() {
      toaster.classList.remove('active');
    }, 2000);
  });
});

In order for the slide animation to be usable in this demo, I will need to insert a button in the html code, before the Toast div.



  <button id="btn-show-toast" type="button">👀 Show Toast</button>
  <div id="toast"></div>

Final result:

Demo with all the code

Wrapping up

🎉 Thank you for reading through all the post! 🎉

I hope you found something useful in it.

If you have any questions or feedback, let me know in the comments 🗨.

Recreate: Spotify (part 5) - Bottom Bar

tsanak — Sat, 21 Mar 2020 14:21:42 +0000

Intro

Welcome back to the Recreate Spotify Series! In this part I will recreate a portion of the bottom bar!

What I want to recreate:

If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

and a closer look 👀:

The starting point 🏁

As always, the first step is to split the design to smaller chunks.

Looking at the bottom bar of the Spotify I can see 3 different areas.

In this part of the series I will focus in the area marked with the number 1.

After splitting the design I can see 3 main areas, marked in the image below:

One extra step

Before starting to code it is a good idea to hover & click the elements in the design to see what happens. Maybe an event, such as hovering over an item, triggers a new element to appear or changes the color of an item.

After hovering over the area I see some minor changes in the design:

These are the following:

Hovering over the image, makes a new element visible (the arrow circle)
Text hover changes color to white (#fff) and "underlines" the text. (I will explain later why the "underlines" is in quotes 🤔 )
Icon hover changes the color to white (#fff) again.

Code 💻

If you want to follow along, you can find the code from the part 4 (Home page) of the series in this Github gist.

Structure

I will start by adding the html code for the bottom bar right after the ending of the </main> tag.

</main>
<div class="bottom-bar">
    <div class="bottom-bar--left-col">
        <div class="bottom-bar--left-col--song">
            <div class="bottom-bar--left-col--song--img">
                <div class="bottom-bar--left-col--song--img--pull-up">
                    <i class='lni lni-chevron-up'></i>
                </div>
                <img src="http://via.placeholder.com/150x150" alt="">
            </div>
            <div class="bottom-bar--left-col--song--details">
                <div class="bottom-bar--left-col--song--details--wrapper">
                    <a href="#" class="bottom-bar--left-col--song--details--title">Song Title</a>
                </div>
                <div class="bottom-bar--left-col--song--details--wrapper">
                    <a href="#" class="bottom-bar--left-col--song--details--artist">Artist</a>
                </div>
            </div>
        </div>
        <div class="bottom-bar--left-col--actions">
            <button class="bottom-bar--left-col--actions--favorite">
                <i class='lni lni-heart'></i>
            </button>
            <button class="bottom-bar--left-col--actions--pip">
                <i class="pip-icon"></i>
            </button>
        </div>
    </div>
</div>

This is how the section looks without any added styles:

Yep, that's right! You can't even see it without any styling 😅

Styling

Adding the basic styles so that the bottom bar is correctly positioned and is visible.

main {
    max-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */
    min-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */
}

.sidebar {
    height: calc(100% - 90px); /* 90px is the height of the bottom bar */
}

.bottom-bar {
    width: 100%;
    height: 90px;
    border-top: 1px solid #000;
    background-color: rgba(24, 24, 24, 1);
    z-index: 1;
    position: absolute;
    bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
}

I know it is not looking the best right now, but at least it's visible.

First things first, I need to contain the elements inside the bottom bar and not let them overflow it.

.bottom-bar--left-col {
    display: flex;
    align-items: center;
    position: relative;
    transition: left 300ms;
    left: 0;
}

.bottom-bar--left-col--song {
    display: flex;
}

.bottom-bar--left-col--song--img img {
    height: 56px;
    width: 56px;
}

It looks much better now!

Time to focus on the actual styling of the elements. I will start working on the image and the hoverable arrow icon.

.bottom-bar--left-col--song--img img {
    height: 56px;
    width: 56px;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2);
}

.bottom-bar--left-col--song--img {
    margin-right: 14px;
    display: flex;
    position: relative;
}

.bottom-bar--left-col--song--img--pull-up {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #000;
    width: 24px;
    height: 24px;
    opacity: 0.7;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #b3b3b3;
}

.bottom-bar--left-col--song--img--pull-up:hover {
    /* Hovering over the arrow icon makes it bigger and brighter */
    opacity: 0.8;
    transform: scale(1.1);
    color: #fff;
}

.bottom-bar--left-col--song--img:hover .bottom-bar--left-col--song--img--pull-up {
    /* Hovering over the image reveals the arrow icon */
    display: flex;
}

Now the image part of the bottom bar is finished and I can move on the the text on the right side of the image.

.bottom-bar--left-col--song--details {
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin-right: 14px;
}

.bottom-bar--left-col--song--details--wrapper {
    display: block;
    line-height: 17px;
}

.bottom-bar--left-col--song--details a {
    display: inline;
    text-decoration: none;
    color: #fff;
    letter-spacing: 0;
}

.bottom-bar--left-col--song--details a:hover {
    color: #fff;
    /* Border-bottom instead of text-decoration: underline */
    border-bottom: 1px solid #fff;
}

.bottom-bar--left-col--song--details--title {
    font-size: 0.875rem;
}

.bottom-bar--left-col--song--details--artist {
    font-size: 0.75rem;
}

When hovering over the text "Song Title" we get the underline effect.

⚔ Text-decoration: underline vs border-bottom ("underline")

Now remember when I talked about the Text hover "underline" and why the "underline" was in quotes?

Let's see the Spotify hover text "underline":

Now let's see how the text-decoration: underline looks like on the "Song Title":

.bottom-bar--left-col--song--details a:hover {
    text-decoration: underline;
}

As you can see the difference between text-decoration: underline; and border-bottom is subtle, but it does exist.

Now let's begin working with the icons on the right side.

I will start with the heart icon, since this one is available in the LineIcons library.

.bottom-bar--left-col--actions {
    display: flex;
    align-items: center;
}

.bottom-bar--left-col--actions--favorite {
    background: transparent;
    border: 0;
    outline: 0;
    color: #b3b3b3;
    font-size: 1rem;
    margin-right: 10px;
}

.bottom-bar--left-col--actions--favorite:hover {
    color: #fff;
}

When hovering over the icon:

As you can see I still have to style the last icon, which is the Picture in Picture (PiP) icon.

Boy am I in a pickle, I couldn't find any icon resembling the Picture in Picture icon in the LineIcons library.

Since I can't find the icon, I have 3 options:

Use a png of an icon from some other site,
Use one more icon library that contains the PiP icon
Build the icon with css

Well, I didn't want to use a png for icon, because it is a very simple icon, and I didn't want to bloat the project with 2 icon libraries. So, I went with option 3, which is good since this series is targeted for beginners.

/* Reset the button's default styles  */
.bottom-bar--left-col--actions--pip {
    background: transparent;
    border: 0;
    outline: 0;
    position: relative;
    /* Width and height will be the actual size of the PiP icon */
    width: 16px;
    height: 13px;
    padding: 0;
}

/* The outside of the PiP icon, the Rectangle part of the icon */
.pip-icon {
    border: 1px solid;
    border-bottom: 2px solid;
    border-radius: 1px;
    border-color: #b3b3b3;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/* 
    The small rectangle of the PiP icon 
    that is on filled and is on the bottom right corner of the icon 
*/
.pip-icon:before {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    height: 3px;
    width: 5px;
    background: #b3b3b3;
    border-radius: 1px;
}

.bottom-bar--left-col--actions--pip:hover .pip-icon {
    border-color: #fff;
}

.bottom-bar--left-col--actions--pip:hover .pip-icon:before {
    background: #fff;
}

When the user hovers over the PiP icon:

That is the last part that I will add to this section of the series. Now let's have a look at the result:

And a closer look at the bottom bar 👀:

Conclusion

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments 🗨.

For the next part of the series I will create rest of the bottom bar. You can see it in this image:

If you want to follow along, you can find the code of the series in these Gists:

Recreate: Spotify (part 4) - Home page

tsanak — Sun, 15 Mar 2020 19:01:05 +0000

Intro

Welcome back to the Recreate Spotify Series! In this part I will recreate the main section of the homepage.

What I want to recreate:

If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

and a closer look 👀:

The starting point 🏁

As always, the first step is to split the design to smaller chunks. Looking at the main section of the home page, I mark all the new components.

You can see the new components marked in the picture below:

Code 💻

If you want to follow along, you can find the code from the part 3 (Search page) of the series in this Github gist and the part 2 (Header & Sidebar) in this Github gist.

Structure

I will start by adding the html code for the section head and section body. Inside the section head there could be the following items:

A title
A subtitle
A 'VIEW MORE' link

<main>
    <section class="section">
        <div class="section--header">
            <div class="section--header--left">
                <h2 class="title">Άκουσες πρόσφατα</h2>
            </div>
            <div class="section--header--right">
                <a href="#" class="section--header--right--more">VIEW ALL</a>
            </div>
        </div>
        <div class="section--body">
            <div class="section--body--item album--item">
                <div class="section--body--item--img">
                    <img src="http://via.placeholder.com/150x150" alt="">
                </div>
                <p class="section--body--item--title">Album name</p>
                <p class="section--body--item--subtitle"><a href="#">Artist name</a></p>
                <div class="section--body--item--play">
                    <i class="lni lni-play"></i>
                </div>
            </div>

            <div class="section--body--item artist--item">
                <div class="section--body--item--img">
                    <img src="http://via.placeholder.com/150x150" alt="">
                </div>
                <p class="section--body--item--title">LEX</p>
                <p class="section--body--item--subtitle">Artist</p>
                <div class="section--body--item--play">
                    <i class="lni lni-play"></i>
                </div>
            </div>
        </div>
    </section>
</main>

This is how the section looks without any added styles:

Styling

main .section .subtitle {
    color: #b3b3b3;
    font-size: 1rem;
    margin-top: -8px;
    font-weight: 100;
}

.section--header {
    display: flex;
    justify-content: space-between;
}

a.section--header--right--more,
.section--body--item--subtitle,
.section--body--item--subtitle a {
    color: #b3b3b3;
    font-size: 0.8rem;
    text-decoration: none;
}

a.section--header--right--more:hover,
.section--body--item--subtitle a:hover {
    border-bottom: 1px solid #b3b3b3;
}

a.section--header--right--more {
    font-weight: 700;
    letter-spacing: 1.35px;
}

After applying the above styles the section now looks like the image below

Now I need to add the styles for the section body, one for the album card and one for the artist card.

.section--body--item {
    width: 165px;
    height: 240px;
    background-color: rgb(38, 38, 38);
}

.section--body--item.album--item,
.section--body--item.artist--item {
    padding: 20px;
    cursor: pointer;
}

.section--body--item .section--body--item--img {
    width: 125px;
    height: 125px;
    margin: 0 auto;
}

.section--body--item .section--body--item--img img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2);
}

.section--body--item--title {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.section--body--item--subtitle {
    margin: 0;
    margin-top: 1px;
}

.section--body--item.artist--item .section--body--item--img img {
    border-radius: 50%;
}

.section--body--item--play {
    display: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #1db954;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    right: 15px;
    box-shadow: 0px 0px 8px 8px rgb(37, 37, 37);
    cursor: default;
}

.section--body--item--play:hover,
.section--body--item--play.active {
    transform: scale(1.05);
}

.section--body--item:hover .section--body--item--play,
.section--body--item--play.active {
    display: flex;
}

After applying the above styles, the page looks like this:

The last step is to add some javascript code to toggle the Play/Pause ( ⏯️ ) icon. The functionality that I want to achieve is the following:

When the user clicks the 'Play' ( ▶️ ) button:

the icon should change to 'Pause' ( ⏸️ ) and it should be always visible.
all the previous 'Pause' ( ⏸️ ) buttons should change to Play ( ▶️ )

When the user click the 'Pause' ( ⏸️ ) button:

the icon should change to 'Play' ( ▶️ )

const _play_pause_els = document.querySelectorAll('.section--body--item--play');
/* Get all the 'Play' buttons */
_play_pause_els.forEach(_el => {
    /* When the user clicks the button */
    _el.addEventListener('click', (e) => {
        /* Get all the play buttons 
            1. remove the 'active' class 
            2. Change the 'pause' icon to the 'play' icon
        */
        _play_pause_els.forEach(_el2 => {
            if(_el != _el2) {
                _el2.classList.remove('active');
                const _icon_el2 = _el2.querySelector('i');

                if(_icon_el2) {
                    _icon_el2.classList.remove('lni-pause')
                    _icon_el2.classList.add('lni-play');
                }
            }
        });

        _el.classList.toggle('active');

        const _icon_el = _el.querySelector('i');
        if(_icon_el) {
        /* Toggle the icon to 'pause' or 'play' */
            if(_icon_el) {
                if(_el.classList.contains('active')) {
                    _icon_el.classList.remove('lni-play');
                    _icon_el.classList.add('lni-pause');
                } else {
                    _icon_el.classList.remove('lni-pause')
                    _icon_el.classList.add('lni-play');
                }
            }
        }
    });
});

A close look to the section body cards with the added functionality:

And how the whole page looks:

Conclusion

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments 🗨.

For the next part of the series I will create the bottom bar of the main layout. You can see it in this image:

If you want to follow along, you can find the code of the series in these Gists:

Recreate: Spotify (part 3) - Search page

tsanak — Thu, 05 Mar 2020 20:13:56 +0000

Intro

Welcome back to the Recreate Spotify Series! In this part I will recreate the search page of the open.spotify.com.

What I want to recreate:

1. Spotify Search Page

If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

2. Recreated: Spotify Search Page

The starting point

As always, the first step is to split the design to smaller chunks. Looking at the search page, I mark all the new components.

You can see the new components marked in the picture below:

3. Search page with main areas marked

Starting from the top of the page and going to the bottom I will recreate each marked element.

Code 💻

If you want to follow along, you can find the code from the part 2 of the series in this Github gist.

The search page is a different than the Home page, so I will create a new html file named search.html. The new file will have all the code from the part 2 of the series but I will remove the contents from the main element.

The search input

The first change is the search input on the header (top bar).

A closer look at the search input:

4. Search input

When the user writes something inside the input the 'X' icon appears.

5. Search input with 'X' icon

Clicking the 'X' icon deletes the text from the input and the icon disappears.

Structure

I will start with modifying the current header element and add the html for the search input inside the div with the class .header--actions.

<div class="header--search input-group has-left-icon has-right-icon can-delete">
    <span class="left-icon lni lni-search"></span>

    <input type="text" id="search" name="search" class="input" placeholder="Αναζητήστε καλλιτέχνες, τραγούδια ή podcast">

    <span class="right-icon clear--search lni lni-close"></span>
</div>

This is how the header looks with the newly added search input:

6. Recreated Search input without styles

Styling

It is a good start, but I need to style it and make it interactive.

.header--actions {
    display: flex;
    align-items: center;
}

.header--search {
    margin-left: 25px;
    min-width: 360px;
}

.input-group {
    position: relative;
}

.input-group .left-icon {
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 0;
    color: #333;
    font-size: 1.375rem;
    height: 40px;
    line-height: 40px;
}

.input {
    margin: 0;
    border: 0;
    position: relative;
    z-index: 1;
    height: 40px;
    border-radius: 25px;
    width: 100%;
    outline: 0;
}

.input-group.has-left-icon .input {
    padding-left: 50px;
}

.input-group.has-right-icon .input {
    padding-right: 50px;
}

.input-group .right-icon {
    position: absolute;
    z-index: 2;
    right: 15px;
    color: #333;
    font-size: 0.9375rem;
    height: 40px;
    line-height: 40px;
}
/*
toggling the z-index =>
hides/shows the X icon in the search input
*/
.input-group .right-icon.clear--search {
    z-index: 0;
}

7. Recreated Search input with styles

Interactivity

Now all I need to do is:

Toggle the 'X' icon whenever the user writes something in the search input.
Clear the search input, when the user clicks the 'X' icon.

Toggle the icon

/* Grab all the inputs that can be deleted from the document */
const _input_els = document.querySelectorAll('.input-group.can-delete input');
_input_els.forEach(_el => {
    /* When the user writes something on the input */
    _el.addEventListener('input', (e) => {
        const value = _el.value;
        /* Grab the nearest 'X' icon */
        const _clear_icon_el = _el.parentNode.querySelector('.clear--search');
        if(value == '') {
        /* Hide 'X' icon */
            _clear_icon_el.style.zIndex = '0';
        } else {
        /* Show 'X' icon */
            _clear_icon_el.style.zIndex = '2';
        }
    });
});

8. Toggle visibility of 'X' icon on input

Clear the input on click

/* Get all the 'X' icons */
const _clear_icon_els = document.querySelectorAll('.clear--search');
_clear_icon_els.forEach(_el => {
    /* Clicking the 'X' icon */
    _el.addEventListener('click', (e) => {
        const _clear_icon_el = e.target;
        /* Get the input */
        const _input_el = e.target.parentNode.querySelector('input');
        if(_input_el) {
            /* Clear the input and hide the 'X' icon */
            _input_el.value = '';
            _clear_icon_el.style.zIndex = '0';
        }
    });
})

9. Clear search input when 'X' icon is clicked

Category section

Moving on to the next marked area, you can see it in the image below.

10. Search Category Section

This section consists of:

a title
a container that contains the category cards

The category card consists of:

a title
an image

Category Card large

11. Category Card Large

Category Card small

12. Category Card Small

As you can see the two Category Cards look very similar. Because of their similarity, I will create one component for both of them.

The default component will be for the small Category Card and the large Category Card will be a variation of the small one.

I will add the below html code inside the main element of the page.

Structure

<!-- Section with large category cards -->
<section class="section">
    <h2 class="title">Τα κορυφαία σου είδη</h2>
    <div class="section--body">
        <div class="section--body--item section--body--item--lg category--item">
            <a href="#">
                <h3>Hip Hop</h3>
                <img src="http://via.placeholder.com/150x150" alt="">
            </a>
        </div>
        <div class="section--body--item section--body--item--lg category--item">
            <a href="#">
                <h3>Pop</h3>
                <img src="http://via.placeholder.com/150x150" alt="">
            </a>
        </div>
    </div>
</section>
<!-- Section with small category cards -->
<section class="section">
    <h2 class="title">Περιήγηση σε όλα</h2>
    <div class="section--body">
        <div class="section--body--item category--item">
            <a href="#">
                <h3>Podcast</h3>
                <img src="http://via.placeholder.com/150x150" alt="">
            </a>
        </div>

        <div class="section--body--item category--item" style="background-color: rgb(160, 195, 210);">
            <a href="#">
                <h3>Ειδικά για εσένα</h3>
                <img src="http://via.placeholder.com/150x150" alt="">
            </a>
        </div>

        <div class="section--body--item category--item" style="background-color: rgb(160, 195, 210);">
            <a href="#">
                <h3>Νέες Κυκλοφορίες</h3>
                <img src="http://via.placeholder.com/150x150" alt="">
            </a>
        </div>
    </div>
</section>

13. Search page category sections without styles

Styling

.section {
    margin-bottom: 35px;
}

.title {
    font-size: 1.75rem;
    margin-top: 0;
}

.section--body {
    display: flex;
    flex-wrap: wrap;
    margin-right: -16px;
    margin-bottom: -16px;
}

.section--body--item {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.category--item {
    width: 180px;
    height: 180px;
    background-color: rgb(245, 155, 35);
}

.category--item:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,212,255,0) 100%);
    z-index: -1;
}

.category--item a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.category--item a h3 {
    margin: 0;
    padding-top: 16px;
    padding-left: 16px;
}

.category--item img {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -5px;
    right: -18px;
    transform: rotate(25deg);
    z-index: 0;
    box-shadow: -1px 3px 2px 0px rgba(0,0,0,0.1);
}

.section--body--item.section--body--item--lg.category--item {
    width: 376px; /* (2 * normal section--item width) + 16px [margin-right: 16px] */
    height: 220px;
}

.section--body--item.section--body--item--lg.category--item img {
    width: 130px;
    height: 130px;
}

.section--body--item.section--body--item--lg.category--item a h3 {
    font-size: 2.5rem;
}

How the page looks after the styling of the Category Cards.

14. Search page category sections with styles

And how the whole page looks:

15. Recreated: Spotify Search Page

Conclusion

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments.

For the next part of the series I will create the main area of the Spotify Homepage, which you can see below

16. Spotify Homepage main area

You can find all the code from the series so far in this Github gist.

Recreate: Spotify (part 2)

tsanak — Wed, 26 Feb 2020 20:35:55 +0000

Intro

Hello fellow devs, this is the 2nd part of the Recreate Spotify series! In this part I will recreate the top bar / header of the open.spotify.com.

If you have not followed the series this is the UI that I want to recreate.

1. Spotify Homepage

As always, if you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

2. The result of part 2 of the series

The process

The first step is to browse the homepage and understand how the top bar 'reacts' to the user's (my) actions.

From my browsing I discovered that the top bar:

is always fixed on the top of the screen
has 2 buttons and a dropdown
when I scrolled the page, the background opacity changed gradually from transparent to opaque

Cutting the design to smaller pieces

After the browsing the next step is to cut the design to smaller pieces.

3. Cutting the top bar to smaller sections

Looking at the top bar we can see that it consists of 2 main components

Those are the following:

Arrow buttons
Dropdown

The Arrow buttons component has 2 children (which have the same design):

Left Arrow Button
Right Arrow Button

The Dropdown has a hidden component that was not visible previously, but can be seen in the following image:

4. Dropdown opened

Now looking at the Dropdown reveals its children:

The title (user icon, username, arrow down icon)
Dropdown options (the list with 2 list items)

Time to code 💻

If you want to follow along, you can find the code from the part 1 of the series in this Github gist

Arrow Buttons

Starting from the arrow buttons I add them inside the header div

<div class="header">
    <div class="header--buttons">
        <button class="header--button previous">
            <i class="lni-chevron-left"></i>
        </button>
        <button class="header--button next">
            <i class="lni-chevron-right"></i>
        </button>
    </div>
</div>

The output from the above code is the following:

5. Buttons added without styles

Now let's add some css to the arrow buttons:

.header--button {
    background: rgb(7, 7, 7);
    color: #fff;
    border: 0;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    cursor: pointer;
    outline: 0;
}

After the changes the buttons look like the Spotify header ones

6. Buttons with styles

I need to add some distance between them, cause they are too close together.

.header--button.previous {
    margin-right: 10px;
}

7. Distancing the buttons

Dropdown

Time to add the dropdown

<div class="dropdown">
    <button class="dropdown--button">
        <span class="user-icon">
            <i class="lni-user"></i>
        </span>
        <span class="text-bold">
            username
        </span>
        <span>
            <i class="lni-chevron-down"></i>
        </span>
    </button>
</div>

8. Dropdown without styles

Styling the dropdown

.dropdown {
    position: relative;
}

.dropdown--button {
    outline: 0;
    border: 0;
    color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(45, 45, 45);
    padding: 6px 14px 6px 8px;
    font-size: 0.75rem;
    line-height: 0.75rem;
    cursor: pointer;
    user-select: none;
    box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.5);
}

.header .dropdown--button span:not(:last-child) {
    margin-right: 10px;
}

.header .dropdown--button .user-icon {
    font-size: 1.3rem;
}

8. Dropdown with styles

Adding a hover effect on the dropdown and its items

9. Dropdown hover effect

The effect is subtle and is easy to achieve, I just change the color and background-color to a brighter one.

.dropdown--button:hover,
.dropdown.open .dropdown--content li:hover {
    background-color: rgb(49, 49, 49);
    color: #fff;
}

Now I will vertically align the items inside the top bar and then I will add space between the Arrows Buttons and the Dropdown.

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

If you want to sharpen your flexbox knowledge you can:

read the css-tricks guide
play a game called Flexbox Froggy

The above solution will make the div with the arrows go to the left of the top bar and the dropdown to the right.

10. Top bar with correct spacing

Dropdown items

Adding the dropdown items to the dropdown

<div class="dropdown">
    <button class="dropdown--button">
        <span class="user-icon">
            <i class="lni-user"></i>
        </span>
        <span class="text-bold">
            username
        </span>
        <span>
            <i class="lni-chevron-down"></i>
        </span>
    </button>
    <ul class="dropdown--content">
        <li>Account</li>
        <li>Logout</li>
    </ul>
</div>

11. Dropdown add items with no styles

We can see that it needs some work 😅.

Adding some basic styles to the dropdown--content

.dropdown--content {
    position: absolute;
    list-style: none;
    right: 0;
    margin: 10px 0 0 0;
    padding: 0;
    width: 160px;
    background-color: rgb(40, 40, 40);
    border-radius: 5px;
    box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.5);
}

12. Dropdown style the items container

and some styles to the dropdown list items

.dropdown .dropdown--content li {
    padding-left: 40px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgb(64, 64, 64);
    color: #b3b3b3;
    user-select: none;
    height: 40px;
    line-height: 40px;
}

.dropdown .dropdown--content li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dropdown .dropdown--content li:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

13. Dropdown style the items

I have finished with the Dropdown styles, but I need to add the toggling funcionality now.
Let's start with hiding the dropdown items.

.dropdown--content {
    display: none;
}

14. Dropdown hide the items

The next step is to create a class that is called open and when the dropdown has that class then its contents will show.

.dropdown.open .dropdown--content {
    display: block;
}

Having fun with Javascript

We add the below code just above the closing body tag.
I have added comments to explain what the code is doing.

Run the code when the page is loaded
When the user clicks on anywhere on the page then close all the open dropdowns
Get all the dropdowns on the page
Add a click event listener to run when the user clicks on a dropdown

a. Find the .dropdown element

b. toggle the .open class on the element

<script>
document.addEventListener("DOMContentLoaded",() => {
    /* Catch user click event on anywhere on the page */
    document.querySelector('body').addEventListener('click', e => {
        /* Close all the dropdowns */
        document.querySelectorAll('.dropdown.open').forEach(item => {
            item.classList.remove('open');
        });
    });

    /* Get all the dropdowns on the page */
    document.querySelectorAll('.dropdown').forEach(item => {
        /*
            When user clicks on a dropdown => then toggle the .open class.
            .open class is responsible for opening / closing a dropdown
        */
        item.addEventListener('click', e => {
            e.preventDefault();
            e.stopPropagation();
            /* Find the closest dropdown */
            const dropdown = e.target.closest('.dropdown');
            if(!dropdown) return;
            if (dropdown.classList.contains('open')) {
                dropdown.classList.remove('open');
            } else {
                dropdown.classList.add('open');
            }
        });
    });
});
</script>

With the above code I have achieved the following functionality:

15. Click dropdown to show the items

Overview of the page

16. Spotify top bar finished

Scroll to change the top bar's background opacity

First, I will delete the background-color property of the .header div.

The .header css styles:

.header {
    position: fixed;
    top: 0;
    left: 230px; /* sidebar width */
    right: 0;
    height: 60px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index:1;
}

Then, I will add the div element .header--bg inside the previous header element.
The code should look like the following:

<div class="header">
    <div class="header--bg"></div>
    <div class="header--buttons">
        <button class="header--button previous">
            <i class="lni-chevron-left"></i>
        </button>
        <button class="header--button next">
            <i class="lni-chevron-right"></i>
        </button>
    </div>
    <div class="dropdown">
        <button class="dropdown--button">
            <span class="user-icon">
                <i class="lni-user"></i>
            </span>
            <span class="text-bold">
                username
            </span>
            <span>
                <i class="lni-chevron-down"></i>
            </span>
        </button>
        <ul class="dropdown--content">
            <li>Account</li>
            <li>Logout</li>
        </ul>
    </div>
</div>

After that, I will give background-color to the new element and make it span the whole top bar's width.

.header--bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgb(18, 18, 18);
    z-index: 0;
}

For testing purposes I add a dummy div inside the main element and give it a height of 200vh.
The code should look like this:

<main>
    <div style="min-height: 200vh"></div>
</main>

Now all I need is to change the opacity of the header--bg element depending on the scroll position.

17. Header always transparent

Having fun with Javascript (again)

It's a simple script that will change the opacity of the header--bg element depending on the user's scrolling position.
If the user scrolls more than opaqueThreshold = 2 * (the height of the top bar) then make the background fully opaque (opacity: 1).
While the user aproaches the opaqueThreshold the opacity becomes bigger.

const headerHeight = document.querySelector('.header').offsetHeight;
const opaqueThreshold = (headerHeight * 2);
const _main_el = document.querySelector('main');
_main_el.addEventListener('scroll', (e) => {
    /*
        Get the vertical scroll position of the 'main' element
    */
    const scrollTop = _main_el.scrollTop;
    const _header_bg_el = document.querySelector('.header--bg');
    /*
        Set the opacity of the top bar
        depending on the current scroll position
        of the main element
    */
    const opacity = scrollTop / opaqueThreshold;
    if(opacity > 1) opacity = 1;
    _header_bg_el.style.opacity = opacity;
});

With the above code the area should look like the following:

    <script>
        document.addEventListener("DOMContentLoaded",() => {
            /* Catch user click event on anywhere on the page */
            document.querySelector('body').addEventListener('click', e => {
                /* Close all the dropdowns */
                document.querySelectorAll('.dropdown.open').forEach(item => {
                    item.classList.remove('open');
                });
            });

            /* Get all the dropdowns in the page */
            document.querySelectorAll('.dropdown').forEach(item => {
                /*
                    When user clicks on a dropdown => then toggle the .open class.
                    .open class is responsible for opening / closing a dropdown
                */
                item.addEventListener('click', e => {
                    e.preventDefault();
                    e.stopPropagation();
                    /* Find the closest dropdown */
                    const dropdown = e.target.closest('.dropdown');
                    if(!dropdown) return;
                    if (dropdown.classList.contains('open')) {
                        dropdown.classList.remove('open');
                    } else {
                        dropdown.classList.add('open');
                    }
                });
            });

            const headerHeight = document.querySelector('.header').offsetHeight;
            const opaqueThreshold = (headerHeight * 2);
            const _main_el = document.querySelector('main');
            _main_el.addEventListener('scroll', (e) => {
                /* Get the vertical scroll position of the 'main' element */
                const scrollTop = _main_el.scrollTop;
                const _header_bg_el = document.querySelector('.header--bg');
                /*
                    Set the opacity of the top bar
                    depending on the current scroll position
                    of the main element
                */
                const opacity = scrollTop / opaqueThreshold;
                if(opacity > 1) opacity = 1;
                _header_bg_el.style.opacity = opacity;
            });
        });

    </script>

The top bar now behaves similarly to the Spotify's web app and you can see it in the image below.

18. The result of part 2 of the series

Bonus 👏

Toggling the menu items on the left sidebar to 'active' when they are clicked.

/* Get all the left sidebar's menu items */
document.querySelectorAll('.main-menu .menu--item').forEach(item => {
    /*
        When user clicks on a menu item => then toggle the .active class.
        .active class is responsible for adding the background to the menu--item
    */
    item.addEventListener('click', e => {
        e.preventDefault();
        const menu_item = e.target.closest('.menu--item');
        if(!menu_item) return;
        /* Remove all the active menu--items  */
        document.querySelectorAll('.main-menu .menu--item').forEach(item => {
            item.classList.remove('active');
        });
        /* "Activate" the click menu--item */
        menu_item.classList.add('active');
    });
});

19. Header gradually changing the opacity from 0 to 1

Conclusion

That's all for the second part of the Recreate Spotify Series.

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments.

On the next part of the series I will create the Spotify Search page, which you can see below

20. Spotify Search page

You can find all the code from the series so far in this Github gist.

Recreate: Spotify (part 1)

tsanak — Thu, 20 Feb 2020 21:35:28 +0000

Hello 🌍

This is the first part of the Recreate Spotify series!
I will document all the steps that I take along the way, in the hope that someone will benefit from this process. If you think that I could do anything differently feel free to leave a comment 🙂.

Disclaimer

I will use the magic of the Inspect element for properties that I think do not truly matter in the context of these series. Examples are: the background colors, text colors and the scrollbar(the width).
Lastly, throughout these the font family will be Open Sans and all the icons will be LineIcons, if I do not find the exact icon then I will use one that is similar.

In these series I will recreate the open.spotify.com UI. You can see the UI in the following images:

1. Spotify Homepage

2. Spotify Search

3. Spotify Album

First steps

The first step is to go through the pages of the open.spotify.com web app.
My goal is to:

Understand which components are always visible (Left Sidebar).
Make a rough estimation of the total number of the components.
Understand the general look & feel of the app.

Cutting the design to smaller pieces

4. Main areas marked

Scanning through the application, I counted 4 main components that are always there

Left sidebar
Top bar
Main area that holds the data between every page
Music playback bar

Of course the main (parent) components consist of many children components.
For example: looking at the Left Sidebar, we can see that it has some children inside.

5. Sidebar with different elements selected

Those are the following:

Logo/Brand
Menu item that has one icon and text
Heading text
Menu item that has image and text
Separator
Install application link on the bottom

Coding the left sidebar💻

I start with creating a item that will be the left sidebar and just give a proper width and position to it.

html {
    font-size: 16px;
}

body {
    margin: 0;
    color: #fff;
}

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.35px;
}

.sidebar {
    background-color: rgba(4, 4, 4);
    position: fixed;
    height: 100%;
    width: 230px;
}

<nav class="sidebar"></nav>

6. Sidebar position at the left

I continue with creating the top bar and the main area. At this point I like to give the components different background colors and full height so that I can easily see if I misplaced something.

.sidebar {
    background-color: rgba(4, 4, 4);
    position: fixed;
    height: 100%;
    width: 230px;
}

main {
    min-height: 100vh;
    background: dodgerblue;
}

.header {
    position: fixed;
    top: 0;
    left: 230px; /* sidebar width */
    right: 0;
    height: 80px;
    background-color: rgb(18, 18, 18);
}

<nav class="sidebar"></nav>
<div class="header"></div>
<main></main>

7. Left sidebar, top bar & main area

Don't worry, I promise it will start looking like the Spotify web app.

Let's go back to the sidebar, but now we will progress a bit more. When we finish the sidebar will have all the different marked elements from the Image 5.

Further examination of the sidebar

Looking at the sidebar I try to think of all the paddings and the margins that I will need. For example it looks like there is a padding-left in the main element. If you look at the sidebar you can see that all the elements inside the start from the same point (horizontally).

So starting from the parent element I add the padding. Next I insert the logo of spotify in svg format and I create the html for the main menu items (Home, Browse, Library).

<nav class="sidebar">
    <div class="brand">
        <svg viewBox="0 0 1134 340" class="spotify-logo--text"><title>Spotify</title><path fill="currentColor" d="M8 171c0 92 76 168 168 168s168-76 168-168S268 4 176 4 8 79 8 171zm230 78c-39-24-89-30-147-17-14 2-16-18-4-20 64-15 118-8 162 19 11 7 0 24-11 18zm17-45c-45-28-114-36-167-20-17 5-23-21-7-25 61-18 136-9 188 23 14 9 0 31-14 22zM80 133c-17 6-28-23-9-30 59-18 159-15 221 22 17 9 1 37-17 27-54-32-144-35-195-19zm379 91c-17 0-33-6-47-20-1 0-1 1-1 1l-16 19c-1 1-1 2 0 3 18 16 40 24 64 24 34 0 55-19 55-47 0-24-15-37-50-46-29-7-34-12-34-22s10-16 23-16 25 5 39 15c0 0 1 1 2 1s1-1 1-1l14-20c1-1 1-1 0-2-16-13-35-20-56-20-31 0-53 19-53 46 0 29 20 38 52 46 28 6 32 12 32 22 0 11-10 17-25 17zm95-77v-13c0-1-1-2-2-2h-26c-1 0-2 1-2 2v147c0 1 1 2 2 2h26c1 0 2-1 2-2v-46c10 11 21 16 36 16 27 0 54-21 54-61s-27-60-54-60c-15 0-26 5-36 17zm30 78c-18 0-31-15-31-35s13-34 31-34 30 14 30 34-12 35-30 35zm68-34c0 34 27 60 62 60s62-27 62-61-26-60-61-60-63 27-63 61zm30-1c0-20 13-34 32-34s33 15 33 35-13 34-32 34-33-15-33-35zm140-58v-29c0-1 0-2-1-2h-26c-1 0-2 1-2 2v29h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v58c0 23 11 35 34 35 9 0 18-2 25-6 1 0 1-1 1-2v-21c0-1 0-2-1-2h-2c-5 3-11 4-16 4-8 0-12-4-12-12v-54h30c1 0 2-1 2-2v-22c0-1-1-2-2-2h-30zm129-3c0-11 4-15 13-15 5 0 10 0 15 2h1s1-1 1-2V93c0-1 0-2-1-2-5-2-12-3-22-3-24 0-36 14-36 39v5h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v89c0 1 1 2 2 2h26c1 0 1-1 1-2v-89h25l37 89c-4 9-8 11-14 11-5 0-10-1-15-4h-1l-1 1-9 19c0 1 0 3 1 3 9 5 17 7 27 7 19 0 30-9 39-33l45-116v-2c0-1-1-1-2-1h-27c-1 0-1 1-1 2l-28 78-30-78c0-1-1-2-2-2h-44v-3zm-83 3c-1 0-2 1-2 2v113c0 1 1 2 2 2h26c1 0 1-1 1-2V134c0-1 0-2-1-2h-26zm-6-33c0 10 9 19 19 19s18-9 18-19-8-18-18-18-19 8-19 18zm245 69c10 0 19-8 19-18s-9-18-19-18-18 8-18 18 8 18 18 18zm0-34c9 0 17 7 17 16s-8 16-17 16-16-7-16-16 7-16 16-16zm4 18c3-1 5-3 5-6 0-4-4-6-8-6h-8v19h4v-6h4l4 6h5zm-3-9c2 0 4 1 4 3s-2 3-4 3h-4v-6h4z"></path></svg>
    </div>
    <div class="menu">
        <div class="menu--item">
            <a href="#">
                <i class="lni-home"></i> <span class="menu--item--text">Home</span>
            </a>
        </div>
        <div class="menu--item">
            <a href="#">
                <i class="lni-search"></i> <span class="menu--item--text">Search</span>
            </a>
        </div>
        <div class="menu--item">
            <a href="#">
                <i class="lni-library"></i> <span class="menu--item--text">Library</span>
            </a>
        </div>
    </div>
    <p class="sidebar--header">PLAYLIST</p>
    <div class="menu menu-extra">
        <div class="menu--item">
            <a href="#">
                <img src="http://via.placeholder.com/32x32" alt="">
                <span class="menu--item--text">Create a playlist</span>
            </a>
        </div>
        <div class="menu--item">
            <a href="#">
                <img src="http://via.placeholder.com/32x32" alt="">
                <span class="menu--item--text">Songs that you like</span>
            </a>
        </div>
    </div>
    <div class="separator"></div>
    <div class="menu menu-playlist">
        <div class="menu--item">
            <a href="#">
                <span class="menu--item--text">Dev</span>
            </a>
        </div>
        <div class="menu--item">
            <a href="#">
                <span class="menu--item--text">That playlist that I really liked from the show</span>
            </a>
        </div>
    </div>
    <div class="sidebar--download-app">
        <a href="#">
            <i class="lni-arrow-down-circle"></i> <span>Install the app</span>
        </a>
    </div>
</nav>

Without any more css the sidebar looks like the image below:

8. Left sidebar without css

Now let’s think about the necessary styles.

the sidebar itself, needs a padding-left and a padding-top.
the logo needs to have specific width and a padding-bottom ( to create some distance between the logo and the menu items
the menu items need to have specific font-size, color and height. They also need an active state where a background is applied to them and a hover state where their color changes to a lighter one.

.sidebar {
    background-color: rgba(4, 4, 4);
    padding: 24px 24px 0 24px;
    position: fixed;
    height: 100%;
    width: 230px;
}

.sidebar .brand {
    padding-bottom: 18px;
}

.sidebar .brand svg {
    width: 131px;
}

.sidebar .menu .menu--item {
    font-size: 1.5rem;
    position: relative; /* Needed for the .active state to add the background */
}

.sidebar .menu.menu-extra .menu--item:not(:first-child) {
    margin-top: 5px;
}

.sidebar .menu .menu--item a,
.sidebar .sidebar--download-app a {
    text-decoration: none;
    color: #B3B3B3;
    width: 100%;
    display: flex;
    align-items: center;
    height: 40px;
    transition: all 350ms;
}

.sidebar .menu.menu-extra .menu--item a img {
    opacity: 0.7;
    transition: all 350ms;
}

.sidebar .menu.menu-extra .menu--item:hover a img {
    opacity: 1;
}

.sidebar .menu .menu--item.active a,
.sidebar .menu .menu--item:hover a,
.sidebar .sidebar--download-app:hover a {
    color: #fff;
}
/* Active state of the menu  item, adds a background color to the element */
.sidebar .menu .menu--item.active:before {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    left: 8px;
    left: -16px; /* -(Sidebar's padding left) + 8px */
    right: -16px; /* -(Sidebar's padding left) + 8px */
    background: rgb(40, 40, 40);
    z-index: -1;
    border-radius: 5px;
}

.menu--item--text,
.sidebar--download-app a span {
    font-size: 0.88rem;
    font-weight: 700;
    margin-left: 15px;
}

.sidebar--header {
    margin-top: 1.5rem;
    margin-bottom: 1.3rem;
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: #B3B3B3;
}

.sidebar .separator {
    height: 1px;
    width: 100%;
    border-top: 1px solid #303030;
    margin-top: 16px;
}

.sidebar .menu.menu-playlist .menu--item--text {
    font-weight: 400;
    margin-left: 0;
    /*
        Add ellipsis when the text is bigger than the width of the sidebar
        Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
    */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar .menu.menu-playlist a {
    cursor: default;
}

.sidebar--download-app {
    position: absolute;
    bottom: 0;
}

The current UI looks like this, we can see that it needs changes but it is starting to take shape.

9. All the UI with the sidebar having correct styling

Hover animation

10. Hover on menu item animation

As shown on the gif when the user hovers over a menu item, the color and the image becomes brighter. The effect is very simple to create and the code responsible for it is the following:

/* Start the menu item with a gray color */
.sidebar .menu .menu--item a,
.sidebar .sidebar--download-app a {
    color: #B3B3B3;
    /*
        All changes will take 350ms to finish. 
        Read More: https://css-tricks.com/almanac/properties/t/transition/
    */
    transition: all 350ms;
}
/* When the user hovers -> change the color */
.sidebar .menu .menu--item.active a,
.sidebar .menu .menu--item:hover a {
    color: #fff;
}
/*
    Changing the opacity of the image gives the brighter effect. This happens because the background is dark.
*/
.sidebar .menu.menu-extra .menu--item a img {
    opacity: 0.7;
    transition: all 350ms;
}

.sidebar .menu.menu-extra .menu--item:hover a img {
    opacity: 1;
}

Wrapping up

I want to keep these posts short and easy to follow, so I will finish this one here. If you have any questions about the post or any suggestions, let me know in the comments 🙂!

In the next post I will style the Top Bar and add two small Javascript interactions.

Starting Website Recreate Series

tsanak — Fri, 14 Feb 2020 18:26:12 +0000

tl;dr

In this series I will try to recreate some websites,that I find to be fancy, without the use of any css or js framework (whenever possible). The main goal is to help beginners understand that they don't always need a framework to make websites work. As a side-effect I hope to improve my understanding as well.

Disclaimer

This is not a rant about any framework and I am not against the use of frameworks. I just want to let beginners know, that they don't always need to load a whole framework to make a website responsive or just to add a carousel. Below I use Twitter Bootstrap as a framework example, because that was the one that I used when I started with web development. I use frameworks in my every day work and I now know that one could create very unique sites with them.

The Beginning

When I started my web development journey I found that, for me, the best way to learn was through practice. I started with viewing websites that I found beautiful and tried to recreate them. The first step I took was to import twitter bootstrap to everything, because how else was I supposed to make the website responsive 😅? The next step was to go through the documentation of bootstrap and try to find similar components to what I wanted to build (e.g. a Navbar), put the code in and try to modify it to look similar to what I was trying to achieve.

This process, while it kind of worked, it rarely achieved the exact same look and feel as the Goal website. The recreated site always had that Bootstrap-y look, though that was my rookie mistake of not actually modifying the bootstrap components good enough.

Another flaw of this process was that even for small sites e.g. a simple one page site, I always used Bootstrap (and jQuery) and bloated the site with thousands of unused lines of css and js.

Last but not least, the most important downside of this process was that I didn't actually learn css and its power. I learned to use Bootstrap and make small tweaks (change the colors or the width of something). I let the framework handle all the magic and then the sites lost their magic. They all looked similar to each other.

Site wireframe example

Whenever I saw something that I liked on the web my first thought was: can default Bootstrap do that? If the answer was no, then I used the next similar thing to it. Eventually I stopped thinking like that and started to read more about CSS and how to use it effectively.

Of course I make use of frameworks in my work. I just try to think if it is really needed, before adding one to a site. While there is no reason to reinvent the wheel, there is also no reason to having unused code and dependencies diminishing your site’s performance.

The first website that I will try to recreate is Spotify (open.spotify.com to be exact).

Open Spotify UI

I won't actually do any backend and I will not handle audio files (play, pause etc). The goal is to recreate the front end(the looks), the components will be there but the functionality might not.

Thank you for reading through this long post, this is the first series that I create. If you have any suggestions about the websites you want to see recreated leave a comment. I am by no means a frontend expert, but I will do my best to recreate them. There are multiple ways to achieve a UI, I will use the one that I see fit. If you think that my decisions are not optimal for any reason then please leave a comment about it.

Datatables: Combine multiple ajax sources

tsanak — Tue, 04 Feb 2020 22:55:22 +0000

The problem

Recently I had to fetch data from 2 sources and display them in a datatable.
The only requirement was to not show the data in the datatable until all the requests where finished. The current function, that worked for 1 source, was something like the one below (not the exact function 😅)

/* 
dt is a variable that holds the DataTable object
*/
function fetchData(dt, url) {
    $.ajax({
        url,
        dataType: 'json'
    })
    .done(function(res) {
        res.forEach(a => {
            dt.row.add([
                a.id,
                a.name,
                a.username,
                a.email,
                a.phone
            ]).draw(false);
        });
    })
    .fail(function(err) {
        reject('error');
    })
}

Why not call `fetchData` twice, one for each data source?

That would fill the datatable with data from all the sources, BUT it would also violate my only requirement (do not show the data until all the requests are finished).

Since I had to wait I thought about two solutions:

Promises
Async / Await

Promises

One promise is created for each data source.

They are sent together and when all of them return (Promise.all) then the data is added to the datatable.

function fetchData(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            dataType: 'json'
        })
        .done(function(res) {
            resolve(res);
        })
        .fail(function(err) {
            reject('error');
        })
    });
}

$(document).ready(function() {
    var dt = $('#example').DataTable({
        "ajax": function (d, callback, s) {
            let promisesArr = [];
            promisesArr.push(fetchData('/one-server-api/1'));
            promisesArr.push(fetchData('/another-server-api/2'));
            promisesArr.push(fetchData('users.json'));
            Promise.all(promisesArr).then(values => {
                // Convert [[1, 2], [3, 4], [5, 6]] to [1, 2, 3, 4, 5, 6]
                let all = values.reduce((accumulator, currentValue) => [...accumulator,...currentValue]);
                all.forEach(a => {
                    dt.row.add([
                        a.id,
                        a.name,
                        a.username,
                        a.email,
                        a.phone
                    ]).draw(false);
                });

            });
        }
    });
});

Async / Await

The solution is quite similar.

function fetchData(url) {
    return $.ajax({
            url,
            dataType: 'json'
        })
        .done(function(res) {
            return res;
        })
        .fail(function(err) {
            return 'error';
        });
}

$(document).ready(function() {
    var dt = $('#example').DataTable({
        "ajax": async function (d, callback, s) {
            let all = [];
            all.push(...await fetchData('/one-server-api/1'));
            all.push(...await fetchData('/another-server-api/2'));
            all.push(...await fetchData('users.json'));
            all.forEach(a => {
                dt.row.add([
                    a.id,
                    a.name,
                    a.username,
                    a.email,
                    a.phone
                ]).draw(false);
            });
        }
    });
});

Conclusion

Both promises and async/await solves the issue, but they do it, in a different way.

The key difference between the solutions is the time that they send the requests

The Promise solution sends all the requests at the (nearly) same time, the async solution waits for each request to finish before continuing to the next one.

So if you had 2 endpoints (sources):

Endpoint 1 (E1): with an average response time of 1000ms
Endpoint 2 (E2): with an average response time of 800ms

Promises would:

send the request to E1,
send the request to E2,
wait until both requests finish (avg 1000ms)
add data

Total average time before adding data: 1000ms

Promises solution request timings

Async/await would:

send the request to E1,
wait until E1 request finishes (avg 1000ms)
send the request to E2,
wait until E2 request finishes (avg 800ms)
add data

Total average time before adding data: 1800ms

Async solution request timings

Simple comment section with vue components

tsanak — Wed, 25 Apr 2018 10:27:06 +0000

Recently I started to migrate the frontend part of my work from jquery to Vue.js and it feels amazing! I always liked working on the frontend, but working with Vue just feels right.

Since we try to migrate slowly we currently use the UMD build of vue and we just import it with a script tag. This allows us to make use of the majority of the features that the framework offers.

One of the last things I had to built was a small comment section, that will be used under some posts.

Sneak peek

When working with components I like to create a separate file for the app and a new file for each new component. This is a personal preference, others use different file structures.

Show me the code 🤖



<div class="comments-outside">
    <div class="comments-header">
        <div class="comments-stats">
            <span><i class="fa fa-thumbs-up"></i> [[ likes ]]</span>
            <span><i class="fa fa-comment"></i> [[ comments.length ]]</span>
        </div>
        <div class="project-owner">
            <div class="avatar">
                <img :src="creator.avatar" alt="">
            </div>
            <div class="username">
                <a href="#">@[[ creator.user ]]</a>
            </div>
        </div>
    </div>
    <comments 
        :comments_wrapper_classes="['custom-scrollbar', 'comments-wrapper']"
        :comments="comments"
        :current_user="current_user"
        @submit-comment="submitComment"
    ></comments>
</div>

The code of the app.



new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: function() {
        return {
            likes: 12,
            //Info about the owner of the post
            creator: {
                avatar: 'http://via.placeholder.com/100x100/36846e',
                user: 'owner'
            },
            //Some info about the current user
            current_user: {
                avatar: 'http://via.placeholder.com/100x100/a74848',
                user: 'exampler'
            },
            //Comments that are under the post
            comments: [
                {
                    id: uuidv4(),
                    user: 'example',
                    avatar: 'http://via.placeholder.com/100x100/a74848',
                    text: 'lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor',
                },
            ]
        }
    },
    methods: {
        submitComment: function(reply) {
            this.comments.push({
                id: uuidv4(),
                user: this.current_user.user,
                avatar: this.current_user.avatar,
                text: reply
            });
        }
    }
});

This will be saved as a separate file named comments-app.js and will be included in the html.

So now we have the skeleton of the app and some data to get started, but we still have to make the comments component.

Preview:



Vue.component('comments', {
    delimiters: ['[[', ']]'],
    template: `
        <div class="comments">
            <div :class="comments_wrapper_classes">
                <single-comment 
                    v-for="comment in comments"
                    :comment="comment"
                    :key="comment.id"
                ></single-comment>
            </div>
            <hr>
            <div class="reply">
                <div class="avatar">
                    <img :src="current_user.avatar" alt="">
                </div>
                <input 
                    type="text" 
                    v-model.trim="reply" 
                    class="reply--text" 
                    placeholder="Leave a comment..."
                    maxlength="250"
                    required
                    @keyup.enter="submitComment"
                />
                <button 
                    class="reply--button" 
                    @click.prevent="submitComment">
                    <i class="fa fa-paper-plane"></i> Send
                </button>
            </div>
        </div>
    `,
    data: function() {
        return {
            reply: ''
        }
    },
    methods: {
        //Tell the parent component(main app) that we have a new comment
        submitComment: function() {
            if(this.reply != '') {
                this.$emit('submit-comment', this.reply);
                this.reply = '';
            }
        }
    },
    //What the component expects as parameters
    props: ['comments', 'current_user', 'comments_wrapper_classes']
});

This will be put into a new file named comments.js and we will include it with a script tag in the app.
As you can see we have a new component named single-comment that we need to build (I promise this is the last one 😅).
Preview:



Vue.component('single-comment', {
    delimiters: ['[[', ']]'],
    template: `
        <div class="comment">
            <div class="avatar">
                <img :src="comment.avatar" alt="">
            </div>
            <div class="text">
                <a class="username" href="#">
                    @[[ comment.user ]]
                </a> 
                <span>[[ comment.text ]]</span>
            </div>
        </div>
    `,
    props: ['comment']
});

This will be put into a new file named single-comment.js and we will include it with a script tag in the app.

Conclusion

Personally whenever I have to create anything I break it down into components and ask myself some questions:
1.Could this be used anywhere else?
2.Does it make sense to be used, as is, somewhere else?
If the answer is yes I create the component.

🎉Thank you for reading through all this and I hope you found something helpful🎉

Let me know if you would like to see the full code, with the css and I will create a github repo.

Building an image carousel with Vue.js

tsanak — Wed, 28 Feb 2018 19:38:10 +0000

In my few years of experience as a web developer I have used more than a dozen carousel plugins, some of them were really good and some of them were rather clunky.

Recently I wanted to use a small image carousel(for a personal project of mine) that would cover the upper part of a card. The carousel should have arrows and thumbnails to navigate through the images and the thumbnails should be on the bottom of the carousel.

I was tempted to use something like owl-carousel and get on with my day, but I also kind of wanted to build something new with Vue, which I have been learning for a few months now.

Since I had plenty of time I fired up my favorite IDE and started a new project.

For this project I used Bulma (a CSS framework based on Flexbox) and of course Vue.js. If you are new to Vue I encourage you to read my first post and the awesome documentation.

Sneak peek

Let’s get technical

HTML skeleton of the project



<section class="section" id="app">
    <div class="columns">
        <div class="column is-4">
            <div class="card">
                <div class="card-content">
                    <div class="card-carousel">
                        <div class="card-img">
                            <img src="/some-image.jpg" alt="Some image">
                            <div class="actions">
                                <span class="prev">
                                    <i class="fas fa-chevron-left"></i>
                                </span>
                                <span class="next">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                            </div>
                        </div>
                        <div class="thumbnails">
                            <div class="thumbnail-img">
                                <img src="/some-thumbnail.jpg" alt="Some thumbnail">
                            </div>
                            <div class="thumbnail-img active">
                                <img src="/some-thumbnail.jpg" alt="Some thumbnail">
                            </div>
                            <div class="thumbnail-img">
                                <img src="/some-thumbnail.jpg" alt="Some thumbnail">
                            </div>
                        </div>
                    </div>
                    <p>Card description.</p>
                </div>
            </div>
        </div>
    </div>
</section>

After a little CSS it ended up looking like this:

Now that we got the styling out of the way, we can focus on the functionality 🤖



<div class="card-carousel">
    <div class="card-img">
        <img :src="currentImage" alt="">
        <div class="actions">
            <span @click="prevImage" class="prev">
                <i class="fas fa-chevron-left"></i>
            </span>
            <span @click="nextImage" class="next">
                <i class="fas fa-chevron-right"></i>
            </span>
        </div>
    </div>
    <div class="thumbnails">
        <div 
            v-for="(image, index) in  images"
            :key="image.id"
            :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
            @click="activateImage(index)"
        >
            <img :src="image.thumb">
        </div>
    </div>
</div>

A short explanation



<!-- 
    Bind the source of the image to a variable,
    so when the variable changes, so does the photo
-->
<img :src="currentImage" alt="">
<!-- 
    Loop through the images array,
    @click="activateImage(index)" on click call the function activateImage 
    :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
    bind the class of the div to an array. Always show 'thumbnail-image' class 
    and show the class 'active' only for the image that is currently active
-->
<div 
    v-for="(image, index) in  images"
    :key="image.id"
    :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
    @click="activateImage(index)"
>
    <img :src="image.thumb">
</div>

and all the JS code that was needed:



    var app = new Vue({
        el: '#app',
        data() {
            return {
                //Array to hold all carousel images
                images: [
                    {
                        id: '1',
                        big: 'images/p1.jpeg',
                        thumb: 'images/thumbs/p1.jpeg'
                    },
                    {
                        id: '2',
                        big: 'images/p2.jpeg',
                        thumb: 'images/thumbs/p2.jpeg'
                    },
                    {
                        id: '3',
                        big: 'images/p3.jpeg',
                        thumb: 'images/thumbs/p3.jpeg'
                    },
                    {
                        id: '4',
                        big: 'images/p4.jpeg',
                        thumb: 'images/thumbs/p4.jpeg'
                    }
                ],
                //Index of the active image on the images array
                activeImage: 0
            }
        },
        computed: {
            // currentImage gets called whenever activeImage changes
            // and is the reason why we don't have to worry about the 
            // big image getting updated
            currentImage() {
                return this.images[this.activeImage].big;
            }
        },
        methods: {
            // Go forward on the images array 
            // or go at the first image if you can't go forward :/ 
            nextImage() {
                var active = this.activeImage + 1;
                if(active >= this.images.length) {
                    active = 0;
                }
                this.activateImage(active);
            },
            // Go backwards on the images array 
            // or go at the last image
            prevImage() {
                var active = this.activeImage - 1;
                if(active < 0) {
                    active = this.images.length - 1;
                }
                this.activateImage(active);
            },
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            }
        }
    });

Here is the finished project (again 😅)

🎉Thank you for reading through all this and I hope you found something helpful🎉

You can find all the code on github

All the photos were taken from Pexels.com
https://www.pexels.com/photo/bang-blast-celebration-color-287487/
https://www.pexels.com/photo/person-hands-squash-fruit-112352/
https://www.pexels.com/photo/action-blur-car-daylight-246320/
https://www.pexels.com/photo/auto-automobile-blur-bokeh-242276/