teleren/devto huggingface dataset:
What's in the bundle? Create React App edition
Tags: react, javascript, createreactapp
Published: 2018-09-04 16:18:01

---
title: What's in the bundle? Create React App edition
published: true
description: Some advice on how to figure out what is in your bundle in Create React App based project.
tags: [react, javascript, create-react-app]
---

If you want to check what is in the bundle for Create React App based project, the easiest way would be to use [source-map-explorer](https://www.npmjs.com/package/source-map-explorer):

```sh
# install it
npm install -g source-map-explorer
# or
yarn global add source-map-explorer
# build the bundle
npm build
# or
yarn build
# inspect the bundle
source-map-explorer build/static/js/main.js
```

This will give you basic info. If you feel like this is not enough, you also can use [Webpack's analyse](http://webpack.github.io/analyse/#home). To use it generate `bundle.json` like this:

```sh
NODE_ENV=production ./node_modules/webpack/bin/webpack.js --config node_modules/react-scripts/config/webpack.config.prod.js --profile --json > bundle.json
```

and use it with [Webpack's analyse](http://webpack.github.io/analyse/#home). Snippet taken from [this ticket](https://github.com/facebook/create-react-app/issues/2737), thanks to jennifersmith.

If you suspect that you have a cyclic dependency you can use [Cyclic Dependency Checker](https://www.npmjs.com/package/webpack-cyclic-dependency-checker):

```sh
# install it
npm install -g webpack-cyclic-dependency-checker
# or
yarn global add webpack-cyclic-dependency-checker
# use bundle.json from the previous step
iscyclic bundle.json
```
Diary - 2018.09.04
Tags: productivity, learning, journey, javascript
Published: 2018-09-04 16:09:57

---
title: Diary - 2018.09.04
published: true
tags: productivity, learning, journey, javascript
---

Today a really simple snippet.

Inserting an item into an existing array:

```
let myFruits = ["apple", "orange", "strawberry"];
myFruits.splice(1, 0, "banana");
console.log(myFruits); // [ 'apple', 'banana', 'orange', 'strawberry' ]
```

Explanation:

```
array.splice(index, 0, item)
```

at `index`, delete `0` items and insert `item` at this position.

So with `splice`, we can delete and insert.


[Read more @MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
Learning Apollo through React Starter Kit
Tags: node, ssr, react, apollo
Published: 2018-09-04 15:53:12

---
title: Learning Apollo through React Starter Kit
published: true
description: I pushed an Apollo-featured branch on a solid boilerplate project, which may help you to learn Apollo toolset.
tags: Node.js, SSR, React, Apollo 
---

[Apollo](https://www.apollographql.com/) toolset is pretty fascinating these days. It's a relatively big project based on GraphQL spec, that is because the Apollo development team provides many separated modules for user's incremental adoption, instead of so-called a full-stack monolith framework. The benefits are huge.

However, because it's kind of hard to get the whole picture of Apollo and how each module relates, especially when you assume server-side rendering (SSR) with it, we've gotta have a good example project. Here, this one would be your option.

👉 [react-starter-kit:feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure)

It includes:

* `apollo-client` and `react-apollo`
* `apollo-link-state` for client-side state management
* `apollo-server` to serve GraphQL API
* SSR with fluent data passing from server to client

React Starter Kit (RSK) is a React+Express based SSR boilerplate of web development. It's not only a highly capable template for a general web service but also a concrete educational material of modern frontend development. Especially [these lines in server.js](https://github.com/kriasoft/react-starter-kit/blob/feature/apollo-pure/src/server.js#L125-L199) are beautiful as I've read a hundred times. It's like a crystal of how web development evolves. Thus I trust RSK and pushed an Apollo example upon it.

There already was [an apollo feature branch by @langpavel](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) from which I've learned a lot. The main difference between these is that mine doesn't include Redux code, being replaced by `apollo-link-state`. Further, the `feature/apollo-pure` uses `apollo-server` so that you will grasp an overhead view from frontend to the backend of an Apollo project.

One challenge for me this time is to design a comfortable/easy-to-understand placement of a `state` role directory. Although Apollo provides a well-considered way to transparently access to both client-side state and remote data through GraphQL syntax, these are different for some reasons. So I separate these in `src/data` (concerning [`feature/apollo` by @langpavel](https://github.com/kriasoft/react-starter-kit/pull/1147)) and `src/state` which all client state and its resolvers go to.

As always, thank you for reading this, and I'll appreciate more if you [review the branch and make a comment on this PR](https://github.com/kriasoft/react-starter-kit/pull/1666). I may miss some necessary functionalities of Apollo in it. I'd like to make it a real Apollo boilerplate. Please tell me what it is. Thanks👍
The most important work?
Tags: requirements, softwaredevelopment
Published: 2018-09-04 15:41:15

---
title: The most important work?
published: true
description: Vague requirements
tags: requirements, software development
---

We've been assigned a ticket.
We look at the ticket.
Hmm, vague requirements.
Now we have a choice, a decision to make.
Do we ask for the requirements or do we try to figure out what the requirements are likely to be by making some educated guesses?

Let's explore the second approach first.
The difficulty level of tickets ranges from very simple to very complex.
Sometimes they are so simple, making educated guesses is absolutely the right way to go. Sometimes they are so complex, making educated guesses is not advised and can even be impossible.
It's usually somewhere in between.
We can ask ourselves, "Is there an industry standard for this type of thing?" or "Have we already done something similar?".
Sometimes you find an answer right away that fits perfectly.
Sometimes you find something similar that is probably a good model for solving the problem.
Sometimes you search and search and find nothing and end up having to ask anyway.

Now let's dive into asking for the requirements.
The first thing we need to do is figure out who to ask.
We can't expect a good answer if we're not asking the right person.
It's not always the creator of the ticket but that's usually a good place to start. If the creator of the ticket isn't the right person, they might be able to direct us to them.

Trying to figure out the requirements can be much faster and much easier if the requirements are easy to guess. When they're difficult to guess, it can be much slower and much more difficult.
And we might guess wrong.
We might guess wrong and we'll have to redo all of the work.
We might guess wrong and nobody catches it in code review or QA and it makes it out to production.

Does asking for requirements look like the better approach?
Well, what if the person we ask doesn't know?
What if they can't direct us to anyone who does know?
The person we're asking needs to be able to answer our questions.

From my experience, the main reason for vague requirements is that they haven't been worked out yet.They never got past the "That's a good idea. Let's do it." stage. We can ask for requirements but they can't give us what doesn't exist.
They will need to be worked out.

So, which approach is better?
To better understand this we need to know why the requirements are vague in the first place. If it's because the task is simple and self-explanatory, making an educated guess is probably the better plan. If they are known but not included in the ticket due to an oversight, asking is the better approach.
We can avoid both if we're dedicated to producing clear, concise requirements up front.

Figuring out the requirements of a task is hard work.
It's hard but it's the work that keeps things moving.
It's the work that prevents problems.
It's the work that keeps people sane.
It's the most important work.
Review: SQL Operations Studio (Preview) for SQL Server
Tags: sqlserver, devtools, review
Published: 2018-09-04 14:54:20

---
title: Review: SQL Operations Studio (Preview) for SQL Server
published: true
tags: SQL Server,Dev Tools,Review
canonical_url: https://randallsims.wordpress.com/2018/09/04/review-sql-operations-studio-preview-for-sql-server/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3ryci079rvvsqgmm0ej9.png
---

As someone who develops on SQL Server every day, I wanted to try it out the latest gizmo, SQL Operations Studio, or SQLOps. I hoped it was going to be my new favorite toy with all those extensions. In the end, I’m fine with it. There is one problem and a couple of missing features, however, that will keep ETL developers using SSMS. [Continue reading Review: SQL Operations Studio (Preview) for SQL Server](https://randallsims.wordpress.com/2018/09/04/review-sql-operations-studio-preview-for-sql-server/)
Flexbox space-evenly value
Tags: css, flexbox
Published: 2018-09-04 14:36:01

---
title: Flexbox space-evenly value
published: true
description: Using space-evenly with Flexbox
tags: css, flexbox
---

###Using the `space-evenly` value with Flexbox


You have certainly already used the `space-around` and `space-evenly` values of the Flexbox properties `justify-content` and `align-items`.

But did you know that you have one extra option?

Meet the`space-evenly` value. This "new" value is similar to `space-around` but provides equal instead of half-sized space on the edges.

**space-around**
![space-around](https://thepracticaldev.s3.amazonaws.com/i/akc15phjho8micpa5f1y.PNG)


**space-evenly**
![space-evenly](https://thepracticaldev.s3.amazonaws.com/i/mvur94nr4w0h94odk5q0.PNG)


###Microsoft Edge

In Microsoft Edge, the `space-evenly` value is currently only supported in CSS grid. But here is a possible workaround with a fallback to the `space-around` value:
```css
.space-evenly {
  justify-content: space-evenly;
}

@supports (-ms-accelerator: true) {
  /* Edge only */

  .space-evenly {
    justify-content: space-around;
    /* you can also add some other adjustments to size, margins etc to get the same positioning */
  }
}
```

Sources:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/
https://caniuse.com/#search=space-evenly
https://cssreference.io/property/justify-content/
Building HTTP clients with Guzzle
Tags: php, guzzle, sdk, client
Published: 2018-09-04 14:34:19

---
title: Building HTTP clients with Guzzle
published: true
description: Whenever you integrate some external service that exposes an HTTP API you'll end up writting a client to interact with that service.
tags: php, guzzle, sdk, client
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uhg145ur34u0a2cdqq9n.png
---

Whenever you integrate some external service that exposes an HTTP API you'll end up writting a client to interact with that service.

There're many different ways to build these http clients although the 3 most common approaches I encountered are listed below.

**1. Creating a client class that extends guzzle.**
![extends guzzle](https://thepracticaldev.s3.amazonaws.com/i/uhg145ur34u0a2cdqq9n.png)

**2. Creating a client class that handles all the logic and calls guzzle.**
![extends guzzle](https://thepracticaldev.s3.amazonaws.com/i/5wa2kr0owxqzeaacasnb.png)

**3. Creating a client class where all the logic is handled by guzzle middleware.**
![extends guzzle](https://thepracticaldev.s3.amazonaws.com/i/f5ddo3lmx3vp0ao8oaxr.png)

# Which one do you prefer? Do you have any alternatives? Discuss.
Easy Dark Mode for Slack
Tags: slack
Published: 2018-09-04 13:42:32

---
title: Easy Dark Mode for Slack
published: true
description: Quick and easy method of adding a dark theme to Slack
tags: slack
---

*_UPDATE:_ As of Slack 4.0, the methods below no longer work. I've had success using this: https://github.com/LanikSJ/slack-dark-mode*

I recently got this from a co-worker and thought I would share. If you want a quick and easy way of implementing a dark theme in Slack, do the following:

On a Mac, navigate to this directory:

```bash
cd /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static
```

Edit the file `ssb-interop.js` with a text editor.

Add this code to the very bottom (*edited thanks to amerritt14 for code support):

```javascript
document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.jsdelivr.net/gh/laCour/slack-night-mode/css/raw/black.css',
   success: function(css) {
     let overrides = `
     code { background-color: #535353; color: #85c5ff; } /* Change color: to whatever font color you want */
     .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353 !important; background-color: #535353 !important; }
     `
     $("<style></style>").appendTo('head').html(css + overrides);
   }
 });
});
```

Save the file and restart Slack, you should have a Dark theme!
How do you train people to ask good questions
Tags: discuss
Published: 2018-09-04 13:33:22

---
title: How do you train people to ask good questions
published: true
tags: discuss
---

(Irony here being that my question might, itself, not be a particularly good question)


One of the joys of being a senior member of an engineering teem is that you often get asked questions - either of things you have direct knowledge of or things that you're simply better at Google-ing. The problem is, it seems like a lot of questions lack the obviousness that the asker assumes is in their question. So, how do you teach people to ask good questions?

Bonus, here, is that once you've taught them how to ask good questions, you've probably also taught them how to more effectively use Google (et. al.) in the process.
Killing many procs at one time
Tags: ubuntu, bash, kill, linux
Published: 2018-09-04 11:05:07

---
title: Killing many procs at one time
published: true
description: This shows you how to kill many procs with the same name at one time
tags: ubuntu, bash, kill, linux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6pnfsr1c6wsy7unmrztt.jpg
---

Sometimes I have a desire to kill many processes using just one line of my BASH console. All this stuff like finding out PIDs from `top` or `ps` commands, killing them manually makes me suffer!

Deal, it has to be a shell-script in order to automate it!
First of all we got to create an empty file to put commands into it, let us do it:

```shell
touch kill-all.sh
```

Once the file is created we have to make it executable, easily:

```shell
chmod +x ./kill-all.sh
```

Now we have a script that could be run and we got to fill it with some helpful instructions:

```shell
#!/bin/bash

# Defining a proc name
proc_name=$1

# Clearing stdout
clear

# Performing killing
ps -aux | grep "$proc_name" | grep -v grep | cut -c 10-15 | xargs sudo kill -9
```

It's done! Now if you are going to kill many processes with same name you just need to run this quite simple instruction:

```shell
./kill-all.sh slack
```

It will lead you to close all the processes with name `slack`

>Thanks for reading this article! You may follow me in order to be updated with most new articles from my side.

> As usual if you have anything just let me know about it in the comments!
Clarifying export of 3D entities with Aspose.CAD
Tags: csharp, java, cad, export
Published: 2018-09-04 11:35:11

---
title: Clarifying export of 3D entities with Aspose.CAD
published: true
description: 
tags: csharp, java, cad, export
---

<a href="https://products.aspose.com/cad">Aspose.CAD</a> supports export of 3D entities from AutoCAD and STL files. For other formats, there is currently (as of 18.8) no support for 3D entities. 

One can specify which entities to export using <a href="https://apireference.aspose.com/net/cad/aspose.cad.imageoptions/cadrasterizationoptions">CadRasterizationOptions</a>'s <a href="https://apireference.aspose.com/net/cad/aspose.cad.imageoptions/cadrasterizationoptions/properties/typeofentities">TypeOfEntities</a> property - it's 
of <a href="https://apireference.aspose.com/net/cad/aspose.cad.imageoptions/typeofentities/">TypeOfEntities</a> enum type, accepting either Entities3D or Entities2D (default) value. See the example:
```csharp
using (Aspose.CAD.Image cadImage = Aspose.CAD.Image.Load("image.dwg"))
{
    Aspose.CAD.ImageOptions.CadRasterizationOptions rasterizationOptions = new
	Aspose.CAD.ImageOptions.CadRasterizationOptions();
    rasterizationOptions.PageWidth = 500;
    rasterizationOptions.PageHeight = 500;
    rasterizationOptions.TypeOfEntities = TypeOfEntities.Entities3D;
    
    
    PdfOptions pdfOptions = new PdfOptions();
    pdfOptions.VectorRasterizationOptions = rasterizationOptions;
   
    cadImage.Save("Export3DImagestoPDF_out.pdf", pdfOptions);
}
```

For AutoCAD files, most entity types will be exported in both cases, though with some differences due to projection. However, there are entities that are only exported when a corresponding entity type is set.
Entities that are only exported in 2D mode include: attribute and attribute definition entities, underlays, raster images, Table, Text and MText entities. Entities that are only exported in 3D mode include: 3D face and solid entities, mesh entities, plane, swept, extruded and revolved surfaces.
If 3D entities are selected for export, output image will be automatically centered to them - same way as when setting CenterDrawing property of CadRasterizationOptions to <b>true</b> - geometric center of all 3D entities in image is determined and is pinned to output image's center.

For an STL file, you may not specify TypeOfEntities - it will be automatically set to Entities3D, as STL only has 3D entities anyway. Centering happens the same way.

For other file formats, specifying 3D entities for export will only cause centering - this is a default behaviour for all formats.

That's all for now, stay tuned!

For more examples please visit the <a href="https://github.com/aspose-cad">Aspose.CAD GitHub</a> page. There's also <a href="https://twitter.com/Asposecad">Twitter</a> and <a href="https://www.facebook.com/AsposeCAD">Facebook</a> pages for news on Aspose.CAD.
Share file between Host System and Docker Container.
Tags: docker, linux, devtips
Published: 2018-09-04 10:05:11

---
title: Share file between Host System and Docker Container.
published: true
description: 
tags: docker,linux,devtips
---


**1. Create a folder in Host System.**
	<code>C:\\\\\<directory-name> </code>
	(eg. C:\\\Tunnel)

**2. Add this folder in Shared Folder list of VM.**
	<code> Go to : Machine > Settings >  Shared Folder </code>
	(Add folder here.)

**3. Create folder in VM.**
	<code>mkdir /\<directory-name></code>
	(eg. mkdir /vm_tunnel)

**4. Mount Shared Folder in VM directory.**
	<code>mount -t vboxsf \<host-directory-name> /\<vm-directory-name></code>
	(eg. mount -t vboxsf Tunnel /vm_tunnel)
	
**5. Test sharing by creating file in Tunnel or /vm_tunnel and check in
/vm_tunnel or Tunnel.**

**6. Share file between Host and Conatiner.**
	<code> docker cp \<container>:/path/to/file/in/container /path/of/vm-direcory/where/host-folder/is/mounted</code>
    	(eg. docker cp foo:/data/bar.txt /vm_tunnel/)

Thanks for reading! 😊
Mapbox Explore Outdoors Final Challenge
Tags: mapbox, swift
Published: 2018-09-03 05:47:34

---
title: Mapbox Explore Outdoors Final Challenge
published: true
description: 
tags: mapbox, swift
---

As part of the [explore outdoors challenge](https://www.mapbox.com/explore-outdoors/) from [Mapbox](http://mapbox.com), our final task was to create a blog post detailing our journey through the challenges. I've created 3 different blog posts (even some screencasts!). Please be patient, GIFs may take awhile to load. 

**An overview of any Mapbox tools and third-party tools you used (if applicable).**
I only used Mapbox! No other 3rd party software.

**A link to your Studio Map with your hometown POIs** 
Here is the map I created in Mapbox Studio: https://api.mapbox.com/styles/v1/stevenrockarts/cjkn6ey1f4ihs2sowkr1bxh00.html?fresh=true&title=true&access_token=pk.9ja2FydHMiLCJhIjoiY2l3ZjYyMDY4MDR2MjJ0bm1tZHlnZGk4OSJ9.l0jd-Q5Mx4sUDIuUudkldQ#8.9/52.836350/-118.036451/0

Here is the blog post I wrote explaining how to build it! 
[https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6](https://dev.to/rockarts/building-a-custom-map-using-mapbox-studio-to-add-to-your-apps-3oi6) 

**two screenshots (or a screengrab/gif) of your navigation app + a code snippet**
Here is the app I created. The blog post I wrote contains all the code to create it and explains it every step of the way. 

[https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje](https://dev.to/rockarts/using-your-custom-mapbox-map-and-adding-navigation-using-swift-1dje)

![Navigation](https://thepracticaldev.s3.amazonaws.com/i/mdrsvv0ymc9da5pa5fji.gif)

**two screenshots (or a screengrab/gif) of your 3D visualization + a code snippet**
Here is the app I created. The blog post I wrote contains all the code to create it and explains it every step of the way. 

[https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p](https://dev.to/rockarts/build-a-3d-map-using-mapbox-and-scenekit-515p) 


![3D Map](https://thepracticaldev.s3.amazonaws.com/i/u3ayd36dc813zlhhdjfo.gif)
Be or not to be a full-stack developer?
Tags: webdev, java, javascript, carreer
Published: 2018-09-04 00:59:26

---
title: Be or not to be a full-stack developer?
published: true
description: Full-stack developer is a profession that has been on trend and creates a lot of doubts to my carreer.
tags: webdev, java, javascript, carreer
---

I've seen many definitions of what is a full-stack developer, for me it is basically a developer that **dominates** all aspects (or stacks) of an application, from databases, to APIs, page rendering by servers, front-end implementation and design. I think this is fearsome for anybody who is in the stage of panic because of the enormous amount of technologies there is out there. 

Since my early days of college I was always a good programmer, I had more affinity with C and C++ than with HTML and CSS, now after graduating and starting my first job I'm now a back-end developer using principally Java. In our company we have web designers that makes all the shiny and colorful layouts and we, as back-end developers, give life to their great, but still static pages. It looks a harmonious relationship to me. I've heard that designers and programmers don't get well together, but it has been very good so far, luckily for me. 

I do make some adjustments on the front end though, not in the layout, but on the Javascript code, using jQuery most of the time. After seeing and interacting with layouts the entire day, even adding events through jQuery to make it more dynamic, you end up understand the structure really well, although I wouldn't even think about building one from the ground up right now. It is like knowing how to speak a language, but not write, an incomplete knowledge. 

Other definitions of a full-stack developer allows more flexibility, you can be more about back end and understand well front end, but not completely. Therefore, can I considere myself a full-stack developer at this stage? For the many job descriptions I've seen so far, I'm definitely not a full-stack developer because of my poor knowledge in front-end. It seems that to be full-stack you need to dominate at least either Angular, or React, or Vue these days, besides CSS, SASS, Bootstrap, etc., to know all about design, implementation, database... Again, it is fearsome... 

Isn't it to much burden in an only person? The theory in development that always proved good: divide and conquer, doesn't  apply for development jobs? Is it valid at this day and age know one side more deeply, in my case back end, and know the other just enough to understand the designer's job? Or is it the future (or even the present) understand fully all aspects? What's your definition of full-stack? Do you agree with my definition?