teleren/devto huggingface dataset:
Flat Design – Thiết Kế Phẳng Trong Thiết Kế Website
Tags: website, digitalmarketing, seo, terus
Published: 2024-07-07 16:21:13


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydxtfkwim9whwmywekpe.jpg)
Thiết kế phẳng là phương pháp không sử dụng thêm bất cứ một hiệu ứng nào để tạo nên giao diện, không có yếu tố 3D nào cả, không đổ bóng, góc xiên, dập nổi, độ dốc hoặc không sử dụng các yếu tố khác nhằm giúp tăng độ sâu và độ nổi của thiết kế trên màn hình… mang đến những hình ảnh đơn giản hơn nhưng vẫn đầy đủ ý nghĩa truyền tải. 

Thiết kế phẳng mang lại một số lợi ích trong [thiết kế trang web](https://terusvn.com/thiet-ke-website-tai-hcm/):

Giao diện thân thiện với người dùng: Sự đơn giản và tối giản của thiết kế phẳng giúp người dùng dễ dàng điều hướng và hiểu nội dung cũng như chức năng của trang web.

Thời gian tải nhanh hơn: Thiết kế phẳng thường sử dụng ít yếu tố hình ảnh hơn, dẫn đến thời gian tải nhanh hơn và [cải thiện hiệu suất trang web](https://terusvn.com/thiet-ke-website-tai-hcm/).

Khả năng tương thích thiết kế đáp ứng: Tính chất rõ ràng và có thể mở rộng của thiết kế phẳng khiến nó rất phù hợp với bố cục trang web đáp ứng và thân thiện với thiết bị di động.

Tập trung vào nội dung: Thiết kế phẳng nhấn mạnh vào chính nội dung, đảm bảo thông tin rõ ràng và dễ hiểu cho người dùng.

Thẩm mỹ hiện đại và hợp thời trang: Thiết kế phẳng đã trở nên phổ biến nhờ vẻ ngoài hiện đại và hấp dẫn về mặt hình ảnh, giúp các trang web luôn cập nhật các xu hướng thiết kế hiện tại.

Nhìn chung, Xu hướng thiết kế phẳng hiện mang lại nhiều lợi ích, bao gồm cải thiện trải nghiệm web của người dùng, hiển thị hình ảnh, tiếp thị và SEO tốt hơn. Đồng thời, tính năng thiết kế phẳng giúp tiết kiệm không gian lưu trữ, cải thiện tốc độ truy cập và nâng cao sự thuận tiện cho người dùng.

Tìm hiểu thêm về [Flat Design – Thiết Kế Phẳng Trong Thiết Kế Website](https://terusvn.com/thiet-ke-website/flat-design-thiet-ke-phang-la-gi/)

Các dịch vụ tại Terus:

Digital Marketing:

·        [Dịch vụ Facebook Ads](https://terusvn.com/digital-marketing/dich-vu-facebook-ads-tai-terus/)

·        [Dịch vụ Google Ads](https://terusvn.com/digital-marketing/dich-vu-quang-cao-google-tai-terus/)

·        [Dịch vụ SEO Tổng Thể](https://terusvn.com/seo/dich-vu-seo-tong-the-uy-tin-hieu-qua-tai-terus/)

Thiết kế website:

·        [Dịch vụ Thiết kế website chuẩn Insight](https://terusvn.com/thiet-ke-website/dich-vu-thiet-ke-website-chuan-insight-chuyen-nghiep-uy-tin-tai-terus/)

·        [Dịch vụ Thiết kế website](https://terusvn.com/thiet-ke-website-tai-hcm/)
1518. Water Bottles
Tags: php, leetcode, algorithms, programming
Published: 2024-07-07 16:14:20

1518\. Water Bottles

Easy

There are numBottles water bottles that are initially full of water. You can exchange numExchange empty water bottles from the market with one full water bottle.

The operation of drinking a full water bottle turns it into an empty bottle.

Given the two integers numBottles and numExchange, return the maximum number of water bottles you can drink.

**Example 1:**

![sample_1_1875](https://assets.leetcode.com/uploads/2020/07/01/sample_1_1875.png)

- **Input:** numBottles = 9, numExchange = 3
- **Output:** 13
- **Explanation:** You can exchange 3 empty bottles to get 1 full water bottle. Number of water bottles you can drink: 9 + 3 + 1 = 13.

**Example 2:**

![sample_2_1875](https://assets.leetcode.com/uploads/2020/07/01/sample_2_1875.png)

- **Input:** numBottles = 15, numExchange = 4
- **Output:** 19
- **Explanation:** You can exchange 4 empty bottles to get 1 full water bottle. Number of water bottles you can drink: 15 + 3 + 1 = 19.


**Constraints:**

- `1 <= numBottles <= 100`.
- `2 <= numExchange <= 100`


**Solution:**

```
class Solution {

    /**
     * @param Integer $numBottles
     * @param Integer $numExchange
     * @return Integer
     */
    function numWaterBottles($numBottles, $numExchange) {
        $totalDrunk = 0;
        $emptyBottles = 0;

        while ($numBottles > 0) {
            // Drink all the current full bottles
            $totalDrunk += $numBottles;

            // Collect the empty bottles
            $emptyBottles += $numBottles;

            // Exchange the empty bottles for new full ones
            $numBottles = floor($emptyBottles / $numExchange);
            $emptyBottles = $emptyBottles % $numExchange;
        }

        return $totalDrunk;
    }
}
```

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
The Future of Cybersecurity: Revolutionizing Protection with VerifyVault
Tags: opensource, security, cybersecurity, github
Published: 2024-07-07 16:11:21

In an era where digital threats loom larger than ever, cybersecurity remains at the forefront of technological advancement. From data breaches to ransomware attacks, the need for robust defenses has never been more critical. Enter VerifyVault, a groundbreaking 2-Factor Authenticator designed to redefine security standards across desktop platforms.

### <u>**Unveiling the Latest Trends**</u>
As we navigate through 2024, emerging trends in cybersecurity are reshaping how we protect sensitive information. Here are some key developments to watch:

**1. Rise of AI-Powered Threat Detection:** Artificial Intelligence is enhancing cybersecurity by predicting and preventing threats in real-time, revolutionizing proactive defense strategies.

**2. Blockchain for Immutable Security:** The decentralized nature of blockchain technology is being harnessed to create tamper-proof systems, ensuring data integrity and enhancing trust.

**3. Quantum Cryptography:** With quantum computing on the horizon, cryptography is evolving to withstand quantum threats, promising unbreakable encryption methods.

**4. Zero Trust Architecture:** Moving beyond traditional perimeter-based security, Zero Trust Architecture ensures strict access controls and continuous monitoring, mitigating insider threats.

### <u>**Embracing VerifyVault: Your Gateway to Enhanced Security**</u>
Amidst these advancements, VerifyVault stands out as a beacon of innovation. As a free and open-source 2FA application, it combines offline functionality with robust encryption, ensuring your accounts remain secure even in the face of sophisticated cyber threats. With features like automatic backups, password reminders, and QR code import/export, VerifyVault prioritizes both security and user convenience.

**Take Action Today!**
Protecting your digital assets starts now. Download VerifyVault and experience the future of cybersecurity firsthand. Whether you're a Windows enthusiast or a Linux aficionado, safeguarding your accounts has never been easier or more reliable.

Download [**VerifyVault**](https://github.com/VerifyVault) today and fortify your digital defenses!

[**Direct Download**](https://github.com/VerifyVault/VerifyVault/releases/tag/Beta-v0.3)
(neo)vim search and replace, with quickfix and capture groups
Tags: vim, neovim, linux, tutorial
Published: 2024-07-07 16:07:52

I'm using pandoc to generate this website from markdown files to html, and the
problem that all my images are converted into `<figure>` tags with
`<figcaption>`, but my goal is to just generate a normal `img` tag with `alt`
attribute, and to solve this issue I need to convert all my image formats from

```md
![title](./path.jpg) 
<!-- to be  -->
![](./path.jpg "title"]
```

## Use `:substitute` and capture groups

So here is a video to demonstrate how it should work with this command

```vim
:'<,'>s/\!\[\(.*\)\](\(.*\))/![](\2 "\1")
```

{% vimeo https://vimeo.com/979984161 %}

1. `<.'>` This indicates the code range to apply the command only for the current
   visually selected and for this case I select the entire line with `shift+v`.
1. `s/` this the shorthand for `:substitute` 
   ```
   s/<pattern-to-find>/<change-with>
   ```
1. `\!\[\(.*\)\](\(.*\))`
    - escape all special characters `!` `[` `]` by adding backslash `\` before each
    of them
    - define a group to capture all text inside the square brackets `[]` by
    using `\(.*\)`
    - the define another group to capture the path inside `()` by using the
    `\(.*\)`
1. `![](\2 "\1")` now we change the entire line with our format and
    - `\2` refers to the second capture group which is the path `path.jpg`
    - `\1` refers to the first capture group which is the title `"title"`


## Search for all image occurrences

Now after we know our command to change the image format, we need to search for
all image occurrences in `markdown` files in the `src` directory.

So, we can use vim `grep` command like that 

> **_NOTE:_**  I'm using neovim  v0.11 which is use `ripgrep` by default. So,
> maybe some arguments here will not work with normal grep

```vim
:silent grep "\!\[" src --glob "*.md"
```

![a screenshot show the prev command in vim](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdpjakc4f08epwxqi1oy.png)

Now we have all our results inside the `quickfix` list, we can use
`:c[next|prev]` command to cycle between the list and apply our command for each
one, but that will be executed and non-efficient.

## Apply the command for quickfix list

Fortunately, that vim has a built-in feature to apply any command to all files
inside the `qucikfix` list by using `:cdo` command, so here is the command will
be:

```vim
:silent cdo! s/\!\[\(.*\)\](\(.*\))/![](\2 "\1")/g
```

We add `/g` as well to apply the command in all files. Also if you need
manually confirm for each substitute you add `/gc`.


## Finally save the files

So after everything is good we need to save every change by using

```vim
:wa!
```
Simplify EC2-S3 File Access with Instance Roles
Tags: ec2, aws, s3, iam
Published: 2024-07-07 15:47:38

#Access all the buckets:
Create an IAM Role for the EC2 Instance:
* Go to the IAM console in AWS and create a role.
* Select "AWS service" as the trusted entity and choose "EC2." Click "Next: Permissions."
* Attach the policy “AmazonS3ReadOnlyAccess” to access the S3 bucket. 
* Click "Next: Tags" (optional) and then "Next: Review."
* Give the role a name and click "Create role."

![Trusted Entity Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vcx9pluh98rkmrdekri.png)


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

Attach the IAM Role to the EC2 Instance:
Go to the EC2 console.
* Select the instance that you want to grant S3 access.
* Click on the "Actions" button, navigate to "Security" and then "Modify IAM Role."
* Choose the IAM role you created in the previous step and click "Update IAM role."

Testing: 
* SSH into the instance to verify. 
* Install awscli into the instance.
```
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"  
unzip awscliv2.zip  
sudo ./aws/install
```

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

#Access specific S3 bucket:
Create a Custom Policy for S3 Access:
* Click "Create policy" to define a custom policy that grants list access to all S3 buckets and read access to a specific S3 bucket.
* Click "JSON" and paste the following policy:

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:ListAllMyBuckets",
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name",
                "arn:aws:s3:::bucket-name/*"
            ]
        }
    ]
}

```
Create a New Role:
 
* Click on "Roles" in the left sidebar, then click "Create role."
* Select "AWS service" as the trusted entity type.
* Choose "EC2" under the "Use case" section, then click "Next” and attach the policy which you created. 

Attach the IAM Role to the EC2 Instance:
* Go to the EC2 console.
* Select the instance that you want to grant S3 access.
* Click on the "Actions" button, navigate to "Security" and then "Modify IAM Role."
* Choose the IAM role you created in the previous step and click "Update IAM role."

Testing:

![Output2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pm3xfcl3d9snydm6gcc.png)

[Let's Connect!](https://beacons.ai/rahulsharma.rks)
Game Jam Experience();
Tags: python, pygame, gamedev, programming
Published: 2024-07-07 15:31:33

A few days before I participated in a jam to showcase my skills and see what other people are building, it was hosted on itch.io a famous place for hosting games and game jams.

## My Experience:
   The game jam hosts had given a time period of 10 days to finish a game by either using an engine or a framework.
   Like always I decided to make a game with pygame and choosing a difficult path for myself which gives more pleasure when completed. I only had last five days due to a work load in the previous days.

   After thinking a lot I decided to remake the famous ASTERODIS game from scratch. I had some pre-written code that I used for the game.

## The Game:
   The game was finally made and submitted 19 minutes before the deadline. It was a very tiring weekend but somehow I managed to complete the task. Here's a view of the game:


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

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

## Conclusion:
   After 5 days of voting the result came out and my game stood 34th out of 91 games, which was not a bad result as I completely overlooked the theme resulting in no theme integeration. But I learned a lot from the jam and these five days taught me how to handle the enormity of tasks.

I will request you people(the readers) to leave a feedback so I can make more blogs like this and teach things related to game dev.[A link to my all published games on itch.io](https://fun-o-vativestudios.itch.io)
Regards,
Faseeh.
sonner for toast
Published: 2024-07-07 15:15:01

```
npm install sonner
```
https://sonner.emilkowal.ski/
**Call main.tsx**

```
import { Provider } from 'react-redux';
import { persistor, store } from './redux/features/store.ts';
import { PersistGate } from 'redux-persist/integration/react';
import { Toaster } from 'sonner';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <RouterProvider router={router}></RouterProvider>
            </PersistGate>{' '}
        </Provider>
        <Toaster />
    </React.StrictMode>
);

```

```
**Then use onSbumit login.tsx**
```

```
const onSubmit = async (data) => {
        toast.loading('Logging in');
        const userInfo = {
            id: data.id,
            password: data.password,
        };
        const res = await login(userInfo).unwrap();
        const user = verifyToken(res.data.accessToken);
        dispatch(setUser({ user: user, token: res.data.accessToken }));
        navigate(`/${user.role}/dashboard`);
    };

```
JavaScript Challange 100 day with Mukhriddin (Part 1)
Tags: javascript, webdev, programming, mukhriddinweb
Published: 2024-07-07 15:06:29

**Assalamualaikum warahmatullahi wabarakatuh!**

Bismillah, today we started a 100 day javascript challenge. Daily challenge questions will be posted on our Telegram page and we will constantly share the solutions on the **dev.to** platform! Barakallahu feekum!

**#CHALLANGE1**

```javascript
// What is the value of "n" ?

let x = 100;
let y = x++;
let z = ++x;
let n = (x==y) ? z++ : ++z;

console.log(n); // 103

```

**#CHALLANGE2**


```javascript

// What is the output?

const f=new Boolean(false);

if (f){
   console.log(1);
}else{
   console.log(2);
}


console.log(typeof f); 


// output :  1 , object

```

**#CHALLANGE3**

```javascript
// What is the output?

const obj = { x: 1, y: 2 };
let {x: a, y: b} = obj;
a=2;

console.log(obj.x, obj. y);  

// output:  1 , 2

```

**#CHALLANGE4**

```javascript
// What is the output?

let elf="Mystery";
function lapland(params) {
  console.log(elf);
  let elf="Serius";
}

lapland(); 

// output:  ReferenceError: Cannot access 'elf' before initialization

```

**#CHALLANGE5**

```javascript
// What is the output?

const obj = {};
obj.value = undefined;
console.log(Object.hasOwn(obj, 'value'));

// output: true

```javascript

**#CHALLANGE6**

```javascript
// What is the output?

let foo=function(){
    console.log(1);
};

setTimeout (foo, 1000);

foo=function(){
    console.log(2);
};

// output: 1

```

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



**#CHALLANGE7**

```javascript
// What is the output?

console.log("7" > "17");
console.log("07" > "17");

// output: true , false

```

**#CHALLANGE8**

```javascript
// What is the output?

console.log(1 + 2 + '1');
console.log('1' + 1 + 2);

// output: 31 , 112

```

**#CHALLANGE9**

```javascript
// What is the output?

var bar =function foo(){};

   console.log(bar===foo) ;

// output: ReferenceError: foo is not defined

```

**#CHALLANGE10**

```javascript
// What is the output?

let obj ={
    timeoutId:setTimeout(()=>{
      console.log('Hey');
    } , 3100)
}

delete obj.timeoutId;
    
obj = null;

// output: Hey

```

Our challenge will continue, 10 questions will be posted in each part on our telegram channel, inshaaAllah we hope it will be useful!
Barakallahu feekum!

**You can follow and share us on networks!**

🔗 https://t.me/mukhriddinweb
🔗 https://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://khodieff.uz
🔗 https://github.com/mukhriddin-dev
🔗 https://linkedin.com/in/mukhriddin-khodiev
🔗 https://youtube.com/@mukhriddinweb
BitPower: Innovation in Decentralized Finance
Published: 2024-07-07 12:09:39

BitPower is a decentralized finance (DeFi) platform that uses blockchain technology to provide users with secure, efficient and transparent financial services. The core functions of the platform include BitPower Loop and BitPower Lending.

BitPower Loop automates financial transactions through smart contracts, allowing users to participate in investment and lending without relying on traditional financial institutions. It is characterized by high security, transparency and trustlessness, and all transaction records are stored on the blockchain to ensure that the data cannot be tampered with.

BitPower Lending provides decentralized lending services based on blockchain. The interest rate is dynamically calculated through an algorithm, and users can directly perform lending operations without intermediaries. The platform also supports a variety of BSC assets to ensure the liquidity and stability of assets.

BitPower's innovations also include the Arweave storage solution, which provides permanent and secure NFT storage and atomic asset operations. Through these features, BitPower is committed to building a trusted decentralized financial ecosystem for users.
 #BitPower
CDN Là Gì? Lợi Ích Và Cách Sử Dụng
Tags: website, digitalmarketing, seo, terus
Published: 2024-07-07 15:01:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iycaaikno0y7ldxzwxo.jpg)
CDN là viết tắt của Content Delivery Network. Nó là một mạng lưới phân tán các máy chủ có vị trí chiến lược ở nhiều vị trí địa lý khác nhau trên toàn thế giới. Mạng phân phối nội dung được thiết kế để cung cấp nội dung cho [các website chuyên nghiệp](https://terusvn.com/thiet-ke-website-tai-hcm/), chẳng hạn như hình ảnh, video, tệp JavaScript và các nội dung tĩnh khác cho người dùng cuối với hiệu suất và độ tin cậy được cải thiện.

Sử dụng Mạng phân phối nội dung mang lại một số lợi ích:

Phân phối nội dung nhanh hơn: CDN lưu trữ nội dung gần hơn với người dùng cuối, giảm khoảng cách dữ liệu phải di chuyển và cải thiện tốc độ phân phối nội dung.

[Cải thiện hiệu suất website](https://terusvn.com/thiet-ke-website-tai-hcm/): Với độ trễ giảm và thời gian tải nhanh hơn, các website và ứng dụng web hoạt động tốt hơn, mang lại trải nghiệm tích cực cho người dùng.

Khả năng mở rộng và độ tin cậy: CDN phân phối lưu lượng truy cập trên nhiều máy chủ, đảm bảo tính sẵn sàng và khả năng mở rộng cao, ngay cả trong thời gian sử dụng cao điểm.

Giảm chi phí băng thông: Bằng cách giảm tải việc phân phối nội dung tới CDN, các tổ chức có thể giảm chi phí cơ sở hạ tầng và băng thông của chính họ.

Phạm vi tiếp cận toàn cầu: CDN có máy chủ được đặt trên toàn thế giới, cho phép phân phối nội dung nhanh chóng và hiệu quả tới người dùng ở các khu vực khác nhau, bất kể vị trí thực tế của họ.

Các hình thức CDN phổ biến:

Pull HTTP/Static: Với hình thức CDN này, các công ty khai báo tên miền website của mình và  sử dụng địa chỉ CDN hoặc IP của máy chủ. Sau đó, PoP CDN sẽ tự động truy cập và lưu trữ các bản sao nội dung tĩnh của bạn. Cuối cùng, người dùng truy cập tệp thông qua liên kết mạng hoặc tên miền riêng của mạng.

Streaming: Hình thức này hỗ trợ CDN cung cấp nội dung dưới dạng video trực tuyến từ máy chủ PoP tới người dùng. Mục đích là để tiết kiệm dung lượng băng thông trên máy chủ gốc. 

POST/PUSH/PUT/Storage: Quản trị viên cập nhật mọi nội dung cần phân phối qua CDN đến hệ thống máy chủ thông qua FTP hoặc HTTP. Hình thức Mạng phân phối nội dung này giúp tiết kiệm rất nhiều dung lượng lưu trữ trên máy chủ của bạn.

Tìm hiểu thêm về [CDN Là Gì? Lợi Ích Và Cách Sử Dụng](https://terusvn.com/thiet-ke-website/cdn-la-gi/)

Các dịch vụ tại Terus:

Digital Marketing:

·        [Dịch vụ Facebook Ads](https://terusvn.com/digital-marketing/dich-vu-facebook-ads-tai-terus/)

·        [Dịch vụ Google Ads](https://terusvn.com/digital-marketing/dich-vu-quang-cao-google-tai-terus/)

·        [Dịch vụ SEO Tổng Thể](https://terusvn.com/seo/dich-vu-seo-tong-the-uy-tin-hieu-qua-tai-terus/)

Thiết kế website:

·        [Dịch vụ Thiết kế website chuẩn Insight](https://terusvn.com/thiet-ke-website/dich-vu-thiet-ke-website-chuan-insight-chuyen-nghiep-uy-tin-tai-terus/)

·        [Dịch vụ Thiết kế website](https://terusvn.com/thiet-ke-website-tai-hcm/)