DEV Community: Alex Shulaev

Simple Layout Challenge #4

Alex Shulaev — Sat, 06 Mar 2021 17:23:22 +0000

About

Hi everyone 👋

The last challenge I did more than half a year ago and here I'm again with you 🤗

Today I want to introduce you to an effect based on blurring with transparency - Glassmorphism. You may have seen this effect in many iOS applications, but today I invite you to experiment with it yourself

Task

This is how the design looks, you can find all the necessary resources here. It is important to make your HTML valid, make the switch work from the keyboard, and implement the glassmorphism effect

My implementation of this

I hope this challenge will be of interest to you, I'm waiting for your links and ready to conduct a code review 🤗

Simple Layout Challenge #3

Alex Shulaev — Sat, 15 Aug 2020 12:15:54 +0000

About

Hi everyone 👋

A few days ago I asked a question about creating a documentation page for your projects and got a lot of great answers and tips, it was awesome 🤩 But to develop documentation for Keukenhof.js I decided to go the other way and develop the page myself using the stack - HTML & CSS & JS, why I went this way I plan to write in a separate note 😉 By the way, here's what I got

Today I offer you a small challenge to create part of this documentation, namely the header 🎩

Task

This is how the design looks, you can find all the necessary resources here. A prerequisite is to implement responsive. How the design should behave at small screen sizes is up to you, the main goal is to make the content easy to read

I hope this challenge will be of interest to you, I'm waiting for your links and ready to conduct a code review 🤗

Simple Layout Challenge #2

Alex Shulaev — Wed, 29 Jul 2020 04:46:06 +0000

About

From time to time I practice HTML & CSS layout and would like to invite you to join me 👋 I take a small UI element and just implement it 🙂 And you can share your solution with me and I'll conduct a small code review

Task

Implement such a modal window. As a library, you can use my solution, or any other library, or implement everything in pure HTML & CSS, the choice is yours

Share your results in the comments, I'll also attach my solution 👾

How do you document your side projects?

Alex Shulaev — Sun, 26 Jul 2020 20:03:45 +0000

I want to write a page with examples of use and documentation of my small side project. Who designed such pages? What did you use? Or maybe you know someone who makes very handy documentation for their projects and you learn from him? 🙂 I want to see examples of handy documentation for small projects. Thank you all and have a nice day! ❤️

Simple Layout Challenge #1

Alex Shulaev — Tue, 21 Jul 2020 20:33:13 +0000

About

From time to time I practice HTML & CSS layout and would like to invite you to join me 👋 I take a small UI element (soon there'll be modals because I implement modal libraries and write about it) and just implement it 🙂

Task

Implement such a modal window. As a library, you can use my solution, or any other library, or implement everything in pure HTML & CSS, the choice is yours

Share your results in the comments, I'll also attach my solution 👾

Create a JavaScript library. Add keyboard controls and improve accessibility support

Alex Shulaev — Wed, 15 Jul 2020 11:04:27 +0000

Today I'll continue to improve the library and suggest discussing another important topic - the accessibility and usability of your interface.

What is accessibility?

An accessible site is a site, access to the contents of which can be obtained regardless of any violations by the user, and the functioning of which can be carried out by a wide variety of users.

Remember that accessibility is not a tool to make your interface convenient for a certain group of users, it is an opportunity to make your interface convenient for all your users.

As the web.dev blog writes accessibility concerns can be split into four broad categories:

Vision
Motor/dexterity
Auditory
Cognitive

If you think that your project does not have users from the described groups, you're very wrong. For example, any user will be grateful if, as an alternative, you give the opportunity to control the interface from the keyboard.

Keyboard controls

Keyboard control can be convenient not only for users with restrictions since this is a more efficient way to move around the site (if everything is done on the site for this).

Focus on an element (for example, a link, button, or input field) shows which element is currently ready for keyboard input. To change the focus on an element you need to use the TAB key or the SHIFT + TAB key combination.

Just try to do it

Depending on your browser, the interactive elements on which the focus is located will be highlighted. This is very important, without this it'll be impossible to use the keyboard to navigate the site. If you don’t like how it looks by default, you can style it with the :focus CSS pseudo-class.

The second important point that you need to pay attention to is the order of your elements when navigating from the keyboard.

If the order of focus seems wrong, you should reorder the elements in the DOM to make it more natural. If you want something to appear earlier on the screen, move it earlier in the DOM.

It'll look like the normal focus order:

And it'll look like an order changed using styles:

Now let's look at this issue when using the library. If we add a list of interactive elements and add a layout of the modal window after this list, the order will correspond to the layout, but not to our ideas about the correct focus. For example, it might look like this:

This is how it looks now.

We have 4 buttons, one of them opens the modal window by clicking, but after opening the modal window, the focus remains on the buttons. It would be much more convenient if the focus automatically moved us to the modal window.

Implementing autofocus

First of all, for automatic focusing inside the modal window, we need a list of elements that can get the focus state after opening the modal window

export const FOCUSING_ELEMENTS = [
    'a[href]',
    'area[href]',
    'button:not([disabled]):not([aria-hidden])',
    'input:not([disabled]):not([aria-hidden])',
    'select:not([disabled]):not([aria-hidden])',
    'textarea:not([disabled]):not([aria-hidden])',
    '[tabindex]:not([tabindex^="-"])',
];

Now we need a method to get all the interactive elements for the active modal window

/**
 * Get a list of node elements that may be in focus
 *
 * @returns {Array<HTMLElement>} list of nodes
 */
getFocusNodesList(): HTMLElement[] {
    if (!this.$modal) return [];
    const nodes = this.$modal.querySelectorAll<HTMLElement>(FOCUSING_ELEMENTS.join(', '));
    return Array.from(nodes);
}

The method for autofocus will have the following algorithm:

We get a list of interactive elements if the list is empty (so empty that there is no button to close inside the modal window) we simply interrupt the method;
If the list has several interactive elements, we do .focus() on the first of an element that isn't a close button;
If the modal window has only a close button, then do .focus() on this button.

/**
 * Set focus on an element inside a modal
 */
setFocus() {
    const nodesList = this.getFocusNodesList();
    if (!nodesList.length) return;
    const filteredNodesList = nodesList.filter(
        (item) => !item.hasAttribute(this.closeAttribute),
    );
    (filteredNodesList.length ? filteredNodesList[0] : nodesList[0]).focus();
}

Since we are trying to change the default logic of the focus operation, we should not do this as a mandatory part of the library, so we'll add a new option isAssignFocus which will be responsible for autofocus (with the default value of true). Call the "setFocus" function after opening the modal window

preparationOpeningModal(event?: Event) {
    if (this.hasAnimation) {
        ...
        const handler = () => {
            if (this.isAssignFocus) this.setFocus();
            ...
        };
        this.$modal?.addEventListener('animationend', handler);
    } else {
        if (this.isAssignFocus) this.setFocus();
        ...
    }
}

If the modal window has an animation when opened, we will focus on the element only after the animation is complete.

That's what we got

Focus control inside a complex element

For complex elements, you need to work extra to make it easy to control with the keyboard. Part can be done using the only markup for this tabindex is suitable. The native interactive element has focus, but tabindex makes any UI element available for focus.

There are three types of tabindex values:

A negative value (usually tabindex="-1") means that the item is not accessible via sequential keyboard navigation, but can be focused with JavaScript or a visual click
tabindex="0" means that the element must be focused when sequentially navigating the keyboard
A positive value (tabindex="1", tabindex="2", tabindex="100") means that the element must be focused in sequential navigation using the keyboard, with its order determined by the value of the number. This completely contradicts the natural order of focus that we discussed earlier and is the antipattern

Focus control

Earlier we implemented autofocus, but this showed another problem, after all the interactive elements (or elements with tabindex="0") are over, focusing continues on the following elements outside the modal window. This is usually not a problem if you use a modal window as a hint that doesn't block the main content. But if we use a full-size modal window (also with a scroll lock), this isn't the behavior that we expect to see.

Let's give users the opportunity to choose whether they want to control the focus inside the modal window or not.

First of all, we need to get a list of interactive elements

/**
 * Leaves focus control inside a modal
 *
 * @param {KeyboardEvent} event - Event data
 */
controlFocus(event: KeyboardEvent) {
    const nodesList = this.getFocusNodesList();
    if (!nodesList.length) return;
}

After that we filter all the hidden elements and then we determine whether the modal window is the currently active element, if not, we set the focus on the first element in order. If the active element is already in the modal window, we get the index of the active element and, depending on the index and the keys pressed, decide which element will be focused next. Here we have two special cases that we need to handle on our own:

If the SHIFT key is pressed and we're focused on the first element, then we need to next focus on the last interactive element inside the modal window
If the SHIFT key isn't pressed and we're focused on the last element, then we need to next focus on the first interactive element inside the modal window

controlFocus(event: KeyboardEvent) {
    ...
    const filteredNodesList = nodesList.filter(({offsetParent}) => offsetParent !== null);
    if (!this.$modal?.contains(document.activeElement)) {
        filteredNodesList[0].focus();
    } else {
        const index = filteredNodesList.indexOf(document.activeElement as HTMLElement);
        const length = filteredNodesList.length;

        if (event.shiftKey && index === 0) {
            filteredNodesList[length - 1].focus();
            event.preventDefault();
        }

        if (!event.shiftKey && length && index === length - 1) {
            filteredNodesList[0].focus();
            event.preventDefault();
        }
    }
}

Now add a handler for clicking on TAB and individual options in the configuration file

/**
 * Modal constructor
 *
 * @param {ConfigType} param - Config
 */
constructor({
    ...
    isAssignFocus = true,
    isFocusInside = true,
}: ConfigType) {
    ...
    this.isAssignFocus = isAssignFocus;
    this.isFocusInside = isFocusInside;

    this.onKeydown = this.onKeydown.bind(this);
}

/**
 * Event keydown handler
 *
 * @param {KeyboardEvent} event - Event data
 */
onKeydown(event: KeyboardEvent) {
    if (event.key === KEY.TAB) this.controlFocus(event);
}

/**
 * Add event listeners for an open modal
 */
addEventListeners() {
    ...
    if (this.isFocusInside) document.addEventListener('keydown', this.onKeydown);
}

/**
 * Remove event listener for an open modal
 */
removeEventListeners() {
    ...
    if (this.isFocusInside) document.removeEventListener('keydown', this.onKeydown);
}

Our current result:

Semantic information

Sometimes semantic markup is not enough to fully convey the information that your content carries. In such cases, you can use ARIA attributes. ARIA is a set of special attributes that can add a description to your markup. This is a separate large section with its good practices and recommendations. For the library, we'll consider only a part (and perhaps we'll return to this topic in the future when we write modal window templates).

Adding aria-hidden="true" to an element removes this element and all its children from the accessibility tree. This can improve the assistive technology user experience. In our case, this attribute should hide the modal window at the moment when it is not active and show when the open method is called. Add aria-hidden="true" to our markup and implement attribute control in libraries.

/**
 * Set value for aria-hidden
 *
 * @param {boolean} value - aria-hidden value
 */
setAriaHidden(value: boolean) {
    this.$modal?.setAttribute('aria-hidden', String(value));
}

open(event?: Event) {
    ...
    this.setAriaHidden(false);
    ...
}

close(event?: Event) {
    ...
    this.setAriaHidden(true);
    ...
}

The modal window is already a familiar element of any site, but the browser will not be able to understand that part of the content that appears is a modal window, but we can suggest using role. role="dialog" is great for our markup. role="dialog" is used to mark up an HTML-based application dialog box or a window that separates the content or interface from the rest of the web application or page. Dialogs are usually placed on top of the rest of the page using overlay. As you can see, the role simply tells the browser what kind of component is in front of it.

That's all for now, this time we touched on a very interesting and important topic. The library itself you can find on GitHub will be glad to your ⭐

Alexandrshy / keukenhof

Lightweight modal library 🌷

Keukenhof

Micro library for creating beautiful modal windows

Installation

For install, you can use npm or yarn:

npm install keukenhof
yarn add keukenhof

CDN link

<script src="https://unpkg.com/keukenhof@1.1.0/dist/index.js"></script>

Example

<div id="modal" class="modal">
    <div class="modal__overlay" data-keukenhof-close></div>
    <div class="modal__container" role="dialog">
        <div class="modal__wrapper">
        <button
            class="modal__button modal__button--close"
            data-keukenhof-close
        >
            Close modal
        </button>
        <main class="modal__main">
            <h2 class="modal__title">Title</h2>
            <p class="modal__desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit
            </p>
            <a href="#" class="modal__link">More information</a>

…

View on GitHub

This is the final part of writing the basic functionality (this doesn't mean that I'll no longer work on the side project, there are still a lot of steps that I want to implement, for example, write documentation, write a project page, publish my project on Product Hunt and much more). Now I can use the library to create templates because I miss HTML/CSS 😄 Thank you all for your interest in the article. See you soon 👋

Create a JavaScript library. Add callbacks

Alex Shulaev — Tue, 07 Jul 2020 10:42:03 +0000

And here is a new part of creating a library of modal windows in JavaScript. This time we are implementing two small improvements. First, we'll add the ability to use callbacks to the configuration. And secondly, we'll improve the keyboard control. By tradition, I'm sharing a video version with you, for those who want to see how I wrote it 🎬

Callback

As per MDN: "A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action". A small use case:

const addition = (a, b) => a + b;
const multiplication = (a, b) => a * b;
const count = (a, b, callback) => callback(a, b);

console.log(count(10, 20, addition)); // 30
console.log(count(10, 20, multiplication)); // 200

In our example, the first two functions addition andmultiplication simply perform a mathematical action with two parameters and return the result of the calculation. But the count method takes three parameters, the first two are numbers, and the third is the action that you need to do with numbers. This is the callback. In this context, such an example may seem redundant. All the convenience of callbacks is revealed when we need to wait for any action or result

And this perfectly shows the situation that can occur when using a library with hasAnimation. If we need to perform some kind of functionality not immediately after clicking on the button that will open the modal window, but only after it is fully opened, callbacks will help us.

Let's add this code:

constructor({
    ...
    onOpen = () => {},
    onClose = () => {},
    beforeOpen = () => true,
    beforeClose = () => true,
}: ConfigType) {
    this.$modal = document.querySelector(selector);

    this.onOpen = onOpen;
    this.onClose = onClose;
    this.beforeOpen = beforeOpen;
    this.beforeClose = beforeClose;
    ...
}

close(event?: Event) {
    const isContinue = this.beforeClose(event);
    if (!isContinue) return;
    ...
    this.preparationClosingModal(event);
}

preparationClosingModal(event?: Event) {
    if (this.hasAnimation) {
        const handler = () => {
            ...
            this.onClose(event);
            this.$modal?.removeEventListener('animationend', handler);
        };
        this.$modal?.addEventListener('animationend', handler);
    } else {
        ...
        this.onClose(event);
    }
}

For the open method, we'll need to do the same with this.onOpen andthis.beforeClose.

The this.onOpen andthis.onClose methods play the role of events that report the corresponding action of the modal window. Such methods will be called as soon as the animation ends at the modal window (or immediately if the animation is disabled). Such methods are conveniently used, for example, to send analytics in order to track interactive user actions.

The this.beforeOpen andthis.beforeClose methods, as you may have noticed, have a slight difference, they should return a boolean value. This is done intentionally to add flexibility in window configuration. For example, it is convenient to use such methods to block a modal window until the animation is completed (if opening animation takes considerable time, this may be necessary), or to block the state of the window until a certain action is taken by the user (such as filling out a feedback form).

As you can see, we added just a few methods, but significantly expanded the configuration options.

Keyboard control

The main idea of implementation is to prepare the library for the final parts, which will implement support for accessibility and convenient keyboard control.

This time we'll add one small action, which for me personally is very convenient. This closes the modal window by clicking on Esc.

And if you try to look for solutions to track Esc, you'll most likely see this code:

document.addEventListener('keyup', function (event) {
    if (event.keyCode === 27) console.log('Esc button was pressed');
});

And then one interesting embarrassment happened. If you watched my video, you could see that to determine which key was pressed, I used keyCode

onKeydown(event: KeyboardEvent) {
    if (event.keyCode === KEY_CODE.ESC) this.close();
}

But if you look at the code now, you'll see another solution.

It happened because keyCode has been the standard way to determine the type of key pressed for many years. This has great support for browsers. But the fact is that now this is deprecated and it is no longer recommended to use it.

keyCode was deprecated because in practice it was "inconsistent across platforms and even the same implementation on different operating systems or using different localizations." The new recommendation is to use key or code.

However, there are also minor difficulties, the fact is that KeyboardEvent.key is implemented differently in different browsers. For example, in IE11 KeyboardEvent.key uses Esc rather than Escape for the corresponding keyboard button, because it was implemented before the specification was completed. More detailed browser support can be found here.

This will look like an implementation with compatibility support for older browsers

export const KEY = {
    ESC: 'Esc',
    ESCAPE: 'Escape',
    CODE: 27,
}

addEventListeners() {
    document.addEventListener('keyup', this.onKeyup);
}

removeEventListeners() {
    document.removeEventListener('keyup', this.onKeyup);
}

/**
 * Keyboard press handler
 *
 * @param {KeyboardEvent} event - Event data
 */
onKeyup(event: KeyboardEvent) {
    const key = event.key || event.keyCode;
    if (key === KEY.ESCAPE || key === KEY.ESC || key === KEY.CODE) this.close(event);
}

However, we can leave a more compact form, since we don't need support on so many old browsers

/**
 * Keyboard press handler
 *
 * @param {KeyboardEvent} event - Event data
 */
onKeyup(event: KeyboardEvent) {
    if (event.key === KEY.ESCAPE || event.key === KEY.ESC) this.close(event);
}

Now, with the modal window open, we have a handler for clicking the Esc key on the keyboard. This handler calls the close method and after closing the modal window we remove the click handler. You can see the complete solution in the repository.

Alexandrshy / keukenhof

Lightweight modal library 🌷

Keukenhof

Micro library for creating beautiful modal windows

Installation

For install, you can use npm or yarn:

npm install keukenhof
yarn add keukenhof

CDN link

<script src="https://unpkg.com/keukenhof@1.1.0/dist/index.js"></script>

Example

<div id="modal" class="modal">
    <div class="modal__overlay" data-keukenhof-close></div>
    <div class="modal__container" role="dialog">
        <div class="modal__wrapper">
        <button
            class="modal__button modal__button--close"
            data-keukenhof-close
        >
            Close modal
        </button>
        <main class="modal__main">
            <h2 class="modal__title">Title</h2>
            <p class="modal__desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit
            </p>
            <a href="#" class="modal__link">More information</a>

…

View on GitHub

Next time we will consider a very extensive topic of accessibility when working with modal windows. Subscribe, it'll be interesting! See you soon 👋

Create a JavaScript library. CSS animation support

Alex Shulaev — Tue, 30 Jun 2020 10:28:21 +0000

As you can see, the current implementation of the library implies changing the display property from none to block. The only problem with this approach is that this property cannot be animated via CSS, which is why the modal window opens too sharply. Today we are implementing support for CSS animations when opening/closing a window.

CSS animation

Animations help improve the perception of your content and make your project truly unique.

There are several ways to implement animations, including JavaScript and CSS. CSS animations are now a very powerful tool and the main plus of such animations in performance and optimization at the browser level.

Let's take a closer look at how it works.

Keyframes

keyframes are used to specify animation property values at various points in the animation. Keyframes determine the behavior of one animation loop. Animation can be repeated zero or more times.

The basic syntax looks like this:

@keyframes animationName {
  from {
    /* code here*/
  }

  to {
    /* code here*/
  }
}

In this syntax, we have a description of the animation in two states. There is also a more flexible syntax if your animation is more complex and cannot be described only by the initial and final state

@keyframes animationName {
  0% {
    /* code here*/
  }

  100% {
    /* code here*/
  }
}

Usage example:

CSS Animation Properties

The property that was used in the example animation: shade .5s alternate infinite ease; it is a short-hand which can consist of 8 separate properties.

`animation-name`

This is the name of the keyframe specified by @keyframes rule.

animation-name: none;
animation-name: rebound;
animation-name: rebound-slow;
animation-name: reboundFast;

`animation-duration`

This property determines the duration of one animation cycle. Set in seconds with s or milliseconds with ms. If an element has more than one animation specified, then you can set a different time for each, listing the values separated by commas.

animation-duration: 1s;
animation-duration: 200ms;
animation-duration: .25s, 2s;

`animation-timing-function`

This property describes how an animation will develop between each pair of keyframes.

The property accepts the following value:

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier
step-start
step-end
steps

animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: cubic-bezier(.2, .5, .3, .9);
animation-timing-function: steps(3, end);

`animation-delay`

This property is determined when the animation begins. Set in seconds with s or milliseconds with ms.

animation-delay: .25s;
animation-delay: 1s, 100ms;

`animation-iteration-count`

This property indicates how many times the animation loop is played; this is 1 by default. The value of infinite indicates that the animation will play repeat forever.

animation-iteration-count: infinite;
animation-iteration-count: 2;

`animation-direction`

This property indicates whether the animation should play forward, backward, or alternately forward and backward.
Available property values:

normal - This is the default value and the animation played as normal (forwards)
reverse - The animation is played backward
alternate - The animation reverses direction each cycle
alternate-reverse - The animation reverses direction each cycle, with the first iteration being played backward

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

`animation-fill-mode`

This property defines how to apply styles to the animation object before and after it is executed. Available property values:

none - Do not apply any styles to the animated element before or after the animation is executing
forwards - Retain styles from the last keyframe
backwards - Get styles from the first keyframe and retain this style during animation-delay state
both - Extend animation properties in both directions forwards and backwards

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;

`animation-play-state`

This property determines whether the animation will start or pause. Stopping animation inside a loop is possible using JavaScript. You can also stop the animation if the state is hover. Available property values:

running - The animation is currently playing. Default value
paused - The animation is currently paused

animation-play-state: running;
animation-play-state: paused;

Implement animation support

Now we implement animation support in the library.

Let's start by adding a new hasAnimation property. It'll take a boolean value that is false by default. In order to add an animation of the "appearance" of a modal window, we need to add a new class at the time of its opening that will contain a property that describes the animation. It seems that we can use the previously written open method. But we need this class for the duration of the animation and after the animation is complete, it should be deleted. All this logic will be written in a separate preparationOpeningModal method

/**
 * Preparing a modal window for opening
 */
preparationOpeningModal() {
    if (this.hasAnimation) {
        this.$modal?.classList.add(CLASS_NAMES.IS_OPENING);
        const handler = () => {
            this.$modal?.classList.remove(CLASS_NAMES.IS_OPENING);
            this.$modal?.removeEventListener('animationend', handler);
        };
        this.$modal?.addEventListener('animationend', handler);
    }
}

If hasAnimation is false we don't need to do anything. The animationend event is fired when a CSS animation has completed. In our case, after the modal window is opened, the class name .isOpening is added and the animationend event is subscribed. After the animation is complete, we delete the subscription and the .isOpening class name.

Styles for an opening modal window:

:root {
  --animation: cubic-bezier(0.66, 0.28, 0.09, 0.53);
}

.modal.isOpening {
  animation: fadeIn .35s var(--animation);
}

.modal.isOpening .modal__container {
  animation: downUp .35s var(--animation);
}

@keyframes downUp {
  0% {
    transform: translateY(8%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

And here is our result. A modal window that appears smoothly

But closing this window is still fast, since we haven't added a separate method for this. Let's fix this

/**
 * Preparing a modal window for closing
 */
preparationClosingModal() {
    if (this.hasAnimation) {
        this.$modal?.classList.add(CLASS_NAMES.IS_CLOSING);
        const handler = () => {
            this.$modal?.classList.remove(CLASS_NAMES.IS_CLOSING);
            this.$modal?.classList.remove(this.openClass);
            this.$modal?.removeEventListener('animationend', handler);
        };
        this.$modal?.addEventListener('animationend', handler);
    } else {
        this.$modal?.classList.remove(this.openClass);
    }
}

As you can see, this is very similar to what we did in preparationOpeningModal, but there is still a significant difference. Deleting the main class should only occur after the animation is complete (if there is one), so we will transfer this part of the code from the close method to the preparationClosingModal method. For the animation when closing, we'll use the class name .isClosing.

Add styles:

.modal.isClosing {
  animation: fadeOut .35s var(--animation);
}

.modal.isClosing .modal__container {
  animation: centerUp .35s var(--animation);
}

@keyframes centerUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8%);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Now we have animation in two directions

Thanks for reading! Next time we'll add a few callbacks and add a small implementation for keyboard control. Also, very soon I'll return to what I love endlessly - creating templates, and these will be ready-made templates for modal Windows that you can immediately use with the library. Subscribe, it'll be interesting! See you soon 👋

Create a JavaScript library. Implement Scroll Lock

Alex Shulaev — Wed, 24 Jun 2020 17:03:24 +0000

The basic functionality is implemented, the dev build is working, it's time to expand the general functionality. In this part, I'll add new methods for opening and closing modal windows and work on the scroll behavior.

Add new methods

Earlier, we implemented the init method that initialized all modal windows according to the markup.

/**
 * Open modal window by selector
 *
 * @param {string} selector - Modal window selector
 * @param {ConfigType} config - Modal window configuration
 */
const open = (selector: string, config?: ConfigType) => {
    const options = config || {};
    modal = new Modal({...options, selector});
    modal.open();
};

The open method has one required parameter, the modal window selector that needs to be opened, and the second parameter is the config. This method creates a new instance of the modal window with the passed selector.

/**
 * Close modal
 *
 * @param {string} selector - Modal window selector
 */
const close = (selector?: string) => {
    if (!modal) return;
    selector ? modal.closeBySelector(selector) : modal.close();
};

The close method has one optional parameter - a selector. If there are no previously opened modal windows, this function will end its work. If the selector is not passed, the last opened modal window will be closed; if the selector is explicitly passed, the new method closeBySelector will be called. In the Modal class, we implement the closeBySelector method.

/**
 * Close modal window by selector
 *
 * @param {string} selector - Modal window selector to close
 */
closeBySelector(selector: string) {
    const element = document.querySelector<HTMLElement>(selector);
    if (!element) return;
    this.$modal = element;
    this.close();
}

We are looking for an element by the selector. For the found element, call the close method. If the item is not found, the function will stop its work.

Scroll behavior

Modal windows are more convenient to use when the scroll of the main part of the site is blocked. However, this behavior cannot be strictly defined, since some of the modal windows can be informational and in this case, they should not block the scroll.

Let's expand the modal class configuration. It'll be an object of the following type

export type ConfigType = {
    ...
    scrollBehavior?: {
        isDisabled?: boolean;
        container?: string;
        defaultValue?: string;
    };
}

Define the default value for scrollBehavior

this.scrollBehavior = {
    isDisabled: true,
    container: 'body',
    defaultValue: '',
    ...scrollBehavior,
};

By default, we'll block the scroll for the body tag. The scroll behavior method will look like this.

/**
 * Change scroll behavior
 *
 * @param {string} value - Scroll state value
 */
changeScrollBehavior(value: 'disable' | 'enable') {
    if (!this.scrollBehavior.isDisabled) return;
    const element = document.querySelector<HTMLElement>(this.scrollBehavior.container);
    if (!element) return;
    if (value === SCROLL_STATE.ENABLE)
        element.style.overflow = this.scrollBehavior.defaultValue;
    else if (value === SCROLL_STATE.DISABLE) element.style.overflow = 'hidden';
}

The method takes one parameter to determine the state of the scroll (there may be one of two options: disable or enable). If isDisabled is false or container is not there, the function should not do anything. Further, depending on the state, we change the overflow value of the element.

I recommend putting any text data into constants to avoid possible typos when using.

export const SCROLL_STATE = {
    DISABLE: 'disable',
    ENABLE: 'enable',
} as const;

The function is ready, add a call to the open and close methods.

open() {
    this.$modal?.classList.add(this.openClass);
    this.changeScrollBehavior(SCROLL_STATE.DISABLE);
    this.addEventListeners();
}

close() {
    this.$modal?.classList.remove(this.openClass);
    this.changeScrollBehavior(SCROLL_STATE.ENABLE);
    this.removeEventListeners();
}

To check, you can set the height of the body and then open the modal window. When the body tag has style="overflow: hidden;" the content under the modal window should stop scrolling. And after closing the modal window, everything should return to its original state

Thanks for reading! Some improvements to the library are ready, but more improvements are coming. Join me if you are interested. See you soon 👋

JavaScript best practices for writing clean code. Work with Object

Alex Shulaev — Fri, 19 Jun 2020 15:00:57 +0000

Accepting style guides or coding conventions helps make your code cleaner and more predictable.

The more detailed you describe the rules for your project, the easier it will be for another developer to write code according to your vision.

Now there is a large selection of ready-made style guides from various companies and developers posted in open source. In this article I want to give my advice on adding rules for working with Objects. You can consider this as recommendations, or you can configure ESLint to automatically check these rules.

Object creation

Use literal syntax to create objects. This is a shorter analog of Object constructor.

// bad
const product = new Object();

// good
const product = {};

ESLint rule: no-new-object

How to add to your config:

"rules": {
  "no-new-object": "error"
}

Object shorthand

Use shorthand for property value and methods. This recording option is intuitive and a shorter counterpart.

// bad
const product = {
  name: name,
  id: id,
  getPrice: function () {},
  generateSpecialOffer: function* () {},
};

// good
const product = {
  name,
  id,
  getPrice() {},
  *generateSpecialOffer() {},
};

ESLint rule: object-shorthand

How to add to your config:

"object-shorthand": [
  "error",
  "always",
  {
    "ignoreConstructors": false,
    "avoidQuotes": true
  }
]

Quotes

Property names of objects can be written with or without quotes, both of these options are valid. By analogy with the previous rules, we can decide not to use quotes as this is a shorter record, but in fact, it is not quite so, the fact is that we have cases when the presence of quotes is mandatory. For example, when a property name has space or dash. However, this is not so common, so using quotes for all properties will be irrational. The best option is to use quotes only when it is necessary.

// bad
const product = {
  "description": "",
  "short-description": "",
};

// good
const product = {
  description: "",
  "short-description": "",
};

ESLint rule: quote-props

How to add to your config:

"quote-props": ["error", "as-needed", { "unnecessary": true }]

Object.prototypes

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. This allows you to override methods (e.g. hasOwnProperty), which can break the logic of the application. To solve this problem, you need to always call methods from Object.prototype

// bad
const product = {
  name: "name-1",
  id: 1,
};

console.log(product.hasOwnProperty("name")); // true?

// good
const product = {
  name: "name-1",
  id: 1,
};

console.log(Object.prototype.hasOwnProperty.call(product, "name")); // true

ESLint rule: no-prototype-builtins

How to add to your config:

"no-prototype-builtins": "error"

The "extends": "eslint:recommended" property in a configuration file enables this rule.

Destructuring

Destructuring is now very popular and indeed it has proven itself in a much more convenient way than accessing a property through expression. The main advantage of destructuring is a shorter code entry. You no longer need to create additional variables to store properties

const product = {
  name: "name-1",
  id: 1,
  price: "100$",
};

// bad
const getPrice = (product) => {
  const price = product.price;
  return `Full price: ${price}`;
};

// good
const getPrice = ({ price }) => `Full price: ${price}`;

ESLint rule: prefer-destructuring

How to add to your config:

"prefer-destructuring": [
  "error",
  {
    "VariableDeclarator": {
      "array": false,
      "object": true
    },
    "AssignmentExpression": {
      "array": true,
      "object": false
    }
  },
  {
    "enforceForRenamedProperties": false
  }
]

Object spread

If you have a task to combine several objects or get a copy of objects, you need to use Object.assign with special care (or even better, use Spread syntax instead). Let's look at a simple example right away

// bad
const product = {
  name: "name-1",
  id: 1,
};
const copyProduct = Object.assign(product, { name: "name-2", id: 2 });

console.log("copyProduct", copyProduct); // {name: "name-2", id: 2}
console.log("product", product); // {name: "name-2", id: 2}

As a result, we got a mutation of the first object. This is not a bug, everything works as it should if you read about Object.assign(), but the problem is that it creates situations where the developer can forget about this behavior and get an unexpected result. To get the expected result without mutations you need to do

// still not very good
const product = {
  name: "name-1",
  id: 1,
};
const copyProduct = Object.assign({}, product, { name: "name-2", id: 2 });

console.log("copyProduct", copyProduct); // {name: "name-2", id: 2}
console.log("product", product); // {name: "name-1", id: 1}

Here we solved the problem with the mutation, but this structure is very wordy. We have a better option

// good
const product = {
  name: "name-1",
  id: 1,
};
const copyProduct = { ...product, name: "name-2", id: 2 };

console.log("copyProduct", copyProduct); // {name: "name-2", id: 2}
console.log("product", product); // {name: "name-1", id: 1}

With spread syntax, we were able to get rid of an unexpected mutation and the solution became much more concise.

Thank you for reading! This was a spontaneous article, now I'm writing a series of articles about the development of a side project, take a look if you are interested in it. See you soon 👋

Create a JavaScript library. Configure Dev Build using Rollup.js

Alex Shulaev — Thu, 18 Jun 2020 09:40:18 +0000

After writing an MVP for my third-party project (by the way, I have a separate article about this), I wrote a roadmap. One of the points was to create a dev build for convenient work of contributors. And I decided to do it immediately 🤘

Current configuration

To build my tools I use Rollup.js. The config that we wrote earlier looks like this:

import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import {terser} from 'rollup-plugin-terser';

import pkg from './package.json';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default {
    input: 'src/index.ts',
    output: [
        {
            file: pkg.main,
            format: 'umd',
            name: 'Keukenhof',
        },
        {
            file: pkg.module,
            format: 'es',
            name: 'Keukenhof',
        },
    ],
    plugins: [
        typescript({
            rollupCommonJSResolveHack: true,
            clean: true,
        }),
        babel({
            exclude: 'node_modules/**',
            extensions,
        }),
        resolve(),
        commonjs(),
        terser(),
    ],
};

I remind you what plugins we use now:

rollup-plugin-terser - plugin to minimize compiled source code
rollup-plugin-typescript2 - plugin for typescript with compiler errors
@rollup/plugin-babel - plugin for seamless integration between Rollup and Babel
@rollup/plugin-commonjs - plugin to convert CommonJS modules to ES6, so they can be included in a Rollup bundle
@rollup/plugin-node-resolve - plugin which locates modules using

And I use a script to start the build:

"build:lib": "rollup -c",

-c flag is short for --config, the configuration file is at the root of the project.

Updated configuration

We want to get a new build for developer mode with a local dev server with LiveReload support. And the Rollup community has plugins for this.

yarn add rollup-plugin-serve rollup-plugin-livereload -D

Great, the plugins are installed, but we only need them for the build devs, and we'll use the current build in GitHub CI to prepare the library for publication. For this, I'll use two separate Rollup configuration files.

I created a separate directory config/rollup and put two configuration files (rollup.config.dev.js and rollup.config.lib.js) so as not to store everything in the root of the project. rollup.config.lib.js is just the renamed current configuration file. And we'll make small changes to the rollup.config.dev.js package:

import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

import pkg from '../../package.json';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default {
    input: 'src/index.ts',
    output: [
        {
            file: `./example/${pkg.main}`,
            format: 'umd',
            name: 'Keukenhof',
        },
        {
            file: `./example/${pkg.module}`,
            format: 'es',
            name: 'Keukenhof',
        },
    ],
    plugins: [
        typescript({
            rollupCommonJSResolveHack: true,
            clean: true,
        }),
        babel({
            exclude: 'node_modules/**',
            extensions,
        }),
        resolve(),
        commonjs(),
        serve({
            open: true,
            openPage: '/',
            host: 'localhost',
            port: 3003,
            contentBase: ['./example'],
        }),
        livereload({
            watch: ['./example'],
            exts: ['html', 'js', 'css'],
        }),
    ],
};

For plugins and output, we defined a new directory, example, in this directory will contain page layout, styles, and library build. Any change to the files with the extension html, js, css will lead to reload the page. The dev server will be available at the following URLs http://localhost:3003/ and will open automatically after the build.

The layout has the following structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./dist/index.js"></script>
  </head>
  <body>
    ...
  </body>
  <script src="./script.js"></script>
</html>

Now we need to update the scripts to start the build

"build:lib": "rollup --config config/rollup/rollup.config.lib.js",
"build:dev": "rollup --config config/rollup/rollup.config.dev.js -w",

This is very similar to what it was before, only we explicitly specified the paths to configs, since we now have two configs and in the config for build devs we specified the `-w ' flag, this flag is needed in order to monitor files and rebuild on changes.

If everything was done correctly, the build:dev script should lead to the project being built in the example directory. Also, make sure that changing the styles or layout will automatically reload the page. This helps reduce development time

If you are creating libraries that other people can use, you need to take care of the documentation. Documentation should be as simple and clear as possible, so that the person who is just starting to use your project does not experience difficulties.

Dev build is needed for people who will want to participate in the development process, so I have indicated step by step how it works in README.md file.

By the way, I also shot the whole process on the video, you can see it is very short

Links

Keukenhof is the library I'm working on, at the moment it is under active development, but maybe you want to subscribe and follow this step by step

Create a JavaScript library. Build MVP

Alex Shulaev — Sat, 13 Jun 2020 08:42:42 +0000

It's time to use the template that we developed in the previous article 🚀

I want to develop my own small side project. In a nutshell, this will be a JavaScript library for working with modal windows. I want to cover all the steps from creating the library itself (in our case, from creating a template for the library 😄), to publishing documentation and presenting the resulting project

And again, I recorded my entire process on video 👋

Let's start preparing

Creating a repository using a template with a configured build for the project. Then we clone the repository

git clone git@github.com:Alexandrshy/keukenhof.git

and don't forget to install all the dependencies

cd keukenhof
yarn

Since we use the GitHub Actions to build and publish the package, we need to create tokens for GitHub and npm and add them to the secrets

You also need to make the following changes to the package.json file (since it is a copy for the template, it has some irrelevant fields). If you are creating a clean project just add your description

  "name": "keukenhof",
  "description": "Lightweight modal library 🌷",
  "repository": {
    "type": "git",
    "url": "https://github.com/Alexandrshy/keukenhof"
  },
  "keywords": [
    "javascript",
    "modal",
    "dialog",
    "popup"
  ],
  "bugs": {
    "url": "https://github.com/Alexandrshy/keukenhof/issues"
  },
  "homepage": "https://github.com/Alexandrshy/keukenhof",

This is where we finished the preparation, we move on to writing code

MVP Development

Reserve the name of our library in window

export const Keukenhof = ((): KeukenhofType => {})();

window.Keukenhof = Keukenhof;

To describe the Keukenhof type, we need to understand what interface we'll have in MVP. I'll only define the init function which on the basis of markup is to initialize the handler to open the modal

export type ConfigType = {
    selector?: string;
    triggers?: HTMLElement[];
    openAttribute?: string;
    closeAttribute?: string;
    openClass?: string;
};

export type KeukenhofType = {
    init: (config?: ConfigType) => void;
};

The configuration object will have the following fields:

openClass: class name that will be added to the modal window when it opens;
selector: modal window selector with which to interact;
triggers: list of nodes click on which will open a modal window;
openAttribute: data attribute of the element's connection (usually a button) with the modal window;
closeAttribute: data attribute for the element that will register the click and close the current modal window

Write the init function:

/**
 * Initialize modal windows according to markup
 *
 * @param {ConfigType} config - modal window configur
 */
const init = (config?: ConfigType) => {
    const options = {openAttribute: ATTRIBUTES.OPEN, ...config};
    const nodeList = document.querySelectorAll<HTMLElement>(`[${options.openAttribute}]`);
    const registeredMap = createRegisterMap(Array.from(nodeList), options.openAttribute);
};

return {init};

The init function finds a list of elements containing an attribute to open (if this attribute was not overridden in the configuration object, we use the default ATTRIBUTES.OPEN, we have it moved to a separate file with constants). Since one modal window can be opened by clicking on several elements, we need to map all modal windows to all elements that have openAttribute. To do this, we write the function createRegisterMap:

    const createRegisterMap = (nodeList: HTMLElement[], attribute: string) => {
        // Accumulating an object where the key is the modal window selector, and the value is the element that will open the corresponding modal window
        return nodeList.reduce((acc: {[key: string]: HTMLElement[]}, element: HTMLElement): {
            [key: string]: HTMLElement[];
        } => {
            // Get the value from the attribute
            const attributeValue = element.getAttribute(attribute);
            // If there is no value, just skip the item
            if (!attributeValue) return acc;
            // If the element is encountered for the first time, add it to the accumulator and write an empty array
            if (!acc[attributeValue]) acc[attributeValue] = [];
            acc[attributeValue].push(element);
            return acc;
        }, {});
    };

After we received the map of modal windows that need to be initialized, we iterate each element of the map and create instances of Modal:

for (const selector in registeredMap) {
    const value = registeredMap[selector];
    options.selector = selector;
    options.triggers = [...value];
    modal = new Modal(options);
}

Let's start describing the Modal class itself:

/**
 * Modal window
 */
class Modal {

    /**
     * Modal constructor
     *
     * @param {ConfigType} param - config
     */
    constructor({
        selector = '',
        triggers = [],
        openAttribute = ATTRIBUTES.OPEN,
        closeAttribute = ATTRIBUTES.CLOSE,
        openClass = 'isOpen',
    }: ConfigType) {
        this.$modal = document.querySelector(selector);
        this.openAttribute = openAttribute;
        this.closeAttribute = closeAttribute;
        this.openClass = openClass;

        this.registerNodes(triggers);
    }

    /**
     * Add handlers for clicking on elements to open related modal windows
     *
     * @param {Array} nodeList  - list of elements for opening modal windows
     */
    registerNodes(nodeList: HTMLElement[]) {
        nodeList
            .filter(Boolean)
            .forEach((element) => element.addEventListener('click', () => this.open()));
    }
}

export const ATTRIBUTES = {
    OPEN: 'data-keukenhof-open',
    CLOSE: 'data-keukenhof-close',
};

The registerNodes method adds click handlers for buttons with the data-keukenhof-open attribute. I advise you to use constants for string elements to avoid errors and make future refactoring easier. The open method now we can describe in just one line

/**
 * Open moda window
 */
open() {
    this.$modal?.classList.add(this.openClass);
}

Now, we can "open" our modal window 🎉 I think you understand what the close method will look like

/**
 * Close modal window
 */
close() {
    this.$modal?.classList.remove(this.openClass);
}

And to call this method, you need to add click handlers for elements with the attribute data-keukenhof-close. We'll do it when opening a new modal window, so as not to keep handlers for modal windows that are closed

/**
 * Click handler
 *
 * @param {object} event - Event data
 */
onClick(event: Event) {
    if ((event.target as Element).closest(`[${this.closeAttribute}]`)) this.close();
}

We need to bind the this value in constructor

this.onClick = this.onClick.bind(this);

Implementing separate methods for removing and adding click handlers

/**
 * Add event listeners for an open modal
 */
addEventListeners() {
    this.$modal?.addEventListener('touchstart', this.onClick);
    this.$modal?.addEventListener('click', this.onClick);
}

/**
 * Remove event listener for an open modal
 */
removeEventListeners() {
    this.$modal?.removeEventListener('touchstart', this.onClick);
    this.$modal?.removeEventListener('click', this.onClick);
}

We'll add click handlers when opening a modal window, and delete when closing

open() {
    this.$modal?.classList.add(this.openClass);
    this.addEventListeners();
}

close() {
    this.$modal?.classList.remove(this.openClass);
    this.removeEventListeners();
}

Well, that's it, the minimum functionality is ready 🚀 It might seem that our solution is redundant, for a library that simply adds and removes a class. And at the moment this is true, but it gives us the opportunity to expand our functionality in the future, which I plan to do 🙂

Library Usage Example

Link to the repository on GitHub

Link to upcoming improvements in [the Roadmap (https://github.com/Alexandrshy/keukenhof#roadmap)

Conclusion

I hope my article was useful to you. Follow me on dev.to, on YouTube, on GitHub. Soon I'll continue this series of articles and I'll definitely share my results with you 👋

DEV Community: Alex Shulaev

Simple Layout Challenge #4

About

Task

Simple Layout Challenge #3

About

Task

Simple Layout Challenge #2

About

Task

How do you document your side projects?

Simple Layout Challenge #1

About

Task

Create a JavaScript library. Add keyboard controls and improve accessibility support

What is accessibility?

Keyboard controls

Implementing autofocus

Focus control inside a complex element

Focus control

Semantic information

Alexandrshy / keukenhof

Lightweight modal library 🌷

Keukenhof

Table of Contents

Installation

Example

Create a JavaScript library. Add callbacks

Callback

Keyboard control

Alexandrshy / keukenhof

Lightweight modal library 🌷

Keukenhof

Table of Contents

Installation

Example

Create a JavaScript library. CSS animation support

CSS animation

Keyframes

CSS Animation Properties

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

Implement animation support

Create a JavaScript library. Implement Scroll Lock

Add new methods

Scroll behavior

JavaScript best practices for writing clean code. Work with Object

Object creation

Object shorthand

Quotes

Object.prototypes

Destructuring

Object spread

Create a JavaScript library. Configure Dev Build using Rollup.js

Current configuration

Updated configuration

Links

Create a JavaScript library. Build MVP

Let's start preparing

MVP Development

Conclusion

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

`animation-fill-mode`

`animation-play-state`