teleren/devto huggingface dataset:
How to Make a Reusable Function that Removes Duplicates
Tags: javascript, help, react
Published: 2023-02-11 19:45:21

I am trying to make a function as re-usable as possible.

I have a JSON file containing "products" for now.

```
export let productList = [
    {
        id: 0,
        productName: "Men's Merrel Hiking Boots",
        price: 65.00,
        brand: "Merrell",
    },
    {
        id: 1,
        productName: "Women's Merrel Hiking Boots",
        price: 65.00,
        brand: "Merrell",
    },
    {
        id: 2,
        productName: "Natural Walking Stick",
        price: 22.00,
        brand: "Fayet",
    }
]
```

In my case, I am trying to map through these products and return all the brands without duplicates. I know I can do that with this Set function:

```
function dedupeCheckboxOptions() {
    return [...new Set(productList.map(product => product.brand))];
}
```
This works, but I am struggling to figure out a way to make this more re-usable. I would think it would look something like this so I could also use the function to maybe return the prices:

```
function dedupeCheckboxOptions(fullList, item) {
    return [...new Set(fullList.map(product => product[item]))];
}
```

The syntax appears to be correct, but whenever I try to pass values, whatever iterable list I send through in the fullList parameter, it comes through undefined.

Ex:
```
dedupeCheckboxOptions(productList , brand)

returns undefined
```
Any thoughts as to why?
🍀What is the difference between the algorithm and technique? 🍁
Tags: algorithms, programming
Published: 2023-02-11 20:45:42

### Intro

Hi everyone, today I will explain the algorithm and technique. What is algorithm and what is technique. and then, I will talk about the different between them. Let go!

In some cases, many people think algorithm and technique are the same. But in reality, they are different.
  
## About algorithms

Follow by definition, the algorithm is the sequence strict guidelines to solve a class of specific problem. 

Let take a example: when we create a algorithm to find a element in a array has a value equal to x. What would we do? 
- First of all, we create a iterator like "i" and set the value of it is equal the first index of array, right?
- Then, we check the value of array at index "i" is equal to x.
- If it equals to x, then we know that array has a element equal to x at index "i". We will stop here.
- If it is not equal to x, we will increase the value of i by one and continue check until the end of the array.
- If is equal to the end of the array and we don't find any element equal to x this means, in array doesn't exist a element equal to x. right?

And that is the algorithm to find a element equal to x in a array also called linear search.

Some algorithms:
  - Sort: Quick sort / selection sort / heap sort / insertion sort ...
  - Search: Binary search / tenary search ...
  - ...

## About Technical

In my mind, the technique is more difficult to explain than algorithm. The technique just defines a general way to solve problems. It does not specifically to implement for problem solving. To implement, we need to apply it like a  set of frames and further development of the problem we are solving. It's prrety hard to imagine, right?

Let thing aout Dynamic programming or DP. That is good technique to take for example. The Dynamic programming just talk about how we can solve the problem like:
 - Break the large problem down into small problem and find ways to solve them. And then we have the answer for that problem.
 - Or Find ways to solve smaller problems and put them together and we have the answer for large or main problem.

Some techniques:
  - Dynamic programming
  - Two pointers
  - ...

## Summary

I hope through this blog you can understand the algorithm and technique and distinguish between them. That is my first blog and this is also I use English to write a blog so I hope you can understand everything I wrote ( because I think my English is not good ^^). Well done, I very happy when you read here. Wish you have a great day!
It is Importent to have a central place to register your Web Components.
Tags: webdev, javascript, programming, tutorial
Published: 2023-02-11 23:30:28

Most people under estimate the importance of general structures in web applications they tend to over engineer and this way create unmaintainable software i want to provide you a Good Level of Abstraction for your Applications.

The way to migrate your unmaintainable application into a maintainable one is a simple manifest this allows you to declare what gets loaded. The Content should Only Change when the Manifest it self Changes. And the Manifest it self should not need changes without total new content added as replacement for the old. Note the word replacement its not talking about additions additions should be do able without much modification of the existing manifest it should simple be able to reference other manifests. 

If you keep this fundamentals you will come to the conclusion that the right way to Modify Software is the registration of custom elements for sections of your page but only if it is content that gets replaced often. 

else the registration of custom elements makes zero sense it is even harmful direct rendered static content always wins. And then Incremental Add Functionality to it. 

In Previous decades we archived a lot of this sperations via css but today this makes no sense anymore and adds only overhead so we replace css by JS that inserts CSS where needed in a cacheable way without bloating or inferences with other css.

```js
// When you define customElements
class myTagName extends HTMLElement {} // => <my-tag-name>, define('my-tag-name') optional parse HTMLDiv HTML*Element and lower it put it into ,{ extends: 'div'}
```
Transform Your Deployment Game: A Tutorial on EC2 Instance Provisioning w/CloudFormation and the Power of NextJS & Sanity Stack
Tags: devops, cloudcomputing, aws, infrastructureascode
Published: 2023-02-12 00:23:22

Unlock the full potential of your web application with a cutting-edge technology stack! This comprehensive guide will walk you through the steps of setting up an EC2 instance with Nginx, reverse proxy, and code deploys agent for seamless CI/CD integration. With the help of AWS CloudFormation, we'll show you how to secure your instance with SSH access and TCP connections, connect to an S3 bucket with an IAM ROLE, and assign a permanent Elastic IP address. And, with our easy-to-follow instructions, you'll be able to configure your stack like a DevOps pro in no time. So, why wait? Upgrade your web application today and achieve unbeatable lighthouse scores!

Link: https://aaron-janes.medium.com/transform-your-deployment-game-a-step-by-step-guide-to-ec2-instance-provisioning-with-fa709c6f27e7
10 Best Practices to keep your API secure
Tags: security, api, cybersecurity
Published: 2023-02-12 04:42:40

API security is crucial for modern software development as it facilitates the resources for innovation. However, with the increased reliance on technology, attackers have focused on finding vulnerabilities in APIs to access sensitive data and take control of the underlying system. Hence, it's important for organizations to implement best API security practices to safeguard sensitive data and API functionality.

Here are the top 10 best practices for API security:

## Secure Authentication and Authorization Methods:
To prevent malicious authentication, it is essential to use secure methods such as OAuth 2.0 or JSON Web Tokens (JWT) and secure authorization from being vulnerable to attacks.

## Web Application Firewall:
Implement a robust web application firewall to identify and remove malicious traffic before it reaches the API gateway.

## Encrypt Data in Transit:
To secure sensitive data transmitted over the network, it is important to use protocol encryptions such as TLS (Transport Layer Security) and SSL (Secure Socket Layer). This provides end-to-end encryption to protect data during transmission.

## Rate Limiting:
To avoid attacks such as Denial of Service and similar ones, it's important to limit or control the traffic from requesting access to the API at the same time. This ensures the API remains available and responsive to legitimate requests.

## Access Logs:
Implementing and maintaining access logs for your API can help track the clients who have accessed the API and their activities. This helps identify clients responsible for security breaches or API's unusual behavior.

## Security Assessments:
Conduct regular security assessments to identify and remove vulnerabilities in the API. Test regularly for common security threats such as XSS (Cross-Site Scripting), SQL injection, and CSRF (Cross-Site Request Forgery).

## Employee Training:
Ensuring API security in an organization requires basic security knowledge among employees dealing with the API. It's helpful if the principles of DevSecOps are followed in the organization. All employees should have a [comprehensive understanding of API security](https://www.practical-devsecops.com/what-is-api-security/) and be skilled enough to implement it.

## API Key Rotation:
API keys can be compromised if not used in combination with other security measures. It's recommended to use rate limiting, access logs, and key rotation in combination with API keys. API key rotation is an effective practice to keep the key secure from malicious hands.

## Input Validation and Sanitization:
It's important to validate inputs to ensure their genuineness and prevent malicious intentions. Validation ensures only expected data is accepted, preventing attacks such as XSS and SQL injection.

## Regular Updates:
Keep APIs and its underlying technologies and dependencies up-to-date to secure the API from the latest threats.
Simple 2-joint inverse kinematic with isosceles triangle
Tags: programming, math, showdev, algorithms
Published: 2023-02-12 11:03:05

## Math Formula

Formula to get height of isosceles triangle from one side `a` and base `b`, you can use it to find the elbow position.

{% katex %}
h(a,b) = \sqrt{a^2-\frac{b^2}{4}}
{% endkatex %}

TypeScript version.


```typescript
function getHeight(a: number, b: number){
  return Math.sqrt((a ** 2) - ((b ** 2) / 4));
}
```

## Application

Let's say you have shoulder `p1`, hand `p2`, and `a` is half length of your arm. You want to find where the elbow position is.

{% katex %}
\begin{aligned}
a &= 10\\\\
b &= |(\bold{p_2} - \bold{p_1})|\\\\
\bold{\hat{c}} &= \frac{\bold{p_2} - \bold{p_1}}{b}\\\\
\bold{d} &= \bold{\hat{c}}h(a,b)\\\\
\bold{k} &= \bold{p_1} + \bold{\hat{c}}\frac{b}{2} + \begin{bmatrix}
   d_1 \cos(90\degree) - d_2 \sin(90\degree) \\\\
   d_1 \sin(90\degree) + d_2 \cos(90\degree)
\end{bmatrix}

\end{aligned}
{% endkatex %}

TypeScript version (vector library using [vecti](https://www.npmjs.com/package/vecti)).

```typescript
import { Vector } from "vecti";

const p1 = new Vector(10, 10);
const p2 = new Vector(150, 150);
const a = 100;
const b = p2.subtract(p1).length();
const c = p2.subtract(p1).normalize();
const d = c.multiply(getHeight(a, b));
const k = p1.add(c.multiply(b / 2)).add(d.rotateByDegrees(90)); // because SVG and Canvas using top to bottom you can use -90, you can also use this to switch direction
```

## Demo

{% embed https://codesandbox.io/embed/simple-ik-httlwf?fontsize=14&hidenavigation=1&theme=dark&view=preview %}
A Few Fun CSS Properties and Functions
Tags: beginners, css, tutorial, webdev
Published: 2023-02-12 20:03:40

## CSS filter property

The [CSS filter property](https://appcode.app/css-filter-property/) allows you to apply visual effects to HTML elements such as changing colors, brightness, contrast, etc. It's a powerful tool for creating unique and eye-catching designs.

**Usage:**
```
filter: brightness(2);
``` 

---

## CSS blur filter function

The [CSS blur filter function](https://appcode.app/css-blur-filter-function/) allows you to add a blur effect to HTML elements. It can be used to soften or obscure elements, making the overall design more visually interesting. The function is applied using the "blur()" value within the "filter" property in CSS.

**Usage:**
```
filter: blur(0.25em);
```

---

## CSS "where" function

The [CSS "where" function](https://appcode.app/css-where-function/) is a logical operator that enables conditional statements in CSS, allowing developers to apply styles to elements based on certain conditions. The "where" function is a powerful tool for creating dynamic, responsive designs.

**Usage:**
```
a:where(:not(:hover)) {
  text-decoration: none;
  color: blue;
}
```
When you should NOT use Hexagonal Architecture?
Tags: architecture, beginners, programming
Published: 2023-02-12 21:14:10

Before you decide to use the Hexagonal Architecture, consider these scenarios where it may not be the best choice.

Hexagonal architecture (also known as "Ports and adapters") was defined by Alistair Cockburn in 2005. The main idea behind this pattern is a separation of the core of an application from its external dependencies.

Naturally, hexagonal architecture provides a clear separation between the business logic and the ways the system communicates with external systems, making it significantly easier to test and maintain the code.

While hexagonal architecture can bring many benefits, there are certain scenarios when it may not be the best choice.

## 1. Team has no experience with this pattern
Hexagonal architecture is a relatively new pattern, and they're not so many developers who can use it well. If the development team does not have enough experience with the Hexagonal architecture pattern, it may be better to choose a simpler architecture that is easier to understand and implement, for example, 3-layer pattern described [here](https://www.youtube.com/watch?v=p2KzUDiNToM).

## 2 Small systems or short-term projects.
Hexagonal architecture is a relatively complex pattern, and it involves multiple layers and components. As with many other architecture patterns, there's some initial implementation cost. In bigger projects, it usually pays off with time. On the other hand, in smaller projects, it might never pay off. 

## 3 Legacy systems
Integrating hexagonal architecture into an existing legacy system can be very challenging task. Hexagonal architecture uses rather unusual terminology which will look alien and cryptic in some older systems. As many older systems were implemented in some form of N-tier architecture, using [3-layer pattern](https://www.youtube.com/watch?v=p2KzUDiNToM) can be a better choice.

3-layer pattern is hybrid pattern inspired by both N-tier and Hexagonal patterns.

## 4 Performance-critical applications
Hexagonal architecture introduces additional layers of abstraction between the core logic and the external dependencies, which can impact the performance of the application. While usually negligible, for applications with particularly high performance requirements, such as real-time or trading systems, I would suggest considering other patterns.

It is important to carefully consider the requirements and constraints of the project, as well as the skills and experience of the development team, before deciding what architecture pattern you should use.
Portfolio Website
Tags: codepen, javascript, webdev, tutorial
Published: 2023-02-12 22:16:34

𝗣𝗥𝗢𝗝𝗘𝗖𝗧 02: PORTFOLIO WEBSITE (Responsive)

𝗧𝗼𝗼𝗹𝘀 𝗨𝘁𝗶𝗹𝗶𝘇𝗲𝗱
I utilized HTML, CSS and Java Script to create the Portfolio website.

𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻
This project was undertaken for the purpose of honing my HTML, CSS and Java Script skills. I utilized grid, flex-box layouts, CSS animations, psuedo classes, psuedo elements and created some java script functions such as switching tabs in about section and use media queries for responsiveness to create an aesthetically pleasing design with simple color scheme.

𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗟𝗶𝗻𝗸
The project can be viewed in my portfolio on Behance as follows.
https://www.behance.net/farmanali6349

𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲
If you would like to access the resources, including the code and page, please feel free to send me a message.
𝗝𝗮𝘇𝘇𝗮𝗸 𝗔𝗹𝗹𝗮𝗵 😊

{% codepen https://codepen.io/farmanali6349/pen/xxaKZqy %}
Package and publish VueJs components and re-use them anywhere
Tags: vue, vite, tailwindcss, cicd
Published: 2023-02-13 01:47:52

Hello everyone! I hope you're all doing well. I wanted to share a new video series I created. It explains how to build a package for Vue components so that they can be shared and used in projects. I used Vite and TailwindCSS, along with GitLab and GitLab CI/CD. I'd love to hear your thoughts and feedback on the video.

[https://www.youtube.com/watch?v=NJ5GZRa3mY8](https://www.youtube.com/watch?v=NJ5GZRa3mY8)
Steel Shot
Published: 2023-02-13 06:12:50

[Steel shots](https://www.blaster.co.in/steel-shots) belong to rounded grains made from molten steel through an atomization (granulation) method, available in certain sizes and hardness's. Steel grit defines grains with a predominantly angular shape. These grains are collected by crushing steel shots, therefore they exhibit sharp edges and broken segments. Harder than steel shot, it's also available in several sizes and hardness's.
Use axios as better practice in ReactJS
Tags: webdev, javascript, programming, beginners
Published: 2023-02-14 03:40:56

in this post i explain use axios as in **ReactJS** as better practice.you all kown very well axios handle http request in single promise.

## Use axios as http

```
import axios from 'axios';

export let URL="http://localhost:5000/api/v1";
export let URL_PROFILE="http://localhost:5000/uploads/avatar/";
export let URL_POST="http://localhost:5000/uploads/posts/";
export let AUTH_TOKEN=localStorage.getItem('token')||'';

axios.defaults.baseURL = URL;
axios.defaults.headers.common['x-auth-token'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


export const http=axios;

```
and use http in your services like 

```
import { http, URL } from "./http.service";
import { errorHandler } from "./error.service";

export const getAllTags=async ()=>{
    try {
        let resp=await http.get(URL+'/tag/all/tags')
        return resp;
    } catch (error) {
        errorHandler(error)
    }
}
```
it is better practice to use axios in your application
and when you change your default token like this

```
import { http} from "./http.service";
export const setToken=(token)=>{
  axios.defaults.headers.common['x-auth-token'] = token;
}
```

## use error handler 

```
import { toast } from "react-toastify"

export const errorHandler=(error)=>{
   if(error.message==="Network Error" && error.status===500){
        toast.error(error.message)
   }
   toast.error(error?.response?.data?.message)
}
```
I think you better understanding of axios better practice to use. thank you.
Terminal Inspired, Clean and Customizable Browser Start Page
Tags: startpage, react, browser, docker
Published: 2023-02-14 08:32:54

For a long time I wanted to create my own start page looking like my terminal, so [here it is](https://excalith-start-page.vercel.app)! It includes my common bookmarks where I can search through them with my terminal-inspired prompt. 

There are multiple ways to customize it, so be sure to check out the [repository](https://github.com/excalith/excalith-start-page) and [wiki page](https://github.com/excalith/excalith-start-page/wiki) page for customization options.

![Start Page animated gif showing some features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acjdftoayhn69lfmo65r.gif)

## Demo

- You can check the working version from [here](https://excalith-start-page.vercel.app)
- You can pull the Docker image from [here](https://hub.docker.com/r/excalith/start-page)


## Features

- Quickly filter links by typing in the prompt. Hitting `Enter` will open all filtered links at once
- If nothing filtered, the text in prompt will use the default search engine for searching your input
- Launch websites directly from the prompt. Just type the URL (ie. `github.com`)
- Search websites with custom commands. For example, type `s some weird bug` to search StackOverflow for `some weird bug`
- Multiple ways to customize the start page to your liking

### Built-In Commands

- Show usage with `help` command (shows basic usage and your configured search shortcuts)
- Show info with `fetch` command (time, date, system and browser data)
- Update your configuration with `config` command
  - `config import <url>` - Import configuration from a URL to your local storage
  - `config edit` - Edit local configuration within editor
  - `config reset` - Reset your configuration to default

### Key Bindings

- Clear the prompt quickly with `CTRL + C`
- Close window with `ESC`

## Customization

There are multiple ways of customizing the start page to making it yours!

- Use `config edit` to edit your configuration within the start page code editor
- Use `config import <url>` to import configuration from a URL
- Change the default configuration in `startpage.config.js` file and deploy your own version

Please refer to [wiki page](https://github.com/excalith/excalith-start-page/wiki) for more information.
ChatGPT and Zoom plugins are now available in ONLYOFFICE Docs
Tags: onlyoffice, productivity, news, ai
Published: 2023-02-14 10:48:30

## Perform tasks which involve understanding or generating natural language or code


The ChatGPT plugin integrates the AI-based chatbot developed by OpenAI. Using it, you are able to get accurate answers to your questions, quickly find information, generate texts, and even get your code built right in ONLYOFFICE editors. 

![ChatGPT plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uisyxupgnxn45bu4zy6l.png)

ChatGPT can perform multiple tasks within responses that involve processing natural language:

- Text generation based on inquiries;
- Predicting and finishing pieces of text based on the input;
- Question answering;
- Translation;
- Text summarization and structuring;
- Sentiment analysis;
- Conversation-style communication.

[How to use the ChatGPT plugin](https://www.onlyoffice.com/blog/2023/02/chatgpt-plugin-in-onlyoffice-docs/)

_Request examples_

- Tell me a brief history of open-source software.
- Create HTML code for a table with real air humidity data in New York, highlight the columns and the headers. 
- Create HTML code for a random picture with green color present.
- Generate a JavaScript code for a small arcade game. 
- Write a tagline for an ice cream parlor.

## Stay connected: hold video meetings right in the editors  

The Zoom plugin allows hosting conferences directly in the interface of ONLYOFFICE editors. You can make video and audio calls while collaborating on your documents with team using complete functionality of the Zoom platform: start, schedule, and join meetings, configure meeting parameters.

[How to use the Zoom plugin](https://www.onlyoffice.com/blog/2023/02/zoom-plugin-in-onlyoffice-docs/)

![Zoom plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwh1yuyj3xvqtybcbipk.jpg)

## How to install plugins 

Both plugins can be easily enabled through the built-in Plugin Manager in the Plugins tab of ONLYOFFICE Docs with one click. 


![Plugin Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ssnhw8kygk159dqh5y1.png)

## How to build your own plugins 

Plugins allow adding extra features to the editors. Using ONLYOFFICE API documentation, you can create your own plugin and publish it in the ONLYOFFICE Plugin Marketplace. [Learn more](https://www.onlyoffice.com/blog/2022/10/how-to-publish-your-own-plugin-in-onlyoffice-marketplace/)

**Useful links**

[Documentation: Guide to ONLYOFFICE Docs plugins](https://api.onlyoffice.com/plugin/basic)

[Getting started with plugins](https://api.onlyoffice.com/plugin/gettingstarted)

[App Directory](https://www.onlyoffice.com/app-directory.aspx)