teleren/devto huggingface dataset:
Monster Game Vanilla JS Accademy
Tags: vanillajsaccademy, javascript
Published: 2019-11-11 12:40:52

---
title: Monster Game Vanilla JS Accademy
published: true
description: DOM
tags: vanillaJSAccademy, javascript,  beginner
---

{%github https://github.com/GiandomenicoRiceputi/Monster-Game %}

🥳 DEMO 🥳  [https://giandomenicoriceputi.github.io/Monster-Game/].

# Monster-Game

In this project I am going to play around method in order to shuffling an array (The monsters).  
For this I use:     
```
/**
 * Randomly shuffle an array
 * https://stackoverflow.com/a/2450976/1293256
 * @param  {Array} array The array to shuffle
 * @return {String}      The first item in the shuffled array
 */
var shuffle = function (array) {

	var currentIndex = array.length;
	var temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
		// Pick a remaining element...
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;

		// And swap it with the current element.
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}

	return array;

};
```  

Don't forget the accessibility and add the alt text to the images.
I use the Element.closest() method to get the  closest parent up the DOM tree. I use the simple math (++) to help me in the win or lose function.
Where does luck end, and privilege begin?
Tags: discuss
Published: 2019-11-11 12:33:59

I've seen children of millionaires insisting they are self-made, and I've seen first immigrants building their success alone in a foreign country with a foreign language infusing their stories of references to their own privilege.

I have a gut feeling that by labelling too many things with "privilege" we weaken this very term, but I have a hard time drawing the line.

If you feel like, would you comment with two personal stories, one that you label with "privilege" and the other with "luck"?

I'll start:

I have the privilege of having a morally and economically supporting family, which allows me to take a certain dose of risks.

I had the luck of enjoying software development, which gives me a degree of economic freedom that few have.
Table Of Content Vanilla JS Accademy V2
Tags: codepen, javscript, beginners
Published: 2019-11-11 12:30:33

---
title: Table  Of Content Vanilla JS Accademy V2
published: true
tags: codepen, javscript, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5t9cr2pp45rv87wua0lf.jpg
---



{% codepen https://codepen.io/giandomenico/pen/pooZdBZ %}
Dynamic queries in GraphQL
Tags: graphql, javascript, node, webdev
Published: 2019-11-11 12:13:03

---
title: Dynamic queries in GraphQL
published: true
description: Static queries in GraphQL is standard and easy. Well, how do you generate dynamic queries ?
tags: graphql, javascript, node, webdev
---


A simple GraphQL query looks like this: 

```
query myQuery() {
    user {
        age
        firstName
        lastName
        dob
       }
     } 
```
Above query returns response of the format
```
data {
   user {
	   age: 23,
	   firstName: "John",
	   lastName: "Smith",
	   dob: "01-01-1970"
   }
 }
 ```
Well, this is pretty standard stuff. GraphQL endpoint returns the exact fields are requested. 

Now, what if I want to query different fields every time ? For eg, I want to query `{ age, firstName }` first time and then `{ age, dob }` .  I wouldn't want to fetch `firstName` in second case since I won't be needing it. This is a solid approach especially when an API call is involved with certain fields.

Usecases for this would be when
1. There is a checklist on the UI containing which data elements need to be fetched.
2. User selects his authorisation criteria and we want to fetch just that.

One way to do this would be to generate queries depending on the fields specified. But this gets pretty messy as soon as we introduce nested jsons.

To solve this, GraphQL has a very handy feature called [directives]([https://medium.com/open-graphql/graphql-directives-3dec6106c384](https://medium.com/open-graphql/graphql-directives-3dec6106c384)](https://www.apollographql.com/docs/graphql-tools/schema-directives/)). Very specifically, `@include` directive solves the problem of dynamic querying.

Now, we will rewrite the above query using `@include` directive.

```
query myQuery($age: Boolean!, $firstName: Boolean!, $lastName: Boolean!, $dob: Boolean!) {
       user {
       age @include(if: $age)
       firstName @include(if: $firstName)
       lastName @include(if: $lastName)
       dob @include(if: $dob)
       }
}

variables: 
 {
  age: true,
  firstName: true,
  lastName: false,
  dob: false
  }
  ```
The response of the above query would be: 

```
data {
   user {
	   age: 23,
	   firstName: "John"
   }
 }
```

It returns just `age` and `firstName` since only those were set to `true` in the variables json. Another good thing about this `@include` directive is, GraphQL engine do not even execute the corresponding resolvers thus gaining us performance. Manipulating these variables json is very simple and the query will not need be mutated for every request. To get the values of `dob` instead of `firstName`, we just need to change `firstName: false` and `dob: true` in variables json.

Downside of using this directive is the queries turn out to be much more verbose and the need to repeat the variables at multiple places. But as explained [here](https://github.com/apollographql/apollo-server/issues/3080#issuecomment-515705883), it is an inherent part of GraphQL type safety.
Integrated Monitoring and Reporting Module. 
Published: 2019-11-11 12:06:07

Helical provides cutting edge cybersecurity monitoring tools for small and medium-sized businesses. This tool offers you a single-pane-of-glass for firewalls, intrusion prevention applications, and other security tools and devices.

For more details visit: https://helical-inc.com/hlcproducts/integrated-monitoring-reporting/
Automate Your Project Initialization Using Python & Shell Script
Tags: python, showdev, tutorial
Published: 2019-11-11 12:02:22

So every time I start a new project, I repeat the following steps:(most of you would, too)

 - Create a directory for the project. 
 - Create and initialize a git repository for that directory. 
 - Push this directory onto Github. 
 - Open this project directory in VS Code Editor.

And repeating all these steps for every project is tedious. So as a beginner in python scripting, I thought of automating this whole process using a python script and then executing this script in the command line using shell script.

Check it out at my blog below.

{%medium https://medium.com/byte-tales/automate-your-project-initialization-using-python-shell-script-6f6476cefb2e %}
Create an OTP message template in a two-factor authentication extension for Opencart
Tags: 2factorauthenticationapp, 2stepauthentication, opencart, opencartextension
Published: 2019-11-11 11:59:49

Two-factor authentication extension provides the functionally to authenticate the customer on a store. Opencart two-factor authentication app is very useful in many ways like if the information of users that admin have is appropriate admin can easily contact to the user very easily through the mail and contact number. In that, we have provided the choice where admin wants to show the popup.
There is a new update in the 2-factor authentication extension is that admin can create the default template of the message that is sent to mail and contact number to verify them.
· In the first step to create the SMS template for OTP verification message go to > Admin > Purpletree SMS > Settings > SMS Verification tab.
· In the second step you need to choose the page on which do you wants to show the verification popup (In which user have to enter the OTP which comes on email or mobile). There are two pages that are checkout and register page so, select the page from the dropdown on which do you wants to show the popup.
· In the above screenshot as you can see the checkout template and register page template admin can define any template separately for both checkout and register page.
· There is a question arise how _OTP_ variable need use. Leave the _OTP_ variable constant where you wants to show the OTP number for example:
A sample template I have created-
"Your verification code is _OTP_.
If you are having any issues with our DEMOSTORE accounts please don't hesitate to contact us by replying to this mail."
Then after the mail comes in the inbox like:-
· If you are getting any issues after this then please raise the ticket at https://www.helpdesk.purpletreesoftware.com/.
Get this Extension at: https://www.purpletreesoftware.com/otp-2fa-opencart.html
Unexpected getSnapshotBeforeUpdate behaviour
Tags: react
Published: 2019-11-11 11:55:36

So I'm reading the documentation for [getSnapshotBeforeUpdate](https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate) and it quite clearly outlines the exact use case I need it for (moving the scroll position when the page content moves). It also shows an example of reading the previous props (`prevProps`) and comparing them to the current props (`this.props`) to see if the number of items in the list has changed. I'm doing the same thing in my application, but I'm getting some odd behavior. Instead of the `prevProps` having the previous value and `this.props` having the current values, it behaves like this once then these values both change at once.

For example if I was assigning a prop each letter of the alphabet this is what the outcome would be:

| getSnapshotBeforeUpdate call num | `prevProps` | `this.props` |
| ------------- |:-------------:| -----:|
| 1 | a | b |
| 2 | c | c |
| 3 | d | d |

Does this seem like expected behaviour?

The only thing I can think of is that I have this component wrapped in a redux store, so maybe that is doing something funky with the parameters? I'm really at a bit of a loss as to what is going on.
kwik - quickly bootstrap a project
Tags: rust, devops, vscode, project
Published: 2019-11-11 11:47:57

---
title: kwik - quickly bootstrap a project
published: true
description: A first project in rust
tags: rust, DevOps, vscode, project
cover_image: https://raw.githubusercontent.com/sam-aldis/kwik/master/kwik.png
---

After writing something similar as a tool to quickly grab a repository in dart I decided to create the same thing in rust just to teach myself this language, I knew the basics as I had been dabbling in rust for a while but hadn't actually created anything useful.
The project can be found over at:

https://sam-aldis.github.io/kwik/
----

As I'm sure you know, these days we work from many different locations and being able to either quickly scaffold a new project from a template repository or get straight to work complete with a copy of (vs)code-server running be it from a docker image, locally or on a server within a minute is something many people will find useful.

I need help to move this project forward and need someone to compile it to osx (and eventually windows) for me as my day job will inevitably take priority but for now this maybe something useful to you.

== EDIT ==
launched on producthunt, help a fellow dev.to'er and upvote :)
[here](https://www.producthunt.com/posts/kwik?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-kwik)
![kwik](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=174086&theme=light)
Makers Academy - Pre-Course!
Tags: ruby
Published: 2019-11-11 11:14:11

So i decided to take the plunge and commit to an idea I have been thinking for some time - changing careers and moving into coding!

This was not a snap decision, I have been planning this for some time and decided the time was right.

I will keep this blog up to date weekly to describe my thoughts and views of the journey i am about to embark on...wish me luck!

David
Creating files with "touch"
Tags: cli, beginners
Published: 2019-11-11 11:09:29

---
title: Creating files with "touch"
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q0ykd07d86vqxr2dwagj.jpg
tags: cli, beginner
series: Command-line myths
---

## The act of creation

`touch` is often put forward as the command to create a file. What's wrong with that? Let's start with the manual page[^1].

```man
touch -- change file access and modification times
```

It's a command that lets you update a file's timestamps without loading the file. So it's quick - you don't need to open and save a document manually. And it's useful in a few cases that new users probably don't care about. If your system is set to delete logs over a certain age, you can `touch` one you want to keep. 

`touch` has the _side-effect_ of creating an empty file if it doesn't already exist; that's not its purpose. It's one way of doing it, but you can accomplish the same thing many other ways. You can redirect nothing to a file, for example:

```sh
touch this
> that # then hit ctrl-c if you're using zsh
echo > the-other
cp /dev/null yet-another
```

And these will all do mostly the same thing[^2]

But you have to figure `touch` is more straight-forward, right? It's one command, with no redirection or funny special characters to remember!

Sure. The problem with `touch` being taught as a way to create files isn't because it's a bad way of doing it, it's because _you don't need to create files_.

## Say what?

When was the last time you were using a text editor and said to yourself, "Damn it, I forgot to create this file first, how can I save my work?" That's right, never.

There are a very, very limited number of times you - as a learning user - might want to create an empty file. Maybe you use `.gitkeep` to save empty directories to `git`. You should probably stop doing that. Maybe you want to add a `.hushlogin` to your home directory? You probably didn't know that was an option. Maybe you want to check whether you really have write-permission to this mounted directory? Ok, sure.

But no, people rarely _create_ empty files. If anything, you'll be creating files from templates, which is probably handled by your editor or IDE anyway. 

Why am I bringing this up? Because `touch` appears near the top of lists of commands suggested to command-line newbies all the time. 

Here's the lesson: you don't need to waste time learning something that seems so oddly-named. YAGNI.

_Spare your brain for something else_.

--
If you have any practical use cases for creating empty files, or another reason you can think of for this to be a useful command for beginners, let me know in the comments!

[^1]: There's even a [tl;dr](https://tldr.ostera.io/touch).
[^2]: `echo > the-other` will result in a file containing a newline, whereas the others will result in an empty (0-byte) file.
About successful software careers; methods; & making code faster 
Tags: todayilearned, programming, career
Published: 2019-11-11 11:00:11

*TL;DR style notes from articles I read today.*

### [7 ways more methods can improve your program](http://bit.ly/2pbgT1u)

- Methods help you hide unnecessary details making the code easier to read. 
- Methods that have well-written names make the programs easy to understand. 
- Methods make programs shorter by avoiding duplication of code. 
- Methods ensure that all steps that need to be performed in a certain order always get done in that specific order and leave no room for any half-executed behaviors in your program. 
- Methods help you in simplifying testing, logging & debugging. 

*[Full post here](http://bit.ly/2pbgT1u), 8 mins read*

---

### [5 powerful ways to make your code run faster](http://bit.ly/2NB3Akk)

- Optimize only if the program is important and it is genuinely slow.
- Don’t tune anything without using a good profiling tool first that can help find the hotspots in a program.
- Enable compiler optimizations to help improve runtime.
- Tune the code by collecting common subexpressions, replacing expensive operations, eliminating loops, caching frequently used values or rewriting in a lower-level language.
- Include code inspection into your governance models to remove inefficient snippets.

*[Full post here](http://bit.ly/2NB3Akk), 7 mins read*

---

### [The five pillars of a successful career in software](http://bit.ly/2CCcFCR)

- Sharpen your coding skills through practice, reading blog posts, and relevant coding sites.
- Develop team communication skills. Accept and provide guidance, feedback and engage with the team. 
- Watch out for interesting ecosystem movements in open source and commercial software. Be aware of your environment. 
- Set time for reflecting on, and refreshing your personal productivity habits.
- You are responsible for managing your career. Communicate well with your managers. 

*[Full post here](http://bit.ly/2CCcFCR), 4 mins read*

---

*[Get these notes directly to your inbox every weekday by signing up for my newsletter, in.snippets(), here.](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
How to Escape { in Python
Tags: python
Published: 2019-11-11 11:14:47

---
title: How to Escape { in Python
published: true
date: 2019-11-11 10:00:00 UTC
tags: python
canonical_url: http://hugomartins.io/essays/2019/11/escaping-in-python/
---

Last week, I was faced with an intriguing question. How do I escape `{` when using `str.format` in Python?

[str.format(](https://docs.python.org/3/library/stdtypes.html#str.format)[**args*](https://docs.python.org/3/library/stdtypes.html#str.format)[,](https://docs.python.org/3/library/stdtypes.html#str.format) [***kwargs*](https://docs.python.org/3/library/stdtypes.html#str.format)[)](https://docs.python.org/3/library/stdtypes.html#str.format) is a function that can be used to perform string formatting. Explicit, huh? A simple example of using `str.format` is:

```
    >>> "Hello {}!".format("World")
    'Hello World!'
```

But…what if you need to format a string that actually has the character `{` in it, such as a *“Hello {World}!”*? It is actually fairly simple. From [Format String Syntax](https://docs.python.org/3/library/string.html#formatstrings):


> Format strings contain “replacement fields” surrounded by curly braces `{}`. Anything that is not contained in braces is considered literal text, which is copied unchanged to the output. **If you need to include a brace character in the literal text, it can be escaped by doubling:** `**{{**` **and** `**}}**`**.**

So, our initial example would be:

```
    >>> "Hello {{{}}}!".format("World")
    'Hello {World}!'
```

That’s right, you need 3 braces! `{{` turns into `{` once the string is formatted, `}}` turns into `}` once the string is formatted and the middle `{}` are the braces that actually allow you to dynamically  format the string.

A few more examples:

```
    >>> "Hello {{{}}}!".format("World")
    'Hello {World}!'
    >>> "{{".format("World")
    '{'
    >>> "}}".format("World")
    '}'
    >>> "{}".format("World")
    'World'
```

It turns out that this is much simpler than I thought it would be. It took me a lot more time to find out. I assume that was because I wasn’t using the appropriate keywords and I ended up reading the manual - which is what I should have done in the first place.

**P.S.:** Immediately after this, I found the [following](https://stackoverflow.com/questions/2847272/python-string-formatting-when-string-contains-s-without-escaping) [StackOverflow](https://stackoverflow.com/questions/19649427/how-can-i-escape-the-format-string) [answers](https://stackoverflow.com/questions/47994397/escaping-str-format-brackets), explaining exactly the same.

_Originally published at [https://hugomartins.io](https://hugomartins.io/essays/2019/11/escaping-in-python/) on November 11, 2019._
recyclerView.scrollToPosition doesn't fully show the recyclerView last item
Published: 2019-11-11 10:40:54

I use scrollToPosition, and even try smoothScrollToPosition function like this 
     binding.rvSearchPostFilters.layoutManager?.scrollToPosition(scrollingPosition)

but when the scrollingPosition is the last item of recyclerView it shows last item half. My recyclerView have horizontal layout manager.
#Day1 of #100DaysOfCode
Tags: 100daysofcode, javascript
Published: 2019-11-11 10:26:14

Yesterday I committed myself to the #100DaysOfCode challenge. First, a little background about myself: I have a bachelor's degree in Economic Informatics and I recently finished a Full Stack Web Development Bootcamp in Berlin. My past work has been mainly in arts as a 3D Motion Designer. 🎨

I'm taking on this challenge because I want to land my first job (hey employers!) and I will also build my portfolio in the process. The way that I will approach this challenge is a bit different. Instead of just coding for one hour every day I am challenging myself to also build something, be it a small website or an app and share it here. Another goal that I'm setting for myself is to share what I've learned during that day.

So let's get going! For my first day of the challenge I built a simple drum kit app, using HTML, CSS and Vanilla JavaScript. This was the first challenge from #Javascript30 series: https://javascript30.com/ The idea for my drum kit was inspired by Björk's song 'Cvalda', which she plays in the wonderful movie 'Dancer in the Dark' (watch it if you haven't!). You can try the drum kit for yourself at: https://gyuluu.github.io/drum-kit/. The way it works is you have to press one of the letters displayed on the screen and then the corresponding sound and animation fires up.

In the process of making this I've learned a few JavaScript tricks:

1. 'transitionend' event - this event occurs when a CSS transition has completed. In this case the transitioned form is removed after the transition has finished.

2. Add, remove and toggle classes on a CSS element

For example adding a class to a <div> element can be achieved in the following manner:

`document.getElementById("key").classList.add("playing");`

3. Playing an audio clip with JavaScript:

First we select the audio element and then we chain the play method:

`document.querySelector("audio").play();`


Happy coding! 👨🏻‍💻
eVTOL Aircraft Market Strategic Insight & Forecast to 2030
Published: 2019-11-11 10:00:23

The eVTOL aircraft market is projected to grow from USD 162 million in 2025 to USD 411 million by 2030, at a CAGR of 20.42% from 2025 to 2030. The need to increase operational efficiency, reduction in human intervention for intercity and intracity transportation using eVTOLs, and growing investment activities around the world are key factors expected to drive the electric Vertical Take-off and Landing (eVTOL) aircraft market growth. The growing demand for an alternative mode of transportation in urban cities due to increasing road traffic congestion globally is a major factor driving market growth.

eVTOL aircraft

Download PDF Brochure @

https://www.marketsandmarkets.com/pdfdownloadNew.asp?id=28054110
vuejs use v-model within a custom component
Tags: vue
Published: 2019-11-11 09:55:40


You can use the `v-model` directive to create two-way data  bindings on form input, textarea, and select elements. It automatically  picks the correct way to update the element based on the input type.  Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.



`<input v-model="myValueVariable" />`



But if you want to use `v-model` within a custom component you will realize that nothing happens.
Thats because there is no event that could trigger a v-model change. The event we are searching for is `input`.


`this.$emit('input', yourValueVariabel)`