teleren/devto huggingface dataset:
Flappy Bird Game
Tags: html, javascript, css
Published: 2020-07-17 17:48:27

Play the awesome flappy bird game.

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


<Br><br>

Official Site


https://rudraworks.github.io/Flappy-Bird-Game/index.html
A Tale of Two Classes
Tags: javascript, react, oop, beginners
Published: 2020-07-17 17:31:12

---
title: A Tale of Two Classes
published: true
date: 2020-07-17 17:06:31 UTC
tags: #javascript #react #oop #beginners
canonical_url: https://www.codewitch.dev/2020/07/17/a-tale-of-two-classes/
---

Yesterday, I was challenged by a potential employer (fingers crossed) to share a few JS classes I’m proud of. I had a lot of fun writing this up, and I figured I would share it with y’all, as well.

Below, you will find code samples from my React app, [OurCal](https://github.com/AudTheCodeWitch/OurCAL), which is deployed on Heroku, [here](https://our-cal.herokuapp.com/). I chose this project because it was originally written in vanilla JS before I refactored it, and I thought it would be interesting to show how the classes evolved.

The [vanilla JS `Block` class](https://github.com/AudTheCodeWitch/OurCAL/blob/v0.1.0/frontend/javascripts/block.js) creates the 25x25 pixel grid, or block. The constructor accepts the block’s `name` and an array of `pixels`. To create the individual `Pixel` objects, the constructor calls the `createPixels` method, which loops through the `pixels` array and calls on the `Pixel` class for each element. This method returns the newly-created `Pixel` objects as an array to be sent to the back end.

The [vanilla JS `Pixel` class](http://github.com/AudTheCodeWitch/OurCAL/blob/v0.1.0/frontend/javascripts/pixel.js) is a simple constructor. It accepts four arguments, the `x` and `y` coordinates, the background `color`, and the `color_variable` representing the pen used to select the pixel.

After converting OurCal to a React app, the classes get a bit more complex (and fun).

<center>
<img src="https://media.giphy.com/media/42wakmA8VzrB7eP0VT/source.gif" alt='Moira Rose saying, "No one will ever accuse you of being vanilla again."'>
</center>

The [React `CompleteBlock` class](https://github.com/AudTheCodeWitch/OurCAL/blob/main/client/src/components/CompleteBlock.js) displays a fully-colored block. It takes the block’s `name` and `block` data as props. The `createBlock` and `createColumns` methods work in tandem to populate a grid with individual `Pixel` objects. On `componentDidMount()`, the pixels are then filled with the appropriate background colors, using the `colorPixels` method.

The [React `Pixel` class](https://github.com/AudTheCodeWitch/OurCAL/blob/main/client/src/components/Pixel.js) creates the individual pixels, based on the block’s location, which is passed in through props. If the location is `Template` (the editable block), a click handler is attached to the pixel. The `handleClick` method toggles the pixel’s `className` (and corresponding background color). Pixels in the `Template` location are also added to the Redux store through `componentDidMount.`

## Bug Alert!

The current Heroku deployment contains a bug dealing with the toggled background colors.

<center>
<img src="https://media.giphy.com/media/1xOQlQxrIX4Jw6lBZI/giphy.gif" alt="Night Flight bug and screaming woman">
</center>

I am aware of it and have addressed the problem in the code. I’m working on deploying the fix, hopefully, later today.
Scala Cheat Sheet
Tags: scala, javascript
Published: 2020-07-17 16:51:57

__Function Declarations__
```
def functionName ([list of parameters]) : [return type]
```

__Function Definitions__
```
def functionName ([list of parameters]) : [return type] = {
   function body
   return [expr]
}
```

__Calling Functions__
```
functionName( list of parameters )
```
In a second way, a user can also call the function with the help of the instance and dot notation as follows:
```
[instance].function_name(paramter_list)
```

__Functions Call-by-Name__
```
def callByValue(x: Int)
```

__Nested Functions__
```
def FunctionName1( perameter1, peramete2, ..) = 
{
   def FunctionName2() = 
   {
      // code
   }
}
```

__Partially Applied Functions__
```
val multiply = (a: Int, b: Int, c: Int) => a * b * c

// less arguments passed
val f = multiply(1, 2, _: Int)
```

__Named Arguments__
```
Function Definition : def createArray(length:int, capacity:int);
Function calling : createArray(capacity=20, length:10);
```

__Recursion Functions__
Example:
```
// Scala program of factorial using recursion
 
// Creating object
object sample
{
   // Function define
   def fact(n:Int): Int=
   {
      if(n == 1) 1
      else n * fact(n - 1)
   }
 
   // Main method
   def main(args:Array[String])
   {
      println(fact(3))
   }
}
```
=> Output
```
6
```

__Higher-Order Functions__
Example:
```
object Demo {
   def main(args: Array[String]) {
      println( apply( layout, 10) )
   }

   def apply(f: Int => String, v: Int) = f(v)

   def layout[A](x: A) = x.toString()
}
```
=> Output
```
10
```

__Anonymous Functions__
```
(z:Int, y:Int)=> z*y
```
Or
```
(_:Int)*(_Int)
```

__Currying Functions__
```
def function name(argument1, argument2) = operation
```

_Read the full cheat sheet at_: [Scala Cheat Sheet](https://simplecheatsheet.com/tag/scala-cheat-sheet/)
ScaleChamp Changelog
Tags: redis, dbaas, changelog, postgres
Published: 2020-07-17 16:48:16

We happy to announce that we published our first changelog announcements at [Changelog Page](https://www.scalechamp.com/changelog/)

[ScaleChamp](https://www.digitalocean.com/community/tools/scalechamp) now available under DigitalOcean tools.
Installing NodeJS in a development environment: The right way
Tags: node, javascript, nvm, avn
Published: 2020-07-17 16:36:07

Working on different projects, that use multiple versions of NodeJS? and having trouble setting up the project? then you need to use NVM — Node Version Manager.

Start by running following command.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

Need a different method to install NVM? check out github [readme](https://github.com/nvm-sh/nvm#install--update-script).

This command installs `nvm` on your computer and attempts to add the source lines from the snippet below to the correct profile file (*\~/.bash_profile, \~/.zshrc, \~/.profile, or \~/.bashrc*).

```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

Once the snippet is added to you profile file, close the terminal and open again. I personally like to do `source ˜/.[profile]` in the same terminal.

> replace `[profile]` with your profile name

Let's run `nvm` this output a huge log of all the options that come with NVM. Let install NodeJS

```bash
nvm install 12
```

the number is the NodeJS Version you would like to install. In the same way, you can install as many versions you like to have.

By installing NodeJS this way you can keep your NPM and Global installs unique to that version. When you switch to a different version, it will have its own configuration without juggling things to get the project up and running for the development.

## Switch between multiple versions of NodeJS

At any point, you want to switch between different installed NodeJS versions. Simply Run

```bash
nvm use [version]
```

## Automatic Version Switching for Node.js

Let's make it even better by adding AVN - Automatic Version Switching for Node.js, when working with multiple projects it's very easily forgotten what version of NodeJS to use and we could try to run the project in a different NodeJS. To prevent this we can use AVN.

To install `avn` run following commands

```bash
npm install -g avn avn-nvm avn-n
avn setup
```

Now, you `avn` is ready. All you need to do go into your project directory and create a `.node-version` file with the NodeJS version. you can get your NodeJS version by doing `node -v`

```bash
echo "12" > .node-version
```

Now whenever you switch to your project directory containing `.node-version` , your avn will switch to the NodeJS version specified in the file automatically.

### Here a list of commands I found myself using

* List all installed NodeJS versions `nvm list`
* Setting a default NodeJS version `nvm alias default [version]`

I hope this article has helped you improve your NodeJS development environment. For more amazing articles and Jamstack updates, follow us on twitter [@stackrole](https://twitter.com/stackrole)
Got my first GitHub Badge
Published: 2020-07-17 16:33:23

👨‍💻 GitHub has been an amazing resource 🧰 and platform to me and it gives me immense pleasure😇 in Sharing that I've received my first GitHub Badge 🎖️ of 
"Arctic Code Vault Contributor"
Thank you GitHub

 #github #coding #programming #learning #badges #achievement #thankyou
Monitoring Sign-in for AWS Accounts
Published: 2020-07-17 16:28:36

CloudWatch can capture any AWS sign-in events, and you can configure response using either Alarms or Rules.

Alarms can keep track of the number of failed logins, but Rules are useful when you need an immediate response or if you have an external SIEM system.

There is a great [article](https://www.cloudconformity.com/knowledge-base/aws/CloudWatchLogs/console-sign-in-failures-alarm.html) from TrendMicro on how to configure CloudWatch Alarms. In  this post I will explain how to configure CloudWatch Rules.

Note:

1. A Rule needs to be configured only in us-east-1 region to capture Sign-in events.
2. A Rule needs to be configured for every account in AWS Organizations (even with CloudTrail logging to central location - CloudWatch cannot catch them from another account). You can create a target per rule per account, or push events to Master or Shared account Event Bus, and configure target there.

Steps:

1. Create a Rule as per instructions [here](https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/Create-CloudWatch-Events-Rule.html).

2. Specify the pattern as
`{
  "source": [
    "aws.signin"
  ]
}`

![Step1](https://blog.virtiogroove.com/media/posts/3/responsive/CloudWatchRulePattern-md.png)

3. Specify Target (SNS topic "Email" is selected as example). Note that many AWS services can be configured as targets, for details see this [article](https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/WhatIsCloudWatchEvents.html).

![Step2](https://blog.virtiogroove.com/media/posts/3/responsive/CloudWatchRuleTarget-md.png)

4. Click "Configure Details", add Rule name and description, and set Rule state to Enabled

![Step3](https://blog.virtiogroove.com/media/posts/3/responsive/CloudWatchConfigureDetails-md.png)

5. Click "Create Rule".

6. Configure the same rule in other accounts, creating either SNS topic, or pushing event to Event Bus in Master or Shared Account

![Step4](https://blog.virtiogroove.com/media/posts/3/responsive/CloudWatchConfigureDetailsEventBus-2-md.png)

In summary, a Sign-in event Rule provides you with options to perform operations based on event details and helps you build your desired workflow.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-07-17 16:27:52

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count — big or small 🎉

Examples of 'wins' include:

- Learning something new 
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy Friday!
Beautify README files with badges
Tags: github, git, webdev
Published: 2020-07-17 16:26:28

Following the README hype!!!

Not to long ago I discovered an awesome tool for adding badges to your various markdown files.

https://shields.io

---

# API based badges

Looking at the landing page we can already see a various set of categories:

![shield-landing-page](https://dev-to-uploads.s3.amazonaws.com/i/ebbs991zmcznkpw0t6nm.png)

From their you can navigate and choose a service that interests you for instance: 

```
social --> twitter follow
```

You can then fully customize basic settings:

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

Result:

![Twitter Follow](https://img.shields.io/twitter/follow/crimson_med?style=social)

Here are a few possibilities:

![GitHub commit activity](https://img.shields.io/github/commit-activity/m/argus-inc/fluct)

![Website](https://img.shields.io/website?down_color=red&down_message=offline&up_color=green&up_message=online&url=https%3A%2F%2Fmederic.me)

---

# Custom badges

If you scroll to the bottom of the page, **shields.io** let's you create custom badges

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

This lets you create everything and anything and even use data urls.

Here are a few possibilities:

![Website](https://img.shields.io/badge/website-https%3A%2F%2Fmederic.me-brightgreen)

![Email](https://img.shields.io/badge/contact-contact@mederic.me-blue)

For more badges and cool stuff check out https://shields.io

---

Burlet Mederic
https://mederic.me
https://twitter.com/crimson_med
Now both Express and React servers are running by single `npm run dev` command
Tags: npm, node, react
Published: 2020-07-17 16:20:26

I was facing a problem. I wanted to run both frontend and backend servers using single command `npm run dev`, but it was not working.

Issue Resolved by installing concurrently using 
`npm i concurrently --save`

and changing dev script by
`"dev": "concurrently \"npm run dev-client\" \"nodemon index.js\""`

now I am getting Fine result as below...
```
$ npm run dev

> crypto@1.0.0 dev C:\Users\Education Use\crypto
> concurrently "npm run dev-client" "nodemon index.js"

[1] [nodemon] 2.0.4
[1] [nodemon] to restart at any time, enter `rs`
[1] [nodemon] watching path(s): *.*
[1] [nodemon] watching extensions: js,mjs,json
[1] [nodemon] starting `node index.js`
[0] 
[0] > crypto@1.0.0 dev-client C:\Users\Education Use\crypto
[0] > npm run clean && parcel client/src/index.html --out-dir client/dist
[0] 
[1] listening at localhost: 3000
[0] 
[0] > crypto@1.0.0 clean C:\Users\Education Use\crypto
[0] > rm -rf .cache client/dist
[0] 
[0] Server running at http://localhost:1234 
Error: ENOENT: no such file or directory, stat 'C:\Users\Education Use\crypto\client\dist\index.html'
[1] [nodemon] restarting due to changes...
[1] [nodemon] restarting due to changes...
[1] [nodemon] restarting due to changes...
[1] [nodemon] restarting due to changes...
[0] ✨  Built in 51.89s.
[1] [nodemon] starting `node index.js`
[1] listening at localhost: 3000
```

Thanx a lot for all of those Who granted their kind consideration.
Day 16 of #100DaysOfCode
Tags: 100daysofcode
Published: 2020-07-17 16:18:12

Today's Progress: Finished the final version of my Github jobs project in nextjs and react.

Link to work: https://github.com/Kyawkhaing444/github-jobs-react-nextjs

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwzvjkp7b6je4nm42std.png)
01_Week_1/14 (เส้นทางฝึกกล้ามหน้าท้องด้วยตนเอง)
Published: 2020-07-17 16:18:05


---
title: 01_Week_1/14 (เส้นทางฝึกกล้ามหน้าท้องด้วยตนเอง)
published: true
description: 
tags: 
---

สัปดานี้ก็เป็นสัปดาห์แรก (Week_1/14) สำหรับเส้นทางการเพิ่มกล้ามหน้าท้องโดยใช้เส้นทางที่ 1 คือการหาข้อมูลและฝึกฝนด้วยตนเองซึ่งจะมีระยะเวลาในการฝึก 14 สัปดาห์ด้วยกันครับ หลังจากที่ผม search คำว่า "เพิ่มกล้ามหน้าท้อง" ก็พบ ผลการค้นหาประมาณ 10,400,000 รายการ ซึ่งหลังจากที่ผมไล่อ่านรายละเอียดหลายๆส่วนแล้วพอจะสรุปได้ว่า การเพิ่มกล้ามหน้าท้องนั้นจะมีส่วนประกอบ 2 ส่วนด้วยกัน คือ
 
   1. เรื่องอาหาร ผมต้องคุมอาหารเพื่อให้มีมวลไขมันที่ปกคลุมกล้ามเนื้อเหลือน้อยที่สุด
   2. เรื่องการออกกำลังกาย ผมต้องหาข้อมูลการออกกำลังกายและหาตารางการออกกำลังกายที่เหมาะสมกับตัวเองให้มากที่สุด

**สิ่งที่ได้เรียนรู้** : ข้อมูลเยอะมากๆ ผมต้องนั่งไล่หาและเปรียบเทียบกับหลายๆแหล่งเพื่อให้ได้ข้อมูลการฝึกที่ถูกต้องมากที่สุด

นี้ก็จะเป็นสัปดาห์แรกนะครับ แล้วพบกันใหม่ครับ ขอบคุณครับ...
How can I create a web component with an isolated CSS environment?
Tags: help, webdev
Published: 2020-07-17 16:17:40

I want my component not to be using CSS framework, as well as not destroyed by any global CSS's.

Actually, I want to remake [this component](https://github.com/patarapolw/make-html/blob/master/packages/frontend-functions/src/components/card.jsx), but not being forced to install Tailwind.

It needs no reactivity, so I prefer it not to be bloated; but it does need some CSS styling, and it want to use it regardless of outside CSS environment.

It seems that IFrame is a way. Another way seems to be `this.attachShadow({ mode: 'open' })`?
Implementing common array methods with the reduce method
Tags: javascript
Published: 2020-07-17 16:15:15

Instead of inventing the CTRL-F for notebooks or the CTRL+Z of scissors I decided to do something more challenging and interesting. I am a developer. I write articles about array methods.

It's almost three years since I have started programming with JavaScript and I felt confident to say that you can replicate *any* array method with the `reduce` method.

The only caveat is that some of the methods return the first element when predicate returns `true` and you cannot escape the iteration of a `reduce` method, at least not the one that `Array.prototype` provides.

`every` is one of those methods. `every` checks if the callback (predicate) returns `true` for all elements (collection). Here is a _lodish_ (Latin: _lodashish_) implementation with the `reduce` method:

```javascript
function every(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    return predicate(curr, index, collection) && prev;
  }, true);
}
```

We set the initial value of the accumulator to `true` and check the current element `AND` the previous accumulated value (`AND` is `true` if and only if all of its operands are true).

Similar to `every`, `some`'s iteration is stopped once predicate returns `true`, but it returns `true` if any of the element checks returns `true`. Here is its implementation:

```javascript
function some(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    return predicate(curr, index, collection) || prev;
  }, false);
}
```

The initial accumulator's value is set to `false` and we check each element against the previous result using the `OR` operator (`OR` is `true` if any of its arguments are true).

`filter` and `map` seem to be more frequently used than `every` and `some`, which is why I feel we can skip their explanation. Here is the _lodish_ implementation with the `reduce` method:

```javascript
function filter(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    if (predicate(curr, index, collection)) {
      prev.push(curr);
    }

    return prev;
  }, []);
}
```

```javascript
function map(collection, iteratee) {
  return collection.reduce((prev, curr, index) => {
    prev.push(iteratee(curr, index, collection));

    return prev;
  }, []);
}
```

`find` is another popular array method. It returns the first element that predicate returns `true` else it returns `undefined`.

```javascript
function find(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    if (predicate(curr, index, collection)) {
      return prev || curr;
    }

    return prev;
  }, undefined);
}
```

Lastly, `findIndex` is like `find` but it returns the matched element's index instead of the element. It returns `-1` otherwise.

```javascript
function findIndex(array, predicate) {
  return array.reduce((prev, curr, index) => {
    if (predicate(curr, index, array)) {
      return index;
    }

    return prev;
  }, -1);
}
```
Daily Challenge #270 - Fix String Case
Tags: challenge
Published: 2020-07-17 16:08:48

---
title: Daily Challenge #270 - Fix String Case
published: true
series: Daily Challenge
description: Change the letters to uppercase only or lowercase only. 
tags: challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jm61cnp4rlkaewkikpbj.png
---
In this challenge, you will be given a string that may have mixed uppercase and lowercase letters and your task is to convert that string to either lowercase only or uppercase only based on:
- making as few changes as possible
- if the string contains equal number of uppercase and lowercase letters, convert the string to lowercase.

```
For example:
solve("coDe") = "code". Lowercase characters > uppercase. Change only the "D" to lowercase.
solve("CODe") = "CODE". Uppercase characters > lowecase. Change only the "e" to uppercase.
solve("coDE") = "code". Upper == lowercase. Change all to lowercase.
```

Tests:
solve("code")
solve("CODe")
solve("COde")
solve("Code")

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5b180e9fedaa564a7000009a) comes from KenKamau on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Ask Octopus - How do I upload files to Azure Blob storage?
Tags: octopus, devops, azure, tutorial
Published: 2020-07-17 16:08:11

---
title: Ask Octopus - How do I upload files to Azure Blob storage?
published: true
description: Learn how to upload files to Azure Blob storage with Octopus Deploy.
tags: octopus,devops,azure,tutorial
series: Ask Octopus
---

Last week, we added our Azure credentials to Octopus. This week we'll use those credentials to upload files to Blob storage with the Azure CLI and Octopus Deploy.

{% youtube sii_UkmYXvk %}

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
Patterns App - Regex Tool for the Mac
Published: 2020-12-04 03:09:20

---
title: Patterns App - Regex Tool for the Mac
published: true
date: 2020-07-17 15:59:35 UTC
tags: 
canonical_url: https://www.gilcreque.blog/2020/07/17/patterns-app-regex.html
---

I am sure I have posted about this app before but it requires mentioning it again. I could not imagine writing regualr expressions without using the Patterns app on the Mac. It allows you to test your regex in an editor and see a cheat sheet. When you are done, you can get export the regex code for your language. I highly recommend it!

[krillapps.com/patterns/](https://krillapps.com/patterns/)