teleren/devto huggingface dataset:
Extension Google Chrome for Developer
Tags: tools, webdev, productivity, beginners
Published: 2019-03-17 09:12:21

---
title: Extension Google Chrome for Developer
published: true
description: A tool extension chrome for web developer
tags: #tools #webdev #productivity #beginners
series: 1.0
canonical_url : https://www.linkedin.com/in/ogi-setiawan-82a176132/
---


![alt text](https://s3.amazonaws.com/eclincher.wp.upload/wp-content/uploads/2015/08/25160839/Chrome-Extensions-401x213.jpg)

**Hello world**, This is my first article on the internet :)

Maybe my knowledge is still very minimal about the world of **`programming`** that is getting increasingly, and this is also not the original writing to be made, even though I am still a *`noob`* in the **`programming`** world I am not stingy about science, because sharing is a pleasure in the world: D


OK, I will go straight to the topic of my conversation, about important extensions on **`Google Chrome for Developers`** 


> #[1. Todoist: To-Do list and Task Manager](https://chrome.google.com/webstore/detail/todoist-to-do-list-and-ta/jldhpllghnbhlbpcmnajkpdmadaolakh) 


An **`Application Todolist Tasks`**, which is very helpful for developers to record what tasks will be done on that day, so that developers can plan to when the project will be completed.

For **`example`** today a developer will work on 5 tasks:

- Create a login interface page

- Create user login conditions,

- Interactive login with javascript,

- Create a user dashboard page

- Displays data session user login

With this is, developer can see the history of any tasks that have not been done. So that the brain will indirectly send the letter that the task that has been recorded must be completed on that day.

In addition, this application can determine the priority of tasks, determine the date to when the task will be completed, add sub-tasks and many other features. I am already familiar with this, and help me discipline working on several projects on time.


![alt text](https://lh3.googleusercontent.com/bU2rNtWYOGkpYPF7gpyOqVOI7HTdS58ZgLymqNSKRV-cero2NdK268qVAtDzAhvyoFbkIDbf1A=w640-h400-e365)


countinued soon :)
Introduction to Hoisting in JavaScript.
Tags: javascript, beginners, tutorial
Published: 2019-03-17 09:10:56

JavaScript is full of Strange Features, Every day I discover something new that change my understanding of the whole language. This is why I love JS.


But sometimes understanding these strange concepts are quite frustrating and you may feel lost, don't worry it happens with all of us and whenever you get familiar with these concepts it becomes 'aha...!' movement for you.


Now Without wasting time, let's get into it.


Consider this snippet of code.
```javascript
a = 2;

var a;

console.log(a);
```

What do you think? What will be the output of the above code?
If you think the output will be *undefined*, No problem when I first saw this code I also thought undefined but the output will be **2**. Feels weird, Heres the explanation.

Hoisting occurs because JavaScript engine will compile the code before its interpretation. The compiler actually considers **var a = 2;** as two different statements **var a;** and **a = 2;**. So the part of the compiler finds all the declaration first and then associate their assignment with their appropriate scopes.

Note:- Hoisting does not work with **strict mode**.


This was just an introduction part of Hoisting there are lots of scenarios where it can work differently.

I hope you just got a rough idea about it. Thanks for reading and stay tuned for more.
Need advice on a cheap/light Linux laptop for Kubernetes
Tags: help, kubernetes, linux
Published: 2019-03-17 08:43:06

---
title: Need advice on a cheap/light Linux laptop for Kubernetes
published: true
description: 
tags: help,kubernetes,linux
---

Hi, it’s my first post here on Dev.to community.

I ask you guidance on this topic: *i need a cheap/light replacement for a company 15’’ MacBook Pro*. It will be used primarily for coding and learning with cloud-native technologies like Kubernetes, Prometheus, etc. etc. 

I’d like it to have the following features:

* Light machine (13/14 inches)
* Good quad-core processor
* At least 8gb of RAM, with the possibility to upgrade to 16
* A “cheap” machine...i don’t want to carry the MacBook Pro with me when travelling abroad (i.e. conferences, meetings)

Thank you all very much
Quick & easy documentation generation for Vue.js components
Tags: vue, documentation, tutorial, javascript
Published: 2019-03-17 08:16:28

---
title: Quick & easy documentation generation for Vue.js components
published: true
description: How to generate documentation directly from the code of your Vue components with vuese
tags: #vue #documentation #tutorial #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/u3hjnjwqm2l7is758rfb.png
---

Did you ever lose oversight over the components of your Vue application? 

![](https://media.giphy.com/media/l41lFw057lAJQMwg0/giphy.gif)

If that's the case, you should definitely care about documenting your components. So what is the first idea here: Fire up a page in a wiki and just write down what each component does. However this may not be the best approach, because people tend to forget updating the documentation (or just don't want to, like myself).

![](https://media.giphy.com/media/56ikf9jD4ZK6s/giphy.gif)

So why don't automatically generate a slick documentation page directly from your code? But how?

![](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)

Don't worry! vuese has your back. It can autogenerate documentation for your components and renders it as a neat & simple html page.

{% github vuese/vuese %}

You can add it to your Vue project right now, by installing it with: 

```
npm install -g @vuese/cli 
```

and then run vuese to generate the documentation

```
vuese gen
```

That's all, I swear 🙌🏻

---

Now let's take a look at how it works

Imagine we have the following component:

```
<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
// This is a description of the component
export default {
  name: 'TestComponent',
  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>
```

This results in this neat html page: 

![](https://i.imgur.com/Mb6aTyP.png)

vuese retrieves the data and annotations from slots, props, methods and events and for the component itself directly from the code. As you can see it even extracts the type and required state from the `name` prop. 

You can check out the result here: [https://berniwittmann.github.io/vuese-demo/index.html](https://berniwittmann.github.io/vuese-demo/index.html#/components/TestComponent)

I also created a small repo, where you can play around with the annotations and get a feeling of how simple it is.

{% github berniwittmann/vuese-demo %}

So have fun creating your component documentation and definitely check out [vuese.org](https://vuese.org) for more information.

Thanks for reading and I'd be glad about some feedback, since this is my first blog post ever 💪🏻

![](https://media.giphy.com/media/l2R0eYcNq9rJUsVAA/giphy.gif)
Weekly Coding Challenge - week #2 - Slider
Tags: challenge, javascript, html, css
Published: 2019-03-17 06:46:57

---
title: Weekly Coding Challenge - week #2 - Slider
published: true
description: Week #2 of the Weekly Coding Challenge program - Slider
tags: challenge, javascript, html, css
canonical_url: https://www.florin-pop.com/blog/2019/03/full-page-slider/
cover_image: https://www.florin-pop.com/static/343f9f04e63c640a7dc42776e45a4b1e/ff993/full-page-slider.png
series: Weekly Coding Challenge
---

Theme of the week: **Slider**

### Description

You can find a slider component on a lot of websites, and is used to showcase different content like: images, projects in portfolio or even testimonials from clients. It is useful because you have this content *focused* in a place that changes at a certain time (like every 5 seconds) and highlights the next item.

## Useful Resources

Check out my submission for this challenge: [Full Page Slider](https://www.florin-pop.com/blog/2019/03/full-page-slider/).

See all the submissions in this [Codepen Collection](https://codepen.io/collection/DNgYKM/).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
Weekly Coding Challenge - Week #1 - Sign in/up Form
Tags: challenge, css, html
Published: 2019-03-17 06:11:48

---
title: Weekly Coding Challenge - Week #1 - Sign in/up Form
published: true
description: Week #1 of the Weekly Coding Challenge program - Sign in/up Form
tags: challenge, css, html
canonical_url: https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/
cover_image: https://www.florin-pop.com/static/b631a2f043273a179ec3b0473cdd7eb3/ff993/double-slider-sign-in-up-form.png
series: Weekly Coding Challenge
---

Theme of the week: **Sign in/up form**

### Description

Most of the websites that require authentication will have some sort of sign in (login) and sign up (register) forms where you usually have to insert your email/username and password to be able to create a new account or to log in your existing account.

With that in mind, as a developer it's useful to know how to create such a component. Feel free to get your inspiration from the hundreds of thousand of examples out there.

It doesn't have to be complex with a ton of animations (although it would be nice). Just focus on the *form* part. You can even just build one form (the sign in or the sign up).

BUT, if you feel adventurous, you can go even further and add a full authentication system on top of it (back-end, database and all that fun stuff)! The sky is the limit! :rocket:


## Useful Resources

Check out my submission for this challenge: [Double Slider Sign in/up Form](https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/).


See all the submissions in this [Codepen Collection](https://codepen.io/collection/nGZQeK).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
coding and connection
Tags: coding, life
Published: 2019-03-17 04:22:07

---
title: "coding and connection"
description: "coding and connection"
published: true
categories: "coding, life"
tags: "coding, life"

---

I started coding in the late months of 2009. I remember my first program was in C and it was a simple "Hello World!". Never have I thought that it is going to change my life since.

Years went by and I am still coding, making softwares and applications to connect people. It goes from as simple as posting an image through a mobile phone for everyone to hit that "like" button to the urgency of "I need help." Software development allowed me to connect different people and I have been working and learning progressively to maintain those connections.

My software development world may be complicated for some but it is entirely similar to others. Take the word "connection" - it seems cool for a developer while others look at it on our own world as geeky/nerdy. It is really simple when we put it in the same world as others. Person A may or may not "connect" with Person B. But once connection is made, both parties work hard, along with some external help, to maintain that connection.

Pretty much what I do on a day-to-day basis. Creating a connection is hard and complex. But once you have that connection, find the means to maintain it.
How to send a message to a slack webhook using an Azure DevOps pipeline task
Tags: azure, devops, slack
Published: 2019-11-17 04:53:06

---
title: How to send a message to a slack webhook using an Azure DevOps pipeline task
published: true
date: 17/03/2019
tags: #azure #devops #slack 
canonical_url: https://darraghoriordan.com/2019/11/03/sending-slack-webhook-powershell-azure-devops-pipeline/
---

I wanted to send a slack message when a deployment completed on Azure. It’s fairly straightforward but there are a couple of things I had to pull together from documentation on slack, PowerShell and azure.

Here is the script I finished with.

<!-- end excerpt -->

Just scroll to the bottom to skip ahead and see the entire script.

You will have to create a webhook url on your slack organisation. I will assume you have done that.

## PowerShell task in Azure

You need to select the PowerShell function task in Azure pipelines and change the type to “inline”. You could also ship the script with your code as a ps1 file and just reference it in here. That’s probably a better solution once you have tested inline that it all works for you.

## Script outline

In the script I create a function and then immediately call it. The function takes the message text and the web hook url.

I send three parameters to slack.

1. You should change the `username` to whatever you like. “My Deploy bot” or something similar.
2. The text is passed in later and will be replaced.
3. The emoji appears next to the message. Rolled up newspaper is pretty safe! :)

## The text parameter

To reference a user in slack through the webhook you don’t use “@channel” you must use ”<!channel>”

In this example I add a manually created link to the build. You will have to change the url to your own organisation and project for those to work.

`<$($env:RELEASE_RELEASEWEBURL)|$($env:RELEASE_RELEASENAME)>` is another useful link to post on slack to take users directly to the relevant release.

In PowerShell you use the format `$($env:BUILD_BUILDID)` to access the predefined build variables. Notice that different to yaml, we get them through the $env and the ’.’ are replaced with ’\_’ for PowerShell.

```
 function Send-SlackMessage {
    param (
        [Parameter(Mandatory=$true, Position=0)]$Text,
        [Parameter(Mandatory=$true, Position=1)]$Url
    )
    $body= @"
    {
        "username": "Loading Bay",
        "text": "MESSAGE_TEXT",
        "icon_emoji":":rolled_up_newspaper:"
    }
"@

    Invoke-WebRequest -Method Post -Uri $Url -Body $body.Replace("MESSAGE_TEXT","$Text") -ContentType 'application/json'
}
Write-Host "Sending slack message for BUILD: $($env:BUILD_BUILDID)"

Send-SlackMessage "<!channel> <https://##YOURVISUALSTUDIOORG##.visualstudio.com/##YOURPROJECTURL##/_build/results?buildId=$($env:BUILD_BUILDID)|Build: $($env:BUILD_BUILDID)> is now on STAGING" "https://hooks.slack.com/services/##YOUR/##WEBHOOK/##URL"
```
Help Me Delete Your Tweets!
Tags: opensource, showdev, python, privacy
Published: 2019-03-16 20:39:30

Ok, I do apologize for the clickbaity title and to make up for it here's what this is all about in brief.

**tl;dr**, I'm looking for hackers to help me improve a Python script.

A couple of years ago I wanted to have all my tweets and likes deleted, but still keep them somewhere for private purposes, mainly for history reference and personal archive. Because I'm not really that active on Twitter, deleting my account would probably have made more sense. But hey! I still wanted to put my uninformed opinion out there from time to time.

Long story short, I hacked this small Python command line tool that consumes the Twitter API. It finds all tweets and/or likes after a specified date-time point, puts them in an ePub book and then (optionally) removes them from Twitter. Because it's just a command line thing, it's also simple to have it run in a cron job as well. So far so good, it seems to work alright, however, there're some limitations. I couldn't figure out how to save tweet images with [Tweepy](http://www.tweepy.org/) and the ePub E-book generation could use more options like front and back cover images, table of contents, layout options, etc.

So I guess this is a call for contributions. If you're looking for some open source project to contribute to and this looks fun to you, you're more than welcome to join in. I'm actually not a Python developer, but a Python hacker, so this is more like a *hack-it-for-fun-but-still-make-it-useful* thing here 

Here's the GitHub repo and thanks for reading!

{% github petarov/shut-up-bird %}
Tests versus Documentation
Tags: legacy, mindgame, discuss
Published: 2019-03-16 18:56:43

---
title: Tests versus Documentation
published: true
description: A little mind game to see what style of legacy you prefer.
tags: legacy, mindgame, discuss
---

Have you ever been in the situation that you have been thrown under the bus and needed to fix a bug in an unknown code base with a real tight deadline? Or joined a new team/project which has tons of legacy code where you do not know where to start?

Well let's create some hypothetical project in our mind and we call it __*Schroedinger's repository*__. It has the described properties that its code base is rather large and you are not familiar with it. You remember that cat from school that was either dead or alive. Well in our example we won't murder innocent cats, but this project can have two representations:

 * You have a well-documented API and lots of comment flavor that is guiding you through the code, but tests are barely existent.
 * There is a good level of test coverage, tests are well structured in unit, integration, etc. tests. The downside here is that the API is lacking proper descriptions.

In my experience, if I need to fix a bug inside a code base I prefer proper automated tests, to see if I would break something. On the other hand, when my task is to enhance an API or create another layer upon something, proper documentation is preferably in my view.

Now I am asking you out there, if you would have to get in touch with our legacy __*Schroedinger's repository*__ which state would you prefer, and what's your reasoning?

Another thing I want to point out:
We are all producing legacy code. The question is what should our legacy look like?
Question: How to allow users to add style to their input?
Tags: javascript, css, webdev, help
Published: 2019-03-16 18:23:32

---
title: Question: How to allow users to add style to their input?
published: true
description: 
tags: javascript, css, web dev, help
---

I am building a job board. I want to give users the option of adding color to their submissions. How can I do this? Do I need to use a framework or can I use vanilla JS.
Angular CLI + gulp: Versioning your application made easy!
Tags: javascript, gulpjs, angularcli, sentry
Published: 2019-03-16 17:29:31

---
title: Angular CLI + gulp: Versioning your application made easy!
published: true
description: How to build a versioning pipeline using Angular CLI and gulp.
tags: #javascript,#gulpjs,#angularcli,#Sentry
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fktz1na1u0g1d354g80x.png
---

Read here: https://medium.com/@levz0r/angular-cli-gulp-versioning-your-application-made-easy-d72a5f55b083
Mysterium Network - VPN Node Program & Survey
Tags: vpn, privacy, security, blockchain
Published: 2019-03-16 16:35:49

---
title: Mysterium Network - VPN Node Program & Survey
published: true
description: Mysterium Network - VPN Node Pilot Program / Survey
tags: VPN, privacy, security, blockchain
---

#Mysterium Network - VPN Node Pilot Program / Survey

https://mysterium.network/wp-content/uploads/2018/12/Asset-6@4x.png

**Mysterium Network** is an open source peer to peer network allowing anyone to rent their unused network traffic, while providing a secure **VPN** connection for those in need.

Please fill our node form and help provide valuable input while having the opportunity to be one of the first to start testing our new incentives program. Participants will be rewarded in ETH cryptocurrency bounties.

**survey form** https://mysteriumnetwork.typeform.com/to/Kk7csS

**website** https://mysterium.network/
Can a neural network predict your next move on a game of rock, paper and scissors?
Tags: rockpaperscissors, javascript, neuralnetwork
Published: 2019-03-16 16:05:59

---
title: Can a neural network predict your next move on a game of rock, paper and scissors?
published: true
description: Can a neural network predict your next move on a game of rock, paper and scissors?
tags: rock-paper-scissors, javascript, neuralnetwork
canonical_url: https://github.com/victorqribeiro/jokenpo
---

# JoKenPo

Can a neural network predict your next move on a game of rock, paper and scissors? That's what my last experiment is trying to answer.  
It works by storing your last moves and trying to predict your next ones.  


The experiment is in JavaScript and can be played on browser.


Play it [here](https://victorribeiro.com/jokenpo)


See the code [here](https://github.com/victorqribeiro/jokenpo)
I want to become a software engineer
Tags: help, career, beginners, programming
Published: 2019-03-16 14:55:52

---
title: I want to become a software engineer
published: true
description: 
tags: help, career, beginner, programming
---
Hi! I'm looking for someone to help me get started. I am 16 years old and I want to become a software engineer. I have a couple of ideas that require knowledge. I do not know how to organize the work, what parts to divide the projects, what and when to use. 

Despite the fact that many recommend for beginners web, I'm just not interested.

I'm just starting to develop in this direction, so it would be very cool if you could tell me how to move)

Of course, nothing happens just like that, but I'm sure someone can help me with my endeavor.