teleren/devto huggingface dataset:
Working on Telescope Project 
Tags: redis, javascript, opensource, beginners
Published: 2021-11-26 22:03:56

# Introduction
[Telescope](https://telescope.cdot.systems/) is an open-source project written by Seneca students to aggregate and present a timeline of Seneca's student blogs. Telescope is a fantastic project, and it has a solid impact on to open source community in Seneca. I got a chance to contribute to this project by implementing the route [posts/feeds/invalid](https://github.com/Seneca-CDOT/telescope/issues/2412) for the posts service. 

# Docker
Contributors to the Telescope project can use Docker to develop and run the application locally. They have provided great [documentation](https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md#docker-and-docker-compose-setup) to set up Docker containers for different operating systems. I always have problems with setting up the environment to work on any projects, but with Docker, this task is a little bit easier this time. 
The first challenge I had is error response from Deamon when I first ran `npm run service:start`
```
Error response from daemon: Ports are not available: listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its access permissions.
Error starting services with docker-compose: undefined
```
I asked a question on the Slack channel, and Prof.David quickly pointed out that my port 80 is being used by an IIS application. I checked, and there was an old application that was running to port 80 all the time. I have closed this application and resolved the problem.

# Redis 
Redis is an in-memory database, a data-structure server and a message broker that stores key-value data. That is a lot of words. But what is in-memory database? It means all data are stored in the main memory of the computer instead of the disk storage, making Redis operations exceptional faster than on-disk databases. 
Telescope uses Redis database and [ioredis](https://www.npmjs.com/package/ioredis) to interact with Redis.

# Pr 
I have added a new route to the Post service and added functions to query the invalid Feeds data to the project. I have sent a [draft PR](https://github.com/Seneca-CDOT/telescope/pull/2520/files/12c09a6526f7abbb3d983363d0f6c4392e3c6940#diff-385ce74534c40abd35fec7213380832f3dc70f6fde77edc3f1fd2704b688ab51), and I got some comments from Prof. David to improve it. 

Telescope uses many advanced technology/concepts such as microservices architecture, Redis database, Elasticsearch, Docker, etc. There is so much to learn from it, and I am glad that I can take part in the project.
[Binary Search]Unique Fractions
Tags: java, algorithms, programming, 100daysofcode
Published: 2021-11-26 21:40:05

You are given a list of lists `fractions` where each list contains `[numerator, denominator]` which represents the number `numerator / denominator`.

Return a new list of lists such that the numbers in `fractions` are:

- In their most reduced terms. E.g. `8 / 6` becomes `4 / 3`.
- Any duplicate fractions that represent the same value are removed.
- Sorted in ascending order by their value.
- If the number is negative, the sign should go to the `numerator` (the input also follows this).

**Constraints**

- `n ≤ 100,000` where `n` is the length of `fractions`

### Example

```

fractions = [
    [8, 4],
    [2, 1],
    [7, 3],
    [14, 6],
    [10, 2],
    [-3, 6]
]

```

#### Output


```

[
    [-1, 2],
    [2, 1],
    [7, 3],
    [5, 1]
]

```

#### Explanation

```

Once we reduce the numbers they become [[2, 1], [2, 1], [7, 3], [7, 3], [5, 1], [-1, 2]]. 
The result then comes from deduping and sorting by value.

```

----
```java

import java.util.*;

class Solution {
    public int[][] solve(int[][] fractions) {
        Set<int[]> set = new TreeSet<>(
            (fraction1,
                fraction2) -> (fraction1[0] * fraction2[1]) - (fraction2[0] * fraction1[1]));
        for (int[] fraction : fractions) {
            int a = fraction[0], b = fraction[1];
            int gcd = gcd(Math.max(Math.abs(a), Math.abs(b)), Math.min(Math.abs(a), Math.abs(b)));
            int[] result = new int[] {a / gcd, b / gcd};
            set.add(result);
        }
        int[][] ans = new int[set.size()][2];
        int index = 0;
        for (int[] answer : set) {
            ans[index++] = answer;
        }
        return ans;
    }

    private int gcd(int a, int b) {
        return b == 0 ? a : gcd(b, a % b);
    }
}


```
How I send a gift coupon to my nerdy friend 
Tags: wixsite, ifttt, automation
Published: 2021-11-26 21:49:53

### Context
Our company has organized "Secret Santa", pre-covid times. I got the name of a nerdy colleague and a friend. I decided to gift him Amazon gift coupon. Like people usually do - hiding gift somewhere in desk, I instead created an online puzzle like a treasure hunt using some automation. If he solves he will receive gift on his email.

### Starting Point
>* Printed a bar code on a paper and put it on my friend's workstation desk. Upon scanning, it redirects to a simple website I've created using wixsite.com.
Here's the picture of printed barcode along with other gifts -
![gifts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wpvr5si0a63vaula843.jpg)
>* The landing page shows following instruction -
![landing-page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4i4vqic0edw0pytki5v.png) 
>* To get your gift all you need is an email address.

### Don't scroll! Take the challenge 
> Before I tell you more, why don't you give a try yourself to find the email address? Here's the link after scanning barcode - https://turantsephele.wixsite.com/giftgenerator

S
C
R
O
L
L

T
O

S
E
E

N
E
X
T

S
T
E
P
S

### Finding hints to find the email address
>* Once you click "Get email address", it redirects you to another page which shows a timer and nothing else. And with a small hidden button somewhere in page.
>* If you are able to find the button and click, it redirects you to [brainfuck visualizer](http://fatiherikli.github.io/brainfuck-visualizer/#KysrKysrKysrKwpbCj4rKysrKwo+KysrKysrCj4rKysrKysrCj4rKysrKysrKysrCj4rKysrKysrKysrKwo8PDw8PC0KXQo+Pj4tLS4+Ky4tLS4+Ky48Ky4rLjw8PCsrKysrKysrLi0tLS4tLS0uKysrLi0tLisrLgotLS0tLS4rKysrLi0tLS0tLisrKysrLj4+Pi48PDwrLgotLS0uKysrLi0tLS0uKysrLi0uKysuLS0tLS0tLS4rKysrKysuCisrLi0tLi0uKy4+Pj4tLS48PDwuLS4tLi0tLS0uKysrKysrLisuLS4+Pj4rLjw8PC4tLS0tLS4rKysrKy4rKysuCi0tLS4+Pj4tLjw8PC0tLS0uPj4+KysuPDw8KysrKy4tLS0uKysrLj4+PisuPDw8Lj4+Pi0tLgoK) with some pre-populated code. 
>* I've written this code in brainfuck and when you run it outputs next hint.

### Final Hint
>* That brainfuck code outputs a simple string -
`Decode:747572616e7473657068656c6540676d61696c2e636f6d`
>* After decoding, it gives you the email address.

### Automation for sending gift coupon
>* I have created a IFTTT flow which triggers when there is an incoming email with subject "HOG RIEEDERRRRR" and it is from my friend's email address.
>* Once this condition matches, IFTTT sends an email back with gift coupon details.

### To make sure friend don't stuck
>* Once timer ran out it reveals a link to brainfuck visualizer code.
>* If he can't solve the puzzle in 3 days, an email triggers and sent gift coupon details to friend's email address. Again using IFTTT.

That's all folks!

If you did something similar or have some idea like this, drop it in comments :)
GameOff #4 - Total destruction!
Tags: github, unity3d, gamedev, devjournal
Published: 2021-11-26 21:45:25

Since the last post, we have added so much to the game! VFX is ready, with better character animations, new monsters and map tweaks. Over the map is flying now Santa Claus throwing gifts with weapons to players.

{% youtube duNGQwla650 %}
Lab 10 - Time to release
Tags: opensource, npm
Published: 2021-11-26 21:30:15

## Introduction

For the tenth lab, It finally time to release our SSG to the public.

## Process 

First of all there is 2 kind of registry for node.js, it either GitHub's npm registry or npm registry.

### GitHub's npm registry

Package Hosted on GitHub.
Steps:
- Create a GitHub Token with `repo`, `read:package`, and `write:package`.
- Create a `.npmrc` file in the root of your repo and add `@OWNER:registry=https://npm.pkg.github.com` where `@OWNER` represent your GitHub Username.
- Rename package `name` to `@OWNER/name` where `@OWNER` represent your GitHub Username, and name represent your package name.
- Make sure `repository` field in your project's package.json match URL of your project GitHub repo.
- Login to GitHub registry 
```bash
$ npm login --scope=@OWNER --registry=https://npm.pkg.github.com

> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS
```
  Where `@OWNER` represent your GitHub Username, Username your GitHub Username, Password your GitHub Token generated in previous steps, and email a public email.
- Time to publish by running `npm publish`

Now your package is published to GitHub's npm registry and can view your package in your repo package tab.

### Npm registry

Package Hosted on npmjs.
Steps:
- Create an account in npmjs
- Verify your email (Important to do for publishing your package)
- Login to NPM registry 
```bash
$ npm login 

> Username: USERNAME
> Password: PASSSORD
> Email: PUBLIC-EMAIL-ADDRESS
```
Where Username your npm Username, Password your npm password, and email your email that was used to setup to npmjs.
- Time to publish by running `npm publish`

Now your package is published to npm registry and can view your package in package tab.

For me, I picked npm registry. But before publishing we need to create a tag and post a release on GitHub.

I make sure everything is ready for release such as updating readme, fix some function, package.json...
After that I committed my change and create a tag using `git tag -a 1.0.2 -m "Release 1.0.2"` then after that I pushed to remote using `git push origin --follow-tags`.
After that on GitHub I click on create release, I select my tag previously created and put a description.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ku3cb7tbos8k7vu2tlq.png)

Now after created a release I can publish my package by running `npm publish`. 

Now my package is viewable in https://www.npmjs.com/package/text-ssg

Time to test if uploading my package is successful.
Command ran `npx text-ssg@latest -h`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n352p3jry524negjil7d.png)
 
## Conclusion 
After 12 weeks of development It feels great to publish my CLI to the public. Even thought it looks small but it's a goal achieved in my developer life.

GitHub: [@Kevan-Y](https://github.com/Kevan-Y/text-ssg)
Repo: https://github.com/Kevan-Y/text-ssg
Thanks contributor:
[@irenejoeunpark](https://github.com/irenejoeunpark)
[@DukeManh](https://github.com/DukeManh)
[@AndreWillomitzer](https://github.com/AndreWillomitzer)
No bundle url present.. after building a production build react native
Tags: reactnative, javascript
Published: 2021-11-26 19:32:30

In your info.plist(cd ios/app name/info.plist), change this code

```
<key>NSAppTransportSecurity</key>
  <dict>
  <key>NSExceptionDomains</key>
  <dict>
```
to this
```
<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
  <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
  </dict>
```
Also you might wanna clean your build, in Xcode you can use shortcut keys.. shift + command + k or click product from top menu then clean build folder in the dropdown
4 Theories For Clean Code
Tags: javascript, react, programming, webdev
Published: 2021-11-26 19:20:04


## KISS: 
_Keep It Simple & Stupid_: Make your code simple and avoid from complexity

## DRY: 
_Don’t Repeat Yourself_ : Always avoid boilerplate code.

## DIE: 
_Duplication Is Evil_ : Every piece of knowledge must have a single representation.

## YAGNI: 
_You Ain’t Gonna Need It_ : Create code only when its needed, never when you foresee you will need them
Client / Server Chat
Tags: python, devops, computerscience
Published: 2021-11-26 18:50:14

[Github Repo](https://github.com/sagordon-dev/intro-to-socket-programming)

![Console Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ska4w52zqdw86hsma57q.png)

```python
# client_server_chat
#   This is a program to demonstate a chat between client and server using UDP.
#   Run this program and add either client or server as an argument.
#   Once you have run both client and server you can chat between them.
# by Scott Gordon with help from Educative.com

import argparse, socket

MAX_SIZE_BYTES = 65535  # Mazimum size of a UDP datagram


def server(port):
    s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
    hostname = "127.0.0.1"
    s.bind((hostname, port))
    print("Listening at {}".format(s.getsockname()))
    while True:
        data, clientAddress = s.recvfrom(MAX_SIZE_BYTES)
        message = data.decode("ascii")
        print("The client at {} says {!r}".format(clientAddress, message))
        msg_to_send = input("Input message to send to client:")
        data = msg_to_send.encode("ascii")
        s.sendto(data, clientAddress)


def client(port):
    s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
    host = "127.0.0.1"
    while True:
        s.connect((host, port))
        message = input("Input message to send to server:")
        data = message.encode("ascii")
        s.send(data)
        data = s.recv(MAX_SIZE_BYTES)
        text = data.decode("ascii")
        print("The server replied with {!r}".format(text))


if __name__ == "__main__":
    funcs = {"client": client, "server": server}
    parser = argparse.ArgumentParser(description="UDP client and server")
    parser.add_argument("functions", choices=funcs, help="client or server")
    parser.add_argument(
        "-p", metavar="PORT", type=int, default=3000, help="UDP port (default 3000)"
    )
    args = parser.parse_args()
    function = funcs[args.functions]
    function(args.p)

```
[Verify my Python](https://www.ziprecruiter.com/verify-skill/4503e8d7/v1:U2FsdGVkX18R9FUa_YZDT-sEJIj5NNex8HGcuOPc5Ymp68eoblLqBW_koHWNy4Pzh-yJVcUK1n4/#UHl0aG9u)

Photo by <a href="https://unsplash.com/@kelvin1987?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelvin Ang</a> on <a href="https://unsplash.com/s/photos/server?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Living in the Shell #4; jq (JSON)
Tags: productivity, linux, devops, bash
Published: 2021-11-26 18:14:49


## `jq` 🧹

JSON formatter/prettifier.

🏠 [https://stedolan.github.io/jq/](https://stedolan.github.io/jq/)
📗 [https://github.com/stedolan/jq](https://github.com/stedolan/jq)

## Installation (on Debian)

```sh
sudo apt-get install jq
```

## Format/prettify

```sh
echo -n '{"who":["me","you"],"when":"now"}' | jq
```

> ```text
> {
>   "who": [
>     "me",
>     "you"
>   ],
>   "when": "now"
> }
> ```

## Indentation with tab `--tab`

```sh
echo -n '{"who":["me","you"],"when":"now"}' | jq --tab
```

## Compact `-c`

```sh
cat << EOF | jq -c
{
  "who": [
    "me",
    "you"
  ],
  "when": "now"
}
EOF
```

> ```text
> {"who":["me","you"],"when":"now"}
> ```

## Sort keys `-S`

```sh
echo -n '{"z":"z","a":"a"}' | jq -S
```

> ```text
> {
>   "a": "a",
>   "z": "z"
> }
> ```

## Uncolorize output (monochrome) `-M`

```sh
echo -n '{"who":"me","when":"now"}' | jq -M
```
Releasing and publishing through npm
Published: 2021-11-26 17:31:17

Over the past couple of weeks, I've been working on [cli-ssg](https://github.com/dhillonks/cli-ssg), which is a command line tool to generate a website using `.txt`/`.md` files. A lot of changes had accumulated, and this was the perfect time to create an official release `1.0.0`.

## Tagging the release
Firstly, as `cli-ssg` was sitting at v`0.1`, I used [npm-version](https://docs.npmjs.com/cli/v8/commands/npm-version) to bump it up:
```bash
npm version major
```

This changed the version in `package.json` and `package-lock.json` to:
```js
"version": "1.0.1"
```

Then, I updated the `README.md` and proceeded to create a `git tag` using:
```bash
git tag -a v1.0.0 -m "Release 1.0"
``` 

At this point, I pushed my changes to GitHub but to my surprise the tags would not show up. After some digging, I realized that tags need to be pushed explicitly, so I used:
```bash
git push --tags origin
```

This fixed the problem, and I was finally able to create a release:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qigxjg5d1rmtvspeqbx5.png)

## Publishing to `npm`
Before one can publish a package to `npm`, you need to create an account and sign into npm using 
```bash
npm adduser
```

Since I already had this setup, I proceeded to publish my package using [npm-publish](https://docs.npmjs.com/cli/v8/commands/npm-publish):
```bash
npm publish
```

This published `cli-ssg` to the public registry and I could now view it on `npm`:
https://www.npmjs.com/package/cli-ssg

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iikqf90oimuklvwscvf.png)
 
#### Installing and testing through `npm`
While, everything looked great online, I wanted to ensure that users could install it through `npm` and the functionality worked as expected. And after some testing, as expected, everything works!

To use the package, users can now simply type:
```bash
npm i cli-ssg
```

Once `npm` installs it, the users can use all the features, for example:
```bash
cli-ssg -i "sample_input_file.md"
```

More examples can be found in our [docs](https://github.com/dhillonks/cli-ssg#usage)!

## References
`GitHub`: https://github.com/dhillonks/cli-ssg
`npm`: https://www.npmjs.com/package/cli-ssg
How to create dynamic input using Vue
Tags: vue, javascript, programming, codenewbie
Published: 2021-11-26 17:07:47


Hello Readers,

In this blog, I am going to show you, how we can create dynamic input using vuejs.

First, create a component and name it as `DynamicInput.vue` and add the below code.

```js
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="w-full mt-4 p-10">
      <button
        type="button"
        class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
        @click="addMore()"
      >
        Add More
      </button>
      <div v-for="(course, index) in courses" :key="index">
        <div class="flex justify-start ml-2 mt-4">
          <input
            v-model="course.courseName"
            placeholder="enter you course name"
            class="w-full py-2 border border-indigo-500 rounded"
          />
          <button
            type="button"
            class="ml-2 rounded-md border px-3 py-2 bg-red-600 text-white"
            @click="remove(index)"
            v-show="index != 0"
          >
            Remove
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      courses: [
        {
          courseName: "",
        },
      ],
    };
  },
  methods: {
    addMore() {
      this.courses.push({
        courseName: "",
      });
    },
    remove(index) {
      this.courses.splice(index, 1);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
```
Now add this component into `App.vue` file as below.

```js
<template>
  <div id="app">
    <DynamicInput msg="Example of Dynamic Input" />
  </div>
</template>

<script>
import DynamicInput from "./components/DynamicInput";

export default {
  name: "App",
  components: {
    DynamicInput,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```
I have installed tailwind CSS to styling you have to install it.

If you like my post please follow me to get more blog posts.

{% user snehalk %}

For more details you can refer below codesandbox.

{% codesandbox dynamic-input-example-41x5m%}

Happy Reading. :unicorn: :heart:
Computer Graphics
Published: 2021-11-25 16:35:12

On a computer screen, displaying an image of any size is tough. The use of computer graphics simplifies this process. Various methods and techniques are used to create computer graphics. This course explains how the computer processes all of them to offer the user with a rich visual experience.

Introduction:

Computer graphics necessitates the use of technology. The Process turns data into a visual representation and displays it to the user. Insensible to the role of computer graphics. Computer graphics are becoming a widespread feature in user interfaces and commercial motion films on television.

The use of a computer to create images is known as computer graphics. A picture is the end product of computer graphics; it could be a business graph, drawing, or engineering.

Two-dimensional or three-dimensional images for research can be made using computer graphics. With the passage of time, many hardware devices algorithms have been developed to improve the speed of picture generation. It entails the generation and storing of object models and images. These models can be used in a variety of fields, including engineering, mathematics, and so on.

Today computer graphics is entirely different from the earlier one. It is not possible. It is an interactive user can control the structure of an object of various input devices.

Definition of CG:

It is the process of using computers to create and alter images for display on a screen. It consists of software techniques for creating, storing, altering, and representing images.

Why CG is used?

Let's say a shoe manufacturer wants to illustrate the sales of shoes over a five-year period. It is necessary to store such a large amount of data. As a result, a significant amount of time and memory will be required. This strategy will be difficult for the average person to comprehend. Graphics is a better option in this circumstance. Charts and graphs are examples of graphic tools. Data can be expressed in a graphical format using graphs. A single glance at an image is all it takes to understand it.

The concept of two-way communication between computer users is used in interactive computer graphics. The computer receives signals from the input device and adjusts the image accordingly. When we use the command, the picture will change swiftly.