teleren/devto huggingface dataset:
Get your developer portfolio reviewed for FREE this Friday
Tags: webdev, portfolio, career, beginners
Published: 2019-12-30 23:32:23

---
title: Get your developer portfolio reviewed for FREE this Friday
published: true
description: This Friday, December 6 at 3 PM CST I will be going live on YouTube to exclusively review developer portfolios.
tags: webdev, portfolio, career, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/c8dos35lw7r6xokg5g18.jpg
---

###Greetings developers!

Do you have a developer portfolio that could use a second set of seasoned eyes? 


This Friday, January 3rd at ~~2 PM CST~~ **TIME HAS BEEN CHANGED TO 1 PM CST DUE TO VOLUME!** I'll be doing a livestream on my [YouTube channel](https://www.youtube.com/realtoughcandy) exclusively reviewing your portfolios. 

Some things I assess during the review: 

- First impressions
- Messaging
- UX/UI
- Projects: strengths & improvement areas
- Contact forms
- Browser compatibility
- More

It takes a lot of bravery to put your work in front of the world, but in return you will get a ton of practical, actionable advice from a working software developer who's helped developers just like you land a dev job. Thank you for sharing your work with me –– I'm honored to help you on your developer journey. 

##Sound interesting? Leave a link to your portfolio in the comments below. 

Alternately, you can send it via email (realtoughcandy at gmail dot com). 

###The deadline for submission is this Thursday, January 2nd at 11 pm CST. 

Now let's see some portfolios!
How to make a form handling with vuex
Tags: vue, javascript, todayilearned, refactorit
Published: 2019-12-30 22:15:06

#Problem

Let's say you want to save the input of your form on the state of vuex.

Maybe someone new to vuex would try something like this:

```html
<input id="name" name="name" type="text" v-model="$store.state.user.name">
```

If you try this you will see that:
1. It **doesn't** work
2. Even if it worked, it is totally against the [purpose](https://vuex.vuejs.org/guide/ "purpose") of vuex, that is **never have a change of state without it being made by a mutation.**

**Always send a mutation to change something.**

Now, with that in mind, if you look into the documentation of vuex you will find the following:

> [...] An alternative approach is using a two-way computed property with a setter:

```html
<input v-model="message">
```

```javascript
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
```

[click here to see.](https://vuex.vuejs.org/guide/forms.html#two-way-computed-property "click here to see.")

You can use the v-model to change, but you will need to register a computed property with a getter and a setter to change the state.

Works? 
Works.

But let's say you have a **form**, you will need to make a getter and a setter to every input. This works, but isn't practical.

The best way to do it, **in my opinion**, is to use the **principles of clean code** to make it:

```javascript
export function mapFields(options) {
  const object = {};
  for (let x = 0; x < options.fields.length; x++) {
    const field = [options.fields[x]];
    object[field] = {
      get() {
        return this.$store.state[options.base][field];
      },
      set(value) {
        this.$store.commit(options.mutation, { [field]: value });
      }
    };
  }
  return object;
}
```

Where mapField is the function that map all the field and handle the form. Options is an object with a field which is the field you want to map and a base to refer.

At the end it will only return the getter and setter to us, not so different from before, but with a lot less code.

EDIT: I forgot to show how to use it, so here it is.

I would put it on some helper.js, so i can just import it from my userForm.vue, like this:

```javascript
<script>
import { mapFields } from "@/helpers.js"

export default {
  computed: {
    ...mapFields({
    fields: ["name", "email", "street", "zipcode"],
    base: "user",
    mutation: "UPDATE_USER"
    }),
...
```



Hope you enjoyed my first post here, any questions comment bellow! 😎

#Happy new year
![](https://media.giphy.com/media/1kymxb4RCuOwE/giphy.gif)
Here are my Trendy CSS logo loader and curtain effect tut
Tags: css, design, codepen, tutorial
Published: 2019-12-30 22:40:27

Hello there...

This is the primary blog entry I'm making on my new blog and I will be offering to you my wonderful codes so remember to bookmark me!.

I'm sharing the source code for my trendy logo loader I utilized on Voxsugar. Visit the link to see the demo.

There's not a lot to do other than adding some CSS snippets in for your CSS document and blast you are finished!

Above all else include this snippet for the logo loader in your CSS document.



<pre><code>body {
  font-family: "Texta", "AvenirNext-Regular", "Helvetica Neue", Helvetica, Arial,
   sans-serif;
  font-size: 18px;
  line-height: 30px;
  background-color: #fff;
  color: #2f3846;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:before {
  content: "";
  width: 140px;
  left: 45%;
  position: fixed;
  top: 50%;
  height: 80px;
  background-image: url(/your-logo.png);
  background-repeat: no-repeat;
  background-size: inherit;
  animation: logoloader 1s ease-in-out forwards;
}

@keyframes logoloader {
  0% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
  }
}
</code>
</pre>
*Don't forget to replace the image url with your logo

Lastly for the page transition add this to your CSS document again

<pre><code>
body:after {
  content: "";
  width: 100%;
  background-color: rgb(248, 36, 177);
  height: 100vh;
  position: fixed;
  transform: translateX(-100%);
  left: 0;
  top: 0;
  z-index: 99;
  animation: pagetransition 1.6s ease-in-out forwards;
}

main {
  visibility: hidden;
  animation: contentshow 0s ease-in-out forwards 0.8s;
}

@keyframes pagetransition {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes contentshow {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}
</code>
</pre>
Done..you have just added logo loader and curtain effect on your site.

Original article https://samio.dev/css-logo-loader-and-curtain-effect/
Building The DataDog Platform For Processing Timeseries Data At Massive Scale - Episode 113
Published: 2019-12-30 22:29:52

<p>DataDog is one of the most successful companies in the space of metrics and monitoring for servers and cloud infrastructure. In order to support their customers, they need to capture, process, and analyze massive amounts of timeseries data with a high degree of uptime and reliability. Vadim Semenov works on their data engineering team and joins the podcast in this episode to discuss the challenges that he works through, the systems that DataDog has built to power their business, and how their teams are organized to allow for rapid growth and massive scale. Getting an inside look at the companies behind the services we use is always useful, and this conversation was no exception.</p><p><a href='https://www.dataengineeringpodcast.com/datadog-timeseries-data-episode-113/'>Listen Now!</a></p>
How to read Documentation
Tags: productivitydocumentation
Published: 2019-12-30 22:07:35

---
title: How to read Documentation
published: true
description: 
tags: productivity | documentation 
---

Want to scan through documentation like a WARRIOR By the end of this blissfully perusal you as a (developer, crypto nomad, designer) will be able to read documentation for the subjects of your interest in 2020?


______

!["Most documentation says 'Get started' "](https://thepracticaldev.s3.amazonaws.com/i/t3hcriv2pqig91f2ouu9.png)

This is software. Exploitable software. Software needs maintenance, surgery, tools, equipment or it will rot by giving it no attention. This is obvious. Regarding (developer person), reading documentation is similar to stepping in a arena. Preparation is necessary.

## 1.  [🔨](https://emojipedia.org/hammer/)You as a developer, using licensed software should be thinking.  
<ul>
<li> "Does this software support my system?" 🤔</li>
<li> "What requirements do I need to get started?"  🤔 </li>
<li> "I'm new. How do I get started?"  🤔</li>
<li> "What are some examples?" 🤔 </li>
<li> "Who (companies) are using this software?"  🤔</li>
<li> "Will this documentation help me get started?" </li>


## 2. Prepare to be presented Examples[📓](https://emojipedia.org/notebook/)

Expect to be presented multiple or single quick illustrative example(s) to quickly get you as a developer up and running with the new software your interested in.

## 3. Prepare to be presented Instructions[📓](https://emojipedia.org/notebook/)
	
Expect to be presented a list of orders from command HQ to run the necessary software your interested in.

## 4. Prepare to ask for more resources[📓](https://emojipedia.org/notebook/)

Expect to ask for more resources or be willing to browse the web, think harder to find more resources



Reading documentation isn't a breeze. Starting to scroll the documentation page of a new technology without precautions is the same as allowing a leaf to fall from a tree and watch the leaf slowly descend to the ground allowing thirty minutes of what could've been productive time reading documentation to pass silently.   
It's also worth to know that <b>silently</b> the software documentation your attempting to read and recall is  being used by (as many companies it says it's being used by on GitHub). It's obvious how to understand the software
Order matters  
Tags: beginners, rails, ruby
Published: 2019-12-30 22:14:42

In rails routes, Rails routes are matched in the order they are specified.

For example: 
if you have resources:books above a get 'books/top ' the show action's route for the resources line will be matched before the get line. 

To fix it: 
move the get line above the resources line so that it is matched first.

In Model's association, the order of the association does matter.

For example:  
has_many :model should be above has_many :items, through: :model.
The Hacktoberfest swag just came in today's mail!
Tags: hacktoberfest, watercooler, fun
Published: 2019-12-30 22:10:25

##Just a random brag that the Hacktoberfest package just arrived! 🎉🎉🎉


###Sneak peek from the un-boxing 📦
### 1. T-Shirt:
![Hactober T-Shirt](https://thepracticaldev.s3.amazonaws.com/i/rycro5vfj2w155mt9pqr.jpg)

### 2. Cup coaster:
![Cup Coaster](https://thepracticaldev.s3.amazonaws.com/i/gxun4bgf4bpq7eib65mw.jpg)


### 3. And a lot of Cool Stickers: 
![Stickers](https://thepracticaldev.s3.amazonaws.com/i/m9djx7w696uxm3tn9pdg.jpg)

###Thank you again for the nice event! 

###Special thanks to Dev.to and Digital Ocean!
The success story of mistakes
Tags: career, productivity, beginners, discuss
Published: 2019-12-30 22:07:52

**I** spend over 10 hours on a weekly basis listening to podcasts, reading articles, browsing different platforms for technical and career topics that are related to any field of IT. 

**The** main titles for career articles are: "How I went from Janitor to DevOps", "Schoolteacher to JS Developer", "Zero to Hero in 6 months". I love these readings because it gives the reader encouragement, that it is possible to change your life, learn, practice and land a job in the IT industry.



![zero to hero image](https://thepracticaldev.s3.amazonaws.com/i/g9zad3rnws6ez66yc29l.png)



**These** articles are very supportive, although I believe that we learn much more from our mistakes and other's mistakes. While these stories give you the end product of a journey, I think the journey full of obstacles, setbacks, mistakes provides more supplemental information for individuals.

**People** can relate to these failures and obstacles more because they most likely run into them as well throughout their journey. Reading about them, and learning about how others overcame them, gives motivation and guidance, that it is possible to push through. It gives them relief when they see that they are not the only ones who have to deal with these barriers.

*"It is good to learn from your mistakes. It is better to learn from the other's."*

**After** reading this article, kindly share your thoughts and ideas, how you overcame the setbacks and the obstacles you had in your career. Mention the biggest mistake you made, and what would you do differently if you had a chance to go back.

**In** my estimation, the diverse stories/ideas that this community offers will help to forge an ultimate kit, that helps people to stay driven and to remain on the path of being successful.

Looking forward to hearing from you!
Oliver
How do you review and refine your development practices?
Tags: discuss
Published: 2019-12-30 21:59:45

I'm reading a fascinating book at the moment called Atomic Habits by James Cleer (very highly recommended by the way).

Towards the end, he talks about athletes like Katie Ledecky and Eilud Kipchoge who even after all their success still review and record every single training session and look for improvements.

I'm interested to hear how my fellow devs keep themselves honest. 

I personally find once a way of coding has been mastered you fall into habits which may be good or bad.

I'm trying to fathom a way to quantify it (like recording the number of reps you would as an athlete) but can't think of anything accurate enough
VS Code Mac Keyboard Shortcuts
Tags: vscode, tutorial, productivity
Published: 2019-12-30 21:57:24

Time. Time flies. Time is money. Time is of the essence.
We lose it. We spend it. We kill it. We all have the same 24 hours of it.
We can't make more of it. 

Why spend more time doing something if you don't have to? 
These are the Visual Studio Code keyboard shortcuts I use most often that saves a little bit of time. 
*The shortcuts list can also be viewed inside Visual Studio Code: 
Code --> Preferences --> Keyboard Shortcuts*



###<center>- EDITING -</center>###
**Comment out a line or block of code**
⌘ + /								

**Delete a line of code**
⌘ + X

**Delete a word in front of cursor**
⌥ + DELETE
*NOTE: need to apply twice if the word is in front a symbol*

**Delete all code in front of cursor**
⌘ + DELETE

**Copy and paste a line of code**
⌥ + SHIFT + UP/DOWN

**Insert new line below the current line**
⌘ + ENTER
	
**Insert new line above the current line**
⌘ + SHIFT + ENTER			

**Move a line or block of code up or down**
⌥ + UP/DOWN			



###<center>- SELECTION -</center>###
**Select a line of code**
⌘ + L								

**Select a block of code by line**
cursor at beginning of line + SHIFT + UP/DOWN		

**Select all code above or below cursor**
⌘ + SHIFT + UP/DOWN

**Select next instance of a word**
selected word + ⌘ + D
*NOTE: not case-sensitive*			
	
**Select all instances of a word**
selected word + ⌘ + SHIFT + L
*NOTE: not case-sensitive*

**Select all instances of a word by case**
Turn on "Match Case" ("Aa" icon on upper right corner will turn white): 
⌘ + C + ⌥
Highlight one instance of the word.
Select all instances of the word: ⌘ + SHIFT + L
	


###<center>- WORKSPACE -</center>###
**Open terminal**
⌘ + J
CTRL + `

**Wrap text**
⌥ + Z

**View sidebar**
⌘ + B

**Open Find**
⌘ + F

**File search**
⌘ + P




The amount of time saved with these shortcuts can now be used to stare at your computer while figuring out why your code isn't working. Hope these help you to become a more efficient programmer. If you know of any others or the equivalent Windows shortcuts, please share!
Python: Specify a project directory with virtualenvwrapper
Tags: python, virtualenv, virtualenvwrapper, learning
Published: 2019-12-30 21:45:16

---
title: Python: Specify a project directory with virtualenvwrapper
published: true
description: How to automatically cd into your project directory when using virtualenv Python environments
tags: python, virtualenv, virtualenvwrapper, learning
---

If you're using `virtualenvwrapper` to manage your Python environments, you can specify your project directory in your environment settings. Doing so will automatically `cd` you into your project when you open its environment &mdash; a nice little time-saving feature.

When creating our environment, we can use the `-a` flag to specify the project directory:
```
$ mkvirtualenv -a [/path/to/project] [name-of-environment]
```

If, for example, we want to create an environment for a tutorial project at the root of our home directory on a Mac, we would execute:
```
$ mkvirtualenv -a ~/tutorial tutorial-env
```

The next time we start our virtual environment, it will automatically `cd` us to the proper directory:
```
$ workon tutorial-env

(tutorial-env) ~/tutorial $ 
```

(Your prompt may look different, depending on your settings.)

But, what if we've already created a project and environment without this setting? In that case, we can use `setvirtualenvproject` to change this setting:
```
$ setvirtualenvproject [/path/to/environment] [/path/to/project]
```

On a Mac, `virtualenvwrapper` places our `virtualenv` environments in the `~/.virtualenvs` directory. So, per our example above, we would execute:
```
$ setvirtualenvproject ~/.virtualenvs/tutorial-env/ ~/tutorial
```

---

Was this helpful? Did I save you some time?

## {% cta https://www.adamlombard.com/support-me %} 🫖 Buy Me A Tea! ☕️ {% endcta %}

---
Day28:convert markdown to html - 100DayOfRust
Tags: rust
Published: 2019-12-30 21:30:01

We can use `comrak` crate to convert Markdown to HTML code:

In `Cargo.toml`:

```
[dependencies]
comrak = "0.6.2"
```

In `main.rs`:

```rust
use comrak::{markdown_to_html, ComrakOptions};


fn main() {
    let md_content = r#"
## Rust Introduction

Rust is a programming language.

### Hello World

'''rust
fn main() {
    println!("Hello, world!");
}
'''

### Reference
Rust official website: www.rust-lang.org

    "#;

    let option = ComrakOptions::default();
    let rendered = markdown_to_html(md_content, &option);
    println!("{}", rendered);

    println!("{}", "-".repeat(20));

    // add ext_autolink option, link will be auto wrapped by a tag
    let option = ComrakOptions {
        ext_autolink: true,
        ..ComrakOptions::default()
    };
    let rendered = markdown_to_html(md_content, &option);
    println!("{}", rendered);
}

```

Run code `cargo run`:

```html
<h2>Rust Introduction</h2>
<p>Rust is a programming language.</p>
<h3>Hello World</h3>
<pre><code class="language-rust">fn main() {
    println!(&quot;Hello, world!&quot;);
}

</code></pre>
<h3>Reference</h3>
<p>Rust official website: www.rust-lang.org</p>

--------------------
<h2>Rust Introduction</h2>
<p>Rust is a programming language.</p>
<h3>Hello World</h3>
<pre><code class="language-rust">fn main() {
    println!(&quot;Hello, world!&quot;);
}

</code></pre>
<h3>Reference</h3>
<p>Rust official website: <a href="http://www.rust-lang.org">www.rust-lang.org</a></p>

```

You can see with the option `ext_autolink: true`, url will be auto wrapped by `<a>` tag. For more conversion options, [check here](https://docs.rs/comrak/0.6.2/comrak/struct.ComrakOptions.html).


### Reference
* [comrak crate](https://docs.rs/comrak/0.6.2/comrak/)
* [comrak conversion options](https://docs.rs/comrak/0.6.2/comrak/struct.ComrakOptions.html)
Hosting Blazor on Netlify using Github Actions (Part 2 of Series)
Tags: dotnet, webassembly, github, netlify
Published: 2019-12-30 21:27:52

This series introduces hosting Blazor WebAssembly on Netlify using Github Actions. Previously, in [part 1](https://dev.to/ramhemasri/hosting-blazor-on-netlify-using-github-actions-part-1-of-series-3a1k), we have created a Blazor WebAssembly Project using Visual Studio 2019. In part 2 of this series we will use Visual Studio 2019 to set up Github Project.

# Create Github Project repository from Visual Studio 2019.

1. In your Visual Studio 2019 toolbar select **Add to Source Control** > **Git**. This will initialize a git repository and adds all the files to the local git repository
![Add to Source Control](https://thepracticaldev.s3.amazonaws.com/i/jzza4j050xavw15prfhm.png)
2. Select **Team Explorer** from the right hand sidebar. Click on **Publish to Github** 
![Team Explorer](https://thepracticaldev.s3.amazonaws.com/i/d1uhkmif54rv84ivmf7m.PNG)
3. You have to enter your Github Credentials in **Connect To Github** window. I am using my Github personal profile. Enter **username**/**password** and click **Sign in** button.
![Connect To Github](https://thepracticaldev.s3.amazonaws.com/i/lkhs387zh8koons3mldu.PNG)
4. Enter your desired **repository name** and an optional description. Click **Publish**.
![Publish to Github](https://thepracticaldev.s3.amazonaws.com/i/8l2vzd1pfbgi3yxeqoez.PNG)
5. When the repository is successfully pushed you should see an information alert **Repository created successfully** in **Team Explorer** side bar.
![Repository created successfully](https://thepracticaldev.s3.amazonaws.com/i/tp9d3pey8ashyngjondt.PNG)
6. The published repository can be accessed from [BlazorOnNetlify](https://github.com/ramhemasri/BlazorOnNetlify/)
![BlazorOnNetlify Github repo](https://thepracticaldev.s3.amazonaws.com/i/kad9f5dlcwtjcwhokz1j.png)
Willing to become a Java Backend developer, what course to choose ?
Tags: career, java, beginners
Published: 2019-12-30 21:25:20

I've got 2 years professional experience on Android, using mostly Kotlin and all the fun tools that everybody uses (Dagger, Coroutines, Jetpack, etc...) and I want to switch to a backend developer role.

As I am confortable developing on top of the JVM, I think that becoming a Java developer could be a cool move, which won't take me years to achieve.

Do you know any course I could follow on my own (I can't quit my job to study full time) ?
Hosting Blazor on Netlify using Github Actions (Part 1 of Series)
Tags: dotnet, webassembly, netlify, github
Published: 2019-12-30 21:20:58


This series introduces hosting Blazor WebAssembly on Netlify using Github Actions. In part 1 we will create a Blazor WebAssembly Project using Visual Studio 2019

### What is Blazor?
Blazor is a feature of ASP.NET Core which lets you build interactive web UIs using C#. Blazor can run on client-side directly in the browser using WebAssembly or it can be hosted on server side in a ASP.NET core app.


### Prerequisites
As of this writing Blazor WebAssembly is still in preview and it requires .Net Core 3.1 SDK. Check your dotnet version by running `dotnet --version` in a command shell. This command should return **3.1.100**. Otherwise, you have to install [.NET Core 3.1](https://dotnet.microsoft.com/download/dotnet-core/3.1). [Visual Studio 2019 16.4](https://visualstudio.microsoft.com/vs/) or [Visual Studio for mac 8.4 preview 4](https://visualstudio.microsoft.com/vs/mac/) also includes .NET Core 3.1. Run the following command shell to install Blazor project templates.
```dotnetcli
   dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
   ```

### Create Blazor WebAssembly App in Visual Studio 2019 

1. In Visual Studio 2019, create a new project by navigating to **File > New > Project** 
![Create New Project](https://thepracticaldev.s3.amazonaws.com/i/w14rh7gamqqstxwtxsnv.PNG)
2. Select **Blazor App** from the **Create a new Project** window and click **Next**
![Cerate Blazor App](https://thepracticaldev.s3.amazonaws.com/i/l0n1zxr9l3zs2uhg9q3n.png)
3. In **Create a new Blazor app** window Select **Blazor WebAssembly App** and uncheck **Asp.NET Core hosted**. Click on Create.
![Create a new Blazor app](https://thepracticaldev.s3.amazonaws.com/i/tba4e81clrp1or0uhpjd.png)
4. In **Configure your new project** window enter **Project name** and click on **Create**. 
![Set Blazor Project name](https://thepracticaldev.s3.amazonaws.com/i/lo945bzbuaxq17jbxh5y.png)
5. Visual Studio displays the newly created Blazor WebAssembly app in **Solution Explorer**. You can run the app by pressing **F5** or clicking **IIS Express**.
![Run Blazor App](https://thepracticaldev.s3.amazonaws.com/i/qydfg9qiajeqw1mxmtng.png)
![Blazor App in Browser](https://thepracticaldev.s3.amazonaws.com/i/b5dcyxjdmp9rcvtn1m0z.gif)