teleren/devto huggingface dataset:
Best command line utilities
Tags: commandline, dev, opensource, awesome
Published: 2018-11-18 04:58:13

---
title: Best command line utilities
published: true
description: As a developer, you probably use command line most often. Here are some of the command line utilities that make your life a little bit easier.
tags: command line,dev,opensource,awesome
---

### Best command line utilities 

As a developer, you probably use command line most often.Here are some of the command line utilities that make your life a little bit easier.

### [httpie](https://github.com/jakubroztocil/httpie)

HTTPie is a command line HTTP client. Its goal is to make CLI interaction with web services as human-friendly as possible. It provides a simple command that allows for sending arbitrary HTTP requests using a simple and natural syntax, and displays colorized output. HTTPie can be used for testing, debugging, and generally interacting with HTTP servers.

![httpie](https://thepracticaldev.s3.amazonaws.com/i/nyf2vtf5u3s08qoc717y.png)

### [cheat.sh](https://github.com/chubin/cheat.sh)

As its name suggests cheat.sh is best community driven cheat sheets repositories of the world. It has a simple curl/browser interface and covers 56 programming languages, several DBMSes, and more than 1000 most important UNIX/Linux commands. It’s available everywhere, no installation needed.

![cheat.sh](https://thepracticaldev.s3.amazonaws.com/i/vvfn0t551y3wpn664xn9.png)

### [lazygit](https://github.com/jesseduffield/lazygit)

Lazy is a simple terminal UI for git commands. It allows easily adding files, resolving merge conflicts, checking out recent branches, scrolling through logs/diffs of branches/commits/stash, quick pushing/ pulling, squash down and renaming commits.

![lazygit](https://thepracticaldev.s3.amazonaws.com/i/c211jp1k9abbhlq973pw.png)

### [taskbook](https://github.com/klauscfhq/taskbook)

By utilizing a simple and minimal usage syntax, that requires a flat learning
curve, taskbook enables you to effectively manage your tasks and notes across
multiple boards from within your terminal. All data are written atomically to
the storage in order to prevent corruptions and are never shared with anyone or
anything. Deleted items are automatically archived and can be inspected or
restored at any moment.

![taskbook](https://thepracticaldev.s3.amazonaws.com/i/a2uo8bcjw3xc495hq5cv.png)

### [terminalizer](https://github.com/faressoft/terminalizer)

Terminalizer records your terminal and generates animated gif images. As a developer sometimes need to document or record some terminal interactions, this tool is best for that job.


![terminalizer](https://thepracticaldev.s3.amazonaws.com/i/d75jj9ivugg3fwhpyaaz.gif)

**Originally published on [Openik](https://openik.com)**
What is Scope in Javascript?
Tags: javascript, node, web
Published: 2018-11-18 04:01:38

---
title: What is Scope in Javascript?
published: true
description: In this article, we will learn about variables in Javascript, what is the scope and how it affects your variables.
tags: js, nodejs, web
---
![Scope](https://thepracticaldev.s3.amazonaws.com/i/2wukbiqmde4hu7lbdeve.jpg)




While programming we often deal with data, we need to store and manipulate data to derive useful results. In this article, we will learn about variables in Javascript, what is the scope and how it affects your variables.

# What is Scope in JS?

The scope is the region within which declared variables are accessible.

There are three levels of scope in JS:

- **Global**: Variable is available throughout the program
- **Function level**: Variable is available only in the function
- **Block level**: Variable is available only in the declared code block. Statements if, for etc are examples of code blocks. You can create a code block without using these statements, just write your code inside {}. Having block level variables is useful since you can reuse the variable name in some other code block without worrying.

Javascript has 3 different keywords that allow you to declare(create) variables. 
They are **var, let, const**. These keywords dictate the variables scope.

The **var** keyword creates a variable with **function level** scope if declared inside a function. The **let**, **const** keywords create a variable with **block level** scope. This way you won't accidentally override some global value. The **const** keyword has another speciality, using it you can create constants which are useful to store messages, math constants etc.

>Do note that if you create a variable at top of your function using any of these keywords, it will be global since it's scope is the entire file

You can also create variables without using var, let const keywords. When you do this in **strict mode***(more on this in a later post)* it will throw an error, but in the normal mode, it will create a global variable which will lead to bugs in the future.

## What should I use?

To avoid unintentional bugs you should always use **let** for variables you intend to mutate and **const** for constants.

## How to create variables?

The syntax to create (declare) a varible is *<variable_scope_keyword> <variable_name> = value*. In case of let and var, assigning a value at declaration is not compulsary, but for const if you don't assign a value it will throw an error.

There are also few rules which govern the naming of your variables, check this [link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules) for more information.
Your thoughts on React Hooks
Tags: react, reacthooks, javascript, webdev
Published: 2018-11-18 01:45:21

---
title: Your thoughts on React Hooks
published: true
description: What are your thoughts about React Hooks?
tags: React,React-hooks,Javascript,web-dev 
---

I haven't tried react hooks yet but I don't think it's a good idea. simplicity is better than complexity. Introducing a second way of doing something only makes it harder to decide which way to go. I think having one standard way of doing something is better than 2, let alone the increase in the library size. I never had any issues with the class components, in fact, it's much easier to pick up. These frameworks never standardize they keep on changing, for no good reason. I think I'm going to either switch to Polymer because it's very small and simple or leave web dev completely. What do you suggest?
Is E-voting ever a good idea?
Tags: computerscience, writing, question
Published: 2018-11-18 00:42:19

![alt](https://erc.europa.eu/sites/default/files/styles/stories_detail_page/public/stories/images/vote_large_0.jpg?itok=wwoztery)

_TLDR; PC or Paper?_

As a student I'm constantly exposed to the political microcosm that is the students union and beyond. Seeing this and the comparisons between the wider world I often wonder as a developing (_badum bum ching_) developer what either impact we can have and what impact we should have on the politics around us.

Now that E-voting is being introduced, and poorly so in many cases, I have to ask, especially to more experiences members of the community. Do you think its a good idea? Do you have any faith in it's implementation? 

Or is it all just a stack of cards waiting to fall down.
react-unite: Editable layout system
Tags: react
Published: 2018-11-17 19:02:33

---
title: react-unite: Editable layout system
published: true
description: 
tags: react
---

I just published `react-unite` to npm.

https://github.com/mizchi/react-unite

![](https://i.gyazo.com/a4781fc08dd2dd96b0db5aea61563d57.gif)

[Demo](https://admiring-curie-8355d7.netlify.com)

inspired by unity3d layout system.

## Example

```
yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0 react-unite
```

TypeScript example.

```tsx
import React from "react";
import ReactDOM from "react-dom";
import { LayoutData, Windowed, EditableLayout } from "react-unite";

const initialLayoutData: LayoutData = {
  grid: {
    columns: ["1fr", "1fr"],
    rows: ["40px", "1fr", "1fr"],
    areas: [
      ["header", "header"],
      ["preview", "inspector"],
      ["assets", "inspector"]
    ]
  },
  windowMap: {
    "#scene": { displayName: "Scene", id: "#scene" },
    "#project": { displayName: "Project", id: "#project" },
    "#hierachy": { displayName: "Hierachy", id: "#hierachy" },
    "#inspector": { displayName: "Inspector", id: "#inspector" },
    "#services": { displayName: "Services", id: "#services" }
  },
  containers: [
    {
      id: "preview",
      displayName: "Preview",
      selectedId: "#scene",
      windowIds: ["#scene"]
    },
    {
      id: "assets",
      displayName: "Preview",
      selectedId: "#project",
      windowIds: ["#project", "#hierachy"]
    },
    {
      id: "inspector",
      displayName: "Inspector",
      selectedId: "#inspector",
      windowIds: ["#inspector", "#services"]
    }
  ]
};

// To fill window, Set css `html, body { margin: 0;}`
const MyLayout = () => {
  return (
    <Windowed>
      {(width, height) => (
        <EditableLayout
          width={width}
          height={height}
          layout={initialLayoutData}
          renderTab={data => {
            return <span>{data.displayName}</span>;
          }}
          renderWindow={win => {
            return (
              <div>
                {win.id}: {win.displayName}
              </div>
            );
          }}
        />
      )}
    </Windowed>
  );
};

const root = document.querySelector(".root");
ReactDOM.render(<MyLayout />, root);
```

## Sample project

https://github.com/mizchi-sandbox/react-unite-example
Save money with this one Firestore free quota trick for CRON jobs
Tags: firebase, firestore, cron
Published: 2020-06-11 02:05:09

---
title: Save money with this one Firestore free quota trick for CRON jobs
published: true
date: 2018-11-18 00:00:00 UTC
tags: firebase, firestore, cron
canonical_url: https://alexsaveau.dev/blog/firebase/2018/11/18/save-money-with-this-one-firestore-free-quota-trick-for-cron-jobs/
---

I’m sorry, but I just couldn’t resist that clickbaity title. 😛 Jokes aside, let’s say you have a monthly CRON job that empties out your users’ trash and does some other Firestore related cleanup. This is a great use of Firebase Cloud Functions, but it comes at a cost: you’re creating/updating/deleting documents all in one go.

Remember, Firestore free quota resets daily. So if you’re too small to max out your free quota everyday, but too big to stay on the Spark plan, you should consider running _daily_ jobs instead.

As long as your Cloud Functions only query the data they’re going to process, then it’ll be far cheaper to run a job every day and take full advantage of that free quota. As an added bonus, you’ll be able to better predict your monthly bill because you’ll be spreading out Firestore usage over each day.

[![Chris Pratt Happy](https://alexsaveau.dev/assets/chris-pratt.gif)](https://alexsaveau.dev/assets/chris-pratt.gif)

## Running daily jobs

Running a daily CRON job is ridiculously easy to do: simply create a[Cloud Scheduler](https://cloud.google.com/scheduler/) job set to run at 3am each morning(`0 3 * * *`) that publishes an empty data payload (`{}`) to a topic of your choice (`daily-tick`). It’ll look something like this:

[![GCP Scheduler Daily Tick](https://alexsaveau.dev/assets/firebase/daily-tick.webp)](https://alexsaveau.dev/assets/firebase/daily-tick.webp)

This tick is completely free!

In your functions’ index file, subscribe to the `daily-tick` pubsub event and you’re good to go.

* * *

Hopefully this will help you save a few bucks. Happy coding!
Do not use Number.toFixed for Rounding
Tags: javascript
Published: 2019-02-20 23:53:17

---
title: Do not use Number.toFixed for Rounding
published: true
tags: javascript
canonical_url: https://blog.tomoyukikashiro.me/post/do-not-use-number-tofixed-for-rounding
---

This post was originally published at [Do not use Number.toFixed for Rounding](https://blog.tomoyukikashiro.me/post/do-not-use-number-tofixed-for-rounding).

Sometimes I saw Use-case that developer use [Number.prototype.toFixed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) for `rounding`. But It is not correct in some reasons. I try to explain why it’s not correct. 😥

## Return String instead of Number/Float

The result of `toFixed` is `String` so it case unexpected result if you calculate.

```
// What you expect// 1.1 + 1 = 2.1
// Result1.12.toFixed(1) + 1// '1.1' + 1 = '1.11'
```

## Not accurate in one case

You can pass digits option to `toFixed([digits])` it means …

> digits
> 
> Optional. The number of digits to appear after the decimal point; this may be a value between 0 and 20, inclusive, and implementations may optionally support a larger range of values. If this argument is omitted, it is treated as 0.

For example you run `1.1N.toFixd(1)` the return value would be `1.N`.Okay let’s see what’s happened in real world example.

```
1.150.toFixed(1) // -> '1.1' expected '1.2' because of rounding
1.15.toFixed(1) // -> '1.1' expected '1.2' because of rounding
1.151.toFixed(1) // -> '1.2'
```

To rounding the number which next to digits should be greater than 0. 💩
DenverCoder9 and the future of DEV
Tags: meta
Published: 2018-11-17 15:08:52

As DEV grows in popularity, it's really exciting to see folks finding community, encouragement and guidance. It's also exciting to see that people are finding _solutions_. DEV is a sort of social/utilitarian hybrid. Everything we write adds to an helpful knowledge-base over time.

![](https://imgs.xkcd.com/comics/wisdom_of_the_ancients.png)

As our platform matures, we will continue to add features that augment the blogging form factor. More context clues, ability to indicate that a post is out of date or semi-out-of-date, more helpful collaboration via annotations, smarter bookmarking, etc.

{% tweet 1060895364457357313 %}

There are existing resources more specifically devoted to building this "knowledge-base", but I think our approach, which gives a lot of agency and respect to the individual creator, will ultimately be very helpful for the developer ecosystem.

We at DEV have great respect for how software development happens.

{% tweet 716390583217029124 %}

******

**The DenverCoder9s of the DEV community will be the most helpful DenverCoder9s yet.**

Happy coding ❤️

_[Cartoon by XKCD, of course.](https://xkcd.com/979/)_
YASFA – Yet Another Scaling Framework For Agility
Tags: agile, scaling
Published: 2018-11-17 22:41:24

When agile approaches are introduced in large companies, the topic *scalability* immediately comes up. Scaling agility is most often institutionalized through the use of frameworks such as SAFe. 

On closer examination, this approach isn't in the spirit of the Agile Manifesto. According to the [principles of the Agile Manifesto](http://agilemanifesto.org/principles.html), improvement occurs through reflection and adaptation. Not by copying pre-made blueprints or best practices.

This fact has led me to turn the topic of scaling agility into more general rules that can guide you in trying to scale agile approaches. Let me know what you think.

__Yet Another Scaling Framework For Agility (YASFA): The Seven Rules__

1. If you can't even be agile successfully in a single team, do not try to scale.
2. Stakeholders need to agree on a common, cross-team goal. 
3. Teams distribute their work items so that each team can progress towards the goal as independently as possible from the other teams.
4. Teams self-organize their work to reach the goal. People are not machines that like to execute orders. They need space.
5. Regularly integrate the work results in the team and across teams, and talk about dependencies to other teams.
6. Regularly reflect in the team and across teams on how to improve cooperation and whether the goal is still the right one. Adjust the goal or behavior accordingly.
7. When a goal is achieved, celebrate. Or celebrate in between.

*This article was first published on [HOOD blog](https://blog.hood-group.com/blog/2016/02/09/yasfa-yet-another-scaling-framework-agility/) in German.*
Inspect Stateless Component Props in ReactJs
Tags: debugging, javascript, react, rxjs
Published: 2018-11-17 05:58:51

---
title: Inspect Stateless Component Props in ReactJs
published: true
description: Inspe in React
tags: debugging, javascript, reactjs, rxjs
---

Hi, recently I've shared my tips in javascript, [checkout here](https://dev.to/azrizhaziq/tip-when-in-javascript-497f). On the last section, I did mention how do you debug using `console.log`. 

So today, I'm going to share a little bit the same concept but it will be in ReactJs context. I hope it will useful for us 😊.

In my previous post, you can log current params of a callback function with
`console.log(data) || ...someFn()`

```javascript
   const nameAndEmails = users.map((user) => console.log(user) || ({ 
    name: user.name, 
    email: user.email 
   }))
```

In ReactJs, especially for stateless components, sometime our coworker didn't write any [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html). Hence, it a little bit hard to know what kind of `props` shape it will receive. 

Lets jump to the example: 

```javascript
// let say you have this kind of component
const Button = (props) => (
    <button class="btn btn-primary" type="button" {...props} >
        {`${props.children}`}    
    </button>
);

// use it like this 
<Button type="Submit">Click Me</Button>
```

You would not want to convert this component into `{ ... return (); }`, because it requires a lot of typing, like this: 

```javascript
// 😓, need to type aloot of things here
const Button = (props) => {
    console.log(props);

    return (
        <button class="btn btn-primary" type="button" {...props} >    
           {`${props.children}`}
        </button>
    );
};
```

So, instead of convert to ordinary function, you can try this approach to log the `props`.

```javascript
const Button = (props) => console.log(props) || (
     <button class="btn btn-primary" type="button" {...props}>
        {`${props.children}`}
     </button>
);

// It will logs: 
// { 
//    type: 'Submit',
//    children: 'Click Me'
// }
```

Essentially, you can use this trick to any callback function like in `map.`, `.filter`, `.reduce`

I hope you get the idea, See you next time.
Extracting images from a document using Aspose.Words Cloud API (C# / .NET)
Tags: csharp, aspose, docx, cloud
Published: 2018-11-17 21:42:27

---
title: Extracting images from a document using Aspose.Words Cloud API (C# / .NET)
published: true
description: Sample code and discussion of extracting images from DOCX files
tags: #csharp,#aspose,#docx,#cloud
---

The sample code below discusses a few methods for extracting existing images from a DOCX, or other document file, using the [Aspose.Words Cloud API](https://products.aspose.cloud/words).

You can connect directly and use the [Aspose.Words REST API](https://apireference.aspose.cloud/words/) but to make the code simpler we are looking at the [Aspose.Words Cloud SDK for .NET](https://github.com/aspose-words-cloud/aspose-words-cloud-dotnet).  There are also SDKs for other languages.

Before we can extract image data from a document file file using the Cloud API the file needs to be available in the Cloud Storage.  The sample code below assumes the document has been uploaded.  See [Uploading a document to Cloud Storage (C# / .NET)](https://dev.to/asposewords/uploading-a-document-to-asposewords-cloud-storage-c--net-3e3f).  

The sample code relies on having the Storage and Words SDKs both downloaded (either as code or DLLs) and referenced via the C# project.

My solution in Visual Studio looks like this:

![Solution](https://thepracticaldev.s3.amazonaws.com/i/c1u7vug1ph44wikucvyp.jpg)

The code below shows a sample ExtractImages method.

1) Sets up a connection to the WordsApi by passing in your AppSid and AppKey obtained from the [Cloud Dashboard](https://dashboard.aspose.cloud/#/).  

2) In the next step I have created a GetDocumentRequest and called the GetDocument method to just verify that the file exists in Storage and can be opened by the API.  

The Console.WriteLine call that follows just shows accessing properties of the document … SourceFormat in this case.

The simple example below just has a for / next loop to grab each image based on an index.  A better approach might be to call the GetDocumentDrawingObjects method to retrieve a list of drawing objects in the document if you need to retrieve other information related to the image.  

3) Creates a GetDocumentDrawingObjectImageDataRequest object with the details of the image we want (based on index) and then 

4) We call GetDocumentDrawingObjectImageData to open a Stream to the object

5) Saves the Stream to a file (with a unique name based on the index).

It then loops back to 3) to grab the next image.

The code will save image data as PNG files.   

In the sample DOCX file that I used there is a SmartArt object that can be seen by the GetDocumentDrawingObjectImageData call but which is not an image … and so generates an error and is skipped by this sample code.

As an alternative to the above call you can use GetDocumentDrawingObjectByIndex to specify the format of the returned image.

{% gist https://gist.github.com/asposewords/2983d1ce61af1845adf80f0885e799b3 %}
Uploading a document to Aspose.Words Cloud Storage (C# / .NET)
Tags: csharp, aspose, docx, cloud
Published: 2018-11-17 21:42:03

---
title: Uploading a document to Aspose.Words Cloud Storage (C# / .NET)
published: true
description: Sample code for Uploading a document to Cloud Storage
tags: #csharp,#aspose,#docx,#cloud
---

Before you can use the [Aspose.Words Cloud API](https://products.aspose.cloud/words) (or other [Aspose Cloud APIs](https://products.aspose.cloud/)) to read and update existing documents the files will need to be loaded into the Storage in the cloud.

The Aspose.Storage Cloud API can be directly accessed via the [REST API](https://apireference.aspose.cloud/storage/) but this sample will use the [Cloud SDK for .NET](https://github.com/aspose-storage-cloud/aspose-storage-cloud-dotnet) to make the code simpler.

To begin you will need the SDK downloaded (either the DLL or the source code) and to sign up for a set of credentials by creating an account and requesting a set of API keys.  See https://dashboard.aspose.cloud/

The sample code below shows a simple function to upload a file to Storage by supplying your API keys, local file name and where you want to store the file on Storage.

The essential steps are to:
1. Open the StorageApi using your app keys
2. Create a PutCreateRequest and pass in details of the file
3. Call the PutCreate method 
4. Check the result

{% gist https://gist.github.com/asposewords/780bc90eb820a04a19616c99b56fabfe %}
Scrapping Facebook with JavaScript
Tags: facebook, javascript, scrap
Published: 2018-11-17 21:17:43

---
title: Scrapping Facebook with JavaScript
published: true
description: A simple scrip to scrap Facebook page of friends
tags: facebook, javascript, scrap
cover_image: https://thepracticaldev.s3.amazonaws.com/i/crlpzrah7qjrpyzxj3rz.png
canonical_url: https://github.com/victorqribeiro/scrap
---


# Scrap

Scrapping Facebook with JavaScript.


See it working below.

[![Scrap](http://img.youtube.com/vi/xIlrF2RF_UY/0.jpg)](http://www.youtube.com/watch?v=xIlrF2RF_UY)

Get the code [here](https://github.com/victorqribeiro/scrap)