teleren/devto huggingface dataset:
API Testing - Compare Expected vs Actual JSON API Response
Tags: testing, api, qa, vrestng
Published: 2021-02-18 06:34:38

See, how you may quickly compare expected and actual JSON API response in vREST NG.

In our future sessions, we will see more advanced approaches to validate your complex API responses like a piece of cake. So stay tuned to our video series.

Youtube Link: https://youtu.be/ugSXeDv0-vE

Youtube Playlist: https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

vREST NG is an enterprise-ready application for Automated API Testing. You can download and install the vREST NG application directly on Windows, OSX, and Linux via our website.

*Important Links:*
1. [vREST NG Website](https://ng.vrest.io/?utm_source=devto&utm_medium=devto-desc&utm_campaign=video)
2. [Contact Email](support@vrest.io)
3. [Community Chat](https://discord.gg/NtRa7kw)
4. [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.
Project 48 of 100 - Another Small Business Website Draft built with React
Tags: 100daysofcode, react, javascript, codenewbie
Published: 2021-02-18 06:27:56

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-48-biz-page-profile-page-front-end.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-48-small-biz-frontend)

No major blog post today. Just a draft UI for a small business page. It's fun to build these! 

What are your favorite D2C apps?

Also, what are your thoughts on using emojis in production apps and websites? It seems pretty normalized nowadays.
Manage environment variables with decouple in Python
Tags: python, decouple, environment
Published: 2021-02-18 05:40:58

In this post we're going to talk about how to set up environment variables for any Python project that we develop.

Python-decouple is a library that helps you separate the settings parameters from your source code. Its magic appears when the parameters related to an instance of the project, goes to an environment file. The parameters related to the project, goes straight to the source code.

## Install
`$ pip install python-decouple`

## Usage
The first one create a `.env` file in the root of your project.
```[settings]
TOKEN_KEY = 1232331sadsads8768:dsdsds32434-LJSAS08f
```
If you are working with Git, update your `.gitignore` adding the `.env` file.
Then let's create `cfg.py` file.

```
from decouple import config
TOKEN = config('TOKEN_KEY')
```

And finally, you already can to use the project' parameters in your `main.py` file.

```
from cfg import TOKEN
```
Implementing Magic-Link
Tags: webdev, jwt, elixir, programming
Published: 2021-02-18 05:20:55

I wrote a post previously on why I will use Magic Link for the authentication flow. You can read it more [here](https://dev.to/tehaisperlis/why-i-m-using-magic-link-for-my-website-login-flow-20c5).

The flow is simple, user submit their email and the server will sent a link. User need to click on the link in order to login.

Some of the requirement needed is
1. The link need to be expired after a certain amount of time.
2. The link can only be used by the device that requested it. Meaning that if I submit my email on my laptop, I cannot open the link on my phone. It has to be from the same browser.
3. The link can only be used once.


For [Logname](https://www.logname.com), the link is just `https://www.logname.dev/magic_link/login?token=#{token}`

The token is in JWT format and the payload contain a unique id of the user as well as a device id.

```elixir
%{
 unique_id: unique_id,
 device_id: uuid_string 
}
```

Beside sending the link to the email provided, the server will also response to it with device_id to be stored inside the browser cookie.

This way, when the user click on the link on the same browser, it will send the payload as well as the device_id cookie, the server will check whether the device_id is the same and if it is, login the user. 

That's it. 

If you would like to try it out. You can register [here](https://www.logname.dev/users/register) and login [here](https://www.logname.dev/users/log_in).
How to deploy production environment rails 6
Tags: rails
Published: 2021-02-18 05:06:01

at other server run :
`EDITOR=vim rails credentials:edit`

add and commit 
config/secrets.yml.enc

then push and pull to production server.

copy master key and put into production server ENV using `config/application.yml` which will be loaded using figaro gem. The format is like this :

`RAILS_MASTER_KEY: masterkeyhere`

then start your server in production environment.

* Note that not to commit application.yml , and better to add it to gitignore.
7 Common eCommerce Mistakes to avoid in 2021
Tags: ecommerce, industry, ecommercemistakes
Published: 2021-02-19 14:14:45

---
title: 7 Common eCommerce Mistakes to avoid in 2021
published: true
date: 2021-02-18 04:50:08 UTC
tags: #ECommerce,#Industry,#eCommercemistakes
canonical_url: https://www.botreetechnologies.com/blog/7-common-ecommerce-business-mistakes-to-avoid/
---
![common eCommerce business mistakes](https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/common-ecommerce-business-mistakes.png)

Studies show that around 90% of eCommerce businesses fail within 120 days of their launch. While an eCommerce store is a lucrative opportunity, you can often underestimate the risks from the initial stages.

If you are on the verge of starting an eCommerce business, forget the rewards that come with it. You can hire a professional [eCommerce web development company](https://www.botreetechnologies.com/ecommerce-app-development) that can set your path. But the crucial aspect is what mistakes to avoid so that you can succeed in the eCommerce industry.

There are a billion mistakes that you will make. However, most of them would be minor and easily fixable. In this article, we will discuss the 7 most common mistakes that e-commerce entrepreneurs usually make. By understanding them in detail, you will not panic when they arise and solve them easily.

![Benifits of ecommerce](https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/ecommerce-benefits-1024x963.png)

###The 7 common mistakes ecommerce brands make are as follows – 

1. Starting without any research
2. Unable to define your niche
3. Selecting the wrong eCommerce platforms
4. Poor website design and navigation
5. Selling the wrong products
6. Insufficient promotion
7. Poor customer service

Let’s have a look at all these [e-Commerce mistakes](https://www.botreetechnologies.com/blog/9-costly-mistakes-you-should-avoid-when-starting-an-ecommerce-business) in detail and understand how to solve them when they arise.

The post [7 Common eCommerce Business Mistakes to avoid in 2021](https://www.botreetechnologies.com/blog/7-common-ecommerce-business-mistakes-to-avoid/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
New Grounds, Jump Into A New Career
Tags: programming, career, beginners, motivation
Published: 2021-02-17 21:46:02

The other day I was talking to one of my teachers at the bootcamp I'm doing right now and we were at the topic of bringing the A game and what will happen after the bootcamp.

It came to my attention that I do not have any true expectations after the course is over, you know just casually hoping I'll be able to find a job but whatever happens, happens. This is pretty crazy from my part I think, I discovered I've lost motivation slowly, falling into the comfort zone.

This is probably the first time in my life I am in this place, finally feeling some peace of mind, trusting in what I do at my job, money is not great but it works for my current lifestyle. So, yes, the comfort zone is nice.

After thinking about this so much and trying to reach a conclusion, it hit me on the face, I'm scared. I'm scared that I will not succeed, that I won't be able to be a provider, that I will disappoint people at my current job because they need me, IM SCARED that I don't have a safe to catch me if I fall anymore, I'm on my own with responsibilities that only I can take care of. 

**Let's Be Real**

I must say, society puts so much pressure on each individual, even if we don't realize it. Truly unbelievable, mostly because we live to pay for things that maybe at the end of the day are not a necessity but they become these comfort things that we do not want to loose, they help us soften the actual circumstances.

It may be hard to explain but, think of this, if all the money you made was put towards things that made your life better but aren't the things that you want, for example, investments, education, insurance, fixing your car/house, whatever you make it. These are things that in the long run will make your life better but it's not as cool as getting a new tv, going out to eat or buying video games.

So now here I am... Trying to gather the strength and motivation to be better, to beat my fears and concerns. To make the leap of faith, for sure this will take me a while to prepare for but at the end of the day, if we don't follow our dreams, what are we? Just some pieces of meat getting by? I don't know. I'm real tired of just getting by and fell into a comfy spot, now I got to get out.

Truly dang lol. This is a lot of inner fighting and reflecting, maybe to some it comes easier to see, to me, it's hard sometimes to really know what is happening deep inside my head.

**Sum It Up**

To you out there, if you got this far.
You got this, take your time but not too much lol, opportunities come once and you have to hop on the train, sometimes not being ready better even, most of the times not being ready but that's the magic, once you get through and look back. Man, you would be so proud of yourself.

I believe it is worth taking a shot, if you fail, you fail, try again. Trust me, coming from a control and calculating freak like me, I've done it before and got beyond my imagination. Now once again I am summoned to adventure. Well, here I go.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx9xwqwwk7djio68wftm.jpg)
Dead Laptop
Tags: webdev, learning, beginners, devjournal
Published: 2021-02-18 03:49:38

I had my dev environment all set up in Linux and now my laptop won't turn on.

I'm frustrated because I had a good learning streak going.

I'll use Replit till I can get a local environment going again.

I didn't expect to use an online IDE, but I'd rather keep learning than get hung up on having a particular workflow.

https://repl.it/

EDIT: added link to Replit.
View your GitHub Contribution Graph as an animated skyline + 3D print it
Tags: github, opensource
Published: 2021-02-18 03:45:46

Over the years there have been many developers have played with the visualisation of their [GitHub contribution graphs](https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/viewing-contributions-on-your-profile). Launched in 2013, people have found many ways to show off their contributions.

From  plastering it across a t-shirt to creating stickers, or having your graph framed, devs love to show off this exciting GitHub profile feature.

{% twitter 1146586911651139584 %}

Developers are even seeing GitHub contributions in everyday life. Hotel bathrooms, random walls, and even trash cans.

{% twitter 963476006647619593 %}
{% twitter 733031993190014976 %}

And don't get us started on how excited gamers get over the contribution graph. From taking it into a Tetris game to rearranging contributions into notable gaming characters.

{% twitter 1281028200793952256 %}
{% twitter 558817833983811584 %}

Now GitHub has taken the contribution graph to the next level. [GitHub Skyline](https://skyline.github.com/) is your contribution graph in 3D. It's a beautiful cityscape with plenty of amazing animations and fancy music. You can grab a screen recording and share yours or simply click the "Share" button to send direct to socials.

{% twitter 1362181990473109505 %}

For those hobbyist and tinkers out there, you can even download your graph as an *.stl file and 3D print it. Find a friend with a printer or send it to your local 3D printing shop. There are so many ways to be creative.

{% twitter 1362213818122706947 %}

Give it a try today. Go to [GitHub Skyline](https://skyline.github.com/) and enter your username. Show us your contribution graphs below or share them direct on socials!
Image Zoom Animation with Scroll Wheel
Tags: html, css, javascript, beginners
Published: 2021-02-18 03:37:43

***Hello guys, in this tutorial we will create Image Zoom Animation with Scroll wheel using JavaScript***

###Common Query###
1. image zoom in zoom out animation CSS
2. image zoom out animation CSS
3. CSS image zoom effect animation
4. css3 image zoom animation
5. image hover zoom animation CSS

**Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to add Image Zoom Animation with Scroll wheel using JavaScript**

First, we need to create three files **index.html** and **style.css** then we need to do code for it.

###Step:1###
***Add below code inside index.html***
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Zoom with Scrollwheel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="zoom_outer">
      <div class="zoom">
        <img src="zoom.jpg" alt="zoom">
      </div>
    </div>
    <script>
      const zoomElement = document.querySelector(".zoom");
      let zoom = 1;
      const ZOOM_SPEED = 0.1;

      document.addEventListener("wheel", function (e) {
        if (e.deltaY > 0) {
          zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`; 
        } else {
          zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`;
        }
      });
    </script>
  </body>
</html>
```
###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  outline: 0;
  overflow: hidden;
}
.zoom {
  height: 100vh;
  width: 100vw;
}
.zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```
###Image Zoom Animation Output:###
{% youtube jxyipdbsvfw %}

###Image Zoom Animation Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/NWdopWj %}
Setting content max-width in 2021
Tags: responsive, minimalism, webdev, css
Published: 2021-02-18 03:34:28

Y'all are familiar with something like this in your code:

```html
<body>
  <div class="wrapper">...</div>
</body>
```

By having a wrapper, you limit the content on your site to not exceed a certain width (e.g. 1000px). The CSS for the wrapper usually looks like this:

```css
.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
```

That has certain limitations, the most glaring one being that you cannot use background color or background image on this element due to the width being set (usually you'd work around this by setting background on `<body>` or nest the wrapper inside another full-width element with background). And honestly, that is so much CSS for something that is kind of trivial.

We are in 2021, and CSS is very powerful. I can actually change the max-width to something more fluid:

```css
.wrapper {
  max-width: min(80vw, 75ch);
  ...
}
```

Awesome! Now my content feels pretty damn comfortable to read in all viewports (it is 80% wide but does not go beyond 75 characters). However, that is not enough. It is still TOO MUCH CSS.

I think I am gonna reduce it to 1 CSS var and 2 lines of padding rules:

```css
:root {
  --page-padding-x: calc((100vw - min(80vw, 75ch)) / 2);
}

.section {
  padding-right: var(--page-padding-x);
  padding-left: var(--page-padding-x);
}
```

Hell yeah! That is more like it. It achieves the same goal of setting a max-width but now I can even use background color or background image without needing to write extra markup.

This element has evolved and I am renaming it to section. I can basically create multiple sections on a page with this and I can give my content some fancy zebra striping if I so desire:

```html
<body>
  <div class="section black">...</div>
  <div class="section white">...</div>
  <div class="section black">...</div>
  <div class="section white">...</div>
</body>
```

As for the CSS var, I can use that on header and footer as well. Woot!

Goodbye, wrapper. I will not miss ya.

EDIT: [demo codepen](https://codepen.io/mikemai2awesome/pen/YzpQzaP).

EDIT 2: [browser support for min()](https://caniuse.com/?search=min())
Classic Snake!
Tags: javascript, html, css, games
Published: 2021-02-18 03:14:09

---
title: Classic Snake!
published: true
description: For fun and practice, I forked a snake game.
tags: javascript, html, css, games
//cover_image: https://direct_url_to_image.jpg
---

I forked this repo (https://github.com/CodingWith-Adam/snake) of the classic snake game from the old Nokia bar-style phones. It was some fun practice, and gives me something to do on my phone besides scroll social media. Check it out. Try it out. File a bug/issue. Fork it. Have fun!

Demo: https://thedevbc.github.io/classic-snake/

Repo: https://github.com/thedevbc/classic-snake
Installing c2ffi on Ubuntu
Tags: c2ffi
Published: 2021-02-18 02:59:48

---
title: Installing c2ffi on Ubuntu
published: true
description: Installing c2ffi on Ubuntu
tags: c2ffi
//cover_image: https://direct_url_to_image.jpg
---

## What is c2ffi?

c2ffi is a tool that converts C and C++ header files to JSON. It is mainly used for creating bindings using ffi.

{% github rpav/c2ffi %}

## Environment

* Ubuntu: groovy
* llvm-11

## Install dependencies

```sh
sudo apt install llvm-dev libclang-dev libclang-cpp10-dev
sudo apt install checkinstall
```

### Cmake 3.17 or above

The version of cmake distributed by APT is 3.16, and it does not work with c2ffi.

```sh
git clone https://github.com/Kitware/CMake
cd CMake
git checkout -b v3.19.2 refs/tags/v3.19.2 # latest version
./bootstrap && make # -j8
sudo checkinstall
```

Check cmake version.

```sh
cmake --version
```

## Build c2ffi

```sh
git clone https://github.com/rpav/c2ffi
git checkout -b llvm-11.0.0 refs/remotes/origin/llvm-11.0.0

cd build
cmake .. # -DBUILD_CONFIG=Release
LIBRARY_PATH=/usr/lib/llvm-11/lib/ make # -j8
sudo checkinstall
```

Check if c2ffi work.

```sh
c2ffi
```

This article is over.
Have a nice day!
Design thinking for developers
Published: 2021-02-18 02:06:49

In wanting to get better at design. I came across this interview of David Kelley the founder of IDEO pals with Steve Jobs. What an amazing man that helped so many people. After watching the biggest takeaway for me about Design Thinking is to have empathy for the user and understand their problems. Hope this is helpful for you too.

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

https://www.youtube.com/watch?v=GYkb6vfKMI4
Uninstall node js on MacOs big Sur
Published: 2021-02-18 01:32:32

1. Open your terminal
2. Go to home directory
3. Type `cd usr `
4. Type `cd local`
5. Type `cd include`
6. Type `ls ` 
7. Delete node directory by typing ` sudo rm -rf node`
8. Go back to local directory by typing `cd .. `
9. Go to lib dirctory `cd lib`
10. Delete node_modules folder, type `sudo rm -rf node-modules` 
11. Go to bin directory by typing ` cd .. ` and `cd bin`
12. Type `sudo rm -rf node`

P>S : npm and npx folders can also be deleted inside the bin folder

Node.js is successfully uninstalled
Can't get to the footer of Dev.to
Published: 2021-02-18 01:26:37

---
title: Can't get to the footer of Dev.to
published: true
description: The thing with infinite scroll is that all that content that you hve
tags: 
---
dev.to has an infinite scroll set up - so that makes it almost impossible for a user to access the content in the footer - because as soon as the footer is presented, the scroll system goes ahead a fetches more content.  

So does that mean that in order to view the footer I need to view ALL of dev?  

All i wanted to do was find the github link to see whether the Dark Mode issue has been reported or not...
LaTeX Tables: The Tabular Environment
Tags: latex, codenewbie
Published: 2021-02-17 16:00:02

Hello, in this post I talk about tables and the tabular environment. 

Why is that environment (the tabular environment) so important? well, this is a float environment, which means it is an easy-to-manipulate environment. We can modify the position, alignment, create captions, labels, etc. 
The syntax of that command is 
```
\begin{tabular}
Your Table Here
\end{tabular}
```
We must put the `tabular` environment inside the `table` environment. This command has some optional commands, the full command to create a table is the following 

```
\begin{table}[position]
   align
    \begin{tabular}{columns}
      My Table
    \end{tabular}
\end{table}
```
## *position* options
We can specify the position of the table with the following options 

* `h` to put the table *here*, it is, at the current position of your cursor in the code 
* `b` to put the table at the *bottom* of the current page
* `t` to put the table at the *top* of the current page

> If we want to put the table in the current position and we can put `!`, this ignores the restrictions and the table is attempted to put in the specified position

## *align* options
We can align our table with the following commands
* `\centering`
* `\flushleft`
* `\flushright`

## *columns* options

Here we specify the number of columns and their position
* `l` text to the left
* `c` centered text
* `r` text to the right
* `|` put a vertical line between columns

Until now we have checked how to align and create new columns, let's start our table
* `\hline` generates a horizontal line
* `&` jumps to the next column (we have declared the number of columns in the *columns* option. If we put more columns there will be an error)
* `\\` jumps to the next row

# Examples

You can find some examples [here](https://www.overleaf.com/read/dmwzwfghgjbt)

I encourage you to play with these commands and create your table.

This is all for today, thanks :)
Svelte 의 과제
Tags: javascript, svelte, korean
Published: 2021-02-18 01:13:00

나도 참여 좀 하고는 있는데 시간적 여유가 넉넉치 않음.

- [x] HMR 지원 (Svelte 팀이 결국 헬프때림) **vite 지원하면서 같이 해결됨**
- ~~[ ] Webpack 5 Support (이게 골때리는게 버전 지원이 추가되어야 해서 코드가 더러워질까봐 Svelte 팀이 손 못 대는건지 안 대는지 각 재는중)~~ **vite로 대체됨**
- [ ] Serverless 지원 (이미 커뮤니티에서 지원하고 있으나 좀 더딤) **진행중**
How to export extension list on MS Edge
Tags: msedge, browser, devtools
Published: 2021-02-18 01:08:20

1. Open extensions menu
  - click `... -> Extensions`
  - type in address bar: `edge://extensions`
2. Open developer tools
  - click `Other tools -> Developer tools`
  - Press `F12` or `ctrl+shift+I` or `cmd+shift+I` (macOS)
3. Open console tab or `ESC` for open mini console if you can't see.
4. paste and run this script below:
  ```js
// for OLD Edge (I don't know since version is)
[].slice.call(document.querySelectorAll('[role=listitem]')).map(e=>e.children[1].children[0].children[0].textContent).join('\n')
// for NEW Edge (Jul 19, 2022)
Array.from(document.querySelectorAll('[role=listitem] [style="display: flex;"]')).filter(e=>Array.from(e.children).every(c=>c.nodeName==='P')).map(e=>Array.from(e.children).map(c=>c.textContent).join(' ')).join('\n')
  ```
5. get result string and save to your favorite storage.