teleren/devto huggingface dataset:
10 Useful Vanilla Javascript Plugins 2020
Tags: javascript, webpack, react, css
Published: 2020-08-10 01:16:34

#### Introduction

Modern JavaScript Frameworks makes it very easy to build complex web applications. Vanilla JavaScript refers to plain Javascript code, not extended in any way by any framework and it is good when it comes to create a small application

###[1. Swiper.js](https://swiperjs.com/)
- Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

![alt text](https://bashooka.com/wp-content/uploads/2018/04/javascript-image-gallery-slider-plugin-1.jpg")

###[2. iTyped](https://ityped.surge.sh/)
- Dead simple Javascript animated typing, with no dependencies.

![alt text](https://bashooka.com/wp-content/uploads/2019/02/ityped.jpg")

###[3. tingle.js](https://tingle.robinparisi.com/)
- A minimalist and easy-to-use modal plugin written in pure JavaScript.

![alt text](https://bashooka.com/wp-content/uploads/2018/07/modal-lightbox-javascript-2.jpg")

###[4. Glide](https://glidejs.com/)
- A dependency-free JavaScript ES6 slider and carousel. Its lightweight, flexible and fast. Designed to slide. No less, no more.

![alt text](https://bashooka.com/wp-content/uploads/2019/02/glide.jpg")

###[5. Sticky Sidebar](https://abouolia.github.io/sticky-sidebar/)
- These JavaScript plugins provide a handy way of creating sticky components. The first option is great for creating sticky headers whereas the second option is for sticky sidebars.

![alt text](https://designmodo.com/wp-content/uploads/2018/05/11-Sticky-Sidebar.jpg")

###[6. AOS](https://michalsnik.github.io/aos/)
- Animate On Scroll (AOS). Small library to animate elements on your page as you scroll.

![alt text](https://frontendscript.com/wp-content/uploads/2018/09/page-scroll-animation-css.jpg")

###[7. jump.js](http://callmecavs.com/jump.js/)
- Jump.js is a modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).

###[8. Magic Grid](https://github.com/e-oj/Magic-Grid)
- A simple, lightweight Javascript library for dynamic grid layouts.

![alt text](https://bashooka.com/wp-content/uploads/2019/02/magic-grid.jpg")

##[9. Wiv.js](https://jjkaufman.github.io/wiv.js/)
A library for a more wiggly div.

![alt text](https://bashooka.com/wp-content/uploads/2019/02/wiv.jpg)

##[10. Choices.js](https://joshuajohnson.co.uk/Choices/)
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

![alt text](https://bashooka.com/wp-content/uploads/2019/02/choices-js.jpg)
Convert OVA to QCOW2
Tags: hypervisor, kvm, virtualization
Published: 2020-08-10 00:21:09

Hello! In this quick tutorial, I will show you how to convert OVA file to a QCOW2.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zszxmxzt44sks8q5y7b8.png)

A few days ago I have to install Windows in a virtual environment to test some stuff. Then, I found that Microsoft provides some test images officially at https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ but there are no images to use with KVM. So, what if it would be possible to convert some of the provided formats to a KVM compatible format?

Well, this is possible and much easier than I thought it was. Follow me!

First, we have to extract the files from the OVA file.
>tar -xvf MSEdge-Win10.ova

An OVA file is an Open Virtualization Appliance that contains a compressed version of a virtual machine. Now we have two files: the MSEdge - Win10-disk001.vmdk and the MSEdge - Win10.ovf. To convert the .vmdk file to a .qcow2 file to import into KVM we just have to use the qemu-img command as follows.

>qemu-img convert MSEdge-Win10-disk001.vmdk the_name_you_want.qcow2 -O qcow2

Observe that I've renamed the file MSEdge - Win10-disk001.vmdk to remove the blank spaces. I always try to do this before work with files in the command line.

That's it! Now we can just move our converted the_name_you_want.qcow2 to the images directory that is usually /var/lib/libvirt/images, but you can place it wherever you wish and import it.
Real Life Example Explanation - API
Published: 2020-08-10 00:14:13

![Tap](https://dev-to-uploads.s3.amazonaws.com/i/rc3t12qkp490u9vequgl.jpeg)

How to explain the term API using real life examples?

A:
It’s like a water tap, turn it `on`, water comes out; turn it `off`, it stops. And you don’t need to care about how the heck the water comes to your house from the whole water system.

The tap is the `API`
The water system is the `SDK` or `third party library`


———
Today, the water stopped coming from my tap... and I don’t know how to fix it.
How I created my resume/logo/portfolio in the last 3 hours
Tags: css, webdev, javascript, story
Published: 2020-08-10 00:00:53

So, I'm back again and 🙈 sorry for not posting for a while again and again.

#### So, What's happening? (Summary in 1 paragraph)
COVID-19 killed the startup I was working on, Now I'm working on a [remote job board](https://remoteworkjar.com) and [Tailwind CSS Ui Kit](https://tailwindcssuikit.com). Thinking and Learning all the way, made my home office + Starting to build a TailwindCSS Course + a First Urdu Language Podcast on Development. This is too much for me now.

So Today's intention of writing this article is to share my experience of last 3-4 hrs of how I went through all this stuff and ended my procrastination of doing some really tough work for me:
 - Making a Logo for myself
 - Designing a Resume
 - Making a Portfolio

So this is how it started, I was reading [this post](https://dev.to/jameesy/the-ultimate-guide-to-finding-a-job-in-tech-521l) and it really got me motivated to go make my resume, I was using basic LinkedIn PDF Resume till now. I somehow remembered that [Canva](https://www.canva.com/resumes/) got some amazing Resume Templates. I got to Canva and, picked up one template started modifying it and putting up content and my profile picture. I did modify the upper section... and it ended up like this:
![Portfolio](https://dev-to-uploads.s3.amazonaws.com/i/k7qeblpmrd5fgvy1pnu0.png)

Then I exported in PDF and shared on [twitter](https://twitter.com/justaashir). BTW still very much active on twitter, go follow me.

I moved to the same post (I was reading back again), and the second point was "Portfolio":
"People I have spoken to have put off applying for jobs because they weren't happy with their portfolio.

Newsflash: I am STILL not happy with my portfolio. I got my current role with absolutely NO portfolio. If I had waited until I was happy, I would still be waiting!" __Cited from article

I designed almost 3-4 portfolios, but they never saw the heat of the server. I was guilty of not able to design a portfolio. So I had an idea, why not just make this resume as a website (This looks good!)

I opened up Codepen, imported TailwindCSS (My First Love), and started rolling the ball + I used Figma for small image export and [ImageBB](https://ibb.co) for file-hosting. I started designing, designed the small part and my name was just looking like any other text on the page, So I said "My Name should fire up". I went to Canva and just tried to change the Font to Handwriting and line-height in minus. Copied it and pasted it here:

![Logo](https://dev-to-uploads.s3.amazonaws.com/i/juivhr8qirttsu6g92de.png)

It really ended up being cool, and then back to CodePen, just some mobile layout change and done, shared on twitter. Came up here to tell you the story... that How I made the logo, Resume, Portfolio in last 3 hours.

This is the Codepen:
{% codepen https://codepen.io/justaashir/pen/WNwvXxG %}


Thanks, for reading.

Note: I'm writing this post, just before sleep and really exhausted. I haven't proofed-read or did any improvements and checked all the links. This is a rough post for my true followers...
Deploying a react app using pm2 and serve
Tags: react, pm2, deployment
Published: 2020-09-03 04:54:45

---
title: Deploying a react app using pm2 and serve
published: true
date: 2020-08-10 00:00:00 UTC
tags: React,PM2,Deployment
canonical_url: https://www.loginradius.com/engineering/blog/react-app-deployment/
---

Yes, you have learned React and now you can develop a full-fledged front end application. The create-react-app helps you to set up and run a React project, including it code transpiling, basic linting, testing, and build systems. In short, you can start writing React code with…

   
[Read On](https://www.loginradius.com/engineering/blog/react-app-deployment/)
Guys, have any hobby?
Tags: devs, discuss
Published: 2020-08-09 23:46:41

I would like to know if some of you are learning something new, have any cool hobby, or a second job that you like doing ^^
I'm mostly a developer but also work as Ui designer, and i use my free time to write, which i have been doing for a long time 😅, also listen to music and write down some critics to the album i click ^^

And lately i have been learning french, i really like the language and would like to write on it too
Solving Rubik's Cube is the best exercise for Computer Science students and Junior Developers
Tags: computerscience, beginners, games, puzzles
Published: 2020-08-09 23:35:50

#Solving Rubik's Cube seems near-impossible...
...unless you use algorithms

##[The official guide](https://www.youcandothecube.com/solve-it/3-x-3-solution) calls their solution 'a layered approach'
It turns out this approach has two official names
* CFOP Method
* Fridrich Method

###The guide walks readers through eight steps after an initial primer on the language used to solve the Cube
Labels include:
- Layers: top, middle, bottom
- Faces
- Centers
- Edges
- Corners
![Diagram from the official guide](https://dev-to-uploads.s3.amazonaws.com/i/vkz6gupjxp3b02puyagj.png)

###Faces are assigned single-letter keys, each with notation that identifies which way to turn that face as part of the larger algorithm
![Diagram from official guide](https://dev-to-uploads.s3.amazonaws.com/i/80n12mmyrasjv9trdqas.png)

###The guide even refers to a series of moves as algorithms
![Diagram from the official guide](https://dev-to-uploads.s3.amazonaws.com/i/w1l6unmbh6gsb9rntgez.png)

#Solving Rubik's Cube will teach you Computer Science
- Learn abstract terms and notation necessary to understand and reproduce each algorithm
- Learn several algorithms that are particularly useful for placing the desired piece in the appropriate place
- Practice the first few steps before attempting later ones, building your muscle memory
- Feel the rewarding sensation each time you solve the Cube

##Writing code will present many of the same challenges and rewards.
If you love solving Rubik's Cube, you are likely to excel at and enjoy a career in Computer Science

###Buy a 2x2 and 3x3 Cube. There are guides to solve both. Try not to get frustrated. After a few solves, start timing yourself!
The Maintainers: Shaun Walker and DotNetNuke
Tags: video, opensource
Published: 2020-08-11 14:45:22

---
title: The Maintainers: Shaun Walker and DotNetNuke
published: true
date: 2020-08-09 23:33:37 UTC
tags: Video,OpenSource
canonical_url: http://wildermuth.com/2020/08/09/The-Maintainers-Shaun-Walker-and-DotNetNuke
---

[![The Maintainers](https://wilderminds.blob.core.windows.net/img/Main.00_00_16_03.Still001.png)](https://youtube.com/watch?v=yZ4mVpBFaWg) The next episode is now available! This time I'm talking to Shaun Walker. He's the developer responsible for the long-lived open source project, DotNetNuke! He's also created a new framework called Oqtane for Blazor.

He's been in the Microsoft-Open Source space for longer than almost anyone. We talk about being the maintainer for a project for 14 years, what "maintainer fatigue" is, and how being a maintainer has changed since 2002!

I hope you like it!

<iframe src="https://www.youtube.com/embed/yZ4mVpBFaWg" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

If you did enjoy the video, please like and subscribe to my channel. Every subscription helps!

Do you have any of your favorite open source projects you'd like me to highlight? If so, just leave a comment and I'll see if I can shine a light on the maintainers!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/slG-EHK8Kw8)
How to change a git commit author
Tags: git, commit, author
Published: 2020-08-09 23:07:06

---
title: How to change a git commit author
description: Googling this yet again?
published: true
canonical_url: https://reobin.dev/git-change-author/
tags: [git, commit, author]
---

## 0. Preface

Switching between work and personal environments can lead to mistakes like this.

I try to automate the switch by having scripts setting up different looks on my terminal for each environment I'm working on. Sometimes I just forget, though. If you're in this situation, you probably forgot something similar not long ago, and are trying to fix it.

Since I never seem to remember the command to change back a git commit author, and google it every time, here is my attempt at remembering it for good by writing a post about it.

## 1. Interactive rebase

The first thing to do is rebasing your git history. You have a couple of choices to enter interactive rebase. My favorite one is using a commit count from `head`.

For example, if I want to change the author of the last 3 commits, I can use:

```bash
git rebase -i HEAD~3
```

This will give you a similar list:

```bash
pick 42e5f88 Commit #1
pick f0674a1 Commit #2
pick 376b59c Commit #3
```

For now, just change `pick` to `edit` on the commits you would like to change the author of.

```bash
edit 42e5f88 Commit #1
pick f0674a1 Commit #2
edit 376b59c Commit #3
```

Notice the change on the first and the third commits.

To rebase, you could also use the hash of a commit directly:

```bash
git rebase -i 42e5f88
```

## 2. Actually changing the author

After saving the open git interactive rebase document is when the rebasing actually starts.

Editing commits is an action that happens one commit at a time. So if you chose to edit `n` commits, you will need to execute the next commands `n` times.

```bash
git commit --amend --author="Author Name <email@address.com>"
```

Since you are still rebasing after this command, execute this next command:

```bash
git rebase --continue
```

The `--continue` command will either end the whole rebasing or enter the edit mode for the next commit you need to edit.

Once you have edited all your commits, make your changes live by force pushing them to your repository:

```bash
git push --force
```
Performance testing
Tags: testing
Published: 2020-08-09 22:22:42

I've recently been tasked with performance testing an application, here are things to consider for anyone starting to do this or if you've just started a new project.  

**Be realistic:**

Be realistic with the number of requests you expect to hit your application. It may be useful to think of these in terms of user actions. Example is login, where the action will be create a new user. Try to get a hold on how many requests per second you expect your application to handle and the total requests during a specific period. These numbers will help decide how to run your test. 

**Loadtest tool**

Think carefully about the tool to use. It's important to get a tool that simulates how actions would occur in real life. A tool like locust is designed to randomise requests, which is great for testing how randomised requests affect performance. If however you need to identify a specific issue, you may want to specify numbers. This can also be useful to produce an entirely repeatable test. 

**Short feedback**

Short feedback is important, try to run some shorter tests first to check the accuracy of your load test and build up to longer running tests. This should help identify errors in your test code.

**Constants**

Be clear on what stays constant and what should vary. You may want to vary the instance size, number of instances or even db size. This will help identify how best to deploy your application. 

**Loadtest early**

Start load testing early during development and continually run these tests to ensure performance doesn't degrade. Running this often will help identify what causes any performance degradation. It will help identify bottlenecks sooner so that they can be fixed before they become an issue. Having your loadtest in a specific build pipeline may help satisfy this requirement. It may not need to run on every commit but weekly should be a minimum consideration.

**Environment**

Create an environment identical to production to run your tests, this will allow for more accurate results than running against an existing test stack. Running load tests against production may not be a good idea, if your application reaches breaking point, you don't want users being unable to use your system.

**Cost**

Think about the cost involved, a whole new environment can be expensive. Think about the tool being used, there are plenty of free tools out there which may do the job but some paid for tools may offer more features. Check out what tool best suits your needs. Think too about the cost of developer time, how many are working on this, can it be automated to save on cost?
WHAT WOULD YOU CONCENTRATE ON? REACT, VUE, PYTHON, BACK-END, FRONT-END 
Tags: react, vue, javascript, python
Published: 2020-08-09 21:17:39

With the changing field of the web, which is good to focus on for the future? 
Vue, React, JavaScript, Python, C-Sharp, swift???

I know about “areas” and what to look for.... but around me it’s Angular (I haven’t used) and React. It seems like Vue is moving up.

But front end is more “custom” and can change , allot.

So to me it seems like backend, is more stable? Because things are defined to just, make it work?
Creating a React Input component in Typescript
Tags: typescript, react, javascript, html
Published: 2020-08-09 21:01:20

Here is a nice way to create a React Input component using typescript!

Using an interface to declare your own prop types as well as extending all `HTMLInputElement` (https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) properties to allow your component to accept all those input props you might need to increase accessibility for example 😄

Here you can see that by extending those `HTMLInputElement` properties in `InputProps` we can have all `input` element props passed to this component. Instead of having to declare each one we can just use a spread attribute `...rest`

![Input component auto complete](https://giselamirandadifini.com/static/a96951fb0d464df5b2b1c46922af1a25/d3ff0/inputcomponent-auto-complete.jpg)

![React input component with spread attribute](https://dev-to-uploads.s3.amazonaws.com/i/wz6lgt2bx04n0a1oaffb.png)

Original post: https://giselamirandadifini.com/creating-a-react-input-component-in-typescript
Accessibility for the web - how do screen readers work?
Tags: webdev, javascript, react, tutorial
Published: 2020-08-09 20:58:26

People with `disabilities/ special` needs browse the internet differently from the rest. They can't get their information by looking at their screens so they  must use tools called `assistive technologies` (head pointers, screen readers, touchscreens etc).

**What is a screen reader and how does it work?**

In simple terms, a screen reader is a software that helps people with no or limited vision to get information in a way accessible to them. It works closely with the computer's operating system (OS) and provides information about icons, dialog boxes, menus, files and folders (it `translates` what it `sees` on the screen). It provides access to the entire OS and many of the applications found on the computer. 

Usually, a screen reader will start `reading` at the top of a page and will read any text (including alternate text for images). Some screen readers allow the user to preview information, like the navigation bar or all the headings on a page, and skip to the desired section of the page. Users do most of the navigation using the keyboard since it's more precise than a mouse.

**How does a screen reader give feedback to the user?**

There are two ways the screen reader `translates` the information: using sound (`synthetic speech`) or using `Braille notation`.

Screen readers use Text-to-speech(TTS) engines to translate the information on the screen into speech, which can be heard through speakers or headphones. A TTS can come bundled with the screen reader or it can be a hardware device that gets plugged into the computer.

For `Braille` output, an external hardware device called a refreshable Braille display is used (we can use it on its own but usually it's used in conjunction with speech output). The way it works is that the display contains one or more rows of cells. Each cell can be formed into the shape of a Braille character. As the information on the computer screen changes, so does the Braille characters on the display change, providing refreshable information directly from the computer. 

If you're unfamiliar with `web accessibility`, I think the best way to understand how `screen readers` work by watching them in action, so I linked a video which explains just that. To watch it, click [here](https://www.youtube.com/watch?v=dEbl5jvLKGQ).

*Image source: Sigmund/ @sigmund on Unsplash*
Which One, White Hat or Black Hat SEO?
Tags: discuss
Published: 2020-08-09 20:55:04

![White and black hat seo](https://dev-to-uploads.s3.amazonaws.com/i/phbk733ddiny0h0b7bp0.jpg)

White hat [SEO](https://screpy.com) is the process of trying to get ranked in the search engines without doing anything that violates the terms or conditions of the search engine. It’s the type of digital marketing that Google would like you to partake in. It usually means you can’t do any kind of link building, you should focus on delivering the best user experience.

Black hat SEO is a group of strategies and techniques that look to manipulate Google’s search algorithm to dominate the search results. The strategies they use violate Google’s terms and conditions.

Which one do you prefer? White Hat or Black Hat and why?