teleren/devto huggingface dataset:
Registration Page with Glass Effects in HTML CSS & jQuery | On Click Show Hide Login Form
Tags: html, css, webdev, javascript
Published: 2021-09-18 18:59:23

Hi, in this tutorial we are going to learn How to make a registration page with glass effects using HTML CSS and jQuery?
On click show hide login form using jQuery and create an amazing transparent login form.
How to make a transparent login form in HTML CSS jQuery?
Login form HTML code free download.
How to hide show form with jQuery?
How to make a responsive registration form in HTML and Javascript?
How to build a login form in HTML and CSS jquery?
How to create login page in HTML with CSS code with the background image?

**Full Vide:**
{% youtube MMaC2PyyoJw %}

How to create an animated registration form design HTML CSS?
Transparent login form template free download.
How to create HTML code for login page and how to create a form in HTML?
Download signup page source code free and transparent registration form 2021.

If you found this video helpful please like the video and SUBSCRIBE to this youtube channel to watch more videos like that. What do you think about today's video topic? please share your thoughts and queries in the comments below! 
---------------------------------------------------------
- Please have a look at my website for more details!
         https://hmawebdesign.com
- Place an order for any Web Development work!
         https://www.fiverr.com/haaddison1?up_rollout=true
---------------------------------------------------------------
Hello World
Tags: html, css, javascript
Published: 2021-09-18 18:40:39

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Python chr(): A Step-By-Step Guide
Tags: python, programming, codenewbie, tutorial
Published: 2021-09-19 12:58:28

---
title: Python chr(): A Step-By-Step Guide
published: true
date: 2021-09-18 18:20:38 UTC
tags: #python #programming #codenewbie #tutorial
canonical_url: https://itsmycode.com/python-chr-a-step-by-step-guide/
---

ItsMyCode |

The **`chr()`** function takes an integer (representing Unicode) as an input argument and returns a string representing a character.

**Syntax – chr(num)**

**Parameter and Return Value**

- The **`chr()`** function can only take one parameter and integer as an argument. 
- The valid range of the integer is between 0 to **1,1141,111(0x10FFFF in base 16)**, representing the equivalent Unicode characters.
- If you pass an integer outside the range, Python will throw ValueError
- The **`chr()`** method returns a string(single character) whose Unicode code point is an integer.
- The chr() is nothing but the inverse of **[ord()](https://itsmycode.com/python-ord-a-step-by-step-guide/)** function.

## Example of chr() function in Python

In the below examples, we are passing various Unicode numbers to chr() method and converting them into equivalent Unicode characters.

```python 
print("Unicode character of integer 65 is", chr(65))
print("Unicode character of integer 8364 is", chr(8364))

# Print Alphabets using Unicode
for i in range(65, 65+26):
    print(chr(i), end = " , ")
```

**Output**

```python 
Unicode character of integer 65 is A
Unicode character of integer 8364 is €
A , B , C , D , E , F , G , H , I , J , K , L , M , N , O , P , Q , R , S , T , U , V , W , X , Y , Z ,
```

## Example – ValueError: chr() arg not in range(0x110000)

If you pass an integer outside the Unicode range, Python will throw a **ValueError** , as shown in the below example.

```python 
print(chr(4000000))
print(chr(-4))
```

**Output**

```python 
Traceback (most recent call last):
  File "c:\Projects\Tryouts\main.py", line 1, in <module>
    print(chr(4000000))
ValueError: chr() arg not in range(0x110000)
```

The post [Python chr(): A Step-By-Step Guide](https://itsmycode.com/python-chr-a-step-by-step-guide/) appeared first on [ItsMyCode](https://itsmycode.com).
[TypeScript] Play my own voice 4
Tags: typescript
Published: 2021-09-18 17:20:07

## Intro
This time, I will try "ConvolverNode" to use reverb.

* [[TypeScript] Play my own voice](https://dev.to/masanori_msl/typescript-play-my-own-voice-58i4)
* [[TypeScript] Play my own voice 2](https://dev.to/masanori_msl/typescript-play-my-own-voice-2-4cik)
* [[TypeScript][Chart.js] Play my own voice 3](https://dev.to/masanori_msl/typescript-chart-js-play-my-own-voice-3-2l6c)

## Create the reverb effect
In the natural environment, the reverb effect is created by reverberation.
In digital audio, the reverb effect is created by superimposing environmental sounds(convolving). 

#### main.page.ts
```ts
let gain: GainNode;
let lastGainValue = 1.0;
let audioContext: AudioContext;

export async function init(): Promise<void> {    
    const medias = await navigator.mediaDevices.getUserMedia({
        video: false,
        audio: true,
    });
    
    audioContext = new AudioContext();
    const audioSourceNode = audioContext.createMediaStreamSource(medias);

    gain = audioContext.createGain();
    gain.gain.value = 1.0;
    // Load environmental sounds
    const response = await fetch('https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg', {
        method: 'GET',
        mode: 'cors',
    });    
    const convolver = audioContext.createConvolver();
    const audioData = await response.arrayBuffer();
    const buffer = await audioContext.decodeAudioData(audioData);
    convolver.buffer = buffer;
    // (1)
    audioSourceNode.connect(convolver);
    convolver.connect(gain)
        .connect(audioContext.destination);
    // (2)
    // DO NOT connect "ConvolverNode" here
    audioSourceNode
        .connect(audioContext.destination);
}
```

One important thing is I can't connect "ConvolverNode" at (2) or I will only be able to hear the environmental sounds.

## Control the reverb effects
I can't control the reverb effects like the sound length, or sound type except "gain".
So I have to change the sound files.

In this time, I tried some other sound files from here.
* [OpenAIR - Open Air Library ](https://www.openair.hosted.york.ac.uk/)

Because "ConvolverNode" superimposes the sound files on the mic sound, if I use a song as the sound file, I can hear the song with my voice.

## Resources
* [ConvolverNode.buffer - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer)
* [ConvolverNode - Web APIs | MDN](https://developer.mozilla.org/ja/docs/Web/API/ConvolverNode)
* [Web Audio API#ConvolverNode](https://www.w3.org/TR/webaudio/#ConvolverNode)
The Best SvelteKit YouTube Tutorials – UPDATED on Feb 2022
Tags: svelte, tutorial
Published: 2021-09-18 17:29:45

Here is my list of the best SvelteKit YouTube video tutorials (updated on 9/18/21 and on 12/23/2021 and on 02/11/2022):

## [The Net Ninja](https://www.youtube.com/watch?v=9OlLxkaeVvw&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP&ab_channel=TheNetNinja)

{% youtube 9OlLxkaeVvw %}
[Full Playlist](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP)

&nbsp;

## [lihautan](https://www.youtube.com/watch?v=i2suPKMPUFA&list=PLoKaNN3BjQX0Ch8C6XHjG4K1Q75ugf6yG&ab_channel=lihautan)

{% youtube i2suPKMPUFA %}
[Full Playlist](https://www.youtube.com/playlist?list=PLoKaNN3BjQX0Ch8C6XHjG4K1Q75ugf6yG)

&nbsp;

## [WebJeda](https://www.youtube.com/watch?v=Gtg4yG8Bhcs&list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms&index=1&t=137s&ab_channel=WebJedaWebJeda)

{% youtube Gtg4yG8Bhcs %}
[Full Playlist](https://www.youtube.com/playlist?list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms)
                                                                                               
&nbsp;

## [James Q Quick](https://www.youtube.com/watch?v=UU7MgYIbtAk&t=2676s)

{% youtube UU7MgYIbtAk %}

&nbsp;

## [this.stephie](https://www.youtube.com/watch?v=uC6y59y4V4w&ab_channel=this.stephie)

{% youtube uC6y59y4V4w %}

&nbsp;

## [Dev Ed](https://www.youtube.com/watch?v=ydR_M0fw9Xc&t=1285s&ab_channel=DevEd)

{% youtube ydR_M0fw9Xc %}

&nbsp;

## [Hunter Perrin](https://www.youtube.com/watch?v=OyjZ7dezADw&ab_channel=HunterPerrin)

{% youtube OyjZ7dezADw %}

&nbsp;

## [Weibenfalk](https://www.youtube.com/watch?v=6oDSwcZPbxA&list=LL&index=1&ab_channel=Weibenfalk)

{% youtube 6oDSwcZPbxA %}

&nbsp;

## [Svelte Mastery ](https://www.youtube.com/watch?v=j4AV2Liojk0&t=6s&ab_channel=SvelteMasterySvelteMastery)

{% youtube j4AV2Liojk0 %}

&nbsp;

## [Brayden Girard](https://www.youtube.com/watch?v=P6gEnVlJPOc&list=PLPkJj9BR9B925L3K05PfIkDeU4sEIhj0n)

{% youtube P6gEnVlJPOc %}
[Full Playlist](https://www.youtube.com/playlist?list=PLPkJj9BR9B925L3K05PfIkDeU4sEIhj0n)

&nbsp;

## [Noah Glaser](https://www.youtube.com/watch?v=OTxIcU_2Qos&ab_channel=NoahGlaser)

{% youtube OTxIcU_2Qos %}
[Full Playlist](https://www.youtube.com/playlist?list=PLT9tklUafCrKillL-YGj1IundEpNEDqvC)

&nbsp;

## [Scott Spence](https://www.youtube.com/watch?v=zH2qG9YwN3s&ab_channel=ScottSpence)

{% youtube zH2qG9YwN3s %}

&nbsp;

## [Tushar Shukla](https://www.youtube.com/watch?v=bkqvVkP3sK8&ab_channel=TusharShukla)

{% youtube bkqvVkP3sK8 %}
[Full Playlist](https://www.youtube.com/playlist?list=PLgZ38BcfViGn2pL2J8Hd78gPblBnzX0IK)

&nbsp;

## [David Parker](https://www.youtube.com/watch?v=qmwJTI-vH6w&list=PLPqKsyEGhUnaq0FiYab4JlcQNedSlDylq&index=1&t=148s&ab_channel=DavidParkerDavidParker)

{% youtube qmwJTI-vH6w %}
[Full Playlist](https://www.youtube.com/playlist?list=PLPqKsyEGhUnaq0FiYab4JlcQNedSlDylq)
Python ord(): A Step-By-Step Guide
Tags: python, programming, codenewbie, tutorial
Published: 2021-09-19 12:59:13

---
title: Python ord(): A Step-By-Step Guide
published: true
date: 2021-09-18 17:24:43 UTC
tags: #python #programming #codenewbie #tutorial
canonical_url: https://itsmycode.com/python-ord-a-step-by-step-guide/
---

ItsMyCode |

In Python **`ord()`** function accepts a single unit of character and returns the equivalent Unicode of the passed argument. In other words, the **`ord()`** function can take a string or character of length one and returns an integer representing the Unicode of that string or character.

## ord() Function in Python 

The **`ord() `**function is nothing but the inverse of the Python **`chr() `**function. In the **`chr()`** function, we will convert the Unicode integer to the character, and in the **`ord()`**, it will be the exact opposite in the **`ord ()`**.

**Syntax – ord(ch)**

**Parameters** : ** ** Accepts Unicode character or string of length 1.

**Return Value** : Returns an integer representing the Unicode character

## **Example ord() vs chr() **

```python 
print(chr(97))
print(ord('a'))
```

**Output**

```python 
a
97
```

As you can see, the **`chr(97)`** returns character **‘a’** , and the inverse**` ord('a') `**returns the integer **97**

## ord() Function Examples

Let’s take a look at different types of example.

```python 
print('Unicode of lower case alphabet a is ', ord('a')) # lower case alphabet 
print('Unicode of bumber 5 is ', ord('5')) # Number
print('Unicode of symobol $ is ', ord('$')) # dollar
print('Unicode of upper case alphabet A is ', ord('A')) # Upper case alphabet
print('Unicode of zero is ', ord('0')) # Number Zero

```

**Output**

```python 
Unicode of lower case alphabet a is 97
Unicode of bumber 5 is 53
Unicode of symobol $ is 36
Unicode of upper case alphabet A is 65
Unicode of zero is 48
```

## **TypeError: ord() expected a character, but string of length 2 found.** 

If the argument passed to the **`ord()`** function is more than 1 character, then Python will raise a **TypeError: `ord() `expected a character, but string of length 2 found.**

```python 
print(ord('AB'))
```

**Output**

```python 
Traceback (most recent call last):
  File "c:\Projects\Tryouts\main.py", line 9, in <module>
    print(ord('AB'))
TypeError: ord() expected a character, but string of length 2 found
```

The post [Python ord(): A Step-By-Step Guide](https://itsmycode.com/python-ord-a-step-by-step-guide/) appeared first on [ItsMyCode](https://itsmycode.com).
how do I solve this problem on android studio. pls help🙌
Tags: android
Published: 2021-09-18 17:20:41

Execution failed for task ':app:mergeDebugJavaResource'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.MergeJavaResWorkAction
   > com.google.common.base.VerifyException (no error message)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
CSS to ignore parent padding in 4 lines
Tags: css, webdev
Published: 2021-09-18 17:13:44

---
title: CSS to ignore parent padding in 4 lines
published: true
description: 
tags: css, webdevelopment
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://milindsoorya.com/blog/css-to-ignore-parent-padding
---

## Introduction

CSS is damn hard. It's these small problems that will take up your entire day and energy and the will to live. And one such notorious problem has been to make a child element break out of their parent's padding. 

## The problem

I recently tried to add a newsletter to my [website](https://milindsoorya.com/) (subscribe - shameless plug) and I wanted the form to extend to the side of the browser window, but there is a parent `div` with padding for getting that uniform look throughout the site.

how it looks with parent's padding -

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

how I wanted it to look - 

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpml77epucqowftdtato.png)
 
this happens because the section containing newsletter is within the main div -

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpd6dmztbnpisbm48ymq.png)
 
Yeah I know, It sound's really simple and there are many janky solutions out there to fix it too. (The solution down below is more or less jank, but in relative terms, I believe it is really elegant 😁).

## Solution

Give this below piece of CSS to the element you wish to break out(pun Intended).
```css
.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}
```
The `max-width` is required because otherwise, you may find a horizontal scrollbar.

yeah, It's that simple.


UPDATE:
As I wanted the newsletter on every page I decided to move the section div one level up, so to the same level as the main. Hence, I don't have to do this hack.
Simple HOC in React
Tags: react, webdev, tutorial
Published: 2021-09-18 17:12:23

Higher Order Components allow for reusability of code and saves you from repeating yourself, it comes in quite handy. It is something that recently came to my attention and I only wish I had learnt this earlier.

In this instance, I had a layout that consisted of a top nav embedded with a drawer that appeared in multiple views but not all, so instead of always importing it I made it a HOC like this: 

```
import React from 'react'
import TopNav from '../components/TopNav'

export const WithLayout = (Component)  => {
    return (props) => (
        <div>
            <TopNav/>
            <Component {...props}/>
        </div>
    )
}

``` 

So what this allows you to do is wrap any component you want to have a **top nav** in this **Layout component**, just like this:


```
import React from 'react'
import { WithLayout } from '../HOC/Layout'

const Landing = () => {
    return (
        <div>
            <p>This a page that uses the layout HOC </p>
        </div>
    )
}

export default WithLayout(Landing)

``` 

And with that, you have a functional HOC in your react app.

## 👋
Why is bubble sort called 'Bubble Sort'?
Tags: bubblesort, sort, algorithms, beginners
Published: 2021-09-18 17:03:44

I have read many contents on bubble sort, but found one same reason for this name. The reason they said is:

>Because its easy to swap soap bubble/watter bubble, and that is what we do in bubble sort, we swap those elements which satisfy our condition.

Today I got to know a good, a real-like reason while reading a blog. The reason is :

>Air bubbles that are more buoyant than surrounding water rise to the top. Similarly, list elements with greater value than their surrounding elements “bubble” to the end of the list.

Thanks for reading...
Laravel Dispatch Queue Job with Delay and Get Job ID
Tags: laravel
Published: 2021-09-18 17:01:10

With Laravel when we dispatch Queue Job asynchronously, the job is added to the queue then we have no control over it anymore. So I find a way to take control of the job, to either remove or process jobs from the queue.

Let's Start!

Create a new helper for dispatch queue job and get Job ID

    if (!function_exists("custom_dispatch")) {
	    function custom_dispatch($job): int {
		    return app(\Illuminate\Contracts\Bus\Dispatcher::class)->dispatch($job);
		}
	}

__Now let's use "custom_dispatch" helper.__

Create a new controller to dispatch the job and handle the job.

    php artisan make:controller JobHandlerController


Now let's use our helper and implement the controller.

    <?php
    namespace  App\Http\Controllers;
    
    use Illuminate\Support\Facades\DB;
    
    class JobHandlerController extends  Controller
    {
	    public function dispatchJob(): int
	    {
		    // Create your job instance with delay, so we can back here within delay and take control in our hands.
		    $job = new App\Jobs\YourAwesomeJob($params)->delay(now()->addSeconds(60));
			
			// Dispath your job with our custom_dispatch helper. This will return job id from jobs table
		    $jobId = custom_dispatch($job);

			return $jobId;
	    }
		
		public function processJob(int $jobId, string $action): bool
		{
			// Here deleting job from the jobs table
			if($action === "delete") {
				DB::table('jobs')->whereIn('id', $args['jobIds'])->delete();
			}
			
			// Here update available_at field with the current timestamp, So now the queue worker will process the job immediately. 
			DB::table('jobs')->where('id', $jobIds)->update(['available_at' => time()]);
			
			return true;
		}
    }

Note: This thing is useful when the queue driver is not "sync".

That's it!

Hope you find it useful.
ShowDEV: Bash-TPL - A smart, lightweight shell script templating engine
Tags: showdev, github, bash, templateengine
Published: 2021-09-18 16:46:24

I know the landscape is crowded, but I'd like to offer my submission for an Easy To Use / Easy To Maintain template engine:

Introducing Bash-TPL : A Smart, lightweight shell script templating engine, written in Bash

* [https://github.com/TekWizely/bash-tpl](https://github.com/TekWizely/bash-tpl)

#### FEATURES

##### Lightweight

* Single bash script
* Easy to ship with your project or build process

##### Smart Indentation Tracking

* Removes unwanted whitespace from rendered text files
* Encourages well-formatted mix of template tags and textual content

##### Generates Reusable Shell Scripts

* Can manage & invoke shell scripts without bash-tpl
* Only need bash-tpl when your source templates change

##### Shell Agnostic

* Uses standard printf, variable, and sub-shell constructs
* Templates can target any modern shell

##### Supports Includes

* Can organize your templates as smaller, reusable components
* Indentation tracking even works across includes !

##### Flexible Delimiter Support

* Can customize all template delimiters
* Can modify delimiters mid-template
* Can include templates with differing delimiters

------------------
#### Quick Example

As is the way: A quintessential *hello world* example is of course in order:

*hello.tpl*

    Hello, <% ${NAME:-World} %>

*compile + run*

    $ source <( bash-tpl hello.tpl )
    
    Hello, World

*compile + run with NAME*

    $ NAME=TekWizely source <( bash-tpl hello.tpl )
    
    Hello, TekWizely

*view compiled template*

    $ bash-tpl hello.tpl
    
    printf "%s\n" Hello\,\ "${NAME:-World}"

---------------------
#### More Information

This hello example is really just the start of what bash-tpl can do.

There's a full README on the [Project Home Page](https://github.com/TekWizely/bash-tpl).

If you're looking for an easy solution for creating maintainable templates to generate well-formatted text files, I hope you'll give my project a try.

I'm happy to answer any questions or work through any use-cases you might have for templates and see how bash-tpl might help.

Feel free to comment and thanks for looking!

\-TW
print("Hello, World!")
Tags: python, computerscience, firstpost, django
Published: 2021-09-18 16:35:41

---
canonical_url:
---
Hello mate, How're you doing? I'm doing extremely well!

I'm **Praveen** and this is my first ever blog.

In this article, I would like to share my experiences on how I started on coding.

***
I wrote my first piece of code during my Bachelors, way back in 2015. We had C-language in the very first semester of the Bachelors. First few months was full of theory and I didn't write any code. And yes, ~~Hello,World!~~ was NOT my first program! I remember printing something like a square of stars(*) on console using `printf()` in C-language.



---
Currently, I am working at an Indian Unicorn as a **Python developer**. I have been working on Python only since the initial days of my professional career.

The question is _How Did I learn Python?_ I didn't had Python in my Bachelors curriculum, we just had C, Java and.... 

>We had HTML too but not mentioning it as I'm afraid all the other developers will attack me to call it a programming language :)

That was my first year in Bachelors, I didn't have a PC or Laptop. I first heard of the language "PYTHON 🐍" in my college library with a small computer room with around 30 computers (max 10-15 will work at any point of time). While I was waiting for my turn, I observed one of my seniors were writing code and when I asked him: "_what is this language, I haven't seen this type of computer code?_" 
>Poor me, I knew only C-language at that time and thought everyone will write code in only one language :(

He replied, "_It is Python._"

---
Two years later, I started learning Python on my own from several resources like Youtube, Blogs etc., I practised on my own and had some hands on in the language. In my experience of competitive coding, I used Python to solve questions as I felt it's very easy to use and apply the logic when compared to other languages like C and Java.

That's how I learned Python and working as a Python developer from the beginning of my career!! It helped me a lot.

I want you to understand that every small thing matters a lot, every experience counts!

_I would love to learn new things from great minds of the community & give something back to community to help people._


**Thank You, Have a wonderful day!**