teleren/devto huggingface dataset:
Dist::Zilla::Plugin::SignReleaseNotes version 0.0006
Tags: perl
Published: 2022-02-06 15:52:05

Dist::Zilla::Plugin::SignReleaseNotes is a perl module to automatically create and gpg sign release notes as part of a Dist::Zilla release flow.

The release notes include all of the commits between the most recent tags in your git repository.  It assumes that your Dist::Zilla flow is tagging the repo as part of the release process.

The produced Release-{version} file is created in the root of the module directory and includes the sha-256 hash of the file that is released to CPAN. 

The use case is to simplify creating release notes on github and similar and to have a developer certified (via a gpg signature) sha256 hash of the file as it was uploaded to cpan.  There has been more attention being paid to ensuring the authenticity of releases and this module is my way of helping that (but mostly simplifying my release process).

The following is a sample of the release notes created:

`
-----BEGIN PGP SIGNED MESSAGE-----
Hash: RIPEMD160

Dist::Zilla::Plugin::SignReleaseNotes

Release 0.0006

Change Log
  - 1e5d7ed v0.0006
  - dd458e2 Update version
  - 3249fd6 Fix typo in sample

SHA256 hash of CPAN release

0266e366e2c975adc03a4de9109d80cb9aac8fc897419e8f3a72d54c60fb3a0b *Dist-Zilla-Plugin-SignReleaseNotes-0.0006.tar.gz

-----BEGIN PGP SIGNATURE-----
iQIzBAEBAwAdFiEEMguXHBCUSzAt6mNu1fh7LgYGpfkFAmH/6XAACgkQ1fh7LgYG
pflnUA/+LzT9YMkjNebM3TP2SAAxl4tYbOi/WvE8ipOLq1LLnIihjEvRL+ajtfGP
F75MwkjZvy8FpDZXYUKt5JQykT9aqvB9zVb2IoqOCcUOp3OZKefMZbHQzDfckaSC
H7O65bAXWM6AVCmXr6OmHegvbODi92DAB7YPDoWEVl5OT29hIhmBeK3QwFi/cnJo
7k/le8AcarxXCnRMNMs8Tr9yCYjHyExMyhEPkk6TzHVyFerFV12S57X2yKR5gk/H
XO1r+K3vCow68Q3TcxRcM1K7eJ0pr+gdulvZImy+12OhVddTkeZ3UEDIjSdRI4Av
hFT8PahaINgif0KAMJovwlwolX3T06cHMTgo4CdQPm/wCgYaU5twAUKv+KesgakR
8KKESMqO8EJBm7ig2WIBqUS2NZEel7Q4DEqlG6qQKh4WDiNs+IgyEfxssuh5CKAq
Edat5YN4reQxrLDNNkrzdHGKemM6PEb4GZeK9o9ougQv3rwV+D8XZuz3bO8HlurN
cIpby/5kZXveAypOf34p98612YmjN800t3UDeeNsvzM9eqolDPycfCljHEB4Vp3I
y35xT3+tnbn0I3TFZfz/O7AZh4/0ELgWeBAK5VltqyXL2BVd3u1DcP4m4DtYVxhy
G2uKvRgZI3PfbtrDUQj3VGG5Vb8wj3L9PNKghhLmm3hR3gV8m9o=
=UGb3
-----END PGP SIGNATURE-----
`
A simple serverless architecture on AWS ecosystem for data ETL and visualization
Tags: serverless, aws, etl, cloud
Published: 2022-02-06 15:36:53

![Serverless architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt9uypfdxuqan1emq0nw.png)
A simple step by step architecture for building an ETL process and then displaying that data back to the enduser by only using serverless service from AWS.

- End user uploads data file into the S3 (This can be done manually by logging onto the console or via an API accessible through a frontend application)

- S3 triggers a Lambda function on receiving a create object event

- Lambda function receives S3 event object and processes the data from file into a relational database on AWS's Aurora database (ETL)

- End user can now access this data from database by accessing the web application statically hosted on S3 & served via the Cloudfront

- This web application will make relevant API calls via ApiGateway (attached to Lambda functions) to fetch data
Shortcut to change color
Tags: chrome, javascript, webdev
Published: 2022-02-06 15:34:56

Keyboard shortcuts to increase or decrease easily a color value in the Chrome Dev Tools :

> to increase use `ARROW_UP`, to decrease use `ARROW_DOWN`

To increase the two hexadecimals on the right: 
- `ARROW_UP`
- `ARROW_UP`+ `ALT`
![ARROW_UP at the same time](https://its-just-nans.github.io/golb/data/ZloJPar.gif)

---

To increment the middle two hexadecimals:
- `ARROW_UP`+ `SHIFT` 

![SHIFT at the same time](https://its-just-nans.github.io/golb/data/lhjOaC6.gif)

---

To increment the left two hexadecimals:
- `ARROW_UP`+ `CTRL`

![CTRL at the same time](https://its-just-nans.github.io/golb/data/QNbihwu.gif)

---

To increment all hexadecimals pairs: 
- `ARROW_UP`+ `CTRL` + `SHIFT` + `ALT`

![All at the same time](https://its-just-nans.github.io/golb/data/VyZFypr.gif)
handle Forms without PageRefresh
Tags: javascript, php, html, programming
Published: 2022-02-06 15:27:33

## you only need a few lines of code

First, let's build the HTML file with a simple form...


```html
<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <title>FetchData</title>
  <link rel=stylesheet 
   href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <form>
    <div class=container>
      <h2>Fetch Data</h2>
      <div class=grid>
        <input type=hidden 
            name=dbid value='10'>
        <label>First name
          <input type=text name=firstname 
            placeholder="first name"  required>
        </label>
        <label>Last name
          <input type=text name=lastname 
            placeholder="last name" required>
        </label>
      </div>
      <label>Email address</label>
        <input type=email name=email 
          placeholder="email address" required>
        <small>We will send your e-mail address 
               to all mail order companies, banks 
               and insurance companies 😇</small>
      <button>Send</button>
    </div>
  </form>
  <script src="fetch.js"></script>
```
screenshot from form:


![form sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chaucc1en9518q28q9m3.png)

now a few lines **Vanilla JS**...

```javascript
document.querySelector('form')
  .addEventListener('submit', function (evt){
    evt.preventDefault()
    let reqData = new FormData(this)
    reqData.append('action', 'update')
    fetch('fetch.php', { method: 'POST', body: reqData})
    .then (r => r.json())
    .then (data=>{
      if (data.status === "OK"){  
         // make your work
         console.log(data.message)
      }
      if (data.status === "EMPTY"){  
         //make your work
        console.log(data.message)
      }
      if (data.status === "HACKER"){  
        // call secret services
        console.log(data.message)
      } 
    }).catch(error => alert(error))
    return false;
})
```
finally some **PHP**...

```php
<?php
function jsonOut($myMessage){
    header('Content-Type: application/json');
    echo json_encode($myMessage);
    exit;
}
function checkRequest($requestArray, $arrayKeys){
  foreach ($arrayKeys as $key){
    if (!isset($requestArray[$key])){
      JsonOut(['status' => 'HACKER',
      'message' => 'someone is trying to manipulate']);
    }
    if ($requestArray[$key] == ''){
      JsonOut(['status' => 'EMPTY', 'field' => $key, 
      'message' => 'please fill in correctly']);
    }
  }
  return true;
}
$action = $_POST['action'] ?? "";    
if ($action === 'update'){
  $myRequestKeys = array('dbid', 'firstname', 'lastname', 'email');
  if(checkRequest($_POST, $myRequestKeys)) {
    //make your work...
    JsonOut(['status' => 'OK','message' => 'everything OK']);
  }
}
```
Done...
Guidelines on importing modules in Python
Tags: beginners, python, programming
Published: 2022-02-06 14:56:56

Library support extends our tools to create pieces of software. Because of this, we no longer need to write everything from scratch. To access this set of tools, we need to import modules from Python packages. A Python package is a collection of modules that contain a set of functionalities we may deem useful for our projects.

There are many ways to import a package in Python. I compiled some notes I gathered from The PEP Standard as Google Python Style Guide for pointers to import modules in Python. 


---

- Imports should usually be on separate lines. 

  ```python
  import os
  import sys
  # not `import os, sys`
  ```

  - `from ` imports may declare multiple items at once:

    ```python
    from typing import Union, Optional
    ```

- Imports should be grouped in the following order:

  1. Standard library imports.
  2. Related third-party imports.
  3. Local application/library-specific imports.

  

- Imports are always declared at the top of the file. 

- [Absolute imports](https://realpython.com/absolute-vs-relative-python-imports/) are recommended. 

  - They are more readable and tend to be better behaved. 
  - Explicit relative import is an acceptable alternative to absolute imports, especially when dealing with complex package layouts where using absolute imports would be unnecessarily verbose.

- Avoid wildcard imports.

  - It clutters the namespace of your code and makes it unclear which names are intended to be present. 
  - It makes your code confusing and difficult to maintain. 

- 

```python
# this will import the namespace of all items contained in the package
from [package/module] import * 
```



```python
# this will import a specified set of items contained in the package
from [package/module] import [item] 
```



- Use `import` statements for packages and modules only, not for individual classes or functions. 
    ```python
    def function(x:list) -> float:
        import numpy as np
        ...
    ```

---

References:
1. Rossum, G.V., Warsaw, B & Coghlan, N. (2001). PEP 8 – Style Guide for Python Code. https://www.python.org/dev/peps/pep-0008/.
2. Nzomo, M. (2018). Absolute vs Relative Imports in Python. https://realpython.com/absolute-vs-relative-python-imports/.
3. Google (n.d.). Google Python Style Guide. https://google.github.io/styleguide/pyguide.html.

---

Photo by EJ Li on Unsplash
React Native Ecommerce app 🛒
Tags: reactnative, ecommerce, mobileapp, androidapp
Published: 2022-02-06 14:45:20

---
title: React Native Ecommerce app 🛒
published: true
description: Shoppr is an e-commerce app build in React Native. This app contains 15 screens for a production ready e-commerce applications.
tags: #reactnative #ecommerce #mobileapp #androidapp
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15qlhglrl5q52uytc4tk.png
---

#Shoppr eCommerce App in React native

Shoppr is an e-commerce app build in React Native (a open source UI framework for building mobile applications). This app contains 15 screens for a production ready e-commerce applications.

##App Features

- Build with latest version of React Native
- Compatible with Android and iOS
- Easy to use UI and beautiful design
- Login and Registration screens
- Used TypeScript features
- Free icons
- Used Redux library for state management
- Build with Expo

## Screens Included

1. Splash Screen
2. Login Screen
3. Registration Screen
4. Home Screen
5. Catalogue List Page
6. Filter Page
7. Custom Filter List Page
8. Product Details Page
9. Profile Page
10. My Orders Page
11. Order Details Page
12. Address List Page
13. Add New Address Page
14. Personal Info Page
15. Cart Page

## Used Frameworks & Libraries

- React native - v0.64.3
- React - v17.0.1
- Expo - v46.0.2
- Expo vector icons - v12.0.5
- React Redux - v7.2.6
- React Navigation - v6.0.9
- Yup - v.0.32.11
- Typescript - v4.3.5

## Source code

Get the full source code of this app at [Gumroad](https://vigowebs.gumroad.com/l/cabvqy)
Use Emojis Anywhere You Like In Windows
Tags: emoji, keyboard, programming, productivity
Published: 2022-02-06 14:43:11

### Intro
Are you a Windows user and you want to use emojis anywhere you like on your system?
If yes, then you're in the right place. 😎

Yes, it's true that you can use emojis in your Windows system anywhere you like. It can be a text file, a java or python code or a markdown file or the comment section of any tweet or blogs or a YouTube video. 

**Most important thing** is that you don't need any external software or extension to be installed on your computer.

You can use emojis just using the following magical shortcut key:- 
> Windows + .

---
### Display
The keyboard looks like something as below:- 

![Emoji Keyboard.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1644157156993/WD8myEGdu.jpeg)

---
### Use Case:- 

1. Press the two keys for a period of time and you will see the pop-up window of emoji keyboard just right to your blinking cursor. 

1. You can either choose emoji by yourself or you can *type the emoji name* you want like - 
    > You will get this 🎉 if you type "fun"

---

## Hope this helps you. Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCsuzc8lqAbgUYo4yzpjtfSw) and connect on [LinkedIn](https://www.linkedin.com/in/susmita-dey-15a15a210/) or [Twitter](https://twitter.com/its_SusmitaDey).
Also, feel free to [support](https://www.buymeacoffee.com/susmitadey) my work.😊
Object constructor in javascript
Tags: javascript, beginners
Published: 2022-02-06 14:32:21

Object constructor is a blueprint of an object, it is a function that is used to create an object.

```js
function Person(first,last,age){
    this.firstname= first;
    this.lastname = last,
    this.age = age;
}

const father = new Person('Jhon','Doe',24);
const mother = new Person('Jean','Doe',28);

```

In those example, we call `Person` function two times, thereby it create two different instance of the functions, since we use `new` keyword, it create two different object that set into `father` and `mother` variable.

However we cannot add new properties or methods to an object constructor directly in the way we add properties or methods to an object.

```js
    Person.nationality = "USA";
    const father = new Person('Jhon','Doe',24);
    father.nationality
    // undefined
```

To add new properties or new methods to the object constructor, we can use `prototype`

```js
    Person.prototype.nationality = "USA";
    father.nationality
    // USA
```

Now every object created using the object constructor `Person` will have property `nationality` set to `USA`
UseEffect and useLayoutEffect differences
Tags: javascript, webdev, beginners, programming
Published: 2022-02-06 14:31:38

Today we discuss what is difference between on those hooks in react and when we use it.

useEffect is the most popular hooks and came to replace componentDidMount, componentDidUpdate, and componentWillUnmount.

Implementation is the same as useEffect, but useLayoutEffect, will wait until React finishes with all its DOM manipulations and then do yours. This is best difference. 

```
const App = () => {

  useLayoutEffect(() => {
    console.log("this is useLayoutEffect");
  }, []);

  useEffect(() => {
    console.log("this is useEffetct");
  }, []);

  console.log("Render of component");

  return <div>Hello, India Walo</div>;
};
```

## Output in console

``Render of component
 this is useLayoutEffect
 this is useEffetct`
`

> This hook is synchronous, meaning that React waits for all the logic within the hook to complete and execute immediately after the rendering phase, but before drawing the changes on the screen.
The steps is the following:

1. Enter the render phase.
2. Execute useLayoutEffect.
3. Draw the changes on the screen.
4. Execute useEffect.
How to use typed.js
Tags: javascript, webdev, html, css
Published: 2022-02-06 14:04:20

---

published: True

---
## What is typed.js 
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
This is pure CSS animation you can make with basic CSS animation property but with Typed.js its easy to  make this moving text animation effect.

## How to used 
to used typed.js you have to navigate to GitHub link of [typed.js](https://github.com/mattboldt/typed.js/)
and copy the CDN file 
```ts 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
```
## Add typed.js to project
add CDN file into bottom of your HTML file before closing body tag and open new script tag. The entire code looks likes  
```ts
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
    var typed = new Typed(".mov",{
    strings: [,  "Ganesh","Content Writer","Web Developer"] ,
    typeSpeed: 100,
    backSpeed: 100,
    loop: true

    })
</script>

```
and now add some simple HTML part to activate types.js code 

```ts
  <h1> I'm  <span class="mov"> </span></h1>
```
Now you observe the **.mov** class is main element of this entire process of types.js and its simple.

The complete output is here [output](https://www.veed.io/view/87403d17-a81c-4c41-b52d-6bf71f91b301)
Link to my [GitHub repository](https://github.com/ganeshpatil386386/typed.js) which contains file and code.

also Connect with me on [twitter](https://twitter.com/PatilGanesh1010) I am sharing content related web development and free resources which is actually helpful for you.
Study vs Internship Preparation
Published: 2022-02-06 14:02:47

I feel like I have been overwhelmed by all these career paths laid in front of me like :
Web Development,
App Development,
Game Development,
UI & UX Design, Graphic Design etc. etc.


I want to and need to focus on my final Semester Exams but I don't have any clear idea about when they are going to get conducted by IGNOU as they have postponed exams date till further notice.
I want to get myself internship ready before June, and I also want to study for my exams.


The problem is I cannot focus on both at the same time, I tried to do them acc. to some time table, but that also didn't work out well.
Now, I am stuck in a loophole of Study and Internship preparation

Anyone knows how to get out of this loophole??
Encryption/cryptography in financial documents pre-1970s period
Tags: encryption
Published: 2022-02-06 14:02:31

do you know anyone who works in finance/banking who knows about encryption of financial documents? This is for an academic research paper, whereby I would be interested to research further information about encryption that was used in financial documents i.e. before David Chaum's blind signature research that developed into further encryption techniques. So I mean pre-1970s encryption/cryptography/steganography techniques. Anyone who may know more in regards to any articles, or experts in this field for this particular time period (pre-1970s), please give me a guide or let me know where I could look further!
Academic Research on encryption of financial documents
Tags: encryption
Published: 2022-02-06 13:52:43

do you know anyone who works in finance/banking who knows about encryption of financial documents? This is for an academic research paper, whereby I would be interested to research further information about encryption that was used in financial documents i.e. before David Chaum's blind signature research that developed into further encryption techniques. So I mean pre-1970s encryption/cryptography/stenography techniques. Anyone who may know more, please give me a guide or let me know where I could look further!
I want to be a community builder
Tags: awscommunitybuilders
Published: 2022-02-06 13:46:07

At the end of last year, 2021, I received an email with an invitation: Would you like to be an AWS community builder?

But, **What is AWS Community Builder program?**

> The AWS Community Builders program offers technical resources, mentorship, and networking opportunities to AWS technical enthusiasts and emerging thought leaders who are passionate about sharing knowledge and connecting with the technical community.
> source: https://aws.amazon.com/developer/community/community-builders/

It was an excellent and maybe logical question after a year of work with AWS services, not only to get my AWS Certification but to improve my career with products and services that are completely aligned with my path. Last year, I enjoyed working and learning about AWS, and after all that joy and work, it could be natural to start thinking about something like the AWS Community Builder Program, even when it represents some challenges.


So, back to the question, "Would you like to be an AWS Community Builder?", I think I should say:
Yes, I want to be an AWS Community builder.

**Do Community builders get paid?**
No, they do not get paid but they are rewarded with some AWS special gifts, most of them a surprise.

To start the process I need to set a personal goal of how much knowledge I want to share through blogs, videos, etc. and I have to complete an application. Unfortunately, the process is closed now until mid-2022. So during this time I will be working on my goal and sharing my work here.
A better way of importing Images (even SVGs) in React Js
Tags: react, svg, javascript
Published: 2022-02-06 13:16:51

Importing static images from your `assets` folder into a React component can become a tedious task if you have to import multiple images, and it also changes your overall component's aesthetics . Let's understand it by looking at an example

![footer-html-template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if7ty05gkc6s49acuryx.jpg)

and now you want to convert it into a React component
Our traditional approach might be like this
![react-footer-jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6jmv8xbir2aelpj3bpx.jpg)

here we are using multiple import statements, suppose if we have more icons , our import statement may increase as well , and it will become messy & visually unpleasant (at least for me),
So I wanted to change this , and found a better way to deal with this situation.
I created a javascript file inside my assets folder, and imported all the images, related to project, into this file.
![Folder-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lszs0w5hoktax95o9hl1.jpg)

Here I have created a file called `images.js` which contains path of images as an object
![importing images in image js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6swa25yukbcfgbm9afic.jpg)

You have to use ` .default `after `require` statement for importing SVGs  otherwise it will not display the SVG . and for png/jpg/jpeg you can remove `.default`
and now , to use it, all you have to do is, import this `images.js` file and use the image using ` . notation`,

![importing img using image js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox5m2gg80rlinxdu475i.jpg)
metawurst. have u used gitcoin?. .. https://gitcoin.co/
Tags: python, devjournal, html, opensource
Published: 2022-02-06 13:06:39

I started a new dom wrapper...
https://github.com/byteface/adom/

join-in if you want. It's only 2 commits old.

or should I try buy some of these gitcoins and raise an issue?