teleren/devto huggingface dataset:
Google Cloud Run Service with gRPC using Spring Boot
Tags: programming, googlecloud, springboot, grpc
Published: 2020-04-01 09:42:47

---
title: Google Cloud Run Service with gRPC using Spring Boot
published: true
description: Deploy Spring Boot gRPC service to Google Cloud Run
tags: programming, googlecloud, springboot, grpc
cover_image: https://miro.medium.com/max/2000/1*BkRDpIsggod0MZJy9qCmtg.png
---

Welcome to another article on Google Cloud Platform. If you are building services using GCP then you might already know the several limitations that come with it. One of them being a lack of support for gRPC in their easy to use solutions such as Google AppEngine (Standard and Flexible), Cloud Functions or in the initial days of Cloud Run.

So if we need to support or have our own gRPC services then we need to use either Google Compute Engine or Google Kubernetes Engine, which is not an easy solution for several small use cases.

**An alternate question would be why gRPC? and what benefits does it offer over REST?**

If you are new to gRPC, then I highly recommend giving a readout, https://grpc.io. In short,

> gRPC is a modern open-source high-performance RPC framework that can run in any environment, efficiently connecting distributed services

![grpc-communication](https://miro.medium.com/max/1400/1*3tWP3Dpm7I5ygwN0yvfkZw.png)

gRPC offers several benefits over HTTP APIs with JSON, some of them are,
- Strong Contract-based communication
- uses improved HTTP/2 protocol
- Protobuf (efficient binary message format)
- Great support for code generation on several languages

So gRPC is a great fit for communication between microservices.

[Read more...](https://medium.com/swlh/google-cloud-run-service-with-grpc-using-spring-boot-e43daf155752)
4 ways to upload multipart file(s) in spring webflux
Tags: java, microservices, webdev, tutorial
Published: 2020-04-01 09:42:18

I have involved in microservice based system design and development using spring webflux for quite a long time. During my work period I had to build a admin portal for back office use only. Where I had to find out how to upload multipart file in spring webflux. And the best part is that, I cannot save the file to the server. So, I have to read the file content without saving it to the server. And I find out that, it is not easy.

So, I write out my thoughts as a tutorial here: https://medium.com/@eaimanshoshi/step-by-step-procedure-of-spring-webflux-multipart-file-upload-and-read-each-line-without-saving-it-6a12be64f6ee
There is also a demo project with postman collection and test file included in this tutorial.

I am sharing this here to share my learning with others. So that we can discuss about this tutorial and get benefit. Looking forward to get some feedback from you guys.
cssgrid.io course review
Tags: css, cssgrid, course, review
Published: 2020-04-01 15:23:13

---
title: cssgrid.io course review
published: true
date: 2020-04-01 09:39:03 UTC
tags: css,cssgrid,course,review
canonical_url: https://krzysztofzuraw.com/blog/2020/css-grid-io-course
---

This blog post will be all about [CSS Grid](https://cssgrid.io/) course by [Wes Bos](https://wesbos.com/). If you are looking for information if you benefit from such a course - you are in a good place. Before I start - there are other blog posts about this course on the internet.

You can check them here:

- [Course Review](https://www.bencodezen.io/blog/review-css-grid-with-wes-bos/) by [@bencodezen](https://www.twitter.com/bencodezen)
- [Recap and lessons learned](https://marcokuehbauch.com/blog/learning-css-grid/) by [@mkuehb](https://twitter.com/Mkuehb)

## CSS grid course

The course consists of 25 videos. Some of them are short and easy to digest but those at the end are quite lengthy - so if you are coding along this may take some time. It took me about 1 month of 30min every day to end this course.

Lessons from 1 to 11 and from 12 to 18 are mostly for explaining how all grid properties work and how they fit together. The other lessons (11 and from 18 till 25) are for you to code along or kept in style: you first code and then watch how Wes is doing the exercise.

Wes starts by describing most of (if not all) grid properties and what they are doing. What is important - he is not doing it in an ‘academic’ way. You may ask what is an ‘academic’ way?

The academic way is describing the `grid-template-row` is a way that makes you wanna cry after 2 seconds of watching. Something like: `grid-template-row` is the CSS property defines the line names and track sizing functions of the grid rows. Why I don’t like this approach? Because you don’t have a clue how to use `grid-template-row` in your code after sentence above.

Fortunately, Wes is showing CSS grid properties in practice and telling what each piece of syntax is doing.

I really enjoyed the cardio part - a part where you supposed to try first and then rewatch to see if your solution was correct.

The last videos are pretty intense as you are suppose to code along with the author.

What is more, I like that he is giving tips & tricks that you can introduce in your day to day work as a web developer. More importantly, I have a lot of ideas that I can right now work on my own and to be better at the CSS grid.

## Summary & TL;DR

I just ended watching [CSS Grid](https://cssgrid.io/) course by [Wes Bos](https://wesbos.com/) and I can really recommend it. It is an introduction to CSS grid. In the end, you get an idea of how the CSS grid work with different schemes for your [side projects](https://github.com/krzysztofzuraw/css-grid-coffee-shop).
MJSQ 101: Why not touch global scope?
Tags: codenewbie, javascript
Published: 2020-04-01 09:29:39

## More JavaScript Questions 101(MJSQ 101): 
Continuing from my original [blog post]("https://dev.to/danvyle/more-javascript-fundamentals-101-4d5d"), I give you more javascript 101 questions answered!:

Question this week:
##  Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

I thought Yangshun's explanation is concise so I'll just leave it here verbatim: 

Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.





That's all for today, please leave any comments/questions/corrections in the comments. Thanks!


###### Sources:
Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quotes from his github. Find his tech interview handbook [here]("https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-call-and-apply") and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!
The Best Way to make image/background responsive using CSS
Tags: css, responsive
Published: 2020-04-01 08:41:45

There are several ways to make image background responsive but I am going to tell you the very best way to get this done. 

So before diving into those properties, I want to explain the thought process behind this. In general, our browsers try to fit the image inside the viewport. To get this done they try to fit the whole image according to viewport which makes the image lose its height to width ratio. Hence results in a poor image.
 
Due to this behavior, the mess of poor image started. To avoid this mess we need to figure out some behavior in which image starts to adjust itself according to the viewport by cropping out the extra part of the image. 

To get this done we give these properties to the block having image/background-image
```{ 
  height: 100vh;
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
}```

So what we are doing there? Let's discuss this one by one

- height: 100vh
this will make the image take full height of the viewport like it will adjust itself according to tot the height of the monitor/screen.

-background-image: url('path of your image')
just to give a path

- background-size: cover;
The actual magic happens when you give cover as a size. Cover has the ability to crop out the extra part of the image to keep the image in its actual resolution.
But things are not this simple, `cover` actually clips the image from all the directions hence on the smaller screens only a very little part of the image will be available. To address this ratio base clipping issue we need to add another property.

- background-position: top;
This will fix the image to the stated property, i.e top, bottom, left, right. This will crop the image with one side fix and help us to keep the main content of the image visible all the time.
Binary Tree Level Order Traversal
Tags: javascript, algorithms, interview, computerscience
Published: 2020-04-01 08:37:20

Question: give a tree, return the level order traversal of the tree.

so for given tree:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mqd9ryqa87iowqev2act.png)

output would be : 

```javascript
[ [10],
  [5 ,7 ],
  [15, 9, 20]
]
```

So what is meant by level order traversal? 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c4nxpjuyedqy3gnb8m0s.png)

If you observe closely, it's a Breadth-first traversal algorithm.

So question boils down to how to Breadth-first traverse a tree.

Read more about it : https://www.hackerearth.com/practice/algorithms/graphs/breadth-first-search/tutorial/

So for this question solution is : 

```javascript 
var levelOrder = function(root) {
  if (!root) return [];

  const res = [];
  const q = [];
  q.push(root);

  while(q.length) {
    const lvl = [];
    const size = q.length;

    for (let i = 0; i < size; i++) {
      const node = q.shift();
      lvl.push(node.val);
      if (node.left) q.push(node.left);
      if (node.right) q.push(node.right);
    }
    res.push(lvl);
  }
  return res;
};
``` 

github:https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/Algorithm/breadthFirstSearch.js
For Beginners: What is a function? My sh*tty explanation 💩
Tags: beginners, codenewbie, javascript, tutorial
Published: 2020-04-01 08:11:56

It's 12:09AM, I can't sleep. After drinking my protein shake (I was hungry) I decided, why not write an informational piece.
During a Women Who Code virtual meetup, someone needed help understanding what functions are so, here it is!

*Understand the vocabulary* 
- Use the vocab, whenever you can when you are talking about your code. For example, people get parameters and arguments mixed up when they first start. The more you use the correct language, the better you'll understand.

*Vocabulary:*
- **Function:** A reusable block that allows you to perform some calculation or task. Reusable, so you don't have to repeat work!
- **Function Body:** That's the meat of the function - the logic part.
- **Parameters:** That's the words inside the parenthesis. Basically, empty variables names that aren't assigned to any data, until you call the function with the arguments.  Speaking of arguments...
- **Arguments:** When you call a function (aka execute your function after you have defined it), you provide the data/values to pass into that function. 
I dare you to code this function and run it ``function human(protein, veggie){ console.log( arguments);}`` tell me what you see! What is the data structure?
- **Return:** Return allows you to exit out of a function when a condition is satisfied. Or, sometimes a function provides an output so you can use that output for something else.


Here is my shitty explanation:
```javascript 

//function name is human
//parameters are protein and vegetable
function human(protein, vegetable){
  //body
  console.log(arguments);
  console.log(`I am digesting ${protein} and ${vegetable}`);
  return '💩';
}

//calling the function with the arguments, 'protein shake' and 'spinach'
human('protein shake', 'spinach');
//output:
//[Arguments] { '0': 'protein shake', '1': 'spinach' }
//'I am digesting protein shake and spinach'
//'💩'
```
I am a human and one of my main functions is to take input like food and digest it. After the food is digested, what the output (aka return) is 💩. That's my shitty explanation. 😬

I will edit this later for more clarity and better examples but it is now 1:11AM and I should sleep.

Eat your vegetables! 

//Chi
Mini Search Platform For Covid-19
Tags: webdev, showdev, javascript
Published: 2020-04-01 08:03:37

I built this platform to help you find updated information on the numbers if cases in every country worldwide. 
[CoronaSite](blog.nyamador.me). 

I built it in a rush and didn't follow the DRY principle , I plan on fixing that soon.

Please suggest changes or new features..
waybackmachine March 20'
Tags: kubernetes, linux, agile, waybackmachine
Published: 2020-04-01 07:54:16

>... because it's always fun to go back in time and remember how it was back then ...

<!--
# cli fun ::
# pet-project ::
# remote-ergonomics :: 
# watch :: 
# adopt :: 
# the w00t? :: 
# takemymoney :: 
# a game :: 
# a pic ::
# humor strip ::
# monthly ear hook ::
--> 


# cli agile :: kubernetes deployments

I know I should use some kind of infrastructure-as-code tool, but for the moment I'm still learning and fiddling with YAML's.

One of the things I hate most is not having information on in which order configuration files should be executed when these are left in the config repository.

I just adopted a methodology of numbering them and issue solved.

```
$ ls -1
1-kafka-strimzi-cluster-operator-0.16.2.yaml
2-kafka-persistent-single.yaml
3-kafka-connect-oracle.yaml
....
```

Now, with the following command, I can even deploy everything in order 

```
$ find . -name '*.yaml' -print0 | sort -zn | xargs -0 -I '{}' kubectl  apply -f {}
```

neat, right?


--- 

# concepts :: Julia Evans (flashcards)

I'm a huge fan of [Julia Evans](https://twitter.com/b0rk). Some friends of mine gave me her Linux ToolBox as a gift and like picking one of the books and playing in my computer for a while.

![Linux ToolBox book](https://nostarch.com/sites/default/files/styles/uc_product/public/ToolBox_front.png)
from [@nostarch](https://nostarch.com/linuxtoolbox)

She has very nice entries in her personal blog, plus her zines, ...

But now I want to share with you her latest [Flashcard game](https://flashcards-demo.netlify.com/) for testing several domains such as DNS, Linux, Containers and more every day.

![Linux flashcard example](https://i.postimg.cc/3RbDMqPz/image.png)


---
# agile :: firefox bookmark tagging

Already declared myself a fan of Firefox, mostly because of its ethics, but there are little things that make my daily use of the internet more agile.

Like many of you, I use bookmarks, but I barely access them through the panel, but just search them on the navigation bar, mostly using predefined TAG's
 
![firefox tag system for agile access](https://i.postimg.cc/V6PdyJYf/firefox-tags.gif)


*edit: 2021.01*
Some tricks to make it even more agile, [changing the results on the fly](https://support.mozilla.org/en-US/kb/address-bar-autocomplete-firefox#w_changing-results-on-the-fly)

>  Add * to show only matches in your bookmarks.
Add + to show only matches in bookmarks you've tagged. 




---
# watch :: 10 Tips to decrease your velocity (12')

{% youtube OyiO6NJ6iGA %}
@Source, from J-Fall 2019: Talip Ozkeles

---

# monthly ear hook :: Van Canto

Some epic programming music that you can pam-pam shareram-ram..., dada da daaaaan dada daaaan da da daaaa, hum! without people noticing you don't know the lyrics!

{% soundcloud https://soundcloud.com/van-canto-official/dawn-of-the-brave %}
The RxJS concatenation strategies, pt 3/4
Tags: javascript, rxjs
Published: 2020-04-01 07:52:32

Welcome back! In this article I’ll illustrate another concatenation strategy used by the marvelous library RxJS.
First and foremost, if you didn’t checked out my previous articles, I suggest to do that now:

[concatMap](https://dev.to/e4r/the-rxjs-concatenation-strategies-pt-1-4-394g)

[mergeMap](https://dev.to/e4r/the-rxjs-concatenation-strategies-pt-2-4-37de)

In this article I’ll introduce you to the **switchMap** operator, which basically lets the developer to concatenate different events such that if an event in the events chain hasn’t completed, is erased when a new event is emitted.

Let’s look at the switchMap marble diagram:

![switchMap marble table](https://miro.medium.com/max/1400/1*QCCdChvnp4aVGA_aUkOimQ.png)

To put that in a living example, let’s say that when a user type a letter (“A”, “B”, “C” in our case), the switchMap operators combines it with 1,2 and 3, and emits these value with an interval of 1 second.

Now, let’s suppose that the user types “A”, switchMap register the three new values “A1”, “A2”, and “A3” and emits “A1” immediately, then waits for a second before emitting “A2”. In the meantime, after (about) 0.8 seconds, the user types in “B”. The switchMap operator **cancels** all the scheduled events “A2” and “A3”, and replaces them with a new serie of “B1” (which is emitted immediately), “B2” and “B3”.

This operator is particularly useful when we have a form which perform a save at each value change. To avoid tenths of HTTP request calls, we’d probably want to use switchMap.

I hope the mechanism is a bit more clearer :)
Workaround for broken SwiftUI previews in macOS Frameworks
Tags: swift, swiftui, macos
Published: 2020-04-01 07:46:12

---
published: true
title: 'Workaround for broken SwiftUI previews in macOS Frameworks'
cover_image:
description: 'Explains how to apply workaround for broken SwiftUI previews in macOS Frameworks'
tags: swift, swiftui, macOS
series:
canonical_url:
---

Say you have macOS **Framework** project without hosting macOS Application. And you also have SwiftUI view inside that framework. Attempt to use SwiftUI preview in Xcode 11.4 will fail with an error 📛.

```log
GenericHumanReadableError: unexpected error occurred

messageRepliedWithError(
   "Connecting to launched interactive agent 53762",
   Optional(Error Domain=com.apple.dt.xcodepreviews.service Code=17 "connectToPreviewHost: Failed to connect to 53762: (null)" UserInfo={NSLocalizedDescription=connectToPreviewHost: Failed to connect to 53762: (null)})
   )
```

![Error while using SwiftUI preview in Xcode 11.4](https://raw.githubusercontent.com/vgorloff/mc-blog/master/blog-posts/swiftui-preview-in-playground/01-swiftui-preview-error.png)

Since we can use custom frameworks inside Xcode playgrounds, this means that we can also instantiate custom SwiftUI views inside playgrounds. Here is how playground code may look like.

```swift
import Foundation
import PlaygroundSupport
@testable import SwiftUI_In_macOS_Frameworks // 1️⃣ Importing custom Framework.

let view = SwiftUIView()

PlaygroundPage.current.setLiveView(view) // 2️⃣ Presenting custom SwiftUI as playground live view.
```

![SwiftUI preview inside Xcode Playground](https://raw.githubusercontent.com/vgorloff/mc-blog/master/blog-posts/swiftui-preview-in-playground/02-swiftui-preview-in-playground.png)

⚠️ **Downside**: We need to recompile framework target and restart Playground preview in order to see updates. But Xcode has a shortcuts to build framework target, start and stop Playground preview ✅. So, we can open SwiftUI view editor and Playground side by side and preview custom SwiftUI view in Playground.

![Playground shortcuts](https://raw.githubusercontent.com/vgorloff/mc-blog/master/blog-posts/swiftui-preview-in-playground/03-playground-shortcuts.png)

Happy coding 👋!

Sources of the sample project can be found at [GitHub](https://github.com/vgorloff/mc-blog-swiftui-preview-in-playground).
เราไม่ทิ้งกัน clone v. open source สำหรับงานแบบนี้ในอนาคต
Tags: springboot, registration, kubernates, opensource
Published: 2020-04-01 07:45:24

ทีมท่าแซะ ทำงานไม่เป็น ดีแต่ปากดีไปวันๆ ได้ฟังพี่โดม Live สัมภาษณ์หนึ่งในทีมผู้พัฒนาระบบเรื่องกาทำงานของระบบ "เราไม่ทิ้งกัน" เท่าที่จับใจความได้ คือรันบน K8S GCP, ทุก services แบ่งออกมาเป็น microservices ของใครของมัน มีการใช้งาน Redis เป็น Database จากการฟังแล้วก็นึกสนุก อ่ะงั้นเราจะมาลองออกแบบ รวมถึงออกเป็น open source สำหรับใครที่อยากได้ไว้ใช้เลยดีกว่า ว่าแล้วก็เลย draft system architecture คร่าวๆ ไว้ก่อน แต่เพื่อความสบายใจ เลยขอเพิ่มส่วน disk persists ด้วย PostgreSQL DB

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u57b3rbjo9v9zkactijz.jpeg)

ก่อนจะมาถึงส่วนออกแบบกัน เรามาย้อนดู fact กันก่อนคือ high throughput สูงสุดที่ 2M / 10นาที หรือมี traffic สูงสุดที่ 3334 TPS สำหรับงานนี้ หรือเราต้องการระบบที่แต่ละ services สามารถรับโหลดได้สูงสุดที่ 3334 TPS ตั้งแต่ Static html, eConsent, Persist, OTP, Captcha ... 

###ต้องบอกก่อนว่าระบบนี้น่าจะไม่เหมือนกับตัวจริงที่ทางทีม KTB พัฒนา แต่มันไม่ถือว่าเป็นสาระของการ open source


เริ่มกันเลยดีกว่า ถ้าทุกคนจำได้ว่าระบบนี้เริ่มด้วยการขอ consent ให้เรา accept term ก่อนที่จะเริ่มเข้าไปหน้ากรอกข้อมูล ในส่วนนี้นั้นควรมีการเก็บ cookie_id or something ไว้ก่อนเพื่อให้ธุรกรรมที่เกิดหลังจากนี้ถูกต้องตามหลักการขอ consent ก่อน


POST /econsent/submit
KEY: "random_uuid", VALUE: "7bb376c2b20f44d2b16114e8d0957778"
KEY: "checked", VALUE:  true | false
response
HTTP Status : 200, 401

งานควรจะเป็นแค่การเก็บ cookie_id ที่ checked == true ลงใน redis เพื่อให้ transaction หลังจากนี้จะทำงานต่อเฉพาะ cookie_id ที่ได้มีการ accept ไว้เท่านั้น

------------------------

POST /account/save
KEY: "random_uuid", VALUE: "7bb376c2b20f44d2b16114e8d0957778"
KEY: "citizen_id", VALUE: ""
...
...
KEY: "", VALUE: ""
response
HTTP Status : 200, 401

งานหลักๆ ควรเริ่มด้วยการการ checked ว่า cookie_id เป็น cookie_id ที่ได้ทำการ accpet มาแล้วเท่านั้นซึ่งสามารถเช็กได้โดยการไป get จากใน redis ออกมา

------------------------

POST /account/info
KEY: "random_uuid", VALUE: "7bb376c2b20f44d2b16114e8d0957778"

HTTP Status : 200, 401 with data

งานหลักๆ ควรเริ่มด้วยการการ checked ว่า cookie_id เป็น cookie_id ที่ได้ทำการ accpet มาแล้วเท่านั้นซึ่งสามารถเช็กได้โดยการไป get จากใน redis ออกมา

------------------------

POST /captcha/request
KEY: "random_uuid", VALUE: "7bb376c2b20f44d2b16114e8d0957778"
response
HTTP Status : 200, with base64 image

Random Captcha ออกมาเป็น 2 chars, 1 operation เช่น 3 + 1 = _ แล้ว render ออกมาเป็นรูปภาพและเก็บข้อมูลไว้ที่ server

------------------------

POST /otp/request
KEY: "random_uuid", VALUE: "7bb376c2b20f44d2b16114e8d0957778"
response
HTTP Status : 200, with OTP

Random OTP ออกมาเป็นเลขหกหลักส่งไปหา SMS Provider จากนั้น save OTP คู่กับ cookie_id ลงใน Redis

------------------------


Initial Repo ไว้ที่ github นะครับ https://github.com/beid-io/oss-registration Sourcecode ทั้งหมดอยู่ภายใต้สัญญาอนุญาติแบบ MIT

ปล.
- เราทำ captcha ตรงไหนหว่า จำไมไ่ด้ ใครจำได้ comment หน่อยจะได้ออกมาแก้ไข



------------------------
COPYRIGHT 2020, Peerapat Asoktummarungsri