teleren/devto huggingface dataset:
VSCode JetBrains Icon Theme
Tags: vscode, jetbrains, intellij
Published: 2021-07-10 05:05:57

I know there's a couple of these extensions out there already. But the ones I found were outdated or also used custom made icons which don't look good.

All of the icons used in this extension are from the official JetBrains IntelliJ Resource Icon List [see here](https://jetbrains.design/intellij/resources/icons_list/)

Here's a preview of what it looks like
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9rwp8fs0hogl1vlcazi.png)
 
Feel free to check out the extension and give some feedback would love to improve this more. :)

**GitHub:**
[vscode-jetbrains-icon-theme](https://github.com/chadalen/vscode-jetbrains-icon-theme)

**Marketplace:**
[see here](https://marketplace.visualstudio.com/items?itemName=chadalen.vscode-jetbrains-icon-theme)
Natural Language Processing with python source code
Tags: c
Published: 2021-07-10 05:02:08

**Today**
we know about object and classes in our website kodlogs. C # is a powerful language which has been used for many years to create many important programs. But the problem is that as time went on,  And the size of the program got bigger. Thus, managing files became very difficult and impossible. In 1980, Bjarne Stroustrup discussed this issue and made some additions to the C language. This addition was initially called C with classes.  Was from the United States. Now let's talk about what objects are. The main feature or thing in programming is the concept of object. An object is a logical thing inside programming. It contains your personal data and code to work on that data.  Now let's talk about classes. In order to create an object, it is necessary to first create its general form with the help of the keyword of the class. The class is very similar to the structure.Everything in C# is related with training and objects, alongside with its attributes and methods. For example: in actual life, a automobile is an object. The auto has attributes, such as weight and color, and methods, such as power and brake.See the following code example to understand more. 

 ```

class Car 
{
  string color = "green ";

  static void Main(string[] args)
  {
    Car myObj = new Car();
    Console.WriteLine(myObj.color);
  }

              O/P
green

```
How to setup Starship Prompt and Zsh on Crostini
Tags: tutorial, linux, chromeos, rust
Published: 2021-07-10 04:57:26

Hey all! I made this guide after getting Starship successfully working on Bash, but zsh would refuse to accept the init script.

## Step 0 - Set a custom password

**This step is not required if you've already set a custom password for your Crostini container.**

Run `sudo passwd user`, where `user` is your username.

## Step 1 - Install zsh and setting as default shell

...whether it be from your package manager of choice, or [from source](https://github.com/zsh-users/zsh).

Then, simply run this command to add zsh's binary to `/etc/shells`:`command -v zsh | sudo tee -a /etc/shells`

Now, set it as your default shell:`chsh -s $(which zsh)`

## Step 2 - Install Starship Prompt

Run `curl -fsSL https://starship.rs/install.sh | bash` to start the installation.

To add Starship's init script to your .zshrc file, simply run one last command:`echo $(starship init zsh) >> ~/.zshrc`

## Congrats, you're done!

Enjoy your new beautiful and blazing fast prompt with the power of Rust and zsh!
JavaScript .map() Method 📍
Tags: javascript, webdev, beginners, functional
Published: 2021-07-10 04:53:17

Hello Everyone. Hope you all are safe and wearing masks😷. 
So today, as promised, we shall be discussing about .map() method in JavaScript.

# The Map Method
The Array.map() method allows us to iterate over an array and modify its elements using a callback function. In other words, the map() method creates a new array with the results of calling a function for every array element. It calls the provided function once for each element in an array, in order. Do keep in mind, that does not execute the function for empty elements. Hence, when using it, make sure, the array you are mapping over, exists. Else your code may stop running. And, the most incredible feature about map(), it does not change the original array. You get a new result, with the original array still intact.

## Syntax
```javascript
array.map(function(element, index, array), this)
```
The callback function() is called on each array element, and the map method always passes the current element, the index of the current element, and the whole array object to it.
The this argument will be used inside the callback function. By default, its value is undefined. Using this, is completely optional. A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value.

## Examples
```javascript
let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr);
// [9, 12, 15, 18]
```

### Map over an array of objects
```javascript
let users = [
    {firstName: "Mursal", lastName: "Furqan"}
    {firstName: "Muhammad", lastName: "Ali"}
    {firstName: "Vedant", lastName: "Khairnar"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
});

console.log(userFullnames);
// ["Mursal Furqan", "Muhammad Ali", "Vedant Khairnar"]
```

## Changing default value of this
Here's how to change the "this" value to the number 06:

```javascript
let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(this) // 06
}, 06);
```

You can also use predefined methods in a lot simpler fashion. In the next example, we shall show how you can take square root of an entire Array, in two lines using map().

```javascript
const numbers = [16, 81, 4, 25];
const newArr = numbers.map(Math.sqrt)
// And we are done with taking square root of our array. Let's see it in console

console.log(newArr)
// [4, 9, 2, 5]
```


In our next article, we shall discuss something even cooler 😎
Or, you can suggest in the comments 🧧 below what should we write on next. 🎆
frontend mentor challenge
Published: 2021-07-10 04:24:11

I've just completed a front-end coding challenge from 
@frontendmentor
! Party popper

You can see my solution here: https://frontendmentor.io/solutions/css-grid-layout-flexbox-hkgHGKhNd

Any suggestions on how I can improve are welcome!

#FrontendMentor #codechallenge
Chilean Birds
Tags: docker, php, react
Published: 2021-07-10 04:18:29

---
title: Chilean Birds
published: true
description: A sample React + ProcessWire + Docker
tags: docker, php, react
cover_image: https://user-images.githubusercontent.com/292738/91234985-7eb58e80-e702-11ea-8fac-15faabe8fa2a.png
---

This is a small example of an API Made with ProcessWire and the Frontend with React. Also a Dockerfile was provided.

{% github joyofpw/chileanbirds-api %}

{% youtube K1rUXtmQZE8 %}
Sobreviviendo a Compis 2
Tags: podcast
Published: 2021-07-10 03:39:45

## Episodio 0.

En este episodio, me presentaré de manera rápida. El encargado de la clase es Bidkar Pojoy.

Link del episodio:
[Episodio 0](https://anchor.fm/francisco-molina16/episodes/Introduccin-e1ahk69)

## Episodio 1.

Platiquemos de como se arma un compilador, ¿qué es ANTLR?.

Dejo link de los recursos que _medio_ leí

[ANTLR](https://www.antlr.org/)
[Episodio 1](https://anchor.fm/francisco-molina16/episodes/Hablemos-de-ANTLR-y-el-compilador-e1ajgvk)

## Episodio 2 
*Iniciamos con ANTLR, algo que olvidé mencionar en el podcast es que finalmente decidí utilizar Python, por que Java solo me estaba atrasando por cuestiones de que simplemente estaba oxidado en el lenguaje*
[ANTLR ref](https://github.com/antlr/antlr4/blob/master/doc/python-target.md)
[Episodio 2](https://anchor.fm/francisco-molina16/episodes/Discusin-de-tabla-de-smbolos-inicial-e1ajh54)

## Episodio 3
Platiquemos sobre avances del sprint 1, y estructura de la tabla de símbolos! 

[Episodio 3](https://anchor.fm/francisco-molina16/episodes/Pre-presentacin--avances-e1ajh9h)

## Episodio 4

:(... fracaso..

[Episodio 4](https://anchor.fm/francisco-molina16/episodes/A-refactorizar-e1aji4j)

## Episodio 5
Nos fue bien! Hablemos ahora de los proximos pasos, codigo intermedio a Assembly
[Episodio 5](https://anchor.fm/francisco-molina16/episodes/Hablemos-del-Sprint-3-e1aji74)
Angular Change Detection-Detaching the Change Detector
Tags: angular
Published: 2021-07-10 03:25:25

Hi all, in this series we are discussing Angular Change Detection, in the last post we discussed the OnPush change detection strategy, in this, we will see how can we customize the change detection using attaching and detaching change detector.

#### Detaching the Change Detector
So the concept here is like when in the component we detach the change detector, Angular will not perform change detection for that component and its subtree, and when we reattach it change detection will happen.
So let us see this with an example, full example can be referred from [GitHub](https://github.com/nikhild64/change-detection) and [Stackblitz](https://stackblitz.com/github/nikhild64/change-detection).
Here we have 2 components parent and child, and we detach the child comp from the change detection, and based upon some condition we will attach it.
For this, we will need to inject ChangeDetectorRef in the constructor to be able to make use of this approach.
````typescript
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  constructor(private cdr:ChangeDetectorRef) { }

  ngOnInit(): void {
    this.cdr.detach();
  }
}
````

The parent component has a data variable which we are showing in that component and also passing it to the child component as Input, and the data is displayed on HTML template other than this we have a button in the parent component to increment the value of data and two buttons in the child component one to detach and other to reattach the change detection, the setup will be as below screenshot
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shjuujwhnk7vihzgt2y1.png)
Now if you click on the increase value button you will see value is changing in both components, now click on Detach button and try to increase the value by the button which will cause the value in the parent component to change but not in the child component.
To get the latest value you can click on Reattach button then the angular will perform the change detection and you will see the latest value in both the components.
To experiment with the example you can try in below StackBlitz terminal.
Hope you were able to understand how we can take charge of change detection with help of ChangeDetectorRef.
If you liked it please share it with your friends or if any suggestions reach me out on [Twitter](https://twitter.com/nikhild64) or comment below.
Till next time Happy Learning!

{% stackblitz change-detection-cdr view=preview %}
JavaScript Promises
Tags: javascript
Published: 2021-07-10 03:06:47

## What is a Promise?

A Promise is an object in JavaScript used to handle asynchronous operations. They can handle multiple asynchronous operation and provide better error handling.

A Promise is always in one of the three states.
pending - This is the initial state, we do not know if it is fulfilled or rejected.
fulfilled - This indicated that the operation has completed successfully 
rejected - This indicates that the operation has failed 

## Why Promises ?

Promises help us deal with asynchronous code in a far more simpler way compared to callbacks.
Callback hell can be avoided with Promises. 

Callback hell is resulted when a lot of code is written and executed from top to bottom without any asynchronous functions.

## How to work with promises

### Creating Promises


```
const promise = new Promise()
```

### How to check if the promise is in pending, fulfilled or rejected state?


```
const promise = new Promise((resolve, reject) => {

})
```


Promise constructor takes only one argument. That is a callback function.
Callback function takes two arguments, resolve and reject
resolve and reject functions are typically called after an async operation


```
const promise = new Promise((resolve, reject) => {

	//when the promise got fulfilled
	resolve()
})
```

resolve is a function which is called when the state changes from pending to fulfilled.


```
const promise = new Promise((resolve, reject) => {
	//when the promise got rejected
	reject()
})
```


reject is a function which is called when the state changes from pending to rejected.


```
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
)}

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject()
  }, 2000)
)}

promise.then()
promise.catch()
```


```
const onFulfillment = () => {
  console.log("Promise is fulfilled")
}
const onRejected = () => {
  console.log("Promise is not fulfilled")
}
```


The onFulfillment and onRejected are used as callback functions in promise.
Callback functions are functions that are passed in to another function as arguments

The Promise method gives us the access to two functions. They are then() and catch()

We call these functions as
promise.then()
promise.catch()

If the promise status is changed from pending to fulfilled, then() is invoked.
If the promise status is changed from pending to rejected, catch() is invoked.


```
promise.then(onFulfillment)
promise.catch(onRejected) 
```


## Promise Chaining


```
fetch(url)
.then(process)
.then(output)
.catch(handleErrors)
}
```

		
The process() function will wait for the fetch() to complete and the output() will wait untill the process() is completed.

If the fecth(), process() and output() promises are rejected, handleErrors() is called.

##Conclusion

There is no guarantee of exactly when the operation will complete and the result will be returned, but there is a guarantee that when the result is available, or the promise fails, you can execute the code based on the result or handle the error if the promise is rejected.
How do DNS work?
Tags: webdev, dns, internet, domain
Published: 2021-07-10 02:55:01

Having been using the internet for a pretty lumpsum part of my life, the how's of how the internet works has always been intriguing to me. Skimming through YouTube videos on the same, yielded in a new word called DNS. So what exactly is DNS? And how does it play a role in the how's of the internet?


DNS? Well, it stands for Domain Name System. Let's dwell more into it.

We know that computers process through numbers. We visit a website by typing in words in the address bar. This gets converted into series of numbers called IP addresses by the DNS.

#### Browser Cache
DNS first looks up the browser's cache to see if it can find the website, and then proceeds to check up on the system cache of the OS. 

#### Resolver 
Now, if we DNS can still not find the website, it proceeds to send a request to the ISP (Internet Service Provider). Here, there is a resolver server which tends to search through it's cache. It then processes a request to the root server. The root server knows to locate the TLD (Top Level Domain) such as .COM. 

But what if it it doesn't have the answer?

#### Root Server
The browser cache saves the information request, so that it does not need to ask the root server again. There are about 13 servers stationed all over the globe and the root servers sit on the top of the DNS hierarchy. These are operated by 12 different organizations and their name ranges from [letter].root-servers.net where the [letter] ranges from A to M.

There are plenty other organizations as well who provide physical servers distributed across. So fret not, the internet isn't solely dependent on the 13 servers alone. 

Oh and the root server forwards the request to the other servers.

#### TLD (Top Level Domains)
TLD's belong the Internet Corporation for Assigned Names and Numbers (ICANN). Of which .COM is the earliest, dates back to 1985. These are available in country codes and 2 native languages as well! 

Ok, but what did the other server respond to the request? Well, it seems to not have the website, but it gives the 'name servers'. So, now we have the authoritative name servers for our request.

#### Domain Registrar
The website domain can be purchased through the various domain registrars available (eg: goDaddy, etc.,). These registrar's communicate to the TLD's of the authoritative domain servers.

This information is stored with multiple domain registrars, for fast accessibility and safety during a crash or failure. You can run a WHOIS query and find the authoritative name server for your website.

Oh, and finally the domain registrar gives the IP address for the requested website. That's it. 

#### Summary
Browser cache - OS cache - Request to ISP - Resolver server cache - Root server locates the TLD - Requests other servers - Receives authoritative name server - Domain registrar - IP address - back to the browser in a whoosh! 


**Hope this was simple!**

Thank you for reading! :) Also, I document my journey and experiences on [Twitter](https://twitter.com/themohammadsa) and [LinkedIn](https://www.linkedin.com/in/themohammadsa/).
count increasing text
Tags: swiftui, swift
Published: 2021-07-10 01:52:56

Hello, great hackers. I'm a Japanese dog.  
Please use my trivial "AnimationReader" to animate text, with dinamic number.  
such as increasing count, or to control state of somethting.

## ContentView.swift

Sample

```ContentView.swift

import SwiftUI
struct ContentView: View {
    @State var count: Int = 0
    var body: some View {

        // observe count
        AnimationReader(count) { value in
            // use value instead of raw count
            Text("total: \(value)")
        }

        // test
        .onAppear {
            withAnimation(.easeInOut(duration: 10)) {
                count += 99
            }
        }
    }
}

```

## AnimationReader.swift

```AnimationReader.swift

import SwiftUI

fileprivate struct AnimationReaderModifier<Body: View>: AnimatableModifier {
    let content: (CGFloat) -> Body
    var animatableData: CGFloat
    
    init(value: CGFloat, @ViewBuilder content: @escaping (CGFloat) -> Body) {
        self.animatableData = value
        self.content = content
    }
    
    func body(content: Content) -> Body {
        self.content(animatableData)
    }
}

struct AnimationReader<Content: View>: View {
    
    let value: CGFloat
    let content: (_ animatingValue: CGFloat) -> Content
    
    init(_ observedValue: Int, @ViewBuilder content: @escaping (_ animatingValue: Int) -> Content) {
        self.value = CGFloat(observedValue)
        self.content = { value in content(Int(value)) }
    }
    
    init(_ observedValue: CGFloat, @ViewBuilder content: @escaping (_ animatingValue: CGFloat) -> Content) {
        self.value = observedValue
        self.content = content
    }
    
    var body: some View {
        EmptyView()
            .modifier(AnimationReaderModifier(value: value, content: content))
    }
}
```

Thanks to read
5 Chrome Extension to make Web Dev more Interesting
Tags: beginners, webdev
Published: 2021-07-10 01:36:29

Ever Happened that you wanted to make a project and surfing over internet to find similar websites to get inspirations, so for that you need some tools which I have listed here these are so useful to me and popular as well so might know about some.

![5-extensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqv4stfg1izxd4dznwa7.gif)
<hr>
## WhatFont
![WhatFont](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9u0iv1k88b8vem2tnj2.png)
Beside `Comic Sans` and `monospace` there are many fonts and to choose the right topography can be sometimes pretty daunting and for that we **WhatFont**

WhatFont will help you Identify the font used in the websites.

## Fonts Ninja
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f5rjd1lk1grif19o0c8.png)
WhatFont is get but it don't give much information if you want more like sample text or more info about the font then use font ninja it's feels like an upgrade from what font

Font Ninja have a better UI and I use this rather What Font
![Better UI Font Ninja](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39c3ob7erk7jlvj0gh2y.png)

## ColorZilla
![ColorZilla](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpo8pwzd5ou3khg6p5ly.png)
When we are done with font we need colors for them so for that we have ColorZilla it works as a color picker and tells the color we point at.

>Here's an tool for Choosing Colors for website
{% post https://dev.to/areeburrub/use-this-tool-to-make-color-palette-for-your-next-project-3hn1 %}

## CSS Peeper
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzebvzro3ad9ni6jvydd.png)
It's so handy to use and basically you can check styling of each elements in a website.
Yeah it gives everything from fonts to margin.
![CSS Peeper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am9nis0wny2y0pe2nant.png)
Feels like an upgrade to inspect mode.

## Wappalyzer
This extension will tell you which frameworks or plugins are being used in a website.
![Wappalyzer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn8yb0per3sdtz8ch9gl.png)

<hr>
I have listed only 5 but there are many more useful extension that you might know share it with me and everyone here.

>Follow me for more
{% user areeburrub %}
Turn your Create React App into a Progressive Web App in 100 seconds
Tags: react, webdev, javascript
Published: 2021-07-10 00:25:21

[Progressive Web Apps](https://web.dev/progressive-web-apps/) (PWAs) let regular apps become accessible offline. They also have access to more features than regular apps.

React Apps need two features to become Progressive Web Apps.
First, they need a service worker, which does work in the background of the app. Second, they need a `manifest.json` file in the public folder, which includes the name of the app, the home page, and icons.

If you're starting fresh, you can use the Create React App template `cra-template-pwa` (or `cra-template-pwa-typescript`) to bootstrap this process. If you want to create a React app from the start like this, use the command `npx create-react-app app-name --template cra-template-pwa` or `npx create-react-app app-name --template cra-template-pwa-typescript`.

But, if you're like me, you didn't think to add this template in the beginning, and are wondering how to add it to an existing app.

## 1. `manifest.json`

`manifest.json` goes in the `public` folder.

Most parts are self-explanatory. You can generate this file with websites like [Simicart's](https://www.simicart.com/manifest-generator.html/).

Here's an example. Note that this requires `favicon.ico`, `logo192.png`, and `logo512.png` to be available in the `public` folder.

```json

{
	"short_name": "App",
	"name": "My App",
	"icons": [
		{
			"src": "favicon.ico",
			"sizes": "64x64 32x32 24x24 16x16",
			"type": "image/x-icon"
		},
		{
			"src": "logo192.png",
			"type": "image/png",
			"sizes": "192x192"
		},
		{
			"src": "logo512.png",
			"type": "image/png",
			"sizes": "512x512"
		}
	],
	"start_url": ".",
	"display": "standalone",
	"theme_color": "#000000",
	"background_color": "#ffffff"
}


```

## 2. `service-worker.js`

For a baseline, go to the [cra-template-pwa github](https://github.com/cra-template/pwa/tree/master/packages/cra-template-pwa-typescript/template/src).

Copy `service-worker.ts` and `serviceWorkerRegistration.ts` into the `src` folder.

Then, at the top of your `index.tsx` (or any entrypoint), import the service worker registration like so:

```typescript

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

```

At the bottom of your `index.tsx`, add the following code to opt into an "offline-first" app:

```typescript

serviceWorkerRegistration.register();

```

[Learn more about PWAs](https://create-react-app.dev/docs/making-a-progressive-web-app/)