DEV Community: Wiktor Wiśniewski

How to create modular and lightweight Carousel without any frameworks

Wiktor Wiśniewski — Mon, 08 Nov 2021 15:48:46 +0000

Hi!

I have recently finished the work on the tutorial describing how that kind of elements are being created. Due to their universality, I try to avoid libraries 🧐. They come with huge amount of code that I - as regular developer don't understand.

This time I create my own component and I am facing interesting challenges. How to make it work on mobile and desktop devices? How to make it performant? Can we make it as small as possible?

Aims of this project are:

create a solution for the newest browsers only
avoid website reflows if possible
the animation should be as smooth as possible - even for slow devices
component should be simple
slider should be lightweight and rely on CSS
avoid polyfills
educational purposes
modular - easy to add or remove features to make code size just right *avoid size computations whenever it's possible (e.g. slide gap feature)- in more complex libraries they are hard to handle; it would also cause this tutorial to be too long
the component should be easy to understand and scale so I can use it in future projects instead of including another full of features spaceship that in the end won't do much

This tutorial has a lot of interactions 😅. That's why it's kept in my personal blog. You can find it here:

https://www.wiktorwisniewski.dev/blog/build-simple-javascript-slider

DevTools inspected with DevTools

Wiktor Wiśniewski — Sat, 04 Jul 2020 23:26:15 +0000

A lot of Chrome functionalities (settings, blank pages) are made with a bit of HTML and CSS. It is no different in the case of dev tools.

Follow the link below and open devtools:
devtools://devtools/bundled/devtools_app.html

It's fun 😂

My favorite Front-end hack! What's yours?

Wiktor Wiśniewski — Sun, 05 Apr 2020 12:59:44 +0000

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

CREDITS: https://dev.to/gajus/my-favorite-css-hack-32g3 @gajus

A day ago @luqih posted his hack:
https://dev.to/luqih/my-favorite-front-end-debugging-hack-4p5d

setTimeout(() => { debugger; }, 3000);

I felt inspired to share mine #1 hack. This will help you easily determine the size and spacing of all elements on your website.

Here is JS console version if you don't have access to CSS files:

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
    var domStyle = document.createElement("style");
    domStyle.append(
            '* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
            * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * { background-color: rgba(0,0,255,.2) !important; }\
            * * * * { background-color: rgba(255,0,255,.2) !important; }\
            * * * * * { background-color: rgba(0,255,255,.2) !important; }\
            * * * * * * { background-color: rgba(255,255,0,.2) !important; }\
            * * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
            * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'
    );
    document.body.appendChild(domStyle);
})();

Source: css-layout-hack.js

Happy coding ;)!

In JavaScript, is undefined actually undefined?

Wiktor Wiśniewski — Sat, 04 Apr 2020 17:32:21 +0000

It should be, but it turns out that undefined is a variable. So what happens if we set a value to it? The weird world of JavaScript…

TL;DR undefined is not a restricted keyword so we can name by mistake our variable undefined and set a value to it which will cause bugs during a runtime. Use linters to prevent it from happening.

There is a good reason for using void keyword instead of undefined in your if statements and this is because undefined variable actually might be defined. The reason behind it is not a restricted keyword. Undefined is a property of the global object, so it's a variable in a global scope. Go ahead and type window in your browser console - you will find "undefined" property inside the window object. So:

window.undefined === undefined; // returns true

**What's a void in JavaScript?**

In simple words: void in JS is an operator used to return undefined value.

void 0 == void(0); //true because void 0 is equal to void(0)
void 1 == void(0); //true
void 0 == undefined; //true
void 0 === undefined; //true
void 1241 === void "everything can go here" //true

The above code shows that the void keyword is the best choice when it comes to checking variables for an undefined value.

Disclaimer: at the beginning of the article I wrote that undefined might be defined. That means in some cases "void 0 === undefined" might return false. We will go back to this issue shortly.

What will happen if I define "undefined"?

In modern browsers (including IE11) which support ECMA-262 5th version from 2009 also known as ES5, such a variable still will be undefined because it's read-only.

15.1 The Global Object
The unique global object is created before control enters any execution context.
Unless otherwise specified, the standard built-in properties of the global object have attributes {[[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}.
[...]
15.1.1.3 undefined
The value of undefined is undefined (see 8.1). This property has the attributes { [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }.

Source: ECMAScript Language Specification

If you are used to using let like me, you will get something different:

We get the Identifier 'undefined' has been declared because it was defined - inside a window object. But shouldn't we get an error when we use var anyway? We should! That's why it's good to type at the beginning of each .js file:

"use strict";

Strict mode will prevent us from defining undefined:

I want to name my variable “undefined” anyway.

There is a trick. The above rule specified in 15.1.1.3 applies only to global objects. Local scopes are different:

function someFunction() {
   let undefined = 10;
   console.log(undefined);
}
someFunction(); //logs 10

ES6 standard introduced new let and const keywords. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } . Source: What’s the difference between using “let” and “var”? But there is one little downside:

There is a reason to set a value to undefined. In a jQuery undefined is specified as a parameter to make sure it wasn’t defined before, for example in other included in project script:

jquery.boilerplate.js

;( function( $, window, document, undefined ) { ... }

undefined isn’t really being passed in so we can ensure the value of it is truly undefined. In ES5, undefined can no longer be modified.

How about Node.js?

Turns out we can set a value to undefined in node.js environment as well. But Node.js Supports ES5 so what‘s going on here?

The answer can be found in official Node.js docs:

In browsers, the top-level scope is the global scope. This means that within the browser var something will define a new global variable. In Node.js this is different. The top-level scope is not the global scope; var something inside a Node.js module will be local to that module.

Source: Node.js v13.11.0 Documentation

And this is a huge problem. Now when you are writing your if statements like so:

if (myVariable === undefined) {...}

… you can’t be sure if your variable will be undefined because somebody could have named by mistake, a variable “undefined” tens of lines earlier.

Then how to determine if the variable is undefined?

There are multiple ways to do that:

using null

var something;
something == null; // true
something === null; // false

I don’t like this way because null is not null in JavaScript but is an object, and you have to remember to use ==, not === which nowadays is not recommended or typical.

typeof

var something;
typeof something === 'undefined'; // true
typeof something === undefined; // false

Typeof always returns a string. Back in times when I was a beginner in JavaScript, making my first lines of code it wasn’t obvious for me why I should check for undefined with a string. For this reason, I don’t like doing so but it’s recommended in ESLint so this is an option as well.

check if the variable has a value

var something;
if(something) console.log("is not undefined");

Although it will work I wouldn’t recommend it, because variable something could be set to false which means it has a value and is not undefined anymore.

void 0

var something;
void 0 == something; // true
void 0 === something; // true

I think this is the best way. There is not much to remember because void 0 is always undefined. It looks unusual but it does its job and is easy to type.

No-undefined / no-shadow-restricted-names in ESLint

ESLinter comes with no-undefined and no-shadow-restricted-names rules, which enforces us, to not use undefined anywhere. For this reason (and not only) it’s good to use code linters. You can read more about these rules here:
no-undefined - Rules
no-shadow-restricted-names - Rules

Summary

Try not to use the undefined keyword. It’s not recommended to do so.
Void 0 is good because it’s the most reliable and easy way to determine if variable is undefined or not. Typeof works fine too. It’s totally up to you which option you prefer more.
Using linters (e.g. ESLint) will prevent you from setting values to undefined, so you don’t have to worry about it.
In edge cases, you may need to set undefined just to make sure it’s undefined.