Forem: Souvik

REST API Using Spring Boot - Level 2

Souvik — Sun, 12 Feb 2023 13:28:51 +0000

This is a continuation of REST API Using Spring Boot - Level 1. In this tutorial, we will see how we can use a Java class as our temporary storage to send and receive actual user data to and from our REST API. Let's get started.

Create Custom Data Type (User)

To store the data, we need some class that will store it but before that we need to actually define the data type(class). Considering, every user record having 3 properties: id, name and age, we define the User class as below:

public class User {  
    private long id;  
    private String name;  
    private int age;  

    public User(long id, String name, int age) {  
        this.id = id;  
        this.name = name;  
        this.age = age;  
    }  

    public long getId() {  
        return id;  
    }  

    public void setId(long id) {  
        this.id = id;  
    }  

    public String getName() {  
        return name;  
    }  

    public void setName(String name) {  
        this.name = name;  
    }  

    public int getAge() {  
        return age;  
    }  

    public void setAge(int age) {  
        this.age = age;  
    }  
}

Create Respository

Now that our custom data type(User) is defined, we need define the class that will store the user records. We create the class called UserRepository which will store our user records. This class will store user data and provide all the methods to perform various CRUD operations on the data. Since, there will be multiple user records, we use a List to store the user records and define the various methods for it. The implementation for the UserRepository is:

@Component
public class UserRepository {  

    private List<User> users;  

    public UserRepository() {  
        users = new ArrayList<>();  
        users.add(new User(432, "John Doe", 31));  
        users.add(new User(692, "Maria Beth", 27));  
        users.add(new User(453, "Jeena Stone", 30));  
    }  

    public List<User> getAllUsers() {  
        return users;  
    }  

    public User getUser(Integer userId) {  
        User user = null;  
        for (User currentUser : users) {  
            if (Objects.equals(currentUser.getId(), userId)) {  
                user = currentUser;  
                break;  
            }  
        }  
        return user;  
    }  

    public User createUser(User newUser) {  
        users.add(newUser);  
        return newUser;  
    }  

    public User updateUser(Integer userId, User updatedUser) {  
        User user = getUser(userId);  
        if (user != null) {  
            if (updatedUser.getId() != null) user.setId(updatedUser.getId());  
            if (updatedUser.getName() != null) user.setName(updatedUser.getName());  
            if (updatedUser.getAge() != null) user.setAge(updatedUser.getAge());  
        }  
        return user;  
    }  

    public User deleteUser(Integer userId) {  
        User user = getUser(userId);  
        if (user != null)  
            users.remove(user);  
        return user;  
    }  
}

So, now we have defined the data type(User class), the storage class(UserRepository class) which contains data as well as provide method for CRUD operations on the data.

Define Controller

Now that we have defined the CRUD methods, we can readily access the CRUD method via an object of the UserRepository class from the controller. The easiest way to do so is to autowire an object of the UserRepository class in the controller and access all the CRUD methods. Doing so, our code for the controller file would be:

@RestController  
public class MyController {  

    @Autowired  
    private UserRepository userRepository;  
    @GetMapping("/")  
    public String home() {  
        return "Welcome to REST API tutorial using Spring Boot";  
    }  

    @GetMapping("/users")  
    public List<User> getAllUsers() {  
        return userRepository.getAllUsers();  
    }  

    @GetMapping("/users/{userId}")  
    public User getUser(@PathVariable Integer userId) {  
        return userRepository.getUser(userId);  
    }  

    @PostMapping("/users")  
    public User createUser(@RequestBody User user) {  
        return userRepository.createUser(user);  
    }  

    @PatchMapping("/users/{userId}")  
    public User updateUser(@PathVariable Integer userId, @RequestBody User user) {  
        return userRepository.updateUser(userId, user);  
    }  

    @DeleteMapping("/users/{userId}")  
    public User deleteUser(@PathVariable Integer userId) {  
        return userRepository.deleteUser(userId);  
    }  
}

In the above implementation. we can see that we have used a new annotation @RequestBody. What is the use of it? Whenever we send any data via the request body, we can't access it directly. @RequestBody annotation allows us to access that data. With that, we come to an end of the tutorial for creating REST API using Spring Boot.

So, to summarize, the application, we define our data type User, then we create UserRepository to store and retrieve user records, then we autowire an object of this UserRepository class in our controller and via this object we will be able to access all the CRUD methods. Here is the pictorial representation of the process.

If you're wondering why we created a separate class to store our data when we could have easily just stored the list in the controller itself. And yes, we could have stored but its a better approach to let a class handle one single functionality. Suppose, in the future, if we wanted to change the implementation of the respository then we have to rewrite the controller. So, you see, it may seem a bit extra to create separate class but its always best to follow a modular approach.

Summary

This brings us to the end of our article. In this article, we have learned how to implement a REST API using Spring Boot. We were able to store data using our repository and learnt various annotations related to REST API.

If you enjoyed reading this article, a ike would be appreciated :)

REST API Using Spring Boot - Level 1

Souvik — Sun, 12 Feb 2023 13:26:31 +0000

In this tutorial, we are going to create a simple REST API using Spring Boot for an imaginary user management application. Our target is to get familiar with the code structure and the annotations. We will create HTTP endpoints and for now return static values. Considering an imaginary user management application, we will be implementing the following endpoints.

Method Type: GET
1. /users: returns all users
2. /users/{userId}: returns the user with the matching user ID
Method Type: POST
1. /users: create new user
Method Type: PATCH
1. /users/{userId}: update user details with the matching user ID
Method Type: DELETE
1. /users/{userId}: delete user with the matching user ID

Project Setup

Generate a spring project from Spring Initializer. Add Spring Web as the dependency. Before clicking generate the values should be like:

Key things to note:

Choose project type as Maven
Don't choose any snapshot version for Spring Boot i.e. don't choose any version with (SNAPSHOT) written beside it.
Add Spring Web as dependency.

For this tutorial, we will be creating all the files in the package that is created by default.

Initializing REST API

Spring follows MVC(Model-View-Controller) pattern where the aim of the controller is to handle requests. The controller determines what information is to be sent to the user when the user makes a request. So, to handle the requests for our REST application, we need our own controller.

Now, Spring understands code using annotations and to let it know that we are creating a REST API controller, we use the annotation @RestController which tells spring that this code will be handling the HTTP requests.

@RestController  
public class MyController {  

}

With the controller defined, if we run our spring application now and visit the default url for spring application i.e. localhost:8080 in the browser then we can see the following output:

HTTP Annotations Overview

This error is shown because we haven't defined any endpoints yet. Whenever we are visiting http://localhost:8080, we are essentially making a GET request on the URL but since we have no endpoint defined for it, Spring shows the White Label Error. But before we jump to the endpoints, let's learn the annotations first.

Spring provides annotations for all types of HTTP requests. They are:

GET: @GetMapping("/path")
POST: @PostMapping("/path")
PATCH: @PatchMapping("/path")
PUT: @PutMapping("/path")
DELETE: @DeleteMapping("/path")

There are 2 other annotations that we will be using are:
@RequestBody: to access data provided in the HTTP request body
@PathVariable: to access any variable provided in the URL. Suppose we need to get a user record matching a specific ID, then we can pass the user ID in the URL like /path/{userId} and can access it using @PathVariable. We will see the implementations for all the annotations as we follow along.

Define HTTP Methods For REST API

Currently, when we visit http://localhost:8080 in the browser, we are getting the default message i.e. Whitelabel Error Page. Let's change this. We want to show our own message here.

To do this, we need to identify the type of HTTP request that is being used and how to define that HTTP request. So, by default, any URL we visit, we are making a GET request to the server. So, to show the custom message in the Home Page, we need to define a GET endpoint but for which URL? Since, this is the home page, there is no extra path, so its essentially the default path which is http://localhost:8080. With that being said, let's define the HTTP method.

@RestController  
public class MyController {  
    @GetMapping("/")  
    public String home() {  
        return "Welcome to REST API tutorial using Spring Boot";  
    }  
}

Now, if we restart the application and visit http://localhost:8080 again, then we can see the text "Welcome to REST API tutorial using Spring Boot". Now that we have got our application running, let's create the HTTP endpoints for our application. For now, we will return simple text messages as outputs from the REST API.

GET All Users

Our first endpoint is /users. We want to get all the user data via this endpoint. Essentially, we are making a GET request on /users. Its implementation is:

@GetMapping("/users")  
public String getAllUsers() {  
    return "All users";  
}

GET One User

Now we want to provide a User ID and get the user whose ID matches the provided User ID. Here, the user ID will be passed through the query as /users/{userID} and using @PathVariable, we will be able to access it. Upon getting the User ID, we will return a text as Found user with user ID: {userID}. The coding implementation for the same is:

@GetMapping("/users/{userId}")
public String getUser(@PathVariable long userId) {  
    return "Found user with user ID: " + userId;  
}

Create New User

For creating a new user, we need to send data to the REST API, so that it can create the user in the database. So, we are doing a POST request to the REST API on the URL /users.

@PostMapping("/users")  
public String createUser() {  
    return "New user created";  
}

Update User

To update an user, we need 2 things: some unique identifier(e.g. User ID) through which we can identify the user records that needs to be updated and the updated data. Currently, we won't be sending any updated data. We will simply focus on the functions and annotations. So, for updating, we can use the PATCH or the PUT HTTP methods.

If you are wondering why do we use PATCH and PUT for updating data and not POST then this QnA in StackOverflow is the best. It defines the differences between POST, PATCH and PUT in detail.

So, back to our updating user, our implementation will be:

@PatchMapping("/users/{userId}")  
public String updateUser(@PathVariable long userId) {  
    return "User with user ID: " + userId + " updated";  
}

Delete User

This is almost similar to Update User. We need to pass a unique identifier in the query and if the idenfier matches a user, then delete the user. For now, we will be sending a text as the response.

@DeleteMapping("/users/{userId}")  
public String deleteUser(@PathVariable long userId) {  
    return "User: " + userId + " deleted";  
}

Combining all of these, our controller file i.e. MyController.java looks like:

@RestController  
public class MyController {  
    @GetMapping("/")  
    public String home() {  
        return "Welcome to REST API tutorial using Spring Boot";  
    }  

    @GetMapping("/users")  
    public String getAllUsers() {  
        return "All users";  
    }  

    @GetMapping("/users/{userId}")
    public String getUser(@PathVariable long userId) {  
        return "Found user with user ID: " + userId;  
    } 

    @PostMapping("/users")  
    public String createUser() {  
        return "New user created";  
    }  

    @PatchMapping("/users/{userId}")  
    public String updateUser(@PathVariable long userId) {  
        return "User with user ID: " + userId + " updated";  
    }  

    @DeleteMapping("/users/{userId}")  
    public String deleteUser(@PathVariable long userId) {  
        return "User: " + userId + " deleted";  
    }
}

With the endpoints defined, we have our REST API using Spring Boot ready. Run the Spring Boot application and, our REST API is ready to run on http://localhost:8080. Use Postman or any other method to test the various endpoints.

Summary

To summarize our application, we have:

created a Spring Boot project with Spring Web as the dependency.
created a Java class called MyController and defined it as controller using @RestController
implemented the HTTP methods using: @GetMapping, @PostMapping, @PatchMapping, @PutMapping and @DeleteMapping
learnt how to get a variable from URL using @PathVariable

Here, we have got an overview of how to create a REST API using Spring Boot and the various annotations required for it. But to make the API more realistic, we need to be able to store and return actual data as response. In REST API Using Spring Boot - Level 2, I have shown how to use a Java class as a storage to make the API realistic.

Autowiring In Spring

Souvik — Sat, 04 Feb 2023 09:57:04 +0000

Autowiring is one of the most significant features of spring framework. It is the process through which spring identifies and injects dependencies automatically. Suppose, we are making a candy in a candy factory. An important property for the candy is its flavour. So, if we are representing creating candy in Java then the implementation would be:

public interface Flavour {  
    public String getFlavour();  
}

@Component  
public class ChocolateFlavour implements Flavour {  
     @Override  
    public String getFlavour() {  
        return "chocolate";  
    }  
}

@Component  
public class Candy {  
    @Autowired  
    private Flavour flavour;  

    public void createCandy() {  
        System.out.println("Created " + flavour.getFlavour() + " flavoured candy");  
    }  
}

@SpringBootApplication  
public class CandyfactoryApplication {  

   public static void main(String[] args) {  
      ConfigurableApplicationContext applicationContext = SpringApplication.run(CandyfactoryApplication.class, args);  
      Candy chocolateCandy = applicationContext.getBean(Candy.class);  
      chocolateCandy.createCandy();  
   }  
}

In the above implementation, autowiring works fine. When the application is running Spring tries to inject dependency of type Flavour, so it searches the entire package and finds ChocolateFlavour. As only one class is found, Spring is sure we need to inject it.

But problem will arise when we introduce another class of Flavour type(i.e. a class that implements Flavour interface). Let's consider the class to be the following:

@Component  
public class MangoFlavour implements Flavour {  
    @Override  
    public String getFlavour() {  
        return "mango";  
    }  
}

If we try to run the application now, it will throw the following error:
Field flavour in com.candy.candyfactory.Candy required a single bean, but 2 were found

Why is this error thrown?
The above problem is occuring because with the introduction of the MangoFlavour class, spring has 2 components of same type and its unable to decide which to inject. To resolve such conflicts, spring provides 3 ways, they are:

1. `@Primary` Annotation

It is clearly what the annotation suggests i.e. giving more importance to a component than the others. Defining a component as primary will allow spring to prioritise it and inject that component, so if we define the MangoFlavour as @Primary flavour and change the code as below:

@Component  
@Primary  
public class MangoFlavour implements Flavour {  
     @Override  
    public String getFlavour() {  
        return "mango";  
    }  
}

then our application runs fine and gives the following output: Created mango flavoured candy and if we had made ChocolateFlavour as @Primary then output would be: Created chocolate flavoured candy.

2. Autowiring by name

This is a very widely used method of autowiring where you name the autowiring variable the same name as the class name but with the first letter small. So, if we want to use MangoFlavour class for autowiring then the variable name should be mangoFlavour and the code for the class Candy would be:


@Component  
public class Candy {  
    @Autowired  
    private Flavour mangoFlavour;  

    public void createCandy() {  
        System.out.println("Created " + mangoFlavour.getFlavour() + " flavoured candy");  
    }  
}

Since the variable name now matches the class MangoFlavour, spring is able to understand that an instance of the MangoFlavour class should be injected as the dependency.

3. Using `@Qualifier("value")`

@Component  
@Qualifier("chocolate")  
public class ChocolateFlavour implements Flavour {  
     @Override  
    public String getFlavour() {  
        return "chocolate";  
    }  
}

@Component  
@Qualifier("mango")  
public class MangoFlavour implements Flavour {  
    @Override  
    public String getFlavour() {  
        return "mango";  
    }  
}

@Component  
public class Candy {  
    @Autowired  
    @Qualifier("mango")  
    private Flavour flavour;  

    public void createCandy() {  
        System.out.println("Created " + flavour.getFlavour() + " flavoured candy");  
    }  
}

@Qualifier is simplest among all. You assign a qualifier value to each component and assign which qualifier to use in autowiring and spring will match the values and inject the dependency.

Among the 3 types of autowiring, their priority order is @Qualifier() > @Primary > Autowiring by name

Spring Loose coupling + Basic Terminlogies

Souvik — Fri, 03 Feb 2023 04:23:41 +0000

In my previous article, Tight Coupling and Loose Coupling in Java, we had implemented loose coupling using an interface. If you are new to the concept of implementing loose coupling then I would recommend you to read the above mentioned article before you proceed with this. With that sorted, let's start with Loose coupling in Spring.

Inversion of Control

The problem with the approach I had used to implement loose coupling in Tight Coupling and Loose Coupling in Java is that it is not efficient for enterprise applications. An enterprise application might have throusands of classes and objects and manually creating and managing objects for them is very tedious. So, we give this responsibility to spring. Sping creates and manages the instances of the classes on our behalf. This giving of control to spring to manage classes and objects in called Inversion of Control.

Annotations and Terminologies

To allow Spring to take control of classes there are 2 annotations we need to be familiar with. Annotations give meaning to a piece of code. It allows Spring to better understand our goal. The 2 annotations and what message they convey to Spring are as follows:

@Component: Hey spring, this is a component and you need to manage its lifecycle.
@Autowired: Hey spring, there is already a component of this type, so go and find it. Once you find it, autowire it to the current object. Now, we can tell spring to manage a component lifecycle using @Component and allow Spring to identify and create an object of a component using @Autowired.

But there should be a place where the objects should be managed right? Yes, there is an interface called ApplicationContext which provides the functionalities to manage the object lifecycle. This Application Context represents the IoC Container in Spring. IoC Container stores and manages the instances of the classes and the instances created are called Beans.

To demonstrate all of the things we learned so far, let's see a real life example. Consider our smartphone, we have a camera in our smartphone, that same camera is used by various apps like Instagram, Facebook, etc. Now, let's to implement the scenario where Instagram will be using our camera.

Loose coupling Implementation in Spring

// consider this the base camera architecture giving features like 12MP with OIS, etc.
public interface Camera {  
    public void click();  
    public void record();  
}

// We use the camera architecture to create our camera software for our phone
@Component  
public class MyPhoneCamera implements Camera {  
    @Override  
    public void click() {  
        System.out.println("Picture clicked!");  
    }  
    @Override  
    public void record() {  
        System.out.println("Recording video...");  
    }  
}

// Instagram will interact with the Mobile OS like Android, iOS, etc. to use the camera and provide its own features like filters, stickers, etc. but here we will see only the basics
@Component  
public class Instagram {  
    @Autowired  
    private Camera camera;  

    public void run() {  
        int choice = 0;  
        Scanner sc = new Scanner(System.in);  
        outerloop:  
        while (true) {  
            System.out.println("1. Click picture\n2. Record Video\n3. Exit Instagram\nEnter choice: ");  
            choice = sc.nextInt();  
            switch (choice) {  
                case 1: camera.click();break;  
                case 2: camera.record();break;  
                case 3: System.out.println("Instagram closed"); break outerloop;  
                default: System.out.println("Please enter correct choice!");  
            }  
        }  
    }  
}

// finally our smartphone from where we run the instagram app
@SpringBootApplication  
public class Smartphone {  
   public static void main(String[] args) {  
      ConfigurableApplicationContext applicationContext = SpringApplication.run(Smartphone.class, args);  
      Instagram instagramBean = applicationContext.getBean(Instagram.class);  
      instagramBean.run();  
   }  
}

So, some observations we can see from the above implementation:

In our Smartphone class, we didn't create any object manually. Instead, we used getBean() to get an instance of the Instagram class.
We also see than when we are calling the instagramBean.run() method, the private variable camera is able to access click() and record() methods without being instantiated. Since, we have used @Autowired, spring automatically finds the class MyPhoneCamera using the Camera type and autowires an object of it to the private Camera camera variable. This method of injecting an object to another object is called Dependency Injection in Spring.

Now, you may have a question what does all this demonstrate? Why are we using the annotations?
The answer is to create Loosely-coupled systems. We can change MyPhoneCamera implementation and the application will run fine(till the architecture is unchanged i.e. the methods of the interface remains same). Other applications can also use our phone camera i.e. MyPhoneCamera and create its own features.

Summary

We learned:

Annotations:
1. @Component
2. @Autowired
Terminologies:
1. Beans
2. IoC Container
3. Application Context
4. Dependency Injection
5. Loose coupling with implementation

Tight-coupling and Loose-coupling Implementation in Java

Souvik — Tue, 31 Jan 2023 17:07:11 +0000

If you are quite familiar with Java and moving towards Spring Framework or you want to get an idea of loosely-coupled and tightly-coupled system in a programming perspective or you want to add a bit more knowledge to your mental knowledge repository, then we are good to go.

What are tightly and loosely coupled systems?

Breifly, tightly-coupled means a system in which the components are dependent on each other. It reduces flexibility of a system and swapping a component for another is very difficult. Loosely-coupled systems are those where components are not dependent on each other and the components can be swapped with ease. So, how do we achieve loose-coupling in Java?

How do we implement loose-coupling in Java?

We achieve this in Java by creating a superior interface. All other classes will implement this interface to define the methods. Its like android apps for the Android software and iOS apps for iOS. Now finally we need a runner class that will instantiate the games and the object of this runner class will be used to run the games from the main class. This might seem a bit overwhelming but stick till the end and you will get the picture.

Tight-coupling Coding Implementation

In the below example, we consider creating a gaming device that will run 2 games: Super Mario and Super Contra. If we implement this in Java, the code will be:

public class SuperMario {  
    public void up() { System.out.println("Super Mario: up"); }  
    public void down() { System.out.println("Super Mario: down"); }  
    public void left() {  System.out.println("Super Mario: left"); }  
    public void right() { System.out.println("Super Mario: right"); }  
}

public class SuperContra {  
    public void up() { System.out.println("Super Contra: up"); }  
    public void down() { System.out.println("Super Contra: down"); }  
    public void left() {  System.out.println("Super Contra: left"); }  
    public void right() { System.out.println("Super Contra: right"); }  
}

public class GameRunner {  
    private SuperMario game;
    public GameRunner(SuperMario game) {  
        this.game = game;  
    }  
    public void run() {  
        game.up();  
        game.down();  
        game.left();  
        game.right();  
    }  
}

public class GamingDevice {  
   public static void main(String[] args) { 
      SuperMario game = new SuperMario(); 
      GameRunner runner = new GameRunner(game);  
      runner.run();  
   }  
}

Now the problem with the above implementation is that in the GameRunner class, the object is strictly set as a SuperMario object. So, currently it seems like our device can only run(tightly-coupled) the SuperMario game. What I mean is, if we try to run the below code in my GamingDevice class, we will get an error.

public class GamingDevice {  
   public static void main(String[] args) { 
      SuperContra game = new SuperContra(); 
      GameRunner runner = new GameRunner(game);  
      runner.run();  
   }  
}

But a device running one game is not ideal right? Our device is supposed to run many games.

To summarize the scenario, our device can currently run only one game now i.e. Super Mario, but we want it to be able to run both Super Mario and Super Contra. So, how do we fix our device?

We fix it by installing a Gaming Software(interface) in our Gaming Device that can run both the games. So, rather than running the game directly on the device, our device will be able to run the gaming software which supports both the games.

So, our new implementation goes like:

Loose-coupling Coding Implementation

public interface GamingSoftware {  
    public void up();  
    public void down();  
    public void left();  
    public void right();  
}

public class SuperMario implements GamingSoftware {  
    public void up() { System.out.println("Super Mario: up"); }  
    public void down() { System.out.println("Super Mario: down"); }  
    public void left() {  System.out.println("Super Mario: left"); }  
    public void right() { System.out.println("Super Mario: right"); }  
}

public class SuperContra implements GamingSoftware {  
    public void up() { System.out.println("Super Contra: up"); }  
    public void down() { System.out.println("Super Contra: down"); }  
    public void left() {  System.out.println("Super Contra: left"); }  
    public void right() { System.out.println("Super Contra: right"); }  
}

public class GameRunner {  
    private GamingSoftware game;  
    public GameRunner(GamingSoftware game) {  
        this.game = game;  
    }  
    public void run() {  
        game.up();  
        game.down();  
        game.left();  
        game.right();  
    }  
}

public class GamingDevice {  
   public static void main(String[] args) { 
      SuperMario superMario = new SuperMario(); 
      SuperContra superContra = new SuperContra();
      GameRunner marioRunner = new GameRunner(superMario);  
      GameRunner contraRunner = new GameRunner(superContra);
      marioRunner.run();
      contraRunner.run();
   } 
}

Now, our both games will run perfectly. So, what we achieved here is a loosely-coupled system or gaming device which will be able to run any game that the Gaming Software supports(i.e. the game is implemented using the GamingSoftware interface).

So, this is the difference between tightly-coupled and loosely-coupled systems in Java and the difference between their implementations. If you found this article helpful, leave a comment :)

CSS in 2022

Souvik — Fri, 21 Oct 2022 04:35:29 +0000

A quick note before you start. CSS is a very broad language and learning everything is not possible in the shortest amount of time. This blog is for you to know what to prioritize while learning CSS today.

Introduction

While learning CSS, most people tend to ignore the best features of CSS due to its learning curve and just focus just on how the webpage looks. While this is fine initially, but just think the code you wrote today, can that be modified or how easily can new css be added to elements or how readable the CSS file is. These questions are enough to answer how well you write css. These are some of the most basic and important features I have seen a beginner should know to write well-defined CSS.

CSS variables

h1 {
  color: #32f45e;
}
p {
  color: #27332f;
}

This type of declaration can be seen in a lot of CSS files. While this can be done for small webpages, but as the number of components increase, maintaining consistent theme accross the webpage becomes harder. This is where CSS variables come into play. Declare a variable in the :root pseudo element and now the variable can be used anywhere in the CSS file. This

improves code readability,
make code modular and
reduces the chances of error.

:root {
  /*
  Sample declaration 
  --varname: value;
  */
  --color-primary: black;
  --color-secondary: red;
}

CSS Display Property

CSS display property is the most important property to learn. Learning when to use block, flex and grid is a great understanding to have. There are other properties as well but there 3 are the primary ones.

display: block is used when you want a container to always start in a new line and occupy the entire width of the page.

display: flex is used when you want items to be arranged in the specified direction(row/column/row-reverse/column-reverse). Declaring something as flex will change the size of the component as viewport changes.

display: grid is used for creating 2d arrangements and complex layouts. Grids allow creating responsive 2D layouts in much compact code.

These 3 are the most widely-used properties in CSS. You can checkout examples and try them from here or you can refer to my Notion note.

Media Queries

While learning CSS this is the part most beginners ignore. It’s 2022, and as a web developer knowing how to make a website responsive is expected in general. Understanding breakpoints and writing media queries based on screen size is an expected skill to have.

If you are beginning to learn, learn from here.

CSS3 Media Queries - Examples

Comfortable with media query, breakpoint and created responsive website ? Proceed with this.

A Complete Guide to CSS Media Queries | CSS-Tricks

CSS Selectors

This is one of the first things we learn while learning CSS. If you have done CSS you have seen these:

/* ID selector */
#corn { 
    color: yellow;
}
/* class selector */
.salad {
    color: green;
}

Another example of this would be writing the below defined CSS types interchangeably:

div p {
    /* Styles here */
}

div > p {
    /* Styles here */
}

Knowing these selectors and their differences will help you write better CSS. Using selectors correctly can drastically reduce redundancy in CSS code. I have created my own Notion note for Flexbox, grid and selectors. It will be a good reference when you try to use the styles and forget something. The link to my Notion note is given below.

CSS Flexbox, Grid & Selectors

HTML Theory Recap in 5 mins

Souvik — Fri, 14 Oct 2022 01:59:29 +0000

What is HTML ?

Hypertext Markup Language (HTML) is a markup language that defines the structure of webpages. It defines how content will be displayed in the web browser. Modern day HTML also makes sure that webpages are accessible to people with disabilities using ARIA.

Some basic concepts to know as a developer are:

Semantic Tags
Meta Tags
The Open Graph Protocol
Client-side validation

Semantic Tags

HTML uses semantic tags to convey the meaning of a webpage.

For example: In an elevator, buttons are used in vertical order to convey the floor number. However, this is also not enough for everyone so numbers are added which indicate the floor number.

Semantically writing HTML allows search engines and accessibiliy softwares to understand the contents of a page. Semantic HTML tags can be broadly classified into 5 types:

Sectioning tags → These tags define sections of a webpage. Examples of such tags are: <h1>, <header>, <footer>, <main>.
Content tags → These tags indicate the type of content within the tags. Examples: <blockquote>, <ol>, <p>.
Inline tags → These tags only occupy the space covered by the content within them & don’t break the flow of content. Examples: <span>, <a>, <code>
Table tags → These tags are used to define tables in HTML. Examples: <table>, <thead>, <tbody>, <tfoot>
Embedded content & media tags → These tags allow media content like audio, video, images, etc to be defined semantically. Examples: <audio>, <video>, <img>

Meta Tags

Metadata is data about other data. Meta tags in HTML define the webpage. Metatags typically contains 2 parts:

name → defines the tag type
content → defines the values

<meta name="author" content="John Doe">

3 categories of Meta tags are:

Metatags for SEO → These tags are read by search engines to rank and correctly search webpages. Some of the SEO meta tag types are: title, description, author, robots.
http-equiv tags → The http-equiv attribute is essentially used to simulate an HTTP response header. Not everyone has access to their server's configuration. This can be true if you're using shared hosting where the hosting company makes server config changes on your behalf or you just don't have the credentials to access the server's config. Some of the http-equiv meta tag types are: content-type, default-style, refresh, Cache-Control.
Responsive meta tags → These tags define the responsive properties of the webpage. Some of the responsive meta tag types are: viewport, HandheldFriendly.

Open Graph Protocol

With the growth of social media platforms and people sharing thousands of links everyday, Facebook found a way to display information about a website before a user clicks on the link to improve user experience. Facebook established The Open Graph Protocol in 2010. It is a set of metadata rules that allow websites to describe themselves to social networks. OG Metatags typically contains 2 parts:

property → defines the property name
content → defines the property values

There are 4 meta tags that are the basic meta tags to turn web pages into graph objects. They are:

title → Defines title of the page. This text will appear in the preview
type → Defines the type of content such as website, video, music or article. Depending on the type other values may be required
url → Defines the address that the social network must use for this specific page
image → Defines the image that will be displayed when the url is shared

<meta property="og:title" content="My website">
<meta property="og:type" content="Website">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/me.jpg">

Detailed description of the mentioned and other OG meta tags are provided in The Open Graph Protocol website.

Client-side Validation

Apart from defining content structure, HTML also provides data validation in forms. HTML checks for data as soon as data is typed in form. This is called client-side validation and it is implemented using the following properties:

required → If an HTML field is defined as required then some data must be provided in the field before the form can be submitted.
minlength → Specifies the minimum length of input to be given
min and max → Specifies the minimum and maximum values of numerical input types
type → Specifies the type of data to be provided like number, text, email, etc.
pattern → Specifies a regular expression that defines the pattern that the input data needs to follow

Learn more about client-side form validation

Quick Tip 💡: For beginners the HTML tags may seem overwhelming but don't be stressed out. When you are starting out only familiarity with basic tags are needed. As you proceed towards more advanced projects, you will get familiar with more tags. If you want learn in detail, then checkout my notion note on HTML for developers

Why should you learn from this ?

When people are getting into Software Development, people explore a lot of technologies and it's natural to forget certain things as you learn. Keeping this in mind, I wrote this blog for quick recap of HTML. If you want to have to have a look at the HTML tags in detail, I have got that covered too. My Notion note contains all the popular HTML tags with description.
Check it out 👉

Forem: Souvik

REST API Using Spring Boot - Level 2

Create Custom Data Type (User)

Create Respository

Define Controller

Summary

REST API Using Spring Boot - Level 1

Project Setup

Initializing REST API

HTTP Annotations Overview

Define HTTP Methods For REST API

GET All Users

GET One User

Create New User

Update User

Delete User

Summary

Autowiring In Spring

1. @Primary Annotation

2. Autowiring by name

3. Using @Qualifier("value")

Spring Loose coupling + Basic Terminlogies

Inversion of Control

Annotations and Terminologies

Loose coupling Implementation in Spring

Summary

Tight-coupling and Loose-coupling Implementation in Java

What are tightly and loosely coupled systems?

How do we implement loose-coupling in Java?

Tight-coupling Coding Implementation

Loose-coupling Coding Implementation

CSS in 2022

Introduction

CSS variables

CSS Display Property

Media Queries

CSS Selectors

HTML Theory Recap in 5 mins

What is HTML ?

Semantic Tags

Meta Tags

Open Graph Protocol

Client-side Validation

1. `@Primary` Annotation

3. Using `@Qualifier("value")`