teleren/devto huggingface dataset:
Javascript: a kids game
Tags: javascript, vite
Published: 2021-01-27 15:08:28

---
title: Javascript: a kids game
published: true
description: I developed a tiny game to put in practice some Javascript basics
tags: javascript, vite
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/oi3w4e70znc0utmxnff2.jpg
---
Hi everybody, thanks for visiting my first post.

Since I've been working with JavaScript using different frameworks such as Angular, Vue and Expressjs for several years, I realized that I had forgotten some elemental concepts of native scripting. 

Frameworks can make you more productive simplifying the common features that every application must have. But also can turn you a bit rusted about the fundamentals of the chosen programming language.

I have a three years old son who likes to play table games. Obviously, these games don't represents a difficulty  for an adult person, but I took the oportunity to practice vanilla JavaScript at the frontend developing a simple memory game.

I share it because I think it could be useful for beginners developers as study case of the JavaScript's basics.

Feel free to make your own changes and PR's here:
[https://github.com/CristalT/tiny-memo-game](https://github.com/CristalT/tiny-memo-game)

I also used Vite as the builder. If you don't know what Vite is about, I highly recommend to checkout its [documentation](https://vitejs.dev/). It makes a bundle of your code using native ES Modules and making faster the hot reloading on dev time. Is very easy to use and has a lot of advantages. It supports Typescript out of the box, is extensible by plugins and highly configurable.
Day 34 Of 100DaysOfCode : Python Code To Find Count Of Mail
Tags: 100daysofcode, codenewbie, beginners, python
Published: 2021-01-27 15:04:28

Today is my 34 day of #100DaysOfCode and Python. Today I tried to write some code on python access to web data and data structure on python. Complete some assignment on coursera.

Below is the python code I tried to write to find the count of mail from the file and from whom maximum times mail come.

# Python Code
At first we open file. Set counts to zero at first. There is empty list for mails. I write simple loop to find the mail. There is empty dictionary to store mail as a key and number of count as a value.

```python
fhand = open('mbox-short.txt')
count = 0
emails = []
for line in fhand:
    words = line.split()
    # print('Debug:', words)
    if len(words) == 0 : continue
    if words[0] != 'From' : continue
    emails.append(words[1])
#print(emails)
d = {}
for email in emails:
    if email not in d:
        d[email] = 1
    else:
        d[email] += 1
#print(d)
max(d)
nd = {k: v for k, v in list(reversed(sorted(d.items(), key=lambda item: item[1])))}
nd
```
The output of this code is given below.
```python
{'cwen@iupui.edu': 5,
 'david.horwitz@uct.ac.za': 4,
 'zqian@umich.edu': 4,
 'gsilver@umich.edu': 3,
 'louis@media.berkeley.edu': 3,
 'rjlowe@iupui.edu': 2,
 'stephen.marquard@uct.ac.za': 2,
 'ray@media.berkeley.edu': 1,
 'gopal.ramasammycook@gmail.com': 1,
 'antranig@caret.cam.ac.uk': 1,
 'wagnermr@iupui.edu': 1}
```
To find by whom we got maximum mail is find by
```python
print(f"This {list(nd.items())[0][0]} send mail most i.e {list(nd.items())[0][1]} times.")
```
Output is,
```python
This cwen@iupui.edu send mail most i.e 5 times.
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 34 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* Web access on python<br>* Data structure on python<br>* Python program to find the maximum count of mail.<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> ,<a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> ,<a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> ,<a href="https://twitter.com/hashtag/beginners?src=hash&amp;ref_src=twsrc%5Etfw">#beginners</a> <a href="https://t.co/pTaNyNoczI">pic.twitter.com/pTaNyNoczI</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1354440046322057220?ref_src=twsrc%5Etfw">January 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Daily Developer Jokes - Wednesday, Jan 27, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-27 15:01:10

---
title: "Daily Developer Jokes - Wednesday, Jan 27, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Jan%2027%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12590d3e5c1.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do computers love to do at the beach?

___A:___ Put on some spam block for protection so they can safely surf the net while catching some .WAVs!
 -->
How To Create a Simple Star Rating – No JavaScript
Tags: html, css, beginners, 100daysofcode
Published: 2021-01-27 14:43:15

**Hello guys in this tutorial we will create a Simple Star Rating system using HTML & CSS**

><a href="https://blog.stackfindover.com/animated-stars-with-realistic-moon-javascript/" rel="dofollow">Animated Stars With Realistic Moon</a>
><a href="https://blog.stackfindover.com/advanced-animated-submenu/" rel="dofollow">Advanced Animated Submenu</a>

First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Star Rating Step:1###
Add below code inside **index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Star Rating</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="row-outer">
      <div class="container">
        <div class="star-rating">   
          <input type="radio" name="rating" id="rating-5">
          <label for="rating-5"></label>
          <input type="radio" name="rating" id="rating-4">
          <label for="rating-4"></label>
          <input type="radio" name="rating" id="rating-3">
          <label for="rating-3"></label>
          <input type="radio" name="rating" id="rating-2">
          <label for="rating-2"></label>
          <input type="radio" name="rating" id="rating-1">
          <label for="rating-1"></label>
        </div>
      </div>
    </div>
  </body>
</html>
```
><a href="https://blogs.stackfindover.com/disable-right-click-on-website-using-javascript/" rel="dofollow">Disable Right Click Using JavaScript</a>

###Star Rating Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f2f3;
    height: 100vh;
}
.container {
    width: 95%;
    max-width: 1160px;
    margin: auto;
}
.star-rating {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    flex-direction: row-reverse;
    position: relative;
}
.star-rating > input {
    display: none;
}
.star-rating > label {
    margin-top: auto;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url(star-disable.png)no-repeat center / 75%;
    transition: 0.5s;
}
.star-rating > input:not(:checked) ~ label:hover,
.star-rating > input:not(:checked) ~ label:hover ~ label {
    background: url(star-active.png)no-repeat center / 75%;
}

.star-rating > input:checked ~ label,
.star-rating > input:checked ~ label ~ label {
    background: url(star-active.png)no-repeat center / 75%;
}
```

###Star Rating Video Output:###
{% youtube Ho7Gmksiiwo %}

###Star Rating CodePen Output:###
{% codepen https://codepen.io/stack-findover/pen/Rwobyyd default-tab=css,result %}
How To install Multiverse in fabric with Docker
Tags: minecraft, docker
Published: 2021-01-27 14:41:09

[Fabric]:https://fabricmc.net
[Bukkit4Fabric]:https://bukkitfabric.javazilla.com
[Multiverse-Core]:https://dev.bukkit.org/projects/multiverse-core


I'd like to add resource server in my Fabric Mod server.
Unfortunately, Fabric is not support Multiverse plugins.

One day, I searched about [Fabric] and [PaperMC](https://papermc.io) and I found [Bukkit4Fabric] Mod.
I try to install but it's very difficult.

### Require

* [Minecraft Java Edition](https://www.minecraft.net/) and Minecraft Account
* [Docker](https://www.docker.com)

### Prepare to install

Make Data Directory(Folder)

```
$ mkdir ~/minecraft
```

# Installation

|name|detail|
|:-----------|:------------|
|Install Director|~/minecraft|
|UserID|Dozo|

### Install [Fabric] Server

##### docker run

```
$ docker run -d -v ~/minecraft:/data -p 25565:25565 -e TYPE=FABRIC -e EULA=TRUE -e OPS=Dohzoh --name fb01 itzg/minecraft-server:adopt11
```

|name|detail|
|:-----------|:------------|
|TYPE|Server type|
|EULA|...|
|OPS|Operator User|
|adopt11|Use Java11|

##### Login Minecraft

Select MultiServer
![Minecraft 1.16.3 2020_10_09 9_04_25_r](https://dev-to-uploads.s3.amazonaws.com/i/gnmw5rlzn3n9sc4d46bq.png)

Connect localhost
![Minecraft 1.16.3 2020_10_09 9_14_31_r](https://dev-to-uploads.s3.amazonaws.com/i/fkj9dptvzsd1zayz1z15.png)

![Minecraft 1.16.3 - Multiplayer (3rd-party Server) 2020_10_10 12_58_03_r](https://dev-to-uploads.s3.amazonaws.com/i/2koe308u9m5ch2a0dmzg.png)

Login Success!
  
![2021-01-27_21.11.15_r (2)](https://dev-to-uploads.s3.amazonaws.com/i/4mzhsigynjub8lxrks23.png)

Fabric server confirmed
  

### Add [Bukkit4Fabric](CardBoard) and [Multiverse-Core] Mod

##### Download Modules

Download [Bukkit4Fabric](CardBoard) in your mods directory.
Use [Bukkit4Fabric] ver#135 because can't boot latest ver.
Complete to boot then stop server.

```
$ docker stop fb01
$ cd ~/minecraft/mods/
$ wget https://ci.codemc.io/job/IsaiahPatton/job/Cardboard/135/artifact/build/libs/Bukkit4Fabric-1.16.4.jar
$ docker start fb01
```

(｡-ω-)zzz

Delete All old world then add [Multiverse-Core] Mod in your directory plugins directory. 

```
$ docker stop fb01
$ rm -Rf ./world*
$ cd ~/minecraft/plugins/
$ wget http://ci.onarandombox.com/view/Multiverse/job/Multiverse-Core/lastSuccessfulBuild/artifact/target/Multiverse-Core-4.2.3-SNAPSHOT.jar
$ docker start fb01
```

(｡-ω-)zzz. . . (｡ﾟωﾟ) HA!

##### Make Another World

Login Minecraft and execute CREATE command.


![2021-01-27_23.16.40 (2)](https://dev-to-uploads.s3.amazonaws.com/i/eda38h3hk58e9pvuf9z5.png)

```
/mv create multiworld normal
Starting creation world 'multiworld'
...
Complete!
```

##### Teleport to Another World

![2021-01-27_23.16.11 (2)](https://dev-to-uploads.s3.amazonaws.com/i/582ehq01bor9wq6kqksq.png)
  
```
/mvtp Dozo multiworld
```

![2021-01-27_23.15.08](https://dev-to-uploads.s3.amazonaws.com/i/j0z8gdrksiezy9nac4n8.png)
html-pdf problem
Tags: javascript, node, htmlpdf, react
Published: 2021-01-27 14:27:24

hi guys , i'm new at field.
i trying to make pdf generator  web application with expressjs using html-pdf package. 
i have condition on "engagement" variable 
module.exports =
({rs,periode,engagement,siren,num,rue,codePostal,ville,contratRef,commentaire,nomPrenom,fonction,phone,mail}) => {
const today = new Date();
return `
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script>



    window.onload = function test() {


      var en = (document.getElementById('choix1'));
      var en1 = (document.getElementById('choix2'));


      if (${ engagement } == "oui") {
        en.checked = true;
      }else if (${ engagement } == "non") {
        en1.checked = true
      }
    }


  </script>
 when client send data to back end the app crashed and error "cannot set headers after they are sent to the client" in my terminal. how can i resolve this problem ?
How to test your Express.js backend with Jest and Supertest
Tags: programming, node, javascript, webdev
Published: 2021-01-27 14:22:22

So, you’ve built your Node.js backend with Express and now you need a clean and reliable approach to test it?

In this article, I’ll show you how you can use the `supertest` module to make testing your Express.js backend feel like a breeze!

<!--more-->

First of all, here’s the sample app that has a single GET endpoint.

```javascript
// server.js
import express from 'express';

const app = express();

app.get('/config', function(req, res) {
  res.json({ version: '0.0.1' });
});

export const server = app;
```

In our test, we want to make sure that `GET /config` returns status code `200`, has a content type `json`, and that this JSON is exactly what it should be.

Before writing a test you can type `npm install --save supertest` to install and save the `supertest` module to `node_modules`. Also, I expect that you already have configured the testing environment with `jest`.

If you like the `--save-dev` option instead of `--save` or `yarn` instead of `npm` you can use it too. It doesn’t particularly matter here.

Once we have that in place, we can proceed to write tests.

So, to be able to test our Node.js backend with `supertest`, we need to import it into our test file and then create a function that we’ll use to do test requests to our server.

```javascript
const requestWithSupertest = supertest(server);
```

Then, we can get a response from our system under test.

```javascript
const res = await requestWithSupertest.get('/config');
```

Make sure to add `await`, as we need the request promise fulfilled before moving forward.

Now, after the request is done and the response is stored in the `res` variable, let's add out assertions.

```javascript
  expect(res.status).toEqual(200);
  expect(res.type).toEqual(expect.stringContaining('json'));
  expect(res.body).toEqual({ version: '0.0.1' });
```

As planned, we test 3 key points. Response status code, response type, and response body.

If you add everything up, you’ll get something like this.

```javascript
// test.js
import '@babel/polyfill';            // support for async/await
import supertest from 'supertest';
import { server } from '../server.js';

const requestWithSupertest = supertest(server);

test('GET /config should be implemented according to the spec', async () => {
  const res = await requestWithSupertest.get('/config');
  expect(res.status).toEqual(200);
  expect(res.type).toEqual(expect.stringContaining('json'));
  expect(res.body).toEqual({ version: '0.0.1' });
})
```

A good idea might be to split these test cases into separate tests and maybe combine them under a single `describe` block. For demonstration purposes, there's no need for that, though.

---

Testing your Node.js/Express.js backend with `supertest` is very convenient. You don’t have to reinvent the wheel. Just create a wrapper around an instance of your `express.js` server and send requests to it.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Grab a ready-made free product management dashboard template
Tags: webdev, showdev, ui, technology
Published: 2021-01-27 13:51:04

Boost your product management process with a ready-for-use product management dashboard.

Track all your product development tasks, check their implementation status, and more.

- Downloadable code
- Responsive design
- Customization opportunities
- Free to use

[Get the template](https://uibakery.io/templates/product-management-dashboard?utm_campaign=ui_bakery%20-%20template%20-%20product_management%20-%20cacq%20-%20xx%20-%20views&utm_source=DevTo&utm_medium=webdev&utm_content=dashboard_announce)
﻿
﻿
CPTIME-One Stop for coding enthusiasts
Published: 2021-01-27 13:48:27

Hey coding enthusiasts,
Have you ever felt like keeping track of all the the contests that are going on around you or can't find resources to learn from then don't worry here's a solution for that.

 Life becomes easier if you let code do the work

Check this out...

Link: https://cptime.herokuapp.com/

GitHub: https://github.com/eswar2001/cptime

Use it to the fullest... 
Happy to hear your feedback
Make a progress bar in terminal using python
Tags: python, opensource
Published: 2021-01-27 13:46:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/plhsswg1lhglh2onkfzz.JPG)
## Requirements
1. Latest version of python
2. tqdm module in python 
<pre>pip install tqdm</pre>
3. Ide/Code Editor (vscode)
## Code
1. make a python file and open it
2.import tqdm and time
<pre>import time
from tqdm import tqdm</pre>
3. make a loop 
<pre>for i in tqdm([0, 25, 50, 75, 100]):</pre>
4. put sleep in the loop 
<pre>time.sleep(0.5)</pre>

#### Done

Take care bye
Share intention on Twitter, Facebook websites & WhatsApp app
Published: 2021-01-27 13:21:10

If You want to click on a link and share some custom text, url or hashtags on social networks websites then use the following examples on any `href` property of `<a>`

Share intention Twitter
```js
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(TEXT)}&url=${encodeURIComponent(URL)}&hashtags=tag1,tag2}`}>Share on Twitter</a>
```

Share intention Facebook
```js
<a href={`https://www.facebook.com/sharer.php?u=${encodeURIComponent(URL)}&quote=${encodeURIComponent(TEXT)}`}>Share on Facebook</a>
```

Share intention WhatsApp (mobile only)
```js
<a href={`https://wa.me/?text=${encodeURIComponent(TEXT)}%20${encodeURIComponent(URL)}`}>Share on WhatsApp</a>
```
CodeSandbox available 🙂

{% codesandbox share-intention-2p7g7 view=split %}
---

### 📚 Read my other articles

##### English
- [You need to write CSS like that to improve your code quality](https://dev.to/lucasromerodb/write-better-css-properties-2-min-read-1ohg)

##### Spanish
- [Te voy a recomendar una forma práctica de documentar tu proyecto de software 😎](https://dev.to/lucasromerodb/te-voy-a-recomendar-una-forma-practica-de-documentar-tu-proyecto-de-software-37f3)
- [¿Estás OK para tu primer trabajo como dev? 🧐](https://dev.to/lucasromerodb/estas-ok-para-tu-primer-trabajo-como-dev-2gi)
Minimal Notes - web app build with Vue.js
Tags: javascript, vue, github
Published: 2021-01-27 13:18:46

There are many notes apps, but I needed something simple that works for me on my laptop. 

That is why I made minimal notes that will work in my browser locally. 

Everything is stored in your web browser localStorage. All the coding is done with Vue.js and the best part is everything is in the **index.html** file that is **only 4Kb**.

I also made Minimal Notes.app for Mac OS users. First I used Electron to package the app. But the file from 4Kb became 400 Mb, with some optimization I achieved around 140 Mb but I was not happy. Then I tried Cordova for Mac and worked perfectly. Now the file is 0.45 Mb that is much better then 140 Mb.

Demo:
https://vladocar.github.io/Minimal-Notes/

The project on github:
https://github.com/vladocar/Minimal-Notes

![Minimal Notes App](https://dev-to-uploads.s3.amazonaws.com/i/qt9l7adcx9jb6s0n8gmu.png)
Crio Winter of Doing (CWoD)
Published: 2021-01-27 13:16:22

Hi! My name is Prakhar Shreyash, a Computer Science and Engineering Sophomore at Kalinga Institute of Industrial Technology, Bhubaneswar. I am an open-source enthusiast and interested in seeking new opportunities. In this blog, I'm going to describe my Stage-1 journey of Crio-Winter of Doing.

What is Crio-Winter of Doing?
Crio-Winter of Doing is a one of a kind program focused on bringing together budding engineering talent to work on challenging projects for the most exciting startups in the country. It is India’s largest tech externship program for developers.

What is an externship?
An externship is a short, unpaid, and informal internship where students spend anywhere from a single day to a few weeks getting
exposure to what it is like to work at a company. The word externship is a hybrid of “experience” and “internship”.

What did I learn in stage-1?
Following are the topic which I learned practically in stage-1 of Crio-Winter of Doing.

HTTP :
HTTP stands for HyperText Transfer Protocol.
Communication between client computers and web servers is done by
sending HTTP Requests and receiving HTTP Responses.

Rest:
REST stands for REpresentational State Transfer.
An API is an application programming interface. It is a set of rules that allow programs to talk to each other. The developer creates the API on the server and allows the client to talk to it.

REST determines how the API looks like. It stands for “Representational State Transfer”. It is a set of rules that developers follow when they create their API.

Linux :
Linux is an operating system. An operating system is a software that manages all of the hardware resources associated with your desktop or laptop. To put it simply, the operating system manages the communication between your software and your hardware.

Amazon Web Services :
Amazon Web Services or AWS is a secured cloud services platform that offers compute power, database storage, content delivery, and various other functionalities. To be more specific, it is a large bundle of cloud-based services.

Git :
Git is a distributed version control system for tracking changes in any set of files, originally designed for coordinating work among programmers cooperating on source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

Also, the best thing that I found interesting about Crio-Winter of Doing is that it supports a community on slack where all the members are very much active and they are always ready to help.
NEWBIE on REACT.JS needed a simple contact form… Happy ending!
Published: 2021-01-27 13:04:08

I started to learn working on React.JS about a month ago. It seemed to look quite easy and convenient framework: first project was to create a personal interactive CV and it was quite fun! Now I have interesting looking (not boring like other CVs in Word, PDF or else) life description.



Then I got a job — I became a WEB developer quite quickly. First work was to create a cargo transportation ONE-PAGE which needed a contact form. So, a long search began…

I had a perfectly working contact form made in JS, but when I added it to React.JS, it didn’t work. I tried to GOOGLE “simple contact form in React.JS”, but so many complex content had appeared… Okay, it was quite informative, but what to do when you are trying to do everything like 10 times and it shows me more and more mistakes? I tried to GOOGLE those errors and then I felt deeply bogged down.

How did I solve my problem? After a long search I found [FORMSPREE](https://formspree.io/) page.

Why I didn’t find it sooner??

![FORMSPREE](https://formspree.io/blog/html-contact-form/HTML%20form%20library.png)
**Just few steps made and I have my contact form:**

* Image for post
* Creating a form
* Register;
* Add an email to send my messages to;
* Copy a code snippet and add it to my project;
* Validate link in my email.

..And it is done!

I didn’t have much time to learn everything in React.JS (including a contact form coding). Also, here you can find not only React code, but HTML, AJAX and other codes. I think it should be useful for beginners like me who sometimes need a quick solution.

Visit FORMSPREE page [here](https://formspree.io/).