teleren/devto huggingface dataset:
API Testing - How to manage API Test suites in vREST NG Application?
Tags: testing, tutorial, apitesting, vrest
Published: 2021-10-21 06:01:57

This video #tutorial explains how you may quickly manage your API Test suites in vREST NG Application via UI.

vREST NG is a script less API test automation tool. It helps you to write maintainable test cases quickly for functional and regression testing of APIs. You can download and install the vREST NG application directly on Windows, OSX, and Linux via our website.

**Video Link:** https://youtu.be/rIOFNiUhBvo

**API Testing Tutorials Playlist:** https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

*Important Links:*
1. [vREST NG Website](https://vrest.io/?utm_source=devto&utm_medium=devto-desc&utm_campaign=video)
2. [Community Chat](https://discord.gg/NtRa7kw)
3. [Book a Live Demo](https://meetings.hubspot.com/dheeraj-aggarwal)

Please do like and share if you found this video helpful and let the voice heard by the testing community. Also, let us know your feedback by commenting on this post.
How to: Use SourceTree, with git hook via lefthook, running bundle exec with asdf managing Ruby versions
Tags: ruby, git, asdf, sourcetree
Published: 2021-10-21 05:40:35

That's a long title huh?

Anyway I got a combination of software I use with an issue that I cannot find the answer on the Internet.

## Background
At the time of writing, I use
- SourceTree 3.2.1
- Git (latest, version doesn't matter)
- lefthook 0.7.7 (as git hook manager)
- asdf with ruby plugin

### Lefthook Setup
I have hook scripts inside folder `./.githooks` under project root (all version controlled)
```sh
git config core.hooksPath .githooks
brew install lefthook
```

Workaround for source tree for path issue
```shell
sudo launchctl config user path `echo $PATH`
```
Ref:
- https://community.atlassian.com/t5/Bitbucket-questions/SourceTree-Hook-failing-because-paths-don-t-seem-to-be-set/qaq-p/274792#M33050
- https://apple.stackexchange.com/questions/51677/how-to-set-path-for-finder-launched-applications/198282#198282


## Issue
I have recently switched from RVM to asdf. 
After a restart of my computer I realize that one of my git hooks running `bundle exec rubocop` no longer works.
The workaround above works for RVM.

## Investigation
- `lefthook` binary is found (with workaround above)
- `bundle` is using the binary from MacOS built-in Ruby

## Solution
In my hook script `pre-commit`
Add the following before the code running lefthook
```sh
# ASDF compatibility
if test -f /usr/local/opt/asdf/libexec/asdf.sh ; then
  . /usr/local/opt/asdf/libexec/asdf.sh
fi
if test -f /opt/homebrew/opt/asdf/libexec/asdf.sh ; then
  . /opt/homebrew/opt/asdf/libexec/asdf.sh
fi

```
{ Hacktoberfest 2021-frontend work}
Tags: programming, hacktoberfest, opensource, github
Published: 2021-10-21 05:16:30

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- Yeah so this is Sagar Gaud ,I am very much curious about digital ocean depths how everything goes in the current curriculum and I always ready do multiple things at a time.   --> 

### Background

<!-- so currently I am pursuing BTech from computer science and engineering branch and also pretty much familiar about coding culture, from my college I have heard about Hacktoberfest but I was familiar about open source and GSOC and I am weekly participates in codechef contests and long challenges to enhance my skills ,usually I code in C++.  -->

### Progress

<!-- It was great experience in Hacktoberfest 2021 ,in starting days I have contributed in issues section then I have gone for frontend work.  -->

### Contributions

<!--  I have very much passionate about solving coding problems so I have chosen to solve problem that they have provided for us.  -->


### Reflections
<!-- it was wonderful time that I have spend in Hacktoberfest 2021, I Have learned to much about the open source contribution and I got very good connection which can help me further in my future for uplift my career on next level and I would like to participate myself again in this curriculum and my next step is to go for google summer of code (GSOC) for solving real-world problem and meeting new mentors to give a next level edge my career -->
Best dev tool ever!!
Tags: javascript, webdev, html, productivity
Published: 2021-10-21 05:14:46

Hey everyone, 
Imgsrc.space is the best Placeholder service ever. It's just like searching on google images but *you won't even need to leave your coding environment*. We have a vast a library of around **3 million** images and videos, so all you have to do is enter your search term and we will do  the rest. Totally free. 
[Imgsrc.space](https://imgsrc.space)


#How To Use Our Placeholders?
Well there are 2 ways to use them
1. The easy way - Works everywhere no platform dependence
2. The easier way - Works in your web pages with a js library

##The easy way

###Get a specific image
Just add the search term you want at the end of the url after / and we will deliver it. Simple.
```
https://imgsrc.space/cat
```
![Image of a cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9xsmwlp7lhqvj0nk6u9.jpg)

###Resizing images
Imgsrc.space can also resize the images for you. To enter your desired dimensions put an "?" at the end of the search term and then your enter your desired height and width. Here "h" stands for height and w stands for width. They must be separated by an &

```
https://imgsrc.space/architecture?h=400&w=400
```
![Image of architecture 400by400](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xouey169tek2r5u8gi9t.png)

###AutoResizing images
If you only provide a single dimension parameter (i.e only height or width) Imgsrc.Space would automatically resize the other parameters accordingly


```
https://imgsrc.space/paris?h=400
```

![Image of Paris](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkxo4z2btrw3ue3jh595.png)

###Getting a specific Video
To get a specific image just enter the search word in the image source after a dot and a space followed by an -v

```
https://imgsrc.space/ocean-v
```
[try it](https://imgsrc.space/ocean-v)



##The easier way
If you are writing html pages, then we have a good news, you can use our js library to make things easier.

```
<script src="https://cdn.jsdelivr.net/gh/imgsrc-space/imgsrc.space-js-library/main.js" > </script>

``` 
Copy and paste the above script tag to the ***TOP*** of your html page (in the head tag), and that's it.

Now to use a image just enter a "dot followed by a space and then your search term ".Here are some examples of what you can do with it:

```
<img src=". cow" >
```
```
<img src=". dog?h=500&w=70" >

```
```
<img src=". sunset?w=700" >
```
```
<video> <source src=". car-v" type="video/mp4"> </video>

```
You can find more details in this [documentation](https://imgsrc.space/documentation.src/index.htm#Using-our-JS-library)

Hope this would save you guys some time. Happy coding 😀👍🏼
Use Hosted Graphite to monitor real time execution results of your jmeter load test
Tags: softwaretestingcompany
Published: 2021-10-21 05:04:06

Hosted Graphite is a provider of metric collection, storage and visualisation services. This service can also be used to see the jmeter load test runtime statistics. For more details, pls check https://www.hostedgraphite.com

To start with

 Create an account at hostedgraphite.com
 After account creation an API key and URL endpoints for each account will be provided by hostedgraphite
Once you have this information, we are good to create our jmeter test plan. Jmeter 2.13 has introduced a new listener called “Backend Listener” which allows you to send test execution results data to Graphite Backend that can be used to:

 See real time execution results
 Nice graphical metrics
 Compare 2 or more load tests
 Storing monitoring data as long as JMeter results are in the same backend
For more details please refer to: http://jmeter.apache.org/usermanual/realtime-results.html

Backend listener configuration
graphiteHost: Graphite or InfluxDB (with Graphite plugin enabled) server host. In case of hostedgraphite you can pass endpoint URL which you will get in your hostedgraphite account.
graphitePort: Graphite or InfluxDB (with Graphite plugin enabled) server port, defaults to 2003. In case of hostedgraphite you will find port for your endpoint URL in your hostedgraphite account.
rootMetricsPrefix: Prefix of metrics sent to backend. Defaults to “jmeter.” In case of hostedgraphite, you will need to send your API key as prefix as well so that your data can be mapped with your account in hostedgraphite.
summaryOnly: Only send a summary with no detail. Defaults to true.
samplersList: Semicolon separated list of samplers for which you want to report metrics to backend. For example as per above screenshot we are sending metrics for 4 samplers “home;blogs;about;docs”
Percentiles: The percentiles you want to send to backend. List must be semicolon separated.
Test Plan
 Add backend listener to your test plan
Start executing your test
 Open your hostedgraphite account and go to dashboard
 Create a new dashboard and add graphs to dashboard panels
 Edit graphs to define metrics as per your requirements
Backend listener exposed few useful metrics like:

Virtual user metric
Min active threads
Max active threads
Mean active threads
Started threads
Finished threads
Response time metric
Count: count of requests
Min: minimum response time
Max: maximum response time
Percentile: response time percentile (90, 95, 99)

To get us know more at https://www.fleekitsolutions.com/
After refresh scroll page to Top/Middle/Footer.
Tags: vue
Published: 2021-10-21 04:59:51

Here we learn how can we scroll our page onclick button or after Reload page.

simple we adding ref in our html tags where you want to scroll page.
example 
```
< div class="top" ref="goToTop"> ... < /div >
or
< div class="middle" ref="goToMiddle"> ... < /div >
or
< div class="footer" ref="goToFooter"> ... < /div >
```


in vue js we handled
```javascript
// Create method
scrollToElement(ref) {
    window.scrollTo(0,0);
    this.$scrollTo(ref, 1000);
},

// If want to after refresh then create mounted()

mounted() {
     this.scrollToElement(this.$refs.goToTop);
}, 
// for top use goToTop , for middle use goToMiddle , for footer use 

// If want to after onclick then create method
onclickMethod() {
     this.scrollToElement(this.$refs.goToTop); 
}, 
```
I hope it will help you.
Adding a Swagger UI page to your Express REST API
Tags: node, express, rest, openapi
Published: 2021-10-21 04:55:38

This article is a continuation of a series about how to build a REST API in Node.js. In the [preceding article](https://dev.to/bhaeussermann/adding-request-and-response-validation-to-your-express-rest-api-36ia) of this series we added request and response validation that is based on an [OpenAPI](https://swagger.io/docs/specification/about/) spec of the API. We used the [swagger-jsdoc](https://github.com/Surnet/swagger-jsdoc) package to generate this OpenAPI spec from comments in our code that annotate the REST operations.

Consumers of our API won't know how to make requests to it without some form of documentation. The `/swagger.json` route which we added returns the OpenAPI spec as a JSON string which serves this purpose. However, this JSON is not very easy to interpret for humans. In this article we will show how the OpenAPI spec can be used to render a [Swagger UI](https://swagger.io/tools/swagger-ui/) page which serves as a more visual and interactive documentation for our API.

Add the [swagger-ui-express](https://github.com/scottie1984/swagger-ui-express) package as a run-time dependency.

```
npm install --save swagger-ui-express
```

Then in *server.js* we register Swagger UI at the route `/swagger` just after the statement that registers the `/swagger.json` route:

{% gist https://gist.github.com/bhaeussermann/3c2bc8f3312ac5195dcedc4e5c18f8a0 %}

Loading `localhost:3000/swagger` in the browser will now show the Swagger UI page for our API. This will show all endpoints and operations that are available and even allow to try out the calls from the browser!

![Screenshot 2021-09-08 at 11-28-29 Swagger UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2vchnh5z8pwsyuiq7f2.png)

While we now have our API spec presented in a nice GUI, consumers of our API may still need access to the OpenAPI JSON definition to import into their client-side tooling. We can add a link to the already-defined `/swagger.json` route to the Swagger UI page by changing the previous `app.use()` statement to the following:

{% gist https://gist.github.com/bhaeussermann/07b5777489681858c5380b6631829a7b %}

This will make Swagger UI read the API spec from the specified route and it will display a link to it on the page.

*The code for the API developed in this series of articles is available on GitHub [here](https://github.com/bhaeussermann/node-js-rest-api).*
Focused state border width hack with Elm-UI
Tags: elm, elmui, beginners, frontend
Published: 2021-10-21 04:49:58

I was recently trying to fix the focused styling for textfields in our company design system (https://github.com/PaackEng/paack-ui), and ran into this issue where I wasn't able to update the border width as per the design for the focused state. 

So elm-ui lets you specify attributes for the focused state, but these have the type "decorative" attr (apparently the decorative label has something to do with the ephemeral styles). 

Unfortunately, border width property has the type attr.  After banging my head for a while I realized a good hack - instead of setting the border width for the focused state, I just ended up setting an explicit shadow:

shadow { color = Colors.navyBlue700, offset = ( 0, 0 ), blur = 0, size = 1.2 }

Works perfectly !!!
Building offline mobile IDE application to run Javascript code only 
Published: 2021-10-21 04:47:47

my professor ask us to build a simple offline IDE application to run basic programming code, written by the user, and I want JavaScript as a language, I'm using react native platform to create an app, my question is how can I create an Offline IDE to run the JavaScript code?, I just can't find any tutorial on how to develop a simple IDE in mobile application or documentation ,I'm just a beginner in mobile development, your help and opinion is greatly appreciated.
#4 🌃🚀 ICAF Conference Management System
Published: 2021-10-21 04:47:07

This is a `Conference Management System` implementation of 3rd Year 1st Semester - Application Frameworks(AF) module. Here we are developed the system to manage the conferences as a web application according to the given requirements. There are 4 roles in the system; they are *Admin*, *Editor*, *Reviewer*, & *User*. 

**Conference Management** is one of the function we have identified from the given requirements. The Editor must create a conference and those created conference should get approval from the Admin before display them in main page. And also Editor can delete and view the conference details. You can view the deployed system [here](https://icaf-frontend.herokuapp.com/).
##### Find out the Backend Project [here](https://github.com/Dulyaaa/ICAF_Backend).

`⭕ Changes in the Repository reflects on the server with a new build.⭕`

## Language 
![JavaScript](https://img.shields.io/badge/Language-JavaScript-yellow)
![HTML](https://img.shields.io/badge/Language-HTML-green)
![CSS](https://img.shields.io/badge/Language-CSS-blue)
![Design](https://img.shields.io/badge/Design-Bootstrap-purple)

## Technology 
* ![ReactJs](https://img.shields.io/badge/FrontEnd-ReactJs-blue)
* ![SpringBoot](https://img.shields.io/badge/BackEnd-Spring_Boot-green)
* ![MongoDB](https://img.shields.io/badge/Database-MongoDB-green)

## My contribution to the project(Conference Management):
This function implementation covered the:-
* Home Page
* Keynote Page
* Conference Page
* View More Details Of Conference Page 
* Past Proceedings Page
* Change Status of Conferences as an Admin
* Create Conference as an Editor
* Delete Conference as an Editor


## Sample user interfaces of working project:

| <img alt="1PNG" height=800 width=700 src="https://user-images.githubusercontent.com/57215584/127432826-62cf98a5-bdc0-434f-8024-37a3e7d4cf94.png"> |<img  alt="2PNG" a src="https://user-images.githubusercontent.com/57215584/127434916-ff2b5047-c3a5-4723-9480-270d5eab518c.png">
|:--:|:--:|
| *`figure 1.1: Home Page`* | *`figure 1.2: KeyNote Details Page`* |

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/127435135-bf65dffd-6c70-42bd-adcc-f06cadabf094.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/127435456-dd06b266-2ba4-4d42-b0bb-e7139891913e.png">
|:--:|:--:|
| *`figure 1.3: All Approved Conferences`* | *`figure 1.4: Conference More Details`* |

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/127435620-6a306408-5b32-4a8b-ae04-068298dccaa3.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/127435782-20bece7c-7fd8-48f1-8569-fdc80e260992.png">
|:--:|:--:|
| *`figure 1.5: Past Proceedings`* | *`figure 1.6: Editor Dashboard`* | 

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/127435973-d2c4707f-56a9-4b95-8137-719770a4665b.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/127436205-8b2b91da-ec07-4f85-969f-aa8aead15678.png">
|:--:|:--:|
| *`figure 1.7: Create New Conference`* | *`figure 1.8: Change Status By Admin`* |
#3 🚛 Transportation and Scheduling Management System
Published: 2021-10-21 04:46:40

This is my individual part of the [Factory and Sales Management system](https://github.com/Dulyaaa/ITP_Factory-and-Sales-management-System) implementation of 2nd Year 2nd Semester - Information Technology Project(ITP) module. Here we try to solve the difficulties faced in the company when making a ready-made garment and distribution. As a solution we have created a Web application, whereas this is a part of the Web application, implemented with ReactJS, SpringBoot and MongoDB.

## Language 

![JavaScript](https://img.shields.io/badge/Language-JavaScript-orange)
![HTML](https://img.shields.io/badge/Language-HTML-green)
![CSS](https://img.shields.io/badge/Language-CSS-blue)
![Design](https://img.shields.io/badge/Design-MaterialUI-blue)

## Technology 
* ![ReactJs](https://img.shields.io/badge/FrontEnd-ReactJs-blue)
* ![SpringBoot](https://img.shields.io/badge/BackEnd-Spring_Boot-green)
* ![MongoDB](https://img.shields.io/badge/Database-MongoDB-green)

### Transportation and Scheduling Management (My Contribution):
This implementation part covered the:-
* Take order details from customer
* Assign a vehicle for each order
* Delete Order
* Generate order details report
* Add new vehicle details
* Update, delete vehicle details
* Generate monthly vehicle report

* ⚠ No order details are allowed to update (because of realiabilty of customer and seller)

**Frontend project - [Here](https://github.com/Dulyaaa/Transportation_and_Scheduling_Management/tree/construct/src/main/transportation)**

#### Sample user interfaces of woring project:

| <img alt="1PNG" src="https://user-images.githubusercontent.com/57215584/96396036-ced13e80-11e3-11eb-8659-d1fe565099b3.png"> |<img  alt="2PNG" a src="https://user-images.githubusercontent.com/57215584/96954886-fd1b8a80-1511-11eb-992a-2105756ecd3d.png">
|:--:|:--:|
| *`figure 1.1: All order details`* | *`figure 1.2: Add new order`* |

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/96954945-1e7c7680-1512-11eb-8369-622ff0b76bc6.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/96954986-3522cd80-1512-11eb-91b5-ae2d0e2ec5bf.png">
|:--:|:--:|
| *`figure 1.3: Delete and gnerate report of order`* | *`figure 1.4: Assign avehicle for each order`* |

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/96956477-dbbc9d80-1515-11eb-8930-3858fb54215b.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/96956647-52599b00-1516-11eb-854d-884518505ee3.png">
|:--:|:--:|
| *`figure 1.5: Vehicle details`* | *`figure 1.6: Add new vehicle`* |

| <img alt="2PNG"  src="https://user-images.githubusercontent.com/57215584/96956725-81700c80-1516-11eb-9f50-07cffa9dd3d7.png"> | <img  alt="2PNG" src="https://user-images.githubusercontent.com/57215584/96956804-ae242400-1516-11eb-8b2f-1b7161d01dc1.png">
|:--:|:--:|
| *`figure 1.7: Update and generate report of vehicle details`* | *`figure 1.8: Report of order details `* |
#2 🛍E-Commerce Mobile App🛒
Published: 2021-10-21 04:44:27

This is a group project for 2nd Year 2nd Semester - Mobile Application Development (MAD) module, mini-project assignment. 

## About
Android mobile application for online shopping. 

## Language 
* ![Java](https://img.shields.io/badge/Language-Java-brown)
* ![Firebase](https://img.shields.io/badge/Databse-Firebase-yellow)

## Functions
* User Management
* Product Management (My Contribution)
* Order Management 
* Rates Management

### My Contribution for this project was:
Product management.

#### Screenshot of Working project(Product Management):

| <img width=500 alt="1PNG" src="https://user-images.githubusercontent.com/57215584/97003224-be5cf300-1558-11eb-8e23-0de5cb569482.png"> |<img  width=500 alt="2PNG" a src="https://user-images.githubusercontent.com/57215584/97003235-c4eb6a80-1558-11eb-8145-7687bafb9a5f.png">  | <img width=500 alt="1PNG" src="https://user-images.githubusercontent.com/57215584/97003241-c87ef180-1558-11eb-9e19-cf5dc5c33674.png"> |<img  width=500 alt="2PNG" a src="https://user-images.githubusercontent.com/57215584/97003250-cc127880-1558-11eb-84df-dde004b34195.png"> | <img width=500 alt="1PNG" src="https://user-images.githubusercontent.com/57215584/97003258-d03e9600-1558-11eb-936b-a782468a19af.png"> |<img  width=500 alt="2PNG" a src="https://user-images.githubusercontent.com/57215584/97003275-d5034a00-1558-11eb-91fb-01a82d9a6889.png">
|:--:|:--:|:--:|:--:|:--:|:--:|
| *`figure 1.1: Add new product details`* | *`figure 1.2: Admin View`* | *`figure 1.3: Update product details`* |*`figure 1.4: Delete Product`* |*`figure 1.5: Customer View`* |*`figure 1.6: Product more details`* |

> `You can view in GitHub Repo👇`

### GitHub Repo 📌
{% github Dulyaaa/https://github.com/Dulyaaa/E-commerce_mobile_app no-readme %}
Divtober Day 20: Journey
Tags: codepen, divtober, css, art
Published: 2021-10-21 04:41:32

---
title: Divtober Day 20: Journey
description: My entry for divtober day 20: journey. A landscape from the wizard of Oz with a hot air balloon up in the sky.
published: true
tags: codepen,divtober,css,art
series: divtober
---

I tried to do something different and it ended up being weird (and not even the good kind of weird). The idea was creating a landscape from the wizard of Oz with a hot air balloon up in the sky... but it ended up more abstract/minimalist.

Anyway, here it is:

{% codepen https://codepen.io/alvaromontoro/pen/GRvjQvo %}

A landscape from the wizard of Oz with the yellow brick road at the bottom, Emerald City in the middle, and a hot air balloon up in the sky.
Getting Started With Appwrite's Apple SDK 📱💻
Tags: ios, swift, mobile, appwrite
Published: 2021-10-21 04:40:39

{% youtube Bk_OFaWDqB8 %}

Earlier this week, we announced the official release of [Appwrite 0.11](https://dev.to/appwrite/building-apps-just-got-swifter-announcing-appwrite-v011-4g62) and the new Appwrite SDKs for Apple devices and Swift. Yesterday we had a short live session with Aditya, Jake, and Damodar, demonstrating how you can quickly start building apps for Apple devices with Appwrite as your backend server.

To learn more, you can check our official Appwrite 0.11 announcement post, and check our [Apple](https://github.com/appwrite/sdk-for-apple) and [Swift](https://github.com/appwrite/sdk-for-swift) SDKs. If you have any further questions you can join the Appwrite team and community on the [Appwrite Discord server](https://appwrite.io/discord).