teleren/devto huggingface dataset:
Introducing QRInked - Create and Manage QR Codes
Tags: githubhack23, react, javascript, github
Published: 2023-05-22 16:22:41

## What I built 
I created a web-based application called [QRInked](https://qrinked.dhairyashah.dev/) that allows users to create and manage QR codes.

### Category Submission: 
The best category matches my project is **Wacky Wildcards**

### App Link
Here's link to my submission - https://qrinked.dhairyashah.dev/

### Screenshots 
![QRInked Landing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52yut2kk4lekorkhxgov.png)
{% embed https://www.youtube.com/watch?v=hJTBLW39FKQ %}




### Description 
**QRInked** is a simple and easy-to-use tool that helps you create and manage QR codes. With QRInked, you can create QR codes for any links, images and many more.

QRInked allows you to create following types of QRs for you and your business:
- Website
- WIFI
- Call
- SMS
- YouTube
- Instagram
- Whatsapp
- and many more coming...

Created QR codes can be saved online and can be accessed from any device. All QRs are synced on the cloud.

Currently, QR codes can be downloaded in two formats **JPG and PNG**. 

It is fun to create QR codes here, why not give it a try?

### Link to Source Code 
Source Code link to GitHub - https://github.com/dhairyathedev/qrinked/

### Permissive License 
This project is under [MIT License](https://github.com/dhairyathedev/qrinked/blob/main/LICENSE)

## Background (What made you decide to build this particular app? What inspired you?) 
With the rapid growth of online startups and businesses, an effective approach to capturing users' attention is through the utilization of QR codes. By simply capturing an image of a QR code, users can be directed to the desired destination. This inspired me to conceive an online application that enables the creation and management of QR codes, facilitating businesses in running successful marketing campaigns and attracting users. Hence introducing QRInked, the solution to this challenge.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

QRInked was developed by leveraging Next.js in conjunction with GitHub Codespaces and GitHub Actions.

Here's my tech-stack:
- Next.js
- Supabase
- Tailwind CSS
- GitHub
- Figma
- shadcn/ui

The utilization of GitHub Codespaces enabled me to efficiently and effortlessly create my project by providing a virtual development environment.

Additionally, GitHub Actions played a crucial role in automating various tasks for me.

### Additional Resources/Info
We welcome any suggestions or updates you may have for QRInked. Please feel free to contribute as it is an entirely open-source project.
Stop Infrastructure from drifting away.
Tags: cloudcomputing, infrastructureascode, automation
Published: 2023-05-22 15:59:50

Infrastructure drift, particularly in Infrastructure as Code (IaC) or cloud environments, typically refers to the deviation between a system's actual state and its intended or defined state over time. This can arise due to manual changes, updates, unrecorded actions, or non-integrated changes outside of the IaC system.

Take for example an organization using a tool like Terraform or CloudFormation to define and manage its infrastructure. If an engineer manually alters a security group setting, a database configuration, or other aspects of the infrastructure through the AWS console (or other cloud service provider) without updating the IaC definitions, a drift occurs. 

In other words, the actual infrastructure configuration has "drifted" from the code-defined configuration. Such drift is generally undesirable as it compromises reproducibility and complicates infrastructure troubleshooting and maintenance. This is where Continuous Integration (CI) can minimize risks.

CI is a development practice where developers frequently integrate code into a shared repository, meaning the infrastructure cannot drift far from the repository's definition. But the question remains: how do we keep our IaC updated?

Instead of retroactively monitoring and adjusting, the optimal solution is early intervention. By automating the process of understanding the required infrastructure for our code and pairing it with CI, drift can be drastically minimized.

Automatic infrastructure inference involves a system that can automatically understand the current configuration and state of your infrastructure directly from your application code. When paired with CI, it significantly reduces or even eliminates infrastructure drift. 

I've previously described how this works with the Nitric framework in one of my [past posts](https://dev.to/rsiv/you-can-infer-a-lot-from-code-8h6).

When drift does occur, so does toil - on both your ops and your devs to dive into specific app and infra code to determine where the issues are - this isn't great because it often requires your best troubleshooters to burn time.

In a well-designed CI/CD pipeline, every infrastructure change should be code-defined, committed to a version control system, and applied via the pipeline. Therefore, the desired state of the infrastructure is always represented by the latest version of the code in the repository.
Copy Elements from any website as Tailwind CSS components
Tags: tailwindcss, webdev, css, design
Published: 2023-05-22 15:47:52

Would you like to convert any website on the internet into Tailwind CSS?


{% embed https://www.youtube.com/embed/QxPAsDSOIrI %}


I created a tool ([DivMagic](https://divmagic.com)) which lets you copy any element from any website as a Tailwind CSS component.

It includes support for most of Tailwind's common features. It will convert elements directly into Tailwind CSS (including colors!)


![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd1fzzd3frmqqxdn84wq.gif)

Check it out at divmagic.com and let me know what you think!
Accessibility labels for content loading in React
Tags: react, web, a11y
Published: 2023-05-22 15:39:51

---
title: Accessibility labels for content loading in React
published: true
description: 
tags: react, web, a11y
//cover_image: https://direct_url_to_image.jpg
---

I've really been enjoying learning about how to make applications and websites more accessible and recently wondered about how to appropriately label a loader for a side project React app I'm writing. After scouring [Stackoverflow answers](https://stackoverflow.com/questions/38704467/how-to-label-a-loading-animation-for-wai-aria), and looking at what [Bootstrap's solution](https://getbootstrap.com/docs/4.5/components/spinners/) is, I came across [an article by some company called Dockyard](https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements). They all conflict in different ways. Finally, I followed an SO link to [Fundamental UI](http://sap.github.io/techne/loading-spinner.html). And came up with this idea:

```js
const Loader = () => <div aria-label="Loading">loading...</div>;

const LoadContent = ({ isLoading, children }) => {
  return (
    <div aria-busy={isLoading} aria-live="polite">
      {isLoading && <Loader />}
      {!isLoading && children}
    </div>
  );
};
```

Here's what it does (as I understand it):

- **[aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy)** lets us indicate that the container is in the process of updating.
- **[aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live)** lets us indicate that the element is going to updated. The `polite` property indicates a background change (this might be a good place to add a prop to indicate if the content is main content, or background content)
- **[aria-label](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-label)** lets us indicate the label for the element.

I made a [Sandbox](https://codesandbox.io/s/loader-hwwlj?file=/src/App.js) where you can check this out in action.

I'm still getting started with accessibility so I welcome _any_ input on this.
Writing Simple RestAPI in Nim With HappyX #1
Tags: happyx, tutorial, beginners, nim
Published: 2023-05-22 15:37:24

In this tutorial series we create RestAPI in Nim using HappyX web framework ✌

## Getting Started 🔨

At first we need to install [Nim lang](https://nim-lang.org/install.html)

After this via [`nimble`](https://nimble.directory/) we install [`HappyX`](https://github.com/HapticX/happyx) 🔌
```bash
nimble install happyx@#head
```

I will edit my code with VS Code ✌

### Project Creation 🛠

Just run this command
```nim
hpx create --name:tutorial --kind:SSG
cd tutorial/src
```

### Hello, world! ✌
Let's open `tutorial/src/main.nim`
You'll see this (without comments)
```nim
import
  # This will import HappyX framework
  happyx


# Setting up our server at `127.0.0.1:5000`
serve("127.0.0.1", 5000):

  # on GET HTTP method at 127.0.0.1:5000/
  get "/":
    # We'll see "Hello, world!"
    "Hello, world!"
```

Let's rename route
```nim
  # on GET HTTP method at 127.0.0.1:5000/hello-world
  get "/hello-world":
```

Now let's try it 🎈
```bash
nim c -r -d:debug main
```

Open browser and go to `http://localhost:5000/hello-world` 🥳

[Source code](https://github.com/HapticX/happyx-tutorial-series/tree/5aa6293ed0aec47313d725c45b7710e44d78fada/simple_rest_api)
One Minute: Nomad
Tags: nomad, hashicorp, kubernetes, oneminute
Published: 2023-05-22 15:26:35

_<abbr title="Orchestration made easy">Nomad</abbr>_ is a simple distributed scheduler, orchestration and monitoring tool in a single binary.

**Modes:** Server, Client, Dev Agent (like minikube)
**Platforms:** x86, x86-64, ARM, ARM64
**Systems:** Linux, MacOS, Windows
**Drivers:** Docker, Podman, Java, Exec, QEMU 
**License:** [Business Source License](https://www.hashicorp.com/bsl)
**Written In:** [Go](https://go.dev)

**Website:** https://nomadproject.io
**Manual:** https://developer.hashicorp.com/nomad/docs
**Cheat Sheet:** https://hashicorp.github.io/nomad-cheatsheet/
**Useful Aliases:** https://gitlab.com/internetarchive/nomad/-/blob/master/aliases
**VScode Extension:** https://marketplace.visualstudio.com/items?itemName=HashiCorp.HCL
**Repository:** https://github.com/hashicorp/nomad
**OpenHub:** https://www.openhub.net/p/hashicorp_nomad
How to create Azure Virtual Machine within 60 seconds
Tags: cloud, azure, devops, cloudcomputing
Published: 2023-05-22 15:22:20

In this guide we will be using Azure Quickstart Gallery to deploy a template that creates a Virtual Machine

**Step 1:**
Visit [portal.azure.com](url), login or sign up if you don't have an account, you can get a free account at [azure.microsoft.com/en-us/free/](url)

**Step 2:**
On the Azure portal page **click the search box and enter deploy a custom template**, then **click deploy a custom template**

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

**Step 3:**
**Click create a linux virtual machine**

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

**Step 4:**
_Resource Group_
Create a new resource group by **clicking create new** option shown below the input bar, you can use any name of your choice

_Region_
**Select a region** where the Virtual Machine will be located, in this example i will be using East US

_VM Name_
Enter a VM name of your choice

_Admin Username_
**Enter a username** of your choice in this example i will be using Azureuser

_Authentication type_
**Tick Password**

_Admin Password or Key_
**Set a password** of your choice, in this example i will be using Password123*

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

**Step 5:**
As you can see the rest of the settings has been populated for us, this is the benefit of using a custom template to create VM, **Click Review + Create**

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

**Step 6:**
**Click Create button** when validation has been passed to begin creating your new Virtual Machine using Azure Quickstart Custom template

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

**Step 7:**
When deployment is completed, **Click Go to resource**

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

**Step 8:**
**Click on the virtual machine**

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

**Step 9:**
Viola!!! your Virtual Machine created with Azure Quickstart Custom Template is running

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9gx019myme3m80cl9q7.png)
What can Corcel bring to WordPress?
Tags: php, wordpress, laravel, programming
Published: 2023-05-22 15:04:16

I'm not a fan of "big crossovers" in Tech. It often turns bad, especially with WordPress, as people like to hack it in the worst possible ways.

However, Corcel might have some lessons to teach, as it did not try to break/control the beast (a.k.a. WordPress) but provided a nice object-oriented PHP interface to interact with the WordPress database instead.

## Download the code

It's [here](https://github.com/corcel/corcel), but you may prefer Composer, the package manager for PHP:

```
composer require jgrossi/corcel
```

## Headless WordPress with PHP?

I see many pros for such approach. Here are some majors points:

* the authors took the time to understand WordPress and its ecosystem**s** (e.g., advanced compatibility with WordPress menus, taxonomies, or  major plugins like ACF)
* provides a universal Model layer for any other PHP app that want to interact with the WordPress backend (not just Laravel)
* very convenient syntax: `Post::status('publish')->get();`

## The big caveat

The project does not seem to be particularly active, as the last release was in February 2022 (at the time of writing).

There might be some issues, especially with the latest versions of Laravel. Although, it's still a nice alternative to consider for a custom PHP project, IMHO.

## Wrap up

WordPress has its strengths and still powers most websites.

People (and organizations) love it as a backend platform, but it does not mean you have to stick with its templating system.

JavaScript devs can already interact with the built-in JSON API to build fancy experiences, but PHP interfaces like Corcel remain quite misknown, regardless of their success (Corcel is very popular on GitHub).
JSON.stringify vs JSON.parse in JavaScript (with thumb rule)
Tags: webdev, javascript, json, beginners
Published: 2023-05-22 15:04:11

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy to read and write. It's commonly used to send data from a server to a web page and vice versa.

Two important methods for working with JSON in JavaScript are JSON.stringify() and JSON.parse(). In this article, we'll discuss the differences between these two methods and when to use each one in frontend and backend development.

## JSON.stringify()
The JSON.stringify() method takes a JavaScript object and converts it into a JSON string. This method is useful when sending data to a web server, as the data must be in string format when sent. The output data cannot be accessed as a JavaScript object.
Here's an example of JSON.stringify():


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

## JSON.parse()
The JSON.parse() method takes a JSON string and transforms it into a JavaScript object. This method is particularly useful when receiving data from a web server in string format, as it allows you to access the data as a JavaScript object
Here's an example of JSON.parse():

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

## Usage
Both JSON.parse() and JSON.stringify() can be used in frontend and backend JavaScript development. In frontend development, you might use JSON.parse() when receiving data from an API and JSON.stringify() when sending data to an API. 

In backend development, such as with Node.js, you could use JSON.parse() to convert incoming JSON strings into JavaScript objects and JSON.stringify() to convert JavaScript objects into JSON strings for API responses.

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



## Thumb Rule: 
Here's a simple rule of thumb to help you decide when to use JSON.parse() and JSON.stringify():

- Use JSON.parse() when you have a JSON string and need to convert it into a JavaScript object for easier manipulation.

- Use JSON.stringify() when you have a JavaScript object and need to convert it into a JSON string for sending to a server or API.

By following this rule, you can effectively work with JSON data in both frontend and backend JavaScript development.
Surviving the Unthinkable ft. Blockchain
Tags: blockchain, bitcoin
Published: 2023-05-22 15:02:49

> Human nature doesn’t change. That struggle existed a hundred thousand years ago. That struggle exists today. What does change is technology. A hundred thousand years ago, an enraged human being could maybe kill 10 other people. And today, an enraged human being can kill a hundred million people. So as technology advances, our thoughts about ethics and morality and technology and civility have to evolve.

> Micheal Saylor

Experts in every field have spent a lot of time thinking about the potential implications of global catastrophes like nuclear war. It’s not a pleasant topic, but it’s a necessary one. The fact is, the risk of nuclear war is always present, and we need to consider how we can best prepare ourselves and our communities for the aftermath.

In recent years, we’ve seen the power of blockchain to provide secure and decentralized storage of information. But what if we could take this one step further? What if we could use blockchain as a tool for survival in the face of a nuclear war? This blog will explore the potential applications of blockchain technology in a post-apocalyptic world and how it could help us rebuild and thrive. It’s time to start thinking about the unthinkable and considering the role of blockchain in our future survival.

In a blockchain network, data is stored on a decentralized network of nodes rather than on a centralized server. Each node in the network stores a copy of the blockchain, which is a ledger of all transactions that have taken place on the network. This means that if one node goes down, the data on the network is still accessible from other nodes.


![Nodes around the world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qahmjij96oiwt97taruz.png)

For example, storing identity information, financial records, and medical records on the blockchain network would be like having a plant that has spread its seeds globally. As long as a single seed (a node) is still around, the information and assets can be completely regrown. Smart contracts can be used to enforce strict access controls and permissions, ensuring that only authorized parties can view or modify the information stored on the blockchain.

In addition to providing secure storage of information, blockchain technology could also serve as a tool for trade and commerce in a post-apocalyptic world. After the nuclear blast (if you survive), are you going to wait for the government to reboot the banking system? Will you trust them to honour your previous account balances (lol)? After a global calamity, anyone with blockchain-based cryptocurrency will be transacting with each other far before legacy financial systems are rebooted.

Humanity will do everything that it can to rebuild the internet after a global calamity. When the electricity comes back on and some form of global communication resumes — Blockchain network will return.

But what if a global nuclear war completely wipes out humanity? Well then,

> That's a galactic shame.
Where Can You Actually Spend Bitcoin?
Tags: blockchain, decentralisation, bitcoin
Published: 2023-05-22 15:00:02

> Bitcoin Is a Union - Micheal Saylor

Bitcoin has been a popular term in the cryptocurrency world for a while now. Since its launch in 2009, Bitcoin has come a long way, going from being a little-known currency used by only a few people to one that is now in the spotlight. Nevertheless, a persistent query is whether it is possible to make purchases using Bitcoin. Not only is this query true, but it is also a common jibe directed at Bitcoin fans. This article will examine the various locations and methods for obtaining goods and services where Bitcoin is accepted.

First and foremost, it is essential to acknowledge that Bitcoin is still relatively new. Therefore, it’s not as widely accepted as traditional currencies. However, that is not to say that buying anything with Bitcoin is impossible. In El Salvador, Bitcoin is now legal tender, and people can use it to buy anything from Starbucks coffee to street vendor fruit. The same goes for Bitcoin Island in the Philippines, where over 100 businesses accept Bitcoin. These are just a few examples of countries where Bitcoin is already being used to buy goods and services.

One open-source project that stands out is the BTC map. It is a global map of in-person locations where you can buy goods and services using Bitcoin. This map, which uses the open-source project OpenStreetMap, is not dependent on Google Maps. It’s a great tool for finding places where you can spend Bitcoin. The map has thousands of locations listed worldwide, with the majority being in-person locations.

![BTC Map India](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34pygzsxaj6s8zo17vng.png)

For instance, In India reveals a variety of businesses that accept Bitcoin, including cryptocurrency exchanges and local establishments such as restaurants, resorts and clinics.

It’s worth noting that while Bitcoin’s use as a currency is growing, it’s still not as widely accepted as traditional currencies. Therefore, you need to do your due diligence before transacting with Bitcoin. This includes researching the exchange rate, transaction fees, and the merchant’s reputation before making any payments.

The question of whether you can buy anything with Bitcoin is a legitimate one. However, Bitcoin is slowly gaining acceptance as a legitimate currency, and more and more businesses are starting to accept it. As demonstrated by BTC map, there are already thousands of locations worldwide where you can buy goods and services using Bitcoin. While it’s still relatively new, Bitcoin’s future looks bright, and it’s only a matter of time before more businesses start to accept it. If you’re a Bitcoin enthusiast, you can already start using it to buy goods and services at the locations listed on the BTC map.