teleren/devto huggingface dataset:
Book Review: It Doesn't Have To Be Crazy At Work
Tags: books, career
Published: 2019-03-09 23:58:15

---
title: Book Review: It Doesn't Have To Be Crazy At Work
published: true
tags: books, career
series: jsrn reads
canonical_url: https://jsrn.net/miscellaneous/2019/03/10/book-review-it-doesnt-have-to-be-crazy-at-work.html
---
David Heinemeier Hansson and Jason Fried of [Basecamp](https://basecamp.com/) and [Signal v. Noise](https://m.signalvnoise.com/) lay out how they achieve calm at Basecamp and how other companies can make the choice to do the same.

They point to the long hours, stolen weekends and barbed perks that run rampant in tech and say "it doesn't have to be this way!"

Growth at all costs. Companies that demand the world of your time, and then steal it away with meetings and interruptions. Companies that coerce or bribe you to spend most of your waking hours with your nose to the grindstone (because after all, this company is *like a family*, right?)

It Doesn't Have To Be Crazy At Work discusses these problems and proposes a better way of doing things. DHH and Jason Fried discuss the solutions they've found to work at Basecamp, tackling issues from big picture ambitions to lower level project management, and from hiring to perks and payroll. They discuss the solutions that they have found work for them at Basecamp, but make no decrees as to how _your_ company ought to be run. That's for you to iterate on with your own team.

Most of the stuff I have read about taming work feels very prescriptive. Do this. Do that. Try these processes. Add enough kanban boards and everything will click into place and you will finally be able to breathe. It Doesn't Have To Be Crazy At Work takes the opposite approach and encourages you to look at the things that you _don't_ need to do. Make time for the important things by stripping away the inessential.

It's a pretty short read, and worth a look for anyone who feels like work is a little too hectic.
Generate Word Cloud Art with One Line Command
Tags: python, wordcloud, pythonmodule
Published: 2019-03-09 23:46:39

---
title: Generate Word Cloud Art with One Line Command 
published: true
description: Generate Word Cloud Art with one line command 
tags: #python #wordcloud #pythonmodule
---

Recently, I've tried to create a python package and last night I released a new one, wcartist.

What wcartist can do is to generate a word cloud artistic image with one line command.

The steps you need are really simple.

1. Install wcartist
2. Get an image for word cloud. There is one thing you have to follow is that right now wcartist only works with black & white image like the following.

![sample](http://img0103.pipa.jp/tegaki/user_img103/12988/1298805407613452.png)

3. Create a text file. Of course we need some text to create a word cloud

4. Run command

This case is using text about facebook from Wikipedia.
![test](https://thepracticaldev.s3.amazonaws.com/i/lkja9j4hyuu0df31q22a.png)

details
https://github.com/koji/wcartist

As I mentioned, right now `wcartist` only supports a black & white image, but in the future, `wcartist` will support any types of images.
Quick Tip to write Cognito Emails to File using JQ and Pipe
Tags: tools, beginners, productivity, aws
Published: 2019-03-09 22:55:25

---
title: Quick Tip to write Cognito Emails to File using JQ and Pipe
published: true
description: Use CommandLine, JQ and Pipe to retrieve data, parse json and write to file
tags: #tools, #beginners, #productivity, #aws  
---

Last week it i needed somehow to retrieve all the emails of the users in the Cognitor User-Pool of an app we use internally in our company. 
![Cognito User Pool](https://thepracticaldev.s3.amazonaws.com/i/vo5wisxtet4mtrbcluge.png)
They were not a lot and I probably could have spent some good 30 minutes going through all the users listed in the AWS UI-Console and then copy-pasting them into an excel file. 
But I hate doing things manually, especially if boring and repetitive tasks, therefore, I quickly opened the [AWS Cognito Documentation](https://docs.aws.amazon.com/cli/latest/reference/cognito-idp/index.html) and [JQ tutorials](https://stedolan.github.io/jq/tutorial/) to figure out how to quickly grab the list of emails:
This is the nifty little line of code that saved me from becoming a copy-pasta-monkey:

 ```
aws cognito-idp list-users --user-pool-id YOUR_USER_POOL | jq '[.Users[].Attributes[].Value | match(".*@.*") | .string]' > emails.json 
```

Yes, **maybe it took me still around 20 minutes to figure it out but by doing that I had the opportunity of learning something** new about the AWS Cognito API, of refreshing my JQ parsing skills, and i have a tiny snippets anyone in my team could use whenever a similar task may arise.

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

---
What is it doing?

`aws cognito-idp list-users --user-pool-id YOUR_USER_POOL` is just asking the AWS API to retrieve the users from a specific Cognito User Pool
` | ` the Pipe feeds the result of the API call as input parameter of JQ command
`.Users[].Attributes[].Value` grabs all the values of the properties of each users nested in the API Response
` | ` feeds the result into the next regex
` match(".*@.*")  ` which searches for the email values
`| ` feeds the list of emails found by the regex to the last JQ command 
` .string ` which extracts the string value out of the RegEx match.
The list of emails is nicely wrapped into an array ( see the brackets at start and end of the entire JQ command 
` > emails.json ` writes the result of the piped commands into a file.  ( `>` is creating always a new file - while `>>` will append to the content , if existing) 

Other tips and tools [here](https://dev.to/dvddpl/tools-i-wish-i-knew-from-the-start-48kl)
Ink: React for CLIs
Tags: react, cli
Published: 2019-03-09 21:54:20

---
title: Ink: React for CLIs
published: true
tags: react,cli
canonical_url: https://www.iamdeveloper.com/posts/ink-react-for-clis-2l3b/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ewrl8i5l3v9avgxpocjc.jpg
---

This one is short and sweet.

Are you familiar with React? Then you know Ink. I haven't tried this out yet, but basically it's a [custom React renderer](https://github.com/nitin42/Making-a-custom-React-renderer) that allows you to build beautiful CLIs.

{%github https://github.com/vadimdemedes/ink %}

Flexbox in a CLI? 🤯 React hooks in a CLI? YOLO my friend, YOLO.

<center>
![Holy Forking Shirt!](https://media.giphy.com/media/xT0xeGWDzEfcsd8QzC/giphy.gif)
</center>

Here's a little example straight from the repository's ReadME:

```javascript
import React, {Component} from 'react';
import {render, Color} from 'ink';

class Counter extends Component {
	constructor() {
		super();

		this.state = {
			i: 0
		};
	}

	render() {
		return (
			<Color green>
				{this.state.i} tests passed
			</Color>
		);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			this.setState({
				i: this.state.i + 1
			});
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

render(<Counter/>);
```

Even the folks at npm think it's kinda cool.

{% twitter 1103347697107361792 %}

Vadim, the author of Ink has a great intro post to it, [Building rich command-line interfaces with Ink and React](https://vadimdemedes.com/posts/building-rich-command-line-interfaces-with-ink-and-react).

So what are you going to build with Ink? 😉

Happy coding!

Photo by [Pierre Bamin](https://unsplash.com/photos/-ltjzTfhpCI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Resource
Published: 2019-03-09 21:34:48

---
title: Resource
published: true
description: 
tags: 
---
https://unsplash.com/
https://cssreference.io/
https://css-tricks.com/almanac/properties/f/font/
https://www.w3schools.com/css/css_font.asp
https://fonts.google.com/
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
http://cssspecificity.com/
https://tympanus.net/codrops/
https://pagecrafter.com/responsive-background-image-sprites-css-tutorial/

https://www.quackit.com/html/codes/html_borders.cfm
https://webplatform.github.io/docs/

http://daveshea.com/projects/zen/
http://www.csszengarden.com/219/
https://www.w3.org/TR/CSS22/intro.html#design-principles
https://stylestage.dev/#contribute
https://www.w3.org/TR/css-color/#color-keywords
How to make component like <card.header>
Tags: react
Published: 2019-03-09 21:05:48

---
title: "How to make component like <card.header>"
published: true
description: ""

tags: "react.js"
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/vb3d1ktlakmpt5oh0auq.png">
Sort files Google Drive
Tags: javascript, google, drive
Published: 2019-03-09 21:03:33

---
title: Sort files Google Drive
published: true
description: 
tags: javascript, google, drive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x0vi1qccw172ve3vkjmk.jpg
---
Simple script to sort the google drive files by size
```javascript
[...document.getElementsByClassName("a-t-J a-Wa-ka l-oi-cc l-t-Q a-t-J-yl")]
  .map(element => {
    const [
      size,
      unit
    ] = element.childNodes[3].childNodes[0].childNodes[1].childNodes[0].innerText.split(
      " "
    );
    const SIZES_KB = { MB: 1024, GB: 1048576, KB: 1 };
    return {
      size: Number(size) * SIZES_KB[unit],
      node: element
    };
  })
  .sort((elementA, elementB) => elementB.size - elementA.size)
  .forEach(element => {
    const files = document.getElementsByClassName("a-t-J-Rf")[0];
    files.appendChild(element.node);
  });
```
React Optimizations with React.memo, useCallback, and useReducer.
Tags: react, javascript
Published: 2019-03-09 21:03:00

---
title: React Optimizations with React.memo, useCallback, and useReducer.
published: true
description: Research and findings on React.memo, useCallback, and useReducer. How to use these tools and optimize React components.
tags: react, javascript
canonical_url: https://codebushi.com/react-component-optimization/
---

*This post was originally published at [codebushi.com](https://codebushi.com/react-component-optimization/)*

With the recent release of React Hooks, I've switched over to using more and more functional components in my React code. While reading the React docs, I kept seeing mentions of `useReducer` being "more performant" than `useState`. I was unclear on why so I did a deep dive into the topic. After much research and experimentation, these are my findings.

It's pretty hard to demonstrate these concepts without a video, but hopefully this content makes sense. I recommend using the React Dev Tools and turning on `Highlight Updates` in the settings to test things out. It's also helpful to put a console.log on the Child component, if you see the console log, then it's being re-rendered.

===

**Our Scenario: A Parent component with a Child component that receives props from the Parent. Assume that both are functional components and the Parent is using `useState` to manage state.**

If the props being passed to the Child component are simple, the Child should be wrapped with `React.memo` to prevent re-renders if the props don't change. `React.memo` will automatically optimize the functional component and acts like the `shouldComponentUpdate` lifecycle method. Read more about [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

If the Parent component is passing a function (specifically, a function that updates the state of the Parent) down to the Child component, only using `React.memo` will not work. The function in the Parent component will need to be wrapped with the `useCallback` hook. This is because the function will be "re-rendered" every time the Parent re-renders, so the Child will always consider that function a new prop. Read more about [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback).

If the `useReducer` hook is used in the Parent component to manage state, then we won't have to worry about `useCallback`. `useReducer` will return a `dispatch` method that can be passed down to the Child component. The `dispatch` method won't be "re-rendered" every time the Parent re-renders. I'm pretty sure this is what makes `useReducer` "more performant" than `useState`. Read more about [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer).

When working with deeply nested Child components, it is recommended to use the `useReducer` hook in conjunction with React Context. You can pass the `dispatch` method down the tree with Context, which prevents prop drilling. Read more about [this pattern](https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down).
When lodash is too much
Tags: javascript, lodash
Published: 2019-03-09 20:54:02

---
title: When lodash is too much
published: true
description: javascript functions utils
tags: javascript, lodash
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oiblpoyt6q2bf9o7jtmi.png
---
It is not always necessary to use the well-known **lodash** utility library to do some basic operations with arrays and javascript objects.
#### Get safe object properties
```javascript
function isObject(object) {
  return object && typeof object === "object";
}
function hasKey(object, key) {
  return key in object;
}

function safe(object) {
  return new Proxy(object, {
    get: (target, name) => {
      if (!hasKey(target, name)) {
        return "undefined";
      }
      if (!isObject(target[name])) {
        return target[name];
      }
      return safe(target[name]);
    }
  });
}

```
#### let's try...

```javascript
const objectDeep = { a: { b: "x" } };
console.log(objectDeep.a.b);
// x
console.log(objectDeep.c.d);
// TypeError: Cannot read property 'd' of undefined
console.log(safe(objectDeep).a.b);
// x
console.log(safe(objectDeep).c.d);
// undefined
```
---
#### Get object's array unique
```javascript
function isEqual(objectA, objectB) {
  return JSON.stringify(objectA) === JSON.stringify(objectB);
}

function unique(array) {
  return array.reduce((uniqueArray, currentElement) => {
    const isDuplicated = uniqueArray.find(element =>
      isEqual(element, currentElement)
    );
    return isDuplicated ? uniqueArray : [...uniqueArray, currentElement];
  }, []);
}
```
#### let's try...
```javascript
console.log(unique([{ a: "x" }, { a: "z" }, { a: "x" }]));
// [ { a: 'x' }, { a: 'z' } ]
```
---
#### Get array one dimension less
```javascript
function flat(array) {
  return [].concat.apply([], array);
}
```
#### let's try...
```javascript
console.log(flat([["a", "b"], ["c", "d"]]));
// [ 'a', 'b', 'c', 'd' ]
```
---
#### Get clone object deep
```javascript
function cloneDeep(object) {
  return JSON.parse(JSON.stringify(object));
}
```
#### let's try...
```javascript
const objectDeep = { a: { b: "x" } };

const objectDeepClonedAssign = Object.assign(objectDeep);
objectDeep.a.b = "assign";
console.log(objectDeep);
// { a: { b: "assign" } }
console.log(objectDeepClonedAssign);
// { a: { b: "assign" } }

const objectDeepCloned = cloneDeep(objectDeep);
objectDeep.a.b = "deep";
console.log(objectDeep);
// { a: { b: "deep" } }
console.log(objectDeepCloned);
// { a: { b: "assign" } }
```
Using sprintf.js to make pure javascript templating
Tags: javascript, sprintf, templates, html
Published: 2019-03-09 20:03:58

---
title: Using sprintf.js to make pure javascript templating
published: true
description: Use sprintf.js library to easily make html templates and fit your js objects into it. 
tags: #js #javascript #sprintf #templates #html
---

If you are dealing with only js project with no front-end framework, you may have noticed that some code blocks can be very repeated as long project grows. A commom example is html that holds information of a item in some list:

```javascript
const persons = [
    {id:1, name:'Ted'},
    {id:2, name:'Bob'},
    {id:3, name:'Bar'},
    {id:4, name:'Foo'},
]

persons.forEach(function(person, index){
    let item = "<h3><a>"+person.id+"</a> "+person.name+"</h3>";
    document.body.innerHTML+= item;
});
```

So we can change this previous example adding a simple template that grab most common HTML lists items like this:

```javascript
const Template = {
    getPersonListItem:function(person){
    	 return "<h3><a>"+person.id+"</a> "+person.name+"</h3>";
    }
}
```

we end up have something a little bit better than initial code:

```javascript
const persons = [
    {id:1,name:'Ted'},
    {id:1,name:'Bob'},
    {id:1,name:'Bar'},
    {id:1,name:'Foo'},
]
const Template = {
    getPersonListItem:function(person){
    	 return "<h3><a>"+person.id+"</a> "+person.name+"</h3>";
    }
}

persons.forEach(function(person, index){
    let item = Template.getPersonListItem(person);
    document.body.innerHTML+= item;
});
```
But we still have this string interpolation on "getPersonListItem" function. Thats when the sprintf js library can help to make this code more clean and readable. Keep in mind that this is a very simple example, but we know that HTML that represents a list item can be a lot more complex and sometimes a little tricky to maintain. So lets use sprintf.js : 


```javascript
const persons = [
    {id:1,name:'Ted', alias:'T'},
    {id:1,name:'Bob', alias:'B'},
    {id:1,name:'Bar', alias:'BA'},
    {id:1,name:'Foo', alias:'F'},
]
const Template = {
    personListItem:"<h3><a>%(id)i</a> %(name)s</h3>",
    personEspecialListItem:"<h5>%(alias)s</h5>"
}

persons.forEach(function(person, index){
    let item = sprintf(Template.personListItem, person);
    let title = sprintf(Template.personEspecialListItem, person);
    document.body.innerHTML+= item;
    document.body.innerHTML+= title;
});

```

Now we have no string interpolation and we can pass person object directly to sprintf function, this allow us to write more complex templates and maintain on a single place all html related to a item.
Nevertheless, Alwina Coded
Tags: wecoded
Published: 2019-03-09 01:36:10

---
title: Nevertheless, Alwina Coded 
published: true
tags: shecoded
---

I continue to code in 2019 because...

I want to prove to myself that I can start something and follow through with it. 

I started coding in 2016 because I wanted to be a digital nomad. I went to an information session at General Assembly and learned that Python was also a programming language, not just a snake. I've since gone down the rabbit hole and experienced so much in the last 2.5 years. 

It's been an amazing ride and I've learned a lot. Met a ton of people along the way. Gone to plenty of meetups and several conferences. I even drafted my first CFP to speak at two conferences to share what I've learned.

Coding is a non-stop journey; it doesn't end once I get my first job. It continues because there are new technologies to learn, new versions of programming languages and new ways to do old things. 

I look forward to continuing this journey, sharing my knowledge with others and contributing to the community at large.
I will start streaming free web development lesson on Twitch!
Tags: javascript, webdev, beginners
Published: 2019-03-09 18:22:48

---
title: I will start streaming free web development lesson on Twitch!
published: true
description: Everyone is invited!
tags: javascript,webdev,beginners
---

https://www.twitch.tv/marcocastignoli

Hi guy, I'm a full stack developer, my name is Marco. I'm the founder of Nile (http://nile.shopping/). If you want free web dev lessons show me your support leaving a comment (or an upvote) here!

Also write down the topics you would love to learn!

We created a group on Discord so we can decide things together :) Join us here! https://discordapp.com/invite/MX6sP26
Nevertheless, Chisom coded
Tags: wecoded
Published: 2019-03-09 17:52:52


#I started coding in late 2018 because

I was thrilled at the opportunities that coding offered.

#I deserve credit for

being able to venture out of my niche(the healthcare space) to code, while offering solutions to better my field. I recently wrote a BMI and drop factor calculator code for nurses, using python.

#I hope to inspire

a lot of health professionals for the health tech and informatics space.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-03-09 16:53:10

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

It's time for our weekly reflection - looking back, what was something you're proud of?

All wins count -- big or small!

Examples of 'wins' include:

- Getting to all your meetings on time
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄 🎉
How to win javascript in 2019
Tags: javascript, node, es6
Published: 2019-03-09 16:36:26

---
title: How to win javascript in 2019
published: true
description: 
tags: javascript , nodejs , es6
---

## Learn Basic JS Frist

First complete this course to warmup your js skills and to getting better understanding of es6’s new features.


**ES6 Course by wesbos [ Paid, $180 ]**
https://es6.io
Along with this, parallelly follow this project based course to grow your confident level.

**Javascript 30 - Course by wesbos**
https://javascript30.com/ [ Free ]
Also available at youtube

> Now you have all necessary knowledge about new js, now you can start ReactJS

**React For Beginners - Course by wesbos [ Paid, $139 ]**

After finishing this application you should start learning redux, which is a state-management package by react. I don’t know wheather you now about frontend framework’s state management system concept. If I told you in one line, “ State-management system is an ecosystem for frontend framework to share state/data from component to component globally. It’s extremely necessary for making large scale one page application.”

For learning Redux, follow this course: https://www.udemy.com/react-redux/

After then you can go to nodejs,

To learn nodejs very deeply. follow this udemy course
https://www.udemy.com/the-complete-nodejs-developer-course-2/

This course has included various important modules such as moongoos, realtime socket , express framework etc…etc…

Now you can start Express Framework ( A MVC Framework like laravel )

Follow this -> https://learnnode.com/
Nevertheless, Mary Coded
Tags: wecoded
Published: 2019-03-09 15:19:05

---
title: Nevertheless, Mary Coded
published: true
description: 
tags: #shecoded
---

Six months ago, I left an amazing job and all of my savings behind to begin a full stack web development bootcamp. Every Friday of the bootcamp, each cohort sat in a circle and discussed how they were feeling during "Feelings Friday." During my first Feelings Friday, when it was my turn to speak, I sobbed. While the predominantly male cohort watched me in bewilderment, I explained that my tears were of pride and joy for following my heart and gut that led me to the bootcamp, and fear that I would let them down. 

The next four months were both life-changing and agonizing. I learned so much that I lost track of everything else. In one Feelings Friday, I remember saying I felt like I was running a marathon and a 400 meter dash at the same time. Imposter Syndrome enveloped me. I rarely saw my friends and family. But I was determined to cram as much learning into my four months as possible. Despite my fear of failure, I sat down and coded 10+ hours a day, six days a week.

On my graduation day, I got the flu. I think it was my body's way of telling me to stop looking at my computer and lie down. Afterwards I started applying for mission-driven roles as a Software Engineer. Two days ago, during international women's week, I got offered the job of my dreams on the most supportive team I have ever met. I start in two weeks.