Javascript

Before starting React, I think you should ...

React is a front-end JavaScript library. So you probably want to know the basics of JavaScript before diving into react, otherwise you will end up having a rough journey which isn’t good for your productivity. I wouldn’t advice you to fully rely on my article, I had a quite rough journey and after I finally understood React, I better document it for a future me. In this article, I’ll highlight the essentials and most important things to learn and provide a link to the resources as we gear up to creating your first React application. ...

Creating an installable Next.Js Application

Next.js, a React framework for server-side rendering, provides a solid foundation for creating fast and efficient web applications. In this article, we will explore the process of creating an installable Next.js application, taking advantage of the PWA features offered by modern browsers. What is a Progressive Web Application (PWA)? A Progressive Web Application is a web application that utilizes modern web capabilities to deliver an app-like experience to users. PWAs are built with web technologies such as HTML, CSS, and JavaScript and can be accessed through a browser without installing an app store. PWAs offer several advantages, including offline functionality, push notifications, and the ability to be added to the user’s home screen for quick access. ...

How To Create and Deploy a json-server

json-server is a tool for creating mock REST API fast! To get started, ensure you have the following requirements: NodeJS (npm) Let’s get started! On an empty folder, initiate a nodejs application by running the following on your terminal/CMD: npm init -y Once that is complete, you install the following packages: json-server json-serve cors nodemon (as a dev dependency) npm install json-server json-serve cors npm install -D nodemon After the installation, create a new file: index.js. This is the entry point for the json-serve. Add the following inside the file: ...

Creating A Weather Search App in Vanilla JavaScript

This post covers creating a simple weather search application using plain JavaScript, HTML, and CSS. Demo and Source Code The project demo is live on codesandbox, and the source code is available on GitHub. %[https://codesandbox.io/embed/weather-robot-phase-1-lzt9z9?fontsize=14&hidenavigation=1&theme=dark] Prerequisites Openweathermap API Keys JavaScript Fetch API and DOM Manipulation Basic HTML and CSS Creating the HTML and CSS Files Create a new file (index.html) and add the following: <!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>Weather Robot</title> <link rel="stylesheet" href="./weatherRobot.css" /> </head> <body> <section class="section-head"> <div class="container"> <h1 class="heading">Weather Robot</h1> <form> <input type="text" placeholder="Search for a city" autofocus /> <button type="submit">GET WEATHER</button> <span class="msg"></span> </form> </div> </section> <section class="city-array"> <div class="container"> <ul class="cities"></ul> </div> </section> <script src="./weatherRobot.js"></script> </body> </html> Create separate files for the styles and JavaScript. Inside the CSS file, add the following: ...

Using JavaScript in JupyterLab

TL;DR This post will take you through installing JupyterLabs and how to add a NodeJS kernel to it in Ubuntu. Installing JupyterLabs For a better experience, you should install Jupyter Lab inside a virtual environment. sudo apt install python3-venv After the installation is complete, create a new environment: python3 -m venv jlab Note that you can replace the jlab with any name of your choice. Now activate the environment: ...

How to Create A Simple API: ExpressJS

Express JS is a backend framework that runs on Node JS. It really comes in handy when creating backend microservices for our applications. I will take you through simple steps in creating a simple API with Express. Installing dependencies This should be the simplest of all: On the project root, open up your terminal/CMD and install express using the following command: npm install express Create a server file While still on the root of your project, create a JavaScript file; app.js ...

How To Display JSON data on an HTML page using Vanilla JavaScript

This is a hands-on code tutorial on how to fetch data using plain JavaScript and Displaying data on a simple HTML web page. When creating websites, there is a possibility that you’ll be getting data from an API. The data is in JSON, in most cases. How do I display the JSON is my HTML page using vanilla JS? Let’s do that in a few steps. JS has a built-in function called .fetch() that is used to ‘fetch’ data from external files or resources. ...

Getting Started With strapi

Using Strapi https://strapi.io/ What is Strapi Strapi is a headless CMS A headless content management system, or headless CMS, is a back-end-only content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front-end or presentation layer A list of headless cms - https://jamstack.org/headless-cms/ Creating a simple blog CMS with strapi Setup strapi project: Requirements Need to have nodejs(Version 10 and above) and npm. ...

5 JavaScript Console Methods you should Know

All web developers are probably familiar with using the web console as their debugging tool. The most common way is using the famous console.log tool that JavaScript provides. The console has more than just the .log() method that could be helpful. Check out some of the methods you could use: 1. console.log() This is the most used method of all It outputs messages to the web console. The message may be of any data type. can also pass in variables and functions as parameters. ...

How I started Using ES6 Modules in Node JS

A short guide on how I started using ES6 Modules when using Node. I love the EcmaScript Module syntax and I use it almost in all my code and practices. I will use the example from Express Introduction - MDN So, create a new folder (node-es6): mkdir node-es6 Inside the folder, initialize a node application by: npm init -y Now open the folder using your favorite text editor. Create a new file hello.js and paste the code: ...