teleren/devto huggingface dataset:
Piano game (learn music notation)
Tags: codepen
Published: 2021-12-23 14:55:46

<p>A small exercise that I built right after first learning jquery.
This game helped me memorize music notation (reading sheet notes)
I believe in doing mindless repetitive actions for remembering stuff.</p>

{% codepen https://codepen.io/harunpehlivan/pen/eYWRjbb %}
Piano/synthesizer
Tags: codepen
Published: 2021-12-23 14:54:40

<p>Working piano with synthesizer
realized with Audiolet.js by Oampo</p>

<p>Features:
- CSS only piano keyboard
- keyboard functionality (a mouse is not so good for playing)</p>

<p>Todo:
- support touch events </p>

<p>(PS.: 
if you have no idea how to play, you can f.e. try the following keys on your keyboard: QET - WRY - ETU - RYI  (english keyboard layout)) </p>

{% codepen https://codepen.io/harunpehlivan/pen/bGWRjzY %}
Node and server side
Published: 2021-12-23 14:50:25

1. CRUD Operations
Ans: In computer programming, create, read, update, and delete (CRUD) are the four basic operations of persistent storage.CRUD operations help us to manage data in server. We can add data to database, delete it update with crud operations.Crud operations are managed by server site languages. It connect user site with database to manipulate data.
2. JWT
Ans: JWT stand for json web token.Jwt gives us a token id which help us to verify a user. In authorization, we use jwt token . With the token we allow user to access different routes , resources and services.SON Web Tokens consist of three parts separated by dots (.), which are: Header,Payload, Signature.As JSON is less verbose than XML, when it is encoded its size is also smaller, making JWT more compact than SAML. This makes JWT a good choice to be passed in HTML and HTTP environments.

3. Mongoose
Ans: Mongoose is a cross-platform embedded web server and networking library.The small footprint of the software enables any internet-connected device to function as a web server.Mongoose is a Node. js-based Object Data Modeling (ODM) library for MongoDB. It is akin to an Object Relational Mapper (ORM) such as SQLAlchemy for traditional SQL databases.
4. Relational database (MySql)
Ans: RDBMS stands for Relational Database Management System.It is systeM used to maintain a relational database.RDBMS is the basis for all modern database systems such as MySQL, Microsoft SQL Server, Oracle, and Microsoft Access. It uses sql queries.We use query language to manage a relational database. We can make relation between two tables in relational database.
5. Express js!
Ans: Express js is node js framework.Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.Express provides a thin layer of fundamental web application features.Express is easiest framework and it is easy to use. We can easily build our server site with express js. It make easier to use node js functionalities.


6. More node
Ans:Node js is javascript runtime environment it’s not a programming language. Node js help us to run javascript code outside the browser.Ryan dhal developed node js with the help of google crome v8 engine. It help us to run javascript application in mobile , windows, ios ,mac os , linux.Node is easy to use . If we know vanilla javascript we can easily work with node js. We just need to install node js to our system then we are ready to work with node js.
Evolving performance management for post pandemic success
Published: 2021-12-23 14:38:13

_As we are heading to a highly unstable, more fragile economy, the organizations need to evolve performance management system to sustain in this VUCA economy. The circumstantial spontaneity, uncertainty, adoption of new virtual/hybrid methods of working, and the blurring of the walls between home and work demands a complete overhaul of existing performance review methods and processes. More than ever now is the time to ring in the changes concerning the performance management system across the levels within the organization. Unsurprisingly, next-generation performance management depends on digital monitoring and tracking platforms to generate real-time analytic insights.__

In this ever-changing world, it has now become imperative for top management of the organization to understand the significance of the [Performance Management System](https://www.namanhr.com/services/performance-management-system/). It comprises various vital HR functions like continuous progress review, real-time feedback, frequent communication, training employees for improving performance, recognizing good work, rewarding improved performance, goal-setting, etc. This is now not the sole responsibility of the HR Dept. anymore but should be considered as a key component in building a strong workforce essential for achieving business outcomes.

Performance Management facilitates the effective delivery of strategic and operational goals. Some of the tangible benefits that may accrue to any organization having the PMS are:

[Read More](https://www.namanhr.com/services/performance-management-system/)
Generative Music with Prime Numbers (CPC Cicada Principle)
Tags: codepen
Published: 2021-12-23 14:34:43

<p>Generative music based on prime numbers/the cicada principle! 15 tones are assigned prime numbers; the tone then repeats every nth 8th note where n = the prime number it was assigned. Unique patterns for days! Inspired by <a href="https://www.sitepoint.com/the-cicada-principle-and-why-it-matters-to-web-designers/">Alex Walker's article</a>. Created with tone.js  for music and gsap for animations.</p>

{% codepen https://codepen.io/harunpehlivan/pen/abWyEPN %}
Musical Bubble Sort (CPC Bubble Sort)
Tags: codepen
Published: 2021-12-23 14:34:14

<p>Bubble sort - made musical! Each pitch is assigned a number which corresponds to its scale degree (ex in C Major a C would get 0 from numbers 0-7). Then, every time a swap occurs in the algorithm, the pitch on the right side plays! The animation is synced to the set tempo. Key, mode, tempo and bass pattern are all customizable thanks to the magic of Vue. You can even save/copy a particular pattern you like via seeds and come back later to listen again!</p>

{% codepen https://codepen.io/harunpehlivan/pen/bGWraxx %}
Piano Phase Planets (CPC Planets)
Tags: codepen
Published: 2021-12-23 14:33:49

<p>The Piano Phase Planet for this week's CodePen Challenge! Each orbit corresponds to one of the two lines in Steve Reich's Piano Phase. The planet is beating out the quarter note. Move the slider or click the button to phase!</p>

{% codepen https://codepen.io/harunpehlivan/pen/NWjvXBO %}
Tetris w/ high score tracking
Tags: codepen
Published: 2021-12-23 14:24:44

<p>Hope you have fun playing! Feature suggestions and improvements are very welcome! </p>

<p>Browser version available here: <a href="https://forem.dev/harunpehlivan" target="_blank">HARUN PEHLİVAN </a></p>

{% codepen https://codepen.io/harunpehlivan/pen/qBmwjzm %}
All About JSX
Tags: javascript, react, jsx, html
Published: 2021-12-23 14:24:08

## _JSX:_

JSX stands for JavaScript XML. JSX allows to write HTML in react and makes it easier to write and add it. It lets to write any JavaScript or react expression inside { }. After the compilation, it becomes a normal JavaScript function calls. JSX properties make use of camelcase notation while naming HTML attributes. That’s why tabindex in HTML is called tabIndex in JSX. Even in event listeners, lowercase is used in HTML but camelcase is used in JSX. 


In HTML, there are self-closing tags but in JSX, a forward slash before the closing bracket must be included. It is a must in JSX, or else it will throw an error for elements of self-closing tags like HTML. It allows to write multiple tags inside one parent element like in HTML, but it is needed to put the parent element inside ‘( )’ in JSX. 


_With JSX: _

```
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
```


Without JSX:

```
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));
```

## Advantages and disadvantages:

JSX makes it easier to write and add HTML elements in react, can easily convert HTML elements into react elements, and is faster than normal JavaScript. It places them into the DOM and converts them into react elements. It makes it easier to write react applications. Most of the errors are identified while compiling them.

There are disadvantages of it as well along with advantages. It gives an error if anything in HTML is not correct and if HTML elements are not properly closed JSX. In JSX, HTML codes must have one parent element of all the child elements.
Hashing, Explain it to me like I'm 5.
Tags: hashing, encryption, cryptography, developer
Published: 2021-12-23 14:19:14


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39qy8bwk4cdcq1zqxfbv.jpg)

As each person has its own signature, so do files.

For files, it’s called hash and it’s calculated based on the numbers of 0’s and 1’s that actually compose that file.

At the low level, each file is a bunch of zeros and ones, or bits.
Now, as a person can’t replicate exactly another person’s signature, so no two files have the same hash.

What’s more, when you change a file, its hash changes, too, because the bits contained in it change.

This is easier to understand if I show you this example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gtd3oxd3crf0uwtascs.png)

You see that I have two strings (text) almost identical above.
I calculated the hash for the string “Hello”.

Now look what happens if I only change the first letter to lowercase (“hello”).

You see that I get two completely different values and I only changed a byte of the string (=8 bits. Each character in the string is 8 bits, aka 1 byte).

These features of a hash value allow you to make sure no changes were made to a file and it’s therefore safe.

Hope a 5-year old gets that :)
Can we make Pong in less than a 100 lines of Javascript?
Published: 2021-12-23 14:15:21

The original Pong took Atari over 3 months to complete back in 1972. The classic arcade game was one of the first commercially successful games that paved the way for the game development industry.

Additionally, it’s simplicity makes it one of the first projects that any programmer takes on.

As a showcase of how much easier programming has become in the past 50 years, we’re going to be attempting to make Pong in less than 100 lines of Javascript!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dledj85t23ung5sjrb2z.gif)

You can play the finished project deployed on Codesphere [here](https://25773-3000.codesphere.com/).

Let’s get started!

---

###Our Different Components

There’s going to be four parts that we need to build for our pong game:

1. Graphics
2. Paddle Movement
3. Bouncing Ball
4. Score Keeping

---

###Graphics

I’m going to cheat a little bit and use a [graphics library](https://p5js.org/) to save us some menial work so we can strictly focus on the game logic.

{% gist https://gist.github.com/LiorB-D/d1177dad439784b9932173178497961f %}

---

###Paddle Movement

Next up, let’s create two paddles and draw them onto the screen. Additionally, let’s allow the player to move them(I’ll use the built in keyDown function from P5.JS)

{% gist https://gist.github.com/LiorB-D/138af62ba9781eaa66f0df07fb4f10e0 %}

---

###Bouncing Ball

Now let’s add in a ball. When the ball hits the top or bottom border, we want it’s y velocity to switch directions.

When the ball hits one of the paddles, we want it’s x velocity to switch direction and increase slightly(To hit harder). Additionally, to make the game more fun we’ll randomize the y velocity so it is harder to anticipate the ball.

{% gist https://gist.github.com/LiorB-D/d0dc6f8028b761390f3ec5451dd4493e %}

---

###Score Keeping

Finally, let’s start tracking the score. When the ball hits the left or right border we’ll change the score and reset the position of the ball. We’ll then display the score at the top of the screen!

{% gist https://gist.github.com/LiorB-D/8024426d0dd576acc2f2dc2c71a12eb2 %}

And there you have it! We’ve created Pong in less than 100 lines of code!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv1mqqruoa9q983u9dwq.gif)

---

If you’re looking to show off a game you make, the easiest place to deploy it is [Codesphere](https://link.codesphere.com/HE). Codesphere is the only cloud provider that makes cloud deployment as easy as local deployment!

Happy Coding and Merry Christmas!
air message
Tags: codepen
Published: 2021-12-23 14:14:39

<p>I originally made this to send birthday message to my sister (original version works a little differently, but this one is adapted for CodePen). Text gets displayed on airplane banners, and flies across the screen. It can be customised by typing into the text box.</p>

{% codepen https://codepen.io/harunpehlivan/pen/vYZrBZg %}
Express.js
Published: 2021-12-23 14:10:10

## What is Express.js?

 Express is a fast, aggressive, required, and minimal Node.js web framework. You can think about express as a layer that sits on top of Node.js and helps with server and route management. It includes a full set of tools for developing web and mobile applications.

Let's have a look at some of the most important aspects of the Express framework:


 1. Single-page, multi-page, and hybrid web apps may all be 
    created using it.
2. It enables middlewares to reply to HTTP requests to be 
   configured.
3. It creates a routing table that is used to do various tasks 4. 
   based on the HTTP method and URL.
4. It allows you to dynamically render HTML pages by providing 
   variables to templates.
NPM packages to make your React Native project aesthetic and your life easier!!
Tags: npm, reactnative, beginners, javascript
Published: 2021-12-23 14:08:56

###react-native-vector-icons

The most popular *icons* in the NPM GitHub package are **React Native vector icons**. 

It offers over 3,000 vector icon sets, all of which are *free* to use. 

These vector icons are simple to design and include in one's project.

[react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ehnx22qs59o2bccw8jw.png)
 

---

###react-native-responsive-screen

This library helps you create a **responsive UI** for your application.

You must import and utilise the `widthPercentageToDP` and `heightPercentageToDP` methods. The names are a little long, but they attempt to be *descriptive*. 

[react-native-responsive-screen](https://www.npmjs.com/package/react-native-responsive-screen)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyaav9zwlfi34vp3x926.png) 

---

###react-native-modal

Modals are an **excellent** way to improve user interfaces. 

A modal is a screen that shows *atop* another screen to draw the user's **attention to important information** or to move them to the next stage in a process. 

[react-native-modal](https://www.npmjs.com/package/react-native-modal)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c6sns5tyd06knw87xd3.png)
 

---

###react-native-elements

The concept behind React Native Elements is that it's more about *component structure* than real design.

This means less **boilerplate** in putting up specific elements but *complete design control*. 

[react-native-elements](https://reactnativeelements.com/docs/next/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmuj1tib1qduokc7yieq.png)
 

---

###lottie-react-native

Lottie is a *free* and *open-source* animation library.

Lottie-based files are less in size, yet they are still high-quality.

Lottie is used by the most popular mobile applications to give their users a better visual experience.

[lottie-react-native](https://www.npmjs.com/package/lottie-react-native)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgat5z1v5o2rmb45xu4y.png)
 

---

###react-native-svg

Now, the simplest method is to simply extract the.png or.jpeg file. This will work for you, but you won't get crisp quality and your app will get bloated.

Instead of using those, you should use the SVG format.

[react-native-svg](https://www.npmjs.com/package/react-native-svg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7fonu3ty1dgd9w25rg9.png)
Waving 3D + Pixel Art Siamese Cat
Tags: codepen, javascript, webdev, showdev
Published: 2021-12-23 14:06:46

<h1>Waving Pixel Art Siamese Cat</h1>

<h2>Description</h2>

<p>I tried to put a pixel-art texture on a 3D model.</p>

<p>The image of the cat is based on our cat at home.</p>

<p>GSAP is really easy to use to animate almost anything on the web.</p>

<p>I used GSAP timeline to animate the cat, looks like it is waving. Though, I still need to practice my animation skills, and I want it to be better.</p>

<p>I also animated the cat to rotate 360 degrees so we could also see the rear-side of the cat. Although, there is nothing to see there.</p>

<p>I used primitive geometries provided by ThreeJS to create the model of this cat. Creating the head and the body was not a problem, but the shoe. I used combination of box, sphere, plane, and circle to create this shoe.</p>

<p>The only things that has a texture on the model is the head, and the body. Others are just a simple colored mesh.</p>

<p>The color palette I used in this model is Arne32.</p>

<p>How the model looks is inspired by the popular Nintendo Switch game: Animal Crossing.</p>

<h2>Other description</h2>

<h3>ThreeJS: Next thing to study</h3>

<p>Next to study: SkinnedMesh</p>

<p>Based on the documentation, SkinnedMesh can be used to twist and bend a mesh to simulate the skeleton, and can be used to animate an object.</p>

<h2>Resources</h2>

<p><a href="https://greensock.com">GSAP</a> For animation</p>

<p><a href="https://threejs.org">ThreeJS</a> For 3D rendering and modelling</p>

<p><a href="https://www.aseprite.org">Aseprite</a> For pixel art texture</p>

<p><a href="https://lospec.com/palette-list/arne-32">Arne32</a> Color palette</p>

{% codepen https://codepen.io/takaneichinose/pen/MWEvEBo %}
Reverse countdown javascript | countdown on card using html css javascript
Tags: javascript, css, html, webdev
Published: 2021-12-23 14:05:23

 In this blog, we learn that how we create a Reverse countdown. We use HTML, Css, and javascript for this Reverse countdown. Hope you enjoy our blog so let's start with a basic HTML structure for a Reverse countdown.

HTML code

 ``<div class="card">  
  <div class="number"></div>  
 </div> `` 

There is all HTML code for the Reverse countdown. Now, you can see output without CSS, then we write css & javascript for Reverse countdow [read more](https://www.codewithrandom.com/2021/12/reverse-countdown-javascript-countdown.html)
Backened Concepts
Published: 2021-12-23 13:49:44

❖	What is Mongoose?

Mongoose is a Node.js-based Object Data Modeling (ODM) library for MongoDB. Mongoose is similar to an Object Relational Mapper. The problem that Mongoose aims to solve is allowing developers to enforce a specific schema at the application layer. In addition to enforcing a schema, Mongoose also offers a variety of hooks, model validation, and other features aimed at making it easier to work with MongoDB. Mongoose is a useful library for mongodb. It gives us many advantages.
Mongoose works based on the node.js. 

❖	What is Express?

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. 
Express is also a fast, assertive and moderate framework of node.js. We can assume express as a layer built on the top of node.js that helps to manage a server and routes. Express provides a robust set of features to develop web and mobile applications. 

❖	Advantages of Express: 

There are many advantages of express-
●	It gives ultra fast I/O.
●	Robust API makes routing easy.
●	It is asynchronous and single threaded.
●	It has an MVC-like structure.

❖	How does express look like:

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.get('/', (req, res) => {
  res.send(“Hello Developer”')
})

app.listen(port, () => {
  console.log(`server running at port, ${port}`)
})
❖	Difference between SQL and noSQL databases:
1.	SQL databases are relational, whereas noSQL databases are non-relational.
2.	SQL databases are vertically scalable, whereas noSQL databases are horizontally scalable.
3.	SQL databases are table based, while noSQL databases store the database.
❖	Relational Database: 
A relational database is a collection of information that organizes data points with defined relationships for easy access. Relational databases are based on the relational model, an intuitive, straightforward way of representing data in tables. In a relational database, each row in the table is a record with a unique ID called the key. The columns of the table hold attributes of the data, and each record usually has a value for each attribute, making it easy to establish the relationships among data points.
❖	Aggregation:
Aggregation is the relation between two entities. Aggregation combines entities and makes them form a single meaningful entity.  In aggregation, relationships with its corresponding entities is aggregated into a higher level entity.
About Node  js
Published: 2021-12-23 12:21:24

					CRUD Operations
Crud operation used in backend server for delete and update.post or get api form the backend server. Crud is  an  acronym that comes from the world of computer programming  ,and refers to the four functions that are considered necessary to implement a persistent application: create, read, update and delete.
		
					JWT
Mainly jwt  is a one type of token format. It  is a standardized  authorization protocol which can use JWT as a token; it uses server-side and client-side storage. If we want to do real logout you must go with  jwt.we  use jwt for authentication to prevent our web site from hacker by using firebase
				Mongoose
Mongoose is a one type of node based system . It is  js-based object data modeling) library for a  MongoDB. It is akin to an Object Relational Mapper (ORM)  linke SQLAlchemy for traditional SQL databases. The problem is mongoose aims to solve is allowing developers to an  enforce a specific schema of the application layer.
					MySql
For accessing any type of  database there are GUI tools that are more convenient and time-saving than Command Line tools.In  GUI tools are the ready-to-use visual interfaces which can be easily accessed by users though even if they don't have much technical knowledge. There are so many tools available to access the MySQL database.
				Express
Express is node framwork .it is very easy than raw node js system .By using node express js we can build real time web application using express js easily Express is a minimal and flexible Node js.In  web application framework that provides a robust set of features for web mobile applications.
				Node
Node is a device or data point in a big network.In networking a node is either a connection point or  redistribution point nad  a communication endpoint. In computer science, nodes are devices or data points on a  huge network and  devices such a PC, phone, or printer are considered nodes.

		            Why we use Node js
 Node is a javascript Runtime engine which uses google chrome v8 egine.By using node js we can write javascript code outside of the browser .We can also use it if the backend server node is faster than other backed services. Node. js is easily employed as a server-side proxy  and I handle a large amount of simultaneous connections in a non-blocking manner. Noise is especially useful for proxying different services with different response times  and  collecting data from multiple source points.