teleren/devto huggingface dataset:
Day 1 Learning Javascript
Tags: beginners
Published: 2019-03-14 03:54:01

---
title: Day 1 Learning Javascript
published: true
description: One beginner's coding journey...
tags: #beginner
---

Well, this should be fun!

So far I've learned HTML and CSS over the past 3 months. And now it's time to get started on the good stuff...Javascript.

I honestly I have no idea whether I'll love it or hate it. But I'm betting on the former. For the past several years I've had a desire to learn to code, but never fully invested my time to it. I didn't really know where to start, or what to learn, so I would choose some Codecademy course and then drift away not sure about what I was doing.

It was about 6 months ago where I finally decided I'm going to learn, and I'm going dedicate myself to it. I have a background in systems administration, which was fine but never quite fulfilling. Call me crazy but I like tedious, meticulous work. I like problem solving (a required skill in systems administration). I like to create things (My B.A. is in journalism...don't make that face). And honestly, I like the flexibility being a developer seemingly provides.

So, I began my journey. Fully committed and ready. While HTML was cool, and CSS was...interesting, I can't wait to dive into Javascript! Here we go...
Feed Customization
Tags: meta, suggestion
Published: 2019-03-14 03:09:48

---
title: Feed Customization
published: true
tags: meta, suggestion
---

I recently read this article by @mortoray:

{% link mortoray/the-internet-lottery-for-content-creators-ohf %}

It made me think about a tweak I wouldn't mind seeing for the main feed of articles here on dev.to. I think there is one big cleaving point for articles, namely whether they are _technical_ or _non-technical_. Currently my feeling is that the main feed tends to give a bit of an advantage to non-technical articles, articles about career, personal growth, culture, things like that.  I don't have a problem with such articles in general, I've even written a few of my own, but for me personally, I'd prefer to see more technical articles.

My suggestion is to create a "dial" in the profile settings, which can be tuned from non-technical to technical. This dial, in addition to the one indicating one's level of expertise, would then be used to change the balance of articles that a given user experiences in their feed. The default setting would represent the current balance of articles before any personalized settings are applied.

I think it might also be good to have a somewhat unobtrusive toggle in the main feed. Toggling this on would turn on the personalized settings. Toggling it off would revert the feed to the default. That way users could easily see the difference with a single action.

As dev.to grows, every user will have their own ideas of what kind of content they want to see. No one is inherently wrong or right, it really comes down to a matter of personal preference. I think that giving the power to users to tailor their experience is the right answer!
Pretty JavaScript Console Messages
Tags: javascript, devtools, webdev
Published: 2019-03-14 05:04:15

---
title: Pretty JavaScript Console Messages
published: true
tags: javascript,devtools,webdev
canonical_url: https://www.aaron-powell.com/posts/2019-03-14-pretty-javascript-console/
---

![Facebook](https://www.aaron-powell.com/images/pretty-javascript-console/facebook.png)

If you’ve ever opened up your browser tools while logged into Facebook you might have noticed the above in it (at least, this is what it looks like at the time of writing).

DOM warning aside, it looks a bit different to most `console.log` messages you’re probably generating, doesn’t it? A big bit of red text and some other slightly larger text. That’s a bit weird, isn’t it?

As it turns out the `console` functions have a number of formatting options, so if you want to display numbers to certain decimal places you can use `%.#f` like so:

```javascript
console.log('Pi to 5 decimal places: %.5f', Math.PI);

```

_But that only works in Firefox._

If you want to specify where an object appears in the log message you can use `%O`:

```javascript
console.log('We found an object, %O, in the system', { foo: 'bar' });

```

But that’s all well and good, how do we make **big red text**!

For that we’ll use the `%c` formatter to apply CSS at a point in the string:

```javascript
console.log('%cR%ca%ci%cn%cb%co%cw', 'font-size: 20px; color: blue;', 'font-size: 25px; color: lightblue;', 'font-size: 30px; color: lightgreen;', 'font-size: 35px; color: green', 'font-size: 30px; color: yellow;', 'font-size: 25px; color: orange', 'font-size: 20px; color: red')

```

With `%c` you provide a string of CSS rules that will be applied until the end of the message being logged _or_ another `%c` is found. This means you can create lovely rainbow effects like above, manipulating each element along the way. Or if you want to get **really** adventurous you can do something like this:

![This console is on fire](https://www.aaron-powell.com/images/pretty-javascript-console/one-fine-console.png)

```javascript
console.log('%c' + 'This console is on fire', 'font-family:Comic Sans MS; font-size:50px; font-weight:bold; background: linear-gradient(#f00, yellow); border-radius: 5px; padding: 20px')

```

Yep, we’re setting a gradient background for the text and adding some padding plus rounded corners!

Now you can’t use all aspects of CSS (I haven’t been able to figure out if you can do animations for example) and it’s not _overly_ useful. But hey, it’s a bit of fun, isn’t it! 😉
How do you structure react app file directory in 2019
Tags: react, redux, reactrouter
Published: 2019-03-14 02:26:25

---
title: How do you structure react app file directory in 2019
published: true
description: For using with Redux and React Router
tags: react, redux, react-router
---

Hi, I'm a beginner of using React, I need an advice for structure file directory for my Reactjs application. My Project consists of Readux & React-Router
State Design Pattern [Behavioral]
Tags: blog, concepts, designpattern, designpatterns
Published: 2019-03-21 19:28:45

---
title: State Design Pattern [Behavioral]
published: true
tags: blog,concepts,Design Pattern,Design Patterns
canonical_url: https://itscoderslife.wordpress.com/2019/03/14/state-design-pattern-behavioral/
---

The core idea is to create an object-oriented state machine. The state design pattern can be applied successfully to remove complex conditional logic from a software system.

- The conditional behavior gets encapsulated into separate types.
- There will be dedicated types which results in a more flexible system.
- Makes our code easier to understand.
- Adding new states or updating existing ones will require less effort.

There are 3 parts: **The context, State interface, Concrete types**.

The context exposes the public interface to the callers; it delegates requests to its state. The state protocol defines the common interface for all concrete states. Finally, the concrete state types implement the behavior associated with the state of the context. Each state type provides its own implementation for a request, thus the context behavior will be different whenever its state changes.

> The state design pattern allows an object to behave differently when its internal state changes.

Example:

1. States when user withdraws money from an ATM machine
2. States during the process of user buying something on an e-commerce platform

The state design pattern allows objects to behave differently as their internal state changes. It can be applied successfully to remove monolithic conditional logic from a software system.

To implement the state pattern, you need to identify the steps that cause changes in the behavior of an object. Then, extend these steps and encapsulate them into dedicated state types.

Disadvantage of State Pattern is exposing the states to clients. The state types should be used exclusively by the context, whereas clients should interact with the interface provided by the context.
Better Plots (in Three Lines!)
Tags: python, dataviz, matplotlib, quicktip
Published: 2019-03-14 00:39:50

---
title: Better Plots (in Three Lines!)
published: true
description: 
tags: python, dataviz, matplotlib, quicktip
---

![A prettier plot, with just a little more code!](https://thepracticaldev.s3.amazonaws.com/i/nnbgeeir3pgi6i7rsbhv.png)

If you've done any plotting in python, you've almost certainly used matplotlib. While it offers a simple approach to making plots, they are sometimes... well they can be a bit ugly, by default.

I'll go over two quick tips to give your plots a little more personality:

1. Replacing the default styles
2. Making prettier titles

> **Note** There are plenty of other plotting options with their own styles (seaborn, plotly, bokeh, etc.), but matplotlib is the most widely used, so that's what I'll focus on

> You can skip to the repl.it below to play around with these styles!

# 1. Replacing the Default Styles

Next time you type in that import statement, consider adding _just one_ more line:

```py
import matplotlib.pyplot as plt
plt.style.use('ggplot')
```

Now when you make a plot, it will use the styles found in [ggplot](https://ggplot2.tidyverse.org/), a popular plotting library in R.

There are [plenty of other options](https://matplotlib.org/gallery/style_sheets/style_sheets_reference.html), such as fivethirtyeight and seaborn-colorblind!

**Note**: If you don't want to apply one style to every plot, you can do:

```py
with plt.style.context('ggplot'):
  plt.plot(x, y)
```

# 2. Making Prettier Titles

Matplotlib puts titles in the center, right at the top. Did you know you can move that title around? Did you know that you can have multiple titles? We can use _both_ to make nicer titles:

```py
plt.title("The Main Title", loc='left', fontsize=18)
plt.title("a subtitle", loc='right', fontsize=13, color='grey')
```

If you have something plotted already, then this moves your main title to the left, and adds a smaller and greyed-out subtitle on the right. It's a great way to give your plots more context, and make them look better!

I'll even leave you with a function that makes this easier to implement:

```py
def fancy_titles(t1, t2, ax=None):
  if ax:
    ax.set_title(t1, loc='left', fontsize=18)
    ax.set_title(t2, loc='right', fontsize=13, color='grey')
  else:
    plt.title(t1, loc='left', fontsize=18)
    plt.title(t2, loc='right', fontsize=13, color='grey')

plt.plot(x, y)
fancy_titles("A Cool Title", "a cooler subtitle")
```

Lastly, here's a repl.it, so you can play around with different styles:

{% replit @PjTrainor/matplotlib-styles %}
Recommended tool for viewing a video frame-by-frame?
Tags: tools, video, animation
Published: 2019-03-13 23:58:11

---
title: Recommended tool for viewing a video frame-by-frame?
published: true
description: 
tags: tools, video, animation
---

I have a screen recording that I want to view frame-by-frame, to help me debug an animation. What tool would you recommend?
Mutated T-shapes
Tags: webdev, career
Published: 2019-03-13 23:11:00

---
published: true
layout: post
title: Mutated T-shapes
tags: [webdev, career]
date: 2019-03-13 19:11 -0400
author: Gregg Meluski
description: change how you think about your skills!
---
*This post was originally published at [meluski.com](https://meluski.com/)*

One of the common career development tropes I've heard over the years is t-shaped skills, but I think it's an ineffectual representation of how people actually evolve in their career.  

Primarily, this oversimplification serves to narrow the perception of the person significantly - framing a person's skills in a t-shape makes it sound like they are really excellent at one thing and marginally exceeding uselessness in everything else.

From my own perspective, I have evolved interests in other disciplines that interact with my core role as a developer, such that over time what develops is more of a mutated t-shape. For example, my skills would look something like this:
  
```
product | marketing | development | design | ux | sales
  x          x            x           x       x    x
  x          x            x           x
  x                       x 						
                          x
                          x
                          x
```

The idea here is relatively simple - it’s not a straight T, it’s mutated. This graphic representation is far more descriptive of where a person stands. Any energy put into learning other disciplines is no longer reduced to a binary has it / doesn't have it when falling outside the core skill set. Someone who fiddled around on Photoshop no longer has the same depth of skill as a person who understands something about design principles. The mutated t-shape is the results of a person who has put efforts into fields to expand their field of knowledge.

Being open to a mutated t-shape opens the door to zooming in or out of each column. Development could have its own set of skills, or you could step back and possibly encapsulate this skill set in terms of `Product` and put it alongside other more general skills (perhaps with the excommunication of `sales`, I would hesitate to categorize that as part of a traditional Product skill set).
It's Okay to Take a Break
Tags: health, beginners, culture
Published: 2019-03-13 22:23:12

Anyone who follows me may have noticed that I haven't posted much over the past week (I'm usually a 2-3 posts/week kind of person). That's because I'm on vacation! My little sister is in town and I'd much rather spend time with her than worry about being _productive_ so I haven't worried too much about keeping up with work or posting here on Dev.

Studying and practicing your craft are necessary to learn and stay up-to-date, but spending time with friends and family is more important. You only have so much time to spend and you've got to prioritise the things that are important to you. For me, that's my family. So I'll see you in about a week with a new post. Until then, enjoy some of my __greatest hits__:

{% link https://dev.to/awwsmm/101-bash-commands-and-tips-for-beginners-to-experts-30je %}

{% link https://dev.to/awwsmm/language-features-best-and-worst-1451 %}

{% link https://dev.to/awwsmm/how-to-encrypt-a-password-in-java-42dh %}

{% link https://dev.to/awwsmm/installing-and-running-hadoop-and-spark-on-windows-33kc %}

{% link https://dev.to/awwsmm/managing-your-python-project-with-git-and-pybuilder-21if %}
I am a Mexican Software Developer & Senior CS student, Ask Me Anything!
Tags: ama
Published: 2019-03-13 22:14:25

---
title: I am a Mexican Software Developer & Senior CS student, Ask Me Anything!
published: true
tags: ama
---

I will be completing my Bachelors Degree in Computer Science in June (in Mex) and I am currently working and doing social service as a Software Developer.

I thought that maybe it would be interesting for you to know how is it to be a Dev/Student in Latam, so here I am.

I used to do web development in my work but now I am doing a lot of Image Processing stuff. In the social service (for the University) I am doing Machine Learning in my University's Hospital.
Nevertheless, Lisa Armstrong Coded
Tags: wecoded
Published: 2019-03-13 22:04:06

---
title: Nevertheless, Lisa Armstrong Coded 
published: true
tags: shecoded
---

## I continued to code in 2019 because I love this stuff.  Last year I began 'getting smart' about JS6, GIT, AngularJS which lead me to VueJS which I used in a couple of project and have fully embraced.  I'm at the point now where I can really enjoy what my new skills can do.


## I want to see the tech community have critical thinking, but not critical attitudes.
Vuepress-plugin-docgen
Tags: vuepress, vue, plugins
Published: 2019-03-13 21:47:00

---
title: Vuepress-plugin-docgen
published: true
description: Vuepress plugin to generate docs from your components
tags: vuepress, vuejs, plugins
cover_image: https://vuepress.vuejs.org/hero.png
---

Today i want to introduce you to version 1 of [vuepress-plugin-docgen](https://github.com/f3ltron/vuepress-plugin-docgen)

## Why would I create such a plugin when something like [vue-styleguidist](https://www.npmjs.com/package/vue-styleguidist) is already doing the same job?

### In a word: VUEPRESS

Even if vue-styleguidist is actually doing a good job, Vuepress is so much easier to use and so beautiful that i prefere using it.

So I searched for a plugin that does just that in Vuepress.

I found [vuepress-plugin-component-docgen](https://github.com/youngtailors/vuepress-plugin-component-docgen). 
It was stop for a long time. I tried to help by submitting PR's but not really active.

So I rewrote the plugin entirely and then created [vuepress-plugin-docgen](https://github.com/f3ltron/vuepress-plugin-docgen).

You can check the documentation [HERE](https://f3ltron.github.io/vuepress-plugin-docgen/)

It is working well but still a work in progress. You can check our [PROJECTS HERE](https://github.com/f3ltron/vuepress-plugin-docgen/projects) to stay up to date.


Simple configuration examples:

```bash
yarn add -D vuepress-plugin-docgen

```

```js
plugins: [
  // as we respect the naming convention vuepress-plugin-docgen you can juste docgen as name
  [ 'docgen',
    {
      componentsDir: path.join(__dirname, '../../components')
    }
  ]
]

```

And that's all ! You need to use the jsdoc convention and it will work really well :).

Here is why I chose Vuepress instead of  Vue-styleguidist [HERE](https://slides.com/florentgiraud/janvier#/) in [FRENCH]

Thank you for reading and your support! I hope you find the plugin useful. Stay tuned :).

Ps: If you like vuepress-plugin-docgen feel free to star and support with patreon :)
Moving from frontend dev to either backend or full-stack?  
Tags: question, discuss, career
Published: 2019-03-13 21:17:09

---
title: Moving from frontend dev to either backend or full-stack?  
published: true
description: 
tags: #question, #discussion, #career
---

I've been working as a frontend dev for a bit over half a year now and I've found it surprisingly challenging and fun. However, career-wise, I don't want to end up as only a frontend dev, I love working full-stack, so I'm wondering if any of you have made the jump from only frontend to either full-stack or backend? If so, was it difficult? How did you prepare before going after those positions?
MongoDB (the company) is up HUGE after today's earnings call
Tags: news, business, mongodb, opensource
Published: 2019-03-13 20:47:28

This is not explicitly about software, but MongoDB, the company behind the database, is up **about 17%** (as I write this) after announcing earnings and outlook.

### [Full story in the news](https://www.marketwatch.com/story/mongodb-stock-gains-12-after-earnings-beat-bullish-guidance-2019-03-13)

That means that MongoDB is climbing towards a $6 billion valuation as a publicly traded company. Amazon's release of [DocumentDB](https://aws.amazon.com/blogs/aws/new-amazon-documentdb-with-mongodb-compatibility-fast-scalable-and-highly-available/) worried some people about Mongo's outlook—but apparently the picture is still pretty rosie.

Disclosure: I own a bit of MongoDB stock.
Weekly Coding Challenge - The Complete Guide
Tags: challenge, javascript, css, html
Published: 2019-03-13 19:59:35

---
title: Weekly Coding Challenge - The Complete Guide
published: true
description: A Weekly Coding Challenge program to help you improve your coding skills by practicing on real-world projects.
tags: challenge, javascript, css, html
canonical_url: https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/
cover_image: https://www.florin-pop.com/static/db07adb1dbff2014899b78b2462092df/ff993/weekly-coding-challenge.png
series: Weekly Coding Challenge
---

## Introduction
Some of you might know (or if you don't, you will find out now 😉) that I recently started a Weekly Coding Challenge program for developers which is beginner-friendly and aims to help them learn, practice and/or improve their development skills by creating all sort of projects and small-sized applications.

Also, there is a twist 😏: I will be participating in the challenge too and I'm going to write a new tutorial each week in which I'm going to explain in detail how I solved the challenge. This will be great for those of you which might get stuck along the way. Also for those of you which successfully completed the challenge this will be a good opportunity to see another approach and maybe learn something new. 👍

I've shared this idea with the developers community and I was very surprised 😲 by all the positive feedback that I received, so I decided to create this Guide which explains in much more detail all the things you need to know in order to participate.

## Why am I doing this?
I LOVE ❤️ these kind of projects as they allow me to practice different coding skills in a short period of time. This is a win-win situation as you might not always have the required amount of time to work on a big, "start-up" like idea or project. At the same time you feel the satisfaction of completing something, even if it's a smaller project (which will boost your motivation). 😄

I really enjoy helping others and this is a great way for me to share the things that I've learned in the past 6 years with the ever growing community of developers. I've learned a lot from others and this is my way of giving back to the community.

If you are interested to join (why wouldn't you, right? :smirk:) you can read how to do it [here](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/).

You can also reach me on Twitter at: [@florinpop1705](https://twitter.com/florinpop1705) if you have any questions!

Happy coding! 🙂
Simple linter for yaml files modified in git
Tags: git, automation, perl6, taskrunner
Published: 2019-03-13 19:46:56

---
title: Simple linter for yaml files modified in git
published: true
description: How to lint yaml files in your git based project
tags: git, automation, perl6, taskrunner
---

# Yaml is fragile

If you edit yaml files often enough you might know that YAML syntax is way too fragile and accidental errors easy creep in and break your code.

Here is [yaml-lint](https://github.com/melezhik/sparrow-plugins/tree/master/yaml-lint) [Sparrow6](https://github.com/melezhik/Sparrow6) plugin to the rescue.

Whenever you change your yaml files in git, lint them through yaml python module.

Yaml-lint picks up all the git `A` or `M` files and run yaml linter for them.


# Install plugin


```
$ tom --profile yaml
install yaml@yaml-lint ...
```

# Use plugin


Just edit whatever file you want to edit:


```
$ nano main.yml # already added to git modified file - `M`
$ nano foo.yml   
$ git add foo.yml # newly added to git file - `A`

```

And run linter before commit:


```
$ tom yaml-lint

gimy@77b3f88acea1:~/projects/LFA-Applications$ tom yaml-lint
19:41:47 03/13/2019 [repository] index updated from file:///home/melezhik/projects/repo/api/v1/index
19:41:48 03/13/2019 [lint modified files] python -c 'import yaml,sys;yaml.safe_load(sys.stdin)' < main.yml
19:41:48 03/13/2019 [lint modified files] python -c 'import yaml,sys;yaml.safe_load(sys.stdin)' < foo.yml
```

Now you're good to commit:

```
git commit -a -m "we have a good yaml"
```