teleren/devto huggingface dataset:
My Notes on Design Systems: Introduction
Tags: designsystem, figma, designtokens, components
Published: 2022-11-24 13:59:50


# My Notes on Design Systems: Introduction

This post is part of a series about everything I have learned about design systems and I’ll write it from a designer's point of view.

## What is a design system?

A design system is a collection of design tokens and reusable components defined by specific standards to reduce redundancy and maintain consistency while designing projects that scale.

### Things most design systems I have encountered contain:

1. Design tokens; things like color palette, spacing, font families and sizes, shadow effects, and more.
2. Reusable UI components such as buttons, inputs, cards, chips, or other components that might be native to a specific use case.
3. Documentation; a clear usage guide for all tokens and components included in the design system.

### Design systems in Figma

Figma is a design tool we use at [ClickPesa](https://clickpesa.com/) and [GetPaid](https://getpaid.africa/) while designing our products. Figma makes it easy to work with design systems because it provides a way to publish the design system file to be available for the entire team where team members can access all the components and design tokens in any design file in the team. You can check out [Ant Design System](https://www.figma.com/community/file/831698976089873405), an open-source design system published in the Figma community.

## Why design system

Here are some why and why not use a design system I have learned so far.

### Why use a design system

1. To maintain consistency across the designs created for a particular product.
2. To reduce redundancy that might occur while designing.
3. Design maintainability. Design systems allow for changes to be made once and applied across the design.

### Why not use a design system

1. It's a lot of work. It takes time to create and maintain.

## Create a design system from scratch or use a premade one

### Creating a design system from scratch

Making a design system from scratch allows you to add only the items that you will need for your use case but as it grows it becomes more difficult to maintain which will increase the workload to you or your design team.

## Using a premade design system

Using a pre-made design system is convenient because it is created and maintained by a third party whether it is open source or a vendor that sells design system(s).

A challenge I faced with this approach was that pre-made design systems contain a lot of things that I don’t need in my use cases and don’t have a lot of things that I need in my use cases so I had to get in there and add things that I’ll have to also maintain as I go. I suppose this is a less workload compared to maintaining a custom one.

In the next article in this series, I’ll go more in-depth about using a premade design system and customizing it to your specific use case so be sure to follow the ClickPesa publication so you don’t miss it.
How to write a unique blog in just five minutes.
Tags: blogging, blogger, content, writing
Published: 2022-11-24 13:55:15

In this world of blogging and content, writing bloggers or content writers want to be fast to join the race. Google wants unique content with new ideas which increases bloggers' work. To make this work easy and fast many AI tools have been introduced. What if I say that there is a tool that can write a unique blog in just five minutes? Yes, this is true. You are at the right place.

Introducing cruise mode by Scalenut your AI pen pal that writes an entire SEO blog for you within five minutes. Enter the cruise mode from the dashboard by adding your target keyword and location. Click on Start. on doing so. The tool goes through the internet in real-time to gather insights on the keyword you wish to rank for. It generates a comprehensive SEO report for you in only a few minutes.

**[Read More](https://www.zittrex.com/how-to-write-a-unique-blog-in-just-five-minutes-by-scalenut-cruise-mode/)**
React + Axios POST request example
Tags: react
Published: 2022-11-24 13:55:13

In my previous article, I have written [how to make POST requests in JavaScript using Axios](https://www.codingdeft.com/posts/javascript-axios-post-request/). In this article, we will see how to do the same in React.

## Project setup

Create a new react app using the following command:

```bash
npx create-react-app react-axios-post
```

Install the axios library by running the below command:

```
npm i axios
```

Add the following css in `index.css`:

```css
body {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
```

## Creating the login form

Update the App.js with the following code:

```jsx
function App() {
  return (
    <div>
      <form action="" id="login" method="post">
        <h1>Login</h1>
        <p className="item">
          <label for="email"> Email </label>
          <input type="email" name="email" id="email" />
        </p>
        <p className="item">
          <label for="password"> Password </label>
          <input type="password" name="password" id="password" />
        </p>
        <p className="item">
          <input type="submit" value="Login" />
        </p>
      </form>
    </div>
  )
}

export default App
```

Here we have created a form with 2 fields: email and password. Also, we have a button to submit the form.

## Handling the form submit

In the below code,

- We are storing the email and password in their respective local states.
- We have added a submit handler for the form,
  which calls the API endpoint using Axios with email and password in the request body.

```jsx
import axios from "axios"
import { useState } from "react"

function App() {
  const handleSubmit = e => {
    // Prevent the default submit and page reload
    e.preventDefault()

    // Handle validations
    axios
      .post("https://example.con/login", { email, password })
      .then(response => {
        console.log(response)
        // Handle response
      })
  }

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()
  return (
    <div>
      <form action="" id="login" method="post" onSubmit={handleSubmit}>
        <h1>Login</h1>
        <p className="item">
          <label for="email"> Email </label>
          <input
            type="email"
            name="email"
            id="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </p>
        <p className="item">
          <label for="password"> Password </label>
          <input
            type="password"
            name="password"
            id="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </p>
        <p className="item">
          <input type="submit" value="Login" />
        </p>
      </form>
    </div>
  )
}

export default App
```
How to check if a variable is defined in JavaScript
Tags: javascript
Published: 2022-11-24 13:48:02

Are you annoyed by the following error and want to put check to see if a variable exists before accessing them?

`ReferenceError: x is not defined`

In this tutorial, we will discuss the same.

## Checking if a variable is defined

You can use the following condition to check if `x` is defined:

```js
if (typeof x !== "undefined") {
  console.log(x)
}
```

The [typeof operator](https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/typeof)
returns the type of the variable and if it is not defined, or has not been initialized, returns `"undefined"`.

It can also be checked if the variable is initialized or not. In the below code, the control will not go inside the `if` block.

```js
let x
if (typeof x !== "undefined") {
  console.log(x)
}
```

You will see the value of `x` logged into the console, if you execute the following code:

```js
let x = 1
if (typeof x !== "undefined") {
  console.log(x)
}
```

## Checking if an object property is defined

If you need to check if a property exists within an object
then you can use the prototype method [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)

```js
const person = {
  name: "John",
}

if (person.hasOwnProperty("age")) {
  console.log(person.age)
}
```

The above code will not log anything to the console.

The same can be used in the case of the window object. The below code will log `10` to the console.

```js
window.y = 10

if (window.hasOwnProperty("y")) {
  console.log(window.y)
}
```
Mtech Projects For ECE
Tags: webdev, javascript, programming, tutorial
Published: 2022-11-24 13:47:27

The last year of the [Mtech projects for ece](https://takeoffprojects.com/mtech-projects-for-ece) is the most crucial year in an engineering student's life as this is the phase when they actually start making their career. We possess great expertise of developers capable of making the mtech projects you couldn’t complete in a year, within days and save you at the last minute. 
 
So don’t worry if you couldn’t complete your mtech project in time, we are here to help you. Get final year [mtech projects for ece](https://www.youtube.com/watch?v=f3GJE5pGOnI) with all the necessary guidance and training to score in your final year project. 
 
Students have to go through a lot of activities such as preparing themselves for campus placements, exams and so on. Mtech ece project built on Ieee papers is the most important and complicated task that students have to complete in just in months which perplexes them. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hppise7epdykz78nxfgg.png)
 
We the developers at  Takeoff projects solve this problem by taking away their tension and provide them what they need so that they can concentrate on their placements and exams. We have a large variety of ideas in final year Mtech projects, all taken from IEEE papers, for all branches. 
 
We provide student with all the necessary things required in a project along with their proper guidance and training on time. Get your Ieee based projects with guidance and training. We specialize in providing final year engineering projects for students in need.
How To Install Vagrant 2.3.3 on Ubuntu Linux Mint 21 "Vanessa"
Published: 2022-11-24 13:44:39

---
title: How To Install Vagrant 2.3.3 on Ubuntu Linux Mint 21 "Vanessa"
published: true
description:  
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87unjj3k7jl1db08pezf.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-24 13:27 +0000
---

So you're trying to install Vagrant on your Linux Mint laptop on Thanksgiving morning to make room for all that stuffing. But errors! 

The [Vagrant installation guide](https://developer.hashicorp.com/vagrant/downloads) provides these instructions for installing on Ubuntu/Debian:
```sh
wget -O- https://apt.releases.hashicorp.com/gpg | gpg --dearmor | sudo tee /usr/share/keyrings/hashicorp-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/hashicorp.list

sudo apt update && sudo apt install vagrant
```

But it may throw this error if you're running Linux Mint:
```sh
E: The repository 'https://apt.releases.hashicorp.com vanessa Release' does not have a Release file.
N: Updating from such a repository can't be done securely, and is therefore disabled by default.
N: See apt-secure(8) manpage for repository creation and user configuration details.
```

Easy as pie! 

Just hard code the Ubuntu code name, in this case `jammy`, in the echo command by replacing `$(lsb_release -cs)`:
```sh
echo "deb [signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com jammy main" | sudo tee /etc/apt/sources.list.d/hashicorp.list
```

How do you find your Ubuntu code name? 
```sh
cat /etc/os-release
```

This will return something like:
```sh
NAME="Linux Mint"
VERSION="21 (Vanessa)"
ID=linuxmint
ID_LIKE="ubuntu debian"
PRETTY_NAME="Linux Mint 21"
VERSION_ID="21"
HOME_URL="https://www.linuxmint.com/"
SUPPORT_URL="https://forums.linuxmint.com/"
BUG_REPORT_URL="http://linuxmint-troubleshooting-guide.readthedocs.io/en/latest/"
PRIVACY_POLICY_URL="https://www.linuxmint.com/"
VERSION_CODENAME=vanessa
UBUNTU_CODENAME=jammy
```

Cheers!
Interesting middlewares in Node.js and Express.js API for security
Tags: node, security, javascript, webdev
Published: 2022-11-24 13:34:26

## **Hi, Devs!**

Look at this piece of code into the main app.js and its **middlewares**:

```
const express = require('express');
const app = express();
const cors = require('cors')
const helmet = require("helmet");
const morgan = require("morgan")
const rateLimit = require("express-rate-limit")

const limiter = rateLimit({
    windowMs: 60 * 1000, // 1 minute
    max: 50, // limit each IP to 50 requests per windowMs
    message: "Too many accounts created from this IP, please try again after a minute"
});

app.use(morgan("common")) //just for logs
app.use(helmet());
app.use(cors());
app.use(limiter)
app.use(express.json());
app.get("/", (res, req) => {
    res.status(200).send("Security into a Node.js API")
})
```

**First tip: Use TLS**
It's necessary to create a security's and would be the middle between the connection and the data. One is the free TLS certificate from [Let’s Encrypt](https://letsencrypt.org/about/).

☠️ **helmet**
"Helmet can help protect your app from some well-known web vulnerabilities by setting HTTP headers appropriately." [[Docs](https://expressjs.com/en/advanced/best-practice-security.html)]

☠️ **cors**
"CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options."
[[Docs](https://expressjs.com/en/resources/middleware/cors.html)]

☠️ **express-rate-limit**
"Use to limit repeated requests to public APIs and/or endpoints such as password reset" [[Docs](https://www.npmjs.com/package/express-rate-limit)]

**That's simple and helps a lot! Code it!**

**Contacts**
Email: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca
The Timeline Method for Determined Construction of Web Applications
Tags: webdev, website, development
Published: 2022-11-24 13:28:47

How do you approach the development of a new web application? If you are a solopreneur or SMB, you are not aiming for a big scale. You cannot afford well-known but costly development environments.

It is a challenge that I encountered repeatedly as a freelance consultant. Build it and ship it without overbuilding.
 
Here is the method that I usually use.

## The Matrix

Think of the complete development process as a two-dimensional plane.

On the horizontal axis, we have the different phases of the evolution of the web application. This is a timeline of phases that it goes through. 

The vertical time axis is the computing environment you will use.

## The Time Axis - Phases

1. Collection of emails
2. Forthcoming - add information pages
3. Production - add sign up/sign in and rea; functionality
4. Add testimonials and other forms of social proof
5. Scale up - multiple servers, load balancing

Of course, the production phase of development will be broken into multiple sub-phases. 

In the action events platform I am building, we start with notifications via email. Later we will add notifications through SMS.

## The Environments

Each phase has to go through these environments,

1. Local development
2. Staging - cloud environment
3. Production - production environment

The reason for going through this sequence is that we need to test things before we release them.

We start with local development but must move to the cloud to demo anything. 

## Design Backward from Production 

We design the production web application in a most general form. Then we define a subset within the general framework for the collection and the forthcoming phase.

## The Structure

As we would like the collection and forthcoming phases to have the production look and feel, we work by working backward by focusing on the navigation bar and the home page.

### Navigation Bar

A navigation bar with all pages that will be in production. We expose more and more pages as we proceed through the phases.

### Home Page

The collection and forthcoming pages have the general look and feel but with an email collection form only. To build a mailing list. 

In the production phase, we move to a real home page.

### Other Pages

If any other page appears in the collection or forthcoming phase, structure it to represent the corresponding content for that phase if different from the production phase.

## Conclusion 

With this approach, you construct one web application for all the phases you encounter. 

Thereby you get a uniform look and feel, with a single simple timeline for development, for all phases.
How To Get Backlinks From High Authority Sites ?
Tags: seo, dofollowbacklinks, backlinks
Published: 2022-11-24 13:23:45

<h1>How To Get Backlinks From High Authority Sites ?</h1>

<p>When you think about it, getting backlinks from high-authority sites is essential for any website. Why? Because they&rsquo;re the leading lights in their respective industries; they know what works and what doesn&rsquo;t. And as a result, they&rsquo;re often the first places your target audience will go online. So how do you get these links? In this blog post, we&rsquo;ll outline the steps necessary to get backlinks from high-authority sites. From researching high-quality websites to creating valuable content, you&rsquo;ll learn everything you need to become a link master.</p>

<h2>What is a backlink?</h2>

<p>A backlink is a link from another website, also known as a &quot;hyperlink.&quot;</p>

<p>A backlink is a link from one website to another. The higher the authority of the linking website, the more weight a backlink will have. Backlinks are important because they can help increase a website&#39;s rank in search engine results pages (SERPs).</p>

<p>A backlink is a link from one website to another. The higher the authority of the site linking to your website, the more likely people are to take notice. Backlinks are one of the most important factors in determining how successful your website will be.</p>

[Read More](https://www.smallseotools.shop/)
plagiarism-checker-pro
Tags: seo, seotools
Published: 2022-11-24 13:06:53

<div class="videodetector">
<h1>What is plagiarism?</h1>

<p>Plagiarism is a form of intellectual theft. It&rsquo;s when you take the ideas, words, or content of one person and pass them off as your own. It can be easy to commit plagiarism without even knowing it, so it&rsquo;s important to be aware of the signs. In this blog post, we will explore what plagiarism is, its effects, and ways to avoid it. We will also provide a few tips on how to cite sources correctly and how to prevent common plagiarism mistakes.</p>

<h2>Why plagiarism checker is important?</h2>

<p>Plagiarism is the act of stealing someone else&#39;s ideas, words, or research and presenting them as your own. It can be simple copying and pasting pieces of text without giving credit, or it can be more complicated, involving taking entire sentences or entire paragraphs from another source and presenting them as your own.</p>

<p>The consequences of plagiarism can be serious. If you get caught plagiarizing in your work, you could face punishment from your university or employer, and possible damage to your reputation. Plagiarism also counts as academic dishonesty, which can lead to a loss of points on your exam and even a suspension from school.</p>

<p>Therefore, it is important to use a plagiarism checker when you are writing any type of paper or project. A plagiarism checker will identify any instances of plagiarism in your work and provide you with a list of recommended corrections so that you can ensure that your work is original.</p>

<p>How can I check for plagiarism using the free online plagiarism detector?</p>

<p>Plagiarism is the use of another person&#39;s intellectual property without giving credit. It can take many forms, from copying and pasting entire sentences without attribution to submitting a paper that is nearly identical to someone else&#39;s work.</p>

<p>Unfortunately, plagiarism can be difficult to detect. The free online plagiarism detector offered by Turnitin.com can help you check for possible plagiarism in your work. This tool enables users to input a URL or file containing their work, and it will calculate the percentage of similarities between that content and other sources of text. If you find that your work contains significant amounts of plagiarism, you may need to rework it thoroughly to ensure accuracy and originality.</p>

<h3>What should you do if you find plagiarism?</h3>

<p>If you find plagiarism in your own work, the best thing to do is to take a step back and re-evaluate your work. If you find that the material has been copied without proper attribution, you may need to take steps to resolve the situation. You can contact the person who copied the material or your professor, depending on what action is necessary. If you find plagiarism in someone else&#39;s work, it&#39;s important to report it. This will help ensure that the source of the information is credited and that any penalties associated with plagiarism are enforced.</p>

<h4>Plagiarism detection using a small SEO tool</h4>

[Read more ](https://www.smallseotools.shop/plagiarism-checker-pro)
Senior Unity Developer - Remote
Tags: unity3d, simulation, vr, csharp
Published: 2022-11-24 12:48:53

Hello Fellows,

I'm hiring for a Full-time Senior Unity Developer position, for one of our clients https://unitydevelopers.co.uk/, your profile popped up to me so I'm reaching out to you to make sure you might be interested in our vacancy.
 
Unity Developers is one of the industry leaders, specializing in bespoke Unity Development. They serve clients all over the globe from mixed reality experiences and app development to mobile and console gaming, and everything in-between, they’ve got it covered.

For more information about the role, kindly check the below job description:
https://jobs.smartrecruiters.com/Whitecollars/743999863108301-unity-developer-remote

If you're interested please apply at the above link.

Regards,
Linux application stuck in fullscreen
Tags: linux, fullscreen, xorg, wmctrl
Published: 2022-11-24 12:45:21

---
title: Linux application stuck in fullscreen
published: true
description: How to exit fullscreen mode in a Linux app without closing it
tags: linux, fullscreen, xorg, wmctrl
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-24 12:43 +0000
---

From time to time a running application gets stuck in fullscreen mode. This has happened to me even in software that does not support fullscreen mode, like Spotify. Usually when that happens I used to `kill` the process and restart it, but there is a way of fixing it without being forced to restart the application.

We can use [`wmctrl`](https://linux.die.net/man/1/wmctrl) for that.

> wmctrl is a command that can be used to interact with an X Window manager that is compatible with the EWMH/NetWM specification. wmctrl can query the window manager for information, and it can request that certain window management actions be taken.

Important: `wmctrl` **wont't** work with Wayland applications.

First we need to list all applications with `wmctrl -l` to get the name of the one stuck.

```bash
$> wmctrl -l
0x00c00003  1 fedora Spotify
```

Now we have to modify the `fullscreen` property of the application, for that we'll use `wmctrl -b`

```bash
$> wmctrl -r Spotify -b toggle,fullscreen
```

We've used `-r` to specify the application we are going to modify and `-b` to tell `wmctrl` the action (`toggle`) and the property (`fullscreen`) to be modified.

With that the application should be back to windowed mode.