teleren/devto huggingface dataset:
Create your own Operating Systems: From 0 to 1
Tags: linux, devops, beginners, opensource
Published: 2020-09-07 18:45:30

Hello friends,

I came across this few days ago. However, this is 4 year old project by Tuhdo and still active.

This project doesn't require you to be very expert in linux . If you are 15+ , you are welcome to create your own Operating System.

**Special note to my readers:**

1. Revisit my article -desktop in docker. Compare the importance of kernel etc between LXC and docker. List the resources you need to build a great OS which is compatible with morden containers technology.
2. I mentioned gvisor in many articles. This is google project. Your new OS may be inspired from it.

3. You can also create your own distro. If you need a desktop operating systems then, you need Desktop Environment. 

4. Easiest way to create desktop environment is to alter the script of already available desktop. For example, you can change folder icon with yours own folder icon by putting a file inside .

5. There is something more about hardwares: Intel is doing a project it's called clearos. They wanted to create a distribution which is more compatible with Intel. 

6.  There is site called "Distrowatch". Once you are done , please share there. 

Visit this tutorial on GitHub:
https://tuhdo.github.io/os01/


######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).

###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)

Imagecredit: Pixabay, manishfoodtechs,giphy
COVID-19 Recovered Meter - Easy!
Tags: html, css, javascript, bootstrap
Published: 2020-09-07 18:38:59

Let's make a COVID-19 Recovered Meter.
Grab your text editor and make 3 files:
<code>index.html</code>, 
<code>style.css</code> and 
<code>main.js</code>.
Starting with index.html
{% gist https://gist.github.com/DecemberKaushik/ac3fca2df6332d997b19f7de1cae0a23/82ef513ebd0a886c19342b0231bdbf585f9cfda2 %}
For now, I'm using Bootstrap for clean UI.
Next, add a card and a progress bar. 
{% gist https://gist.github.com/DecemberKaushik/ac3fca2df6332d997b19f7de1cae0a23/672c413cab244273b6beadc250cc38bd6dfb9a1f %}
Keep <code>style="width: 0%;"</code>, <code>aria-valuenow="0"</code>, <code>aria-valuemin="0"</code> and <code>aria-valuemax="100"</code>.

<h3>For <code>main.js</code>:</h3>
I'm using COVID-19 API from Postman.
{% gist https://gist.github.com/DecemberKaushik/6a0049119c524de21eaa6955dcd411fb/981b91fda089e65c16275ba979f14a226e3abe54 %}
<code>data.Global</code> will bring global data including new cases, recovered, new deaths and total cases, total recovered and total deaths.
{% gist https://gist.github.com/DecemberKaushik/6a0049119c524de21eaa6955dcd411fb/d9a4a6b1b2149a164271b68d3d78b580095cad3b %}
Putting total cases in <code>Total = data.Global.TotalConfirmed;</code>, total deaths in <code>TDeath = data.Global.TotalDeaths;</code>, and total recovered in <code>const Trec = data.Global.TotalRecovered;</code>

Later they can be inserted in their respective text field. <code>document.getElementById("total").innerHTML = Total;
    document.getElementById("trecd").innerHTML = Trec;
    document.getElementById("tdeaths").innerHTML = TDeath;</code>
For for the percentage, we need to decide total recovered numbers by total cases and the value will be stored in <code>decM</code>, and will be multiplied with 100 to get the percentage. The percentage is stored in <code>perct</code> after rounding using <code>Math.round()</code>.
<code>
    const decM = (Trec/Total);
    const perct = Math.round(decM*100);
    console.log(perct)</code>

Now for making the progress bar dynamic, select the progress bar. Here it is selected with class <code>progress-bar</code>.
<code>const prog = document.querySelector(".progress-bar");</code>
Set the value of the attribute <code>aria-vlauenow</code>. Kept it 0 earlier to get a smooth animation. Also the width can be changed with the DOM, as below.
<code>prog.setAttribute('aria-valuenow', perct);
    prog.style.width = perct+'%';
    prog.innerText = perct+'%';</code>.
After all these, time to keep the card in center. It looks clean lol.
{% gist https://gist.github.com/DecemberKaushik/0660d6a8211f3294353c17b10ff4c54a %}
Display Type: Flex
Direction: Column.
Align Items: Center (Brings in everything in center.)
Justify Content: Center (Brings it in the center of the page.)
Height: 100vh (Takes 100% height of a page. Making it feel like a native app.)

And there you have it folks! A clean looking, not depressing COVID-19 Recovered Meter. 
<br>
<a href="https://covus.vercel.app/">Try Demo</a><br>
<a href="https://github.com/DecemberKaushik/covus">Source Code</a>
History Is Your Friend
Tags: linux, devops, beginners
Published: 2020-09-07 18:26:21

# Linux History Command

If you leverage and utilise the command line history, you can save a lot of time on a daily bases. You can also use it to gain a better under standing of how a newly discovered server is administrated by viewing the history of commands run.

## How does it work? 

Just run the command;

```
paulmicheli@minime:~$ history
   23  sudo apt install python3.8
   24  sudo apt update
   25  sudo apt install software-properties-common
   26  sudo add-apt-repository ppa:deadsnakes/ppa
   27  sudo apt update
   28  sudo apt upgrade
   29  sudo apt install python3.8
   30  sudo apt install python
   31  sudo apt-get install python3.6
   32  sudo reboot
```
## A date & time stamp is always helpful

Having a time stamp of when the command was run can help im many different ways. 

For this to happen you will need to add the below to your .bashrc file and reload using the source command;

```
## History timestamp
export HISTTIMEFORMAT="%h %d %H:%M:%S "
export HISTSIZE=50000
export HISTFILESIZE=50000
```
```
paulmicheli@minime:~$ source ~/.bashrc
```
Now when you run the history command you'll see the date and time;
```
paulmicheli@minime:~$ history
   23  Sep 07 13:52:23 sudo apt install python3.8
   24  Sep 07 13:52:23 sudo apt update
   25  Sep 07 13:52:23 sudo apt install software-properties-common
   26  Sep 07 13:52:23 sudo add-apt-repository ppa:deadsnakes/ppa
   27  Sep 07 13:52:23 sudo apt update
   28  Sep 07 13:52:23 sudo apt upgrade
   29  Sep 07 13:52:23 sudo apt install python3.8
   30  Sep 07 13:52:23 sudo apt install python
   31  Sep 07 13:52:23 sudo apt-get install python3.6

```
* the two additional arguments I have added increase the history size

## How to use it


| Command | Example |Description |
|---|---|---|
| !n | !27 | Execute nth command in history
|!!|!!| Execute the previous command
|blah|!ls| run the most recent command that starts with ‘blah’
|!blah:p| !ls:p|print out the command that !blah would run
|!* | !* |the previous command except for the last word
|!$|!$|	Last argument of last command
|!^|!^|First argument of last command

## Reverse searching

Press the `ctrl` key and the `r` key simultaneously. The below prompt will appear;

```
(reverse-i-search)`': 
```
Start typing the bit of the command you remember and you will see the most recent match from your command history;
```
(reverse-i-search)`ocke': docker ps
```
press `ctrl+r` again to cycle through all your `history` that match this search term.
```
(reverse-i-search)`ocke': docker stop 35e0e91e92de
```

## Removing history

There may come a time that you want to remove some or all the commands in your history file. If you want to delete a particular command, 
```
enter history -d <line number>
``` 
To clear the entire contents of the history file, execute 
```
history -c.
```
The history file is stored in a file that you can modify, as well. 
Bash shell users find it in their home directory as `.bash_history.`
What are some of the things you wish you knew starting out as a full-stack developer?
Tags: newbie, discuss, webdev
Published: 2020-09-07 18:23:21

Greetings everybody!

Full-stack development is a sea and it's so easy to get lost. It would be great to hear from all full-stack developers in the community. This would help newbies such as myself who are looking to get into full-stack development!
Thanks again! :)
Looking for React Mentor 
Tags: react, javascript, reactnative, webdev
Published: 2020-09-07 18:16:26

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0jw1a5wnq7i9dkwn8mv2.jpg)
Hi, I am a web developer, love to learn new technologies. I have great knowledge of Data Structure and Algorithms. As I am learning **React**, I want to save my time. I spent a number of days while looking for the proper solution of the problems. I am looking for a mentor to help me while learning react.

Thanks in advance!
Keyword Rank Checker PHP Script
Tags: php, google, seo, api
Published: 2020-09-07 18:12:05

# What Does SERP Mean?

SERP or Search Engine Result Page refers to the way the search engine displays search results. Among SEO professionals SERP most often refers to how will a page show up in the results and the page ranking in the search results. This post will be about Google SERPs.

*Google Webmaster Tools* has Search Analytics that show you your keyword rank for certain pages. But, there’s a delay of about 4 days in the data collection. Also, you can only do that for your own site, and not for the competition.

# How to Create Your Own Keyword Rank Checker Using PHP

Using the Google Custom Search API, let’s see how we can create our own search engine keyword position checker PHP script.

You can take this even further. You could use the same code and store the position for each keyword and link. This way you can create your own free SERP rank tracker. This could potentially be a very powerful SEO tool similar to what you get for high paying SEO tools like Ahrefs or Semrush.

# Before Using The Google SERP Checking PHP Script

The SERP Checking PHP script below works with the Google Custom Search API. In order to use the script with the API you will need follow these steps:

Activate Google Custom Search API and create credentials by going here: https://console.developers.google.com
Create a Google Custom Search Engine here: https://cse.google.com/cse/all
You can test that your credentials and the custom search engine is working here: https://developers.google.com/apis-explorer/?hl=en_US#p/customsearch/v1/search.cse.list

# Where to Get the Keyword Rank Checker PHP Script?

After you setup the Google Custom Search API, simply go here and download the PHP script:

[php keyword rank checker](http://www.coding-dude.com/wp/php/serp-checker-php-script/)

Alternatively, you can check out this Github repo:

https://github.com/codingdudecom/search-engine-keyword-position-checker-PHP-script/
Initial Post Hi!
Tags: python, welcome
Published: 2020-09-07 17:53:10

I'm a self taught programmer of 4 years. I've been recently studying at [Bottega](https://bottega.tech). I'm also studying QA Engineering at [LinkedIn Learning](https://www.linkedin.com/learning/paths/become-a-test-automation-engineer). I was encouraged by my peers to start a Dev.to blog and I thought why not? So in these blogs I will be discussing various projects in breakdown of what I'm working on in minute detail. I will include code blocks with explanation as well.
Display your recent Last.fm and Spotify listening activity on your GitHub profile README
Tags: github, showdev, spotify, lastfm
Published: 2020-09-07 17:51:43

GitHub recently introduced profile READMEs as a way to enhance your personal GitHub profile with Markdown and HTML.

I was inspired by the creativity of the open-source community - through various widgets like [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) and [spotify-github-profile](https://github.com/kittinan/spotify-github-profile) - to create something for all the music lovers out there.

I created two tools (hosted on [Vercel](https://vercel.com)) that lets you display your recent Last.fm and Spotify listening activity as a card so they can be embedded into your profile README.

### Last.fm Recently Played README
![My scrobbles](https://lastfm-recently-played.vercel.app/api?user=JeffreyCA01)

To get started, just add the following to your README and set the `user` query parameter to your Last.fm username.

```md
![My scrobbles](https://lastfm-recently-played.vercel.app/api?user=JeffreyCA01)
```

For more configuration options, see the [GitHub repo README](https://github.com/JeffreyCA/lastfm-recently-played-readme#link-to-lastfm-profile).

The Vercel app uses the Last.fm API (unauthenticated) to get your recent scrobbles, since it's all public information.

### Spotify Recently Played README
![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)

First, you'll need to connect your Spotify account with the tool by clicking the button below.

[![Authorize app](https://github.com/JeffreyCA/spotify-recently-played-readme/raw/master/assets/auth.png)](https://spotify-recently-played-readme.vercel.app/)

#### Why is this needed?
Since your Spotify recent listening activity is not public, the Spotify API requires you (the account owner) to authorize the app to be able to access that information.

Your Spotify username, access token, and refresh token will then be stored on a secure Firebase database, so that access tokens can be automatically refreshed in the background after they expire (in 1 hour).

#### Continuing on
After granting permission, just add the following to your README and set the `user` query parameter to your Spotify username.

```md
![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)
```

For more configuration options, see the [GitHub repo README](https://github.com/JeffreyCA/spotify-recently-played-readme/blob/master/README.md#link-to-spotify-profile).

### Final thoughts
This was a fun little project I developed using TypeScript, Next.js/Vercel, and React. I also learned a lot about OAuth 2 authorization while working with the Spotify Web API.

Everything is open-source, you can check it out on GitHub:

https://github.com/JeffreyCA/lastfm-recently-played-readme
https://github.com/JeffreyCA/spotify-recently-played-readme

Bug reports, feature requests, and code contributions are welcome!
App deployment & Hosting – Available at UI Bakery
Tags: nocode, lowcode, webdev, uiweekly
Published: 2020-09-07 17:49:34

Hey devs!

The App Deployment & Hosting feature's finally available at UI bakery, a low-code web app building platform!
From now, you can deploy the web app you've built in UI Bakery in one click, and host it either on a dev domain or add and use a custom one. Everything's – without leaving the platform.

Pop in UI Bakery & check how this new feature works: https://app.uibakery.io/auth/login
3 Angular Dependency Injection Tips
Tags: angular, webdev, productivity, tech
Published: 2020-09-07 17:45:52

Angular's Dependency Injection System is a magic way to deliver the classes that house your business rules, or encapsulate other functionality, to your components. Here are three tips for using the dependency injector that are good to keep in mind as you learn, use, and master Angular.

**1. Prefer ProvidedIn**

When you create services, by default, use the ProvidedIn setting to put those services into the root injector. This gives you the safest, easiest and simplest way to create services. You won't forget to add them to your module, and this method works best for 99.9% of all use cases. It looks like this:

![image](https://cdn-images-1.medium.com/max/800/0*fzng1mFL_07UexUN?)

The string 'root' has to be exactly that. That registers your service, and lets you just keep coding, no need to open up your module file and add it there. Easy Peasy.

**2. Learn useValue**

We default to only using services that are "classes" meaning full-on, constructed classes with properties, methods, etc. But what if you have an object you got from somewhere that you'd like to use, such as from a 3rd party library, or a JSON file, or what if you want to inject just a single value, like a timeout value.

![image](https://cdn-images-1.medium.com/max/800/0*0KXcuo1HUpTfR_Fp?)

Or maybe a collection of values

![image](https://cdn-images-1.medium.com/max/800/0*6GBqQ8F8UQtLDTnF?)

There's no functionality here, so a class can be overkill. And if you get these values from somewhere else, you would need to then wrap them in a class.

To make this easier, you can just take single values, or simple objects, and create services out of them if you learn the useValue provider. You can find documentation on that [here](https://is-tracking-link-api-prod.appspot.com/api/v1/click/5197994201186304/~Tokens.Link~).

**3. Non-Root Injection is a Code Smell**

When creating services, registering them in the root injector is the default, which you can do using either the ProvidedIn syntax shown above, or by registering it in the providers section of your app.module file.

There are plenty of reasons to register a service somewhere else besides your root injector, and instead provide them in a component, a directive, or in a pipe. But whenever you use one of these methods, you should DEFINITELY understand what you're doing, and the ramifications of that decision. So always consider this method a code smell. If you are considering using it, double-check that you are making a good decision, and actually need to do that.

And there you have it: three tips for Angular's dependency injection.

Happy coding!

Signup for my newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=angulardependencyinjectiontips&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=angulardependencyinjectiontips&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
iPhone 7 animated replica using HTML, CSS and Javascript
Tags: html, javascript, css, showdev
Published: 2020-09-07 17:43:44

Hey there guys. This one is a fun little experimental animation I am working on.

I use an iphone 7 as my daily driver and wondered if I would be able to replicate the same UI with smooth transitions and animations on the web. So I used a library called [gsap](https://greensock.com/gsap/) for all the animations and transitions. It was very easy to create most of the animations using gsap because of its ease of use. It is still in progress and just a fun project that I like work on in my free time.

Here is what I am at now.

{% vimeo 455526811 %}

Here is a live version of the phone. There are minor bugs since it is a work in progress and is experimental.

https://iphone-7-ios13.netlify.app/

Some of the fun facts in the phone are
 - The <b>datetime</b> on the phone is an actual timer written in javascript to display the current date and time.
 - The <b>battery percentage</b> is based on the device it is viewed on. In the video, the battery showed 70% which was the actual battery percent of my Macbook. Desktops will always show 100%.
 - If the device is not unlocked for 3 seconds, the <b>Press Home To Unlock</b> message appears just like in the real device. (Was very hard to code this text animation)
 - The <b>Quick swipe settings</b> was built using [jquery slider](https://jqueryui.com/slider/). (The css was totally cleaned up and made to look like a finger swipe)
 - The <b>brightness</b> of the device was just controlled using the css brightness filter and stored in a javascript variable for keeping the brightness the same when unlocking the device again.

I did not build this project for any particular use case. I just wanted to explore if these kind of smooth and good animations and transitions could be done on the web with ease. 

If you do like this fun experiment please do like this post. :)
11 - Getting a Masters Degree with a GI Bill, Silly things recruiters say, FANG interview tips ft. Roland Heintze
Tags: fullstack, mastersdegree, veteran, startup
Published: 2020-09-07 17:40:31

{% spotify spotify:episode:1J6ioGH2S96kAM2yBUjoTx %}

On 02 September, I got a chance to reconnect with a friend of mine. A veteran of the United States Marine Corps. A Senior Full Stack Engineer. A Master's Degree Student. To me he's kind of like if you combined Mr. Rogers with Bertram Gilfoyle of Silicon Valley. I get to talk with **Roland Heintze**!

We sit down and talk about our experience at a startup, his experiences as a Marine and as a software developer and how they compare and how he balances work and studying for his Master's degree.


**Georgia Tech Courses on Udacity**: [https://www.udacity.com/georgia-tech](https://www.udacity.com/georgia-tech)

**GI Benefits**: [https://www.va.gov/education/about-gi-bill-benefits/how-to-use-benefits/](https://www.va.gov/education/about-gi-bill-benefits/how-to-use-benefits/)

**Cracking Coding Interview**: [https://www.barnesandnoble.com/w/cracking-the-coding-interview-gayle-laakmann-mcdowell/1122334602?ean=9780984782857](https://www.barnesandnoble.com/w/cracking-the-coding-interview-gayle-laakmann-mcdowell/1122334602?ean=9780984782857)