teleren/devto huggingface dataset:
Easy VRT testing
Published: 2020-05-29 03:48:35

---
title: Easy VRT testing
published: true
date: 2020-04-13 04:09:08 UTC
tags: 
canonical_url: http://arturo.linar.es/en/blog/easy-vrt-testing
---

I normally work on different and very active projects in several testing environments. I needed a simple and fast way to generate visual regression tests between them, or even to just to compare my local environment to an integration server. However, it was cumbersome to edit backstop configuration files frequently just to change servers, thus I created a tool that simplifies the task a lot:

[https://github.com/arturolinares/easy-vrt](https://github.com/arturolinares/easy-vrt)

> It is a Symfony console application that wraps Docker backstop containers to run the tests. The application reads a list of URLs from a CSV file to generate the JSON configuration files for BackstopJS.

## Usage

Once the project is installed you will want to compare two sites. Follow these steps:

1. Generate the backstop scenarios using a CSV file containing the routes to visit.
2. Run the tests.
3. Browse the results to visualize the differences.

To **generate the scenarios** use the command `vrt:gen`. It will use a CSV file with the routes to generate them:

```
bin/console vrt:gen path/to/routes.csv --ref-domain=http://prod.com --url=http://my-qa.com

```

You can find a sample of the CSV file in the `sample` directory. The file has two fields: the route and an optional label. For example:

```
/,"The Homepage"
/category/tag,
"/about-us", "About US"

```

You can set the reference domain using the flag `--ref-domain`. This is normally production. Use the flag `--url` to specify the domain you want to compare.

**Sometimes you need to create several scenarios for the same route but different prefix**. For example, when using multilingual sites. To specify the prefixes you can use the `--prefix` (`-p`) option:

```
bin/console vrt:gen path/to/routes.csv -u [http://my-qa.com](http://my-qa.com) -r prod.com -p es -p en -p fr

```

The above will generate scenarios for these urls:

```
/es/
/en/
/fr/
/es/category/tag
/en/category/tag
/fr/category/tag
/es/about-us
/en/about-us
/fr/about-us

```

Until now, you only have configured backstop. **To actually run the tests use** `vrt:run`. This command will run backstop using a Docker container. Also, if you want to see what the script is doing, you can change the verbosity with `-v`, `-vv` and `-vvv`.

Finally, **to see the report** , use `vrt:server` to browse the diffs.
Lottery Simulation in Elm
Tags: lottery, simulation, powerball, jackpot
Published: 2020-04-13 04:07:28

---
title: Lottery Simulation in Elm
published: true
description: I've built a lottery simulation app in the Elm programming language, check it out and test your luck!
tags: Lottery, Simulation, Powerball, Jackpot
---

Hi all,

A while back, I came across a [cool article published by the Los Angeles Times](https://graphics.latimes.com/powerball-simulator/), where you start with $100 and simulate playing the Powerball (written in JS).

It inspired me to write an [Australian Powerball version](https://ryansenn.dev/powerball) (the number of balls, barrel sizes etc are different) in Elm, which I'm hosting on my personal website. The app is pretty rough, it was to try out Elm 0.19.1 (upgrade from 0.19). I shared it on reddit on the Australian Finance sub and got overwhelmingly positive feedback.

With the whole lockdown thing happening now and to keep myself busy, I decided to created a [website dedicated  to lottery simulations](https://lottosimulation.com/). It now includes all popular lotteries such as the US Powerball, US Mega Millions, Euro Jackpot, Euro Millions as well as the most popular Australian Lotteries. I have also put in more effort on the UX level.

I think that Elm's strong static types really helped me during the development of this app. Not knowing much about lotteries before jumping in, there were many refactors along the way. I did not expect the European lotteries to have multiple "Powerballs" for example (called Euro numbers and Lucky stars). The application also has to support games such as OZ lotto, where there is a single barrel, and the last 2 numbers are complimentary numbers etc. Even with a lot of experience with dynamic languages such as Elixir, I think that static types and the friendly compiler messages kept me sane.

All the lotteries use the same code base, the behaviour is dictated by the config that gets injected.

The site is running on a simple Elixir/Phoenix backend with only a few tasks:

- Rendering the pages where Elm mounts itself
- GenServer to crawl the current Jackpots
- GenServer to crawl recent draws and dividends

If you have a play around to test your luck, I would love to hear about your feedback!
State Management in Pure React with Hooks: useReducer
Tags: react, webdev, beginners, tutorial
Published: 2020-04-13 02:32:19

Hello, everyone 👋, I hope you are doing great 😊.

So, today you are going to learn all the fundamental concepts of ``useReducer()`` Hook in this article.

Before you start, there are some rules you need to follow to use Hooks 😟. Thankfully the React Team has provided an ESLint Plugin called eslint-plugin-react-hooks that help you enforce these rules when using Hooks 🤩.

##useReducer Hook
The ``useReducer()`` Hook allows you to have a state in the functional component. It is an alternative to ``useState()`` Hook.

The ``useState()`` Hook is implemented using ``useReducer()`` Hook. It means that useReducer() is primitive, and you can use it for everything that you can do with ``useState()``. 

The ``useReducer()`` Hook is preferred over ``useState()`` when you have complex state logic that involves multiple sub value or when the next state depends on the previous state.

The ``useReducer()`` Hook takes two arguments. The first argument is the ``reducer()`` method, and the second argument is the initial state.

The ``useReducer()`` returns an array. The first element of an array is the variable that stores the current state, and the second element of an array is a ``dispatch()`` method that calls the ``reducer()`` method.

> **Note:  React guarantees that the method return by ``useReducer()`` have the same memory address and would not change on re-renders.**

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1586627372/state-management-in-pure-react-with-hooks/tvoaajhlult6ee2qpbpg.png)

###Reducer Method
The ``reducer()`` method takes two arguments. The first argument is the current state, and the second argument is an action. Based on the action, the ``reducer()`` method performs some operation and return a new state. 

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1586627372/state-management-in-pure-react-with-hooks/uhipuqxmahtae3swzlcn.png)

**Example**
{% codesandbox state-management-in-pure-react-usereducer-eg-1-sv3fv %}

In the example above, when you add or remove a task, every component on the page is re-render, which we will fix in the next article.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1586685006/state-management-in-pure-react-with-hooks/aall2tuwgvwly0hytiqb.gif)

Now, you have learned all the fundamental concepts of ``useReducer()`` Hook 🤘.

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
What is something in your routines that is helping you work remotely?
Tags: remote, worklifebalance, community
Published: 2020-04-13 01:27:08

Oh, yes, here is yet another blog post on working remote. My goal of this is to foster a conversation about what is working or not working for everyone though , so feel free to post in the comments and skip reading this if you would like! (I seriously will not be offended.)

without further ado, I do not have it down to an exact science yet, but here is how I have handled working remotely:

1) I am a morning person, so I try to stack my meetings in one big block instead of throughout the day. This gives me bigger time blocks to code, test, or fix a bug. Understanding that I was an early bird rather than a night owl, has been key to my productivity.

2) I view my day as a list of things I need to get done rather than a strict 9-5. This has been key to help me maintain a work/life balance and honestly be more productive.

3) I disconnect and take breaks throughout the day. I try to walk 2-3 times a day and/or workout. I also try to take a quick break in-between meetings. [Microsoft talks about this in a recent blog post as well.](https://www.microsoft.com/en-us/microsoft-365/blog/2020/03/18/making-the-switch-to-remote-work-5-things-weve-learned/)

I am always on the hunt for tips and tricks for remote working, so feel free to leave any in the comments!
A Quick Introduction to Variable Scope in Javascript
Tags: javascript, codenewbie
Published: 2020-04-13 01:23:06

Like many new to writing code, knowing the scope of a variable or more often, not knowing the scope of a variable was a common hurdle in my day-to-day adventure in learning Javascript. Here, I hope to breakdown variable scope as well as cement my own understanding of the topic.

Javascript has two scopes, global and local. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Local scope is created by functions and each function has its own “local” scope, therefore any variable declared within a function, can be used within that function or correlating nested functions. Local scope is often referred to as **function scope** and with the addition of ES6 can be further divided to include block scope. In ES6, const and let keywords allow developers to declare variables in the **block scope**, which means those variables exist only within the corresponding block. In general a block in Javascript is anytime you see “{curly braces}” like in a for loop, or when declaring a new function.

##Scope difference between var, let, and const

**Var**: var is globally scoped when declared outside a function, which means it is accessible for use in the whole window object. Var is locally scoped when declared within a function and can only be used within that function.

**Let**: Let is a block-scoped variable, when declared it can only be accessed and updated within its block “{ }” but unlike var cannot be re-declared within its scope. Because let is block scoped, you could have the same variable declaration defined in different scopes

**Const**: Like let, const is also block-scoped, with the difference being const cannot be updated within its scope, once declared it maintains a constant value.


Hope this was of some use to your learning process! Cheers!
My first hackathon 
Tags: codenewbie, javascript, challenge, gratitude
Published: 2020-04-13 01:22:05

This is my first post I will make an effort to start blogging more about my journey into tech the ups and downs and the things that I learn along the way to becoming a software engineer. Yesterday, I took part in my first hackathon it was a really interesting and great learning experience for me. 

It was with Mintbean.io which hosts career hackathons for a way to help developers build up experience which helps in the job hunt. In this hackathon, we had to build a markdown editor in JavaScript and there was a time limit of two hours. It reminded me of those crazy good ole days when I had to do code challenges during my time at Flatiron School but I'll leave that for another post. Although I did complete the challenge and made the markdown editor it was pretty basic and didn't have much cool styling :(

I did learn a lot and that's always a good thing and after the challenge, we had the opportunity to partake in a code review which was awesome because I seldom get the opportunity to do that. It's a very important skill to develop because they say software engineers spend about a third of their time reviewing code. It was 30 minutes where we reviewed each other's code in separate teams. I really got a good opportunity to learn from reviewing other people's code and it gave me good insights into what it means to write good code that's modular and dry. 

There was also a hireside chat with a senior developer which was awesome because she gave us a wealth of knowledge about her experiences and had the opportunity to ask questions about how to best navigate the tech interview process and some tips on how to stand out from the competition some information which I knew and some of which I didn't.

Then after that, the senior developers will then eventually review everyone's code based on the code quality and completion of the code challenge, the aesthetic quality, and a third on the good constructive feedback you give on the code review. Overall it was a great learning experience and regardless of the outcome, I'm grateful for having the experience to learn from other developers and from the challenge itself and I can't wait for the next one.
4 + 1 rules to understand this
Tags: this, javascript, basics
Published: 2020-04-13 01:19:49

Undestanding this
--------------------
`function foo(){
	console.log(this.name);
}`

There are four rules to identify what **this** refers to in a given context
   
1. Default binding:  
	- points to the global or window object
      foo(); 
	
2. implicit binding
	- points to the object using which the method is innvoked;
	
    The object that is standing before the dot 
    is what this keyword will be bound to.
                
     obj.foo(); 

3. Explicit binding
   - possible to set explicit value by one of these methods 
   obj.foo.apply(person,[]);
   obj.foo.call(person, ,,,,);
   foo.call(person,...);

4. Constructor / new Binding
    - value is set the newly created/instantiated Object
	new Constructor(); 

And there is a priority, whic is 4 3 2 1 

The above 4 rules apply inside a normal function, but **not in arrow functions**

Special case
-------------
Arrow functions
- In case of an arrow function, 2,3,4 will not work.
- Inside arrow function the value points to value of this which is in enclosing block where the method is invoked and not where its defined.``
Coronavirus cases 
Tags: javascript, netlify, material
Published: 2020-04-13 00:17:54

---
title: Coronavirus cases 
published: true
description: 
tags: #javascript #netlify #material
---

I have made a web app for checking Global cases over the work, searching bar for a single country and a map.
link https://covid19dailyreport.netlify.com/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2okea0rf60cvzxk5m5vv.png)
Azure Resource Graph - List all subscriptions of a Management Group
Tags: azure, resourcegraph
Published: 2020-04-13 16:49:47

---
title: Azure Resource Graph - List all subscriptions of a Management Group
published: true
date: 2020-04-13 00:00:00 UTC
tags: azure, resource graph
canonical_url: 
---

Like me, you became a big fan of Resource Graph to explore the resources of your Azure subscriptions.

Now nothing is perfect, and even less on Azure, it still lacks features including this one: [Resource Graph type for Management Groups](https://feedback.azure.com/forums/915958-azure-governance/suggestions/39760720-resource-graph-type-for-management-groups)

This type would be practical for example to list all the subscriptions present in a Management Group.

But good news before this planned functionality is available, there is always a way to get there.

For that we will list all our subscriptions via the following request:

```
resourcecontainers
 | where type == "microsoft.resources/subscriptions"

```

If your subscription is in a Management Group, you will find a specific tag as follows:

```
{
    "hidden-link-ArgMgTag": "[\"Admin\",\"GUID\"]"
}

```

or

```
{
    "hidden-link-ArgMgTag": "[\"Sandbox\",\"SOAT\",\"GUID\"]"
}

```

This property corresponds to the tree structure of your Management Groups, which can be read from left to right.

The first field on the left is a Guid which is that of your tenant, and the following correspond to the IDs of your Management Groups by following the hierarchy.

Well of course if you have less than ten subscriptions, you can filter your request globally, but when you have a hundred, you will be very happy to know this tip.

You just have to filter your subscriptions via a request of this type:

```
resourcecontainers
 | where type == "microsoft.resources/subscriptions"
 | where tags contains "Sandbox"

```
Polymorphism in Dart: Part 3
Tags: oop, dart, beginners, webdev
Published: 2020-04-12 23:16:51

We will be continuing our series on objected oriented programming. This article will be a bit short as we discussed it indirectly in the previous article. Need a hint? This principle involves method overriding. So next we are moving on to our topic, polymorphism.

**Poly**, which means "many" and **morph**, meaning morphing into different forms or shapes. Together, Polymorphism, means creating many forms or configurations. A real world example of polymorphism would be if we are buying a car feature. Lets' say a new car feature was just released. The feature is to enable self driving. The result is the car will still drive no matter. But if we modify the driving feature or function and update it. Then instead of the basic automatic driving feature, we can update functionality, and the car can drive itself without human support. 

In the real world this is **Polymorphism**. Polymorphism is updating or modifying a feature, function, or implementation that already exist in the parent's class. 

An Programmatic Example of Polymorphism:

```dart

class Car{
  void driving(){
    print("driving car 1");
  }
}

class Honda extends Car{
  //override method overrides generic driving method
  @override
  void driving(){
    print("driving car 2");
    super.driving(); //calls generic driving method
  } 
}
 
void main(){ 
  Honda car1 =  new Honda();
  car1.driving();
}

output:
driving car 2
driving car 1

```

The **@override** annotation is a note/comment to let someone one know this method is overridden the generic method derived from the parent class. The keyword "super" calls the parent class. This sums of method overriding. Next up is inheritance. So, Stay tuned..
A terrain and actor simulator on Ruby
Tags: ruby, pcg, game
Published: 2020-04-12 22:34:40

---
title: A terrain and actor simulator on Ruby
published: true
description: I wrote a procedural world generator on Ruby and is dope. I couldn't even imagine how dope it can be until I started.
tags: ruby, pcg, game
cover_image: http://scientificgamer.com/blog/wp-content/uploads/2012/09/map1-580x348.jpg
---

I wrote a procedural world generator on Ruby and is dope. I couldn't even imagine how dope it can be until I started.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nb6pu3er1fa6qe7omz9q.jpg)
From the first glance it is just a field of colored squares that looks like terrain. But the cool thing that is not visible is that the terrain is generated randomly and represents a seed value that can generate the same terrain every time you launch the generation or something else if you use another seed. It is generated with a few layers of noise and some secret sauce. The trees are also a noice, but a different kind. People may wander everywhere, but they still die in the end. You control the steps, also you can go around the map and see what is happening on it. Each point is accessible on click or keys movement.

Here you can see the whole world. The world that can be traversed and settled with life.

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

Pretty cool for a thing created on a language mostly used for web, huh?

It is a social simulation project with desktop representation via 2d game gem Gosu and plain Ruby. Most of the initial world objects are generated with PCG methods(noises, FoN algorithms, random distributions, e.t.c). It has a stepping engine with ability to go back and replay various steps. For now, people just eat and die, but I hope to add diseases that can spread between them, murder and sex someday in the future.

If you are interested, you can look at the project and clone it to run yourself [here](https://github.com/artur-martsinkovskyi/gocia).

Would it be interesting if I wrote more on that topic, describing how procedural generation can be done with Ruby, why Gosu is a great choice to start writing games for fun and pleasure and how to glue together Ruby ecosystem to have a fabulous experience so far from Rails?
Should you use created() or mounted() in Vue?
Tags: vue, webdev, javascript, lifecycle
Published: 2020-04-12 22:18:50

All in all, the Vue lifecycle methods are fairly straight forward. There's even a helpful [Vue lifecycle chart](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) that describes when the various methods are called. All of that is super helpful.

Until you want to use them. If I want to load in data from an API, which method should I use? Why does my component crash sometimes when I try to update DOM elements in `created()`? Which method should I use for what?

First of all, let's remember when the methods are called as the page is loaded and our components are added.

The `created()` method will be called on your component *after* the component object is created but *before* it is put on the page. All of the component's data, props, computed and methods will be available. The only thing that won't be available is the template or any of the component's DOM. There really is no view yet to speak of.

`mounted()` is called after the component's DOM created in memory and is added to the page. `mounted()` is basically Vue saying, "I'm finished with this one."

So, which one do I use?
-----------------------

So, with `created()` there is no view yet. And because there is no view, this is the perfect time to fetch data from an API or manipulate data passed in via `props`. Fetching data now means that there will be less of a delay from when the component is show to when the data shows up on the screen because the call will start before the component is rendered.[^1] When the view is shown, the data you've loaded will be shown as well.

So what is `mounted()` good for? It's good for loading anything that manipulates the component's DOM. Maybe it's working with a plugin like Google Maps or a slide show library, `mounted()` is where you will have access to the `this.$el` variable--representing the component's root element--and can load in those other libraries.

So most of the time, expect to use `created()` unless you run into a scenario where you need to have access to the DOM first.

[^1]: This cuts down on user perceived speed, but doesn't actually speed up the API call. Thanks to @papa_john for pointing out that this wasn't clear.
How to use autotools (automake, autoconf, aclocal, autoheader)
Tags: linux
Published: 2020-04-12 22:08:50

---
title: How to use autotools (automake, autoconf, aclocal, autoheader)
published: true
description: We go through how to to create a package to for a cross platform build script. Using the tools autoconf and automake to create Makefile to make and install your c program.
tags: Linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ofhuuep3dit45qwk95yd.jpg
---

{% youtube 3XO0d9Qyc34 %}

We go through how to to create a package to for a cross platform build script. Using the tools autoconf and automake to create Makefile to make and install your c program.