teleren/devto huggingface dataset:
Unsplash’s dataset is now open source
Tags: machinelearning, python, datascience, tensorflow
Published: 2020-08-08 17:56:00

Are you looking for image data to do research in Machine Learning and Deep Learning? Are you tired of open source image datasets that are usually limited in size, expose low-quality images, lack variability in the image data, or rely on mass labeling by 3rd party services? If your answer is 'Yes' to all these questions, I have a surprise for you in the next paragraph.

Unsplash just launched the biggest open source Image Dataset. This dataset has been used by researchers at industry-leading institutions such as Stanford University, Cornwell University, National Cheng Kung University, and Apple. 

Train and test models using the largest collaborative image dataset ever openly shared. The Unsplash Dataset is created by over 200,000 contributing photographers and billions of searches across thousands of applications, uses, and contexts.

In total, the dataset contains over 2M high-quality images, with 16GB of accompanying data covering:

- Keyword-image conversions in search results
- Community and AI-generated keywords
- EXIF, location, and landmarks
- Image categories and subcategories
- User-generated collections and groupings of images
- Image views and downloads stats

Read the documentation at https://github.com/unsplash/datasets

To download the Dataset visit

Lite version: https://github.com/unsplash/datasets (550MB)

Full version: https://unsplash.typeform.com/to/HPVbjo (16GB)

Have fun with it and don't make a terminator.
Learning Binary Trees Part 3: Depth First Search
Tags: beginners, javascript, computerscience, algorithms
Published: 2020-08-08 17:38:50

In my last [post](https://dev.to/123jackcole/learning-binary-trees-part-2-breadth-first-search-454a) I went over how to do a breadth-first search. In this lesson we're going to be looking at how to traverse a tree structure using a depth- first search(DFS). 

As the name implies, this method of traversal focuses on navigating the tree data structure vertically. We start from the top and work our way down in columns. *In general*, you want to use DFS when finding an answer that has only one solution. An example of this is a chess AI finding the best possible move.

![Depth first search image from wikipedia](https://dev-to-uploads.s3.amazonaws.com/i/w07yi41p5z7obcwuc61r.png)

Unlike BFS, DFS has three different variations, pre-order, post-order, and in-order. Let's code out how to do each method, starting with pre-order traversal. For pre-order, we will first visit the parent, then the left and right children.

There are actually two different ways to go about implementing these methods. You can choose between using iteration and a [stack](https://dev.to/123jackcole/learning-the-stack-6n5) or using recursion. I'll give an example of both for pre-order but will only use recursion for post-order and in-order because that's my preferred method.

![Iterative Pre-Order](https://dev-to-uploads.s3.amazonaws.com/i/59srfhmj53l20xlwy2qa.png)

For the iterative solution, we start by extracting the last node from the stack and adding its data to our visited array. We then add any of the node's children to the stack and repeat the process until we've worked our way through. 

Notice that we first add the right node to the stack. This is because a stack uses the First In Last Out principle. Since we want to traverse all the way down the left side of the tree before making our way to the right we want the left node to be added to the stack last.

![Recursive Pre-Order](https://dev-to-uploads.s3.amazonaws.com/i/h1fxs7oydp62a3qirp0r.png)

As for the recursive solution, we create a helper method named traverse that adds the node's data to our visited array and then runs itself on the node's left child, then the node's right child.

![Recursive Post-Order](https://dev-to-uploads.s3.amazonaws.com/i/licfi9y4ga45nbttgxp9.png)

Post-order is the opposite of pre-order. We start at the bottom and work our way up to the top. To change our implementation we just push our node's data after traversing it's children.

![Recursive In-Order](https://dev-to-uploads.s3.amazonaws.com/i/6mhznloz72n1ixrnuorp.png)

In-order also works its way from the bottom up, but instead visits the parents before the children. This can easily be done by pushing our node's data after the left traversal but before the right traversal.

If you want to see the code from any of my tree posts you can view it [here](https://github.com/123JackCole/Binary-Trees).
How to be outcome driven while learning to code or at work?
Tags: motivation, productivity, developer, tips
Published: 2020-08-08 17:28:34

I asked my local tech community this question: “How can I be outcome driven while learning how to code or at work?”

The following is a curated list of their fantastic answers!!!

[Corey McCarty](https://www.linkedin.com/in/coreydmccarty/)
Bullet Journaling is the best way that I know. Handle your tasks like you handle coding. Identify the primary goal, break it into smaller tasks systematically until they are clear to you what will be done. Then start working on those tasks. At any point, if you find yourself spending more time than expected on a task then you should ask yourself what is the desired outcome. You may find that you are spending time on one option that has become more difficult than another option that you had previously ruled out.

Anonymous
Start with the job search. Find a few jobs that you want. Identify which languages, frameworks, and experience you need. Make your learning plan focused on those goals. Don’t start with HTML, CSS, and JavaScript until you found a few jobs that you want to do in your area that require those. You might just find that Java is all you need to land that first job.

[Autumn Ragland](https://www.linkedin.com/in/autumn-ragland/)
I like to keep a list of weekly and monthly goals that I can look back on regularly to keep me motivated!

[JC Smiley](https://www.linkedin.com/in/jcsmileyjr/)
Set daily, weekly, and monthly goals that resonate with your personality and is aligned with the teams, company, or bosses goals.

When planning projects write out all the technologies or methodologies you already know and what new tech you plan on learning while building it. This way you know the outcome and how it will benefit you.

The same idea apply to planning your learning journey utilizing free resources or conferences. I use Trello and a calendar to keep up with future conference, videos I want to view, or resources in order of how they align with each other.

[Dennis Kennetz](https://www.linkedin.com/in/dennis-kennetz-377448142/)
Assume every piece of code you write will be given to and used by someone else and you are the only point of contact for the product. This way people can ONLY ASK YOU if they have questions. If this was the case, you would not want your entire day interrupted by questions, so you would write clean code with easy to understand variable names and function descriptions / methods / classes. Your documentation would be excellent and you would have awesome unit tests in place that would cover edge cases as well as standard protocols. In the documentation you would clearly define how to compile and run, what the inputs are, and what the outputs will be.

[Code Connector](https://codeconnector.io/) is a non-profit that's organized tech meetups to help people start their journey into tech. You can join our daily conversations by clicking this link: [Code Connector slack channel](https://bit.ly/2Ywnzqc).
How to: Easy Spider-man Parallax page
Tags: webdev, wecoded, beginners, css
Published: 2020-08-08 17:14:38

*This post covers two ways, one is the traditional CSS way, other the Bulma way!*
Check The Final Result [here](https://spider-man-parallax-007.netlify.app/)
(Scroll down for code)
Okay so this is a very simple BEGINNER friendly stuff, I just chose it cause, well to display, how much Bulma simplifies everything, there is like handful CSS, most of it being, links to background.

>A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website. 

Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the web page. It is a great option for an opening page or a random display page.


**How to make this better?**
* Put media queries and use different images for different view ports.
* Experiment with block styles, add a flashy header, play with Image box. 
* Add clips!

Also I figured out it was too simple to deserve a tutorial, so I'll pass, but in case of any query, ping me, would be happy to help.

Without further delay, you can see normal CSS on [Codepen.](https://codepen.io/Shriririrurururarara/full/xxZvJzE)
Find the Bulma code on [GitHub.](https://github.com/confusedcoder1/bobabytes)
You can compare the two, and you will find lack of efforts with Bulma along with more styles.


[Boba](https://twitter.com/BobaBytes)!

Ps. Next up a DARK website!(Screams in German)
SVG hamburger
Tags: svg, hamburger
Published: 2020-08-08 17:03:01

    ```<svg width="27px" height="15px" style="fill:white">
        <rect width="27px" height="3px" rx="1.5px"></rect>
        <rect y="6px" width="27px" height="3px" rx="1.5px"></rect>
        <rect y="12px" width="27px" height="3px" rx="1.5px"></rect>
    </svg>```
Understanding Code - Call Graphs
Tags: programming, documentation, code, doxygen
Published: 2020-08-08 16:44:00

Going through the code and understanding it is a daunting task, esp. if the code is written by someone else. It would be a nightmare if the code is not documented.

The plight is usually for the developers who are tasked to maintain a code that is written by someone else.

Sometimes the situation is developers don't know where to begin, and understanding it is even more a herculean task. It would be great if they had somewhere to start and understand the code that they are going to breath through.

Enter [Doxygen](https://www.doxygen.nl/)!

Doxygen has been there for almost a quarter of a century, written by Dimitri van Heesch. There are other tools documentation generators too. Javadoc for example is very popular because of the way the code documentation is organized.

The beauty of doxygen is it has features to help understand code better even in if the code is not documented properly. It supports these source languages out of the box - *C/C++, Java, Python, VHDL, PHP IDL, C#, Fortran, Objective-C 2.0, and to some extent D*. It also supports a variety of output formats.

Doxygen has a robust and big set of features that this article's space is too small to contain, so we will look at it from the perspective of understanding code.

Doxygen has a great feature of generating something called call-graphs. Call graphs are control flow graphs that shows what all functions/methods a particular function/method calls.

An example of a call-graph would be like the diagram below

![Call Graph](https://i.imgur.com/H7VCSPn.png)

So in order to understand the code first, call-graphs are a great way to understand the code flow, even if the code is poorly or even not documented.

Doxygen provides both the command-line version and a wizard that guides us through the documentation generation process

We can use either to generate the documentation, however for newbies the wizard will help generating the configuration file necessary to generate the documentation

To generate the call graphs, doxygen requires the dot tool to be available in the path. dot tool is a part of the [graphviz](http://graphviz.org/) package that helps generate the call-graphs.

The [doxygen documentation page](https://www.doxygen.nl/manual/doxywizard_usage.html) has a very clear steps on how to use the wizard to generate the documentation. In the `Diagrams` tab, we will have to select the Call graphs option to generate the call graphs. Of course, it take a bit of time to generate the call-graphs.

Once the documentation is generated, we can start navigating from the whatever is the main class methods and click on the call-graph functions to navigate through the entire code.

Go ahead try doxygen and see!

In the next part of this article we'll see about [eclox](https://anb0s.github.io/eclox/), the eclipse plugin for doxygen.

*Header Image Credits: [Pixabay](https://pixabay.com/users/fancycrave1-1115284/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=820275)*
Ad-hoc Polymorphism in Elixir
Tags: elixir, beginners, polymorphism, tutorial
Published: 2020-08-08 16:37:25

---
title: Ad-hoc Polymorphism in Elixir
published: true
description: A simple way of doing ad-hoc polymorphism in Elixir
tags: elixir, beginner, polymorphism, tutorial 
//cover_image: https://direct_url_to_image.jpg
---

**Ad-hoc polymorphism** is a kind of polymorphism that uses `types` and  `polymorphic functions` (aka function overloading) to change the function behavior depending on the types of its arguments.

While `behaviour` and `defprotocol` are preferred options for achieving polymorphism in Elixir, there is also one more option, probably more simplistic. Ad-hoc polymorphism can be achieved in Elixir using a combination of plain structs, function overloading, pattern matching and destructuring. 

First step is to wrap the state, that needs polymorphic behavior in a struct, as shown below.

```
  defmodule ConnectionHandler.FirstConnectionHandler do
    defstruct con: nil
  end

  defmodule ConnectionHandler.SecondConnectionHandler do
    defstruct con: nil
  end
```

Then create a module which will house the overloaded functions, that would pattern match over the structs that we just created.

```
  defmodule ConnectionHandler do
    alias ConnectionHandler.FirstConnectionHandler
    alias ConnectionHandler.SecondConnectionHandler

    def handle(%FirstConnectionHandler{con: con}) do
      "First"
    end

    def handle(%SecondConnectionHandler{con: con}) do
      "Second"
    end
  end
```

Below shown simple test case demonstrates how it all glues together.


```
defmodule ConnectionHandler.Test do
  use ExUnit.Case

  defmodule ConnectionHandler.FirstConnectionHandler do
    defstruct con: nil
  end

  defmodule ConnectionHandler.SecondConnectionHandler do
    defstruct con: nil
  end

  defmodule ConnectionHandler do
    alias ConnectionHandler.FirstConnectionHandler
    alias ConnectionHandler.SecondConnectionHandler

    def handle(%FirstConnectionHandler{con: con}) do
      "First"
    end

    def handle(%SecondConnectionHandler{con: con}) do
      "Second"
    end
  end

  test "ad-hoc polymorphism demonstration" do
    alias ConnectionHandler.FirstConnectionHandler
    alias ConnectionHandler.SecondConnectionHandler

    assert ConnectionHandler.handle(%FirstConnectionHandler{con: []}) == "First"
    assert ConnectionHandler.handle(%SecondConnectionHandler{con: []}) == "Second"
  end
end
```

While this is a way of achieving polymorphism in Elixir, one might want to consider more idiomatic approach of using [defprotocol] (https://elixir-lang.org/getting-started/protocols.html#protocols-and-structs).

**Update:** [Part 2](https://dev.to/sharmapankaj2512/ad-hoc-polymorphism-in-elixir-using-defprotocol-53ih) of this series demonstrates how using `defprotocol` retults in better encapsulation and fewer lines of code.
WHATS A ENTRY JOB TO LOOK FOR? Vue, React, Python
Tags: vue, react, python, javascript
Published: 2020-08-08 16:30:23

What is a name of a Entry position to look?

Jobs available mostly have “at least 2-3-5 years experience”

Yet.... it says “entry” and they assume you already have the “job history” even tho, it’s to start your “history” and “experience”


React is popular in my area
Chatting Simulator
Tags: react, javascript, redux, showdev
Published: 2020-08-08 16:17:34

#I built a chatting simulator
I got bored and took a break on writing the code for this app that I'm launching later this year. I wanted to create something that I could show you dev's quickly, and to help strengthen my react, redux, and react-router knowledge. This chatting simulator did just that. I hope  you like it.

###[Demo link](https://chatbox-simulator.stackblitz.io)

###[Link to code](https://github.com/OreOlad/chatbox-simulator)

Hope you like it!
CSS tricks
Tags: css
Published: 2020-08-08 15:56:45

calc with view portal height (the view height of the device):
margin-top: calc(50vh - 20px)

<b>CSS grids:</b>
https://grid.layoutit.com/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3.org/TR/css-grid-2/#subgrids

flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

selectors:
https://www.w3schools.com/cssref/css_selectors.asp
Static Nuxt app with PWA?
Tags: vue, javascript, nuxt, pwa
Published: 2020-08-08 15:46:35

I've seen that I can build nuxt apps in SPA/Universal mode with PWA features. Amazingly I can also generate static pages using 'nuxt generate' command. 

However, I don't find any option to generate static pages with PWA as a plus. I want to know if it's possible. If yes, then how?

Edit: I figured out that PWA wasn't working because of absence of SSL. Otherwise, it's fine with any mode.
ssh - a treat for your GitHub
Tags: git, linux, devops, github
Published: 2020-08-08 15:26:50

### ssh commands

**ssh creation**
1. ssh key should be in /home/.ssh folder 
2. to generate ssh key- 

> ssh-keygen

- the command will ask you the name of the file, you can enter it. Let say, you named it "secure-shell" and follow the next instructions:

3. It will create two files in the same folder one is a public key file with extension .pub file and the other one is a private file. In our case, it will create "secure-shell.pub" and "secure-shell"

4. It needs your attention,

> secure-shell - never share this with anybody
> secure-shell.pub -to be share with a remote server that you want to excess

- When you have multiple private keys then you have to add a specific key to your main identity.

> eval $(ssh-agent)
> ssh-add ~/.ssh/secure-shell

*difference ssh-add /.ssh/secure-shell V/S  ssh -i /.ssh/secure-shell ?* 

*add will set the identity of your system for a current pointed ssh key for every commit, whether -i will set temp identity pass key(ssh key) in case you have different ssh keys added to the different remote workspaces.*

**GitHub access**

1. write the following command to view the ssh-key (we will use secure-shell i.e. our key name). Please access the directory where your ssh key present.
> cat  .ssh/secure-shell.pub
2. The above command lists a key, copy it!!
3. Goto git account, setting > SSH and GPG keys > New ssh key and paste here 
4. that it 
5. Remember, you need to generate two ssh keys to access two different git accounts. Each git account will require a unique ssh key to be added. It is a good practice.  

**Remote access**

1. On your local machine 
> cat  .ssh/secure-shell.pub
2. The above command lists a key, copy it!!
3. go to the remote machine and write following command 
> sudo vi .ssh/authorized_key 
4. Press i button to write 
5. paste your key here and press ESC button 
6. Write *:wq*

**NOTE** - *how to know which ssh is currently added*
> ssh-add -l

**It's pretty simple, right !!**
Create multiple folders at once on the terminal
Tags: tips, tutorial, terminal, cli
Published: 2020-08-08 15:26:26

---
title: Create multiple folders at once on the terminal
published: true
description: Sometimes it's hard to make multiple folders on a target folder. This is a simple trick to make it as fast as it can be.
tags: tips, tutorial, terminal, cli
cover_image: https://images.unsplash.com/photo-1544396821-4dd40b938ad3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80
---

I think you are familiar with the problem. You start a new project and to make the structure you should do something like this:

```shell
mkdir new-project && cd new-project
mkdir src && cd src

// Create folders
mkdir components
mkdir assets
mkdir configs
mkdir locales
// ...
// WHAT THE HELL?
```

This is so frustrating! There should be a better solution 🤔

![Solution](https://media.giphy.com/media/7btytajHbE7xm/giphy.gif)

You can use this syntax to create multiple folders in a directory at once. Plain and simple:

```shell
mkdir -p new-project/src/{components,assets,configs,locales}
```

😲 Just that?
Yes, just that. But let's review what happened here:
- You use `-p` to create sub-directories and on each level, if it doesn't exist, it makes sure that it will be.

- Then with `{}` you pass a comma-separated list of names to create multiple directories beside each other.

---
Wasn't that bad, hah?

![Problem solved](https://media.giphy.com/media/5bivKwxhVzshNk2Rjw/giphy.gif)
Remote workers: Are there any methods for saving on car insurance based on how little you drive?
Tags: career, watercooler
Published: 2020-08-08 15:24:00

Well after the pandemic ends, I'll continue working from home without a commute. We still need the car for groceries and occasional trips, but just don't drive all that often.

I'm not very insurance-savvy, anybody have any input on this situation?
Learning Web Development: Using books as an additional resource.
Tags: codenewbie, webdev, beginners
Published: 2020-08-08 15:06:38

{% twitter 1288473628561092608 %}

In the above tweet, I reached out to the Twitter DEV community in search of an alternative way to learn Web Development.. Resource books! I really didn't want to spend 100% of my time glued to the computer; Straining my eyes or damaging my back, but nor did I want to sacrifice any signicant learning & progress (especially as a newbie!) by taking that extended break. 

I dont know about you, but I find myself at a loss when I'm not at my computer, I feel like I should be working on a project, or watching a tutorial, this feeling occurs more when I know I need to take a break from the screen and recharge. I enjoy reading as a whole, So when I reached out to the <b>#DEVcommunity. 
<p>They did not disappoint. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ah39fmdzh99hckb0q37f.jpg)
This is my current read, It's called **HTML&CSS: Design and build websites by Jon Duckett**

These are just some of the best web development books highly recommended by Twitter users: 

* <b>Thinking In Java - Bruce Eckel

* <b>CSS in depth - Manning.com

* <b>Responsive Web Design with HTML5 and CSS - Ben Frain
My fellow Dev Jack Domleo wrote a fantastic review, find it here: (https://jackdomleo.dev/blog/book-review-responsive-web-design-with-html5-and-css-by-ben-frain)

* <b>HTML & CSS
  Javascript & jQuery - Jon Duckett <p>(my current read!)

* <b>You don't know JS - Kyle Simpson

* <b>The clean coder - Robert C.Martin

The list is endless!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4oe5scrhqb0g4uo4ys92.jpg)

It is important to take a break away from the screen, but if you find yourself wanting to continue learning, resource books are a great way to do so!
 
<i>Do we always have to rely on our computers to learn the fundamentals of Web Development? Absolutely not!