teleren/devto huggingface dataset:
Fix warn chunk commons [mini-css-extract-plugin] error in Gatsby JS
Tags: gatsby, javascript
Published: 2021-10-04 11:55:36

---
title: Fix warn chunk commons [mini-css-extract-plugin] error in Gatsby JS
published: true
date: 2021-10-04 11:50:11 UTC
tags: GatsbyJS,JS
canonical_url: https://robertmarshall.dev/blog/fix-warn-chunk-commons-mini-css-extract-plugin-error-in-gatsby-js
---

Are you using CSS Modules with Gatsby JS and seeing the following error in your logs when running `gatsby develop` or `gatsby build`?

> warn chunk commons [mini-css-extract-plugin]  
> Conflicting order. Following module has been added:  
> css ./node\_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node\_modules/gatsby/node\_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node\_modules/gatsby-plugin-sass/node\_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!.

----

This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/fix-warn-chunk-commons-mini-css-extract-plugin-error-in-gatsby-js/

----

Until recently so was I. After a bit of research I found the solution.

## What causes the ‘mini-css-extract-plugin Conflicting order’ warning?

This error/warning is caused by the Webpack plugin  `mini-css-extract-plugin` wanting all CSS imports to be in the same order. This is because it confused CSS modules with plain CSS.

Plain CSS is used globally and the order of importing matters as the last imported CSS class overwrites any before it.

As CSS Modules are scoped to a component the order of importing does not matter.

## How to remove ‘warn chunk commons’ message?

To clean up your Gatsby JS build logs, you can use a plugin called `webpack-filter-warnings-plugin`.

This Webpack plugin is added to the Gatsby `onCreateWebpackConfig` function, and uses regex to hide these errors.

Add the following code to your `gatsby-node.js` file.

```
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new FilterWarningsPlugin({
        exclude:
          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
      }),
    ],
  });
};
```

You should now have clean logs!
CircleCIを使用してVercelにデプロイする
Tags: circleci, vercel
Published: 2021-10-02 15:33:03

---
title: CircleCIを使用してVercelにデプロイする
published: true
tags: CircleCI, Vercel
---
 
Vercelにはgit pushを検知してDeployする仕組みがあるが、lintやtestしてからのデプロイはgit push検知の状態ではできないのでvercelのコマンドを使用してCDツールに組み込む。

https://vercel.com/cli

## 準備

vercelのgit integrationを切っておく。

![vercel git repository setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5dnkpze0f497e0qui3e.png)

Vercelの個人設定からCircleCIで使用するTokenを生成する。

![Vercel Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eupqjf4y3dgbsy167kuo.png) 
 
Vercelで生成したTokenをCircleCIの環境変数にセットする。

![CircleCI Env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy2azdjbvfxh78xbfajz.jpg)
 
## 実装

`yarn add` でvercelコマンドを準備し、Scriptを組んでおくと楽に設定できる。

```sh
yarn add -D vercel
```

```json
// package.json
{
  "scripts": {
    "deploy": "vercel --token $VERCEL_TOKEN --prod --confirm"
  }
}
```

`--confirm` はデプロイするための質問をスキップさせることができる。

https://vercel.com/docs/cli#commands/overview/unique-options/confirm

`.circleci/config.yml` に設定を書く。

```yml
# .circleci/config.yml
version: 2.1

orbs:
  node: circleci/node@4.7

jobs:
  deploy:
    working_directory: ~/[ProjectName]
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: install
          command: yarn install
      - run:
          name: deploy
          command: yarn deploy

workflows:
  version: 2
  main:
    jobs:
      - deploy:
          filters:
            branches:
              only:
                - main
```

`vercel --token $VERCEL_TOKEN --prod --confirm` を実行すると現在のディレクトリがプロジェクト名として認識されデプロイされるので、 ymlファイルの `working_directory:` の `[ProjectName]` の部分をきちんと設定すれば意図したプロジェクト名でデプロイすることができる。

![CICD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjja3zitw5agdyt55ttd.jpg)
 
CIの実行結果に本番用のURLが出力されるので、そこからアクセスすることも可能になっている。
Mousemory - remembers mouse position across multiple monitors
Tags: swift, github, opensource
Published: 2021-10-02 15:28:11

![Mousemory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q192ykrmbvyy7af5opi.png)

{% github rezigned/Mousemory no-readme %}

Introducing [Mousemory](https://github.com/rezigned/Mousemory)! A simple macOS utility app that remembers your cursor positions across multiple monitors.

![demo](https://rezigned.com/images/mousemory-v1.0/demo.gif)

Since COVID-19 pandemic. Most people started working from home (including me). If you have a setup where you have more than 1 monitor. You might have felt like me.

When switching between monitors (via `cmd + tab`). I've to drag the cursor from previous screen to the new screen all the time (which can cause repetitive strain injury). Why can't it just remembers the previous position and then restore it when switching back?

![before](https://rezigned.com/images/mousemory-v1.0/before.gif)

So, I was searching for these kind of apps but couldn't find one. Then, I decided to make it myself. It's also a good chance for me to learn more about `Swift` + `macOS` development.

![after](https://rezigned.com/images/mousemory-v1.0/after.gif)
<p style="text-align: center"><small> (Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>)</small></p>

You can check it out here https://github.com/rezigned/Mousemory. (or [download here](https://github.com/rezigned/Mousemory/releases)).

<a href="https://www.buymeacoffee.com/rezigned" rel="nofollow"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&amp;emoji=&amp;slug=rezigned&amp;button_colour=40DCA5&amp;font_colour=ffffff&amp;font_family=Bree&amp;outline_colour=000000&amp;coffee_colour=208A51" style="max-width:100%"></a>
Belajar Linux OS - #6 Desktop Environment (DE) dan Aplikasi
Tags: indonesia, linux, beginners
Published: 2021-10-02 15:26:21

Komponen Desktop Environment (DE) dari Linux OS adalah _"sesuatu"_ yang kita bisa berinteraksi dengannya melalui aplikasi bawaan (atau yang kita install sendiri) seperti file manager untuk me-manage file, atau web browser untuk internetan. 

Kita ga perlu bingung, karena banyak Desktop Environment yang bisa kita pilih sesuai selera kita.

Beberapa yang umum digunakan adalah GNOME, KDE, LKDE dan MATE Desktop.

Pada environment server, biasanya kita ngga akan menjumpai Desktop Environment disana, tapi jika kita maksa buat nge-install, kita akan akan disuguhi tampilan desktop lengkap dengan icon-icon dan aplikasi-aplikasi yang bisa kita klik dan start.

Aplikasi-aplikasi yang biasanya sudah terinstall (bawaan) adalah aplikasi office, software untuk pemrosesan kata (seperti Word), aplikasi email dan game seperti Minecraft, Solitare dan Chess.
Belajar Linux OS - #5 Graphical Server
Tags: indonesia, linux, beginners
Published: 2021-10-02 15:18:37

Ketika Linux OS pertama kali dikenalkan, hampir seluruhnya berbasis CLI (Command Line Interface), yang membuat Linux OS belum sepopuler Graphical OS lainnya seperti Windows atau MacOS X pada saat itu.

Akan tetapi, sekarang kebanyakan Linux OS datang dengan graphical server yang dikenal dengan X server atau X.

X server memungkinkan untuk menampikan tampilan grafis ke layar monitor kita.

Pada environment server, biasanya tidak terinstall X server, tapi jika kita memaksa menginstall X server, kita akan disuguhi oleh login screen dan full GUI (seperti windows dan MacOS) yang bisa di-klik. Pada distro tertentu, kita mungkin perlu mengetikkan perintah `startx` untuk mulai menjalankan X server.
Modals in Hotwire, with zero JavaScript
Tags: rails, hotwire, tutorial, webdev
Published: 2021-10-02 15:18:27

A quick run through of how to create modals in Rails using Hotwire. I didn’t need to write any javascript which is awesome!

{% youtube WK16FeBfbxI %}


The **source code** [before](https://github.com/phawk/hotwire-demo) and [after is available on GitHub](https://github.com/phawk/hotwire-demo/tree/turbo_modals).

---

If you don’t want to watch the video, check below for how it works...

## How it works?

1. Add a turbo frame tag to your layout

  ```erb
  <%# app/views/layouts/application.html.erb %>
  <!DOCTYPE html>
  <html>
    <head>
      <!-- ... -->
    </head>

    <body>
      <!-- ... -->
      <%= yield %>
      <!-- ... -->

      <%= turbo_frame_tag "modal" %>
    </body>
  </html>
  ```

2. Change your links turbo_frame target

  ```erb
  <%# app/views/profiles/show.html.erb %>
  <!-- ... -->
  <%= link_to edit_profile_path(@profile), data: { turbo_frame: "modal" }, class: "..." do %>
    Edit profile
  <% end %>
  <!-- ... -->
  ```

3. Wrap your target views content in a turbo frame

  ```erb
  <%= turbo_frame_tag "modal" do %>
    <!-- Your modal content and styling -->
  <% end %>
  ```

That’s the basics, watch the video to learn more and see it in action!
What is KNN algorithm in Machine Learning
Tags: machinelearning, datascience, knn, knnalgorithm
Published: 2021-10-02 15:17:18

It appears in a lot of Machine Learning interviews that, What is the KNN algorithm in Machine Learning? Today we are going to discuss it in depth. Read the full post to get a basic understanding of the KNN algorithm.

Suppose we have a test Input X and we have to classify this X into a label based on our training dataset. How can we do this? Through the KNN algorithm we have to classify X based on its K neighbours. Let’s say we are classifying X based on K=3, so in order to label the X, we will look into the 3 nearest neighbours of X, so if among the 3 neighbours if 2 labels are Yes then, we will classify X as Yes.

Read more at https://hecodesit.com/what-is-knn-algorithm-in-machine-learning/
Web Dev Repos for Hacktoberfest
Tags: hacktoberfest, javascript, opensource, contributorswanted
Published: 2021-10-02 13:44:37

First time participating in [Hacktoberfest](https://hacktoberfest.digitalocean.com/)?

Well, I have got a solution for all the newbie web devs out there.

If you are having a problem in searching for repos to contribute to, then read this till the end.

I present before you [Gamesflow](https://github.com/Gamesflow)
Gamesflow is a combination of 5 web browser based games built on HTML, CSS and Javascript

This org account contains 5 repositories divided on the basis of level of advancement.

## Beginners
For beginner repos, the HTML-CSS-JS code is based in one html file.

### Repo 1. [2048 game](https://two0four8.onrender.com)

This repo is for a fun and animated version of the OG 2048 game. It is a game where you add numbers of similar values to reach the number 2048. So, this is a good place to start.
{% github gamesflow/2048-game %}

### Repo 2. [Tetradic](https://tetradic.onrender.com)

This is a fun and music-based concentration game where you have to repeat the musical patters. 
{% github gamesflow/tetradic %}

## Intermediate
For intermediate repos, there are separate files for languages along with a little intro to ThreeJS.

### Repo 3. [The Lost Ball](https://thelostball.onrender.com)
This game is inspired from Subway Surfers and it is a 3D runner type game. There is a high score feature too.
{% github gamesflow/the-lost-ball %}

### Repo 4. [Shinigami World](https://shinigamiworld.onrender.com)
For all of you anime fans out there, this game is a ripoff of The Lost ball game above but with completely different aesthetics.
{% github gamesflow/shinigami-world %}

## Advance
For advance repo, there are different kinds of functions and variables for you to try your hand at them.

### Repo 5. [PongZoid](https://pongzoid.onrender.com)
This is a mouse-controlled version of the OG pong game with a home page and color changing graphics. This had been a project of mine earlier and I had been working on its multiplayer version. 
{% github gamesflow/pongzoid %}

## Bonus repo
### Repo 3. [Outrun](https://outrun.onrender.com/)
This is a pixel art based retro car racer. It has an extensive use of music and other aesthetics. It is for everyone on any difficulty level.
{% github gamesflow/outrun %}

If these have helped you in any way, you can extend your support by buying me a coffee maybe.

<a href="https://www.buymeacoffee.com/rainboestrykr" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## Thank you for reading!
Hope this will help you this month, feel free to reach out to me on [twitter](https://twitter.com/rainboestrykr) for any queries or suggestions. Happy Hacktober to you!
Best Way To Learn Kotlin For Experienced Programmers
Tags: kotlin, programming, android, beginners
Published: 2021-10-02 13:44:08

**Practical, reliable, and official online examples from kotlinlang.org**

If you’re an experienced programmer like me and new to Kotlin, the best and quickest way for you to learn Kotlin is to go through this official “[Learn Kotlin By Example](https://play.kotlinlang.org/byExample/overview)”

While learning Kotlin by example, it is best to install IntelliJ IDEA, an Integrated Development Environment (IDE) for Kotlin.

## Steps To Install IntelliJ IDEA

1. Uninstall your old JDK. You can follow the steps [here](https://www.java.com/en/download/help/uninstall_java.html).

1. Download and install the latest JDK. Select “JDK Download” [here](https://www.oracle.com/java/technologies/downloads/).

1. Download and Install IntelliJ IDEA [here](https://www.jetbrains.com/idea/download/) (the community version is good enough).

The easiest way for you to try any Kotlin code is to create a “Console Application” project. I’m sure you’re able to figure that out as an experienced programmer. :)

There is another way is to use Kotlin REPL (Read-Eval-Print-Loop), a tool for running Kotlin code interactively. It can be run from the following menu:

*Tools -&gt; Kotlin -&gt; Kotlin REPL*

You can also try this online interactive environment [here](https://play.kotlinlang.org/). Personally, I prefer to create IntelliJ IDEA projects to save my code samples for reference later.

## New Concepts That You Need To Know

I’m coming from C/C++ and C# programming background. These are some common new concepts that you may need to know:

1. [Null Safety](https://play.kotlinlang.org/byExample/01_introduction/04_Null%20Safety)

1. [Equality Checks](https://play.kotlinlang.org/byExample/02_control_flow/04_Equality%20Checks)

1. [Conditional Expression](https://play.kotlinlang.org/byExample/02_control_flow/05_Conditional%20expression)

1. [Data Classes](https://play.kotlinlang.org/byExample/03_special_classes/01_Data%20classes)

1. [Object Keyword](https://play.kotlinlang.org/byExample/03_special_classes/04_Object)

1. [Extension Functions and Properties](https://play.kotlinlang.org/byExample/04_functional/03_extensionFunctions)

1. [Scope Functions](https://play.kotlinlang.org/byExample/06_scope_functions/01_let)

1. [Delegation](https://play.kotlinlang.org/byExample/07_Delegation/01_delegationPattern)

For more detailed Kotlin vs C# comparisons, you can refer to the following article:

- [Complete C# to Kotlin Syntax Comparisons](https://vtsen.hashnode.dev/complete-c-to-kotlin-syntax-comparisons)

## Conclusion

Kotlin is fun, I like it. The authors of “[Learn Kotlin By Example](https://play.kotlinlang.org/byExample/overview)” have really done a good job. I’m glad I found it. It makes me a lot easier to read and understand this [official Kotlin documentation](https://kotlinlang.org/docs/home.html).

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/best-way-to-learn-kotlin-for-experienced-programmers)*.
AWS Serverless with NestJS : blank-app
Tags: serverless, nestjs, node, aws
Published: 2021-10-02 13:34:18

Good day !

## Introduction 

Coming home from the Devoxx conference in Paris, the main technology that I wanted to try out and explore was **serverless**.

Just to clarify what serverless is in a few words :

> Serverless computing is a method of providing backend services on an as-used basis. Servers are still used, but a company that gets backend services from a serverless vendor is charged based on usage, not a fixed amount of bandwidth or number of servers. (Source : [cloudflare](https://www.cloudflare.com/learning/serverless/what-is-serverless/))


I've been playing around with NestJS (a NodeJS framework) for some time now and wanted to try building a server using AWS lambda functions using NestJS for the backend of an application.

To speed up the process and have a nice base to kickstart my projects, I've built a simple [repository](https://github.com/alexbdet/serverless-nestjs-blankapp) (usable as a template on Github). It contains the barebone structure of a NestJS project and the necessary configuration to deploy it to AWS.

## Project

### What to expect

This project contains a simple "Hello world!" endpoint, a handler that will be used as our serverless function and a basic serverless.yml file.

### Getting Started

#### Prerequisites

You will need an AWS account, and the usual NodeJS development tools (Node, NPM).

Install the Serverless CLI using `npm install -g serverless` and run the `aws configure` command to setup your CLI.

#### Installation 

```
git clone https://github.com/alexbdet/https://github.com/alexbdet/serverless-nestjs-blankapp.git
cd sls-nest-blankapp
npm install
npm run build
sls offline
```
Hit [localhost:3000/dev](http://localhost:3000/dev) in your browser and if everything is setup correctly, you should see our lovely "Hello world!". You're all set ! 

`sls offline` allows you to run the project locally, if you'd like to deploy the server use :
```
npm run build
sls deploy
```

This command builds the necessary services to run your server on AWS (API gateway to reach the function, and the lambda function itself). You can use the AWS console to see the details of the built services.

If you'd like to uninstall your server from AWS and remove the services, use :
```sls remove```

## What's next ?

Check out the [NestJS documentation](https://docs.nestjs.com/) to get started with this framework, and the [Serverless](https://www.serverless.com/) website to learn more about the serverless.yml file.

## Thanks !

Thank you for reading, I'd be happy to help out with any questions or fix any problem with the repo should the need arise.

Have a great day !
Turn what you've learned into experience for jobs!!!
Tags: education, collaboration, career
Published: 2021-10-02 13:20:04

🧗‍♀️🧗‍♀️🧗‍♀️ Level up your web development skills like designing, building, and deploying projects in a team! 

💥💥💥 Boost your knowledge and hard skills, and also "soft" skills like Agile methodology, teamwork, design, etc.

🚀🚀🚀 [Join us](https://chingu.io) in Voyage 35 **starting on November 1** on a 6-week remote project team to boost your Developer skills to land your dream job!
Belajar Linux OS - #1 Apa itu Linux?
Tags: indonesia, linux, beginners
Published: 2021-10-02 13:10:32

Kebanyakan dari kita pasti tidak asing dengan Sistem Operasi (OS) seperti Windows 10 atau MacOS X.

Seperti Windows dan MacOS, Linux adalah sistem operasi juga.

Namun tidak seperti Windows dan MacOS, Linux bersifat open-source dan dipakai oleh banyak device, seperti smartphone, tablet, PC, bahkan supercomputer.

Sistem Operasi Linux terdiri dari beberapa bagian, diantaranya: 
* Kernel
* Bootloader
* Daemons
* Graphical server
* Desktop Environment (DE) dan Aplikasi
* Command Line atau Shell
Golang 101: Değişkenler (Variables)
Tags: go, variables
Published: 2021-10-02 12:59:15

Değişkenler tanımlanma yöntemleri açısından `sabit değişkenler` ve `değişkenler` olarak ikiye ayrılır. Her iki tanımlama yönteminin türleri aynıdır. Sabit değişkenler bir defa değer atanır ve akış içerisinde değişmez. Değişken türlerini `string`, `int`, `float` ve `bool` olarak inceleyeceğiz.

```golang
package main

import (
	"fmt"
	"reflect"
)

// global değişken
const global = "Global Değişken"

func main() {

	// sabit değişken
	const sabit string = "Golang!"
	const (
		sabit2 int    = 1
		sabit3 float32 = 3.14
		sabit4 bool   = true
	)
	fmt.Println("Sabit Değişkenler:")
	fmt.Println(global)
	fmt.Println(sabit)
	fmt.Println(sabit2)
	fmt.Println(sabit3)
	fmt.Println(sabit4)

	// var ile tanımlama
	var dize string = "test"
	var (
		dize2 int
		dize3 string = "değişken"
	)

	fmt.Println("\nvar ile tanımlama:")
	fmt.Println(dize)
	fmt.Println(dize2)
	fmt.Println(dize3)

	// var kullanmadan değişken tanımlama
	degisken := 1
	a, b, c := 1, 3.14, "golang öğreniyoruz!"

	fmt.Println("\nvar kullanmadan değişken tanımlama:")
	fmt.Println(degisken)
	fmt.Println(a)
	fmt.Println(b)
	fmt.Println(c)

	// değişken türleri
	fmt.Println("\nDeğişken türünü çıktı alma:")
	fmt.Println("Dize: ", reflect.TypeOf(sabit))
	fmt.Println("Kesirli: ", reflect.TypeOf(sabit3))
	fmt.Println("Tam Sayı: ", reflect.TypeOf(dize2))
	fmt.Println("Boolean: ", reflect.TypeOf(sabit4))

}
```
```
Sabit Değişkenler:
Global Değişken
Golang!
1
3.14
true

var ile tanımlama:
test
0
değişken tanımlama

var kullanmadan değişken tanımlama:
1
1
3.14
golang öğreniyoruz!

Değişken türünü çıktı alma:
Dize:  string
Kesirli:  float32
Tam Sayı:  int
Boolean:  bool
```
[çalıştır!](https://go.dev/play/p/GfPK1nrUl5_h)


Örnekte çeşitli değişken tanımlama yöntemleri ve başlangıç değeri atamaları yapılmıştır. Başlangıç değerleri sabit değişkenler dışında verilmek zorunda değildir ama örnek olması açısından belirtilmiştir. Değişken türlerini ekrana çıktı alabilmek için `reflect` paketinin `TypeOf` fonksiyonu kullanılmıştır.


## Sabit Değişkenler (const)
Genellikle değişmesine ihtiyaç duyulmayan ama uygulamanın derlenmesi öncesi elle değiştirilmeye ihtiyaç duyulan değerler için kullanılır. Örneğin versiyon bilgi gibi.

## Değişken Türleri
Genel değişken türlerini sırayla detaylandıralım. [Karmaşık sayılara](https://tr.wikipedia.org/wiki/Karma%C5%9F%C4%B1k_say%C4%B1) değinilmedi.

### String (Dize)
[Golang 101: Değerler](https://dev.to/yakar/golang-101-degerler-119a) yazısında da değindiğimiz gibi harfler, sayılar ve özel karakterlerden oluşan değişken türüdür.

### Integer (Tam Sayı)
İşaretli ve işaretsiz tam sayıları kapsar. Türler: `int`, `int8`, `int16`, `int32`, `int64`, `uint`, `uint8`.. `uinptr`. `u` ile başlayanlar `unsigned` yani `işaretsiz` sayıları belirtmektedir. İşletim sistemi mimarisine, işlem yapılacak tam sayının bellekte kaplayacağı alana göre uygun olan kullanılır.

### Float (Kesirli Sayı)
Kesirli sayılar `float32` ve `float64`'dır.

### Boolean (Mantıksal)
Mantıksal değişkenler `true` ve `false` değerlerini alır. Mantıksal işlemlerde ve karşılaştırmalarda kullanılır.