teleren/devto huggingface dataset:
A full-stack solution for fast PWA development !
Tags: javascript, pwa, webdev, vue
Published: 2019-04-24 12:07:02

---
title: A full-stack solution for fast PWA development !
published: true
description: Presentation of a full-stack environment to quickly develop Progressive Web Apps
tags: javascript, PWA, webdev, Vuejs
---

![bento-starter](https://thepracticaldev.s3.amazonaws.com/i/ems8jjrgvtvi18m6rlrk.jpg)

Hi 👋,

If you’re interested in building Progressive Web Apps, I would like to share an open source project we've been working on for few months : **[bento-starter](https://bento-starter.netlify.com/)**

🍱bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support...

The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

As this project is a template project and not a CLI, you have access to the entire app configuration so you can change it according to your needs.

If you interested, fell free to take a look !

👉 Github [https://github.com/kefranabg/bento-starter](https://github.com/kefranabg/bento-starter)
 👉 Doc [https://bento-starter.netlify.com/](https://bento-starter.netlify.com/)

Please tweet me if you have questions ! [@FranckAbgrall](https://twitter.com/FranckAbgrall)

Hope it will help !
I can't believe it's WebAssembly!!!!
Tags: webassembly
Published: 2019-04-24 12:11:00

---
title: I can't believe it's WebAssembly!!!!
published: true
description: WebAssembly Package Manager is here, with WebAssembly's killer app: Nyancat coloring in your terminal!
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s6bn95vhjolcas2ay5qj.png
tags: webassembly
---

Sure, you saw the [WebAssembly Package Manager on Hacker News](https://news.ycombinator.com/item?id=19732794) today, but you might have missed the earth-shattering historical significance of it. 

"_Write once, run anywhere_" for Rust apps targeting WASM is *now a thing*.

"_But what can you do with it?_" I hear you ask.

"_Sure I can spin up an nginx server with it, but I can do that with Docker._"

Well, the world just changed, because with the lolcat WebAssembly package you can do this:

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

Listen closely, young Padawan, as I show you how to make this happen.

With [Wasmer](https://wasmer.io/) you can run universal WebAssembly binaries. With the [WebAssembly Package Manager](https://wapm.io/help/guide) you can install WebAssembly binaries from a central repository, akin to JavaScript's NPM.

And among the small number of WebAssembly packages available *right now* is [lolcat](https://wapm.io/package/lolcat) - which gives your boring text rainbows and unicorns!

One thing to know about the `wapm` command from the WebAssembly Package Manager: it doesn't currently have a `-g` flag like npm. This means all wasm package installs are local.

There is an [open feature request for it](https://github.com/wasmerio/wapm-cli/issues/60) (feel free to vote with a thumbs up on it), but in the meantime you can work around it.

Here is what you do:

1. Install the [wasmer](https://wasmer.io/) runtime (which includes the `wapm` package manager CLI).
2. Make a directory `~/.wapm`.
3. Add the following to your `~/.bashrc` (or `~/.zshrc` for zsh) file:
```
function wapmg() {
    pushd ~/.wapm
    wapm install $1
    popd
}

function lolcat() {
    cat $1 | wasmer run ~/.wapm/wapm_packages/_/lolcat@0.1.2/lolcat.wasm
}
```
4. Run `source ~/.bashrc` (or `source ~/.zshrc` for zsh)
5. Run `wapmg install lolcat`

Now you can use `lolcat` in place of the boring, old `cat` command, and get rainbows and unicorns in your terminal with WebAssembly.


*WELCOME TO THE FUTURE!*
Egghead Lesson: Simple caching with RxJS
Tags: angular, caching, video, rxjs
Published: 2019-04-24 11:40:14

---
title: Egghead Lesson: Simple caching with RxJS
published: true
description: Video session on how to implement simple caching using RxJS in Angular
tags: angular, caching, video, rxjs
canonical_url: https://juristr.com/blog/2018/11/videolesson-rxjs-caching-angular
---

_This is the accompanying article for my latest Egghead video lesson on caching data in Angular by leveraging RxjS._

Caching is hard, it's one of the hard topics in software development because so many things can go wrong. Even though some implementations are quite easily doable, the problem usually lies in when to invalidate the cache to not show stale data to the user and debugging issues (because you might run into your cache and not see what you'd actually expect). We've been all there, and still, often we need to cache data to improve the performance of our apps. Things I'm always considering there is...

- to delay the caching at the very latest moment. Try other optimizations before, and in case add in caching later
- consider server-side API level caching, whether that is response headers or cache servers like Redis. Note that the API is the single entry point where you have the best knowledge about data freshness.

Have 2 minutes? Head over to my site for the Egghead video lesson and a runnable Stackblitz. [Read more &raquo;](https://juristr.com/blog/2018/11/videolesson-rxjs-caching-angular/?utm_source=devto&utm_medium=crosspost)
[Swift CODE] URLify
Tags: thetealpickle, beginners, algorithms, swift
Published: 2019-04-24 11:12:56

---
title: [Swift CODE] URLify
published: true
description: Replace all spaces on a string with ‘%20’
tags: #thetealpickle #beginners #algorithms #swift
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tm540dsurl8m7xe9tykv.png
---

THE TEAL PICKLE CODING CHALLENGE!! Replace all spaces on a string with ‘%20'. I solved this problem with my lover, Swift. TRY IT 👀

<b>QUESTION:</b>
<img src="https://thepracticaldev.s3.amazonaws.com/i/ang4gg59fua4g2moen5e.png" />


<b>MY SOLUTION:</b>
<img src="https://thepracticaldev.s3.amazonaws.com/i/oncs30waivzfupef29ir.png" />
React-native issue in Development Mode
Published: 2019-04-24 10:31:27

---
title: "React-native issue in Development Mode"
published: true
description\:  
        
        OS- Ubuntu 18.04
        Environment
        ---------------------
        OS- Linux 4.15 Ubuntu 18.04
        Node- 10.15.3
        Yarn- 1.15.2
        npm- 6.9.0
        Watchman- 4.9.0
        compileSdkVersion- 28
        buildToolsVersion- 28.0.3

        Packages
        ----------------------------------
        react- ^16.4.2 => 16.4.2
        react-native- 0.55.4 => 0.55.4

Hello, I have created a project on react native and working from last 7-8 months, and everything was working fine. 2-3 days back I have upgraded my system to ubuntu 18.04 and started running same project in debugger mode, but its not working. App build is working fine, after that screen shows me loading from localhost\:8081 on splash screen. I have tried many things but unable to resolve the issue. Above are the concerned details. Please resolve this issue ASAP.
tags\: 
---
npm start create react app error
Tags: react
Published: 2019-04-24 09:42:49

---
title: npm start create react app error
published: true
description: Hello, I have been working with reactjs well and suddenly since yesterday I create a new application with create-react-app my-new-app and when I went to execute npm start pum that error attached capture https://ibb.co/qrN6YZ6 why can be that? I'll appreciate your help!
tags: reactjs, react
---
Which way of centering via Flex do you prefer?
Tags: css, flexbox, opinion, discuss
Published: 2019-04-24 09:31:30

Given you want to center an element horizontally. Which one would you prefer?

```css
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
```

or

```css
.parent {
  display: flex;
  justify-content: space-around;
}
```
0xcert Framework for building dapps launched on Product Hunt!
Tags: showdev, meta, webdev
Published: 2019-04-24 09:16:27

---
title: 0xcert Framework for building dapps launched on Product Hunt!
published: true
description: We'd love to see you support the free, open-source and blockchain-agnostic Framework for building dapps on the blockchain!
tags: #showdev #meta #bestofdev #webdev
---


Hi there, mighty devs!

We have just launched the 0xcert Framework for building dapps on Product Hunt! :rocket:

Why? Because we’re all about supporting the dev community and spreading the word and knowledge about dapp development. And because we believe every community has its potentials.

After all, you never know where the future dapp developers will find their inspiration.

So - we’ve onboarded a hunter to launch the Framework on Product Hunt, and here is your chance to show support and bring dapp development to the masses. :raised_hands:

How ever you show support - by upvoting, commenting, or reviewing the Framework - we’ll be more than grateful for the minute you devote to it.

To do that, please:
Go to producthunt.com
On the landing page, check the “Today” section and find “0xcert Framework” among the listed products
Click on it and show support in any way you prefer :blue_heart:

Without your extensive support, we wouldn’t have made it this far, and we definitely would like to push it even further.

We’re here for and because of fellow developers. A big thanks to all!
JS Comma Operator
Tags: javascript
Published: 2020-05-11 09:45:25

---
title: JS Comma Operator
published: true
date: 2019-04-24 07:46:00 UTC
tags: JavaScript
canonical_url: 
---

A mate at work asked me a question about checking things in JS. He had a case where if an object had a property he needed to check for 3 conditions, one of which was if the properties value matched a given value. If it didn't have the property then he needed just needed to check 2 conditions. He wasn't overly keen on wrapping the two conditions within a further if statement and asked if I knew of a way of combining them all into one if statement, I must admit I knew that there was one but I couldn't think of it for the life of me...

As in a particularly nasty case of athletes foot, it itched at me overnight, then I started to remember a rather obscure feature of JS which it seems it borrowed from C, the [Comma Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator). In order to check that it would do what he needed to do, I wrote this simple [JSFiddle](https://jsfiddle.net/annoyingmouse/gcf12trx/):

```javascript
let a;

if(true && true && a === 1, a){
  alert("First: a === 1");
}

a = 1;

if(true && true && a === 1, a){
  alert("Second: a === 1");
}
```
It's rather obscure though, so I'm a little concerned about using it with production code, as discussed on [StackOverflow](https://stackoverflow.com/questions/3561043/what-does-a-comma-do-in-javascript-expressions#comment-85813120).
Introducing Progressive Web User Interface 🎉
Tags: pwafire, pwa, web, ui
Published: 2019-04-24 07:27:31

---
title: Introducing Progressive Web User Interface 🎉
published: true
description: Progressive Web User Interface For Progressive Web Apps.
tags: pwafire, pwa, web, ui
---

We've had amazing stories so far with [Progressive Web Apps](https://pwafire.org) and that's just great. They work for every user, regardless of browser choice because they're built with progressive enhancement as a core principle.

## ✅ Progressive **Web in 360°** 

When thinking about Progressive Web Apps think of the entitre app cylce. From how *you deliver resources* at your backend to how *the pwa looks* like when the user interacts with it.

![](https://pwafire.org/images/codelabs/pwaui.png)

Users do not care about what actually is happening at the backend of your web app or just any app. What they see and how their goals are fullfilled on your web app is king!

Read more about **Progressive Web User Interface** and how we're working hard to tap into this at [pwafire.org](https://pwafire.org) in [this pwadev doc](https://pwafire.org/developer/docs/progressive-user-interface/)
dev.to Follow Challenge!
Tags: discuss, challenge
Published: 2019-04-24 07:16:02

---
title: dev.to Follow Challenge!
published: true
description: Follow Devs More Than You Get Followed Challenge!
tags: #discuss,#challenge
---

# Follow Challenge

I recently realized that I'm followed by **688** devs and I'm following only **103**!

I try to follow every developer who impresses me with their ideas.

So I decided to try to increase my following numbers by reading much more articles, where I am sure I am gonna find much more brilliant developers with brilliant ideas.

Would you do the same?
How to cut an mp3 file into multiple audios with bash and ffmpeg according to a timetable.
Tags: help, bash
Published: 2019-04-24 06:13:30

---
title: How to cut an mp3 file into multiple audios with bash and ffmpeg according to a timetable.
published: true
tags: help, bash
---

I have a timetable in a text file that looks like this:

00:05 - 00:54 Dédicace, À léon werth

00:54 - 01:37 Premier chapitre. Lorsque j'avais six ans

01:36 - 02:06 J'ai montré mon chef-d'œuvre

I'm trying to cut an mp3 file into multiple small ones according to this timetable, so the requirements are:
1. I want to do it with bash. I have learned how to do one file. But a timetable is out of my current bash skills.
2. The column with words serve as the names for files.
3. I would like the files to be enumerated like this:
01.Dédicace_À_léon_werth.mp3
02.Premierchapitre_Lorsque_j'avais_six_ans.mp3

And so on.
Do you really want to be more productive?
Tags: productivity, career, agile, tips
Published: 2019-04-24 06:00:49

---
title: Do you really want to be more productive?
published: true
description: the ultimate tips and hints for more productivity
tags: #productivity, #career, #agile, #tips
---

![how to be more productive](https://media.giphy.com/media/pVl9AZ4Xywb2o/giphy.gif)

> Stop reading articles about being more productive 
 Go back to the stuff that is important and get shit done! 

---

If I count all the time ~~spent~~ wasted reading articles about productivity I would realize I could have completed at least 2 pet projects...  
But they are so interesting, so inspiring - and they make us believe we are or we will become soon super efficient. ([10x developer](https://dev.to/dvddpl/what-makes-a-10x-developer--1k0f) anyone?).
Truth is that multitasking is a lie. [Distractions](https://dev.to/dvddpl/s-o-s-you-might-suffer-from-f-o-m-o-about-fear-of-missing-out-and-shiny-object-syndrome-23j4) are all over the place. And what we need is just a little bit of method and discipline:

* **Prioritize** with [Trello](https://trello.com) (or any other similar tool).
* Use *Kanban* method, - limit the work in progress. always work on an available task from the rightest column ( excluding the "Done" - of course) and when it's completed shift something from first the column on left from the empty one.
* **Avoid interruptions** until [Pomodoro timer](https://chrome.google.com/webstore/detail/tomato-timer/hffgokcnajmdbklfcbdiopgnbjlpemmk) is over.

Isn't that just that simple? 
(no. it's not. but I always try hard)
What is your favorite flowcharts/diagramming tools. 
Tags: discuss
Published: 2019-04-24 03:34:38

---
title: What is your favorite flowcharts/diagramming tools. 
published: true
description: 
tags: discuss
---

A lot of times, we need to create a flow diagram to integrate two or more APIs/Systems/Interfaces or describe certain processes. Sometimes it could be internal or we need to share with a third party. 

What tool do you prefer or recommend? 

Feel free to recommend one due to different characteristics: friendly interface, beautiful icons, being minimalistic, etc.

My list:
- [Balsamiq](https://balsamiq.com/) More for wireframes but it is pretty 
- [draw.io](https://www.draw.io/) Pros: It has a lot of templates and types, it has good integration with google drive. Cons: it would be nice to have prettier icons and a better shared-comments system. 
- [Lucidchard](https://www.lucidchart.com) I just started to use it, it seems pretty nice, it has a basic free version. 

Complete list including recommendations from comments: 
- StarUml
- [Balsamiq](https://balsamiq.com/) 
- [draw.io](https://www.draw.io/) 
- [Lucidchard](https://www.lucidchart.com)
- [whimsical.co](https://whimsical.co/)
- [code2flow](https://code2flow.com/)
- PlantUML
Designing Continuous Build Systems
Tags: python, ci, engineering, continuousdelivery
Published: 2019-07-05 03:37:36

---
title: Designing Continuous Build Systems
published: true
tags: python, continuous integration, engineering, continuous delivery
canonical_url: https://tryexceptpass.org/article/continuous-builds-1/
cover_image: https://tryexceptpass.org/images/continuous-builds.jpg
---

Continuous integration and delivery is finally becoming a common goal for teams of all sizes. After building a couple of these systems at small and medium scales, I wanted to write down ideas, design choices and lessons learned. This post is the first in a series that explores the design of a custom build system created around common development workflows, using off-the-shelf components where possible. You’ll get an understanding of the basic components, how they interact, and maybe an open source project with example code from which to start your own.

[Read on ...](https://tryexceptpass.org/article/continuous-builds-1/)
Refactor Go Package by Using gomvpkg
Tags: go
Published: 2019-04-24 02:08:44

---
title: Refactor Go Package by Using gomvpkg
published: true
description: 
tags: go
---

![Gopher](https://thepracticaldev.s3.amazonaws.com/i/5nla674c0iyppohfafus.jpeg)
<figcaption>https://blog.golang.org/gopher</figcaption>

Go provides a lot of tools to help Go developers. They help Go developers to be productive when they are trying to solve their problems with Go. You can see the list of tools at [https://godoc.org/golang.org/x/tools](https://godoc.org/golang.org/x/tools)

---

I've seen many developers that moved from other technology stacks (Java Spring, Ruby on Rails, etc.) use the previous project structure from those to Go project. Layer-based is the one example (controller, model, service, common, util, repository, etc.). In Go, mostly, we will not do that. When we design a Go package (structure), we think about what it provides, not what it contains. And how we use them. You can read my blog about [Go Package (Structure) Design](https://dev.to/ballweera/go-package-structure-design-b0m)

As you may know, it is painful when you are trying to refactor legacy Go package. Especially, packages like common, util, base. Because it has been used around the project (other packages use them by importing). If you refactor those packages, you need to put a lot of effort to change the import path in every derived package.

Actually, there is a Go tool for this situation. It is **gomvpkg**.[https://godoc.org/golang.org/x/tools/cmd/gomvpkg](https://godoc.org/golang.org/x/tools/cmd/gomvpkg)

I'm going to show you how to refactor legacy Go package by using `gomvpkg`. We have the package `common/consumer`.

{% gist https://gist.github.com/ballweera/4d97dc31dcaf79e0b97a2e73248df1b1 %}

You can see that `github.com/ballweera/play-gomvpkg/common/consumer` has been used in only two places (`event.go` and `main.go`). But in a large program, it may be used more than 10 or 20 times. So it is a bit difficult to refactor and take time to refactor them.

By using `gomvpkg`, we can execute only one command to change from `github.com/ballweera/play-gomvpkg/common/consumer` to `github.com/ballweera/play-gomvpkg/kafka`

{% gist https://gist.github.com/ballweera/59480a5eb2c08cc2949007c44ab6bf8d %}

After executing `gomvpkg`, you would see the result like this

![](https://cdn-images-1.medium.com/max/1600/1*yf8Hj9B1HDlZupv52416ug.png)

{% gist https://gist.github.com/ballweera/1b5ffc0b5312bbbdc1361846277ffce6 %}

Now, in `event.go` and `main.go`, the import path is changed to `github.com/ballweera/play-gomvpkg/kafka`.

One thing you need to know about `gomvpkg`. It could not be run outside `GOPATH`. So you need to move your Go project to `GOPATH` before using it. And if you use `Go Module (go.mod)`, you also need to set `GO111MODULE=auto`.

I already created the repo to play the **gomvpkg** [https://github.com/ballweera/play-gomvpkg](https://github.com/ballweera/play-gomvpkg).

Have fun!!
Thank you, DigitalOcean! 
Tags: production, scaling
Published: 2019-04-23 16:04:08

---
title: Thank you, DigitalOcean! 
published: true
description: DO scales very well and is cheaper than AWS. 
tags: production,scaling
---

As my business launches SaaS products, we evaluated cloud provider options. Having previously used AWS and own hardware, I naturally went towards these options.

After discussion with colleagues, we decided to try digitalocean. It suited our budget and needs, we deployed a few droplets, a loud balancer, cloud firewalls, and hooked up our monitoring. 24 hours later we had a good environment to deploy production on. 

As we started scaling, digitalocean was able to scale with us. We then hit a road block - all our nodes ran out of space. That's when we dived into Spaces, which works perfectly for us. We setup a few spaces for test and production, and this allowed us to scale even faster.

Now, we rely on Digitalocean entirely in production.

Products used:

1. Managed Databases
2. Cloud Firewalls
3. About 25 droplets
4. Spaces (3 instances)
5. Load Balancers (2)
6. Volumes
7. VM Backups

Satisfaction: 100%

Cost VS AWS: We are saving almost 350$/mo with digitalocean compared to AWS. 

I would strongly recommend digitalocean to everyone!
Benchmarking Pihole : Pi Zero vs Pi 3b+
Tags: raspberrypi, go, devops, linux
Published: 2019-04-24 00:47:19

---
title: Benchmarking Pihole : Pi Zero vs Pi 3b+
published: true
description: 
tags: raspberrypi, go, devops,linux
---
[From Pi Hole Discourse](https://discourse.pi-hole.net/t/benchmarking-pihole-pi-zero-vs-pi-3b/19397)

Here's a benchmark comparing pi-hole running on a Pi Zero (with USB ethernet) vs a Pi 3b+.  

**tl;dr**  There was negligible performance difference for blocked domains, but a measurable difference in mean for forwarded + cacheable domains.  Although the Pi 3b+ has a 11ms better mean response time for forwarded queries, the P95 for pi zero is better in both blocked and forwarded queries. 

I would recommend using the Pi Zero.

## Hypothesis
Prior to the experiment, I assumed that the pi zero would be 30-50% slower in all cases, and that stddev would be larger (worse & more erratic latencies). 

## Hardware & Setup
Router: TP Link Archer C9
PI 3b+ : connected via 100mb ethernet into router, 32gb sandisk microsd card. Raspbian Desktop
Pi Zero-W : connected via usb ethernet adapter, 100mb ethernet into router, 8gb class-4 sd card. Raspbian Lite

## Method
I used [dnstrace](https://github.com/redsift/dnstrace) -- a go dns benchmark. 
Each test did 1000 queries with 10 concurrency ( `go run dnstrace.go -c 10 -s 192.168.0.201 -n 100 www.googletagservices.com` )

## Results
full histogram and results [can be found here](https://gist.github.com/tonymet/bfd85f8c09bb9cfc53e6592c59844658)

#### BLOCKED Domain www.doubleclick.net

**pi 3b+**
```
 min:		 16.252928ms
	 mean:		 38.372412ms
	 [+/-sd]:	 23.097544ms
	 max:		 385.875967ms
```

**pi zero**

```
DNS timings, 1000 datapoints
	 min:		 19.922944ms
	 mean:		 40.043544ms
	 [+/-sd]:	 7.762346ms
	 max:		 71.303167ms
```

#### FORWARDED domain www.amazon.com

**pi 3b+**
```
DNS timings, 997 datapoints
	 min:		 13.1072ms
	 mean:		 19.527493ms
	 [+/-sd]:	 12.101107ms
	 max:		 142.606335ms
```


**pi zero**
```
DNS timings, 999 datapoints
	 min:		 16.252928ms
	 mean:		 30.097752ms
	 [+/-sd]:	 5.005948ms
	 max:		 88.080383ms
```

## Summary and Findings
I believe the zero is an adequate replacement for the pi 3b+ . Moreover, I was impressed and shocked that stddev on the pi zero was lower than the 3b+.  So despite having worse mean forwarding response times, the P95 for pi zero is better in both blocked and forwarded queries. 

:star:  I'll leave these two devices online for a bit let me know if you'd like any further testing done. :star: