teleren/devto huggingface dataset:
electron-forge настройка paths в tsconfig
Tags: electron, typescript
Published: 2022-05-08 14:55:24

Недавно я посмотрел библиотеку [Electron](https://www.electronjs.org/) и вслед за ним я стал смотреть, какие есть способы написать на нём приложение, используя react. Из [этого списка](https://www.electronjs.org/ru/docs/latest/tutorial/boilerplates-and-clis) я остановился на electron-forge. Как поставить ещё typescript в свой проект описано на [electron-forge](https://www.electronforge.io/guides/framework-integration/react-with-typescript) _(пока идёт перечисление ссылок, проблем нет, всё идёт прозрачно и понятно, верно?)_. У меня была проблема- не заводились ссылочные пути в tsconfig. Вот как её решил.
У меня такая структура каталогов:
![Снимок](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgl7eq5lemffr2l241js.png)
В каталоге client находятся скрипты, касающиеся реакт-приложения: компоненты, роутер, и т.п. И вот хотелось бы делать импорт компоненты не так: `import Logo from '../../../components/Logo"`, а по-красивее: `import Logo from '@clients/components/Logo"`.
Первый шаг - настроить tsconfig:

```json
"baseUrl": "./",
"paths": {
      "@/*": [
        "src/*"
      ],
      "@client/*": [
        "src/client/*"
      ]
},

```
За ним следует второй шаг- настроить webpack, чтобы он тоже понимал эти пути. Это делается в двух файлах:
**webpack.main.config.js**
```js
const path = require('path');

function srcPaths(src) {
  return path.join(__dirname, src);
}

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
};
```
**webpack.renderer.config.js**
Необходимо добавить точно такую же настройку:
```js
  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
```

Ну вот на этом всё: цель достигнута, сокращённые названия путей работают, как хотелось бы.
Буду рад, если кому-то пригодится эта заметка.
What Started You To Be A Developer ?
Tags: devjournal, programming, discuss
Published: 2022-05-08 14:22:56

I was trying to look for myself about why I got into this field. What's so motivated me at first ? Is it because this field is popular ? No. Is is because I want to work at the office ? No because as a developer we can work anywhere we want. Is it because Engineering Career is so great ? Not really

Well the simple answer is I started as developer because **I love gaming.**

You may ask, "wait, but it's not related at all...."
Let me explain how it is...

My first game is a PlayStation-like appearance console with a cartridge one, because inside it a NES system. You may not encounter it, but luckily I found the picture at the internet, check out the image below

![PlayStation-like appearance console with a cartridge one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr0tgnttrtcsg9w4k5gf.png)

It was my first console, I am around 5 years old at that time, as a kindergarten kid I love to spend the time to play game such as Super Mario Bros, Metal Gear, Contra, Knight Rider, etc. 

And I think at that time, unconsciously I develop a skill named **problem solving** because when I game, will be thinking like "damn how do I defeat this boss ?" or like "If I'm doing this, I will got death, if I'm doing this, maybe the enemy will blown away and I got my reward, but I will out of bullet". You got the idea right ? It is problem solving, and problem solving is essential in making an algorithm

Time passes, I experienced the platform like PS1, PS2, PS3 and PC (until now)

Back at the time when I'm about to enter the college, and have a dream that I want to make a game, I want to be a game developer, so I entered the computer science field. It's fun, I make my first game, so happy about it, but I realize that at that time, my country is not a good market for game development at that time, comparing with the country such as U.S or Canada.

Shortly, I swerve my way to Software Engineering because Game Development would not successfully make a living here.

But the point is, thanks to gaming, my dream to become a game developer (even though it failed) I started to learn Computer Science. And now here I am, a Software Engineer.

Fun fact, Elon Musk started as developer because of gaming too, you can check it [here](https://www.youtube.com/shorts/1O7zixzFpa0)

I hope you learned something new from this post, especially for one of you that have a kid and you want to introduce the computer science for them ? I think you can buy them a game console or PC one.
Firebase Miniseries Intro
Tags: firebase, javascript, howto, theeasydev
Published: 2022-05-08 14:20:25

Hi and welcome to my firebase miniseries!

In this 7 part series, i will be exploring briefly but effectively the world of firebase and how to execute perfect and efficient queries in javascript.

We will be looking at the most useful firebase features only, including: auth, firestore, storage, cloud functions, extensions and how to setup your app and connect it to firebase in the simplest way possible.

Looking forward to this course, it's going to be super fun!

Make sure to follow my tag #theEasyDev in order to keep up to date with the latest videos from the series!

See you in the first post!
How to inject all implementations of an Interface?
Tags: java, beginners, tutorial
Published: 2022-05-08 14:12:24


## How to inject all implementations of an Interface?

Suppose you have multiple implementations of an Interface and you want all the implementations injected.

For example:

Handler is an Interface and it has three implementations.

![](https://cdn-images-1.medium.com/max/2000/1*sR-uVxyXVD2ECO5L0NfxIA.png)

    public interface Handler {
        String handle();
    }

All the implementation needs to be marked for @ApplicationScoped like:

    import javax.enterprise.context.ApplicationScoped;
    
    @ApplicationScoped
    public class PrintHandler implements Handler {
        public String handle() {
            return "PrintHandler";
        }
    }

In the class where you want to inject all the implementations, use

    @Inject
    Instance<Handler> handlers;

This Instance is imported from javax.enterprise.inject.Instance;

This handlers the variable will have all the implementations of Handler interface.

javax.enterprise.inject.Instance also implements the Iterable so you can iterate to it and call the required methods.

    @Inject
    Instance<Handler> handlers;

    @GET
    @Produces(MediaType.TEXT_PLAIN)
    public List<String> handle() {
        List<String> list = new ArrayList<>();
        handlers.forEach(handler -> list.add(handler.handle()));
        return list;
    }
Git Head and Detached Head
Tags: git, github, tutorial, beginners
Published: 2022-05-08 14:11:19


## Git Head and Detached Head

**HEAD normally refers to a named branch.**

     **$git checkout master**
     Already on 'master'
     Your branch is up to date with 'origin/master’.
    *** $ cat .git/HEAD***
     ref: refs/heads/master

**If we switch the branch, HEAD will also change the reference to a new branch.**

     **$git checkout -b feature_branch**
     Switched to a new branch ‘feature_branch’
     **$ cat .git/HEAD**
     ref: refs/heads/feature_branch

**It is also possible to check out a specific commit in Git using the SHA1 hash of the commit.**

    **$ git checkout e81c5ca4f2a1093c6c8e1e34a3f185f3db07f377**

    Note: switching to 'e81c5ca4f2a1093c6c8e1e34a3f185f3db07f377'.

    You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by switching back to a branch.If you want to create a new branch to retain commits you create, you may do so (now or later) by using -c with the switch command. Example:
    git switch -c <new-branch-name>
    Or undo this operation with:
    git switch -
    Turn off this advice by setting config variable advice.detachedHead to false
    HEAD is now at e81c5ca first commit

**Let’s check what is HEAD now referring to:**

    **$ cat .git/HEAD
     e81c5ca4f2a1093c6c8e1e34a3f185f3db07f377**

**This is the situation when the HEAD is referring to a Commit instead of a branch is called Detached HEAD.**
LOREM IPSUM
Tags: javascript, webdev, programming, beginners
Published: 2022-05-08 14:03:17

## THIS IS HEADING
**LOREM BOLD** 
_LOREM ITALIC_ 
[](https://www.lipsum.com/)

1. hello world
2. hello world
3. hello world

- hello world
- hello world
- hello world

> “If you want to find the secrets of the universe, think in terms of energy, frequency and vibration.”

```
<div style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/LHZyixOnHwDDy" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/computer-working-cat-LHZyixOnHwDDy">via GIPHY</a></p>
```
<iframe src="https://giphy.com/embed/LHZyixOnHwDDy" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/computer-working-cat-LHZyixOnHwDDy">via GIPHY</a></p>

<img width="100%" style="width:100%" src="https://media.giphy.com/media/jIR4ThBLK9rEzgVKAR/giphy.gif">

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb2n07b9fmd61d1i11qq.jpg)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
用工具觀察 const 與 #define 的基本差異
Tags: c
Published: 2022-05-08 14:02:00

對於使用 `const` 還是 `#define` 來定義常數值, 我想你可以找到許多討論, **這篇文章並不是要來下定論**, 而是要透過編譯器輸出的組合語言, 來看兩者的差別, 以下的比較都是以 GCC 預設的選項編譯, 沒有加上特別的最佳化選項。

## 使用 #define

以下是一個簡單的 C 程式：

```c
#define a 10
int b;

int main(void) {
    b = a;
}
```

接著我們使用 [Compiler Explorer](https://godbolt.org/z/46Tvbsqv3) 觀察編譯器的組合語言輸出結果如下：

![define](https://i.imgur.com/K2X3zhi.png)

這個工具很有意思, 可以讓你對照左邊原始碼觀察右邊編譯器輸出的組合語言, 將游標移到原始檔的某一行, 右邊就會以深藍色標示對應該行產生的組合語言, 像是上圖中右邊深藍色區域顯示的就是對應左邊 `b = a` 這一行的組合語言。如果你對於 x86 的組合語言沒有概念, 可以參考[這篇簡介](https://cs61.seas.harvard.edu/site/2018/Asm1/)。

以下是右邊窗格內的組合語言 (我顯示的是 [ATT 格式的語法](https://en.wikipedia.org/wiki/X86_assembly_language#Syntax), 如果你比較習慣看 Intel 格式的語法, 可以把右邊窗格上方的 `-masm=att` 刪除或是改為 `-masm=intel`)：

```
b:
        .zero   4
main:
        pushq   %rbp
        movq    %rsp, %rbp
        movl    $10, b(%rip)
        movl    $0, %eax
        popq    %rbp
        ret
```

你可以看到因為 `#define` 會在編譯前進行替換, 實際上並不會定義變數, 所以在程式開頭只會看到變數 `b` 被定義為 4 位元組的 0。而對應 `b = a` 的組合語言是這行：

```
        movl    $10, b(%rip)
```

它會直接把 10 搬入 `b` 所在的位址。

## 使用 const

我們把一樣的程式改成使用 `const`：

```c
const int a = 10;
int b;

int main(void) {
    b = a;
}
```

同樣採用 [Compiler Explorer](https://godbolt.org/z/1G9bTEear) 觀察編譯器輸出的組合語言結果如下：

![const](https://i.imgur.com/XlDrFhg.png)

以下就是右邊窗格的內容：

```
a:
        .long   10
b:
        .zero   4
main:
        pushq   %rbp
        movq    %rsp, %rbp
        movl    $10, %eax
        movl    %eax, b(%rip)
        movl    $0, %eax
        popq    %rbp
        ret
```

你會發現因為 `const` 會定義變數, 所以程式一開頭可以看到變數 `a`, 並且數值是 10。而對應到 `b = a` 這一行的組合語言變成這樣：

```
        movl    $10, %eax
        movl    %eax, b(%rip)
```

第一個特別的地方是, 因為 `a` 是 `const`, 所以它的值不會變, 因此實際上產生的組合語言根本不會到 `a` 所在的位址取值, 而是直接使用 `$10`。雖然如此, 實際將 10 搬到變數 `b` 的動作卻還是透過中介的 `eax` 暫存器, 由兩個指令完成。

## 空間與時間的差異

從上述的組合語言輸出來看, 使用 `const` 的版本不但耗費了空間放置變數 `a`, 而且執行時也多了一道指令, 這道指令不但會佔用空間放置指令碼, 執行時也會耗掉時間。以下是我在 Debian Linux 上 GCC 10.2.1 編譯的結果：

```
$ ls -l const define
-rwxr-xr-x 1 meebox meebox 16512 May  8 20:18 const
-rwxr-xr-x 1 meebox meebox 16488 May  8 20:18 define
```

**單純就這個例子而言**, 你可以看到 `const` 的版本比 `#define` 的版本肥了 24 個位元組, 這對於一般電腦上的程式可能無所謂, 但如果是在一些嵌入式應用場合使用的小晶片上, 空間與時間都錙銖必較, 可能就不會考量 `const` 所帶來的好處, 改用 `#define` 了。

透過這樣的工具, 就可以針對相同功能但不同寫法的程式觀察實際編譯後的差異, 再決定使用哪一種寫法。
My opinion on what makes a good Code Review.
Tags: codenewbie, codereview, productivity, git
Published: 2022-05-08 14:01:30

## Why do we do Code Reviews?

Code review is simply what it says on the tin. It is the opportunity for other developers to look at your code commit and review it. 

Code reviews are one of the key elements to the development lifecycle. Without them poor or buggy code could make it's way into UAT and slow down the testing / release process. 

# My tips

### Word comments carefully

Remember that the person's code you're reviewing has probably put a lot of effort into this work, and they haven't deliberately made mistakes, especially those easy to miss spelling mistakes etc. 

Try not to be too soul crushing when leaving comments. 

Don't be so forceful with comments or suggestions. For example rather than saying 
> Change this variable name

Say something like: 

> Perhaps this could be worded to a more descriptive variable name. 

This way the suggestion for improvement is made, but in a way that makes the coder feel they still have a say / matter is open for discussion. 

### Be clear and concise. 

Be straight to the point and clear about what you want changed or are advising. Don't waffle on, beating around the bush simply state the What and Why.

Most git systems these days allow you to click on the line you wish to be changed , and add a comment so it's much simpler to specify the exact line of code you want changed. 

Hosting providers such as GitHub have a "suggestion"  feature which allows you to add a code suggestion directly into the comment, which can instantly be accepted and committed from within the PR. 

## Multiple changes of the same kind. 

Rather than commenting every single occurrence of the problem (this can be overwhelming for coders. Simply add one comment and explain the issue occurs throughout multiple files, and suggest finding all occurrences and updating, e.g a spelling mistake, or repeated code. 

## Not everyone codes like you 

Remember that not everyone codes the same and certainly doesn't always code the way you do. This doesn't mean they are wrong, and nor does it mean you're way is best.  

Always take a step back and think about the key elements of code review. 

- Does the code follow your team's coding guidelines 

- Does the code meet its objective / acceptance criteria.

- Is the code legible and easy to understand what it's doing without the need for heavy comments / documentation. (This one for me is one of the most important, as I'm a huge fan of descriptive method and variable names. 

- Does the code need any refactoring, considering security, performance or simply ease of reading.

- Does the code follow simple design patterns / principles e.g single responsibility, abstraction, encapsulation etc. If not make suggestions on how this can be achieved or perhaps teach those not familiar with it what it means and the benefits.  

These are some of my tips I hope they've been helpful. 

Feel free to discuss your tips and methods of code review in the comments.
What is ICO?
Tags: webdev, design, performance
Published: 2022-05-08 14:01:27

I didn't even know about this image file format until I went to make my first favicon. What's the deal with ICO?

## ICO

Introduced in Microsoft Windows 1.0, the ICO file format was intended for app icons. (MacOS uses the ICNS file format for icons. Windows also allows you to use CUR files, which are meant for non-animated cursors.) Originally 32 x 32 pixels and monochrome, color support wasn't added until Microsoft Windows 3.0. As time went on more color, size, and feature options, like shadows, were added. These days, ICO files can be 256 x 256 pixels and contain 24 bits of colors and 8 bits of transparency.

Windows does recommend images that are 256 x 256 pixels be compressed PNGs to save space, which highlights the unique attribute of a file type like ICO - it's actually several images in either BMP or PNG format. An ICO file contains a directory called ICONDIR that lists the images within it and information like their file size, height, width, and colors. I've [covered PNG in depth](https://dev.to/abbeyperini/sourcing-images-and-optimizing-them-for-the-web-1j5b#image-types) before, but BMP is the bitmap image format. Before Microsoft Windows 3.0, devices needed a device-independent format for transferring images, and [BMP](https://docs.microsoft.com/en-us/previous-versions/ms969901(v=msdn.10)?redirectedfrom=MSDN) was the solution.

As a result, ICO is a file format that is used for situations in which machines will need to pick the optimal image from a group of images based on requirements like size. Raster images like BMP and PNG can only scale so far, so when you need multiple options in one file, reach for ICO or similar formats.

ICO files have native support on both Mac and Windows, and it looks like you should be able to open and create them with most image viewing and editing software. There are so many ways to convert images to ICO format, I can't even list them all here. I cannot overemphasize [how](https://favicon.io/favicon-converter/) [many](https://www.favicon-generator.org/) [free](https://realfavicongenerator.net/) [ICO](https://www.favicon.cc/) [generators](https://favicon.io/) [exist](https://www.favicongenerator.com/). You can also use tools like [GIMP](https://www.gimp.org/) and Photoshop with a plugin. Combining [Inkscape](https://inkscape.org/) with [ImageMagick](https://www.imagemagick.org/script/download.php) allows you to create ICO files in the terminal. You can even [convert JPEGs to ICO in paint](https://www.techwalla.com/articles/how-to-create-an-ico-file-from-a-jpeg-in-paint) in like 4 clicks.

## Conclusion

Sure ICO's cool, makes sense for app icons, and has a lot of support, but how does it relate to web development? Check out the sister blog to this article, [What are Favicons?](https://dev.to/abbeyperini/what-are-favicons-2e9d)
How to get all object values without loop
Tags: javascript, beginners
Published: 2022-05-08 13:59:10


Es8 has introduced a new cool feature called `Object.values()` that can be used to get the values of an object.

with `Object.values` instead of iterating through every element of object we can use it to return all values an object in array.

```js
    const cars = {
        'Toyota': 'Camry',
        'Ford': 'Fiesta',
        'Honda': 'Civic'
    };
    const carsValue = Object.values(cars);

    //['Camry', 'Fiesta', 'Civic']
```
Why is POD the smallest deployable unit in Kubernetes and not containers??
Tags: kubernetes, docker, containers
Published: 2022-05-08 13:44:06

A quick read on why Kubernetes consider POD as the smallest deployable unit and not containers on this blog 

[https://belowthemalt.com/2022/05/08/why-is-pod-the-smallest-deployable-unit-in-kubernetes-and-not-containers/]
Made service with Next.js and PlanetScale
Tags: nextjs, planetscale, googlecloud, showdev
Published: 2022-05-08 12:56:07

---
title: Made service with Next.js and PlanetScale
published: true
description: Made service with Next.js and PlanetScale
tags: nextjs,planetscale,googlecloud,showdev
---

I made a service 'Contact Nite' contact management service with contact form widget for Flutter.

![Eyecatch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fseoi122b1sq0f0jsb46.png)

Like above image, you can place contact form widget by just a easy code pasting.

And you can see contacts in this service.

![Contact list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f2iktxjn7lz2udk0491.png)

Service
https://contact-nite.com/ja

Pub
https://pub.dev/packages/contact_form

Free plan is provided. If you are interested in, try. I'm also using on my app.

If contacts came, notify by email and Slack notification. And you can send and receive mail on the service. You don't need to open Gmail.

## Technology

Package is a simple Flutter package. Service is made by Next.js, PlanetScale, Cloud Run.

### PlanetScale

PlanetScale is a Serverless MySQL Service. I knew it when I'm developing. 

Recently, I had been used Firestore when I make small web applications. Because there are no services cheap and large capacity. But when I found PlanetScale, I tried to change DB to it. Because it has free plan and large capacity. I like MySQL than NoSQL so I'm so excited.

I think I always use PlanetScale when I make somethings.

### Next.js

Made by Next.js. API Server is also Next.js API Routes. So so so easy. There are nothing to think about client and server. Just make. If I work on job, it's not good to use API Routes. But on my indie hacking, I can't use others.

Using Internationalized Routing for English and Japanese localization.

### Deploy

Using Cloud Run. Recently I'm using only this. So I'm now easy to develop with it.

By default, Cloud Run deploys when code pushed. But testing is easier than GitHub Actions, doing like this: push -> Test on GitHub Actions -> Build on Cloud Build (Starts with Webhook from Actions) -> Deploy to Cloud Run.

DB Migration is also executed on Cloud Build.

On testing, using simple API test by Jest and E2E test with Cypress. Cypress is very interesting. On Cypress Dashboard, you can see movie of testing.

### Mail

Using SendGrid. Using Dynamic Templates. You don't need manage mail templates on your service.

And with receiving hook, saving received mail to DB. So you can send and receive mails only on web.

## Flutter

### Localization

Localization was complicated. When develop package, use example project created with package. When developing on it, there were no problems. But when I use the package in other app, localization was not worked well. Fixing was difficult.

### Freezed

No problems. I could use.

### Testing

Package is public. I can use GitHub Actions with no limit. So I write some tests.

## Small story

Contact form on 'Contact Nite' is using its contact form API.