teleren/devto huggingface dataset:
Modern Rails app boilerplate with React + TypeScript + Docker Compose
Tags: rails, react, typescript, docker
Published: 2018-07-07 13:16:07

---
title: Modern Rails app boilerplate with React + TypeScript + Docker Compose
published: true
description: Here is a just bootstrapped app built on Ruby on Rails + React.js + TypeScript + Docker Compose
tags: rails,react,typescript,docker
---

## TL;DR

**Here is a just bootstrapped app built on Ruby on Rails + React.js + TypeScript + Docker Compose**: https://github.com/ohbarye/rails-react-typescript-docker-example

With this boilerplate, you can quickly start to build your own app.

## Motivation

Nowadays, I feel like **we need a wide range acknowledgment on web development even if we call ourselves "backend developer" or "frontend developer".**

As for my experience, I've been a Rails engineer, I'm but recently working like kinda frontend developer because I spend all of my working time for building an SPA (single page application) built with React + TypeScript.

The SPA, Of course, has a backend API, Ruby on Rails connecting PostgreSQL in my case. I use Docker Compose for defining and running multi-container Docker applications because it's not much simple to bootstrap all of applications and middlewares.

**Learning each technology itself is not a burden. I rather like learning. But I've thought I'd like to pursue my playground whose tech stacks are virtually same as ones I develop in work.**

## Rails-React-TypeScript-Docker Example

Therefore, I built an example application with the following modern web technology stacks.

https://github.com/ohbarye/rails-react-typescript-docker-example

- [Ruby](https://www.ruby-lang.org/en/) 2.5.1
- [Rails](https://rubyonrails.org/) 5.2.0
- [React.js](https://reactjs.org/) 16.4.1
- [TypeScript](https://www.typescriptlang.org/) 2.9.2
- [Docker](https://docs.docker.com/)
- [PostgreSQL](https://www.postgresql.org/)

## Usage

```shell
$ git clone https://github.com/ohbarye/rails-react-typescript-docker-example.git && cd rails-react-typescript-docker-example

# Setup
$ docker-compose run frontend yarn
$ docker-compose run backend rake db:create

# Start
$ docker-compose up -d
$ open http://localhost:3000
```

Once I've got a playground, it's time to build something on the base. I hope that this would help other developers who have had concerns the same as mine.
Twitter Timeline Cleaner
Tags: twitter, quantumofideas
Published: 2018-07-07 14:13:35

---
title: Twitter Timeline Cleaner
published: true
tags: [twitter, quantumofideas]
canonical_url: https://dmerej.info/blog/post/twitter-timeline-cleaner/
---

_Originally published on [my blog](https://dmerej.info/blog/post/twitter-timeline-cleaner/)._

_Note: this the second post in the [Quantum of Ideas](https://dmerej.info/blog/post/introducing-quantom-of-ideas/) series._

# Introduction

I’ve already explained [on this blog](https://dmerej.info/blog/post/twitter-and-me-me-and-twitter/#fixing-my-timeline) why I’ve decided to never follow more than 30 accounts on twitter.

To this day, I’m still convinced that if you follow more than 50 accounts, you should seriously considering cleaning your timeline too.

This may seem like a daunting task, especially if you’re already following hundreds of accounts. That’s when the Twitter Timeline Cleaner comes in.

# How it works

_Remember, this is **not** an existing product, just a "work in progress" idea._


* First, the TTC does a backup of the list of all your followers

* Then it goes through the list, and for all of account you follow, it:

  - Takes a random sample of recent tweets from this account and asks you to mark them as _relevant_ or _useless_.
  - Then it gives each account a score, something like the average interest of each tweet divided by the frequency of tweets.

That way, accounts that tweet rarely but are always interesting get a high score. Accounts that tweet several times per day every day, even if they sometimes have interesting content, get penalized.

When this is done, the TTC shows you a list of accounts sorted by decreasing score, and all you have to do is to select which irrelevant accounts you want to stop following.

By the way, unless they explicitly configured their account to do so, each account you unfollow will _not_ get notified, so there’s a pretty good chance they won’t get mad at you.

_Update: Turns out such a product already exists. Take a look at https://www.manageflitter.com/_

# Conclusion

And that’s all there is to it. We could also extend the TTC so that it prevents _you_ from becoming an account with low signal-to-noise ratio using the same technique. For instance, it would display messages like: “only 2% of readers found this tweet interesting”, or “you’ve already tweeted 3 times today, maybe go take a break”.


… or you could just [use Mastodon](https://dmerej.info/blog/post/why-mastodon/) where:

- you can choose an instance that matches your interests
- messages are more likely to get interesting due to the 500 characters limit
- discussions are easier to follow because everything is sorted by chronological order
- people are just overall nicer to each other or so it seems

Cheers!

_Thanks for reading this far :)_

_I'd love to hear what you have to say, so please feel free to leave a comment below, or read the [feedback page](https://dmerej.info/blog/pages/feedback/) for more ways to get in touch with me._
พื้นฐาน JPA[ ep.2 ]
Tags: jpa, java, springboot
Published: 2018-07-07 12:34:20

---
title: พื้นฐาน JPA[ ep.2 ]
published: true
description: 
tags: JPA, Java, Spring-boot
---

#### เกริ่นไปเรื่อย 
---
การเขียนโปรแกรมติดต่อฐานข้อมูลด้วยภาษา Java ส่วนใหญ่พื้นฐานเราจะใช้ JDBC ในการติดต่อ นอกจาก JDBC แล้วบางคนก็อาจจะใช้ Framework หรือ API ประเภท ORM (Object Relation Mapping) ถึงตรงนี้แล้วบางคนอาจสงสัยว่า ORM คืออะไร เอาง่ายๆ เลยนะคับ ORM คือเครื่องมือที่ช่วยให้เราสามารถมองฐานข้อมูลเป็น Object ถ้าเราแก้ไขข้อมูลใน Object ก็จะท าให้ข้อมูลในฐานข้อมูลมีการเปลี่ยนแปลง เหมือนกับการใช้ SQL Command ตรงๆ

---
ยกตัวอย่างเช่น เรามีตารางฐานข้อมูล เก็บข้อมูลลูกค้าตามรูปข้างล่าง(1) หากเรามองเป็น Object เรามักจะเขียน Code (2) ประมาณนี้

![alt text](https://thepracticaldev.s3.amazonaws.com/i/7wkor3o2e880quo83580.png)

---

ซึ่งถ้าเป็น ORM เราสามารถสร้าง Record ใหม่ด้วยการ New Instance ของ Object Employee และสั่งให้ Framework หรือ API ทำการสร้าง Record ได้เลย โดยที่ไม่ต้องเขียน Statement Insert เหมือนใน JDBC ที่พูดมายืดยาวก็เพื่อให้พอเห็นภาพของ ORM โดยเจ้าตัว ORM นี้ใน Java ก็มีด้วยกันหลายตัวเช่น Hibernate , JPA (Java Persistence API) , … etc.

---

##### สำหรับในวันนี้จะขอพูดถือตัว JPA

JPA ย่อมาจาก Java Persistence API เป็น API มาตรฐานตัวหนึ่งที่อยู่ใน Technology Java EE ใช้สำหรับการทำ ORM วิธีการสร้างหรือการใช้งานก็ไม่ยุ่งยาก โดยขอแบ่งเป็นขั้นตอนง่ายๆ ดังนี้

1. ทำการสร้าง Object เพื่อ Mapping ตารางหรือ Field ต่างๆ ในฐานข้อมูล
2. ทำการเขียน Configuration ไฟล์สำหรับการเชื่อมฐานข้อมูลในไฟล์ persistence.xml
3. ใช้งาน Object ผ่านทาง Entity Manager

---

1. ทำการสร้ำง Object เพื่อ Mapping ตารางหรือ Field ต่างๆ ในฐานข้อมูล
    ขั้นตอนการทำ Object Mapping คือการที่เราเอาทำการเขียน Object ให้มีความสัมพันธ์กับฐานข้อมูลโดยมีรายละเอียดดังนี้

@Entity
ใช้สำหรับกำหนด Class ที่จะ Map กับตารางในฐานข้อมูล
![alt text](https://thepracticaldev.s3.amazonaws.com/i/5kzry2jxfz49uffmmz8w.png)
    *กรณีไม่กำหนดชื่อตาราง  ชื่อ Entity นั้นๆ จะหมายถึงชื่อตารางในฐานข้อมูล

---

@Table
ใช้สำหรับกำหนดชื่อตารางฐานข้อมูลที่ Map กับ Class ที่เราสร้าง
  ![alt text](https://thepracticaldev.s3.amazonaws.com/i/xhhuunbd47u8bv4ftdpx.png)
    
---

@id และ @GeneratedValue
ใช้สำหรับกำหนด Field ที่เป็น Primary Key กรณีที่เป็น id ประเภท Auto Generate จะใช้     @GeneratedValue
  ![alt text](https://thepracticaldev.s3.amazonaws.com/i/5b4gtc5z3o5l1pzamg9v.png)

---

@Column
ใช้สำหรับกำหนดชนิดของ column ของฐานข้อมูล เช่น
  ![alt text](https://thepracticaldev.s3.amazonaws.com/i/wypsu8t32gkpsw2qv6u1.png)
The 1AM Personal Site
Tags: career, showdev, webdev, beginners
Published: 2018-07-07 05:05:07

---
title: The 1AM Personal Site
published: true
description: 
tags: career, showdev, webdev, beginners
---

Over the last week, I have been up much later than I normally am (I'm getting old I'm usually in bed by 11pm lol) And for whatever reason, I have been looking at my personal site a whole lot lately. It just did not portray a good set of web development/design skills. I HATED IT! 
So on Wednesday night I fired up a new React site and started coding. Then early this morning I deployed it and have a brand new personal website!
There's still a lot missing, and things I want to change, but I am much more satisfied with the way it looks now!

I found that not spending too much time on the development and not overthinking the design was super beneficial, so I'll be keeping that in mind for future redesigns!

Check it out here: [jenessawhite.com](http://jenessawhite.com)
Stack: React w/SASS & Bulma

Leave feedback and your own site in the comments!
QR Code Generator with Django  
Tags: question, python, howto
Published: 2018-07-07 03:20:38

---
title: QR Code Generator with Django  
published: true
description: 
tags: question, python, how-to
---

Hi devs! **I'm wondering how you would generate your own QR code and add them over to your Django app?** I've seen and tried different QR code generator but all of them only supports PDF, Images, Urls, and etc. I'm looking to generate a QR code of an object. 

Not getting it? 🤔

It's like there's a QR code and then it returns to me an object like so:
`{name: ' on', age: null, job: 'Developer'}`

That way I can like open a dialog and just input the data to the input value or something. 

By the way I'm using this on a React-Native app. 😁

Thanks!
To what extent must data be deleted to comply with the GDPR?
Tags: discuss, legal, gdpr
Published: 2018-07-07 01:41:28

---
title: To what extent must data be deleted to comply with the GDPR?
published: true
tags: discuss, legal, gdpr
---

I was wondering about this because, when you delete data, that space on disk is just marked as "free", but unless it is overwritten, can technically still be accessed.

Are you obligated to zero out customer data when they exercise their "right to be forgotten"?

**For real legal advice, consult a lawyer, people in this thread can not e held accountable for the consequences of decisions you make after reading this.**
Android: Reset Password Keystore file
Tags: android, keystore, keytool, playstore
Published: 2018-07-07 00:26:39

---
title: Android: Reset Password Keystore file
published: true
description: sign app android with new keystore file
tags: android,keystore,keytool,playstore
---


**SOLUTION 2018**: Sign app with new keystore file if you missing password or lost jks file.

**1) Create new keystore.jks file with comand line (not android studio build menu)**

    keytool -genkeypair -alias upload -keyalg RSA -keysize 2048 -validity 9125 -keystore keystore.jks

Windows example: 
    `"C:\Program Files\Android\Android Studio\jre\bin\keytool.exe" -genkeypair -alias upload -keyalg RSA -keysize 2048 -validity 9125 -keystore "C:\keystore_new.jks"`

**2) Generate a .pem file from new keystore**

    keytool -export -rfc -alias upload -file upload_certificate.pem -keystore keystore.jks

Windows example: 
    `"C:\Program Files\Android\Android Studio\jre\bin\keytool.exe"  -export -rfc -alias upload -file  "C:\upload_cert.pem" -keystore  "C:\keystore_new.jks"`

**3) Use this support form, set "keystore problem" and with attachment add .pem file:** https://support.google.com/googleplay/android-developer/contact/otherbugs

4) **12-48h you new keystore is enabled. Update your app on playstore with new apk signed with new keystore :D**
Added CSS quickfix and error reporting to lit-html-plugin for VS Code
Published: 2019-10-30 00:18:09

---
title: Added CSS quickfix and error reporting to lit-html-plugin for VS Code
published: true
date: 2018-07-06 16:00:00 UTC
tags: 
canonical_url: https://justinribeiro.com/chronicle/2018/07/06/added-css-quickfix-and-error-reporting-to-lit-html-plugin-for-vs-code/
---

It took a little effort to get it just right, but I’ve been able add CSS quickfix and error reporting to the [typescript-lit-html-plugin](https://github.com/Microsoft/typescript-lit-html-plugin) language plugin for VS Code. In the video below, we can see css quickfix and error reporting working for the `<style>` block without any fancy user settings (albiet with a flame emoji that didn’t make it into the pull request :-). It’s also smart enough to understand the difference between the various other pieces of code that might be in your tagged template.

<video autoplay loop muted playsinline>
  <source src="https://storage.googleapis.com/jdr-public-imgs/blog/sc-2018-07-06-css-quickfix-lit-html-vscode.webm" type="video/webm">
  <source src="https://storage.googleapis.com/jdr-public-imgs/blog/sc-2018-07-06-css-quickfix-lit-html-vscode.mp4" type="video/mp4">
</source></source></video>

Many thanks again to Matt over at Microsoft for putting up with my questions and taking the time to review and merge that pull request.

You can start using this now by grabbing the plugin [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) or by configuing the [language service](https://github.com/Microsoft/typescript-lit-html-plugin) for your editor of choice (see project readme for details).
Mocking JavaScript's current Date in Jest tests
Tags: jest, javascript, testing, node
Published: 2018-07-07 11:14:10

---
title: Mocking JavaScript's current Date in Jest tests
published: true
tags: jest, JavaScript, Testing, Node
canonical_url: https://codewithhugo.com/mocking-the-current-date-in-jest-tests/
---

There are situations where `Date.now` is used in application code. That code needs to be tested, and it’s always a struggle to remember how to mock `Date.now`. Here is the magic snippet:

```js
const literallyJustDateNow = () => Date.now();

test('It should call and return Date.now()', () => {
  const realDateNow = Date.now.bind(global.Date);
  const dateNowStub = jest.fn(() => 1530518207007);
  global.Date.now = dateNowStub;

  expect(literallyJustDateNow()).toBe(1530518207007);
  expect(dateNowStub).toHaveBeenCalled();

  global.Date.now = realDateNow;
});
```

> This was sent out on the [Code with Hugo newsletter](https://buttondown.email/hugo) last Monday.
> [Subscribe](https://buttondown.email/hugo) to get the latest posts right in your inbox (before anyone else).

This isn’t really a Jest-specific trick, we’re just accessing Node `global` object and replace `Date.now` with a stub.
We’re also being good unit-testing citizens and putting the original `global.Date.now` implementation back 😇.

Cover photo by [Bryce Barker](https://unsplash.com/@fortheloveofbry5tahh?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge) on Unsplash.
Arise New Blog
Tags: blog, misc, jekyll
Published: 2018-12-10 10:09:59

---
title: Arise New Blog
published: false
tags: blog,misc,jekyll
canonical_url: https://garfbradaz.github.io/blog/2018/07/07/Arise-New-Blog.html
published: true
---

## It’s alive!

I have wanted to move [my current](https://mywebanecdotes.com/) off Wordpress for sometime, but time has always been a factor. As a developer I find myself living within _Visual Studio Code_, so I decided to set up a blog which can:

- Use my Visual Studio Code
- Use my git skills

I knew github has [Github Pages](https://pages.github.com/), and it used [Jekyll](https://jekyllrb.com/). So I have started a Github page. So this is day one. I chose a minimal theme for the site, and each change to the site I will document as a blog post. Think of them as Release Notes!

As I move on I change the style and layout etc, but for now (and posterity) here is the Home Page from day 1:

![Day 1](https://garfbradaz.github.io/assets/img/posts/day_1.PNG)

[Source Post](https://garfbradaz.github.io/blog/2018/07/07/Arise-New-Blog.html)
Vim practical example
Tags: vim, shell, unix
Published: 2018-07-06 23:57:21

---
title: Vim practical example
published: true
description: Accessing similar URLs
tags: vim, shell, unix
---

## The problem

In my job, I had to open in a browser a set of similar URLs.
A sample URL
`https://db-provider.com/dashboard.html#database/the-db-name/<element-name>.<lang>.<locale>`

In this concrete case, I had to access 6 elements and each one in 6 different languages.
36 different URLs.

##Solution

**Approach 1**
Open the browser and type every URL
This would be reaaaaaaally boring.

**Approach 2**
Use Vim

Open vim
Write the sample URL
Then replicate this URL 5 times.
```
yy5p
```

Now we have one line per element.
![alt 1](https://thepracticaldev.s3.amazonaws.com/i/qgs6mmiryjss6mwxjgsi.png)

Write every element name
```
:1s/<element-name>/element1/ # scoped to line 1 replace <element-name> with element1
:<up_arrow> # show previous executed command
:2s/<element-name>/element2/
```                                        
Repeat this 4 more times
![alt 2](https://thepracticaldev.s3.amazonaws.com/i/03unebkmdn1urxg5cdft.png)

Replicate this block 5 times once per lang-locale
```
ggy6jG # go to top, yank 6 lines down, go to bottom
qq # start recording in register q
o<esc> # insert blank line
p # paste yanked block
G # go to bottom
q # stop recording
```

At this point, we have recorded `insert a new line and paste yanked block`.
Let's repeat this 5 times.

```
5@q # execute register q 5 times
```

![alt 3](https://thepracticaldev.s3.amazonaws.com/i/zx6lilxroc5ca37iew75.png)


```
gg # Go to the top
```

For each block replace first lang-locale with `en.us`
Create a macro for replacing one line and go to next line to replace.

```
qq # start recording
:.s/<lang>.<locale>/en.us/ # scoped to current line replace <lang>.<locale> with en.us
7jq # go 7 lines down and stop recording
5@q # repeat this macro 5 more times once per each block.
```

At this point you should have something like this:
![alt 4](https://thepracticaldev.s3.amazonaws.com/i/axk77wcxrdb43mkwvros.png)


Go to the second line and repeat the process with `de.de`

```
2gg # go to second line
```

Repeate the process with `pt.BR`, `es.MX`, `fr.fr` and `ja.jp`

At this point, you should have something like
![alt 5](https://thepracticaldev.s3.amazonaws.com/i/5m7cygsgub69uh90omk0.png)

Remove every empty line.
```
:g/^$/d # apply d command to lines matching /^$/
```

We have built every possible URL.
Now we need to open them into default browser.

```
:%! xargs open # pass all lines as the argument to open command
```

![magic3](https://media.giphy.com/media/3o7TKP9ln2Dr6ze6f6/giphy.gif)

The default browser will open all those URLs in different tabs.
(open command is present on mac-os. For Linux you should have a similar)

I hope you've enjoyed.
All comments are welcome!
Sanitizing filenames for code
Tags: filenames, productivity, linux, macos
Published: 2018-07-06 22:02:26

---
title: Sanitizing filenames for code
published: true
description: How to keep filenames consistent
tags: filenames, productivity, linux, macos
---

A lot of us must have seen this coming.SPACES IN FILENAMES. There is no escaping coz everyone does not follow sanity. However, part of an engineer/dev in you says let me fix this. There are a ton of ways on how to do that. As much as I prefer writing code to fix my problems, not everything needs code as I am firm believer in **do not re-invent the wheel**. Hence the following post. 

The most generic pain-in-the-neck problems arise from space in filenames. I have used all possible solutions from using `tr` command to using *automator* in MacOS. However, not all solutions are applicable across all platforms. Hence, I ended using the detox command line utility. Here is why. 

```
[~/Downloads/tmp/temp] $ tree .
.
├── file\ name\ 1.txt
├── file\ name\ 2.txt
├── file\ name\ 3.txt
└── file\ name\ 4.txt

[~/Downloads/tmp/temp] $ detox *.txt
[~/Downloads/tmp/temp] $ tree .
.
├── file_name_1.txt
├── file_name_2.txt
├── file_name_3.txt
└── file_name_4.txt
```

I hope this elegant solution improves your productivity. Happy coding.
Generate color palette for your website
Tags: colors, palette, web
Published: 2018-07-06 21:38:17

---
title: Generate color palette for your website
published: true
description: How to generate color palette 
tags: #colors, #palette, #web
---
1. Visit [ColorsWall](https://colorswall.com/palette/generate) and Sing Up.

2. Press "Generate" button.
![Colorswall Generate color palette](https://thepracticaldev.s3.amazonaws.com/i/28v2x0rhmcn5o1f4ulo1.gif)

3. Sort or customize colors.

4. Save your palette.

5. Enjoy.

Video version
{% youtube qxS66Tu0738 %}
Manual testing
Tags: discuss
Published: 2018-07-06 20:58:51

---
title: Manual testing
published: true
tags: discuss
---
At certain points in my career, I worked as a „manual tester“: I executed test cases step by step, manually, in the GUI. I compared what happened in the GUI to the expected values in the test documentation.

The customers paid for it, but it wasn‘t fulfilling work. Even when  I had written the test documentation myself.

With some effort, most of the tests could have been automated.
Still, I think there is a place for manual testing, e.g. exploratory testing.

What are your thoughts and experiences?
Bro Cluster in Containers
Tags: bro, docker, security, containers
Published: 2018-07-06 20:02:37

---
title: Bro Cluster in Containers
published: true
description: How I deployed a Bro cluster using containers
tags: bro, docker, security, containers
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4k67656n4c4j9nt8ntrg.png
---

I've been working on running [Bro](https://bro.org) (a network monitoring tool) in a cluster using containers. I got it working nicely, and I did a write-up on how I made it work. 

https://vault.osninja.net/bro-cluster-in-containers/
Write With Me (Day 5) / CTO Office Hours!!!
Tags: discuss, writewithme, dev, productivity
Published: 2018-07-06 18:56:28

---
title: Write With Me (Day 5) / CTO Office Hours!!!
published: true
description: 
tags:  discuss, writewithme, dev ,productivity
---

Today is the 5th day of my writing challenge to myself and anyone else!

I'm super excited to announce CTO Office Hours DailyDrip.com is holding! This is the second time we are doing this, and both of my bosses will be in attendance. 

![Twitter Picture of Announcement for Office Hours](https://thepracticaldev.s3.amazonaws.com/i/cb10uaqjk5v8cewy0pp2.png)
[The Tweet :)](https://twitter.com/dailydripcom/status/1015280177977454593)

As you can see Office Hours being very soon! So bring all your questions and ask away!
Json client read
Tags: json, datastructure, clientburn, clientdevskills
Published: 2018-07-06 10:52:18

---
title: Json client read
published: true
description: personal experience with clients
tags: #json #datastructure #clientburn #clientdevskills
---


Never thought that this would happen in my developer lifetime with multiple clients at the same time.

Few months ago I developed a API for data integration with our systems and the API returns always a json data structure schema with 2 keys (output and message). Message key can have multiple string outputs, but output is always 0 (unsuccess) or 1 (success). 

Two weeks ago I added a new key called guid that contains a uuid (Universally unique identifier), eg.:. 482b8a20-8108-11e8-adc0-fa7ae01bbebc, this implement wouldn't jam with output and/or with message. Suddenly clients said that they are having more output=1 than it is real (btw I track all outputs). So the stupid clients aren't parsing but instead doing a string search in the json schema, so for instance if something like this appears:

{“output”: 0,”message”:”something happened”,”txGuid”:”482b8a20-8108-11e8-adc0-fa7ae01bbebc”}

They will recognize as 1, since the schema has at least one 1 in the json schema.

I tought I have seen everything, but this is definitely a multiple first timer.

P.S API Documentation is explicit about json output!