teleren/devto huggingface dataset:
Deleting all S3 buckets in a single CLI command
Tags: aws, devops, cloud
Published: 2021-06-06 09:32:02

Hi everyone!
This is more like a cheatsheet for myself, but maybe it will be also helpful for someone else. If you use AWS S3 storage service you probably have noticed that you cannot remove not empty buckets straight away via website, you have to clean up the content first. And then, when you have a bunch of buckets you want to delete, it's a bit of pain to remove them one by one via the AWS website interface. AWS command line interface can save us some time here. Don't forget to [install it](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) and [configure your credentials](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html). Then you can use the commands below in your terminal.

#### Delete all S3 buckets stored in your AWS account (including not empty):
```console
aws s3 ls | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{} --force
```

#### Delete only empty buckets (without `--force` flag):
```console
aws s3 ls | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{}
```

#### Delete only buckets with the prefix `old_`:
```console
aws s3 ls | grep 'old_*' | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{} --force
```

---

If you have any questions or suggestion on the commands don't hesitate to leave a comment below. Have a productive day!
I made 18 UI components for all developers
Tags: react, typescript, ux
Published: 2021-06-06 09:28:09

Hello guys,

[Last week](https://dev.to/yuiko/ui-components-website-released-2g8e), I have developed [ui-components.com](https://www.ui-components.com/).
You can find good UI components and copy the scss code just by one click.

[![Image from Gyazo](https://i.gyazo.com/b529fefbefec15379cc81b9d264a17f9.gif)](https://gyazo.com/b529fefbefec15379cc81b9d264a17f9)

I updated this website and added new 18 Ui components.

website: https://ui-components.com
github: https://github.com/YuikoIto/ui-components

The updates are as follows.

- Added new 4 button components
- Added new 2 input components
- Created the Text Animation page and added new 4 text animation components
- Created the Arrow page and added 4 arrow components
- Created the Speech Bubble page and added 4 speech bubble components
- Bug fixes

## Buttons

I added the following 4 buttons.

[![Image from Gyazo](https://i.gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f.gif)](https://gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f)

## Inputs

I added the following 2 inputs.

[![Image from Gyazo](https://i.gyazo.com/53f15ba54cc914618781d5dae62b0173.gif)](https://gyazo.com/53f15ba54cc914618781d5dae62b0173)


## Text Animations

I added the following 4 text animations.

[![Image from Gyazo](https://i.gyazo.com/df7822f488a5029efdea84c633729b05.gif)](https://gyazo.com/df7822f488a5029efdea84c633729b05)


### Tips:

I'm using 5 span tags to separate this ``Hello`` characters, but I didn't want to use for example ``&:nth-child(1)`` and ``&:nth-child(2)``... Then I used ``@for``.

This is really useful.

```scss
  @for $i from 1 through 5 {
    &:nth-child(#{$i + 1}) {
      $delay: $i * 0.1 + s;
      animation-delay: $delay;
    }
  }
```

## Arrows

I added the following 4 arrows.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/06f8af8b-6b34-0c2f-e821-f632cb5b5c79.png)

This is easy, but I think it's a bit bothersome. So I added.

## Speech Bubbles

I added the following 4 speech bubbles.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/604a9cf2-330e-4f86-5359-1a763ac0427c.png)

## Bug fixes

The bug fixes is below.

- When a modal was open, clicking anywhere would close the modal.

**Before**

[![Image from Gyazo](https://i.gyazo.com/202a68f4462402edf371b782c1c323a7.gif)](https://gyazo.com/202a68f4462402edf371b782c1c323a7)

You may want to copy a part of the code while the modal is open, but before updating, no matter where you click in the modal, it closes.

**After**

[![Image from Gyazo](https://i.gyazo.com/c2a0bd6c6aaa55c042d6ab9b869720f7.gif)](https://gyazo.com/c2a0bd6c6aaa55c042d6ab9b869720f7)

Then, I fixed.

🌖🌖🌖🌖🌖🌖🌖🌖
Thank you for reading!
I would be really grad if you use this website and give me any feedback!

🍎🍎🍎🍎🍎🍎

Please send me a message if you need.

- yuiko.dev@gmail.com
- https://twitter.com/yui_active

🍎🍎🍎🍎🍎🍎
อนาคตเอกสารใหม่
Tags: document, publication
Published: 2021-06-04 07:36:13

---
title: อนาคตเอกสารใหม่
published: true
description: 
tags: document,publication
//cover_image: https://direct_url_to_image.jpg
---

7 เมษายน 2562

เอกสารเดี๋ยวนี้อาจจะไม่ได้มาแบบเป็นเล่ม ๆ อย่างเดียว บางคนอาจจะใช้ E-book reading จอ 6 นิ้วอ่าน บางคนอาจจะ print ใส่กระดาษ A4 บางคนอาจจะอ่านใน Tablet บางคนอาจจะอ่านบนจอใหญ่ บางคนอาจจะอ่านในโทรศัพท์มือถือ 

มันคงไม่ค่อยดีเท่าไหร่ที่จะต้องมาจัดหน้าให้ทุกแบบเอง คนที่เขียนเนื้อหาก็ควรจะเขียนเนื้อหาไป ไม่ต้องมากังวลกับการจัดหน้ามาก 

MS Word  มันกึ่ง ๆ ระหว่างจะเน้นเนื้อหา หรือว่าจะเน้นจัดหน้าดี จะเลือกว่าส่วนไหนเป็น heading ก็ได้ แต่นึกอยากจะกำหนด font กำหนดขนาดตัวอักษรของแต่ส่วนเองก็ได้อีก 

จะใช้ Word แบบเน้นเนื้อหาก็ได้ โดยการเลือก style แทนที่จะไปจัดเอง แต่พอทำจริง ๆ ส่วนมากออกมา format ไม่เป๊ะ มันมีวิธีหลายแบบที่จะทำให้เอกสารออกมาหน้าตาคล้าย ๆ กัน มอง style ก็ไม่ค่อยจะเห็นชัดเท่าไหร่ ทีนี้เอามาประมวลผล หรือแค่จัดรูปแบบใหม่ให้เหมาะกับ online หรือแม้กระทั่ง ebook reader จอเล็ก ๆ มันจะเละ

มันมีสิ่งที่คิดมาแก้เรื่องนี้หลายตัวเช่น GNU Texinfo มันก็ใช้ได้เอกสารของ GNU Project ทั้งหมดใช้ตัว Texinfo เวลาดูเว็บของ GNU หน้าตามันจะซ้ำ ๆ เบื่อ ๆ หน่อย แต่ก็เป็นวิธีที่ทำเอกสารที่ทำทีเดียว ออกมาได้ทั้ง HTML, Info, man ทำเป็น PDF ก็ได้ ปัญหาของ Texinfo คือกว่าจะเขียนเป็นมันก็ไม่ได้ยาก แต่ก็ยากกว่า Word

อีกตัวคือ Gitbook อันนี้ใช้เขียนหนังสือเป็นเล่ม ๆ ได้เลย แล้วก็เอามาสร้างได้หลาย format คล้าย ๆ กับ GNU Texinfo แต่ว่าใช้ Markdown คนทาง IT เดี๋ยวนี้หลาย ๆ คนก็เขียน Markdown เป็นเลย เป็น format ที่ดูง่ายมาก ๆ บางคนอาจจะบอกว่าเปิด docx ออกมาอ่าน format ข้างในก็ได้เหมือนกัน แต่มันก็อ่านยากกว่า Markdown มาก ๆ  แต่ถึง Markdown จะง่ายอย่างไรมันก็ยากกว่าใช้ Word อยู่ดี Gitbook ในเว็บเขามีตัวแก้เอกสารแบบ WYSIWYG มาให้เลย แต่ format มันก็จะเป๊ะอยู่ดี WYSIWYG ของเขาไม่ใช่แบบที่ให้มาเลือก font จัดโน่นจัดนี่เอง แต่พอเป็นตัวหนังสือก็จะเลือกได้ว่าจะเป็น Heading 1, Heading 2, Heading 3 อะไรทำนองนั้นไป

ผมมองว่าแบบ  [Gitbook](https://www.gitbook.com/) นี่ล่ะที่น่าจะเหมาะเพราะ

1. แยกกันระหว่างเนื้อหาและการจัดหน้า
2. แก้ไขแบบเห็นเหมือนจริง (WYSIWYG) ได้เลย ทำให้ง่าย
3. ตรวจ format ง่าย เพราะว่าถึงจะเปิดแบบ Markdown มาก็พอจะอ่านรู้เรื่องเลย ทำให้รู้ว่ามันเก็บอะไรลงไปกันแน่
4. อีกข้อหนึ่งที่แถมคือเวลาแก้ไขเอกสารด้วยกันหลาย ๆ คนพร้อมกันผ่านเว็บนี่มันสะดวกกว่าการส่งไฟล์กันไปมาเยอะแยะ

ผมว่าเทคโนโลยีมันพร้อมแล้ว เหลือแต่ว่าคนจะอยากเปลี่ยนเมื่อไหร่

## update 2019-08-04

ยกตัวอย่างเพิ่มเติมเพื่อให้เห็นภาพว่า markdown มันเพิ่มเพิ่มขนาด font ตรง ๆ ไม่ได้ ต้องไปทำผ่านการสร้าง header ทำให้เวลาเอาไปใช้ไม่ต้องมีตีความว่า TH Sarabun PSK 24 นี่มันคืออะไร เป็น header หรือเปล่า หรือ header ระดับไหน
3 YouTube Channels for Flutter Developers
Tags: flutter, dart, resources
Published: 2021-06-06 09:13:28

---
title: 3 YouTube Channels for Flutter Developers
published: true
description: 3 YouTube Channels for Flutter Developers
tags: flutter, dart, resources
cover_image: https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80
---

# Introduction
Hello there!
This week the article will be short and on the point. I want to share my top 3 YouTubers where you can learn Flutter and stay up-to-date with the awesome UI Toolkit from Google to build beautiful apps.

The beauty of Flutter is that you can have one codebase for multiple platforms. You can build Applications for IOS/Android, Desktop (macOS, Linux, and Windows), and even Web!

You will find thousands of YouTubers and Videos about Flutter and i want to share my favorites because out there are such too many resources and it's hard to pick the best ones (at least in my opinion).

# 1. [Tadas Petra](https://www.youtube.com/channel/UCNaJHBXsvbfkItVMNmzmTPQ) 
My all-time favorite when i need to learn something about Flutter. He uploads videos very frequently and always covers the newest trends in the World of Flutter and Dart.

He also explains complicate topics quite easily and always explains them while showing them in a real app. On top of that, he covers topics like how to structure your whole app to keep it organized and scaleable. 

# 2. [Robert Brunhage](https://www.youtube.com/channel/UCSLIg5O0JiYO1i2nD4RclaQ) 
A very nice Channel that teaches Flutter topic quite well and very often while building a cool little app to practice it. His videos are high quality and a must-watch for every Flutter enthusiast!

# 3. [Flutter Community](https://www.youtube.com/c/FlutterCommunityVideos/videos) 
This is a great channel for learning Flutter from very experienced Flutter developers because every week there is a live stream where you can ask questions about Flutter and Dart. And every week they try to invite new quests so you gather quite a few perspectives and learn from so many people that work with Flutter since the beginning. Also sometimes they have Google Developers as guests so you can ask questions about the Framework itself or when a specific feature will be available and so on!

# Conclusion
If you want to learn Flutter or want to stay up-to-date with it then i hope these 3 YouTube Channels will help you with that. Enjoy it and if you already launched an App or working on it then feel free to post it here!

Stay connected to me and my content on [Twitter](https://twitter.com/danytulumidis).

I love to improve myself every single day even if it's just a tiny bit!

Stay safe and healthy guys!

And as always: develop yourself!
Plastic Melting Point 
Tags: melting
Published: 2021-06-06 09:13:26

Tough Plastics have higher <a href="https://plasticranger.com/melting-point-of-plastics/">plastic melting point</a>

Of the six regularly reused plastics, four can withstand temperatures of 100 degrees Celsius (212 degrees Fahrenheit) or above. As indicated by Machinist Materials, polyethylene terephthalate - PET, or recyclable 1 - has a dissolving point of 255 degrees Celsius (491 degrees Fahrenheit). High-thickness and low-thickness polyethylenes - HDPE and LDPE, or recyclables 2 and 4 - liquefy at 130 degrees Celsius (266 degrees Fahrenheit) and 120 degrees Celsius (248 degrees Fahrenheit), individually, as indicated by Dynalab Corp. Most cups intended for hot fluids are made of polypropylene, or recyclable 5. This present plastic's dissolving point is 170 degrees Celsius (338 degrees Fahrenheit). At last, the scope of liquefying focuses for recyclable 6 plastic, officially known as polystyrene, is 100 to 120 degrees Celsius (212 to 248 degrees Fahrenheit) as per T.C. Measurable. 

An Important Exception 

One usually reused plastic, in any case, could be liquefied by boiling water. As indicated by T.C. Criminological, some polyvinyl chloride plastics - PVC, or recyclable 3 - soften at as low as 75 degrees Celsius (167 degrees Fahrenheit). PVC is generally utilized in development applications, so you're probably not going to experience it holding a drink.
My take on a classic
Tags: tictactoe
Published: 2021-06-06 09:01:45

So, codecademy.com give you a final project to complete after teaching you how to code. I was familiar with C++ long before taking up python. I wanted to see what the hype around python was all about.

TicTacToe seemed like a good choice for a final project, but the only issue being that the standard version was done to death. What! a 3x3 TicTacToe grid, pffff and you call yourself a programmer.
I set out to do better, extreme TicTacToe if you will, a 4x4 TicTacToe game.

My code is quite simple, a two player game where getting 4 in a row(horizontal,  vertical or diagonal) would result in a win.

It took a surprisingly short time to program, not too many errors to deal with. 

The code: 
{% github ProdigySmit/final_project %}
D-rex, discord bots made easy
Tags: deno, discord, bot
Published: 2021-06-06 08:33:04

**Let's learn how to build a discord bot Deno style!**

Foe this we will need a libary, for this we have the great libary [harmony](https://github.com/harmonyland/harmony), which let's us interact with the discord API.

But to make things easier we will use [D-rex](https://github.com/Okirshen/D-rex). D-rex is a framework built on harmony that let's u write commands and hooks for messages.

First things first we will need to import the client:
```typescript
import { app } from 'https://deno.land/x/drex/mod.ts'​;​
```
Now we that we have the client object we will need to create a client and register our command. Our bot will have a simple ping command:
```typescript
const client = app(['!']) / creates app and supplies list of prefixes

client​.​command​(​{{ name​: ​'ping'}))
```

Next we can register aliases, this step is not required 

```typescript
client​.​command​(​{{ name​: ​'ping', aliases: ['p', 'test']})​
```

Now all we need is to create the handler:
```typescript
const ping = (message) => {
    message.reply('pong from deno and D-rex')
}

client​.​command​(​{{ name​: ​'ping', aliases: ['p', 'test'], handler: ping)
```

Now we have a client. and a command last step is to start the bot with the API key:
```typescript
client.listen('your API key')
```

**We did it, now we have a running bot made with deno and js/ts!!**


```typescript
import { app } from 'https://deno.land/x/drex/mod.ts'​;

const client = app(['!']) / creates app and supplies list of prefixes

const ping = (message) => {
    message.reply('pong from deno and D-rex')
}

client​.​command​(​{{ name​: ​'ping', aliases: ['p', 'test'], handler: ping)

client.listen('your API key')
```
2 tricks to stay motivated on your side project
Tags: sideprojects, productivity, programming
Published: 2021-06-06 08:17:29

## 1. Build for yourself
This trick helps a lot. If you are building a tool for yourself, there is no need for the "motivation" part at all. You just want to make your life easier with it.

I would say keep a single project/codebase for all the tools you are building. So that there is no yet another "setting up the project" involved. Straight to building stuff.
   
## 2. Charge your customers
In case you don't the tool you built anymore, there are other people still using it. If it's a free tool, having paid customers would give you a boost to work on it more.

Well, nothing is free. You still have to pay the server bills right? (also I'm hoping you are not selling your customer data and making some money secretly 🤷‍♀️). Let me know if you have any tips!


---


In case you haven't read, check out my [Top 1 way to not mess up your project](https://dev.to/onerinas/top-1-way-to-not-mess-up-your-project-29mk). TL;DR - Don't be a perfectionist 😬😆
Create a Dynamic Select Tag for Your Model-Based Form in Ruby on Rails
Tags: rails
Published: 2021-06-06 08:13:15

I was writing an app that had a post model. The post model belongs to a “type.” In order to create my form for my post model, I needed to create a dynamic select field with my options coming from my type model.

Here’s how I did that.

First, in my controller, I got my types and put them in an instance variable to expose it to my view.
```ruby
def new
   @post = Post.new
   @types = Type.all 
end
```
Then, in my view, I had the form:
```ruby
<%= form_with(model: @post, local: true) do |f| %>
  
  <div class="form-group">
    <%= f.label :title %><br/>
    <%= f.text_field :title, class: "form-control" %>
  </div>
 
  <div class="form-group">
    <%= f.select :type_id, @types.map { |t| [t.name, t.slug]}, {}, class: "form-control" %>
  </div>
    
  <div class="form-group">
    <%= f.submit class: "btn btn-primary" %>
  </div>
    
<% end %>
```
Here, my form also includes a title. Also, I’m using Bootstrap for my form.

The important part – the part this post is focused on – is right here:
```ruby
<%= f.select :type_id, @types.map { |t| [t.name, t.slug]}, {}, class: "form-control" %>
```
Here, we’re setting up a select tag and telling it to map to the :type_id param. Then we are passing an array of arrays that contain the name in the option as well as the value of the option.

This generates similar code to the following:
```ruby
<option value="the-slug">the name </option>
```
And that’s how you can generate a dynamic select tag for your model-based form in Ruby on Rails.

For more Ruby on Rails and web development tips, make sure to [follow me on Twitter](https://twitter.com/heyjoshlee).
Python reduce() function
Tags: python
Published: 2021-06-06 07:38:38

After looking into the [Python filter function](https://daily-dev-tips.com/posts/python-filter-function/) and the [Python map function](https://daily-dev-tips.com/posts/python-filter-function/), let's take a look at how the reduce works.

The reduce function can be used to do calculations on a set of objects.
For instance, we can count all prices from a dictionary or get an average number.

## Reduce() function in Python

Let's look at how the reduce syntax looks.

```python
from functools import reduce

result = reduce(myFunction, input)
```

This is not much different than we saw with filter and map. The big difference is that we have to import the reduce function.

The real difference lies in the `myFunction` we are going to make.

This function takes two arguments instead of one, where it receives a new value and the initial value.

```python
from functools import reduce

input = [12, 5, 23, 1]

def myFunction(a, b):
    return a + b

result = reduce(myFunction, input)
print(result)

# 41
```

With this function we loop over each input number and plus it. However Python does not simply do `12 + 5 + 23 + 1` it uses the modifier like this:

```text
(((12 + 5) + 23) + 1) = 41
```

You can see what's happening? It first finishes the item and the previous and keeps doing this for each item.

Again we can use the [Python lambda function](https://daily-dev-tips.com/posts/python-lambda-functions/) to make this even easier.

```python
from functools import reduce

input = [12, 5, 23, 1]

result = reduce(lambda a, b: a + b, input)
print(result)

# 41
```

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
React Hooks Design Pattern
Tags: react, programming
Published: 2021-06-06 07:29:43

I want to share with you one pattern to improve the readability and maintainability of your React components.

Why should we care about maintainability?
If our components are interdependent, not extensible, and not single-responsible, as our application grows in lines of code and complexity, our time to add new features or resolve bugs will also increase.

Let's say we have a form component, and we need to save its values into local storage as it changes.

```jsx
function LocalStorageForm() {
  const [values, setValues] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  return <Form values={values} onChange={handleChange} />;
}
```

We might want to change the code into something like this, adding local storage synchronization logic inside the component:

```jsx
function MessyLocalStorageForm() {
  const [values, setValues] = useState(() => {
    const storedValues = JSON.parse(localStorage.getItem('form'));
    return storedValues || {};
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    const updatedValues = { ...values, [name]: value };
    localStorage.setItem("form", JSON.stringify(updatedValues));
    setValues(updatedValues);
  };

  return <Form values={values} onChange={handleChange} />;
}
```

It works, but is messy, what if we have another form where we want to also synchronize the values with local storage? Could we abstract the complexity of state management to reuse it multiple times? Yes, creating a custom hook only responsible for the local storage synchronization.

```jsx
import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [state, setState] = useState(() => {
    const value = localStorage.getItem(key);
    return JSON.parse(value) || initialValue;
  });

  useEffect(() => {
    const value = JSON.stringify(state);
    localStorage.setItem(key, value);
  }, [key, state]);

  return [state, setState];
}
```

And now, all we need to do is go back to the first version of our code and just change the `useState` to our new custom hook `useLocalStorage`.


```jsx
function LocalStorageForm() {
  const [values, setValues] = useLocalStorage('form', {});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  return <Form values={values} onChange={handleChange} />;
}
```


Photo by <a href="https://unsplash.com/@xavi_cabrera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Xavi Cabrera</a> on <a href="https://unsplash.com/s/photos/lego?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How to Query in SQFLite using Flutter Apps | Flutter SQFLite Tutorials for beginners #2
Tags: flutter, sql
Published: 2021-06-06 07:11:57

In this video we are going to work on the Inserting and Reading the data from SQFLITE. Basically we will going to do the query on sqflite and insert and show data using flutter app.

Link: https://youtu.be/IzUP9COufek

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6ubovuc0uscfu0w179c.png)
Set Up Ubuntu on Raspberry Pi4 without Monitor
Tags: ubuntu, raspberrypi
Published: 2021-06-06 07:03:44

## Step.1 Download Ubuntu image
Download `64-bit` from the following link.
https://ubuntu.com/download/raspberry-pi

## Step.2 Write image on MicroSD card
Write the image by `Raspberry Pi Imager`

You can download Raspberry Pi Imager here
https://www.raspberrypi.org/software/

Writing steps are very simple.
1. open Raspberry Pi Imager
2. Operating System --> `Use Custom`
3. Storage --> Select your microSD card
4. Click `WRITE`

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



## Step.3 Modify networks settings for ssh
Connect your MicroSD to your mac and open `system-boot`.
There is a file, `network-config` and open it by an editor.
Change `MY_WIFI` and `MY_PASSWORD` to your wifi settings.

```sh
version: 2
ethernets:
  eth0:
    dhcp4: true
    optional: true
wifis:
  wlan0:
    dhcp4: true
    optional: true
    access-points:
      "MY_WIFI":
        password: "MY_PASSWORD"
```

## Step.4 Check user-data
Open `user-data` and check `ssh` information.
 
```sh
# On first boot, set the (default) ubuntu user's password to "ubuntu" and 
# expire user passwords
chpasswd:
  expire: true
  list:
  - ubuntu:ubuntu

# Enable password authentication with the SSH daemon
ssh_pwauth: true
```

## Step.5 ssh to ubuntu
Search your localnet work to find out your raspberry pi's ip address.

In my case, I used arp-scan.
```zsh
# install arp-scan via homebrew
$ brew install arp-scan

# scan localnet
$ sudo arp-scan --localnet
```

```zsh
$ ssh ubuntu@raspberrypi_ip_address
# password is ubuntu
```