teleren/devto huggingface dataset:
Using Gitpod to create a PR
Tags: productivity, git, vscode, gitpod
Published: 2021-10-24 23:02:21

## Gitpod Workspaces

[Gitpod](https://www.gitpod.io/) hosts **workspaces** for developers.

Think of each [workspace](https://www.gitpod.io/docs#your-computer-in-the-cloud) as your own Linux container in the cloud, with a fully functional development environment, including:

- A clone of your git repo and your git working tree - the files you're working on.
- The tools you need while coding - compilers, SDKs, runtimes.
- Your editor - the default is [VS Code](https://www.gitpod.io/blog/openvscode-server-launch) + extensions - reachable through a browser.
- Shell access to run commands in the container.

Instead of laboriously maintaining your local development environment with everything you need, you simply open a new workspace every time you start working on a new project or branch.

## PR for the Gitpod website 

Here's how I created a PR for the [Gitpod website](https://www.gitpod.io/) in just a few minutes.

Starting from the [issue](https://github.com/gitpod-io/website/issues/1139), I opened a new workspace in Gitpod by prefixing the GitHub url like so: `https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139`. 

That [url](https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139) opened the workspace in my browser.

![Screenshot of full VS Code window in Gitpod workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9wfi1v58qcgdif4udht.png)

Running `git branch -vv` in a workspace terminal showed that git was already set to a new branch, conveniently named with my username and the description and id of the GitHub issue.

![Screenshot of VS Code terminal in Gitpod workspace showing new git branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxbhlx435as1al4rs3xy.png)

The workspace started up with npm modules already installed by a [prebuild](https://www.gitpod.io/docs/prebuilds).

The repo was also [configured](https://www.gitpod.io/docs/config-gitpod-file) to start a dev server listening on port 3000 in the workspace container. The open ports can be seen in the Remote Explorer sidebar on the left.

![Screenshot of VS Code Remote Explorer sidebar in Gitpod workspace showing open ports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xrp8wcp9dk4welqqy03.png)

I used the `Open Browser` icon to open the website in another browser window, and watched my changes taking effect each time I modified the code. 

Finally, I pushed a commit with my changes on the new branch to GitHub, and proceeded to create my PR as usual. No localhost interaction other than running my browser was required.

> This blogpost was written from a Gitpod workspace.
> 🚀
LitElement Slot Tags
Published: 2021-10-24 22:56:50

#Intro
A '<slot>' tag is an HTML tag that allows there to be a placeholder inside a web component where you are able to place your own markup. It does this by creating separate DOM trees and then when the code is being run, presents them together. 

#In Use
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci6sl6neuhd3z406bsqh.png)
 
My team and I are using slots within our web component of a card. The comp for the web component is show above. Our component is broken up into four parts:
- Icon
- Banner/Header
- Card
- Scaffold

We are using the '<slot>' tag help keep the different parts of the card flexible, like the header, sub-header, and body content so this web component can be reusable. To do this my team simple uses the name attribute as the parent element and the slot attribute as the child element. Below I have provided the link to my teams repo, so you can see examples of the '<slot>' tag in action. It is not completed yet, but progress is being made to make it as good as it can be.
 
**Repo:**https://github.com/runtimeErrorsMadeEasy/project2
Maybe one day ... 
Published: 2021-10-24 22:53:17

## table of content 


* [ Nextcloud setup with docker ](#chapter-1)


### Nextcloud setup <a name='chapter-1' ></a>

helpful url:
https://www.cloudsavvyit.com/12476/how-to-self-host-a-collaborative-cloud-with-nextcloud-and-docker/

```
docker run -d -p 8082:80 nextcloud
```

link a database container :
```
--link my-sql:mysql 
```
and then use the mysql as the database host on the setup.





































?
Solving FizzBuzz
Tags: javascript, algorithms
Published: 2021-10-24 22:50:45

In this post, I will outline one way to write a FizzBuzz algorithm in JavaScript. There are multiple ways to solve this problem, and this is just the most basic solution and does not emphasize succinctness. Feel free to comment with your favorite solution to this challenge!  

Here goes... 

The function should print all numbers from 1 - 100, except:
1. For every number divisible only by 3, it will return "Fizz" 
2. For every number divisible only by 5, it will return "Buzz" 
3. For every number that is divisible by both 3 AND 5, it will return "FizzBuzz"

**Step 1. Create a for-loop.** 
In this example, the loop will count from 1-100. 

```
for (let i = 1; i <= 100; i++) {
}
```
**Step 2. Create if..else statements inside the loop.** 
The first will check if the number is divisible by both 3 and 5. We do this first because if we checked for either 3 or 5 first, either Fizz or Buzz would get returned as soon as the condition is satisfied and the function would not continue to check the other conditions. 

```
if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
}
```

The following two will check if the number is divisible by 3, and 5. 

```
if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
} else if (i % 3 === 0) {
    console.log("Fizz");
}
else if (i % 5 === 0) {
    console.log("Fizz");
}
```

Lastly, if the number isn't divisible by 3 and/or 5, the function will print the number. 

```
if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
} else if (i % 3 === 0) {
    console.log("Fizz");
}
else if (i % 5 === 0) {
    console.log("Fizz");
} else {
console.log(i);
}
```

The full code should look like this: 
```
function fizzbuzz(){
  for (let i = 1; i <= 100; i++){
    if (i % 3 === 0 && i % 5 === 0){
      console.log("FizzBuzz");
    } else if (i % 3 === 0){
      console.log("Fizz");
    } else if (i % 5 === 0){
      console.log("Buzz");
    } else {
      console.log(i);
    }
  }
}
```
Sideloading WSA on Windows 11 Stable
Tags: windows11, wsa, linux
Published: 2021-10-24 22:40:04

#### Downloading WSA
Download WSA preview from here:
https://server.deltaonealpha.workers.dev/MicrosoftCorporationII.WindowsSubsystemForAndroid_1.7.32815.0_neutral___8wekyb3d8bbwe.Msixbundle

#### Installing WSA
Then install it using Powershell with the command:
```add-appxpackage -Path "<path to the file>"```


Downloading and installing app should be through amazon store but for non-US countries its not available in the preview, so you will have to manually download an apk and install it using "adb install".


#### Installing ADB
Install ADB as instructed here: https://www.xda-developers.com/install-adb-windows-macos-linux/


#### Connecting ADB to WSA
Open the Windows Subsystem for Linux app and enable developer mode. An IP address and port will be shown, use this to execute the ADB command:
```adb connect <IP address:PORT>```


#### Installing with "adb install"
Now simply open Windows PowerShell or CMD and type
```adb install "<path to APK file>"```

That's it, and your APK will be installed, all you need to do now is open Start and find your installed app in the list!

NOTE: Make sure WSA is running. To run WSA open the app and select open "File".
Is there a way to have raw-types in (modern) C++?
Tags: cpp, c, help, watercooler
Published: 2021-10-24 22:29:33

##What are "raw" types?  
[Raw types](https://docs.oracle.com/javase/tutorial/java/generics/rawTypes.html)<sup>(in Java)</sup> is a type who has type-arguments (generics/templates\*), but whose type-arguments are not specified in a declaration.
Consider the following (Java) code:  
```java
class NeverRaw1 {
    NeverRaw1(int i) { this.value = i; }
    int value;
}

class PossiblyRaw<T> {
    PossiblyRaw(T v) { this.value = v; }
    T value;
}

class NeverRaw2 extends PossiblyRaw<int> {
    NeverRaw2(int i) { this.value = i; }
}

// ... Some code later...

// This isn't raw because a type argument is specified.
PossiblyRaw<int> notRaw = new PossiblyRaw<>(10);
// This IS raw because none are specified
PossiblyRaw uncooked = new PossiblyRaw<int>(10);

// Invalid. Mismatched types.
notRaw = new PossiblyRaw<float>(10.56);
// Valid. No type mismatch because none is specified.
uncooked = new PossiblyRaw<float>(10.56);
```

## Why would you want types?  
So, the first thought that probably popped into your head is "Hey. Isn't that not type-safe?", and to that, I say "Yes. It can be unsafe at times. But then it can also be utilized.".  
So? Where can I use this?
Well, here's where I'm stuck. - I'm implementing a `Token` type for Janky, and I want to have a `parse(std::string|char*)` function that returns an array of `Token`.
How is this a problem?
It's a problem because even if you want to return an array of something, you must define the template arguments.
My `Token` type is written as such:  
```cpp
template<typename T, T v> struct Token {
    T              value = v;
    TokenType      type = TokenType::_UNASSIGNED;
    unsigned short col = 0;
    unsigned short ln = 0;
};
```
And I can't create any abstraction, since all pieces of this structure are important to have. -- And because members aren't preserved when you say a piece of data is of its parent type.

## So...  
What's the best solution here?


<h1><b>Thanks!<br/>Cheers!</b></h1>
MinIO Client Kullanımı
Tags: aws, minio, s3, tutorial
Published: 2021-10-24 22:01:04

MinIO, Amazon S3 uyumlu bir bulut depolama sunucusudur. Bu, Amazon S3 ile konuşacak şekilde yapılandırılabilen uygulamaların MinIo ile konuşacak şekilde de yapılandırılabileceği anlamına gelir. MinIo  fotoğraflar, videolar, günlük dosyaları, yedeklemeler ve container/VM imajları gibi yapılandırılmamış verileri depolamak içinde  kullanılabilir. MinIO Client, adından da anlaşılabileceği gibi MinIO sunucusundaki depolama hizmetine ulaşarak işlemler yapmak için geliştirilmiş bir yazılımdır. Komut satırından çalışmaktadır. Bu yazı nasıl kullanılacağını örneklerle anlatmaktadır.

Öncelikle dosyayı indiriyoruz.

```bash
curl -O https://dl.min.io/client/mc/release/linux-amd64/mc
```
veya

```bash
wget https://dl.min.io/client/mc/release/linux-amd64/mc
```
Ardından dosyaya çalıştırma izini veriyoruz.
```bash
chmod +x mc
```
MinIO server için çalışabildiği gibi diğer bulut tabanlı sistemlerle(Amazon S3, GCS) de çalışabilmektedir.

Amazon S3 için kaynak ekleme
```bash
mc alias set s3 https://s3.amazonaws.com BKIKJAA5BMMU2RHO6IBB V7f1CwQqAcwo80UEIJEjc5gVQUSSx5ohQ9GSrr12 --api S3v4
```

MinIO için kaynak ekleme
```bash
mc alias set minio http://192.168.1.51 BKIKJAA5BMMU2RHO6IBB V7f1CwQqAcwo80UEIJEjc5gVQUSSx5ohQ9GSrr12 --api S3v4
```

Google  Cloud Storage
```
mc alias set gcs  https://storage.googleapis.com BKIKJAA5BMMU2RHO6IBB V8f1CwQqAcwo80UEIJEjc5gVQUSSx5ohQ9GSrr12
```

Hangi sistemi yapılandıracak isek yapılandırıp ardından aşağıdaki gibi çalıştırmaya başlıyoruz.

##Amazon S3 içerisindeki dosyaları listeleme

```bash
$ ./mc ls s3
[2021-04-15 01:05:56 +03]     0B deneme/ 
[2021-10-19 10:42:12 +03]     0B emre/ 
[2021-04-15 12:08:37 +03]     0B kova/ 
[2021-03-13 17:35:06 +03]     0B test/
```

##Amazon S3 bucket oluşturma


```bash
$ ./mc mb s3/emre 
Bucket created successfully `s3/emre`.
```
##Amazon S3 bucket silme 

```bash
mc rb s3/mybucket --force
Bucket removed successfully ‘s3/mybucket’.
```

##AmazonS3 içerisine dosya upload

```bash
./mc cp debian.iso s3/test
```



Daha fazlası için:
https://docs.min.io/docs/minio-client-complete-guide.html
Top 3: Packages that you may love
Published: 2021-10-24 21:53:40

## 1. Express Js
> installation
```
npm i express
```
### OR 
```
yarn add express
```
> usage
```js
const express = require("express")
const app = express()
app.get('/', (req, res) => res.send("Index Page"))
app.listen(3001)
```

## 2. Multer
_Makes file uploading super easy_
```
npm i multer
```
> frontend
```html
<form  enctype="multipart/form-data" 
       action="http://localhost:3001/upload" 
       method="post">
          <input type="file" name="uploaded file">
          <input type="text">
          <input type="submit" value="Submit!">
</form>
```
> backend (javasript)
```js
const express = require("express")
const multer = require("multer")
const app = express()
const storage = multer.diskStorage({
    destination : (req, res, cb) => {
        cb(null, './uploads')
    }
})
app.post('/', multer({storage:storage}), (req, res) => {
    console.log(req.file, req.body)
})
app.listen(3001)
```

## 3. nodemon
_Actuallly this just helps you to restart your server evrytime you change something_
> installation
``` 
npm i nodemon --save-dev 
```
### OR
```
yarn add nodemon --dev
```
> usage
```
nodemon server.js
```
Reports of a problem #1
Tags: python, beginners, programming, algorithms
Published: 2021-10-24 21:34:08

This is my first post ever in dev.to and I always wanted to report the struggling about solving challenging problems, that kind of problems that just test your logic to do stuff, and I also wanted to kick off the moss from my Python abilities.

To achieve that I'm starting this new thread "Reports of a problem", which I'll report all steps until i get the final solution of a specific problem.

So, if anyone has different solutions of the problems, tips of how can I make it better, please let me know and we discuss about it.

I'll be solving problems from [Beecrowd](https://www.beecrowd.com.br/judge/en). It has lots of problems divided by categories and difficulties. Excellent site for practicing, BTW.

So, the first problem, as I'm returning to python now is a not very difficult, random chosen one: [To Carry or not to Carry] (https://www.urionlinejudge.com.br/judge/en/problems/view/1026)

Basically, there's a story telling that a student created a 32-bit adder, but the carry-on bit was broken, so the sum 4 + 6 = 2.

And, for that, he converted both numbers to 32-bit and, as the carry-on bit was broken, the final 32-bit result was 2.

The idea is to implement this broken adder.

So, my idea was to reproduce exactly what he did, convert both numbers to 32-bit and do the sum but, to do that, there's a lot of casting and looping, etc, as you can see [here] (https://github.com/DouglasParanhos/Problems/commit/41fe3fe8c418ae27a15111a5b4ded60a200e4792#diff-8e349e7b73cb742144cf508b09f558f0fc8719e0b1a8bf39fa65b18ba687d414).

This solution worked, but the problem set the time limit as 3s, and this solution took more than that to run, due these loops and converting.

Then, I decided to think the whole problem again and realised the obvious, all that story told was to hide that all the student "created" was a [Xor](https://en.wikipedia.org/wiki/XOR_gate). Finally, a [much more simple](https://github.com/DouglasParanhos/Problems/blob/master/URIOnlineJudge/Python/1026.py) solution was created, and worked successfully.

It's always, always important to think straight about the problem even before considering start coding, it will spare you a lot of pain.
Reusable image before and after patterns.
Tags: codepen
Published: 2021-10-24 21:13:16

---
title: Reusable image before and after patterns.
published: true
description: 
tags: codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbux9vkpspnekx8a883q.png
---

> As I have a facebook group where people share images and sometimes a before and after view of a manipulated can be inspirational, I wanted to create code for the web to easily add such functionality to a webpage.

So I just want to add some code which will give a simple before and after comparer component on a webpage. I did a simple one which does the job:

{% codepen https://codepen.io/netsi1964/pen/JjyKJpN %}

You can see the code used in the above embedded pen, I will not go into this first version.

It is good and solves the job at that moment, but I want to take it further and turn it into first *a class* which can be imported anywhere and make it even easier to reuse.

## ES6+ Classes BeforeAndAfter
The thing with having a JS class is that you do not need other than the code, it will contain all HTML, CSS and JS and you use it simply by creating a new instance of it

So let me see... What would I like that class to be able to offer? Here is what comes into my mind - this is how it could look like:

`const BA = new BeforeAndAfter(selector, imgUrlBefore, imgUrlAfter, text);` 

So to get from the pen above to this I create a new fork of it where I have pulled in all the HTML and CSS into a new class `BeforeAndAfter` - you again can look for the HTML, CSS and JS in the result - here I have used another set of images here:

{% codepen https://codepen.io/netsi1964/pen/yLogqGQ %}

You can look at the javascript class here: https://codepen.io/netsi1964/pen/yLogqGQ

## The webcomponent/customElement image-before-after

Together with my colleague Nanna Bech Munkholm we create a NPM package [image-before-after](https://www.npmjs.com/package/image-before-after) which can easily be used in any web project. You can see how easy it is to import to any webpage using `import` which will give you instant access to the new customElement `image-before-after`. I have created a pen on codepen: [CodePen Home
CustomElement image-before-after
](https://codepen.io/netsi1964/pen/XWaepep)

{% codepen https://codepen.io/netsi1964/pen/XWaepep %}
Páginas para Elementos CSS
Tags: spanish, css
Published: 2021-10-24 20:41:25

A continuación dejo una lista de algunas paginas que nos proporcionaran elementos CSS útiles para el desarrollo de nuestros sitios y proyectos CSS.

## [SVG wavey](https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections)

![SVG wavey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bxyxyvyj2vqjx2pvw6g.png)

## [Box Shadow](https://www.cssmatic.com/box-shadow)

![Box Shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z8h8pzhzfpw24tfngy2.png)
 
## [Animated.css](https://daneden.github.io/animate.css/)

![Animated.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5h43ttziv7apslkyw04.png)

## [Image Hover CSS](https://imagehover.io/)

![Image Hover CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5v110ek2i1e4qpwxezj.png)

## [Loaders CSS](https://loading.io/css/)

![Loaders CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7in0ircst5umd76wld19.png)

## [Gradientes](https://uigradients.com/)

![Gradientes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/earsqn02zy0qlbn51u2a.png)

## [Clip-Path](https://bennettfeely.com/clippy/)

![Clip-Path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lzw1mtljm7102nb4x9f.png)

## [Web Gradients](https://webgradients.com/)

![Web Gradients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gqlrd7yf1a5tj7af0zg.png)

## [Tridiv](http://tridiv.com/)

![Tridiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcq4dcoii9zevw6pk5t9.png)

## [Neumorphism](https://neumorphism.io/)

![Neumorphism](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3x1bg4lq4da37lmlmli.png)

## [Glassmorphism](https://glassmorphism.com/)

![Glassmorphism](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lnsp0sclrfv4ukgidbe.png)

## [Haikei SVG-PNG](https://app.haikei.app/)

![Haikei SVG-PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ago16wri6fhc1xyt7y8v.png)

## [CSS Gradient](https://cssgradient.io/gradient-backgrounds/)

![CSS Gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r05v5mp2fn2sweuhqre7.png)
Much ado about Slots
Published: 2021-10-24 19:50:46

I've been working on developing a so-called "learning card" lately and one of the ways I can *finally* get it to both be functionally sound and look visually appealing is by using slots. The <slot> tag in HTML is an element that lets us create separate DOM trees with our own custom elements and bring these trees together. Below is a basic example of what this looks like in HTML: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z3gweutvp0fpuuxlql5.png)

I've been using slots similar to this to try and style the "learning card" in different ways. Below is an example of the card I am working on, but keep in mind this card is subject to change over time: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8199pfmruf4qt1t1d2m4.png)

To make this project a bit easier to manage and to get a good overview of how elements within a card interact with each other I've seperated this card project into 4 different parts: An icon element, A card scaffold, A banner with a header, sub header, and icon, combining scaffold and icon into one card. A bit easier said than done but this is where slots come in... 

By using Slots we can pass HTML into the header, sub header, and body of the card to style it in ways that we want. The first thing I did was the header: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z265nb30ttti1836663.png)
This is just a basic example of the header title and two slots for our header and sub header that allows us to pass HTML into these slots. 

Now that I have a sub header and header slot for my card I can focus on putting icons into the Card and putting content into the card body. Below is an example of what code I used to render my icons on the card: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvhkkx2oy3nf3z22m2a7.png)

This allows me to put custom icons such as a lightbulb, question mark, and beaker on the card to make it more stylish and visually appealing. 

Getting content into the body of the card was a little bit more difficult, but I was able to get some bullet points into the card with this code below: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga0b73pwsuo40chpup6n.png)

Now every time I click on the card banner the body content displays two bullet points: 
*Plz 
*Work 
Thankfully my plea was answered and this code ACTUALLY WORKED and now I can actually put some meaningful content into the body of the card other than "Plz work".   

Overall my card is still very much a work in progress and with all of the success I've discussed in this post I've had just as many setbacks, errors, and issues that I will likely continue to run into until this card is finalized. If you want to see how I am progressing with the "learning card" you can see my progress here: https://github.com/TheKodingKrab/project-two
Divtober Day 24: Smelly
Tags: codepen, divtober, css, art
Published: 2021-10-24 19:40:48

---
title: Divtober Day 24: Smelly
description: My entry for divtober day 24: smelly. A smelly trash can.
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owjvvhwqrrrxr5tgv6ro.png
---

The word of the day for divtober is "smelly." So here's a smelly trash can with boxes and bags around it:

{% codepen https://codepen.io/alvaromontoro/pen/VwzPRVa %}

----

Also, childish me did another demo yesterday for divtober #23 (loud) and #24 (smelly) together... it is tongue-in-cheek and _inappropriate_, and I'd recommend you check your speakers before you click on it ;)

It uses a single element (`<audio>`) and it plays the sound on click (I had to cheat a little and add some inline JavaScript code: `onclick="this.play()"`). The controls are hidden on desktop, although some browsers will display them (looking at Safari/Chrome on iOS). Also, it is animated on Chromium providing some movement on focus.

Without further ado, here is an _inappropriate_ demo for divtober #23 and #24:

{% codepen https://codepen.io/alvaromontoro/pen/dyzNVVw %}