DEV Community: Joseph Taiwo

My Altschool Blog Project Documentation

Joseph Taiwo — Sat, 28 Jan 2023 20:37:42 +0000

Altschool Africa is an institution that takes a non-traditional approach to learning by teaching courses directly connected with a selected track.

I am a student of Altschool Africa enrolled in their school of engineering with the main focus of Backend engineering using javascript. We were given an assignment to practice the skills we had learned so far, the task was to build a blogging API with the following functionalities:

Users should have their first name, last name, email, and password.
The user should be able to sign up and sign in to the blog app
Use JWT as an authentication strategy and expire the token after 1 hour
A blog can be in two states: draft and published
Logged-in and not logged in users should be able to get a list of published blogs created
Logged-in and not logged in users should be able to get a published blog
Logged-in users should be able to create a blog.
When a blog is created, it is in a draft state
The owner of the blog should be able to update the state of the blog to publish
The owner of the blog should be able to edit the blog in a draft or published state
The owner of the blog should be able to delete the blog in a draft or published state
The owner of the blog should be able to get a list of their blogs.
The endpoint should be paginated and filterable by state
When a single blog is requested, the API should return the user information(the author) with the blog. The read_count of the blog too should be updated by 1.

After successfully building the API we were told to document the process, which is what I will be doing in this article.

Requirements

To understand or follow along with this article, you will need:

Knowledge of JavaScript
Familiarity with nodejs
An IDE such as VScode
MongoDB either local or on the cloud

Setting up a basic server

I started by creating a basic server using express and nodemon with the following steps:

Navigate to the folder where you want to build the app and run npm init -y in the terminal to create the package.json file, the -y flag is to accept all default options.

Install the required packages for the basic server by running npm install express nodemon in the terminal, express is for creating the server and nodemon will be used to monitor the codebase for any changes.

Create an index.js file and input the following code:

// Require express module
const express = require('express');

// Create an app using the express module
const app = express();

// Add a simple endpoint
app.get('/', (req, res) => {
    res.send("Hello World")
})

// Listen for requests made to the server
app.listen(4000, (req, res) => {
    console.log(`Server is running on port: 4000`)
})

Run nodemon index.js in the terminal, using nodemon automatically restarts the server whenever any changes are made to it. Open your browser and go to localhost:4000, you should see the text "Hello World", this means the server is functioning properly.

MVC Pattern

For this project I made use of the MVC architecture, this is a system design practice that divides the codebase into three parts which contain code for distinct activities. MVC stands for Models, Views, and Controllers, which contain code for the Database, User Interface, and Business Logic respectively.

Models

Models are used to interact with the database, they help to design the structure and format of database objects by creating schemas. I created one for both the users and the articles.

User Model

The user model contains all the required fields:

first name
last name
email
password
articles

Create a Models folder and create a file called userModel.js inside it, then input the following code:

// Require the mongoose package
const mongoose = require('mongoose');

// Instantiate the schema class from the mongoose package
const Schema = mongoose.Schema;

// Create a user schema with the mongoose schema
const UserSchema = new Schema({
    firstName: {
        type: String,
        required: [true, "Please enter your first name"]
    },
    lastName: {
        type: String,
        required: [true, "Please enter your last name"]
    },
    email: {
        type: String,
        required: [true, "Please enter an email"],
        unique: [true, "This email is already registered, sign in!"],
        lowercase: true,
    },
    password: {
        type: String,
        required: true,
        minLength: [5, "Password must be at least 5 characters"]
    },
    articles: {
        type: Array,
    }
}, { timestamps: true });

// This is a function for logging a user in

// more details in the  userController section
UserSchema.statics.login = async function(email, password) {
    const user = await this.findOne({ email });
    if(!user){
        throw Error('Incorect email, try again or sign up!');
    }

    const auth = await bcrypt.compare(password, user.password);
    if(!auth){
        throw Error('Incorrect password');
    }

    return user
}

// Create a user model with the user schema
const User = mongoose.model('users', UserSchema);

// Export the user Schema
module.exports = User;

The texts in the square brackets are error messages which are thrown in case certain validation is not met when filling in the fields. The timestamps: true is used to automatically generate timestamps at the points where the object is created or updated. The login function is a static function created in the user model this makes it more secure and less prone to tampering.

Article Model

For the article model, I created the following fields

title
description
author
state
read_count
read_time
tags
body

Create a file called articleModels in the Models folder and input the following code:

// Require the mongoose package
const mongoose = require('mongoose');

// Instantiate the schema class from the mongoose package
const Schema = mongoose.Schema;

// Create an article schema with the mongoose schema
const articleSchema = new Schema({
    title: {
      type: String,
      required: [true, "Please provide the title"],
      unique: [true, "The title name already exists"],
    },
    description: {
      type: String,
    },
    author: {
      type: String,
      required: [true, "Please provide the author"],
    },
    state: {
      type: String,
      enum: ["draft", "published"],
      default: "draft",
    },
    read_count: {
      type: Number,
      default: 0,
    },
    reading_time: {
      type: String,
      required: [true, "Please provide the reading time"],
    },
    tags: {
      type: String,
      required: [true, "Please provide the tags"],
    },
    body: {
      type: String,
      required: [true, "Please provide the body"],
    }
}, {timestamps: true});

// Create an article model with the user schema
const Article = mongoose.model('articles', articleSchema);

// Export the article model
module.exports = Article;

When an article is created its state is set to "draft" by default, this can later be updated to "published" by the user. The read_count property of the blog is also initially set to zero, other features like timestamps and id are auto-generated.

Routes

Routes are also another essential part of the application, as they connect the endpoints to the controllers that carry out the blog functions. Adding all the routes to the main page can make things a little overcrowded, hence I created a "routes" folder that would contain the necessary routes.

User routes

The userRoutes file will contain all the routes for all user-related functions such as:

/signup => For registering a user into the database
/login => For logging in an existing user
/logout => For logging out a user

When a certain endpoint is called it redirects the request to a controller which handles the request. The "userRoutes" file will contain the following code:

const express = require('express')
const userRouter = express.Router();

userRouter.post('/signup', () => {
  // Function for signing a new user in goes here
  res.send('Signs in a new user')
});

userRouter.post('/login', () => {
  // Function for logging a user in goes here
  res.send('Logs in an existing user')
});

userRouter.post('/logout', () => {
  // Function for logging out a user goes here
  res.send('Signs out a user')
});

module.exports = userRouter;

The above code creates a router, userRouter using the express.router() method the userRouter will be connected to all the required endpoints and functions which will then be exported to the app.js file where it will be used by the server.

The routes above were tested using postman, the messages in the res.send help to identify that the routes are working properly.

Notice how all the endpoints are POST requests, this is because all user functions send data to the server.

Article routes

The articleRoutes file contains endpoints for all the article-related requests, it contains the following code:

const express = require('express')
const blogRouter = express.Router();

blogRouter.get('/', () => {
  // Function for getting all available blogs
  res.send('Gets all available articles')
});

blogRouter.get('/user', () => {
  // Function for getting all the articles by a user
  res.send('Gets all articles by a user')
});

blogRouter.get('/:id', () => {
  // Function for getting an article by id
  res.send('Gets an article by id')
});

blogRouter.post('/', () => {
  // Function for creating a new article
  res.send('Creates a new article')
});

blogRouter.delete('/:id', () => {
  // Function for updating an article
  res.send('Updates an article')
});

blogRouter.patch('/:id', () => {
  // Function for deleting an article
  res.send('Deletes an article')
});

module.exports = blogRouter;

In this file, each endpoint signifies a single request which will be handled in the controller part. The texts in the brackets are simple placeholder messages to ensure that the endpoints are working properly when tested with postman.

The next step is to connect these routes to the server by updating the code in the index.js file to look like this:

...

// Require the routers
const userRouter = require('./routes/userRoutes')
const articleRouter = require('./routes/articleRoutes')

...

// Using the routers
app.use('/api/v1/user', userRouter)
app.use('/api/v1/blog', articleRouter)

...

The routers must come after the instantiation of the app, and they will be mapped using specific endpoints, for instance, a request to the api/v1/user/<something> would first be transferred to the userRouter in the userRoutes file.

Controllers

The controllers contain the code for processing and handling requests, interacting with the database with the models, and sending responses back to the user.

Create a controllers folder that will contain the two controllers, the controllers will be connected to the server by linking them with their respective route files.

User Controller

The userController will contain functions that the sign-up, sign-in, and sign-out requests. The file contains the following code:

const User = require('../models/userModel');
const bcrypt = require('bcrypt')

The User object is required from the userModel and it will be used to interact with the database. The bcrypt library is used for hashing and decrypting passwords, it will be used in the login and logout sections.

// Signup function
const signup = async (req, res) => {

  // Checks if user already exists
  const user = await User.findOne({ email: req.body.email })
  if(user){
      console.log("This user already exists, you have been logged in!")
      // Redirect them to log in page
      return res.redirect('/api/v1/user/login')
  }

  try{
      // Creates new user and hashes the password
      const user = new User(req.body);
      const salt = await bcrypt.genSalt(10);
      user.password = await bcrypt.hash(user.password, salt);
      await user.save();

      // Returns the user data
      return res.status(201).json({
          status: "success",
          message: "Sign up successful!, you have been automatically logged in",
          data: {
              firstName: user.firstName,
              lastName: user.lastName,
              email: user.email,
              articles: user.articles,
              id: user._id
          }
      })
  }
  // Throws error if any
  catch(err){
      res.status(400).send(err.message)
  }
}

When a new user is created via sign up, information like the name, email, and password, is taken from the request body and used to create a new user in the database. Once the user has been created successfully, the details are sent back as a response to the user.

// Login function
const login = async (req, res) => {

    // Obtains email and password from request body
    const { email, password } = req.body;

    try{
      // Uses login static function
        const user = await User.login(email, password);

        // Returns user data
        res.status(201).json({
            status: "success",
            message: "You logged in successfully",
            data: {
                firstName: user.firstName,
                lastName: user.lastName,
                email: user.email,
                articles: user.articles,
                id: user._id
            }
        });
    }
    // Throws error if any
    catch(err){
        res.status(400).send(err.message)
    }
}

The login function takes two parameters from the request body: "email" and "password". These details are used to log the data into the database using the static login function in the userModel file, but this only works if the user is already registered in the database.

Note that the user password is not sent as part of the response, this is a basic security measure.

const logout = (req, res) => {
    // Implement log-out function later
    res.send('Logged out successfully')
}

// Exports all the functions
module.exports = {
    signup,
    login,
    logout
}

The logout function will be implemented later as it has to do with clearing the JWT tokens, this will be discussed in the JWT section.

All three functions for the user controller are then exported so they can be required in the routes folder where they will be connected to their respective endpoints.

Blog controller

The blog controller file will contain all the code for handling all requests made to the blog object. The following code will go into this file:

// Require the article model
const Article = require('../models/articleModel');

// External functions required
const { checkUser } = require('../middleware/jwt');
const { readingTime } = require('../middleware/utils')

The readingTime function is used to calculate the time it will take to read an article using the average reading speed of 180 words/minute. The checkUser function is used to check the current logged-in user by decoding the JWT token and using the data to search for the user in the database.

JWT tokens will be discussed in the JWT authentication section.

const getAllArticles = async (req, res) => {
    // Get pagination details from the query
    const limit = parseInt(req.query.limit)
    const offset = parseInt(req.query.skip)

    // Get all published articles from database
    const articles = await Article.find()
        .where({ state: "published"})
        .skip(offset)
        .limit(limit)

    // Error message, if there are no published blogs
    if(!articles.length){
        return res.json({
            status: "failed",
            message: "There are no published articles, check Drafts!"
        })
    }
    // Apply pagination
    const articleCount = articles.length
    const currentPage = Math.ceil(articleCount % offset)
    const totalPages = Math.ceil(articleCount / limit)

    // Return published articles
    res.status(200).json({
        status: "success",
        message: "All published articles",
        total: articleCount,
        page: currentPage,
        pages: totalPages,
        data: articles
    })

}

The getAllArticles function returns all the existing articles in the database. Pagination is implemented here as all the articles can be very large and it will be bad practice to return everything at once. All the articles will be returned page by page and the parameters for the pagination are passed in the URL, e.g https://localhost/api/v1/blog/?limit=2&offset=5. The limit and offset properties are query parameters that will be parsed into the URL.

const getMyArticles = async (req, res) => {
    // Get pagination details
    const limit = parseInt(req.query.limit)
    const offset = (req.query.limit)

    // Check for the current user
    const user = await checkUser(req, res)

    // Get data from database
    const userArticles = Article.find({ author: user.firstName})
        .skip(offset)
        .limit(limit)

    // Throw error message if there are no blogs
    if(!userArticles.length){
        return res.json({
            status: "failed",
            message: "This user does not have any published articles"
        })
    }

    // Apply pagination
    const articleCount = userArticles.length
    const totalPages = Math.ceil(articleCount / limit)
    const currentPage = Math.ceil(articleCount % offset)

    // Return article data
    res.status(200).json({
        status: "success",
        message: `All articles, published by ${user.firstName}`,
        total: articleCount,
        page: currentPage,
        pages: totalPages,
        data: userArticles
    })
}

The getMyArticles function returns all the articles by a particular user, by checking through the database for articles where the author corresponds with the name of the logged-in user, the data is then paginated and sent to the user.

const getArticle = async (req, res) => {
    // Get article from database with Id
    const article = await Article.findById(req.params.id)
        .where({ state: "published" })

    // Throw error message if article is not found
    if(!article){
        return res.status(404).send("The Article you requested was not found")
    }

    // Increase read count
    article.read_count++
    article.save()

    // Return data
    res.status(200).json({
        status: "success",
        message: `Single article post: "${article.title}"`,
        data: {
            article
        }
    })
}

The getArticle function gets a single article by searching through the database with the id that is passed in the request parameter. It also increases the read_count property every time a blog is requested.

const createArticle = async (req, res) => {

    try{
        // Get details from the request body
        const { title, description, state, tags, body } = req.body;

        // Check if article with that title exists
        const exists = await Article.findOne({ title })
        if(exists){
            return res.json({
                status: "failed",
                message: "Article with that title already exists"
            })
        }

        // Check for the current user
        const user = await checkUser(req, res)

        if(!user){
            return res.json({
                status: "failed",
                message: "You need to be logged in to create a articlepost"
            })
        }

        // Name of user is set to author of article
        const article = new Article({
            title,
            description,
            author: user.firstName,
            state,
            reading_time: readingTime(body),
            tags: tags,
            body,
        })

        // Save article to list of user articles
        user.articles.push(article.title)
        await user.save()
        await article.save()

        // Return article data
        return res.json({
            status: "success",
            message: `${user.firstName} ${user.lastName} created "${article.title}"`,
            data: article
        });
    }
    catch(err){
        res.status(500).send(err.message)
    }
}

To create a new article details like the title, description, body, and tags are obtained from the request body and used to create an article with the respective fields. Other fields like the reading_time, author, and id are auto-generated with the readingTime function, checkUser function, and the mongoose library respectively.

const deleteArticle = async (req, res) => {

    // Get article from database
    const article = await Article.findOne({ __id: req.params.id })
    const user = await checkUser(req, res)

    // Check if current user is the author of the article
    if(user.firstName !== article.author){
        return res.status(401).send({
            message: "You are not authorized to delete this article"
        })
    }

    // Remove article from list of user articles
    const userArticles = user.articles
    for(let i = 0; i < userArticles.length; i++){
        if(userArticles[i] == article.title){
            userArticles.splice(i, 1)
        }
    }

    await user.save()
    await Article.findByIdAndDelete(req.params.id)

    // Return success message
    res.json({
        status: "success",
        message: `${article.title} was deleted`,
    })
}

The deleteArticle function deletes a single article by searching through the database with the given id and removing it. It also removes the article from the array of the user's articles, it returns a success message when all this is completed.

const updateArticle = async (req, res) => {
    // Get details from request body
    const { title, description, state, tags, body } = req.body;

    const user = await checkUser(req, res)
    const article = await Article.findById(req.params.id)

    // check if current user is the author of the article
    if(user.firstName !== article.author){
        return res.send("You are not authorised to update this article")
    }

    // Update article
    const updatedArticle = await Article.findByIdAndUpdate({ _id: req.params.id }, {
        $set: {
            title,
            description,
            state,
            tags,
            body
        }
    }, { new: true })

    // Return updated article
    res.status(200).json({
        status: "success",
        message: `${updatedArticle.title} was updated`,
        data: {
            updatedArticle
        }
    })
}

The updateArticle updates a single article in the database with the information passed into the request body. This action is only allowed by the owner of the article, so before carrying out the procedure we first check if the name of the current user is the same as the author of the article.

// Export all the functions
module.exports = {
    getAllArticles,
    getMyArticles,
    getArticle,
    createArticle,
    deleteArticle,
    updateArticle,
}

After all the functions are completed, they are exported so they can be connected to their respective endpoints in the routes folder.

After checking that these functions are working properly by connecting them to a database and testing them with postman, we will proceed to implement JWT authentication.

JWT authentication

As the API is now, users will need to log in every time they want to use the application, but with JSON Web Tokens(JWT) we can save the user information and allow users to access the website by simply checking if they have the token.

For this API I used cookies to store the JWT in the browser, to do this we will use the jsonwebtoken package. A file named jwt will house the code for the jwt implementation:

// Required packages
const jwt = require('jsonwebtoken');
const User = require('../models/userModel')
require('dotenv').config();

We start by requiring the userModel object as this is what the JWT interacts with for signing in and logging in, lastly, we will require the dotenv package, which allows us to work with environmental variables

Notice how the dotenv package is not assigned to a variable, it is just declared with the .config attachment. This means the file is configured to accept environmental variables, which are called with the process.env method. E.g process.env.JWT_SECRET calls the JWT_SECRET variable from the .env file.

const maxAge = 60 * 60;

// Function for creating a token
const createToken = (id) => {
    return jwt.sign({ id }, process.env.JWT_SECRET, {
        expiresIn: maxAge
    });
}

The createToken function returns a jwt token which is set to expire in the time set by the maxage variable, the jwt.sign() function takes in two parameters: the information to be signed id, and a secret which we will need when decoding the token.

// Function for authenticating a route
const requireAuth = (req, res, next) => {
    const token = req.cookies.jwt;

    if(!token){
        console.log("No token")
        return res.json({
            status: "failed",
            message: "You need to be logged in to continue this action"
        })
    }

    jwt.verify(token, process.env.JWT_SECRET, (err, decodedToken) => {
        if(err){
            console.log(err.message)
            return res.redirect('/api/v1/login');
        } else {
            next();
        }
    })   
}

Some endpoints will require authentication, hence I created a requireAuth function as a middleware which makes an endpoint only accessible to logged-in users. The requireAuth function decodes the token which is stored in a cookie in the request object, and then verifies it, if successful the request proceeds to the endpoint, else the user is redirected to the login route.

// Function for checking the user
const checkUser = async (req, res) => {
    const token = req.cookies.jwt;

    if(!token){
        console.log('No token, please login');
        return null
    }

    const decodedToken = jwt.verify(token, process.env.JWT_SECRET)

    const user = await User.findById(decodedToken.id)
    return user
}

The checkUser function decodes the jwt token obtains the decoded id and uses it to check through the database and obtain the current user. This information can then be used to carry out many things, for example, it can be used to automatically get the name of the current user and assign it to the author property whenever the user creates a blog. It can also be used to display the current author.

module.exports = {
    createToken,
    requireAuth,
    checkUser
};

The jwt functions are then exported out of the file so they can be used wherever they are needed.

Implementing the jwt functions in the userControllers file:

const User = require('../models/userModel');
const { createToken } = require('../middleware/jwt');
const bcrypt = require('bcrypt')

const signup = async (req, res) => {

    /**
     * Function to create a new user
     * 
     * If the user already exists, log them in
     * 
     * Creates a token with a maxAge of 1 hour
     * 
     * Saves the token into a cookie called "jwt"
     * 
     * 
     * If any error occurs send the error message to the user
     */
    const user = await User.findOne({ email: req.body.email })
    if(user){
        console.log("This user already exists, you have been logged in!")
        return res.redirect('/api/v1/user/login')
    }

    try{
        const user = new User(req.body);
        const salt = await bcrypt.genSalt(10);
        user.password = await bcrypt.hash(user.password, salt);
        await user.save();

        const token = createToken(user._id);
        res.cookie('jwt', token, { maxAge: 60 * 60 * 1000 });

        return res.status(201).json({
            status: "success",
            message: "Sign up successful!, you have been automatically logged in",
            data: {
                firstName: user.firstName,
                lastName: user.lastName,
                email: user.email,
                articles: user.articles,
                id: user._id
            }
        })
    }
    catch(err){
        res.status(400).send(err.message)
    }
}

const login = async (req, res) => {

    /**
     * Function to log in a registered user
     * 
     * Creates a token with a maxAge of 1 hour
     * 
     * Saves the token into a cookie called "jwt"
     * 
     * 
     * If any error occurs send them to the user because they are the user's problems now 
     */
    const { email, password } = req.body;

    try{
        const user = await User.login(email, password);

        const token = createToken(user._id);

        res.cookie('jwt', token, { maxAge: 60 * 60 * 1000 });
        res.status(201).json({
            status: "success",
            message: "You logged in successfully",
            data: {
                firstName: user.firstName,
                lastName: user.lastName,
                email: user.email,
                articles: user.articles,
                id: user._id
            }
        });
    }
    catch(err){
        res.status(400).send(err.message)
    }
}
/**
 * Function to log out a user
 * 
 * Sets the jwt cookie to an empty string that expires in 1 millisecond
 */
const logout = (req, res) => {
    res.cookie('jwt', "", { maxAge: 1 });
    res.send('Logged out successfully')
}

module.exports = {
    signup,
    login,
    logout
}

The signup function now adds a user to the database and redirects them to the login route, which has a function that creates a jwt and also saves it to a cookie. For the logout function, the jwt is removed by setting the value of the cookie to an empty string that expires instantly, this is because cookies cannot be deleted directly.

Implementing the authentication in the userRoutes file:

// USER ROUTES

const express = require('express')
const userController = require('../controllers/userController');
const { requireAuth } = require('../middleware/jwt')

const userRouter = express.Router();

userRouter.post('/signup', userController.signup);

userRouter.post('/login', userController.login);

userRouter.post('/logout', requireAuth, userController.logout); // Secured

module.exports = userRouter;

Here only the logout function is authenticated, as a user will need to be logged in, to be logged out, ironic right?

In the article routes file the following routes will be authenticated:

const express = require('express')
const blogController = require('../controllers/blogController');
const { requireAuth } = require('../middleware/jwt');

const blogRouter = express.Router();

blogRouter.get('/', blogController.getAllArticles); // Not secured

blogRouter.get('/user', requireAuth, blogController.getMyArticles); // Secured

blogRouter.get('/:id', blogController.getArticle); // Not secured

blogRouter.post('/', requireAuth, blogController.createArticle); // Secured

blogRouter.delete('/:id', requireAuth, blogController.deleteArticle); // Secured

blogRouter.patch('/:id', requireAuth, blogController.updateArticle); // Secured

module.exports = blogRouter;

These routes need to be secured as requested by the project instructions, the only exception is the /user route which obtains all the articles by the logged-in user. I protected this route because it uses the jwt token to obtain the results, and it would throw an error if the user was not logged in.

Problems I faced

Jwt auth

I faced a lot of problems with the jwt authentication as this was my first time using it, I tried following a lot of articles but I had trouble because my project structure was different from the ones in the tutorial, and navigating through the documentation was a tough thing for a beginner.

Code architecture

I constantly had to change my codebase to match the new features I was trying to implement. For instance, for me to write tests I would need to export the entire server to be able to properly test all the endpoints. So I had to create a new file, server.js which would import the app connect to the database, and then listen on the port.

const app = require ("./src/app");

const mongoose = require('mongoose');
require("dotenv").config()

const PORT = process.env.PORT || 4000
const URL = process.env.DB_URL

//Connect to database
mongoose.connect(URL, { useNewUrlParser: true })
.then(() => console.log('Connected to database.....'))
.catch((err) => console.log('An error occured:', err.message))

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`)
})

Conclusion

The major takeaway I had is how there are multiple ways to do the same thing, from analyzing the projects of my peers to the codebase I saw in the various tutorials I watched, even though they were doing the same thing (building a simple blog API) they used varying methods to achieve different things.

The project was an experience to remember, and I am looking forward to building more projects in the future and sharing my journey.

Check out the GitHub repo to view the entire source code for the project

The code in the GitHub repo may differ from the ones in the article, as I am constantly improving the API and working toward applying views in the project.

Thank you for reading

My 2022 highlights: Tech enlightenment

Joseph Taiwo — Sat, 31 Dec 2022 22:49:16 +0000

My journey into tech started when all of a sudden and out of the blue, an uncle of mine signed me up for a coding BootCamp of some sort. Since then, I have climbed HTML mountains, CSS rivers, and Javascript deserts.

It all started when I got ......

Registered for AltSchool Africa

Had an aunt abroad that knew about AltSchool and decided to enroll my elder brother, my uncle saw I was also seating at home doing nothing and decided to enroll me, at that point what was really on my mind was how I was going to start yahoo.

I decided to learn ahead of the class

AltSchool provided us with material for getting introduced to tech, finished the material and was still hungry for more, so I decided to do my personal digging, first thing that hit me was the high salary for software developers, and boom I went on to learn my first programming language(HTML) 😂

Made the mistake of starting with w3schools

I tried FreeCodeCamp but was facing some difficulties solving the problems on a mobile device, so I switched to w3schools which was better on my smaller screen. Little did I know that w3schools was more like documentation and definitely not one of the best places to start

Passed AltSchool exams

The entrance exams were really easy, I had already mastered big O notation, hill climbing, and greedy algorithms, but then the questions that came out were like English and some general knowledge questions. I started to feel like coding was easier than I thought it was, (how wrong I was)

Discovered the evil that is CSS

I had seen memes about how CSS was bad and all that, but I had just written hello world in HTML and I felt like I was going to build the next Facebook, but CSS was a really humbling experience, I didn’t know I was just beginning, I had yet to discover JavaScript 😪

`console.log(“hello world”);`

After printing my first hello world in the console, I instantly felt rejuvenated, all the energy CSS had drained from me was suddenly replenished.

I was going along with the merriness of JavaScript until I got to concepts like OOP and classes, and I knew I had had enough, decided to try learning in a different way.

Entered tutorial hell

Went straight to YouTube and realized coding was much more fun when you were watching other people do it. I watched so many Traversy media videos that I started hearing his intro in my dreams

Tried to create projects on my own

Everyone was always talking about how practice is the best way to get better at programming, so I borrowed my aunt’s laptop, installed VScode on it, and built my first webpage, I instantly felt like a pro programmer again 🌚

Realized that the real hell was outside of watching tutorials

But then I started to get into more complex projects, and I started getting drained, it felt like all those time I spent watching Brad Traversy, traversing the DOM never happened, I knew how things worked, but I didn’t know how to utilize them

Lost my will to code

Gradually I started to lose my will to code, I slowly slipped into the world of anime and other distractions. I only coded occasionally, maybe when I had AltSchool assignments or when I just finished a great series and felt like I needed to do something useful with my life

Picked up coding again in August

Discovered Twitter and from there I received a whole lot of motivation, starting from John Oseni, who was a bit younger than me and was already going to Dubai, I was like “this could be me”. I immediately picked up my dusty laptop and began perfecting my JavaScript

I was overflowing with new energy

After getting good at JavaScript I decided it was time for me to advance and so I entered node.js, discovered net ninja’s YouTube channel and decided I was going to code along, I wasn’t going back to tutorial hell

Ventured into technical writing

Sapa was in the air and I knew I was months away from being job ready, so I decided to venture into technical writing, started reading blogs and articles to get the feel of technical writing, that's where I discovered Dillion Megida, another source of inspiration

Things were going so well

I had opened about 3 blogs for my technical writing, one on each of DEV.to, Hashnode, and Medium, my GitHub streaks were full of greens as I was being consistent with coding, I was leet coding, hacker ranking, anything, you name it, I was already pretty sure I was on the path to greatness 💪

ASUU called off the strike

Boom, all my plans just vanished into thin air, I even fell sick at some point 🤧, and started considering dropping out to follow my tech career, made some research and decided against it, resumed school with tech as my primary objective

Had trouble adjusting

I used night plans to do all my tech activities like downloading tutorials, watching videos and other kinds of stuff, it wasn’t much of a problem during the holidays, but I was in school now, where I had classes that started at 8 am in the morning

Stopped attending lectures

Since schooling was my secondary objective at the time, I just went on with coding throughout the night and waking up in the afternoon, I only attended the classes that were convenient for me, or classes where attendance was mandatory.

Failed some tests

Did really badly in my tests, and I knew I had to do something, I decided to put tech on hold to fully focus on school, it wasn’t easy, I had to rush read a lot of topics, finish projects and meet deadlines, I didn’t even have time to write technical articles anymore

Took a break on tech to focus more on school

Done with tests and decided I was going to pay more attention to schooling, as this was time when there were massive hiring freezes and the tech morale was really low, so tech became more of a thing I did in my free time, as per I had a lot to catch up on in school

Now the situation is under control

After a while, everything came to a balance, I am doing well in school, and I still, find time to complete assignments and do personal projects, I barely have enough time to myself anymore, but it will all be worth it in the end, hopefully

Can’t wait for what 2023 holds for me

Ending 2022 on a high note 💪, anxious to see what 2023 has in stock, already preparing for job interviews and scouting out potential job opportunities, come 2023 and I will start applying,

And that's all folks

2022 was a real eye opener for me, I got to learn a lot of things, and most importantly I learnt about tech and for the first time in my life I actually have a concrete plan for my future.

PS: I wrote the entirety of this article on my phone as per NEPA is showing us shege.

Hope you enjoyed it, please leave a like and share it with your friends or something, PEACE ✌️

ChatGPT: Abilities, Limitations and Applications

Joseph Taiwo — Wed, 14 Dec 2022 03:01:48 +0000

Introduction

Me: What are you?

ChatGPT: I am simply a collection of algorithms and data, designed to generate helpful and informative responses based on the input that I receive.

Definition of ChatGPT according to ChatGPT

ChatGPT is the latest model trained by OpenAI based on the GPT 3.5 architecture, it was trained using a process called Reinforced Learning, the model has demonstrated human-like behavior to an extent that has never been seen on any Artificial Intelligent Program.

ChatGPT has numerous capabilities, limitations, and applications, some of which are going to be discussed in this article. You can access the chatbot on the official OpenAI website.

A little background info

OpenAI, the developer of ChatGPT, is a company founded by a group of researchers and entrepreneurs including Sam Altman and Elon Musk, intending to advance the domain of Artificial intelligence in the world. OpenAI provides many types of AI tools, ranging from text generation (ChatGPT) to image generation (DALL-E 2).

ChatGPT was released to the public on the 30th of November 2022 to get feedback to better improve the model, less than a week after its release, the chatbot crossed a million users worldwide, it garnered attention due to its ease of use, detailed responses, and historical knowledge.

What is ChatGPT capable of doing?

ChatGPT is famous for its ability to produce human-like responses and follow the flow of a conversation, it also provides a feature-rich interface that distinguishes it from its predecessors. Some of these features include the ability to:

Answer follow-up questions

Unlike previous models, which treat each query as a singular entity, ChatGPT can pick up references from previous conversations and use them to answer questions.

If you want it to treat a response as a new query, then click the reset thread button, which is located in the top left corner of the page.
Generate detailed responses

When a query is given, ChatGPT replies with information that includes not only the requested information but also justifications for the outcome, along with any applicable examples.
Recognize errors in input data

If there are any grammar errors in your query, ChatGPT tries to correct those errors and provide a response based on the correct version of your query, this makes it compatible with people who are not familiar with the English language.
Roleplay

As a Large Language Model, ChatGPT has access to a wide range of topics and conversations, this gives it the ability to simulate conversations in different styles, and even roles that do not exist.
Write a variety of content

The data used to train the model contains a vast amount of data containing diversified content ranging from books, songs, and poems to code, articles, and websites. This allows the bot to generate text in a variety of styles and on many different topics.
Generate or analyze code

The training data of ChatGPT also contains some code, this gives the ability to write code that can perform simple functions such as building simple applications or solving easy LeetCode problems. It can also analyze simple code and explain how it works.
Filter inappropriate queries (Moderation API)

ChatGPT can filter responses that might be offensive, discriminatory, or inappropriate, this prevents it from giving out responses to inappropriate queries.

What are its limitations?

The current model still has several shortcomings that have not yet been taken into consideration, some of which might be fixed in subsequent versions.

Some of these limitations include:

Tendedency to produce incorrect responses

The algorithm for generating responses is not flawless, so there exists the possibility that ChatGPT will produce incorrect responses, and because it is made to make its responses convincing, it would strongly support such false claims, this could cause it to misinform certain people who are not well versed in the particular subject matter.
Unupdated Knowledge base

The data used to train ChatGPT only contains knowledge on or before 2021, this may cause it to respond using information that is no longer accurate, or make it unable to answer questions based on constantly changing information.
Not connected to the internet

ChatGPT does not have access to the internet or possess information that may not be contained in its training dataset, this may cause it not to know things specific to an area or group of people. Because even as extensive as the knowledge it has is, it is not as unlimited as the internet.
Uses assumption to provide responses

When asked an ambiguous question, rather than asking for clarification, ChatGPT assumes what the user needs, this may be useful in the case that the user is not sure of what they need, but most times it leads to ChatGPT producing incorrect responses or further confusing the user.
Algorithmic bias

The data used to train ChatGPT may be biased, which is speculation based on a portion of the general population. As a result, some stereotypical information may be included in its response, even though the assumptions made about the CEO of a company or the intelligence of men versus women are not entirely accurate.

Strict moderation

ChatGPT responses are passed true a moderation API to filter out any content that it perceives as potentially inappropriate or offensive, (this moderation may be a little overkill REPHRASE), which causes it to refuse to answer questions that it originally would have answered.
Gullibility

ChatGPT is only slightly artificially intelligent, this makes tricking it into giving inappropriate answers very easy. Moderation can be bypassed by simply rewording your questions.

Although there is still potential for advancement and we might see future models with fewer limits and greater capabilities, these limitations are expected given that the model is still under development and the subject of artificial intelligence is quite sophisticated.

Uses of ChatGPT

ChatGPT was released to the public for testing, evaluation, and feedback, there is no cost needed to use the chatbot, all you need to do is signup using a valid email, although the CEO of OpenAI, Sam Altman, mentioned in a tweet that there are plans to make it (REWORD premium), as "computational costs are eye-watering".

Access to the ChatGPT API is expected to the available next year (2023), with this developers easily integrate the chatbot into their apps and software, but until API access is available, below are some of the things you could do with the free public version of the API:

Alternative to google search

Due to its highly detailed responses, ChatGPT can be used as an alternative to google when it comes to providing answers to popular questions, or knowledge on simple historical matters, but it fails in the field of constantly updated information and events that take place after 2021.
Assist with Assignments

ChatGPT is capable of assisting at various levels of academics, for instance, it can write a college essay or even a university-level research paper, it is also capable of solving simple math problems ranging from simple addition to slightly complex calculus questions.

Just make sure not to overuse it :)
Conduct research

Due to its large knowledge base, ChatGPT can be used to research topics ranging from historical events or scientific theories to business or economic analysis, this is only useful for an overview of the topic and you might still need to consult the internet for an in-depth search.
Generate content

ChatGPT can be used to create content like articles, essays, poems, lyrics, and even stories, it can also write articles in the form of historical writers and artists, or combine them to create a unique type of content.
Explain complex concepts

ChatGPT can communicate complex ideas in a way that even laypeople who are not experts in the particular topic can grasp, as well as in terminology that the user is familiar with.

Practice debates

ChatGPT is capable of engaging in debates so you can use it to practice your arguing skills, you can also use it to generate a counter to an argument or to generate points to support an argument
Write and debug code

ChatGPT can be used to write and debug simple code in common programming languages while providing an explanation of how the code works, it is however not capable of generating complex code to carry out specific functions. It can also be used in debugging, by suggesting some methods to rectify a bug.

Feedback

ChatGPT uses a method called RLHF, Reinforced Learning from Human Feedback, which means that the model uses feedback from users to improve and develop new features.

Just as feedback gotten from previous models was used to improve the current version, ChatGPT was released to the public as a means of getting feedback to improve future models.

OpenAI's main focus is on feedback that would help to identify, understand, and resolve possible problems such as harmful or inappropriate output. You can enter the official ChatGPT feedback contest for a chance to win up to $500 in API credits. Entries can be submitted via the feedback form that is linked in the ChatGPT interface.

Conslusion

The field of Artificial Intelligence is still in its early stages and it has the potential to revolutionalize our world. The outstanding features observed in ChatGPT are proof that computers are capable of doing so much more than they are currently used for.

However, it is important to recognize that an AI model like ChatGPT is not without its limitations and challenges, for example, there exists the fear of AI taking over our jobs sometime soon, and this is concerning as ChatGPT produces frighteningly good results.

Looking on the bright side we can consider the fact that if ChatGPT could turn the average person into a professional, then it would achieve even more outstanding results in the hands of a professional.

With continuous research and development, we could hope to see Artificial Intelligent systems that will maximize these benefits while minimizing the potential drawbacks.

THANK YOU FOR READING

Don't forget to like and share ❤️

Getting to know CSS specificity

Joseph Taiwo — Sun, 20 Nov 2022 02:27:45 +0000

Have you ever wondered what happens when you apply multiple styles to a single element using different CSS selectors? The browser can't use all the different styles at once, therefore it needs a method to select which style will be applied.

Introduction

In this article, we will discuss Specificity, which is the method that the browser uses to determine which styles will be applied in a situation where there are many styles.

Knowledge of specificity is crucial to developers, as it allows them to know which styles the browser will use in a case where there are multiple styles.

All selectors have a specificity value, and when multiple selectors are used in selecting the same element, the browser chooses the selector with the highest specificity.

Specificity

As the name implies, specificity is a measure of the range of possible values for a condition, this means a specific value is one that is direct and is easier to be understood.

All CSS selectors can be grouped into 4 degrees of specificity:

Inline styles (1000)
IDs (100)
Classes, Attributes, and Pseudo-classes (10)
Elements and Pseudo-elements (1)

PS: if you don't know any of the above selectors you could check out my series on CSS selectors.

The arrangement above is known as the specificity hierarchy it is a representation of the specificity of different selectors in descending order.

The values in brackets are known as the specificity hierarchy score of the selector, they are used to calculate the specificity of combined selectors.

Calculating Specificity

When calculating specificity each selector is assigned it's corresponding value in the specificity hierarchy.

Let us take an h1 element with an id of "firstHeader" and a class of "header"

<h1 id="firstHeader" class="header">Tough times never last</h1>

then apply the following styles to it

h1{
    background-color: green;
}

.header{
    background-color: blue;
}

#firstHeader{
    background-color: red;
}

Can you guess what color the header is going to be?

Hint: Which selector has the highest value in the specificity hierarchy?

If you guessed red, then you are correct. This is because the red background color was applied with an ID #firstHeader selector, which has a higher specificity value than the class .header and element selectors.

In cases where you have combined selectors, you will need to calculate the combined specificity of the various selectors present.

Combined selectors are selectors that are made by combining 2 or more selectors, they are formed with Combinator selectors

For this case let us consider the second <p> tag in the HTML code below

<div>
    <p class="paragraph" id="firstParagraph">Don't mind me</p>
    <p class="paragraph" id="secondParagraph">Take note of my class and Id</p>
</div>

Let us use the following combined selectors

div p.paragraph{
    background-color: blue;
    color: white;
}

#secondParagraph{
    background-color: red;
    border: 2px solid black;
}

The first selector div p.paragraph + p can be broken down and represented as

div => Element selector => value = 1
p => Element selector => value = 1
.paragraph => class selector => value = 10

The specificity of the above selector is the combined specificity of all the selectors present, and in this case, the answer is 12 (1 + 1 + 10).

The second selector #secondParagraph can be broken down as

#secondParagraph => ID selector => value = 100.

Therefore the browser uses the styles in the #secondParagraph selector. Since the specificity value of the #secondParagraph(100) is greater than the specificity value of the div p.paragraph + p (12).

Non-conflicting styles

Specificity is a means of resolving conflicting styles. conflicting styles occur when 2 different selectors try to set a value for a specific property.

Let us take the code we used in the previous section as an example:

div p.paragraph{
    background-color: blue;
    color: white;
}

#secondParagraph{
    background-color: red;
    border: 2px solid black;
}

Here both selectors assign a value for the background-color property, hence a conflict occurs, and said conflict is resolved by applying the style in the selector with the higher specificity: #secondParagraph.

Since the color property is only present in the first selector, even though it is the selector with a lower specificity since the same style is not present in the selector with a greater specificity, there is no conflict, hence the browser uses the style.

The same goes for the border property in the second selector.

NOTE: When 2 elements have equal specificity the style in the latter is applied

The `!important` tag

Adding the !important tag to a value automatically makes it the style to be used for that particular property.

For Example:

div p.paragraph{
    background-color: blue !important;
    color: white;
}

#secondParagraph{
    background-color: red;
    border: 2px solid black;
}

Even though the second selector has a higher specificity, the presence of the !important tag in the background-color property of the first selector still gets applied.

You could say the value of the !important tag in the specificity hierarchy is 10,000 as it overrides all other selectors irrespective of their specificity value.

Conclusion

Knowing how to calculate specificity is a good skill to have, but you do not need to do this every single time as there are tools out there, like specificity calculators that do this job for you.

A personal favorite of mine is the Selectors explained, by Kitty Giraudel, because it not only shows the specificity value but also converts the selector to simple English.

Now that you know how specificity works you can go out there and be rest assured that your selectors will work properly.

If you liked this article, don't forget to give a thumbs up and share it with your friends.

Thank You for reading ❤️

Selecting parts of elements with CSS pseudo-elements

Joseph Taiwo — Mon, 24 Oct 2022 16:58:58 +0000

Introduction

Hey there, 👋

In a previous article, we discussed pseudo-classes, in this article we will discuss Pseudo-elements, which are also a type of pseudo-selectors. We will start by defining pseudo-elements, listing some examples, then move on to how you can use them on your website.

Note: code snippets used in this article will be showcased in an embedded codepen at the end of this article

Let's dive right in 🚀

Pseudo-elements `::`

Pseudo-elements act like elements but they only represent a certain part of the element. I say they act like elements because the browser treats them like elements and allows you to style them independently.

Examples of pseudo-elements include:

the first letter, or line, of an element
the space before or after an element

Pseudo-elements cannot work independently, they have to be combined with other selectors using two colons (::). Pseudo-elements select a part of an element, so when using pseudo-elements other selectors are used as well.

The syntax:

selector::pseudo-element{
    property: value;
}

The double colon syntax :: differs from the single colon : in pseudo-classes, this difference is part of the changes made by W3C(World Wide Web Consortium) to distinguish between pseudo-classes and pseudo-elements.

Examples

There are only a few pseudo-elements but you do not need to memorize them as most IDEs provide auto-complete for pseudo-elements.

Below is a list of some common pseudo-elements.

The ::after pseudo-element

This pseudo-element selects the space after an element. You might have seen some web pages where there is an image after each heading, that image was added using this pseudo selector.
```
h1::after{
    content: "(^-^)";
    background-color: #128;
    color: white;
    padding: 5px;
    border-radius: 10px;
}
```
The content property above specifies what should go into the pseudo-element. I used text here, but you could use icons or even images. I then added some styling to make the content more noticeable.
The ::before pseudo-element

This pseudo-element selects the space before an element. Like the ::after pseudo-element, it can also be used to insert content(like an image or icon) before elements.
```
p::before{
    content: ":)";
    background-color: #128;
    color: white;
    padding: 2px;
    margin: 2px;
    border-radius: 10px;
}
```
The ::first-line pseudo-element

This pseudo-element selects the first line of an element. As the first line is usually what holds the main point of the paragraph, using this to change the text color or increase the font weight (boldness), will make the first line stand out.
```
p::first-line{
    font-weight: bold;
    font-family: 'Lucida Sans';
    font-size: large;
    color: blue;
}
```
As in the previous cases, there is no need to add the content property, as the first line of the paragraph already contains content.
The ::first-letter pseudo-element

This pseudo-element selects the first letter of the first word in an element. It is mostly used at the start of a paragraph to increase the font size of the first letter.
```
h2::first-letter{
    color: red;
    font-size: xx-large;
    font-weight: bold;
}
```
As this selects only the first letter, the styling that can be applied is limited to only letter-based styling.
The ::marker pseudo-element

This pseudo-element selects the markers of list items. A marker is that round item before li items that lets you know it is a list item. In ordered lists ol, the markers are usually numbers.
```
li::marker{
    color: red;
    font-size: large;
}
```
The ::placeholder pseudo-element

This selects the placeholders in form inputs. The placeholder is the grey piece of text that is inside input elements, it is mostly used to specify what is to go into that input element.
```
input::placeholder{
    color: green;
}
```
The ::selection pseudo-element

This is used to select the text that has been highlighted/selected by a user. You can select elements by right-clicking and dragging your mouse over the elements you want to select.
```
::selection{
    background-color: black;
    color: white;
}
```
The default in most browsers is a light-blue background, with white text. But with this pseudo-element, you can add your styling.

Visit w3schools for a complete list of pseudo-elements and examples.

Embedded Codepen:

PS: I only used simple styles like colors so you can see the direct effects of the styling.

Conclusion

Now you know what Pseudo-elements are, and how you can use them on your web pages. Pseudo-elements don't do much but if used in the right way, they can transform your website wholesomely.

If you use pseudo-elements without specifying the original elements they are to select, they will just apply to all the elements on your page. For instance, p::first-letter will only apply to paragraphs, but ::first-letter will apply to all elements.

Note: Pseudo-classes are not to be confused with pseudo-elements which only select certain portions of the element. I explained pseudo-classes in this article.

If you liked this article don't forget to leave a like and follow for more content.

Thank you for reading (^_^)

Selecting Element states with CSS pseudo-class selector

Joseph Taiwo — Sun, 23 Oct 2022 14:21:01 +0000

Introduction

Hey there, 👋

In this article, we will discuss Pseudo-classes, which are a type of CSS Pseudo selectors. We will start by defining pseudo-classes, listing examples, and building a very simple tooltip hover.

Let's dive right in 🚀

Pseudo-Classes (`:`)

Pseudo-classes act like classes but they are not actual classes. That is the browser might treat them like classes, but they aren't actual classes.

They are used to select elements only when they are in a particular state.

For example, they can be used to:

Style an element when it is active
Style an element when it gets focus
Style visited and unvisited links differently

The syntax for Pseudo-class selectors is:

selector:pseudo-selector{
   property: value;
}

Pseudo-classes cannot work independently, they have to be combined with other selectors using a colon :.

A popular example is the :hover which styles elements when the mouse "hovers" over them.

h1:hover{
    background-color: gray;
    border-left: 2px solid green;
}

In the example used above:

The original element is first selected with (h1)
Then the pseudo-class :hover is added to specify the required state. > Note that the colon and the pseudo-class must be written together with no space in between.

The original element only contains the default styling, which is overridden by the pseudo-selector when it is in the specified state. That is an element styled with the :hover will remain normal until the mouse is over it.

Unlike other selectors Pseudo-class names are not case sensitive, that is whether you write :Hover or :hover the browser will still read it the same way

Examples

There are a lot of pseudo-classes, luckily you don't have to memorize them as most IDEs like VScode provide autocomplete for pseudo-classes.

Pseudo-classes can be general or element specific, that is some pseudo-classes can be used on all elements while others can only work on certain elements.

Examples of pseudo-classes include:

:link: this is used to select links on the page that has not been visited.
:visited is used to select links on the page that has already been visited.
:active is used to select the link that is currently active. > Note: when styling a:active must come after a:link and a:visited in order to be effective!
:focus is used to select the input element that is currently being filled.
:optional this is used to select input elements that are optional.
:empty is used to select empty elements.
:root is used to select the document's root element.

Visit w3schools for a complete list of pseudo-classes and examples.

How to use pseudo-classes to make a simple tooltip-hover

An example of a tooltip hover is when you hover over an element, and a tooltip is displayed to show you more about the component.

Don't worry if you are a total beginner, I am just showing an example of how pseudo-classes can be used on a webpage.

Steps to making a simple tooltip hove:

Write the Html:
```
<h3 class="element">
    Hover over me to see "more".
    <span class="tooltip">MORE, now you have seen "more"</span>
</h3>
```
Here we defined 2 elements an h3 as the parent, and a span as the child(inside the parent element).

The h3 element is given a class of "element", while the span is given a class of "tooltip".
Set the visibility/display of the span to none:
```
.tooltip{
    display: none;

    background-color: #128;
    color: #fffd;
    padding: 10px;
    border-radius: 10px;
}
```
We don't want the span element to be visible normally, so we hide it by setting the display to none.

I also added extra styling to make the span element look better. (optional)
Add the hover Pseudo-class to the h3(parent element):
```
.element:hover
```
this selects the element only when it is in the hover state, that is when the mouse is over it.

But what we want to change is not the parent element but rather, the child element, we want to change the visibility/display back to block(the default display).
Change the display of the span element:
```
.element:hover .tooltip{
    display: block;
}
```
We use the descendant selector to connect the 2 elements so that when the mouse is over the parent element the display of the tooltip changes to block.

Result:

See the Pen Untitled by Joseph Taiwo (@teejay128) on CodePen.

Conclusion

I hope you now know what pseudo-classes are and how to use them on your website.

Pseudo-classes are important because they make your page more responsive, as some contents of the website change based on user actions.

Note: Pseudo-classes are not to be confused with pseudo-elements which only select certain portions of the element.

If you liked this article don't forget to leave a like and follow for more content.

Thank you for reading (^_^)

Selecting HTML elements with CSS combinators

Joseph Taiwo — Sat, 15 Oct 2022 23:31:00 +0000

Hey there 👋

In this article, we will discuss CSS combinators. Which are a type of CSS selectors.

My Previous Articles 🚀

This is the third part of my CSS selectors series if you do not already know the basics of CSS selectors. Be sure to check them out before reading this article.

What are combinators

Combinators are CSS selectors that select elements based on the relationship between the selectors of two elements.

Combinators are applied within two selectors, and if the relationship between the first and second element is as defined by the combinator, then the second element is styled.

Types of combinators

There are four types of CSS selectors

Descendant Selector (" ")

Syntax: Element Descendant

Descendant selectors select elements that are children, grandchildren, great-grandchildren, and so on, of the selected elements.

An element is selected if it can be found anywhere within the parent element. Even if it is nested in a different element.

It is represented by a single space (" ") between the 2 selectors.

Example:
```
div p{
    color: blue;
}
```
This example changes the text color of p elements that can be found inside a div element.
```
<h1>This is a header</h1>
<p>This is outside a div element</p>

<div>
    <h2>This is a header</h2>
    <p>This is inside a div element</p>

    <ul>
        <li>This is a list item</li>
        <p>This is a p tag inside an element that is inside a div element</p>
        <li>This is a list item</li>
        <p>This is a p tag inside an element that is inside a div element</p>
    </ul>
</div>

<p>This is outside a div element</p>
```
Result: The results will be displayed in a codepen towards the end of the article.

Even p elements that are inside the ul element are also selected. This is because the ul element is a child of the div element and that makes the p elements within the div elements grandchildren of the div element, hence they are also selected.
Child Selector (">")

Syntax: Element > Child

Child selectors or direct descendants select only the direct children of an element.

If the element is nested within another element, it is not selected.

It is represented with a right-angle bracket > between the two elements.

Example:
```
div > p{
    color: red;
}
```
This example changes the text color of only the p elements that are children of div elements.
```
<h1>This is a header</h1>
<p>This is outside a div element</p>

<div>
    <h2>This is a header</h2>
    <p>This is inside a div element</p>

    <ul>
        <li>This is a list item</li>
        <p>This is a p tag inside an element that is inside a div element</p>
        <li>This is a list item</li>
        <p>This is a p tag inside an element that is inside a div element</p>
    </ul>
</div>

<p>This is outside a div element</p>
```
Result: The results will be displayed in a codepen towards the end of the article
Only p elements that are children of div elements are selected, and the p elements that are inside the ul are not affected.
Adjacent Sibling Selector ("+")

Syntax: Element + sibling

Adjacent sibling selectors select adjacent siblings, that is elements that share the same parent and come immediately after the element.

If there is an element of a different type between the element and the sibling, then the sibling is not selected.

It is represented with a plus sign + between the two elements.
Example:
```
h1 + p{
    border: 2px solid black
}
```
This example adds a border around all p elements that come immediately after an h1 element.
```
<h1>This is a header</h1>
<p>This paragraph comes after a header</p>
<p>This is a paragraph</p>

<h1>This is a header</h1>
<span>This is a span</span>
<p>This is a paragraph</p>

<div>
    <h1>This is a header</h1>
    <p>This paragraph comes before a header</p>

    <h2>This is a header</h2>
</div>
```
Result: The results will be displayed in a codepen towards the end of the article.
Only the p elements that come after an h1 element are styled, and all other p elements are omitted from the styling.
General sibling selector ("~")

Syntax: Element ~ sibling

General sibling selectors select all elements that come after a particular element.

If there is an element of a different tag, between the 2 elements, it still selects them.

It is represented by the tilde sign ~,(the button right under the Esc key on your keyboard, pressing shift + the key will give you the tilde sign).

Example:
.limit ~ li{
text-decoration: line-through;
}

This example adds a line through all li elements that come after the element with the class of "limit".
```
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="limit">List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <ul>
        <li>Nested item 1</li>
        <li>Nested item 2</li>
    </ul>
    <li>List item 6</li>
    <li>List item 7</li>
</ul>
```
```
Result: The results will be displayed in a codepen towards the end of the article.
```
All elements after the element with a class of "limit" receive the styling, even those that are separated by a nested list.

Conclusion 😁

CSS combinators select elements indirectly, so you should be careful when using them.

They can also be used with any type of selector(simple or attribute)

Note that the comma `,` is not a combinator

The comma is used to separate selectors in a selectors list

Here is a codepen where the effects of the different combinators are shown.

This is the pen containing all the results of the above code examples Results by Joseph Taiwo (@teejay128) on CodePen.

Also check out MDN web docs and w3schools for further knowledge on CSS combinators

Although I did my research, I may still be missing out on some things since I decided to make this article a short one, feel free to drop a comment on anything, be it a correction or something I missed out.

Thank you for reading (^_^) ❤️

Selecting HTML elements with CSS Attribute selectors.

Joseph Taiwo — Mon, 10 Oct 2022 00:22:52 +0000

Selecting HTML elements with Attribute Selectors

Introduction

Hey there 👋

In this article, we will discuss CSS attribute selectors.

This is the second part of my CSS selectors series, which is a series aimed at giving a proper introduction to CSS selectors, in the previous article we discussed CSS simple selectors. I would advise you to check it out before continuing this article.

Let's dive right in 🏄

What are attributes

Attributes are pieces of markup language used to modify HTML elements.

Attributes usually appear in the form of name-value pairs ( attribute = "value" ) in the opening tag of an element.

Attributes can be used to:

Add functionality

Attributes either modify functionality or provide functionality to elements that cannot function without them.

For instance, the Anchor tag is an HTML element used to anchor/link an external URL to content on a webpage.
```
<a href = "www.google.com">Google</a>
```
Here the google URL is anchored to the text "Google" on the webpage. This is how links are written in HTML

The href attribute provides the address of the external link. Anchor tags will not function if the href(hyperlink reference) attribute is absent as there would be no external link for the anchor tag to link to.
Add properties

As in the case of the placeholder attribute in input elements which is used to set the value of the placeholder.

The input element would still work fine even if the placeholder value were absent.

Attribute selectors

Attribute selectors are selectors that select elements based on their attributes.

Selecting elements with attribute selectors has many benefits as you can configure the styling to occur only when a certain condition is met.

You could select elements using the following conditions:

Elements with a certain attribute

This method selects all elements that possess a certain attribute. It Only checks for the presence of the attribute and does not consider the value.

Syntax:

element[attribute]{
    (styling)
}

The above selects all elements with the attribute attribute.

Elements with a particular value for a certain attribute

This method first checks if a certain attribute is present and only selects it if its value is equal to the specified value.

Syntax:

element[attribute = "water"]{
    (styling)
}

The above selects all elements with an attribute attribute that has a value of value.

Using Regex with attributes

Attribute selectors can be modified to add further restrictions on value selection using regular expressions (regex).

The modification is done by placing the expression before the equals sign =.

element[attribute (exp)= "value"]{
    (styling)
}

There are many types of expressions that can be used in this way.

This set of values will be used for comparing:
Let us assume we had attributes with these values in our HTML:
"water", "water god", "drink water", "water-borne", "blood-water", "waterpark" and "tapwater".

The tilde

~
[attribute ~= "water"]
For this condition to be met the value of the attribute has to be a whole word with "water" in a space-separated list.

The above will match values of "water", "water god", and "drink water" only.
The pipe

|
[attribute |= "water"]
For this condition to be met the value of the attribute has to be a whole world with "water" followed by a hyphen -.

The above will match values of "water", "water god", "drink water", "water-borne and "blood-water" only.
The caret

^
[attribute ^= "water"]
For this condition to be met the value of the attribute has to start with "water".

The above will match values of "water", "water god", "water-borne" and "waterpark" only.
The dollar sign

$
[attribute $= "water"]
For this condition to be met the value of the attribute has to end with "water".
This is self

The above will match values of "water", "drink water", "blood-water" and "tapwater" only.
The asterisk

*
[attribute *= "water"]
For this condition to be met the value of the attribute has to contain "water".

The above will match values of "water", "water god", "drink water", "water-borne", "blood-water", "waterpark" and "tapwater".

As long as "water" is present somewhere in the value of the attribute, the element would be selected by this selector.

Practice

Here is an embedded codepen for you to see the above attribute selectors in action, you could even play around with the values and view the results.

PS: I only used colors or simple stylings so you can see the effects

Extras

Types of attributes.

HTML attributes are generally classiified as:

Required Attributes: href, src
Optional Attributes:
Standard Attributes:
Event Attrbutes:

w3schools provides a list of HTML attributes, you could check them out.

Conclusion

Many thanks for reading up till this point, if you enjoyed this article, make sure to leave a like and share with friends, I guess.

Also I am only a beginner, if I made any errors, feel free to drop a correction in the comment section. ❤️

Selecting HTML elements with CSS simple selectors

Joseph Taiwo — Fri, 30 Sep 2022 18:54:21 +0000

Selecting HTML elements with CSS simple selectors

Introduction

HyperText Markup Language or HTML is the standard markup language used in documents that are designed to be displayed on webpages, it helps to define the various elements used on the webpage and to create a basic layout of what the webpage would look like.

Sample HTML code:

HTML on its own doesn't look all that good as it only contains some default styling for its elements. To improve the styling, CSS is used.

Cascading Style Sheets or CSS is a style sheet language used for describing the presentation of HTML elements in the webpage. Essentially, it is used to add better styling to HTML elements.

When styling HTML elements with CSS, you would need a way to select which element is to have which property.

CSS selectors are used for selecting elements to which styles can then be added. There are many different types of CSS selectors, but in this article, we will only deal with simple selectors.

Simple Selectors

Simple selectors are methods of selecting HTML elements with names used to declare them. These names could be:

Tag names
ID names
Class names

Selecting HTML elements by their tag names

HTML tag names are pieces of markup language inserted at the beginning and end of HTML elements when declaring them.

As shown in the code snippet below, h1 tags are used to define first headers, while p tags define paragraphs and other tags are used to define other elements.

<h1>Header One</h1>

<div>
    <h2>Header Two</h2>
    <p>Paragraph</p>

    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
</div>

Selecting elements like this involves writing the tag name followed by a parenthesis that contains the styling.

h1{
    color: red;
}
div{
    background-color: blue;
}
li{
    background-color: cyan;
}

Selecting elements like this is simple and direct, but this styles all elements with that tag name, it is pretty useful when you are defining the styles all elements with a particular tag should have, but what if you just wanted to style a particular p element differently, or you wanted to add a different styling to a li (list-item) element. Styling specific elements like this can be achieved with IDs and Classes.

Result of Above styling with tag names:

Selecting HTML elements by their IDs

IDs are unique identifiers for a particular HTML element.

IDs are assigned when declaring the HTML elements, IDs can be anything, but they must not start with a number and must not include spaces. Rather than spaces make use of hyphens (-)

<h1>Header One</h1>

<div>
    <h2 id="second-header">Header Two</h2>
    <p>Paragraph</p>

    <ul>
        <li id="first-item">List item 1</li>
        <li>List item 2</li>
        <li id="list-item-3">List item 3</li>
        <li>List item 4</li>
    </ul>
</div>

When selecting HTML elements by their IDs, a hashtag # before the ID name is used to select elements with that ID name.

#header-2{
    background-color: black;
    color: red;
}
#first-item{
    background-color: green;
    padding: 5px;
    color: white;
}
#list-item-3{
    margin: 10px;
    color: red;
}

It is advisable not to give the same ID name to different elements, this is because IDs are meant to be unique.
When selecting multiple elements, classes should be used instead.

Result of above styling with IDs

Selecting HTML elements with classes

Class names are non-unique identifiers as they can be added to multiple elements.

Classes are also assigned on declaration, and they must not start with a number or contain spaces. Unlike IDs, a single class can be assigned to multiple elements.

<h1 class="red-cursive">Header One</h1>

<div>
    <h2 class="code-like">Header Two</h2>
    <p class="red-cursive">Paragraph</p>

    <ul>
        <li class="red-cursive">List item 1</li>
        <li class="red-cursive">List item 2</li>
        <li>List item 3</li>
        <li class="code-like">List item 4</li>
    </ul>
</div>

When selecting HTML elements with their class name, a dot . before the class name shows that the styling is for all elements with that class name.

.red-cursive{
    color: red;
    font-family: cursive;
}

.code-like{
    font-family: monospace;
    background-color: black;
    color: white;
    padding: 5px;
}

Think of this as adding the various elements to a particular class, all elements in the class receive the styling that is added to that class.

Result of Above styling with class:

Extras

Universal selector

The universal selector selects all HTML elements in a document. The asterisk * is used to call on the universal selector, once called it affects every element in the webpage.

*{
    background-color: black;
    color: yellow;
}

Styling with the universal selector is of course not advised as it gives all the elements in your webpage the same styling and this can result in your webpage looking quite bland

Result of Above styling with universal selector:

Although some properties are best defined with the universal selector. An example is font-family styling, it is used to set the type of font you want in your webpage, adding it as a style in the universal selector ensures that all elements in your webpage have that particular font.

Another popular use case is for setting the default padding and margin of all elements to 0. Working with the default padding and margin can sometimes lead to miscalculations, most developers often make use of the universal selector to set those values to zero.

Result of setting padding and margin to 0:

Resetting the default padding and margin of all elements helps when styling the elements as you get to style the margin and padding rather than add to the default values.

Group selectors

Group selectors or selectors list is a means of selecting multiple elements and assigning the same style to them.

<h1>Header One</h1>

<div>
    <h2>Header Two</h2>
    <p id="paragraph">Paragraph</p>

    <ul>
        <li>List item 1</li>
        <li class="marked-item">List item 2</li>
        <li>List item 3</li>
        <li class="marked-item">List item 4</li>
    </ul>
</div>

This involves creating a list of selectors separated by a comma ,.

h1, #paragraph, .marked-item{
    background-color: gray;
    color: green;
    padding: 10px;
}

Any type of selector is allowed in the selectors list, it could be Tag, Class or ID selectors.

Result of above styling with selectors list:

Note: If there is any invalid selector in the selectors list, the styling for all other selectors in the selectors list will be ignored.

Conclusion

And that's all the simple selectors, if you are wondering why they are called simple selectors, well its probably because of the "not so simple selectors" like:

Combinators
Attribute Selectors
Pseudo selectors

But with enough practice and determination you will come to find these "not so simple" CSS selectors to actually be simple.

Designing webpages can be really challenging, so learning how to properly select HTML elements can be a useful skill along the line.

If you would like to read more on CSS selectors, checkout w3schools and MDN web docs

Many thanks for reading up to this point, if you enjoyed this article, make sure to leave a like and share with friends.

And if you didn't, cut me some slack alright, it's my first article ever. Also if I made any errors feel free to drop a correction in the comment section. ❤️

DEV Community: Joseph Taiwo

My Altschool Blog Project Documentation

Requirements

Setting up a basic server

MVC Pattern

Models

User Model

Article Model

Routes

User routes

Article routes

Controllers

User Controller

Blog controller

JWT authentication

Problems I faced

Jwt auth

Code architecture

Conclusion

Thank you for reading

My 2022 highlights: Tech enlightenment

Registered for AltSchool Africa

I decided to learn ahead of the class

Made the mistake of starting with w3schools

Passed AltSchool exams

Discovered the evil that is CSS

console.log(“hello world”);

Entered tutorial hell

Tried to create projects on my own

Realized that the real hell was outside of watching tutorials

Lost my will to code

Picked up coding again in August

I was overflowing with new energy

Ventured into technical writing

Things were going so well

ASUU called off the strike

Had trouble adjusting

Stopped attending lectures

Failed some tests

Took a break on tech to focus more on school

Now the situation is under control

Can’t wait for what 2023 holds for me

And that's all folks

ChatGPT: Abilities, Limitations and Applications

Introduction

A little background info

What is ChatGPT capable of doing?

Answer follow-up questions

Generate detailed responses

Recognize errors in input data

Roleplay

Write a variety of content

Generate or analyze code

Filter inappropriate queries (Moderation API)

What are its limitations?

Tendedency to produce incorrect responses

Unupdated Knowledge base

Not connected to the internet

Uses assumption to provide responses

Algorithmic bias

Strict moderation

Gullibility

Uses of ChatGPT

Alternative to google search

Assist with Assignments

Conduct research

Generate content

Explain complex concepts

Practice debates

Write and debug code

Feedback

Conslusion

THANK YOU FOR READING

Getting to know CSS specificity

Introduction

Specificity

Calculating Specificity

Non-conflicting styles

The !important tag

Conclusion

`console.log(“hello world”);`

The `!important` tag

Pseudo-elements `::`

The `::after` pseudo-element

The `::before` pseudo-element

The `::first-line` pseudo-element

The `::first-letter` pseudo-element

The `::marker` pseudo-element

The `::placeholder` pseudo-element

The `::selection` pseudo-element

Pseudo-Classes (`:`)

Note that the comma `,` is not a combinator