teleren/devto huggingface dataset:
docker compose not docker-compose
Tags: composecli, ubuntu, dockercompose
Published: 2021-04-19 00:37:52

---
title: docker compose not docker-compose
published: true
date: 2021-04-19 00:33:40 UTC
tags: composecli,ubuntu,dockercompose
canonical_url: 
---

docker-compose กำลังจะถูก deprecate แล้วใช้ docker compose แทน มาดูว่าใช้ยังไงกัน

สืบเนื่องมาจาก blog ของ **_คุณปุ๋ย_**

[https://www.somkiat.cc/docker-compose-to-docker-compose/](https://www.somkiat.cc/docker-compose-to-docker-compose/)

ทำให้เกิดอยากลองใช้บ้างซึ่งพบว่า

บน Docker Desktop macOS สามารถใช้คำสั่งนี้ได้เลย (ลองบน M1) เลยลองบน Ubuntu บ้างพบว่ายังใช้ไม่ได้ เลยตามไปสืบค้นดูพบว่า Project คือ

[docker/compose-cli](https://github.com/docker/compose-cli)

ทำมานานพอสมควรถ้าอ้างตามเอกสารนี้

[docker/compose-cli](https://github.com/docker/compose-cli/blob/main/INSTALL.md)

Docker Desktop macOS และ Windows จะถูก built-in ไปแล้วเลยใช้ได้ทันทีเหมือน buildx เลย

### Installation

ตาม link ด้านบนวิธีการติดตั้ง (ผมติดตั้งบน Ubuntu)

```
curl -L https://raw.githubusercontent.com/docker/compose-cli/main/scripts/install/install_linux.sh | sh
```

เมื่อติดตั้งสำเร็จจะมีคำสั่ง docker เพิ่มขึ้นมาใน path

```
/usr/local/bin/docker
```

ลองทดสอบดูว่าตอนนี้คำสั่ง docker ถูกเรียกจาก path ไหน

```
type docker
```

หรือ

```
which docker
```

ถ้ายังเรียกไปที่

```
/usr/bin/docker
```

ก็ให้ปิด shell แล้วเปิดใหม่ อ้อ!! ดูลำดับ path ของ PATH ด้วยนะครับว่า /usr/local/bin ต้องอยู่ก่อน /usr/bin

คราวนี้เราก็สามารถใช้คำสั่ง

```
docker compose
```

ได้แล้วจ้า….

![](https://cdn-images-1.medium.com/max/1024/1*08Mfbr7xQ8pOEh9FeYwpFA.png)<figcaption>docker compose</figcaption>

* * *
Free desktop tool for insightful reporting. Let me know what you think😺
Tags: datascience, analytics, javascript, report
Published: 2021-04-19 11:51:31

Hey Dev.to community😸, 
I want to share the project my team and I are working on. 

We are developers of JS data visualization library that is used by integrators as a powerful pivot table component for any web project. 

Our team has decided to give **free access to the app to all people** using pivots in their everyday tasks.

We have embedded our pivot table into a simple desktop application on the base of our integration with Electron.js.
And now everyone can easily start working with it right after the download. This product is a convenient and simple solution for your fast reporting. And it doesn’t require any extra skills, knowledge or technical specialization.

**Flexmonster Pivot Table & Charts for desktop** is a lightweight reporting tool that provides a rich set of data analysis features: grouping, aggregating, filtering, sorting, pivot charts.
Once you build a pivot grid, emphasize important insights with formatting, customize your report or save results to any format, be it PDF, Excel, HTML, CSV, or PNG.

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

What makes Flexmonster Desktop an effective reporting tool for anyone is:

 * a super quick start by loading data from desired sources,
 * a lot of options to export your result to different formats,
 * a simple way to change the view on your data: charts, compact or flat view,
 * a convenient drag-and-drop and super friendly UI, that allow you to easily configure your report

& more.

You can just [download the app](https://desktop.flexmonster.com/?r=dt1), run it on your computer and quickly make a customized report to present it to your boss or colleagues in just a few minutes.


If you find it useful but need more custom scenarios for your own soft or website we have a [developer's version](https://www.flexmonster.com) of our component that can be embedded in your own project. It is powered by extended API calls and different customization options for any use case. You can also customize the app basing it on our Electron integration

😼 Today is a very important day for us - we are launching on ProductHunt: [https://www.producthunt.com/posts/flexmonster-desktop](https://www.producthunt.com/posts/flexmonster-desktop)
So we would greatly appreciate your feedback on the app and support on the platform😻.

If reporting is something you are familiar with - do give it a try!
Getting started with Jest in just 5 minutes
Tags: jest, testing, testdev, basictesting
Published: 2021-04-19 13:00:40

Testing with Jest, this may sound overwhelming but in fact getting started is very simple.

## To get started let us test a simple function

```js
const celsiusToFahrenheit = (temp) => {
    return (temp * 1.8) + 32
}
```
Here we declared a function named celsiusToFahrenheit which takes in a parameter temp which is temperature and is of type number. It returns the Fahrenheit value of celsius `temp`.

## Now let us test this!
Yeah, this our first test
First `npm i -D jest` here `-D` parameter to add it to dev dependency.
Next create a file name called anything.test.js, anything I mean literally anything.
```js
test('Should convert 0 C to 32 F', () => {
    const temp = celsiusToFahrenheit(0)
    if(temp!==32) throw new Error("This Test Failed")
})
```
Just paste this code and Voila! first test is done, Now let's dive into the code `test()` is a function that is made available globally by jest library when we installed. It takes two parameters, first one being simple the name of the test and second one being the testing function itself.
The testing function when finds an error then shows the output as failed this means a function with nothing inside still shows as a passed test
```js
test('Dummy', () => {})
```
The above test still passes.
But wait, what if there are many conditions to check or some asynchronous code?
Jest got our back
```js
test('Should convert 0 C to 32 F', () => {
    const temp = celsiusToFahrenheit(0)
    expect(temp).toBe(32)
})
```
Yes, expect is also a function provided in-built with jest package, now what that line means is - expect the temp variable to be a number 32 if not throw an error.
Now in terminal root project folder just run `jest` and see the passing test.

That's all and by the way this is my first blog post
Learn JavaScript's for...of and for...in - in 2 minutes
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-04-20 14:01:55


## The `for...in` loop

We use `for...in` when we want to use the **keys** of an Object.

```js
const myObject = {
  keyOne: 'valueOne',
  keyTwo: 'valueTwo',
  keyThree: 'valueThree'
}

for (const propertyKey in myObject) {
    console.log(propertyKey)
}

// Will result in:
> 'keyOne'
> 'keyTwo'
> 'keyThree'
```

As we can see in the example `propertyKey` will be the key of the object.

> You should know
> 💡 `for...in` will ignore any [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)s in your Object

If we want to access the value we can still do it like this

```js
for (const propertyKey in myObject) {
    console.log(myObject[propertyKey])
}
```

But instead of doing this we could use a `for...of` loop.

## The `for...of` loop

The `for...of` loop will iterate over the values of the Iterable Object.

Here's an example with an Array

```js
const myIterableObject = [
  'valueOne', 'valueTwo', 'valueThree'
]

for (const myValue of myIterableObject) {
    console.log(myValue)
}

// Will result in
> 'valueOne'
> 'valueTwo'
> 'valueThree'
```

This is a good alternative to the `forEach` method

This was a quick introduction to these two syntaxes of the for loop in Javascript. I recommend you play around with them. These two are really useful to know when you want to write short for loops.

## 🚀 Follow me on [twitter](https://twitter.com/jordienr) for more
Challenge: Create a `pad` function without using loops!
Tags: challenge, functional
Published: 2021-04-20 14:28:32

---
title: Challenge: Create a `pad` function without using loops!
published: true
description: Create a function that takes some configuration and a value and returns the value with conditional amount of padding 
tags: challenge, fp
cover_image: https://images.unsplash.com/photo-1574642860096-d04d5d385d86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
---

> Photo Credit: Kylie Fitts / www.kyliefitts.com & https://unsplash.com

In any language, implement a function `pad` that takes a value and conditionally pads it with `n` number of `padding`:

```javascript
const padded = pad({
  value: '👋',
  padding: '*',
  requiredLength: 4,
})

console.log(padded) // --> ***👋

//////////
// Case 2: do not pad a value whose length is equal to `requiredLength`
//

const padded = pad({
  value: '👋👋👋👋',
  padding: '*',
  requiredLength: 4,
})

console.log(padded) // --> 👋👋👋👋


//////////
// Case 3: do not overwrite a value that is longer than `requiredLength`
//

const padded = pad({
  value: '👋👋👋👋👋👋',
  padding: '*',
  requiredLength: 4,
})

console.log(padded) // --> 👋👋👋👋👋👋
```


#### Submit your solutions down below! 👇👇👇

Remember, your solution cannot use any sort of loop construct such as `while`, `do`, or `for`!


**WARNING**: Here is [my solution](https://gist.github.com/supermacro/1cdb1dbc40d3a5efa05ccd164162cc9f) in typescript.
All-in-one JavaScript SDK to make web apps passwordless
Tags: showdev, javascript, webdev, security
Published: 2021-04-20 21:10:22

Hey guys! 

I built **Passwordless Platform**, and am *looking for honest feedback to make the product useful*. 

I embraced on a journey to combine passwordless authentication with the power of Single Sing-On across apps:

* I took what **Auth0** is doing (set of SDKs and tools to outsource auth e2e)
* Combined it with what **social login** is doing (SSO across domains and apps)
* Added privacy so that only users have access to identity data
* ...and created **idemeum**. 

Today I have JavaScript SDK that can integrate into your SPA app and enable 3 types of auth flows:

1. Login with one-click
2. Login with biometrics
3. Login with mobile app

Let me know what you think. I will be happy to share working code examples of how to use JS SDK to go passwordless.

Live demo so you can play with auth experience. 

https://jsdemo.idemeum.com
EC2インスタンス作成時にホスト名変更＆AD参加する（RunCommand編）
Tags: aws, windows, ec2, activedirectory
Published: 2021-04-21 02:03:30

前回の[UserData編](https://dev.to/ryanch79/ec2-ad-userdata-19k6)に続き、達成したい目的は同じく下記のままで、

> ①（AWS Managed ADではない）ADに参加
> ②ホスト名を、自分がつけたNameタグの値に揃える

やり方をUserDataではなくもうちょっと柔軟なSystems Manager RunCommandを利用する方法を試していこうと思う。

Systems Managerを利用すると、もちろんできることの幅は非常に広がるのだが、その代わりSSMエージェントのインストールとインスタンスプロファイルの設定等、必要条件を満たす必要はある（Amazon提供のAMIならエージェントは最初から入っているので楽）。

<br>
インスタンスプロファイルに必要なIAM権限と、シークレットマネージャーへのADユーザー認証情報の登録等は前回同様なので省略する。

<br>
Systems Managerの「ドキュメント」を開き、「Create Document」から`Command or session`タイプを選択する。

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jl3us2enbudh8b9czni.png)

<br>
ドキュメントの詳細はこんな感じで作成する。

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

ドキュメントタイプは`コマンドドキュメント`になる。 

<br>
肝心なコマンドのコンテンツだが、前回のPowerShellスクリプトをそのまま流用して、大事そうなパラメータが指定できるようにだけ少し手を入れてYAML形式にしてみた。

```
---
schemaVersion: "2.2"
description: "Join AD and rename host with instance tag"
parameters:
  DomainName:
    type: "String"
    description: "参加するADドメインのDNS名"
  UserCredentialSecretID:
    type: "String"
    description: "AD参加に利用するユーザー認証情報を保持するSecrets ManagerシークレットID"
  HostnameTag:
    type: "String"
    description: "ホスト名を定義するタグ名（デフォルトはName）"
    default: "Name"
mainSteps:
- action: "aws:runPowerShellScript"
  name: "example"
  inputs:
    runCommand:
    - $secretManager = Get-SECSecretValue -SecretId {{UserCredentialSecretID}}
    - $secret = $secretManager.SecretString | ConvertFrom-Json
    - $username = $domainName + "\" + $secret.Account
    - $password = $secret.Password | ConvertTo-SecureString -AsPlainText -Force
    - $credential = New-Object System.Management.Automation.PSCredential($username,$password)
    - $instanceID = Get-EC2InstanceMetadata -Category InstanceId
    - $nameTag = Get-EC2Tag -Filter @{Name="resource-id";Value="$instanceID"},@{Name="key";Value="{{HostnameTag}}"}
    - $newName = $nameTag.Value
    - Add-Computer -DomainName "{{DomainName}}" -NewName "$newName" -Credential $credential -Passthru -Force -Restart
```
（パラメータ値は`{{}}`で囲む）

<br>
これで実際にRun Commandで実行する際には、こんな感じでパラメータを指定できるしEC2インスタンスの初回起動時じゃなくてもいつでも実行でき、たくさんのインスタンスに対しても一気に実行できるので一気に柔軟性が増す。

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

一々パラメータ設定が面倒であれば、デフォルト値をセットしてしまえば良し。

<br> 
実際にやってみたが問題なく動作した。

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


今回は以上。次Chef好き向けにOpsWorksでやってみようかと思う。

 <br>
※イラストはこちらからご提供いただきました：
<a href="https://www.freepik.com/vectors/computer">Computer vector created by macrovector - www.freepik.com</a>
Gitlab Certification offer - due to the success of the offer, it takes end before 30th April 
Tags: beginners, devops, career, gitlab
Published: 2021-04-21 09:11:43

# What is Gitlab?

GitLab is a web-based Git repository that provides free open and private repositories, issue-following capabilities, and wikis. It is a complete DevOps platform that enables professionals to perform all the tasks in a project—from project planning and source code management to monitoring and security.

# Deal => course and certification!

Gitlab is offering the opportunity to self-study and to pass the certification online 

# how to proceed to get that offer ?

1. Go on gitlab 
[Link](https://gitlab.edcast.com/log_in)
2. create an account
3. looking for the course
[Link](https://gitlab.edcast.com/pathways/cy-test-pathway-associate-study-exam/cards/1286380)
4. Enroll
5. When the course is in your basket you can proceed and use the code to get the content free
6. No need to enter any payment information as far as you enter the code, just billing information

Here is the code = E6B8A234458AE3D795

The offer end at the end of the month and you will have a year to do the course and pass the certification.

Enjoy learning !
Day 39 of 100 Days Of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-04-22 05:35:37

I just completed day 39 of 100 days of SwiftUI. Today I learnt about navigation links and also how to parse JSON using hierarchical `Codables`.

Navigation links are used in Swift to show new screens. You can also use the sheet modifier to show a new screen but the sheet modifier is more suited to showing unrelated content like settings while navigation links should be used for showing details about a user's selection.

The `Codable` protocol is used to turn JSON into Swift objects. It works fine for simple JSON structures. But for more complicated ones you will have to help Swift out.

```swift
let input = """
    {
        "name": "Sanmi",
        "about": {
            "level": "9001",
            "occupation": "Android Developer"
        }
    }
    """
struct User: Codable {
    var name: String
    var about: About
}

struct About: Codable {
    var level: String
    var occupation: String
}
let data = Data(input.utf8)
let decoder = JSONDecoder()
if let user = try? decoder.decode(User.self, from: data) {
    print(user)
}
``` 
This code converts a JSON string to a Swift object. It's actually pretty simple. All you have to do is create structs that match the JSON
Weekly Challenge 110
Tags: perl, perlweeklychallenge
Published: 2021-04-27 12:37:04

[Challenge](https://perlweeklychallenge.org/blog/perl-weekly-challenge-110/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-110/sgreen)

# TASK #1 › Valid Phone Numbers

## Task

You are given a text file. Write a script to display all valid phone numbers in the given text file.

## My solution

Let's start with what is a valid phone number. I can tell you only the phone number starting with + would actually work from where I am. But for the task I guess this isn't really important.

If I was doing this outside the task, I would have used [Path::Tiny](https://metacpan.org/pod/Path::Tiny) to read the file. As regular readers would know, I prefer not to use modules that aren't part of core Perl in these challenges.

For this task, I simply read the file line-by-line and output a line if it matches the regular expression `/^(?:\+[0-9]{2}|\([0-9]{2}\)|[0-9]{4}) [0-9]{10}$/`. I use `0-9` as `\d` includes [digits in other languages](https://www.effectiveperlprogramming.com/2011/01/know-your-character-classes/).

## Example

```
» ./ch-1.pl input1.txt 
0044 1148820341
+44 1148820341
(44) 1148820341
```

# TASK #2 › Transpose File

## Task

You are given a text file. Write a script to transpose the contents of the given file.

## My solution

This task didn't mention the format is CSV, although the example would indicate the input is a CSV file. Outside the challenge I would probably use [Text::CSV](https://metacpan.org/pod/Text::CSV) as this correctly handles escaping of values with commas in them.

For this task I read the input file and create an array of arrays with the values found called `@lines`. I then loop through each column and use `map { $_->[$col] // '' } @lines` and the `join` method to display each row of the output. 

The logical-defined-or `//` is used in case some rows do not have the same number of columns and will prevent undef warnings in the output (albeit it to STDERR).

## Examples

```
» ./ch-2.pl input2.txt
name,Mohammad,Joe,Julie,Cristina
age,45,20,35,10
sex,m,m,f,f
```
Painless UI & e2e Testing with Cypress.io*
Tags: cypress, testing, e2e, javascript
Published: 2021-05-04 10:28:49

---
title: Painless UI & e2e Testing with Cypress.io*
published: true
description: Free online meetup Thursday May 6th
tags: cypress, testing, e2e, javascript
//cover_image: https://direct_url_to_image.jpg
---

**Free virtual meetup on Thursday May 6th, 5:30pm (CET)**

▶️ This is a remote event and the link to join the streaming is https://www.youtube.com/watch?v=ZGCF-cT8cmQ◀️

RSVP over at https://www.meetup.com/Software-Development-adesso-NL/events/277711454/

All times are in CET (GMT+1)

05:30pm start stream
05:35pm talk + Q&A
06:35pm wrap-up

🔌 **Painless UI & e2e testing with Cypress (*inc. automated user documentation)**

Ever wanted to write End-To-End Tests with surprising levity?
Having a test environment that is optimized for progress, rather than one that needs to be taken care of, often remains an elusive dream for many organizations.
In his talk, Tobias Struckmeier gives an overview of how you can achieve this dream with the help of cypress and sheds light on some of the strategies that maximize stability in your test suites with minimal effort.
As a big bonus he will present a way of leveraging this to keep your user documentation in sync with your application UI at all times.

👨‍💻 **Speaker's Bio: Tobias Struckmeier**

Tobias Struckmeier has been working in software development for over 20 years. He has been involved in numerous projects as a full-stack developer throughout the years working with a plethora of tools and technologies giving him substantial experience in fields ranging from UX/UI design, over extended CSS knowledge up to CI/CD pipelines and helping teams adapting software quality methodologies. However it was his passion for JavaScript and front-end technologies that earned him his current role of Principal JavaScript Engineer at adesso's HQ in Dortmund.
Next to that, Tobias is also quite active in the community and is running the German Cypress meetup community (https://www.meetup.com/de-DE/cypress-de-community/), is a Cypress ambassador and co-organizes the NgNiederrhein Angular meetups (https://www.meetup.com/de-DE/NgNiederrhein/) and JSUnconf (http://jsunconf.eu), so make sure to go check those out as well!
And if all that was not enough, he's also an amazing guy!

So make sure not to miss it!

**Free virtual meetup on Thursday May 6th, 5:30pm (CET)**

▶️ This is a remote event and the link to join the streaming is https://www.youtube.com/watch?v=ZGCF-cT8cmQ◀️
Making a Copy-wrong right Web Component
Tags: webcomponents, unlist
Published: 2021-05-03 12:43:18

---
title: Making a Copy-wrong right Web Component
published: true
description: One small Web Component to always keep the Copyright year right
tags: webcomponents,unlist
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gj3o2d5ccocfnvfrag7.jpg
---

I might be a bit harsh, but I always judge a book by its cover. 

And websites by the _copyright_ notations:

It is 2021, if I see:

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

I also wonder if your business processes are up to date

One Web Component is _forever_ enough:

```js
customElements.define("copy-right", class extends HTMLElement{
  connectedCallback(){
    this.innerHTML = "Copyright " + new Date().getFullYear()
  }
});
```

Now all HTML required is:

```html
<copy-right></copy-right>
```
<br>
<hr>
<br>

{% jsfiddle https://jsfiddle.net/WebComponents/62f1eLay result,html,js %}
Flutter: Interactive User Guidance or how to make a hole in the layout
Tags: flutter, tutorial, dart
Published: 2021-05-03 21:15:19

Hi folks! I wanna show you an interesting Flutter feature. We can build interactive user guidance using blending colors in Flutter.

This simple trick allows you to build interesting user guidance in the app more than just a picture. It could be really interactive with animation etc.

## Layout
First of all, to build the overlay, you need to wrap the Scaffold widget of the target page in a Stack widget and left the Scaffold widget as a first item.

For the second place, create an overlay that covers the whole Scaffold with a bit transparent dark/light background. The root ColorFiltered has blend mode “source out” and the inner Container has “destination out” in the background, which allows us to clip widgets to clip them in the root ColorFiltered widget.

![1_zVglVM95PiApQJtojxmZ5Q](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ord1tus23c852ucjezr.png)

For example, in this case, we have a Container with size 150x150 and the color white, the color needed for blending and should not be transparent fully otherwise, you will not see it. So color is needed for blending to understand what area to clip out.

Keep in mind that the Stack widget out of Scaffold and doesn’t have any Material support, so wrap it with a Material widget that will be enough.

![1_h4j4mN2AlJ7pFIlrh2zQ9w](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gv1namywajalnf9xihn.png)

## Animation & Steps
I’ve prepared a simple example of switching guidance from one to another with animating clip area from the rectangle to a circle and moving. Just check my repository and get this experience.
The full project source code available on GitHub.

## Demo
There is a light demo that I’ve recorded on the Android Emulator to show you how it works.

YouTube: {% youtube qownBzacasY %}

# Code Samples
**See the original article with code samples by the canonical link.**
Positive And Negative Lookahead
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-04 18:33:30

* *Lookaheads* are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.
* There are two kinds of lookaheads: positive lookahead and negative lookahead.
* A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as `(?=...)` where the `...` is the required part that is not matched.
*  A negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as `(?!...)` where the `...` is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.

* Lookaheads are a bit confusing but let me show you an example:
A more practical use of lookaheads is to check two or more patterns in one string. Here we changed the pwRegex to match passwords that are greater than 5 characters long, and have two consecutive digits. ```
let sampleWord = "astronaut";
let pwRegex = /(?=\w{6,})(?=\D+\d\d)/; 
let result = pwRegex.test(sampleWord);
```
```
console.log(result); will display false
```
```
let sampleWord = "bana12";
console.log(result); here it will display true
```