teleren/devto huggingface dataset:
There are 4 different types of CHROME Browser. here's Why?
Tags: coding, discuss, webdev
Published: 2021-05-23 18:28:02

As we all know Google's Chrome Browser is most widely used web browser worldwide and available on all platforms, but do you know there are 4 Chrome available to use currently.
* Chrome
* Chrome beta
* Chrome dev
* Chrome canary

Google Chrome was released in 2008, and after that it brings several upgrades, whenever a upgrades come it fixes some bugs and brings some new feature which comes with some bugs.

So that's why Google have separated the browser into 4 release channels, each channel represent the stage in development.

## Chrome (stable)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jny9rah3k5nr6neg3yr0.png)
This is the most stable release channel of Chrome, it is released after several testing.
All features it have are nearly crash proof.
<hr>
## Chrome (beta)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5id70ox3c78cjvrzb5va.png)
As name describes this is the beta release channel, this is mostly the stable version and just have some minor bugs.
The Beta Channel gets latest update 2-3 months before stable update.
<hr>
## Chrome (dev)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/503s66s1m77hvncyp4ow.png)
This release channel is used by Google developers to test major changes on Google chrome, it may have some updates which will never come in beta or stable version.
Having test features make this version unstable and have so many bugs awaited to be fixed.
<hr>
## Chrome (Canary)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nhwykoaujjvjh8wyfs8.png)
This release is the most updated or say most unstable version of Chrome. It got it name from 'canary in a coal mine'.
This Build act as a canary for Google Chrome Developers, Google usually update it on daily basis.
Expose docker api on Ubuntu
Tags: ubuntu, docker, api
Published: 2021-05-23 17:48:24

Change file /etc/default/docker
```bash
# Use DOCKER_OPTS to modify the daemon startup options.
DOCKER_OPTS="--dns 8.8.8.8 --dns 8.8.4.4 -H tcp://127.0.0.1:2375 -H unix:///var/run/docker.sock"
```

Change file /lib/systemd/system/docker.service
```bash
EnvironmentFile=/etc/default/docker
ExecStart=/usr/bin/dockerd -H fd:// $DOCKER_OPTS
```

Run
```bash
sudo systemctl daemon-reload
sudo service docker restart
```

Run following to see open ports
```bash
lsof -i -P -n | grep LISTEN
```

If the port 2375 doesn't show up do a system reboot.
Converting XML to JSON in Rust
Tags: rust, json, xml
Published: 2021-05-23 17:43:34


I generally default to using JSON for data interchange but there are still a myriad of formats of XML out there, for which I have created the [xmltojson](https://crates.io/crates/xmltojson) crate. I originally wrote this one night to help me get an XML dataset into JSON so that I could use [PostgreSQL's](https://postgresql.org) `JSONB` column type, but I only recently published it to [crates.io](https://crates.io) since it may be useful for others.

**Cargo.toml**
```toml
[dependencies]
xmltojson = "0"
```


The `xmltojson` crate implements [Stefan Goessner’s xml2json](https://goessner.net/download/prj/jsonxml/) which results in a fairly straightforward conversion of XML data structure into JSON. Take the following XML for example:


```xml
<ol class="xoxo">
    <li>Subject 1
        <ol>
            <li>subpoint a</li>
            <li>subpoint b</li>
        </ol>
    </li>
    <li>
        <span>Subject 2</span>
        <ol compact="compact">
            <li>subpoint c</li>
            <li>subpoint d</li>
        </ol>
    </li>
</ol>
```

This XML structured will be rapidly converted into the following JSON, with
attributes and children encoded into the structure:

```json
{
    "ol": {
        "@class":"xoxo",
        "li": [
            {
                "#text":"Subject 1",
                "ol":{
                    "li":[
                        "subpoint a",
                        "subpoint b"
                    ]
                }
            },
            {
                "span":"Subject 2",
                "ol": {
                    "@compact":"compact",
                    "li": [
                        "subpoint c",
                        "subpoint d"
                    ]
                }
            }
        ]
    }
}
```

There are some oddities with the JSON encoding of XML, particularly around CDATA, but overall I have been quite pleased turning XML into JSON which I can more easily query with `jq`, PostgreSQL, or even ingest into Elasticsearch.


If you happen to find any bugs, please submit pull requests [on GitHub](https://github.com/rtyler/xmltojson)
As a man in tech I stand for EQUALITY
Tags: equality, tech, diversity
Published: 2021-05-23 17:42:17

---
title: As a man in tech I stand for EQUALITY
published: true
description: Ever since I got into the tech scene back in the 2010 one thing that stood out the most to me was the lack of diversity and equality in this field especially for people that identify as women
tags: equality, tech, diversity
---

The topic that I'm going to cover today is a bit different from what I usually write about, but I felt the need to express my opinion on this subject because even though we are living in 2021 we are still acting like we are in the stone age (and even than it shouldn't have been acceptable).

Ever since I got into the tech scene back in the 2010 one thing that stood out the most to me was the lack of diversity and equality in this field especially for people that identify as women.

I follow a lot of great content creators (blog/tutorial writers, video makers, live streamers) — many of whom identify as women — who are exposed to so many inappropriate comments about their looks or their skill levels.

See just some of countless examples below:

{% twitter 1390300774228443141 %} {% twitter 1396076148707233796 %}

Some might find it funny or amusing to leave comments on their posts or in live streams, such as "hey baby" or "you're sexy" which just demotes their value as a person and can seriously **ruin their day** but also have a long-standing effects and for what? You getting a giggle out of their reaction? Getting to feel "superior"? **STOP**. You **DO NOT** have the privilege, or the right to speak that way to anyone.

**You are not entitled to flirt with women. You are not entitled to comment on a woman's appearance. You are not entitled to a damn thing. Keep your shitty little comments to yourself.**

## Who is to blame for this? Me. I am. I've watched this abuse happen and did nothing. I was the problem. I will not sit idle. I will act. People deserve to be safe.

---

# Now the hard question: How about you?
What is Prop Drilling in React? Understanding Context API - Part 1
Tags: react, javascript, beginners, webdev
Published: 2021-05-23 16:58:56

If you have started learning or exploring react then you must have come to a situation where you are passing your props down to 3rd - 4th or Nth level in your components hierarchy.

![prop drilling in react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtkhe3jx2fhoxhxny8oj.png)

[Prop Drilling by Example](https://youtu.be/PlulYcZ4n3k)

The intermediary components need not do anything with those props but are acting as a pathway to pass those props to the child which actually needs them.

This particular problem is called "Prop Drilling".

In the cover image, you can see that I am actually passing "Complete Todo" and "Delete Todo" from my TodoApp component down to the "Todo" Component.

TodoList component needs nothing to do with these props and is acting as an intermediary here.

#### Few problems with Prop Drilling:

- Useless re-renders will be there in case that prop is changed from the parent via an event
- Easy to maintain the code in case there is a change request and is prone to errors
- Becomes very difficult when we have a deeper level of nesting and we are passing the props

#### How can we prevent this Prop Drilling?

We can prevent it by using "Context API" in React. It has two components named:
1.  Context.Provider
2. Context.Consumer

Apart from that, we can even use the "useContext" hook instead of Context. Consumer and is a preferred way.

If we can combine Context API with useReducer Hook, It can be a powerful tool for having our own central state management.

But it is suggested by React team that we should only use "Context API" in case we have less frequent updates in these props.

#### Do follow me on:

Linkedin: https://www.linkedin.com/in/varunprashar5/

Twitter: https://twitter.com/Varunprashar
SELECT PATH OF FOLDER OR DIRECTORY USING JAVASCRPT OR ANGULAR 
Tags: javascript, angular
Published: 2021-05-23 16:58:08

i like to select a path in local drive , the probleme if i choose a directory if it s empty the code nto work if it not empty it work fine 

//  input type="file"   name="currentselectedFile"  (change)="onFileSelected($event)"   webkitDirectory directory multiple 
>

onFileSelected(event){
 var theFiles = event.target.files;
 var relativePath = theFiles[0].webkitRelativePath;
}
// if the path it s not empty all it s ok
Pure CSS Arcade 🕹
Tags: html, css, webdev, dog
Published: 2021-05-23 16:28:01

Hey, friends! I hope you had a great week! 

👾 On Thursday, I finished my last CSS project: **Pure CSS Arcade**. Built from scratch with HTML & CSS by doing live-coding on twitch.

![arcade & pacman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6zwobuq1nosdixcvgaz.gif)
 
Every week I host a few streamings where I **"Draw with CSS"**. 
Do you want to get a notification when the streaming starts? Follow me on twitch (https://twitch.tv/baumannzone).

Drawing this arcade machine was (really) a challenge because of the perspective. I had to re-think a couple of times how to do it, but finally I handled it.

I have more CSS Art projects like this one on my [YouTube channel](https://www.youtube.com/c/RambitoJS). 

If you are an instagram person, I upload short videos of every CSS project: https://instagram.com/baumannzone 

Any questions? I read your comments.

> The orinal image: https://dribbble.com/shots/3394419-Pacman/

👋 That’s all for now, folks! I hope you like it. Be safe and don't forget to water your plants!
One way to implement a time-series using Redis
Tags: python, redis
Published: 2021-05-23 16:02:45

# What is Redis?
Redis stands for 'REmote DIctionary Server', so the name itself implies a dictionary (key-value pairs).

# Why use Redis?
Redis is used as a database cache to save data in a fast way in the form of key-value pairs. Also, wide use for it is for sending messages between different systems through a shared Redis database.

# What types of data can be stored in Redis?
Redis provides data structures such as strings, hashes, lists, sets, and sorted sets.

# How to use Redis?
First, you need to install it from their [website](https://redis.io/download). Then you can choose to work in redis-cli or any language client, here we use python redis client. You can install redis for python by `pip install redis`. This python library has all redis-cli commands as functions, [This] (https://gist.github.com/LeCoupa/1596b8f359ad8812c7271b5322c30946#file-redis_cheatsheet-bash) is a cheatsheet for Redis commands.

# A great VS Code extension for Redis
I use this extension in VS Code, it can view all the contents in Redis in a nice and easy way.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/870fcyglhat36v3n0hej.png)

# An Example on Redis string data type
First, we make a Redis instance by `r = redis.Redis(redisServer, 6379)`
then we set a value to a key and get it:

 ```
r.set('name', 'Ali')
r.get('name')
```
so, now we have a key called 'name' and has a value called 'Ali'.

# An Example on Redis hash data type
```
# r.hset('price', 'time', 'value')
r.hset('price', '12:20:00', '250.0')
r.hset('price', '12:20:15', '250.7')
r.hset('price', '12:20:30', '252.0')
```
You can get the value of any time by:
```
r.hget('price', '12:20:15')
```
so, it will return the value '250.7'.

You can also get all values and keys by:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejrjpnklbpi0cagp6o9o.png)

# Redis Time-series using Hash

The idea about making a time-series in Redis is to have a key for each column you have, and use a hash data type for each one, each hash has a field and a value in the format {field: value}. We put the timestamp as the field. 

An example will be like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnh2eb8vey5hqniil7qp.png)
Why you should cold mail?
Tags: howilearnt, experience, beginners
Published: 2021-05-23 15:59:15

I could easily transition from Python2 to Python3. I didn't have to unlearn a lot. I took the Codecadamy's new course on Python3. After a few days in I realized that I needed to buy a subscription to continue the next chapter.

## Teens have credit cards?
Either provide us teens with a credit card and a monthly stipend or provide the services for free. No seriously, how am I supposed to pay for the subscription? "Adarsh, why don't you ask your parents to buy you the subscription. After all it's for educational purpose."

They wouldn't have agreed. At least that is what I thought that time. I would have been asked to provide a long list of justifications on why it is fruitful to invest money on my this "new" endeavor. I started to learn programming with no long-term goals or with any specific goals but just as a hobby. 

## Dejected but then enlightened by Mr. Jobs
I felt really dejected. What can a teen do? How was I to pay for the subscription. Sure, I could learn Python from some other source which doesn't involve "credit cards". But I had fallen love with [Codecadamy](https://www.codecademy.com/). I was hoping for a miracle to happen.

And the miracle happened! I had read the biography of Steve Jobs some time back. And I recalled an incident where teen Steve wanted some gadget/tools so he looked up everywhere before deciding to directly contact Henry Ford! Teen Steve found the contact number of the big business man from yellow pages and made the call. And to Steve's surprise Mr. Ford answered the call! Steve got the gadgets that he wanted plus an internship. How crazy is that?

So I did just that. No, I didn't call Henry Ford! But, I mailed Codecadamy expressing my desire to learn and my inability to pay for the course. I also said how Codecadamy was super awesome. I went to bed with my fingers crossed. Guess what happened when I opened Codecadamy the next morning? A violet label labelled **Pro** beamed after my name in the dashboard. I had been given a free Pro account subscription for three months! The world isn't so much of a bad place after all.

## Training to become a Pro with the Pro account
I was super pumped after getting the **Pro** subscription. I completed the Python3 course and I had built some solid confidence in the language. I began to realize the beauty of programming. Though I couldn't build anything new with the knowledge I had, the process of learning was giving me immense enjoyment.

What did I do with my newly learnt skills? I will write about that soon.
In Eclipse Ide for one program only console window not open.
Tags: java, eclipse, console
Published: 2021-05-23 15:56:54

{% stackoverflow 67653207 %}

In Eclipse Ide for all program Console window is Open after press Run button/CTRL+F11 .but for one program only console window not open .when I hover over on Run button it says""Run classname (already running)"".Only one way to open which is manually by follow this step-- WINDOW>SHORTVIEW>CONSOLE , after these steps console window is open and you can do your coding operation
requestAnimationFrame in Javascript
Tags: javascript
Published: 2021-05-23 15:36:15

## [JS #1 WIL Post]
I was doing my [tic-tac-toe project](https://fatrixienicolieopetina.github.io/tictactoe/) when I stumbled upon `requestAnimationFrame` in javascript. At the initial stages of my development, I was using window alerts to broadcast the winner of the game. But then I stumbled on one problem: the winner is broadcasted before the winning move is rendered in the board. After thorough searching, the answers I can find in the web is all about using `setTimeOut` to delay the alerts. I decided to ask for some help in stack overflow and learned a lot from the [answer](https://stackoverflow.com/questions/67629955/how-to-render-html-changes-before-the-window-alert-is-triggered-without-using-s). 

I started digging about request animation frame in javascript. Basically `window.requestAnimationFrame()` is used if you want to manually tell the browser to update the UI before the next repaint. This method takes a callback function which is invoked before the repaint. More information can be found in its comprehensive [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).

This is my first time hearing about this `window.requestAnimationFrame` function ever since I started learning js, around two years ago. Thank you to that SO user for the very insightful answer :).
Teaching kids responsibility
Tags: culture, videgames
Published: 2021-06-07 05:20:22

---
title: Teaching kids responsibility
published: true
date: 2021-04-27 00:00:00 UTC
tags: culture, videgames
canonical_url: https://sul.im/blog/alba/
---

Not being able to leave an apartment for a couple of weeks due to a COVID-19 quarantine is hard. Going through that with a six years old kid is a real challenge.

To keep being happy we were trying different activities (reading, drawing, doing crazy indoor sports challenges, and so on). One of these activities was video games. That's how my son Tim and I discovered an amazing game - "Alba: a wildlife adventure" from *ustwo games*.


<!--more-->

![Tim plays 'Alba: a wildlife adventure'](https://sul.im/blog/images/playing-alba.min.cd2a38aeea14a8b84721e530f72a0c4208ce19df4f04a84ebd8350fb21eaaa4d4c94cc2408adc380c58f915660e3145cfd77bd2810c6bbc861f15d26b3d9c17a.jpg)

Tim loves animals and anything related to them. That's why Alba got our attention. It's a story about a little girl who sets out to save wildlife on a little island. The game isn't just a cute adventure where you need to run around and do some tasks. It's much more!

The game teaches young people how to be responsible and how important to care about everything and everyone around you. It gives examples of how our actions could have a negative and positive effects. The game shows that "even the smallest person can make a big difference"!

Tim and I were playing the game together. I was doing only narration because he cannot read yet. It was an amazing experience to see my kid living the story of the game, how he was proud of saving the wildlife on the little island. But the biggest surprise came later!

When the game was over, Tim went outside on the terrace and collected all the garbage he could find there (little pieces of paper and plastic packaging, and whatever else the wind could bring). **"I'm doing that like Alba", he said.**

*ustwo games* created not just a beautiful video game. It's much more. The game experience goes beyond the virtual world. It creates positive emotions and shows that a little kid can change the real world. Thank you *ustwo games*!

---
The official website of the game: <https://www.albawildlife.com/>
My favorite CLI Tools for improved productivity.
Tags: productivity, mac, terminal
Published: 2021-05-23 15:22:32

These are my top 5 favorites. Use them to make working with #terminal easier and efficient. - YMMV

First and foremost, if you are on Mac replace your terminal with iTerm, a much more powerful powerful terminal emulator.

1. [Fishshell](https://fishshell.com/): I love the autosuggestions. Saves way too much time. There are many other useful features as well.

2. [thefuck](https://github.com/nvbn/thefuck): Misspelled a command? Use this simple command to correct typos. There is no need to retype it.

3. [HomeBrew](https://brew.sh/): Easy installation of apps. On Mac, the cask install feature comes in handy and removes the need to drag applications.

4. [autojump](https://github.com/wting/autojump): Forget `cd`. This is a much faster way to navigate your filesystem. It maintains a database of the directories you use the most from the command line.

5. [TLDR](https://github.com/tldr-pages/tldr): Concise man pages with lots of examples, just the way we want.
Angular Developer discovers Redux-Toolkit
Tags: angular, redux, react, discuss
Published: 2021-05-23 15:07:06

As an Angular developer, one of my biggest challenges was shifting my thought process from mutable-, to immutable state.

In an Angular service, you can simply assign a new value to a property, and like magic - the change detection would kick in and update any component using the property. 

Switching over to React, suddenly immutable state is the way to go! Then, suddenly Redux - actions, reducers, middleware, dispatchers, and the list goes on. 

## 🚪 Enter - Redux Toolkit

The first time I saw Redux toolkit, the very first thing that hit me, in Reducers:

```javascript
...
reducers: {
    increment: state => {
        state.value += 1;
    }
}
...
```

#### 🤯 What is this madness?! 

Assignment operator in a Reducer? For a brief moment I thought I somehow ended up in the Vuex documentation, this is how you update state in mutations. But No, it was Redux Toolkit. 

I followed the [Redux Toolkit Quick Start tutorial](https://redux-toolkit.js.org/tutorials/quick-start) and started creating some enhancers for middleware. It was fantastic! Suddenly I had a reason to enjoy using React and Redux. 

## 🤔 What is Redux Toolkit?

Take this excerpt from the official documentation:
> The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:
> - "Configuring a Redux store is too complicated" 
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"

Once I read that introduction, I felt like they wrote this intro directly aimed at me 😂. 


#### 📝 Sidenote
Personally, I feel being a front-end developer can be a very fatiguing career. As soon as you're comfortable learning one tech stack/library/framework, the blog posts start popping up:
Have you tried "The Best Framework Ever, you should!" or "You don't know Server Side Rendering is better than what you're currently doing and you suck for not knowing it!". Okay, so maybe a little exaggerated. 

The point was, that it's great to see the team coming up with a "standard" way of doing things. 

## Oh, and *Why* can we use the assignment operator?

Well, it turns out that Redux Toolkit, by default, includes a library called [`immer`](https://immerjs.github.io/immer/).

To quote the official documents again:

> Redux Toolkit allows us to write "mutating" logic in reducers. It doesn't actually mutate the state because it uses the Immer library, which detects changes to a "draft state" and produces a brand new immutable state based off those changes.

A shout out to the dev(s) of Immer! I think it's a fantastic library.

## 🏁 Conclusion

So there you have it! I think I might actually enjoy writing React code after learning some more of the fundamentals of Redux Toolkit. This is a great start for sure!

Have you ever tried Redux Toolkit? Perhaps you've gone down a similar path?

----

<center>🤓 Thanks for reading 🙏</center>


Edit: Typos