teleren/devto huggingface dataset:
Testing a remote repository
Tags: opensource, python
Published: 2021-10-09 04:43:04

Our topics for this week include implementing a new feature for SSG application to work with config.json file and learning about git remote.
In addition, I have also learned a new way to test code via remote. It is so cool and I will definitely use it often in the future.
## Writing new feature in Python
I wanted to reinforce my skill in Python, so I chose Quiwen-Yu 's project_ [TextHTML](https://github.com/Qiwen-Yu/TextHTMLPress) to work with. I love Python and so I enjoy working on Quiwen 's project. The language is straightforward, plus there are tons of supporting libraries. In addition, Quiwen made separate logics for processing input files and generating HTML pages, making it easier for me to implement the new feature. I have made a [Pull request](https://github.com/Qiwen-Yu/TextHTMLPress/pulls), and I am still waiting for her response.  
## Testing code using Git remote
Quiwen Yu is also a contributor to my [Shinny-SSG]() application this week. She had submitted a [Pr](https://github.com/hphan9/shinny-ssg/pull/16), but I requested some changes to make it better.  
To test her code, I practice this new git command
```Git remote add Qiwen-Yu https://github.com/Qiwen-Yu/shinny-ssg.git```

This command allows me to work on the code in other developers' branches without merging the upstream repository.
I am now beginning to understand why Git is an important part of daily programming and its power for people to work together. Along with my journey with Opensource, I love Git more and more.
First pull request in Hacktoberfest
Tags: opensource, firstpullrequest, hacktoberfest
Published: 2021-10-09 04:37:10

##Overviews
This is my first ever Hacktoberfest, it is perfect time for me to contribute more to open source community. In this project, I helped the author, Vikas Ukani, on his portfolio page. My pull request got merged and I am really happy about that.

##Progress
To be more specific, Vikas faced a problem related to  the alignment of his project cards. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xti0v0bynv7oqsbmyz7l.png)
After some fixes, the cards are now in good position and new animation when hovering cards has been added as well.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bncrgry9mrwuvmiq3vhf.png)
All the fixes are made using Vanilla CSS. Details:
Added a new CSS module file which is styles/ProjectList.module.css
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4enj7piz6vh0oa97yv3.png) 
Linked ProjectsList.jsx to the new created CSS module file
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhrskx68ow1ldwy8qx79.png) 
Created new classes for projects list and project cards inside ProjectList.jsx
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tq8kw50oikje7ya20we.PNG)
Used Flex Box instead of Grid.
Added animation when users hover project cards.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5had34rxbk0nfll7buv1.PNG)
After some test, I sent a pull request to Vikas.

##Code Explanation
I use Flex Box with <code>wrap</code> property so that the cards will be in a same line and if there is not enough space, next cards will move to new line. This can also reduce the complication of grid template and the cards will be also compatible with different devices. After that, giving the cards a specific height will fix the problem of the alignment. To add an animation for the card, I gave a card a box shadow so that users can feel that the cards are floating on the page. When users hover the card, I unset the box shadow and add a margin to top by -5px so that users will see that the card is moving and focused.

##Challenge
That was not a big fix but it took me a lot of time to think about the idea and design. I also did a lot of test so that the hovering animation is smooth and reasonable. Choosing appropriate positions and blur effect for the box shadow is a big issue too.

##Links
Issue: https://github.com/vikas-ukani/react-next-portfolio-dev/issues/6
Pull request: https://github.com/vikas-ukani/react-next-portfolio-dev/pull/7
How to embed youtube videos on official.page
Tags: embed, youtube, videos
Published: 2021-10-09 04:31:30

Embed a youtube video on your page 
@ [official.page](https://official.page) 

Linking a link to a YouTube video for a short tutorial that explains how to embed a video of YouTube inside of your page.

**
[How To Embed YouTube Videos on the official.page](https://www.youtube.com/watch?v=sYTUQ5LSuc4)
React Native Vector Icons
Tags: reactnative, ios, android, beginners
Published: 2021-10-09 04:25:49

## Install Package

```bash
$ npm install --save react-native-vector-icons
```

then link it

```bash
$ cd android && ./gradlew clean && cd ..
$ cd ios && pod install && cd ..
```

on iOS, go to `ios/PROJECTNAME/Info.plist` add this under ~<key>UIAppFonts</key>~

```xml
  <key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
  </array>
```

on Android we need add some text too, go to `android/app/build.gradle` under ~apply from: "../../node_modules/react-native/react.gradle"~

```java
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

Now you can use it like this

```js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}
```
Week 5: Git getting consfusing !!!! (in a good way)
Tags: opensource, javascript, beginners, programming
Published: 2021-10-09 04:18:12

This week lab brought me back working on my genius friend's git repo which you can check out his amazing work here[DukeManh - OSD_SSG](https://github.com/DukeManh/OSD_SSG)

For resources on how to implement supporting config feature please kindly follow this [link](https://github.com/yargs/yargs/blob/main/docs/api.md#configobject) which lead you to the documentation on how to implement it because I believe it is not something difficult to understand, instead I have a bit more to share

# Working flow on how to work in an open source project

It has been the most challenging week so far for me to understand all the concept that the prof have to give. Since I'm not that good of a programmer so I will spend a bit time to summarize it down here for my furture use :) . So let talk about the workflow of contributing and testing other programmers's work in the Open Source world (in steps).

**Step 1:** Fork the project and clone it into your local machine
**Step 2:** For big project, they usually have test cases that need to be passed in order to run the project successfully so make sure you run all the test that required by the project
**Step 3:** Set up a remote to the *upstream* branch

` $ git remote add <name-of-remote(suggested upstream for name)> <upstream git repo> `

You can check all the **remote** using:

`$ git remote -v`

**Step 4:** Make sure your project is up to date with the upstream project using

` $ git pull <remote-name> `

**Step 5:** Create a topic-brand which either can fix a bugs,issues or adding feature to the project

` $ git checkout -b <issue-##> `

**Step 6:** When you are ready to show your work 

` $ git push origin <issue-##> ` 

## For testing your own project

Fetch your teamates repo into your local repo so they work will be available on your local repo. Note: From my own stupid expericence :) I did not fetch Duke repo and try to start a tracking branch and wonder why it did not work out for an hour :v 

`$ git fetch <remote-name>

Create a branch that track changes of your teamates branch
` $ git checkout -b <branch-name> <remote-name>/<teamates's-branch-name> `

Testing it locally and if you are satisfied with the work. You can switch to your main branch and start a merge then push the main brain to Github:

`$ git merge <remote-name>/<issue-##>
 $ git push origin main `

**Why is it consfusing in a good way?** I manage to replay the mupltiple parts of the lecture video multiple time and kind of getting a hang of the work flow but I'm gurantee for sure that I will have to practice a lot to fully understand and be comfort with the workflow

## Thought on Genius programmer

I use Genius when talking about Duke since for me being a genius is having dedication and willing to put out the time to achieve your dream. For me, you and I can do anything clearly anything with a will to learn, to accept failure and especially put time working to achieve your dream !!!
This is a post for none
Published: 2021-10-09 04:14:37

  Ut ut soluta ex recusandae beatae. Dolorem earum itaque fuga iusto. Culpa dolorum et quia molestiae velit. Et error blanditiis facilis aut nesciunt.
 
Voluptate qui dignissimos labore magnam et. In illo ut est saepe esse non. Ut non aperiam ipsum temporibus debitis minima et nobis neque. Distinctio quibusdam reiciendis architecto voluptate. Doloribus in earum voluptates atque quo consequatur aliquid tempore rerum. Recusandae aut quaerat quae autem.
 
Sint commodi corrupti quas. Ut quis ipsam. Assumenda magni vel repudiandae ipsam voluptatem vel sequi dolorem soluta. Quis rerum et in.
Type alias in Typescript
Tags: javascript, typescript
Published: 2021-10-09 04:11:59


Before delving into Type alias let us look some code:
#### The code be also be accessed here: https://github.com/abhidatta0/Typescript-for-JS-people

##### All codes for this blog can be found from src/Basic/_2.ts file

```
let obj = {x: 0};
obj.bar = 'Hello';
```
This will show a editor error in TS
```
Property 'bar' does not exist on type '{ x: number; }';
```

This is like TS saying "i can see obj has only one property x of type number,but you are changing "bar" which is not a property of obj hence i am going to show error".
But we want to assign bar to obj. For this we have to give a certain type(structure) to obj by writing:
```
let obj:{x: number, bar?: string}= {x: 0};
obj.bar = 'Hello';
```
Here, "?" means optional. This will run fine now.

#### Function types
```
function greet(name: string){
    console.log('Hello '+name.toUpperCase()+'!');
}

//greet(42);  //throws error
```
Here, we provide type string to name parameter of greet method.
So we get two advantages:
- Autocompletion on only string properties (e.g: .toUpperCase())
- TS show error if any parameter type other than string (like number 42) is passed as param.    
      
🚀<small>Tip: If mouse is hovered over greet function defination it shows the full function signature.</small>

Lets see a slightly adavnced version of this 
```
function printCoord(pt:{x:number; y?: number}){
    console.log('The x coordination '+ pt.x);
    console.log('The y coordination '+ pt.y);
    console.log(pt.y?.toFixed);
}

printCoord({x: 3, y: 7});
printCoord({x: 3});   
```
Here pt is a param of object type where y is optional(indicated by ?).Notice we have accessed toFixed of y via optional chaining because there can be certain scenerio where y will be undefined.
(e.g: printCoord({x: 3}) )
<p>I have added similar type examples for Anonymous functions in the github repo (file: src/Basic/_2.ts) [here](https://github.com/abhidatta0/Typescript-for-JS-people/blob/master/src/Basic%201/_2.ts).

<h1>Type alias</h1> is a syntax to give particular shape to our variables. Variables can be either of string, object , functions etc.

The above printCoord function defination can be written as:
```
type Point = {
    x: number;
    y?: number;
};

function printCoord(pt: Point){
    console.log('The x coordination '+ pt.x);
    console.log('The y coordination '+ pt.y);
    console.log(pt.y?.toFixed);
}

printCoord({x: 3, y: 7});
printCoord({x: 3});
```
Everything is same except the type of pt have been "refactored" to a Type Point. This type Point can now be used for other variable types as well . So this like giving <em>alias to a type</em>!.Hence, type alias.
The code for type alias is [here](https://github.com/abhidatta0/Typescript-for-JS-people/blob/master/src/Basic%201/_4TypeAlias.ts).
Automation project
Tags: python, pathlib, renamefiles
Published: 2021-10-09 04:09:28

I am studying Python is a very good place called Coding Nomads, as part of one of my assignments I have to make post about one of my automation homeworks. In this case the goal was to make a program that takes all the given files of a directory (given in the code) and rename the files using a counter; all this using the module pathlib. So this is my code:

```javascript
import pathlib

folder=pathlib.Path("C:/Users/Amma/Desktop/Coding Nomads/python-101-main/13_modules-and-automation/Example for rename")
a=1
for file in folder.iterdir():
    old_name=file.stem
    old_ext=file.suffix
    c=file.suffix
    new_stem=f"This is the file {a} and now the format is {c}"
    new_name=new_stem+old_ext
    file.rename(pathlib.Path(folder,new_name))
    a+=1

```

I do find one error, is when you open one of the files that you will rename, so the program is not able to rename that file and give the next error:

```javascript
PermissionError: [WinError 32] El proceso no tiene acceso al archivo porque está siendo utilizado por otro proceso: 'C:\\Users\\Amma\\Desktop\\Coding Nomads\\python-101-main\\13_modules-and-automation\\Example for rename\\This is the file 7 and the format is .docx.docx' -> 'C:\\Users\\Amma\\Desktop\\Coding Nomads\\python-101-main\\13_modules-and-automation\\Example for rename\\This is the file 23 and now the format is .docx.docx'
```

In this case, effectively I opened and modify the file “This is the file 7 and the format is .docx.docx'”

The directory there is the one I used as example, but please feel free to try in your pc if you want and post me if you had any problem, also if there is something this code can get better; I will appreciate it.
adding config option in other student repo
Tags: javascript, opensource, node, cli
Published: 2021-10-09 03:58:02

For this week’s lab I had to choose any other students ssg tool and add a feature of accepting json file and pass option variables from that file instead of getting them from the user. So, I choose [Eugene Chung]( https://github.com/ycechungAI )’s [repo]( https://github.com/ycechungAI/cmd-ssg) to work on. I started by creating an issue, [allow options from config.json file]( https://github.com/ycechungAI/cmd-ssg/issues/38 ),  on the repo. I then forked, cloned and ran the code. The code being written in very pretty way for any developer to understand, and documentation telling what all the tool currently does, it was quite easy for me to work on the enhancement feature.

I at first added an option for config input, then checked if config value is passed on no. if it is passed, update all the other options from getting its value from the json file. This was the high level perspective of solving the problem. I did all those coding changes in a new branch dedicated to the issue. I then commit and push the changes and created a draft PR so that by the time I do code clean up, the project owner can get an idea of the solution and express his views on the solution and suggest changes if needed. Since, he liked it, I commit the minor changes in the code and updated the README file and push all the changes to the branch. Now the [PR](https://github.com/ycechungAI/cmd-ssg/pull/39) was ready to be reviewed and the project owner reviewed and [merged](https://github.com/ycechungAI/cmd-ssg/commit/745fe12e94836acf9ef7bc237cc2bf50af699896) the code into the master branch. 

Well I think it was very round experience and I learned skills of git and nodejs development, I think my approach to the next project will be more wider and I think I should try working on other programming language as well, as this can help me not to stick to one thing and give me a chance to think outside my limits.
Hacktoberfest's first PR
Tags: hacktoberfest, opensource, javascript
Published: 2021-10-09 03:20:58

A complicated software or application takes lots of effort to build and it takes extra effort to maintain. That is why developers utilize GitHub to make their source code open to the public, so that others can fix bugs, add features to their applications. 

In the course, I've been using GitHub with other students to somehow simulate the open-source processes. However, with Hacktoberfest, it's the perfect opportunity to contribute to real projects and participate in the event. 

## Looking for good issues 

After filtering the search results with the label `Hacktoberfest`, there were more than 50,000 issues open, but finding a perfect is not an easy task. I've come across a lot of issues which were out of my knowledge or issues that people created for the sake of Hacktoberfest which were not worth spending time on. 

I finally chose a few interesting repos and issues that I liked. My 2 pull requests this week got merged and I felt very happy about it. Since [this PR](https://github.com/fawazahmed0/youtube-uploader/pull/46) got accepted first, I will talk about it.

## First PR merged 
I asked and got assigned [the issue](https://github.com/fawazahmed0/youtube-uploader/issues/45) to add better error messages from a npm package `youtube-uploader`. At first, the script looked a bit complicated, most error messages were quite clear and I was also working on another issue, I asked the owner to drop my assignment but he insisted me to look over it again. Taken aback by his generosity, I opened the text editor and tried to understand the code to improve error messages. Eventually, I understood the script, found a few debug messages to clarify and an hour a later, a Pull Request was up and waiting to be reviewed. 

These are some of the improvements that I did 
```javascript 
try {
    await localPage.waitForSelector(avatarButtonSelector)
  } catch (e) {
    throw new Error('Avatar/Profile picture button not found : ' + e.name)
  }
//... 
try {
    await localPage.waitForSelector(langMenuItemSelector)
  } catch (e) {
    throw new Error('Language menu item selector/button(">") not found : ' + e.name)
  }
```
## What have I learned? 
There are some lessons that I've drawn: 
- Take time to filter the issues that you like 
- Be patient when installing and reading the the others' code 
- Ask for help by reaching out to the author in GitHub, Discord,...
Systemic Cloud Migration Hands-on Guide to Architecture, Design and Technical Implementation
Tags: cloud, architecture, java, devops
Published: 2021-10-09 03:20:39

I would like to share the book that was printed by @Apress. It is focused on cloud migration and agile architecture. It covers cloud computing fundamentals, migration success factors, solution architecture as well as migration implementation using classic three-tiered  application with source code available on the GitHub. It is written with developers, architects, development managers in mind and based on real-life successful migration experiences. For deep dive on agile cloud migration process in architecture, development, infrastructure, devsecops & operations areas, take a look at [Systemic Cloud Migration Hands-on Guide to Architecture, Design and Technical Implementation](https://www.amazon.ca/Systematic-Cloud-Migration-Hands-Implementation/dp/148427251X) book at Amazon . If you have any questions, need assistance in cloud migration, please reach out at gleb_taras@yahoo.com and I will be happy to answer any question. If you like the book, please post review on Amazon, it will help spread the good word.
Release0.2 week one
Tags: hacktoberfest, github
Published: 2021-10-09 02:27:32

The first pull request is hard for me, and I searched suitable for my level project in 3 days. The simple issue will be assigned soon, if I follow the tutorial to look for it. Most people focus on large, high ranked projects, and I can't get a easy issue from those projects. I changed my mind and looked for a website on the Internet to help find "good first issue". I found a [blog](https://goodfirstissue.dev/language/python/) that provide me some helpful information that I can look for a small project. Finally, I find a project named [Chords] (https://github.com/amanjha8100/chords). This project focus on  making our own Discord Music Bot for our Discord Community.

### The issue
The [issue](https://github.com/amanjha8100/chords/issues/32) named "Beautify the readme section". The problem is that the readme right now looks dull and the owner want the contributor to beautify the readme section. The contributor is free to come up with ideas or choose whatever tool necessary to improve the README.

### How to do 
I searched some music icons and saved them in a new folder named icon. I chose six icons and added them to the README.md. I am not sure if the owner like this style, so I push a draft PR and inform the owner. The owner like the style and I continue to finish it. ![1633747662(1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz706vu5ly9dgueocnlq.png)
The icon should be placed to the left of the title, and the size of the icon should match the text. I use the following code to achieved the goal. 

![1633747919(1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc133zxietayameqmvm9.png)

### Reflection

1. Double check the content which need to push to GitHub, and avoid uploading confidential or redundant content. I uploaded my Discord Rot token. Fortunately, it was found and deleted by the owner.

2.Don't wait for perfection before PR. The reason why my issue hasn't been closed is the pursuit of perfection.

Now I have the experience of searching projects. I hope I can find projects as soon as possible next week. This week's project is very simple. I hope to rewrite the code next week.
Week 4 : The  really helped out
Tags: opensource, javascript, beginners, programming
Published: 2021-10-09 03:13:57

This week, I'm working on supporting the "hr" tah and inline code block for the .md file [TS-SSG](https://github.com/BeAmazedVariable/TS-SSG)

I filed 2 issues and it have been closed using these commit: [fdb4b9](https://github.com/BeAmazedVariable/TS-SSG/commit/fdb4b9de48ca2fcd0c309f18f33ecc341cf362a1)

## Not that hard after all ! 

I did mention in my previous blogs about I having a fear using git command line. But after keep replaying the lectures and let the knowledge sink in. Switching brand, merging the working brand to the main branch seem pretty easy when you get a hang of it. This week I have nothing much to update as we get ready for something big. Hacktoberfest and realease 0.2 coming up pretty soon starting next week. Oh oh it is gonna be busy month !!!