teleren/devto huggingface dataset:
A Digital Business Card using React
Tags: cards
Published: 2023-10-03 18:55:27

---
title: A Digital Business Card using React
published: true
date: 2023-10-01 00:34:00 UTC
tags: Cards
canonical_url: https://reactjsexample.com/a-digital-business-card-using-react/
---

# Digital Business Card
 ![A Digital Business Card using React](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-29-08.jpg)

I designed this business card with a React application and HTML/CSS.

## Screen Shot

![A Digital Business Card using React](https://user-images.githubusercontent.com/98703238/271240601-444b42d9-80a0-42bb-9937-0d1cbbf17697.png)

## Author

- Facebook – [Zain Asif](https://www.facebook.com/S.Zain.Asif/)
- LinkedIn – [Zain Asif](https://www.linkedin.com/in/zain-asif-614337233)

## GitHub

[View Github](https://github.com/ZainAsif767/businesscard?ref=reactjsexample.com)
Add a mouse-tracing glow effect to React components
Tags: effects
Published: 2023-10-03 18:55:46

---
title: Add a mouse-tracing glow effect to React components
published: true
date: 2023-10-01 00:32:00 UTC
tags: Effects
canonical_url: https://reactjsexample.com/add-a-mouse-tracing-glow-effect-to-react-components/
---

# React glow
 ![Add a mouse-tracing glow effect to React components](https://reactjsexample.com/content/images/2023/09/Code_2023-09_11-27-44.jpg)

Add a mouse-tracing glow effect to React components.

![Add a mouse-tracing glow effect to React components](https://github.com/codaworks/react-glow/raw/master/media/glow.gif)

The glow effect will only work using the mouse as the pointer. Touch events will not trigger it.

See it live on [codaworks.com](https://codaworks.com).

## Installation

Install the package with npm:

```
npm i @codaworks/react-glow
```

## Usage

Wrap any number of `<Glow>` components in a `<GlowCapture>` which will be used to track the mouse location.

```
<GlowCapture>
  <span>This won't glow</span>
  <Glow color='purple'>
    <span className='text-black glow:text-glow/50 glow:bg-red-100'>
      This will glow purple when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>
```

Children of `<Glow>` can style themselves how to look when glowing. You might choose to leave some children unchanged, or highlight them with the `glow:` variant style.

The value of `color` will be available as a CSS variable `--glow-color`, as well as the Tailwind `glow` color. You can pass any valid CSS color, including `hsl()` values etc. Of course, you might choose to use any other color; you can leave out the `color` prop entirely.

## Tailwind

Add the tailwind plugin to unlock the `glow:` variant and `glow` color

`tailwind.config.js`

```
module.exports = {
  ...
  plugins: [
    require('@codaworks/react-glow/tailwind')
  ]
}
```

As with all colors in Tailwind, you may add opacity by appending a percentage after the color, such as `bg-glow/20` for 20% opacity.

## Vanilla CSS

You can style the glow effect with vanilla CSS:

```
<GlowCapture>
  <span>This won't glow</span>
  <Glow color='hsl(338.69 100% 48.04%)'>
    <span className='glowable-text'>
      This will glow pink when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>

.glowable-text {
  color: black;
}

[glow] .glowable-text {
  color: var(--glow-color);
}
```

## Attribution

Inspired by [this tweet](https://twitter.com/codepen/status/1696297659663888490).

## GitHub

[View Github](https://github.com/codaworks/react-glow?ref=reactjsexample.com)
Low-Code Challenges: What's Next
Tags: discuss
Published: 2023-10-01 00:00:00

---
published_at : 2023-10-01 00:00 +0000
---

>  What hurdles have you faced with low-code programming? What do you see in the future for this approach to software development?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Setting up Obsidian sync in Windows
Published: 2024-01-24 14:40:36

---
title: Setting up Obsidian sync in Windows
published: true
date: 2023-10-01 00:00:00 UTC
tags: 
canonical_url: https://andwati.github.io/blog/obsidian-sync/
---

Syncing Obsidian in Windows with Windows Task Scheduler and git …
Machine learning and graph databases
Tags: apacheage, postgres
Published: 2023-09-30 23:21:18

##Introduction
Imagine if computers could learn from data and understand complex connections. That's where graph databases and machine learning come in. They work together to help us find patterns and make predictions. In this blog post, we'll explore how they team up to bring a whole new level of intelligence to our machines.

##Graph Databases and Machine Learning
Graph Databases: They are special tools that are really good at handling relationships in data. They help us understand how different things are connected.

Machine Learning: This is like teaching computers to learn from examples. They get better at tasks as they see more data.

##How They Work Together

Better Data Understanding: Graph databases help us organize data in a way that shows how things are related. This helps machine learning models understand the data better.

Personalized Recommendations: Have you ever seen suggestions like "You might also like..." on shopping websites? That's the power of graph databases and machine learning working together. They help make suggestions that are just right for you.

Finding Unusual Things: Imagine trying to find something unusual in a big group. Graph databases make it easier by showing how everything is connected. This is really useful for spotting things like fraud or unusual behavior.

Understanding Social Networks: We all have friends and connections. Graph databases help us understand who knows who, which is important for things like social media and targeted ads.

##Why It's Great

Faster Answers: Graph databases are super quick at finding relationships. This means machines can give us answers in real-time, like suggesting a movie or detecting fraud.

More Accurate Predictions: When machines understand how things are connected, they can make better guesses. It's like when you know your friend's favorite color, you can guess what gift they'd like!

##What's Next?

Smarter Networks: Imagine machines that understand relationships even better. That's what researchers are working on with something called "Graph Neural Networks".

Deep Understanding: Combining knowledge graphs with machine learning is the next big thing. It's like giving machines a deeper understanding of the world.

Graph databases and machine learning are changing the game in how we use data. They help us find hidden patterns, make better predictions, and build smarter systems. The future looks bright with this powerful team. So, let's get ready for a new era of smart decision-making!

Check Apache AGE graph database system here:
Website: https://age.apache.org/
GitHub: https://github.com/apache/age
Render content based on viewport size with a directive
Tags: angular, responsive, webdev
Published: 2022-08-22 11:04:00

In this post I am going to describe how to use angular [https://material.angular.io/cdk/layout/overview](cdk) to build a structural directive that controls the rendering of components.

**Structural directives are directives which change the DOM layout by adding and removing DOM elements**. They are prefixed with the asterisk symbol(*). You may have used (*ngIf, *ngSwitch...)

[Detailed explanation here](https://angular.io/guide/structural-directives#creating-a-structural-directive)

```
npm i @angular/cdk // install the angular cdk
```

```javascript
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
import { Directive, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'
import { Subscription } from 'rxjs'

type BreakpointSizes = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | 'Desktop' | `(${'max-width'|'min-width'}: ${number}px)`

const sizes = new Map([
  ['XSmall', Breakpoints.XSmall],
  ['Small', Breakpoints.Small],
  ['Medium', Breakpoints.Medium],
  ['Large', Breakpoints.Large],
  ['XLarge', Breakpoints.XLarge]
])

@Directive({
  standalone: true,
  selector: '[appIfViewportMatch]'
})
export class IfViewportMatchDirective implements OnDestroy {
  private subscription!: Subscription
  private hasView = false

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private bpObserver: BreakpointObserver
  ) { }

  @Input() set appIfViewportMatch(mq: BreakpointSizes) {
    if (this.subscription) return
    const size = sizes.get(mq)

    this.subscription = this.bpObserver.observe(size || mq).subscribe(({ matches }) => {
      this.render(matches)
    })
  }

  ngOnDestroy(): void {
    this.subscription && this.subscription.unsubscribe()
  }

  private render(matches: boolean) {
    if (!this.hasView && matches) {
      this.viewContainer.createEmbeddedView(this.templateRef)
      this.hasView = true
    } else  {
      this.viewContainer.clear()
      this.hasView = false
    }
  }
}
```
The directive listens for viewport sizes and when a media query is matched the content is rendered into the DOM.

It only subscribes once on the first set to avoid multiple subscriptions.

This type provides some intellisense for the accepted values. It also provides the option to provide a custom media query.

```
type BreakpointSizes = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | 'Desktop' | `(${'max-width'|'min-width'}: ${number}px)`
```
Examples:

```html
<!-- Only renders when the viewport is more than 600px -->
<hello name="{{ name }}" *appIfViewportMatch="'(min-width: 600px)'"></hello>

<!-- Mobile view -->
<h1 *appIfViewportMatch="'XSmall'">On mobile</h1>
```

Here you can see a working [example](https://stackblitz.com/edit/angular-ivy-hzxukn?file=src/app/if-viewport-match.directive.ts)
🔍 Scribus: the best free Adobe InDesign alternative 📊
Tags: publishing, opensource, scribus, indesign
Published: 2023-09-30 22:29:19

📚 Just published a new article comparing Scribus and Adobe InDesign, two powerful tools for self-publishing digital and printed content. Here's a quick overview of what you'll find in the article:

📖 Motivation for Self-Publishing: Sharing my journey from a Substack article to exploring self-publishing alternatives.

🛠 Journey into Self-Publishing Software: Exploring options like Microsoft Docs, LaTeX, and Pandoc before discovering Adobe InDesign and Scribus.

🖥 Adobe InDesign: A closer look at the industry-standard desktop publishing tool, its features, and cross-platform availability.

📊 Scribus: An introduction to the open-source desktop publishing software, its capabilities, and supportive community.

🤝 Scribus vs. Adobe InDesign: My personal take on these tools and their user bases.

✅ Conclusion: Sharing my choice and experience with Scribus for creating a digital magazine and thanking the open-source community.

💡 If you're into self-publishing or curious about these tools, dive into the full article for an in-depth comparison and insights.

Read the entire article on my personal blog at https://gsantoro.dev/posts/scribus-vs-indesign/
"Unlocking Innovation: Big Entities -- Your Tech Solutions Partner"
Published: 2023-09-30 22:23:21

**"Empowering the Future: How Big Entities is Revolutionizing Tech Solutions" is the title of the article.**
Businesses need more than just technological solutions to succeed in today's quickly changing digital environment; they also need strategic partners who can help them advance. Big Entities' goal is to serve as that partner for businesses of all sizes and sectors.
Strengthening Digital Capabilities

Our team of specialists, who are passionate about utilizing the newest technology to create innovation, is where our dedication to greatness starts. We have you covered for everything from mobile app solutions that engage clients on the go to web development that produces outstanding user experiences.

Setting the Standard in AI/ML

Industries are changing as a result of artificial intelligence and machine learning. In order to assist you in making data-driven decisions, automating chores, and opening up new opportunities, Big Entities uses the power of AI/ML. Our AI solutions are adapted to your requirements, from natural language processing to predictive analytics.
The Blockchain Revolution: How to Get Around

Supply chain management and secure transactions are just a couple of the business processes that are being altered by blockchain technology. Our expertise in blockchain development enables us to assist you in putting into practice decentralized solutions that improve transparency and trust.

Your Digital Transformation Partner

We're your partner in digital transformation, not just a service provider. Your specific business objectives will be accomplished with specialized solutions thanks to our collaborative approach, which promotes efficiency and growth.

Be a part of our thrilling journey toward innovation and digital excellence. To learn how we can support your success in the digital age, get in touch with Big Entities right away. We'll create the future and open up new possibilities together.
#BigEntities #TechSolutions #Innovation #DigitalTransformation
How to Convert Markdown to HTML File using Python
Tags: python, programming, coding, tutorial
Published: 2023-09-30 22:00:00

## Hi 🙂🖐

In this post, I will share with you How to Convert Markdown to HTML File using Python.

**Introduction**
Markdown is a simple text formatting syntax for creating HTML documents. It is easy to learn and use, and allows you to create well-written and easy-to-read documents.

Python can be used to convert Markdown to HTML. This is useful if you want to automatically generate HTML documents from Markdown, or if you want to convert Markdown to HTML for publishing on a website or in a document sharing platform.

In this guide, we will learn how to convert Markdown to HTML using Python. We will use the Python-Markdown library, which provides functions for converting Markdown to HTML.


Objectives

By the end of this guide, you will be able to:

- Install the Python-Markdown library.
- Create a Python program to convert Markdown to HTML.



## Step 1
Install the Python-Markdown library
`pip install markdown`

For conda users:

`conda install markdown`

## Step 2: 
Create a Python program to convert Markdown to HTML

```python
from markdown import markdown

html = markdown(open('post.md', 'r', errors='ignore').read())

f = open('post.html', 'x')
f.write(html)
f.close()
```

**Summary**

In this guide, we learned how to convert Markdown to HTML using Python. We hope this guide was helpful.

**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Xata SQL over HTTP
Tags: python, xata, postgres, programming
Published: 2023-09-30 21:49:00

Xata is a serverless database that integrates analytics and free-text search. Xata offers a unique architecture which couples a postgres with elasticsearch. This architecture helps Xata offer database along with powerful search as a service. Xata also adds other awesome features like storing file attachments, Ask AI , Vector embedding etc on top of it.  


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


You can create a free database on Xata. Check out [here](https://xata.io/pricing). You can use this for conducting POC's for your project.

---

Lets import a sample CSV file 

Go to "Import CSV File"

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

Select any CSV file from your Desktop. Confirm details and start your import. 

Once your file is successfully imported than you will see something like this 


![Import CSV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu0z9w4f1kkt5tt8hlde.png)

By default Xata will add 4 columns to your table along with the CSV data. 


![default columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6cury1hf410ck5qlhet.png)

**id**: unique identifier
**xata.createdAt** : timestamp of when the record was inserted
**xata.updatedAt** : timestamp of when the record was modified
**xata.version** : The number of changes that were done to that row.

You can go to Playground and run some PostgreSQL queries on the table.  

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

---

You can also write REST API's to query your tables on Xata

Write a REST API using the follwing format 

```
curl --location 'https://{workspace}.{region}.xata.sh/db/{db}:{branch}/sql' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <API_KEY>' \
--data '{
  "statement": "SELECT * FROM \"StudentsPerformance\""
}'
```

Output of Rest API


![Postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06rvvzk8f72vza8t3tyj.png)
Hey! I'm new here
Published: 2023-09-30 21:35:01

Hi everybody. I just joined this site and am learning to use it. I've been learning about the reactjs lately. I learned Spring Boot and after learning reactjs I will connect them. But sometimes I wonder, am I on the wrong track? I started out wanting to be a backend engineer, but I understand that an engineer should choose a problem and not just any fields. So what would you suggest to improve myself?
Markdown
Published: 2023-09-30 20:47:32

Apesar de ser algo relativamente simples, o markdown ainda é um mistério para muitas pessoas, fazendo com que tenham dificuldades em criar um READ ME tanto para projetos quanto para o próprio perfil no GitHub. Estarei criando este tutorial básico para falar algumas das coisas que é possível fazer com o markdown.

**Começando pelos títulos**! Podemos usar tanto # para indicar a importância dos títulos quanto as próprias tags de h1(...). Assim como a tag, quanto mais # você adiciona no seu título, menor vai ser a importância dele.

# Exemplo de título com '#'
## Exemplo de títulos com '##'

Já para os parágrafos a lógica é a mesma, podemos apenas escrever sem nenhuma tag no nosso arquivo READ ME ou para quem preferir, podemos utilizar a tag p.

Ainda falando dos parágrafos, temos alguns símbolos que mudam o estilo da fonte para itálico ou negrito. É possível __ __ para negrito e _ _ para itálico.

`Exemplo de __texto__ em negrito e _texto_ em itálico.`

**E sobre as imagens?** Também temos duas formas de inserir imagens nos nossos arquivos. O primeiro método é utilizar `![]()` e o segundo, de forma óbiva, a tag img. Vamos por partes, dentro das chaves [] Você coloca o título que gostaria de dar para sua imagem e dentro dos parênteses () você cola o endereço da imagem que você deseja, ficando mais ou menos assim: `![imagem de exemplo](link da imagem)`.

Também podemos falar das **listas** e **tabelas**. Para fazer uma lista é simples, só é necessário colocar * em forma de coluna, já para a tabela, precisamos montar sua estrutura de forma manual.

Exemplos:

```
Lista de compras: 
* Morango
* Banana
* Leite
``` 

```Tabelas

Nome   | Idade | Sexo
-------|-------|-----
Melyssa| 19    | F
``` 

Caso você queira mudar a centralização da sua tabela, você deve usar o ! na direção que deseja: `!----` para centralizar para a esquerda `----!` para a direita e `!----!` para o meio.

**E se eu quiser escrever um bloco de código?** Também é possível, utilizando ou apenas uma crase ou crase tripla. 


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

## Qual o sentido de utilizar tags?

Quando utilizamos as tags temos acesso a algumas propriedades que o markdown puro não nos fornece, como por exemplo, quando utilizamos a tag img podemos definir o width e o height da imagem de forma manual com css inline. 


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

Também é possível usar align="center" em divs, tags a e etc. O markdown é cheio de coisas que podemos aproveitar para deixar todo o nosso projeto mais bonito! Espero que tenham gostado e até a próxima <3

### Bônus - Repositórios para utilizar no markdown

https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
https://github.com/antonkomarev/github-profile-views-counter
https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open
AI Tools in 2023
Tags: ai, tooling
Published: 2023-09-30 20:46:24

What do you think about this AI tools? And what types of tools that you use everyday?
[1. ChatBot AI tools
](https://xn--ainexu-1jb.com/en/category/chatbots-en/)
[2. Generate and edit pictures with AI tools
](https://xn--ainexu-1jb.com/en/category/graphic-design-en/)
[3. WRITING AI tools
](https://xn--ainexu-1jb.com/en/category/writing-en/)[4.text to speech AI tools
](https://xn--ainexu-1jb.com/en/category/voice-over-sound/)
5.text to video AI tool
[6. Image to video AI tools
](https://xn--ainexu-1jb.com/en/category/video-creating-editing/)
How to use content AI in wordpress?
Tags: ai, wordpress, contentwriting
Published: 2023-09-30 20:34:48

Whether you’re a seasoned blogger or just starting out, this guide will walk you through the process of integrating [ContentBot](https://xn--ainexu-1jb.com/ai_tools/contentbot-ai-writer/) plugin into your WordPress website, helping you streamline your workflow and captivate your audience like never before.

https://youtu.be/KYzkhxxO4hE?si=ZEosv09ynYjjJ8BX
SUGCON NA 2023 - What I'm Looking At
Tags: sitecore, sugcon, xmcloud
Published: 2023-09-30 20:29:53

It's almost October, but instead of a Sitecore Symposium this year, the event will be a North American SUGCON (I think the first in a number of years). A day and a half in Minneapolis...well a week for me between the MVP Summit, DX, and then SUGCON. So what am I looking at in the agenda? We've got an XM Cloud migration from "legacy" Sitecore on the horizon, so this is a timely event.

# MVP Summit

Nice try, I can't tell you! :)

# SUGCON

After the usual opening morning of keynotes and presentations, we get into the breakouts.

## Unlocking the Power of AI: Migrating to Sitecore Headless / XM Cloud 10 Times Faster

I'm not sure about the whole AI craze yet (hello Skynet?) but the meat of this session will be about migrating from "legacy" Sitecore to the headless/XM Cloud Sitecore. This is a trend that's going to ramp up more as time goes on, I think.

## Crafting lightning-fast composable digital experiences

One of the big draws of the headless/composable architecture, besides the composable, is the performance gains that are touted on the end sites, from load speed to Lighthouse scores.

## Content Hub DAM Maturity Model

Content Hub is another of those areas to be looked at more closely...let's face it, while the media library has been convenient, it's not designed for ultra-rich amounts of content. We have a client that is probably near 200 GB of media content in the media library, but it's only by the grace of Azure blob storage that we aren't going mad. This is the next step up.

## Build for XM Cloud according to the Architect of XM Cloud

Let's face it, if you could learn at the feet of the creator, wouldn't you?

## Implementing Sitecore Search

Without Solr in the mix for the headless front-end, search solutions will become a bigger lift; for example, no Coveo out-of-box components this time if you go that way. Sitecore introduced its own search platform that will likely be looked at very closely. After all, while it's a composable stack, staying "in the family" likely has benefits.

## A University's Journey to the Creation of their Composable Roadmap

I'll be honest, my original intention was to go to "Tips and tricks for Next.js and Sitecore Headless" but I'm co-presenting this session, so I'm occupied! We're going to talk about our roadmap project with Michigan State University and their march to composable. Come on by before dinner!

## Building No Code Integrations with Sitecore Webhooks and GraphQL

Webhooks are the next evolution from the old pipelines we used to write, so I'm curious to learn more.

## No Compromises in XMC: On Demand Revalidation with Experience Edge

This is a session about speeding up getting your content from author to end-user, something that is always handy.