teleren/devto huggingface dataset:
Solving my own needs with code
Tags: coding, needs, sideprojects, learning
Published: 2018-10-25 20:58:34

---
title: Solving my own needs with code
published: true
tags: coding, needs, sideprojects, learning
canonical_url: https://davidllop.com/solving-my-own-needs-with-code
---


I remember joining the web development studies as a way to craft something with computers, something that 
is used worldwide daily. Some of my friends were telling me to join native programming or mobile apps, as 
I'd be able to build apps for myself, if needed. And I remember thinking:

> I can do things for myself on the web, can't I?

I started web development because I liked it back in 2012, I knew that even before writing a single line of code. 
I'm happy with my current job and I'm working on some side projects at home too. Sometimes I do it to be on the edge checking out new frameworks, features, packages... But most of the time when I write code at home it's for my own use. Don't get me wrong, I also try to help other people with those projects if it's possible.

My biggest project which paid off, without any doubt, is a [chatbot I use everyday to know if I'll find a bike in the city bike system I live, in Girona](https://github.com/Lloople/bot-girocleta). I was tired of waking up, walking to the bikes station, realising there's not a single one available for me and walking back to the next station, which is not on the same route.

This bot is used by 5 other users and is open to everyone who wants to use it. I'm thinking about talking about it with more people and users I could find on the stations getting a bike.

I also developed a [chatbot for getting control about your debts with friends](https://github.com/Lloople/bot-mr-debts). 
You only need to add it to the chat group you have with your friends and say `@friend owes me 100` or `I owe 100 to @friend`. The idea came when we wanted to register our debts but couldn't decide which app to use that 
works for both Android and iOS. We ended up finding an app, but I decided to build this chatbot anyways as an exercise 
for myself.

Some years ago, I built my own CMS (like a lot of people out there) as an experiment, and it resulted in a pretty neat tool I used to build a few websites with it and even gain some money.

I already mentioned this at the end of [this previous post](https://davidllop.com/creating-a-chatbot-with-botman), but Matt Stauffer gave a talk at Laracon Online 2018 about this topic which I found pretty interesting and it encouraged me to continue doing this, for the major good and my own.
Starting to feel like a proper UI framework
Tags: go, webassembly, webdev, devlog
Published: 2018-10-11 22:18:44

---
title: Starting to feel like a proper UI framework
published: true
description: Added slots to vtemplate, reorganized the demo app to support HTML files alongside Go files, and improved the dev server.
tags: Go, WebAssembly, webdev, devlog
---

First of all, yesterday off stream I added slot support to vtemplate. I'll show that in the demo. This morning I started pushing this more into the direction of an actual web UI framework. The main thing I wanted to accomplish was letting you define HTML templates in a file next to your Go component. This also involved setting up asset compilation since they'd need to be accessible from within the WebAssembly binary. 

I used [vfsgen](https://github.com/shurcooL/vfsgen) which lets you define an `http.FileSystem` variable that it uses to then generate a replacement file that gives you a variable that returns the same data, but from compressed data in-memory. This involved some experimentation to get right, but I like the system I ended up with.

I also wanted to simplify how Go components reference their template data, so I made a helper that looks at the filename of where it was called from and then looks for a template with the same filename but with `.html` extension. 

The render helper still hardcodes the directives and evaluator, but at least looks up components and custom elements from a registry. You just register your components in `init()`. 

Lastly I updated the dev server since now it needs to watch for HTML files. I updated the HTML that bootstraps the page to just reload the WebAssembly instance instead of the whole page. This gives it more of that hot reload feel, even though it's still reloading the entire app. 

What next? I guess the dev server could use some more work, but then I might be ready to try building a real app with this. 


{% youtube w2shFCUdnos %}
Hacktoberfest is here, let's do OSS
Tags: github, hacktoberfest
Published: 2018-10-12 14:21:24

---
title: Hacktoberfest is here, let's do OSS
published: true
tags: GitHub,Hacktoberfest
canonical_url: https://miguelpiedrafita.com/hacktoberfest-2018/
cover_image: https://miguelpiedrafita.com/content/images/2018/10/Hacktoberfest_2018_editable_poster2_2134x1068.png
---
_Originally published on [my blog](https://miguelpiedrafita.com/hacktoberfest-2018/)_

In case you didn't know, October is the month of open source. Why? DigitalOcean organizes [Hacktoberfest](https://hacktoberfest.digitalocean.com), a program where you contribute to open-source and get a super-cool shirt (and some stickers) in return.

But it isn't just DigitalOcean. Multiple organizations will also give you swag if you contribute to their repositories on Hacktoberfest. Here's a complete list of all promotions:

- Official Hacktoberfest - Register on [the website](https://hacktoberfest.digitalocean.com), make 5 PRs to any repository, get swag. [Reference](https://hacktoberfest.digitalocean.com/)
- Auth0 - Make a Pull Request to an Auth0 repository, fill [this form](https://goo.gl/forms/sNo604XkIMhCX8i03) and get swag. [Reference](https://auth0.com/blog/celebrate-hacktoberfest-with-auth0/)
- Microsoft - Make a Pull Request to a [Microsoft repository](https://opensource.microsoft.com/), fill [this form](https://aka.ms/hacktoberfestshirt) and get an exclusive shirt. [Reference](https://open.microsoft.com/2018/09/30/join-hacktoberfest-2018-celebration-microsoft/)
- SendGrid - Make a Pull Request to a SendGrid repository, get an exclusive shirt. [Reference](https://sendgrid.com/blog/hacktoberfest-2018-has-arrived/)
- Nexmo - Make a Pull Request to a Nexmo repository, fill [this form](https://goo.gl/forms/QCH6QEUQLZ47dweT2) and get a shirt. [Reference](https://www.nexmo.com/blog/2018/10/09/join-nextoberfest-tis-the-season-to-be-hacking-dr/)
- OpenEBS - Make a Pull Request to OpenEBS, and you'll get a shirt if it gets merged. [Reference](https://blog.openebs.io/celebrate-hacktoberfest-2018-with-openebs-206daa1d653c)
- Umbraco - Make a Pull Request, and if it gets pulled in you get some swag. [Reference](https://umbraco.com/blog/happy-hacktoberfest/)
- Hasura - Make a Pull Request to [graphql-engine](https://github.com/hasura/graphql-engine), get some stickers and optionally a shirt. [Reference](https://blog.hasura.io/announcing-hacktoberfest-2018-with-hasura-621045dc9560)

So, go ahead and participate. You don't even need to know how to code, in most cases fixing a typo in the documentation or adding examples to a README will be enough to get you some nice stickers.

Have fun, and happy Hacktoberfest!

_Liked this article? Consider [supporting me on Patreon](https://miguelpiedrafita.com/patreon). [Learn more](https://miguelpiedrafita.com/patreon)._
How to enable HTTPS with acme-client
Tags: openbsd, httpd, privacy
Published: 2018-10-14 13:02:04

---
title: How to enable HTTPS with acme-client
published: true
tags: OpenBSD, httpd, privacy
canonical_url: https://wildauer.io/acme-client-openbsd/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zuv9l8hfkb5kthuf5vml.png
---

Populate `/etc/acme-client.conf` and replace _example.com_ with your domain

```
authority letsencrypt {
  api url "https://acme-v01.api.letsencrypt.org/directory"
  account key "/etc/acme/letsencrypt-privkey.pem"
}
authority letsencrypt-staging {
  api url "https://acme-staging.api.letsencrypt.org/directory"
  account key "/etc/acme/letsencrypt-staging-privkey.pem"
}
domain example.com {
  alternative names { example.com }
  domain key "/etc/ssl/private/example.com.key"
  domain certificate "/etc/ssl/example.com.crt"
  domain full chain certificate "/etc/ssl/example.com.pem"
  sign with letsencrypt
}

```

Create directories

```
mkdir -p -m 700 /etc/acme
mkdir -p -m 700 /etc/ssl/acme/private
mkdir -p -m 755 /var/www/acme
```

Populate `/etc/httpd.conf`

```
server "example.com" {
  listen on * port 80
  root "/htdocs/example.com"
  location "/.well-known/acme-challenge/*" {
    root { "/acme", strip 2 }
  }
}

```

Check the configuration and restart httpd

```
httpd -n
```

When everything looks ok, restart httpd

```
rcctl restart httpd
```

Run the acme-client

```
acme-client -vAD example.com

```

Now enable HTTPS and restart httpd

Populate `/etc/httpd.conf` and add a new server section for HTTPS

```
server "example.com" {
  listen on * tls port 443
  root "/htdocs/example.com"
  tls {
    certificate "/etc/ssl/example.com.pem"
    key "/etc/ssl/private/example.com.key"
  }
  location "/.well-known/acme-challenge/*" {
    root { "/acme", strip 2 }
  }
}

```

Check the configuration and restart httpd

```
httpd -n
```

and

```
rcctl restart httpd
```

Now you should reach your website over HTTPS
HTML Comes to minitest_lucid
Tags: ruby, testing
Published: 2018-10-11 21:24:45

---
title: HTML Comes to minitest_lucid
published: true
description: 
tags: ruby, testing
---

As I've written before, I've been considering adding HTML output to [minitest_lucid](https://rubygems.org/gems/minitest_lucid), to take advantage of links and color in organizing the comparison.

I've started experimenting with <code>Set</code> because it's the simplest:

- Current [lucid text](https://github.com/BurdetteLamar/minitest_lucid/blob/master/markdown/readme/set/assert_equal/lucid.txt).
- Experimental [HTML](https://burdettelamar.github.io/minitest_lucid/markdown/readme/set/assert_equal/t.html#Missing%20(Expected%20-%20Actual)).

As before, this matters little if you're comparing small objects.  But picture this output for, say, a thousand items.

The far more complex case will be <code>Array</code>, which is still to come.

And yes, it's true that I had not expected this to be so complicated, but "In for a penny, in for a pound."
Yasminuroban – Sokoban game in JavaScript (March 2006)
Tags: game, puzzle, gamedev, javascript
Published: 2018-10-11 20:54:39

---
title: Yasminuroban – Sokoban game in JavaScript (March 2006)
published: true
tags: game,puzzle,gamedev,javascript
canonical_url: 
---

“Yasminuroban” is an open source [Sokoban (aka Warehouse keeper)](https://en.wikipedia.org/wiki/Sokoban) version totally written in DHTML (HTML, CSS and JavaScript). With level editor.

![Screenshot](http://dhtmlgames.com/yasminuroban/yasminuroban.gif)

It is my fourth DHTML game and was made in early 2006.

The game includes a level editor and, as far as I know, it is the first level editor ever made using JavaScript. It allows you to modify the current level or create a new one to play it after you press the “Play map” option. You can also copy the generated JavaScript code which can be used to modify the game code by yourself, for example.

You can also change the game behaviour or add new levels easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet (with configurable skins or themes and with many sets of levels that the player can choose), including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X and others.

Play online in English: [http://yasminuroban.tuxfamily.org/yasminuroban\_english/](http://yasminuroban.tuxfamily.org/yasminuroban_english/)

Play online in English (mirror): [http://www.dhtmlgames.com/yasminuroban/yasminuroban\_english/](http://www.dhtmlgames.com/yasminuroban/yasminuroban_english/)

Play online in Spanish: [http://yasminuroban.tuxfamily.org/yasminuroban\_spanish/](http://yasminuroban.tuxfamily.org/yasminuroban_spanish/)

Play online in Spanish (mirror): [http://www.dhtmlgames.com/yasminuroban/yasminuroban\_spanish/](http://www.dhtmlgames.com/yasminuroban/yasminuroban_spanish/)

Official web site: [http://yasminuroban.tuxfamily.org/](http://yasminuroban.tuxfamily.org/) (mirror at [http://www.dhtmlgames.com/yasminuroban/](http://www.dhtmlgames.com/yasminuroban/)).

The repository can be found on GitHub: [https://github.com/jalbam/yasminuroban](https://github.com/jalbam/yasminuroban)
Superheroes of email marketing
Tags: campaignmonitor
Published: 2018-10-11 19:07:23

---
title: Superheroes of email marketing
published: yes
description: https://www.campaignmonitor.com/
tags: campaignmonitor
---

Welcome emails are the superheroes of email marketing. Sometimes they are underestimated, but welcome emails are extremely important for bloggers, companies and many others. In many ways, the success of your subsequent work with the e-mail largely depends on the first impressions. The welcome letter should encourage, be informative and clear.

What is the main purpose of welcome letters? 

It is important to understand that in the case of welcome letters, the statistics of opening and clicks are not so important. Of course, you will try to make your best so the message subject and its text will have the maximum effect. However, the real purpose of the welcome email is to push the user through your registration process (this is part of the user’s adaptation to the product). The next step, depending on the software you use, blog, store, etc. may include filling out a profile, downloading something, reading a document, or something else. Whatever your next step, a welcome email should encourage the user to take further action. The only statistics that are important here are the level of response. How many recipients did the step you asked them to take? Welcome emails can help you to gain loyal customers.

Check out [https://www.campaignmonitor.com/](https://www.campaignmonitor.com/) for more useful materials.
🎥 Angular Sessions - How does Angular bootstrap applications
Tags: angular, webdev, javascript
Published: 2018-10-11 19:05:08

---
title: 🎥 Angular Sessions - How does Angular bootstrap applications
published: true
description: Short Angular live coding session on topic of Angular application bootstraping
cover_image: https://thepracticaldev.s3.amazonaws.com/i/99c5fwccl51bvgt6nba5.jpg
tags: angular,webdev,javascript
---

This is a new format for me so please have mercy 😬😂

{% youtube axD9xuIdzkM %}
To remote or not to remote
Tags: discuss, career
Published: 2018-10-11 18:55:24

---
title: To remote or not to remote
published: true
description: I am not sure if it is just me, but I see more and more jobs labeled remote, that are only remote within a specific country (mostly the United States).
tags: 
- discuss
- career
---

I am not sure if it is just me, but I see more and more jobs labeled remote, that are only remote within a specific country (mostly the United States).

This term used to mean worldwide, at least I have interpreted it that way. 

Don't you think there should be a worldwide label instead of remote?
Quick CSS Quiz #4
Tags: challenge, css, quick, quiz
Published: 2018-10-11 18:52:52

---
title: Quick CSS Quiz #4
published: true
description: A quick CSS quiz, can be solved under 5 minutes.
tags: challenge, css, quick, quiz
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8941zcyuxxgs25yr9woy.jpg
series: quick css quiz
---

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.


## The problem:

```html
<div class="wrapper">
  <h1   id="header" class="is-red">Red text</h1>
  <span id="span"   class="is-blue">Blue text</span>
  <p    id="text"   class="is-green">Green text</p>
</div>
```

```css
#header.is-red {
  color: red;
}
span.is-blue {
  color: blue;
}
.is-green {
  color: green;
}

```

The previous code snippets, for three different HTML elements wrapped in a div `.wrapper`, each element has a different color as specified in the style snippet, if you added the following CSS code at the end of the stylesheet what will be the color for header, span, and paragraph elements?

```css
.wrapper :not(#happy) {
  color: black;
}
```

## Options:
* header is red, span is blue, and paragraph is green
* header is red, span is blue, and paragraph is black
* header is red, span is black, and paragraph is black
* all elements are black

## The answer:
you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.


---
---
---
---
---
<center>👇👇👇</center>
---
---
---
---
---

The correct answer is: **all elements are black**
If you wonder why this is the correct answer, please read the discussions below..
thef!#%: Channeling Your Misdirected Rage for Catharsis and Greater Productivity
Tags: productivity, unix, git, rage
Published: 2018-10-11 18:10:24

---
title: thef!#%: Channeling Your Misdirected Rage for Catharsis and Greater Productivity
published: true
description: git checkout amster, git psuh, puthon. Say the first word that comes into your head. Now type that word into your terminal.
tags: productivity, unix, git, rage
cover_image: https://thepracticaldev.s3.amazonaws.com/i/svxcr654jx2asdyoe9cs.jpeg
---


### Warning: if you don't partake in ~the swear words~, there will be a lot of them here and this tool probably isn't for you.

For those of us accustomed to receiving concerned looks from our co-workers: Welcome! Let me introduce you to my favorite command-line application - and a crucial part of my workflow and mental well-being - nvbn's [thefuck](https://github.com/nvbn/thefuck).

Once you set this bad boy up, you will never want for another article on "How to ease developer frustration with 5 simple breathing tips, a Lush face mask, and a spur-of-the-moment trip to Bali".

Because you know what? Fuck it! You're busy and you're angry. You didn't install with `sudo`. You tried to `checkout amster`. You didn't set an upstream branch yet. Your eyes widen, your lip curls up, you let that quick burst of air out your nose, and internally you're screaming "You know what the fuck I'm going to type next just fucking do it!!!"

And that is what thefuck was made for. You type the thing. It returns an error. You type `fuck`. It does the thing! And it feels fantastic.

Check out their [github](https://github.com/nvbn/thefuck) for installation instructions for your chosen rage machine.

It's set up for a lot the most common errors we see as devs, like git commands, docker, yarn, apt/pacman, etc., and adding extra rules for your particular platform is pretty easy if you know a little python. This won't insert your missing semicolon or undo that `git reset --hard`, however.

For those, we can still type `fuck`. and it will return:
`no fucks given`

Because you know what? Most of the time, it's our fucking fault, and we deal with this shit all the goddamn time.

Developers have the stereotype of being incredibly patient where others would quickly lose their cool. And that's good! But let's be honest, we're a bunch of fuckin' powder kegs and we need to vent more than we often give ourselves the space to.

There's a reason people use this nasty word. It's gross sounding, it's offensive, and you know what else? It's fucking cathartic!

I love you. Take care of yourself!
Ionic 4 Beta: What’s New and Building a Sample App
Tags: ionic, mobileapp, ionic4, mobiledev
Published: 2018-10-11 18:08:05

---
title: Ionic 4 Beta: What’s New and Building a Sample App
published: true
description: Learn what is coming next on Ionic 4 and start using it right now.
tags: #ionic #mobileapp #ionic4 #mobiledev
canonical_url: https://auth0.com/blog/ionic-4-beta-whats-new-and-building-a-sample-app/
---

In this article, you will learn about what's new in Ionic 4, changes in the existing features, how to migrate your Ionic 3 app to Ionic 4 app, and about using Ionic with Stencil and Capacitor. Finally, you will create a simple application using Ionic 4 to see the new version of this framework in action. 

[Read on 📱🔘](https://auth0.com/blog/ionic-4-beta-whats-new-and-building-a-sample-app/?utm_source=dev&utm_medium=sc&utm_campaign=ionic4beta)

![Ionic 4 Beta: What’s New and Building a Sample App](https://thepracticaldev.s3.amazonaws.com/i/ait0e77pje90qsc1lruc.png)
Dev.to Review #3: Top 7 Of The Week, Discussed
Tags: discuss, audio, bestofdev, popular
Published: 2018-10-11 17:23:30

---
title: Dev.to Review #3: Top 7 Of The Week, Discussed
published: true
description: User milkstarz and I discuss the top posts of the week
tags: discuss, audio, bestofdev, popular
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6rr7wyfb5s7q81jd3ymw.jpg
canonical_url: https://soundcloud.com/malikanddan/devto-review-episode-3
series: DEV.TO Review
---

[Malik](https://dev.to/milkstarz) and [I](https://dev.to/dangolant) got together to chat about the top 7 articles on dev.to for the week of 10/08/18.
{% soundcloud https://soundcloud.com/malikanddan/devto-review-episode-3 %}

If you want to read and hear more posts like this, follow us here on dev.to, or on Twitter at [@dangolant](https://www.twitter.com/dangolant) and [@milkstarz](https://www.twitter.com/milkstarz).

# The top 7 discussed this week were: 

{% link https://dev.to/aviaryan/why-you-should-do-competitive-programming-even-if-a-little-1hf8 %}

{% link https://dev.to/whokilledkevin/how-i-created-a-bot-that-talked-to-recruiters-for-me-54n5 %}

{% link https://dev.to/dansyuqri/how-i-used-google-cloud-platform-to-start-investing-in-stocks-34mb %}

{% link https://dev.to/stegriff/how-glitch-taught-me-the-nodejs-stack-2mcp %}

{% link https://dev.to/aershov24/5-salary-negotiation-rules-for-software-developers-get-20-on-top-of-your-market-rate-2jii %} 

{% link https://dev.to/tedhagos/if-i-knew-then-what-i-know-now-55pb %} 

{% link https://dev.to/philnash/rails-6-to-include-new-action-text-framework-hdo %}
Welcome Thread - v18
Tags: welcome
Published: 2018-10-11 16:52:05

---
title: Welcome Thread - v18
published: true
description: Introduce yourself to the community!
tags: welcome
---

Hey there! Welcome to dev.to!

![The many faces of computer users](https://media.giphy.com/media/fuQI0IYqADwfm/giphy.gif)

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment and say hello or ask them a question. 👋

3. Or answer this question: Do you prefer working remote or in an office?
Looking for Contributors and Sponsors for CVPM (Computer Vision Package Manager)
Tags: hacktoberfest, opensource
Published: 2018-10-11 15:54:01

---
title: Looking for Contributors and Sponsors for CVPM (Computer Vision Package Manager)
published: true
description: 
tags: hacktoberfest, opensource
---
Documents： https://cvpm.autoai.org/
GitHub: https://github.com/unarxiv/cvpm

中文介绍(Chinese Intro): https://zhuanlan.zhihu.com/p/45672318

CVPM (Computer Vision Package Manager) is an open source software to help developers download, install and run computer vision services. It is the 'pip' for computer vision.

Though it is still in a very early stage and not recommend for use in production (actually, I do not recommend you to try it now because it may contain unknown bugs), We'd like to invite adorable developers to join us. We have a roadmap draft as below:

* Complete the test cases and docs.

* Complete the Model Hub. (Prototype is at https://hub.autoai.org)

* Complete packages for some classic tasks as "Official Repo"

* Complete third party package upload.

As an open source software, I am really sorry that we cannot promise you anything. But the following is what I can do:

* We will have an Authors List for all the contributors.

* There will be logo banner and donors page at the bottom of our Model Hub for sponsors.

If you are interested, please contact me at xiaozhe.yaoi@gmail.com, or you can post a GitHub Issues.