DEV Community: Amer Sikira

How we doubled conversions with one simple button

Amer Sikira — Wed, 23 Apr 2025 16:01:38 +0000

There are times in marketing and UX when flashy ideas and “growth hacks” take center stage. But sometimes, the most powerful wins come from doing something incredibly simple: removing friction.

This is one of those times.

The setup: A tool store with a conversion problem

Our client runs a WooCommerce store that sells electric tools—think drills, grinders, welders, and other professional-grade equipment. But there was a hurdle: their target audience wasn’t always comfortable with online shopping.

Conversion rate was a bit below average, not a lot.

A big portion of their customers weren’t tech-savvy. Some didn’t trust entering their credit card details online. Others would get stuck in the checkout process or simply abandon the cart out of confusion.

The usual "add to cart → checkout → enter all your details → pay online" flow wasn’t working for them. Even though the products were solid and pricing was competitive, something about the experience kept turning users away right before the finish line.

The Idea: Strip it down to the basics

Instead of optimizing for the digital-native shopper, we decided to meet the actual customer where they were.

We added a “One Click Buy” button next to the regular “Add to Cart.” Here’s how it worked:

Users only had to enter their phone number—the name field was optional.
The selected product and user info were sent through WooCommerce like any other order.
The client’s sales team would call the customer directly, confirm the order, and handle the rest manually.

That’s it. No login. No address input. No card info. Just a phone number and a real person on the other end.

Why it worked

This change wasn’t just technical, it was psychological.

We weren’t trying to force a one-size-fits-all funnel. We were solving a real-world problem for a specific audience. That’s why it worked.

Here’s what happened next:

The first few days were quiet. People weren’t sure what to make of this new option.
But then orders started rolling in. Couple of orders here and there.
And then they kept coming.
Within a week, conversions from the new button became the prevalent source of orders compared to the standard checkout flow.

Keep in mind, we weren’t even running an A/B test. We just monitored the orders coming from the new button vs. the regular one. When it became clear that the new flow was outperforming the old, we didn’t hesitate to keep it.

The tech behind it

Technically, this wasn’t a major engineering project. We used an existing WordPress plugin that allowed us to set up quick-buy forms. A few small tweaks later, and it worked exactly as needed.

WooCommerce handled the back end. The form submitted product info + phone number, and the client’s team handled the confirmation call—something they were already doing anyway.

So rather than reinventing the wheel, we made it easier to get rolling.

The human element
One key reason this worked: our client already had a process for calling every customer. That might sound like a burden in eCommerce, but for this business—and this audience—it was the right move.

A call gave the customer peace of mind. It gave the sales team a chance to confirm or even upsell. It built trust, which is often the missing ingredient in online checkouts.

We didn’t have to change the business model, we just had to reduce the friction between intent and action.

Lessons you can apply

This isn’t just a win for one client. It’s a reminder of something we all forget too often in digital:

Your user doesn’t care about your funnel. They care about how easy it is to get what they want.

If your audience isn't 100% comfortable with technology, don’t build for the ones who are. Build for the ones who are buying.

Final thought

Doubling conversions didn’t require a redesign, a rebrand, or a replatforming. It took one button, one phone number, and a little empathy.

It doesn’t have to be beautiful. It has to work.

If you want to connect with me you can find me on LinkedIn.

Rest and Spread Operators Demystified: A Beginner’s Guide to Enhancing Your Programming Skills

Amer Sikira — Thu, 20 Apr 2023 01:05:51 +0000

This article was originally published on webinuse.com
In 2015 ES6 (ECMA Script 6) was introduced. It brought a lot of new and improved features. Two features, among others, that we got with ES6 are rest and spread operators.

If you’ve been learning JavaScript or have tried some general programming, you’ve probably come across these handy little tools. In this article, we’ll explore what rest and spread operators are, the differences between them, and how you can use them to level up your coding skills. So, let’s jump right in!

What are Rest and Spread Operators?

Before we get into the details, let’s clarify what we’re talking about when we mention rest and spread operators. Both operators came with the ES6 (ECMAScript 2015) JavaScript standard.

As you can see from the name, ECMAScript 2015 (ES6 version) was introduced in 2015 and it was a major upgrade from the previous version of JavaScript.

Rest and spread operators are designed to make your life easier when working with arrays and objects. Now, let’s finally see how and why you should learn them.

Rest Operator

The rest operator is denoted by three consecutive dots (…). Its main purpose is to collect the remaining elements of an array or object into a new array or object.

It’s especially useful when you’re dealing with functions that can accept a varying number of arguments.

For example, let’s say you have a function that calculates the sum of all its arguments:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

In this example, the rest operator collects all the arguments passed to the sum function into an array called numbers.

This makes it incredibly easy to handle functions with a variable number of arguments.

Rest operator helps us to, literally, have as many arguments to our function as we want. Read more about an unlimited number of arguments in a JavaScript function.

Spread Operator

Like the rest operator, the spread operator is also represented by three consecutive dots (…). However, its purpose is different. The spread operator is used to expand the elements of an array or object, making it simpler to manipulate and merge data structures.

For instance, if you want to merge two arrays, you can use the spread operator like this:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

As you can see, the spread operator helps you combine arrays with ease, making your code cleaner and more concise.

This syntax is pretty popular with React developers. It is the most commonly used while manipulating React state.

It is also well utilized by the type of developers who propagate that data should be immutable. Meaning that once we set a variable it should hold its data and data’s structure forever, without ever changing it.

This approach to development usually means more typing. But with a spread operator, it’s much easier.

The Difference Between Rest and Spread Operators

At this point, you might be thinking, “Wait, both operators look the same. How do I know when to use which one?” That’s a great question! The key difference between rest and spread operators lies in the way how you use them:

The rest operator collects elements into a new array or object.
The spread operator expands elements from an existing array or object.

In other words, you can think of the rest operator as a “gatherer” and the spread operator as an “expander”.

Imagine you’re working on a jigsaw puzzle. The rest operator is like the process of gathering all the scattered puzzle pieces from the table and placing them into a neat pile.

On the other hand, the spread operator is like taking the pieces from the pile and spreading them out, making it easier to see each piece and find where it fits in the bigger picture.

Both operators have their unique purposes, and understanding their roles will help even complete beginners grasp their usage in the world of programming.

Now that we’ve covered the basics let’s dive deeper into each operator and see how they can help you level up your coding game.

Rest Operator in Detail

As we mentioned earlier, the rest operator is incredibly useful when dealing with functions that accept a varying number of arguments. Let’s take a closer look at how it works and how you can use it in your code.

Collecting Remaining Elements in an Array

One of the most common use cases for the rest operator is to collect the remaining elements in an array. Let’s say you have an array of numbers, and you want to separate the first element from the rest of the elements:

const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;

console.log(first); // Output: 1
console.log(rest); // Output: [2, 3, 4, 5]

In this example, the rest operator collects all the remaining elements in the numbers array (excluding the first element) into a new array called rest.

This technique is particularly useful when working with array destructuring. It helps us extract values in an easy and convenient way. Before the rest operator, you would probably use array loops, or some trick with a .length property.

Simplifying Function Arguments

Another powerful use case for the rest operator is simplifying function arguments. As we saw earlier, the rest operator can easily handle a variable number of function arguments, making it an invaluable tool for writing flexible, reusable code.

Consider the following example, where we create a function that accepts multiple strings and returns a new string with all the input strings concatenated together:

function concatenateStrings(separator, ...strings) {
  return strings.join(separator);
}

console.log(concatenateStrings(" ", "Hello", "world!")); // Output: "Hello world!"

In this example, the rest operator collects all the arguments passed to the concatenateStrings function (excluding the first argument, separator) into an array called strings. This allows the function to accept any number of input strings, making it incredibly flexible and reusable.

The example above is a great example of how we can prevent some unwanted errors.

Instead of using the rest syntax, imagine we used concatenateStrings(separator, stringOne, stringTwo). This would limit us to only two strings. And if you omit any of those, it would throw an error. If you pass more than expected, nothing would happen.

Handling Variable Number of Function Arguments

Similar to the previous example, we can pass only the rest operator as a function parameter.

Imagine you need to create a function that calculates the average of any number of input numbers. The rest operator makes this a breeze:

function average(...numbers) {
  const sum = numbers.reduce((total, num) => total + num, 0);
  return sum / numbers.length;
}

console.log(average(1, 2, 3, 4, 5)); // Output: 3

In this example, the rest operator collects all the arguments passed to the average function into an array called numbers. This allows the function to calculate the average of any number of input numbers with ease.

This function also is not dependent on any number of arguments. It can accept as many as you need and still return the correct result.

Common Pitfalls and Best Practices

As you begin incorporating the rest operator into your code, keep these potential pitfalls and best practices in mind:

Remember that the rest operator can only be used once in a destructuring assignment or function parameter list, and it must appear at the end.
When using the rest operator in a function, avoid using the arguments object, as it can lead to less readable and less efficient code.
Always test your code thoroughly, particularly when using the rest operator with other ES6 features such as destructuring and default parameters.

Spread Operator in Detail

Now that we’ve covered the rest operator, let’s take a closer look at the spread operator and explore its various use cases.

Expanding Elements in an Array or Object

As we mentioned earlier, the spread operator is used to expand the elements of an array or object, making it easier to manipulate and merge data structures. For example, you can use the spread operator to clone an array or object, preserving the original data while creating a new, separate copy:

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];

console.log(clonedArray); // Output: [1, 2, 3]

In this example, the spread operator expands the elements of the originalArray and creates a new array called clonedArray with the same elements. This technique is particularly useful when you need to work with a copy of an array or object without modifying the original data.

Simplifying the Manipulation of Arrays and Objects

The spread operator can significantly simplify the manipulation of arrays and objects in your code. For example, you can use the spread operator to add elements to an array:

const originalArray = [1, 2, 3];
const newArray = [0, ...originalArray, 4, 5];

console.log(newArray); // Output: [0, 1, 2, 3, 4, 5]

In this example, the spread operator expands the elements of the originalArray and creates a new array called newArray with additional elements at the beginning and end.

Real-Life Examples and Code Snippets

Let’s look at a few more examples of how the spread operator can be used in real-life programming scenarios.

Combining Arrays Using Spread Operator

Suppose you need to combine multiple arrays into a single array. With the spread operator, you can achieve this quickly and easily:

const fruits = ['apple', 'banana', 'orange'];
const vegetables = ['carrot', 'broccoli', 'pepper'];

const combinedArray = [...fruits, ...vegetables];
console.log(combinedArray); // Output: ['apple', 'banana', 'orange', 'carrot', 'broccoli', 'pepper']

Cloning Objects Using Spread Operator

Imagine you need to create a copy of an object with some additional properties. The spread operator makes this a breeze:

const originalObject = {name: 'John', age: 30};
const updatedObject = {...originalObject, city: 'New York', occupation: 'Software Developer'};

console.log(updatedObject); // Output: {name: 'John', age: 30, city: 'New York', occupation: 'Software Developer'}

In this example, the spread operator expands the properties of the originalObject and creates a new object called updatedObject with additional properties.

Using Spread Operator with Strings

The spread operator can also be used with strings, expanding them into arrays of individual characters:

const string = 'hello';
const characters = [...string];

console.log(characters); // Output: ['h', 'e', 'l', 'l', 'o']

In this example, the spread operator expands the characters of the string and creates a new array called characters.

Common Pitfalls and Best Practices

As you begin incorporating the spread operator into your code, keep these potential pitfalls and best practices in mind:

Be aware that the spread operator creates a shallow copy of an array or object. This means that if your original data structure contains nested arrays or objects, the spread operator will only create a new reference to the nested data rather than a deep copy. In such cases, you may need to use other methods, such as JSON.parse(JSON.stringify()), to create a deep copy of your data.
When using the spread operator with objects, make sure to consider the order of properties. If you have duplicate properties in the original and new objects, the latter property will overwrite the former.
Remember that the spread operator can be used in various places, such as function calls, array literals, and object literals. Make sure to familiarize yourself with these different use cases to maximize their potential in your code.

Conclusion

Congratulations! You’ve made it through our comprehensive guide to rest and spread operators. With your newfound understanding of these powerful tools, you’re well-equipped to write cleaner, more efficient, and more versatile code.

As a beginner in web development, it’s essential to get comfortable with rest and spread operators, as they are widely used in modern JavaScript and can significantly enhance your programming skills.

So, don’t hesitate to practice using them in your projects and explore their various applications.

Remember, the rest operator is your go-to “gatherer” when you need to collect elements into a new array or object, while the spread operator is your trusty “expander” when you need to simplify the manipulation of arrays and objects.

Keep honing your coding skills, and before you know it, you’ll be a master of rest and spread operators in no time. Good luck, and happy coding!

I tried Google Cloud products and here is what every beginner should know

Amer Sikira — Wed, 30 Nov 2022 19:30:53 +0000

This post was originally published on webinuse.com

I’ve been a web developer for quite some time. More than a decade (I am getting old, I know 😅). So far, my projects were usually predefined in terms of the stack. I worked a lot for the government and you know those guys. They, usually, use mature stuff. The stuff that has been long on the market.

For example, I’ve built CMS for Federal Journalist Association, but they explicitly wanted it with PHP, MySQL, HTML, CSS, and Vanilla JS. I’ve tried to tell them that there are more exciting things, but they were stubborn.

Up until this point, my experience with Google Cloud (Firebase) was minimal. I used Firestore for some small stuff, and I used auth for a few projects, but nothing serious.

Lately, my company got a project for banking software. They’ll use it for better track of pre-loan documents (this is obviously not the full story, but there is this little thing called NDA 😁). We’ve talked about the stack and we decided that it will be React, NodeJS, along with GC products.

Since I had experience with MERN, I was not worried. I decided to dive into GCP. A little disclaimer: I have zero experience with other cloud providers like AWS and Azure. So some of my views may be biased a bit. Also, since I developed this using NodeJS and ReactJS I will stick to these two technologies, and I’ll I’m going to say is from this POV.

Starting out

Starting with GCP is super easy. All you have to do is head over to Firebase Console and create a project. After you do that you have a few options to choose from.

This is where I encountered my first problem. I had no idea that you can use Firebase SDK and Firebase Admin SDK. The first one is for front-end tech, like ReactJS. The latter one is for back-end tech, like NodeJS.

Front-end

If you decide to use Firebase just on front-end which is awesome for building serverless apps all you have to do is go to your project’s root and run

npm install firebase

After that, you open your .env file and save all the required keys. Don’t forget to add REACT_APP_ before your variable names.

Here is an example of the keys:

    REACT_APP_API_KEY="AIzaSEsfdoiweRfsadljffaiower234ER",
    REACT_APP_AUTH_DOMAIN="your-app.firebaseapp.com",
    REACT_APP_PROJECT_ID="your-project-id",
    REACT_APP_STORAGE_BUCKET="your-app.appspot.com",
    REACT_APP_MESSAGING_SENDER_ID="1234567",
    REACT_APP_APP_ID="1:23432:web:234423ab234243cd21323"

You’ll get all those keys as soon as you create your project. But don’t worry you can find them later under Project Settings.

I would also recommend installing React Firebase Hooks from NPM. A library that makes it 100x easier to use Firebase with React.

Back-end

Using Firebase on the back end is almost the same. The only difference is that you install Firebase with:

npm install firebase-admin

It does have some slightly different API and you should really take care of that, otherwise, you would end up like me solving bugs for hours only to realize that you used the wrong API.

One piece of advice is when searching Google for solutions always use %QUERY% firebase admin. This way, you will mostly end up with the right solutions.

Other things

Obviously, the easiest way to start with either of those is to open Firebase YouTube Channel and take a look at some intro videos. After that, you should just read the docs. Most of the problems that you’ll face can be solved by simply reading documentation. At least in the beginning. For everything else there is StackOverflow 🤣.

Now, let’s take a look at some of the benefits of GCP and why should you use it.

Authentication

One of the main reasons I wanted to use GCP is authentication. It’s really simple and easy to use. You set up the type of auth you want to use, in the console, and then with just a few simple lines of code, you have authentication.

As I’ve mentioned earlier you get a lot of help from React Firebase Hooks. There are also some great tutorials online with ready-to-use code snippets.

You can log in, log out, register, authenticate, and delete users from the front end. You can also set up additional authentication, if needed, via the back end. It’s really easy because Google uses JWT and it has all APIs for your to use, out of the box.

Database

There are two types of databases that you can use (there are more but these two are more than enough for most projects).

Realtime database and Firestore database. To learn more about the Realtime database you can visit this link. If you also want to learn more about Firestore, you can do so here.

Both of them are very easy to use. If you ever used MongoDB with Mongoose, that’s almost it. Even easier in my humble opinion.

You can use DB either with ReactJS, to create serverless applications, or with NodeJS for more robust and customized solutions.

Storage

Another great thing about GCP is storage. Upload is simply 🤯. All you have to do is provide a path to your file and that’s it. Everything else is done by Google. How cool is that?

You can upload, delete, modify, basically do anything with those files just providing your Storage path.

I really like that part.

Hosting

Now, there are two different types of hosting with Google. I am saying this primarily for those who are coming from old-school languages like PHP.

Before we used to have some hosting, usually with cPanel or Plesk and we would put all our code there.

Now you use hosting to host your front-end stuff. It’s quite easy to use.

All you have to do is install Firebase CLI. After that, you log in to your desired account and initialize hosting with firebase init hosting then just a few little steps and that’s it.

If you want to run your code locally, instead of npm start (for React) you can use firebase serve --only hosting.

IMHO, this is better because you immediately can fix some bugs, before pushing to your server. Once you are ready to push just type in your console firebase deploy –only hosting and in a couple of seconds you should see your code up and running.

Functions

Functions are also hosting, but for your back-end. It works in the same way as your front end hosting except for one small detail.

The first thing is to install Firebase CLI, if you haven’t already, then you just type npm install -g firebase-tools in the folder where your project is.

In order for your code to work on Cloud Functions you have to wrap your app in a functions wrapper. I had a bit of a problem with this, but this video really saved my day.

Summary

There are many other things you can do with Firebase and GCP, but IMHO this is all one beginner needs to know to build a fully functional app.

After this, you can dive into different databases, computing engines, etc.

I am really hooked up to GCP and I think I will hardly ever decide to change it. I know that a lot of people are saying that AWS is better, and cheaper, but I don’t care. I like GCP and it fully suits my coding style.

If you have any questions you can write them in the comments or you can reach me on Twitter.

Top 3 ways to easily detect when a user leaves a page using JavaScript

Amer Sikira — Wed, 23 Mar 2022 19:12:45 +0000

This article was originally published on webinuse.com

There are times when we need to detect when a user leaves a web page or clicks on a link. Sometimes we use this data to change something on the website, sometimes to send analytics and sometimes we just need to know this because of something else.

In this article, we are going to cover the top 3 easiest ways how we can detect when a user leaves the page. Unfortunately, each and every one of these ways has some flaws, but also it has its application to some situations.

1. Detect exit before page start unloading

As per MDN: The beforeunload event is fired when the window, the document, and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

This means that when we click on a link, or we want to close the tab, or browser, or anything that would remove our current link from the browser, one moment before the browser starts doing that action will fire beforeunload event.

Let’s say we clicked some link. One moment before the browser starts opening this new link, it will fire the event.

This event can be used to send some data to the back end, or to change something in our localStorage, or whatever we need to do.

const beforeUnloadListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("beforeunload", beforeUnloadListener);

We need to keep in mind though that this event is not reliably fired. There are some issues with it. It does not always detect when a user leaves a web page, especially on mobile devices. For more info on issues and other data, we can visit MDN.

2. Detect when a user leaves a web page using pagehide event

Similar to beforeunload event, pagehide is fired when a user is leaving the current page, e.g. clicking the back button. But, according to MDN, same as beforeunload the pagehide event is not always reliably fired.

const pageHideListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("pagehide", pageHideListener);

3. visiblitychange event

The most reliable way to detect when a user leaves a web page is to use visiblitychange event. This event will fire to even the slightest changes like changing tabs, minimizing the browser, switching from browser to another app on mobile, etc. More info about this event can be found on MDN.

This is an excellent way to send some analytics to our back end and is shown in the example below.

document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
};

NOTE: This event is excellent for sending analytics, and similar, data to the back end, but if we want to send information if a user still has opened a certain page we should use either the first two events or we should ping user every few seconds.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Everything we need to know about CSS Borders.

Everything we need to know about CSS Borders

Amer Sikira — Thu, 16 Dec 2021 10:12:10 +0000

This article was originally published on webinuse.com

The CSS border properties allow us to style element's border. We can set the width, style, radius, and color of element's border. We can style borders in three different ways.

Specifying CSS border properties individually
Specifying every border individually
Using shorthand property

Specifying CSS border properties individually

There are four properties that we can use to style borders.

border-style property that specifies the border type
border-color is used to specify the color of the border(s)
border-width specifies how wide/thick our border is
border-radius property is used to specify the amount of radius of the border

Border style

border-style property is used to specify the type of the border we are going to use. There are several predefined values that we can use.

none - without any type
solid - solid border. Probably the most popular choice
dashed - dashed border
dotted - dotted border
double - double border
groove - 3D grooved border, works with border-color value
ridge - 3D ridged border, works with border-color value
inset - 3D inset border, works with border-color value
outset - 3D outset border, works with border-color value
hidden - hides border

Border color

CSS border border-color property is used to specify the color of the border. It accepts any type of color value like HEX, HSL, RGB, RGBA, etc.

NOTE border-color property can be used, only, with other CSS border properties, not alone. If used alone, it does not work because it has no border to change color.

Border width

border-width property can be used with custom size expressed in pixels, em, rem, vw, vh, almost anything except %, or we can use three of the predefined values: thin, medium, thick. If no width is specified, the default width of the border is medium.

NOTE border-width property must be used with border-type property, otherwise it does not work.

Border radius

We all love those rounded corners, right? In order to make one we have to use border-radius property. This CSS border property allows us to specify the amount of "roundness" we want. We can use any CSS unit to specify the value for border-radius.

Specifying every border individually

We can specify every border individually, by refering directly to that exact border. There are four options:

border-top
border-right
border-bottom
border-left

When using any of those options, we have to group values in single value, using space as delimiter. Order of the values is: border-width, border-type, border-color. We can specify every value except the one for radius. That is because, border-radius has its own way of specifying such things. Let's see an example.

Specifying border radius for every border individually

To specify border radius for any border individually we have to use some/all of the following CSS border properties:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Now, we can specify border radius for any of those corners, using any of CSS Units.

Using shorthand property

We can leverage CSS' ability to declare multiple values, using single property.

    border-width: 1px 2px 3px 4px;
    border-color: red blue green yellow;
    border-style: solid dashed dotted solid;

This gives us power to apply different styles to all/some borders in single line. The only rule that we have to follow is that values are ordered in following way: top, right, bottom, left. Meaning starting from top clock-wise.

If all four borders are the same, there is even shorter syntax.

    border: 1px solid red;

Same as we have mentioned above, there is strict order of the values. 1. is always border-width, 2. is always border-style, and 3. is always border-color. Order of the items must be respected.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like JavaScript String replace method.

JavaScript Object Keys

Amer Sikira — Fri, 26 Nov 2021 08:53:53 +0000

This article was originally published on webinuse.com

We have already mentioned JavaScript Object Keys when we spoke about Object manipulation in JavaScript. In this article, we are going to cover Object.keys() in-depth.

What is the Object?

According to MDN, the Object class represents one of JavaScript’s data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

The Object is one of the most complex JavaScript data types. It can hold any other data type. It can hold functions, also. Here is an example of some objects.

//The first way of creating Object in JavaScript

const obj = {
    id: 1,
    name: "John",
    username: "Doe"
}

//The second way of creating Object in 
//JavaScript using Object constructor.
function Obj(id, name, username) {
    this.id;
    this.name;
    this.username;
}

const user = new Obj(1, 'John', 'Doe');

//The third way of creating object in JavaScript 
//is by using ES6 object literalls

let id = 1;
let name = 'John';
let username = 'Doe';

const obj = {
    id,
    name,
    username
}

What are JavaScript Object Keys?

Every JavaScript Object consists of keys and values. The key is the “name” by which we can call a value. Let’s make an example.

    const obj = {
        id: 1,
        name: "John",
        username: "Doe"
    }

In our example, keys are id, name, username, and values are 1, “John” and “Doe”. But there is a difference between the Object key, which is “the name” and Object.keys() method.

What is JavaScript Object.keys() method?

The Object.keys() method returns an array of a given object’s own enumerable property names, iterated in the same order that a normal loop would, as per MDN.

This means that when we use Object.keys() it will return an array of strings. Those strings will be the keys of the Object.

let obj = {
    id: 1,
    name: 'John',
    username: 'Doe'
}

console.log(Object.keys(obj));

//Result:
//(3) ['id', 'name', 'username']

One small thing though is that if the keys are numbers than Object.keys() will return those number in ascending order, regardless of their order as keys in Object.

let obj = {
    1: "One",
    102: "One hundred and two",
    25: "Twenty five",
    64: "Sixty four"
}

console.log(Object.keys(obj));

//Result:
//(4) ['1', '25', '64', '102']

If there is a mix of letters and numbers then JavaScript Object Keys will firstly return numbers in ascending order, then letters in the order they appeared.

let obj = {
    5: "Five",
    'c': "Letter c",
    1: "One",
    'a': "Letter a"
}

console.log(Object.keys(obj));

//Result:
//(4) ['1', '5', 'c', 'a']

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like JavaScript Array length – the definitive guide.

JavaScript Array length – the definitive guide

Amer Sikira — Wed, 24 Nov 2021 10:11:08 +0000

This article was originally published on webinuse.com

JavaScript Array length property is something we use, almost, every time we work with an array. But, often, we forget how powerful this property can really be.

What is JavaScript Array length property

The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array, as per MDN.

What does this mean? This means that length property “belongs” to Array data type and that it, either, returns the number of elements or sets the number of elements. Since the Array index is zero-based, the integer that is returned by length must be greater than the highest index by 1.

Dense and sparse arrays

There are two types of Arrays in JavaScript: dense and sparse. JavaScript Array length property gives different results for these two types. That is why we said that length must be greater than the highest index by 1. This means that sometimes .length property doesn’t actually return the exact number of elements, but rather the highest index plus 1. In order to explain this, we need to take a look at the difference between dense and sparse arrays.

Dense arrays

Dense arrays are the type of arrays that we usually work with.

const arr = ["Audi", "BMW", "Mercedes"];

This is a typical example of a dense array, the type of array we are familiar with and work with.

JavaScript Array length property will always return the exact number of elements when it comes to dense arrays.

const arr = ["Audi", "BMW", "Mercedes"];

let length = arr.length;

console.log(length);
// Result:
// 3

let highestIndex = arr.length-1;

console.log(highestIndex);
// Result:
//2

As we can see, .length returned 3 which is the exact number of items in the array arr. The highest index is 2. Let’s try to add elements to an array and empty an array, and then check an index and the length.

let arr = ["Audi", "BMW", "Mercedes"];
/**
 * We know that arr.length === 3
 * Let's add an element to array
 * */
arr.push("Ferrari");

let length = arr.length;

console.log(arr.length);
// Result:
// 4

/**
 * In previous example highest index
 * was 2, let's check it now, after
 * we have added another element
 * */

console.log(arr.length-1);
// Result:
//3

//Let's empty our array
arr = [];
console.log(arr.length);
// Result:
// 0

Once we have emptied an array, it is pointless to check for index, because there is nothing inside our array.

Sparse arrays

What is a “Sparse array?” It is, basically, an array with holes. This means that sparse array doesn’t, necessarily, start at 0. Also, this means that sparse arrays don’t have sequential elements, there can be cases when there is not element after element, but rather a hole. Let’s take a look at several examples.

let arr = ["Audi", "BMW",, "Mercedes"];

let arr2 = [,,,,"JavaScript"];

let arr3 = []
arr3[50] = "Python";

In the first variable arr, we have 3 elements and “hole”/”empty space” on index 2. The second variable has 4 empty indexes and on the fifth we have "JavaScript". arr3 variable is created as an empty array. And then we assigned "Python" on index 50. This means that there are 50 empty places before "Python", or 49 indexes. These were all examples of sparse arrays. Now, let’s use the JavaScript Array length property on all of those, to see what will happen.

let arr = ["Audi", "BMW",, "Mercedes"];
console.log(arr);
//Result:
//(4) ['Audi', 'BMW', empty, 'Mercedes']

let arr2 = [,,,,"JavaScript"];
console.log(arr2);
//Result:
//(5) [empty × 4, 'JavaScript']

let arr3 = []
arr3[50] = "Python";
console.log(arr3);
//Result:
//(51) [empty × 50, 'Python']

As we can see in the example above console.log() returned more than length. Even though we expected an integer, we got an integer plus array. This is because the browser is aware that this is a sparse array and it gave us the heads up. Also, wherever we had “hole” browser returned empty.

Manipulate array with JavaScript Array length property

JavaScript Array length property allows us to change the array’s length, by extending it, shortening it, or emptying it.

Extend array

When we use the JavaScript Array length property to extend an array what do we get? A Sparse Array. Here is an example.

let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3

arr.length = 5;
console.log(arr);
//Result:
//(5) ['Audi', 'BMW', 'Mercedes', empty × 2]

In the example above we used our standard array and then we used .length which returned 3. After that, we used JavaScript Array length’s ability to mutate array and we set the array’s length to 5. When we console logged arr again we saw that, now, arr has a length of 5 and that two empty indexes are added at the end of it. So, basically, we got a sparse array.

Shorten an array

As we said, the JavaScript Array length property gives us the ability to shorten an array. When we use .length property, it just takes the exact number of elements that we provided from the beginning of the array. The rest of the elements are discarded and the array is mutated.

let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3

arr.length = 1;
console.log(arr);
//Result:
//['Audi']

We have shortened our array to 1 element, and only the first element is kept. The rest of them are deleted.

Empty an array

We can empty an array using JavaScript Array length. Once we pass 0 as our array’s length, our array will become empty.

let arr = ["Audi", "BMW","Mercedes"];
console.log(arr.length);
//Result:
//3

arr.length = 0;
console.log(arr);
//Result:
//[]

As we can see from the code snippet when we set our length to 0, console.log() returned an empty array.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to create custom stackable toasts?

How to create custom stackable toasts

Amer Sikira — Tue, 23 Nov 2021 09:20:46 +0000

This article was initially published on webinuse.com

Whenever we build some app there is a chance we are going to need stackable toasts. Toasts are basically notifications that inform users of some action that they can’t control. E.g. network connection lost, data saved, there is an error. Sometimes we need to show multiple notifications at once, that is where stackable toasts are coming in handy.

The first thing we are going to do is create a basic HTML template.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

We can use VSCode and Emmet. When we type in html:5in an empty .html file, and then we press TAB, Emmet will create the same boilerplate as above.

Add some JavaScript

Now we need to add some JavaScript to our app.

function createToast(heading = "No heading", message = "No message") {
  //Create empty variable for toasts container
  let container;
  //If container doesn't already exist create one
  if (!document.querySelector("#toast-holder")) {
    container = document.createElement("div")
    container.setAttribute("id", "toast-holder");
    document.body.appendChild(container);
  } else {
    // If container exists asign it to a variable
    container = document.querySelector("#toast-holder");
  }

  //Create our toast HTML and pass the variables heading and message
  let toast = `<div class="single-toast fade-in">
                  <div class="toast-header">
                    <span class="toast-heading">${heading}</span>
                    <a href="#" class="close-toast">X</a>
                  </div>
                  <div class="toast-content">
                    ${message}
                  </div>
               </div>`;

  // Once our toast is created add it to the container
  // along with other toasts
  container.innerHTML += toast;

}


createToast();
createToast("This is heading", "This is the message");

Let’s analyze our code snippet. We created a function createToast(). This function accepts two parameters: heading and message. These two will be passed to our toast as toast heading and toast content. If we omit those two parameters then for heading the value will be 'No heading' and for the message value will be 'No message'.

After that, we have created an empty container variable. To this variable, we will assign #toast-container. Why did we do this? Why not creating div in HTML? Because we are creating stackable toast dynamically and we want to have full control over the page. We don’t want this container to mess with our layout. Also, this means less CSS code and less HTML code. It is not much, but baby steps.

Then, we created HTML for our toast, and we passed our variables from the beginning heading and message. After this HTML is created, we add a toast to our container. As we can see we called function two times. The first time we passed no parameters, and the second time we passed both parameters. This is what we got.

Screenshot of the result

Let’s beautify our stackable toasts

Since we have no CSS, everything is just “standing” there waiting for us. So let’s add some CSS.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
#toast-holder {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.single-toast {
  width: 200px;
  border-radius: 5px;
  background-color: white;
  color: #5b5b5b;
  margin-bottom: 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  transition: .3s;
  max-height: 100px;
  display: flex;
  flex-direction: column;
}

.toast-header {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}
.close-toast {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}
.toast-content {
  padding: 10px 10px 5px;
}

.fade-in {
  animation: fadeIn linear .5s;
}

.fade-out {
  animation: fadeOut linear .5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    max-height: 0px;
  }

  100% {
    opacity: 1;
    max-height: 100px;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    max-height: 100px;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

The first thing we did is we made sure that nothing had margin or padding and that box-sizing is set to border-box. This part of the code makes sure that we do not have weird overflows. After that, we set position:fixed on our container so it doesn’t mess with the page layout. Also, we made sure that it is on the right side of the screen because that is normally where a user would expect it. Apart from this, we set display: flex; flex-direction: column;, because we need toasts to be stacked on top of each other, not side by side.

Then, we added some styling for our stackable toasts. The only thing that, probably, needs explaining is max-height. In CSS we can’t animate height, but we can max-height. That is the reason why we used this property. Also, we created two animations fadeIn and fadeOut. So we can animate the entrance and exit, later. This is what we got now.

Screenshot of the result

As we can see, the layout has changed and also the styling of our toasts is changed. Now, we need to create a function for removing our stackable toasts. We don’t want them there forever.

function removeToast(e) {
  //First we need to prevent default
  // to evade any unexpected behaviour
  e.preventDefault();

  //After that we add a class to our toast (.single-toast)
  e.target.parentNode.parentNode.classList.add("fade-out");

  //After CSS animation is finished, remove the element
  setTimeout(function() {
    e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
  }, 500);
}

We created removeToast() function and we passed an event parameter to it. Since we are clicking on the a tag, we want to prevent any unwanted behavior, hence e.preventDefault(). After that, we assigned a new class .fade-out to our .single-toast so we have nice exit animation. After that animation is finished, we remove toast entirely from the DOM.

Now, we need to pass this function to our createToast function and create eventListener. Let’s see our revised createToast() function.

function createToast(heading = "No heading", message = "No message") {
  //Create empty variable for toasts container
  let container;
  //If container doesn't already exist create one
  if (!document.querySelector("#toast-holder")) {
    container = document.createElement("div")
    container.setAttribute("id", "toast-holder");
    document.body.appendChild(container);
  } else {
    // If container exists asign it to a variable
    container = document.querySelector("#toast-holder");
  }

  //Create our toast HTML and pass the variables heading and message
  let toast = `<div class="single-toast fade-in">
                  <div class="toast-header">
                    <span class="toast-heading">${heading}</span>
                    <a href="#" class="close-toast">X</a>
                  </div>
                  <div class="toast-content">
                    ${message}
                  </div>
               </div>`;

  // Once our toast is created add it to the container
  // along with other toasts
  container.innerHTML += toast;


  /**
   * THIS PART WE HAVE ADDED
   * */

    //Save all those close buttons in one variable
    let toastsClose = container.querySelectorAll(".close-toast");

  //Loop thorugh that variable
  for(let i = 0; i < toastsClose.length; i++) {
      //Add event listener
    toastsClose[i].addEventListener("click", removeToast,false);
  }

}


function removeToast(e) {
  //First we need to prevent default
  // to evade any unexpected behaviour
  e.preventDefault();

  //After that we add a class to our toast (.single-toast)
  e.target.parentNode.parentNode.classList.add("fade-out");

  //After CSS animation is finished, remove the element
  setTimeout(function() {
    e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
  }, 500);
}


createToast();
createToast("This is heading", "This is the message");

The only thing that is left is to remove container if it is empty.

function isEmpty(selector) {
    return document.querySelector(selector).innerHTML.trim().length == 0;
}

What we did here is we checked if innerHTML is empty. But before that, we made sure that we trimmed empty spaces. This way we prevented empty spaces to be “counted” as text by JavaScript. This function needs to be added to our removeToast() function. Why there? Because we want to make sure that this is checked after the stackable toast is removed. Let’s check our improved removeToast() function.

function removeToast(e) {
  //First we need to prevent default
  // to evade any unexpected behaviour
  e.preventDefault();

  //After that we add a class to our toast (.single-toast)
  e.target.parentNode.parentNode.classList.add("fade-out");

  //After CSS animation is finished, remove the element
  setTimeout(function() {
    e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);

    /**
     * WE HAVE ADDED THIS PART
     * */

    if (isEmpty("#toast-holder")) {
        console.log(isEmpty("#toast-holder"));
        document.querySelector("#toast-holder").parentNode.removeChild(document.querySelector("#toast-holder"));
    }
  }, 500);
}
function isEmpty(selector) {
    return document.querySelector(selector).innerHTML.trim().length == 0;
}

We can checkout live example of our stackable toast on CodePen.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to easily add a WordPress menu to a custom theme.

Embed assets in a WordPress theme

Amer Sikira — Mon, 22 Nov 2021 15:17:04 +0000

This article was originally published on webinuse.com

In the last article, we talked about How to simply convert any HTML template into a WordPress theme in under 10 minutes. Today we are going to continue our journey on creating a WordPress theme out of any HTML template. We are going to see how to embed assets in a WordPress theme.

In today’s article, we are going to continue our journey, but we are going to use a real template. This template is courtesy of Nathan and this template can be found for FREE on aptex.gumroad.com.

In order to be able to embed assets in a WordPress theme first thing we need to do is create a file called functions.php.

What is functions.php

Functions.php is the file where we extend our theme’s functions. It is one of the default WordPress files, and it acts like our theme’s plugin. We leverage WordPress hooks and functions to achieve new or add existing functionality using PHP.

If we want to add widget area, woocommerce support, menu support, and a lot of other things, we do that by editing functions.php.

According to WPBeginner the functions.php file automatically loads when you install and activate a theme on your WordPress site.

For more information about functions.php, we can visit official Developer Resources on WordPress.org.

How to create functions.php

We need to create functions.php at the root of our theme. In our last article, in the end, we explained how and where themes are uploaded.

After we create our functions.php we are going to paste some code inside. For now, we are going to assume that the only thing we want to include is style.css file.

WordPress has a special hook for embedding assets and it is called wp_enqueue_style(). This hook, or function, is used when we want to enqueue style in our WordPress theme. Style is anything that is being used for styling our website, like CSS or fonts. This is the only, proper, way to embed assets in a WordPress theme.

Let’s take a look at wp_enqueue_style() function parameters.

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

Enqueue style parameters

According to official WordPress docs as the first parameter we need to pass the $handle, that is the name of stylesheet, and it should be unique. The second parameter is $src and it holds the source of the style that we want to embed.

This source can be anything. From third-party URLs like https://cdn.example.com/path-to-style, or path to a local file. Path to local file is relative to WordPress root directory. Also, when using external stylesheets, wp_enqueue_style() doesn’t need protocol like http or https. It is enough to start our link with a double forward slash, //. There is also another option when we want to use path relative to our theme, but we will look at that later.

Why $handle needs to be unique? Because of the third parameter, $deps. This parameter holds an array of handles that this stylesheet depends on.

The fourth parameter is $ver that holds the current version of the stylesheet. This is used for multiple purposes like caching or making sure that our site serves the right stylesheet. NOTE: This should be updated every time we update our stylesheet.

The last parameter is $media. We pass media query to this parameter if it is applicable. E.g. (max-width: 1024px).

How to enqueue style.css

The first thing we need to do is embed style.css stylesheet in our theme.


<?php

/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */


/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Let’s analyze our code. After a few comments, we created a function theme_scripts. Inside that function, we embedded our style.css file. Instead of using a path, as everyone would expect, there is a built-in WordPress function for getting the default stylesheet. This function, get_stylesheet_uri(), retrieves stylesheet URI for the current theme.

After our function theme_scripts we used built-in WordPress function, hook, add_action that will register our function. We will not get into writing more about add_action, but we will say that if we want to enqueue script, or enqueue style, we need to use this exact same code.

add_action( 'wp_enqueue_scripts', 'function_name' );

We only need to change 'function_name' parameter to match our function’s name.

How to embed other assets to our WordPress theme

Let’s say we want to add Google Fonts, we only need to add another wp_enqueue_script to our theme_scripts function.

<?php

/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */


/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );

    //We have added this line of code
    wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Roboto+Slab:wght@900&display=swap', array(), 0);

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

What we did? We picked a Google Fonts, we copied the link, and pasted it as $src.

How to enqueue script

Instead of using wp_enqueue_style function, we are going to use wp_enqueue_script function. It is the same as wp_enqueue_style only the last parameter is different.

Instead of $media parameter we have $in_footer parameter. It is false by default. This parameter decides whether our script will be embedded in header or footer. If it is false then our script will be embedded in header, otherwise in footer.

Let’s enqueue script to our theme. Since we are using Portfolio HTML template we will enqueue app.js file from the theme root that comes with the template.


<?php

/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */


/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );
    wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Roboto+Slab:wght@900&display=swap', array(), 0);

    //We have added this line of code
    wp_enqueue_script( 'default-js', get_template_directory_uri() . '/app.js', array(), 0, true );

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

As shown in the example above, we just added wp_enqueue_script to theme_scripts. But there is one thing we haven’t seen before. It is get_template_directory_uri() function. This function basically retrieves the URI of the currently active theme.

If you want to learn more about what is WordPress you can check this awesome course Building websites with WordPress by Nat Miletic. This course is excellent for those who want to start with WordPress. Nat is teaching us what is WordPress, what can we use it for, how can we use it, in a really nice and simple way.

Affiliate

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to bind events to dynamically created elements in JavaScript.

How to bind events to dynamically created elements in JavaScript

Amer Sikira — Fri, 19 Nov 2021 16:44:19 +0000

This post was originally published at webinuse.com

When working with JavaScript and DOM, we often find ourselves in need of creating some elements dynamically. Especially when working with some tables and fetching data from the server. Sometimes we have to bind events to dynamically created elements. And that is exactly what we are going to do now.

When jQuery was in use (it is still today, but not as much as before) we would do by simply attaching the event to body, and then attaching it to the element. Basically, jQuery would find that element for us in the DOM tree and run the desired function. Let’s see an example.

$("body").on("click", "dynamic-element", function(){});

In the example above, jQuery would attach events to dynamically created elements, or any elements for that matter, that we have passed as a parameter.

Bind events to dynamically created elements through bubbling

The first way we are going to try is to attach events to dynamically created elements using a method of bubbling. What does this mean? This means that we are going to target the parent instead of the actual element. And, then, we are going to check if a user clicked on the element or somewhere else.

<div id="container">
    <button class="click-btn">The First Button</button>
</div>

<script>
    /**
     * First, we select parent element
     * */
    const container = document.querySelector("#container");

    /**
     * After that we add event listener to that element
     * */
    container.addEventListener("click", function(e){
        /**
         * Then, we check if we clicked on an element that has
         * .click-btn class
         * */
        if (e.target.classList.contains('click-btn')) {
            /**
             * If we have clicked on such element we
             * run some function
             * */
          alert(`You have clicked ${e.target.innerHTML}`);
        }
    })

    /**
     * Now let's create our dynamic element
     * Another button
     * */
    const btn = document.createElement("button");
    /**
     * In order for event bubbling to work,
     * we have to add the same class as we used
     * in our eventListener
     * */
    btn.className = "click-btn";
    //Then we add some text inside that button
    btn.innerText = "The dynamically created button";
    //And we append it
    container.appendChild(btn);
</script>

As we can see in the example above, we have added eventListener to the parent, but it will run only if a user clicks on an element with a class click-btn.

After we’ve done that, we dynamically created another button with the same class. And by the logic of things, eventListener will run the same function on that button, as on the one we created in HTML.

How to dynamically attach events to dynamically created elements

The second way to bind events to dynamically created elements is by creating a function and running that function on the elements we’ve created. Sounds confusing? Let’s create some examples.

<div id="container">
    <button class="click-btn">The First Button</button>
</div>

<script>
/**
 * First let's create a function
 * */

function dynamicFunction(e) {
    e.preventDefault();
    alert(`You have clicked on ${e.target.innerHTML}`)
}

/**
 * Now let's create our dynamic element
 * */

//First we select our container
const container = document.querySelector("#container");

//Then, we create a button
const btn = document.createElement("button");
//Then, we add it the same as their respective siblings
btn.className = "click-btn";
//Now, we add it some text
btn.innerText = "The dynamically created button";
//Lastly, append it to the container
container.appendChild(btn);

/**
 * Since we are going to attach eventListener to a class
 * we need a loop
 * */

 //Let's store our elements to variable

 const elements = document.querySelectorAll(".click-btn");

 //Then, we loop through those elements
 for(let i = 0; i < elements.length; i++) {
     //We add eventListener to each element
     elements[i].addEventListener("click", dynamicFunction);
 }
</script>

What we did in this example is instead of setting the event to parent, we set it to the exact elements.

But there is a catch. If we created our button, let’s say after we did .fetch() we would need to run a loop again. Why? Because new elements were not part of the DOM when we run the loop the first time. So we can consider that as a drawback.

Which way is better?

They are equal, depending on our preferences. If we want to write a function once then the first way is better. If we do not mind writing the same code several times, then it does not matter.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to simply convert any HTML template into a WordPress theme in under 10 minutes?

How to simply convert any HTML template into a WordPress theme in under 10 minutes

Amer Sikira — Wed, 17 Nov 2021 10:25:24 +0000

This post was originally published at webinuse.com

At the first, this heading might sound intimidating and clickbait. It is not, well maybe a clickbait a little bit, but bear with us. WordPress theme market is huge today and there are companies that earned millions on one theme only, like Avada theme. To make such a theme we need a theme of professionals and probably several months of work.

If you want to learn more about what is WordPress you can check this awesome course Building websites with WordPress by Nat Miletic. This course is excellent for those who want to start with WordPress. Nat is teaching us what is WordPress, what can we use it for, how can we use it, in a really nice and simple way.

Affiliate Link

Most of the themes that are selling today come with a tone of additional stuff like builders, widgets, extensions, multiple layouts, etc.

What are we gonna talk about is how to convert our HTML template to a WordPress theme. And in future articles, we will continue to build upon that.

There are out-of-the-box solutions that we can use to create a bare-bones WP theme, that only has a basic skeleton. Some of the places where we can create such themes are Underscores, UnderStrap, and Bones.

Structure of a WordPress theme

Every WP theme has the same basic structure. We only need style.css and index.php, header.php, and footer.php to have a WordPress theme. Usually (read always) there are more files to a WP theme. Some may say that we need even fewer files, but let’s be nice and separate everything as it should be.

Our theme will have the following structure:

header.php
footer.php
index.php
style.css

Later, in other articles, we will add some more files, but for now, we will only make the homepage.

NOTE: This is only a simple theme, with almost everything hardcoded, but we will improve our theme during the course of time.

1. Let’s create header.php

The first thing we will do is create header.php. Then, we paste anything from the existing HTML template, that comes before the body tag and we include the body tag, into header.php.

If we have something, like a hero image, or jumbotron that repeats on all pages, we can insert that also. In our case, we will use navigation, but later we will change that navigation to the WordPress menu. Also, we will put the main tag, because it will be the element that will hold all other elements.

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the 
 * <head> section and opening body tag
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package theme
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body>

<nav>
    <a href="/">Home</a>
    <a href="/#about">About</a>
    <a href="/#portfolio">Portfolio</a>
    <a href="/#contact">Contact</a>
</nav>

<main id="main">

2. Next is footer.php

After we created header.php we can create footer.php for our WordPress theme. Footer.php will hold everything that we have in the footer, any additional part that will be repeated across the whole website, at the bottom. Plus, we need to add a closing body and html tag. But the first thing is we need to do, at least with this example that we have created here, we need to close the main tag.

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package theme
 */

?>
    </main>
    <footer id="footer">
        <p>Here goes some content for the footer</p>
    </footer>
</div>


</body>
</html>

3. The main part – index.php

After we have created header.php and footer.php, we can continue with index.php. If there are no other files like single.php, page.php, post.php, something-template.php, index.php will be used as the template for everything. But we will deal with this in our future articles. For now, let’s just create index.php.

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package theme
 */

get_header();
?>

<section id="hero"><img id="hero-img" src="#"></section>

<section id="about">
    <h1>This is about section</h1>
    <p>Here comes some text about us</p>
    <button>We can eve use some call to action</button>
</section>

<section id="portfolio">
    <img class="portfolio-img" src="#">
    <img class="portfolio-img" src="#">
    <img class="portfolio-img" src="#">
    <img class="portfolio-img" src="#">
    <img class="portfolio-img" src="#">
    <img class="portfolio-img" src="#">
</section>

<section id="contact-us">
    <form>
        <input type="text" id="name">
        <input type="email" id="email">
        <textarea id="message"></textarea>
        <button>Send</button>
    </form>
</section>

<?php
    get_footer();
?>

Now let’s analyze a code a little bit. The first thing we see is get_header() function. It is actually a built-in WordPress function that runs our header.php that we have previously created. So instead of using include, or require, from PHP, we use get_header. Why? Because get_header does a lot more job than just including a file.

After that, we can add any HTML we want. We just added some super basic stuff.

When we are done with HTML we use get_footer() function that includes our footer and runs some more stuff in between.

4. style.css in a WordPress theme

Normally CSS files are used for styling our content. When we are using WP, style.css means more than simple styling. For a WordPress theme, style.css is crucial because it holds the theme’s name, which is required in order for the theme to be recognized and activated.

/*!
Theme Name: theme
Theme URI: http://theme.com/
Author: Webinuse
Author URI: https://webinuse.com
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

As shown in the example above in the first few lines there is a comment with several lines that holds some information. This information is used by WordPress in order to recognize themes and get some information about them. The only mandatory line is Theme Name, everything else is optional. There are more data that we can put in style.css, but we will tackle that some other time.

After the comment, we can put any styles we want. Same as with any other CSS file. If we convert some HTML template, that already exists, style.css is the perfect place to paste our CSS code.

This is basically it! We have created a working WordPress theme. In the following articles, we will create more advanced features. Also, we will add more page templates to our WordPress theme and some other cool things.

Now when we want to upload it, we put all of our files in a single folder and name this folder using our theme name slug, e.g. my-super-awesome-theme. After that, we zip that folder and upload it through the Themes installer in WordPress, and we can activate our theme.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to warn users when the connection is lost?

How to warn users when the connection is lost?

Amer Sikira — Tue, 16 Nov 2021 09:18:07 +0000

This blog post was originally published at webinuse.com

There are times when we need to track users’ internet connection. This is especially useful if we are building CRM, CMS, or other content-related software. Maybe the user is trying to save something and the connection is lost, instead of losing what he/she already did, we can warn our user that connection is lost and save data locally, e.g. localStorage.

Besides warning, we can send them a message that we will save everything locally, so users know that we care about their time, experience, and data.

How to register lost connection

Thankfully JavaScript has the solution for that. It is called .onoffline event. Once JS registers that the internet connection is lost, it will fire .onoffline event. This event supports every major browser, according to MDN.

Same as any other event, there are two ways to add an event listener. Let’s take a look at the example below.


/**
 * We can trigger onoffline event by using addEventListener
 * */

 window.addEventListener("offline", (event) => {
     //here we run our code, what to do
     //when connection is lost
 })


 /**
  * We can trigger onoffline event by using onoffline
  * */

  window.onoffline = event => {
     //here we run our code, what to do
     //when connection is lost
  }

How to register when connection is restored

Once we registered a lost connection, we would probably want to register when the connection is restored.

Similar to .onoffline event, there is .ononline event. It is triggered when JS notices that we are back online again. Let’s check an example. This event supports every major browser, according to MDN.


/**
 * We can trigger ononline event by using addEventListener
 * */

 window.addEventListener("online", (event) => {
     //here we run our code, what to do
     //when connection is restored
 })


 /**
  * We can trigger onoffline event by using ononline
  * */

  window.ononline = event => {
     //here we run our code, what to do
     //when connection is restored
  }

What to do?

When a user is offline we can send a warning and save data to the localStorage.

Why is this good?

User is warned and knows that if something is not working properly it is not app’s fault, but rather someone else’s
Better user experience. Shows that we were thinking about them even when internet is not working
We can save user additional pain of losing data that they already entered

So, let’s dive in in the example of how will it look like if we try to implement this in the real world.



/**
 * First we can deal with 
 * offline state
 * */

 function offlineState() {
     /**
      * The first thing we need to do is
      * get data that user could posibly
      * enter or change, e.g. form elements
      * */
     const data = document.querySelector("#input").value;

     /**
      * Our example is simple, but usually here
      * we would collect all data and 
      * put it in array or object.
      * */

      localStorage.setItem("data", data);

      alert("Your connection is lost! Data is saved locally!");
 }

 //Now, let's add event listener

 window.addEventListener("offline", offlineState);


 /**
  * Next thing we will do is create
  * function for when application is back 
  * online
  * */

  function onlineState() {
      /**
       * The first thing we will do is
       * get data from localStorage
       * and return it to form
       * */

       let data = localStorage.getItem("data");

       document.querySelector("#input").value = data;

       //Now we notify user that everything is 
       //back online again

       alert("We are back online! Keep the good work!");
  }

  //Next thing is creating event listener

  window.addEventListener("online", onlineState);

This example just shows what can we do. It is not a definitive guide.

If you are interested in me writing complete function for .onoffline and .ononline events, you can find me on Twitter.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like What is WordPress? A super simple guide for beginners.