DEV Community: Derrick Nkangwa

Elementor Benefits | Elementor, WordPress Page Builder Review 2021

Derrick Nkangwa — Wed, 21 Jul 2021 14:43:24 +0000

Disclaimer !!: This post contains affiliate links... If you click one of the links to purchase, I will get a commission.
These commissions will help me a long way to sustain my blog, and for me to keep serving you with interesting articles

Not sure if Elementor is good enough? In this elementor review 2021, you will be learning about all the elementor benefits, pros and cons of elementor and why you should, or not use it.

Here is everything you need to know about the elementor page builder plugin for WordPress.

Table of contents:

What is Elementor ?
Features And Benefits
Elementor Pricing
How to use the elementor plugin
Round up about elementor page builder

What is Elementor?

Elementor is a Drag and Drop Page Builder for WordPress. This means a couple of things…

Elementor lets you create original-looking posts and pages that are unique, compared with the standard post/page templates that come with your WordPress theme.
It doesn’t require any HTML/CSS/PHP/Javascript coding skills. Everything can be done in a handy user interface.
It works on the front-end of your website, meaning it shows you the outcome of your website right away in a WYSIWYG (What You See Is What You Get) manner.
You can use it to create any page layout you could ever think of.
One of the most important factors is that it works with all WordPress themes. So you can keep your current design and still get the best out of elementor.
By summing everything up, we can say that Elementor is a WordPress page builder plugin that enables you to create beautiful website designs and layouts through a simple drag and drop way.

By summing everything up, we can say that Elementor is a WordPress page builder plugin that enables you to create beautiful website designs and layouts through a simple drag and drop way.

Let’s have a deep dive into some of the most interesting features elementor comes with:

Elementor Benefits And Features

Elementor comes equipped with more than 90 widgets to help you build amazing websites.

Some of these widgets include Image, Text, Image Galleries, Counters, Testimonials…. just to name a few.

As I mentioned earlier, elementor is a drag and drop WordPress page builder that allows you to edit your website and see the results in real-time.

The live preview features mean you don’t have to wonder what your page is going to look like because every change you want to see is in front of you in real-time.

Apart from that, Elementor gives you access to display settings. This is where you can change the backgrounds, margins and padding values, default colours, fonts, and so on.

Elementor comes with a full revision history, meaning you can revert back to any change, regarding you mistakenly mess things up.

With Elementor, you can also choose to do a preview on various device types and screen sizes (Mobile, Tablet and Desktop) by navigating to the bottom-left of the elementor page builder on your screen.

Elementor Pricing

This amazing page-builder plugin is also available for free, but of course, the free version doesn’t give you all the options as compared to the paid version.

With the free version, you still have options like Image carousel, Google Map API, counter, animations, etc…

Now about the pro-version, it does have very interesting features that give it more power and it’s advisable for you to have a copy of it from their official site.

50-plus additional content elements/modules.
300-plus additional page templates.
Theme Builder (the module where you can change the headers and footers of your current theme).
WooCommerce Builder (the module that allows you do rebuild your WooCommerce product pages).
Popup Builder (a module where you can build pop-ups and have them integrated with either an opt-in form or some special offer/discount).
Visual Form Builder (comes with integrations with popular marketing tools).
You can create Global Widgets and then reuse them throughout the site.
Add custom CSS to any Elementor block. Deploy Elementor elements in sidebars and widgets.

Here’s the current pricing of Elementor Pro:

How To Use Elementor

In this section, I will be showing you how to use elementor after you have purchased, installed and activated the plugin on your website.

Once installed, go to your WordPress dashboard and hover your mouse on Pages, you will see Add New.

After you click on Add New, you will see another screen where you will need to put your page title and a button at the top where you can choose to edit the page with elementor.

When you click on the edit with elementor, a new screen will appear where you can now choose default built-in elementor templates

you will click on the icon in the middle to add a default template from the elementor library.

Once you click on it, you will see a variety of in-built elementor templates

As you can see on the screenshot, multiple templates which you can choose from. We decided to choose the third template as you can choose from the screenshot. You can choose any that looks appealing to you and customize it.

When you choose the template of your liking, click import to import it to your newly created page.

Elementor Review Conclusion

The question one may ask is… Is elementor better than the other page builder?

Well, it depends on the way you view it. But it’s definitely one of the best out there for sure.

Still, there’s one thing that puts Elementor significantly ahead of the others. That thing is the price.

While there’s a Pro version of Elementor available, you honestly get more than 80% of the plugin’s awesomeness for free. Other Page Builders like Beaver and Divi don’t give you that. This makes Elementor the best first option for anyone looking for a page builder plugin.

Pros Of Elementor

It’s free. And most new websites won’t need to upgrade to Pro.
It has an exceptional range of features and is easy to use.
Again, the range of features that are available for free is more than impressive. I feel I should include that on the list twice.
It allows you to build custom page layouts and designs that may not be available in your current theme and doesn’t require any HTML, CSS or PHP skills.
Features such as inline text editing and real-time previews give you a true ‘what-you-see-is-what-you-get’ editing interface.
The ability to adjust your desktop, tablet and mobile views separately.
There are very detailed settings for all of the alignments, margins and padding values. Literally nothing is outside your control.

Cons Of Elementor

-Adding custom styling to links doesn’t always go as planned. You may be stuck with Elementor’s default typography and color settings, which may not be what you want.

If something is misaligned on the page, it’s often hard to locate the exact margin value that’s the culprit. For example, you may have a primary block, a column inside it, and then a content element inside that. Each of them has its own margin settings.

Conclusion

If you need an excellent free drag and drop page builder, Elementor is definitely your Go-To destination.

You can click here to go to elementor’s official website

NB: You can visit my blog, positivevibesmedia for many more interesting and related articles

Additional Resources

NB: You want your website to rank top on all search engines, get the best Plugin for SEO, RankMath

You can get premium and professional templates for WordPress to standout from other webite designs, from Templately
You can get Chaty, a chat widget plugin for WordPress on your website.
Also visit Premio, a store for many interesting WordPress plugins that might be helpful for your website and blog.

Why Choose Namecheap To Deploy Your Web App/Website

Derrick Nkangwa — Sun, 25 Apr 2021 12:24:34 +0000

Namecheap was founded all the way back in 2000 by Richard Kirkendall

Namecheap is home to over 9 million domain names, which puts them at around 2.5% market share. As the name would indicate, Namecheap is one of the most affordable registrars. They will also help you transfer all the domains that you might have registered with another registrar.

Namecheap offers web hosting, WordPress hosting, email hosting, integration with third-party apps and website builders (like Weebly), security services, and more. It’s worth noting that Namecheap’s interface makes it very easy to manage domains.

During checkout, you can choose to buy your domain name for anything from one to even ten years. You have the option of choosing to have the domain auto-renew, too.

Upgrades and extra costs:

Premium DNS: $4.88/year
Web hosting: from $8.88/month
__Namecheap VPN: free trial, then from $0.83/month afterwards
Email hosting: free trial, then from $0.74/month afterwards
Premium SSL certificate: $3.88/year
ICANN fee: $0.18/year

Free bonuses:
-WHOIS privacy
-Domain lock

Pros of Using Namecheap Hosting

Big Discounts for Domains, Hosting, SSL and more
Namecheap starts strong with a free domain name, speed, uptime, migrations, and extra plan features like backups.

Here are the full details:

1. Free Domain and Migration

Namecheap excels at domain names. So it only makes sense that they’ll happily throw one in if you sign up for their hosting plan. It’s free for the first year only, though. After that, you’d have to pay the renewal price of the domain. For example, for .com it’s $8.88/year.

If you already have a website set up somewhere else, they’ll also help you migrate the service for free. For a full cPanel migration, Namecheap guarantees to do it in less than 24 hours and with no more than 15 minutes of downtime. If they fail (or you’re not completely satisfied with how the migration went), they’ll credit your account with the value of your first purchase of shared hosting.

2. Good Uptime – 99.96%

Uptime is one of the most important criteria to look for
in a host and it’s something that we always test.

Namecheap delivered a stellar 100% uptime the first month we signed up. That gave us plenty of excitement to see what was to come.

And we’re happy to say that Namecheap didn’t disappoint.

Even though Namecheap had some problematic months during our testing period, we’re still happy to say that they managed to deliver decent uptime, coming at an average of 99.96%. In total, they had 62 outages.

NameCheap last 12-month uptime and speed statistics
NameCheap average uptime | See stats

Last 12-month average uptime:
March 2021: 99.99%
February 2021: 99.89%
January 2021: 99.98%
December 2020: 100%
November 2020: 99.89%
October 2020: 100%
September 2020: 99.93%
August 2020: 99.91%
July 2020:99.99%
June 2020: 99.99%
May 2020:99.98%
April 2020: 100%

3. Decent Load Time 417 ms

After the uptime, the second most important criterion is speed. The reason it’s so important is that speed has been directly correlated with visitor happiness.

Google recently found that the probability of someone bouncing increases over 100% if your pages take up to six seconds to load.

So yes, you need your site to stay alive. If that site is slow, then it’s almost as bad. Your site might as well be down because people will be leaving in droves.

Namecheap has been able to post an average page speed of 417 ms over the past 12 months, which easily gets a thumbs up from our side.

NameCheap Speed Apr. 2020 - Mar. 2021

Moreover, they are steadily improving their loading times from month to month.

4. 30-day Money-Back Guarantee

Namecheap does offer a rock-solid 30-day money-back guarantee. You’ve got a full month to see if their service is right for you. Otherwise, it’s not too late to back out and try something else.

5. Fully-Loaded Value Plan

We’ve reviewed many hosts to date.

And for each one, we typically sign up for the most basic plan to set up our test website.

The reason is twofold:

We want to be able to base these reviews on real data and performance figures.
Most base-level plans at each hosting company are pretty similar.
In other words – this allows us to compare apples to apples (for the most part). Each shared offer is fairly similar, with the same features offered on each.

Namecheap surprised us, though.

First, they offered unmetered bandwidth on their cheapest plan. They also give you access to standard features like cPanel access and apps like WordPress.

Their cheapest plan also includes a free SSL certificate for the first year.

You also get twice-a-week backups, just in case things go haywire while updating your new site.

The best part about their cheapest offer is that you get 50 MySQL databases (which is way more than what most companies offer on a similar tier).

Plus, you can set up three websites on this plan. Most base-level hosting plans only allow you to host one single website. This is a great value if you have several sites, like a business and a personal one.

They also give you up to 30 email addresses right out of the gate, too.

This can add up to huge cost savings over time.

6. Third-Party Reviews Are Excellent

We always like to get a pulse from existing customers to make sure each review isn’t just based on our own isolated experience.

We’ll admit:

We were pleasantly surprised at some of the customer reviews online.

For instance, they have a solid 4.7-star rating on Shopper Reviewed. Supposedly that’s based on over a million reviews.

Promotions Below:......... 👇️👇️

NB: You want your website to rank top on all search engines, get the best Plugin for SEO, RankMath

NB: If you are a WordPress Developer looking for an excellent Page Builder for WordPress, consider choosing Elementor

Visit my blog, Positive vibes media for more interesting articles

Why React Hooks ?

Derrick Nkangwa — Sat, 20 Feb 2021 10:41:15 +0000

In this article, we will look at why using React Hooks can be so effective and help us to write cleaner code.
We will also end up by looking at the importance of React Hooks in our business logic when writing React code.

What are Hooks?

Hooks are a new addition in React 16.8.
They let you use state and other React features without writing a class.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Some basic React Hooks include:
useState
useEffect
useContext

In general, React Hooks allow us to write shorter and cleaner code.

What is a useState Hook ??
const [state, setState] = useState(initialState);
useState returns a stateful value, and a function to update it.

What is a useEffect Hook ??
useEffect(didUpdate);
Accepts a function that contains imperative, possibly effective code.

What is a useContext Hook ??
const value = useContext(MyContext);
Accepts a context object (the value returned from React.createContext) and returns the current context value for that context.

Let's look at the example below of a simple counter component using the class syntax and compare it when using Hooks.
In this example, we will be using the useState Hook

NB: Using class syntax

import React, { Component } from 'react'

class MyClassComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
    this.incrementCount.bind(this)
  }

  incrementCount() {
    this.setState((state) => {
      count: state.count + 1
    })
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state}</p>
        <button onClick={this.incrementCount}>Increment Count</button>
      </div>
    )
  }

We set an initial value for our count state in the constructor and have an incrementCount method we can call when the button is clicked to increment that state. Still, for something as simple as a counter, there’s a lot of code we have to write to get it to work, including knowing about class constructors, making sure we don’t forget to call super(props), and binding this correctly to incrementCount.

NB: Same example using useState Hook

import React, { useState } from 'react'

function MyFunctionComponent() {
  const [count, setCount] = useState(0)
  const incrementCount = () => setCount((countState) => countState + 1)

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  )
}

That’s so much more straightforward! I have a single call to useState (all hooks start with the word use to signify they are in fact hooks) which returns an array with two elements in it. The first is a reference to the state being managed, which we named count. The second is a function to change that state, which we named setCount. Additionally, any value passed into useState when it’s called - 0 in our example is used as the initial state.

setCount It’s very similar to "this.setState" in that it allows us to update our state over time. However, while this.setState will merge any state changes for you, setCount (or any state setting function from useState) always overwrites the previous state. "incrementCount" is now a function in our component instead of a class method.

The useState hook gives us all the state management features of class components in our function components and will continue to be a building block for more advanced hook use cases.

Above, we have just done a simple demonstration using useState hook how easy hooks can be in building components in React

Importance Of React Hooks 0n business logic in React code

If we consider the types of components we create, they fall into two general categories. The first category contains what are sometimes described as “stateless” or “dumb” components. These components are typically functions that hold no state, do not interact with their environment except by accepting props, and are chiefly concerned with displaying our UI. The second category contains “stateful” or “smart” class components which hold business logic to interact with the environment, handle data fetching, provide user interactivity, etc. It’s important to note that while our UI code is easily composable using our stateless components, our business logic is actually locked into the stateful components in which it is written. How do we then share this business logic (read: how do we compose this logic) across our application? Throughout React’s lifetime, this has been handled in a few different ways.

Hooks stepped in and provided a better alternative for sharing business logic. We no longer rely on components to encapsulate our logic which injects more complexity into our component tree, either implicitly or explicitly. Instead, hooks exist as functions that can be called within components, shared across components and themselves composed into more complicated hooks - oh yes, custom hooks exist and they are wonderful - without affecting the component tree. All calls to hooks are explicit so dependencies aren’t hidden and give the developer naming flexibility so there’s no prop clobbering. Hooks are brand new, so there will undoubtedly be rough edges and scenarios we haven’t even considered yet but they will only improve as they reach full community adoption.

The initial look and feel of hooks are fantastic. They are the most composable paradigm for sharing business logic and allow everything to React to be encapsulated as functions, both UI components and business logic. This move towards functions has been the evolutionary trend of React throughout its life and hooks are a natural outcome of that evolution. They are incredibly powerful and I can’t wait to see how we as the community use them to write better software.

If you love this article, please do well to like and comment.
I'll be coming up with much more useful and educative articles on web development.

visit my website nkenganyiclovis.tech
Follow me on Twitter @Nkenganyi Clovis
Follow me on LinkedIn @Nkenganyi Clovis

Signup on daily dev to get the latest updates and news as a software developer daily.dev

How To Learn ReactJS in 2021

Derrick Nkangwa — Fri, 29 Jan 2021 16:34:52 +0000

As a passionate web developer, you must have come across the name ReactJS, you might have also tried to learn this library.

Let's start by asking the question...
WHAT IS REACT ??
According to the official React Documentation, React is defined as A JavaScript library for building user interfaces

As we know, in software development doing repetitive tasks is frustrating and developers always look for some framework or method to save their precious time. Here React comes into the picture.
React is component-based and it helps in building frontend pages and web applications in less time and that’s the coolest feature of this library.

Today in this blog we are going to list down the key skills that are needed to become a proficient React Developer.

Learn the Fundamentals of HTML, CSS, and JavaScript

You should understand the base before moving on in learning this JavaScript library.
Understand the basic building blocks of the website. How HTML, CSS, and JavaScript work. This is because these skills a very vital before you start learning and fully understand React.
Most React features are inherited from JavaScript, so it's good to have a solid foundation in JavaScript. Some of the most used and essential Javascript concepts that are used in React include

Variables, objects, arrays, functions, and classes.
Common array methods such as .map(), .filter(), .reduce()
ES6 features such as arrow function, let, const. Learn about ‘this’ keyword, call, apply, and bind method.
Concepts of Asynchronous JavaScript such as promises, callback, Async/Await.
Learn how DOM (document object model) works. How to create, select, and update the HTML elements and their attributes.

2. Fundamentals of Node JS

As part of being a React Developer, you will have to do a lot of NPM scripts/commands which I consider any software developer will be very familiar with especially when working with most JavaScript frameworks.
You should have knowledge of NPM (Node package manage). NPM is used to install the Node modules and packages. Learn how to use the basic commands/scripts to install the packages and modules.
When learning React, you will also need to understand the import and export keywords which is also a very essential concept in React to utilize the installed node modules.

3. Learn React Fundamentals
Once the above concepts are clear and you have become confident with JavaScript, jump to the React Fundamentals. Learn the core concepts of React. React is based on component-based architecture. You will have to divide the complete UI or JSX into reusable components.

You will be creating different components for different tasks and these components will be fitted into the parent component. This parent component will be rendered to the user.

Now the question is…what are the core concepts you should learn in ReactJS. Let’s discuss that…

You will be using JSX syntax in ReactJS.
The syntax of JSX is somewhere similar to HTML but keep in mind that it is different from plain HTML.
Learn to render the JSX elements. Show and hide elements depending on the conditions.
Learn the concept of State in ReactJS How does it work? Basically, the state holds the synchronous variable, and changing the value of the state will be reflected in the whole application wherever it is used. Learn how to store and update the data in State.
In React, you will be using props (Hey! What it is actually? ). We know that this might be a new word for you. Basically, props are just like the arguments passed to the function or method. Know when to use it and how to use it. You will be using props as an input argument to the HTML tags.
Functional component, class component, and the difference between both of these.

Just like in JavaScript, you will handle events in React. Learn how to handle some common events such as onClick, onChange, and onSubmit (You will be using these events in buttons, inputs, and forms).

NB: The React official tutorial will help you a lot to understand everything about React.
When you understand the basic concepts, then go-ahead to build projects from scratch on your own.
You can build projects such as...

Simple calculator app
Simple todo-app
Build a shopping cart

4. Styling in React
In development most of the time, we use plain CSS to give styling to our application. But in React mostly developers use the Component library for easier styling. There are many component libraries available to use but the most popular ones in React are Material UI and Bootstrap.

There is even what we call Reactstrap, which is like bootstrap main for the react library

You can also use the utility class library such as Tailwind CSS to style your element.

5. React Router

React developers use a third-party library called react-router-dom to create links for different pages, to load the content of different pages, and to redirect to other pages.
Below are some common features of react-router-dom you should know about to work with your application.

How to use , and components.
How to do navigation using the component and using the useHistory() hook.
Creating dynamic routes using the path prop i.e. and getting the path values using the useParams() hook.
How works in React Router.

6. React Hooks
So you’re done with the basic building blocks and React fundamentals. Now it’s time to learn React Hooks. This new feature was added in React version 16.8. With the help of React Hooks, you can write the React features without using the classes. React hooks allow you to write less code and that makes your app efficient, simpler, and powerful.

You will be working on mainly 5 core concepts of React Hooks. These five core concepts are given below:

useState: Most of the time in your React app you will be using this concept to store and manage the data.
useEffect: You will be using this concept in actions like HTTP requests and working with the Browser API.
useRef: This will be used to reference JSX elements.
useContext: This property of React Hooks will be used to access data from React Context to share data among components easily (instead of passing props)
useReducer: This concept in React hooks will be used to store and manage data across multiple components.
We have discussed only 5 hooks that are important to learn. There are more than 5 hooks but that’s not needed initially in your learning phase. As you will progress and you will encounter problems in your application, you will be learning more hooks slowly.

7. Redux
In your React application, you will have to manage the states. Once your application will start growing it will become a complex application and you will have to manage the states across components.
Redux which a powerful JavaScript library solves this problem and helps in maintaining the state of the application. In Redux, you store all your states in a single source.
You can learn more about Redux in the Official Redux tutorial.

8. Learn to Work With the APIs in React Apps

We know that React is a front-end library to build the user interfaces. A user interacts with the frontend part of the application, access the data from there, or navigate from one page to another page.

React interacts with the backend code of the application. We get the data from the backend part of the application, we perform actions such as authentication, display the item to the user, searching, registration of the user, etc.

Mainly there are two ways to work with the data from the backend. The most common and standard way is using the REST APIs. The other and the newer one is GraphQL API. In your work, you will encounter problems where you will have to work with both of the APIs. Learn how to work with both kinds of APIs using React.

I hope I have run you down on the main concepts or what you need to be successful on your journey in learning React and becoming a React developer.
The more you keep working on projects with React, you will encounter difficulties and this will help you to learn new skills and 3rd party libraries in React that will help you solve your problem

Promotions Below:......... 👇️👇️*

NB: You want your website to rank top on all search engines, get the best Plugin for SEO, RankMath

NB: If you are a WordPress Developer looking for an excellent Page Builder for WordPress, consider choosing Elementor

Check out my blog @ Positive Vibes Media to get the latest gist in the world of Web Development, Digital Marketing and related kinds of stuff

If you like this article, please like, comment and share and make sure to follow me on the following platforms:
LinkedIn
Github

How To Install MongoDB Shell On Ubuntu Through The Terminal

Derrick Nkangwa — Tue, 15 Dec 2020 11:16:38 +0000

Let’s start by defining what MongoDB is, then we will see how we can go about the installation process

What is MongoDB? :- MongoDB is a cross platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

NB: The Mongo shell is an interactive JavaScript interface to MongoDB. You can use the mongo shell to query and update data as well as perform administrative operations.

Now let’s see how the installation process looks like on your Ubuntu System.

--- To start, it is always advised to make sure all your packages are up to date on your ubuntu system by typing the command as seen on the screenshot:

--- You can now run the command to install MongoDB on your Ubuntu terminal by typing the command sudo apt-get install mongodb as seen on the screenshot below:

It will now prompt you a message if you want to continue. Just type letter “y” on your keyboard which is the same as typing “yes” to accept the process to continue.

--- At this point, you will now start the MongoDB service by typing the following command as seen below:

--- From here on, you can check the status of the newly installed mongodb on your machine to check if it’s running or not and if it is succesfully running, you will see active (running) written in green.

--- Now you need to type the following command to start the mongodb server:

Thanks for reading this article.

Please like if you find this article helpful and also follow me to get in touch with all the latest articles I will be posting in the tech world

You can get in touch with me through Linkedin by clicking the link https://www.linkedin.com/in/nkenganyi-clovis-4310b41ba/

Top 5 Web Development Trends Every Business Should know in 2020-21

Derrick Nkangwa — Wed, 04 Nov 2020 18:57:46 +0000

According to statistics, the total number of websites in the internet today is more than 1.8 billion. Every website has its own purpose and strategy, whether it is related to design, development or digital marketing.

The question is, how many websites are following these trends?
The answer is, “very few”. It is very important to know that the technology world is rapidly growing, including web technologies.
These new trends are evolving everyday, and developers who are very cautious and keen, keep track of this evolving trend to make sure they are up to standard.
It has been noticed that most web visitors stick to a particular site whose contents and layouts are beautiful and attractive.
Due to this reason, outdated websites are off the picture.
That’s the reason why it is important for web developers to be aware of the latest trends.

In this article, you will learn about the web development trends in 2020 and for the coming year 2021.

Best Web Development trends for 2020-21

1. Dark mode UX (User Experience):

Websites and Web Apps with dark mode UX have been trending for the past 2 years or so now. From the way it shows, this trend will continue to get even more popular in 2021.

Dark mode looks more suitable and preferable when it comes to the eyes in low-light conditions.
This trend in development is worth keeping an eye on.

2. Interactive and Responsive Elements:

People love visiting websites that are responsive and highly interactive. All these elements adds a different feel to the site.
Even though interactive elements are very expensive to implement on sites, it is worth it on a website because it will attract and engage your visitors into potential customers.
As this trend will continue to emerge in 2021, we will see new interactive elements and ideas.

3. Progressive Web Apps (PWAs):

PWAs is a modern website development technology that is being used by many leading businesses today. A Progressive Web App offers the benefits of both a native app and a classic website.
This works great even in offline mode while enabling faster load time and app-like experience.
Companies like Freelancer, Twitter and Uber are using this technology to provide a great User Experience (UX).
This technology is built using HTML, CSS and JavaScript.
We will see a high number of sites following this trend in 2021 and the coming years.

4. Voice User Interface (UI):

Voice UI and voice commerce will be one of the fastest growing technologies and web development trends in 2021. This is because the rise in the use of smart speakers and voice recognition technology in devices like Amazon Alexa and similar devices built by Google, Apple, Microsoft and many other tech giants.
This speech recognition powered-devices have revolutionized the way people search on Google, Bing, Yahoo and many other search engines.
Since as the global smart speaker market is expected to grow at a CAGR of around 23% year-over-year till 2025, the total number of websites powered by voice UI will significantly increase.

5. One Page Websites:

One page website designs are great for individuals, portfolios, freelancers, specific product sites etc…
These types of websites consumes less space bringing in more traffic.
Importantly, with this design method to, the essential things can be kept in focus for website visitors. Such sites are easier to create and manage as it is made up only of a single page.
As the number of freelancers, startups, portfolios will increase, there will be a higher number of such websites in 2021.

Thanks for taking your time to read.

Please do well to like and comment

You can email me @ nkenganyiclovis9@gmail.com
Connect with me on linkedin @ https://www.linkedin.com/in/nkenganyi-clovis-4310b41ba/

How To Install MySQL Workbench And XAMPP on Ubuntu 18.04 or 20.04

Derrick Nkangwa — Mon, 26 Oct 2020 14:10:46 +0000

Let’s start by seeing how we can install MySQL Workbench either on Ubuntu 18.04 or 20.04.

What is MySQL Workbench?

MySQL Workbench is a graphical user interface tool used for the MySQL database management. Mainly, this tool is used by database architects, administrators, and database developers to visualize the design of the database.

It is a cross-platform software that can be installed on various operating systems such as Linux, Windows and Mac OS.

On Ubuntu, MySQL workbench can be installed by using the CLI (deb & apt repository)
In this article, we will focus on how to install MySQL workbench on Ubuntu using the graphical user interface (GUI).

Step 1. Download MySQL workbench from the below url, so you can directly download the file to your local directory. Browse the following url…
https://dev.mysql.com/downloads/Workbench and chose below options.
-select operating system as “Ubuntu Linux 18.04(x86, 64-bit)” as it is in my case. If you are using Ubuntu 20.04, then go ahead and chose that option.

After selecting the version that suits your OS, click download. In the next page, click “No thanks, just start my download”

Step 2. Once the download is completed, you click on the downloaded file in the directory which you saved it.
A page like this will open, which is a re-direct of the workbench file in the Ubuntu App store.

Step 3. Once the installation process is complete, launch workbench using the app launcher.

Let’s see how we can install XAMPP either on Ubuntu 18.04 or 20.04.

What is XAMPP?

XAMPP is the most popular PHP development environment
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.
Reference ===> https://www.apachefriends.org/index.html

If you want to develop software for the web or create a website, you need a test environment that is not accessible from outside but includes all the necessary tools. XAMPP from Apachefriends offers such a development environment.
It allows such creating a local web server with Apache, PHP, Perl MySQL.

Step 1. Download XAMPP for Ubuntu Linux
The first thing we need is the executable binaries of XAMMP on our Ubuntu 18.04 or 20.04 LTS. For that, we simply visit the official website of this tool https://www.apachefriends.org/index.html
Select the version you want to download specific to your OS. In my case, it is XAMPP for Linux.

Step 2. Change permission and Run XAMPP installer.
By default, whenever we are downloading from the internet using the browser on Linux systems, go into the Downloads folder, thus first switch to that first.

You start by checking the permission of the files found in the directory where you downloaded the XAMPP file. In my case, it is found in the download folder.

Change the permission of the installer to be in executable mode by typing the following command on your terminal

You will be prompted to type your password. After you input your password, you type the following command and you press enter.

This will start the installer for the XAMPP server.

Select both components “XAMPP core files” and “XAMPP developer files” and click next.

By default, all the files will unpack under /opt/lampp.

Click next until XAMPP begin installing on your local machine.

-Click finish and XAMPP will be on your Ubuntu 18.04/20.04 system.

-When you click finish, you will see a welcome message “welcome to XAMPP 7.4.11-0”.
The version of the XAMPP will be dependent on your time of installation.

When that window appear, you will see 3 tabs on top of the window.
Click on the “Manage Servers tab”.

By default, the “MySQL and proFTPD” servers will be off.
Click on each and click the start button by the right side of that window.

To check if the Apache server installed and everything is working smoothly, go to your favorite browser on your computer and type http://localhost/dashboard

The default Apache Welcome page will open.

To check if PHP is running, type http://localhost/phpmyadmin

Thanks for reading this article. I will be coming up with more