teleren/devto huggingface dataset:
[Spring Boot]Imgタグに表示する画像をByte配列で返す
Tags: spring
Published: 2018-10-20 11:56:04

---
title: [Spring Boot]Imgタグに表示する画像をByte配列で返す
published: true
description: 
tags: Spring
---

- Kotlin
- Spring Boot 2.0.4
- Thymeleaf

---

Imgタグに表示する画像をByte配列を返すには、ResponseEntityを使用する。

Controllerの実装
```kotlin
@GetMapping("image")
fun image(): ResponseEntity<ByteArray> {
    val bytes = .. // 画像のByte配列を取得
    return ResponseEntity.ok(bytes)
}
```

HTMLの実装
```HTML
<img th:src="@{/image}">
```
5 helpful features in Chrome's DevTools
Tags: devtips, webdev, javascript, productivity
Published: 2018-10-20 11:21:08

---
title: 5 helpful features in Chrome's DevTools
published: true
description: 
tags: devtips, webdev, javascript, productivity
---

Chrome's DevTools (and its Firefox counterpart) is undoubtedly one of the most used debugging platforms and since most developers are using it I figured to make a list of a few time saving features that I wish I knew about when I started.

## 1) `$0` through `$4`

This very simple feature acts like a history of the selected elements inside the **Elements** tab. Where, if you use it inside the integrated console you can have fast and direct access to the current element you have selected up to the 5th last element you have selected.

As an example, I have used this to get the Scope of the selected DOM element in AngularJS like so:

```javascript
$($0).scope();
```
## 2) `$_`

Ever felt like it is a drag to save the last executed statement's result inside a variable to use it in the next one? Fear not! With `$_` you can get the **result** of the last executed statement without needing any copy and paste.

Let's see an example:

```javascript
getDiamonds('some function', 'with many long arguments');

for (let diam of $_) { console.log(diam.name); }
```

## 3) `clear()`

Ever wanted to clear the console programatically, not just from the *clear console* button? With this function you can do just that and have the console return to its clear state once you have refresh parts of your application.

## 4) `monitor()`

If you have a function that gets called many times (an event handler for example) and you are not 100% if the arguments it gets passed are correct. Adding a monitor to it would help identify that fairly quickly.

```javascript
monitor(getDialogue);
getDialogue('main');
console out: "function getDialogue called with arguments: main"
```

## 5) `$()` and `$$()`

CSS selector implemented natively in the console. Simple and straightforward. Want to select a button inside the main div?

```javascript
$('.main .btn-submit');
```

Or would you like to get all links inside a list? No problem, the selectors got you covered!

```javascript
$$('ul.links a');
```

Aside from the `monitor` function every other feature we talked about here is also available in the Firefox Debugger.

For more details check out this video I made that covers them a bit more in-depth:
{% youtube DkIYsjYdz60 %}


Thank you for reading and I hope this was helpful to some of you!
"XY Problem" in the Wild.
Tags: javascript, xyproblem, learnprogramming
Published: 2018-10-20 09:58:13

---
title: "XY Problem" in the Wild.
published: true
description: 
tags: Javascript, XYProblem, LearnProgramming
cover_image: https://i.imgur.com/jepVBEv.jpg
---


***From the Wikipedia [XY Problem](https://en.wikipedia.org/wiki/XY_problem) entry.***

>The real issue ("X") of the person asking for help is obscured, because instead of asking directly about issue X, they ask how to solve a secondary issue ("Y") which they believe will allow them to resolve issue X. 

For the last month or so I've been making a card game as a personal project. I'm using JS and the [PhaserJS](http://phaser.io/) game engine to get better at both because why not. Tonight, I was working on building a pyramid of cards, setting up an abstraction. When you click on a card, it gets an array of the selected cards children, ones it covers. It then goes to all children cards and removes the clicked card from the childs list of parents. When any card's parent list is zero length, the card goes face up.

But it wouldn't work. Instead of removing the one card as a parent, it was just completely clearing the array. Why? What the hell is wrong with you?

But wait. . . What? When the javascript `array.filter` runs, *ALL* the relevant variables are becoming undefined? What, why?

Here's a pic of chrome devtools [before the `filter`](https://i.imgur.com/c3iHyhv.png),
and then here it is [after the `filter`](https://i.imgur.com/nwa6XQj.png).

As you can see in the list of variables on the right, javascript has lost its mind, and is clearing my variables for seemingly no reason (or so I thought).

So I dig and dig. Web searches, info about `array.filter`, etc... and nothin works. Finally I break down and post to Stack Overflow. A Nice Guy (rarity these days) hops on the comments pretty quickly and makes some suggestions, including a couple of links on variable scope. 

. . . Do you see it? the XY Problem?

I spent a good 5 hours trying to figure out why my variables were being cleared, only to be reminded that they were completely out of scope inside the callback function of `array.filter`. I mean, I knew that's how it should work but I was so zoned in on "shit disappearing" that I couldn't see the forest for the trees. 

Even better (or worse, depending on how you look at it), with the blinders on, I completely missed the *actual* problem. I had fully forgotten that the real question at hand had nothing to do with variable scope involving callback functions. It was about an array being cleared.

Once I reminded myself of what the true problem was, it took an almighty several seconds to fix it. 

*The true solution?* ***Look at line 131 in the images.***

----

The moral of the story is this: 

> When you hear hooves, think horses, not zebras.

If you're having an *impossible* problem where something reliable seems to have gone completely off the deep end, you're most likely looking in the wrong place for the problem. Take a step back, defocus for a minute, grab the [rubber duck](https://rubberduckdebugging.com/) off your desk and have a nice relaxed conversation.
[Question] UI/UX learning materials for developers
Tags: discuss, ui, ux, frontend
Published: 2018-10-20 09:33:54

---
title: [Question] UI/UX learning materials for developers
published: true
description: Learning materials recommendations
tags: discuss,UI,UX,Frontend
---

I am experienced in Python programming, and recently I learnt a bit of Angular(TS) and Tkinter.

I think I had enough time to do purely coding. I wish to learn how to think and make a program that gives good user experience. Do you guys have any recommendation like books, or online learning materials about UI/UX?

Edit: Seems I misunderstood the co-existence of UI and UX (strictly said they both cannot be considered as a same thing). Should be clear is that I wanted to learn UI stuffs.
Firebaseの匿名認証はなんのためにあるのか - セキュリティ編
Tags: firebase, firestore, authentication
Published: 2018-10-19 11:58:34

---
title: Firebaseの匿名認証はなんのためにあるのか - セキュリティ編
published: true
description: 
tags: firebase,firestore,authentication
canonical_url: https://crieit.net/posts/Firebase
---

FirebaseのAuthenticationはGoogleログインやTwitterログインが簡単にできる便利なものですが、その中には匿名認証というものもあります。これが一体何のためにあるのか、セキュリティの観点から見てみます。今回はブラウザ上で動くWebアプリケーションの話です。

## そもそも匿名認証とは？

匿名認証というのは、ユーザーが何も操作などをしなくても、内部で勝手にログインする機能です。

## 何のためにあるのか？

基本的には公式の説明にいきなり書かれています。

[JavaScript を使用して Firebase 匿名認証を行う &nbsp;|&nbsp; Firebase](https://firebase.google.com/docs/auth/web/anonymous-auth?hl=ja)

> アプリに登録していないユーザーが、セキュリティ ルールで保護されているデータを使用できるようになります。

## セキュリティとは？

Firebaseは便利ですが、怖いところがあります。Webアプリケーションの場合、JavaScriptを使うためFirebaseアプリケーションを初期化するための設定情報が丸見えになってしまいます。そのため、何のセキュリティも導入していないとその設定情報を使って誰でも勝手にそのアプリケーションの情報を読み書きできてしまいます。

それを制限する方法として、ForestoreやStorageにはセキュリティルールがあります。例えば以下のようなことが設定できます。

* あるデータは誰でも閲覧できる
* あるデータはログインしたユーザーしか書き込みできない

等。

### セキュリティルールを設定しないとどうなるのか？

前述の通り設定情報が丸見えですので、それをコピーして誰かが自分のプログラムに組み込めば、他人のFirebaseのアカウントで自由にデータなどを扱えるようになってしまいます。

見られてはいけないデータが見られてしまいますし、そもそも利用量によって金額も増えてしまう恐れがありとても危険です。

## 匿名認証を使ったセキュリティ設定の一例

セキュリティ上問題ないと思われる、匿名認証を使ったシンプルな例をあげてみます。

### 全てのデータの読み書きを認証済みの場合のみ許可する

認証していない場合はあらゆるデータの読み書きを不可能にします。

### 匿名認証で誰もが必ず認証している状態にする

これで、ログインしなくても全てのユーザーが読み書きできるようになります。

### ログイン可能なホスト名を本番環境のみにする

Firebase ConsoleのAuthenticationの設定でログインできるホスト名を設定することができます。ここで本番のホスト名だけを認証可能にします。こうすることで、Firebaseの設定情報を使われてもデータにアクセスすることなどは不可能となります。

localhost等も当然消しておきましょう。開発時には別途開発用のFirebaseアプリケーションを用意し、そちらの設定を使ってください。ビルド時にはcross-envを使うと良いと思います。

## まとめ

このように、匿名認証を入れることで本番でしかデータを扱うことができなくなり、セキュリティのベース部分の強化を行うことができます。

とにかく、設定情報が丸見えというのは非常に恐ろしい話です。当記事の話も鵜呑みにせず、しっかりと色々なパターンを考えセキュリティを強化しておきましょう。（むしろ間違っている話があればご指摘をお願いします）

Firebaseと連携するあらゆる処理をfunctionsに実装して設定情報は公開しないようにする、くらいの強固さで考えるくらいでも良いかもしれません。
groupImg - Using k-means to organize your images
Tags: machinelearning, kmeans, python, images
Published: 2018-10-20 07:50:11

---
title: groupImg - Using k-means to organize your images
published: true
description: A script in python to organize your images by similarity
tags: machinelearning, kmeans, python, images
canonical_url: https://github.com/victorqribeiro/groupImg
---

A script in python to organize your images by similarity.

[groupImg](https://github.com/victorqribeiro/groupImg) uses a k-means algorithm to cluster your images according to their similarity.

Watch it working below:


[![groupImg](http://img.youtube.com/vi/LgzsJU-b34o/0.jpg)](http://www.youtube.com/watch?v=LgzsJU-b34o)
Live in the now
Tags: productivity, discuss, beginners
Published: 2018-10-20 04:40:07

---
title: Live in the now
published: true
description: Free your mind
tags: productivity, discuss, beginners
---

I used to feel extremely exhausted everyday after work, which leaves me with barely any form of motivation to do anything. As a junior developer in the industry, I felt that I need to change the way I do things, so at least when I get home, I still have some energy left to practice my programming because I really do enjoy it. 

I treat programming as my hobby and it makes me happy to be able to solve small challenges through code. However, it was obvious that the mental fatigue was not allowing me to spend time on my hobby. So I decided to change things a little.

## Why I was mentally exhausted?
I was constantly indulging myself in worry at work and at home. It came to me subconsciously and I did not do anything about it other than thinking more about the worries.

> What if I cannot finish this task?
> What if there is an email request from work tonight?
> What if? What if...?

There were lots of "what ifs" taking up my brain capacity to the point that it was in a constant loop of worry. After work, the work worries subsided a little, but not too much. It was on repeat over and over again.

I knew I needed some kind of help or advice.

## Living in the NOW
I listened to some advices from the audiobook [
How to Stop Worrying and Start Living](https://www.audible.com/pd/How-to-Stop-Worrying-and-Start-Living-Audiobook/B002V1OJ3A?source_code=ROWGB13108101800N8&gclid=CjwKCAjwgabeBRBuEiwACD4R5tqR3KtKPuJT3yf_EKX1WaKArDq3NPZTCyX0WiP0Sn443XLGGDhpnRoCQEIQAvD_BwE&gclsrc=aw.ds) by Dale Carnegie which says that in order to stop worrying, you just have to be in the now. Not promoting this book, but I feel it may be of some value to others out there who might be in the same situation I was.

Worries do not help in any day activities at all, apart from wasting my time. So, each time a worry came to mind, I tell myself "Hey there Mr. Syuqri, do not worry about it **NOW**. Put it in your to-do list and think about it **LATER**". My worries slowly vanished and they appeared in the form of To-Dos. I schedule each To-Do for a designated time if need be, or leave them floating if they aren't important.

Although my schedule each day is filled now from day (work) to night (side projects), I feel a sense of ease at each point in time as I am only focused at the task at hand, and nothing else. This certainly helps in productivity and ultimately frees more time for myself - something that worry has never done for me.

## TLDR
Think and live in the now. Worries should be transformed into To-Dos (scheduled or free floating) and be taken care of later.

What are you struggles in your busy schedule? How do you overcome them?
A website that allows you to search, browse and download all past iOS wallpapers
Tags: showdev, apple, javascript, vue
Published: 2018-10-20 01:22:08

---
title: A website that allows you to search, browse and download all past iOS wallpapers
published: true
description: I created a website that allows you to search, browse and download all past ios wallpapers
tags: showdev, apple , javascript, vue
---



![alt text](https://thepracticaldev.s3.amazonaws.com/i/anuzokiyobjbgz9jfu9b.png "Logo Title Text 1")


Anyone who follows me on [Twitter](https://www.twitch.tv/robertjamesgabriel) or [Github](https://github.com/RobertJGabriel/) knows I work on my own startup Idea and a few pet projects. One of these includes this.  A website that allows you to search, browse and download all past iOS wallpapers. All built with vue.js but built as a PWA as well.

You can try out the app [here](https://www.robertgabriel.ninja/apps/ios-wallpapers/index.html) and the source code is [here](https://github.com/RobertJGabriel/apple-ios-wallpapers).



Any feedback or questions I would love to answer. Also my whole website is 100% in light house.
web3x - TypeScript port of Ethereums web3.js, for tiny builds.
Published: 2018-10-20 00:56:43

---
title: web3x - TypeScript port of Ethereums web3.js, for tiny builds.
published: true
---

web3x is a port of web3.js to TypeScript. The main driving factor, beyond the need for a clean, robust, modular, type-safe client implementation for the browser and node.js, is build sizes. With web3.js coming in at ~800kb (~230kb compressed), it can have a noticeable impact on user experience on mobile when combined with the multitude of other libraries an application may require. Every little helps.

This new release of web3x focuses on reducing build sizes further. Most Dapps only use the Eth module and expect an end user to use a provider like MetaMask to handle their accounts. In such cases it makes no sense to distribute code for multiple providers, the crypto code for handling accounts in local storage, shh, bzz, etc. By structuring component initialisation properly, tree-shaking will exclude most of the library that isn't required.

A minimal application with web3x that deals with ERC20 contracts via MetaMask will produce a build via webpack of ~162kb (~46kb compressed).



I am committed to maintaining this library going forward to satisfy any user of web3.js. Further, if there are any developers that find web3.js (and web3x) are missing key functionality that means they have to import other libraries, let me know as web3x aims to serve as many use cases as possible.



Github:

https://github.com/xf00f/web3x



Packages:

https://www.npmjs.com/package/web3x

https://www.npmjs.com/package/web3x-es
How should I go about creating a portfolio site?
Tags: discuss, help, beginners, learning
Published: 2018-10-20 00:48:14

---
title: How should I go about creating a portfolio site?
published: true
description: 
tags: #discuss #help #beginners #learning
---

Hey Guys, I wanted to know if I could get some pointers on going about creating my first Portfolio site. I'm open to videos, posts, and example portfolio sites.

A little about me: I'm mostly a Back-End Developer (Java) (little Python/Go) with a repo of Console applications, Two SpringBoot App and a few Front-End projects. I have a Basic background of Front-End tools like HTML, CSS, and JS from the old Free Code Camp site.

One of the main things I wanted to know is if I should use a framework like React or Vue.JS or write it basic HTML, CSS, and JS as a single page? Also, I found a tutorial where a guy walks through creating a modern Portfolio site (Traversy Media no Framework ). But I feel like it would be checking to just follow along and create it.
Learning the Granular Details of a Programming Language?
Tags: discuss, javascript
Published: 2018-10-20 00:32:21

I'm currently reading "JavaScript: The Definitive Guide" and it's a mighty long book because it basically covers EVERYTHING related to JavaScript. This has got me wondering: Am I wasting my time by learning the granular parts of the JavaScript language?

For example, JavaScript has this concept of a positive zero (`0`) and a negative zero (`-0`). Both values are equal in JavaScript, except when used with a divisor:

```javascript
var positiveZero = 0;
var negativeZero = -0;
positiveZero === negativeZero; // => true
1/postiveZero === 1/negativeZero; // => false
```

Let's be real, what are the odds of me remember such odd behaviour and what are the odds of that ever being useful while working with JavaScript?

What do people think? It's it worth spending time learning such obscure parts of the language. If not, is it worth reading books that go into the real deep parts of a language?
Materialized views in Ruby on Rails with scenic
Tags: rails
Published: 2018-10-19 11:08:57

---
title: Materialized views in Ruby on Rails with scenic
published: true
description: 
tags: ruby on rails
---

Materialized views are not something widely used in Ruby on Rails applications. However, we have recently tried to use it and the results were very satisfying.

In this article, we would like to present a simple application using Ruby 2.4.1, Rails 5.1.4, PostgreSQL 10 and the scenic gem.


**What are database views?**
 

From PostgreSQL documentation:

Suppose the combined listing of weather records and city location is of particular interest to your application, but you do not want to type the query each time you need it. You can create a view over the query, which gives a name to the query that you can refer to like an ordinary table:

```CREATE VIEW myview AS
 SELECT city, temp_lo, temp_hi, prcp, date, location
 FROM weather, cities
 WHERE city = name;```
 
```SELECT * FROM myview;
view rawcreate_view.sql```

Making liberal use of views is a key aspect of good SQL database design. Views allow you to encapsulate the details of the structure of your tables, which might change as your application evolves, behind consistent interfaces.

Views can be used in almost any place a real table can be used. Building views upon other views is not uncommon.

This is just a very handy method not to write complicated queries. It does not help with performance – the complicated query is still executed every time.
 

**Materialized views**
 
Fortunately, the views can be materialized. Again, let’s take a look into PostgreSQL documentation:

Materialized views in PostgreSQL use the rule system like views do, but persist the results in a table-like form. The main differences between:

```CREATE MATERIALIZED VIEW mymatview AS SELECT * FROM mytab;```

and:

```CREATE TABLE mymatview AS SELECT * FROM mytab;```

are that the materialized view cannot subsequently be directly updated and that the query used to create the materialized view is stored in exactly the same way that a view’s query is stored, so that fresh data can be generated for the materialized view with:

```REFRESH MATERIALIZED VIEW mymatview;```

Simply speaking, the results of the view query are stored in the database – just like any other table. The only difference is that we can not update the view directly but it can be refreshed using records from its source tables.

This way, instead of executing expensive queries, we can use data organized in a more simple way in a materialized view.

[Read the full case study with an example here.](https://ideamotive.co/blog/materialized-views-ruby-rails-scenic/)
Moving Away From Medium for Publishing Content?
Tags: discuss, writing
Published: 2018-10-19 23:42:17

Are people starting to migrate towards platforms other than Medium for their blog posts (especially programming/developer related)? I'm thinking of no longer posting to Medium since there seems to be some benefits of having my content elsewhere. Here are some of the pros and cons I see:

**Pros**
- Lots of eyes on your post if they are part of a popular publication
- Cool analytics related to your posts
- Nice editor that auto-saves as you compose a post

**Cons**
- Syntax highlighting does not exist (brutal for technical programming articles)
- Comment system is weird (each comment is considered a "story")
- Low engagement with audience (compared with Dev.to)

Anyone have thoughts on this topic?
Creating a one-off Kubernetes Job from a Failed CronJob
Tags: systemadministratio, kubernetes, cloudcomputing, docker
Published: 2018-12-16 03:00:46

---
title: Creating a one-off Kubernetes Job from a Failed CronJob
published: true
tags: system-administratio,kubernetes,cloud-computing,docker
canonical_url: https://medium.com/@jmarhee/creating-a-one-off-kubernetes-job-from-a-failed-cronjob-820bcfd51250
---

If you have a scheduled `CronJob` in Kubernetes that has failed, or has no Pods available to complete the task, you can run the task as a Job instead to complete the task.

To create it from the manifest in Kubernetes for the existing CronJob, you can use the from argument with kubectl to define the source job to be templated for the new Job:

```
kubectl create job my-job --from=cronjob/my-cron-job
```

which will proceed to schedule the pods for this task.
Best Way To Learn Solidity For Beginners
Tags: ethereum, solidity, truffle, blockchain
Published: 2018-10-19 22:12:12

---
title: Best Way To Learn Solidity For Beginners
published: true
description: Find our what is the Best Way To Learn Solidity For Beginners
tags: Ethereum, Solidity, Truffle, Blockchain
canonical_url: https://eattheblocks.com/best-way-to-learn-solidity-for-beginners
---

https://eattheblocks.com/best-way-to-learn-solidity-for-beginners/

I just wrote an [article](https://eattheblocks.com/best-way-to-learn-solidity-for-beginners/) to help beginners figure out how to learn Solidity. This goes through the different learning resources and explain which one are the most useful and in which order they must be followed:

* Beginner
* Intermediate
* Tools
* Full project tutorials
* Blockchain, Cryptography & Distributed Systems

So make sure to checkout the complete [article](https://eattheblocks.com/best-way-to-learn-solidity-for-beginners/) on EatTheBlocks.