teleren/devto huggingface dataset:
How to enable text selection of the tags in DevExtreme tag box
Tags: javascript, html, angular, devextreme
Published: 2023-08-22 02:04:30

Have you ever used the DevExtreme tag box and wondered why you couldn't select the text within the tags? Well, fret no more! In this article, we will show you how to enable text selection of the tags in the DevExtreme tag box, so you can easily copy and paste them wherever you need.

By default, the DevExtreme tag box does not allow text selection within the tags. This can be frustrating, especially when you want to copy a specific tag or its contents. But fear not, there is a simple solution to this problem.

To enable text selection of the tags in the DevExtreme tag box, you need to add a few lines of code to your application. First, make sure you have the latest version of DevExtreme installed. Then, follow these steps:

1.  Open your HTML file or template where the DevExtreme tag box is used.
2.  Locate the tag box element and add the `contenteditable="true"` attribute to it. This attribute allows the text within the element to be selected.
3.  Save the file and refresh your application.

That's it! Now you can select the text within the tags in the DevExtreme tag box. You can easily copy and paste the tags or their contents wherever you need.

But wait, there's more! You can also customize the appearance of the selected text within the tags. By default, the selected text is highlighted with a blue background color. If you want to change this, you can use CSS to style the selected text. For example, you can add the following CSS code to your application:

`.tag-box .dx-tag .dx-tag-content\[contenteditable="true"\]:focus::selection { background-color: yellow; }`

This CSS code will change the background color of the selected text to yellow. Feel free to experiment with different colors and styles to match your application's design.

So there you have it! With just a few lines of code, you can enable text selection of the tags in the DevExtreme tag box. Now you can easily copy and paste tags or their contents without any hassle. Happy coding!

References:
-----------

*   DevExtreme Documentation: [https://js.devexpress.com/Documentation/Guide/Widgets/TagBox/Overview/](https://js.devexpress.com/Documentation/Guide/Widgets/TagBox/Overview/)
*   MDN Web Docs - contenteditable attribute: [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable)
*   CSS-Tricks - ::selection: [https://css-tricks.com/almanac/selectors/s/selection/](https://css-tricks.com/almanac/selectors/s/selection/)
Dist::Zilla::Plugin::GitHub::CreateRelease
Tags: perl, cpan, github, distzilla
Published: 2023-08-22 01:29:38

I released an initial version of Dist::Zilla::Plugin::GitHub::CreateRelease.

It creates a GitHub Release complete with release notes (per options) and attaches the #cpan archive to the release.

Its great for ensuring that you create a GitHub Release when you release a new #perl module version to cpan.

It is likely rough so pull requests are welcome.

It supports:

- Draft Releases
- Obtaining release notes from the Change Log file, a specified file, the output of Dist::Zilla::Plugin::SignReleaseNotes or a generic release note generated by the module.
- Attaching the cpan archive
- Adding a checksum for the cpan archive to the release notes
- specifying that the notes should be a code block (verbatim text)

Hope its useful...
Introduction to Cloud I AM:Can I come in? Access Control in Google Cloud
Tags: cloudiam, security, roles, access
Published: 2023-08-22 01:28:04


In Google Cloud resources are arranged in a hierarchy with the organisation as the root node.To be able to access resources in Google Cloud you need identity access management in short called I AM.
Cloud I AM is how you decide who can do what in Google Cloud resources.To navigate this Google Cloud provides policies, identities and roles.
Lets get back to the hierarchy,every workload deployed in Google Cloud are organised as projects.The hierarchy flows from the organisation which is the root node to the folder and then the projects.





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




With I AM  you manage "who" that is the _identity_ does "what" access the _role_ to which resource..
The organisation, folder and projects are used to organize your resources.
I AM ensures that the resources are accessed by those authenticated to do so and not by all users, for a user to gain access you need to have a role.Authenticated users/members are called **Principals**
An I AM policy also called an "allow policy" defines what role or roles are given to the principals and enforce them as well.
The I AM policies are attached to resources, if there are any attempts  to access this resource, the policy will check if the user/principal is allowed to do so.
This is called **Authorization**.

**Authentication vs Authorization**
Authentication verifies "who" it proves  who you say you are ,a **principal**, while authorization determines "what" you have access to, that is to say you can do what you want to do the "who" (authenticated) the "what"(role).
Authentication offers a general scope in security of your resources at a granular level whereas authentication is more fine-grained.

**Credentials**
Credentials are digital objects that provide prove  of authentication that you are really who you say you are.
Examples of credentials include passwords,pins, and biometric data,a great example of this is logging into an email account with a password, and in trying to secure your account,you could protect it with a two-factor authentication in short 2FA.
Comment Your JavaScript Code
Tags: javascript, programming, beginners, tutorial
Published: 2023-08-22 01:26:26

Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.

There are two ways to write comments in JavaScript:

Using // will tell JavaScript to ignore the remainder of the text on the current line. This is an in-line comment:

`// This is an in-line comment.`


You can make a multi-line comment beginning with /* and ending with */. This is a multi-line comment:

`/* This is a
multi-line comment */`

NOTE: As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others and for your future self.

> You should create a // style comment that contains at least five letters.

The answer
```
// This is an in-line comment.
```

> You should create a /* */ style comment that contains at least five letters.
The answer
```
/* This is a
multi-line comment */
```
API Key based authentication with NGNIX open source API Gateway
Tags: authentication, nginx, apikey, apigateway
Published: 2023-08-22 01:05:30

API Key based authentication is a crucial aspect of securing your APIs and ensuring that only authorized users can access them. NGINX, the popular open-source web server, can also be used as an API Gateway to manage and secure your APIs. In this article, we will explore how to implement API Key based authentication with NGINX open source API Gateway.

API Keys are unique identifiers that are assigned to developers or applications to authenticate their access to APIs. They act as a secret passphrase that needs to be included in each API request. NGINX API Gateway allows you to validate these API Keys and control access to your APIs based on them.

To get started, you need to configure NGINX as an API Gateway and enable the API Key authentication mechanism. NGINX provides a simple and flexible configuration syntax that allows you to define API routes and apply authentication rules to them.

Here's an example NGINX configuration that demonstrates how to enable API Key authentication:

 

    
    http {
        server {
            listen 80;
            
            location /api {
                api_key on;
                api_key_config_file /etc/nginx/api_keys.conf;
            }
        }
    }
        

 

In the above configuration, we enable API Key authentication for the "/api" location. The "api\_key" directive enables the authentication mechanism, and the "api\_key\_config\_file" directive specifies the file path where the API Keys are stored.

Next, let's create the API Keys configuration file. The file should contain a list of API Keys, each on a separate line. For example:

 

    
    # API Keys Configuration
    # Format: api_key_name:api_key_value
    
    user123:abcdef123456
    app456:xyz987654321
        

 

Once you have configured NGINX as an API Gateway and defined the API Keys, you can start using them to authenticate API requests. Clients need to include the API Key in the "X-API-Key" header of their requests. NGINX will validate the API Key against the configured keys and allow or deny access accordingly.

API Key based authentication with NGINX open source API Gateway provides a simple yet effective way to secure your APIs. It allows you to control access and ensure that only authorized users or applications can consume your APIs. So, give it a try and secure your APIs with a touch of NGINX magic!

References:
-----------

*   [NGINX Official Website](https://www.nginx.com/)
*   [NGINX API Key Security](https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-api-key-security/)
Run a SpringBoot jar on Docker
Tags: docker
Published: 2023-08-22 00:58:18

Some articles suggest to run a centos docker image to run SpringBoot app. Since CentOS is deprecated, I found that [amazoncorretto](https://hub.docker.com/_/amazoncorretto) is an option.

Dockerfile
```Docker
FROM amazoncorretto:20

VOLUME [ "/data" ]
ADD MySpringBootApp-0.0.1-SNAPSHOT.jar MySpringBootApp
RUN sh -c 'touch /ValidatingFormInput.jar'
ENTRYPOINT [ "java", "-jar", "/MySpringBootApp" ]
```

Build Docker image

```
$ docker build -t myspringbootapp .  
```
Note that the Docker image name has to be lower case.

Run the docker container

```bash
$ docker run -p 8080:8080 myspringbootapp

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v3.1.1)

2023-08-22T00:41:04.306Z  INFO 1 --- [           main] i.s.s.V.MySpringBootAppApplication   : Starting MySpringBootAppApplication v0.0.1-SNAPSHOT using Java 20.0.2 with PID 1 (/MySpringBootAppApplication.jar started by root in /)
2023-08-22T00:41:04.307Z  INFO 1 --- [           main] i.s.s.V.MySpringBootAppApplication   : No active profile set, falling back to 1 default profile: "default"
2023-08-22T00:41:04.800Z  INFO 1 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2023-08-22T00:41:04.805Z  INFO 1 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2023-08-22T00:41:04.805Z  INFO 1 --- [           main] o.apache.catalina.core.StandardEngine    : Starting Servlet engine: [Apache Tomcat/10.1.10]
2023-08-22T00:41:04.838Z  INFO 1 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2023-08-22T00:41:04.838Z  INFO 1 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 505 ms
2023-08-22T00:41:05.006Z  INFO 1 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2023-08-22T00:41:05.013Z  INFO 1 --- [           main] i.s.s.V.MySpringBootAppApplication   : Started MySpringBootAppApplication in 0.942 seconds (process running for 1.172)
2023-08-22T00:41:18.153Z  INFO 1 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2023-08-22T00:41:18.153Z  INFO 1 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2023-08-22T00:41:18.154Z  INFO 1 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 1 ms

```
Streaming generated data as io.Reader at high speed in Go
Tags: benchmark, go
Published: 2023-08-22 00:42:06

When you want to benchmark a piece of code that processes `io.Reader`, it is common to use `io.Pipe` to stream generated data with an extra `io.Writer`.

Take a look at this trivial example benchmark.
```go
func Benchmark_ioPipe(b *testing.B) {
	r, w := io.Pipe()
	i := 0

	go func() {
		for {
			i++

			if i == b.N {
				_ = w.Close()

				return
			}

			_, _ = w.Write([]byte("<this might be a dynamic piece of generated data>\n"))
		}
	}()

	b.ReportAllocs()

	// io.Copy acts as a dummy processor here, in real-world 
	// scenario you'd have an actual io.Reader consumer.
	if _, err := io.Copy(io.Discard, r); err != nil {
		b.Fatal(err.Error())
	}
}
```

```
cpu: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Benchmark_ioPipe-12    	 1655488	       729.8 ns/op	      64 B/op	       1 allocs/op
```

Performance of such feed is not bad, but not very impressive either. Some speed is sacrificed to enable data safety under concurrency, both reads and writes can be called in parallel with synchronization happening in the pipe.

Let's try to improve performance for a particular case of generated feed exposed as `io.Reader`, that does not need external synchronization.

```go
type pagesReader struct {
	// next returns contents of the next page, 
	// io.EOF error indicates last page.
	next func() ([]byte, error)

	// buf keeps the data to be read.
	buf []byte
}

func (r *pagesReader) Read(p []byte) (n int, err error) {
	// Fill the reader buffer with pages 
	// until it exceeds the incoming buffer 
	// or reaches the end of pages.
	for len(r.buf) < len(p) {
		page, err := r.next()
		r.buf = append(r.buf, page...)
		if err != nil {
			copy(p, r.buf)
			return len(r.buf), err
		}
	}

	// Put head of reader buffer in the incoming buffer.
	copy(p, r.buf)

	// Move remaining tail into the head of reader buffer.
	remaining := r.buf[len(p):]
	r.buf = r.buf[:len(remaining)]
	copy(r.buf, remaining)

	return len(p), nil
}
```

`pagesReader` implements `io.Reader` that feeds data from user-defined callback `next func() ([]byte, error)`.

Now, let's update the previous benchmark to use `pagesReader` instead of `io.Pipe`.

```go
func Benchmark_pagesReader(b *testing.B) {
	i := 0
	r := &pagesReader{
		next: func() ([]byte, error) {
			i++

			if i == b.N {
				return nil, io.EOF
			}

			return []byte("<this might be a dynamic piece of generated data>\n"), nil
		},
	}

	b.ReportAllocs()

	// io.Copy acts as a dummy processor here, in real-world
	// scenario you'd have an actual io.Reader consumer.
	if _, err := io.Copy(io.Discard, r); err != nil {
		b.Fatal(err.Error())
	}
}
```

```
cpu: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Benchmark_pagesReader-12    	21766588	        52.38 ns/op	      64 B/op	       1 allocs/op
```

The unsynchronized implementation is much faster (about 14x speed) and might be more suitable for benchmarks for lower impact on overall result.

When synchronization is needed, it can be managed with a mutex in the `next` function itself.
Handling SVGs in SwiftUI: A Comprehensive Guide with SwiftSVG
Tags: swiftui, svg, ios, swift
Published: 2023-08-22 00:35:08


---
title: "Handling SVGs in SwiftUI: A Comprehensive Guide with SwiftSVG"
published: true
description: "Learn how to display SVG files in SwiftUI using the SwiftSVG library."
tags: swiftui, svg, ios, swift
---


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

When developing apps with SwiftUI, you might encounter the need to handle SVGs. Since SwiftUI does not natively support SVGs, in this article, we will explore how to display SVGs using the third-party library SwiftSVG.

## Table of Contents
- [Introducing SwiftSVG](#introducing-swiftsvg)
- [Adding SVG Files to Your Project](#adding-svg-files-to-your-project)
- [Displaying SVG in SwiftUI](#displaying-svg-in-swiftui)
- [Conclusion](#conclusion)

---

## Introducing SwiftSVG
To add SwiftSVG to your project, you can easily integrate it using the Swift Package Manager.

1. Open Xcode and select your desired project.
2. Navigate to `File` > `Swift Packages` > `Add Package Dependency...`.
3. Enter the package repository URL as `https://github.com/mchoe/SwiftSVG.git` and click "Next".
4. Choose the version you need and click "Next".
5. Select the target you wish to install to and click "Finish".

```swift
import SwiftSVG
```

---

## Adding SVG Files to Your Project
Adding SVG files to your Xcode project is straightforward.

1. Open the Xcode project navigator.
2. Drag and drop the SVG file directly from Finder.
3. Ensure the following options are selected:
   - Copy items if needed
   - Create groups
   - Add to targets (select the main app target)

---

## Displaying SVG in SwiftUI
Below is a basic way to display SVGs in SwiftUI using SwiftSVG:

```swift
import SwiftSVG

let svgView = UIView(SVGNamed: "your_svg_name") { (svgLayer) in
    svgLayer.resizeToFit(self.bounds)
}

struct SVGView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        return svgView
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
}
```

Now, you can use the `SVGView` within your SwiftUI view hierarchy to display the SVG.

---

## Conclusion
In this article, we delved into how to handle SVG files in SwiftUI using the SwiftSVG library. With SwiftSVG, displaying SVGs in your SwiftUI app becomes a breeze. If you have requirements around SVGs, consider introducing this library to your toolkit.

Your feedback and likes are much appreciated!
Table Header Data in Straight Line
Tags: html, css, angular, htmltable
Published: 2023-08-22 00:03:37

Table Header Data in Straight Line
----------------------------------

Tables are a fundamental part of displaying and organizing data in software development. They provide a structured way to present information, and the header row plays a crucial role in defining the data within the table. In this article, we will explore the importance of table headers and how to effectively align and format them in a straight line.

When it comes to table headers, keeping them in a straight line not only enhances the visual appeal of the table but also improves readability. A misaligned header can cause confusion and make it challenging to understand the data presented.

To ensure that your table headers are perfectly aligned, follow these simple tips:

1.  **Consistent Column Widths:** Make sure each column has a consistent width throughout the table. This will help maintain a straight line for the headers. You can achieve this by setting fixed widths or using percentage-based widths for the columns.
2.  **Text Alignment:** Align the text within the header cells uniformly. Most commonly, center alignment is used for table headers, but you can also choose left or right alignment based on your design preferences.
3.  **Use CSS:** Cascading Style Sheets (CSS) provide powerful tools for styling tables. Utilize CSS properties like `text-align` and `width` to control the alignment and width of the table headers.
4.  **Avoid Line Breaks:** Prevent line breaks within the header text by using the CSS property `white-space: nowrap`. This ensures that the header text stays on a single line, contributing to a straight line of headers.

Remember, while it is essential to maintain a straight line for your table headers, it doesn't mean you have to be rigid. Feel free to add some creativity and humor to your headers to make them more engaging. For example, if you are displaying a table of funny cat names, you can have a header like:

`<th>Cat Name (because they think they own you)</th>`

By incorporating humor, you can bring a smile to the faces of your users while still providing the necessary information.

When it comes to software development, attention to detail is crucial. A straight line of table headers may seem like a minor aspect, but it can significantly impact the overall user experience. So, take the time to align and format your table headers properly, and don't forget to have some fun with them too!

### References:

*   [W3Schools - CSS Tables](https://www.w3schools.com/css/css_table.asp)
*   [CSS-Tricks - A Complete Guide to the Table Element](https://css-tricks.com/complete-guide-table-element/)
Unlocking Your #dev.to Portfolio: Elevate Your Web Presence with Integrated Article Showcase
Tags: javascript, tutorial, react, meta
Published: 2023-08-22 00:01:45

In today's fast-paced tech world, showcasing your expertise is paramount. You've penned insightful articles on #dev.to, and now it's time to amplify your reach. 

Imagine seamlessly merging your dev.to articles into your personal portfolio website, creating a comprehensive showcase of your accomplishments. 

In this tutorial, we'll embark on an exciting journey to integrate the dev.to API with your portfolio section built in React. Get ready to empower your web presence and captivate your audience with a harmonious blend of technology and content.

---

### Installing React 

These are the initial steps to create your application in react.

#### Step 1: Environment Setup
Before you start, make sure you have Node.js installed on your computer, as React requires Node.js to run. You can download it from https://nodejs.org/.

#### Step 2: Create a new React application
To create a new application in React, you can use the official command line tool called "Create React App". Open your terminal and run the following command:

```
npx create-react-app my-personal-site
```

#### Step 3: Navigate to the Application Directory
After creating the application, navigate to the directory where it was generated using the command:

```
cd my-personal-site
```

#### Step 4: Run the Application
Once you are in the application directory, you can start a development server to see how your application looks in the browser. Run the following command:

```
npm start
```

#### Step 5: Declaring Variables 
To save the list posts, the username that you have on dev.to and last the URL path for the API.
```js
const [posts, setPosts] = useState([]);
const USERNAME = 'jcvb';
const DEV_TO_API =  `https://dev.to/api/articles?username=${USERNAME}`; 
```
#### Step 6: Get the posts 
Used the useEffect hook to fetch the data after the component mounts. The empty dependency array ([]) ensures that the effect runs only once, similar to the behavior of componentDidMount in class components.

```js
useEffect(() => {
  async function fetchPosts() {
    try {
      const response = await fetch(DEV_TO_API);
      const postsData = await response.json();
      setPosts(postsData);
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  }

  fetchPosts();
}, []); // Empty dependency array means this effect runs once after mount
```

#### Step 7: Render the results
Added a key prop to each <li> element to provide a unique identifier for React to efficiently update the list.

```html
return (
  <div>
    <h1>Post Lists</h1>
    {posts.length > 0 ? (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    ) : (
      <p>No posts available.</p>
    )}
  </div>
);
```

#### Final result
 
 {% embed https://stackblitz.com/edit/stackblitz-starters-srpfb8?file=src%2FApp.tsx %}
🔄 Remix: shouldRevalidate
Tags: remix, shouldrevalidate
Published: 2024-02-21 12:39:39

---
title: 🔄 Remix: shouldRevalidate
published: true
date: 2023-08-22 00:00:00 UTC
tags: remix,shouldRevalidate
canonical_url: https://akamfoad.dev/blog/remix-should-revalidate
---

Remix gives you fragrant defaults for web, and when you need, you can bring your perfume.

Read more on [Akam's Blog | 🔄 Remix: shouldRevalidate](https://akamfoad.dev/blog/remix-should-revalidate)