teleren/devto huggingface dataset:
How to Create an Inspiring Sign Up & Login Form In HTML And CSS | responsive login and registration form
Tags: html, css, webdev, javascript
Published: 2021-04-30 20:22:56

How to Create an Inspiring Sign Up & Login Form In HTML And CSS | responsive login and registration form, responsive login and registration form responsive registration form.

Related Queries:

How to create a signup page with HTML and CSS?
How to create a simple signup form in HTML?
How to create a login and signup page in HTML and CSS?
Does Google have a signup form?
How to create a login form?

**You can follow the following steps to create an inspiring signup and login form for user registration in your new website:**

1-  Signup form should contain the user registration input fields where user can enter personal information like user name email and password.
2-  First of all use an inspiring or user-oriented headline on your registration form to encourage users to create an account.
3-  You can include the following fields in your form,  user name, email, password, confirm password, first name, and last name.
4-  If you absolutely need more and comprehensive information of the user then ask for this information in steps.
5-  Consider a model and a good-looking window for your user registration signup and sign-in form to attract the user's attention.
6- It's very useful to create both Signup and Sign-in pages separately and place the link of both forms below the submit button.
7- Enable the social autofill option in your HTML CSS  Signup form. These allow users to bypass your form with a single click by importing relevant personal information they’ve already submitted to social networks.
8-  Put the placeholder text to convert, visitors need to know how to fill out your form. But, using placeholder text isn’t the best way to show them.

**Watch Full Video Tutorial**
{% youtube fAV_5aTiocI %}


------------------------------------------------------------------ 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
------------------------------------------------------------------
Release Update - Site Previews, Cancel & Retry Deploys, Table Improvements
Tags: opensource, news, webdev
Published: 2021-04-30 20:22:27

![](https://storageapi.fleek.co/fleek-team-bucket/Blog%20Inline/preview.png)

It's fixes and enhancements time ⚡ This week we're bringing another batch of updates that are focused on making your life a little better on Fleek. Most of these are user requests, so keep em' coming our way 🔥

What do we have in store this week?

* Site Previews
* Cancel & Retry Deployments
* Storage & Hosting Table Fixes

## New Features

### Site Previews

![](https://storageapi.fleek.co/fleek-team-bucket/Blog%20Inline/preview-wide.png)

First off, site previews have landed on our Hosting product. You've probably seen that when you navigate your site list and their settings, there is a small image box that was previously empty. Well now, upon each new deployment, Fleek will **take a snapshot** of your site and display it on that box as a **site preview!**

This way you can easily differentiate your sites/apps on the Hosting list, and have a clear visual confirmation of how your website looks currently.

### Cancel & Retry Deployments

![](https://storageapi.fleek.co/fleek-team-bucket/Blog%20Inline/cancel.gif)Because things can go wrong, and time shouldn't be wasted, we added **cancel and retry buttons** for your deployments on Fleek. If your deployment is stuck, queued in a series of other unnecessary ones, or simply anything went wrong with it, you can **stop or retry it** and start over. No more waiting for a timeout.

This was probably our most user-requested feature of all time! Better late than never right?

## Enhancements

### Hosting and Storage Tables

When you visit the hosting and storage section, the files you store or the sites/apps shown are listed in an infinite scroll table. Recently, some issues appeared in the table's loading animation and resizing. We've fixed those issues and improved the performance of both tables.

## Wrapping it Up

That is all for today's release notes! Stay tuned for more updates and improvements coming later on next week. As always, you can hit us up in Twitter or Slack to let us know the features, improvements, or bugs you'd like to see tackled next 😎

* [Sign up](https://app.fleek.co/) to try Fleek
* Join our [Community Chat](https://slack.fleek.co/)
* Follow us on [Twitter](https://twitter.com/FleekHQ)
* Subscribe to our [Youtube channel](https://www.youtube.com/channel/UCBzlwYM0JjZpjDZ52-SLUmw)
* Check out our [Tech Docs](https://docs.fleek.co/)
* Contact us at support@fleek.co
Networking
Published: 2021-04-30 19:48:01

Here's a great article I read through #springboard's Full Stack course in regards to networking.  I love the advice about being positive and offering help to our fellow connections. My small example of this was a post I saw last week where a connection of mine was looking for information regarding Data Science. Data science has interested me since I began this career change so I have added many professionals/students in that industry to my network. Knowing this, I shared his post to try and lend a hand. Very small example but something I plan to continue to build on. 


https://review.firstround.com/reach-out-stay-in-touch-and-deepen-your-connections-with-this-essential-networking-advice
Optimizing async/await codes with TPL
Tags: csharp, dotnet, performance, webperf
Published: 2021-04-30 19:29:19

I was wondering how to optimize the performance of async/await codes with [TPL(Task Parallel Library)](https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/dataflow-task-parallel-library).

Therefore, I tested different amount of tasks(10/1000/5000) separately, and each task took 5 seconds.

- The result :

|             | Without TPL| With TPL|
--------------|------------|---------| 
|100 tasks    | 500 sec    | 27.91 sec (MaxDegreeOfParallelism = 20)|
|1000 tasks   | 5000 sec   | 135.34 sec (MaxDegreeOfParallelism = 70)|
|5000 tasks   | 25000 sec  | 317.33 sec (MaxDegreeOfParallelism = 130)|

- The testing code :

>[ActionBlock](https://docs.microsoft.com/en-us/dotnet/api/system.threading.tasks.dataflow.actionblock-1?view=net-5.0)

> [MaxDegreeOfParallelism](https://docs.microsoft.com/en-us/dotnet/api/system.threading.tasks.dataflow.executiondataflowblockoptions.maxdegreeofparallelism?view=net-5.0)
```csharp
public async Task GetTasks() 
{
  try 
  {
    Stopwatch sw = new Stopwatch();
    // start
    sw.Start();
    var workBlock = new ActionBlock<int>((a) => GetTask(a),
      new ExecutionDataflowBlockOptions 
      {
        //Gets the maximum number of messages that may be processed by the block concurrently(from MSDN)
        MaxDegreeOfParallelism = 5
      });

    // 100 tasks
    foreach(var taskIndex in Enumerable.Range(1, 100)) 
    {
      workBlock.Post(taskIndex);
    }
    workBlock.Complete();
    await workBlock.Completion;

    // stop
    sw.Stop();
    Console.WriteLine($"{sw.ElapsedMilliseconds}ms");
  } catch 
  {
    throw;
  }
}
public async Task GetTask(int a)
{
    // mock http request
    await Task.Delay(5000);
}

```

Thank you!
TributePage I think i made my first responsive website
Tags: codepen
Published: 2021-04-30 19:14:52

{% codepen https://codepen.io/budapest/pen/PoWrmzZ %}
Made this for freecodecamp.

HI i did this and i want to share something.

Lately I have been feeling like I don't know where to go or what to do about learning web development. I am currently taking two udemy courses.

My brother told me that this is normal.

PD: i love this and this is all i wanted. I know the tribute page is very ugly.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-04-30 18:14:48

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Finding a new podcast* ... or whatever else might spark joy ❤️ 

*May I humbly/biasedly recommend [DevNews](https://dev.to/devnews)? 

---

Happy Friday!

![The Office](https://media.giphy.com/media/5wWf7GW1AzV6pF3MaVW/giphy.gif)
My 1st post
Tags: webdev, java, angular, blogging
Published: 2021-04-30 17:58:03

Hello everyone, :wave:

Let me introduce myself, I am a 26 years old junior full-stack developer and I’ve been here for a couple of months as a reader but I decided to take a step forward and be also a writer. :black_nib:
So my first article will be about the reasons that made me take this decision.

I’m really happy to be part of this great community and be able to share and learn from everyone. :sparkling_heart:



Here is my Twitter: [@elyamarouane](https://twitter.com/elyamarouane). Let's connect :handshake:
Minifying JS in Eleventy on production
Tags: eleventy, minification, terser, 11ty
Published: 2021-04-30 17:54:32

This tutorial is written for the 11ty framework and we will be hosting the app on Netlify. Other platforms like Cloudflare and Vercel have similar support for this as well.

The goal of this tutorial is to speed up your local dev environment (by not spending resources minifying your code locally) and then making sure your javascript code is minified in production

## Steps
1) Install the dotenv package so you can use environment variables.
`npm install dotenv`

2) Create the `.env` file and add it to your `.gitignore`. 

3) Inside of `.env`, add this line `ENVIRONMENT=local` and save.

4) Add Dotenv to the top of your `eleventy.js` file 
`require('dotenv').config();`

5) Log into Netlify and navigate to your site. 

6) Click on "Site settings"
![Site Settings](https://www.zachvoss.com/images/devto/eleventy-js-post/11ty-js-post-site-settings.png)

7) In the sidebar, click on the "Build & Deploy" link
![Build and Deploy menu](https://www.zachvoss.com/images/devto/eleventy-js-post/11ty-js-post-build-and-deploy.png)

8) Then click on the "Environment" sub link
![Environment sub link](https://www.zachvoss.com/images/devto/eleventy-js-post/11ty-js-post-environment-link.png)

9) Click on "Edit Variables" button
![Edit Variables button](https://www.zachvoss.com/images/devto/eleventy-js-post/11ty-js-post-edit-environment.png)

10) Add in the same key "ENVIRONMENT", and set the value to be "production"
![New production value added](https://www.zachvoss.com/images/devto/eleventy-js-post/11ty-js-post-environment-save.png)

11) Make sure to save!

12) In your codebase, make sure that the Terser package is installed
`npm install terser`

13) Import Terser into the top of your `eleventy.js` file 
`const { minify } = require("terser");`

14) Following the tutorial from the 11ty dev site, we can add Terser (or use your existing implementation) like so:
https://www.11ty.dev/docs/quicktips/inline-js/
```js
eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
  code,
  callback
) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
});
```

15) Inside your new filter, wrap the `minify` function in an `if` statement 
```js
eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
	code,
	callback
) {
	try {
		if(process.env.ENVIRONMENT === "production") {
			const minified = await minify(code);
			callback(null, minified.code);
		} else {
			callback(null, code);
		}
	} catch (err) {
		console.error("Terser error: ", err);
		// Fail gracefully.
		callback(null, code);
	}
});
```

16) Inside your nunjuck files, markdown, or liquid files, you can now reference your new filter that will only minify your code when it detects that its in production!

```twig
{% set js %}
	{% include "source/_includes/partial-js/authentication.js" %}
	{% include "source/_includes/partial-js/scripts.js" %}
	{% include "source/_includes/partial-js/profile.js" %}
{% endset %}
{{ js | jsmin | safe }}
```
Quick tips: Persistent wrapper content in Next.js
Tags: nextjs, webdev
Published: 2021-04-30 17:44:49

## What kind of content?
Generally what comes to mind when thinking about some content that would stay constant across all or multiple pages, is a navigation bar. It can also be a header, some branding, or a menu.

This is easy to do with the `_app.js` component present in Next.js projects. If you created your project with `create-next-app`, you would have this component too.

![_app.js component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zff6ioush0ai4q890mql.png)

Creating a component that wraps around `<Component />` will get the job done.

## The wrapping component
Putting any component in the `pages` folder will create a new page. This component will not be a separate page on its own. So, create a new folder named `components` at the root of the project. Create a new file in it - `Layout.js`.

![Project folder structure after creating components folder with wrapper component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1jbknv7im8dgpjod602.png)

Writing a simple header like this:

![Wrapper component - Layout.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvw7kvn0alayl893t8ej.png)

and wrapping it around `<Component />` in `_app.js`:

![_app.js component after using the Layout.js wrapper component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tib3u0r1yaf3lspovu61.png)

it should show up on all pages. Run the project:

`npm run dev`

Here is a CodeSandbox. I added some styles to `Layout.js` and also some nav links. As you can see, the header (along with the newly added nav links or navbar) is shown on both pages.

{% codesandbox efrif %}
Firebase Alternative ?
Tags: firebase, supabase
Published: 2021-04-30 17:42:10

Firebase is not an easy thing to replace, it's a whole suite of tools that include things like authentication, real time database, serverless functions and sdk's that can easily tie this infrastructure together on iOS, Android and web.
let's compare Firebase and Supabase to see how they differ.

### Services
Supabase currently offers Database, Authentication, Storage and Functions. There are a lot of features missing from Supabase, like static site hosting, machine learning tools, push notification service and google analytics, so firebase has more features.

### Database
Supabase is a relational database, while Firebase is a NoSQL database. Both database types have their pros and cons. For instance, NoSQL databases are popular for search engines and social media feeds.
Choosing the right database for your app depends on what type of app you're building.

### Authentication
Authentication with Supabase is same as with Firebase. Your dashboard has all the data about your users and email templates.
The sign-in methods include email and password as well as all major OAuth providers. only the phone authentication is missing which you can find in Firebase.

### Pricing
both of them have a base free tier, which is only useful for experimentation.
When you build something serious on firebase, you use the pay-as-you-go plan, each individual service has a free tier, so that you only pay for what you use. Supabase has 8GB database storage and 100K users for $25 a month. in firebase you also pay for the number of reads and writes to the database but in Supabase it looks like you have unlimited api calls and network traffic to your database.

### Conclusion
Supabase only has a JavaScript SDK, on the other hand Firebase is extremely popular with mobile developers and you couldn't really call supabase an alternative to firebase until they release an SDK for iOS and Android.
Idea: Demorgan Type
Tags: wren, javascript, programming, discuss
Published: 2021-04-30 17:31:21

---
title: Idea: Demorgan Type
published: true
description: A new data type to consider negated 0 in Bools
tags: wren, javascript, programming, discuss
//cover_image: https://direct_url_to_image.jpg
---

[This conversation in Wren issues](https://github.com/wren-lang/wren/issues/991) made me search for an alternative naming for Bools that considers `0` as false.

In JavaScript `0` is `false`.

```js
(() => {
  const zero = Boolean(0);
  // false
  console.log(zero);
})();
```

In other languages like _Wren_, `0` is considered as `true`.

```js
var zero = 0
if (zero) {
   System.print("zero is true")
}
```

So as a way of standarizing, one idea is using the [Demorgan](https://en.wikipedia.org/wiki/De_Morgan%27s_laws) value as an alternative naming for Bools.

In a dream world all languages:

- `Bool` will consider `false`, `null`, `undefined` as false, everything else as `true`.
- `Demorgan` will consider `false`, `null`, `undefined`, `0` as false, everything else as `true`.

But since there are many languages with different implementations and considerations about what `0` means, an idea is:

- `Bool` will consider `false` whatever the language already considers `false`.

- `Demorgan` will consider `false` everything the language already considers `false`, except `0` which boolean value would be negated.

So in the JavaScript example:

```js
(() => {
  const zero = Boolean(0);

  // false
  console.log(zero);

  const negatedZero = Demorgan(0);
  
   // true
  console.log(negatedZero);
})();
```
NodeJS/Express – POST/GET form data to MySQL using Sequelize ORM – Ajax JQuery
Tags: node, express, sequelize, orm
Published: 2021-04-30 17:14:33

https://grokonez.com/node-js/nodejs-express-save-form-data-to-mysql-using-sequelize-orm-ajax-jquery-bootstrap-view

NodeJS/Express – POST/GET form data to MySQL using Sequelize ORM – Ajax JQuery + Bootstrap view example

In the tutorial, we show how to save form data to MySQL in NodeJS/Express application using Sequelize ORM with Ajax JQuery & Bootstrap view.

Related posts:
- <a href="https://grokonez.com/node-js/sequelize-orm-build-crud-restapis-with-nodejs-express-sequelize-mysql">Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL</a>
- <a href="https://grokonez.com/node-js/integrate-nodejs-express-jquery-ajax-post-get-bootstrap-view">Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view</a>

<!--more-->
<h2>Overview</h2>
<h3>Goal</h3>
<strong>Technologies</strong>
- NodeJS/Express
- Sequelize ORM
- MySQL
- JQuery Ajax
- Bootstrap

We create a NodeJS/Express project as below structure:

<pre><code class="language-javascript">
/NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL
	/app
		/config
			db.config.js
			env.js
		/controllers
			user.controller.js
		/models
			user.model.js
		/routes
			user.route.js
	/node_modules
	/resources
		/static
			/js
				getrequest.js
				postrequest.js
	/views
		404.html
		index.html
	package.json
	server.js
</code></pre>

Run above project then makes Post/Get requests, results:

-> Bootstrap view:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-results.png" alt="NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-results" width="419" height="565" class="alignnone size-full wp-image-12189" />

-> MySQL's table:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-database-tables.png" alt="NodeJS-Express-save-form-data-to-MySQL-with-Ajax-JQuery-Bootstrap-view-database-tables" width="429" height="245" class="alignnone size-full wp-image-12190" />
<h3>Demo</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S-4R9LTd0vs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h2>Practice</h2>
<h3>Setting up NodeJS/Express project</h3>
Create a folder: 'NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL':

<pre><code class="language-javascript">
mkdir NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL
cd NodeJS-Express-Ajax-JQuery-Bootstrap-MySQL
</code></pre>

Then init NodeJS project, see prompts:

More at:

https://grokonez.com/node-js/nodejs-express-save-form-data-to-mysql-using-sequelize-orm-ajax-jquery-bootstrap-view

NodeJS/Express – POST/GET form data to MySQL using Sequelize ORM – Ajax JQuery + Bootstrap view example
Decode data encrypted in Java in shell
Tags: java, aes, crypto
Published: 2021-04-27 10:32:03

---
title: Decode data encrypted in Java in shell
published: true
description: How decode data encrypted esing javax.crypto.Cipher 
tags: java, aes, crypto
---

I have to provide data available in an object storage encrypted by a Java application in a php site.

First of all I get the encrypted data using [rclone] (https://rclone.org/).

It's an easy tick with the sell command

```
rclone cat "xda:pre-xda-data/001136/00004578..zip"
```

when [rclone is properly configured](https://rclone.org/azureblob/).

Now the second step: decrypt the data. I was unable to use [openssl](https://www.openssl.org/): the password is [encrypted in a completely different way](https://stackoverflow.com/questions/11783062/how-to-decrypt-file-in-java-encrypted-with-openssl-command-using-aes).

At this point I wrote a small java program that received encrypted data from stdin and writes decrypted data to stdout.

```
import java.io.InputStream;
import java.io.IOException;
import javax.crypto.Cipher;
import javax.crypto.CipherInputStream;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.Charset;
import java.lang.IllegalArgumentException;
import java.security.NoSuchAlgorithmException;
import javax.crypto.NoSuchPaddingException;
import java.security.InvalidKeyException;

class Decode {
    public static void main(String[] args) throws NoSuchAlgorithmException, NoSuchPaddingException,InvalidKeyException,IOException {
        if (args.length != 1) {
            throw new IllegalArgumentException("Missing password");
        }
        String storageAesKey = args[0];
        byte[] raw = storageAesKey.getBytes(Charset.forName("UTF-8"));
        if (raw.length != 16) {
            throw new IllegalArgumentException("Invalid key size.");
        }
        SecretKeySpec key = new SecretKeySpec(raw, "AES");
		Cipher cipher = Cipher.getInstance("AES");
        cipher.init(Cipher.DECRYPT_MODE, key);
        InputStream input = new CipherInputStream(System.in,cipher);
        input.transferTo(System.out);
        input.close();
    }
}
```

At this point I can concatenate this two commands

```
rclone cat "xda:pre-xda-data/001136/00004578..zip" | java -cp /opt/javadecript Decode "password"
```

and execute the php `passthru` command

```
passthru ('rclone cat "xda:pre-xda-data/001136/00004578..zip" | java -cp /opt/javadecript Decode "password"');
```

Someone has a better idea?