teleren/devto huggingface dataset:
JavaScript Key Code

Tags: html, javascript, programming
Published: 2021-04-28 20:43:42

JavaScript Key Code

Demo == > https://codepen.io/Bilal1909/full/jOyJWpz

<h1>KeyboardEvent keyCode Property</h1>
<mark>Definition and Usage</mark>

<i>The keyCode property returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event.


The difference between the two code types:

Character codes - A number which represents an ASCII character
Key codes - A number which represents an actual key on the keyboard
These types do not always mean the same thing; for example, a lower case "w" and an upper case "W" have the same keyboard code, because the key that is pressed on the keyboard is the same (just "W" = the number "87"), but a different character code because the resulting character is different (either "w" or "W", which is "119" or "87") - See "More Examples" below to better understand it.

Tip: To find out if the user is pressing a printable key (e.g. "a" or "5"), it is recommended to use this property on the onkeypress event. To find out if the user is pressing a function key (e.g. "F1", "CAPS LOCK" or "Home") use the onkeydown or onkeyup event.

Note: In Firefox, the keyCode property does not work on the onkeypress event (will only return 0). For a cross-browser 
solution, use the which property together with keyCode, e.g:</i>

<mark>
Tip: For a list of all Unicode characters, please study our Complete Unicode Reference.
</mark>

<mark>
Tip: If you want to convert the returned Unicode value into a character, use the fromCharCode() method.
</mark>
<b>Note: This property is read-only.</b>
<mark>
Note: Both the keyCode and which property is provided for compatibility only. The latest version of the DOM Events Specification recommend using the key property instead (if available).
</mark>
<mark>
Tip: If you want to find out whether the "ALT", "CTRL", "META" or "SHIFT" key was pressed when a key event occured, use the altKey, ctrlKey, metaKey or shiftKey property.
</mark>
Gmail Clone | Flutter
Tags: flutter, dart
Published: 2021-04-28 20:23:43

Hi Guys! I made a gmail clone using Flutter. You might have a look of it into my github - https://github.com/qwertypool/Gmail-Clone/ 

Here are few screenshots of the app -  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alz53cebsr4f1dwhk0vr.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k45hay362m6cwsa9no9m.png)

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

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

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


Please guys do star the Repository if you liked it!
Free Planning Poker React App
Tags: react, firebase, firestore
Published: 2021-04-28 20:16:46

Happy to share that my open source Planning Poker app is ready to use now.

URL: https://planning-poker-agile.web.app/

## Introduction
Free / Open source Planning Poker Web App to estimate user stories for your Agile/Scrum teams. Create a session and invite your team members to estimate user stories efficiently.

## How to use it?.
It should be self explanatory on how to use the app, but just in case if you get stuck somewhere, below instructions should help!

URL : https://planning-poker-agile.web.app/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dai3gycefvasact9rvz1.png)

1. Create new Session — In the home page, Enter session name and your name, and Click on Create button. Your new session should be ready to use now.
1. Invite your team members — Once you create the session, use the Invite button in session to copy the invite link and send it to your team members.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfphnsrh5ac36g79j24n.png)
Once they receive invite link they can join the session by entering their name in the invite link, session ID will be auto populated.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bptcg1o8gxlaszrcmfb2.png)

1. Vote — Once all team members join the session, they can vote/provide estimate for the user story by clicking on the card.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njg6kd0agwx8k2tszena.png)
1. Voting Status — Voting status will be displayed in the user card with emoji- 👍 — for Voting Done, 🤔 — for Yet to Vote. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db03su3wlnzkb8e59s7a.png)
1. Result- to see the voting results, moderator can click on the Reveal button to see all team members voting. If someone didn’t vote, you will see thinking face. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fkg2igurhovnbhi49p4.png)
1. Restart — To start estimate for next user story, moderator can click on Restart button which should reset voting.
1. Exit — Once you Refinement/Planning team members can leave the session by clicking on Exit button
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpdiyd4gky1jjexcnj4m.png)
1. Recent Sessions — Both Moderator and team members can re-use the same session by accessing it from the Recent Sessions section in the home page. To keep environment friendly please use recent sessions as much as possible. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js660a2f90ghlzsnemwv.png)

That’s it, as simple as it is. Start using the App with your teams now.

If you would like to contribute to the App, you are more than welcome. Visit the github repo here: https://github.com/hellomuthu23/planning-poker

Tech Stack: React, Material-ui, Firestore, Firebase
SSL certificate for java application
Tags: java, openssl, programming, ssl
Published: 2021-04-28 19:50:41

A third-party service is available via https, so how can java app connect to that service?

### Truststore and Keystore
Java has two places for save certificate: *truststore* and *keystore*

*Truststore* - for client and public key
*Keystore* - for private key

In our task we need a *truststore*

### Tools 
For SSL certificate use such tools like [openssl](https://www.openssl.org/) and *keytool* from jdk

### Example
First of all download certificate from third-party-service.
```
sudo rm -f thirdPartyCert.pem && sudo echo -n | openssl s_client -showcerts -connect third-party-service:443 | sed -ne '/-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p' > thirdPartyCert.pem
```

Copy current *truststore*
```
cp $JAVA_HOME/lib/security/cacerts currentCacerts
```

Import the new certificate to *truststore*
```
keytool -import -trustcacerts -keystore "currentCacerts" -alias third-party-service -file "thirdPartyCert.pem" -storepass changeit
```

Check certificate
```
keytool -list -v -keystore currentCacerts -alias third-party-service -storepass changeit
```

Use the option to add a certificate while launching your app
```
-Djavax.net.ssl.trustStore=mySuperCacerts
```

Perfect!
![Alt Text](https://media.giphy.com/media/1yiPWNsQ1vq7V90fRY/giphy.gif)
My First Program
Published: 2021-04-28 19:38:36

I'm taking a computer science class that required a terminal program.  I decided to make a blackjack game because I'm familiar with it and the other games I play seemed too complex to start with.


I defined some lists for card generation and a dictionary for scoring.  The hand class handles scoring, printing, determining winners, and dealing cards.  A while loop keeps the game going so long as someone's 'seated', and allows for players to come and go from the table.  2 lists of hand objects define new players and what seats are taken. Try Except is used to filter input while keeping the screen tidy.

https://github.com/Bavarcarus/Blackjack_Project/blob/main/blackjack.py
Seek ideal solutions by thinking backwards: from the goal to the starting point ⏮
Tags: thinking, architecture, lateralthinking, watercooler
Published: 2021-04-28 19:16:31

**Let your imagination run wild: How does the ideal solution to your problem look like? Write down it’s perfect characteristics (no matter they may seem contradicting with each other at the first sight). Then visualize you already achieved it and answer: What was the last step I had to make to get there? Write it down. Next: And what was the step just before the last step? Then repeat until you find you’re very close to the starting point, where you are now.** 

If at the end you find any obstacles to get to the starting point, write them down. Next, answer: What are alternative ways to overcome the stumbling blocks? What are pros and cons of each workaround?

Does any of the workarounds satisfy you? If not, which one do you you find most optimal? Think if you can mitigate it’s disadvantages so they are not so painful. 

### Benefits of thinking backwards

The main benefit of thinking the way described above is it increases the likelihood of finding the perfect solution of your problem while minimizing the costs.

It’s because it helps to avoid the fixation on the known limitations and dangers. Focusing first on the current circumstances might mislead you. Your prejudices and old patterns of thinking can cut off paths of research that could lead you to a best possible solution. You may cut them off too early just because they don’t look attractive at the first sight (i.e. have some evident disadvantages). But then you might overlook the considerable benefits waiting for you at the end of this path that could dominate the obvious cons. 


### Summary
- visualize your ideal solution
- what was the last step to get there?
- what was the previous and previous steps…?
- reduce the cost of getting to the starting point where you are now


### What are your methods of finding best possible solution?
I’m really interested in your ways of seeking the ideal solution. Please let me know about your tricks in the comments or message me on [twitter](https://twitter.com/krisplatis/status/1387491622787682306)! Thanks in advance!
SPACE INVADERS - PC GAME | Trailer
Tags: python, gamedev, pygame, pcgame
Published: 2021-04-28 19:13:44

**Hello Dev's**,
 I created a 🛸SPACE INVADERS - PC Game using pygame (Python) ...
The game is almost completed just some final touch left...
After some days game will be available on my website https://arwazkhan189.github.io/

Game Trailer link - https://youtu.be/zF5doa6dUZo
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ot534ydj8nunxhm6ilk.png)

**Thankyou 🙏**
Ordered Vs Unordered In Python
Tags: python, beginners, codenewbie
Published: 2021-04-28 18:44:00

There are different types of data structures in Python such as lists, tuples, dictionaries, and more.

### Lists
It is a collection of a mutable **ordered** sequence of elements and can be accessed through indexing and defined inside []. Each element inside the list is called an item.

![List Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikrjquf5d5k4mhw4m597.JPG)

From the above image, it is clearly seen that list remembers the order of insertion or follows a sequence in which elements are inserted. 

### Tuples
It is a collection of **ordered** and immutable elements. Tuples are sequences, just like lists. It is defined inside () and can be accessed through indexing.

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

The above image shows that the tuple is ordered data structure and follows the insertion sequence.

### Dictionary
It is a collection in which items are defined in key-value pairs inside {}. These items are **unordered**, changeable, and value is accessed through the particular key.
Each key is separated from its value by a colon (:), the items are separated by commas.
Keys are unique within a dictionary while values may not be. The values of a dictionary can be of any type, but the keys must be of an immutable data type such as strings, numbers, or tuples.

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

In the above image, the order of insertion and output of the dictionary is different but what remains the same is the mapping of values with keys as the positioning might 
vary.


In the dictionary, we don't access items based on position unlike in lists and tuples but through keys.
Complex Design of CSS
Tags: css, html
Published: 2021-04-28 19:02:53

                        Cascading Style Sheets
This is the picture of that css work. Which I have learned earlier this year. I found it interesting. 

![heart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3kz7bp3hmyebtux1i8i.PNG)
If you also want to make this heart picture. Here I have given code you can try this it using notepad or any text editor. Write "div class="heart"" and close the div tag finally.

*CSS Code:*
```<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: ;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style> 
```
Getting started with GIS Programming
Tags: tutorial, gis, geospatial, beginners
Published: 2021-04-28 18:48:18

I have been asked many times on possible ways one can get started in building geospatial-based applications and analysis software. Few resources are available online to explain these approaches, and also Geoinformatics, Geomatics, and GIS.

This article is an approach to explain Geoinformatics, Geomatics, and GIS, and how to begin a programming approach towards the fields. 

## What is Geoinformatics? 

It is the science and technology dealing with the structure and character of spatial information, capture, classification, and qualification, storage, processing, portrayal, and dissemination, including the infrastructure necessary to secure optimal use of this information.

Geoinformatics is a combination of two words, **Geo** which refers to **Geospatial**, and **Informatics** which refers to **Information Science** a multidisciplinary science (e.g., computer science, software engineering, computer vision, mobile and game technology, intelligent system, internet of things).

 ![Geoinformatics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy5i3i1fyvmr2zcom70y.png)

## What is Geomatics?

It is a discipline concerned with the collection, distribution, storage, analysis, processing, presentation of geographic data or geographic information. It deals more with surveying and includes geomatics engineering (and surveying engineering) with geospatial science (geospatial engineering and geospatial technology).

![Geomatics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l8tme3xfqs3a1hgq7aj.png)

## What is GIS? 

A geographic information system (GIS) is a framework for gathering, managing, and analyzing data. Rooted in the science of geography, GIS integrates many types of data. It analyzes spatial location and organizes layers of information into visualizations using maps and 3D scenes.

![GIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsjh1qv4j861te4qttcm.jpeg)

## GIS Programming Languages

We have numerous programming languages out there, and it is hard to choose which one is best for GIS applications. Python is a multipurpose programming language, and so far, it is the language I advise people to learn when starting with GIS programming. You should also learn JavaScript because this will be useful when dealing with some mapping libraries like Leaflet and Google map APIs.

Languages such as C and C++  also make use of advanced application development. R and Julia are well recognized when dealing with Geospatial Analysis and Big data. Other programming languages used are depending on the task at hand and companies specific requirements. 

## Conclusion

You can now begin your journey into building GIS applications with a better understanding and a clear pathway. You sure don't want to miss the coming articles. Stay tuned.

Feel free to reach out to me via Twitter: [@MustaphaMoshoo8](https://twitter.com/MustaphaMoshoo8)
Firebase Cloud Messaging – How to Send Upstream Messages | Android
Tags: firebase, cloud, android
Published: 2021-04-28 18:26:35

https://grokonez.com/android/firebase-cloud-messaging-send-upstream-message-firebase-android

Firebase Cloud Messaging – How to Send Upstream Messages | Android


In some <a href="https://grokonez.com/tag/cloud-messaging">Firebase Cloud Messaging tutorials</a>, we have known way to receive Messages. Today we're gonna look at how to send Upstream Messages from an Android Client App.

Related Post: <a href="https://grokonez.com/spring-framework/spring-boot/firebase-cloud-messaging-xmpp-server-example-receive-upstream-messages-spring-integration">Firebase Cloud Messaging – XMPP Server example to receive Upstream Messages | Spring Integration</a>

<!--more-->
<h2>I. Way to do</h2>
<h3>0. Add Firebase to Android App</h3>
<h4>0.1 Add Firebase Config file</h4>
Follow this <a href="https://grokonez.com/android/how-to-integrate-firebase-android-app-android-studio#3_Add_Firebase_to_Android_App">guide</a> to generate <strong>google-services.json</strong> file and move it  into your Android App root directory. You don't need to get SHA-1 Key in this example.
<h4>0.2 Add dependencies</h4>
- <strong>build.gradle</strong> (project-level):
<pre><code class="language-java">
buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.1.0'
    }
}
</code></pre>
- <strong>build.gradle</strong> (App-level):
<pre><code class="language-java">
dependencies {
    // ...
    compile 'com.google.firebase:firebase-core:11.0.2'
    compile 'com.google.firebase:firebase-messaging:11.0.2'
}

apply plugin: 'com.google.gms.google-services'
</code></pre>
<h4>0.3 Android Manifest</h4>
For Firebase Service:
<pre><code class="language-html">&lt;application
    ...
   &lt;activity android:name=&quot;.MainActivity&quot;&gt;
       ...
   &lt;/activity&gt;

   &lt;!-- Firebase Service --&gt;
   &lt;service android:name=&quot;.MyFCMClass&quot;&gt;
       &lt;intent-filter&gt;
           &lt;action android:name=&quot;com.google.firebase.MESSAGING_EVENT&quot; /&gt;
       &lt;/intent-filter&gt;
   &lt;/service&gt;
&lt;/application&gt;</code></pre>
<h3>1. Get Sender ID</h3>
Go to Settings of your Firebase Project in <a href="https://console.firebase.google.com/" rel="nofollow">Firebase Console</a> to get <strong>Sender ID</strong>.
<h3>2. Send an Upstream Message</h3>
Using <code>FirebaseMessaging.send()</code> method:
<pre><code class="language-java">
FirebaseMessaging fm = FirebaseMessaging.getInstance();
fm.send(new RemoteMessage.Builder(SENDER_ID + "@gcm.googleapis.com")
  .setMessageId(MESSAGE_ID)
  .addData("key-1", "value-1")
  .addData("key-2", "value-2")
  .build());
</code></pre>
<h3>3. Handle Callbacks</h3>
We can implement <code>onMessageSent()</code> and <code>onSendError()</code> to check the status of Upstream Messages in the class that extends <code>FirebaseMessagingService</code>:

More at:

https://grokonez.com/android/firebase-cloud-messaging-send-upstream-message-firebase-android

Firebase Cloud Messaging – How to Send Upstream Messages | Android
Day 68
Tags: 100daysofcode, programming, react
Published: 2021-04-28 17:59:35

Day 68/100 of #100DaysOfCode

I'm learning React JS. And today's topics, Lifting State Up. And problem-solving on codewars using JavaScript.

Hours coded: 3.1
Lines of code: 338
Keystrokes: 3906

via @software_hq's #vscode extension
What is COALESCE( ) in MySQL?
Tags: mysql, dbms
Published: 2021-04-28 17:33:32

Syntax:COALESCE(expression_1, expression_2,..................); (In coalesce() more than one argument can be sent).

COALESCE() will always return a single value of the ones we have within parenthesis, and this value will be the first non-null value of this list, reading the values from left to right. 

If COALESCE() has two arguments, it will work precisely like IFNULL().

IFNULL() and COALESCE() do not make any changes to the data set. They merely create an output where certain data values appear in place of NULL values.

Ex: Select dept_no, dept_name, coalesce(dept_manager, dept_name, "N/A")  as dept_manager from departments;

Here in the 3rd column[Output] if there are no NULL values in the dept_manager then those values are printed else if there are null values in 3rd column then the value in dept_name column is printed, if the dept_name column has null values then N/A is printed.

COALESCE(expression_1): COALESCE() can also have only one argument.

Ex: Select dept_no, dept_name, COALESCE(“department manager name”) as fake_col from departments;
(This will print a 3rd column with “department manager name” as values in all the rows).

Here are some more Examples:

Question 1: Select coalesce(null, null, “Third”) as coalesce_test;
O/p: Third
Question 2: Select coalesce(“First”, null, “Third”) as coalesce_test;
O/p: First
Question 3: Select coalesce(“First”, “Second”, “Third”) as coalesce_test;
O/p: First
Question 4: Select coalesce(null, “Second”, null) as coalesce_test;
O/p: Second