Forem: Igor Cekelis

How to build a cost-effective Kubernetes disaster recovery plan

Igor Cekelis — Tue, 10 Aug 2021 10:38:38 +0000

Every business relies on documents, applications, data and infrastructure to function on a daily basis and losing some of them can have serious consequences. Since the IT world can be quite unpredictable, Disaster Recovery plan is insurance that a business will be up and running as soon as possible.

Planning ahead is key to success

Disaster recovery (DR) involves a set of policies, tools, and procedures that allows us to resume normal operation following a disaster by regaining access to data, hardware, software, network, and other crucial parts of our business.

One of the most important things when talking about Disaster recovery is RTO (Recovery time objective). RTO is defined as the amount of time it takes for your organization’s infrastructure to come back online and be fully functional in case of a natural or human-induced disaster.

Disaster Recovery and Business Continuity are close terms but not the same. Business continuity is an organization's ability to ensure operations and core business functions are not severely impacted by a disaster or unplanned incident that takes critical systems offline, whereas Disaster Recovery is all about getting your infrastructure and operations up and running again.

In this context, we can say that disaster is any unforeseen event that can significantly put your organization at risk by interfering with your daily operations. Of course, not every disaster has to involve a catastrophic destruction scenario, but in order to run a stable and consistent business, it is better to be safe than sorry.

Why is an efficient Disaster Recovery plan necessary?

Although most companies tend to the safety of their data, they are more often concerned about data leakage rather than what would happen if all the crucial information suddenly became inaccessible. Natural or human-induced, disasters can happen, and it would be wise for all companies to prepare ahead for such eventualities.

Our organization started to grow and the number of clients increased, and since we strive to deliver the best service possible to our clients, we had to take all possible scenarios into account.

Our main problem was a single point of failure for our infrastructure. Namely, production servers were located on the same physical location, and there were backups of all data stored on secured locations but in case of disaster, it would take hours, even days to bring everything back online, and we didn’t want to take those chances.

So we decided that the best solution to this problem would be to have multiple servers in different locations, and that are in sync with each other.

Building a functional Kubernetes Disaster Recovery on a budget

Building a competitive, enterprise-grade Kubernetes platform requires more than simply deploying your applications. Kubernetes clusters require protection, maintenance, automation, and stability.

Disaster Recovery for Kubernetes can be both time and budget-consuming, but here we will focus on a "budget" Disaster Recovery plan that is mostly based on open-source software, because we wanted to challenge ourselves and see if we can achieve the same results with much smaller expenses.

The software that we are using for our Disaster Recovery strategy is open source, and even though most companies are reluctant to use open source software as Disaster Recovery strategy, our experience is quite positive - open source software is not any "less" secure or stable than most enterprise solutions. In addition to that, it offers more freedom to customize it for your organization's needs. One potential downside is that there won’t be any technical support or guarantee from a large enterprise, but truth be told, if you know what you are doing, these elements are unnecessary and not to mention your company would save a lot of money.

To give you a better insight into dealing with this particular problem, we need to say a few things about infrastructure where this kind of solution was implemented. Targeted infrastructure uses Kubernetes clusters on bare metal machines which gives us full control over our clusters, and production clusters have their own identical replica that is running in separate data centers which allows us to make an easy fail-over if there is any disaster scenario taking place on one of the locations.

Monitoring our systems and notifications in case of disaster is handled by a combination of software that collects metrics regarding our clusters and sends alerts to our company’s Slack channel, email, and even personal smartphones in some cases.

Metric collecting is handled by Prometheus, and Prometheus as a collector does a great job providing metrics to Grafana and Alertmanager. Grafana offers various options that you can use to monitor your infrastructure. Also, it allows you to create your custom dashboards.

For sending alerts and warnings, Alertmanager is one handy tool, and by using metrics collected by Prometheus and a set of custom-defined rules, it will let you know when you are in trouble.

Backups and Data migration

MinIO is the world's fastest object storage server, and a natural fit for companies looking for a consistent, performant, and scalable object store for their hybrid cloud strategies. Kubernetes-native by design, S3 compatible from inception, MinIO has more than 7.7M instances running in AWS, Azure, and GCP today - more than the rest of the private cloud combined. When added to millions of private cloud instances and extensive edge deployments - MinIO is the hybrid cloud leader. Simple, fast, reliable, and open source.

Velero is an open-source tool to safely backup and restore, perform disaster recovery, and migrate Kubernetes cluster resources and persistent volumes. Also, it reduces time to recovery in case of infrastructure loss, data corruption, and/or service outages.

Combining MinIO and Velero allows you to sync data between clusters as fast as possible.

Deployment replication

GitLab CI/CD pipeline allows concurrency between deployments, and with the right configuration every pipeline will deploy your applications on multiple clusters at the same time.

Solution

This kind of plan requires minimal human intervention if things go downhill for whatever reason, and as mentioned, the whole strategy is built around reliable, remarkable open-source software.

The diagram below can give you a raw insight into the solution, one live cluster and another replica of the same cluster waiting in standby, just in case.

Gitlab CI/CD deploys the app to the production cluster, Velero takes a backup of stateful data (databases) and stores it on production MinIO cluster, that data is replicated to DR MinIO instance and is then restored using Velero to standby cluster in DR site. You can schedule the Velero backup, MinIO replication, and Velero restore actions according to your RPO/RTO parameters. Since we are using BGP to transfer our public IPs, no further steps are needed. If you don't have that option, you can just change your public DNS records.

A diagram of Kubernetes disaster recovery plan

Conclusion

In order to comply with the ever changing demands of the business world, most companies take data security seriously to make sure nothing leaks outside of the organization and they don’t lose credibility. However, while a damaged reputation is something a company can rebuild, loss of data at an unexpected moment can put a stop to the entire business, sometimes even for good.

This is why preparing for the unexpected by creating a Disaster Recovery plan is vital to company’s wellbeing - you need to ensure that whatever happens, your business will quickly recover without any significant consequences.

Async/await operations - a new way of writing asynchronous code

Igor Cekelis — Mon, 09 Aug 2021 11:38:54 +0000

Async/await mechanism is the new way to write asynchronous code that you traditionally write with a completion handler (known as closure). Asynchronous functions allow asynchronous code to be written as if it were synchronous. For demonstration purposes, we used Xcode 13 beta with the Swift 5.5 version.

A new way of writing asynchronous code

Five main problems that async/await could solve are:

Pyramid of doom
Better error handling
Conditional execution of the asynchronous function
Forgot or incorrectly call the callback
Eliminating design and performance issue of synchronous API because of callbacks API awkwardness

Async await provides the mechanism for us to run asynchronous and concurrent functions in a sequential way which helps us make our code easier to read, maintain and scale, which are very important parameters in software development.

Async/await vs. completion handlers

First, we are going to show you how you would traditionally write functions with completion handlers. Everyone is familiar with this approach.

Don't get us wrong, this isn't a bad way of writing functions with completion handlers. We've been doing it like this for years on our projects; completion handlers are commonly used in Swift code to allow us to send back values after a function returns.

Still, once you have many asynchronous operations that are nested, it's not really easy for the Swift compiler to check if there is anything weird going on in terms of any bugs introduced into your code.

For cleaner code, we made a new Swift file called NetworkManager.swift, and in this file, we are handling our requests. Our User is a struct with values of name, email, and username.

struct User: Codable {
    let name: String
    let email: String
    let username: String
}

// MARK: fetch users with completion handler
func fetchUsersFirstExample(completion: @escaping (Result<[User], NetworkingError>) -> Void) {

    let usersURL = URL(string: Constants.url)

    guard let url = usersURL else {

        completion(.failure(.invalidURL))
        return
    }

    let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
        if let _ = error {
            completion(.failure(.unableToComplete))
        }

        guard let response = response as? HTTPURLResponse, response.statusCode == 200 else {
            completion(.failure(.invalidResponse))
            return
        }

        guard let data = data else {
            completion(.failure(.invalidData))
            return
        }

        do {
            let users = try JSONDecoder().decode([User].self, from: data)
            completion(.success(users))
        } catch {
            completion(.failure(.invalidData))
        }
    }
    task.resume()
}

As you can see, a lot is going on here; it is pretty hard to debug, there is a lot of error handling for "just" fetching user data, and we ended up with a bunch of lines of code. Most programmers needed to write a couple of these in projects, which gets very repetitive and ugly.

In our ViewController.swift file, we decided to show data inside a table view, so we made one and conformed to its data source. Once we decided to call this function, it would look something like this:

//MARK: 1. example -> with completion handlers
private var users = [User]()

private func getUsersFirstExample() {
    NetworkManager.shared.fetchUsersFirstExample { [weak self] result in
        guard let weakself = self else { return }

        switch result {
        case .success(let users):
            DispatchQueue.main.async {
                weakself.users = users
                weakself.tableView.reloadData()
            }
        case .failure(let error):
            print(error)
        }
    }
}

Defining and calling an asynchronous function

Now, on the other hand, here is how you would write a function with async/await, which is doing everything like the example above:

//MARK: fetch users with async/await using Result type
func fetchUsersSecondExample() async -> Result<[User], NetworkingError> {
    let usersURL = URL(string: Constants.url)

    guard let url = usersURL else {
        return .failure(.invalidURL)
    }

    do {
        let (data, _) = try await URLSession.shared.data(from: url)
        let users = try JSONDecoder().decode([User].self, from: data)

        return .success(users)
    }
    catch {
        return .failure(.invalidData)
    }
}

An asynchronous function is a special kind of function that can be suspended while it's partway through execution. This is the opposite of synchronous functions, which either run to completion, throw an error, or never return.

We are using two keywords, async and await.

We use the async keyword to tell the compiler when a piece of code is asynchronous. And with await keyword, we tell our compiler that it has the option of suspending function until data or error is returned; and to indicate where the function might unblock the thread, similar to other languages such as C# and Javascript.

Swift APIs, like URLSession, are also asynchronous.

But then, how do we call an async marked function from within a context that’s not itself asynchronous, such as a UIKit-based view controller?

What we’ll need to do is to wrap our call in an async closure, which in turn will create a task within which we can perform our asynchronous calls - like this:

//MARK: 2. example -> async/await with Result type
private func getUsersSecondExample() {
    async {
        let result = await NetworkManager.shared.fetchUsersSecondExample()

        switch result {
        case .success(let users):
            DispatchQueue.main.async {
                self.users = users
                self.tableView.reloadData()
            }
        case .failure(let error):
            print(error)
        }
    }
}

Result type was introduced in Swift 5.0, and its benefits are to improve completion handlers.

They become less important now that async/await is introduced in Swift 5.5, of course.

However, it's not useless (as you can see in the example above) since it's still the best way to store results.

Here is one more example of usage async/await without Result type, which is even cleaner approach:

//MARK: fetch users with async/await third example, without Result type
func fetchUsersThirdExample() async throws -> [User]{
    let usersURL = URL(string: Constants.url)
    guard let url = usersURL else { return [] }
    let (data, _) = try await URLSession.shared.data(from: url)
    let users = try JSONDecoder().decode([User].self, from: data)
    return users
}

Making a call of an async function in our ViewController.swift file:

override func viewDidLoad() {
    super.viewDidLoad()
    configureTableView()
    async {
        let users = await getUsersThirdExample()
        guard let users = users else { return }
        self.users = users
        self.tableView.reloadData()
    }
}

//MARK: 3. example -> async/await without Result type
private func getUsersThirdExample() async -> [User]? {
    do {
        let result = try await NetworkManager.shared.fetchUsersThirdExample()
        return result
    } catch {
        // handle errors
    }
    return nil
}

One more really good thing about the above example is that we can use Swift's default error handling with do, try, catch, even when asynchronous calls are performed.

As you can see in both our examples, there is no weak self capturing to avoid retain cycles, and there is no need to update UI on the main thread since we have the main actor (@MainActor) who is taking care of that (the main actor is accessible only if you are using Swift's new concurrency pattern).

And voilà, here is our result:

Conclusion

Async/await is just a part of Swift Concurrency options; Apple's SDKs are starting to make heavy use of them. This offers a new way to write asynchronous code in Swift; the only drawback is that it's not compatible with older operating system versions, and we'll still need to interact with other code that doesn't yet use async/await. We hope this article will help you better understand asynchronous programming in Swift.

If you want to learn more about this pattern, or about everything that was introduced with Swift concurrency, visit Apple's official website and read their documentation. Additionally, you can check out these useful links:

And if you are interested in source code, visit my GitHub account.

You do Yew: Rust frontend framework that compiles into WebAssembly

Igor Cekelis — Wed, 28 Jul 2021 11:20:17 +0000

The big question is… what is Yew? First of all, it’s a Rust framework, so it must be a tool for developing backend projects. Not at all! Yew is a frontend framework! It uses Rust language and it compiles into WebAssembly so the application runs in the browser.

Rust and WebAssembly

The main point of this post is Yew, but as it uses Rust and WebAssembly, a few words about them won’t hurt.

If you don’t know about Rust, and want to get familiar with it, I suggest reading our blog post about Rust programming language and The Rust Book. The book contains a lot of information and examples to get you started.

I will not bug you with big words describing Rust, let’s just say it’s a system programming language that generates machine code with full control of memory use, like C/C++, but safe. “Safe” meaning that it is hard to mess up because the compiler checks every try to access memory and this is what makes it excellent. All in all, when writing “normal” applications, you can use your programming skills in combination with Rust’s unique features (described in the Book), and I think you will be satisfied with the development processes and the result.

WebAssembly (Wasm) can be referred to as the Assembly, but for the Web. It’s a low-level language running web applications at native-like performance. Rust can compile (also C/C++) into Wasm which enables Rust applications to run on the Web.

It is efficient and fast, safe, open and debuggable, and part of the open web platform. For more info on Wasm I will refer you to check out their docs.

Yew

As I said, Yew is a Rust frontend framework for creating multi-threaded web applications with Wasm but what I haven’t mentioned are Yew’s main features.

It is a component-based framework, making it easy to build UI, especially for developers who’ve used frameworks like React (I haven’t but it didn’t take me long to learn it). DOM API calls are expensive in this situation, and we are going to have a lot of them. Luckily, Yew minimizes those and offloads processes to the background so it achieves great performance. Wasm isn’t here to replace Javascript, it’s here to empower it. Javascript interoperability allows you to integrate your Yew app with Javascript applications.

If you like what I wrote so far, you can continue reading my Yew App Walkthrough, and if not, there are alternatives like Percy and Seed.

Simple Yew application walkthrough

The time has come for us to stop talking and start doing. In this walkthrough, I am going to try to give you a brief, but clear overview of Yew projects and concepts on the example of a simple Todo list manager application.

Setting up

You need to install some tools to get started. First of all, you need Rust and Rust’s package manager Cargo and for that, follow the Book mentioned in the introduction.

Then, it’s time to choose the Wasm build tool. There are a number of them and I used the wasm-pack which is actively maintained and easy to use. These tools are used to package a Wasm file.

Install the tool with cargo:

cargo install wasm-pack

Now we can build our app, but we won’t because we don’t have an application yet. Here we specify the target, build name, and the output directory.

wasm-pack build --target web --out-name wasm --out-dir ./static

We will also need a server that will host our application. For that, you can use any server of your choosing. I used miniserve. Here we specify the hosted directory which is the output directory from our build command and tell the server to look for the index page on start.

cargo install miniserve
miniserve ./static --index index.html

We are all set now with the tooling. Let’s get to the application.

Creating a project

Using cargo, create a new Rust library and move to the created folder. It’s important to create a library, not a binary.

cargo new --lib todo_app_yew && cd todo-app_yew

Now, we need to depend on yew and wasm-bindgen. Go to your cargo.toml file and add the dependencies. Also you need to specify c rate-type, which is required by the wasm-pack we chose earlier.

[package]
name = "todo_app_yew"
version = "0.1.0"
authors = ["Robert Sudec <robert.sudec@barrage.net>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
yew = { version="0.18"}
wasm-bindgen = "0.2.67"

Components

Components in Yew and other component-based frameworks are basic elements we use. Each component has its own state and its own way of presenting the state to the DOM. We can create a component by implementing the Component trait on a struct. Our Todo application will start with a root component called Model. We need a struct to keep state, and it will hold a link to itself, but also contain other information on other components (e.g. parent component).

struct Model {
    link: ComponentLink<Self>,
}

Implementing the Component trait, we actually make it a component and implement the component lifecycle. Lifecycle consists of 6 methods, and only 4 of them are used (mostly). These are create, update, change and view. Create method is called on initialization of the component and we receive Properties and ComponentLink from the parent component. Properties are optional, and we will talk about them when we use it in the application. View method allows us to attach HTML to the component which will then render according to it. Let’s also save other methods for later.


impl Component for Model {
    type Message = ();
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        html! {
        }
    }
}

Then there’s the run_app function. We bind the start of the application using the annotation to this function and we simply mount the Model component.

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}

So now if we write some HTML in the view method and run the app, it should display in the browser. But, for this walkthrough to not be exhausting, let’s think ahead and start on Routing, and we’ll explain stuff as we go.

Try to build the app using the command from the Setting up section. You should get a new folder called static with your compiled files. Add the index.html file with the following content.

<!doctype html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>Yew Todo App</title>
       <script type="module">
           import init from "./wasm.js"
           init()
       </script>
   </head>
   <body ></body>
</html>

Let’s make a Homecomponent first. Make a new file, copy the template above, rename it to Home, and add some HTML, like a Welcome message.

Now, the html! macro can take one root html element, so if you want to have a title and a RouterAnchor, you can wrap them in one div or you can use <> </> tags. Literals need to be wrapped in curly braces and quotes, and if you’re writing Rust code, then wrap it in curly braces.

html! {
    <>
        <h2> {“Welcome”} </h2>
        <p> {“This is an app made in You do Yew walkthrough”} </p>
    </>      
}

Router

We want our application to render different components based on the route (Route is a string representing everything after the domain in the URL). So, for now we want to display our Home component when the route is “ / “.

Add the yew-router to the dependencies.

yew-router = "0.15.0"

We need an enum that contains all possible routes for the application. You can place it anywhere

maybe it’s best to put it in a folder called routes or similar.

Here, you need to derive Switch and annotate the route like presented below.

use yew_router::Switch;

use yew_router::Switch;

#[derive(Switch, Debug, Clone)]
pub enum AppRoute {
   #[to = "/"]
   Home,
}

We have defined one possible route. Now we need to handle it in the root component. We need to add some state to the Model struct

pub struct Model {
   link: ComponentLink<Self>,
   route_service: RouteService<()>,
   route: Route<()>,
}

In the create method, we can initialize the new attributes and pass them in. We create a new RouteService and then we can call get_route to actually get one.

let route_service : RouteService<()> = RouteService::new();
let route = route_service.get_route();

Self {
    link,
    route_service,
    route,
}

We got the current route, and it can only be “/” because if you specify a route manually through URL, you’re going to get 404 Not found. When you enter the URL manually, the server looks for that file and it will never find it. You need to think of these routes as internal, and you can only change the route through the application. We will get to that soon.

Now, let’s show the Home component. In the view method of the root component in the html! tags, we are going to add a match clause. We take the value of self.route and match it across all routes defined in the AppRoute enum. When there’s a match, we provide the wanted component. Now you also see how to call a component, similar to HTML tags.

html! {
    {
       match AppRoute::switch(self.route.clone()){
           Some(AppRoute::Home) => html! {<Home/>},
           None => html! {}
       }
    }
}

If you think about it, we get the route from self.route, but how to change it from inside of other components. We will prepare it now for future use and while we are here also explain some other concepts.

Message, update(), Callback, RouteAgent

Messages are used to invoke some changes in state. They are like events. You fire an event, the component processes it, making changes to state according to the message, and rerendering if necessary.

First, we need to define all possible messages in an enum. The suggested practice is that the enum is called Msg.

Create the enum in the root component. There will be only one event in the root because it only handles routing. One type of message is called RouteChanged and expects a Route contained in it. The message name is your choice.

pub enum Msg {
   RouteChanged(Route<()>),
}

In the impl Component, we found 2 type definitions, for Message and Properties. Because we had none of them, we didn’t use them. Now we need to assign the type of Message to Msg.

Change this

type Message = ();

to this.

type Message = Msg;

Until now we didn’t use the update method because we never made any changes to the state. We see that this method accepts a mutable reference to self, meaning we can actually mutate the state, as opposed to the view method, and a Message of our type. It returns ShouldRender which is a bool. If returned true, the component rerenders. Inside we match the accepted msg and do changes based on each msg.

What is happening here is that the component gets a new message RouteChangedcontaining a Route(), and then the update function is called. Through the route_service we set the new route and mutate the self.route to point to a new (now current) route. Lastly, we return true so the component renders other components based on the route.

match msg {
    Msg::RouteChanged(route) => { 
        self.route_service.set_route(&route.route, ());
        self.route = route
    },
}
true

We are almost done - now what we need is a way to receive messages from the other components. Let’s add a property to the Model struct:

router_agent: Box<dyn Bridge<RouteAgent>>

and in the create method, also initialize the router_agent:

let router_agent = RouteAgent::bridge(link.callback(Msg::RouteChanged));

and of course, pass it to the Self.

Let’s try to explain what we’ve done here. RouteAgent owns a RouteService so it can react when route changes from the application, or from the browser. We are using the link to register a callback. A callback is a function that will be called sometime in the future. That function will then fire the event (send a message) RouteChanged and the component will handle it accordingly.

To test this, we need another component to navigate to. Create a TodoList component that displays a title. We are going to use that component to send HTTP requests later.

Add a route to the AppRouter where we define all possible routes. Important note here, the matching starts at the top, so you want the most specific routes at the top and the most generic at the bottom. Usually the specific route contains the generic one in itself so if you have the generic one at the top, it will match that one even though you’re trying to navigate to some specific route.

#[to = "/lists"]
   TodoLists,
#[to = "/"]
   Home,

In the root component’s view method, add the new route.

Some(AppRoute::TodoLists) => html! {<TodoList/>},
Some(AppRoute::Home) => html! {<Home/>},
None => html! {}

Only thing left to do is create a clickable element to navigate to the TodoList component. Add the RouterAnchor in the Home component’s view method. It changes the route so the callback in the root component will execute and rerender the page.

<RouterAnchor<AppRoute> route=AppRoute::TodoLists>
        <h6>{"Go to my TodoList component!"}</h6>
</RouterAnchor<AppRoute>>

Done! This should now work and we are off to connecting a component to a backend with API calls.

HTTP Requests

You would probably want to send HTTP requests and receive responses if you’re building a web application. Now, I have my own backend API for this application. Since it is not public, I created a simplified mock API just for this.

Let’s get started. We are going to use the help of some dependencies. Add them to your cargo.toml. Serde and serde_derive are used for (de)serialization, yewtil helps us with handling HTTP requests, anyhow helps with error handling.

yewtil = { git = "https://github.com/yewstack/yew", features = ["fetch"] }
serde = {version = "1.0.125", features = ["derive"]}
serde_derive = "1.0.126"
anyhow = "1.0.40"

To the TodoItem component add two more attributes. The apiattribute is a Fetch wrapper that contains the request and the response and with that we can track the state of our API call. The fetch_task is an Option, as there currently may or may not be a request to fetch. We will create the TodoList type later, this will hold the data from the HTTP response.

api: Fetch<Request<Vec<TodoListApi>>, Vec<TodoListApi>>,
fetch_task: Option<FetchTask>,

On create, set them as Default and None respectively.

api: Default::default(),
fetch_task: None,

This component will only be responsible for showing the data, we will have 2 possible messages. The first one is SetApiFetchState(FetchAction) that will update our component’s state according to the FetchAction. These can be NotFetching, Fetching, Fetched, Failed. The 2nd message is GetApi and it sends the request to get data from the API.

pub enum Msg {
   SetApiFetchState(FetchAction<Vec<TodoListApi>>),
   GetApi,
}

Remember to assign the Msg to type!

Let’s handle the FetchState first. In the update method, as always, match the msg. Fetch will automatically send these messages because it contains both the request and the response.

fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
       match msg {
           Msg::SetApiFetchState(fetch_state) => {
               self.api.apply(fetch_state);
               true
           }
           Msg::GetApi => {
           }
       }
}

Fetch gives us information about its state so we can render accordingly. Let’s go into the view method and we can then match the state and show different variations of the component. The most important one is Fetched(response), in this one we can render all our todo lists. In the Fetching state we can maybe show a loading icon, in the Failedstate we can show an error. This is an easy way to handle API calls, but for now we will implement only the Fetched.

html! {
           <>
              <h3> {"My lists"} </h3>
              {
                 match self.api.as_ref().state() {
                    yewtil::fetch::FetchState::NotFetching(_) => {
                       html! {}
                    }
                    yewtil::fetch::FetchState::Fetching(_) => {
                       html! {}
                    }
                    yewtil::fetch::FetchState::Fetched(response) => {
                       html! {}
                    }
                    yewtil::fetch::FetchState::Failed(_, _) => {
                       html! {}
                    }
               }
          </>
}

We can’t do anything with this yet, so let’s implement the request. It would probably be good to separate this, create a new file api.rs. We first need a type to deserialize into, something already used, TodoListApi. It holds an id, and a title, both of type String. You build these types according to the responses of the backend, the response from the mock api will look like this:

[{"id":"1","title":"title 1"},{"id":"2","title":"title 2"},{"id":"3","title":"title 3"},{"id":"4","title":"title 4"},{"id":"5","title":"title 5"},{"id":"6","title":"title 6"},{"id":"7","title":"title 7"},{"id":"8","title":"title 8"},{"id":"9","title":"title 9"},{"id":"10","title":"title 10"}]

If we’re reading this response in code, it indeed is a vector of TodoListApi objects. Here, we can also make the code clear because building requests in the update function can be messy.

#[derive(Debug, Default, Clone, Serialize, Deserialize, PartialEq)]
pub struct TodoListApi {
   pub id: String,
   pub title: String,
}

pub struct RequestHelper {}

static BASE_URL: &str = "https://60a7bb898532520017ae4d37.mockapi.io/todo_lists";

impl RequestHelper {
   pub fn get() -> Request<Nothing> {
       Request::get(BASE_URL)
           .body(Nothing)
           .expect("Cannot build url")
   }

   pub fn delete(body: &TodoListApi) -> Request<Nothing> {
       Request::delete(format!("{}/{}", BASE_URL, body.id))
           .body(Nothing)
           .expect("Error deleting")
   }
}

This RequestHelper just makes it easier to read, nothing special. Requests are GET and DELETE, where GET will get us all of the lists, and DELETE will delete one list that we provide an id for.

With that ready, we can implement the handler for GetApi message. Switch to the update function and let’s call that API already.

First, we will send a message to apply the new state - Fetching. Get the request from our helper we wrote earlier and create a callback which will execute once when the response arrives. We will then try to create our Vec<TodoListApi> from JSON and match that data to send the right message.

Remember, I explained the callback function, it is not executed just yet. Now, using FetchService, we try to fetch while providing the request and the callback we defined. We will register the task to our state.

Msg::GetApi => {           
     self.link                                                                                 .send_message(Msg::SetApiFetchState(FetchAction::Fetching));

     let request = RequestHelper::get();
     let callback = self.link.callback(
        |res: Response<Json<Result<Vec<TodoListApi>, anyhow::Error>>>| {
              let Json(data) = res.into_body();
              match data {
                  Ok(d) => Msg::SetApiFetchState(FetchAction::Fetched(d)),
                  Err(_) => Msg::SetApiFetchState(FetchAction::NotFetching),
              }
         },
     );
     let task = FetchService::fetch(request, callback).unwrap();
     self.fetch_task = Some(task);
     true
}

Displaying the response in the view method. We want, for each of the TodoListApi objects from the response, to display their id and title respectively.

html! {
   <>
       <h3> {"My lists"} </h3>
       {
          match self.api.as_ref().state() {
              yewtil::fetch::FetchState::NotFetching(_) => {
                  html! {}
              }
              yewtil::fetch::FetchState::Fetching(_) => {
                  html! {}
              }
              yewtil::fetch::FetchState::Fetched(response) => {
                  html! {
                     response.iter().map(
                        |todo_list: &TodoListApi| {
                            html! {
                               <>
                           <h3>{&todo_list.id}{“|”} {&todo_list.title}</h3>
                               </> 
                            }                          
                        }
                     ).collect::<Html>()

                 }
              }
              yewtil::fetch::FetchState::Failed(_, _) => {
                  html!{}}
              }
         }
    </>
}

Rendered

Now, if you navigate to the TodoList component, you will not see anything because we never sent the GetApi message so the request was never sent and the response never arrived.

There is a function in the component lifecycle that I haven’t mentioned - the rendered function. It is called after the viewfunction is processed. It gives us a helpful first_render value which we can use to, guess what, fetch the API when the component is loaded for the first time. We can do it by calling the update function.

fn rendered(&mut self, _first_render: bool) {
       if _first_render {
           self.update(Msg::GetApi);
       }
   }

Now it should try and fetch the data and hopefully present it to you as we described.

Properties

Until now, we didn’t have use for them, but components can use Properties to communicate. We are going to create a new component, whose purpose is to delete a list. That means every TodoList component should contain a DeleteTodoList component. For deleting, we want to know the id of the element we are deleting, so the DeleteTodoList component needs to have a binding id. We can solve this problem by using properties.

For starters, create a new component called DeleteTodoList. Because it is also calling the API, it is similar to the TodoList component. The DELETE request to the API, if successful, will return that same element we are deleting. When we were getting all elements, we expected a Vec<TodoList>, and now it will be a single TodoList. Msg is also similar, DeleteApi instead of GetApi, just to be clear. This component will show a button that sends the DeleteApi Msg when clicked on.

pub struct DeleteTodoList {
   api: Fetch<Request<TodoList>, TodoList>,
   fetch_task: Option<FetchTask>,
   link: ComponentLink<Self>,
}
pub enum Msg {
   SetApiFetchState(FetchAction<TodoList>),
   DeleteApi,
}
impl Component for DeleteTodoList {
   type Message = Msg;
   type Properties = ();

   fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
       DeleteTodoListComponent {
           api: Default::default(),
           fetch_task: None,
           link,
       }
   }

   fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
   }

   fn change(&mut self, _props: Self::Properties) -> yew::ShouldRender {
       false
   }

   fn view(&self) -> yew::Html {
       match self.api.as_ref().state() {
           yewtil::fetch::FetchState::NotFetching(_) => {
               html! {

                   <button type="button" onclick=self.link.callback(|_|     Msg::DeleteApi)>
                       { "Delete" }
                   </button>
               }
           }
           yewtil::fetch::FetchState::Fetching(_) => {
               html! {}
           }
           yewtil::fetch::FetchState::Fetched(_response) => {
               html! {}
           }
           yewtil::fetch::FetchState::Failed(_, _) => {
               html! {}
           }
       }
   }

   fn rendered(&mut self, _first_render: bool) {}

   fn destroy(&mut self) {}
}

We already created the RequestHelper for deleting the element, and it takes a TodoList type, but we don’t have access to it in the DeleteTodoList component. We are going to use Properties to forward the TodoList to this component.

First, we need a new type with a (suggested) name, Props. Props contain all types that we are sending to the child component. In this case, it will be a single TodoList. Also, this struct needs to derive Properties and Clone traits.

#[derive(Properties, Clone)]
pub struct Props {
   pub todo_list: TodoList,
}

Add the props to the DeleteTodoList struct so we can access given properties and assign the type (as we did with messages) in the impl Component.

type Properties = Props;

The last step is to initialize the TodoList struct with props we got in the create method. Now we can access the props through self.props.

We need to modify the TodoList components’ view method on the Fetched event, and for each TodoList we get from the API, show a DeleteTodoList component while passing itself. Properties are sent like HTML attributes and need to be named the same as you defined in Props.

<MyComponent prop1=value1 prop2=value2 … />

yewtil::fetch::FetchState::Fetched(response) => {
    html! {
        response.iter().map(
            |todo_list: &TodoList| {
                 html! {
                     <>
                        <h3>{todo_list.id}</h3>
                        <h5>{&todo_list.title}</h5>
                        <DeleteTodoList todo_list=todo_list.clone()/>
                     </> 
                 }                          
            }
        ).collect()
   }
}

Let’s try to call the API and delete one element. We need to implement the update method. Basically the same as the GetApi from above, but with a few tweaks. We are building the delete request passing the todo_list from props. That should now draw buttons for every TodoList, but when clicked on, nothing happens. I mean, it does, in the background, but it does not refresh our list with this single element removed. If you reload, then it should be gone.

fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
       match msg {
           Msg::SetApiFetchState(fetch_state) => {
               self.api.apply(fetch_state);
               true
           }
           Msg::DeleteApi => {
               self.link.send_message(
                   Msg::SetApiFetchState(FetchAction::Fetching)
               );
               let request = RequestHelper::delete(&self.props.todo_list);
               let callback = self.link.callback(
                   |res: Response<Json<Result<TodoListApi, anyhow::Error>>>| {
                       let Json(data) = res.into_body();
                       match data {
                           Ok(d) =>                                     Msg::SetApiFetchState(FetchAction::Fetched(d)),
                           Err(_) => Msg::SetApiFetchState(FetchAction::NotFetching),
                       }
                   },
               );

               let task = FetchService::fetch(request, callback).unwrap();
               self.fetch_task = Some(task);
               true
           }
       }
   }

How do we approach this problem? We need to refresh the parent component (TodoList) when Delete gets executed successfully, and we do it by sending the GetApi message. At this moment, we can’t. The solution I used is to create a callback function in the parent that will send the message, then forward that callback to the child through properties so we can run that callback function when the delete request is done.

Go to the TodoList components’ view method, and there we can register a callback which will send the GetApi message.

let refresh_csllbsck = self.link.callback(|_| Msg::GetApi);

In DeleteTodoList, Props add the new property of type Callback<Msg>, but the Msg here is the Msg type of the parent, so make sure you use that correctly.

pub refresh: Callback<super::todo_list::Msg>

Also, we will use another message Msg::Deleted to handle the refreshing of the parent component, so add that as well. Again, the Msg we pass is the Msg of the parent.

Deleted(super::todo_list::Msg)

For the update method, handling the Msg::Deleted is as simple as it gets. We only emit() the callback from our props. We are returning false, as we don’t need this component to refresh because the parent component is going to refresh and with that, create new child components.

Msg::Deleted(msg) => {
               self.props.refresh.emit(msg);
               false
           }

Messages are now ready, and we only need to send the DeleteAPI message when the delete request is successfully executed. We have the request state handling in the view method, so maybe this is where we can invoke the message DeleteAPI when the state is Fetched? Not really, because view gets a reference to self and the update method needs a mutable reference to self and that does not work. We also have the information about fetching state when handling the SetApiFetchState message and there we can call the update method.

So, add the following code in the SetApiFetchStatehandler. Send a Msg::Deleted, but containing the right parent message, GetApi. With this, when we delete an element we send a message to the parent through callback functions and make the parent reload itself.

match fetch_state {
    FetchAction::NotFetching => {}
    FetchAction::Fetching => {}
    FetchAction::Fetched(_) => {
           self.update(Msg::Deleted(super::todo_list::Msg::GetApi));
    }
    FetchAction::Failed(_) => {}
};

Now, don’t forget to pass the callback to the child element!

<DeleteTodoList todo_list=todo_list.clone()    
refresh=refresh_callback.clone()/>

Try it out, it may look weird based on the response time, but it does work!

Finishing up

You did it, you made a simple application that covers all basic concepts of Yew. Now you can try to make something out of this application, you can apply styling to make it prettier, you can expand it to do more like creating new lists, add items to list, check items as done… You could try to make your own REST API for this, rather than using mockapi.io, basically whatever comes to your mind.

This was a simplified example of how everything works. You can access my application on github.com/barrage which uses a custom backend and more features. Check that repository for reference if you get stuck with something.

If you want to learn more about Rust and Yew, or you have a project you would like to develop, don't hesitate to contact us.

Rust programming language: what is it & how to learn it?

Igor Cekelis — Mon, 10 May 2021 11:58:16 +0000

Rust is a low-level systems programming language. While that might make Rust seem limited, it can be used to build many different types of applications. Rust is a tool, and tools are chosen depending on what you want to build.

First of all, what is Rust?

As mentioned before, Rust is an open-source systems programming language. Rust aims to be memory-safe, thread-safe, fast, and secure. To achieve this, it introduces some new concepts, like ownership, borrowing, and lifetimes, which are the main things that keep Rust memory safe. These concepts might seem foreign if you have not seen them explicitly as you will in Rust.

Thanks to these concepts, many errors in Rust are compile-time errors rather than runtime errors.

Rust is a statically typed language, unlike JS, Python, Ruby, or Objective- C. As your code compiles, you will get compile type checking, and the compiler will let you know if you have any unhandled errors. Rather than re-running your application and trying to replicate an error that happened, you can spend more time writing the correct code.

Let’s talk about ownership. In Rust, the compiler keeps track of which data “lives” in which scope or context. Because of this, you do not have to keep track of dangling pointers or references to parts of memory, which, if left unchecked, could leave you with segmentation faults or memory leaks.

For example, in C, you have a function that returns a reference/pointer to some data. Then you call another function on that same reference, the code works, and everything seems fine, but little do you know the first pointer (returned from the function) has now been freed. This leaves you with a dangling pointer, and if you are not mindful, you could accidentally try to use that pointer again, and you will end up with some unexpected behavior.

The Rust compiler keeps track of what function or what context holds what data at any given moment, so something like this most likely would not happen. At least not so easily, as the Rust compiler will let you know during compile-time that you have an error that needs to be handled.

This is where ownership comes in; as mentioned before, a context or function can hold or own data, meaning the data lives in the function’s scope. Rust will not let us access that data outside of that scope unless we explicitly say so. And even then, we need to explicitly tell the compiler how we want to use that data. This is called borrowing in Rust, and that’s what makes Rust memory safe. Because all data lives in its own scope/context, once we move out of it, Rust will look at all of the data inside that scope and deallocate it.

Here is an example of returning a reference to a string (&str) from a function and using it in another (main) function.

fn hello_v1() -> & str{
    "Hello, world!"
}

fn main() -> (){
    let message = hello_v1();
    println!("{}",message);
}

The example above will not work because the “Hello, world!” string is deallocated after the “hello_v1 function is finished, so we cannot print it. Also, the error we get clearly states that we are missing lifetime parameters, so let's add them.

fn hello_v2<'a>() -> &'a str{
    "Hello, world!"
}

fn main() -> (){
    let message = hello_v2();
    println!("{}",message);
}

Once we change our function and add the lifetime parameters, the compiler knows that we need that string to live outside of that function, so we get the message “Hello, world!” in our console.

Rust does not have an automatic garbage collector like some other languages, Java or Python, for example.

We don’t have to manually free or deallocate any memory. If we want data to live outside the function it was created in, we must tell the compiler explicitly that we do not want this data deallocated.

This might seem complicated at first, but you won't even notice it once you start writing the code.

What is Rust used for?

More than a few projects are created using Rust, and some of the well known are:

Mozilla built its browser engine called Servo.
Figma’s real-time syncing server, which is used to edit all Figma documents
An open-source virtualization technology called Firecracker is mostly being written in Rust.
NPM also uses this language to alleviate some of its CPU-bound bottlenecks.

Rust vs. Go

The most obvious difference between Rust and GoLang is simplicity. Becoming productive in Go takes much less time than it does in Rust. However, simplicity comes at a cost as Go lacks some Rust features like generics and functional programming.

Another difference is in memory management. Go has a garbage collector, while Rust’s memory management, as explained above, comes in the form of ownership and borrowing. While this might give an edge to Rust in performance, speed and flexibility, it can also be a setback in some cases.

Concurrency in programming, simply put, is the ability to execute more than one function or task simultaneously. Go has great support for concurrency in the form of Goroutines and channels.

While both of these features are also available in Rust (either using the standard library or third-party crates like Tokio), the main difference is, once again, simplicity. Writing concurrent applications in Go is easier than in Rust. Still, Rust, on the other hand, offers compile-time checking, being able to catch thread-safety bugs even before your program runs.

Considering compilation time, Go blows Rust out of the water, as the Go compiler does not have to run all the optimization checks the Rust compiler does. One thing they have in common is that they both produce a static binary as an output, which means that in order to run the compiled program, you don't need an interpreter or a virtual machine. Go is very well suited to build services and simple applications. For example, a web REST API was built to replace Java and C#.

Another key difference is that Go does not support macros, while Rust has a very powerful macro system. Rust is a systems programming language; therefore, it's a very good fit when you need efficiency and performance. Rust is very well suited for performance-critical applications such as web browsers, databases, operating systems, or libraries that rely on heavy mathematical calculations.

This does not mean that you can’t use Rust to build a web application, as Rust has great support for building web APIs in the form of third-party crates.

Rust vs. C++

Both Rust and C++ are system programming languages, which means they can write low-level code like operating systems and firmware for microcontrollers. Compared to C, both languages offer a lot of abstractions that make it possible to go high-level and write game engines and web applications.

Another similarity is that neither of them uses a garbage collector to manage memory. This makes code more efficient and faster. If you have ever used C, you will know that managing memory yourself is hard and often results in undefined behaviors or segmentation faults.

For this reason, C++ introduced smart pointers to mitigate some memory-related bugs. However, they are still limited in the number of guarantees they offer. Rust goes a step further and introduces the borrow checker (ownership, borrowing), preventing most of the memory safety bugs.

Another selling point for Rust is its rich type system, making it possible to prevent data races at compile time. Rust introduces two traits, Sync and Send. A type is Send if it is safe to send to another thread, and a type is Sync if it is safe to share between threads. This makes sharing memory between threads possible, but the compiler will prevent you from doing so unsafely.

This example shows how sharing the number between threads would be unsafe as the RefCell type is not Sync.

fn main() {
    let mut number = std::cell::RefCell::new(2);

    let new_thread = std::thread::spawn(|| {
        let mut reference = number.borrow_mut();
        *reference = 5
    });

    let mut reference = number.borrow_mut();
    *reference = 5;

    new_thread.join();
}

We get this error:

let new_thread = std::thread::spawn(|| {
    |                      ^^^^^^^^^^^^^^^^^^ `RefCell<i32>` cannot be shared between threads safely

This also highlights how great the Rust compiler is as it tells us exactly what the problem is.

This is an example of how to share data between threads and changing it:

fn main() {
    use std::sync::{Arc, Mutex};
   let number = Arc::new(Mutex::new(5)); // this number is in the main thread

   { 
        let number_copy = Arc::clone(&number);
        let new_thread = std::thread::spawn(move || { // create a new thread and pass in the num
            let mut reference = number_copy.lock().unwrap();
            *reference *= 5 // here we multiply our starting number by 5
        });
        new_thread.join().unwrap();
    }
    println!("{}",number.lock().unwrap().clone()); // now the starting number is 25

    *number.lock().unwrap() *= 5; // we multiply the starting number by 5 again

     println!("{}",number.lock().unwrap()) // here the number is 125    
}

Another “version” of Rust called Unsafe Rust is more similar to C++. Working in Unsafe Rust is like telling the compiler to trust you and skip some of the checks it provides. You lose the safety guarantees a safe Rust compiler gives you, but you gain the ability to interact with the low-level aspects of the operating system/hardware. Those operations are inherently unsafe. Rust’s compiler is very conservative in its checks, meaning that it prefers to check and block a few valid programs/operations rather than allow many unchecked operations. This means that even if we know that some code is safe to execute, Rust might still not allow it unless we use unsafe Rust.

The areas where Rust definitely beats C++ and many other languages are package management and documentation. The official package manager in Rust is called Cargo. Using a package is as simple as adding a line to the cargo.toml, Rust's config file. Documentation for Rust is on a whole other level compared to any other language; everything can be found at doc.rust-lang.org.

Using an external library with C++ can be an issue, especially if you’re targeting multiple operating systems. There are some third-party options like Conan or Vcpkg, but they are far from being as standardized and easy to use as Cargo.

Of course, the C++ ecosystem is much larger. There are many more libraries for C++, so there might not be a library for something that already exists for C++. Rust does allow for FFI (foreign function interface), which allows you to interface with C code from Rust and thus interface with C++ libraries; however, this functionality is still limited for more complex cases.

Another similarity is macros. Both C++ and Rust allow them, but Rust’s macros are considered to be much more powerful and safer.

Rust has two types of macros: declarative and procedural.

Declarative macros are similar to ones in C++, but the key difference is that macros in Rust are hygienic in the sense that they can not interact with variables outside of their scope and cause any unwanted behavior.

Procedural macros are much more powerful and complex. They act more like functions: they accept code as an input, manipulate it, and return the enriched code as an output, all at compile time.

In conclusion, C++ is used far more often than Rust. That said, big companies like Microsoft, Google, and Apple are gradually integrating Rust with their products. C++ is not going away any time soon, thanks to its large ecosystem and legacy code built around it. Rust, however, is slowly beginning to be used as a system programming language.

What is the best way to learn Rust programming?

The most logical way to start learning Rust is to read the Rust book.
Depending on if you already have a specific application you want to build, you might want to skip the macros section and Unsafe Rust.
As always, start small. One web application I have built as a practice is a to-do list manager.
There are many useful sites where you can practice, like exercism.io or codewars.com.

As mentioned before, Rust has many useful third-party crates and tools; however, it already has a decent number of frameworks depending on what you want to do. Learning about them is the path you want to take next.

Rocket - a web framework built on the nightly version of Rust; it's boilerplate-free, type-safe, and has a large ecosystem. It also features rich, supporting cookies, streams, built-in templating, and JSON types.

Actix – a web framework also aimed to be more stable than a rocket; however, you will need to use third-party packages as it is newer and has less support.

Gotham – flexible web framework built on stable Rust, statically typed, and type-safe. Supports Async operations by using the Tokio project and Hyper.

Amethyst - is a game engine; it has a pool of features you might need to build a larger application. It also has better support for third party libraries.

Bevy - an open-source, newer, simple, data-driven game engine, heavily inspired by amethyst, supports real-time 2d rendering, 3d rendering, multiple platforms (Windows, Mac, Linux, and soon iOS and Android). Hot reload with fast compile times.

Druid - an experimental, data-oriented, Rust native UI toolkit. Based on Flutter and SwiftUI. Its current development is largely driven by its use in Runebender (a new font editor).

Top 8 Sass Mixins to Speed up Your Frontend Development Process

Igor Cekelis — Thu, 06 May 2021 12:20:20 +0000

One of the challenges in a developer's life is speeding up and automating the development process while keeping high-quality standards. A great solution for front-end developers using SASS is its mixin capability.

First of all, why is it good to use mixins, and how can it help you?

You should use mixins because it lets you make groups of CSS declarations that you want to reuse through your website.

Also, you can pass in values to make your mixin more flexible. Mixins are good because they make your code cleaner, and they are in the same file, so you can easily find them.

What is SASS (SCSS)?

SASS is an extension of CSS that allows you to use things like variables, nested rules, mixins, functions, etc. It makes your CSS cleaner and enables you to create style sheets faster. It is compatible with all versions of CSS. It is the most mature, stable, and powerful CSS extension in the world.

What is the difference between SCSS and SASS?

SASS is a pre-processor scripting language that compiles into CSS, while SCSS is the main syntax for the SASS, which builds on top of the existing CSS syntax.

SCSS example:

/* .scss file */
$background-color: #eeeeee;
$font-color: #333333;
$font-size: 24px;

/* Use the variables */
body {
     background-color: $background-color;
     color: $font-color;
     font-size: $font-size;
}

SASS example:

/* SASS */
$background-color: #eeeeee;
$font-color: #333333;

body
     color: $font-color
     background: $background-color

What is mixin in SASS?

Mixin is a directive that lets you create CSS code that is reused throughout the website. A mixin allows you to make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

In my opinion, mixins are the biggest feature because it allows you to write cleaner code.

How to use mixins?

You have to use @include followed by the name of the mixin and a semi-colon.

Example of usage

h1 {
     font-size: 14px;
     line-height: 22px;
     @include respond-above(md) {
          font-size: 18px;
          line-height: 26px;
          font-weight: 600;
     }
}

After compiling this SCSS code into CSS, our CSS file should look like this.

h1 {
     font-size: 14px;
     line-height: 22px;
     @media only screen and (min-width: 768px) {
          font-size: 18px;
          line-height: 26px;
          font-weight: 600;
     }
}

You can try our mixins in an online compiler.

And, the mixins...

1.Fluid typography

We use this mixin for responsive typography because we can avoid unnecessary media queries. It saves you a lot of time and minifies your CSS code.

You don’t have to worry about line-height because we’ve extended the mixin, and it automatically calculates your line-height.

@mixin fluid-font($min-width, $max-width, $min-font-size, $max-font-size) {
  $unit1: unit($min-width);
  $unit2: unit($max-width);
  $unit3: unit($min-font-size);
  $unit4: unit($max-font-size);
  @if $unit1 == $unit2 and $unit1 == $unit3 and $unit1 == $unit4 {
    & {
      font-size: $min-font-size;
      line-height: $min-font-size * 1.618;
      @media screen and (min-width: $min-width) {
        font-size: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
            ((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
        );
        line-height: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
            1.618 *
            ((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
        );
      }
      @media screen and (min-width: $max-width) {
        font-size: $max-font-size;
        line-height: $max-font-size * 1.618;
      }
    }
  }
}

Source: CSS-Tricks

Example of usage

The first two arguments are for screen resolutions from which the font will be responsive. The last two arguments are for the smallest and largest font size.

@include fluid-font(320px, 1024px, 22px, 55px);

2.Media queries for mobile-first design

This mixin is a time saver and simple for writing beautiful media queries. Name your breakpoints, so they are understood by all team members. You can use pixel values, but we have some default breakpoints setup that works great.

$breakpoints:  (
  "xs": 25em, // 400px
  "sm": 34em, // 544px
  "md": 48em, // 768px
  "lg": 60em, // 960px
  "xl": 80em, // 1280px
  "xxl": 90em // 1440px
);

@mixin respond-above($breakpoint) {
  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    // Write the media query.
    @media (min-width: $breakpoint-value) {
      @content;
    }
    // If the breakpoint doesn't exist in the map.
  }
  @else {
    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

Example of usage

h1 {
font-size: 14px;
line-height: 22px;
@include respond-above(md) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}

3. Text shortening

Adding an ellipsis to text is not simple. But when you have this great mixin, it’s quite simple, and it can come in handy when you’re working with a lot of text, especially on small screen resolutions.

// Default line-clamp is 1
@mixin text-shorten($numLines: 1) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  @supports (-webkit-line-clamp: $numLines) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: $numLines;
    -webkit-box-orient: vertical;
  }
}

Source: DeveloperDrive

Example of usage

If you want to add an ellipsis to text with multi-lines, you only need to pass one argument.

@include text-shorten(3);

For single line just leave it empty

@include text-shorten();

4.Placeholders

Usually, the problem with placeholders is that you have to write support for all browsers. Luckily this mixin sorts it out for you.

@content allows us to pass a content block into a mixin.

@mixin placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

Source: engage

Example of usage

input, 
textarea { 
    @include input-placeholder {
        color: #333333;
    }
}

5.Flexbox Toolkit

You should use this mixin if you are using flexbox way too much. If you have a problem knowing which one represents the main axis and which one the cross axis, this is a perfect mixin for you. It is pretty simple to use because the names are self-descriptive.

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-center-column {
  @include flex-center;
  flex-direction: column;
}

@mixin flex-center-vert {
  display: flex;
  align-items: center;
}

@mixin flex-center-horiz {
  display: flex;
  justify-content: center;
}

Example of usage

.main-container {
height: 100vh;
@include flex-center
.centered-item {
width: 100%;
max-width: 400px;
}
}

6.Z-index

Technically this is a pure function, not mixin. But I felt it’s worth being on the list because “z-index” is mostly misunderstood. Most developers use values like “999999”, just because they don’t really understand “z-index”.

It’s so easy to lose track of z-index values when working in several different files. We started using it because everything is stored in one place and is easy to edit.

// breakpoint var (first in array is the largest number, etc array.length)
$z-indexes: (
  "modal",
  "sidebar",
  “header”
);

@function z-index($name) {
  @if index($z-indexes, $name) {
    @return (length($z-indexes) - index($z-indexes, $name))+1;
  }
  @else {
    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
    @return null;
  }
}

Source: engage

Example of usage

.header {
z-index: z-index(‘header’);
}

7. Position

It is not hard to position an element with CSS, but you can save a lot of time and few lines of code. It allows you to specify the position of element and values for the four directions: top, right, bottom, left, and z-index in just one line.

@mixin position($position: absolute, $top: null, $right: null, $bottom: null, $left: null, $z-index: initial) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $z-index;
}

Example of usage

In this example we use our “z-index function”

.element-absolute {
  @include position(absolute, 60px, 0, 0, 0, z('modal'));
}

8.Responsive ratio

The responsive ratio is not supported for all browsers. We use this to lock the aspect ratio of an element or make it fit content if it exceeds the aspect ratio's boundaries.

@mixin ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}

Source: engage

Example of usage

img {
@include ratio(16, 9);
}

Step by step guide on how to set up Yubikey with GPG subkeys

Igor Cekelis — Wed, 14 Apr 2021 14:12:06 +0000

Everything around us is moving to digital. Our society is becoming more dependent upon online platforms, and it grows increasingly important that we embrace stronger online security measures.

Basic two-factor authentication using 6 digits and a mobile app is not enough to keep personal and professional accounts and services secured.

This method can be abused in a number of ways, like phishing attacks, third party login, and brute force.

Because of this, it’s essential for professionals to add another layer of protection, incorporating hardware devices like smart cards, and YubiKey is a popular choice for it. It allows your private key to be stored and accessed only when you need it to decrypt your data.

Up next is a simple and straightforward guide on generating GPG keys via your machine and transferring them to the security dongle YubiKey 4.

What is GPG?

GPG, or GNU Privacy Guard, is a public key cryptography implementation. This allows for the secure transmission of information between parties and can be used to verify that the origin of a message is genuine.

What is YubiKey?

The YubiKey is a hardware authentication device manufactured by Yubico that supports one-time passwords, public-key cryptography and authentication, and the Universal 2nd Factor and FIDO2 protocols developed by the FIDO Alliance.

Now that we covered all the basics let’s get to work.

Prerequisite

Before starting this guide, you need to download the GPG Suite.

If you work on macOS, click here to download the software installer and install it. If you work on Linux, you already have it preinstalled.

Also, you have to have a YubiKey!

Step 1 - generate Certify key

Start key generation by running the following command:

gpg --full-generate-key --expert

Certify key generation - step 1

-> gpg --full-generate-key --expert
gpg (GnuPG) 2.2.19; Copyright (C) 2019 Free Software Foundation, Inc.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
Please select what kind of key you want:
   (1) RSA and RSA (default)
   (2) DSA and Elgamal
   (3) DSA (sign only)
   (4) RSA (sign only)
   (7) DSA (set your own capabilities)
   (8) RSA (set your own capabilities)
   (9) ECC and ECC
  (10) ECC (sign only)
  (11) ECC (set your own capabilities)
  (13) Existing key
  (14) Existing key from card
Your selection? 8

Select 8 ( RSA - set your own capabilities) and press enter.

On this prompt, it is necessary to toggle off sign capability (S) and encrypt capability (E) by entering capital letter associated with it and pressing enter.

When "Current allowed actions" has only "Certify", insert Q(finished) and press enter.

Certify key generation - step 2

Possible actions for a RSA key: Sign Certify Encrypt Authenticate Current allowed actions: Sign Certify Encrypt
    (S) Toggle the sign capability
    (E) Toggle the encrypt capability
    (A) Toggle the authenticate capability
    (Q) Finished
Your selection? s 
Possible actions for a RSA key: Sign Certify Encrypt Authenticate 
Current allowed actions: Certify Encrypt
    (S) Toggle the sign capability
    (E) Toggle the encrypt capability
    (A) Toggle the authenticate capability
    (Q) Finished Your selection? e 
Possible actions for a RSA key: Sign Certify Encrypt Authenticate Current allowed actions: Certify
    (S) Toggle the sign capability
    (E) Toggle the encrypt capability
    (A) Toggle the authenticate capability
    (Q) Finished Your selection? q

In the following step when prompted for key size put 4096 and press enter, after that it will prompt you to input key expiration time. For this step only set it as 0 (key does not expire), press enter, and then insert y to confirm and press enter again.

RSA keys may be between 1024 and 4096 bits long. 
What keysize do you want? (3072) 4096 
Requested keysize is 4096 bits 
Please specify how long the key should be valid.
          0 = key does not expire
       <n>  = key expires in n days
       <n>w = key expires in n weeks
       <n>m = key expires in n months
       <n>y = key expires in n years 
Key is valid for? (0) 
Key does not expire at all 
Is this correct? (y/N) y

Afterward, it will request your name and email address to construct a user ID to identify the key.

The comment is optional. When satisfied enter O (Okay) and press enter.

Key identification

You need a user ID to identify your key; the software constructs the user ID from the Real Name, Comment and Email Address in this form:
     "John Doe (Some Comment) <john.doe@email.com>" 
Real name: Real Name 
E-mail address: real.name@barrage.net 
Comment: 
You selected this USER-ID:
     "Real Name <real.name@barrage.net>" 
Change (N)ame, (C)omment, (E)-mail or (O)kay/(Q)uit? o

Important: Popup window requesting to set passphrase will show. (it is recommended to save passphrase in LastPass or another secure password manager)

After you have set the passphrase your key has been created and you will get a message similar to one in the snipper below.

Key generation - random bytes

We need to generate a lot of random bytes. It is a good idea to perform some other action (type on the keyboard, move the mouse, utilise the disks) during the prime generation; this gives the random number generator a better chance to gain enough entropy.
gpg: key 9CD3AF89EB04F8FF marked as ultimately trusted
gpg: directory '/home/realname/.gnupg/openpgp-revocs.d' created
gpg: revocation certificate stored as '/home/realname/.gnupg/openpgp-revocs.d/DAF272D92DAE18C1790A1E8A7C258D4980E4DCB5.rev'
public and secret key created and signed.

pub   rsa4096 2020-06-17 [C]
      DAF272D92DAE18C1790A1E8A7C258D4980E4DCB5
uid                      Real Name <real.name@barrage.net>

You have now generated your certification key.

Step 2 - create RSA sign only key

After we have created the key for the certificate we need to add the rest of them.

gpg --edit-key --expert <your_email_address>

(the address you provided in the previous step)

Edit key

gpg --edit-key --expert real.name@barrage.net   

gpg (GnuPG) 2.2.19; Copyright (C) 2019 Free Software Foundation, Inc. 
This is free software: you are free to change and redistribute it. 
There is NO WARRANTY, to the extent permitted by law. 
Secret key is available. 
gpg: checking the trustdb 
gpg: marginals needed: 3  completes needed: 1  trust model: pgp 
gpg: depth: 0  valid:   1  signed:   0  trust: 0-, 0q, 0n, 0m, 0f, 1u 
sec  rsa4096/7C258D4980E4DCB5
     created: 2020-06-17
     expires: never
     usage: C  
     trust: ultimate      validity: ultimate
[ultimate] (1). Real Name <real.name@barrage.net>

Insert addkey command to start the procedure for adding the second key

add key - RSA sign only

gpg> addkey   
Please select what kind of key you want:
    (3) DSA (sign only)
    (4) RSA (sign only)
    (5) Elgamal (encrypt only)
    (6) RSA (encrypt only)
    (7) DSA (set your own capabilities)
    (8) RSA (set your own capabilities)
   (10) ECC (sign only)
   (11) ECC (set your own capabilities)
   (12) ECC (encrypt only)
   (13) Existing key
   (14) Existing key from card 
Your selection? 4

This step is similar to one from the creation of the first key, just on this step you choose 4 ( RSA - sign only ) and press enter

add key - RSA sign only - length

RSA keys may be between 1024 and 4096 bits long. 
What keysize do you want? (3072) 4096 
Requested keysize is 4096 bits 
Please specify how long the key should be valid.
         0 = key does not expire
      <n>  = key expires in n days
      <n>w = key expires in n weeks 
      <n>m = key expires in n months 
      <n>y = key expires in n years   
Key is valid for? (0) 1y 
Key expires at Thu Jun 17 09:44:10 2021 CEST 
Is this correct? (y/N) y 
Really create? (y/N) y

It will again prompt you for keysize 4096 and for an expiration time. This time you input 1y meaning the key will expire in 1 year. On the next two prompts confirm creation with inputting y and pressing enter. Passphrase window will pop out requiring you to insert the passphrase which you have set up in 1st step.

Step 3 - generate RSA encrypt only key

This step is identical as previous (STEP 2) in every part besides selecting 6 (RSA - encrypt only) on first prompt. Afterwards key length is 4096, expiration time is 1y and confirm twice with y and passphrase on end

add key - RSA encrypt only

gpg> addkey

Please select what kind of key you want:
   (3) DSA (sign only)
   (4) RSA (sign only)
   (5) Elgamal (encrypt only)
   (6) RSA (encrypt only)
   (7) DSA (set your own capabilities)
   (8) RSA (set your own capabilities)
  (10) ECC (sign only)
  (11) ECC (set your own capabilities)
  (12) ECC (encrypt only)
  (13) Existing key
  (14) Existing key from card

Your selection? 6
RSA keys may be between 1024 and 4096 bits long.
What keysize do you want? (3072) 4096
Requested keysize is 4096 bits
Please specify how long the key should be valid.
         0 = key does not expire
      <n>  = key expires in n days
      <n>w = key expires in n weeks
      <n>m = key expires in n months
      <n>y = key expires in n years

Key is valid for? (0) 1y
Key expires at Thu Jun 17 09:46:10 2021 CEST
Is this correct? (y/N) y
Really create? (y/N) y

We need to generate a lot of random bytes. It is a good idea to perform
some other action (type on the keyboard, move the mouse, utilise the
disks) during the prime generation; this gives the random number
generator a better chance to gain enough entropy.
sec  rsa4096/7C258D4980E4DCB5
     created: 2020-06-17  expires: never       usage: C  
     trust: ultimate      validity: ultimate
ssb  rsa4096/6DCB9294B2139D96
     created: 2020-06-17  expires: 2020-06-17  usage: S  
ssb  rsa4096/40DDCC2E39087DC0
     created: 2020-06-17  expires: 2020-06-17  usage: E  
[ultimate] (1). Real Name <real.name@barrage.net>

Step 4 - generate RSA authentication key

This step is kind of combination between step 1 and step 2.

Insert command addkey and press enter, on prompt enter 8 (RSA - set your own capabilities)

This time current allowed actions start with: Sign and encrypt; you need to toggle them out and toggle in authenticate capability. It can be done by inputting S to toggle out Sign capability, afterward E to toggle out encrypt capability and finally A to toggle in authenticate capability. When you have only Authenticate in current allowed actions input Q and press enter.

add key - RSA authentication

gpg> addkey

Please select what kind of key you want:
   (3) DSA (sign only)
   (4) RSA (sign only)
   (5) Elgamal (encrypt only)
   (6) RSA (encrypt only)
   (7) DSA (set your own capabilities)
   (8) RSA (set your own capabilities)
  (10) ECC (sign only)
  (11) ECC (set your own capabilities)
  (12) ECC (encrypt only)
  (13) Existing key
  (14) Existing key from card
Your selection? 8

Possible actions for a RSA key: Sign Encrypt Authenticate
Current allowed actions: Sign Encrypt
   (S) Toggle the sign capability
   (E) Toggle the encrypt capability
   (A) Toggle the authenticate capability
   (Q) Finished

Your selection? s
Possible actions for a RSA key: Sign Encrypt Authenticate
Current allowed actions: Encrypt
   (S) Toggle the sign capability
   (E) Toggle the encrypt capability
   (A) Toggle the authenticate capability
   (Q) Finished

Your selection? e
Possible actions for a RSA key: Sign Encrypt Authenticate
Current allowed actions:
   (S) Toggle the sign capability
   (E) Toggle the encrypt capability
   (A) Toggle the authenticate capability
   (Q) Finished

Your selection? a
Possible actions for a RSA key: Sign Encrypt Authenticate
Current allowed actions: Authenticate
   (S) Toggle the sign capability
   (E) Toggle the encrypt capability
   (A) Toggle the authenticate capability
   (Q) Finished

Your selection? q

Afterward key length will be prompted - 4096 again, key expiration - 1y, confirm twice with y and enter passphrase. If you have done everything correctly something like this should appear

add key - RSA authentication - length

RSA keys may be between 1024 and 4096 bits long.
What keysize do you want? (3072) 4096
Requested keysize is 4096 bits
Please specify how long the key should be valid.
         0 = key does not expire
      <n>  = key expires in n days
      <n>w = key expires in n weeks
      <n>m = key expires in n months
      <n>y = key expires in n years

Key is valid for? (0) 1y
Key expires at Thu Jun 17 09:48:10 2021 CEST
Is this correct? (y/N) y
Really create? (y/N) y

add key - RSA authentication - summary

We need to generate a lot of random bytes. It is a good idea to perform
some other action (type on the keyboard, move the mouse, utilise the
disks) during the prime generation; this gives the random number
generator a better chance to gain enough entropy.
sec  rsa4096/7C258D4980E4DCB5
     created: 2020-06-17  expires: never       usage: C  
     trust: ultimate      validity: ultimate
ssb  rsa4096/6DCB9294B2139D96
     created: 2020-06-17  expires: 2020-06-17  usage: S  
ssb  rsa4096/40DDCC2E39087DC0
     created: 2020-06-17  expires: 2020-06-17  usage: E   
ssb  rsa4096/23BA279F2C8D06F9
     created: 2020-06-17  expires: 2020-06-17  usage: A  
[ultimate] (1). Real Name <real.name@barrage.net>

gpg> save

Last but not least, enter command save to finish your key creation process.

Step 5 - create backups

Run following commands to export keys

Provide passphrase where necessary.

create backups - commands

gpg --export-ownertrust > ~/.gnupg/backup_trustdb.txt
gpg --armor --export-secret-keys <your_email_address> > ~/.gnupg/secret_keys_<your_email_address>.asc
###(enter passphrase if prompted)
gpg --armor --export-secret-subkeys <your_email_address> > ~/.gnupg/secret_subkeys_<your_email_address>.asc 
###(enter passphrase if prompted)

you can list keys with

list keys

ls -all ~/.gnupg/openpgp-revocs.d

Step 6 - transport keys to yubikey

Insert yubikey into usb slot in your machine and write command

gpg --card-status

to get data from your Yubikey. If it works it should provide with Yubikey related data.

Enter command

gpg --card-edit

to be able to edit card data. Type command

verify

and it will prompt you administrator pin.

Important: Default admin pin is 12345678.

You can use command

help

to view all possible commands for your Yubikey.

When you are done you can type command

quit

To insert keys into your yubikey run following commands and it will output like from the screen below:

gpg --edit-key --expert <your_email_address>

Exporting keys to yubikey - list keys

gpg --edit-key --expert john.doe@barrage.net

gpg (GnuPG) 2.2.19; Copyright (C) 2019 Free Software Foundation, Inc.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Secret key is available.

sec  rsa4096/7C258D4980E4DCB5
     created: 2020-06-17  expires: never       usage: C  
     trust: ultimate      validity: ultimate
ssb  rsa4096/6DCB9294B2139D96
     created: 2020-06-17  expires: 2020-06-17  usage: S  
ssb  rsa4096/40DDCC2E39087DC0
     created: 2020-06-17  expires: 2020-06-17  usage: E   
ssb  rsa4096/23BA279F2C8D06F9
     created: 2020-06-17  expires: 2020-06-17  usage: A  
[ultimate] (1). Real Name <real.name@barrage.net>

To add the key you need to select it and transfer to Yubikey. If for example we typekey1 it will select 1st key and put * next to its ssb (like on picture below). Typing key 1 again will deselect that key

add key to yubikey - key 1

ssb* rsa4096/2C66AD4A15960BDB
     created: 2020-06-16  expires: 2021-06-16  usage: S

Add 1st key (signature key)

Select 1st key with command: key 1

Write command: keytocard

When it prompts where to store, type : 1 (Signature key)

enter passphrase

enter admin pin

Add 2nd key (encryption key)

Deselect 1st key with command: key 1

Select 2nd key with command: key 2

Write command: keytocard

where to store: 2 (encryption)

enter passphrase

enter admin pin

Add 3rd key (authentication key)

Deselect 2nd key with command: key 2

Select 3rd key with command: key 3

Write command: keytocard

where to store: 3 (authentication)

enter passphrase

enter admin pin

Deselect 3rd key: key 3

Write command: save

gpg -k (list public keys)

gpg -K (list private keys)

Important - You must change password and admin password on Yubikey for obvious security reasons

Enter edit mode with command: gpg --card-edit

Enter command: admin to allow admin commands

Enter command: passwd and following will be shown

1 - change PIN
2 - unblock PIN
3 - change Admin PIN
4 - set the Reset Code
Q - quit

Select 1 to change PIN

enter current pin (default: 123456)
enter new pin
confirm new pin
After you have finished PIN change it will give you the password menu again;

Select 3 to change Admin PIN

enter current admin pin (default: 12345678)
enter new pin
confirm new pin

Important: Save PIN, ADMIN PIN and PASSPHRASE to LastPass and protect access to them with LastPass master password

Step 7 - associate GPG with gitLab

Add GPG key in your gitlab settings

Export public key to clipboard with following command:

gpg --armor --export <your_email_address>  | pbcopy

After that go to your gitlab site, click on your user button and click on settings in dropdown menu

Go to the GPG Keys section in the menu, paste your public key from clipboard into text area, press add keys and the result should look like this

Associate GPG key on your local machine to GIT repository

List your secret keys with following command

gpg --list-secret-keys --keyid-format LONG <your_email_address>

List secret keys

sec   rsa4096/7C258D4980E4DCB5 2020-06-17 [C]
      DAF272D92DAE18C1790A1E8A7C258D4980E4DCB5
uid                 [ultimate] Real Name <real.name@barrage.net>
ssb  rsa4096/6DCB9294B2139D96 2020-06-17 [S] [expires: 2021-06-17]
ssb  rsa4096/40DDCC2E39087DC0 2020-06-17 [E] [expires: 2021-06-17]
ssb  rsa4096/23BA279F2C8D06F9 2020-06-17 [A] [expires: 2021-06-17]

copy GPG key id that starts with ssb and has S next to date.

in this example → 6DCB9294B2139D96

Run the following commands to edit your local git configuration.

git config --global user.signingkey 6DCB9294B2139D96

git config --global gpg.program gpg

git config --global commit.gpgsign true

What is a phishing attack and how to identify it - the definite guide

Igor Cekelis — Wed, 14 Apr 2021 13:21:14 +0000

We know everyone has heard of them, but not everyone can easily detect that they are under phishing cyber attack. In this article, we will lay out the basics that will help you spot the malicious email in your Inbox.

We will also explain the difference between phishing and spear phishing attacks and how to identify them.

Email remains widely used in both business and private matters as one of the leading communication methods. Because of that, email is commonly used as a marketing platform, and we are all familiar with all kinds of promotional newsletters ending up in our mailboxes.

That led to the inevitable production of malicious acts, frauds, spam emails, and some more sophisticated ways of malicious intents.

Spam

Let’s talk about spam for a moment. Spam can be anything unwanted, but it’s mostly used as a term for unwanted emails, direct messages (IM), or mobile (SMS) messages. Spam emails are mainly based on (Sosa, 2010):

Money loan frauds
“Make money fast” frauds
Pharmaceutical marketing
Chain mail
Illegal pirated software etc.

About 40% of emails are considered spam, and some sources say that the number has increased up to 70%. (Awad, Elsuofi, 2011).

What is not considered spam?

Your friend emailing you with funny cat videos multiple times a day (your friend is a known entity to you)
Your boss sending you an unexpected employee termination letter (certainly unwanted, but not spam)
Emails containing malicious software like viruses (they have some common points, but they are not considered spam)

How to identify spam email?

Except for the topics mentioned above, spam emails often have the following characteristics:

The sender is unknown or suspicious
It has spelling errors, often seemingly unintentional, with the goal of tricking your spam filter
The author is claiming that the email isn't spam
Offers are on a large discount, but just for you or for a short and limited period (asking to perform some urgent action)
You are gifted with an award, mostly financial

Phishing

Phishing is an attack vector where the attacker is sending a malicious email (because of which that email can be classified as spam) where he is falsely identifying himself as someone reliable and known (e.g., your bank, your boss, Google, Facebook, etc.) with the intention of stealing sensitive data like passwords, credit card numbers, PINs, etc. Phishing emails evolved and became more sophisticated and persuasive, thus more dangerous. (Basnet, Mukkamala, Sung, 2008).

There are multiple features that can be string indicators by which we can recognize phishing attempts in emails:

Email is sent over a new domain - the domain is activated a few hours or days ago
Multiple domains in the URL - phishing emails often ask you to visit an attached URL. Sometimes that particular URL can have multiple domains, which is a case of a URL Redirection Attack. (e.g., http://www.example.com/login.php?redirect=http://www.bla.com/home.php)
The occurrence of an IP address in a URL - legitimate websites usually have their own domain.
The occurrence of shortened URLs (Bitly, TinyURL)
Mismatch of email from the email header and the email body

Phishing emails often claim that:

There are problems with your account
You must confirm some personal info
You must perform some kind of urgent action
You should check the attachment

Recently, we had a nicely realized phishing attempt. It can be seen in Figure 1. The body of the email contains a persuasive message about some security concerns related to the used software. The email is sent from a domain that includes the real name of the product (ledgersupport.io), but in fact, isn’t sent by the real source, meaning the attacker is falsely identifying themselves to the victim.

Ledger phishing attempt

What is a spear phishing attack?

Spear phishing is an advanced and more sophisticated attack vector because the attacker is targeting a specific individual, organization, or company. The attacker presents himself as a trustworthy source or a specific individual well known to the victim. Spear phishing attacks that are targeting high-level executives like CEOs are called whaling attacks. Executives in companies and organizations are often targeted because they are usually under pressure and doing time-critical tasks. Those attacks are often asking to abuse processes, deliver some sensitive information, or perform urgent payments. (Northcutt)

How do spear phishing attacks work?

Attacker researches his victims and all info about them (email, full name, native language, job position)
Once the data is collected, the attacker works out a strategy. Usually, this includes duplicating web pages that the victim is familiar with and creating a fake email address
The attacker sends a fake email message that looks like it came from the trusted person/institution. More sophisticated attacks are happening over several emails, where attackers gradually build trust, story, and context
Attack usually ends with the victim sending valuable information

In some even more sophisticated scenarios, the attacker can go a step further and spoof the email address to make it look more trustworthy to the reader. Email spoofing is the act of sending emails with false sender addresses (Malwarebytes, 2020).

A great example of email spoofing can be seen in Figure 2, where the attacker pretends to be the USA president.

An example of email spoofing

By checking the headers of that particular email, it can be seen that the sender is obviously not the real president, as shown in Figure 3. Long story short, the “From” and “Return-Path” fields don’t match, which is a solid indication that this email is spoofed.

Email headers of phishing attempt examples

Let’s go back to Spear Phishing. A few days ago, we had a “textbook example” of a spear phishing attempt that can be seen in Figure 4. The attacker presented himself as someone known to the victim, and the victim can easily overlook the email address he has created. The content of the email asks for a big payment that is due today. It has almost every characteristic of a classic spear phishing attempt.

Translation of the text in Figure 4:

Subject: Payment

Body: Good morning, can we pay 26.650 Euros today? I need advice. Thank you. Best regards

Conclusion

We can conclude that the difference between spam and phishing is in the malicious intent of the attacker. The main goal of the spammer is to sell something, often-low quality products. Spammers just have an item to sell and choose spam as their preferred technique for contacting potential buyers. It is important to emphasize that their items and products can also be fraudulent. Phishing attempts have a malicious nature, and their goal is mostly stealing information, data, credentials, or money. (Belcic, 2020)

In the "phishing vs. spear phishing" case, we can say that the difference between phishing and spear fishing is the approach and the target. Spear phishing attacks target specifically chosen individuals, organizations, or companies, whereas phishing attacks have a wider spread vector and are sent to multiple (hundreds, thousands) of potential victims. Because of that, spear phishing attacks are way more dangerous because they seem personal, and attackers present themselves as a known or trusted individual or party.

Be wary and careful when dealing with any email you receive, expected or not. Do not hesitate; ask someone to help and analyze a particular email for you. Always take your time to double-check when asked to perform something that might be unusual or suspicious in any way. If you suspect that a particular email is malicious, approach it with caution, and never attempt to:

Click on any URLs
Click on any form buttons
Open any attachments, no matter the extension
Provide personal, confidential, or credit card information
Provide passwords

And always:

Report suspicious emails to the security team
Keep your anti-virus, anti-spam, etc., up to date
Check the headers of an email for mismatches of the sender email
Outlook how-to: https://answers.microsoft.com/en-us/msoffice/forum/msoffice_outlook-msoffice_custom-mso_2010/view-source-of-an-email/1d5029bd-9401-4342-8409-fa396b8959fb
Thunderbird how-to: CTRL+U
Gmail how-to: https://support.google.com/mail/answer/29436?hl=en

If you think that you’ve opened a malicious URL or attachment:

Disconnect your device from the internet and any networks to reduce the potential spread of the malware
Perform a complete scan of your system
Contact your financial institution or bank in case your financial information is at risk

Keep in mind that:

Phishing and spear phishing attacks are very easy to perform
No technical/hacking knowledge is needed to perform these types of attacks
It is easy to obtain tools and scripts to perform phishing attempts

The best way to avoid phishing and other email related scams is to raise security awareness and educate yourself and learn about the phishers' tactics. There is a lot of great literature online about the topics mentioned above. Feel free to contact us anytime if you wish to learn something more about the following topic.