teleren/devto huggingface dataset:
Prevent Data Entry Duplicates in Real-time, using Laravel Excel
Tags: laravel, excel, phpspreadsheets, duplicates
Published: 2023-08-06 04:32:12

Over the past year, I have been tasked with creating several Downloadable Excel Spreadsheets so that Clients can more easily import data into our system.

The data model we are importing into however, uses the unique validation rule on one of the columns. I've added code on the back-end to catch this error, however I thought it would be nice to try and prevent it in the first place.

To do so, I analyzed some of the recipes PhpSpreadSheet uses to create Dropdowns for a user, and noticed they are using the Data Validation feature of Excel.  

From this, I was able to create a function which notifies the user that a duplicate has been entered.

I have the following in a trait called `sheetHelper`
```php
use PhpOffice\PhpSpreadsheet\Cell\DataValidation;
use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;

public function preventDuplicates(
    string $column,
    Worksheet $sheet,
    int $startRow,
    string $errorMessage,
    ?int $endRow = null
): static {
    $startCell = $column . $startRow;
    $endRow = $endRow ?? $sheet->getHighestRow();
    $endCell = $column . $endRow; //specified large number to include all cells up to

    $validation = $sheet->getCell($startCell)->getDataValidation();
    $validation->setType( DataValidation::TYPE_CUSTOM );
    $validation->setErrorStyle( DataValidation::OPERATOR_EQUAL );
    $validation->setAllowBlank(false);
    $validation->setShowInputMessage(true);
    $validation->setShowErrorMessage(true);
    $validation->setShowDropDown(false);
    $validation->setErrorTitle($errorMessage);
    $validation->setFormula1('=COUNTIF($A$3:$A$10000,$A3)=1'); //$A$3 is absolute value, $A3 is absolute column, relative row 3

    $validation->setSqref("{$startCell}:{$endCell}");

    return $this;
}
```
This function can be used in your Exported Sheet. Just implement the WithStyles interface, and place it in the styles method:

```php
public function styles(Worksheet $sheet) : void
{
    parent::styles($sheet);
    $this->preventDuplicates(
        column: 'A',
        sheet: $sheet,
        startRow: 2,//we use row 1 for the header
        errorMessage: 'Name already exists in this column',
        endRow: 10000 
    );
}
```
Now, if a user enters a duplicated name in column 'A', a popup in Excel / Libre Office will appear notifying them that a duplicate name has been entered.  It will then remove the text they entered.

The key values I used to get this to work was setting the SerrorStyle to `DataValidation::OPERATOR_EQUAL`, and setting the type to `DataValidation::TYPE_CUSTOM`

Happy Coding!
Design Systems
Tags: design, uiux, systemsanalysis, projectmanagement
Published: 2023-10-12 02:45:43

---
title: Design Systems
published: true
date: 2023-08-06 04:21:49 UTC
tags: Design,UIUX,SystemsAnalysis,ProjectManagement
canonical_url: https://crtv.dev/design-systems/
cover_image: https://images.unsplash.com/photo-1626544827763-d516dce335e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDZ8fHNoYXBlfGVufDB8fHx8MTY5MTI5NTQ2N3ww&ixlib=rb-4.0.3&q=80&w=2000
---

### **What are design systems?**

According to UX research firm Neilson Norman, "A design system is a complete set of standards intended to manage design at scale using reusable components and patterns." (Fessenden, 2021) To summarize, design systems are style guides, component libraries, color swatches, typography selections, etc., which together form a system of design. As a whole, a design system enables users throughout an organization to create applications, creatives, and other design elements in a way that matches and feels cohesive.

### **Well-Known Design Systems**

Several well-known design systems include:

**Fluent:**   
Developed by Microsoft, Fluent is the design system used by Windows 11 and other Microsoft apps like Word. [https://fluent2.microsoft.design/](https://fluent2.microsoft.design/?ref=crtv.dev)

**Material:**   
Developed by Google, Material is found all across Google products and services, plus used by many Android apps. [https://m3.material.io/](https://m3.material.io/?ref=crtv.dev)

**Human Interface Guidelines:**   
Developed by Apple and found across many Mac and iOS devices, apps, and services. [https://developer.apple.com/design/human-interface-guidelines/](https://developer.apple.com/design/human-interface-guidelines/?ref=crtv.dev)

### **SDLC Benefits**

Design systems are about more than which colors and fonts to use. Design systems enable apps to become a part of an ecosystem. If your organization has a design system or follows another company's design system, it will be easy for users of your system to pick up your app's interface quickly. When components and layouts look the same across systems, users can bring their familiarity with them even when they've never used your new application.

### **Spillover Benefits**

In addition to useability advantages, design systems also simplify the app design process, make building wireframes a breeze, and streamline the development process. Developers following a design system only have to implement components once. They can use your organization's component library across various apps, reducing repeated UI code and speeding up the development process.

![Design Systems](https://images.unsplash.com/photo-1606161290889-77950cfb67d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDN8fGZpZ21hfGVufDB8fHx8MTY5MTI5NTYxOHww&ixlib=rb-4.0.3&q=80&w=2000)
_Photo by Mario Gogh / Unsplash_

References

Fessenden, T. (2021, April 11). _Design Systems 101_. Nielsen Norman Group. [https://www.nngroup.com/articles/design-systems-101/](https://www.nngroup.com/articles/design-systems-101/?ref=crtv.dev)
73 berufliches Vorwärtskommen: Die Reise der IT-Fachkräfteschaft.
Tags: deutsch, career, motivation, discuss
Published: 2023-08-06 04:12:00

Moin Moin,

wohin steuern wir als IT-Fachkräfteschaft?
Ab und zu bekomme ich mit, dass die Welt in 10 Jahren vermeintlich so sei bzw. in 30 Jahren vermeintlich jener Art aussehe.
Es scheinen sich also Leute über die Zukunft Gedanken zu machen.
Ich frage mich, was denken wir, als IT-Fachkräfteschaft, wie die die Welt der IT in 10 Jahren und wie sie in 30 Jahren aussehen sollte. In jeder derartiger Überlegung über die Zukunft, über die ich eingangs sprach, spielt Technologie eine wichtige Rolle, u.a. die IT. Wir als IT-Fachkräfte, sind daher wichtig für einige künftige Entwicklungen. Sind wir uns dessen bewusst?


Insgesamt scheint mir die Frage nach einer Zukunftsgestaltung auch wieder die Frage [der beiden Lager→](https://dev.to/amustafa16421/64-berufliches-vorwartskommen-zwei-lager-19nk) aufzuwerfen. Welche Arbeiten wollen wir künftig von programmierbaren Rechnern erledigen lassen, welche wollen wir künftig von solchen Ergänzen lassen?

1) Hast du dir ausgemalt wie die Welt in 10 oder auch in 30 Jahren aussehen könnte?
2) Spielen derartige Überlegungen eine Rolle für dich auf deinem Karriere-Weg?


Lass uns mittels Kommentaren austauschen.

Beste Grüße,
Mustafa

Oder auch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch
. NET 8 WEB API from A to Z
Tags: dotnet, aspdotnet, csharp
Published: 2023-08-06 04:04:18

This is not an article. I am going to teach to how to create a .NET 8 WEB API from scratch. All the chapters would be collected here to let you find them easy.

Please follow this link :

[Article Link](https://bugandfix.com/net-8-web-api-from-a-to-z)

This post will be updated after publishing each section.
Mastering Server Components in React 18! Achieve the Optimal Balance Between Client and Server
Tags: react, javascript, webdev, tutorial
Published: 2023-08-06 03:50:45


---
title: "Mastering Server Components in React 18! Achieve the Optimal Balance Between Client and Server"
published: true
description: "Learn about React 18's new Server Components feature, how to use it, and how it can benefit your projects. Perfect guide for beginners and experienced developers alike!"
tags: ["react", "javascript", "webdev", "tutorial"]
---



Are you interested in utilizing React 18's new Server Components feature for optimizing performance or improving SEO? In this article, we'll explore the basics of server components, along with concrete examples of how to implement them.

## Table of Contents

1. [What are Server Components?](#what-are-server-components?)
2. [When Should You Use Them?](#when-should-you-use-them?)
3. [Benefits](#benefits)
4. [Setting Up the Environment](#setting-up-the-environment)
5. [Sample Code](#sample-code)
6. [Caveats and Troubleshooting](#caveats-and-troubleshooting)

## What are Server Components?

Server Components are React's new feature allowing for rendering certain components on the server side. They allow for a perfect balance between client and server, providing responsive interactions.

## When Should You Use Them?

- Processing resource-heavy components
- Improving SEO
- Enhancing user experience

## Benefits

- Performance improvement
- Flexibility
- Code-splitting

## Setting Up the Environment

### 1. Environment Setup

```bash
npm init
npm install react@alpha react-dom@alpha react-server@alpha
```

### 2. Rendering Pipeline Configuration

The following code demonstrates how to render server components using Express.

```javascript
const express = require('express');
const { pipeToNodeWritable } = require('react-server-dom-webpack/writer');
const React = require('react');
const { renderToPipeableStream } = require('react-dom/server');

// ...

app.get('/', (req, res) => {
  const stream = renderToPipeableStream(<App />);
  res.setHeader('Content-Type', 'text/html');
  pipeToNodeWritable(stream, res);
});
```

## Sample Code

Server Component Example:

```jsx
// MyComponent.server.js
import React from 'react';

function MyServerComponent() {
  return <div>This is a server component.</div>;
}

export default MyServerComponent;
```

## Caveats and Troubleshooting

- Server components cannot directly access client-side state or event handlers.
- Support might be limited depending on the development environment or framework.

---

I hope this article serves as a helpful guide for those trying React's server components for the first time. Likes and comments are greatly appreciated! Feel free to ask any questions you may have.
Ad-Free Magic Website Creation with Low Code
Tags: webdev, beginners, tutorial, programming
Published: 2023-08-06 03:30:00

## [Cantrip](https://www.aiforme.wiki/ai/tools/cantrip): Ad-Free Magic Website Creation with Low Code

**Introduction:**

Craft your dream website effortlessly with [Cantrip](https://www.aiforme.wiki/ai/tools/cantrip)—the magic website creation platform powered by Artificial Intelligence. Link your existing domain name and let Cantrip work its wizardry to generate your perfect website without any ads.

## Key Features:

**Easy Domain Linking:**
Seamlessly link your existing domain name to your Cantrip website for a professional online presence.

**Customisable Themes and Styling:**
Easily change themes and styling to create a unique and visually appealing website.

**Drag and Drop Components:**
Enjoy the convenience of drag and drop interactive website components, making website building a breeze.

**AI-Generated Page Content:**
Quickly generate compelling page content using the power of Artificial Intelligence.

**Advanced Monitoring Features:**
Stay on top of your website's performance with advanced monitoring tools.

**Accessible Support and Guides:**
Receive prompt and accessible support along with helpful guides for a smooth website creation experience.

**Completely Ad-Free:**
Experience a clutter-free and professional website with no intrusive ads.

**Forms, Banners, and Gallery Management:**
Effortlessly manage forms, banners, and galleries to enhance user interaction and visual appeal.

## Conclusion:

With [Cantrip](https://www.aiforme.wiki/ai/tools/cantrip), website creation becomes a magical experience. Harness the power of Artificial Intelligence to effortlessly craft your perfect website. 

Customize themes, drag and drop components, and generate compelling content with ease—all in an ad-free environment. Stay connected with your audience, monitor your website's performance, and receive accessible support throughout the process. 

Let [Cantrip](https://www.aiforme.wiki/ai/tools/cantrip) be your wizard companion on the journey to a stunning and professional website. Embrace the magic of low-code website creation with Cantrip today.
Weekly Challenge 228
Tags: perl, python, theweeklychallenge
Published: 2023-08-06 01:47:12

Each week Mohammad S. Anwar sends out [The Weekly Challenge](https://theweeklychallenge.org/), a chance for all of us to come up with solutions to two weekly tasks. My solutions are written in Python first, and then converted to Perl. It's a great way for us all to practice some coding.

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-228/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-228/sgreen)

## Task 1: Unique Sum

### Task

You are given an array of integers.

Write a script to find out the sum of unique elements in the given array.

### My solution

This is relatively straight forward. This first thing I do is get the frequency of each number, and store it in the dict `freq`. The key is the input number and the value is the number of times it occurs.

```python
for i in ints:
    freq[i] = 1 + freq.get(i, 0)
```

The solution is going to be the sum of all keys in `freq` dict where the value is 1 (i.e. it only occurs once).

```python
solution = sum(i for i in freq if freq[i] == 1)
```

### Examples

```bash
$ ./ch-1.py 2 1 3 2
4

$ ./ch-1.py 1 1 1 1
0

$ ./ch-1.py 2 1 3 4
10
```
## Task 2: Empty Array

### Task

You are given an array of integers in which all elements are unique.

Write a script to perform the following operations until the array is empty and return the total count of operations.

### My solution

Some times I find it easier just to brute force a solution rather than trying to be clever. With the majority of these challenges we are talking about relatively small sets of data which is easy for any PC to compute.

And that is exactly how I approached this task. The first thing I do is get the current minimum value called `min_int` and set the `moves` variable to `0`.

I have a loop that runs until the `ints` list is exhausted. For each iteration, I increment the `moves` value and remove the first item from the list. If the value is the current minimum, I calculate the new minimum. If it is not, I add it to the end of the list.

```python
while len(ints):
    moves += 1
    value = ints.pop(0)

    if value == min_int:
        if len(ints):
            min_int = min(ints)
    else:
        ints.append(value)
```

### Examples

```bash
$ ./ch-2.py 3 4 2
5

$ ./ch-2.py 1 2 3
3
```
Hacking Wi-Fi 1: Conociendo aircrack-ng y el modo monitor
Tags: wifi, wireless, pentesting, hacking
Published: 2023-08-06 01:37:45


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

Instalando `aircrack-ng` y colocando la tarjeta wifi en modo monitor.

# ¿Que aircrack-ng?
`aircrack-ng` es una suite para crackeos de redes wifi, se centra en distintos tipos de ataques a protocolos `WEP` y `WPA/WPA2`. Para ocupar esta suite necesitamos privilegios de `root`.

## Instalando aircrack-ng

```bash
sudo apt install aircrack-ng
```

# ¿Que es airmon-ng?
`airmon-ng` es una de las herramientas de la suite de `aircrack-ng`, sirve para colocar la tarjeta en modo monitor.

## Modo monitor

(No confundir con modo promiscuo) Usualmente nuestra tarjeta escucha y habla con algún punto de acceso (router), al estar la tarjeta en modo monitor solo escucha a otras tarjetas cuando estas están comunicándose entre si.

Para poder capturar estos paquetes y poder posteriormente trabajar con estos paquetes, necesitamos identificar nuestra interfaz de red con la que trabajaremos, en mi caso usare una tarjeta de red externa **TL-WN722n v1** (como ya no se fabrican recomiendo usar el **AWUS036NHA**) que actualmente es la `wlan1`.

```
root@vay3t:~# airmon-ng
[sudo] password for francisk0v: 

PHY	Interface	Driver		Chipset

phy0	wlan0		iwlwifi		Intel Corporation Wireless 3160 (rev 83)
phy1	wlan1		ath9k_htc	Atheros Communications, Inc. AR9271 802.11n
```

Ahora usamos el siguiente comando para iniciar el modo monitor, si nos damos cuenta ahora nuestra interfaz de red cambia de nombre a `wlan1mon`.

```
root@vay3t:~# airmon-ng start wlan1

Found 5 processes that could cause trouble.
If airodump-ng, aireplay-ng or airtun-ng stops working after
a short period of time, you may want to run 'airmon-ng check kill'

  PID Name
  792 avahi-daemon
  796 NetworkManager
  808 avahi-daemon
  909 wpa_supplicant
 5869 dhclient

PHY	Interface	Driver		Chipset

phy0	wlan0		iwlwifi		Intel Corporation Wireless 3160 (rev 83)
phy1	wlan1		ath9k_htc	Atheros Communications, Inc. AR9271 802.11n

		(mac80211 monitor mode vif enabled for [phy1]wlan1 on [phy1]wlan1mon)
		(mac80211 station mode vif disabled for [phy1]wlan1)
```

Ahora nuestra tarjeta esta lista para trabajar con la suite `aircrack-ng` o `scapy`.

## No veo mi interfaz como wlanX
En caso de ver la interfaz con otro nombre que no sea wlanX te recomiendo usar el siguiente comando y luego reiniciar el equipo para aplicar las configuraciones:

```bash
sudo ln -s /dev/null /etc/udev/rules.d/80-net-setup-link.rules
```
110% revenue growth & Reduced cost WITHOUT CODING
Tags: webdev, javascript, beginners, programming
Published: 2023-08-06 01:30:00

## Introduction:

**[Manas AI](https://www.aiforme.wiki/ai/tools/manas)** empowers businesses to achieve exceptional revenue growth, reduced costs, and process automation without any coding. With a simple, speedy, and affordable approach, businesses can harness the power of AI to drive success.

## Key Features:

**Higher Sales with Recommendations:**
Create constantly improving algorithms that offer personalised recommendations to customers, leading to higher sales.

**Price Prediction:**
Optimize revenues by dynamically suggesting the best pricing based on past behavior and market trends.

**Improve Product Ratings:**
Track customer channels to identify product defects early, ensuring higher product quality and customer satisfaction.

**Sentiment Analysis:**
Track sentiment trends to gain insights into brand perception and customer satisfaction.

**Real-Time Website or Incident Alerts:**
Monitor online and customer experiences and receive real-time alerts for new or existing issues.

**Grow Customer Retention:**
Predict customer churn and reasons for leaving to reduce attrition and enhance customer retention.

**Optimize Marketing Mix:**
Optimize marketing channels and spending to acquire customers more efficiently.

**Classify Support Tickets:**
Automatically tag incoming support tickets by subject, sentiment, and resolution.

**Monitor Assets:**
Track and automate signals for financial assets, such as equities, commodities, and forex.

**Financial Signals & Alerts:**
Receive alerts when asset performance crosses predefined thresholds.

**Classify Text, Documents:**
Quickly classify text in email responses, social media messages, and community chats, in multiple languages.

**Automate Unstructured Data:**
Unlock unstructured enterprise data and automate processing for efficiency.

**Time Series Forecasting:**
Forecast future trends and plan business strategies based on historical data.

**Cost Optimization:**
Predict future demand, analyze staff availability, and optimize productivity to manage staff costs effectively.

**Tag Images for Online Stores:**
Automate image tagging for online product catalogs without technical skills.

## Conclusion:

With [Manas AI](https://www.aiforme.wiki/ai/tools/manas), businesses can unlock the power of their data and benefit from AI-driven insights and automation. 

Experience revenue growth, cost reduction, and enhanced customer satisfaction without the need for coding or new technical skills. 

Empower your business with AI capabilities, making informed decisions and driving success in a simple and intuitive way. Embrace the power of [Manas AI](https://www.aiforme.wiki/ai/tools/manas) to transform your business outcomes and thrive in a competitive market.
How to use Bit full search
Published: 2023-08-06 01:20:32

Bit full search is a method to do full search by using bit operation.
This method are used when we solve subset problems.
Subset is a set of whose elements are all members of another set. For example, if we have a set `A = {1, 2, 3}`, then some subsets of A would be `{1}, {2}, {3}, {1, 2}, {1, 3}, {2, 3}, and {1, 2, 3}`

if you don't know about bit, I recommend you to read [this article](https://dev.to/nozomi/what-is-bit-operation-1edk).

To explain bit full search, I reference [Subsets](https://leetcode.com/problems/subsets/) by LeetCode.

## Answer
At first, I show the answer code.
```rust
impl Solution {
    pub fn subsets(nums: Vec<i32>) -> Vec<Vec<i32>> {
        let mut res = vec![];
        let n = nums.len();
        for bit in 0..(1 << n) {
            let mut vec = Vec::new();
            for i in 0..nums.len() {
                if bit & (1 << i) != 0 {
                    vec.push(nums[i]);
                }
            }
            res.push(vec);
        }
        res
    }
}
```

## Let's dive into
```rust
for bit in 0..(1 << n) {
  // TODO:
}
```
`for n in 0..(1 << n) {` show `2^n`
meaning it represents 2 raised to the power of n.
That is, 2 raised to the nth power.
we can iterate the loop as many times as the number of subsets

### Why the loop count of subsets is 2 raised to the power of n?
Given a set of '[a, b, c]', there are two possibilities of including or excluding `a`, two possibilities of including or excluding `b`, and possibilities of including or excluding `c`. so it will be 2 to the 3rd power.

### &(AND)
```rust
if bit & (1 << i) != 0 {
    vec.push(nums[i]);
}
```
Here I use `&`.
`&` means that Compares two bits and returns 1 if both are 1 and 0 if either is 0.
Therefore, if 1 is returned, all patterns can be showed by putting `i` in the array. 

## Summarize
We can solve subset problems by using bit specifications.
You may find it challenging to fully understand the concept by just listening to an explanation. However, writing the code by yourself can provide a deeper understanding.