teleren/devto huggingface dataset:
Gitlab Upstream url[FIXED]
Tags: git, gitlab
Published: 2021-10-31 08:04:33

short post about upstream url of gitlab:-


The right way to set a upstream url of gitlab is:-

```
git remote add <upstream_name> <https://{your_username}@gitlab.com/<upstream_username>/<upstream_repo>.git
```

Now if you already had set your url just do
```
git remote set-url <upstream_name> <https://{your_username}@gitlab.com/<upstream_username>/<upstream_repo>.git
```

Hope this one works for you!
Finally my 4th PR got accepted 
Tags: hacktoberfest, opensource, python, beginners
Published: 2021-10-31 08:00:21

## I'm a First year Computer Science Engineering student at SRM Chennai.
I had never contributed to open source before, But thanks to Hacktoberfest 2021.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za4vvb21xa84mjbntgng.png)
I started my contribution journey. It gives me monstrous satisfaction in finishing my 4 PR's. I learned a lot during this 1 month. I made my First PR. Learned a lot of new algorithms, learned to solve conflicts, The best practices and tons of new things
__I learned many python packages like Selenium , beautiful soup, pandas, etc during this period.__ 
Hactoberfest2021 was an incredible learning experience. It was an ideal beginning for new commers like me. 
 *additionally t-shirt is an incredible inspiration to finish things XD.*
###### I'm very happy to receive my first SWAG!!


{% github pratham-bhatnagar/pratham-bhatnagar %}
Describe a language only in one sentence.
Tags: javascript, python, php, beginners
Published: 2021-10-31 07:56:31

In order to fully understand what these programming languages are, I tried to explain only in one simple sentence.


<< HTML >>
HTML is a structure of a webpage and is used for (almost) all webpages, but it only shows black and white plain texts and images.

<< CSS >>
CSS is used to style and layout HTML/webpages, such as colors, sizes, fonts etc, and add animations.

<< JavaScript >>
JavaScript adds a dynamic movement to static webpages created only with HTML and CSS, and programs its behavior.

** Front-End Web developer needs these three above


<< Python >>
Python is a multipurpose language, used for developing web applications (on a server), automating tasks, and data analysis and machine learning.

<< Java >>
Java is a multipurpose language that runs on most platforms, used for mobile apps, desktop apps, web apps, games, hard ware devices, data analysis, and more.

<< PHP >>
While JavaScript is a client-side scripting language, PHP is a server-side scripting language, which can handle forms, data, files, cookies etc.

<< SQL >>
SQL is a structured query language (which is different from a programming language) that manipulates data stored in database object called table.
A Free News API For Next Project
Tags: webdev, javascript, programming, beginners
Published: 2021-10-31 07:54:19



## Tiny - A News API

- It is a News Fetching totally *free* API (Application programming interface) for your next projects.

- Check out more at [docs](https://github.com/snowbit-coderboi/tiny-news-api#readme)
{% github snowbit-coderboi/tiny-news-api no-readme%}

## Features

- Easy to use
- Totally Free
- Requires no API key / token

What user needs more...?

### Sample Image
![NEWS API in JSON Format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlshq0i0rrqz9bfvoonu.png)
 

## API Reference

### Endpoint
```plain
    https://tiny-news-api.herokuapp.com/api/
```

### Get all news

```http
  GET /api/news
```

### Get Sports News

```http
  GET /api/sports
```


### Get Climate/Environment related news

```http
    GET /api/climate
```


## Roadmap

- Additional endpoints for different news types

- For more try creating a issue and suggest new ideas or report a bug or error - [Create Issue](https://github.com/snowbit-coderboi/tiny-news-api/issues)


## Authors

- [SnowBit](https://www.github.com/snowbit-coderboi)


Please consider sharing feedback in the comments
Crop a picture and upload it to the server with Vue.js
Tags: vue, javascript, webdev
Published: 2021-10-31 07:18:36


There is a large number of occasions when you have to implement a “select a picture and crop it” feature: for example when a user is uploading a picture of him to customize his profile on a website.

First you need to install [vue-cropperjs ](https://www.npmjs.com/package/vue-cropperjs), a wrapper component for **cropperjs**.

We will use the method **getCroppedCanvas** to upload the cropped image to the server. The full documentation about the cropperjs methods is available [here](https://github.com/fengyuanchen/cropperjs#methods).


In the template you can indicate which type of cropper you need. In the example below the cropper has a fixed ratio of 16/9.

    <VueCropper 
    v-show="selectedFile" ref="cropper" :src="selectedFile" 
    :aspectRatio="16/9" :initialAspectRatio="16/9" :autoCropArea="1"
    :zoomable="false"
    >
    </VueCropper>

The **replace** method is used to rebuild the cropper when you select a file and crop it.

    this.$refs.cropper.replace(vm.file);

The **getCroppedCanvas** method gets a canvas drawn from the cropped image. After you can use HTMLCanvasElement.toBlob to get a blob and upload it to the server with FormData.

**Explanation of the terms above:**
Blob:
A binary large object (BLOB) is a collection of binary data stored as a single entity. Blobs are typically images, audio or other multimedia objects.

FormData:
To send multipart form data with Axios, you need to use the FormData class. 

    // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
    this.$refs.cropper.getCroppedCanvas({width: 1280, height: 720}).toBlob((blob) => {

                  var data = new FormData();
                  data.append('cropped_picture', blob, 'cropped.png')
                  ...
                  axios.post(load_url,data, {
                          headers: {
                         'Content-Type': 'multipart/form-data'
                         }}
                      ).then(response => {
                      …
                     }).catch(error => {
                     console.log(error)
                     })
          /* second parameter mime_type toBlob set image/png as default */
          } /*, 'image/png' */)


You can see an example on my website [Rollideo: video generation from a text](https://rollideo.com/). This feature allows the user to choose his own picture to generate a video.
How to take notes/to-do list in terminal itself? Vim or spacemacs or something else?
Tags: discuss, vim, emacs, watercooler
Published: 2021-10-31 07:13:16

When you come across a issue and solve and try to document it for future or even make a to do list of in terminal ? what do you use? I have been trying spacemacs but having trouble getting used to the point where I can use it in my everyday routine.Im a vim (not a hardcore vim user) but my most work does revolve working in terminal so wanted to make my documentation /schedule in terminal rather than opening a new app.
Can vim be used for this?
Single Folder Git clone?
Tags: git, inthirtyseconds
Published: 2021-10-31 06:58:11

How do you clone a single folder from a repo?

1. `git clone --no-checkout <link>`
2. `cd <cloned folder>`
3. `git sparse-checkout init --cone`
4. `git sparse-checkout set <Folder Name>/`
5. `git checkout`

Voilà !
My Experience at HackNitr 3.0 😄
Published: 2021-10-31 06:30:30

> First of all if you don't know what is HackNIR 3.0 you can check my other blog bellow: 

https://dev.to/mahich123/what-is-hacknitr-30-2enf 

So, I attended this hackathon as a beginner. So it started with workshops they conducted live sessions. Through sessions they provided various kinds of things new tech solved issues and many more. Then conducted min-event we played games from there got to know many peoples communicated with them learned from them. We did Bob Ross painting also and my painting was 😅. 

So this hackathon was really beginner friendly. Hackathons are fun we get chance to meet new people. Get to know what to they do , And lot's of new thigs. 
> So at the end it was really amazing day 😀 .
View Github Repo Without Downloading in a Structured Manner!
Published: 2021-10-31 06:24:52

**Hey folks!**

I'm back with a time-saving tip, We all know that we can view our Github Repo code on GitHub but it is not convenient at all we have to move back and forth to view the code properly. So here is a simple trick to simply view your code in a structured manner without having to download the entire repo.
Go to any github repo like: 
`https://github.com/shivamkapasia0/Github-Badge-Generator`
and  **add `1s` in between github and .com** and your link would become like `https://github1s.com/shivamkapasia0/Github-Badge-Generator` 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tjdn7tce6q2ouhgdyl4.png)
and **hit enter to see the magic.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aunl6srtcudo0ztnh8g.png)

>  Note: This is not officialy supported by github. so it would be recommended to use this only on public repos.

*what's your thought on this ?*
Developer Profile Packages - Why and Why not
Tags: discuss, powerfuldevs
Published: 2021-10-31 06:14:49

Maybe you've heard.... or maybe not ? 

I just realized a thing. 
You can make your profile as a package. And not just a package, a dev profile on pypi (pip) or npm. Virtually any package manager. 

By making a cli app in python (pip), .NET (nuget) or node (npm), and globalizing it, you can make your app spit out information about you when its called. 

### Why

Well, its just a cool and creative way to show people your dev profile. 


### Why not

Some times, It just isn't cool. If you make a package with the name as a username that's related to a actual package, you're in trouble. For example, there is this package called pyplot in python but to install it, you would run `pip install plot` and not 'pip install pyplot'. Any new developer who wants to just download code and run would find it tough when the error says to install pyplot. Naturally, the developer would run `pip install pyplot` and then, you someone made a dev profile package called pyplot (might be their username?), the new dev would get further confused when the code doesn't work. 

### Workaround 

You could perhaps name your package as **profile-pyplot** instead of **pyplot** which doesn't confuse people but some (bad?) developers would not listen to this and continue confusing people. 

"_With great power, comes great responsibility_"
                 - A nice developer.
String To Array In One Line : JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2021-10-31 05:43:31

Hey folks!
we can easily convert String into an array by using [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) `(...)` :

```Javascript
const string = 'Shivam Kapasia';
const array = [...string];
console.log(`${array}`); // S,h,i,v,a,m, ,K,a,p,a,s,i,a
```

> Note : The array will also include space, but if you don't want to store space in array first remove space from string then use spread operator.

_What’s your preferred way to convert string into an array ?_
How to practice more hands on AWS and partner services ?
Tags: beginners, tutorial, aws, devops
Published: 2021-10-31 05:00:58

"I hear and I forget. I see and I remember. I do and I understand."
 
I always like to do more hands on practices which help me remember and understand better. Below has many good and easy to follow workshops for many AWS and partner services:
1/ https://workshops.aws/ (100 workshops and growing)
2/ https://awsworkshop.io/ (many partners here) 
3/ https://awesome-aws-workshops.com/ (Unofficial Curated list of awesome workshops found around in the internet.)

Just remember to do the last CLEAN UP step to delete those resources you do not need AFTER the workshops. I did a workshop a few months ago with Sysdig and EKS but forgot to delete IGW (which was to ship the EKS metrics, data to Sysdig monitoring), so a few more dollars till my billing budget alerts showed up.
Swap two variables without a 3rd : JavaScript
Tags: javascript, programming, 100daysofcode, coding
Published: 2021-10-31 04:50:39

## Destructuring assignment
Destructuring assignment (a feature of [ES2015](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015)) lets you extract items of an array into variables.
```Javascript
let firstName = 'Shivam', secondName = 'Kapasia';
[firstName, secondName] = [secondName, firstName];
console.log('firstName: ' + firstName); // Kapasia
console.log('secondName: ' + secondName); // Shivam
```

you can also swap two arrays like :
```Javascript
let array1 = [1,2,3], array2 = [3,4,5];
[array1, array2] = [array2, array1];
console.log(`${array1}`); // 3,4,5
console.log(`${array2}`); // 1,2,3
```

I like the destructuring approach because it’s short and expressive: swapping is performed in just one statement. It works with any data type: numbers, strings, booleans, objects,arryas etc.

I recommend swapping variables using a destructuring assignment for most of the cases.

_What’s your preferred way to swap variables?_
Lab #6: Experience a mature SSG project
Tags: javascript, beginners, programming, webdev
Published: 2021-10-31 04:48:14

## Docusaurus way too good for hosting docs


This week lab, we got a chance to play around with Docusaurus. You can check out my [Docusaurus](https://github.com/BeAmazedVariable/docusaurus_testing/tree/master) and GitHub Pages hosted [site](https://beamazedvariable.github.io/docusaurus_testing/). It was fast and straight forward to set up a Docusaurus project, the [doc](https://docusaurus.io/docs/installation) is crystal clear. During the time exploring Docusaurus, I want to have full markdown support for my project and syntax Highlighting for code blocks base on what Docusaurus did. After I was allow to use a proper library to have full markdown support for my website, I found [markdown-it](https://www.npmjs.com/package/markdown-it) a library that fully help my project to implement full makrdown support.
My code transform to this:

```javascript
var md = require('markdown-it')();

const heading1Markdown = (content: string): string => {   
  return md.render(content);
  };

```
You can check out all my change throught [051a53](https://github.com/BeAmazedVariable/TS-SSG/commit/051a53ccf4a35ee47a03760cc0fb406bcce5bdf9). I'm in the progress to have my website support hilighting for code block base on the programming language prefer to [issue-14](https://github.com/BeAmazedVariable/TS-SSG/issues/14) soon.  

I also update the doc and resolve a conflict in my package.json where I used to have 2 typescript package that install and causing some bug in my code

### Hosting Docusaurus to GitHub Pages

When I try to host my Docusaurus project to GitHub, my website display only my README.md file but thankfully for a detailed doc on how to [deploy Docusaurus project to GitHub Pages](https://docusaurus.io/docs/deployment#deploying-to-github-pages). I was able to make a few change to my config files which help me to host my Docusaurus project 

```javascript
const config = {
  title: 'tpmai',
  tagline: 'Dinosaurs are cool',
  url: 'https://BeAmazedVariable.github.io',
  baseUrl: '/docusaurus_testing/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'BeAmazedVariable'  , // Usually your GitHub org/user name.
  projectName: 'docusaurus_testing'}

 module.exports = config;


```
My 3rd Hacktoberfest PR
Tags: hacktoberfest, javascript, opensource
Published: 2021-10-31 04:12:28

For my third pull request I was actually able to checkout a project that previous students of my open source class made in this class called [Telescope](https://github.com/Seneca-CDOT/telescope). Telescope is a web server and client application that is used to keep track of Seneca students' blogs; just like the one you are reading right now! Since we were eventually to contribute to the Telescope project later in the semester, I figured I should get a bit of a head start and become a little familiar with the project.

For this [issue](https://github.com/Seneca-CDOT/telescope/issues/653) there was some problems with the validity of specific feeds. However, this issue was not easily solved because the error logging was not working. Thus, for this issue I had to help add error logging for when feeds were not being parsed. This task while is a simple task on paper was still a bit difficult for me to understand. I think my biggest hurdle for this issue was to follow along with what everything was doing. The Telescope project is a fairly large project that has a lot of parts to it so it was really easy for me to feel a bit overwhelmed. However, one of the developers humphd (who is also my professor :winkyface:) made it much easier on me by directing me to which file I would be modifying and what I should take a look at. From there I still wanted to get a bit of an understanding of what was going on so I took the time to read through the code and other files it required from. Despite me feeling very lost at first I was able to understand what I needed to do and managed to make a good [pull request](https://github.com/Seneca-CDOT/telescope/pull/2388). *Aside from a little mistake where I missed a part of the code (Whoops!)* It was a simple fix where I needed to modify the signature of a function to allow error messages and then store/log the error message. 

While it was a quick and easy fix, the process to get there took a while because I had a bit of trouble following along with the code. But after taking the time to read through I was able to figure out what was needed. So after this PR I think I feel a bit more confident in viewing larger projects, its important to remember that you are not expected to know the ins and outs of the entire project. Just reading and understanding the necessary components is all you really need, and you can always ask the developers for help where to look.
Use tsconfck to verify the final configuration of tsconfig.json
Tags: tsconfig, typescript, check, tsconf
Published: 2021-10-31 04:06:55

When you're touching a typescript project, you may want to see what your tsconfig will look like in the end. Currently, the typescipt package does not provide an API for checking.

In vite, I used a project called `tsconfck` to get the final configuration of tsconfig.json, so let's touch it.

https://github.com/dominikg/tsconfck

Prepare the following tsconfig file and execute `parseNative` from js.

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "baseUrl": "src",
    "declaration": true,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "example/*", "dist/*"]
}
```

```ts
import { parseNative } from 'tsconfck';

export const main = async () => {
  const tsConfigFile= await parseNative('index.ts');
  console.log('tsConfigFile :>> ', tsConfigFile);
};

main();
```


You can get the final configuration file as an object.
You can get a result similar to the result output below in the typescript code.
https://github.com/microsoft/TypeScript/blob/95ef2a503dd0cae9f106948cccee8a041078a472/src/executeCommandLine/executeCommandLine.ts#L529

```ts
tsConfigFile :>>  {
  tsconfigFile: '/Users/j1ingzoue/projects/tsconfck/tsconfig.json',
  tsconfig: {
    compilerOptions: {
      target: 'latest',
      module: 'commonjs',
      baseUrl: '/Users/j1ingzoue/projects/tsconfck/src',
      declaration: true,
      outDir: '/Users/j1ingzoue/projects/tsconfck/dist',
      esModuleInterop: true,
      forceConsistentCasingInFileNames: true,
      strict: true,
      skipLibCheck: true
    },
    exclude: [ 'node_modules', 'example/*', 'dist/*' ]
  },
  result: {
    options: {
      target: 99,
      module: 1,
      baseUrl: '/Users/j1ingzoue/projects/tsconfck/src',
      declaration: true,
      outDir: '/Users/j1ingzoue/projects/tsconfck/dist',
      esModuleInterop: true,
      forceConsistentCasingInFileNames: true,
      strict: true,
      skipLibCheck: true,
      configFilePath: '/Users/j1ingzoue/projects/tsconfck/tsconfig.json'
    },
    watchOptions: undefined,
    fileNames: [ '/Users/j1ingzoue/projects/tsconfck/index.ts' ],
    projectReferences: undefined,
    typeAcquisition: { enable: false, include: [], exclude: [] },
    raw: {
      compilerOptions: [Object],
      exclude: [Array],
      compileOnSave: false
    },
    errors: [],
    wildcardDirectories: { '/users/j1ingzoue/projects/tsconfck': 1 },
    compileOnSave: false
  }
}
```
Released opensource web CAD App - Chokoku CAD v2.2
Tags: javascript, webdev, github, opensource
Published: 2021-10-31 03:25:56

Code on Github: https://github.com/itta611/ChokokuCAD
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvyn015j5hbkuf5q132u.png)
Month Post #1
Tags: monthpost, python, blog
Published: 2021-11-09 21:53:04

---
title: Month Post #1
published: true
date: 2021-10-31 00:00:00 UTC
tags: monthpost,python,blog
canonical_url: http://gabubellon.me//blog/month-post-1
---

## um post mensal para todos ~~governar~~ lembrar do que fiz…

No meio do fervor da [Python Brasil 2021](https://2021.pythonbrasil.org.br/) em um momento de conversa com o [@marcorougeth](https://twitter.com/marcorougeth) e [lendo](https://rgth.co/pt-br/blog/oss-atualizacao-1/) um post no blog dele (dica LEIA o blog dele, vale muito o pena!) gostei da ideia de ter esse foco mensal em escrever. Vou mudar o conceito aqui e criar uma estrutura de “Month Post” (Post Mensal) trazendo alguns pontos de quero trazer, mas não necessiaramente sendo algo técnico e nem sem algo ligado as comunidade de atuo. Também pretendo usar esse post como um “todo list” sobre itens que gostaria de abordar, podendo ser um post que irã sendo evoludo dutante o mês. Pois bem, pontuações feitas, vamos ao pontos do mes

## 2021 - outubro

* * *

- Bots e automatizações [todo: posts sobre];
- Gerencimento da empresa contratada de libras;
- Mediação da mesa de [Educação Não Formal](https://www.youtube.com/watch?v=4xrgUjNRqK4);

* * *

- Mudança e customização de tema [todo: post sobre]

* * *

- Post sobre a Python Brasil 2021
- Organizar a [wiki](/wiki)
Hacktoberfest PR 2
Tags: opensource, hacktoberfest, typescript
Published: 2021-10-31 03:22:27

Over the Hacktoberfest I had been slowly working on finding issues and completing some PRs from the open source community. Similar to my first PR I did I found another fairly simple typescript issue to help contribute to for the [toynet-react repo](https://github.com/Project-Reclass/toynet-react). This [issue](https://github.com/Project-Reclass/toynet-react/issues/248) was a pretty simple one, I just needed to fix the header of a component to be the proper sizing. While working on this one I got the chance to learn about the component library [chakra](https://v0.chakra-ui.com/). Chakra is a really cool component library for React applications that provides a whole bunch of building block components to easily make a React application. It makes creating different components really easy and looks very clean as well. There are a bunch of easy to use customizations for each component and seems pretty flexible as well. This library is definitely something I wanna remember to try out when I am working with React. So thanks to chakra my solution was very simple, I just needed to use chakra's Heading component to fix the header for the component. You can checkout the PR [here](https://github.com/Project-Reclass/toynet-react/pull/250).