teleren/devto huggingface dataset:
Detect Keystrokes in a SFML App C++
Published: 2021-05-08 14:56:45

SFML(Simple and Fast Multimedia Library) provides a simple interface to the various components of your PC, to ease the development of games and multimedia applications.

This article assumes that you have SFML configured and know how to compile and run it

Rendering a new window:

```
#include<SFML/Graphics.hpp>
#include<iostream>

int main(){

    sf::RenderWindow window(sf::VideoMode(600, 600), "Sample SFML App");

    while (window.isOpen()){ 

        sf::Event event;
        while (window.pollEvent(event)){
            
            switch (event.type)
            {

                case sf::Event::Closed:
                    window.close();
                    break;

            }
        }
    }
}
```
This has now rendered a window of 600px height and 600px width and with the title "Sample SFML App".
The `windows.isOpen()` lets us stop the window from closing automatically and perform operations on it, and event can be used to detect things happening in the Window. Also we have used a switch case which can be further used to do things when a certain operation takes place on the window. 

> For example when the "Close" button is pressed on the title bar, the window closes, we can also make it print something, etc.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kxig4e1mjp7sxg70ipl.png)

Now all we need to do is create another case where we will detect any text entered. We will do that by implementing `sf::Event::TextEntered` as a second case.

```
case sf::Event::TextEntered:

                    if(event.text.unicode<128){
                        std::cout<<(char)event.text.unicode<<"\n";
                    }
                    break;
```

This prints all the entered keystrokes(the ones that count as characters) onto the console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/710xfufdpjaf05csiupx.gif)

Full code: 
```
#include<SFML/Graphics.hpp>
#include<iostream>

int main(){

    sf::RenderWindow window(sf::VideoMode(600, 600), "Sample SFML App");

    while (window.isOpen()){ 

        sf::Event event;
        while (window.pollEvent(event)){
            
            switch (event.type)
            {

                case sf::Event::Closed:
                    window.close();
                    break;

                case sf::Event::TextEntered:

                    if(event.text.unicode<128){
                        std::cout<<(char)event.text.unicode<<"\n";
                    }
                    break;
            }
        }

    }
}
```
Exploring Shader Graph in Unity
Tags: unity3d, tutorial, techtalks, todayilearned
Published: 2021-06-01 19:43:04

There is something that you realize really quickly when you start programming games, and it’s that materials are coded differently than anything else. They work almost in mysterious ways that can often be hard to describe and the code is often very dense c style code that doesn’t shed any light on how or why something works the way it does.

Enter Shader Graphs, Unity’s latest attempt to help alleviate some of the mystery and confusion around how shaders work. This feature is recently out of preview and has a wide array of features that aim to shift how shaders are made. Before, you made shaders with code, now the hope is that you make shaders with graphs like the one below:
![Shader](https://miro.medium.com/max/1400/0*n85E7-4YmDWMVvcM)


Want to follow along? [Here is a link to the sample project](https://on.unity.com/2Yqn6Vm)!

So if shaders are for programming materials, why is it so hard? Because you are writing low level code that the GPU needs to take and determine how in the world this object is going to look. It’s a complicated process but the benefit is that you are not taking up valuable CPU time with compute heavy tasks that are often needed to determine how something is going to look (i.e. shiny, dull, transparent, etc).

Shader Graphs allow the coder to visually assemble the “graphical elements” that manipulate the end properties of how something is going to look. In the video, we look at the basics of what a node is, how to connect them, and how to find the documentation around each possible node. We also go over some of the new features in Shader Graphs since there have been some changes since the project is now officially supported.

{% youtube Q1yJPPWZnA0 %}

##Pro Tips
1. Make sure you have Shader Graph included in the project
To make sure that you can use Shader Graph, go to Window -> Package Manager and make sure that Shader Graph is included in the project Resources.
   ![Shader](https://miro.medium.com/max/1400/0*65vhSDylT2AaOV1b)

2. Quickly get to the documentation for what a node does.
When looking at a node it might be hard to exactly tell what this black box does when computing. To quickly go to the documentation, Right click on the node and hit ‘View Documentation’. It will bring up a Unity page with relevant information.
   ![Shader](https://miro.medium.com/max/786/0*ag_YvHUhokGZSnhE)

3. Use Sticky Notes and Groups!!
One of the newer features is that you can add sticky notes and groups of nodes to help organize your graph. It massively helps anyone looking at your graph later to understand how something is working. In the example below, you can see a ‘Grass Mask’ group that has a sticky note attached to it.
   ![Shader](https://miro.medium.com/max/4800/0*4hzwN3Yx2CWAtmoq)

Follow me on Twitter for more tech articles!
{% twitter 1398070641153253377 %}
The 3 most interesting C++ posts of May 2021
Tags: bestofdev, cpp
Published: 2021-06-01 19:42:55

Let me share with you 3 interesting [#cpp](https://dev.to/t/cpp) posts from May.

I don't take the most popular articles anymore, because I find that while some articles do meet the criteria to add #cpp as a tag, but they are not mostly about C++. So there is a bit of subjectivity to this list. Yet, I try not to include multiple articles from the same author.

Feel free to share your favourite one in the comments.

***
[Philipp](https://dev.to/daaitch) wrote about a topic that is just so actual for many C++ developers who want to learn another language. Rust seems a natural choice and that's exactly what this article is about, understanding Rust as a C++ developer.

{% link https://dev.to/daaitch/understanding-rust-as-a-c-developer-2o28 %}

***

[Evan](https://dev.to/evantypanski) has been writing a new programming language from scratch and he used C++ for the implementation.

{% link https://dev.to/evantypanski/writing-a-simple-programming-language-from-scratch-part-2-2522 %}

***

Last but not least, [Vishal](https://dev.to/visheshpatel) made a thorough introduction of C++20's coroutines.

{% link https://dev.to/visheshpatel/c-20-coroutine-under-the-hood-3071 %}

Happy coding!

## Connect deeper

If you liked this article, please 
- hit on the like button,  
- [subscribe to my newsletter](http://eepurl.com/gvcv1j) 
- and let's connect on [Twitter](https://twitter.com/SandorDargo)!
Kubernetes on Raspberry Pi
Tags: kubernetes, docker, raspberrypi
Published: 2021-06-01 19:33:38

My friend had developed a proxy server in PHP as a part of his semester project. We both discussed the project and realised that this simple project gave us an opportunity to learn and apply real world concepts as opposed to letting a wonderful proxy server decay as just a proxy for grades. 

Enter, Kubernetes.

I had been personally looking up Kubernetes to understand and hopefully experiment with it for a while, however without an application to deploy, my theory was ineffective. So we decided to deploy my friend's Proxy Server application on his Raspberry Pi. This allowed us to simulate the experience of accessing an actual cluster as opposed to Minikube which would be dependent on our machines being up all the time. 

It wasn't complicated at all. We dockerised and tested the application on RaspberryPi and Docker. Following which the Kubernetes deployment was a walk in the park. 

Read more about the application and deployment [here](https://www.hackster.io/yeshvanth_muniraj/kubernetes-on-raspberry-pi-99d14c)

Thank you!
Troubleshooting K8s Ingress Issues
Tags: kubernetes, eks, k8s, ingress
Published: 2021-06-01 19:31:34

Most K8s resource creation failures are easy to debug, usually you can figure them out with either `kubectl get` or `kubectl describe` command on the failed resource.

However Ingress resources are often cluster-provider-specific, more often than not the errors are not explicit.

## EKS Ingress Troubleshooting

### `kubectl get ingress` doesn't show the ingress you just created
It might have been created in another namespace than you expected. Try again with `--all-namespaces` flag.

### `kubectl get ingress` shows no ADDRESS after several minutes of resource creation
1. Try the AWS official example:
```
kubectl apply -f https://raw.githubusercontent.com/kubernetes-sigs/aws-load-balancer-controller/v2.2.0/docs/examples/2048/2048_full.yaml
kubectl get ingress/ingress-2048 -n game-2048 --watch
```
2. If 1 works in a few minutes, the problem might be in your own manifest file.
3. If no ADDRESS is assigned for 2048 either, try `kubectl logs -n kube-system deployment.apps/aws-load-balancer-controller`
4. If the error message is `Error from server (NotFound): deployments.apps "aws-load-balancer-controller" not found`, follow https://docs.aws.amazon.com/eks/latest/userguide/aws-load-balancer-controller.html to deploy the controller.

(Will add more contents for other providers later)

References:
1. https://docs.aws.amazon.com/eks/latest/userguide/alb-ingress.html
Making an esolang
Tags: esolang, esoteric
Published: 2021-06-01 19:20:57

I have posted about esolangs a lot in the past. From good ones to mine to the esolist but never have I posted about making one.

In this article, I am going to go through a step by step procedure to make an esolang like [loo](https://github.com/technetium-inc/loo). It is a simple language with only 4 commands. `+` to increment the value of the one variable it can hold, `-` to decrement, `#` to print out the value in ascii form (e.g. 97 would be the lowercase letter a) and finally `;` stops the program. I will be making this in python but you can use any language you like.

#### Note
This is not the only way to create an esolang and it is not the only syntax for one. There are many types, each with their own peculiarities. I recommend looking at [esolangs.org](https://esolangs.org) to see these.

# Step 1: Accepting the code
This code takes in input from the user that *should* contain the loo code. It also sets up the variable for the value that loo holds.
```python
value = 0
code = input("Enter your loo code here please > ")
```

# Step 2: String to List
This block of code basically splits the loo code string into a list that will be iterated through later.
```python
lexed = []
for i in code:
    lexed.append(i)
```

# Step 3: Execution
Now we iterate through the `lexed` list and execute the code.
```python
for j in lexed:
    if j == "+":
        value += 1
    elif j == "-":
        value -= 1
    elif j == "#":
        print(chr(value))
    elif j == ";":
        quit()
```

It is as simple as that! I hope you enjoyed this and hopefully I will post again soon.
Placeholder title
Tags: devpride
Published: 2021-06-01 19:18:51

[Note]: # (✨This template is only meant to get your ideas going, so please feel free to write your own LGBTQIA+ story in honor of Pride Month! ✨)

## I'm empowered by...

## I’m hopeful for...

## I'm proud of myself for... 

## Allies can help support LGBTQIA+ folks in tech by...
How to validate a JSON file with JSON Schema
Published: 2021-06-01 16:59:44

These days, I'm regularly checking big JSON files and I was tired to have to check every field manually. So I've searched on internet if we can have a JSON file structure validation.

And I found **[json-schema.org](https://json-schema.org/)**!

---

# What is it?

JSON Schema is a specification to validate the structure of the JSON file with a schema.

*Schema example*
```json
{
    "type" : "object",
    "properties" : 
       "price" : {"type" : "number"},
       "name" : {"type" : "string"}
    }
}
```

As you can see, a schema is a JSON file where you will define all your fields with their type. Then, you can use it with an implementation of a validator and check all your related files!

---

# Validators
In the website, you can see a huge list of validators for a lot of languages/contexts.

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

The one that I like is a python one :

{% github Julian/jsonschema %}

---

Also, if you look a little bit further, you will see other tools to help you to create a schema.

---

Finally, I hope it will help you as much as it helps me.
Happy pride month programmers!
Tags: devpride, lgbtq
Published: 2021-06-01 19:18:25

It's that time of year again! Pride month! This is my first pride month really realizing that I'm part of the community as a Non-Binary/Genderfluid human. I'm really happy with all the support and love from online communities, especially when my fam isn't very supportive 😪. My pronouns are she/her, they/them, and thank you all for being amazing!
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-06-01 18:45:47

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## Slow and steady wins the race

@ruppysuppy has some great tips to share about improving your GitHub profile — spoiler: go slow and don't try to cheat the process.

{% link https://dev.to/ruppysuppy/beautify-your-github-profile-like-a-pro-5093 %}

## Conscious accessibility 

@eevajonnapanula's very first sentence is a great indication of how helpful and compelling the rest of the article is:

_"We, as developers, tend to develop sites unconsciously for people like ourselves. If we don't actively pay attention, the sites are often accessible only for certain types of people."_

So very true. 

{% link https://dev.to/eevajonnapanula/don-t-develop-just-for-yourself-a-developer-s-checklist-to-accessibility-545k %}

## Testing TypeScript

@dastasoft's post is all about going through the basics of TS and understanding the benefits so you can decide if you want those benefits or not. Pretty helpful stuff!


{% link https://dev.to/dastasoft/here-s-what-every-react-developer-needs-to-know-about-typescript-part-1-48ob %}

## Decluttering — fast 🧹 

If you're like me, @yomdroid's article (about how you can sweep out your inbox with Python) is both extremely applicable and a little triggering 😆

Thank you for sharing, Ogheneyoma! I need to try this.  

{% link https://dev.to/yomdroid/decluttering-mailbox-using-python-44l8 %}


## The good, the bad, and the boolean

The TL;DR of this overview from @mpocock1? Bad booleans represent state. Good booleans are derived from state. 

That said, there's so much more to glean from the entire article!

{% link https://dev.to/mpocock1/state-management-how-to-tell-a-bad-boolean-from-a-good-boolean-260n %}


##  Save the date! ❤️ 

Congrats to @christinecontreras on their upcoming nuptials! I _love_ that your wedding planning prep includes building an app to predict the best date to get married based on historical weather patterns and location. <3 

{% link https://dev.to/christinecontreras/perfect-date-a-javascript-and-api-project-1hng %}

## `Reset`ting your Git knowledge

If you are confused about much of the terminology in Git, you are FAR from alone. Thank you for clearing some of it up for us, @pragativerma18. 

{% link https://dev.to/pragativerma18/confusing-terms-in-the-git-terminology-1578 %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Writing A Function That Splits An Array Into Groups The Length Of Size And Returns Them As A two-Dimensional Array.
Tags: javascript, tutorial, beginners, devops
Published: 2021-06-01 18:37:31

```
function chunkArrayInGroups(arr, size) {
  return arr;
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);
```

* Answer:
```
function chunkArrayInGroups(arr, size) {
  let newArr = [];
  
  while (arr.length) {
    newArr.push(arr.splice(0, size));
  }
  
  return newArr;
}

console.log(chunkArrayInGroups(["a", "b", "c", "d"], 2)); // will display [["a", "b"], ["c", "d"]]
```

#### Notes:
 * Firstly, we create a variable. newArr is an empty array which we will push to.
 * Our while loop loops until we dont have a length of the array.
 * Inside our loop, we push to the newArr array using arr.splice(0, size).
 * For each iteration of while loop, size tells the array how many we want to either add or remove .
 * Finally, we return the value of newArr.

#### OR
```
function chunkArrayInGroups(arr, size) {
  let newArr = [];
  for (let i = 0; i < arr.length; i += size) {
    newArr.push(arr.slice(i, i + size));
  }
  return newArr;
}
```
#### Code Explanation:
* First, we create an empty array newArr where we will store the groups.
* The for loop starts at zero, increments by size each time through the loop, and stops when it reaches arr.length.
* Note that this for loop does not loop through arr. Instead, we are using the loop to generate numbers we can use as indices to slice the array in the right locations.
* Inside our loop, we create each group using arr.slice(i, i+size), and add this value to newArr with newArr.push().
Finally, we return the value of newArr.
Google Stock Price Prediction Using LSTM-RNN
Tags: showdev, python, deeplearning, machinelearning
Published: 2021-06-01 18:29:55

Recurrent Neural Networks can Memorize/remember previous inputs in-memory When a huge set of Sequential data is given to it.
These loops make recurrent neural networks seem kind of mysterious. However, if you think a bit more, it turns out that they aren’t all that different than a normal neural network. A recurrent neural network can be thought of as multiple copies of the same network, each passing a message to a successor.

<h4>Made Google Stock Price Predictor</h4>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qldlerds8mhm341qfnr4.png)
<a href="https://github.com/GauravSingh9356/DEEP_LEARNING">Github Link</a>
Return True If The String In The First Element Of The Array Contains All Of The Letters Of The String In The Second Element
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-01 18:28:54

```
function mutation(arr) {
  return arr;
}

mutation(["hello", "hey"]);
```
* For example, `["hello", "Hello"]`, should return `true` because all of the letters in the second string are present in the first, ignoring case.
* The arguments `["hello", "hey"]` should return `false` because the string hello does not contain a y.

#### Hint:

* If everything is lowercase it will be easier to compare.
* Our strings might be easier to work with if they were arrays of characters.
* A loop might help. Use `indexOf()` to check if the letter of the second word is on the first.

* Answer:
```
function mutation(arr) {
   let firstWord = arr[0].toLowerCase();
   let secondWord = arr[1].toLowerCase();

   for (let i = 0; i < secondWord.length; i++) {
    let letters = secondWord[i];
    if (firstWord.indexOf(letters) === -1) return false;
   }
      return true;
 }

mutation(["hello", "hey"]); // will display false
```
Things to listen to while you code
Tags: music, productivity, motivation, watercooler
Published: 2021-06-01 18:25:31

Some people work in silence, i prefer to have a whole opera in my ear while i figure out why line 69 has a problem. These are some things that i helped me have a more productive/fun coding session. 

######Chill (not so intense coding)
* [Freecodecamp radio](https://coderadio.freecodecamp.org/)
* [Coding playlist on spotify](https://open.spotify.com/playlist/37i9dQZF1DX5trt9i14X7j?si=e80827a83c4d4fce)
* [Corecursive podcast](https://open.spotify.com/show/6XU1MRwzCfAXD07YHbpjNv?si=pQtb7Td7T-y0JgUrZmfsGg)
* [Piano playlist](https://open.spotify.com/playlist/37i9dQZF1DX4sWSpwq3LiO?si=147c16f41d504b20) 

> I don't usually bring this bad boy (piano playlist) out nowadays but it sure calmed me down whenever i was feeling frustrated

Let me know what you use in the comment section so i can keep this post updated (please)

_thank you for taking your time to read this_
Day 79 of 100 Days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-06-01 18:19:57

I just completed day 79 of 100 days of swiftui. Today, I learnt about the TabView and also how to read custom`@EnvironmentObject`.

`@EnvironmetObject` is a property wrapper that is used to get objects from the environment. What makes it different from the `@ObservedObject` is the fact that you don't have to pass objects you need into every view. With `@EnvironmentObject` every child view has access to environment objects declared by it's parent.
JavaScript-30 Day-1
Tags: javascript, html, github, css
Published: 2021-06-01 18:08:25

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

I've completed my Day-1 challenge of #javascript30.

Today I made a Drum Kit using Vanilla JavaScript.

demo: https://lnkd.in/gKainBa

GitHub repo:
{% github cenacrharsh/JS-30-DAY-1 no-readme %}

Lessons Learned:

- Used attribute selector in JS for the first time and used the data-key property to pick the elements and to specify the exact Key Code of the pressed key we used the property name keyCode from the keypress event.
```javascript
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
```

- Used 'data-' to create our own HTML attributes eg. `data-key`
```javascript
<div data-key="65" class="key">
```

- we used `audio.currentTime = 0` to prevent a delay when we play sound if we keep hitting a key repeatedly. What happens is `.play()` doesn't work on the audio files already playing so if we repeatedly press a key it won't affect the audio until it has finished playing after which if we press it will play again and to avoid this we set the current time of the audio to 0 (rewind it) every time the key is pressed so that the audio plays even if we spam the key (that is basically how I play drum lol).
```javascript
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
audio.currentTime = 0;
audio.play();
```

-To add some animation to the keys when pressed we add playing class to it when the event occurs but to remove that class we don't simply use `setTimeout()` as it can cause synchornization issues, rather we make use of transition end event and as soon as this event ends we remove the playing class , for this we use `querySelectorAll` as we have to explicity add the event listner to every single element in the Node List.
```javascript
const keys = document.querySelectorAll(".key");
keys.forEach((key) => key.addEventListener("transitionend", removeTransition));
```

-we also used `<kbd>` tag and I've never used it before.Read a blog post where the author said:

"The HTML Keyboard Input Element `<kbd>` represents user input and produces an inline element displayed in the browser's default monospace font."
I think I will need to do a bit more research on this one.
```javascript
<div data-key="65" class="key">
kbd>A</kbd>
<span class="sound">clap</span>
</div>
```

Useful Tip:
-We can find the Key Code of each key on the site keycode.info

Thank You!
Do comment if you find anything wrong or helpful.

You can follow me on:
[Twitter](https://twitter.com/cenacr007_harsh)
[Linkedin](https://www.linkedin.com/in/kumarharsh22/)