teleren/devto huggingface dataset:
よく使う正規表現の整理 -- 文頭文末やある文字の前後など
Tags: regex
Published: 2022-10-29 07:30:28


## why

正規表現を書くとき、毎回チンタラ書いているので。
まとめて洗い出したくなった。

https://www.youtube.com/watch?v=rhzKDrUiJVk

この動画を参考に学んだ。

regexr.com で実行した。

{char} は任意の文字ってつもりで書いている

---

## {char}* で 0 文字以上の char を検出

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

do*g で d と g の中に挟まれている o がなん文字でも検出する。

間に挟まれているのが o 以外だと検出されない。

---

## .* で全ての文字を検出

https://www-creators.com/archives/2737

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

d.*g で d と g の間に何が含まれていても検知できる。

---

## \w で全ての単語を抽出

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gqhmlsigwgrroym8bsh.png)

バックスラッシュと w で単語を抽出できる

^,$ とは組み合わせられない

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

大文字の W を使うと単語以外を抽出できる

---

## \s で全てのスペースを抽出

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

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

バックスラッシュと s でも同じくスペースとスペース以外を抽出できる。

これでハイフンやアンダーバーなどに置換できるだろう。

---

## ^{char}/gm で各行の先頭の char を抽出する

https://www.tohoho-web.com/js/regexp.htm

/g は 2 番目のヒット以降も検知するオプション
/m は 2 行目以降も検知するオプション

```php
/^I/gm
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cdp4n6g4ncl4k6l3ar5.png)

これで各行の行頭の I だけ検知できる。

---

## {char}$/gm で各行の末尾の char を抽出する

https://www.tohoho-web.com/js/regexp.htm

```php
/dogs$/gm
```

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

同様に dog$ で行末の dog だけ検知できた。
文末の , だけ検知して置換したりするのは便利そう

---

## (?<={char})(.*) で char より後の全ての文字列を取る

https://if.t0m0t.com/post-220/

なんでもナレッジ さんを参考にした。

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

```php
(?<=:)(.*)
```

これで : の後の文字列を抽出できる。

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

?<={char} は char 以降の文字列って意味らしい。

```php
(?<=:)..
```

なので、(.*) の[全ての文字列」という表現を変えて
(..) の「二文字」という表現にすると

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w6abk04s45f26dt4d9a.png)

: の後の 2 文字が取れる。

---

## (.*)(?={char}) で char より前の文字列を全て取る

おなじく なんでもナレッジ さんの記事を参考にする

(.*) で全ての文字を取るのは同じ。
これに組み合わせる条件として

?={char} を使う

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

これで char より前の文字という検索条件になる。

```php
(.*)(?=:)
```

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

これで : より前の文字列が取れた。

?=hoge が hoge より前で
?<=hoge が hoge より後なのは見た目に反する(感想)

hoge<? と ?<hoge だったらいいのに〜〜〜

---

## まとめ

* (.) で 1 文字
* (.*) で全ての文字
* (o*) で o 文字以上の o
* \w, \s で全ての単語, 全てのスペース
* ^hoge/gm で各行の先頭の hoge
* hoge$/gm で各行の文末の hoge
* (?<=hoge)(.*) で hoge より後全て
* (.*)(?=hoge) で hoge より前全て

これらが正規表現で取得できる。
Serokell
Published: 2022-10-29 07:30:04

Are you an organisation looking for someone to build a blockchain application? Get in touch with us! We create solutions that make our customers happy. Join leading companies and startups in trusting us with your next big challenge.We've been helping dozens of fintech clients, and we can do the same for your business. 


Contact Us

Pille tn 7/5-13, Kesklinna linnaosa, Tallinn, Harju maakond 10135, Estonia
(+372) 699-1531

https://serokell.io/
hi@serokell.io
Kubernetes 101 - Component overview
Tags: kubernetes, beginners
Published: 2022-10-29 07:18:24

Before diving into the main setup and nitty-gritty stuff, let's take some time to explore the components that makeup Kubernetes.

This will help us better understand what we are talking about and how it links together.

The main thing to note (at least for me) is that there are things that make up the Kubernetes core and admin side and things we define for our actual application.

## Kubernetes overview

With this in mind, let's look at it in some more detail, starting with the Kubernetes provider high-level overview.

![Kubernetes component](https://cdn.hashnode.com/res/hashnode/image/upload/v1666246842012/rnDVIh9g_.png)

The above image demonstrates a Kubernetes cluster consisting of the following elements.

- Control Plane: The Kubernetes needed part
- Nodes: Basically, your worker machines that run containerized applications

These nodes, in return, host something called Pods, which are the components of the application workload.
The Control Plane manages all of this and ensures everything works as expected.

It's tough to explain each part in one extensive article, so I'll be splitting it into more detailed ones.

- Control Plane
- Clusters in detail
- Containers
- Workloads
- Load balancing
- And so on... 👀

As you can tell many exciting things, we can go super broad or super niche.
At the point of writing, I want to try and keep it high level so it will be easy for anyone with little to no experience to get to know Kubernetes.

> Note: Keep in mind I'm also exploring while writing this, so do let me know if I got something misaligned.

## Why the split matters

It's important to note there are certain things we want Kubernetes to manage.
This is all included in the Control Plane. As mentioned in the previous article, we don't want to be responsible for ensuring enough pods are running at a given time.
And the Kubernetes API handles this perfectly for us.

On the other hand, we want our application to be dynamic and not bound to specifics for a particular server. Hence it's essential to run the node independently.

## Call for action

While this article is a bit short, we are in the early stages of explaining Kubernetes. I want to take the time to ask you for your input.

What are some concepts and things you want me to explore or think I should explain?

Let me know via Twitter/email or whichever way you find convenience. 🙏

### 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)
10 Reasons why your website is slow and it's takeaway.
Tags: javascript, webdev, beginners, tutorial
Published: 2022-10-29 07:09:54

## Intoduction
Do you know a slow website kills conversion? 47% of customers expect a website to load in two seconds at the very most. 40% will abandon it altogether if it takes longer than three.

So let's discuss what makes your website slow and we can fix it.

### 1. Unoptimized Image
- Check your image files that are above 1 MB is totally unacceptable.
- Use JPEG instead of PNG, especially for large images.
- Use the waterfall test to easily scan your site and suggest corrective actions.

{% embed https://tools.pingdom.com %}

### 2.JavaScript Issue.
- Audit your JavaScript scripts. So what is really needed and remove what you don't.
- Asynchronous loading is a must.
- Use Google Tag Manager or Segment. A single script for all your tools.

### 3.Too much flash content.
- Look for HTML5 replacements.

### 4. Excessive HTTP Requests.
- Use Sprites to reduce HTTP requests.
- Reduce the number of total files the user will have to download.
- Minify your CSS and JavaScript files.

### 5. Not making use of caching.
- You can cache CSS, and javascript files on client side and you can cache database queries on the server side.

Note: If you can cache something then do it. But do it carefully so you don't mess with something which can raise "cache invalidation" error.

### 6.Unclean code.
- Don't be lazy and use inline CSS when possible.
- Remove unwanted comments and lines from JavaScript and CSS files.

### 7. Files compression.
- Use G-Zip compression. It wraps all your files into a single container so the server response fast.

### 8.Too many ads.
- Ads requires additional HTTPS request so it increases the load time.

### 9. CDN
- Use CDS'N service. CDN helps to cache your whole website into various node servers available across the globe so your website loads fast.
- Examples: Cloudflare, Fastly, Akami, etc.

### 10.Hosting
- Choose the hosting carefully. Use Netflix or Vercel for static hosting

## Outro.
Thanks for reading here. 
I am new to this blogging kind of stuff.  So I hope you will forgive my mistakes.
This week’s newsletter is out! (29-10-2022) - Captain Elon
Tags: javascript, tech, webdev
Published: 2022-10-29 07:03:11

---
title: This week’s newsletter is out! (29-10-2022) - Captain Elon
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Captain Elon

https://markjgsmith.substack.com/p/mark-smiths-newsletter-29-10-2022

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
使用 Cookie 實現 Client 端數據存儲 - 前端工程師必學的 Web Storage 技術（第一篇）
Tags: javascript, webdev, tutorial, beginners
Published: 2022-10-29 07:00:58

## 本篇要解決的問題

不是每次要取資料時，都必須調用 API 後才能拿到，因為瀏覽器本身就有提供一些空間可以暫存，我們可以把一些不常更新的資料存在瀏覽器上，調用 API 前就先加個判斷，瀏覽器上有存的話就直接取用，沒有存再去調用，這樣可以減少 API 主機的呼叫次數。

關於瀏覽器上的儲存空間，預計會寫成系列文，項目包含：

- Cookie
- Session Storage、Local Storage
- IndexedDB

主要是實作一個 Demo 出來，也會推薦 August 用過後覺得好用的套件，寫起來更快更方便。

最後完成的 Demo 會在這：

<https://letswritetw.github.io/letswrite-client-storage/>

參考資源：

[Browser storage: Local Storage, Session Storage, Cookie, IndexedDB and WebSQL](https://medium.com/@lancelyao/browser-storage-local-storage-session-storage-cookie-indexeddb-and-websql-be6721ebe32a)

[Storage for the web](https://web.dev/i18n/en/storage-for-the-web/)

---

## Cookie

- 限制數量：180 個（Chrome）
- 限制大小：4KB
- 限制期限：可設定，未設定則頁籤關閉就會被刪除

把 Cookie 寫在第一篇，是因為我們真的很常會把一些資料存在 Cookie 裡，基本上隨便進一個網站，打開檢查面版看一下，就會看見 Cookie 被塞了資料，比方我們進到 Google 首頁，會看到以下：

![進到 Google 首頁 Cookie 就會被存值](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb3zt44r0i3obj0kpf53.png)

參考資源的第二篇，寫到 Cookie 的部份介紹的很好，一般 Cookie 不是什麼都往裡面存，會存的資料都有著特定目的，因為 Cookie 會隨每個 HTTP 請求一起發送。

常見儲存在 Cookie 的資料，比方登入會員後，如果想要讓瀏覽器保留登入狀態，一般就是在 Cookie 裡面存某些加密過的值。

Cookie 有限制，Chrome 的話最多可存 180 個 Cookie，每個 Cookie 的大小限制為 4MB。

那當然，請不要真的用到這麼緊繃，August 曾發生過存了太多的資料到 Cookie，結果頁面打開時直接報 400 Bad Request，就是因為 Cookie 會跟著 HTTP request 出去，變成送出去的資料太多，最後是清掉 Cookie 才解決。

Cookie 用原生寫起來會落落長，這邊推薦一個超好用套件：[JavaScript Cookie](https://github.com/js-cookie/js-cookie)。

CDN 引用或用 import 安裝完後，以下是常用的功能：

```javascript
// 存 Cookie
Cookies.set('foo', 'bar');

// 存 Cookie + 設定期限
Cookies.set('foo', 'bar', { expires: 7 });

// 存 Cookie + 設期限 + 限網域
Cookies.set('foo', 'bar',
    { expires: 7, domain: '.example.com', path: '/' }
);

// 抓 Cookie 的值
Cookies.get('foo'); // => 'bar'

// 刪 Cookie
Cookies.remove('foo');

// 刪 Cookie，如果存的時候有指定網域時
Cookies.remove('foo',
    { domain: '.example.com', path: '/' }
);
```

---

## Demo 及原始碼

Demo 及原始碼都放在 GitHub 上了，取用之前麻煩分享本篇或在 GitHub 上按個星星，你的小小動作對本站都是大大的鼓勵。

Demo：<https://letswritetw.github.io/letswrite-client-storage/>

原始碼：<https://github.com/letswritetw/letswrite-client-storage>

---

## 瀏覽器上的儲存空間系列

- [Cookies](https://www.letswrite.tw/client-storage-cookie/)
- [sessionStorage、localStorage](https://www.letswrite.tw/client-storage-local/)
- [IndexedDB](https://www.letswrite.tw/client-storage-idb/)
My first decent open-source project! 🎉 Isomera, the headless CMS for business representative websites
Tags: javascript, opensource, cms, github
Published: 2022-10-29 06:51:44

Building a headless CMS. 😎 It's called Isomera.

Reason - got tired of setting up Strapi again and again and again.

Usually, CMS needs are the same. News, contacts form, some text variables... Thinking of adding a visual builder for data structures too.

Other cloud-hosted headless CMS getting damn expensive when looking at features like roles.

The ideal scenario is that I configure my data structures, add content, then build a website on Next.js, deploy on Vercel, add the client to the CMS with limited permissions, and that's it. The pretty standard one, I suppose.

And also, always thought it would be cool to have some decent opensource project anyway.

So I started, got one active contributor already, some interested potential contributors, and everything is set up, even the production environment.

This will be community-built and deployed on production. And also, I'm thinking of keeping it accessible for all. There's a sponsorship feature on GitHub for those who'd like to help, too 😊

How cool is that? You use a SaaS product for your day-to-day operations, need a feature, make a PR, and it's there! That's the vision. ✨

Let me know if you want to be a part of this project. Everyone can contribute. Yes, I'm talking about engineers, designers, content creators, marketers, managers, you name it!

https://github.com/cortip/isomera
Cara Antar Komponen HTML Berinteraksi Tanpa Framework JavaScript
Published: 2022-10-29 06:32:20

---
title: Cara Antar Komponen HTML Berinteraksi Tanpa Framework JavaScript
published: true
description: Mudah ternyata. Memanfaatkan dispatch event.
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-29 06:24 +0000
---

Jadi, di sini kita menggunakan `localStorage`. Caranya seperti ini:

Pada setter:

```javascript
localStorage.nama = "Zen";
dispatchEvent(new Event("storage"));
```

Kemudian, pada getter:

```javascript
addEventListener("storage", (x) => {
  if (x.key == "nama") {
    console.log(`Namanya adalah ${localStorage.nama}`);
  }
});
```
Refactoring my SSG
Tags: javascript, opensource, programming
Published: 2022-10-29 06:23:15

In refactoring my code, I focussed on removing global variables, reducing code duplication, adjusting my IF and ELSE statements for clearer logic, and shortening the body of my functions.


## Change List
- Removed `outputPath` global constant
- Removed `htmlLangAttribute` global variable
- Renamed `parseFile` to `parseDir`
- Adjusted the IF and ELSE blocks in `parseDir` to make logic easier to understand
- Edited `main.js` such that `--lang` CLI option is only parsed if an `--input` option is provided
- Extracted function `generateHtmlBody` from `writeHtmlFile`
- Extracted function `parseOneFile` from `parseDir`


## Improvements
Previously, my code used 2 global variables and 1 global constant. I removed the need for the constant (`outputPath`) and 1 of the variables (`htmlLangAttribute`).
The `outputPath` constant stored the default filepath './dist' for the output directory (where generated HTML files would be saved). This constant has been removed and the default filepath is defined internally with a function (`setOutputFolder`).
The `htmlLangAttribute` was used to save, as a string, the value for the 'lang' attribute when generating HTML files. This information is now passed in to the relevant functions as a parameter instead of existing as a global variable.

The `parseFile` function was renamed to `parseDir` to better reflect its intended purpose. `parseDir` reads the files inside a folder, and if any of them are folders, it will recursively parse those sub-folders. If the files are single-files, that file is read and an HTML file is generated from its text content.

A new function `generateHtmlBody` was extracted from `writeHtmlFile` which handles converting an array of strings into HTML paragraphs and an HTML title element.

A new function `parseOneFile` was extracted from `parseDir`. I moved the code which handles the reading and writing of a single file from `parseDir` into a function `parseOneFile` and then invoke `parseOneFile` as needed.


## The Interactive Rebase
The interactive rebase was very easy to do. I squashed all of the commits into the oldest one and edited its commit message to reflect the later changes.


## Bugs
When I started refactoring my code I realized that, after implementing the recursive folder parsing feature, the **index.html** file was no longer being generated correctly.
I was not able to resolve this issue as yet though I've ruled out some of the possible solutions I came up with previously.


## Changing history with Git
This was my first experience with using the `rebase` feature to change the history of commits on a repo. It turned out to be fairly easy, since I had kept each of my commits limited to a single change so squashing and renaming them was not difficult.
I built my own Tweet scheduler which costs less than 1$ per month
Tags: twitter, javascript, webdev
Published: 2022-10-29 06:20:11

I wanted a simple scheduler that will post tweets from my Notion database to Twitter. 

I wanted an app without any bells & whistles, just a dumb scheduler. I did not want to pay 10$/mo just for that. So as any developer would do, I decided to write my own scheduler 😂. 

Here's how I did it.

I wrote a script `tweeter.js` which does the following

- Fetch content from a Notion database.
- Prepare the tweet
- Send it to Twitter based on the scheduled time slot
- Mark the tweet as posted in Notion.

I have hosted the scheduler in AWS and it runs as a container in ECS. 

I use Amazon EventBridge rule to create a new container every 30 minutes. This container when started executes `tweeter.js` and terminates. This way, I don't have a server running all the time, which in turn results in reduced costs.

It costs less than 1$ a month and I can schedule as many tweets/threads I want. 

One caveat is that the tweets schedule time is not accurate to the specific minute. It depends on the frequency at which a new container is created. I have set it to 30 minutes, so if you schedule a tweet between 10:00 & 10:30 all of them would be tweeted at the same time. 

### References
ECS infrastructure setup - https://github.com/vthub/scheduled-ecs-task
Deep Learning Final Year Projects
Tags: deeplearning, finalyear, beginners, tutorial
Published: 2022-10-29 06:19:20

Takeoff Edu Group provides the most creative conceptions and ideas that can make very effective final year projects for scholars, experimenters, and engineers. So browse through our list of [deep learning final year projects](https://takeoffprojects.com/deep-learning-final-year-projects) and choose the smart final year projects for your requirements. 
 
Deep learning is principally the subset of machine learning, which is grounded on artificial intelligence neural networks. Day by day the compass of deep learning is speedily expanding as it can mimic the earthborn brain with its neural networks technology. These neural networks try to imitate the geste of the earthborn brain by matching the capability, allowing it to learn from a large volume of data and make accurate prognostications from the given data which is opposed to machine learning which make use of simpler principles.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q8vrtbars2sa9qtz7ly.png)

Deep Learning has come up with a lot of fascinating applications such as virtual assistants, Alexa, Google Assistant, self-driving cars, and fraud detection, a few years ago we have hardly imagined that we would come across these deep learning applications but it’s now the reality.
 
Engineering student projects for B.Tech and M.Tech final year students. Takeoff Edu Group offers a wide range of projects best for [deep learning final year projects](https://www.youtube.com/watch?v=sO73UgV7qoo) looking for magnificent final projects at low cost. 

Top 10 deep learning final year projects:

- [Real Time Face Recognition for Library Check in Check out System](https://takeoffprojects.com/project-details/real-time-face-recognition-for-library-check-in-check-out-system--15797)
- [A Novel Time-Aware Food Recommender-System Based on Deep Learning and Graph Clustering.
](https://takeoffprojects.com/project-details/a-novel-time-aware-food-recommender-system-based-on-deep-learning-and-graph-clustering--15730)
- [A Dish Recognition Framework Using Transfer Learning](https://takeoffprojects.com/project-details/a-dish-recognition-framework-using-transfer-learning--15729)
- [Fabric Defect Detection using Deep Learning](https://takeoffprojects.com/project-details/fabric-defect-detection-using-deep-learning--15728)
- [Detection of Smart Selfie using Deep Learning](https://takeoffprojects.com/project-details/detection-of-smart-selfie-using-deep-learning--15727)
Which one should I choose? (To get a job as fast as possible)
Tags: beginners, webdev
Published: 2022-10-29 06:05:36

I started learning programming not very Long ago and I love it. For now I need to get a job as as fast as possible, so I do some research (I don't know if it is enough). Should I learn html css js jQuery php mysql first ? And then after getting a job I will learned other(I know you have to learn continually in tech industry) Or learn MERN directly.
Plz give some advice to this newbies

Thank you for your effort

My dream is to become a full stack web dev😁
Start small and grow after - AquaHub #3
Tags: webdev, career, typescript
Published: 2022-10-29 06:00:00

In todays blog we discuss some new plans and stuff I was thinking about to change. Even if I **had** a specific plan I needed to take a step back and reconsider my plan.

- [🤏 Start small](#start-small)
- [🛠 First software]($first-software)
- [🔮 Concepts](#concepts)

## 🤏 Start small
Maybe some of you read my [first](https://dev.to/jannisdev/the-beginning-of-my-journey-516d) or [second](https://dev.to/jannisdev/the-plan-and-its-optimal-stack-aquahub-2-4fk2) blog post. I was already thinking about having a central authentication provider and teams systems and so on.
But I had to tell myself... _**slow down**_. I can't start with the beginning. I bet some of you have also experienced this *"I want everything already at the beginning"*. So now I take a step back and tell you how _I am going to start small and grow later._

## 🛠 First software
Now because I decided to start with a small software I already wanted to do, I'm going to introduce you to it.
**A hub for software projects**. A simple UI, awesome user experience and many different features for project managers as well as project searches.
In a small addition to the stack I am now going to use **NextAuthJS* for authentication.
In the future I will generally post about the progress of this specific software and sometimes even general interesting facts about AquaHub.

## 🔮 Concepts
Maybe some of you also read my other general blogs about different concepts and software. I write blog posts about different softwares and concept I will implement in AquaHub and now specifically in the documentation too.

Here a quick list of them:
- [Build a Bitwise Permission System](https://dev.to/jannisdev/build-a-bitwise-permission-system-ocl)
- [ExpressJS like API in NextJS](https://dev.to/jannisdev/expressjs-like-api-in-nextjs-483e)

**Thanks for reading!**

<a href="https://www.buymeacoffee.com/jannisdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Support me" height="20" width="80"></a>
Laziness And Hard Work Combined
Tags: beginners, webdev, programming, tutorial
Published: 2022-10-29 05:56:12

**“Tutorial Rat-Wheel,” Procrastination And the Fear of Fear Itself / “Just Do It!”(TRAP-FEAR & Do It [TFDI])**

For the next three months—before Dec 31, 2022, I’m going to try to post a series of very brief journal posts. The topic: self-accountability, and the need to do like “Nike,” “Just Do It!”

**_TFDI: Post 1; Dear Self…_**

>> Great, you’ve collected the videos, free books, online resources, etc.

>> But how many actual sites—-simple or advanced, but **functional**—-have you built?

>> Surely, you can do better! 😡