teleren/devto huggingface dataset:
How to prepare the vacation for a web developer
Tags: webdev, holiday, vacation
Published: 2019-07-25 11:25:07

---
title: How to prepare the vacation for a web developer
published: true
tags: Web Development,holiday,vacation
canonical_url: https://kevinhq.com/how-to-prepare-the-vacation-for-a-web-developer/
cover_image: https://i1.wp.com/kevinhq.com/wp-content/uploads/2019/07/How-to-prepare-the-vacation-for-a-web-developer.png?resize=930%2C512&ssl=1
---

It’s still summer and most people are having breaks for summer vacation. As a web developer, I am no exception. Even though I work remotely but I do some preparations before the departure day. Send notification early That’s what I’ve done first. Usually, I notify them at least three months or even four months earlier.… 

[Read More »How to prepare the vacation for a web developer](https://kevinhq.com/how-to-prepare-the-vacation-for-a-web-developer/)
How do I test protected websocket channels with tools like postman?
Tags: websocket, jwt, node, adonisjs
Published: 2019-07-25 10:34:22

I have been working on real time messaging using websocket, I have some channels protected but i cannot access them it keeps returning invalid jwt token, How do I pass in the token while using tools like 
- smart websocket client
- advanced rest client
- simple web socket client

I am using adonisJs on the backend.
My insights on 'Measure What Matters'
Tags: books, startup, productivity
Published: 2019-07-25 09:56:21

In this article I want to share some key insights I had when reading "Measure What Matters: How Google, Bono, and the Gates Foundation Rock the World with OKRs" by John Doerr. 

This is not supposed to be a complete summary of the book, it's just the book experience from my point of view. If you don't know what OKRs are, I recommend you to watch this [TED Talk](https://www.ted.com/talks/john_doerr_why_the_secret_to_success_is_setting_the_right_goals/transcript).

# Inspirational objectives
An inspiring objective pushes the team engagement forward, so for example, it shouldn't be simply a business focused goal, but how this goal will impact users.

# Alignment and prioritization
The objective described in OKRs should be clear and direct. This creates a great alignment and avoids useless discussions and meetings, and the work result has more impact because every person on team is on the same prioritization.

# Flexible
OKRs can be changed or removed if they are not working or lost business relevance. So if you have quarterly OKRs you don't have to wait until the next quarter to review your OKRs. 

# Work quality OKRs
The key results usually focus on what's most strategic to the business, but this can lead to poor work quality. To balance this, the author suggests to add KRs that reflects directly on quality. For example, in a software development company, the business KR could be achieve a certain quantity of active users while the quality KR could be a maximum quantity of bugs.

# Public and transparent
All OKRs and its progress should be easily accessible to everyone in the company. The result is more accountability as stated in "The 4 disciplines of execution" book: "People and teams play differently when they are keeping score, and the right kind of scoreboards motivate the players to win.".

The book suggests the usage of online tools to keep track of all company OKRs, like [Better Works](https://www.betterworks.com/).

# Conclusion
OKRs has simple rules but small implementation details. It's a powerful tool when used effectively.
Elm's compiler hints
Tags: elm, beginners
Published: 2019-07-25 10:22:26

---
title: Elm's compiler hints
published: true
description: 
tags: elm, beginner
---

When you run `elm init` it gives you a link that you can go to and read all about `elm init` to your heart's desire. :heart_eyes:

Previously, it used to be a web page. A seemingly lonely web page not linked to anything. I'd usually wonder, "Where could I get more information like this?" :thinking:

Occasionally, I'd do something heretical in Elm like variable shadowing and I'd be pointed to another one of those lonely web pages to get a lengthy talk from father Evan. :grimacing: And again I'd wonder "How can I do more bad things like that and get more information like this?" :smiling_imp:

Then yesterday happened.

I was reading [An Introduction to Functional Programming Through Lambda Calculus](https://www.amazon.com/Introduction-Functional-Programming-Calculus-Mathematics/dp/0486478831) and I decided to try to write the self-application function in Elm and boom:

```sh
---- Elm 0.19.0 ----------------------------------------------------------------
Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
--------------------------------------------------------------------------------
> selfApply = \s -> s s
-- INFINITE TYPE ----------------------------------------------------------- elm

I am inferring a weird self-referential type for s:

3| selfApply = \s -> s s
                ^
Here is my best effort at writing down the type. You will see ∞ for parts of the
type that repeat something already printed out infinitely.

    ∞ -> a

Staring at this type is usually not so helpful, so I recommend reading the hints
at <https://elm-lang.org/0.19.0/infinite-type> to get unstuck!
```

When I navigated to the link, https://elm-lang.org/0.19.0/infinite-type, this time it redirected to a Markdown file. After reading it I went one directory up.

I had discovered the hidden jewels. :sob:

![Yes](https://media.giphy.com/media/10cuF5z6VYzqW4/giphy.gif)

See for yourself, [hints](https://github.com/elm/compiler/tree/9d97114702bf6846cab622a2203f60c2d4ebedf2/hints).

**Disclaimer:** *I know that Evan's intention is that you'd discover these hints as needed when you actually get into problems and at the point you're ready to digest the information. So please keep in mind that you don't need to read this stuff all at once to be productive in Elm.*

Mentioned in this post:

- https://elm-lang.org/0.19.0/init
- https://elm-lang.org/0.19.0/shadowing
- https://elm-lang.org/0.19.0/infinite-type
Random strings generator
Tags: javascript
Published: 2019-07-25 09:21:46

---
title: Random strings generator
published: true
description: though not cryptographically random
tags: javascript
---

I was converting a ECMAScript 3 function to ES6's "fat-arrow" format. It certainly abbreviates.
```javascript
function randomString(c) {
  for (var a = [], b = 0; b < c; b++) {
    a.push(Math.floor(36 * Math.random()).toString(36));
  }
  return a.join("");
}
```
was how it was originally defined. Now it looks like this:
```javascript
const randomString = c => Array(c).fill(0).map(function (itm, idx) {
    return Math.floor(36 * Math.random()).toString(36);
  }).join("");
```
The ES3 form is slightly faster than the ES6 version but but only by about 40 nanoseconds. The `fill` and `map` probably have overheads that the `for` doesn't.

(a few minutes later)

Have made the ES6 version a bit more terse:
```javascript
const ES6randomString = c => Array(c)
  .fill(0)
  .map(() => Math.floor(36 * Math.random()).toString(36))
  .join("");
```
But sadly the ES3 version is still faster. Any suggestions?
How to display JSON data in React UI dynamically , not just plain data but with data having links in between the text too
Tags: react, reactnative, npm
Published: 2019-07-25 09:19:58

{
"test1" : {
            "question": "test 1 ",
            "answer" : "test answer",
             "question": "test 2",
            "answer":" test answer 2 #Google link, answer something and all" 
}

So How can we render the answer text having links like this  [Google Link](https://www.google.com/) in middle of text. As the answer node in the JSON will be normal text, how to make it dynamically render the data along with links
When pointers bite you in Javascript.
Tags: webdev, javascript
Published: 2019-07-24 17:46:03

That will be short and quick. If you already have background in **any** lower level language, then there will be nothing new. Still, I would love to hear your opinion. 
If you still think that pointer in programming is:

a) white arrow on your screen
b) weird black magic

Don't worry. With webdev we always thing, we can get away from machine into perfect (almost, *crying in CSS hacks intensifies*) world of web-browser. 

Sometimes those abstraction leak, or to say it better, show weird things happening behind a curtain. Frankly, those things are not weird at all. 
It is just how machine is build, and memory works. 

Ok, first things first. What is a pointer? 

> Pointer can be understood as indirection. Address of different object/variable/function etc. 
> Address itself do not store data*, but with address we can access original value.


Why should I care about it?


Let me start with simple example.

```javascript
let arr = [1, 2, 3, 4, 5];
let o = { something: arr }

o['something'][0] = 4;

console.log("%o", o);
console.log("%o", arr);
```

What just happened?
Why assignment work this weird? Or rather, still who cares. It works that way, doh.

Well, because it is pretty important every time you work with complex data structure and I am not talking about some complex tree. I am talking about `Date`, `Array`, `Object`. Anything that is not primitive type. 

Why primitives just works? Because, they are cheap to copy. Object are not, and you have to force JS, to make copy for you, because it moves around references aka. alias to your stuff. 

Just like pointers they are not value themselves, but rather `something`, pointing to your original variable. JS doesn't show them in syntax, and they are always on. They can be pretty useful if your code looks like that:

```javascript
class A {
   constructor(config) {
    this.options = config.a;
   }
}

class B {
   constructor(config) {
    this.options = config.b;
  }
}

var config = { a : { 'name' : 'X' }, 'b' : { 'name' : 'Y' } }
```

Change your `config` and it will change also `new A(config).options`.

Reference is just an alias. With one key difference really. You cannot assign to those references new values. 

Wait, what?

```javascript
let arr = [1,2,3,4];
function a(arr /* reference to Array object */) {
    arr = "hello"; /// it becomes local variable arr. Original is not changed 
}
function b(arr /* reference to Array object */) {
    arr[1] = "hello"; /// it changes inner element
}

console.log(arr);
```

Guess, what will be inside arr after executing `a(arr)` and `b(arr)`.

Remember in JS by default you pass aliases or references and not copies. Only primitives like Booleans, Numbers and Strings are copied.

Alias isn't different from pointer under the hood. Safer, less functional, easier to use -- yes. Still it is just a alias into other value -- pointer.



See ya!
A happy Struggle with React-Native-Web
Tags: reactnative, react, javascript, typescript
Published: 2019-07-25 08:16:23

React-native-web is one of the most amazing ideas for UI developers, it makes a longtime dream in a reality: the ability to create an application that runs on both phones and browsers with just one codebase.

React-native-web helps us to write the same React code for both React and React Native.

It makes life much easier, and although it has it’s limitations and signs, it’s a great approach for building multi-platform apps.

Read more about this article:- https://codersera.com/blog/a-happy-struggle-with-react-native-web/

Thanks for reading this
Web Development Tools & Resources
Tags: webdev, html, css
Published: 2019-07-25 07:35:32

I used the following tools and resources frequently.

<h2>HTML & CSS Checker</h2>
<ul>
<li><a href="https://validator.w3.org/" target="_blank">Markup Validation Service</a></li>
<li><a href="https://validator.w3.org/checklink" target="_blank">Link Checker</a></li>
<li><a href="https://uncss-online.com/" target="_blank">UnCSS Online!
</a></li>
</ul>

<h2>Performance Checker</h2>
<ul>
<li><a href="https://gtmetrix.com/" target="_blank">GTmetrix</a></li>
<li><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Pingdom</a></li>
<li><a href="https://www.pingdom.com/" target="_blank">PageSpeed Insights
</a></li>
</ul>

<h2>Google Chrome Extension</h2>
<ul>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/" target="_blank">Chrome DevTools</a></li>
<li><a href="https://developers.google.com/web/tools/lighthouse/" target="_blank">Google Lighthouse</a></li>
<li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en" target="_blank">WhatFont</a></li>
<li><a href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en" target="_blank">ColorZilla</a></li>
<li><a href="https://chrome.google.com/webstore/detail/wordpress-theme-detector/bjccepbfbikbpbgillfgicihhmpmjbjd?hl=en" target="_blank">WordPress Theme Detector and Plugin Detector</a></li>
</ul>

<h2>Code Editor</h2>
<ul>
<li><a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></li>
<li><a href="http://brackets.io/" target="_blank">Brackets</a></li>
<li><a href="http://www.webpagetest.org/" target="_blank">WebPageTest</a></li>
</ul>

<h3>Extension</h3>
<ul>
<li><a href="https://emmet.io/" target="_blank">Emmet</a></li>
</ul>

<h2>Image & Video Optimization Tools</h2>
<ul>
<li><a href="https://tinypng.com/" target="_blank">TinyPNG</a></li>
<li><a href="https://handbrake.fr/" target="_blank">HandBrake</a></li>
</ul>

If you have any useful tools and resources that currently not on the list, please write it on the comment box and we will keep this checklist updated.
How to write an article?
Tags: article, writing
Published: 2019-07-25 07:32:57

---
title: How to write an article?
published: true
description: 
tags: article, writing
---

I am trying to write an article, but I am not sure how to start writing about it.
Where to start, what to consider and what to focus on when writing it?
Also, any suggestions to read would be good.

I already searched in google but I want your opinion also.

Thanks :)
If Else statement
Tags: javascript, beginners, mindmap
Published: 2019-07-25 07:21:04

---
title: If Else statement
published: true
description: If Else statement 
tags: #javascript, #beginner, #mindmap
---

## Javascript If / Else statement Mind map 🤘 havve a nice day 🤗.

***



https://thepracticaldev.s3.amazonaws.com/i/mhscvolbzpt78mgk2en4.png
Data Science Course in Chennai

Tags: datasciencecoursesinchennai, tutorial, career
Published: 2019-07-25 07:11:54

There is an immense rise in the scope of data science and resultantly it has paved way for Data Science Course in Chennai. Though there are several data science institutes that offer Data Science Training in Chennai, SLA shines in the crowd because of its unbeatable quality of training.

SLA provides the best data science course with proficient faculties who have experience of several years. Practical training is our unswerving focus and this helps to mold the skills of the candidates in a better manner. Big data, which is the application of data science, is also concentrated in our course and it will have impact on the students.
React hooks vs Meteor reactive var
Tags: react, hooks, meteor, frontend
Published: 2019-07-25 06:48:49

---
title: React hooks vs Meteor reactive var
published: true
description: A show case of react hooks compared to meteor reactive vars
tags: react, hooks, meteor, frontend
---

I have been working heavily with MeteorJS, so Reactive-var has become almost a second-nature to me and I assume you have a good understanding of how templating and Reactive vars run in Meteor. Meanwhile, I have been working with React more often lately. Now, it's been roughly 5 months since React `Hooks` has been out at the time of writing this. I was reading the Hooks docs then watched a [video](https://www.youtube.com/watch?v=G-aO5hzo1aw) by [MPJ](https://twitter.com/mpjme) with [Dan](https://twitter.com/dan_abramov) who works at React. I recommend the video (it's 30 min. long if you watch in 2x speed 😉)

So let's jump to code to see how different/similar React `Hooks` work compared to Meteor's `Reactive-var`.

Meteor version of a simple Reactive var create/get/set.
```javascript
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './my_cool_text_field.html';

const template = Template.my_cool_text_field;

template.onCreated(() => {
  const instance = Template.instance();
  // Suppose we have a text input field called "title"
  instance.titleVar = new ReactiveVar('');
});

template.helpers({
  getTitle() {
    return Template.instance().titleVar.get();
  }
});

template.events({
  'click .change-title': () => Template.instance().titleVar.set(newTitle)
});
```

React version of the same Meteor processes
```javascript
import React, { useState } from 'react';

export default MyCoolTextField = () => {
  // `useState()` returns the variable and a setter function for the variable
  // We set the default value of `title` as a parameter to `useState()`
  const [title, setTitle] = useState('');

  const handleChange = event => setTitle(event.target.value);

  return (
    <div>
      <input
        className="change-title"
        name="title"
        type="text"
        value={title}
        onChange={handleChange}
      />
    </div>
  );
};
```

Also note the I haven't put the template HTML for the Meteor snippet.
Simple, Light-weight and Flexible Vue.js component for grid layout
Tags: vue
Published: 2019-07-25 06:30:03

---
title: Simple, Light-weight and Flexible Vue.js component for grid layout
published: true
description: 
tags: vuejs
---

Just published [1000ch/vue-grd](https://github.com/1000ch/vue-grd), Vue.js component which provides flexible grid layout system with simple usage.

## How to use?

You can install via `npm`.

```sh
npm install --save vue-grd
```

After importing and registering as component, you can use `<vue-grid>` and `<vue-cell>`.

```html
<template>
  <vue-grid align="stretch" justify="start">
    <vue-cell width="fill">fill</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
  </vue-grid>
</template>

<script>
import { VueGrid, VueCell } from 'vue-grd';

export default {
  components: {
    VueGrid,
    VueCell
  }
};
</script>
```

You can also register them as global component.

```js
import Vue from 'vue';
import VueGrd from 'vue-grd';

Vue.use(VueGrd);
// or
Vue.component('vue-grid', VueGrd.VueGrid);
Vue.component('vue-cell', VueGrd.VueCell);
```

If you don't use `npm`, you can load via jsDelivr.

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-grd@1.1.0/dist/vue-grd.js"></script>
<script>Vue.use(VueGrd);</script>
```

## Configure

They have some properties to align and justify set width.

### `<vue-grid align>`

- top: Pull items to top
- middle: Pull items to middle
- bottom: Pull items to bottom
- stretch: Stretch items
- baseline: Pull items to baseline

### `<vue-grid justify>`

- start: Layout items to start
- center: Layout items to center
- end: Layout items to end
- between: Add spaces between items
- around: Add spaces around items

### `<vue-cell width>`

- fill: Set item width to left
- 1of12: Set item width to 8.3%
- 2of12: Set item width to 16.7%
- 3of12: Set item width to 25%
- 4of12: Set item width to 33%
- 5of12: Set item width to 41.7%
- 6of12: Set item width to 50%
- 7of12: Set item width to 58.3%
- 8of12: Set item width to 66.7%
- 9of12: Set item width to 75%
- 10of12: Set item width to 83.3%
- 11of12: Set item width to 91.7%
- 12of12: Set item width to 100%

## Live Demo

You can try it from [here](https://1000ch.github.io/vue-grd/).
what StaticGen and Headless CMS do you prefer?
Tags: beginners, webdev, discuss
Published: 2019-07-25 06:14:38

StaticGen is getting popular these days. You can find the list of static Gen [here](https://www.staticgen.com). Headless CMS is where you manage your content. You can use different Headless CMS out [there](https://headlesscms.org). Few options are Netlify CMS, Wordpress CMS as Headless, or ContentFul.

- Netlify CMS store data to post and Pages in the **repo provider** like GitHub, BitBucket, etc.

- WordPress post and Pages data are stored in **SQL database**, not in the repo Provider.

- [ContentFull](https://www.contentful.com) provide you CMS online and give you API to work with.

Which is your best combination of StaticGEN and Headless CMS?
What Does JavaScript Do? 10 things to learn on the way to becoming a JavaScript Master
Tags: ja
Published: 2019-07-25 04:57:20

JavaScript is one of the world’s most popular programming languages, primarily used to add automation, animations and interactivity to Web pages. Web developers use JavaScript for anything from automating simple tasks to creating complex Web pages that behave like desktop software applications. JavaScript is also used beyond the Web in software, servers and embedded hardware controls.
Run JavaScript in Web Pages

Used in Web pages, JavaScript is a “client-side” programming language. This means JavaScript scripts are read, interpreted and executed in the client, which is your Web browser. By comparison, “server-side” programming languages run on a remote computer, such as a server hosting a website. The client-side nature of JavaScript allows developers to add interactive features that change and update a Web page without reloading a new copy of the page from the website.
Implement Basic Automation

In addition to standard programming language features, such as text manipulation and math calculations, JavaScript can access a wealth of information about the browser and the Web page it runs in. JavaScript can use this information to write a custom greeting based on the time of day, add the Web page address in the page footer and optimize the Web page based on the browser you are using.

Click Here to continue: https://simpliv.wordpress.com/2019/07/25/what-does-javascript-do-10-things-to-learn-on-the-way-to-becoming-a-javascript-master/
Vocabulary Words
Tags: swift, xcode, beginners, ios
Published: 2019-07-25 04:42:03

# Swift Vocabulary

{% github thomasdye/SwiftVocabulary %}

## Let's make an example struct

```swift
struct VocabularyWord {
    let word: String
    let definition: String
    let example: String
}
```

## Now let's make an array using the VocabularyWord type

```swift
    var vocabWords: [VocabularyWord] = [VocabularyWord(word: "word1", definition: "definition1", example: "example1"), VocabularyWord(word: "word2", definition: "definition2", example: "example2")]
```

## Now we need to add them to their cells

```swift
    override func numberOfSections(in tableView: UITableView) -> Int {

        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return vocabWords.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ReuseIdentifier", for: indexPath)

        let word = vocabWords[indexPath.row]
        cell.textLabel?.text = word.word
        return cell
    }
```

## Now we can make the link from the cell to the Definition View

```swift
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == NameOfSegueHere" {
            
            guard let indexPath = tableView.indexPathForSelectedRow,
                let definitionVC = segue.destination as? ViewControllerNameHere else { return }
            
            let cellWord = vocabWords[indexPath.row]
            
            definitionVC.cellWord = cellWord
            
        }
    }
```

## We can also add this cool feature to delete unwanted items

```swift
    override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == UITableViewCell.EditingStyle.delete {
            vocabWords.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: UITableView.RowAnimation.automatic)
        }
        
    }
```