teleren/devto huggingface dataset:
Kotlin SpringBoot Upload/Download File - MultipartFile + Thymeleaf + Bootstrap 4 example
Tags: kotlin, springboot, mysql, upload
Published: 2021-04-17 12:33:13

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-upload-download-file-multipartfile-thymeleaf-bootstrap-4

Kotlin SpringBoot Upload/Download File - MultipartFile + Thymeleaf + Bootstrap 4 example

In the tutorial, we will show you how to build a SpringBoot web-application to upload/download file with Thymeleaf engine and Bootstrap 4 using Kotlin language.

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Java 8</li>
<li>Maven 3.6.1</li>
<li>Spring Tool Suite: Version 3.9.4.RELEASE</li>
<li>Spring Boot: 2.0.2.RELEASE</li>
<li>Bootstrap 4</li>
<li>Kotlin - Version: 1.2.41</li>
</ul>
<h2>Goal</h2>
We create a SpringBoot project as below:

<img src="https://grokonez.com/wp-content/uploads/2018/06/Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-project-structure.png" alt="Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-project-structure" width="391" height="345" class="alignnone size-full wp-image-12878" />

-> Upload Form:

<img src="https://grokonez.com/wp-content/uploads/2018/06/Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-upload-view.png" alt="Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-upload-view" width="420" height="183" class="alignnone size-full wp-image-12879" />

-> Download Form:

<img src="https://grokonez.com/wp-content/uploads/2018/06/Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-download-files.png" alt="Kotlin-SpringBoot-Upload-Download-File-MultipartFile-Thymeleaf-Bootstrap-4-download-files" width="686" height="360" class="alignnone size-full wp-image-12880" />
<h2>Practice</h2>
We create a SpringBoot project with below dependencies:

<pre><code class="language-html">&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;com.fasterxml.jackson.module&lt;/groupId&gt;
	&lt;artifactId&gt;jackson-module-kotlin&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
	&lt;artifactId&gt;kotlin-stdlib-jdk8&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
	&lt;artifactId&gt;kotlin-reflect&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>
<h3>Frontend</h3>
<h4>Upload Multipart-Form</h4>
– Create <em>/templates/multipartfile/uploadform.html</em> file:

Read more at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-upload-download-file-multipartfile-thymeleaf-bootstrap-4

Kotlin SpringBoot Upload/Download File - MultipartFile + Thymeleaf + Bootstrap 4 example
The semicolon in JavaScript / TypeScript: pros and cons
Tags: javascript, typescript, semicolon
Published: 2021-04-17 14:11:11


The need to use semicolons in JavaScript and similar languages ​​is a hotly debated topic. In this article, I will try to break down all the pros and cons of using a semicolon.

## ASI (Automatic Semicolon Insertion)

The use of semicolons in JavaScript is optional due to the existence of ASI. TypeScript also uses ASI. However, ASI does not always function correctly, and there are several situations where missing a semicolon will lead to an unexpected runtime error.

JavaScript has several dead ends that are fixed by the TypeScript type system. For example:

```javascript
class Car {
  color;

  constructor(color) {
    this.color = color;
  }

  beep() {
    console.log("BEEEEP");
  }
}
console.log("test") //; It won't work without a semicolon

[("white", "blue")].forEach((color) => new Car(color).beep());

```

The array of colors will be interpreted as a semicolon expression. In JS, this will throw a runtime error - "Uncaught TypeError: Cannot read property 'blue' of undefined" ". In TS, an error will occur at the compilation stage - "Left side of comma operator is unused and has no side effects".

There is another similar example. In this case, the error will occur in both languages ​​only at runtime:

```javascript
console.log("n")
(function() {
    console.log("n")
}())
```

If you are using a linter, the no-unexpected-multiline flag will help you catch these errors at compile time.

## Reasons to use semicolons

-   Habit - why change something, if everything suits you.
-   Different programming languages ​​- It's easier to stick to similar principles in different languages.
-   Readability is a matter of taste.
-   Getting rid of ambiguities.
-   Reluctance to use the linter.

## Reasons not to use semicolons

-   An extra symbol - saving time and space.
-   The code becomes cleaner.
-   It's easier to hit the end of the line with the mouse.
-   [Linter](https://eslint.org/) - allows you to detect errors at the compilation stage.
-   It's easier for beginners not to be distracted by semicolons.
-   No more warnings about missing semicolons (especially when moving from a language that doesn't use them).
-   Using semicolons in JavaScript and TypeScript does not completely eliminate ambiguities.
Awesome Ruby on Rails Hotwire Admin Panel
Tags: rails, ruby, beginners
Published: 2021-04-17 14:08:27

---
title: Awesome Ruby on Rails Hotwire Admin Panel
published: true
description: 
tags: rails, ruby, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aprgnkdej3azqhtxqvqm.png
---

<h2>Avo Ruby on Rails Admin Panel</h2>
First, I must say that I am happy to see that the Ruby on Rails community is more alive than ever and continues to produce great products.

Just in case you have any doubts, no I have no affiliation of any kind with this project :-)

I came across their site in a discord chat and out of curiosity I decided to go see what was going on.

My first impression was more than good and that's why I wanted to tell you about it in this post.

Currently I am working to create a web application with Laravel and I use Laravel Nova every day. Nova is an admin panel for a Laravel application. In fact this is the best admin panel I have used. The design is superb and it is powerful and customizable at will. I no longer count the time I save using this admin panel vs doing everything manually.

Until now, I thought that Rails had no equivalent (of this quality). I knew a few admin panel. All very good but none of the caliber of Laravel Nova ... That was before I discovered Avo! (https://avohq.io/)

Avo is the equivalent of Nova but for Ruby on Rails applications. The modern design is rich, flexible and customizable. Moreover, it uses Hotwire in order to make the user experience worthy of a SPA.

Besides the fact of not using javascript or a framework like vue.js, the customization is done in Ruby, therefore simpler and faster.

Version 1 should be available shortly. There is a free community version and the full version is $ 99 per business project.

Curious, see by yourself: https://avohq.io/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u6jfj4sf47ccz8jhqdf.png)

<h3>Conclusion</h3>
Thanks for reading this post!

I am new on twitter so if you want to make me happy
Follow me!: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
WEEK 0: First Commit
Published: 2021-04-17 13:54:32

### Welcome to my first blog :)
From now on I would like to commit to writing a post at least once a week.

These are topics I would like to start study with.
- Docker
- Vue3
- Golang
- Kafka
- RabbitMQ

I will try to sum up what I study each week, and let see how much I could learn in a year.
Connecting The Dots: Front-end and Algorithms
Tags: react, javascript, algorithms
Published: 2021-04-17 12:36:26

Last week, during an interview, I encountered an algorithm test. This week, while working on the current React project, I came across the same test. I recognized it instantly and solved it effortlessly, like eating a piece of cake. This experience reminded me of one of my favorite quotes.

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

### The algorithm dot - Merge Intervals

You can see details here in [LeetCode](https://leetcode.com/problems/merge-intervals/).

Example 1: 

```jsx
Input: intervals = [[1,3],[2,6],[8,10],[15,18]]
Output: [[1,6],[8,10],[15,18]]
Explanation: Since intervals [1,3] and [2,6] overlaps, merge them into [1,6].
```

Example 2:

```jsx
Input: intervals = [[1,4],[4,5]]
Output: [[1,5]]
Explanation: Intervals [1,4] and [4,5] are considered overlapping.
```

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

### Connecting to Front-end

So, how this algorithm test I took last week related to my current work. Let's see a gif below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piqt092ekcmygn5rtm7j.gif)

Try it yourself ⇒ [codesandbox](https://codesandbox.io/s/eloquent-bogdan-9lkyr?file=/src/App.js)

- There's a list transactions grouped by date.
- At first load, we only load a few items.
- When users press "Load More" button, we call an api to get more data.
- Data come but in section date "19.10.2021", without merge we see two separate sections.
- Now my mission is to merge theme together. Let's go

### Connecting The Dots

This is the solution

```jsx
const merge = (currentList, newList) => {
	// We take the currentList at first load, and the "load more" list.
	// First we just merge it by spread operator => [...currentList, ...newList]
	// After that we use `Array.prototype.reduce` to generate a new array,
	// Which is merged and grouped by date.
  const merged = [...currentList, ...newList].reduce((acc, item) => {
		// Condition 1: just push the item to the new empty array, or
		// if the last item in `acc` doesn't have the same date with the current item
    if (!acc.length || acc[acc.length - 1].date !== item.date) {
      acc.push(item);
    } else {
			// Condition 2: if they have the same date, we merge it. 🤝
      const lastItem = acc[acc.length - 1];
      const mergedDate = [...lastItem.transactions, ...item.transactions];
      lastItem.transactions = mergedDate;
    }
    return acc;
  }, []);
  return merged;
};

const result = await fakeAPIRequest(page);

setMergedList((prevList) =>
	merge(cloneDeep(prevList), cloneDeep(result.items))
);

```
So, it's a bit different from the algorithm test, but the idea is the same. Now, you can return to Leetcode and try solving it on your own.

Algorithm tests can be challenging at times, and we often underestimate them because we rarely use or think about them in real-life projects. This experience has made me reconsider and motivates me to practice more on upcoming weekends.
Alibaba Function compute vs Azure Function
Tags: alibabacloud, azure, functions, serverless
Published: 2021-04-17 13:53:54

---
title: Alibaba Function compute vs Azure Function
published: true
description: Alibaba Function compute vs Azure function
tags: Alibabacloud, azure, functions, serverless
//cover_image: https://direct_url_to_image.jpg
---

This is a comparison between Alibaba Function compute and Azure functions, two serverless services that you can try for free.     


| FEATURE | ALIBABA FUNCTION COMPUTE | AZURE FUNCTION |
| ----------- | ----------- | -------- |
| Languages supported | Node.js (JS), Python, Java, PHP, dotnet (C#), custom | Node.js (JS), Python, Java, dotnet (C#), PowerShell, custom |
| Operative system | Linux | Linux / Windows |
| HTPP VERBS Supported | GET, POST, PUT, PATCH, DELETE, HEAD | GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, TRACE |
| Customization | Memory | Azure compute unit (ACU), Memory |
| Free trier | 1 Millón 400,000gb seconds | 1 Millón 400,000gb seconds |
| Regions | China, USA, Alemania, India, Japón, Australia, Indonesia | Canada, USA, Alemania, India, Japón, Australia, Brasil, Corea, Francia |
| Function types | Http Function, Event Function | Http Trigger, Timer Trigger, Event Grid trigger, Queue Storage trigger, others… |
Generate page title from Phoenix LiveView module name
Tags: elixir, phoenix, liveview
Published: 2021-04-17 13:49:16


I want to update [HTML title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) every time users navigates in my [LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) app. I just thought it would be convenient if I can generate a title from the module name.

[日本語版](https://qiita.com/mnishiguchi/items/99d57a40285db4311fd3)

According to [Phoenix LiveView documentation](https://hexdocs.pm/phoenix_live_view/live-layouts.html#updating-the-html-document-title), it is as easy as providing a title text to `socket.assigns[:page_title]`.

```elixir
defmodule MnishiguchiWeb.EnvironmentLive do
  use MnishiguchiWeb, :live_view

  def mount(_params, _session, socket) do
    socket = assign(socket, page_title: "Environment")
    {:ok, socket}
  end

  ...
```

The problem is solved and it is more than good enough. But I was curious if I can generate the page title based on module name. I found [Phoenix.Naming](https://hexdocs.pm/phoenix/Phoenix.Naming.html) module useful to achieve that.

```elixir
MnishiguchiWeb.EnvironmentLive
|> Phoenix.Naming.resource_name("Live")
|> Phoenix.Naming.humanize()
# "Environment"
```

So I made a simple utility function that wraps `Phoenix.Naming` operations.

```elixir
defmodule MnishiguchiWeb.LiveUtils do
  @doc """
  Generates a page title string based on the specified LiveView module atom.

  ## Examples

      iex(1)> LiveUtils.page_title(MnishiguchiWeb.Environment)
      "Environment"

      iex(2)> LiveUtils.page_title(MnishiguchiWeb.Environment.Measurements)
      "Measurements"

  """
  def page_title(view_atom) when is_atom(view_atom) do
    view_atom
    |> Phoenix.Naming.resource_name("Live")
    |> Phoenix.Naming.humanize()
  end
end
```

Then I can use it in my live views.

```elixir
defmodule MnishiguchiWeb.EnvironmentLive do
  use MnishiguchiWeb, :live_view

  @default_assigns [
    page_title: MnishiguchiWeb.LiveUtils.page_title(__MODULE__),
  ]

  def mount(_params, _session, socket) do
    socket = assign(socket, @default_assigns)
    {:ok, socket}
  end

  ...
```

I know it is not really necessary, but one benefit is that now I can copy and paste that snippet when making a live view without needing to come up with a page title.

There might be cleaner approaches but I am happy with this nice and simple solution.

Speaking of page title, I have written [this other function](https://dev.to/mnishiguchi/phoenix-1-5-page-title-gdg) before so that I can configure site-wide title suffix.

I want to try [Internationalization (i18n)](https://en.wikipedia.org/wiki/Internationalization_and_localization) next.

That's it!
Which riding lawnmower would be best for a small garden?
Published: 2021-04-17 13:28:31

Since the <a href="https://www.machinesrating.com/best-riding-lawn-mowers-under-1000/">lawnmower</a> has been introduced it has become an important necessary liability at homes. Because lawns and yards have always been an important part of our lives. This greenery was a form of life for human beings. But with time when civilization prevailed. The man started making home and then with home, lawns have also become a part of it. Lawns are very important because they are the source of oxygen and bring us a healthy life.

It’s one of our duties to take good care of our lawn. Clean it regularly, make it pest free, and have a complete inspection. Grow grass, grow different flowers, and all that. To have a clean-cut of your grass, having a reliable lawnmower is a great option
Handling touch and mouse events with JavaScript
Tags: javascript, webdev, gamedev, programming
Published: 2021-04-17 13:17:58

Since I was young programming on a Commodore 128, I have learned a fair bit of programming by building games.

One particular interest I have is building dungeon crawlers and maze games. Recently I have been learning more about how to handle both mouse events and touch events in a JavaScript maze game I have been building. 

While working on fine-grained controls that rely on when touch or click events start and end, I learned about how to get a set of button controls to respond to both touch events and mouse events without having both fire at the same time. 

If you are building games or apps and interested in solving similar play control problems, check out my <a href="https://medium.com/codex/separating-touch-and-mouse-events-in-your-javascript-games-62181ae949f2?source=friends_link&sk=dedaef4263e54e47d969cd073faba892" target="_blank">article</a> on separating mouse and touch events</a>, recently published on CodeX. I break down the problem I ran into and have a few code snippets that convey how I solved it.

Thanks for reading!
My javascript / tech / web development newsletter for 2021-04-17 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-04-17 13:13:56

---
title: My javascript / tech / web development newsletter for 2021-04-17 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Coinbase goes public, Bitclout, FSF & RMS, LinuxOnM1, tech & society, AI regulations in EU, speech recognition, NodeJS radio server, laptops, PeerTube, digital transformation, missed calls in India...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-17-04-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Kotlin – SpringCache
Tags: kotlin, springcache
Published: 2021-04-17 12:58:00

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springcache

Kotlin – SpringCache

Performance is a big problem in software development. And Caching is one solution to speed up system. The tutorial will show you how to start with Spring Cache using Kotlin Spring Boot.

<!--more-->
<h2>I. Technologies</h2>
– Java 1.8
– Kotlin 1.2.20
– Spring Tool Suite – Version 3.9.2.RELEASE
– Spring Boot – 1.5.10.RELEASE
– Apache Maven 3.5.2
<h2>II. Goal</h2>
<h3>1. Project Structure</h3>
We build a Kotlin SpringBoot project that uses SpringCache annotations to cache data for enhancing performance.

<img src="https://grokonez.com/wp-content/uploads/2018/02/kotlin-spring-cache-project-structure.png" alt="kotlin spring cache - project structure" width="321" height="186" class="alignnone size-full wp-image-10842" />
<h3>2. Caching</h3>
We define 3 restAPIs {'/cacheput', '/cachable', '/cacheevict'}.

<pre><code class="language-java">
@RestController
public class RestAPIs {
     
    @Autowired
    lateinit var service: CacheService
     
    @RequestMapping("/cacheput")
    fun put(...){
        service.put(firstName, id)
        ...
    }
	
    @RequestMapping("/cachable")
    fun get(...){
        return service.getById(id)
    }
     
    @RequestMapping("/cacheevict")
    fun evict(...){
        service.evict(id);
        ...
    }
}</code></pre>

With a <strong>CacheService</strong> component that builds on Spring Cache annotations {<code>@CachePut</code>, <code>@Cacheable</code>, <code>@CacheEvict</code>}.

More at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springcache

Kotlin – SpringCache
Type-safely parsing JSON to a TypeScript Interface
Tags: typescript
Published: 2021-04-17 12:48:47

Let's say we're working with a REST API that returns a JSON string representing a user. The JSON API agrees to a contract that it returns a string `firstName`, a string `lastName` and a number `accountBalance`. We model the user as an `Interface` in TypeScript as follow:

``` ts
interface User {
    firstName: string;
    lastName: string;
    accountBalance: number;
}
```

The following code is sufficient if we always have the `happy path`:

``` ts
const json = '{"firstName": "Kevin", "lastName": "Le", "accountBalance": 100}'
const user: User = JSON.parse(json)
```

But things can go wrong on the API side. The `json` string returned could be:

``` ts
const json  '{"firstName": "Kevin", "lastName": "Le", "accountBalance": "100"}'
const user: User = JSON.parse(json)
console.log(user)
```

The code does not blow up because `accountBalance` is now being treated as an `any` instead of a `number`. But this "forgiving" behavior leads to other problem downstream:

``` ts
const balanceAfterInterest = user.accountBalance + user.accountBalance * 0.05
console.log(balanceAfterInterest) //1005
``` 

The `balanceAfterInterest` is only supposed to be `105`. A better approach is to catch this problem early and handle it immediately and appropriately.

Head over to [https://app.quicktype.io](https://app.quicktype.io). 

Paste the string `{"firstName": "Kevin", "lastName": "Le", "accountBalance": 100}` to the left pane. Type `User` as the `Name`, and select `JSON` as the `Source type`. 

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

In the box on the right, select `TypeScript` as the `Language` and make sure `Verify JSON.parse results at runtime` is turned-on. Quicktype will generate the resulting code with instruction on how to use it in the middle.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jomsc5j4jowdj90y1na.png)

Now the following code can be much safer:

``` ts
import { Convert, User } from "./user";

const json =
  '{"firstName": "Kevin", "lastName": "Le", "accountBalance": "100"}';

try {
  const user = Convert.toUser(json);
  console.log(user);
} catch (e) {
  console.log("Handle error", e);
}
```
The exception is now caught and handled early:

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

The generated code by [quicktype](https://app.quicktype.io) for `user.js` is:

{% gist https://gist.github.com/khle/ed697e2458b085c7767f093c137ce623 %}
How to convert DVD to mp4 with ffmpeg
Tags: ffmpeg
Published: 2021-04-17 12:43:56

---
title: How to convert DVD to mp4 with ffmpeg
published: true
description: 
tags: ffmpeg
//cover_image: https://direct_url_to_image.jpg
---

I'll write it down how to convert DVD to mov with ffmpeg as a reminder.✍️

## Install ffmpeg

```
brew install ffmpeg
```

## How to convert

Browse for the DVD files in the Finder and get the .vob file name you want to convert.

For example, if you want to convert a file named `VTS_01_1.VOB`.

```
ffmpeg -i VTS_01_1.VOB -b:v 1500k -r 30 -vcodec h264 -strict -2 -acodec aac -ar 44100 -f mp4 convert.mp4
```

For example, you want to combine and convert the files `VTS_01_1.VOB`, `VTS_01_1.VOB`, and `VTS_01_1.VOB`.

```
ffmpeg -i "concat:VTS_01_1.VOB|VTS_01_2.VOB|VTS_01_3.VOB" -b:v 1500k -r 30 -vcodec h264 -strict -2 -acodec aac -ar 44100 -f mp4 convert.mp4
```

Great!👍
Burgundy loafers for men

Tags: loafers, shopping, fashion, burgundyloafers
Published: 2021-04-17 12:14:56

<a href="https://row.barkershoes.com/collections/mens-loafers">loafers shoes</a> are shoes that do not have a lacing or fastening system. For classy style with a modern twist, go with a charcoal plaid suit and a grey dress shirt. Explore the stylish collection of Loafers shoes for men by Barker.