teleren/devto huggingface dataset:
Internal Project Contribution - Release 0.3
Tags: opensource, webdev, beginners
Published: 2021-11-20 03:48:59

## Introduction
Open source refers to source code that is made available to the public to view, use, modify, and distribute under a license. Although the main point of open source projects is to create valuable and accessible open source software, individual contributors can get plenty of personal benefit from contributing to them Projects: [IPC144](https://github.com/Seneca-ICTOER/IPC144)&[telescope](https://github.com/Seneca-CDOT/telescope)

## First Issue :
Audit and fix library-functions.md [Issue #1](https://github.com/Seneca-ICTOER/IPC144/issues/105)

### Checklist
1. Found multiple typos and fixed them.
2. Fixed uppercase letter to suit all other heading letters.
3. Multiple warnings running [lighthouse](developers.google.com/web/tools/lighthouse)
4. Multiple warnings running [Web Hint](webhint.io.)
5. correct use of bacticks
6. correct use of syntax highlighting, not for outputs to make it look different.
7. Accessibility tested!
8. fixed heading errors
9. Improve readability of code comments
10. Fixed Frontmatter for the page to include proper id, title, slug, etc.

### Conclusion
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex4x48ls1h1povolr6so.png)
Auditing and fixing .md file made me use different 
developers.google.com/web/tools/lighthouse
Web Hint: webhint.io.

## Second Issue :
Improve dark mode code colours [Issue #2](https://github.com/Seneca-CDOT/telescope/issues/2377)
This issue was about enabling dark mode colour for syntax highlighting according the toggle click and the issue was not resolved due to wrong implementation. However, it is important to learn the importance of open source development. I made a draft pull request for other to review and help me find the right solution. I will keep working on it until the real solution is found.

## Conclusion
Contributing towards open source projects helps the community and your peers get to know you. This recognition can bring you a lot of opportunities in your career. It helps you learn more about a project. It improves your coding skills.

## Pull requests
[PR #1](https://github.com/Seneca-CDOT/telescope/pull/2500)
[PR #2](https://github.com/Seneca-ICTOER/IPC144/pull/118)

## Author
[@japneetsingh035
External Project Contribution - Release 0.3
Tags: opensource, python, programming
Published: 2021-11-20 03:48:21

## PROJECT CONTRIBUTION [REPO](https://github.com/Python-World/python-mini-projects)

### Description
Countdown timer made using the Python time module and is a terminal game to countdown the time.
https://github.com/Python-World/python-mini-projects/pull/538

### Development
Please have python3 installed to run this project on terminal:
[Python3 Installation](https://www.python.org/downloads/)

```code
import time

def countdown(t):
    while t:
        mins, secs = divmod(t, 60)
        timer = '{:02d}:{:02d}'.format(mins,secs)
        print(timer, end="\r")
        time.sleep(1)
        t -= 1

    print('Timer completed!')

t = input('Enter the time in seconds: ')

countdown(int(t))
```

### Prerequisites
Modules required to be able to use the script successfully
and how to install them. Please have python3 installed to run this project on terminal:

### How to run the script
```code
python3 main.py
```
### Example
```code
Enter the time in seconds: 20
00:20
Timer completed!
```
### Screenshot/GIF showing the sample use of the script
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4vwbd971jod9us6onrm.png)
[Pull Request](https://github.com/Python-World/python-mini-projects/pull/538)

### *Author Name*
[JapneetSingh](https://github.com/japneetsingh035)
Code Reviews - Release 0.3
Tags: javascript, programming, beginners
Published: 2021-11-20 03:46:31

## Introduction
Code review is when you go through your code and make sure everything works. The most popular approach for assessing feature design and implementation is code review.

Your team can devise review procedures that will increase the quality of your code while also fitting into your workflow.

## Code Review Checklist 
A code review checklist is a set of rules or questions that you and your team will use during the code review process. Many teams, whether they realise it or not, are already performing code reviews.
1. What to Look for When Conducting a Code Review
2. Before reviewing, build and test.
3. Do not spend more than 60 minutes reviewing the code.
4. At any given time, no more than 400 lines should be checked.
5. Communicate Goals and Expectations with Feedback.
6. Participate in the Code Review Process with Everyone.

## My First review code
Audited and fixed functions-arrays-and-structs.md #96
1. I found this colSpan needs to be replaced with colspan.
Line 838: colspan
2. Also, Maybe removing the ... and adding it to end.
Line 32: type identifier(type [parameter], ...);

[Code-Review #1](https://github.com/Seneca-ICTOER/IPC144/pull/96#pullrequestreview)

## My Second review code
Reviewed: Tutorial for Converting Table-like Diagrams into Images
[Code-Review #2](https://github.com/Seneca-ICTOER/IPC144/pull/62#pullrequestreview-811014021)

## Conclusion

Code review is a software quality assurance process in which the source code of software is manually reviewed by a team or using an automated code review tool. The goal is to find bugs, fix errors, and, in most cases, improve code quality.
PR 2 for release 0.3
Tags: opensource, javascript, markdown
Published: 2021-11-20 03:40:44

For my second PR, I worked on [Seneca's IPC144 Course Notes website](https://github.com/Seneca-ICTOER/IPC144). This is a docusaurus created website that has markdown files for chapters taught in the IPC144 course. This was a cool one to work on because I recognized a bunch of the notes and diagrams from one of my first courses at Seneca. The issue I was helping fix was [a massive list of markdown files we needed to audit and fix](https://github.com/Seneca-ICTOER/IPC144/issues/18). So I helped out by working on [one of the markdown files in a separate issue](https://github.com/Seneca-ICTOER/IPC144/issues/45).

We were given a checklist of stuff we would need to check for and fix. This included things like formatting adjustments, typos, fixing clarity, adding links to connect the notes better, running the website through testers, etc. For my [pull request](https://github.com/Seneca-ICTOER/IPC144/pull/78) I just went through the document both as the raw markdown and the ran website versions to double check for any errors, while going down the checklist to make sure everything looked correct. Auditing took a surprisingly long amount of time and even then afterwards I was given some very good reviews that helped me fix a few things I didn't catch the first time. It really shows the power of open source, where even after spending hours auditing you can easily still make mistakes, either by tunneling on some stuff, or just missing something, or even not knowing about stuff. You can learn a lot from other people giving a review to your pull request. I didn't know about docusaurus' front matter implementation so getting a review teaching me about that was really cool.

It was also cool to learn about [Lighthouse](https://developers.google.com/web/tools/lighthouse) and [Web Hint](https://webhint.io/). I never used either before but now that I know of their existence I will definitely use them in the future for any web projects that I work on.

In the end I was able to make changes to the markdown file, and adjusted to match what feedback I received from my peers. The changes were successfully approved and merged into the main branch.
Magma : cloud native wireless networking
Tags: kubernetes, 5g
Published: 2021-11-20 03:35:42

##Introduction

It is an open-source project and a software platform that will help operators to deploy mobile networks quickly and easily. Magma provides a software-central distributed mobile packet core. It is 3GPP generation (4G & 5G) and also network agnostic. Their orchestrator can be deployed on the public/private cloud.

##Importance

As we know ,mobile packet cores are important infrastructure for any mobile network and are very complex to operate. Magma is not only intended to replace existing EPC deployments for large networks but also, it extends existing network topologies to the edge of rural deployments, private LTE networks. By enabling automation of common network operations ,magma reduces the complexity of operating mobile networks and also simplifies the mobile network deployment empowers to build connectivity infrastructure.

##Magma Goals

Magma aims to provide a mobile core networking solution that have :
• Cost-effectiveness
• Scalability
• Manageable for operators providing network access in remote regions
• Reliability
• Compatible with existing 3GPP networks

##Magma Architecture

Below diagram is an overview of the Magma architecture. This diagram includes the Access Gateway, Orchestrator, and Federation Gateway. It also have a number of interfaces to components in the “operator core”, which is relevant in the case where Magma is used to extend the operator’s existing mobile network.

![Magma Architecture Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7g0kjsqoefuul0yqz7e.png)

There are main three component in magma architecture ,let us discuss all one by one :

1. *Orchestrator* : It is a cloud service that provides a simple, consistent, and secure way to configure and monitor the wireless network. This can be hosted on a public cloud as well as on private cloud. The metrics acquired through the platform allow you to see the analytics and traffic flows of the wireless users through the Magma web User Interface. This implements a centralized management plane, as well as aspects of the control plane for Magma.

2. *Access Gateway (AGW)* : It implements the runtime features of the Evolved Packet Core (EPC): the Serving Gateway (SGW), Packet Data Network Gateway (PGW), and aspects of the Mobility Management Entity (MME). “Runtime” refers to those functions that are frequently changing due to events such as the powering on of a UE, consumption of usage quota, or a mobility event. There are typically many AGWs for one Orchestrator, and a single AGW typically supports multiple base stations.

3. *Federation Gateway (FGW)* : It terminates a number of standard interfaces to an existing mobile core and then communicates with the Orchestrator over gRPC. This enables a Magma system to connect to and extend the existing mobile core, leveraging existing subscriber data, billing systems, and policies.
Card Hover Interactions
Tags: codepen
Published: 2021-11-20 03:28:19

<p>Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element</p>

{% codepen https://codepen.io/hexagoncircle/pen/XWbWKwL %}
Bugs are not allowed in
Tags: javascript, testing
Published: 2021-11-20 03:25:35

During Hacktoberfest, whenever I openend a PR, a list of checks would automatically run and tell me whether my changes broke the code or not. And this week, I had a chance to implement it into my SSG project. 

## Setting up GitHub Actions: 
These are the steps that I went through setting up the automatic process. 
I first went to `Actions` tab and chose this workflow.
![Node.js Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lugbj0c6r8dzysou4lo2.png)
GitHub generated a workflow config file for me, I removed the `npm build` and specified it to run node version 14 and up as some of my syntaxes were not version 10 compatible. 
```yml
name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm test
```
Afterwards, I pulled the repo to update my local and added more tests to my program as I recently refactored it to test easier. [One of the commits](https://github.com/TueNguyen2911/tue-1st-ssg/pull/31/files) passed testing after integrating GitHub Actions. 
![PR passes tests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqwmlcy580tzzn592lol.png)
## Adding tests to other repos: 
I added some tests to Gustavo's SSG project. I added some [e2e tests](https://github.com/GMOTGIT/GMOT-SSG/pull/22) to his repo which reminded me to add e2e tests to my repo as well :D
Responsive Design CSS tips
Tags: webdev, css, beginners, javascript
Published: 2021-11-20 03:22:21

Hi folks, hope you are doing well. In this post I am going to share you some tips that I personally use while making websites responsive.

**1. Padding/Margin -** We usually use a lot of padding when we make websites for desktops, to make them more attractive. While making it responsive for mobiles, tablets try decreasing the existing paddings and margins.

**2. Use em/rem/ percentages -** Always try using `em/percentage/rem` instead of px, so that the text, images size adjust with respect to the device width.

**3. Flex-wrap -** Using flexbox to align your HTML elements such as `<div>,<p>` etc provides the force elements onto one line or can wrap onto multiple lines according to their width.

**4. Media query -** Media query should be used to set width and height according to the breakpoints. Breakpoint refers to the width at which the website starts looking distorted.

**5. Box-Sizing -** It resolves a lot of problems padding causes, using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width due to padding.
`{box-sizing : border box;}`


If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

**Connect with me on -**

* [Twitter](https://twitter.com/fidalmathew10)
* [Github](https://github.com/FidalMathew)
* [Linkedin](https://www.linkedin.com/in/fidal-mathew-82aba7200/)
Testing.. how?!
Tags: opensource, javascript, testing
Published: 2021-11-20 02:48:42

Github repo: [Repo](https://github.com/juuuuuuun/jun-ssg)
Github github actions run: [Action Run](https://github.com/juuuuuuun/jun-ssg/actions/runs/1483349655)
Testing PR at Another Repo: [Another Repo](https://github.com/nguyenhung15913/OSD600-SSG/pull/21)

#Add CI

This week's Lab09 was to apply CI and check the compatibility of the test code using Github Action for the function. I added `node.js.yaml` for this task.

```
name: Node.js CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 15.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test

```
It is possible to remove or add a version to test the node of the desired version by modifying `node-version` in the relevant part. In my case, I only tested the 14.x and 16.x versions because the core features of SSG are based on Node 14. At first, I didn't understand why I had to do this, but after a while I realized the importance of compatibility. In addition, it is now possible to know which parts are in conflict before the application of PR.

#Add test another Project

To meet the other requirements of Lab09, I collaborated with Hung Nguyen, a student I had worked with previously, and Mizuho Okimoto, a very cool and fun new collaborator. After adding the simple level test code in the student's project
```
describe("test syntaxHighlight", () => {
  const prepareForHead = () => {
    const head = parse(`<head>
		  <meta charset="UTF-8">
		  <meta http-equiv="X-UA-Compatible" content="IE=edge">
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <title>Document</title>
	  </head>`);
    return head;
  };
  const prepareForBody = () => {
    const body = parse(`<body>
		  <pre>will be highlight</pre>	
	  </body>`);
    return body;
  };

  test("No commands were passed", () => {
    const body = prepareForBody();
    const head = prepareForHead();
    syntaxHighlight(body, head);
    expect(head.querySelector("link")).not.toBeNull();
    expect(
      body.querySelector("pre").classList.contains("highlight")
    ).toBeTruthy();
  });
});

```
As a result of the CI, fortunately, it passed safely and I requested a PR.
macOS シェルのPATH追加設定
Tags: macos, zsh, bash, path
Published: 2021-11-20 02:43:48

---
title: macOS シェルのPATH追加設定
published: true
description: how to setup PATH for macOS
tags: macOS,zsh,bash,PATH
//cover_image: https://direct_url_to_image.jpg
---

- macOSで使用しているシェルの確認
```shell
% echo $SHELL
/bin/zsh
```

- 現在のPATH設定の確認
```shell
% echo $PATH
/usr/...
```

- .zshrc がホームにない場合.（bashの場合 .bashrc）
```shell
% touch ~/.zshrc
```

- .zshrc にPATHを追加.（bashの場合 .bashrc）
```shell
% open ~/.zshrc
```
```text
export PATH=$PATH:（追加したい絶対パス）
```
Lab9 Continuous Integration Pipelines and Test Automation
Published: 2021-11-20 02:30:49

This week I focused on managing project complexity through the use of Continuous Integration Pipelines and Test Automation.  CI is a method whereby we build and run our tests automatically whenever anything is pushed to the repo, or a new pull request is made.
### How to create a GitHub Actions Workflow
The video [Running Tests through CI](https://www.youtube.com/watch?v=TfbBF0mJp6M) is very help and I followed the steps to create my first GitHub Actions Workflow. GitHub provides its own CL service called GitHub Action and we just need to click "Actions" tab. I choose the Python - Anacondas template into my project. Then I follow the [instruction](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-python) to configure the python-package-conda.yml file. Most of items are auto generated, only apart of them need to edit. For example, add the push and pull request action, and also edit the install dependencies.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffypfawi0b53jde026p8.png)
###Create a Pull Request to Test my CI
I create a new branch named lab9, and add a new file named test_md_txt_title.py. After all function passed, I push the branch to the remote and pull a new [PR](https://github.com/Yoda-Canada/Magic-SSG/pull/21). After GitHub Action passed the PR, I merged it. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auj168i7xquln0j9slhn.png)
###Add Tests to Partner Project
According to my parter's [issue](https://github.com/oliver-pham/silkie/issues/28), I create a new test file named. I pull a new [PR](https://github.com/oliver-pham/silkie/pull/30), the partner's Actions passed it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mllsr4ae2se1ffpkfxxo.png)
Before that, I found that many projects have the function of automatic error checking. I wonder how to do it. After lab9, I also created my own GitHub actions. I'm very excited.
Firestore Data Model: Threaded Comments on Several Pages
Tags: firebase, firestore, database, nosql
Published: 2021-11-20 02:29:21

Here is how I would model a comment thread if you have X amount of posts that might each have separate comment threads.

**getComments**
```typescript
getComments(parentID: string, postID: string) {
  return db.collection(`posts/${postID}/comments`)
    .where('parent', '==', parentID)
    .orderBy('createdAt', 'desc');
}
```
`posts/postID/comments`

**commentDoc - root**
```typescript
{
  text: 'comment contents',
  uid: 293slek2l2s,
  parent: 'root',
  createdAt: serverTimestamp()
}
```
**commentDoc - child**
```typescript
{
  text: 'comment contents',
  uid: 293slek2l2s,
  parent: 'parentID',
  createdAt: serverTimestamp()
}
```


**post component**
```html
<comment parent="root', post="54232k21">
```
**comment component**
```html
<div class="container tab">
  <if comments=getComments(parent, post)>
    <forEach comments as comment>
      {{ comment.text }}
      user: {{ comment.uid }}
      <comment parent="comment.id", post="54232k21">
    </comment>
  <endIf>
</div>
```
This HTML code is highly dependent on your framework, but I wanted to give a general idea of how I would model this.

Hopefully this works for you.

I will probably implement it in my [Angular Project](https://dev.to/jdgamble555/a-free-fully-functional-blog-in-angular-and-firebase-e4j) eventually.

J
Codecademy CS Career Path CS101 Project: Battle Ships
Published: 2021-11-20 02:22:28

I made this battle ships game in python for the final project to use what I learned in the programming section of this course.

The code uses the regular expressions and random modules. First it defines all the functions to be used in the program. Then it makes the classes for the ships, players and boards. There are sub-classes of ship for each type of ship (carrier, battle ship, cruiser, submarine, destroyer). Then it sets up the game by making instances of the classes. It takes user input to place the players ships. Computer ships are placed randomly. The game-play loop is short and simple. It is just a while loop that contains 3 functions: 1 for the player's turn, 1 for the computers turn, and 1 that checks to see if someone has won. If this function returns True then the game ends. The player and computer turn functions also contain 3 functions each: 1 to make a guess, 1 to check the guess against the opponent's board, and 1 to record the guess on the player's guess board. The guess making functions are different for the computer and the player. The player guess making function takes user input. The computer guess making function uses an algorithm to choose a coordinate based on the existing hits.

Link to code: https://github.com/zacharyfc/CS101_Programming
For M1 MacBook Pro
Tags: m1, adb
Published: 2021-11-20 02:17:45

---
title: For M1 MacBook Pro
published: true
description: How to install something
tags: M1,adb
//cover_image: https://direct_url_to_image.jpg
---

# FileZilla

- https://filezilla-project.org/download.php?type=client からダウンロードしてインストールする。

- OSDNのサイトからダウンロードしたものは起動時にアラートが表示される。

# Android Studio
M1 Pro MacBook Proに、Android Studioをインストールしてもエラーがでてインストール出来ないことがあった

1. IntelliJ IDEA Community (Apple Silicon版)をインストール
https://www.jetbrains.com/ja-jp/idea/download/#section=mac

2. 新規プロジェクト→Androidの画面からAndroid SDKをインストール

3. 普通にインストールが完了するはず。


参考：
https://qiita.com/seiei-n/items/97f59513acb6bf2ad506