teleren/devto huggingface dataset:
Hotwire + Tailwind: Spinner without Javascript
Tags: hotwire, tailwindcss, tutorial, ux
Published: 2022-05-24 18:53:00

This article will outline how to show a spinner while loading a turbo frame without additional Javascript.

<sub>**_Disclaimer - The setup includes Tailwind configuration which is technically Javascript._**<sub>

---

### Idea and Setup

The setup is pretty straight-forward. It's just a turbo frame with a spinner inside of it.

However, when the frame is being loaded, it looks something like `<turbo-frame id="loadable" busy="" aria-busy="true">` - it has a `[busy]` attribute attached to it.

Turns out, it's possible to leverage that `[busy]` attribute. 💆

---

### Adding Tailwind modifiers 
This is where most of the 🪄🎩 **magic** 🎩🪄 happens. Tailwind allows to set up custom modifiers which is exactly what we need in this case.

```javascript
// tailwind.config.js

let plugin = require("tailwindcss/plugin")
module.exports = {
  // ...
  plugins: [
    plugin(({ addVariant }) => {
      addVariant("busy", "&[busy]")
      addVariant('group-busy', ':merge(.group)[busy] &')
    })
  ]
}
```

Here a `busy` modifier is set up which is bound to the `[busy]` attribute. Also, `group-busy` is added to target the spinner inside of the parent turbo frame.

---

### Finishing touches 
Now we can just ✨sprinkle✨ some classes on some elements.

```html
<turbo-frame id="loadable" class="group">
  <svg
    class="group-busy:inline hidden h-6 w-6 animate-spin"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</turbo-frame>
```

In this instance, the spinner just appears while the turbo frame is being loaded. The frame element now has a `group` class while the spinner now has `group-busy:inline hidden` classes.

Obviously, you can now style it to your liking when using the respective modifiers. For example, `busy:opacity-50` will make the turbo frame transparent while loading.

---

### Wrapping up 
The main goal was to once again shake off some unnecessary Javascript from the codebase. This turned out to be a rather tidy way of doing so while keeping the simplicity of Hotwire and the flexibility of Tailwind.

---

If you have any questions or suggestions, feel free to reach out to me on [Twitter](https://twitter.com/predkelis) or visit my [website](https://predkelis.com)!
Cocinando con React. Componentes
Published: 2022-05-24 18:44:51

Al igual que los moldes nos ayudan a crear pasteles impresionantes en la respotería. Los componentes en React funjen como moldes que nos ayudan a crear aplicaciones web robustas.

Un componente podemos definirlo como una pieza de lego, si bien una pieza de lego por si sola no es de gran utilidad, cuando unimos estas podemos crear lo que tu imaginación te diga. Al igual un componente nos permite crear una parte de nuestro proyecto y reutilizarla después.

Ahora ya sabes que cuando hagas un componentes, pienses en donde más podrias utilizarlo y ahorra tiempo de desarrollo y hacer un código mucho más legible.
vscode recommended extensions
Tags: vscode
Published: 2022-05-24 18:35:01

### ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

### Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

### Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
AWS Storage - Difference between OBJECT STORAGE, BLOCK STORAGE and FILE STORAGE
Published: 2022-05-24 18:15:48

###Definition
These are the storage types provided by AWS services such as

_**S3 - Simple Storage Service for object storage**_
_**EBS - Elastic Block Store for Block storage**_
_**EFS - Elastic File Storage for object storage**_
####OBJECT STORAGE (S3)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzphmae54w57ip0hron7.png)
 - S3 is for object storage. Eg.. Photos, videos, files, and simple web pages.
 - Data storage for unstructured data.
 - Can be accessed from multiple instances.
 - Data is organized hierarchically.
 - More comprehensive metadata labels makes querying easier.
 - Great for Data lakes, archiving files for long-term, and hosting static web sites.
 - Lower cost as compared to EFS and EBS.
 - Highly available, Durable, and Flexible.

**AWS S3 use cases:** 
1) Data lake and big data analytics.
2) Backup and restoration. 
3) Reliable disaster recovery. 
4) Methodical archiving.

####BLOCK STORAGE (EBS)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgaweotsfswal6xl8p4w.png)
 - EC2 block storage. Eg.. computer’s hard drive
 - System storage for Amazon EC2 VM's.
 - Used as per-instance storage (EC2).
 - Data is stored in equally-sized blocks.
 - EBS encryption, High availability and easy backup.

**AWS EBS use cases:** 
1) Testing and development. 
2) NoSQL databases. 
3) Relational databases. 
4) Business consistency. 
5) Enterprise-wide applications.

####FILE STORAGE (EFS)

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

 - Scalable data storage for Amazon EC2 VM's.
 - EFS is a file system for many EC2 instances. Eg.. Multiple EC2 instances and lots of data.
 - Can be mounted by multiple instances.
 - Highly scalable — Can grow or shrink as per demand.
 - Fully elastic — No need to provision new infrastructure.
 - Can cross AWS region boundary using VPC peering.

**EFS use cases:** 
 1)Lift-and-shift application support. 
2) Analytics for big data. 
3) Content management system and web server support. 
4) Application development and testing.
NestJS - overview
Tags: javascript, nestjs, typescript, backend
Published: 2022-05-24 18:08:04

NestJS is a backend framework on NodeJS. it developed by Kamil Mysliwiec.
NestJS defines the architecture of application and has many useful feature. It helps us in developing. We can write our code directly on TypeScript.

Structure of framework: modules, which contain controllers and services.

**Modules.**
Modules are individual parts of an application.  They are like application entities. it is convenient to isolate the logic of individual pieces in a Module. This helps to easily add new features and functionality to the application. They are like a Namespaces.

**Controllers.**
Controllers are needed to create endpoints. They are like callback functions that are called on a specific URL. Methods of controllers called Actions.  Well, in fact controllers dont contain a lot of logic. They usually call methods of models and services. Controllers help to separate application logic by URL.

**Services.**
Services contain all the main business logic of the application. Also, work with the database and third-party APIs.  Services should include data processing an response formation. In other frameworks, they may be called Models.

**Middleware.**
Also, NestJS allows you to work with middleware. This is a special layer through which the request passes before being processed by the controller. Also, there is a middleware that is called after the controller returns a response to the user.

**CLI.**
NestJS has a handy CLI. It speeds up the development of the application and helps to create different files. For example, using the CLI, you can create models, controllers, and services.
Learnings After 400 API Security Testing
Tags: learn, programming, security, api
Published: 2022-05-24 17:59:19

We recently launched EthicalCheck, a free and instant API security testing DAST (Dynamic Application Security Testing) web tool on GitHub. 

Here is the GitHub URL for the tool:
https://apisec-inc.github.io/pentest/

**What kind of vulnerabilities does EthicalCheck find?**
Most automated scanners would find vulnerabilities like SQL Injections, NoSQL Injections, XSS, etc. 
EthicalCheck performs different checks, including OAuth 2.0, JWT, BasicAuth, OWASP API #2, and broken authentication defects in web, mobile, and public-facing APIs.

**How EthicalCheck work?**
It requires two inputs: 
API (OpenAPI Spec/Swagger) documentation URL.
Email address for receiving security testing report

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

We only did a soft launch across a couple of developer forums in the past three months. We weren't hoping that we would get anywhere close to 400 tests.

**Here are the stats:**
Start Date: Feb 2022 - Apr 2022 (3 months)
Total APIs Tested: **400**
Total APIs with Vulnerabilities: **164**
Total APIs with 10+ Vulnerabilities: **16**
Max vulnerabilities found in an API: 65
Total Vulnerabilities Found: **948**
Total Bug Bounty Savings: **$1,896,000** (Based on HackerOne's payout model)
Total API Penetration Test Savings: **$343,000** (Based on avg penetration testing cost)
Percentage of APIs with Vulnerabilities: **47.9%**



**Conclusion:**
On average, close to 50% of the tested public-facing APIs had security vulnerabilities. These vulnerabilities can easily be picked up by automated bots and hackers alike. Security breaches are expensive and can cost exponentially upwards of $8.64m to startups and large organizations alike.

Your public-facing mobile/web API has a close to 50% chance of having security vulnerabilities. You can instantly test your public-facing APIs for vulnerabilities:
https://apisec-inc.github.io/pentest/
SQL-Quick tip #14 - Server information
Tags: tsql, sqlserver, sql, mssql
Published: 2022-05-24 17:51:15

## Sql Server tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### Server information

Some times you need information about the operating system and don't have direct access to the operating system, then you can use the scripts below to get some basic information about the operating system and the Sql Server version and when the server was booted.

```sql
SELECT host_distribution AS [Operating system],
       @@VERSION AS [Sql Server version],
       physical_memory_kb AS [Physical memory in Kb],
       sqlserver_start_time AS [Last boot time],
       cpu_count AS [CPU count]
  FROM sys.dm_os_host_info, sys.dm_os_sys_info
```

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48nzz7mf9iuzl9v1u8tb.png)
My first Post
Published: 2022-05-24 17:44:00

Hey folks, I'm Carlos.

I am a IT Manager in Gestagua and front-end developer, who has a great passion for programming and loves to create things for the web. I enjoy working on new projects and pushing the boundaries of what's possible with code. I am always looking to learn new skills and techniques, so feel free to reach out if you need help with anything.

In my spare time, I enjoy reading about new programming techniques 📖, experimenting with new technologies 👩‍💻.

I'm not an expert and I probably still have a lot to learn, but I have decided to share my experience with the Dev community. In my time as a developer, I've learned that collaboration is key. By sharing what I know and working together, we can all improve our skills and help each other grow. So don't hesitate if you need help!

Thanks for taking the time to read this.
Should I search for a job, and then move? Or move and then search?
Tags: discuss, anonymous, career
Published: 2022-05-24 17:38:52

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***


I'm hoping to move somewhere else in the next year and wondering...

Should I get a job and then move to where it is, or should I move and then search for jobs? 

I really want a fresh start, in a new town with a new job, but I don't know which should come first. I feel like I could argue for both sides, so I'd love some advice from other people.
Week 5 - Disable Button App
Tags: react, hook, usestate, handlingbtn
Published: 2022-05-24 17:35:49

---
title: Week 5 - Disable Button App
published: true
description: creating small UI component to build large scale projects
tags: reactjs, hook, useState, handlingbtn
cover_image: https://i.imgur.com/K5WeSFU.jpg
key: 1
series: React Curve
---

## Welcome to Week 5 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

----------------

## Disable Button App

![Disable Button app](https://i.imgur.com/qc1Ce66.gif)
This week we created a Disable Button app. When the data changes, we handle it and disable the button in react.

To create a DisableButton component; We have to :

* Input data is usually handled by the component. So all the data is stored in the component state.
* Create a state that holds the value of the input with inital value an empty string.
* The value of the input is the value of the state.
* Adding event handlers in the onChange attribute to control input changes and update our state.
* The submit button is disabled if the length of value in the input is empty.
* Now, When the data changes, we handle it and disable the button.

## Code
```react
import React, {useState} from 'react';

const DisableButton = () => {
    const [value, setValue] = useState("");

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <button disabled={value.length < 1}>
                Submit
            </button>
            <p>{value}</p>
        </div>
    );
}

export default DisableButton;

```
### Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!

[Live Preview](https://this-react-curve.vercel.app/disable-submit)
[Source Code](https://github.com/this-mkhy/react-curve)
Why cant I master ReactJS
Tags: programming, beginners, tutorial, webdev
Published: 2022-05-24 17:08:28

# Are you a Jedi React Master?

I can not find a decent tutorial that can go  in depth with the discussion about React JS. And right now with the whole React-Router-Dom V6 update, it makes learning so much worse. 

I know most say get good with Javascript, I hate Javascript frankly. And maybe thats my issue. I strongly dislike front-end work. And messing with CSS for that matter.. If I wanted to be a designer I would have went to school for UI/UX. Why does this shit havbe to be so complicated. Is there anywhere I can just copy and paste some decent CSS code ontop of the functions and states Im trying to get right? 

Now Python!? I fkin love Python. 

I'm so frustrated today. Ive been 24 days in this project I was assigned, with no where but a broken react routes. To top it off, everyone has their 'version' or how they would implement their private routes or protected routes. Ive been messing with this code stuff since 2016. I want to know it already. So I can move on with life and build shit that matters. smdh

How do you feel about React JS?
Day-93 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-24 17:02:06

Date:24/05/2022
Day:Tuesday

Today I started at about 10:30 am as I was in progress to complete the java script cource and the bidding project so, today I started with left over task firstly I started with bidding project so, today I did the minor changes needed for it and after this I started with the left over task and firstly I started wit es6 classes as Object Orientation is a software development paradigm that follows real-world modelling. Object Orientation, considers a program as a collection of objects that communicates with each other via mechanism called methods. ES6 supports these object oriented components too.after this I stated with setters and getters The set syntax binds an object property to a function to be called when there is an attempt to set that property and The get syntax binds an object property to a function that will be called when that property is looked up.after this I started with The static keyword and it  defines a static method or property for a class, or a class static initialization block . this way my day ended up and I got to learn many new things.
A Technical Primer of Auth0’s New Private Cloud Platform
Tags: security, productivity, devops
Published: 2022-05-24 16:41:08

### Delivering on a multi-cloud, Kubernetes based platform with one-click provisioning for customers.

### <br>

**TL;DR:** Auth0 has replatformed our private cloud offering onto Kubernetes. This post details the architecture of the new platform and all the major infrastructure and networking components.

Auth0 is excited to relaunch our [private cloud offering](https://auth0.com/cloud) on our new platform. Recently, Auth0 has invested in retooling the private cloud platform to support more automation, adopt current technologies, and help scale the private cloud to thousands of environments. It’s been an enormous effort across many teams, and we’re excited to share an overview of the system in this post.

This post will serve as a technical primer for the new platform, and subsequent posts in the series will go in depth on specific features from a technical perspective. In future posts, we’ll cover the architecture in more depth, release orchestration, geo-failover, security principles, and the data pipeline of the new system. 

You will hear directly from engineers who built the product and learn how Auth0 was able to deliver on a multi-cloud, Kubernetes-based platform with one-click provisioning for customers.

![Private Cloud Platform](https://images.ctfassets.net/23aumh6u8s0i/BPWJiItmXzRZGWyIYRW0M/fc9778954bb666a793137090089320a3/replatforming-sep2)

But first, a quick refresher on our [private cloud deployments](https://auth0.com/cloud). Auth0 is a software-as-a-service (SaaS) solution that has two deployment models — a public and private cloud. The public cloud is a standard multi-tenant environment where resources are shared between customers and is available in the United States (US), Europe, Australia, and Japan. Private cloud deployments, on the other hand, are single-subscriber environments that provide customers with dedicated infrastructure and can be deployed in nearly any region across Amazon Web Services (AWS) and Microsoft Azure. 

So why choose a private cloud? There are a number of reasons. Private cloud deployments offer cloud and region choice, which can be important for compliance and data residency requirements. Private instances also offer greater performance guarantees above what we can offer for public cloud deployments in terms of throughput on a per-customer basis. Of course, there are the added benefits of having isolated infrastructure solely for your use case. Finally, since private clouds are single subscriber, we can take advantage of private linking back to your Virtual Private Cloud (VPC), which keeps any extensibility-related functionality that originates from Auth0 off the public internet. 

Ok! With that out of the way, we can start to introduce the components of the new platform.


[Read more...](https://auth0.com/blog/a-technical-primer-of-auth0-s-new-private-cloud-platform/?utm_source=content_synd&utm_medium=sc&utm_campaign=security)
Dotfiles for Arch Linux w/ i3wm
Tags: linux, archlinux, dotfiles, i3wm
Published: 2022-05-24 16:35:19

## Hello!
My name is Balázs Szélig. I'm 14 years old and I love coding and ricing Arch Linux. So I'm gonna share my dotfiles with you.

## The story and the previews
I love retro (but modern) things. So I've come up with an idea: My Linux could look like an arcade room. So I've searched for an image for the wallpaper and I found a very good one. Then I was write the scripts for alacritty, rofi, polybar, picom, neovim and i3wm. So this is the result:

<img src="https://github.com/SzeligBalazs/dotfiles/raw/master/previews/first-screenshot.png">

<img src="https://github.com/SzeligBalazs/dotfiles/raw/master/previews/second-screenshot.png">


## The dotfiles
You can access the dotfiles on [this link](https://github.com/SzeligBalazs/dotfiles) or you can clone the files directly with this command:
```bash 
git clone https://github.com/SzeligBalazs/dotfiles.git
```

So how do you satisfied with my dotfiles? Let me know in the comments.
And that was my first post on this site. Thank you for your attention! Bye!
How do you get started in DevRel?
Tags: discuss, codenewbie, devrel
Published: 2022-05-24 16:26:47

---
title: How do you get started in DevRel?
published: true
description: 
tags: discuss, codenewbie, devrel
cover_image:
series: Community Conversations
---

This is a series organized by the Deepgram Devs where we talk about and answer questions about getting started in DevRel, Community, and Tech. 

**How do you get started in DevRel? What have you done to get build your "DevRel resume"?**

Feel free to share your tips or experiences of how you got into DevRel. 

We held our first zoom session on how to get started on Monday, but we'll be holding our [Getting Started in DevRel Twitter Space](https://twitter.com/i/spaces/1DXxyDNMLdkJM) this Friday at 3pm ET with Rizèl Scarlett and David G. Simmons.

![Twitter card with speakers Bekah, Rizel, and David and info for the Twitter Space](https://user-images.githubusercontent.com/34313413/170084336-40856be1-442e-41a4-97ec-b39409ff7902.png)

Looking for more information on DevRel? Check out [my post on the Deepgram approach](https://developers.deepgram.com/blog/2022/04/what-is-devrel-a-deepgram-approach/)!

Want to catch our next small group (Zoom conversation), Getting Started in Community? You can [sign up now](https://lu.ma/community-building).
Build a Python CLI Application
Tags: python, webdev, beginners, tutorial
Published: 2022-05-24 16:18:37

Hey coders! 

This is a fun project to create a menu-driven application in pure Python, to add , display and store books in a books list without using DBMS.

This is a great practice for beginners / pre-intermediate level programmers who want to hone their Python skills.

I believe that in order to jump to Python frameworks, you need to study the core Python concepts first, study them and practice them over and over [ this is actually a message to myself, as I'm in guilty in that myself !!!]. I got carried away with Django, Flask, Bottle, FastAPI, TurboGears and what not while totally forgot that the language I'm writing in these frameworks I'm not totally aware of all its corners ... shame!

{% youtube kTaqR1WyT8A %}

So, I am going to create more videos to simplify concepts in Python, and explaining more advanced principles and rules for you and myself !!

You are welcome to join the channel's membership or simply you can subscribe to my channel to receive the latest videos I create weekly.

Thanks and Peace !

Join Bek Brace Page @bekbraceinc
https://www.facebook.com/bekbraceinc
Join Bek Brace Dev Group
https://www.facebook.com/groups/72655...
Insagram
https://www.instagram.com/bek_brace/
GitHub Rust Sandbox
https://github.com/BekBrace/Rust-Prog...
DEV
https://dev.to/bekbrace