teleren/devto huggingface dataset:
Freedom for HTML input elements using HTMx
Tags: django
Published: 2022-09-23 14:45:06

---
title: Freedom for HTML input elements using HTMx
published: true
date: 2022-09-23 14:42:28 UTC
tags: Django
canonical_url: https://www.rockandnull.com/freedom-for-html-input-elements-using-htmx/
---

 ![Freedom for HTML input elements using HTMx](https://images.unsplash.com/photo-1471922694854-ff1b63b20054?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIxfHxmcmVlfGVufDB8fHx8MTY2Mzk0NDA0NA&ixlib=rb-1.2.1&q=80&w=2000)

Coming from the world of the more "traditional" Django development, I was used to communicating with the backend using HTML forms.

Whenever I needed to include something in my GET or POST request, be it data entered into a text box or hidden inputs containing values, I would wrap them into a `<form>` element. And for the most part, this technique works.

But there are cases where this might be problematic or at least annoying. Problematic might be in case the HTML structure is forcing you to have the `<input>` elements wrapped in a `<form>` element and this makes impossible some positioning or styling configuration. Annoying might be just the fact that you are forced to have deep layers of hierarchy just to fulfill this "limitation" of HTML.

But fear not. [HTMx](https://dev.to/rockandnull/primer-to-django-and-htmx-3cm4) is here to save the day. Using this JS library can simplify your Django front-end work significantly, and this is just one use case. What you can do is essentially to specify which `<input>` elements to include in a GET or POST request, no matter where they are placed in the DOM.

This gives complete freedom to structure your page and place those `<input>` elements exactly where you want them to be based on your mocks or designs.

```
<div class="column">
    <input class="input" name="item_quantity" type="number" />
</div>

<div class="column">
    <a hx-boost="true"
       hx-include="[name='item_quantity']"
       href="{% url 'submit_view' %}">
    Submit
    </a>
</div>
```

This simple snippet showcases an example of this. The `<input>` element is not wrapped in a `<form>`. Nevertheless, its value is included in the request made to the backend.

- [hx-boost](https://htmx.org/attributes/hx-boost/): This "converts" this link to an HTMx-powered request. It will not cause a full page to reload, rather the result of the GET request will replace the body of the website.
- [hx-include](https://htmx.org/attributes/hx-include/): This is how you include the `<input>` elements in the GET request. In the backend, you can access the value of that input using `request.GET.get('item_quantity', 1)`

Hopefully, you learned yet another way of passing data to your Django backend without using HTML forms, but by using [HTMx](https://htmx.org/).

Happy coding!
TIL : Java Data Type
Published: 2022-09-23 14:34:51

As a Java beginner, data type threw me off the window. 
Now I realize how JavaScript was generous (or didn't really care what I was doing) when it comes to my "loose" programming skills.


Java has 7 primitive data types: 

` Byte , Short, Int, Long, Float, Double `
(from most narrow to most wide)

> Converting one primitive datatype into another is known as type casting (type conversion) in Java. You can cast the primitive datatypes in two ways namely, Widening and Narrowing.

Widening is when converting a lower datatype to a higher datatype. 
Casting/conversion is done automatically, AKA "implicit type casting".
Datatypes have to be compatible.

**When does the automatic type conversion happens?**

either:

- the data types are compatible
- destination type is bigger than the source type

**Example**

```js
public class WideningExample {
   public static void main(String args[]){
      char ch = 'C';
      int i = ch;
      System.out.println(i);
   }
}
```

**Output**

> Integer value of the given character: 67


Narrowing is the opposite of widening and in this case, type casting and conversion is not done automatically. It needs to  be done by using cast operator "(datatype)". AKA "explicit type casting"
Datatypes can be incompatible.

**Example**

```js
import java.util.Scanner;
public class NarrowingExample {
   public static void main(String args[]){
      Scanner sc = new Scanner(System.in);
      System.out.println("Enter an integer value: ");
      int i = sc.nextInt();
      char ch = (char) i;
      System.out.println("Character value of the given integer: "+ch);
   }
}
```


**Output**

Enter an integer value:
67
Character value of the given integer: C

As you can see, in the case of narrowing, `int i` got casted into `(char)`. 




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


**Rules**

1. If byte, short, int are used in math => result comes out in int.
2. Single Long will turn the expression in Long.
3. Float operand in expression will convert the whole expression in float.
4. any operand is double, the result is double.
5. Boolean cannot be converted to another type.
6. Java does not allow conversion from double to int.
7. conversion from long to int is also not possible.




Still really confused about the data casting, but now I am more sure about what I can do with my data and what I can't do.
Day 3-4: Published first npm package
Tags: 100daysofcode, devjournal
Published: 2022-09-23 14:34:20

Here is the package :D

{% embed https://www.npmjs.com/package/@passwordless-id/webauthn %}

It's not yet completely functional. There are still some issues to fix.

Although it looks trivial ("What, it's just a package?"), it was still time consuming to do.

- Documenting a bit the code
- I created an organization "passwordless-id" on both github and npm for future use
- Fixing details in the package.json
- Setting a github action to automatically build it
- Writing the README
- ...

Currently, I still have issues to publish it automatically, ideally upon bumping the version or making a github release.

It's not yet functional yet, they are things on the TODO list:

- get the github action pipeline working properly
- get a proper CDN link to import directly as script
- add a couple of tests? (difficult to do I guess since it's based on user interaction with the device)
- improving README / doc / code
I've created navbar based on Dynamic Island on iPhone 14 (iOS 16)
Tags: codepen, javascript, dynamicisland, ios16
Published: 2022-09-23 14:19:49

I've create navbar based on Dynamic Island on iPhone 14 (iOS 16) using HTML, CSS, and JavaScript. Check it out!

{% codepen https://codepen.io/daimessdn/pen/BaxwZWa %}
How to use promise in nodejs
Published: 2022-09-23 14:08:16

---
title: How to use promise in nodejs
published: true
description: How to use promise in node js if there is delay in on large db access or data access
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

### Where we need promise
When the time of using javascipt code if there is delay in output for example if you are developing student management system with role number you need to access particular fees details but accessing roll number is time taking process in the case need to use promise

### Promise definition 
```javascript
const delay = new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 90000);
});
```
### Promise calling function

```javascript
delay.then(()=> {
    console.log("Done Waiting");
})
```

### Promise in loop
```javascript 
const delays = [122, 100, 2000, 600];

const delay = (millisec) => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(millisec);
            resolve(millisec)
        }, millisec);
    })
}

Promise.all(
    delays.map(d => delay(d))
).then(() => { console.log("-----------") })

```

Ref : https://medium.com/developer-rants/running-promises-in-a-loop-sequentially-one-by-one-bd803181b283
https://stackoverflow.com/questions/65167410/wait-for-array-map-iterations-in-promise-all
User Meta Pro - Quick Startup Guide
Tags: programming, wordpress, plugin, tutorial
Published: 2022-09-23 13:38:03

WordPress Plugin, [User Meta Pro](http://user-meta.com) is easy to use and features include front-end profile update, user registration with extra fields, email notifications, and many more. There are a number of features of User Meta Pro that makes it one of the most useful user profiles and user management plugin on the market. 

User Meta is intended to be your only go to for user management. We believe in synergy and have solutions to all of your problems in one single piece of software.

https://www.youtube.com/watch?v=Qyt9mDG-nxM
How does Enterprise Applications Integration Improve Business Performance?
Tags: tutorial
Published: 2022-09-23 13:37:19

Enterprise application integration has become an exceptionally significant concern in this hyper-competitive world. The comprehensive approaches and ideologies around this idea prove that enterprise application integration is extremely important.

Nowadays, Enterprises are driving at a constant pace, with technology having a fundamental impact. Be it any modern-day technologies – Big data, IoT, or Cloud Computing. Customers can easily get control of their corresponding data from anywhere and anytime.

Many applications are required to manage things when someone starts a new business, such as CRM, SCM, Workforce Management, EAM, ERP, etc., and more.

But, when a small business becomes an enterprise, it isn’t easy to manage all these applications smoothly as they are not interlinked. Because of this, many problems occur in the business, like data duplication, data security, and transparency between different departments. Keeping all departments in sync and streamlined at an enterprise level is important.

Continue reading on the [Benefits of Enterprise Applications Integration](https://www.anblicks.com/blog/enterprise-apps-integration-for-business-performance-improvement/).
What's the difference between Windows 365 and Azure Virtual Desktop?
Published: 2022-09-23 13:06:07

The two cloud versions of Windows cause the most confusion. To make things even more confusing, there are two versions of each. Learn more about comparing [Windows 365 and Azure Virtual Desktop](https://www.apps4rent.com/windows-365-cloud-pc-vs-azure-virtual-desktop.html). Windows 365 is available in Business and Enterprise versions, and Azure Virtual Desktop (AVD) is available for personal and pooled deployments. Both are based on the Azure Virtual Desktop control plane, but the similarities quickly break down.

**Operating systems available for Windows 365 and AVD**
Windows 365 can be deployed with Windows 10 or Windows 11 (at boot). Azure Virtual Desktop, on the other hand, supports Windows 10 Enterprise multi-session, Windows 10 Enterprise, Windows 7 Enterprise, Windows Server 2019, Windows Server 2016, and Windows Server 2012 R2.
**Microsoft Desktop as a Service (DaaS) subscription model.**
All virtual desktop solutions require an Azure subscription, but your Windows 365 subscription lives entirely within Microsoft's Azure subscription and is fully managed by Microsoft at a fixed price. Azure Virtual Desktop, on the other hand, is fully managed by the customer and offers flexible usage-based pricing.
**Compute**
Azure Compute for Windows 365 is 100% managed by Microsoft, has a fixed cost, and has no direct administrative access to the underlying virtual machines (VMs). With AVDs, compute usage is controlled by the customer with consumption-based costs and additional flexibility when configuring VMs. If you want a monster video rendering engine with multiple 3090 GPUs and TB RAM, AVD is for you.

Apps4Rent is a cloud-first Microsoft partner with competencies such as Windows and devices, as well as cloud platforms. If you're looking to empower your workforce with Desktop as a Service, leverage Windows 365 and Azure Virtual Desktop to reduce risk, support costs, and downtime while increasing productivity and mobility.
tsParticles 2.3.2 Released
Tags: javascript, webdev, typescript, showdev
Published: 2022-09-23 12:14:27

## tsParticles 2.3.2 Changelog

### Bug Fixes

- Fixed export configuration method of container class

### New Features

- Created an official WordPress Gutenberg block plugin, available here: https://wordpress.org/plugins/tsparticles-block/

--

## Social links

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

---

{% github matteobruni/tsparticles %}
Hiring professionals for the tech area?
Tags: career, webdev, hiring, programming
Published: 2022-09-23 12:08:04

Facing challenges to hire Tech professionals? Get access to a list of qualified talent for the positions of:

CTOs - Team Leaders - DevOps - Programmers - QAs - Networking - Clouds - Support - Project Management - UX/UI FrontEnds - BackEnds - PM.

It's more speed and quality for your hiring. our specialty is professionals who work with: Android, Back-end, C#, C/C++, Front-end, Full-stack, Go, HTML/CSS, iOS, Java, Javascript, Mobile, Node.js, PHP, Python , Ruby, Scala and Swift.

Interested? Contact us: https://forms.gle/pps64q4xdCXXqM7o6


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv0nxvuvgymy2q4fn4kp.png)
DAY 3 CODE CHALLENGE (PALINDROME INTEGER)
Tags: javascript, programming, leetcode, challenge
Published: 2022-09-23 11:54:14

## **PALINDROME INTEGER**

In our challenge today, we were asked to identify if a given integer is Palindrome or not. To solve any challenge, one most be willing to understand the question before execution. Let's move to the question of the day.

**QUESTION AND EXPLANATION**
Given an integer x, return true if x is palindrome integer.

One might wonder what a palindrome integer is but wonder not.
An integer is said to be palindrome when it reads the same both forward and backward. For example, 242 is palindrome while 148 is not. Let us also look at the following examples below:

**Example 1**
input: x = 242
output: true
Here output is true because from right to left also reads 242.

**Example 2**
input: x = -242
output: false
Reason: From left to right reads -242 while from right to left reads 242-, making it non palindrome.

**Example 3**
input: x = 10
output: false
This is because from right to left reads 01, which implies it not palindrome.

**PROCEDURE**

-Set backward to input x, convert to string, split and reverse it, then join as illustrated below.

`let backward = x.toString().split('').reverse().join('')` 

- Compare the backward string to input x and return as shown below.

`return(x.string() === backward)`

**RESULT OUTPUT**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g09l5r4yxsb6glbcwv5.PNG)
Golang: Serverless deployment using AWS Cloudformation
Tags: go, aws, programming, serverless
Published: 2022-09-23 11:43:45


Do you know how to speed up your [serverless](https://blog.canopas.com/serverless-microservices-aws-lambda-and-api-gateway-d23f9346f0b6) application deployment using [AWS](https://blog.canopas.com/send-mails-using-ruby-on-rails-action-mailer-and-aws-sdk-ses-gem-without-using-smtp-67fac83e0455) Cloudformation?

This post will teach you how to deploy your app to AWS lambda and [API Gateway](https://blog.canopas.com/golang-serverless-microservices-with-gin-f3c2a4943a6d) using AWS Cloudformation.

Serverless architectures are easy to use. But did you ever think you can deploy them quickly too? AWS Cloudformation takes the lead for it.

**Prerequisites**

1. IAM user — to perform AWS CLI operations on our behalf.
2. S3 bucket — to upload a zip of our code.

Table of contents

- IAM user permissions
- Introduction to AWS Lambda and API Gateway
- Introduction to Cloudformation
- Configure AWS CLI with IAM user
- Create Cloudformation stack using AWS CLI
- Get familiar with the Clouformation template
- Create AWS Lambda Execution Role using Cloudformation
- Create AWS Lambda function using Cloudformation
- Create API Gateway Rest API using Cloudformation
- Create API Gateway method, resource, and proxy using Cloudformation
- Create a Lambda permission to allow API Gateway to invoke the Lambda function using Cloudformation
- Configure a custom domain to access API Gateways using Cloudformation

Cloudformation works a way better to automate any AWS service deployments like EC2, IAM, and many more.

If you want to refer to the full code, it’s available at serverless deployment using Cloudformation with GitLab CI integration.

To learn more, read the post on [canopas blog](https://blog.canopas.com/golang-serverless-deployment-using-aws-cloudformation-4dee745cbf28).
JvmStatic Annotation in Kotlin
Tags: kotlin, android
Published: 2022-09-23 11:40:31

---
title: JvmStatic Annotation in Kotlin
published: true
description: In this blog, we are going to learn about the JvmStatic annotation in Kotlin.
tags: kotlin, android
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgubozfayw199mgnyzxx.png
canonical_url: https://amitshekhar.me/blog/jvmstatic-annotation-in-kotlin
---

I am [**Amit Shekhar**](https://amitshekhar.me), a mentor helping developers in getting high-paying tech jobs.

In this blog, we are going to learn about the `JvmStatic` annotation in Kotlin.

**This article was originally published at [amitshekhar.me](https://amitshekhar.me/blog/jvmstatic-annotation-in-kotlin).**

The best thing about Kotlin is that it is designed with Java interoperability in mind. It means that the existing Java code can be called from Kotlin, and also the Kotlin code can be called from Java. Both ways are supported.

Today, we will focus on calling the Kotlin code from Java as we want to learn about the `JvmStatic` annotation.

The best way to learn this is by taking an example.

Assume that we have a named object `AppUtils` in Kotlin as below:

```kotlin
object AppUtils {

    fun install() {

    }

}
```

We can call the `install()` method in Kotlin as below:

```kotlin
AppUtils.install()
```

But, when we call `install()` method from Java as below:

```java
AppUtils.install(); // compilation error
```

We get the compilation error.

We will have to call it as below:

```java
AppUtils.INSTANCE.install(); // works
```

This works as expected.

So, the question is: Can we make it work without using that `INSTANCE`?

The answer is yes. By using the `JvmStatic` annotation, we can make it work without using that `INSTANCE`.

For that, we need to update our named object `AppUtils` in Kotlin as below:

```kotlin
object AppUtils {

    @JvmStatic
    fun install() {

    }

}
```

Here, we have added `@JvmStatic` annotation on the method.

Now, we can call `install()` method from Java as below:

```java
AppUtils.install();
```

And, it works perfectly.

This is how we can use the `JvmStatic` annotation in Kotlin.

That's it for now.

Thanks

[**Amit Shekhar**](https://amitshekhar.me)

You can connect with me on:

- [Twitter](https://twitter.com/amitiitbhu)
- [LinkedIn](https://www.linkedin.com/in/amit-shekhar-iitbhu)
- [GitHub](https://github.com/amitshekhariitbhu)
- [Facebook](https://www.facebook.com/amit.shekhar.iitbhu)
process.env as feature flags
Tags: dx, automation
Published: 2022-09-23 11:33:01

At [Woovi](https://woovi.com/) we are always looking to optimize our processes. We want to improve the DX to increase  the productivity of every software engineer. We want to make everything faster, consuming fewer memory and also providing the best usability.

Experimentation leads to innovation. However, experimentation can also break what is stable. To avoid breaking any core process of our software engineer team, we release new DX improvement behind feature flags that can be turned on using process.env.

Below is an example of our Jest config that enable the developer to decide which jest transformer to use. Esbuild and SWC are faster transformer than babel-jest, although it breaks a few of our tests.

```tsx
const jestTransformer = () => {
  if (
    !process.env?.JEST_TRANSFORMER ||
    process.env.JEST_TRANSFORMER === 'babel-jest'
  ) {
    return {
      '^.+\\.(js|ts|tsx)?$': 'babel-jest',
    };
  }

  if (process.env.JEST_TRANSFORMER === 'esbuild-jest') {
    return {
      '^.+\\.(js|ts|tsx)?$': 'esbuild-jest',
    };
  }

  if (process.env.JEST_TRANSFORMER === 'swc-jest') {
    return {
      '^.+\\.(js|ts|tsx)?$': [
        '@swc/jest',
        {
          sourceMaps: true,
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true,
            },
          },
        },
      ],
    };
  }
};
```

What experimentation and DX improvement are you doing in your codebase?

------------------------------------------------------------
If you care about DX and wanna work with us, we are [hiring!](https://gist.github.com/sibelius/fe9bb57a2a00672459fa616523507f73)
Need help in unit testing !
Tags: jest
Published: 2022-09-23 10:55:08


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ncu1guga7q1zxkaesio.PNG)

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

why getting this error in testing?
React, Docker, Runtime Environment Variables
Tags: react, docker, env, runtime
Published: 2022-09-23 10:51:14

##The Problem
Containerized react apps are most commonly using static serving `nginx`, hence, there is no way to directly pass environment variables to javascript at runtime.

##Hack
Add `<script>` block to `index.html` that will be modified runtime, and loaded with environment variables.

So our `index.html` should look something like this

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ReactApp</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script>
      window.env = {};
      /*ENV_BEGIN*/`
      `/*ENV_END*/
        .split('\n')
        .map((kv) => kv.split('='))
        .forEach(([key, value]) => {
          window.env[key] = value;
        });
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```
this will load provided variables into `window.env`.

And here is an example `Dockerfile` that will provide environment variables prefixed with `REACT_APP_`
```dockerfile
FROM nginx:alpine

WORKDIR /usr/share/nginx/html

COPY ./dist/apps/react-app .

RUN printf "server {\n\
        listen       80;\n\
        location / {\n\
                root   /usr/share/nginx/html;\n\
                try_files \$uri \$uri/ /index.html;\n\
                add_header Cache-Control \"no-store, no-cache, must-revalidate\";\n\
        }\n\
}\n" > /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD sed  -i '/\/\*ENV_BEGIN\*\/`/r '<(env | grep --color=never "^REACT_APP_") index.html; nginx '-g daemon off;'
```

##Working Example
You can find full working example with `nx` [here](https://github.com/noctifer20/react-docker-runtime-env)
How can I use Ruby to colorize the text output to a terminal?
Tags: ruby, terminal, github, gem
Published: 2022-09-23 10:41:48

You can use 'colortheme' gem to change the color of the text in Ruby.

## install with gem
```shell
gem install colortheme
```
## install with git hub
```shell
git clone https://github.com/nimacpp/colortheme.git
cd colortheme
gem build colortheme.gemspec
gem install colortheme*.gem
```
## how can use 
first include colortheme in your code :
```ruby
require 'colortheme'
```
then you can use it like this :
```ruby
require 'colortheme'
puts "hello world".green 
```
output :

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fagjfz2u6sfmvdtfff5p.png)

## list of colors in colortheme :

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pqibj0xc23zv4zxqois.png)
and we have light colors in version [1.5]