DEV Community: Ed is Taking Note

[Design Pattern] Observer Pattern

Ed is Taking Note — Mon, 08 Aug 2022 07:37:11 +0000

The observer pattern is a one to many relationship dependency, and when one object(Observable object) changes its status, all its dependencies(Observer objects) will be notified and updated accordingly.

Scenario Problem
Now we have a publisher object and many subscriber objects, and subscriber objects poll new status from the publisher. However, all these subscribers don't know when the publisher will update a new status, so they just keep polling new status from the publisher(like polling every 1 minute or something).

Now there comes a bad smell... What if there are like 1000 subscribers and each of them tries to get status every 10 seconds!?
As a result, the requesting traffic must explode and obviously there are lots of unnecessary calling... Also, subscribers might not get the most recent status - there is still up to 10 seconds delay before getting the status.

Solution
With the observable pattern, every time the publisher(Observable object) has a new status, it notifies all its subscribers. This way we can avoid lots of unnecessary callings, and all subscribers can get the most recent status immediately without delay.

Implementation
A very simple class diagram of the pattern is like the following:

Implementation

The notify() method will be like:


public void notify() {

    this.status = // Do what ever to get the latest status...;

    this.subscribers.stream().foreach((s) => {
        s.update(this.status);
    });
}

[Design Pattern] Observer Pattern

Ed is Taking Note — Wed, 03 Aug 2022 10:11:00 +0000

Implementation
A very simple class diagram of the pattern is like the following:

We have register() and unregister() methods to add or remove subscriber to the subscribers list of the publisher class.

The publisher's notify() method will be like:

public void notify() {

    this.status = // Do whatever to get the latest status...;

    this.subscribers.stream().foreach((s) -> {
        s.update(this.status);
    });
}

The subscriber's update() method will be like:

public void update(Object status) {
     // Do whatever the subscriber want to do with the received status.
}

This is a very basic and simple observer pattern. There are actually many different kinds of implementation for observer pattern, but the core concept is generally the same.

[Design Pattern] Strategy Pattern

Ed is Taking Note — Tue, 19 Jul 2022 08:01:00 +0000

Strategy pattern is a group of algorisms or business logics and each of them are interchangable.
Strategy pattern separates the algorisms from the clients that use it so that we can modify the algorisms without touching the clients.

Scenario Problem

Here is the simple example. We have an Animal class, and 4 different child classes(Horse, Sheep, Lion, and Bird) inherit from it.

It may be very straightforward to implement eat() and move() methods in each of the children classes. However, sometimes some of the children classes may have the same implementation.

As we see this example, Horse and Sheep have the same eat() behavior(Eat grass); Horse, Sheep, and Lion have the same move() behavior(Walk).
Now this code duplication shows some bad smells while we have only 4 classes. Imagine how crazy it will be if there's like 10 classes or more? 🤯

Solution

Now the strategy pattern comes in.
We change eat() and move() into EatStrategy and MoveStrategy interfaces, and the Animal class has properties of these strategies as the following diagram.

We now separate the eat and move behaviors from the Animal class. The benefit is when we modify any of the move or eat behaviors(the business login), we don't have to touch the animal(the client using it) like before. Also, we will not have any duplicated codes.

Final code will be like:

MoveStrategy walk = new WalkStrategy();
MoveStrategy fly = new FlyStrategy();
EatStrategy eatGrass = new EatGrassStrategy();
EatStrategy eatMeat = new EatMeatStrategy();
EatStrategy eatGrains = new EatGrainsStrategy();

Animal horse = new Animal(walk, eatGrass);
Animal sheep = new Animal(walk, eatGrass);
Animal sion = new Animal(walk, eatMeat);
Animal bird = new Animal(fly, eatGrain);

[CSS Trick] Create Responsive Layouts without @media Query

Ed is Taking Note — Fri, 10 Jun 2022 08:17:21 +0000

We can use auto-fit to create a simple responsive layout of items without writing any @media query code by setting grid columns like:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

The above means:
Each grid column has minimum width of 150px, and maximum width of 1 faction unit;
Auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space.

Example:

<div class="container">
  <div class="item">ITEM 1</div>
  <div class="item">ITEM 2</div>
  <div class="item">ITEM 3</div>
  <div class="item">ITEM 4</div>
  <div class="item">ITEM 5</div>
  <div class="item">ITEM 6</div>
  <div class="item">ITEM 7</div>
  <div class="item">ITEM 8</div>
</div>

.container {
  background-color: violet;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 15px;
}

.item {
  background-color: lightseagreen;
  padding: 10px;
  height: 300px;
}

Result:

[CSS Trick] Mask Image

Ed is Taking Note — Thu, 02 Jun 2022 09:50:27 +0000

We can use css mask to change the svg icon color.

<h1 class="text">AIRCRAFT</h1>

.text::before {
  content: "";
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 8px;

  background-color: #eb2f64;
  -webkit-mask-image: url(../img/SVG/aircraft.svg);
  -webkit-mask-size: cover;
  mask-image: url(../img/SVG/aircraft.svg);
  mask-size: cover;
}

Result:

[CSS trick] Create a Linear Gradient Text

Ed is Taking Note — Fri, 27 May 2022 10:20:46 +0000

Set a linear gradient background for the text.
Set -webkit-background-clip to text.
Set the original text color to transparent.

Example:

.some-text {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
  -webkit-background-clip: text;
  color: transparent;
}

Result:

Difference between Mixin and Placeholder in SASS

Ed is Taking Note — Fri, 27 May 2022 04:42:47 +0000

In SASS, Mixin and Placeholder are really similar. They can hold combination of css properties and can be reused in many places, just like variables to help reduce our codes. However, they actually work differently behind the scene.

Mixin - It copies the mixin to the place where it is used.
Placeholder - It copies the selectors that use the placeholder to the place where the placeholder declared.

Let's see the following example:
We declared a mixin bananaColor, and a placeholder coffeeBackground.

They are used by the following classes:
.paragraph1 uses bananaColor.
.paragraph2 uses bananaColor and coffeeBackground.
.paragraph3 uses coffeeBackground.

SASS file:

@mixin bananaColor {
  color: #f5c725;
  font-weight: 600;
}

%coffeeBackground {
  background-color: #b46427;
  padding: 10px;
}

.paragraph1 {
  font-size: 20px;
  height: 100px;

  @include bananaColor;
}

.paragraph2 {
  font-size: 20px;
  height: 100px;

  @include bananaColor;
  @extend %coffeeBackground
}

.paragraph3 {
  font-size: 20px;
  height: 100px;

  @extend %coffeeBackground
}

Html File:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div>
            <p class="paragraph1">paragraph 1</p>
            <p class="paragraph2">paragraph 2</p>
            <p class="paragraph3">paragraph 3</p>
        </div>
    </body>
</html>

The result is like:

Let's compare how SASS compiles the code.

For Mixin, it copies the declared mixin properties to places where it is used.

For placeholders, it copies the selectors(.paragraph2, .paragraph3) to the placeholder where it is declared.

In conclusion, we can see Mixin and Placeholder are literally doing things reversely.

The logic of Mixin could be more intuitive and understandable than Placeholer. However, it may result in larger CSS code because it just copies the declared Mixin to everywhere, while Placeholder only copies the selectors.

Apart from that, Mixin can work like a function. We can also pass parameters into a Mixin, while we cannot use parameters on Placeholder.

Mixin and Placeholder can really help us organize and reduce our SASS code. We can choose to use either Mixin or Placeholder depending on our actual scenarios.

CSS positioning schemes

Ed is Taking Note — Thu, 26 May 2022 09:04:44 +0000

Difference among block, inline-block, and inline

Ed is Taking Note — Thu, 26 May 2022 08:59:41 +0000

How css calculate units(%, em, rem) to absolute px

Ed is Taking Note — Thu, 26 May 2022 08:59:28 +0000

Animation-fill-mode: backward

Ed is Taking Note — Thu, 26 May 2022 07:03:56 +0000

we can set animation-fill-mode to 'backwards' so that the item's animation starts from keyframe 0%.

Starting a Spring Boot Microservices Maven Project

Ed is Taking Note — Thu, 26 May 2022 07:02:06 +0000

Create Parent Module

Open terminal, navigate to the place you want to create the project and run the following command:

mvn archetype:generate -DgroupId=[GROUP_ID(ie com.nutsnet)] -DartifactId=[ARTIFACT_ID(ie nutsnetservices)] -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false

Open IntelliJ, Open the created project. Then go to File > Project Structure to make sure the Java version is what you want.
Delete the src folder which is auto generated by maven. Because here is the parent directory of our project, we will create our microservices under this parent directory .
Open pom.xml. Set the project's website url and java compile version.

Get rid of all original dependencies and plugins, and finally, our pom.xml file will be like the following:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test</groupId>
  <artifactId>testservices</artifactId>
  <version>1.0-SNAPSHOT</version>

  <name>testservices</name>
  <url>http://www.test.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
  </properties>

  <dependencyManagement>
    <dependencies>
    </dependencies>
  </dependencyManagement>

  <dependencies>

  </dependencies>

  <build>
    <pluginManagement>
      <plugins>

      </plugins>
    </pluginManagement>
  </build>
</project>

Now let's start adding dependencies and plugins that we want.

For the dependencyManagement tag, add spring-boot-dependencies.
For the dependencies tag, we need lombok and spring-boot-starter-test
For the pluginManagement tag, add spring-boot-maven-plugin.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test</groupId>
  <artifactId>testservices</artifactId>
  <version>1.0-SNAPSHOT</version>

  <name>testservices</name>
  <url>https://www.test.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
    <spring.boot.maven.plugin.version>2.5.7</spring.boot.maven.plugin.version>
    <spring.boot.dependencies.version>2.5.7</spring.boot.dependencies.version>
  </properties>

  <dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-dependencies</artifactId>
        <version>${spring.boot.dependencies.version}</version>
        <scope>import</scope>
        <type>pom</type>
      </dependency>
    </dependencies>
  </dependencyManagement>

  <dependencies>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
  </dependencies>

  <build>
    <pluginManagement>
      <plugins>
        <plugin>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-maven-plugin</artifactId>
          <version>${spring.boot.maven.plugin.version}</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

Click the reload maven project button.

Then we can see the dependencies and plugins are loaded successfully.

Create Microservices

Right click the parent module > new > Module...
Click New Module, enter the module(service) name, select JDK version, and parent module. Then click Create.

Now in the parent module's pom.xml, we can see the created sub-module(service) is in the module tag.

In the sub-module's pom.xml, we can also see the parent tag specify its parent module and the artifactId tag of the sub-module.

Add spring-boot-starter-web to the sub-module, and click reload maven project.

   <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

Create the main class.
Create the application.yml file.
Let's create a Spring Boot banner. (Optional)
Go to https://devops.datenkollektiv.de/banner.txt/index.html and copy the generated banner text.
Back to IntelliJ, Create banner.txt, and paste the banner text.
Run the spring boot application. Now our first service is running successfully !!
We can keep adding other services like this first service.