teleren/devto huggingface dataset:
Single webpage template for personal website
Tags: productivity, website, template
Published: 2018-10-13 03:17:56

---
title: Single webpage template for personal website
published: true
description: 
tags: productivity, website, template
---

Dear fellow hackers, 
I need your help. I am looking for a single page personal website template. At this point you must be thinking, "Sandi, why aren't you googling?". To answer that question and your curiosity, "Bro, I did that already!". The problem is, most of the templates are basically not meant for developers, engineers or hackers. They are meant for designers, artists or photographers with portfolios. The other set of people are the ones who post their resume. I don't belong to either of them. 

So, with my basic problem explained, I will not waste time on explaining why and define what I am looking for. Maybe many of you are looking for something like this and I want to help solve others problems too. 

1. A simple minimalist website with near zero animations.
2. Customizable 
3. Simple color scheme

Showcase the following sections: 
4a. About me
4b. My work and projects
4c. Ability to link to my Github/LinkedIn/Twitter
4d. A contact page

(Optional) Ability to generate this page on the fly. But a simple HTML will always work.

Maybe I asking for quite a bit, but, I think I am planning to cover use-cases others are looking for as well. Please forgive me if I missed some obvious source. 

Cheers
Programming Little Books
Tags: book, little, littlebook, short
Published: 2018-10-13 02:42:13

---
title: Programming Little Books
published: true
description: 
tags: book, little, LittleBook, short
---

## Written by others

* [Code Artistry Book](https://thedarkula.gitlab.io/code-artistry/book/) Rust
* [The Little Go Book](https://github.com/karlseguin/the-little-go-book/blob/master/en/go.md)
* [The Little Redis Book](http://openmymind.net/2012/1/23/The-Little-Redis-Book/)
* [The Little MongoDB Book](http://openmymind.net/2011/3/28/The-Little-MongoDB-Book/)
* [Joy of Elixir](https://joyofelixir.com/toc.html)

* [NodeSchool](https://nodeschool.io/) A good site for learning Node

### Front
* [Styling React Applications with Ant.Design](https://medium.com/@yoniweisbrod/styling-react-applications-with-ant-design-92b742aab0b0)


## Written by me

* [Rust Little Book 3 Days(v1.0)](https://www.yuque.com/progfun/rust/kyeuf7)
* [Ruby Little Book 3 Days(v1.0)](https://www.yuque.com/progfun/ruby/yagobo)
* [Rails Little Book 3 Days(v1.0)](https://www.yuque.com/progfun/ruby/rkhivu)

I'm a fans of Little book, if you know some good little books please tell me.

Hope to have some help for your learning.
How Not to Get Hacked Programming Blockchains
Tags: ethereum, cryptocurrency, blockchain
Published: 2018-10-13 02:22:56

---
title: How Not to Get Hacked Programming Blockchains
published: true
description: A short piece on a small part of development with Ethereum.
tags: Ethereum, cryptocurrency, blockchain
---

I'm Sean and I've been a developer for a little over a year. I'm a blockchain/crypto enthusiast and started programming in/around crypto in the strangest of ways....I GOT HACKED! 

Well, not exactly, more like I made a major not so smart mistake. I'll share my experience here so that you won't have to make the same mistake!

It all started when I took this course by Stephen Grider on Udemy: https://www.udemy.com/ethereum-and-solidity-the-complete-developers-guide/ 

I highly recommend it if you're interested in learning how to program smart contracts in Ethereum...it's a super fun course! 

Shortly thereafter, I went to start sandboxing some new apps I wanted to play around with. Well, if you know anything about about programming Ethereum applications that interact with the blockchain, you'll know that you have to provide a 12-word MNEMONIC which serves as your private key (basically your password to your Ethereum address that shows that you own the address). 

Little did I know that since I wasn't using any environment variables and my repo was public, my private key to my account would be open to all of GitHub! After doing a quick search on GitHub, an exposed user looks like this: 

![github query](https://thepracticaldev.s3.amazonaws.com/i/xkly696x8pe48jbue52u.jpg)

In short, somebody found my keys on GitHub, broke into my account, and stole my money!!!! Bad day for the wallet, Excellent day for learning! 

TAKEAWAY LESSON: 
1) Use environment variables when posting your private key data on GitHub
2) Use private repos when possible for additional safety
3) Use a command-line interface (like readline-sync: https://www.npmjs.com/package/readline-sync) to enter your private key data at runtime for ultimate safety 

Happy Programming!
What makes a remote job "junior friendly"? 🤔
Tags: discuss, remote, culture
Published: 2018-10-13 00:37:10

---
title: What makes a remote job "junior friendly"? 🤔
published: true
description: 
tags: discuss, remote, culture
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5btigp0dx70mk3svhuuy.jpeg
---
How to send and receive emails with OpenSMTPD
Tags: openbsd, opensmtpd
Published: 2018-10-14 14:35:02

---
title: How to send and receive emails with OpenSMTPD
published: true
tags: OpenBSD, OpenSMTPD
canonical_url: https://wildauer.io/opensmtpd-on-openbsd/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zuv9l8hfkb5kthuf5vml.png
---

Populate `/etc/mail/aliases`

```
echo "root: YOUR_LOCAL_USER" >> /etc/mail/aliases
```

That means that all emails sent to root are going to YOUR\_LOCAL\_USER.

If you want you can add some other aliases, like “contact” or “hi”.

```
echo "contact: YOUR_LOCAL_USER" >> /etc/mail/aliases
echo "hi: YOUR_LOCAL_USER" >> /etc/mail/aliases
```

After we add all our aliases it’s necessary to run `newaliases`.

```
newaliases
/etc/mail/aliases: 70 aliases
```

Now you should create an SSL certificate like [here](https://wildauer.io/acme-client-openbsd/) or use an existing one.

Now we can populate `/etc/mail/smtpd.conf` and replace _example.com_ with your domain. Everything we want is to receive emails from other for local users and deliver all emails to users mbox =\> /var/mail/YOUR\_LOCAL\_USER

```https://wildauer.io/acme-client-openbsd/
table aliases file:/etc/mail/aliases

pki example.com key "/path/to/your/example.com.key"
pki example.com certificate "/path/to/your/exmaple.com.crt"

listen on egress tls pki exmaple.com
listen on egress port 587 hostname example.com tls-require pki example.com auth mask-source

accept from any for domain "example.com" alias <aliases> deliver to mbox
accept from any for local alias <aliases> deliver to mbox
accept from local for any relay
```

That’s it. OpenSMTPD is listen on port 25 and 587 and accept encrypted connections. The key and certificate location are configured with the pki keyword. And the messages are delivered to system mbox of the user (/var/mail/YOUR\_LOCAL\_USER).

Populate `/etc/mail/mailname` with your domain.

```
echo "example.com">/etc/mail/mailname
```

Now you can check you configuration `smtpd -n` and when everything looks ok, you can restart OpenSMTPD `rcctl restart smtpd`

Check your OpenSMTPD server with telnet

```
telnet exmaple.com

EHLO exmaple.com
MAIL FROM: <from@somehwere.tld>
RCPT TO: <to@example.com>
DATA
Subject: This is just a test
<- blank line ->
This is a test :)
<- blank line ->
.
QUIT
```

If it’s says something like `250 2.0.0: 574eff74 Message accepted for delivery`, congratulation [OpenSMTPD](https://www.opensmtpd.org/) works.
Get list of WooCommerce products and variations
Tags: challenge
Published: 2018-10-12 21:50:09

---
title: Get list of WooCommerce products and variations
published: true
tags: challenge
---

Hi people. I just did something with JavaScript in a rush, and I would like to see how other people would solve it. Just to compare and because I'm not that good at JavaScipt, I think the answers would be enriching.

They gave me a WooCommerce website with products and variations loaded, and I needed to make a list to do other things on my ERP. The list should have:
1) Product ID
2) Variation ID
3) Variation SKU

I had to use 2 WooCommerce endpoints:

/wp-json/wc/v2/products

This lists all products. Every product has an id field

/wp-json/wc/v2/products/<product_id>/variations

This lists all variations of a given product id. Every variation  has an id field and a sku field.

So, that's the challenge, get that list to save it as a CSV file. How would you do that?

Saludos,
Implementing Model Class Inheritance in SQLAlchemy
Tags: sql, database, sqlalchemy, python
Published: 2018-12-06 11:10:28

---
title: Implementing Model Class Inheritance in SQLAlchemy
published: true
tags: sql,database,sqlalchemy,python
canonical_url: https://medium.com/@hmajid2301/implementing-model-class-inheritance-in-sqlalchemy-ad4f388a31fc
---

### Implementing Model Class Inheritance in SQLAlchemy (with Flask)

SQLAlchemy is an Object-relational mapping (ORM) made for the Python programming language. ORMs in theory allow programmers to abstract away SQL. In simple terms they allow us to interact with a database using purely Python (objects/functions). I will be using the flask-SQLAlchemy extension for my examples.

Each table is referred to as a model, each model is simply just a python class and each attribute of that class becomes a column in an SQL table. The database is made up of multiple models. Just like with normal Python models can inherit from other models and share attributes with the parent model. This is very useful if you going to have models that will store similar types of data.

### models.py

![](https://cdn-images-1.medium.com/max/1024/1*1E_1njdS7Fu4sQmMzhBikQ.png)<figcaption>models.py</figcaption>

Taking a look at the _models.py_ module, we define an abstract class called Pets. Which means SQLAlchemy will not create a table for that model. Our next two models Cats and Dogs inherit all the attributes form Pets. So Cats and Dog tables will each have a column called name, price and breed.

The main advantage of this is if you ever need to change the models you just have to change it in once place. The more models that inherit from the base model.

### \_\_init\_\_.py

![](https://cdn-images-1.medium.com/max/1024/1*MsBSLeUl8FY5n1s6nwuwtQ.png)<figcaption> \_\_init\_\_.py</figcaption>

Above is an example _\_\_init\_\_.py_ file to initialise the database and create all the database tables from the models. That’s it folks, thanks for reading.

**Please note** there are other ways to implement inheritance with SQLAlchemy, I personally found this way to be the cleanest in terms of code readability.

### Appendix

- [Example Source Code](https://github.com/hmajid2301/medium/tree/master/Implementing%20Model%20Class%20Inheritance%20in%20SQLAlchemy%20(with%20Flask))
- [SQLAlchemy](https://www.sqlalchemy.org/)
- [flask-sqlalchemy](http://flask-sqlalchemy.pocoo.org/2.3/)
Put dev.to on your resume!
Tags: career, resume
Published: 2018-10-12 21:08:09

You can do it like this:

![resume](https://thepracticaldev.s3.amazonaws.com/i/vsywk19g19nhbo4w2e10.PNG)

Why? Because writing on dev.to suggests some important things about you to potential employers:

- You do more than the bare minimum - you're thoughtful about your work.
- You enjoy sharing knowledge. When you change jobs, you probably leave documentation behind for the person who will take your place.
- You're a good writer. If you ask me, technical writing is 2018's most undervalued skill for software developers. Communication is at least half of what we do, and with remote work growing in popularity, writing clearly is becoming essential throughout the industry.
- You're part of a large and active professional community. This is a force multiplier when you're working on obscure scaling problems or difficult bugs.

You might be shy about including this on your resume because you haven't gotten a hundred ❤️s or been mentioned in the dev.to newsletter. *Don't worry about it.* Some of the most useful and well-written posts I've seen on this site never got a lot of attention. But they helped me when I needed them, and that counts for a lot.

Oh, and while you're at it, do you have a GitHub [#graveyard](https://dev.to/isaacandsuch/github-graveyards-ill-show-you-mine-49lh)? Add that too. You're doing cool stuff. Make sure people know it.
I Google Simple Functions Daily… Am I A Bad Developer?
Tags: motivation, softskills
Published: 2019-01-03 18:28:19

---
title: I Google Simple Functions Daily… Am I A Bad Developer?
published: true
tags: motivation, softskills
canonical_url: https://glennstovall.com/am-i-a-bad-developer/
---

> “Help! I Landed A Job, And I Have No Idea What I’m Doing!”

Do you feel like you don’t know what you’re doing… like you’re a fraud?

Impostor syndrome is common in our industry.

Wondering when you’ll “just know” something and not be so reliant on Google & Stack Overflow? That day never comes.

Anxiety comes from chasing an ideal that doesn’t exist. Everyone relies on external resources. There is no “10x” developer that just knows the documentation from memory, that doesn’t have to reference.

Every single developer makes mistakes every day. Every developer has moments they have to reference the language docs for a particular function, even if they’ve used it 1,000 times before. (It was probably [this one](http://php.net/manual/en/function.date.php).)

What you know isn’t what’s important. What you get done is. Shift your mindset from “how good am I?” to “what can I get done?” It moves your focus from internal to external. Stop worrying about yourself, start worrying about others

Break the problem down. Solve the smallest part. Get something done. Start writing code before you understand. You don’t have to commit. Work with others, it’s a good reminder that everyone deals with the problem.

Most of your job is novel. You do things you have never done before and solve problems you have never seen for a living.

Everyone Googles. You can Google. I’m giving you permission.

All you have to know is the next actionable step, And go for it. Don’t read and study and noodle around the problem. Take action. Find answers as problems arise.

The post [I Google Simple Functions Daily… Am I A Bad Developer?](https://glennstovall.com/am-i-a-bad-developer/) appeared first on [Glenn Stovall - Growth Engineer](https://glennstovall.com).
Best Job Types while Learning To Code
Tags: discuss, question, learning
Published: 2018-10-12 18:55:50

---
title: Best Job Types while Learning To Code
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m9i1c1pih2mugvpxv4ii.jpg
tags: discuss, question, learning
---

In a perfect world, I would have a fat trust fund that I could live from while furthering my programming skills. Alas, my world is far from perfect...

Assuming I wanted to get a job-to-pay-the-bills while I work towards my next dev role, which job types would be most compatible with that goal?

Thanks for answering! 👋🏾
📋 How to easily copy text to clipboard
Tags: webdev, javascript, cuttingedge
Published: 2018-10-12 16:49:08

---
title: 📋 How to easily copy text to clipboard
published: true
description: Learn about the new Async Clipboard API
tags: #webdev #javascript #cuttingedge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vs7j2jzxndcig5rums7r.png
---

The Chrome team has recently extended the support of the Clipboard API. One improvement is the ability to easily copy text not present in the DOM:


```js
let textToCopy = 'Copy me' 

async function copyToClipboard() {
  try {
    // 1) Copy text
    await navigator.clipboard.writeText(textToCopy);
  
    // 2) Catch errors
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

```

The new method `navigator.clipboard.writeText` is indeed much easier to use than the commonly used `document.execCommand('copy')` method:


```js
let textToCopy = 'Copy me' 

function copyToClipboard() {
  // 1) Add the text to the DOM (usually achieved with a hidden input field)
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = textToCopy;

  // 2) Select the text
  input.focus();
  input.select();

  // 3) Copy text to clipboard
  const isSuccessful = document.execCommand('copy');

  // 4) Catch errors
  if (!isSuccessful) {
    console.error('Failed to copy text.');
  }
}

```


# So what's the catch?

Well, `navigator.clipboard` is currently only available in Chrome 😢
It may take quite some time before browsers fully support this clipboard API. Allowing read & write access to the user's clipboard come with great [security issues](https://developers.google.com/web/updates/2018/03/clipboardapi#security_and_permissions) and browser vendors need time to do it right.


So for now, we're stuck with `document.execCommand`. Fortunately there are libraries like [clipboard.js](https://alligator.io/js/clipboardjs/) that save us the trouble.


# More information and codepen

If you want to learn more about accessing the clipboard using Vanilla JavaScript, I recommend reading this [informative post from alligator.io](https://alligator.io/js/copying-to-clipboard/).

Inspired by that post, I also made a [codepen](https://codepen.io/mornir0/pen/LgLPjo) showcasing a complete example using the new `navigator.clipboard`.
What can I contribute to for Hacktoberfest as a beginner? 👶🏽💻🎃
Tags: hacktoberfest, opensource, beginners, webdev
Published: 2018-10-12 16:44:15

---
title: What can I contribute to for Hacktoberfest as a beginner? 👶🏽💻🎃
published: true
tags: hacktoberfest, opensource, beginner, webdev
---

I've been learning web dev using online resources like freeCodeCamp and Codecademy and I started studying it at college a few weeks ago. Been wanting to get involved in Hacktoberfest but I'm not sure where to start as a relative beginner. I know HTML, CSS and some basic Javascript so far. What sort of stuff should I be looking for on GitHub?
Serving a static blog from a subdirectory with Cloudflare Workers
Tags: seo, cloudflare, webdev, rails
Published: 2018-10-12 16:22:40

---
title: Serving a static blog from a subdirectory with Cloudflare Workers
published: true
description: How to use Cloudflare Workers to implement your static blog in a subdirectory (app.com/blog) rather than subdomain (blog.app.com) for SEO purposes.
tags: SEO, cloudflare, webdev, rails
canonical_url: https://statushero.com/blog/serving-a-blog-from-a-subdirectory-with-cloudflare-workers/
---

When we first published our blog a couple of years back, we decided to use Jekyll. It's simple, Ruby-based, established, and it does this one job really well. We've stuck with it. 

[According to the experts](https://moz.com/blog/subdomains-vs-subfolders-rel-canonical-vs-301-how-to-structure-links-optimally-for-seo-whiteboard-friday), there's an SEO edge to hosting your blog in a subdirectory (`statushero.com/blog`) rather than a subdomain (`blog.statushero.com`). Some claim (including Google) that it's a negligible difference when you're just starting your blog, but it seemed easy enough at the the time to implement, so why not. 

### Quick and Dirty

Since our main app and landing page is a Rails app deployed many times a week, we just published the static output from Jekyll to `public/blog` with some git submodule trickery. The blog files are almost immediately cached in the Cloudflare CDN and almost never incur a Rails request. 

### Hax

As you may have guessed, this coupling is cumbersome and bit of a hack for a variety of reasons. It would be much easier to host the blog on GitHub pages--a [piece of cake](https://jekyllrb.com/docs/github-pages/#the-github-pages-gem) with Jekyll--publish minor changes quickly, and open up the blog publishing step to those without prod access. 

An nginx reverse proxy would do the job, but we're serving the Rails app from Heroku with Puma app servers, so to do that we'd have to insert an extra bit of infrastructure somewhere in the stack. (Perhaps by switching to Phusion.) The trade-off didn't seem worth it.

### Enter Cloudflare Workers

We were just about to setup the redirects and switch back to `blog.statushero.com` when we stumbled across [Cloudflare Workers](https://developers.cloudflare.com/workers/about/). Have a look - it's a powerful offering. With a few of lines of Javascript, our problem was solved:


```
addEventListener('fetch', event => {
  var url = new URL(event.request.url);
  if (url.pathname.startsWith('/blog/') || url.pathname === '/blog') {
    handleBlog(event, url);
  } else {
    event.respondWith(fetch(event.request));
  }
})

async function handleBlog(event, url) {
  var originUrl = url.toString().replace(
    'https://statushero.com/blog',
   'https://8012labs.github.io/statushero-blog');
  event.respondWith(fetch(originUrl)); 
}
```


Cloudflare even gives you a nice little browser-based UI to preview and test your Worker code. 

Now we have the best of both worlds - a subdirectory for the blog with convenience of the Jekyll/GitHub pages combo.
🌠 react-shimmer: a Better way to handle async images in React!
Tags: react, ui, webdev, javascript
Published: 2018-10-12 13:58:22

---
title: 🌠 react-shimmer: a Better way to handle async images in React!
published: true
description: React <img> component that simulates a shimmer effect 🌠 while loading
tags: react,ui,webdev,javascript
---

# The Problem 😐

I needed a custom Image component to asynchronously load images in React. After experimenting with possible ideas, I wanted to apply Facebook's original placeholder effect(e.g. [Shimmer](https://github.com/facebook/Shimmer)) in my custom Image component. The challenge was: it also must work nicely with **different image sizes** and **ratios**.

# Introducing the solution 🧠

`react-shimmer` is a powerful, **highly customizable** React `<img>` component that simulates a shimmer 🌠 effect while the image is loading. (with zero dependencies!).

- Written entirely in next-gen JS.
- Exactly zero-dependency! Only a few KBs.
- Animation duration, delay and color options are fine-tunable.
- Better error handling compared to default `<img>`.
- Same feel of the shimmer effect on different aspect ratios and sizes.
- (P.S. Looking for new contributors, feel free to ping me!)

{% github gokcan/react-shimmer %}

![react-shimmer](https://thepracticaldev.s3.amazonaws.com/i/h47vgbiq6qbc8o2yvr4e.png)

- You may also reach out to me on [Twitter](https://twitter.com/skylifee7).