teleren/devto huggingface dataset:
Day 29 of 100DaysOfCode
Tags: 100daysofcode, wordpress, codenewbie, website
Published: 2020-09-26 09:56:29

**Making your own web page - Tutorial for total beginners**

Today I published a tutorial on the super basics of making your own website. It covered the Hello World of HTML, basic tips, and lots of links to great resources from around the web. 

The tutorial also has a WordPress section, showing you what launching a WordPress site takes. I really do think its a good starting tutorial for total beginners. The best part is the curated list of great learning materials. 

I started making the tutorial almost two months ago but took a break when I realized I don't know enough about WordPress to give tips on it. Today I just decided to finish the project.

I worked quite hard on the visuals, adding a couple of animations. It was made using Elementor. 

Check out the [making a website tutorial](https://www.arttupyykonen.com/make-a-website-resources-and-tips/)!

**Making my site faster**

If been very frustrated about the speed of my site. It's been super slow. I didn't know why it was as slow as it was. I had decided that there really isn't much I can do, and it was just the fault of using WordPress and Elementor. 

Then I decided to really look into the reasons for the slowness. I ran the Lighthouse test and saw that many of the culprits that were making my site slow were Google scripts. I used the Google Sitekit plugin for analytics, ads, and other features. It seemed to be the reason for slowness. 

Decided to not serve any ads, and delete the Sitekit plugin. The results were astonishing. The site got over three times faster!

![Scores after deleting Sitekit](https://dev-to-uploads.s3.amazonaws.com/i/iihtuziz9s22py5lw3nb.png)

The speed feels really good!

**Time spent**
Didn't remember to time anything today as I wasn't coding. Spent probably three hours in total on tasks outlined above. 

### Links and videos

Are you in tutorial hell? Do you feel like you don't get anything from tutorials? Are you are looking for a quick laugh? If so, check out this video by Jombo! It describes all programming tutorials perfectly. 

{% youtube MAlSjtxy5ak %}

That's it. See you all tomorrow!
failed to switch container runtime to containerd
Tags: k8s
Published: 2020-09-26 09:37:27

when I try to deploy a k8s cluster using containerd as container runtime, I always get 

> Unimplemented desc = unknown service runtime.v1alpha2.ImageService

when I try to pull images, I am using a newly created, clean environment, and I follow the official document quite strictly, this shouldn't happen

After some futile tring, I decided to give up and change back to docker, at least it works.
Role of Java in modern web development
Tags: java, career, devlive
Published: 2020-09-26 09:37:21

If you look at current tech Twitter, Reddit, etc.. Java gets an unreasonable amount of hate. All the discussion is about full-stack JavaScript developers. On the other side, you see people trying to get work as full stack javascript developers, but there are not enough jobs. 

There are tons of Java and JS full-stack jobs. At all the companies I ever worked at we never had enough people. Sure Java is not at the backend of all the tech giants, sure Java is not the most popular language in your Twitter following but Java is the language that powers a lot of internet. Your online banking probably runs on Java, your favorite online magazine as well. 

## Java in full-stack

In the past, there were apps fully written in Java and it's related technologies. All the views are done in JSP, if there is Java Script it's probably jQuery forced into the JSP.  There is heavy use of such monstrosities such as DWR remoting or any other framework that allows you to do stuff in java that is supposed to be done the other way.  

And I will not lie, you will probably encounter some of these projects but the role of modern Java is to be a server-side api. Java frameworks are changing to support this. With Spring Boot it's incredibly easy to get started with database connections. With awesome state of the art support for tools like Solr, Elastic Search, etc.. it's incredibly easy to accomplish anything. With battle-tested language, that feels more and more modern. Thanks to it's new rapid release cycle. 

## But Java is slow

Yes if you take a traditional Java web app and run it through a bunch of benchmarks, it will probably be slower than the same code written in Go or whatnot. But you are not Google, almost nobody is Google so that you would need to care about nanoseconds. And if speed is your thing look at stuff like [Quarkus](https://quarkus.io/) it super fast and small. It's super suitable for AWS Lambda for example. 

## What about frontend

I'll give you that. Writing web frontend in Java is strange, I would say it's the same level of insanity as writing backend in JavaScript. For most of the projects, I worked on we chose Angular and TypeScript. We are generating a lot of code in our Angular project in Java. For each controller, we are automatically generating service and DTO classes. You create backend the same way you would do on any other project, and it automatically generated strongly typed classes for your frontend. 

## The end

Learning Java for web development in 2020 is definitely a huge advantage for you in the job market. Java/TypeScript full-stack is the best of both worlds and you cannot do wrong. 

---

If you agree or disagree you can follow me on  [Twitter](https://twitter.com/pavel_polivka) and reach out to me.
Custom Type Guards in TypeScript
Tags: webdev, javascript, typescript
Published: 2020-09-26 09:36:10

My previous post showed with some short code snippets [5 useful TypeScript ticks](https://dev.to/basilebong/5-useful-typescript-tricks-419i). One of those tricks was a User-Defined Type Guard. Since this "trick" has attracted a lot of attention, I decided to write this short post to make this concept easier to understand. 

## What are Type Guards

A Type Guard reduces the type of object in a conditional block. The most known Type Guards are the famous `typeof` and `instanceof` operators. 

## Different Type Guards

- `typeof`
- `instanceof` 
- `in`
- Literal Type Guard
- `null` and `undefined` with `strictNullChecks`
- User-Defined Type Guards

## Creating a User-Defined Type Guard

Unfortunately one can quickly feel the limits of the basic Type Guards when e.g. working with plain JavaScript objects. 

Below an example of a user defined Type Guard.

```ts

interface IApple{
    name: string;
    color: string;
}

interface IBanana{
    name: string;
    size: number;
}

type Fruit = IApple | IBanana;

/** Custom Type Guard */
const isApple = (f: Fruit): f is IApple => {
    return (f as IApple).color !== undefined
}

const apple: Fruit = {name: "Pink Pearl", color: "red"};
const banana: Fruit = {name: "Cavendish", size: 20};

console.log(isApple(apple)) // Logs true
console.log(isApple(banana)) // Logs false
```

`f is IApple` is a **type predicate**. With this, instead of just returning a boolean, TypeScript will reduce the type to `IApple`.
In the following code TypeScript will understand that inside the condition `apple` is an `IApple`.

```ts
if(isApple(apple)){
    /** TS undestands that apple is an IApple */
    console.log(apple.color); // Logs red
}
```
This is the big advantage of using User-Defined Type Guards. Be aware that a wrongly coded Type Guards can introduce major errors into your code. 

## More about Type Guards

- https://basarat.gitbook.io/typescript/type-system/typeguard
LeetCode Day26 | Temo Attacking | Solution Beats 100%
Published: 2020-09-26 09:16:20

Teemo Attacking

Solution (Beats 100 %- 
```
class Solution:
    def findPoisonedDuration(self, timeSeries: List[int], duration: int) -> int:
        ans = 0
        last = 0
        for val in timeSeries:
                ans += min(val+duration - last, duration)
                last = val+duration
        return ans
```
JavaScript Destructuring
Published: 2020-09-26 08:38:23

##Destructuring?

Destructuring decouples arrays, and objects and assign in it the variables. Help us to write clean and readable code.

## Where we can apply Destructuring?

1. Arrays
2. Objects

### 1. Arrays Destructuring

```js
const weekdays = [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday]
const oceans = ['Arctic Ocean','North Atlantic Ocean',
'South Atlantic Ocean','Indian Ocean','North Pacific Ocean',
'South Pacific Ocean','Southern Ocean']
```
Accessing array items with the index value manually

```js
const weekdays = [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday]
let mon = weekdays[0];
let tue = weekdays[1];
let wed = weekdays[2];
console.log(mon, tue, wed) // Monday, Tuesday, Wednesday
```
Applying destructuring to access array items

```js
const oceans = ['Arctic Ocean','North Atlantic Ocean',
'South Atlantic Ocean','Indian Ocean','North Pacific Ocean',
'South Pacific Ocean','Southern Ocean']

const [ocean1, ocean2, ocean3] = oceans
console.log(ocean1, ocean2, ocean3) // Arctic Ocean,North Atlantic Ocean,South Atlantic Ocean
```

### 2. Objects Destructuring

 The following methods used to access value of an object:

```js
1. Using the Dot ( . ) 

const myCar = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969,
    color: 'Black'
};
 

let manufacturer = myCar.make;
let model = myCar.model;

console.log(manufacturer, model) // Ford, Mustang

2. With Angle bracket Object[key_name]

let year = myCar[year]
let color = myCar[color]

console.log(year, color) // 1969, Black
```

When we destructure an object the name of the variable should be exactly the same as the key or property of the object. See the example below.

```js
const myCar = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969,
    color: 'Black'
};
 
let {manufacturer, model, year, color } = myCar
console.log(manufacturer, model year, color) // Ford, Mustang, 1969, Black
```
Largest Number | Leetcode Day 25
Tags: python
Published: 2020-09-26 08:35:20

>Given a list of non negative integers, arrange them such that they form the largest number.

Example - """
Input: [10,2]
Output: "210"
"""

Solution - 
```
import functools
class Solution:
    def largestNumber(self, nums: List[int]) -> str:
        def sorted_by(a, b):
            if a+b > b+a:
                return 1
            elif a+b < b+a:
                return -1
            else:
                return 0
        cmp = functools.cmp_to_key(sorted_by)
        return "".join(sorted([str(x) for x in nums], key=cmp, reverse=True)).lstrip('0') or '0'
```
See what's inside a ZIP file
Tags: csharp, productivity, dotnet, webdev
Published: 2020-09-26 08:31:35

Suppose you are working with the ZIP files all the time. Let's call it your business/job routine or process. Someone uploads ZIP files everyday to the server and you have to find specific documents in them.
Normally, you would *download* the ZIP files and extract them or open them using any archiving tool (e.g. WinZip) and look for the right ZIP that contains the required file(s).  
How about getting compressed files information without downloading them? 
Suppose, you have 20+ different formatted files compressed in DailyFiles.ZIP.

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

This is how you can view the compressed files in your Web application (there's no need to download the ZIP):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9iiv31jpjwum70cmazb6.PNG)

Have a look at the code below:

```csharp
string outputDirectory = @"D:/";
string pageFilePathFormat = Path.Combine(outputDirectory, "page_{0}.html");
using (Viewer viewer = new Viewer(@"D:/DailyFiles.zip"))
{
    HtmlViewOptions options = HtmlViewOptions.ForEmbeddedResources(pageFilePathFormat);  
    viewer.View(options);
} 
```
This document viewer [API](https://downloads.groupdocs.com/viewer/net) basically renders the source file into HTML. Later, this resultant HTML could be displayed in the browser or any other application (e.g. Desktop). In case of any issue for further details, you can raise your concerns [here](http://forum.groupdocs.com/).
Redesigning my portfolio ... with Angular? 🤔
Tags: discuss, beginners, angular, javascript
Published: 2020-09-26 08:23:43

Hey!!

I need your advice. I'm thinking of redesigning [my portfolio](https://pabloherrero.me/). Two options:

- **JavaScript + BootStrap**: This is basically what my portfolio is based on today. It would just be an image wash.
- **Angular + BootStrap**: For me it would be to go one step further. Maybe this way I can show the last thing I've been learning. Besides, I love that there are no loads between pages, but... is it too much for a portfolio?

What do you advise me?
COVID19 Summary gRPC API written in Typescript
Tags: typescript, node, javascript, grpc
Published: 2020-09-26 08:15:06

This is a gRPC API sample implementation on Node.JS written with Typescript. 

You can check my sample code here: https://github.com/anzharip/covid19-id-grpc. Live demo on: 52.148.115.205:10080

You can access the live demo with any gRPC client or for GUI client, you can use [BloomRPC](https://github.com/uw-labs/bloomrpc): 
<img width="1436" alt="Screen Shot 2020-09-26 at 15 03 59" src="https://user-images.githubusercontent.com/10259593/94335973-a3ef3280-0009-11eb-8df2-33f25620dbb4.png">

The live demo is hosted on Azure Container service with 1 vCPU and 0.5 GB RAM. I benchmarked the service and it is running quite fast serving ~500 request per second without any optimization: 
<img width="1012" alt="Screen Shot 2020-09-26 at 15 01 39" src="https://user-images.githubusercontent.com/10259593/94335971-a18cd880-0009-11eb-8868-fb72c09763d8.png">

The datasets are retrieved from https://covid19api.com. 

Notes: 
* You will need to compile the .proto files into Typescript definitions to create gRPC API in Typescript. You can follow the steps to do that [here](https://adnanahmed.info/blog/2019/11/01/grpc-with-nodejs-typescript/) and [here](https://medium.com/blokur/how-to-implement-a-grpc-client-and-server-in-typescript-fa3ac807855e).
GIT Commands ( Woking with git branch )
Tags: git, github
Published: 2020-09-26 07:53:58




**Creating a new branch**
```
$ git checkout -b YOUR_NEW_BRANCH_NAME
```
<br/>
**View all *local* branch**
```
$ git branch
```
<br/>
**View all *local* and *remote* branch**
```
$ git branch -a
```
<br/>
**Pushing a *local* branch to a *remote* server**
```
$ git push origin YOUR_BRANCH_NAME
```
<br/>
**Set upstream branch**
> upsteam allows to use "git push" command
```
$ git push -u origin BRANCH_NAME
```
<br/>
**Switching between branch**
```
$ git checkout BRANCH_NAME
```
<br/>
**Merging branch**
> make sure you have committed all changes before merging
```
// first switch to destination branch, where branch needs to be merged

$ git checkout DESTINATION_BRANCH_NAME


// and run below command to merge

$ git merge BRANCH_NAME_TO_BE_MERGED
```
<br/>
**Deleting a local branch without merging**
```
// switch to any other branch

$ git branch -D BRANCH_NAME
```
<br/>
**Deleting a local branch after merging**
> make sure you need to be in the destination branch to delete merged branch
```
$ git branch -d BRANCH_NAME
```
<br/>
**Deleting a branch from a remote server**

```
$ git push origin -d BRANCH_NAME
```

<br/>
**Pulling remote branch**
```
$ git pull origin BRANCH_NAME
```

<br/>
**Getting changes from master branch to other branch**
```
// switch to branch
$ git checkout DESTINATION_BRANCH_NAME

$ git rebase master
```
<br/>
**NOTE:** *I will be updating this post if I became more familiar with other git commands while working on git branch*
<br/>
comment down if I made mistake
Redisgraph - Deep Dive Part 1
Tags: redis, webdev, database, redisgraph
Published: 2020-09-26 07:34:13

#RedisInsight
   Hey guys! This is the second part of Redisgraph series. As we talked about RedisInsight earlier, it is a GUI for redis application. We can view the graphical representation of our data. Here, [Install RedisInsight](https://docs.redislabs.com/latest/ri/installing/install-redis-desktop/) contains the steps for installation. 
  Once installed, run your redis server and redis insight, navigate to http://127.0.0.1:8001/. You will visit the home page of redis insight, there you can create a new database for your project as mentioned below.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j6mmr0kbxmqlm1onojub.png)

  Now, a database is created, you can navigate into it. In the sidebar, you can find Redisgraph, get into it. There, you can run commands and execute them. Both graphical and JSON notation of data is available. 
 
####CREATE
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3eax7n8hbo2vajtg2zmv.png)

####MATCH
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bx92kw4729swgbi4qv6x.png)

Now, we can see some of the commands withdrawing the example we had from our last tutorial, 
###SKIP 
It is used when we deal with batches of records. 
> syntax: SKIP [number of records to be skipped]


```
MATCH (e:emp) RETURN e SKIP 10;
```
It skips the first 10 records and returns the rest. 

###LIMIT
It is used to limit the number of records. 
> syntax: LIMIT [maximum number of records to be retrieved]
```
MATCH (e:emp) RETURN e LIMIT 10;
```
It returns only the first 10 records present. 

SKIP and LIMIT together
```
MATCH (e:emp) RETURN e SKIP 10 LIMIT 10;
```
It skips the first 10 records and lists the next 10. 

###ORDER BY
It denotes the sorting option [ASC/DESC]. We can specify how the records have to be sorted.
> syntax: ORDER BY [field name] [ASC/DESC]

If we want to retrieve records with sorting names of employees ascending order(default).

```
MATCH (e:emp) RETURN e ORDER BY e.name;
```
For descending, 
```
MATCH (e:emp) RETURN e ORDER BY e.designation DESC;
```
How to install .NET core SDK with ASP.NET on Manjaro Linux
Tags: linux, dotnet, csharp, tutorial
Published: 2020-09-26 07:18:11

  I recently switched from Fedora to Manjaro as my main Linux distribution and since I use .NET core from time to time I wanted to install it. It turns out that since at the time of this writing, it's not  [officially supported](https://docs.microsoft.com/en-us/dotnet/core/install/linux), as it was the case with Fedora, there was a bit more trial and error involved in the process. 

   My first attempt was to try to install it using  [snap](https://snapcraft.io/dotnet-sdk), since it mentions Manjaro in the supported list. I had some issues when I installed it like this, among which the biggest was that the official C# extension in VS Code, OmniSharp, was not working. 

  The good news is that there are official Arch Linux packages with the .NET Core SDK now.

### Steps to install

 
> Install dotnet-sdk with asp.net runtime:

```
sudo pacman -S dotnet-sdk aspnet-runtime
``` 

> In order to have the needed environment variables and the dotnet root in PATH, create a`/etc/profile.d/dotnet.sh` file with the following contents:


```
export DOTNET_ROOT=/usr/share/dotnet
export MSBuildSDKsPath=$DOTNET_ROOT/sdk/$(${DOTNET_ROOT}/dotnet --version)/Sdks
export PATH=${PATH}:${DOTNET_ROOT}
```

Note: **After this step, a reboot or re-login is required.**

> Depending on what shell you use, append to the `.bashrc` or `.zshrc` configuration files the following:
 
```
# Adds dotnet tools to the PATH variable
export PATH="$PATH:/home/[[USER_NAME]]/.dotnet/tools"
```
* This allows tools like `dotnet watch` or `dotnet ef` to be available globally

* Although some people suggest also adding `DOTNET_CLI_TELEMETRY_OPTOUT=1`, I would advice against it for now, given the fact the Arch Linux is not officially supported and Microsoft might also take into account the usage statistics when prioritizing bug fixes or support for certain Linux distributions.


#### Tested using : 
- Manjaro version: 20.1
- Kernel version: 5.8.6-1-MANJARO
- dotnet version: 3.1.107


#### Links:
*  [Manjaro dotnet setup ](https://gist.github.com/waynebloss/55aa06b13a3f647c45b57caa31397089) 
* [Arch Linux .NET Core](https://wiki.archlinux.org/index.php/.NET_Core)
* [How to install dotnet core in Manjaro Linux](https://dev.to/kelvinmai/how-to-install-dotnet-core-in-manjaro-linux-590a)

If this guide becomes outdated or if you have any issues with the any steps feel free PM me on  [Twitter](https://twitter.com/AlexNastase01) .
SHort learning Godot engine
Tags: game, learning, csharp
Published: 2020-09-26 07:14:30

I take a small bite in game development using the godot engine which is pretty good.

- Learn how to create a project.
- Kinematic 2D body for object creation and the tree data structure used for game.

- Project structure below:
```
|
|
|
--Res|
     |
     |
     -scenes
     |
     |
     -scripts
     |
     |
     -assets
     
```
That is the basic structure of a godot project.
How to PUG, SCSS loading with for loop
Tags: pug, scss, preprocessor, tutorial
Published: 2020-09-26 07:14:14

---
title: How to PUG, SCSS loading with for loop
published: true
description: 
tags: pug, scss, preprocessor, tutorial
//cover_image: https://direct_url_to_image.jpg
---
**Hi guys,
In this tutorial, 
we are going to use for loop at our pug, scss preprocessor.**

##PUG/JADE (HTML preprocessor)
```
.wrapper 
 - for(var i = 0; i < 21; i++)
   span 
```

and 
#SCSS (CSS preprocessor)

```
body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  @mixin j-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @include j-center;
  .wrapper{
    $s: 40vmin;
    width: $s;
    height: $s;
    
    position: relative;
    span{
      display: block;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
    //  border: solid red;
      
      @for $i from 1 through 22{
        &:nth-child(#{$i}){
          transform: rotate(calc(#{$i} * 20deg));
          
          animation: 2s linear animate infinite;
      opacity: 0;
      @keyframes animate{
        0%{
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
      }
          animation-delay: #{$i * .1}s;
          &:not(:last-child)::after{
            content: '';
            $s: 10px;
            width: $s;
            height: $s;
            position: absolute;
            background: red;
            border-radius: 50%;
          }
          
          
        }
        &:last-child{
          animation: 2s linear lastchild infinite!important;
          opacity: 1!important;
          @keyframes lastchild{
            0%{
              transform: rotate(0deg) scale(1.1);
            }
            100%{
              transform: rotate(360deg) scale(1.1);
            }
          }
          &::after{
            content: '\f072';
            $s: 20px;
            width: $s;
            height: $s;
            position: absolute;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: #555;
            transform: scale(2)
          }
          }
        }
    }
  }
}
```


and here is our codepen testing code.

{% codepen https://codepen.io/nikhilroy2/pen/eYZXGPr %}

In the previous tutorial we have learned something about for loop pug, scss, and after we learn the basics we will apply those effect our basic tutorial.

Here is the for loop pug, scss tutorial [https://dev.to/nikhilroy2/for-loop-developer-how-to-use-pug-jade-scss-javascript-python-backend-stack-tutorial-1-3h3p](https://dev.to/nikhilroy2/for-loop-developer-how-to-use-pug-jade-scss-javascript-python-backend-stack-tutorial-1-3h3p)
Thanks all.
Linux (or Windows) on MacBook keyboard layout - how do you configure?
Tags: macos, linux, help
Published: 2020-09-26 06:51:15

Like, is it possible to map Right Command, to Right Control? So that I can easily `ctrl++`, `ctrl+-`, `ctrl+0`, `ctrl+/`.

Still, `cmd+Left`, `cmd+Up`, `cmd+Right`, `cmd+Down`, is still useful.