Tuesday, August 3

Tag: Web

Web Tricks

Making GraphQL Work In WordPress

Headless WordPress seems to be in vogue lately, with many new developments taking place in just the last few weeks. One of the reasons for the explosion in activity is the release of version 1.0 of WPGraphQL, a GraphQL server for WordPress.WPGraphQL provides a GraphQL API: a way to fetch data from, and post data to, a WordPress website. It enables us to decouple the experience of managing our content, which is done via WordPress, from rendering the website, for which we can use the library of the framework of our choice (React, Vue.js, Gatsby, Next.js, or any other).Until recently, WPGraphQL was the only GraphQL server for WordPress. But now another such plugin is available: GraphQL API for WordPress, authored by me.These two plugins serve the same purpose: to provide a GraphQL API...
Web Tricks

Reactivity In Vue

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions. This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3.We’re going to build a simple application to better understand this topic. The code for this app can be found on GitHub.By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy. let framework = 'Vue'; let sentence = `${framework} is awesome`; console.log(sentence) // logs "Vue is awesome" framework = 'React'; console.log(sentence) //...
Web Tricks

Integrating A Dialogflow Agent Into A React Application

Dialogflow is a platform that simplifies the process of creating and designing a natural language processing conversational chat assistant which can process voice or text input when being used either from the Dialogflow console or from an integrated web application.Although the integrated Dialogflow Agent is briefly explained in this article, it is expected that you have an understanding of Node.js and Dialogflow. If you are learning about Dialogflow for the first time, this article gives a clear explanation of what Dialogflow is and its concepts.This article is a guide on how a built a Dialogflow agent with voice and chat support that can be integrated into a web application with the help of an Express.js back-end application as a link between a React.js Web application and the Agent ...
Web Tricks

Search Engine Optimization Checklist (PDF)

Search engine optimization (SEO) is an essential part of a website’s design, and one all too often overlooked. The most beautiful, spectacular site in the world won’t do anyone much good if people can’t find it on Google (or Bing, or DuckDuckGo). Implementing SEO best practice doesn’t just give you the best chance possible of ranking well in search engines; it makes your websites better by scrutinizing quality, design, accessibility, and speed, among other things. It’s a daunting world for those who aren’t familiar with it (and even those who are at times), so this checklist breaks down key factors to consider when undertaking an audit. If you’re ready to get stuck in, read on. Table Of ContentsGet Ready: A Healthy Mindset Setting Realistic Goals Defining The Environment On-page Off-page...
Web Tricks

Reactive Variables In GraphQL Apollo Client

In this article, we will look at how to set up reactive variables, how the GraphQL cache polices come into place in defining read and writes to the cache, and provide the ability for developers to add types that exist on the client-side alone so that we can structure queries for client-side variables same way we can for remote GraphQL data. After learning more about the fundamentals of reactive variables, we will build a simple app that switches the theme of our application to either dark mode or light mode based on the value of our reactive variable. We will be looking at how to query a reactive variable, how to update the value stored in a reactive variable, and how the change in value triggers updates in components that depend on the reactive variable for certain actions to occur.The ...
Data Visualization With ApexCharts
React, Web Tricks

Data Visualization With ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages with a simple API, while React-ApexCharts is ApexChart’s React integration that allows us to use ApexCharts in our applications. This article will be beneficial to those who need to show complex graphical data to their customers. Getting Started First, install the React-ApexCharts component in your React application and import react-apexcharts. npm i react-apexcharts apexchartsimport ReactApexCharts from 'react-apexcharts' The core components of an ApexChart is its configuration object. In the configuration object, we define the series and options properties for a chart. series is the data we want to visualize on the chart. In the series, we define the data and n...
Web Tricks

Getting Started With Next.js

Lately, Next.js has termed itself The React Framework for Production, and with such bold claim comes a bevy of features that it offers to help you take your React websites from zero to production. These features would matter less if Next.js isn’t relatively easy to learn, and while the numerous features might mean more things and nuances to learn, its attempt at simplicity, power, and perhaps success at it is definitely something to have in your arsenal.As you settle in to learn about Next.js, there are some things you might already be familiar with and you might even be surprised at how it gives you a lot to work with that it might seem almost overwhelming at face value. Next.js is lit for static sites and it has been well-engineered for that purpose. But it also takes it further with i...
Authentication In Vue.js
Web Tricks

Authentication In Vue.js

Authentication is a very necessary feature for applications that store user data. It’s a process of verifying the identity of users, ensuring that unauthorized users cannot access private data — data belonging to other users. This leads to having restricted routes that can only be accessed by authenticated users. These authenticated users are verified by using their login details (i.e. username/email and password) and assigning them with a token to be used in order to access an application’s protected resources. In this article, you’re going to be learning about:Vuex Configuration with Axios Defining Routes Handling Users Handling Expired TokenDependencies We will be working with the following dependencies that help in authentication:AxiosFor sending and retrieving data from our API ...
How To Build A GraphQL Server Using Next.js API Routes
Web Tricks

How To Build A GraphQL Server Using Next.js API Routes

Next.js gives you the best developer experience with all the features you need for production. It provides a straightforward solution to build your API using Next.js API routes.In this guide, we will be first learning what are API Routes, and then create a GraphQL server that retrieves the data from the Github API using the Next.js API Routes.To get the most out of this tutorial, you need at least a basic understanding of GraphQL. Knowledge of Apollo Server would help but is not compulsory. This tutorial would benefit those who want to extend their React or Next.js skills to the server-side and be able to build as well their first full-stack app with Next.js and GraphQL.So, let’s dive in. What Are Next.js API Routes? Next.js is a framework that enables rendering React apps on the cli...
Web Tricks

8 Design Tips That Increased My Ecommerce Conversions By 42% 

When it comes to increasing sales for your ecommerce store, there are 3 levers you can pull: You can increase your average order value; You can increase the amount of traffic to your site; You can increase your conversion rate. While all of the above are important, the cheapest, most effective way to grow your sales is by improving your conversion rate. For most online stores, low conversion rates are typically the result of a poor design or a bad user experience. Your visitors may not resonate with the look and feel of your website or they may have problems finding the information they need in order to make a purchase. In this post, I will walk you through the exact steps I took to increase my desktop conversion rate by 46% and my mobile conversion rate by 39% with my last site redesign....
Apps, CMS, Web Tricks

Best CMS for 2020

Content Management Systems are arguably the internet’s most powerful web development tool. In a rapidly growing market where every business under the sun requires a website that is not only fully functioning, but optimised, easy to update regularly, and implement the latest features, the right CMS is important.As a web developer it can be easy to stick to the CMS you know – even if there are potentially better ones out there. With such a busy schedule, websites to be made, and money to be earned, the desire to find something new is quite frankly near the bottom of the pile.That’s is why we have worked to put together a list of some the most new and notable (or older but still just as worthy) CMS systems for 2020. After all, with a new year, why not learn a new CMS too? 1. Craft Craft ...
12 Best CMS for 2019
Tech News, Web Tricks

12 Best CMS for 2019

2019 is half over, but don’t let that stop you from trying something new… specifically, a new CMS. “But Ezequiel, good buddy, I don’t have time to check out a whole new content management system. I have websites to make!”, you say, in those exact words.That’s fair, but you should be keeping an eye on the up-and comers anyway. These are the people who have the sheer brass walnuts (which are a real thing, unisex, and available to anyone with money) to go up against giants like WordPress, Joomla, and mostly WordPress. They do this with nothing but a pretty good idea, a GitHub repository, and sometimes some corporate funding of some kind, if they’re very lucky. You ignore them at your own peril.Well, maybe not peril, but these projects deserve a look.The CMS that have been selected for t...
Web Tricks

Wrap a Vanilla JavaScript Package for Use in React

Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript? To use a JavaScript widget in your project, the best approach would be to create a framework specific wrapper. That's what this article is about. At ag-Grid we focus on developing the fastest and most feature rich JavaScript data grid for web applications. It has no 3rd party dependencies and is specifically designed to deliver outstanding performance even if being used to display millions of records. To make integrations with React applications easier, we've implemented our own React grid wrapper.In this article, I'll show you how to wrap a 3rd party widget into a React component using ag-Grid as an example. I'll show you how we set u...
Web Tricks

Add Authentication and Personalization to VuePress

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between pages seem instant and seamless. The generated static files can be cached and distributed across a content delivery network (CDN) for even more performance. For the reader, VuePress creates a great experience.However, a "static" site does not mean you cannot add dynamic touches to your content. In this tutorial, you will learn how to customize VuePress to create a personalized experience based on the person currently viewing the content. Install VuePress Note: To complete this tutorial, you must h...
Web Tricks

React Starter: The Ways to Use React

Before we can jump into learning more about the specifics of React, it's important to talk about all the ways we can use React.This will give us a good mental overview to see how React can be added to any project. In a nutshell, it comes down to the following:React can be used by:Adding React to an existing site Using React to create a fully single page appLet's talk about the difference between an existing site and single page apps (SPA). React is a great fit for both scenarios. It's ability to scale based on the project, small or large, is one of the main reasons React is loved by so many. Adding React to an Existing Site If you've already got a website and want to add React, it's a two-step process. Usually you'll have a website that's served with a server-side language (PHP...