teleren/devto huggingface dataset:
The Magic of keyof and typeof in Typescript
Tags: webdev, typescript, programming, react
Published: 2024-05-02 16:14:15

Ever get stuck writing out long unions for component props based on an object? There's a cleaner way! 

This post explores using `keyof` and `typeof` to automatically generate type unions from object keys for your React components. 

**The Problem:**

Let's say you have a button component with different variants based on classNames:

```javascript
const classNamesMap = {
  primary: "bg-blue-500 text-white",
  secondary: "bg-gray-200 text-black",
  success: "bg-green-500 text-white",
};

// This approach is tedious and error-prone
type ButtonProps = {
  variant: "primary" | "secondary" | "success";
};
```

**The Solution: Leverage `keyof` and `typeof`!**

Here's how to achieve the same functionality with cleaner code:

```javascript
// Get the type of classNamesMap
type ClassNamesMapType = typeof classNamesMap;

// Use keyof to create a union type from the object's keys
type ButtonProps = {
  variant: keyof ClassNamesMapType; // variant: "primary" | "secondary" | "success"
};
```

With typeof you will be able to get the type of your object, and with keyof you will be able to create union types based on the keys of your object.


**Benefits:**

* **Reduced Code:** No more manually typing out unions!
* **Improved Type Safety:** TypeScript automatically enforces valid variants.
* **Maintainability:** Changes to `classNamesMap` are reflected in `ButtonProps`.

**Bonus:** 

* Use this approach for any component prop based on an object of key-value pairs.

**Spread the Knowledge!**

Share this post with your fellow developers and elevate your React component typing game!
How to restore a Mysql backup with XAMP
Tags: xamp, mysql, restoremysql, cmd
Published: 2024-05-02 16:12:09

## Update Environment Var:

![Update Env vars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lzbfr9jr16psgjwbt8h.png)

## Execution
Execute follow code in Open CMD ✅ (No PowerShell ✖️, No GitBash ✖️):
```
mysql -u root -p temabok --force < C:/Users/dbtuser/Documents/temabok_maindb/temabok_maindb.sql
```
AIO : Unable to read /etc/rancher/k3s/k3s.yaml, please start server with --write-kubeconfig-mode to modify ... permissions
Tags: aio, azureiot, troubleshooting
Published: 2024-05-02 16:06:52

Using Azure IoT Operations (AIO) and found that issue of permissions denied and the cluster not running with the following messages? Here is how I fixed it...

When I connect to my clusters, my first action is to check if my pods or services are running with the following command, but recently I have at times been getting the subsequent output error:

```bash
$ kubectl get service -n azure-iot-operations
WARN[0000] Unable to read /etc/rancher/k3s/k3s.yaml, please start server with --write-kubeconfig-mode to modify kube config permissions
error: error loading config file "/etc/rancher/k3s/k3s.yaml": open /etc/rancher/k3s/k3s.yaml: permission denied
```

The solution for me was to use this command.

```bash
sudo k3s server --write-kubeconfig-mode 644
```

If you encounter the following...

```bash
$ sudo k3s server --write-kubeconfig-mode 644
[sudo] password for danuw:
INFO[0000] Starting k3s v1.28.7+k3s1 (051b14b2)
INFO[0000] Configuring sqlite3 database connection pooling: maxIdleConns=2, maxOpenConns=0, connMaxLifetime=0s
INFO[0000] Configuring database table schema and indexes, this may take a moment...
INFO[0000] Database tables and indexes are up to date
INFO[0000] Kine available at unix://kine.sock
INFO[0000] Reconciling bootstrap data between datastore and disk
FATA[0000] starting kubernetes: preparing server: init cluster datastore and https: listen tcp :6443: bind: address already in use
```

...you can just stop the service with this command first:

```bash
sudo systemctl stop k3s
```

Your k3s cluster should now start and you will be able to get the list of pods/services confirming everything is running as expected.

I have not yet been able to investigate if this is still happening on the latest versions of AIO, but please let me know in the comments if you have anymore info (including why this is even happening on some restarts and how to avoid it permanently).

I cannot remember where I found all this info through forum but publishing it so it is easy to access for me and others in the future. Hope that was useful...
5 of the Best Free FrontEnd Tutorials Out There
Tags: webdev, javascript, beginners, tutorial
Published: 2024-05-02 15:58:47

Hey there, aspiring frontend developers! Are you looking for some top-notch free tutorials to kickstart your journey? Look no further! We've got you covered with this list of the best free frontend tutorials out there.
## 1. FrontEndMentor

[FrontEndMentor](https://www.frontendmentor.io/) offers a wide range of real-world projects and challenges to help you improve your frontend skills. With a focus on practical experience, you'll be building your portfolio and learning from industry experts.
## 2. W3Schools

[W3Schools](https://www.w3schools.com/) is a go-to resource for frontend developers. Their tutorials and reference materials are incredibly detailed and easy to follow. From basic HTML and CSS to advanced topics like JavaScript and PHP, W3Schools has got you covered.
## 3. Mozilla Developer Network (MDN)

[MDN](https://developer.mozilla.org/en-US/) is a treasure trove of frontend knowledge. With in-depth documentation and tutorials on web development, you'll learn from the best in the industry. From beginner-friendly guides to advanced topics, MDN is a must-visit.
## 4. CodePen

[CodePen](https://codepen.io/) is a fantastic platform for frontend developers. With a vast collection of tutorials, coding challenges, and projects, you'll be able to hone your skills in a fun and interactive way. Plus, their community is super supportive!
## 5. Scrimba

[Scrimba](https://scrimba.com/) offers interactive coding lessons and tutorials on frontend development. With a focus on hands-on learning, you'll be building real-world projects from the get-go. Their courses are engaging, and their community is awesome.
There you have it, folks! These 5 free frontend tutorials are the perfect starting point for your development journey. Happy coding!
## What's Next?

- Start with FreeCodeCamp's interactive coding challenges.
- Explore W3Schools' comprehensive tutorials and reference materials.
- Dive into MDN's in-depth documentation and guides
- Build projects with CodePen's coding challenges and community support.
- Learn by doing with Scrimba's interactive coding lessons.

Happy coding, and see you in the next article!

## Plus Tip
I just wanted to give a quick shoutout to [Notion](https://affiliate.notion.so/qpcf3d97sqqg) - it's been a total lifesaver for me as a developer! This awesome tool has helped me stay organized, focused, and productive, and I can't recommend it enough. Plus, it's super flexible and customizable, so you can make it work for you. And the best part? It's free to sign up! So what are you waiting for? 
### [Give Notion a try and see how it can transform your workflow!](https://affiliate.notion.so/qpcf3d97sqqg)
How can you find web design software that provides seamless collaboration features for remote teams?
Published: 2024-05-02 15:57:06

_Finding web design software that offers seamless collaboration features for remote teams involves considering several factors.:
1). Research and Compare
2). Check Collaboration Features
3). Read Reviews and Testimonials
4). Trial Period or Demo
5). Scalabilit
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbf70um8rpclve3bzoef.gif)y and Integration
6). Security
7). Cost
8). User Interface and Ease of Use

Some popular web design software with collaboration features for remote teams include: Figma, Adobe XD, Sketch, InVision, Zeplin._
How to create and monetize UI library?
Tags: ui, react, webdev, javascript
Published: 2024-05-02 15:51:27

Hi guys, I'd like to create a **UI library** in react that will offer a range collection of components WAI-ARIA included.

I'd like to offer (liek everyone does... like **chakra UI**) an open source version, then a **PRO version** with extra components... 
To do that will collect all users infos and feedbacks ideas of new components...
Idea is to have 1-2 components a week.
How to start? Is really worthly and place for a new UI library out there? 
Thanks.
How to create a Vue3 Application with Webpack - JavaScript Version
Published: 2024-05-02 15:39:26

In this article, let's create a Vue3 template project, it involves Vue3, Webpack.

https://github.com/markliu2013/vue3-template-js

**Create a folder and initialize NPM**

```bash
npm init -y
```

**Install Vue3**

```bash
npm i vue
```

**Install Webpack**

```bash
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
```

**Create src folder and index.html, App.vue, main.js**

**Install babel-loader**

```bash
npm i -D @babel/core @babel/preset-env babel-loader
```

**Create file babel.config.json**

```javascript
{
  "presets": [
    "@babel/preset-env"
  ]
}

```

**Install vue-loader**

```bash
npm i -D vue-loader
```

**Create file webpack.config.js**

```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require("vue-loader");

module.exports = {
    mode: "production",
    devtool: "source-map",
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].chunk.js',
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html' // to import index.html file inside index.js
        }),
        new VueLoaderPlugin(),
    ],
    devServer: {
        port: 3039 // you can change the port
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                use: {
                    loader: 'vue-loader',
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
        ]
    },
};
```
Understand How to Transform Images into Text Easily
Tags: filestack, javascript, webdev, ocr
Published: 2024-05-02 15:36:53

Let’s talk about OCR (Optical Character Recognition). You have images, and you want to extract the text from them.

There is an application with a nice user interface design that allows you to upload an image and extract text from it using the OCR function. This is [Filestack](https://www.filestack.com/).

![](https://miro.medium.com/v2/resize:fit:700/0*SaIiEEVB99IDS0x6 align="left")

In a 7-minute tutorial on the [Filestack channel](https://www.youtube.com/watch?v=PfXodBA8td0), the YouTuber Wesley from the [ByteGrad channel](http://www.youtube.com/@ByteGrad) (113K subscribers) teaches us how to implement this function.

IIn his example, the influencer uses a café menu image from Unsplash to demonstrate how Filestack’s OCR works.

“We’re building an app where users can upload photos of menus. I’ll click ‘upload,’ and after a short wait, we get the results: Espresso: 3, Piccolo: 3.5, Cappuccino: 4. It looks accurate! This shows how easy it is to add image-to-text functionality to our apps,” explains ByteGrad in the tutorial.

### **Watch now:**[**Image to Text Made Easy with Filestack**](https://www.youtube.com/watch?v=PfXodBA8td0&themeRefresh=1)

### **Check the**[**code**](https://github.com/ByteGrad/filestack-ocr)**used in the video**

![](https://miro.medium.com/v2/resize:fit:700/0*hOJ7SXK_aPsayFva align="left")

# **Multiple uses**

Text extraction from images has many practical applications. For instance, you could create bookkeeping software that automatically processes receipts and invoices by simply taking a photo.

In his video, ByteGrad demonstrates the code behind this process. He details how to use Filestack’s API key for Optical Character Recognition (OCR).

“Filestack provides a straightforward way to implement OCR. Using the uploaded file’s ID, we can easily retrieve the extracted text in JSON format,” explains ByteGrad.

Another use case is verifying signatures on documents. Since OCR services usually incur costs, ByteGrad discusses adding security measures to prevent unauthorized API calls.

He notes that Filestack’s custom dictionaries offer a way to enhance OCR accuracy, allowing for more sophisticated applications.

Another feature is text sentiment analysis, which looks like a typical AI feature. “You can do other things like copyright detection and document detection right. Basically, you’re building some kind of document management app with lots of features.”
Royal Present
Published: 2024-05-02 15:33:53

Our collections of machine embroidery designs will not leave anybody indifferent. Of course, you will find a lot of quality pictures, signs or monograms you wish to see on your things. Even if you do not have such machine or not skillful, you can solve this problem with our software. You can easily find services or a person to execute the embroidery after you purchase our designs. They are in a digital form and can suit a great number of modern machines.

[machine embroidery designs](https://royal-present.com/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opknm8q753zf6z2514ug.png)
We Made a Copilot Tool for you to Unlock the Power of Git History
Tags: opensource, git, ai
Published: 2024-05-02 15:33:42

---
title: We Made a Copilot Tool for you to Unlock the Power of Git History
published: true
description: Copilot but for git history
tags: opensource, git, ai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nw5n484of207szk3tmp.png
# published_at: 2024-05-02 15:19 +0000
canonical_url: https://news.opensauced.pizza/unlock-the-copilot-for-git-history/
---

At OpenSauced, we are thrilled to announce our latest feature: **StarSearch**. It's not just about the commits; it's about the community, the contributions, and the connections in the open source ecosystem - and you can [join the waitlist now](https://app.opensauced.pizza/star-search/waitlist)!


[![starsearch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kie77pwx0q4b4rulg1p.png)](https://app.opensauced.pizza/star-search/waitlist)



**StarSearch** is our AI-powered feature that provides in-depth insights into contributor history and activities, bringing transparency and a new depth of knowledge about open source projects.


## What Can You Discover with StarSearch?

- Contributor Activities: Learn the details of contributions and contributors.
- Key Contributors: Identify the key contributors to projects and ecosystems.
- Work-Based Connections: Find potential collaborators based on their contributions to specific projects
- Hidden Experts: Discover untapped talent in the ecosystem.

### A Solution to Sourcing Talent

Recently, Adam Wathan of Tailwind CSS expressed a challenge: attracting applicants well-versed in a niche combination (Rust and Tailwind) despite offering competitive salaries. 

{% twitter 1773341818773540949 %}

Inspired by this challenge, we asked ourselves, "Wouldn't it be cool if we built something to find this persona?" StarSearch allows you to get answers to your questions even when you don't have the context. The context for this question: most of the developers on the list work on front-end focused teams with an interest in developer performance. 
We’re not just another tool; we're here to redefine the meaning of open source. 

Let's uncover the stories behind the code together - [Join the Waitlist Today](https://oss.fyi/starsearch-waitlist) and share with your friends.
ShareX hotkey registration failed
Tags: sharex, tips
Published: 2024-05-02 15:23:57

bạn setup lại cái PC, cài ShareX vào, và khi khởi động lên, bạn thấy cái báo lỗi này 


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


chuyện này thường xảy ra với Win 10 / 11, vì trên đấy có cái OneDrive tích hợp, cái app Onedrive nó sẽ "đặt chỗ" 2 tổ hợp phím `PrintScreen` và `Alt + PrintSc`, khiến cho anh ShareX không đăng ký 2 cái phím này được. 

cách giải quyết 

1. tắt ShareX đi, giữ cho Onedrive chạy. 
2. bấm phím `PrintSc`, khi cái cửa sổ hỏi "muốn lưu screenshot vào OneDrive không?" hiện ra, bạn chọn "No Thanks" 
3. khởi động lại ShareX, lúc này bạn sẽ thấy là không còn báo lỗi nữa. 


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

credit: https://github.com/ShareX/ShareX/issues/6581#issuecomment-1369280267
How To Make Wholesale Variations Exclusive to Specific Customers
Published: 2024-05-02 15:23:10

Making product variations exclusive to specific wholesale customers can be a smart way to build loyalty, customize offerings, and upsell in e-commerce. Wholesale for WooCommerce, a leading e-commerce plugin, offers businesses the tools to achieve this.

Product Variations are different versions of a product based on characteristics like size, color, or material. By making these variations exclusive to certain wholesale customers, you can drive loyalty and repeat business. For example, a t-shirt might come in various sizes and colors, but offering specific colors exclusively to certain wholesale clients can make your business more attractive.

This strategy provides several benefits:

Customer Loyalty: When businesses offer exclusive product variations, they create a sense of privilege among customers. This exclusivity can foster a deeper connection, encouraging repeat purchases.
Customization: Exclusive product variations allow businesses to cater to different customer segments with unique needs. This level of customization enhances the shopping experience, leading to higher customer satisfaction.
Upselling: With exclusive product variations, businesses can encourage wholesale customers to purchase additional or higher-value products, boosting sales and revenue.
To implement this strategy, Wholesale for WooCommerce is an ideal tool. It lets businesses create customized wholesale stores within WooCommerce, providing control over which customers see specific product variations. With this plugin, you can create tailored experiences for wholesale clients, ensuring that your business stands out in the competitive e-commerce landscape.

[Learn more](https://wpexperts.io/blog/wholesale-variations/).
For web worker! 5 extensions that will help you your work done
Tags: webdev, beginners
Published: 2024-05-02 15:00:19

[Past post is here](https://dev.to/yamashee/my-favorite-3-chrome-extensions-48a)

I introduce my favorite chrome extensions. 
This time, I introduce 5 extensions to web worker. 

## Similar web
Those extensions can traffic information of web site all around the world. 
It can analyze competitors site, and SEO measures.
however, free version has limitation what can access information.
And, if site traffic are very few, you can't get information. 
[Get Similar web](https://chromewebstore.google.com/detail/%E3%82%B7%E3%83%9F%E3%83%A9%E3%83%BC%E3%82%A6%E3%82%A7%E3%83%96-%E3%83%88%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%83%A9%E3%83%B3%E3%82%AF%E3%81%A8%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E5%88%86/hoklmmgfnpapgjgcpechhaamimifchmp)

## Wappalyzer - Technology 
profiler
This extension let you get tech information about site. For example, framework, server, CMS, analytics tools.
You can know used tech that site in the world.
[GetWappalyzer - Technology 
profiler](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg)

## HTML error checker
You can found Syntex error if there are any error in HTML.
[Get HTML error checker](https://chromewebstore.google.com/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf)

## Alt & meta viewer
you can get alt of images, and meta information(title, description, ogp etc.)
[Alt & Meta viewer](https://chromewebstore.google.com/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl)

## Pasty
I went to open multipie sites at once...
This extensions meet the needs.
You can open sites that copied clipboard.
[Get Pasty](https://chromewebstore.google.com/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf)

## Summary
 
How did you this? 
Tend of chrome extensions are so fast.
In some case, used service is end suddenly. 
In some case, A compatible service has been released.
If you want to work expensively, I recommend to check chrome extensions regularly.
Web Scraping Made Simple with Ruby: Your Gateway to Online Data
Published: 2024-05-02 14:37:42

In today's digital world, there's a goldmine of information waiting to be tapped into on the web. But how do you get your hands on it without spending hours copying and pasting? Enter web scraping – your secret weapon for extracting data from websites effortlessly. If you're new to the game, let's break it down, along with how Ruby can be your trusty sidekick in this adventure.

## Let's Get Real: What's Web Scraping?

Think of web scraping as your personal data miner for the internet. It's the process of automatically collecting information from websites, so you can use it for whatever you need – from market research to building your own datasets.

## Types of Web Scraping: Keeping It Simple

When it comes to web scraping, you've got two main flavors:

    Static Web Scraping: This is like picking low-hanging fruit. You grab data from web pages that don't change much. Perfect for things like product prices on e-commerce sites.

    Dynamic Web Scraping: Here, things get a bit trickier. You're dealing with websites that update content on the fly using fancy JavaScript. But fear not, Ruby's got your back here too.

Ruby's Toolbox for Web Scraping

Now, let's talk about why Ruby is your best bud for web scraping:

    Nokogiri: This gem is your Swiss Army knife for parsing HTML and XML. It's like having X-ray vision for web pages – you can see all the juicy data hiding in the code.

    Mechanize: Ever wanted a robot to do your browsing for you? Well, Mechanize is as close as you'll get. It lets you automate interactions with websites, like filling out forms and clicking buttons.

    Watir: Picture yourself controlling a web browser with your code. That's Watir for you. It's perfect for scraping sites that throw a lot of JavaScript your way.

## Let's Dive In: A Quick Example

Enough talk, let's see some action. Here's a dead-simple Ruby script to scrape titles from a webpage:

```ruby
require 'nokogiri'
require 'open-uri'

html = open('https://example.com').read
doc = Nokogiri::HTML(html)

doc.css('h1').each do |title|
  puts title.text
end
```

In this snippet, we grab the HTML content from a webpage, use Nokogiri to parse it, then loop through all the `<h1>` tags and print out their text. Easy peasy!

## Wrapping Up

Web scraping might sound intimidating, but with Ruby by your side, it's a breeze. Armed with the right tools and a bit of know-how, you can unlock a treasure trove of data from the web. So why wait? Start scraping and see what insights you uncover!