Creating our own hamburger menu using CSS

            

     

      Hamburger menu

            Hamburger menu is a kind of menu that almost resembles the real hamburger. Hence, it is called so. We can use it in our navigation bar. So lets see how we can design our own hamburger menu using CSS and a little bit  of javascript.

            Step 1:

           Open Visual Studio Code and create index.html, style.css files which we will be using. Within your body add two empty divs.

    Step 2:

       Now we will go forward and write some basic CSS for our index.html

        

    

       Step 3:

        Now we are going to add pseudo classes ::before and ::after for our        hamburger button. These are going to be our top and bottom lines in our            hamburger menu. So lets go ahead few CSS to those pseudo classes.

        

     Step 4:

           Don't panic about the open class that I have added. We will cover that shortly. We are going to add some javascript code to add and remove a particular class called open which will indicate the hamburger menu has been clicked. For that purpose we are going attach an event listener to our hamburger button.

        Step 5: 

            Finally our hamburger menu is ready. Go ahead and give it a try. Here is how our final hamburger menu will look like.

Angular vs Vue vs React

                                

Introduction 

    Initially javascript codes were executable only within the browser environment. But when Chrome open sourced its V8 engine, Node.js was born. Since then web development has taken a new turn. Now we can also use javascript outside the browser environment. This helps us to use it on our server side applications. Therefore with a single programming language we can develop both our front end as well as the back end too. This is the main reason behind developers switching towards MERN stack or MEAN stack. There is also significant development on front end with the advent of new javascript frameworks like Angular, React, Vue, Meteor etc. These frameworks help us build Single Page Applications. At present we have got lot of frameworks and developers get confused on choosing the right one. Come lets have a quick look at the three frameworks that has always been under comparison.

 Angular vs Vue vs React 

 Angular

    It is a type-script based web application framework developed by Google. Some of the popular websites that have been built with Angular are The Guardian, Lego, Paypal, Freelancer, UpWork etc. Angular has a large community to support developers.

        Angular is best suited for Single Page Applications that require occasional updating. It uses real DOM to make changes. It uses two-way binding process that replicates all the changes made in the model into the views in a more secure and efficient way. It follows component based approach. Hence, the components can be reused as many times as required.

        The drawback with Angular is the learning curve since its a complete framework which takes considerable amount of time to get accustomed to it. There are lot of features in Angular which will affect our performance when we translate our project into a heavy application.

React 

    React is a javascript library that was developed by Facebook in 2012. It has gained lot of popularity over these years. Some of the websites that are built on React are Facebook, Airbnb, Netflix etc. The react community is also large and hence there is always support for developers.

       The main advantage of react is that it uses a Virtual DOM to make changes rather than real DOM. This makes it significantly faster. It follows component based architecture. We can build reusable components. Since react is a library the learning curve is not as steep as angular. 

        The disadvantage with react is that since its a library we need to make use of third party packages for most of our needs. Poor documentation is another major drawback of react. React uses JSX which is a syntax extension of HTML. It is seen as a barrier especially for the new developers. 

Vue

    Vue is the youngest of the three frameworks. It was developed with incredible features. to overcome the hurdles that developers were facing with react and angular.

It was developed by Evan You. It combines all the advantages of react and angular. It is the smallest of the three. 

          Vue has a more straight forward learning curve as compared to react and angular. It is the smallest of the three. Ideal for building small web applications and single page applications. 

                   The main drawback of Vue is that the community is not as big as the other two.              Hence support becomes an important concern for developers. 

        Conclusion

            Each one of the three has its own kind of advantages and disadvantages. So it all             comes down to the kind of application we are going to build. Hence choose it wisely                and develop some amazing stuffs.

    

     

   

How to integrate React with Wordpress

What is React?

React is a javascript library used for building Single Page Applications(SPAs). It was developed by Facebook. We can build user-interfaces for modern web applications in a much easier and better way. 

 

What is Wordpress? 

Wordpress is a Content Management System (CMS). It helps us to build a website without the need to write all the code. So anyone can create a website without technical knowledge. We just need to provide the content we need to display and select the way we want to display our content and Wordpress will take care of the rest.

 

What is a Headless CMS?

It doesn’t mean that our CMS is missing the header section. It means that our CMS is decoupled from the front end. It is a back end only Content Management System. Wordpress also provides a REST API by which we can access all our contents and we can display it on any device. It doesn’t care about where the data is getting displayed. It just stores and delivers our data. 

Can we use React with Wordpress?

Yes, for sure we can use React with Wordpress. With React we can focus primarily on how to display the data and we can get the data using the Wordpress REST API.

          

How do we do that ?

Follow the steps mentioned below to use Wordpress with React.

Setting up our Wordpress application

First we need to set up our Wordpress site since it is going to be our source of data for the frontend React application.

 

          To know more about Wordpress Rest API you can go through this

https://developer.wordpress.org/rest-api/

All the posts that we have created in our wordpress can be accessed with the help of this endpoint.

https://example.com/wp-json/wp/v2/posts

This will return all the posts that we have written in our Wordpress site in JSON format.

To get a particular post we can make use of this endpoint.

https://example.com/wp-json/wp/v2/posts/<id>

Where id is the post id that we want to retrieve. The same can be done for adding, updating posts by using POST method.

Setting up our React application

Next we need to set up our front end which is going to be React. For this we need to have Node.js installed in our system. Run the following command on your terminal. 

npx create-react-app

create-react-app wordpress-example

Now our project folder is ready and we can start creating our react app. We can make use of the fetch API or a third party package called axios to make our React app talk to our Wordpress back end. Fetch is an inbuilt api that helps us make API calls. Axios has some advantages when compared to the fetch api. Lets see how we can do it with the help of axios.

React + Wordpress 

The best place to make our api calls within a react component is in componentDidMount(). Because this life cycle method gets called only after the first render. Hence, it's the ideal place for making asynchronous calls.

 axios.get('https://example.com/wp-json/wp/v2/posts')

            .then(response => {

                  let posts = response.data

                    this.setState({ posts }) 

              })

So, now we have got our data from Wordpress. Similarly, we can also make POST requests to our back end to add new posts. It's the same procedure as we did before. 

Conclusion 

So now we have our React application talking to our Wordpress back end. We can also add custom post types. By default Wordpress has only posts and pages, but with the help of plugins we can add our own custom post types. Thus we can customize our Wordpress back end like the way we want it to be. We can use any technology for the front end. We can even make our mobile application talk to our Wordpress back end.