teleren/devto huggingface dataset:
MSWord Heading
Tags: msword, tips, documentation, sep490
Published: 2023-07-19 16:18:54

trong Word, có 1 chức năng gọi là Multi Level List heading, 
cái này cho phép chúng ta tự động đánh số cho heading mà không cần phải tự "đếm" 
tưởng tượng bạn có 60 cái đoạn nội dung -> 60 cái header, và giờ bạn xoá đi cái thứ hai -> ngồi edit số cho từng hạng mục cho 58 cái còn lại 😱 
nếu áp dụng tự động chỉnh lý thì Word nó sẽ tự động "chỉnh số" cho chúng ta. 
để dùng chức năng đó thì chúng ta sử dụng tính năng trong Work gọi là Multi Level List, nó nằm trong Menu / Home / Paragraph / icon Multi Level List, chọn option Heading. 
với chế độ default Word sẽ tự đánh: 
1 tiêu đề cấp 1 
1.1 tiêu đề cấp 2 
1.1.1 tiêu đề cấp 3 
... 
nhưng, đôi khi chúng lại lại muốn cái heading 1 thì không đánh số, mà từ heading 2 trở đi mới đánh số 1 🙂 và heading 3 thì đánh 1.1 
nghĩa là 
tiêu đề cấp 1 
1 tiêu đề cấp 2 
1.1 tiêu đề cấp 3 
2 tiêu đề cấp 2 thứ hai 
2.1 tiêu đề cấp 3 thứ hai 
...
ờ chướng rứa rồi xử lý sao? 
để giải quyết vấn đề đó thì mình dùng chức năng "Define Multi Level List" 
rồi chỉnh lại như trên hình


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7f3hd56j1xkn9c9x16t.png)
Use case vs Screen - trường hợp sử dụng vs màn hình
Tags: git, productivity
Published: 2023-07-19 16:04:32

Use case vs Screen - "trường hợp sử dụng" vs "màn hình" 

mấy nay review use case, chầm kẻm 🙁 cuối tuần trong lúc đang bí bên cái deadline nên viết cái này để relax chút 🙂  
cái "use case" nó chỉ đơn giản là "trường hợp sử dụng" / "tình huống sử dụng" của user nên nó không phải là "màn hình" (cái này nằm trong screen flow), cũng không phải là "trình tự thực hiện" (cái này thì nằm trong activity diagram)

ví dụ như 5 cái use case bên dưới nó sẽ nằm gọn trong 1 "màn hình" mà thôi. 

1. đọc bài viết 
2. like bài viết. 
3. chia sẻ bài viết.
4. "save" bài viết 
5. nhận xét bài viết. 

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

nhưng cũng có thể 1 "use case" nó sẽ là sự kết hợp của nhiều màn hình, thậm chí nhiều hệ thống khác nhau, mới hoàn thành được cái use case đó. 

kinh điển ở đây là cái use case `register`, có xác thực OTP qua phone SMS, nó sẽ gồm 3 màn hình (*) và 1 external service event 


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

1. user mở màn hình đăng nhập, điền thông tin, submit 
2. hệ thống gửi OTP đến số điện thoại mà user đã nhập 
3. user nhìn thấy màn hình thông báo "1 sms chứa OTP code sẽ được gửi đến phone của bạn, vui lòng nhập vào khung text bên dưới" 
4. user nhập OTP xong nhìn thấy màn hình thông báo "chúc mừng bạn đã đăng ký thành công" 

nhắc lại định nghĩa use case theo IBM: 

> một use case mô tả một chức năng mà 1 hệ thống thực hiện để đạt được 1 mục đích của user. một use case phải sản sinh 1 kết quả có thể dự kiến được mà mang lại giá trị cho người dùng của hệ thống. 
> 
> A use case describes a function that a system performs to achieve the user's goal. A use case must yield an observable result that is of value to the user of the system.
> [link to IBM](https://www.ibm.com/docs/en/engineering-lifecycle-management-suite/lifecycle-management/6.0.1?topic=cases-use)

(*) 3 cái màn hình này có thể được code để nằm trong 1 cái "màn hình điện thoại" hoặc 1 cái màn hình web (không đổi URL), nhưng đấy là vấn đề coding / UX, không phải vấn đề của phân tích yêu cầu.

Đọc thêm: [Use Case Diagram và 5 sai lầm thường gặp](https://thinhnotes.com/chuyen-nghe-ba/use-case-diagram-va-5-sai-lam-thuong-gap/)
Storyblok Svelte SDK ready for 4.0 🚀
Tags: webdev, announcement, headlesscms, storyblok
Published: 2023-07-19 15:57:05

Hi y’all svelte-y Storyblok fans, 

We are super excited to announce that we have released our [Svelte SDK v3.1.0](https://github.com/storyblok/storyblok-svelte/releases/tag/v3.1.0) with support for Svelte 4. 

However, if you’re still on Svelte 3 we got you fully onboard as our new Svelte SDK version still supports it!

The playground has also been fixed in this refactoring process.

We are super excited to see what you are building with Storyblok and Svelte, and are always curious about your feedback. Let us know if anything comes up, for example by joining our [Discord](https://discord.com/invite/jKrbAMz) or reaching out on [Twitter](https://twitter.com/storyblok). 

If you are new to Storyblok & Svelte, check out our [SDK](https://github.com/storyblok/storyblok-svelte) or the [Ultimate Tutorial](https://www.storyblok.com/tp/the-storyblok-sveltekit-ultimate-tutorial) to get started; if you are already super experienced and want to share your knowledge, you might like to check out our [Storyblok Ambassador](https://www.storyblok.com/ambassadors) and [Community Writer Program](https://www.storyblok.com/fs/write-for-our-blog) 🤗

happy hacking 🎉
Vulnerability Management at Scale With Amazon Inspector
Tags: aws, amazoninspector, vulnerabilitymanagement, awssecurity
Published: 2023-07-19 15:56:22

Amazon Inspector for automated and continues vulnerability management at scale. This includes things like Software vulnerabilities as well as unintended network exposure to outside world.

Amazon Inspector automates security scans and assessments for your applications for Software vulnerabilities (such as operating system and all installed applications) and unintended network exposure and deviations from best practices. Amazon Inspector can be enabled at AWS Organization level for multi-account management and implement automated discovery and continues scanning. This service provides you near real time findings with a inspector score denoting the severity level along with steps for remediation of the findings. Amazon Inspector can scan EC2 instances, ECR Images (Elastic Container Registry) and even Lambda functions.

The findings can be inspected via the Amazon Inspector Dashboard, integrated with other AWS services like AWS Security Hub, Amazon Event Bridge to create security workflows to apply remediation and for issue resolution.

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

In Amazon Inspector, a finding is a detailed report about a vulnerability that affects one of your AWS resources. Amazon Inspector generates a finding whenever it detects a vulnerability in your AWS resources. Each finding has the name of the detected vulnerability and provides a severity rating, information about the affected resource, and details such as how to remediate the reported vulnerability.

Amazon Inspector continually scans your compute environment and stores your active findings until it detects that they are remediated. A remediated finding is automatically detected and closed, and then deleted after 30 days. A finding is assigned one of the following states:

**Active**
The finding is identified by Amazon Inspector and has not been remediated. Active findings are subject to suppression rules and, if applicable, the status is changed to Suppressed.

**Suppressed**
The finding meets one or more criteria of one or more suppression rules. Suppressed findings are hidden from most views, except for the Suppressed findings list.

**Closed**
After a vulnerability is remediated, Amazon Inspector automatically detects it and changes the state of the finding to closed. Closed findings are deleted after 30 days if there are no other changes.


With that we have come to the end of this article.

Thank you for your time...
Greenshot không nhận phím PrtSc
Tags: tips, productivity
Published: 2023-07-19 15:49:46

// dành cho greenshot user, 

một ngày đẹp trời nào đó nhấn phím PrtSc mà nó nhảy ra Windows Snipping tool thay vì Greenshot thì check lại chỗ cái setting "Use PrtSc key to open Snipping Tool: này trong Settings/Accessibility/Keyboard


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

Greenshot, phần mềm chụp ảnh màn hình miễn phí, nguồn mở, phát triển mạnh cho cả Win và Mac,
Win free,
Mac thì theo văn hóa Apple
https://getgreenshot.org/downloads/
bật tính năng "Drop" của Edge với iPhone
Tags: tips, tutorial
Published: 2023-07-19 15:46:49

Bạn Edge bạn ấy ra 1 tính năng rất hay, gọi là DROP, đại loại là giúp đang ngồi làm việc trên lap thì nhanh chóng ném 1 file qua mobile và ngược lại, 💪
này không mới, bạn Zalo có từ hồi lâu léc, 🤡
nhưng khi chúng ta có 1 tính năng tiện dụng như vậy dc tích hợp vào trong cái Browser làm việc hàng ngày thì nó sẽ hiệu quả hơn nhiều, đặc biệt khi làm việc ở "đâu đó". 🥲
vấn đề là, bạn Edge trên iPhone say "dell" 💀
mày mò mãi, cuối cùng lướt ngang chỗ Reddit, có 1 ông chỉ "vào trong flag enable lên" thì mới dùng dc.


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3vckmwiogicwrb78p33.png)
Next.js Hangout Thread
Tags: nextjs, discuss, watercooler
Published: 2023-07-19 15:42:25

Hey, this is a weekly hangout thread.

This is a post where you can discuss anything related to Next.js.

You can also share anything new you've worked on with Next.js or any new articles you've created which talk about Next.js.

Feel free to ask any questions as well!
Live Chat - Customer Service [Refine Hackathon]
Tags: refinehackathon, nextjs, typescript, webdev
Published: 2023-07-19 15:41:24

## What I built 
Website for customer support service. In this website customer can chat with agent to discussion about they problem.
### Category Submission: 

- Best Overall Project
- Most Visually Pleasing
- Most Technical Impressive
- Best Project built using Supabase as the main data provider for the refine app.
- Best Project built using Material UI as the main UI framework for the refine app.

### App Link
https://customer-service-holivin21.vercel.app/
### Screenshots 

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

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

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

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

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

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



###Agent Page

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

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

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

### Description 
Website for customer support service. In this website customer can chat with agent to discussion about they problem.

### Link to Source Code 
https://github.com/holivin21/Customer-Service

### Permissive License 
The project is licensed under the MIT License, which allows users to freely use, modify, and distribute the code, with the condition that the original license and copyright notice are included.

## Background 
I decide to build this project because my work place now using a chat service by a vendor. I think, i will try to make something like that. And the end of project i found many problem and bug. So by working on this project over the weekend, this is the final I can do for now.

### How I built it 
- Next Js app dir, 
- Material UI
- Supabase
- Apex Charts (Chart Libary)
- Refine
On that Utilized refine and Apex Chart is new to me. Especially refine for starters so difficult for me to know function or purpose of each function in refine. Until now it is still difficult to find answers to error in refine on stackoverflow and other forums. 

### Additional Resources/Info
its all for me.
First Post !!
Tags: backend, csharp, development
Published: 2023-07-19 15:20:21

PT — Fala galera, beleza? Bom, criei essa conta para externar um pouco do meu dia a dia, um pouco das ideias, do meu trabalho, dos desafios, estudos, um pouco de tudo e principalmente para praticar a escrita e leitura de artigos em inglês. Tamo junto :)


EN — What’s up guys, everything’s good? Well, I created this account to talk about a little bit of my day-to-day, a bit of some ideas, about my job, the challenges, about what I’m currently studying, a little bit about everything and of course to practice written and reading articles in English. Let’s get it :)
A comprehensive guide to optimizing web application performance 🧐
Tags: webdev, productivity, tutorial, devops
Published: 2023-07-19 15:10:01

**Welcome to part 3 of our series on how to navigate your first days with Blackfire.io! 🔥**

In [part 3](https://blog.blackfire.io/navigating-your-first-days-with-blackfire-a-comprehensive-guide-to-optimizing-web-application-performance.html?utm_source=devto&utm_medium=social&utm_campaign=blackfire_blog) we dive deeper into: 

1️⃣ Seamlessly integrating an observability strategy. 
2️⃣ Monitoring your applications running on production environments.
3️⃣ Discover the power of using a profiling tool.
4️⃣ Writing your first performance tests.

Always remember, the performance optimization journey is ongoing – keep an eye on your metrics, iterate on your improvements, write tests, and continually refine your strategy.

Let's continue the path toward continuous observability and performance optimization and get you set up for optimization success with a [comprehensive guide to optimizing web application performance](https://blog.blackfire.io/navigating-your-first-days-with-blackfire-a-comprehensive-guide-to-optimizing-web-application-performance.html?utm_source=devto&utm_medium=social&utm_campaign=blackfire_blog).

Want to catch up on part 1 and 2? Check out the links below and join us on this optimization journey:

- **Part 1:** [Welcome to Blackfire: A rookie agent’s guide for organization owners and admins](https://blog.blackfire.io/welcome-to-blackfire-a-rookie-agents-guide-for-organization-owners-and-admins.html?utm_source=devto&utm_medium=social&utm_campaign=blackfire_blog)

- **Part 2:** [Navigating your first days as an environment manager with Blackfire](https://blog.blackfire.io/navigating-your-first-days-as-an-environment-manager-with-blackfire.html?utm_source=devto&utm_medium=social&utm_campaign=blackfire_blog)

Happy Performance Optimization! 🎯
Async Requests in Python can be rather fasts
Tags: python
Published: 2023-07-19 14:41:31

When it comes to make multiple concurrent requests, doing it synchronously can't be a solution.

Here is a way to do it using **aiohttp** and  **asyncio** [AsyncIO IOHTTP](https://www.twilio.com/fr/blog/http-asynchrone-python-aiohttp-asyncio).

```python
import aiohttp
import asyncio
import time

start_time = time.time()

async def get_pokemon(session, url):
    async with session.get(url) as resp:
        pokemon = await resp.json()
        return pokemon['name']
        
async def make_async_requests():
    async with aiohttp.ClientSession() as session:
        tasks = []
        for number in range(1, 1000):
            url = f'https://pokeapi.co/api/v2/pokemon/{number}'
            tasks.append(asyncio.ensure_future(get_pokemon(session, url)))

        original_pokemon = await asyncio.gather(*tasks)
        for pokemon in original_pokemon:
            print(pokemon)
       
def main () :
    print("\nStart 1000 requests.....................")
    asyncio.run(make_async_requests())
    print("\nEnd.......................")
    print("\n---Requests completed in  %s seconds ---" % (time.time() - start_time)) 

main ()
```

```bash
---Requests completed in  1.6424751281738281 seconds ---
``` 

Not bad isn't it ?
Importing Error
Tags: react, vite, webdev, webpack
Published: 2023-07-19 14:35:57

While importing Images from assets folder it showing the Error like Below

I am using Vite react App

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sar6zg32kvxzx0h36035.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seiux9mgbsqcpjq2fyu9.png)
French - AF - Day 10
Published: 2023-07-19 14:30:05




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


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5kn5ici4qo7pbwyp2lg.png)
Writing a NES game day 7, chr files
Tags: nintendo, gamedev, retro, blog
Published: 2023-07-19 14:19:04

Until now I am following the nerdy nights tutorial and the adaptation for CA65. In those tutorials the authors give you a [chr file](https://simple.wikipedia.org/wiki/Chr) for the graphics. To put it simple, in the CHR file you will put all the graphics that you will use in tiles.

Here is an example:

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

The application that is showing the chr file is yychr, and you can get it from it's [official website](https://w.atwiki.jp/yychr) (it is in japanese, but chrome kind of translates it in real time). If not [here ](https://www.smwcentral.net/?p=section&a=details&id=27208)is an alternative.

I tried to create a new CHR file from scratch BUT as it is not completly filled it creates kind of a problem with memory, so I took the Mario chr file and started to edit it. I created a simple character in 5 minutes (my daughters want to be the ones that creates the definitive character for the game, so this is something I will use for testing and developing).


Editing this will also take a HUGHE ammount of time, but in this hobby you enjoy the trip.
#LearnedToday: ng-input-number-i18n
Tags: learnedtoday, i18n, angular, npm
Published: 2023-07-19 14:17:25

🇮🇹🇬🇧 Have you ever worked with **i18n** and **numbers**? 

🤔 A few years ago I needed an **angular** directive to handle displaying an approximate **decimal** number for different **locales**.

At the same time I needed to **edit** the value by displaying the full number with all the decimal digits when the input had the **focus** (imagine having some kinf of excel sheet full of such cells).

💡 I couldn't find a ready-made component, so in the end, I created an **open source project** myself and I deployed an **npm package** to use in different projects.

![ng-i18n-input-number demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vptht03xd9n662k900eb.png)

📦 [npm package](https://www.npmjs.com/package/@danielzotti/ng-input-number-i18n)
🎮 [demo](https://danielzotti.github.io/ng-input-number-i18n)
💻 [github](https://github.com/danielzotti/ng-input-number-i18n)
React Blog
Tags: javascript, react, frontend, beginners
Published: 2023-07-19 14:11:57

Ciao a tutti! Sto studiando React e per lavoro mi è stato assegnato di rifare il blog del nostro ecommerce con interfaccia React e backoffice Wordpress; vorrei un consiglio! Ci saranno tantissime chiamate api per recuperare gli articoli, inserire commenti, ecc; in che modo potrei gestire più facilmente lo stato dell'applicazione? Con redux, un hook custom per le request o semplicemente con hook useState?  Grazie in anticipo a chi vorrà aiutarmi!
Algorithm in JavaScript: Finding the Minimum and Maximum Sums
Tags: javascript, beginners, programming, algorithms
Published: 2023-07-19 14:05:11

In this blog post, we'll dive into solving the Mini-Max Sum algorithm challenge from HackerRank using JavaScript. We'll explore the problem statement, discuss the approach to solve it, and provide a step-by-step breakdown of the JavaScript solution.

Problem Statement:
The Mini-Max Sum algorithm challenge requires finding the minimum and maximum possible sums that can be obtained by summing exactly four out of the five integers in a given array.

Approach and Solution:
To solve the Mini-Max Sum algorithm challenge, we can follow these steps:

Sort the input array in ascending order. This allows us to easily identify the smallest and largest elements.
Calculate the minimum sum by adding the first four elements of the sorted array using the reduce function.
Calculate the maximum sum by adding the last four elements of the sorted array using the reduce function.
Output the minimum and maximum sums.
Here's the JavaScript implementation of the solution:



```
function miniMaxSum(arr) {
    const sortedArray = arr.sort((a,b) => a - b);
    const minSum = sortedArray.slice(0, arr.length - 1).reduce((acc, sum) => acc + sum);
    const maxSum = sortedArray.slice(1).reduce((acc, sum) => acc + sum);
    console.log(minSum, maxSum);
}
```

Example Usage:
Let's consider an example to demonstrate the solution. Suppose we have an input array [1, 2, 3, 4, 5]. Calling the miniMaxSum function with this array as an argument will provide us with the minimum and maximum sums.


```
const arr = [1, 2, 3, 4, 5];
miniMaxSum(arr); // Output: 10 14
```
In this example, the minimum sum is obtained by adding the first four elements [1, 2, 3, 4], resulting in 10. The maximum sum is obtained by adding the last four elements [2, 3, 4, 5], resulting in 14.`

Conclusion:
In this blog post, we explored the HackerRank Mini-Max Sum algorithm challenge and learned how to find the minimum and maximum sums of an array of integers using JavaScript. We discussed the problem statement, provided a step-by-step breakdown of the approach, and demonstrated an example usage. By understanding the algorithm and implementing the provided solution, you can successfully solve the Mini-Max Sum challenge on HackerRank.
Hiring a Tech Lead in Dublin
Tags: java, aws, hiring, ireland
Published: 2023-07-19 13:55:19

I'm looking for a Tech Lead to join a small team working on a greenfield Telematics Platform!

Permanent
🏢 Greenfield Telematics Platform; 30% team leading/ 70% hands-on
🖥️ AWS, Cloud Development Kit, Java, Python or Typescript
📍 Hybrid Dublin
💰 Salary €110k-115k
➕ Car discounts, Life Insurance, Healthcare, Pension contribution, Tuition reimbursement

You can reach out to me at cathy.wojnicki@vantage.ie to discuss the roles further.
Mailchimp API - report campaigns for email address?
Tags: mailchimp
Published: 2023-07-19 13:52:44

I've been asked to integrate with Mailchimp for a CRM, not to send emails, but just to report back on Mailchimp activity for each contact in the CRM

Simple enough to state the question I want to ask the API: "please could you tell me all the campaigns that have been sent to this email address?"

However, looking through the API documentation, it looks like it might be very longwinded in practice, and would probably require polling and storing bulk data rather than being able to ask just this question on the fly....

Before I implemented something really heavy and longwinded, I wondered whether anyone with more experience with this API could suggest whether I have missed some simpler approach?