Forem: Jennifer Eze

Introduction To JavaScript Call Stack

Jennifer Eze — Tue, 14 Mar 2023 14:53:24 +0000

Introduction

Throughout the years, JavaScript has grown in popularity and now powers a significant chunk of the internet. The call stack, which is used to track function calls and their execution order, is one of the fundamental ideas of JavaScript.

Any JavaScript developer must understand the call stack in order to efficiently debug their code and create applications that are more streamlined.

In this post, we'll examine the fundamentals of the JavaScript call stack, as well as its use, operation, and some typical problems that could occur.

You will have a firm grasp of the call stack's definition and how to use it efficiently by the end of this article.

What is a Stack?

A stack is a basic data structure in computer science. The last object placed on the stack goes on top, just like when you stack some things or pile up some books. It also starts to be taken away. the last stack is the first to be taken away.

The call stack works in the same way. A function is added to the call stack and afterwards removed from the call stack when a value is returned from the function.

When a program with numerous function calls starts, the first function that the interpreter reaches is added to the call stack. The function is then called, and if it calls another function, the latter function is added to the call stack's top position.

Up until one of the functions returns a value, this procedure keeps on. The function is then deleted from the call stack when this occurs. At the top of the call stack is the function that is now running (or being performed).

What is a Call Stack in JavaScript?

A call stack is a mechanism used in JavaScript to keep track of function execution. A function is added to the top of the call stack whenever it is called. The function runs, and when it completes, the stack is cleared.

A call stack is a data structure that, at its most basic level, employs the Last In, First Out (LIFO) principle to organize and temporarily record function invocation (call).

This is a breakdown of what we mean:

When we say that the call stack runs according to the Last In, First Out (LIFO) data structure principle, we imply that the last function that is pushed into the stack is the first function that comes out when the function returns.

The execution of function calls in a program is tracked by this data structure. It records the functions that are now active as well as the order in which they were invoked. A function is called, added to the top of the call stack, and then removed when it completes its work.

Let's take an example to illustrate this:

function add(x, y) {
  return x + y;
}

function square(z) {
  return z * z;
}

function calculate(a, b, c) {
  const sum = add(a, b);
  const squaredSum = square(sum);
  return squaredSum / c;
}

calculate(2, 3, 4);

When the 'calculate' function is used, the following happens:

Adding 'compute' to the call stack.
The commands "add" and "3" are called. The word "add" is placed at the top of the call stack.
The call stack is cleared once the function "add" returns "5".
The word "square" is called with the parameter "5". Square gets added to the call stack's top.
The call stack is cleared after the function "square" returns "25".
From "calculate," the value of "square" is divided by "4" and returned.
The call stack is cleared of the word "compute".

So the call stack in this example would look like this:

   +-------------+
                |   calculate |
                +-------------+
                |     add     |
                +-------------+
                |    square   |
                +-------------+

This is a simplified example, but it illustrates the basic idea of how the call stack works.

What is the purpose of JavaScript Call Stack?

The method used in JavaScript to track function calls in a program is called the call stack. The call stack's goals are to govern the flow of control between functions and make sure that function calls are executed in the proper sequence.

A new frame, corresponding to the function's execution context, is added to the call stack each time a function is called in JavaScript. The frame holds details about the function, such as its local variables and parameters. The function may call additional functions as it runs, which increases the call stack by adding new frames.

The call stack is in charge of recording the calling sequence of functions and ensuring that they are executed in the proper order. Control is transferred back to the function that called the other function after the execution of a function is complete.

An essential idea in JavaScript is the call stack, which is crucial to the way programs are run. It is imperative for developers to have a thorough understanding of the call stack in order to produce effective, error-free code.

Some Common Issues That Can Arise When Working With JavaScript Call Stack.

The call stack is an essential part of the JavaScript runtime environment, but using it frequently can lead to a number of typical problems. Many of the most typical call stack-related difficulties are listed below:

Maximum call stack size exceeded: When a recursive function or an endless loop repeatedly calls itself, the call stack's maximum size is exceeded, resulting in this error. The software may crash due to this problem, which is frequently challenging to troubleshoot.
Stack overflow: When there is not enough room on the call stack to store a new frame, a stack overflow error happens. When a function is called repeatedly without an exit condition, the call stack might get bloated.
Callback hell: When a program uses numerous nested callbacks, it enters callback hell, making the code challenging to read and debug. Working with callback-required APIs or asynchronous code may cause this to occur.
Synchronous code blocking: JavaScript executes code synchronously, which necessitates the completion of one function call before executing the next. The call stack may become blocked by a function that takes a while to run, rendering the program unresponsive.

Conclusion

I hope you gained a lot from this topic. we were able to look at JavaScript call stack. what it is, how it works and some common issues you can encounter when working with it. if you have questions or comments. Feel free to drop it. Bye, I will see in the next one.

About the Author

I am Jennifer Eze, an enthusiastic developer with a passion for JavaScript, Bootstrap, PHP, HTML & CSS.
I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, GitHubitHub, or my website.

Mastering Sass: Tips and Tricks for Efficient Workflow.

Jennifer Eze — Mon, 30 Jan 2023 11:22:38 +0000

Introduction

CSS by itself can be entertaining, but stylesheets are growing bigger, more intricate, and more difficult to manage. A preprocessor can be useful here.

Let's face it: creating CSS may occasionally be challenging, particularly in today's world of ever-more-complex user interfaces. You'll frequently discover that you keep saying the same thing.

In this case, Sass comes to the rescue. You can adhere to the DRY (Do Not Repeat Yourself) principle by writing CSS.

What Is Sass?

Sass is a CSS preprocessor, sometimes known as a CSS extension, that enhances the CSS language with features like variables, nested rules, and mixins. It is a scripting language that is translated into CSS or built from scratch.

Typically, Sass code is created in.scss files and converted into.css files that may be integrated into web pages. Sass makes CSS development more productive and dependable.

A CSS preprocessor called Sass (Syntactically Awesome Style Sheets) endows your CSS with superpowers.

Sass consists of two syntaxes.

The original syntax, sometimes known as "the indented syntax," makes use of a Haml-like grammar. It employs newline characters to separate rules and indentation to divide code chunks. The extension is typically applied to indented syntax. sass

An illustration of indented syntax in code
The curly brackets and semicolons are eliminated in this older style.

 nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    text-decoration: none

SCSS syntax

Block formatting similar to that of CSS is used in the more recent and well-liked syntax SCSS (Sassy CSS). Code blocks are indicated by braces, and SCSS files and rules within a block are separated by semicolons.

It effectively represents a subset of CSS3 syntax. This indicates that you can add some extra functionality to standard CSS when writing it.
It is frequently called Sassy CSS because of its sophisticated capabilities. The document's file extension is .scss.

$font -stack: helvetica, sans-serif 
$primary- color :#333;

body{
  font: 100% font-stack;
  color: $primary-color;

How Does Sass Work?

When you write your styles in a ".scss" file using Sass, they are converted into a standard CSS file. The browser is subsequently loaded with the CSS code.

The browser converts the Sass file into a standard CSS file rather than reading it directly. A sass compiler is necessary for this, too. There are other ways to accomplish that, but if you're using Visual Studio Code, you may add an extension called Live Sass Compiler.

It is termed a preprocessor for this reason.

Why should you use Sass?

Simple to learn: Sass has a syntax that is similar to that of CSS, so if you are already familiar with CSS, you can start using it right away.
Compatibility: It works with all CSS versions. So, you can utilize any CSS libraries that are out there.
Saves time: Thanks to its robust capabilities, it aids in reducing the repetition of CSS.
Reusable code: Sass supports variables and code fragments (mixins) that can be used repeatedly. You can code more quickly and save time as a result.
Organized Code: Sass uses partials to keep your code organized.

Sass is compiled into CSS and inserts all required vendor prefixes so you don't have to. This ensures cross-browser compatibility.

Features of Sass?

In Sass, variables can be declared. Since we can declare variables for different attributes and utilize them in any file, this is one of Sass's advantages.

The advantage of this is that you only need to replace one line of code if that value changes.

To accomplish this, name a variable with the dollar sign. $ and then referencing it elsewhere in your code.

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

Sass is used to increase the CSS code's effectiveness and maintainability. Using Sass has several advantages, including:

Variables: Make the CSS easier to update and maintain by allowing the reuse of variables throughout.
Nesting: Enables the grouping of CSS selectors, improving the organization and readability of the code.

Example;
The majority of the time, classes are duplicated when writing CSS. By nesting styles inside the parent element, we may prevent this repetition. Check out the codes below as an example;

  In CSS,


 nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a: hover {
  color: #069c54;
}

With Sass, the above code can be written like this:

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

Mixins: Make it simpler to apply the same styles to several elements by allowing the reuse of CSS declarations.

Operators and Functions: Makes it simpler to create complex styling by allowing the use of operators, functions, and control directives in the stylesheet.
Overall, Sass contributes to more organized, less repetitious, and easier to read and manage code. Because it enables a more effective workflow, web developers frequently choose it.

Sass Functions and Operators

Sass offers a set of tools to aid in the creation of more programmatic code.

We can do computations and operations that return a certain value using the built-in functions provided by Sass.

They include anything from size computations and random number generation to conditionals and color calculations.

It also provides support for mathematical operators like +, -, \, *, /, and %, which we can use with the calc function.

Here is an example using a pixel to rem conversion function:

@function pxToRem($pxValue) {
  $remValue: ($pxValue / 16) + rem;
  @return $remValue;
}

div {
  width: pxToRem(480);
}

However, it's important to note that the */* operator for division is deprecated, and will be removed in Dart Sass 2.0.0. You can read about it in the Docs.
So, this is how it should be written:

@use "sass: math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // gives 30rem
}

Using Sass To Write a Simple Application For Hello World.

Here is a simple "Hello World" application using Sass:

// File: styles.scss

$text-color: blue;

h1 {
  color: $text-color;
}

// File: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

You would then need to use a Sass compiler to convert the **.scss** file to a **.css** file, so that the browser can interpret the styles.
You can also use Sass via command line

sass styles.scss styles.css

This will convert the scss file to css file and you can link css file in index.html as mentioned above.

CONCLUSION

Wow, we have come to the conclusion of this article. hope you gained a whole lot from it. we have looked at what sass is, The two syntaxes of writing sass, how sass works, and why you should use it. Also some features of sass and a few sass functions and operators.

so with that, see you at the next one. bye.

About the Author

Top 10 JavaScript Frameworks & Libraries For Building Games In 2023

Jennifer Eze — Fri, 06 Jan 2023 12:00:26 +0000

Introduction

One could ask if JavaScript can be used to make games. The answer is yes because JavaScript is a cross-platform, interpreted scripting language. It has a reputation for producing websites. In addition to browsers, it is employed in numerous other contexts.

JavaScript allows for both client-side and server-side development. This article will discuss the top JavaScript gaming engines, and every JS developer should know it.

Everyone loves gaming, whether they are 10 years old or employed. Nothing beats turning on your speakers or headphones and getting lost in a video game to relax at home.

What, after all, is more enjoyable than going after criminals, tearing through traffic in a Ferrari, or playing a sport you're bad at?

To make the game you enjoy so much, a sizable team of programmers, designers, and other experts must toil persistently for months. Even though the game seems straightforward, a lot of time and energy went into making it.

It takes a lot of work to create a game, but thankfully there are several JavaScript-based frameworks and libraries available.

1. Phaser:

A popular framework for developing HTML5 2D games with WebGL and canvas.

2D games are made using canvas and WebGL with a free JavaScript framework called Phaser. It provides a variety of tools and functionality for creating game environments, managing game materials, and logic, and rendering the game to the browser window.

Because it is designed to be simple to use and modify, a phaser is a popular choice for game developers of all skill levels. Additionally, it has a sizable and active user base that collaborates, exchanges resources, and learns new things to advance the framework.

Games for PC and mobile platforms can be made using Phaser by modifying them and adding libraries.

2. Three.js :

A library for using WebGL in a browser to create 3D graphics.

Three.js is a JavaScript toolkit for WebGL-based 3D graphics creation in browsers. it is used for creating and producing 3D visuals, including geometry, materials, lights, cameras, and animations, it offers a set of APIs and tools.

Three.js is made to be flexible and simple to use, and it can be used to build a variety of 3D visuals, from straightforward 3D forms to intricate 3D sceneries with lifelike lighting and materials.

The game development and visualization sectors both heavily rely on three.js, and it has a sizable and vibrant user base. It is also simple to integrate into already-existing projects because it is interoperable with other JavaScript libraries and frameworks.

3. Pixi.js:

A 2D library with quick rendering that supports WebGL and canvas.

Using HTML5 and WebGL, you can make interactive images and games with Pixi.js, a renderer framework. Sprites, text, pictures, and particle effects are just a few of the many things it provides. It is made to be quick, light, and simple to use.

Pixi.js is frequently used in conjunction with other libraries and frameworks like Phaser or Three.js and is particularly well suited for making 2D games. It's a wonderful option for novices because it's also fairly easy to get started with.

4. Unity:

Powerful game engines like Unity enable the creation of both 2D and 3D games. It is utilized by a broad spectrum of developers, from tiny independent studios to big corporations, and it is supported across several platforms, including iOS, Android, PC, and gaming consoles.

A graphic editor, a built-in physics engine, support for VR and AR, and the capacity to publish games across several platforms are some of the features offered by Unity.

It's a well-liked option for creating top-notch games, and it's utilized to make a variety of games, from straightforward mobile games to intricate 3D experiences.

5. Babylon.js:

A 3D engine for HTML5, WebGL, WebVR, and WebXR games and experiences.

With HTML5, WebGL, WebVR, and WebXR, games and interactive experiences may be created using the 3D engine Babylon.js. It offers a high-performance environment for developing 3D content and is made to be simple to use.

3D graphics, 3D audio, physics-based animation, and support for virtual reality (VR) and augmented reality are some of the capabilities provided by Babylon.js (AR). It is a potent tool for creating 3D games and applications, and a wide range of developers, from amateurs to established studios, use it.

6. PlayCanvas:

A cloud-based game engine for creating 3D games and interactive experiences.

PlayCanvas is a cloud-based game engine that allows you to create 3D games and interactive experiences using HTML5 and WebGL. It's designed to be easy to use and provides a range of features including a visual editor, real-time collaboration tools, a built-in physics engine, and support for virtual reality (VR).

One of the benefits of PlayCanvas is that it's entirely browser-based, so you can work on your projects from any device with an internet connection. It's a popular choice for developers who want to create 3D games and experiences quickly and easily.

7. PlayCanvas

Using HTML5 and WebGL, PlayCanvas is a cloud-based game engine that enables the development of 3D games and interactive experiences.

With a variety of capabilities, including a visual editor, real-time collaboration tools, a built-in physics engine, and support for virtual reality, it is made to be simple to use (VR).

PlayCanvas has the advantage of being completely browser-based, allowing you to work on your creations from any device with an internet connection. Developers that want to produce 3D games and experiences quickly and easily frequently choose it.

8. Construct 3:

With the help of the game development engine Construct 3, you may make games without knowing any code. It offers a range of features including a visual editor, a built-in physics engine, and compatibility for numerous platforms including HTML5, mobile, and desktop. It is created to be user-friendly and intuitive.

Construct 3 is very useful for making 2D games, and beginners and hobbyists who wish to start game production but may not have much programming knowledge frequently utilize it. It's also a wonderful option for developers who wish to quickly construct small games or prototype concepts.

9. Unreal Engine

Professional game engines like Unreal Engine are frequently utilized in the market to produce games of the highest caliber.

A visual editor, support for virtual reality (VR), a built-in physics engine, and the ability to publish games across several platforms are just a few of the features offered by this potent tool that aids in the construction of 2D and 3D games.

Small independent studios and major corporations alike employ Unreal Engine, which is renowned for its excellent performance capabilities and cutting-edge graphics. It's a well-liked option for creating AAA games, but for smaller projects or devs with tight budgets, it can be overkill.

9. GameMaker: Studio

A game production platform called GameMaker: Studio gives you the ability to make games utilizing a drag-and-drop user interface and an integrated programming language.

It offers a variety of features, such as a visual editor, compatibility for several platforms, and a built-in physics engine, and is user-friendly and simple to use.

GameMaker: Studio is frequently used by beginners and hobbyists who wish to get started with game development since it is particularly well-suited for making 2D games. Developers that wish to rapidly and simply construct straightforward games may consider it as well.

10. Cocos2d-x

A free software framework is cocos2d. It can be used to create cross-platform GUI-based interactive programs like games, apps, and others. The most popular branches of the Cocos2d framework are Cocos2d-objc, Cocos2d-x, Cocos2d-html5, and Cocos2d-XNA.

An open-source game engine called Cocos2d-x is used to create 2D games, interactive books, demos, and other graphical programs. It may be used to create interactive games, apps, and other content for several platforms, including Android, iOS, Windows, macOS, and Linux. It is developed in C++.

Support for sprite motion, tile maps, and physics-based collisions are just a few of Cocos2d capabilities. x's Various tools for creating and debugging games are also included, such as a scene editor, a particle editor, and a font editor.

CONCLUSION

I hope you gained a lot from this topic. we were able to see some JavaScript frameworks and libraries for building games. but

It's critical to remember that the best decision for you will rely on your unique demands and objectives.

When choosing a framework or library for game development, it's a good idea to take your project's requirements, your degree of experience, and the resources at your disposal into consideration.

About the Author

How To Handle Scroll Events In JavaScript

Jennifer Eze — Tue, 06 Dec 2022 10:48:56 +0000

Introduction

You know sometimes, it's really useful to listen to scroll events to find out about the user's scroll position as they scroll up and down the web or even scroll within an element in a webpage.

Let’s take pinterest.com as an example; you will notice that as the user scrolls down the bottom of the page, more images keep loading.

In this case, we can say, we use scroll events for infinite scrolling. we can also use the scroll bar to toggle the class of a nav bar to hide and unhide it.

In this article, we are gonna learn about JavaScript scroll events.

A Scroll Event is what?

A scroll event in JavaScript causes a scrollbar position to change, either vertically or horizontally. A JavaScript event listener or JavaScript event handler can be used to hear it.

For reading scroll (desktop) or touch (mobile) events, the scroll event handler is an NPM package, and each event is given a callback.

Since "scroll" is a JavaScript event, we can add an event listener to any Document Object Model element to receive scroll events.

Events that occur as a result of scroll events.

a. Scroll events cause animations to start playing: some websites with animations get prettier as you scroll down the page. The animation plays more smoothly as you use the scroll bar to advance. such as webflow.com

b. Toggling a class: If you scroll a little through the viewport on numerous websites, such as pitchefork.com, you will frequently notice this. If you look at the navbar, you'll see that the concealed navigation initially becomes visible.

Therefore, to conceal and reveal it in this situation, use the toggle case of a scroll event.

How to hear scroll events

Regarding Windows objects

a. On Windows objects:

There are two ways we can listen for it; To listen to a scroll event, you first have to scroll up and down your browser.

like in the image above, you won’t find a scroll bar. but to get one. make a  <P>  tag or a paragraph tag, and put some dormie text inside.




<!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>
    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur amet quod explicabo nihil numquam sunt officiis corrupti? Temporibus vero corporis omnis dolorem aspernatur, nihil eos eaque maxime deleniti molestiae vitae aperiam ut laboriosam dolore quo est architecto nemo nulla dolorum exercitationem neque quos! Corrupti ad dignissimos tenetur aspernatur provident! Quidem consectetur sapiente laudantium dignissimos similique in, quibusdam quod vitae dolorem explicabo necessitatibus eveniet nemo vel dolore accusamus ducimus nulla fugiat maiores id! Nesciunt quaerat harum, labore, amet maxime, ratione ab nobis illum atque deleniti nemo expedita earum possimus culpa exercitationem porro architecto iste. Velit placeat tempore, odio eveniet earum iusto consequuntur quidem vel quis repellat perferendis commodi ea mollitia laborum tempora inventore at. Pariatur ipsum reprehenderit earum nobis! Recusandae, accusantium tempore quatibus maiores ducimus adipisci dolorem voluptas sint voluptatum voluptates libero, quod magnam explicabo rerum? Autem aliquid mollitia modi minima quasi, temporibus totam eum fugit eaque. Excepturi officiis ab deserunt est! Quaerat expedita harum iusto pariacepturi sapiente non dicta? Fuga totam quae 
           similique sapiente voluptas accusantium maxime nam omnis fugit ratione, blaasi omnis. Alias fuga hic eveniet, qui corporis nostrum, dicta maiores vel voluptatum quibusdam facilis modi saepe quo facere dolore magni ipsa excepturi assumenda ex et qus impedit esse sequi numquam officia? Earum autem pariatur, eos nihil excepturi officiis nulla officia quam velit neque, iste omnis quidem laborum modi ad quod placeat fugiat? Assumenda aliquid, aspernatur ipsam rerum illum cumque esse, excepturi eveniet sunt velit ea eum. Dolor error, id animi nihil eos, nemo  vo!</P>
</body>
</html>

If you go back to the browser, you will see all those tags, which will now give us a scroll bar.

As you can see we have a scroll bar now and we can scroll up and down the page.

Here is the first way, that we can listen to scroll events;

METHOD 1: USING THE ONSCROLL PROPERTY

Because we frequently wish to track the full scrolling of the webpage up and down, it is very usual to listen to scroll events on the window object.

We now use the windows object to accomplish that. We have a property named on-scroll in my script.js. You can find out when the scroll event is being fired by assigning it to a function and then logging it to the console.

window.onscroll = () => {
   console.log("white creativity")
}

You'll see that the number keeps rising as we scroll down the bar.

Be aware that the scroll event rapidly sets file-zealous times. If you want to perform complex event handling or a call-back function, the scroll event is one of the event kinds that can be difficult.

Debouncing, throttleing, and other methods are some of the ways these many items might be improved.

METHOD 2: USING addEventListener

Now, instead of windows. onscroll, it will be windows. addaEventListener. like this

window.addEventListener ("scroll",() => {
    console.log("white creativity");
})

The first argument is the name of the event which is scroll, the second argument will be the event handler call-back function. which is the event function that is going to run when this event function is fired. finally console.log again.

The same thing occurs: the number keeps rising as you scroll the bar.

The addEventListener method is recommended for listening to events because

We can add several event handlers to the scroll events using the addEventListener function.
On windows objects, we have so far listened to scroll events. Now that it's on page elements, we can hear it.

watching for scroll events on the page's elements

We'll see that we are an example. Form a div. Put a paragraph tag inside of it.

Make a div and insert a paragraph element with some placeholder content within the div.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
   <p>monkeys love bananaLorem ipsum dolor sit amet consectetur, adipisicing elit. Qui perferendis deleniti nisi, saepe debitis error laborum! Exercitationem porro tenetur architecto, officiis voluptates maxime. Dolorem commodi nobis sapiente deleniti quos eligendi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, accusantium. Dicta necessitatibus delectus fugiat minima molestias. Enim dolorum eum eos, aliquid eius nihil placeat cumque reprehenderit nesciunt perferendis tenetur possimus. </p>
  </div> </p>
  </div>
  <script src="script.js"></script> 
</body>
</html>

style it a little bit in your CSS, like this

.container{
    width: 500px;
    height: 500px;
    background-color: blue;
    overflow: auto;
}


.container p{
   height: 1000px;
   width:  1000px;
   font-size: 2rem;
   margin:   0;
}

on script.js, write this code.

document.querySelector(".container")
  .addEventListener("scroll", (a) =>{
     console.log(a)
})

To target the container, we use the query selector and a div with a class of container.
Then we call adEventListener and pass in the scroll event and the event handler calls back function.
whenever we add an event listener, we have access to the event object itself. we can use whatever we want, but I just want to use the small letter “a”. finally to look at the event object; console.log(a).

scroll inside the container itself. Take a look at the console. you are going to see a whole lot of running object that was logged.

If you type that code into your browser console and scroll, you will see that you get undefined. The intriguing point is that we won't need scrollTop or scrollLeft while working with the windows object. Instead, we'll employ scrollY and scrollX.

You will see that you are obtaining numerical values in the console if you utilize scrollY and check the browser console.

document.querySelector(".container")
  .addEventListener("scroll", (a) =>{
     console.log(a.target.scrollTop)
})

if you write that code and go back to the console, you will notice that as we scroll down, the number of pixels increases.

Now if you want to see horizontally how much we have scrolled, you will see the left scroll property.

we wanna go back to our previous example when we looked at the scroll event on the window object.

window.addEventListener ("scroll",() => {
    console.log(window.scrollTop);
})

if you write that code and scroll on your browser console, you will notice that you will get undefined. so the interesting thing is that when we are dealing with the windows object, we will not use scrollTop or scrollLeft. but rather we will use scrollY and scrollX.

if you use scrollY and look in the browser console you will notice that you will be getting numerical values in the console.

Conclusion

we have come to the end of this article. I hope you gained a whole lot on how to scroll events are handled in JavaScript. you can take out some time to try that. if you have questions, drop them in the comment section. And it will be attended to. Don’t forget to follow me and give a clap to this tutorial, expecting to see you in the next one…

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, Bootstrap, PHP, HTML & CSS.
I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, GitHubitHub, or my website.

Get To Know About Proxycurl.

Jennifer Eze — Sat, 19 Nov 2022 15:15:18 +0000

Introduction

Without a doubt, we are living in a new era of large data-driven corporations. Gathering rich data about people and businesses has been a huge task over the years.

Proxycurl has made it easier to build and scale data-driven applications on people and businesses without having to worry about scaling a web scraping and data-science team.

What is LinkDB?

A comprehensive database of LinkedIn members and companies

LinkDB is a complete LinkedIn dataset of people and companies that allows you to easily, efficiently, and legally integrate the vast sea of LinkedIn public data into your business applications.

If you are a mid-market company with at least 50 employees in the US or Europe, or if a reputable VC funds you for at least USD 1 million, LinkDB may be a good fit for you.

LinkDB is a Postgresql database containing 117 million public Linkedin profiles. LinkDB is a completely managed and up-to-date database of public Linkedin profiles.

Who is LinkDB for?

Sales/marketing Automation of prospecting

LinkDB can help you automate your sales process by powering your LinkedIn prospect searches.

Candidate search for recruitment

Find the ideal candidate from a comprehensive dataset of LinkedIn profiles of people in a specific region of interest, allowing your HR department or company to spend less time and money sourcing potential employees.

Training and investment analysis, Artificial intelligence models for investment analysis
To gain significant alpha against your peers, use data metrics such as how quickly an employee count is growing to make investment decisions.

How to do a Simple Sample Search Queries on LinkDB

LinkDB requires a basic understanding of SQL, JSON query functions and operators, and SQL/JSON path expressions. Let us begin with a simple example.

SELECT
  id,
  user_data->>'first_name' AS first_name, 
  user_data->>'last_name' AS last_name
  FROM profile
  LIMIT 10;

Find Me All computer scientist In California

To find all the computer scientists in the database, you would write:

SELECT
    id,
    user_data->>'first_name' AS first_name, 
    user_data->>'last_name' AS last_name,
    json_path_query_first(user_data, '$.experiences[*] ? (@.ends_at == null && @.title == "computer scientist" && @.location_California").title') AS title
FROM profile
WHERE to_tsvector('simple', used_data) @@ plainto_tsquery('simple', 'computer scientist')
  AND user_data @> '{"experiences": [{"ends_at": null, "title": "computer scientist", "location_California"}]}';

The query above employs text search and JSON path syntax. Making use of a more SQL-like pattern.

Find Me All Google Employees

To retrieve all employees of Google, you write the following SQL query:

SELECT
    id,
    user_data->>'first_name' AS first_name,
    u_data->'last_name' AS last_name,
    json_path_query_first(user_data, '$.experiences[*] ? (@.ends_at == null && @.company_linkedin_profile_url == "https://www.linkedin.com/company/googl/").title') AS title
FROM profile
WHERE to_tsvector('simple', user_data) @@ plainto_tsquery('simple', 'https://www.linkedin.com/company/google/')
  AND user_data @> '{"experiences": [{"ends_at": null, "company_linkedin_profile_url": "https://www.linkedin.com/company/google/"}]}'

Who is LinkDB For?

We sell LinkDB to middle-market companies with at least 50 employees in the United States or Europe, or startups funded by reputable venture capital firms for at least USD 1 million.
If you are interested in LinkDB and your company falls into one of the categories listed above, please contact proxycurl.

The LinkDB dataset

The LinkDB dataset has been divided into regions to provide flexibility in terms of usage and size. We have several types of data snapshots. They are as follows:

1. People profiles - 170+MM profiles of people in the United States
2. People profiles - 8.7 million profiles of Canadians
3. People profiles - over 876000 profiles of Israelis
4. People profiles - 15+ million profiles of people in the UK
5. People profiles - 1.7+ million profiles of Singaporeans
6. People profiles - 6 million profiles of Australians
7. People profiles - 1.5 million profiles of people in Ireland
8. People profiles - 1.5 million profiles of New Zealanders
9. People profiles - 9.2 million profiles of people in Germany
10. Company profiles - 17+ million global company profiles

Aside from the countries listed above, we have an expanding list of datasets from other countries. Please contact us for a breakdown of our services.

You can find the complete schema of people's companies' profiles in our API docs under Person Profile Endpoint and Company Profile Endpoint.

Proxycurl API is a set of tools designed to act as plumbing in your application for both fresh and processed data. We act as a fully managed layer between your application and raw data, allowing you to focus on building the application rather than scraping and processing data at scale.
You can use Proxycurl API to

Search for people -
Search for businesses -
E-people's profiles -
Enrich company profiles
Look up contact information for individuals and businesses.
Determine whether an email address is disposable.

If you want to experiment with the dataset in your local development environment, we've provided some sample data here. Load the sample dataset into a relational database and use the sample queries above for inspiration.

How We Keep LinkDB up to Date

Each time a real-time API is made to scrape a Linkedin profile, we update the dataset with the results of the API call. This means you wouldn't have to worry about stale data because this method keeps data on LinkDB constantly updated to the count of (up to) millions of profiles a day.

Pricing

Our prices are typically in the five-digit range per data segment. We do not share price quotes to avoid a pricing war.

Instead, we provide a general price range, and I will direct you to test the finer points of our product, such as data quality or API standards.

And once you are certain that our product is right for you and that our price point is within your budget, we will begin the negotiation process.

Summary

It has been a pleasure reading this article about proxycurl and its services.

It may interest you to know that the right dataset can greatly benefit your business or applications.

LinkedIn is a great place to find information about potential customers, businesses, investments, and trends. Are you a mid-sized startup looking for a complete LinkedIn dataset?

Proxycurl is at your service.

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.

I work as a freelancer, building websites for clients, and love writing technical tutorials to teach

others what I do. I am eager to hear from you. Reach me on LinkedIn, GitHub, or my website.

Creating A Social Network With WordPress

Jennifer Eze — Sat, 19 Nov 2022 15:02:56 +0000

Introduction

Connecting with other people, businesses, and organizations is essential for an individual's and an organization's success.

Social networking is a location where individuals and organizations may interact, conduct business, and share information on several platforms.

Making the most of social networks and their importance can help people and businesses use these platforms to expand their professional networks.

What is a Social Network?

Maintaining communication with friends, family, coworkers, and customers using web-based social media platforms is known as social networking.

Social networking can serve a social purpose, a business purpose, or both through websites like Facebook, Twitter, Instagram, Pinterest, etc.

Social networking is a significant opportunity for marketers who want to interact with potential clients.

A social network is a website that links people to facilitate conversation, interest exchange, and friend discovery. This form of sharing and collaboration is referred to as social media.

In contrast to traditional media, which is produced by no more than ten people, social media platforms host material created by hundreds or even millions of different people.

Importance of Social Networks

It fosters quick contact,
Links people and businesses,
Aids in the creation of adverts by firms, and
Permits information sharing. # Types of Social Networks

As a media marketer, venturing to go into media marketing. it’s helpful to know about the most popular social media sites out there right now. This will allow you to maximize your brand reach on social media.

Below is the list of the top 10 social media sites in 2022.

Creating Social Networks With WordPress

Facebook has now become the number one social network in the world and it has 665 million active users on average each day as was recorded and disclosed by Facebook.

And that’s just Facebook! There’s Twitter, LinkedIn, Instagram, and many other social networks to consider too. But what’s all this got to do with WordPress, you might be wondering?

To Encourage You To Launch Your Own Social Network?

Looking at the aforementioned data should motivate you to start your social network. It doesn't matter if your goal is to reach Facebook and other comparable platforms in size or if all you want is a network for your friends, business, or volunteer group.

If you want to start a social network, do it right now. You can start a cool one on your own using the amazing WordPress CMS.

WordPress is currently used by everyone to promote their hobbies and start enterprises because it is so simple to use, from your elderly neighbor to your adolescent niece. It is easy to create a social network website that is dynamic and has all the features you would find on an existing one

There are only a handful of WordPress plugins that you should take into account if you want to establish your social network. They are amazing, quick to put up, and simple to use.

BuddyPress

BuddyPress enables you to build an online community by transforming your WordPress website into a social network. Several traits of a typical BuddyPress-powered website are listed below:

Your website allows visitors to register.
Users can create user profiles with more information.
To stay up to date with site-wide changes, users can access activity streams.
User groups provide you the chance to create more intimate communities.
Users have the option of becoming buddies.
Users have the option of private communication.
BuddyPress features can be expanded with the help of third-party plugins.
Compatible with any standard-compliant WordPress theme
Can be added to your existing WordPress site after installation

BuddyPress Is Capable Of A Lot... It's also free.
Any type of social network you can imagine can be built using the BuddyPress plugin. For instance, you might want to construct one for churchgoers, cricket aficionados, bird watchers, or football fans.

In addition to being able to communicate with one another and network, your members will also be able to stay up to speed on everything going on in the community you have created.

User profiles, groups, and a system for private messages can all be created. As BuddyPress integrates with other WordPress plugins, such as site tracking and allowing attachments, there are also a ton more possibilities.

WP Symposium

Building your WordPress social networking site without the BuddyPress plugin is a terrific alternative.

The WP Symposium has the following features:
Each user has a profile with a header photo, an avatar, an activity description, and other details.

You can join with friends, make groups, and exchange private messages using the community feature.
You have the opportunity to create forums, and you can change the layout and add shortcodes to make widgets.

Additionally, WP Symposium offers amazing assistance. The plugin includes a knowledgeable Help Desk in addition to a thriving support community. A very helpful Wiki is also available, and support is provided for additional plugins like Facebook Connect, Events, Galleries, Groups, and Mobile.

WP Symposium can be useful if you intend to create a multilingual WordPress social network website.

You are creating your very own social networking website, so you naturally want everything to appear the way you want it to. Without any prior technical experience, you may easily modify certain features of your site to suit your needs thanks to this plugin.

"The ultimate social network plugin for WordPress," according to WP Symposium. Use this plugin to start building the hottest social network of the future on your own.

WP Mingle

With the help of this fantastic, free plugin, you can use WordPress to create a superior social networking site.

When you utilize WP Mingle, your users won't see the WordPress admin area or login screen; instead, it will appear to be a different social networking website that isn't powered by WordPress.

Features Of The WP Mingle Plugin

You can publish comments and profile updates on your friends' profiles.

Users will be able to submit personalized avatars, and you can choose whether to get user email notifications or not (Gravatar fallback is also present)

Pages are available for user friending -

Pages are open for friend activity

Users on your WordPress social network site will be able to tag each other by using @ followed by the name of the individual. Twitter format

Custom profile fields and user profile pages can be set up by the administrator.

There is a facility for users to engage in private messaging.

There are random and reuse user widgets and login and navigation widgets.

There are Pretty Profile URLs.

Your WordPress social network site will have a registration system, a lost password recovery system, and a login and logout system (this will help with Google Indexing as well as with memorability)

An Option for Premium Membership

You can also do this if you want your WordPress social network to be exclusive. There is a premium membership option for the WP Mingle plugin that integrates with Affiliate Royale and Wishlist Member.

A Conclusion

There are many good reasons to create a social networking website. Like Mr. Zuckerberg, you might desire to become the next internet billionaire.

Alternatively, you might just want to create a small group of people who share your interior to form your community.
Whatever your motivation for wanting to create a social network, it's crucial to keep in mind that you don't need any technical knowledge to do so.

You may create one of the upcoming great things in social networking by using WordPress (which is already very simple to use) with any of the three awesome plugins mentioned above, depending on your needs.

About the Author

Top Plugins You Need To Secure your WordPress Website

Jennifer Eze — Thu, 17 Nov 2022 10:19:29 +0000

Introduction

With WordPress powering 43.2% of all websites, it is the most widely used content management system (CMS). Unfortunately, because of its widespread popularity, a variety of fraudsters target the platform and exploit its security holes.

Millions of websites get malware infections every week. Websites using WordPress and those without it are both attacked on average 44 times each day.

The security of your website is something you should be worried about. Most people don't anticipate becoming a victim of website hacking. We are all aware that it occurs, so why would someone pick my website?

This piece is for you if you've been contemplating whether or not your website needs a WordPress security plugin. The major justifications for why you should adopt a security plugin for WordPress are covered here.

What exactly is a secure plugin?

Protection from malware, brute-force assaults, and hacking attempts is provided by a WordPress security plugin.

The file change detection feature of the security plugin is essential because most web administrators are not aware when a file has been altered.

A security plugin will have each of the features listed below:

Guard your website against brute force assaults, in which a hacker tries to figure out your login details.
Safeguard important website files.
Prevent contact form plugins from being used to send spam.
Notify you when a security threat is found.
Run a malware scan.
Secure the WordPress Database
Building a Website Firewall ****## Do I need a security plugin for WordPress?

If your site is hacked, plugins can protect your users. The best WordPress.org plugins protect your users' private information.

Hackers are capable of stealing both your personal information and that of your users and clients.

The demise or tarnishing of your website could be detrimental to the SEO performance and reputation of your brand.

Starting to use a security plugin is among the most crucial stages in securing your WordPress website. By employing these plugins you avoid brute-force attacks on your website, you can strengthen WordPress security.

If you want to secure your website and prevent hacking, you must adhere to security best practices.

Without a plugin, You may also Maintain The Security Of Your Website

Without a WordPress security plugin, you may maintain a largely secure website by taking the following actions.

Update the WordPress core, themes, and plugins. There will be fewer issues and vulnerabilities if you use the most recent version of all of these. It's like leaving your back door open if you don't upgrade.
Create secure passwords. Your first line of protection consists of your username and password. Make sure to set up a password that is highly secure and to update it frequently. Every admin account should be treated the same way.
Constrain user access. You should restrict each user's access to the site's backend if you have numerous user accounts. This will lessen the possibility of any settings being altered unintentionally.
On your website, install an SSL certificate. Using an SSL connection will help to secure any data sent between the browser and server as well as your user's connection. Your admin data should, however, be encrypted as well.

The actions listed above can all be taken without a security plugin's assistance to increase the security of your website. BUT

You won't be able to avoid some vulnerabilities, though, without the aid of a security plugin.

Best plugin for WordPress websites that is secure.

Maintaining a high level of WordPress security requires being proactive. Additional security advice is provided below. Your site will be safe and secure once you put these into action.

But with the variety of alternatives, picking the best WordPress security plugins might be difficult.

You may use just one plugin from this list. Running multiple plugins from this list simultaneously can lead to issues.

The following is a list of several security plugins you can use for your WordPress website.

1. Sucuri Security

When it comes to safeguarding your website, Sucuri Security is known for being among the best and most complete plugins available. It provides:

File monitoring
Malware scanning
Activity auditing (front-end scans for free or server-level scanning in the premium version)
A web application firewall (WAF)
Security alerts (premium version only)

Most significantly, they provide free virus cleanup for your WordPress site if it becomes infected. They will even clean up a website that has already been infected with viruses.

See the full Sucuri review to find out more about how it protects your website.

2. Wordfence Security

Wordfence Security is a different preference when it comes to comprehensive security plugins. Similar features of Sucuri are available here, such as:

Malware scanning to verify plugins, themes, and files before they are uploaded. Two-factor authentication (2FA) and login limitations to prevent brute force attacks.

A WAF that prevents dangerous traffic before it assaults your site.

Live traffic and analytics tracking in real-time

Wordfence is also simple to use and reasonably priced. The WAF is one of the features on the above list that is free. For $99 a year, the premium edition of this plugin offers additional capabilities including spam prevention and more frequent checks.

3. MalCare Security

The greatest malware remover and scanner are presented next. MalCare Security, the only tool we've featured, can help you remove an attack's traces with just one click, but you'll need the premium version to do so. One of its qualities is:

Firewall protection

Remote malware scanning that won't put too much strain on your server

Elimination of malware with a single click

Developing tools like client reports and white labeling

Basic screening is free, but features like one-click virus removal and white-labeling are only available with the premium version. The least expensive licenses are $99 per year.

4. iThemes Security

iThemes Security is another well-known brand in WordPress security plugins. This plugin, along with the first three, is one of the most dependable and well-liked among WordPress users. It will grant you access to:

Strong password enforcement for all users -
Malware scanning
404 error detection
Brute force attack prevention

Additional security features that are included in iThemes Security Pro include two-factor authentication, more thorough malware scans, Google reCAPTCHAs, and more. At $80 a year, it's also the least expensive premium plugin we've mentioned thus far.

5. All in One WP Security & Firewall

Here are a few plugins that are a little less well-known: All in One WP Security & Firewall. Although it makes a strong assertion in its name, the feature list backs it up. Among the highlights are:

A feature called "Login Lockdown" that guards against brute-force attacks
Backups, file editing, and file restoration
A file change detection scanner - Firewall defense
Front-end copy protection; prevention of comment spam

Additionally, this plugin is free. Since there is no premium edition, you may access some of the more well-liked features without having to pay a significant price.

Conclusion

We have reached the end of this tutorial; hopefully, you have gained some insight. We were able to learn what a security plugin is and about several key security plugins you can employ for your WordPress website during the session.

I'll see you later, have fun!

bout the Author

Jennifer Eze kick-started her journey as a software engineer in 2021. Over the years, she has grown full-blown skills in JavaScript, PHP, HTML & CSS, and more.

she is freelancing, building clients' websites, and writing technical tutorials teaching others how to do what she does.

Jennifer Eze is open and available to hear from you. You can reach her LinkedIn, Github, or her website.

Building An Ecommerce Site With WordPress

Jennifer Eze — Wed, 26 Oct 2022 12:42:20 +0000

Introduction

Many people dream of creating their own companies and running their retail locations. A brick-and-mortar business, however, is more expensive and harder to start and run. However, anyone may launch an online store and begin selling their products there.

All you need is a well-designed, fully functional eCommerce website to advertise your products to a broad range of consumers. The market reach of selling products through a storefront is limited, and sales depend on the stock on hand and the operating hours.

On the other hand, selling goods online allows you to do so from anywhere in the world.
Using Elementor, WordPress, and WooCommerce, you can build a fully functional and reasonably priced eCommerce website without any coding experience.

This article will discuss the very first stages involved in setting up a WordPress e-commerce website.

What is WordPress?

WordPress started as a blogging platform, but it has since developed into a powerful website builder that can create any type of eCommerce store.

WordPress is a system for managing content (CMS for short). Creating and running websites, works well. Blogs, business websites, personal websites, and online shopping all might benefit from WordPress.

Because it runs online, you can use this platform without downloading any desktop software. It can be used to build and host websites. The template system and plugin architecture of WordPress allow you to customize any website to your business, blog, portfolio, or online store.

What is an eCommerce site?

A website that allows users to conduct online transactions for the purchase and sale of physical goods, services, and digital products. Customers can use an online store to buy products and services directly from a company regardless of their location.

An informative website provides information on a company's products and services. Customers can buy products and services directly from a company no matter where they are by using e-commerce websites.

E-commerce is an umbrella term for the sale of goods or services over the internet. In its most basic form, e-commerce is the electronic transfer of funds and data between two or more parties. With the introduction of electronic commerce in the 1960s, this type of business has advanced significantly since its inception.

When it comes to online sales of goods and services, every e-commerce site must have a few basic characteristics.

Taking orders
Processing payments
Handling shipping and logistics
providing customer service .

E-commerce can be classified into three categories:

Business-to-business (websites such as Shopify)

Business-to-consumer (websites such as Amazon)
Consumer-to-consumer (websites such as eBay)

Types of products sold via e-commerce

Vendors can offer a wide range of products thanks to the element of e-digital commerce, some of which couldn't be offered in a physical store.

Physical things
Among the tangible commodities that can be stored in a warehouse are supplies, clothing, furnishings, food, and furniture. Vendors post their products on their e-commerce websites for buyers to like, save, or purchase. The vendor sends the items to the customer once they make a purchase.

Services
Services including consultations, repairs, classes, tutoring, and more are frequently sold in online marketplaces. Whether you want to learn how to build a website or are looking for a certified trainer to assist your dog to overcome a bad barking habit, there is a ton of information available online.

Electrical goods
digital products, including

Flashlights and batteries
Wires and cable reels
Ceiling Fans and Related Items
Breakers, Fuses, and Load Centers
Doorbells, Chimes, and Related Items
Electrical Accessories and Boxes
Terminals, tape, and electrical connectors
Extension cords, outlets, and other accessories

What should an Ecommerce website include?

Before we begin with our guidance on building the site, we must first understand the fundamental elements of an eCommerce website and its function. The following pages and elements are required on every eCommerce website;

Landing page

The homepage determines how well your online store does. In the hero image, which should also have a compelling statement and the name of the business, you should highlight your most recent products or images of satisfied customers.
Usability is the most crucial component of an eCommerce website. Customers must easily and swiftly find the items they're looking for, and the checkout process must be straightforward.
The site should therefore emphasize the best product categories, best-selling items, and best deals.

Categories

How you categorize your products should be thought out carefully. This can be calculated using data from market research, search volume, and industry norms. There should be a lobby page for each category that includes a description of the products that are offered, a neat grid, images of the products, and pricing details.

For a quicker checkout, you should also place a "Add to Cart" CTA beneath each product.

An eCommerce store's navigation is crucial, so when you upload your various products, be sure to tag and categorize them correctly. This will ensure that when a user searches for a specific item, like a green heeling shoes, they are presented with the appropriate product. Make sure each category page has a filter as well, so users may quickly find what they want.

** Product Pages**
Each product should have a page with a description, price, image, "Add to Cart" button, and any more pertinent details like size, weight, etc. Additionally, you must include the shipment and delivery information.

You should include a "People also buy" carousel with pertinent connected products to upsell further items. A product page should also include customer reviews, stock levels, inventory information, and stock evaluations.

On the product pages, media galleries, interactive demos, and instructional videos may be useful depending on what you're selling.

** Checkout Process**
The checkout process must be efficient, fluid, and completely streamlined. The funnel consists of:

Shopping cart:

Here, customers keep the goods they want to buy. The cart should have a CTA that says "Checkout" and directs the user to the payment page, as well as the total cost of all the selected items.

Checkout: The checkout page should include a "Pay Now" CTA, a list of all accepted payment options, as well as information about delivery fees and timetables.

Confirmation:

After finishing the checkout process, the consumer should be directed to a confirmation page, which should thank them for their purchase and verify the order's products and payment.
** Blog**

Finally, a blog is necessary for your online store. Along with selling the products on your website, you also need to tell potential buyers about the benefits of your offerings. Publishing top-notch blog posts on your products not only help to promote your website in search engine results but also increases traffic to your website and, ultimately, sales.

A Step-by-Step Guide to Creating an eCommerce Website

To sell your products using WordPress, you'll need to buy a domain, sign up for hosting, and install WordPress. This part of the article will walk you through the entire process and more!

Step 1: Select a domain name.

The first steps you should take when starting a website are to obtain a domain name and a web hosting service. Visitors can reach your website by entering your domain name.

Step 2: Select a web hosting plan.

You can store all of your website's files on the hosting plan. WordPress and the recommended add-ons will be installed on your server.
WordPress hosting is fantastic because it is specifically designed for the functionality, security requirements, installation, and onboarding processes of WordPress. Because there are so many WordPress hosts to choose from, your decision will be influenced by a number of factors.

When it comes to hosting plans, there are budget-friendly shared hosting packages, pricey managed WordPress hosting, and opulent dedicated servers. To make your life easier, we offer a variety of hosting packages that are Elementor-compatible.
After purchasing a hosting service, you will receive a welcome email with all of your account information after purchasing a hosting service. Locate the login link to your hosting account area and log in with your username and password

Step 3: Install WordPress & a suitable theme

The process for installing WordPress is as follows. After logging into your hosting account, go to the My Accounts tab and enter your cPanel password. Click the WordPress icon in the cPanel auto-installers area to access the installation instructions.

Visit your WordPress website once it has been set up. Enter your username and password in the corresponding fields to enter your WordPress dashboard, then click "Log In."
(Text linking) See our in-depth guide to installing WordPress here: Setting up WordPress

After downloading and installing the WordPress software, you can use the WordPress CMS platform. Thanks to WordPress' adaptability, you may choose from tons of thousands of styles, themes, and plugins.

Step 4: Install WooCommerce

WooCommerce is a WordPress-based open-source eCommerce platform. It transforms a standard WordPress theme into an eCommerce site with all of the extra features you need to increase the profitability of your online business, such as secure payment processing and customizable shipping options.

It also ensures that your company is mobile device responsive and that a variety of additional services, such as email marketing, newsletter subscriptions, customer incentives, and discount functionality, are available.

To install WooCommerce, navigate to Plugins > Add New and search for "WooCommerce." After clicking "Install Now" and "Activate Now" on the plugin's location page, the WooCommerce Wizard will launch.

Go through a WooCommerce tutorial to learn how to use the plugin.
Step 5: Install Elementor

Installing Elementor, a visual website builder that makes creating WordPress websites much easier is the next step. WordPress occasionally has a reputation for being a frightening program that is difficult for beginners to use. However, you can quickly, effectively, and comfortably develop your site by utilizing a visual site builder.

Go to Plugins > Add New in the WordPress dashboard. Click Install after searching for Elementor Website Builder. Click Activate after installing Elementor.
Even though Elementor is free, to fully utilize its potential you may also need Elementor Pro, depending on the features you choose. Purchase the Pro version of the plugin from Elementor.com, install, and activate it as described above. After installing Elementor Pro, you'll need to enter your license by going to your WordPress dashboard and navigating to Elementor > License.

Because you'll be designing your entire website with Elementor Theme Builder and your template kit, you won't need to look for any design components in your active WordPress theme.

If you just want the lightest, most performance-focused base, the Hello theme from Elementor is what you need.
To begin, look for "Hello Elementor" in the Appearance Themes Add New section. Then, install and activate the theme.

Step 6: Choose an Ecommerce Template Kit

After installing Elementor, the final component is an eCommerce website template kit. A full WordPress website requires individual sets of the following templates: Header,

Footer, 404 page, blog archive, individual post, individual page, popup, and other features are available. Our Template Library contains websites in a variety of industries, with each kit meeting the needs of our user base. Portfolio websites, digital agencies, magazines, beauty salons, and many more are examples.

Elementor template kits are also available on creative marketplaces such as Envato and ThemeForest.

After installing Elementor, the final component is an eCommerce website template kit. A full WordPress website requires individual sets of the following templates: Header, Footer, 404 page, blog archive, individual post, individual page, popup, and other features are available.

Our Template Library contains websites in a variety of industries, with each kit meeting the needs of our user base. Portfolio websites, digital agencies, magazines, beauty salons, and many more are examples.

Elementor templates are also available on creative marketplaces such as Envato and ThemeForest.

Conclusion

With Elementor's template kits, creating a well-designed and fully-functional ecommerce website can be a smooth and seamless process. Simply download and install Elementor onto your WordPress site, select your desired template kit, customize, and publish.

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.
I work as a freelancer, building websites for clients, and love writing technical tutorials to teach
others what I do. I am eager to hear from you. Reach me on LinkedIn, (https://github.com/nnekajenny)GitHubGitHub), or my website.

Get To Know WordPress And Its Top Five Plugins

Jennifer Eze — Fri, 23 Sep 2022 12:04:26 +0000

Introduction

Creating a new website is a difficult task. You want to create something that your customers will enjoy, but you don't want the setup to take months or to be so technical that every single copy update necessitates the assistance of a developer.

A software that allows you to create websites without coding is becoming more popular.
WordPress does not require a degree in computer engineering. It is intended for non-technical users. The user interface is straightforward.

WordPress has grown into a thriving community of developers, designers, and bloggers. WordPress redesigned its user experience in 2017 with the introduction of a new editor called Gutenberg.

WordPress 5.0 (Bebo), the most recent release, includes a new and improved showcase theme.

"Why should I use WordPress?" is one of the most frequently asked questions. Isn't my website sufficient? Why should I switch to WordPress from another platform?

If you're asking these questions, you've come to the right place.

In this article, we will go over the top reasons for using WordPress. We'll also go over the different types of websites you can create with WordPress and highlight five of the best plugins available.

What is WordPress?

WordPress is an extremely capable content management system. A content management system (CMS) provides a simple interface for users to add and edit website content. The content management system (CMS) is used to create and optimize all content on a WordPress site, from the text to the visual elements.

This single piece of software serves as the website's heart, giving users the tools they need to update the look of their digital content without any technical knowledge.

WordPress is a free and open-source website creation platform based on PHP that uses a MySQL database and supports HTTPS. A plugin architecture and a template system known as Themes in WordPress are among the features. Consider it your website's operating system.

What kind of sites can WordPress make?

WordPress was previously used primarily to create blogs rather than more traditional websites. That hasn't happened in a long time. Because of changes to the core code and WordPress' massive ecosystem of plugins and themes, you can now create any type of website with WordPress.
WordPress, for example, not only powers a large number of business sites and blogs, but it is also the most commonly used platform for creating an eCommerce store! WordPress allows you to make the following:

eCommerce stores -
Blogs -
Portfolios -
Resumes -
Forums -
Social networks -
Membership sites -...

Almost anything else you can think of.

Why are there two different versions of WordPress?

If you typed "WordPress" into Google, you'd probably get two different results:

So, why are there two distinct versions of WordPress?
The short answer is that there are no two versions of WordPress; WordPress.com and WordPress.org are distinct entities, and there is only one "WordPress." But, given the nature of the subject, you are not alone in your confusion.
Let's go over it quickly:

What is WordPress “.org”?

WordPress.org is the home of the open-source, free WordPress software.
Most people refer to the open-source WordPress software and project, also known as WordPress.org, when they say "WordPress."

Furthermore, everything we've said in this post applies to WordPress.org. While there are some similarities, WordPress.com is not the same thing.

What is WordPress “.com”?

WordPress.com is a for-profit website creation service based on the open-source software available at WordPress.org. WordPress.com is one way to create a site using the WordPress.org software, but access is limited unless you pay for the most expensive plans.

WordPress.com is not "WordPress," it simply makes use of WordPress.
To put it another way, all WordPress.com sites use the WordPress.org software, but not all WordPress.org sites are on WordPress.com. In fact, most WordPress sites are not hosted on WordPress.com.

For a more detailed look, check out our full WordPress.org vs WordPress.com comparison.

Why Should You Use WordPress.

WordPress is a popular blogging and business platform. In fact, WordPress powers more than 40% of all websites on the internet. Here are a few of the reasons WordPress is so popular:

WordPress is open-source.
WordPress is easy to use for a beginner.
WordPress is SEO-friendly.
WordPress supports all media types.
WordPress is secure.
WordPress is free to use.

What are plugins?

You Can Extend WordPress Using Themes and Plugins

The core WordPress platform contains a plethora of useful features that make creating and maintaining a website simple — even for complete beginners. It can only do so much, however. You might find that you need more options or functionality than the WordPress core can provide on its own, in which case plugins come in handy.

WordPress plugins are small pieces of software that you can download and install on your website. They provide extra features, which could be minor tweaks or an entire suite of options:

Do you want to include a form or a free Google font on your WordPress website? You appear to require a good plugin.
Plugins are a necessary component of any WordPress site. Plugins extend and improve

Why Plugins Are Useful Additions to Your WordPress Site

WordPress.org has nearly 60,000 available plugins. Indeed, plugins are one of the primary reasons for using WordPress!

Plugins exist that can do almost anything you want with your website. Some plugins, such as those used to backup your WordPress site, are primarily used for administrative purposes. Others can change how your website appears to visitors.

However, you should be cautious when adding plugins to your site because many of them are not performance-optimized and can cause your site to slow down. Visitors who use a cellular network or a slow connection may have a poor experience.

Plugins are created by independent developers. When options are submitted to WordPress.org, they are reviewed to ensure that they adhere to the WordPress repository's best coding practices and guidelines. Select them wisely.

Five Top Plugins WordPress Can Offer.

Although plugins can be found by searching directories, storefronts, and developer websites, the thousands of options available can be overwhelming. To help you decide, we've compiled a list of our favorites.

The following plugins are highly recommended for both novice and advanced users. Each tool satisfies the criteria discussed in the preceding section and comes with its own set of features.

To summarize, if you're creating a new WordPress website or updating an existing one, these are the first five plugins you should investigate!

Search Engine Optimization (SEO) is a strategy that, when implemented correctly, can help your site rank higher in search engines such as Google and Bing. Its complicated rules and guidelines, on the other hand, can be difficult to remember.

Key Features:

- Use titles, URLs, and meta descriptions to improve your search engine results.

- Examine your pages and posts to identify areas for improvement.

- Choose which of your site's pages appear in Google search results.

Yoast SEO is great because it employs a simple traffic light system. A green light indicates that your post or page is ready to go, whereas yellow and red indicate that more work is needed. This is the same procedure for improving the SEO or readability of your post.

Price: The core WordPress plugin is free, but Yoast SEO Premium costs $99 per year.

2. Jetpack

Jetpack is an all-in-one plugin created by the developers of WordPress (Automattic). It provides a set of features that can be activated module by module. Contact forms, site security, user engagement options, site backups, and much more are among the modules available.

Key Features:

One-click restores and automatic backups
Protection against brute force attacks
Cutting-edge site analytics and social sharing tools

Almost every website owner can benefit from Jetpack's essential security features. The free plugin provides' set and forget' brute force protection as well as downtime monitoring to ensure your site runs at peak performance.

While not as comprehensive as Yoast SEO, Jetpack's offerings are ideal for those who are just starting out with SEO. It lets you customize the look of your titles, taglines, posts, pages, and archives in search engines. You can also write your own meta description and see how it will appear on social media.

Jetpack Professional is normally $299 per year, but it is included free with DreamPress Plus and DreamPress Pro hosting.

3. Akismet

Eradicating spam is important for protecting your website, so it’s important to find tools that monitor comments and emails. Akismet is another Automattic plugin that removes malicious links and irrelevant content from your site by comparing it to a global, constantly updated database:

Key Features:

Checks all comments on your site automatically and filters out potential spam.
Enables you to review what has been flagged as spam and make any necessary changes to the plugin.
Inspects contact form submissions to ensure genuine responses

While you can manually moderate your comments for spam, this is a time-consuming process. With Akismet, you can have a dependable solution that automatically blocks 99.9% of spam. Visitors can thus interact with your content without having to navigate through irrelevant advertisements or repeat messages.

Price: The plugin is free for personal bloggers, but a subscription is required if your site is a commercial venture. The good news is that you can get access to this through one of our DreamPress plans.

4. WooCommerce

The ability to create an e-commerce store is not included by default in the core WordPress platform. This is where WooCommerce comes into play. This plugin allows you to set up an online store and begin selling physical and digital goods.

Key Features:

Personalize your storefront by using themes and product blocks.
Offer a variety of payment and shipping options.
Make use of extensions to gain access to a wide range of features.

When you launch your WooCommerce-powered online store, you can track its performance using a central dashboard that you can customize. It even has a mobile app so you can manage your sales while you're on the go.
Price: The core plugin is free, but its developers (the folks at Automattic) also offer a slew of premium extensions that can enhance your store's functionality.

5. Elementor

If you’re just starting your website, you can benefit from using a page builder plugin such as Elementor. This tool includes a drag-and-drop editor for designing the front end of your website. To expedite the creation process, you can import pre-designed pages, blocks, and templates.

Key Features

Over 40 free widgets -

Improved performance with fewer CSS and JavaScript files

Website kits and templates that are ready to use

Elementor makes it simple to design your ideal website. The drag-and-drop editor is simple for beginners. Professionals, on the other hand, can benefit from the features of Elementor. CSS customization, animations, and motion effects

Elementor has a free version, but Elementor Pro costs $49 per year. It comes with more than 300 templates, a theme builder, and premium support.

Conclusion

It's been a pleasure demonstrating what WordPress is all about. Hopefully, you now understand what WordPress is and what it can do for you.

If you are new to WordPress, you should read the 10-Step Guide to Setting Up a Website with WordPress.

You may be a busy person who requires services to quickly build a website for your company or your business. If this describes you, please contact us right away for prompt professional assistance.

Have a fantastic time until the next time.

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, Bootstrap, PHP, HTML & CSS.

I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.

PHP | Regular Expressions

Jennifer Eze — Thu, 22 Sep 2022 14:35:05 +0000

Introduction

Most programming languages involves data entry, developers frequently run into issues when data is gathered in free text fields. In today's application programming, regular expressions are practically ubiquitous.

A popular open-source scripting language called PHP. Text, HTML, CSS, JavaScript, and PHP code can all be found in PHP files.

When searching for or replacing a string with a pattern, developers frequently use regular expressions, which are a fundamental component of PHP.

This search pattern can be used to specify your search criteria when looking for information within a text. A regular expression can be a simple pattern or just one character.
All kinds of text search and text replacement operations can be carried out using regular expressions.

This lesson will teach you how regular expressions function as well as how to effectively use them in PHP for pattern matching.

Let's dive into the world of regular expressions now, if you're ready.

What are Regular Expressions

Regular Expressions, also referred to as "regex" or "RegExp," are formatted text strings that are used to search for patterns in text. A search pattern is made up of a string of characters.

An efficient technique to describe a string pattern that matches a specific amount of text is through the use of regular expressions. You probably already know that PHP, an open-source language frequently used for building websites, offers regular expression functions as a crucial tool.
Numerous other programming languages use regular expressions in a similar way to PHP. The same is true for other apps that offer regexes with different syntaxes. Regexes are used on huge files and strings by numerous contemporary languages and technologies.

One of the most potent techniques for effective and efficient text processing and manipulation nowadays is the use of regular expressions. For instance, it can be used to find or replace matching strings within text content, check the accuracy of data format (such as name, email, phone number, etc.) entered by the user, and more.

They merely define a specific search pattern as a text string and are nothing more than a pattern or a series of characters. They lay the groundwork for capabilities related to pattern matching.

You can replace one string with another string, split a string into multiple chunks, and search for a certain string inside another string using regular expression.

You can look for a specific string inside another string using regular expression. We can also split a string into many parts and replace one string with another string. They construct complex expressions by using the arithmetic operators
(+, -, ^ ). They may assist you with things like validating IP addresses and email addresses, among others.

Advantages of Regular Expressions

Here are some benefits.

Regular expressions aid programmers in text string validation.
It provides a potent tool for pattern recognition, analysis, and text string modification.
Simple ways are offered to find the patterns by employing regexes functions.
Regexes aid in the development of the HTML tag recognition system.
Regexes are frequently used for spam filtration, password strength verification, form validation, and browser detection.
It is useful in user input validation testing for user inputs such as IP address, email address, and mobile number.
It assists in emphasizing the file's unique keywords based on the input or search result.
Metacharacters let us design more intricate patterns
Browser detection, spam filtration, determining the strength of passwords, and form validations are the main uses of regexes.

Operators in Regular Expressions

Let us look into some of the operators in PHP regular expressions.

## Operator	## Description
^	It denotes the start of the string.
$	It denotes the end of the string.
.	It denotes almost any single character.
()	It denotes a group of expressions.
[]	It finds a range of characters for example [xyz] means x, y, or z.
[^]	It finds the items which are not in range for example [^abc] meas NOT a, ,b or c.
– (dash)	It finds for character range within the given item range for example [a-z] means a through z.
	(pipe)
?	It denotes zero or one of preceding character or item range.
*	It denotes zero or more the of preceding character or item range.
+	It denotes one or more of preceding character or item range.
{n}	It denotes exactly n times of preceding character or item range for example n{2}.
{n, }	It denotes atleast n times of preceding character or item range for example n{2, }.
{n, m}	It denotes at least n but not more than m times for example n{2, 4} means 2 to 4 of n.
\	It denotes the escape character.

Create Regular Expressions

To create a regular expression, you place a pattern in forward-slashes like this:

'/pattern/';

For example:

<?php

$pattern = '/\d+/';

Function	Description
preg_match()	Returns 1 if the pattern was found in the string and 0 if not
preg_match_all()	Returns the number of times the pattern was found in the string, which may also be 0
preg_replace()	Returns a new string where matched patterns have been replaced with another string

A number with one or more digits is also matched by the '$pattern' string using a regular expression. For instance, 1, 40, 800, etc. are compatible.

Forward slashes serve as separators. The delimiters can be any of the following characters: "," "!", "@," "#," "$," or any of the brackets "," "()," "[]," or ">."

In some circumstances, braces make regular expressions easier to interpret.
Keep in mind that delimiters such as alphanumeric, multi-byte, and backslashes (") are not permitted.

Utilizing Regular Expressions to Find Strings

Regular expressions can be used with a number of PHP functions. When looking for patterns in strings, "preg match()" and "preg match all()" are among the most often used functions.

*****preg match() function in PHP*
The 'preg match()' method is used to perform a search based on a regular expression. For instance:

<?php

$pattern = '{\d+}';
$text = 'HTML 5 was released on November 22, 2008';

if (preg_match($pattern, $text)) {
    echo "match";
} else {
    echo "not match";
}

output:

match

Preg match() looks for matches to the $pattern in the $text.
Preg match() returns a "1" if there is a match in the $text, a "0" if there isn't, or a "false" if it fails.
The third parameter is added to the "preg match()" method to obtain the text that matches the pattern, like in the following example:

<?php

$pattern = '{\d+}';
$text = 'PHP 8 was released on November 26, 2020';

if (preg_match($pattern, $text, $matches)) {
    print_r($matches);
}

output:

Array
(
     [0] => 8
     [1] => 26
     [2] => 2020
        )
)

All of the matches are contained in the '$matches' parameter. The text that matches the pattern is kept in the "$matches[0]" variable. It is the number 8 in this instance.

The texts that match the first and second are stored in the arrays "$matches[1]," "$matches[2]," etc.
Preg match() only returns the first match and terminates its search as soon as it does. You can use the "preg match all()" function to find all matches.

PHP preg_match_all() function
The [preg_match_all()](https://www.phptutorial.net/php-tutorial/php-preg_match_all/) function searches for all matches to a regular expression. For example:

<?php

$pattern = '{\d+}';
$text = 'HTML 5 was released on January 22, 2008';

if (preg_match_all($pattern, $text, $matches)) {
    print_r($matches);
}

output:

Array
(
    [0] => Array
        (
            [0] => 5
            [1] => 22
            [2] => 2008
        )
)

The "preg match all()" function in this example places all matches in a multidimensional array with the first element being the strings ("5," "22," and "2008" in this case) that match the pattern.
The number of matches, which can be 0 or a positive integer, is returned by the 'preg match all()' function.

*****Regular expressions are used to replace strings.*

'preg replace()' is a function that you can use to replace strings that match a regular expression. For instance:

<?php

$pattern = '/\d+/';
$text = 'PHP 8 was released on 11/26/2020';

echo preg_replace($pattern, '%d', $text);

output:

PHP %d was released on %d/%d/%d

In the example above, the preg_replace() function replaces all numbers in the $text with the string %d.

PHP offers two sets of regular expression functions:

POSIX Regular Expression
PERL Style Regular Expression

POSIX Regular Expression

Similar to how numerous operators or elements are joined to create more complicated expressions in arithmetic, POSIX regular expressions have a structure.
A regular expression that only looks for single characters within a string is the simplest kind. For instance, "g" inside the cage string or toggle. Here are some terms that will be used in POSIX regular expressions:

Brackets

When employed in regular expressions, brackets [] have a specific meaning. These are used to determine the character range contained therein.

Expression	Description
[0-9]	It matches any decimal digit 0 to 9.
[a-z]	It matches any lowercase character from a to z.
[A-Z]	It matches any uppercase character from A to Z.
[a-Z]	It matches any character from lowercase a to uppercase Z.

These price ranges are frequently employed. You can use the range values to match any decimal digit between 0 and 6, for example, [0-6].

Quantifiers

A special character can be used to indicate the positions of bracketed character sequences and single characters. Every every character has a unique meaning. There is a specific sequence for the characters +, *,?, $, and "int range" flags.

Expression	Description
p+	It matches any string that contains atleast one p.
p*	It matches any string that contains one or more p's.
p?	It matches any string that has zero or one p's.
p{N}	It matches any string that has a sequence of N p's.
p{2,3}	It matches any string that has a sequence of two or three p's.
p{2, }	It matches any string that contains atleast two p's.
p$	It matches any string that contains p at the end of it.
^p	It matches any string that has p at the start of it.

PHP currently provides seven functions to search strings using POSIX-style regular expression

| Function | Description | |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| preg_match() | If the pattern is present, this function looks for it inside the string and returns true; otherwise, it returns false. | |
| preg_match_all() | All instances of the pattern in the string are matched by this function. | |
| preg_replace() | Similar to the ereg replace() method, the preg replace() function also allows for search and replace using regular expressions. | |
| preg_split() | The only difference between this function and split() is that this one allows regular expressions as input parameters for pattern. The string is mostly divided by a regular expression. | |
| preg_grep() | Preg grep() locates every element in input array and returns the elements of the array that match the regexp (relational expression) pattern. | |
| preg_quote() | the characters used in the regular expression. | |

PERL Style Regular Expression

Regular expressions written in Perl are very comparable to POSIX. Regular expression functions written in the Perl manner can be used interchangeably with the POSIX syntax. The quantifiers presented in the POSIX section can also be used in regular expressions written in the PERL language.

Metacharacters

An alphabetical character followed by a backslash is referred to as a metacharacter and has a specific meaning.
For example - '\d' metacharacter can be used search large money sums: /([\d]+)000/. Here /d will search the string of numerical character.
Below is the list of metacharacters that can be used in PERL Style Regular Expressions -

Character	Description
.	Matches a single character
\s	It matches a whitespace character like space, newline, tab.
\S	Non-whitespace character
\d	It matches any digit from 0 to 9.
\D	Matches a non-digit character.
\w	Matches for a word character such as - a-z, A-Z, 0-9, _
\W	Matches a non-word character.
[aeiou]	It matches any single character in the given set.
[^aeiou]	It matches any single character except the given set.
**(foo	baz

Modifiers

A regular expression greatly simplifies the process because there are numerous modifiers accessible. Consider case-sensitivity or searching across many lines, for instance.
The list of modifiers used in PERL Style Regular Expressions is provided below.

Character	Description
i	Makes case insensitive search
m	It specifies that if a string has a carriage return or newline characters, the $ and ^ operator will match against a newline boundary rather than a string boundary.
o	Evaluates the expression only once
s	It allows the use of .(dot) to match a newline character
x	This modifier allows us to use whitespace in expression for clarity.
g	It globally searches all matches.
cg	It allows the search to continue even after the global match fails.

Grouping

You can use parentheses ( ) to apply quantifiers to entire patterns. They also can be used to select parts of the pattern to be used as a match.
Example
Use grouping to search for the word "orange" by looking for ‘or’ followed by two instances of ‘an’:

<?php
$str = "Apples and orange.";
$pattern = "/or(an){2}/i";
echo preg_match($pattern, $str);

Outputs:

Conclusion

Finally, we have come to the completion of this tutorial and hopefully, you got value from it.
Thanks for reading, please hit the like, clap, or heart button to show some love, I will see you in the next tutorial…

We have leant a lot about PHP Regular Expressions.

If you have any question, please leave it on the comments. Like and share, and till next time, all the best!

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.

I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.

PHP | Regular Expressions

Jennifer Eze — Fri, 16 Sep 2022 14:27:52 +0000

Introduction

Most programming languages involve data entry, developers frequently run into issues when data is gathered in free text fields. In today's application programming, regular expressions are practically ubiquitous.

A popular open-source scripting language called PHP. Text, HTML, CSS, JavaScript, and PHP code can all be found in PHP files.

When searching for or replacing a string with a pattern, developers frequently use regular expressions, which are a fundamental component of PHP.

This lesson will teach you how regular expressions function as well as how to effectively use them in PHP for pattern matching.

Let's dive into the world of regular expressions now, if you're ready.

What are Regular Expressions

Regular Expressions, also referred to as "regex" or "RegExp," are formatted text strings that are used to search for patterns in text. A search pattern is made up of a string of characters.

They merely define a specific search pattern as a text string and are nothing more than a pattern or a series of characters. They lay the groundwork for capabilities related to pattern matching.

You can replace one string with another string, split a string into multiple chunks, and search for a certain string inside another string using regular expression.

Advantages of Regular Expressions

Here are some benefits.

Regular expressions aid programmers in text string validation.
It provides a potent tool for pattern recognition, analysis, and text string modification.
Simple ways are offered to find the patterns by employing regexes functions.
Regexes aid in the development of the HTML tag recognition system.
Regexes are frequently used for spam filtration, password strength verification, form validation, and browser detection.
It is useful in user input validation testing for user inputs such as IP address, email address, and mobile number.
It assists in emphasizing the file's unique keywords based on the input or search result.
Metacharacters let us design more intricate patterns
Browser detection, spam filtration, determining the strength of passwords, and form validations are the main uses of regexes.

Operators in Regular Expressions

Let us look into some of the operators in PHP regular expressions.

## Operator	## Description
^	It denotes the start of the string.
$	It denotes the end of the string.
.	It denotes almost any single character.
()	It denotes a group of expressions.
[]	It finds a range of characters for example [xyz] means x, y, or z.
[^]	It finds the items which are not in range for example [^abc] meas NOT a, ,b or c.
– (dash)	It finds for character range within the given item range for example [a-z] means a through z.
	(pipe)
?	It denotes zero or one of preceding character or item range.
*	It denotes zero or more the of preceding character or item range.
+	It denotes one or more of preceding character or item range.
{n}	It denotes exactly n times of preceding character or item range for example n{2}.
{n, }	It denotes atleast n times of preceding character or item range for example n{2, }.
{n, m}	It denotes at least n but not more than m times for example n{2, 4} means 2 to 4 of n.
\	It denotes the escape character.

Create Regular Expressions

To create a regular expression, you place a pattern in forward-slashes like this:

'/pattern/';

For example:

<?php

$pattern = '/\d+/';

Function	Description
preg_match()	Returns 1 if the pattern was found in the string and 0 if not
preg_match_all()	Returns the number of times the pattern was found in the string, which may also be 0
preg_replace()	Returns a new string where matched patterns have been replaced with another string

A number with one or more digits is also matched by the '$pattern' string using a regular expression. For instance, 1, 40, 800, etc. are compatible.

Forward slashes serve as separators. The delimiters can be any of the following characters: "," "!", "@," "#," "$," or any of the brackets "," "()," "[]," or ">."

In some circumstances, braces make regular expressions easier to interpret.
Keep in mind that delimiters such as alphanumeric, multi-byte, and backslashes (") are not permitted.

Utilizing Regular Expressions to Find Strings

Regular expressions can be used with a number of PHP functions. When looking for patterns in strings, "preg match()" and "preg match all()" are among the most often used functions.

*****preg match() function in PHP*
The 'preg match()' method is used to perform a search based on a regular expression. For instance:

<?php

$pattern = '{\d+}';
$text = 'HTML 5 was released on November 22, 2008';

if (preg_match($pattern, $text)) {
    echo "match";
} else {
    echo "not match";
}

output:

match

<?php

$pattern = '{\d+}';
$text = 'PHP 8 was released on November 26, 2020';

if (preg_match($pattern, $text, $matches)) {
    print_r($matches);
}

output:

Array
(
     [0] => 8
     [1] => 26
     [2] => 2020
        )
)

All of the matches are contained in the '$matches' parameter. The text that matches the pattern is kept in the "$matches[0]" variable. It is the number 8 in this instance.

PHP preg_match_all() function
The [preg_match_all()](https://www.phptutorial.net/php-tutorial/php-preg_match_all/) function searches for all matches to a regular expression. For example:

<?php

$pattern = '{\d+}';
$text = 'HTML 5 was released on January 22, 2008';

if (preg_match_all($pattern, $text, $matches)) {
    print_r($matches);
}

output:

Array
(
    [0] => Array
        (
            [0] => 5
            [1] => 22
            [2] => 2008
        )
)

*****Regular expressions are used to replace strings.*

'preg replace()' is a function that you can use to replace strings that match a regular expression. For instance:

<?php

$pattern = '/\d+/';
$text = 'PHP 8 was released on 11/26/2020';

echo preg_replace($pattern, '%d', $text);

output:

PHP %d was released on %d/%d/%d

In the example above, the preg_replace() function replaces all numbers in the $text with the string %d.

PHP offers two sets of regular expression functions:

POSIX Regular Expression
PERL Style Regular Expression

POSIX Regular Expression

Brackets

When employed in regular expressions, brackets [] have a specific meaning. These are used to determine the character range contained therein.

Expression	Description
[0-9]	It matches any decimal digit 0 to 9.
[a-z]	It matches any lowercase character from a to z.
[A-Z]	It matches any uppercase character from A to Z.
[a-Z]	It matches any character from lowercase a to uppercase Z.

These price ranges are frequently employed. You can use the range values to match any decimal digit between 0 and 6, for example, [0-6].

Quantifiers

Expression	Description
p+	It matches any string that contains atleast one p.
p*	It matches any string that contains one or more p's.
p?	It matches any string that has zero or one p's.
p{N}	It matches any string that has a sequence of N p's.
p{2,3}	It matches any string that has a sequence of two or three p's.
p{2, }	It matches any string that contains atleast two p's.
p$	It matches any string that contains p at the end of it.
^p	It matches any string that has p at the start of it.

PHP currently provides seven functions to search strings using POSIX-style regular expression

PERL Style Regular Expression

Metacharacters

Character	Description
.	Matches a single character
\s	It matches a whitespace character like space, newline, tab.
\S	Non-whitespace character
\d	It matches any digit from 0 to 9.
\D	Matches a non-digit character.
\w	Matches for a word character such as - a-z, A-Z, 0-9, _
\W	Matches a non-word character.
[aeiou]	It matches any single character in the given set.
[^aeiou]	It matches any single character except the given set.
**(foo	baz

Modifiers

Character	Description
i	Makes case insensitive search
m	It specifies that if a string has a carriage return or newline characters, the $ and ^ operator will match against a newline boundary rather than a string boundary.
o	Evaluates the expression only once
s	It allows the use of .(dot) to match a newline character
x	This modifier allows us to use whitespace in expression for clarity.
g	It globally searches all matches.
cg	It allows the search to continue even after the global match fails.

Grouping

<?php
$str = "Apples and orange.";
$pattern = "/or(an){2}/i";
echo preg_match($pattern, $str);

Outputs:

Conclusion

We have leant a lot about PHP Regular Expressions.

If you have any question, please leave it on the comments. Like and share, and till next time, all the best!

About the Author

I am Jenifer Eze, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.

I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.

A Simple Crude Application Function With MYSQL and PHP.

Jennifer Eze — Fri, 16 Sep 2022 14:04:59 +0000

photo by codingdriver,com

Introduction
CRUD Operations are typically performed on databases, hence, in this PHP CRUD Operations tutorial, you will implement CRUD techniques on MySQL databases with the help of PHP.

CRUDE is an acronym for the four basic types of SQL commands: Create, Read, Update, Delete. Most applications have some kind of CRUD functionality, and we can assume that every programmer had to deal with CRUD at some point.

A CRUD application uses forms to get data into and out of a database.

We use CRUD apps every day. Most of the time, without notice. They keep us organized, they help digitize business processes, and they’re critical to application development.

What is a crude application?
CRUD apps are the user interface that we use to interact with databases. Broadly, CRUD apps consist of the database, the user interface, and the APIs.

Modern web applications have a user perform at least one of the following operations on a database – creating a new record, reading or viewing existing records, updating, or deleting a record. If you have worked with a database, you have most likely worked with CRUD without realizing it.

CRUD apps are used daily by several businesses and organizations to maintain their day-to-day workflow. HR uses CRUD apps to manage staff records and keep and track the keeping of employee leaves, and attendance.

Customer success uses CRUD apps to solve customer tickets, and so on. Take a look at the blogging sites. You as a user can create your post, read your post, update your post and select your post. Bloggs are classic CRUD apps.

How to Build a Crud Application.
This is a step-by-step procedure on how to implement a simple user crud operation app with validation. Using this crud app, you can learn how to insert, read, update and delete data from a database in PHP.
Follow the following steps to build a crud operation using PHP and MySQL;

Step 1 – Create Database Table
Step 2 – Create an index page(with a form)
Step 3 – Create a config Page
Step 4 – Create an action Page
Step 5 – Create an update Page
Step 6 – Create a Delete file.

Step 1: Create Database Table

First, we need to create a database and database table where we save the ’ data or records.
In the database, we will keep only four pieces of information in our table (people) – name,Date of birth, ‘food, and ‘friend.

Database Name – yearbook
Table Name – people

CREATE TABLE users (
uid INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) As defined,
email VARCHAR(255) As defined,
dob VARCHAR(255) As defined,
food VARCHAR (255) As defined,
friend VARCHAR (255) As defined,
);

Step 2: Create Index File

our index will contain our form, from which users can log in.

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.min.css" rel="stylesheet" >
      <link rel="stylesheet" href="css/owl.carousel.min.css">
      <link rel="stylesheet" href="css/owl.theme.default.min.css">
      <link rel="stylesheet" type="text/css" href="css/aos.css">
      <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
      <link rel="stylesheet" href="css/style.css">
      <title>Hello, world!</title>
    </head>
    <body>
<section class="bg-dark py-5">
   <div class="container">
     <div class="row">
      <div class="col-md-4 offset-md-4 bg-warning p-5">
        <form action="action.php"    method="post">

          <div class="input-group mb-3">
            <span>
            <i class="fa fa-envelope"></i>
            </span>
          <input type="text" name="name" class="form-control" placeholder="full name">
        </div>

      <div class="input-group mb-3">
        <span>
        <i class="fa fa-calendar-alt"></i>
        </span>
      <input type="text" name="name" class="form-control" placeholder="Date of Birth" 
     </div>

    <div class= "input-group mb-3">
     <span>
      <i class="fa fa-fish"></i>
      </span>
<input type="text" name="name" class="form-control" placeholder="Forvourite food"
</div> 

    <div class="input-group mb-3">
     <span>
      <i class="fa fa-handshake"></i>
       </span>
<input type="text" name="name" class="form-control" placeholder="best friend"
    </div> 

</form>
</div>
</div>
</div>
</section>

      <script src="js/bootstrap.bundle.min.js" ></script>
      <script src="Js/jquery.min.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/aos.js"></script>
      <script src="js/script.js"></script>

    </body>
  </html>

Step 3: Create Config File

The config file is enables us connect to the database.

<?php 
$db= new mysqli ("localhost", "root", "", "yearbook");

/* server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');


/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,);
 // check connection.
?>

Step 4: Create an Action File

On your action page, you check for the submit button. we also collect all data from the form. we do the insert query as well. if you insert data, it will insert and redirect you back to the index page using the header location.

<?php
include_once("config.php");

if(isset($_POST['submit'])){
$name=$_POST['name'];
$DOB=$_POST['DOB'];
$food=$_POST['food'];
$friend=$_POST['friend'];
$db->query (INSERT INTO people(name,DOB,food,friend) VALUES ('$name', '$DOB', '$food','$friend');

header(location:index.php);
}
?>

THE READ SECTION

To read information from your database. you need to include your config.php in your index.php file. just before your Doctype using include_once(“config.php”). This must be done because one cannot read a database without the config.

The next step is to write a select query. Because we want to select all from people(which is the table name) we will write the following code.

<?php
include_once("config.php");
$list=db->query("SELECT *FROM people order by DESC LIMIT 10")

?>



<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.min.css" rel="stylesheet" >
      <link rel="stylesheet" href="css/owl.carousel.min.css">
      <link rel="stylesheet" href="css/owl.theme.default.min.css">
      <link rel="stylesheet" type="text/css" href="css/aos.css">
      <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
      <link rel="stylesheet" href="css/style.css">
      <title>Hello, world!</title>
    </head>
    <body>
     <section class="bg-dark py-5">

        <div class="container">
          <div class="row">
            <div class="col-md-4 offset-md-4  bg-warning p-5">
              <form action="action.php" method="post">


                 <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-envelope"></i>
                  </span>
                  <input type="text" name="name" class="form-control" placeholder="full name">
                </div>


               <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-calendar-alt"></i>
                  </span>
                  <input type="text" name="DOB" class="form-control" placeholder="Date of Birth">
                </div>



              <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-fish"></i>
                  </span>
  <input type="text" name="food" class="form-control" placeholder="Favourite food">
            </div> 


                <div class="input-group mb-3">
                  <span class="input-group-text">
                    <i class="fa fa-handshake"></i>
                  </span>
<input type="text" name="friend" class="form-control" placeholder="Best friend">
                </div>
<input type="submit" name="submit" value="login" class="btn btn-dark col-12">
           </form>
           <?php 
           while ($row=$list->fetch_assoc()):?>

            <div class="my-3">
            <h3 class="text-muted"><i class="fa fa-user"></i><?=$row['name'];?></h3>

            <p class="text-secondary">
             <i class="fa fa-envelope text-dark"></i><?=$row['dob'];?>
             <i class="fa fa-fish text-dark"></i><?=$row['food'];?>
             <i class="fa fa-handshake text-dark"></i><?=$row['friend'];?>

<a href="delect.php?uid=<?=$row['uid']?> class="text-danger" title="delete"><i class="fa fa-trash"></i></a>
<a href="update.php?uid=<?=$row['uid']?>" class="badge bg-success badge-pill">update<i class="fa fa-edit"></i></a>
      </p>
    </div>
<?php endwhile;?>

  </div>
    </div>
     </div>
      </section>



      <script src="js/bootstrap.bundle.min.js" ></script>
      <script src="Js/jquery.min.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/aos.js"></script>
      <script src="js/script.js"></script>

    </body>
  </html>

The “list” above is called a resource. our objective is to convert the resources into an associative array using <?PHP while ($row =$list → fetch_assoc);
$row is now the associative array.

The above while loop brings everything to the database and displays it on the index page.

Step 4: Create an Update File

In our update file, we have a button called the update.php. but that button is a link to our index .php. if (isset($_GET)[‘uid’]; means the user is suspicious, then you kill the page. you must be aware of the previous information before you can do an update.

To get the previous information you do a select query. that will enable you to specify the person you to want to update. with the value attribute, the update change will be effected and changes will be made in the database.

<?php

  include_once("config.php");

if(isset($_GET['uid'])){

    $uid=$_GET['uid'];

    }else{

die(header('location:index.php'));

  }

  $list=$db->query("SELECT * FROM people WHERE uid=$uid");

  $person=$list->fetch_assoc()

//helps you read your database and put a limit to how much information that would 

display.

  ?>

<!doctype html>

    <html lang="en">

      <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="css/bootstrap.min.css" rel="stylesheet" >

        <link rel="stylesheet" href="css/owl.carousel.min.css">

        <link rel="stylesheet" href="css/owl.theme.default.min.css">

        <link rel="stylesheet" type="text/css" href="css/aos.css">

        <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">

        <link rel="stylesheet" href="css/style.css">

        <title>Hello, world!</title>

      </head>

      <body>

       <section class="bg-dark py-5">

      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4 offset-md-4  bg-warning p-5"&gt;
            &lt;form action="update_action.php" method="post"&gt;


              &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="name" class="form-control" placeholder="full name" value="<?=$person['name']?>">

                  </div>

             &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-calendar-alt"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="DOB" class="form-control" placeholder="Date of Birth" value="<?=$person ['dob']?>">

                  </div>

            &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-fish"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="food" class="form-control" placeholder="Favourite food" value="<?=$person['food']?>">

                  </div> 

              &lt;div class="input-group mb-3"&gt;
                &lt;span class="input-group-text"&gt;
                  &lt;i class="fa fa-handshake"&gt;&lt;/i&gt;
                &lt;/span&gt;



<input type="text" name="friend" class="form-control" placeholder="Best friend" value="<?=$person['friend']?>">

                  </div>

<input type="hidden" name="uid" value="<?=$person['uid']?>">

<input type="submit" name="submit" value="login" class="btn btn-dark col-12">

</form>

       &lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;



    &lt;script src="js/bootstrap.bundle.min.js" &gt;&lt;/script&gt;
    &lt;script src="Js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/aos.js"&gt;&lt;/script&gt;
    &lt;script src="js/script.js"&gt;&lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

Step 5: Create a Delete File

<?php

include_once("config.php");

if (isset($_GET['uid'])){

        $uid=$_GET['uid'];

    $db-&gt;query("DELETE FROM people WHERE uid='$uid'");


    header("location: index.php");



}

?>

Conclusion

Finally, we have come to the completion of this tutorial and hopefully, you got value from it.

Thanks for reading, please hit the like, clap, or heart button to show some love, I will see you in the next tutorial…

We learned how to build a simple crude application with SQL and PHP.

If you have any questions, please leave them in the comments. Like and share, and till next time, all the best!

About the Author

I am Jennifer Eze, an enthusiastic developer with a passion for JavaScript, PHP, HTML & CSS.

I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.