teleren/devto huggingface dataset:
Working Inspector component
Tags: webdev, go, webassembly, devlog
Published: 2018-11-03 15:12:47

---
title: Working Inspector component
published: true
description: Made some good progress on the UI for my Big Project around the Inspector. Basic data types are supported and it actually sets the data now. Advanced types are next.
tags: webdev, go, wasm, devlog
---
After working on Apple Go binding generation and porting that panel UI kit for a bit I realized I needed to get back to the main critical path of the Big Project. So I returned to the treeview and inspector UI prototype.

The Inspector was made up of several PropertySets, which are a named set of fields you can change and maps to a single object. Previously, a PropertySet would iterate over fields and place PropertyFields, which were basically a row of the inspector showing the field name and an input.

I decided to remove the PropertyField and put most of that HTML into the PropertySet. The problem is I needed to include a different input based on the type of field, like textbox for a string, checkbox for a boolean, etc. This led me down the path of figuring out how to place pre-made HTML bits that were put into a variable. JSX just lets you put a variable inline with other HTML to insert any elements in that variable. Vue uses a tag called component for dynamic components, though only components, not HTML snippets. 

I started implementing the component tag in vtemplate and realized I needed to place more than just components, so I renamed it for now to node. Using a node element you can insert pre-defined components or HTML from a variable. All the other attributes on node are placed on the component or outer HTML element. 

Then I threw this away. I ended up making a component for the input called PropertyInput that didn't use a template, but just used the vecty functional API to create different input elements based on the type of value it was given. I implemented basic types like strings, boolean, integers, and floats. 

Before going into advanced types like references and slices, I got it to set the data on the object it came from. And it would bubble up an OnChange callback that would persist the node tree. So it's now a working inspector. It even updates the tree when you modify properties of the node like name and active. 

![inspector demo](http://g.recordit.co/wzGUZwgUb1.gif)

When I come back to this I'll start working on the advanced types it needs to support. References will be fun because I want them to be settable with drag and drop, just like Unity. You'll be able to drag a node from the treeview to the inspector field to set it. 
{% youtube KSrLNXUjGSc %}
Developer. Life. Work. Pet. Balance
Tags: work, life, pet, discuss
Published: 2018-11-03 15:05:09

---
title: Developer. Life. Work. Pet. Balance
published: true
description: How to keep a balance between life, work and pet?
tags: work, life, pet, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/y1y9ichn3hagrbaqga8q.jpg
---

No doubt you are a developer, that's why you are here. 😂

But...

If you have a pet animal, how do you keep a balance between your **life/work/pet**.

### My story

I have a pet dog 🐶 name "GUGU" _([he is quite naught](https://www.facebook.com/guguthedog))_ and I am still struggling in keeping a balance between life/work/pet.

**Playlist:** [Gugu | A Dog](https://www.youtube.com/playlist?list=PLLyrdy862TuULog0aLgk94HyfgjtMpk2b)

What about you?
Thoughts on Site Monitoring tool - UpDown
Tags: showdev, productivity, devtools, dailytools
Published: 2018-11-03 14:47:12

Hi All, this is Adi again.

I wanted to talk about a tool I use on a daily basis to monitor my websites. The tool is UpDown, this is an online tool that offers a service to monitor a website's downtime.

Site up-time is something every client is concerned about and the quickest solution to get notified when a site is down, is to use a tool to continuously monitor a site using a tool like UpDown.

I was first introduced to UpDown by a client of mine who was monitoring their sites using it and right away I knew the ways it could help me and my clients. Below is a list of features I continue to use this tool.

**Features**
- Email, SMS and API alert
- Very, very cheap - credit based
- Ping from multiple locations
- SSL Certificate Check
- Can customize the HTTP request
- Can check for custom response text
- Check intervals ranging from 15 seconds to 1 hour
- Custom status page for each website
- Up to 6 months data retention
- Detailed report for the past 24 hours

I know there are 100s of other alternates, I have tried a few of them but when compared to UpDown, none of those stand a chance. One other tool I recently tried was FreshPing by FreshDesk. This is a completely free to use for now, but it still lacks crucial features like Interval Check range, SSL Certificate check, Ping from multiple locations.

I have added a referral link to UpDown service, take a look if you are interested.

[UPDOWN WEBSITE MONITOR](https://updown.io/r/hqZkB)

You can look into my service and my past projects at [SimplestWeb.in](https://simplestweb.in/?utm_campaign=updown-article&utm_medium=referral&utm_source=dev.to).

Thank You
Conduit - C++ Lazy Stream Processing Library using Coroutine TS
Tags: c, opensource, coroutines, streamprocessing
Published: 2018-11-03 14:21:03

---
title: Conduit - C++ Lazy Stream Processing Library using Coroutine TS
published:  true
description: Conduit - C++ Stream Processing Library using Coroutine TS
tags: c++, open source, coroutines, stream processing
---


![](https://cdn-images-1.medium.com/max/800/0*psDujwuN5qPSWUmy.png)

https://github.com/loopperfect/conduit

Lazy High Performance Streams using Coroutine TS

Conduit is a utility library for building and transforming, ranges and lazy (infinite) iterable sequences.

Conduit's goals are:

- Expressivity 
- Composability
- Performance

These are attained by adopting a monadic interface that leverages zero-cost abstractions.

For more information, head over to our [github](https://github.com/loopperfect/conduit) or read our [blogpost](https://medium.com/p/b7e87dd85fcf)
WeeklyRandom #1: sindresorhus/ua-string
Tags: weeklyrandom, learning, github, javascript
Published: 2018-11-03 17:27:53

---
title: WeeklyRandom #1: sindresorhus/ua-string
published: true
tags: weeklyrandom, learning, github, javascript
canonical_url: https://nikol.as/blog/2018/11/sindresorhus-ua-string/
---

_Welcome to [**WeeklyRandom**](https://dev.to/t/weeklyrandom), a blog series in which I challenge myself to explore a random GitHub repository starred by me every week._

The entry for week 1 should have been published last week, but ~~life~~ [Red Dead Redemption 2](https://en.wikipedia.org/wiki/Red_Dead_Redemption_2) thwarted my plans. 🤠

Never mind! Let's find out which repo I can explore this week.

🥁

```
node index.js vintagesucks
https://github.com/sindresorhus/ua-string
```

[ua-string](https://github.com/sindresorhus/ua-string) by [Sindre Sorhus](https://github.com/sindresorhus). This shouldn't take long. The description of the repo is as follows:

> Get the user agent of a recent Chrome version to pretend to be a browser in network requests

Okay. Let's try a request to [whatismybrowser.com](https://www.whatismybrowser.com/) without `ua-string`:

```js
// index.js
const got = require('got');
const HTMLParser = require('fast-html-parser');

(async () => {
    try {
        got('https://developers.whatismybrowser.com/useragents/parse/?analyse-my-user-agent=yes')
        .then((res) =>
            HTMLParser.parse(res.body).querySelector('.useragent')
        )
        .then((result) =>
            console.log(result.childNodes[0].rawText)
        );
    } catch (error) {
        console.log(error.response.body);
    }
})();
```

Let's run it:

```
node index.js
got/9.2.2 (https://github.com/sindresorhus/got)
```

Since I used [`got`](https://github.com/sindresorhus/got) (created by [Sindre](https://github.com/sindresorhus), too 👋) to make the request, the reported user agent is `got`.

Let's try `ua-string` now.

```
npm install ua-string
```

The script, now using `ua-string`:

```js
const got = require('got');
const uaString = require('ua-string');
const HTMLParser = require('fast-html-parser');

(async () => {
    try {
        got('https://developers.whatismybrowser.com/useragents/parse/?analyse-my-user-agent=yes', {
            headers: {
                'user-agent': uaString
            }
        })
        .then((res) =>
            HTMLParser.parse(res.body).querySelector('.useragent')
        )
        .then((result) =>
            console.log(result.childNodes[0].rawText)
        );
    } catch (error) {
        console.log(error.response.body);
    }
})();
```

Here we go:

```
node index.js
Mozilla/5.0 (Macintosh; Intel Mac OS X 10\_13\_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36
```

Perfect. 🎉

You can find the complete code on GitHub at [vintagesucks/weeklyrandom](https://github.com/vintagesucks/weeklyrandom/tree/master/sindresorhus/ua-string). Pull requests with improvements are very welcome!

Until next week, when I'll check out my next [_WeeklyRandom_](https://dev.to/t/weeklyrandom) repository.
Best youtube channels for Ethereum Dapp Developers
Tags: solidity, dapp, ethereum, youtube
Published: 2018-11-03 12:40:38

---
title: Best youtube channels for Ethereum Dapp Developers
published: true
description: Video review of youtube channels for learn Ethereum Dapps & Solidity
tags: Solidity, Dapp, Ethereum, Youtube
---

I have just released a video review of the best youtube channels for Ethereum Dapp Developers

8 channels reviewed total. For each channel I reviewed:

* content quality
* video quality
* frequency

Video: https://youtu.be/Y9TIwl9KtyI
Post: https://eattheblocks.com/best-youtube-channels-to-learn-ethereum-dapp-development/
Minimalist browsing with Min browser
Tags: discuss
Published: 2018-11-03 12:15:18

---
title: Minimalist browsing with Min browser
published: true
description: Minimalist browsing with min browser
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rf1slru9u7ifmkw55isq.png
---
I was searching around for extensions to make the Chrome interface a little minimalist when I came across [this](https://minbrowser.github.io/min/) browser. I've only been using it for about an hour, and honestly, I think I'm keeping it as my primary browser. I love it.

Have any of you guys used it before?
Making the switch from laptop to desk
Tags: mac, discuss
Published: 2018-11-03 11:53:56

---
title: Making the switch from laptop to desk
published: true
description: Out with the book, in with the mini?
tags: mac,discuss
---

In light of the new affordable Mac Mini 2018's, and the extra bonus of it being user-upgradable in terms of RAM, I've already got a NAS with tons of storage available so 128G SSD is effectively a boot drive.

It's affordable for a base model with 16G RAM, throw in some SO-DIMMs to make it 32G, it's now a small tank. I currently run a MBP 2015 13inch - it's nice, but the ports broke and a logicboard replacement is $800 - just shy of the price of a new Mini.

## My gameplan

1. Ditch the MBP 2015 13' in favour of Mac Mini 2018 with 16G/128G
2. When I'm "on the go" and want to sit at my relaxing lazyboy chair, have a bluetooth external monitor, with a bluetooth keyboard/mouse - take a tiny hit in terms of latency (not major due to distance), but get the portability I desire - I work exclusively in my office at my desk even with a MBP, and never tend to take it anywhere far, so I'm not taking a big hit using a Mini - it fits my lifestyle accurately
3. Use the thunderbolt 3 ports to connect two more monitors (2x4K) on top of my existing 4K monitor, to make 3 4K monitors

**What's your gameplan if you were to make the switch?**
#codevember - 2 - Time
Tags: codevember, showdev
Published: 2018-11-03 09:21:39

---
title: #codevember - 2 - Time
published: true
tags: codevember, showdev
canonical_url: https://nikol.as/blog/2018/11/codevember-2-time/
---

{% codepen https://codepen.io/vintagesucks/pen/XyrOXM %}
#codevember - 1 - Infinity
Tags: codevember, showdev
Published: 2018-11-03 09:20:29

---
title: #codevember - 1 - Infinity
published: true
tags: codevember, showdev
canonical_url: https://nikol.as/blog/2018/11/codevember-1-infinity/
---

Something simple, since I didn't start this until November 2nd.
{% codepen https://codepen.io/vintagesucks/pen/QJLJPx %}
(question) Is learning design modeling a waste of time for website builders?
Tags: generalwebdev
Published: 2018-11-03 08:10:55

---
title: (question) Is learning design modeling a waste of time for website builders?
published: true
description: 
tags: general-web-dev
---

Hello. I have a question about website design. I am a self-taught programmer and I have a large website in my head, now I wonder if you're about to create a large website like stackoverflow(of course creating it once again sounds pointless. I'm just using it as an example) does the process consist of heavy design steps as in for example designing a desktop software? I'm not very familiar with PHP but I know OOP in other languages and some design patterns, however, I've never grown the backbone to go through the learning of  "whiteboard/paper/diagram design modeling". Books like object design from Rebecca Wirlf or Code Complete and etc are out there and everyone suggests them. But I want to do only something that helps me toward my goal and not a blind waste of time. So I need to know whether reading one of these books will specifically help me toward my goal OR (sorry if this is harsh) website design is a **solved problem** for programmers, easier and less innovative than other software designs, and needs much less design modeling. I don't want to be carried away and try to learn something that takes much time but has little to do with my goal. But if I know it's worth it I'll definitely take the time. Thanks for your help.
Setup your own kubernetes cluster on VMs
Tags: kubernetes, kubeadm
Published: 2018-11-03 07:03:04

---
title: Setup your own kubernetes cluster on VMs
published: true
description: How to setup kubernetes cluster on VMs using kubeadm tool
tags: #kubernetes,#kubeadm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j2t59pb8entw8rsdploa.jpg
---

My requirement is that I want a server I can can play around. I tried Docker with Jenkins CD and it was awesome. Then Docker swarm and Kubernetes came so I wanted to upgrade my Docker environment to a cluster. The problem is that I've got only a PC and I don't want to pay for my playground environment. Then I found that I can achieve this using a tool named kubeadm and some virtual machines. I would like to share my environment and how to set it up as well as my record for steps I used.

I divided the steps into a series of posts so it's easy and concise enough to follow.

**Requirement**
- A kubernetes cluster based on kubeadm
- Support dynamic storage provisioning based on NFS
- Support Ingress with automatically acquire let's encrypt certificate
- Be able to deploy application using Jenkin CD pipeline for both backend and frontend

You can follow each step in each post below.

**Setup detail:**
1. [Prepare Virtual Machine using Virtualbox and Ubuntu](https://dev.to/pongsatt/prepare-virtual-machine-using-virtualbox-and-ubuntu-558j)
2. [Setup kubernetes cluster using kubeadm (1 master 3 nodes)](https://dev.to/pongsatt/setup-kubernetes-cluster-using-kubeadm-hpb)
3. [Setup dynamic storage class provisioner based on NFS](https://dev.to/pongsatt/setup-dynamic-storage-class-provisioner-based-on-nfs-1d4i)
4. [Setup nginx ingress and cert-manager to automatically apply letsencrypt certificate](https://dev.to/pongsatt/set-up-nginx-ingress-with-letsencrypt-certificate-on-vms-or-bare-metal-kubernetes-cluster-j25)
5. [Deploy static front-end application to kubernetes cluster using Jenkins CD and minio with automatic https cert](https://dev.to/pongsatt/deploy-static-front-end-application-to-kubernetes-cluster-using-jenkins-cd-and-minio-with-automatic-https-cert-44gk)
6. [Deploy back-end api application with database to the kubernetes cluster with Jenkins CD](https://dev.to/pongsatt/deploy-back-end-api-application-with-database-to-the-kubernetes-cluster-with-jenkins-cd-51j7)
Images not showing up using PDFKit and WkHTMLtoPDF
Published: 2018-11-03 06:43:57

---
title: Images not showing up using PDFKit and WkHTMLtoPDF
published: true
description: An elegant solution to images not loading in your generated PDF's
cover_image: https://thepracticaldev.s3.amazonaws.com/i/n2iau40umpa8k2f5ibw2.jpeg
---

Photo cred: [Brigitta Schneiter](https://unsplash.com/@brisch27)

#### Assumptions:

- you use WkHTMLtoPDF on your app to generate PDF documents
- you are piping in images (via URL) to a pregenerated HTML template

## The Problem:

- The way that WkhtmltoPFf Opens assets on a generated PDF document is for the most part under the hood. a black box so to say.
- This can cause issues of Images not appearing in your generated PDF documents if they are not stored locally on the server.

## The Solution:

1.  Download image manually
2.  Convert image to base64 string
3.  Manually insert into HTML template.

### Our setup:

- we are using a ruby on rails backend , loading the PDF Kit gem
- Our front end is uploading images and sending them to our RAILS API to generate the HTML document
- Our controllers use the uploaded images to generate the HTML document that gets fed into PDF Kit

Helper in controller:
`doc_helper.rb`

```ruby
def generate_html_template(image_url)

	"<!DOCTYPE html>
	<html>
		<head>
		</head>
		<body>
		... some html template
		<img src='#{image_url}'/>
		</body>
	</html>
	"
end
```

This helper creates a temporary HTML document, and I can feed this into PDF KIT

There are ton of different ways to do this, but to illustrate a point ill do it this way.

**Our issue was that the the image url that we were sending into this was coming from a protected AWS s3 bucket, on top of that it had a cloud front signature that was causing all sorts of problems for us. WkHTMLtoPDF was not able to render the image when it was parsing the html**

### How we solved it:

`application.rb`

```ruby
require 'rails/all'
require 'base64'
```

`doc_helper.rb`

```ruby
def download_image(url)
	return 'data:image/png;base64,' + Base64.encode64(open(url) { |io| io.read })
end

def generate_html_template(image_url)

	"<!DOCTYPE html>
	<html>
		<head>
		</head>
		<body>
		... some html template
		<img src='#{download_image(image_url)}'/>
		</body>
	</html>
	"
end

# credit: https://stackoverflow.com/questions/1547008/how-to-encode-media-in-base64-given-url-in-ruby
```

In the same line we use `open()` to read the file on our rails file, and then we convert is using the Base64 module.

After this we just inject it back into the template, this way WKHTMLtoPDF doesnt have to open the file from a source, it just reads it as a Base64 string!

### Let me know if you have any issues implementing this fix!
Achieve Greatness by Striving for Quality
Tags: ux, webdevs, introduction
Published: 2018-11-03 06:19:32

---
title: Achieve Greatness by Striving for Quality
published: true
description: The importance of striving for quality, how building usable software gets us there, and why that helps us become greater developers. 
tags: ux, webdevs, introduction
canonical_url: https://technicallyux.com/posts/striving-for-quality/
cover_image: https://technicallyux.com/static/share.png
---

Building effective and resilient software is hard. Building software that is a joy to use is **even harder**. Software developers and their teams manage a number of goals and often struggle with meeting them, whether it's business goals, making deadline/budget, finding the right talent, avoiding technical debt, etc. 

All of those goals are important, but none of them trump **creating usable software**. Being usable is simply the lowest bar. Any lower and the product will simply fail. Does your app annoy people? Do users have to trudge through mud to do even the simplest of tasks? Questions like this can lead us to great reward, if we would only spend the time it takes to resolve the problems uncovered.

Developers seem to have a blind-spot and a particular endurance for clunky experiences. We understand what it took to make. Even a few mis-steps can lead us down a path where our app becomes frustrating to even look at. And while we can have sympathy towards others who build software, **we cannot expect sympathy from our users**. They deserve better and shouldn't be burdened with our struggle. We've got to be better than that. Especially for developers just getting into the field, we have to give them principles to uphold and an image to strive for. We have to show them what it takes and what it really means to do development well. 

True quality can only be achieved by deep understanding and collaboration with our colleagues outside of development, but we need to control how we work and be firm with our principles. **This is what it takes to create truly gratifying software.**


## Technically UX

To help developers strive towards this goal, I'm starting a weekly newsletter, [**Technically UX**](https://technicallyux.com). We will be discussing what it takes to build better, usable software and introduce a new topic called technical UX. Technical UX is a whole class of problems that fall under developers' responsibility that range from foundational issues like poorly performing architecture, all the way up to final polish issues like optimizing animations. It's part of what separates the good developers from the great and often part of the reason why we fail at making usable experiences.

If you want to learn more, check out the [first newsletter that just launched on performance](https://technicallyux.com/posts/intro-to-technical-ux:-part-1-performance/)!
Auto Detect Environment in Google AppEngine
Tags: appengine, programming, googlecloud, java
Published: 2018-11-03 05:15:32

---
title: Auto Detect Environment in Google AppEngine
published: true
description: 
tags: appengine,programming,googlecloud,java
---

If you were working in a product which is in production or potentially gets to production, then for sure you will be having other environments like Staging, Alpha (and Development of-course) to test your code before deploying it to production

And for each of these environments, you need to set up different Credentials, Configurations and other properties, etc… Eg: ApiKeys, API URLs etc.

[Read on](https://medium.com/@rameshlingappa/auto-detect-app-mode-in-google-appengine-fd7749b100c3)
Where are you Mexicans?
Tags: meeting, mexico, group
Published: 2018-11-03 03:57:28

---
title: Where are you Mexicans?
published: true
description: 
tags: meeting, Mexico, group
---
Happy Día de Muertos to everybody! Today in Mexico we celebrate those who are no longer with us come to say hi and eat their favorite meals. 

It’s a beautiful tradition that we have here and I was wondering if there’s a lot of Mexicans in the DEV community. I think it would be awesome to know each other and have a meetup or something to talk about technology and the DEV environment like friends. 
I don’t know, just an idea, so everyone who’s living in Mexico raise your hand! (Or today your death’s bread) and say if you would like to have a group on DEV.to and organize a meetup!

¡Vamos por una chela y a hablar de la vida como devs!

Hugs&HuskyLove
Episode 2: Building a JSON API with express - Models and MongoDB
Tags: javascript, mongodb, docker, node
Published: 2018-11-03 02:39:47

---
title: Episode 2: Building a JSON API with express - Models and MongoDB
published: true
description: Episode two of a video series covering the start to finish of building an application with express.js using docker, and mongoose.
tags: javascript, mongodb, docker, nodejs
series: building-a-json-api-with-express
cover_image: https://thepracticaldev.s3.amazonaws.com/i/en24i2p7ytisdgyivrw6.png
---
**EDIT**: Had to re-upload, sorry about that.

{% youtube vjKJfyFBIlU %} 


If you haven't, go back and see part one before diving into this. As always, questions, comments and feedback are more than welcome.

{% github NathanBland/core %}