teleren/devto huggingface dataset:
Easy Mode Dark
Tags: javascript, css, darkmode, dev
Published: 2020-09-04 18:15:24

#### I would like share a esay dark mode with CSS and JavaScript

I continuos learn JS and CSS this a example using variables in CSS, and use Selectors, Events, Class in JS

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Dark Mode</h1>
    <button id="app">Change the page color</button>
</body>
</html>
```


```css
 :root {
	--black: #000;
	--white: #fff;
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
	font-size: 50px;
}

#app {
	border: none;
	padding: 10px 20px;
	background-color: #ececec;
	color: var(--black);
	text-transform: uppercase;
}

.light {
	background-color: var(--white);
	color: var(--black);
}

.dark {
	background-color: var(--black);
	color: var(--white);
}
```

```javascript
let $btn = document.querySelector("#app"); // get button tag
let $html = document.documentElement; // get html tag and the content
let $body = document.body; // get body tag and the content
let darkMode = getComputedStyle($html).getPropertyValue("--black"); // Here I get the value it has: CSS root 
let ligthMode = getComputedStyle($html).getPropertyValue("--white"); //Get the value that has: CSS root but in this case the color white

$btn.addEventListener("click", (e) => { // Added a listener to the button

	if (e.type === "click") { // Evaluated the type of event that ran
		$body.classList.toggle("dark"); // Add a class 
	}
	$body.classList.toggle("light"); // Remove a class
});
```

I hope you like it, as a practice for handling the Document Object Model.
Reverse String using Reverse();
Published: 2020-09-04 18:14:53

Para revertir un string y usar el metodo Reverse es cierto que en principio no podriamos hacer algo como esto:

str = "Hola Mundo";
str.reverse();

En esta linea de codigo nos mandaria un error ya que el metodo reverse solo se puede usar en arreglos.

Por eso para hacer el uso de reverse tenemos que convertir primeramente la cadena de texto en un array

```javascript
str = "Hola Mundo";
return str.slipt(" ");
```

Con esta instruccion logramos convertir nuestra cadena de texto en un arreglo es importante conocer que parametros recibe el metodo slipt(separador, limite);

El resultado seria el siguiente: 

```javascript
> [ 'Hola', 'Mundo' ]
```

Ahora podemos usar el Metodo reverse para revertir el arreglo

```javascript
return str.slipt(" ").reverse();
> [ 'Mundo', 'Hola' ]
```

Ahora para que no quede en un arreglo podemos usar el metodo join()

```javascript
return str.slipt(" ").reverse().join(" ");
> Mundo Hola
```
My #100DOC - Day 9
Tags: 100daysofcode, challenge, log
Published: 2020-09-04 18:06:09

### Day 9: September 4, 2020

#### **Today's Progress**: 
1. **[Worked on my Addicted Developer Twitter Bot project](https://github.com/pablohs1986/addictedDEV_TwitterBot)** (3h):<br>I worked on my bot. First, I finished deploying it on Heroku, for which I had a small problem that [I could solve by myself](https://es.stackoverflow.com/questions/387323/error-code-module-not-found-al-intentar-desplegar-app-en-heroku). I also thoroughly set up my Heroku account and then implemented a new function for the bot to post the status of my # 100DOC challenge.
    
#### **What I learned**: 
* How Heroku works.
* Set my environment variables in Heroku.
* Implement the [dotenv module](https://www.npmjs.com/package/dotenv) in my projects.

#### **Total time**:
3h.
Day 50: Defining Relations With TypeORM, Second shot.
Tags: 100daysofcode, typescript
Published: 2020-09-04 18:02:27

Here is my second shot at typeORM.

Well not so sure i got it right but here is the code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i8ex3cfwen1nvt1tp2us.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8o4hdxx1notekryr7wws.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y3j3vukbcimlfkswgbvc.png)


Output from terminal after setting logging to true.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u13387dpz1ctirkjg6mn.png)


When to use [jointable] (https://stackoverflow.com/questions/30288464/when-should-i-use-joincolumn-or-jointable-with-jpa)

_day 50_
An "Aha" moment about Object Oriented Programming
Tags: oop, beginners, javascript, react
Published: 2020-09-04 18:01:28

I'm not sure how to hashtag my blog to beginner only. If you're an experience developer, you can skip this blog :P. 

This concept I'm about to write, is so fundamental with many experience developers, yet so strange to a newbie like me.
Also, I'm not sure everything I understand is correct, so please correct me when I'm wrong, and don't take this blog to heart, but to the surface, make things easier to blog. 

Since learning Java, I realized that by learning Python, Ruby and Javascript, I missed one of the most important part in programming: practicing OOP (Object Oriented Programming) concept throughly. Unlike Java or C#, languages like Javascript are more about functional programming, it was created for functional programming. Much later, Javascript started implement classes so it can do OOP things. Up until my recent internship, which forced me to use pure React without Hooks (Hooks makes you use functional components), I don't have much experience with OOP. And while unable to negotiate my boss to use functional components with my project, I had to crawl back to the fundamental and started learning about classes. It was painful partly because of the syntax, but I don't know why I had to do it, until I start getting the hang of it and then connecting things with what I've learned, I started to embrace the resembles of React to classes.

Now, I mentioned that Java helped me understand OOP. But, you don't need to know Java. In Java, you must write everything within a class, want to write a function ? Put it in a class. Can't do it without classes. That's all you need to know. Javascript has Class as well, even though javascript was not created to use Classes, but it eventually have Classes. So, you can think of Javascript's Classes are for OOP wannabes.

In summary, class resembles OOP and OOP resembles class. React is created based on OOP. So, React resembles OOP and resembles Class. React == Class == OOP . I know, my silly comparisons, lol.

With this realizations, I started to be able to imagine React is a blue print of a class, React Components are like, a function in a class, that can take in props ad parameter arguments, and pass it around and between other functions. And states in React, is like a local variable inside a function. And you can go on and on... 

In my opinions, I was learning many things that are very shallow at the same time and for a while I couldn't connect anything with anything. The moment I realized that this concept and the connections between classes and OOP, it feels like I now discovered the universe's fundamental blocks. And I'm glad that this discovery doesn't make things harder for me, but things gets easier AND, make me excited to learn more!
Extracting a list of tuples from a list of dictionaries, some values separated with commas and single quotes and some without
Published: 2020-09-04 17:58:46



I have a list of dictionaries, each dictionary contains:

First name
Middle name
Last name
Title
Address
Email address
Loyalty program For one client. Some of this information may be missing
segment = [{'first-name': 'Elsa', 'last-name': 'Frost', 'title': 'Princess', 'address': '33 Castle Street, London', 'loyalty-program': 'Gold'}, {'first-name': 'Anna', 'last-name': 'Frost', 'title': 'Princess', 'loyalty-program': 'Platinum'}, {'first-name': 'Harry', 'middle-name': 'Harold', 'last-name': 'Hare', 'title': 'Mr', 'email-address': 'harry.harold@hare.name', 'loyalty-program': 'Silver'}]
For clients who have a physical address, I need to extract a list of tuples. Each tuple represents one client and contains their title, first name, middle name, and last name in that order if defined, and the mailing address.

My code appears to be working.

However, within each tuple, there needs to be single quotation marks around the whole and not individual parts of a clients name. There also needs to be quotation marks around the address. A comma needs to separate the address and the full name.

('Princess Elsa Frost', '33 Castle Street, London')
My code is returning the right information, but the elements of a patients name are separated by commas and single quotation marks


def process_clients(segment):

    #Creating a list to contain tuples with client full name and mailing address. 
    updated = []
    #Interacting through each dictionary, which represents each client
    for dic in segment:
        newclient=[]
    #Adding clients with a mailing address
        try:
            add = dic["address"]
        except:
            continue
    #Adding, in order, the "title", "first-name", "middle-name", "last-name" and "address" of each client
        for data in ["title", "first-name", "middle-name", "last-name", "address"]:
            try:
                value = dic[data]
                newclient.append(value)
    #If "title", "first-name", "middle-name" or "last-name" is not present in a clients data, no action is taken
            except:
                pass
    #Additing the tuples with extracted client data to the created list        
        updated.append(tuple(newclient))
    return updated


process_clients(segment)


[('Princess',' Elsa ',' Frost ', '33 Castle Street, London')]
Go to the Detail page of Product or Blog - React with demo
Tags: react, javascript, html, css
Published: 2020-09-04 17:52:03

### [Live Demo here](https://react-detail-page-of-blog-product-page.netlify.app/)

#### Currently I don't know React Hooks but I have used it because ``useParams`` hooks from react-router-dom don't support in class base component

##### If you want to do with class component check Net ninja tutorial.

{% youtube SoOTQW4-tYk %}

[Github Code](https://github.com/Alidhuniya/got-to-Detail-page-React-demo)
Turn your Github issues to notes .. Yay 😎
Published: 2020-09-04 17:42:14

This theme will turn your repository issues into notes.

Also the color of your labels will be used as color for the tags on the site.

## Have a look at this [Live demo](https://github-issue-notes-theme.vercel.app)

![](https://dev-to-uploads.s3.amazonaws.com/i/tzk3kr759vwu7jx7ich0.png)

## How to deploy

First of all make sure you use a private repo because in a public repo anyone will be able to make issues & they will appear on your site.

> My repo with issues

![](https://dev-to-uploads.s3.amazonaws.com/i/op9bwhljju366rupisea.png)

> Few Labels that I made

![](https://dev-to-uploads.s3.amazonaws.com/i/m8aflgb3mgn4e7qiovac.png)

* First step is to change the labels for issues, because you probably dont wanna use the existing labels for your notes, your lables will be used as tags in the notes.
* Now Fork the project or download
* Open theme.config.js file and change username and repo name
* Get a personal access token from github
* Deploy on vercel and add personal access token as environment variable TOKEN.
* That's it now your lables will apprear on the sidebar and the issues will apprear on right.

---

Github Repo: [https://github.com/sharadcodes/github-issue-notes-theme](https://github.com/sharadcodes/github-issue-notes-theme)

---
PS: Don't forget to star :smile:
Best Python GIL overview yet
Tags: python
Published: 2020-09-04 17:35:39

Most of Python experienced programmers know what is the GIL (Global Interpreter Lock) keeping Python code thread safe no matter what operations we make on shared memory. 
Most of python programmers know when to use Multiprocessing vs Multithreading and Asyncio for intensive IO operations. 

This article really opened my eyes to why GIL chosen as ultimate solution in CPython's interpreter architecture and how it affected the community when extending CPython/Python:

https://realpython.com/python-gil

In this article I found great example to how CPython is not thread-safe - look for the example with "reference counter", beautiful example. 

What I really like is how the writer suggests a potential solution: Use locks for all Objects in memory and lock/unlock every operation it goes through. 

In a nutshell, this solution is problematic because it will create dead locks and performance degradation (locks require cpu) - which can turn away many developers. 
So the GIL is THE ONE LOCK for all threading operation that can be released by CPYTHON code (mostly happens on IO calls and Thread exit).
Organiza tu Startup class
Tags: netcore, net, cleanarquitecture, bestpractices
Published: 2020-09-04 17:22:44

Todo el tiempo necesitamos que nuestro codigo, además de que funcione sea entendible para los demas programadores.

Algo muy común es ver nuestra **startup class** o **startup.cs** un poco revuelta y aveces tener muchos servicios registrados, implementaciones, db contexts, configuraciones no es muy conveniente tenerlo todo alli, suele ser mucho codigo poco separado, poco organizado y un programador que se dirija a revisar tu codigo, para posteriormente realizar algún cambio puede ser un poco tedioso.

## Crea metodos de extension

Si creas metodos de extension de tu clase startup puedes tener el codigo mas organizado y la persona que necesite ir a tu codigo solo tendrá que ir a dichas implementaciones, por ejemplo : 

Esta seria mi clase startup con metodos de extension donde solo los estoy llamando y no escribiendo toda la logica o configuración de esta en el **ConfigureServices**.

![Screenshot_2](https://user-images.githubusercontent.com/38229144/92267626-44dd4880-eeb7-11ea-951d-3094e9235dce.png)

## Crea una clase StartupExtension.cs

En esta clase es preciso que sea **static** para que pueda ser llamada en la clase **startup**, con la siguiente estructura donde definas los metodos de extensión de la misma (Lamento los borrones 😁Cuestiones de seguridad). Ejemplo : 

![Screenshot_3](https://user-images.githubusercontent.com/38229144/92268052-1318b180-eeb8-11ea-9327-c1868513eb24.png)

## Manten la organización de tus implementaciones

Recuerda que la programación es lineal, ten cuidado como organizes tus servicios o implementaciones dentro de metodo **ConfigureServices** y tambien en el **middleware**.


##Sigue extendiendo 🐱‍💻

Si tu **middleware** necesita tener muchas implementaciones sigue extendiendo su funciones, por ejemplo cuando necesites hacer un log de los request que entren a tu api o proyecto web, lo correcto seria que llamaras esa implementación en tu **middleware** porque allí es donde pasan todos los request de tu applicación, asi que para estos casos muy especificos cuando tengas mucha logica o mucha configuración extiendelo!

Si te sirvio, no olvides dejar tu comentario y dar like a la publicación.

Sigueme en GitHub => https://github.com/Orbis25
System Design Analysis of Google Drive
Tags: programming, datascience, technology, architecture
Published: 2020-09-04 18:01:24

---
title: System Design Analysis of Google Drive
published: true
date: 2020-09-04 17:08:06 UTC
tags: programming,datascience,technology,softwarearchitecture
canonical_url: https://towardsdatascience.com/system-design-analysis-of-google-drive-ca3408f22ed3
---

[![](https://cdn-images-1.medium.com/max/2600/1*JUhWkvrYvnei9JG_cApU5w.jpeg)](https://towardsdatascience.com/system-design-analysis-of-google-drive-ca3408f22ed3?source=rss-577e2119c7f2------2)

How do you design a system like Google drive?

System design is one of the most important and feared aspects of software engineering. This opinion comes from my own learning experience in an associate architecture course. When I started my associate architecture course, I had a hard time understanding the idea of designing a system.
One of the main reasons was that the terms used in software architecture books are pretty hard to understand at first, and there is no clear step by step guidelines. Everybody seems to have a different approach. And of course, there is a mental block also that these topics might be tough to understand.
So, I set out to design a system based on my experience of learning architecture courses. The first one is on Google Auto Suggestion. For this one, let’s design a cloud file storage service like Google drive. It’s a file storage and synchronization service, enables users to store their data on a remote server.
Now those who already used Google drive know that we can upload any size of files from any device, and it can be found on our mobile, laptop, personal computer, etc. A lot of us wonder how the system handles such a massive amount of files. In this article, we will design a google drive service!! This is by no means a comprehensive guide, rather it’s an introduction to system design and a good place to start your journey to be a software architect.

[Continue reading on Towards Data Science »](https://towardsdatascience.com/system-design-analysis-of-google-drive-ca3408f22ed3?source=rss-577e2119c7f2------2)

**Those who do not have an account in @medium, [here is the link](https://medium.com/p/system-design-analysis-of-google-drive-ca3408f22ed3?source=email-577e2119c7f2--writer.postDistributed&sk=44e2954bb58af4164b3eabcbf9e5f274)
Is AI a major threat to the majority of human jobs?
Published: 2020-09-04 17:00:22

AI is a short form for Artificial Intelligence. Artificial intelligence is the ability of machines to make decisions and perform certain tasks, commonly referred to as “Robots that can make decisions”. These machines are able to accomplish their work without the involvement of manpower. They are mostly used in factories for performing complex work in a short period of time, They are also able to perform day and night, of which humans require some rest time and a lot of workers for working night and days shift for performing the same task.

# Is AI a major threat to the majority of human jobs?

AI will not replace human jobs, AI will replace tasks. AI machines are like computers and smartphones that we use daily. Computers haven’t replaced human jobs. They have increased human productivity in their jobs. It is the same for AI, It will not take away jobs it will improve productivity and help us perform more in other tasks that AI will not touch.

# Why should one fear AI?

We have seen technologies of drones by Zipline save lives in Rwanda. These drones use AI to make life-saving deliveries ranging from urgent blood delivery to different health medication and materials. Every technology is feared in its genesis, It was the same for the internet. We can all agree that the internet has done more good than harm to mankind.

As a tech enthusiast, a tech contributor and most of all a human, I can’t ignore the danger that can be caused by unmanned machines. But instead of fighting against technology that can save, change and make our lives better, we should invest in technologies that can prevent the danger and set regulations for preventing and govern the production and use of this technology.

I leave this great video. Until next time.

**Jacques Nyilinkindi**

{% youtube kWmX3pd1f10 %}
How AI Learns To Read Lips?
Tags: machinelearning, developer, development, python
Published: 2020-09-04 16:45:37

In this study, the effect of other expressions other than the lip on the face on understanding and synthesizing what is said was investigated. For example, the words ‘park’, ‘bark’ and ‘mark’ in English can be easily confused. Indeed, only 25% to 30% of the English language can be distinguished by lip reading alone. A professional lip reader takes into account not only lip movements but also spoken subject, facial expression, head movements and grammar. And the most important features that distinguish this research from other lip-to-sound models are that they examine the unique face and speech style of each person and the contextual integrity of the sentence. And it is really being trained with much more data versus other models. 

For more please check my blog.
https://us.github.io/how-ai-learns-to-read-lips
How TF-Coder Works? (Explained)
Tags: showdev, development, machinelearning, developer
Published: 2020-09-04 16:43:06

How does TF-Coder synthesize the answers to TensorFlow questions in  StackOverflow at the ‘superhuman’ level? What are the technologies  behind it?
Check out my new blog post. 
https://us.github.io/how-tf-coder-works
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-09-04 16:40:28

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week — what was something you're proud of?

All wins count — big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄


**Have a great weekend!**

![Friday](https://media.giphy.com/media/d89VuJ4GflFfO/giphy.gif)
AWS CLI - Get tags for any object
Published: 2020-09-04 16:34:22

Here is small [goodie](https://github.com/virtiogroove/aws-helper-scripts/blob/master/get-tags.sh). Script to retrieve all tags from any resources in AWS.

I assume that you installed already [AWS CLI](https://aws.amazon.com/cli/) let us quick go through.

First you answer questions as 
*Profile to use*
*Region to scan*
*Resource type you want to get tags*

`echo Please enter profile to use`
`read profile`

`#Region to scan`
`echo Please enter region to scan`
`read region`

`#Resource type`
`echo What resource type you want to scan for tags`
`echo Please enter one of the following`
`echo customer-gateway \| dedicated-host \| dhcp-options \| elastic-ip \| fleet \| fpga-image \| host-reservation \| image \| instance \| internet-gateway \| key-pair \| launch-template \| natgateway \| network-acl \| network-interface \| placement-group \| reserved-instances \| route-table \| security-group \| snapshot \| spot-instances-request \| subnet \| volume \| vpc \| vpc-endpoint \| vpc-endpoint-service \| vpc-peering-connection \| vpn-connection \| vpn-gateway
read resourceid`

Next - script will get all resources in region and filter it against your requested resource.

*Note* - I choose to continue still querying  AWS API in the next steep, instead of working with local file, but instead on this step you can save results to file, and work with local *json* file instead  - e.g. remove everything starting with `--filters` and leave redirection to file.

`echo Gettign Resources RecourceType=$resourceid
aws ec2 describe-tags --filters "Name=resource-type,Values=$resourceid" | jq -r '.Tags[]| .ResourceId as $d|([$d]|@csv)'|sed 's/\"//g' >resources.txt`

Next - script will read resources.txt and will request tags. Again you will need to change next lines if you prefer to work from your local file

`for n in $(cat resources.txt);do (aws ec2 describe-tags --filters "Name=resource-id,Values=$n" --profile $profile --region $region && echo -n $n: >>$region-tags.csv) |jq -r  '.Tags[]|.Key as $k|([$k,.Value]|@csv)'|sed ':a;N;$!ba;s/\n/:/g' >>$region-tags.csv;done`

`#Cleanup csv`
`sed -i 's/:"/;"/g' $region-tags.csv`

Once done, CSV file is available in your folder with `$region`-tag.csv