teleren/devto huggingface dataset:
React - How to deal with SVG
Tags: webdev, react, beginners, svg
Published: 2023-04-10 08:00:00

Working with SVG in a React app can give you headaches!

Understanding how to effectively handle and use SVG files in our applications isn't always straightforward. In fact, there are only two distinct scenarios that one may come across.

---

## SVG as a static image
One practical way to handle SVG files is by storing them in an assets folder and importing them like packages:

```javascript
import MySVG from 'assets/homer-simpson.png';

const Component = () => {
	return (
		<img src={MySvg} alt='Homer Simpson' />
	)
} 
```

---

## SVG with dynamic properties
While the initial method of displaying your SVG is acceptable, there may be instances where you need to modify your SVG properties based on conditional variables and events.

In such cases, a more efficient approach is to create a separate component that solely handles the SVG and its property logic, making it easier to manage and update.

```javascript
const MySVG = ({color}) => {
	return (
		<svg height="100" width="100">
		  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill={color} />
		</svg>
	);
}

const Component = () => {
	const [focused, setFocused] = useState(false);
	return (
			<button onClick={() => setActive((prev) => !prev)}>
				<MySVG color={focused ? "red" : "black"}/>
			</button>
	)
} 
```
Port Intel x86-64 intrinsic function to RISC-V or ARM
Tags: intel, intrinsic, riscv, arm
Published: 2023-04-10 06:36:41

I am researching way to port Intel x86-64 intrinsic functions to RISC-V or ARM.This research is solution to CPU architecture dependency problem.
Intel x86-64 is CISC(Complex Instruction Set Computer) and very long history.Once the code runs on x86-64 computer it must run forever.So it carries a lot of heritage.CISC like Intel is converting CISC variable length instruction to RISC like micro code. So it need converting circuit and die size becomes large.So there is overhead like consumption of electricity becomes large.
On the other hand,ARM and RISC-V is same as means of if code runs these machine,it must run forever but Instruction Set is simple and it can use relatively new technology.
But the NO 1 of market share of super computer or PC or server is Intel because many Linux application is made for Intel.
So if application that runs only on Intel can run on RISC-V or ARM by very optimized way,it may be very advantagerous.

So if we want to run application for Intel x86-64 on RISC-V or ARM by very optimized way, it need to port Intel intrinsic function to RISC-V or ARM.
the document shown below are very helpful.

https://openpowerfoundation.org/specifications/vectorintrinsicportingguide/

Intel Intrinsic API provide Instruction Set Extension Intel continue to provide.SIMD(Single Instruction Stream Multiple Data Stream) is included.

To port Intel x86-64 function to RISC-V like IBM POWER takes specific wrap structure like below.

```c
extern __inline __m128d __attribute__((__gnu_inline__, __always_inline__,__artificial__))
_mm_add_pd (__m128d __A, __m128d __B)
{
   return (__m128d) ((__v2df)__A + (__v2df)__B);
}
```

_mm_add_pd is Intel Intrinsic function and this function add __A and __B. Intel Intrinsic function runs RISC-V like IBM POWER by adding this code.

We show other example.

```
extern __inline __m128d __attribute__((__gnu_inline__, __always_inline__,__artificial__))
_mm_set1_pd (double __F)
{
   return __extension__ (__m128d){ __F, __F };
}
```

this copy __F value and store to __m128m by vector format.

I am planning to make test framework to content of these wrap structure.
These port must be validated and make sure it is correct.
So we input Intel and RISC-V like IBM POWER or ARM the same value and make sure output is same.

I name this test framework as Akari. Meaning Light in Japanese.

https://www.slideshare.net/OkaDaisuke/testing-framework-to-port-and-optimize-simd-library-to-open-power-systems

I presented OpenPower summit 2021 NA.
Integrating Audio/Video calls into your application — Twilio, Agora, Zoom, LiveKit
Tags: ios
Published: 2023-04-10 15:27:47

https://www.inconceptlabs.com/blog/integrating-audio-video-calls-into-your-application-twilio-agora-zoom-livekit

Experience-based comparison of leading audio and video call conferencing providers based on integration complexity, time, and pricing.

Here I would like to share our experience integrating audio/video calls into LiveBoard, an all-in-one online tutoring platform. LiveBoard is an excellent example of audio-video integration and real-time communication application since it has mobile and web applications and requires 1-on-1 and group video conferencing calls with audio/video recording.

Before going into the full details, let’s describe our journey, and I will share every problem we have faced with integrations. I hope this article will help other founders to avoid the mistakes we have made.

Understanding main requirements and concepts
Before comparing different providers, let’s understand the main requirements and learn some key concepts.

API/SDK availability and integration complexity — first of all, we should understand if there is an SDK for WEB, iOS, and Android platforms and the ease of integration.
UI flexibility is another Key requirement since some providers may give you UI components that are not designed to be customized, and there is no way to embed them into your application UI smoothly.
Recording — audio/video call recording on the server and accessing them via the API. Some providers claim they have a recording, but it seems you need to record it on the client side, and in case the browser is closed or crashed, the recording will be lost.
Pricing is the most critical requirement in this industry since the price calculation could be very surprising for newbies.
It is also important to mention that our goal was to have a deep integration when users interact inside LiveBoard only. Many applications choose the easy path by generating Zoom links and opening Zoom on another tab or placing the Zoom app inside an iFrame, in both cases losing control and user experience.
Create a Lambda function and upload code using Ansible
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-04-10 16:56:50

[99/100] #100DaysOfCloud Today, I created a Lambda function and uploaded code of Arithmetic Operations using Ansible.

Ansible is an open-source automation tool that uses playbooks to enable you to make deployments faster and scale to various environments. Think of playbooks as recipes that lay out the steps needed to deploy policies, applications, configurations, and IT infrastructure. You can use playbooks repeatedly across multiple environments. Customers who use Ansible playbooks typically deploy periodic changes manually. As complex workloads increase, you might be looking for ways to automate them

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/099/Readme.md)
How to reallyze SonarQube code-quality scan in Meven
Tags: java, programming, testing
Published: 2023-04-11 00:59:43

Maven is a popular build automation tool for Java projects, while SonarQube is a powerful platform for continuous code quality inspection. By integrating Maven with SonarQube, developers can automatically scan code and get feedback on code quality, security, and reliability. This documentation will explain how to use Maven in SonarQube to analyze code for both local and remote server scans.

The purpose of using Maven in SonarQube to analyze code for both local and remote server scans is to ensure that code quality is maintained across all code repositories, regardless of where they are located. By integrating SonarQube into the Maven build process, developers can receive feedback on code quality and identify potential issues without having to manually analyze code.

How to use Maven in SonarQube for local and remote server scans:

The first step is to install and configure SonarQube on your system. You can download the latest version of SonarQube from their official website.

Once SonarQube is installed, you need to configure your Maven build to use it. You can do this by adding the following code to your pom.xml file:

```
<build>
  <plugins>
    <plugin>
      <groupId>org.sonarsource.scanner.maven</groupId>
      <artifactId>sonar-maven-plugin</artifactId>
      <version>3.9.0.2155</version>
    </plugin>
  </plugins>
</build>
```

Run local scan: To analyze code for a local scan, use the sonar:sonar goal of the sonar-maven-plugin. Use the following command:

```
mvn sonar:sonar \
  -Dsonar.projectKey=<your-project-key> \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=<your-sonarqube-token>
```

Note: Replace your-project-key and <your-sonarqube-token> with the respective values for your project.

To analyze code for a remote server scan, use the sonar:sonar goal of the sonar-maven-plugin. You need to specify the remote SonarQube server's URL and the authentication token to access it. Use the following command:

```
mvn sonar:sonar \
  -Dsonar.projectKey=<your-project-key> \
  -Dsonar.host.url=<url-to-sonarqube-server> \
  -Dsonar.login=<your-sonarqube-token>
```

Note: Replace your-project-key, url-to-sonarqube-server, and <your-sonarqube-token> with the respective values for your remote SonarQube server.

Once the analysis is complete, you can view the results in the SonarQube dashboard. The dashboard will show you an overview of your project's code quality, as well as any issues that need to be addressed.

By following the steps outlined above, you can use Maven in SonarQube to analyze code for both local and remote server scans. This will help ensure that code quality is maintained across all code repositories, regardless of where they are located.
CUSTOM SCROLLBAR MAKER
Tags: javascript, programming, tutorial, ux
Published: 2023-04-11 05:09:24

A custom scrollbar maker is a tool that allows website designers and developers to create unique and personalized scrollbars for their websites. Typically, the default scrollbar that comes with a web browser is functional but not very visually appealing. With a custom scrollbar maker, designers can choose from a variety of styles, colors, and sizes to match the overall look and feel of their website.


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

The process of creating a custom scrollbar usually involves selecting a base color or image, and then choosing additional options such as gradient styles, border styles, and scrollbar widths. The resulting scrollbar can be previewed and tested within the tool before it is implemented on the website.

Custom scrollbars can be an important part of creating a polished and professional website. They can help to enhance the user experience by providing a consistent and visually pleasing design throughout the site. Additionally, custom scrollbars can be a way to add a unique touch to a website, making it stand out from other sites with default scrollbars.


<iframe height="300" style="width: 100%;" scrolling="no" title="CUSTOM SCROLLBAR MAKER" src="https://codepen.io/ErRobin/embed/LYgVXOO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ErRobin/pen/LYgVXOO">
  CUSTOM SCROLLBAR MAKER</a> by Er Robin (<a href="https://codepen.io/ErRobin">@ErRobin</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
uses of kentico cms by various enterprises & its benefits
Tags: webdev, programming, react, javascript
Published: 2023-04-11 05:39:12

Are you a business owner having almost no presence or less presence on the internet? Nowadays, as a business owner, you probably wouldn’t want to be left behind when it comes to selling online. 

Every business that wants a good online presence, needs several assisting tools and technologies. And such a tool is a content management system, commonly known as CMS technology.


A web content management system enables you to upload or produce a material, format that information, add headlines and photos, and do a variety of backstage tasks such as search engine optimization. Let’s dive deep into this and explore one of the best CMS solutions out there, the Kentico CMS Solutions.

kentico cms: an overview

A web content management system that many businesses prefer these days is called Kentico CMS or Kentico Xperience. To facilitate development, Kentico Xperience makes use of ASP.NET and Microsoft SQL Server. This may be done using Visual Studio or Microsoft MVC. Additionally, 

Kentico Xperience is compatible with the cloud computing platform Microsoft Azure. The most current release is version 13, and it's called Kentico Xperience. It was released on October 27, 2020, and updates are made consistently. The most recent revision was made available on November 24th, 2021.

Recommended Read: Top headless cms platforms that you should check out

One of the most popular Enterprise CMS Solutions in the market is Kentico CMS. A lot of established businesses built their popular websites using Kentico CMS. Various features and benefits of Kentico CMS are attracting more and more developers. 

Therefore, it’s worth discussing this content management system and its benefits. But before that, let us see which leading businesses in the world use Kentico CMS for their business. According to a study, about 0.1% of the market is occupied by Kentico CMS. Almost 14,134 renowned companies use Kentico CMS solutions.
View Source: [uses of kentico cms by various enterprises & its benefits](https://www.zenesys.com/uses-of-kentico-cms-by-various-enterprises-its-benefits)
Best Resources for Machine Learning
Tags: deeplearning, machinelearning, computervision, python
Published: 2023-04-12 12:04:53

[How to Extract Tables from PDF files and save them as CSV using Python](https://machinelearningprojects.net/extract-tables-from-pdf-files/)

[Face Recognition-Based Attendance System with source code – Flask App – With GUI](https://machinelearningprojects.net/face-recognition-based-attendance-system/)

[10+ Unique Flask Projects with Source Code](https://machinelearningprojects.net/flask-projects/)

[Easiest way to Train yolov7 on the custom dataset](https://machinelearningprojects.net/train-yolov7-on-the-custom-dataset/)

[30+ Unique Computer Vision Projects with Source Code](https://machinelearningprojects.net/opencv-projects/)

[20+ Unique Machine Learning Projects with Source Code](https://machinelearningprojects.net/machine-learning-projects/)

[How to Install TensorFlow with Cuda and cuDNN support in Windows](https://machinelearningprojects.net/install-tensorflow-with-cuda-and-cudnn/)

[How to build OpenCV with Cuda and cuDNN support in Windows](https://machinelearningprojects.net/build-opencv-with-cuda-and-cudnn/)

[20+ Unique Deep Learning Projects with Source Code](https://machinelearningprojects.net/deep-learning-projects/)

[How to Deploy a Flask app online using Pythonanywhere](https://machinelearningprojects.net/deploy-a-flask-app-online/)
PostgreSQL 15: Breaking Barriers and Unleashing Creativity with Native JIT Compilation, Improved Parallelism, and More P2
Tags: apache, features, database, postgres
Published: 2023-04-12 15:46:18

Welcome to the second part of our series of posts on the latest features of PostgreSQL 15. In this part, we will dive deeper into more exciting and innovative features that PostgreSQL 15 has to offer. PostgreSQL is a powerful and widely-used open-source relational database management system that has been gaining popularity among developers and enterprises alike. It has a reputation for being a robust, scalable, and secure database system that can handle large amounts of data and complex queries.

## Parallel query execution on remote databases

In a distributed database environment, data is stored across multiple databases that may be located in different physical locations. In such an environment, performing queries that involve data from multiple databases can be challenging due to the need to transfer large amounts of data among the databases. we tend to use this for durability of the database servers, or when the time needed to retrieve all the data across the servers in different zones. 

To overcome this challenge, parallel query execution on remote databases can be achieved through various techniques. Parallel query planning involves dividing a query into smaller sub-tasks that can be executed in parallel on different databases. This approach involves optimizing the plan to minimize data movement between databases, which helps to reduce the time required to complete the query.


## Storage interface

when creating the tables default in the Postgres are stored in a B-tree which is optimized for sorting and searching across the data. and there are several types: Hash,GiST, SP-GiST, GIN, BRIN. now using this method you can change the table storage type and this is actually very useful excluding the time needed to regenerate the table from the ALTER we will be able to switch between the storage methods experiencing the feature of each one. 
we are not done yet next time we will have a talk about more top features and by the end we will start the series of discovering the Architecture that support such Top features.

## SELECT DISTINCT
continue the talks about the parallelism of the previous features you can now do the above Query in parallel database.

I mentioned the TOP features on PostgresSQL 15

to read [P1](https://dev.to/nightbird07/top-down-postgresql-15-top-features-2c6o)

Next time we will start thinking about the implementation behind each feature.

### Reference 
1- My brain 
2- [PostgreSQL Doc](https://www.postgresql.org/docs/current/install-procedure.html)
Thanks for reading
Hosting a static web app on Azure.
Tags: azure, staticwebapps, cloud, devops
Published: 2023-04-14 12:42:26

We shall go over how to host a custom web app on azure platform.

We assume that we have our code is on github.
![Github code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xw27t80mjotx58t8uqb.png)

Next we head over to the Azure platform login in and search for the Static Web App service.

![Search static web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjlvfzn2b2vngdecphnm.png)

Once the service is loaded, click create.

![create app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynpzmsgm00dq4zb0vs8j.png)

Then start filling in neccessary information about your app such as resource group it belongs to.Here we shall create one.


![Resource group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r4pcherpts7iicdb3fx.png)

Then we shall name our app.

![Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk9beqknu8rj7i9ig933.png)

Next we shall choose free hosting, and github as our deployment source.

![Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hyngjlf41ezo4mn5gwv.png)

Then we shall grant access to github by clicking sign into github.

![Github sign in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vak5mu5ky16lho4owln.png)

Once github has access it will look like this.

![Access to github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wff5bujq0ri8s1blll0.png)

Now its time to indicate where our index.html file is located.In my case the root folder so i will use a slash.

![Locate index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkv57sn0plckycavtgnz.png)

Finally lets preview our app settings by clicking preview and finally click create. 

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw04ar0yr09hc3f7vwhx.png)

Give it some 3 minutes and we shall have our page ready to view.

![Resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2647ya6vgaatmlai5pn.png)

Next click on the go to resource and you can see the URL link to the web app.

![Resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hluac8h8glv4rveazhp8.png)

Then you will see the hosted web application.

![Web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9w1ovr3nc75yfitouig.png)
Will AI take your job or allow you to work faster?
Published: 2023-04-13 01:24:10

With the rapid evolution of AI from all different aspects whether its writing blogs, creating images, generating code, etc, what will happen to our jobs?

I have been pondering various questions about this the impact of AI as we all have. I have developed some thoughts about these questions:

**Will AI completely replace us?** 
- I would tend to argue no. I am going off this conclusion based on business and competition reasoning.
- Companies are always trying to get more done faster with less cost.
- AI does get more stuff done faster, but just like employees AI also needs to be told what to do and much more so than humans.
- If one employee can generate x amount of product with AI, then 10 employees can generate 10x that amount all using AI.
- Being first to market is more important than saving a buck.

What are your thoughts? Do you agree or disagree with my assessment of the new technology?
What are some tips for collaborating with other developers and teams in full stack development projects?
Published: 2023-04-13 06:47:17

Collaborating with other developers and teams in full stack development projects requires effective communication, coordination, and teamwork. Check- [java full stack developer course](https://www.geekster.in/full-stack-web-development-program) Some tips for successful collaboration include establishing clear channels of communication, setting up regular meetings, using collaborative tools like version control systems, issue tracking systems, and project management software. Clearly defining roles and responsibilities, providing timely feedback, and being open to feedback from others are also important. Collaborating in an agile or iterative development environment, fostering a positive team culture, and respecting diversity of ideas and opinions can contribute to successful collaboration in full stack development projects.
Full Stack Development Training | Full Stack Developer Programme | KVCH Courses
Tags: programming
Published: 2023-04-13 07:32:12

KVCH offers [Full Stack Development Training](https://kvch.in/full-stack-developer-programme), a comprehensive program that equips learners with the skills to become full-stack developers. The course covers front-end technologies such as HTML, CSS, and JavaScript, as well as back-end frameworks such as Node.js, Express.js, and MongoDB. With hands-on training, learners will build real-world applications and gain experience in agile development methodologies. Upon completion, learners receive a certification demonstrating their proficiency in [full-stack development](kvch.in).
Zotezo: Health, Beauty, Fitness Related Information
Tags: health, fitness, beauty
Published: 2023-04-13 11:53:58

[Zotezo](https://www.zotezo.com/) is an Indian online health and wellness store that offers a wide range of products including personal care, health devices, sports & fitness equipment, and home appliances. 

The company was founded in 2014 and is headquartered in Kolkata, West Bengal, India. [Zotezo](https://www.zotezo.com/) aims to provide customers with easy access to quality health products and services at affordable prices, and has a strong commitment to customer satisfaction. 

The company offers a variety of payment options and provides fast and reliable delivery across India. In addition to its e-commerce platform, Zotezo also offers health and wellness content, expert advice, and online consultations with doctors and nutritionists through its website

Our reviews & recommendations are and will always be unbiased:- We know that it’s easy to find, and access information on wellness. But, it’s confusing when it comes to believing in this readily available content. 

We acknowledge that you’re an individual with specific health, beauty & fitness goals and we’re here to support you with trustworthy information to help you be in the vigor of body and mind.