teleren/devto huggingface dataset:
Starting in the Middle
Tags: googlecloud, ubuntu
Published: 2020-07-13 06:11:05

I'm in the middle of building a fun little c64 disk catalog app for myself. The part which currently has my attention is handling the disk uploads. I have a react front end that's uploading the images to my google cloud storage bucket. I want to validate the disk image and get the listing of files for the disk. That's the start of today's adventure.

There's already software called `c1541` that's bundled with the vice emulator AND it's already available for ubuntu. Yay! However, this means that I'm doing a google run instead of a google function. Functions can trigger themselves on a file upload, but run needs to pipe through pubsub. Bummer! Well, kind of. I get to play with more toys so that's fun. It's probably faster to do the port later and get this done now. 

In my ubuntu 20 VM (host still running 18 until I get the backup and other prep done), I run through the [install steps](https://cloud.google.com/sdk/docs#deb) and have somehow popped over my 10GB fixed disk size! No clue if the apt install of the SDK worked, but I'm assuming that it didn't.

I found a [quick tutorial](https://www.linuxbabe.com/virtualbox/how-to-increase-virtualbox-disk-size-for-fixed-size-disks) for solving a disk that's too small. One thing that should be more clear is that the VM needs to be turned off completely before the storage can be changed. It can't just be in a saved state. This makes sense when you look at the whole process, but if you're just stepping through then you might run into this problem. The other thing that's obvious after a second, but can cause a stumble is to make sure you resize the extended partition that holds your partition so that you **can** resize your partition larger.

After fixing the partition and finishing the gcloud SDK install (on this newish ub20 install, I had to `sudo apt install curl`), I appear to be up and running with gsutil. Let's get this bucket wired.
Multiple Git identities
Tags: git
Published: 2021-02-24 12:17:20

---
title: Multiple Git identities
published: true
date: 2020-07-13 06:10:05 UTC
tags: git
canonical_url: https://maarten.mulders.it/2020/07/multiple-git-identities/
---

Everything is code, and code is everywhere.For me, this means I put more and more stuff into version control.Whether it is infrastructure descriptions, documentation, software or this blog, I always store it in a Git repository.But sometimes this gets dirty, because you accidentally forget to change your Git user details.

---

[Continue reading...](https://maarten.mulders.it/2020/07/multiple-git-identities/)
One instance for various service types in Microsoft Extensions DI
Tags: csharp
Published: 2020-07-13 04:22:20


Recently moving away from Autofac to Microsoft Extensions DI I've faced a problem
that there is no API to register one service implementation instance (singleton, scoped) for various service types.

## Autofac behaviour

```csharp
[Fact]
public void Autofac_ReturnsSameInstance()
{
    var contaienrBuilder = new ContainerBuilder();
    contaienrBuilder.RegisterType<Service>()
        .AsSelf()
        .AsImplementedInterfaces()
        .SingleInstance();

    var container = contaienrBuilder.Build();

    var byInterface = container.Resolve<IService>();
    var byExactType = container.Resolve<Service>();

    Assert.Same(byInterface, byExactType);
}
```

## Microsoft DI behaviour

```csharp
[Fact]
public void DI_ReturnsDifferentInstances()
{
    var serviceProvider = new ServiceCollection()
        .AddSingleton<Service>()
        .AddSingleton<IService, Service>()
        .BuildServiceProvider();

    var byInterface = serviceProvider.GetRequiredService<IService>();
    var byExactType = serviceProvider.GetRequiredService<Service>();

    Assert.NotSame(byInterface, byExactType);
}
```

## Achieving similar behaviour on Microsoft DI

Autofac allows multiple keys for the same implementation.
Microsoft DI is one to one map.
To achieve the same behaviour choose the type you will use as the primary key (`Service` in the example below).
For all other types (like `IService` in the example below) register resolvers that would resolve a service using primary key.

```csharp
[Fact]
public void DI_ReturnsSameInstace_LikeAutofac()
{
    var serviceProvider = new ServiceCollection()
        .AddSingleton<Service>()
        .AddSingleton<IService>(sp => sp.GetRequiredService<Service>())
        .BuildServiceProvider();

    var byInterface = serviceProvider.GetRequiredService<IService>();
    var byExactType = serviceProvider.GetRequiredService<Service>();

    Assert.Same(byInterface, byExactType);
}
```

[Code on GitHub](https://github.com/tretyakov-d/playground-extensions-di-vs-autofac/blob/master/ExtensionsDIvsAutofac/OneServiceImplementatinoForVaiousTypes.cs).
Have You Noticed Two New Git Commands from 2.23?
Tags: git, cli
Published: 2020-07-13 05:42:07

I just noticed them on `gatsbyjs/gatsby-ja` repo.
There is a guide for contribution to the repo.

```
git clone https://github.com/<yourname>/gatsby-ja
cd gatsby-ja
git switch -c docs/accessibility-statement（docs/accessibility-statement.mdを翻訳する場合）
```

Then I checked a couple of articles and documents of `switch` then noticed that there is another new command, `restore` from 2.23.



## switch
https://git-scm.com/docs/git-switch/2.23.0
>Switch to a specified branch. The working tree and the index are updated to match the branch. All new commits will be added to the tip of this branch.

>Optionally a new branch could be created with either -c, -C, automatically from a remote branch of same name (see --guess), or detach the working tree from any branch with --detach, along with switching.

>Switching branches does not require a clean index and working tree (i.e. no differences compared to HEAD). The operation is aborted however if the operation leads to loss of local changes, unless told otherwise with --discard-changes or --merge.


```zsh
$ git checkout -b feature/add-new-func
$ git switch -c feature/add-new-func

$ git checkout master
$ git switch master
```

To me, the interesting option is `-m`. 
> -m, --merge perform a 3-way merge with the new branch
After this three-way merge, the local modifications are not registered in your index file, so git diff would show you what changes you made since the tip of the new branch.




## restore
https://git-scm.com/docs/git-restore/2.23.0
>Restore specified paths in the working tree with some contents from a restore source. If a path is tracked but does not exist in the restore source, it will be removed to match the source.

>The command can also be used to restore the content in the index with --staged, or restore both the working tree and the index with --staged --worktree.

>By default, the restore sources for working tree and the index are the index and HEAD respectively. --source could be used to specify a commit as the restore source.

>See "Reset, restore and revert" in git[1] for the differences between the three commands.

Maybe, `restore` seems more intuitive.

```
# Restore all files
$ git checkout .
$ git restore .
```

According to the Git pages, both of them are experimental, so their behavior may change.

I didn't check the Git page when it was updated. So, I just thought I would need to check CLI tools docs sometimes.
What is Stacked Generalization in ML?
Tags: datascience, machinelearning, algorithms
Published: 2020-07-13 05:37:11

The way to test out classification algorithms is generally by looking at the AUC-ROC curve, and by understanding the Precision and Recall. For assumption, think that we are dealing with a decision tree. This decision tree is built on all of the data and can have various hyper-parameters.

One way to achieve a better model, or to obtain required predictions, is to tune the tree. There is a method to fine-tune this technique to another level, i.e. make lots of decision trees (based on different hyper-parameters), and then add predictions from all these trees, and average them out. This is the random forest algorithm.

An important thing to note here is that it depends on the data at times, which algorithm will perform better on it. What if our data doesn't perform well on a decision tree?
In that case, we need to look at other algorithms, and if possible, an even better method would be to combine the best instances of all possible algorithms. 

As described above, the random forest algorithm is a homogeneous ensemble, meaning that it is an average prediction of various instances of the same algorithm.
Now, we come to a heterogeneous ensemble. A heterogeneous ensemble is an average prediction based on outcomes of different algorithms applied to different samples of the data. This is widely used in the industry, as it removes the possibility of bias to a very high extent.

Now, the topic of the day: Stacked Generalization, is a method that comes under advanced machine learning, because this a step further from heterogeneous assembling. After performing the heterogeneous ensemble, the predicted values which we obtain, are used to build the model using a Neural Net, etc. such that a model based on predicted values is built, at a point where predicted values are representative of many algorithms (ensemble).

Happy learning!
Centos SSH bağlantısında dil sorunu
Tags: centos, ssh, dil
Published: 2020-07-13 05:29:27

İngilizce Centos sisteme Türkçe Pardus üzerinden SSH uygulaması ile giriş yaparken dil problemleri ortaya çıkabilmekteidir. Bunun nedeni Türkçe Pardus sistem üzerinde SSH istemci ayarlarında dil ile ilgili parametrenin karşı tarafa iletilmesidir.

Bunun çözümü için ya sunucu (CentOS) tarafında ***ya da*** istemci (Pardus) tarafında değişiklik yapılması gerekmektedir.

### 1. İstemci (Pardus) üzerinde:

***/etc/ssh/ssh_config*** dosyası üzerinden ilgili satırın başına diyez koyabilirsiniz:

```
SendEnv LANG LC_*
```

### 2. Sunucu (CentOS) üzerinde:

***/etc/ssh/sshd_config*** dosyası üzerinden ilgili satırın başına diyez koyabilirsiniz:

```
AcceptEnv LANG LC_*
```

Florebo quocumque ferar
Sudoku Solver in Python
Published: 2020-07-13 05:21:50

I'm Dharmil, and I'm a young software developer from the India. My main expertise is with Nodejs, however recently I've been expanding my horizons with other languages, python. I've read articles here before but haven't actually posted anything up until this point, and I thought this would be a good story to share.

After learning the basics of python I thought lets try a complex thing so I thought of solving a problem using backtracking. Thus I decided to build a sudoku solver. After few days when the solver was ready, the dream that I had to write complex programs was accomplished and also it realised me that I had become more proficient in software development.

Here's the repo : https://github.com/dVp007/SudokuSolver

The challenge was not that hard it's true that i was struck two to three times but overall it was fun.

Thank you.
Aplicaciones móviles con Angular
Tags: angular, mobile
Published: 2020-07-13 04:37:48

Existen frameworks que son excelentes alternativas si queremos utilizar nuestros conocimientos en Angular para crear aplicaciones móviles.

## Ionic

Este framework fue lanzado en 2013 y en ese entonces se usaba con AngularJS, en el 2016 tuvo una gran actualización adaptándose a Angular y Typescript.

Nos permite crear aplicaciones híbridas y PWAs, tiene a disposición una gran variedad de componentes que se adaptan según el sistema operativo en el que desplegaremos la aplicación.

Fue mejorando mucho a lo largo de los años y las aplicaciones híbridas creadas tienen un gran rendimiento.

Con el paso de los años agregaron soporte a otros frameworks/librerías, ahora también podemos usarlo con React o Vue (Beta).

[Documentación](https://ionicframework.com/docs)

## Onsen UI

Al igual que Ionic, este framework nos ayuda en la creación de aplicaciones móviles híbridas y PWAs.

Ofrece varios componentes UI que adaptan su estilo según el sistema operativo para el cual se despliegue la aplicación.

Este framework no solo se limita a Angular, está disponible también para React y Vue.

[Documentación](https://onsen.io/angular2/)

## NativeScript

A diferencia de las dos alternativas anteriores, este framework si permite crear aplicaciones móviles nativas.

Fue lanzado en 2015 y ganó mucha popularidad con el paso de los años. 

Facilita el acceso a APIs nativas a través de plugins.

También se puede usar con Vue, TypeScript o JavaScript.

[Documentación](https://docs.nativescript.org/)
Deploy a website using Firebase Hosting
Published: 2020-08-10 08:39:46

---
title: Deploy a website using Firebase Hosting
published: true
date: 2020-07-13 04:30:00 UTC
tags: 
canonical_url: 
---

There’s a lot of options cheap or even free in the market to deploy our projects. One of these and my favorite is the Firebase Hosting, a service of Google.

**Firebase** is a set of services of Google that provides you a **BaaS** (Back-end as a service), which means you don’t have to worry about the boring part of deploy a back-end to your project. One of these services is the Firebase Hosting that you can deploy your website or web app made in HTML, Javascript, and CSS.

I’ll show you how to deploy a simple website in the Firebase Hosting at zero cost.

## Create a project

We need to click in “Go to console” in the top right corner.

![no2](https://naveenjujaray.js.org/assets/images/firebase/2.jpg)

So the Firebase console. Now, we gonna create a project by clicking in “Adicionar projeto” (I didn’t find how to change the language on the firebase console)

![no3](https://naveenjujaray.js.org/assets/images/firebase/3.jpg)

Now, we chosen the name of the project and keep on! In the mine, I’ve chosen the name “Firebase Lab”

![no4](https://naveenjujaray.js.org/assets/images/firebase/4.jpg)

Here you can disable google analytics for now:

### The project finally created:

![no5](https://naveenjujaray.js.org/assets/images/firebase/5.jpg)

# Deploy website

We gonna create a folder and a simple html:

```
$ mkdir firebase-lab-website
```

### Look at our simple html in the folder:

**blog/index.html**

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
  </head>
  <body>
    <h1>Text here</h1>
  </body>
</html>
```

### Now, we need to install the CLI of the firebase with the command below:

```
$ npm install -g firebase-tools
```

### Now, we need login:

```
$ firebase login
```

After that, execute this command in the website directory and choose the right project:

```
$ firebase init
```

- First, you select the option “Hosting: Configure and deploy Firebase Hosting sites” with the space bar and press Enter.
- Second, choose the option “Use an existing project” by press Enter.
- Third, choose the project that you created.
- Fourth, enter the folder of your index.html. The default is “public”, but in my case, is “./”.
- Last, we need to say if your website is a single-page app.

All ready! Now, the last command in the directory is to deploy:

```
$ firebase deploy
```

_Our website is online!!_

You can see details of the deploy in the option “Hosting” at the left menu: ![no6](https://naveenjujaray.js.org/assets/images/firebase/6.png)Give me feedback! :) Thanks!
How do you balance what you learn?
Tags: discuss, beginners, webdev
Published: 2020-07-13 04:14:55

---
title: How do you balance what you learn?
published: true
description: Tips for balancing what you learn.
tags: discuss, beginner, webdev
cover_image: https://images.unsplash.com/photo-1536816579748-4ecb3f03d72a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80
---

Lately, I've been trying to become more of a full stack developer. I love that the internet has so much information but sometimes it's overwhelming. 

How do you prioritize what to learn? And more importantly, how do you prevent burnout?

---

*Photo by [青 晨](https://unsplash.com/@jiangxulei1990?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/balance?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)*
The Power of `z-index` Video
Tags: css, zindex, html
Published: 2020-07-13 04:05:56

---
title: The Power of `z-index` Video
published: true
description: Video on understanding `z-index`
tags: css, zindex, HTML 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2dcmlcozkq5xa5kfar1l.png
---

{% youtube 2RhZveCkxEQ %}
Consolidating My Chrome Bookmarks
Published: 2020-07-13 04:01:11

My collection of web development bookmarks has gotten out of control. I don't want to spend an entire day organizing them and categorizing them in folders. I thought it would be better to share with the Dev community and create a one-page reference sheet here that consolidates most of my programming and web-dev links. Am I missing anything? Feel free to leave 1 or 2 of your favs that are not on my list!
(Note: this will be updated roughly once a month or every other month.)

For my lists, I'm trying to sort them by how often I use/visit the site.

##HTML
[htmlreference](https://htmlreference.io/)

##CSS-References
[cssreference.io](https://cssreference.io/)
[css-tricks](https://css-tricks.com/)
[BEM](http://getbem.com/)
[CSS Flexbox](https://www.samanthaming.com/flexbox30/)

##CSS-Frameworks
[Bulma](https://bulma.io/)
[Bootstrap](https://getbootstrap.com/)
[Skeleton](http://getskeleton.com/)
[SemanticUI](https://semantic-ui.com/)
[MaterialUI](https://material-ui.com/)

##JavaScript
[Flaviocopes](https://flaviocopes.com/)
[masteringjs](https://masteringjs.io/)
[zellwk](https://zellwk.com/)
[VueJS Developers](https://vuejsdevelopers.com/)
[Official VueJS](https://vuejs.org/)
[Official Vue Community](https://vue-community.org)

##Playgrounds
[CodeSandbox](https://codeSandbox.io/)
[CodePen](https://codepen.io/)
[jsfiddle](https://jsfiddle.net/)

##General References
[MDN Web Docs](https://developer.mozilla.org/en-US/)
[W3Schools](https://w3schools.com/)
[RIP Tutorial](https://riptutorial.com/)
[ThatSoftwareDude](https://www.thatsoftwaredude.com/)

##General Cheat-Sheets
[devhints](https://devhints.io/)
[Online JavaScript Tools And Resources](https://html-css-js.com/js/)

##MacOS/Linux
[Learn to Code with Me's Unix/Mac CheatSheet](https://learntocodewith.me/command-line/unix-command-cheat-sheet/)

##Git
[git cheatsheet](https://ndpsoftware.com/git-cheatsheet.html)
new Operator in Javascript
Tags: javascript
Published: 2020-07-13 03:56:13


The new keyword does the following things:
```
Step 1: Creates a blank, plain JavaScript object;
Step 2: Links (sets the constructor of) this object to another object;
Step 3: Passes the newly created object from Step 1 as the `this` context;
Step 4: Returns this if the function doesn't return an object.
```

```js

var obj = {
normal: function() {
	this.privatefunction = function() {
		console.log('inside privatefunction', this)
	}
  }
}

```

```js

var norm = obj.normal() // does nothing
norm.privatefunction() // throws TypeError:
// Cannot read property 'privatefunction' of undefined

```

```js

var newNorm = new obj.normal()
newNorm.privatefunction() // inside privatefunction normal {privatefunction: ƒ}

```

The `newNorm` variable of normal function instantiated with `new` keyword is able to call `privatefunction` without an error because of Step 4 (Returns `this` because `normal` function returns `undefined`)
Cursor Animation on MouseMove Using Javascript 🐴
Tags: codepen, html, css, javascript
Published: 2020-07-13 03:49:58

Hello coding people, hope you're doing well 👨‍💻. In this DEV post, you will learn how to make this amazing mouse follower, which is built with HTML, CSS, and JAVASCRIPT 🥠🍤

NOTE: This is now trending element in Web and UI/UX

{% codepen https://codepen.io/atulcodex/pen/ZEQjbwp %}
Dev's, how do you convince yourself into working for something that you know is clearly unethical? 
Tags: discuss
Published: 2020-07-13 03:43:29

For ex: building spyware, collecting unwanted user data, etc. We all hear how certain companies have shady practices with their products but there's usually a team behind it. I'm wondering why hasn't the tech community United against these practices ( but have strongly United against non technical issues like BLM movement).
Give Feedback on my Project 
Tags: javascript, beginners, discuss, webdev
Published: 2020-07-13 03:24:20

![Kucos](https://dev-to-uploads.s3.amazonaws.com/i/y7wk1u7gkz2eirjlv6le.gif) 

For a few days I've been working on an open source comment system that works serverless, as a bonus, there is also kudos on each comment form.

I'd like to ask you what you think about my project?

I've been looking for a long time for ready-made solutions, but I haven't found anything that would work Serverless, Commento or Isso does not work severless.

The project is open source, the demo can be found on [kucos.js.org](https://kucos.js.org)

And the source code on GitHub [kucosjs/kucos](https://github.com/kucosjs/kucos)
Spring Boot with Docker and Kubernetes
Tags: docker, kubernetes, java
Published: 2020-07-13 03:20:36

Docker and Kubernetes have revolutionized the software industry in the latest years. But how can we containerize our Spring Boot apps? In this presentation, we’ll see different options, from creating our Dockerfile, to tools like Jib and we’ll focus on the new support for Docker in Spring Boot 2.3 that leverages Buildpacks. After having our container, we’ll see how to deploy and run it on Kubernetes.

{% youtube DYA1xAfXjF8 %}
Create an animated typing text effect (CSS & JS solutions)
Tags: css, javascript, animation
Published: 2020-07-13 03:11:17

This article outlines two different solutions to achieve an animated (typewriter) text effect.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ag8vohntwygqbetsay9u.gif)

A simple pure CSS solution and a more elaborate solution using JavaScript.

Working demo of each solution can be found here -> https://codepen.io/michaelburrows/pen/QWyBpGN

###CSS Solution

Let’s get started by adding the text we want to animate to the HTML.

```html
<div id="type-css">
  <h1>Lorem ipsum dolor sit consectetur.</h1>
</div>
```
 
Next the CSS.

```css
#type-css {
  position: absolute;
}
#type-css h1 {
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
  border-right: 3px solid #fff;
  animation: type 3.5s steps(35, end), cursor 1s step-end infinite;
}
```

Finally the CSS for the animation that gives the appearance of text being typed and a blinking cursor.

```css
@keyframes type {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}
```

###JavaScript Solution

While the CSS solution looks good Javascript allows us to create an even more realistic typing effect.

To start insert a h1 or any other tag you want to use into the HTML.

```html
<h1 id="type-js"></h1> 
```

Next for the Javascript.

This script outputs each of letters, one at a time, at a random interval.

Simply replace the const text with the text you would like to animate.

```javascript
document.addEventListener("DOMContentLoaded", function () {
  let letter = 0;
  const text = "Lorem ipsum dolor sit consectetur.";
  function typeText() {
    if (letter < text.length) {
      document.getElementById("type-js").innerHTML += text.charAt(letter);
      letter++;
      let speed = Math.floor(Math.random() * 150) + 50;
      setTimeout(typeText, speed);
    }
  }
  typeText();
});
```

As the JavaScript handles the text animation we only need the CSS animation for the blinking cursor.

```css
#type-js {  
  display: inline-block;
  line-height: 1;
  border-right: 3px solid #fff;  
  animation: cursor 1s step-end infinite;
}
@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}
```