teleren/devto huggingface dataset:
Images of People of Color for content creation
Tags: blogging, content, representation
Published: 2020-06-20 12:57:02

---
title: Images of People of Color for content creation
published: true
description: In this short post, I will list some resources that you can use to bring more people of color representation into your online content!
tags: blogging, content, representation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i2afyq3kkchpodmgqino.jpg
---

A couple of years ago I saw [this great blog post](https://peopleofcolorintech.com/articles/where-to-find-free-stock-photos-with-people-of-color/) from [peopleofcolorintech.com](https://peopleofcolorintech.com/) about stock photos with people of color in it. I found this amazing! I never thought about using my blog posts or other types of public content to spread more visual representations of people of color.

After reading this, I became aware of the existence of pictures/illustrations I could use that include people of color in online content such as blogs, presentations, promotion flyers, etc. I understood I could use them as a way to increase the representation of women of color in online content, more specifically related to the Tech industry.

Since I became aware of this when I include pictures of people in my blog posts I try to always include people of color on it.

Here are three resources that I am always aware of when looking at stock photos for my blog posts:

* [Women of color in tech chat](https://www.flickr.com/photos/wocintechchat)
* [CreateHER Stock](https://createherstock.com/)
* [Illustration of Black people](https://www.blackillustrations.com/)

I mostly use photos from [WOCinTech Chat](http://wocintechchat.com/), but I always have in mind all of these resources. The cover image is in fact from there! You can find that image [here](https://www.flickr.com/photos/wocintechchat/25926634151/).

---

Thank you for reading this, I hope you find these useful and consider using these resources when appropriate.

[This was originally posted on Medium.](https://code.likeagirl.io/images-of-people-of-color-for-content-creation-920a05778ca4)

You can find me on [GitHub](https://github.com/isabelcosta), [Twitter](https://twitter.com/isabelcmdcosta), [LinkedIn](https://www.linkedin.com/in/isabelcmdcosta), and [my personal website](https://isabelcosta.github.io/).
What is the MERN Stack?
Tags: webpack, webdev
Published: 2020-06-20 12:56:57

MERN(MongoDB, Express, React, Node.js) is another popular full-stack development. It is usually considered as an alternative to MEAN stack development. Below is the architecture of MERN:

MongoDB - Database layer
Express - Middleware for Nodejs
React- front end (User Interface)
Node.js - web server logic

MERN stack Development

The main difference between MERN and MEAN stack is Angular and React. Both Angular and React does the job for your requirement. Its personal choice which one to use.

Before learning MERN stack development, you should have knowledge of HTML/CSS, Javascript, React JS, Node JS
Trying to build a Dashboard with AngularJS
Tags: node, angular, typescript, help
Published: 2020-06-20 12:29:25

I have a project called [Odin](https://www.github.com/theycallmemac/odin) - its a programmable, observable and distributed job scheduler. 

For a while now, Odin has had a user interface, a dashboard written with Typescript and AngularJS. Metrics from jobs are stored in MongoDB and then displayed on this web UI. 

I myself didn't actually build the dashboard and I think it leaves a lot to be desired when looking at Dashboards for other projects (such as Grafana). 


Here's what the dashboard looks like at the moment:

![](https://camo.githubusercontent.com/10beb1c55b3dda890641b6bd08f676ab11d5a274/68747470733a2f2f6c68362e676f6f676c6575736572636f6e74656e742e636f6d2f7647456e5a7956386d657479536d6e6a5046315750476a304f536c6a385a47654768717056665559656e3555616b464d4232575471704e466641566433587057487a7a6a414e716c6c62685f566472676f44516a67556249757556586f54674751376938326e796c466341467a64344c50707849334d4c7442413263792d6932396e5a494b6f655f)

I'd really appreciate any resources folks have which could help me out! Anything related to build dashboard interfaces like the image above would be great, I'd kind of at a dead end right now.

*(Alternatively, if you'd like to sink your teeth into a new a project let me know.)*
alacritty-themes: A CLI tool to set themes for alacritty terminal
Tags: productivity, alacritty, commandline, themes
Published: 2020-06-20 12:26:46

In this post we are going to take a look at a new [CLI](https://github.com/rajasegar/alacritty-themes) tool I have created for customizing colors for your alacritty terminal.

## What is alacritty?
[alacritty](https://github.com/alacritty/alacritty) is a cross-platform, GPU-accelerated terminal emulator written in [Rust](https://rust-lang.org). Using the GPU for rendering enables optimizations that simply aren't possible without it. It currently supports macOS, Linux, BSD, and Windows.

It is incredibly fast and responsive to the extent that I have replaced [iterm2](https://iterm2.com) with alacritty for my Macbook, my Ubuntu Laptop and my RasberryPi ArchLinux system. I have been using it for a while now and I really love it.

You can config your alacritty terminal by having a config file called `alacritty.yml` in your home folder like `~/.config/alacritty/alacritty.yml`

## alacritty-themes CLI

Configuring your terminal with yml files is definitely fun. But when it comes to customizing colors it definitely needs an intuitive tool for the job. That's why I have created [alacritty-themes](https://github.com/rajasegar/alacritty-themes) for that.

To find the list of themes, you can visit the alacritty [wiki page](https://github.com/alacritty/alacritty/wiki/Color-schemes)

The CLI offers 50+ Themes to choose from, an option to create your `alacritty.yml` config file with a simple, easy and intuitive user experience.

It is using `yaml` and `inquirer` npm packages for parsing the config yml and giving a list of themes to choose from the terminal respectively.

## How do I install it?

Install the `alacritty-themes` package globally with [npm](https://npmjs.com)
```
npm i -g alacritty-themes
```

If you are using `npx` you don't have to install the package:

```
npx alacritty-themes
```

## How do I select themes?

```
alacritty-themes
```

![alacritty-themes demo gif](https://github.com/rajasegar/alacritty-themes/raw/master/demo.gif)

Choose the theme from the list of options and press `Enter` to apply.
You can also navigate with `j` and `k` keys for up/down, courtesy of [inquirer](https://github.com/SBoudrias/Inquirer.js). The list of
options are cycled through automatically so you can go to the last theme
by just pressing `up arrow` key.

I am using the `One-Dark` theme, you also have popular themes like Dracula, Monokai, etc.,

If no `alacritty.yml` is found in your `$HOME` path, it will ask you to create one.
You can choose to create one by confirming (`y/n`) and apply the selected theme.

## Bonus Tip: Alias
You can also create an alias for `alacritty-themes` like `at` 
Just append this below line to your `~/.bashrc` or `~/.bash_profile`

```
alias at='alacritty-themes'
```

Now you can simply use `at` to choose themes for your alacritty terminal.

```
at
```

If you have any feedback in improving the tool, or queries about the tool, please let me know in the comments. Also try alacritty as your terminal emulator and tell us what is your favorite theme.
Survey form 😂😂#freecodecamp Project2
Tags: css, beginners, html, webdev
Published: 2020-06-20 12:08:33

{% codepen https://codepen.io/hafizurrehman/pen/zYrZOOO %}

This is my second project of freecodecamp ! I have some problem
1: when i select input area the border radius remove automatically in Mozilla browser
2:Guys please give me some advice how I improve my UI design 

2: Some other problem you can find also

All type of feedback will be appreciate 

thank you!
Daily Developer Jokes - Saturday, Jun 20, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-20 12:00:27

---
title: "Daily Developer Jokes - Saturday, Jun 20, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jun%2020%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12589ca2833.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why was the function sad after a successful first call?

___A:___ It didn’t get a callback.
 -->
Walking a tree (depth first search)
Tags: javascript, beginners
Published: 2020-06-20 11:57:19

# Intro

A short blog on how you can traverse a tree in depth. Depth first search is a an algorithm that goes as deep as it can
(it is easier to see what "deep" means in an example)

## depth first search

First, imagine a tree not as a regular tree, but as an a upside down tree (I was really confused about it, because the root is on the top and not at the bottom).

Let's take for example the following tree:

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

The idea is to traverse the tree as deep as you can first, and if you cannot go deeper, then you can visit the next sibling and deep again.

Let's see how dfs (depth first search) works in the above tree:

1. visit node ''node 1'', now ''node 1'' has three children, ''node 4'', ''node 3'' and ''node 2''
2. visit ''node 4''
3. ''node 4'' has no children, so we cannot go deeper
4. visit ''node 3'', now ''node 3'' has a child, ''node 7''
5. visit ''node 7''
6. ''node 7'' has no children, so we cannot go deeper
7. visit ''node 2'', now ''node 2'' has two children, ''node 6'' and ''node 5''
8. visit ''node 5''
9. ''node 5'' has no children, so we cannot go deeper
10. visit ''node 6''
11. ''node 6'' has no children, so we cannot go deeper

## js implementation

What is needed for a depth first implementation in a tree:

1. a stack
2. a tree

the algorithm in plain english:

```
1. initialize an empty stack
2. take the root from the tree
3. add it to the top of the stack
4. while there are nodes in the stack do:
5.      take/remove the first element from the top of the stack
6.      process the data of the current node
7.      if current node has any children add them to the top of the stack
```

the algorithm in js:

```javascript
// a tree node looks like this
rootNode = {
    id: 1,
    data: 1,
    children: [secondNode, thirdNode, forthNode]
};


function depthFirstSearch(rootNode) {
    let stack = [];
    stack.push(rootNode);

    while (stack.length !== 0) {
        // remove the first child in the stack
        currentNode = stack.splice(-1, 1)[0];
        // do something cool with the data
        // printing them is also cool :)
        console.log(currentNode.id);

        currentChildren = currentNode.children;
        // is there are any children in the node
        // add them at the top of the stack
        if (currentChildren !== null) {
            for (let index = 0; index < currentChildren.length; index++) {
                const child = currentChildren[index];
                stack.push(child);
            }
        }
    }
}
```
How much did you really know before landing your first DEV job?
Tags: beginners, 100daysofcode, discuss, codenewbie
Published: 2020-06-20 11:41:16

This is a THREAD dedicated to especially beginners in DEV and who are struggling quite often with tragic imposters and the trap of knowing everything all at once. 

*I would like you to share mainly the experience of your very first role in your career, this maybe a job or an internship (or maybe even freelance).*

Here's a few topics, you can reflect on:
- How did you get to know about the opportunity?
- **How much did you really know before landing the opportunity?**
- Where did you gained the necessary skills in order to get there?
- What projects did you build in order to impress your recruiters?
- How much time did you spent on a regular basis for learning?
- Did you have any burnouts? How did you deal with them?
- How often would you take breaks in between coding and what would you do in that time?
- How did you feel at the end of all these?


Thank you for being a part of this! 💙
ReactJS Online Training- ReactJS Online Course
Published: 2020-06-20 11:41:08

Naresh I Technologies provides you the  100% assurance on your ReactJS Online Course with Success. Our ReactJS online training Course focuses on practical oriented training. You can now learn React JS online training from the real-time developers of the IT industry. Join us today to experience the best of best Online React JS Training! With React JS, you can create dynamic web applications that deliver amazing user-interface to the users. That is the reason why today most of the companies prefer to use ReactJS.
History of ReactJS:
Original author(s):	Jordan Walke
Initial release:	May 29, 2013
Stable release:	16.13.1 / March 19, 2020
Repository:	React Repository
Written in:	JavaScript
About ReactJS:
ReactJS is a JavaScript library responsible for providing UI components for client-side development. ReactJS has a DOM( Document Object Layer) which helps it to be faster by refreshing only some part of the page which user views. ReactJS can be used for developing dynamic network applications, ReactJS is a library for building composable user interfaces. It encourages the creation of reusable UI components that present data that changes over time. It is not a complete application framework like angular, it is just a view layer. So it is not directly comparable to frameworks like angular.
Prerequisites:
Basic Knowledge of Javascript, HTML, and CSS
Fair Knowledge On basics of testing tools
Basics of OOPS Concepts
What you learn:
ReactJS allows developers to create large web applications. It helps develop dynamic apps. Data changes in dynamic apps without reloading the page. The main advantage of ReactJS is that it makes the application simple and dynamic. Static web applications don’t give the desired user-interface to the user. Hence, attending ReactJS Online Training will help you build lively apps.
ReactJS Online Course will guide you in
* Building complex UI
* Creating any type of web application, mobile application or command-line interfaces.
* Developing a flexible and dynamic front-end for the user view

ReactJS Online Course provided by Naresh I Technologies will benefit you in many ways:
We save your time and money by cutting short your travel time
You can attend three demo sessions with free of cost
Where ever you are, you can still attend the training via Zoom 
We are giving instructors to lead live teaching. 
Our trainers are real-time experts.
We are providing video recordings of every live class with one year of access.
Our trainers will provide a soft copy of the class notes for every concept. 
For more details please visit: https://nareshit.com/reactjs-online-training/
Contact us: 8179191999/ onlinetraining@nareshit.com.
Clean Email
Tags: showdev
Published: 2020-06-20 11:38:45

---
title: Clean Email
published: true
description: Built this really simple extension to make gmail look nicer
tags: showdev
---

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

Gmail ships with lots of javascript and other assets and sometime it might be annoying to wait while your gmail loads especially on a slower network. Their basic HTML view is really fast but it does not appear polished. This extension styles basic html view of Gmail. Here is link to the [repo](https://github.com/Rafi993/clean-mail). PR's are welcomed!! 

**Note**: Gmail basic html view is made up of just tables without id or class for most things so forgive me on the weird tricks the repo uses to style things.
Are you the developer? Participate & WIN
Tags: javascript, react, node, python
Published: 2020-06-20 11:21:22

# What is This Survey:
This survey about the Developer Tools analysis. here we collect the information from Developers such as which tools we using to code. so that this DeveloperEconomics Company uses this data for data analytics.

### Survey Link is Here: [Link](https://bit.ly/developereconomics)

## Reasons for suggesting this:
1. This survey completely belongs to what tools, what algorithms you're using in Machine Learning & Artificial Intelligence or some other Technology.
2. This survey conducted by one US company Which is DeveloperEconomics and completely genuine.

## What to do Now:
1. Completing the Survey from following Link ClickHere
2. You need to answer the survey all the questions if not aware of that answer you can choose None Of the Above Option.
3. The survey is somewhat large, it’s completely based on how many options you selecting. [if you select fewer options survey will end soon 😐]

![](https://thepracticaldev.s3.amazonaws.com/i/12jf4dd3y2qq23o7em25.PNG)
## What Prizes You will Win for this:

Here is the list of prizes you will in once the survey is completed they will announce the winners by using Random Selection Program.

- Microsoft Surface Pro 6
- Samsung HMD Odyssey
- Samsung Chromebook
- AWS Deep Racer
- Oculus Rift S
- Microsoft Surface Pro 6
- OnePlus 6T
![](https://thepracticaldev.s3.amazonaws.com/i/ibhvtfkthao9p1zmxypd.png)

### Survey Link is Here: [Link](https://bit.ly/developereconomics)
Do you use gitbook, try this awesome plugin I wrote
Tags: opensource, plugin, documentation
Published: 2020-06-20 11:19:45

It was a time, I was looking for a Gitbook plugin to documente my commands by showing a nice terminal in my page . However I haven't found any existing plugins that satisfy my needs so, as a developer, I decided to write my own plugin and share it with the community. 

# Say hello to Terminull: 


<br><br>

![Gitbook plugin terminull](https://dev-to-uploads.s3.amazonaws.com/i/4u6brjgove0pifly6lx1.png)


<br><br>


[**Terminull**](https://github.com/ridaeh/gitbook-plugin-terminull) is a Gitbook plugin allows you to create a modern terminal for your Gitbook pages in order to documente your commands.

# Features:

* Specify the context directory
* Add comment to the command
* Copy command by clicking on a button
* Show command output

## How to use it ?

To use Terminull plugin in your Gitbook project, add the terminull plugin to the book.json file of your project, then install plugins using gitbook install.
```json
{
    "plugins": ["terminull"]
}
```
Now you are ready to write your hello world terminal.
To create a terminal you can use Code markdown with `term` as language.
e.g :
<pre><code >```<strong style="color:green;">term</strong>
gitbook-plugin-terminull$ echo 'hello terminull' # This will print hello terminull
hello terminull
```
</code></pre>

As a result you will see this beautiful terminal in your page.
![Gitbook plugin terminull](https://dev-to-uploads.s3.amazonaws.com/i/4u6brjgove0pifly6lx1.png)
# You like my work ❗

If you like this plugin you are welcome to made a pull requests to add more feature 

https://github.com/ridaeh/gitbook-plugin-terminull
⚡️How building habits can make you a better developer | WarsawJS Meetup 2020 | Eleftheria Batsou
Tags: developer, habits, tips, success
Published: 2020-06-20 11:15:06

In this lightning talk (Building habits as a developer) we discuss the habits you should probably follow to be a successful developer. First of all, you have to know that coding is hard and building habits takes time! But as long as you stick to them, your investment is guaranteed to pay off. Some habits you should follow are: plan before you code, write human-friendly code, ask and do code reviews, be less distracted or more focused, don’t multitask (it’s a waste of time), get into the habit of always exploring and experimenting.


- WarsawJS Meetup #70
- Miejsce: https://warsawjs.com/live
- Skontaktuj się z nami: contact@warsawjs.com


Original [video](https://youtu.be/WF-fdwNw6fc), Warsawjs [Twitter](https://twitter.com/warsawjs) & [homepage](https://warsawjs.com/)


~ Thank you for the invitation Piotr ~
~ Thanks everyone for watching 💓🤗 ~

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elefintech)
CPP-Community Discussion
Tags: cpp, computerscience, codenewbie
Published: 2020-06-20 10:53:26

We are building a strong community for C++ at "*__CPP-Community Discussion__*" forum. We are C++ developers from all experience level and believe in collaborating and learning together.

We do a community session on each **Saturday** in which one of our speakers gives detail information on any C++ topic.

As this is just a start, we are encouraging people to speak up on any C++ basic or advance topics but we welcome to those who want to present their own work.

This is a good place to show up your skills as there is no judge. If you have any issue, you can discuss in the forum. You can collaborate with others for any project you want to work.

I welcome everyone to join our community and 
"__Let's learn together__".

[Registration link](https://forms.gle/rZtcZFM7gt2Kkn9d9)

See you in the next session.
Trajectory lab - fun project in p5.js
Tags: visualization, javascript, p5
Published: 2020-06-20 10:46:54

---
title: Trajectory lab - fun project in p5.js
published: true
description: Sharing a fun project that I did in p5.js
tags: #visualization #javascript #p5
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lhcllgm16pg4ypl3gxed.png
---

I created an interactive visualization in p5.js. It visualizes the trajectory followed by a particle in gravitational field.

[See the visualization](https://trajectory-lab.netlify.app/)

You can add new gravitational source by clicking the Add source button in the bottom. A source can be deleted by selecting it and pressing the delete button.

Here is the [source code](https://github.com/JithinKS97/trajectory-lab) for the 
project.

If you like it, please leave a star in github :)
100DaysOfCode Challenge
Published: 2020-06-20 10:30:19

Hello Coder Community,

I'm publicly committing to the 100DaysOfCode challenge starting from today (20th June 2020)! I will share my progress report daily basis on Twitter(@TheMonzurul). After a few days, I will also share my work on Github (https://github.com/MonzurulKarim) and also on my website (https://www.monzurulkarim.com/). Yesterday @fabpos (Twitter) challenged me, I accepted his challenge, and today I am also challenging him. Anyone from this community, feel free to challenge me.
So, wish me good luck. Happy Coding!