teleren/devto huggingface dataset:
My first NPM module
Tags: node, npm, javascript
Published: 2019-11-27 17:58:44

<center>#start</center>

Hi everyone! 
[GitHub of the Project](https://github.com/DaxSoft/path_route)

-----

For my first post here I have think about sharing my first NPM module. 

First of all I'm not an newbie into coding neither on JavaScript language, however I never thought to share some application that I write, that in overall helps me in production time and so on. 

But, getting so much from open source and community, I have decided that it's time for me to start sharing some application, libraries and snippets that I usually write and use on my projects.


----

<center>#vorlefan.path_route</center>


**What is it about**? The main functions is to given the power of easily manage the access to the folders and files of your project. With the ability to handle files (*example: read json file*)


**Why I have created this?** I was tired of typing '../../../../someName/file.json' everytime on my projects. Or being almost all time using 'path.resolve' to not get some errors.


----

<center>#example</center>


In my current project that I'm working at the back-end with NodeJS and at the front-end with React (NextJS). I have a folder named 'server', inside of this folder I have my structure of folders and two javascript file. '**index.js**', that executes the server and '**path_route.js**', that handles with the structure of my path routes. Take a look:

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

> The main reason that my '**path_route.js**' is at the main folder, is just to have the __dirname directed to the main folder. This make easy my life.


Now the code (I'll not show up the complete code to not make this post big)

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

With this piece of code, I can access my folders easily, example:

> To access my 'assets' folder:

``` js 
Route.Main.get('assets')

// it returns

{ 
  "name": "assets",
  "path": "__dirname/assets"
}
```

And my module.exports to make it more general for my overall application is:

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

> With this I'll only need to require this file, to access the overall structure of folders and files of my project.


``` js 
// Access the folder structure of my folder 'assets'.

const Assets = require('../../../path_route').load('Assets')
```

----

<center>#end</center>

Sure things there are a lot of room to improvement and features to add, however I'm pretty enjoyed this module of mine and to be first in both publishing and experience in using 'npm publish', I feel that it's okay xD.

It would be nice to receive some feedback and suggestions :)
From React to Web Components: using hooks (part 2)
Tags: react, webcomponents, hooks
Published: 2019-11-27 23:40:02

This is a follow up to the [evaluation of hooks usage](https://dev.to/blikblum/from-react-to-web-components-using-hooks-1ke7) with web components using [Haunted](https://github.com/matthewp/haunted) library.

## Using third party (React) hooks

The use of third party React hook libraries is possible because Haunted provides an API with same signature as React. With some bundling setup is possible to make the library load Haunted instead of React.

Webpack can be configured as below:

```js
module.exports = {
  resolve: {
    alias: {
      react: 'haunted'
    }
  }
}
```

To see if it works in practice, i converted this [demo](https://github.com/httpJunkie/react-loop-demo) which depends on [react-media-hook](https://github.com/lessmess-dev/react-media-hook). The end result is [here](https://github.com/blikblum/wc-hooks-demos/tree/master/responsive-layout).

The code related to hooks worked flawlessly without any adaptation. Most of the conversion work was due to differences between React and web components concepts. 

> This approach (package alias using bundler) will not work if the project itself uses React or if the hook library relies on JSX / Virtual DOM.

## An interoperability tale

The converted demo uses [@stencil/router](https://github.com/ionic-team/stencil-router), a web component based router with an API similar to React Router. It is built with StencilJS, a component compiler featuring JSX, virtual dom, decorators etc.

It uses also [wc-fontawesome](https://github.com/blikblum/wc-fontawesome), the web component version of [React FontAwesome](https://github.com/FortAwesome/react-fontawesome), built on top of RawElement which extends LitElement base class.

All working together. A demonstration of how web components built with different technology can work together.
 

## Conclusion

It's feasible to work with Hooks using web components and take advantage of most of third party libraries. Haunted worked glitch free in the experiences i did, proving be a valuable tool.

Whether Hooks is better than classes for web components development is a matter of debate. Sure, is ergonomic, composable etc but, personally, i will still prefer, for the time being, classes due to ability to use (upcoming) decorators syntax and better attributes support.

All in all, it does not need to be one or other. Even in same project both approaches can coexist, allowing developer to choose the technology that better suits each situation.
Managing state in Vue.js
Tags: vue
Published: 2019-11-27 23:22:43

After reading [this](https://dev.to/afontcu/vue-state-management-from-the-ground-up-1kp) post I came up with this implementation for state management.
To show it to you, I will develop a hello world app with Vue.
This is the folder structure:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7kdlfnd86qhe3la47x95.png)
These are the dependencies (what we must install):
```javascript
    "@babel/core": "^7.8.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.2",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.6.11",
    "vue-styled-components": "^1.4.14",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
```
This is our `.babelrc` configuration file:
```javascript
{
    "presets": ["@vue/babel-preset-jsx"]
  }
```
And this is the `webpack.config.js` configuration file:
```javascript
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    entry:'./src/main.js',
    plugins:[
        new HtmlWebpackPlugin({
            template:'src/index.html'
        })
    ],
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader"
      }
    ]
}
}
```
This is our `index.html` under `src` folder:
```javacript
<!DOCTYPE html>
<html>
    <head>
        <title>happiness</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>
```
And this the `main.js` file:
```javascript
import App from './components/app'

new App({
    el:'#app'
})
```
This is the `app.js` file in `src/components` folder:
```javascript
import Vue from 'vue'
import s from 'vue-styled-components'
import Happiness from '../state/happiness'

export default Vue.extend({
    name:'myApp',
    data(){
        return{
            myHappiness:new Happiness()
        }
    },
    render(){
        const Div=s.div`
        font-family:sans-serif;
        `
        const myHappiness=this.myHappiness
        myHappiness.commit({type:'init'})
        return(
            <Div>I am {myHappiness.state.value}</Div>
        )
    }
})
```
This is the `withState.js` file in `src/state` folder:
```javascript
import Vue from 'vue'

export default mutations=>
Vue.extend({
    data(){
        return{
            state:null
        }
    },
   methods:{
       commit(data){
           mutations[data.type](data,this)
       }
   } 
})
```
And this is the `happiness.js` file in `src/state` folder:
```javascript
import withState from './withState'

export default withState({
    init(data,this_){
        if(this_.state===null){
            this_.state={
                value:'😄'
            }
        }
    },
    setState(data,this_){
        this_.state={
            ...this_.state,
            ...data.val
        }
    }
})
```
And this is the final result:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ecz7b3s177ptgdkdt498.png)
🚀  Performance measuring of a webpage with JavaScript in Node.js using puppeteer
Tags: javascript, webdev, performance, puppeteer
Published: 2019-11-27 22:53:26

In the last part of my puppeteer series, we learned how to execute JavaScript in a page context. We'll now use this knowledge to actually do something useful: we'll measure the load time of the loaded webpage. In our case, that's the load time of dev.to.

We'll focus on just the load time. But `performance.timing` has many more properties. Just try to log them on your console to learn more.

Here's the complete code to measure the load time of a webpage using puppeteer. This could, for example, be used for continuous measuring of load times, or be added as a pre-push hook.

```js
// npm i puppeteer
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // let's navigate to the dev.to homepage
  await page.goto('https://dev.to');

  // evaluate will run the function in the page context
  const perf = await page.evaluate(_ => {
    // let's get the latency-related performance information
    const { loadEventEnd, navigationStart } = performance.timing;
    
    // calculate the load time in milliseconds
    return { loadTime: loadEventEnd - navigationStart };
  });

  // and log the load time of the webpage
  console.log(perf.loadTime);

  // we're done; close the browser
  await browser.close();
})();
```

Please consider following me, if you're interested in measuring the performance of webpages. I'll post more about that topic in this and other series.

Thanks for reading!
You don't need a side project, just practice.
Tags: productivity, career, opinion, motivation
Published: 2019-11-27 22:46:58

---
title: You don't need a side project, just practice.
published: true
description: Finding ways to code outside work without committing to a project.
tags: productivity, career, opinion, motivation
---

There are a lot of opinions out there regarding coding outside of work and whether it's required for success or not. Personally, I think it's very much up to the individual. I code outside work because I love to code. Still though, after a long day of work sometimes the last thing I want to do is dive into ANOTHER project. 

Side projects can be great. They are a great way to learn, to build your skills and to build your portfolio. They can also be overwhelming and time consuming. Sometimes you just have 30 minutes and you want to do something fun and quick. 

Some people choose an open source project to contribute to rather than coming up with their own project. I think open source is amazing but it's also a huge commitment. To learn someone else's code base and get up to speed enough to contribute, that takes time. Which is awesome, if you want to spend time investing in it but I just have never found the time or motivation myself. After coding all day in my day job, I just want to do something fun, something quick but challenging that I can complete in one sitting or dip in and out of without pressure. 

An alternative I've found is code katas. Code kata's are set problems you can solve using a language of your choice. There are a plethora of katas out there, all varying in difficulty and area of focus. Some focus on algorithms, some on fundamentals and logic. There's something for every mood. [Code Wars](https://www.codewars.com/dashboard) is a great resource for katas. Another resource I use is [reddit daily challenge](https://www.reddit.com/r/dailyprogrammer/). They provide challenges of different levels easy, medium or hard. You can also see the solutions in the comments and improve by reading other peoples code. Another way I like to practice is to just pick a cool feature on a website and try to implement it myself. Usually setting a time limit to challenge myself. 

All of these little efforts will compound together to help hone and build your skills. You don't necessarily have to have an epic side project or be an open source savant. 

The most important thing is to keep learning and keep coding. ✌️
An interesting tool/technology I encountered in preparation for Bootcamp
Published: 2019-11-27 21:54:57

Andela Bootcamp is a two-week intensive onsite product building. One interesting fact is that it's not just writing code and seeing them running. It's about writing code that meets standards together with project management skills.

When preparing for the Bootcamp, I was exposed to some tools/technologies that I had never used before, and the most interesting one that caught my attention was a software project management tool called Pivotal Tracker. It helped me prioritize what to do and gave me a clear view of my work.

Another technology that I encountered was Git and Git workflow. I can say I had used GitHub before, but I had never used branches or knew their purpose because most of the time I worked alone. I always heard many developers talking about PR (pull request), but due to a lack of team experience, I could not understand what it meant, and now it's a part of what I'm doing for my project.

Now it's day 3 of the Bootcamp, and I'm progressing day by day. My whole idea about writing software until its delivery has changed; now I know there is more to it than just writing code.

I will continue using these tools and integrating them into my personal projects and encourage other aspiring developers to use them.
An interesting tool/technology I encountered in preparation for Boot camp 
Published: 2019-11-27 21:24:42


Never tell yourself that you know something and stop improving your skills on that thing. You may wonder ‘why am I saying this?’.  the answer is simple. Technology changes day by day. Ask a friend you trust most in technology: how many computer programming languages he/she can code in, and how long did they take to learn them? The answer might be many programming languages, but the time can sure be ‘I started with one and kept learning’ because that is how technology is. Depending on what you are going to do, you learn new and interesting tools to help you achieve the end of your journey. In today’s blog, I would like to talk about interesting technology I encountered in preparation for Andela boot camp cycle 13.

The journey started a couple of months ago when I started thinking that Andela can help me in achieving one of my career goals of becoming a software developer. I can’t lie that I knew which tools to start learning before joining. I only knew html, css, and JavaScript. Yet they are not enough to even secure an interview. In the course of application, they shared home study curriculum and requested if we can start learning before doing the first test challenge. From that time, I knew they require other tools than what I mentioned early (html, css and JavaScript if you do not remember).  To cut story short, after passing the interview, they sent invitation to the boot camp and sent tools to download. From that moment, I encountered an interesting tool which is node js.

Node js is a platform built on google chrome’s JavaScript run time for easily building fast and scalable network applications. Node is an open source cross-platform runtime environment for developing server-side and networking applications. It can run on mac so, windows so and Linux. [1]
That is the beauty of my interesting tool. Before working on the required project, I never understood how this node js works and I was not even sure if I will be able to learn and use it. This tool got my attention especially when I am learning new features of it. The more I explore node js the more I see what it is capable of doing and how I can use it. Node js with help of some libraries and dependencies and helps me to create API for a certain feature.

Even though I am still a beginner in using and learning node js, I am sure that I have gained enough skills to know where I can start from if I want to advance in node js. I hope that I will keep learn more of what it can do and most necessarily do as many practices as possible in order to be good at it or even expert who know?!
Programing 101
Tags: python, beginners
Published: 2019-11-27 21:00:13

Today we are going to learn some basic concepts to help you understand how Python works and how can you use it to complete some tasks.
The key terms we are going to discuss are:
•	Loop for
•	Files
•	Numpy
•	Math
These libraries will help us to develop a small program that can calculate the standard deviation for a set of 100 numbers. With this you will be able to create your own programs to solve some mathematical problems.
First of all, we have to import all the libraries that we will use:
Import numpy as np
Import math as mt

Now there is always a problem when we open a file in Python we have to close them but sometimes we don’t remember this that´s why I´ll show you a trick that will help you with this. Instead of writing.
```python
data = open(“FileName.txt”,”a”)
```
We can use the function “With” and we put the following line:

```python
With open(“FileName.txt”,”a”)  as data:
	#we have to put the all the code with an indentation.
```
As we all know the formula for the Standard Deviation is the one in the picture, we have to calculate the mean of our set and then get the residue of a particular value and the mean but, if you have a file with 100 numbers how are you going to do this for each one of them?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kt52fwp4z3nbdmk2dut4.png)
 
https://www.thoughtco.com/calculate-a-sample-standard-deviation-3126345

Here is the code that we are going to use for this example you can check it in GitHub also the file that I use.
https://github.com/bseker61/python

As we see in the code, we open the file using the “With” function.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6lsy07v98vid3zfqzcvq.png)

Now we create a list call “ldata”, in this list we will store all the information we´ll take from the file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8tkdc0pk7127ae7m52t8.png)

We will use the loop for to repeat the same process of adding one element of the file into the list. After that we will use Numpy to transform the list into an array so we can use a function to get the mean of the set.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8880v25jwb5d1992752i.png)

Now we will get the mean using the function “.mean”, next we will use another loop for to get the residue of a particular value and the mean and we´ll store it in another list call “qt”, now we will use the function “sum()” in which the argument of the function is a list. This will help us with a part of the equation for the standard deviation. At last we will use the library math to use the square root of a number and the function “len()” to get the total amount numbers in the list. Finally we print the result with the function “print()”.
What, you may ask, is a Treap?
Tags: computerscience
Published: 2019-11-27 20:54:06

Computer scientists have funny names for things.  
A treap is a tree and a heap. Specifically a binary search tree and a binary heap.  Tree, heap. Tree-heap. Treeeap. Treap.  
Get it?  
(Sorry if that was too obvious, I was having fun).  
I might follow up with a post on what these terms actually mean, but for now I'm just writing to point out that I like the name.
Here is my favourite music to code to, what's yours?
Tags: watercooler, discuss, music, webdev
Published: 2019-11-27 20:25:55

When I'm working for a period of a few hours consistently I'll go to Spotify and type in:

["Tom Doolie"](https://open.spotify.com/artist/4C7NcNb9V6lakzMGHQlm8i)

Then I'll just start at the first song of his most recent album and let it play through his whole Discography pretty much.

It's perfect for dev work, for me.

It's quite chilled hip hop beats, good variation in sound and style, and experimental in parts. 

It's a good balance between being unobtrusive whilst still being interesting, and not just elevator music. It also has some subtle vocals mixed in there, which is a good change up when they come in.

I guess it would be classed as 'Chill Hop'. But it's just good hip hop instrumental beats, essentially. 

Would highly recommend it if you've not listened to him before, and it's your sort of thing.


What music do you listen to whilst coding?

Any recommendations in a similar vein to Tom Doolie would be great to hear.
The Web Almanac, Updated Front-End Developer Roadmap, and V8 7.9 preview | Front End News #27
Tags: news, frontendnews
Published: 2019-11-27 20:24:20

Hello everyone and welcome to another round of Front-End News. I hope you will enjoy the subjects I've selected for you in this edition.

***

## The 2019 Web Almanac

They say data is the new black gold. Or just the new gold. And the 2019 edition of the Web Almanach is a veritable bonanza. This report is built by the HTTP Archive and it's compiled from over 20TB of data gathered from over 5.8 million websites.

![](https://thepracticaldev.s3.amazonaws.com/i/7okttek3w2r9pjc9e25f.png)

The almanac covers all aspects of a website: page content, user experience, content publishing, and distribution as well as details on the methodology used to gather, analyze and compile the data. The organizers hope to make this a yearly event. There's definitely enough here though to keep us all occupied reading until that happens.

- https://almanac.httparchive.org/en/2019/

***

## The updated 2019 Frontend Developer Roadmap

So you decided that being a front-end developer is the next best thing after sliced bread, but can't decide where to start or what to learn next? The Frontend Developer Roadmap is just what you need. This is the result of a community effort that helps new and seasoned developers navigate through the increasingly complex landscape of the industry.

![](https://thepracticaldev.s3.amazonaws.com/i/8s6me5ycui2fy5ynb3gt.png)

- https://roadmap.sh/frontend/latest

***

## V8 release v7.9

It's that time again when the team building the V8 JavaScript engine launch a new branch. Version 7.9 will be released in coordination with Chrome 79 and it includes a bunch of under-the-hood performance tweaks (that give you a 4% better Speedometer AngularJS score). More details are available in the release post linked below.

- https://v8.dev/blog/v8-release-79

***

## Software updates and releases

Here are the updates and releases for this edition. In each case, you can find the full details in the release notes linked down below.

### Node v13.2.0

- https://nodejs.org/en/blog/release/v13.2.0/

### Prettier v1.19

- https://prettier.io/blog/2019/11/09/1.19.0.html

### dataloader v2.0.0

- https://github.com/graphql/dataloader/releases/tag/v2.0.0

### ESLint v6.7.0

- https://eslint.org/blog/2019/11/eslint-v6.7.0-released

***

That’s all there is in this edition. Follow Front End Nexus on Twitter at https://twitter.com/frontendnexus to be notified as soon as a new update happens. I also want to encourage you to subscribe to the YouTube channel at https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww. I can unlock some more options once the channel hits 100 subscribers, so your support is highly appreciated.

Have a great and productive week and I will see you next time!