teleren/devto huggingface dataset:
Mobile Vibration Designer! 📳
Tags: showdev, webdev, beginners, javascript
Published: 2020-03-18 14:48:15


I recently read a great post introducing the `vibration` API that inspired me to play with using vibrations on mobile.

{% link https://dev.to/aminnairi/add-vibration-to-your-web-applications-n4l %}

It was a simple enough API, but I found it difficult to make vibrations that followed a pattern I wanted.

In response, I created a [vibration designer](https://vibration-designer.glitch.me/) where you can tap out a pattern on and test out and copy the vibration code that recreates the pattern.

Check the [https://glitch.com/~vibration-designer](project out on Glitch), where you can see the source code and play with it. I made use of some neat vanilla Javascript features like `Proxy`, `navigator.vibrate`, and manipulation of CSS custom properties (variables).

_Note: This is best used on Android mobile if you want to play the vibration._ 
_For more details check out [Can I Use: Vibration](https://caniuse.com/#feat=vibration)_

{% glitch vibration-designer app file=index.js %}
Starting an Indie Game Dev Community
Tags: gamedev, unity3d, unreal
Published: 2020-03-18 14:46:06

##Hey Dev.to Community! 

We at LetsBuild.gg are looking for content writers and developers who want to participate in collaboration, sharing ideas and learning within the **indie game dev** community. 

This community will be very similar to dev.to but with a focus on game development. We want to create a space for devs to show off their work, get feedback and help other devs in their pursuit of building great games! 

If you are interested in learning more please checkout [letsbuild.gg](https://www.letsbuild.gg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ng4o37jq8nt4pakxeyc4.jpg)
GitHub compra NPM
Tags: github, devops, npm, node
Published: 2020-03-18 14:37:45

La plataforma de repositorio de código abierto de Microsoft, está adquiriendo *npm Inc*, una plataforma de desarrollo para JavaScript, según ambas compañías en sus respectivos comunicados.

El equipo de NPM, ha agendado ya un evento Ask Me Anything (AMA) en Reddit en los próximos días.

Si deseas visitar la página de npm en Github, da click aquí:
https://github.com/npm/cli

Microsoft, ha estado creciendo mucho últimamente y se ha logrado posicionar en el corazón de todos los developers, desde la liberación *OpenSource* de Studio Code (antes, Visual Studio) hasta la ahora inclusión de el Rey NPM con su red social más importante hoy en día: Github.



>Las noticias de hoy de que GitHub adquirirá npm es un paso positivo y lógico para garantizar la estabilidad y la seguridad del registro npm de código abierto para desarrolladores de JavaScript. Conocemos y confiamos en los líderes de GitHub que tienen la experiencia para aprovechar las importantes contribuciones de muchos , que convirtió a npm en el principal recurso de gestión de paquetes de código abierto que es hoy en día.

-Robin Ginn, director ejecutivo de la Fundación OpenJS



> When I saw the GitHub Packages beta announcement and demo at GitHub HQ in San Francisco, I remember turning to Shanku Niyogi and clumsily blurting out, “Why aren’t you trying to buy us?”

>Cuando vi el anuncio de Github Packaged y su demostración en las oficinas centrales de GitHub (S.F.), recuerdo voltear con Shanku Niyogi (Sr. VP of Product @ Github) y decir en voz baja "¿Porque no están intentando comprarnos ya?"

-THE NPM BLOG


Esto es sin duda, el final de una empresa, pero la actualización más interesante que npm ha tenido en sus 10 años de vida.



*FUENTES*
Nota de prensa npm
https://blog.npmjs.org/post/612764866888007680/next-phase-montage
Nota de prensa Github
https://github.blog/2020-03-16-npm-is-joining-github/
Dark mode with React and SCSS
Tags: react, scss, javascript, darkmode
Published: 2020-03-18 14:34:00

Implementing dark mode is as simple as calling a toggle on your classes.

Here’s a simple example to add dark mode to your React apps. You can use this same logic in your Javascript apps too.

Create a new react app.

Create a components folder within your src folder.

Create a component called **Hello.jsx** inside the **components** folder.

Your file structure should look like **src > components > Hello.jsx**

Now inside the Hello.jsx component, we will be doing a couple of things.

We will have a button that toggles our dark mode classes off and on. we will also keep track of when the button has been clicked so we can update the button text appropriately. i.e our button should say “Switch to Light Mode” when we are in dark mode and vice versa.

![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/1408/1*Da4HEFUHSKYoywQ3cTIHjw.png)

Now, let’s write our **handleDarkMode** function. We also want to change the colour of our button in dark mode.

![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/1408/1*1j6qaQpEhkH-m02K2wb0Uw.png)

So far, our page looks like below. I’m using google fonts so my text looks a bit different.

![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/506/1*IGbGltxed8zTPfE2Qi7qMw.png)

Now, it’s time to write our styles.

We will be writing our very basic styles in SCSS — it’s just cleaner.

First, install node-sass so that our styles can be compiled to css.
```npm install node-sass```

Create a **styles.css** folder inside the src folder and import it inside our Hello component.

```import "../styles/Hello.scss";```

I’ll be using twitter’s dark mode theme colors. With SCSS, we can use variable names in our stylesheet.

![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/1408/1*9mU_5KgoeqKioVJCK9Lh_g.png)

Now, here’s before dark mode.
![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/927/1*2gK8d8Q5ssotBxUCngY3tA.png)

And after dark mode ...
![dark mode in React by Adebola Adeniran](https://miro.medium.com/max/927/1*V0ukS36kDjEx7Ddo4Sx2hw.png)
vma.lzo formatındaki sanal imajların çevrimi
Tags: proxmox, vma, disk, raw
Published: 2020-03-18 14:25:55

Proxmox kendi içerisinde vma.lzo formatında imajlar oluşturmaktadır. Bu imajların raw formatına ve sonrasında istenilen formata dönüşümü için proxmox debian deposunda bulunan **pve-qemu-kvm** paketine ihtiyaç duymaktadır.

Bu paketi proxmox'un sürümüne göre farklı sürümlerde kullanabilirsiniz. 

Örneğin proxmox 6.x sürümü için ilgili depoyu ve anahtarını indirmeniz gerekmektedir. Kurumsal olmayan depoyu sisteminize eklemek için aşağıdaki komutları yazmanız gerekmektedir.

```bash
sudo echo "deb http://download.proxmox.com/debian/pve buster pve-no-subscription" > /etc/apt/sources.list.d/pve-install-repo.list
sudo wget -O- "http://download.proxmox.com/debian/proxmox-ve-release-6.x.gpg" | apt-key add -
sudo apt update
```

Daha sonrasında gerekli paket indirilir

```bash
sudo apt install pve-qemu-kvm
```

Hepsinden bağımsız olarak lzo formatını açmak için normal Debian ve Pardus depolarında bulunan lzo paketi de yüklenir.

```bash
sudo apt install lzo
```

Öncelikle xxx.vma.lzo isimli dosyanızı extract etmeniz gerekmektedir:

```bash
lzop -d xxx.vma.lzo
```
Bu adımdan sonra elinizde vma formatında bir dosya bulunmaktadır.

```bash
vma extract -v xxx.vma yeniklasor01
```

Tüm bu işlemlerin sonunda belirttiğiniz klasörde (yeniklasor01) raw uzantılı bir sanal imajınız bulunmaktadır. Bu işlem sonucunda tabi ki çok daha büyük disk alanı kaplamakta olup muhtemelen disk dolması ile ilgili sorunlarla kaşılaşmanız olasıdır.

İlgili raw formatını qcow2'ye çevirmek için ise aşağıdaki şekilde qemu-tools paketini yüklemeniz gerekmektedir:

```bash
sudo apt install qemu-utils
```

Bu adımdan sonra raw dosyalarınızı aşağıdaki şekilde;

* qcow2'ye çevirebilirsiniz:

```bash
qemu-img convert -O qcow2  xxx.raw  xxx.qcow2
```

* vmdk'ya çevirebilirsiniz:

```bash
qemu-img convert -pO vmdk xxx.raw xxx.vmdk
```

Ex nihilo nihil fit
Unified Permissions Model
Tags: devops, security
Published: 2020-03-18 14:24:10

In today’s DevOps world, developers like you are compelled to work with several bits and pieces of different software to put CI/CD processes together. What if I told you an end-to-end DevOps set of solutions -- [The JFrog Platform](https://www.jfrog.com/confluence/display/JFROG/Get+Started) -- enables you to have all these components together in a single unified software experience. 

To create this, we at JFrog have unified our installers, the file-structures, the administration functions, the metadata from different parts as well as the UI and permissions. 

I would like to focus here on the unification of permissions. Specifically, why we did it and how this actuates the permissions model for our end-to-end platform.

**WHY UNIFY PERMISSIONS**

An inevitable part of administering the DevOps workflow is to have a mechanism for managing user permissions to different resources in an efficient manner. With different resources, i.e. parts of different DevOps tools, working independently, administrators need to ensure this mechanism is in place for CRUD (Create, Read, Update and Delete) permissions for each resource. Unifying user permissions is an important benefit to administrators for ease of use.

**HOW THIS ENABLES THE PLATFORM**

We identified each resource that can be qualified for a different level of access and enabled them to have role-based permissions for these resources in a [single module](https://www.jfrog.com/confluence/display/JFROG/Permissions). Here’s how;

+ Identifying the resources: All you need to do is add relevant resources such as Repositories and Builds (from Artifactory), Release bundles (from Distribution), Destinations (Edge nodes) and Pipeline Sources (From JFrog Pipelines) to a single Permission target.

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

+ Selecting Users/Groups and defining CRUD permissions for each role: When selecting several users or groups,  you can simply select an entity to allocate necessary permissions to them as shown below:

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

These permissions define [various action items](https://www.jfrog.com/confluence/display/JFROG/Permissions#Permissions-GlobalPermissions) that are available for the resources selected. 
Briefly, they are CRUD permissions + Xray Metadata permissions for Artifactory resources such as Repositories, Builds and Release bundles. Additionally, Distribute and Trigger permissions are specifically for Distribution and JFrog Pipelines. 

The permissions as mentioned above can be assigned to users/groups that can be linked to any identity provider that is synchronized with Artifactory with [simple integrations](https://www.jfrog.com/confluence/display/JFROG/Security) such as LDAP/SAML. 

The process of managing the whole permissions model thus becomes simpler and complete for the admins. Enjoy the unification and [try out the whole new platform](https://jfrog.com/platform/free-trial/) yourself!
Going remote 
Tags: remotework, qa
Published: 2020-03-18 13:57:57

Health and safety come first and starting from 18.03 the HireTester team goes remote. But we're always open to new challenges and keep the process on bug hunting going. 

Facing the new work paradigm, you might experience personal and professional challenges of working remotely or managing a remote team. We've come up  with the top five the most popular recommendations for improving productivity and fighting procrastination that actually work.

- Split your work up into little steps.

- Develop a detailed timeline with specific deadlines.

- Do the hard and important tasks first.

- Get rid of distractions.

And finally, our favorite one: 

Get a Grip and Just Do It!

And what recommendations do you follow?

http://hire-tester.com
Algorithm 202: Array Chunking in 3 Ways
Tags: algorithms, javascript, array, beginners
Published: 2020-03-18 13:56:17

Welcome to yet another series on algorithm - Algorithm 202. We are going to focus on array manipulation.

In how many ways can you chunk an array?

```javascript

chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 2) 
/* [ 
    [ 1, 2 ],
    [ 3, 4 ],
    [ 5, 6 ],
    [ 7, 8 ],
    [ 9, 10 ],
    [ 11, 12 ],
    [ 13 ] 
   ]
*/

chunkArray(["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron"], 3)
/* [ 
     [ 'Aaran', 'Aaren', 'Aarez' ],
     [ 'Aarman', 'Aaron', 'Aaron-James' ],
     [ 'Aarron' ] 
   ]
*/
```
We want to look at 3 ways to achieve this.

### Prerequisite
To benefit from this article, you need to have basic understanding of javascript's array methods.

### Let's Chunk an Array using:

* for...of..loop, push()

```javascript
      function chunkArray(arr, limiter) {
        let finalArray = [];
        let tempArray = [];

        for (value of arr) {
          if (tempArray.length < limiter) {
            tempArray.push(value);
          } else {
            finalArray.push(tempArray);
            tempArray = [];
            tempArray.push(value);
          }
        }

        finalArray.push(tempArray);
        return finalArray;
      }
```

* for...loop, push(), slice()

```javascript
      function chunkArray(arr, limiter) {
        let finalArray = [];

        for (let i = 0; i <= arr.length; i += limiter) {
          finalArray.push(arr.slice(i, i + limiter));
        }
        return finalArray;
      }
```

* for...loop, push(), splice(), if...statement

```javascript
      function chunkArray(arr, limiter) {
        let finalArray = [];
        let arrayLength = arr.length;

        for (let i = 0; i <= arrayLength; i++) {
          if (arr.length != 0) {
            finalArray.push(arr.splice(0, limiter));
          }
        }
        return finalArray;
      }
```

### Conclusion

There are many ways to solve problems programmatically. You can try this out with recursion or other looping construct. I will love to know other ways you solved yours in the comment section.

If you have questions, comments or suggestions, please drop them in the comment section.

> Up Next: [Algorithm 202: Array Merging Without Duplicates in 4 Ways](https://dev.to/ebereplenty/algorithm-202-array-merging-without-duplicates-in-4-ways-17h3)

You can also follow and message me on social media platforms. 

**[Twitter](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.
Pros & Cons of Unit Testing 
Tags: unit, testing, qa
Published: 2020-03-18 13:54:29

Pros:
- More reusable code and easier debugging. 
- Reduced cost for testing and bug-fixing.
- Increased efficiency of code improvement and maintenance. 
- Simplified interaction due to separate and complex modules testing. 
- Errors can be detected at the early stages of the SDLC.

Cons:
- It's difficult to write quality unit tests and the whole process can be time-consuming. 
- Human factor. A developer can make a mistake that will impact the whole system.
- Not all errors can be detected, since every module it tested separately and later different integration bugs may appear.

Many specialists believe that unit testing is a must for a quality product release. However, there are those, who hold a different opinion. Considering all the pros and cons, what side will you take? 
http://hire-tester.com
Project Euler: Problem 5 Walkthrough
Tags: projecteuler, algorithms, problemsolving
Published: 2020-03-18 14:32:59

---
title: Project Euler: Problem 5 Walkthrough
published: true
date: 2020-03-18 13:53:08 UTC
tags: Project Euler,algorithms,Problem Solving,project euler
canonical_url: 
---

This article is a full walkthrough on project euler problem 5 where I'll discuss how you can implement the solution to this problem in code.

The post [Project Euler: Problem 5 Walkthrough](https://jaeheonshim.com/project-euler-problem-5-walkthrough/) appeared first on [Coding with Jaeheon Shim](https://jaeheonshim.com).
How To Record Automated Tests For Mobile Apps 
Tags: testing, mobile, android, ios
Published: 2020-03-18 13:48:00

---
title: How To Record Automated Tests For Mobile Apps 
published: true
description: Using the Endtest Mobile Recorder
tags: testing, mobile, android, ios
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/97qzu9018llb9g4212ob.jpg
---

### ###

[Endtest](https://endtest.io) allows you to create, manage and execute Automated Tests, without having to write any code. 
 
You can use the open-source [Endtest Chrome Extension](https://chrome.google.com/webstore/detail/endtest-codeless-automate/jbdgfkeimppmnfemmgfafiomihlibdfa) to record a test for your website directly in the browser.

But did you know that you can also record tests for native and hybrid Android and iOS applications? 🤗

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2e8y5lrvmehbiefvx6ky.gif)

And you do that direcly from your browser.

What? 😱

That's right.

The [Mobile Recorder](https://endtest.io/guides/docs/how-to-create-mobile-tests/) allows you to record tests for native and hybrid mobile apps, directly in your browser. 

###**What are the steps?**###

1. You upload the APK or IPA file. 
2. The app is installed on a real mobile device.
3. The information for each element is extracted.
4. An interactive preview is shown in real-time in your browser window.
5. You record the test. 
6. You save the test.

{% youtube 4vqxABcfpac %}

###**But how does it locate the elements?**###

It's no secret that our engine for Mobile Tests is using [Appium](http://appium.io/).

We just fetch the locators for the elements that you interact with. 

If we would rely on image recognition, that would lead to brittle tests.

We fetch the following locators:
• ID
• Accessibility ID
• Name
• Class Name
• XPath
• Coordinates

If you're not using Coordinates, you can easily execute the same test on different devices.

Coordinates are only used in extreme cases, when no other unique locator is available.

You can find more details in our [Documentation](https://endtest.io/guides/docs/how-to-create-mobile-tests/).
Daily Challenge #207 - Snakes and Ladders
Tags: challenge
Published: 2020-03-18 13:30:25

---
title: Daily Challenge #207 - Snakes and Ladders
published: true
series: Daily Challenge
description: Implement a function to play a two-player game of Snakes and Ladders.
tags: challenge
---
Implement a function called `SnakesLadders` to play a two-player game of Snakes and Ladders. The function should keep track of player turns and player position on the board (of the 100 spaces). SnakesLadders should call a method `play(die1, die2)` independently of the state of the game or the player turn. These variables are the die thrown in a turn and are both integers between 1 and 6. The player moves the sum of die1 and die 2. 

![S&L Gameboard](https://raw.githubusercontent.com/adrianeyre/codewars/master/Ruby/Authored/snakesandladdersboard.jpg)

**Rules**
1.  There are two players and both start off the board on square 0.
2.  Player 1 starts and alternates with player 2.
3.  You follow the numbers up the board in order 1=>100
4.  If the value of both die are the same then that player will have another go.
5.  Climb up ladders. The ladders on the game board allow you to move upwards and get ahead faster. If you land exactly on a square that shows an image of the bottom of a ladder, then you may move the player all the way up to the square at the top of the ladder. (even if you roll a double).
6.  Slide down snakes. Snakes move you back on the board because you have to slide down them. If you land exactly at the top of a snake, slide move the player all the way to the square at the bottom of the snake or chute. (even if you roll a double).
7.  Land exactly on the last square to win. The first person to reach the highest square on the board wins. But there's a twist! If you roll too high, your player "bounces" off the last square and moves back. You can only win by rolling the exact number needed to land on the last square. For example, if you are on square 98 and roll a five, move your game piece to 100 (two moves), then "bounce" back to 99, 98, 97 (three, four then five moves.)

Return `Player n Wins!`. Where n is winning player that has landed on square 100 without any remaining moves left.

Return `Game over!` if a player has won and another player tries to play.

Otherwise return `Player n is on square x.` Where n is the current player and x is the square they are currently on.

Good luck!
***
_This [challenge](https://www.codewars.com/kata/587136ba2eefcb92a9000027) comes from adrian.eyre on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
What's the oldest code you have?
Tags: firstpost, watercooler
Published: 2020-03-18 13:08:36

---
title: What's the oldest code you have?
published: true
description: 
tags: #firstpost #watercooler
---

Some time ago a friend sent me a backup of our code from when we were starting to learn pascal. It was very nice to see some of my first attempts at programming.

This one is from November of 2004, it's not the first thing I coded but it's the oldest backup I have:

```pascal
program cor;

uses crt;

var x,y :byte;
i:byte;

BEGIN
    randomize;
    repeat
        y:=random(45);
        if y = 0 then begin
            y:=1
        end;

        repeat
            x:=random(80);
        until x <> 0;

        i:=random(10);
        gotoxy(x,y); textcolor(i); write('Û');
    until keypressed
END.
```

It's a small loop to print small colored blocks in the console ("cor" means "color" in portuguese); It's written in pascal to run in DOS and looks like this running in [DOSBox](https://www.dosbox.com/):

![COR.PAS](https://dev-to-uploads.s3.amazonaws.com/i/izzxvmdk2h9mvuli1owg.png)

[I created a gist with all my old sources sources](https://gist.github.com/rogerzanoni/d93eabc92f3f9b6d596578dc249f409c) so I don't lose them again. No indenting as I wasn't even aware of what this "indenting" thing was.

Looks like I was pretty "visual" when I started learning, creating small samples to work with colors in DOS and trying to make small games like this small (and broken) [Tower of Hanoi](https://en.wikipedia.org/wiki/Tower_of_Hanoi) implementation (I named it with an "Y" in the original file), it's probably the first game I tried to code:

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

What about you? What's the oldest thing you have stored or remember you did?
An useful alias to toggle your microphone from terminal (Linux)
Tags: linux, remote, quarentene, showdev
Published: 2020-03-18 13:04:55

---
title: An useful alias to toggle your microphone from terminal (Linux) 
published: true
description: A very useful alias for those which are working remotely
tags: #linux #remote #quarentene #showdev
---

I'm using Ubuntu, so i suppose this alias will work on every Debian based distro, but i dont have sure. Anyway, here it goes:

The command:

```bash
amixer set Capture toggle
```  

If you type it on your bash, you will alternate your microphone on/off switch (toggle). Thats pretty useful if you're working remotely with lots of video/sound channels, for example, you just toggle your mic off and mute all your apps and channels. 

Lets turn it into a permanent alias.
For that, open a terminal and type the command below:

```
 echo "alias mic='amixer set Capture toggle'" >> ~/.bashrc && . ~/.bashrc
```

Now if you type `mic` on your terminal it will toggle your microphone and show a status message. So, when you want to mute all apps, or have sure you didnt missed anything, just type mic and turn off your microphone.

Thats all ;)