teleren/devto huggingface dataset:
VS Code Thunder Client: An awesome alternative to Postman
Tags: api, postman, restful, testing
Published: 2021-07-04 20:20:50

---
cover_image: https://public-image-container.s3.ap-southeast-1.amazonaws.com/th.png
---
Suppose you are working on the front end of a project. You are using a `VS Code` editor. You have successfully designed the user interfaces and now its time to bind data from back end api. You are given a collection of rest api endpoints. So at first you want to test these. What if you could test these in the editor without opening another app like `Postman`? This is absolutely possible now if your `VS Code` is having the latest version (1.57).

You can test the endpoints using a `VS Code` extension named **Thunder Client** which is a lightweight rest client. You can have it from its official [website](https://www.thunderclient.io/) or from the extensions section of `VS Code`. Once you have added the extension to your editor and hit the `New Request` button, it should look like following:
![Alt text of image](https://public-image-container.s3.ap-southeast-1.amazonaws.com/thunder.png)

As you can see initially an endpoint is given and if you send a `GET` request to it, you will get the initial info about `Thunder Client` as json response. Now lets discuss the features of this very extension:
* All the major http requests like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, `HEAD` can be sent.
* Query parameters can be added like key value pair or if you add these in the url then those can be seen automatically in the section as pairs.
* There are separate sections to add `Basic Auth`, `Bearer Token` and `OAuth2.0` which is pretty cool.
* A separate section for adding necessary http headers as key value pairs.
* A body section where data can be sent using `json`, `xml`, `text`, `form`, `form-encoded`, `graphql`.
* Another cool feature call `Tests` where you can add your necessary conditions for testing like you want the response code to be equal to 200 or you want the response body to contain a fixed value.
* In the response section you can see the `headers`, `cookies` and `test results` along with the response. The response being marked up with colors looks beautiful along with `status`, `size` and `time`.
* There are some demo codes to make request in different languages along with third party libraries.
* You can creat a collection, add an activity to a collection, import collections and even import postman collections.
* You can also create environment, define secrets like tokens and use those in sending requests.

All these features together make `Thunder Client` a great choice to test restful api endpoints. If you are a newbie or work in a project that is not very complex or don't want to run extra processes to test api then you should definitely give it a try.
simple Load testing using Locust
Published: 2021-07-04 20:18:28

<sub>Photo by <a href="https://unsplash.com/@tumbao1949">James Wainscoat</a> on <a href="https://unsplash.com/s/photos/swarm">Unsplash</a></sub>

[Locust](https://locust.io/) is a system using python to define load testing.
It relies on a main node (hosting UI) to report data. Workers nodes executes workloads.


Loads are defined through objects: Users, tasks

A quick way to test, is to use the following docker-compose:

```docker
version: '3'

services:
  master:
    image: locustio/locust
    ports:
     - "8089:8089"
    volumes:
      - ./:/mnt/locust
    command: -f /mnt/locust/locustfile.py --master -H http://master:8089
  
  worker:
    image: locustio/locust
    volumes:
      - ./:/mnt/locust
    command: -f /mnt/locust/locustfile.py --worker --master-host master
```

The web UI is then accessible on port 8089 .

![UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wt9kay8tqo7kxaokg17.png)

### Configuration

Locust as written in its [docs](https://docs.locust.io/en/stable/writing-a-locustfile.html) that Locust uses:
- User : to define profile
- Task : to define workload, associated to a weight
- Events : to define extension points

[This repository](https://github.com/sernst/locusts) has a simple example on how to defaine configuration.


Hope this helps !
Fifth-week check-in for PSF, GSoC 2021
Tags: python, gsoc
Published: 2021-07-04 20:15:24

It's been a month since the coding period started. The upcoming week in particular is important because it's the last week before the first evaluation period, meaning I have to deliver everything I've worked on for the past month.

## What did I do this week?

I finally finished my [first milestone](https://github.com/LeoCumpli21/PyZombis/milestone/1). In total, for this milestone I opened 21 issues, and closed 16 so far. The missing 5 have linked pull requests (PRs) that are awaiting review.

For 2 lectures I had to use [Brython](https://brython.info/static_doc/en/import.html) for their exercises. 
> Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web console), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events.

I use **Brython** beacause the current python interpreter of Runestone is [skulpt](https://skulpt.org/), and it doesn't support some python libraries that Brython does. So this past week I had to recall how Brython works. I had to read its [documentation](https://brython.info/static_doc/en/intro.html) again, where I found the `browser.timer` module, which I found helpful.

## Did I get stuck anywhere?

Not really. The Brython stuff took time to do, but I didn't feel stuck.

## What is coming up next?

This fifth week I will be aware of my existing PRs in case the mentors suggest changes. Meanwhile, I'll continue with my second milestone.
WordPress beschleunigen - 6 Tweaks ohne Plugins
Tags: wordpress, code, htaccess, performance
Published: 2021-07-07 08:06:50

---
title: WordPress beschleunigen - 6 Tweaks ohne Plugins
published: true
date: 2021-07-04 20:07:29 UTC
tags: WordPress,code,htaccess,performance
canonical_url: https://bloggerpilot.com/wordpress-beschleunigen/
---

![WordPress Geschwindigkeit Optimierung - 6 Teaks (ohne Plugins)](https://bloggerpilot.com/wp-content/uploads/2021/07/6-performance-tweaks.png)

 Du möchtest deinen WordPress Blog beschleunigen? Es gibt WordPress-Plugins, die...

Lies weiter: [WordPress beschleunigen](https://bloggerpilot.com/wordpress-beschleunigen/)
Estado en componentes funcionales (useState).
Tags: react, webdev, spanish
Published: 2021-07-04 20:05:22

Los estados en React nos permiten controlar los valores y datos que maneja un componente. Permiten que este sea capaz de cambiar la interfaz sin renderizar todo el DOM. Podemos decir que es una manera de tener variables que podemos cambiar de manera dinámica.

#useState
El componente funcional, para controlar los valores de estado, importa una función [Hook](put-link-here), llamada `useState`. 

![importando useState: import React, {useState} from 'react';](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmbgl4qkexvyfe34r7k4.png)

`useState` Es similar a tener una variable, así que después de importarlo dentro de nuestro archivo, podemos asignarle un valor dentro de nuestro componente.

![Ejemplo de Asiganación de un valor al useState: const [name, setName] = useState('Alberto');](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c7lgpl24zn6ax54tbuc.png)

`useState` es una función que nos retornara algo al pasarle un argumento, ese argumento puede ser cualquier tipo de dato (string, null, number, etc.), `useState` puede funcionar incluso sin recibir el argumento antes mencionado. En el ejemplo de arriba el argumento seria 'Alberto' y este se tomara como el valor inicial.

`useState` básicamente regresa un arreglo con dos valores: un valor y un `set`. Gracias al `set` podemos actualizar el valor de estado de nuestro componente cuando lo requiramos.
Para realizar el cambio de estado de un componente con el `set` necesitamos de un evento que active o llame la función, como en el ejemplo de la imagen anterior, al `set` se le asigno el nombre `setName();`

Algunas de las varias formas de declarar argumentos en `useState`:
![const[name, setName] =useState('');
const[nickName, setName] =useState('Beto');
const[age] =useState();
const[, setSomething] =useState('Hey!');](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6myzsruwdmvb8qzk7e5h.png)
The 3 most interesting C++ posts of June 2021
Tags: bestofdev, cpp
Published: 2021-07-04 19:57:52

Let me share with you 3 interesting [#cpp](https://dev.to/t/cpp) posts from June.

I don't take the most popular articles anymore, because I find that while some articles do meet the criteria to add #cpp as a tag, but they are not mostly about C++. So there is a bit of subjectivity to this list. Yet, I try not to include multiple articles from the same author.

Feel free to share your favourite one in the comments.

***
[Aastha](https://dev.to/guptaaastha) had some interesting and popular articles about essential topics of C++, the one I want to highlight is about the `using` keyword. Great work, Aastha, keep them coming!

{% link https://dev.to/guptaaastha/quick-introduction-to-using-in-c-4n73 %}

***

[Abhishek](https://dev.to/abhishekchandra2522k) wrote about an evergreen topic, the Standard Template Library. Many people found it interesting and useful!

{% link https://dev.to/abhishekchandra2522k/standard-template-library-in-c-2h10 %}

***

Last but not least, [Sandor](https://dev.to/sandordargo), so I wrote a book review on C++ Best Practices by Jason Turner. I think this article ended up popular because of [Jason](https://github.com/lefticus) and not me.

{% link https://dev.to/sandordargo/c-best-practices-by-jason-turner-4bj1 %}

Happy coding!

## Connect deeper

If you liked this article, please 
- hit on the like button,  
- [subscribe to my newsletter](http://eepurl.com/gvcv1j) 
- and let's connect on [Twitter](https://twitter.com/SandorDargo)!
5 reasons to use node.js
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-07-04 19:48:42

#### What is Node.js 
 
Node.js is an open-source Javascript run-time. It is used to create server-side APIs, network applications and services. It was designed to build out highly scalable applications with high concurrency.

#### Less context-switching

Node has made it very easy for frontend developers to create full-stack projects by using prior Javascript experience on the server side. This has been great for teams to re-use codebases and increase productivity.  

#### Node.js is super fast

Node is built on the V8 chrome javascript engine that has yielded amazing performance. The asynchronous non-blocking design makes for a blazing fast experience dealing with lots of concurrent operations. 

#### Real-time applications

Node.js makes it really easy to produce real-time applications such a real-time chats by allowing synchronized  connections via websockets and reliable client/server communication.

#### Event driven 

The event driven architecture of Node.js is pattern on observing event behavior with event listeners and responding to events predictively. These is perfect for client-side web applications make use of many meaningful interactions on the interface and providing a great user experience. 

#### Great Ecosystem 

Node is supported by the entire Javascript community and has lots of great open-source tooling and NPM packages that make developing with Node a breeze. Node is quickly being adopting in tech stacks of lots of companies and producing great results in performance. 


Terry Threatt
Change Timezone on linux (ubuntu)
Tags: linux, ubuntu
Published: 2021-07-04 19:14:45

---
title: Change Timezone on linux (ubuntu)
published: true
description: 
tags: linux, ubuntu
//cover_image: https://direct_url_to_image.jpg
---

Check timezone on host
``` bash
timedatectl
```
Change timezone
```
timedatectl set-timezone ${timezone}
```
List timezone 
```
timezonectl list-timezones
```
Productivity tips/hacks that you use,coding in VScode
Tags: discuss, vscode, productivity, programming
Published: 2021-07-04 19:04:28

What small hacks, or tips that you can tell a beginner coder? 

Let me start !!!

1. Jump start coding from command line using ` code . ` to open your current directory in vscode. 

2. Just ` ctrl + x ` to cut the current line. 

3. Using ` ctrl + f ` to find functions named variables instead of scrolling. 

Now you go, Let's make a list of whole productivity tips that beginner might not know
TEXT-TO-HANDWRITING USING PYTHON
Tags: python, texttohandwriting, projects, programming
Published: 2021-07-04 19:00:52

Hello, guys in this post we are going to explore how to convert text into handwriting and how to save it in any format.


so let's start, we need to download one python module named "pywhatkit".

STEP 1: installation of module pywhatkit.
you just have to run this command in your system command prompt(or terminal).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecolx1lnwqvergunsn47.png)

STEP 2: Now after you have successfully installed this module in your system then you have to import it into your code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5di5ve0x1sxvdn4qt12.png)

STEP 3: Now it's time to use the method text_to_handwriting().
you have to pass 3 pieces of information (arguments) to this method:
 	1. Text you want to convert in handwriting.
	2. path where you want to save this file.
	3. color of the text in rgb format as tuple.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmjbf18xtu2h0hcbvp06.png)

an important point to remember: you have to use a double forward slash or backward slash(\\\ or //) according to your device while defining the path as you can see in the above picture.

And now you can check your directory which you passed as an argument in the method, you will get your file there.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wp7xa1pzmo1vflvlo5gc.png)

Hope this post has helped you.
thankyou.
Navbar hide and show on Scroll using Custom React Hooks
Tags: react, navbar, webdev, css
Published: 2021-07-04 18:52:56



Making a Custom React Hook

code: 

```jsx
/**
 * useScroll React custom hook
 * Usage:
 *    const { scrollX, scrollY, scrollDirection } = useScroll();
 */

 import { useState, useEffect } from "react";

 export function useScroll() {
	// storing this to get the scroll direction
   const [lastScrollTop, setLastScrollTop] = useState(0);
	// the offset of the document.body
   const [bodyOffset, setBodyOffset] = useState(
     document.body.getBoundingClientRect()
   );
	// the vertical direction
   const [scrollY, setScrollY] = useState(bodyOffset.top);
	// the horizontal direction
   const [scrollX, setScrollX] = useState(bodyOffset.left);
	// scroll direction would be either up or down
   const [scrollDirection, setScrollDirection] = useState();
 
   const listener = e => {
     setBodyOffset(document.body.getBoundingClientRect());
     setScrollY(-bodyOffset.top);
     setScrollX(bodyOffset.left);
     setScrollDirection(lastScrollTop > -bodyOffset.top ? "down" : "up");
     setLastScrollTop(-bodyOffset.top);
   };
 
   useEffect(() => {
     window.addEventListener("scroll", listener);
     return () => {
       window.removeEventListener("scroll", listener);
     };
   });
 
   return {
     scrollY,
     scrollX,
     scrollDirection
   };
 }
```

## Styles

I am using css-in-javascript to set the visibility of the nav bar but you can use whatever you like.

```jsx
const styles = {
    active: {
      visibility: "visible",
      transition: "all 0.5s"
    },
    hidden: {
      visibility: "hidden",
      transition: "all 0.5s",
      transform: "translateY(-100%)"
    }
  }
```

## Finale code would look like this

```jsx
import React from 'react';

import {useScroll} from './../../hooks/useScroll'

export default function Navbar() {
  const { y, x, scrollDirection } = useScroll();  

  const styles = {
    active: {
      visibility: "visible",
      transition: "all 0.5s"
    },
    hidden: {
      visibility: "hidden",
      transition: "all 0.5s",
      transform: "translateY(-100%)"
    }
  }

    return (
        <nav className="Header" style={scrollDirection === "down" ? styles.active: styles.hidden}   >
        <Link to="/" className="Header__link">
            <img src={Logo} height="50px" width="auto" alt="logo"/>
            <div className="Header__link__title">
              Chronology
            </div>
        </Link>  
        <ul className="flex">
            <li>
              <Link to="/about" className="Header__link">About</Link>
            </li>
            <li>
              <Link to="/blog" className="Header__link">Blogs</Link>
            </li>
          </ul>
        </nav>       
    )
}
```

I know this is very lazy writing but it's already midnight. 

I will write in detail about it. 

I hope it help someone.
How to add an image to your website using HTML...
Tags: html, css, codenewbie
Published: 2021-07-04 18:44:08

Adding images to your web page can really make it stand out.  When  you find the right image, it just pops! You can find images on such sites as www.istockphoto.com or www.gettyimages.com. You will want to create an 'images' folder to store them in. 

You will need to use the `<img>` element and it must include two attributes:  
1.  src : This tells the browser where your image is being stored
2.  alt :  This is where you can add text to show in place of the image if for some reason the image fails to show up on your web page.  For example, "Image of Company Logo". 
The `<img>` tag doesn't need a closing tag. 

Your image is added like this:

`<img src="images/dog.jpg" alt="A picture of a dog" />`

You can add things like height and width to them by adding on to the above example.

`<img src="images/dog.jpg" alt="A picture of a dog" 
width="600" height="450" />`

You can also add images by using CSS using background-image property.  But thats for another day!  Happy coding!
Livestream: Building E-Commerce Apps with Flutter & GraphQL
Tags: flutter, graphql, programming, tutorial
Published: 2021-07-04 18:19:57

I'll be doing a live stream this week about building mobile apps with [Flutter](https://flutter.dev) and GraphQL. My plan is to create a simple e-commerce app. For the backend I'll use the [Saleor API](https://saleor.io).

If this sounds interesting and/or you're building (or planning to build) something similar, let me know your questions. I'll happily consider them during the coding! This can be anything related to Flutter, GraphQL or e-commerce.

* [Register to the event](https://zaiste.net/interviews/flutter-graphql-ecommerce-1/)

The stream will happen on [my YouTube channel](https://www.youtube.com/c/zaisteprogramming) - subscribe and click the notificaiton bell.
SpacersJS Official Release: Fun road to 1.0
Tags: spacersjs, javascript, library, showdev
Published: 2021-07-04 17:50:50

---
title: SpacersJS Official Release: Fun road to 1.0
published: true
description: spacers is a JS library that supports multiple spacers for controlling padding/margin, linking functionality & much more!
tags: #spacersjs #javascript #library #showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j52j98ihxpvvq26tl7df.gif
---

SpacersJS library is all about spacing which provides quick margin & padding.

I was working on Mighty Addons for Elementor by [MightyThemes](https://mightythemes.com/) which required the use of spacers, so I started my search for a library that I thought must be out there with other thousands of libraries on the web, I searched extensively but all to no avail. 😵

There are so many page builders like Webflow, Divi, and Brizy which were using spacers but they haven't kept anything open source.

So, I started the development, thinking it would be a quick & easy job, just four divs around an element that can be dragged to increase spacing. How hard it can be?

![wrong calculation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm3l3z13b8ef02r143jf.jpg)

It took me shy of 1.5 months to create a final Spacers for Mighty Addons by using a bit of BackboneJS and jQuery.

Then I thought, it's high time that there should be a library for Spacers. So, created a library in VanillaJS without any BackboneJS or jQuery.

The top use-cases are web page builders, no-code tools, and [insert any other creative use-case here 🧠].

It's a tiny library of fewer than 7kb of minified CSS & JS files.

This is my first workable JS library and there are many improvements to be done. Any feedback is greatly appreciated.

There'll be a follow-up technical post about how I created Spacers.

{% github actuallyakash/spacers %}

Check out an extensive [demo of spacers](http://actuallyakash.github.io/spacers/).

## Code 👨‍💻

All that is needed is just 3 lines of code to initialize spacers.

```javascript
spacers({
    element: '.element-unique-class'
});
```
More properties [here](https://actuallyakash.github.io/spacers).

## Thank You! 🙇‍♂️

There are so many changes or bugs to be fixed. Issues and feedback is greatly appreciated and stars too 😀

<hr>
<center>Feel free to contribute to the project!</center>
<hr>

## Links

### GitHub
 - https://github.com/actuallyakash/spacers

#### NPM
 - https://www.npmjs.com/package/spacersjs

#### Documentation
 - https://actuallyakash.github.io/spacers

<hr>

## TL;DR

Here's the [documentation and demo for the SpacersJS](https://actuallyakash.github.io/spacers/).
An introduction to methods in VueJs
Tags: vue, javascript
Published: 2021-07-04 17:45:03

In the last article we began our journey with Vue, going deeper, we'll introduce methods, which are going to be very useful for us. In this article we are only going to see a simple method.

In vue we can launch a method even without an event, like this for example:

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- importing vue js dev library -->
	<!-- development version, includes helpful console warnings -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<title>My vue Test</title>
</head>
<body>
	<div id="app">
		{{ sayHello() }}
	</div>
	<script type="text/javascript">
		var app = new Vue({ //instantiating the vue instance
		  el: '#app', //we select where vue is going to work in the DOM
		  data: {
		    name: 'Mattia'//this are the data
		  },
		  methods: {
		  	sayHello: function() {
		  		return "Hello there, " +this.name;
		  	}
		  }
		})
	</script>
</body>
</html>
```
this is the resulting page:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9ucrrwv9sx1yo7jyxut.png)
 
<h3>Handling events</h3>
We can change datas or call functions with the directive "v-on:<event>". Directives in Vue are like attributes that we can assign to different HTML elements.
This particular button for example, is going to change the name shown by our sayHello method:

```JAVASCRIPT
<button v-on:click="name = 'Miyazaky'">My name is Miyazaky!</button>
```

Of course, methods can have multiple lines of code, in this case, we can call a function using the name:

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- importing vue js dev library -->
	<!-- development version, includes helpful console warnings -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<title>My vue Test</title>
</head>
<body>
	<div id="app">
		{{ sayHello() }}
		<br>
		<button v-on:click="changeName()">My name isn't {{ name }}!</button>
	</div>
	<script type="text/javascript">
		var app = new Vue({ //instantiating the vue instance
		  el: '#app', //we select where vue is going to work in the DOM
		  data: {
		    name: 'Mattia'//this are the data
		  },
		  methods: {
		  	sayHello: function() {
		  		return "Hello there, " +this.name;
		  	},

		  	changeName: function() {
		  		if (this.name === "Mattia") {
		  			this.name = "Miyazaki";	
		  		} else {
		  			this.name = "Mattia";
		  		}
		  	}
		  }
		})
	</script>
</body>
</html>
```