teleren/devto huggingface dataset:
Web Deployment Simplified: GitHub Workflow with EC2, ECR, and Docker
Tags: webdev, docker, devops, programming
Published: 2023-08-02 11:43:36

In software development, efficient deployment workflows are crucial to ensure seamless and reliable application delivery. 

With the rise of containerization and cloud computing, developers have a powerful arsenal of tools at their disposal to streamline the deployment process.

In this blog, we will explore how to set up deployment workflow using **GitHub, Docker, Nginx, Amazon Elastic Container Registry** (ECR), and **Amazon Elastic Compute Cloud** (EC2).

Whether you are a seasoned DevOps professional or just getting started with application deployment, this guide will walk you through the entire process step-by-step.

So, let’s roll up our sleeves and embark on this exciting journey of mastering GitHub Workflow for deploying your applications.

Refer to [our ready-to-use blog platform](https://github.com/canopas/canopas-blog) in case you want to see the working example of the workflow we’re going to implement in this blog.


## Table of contents

- Create Dockerfile
- Setup GitHub workflow
- Deploy on ECR
- NGINX configuration
- Prepare docker-compose
- Deploy the application to EC2
- Final workflow file
- Conclusion



> Please note that we will deploy the node.js application on AWS EC2 in this example. But, you can deploy applications developed using any language like GoLang, Python, or PHP by following the same approach.


For detailed step by step guide with code example, check out [Canopas Blog.](https://blog.canopas.com/simplified-your-deployment-github-workflow-with-ec2-ecr-and-docker-4c9c392d238d)
Unique Border Radius Card with HTML and CSS
Tags: codepen, webdev, css, design
Published: 2023-08-02 11:43:09

<p>In this project, I have created a card with a unique border radius using HTML and SCSS (Sass).  I've used pseudo-elements and the "skew" property to achieve this design.</p>

{% codepen https://codepen.io/Smit29/pen/yLQZVyo %}
Isso comment system - alternative to disqus
Tags: python, disqus
Published: 2023-08-02 11:41:04

It's a simple self hosted [comment system](https://isso-comments.de/), build in Python and just use sqlite database. By default it only support single website but with some configuration you can also use it for multiple websites.

This post however, not much about Isso but how do I found it.

I was reading Luke Plant's [blog] and then noticed his comment form a little bit, different.


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

It triggered the curiousity inside me so I "view source" it using the  browser Inspect function.


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

The word isso definitely stand out, so I googled it (isso comments). The rest is history.

[blog]:https://lukeplant.me.uk/blog/posts/django-sass-scss-without-nodejs-or-build-step/
Keep output directory structure in Webpack
Tags: webdev, webpack, javascript, html
Published: 2023-08-02 11:30:40

Some web projects may have many HTML templates that need to be compiled and placed in the output directory, e.g. `dist/`. When we have 5-10 pages we can easily define each page manually in the webpack config, but when we have 20-30 or more pages with a complex directory structure it can get tedious.

Luckily there is the [HTML Bundler plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) for Webpack that read all files in the [template directory](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry-path) and save compiled HTML files with the same structure in the output directory.

For example, there are templates in the `src/views/` source directory:

```
src/views/index.html
src/views/about/index.html
src/views/news/sport/index.html
src/views/news/sport/hockey/index.html
src/views/news/sport/football/index.html
...
```

We want to have the same folder structure in the `dist/` directory:
```
dist/index.html
dist/about/index.html
dist/news/sport/index.html
dist/news/sport/hockey/index.html
dist/news/sport/football/index.html
...
```

Just install the [html-bundler-webpack-plugin]():

```
npm install html-bundler-webpack-plugin --save-dev
```

Add the plugin in the Webpack config:

```js
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: 'src/views/', // the template directory
    }),
  ],
};
```

All templates from the `src/views/` directory will be compiled and saved in the `dist/` directory with the same structure.

You can try the example in browser:

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/webpack-webpack-js-org-diop8g?file=webpack.config.js)

The plugin supports template engines such as [Eta](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-eta), [EJS](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-ejs), [Handlebars](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-handlebars), [Nunjucks](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-nunjucks) "out of the box" without additional loaders and plugins.

P.S. This powerful plugin **does not require** additional plugins such as html-webpack-plugin, mini-css-extract-plugin.

{% cta https://github.com/webdiscus/html-bundler-webpack-plugin %} Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub {% endcta %}
Get a profile views widget for your portfolio
Tags: portfolio, uiwidget, webdev, javascript
Published: 2023-08-02 11:27:41

Hi,

I have built a widget that renders an svg showing the views made by website visitors.

You can generate your views badge for free at: https://projects.ramunarasinga.com/

I generated mine and used it on my website: https://ramunarasinga.com

Source code is available at: https://github.com/Ramu-Narasinga/visitors-count

I used Render with Redis for hosting backend. Built the UI with inferno.js
Best CSS Animation on internet
Tags: css, webdev, javascript, programming
Published: 2023-08-02 11:15:48


### 1. Animated Background with SVG in CSS

Output 

![Animated Background with SVG in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcf3fyryjk1o8rczqlur.gif)

Source Code 


{% youtube wa7cnYu0QyQ %}

---


### 2. CSS Border Lighting Animation in CSS

Output 

![CSS Border Lighting Animation in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba76wpvohslondzsw3z2.gif)

Source Code

{% youtube u5MPxuAfRao %} 

---

### 3.  CSS 3D Card Hover Effect

Output 

![CSS 3D Card Hover Effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azql3h08bzros4441fhc.gif)

Source Code

[https://democoding.in/css-3d-card-generator](https://democoding.in/css-3d-card-generator)

This amazing design made by [Amit Sheen](https://codepen.io/amit_sheen)
Exploring Dynamic routing in Nextjs 13
Published: 2023-08-02 11:09:12


As developers, we often encounter the need to build web applications that adapt to changing data and user interactions. [Nextjs](https://nextjs.org/), a powerful React framework has introduced exciting upadates in its latest release, version 13, that further enhances our ability to create dynamic and flexible web experiences.
One of the things I constantly find myself doing as a frontend developer is displaying content based on a user interaction. 
In this article, we will delve into the concept of dynamic routing and how it empowers us to create customizable web pages. 

Let's get started.

We are going to have a simple profiles data. This is an array, which contains two objects.

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

Next, we will create a straightforward interface that displays the two profile names obtained from the data array. Alongside each name, we will provide a clickable link that allows the user to access more information about the selected profile.

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

Lastly, we will generate a dynamic segment by enclosing the folder's name in square brackets, such as [folderName]. This technique allows us to create flexible routes based on dynamic parameters like [id] or [slug]. In our case, we will create a folder named [slug] within the app directory. Within this folder, we will create a file called page.tsx and insert the provided code snippet.

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

Here, we applied the filter method to the data by comparing the profile names to the value of params.slug. If there is a match, the corresponding array is returned. Subsequently, we use destructuring to extract the necessary data from the array and update our user interface accordingly.
We will now notice that once the link is clicked, the UI changes to display the description of the corresponding profile being clicked.

**Note: This assumes you want to route to localhost:3000/jeff and localhost:3000/peter**

To route to http://localhost:3000/profile/john, you've to create the [slug] folder inside a profile a directory. I recommend taking a look at the official doc [here](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)

I hope this helps!
Two Sum
Tags: algorithms, interview
Published: 2023-08-02 10:51:20

Классическая задача на алгоритмы с собеседования.

## Задача.
 
Дан массив целых чисел. Надо найти пару чисел в массиве, сумма которых равна заданному числу. В качестве результата вернуть индексы этих элементов. **Можно считать, что такая пара есть всегда и только одна.**
Например:
Для массива nums = [2, 11, 15, 7], target = 9
Ответ: [0,3]
Т.к. nums[0] + nums[3] = 2 + 7 = 9

## Решение.

На ум сразу приходит очевидное решение: перебрать все пары чисел и проверить, что их сумма равна заданному числу.

```java
public int[] twoSum(int[] nums, int target) {
    for (int i = 0; i < nums.length; i++) {
        for (int j = 0; j < nums.length; j++) {
            if (i != j && nums[i] + nums[j] == target) {
                return new int[]{i, j};
            }
        }
    }
    return new int[] {-1, -1};
}

```
Такое решение работает за **O(n^2)** по времени, т.к. у нас два вложенных цикла. Space Complexity **O(1)**, т.к. никакой дополнительной памяти мы не используем, за исключением нескольких переменных примитивного типа.

Это решение можно улучшить до линейного при помощи hash-таблицы.
Будем в цикле идти по массиву и кэшировать все числа массива, которые мы уже видели, в этой hash-таблице.

Далее, чтобы получить заданную сумму, нам нужно чтобы 
`nums[i] + второе число из массива = target`
Т.е. для текущего индекса i это другое число в массиве должно быть:
`второе число из массива = target - nums[i].`
Проверим, не встречалось ли нам уже это число раньше при проходе массива. Сделать это можно просто проверив, не хранится ли оно в нашей hash-таблице.

Назовем это второе число complementaryNumber.

Когда код решения:

```java
public int[] twoSum(int[] nums, int target) {
    Map<Integer, Integer> map = new HashMap<>();
    for (int i = 0; i < nums.length; i++) {
        //Вычисляем значение нашего второго дополнительного числа 
        //до пары
        int complementaryNumber = target - nums[i];
        //Если мы его уже видели - мы нашли нашу пару
        if (map.containsKey(complementaryNumber)) {
            return new int[] {i, map.get(complementaryNumber)};
        }
        //кэшируем числа и их индексы, которые мы ранее видели в 
        //массиве
        map.put(nums[i], i);
    }
    return new int[]{-1, -1};
}
```
Это решение работает на **O(n)** (линейное время). **Space Complexity** при этом тоже **O(n)**, т.к. мы еще храним значения из массива в hash-таблице, размер которой будет пропорционален размеру массива.

У этой задачи есть множество вариаций. Например, можно ли еще улучшить это решение если массив отсортирован? Или найти не индексы, а сами числа. Или найти тройки или четверки чисел, сумма, которых равна заданному значению. 

Разборы этих вариаций будут в будущем на моем канале.
DORA metrics chat with a Developer Advocate at Google
Tags: beginners, devops, developer
Published: 2023-08-02 10:38:57

Hi everyone, we're hosting a webinar and a Q&A session with Google's Developer Advocate about DORA metrics. 

If you're interested, [sign up here](https://hubs.la/Q01ZLwPv0). 

Let me know if you have any questions.
What exactly is the white-label NFT market?
Tags: web3, nft
Published: 2023-08-02 10:33:22

An adaptable platform known as a [white-label NFT marketplace](https://www.guardianlink.io/whitelabel-nft-marketplace) enables people or organisations to build their own NFT (non-fungible token) marketplace using ready-made software. Instead of having to create the entire marketplace from scratch, it enables businesses to brand the platform as their own and makes it easier to purchase, sell, and trade NFTs.
Custom Software Development company
Tags: daffodi
Published: 2023-08-01 09:46:26

In the ever-evolving world of technology, the significance of custom software development cannot be overstated. Custom software is designed to cater to the specific needs of a business, and Daffodil Software is at the forefront of this revolution. 

Daffodil Software, a globally recognized software development company, is renowned for its expertise in custom software development. The company understands that every business is unique, and so should be its software. Daffodil’s custom software solutions are tailored to perfectly align with a business's specific goals and requirements.

One of the key strengths of Daffodil lies in its ability to transform a business's vision into a functional software solution. The company's team of dedicated professionals work tirelessly to create software that not only meets but also exceeds client expectations.

Daffodil specializes in crafting software that is both user-friendly and efficient. By focusing on the end-user's needs and experiences, Daffodil delivers solutions that are intuitive, engaging, and easy to navigate. This focus on the user experience ensures that the software not only performs well but also enhances user productivity and satisfaction.

Moreover, Daffodil places a high emphasis on scalability and flexibility. Their custom software solutions are designed to grow with a business, ensuring that they remain relevant and effective as the business evolves. 

In terms of security, Daffodil Software leaves no stone unturned. Understanding the importance of data security in today's digital world, the company incorporates robust security measures into its software development process.

In conclusion, Daffodil Software sets the standard in [custom software development](https://www.daffodilsw.com/custom-software-development-company/). Their commitment to understanding client needs, delivering user-friendly and efficient solutions, and ensuring scalability and security makes them a leading choice for businesses worldwide.
when i am using next-auth i am getting this error in typescript, does anyone know what is it ?
Published: 2023-08-02 10:28:03

**Error: Package subpath './providers/google' is not defined by "exports" in D:\entrego_recent\dvp-athena\node_modules\next-authpackage.json, **

the above error i am getting when i was trying to use GoogleProvider from 'next-auth/providers/google'

i followed everything as documentation but i dont know why i am getting this error
Tidy Up Your Git: A One-Liner for Deleting Merged Branches
Tags: git, zsh, cli, beginners
Published: 2023-08-02 10:21:35



- Table of Contents
    - [Introduction](#introduction)
    - [Requirements](#requirements)
    - [Deleting Branches](#delete_branches)
    - [Setting Up Alias in Zsh](#zsh_alias)
    - [Things to Note](#caution)
    - [Conclusion](#conclusion)

## <a name="introduction">Introduction</a>

Working with Git, especially when frequently creating feature branches, can lead to a convoluted branch system. As the number of branches increases, manually deleting each one becomes a daunting task. In this post, I'll walk you through a way to delete merged Git branches in bulk and how to set up an alias for it in a Zsh environment.

## <a name="requirements">Requirements</a>

- Git installed
- Zsh installed (needed for the alias setup part)

## <a name="delete_branches">Deleting Branches</a>

Let's start with the command to display merged branches:

```bash
git branch --merged
```

This command lists the branches that have been merged into the current branch.

Next, we exclude the `master` branch or any other branches you want to retain from this list, and delete the remaining branches. The command below excludes the `master` and `develop` branches and deletes the remaining merged branches:

```bash
git branch --merged | egrep -v "(^\*|master|develop)" | xargs git branch -d
```

Here, `egrep -v "(^\*|master|develop)"` excludes the current branch (indicated by `*`), `master` branch, and `develop` branch from the list of merged branches. If you have other branches you want to keep, add their names here.

Finally, `xargs git branch -d` runs the `git branch -d` command (branch deletion command) for each of the filtered branches.

## <a name="zsh_alias">Setting Up Alias in Zsh</a>

Setting up these series of commands as an alias lets you delete merged branches by typing just one command. This can prevent typos and save you typing time.

To set up an alias in the Zsh environment, add the following line to your `~/.zshrc` file:

```bash
alias delete_merged_branches="git branch --merged | egrep -v \"(^\*|master|develop)\" | xargs git branch -d"
```

After saving this configuration, either start a new terminal session or execute the following command to reflect the changes in the `~/.zshrc` file:

```bash
source ~/.zshrc
```

Now, when you run the `delete_merged_branches` command in the terminal, it will delete the merged branches.

## <a name="caution">Things to Note</a>

When deleting branches in Git, exercise caution. The deletion operation cannot be undone, so confirm that the branches you are deleting are truly no longer needed before you proceed. Also, note that this command deletes local branches. To delete remote branches, you need to execute `git push origin --delete <branch_name>` specifying the branch name.

## <a name="conclusion">Conclusion</a>

In this post, we went over how to delete merged Git branches in bulk and how to set up an alias for the operation in a Zsh environment. This should make managing your branches easier and your development workflow more efficient. Happy Git-ing!
Effortless App Rollbacks with Docker and Version Control
Tags: docker, git, devops, webdev
Published: 2023-08-02 10:06:50

Application rollbacks mean going back to an older version of your software. This is useful when a new update causes issues.

Docker containers and version control systems like Git make rollbacks much easier. They let you save different versions of your app code and switch between them swiftly.

So when a new update has bugs, we can quickly rollback to a previous version that worked fine. This saves a lot of time and troubleshooting effort.

## Docker Versioned Images

Docker makes rollbacks easy in 2 ways:

- **Images** - A Docker image contains an app and all its dependencies. By versioning images, you save snapshots of the app at different stages.

<br></br>
- **Isolation** - Docker isolates apps from each other and the host OS. So rolling back an app has no impact on other apps or the system.

This is unlike traditional deployment where apps are tightly coupled with the system. Rolling back means undoing complex configuration changes.

With Docker, you just run an older image. All dependencies and configs are inside the image. So rollbacks are simple - you just switch images.

## Strategies for Tagging Images

- **Semantic Versioning**: Adopting a semantic versioning scheme (e.g., MAJOR.MINOR.PATCH) for your images can help you quickly identify the significance of each version. Change in the MAJOR version indicates incompatible changes, while changes in the MINOR version represent backward-compatible additions.

<br></br>
- **Branch-based Tagging**: You can choose to tag images based on the Git branch they originate from. This approach is useful for maintaining separate images for different development branches.

## Rolling back with Docker

Let's walk through a simple example of rolling back a Dockerized web application using versioned images:

- **Initial State**: Start with the latest version of your Dockerized web app running successfully.

<br></br>
- **Create a New Image**: Make changes to your application code. Once you're ready to commit, tag the image with a version number or commit hash.

```bash
docker build -t myapp:v2 .
```

- **Deployment**: Push the new image to your image repository or registry.

```bash
docker push myapp:v2
```

- **Rollback**: Suppose an issue arises in the new version. To roll back, simply redeploy the previous version's image.

```
docker run -d -p 80:80 myapp:v1
```


Thanks for reading this article, I hope you found it interesting!
Let's connect on Github: https://github.com/shricodev

See you next time!😉
7 Steps to Building Anti-Fraud System for Digital Wallets
Published: 2023-08-02 10:01:06

The popularity of digital wallets makes them an attractive target for malicious actors. Can we develop a secure e-wallet that never pops up on the list of compromised products? According to Nelson Mandela, “It always seems impossible until it’s done”. Let’s give it a try!

The game is won by those who know the rules and how to use those to their advantage. You know what your opponent is after and what they target: The system and the user. All you need is data and proactive measures to build a strong anti-fraud system.

Use mobile apps and server-side as valuable sources of data to identify patterns, detect anomalies, and cope with vulnerabilities. Refer to proactive measures, device attestation, authentication, integrating KYC & AML, and user education to build an effective anti-fraud system. Let’s have a quick look at each of these 7 steps.


**Step #1** [Proactive anti-fraud measures](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#preventing-fraud-proactively) help to manage the uncontrollable – human factor, differentiating between “normal” and “abnormal” user behaviour. We can identify suspicious/malicious users and define “stop factors” via collecting data and calculating risk scores. 

**Step #2** [User education](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#educating-users): allows them to protect their assets better if they know about risks and are asked for additional authentication before a transaction can be completed.

**Step #3** [Authenticating and re-authenticating](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#authenticating-and-re-authenticating): Choosing the appropriate user identity verification method is paramount and will depend on the specific use case.  

**Step #4** [Integrating KYC (Know Your Customer) and AML (Anti-Money Laundering)](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#integrating-kyc-and-aml) are crucial for identity verification and fraud prevention.

**Step #5** [Enabling remote device attestation](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#enabling-remote-device-attestation) helps to differentiate between a legitimate and a compromised one. 

**Step #6** [Smart balancing between usability and security](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#understanding-trade-offs-for-anti-fraud-measures) allows to win users’ hearts and protect their assets at the same time. 

**Step #7** [Working with security researchers](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/#working-with-security-researchers) is a promising collaboration for mitigating vulnerabilities.

For more information on building an anti-fraud system, see our informative [engineering post](https://www.cossacklabs.com/blog/how-to-prevent-digital-wallet-fraud/).