teleren/devto huggingface dataset:
Email Subscription Box using only HTML & CSS
Tags: newsletterbox, emailsubscriptionbox, subscribeboxdesign, subscribeform
Published: 2021-02-08 05:22:32

Hello all of you, today in this blog I'm going to create an Email Subscription Box by using only HTML & CSS. In my earlier blog, I have shared <a href="https://www.codinglabweb.com/2020/12/responsive-footer-html-css.html">How to Create a Responsive Footer Section</a> and it's time to design a subscription box.

In simple language, an email subscription form means a form where users need to enter his/her email address to subscribe to a particular website for getting notification of the latest updates from the particular website. Nowadays we can found this type of programming [Email Subscription] on various websites. It is literally an important and system for the viewers to give the newest updates information to the users by messaging his email account with the help of this type of subscription.

As you can see on the given image on the webpage about this program [Newsletter Subscription Form], on the top there is one logo of email, downward of the logo there are some text and one input field for entering user email id and one button named as "Subscribe". Actually, in this programming [Email Subscription Form ], I have added some effect in the input field which appears when we click on the input field, and also I have to give hover animation on the button.

You Might Like This:
<a href="https://www.codinglabweb.com/2020/12/animated-login-form-using-html-css.html">CSS Animated Login Form</a>
<a href="https://www.codinglabweb.com/2020/11/responsive-login-form-using-only-html.html">Responsive Login Form Form</a>
<a href="https://www.codinglabweb.com/2021/01/responsive-registration-form-in-html-css.html">Responsive Registration Form</a>
<a href="https://www.codinglabweb.com/2020/12/login-form-with-icons-using-only-html.html">Login Form WIth Social Media Icon</a>

Email Subscription Box [Source Coode]
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2020/12/email-subscription-box-using-only-html-css.html">Click Here To Download All Source Code</a>
Validating my approach to upskilling
Published: 2021-02-08 02:59:43

I am taking on a new senior role soon. I wanted to validate my thought process and approach for up-skilling before I start in the new org. 

I believe I should cover areas of principles (design patterns) as well as build competency with one of the stacks used in house (chosen MERN for starters)

The way I see it, I should be time slicing between reading theoretical stuff and learning by building. I intend on spending 20% of my time on theory and 80% on building

- Design Patterns: Reading "Patterns of Enterprise Application Architecture" by Martin Fowler
- MERN Stack: following the course https://www.udemy.com/course/mern-stack-e-commerce-mobile-app-react-native-redux-expo/
  - by virtue of building, I will also end up doing a lot of reading of documentation

Any advice on the approach? What would be a better "bang for buck" if the outcome im looking for is "competence, confidence, gain credibility when I join"

I'm not married to the strategy so am open to ideas.
98. Validate Binary Search Tree

Published: 2021-02-08 05:19:02

###Description:
Given the root of a binary tree, determine if it is a valid binary search tree (BST).

A valid BST is defined as follows:

The left subtree of a node contains only nodes with keys less than the node's key.
The right subtree of a node contains only nodes with keys greater than the node's key.
Both the left and right subtrees must also be binary search trees.

###Solution:
Time Complexity : O(n)
h = height of the tree
Space Complexity: O(h)

```javascript
// Depth first search approach
var isValidBST = function(root, min = null, max = null) {
    // Base case
    if (!root) return true;        
    if (min!==null && root.val <= min.val) return false;
    if (max!==null && root.val >= max.val) return false;
    /// Verify the left and right subtrees are binary search trees.
    return isValidBST(root.left, min, root) && isValidBST(root.right, root, max);
};

```
Clustering Nest.js
Tags: typescript, node, javascript
Published: 2021-02-08 05:16:36

Server Clustering is a method of turning multiple computer servers into a cluster, which is a group of servers that acts like a single system. Its different with Load Balancer. Load Balancing is about the distribution of workloads across multiple computing resources, such as computers, server clusters, network links, etc.

In general, the cluster maximizes the processor performance of the server. If you have 8core processor, you can make it all work as cluster or you just need 2core, you can set it up.

This time, I will talk about how to create clusters for nestjs. As you know, Nestjs is a framework that can be relied on to build applications such as Rest API. I won't go into detail about the concept but will get straight to how it works.

##Installation
For Nestjs Installation, you can look in the [documentation](https://docs.nestjs.com/). After you made it all, create `app-cluster.service.ts` in `src/` directory.

```javascript
import * as cluster from 'cluster';
import * as os from 'os';
import { Injectable } from '@nestjs/common';

const numCPUs = os.cpus().length;

@Injectable()
export class AppClusterService {
    static clusterize(callback: Function): void {
        if(cluster.isMaster){
            console.log(`Master server started on ${process.pid}`);
            for (let i = 0; i < numCPUs; i++) {
                cluster.fork();
            }
            cluster.on('exit', (worker, code, signal) => {
                console.log(`Worker ${worker.process.pid} died. Restarting`);
                cluster.fork();
            })
        } else {
            console.log(`Cluster server started on ${process.pid}`)
            callback();
        }
    }
}

```

Then, you can called it in `main.ts` in `src/` directory.

```javascript

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { AppClusterService } from './app_cluster.service';
 
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}

//Call app-cluster.service.ts here.
AppClusterService.clusterize(bootstrap);
```

Now, run you app using nodemon or pm2. I used PM2 to run the project. `pm2 start dist/main.js -i max`. `-i max` as a sign of how many cores we will use. If `max`, that means all we will use. Or you just change the `max` with specified number. (Note: run `npm run build` to generate dist directory.)

a. Using `max` resources.
![image](https://dev-to-uploads.s3.amazonaws.com/i/uuo2e5f6sodr9uvo6a0p.png)

b. Using specified resources. e.g `4`
![image](https://dev-to-uploads.s3.amazonaws.com/i/o3k7psp56tf7ckucl9ed.png)

If either worker crashes or dies, it will be automatically moved to the live worker as the server prepares a new worker to replace the crashed worker.

Github Repo : [https://github.com/danudenny/nestjs-cluster](https://github.com/danudenny/nestjs-cluster)


------------------
I want to discuss further about this, maybe there is a statement from me that is wrong or maybe there is a suggestion to be more effective and efficient.
Mastering Rails 
Published: 2021-02-08 05:07:35

Rudy on Rails was def a fun project for me. I really got to see all of the concepts come together, literally. From routes/ nested routes to form_fors, everything was was fit together like a complicated puzzle. 

I normally have a smooth experience but this time was different. This was the first time that I was plagued with laptop issues. It got so bad my terminal froze up on me and I have to kill and restart my server if I wanted to see ANY changes made to my code! This has cost me valuable time. 

I had to make do with what I had and push through. The hardest part was not to get discouraged. The defeat was looming over my head as I try to meet this deadline. I made a concise decision to not stress and to focus on the code and the rest will work out..... well so far it hasn't.
Gas Field Production Project. Part 1
Tags: python, datascience, machinelearning
Published: 2021-02-08 04:36:35

<span>Photo by <a href="https://unsplash.com/@kobuagency?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">KOBU Agency</a> on <a href="https://unsplash.com/s/photos/data?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

Here I will briefly describe Data Collection and Exploratory data analysis (EDA) process for the gas field production project. After researching a few oil and gas fields, I selected Lakeshore Gas Field (NY) for my project, as it was a gas field with around 4000 production wells.  Using dynamic web scraping I collected field data and yearly water, gas, and oil production data for each well.  As we can expect the data does not have many physical or extraction properties, e.g. pressure, well fracking, or other stimulation and maintenance activities. There are some options to generate pseudo-pressure values by using petroleum engineering models(e.g. by making some assumptions of the initial reservoir pressure and using production data-volume and mass). At this stage, the data we have is enough to do the EDA. 

Here is some elevation data of the wells.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/22m95p9bjumvr0rswkee.png)

I plotted below the data related to the gas and water produced.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qaqywbalqg14d8y3etq1.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mwf5h5lx7d2j1tbaiqbd.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z4ze5hltfhzuw3gvbzb4.png)


As we could expect, the gas production drops with time (as reservoir pressure drops) even with increased number of the active wells and stimulation activities.
Fifth-week Javascript
Tags: beginners, programming, javascript
Published: 2021-02-08 04:13:35

Hi Everyone!! It has been 5 weeks since started doing Javascript. the topics which I covered during this week are the same which I have covered in my 4th week because I need to solid those concepts and so I decided to give this week as well. the new thing which I did this week, was to implement these concepts to make a to-do list project as well as further I will try to learn Html, CSS, and SQL  and implement these in the same to-do list project. I think it would be a better approach to learn new concepts for me right now. I think it helps me a lot when I implement what I learned because only then you know, how well you know the covered concepts.


Thanks for reading!!
我是中国人
Published: 2021-02-08 04:10:17

sdfsdfsdfsdf
sdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdfsdfsdfsdfsdf

sdf
sd
f
sdf
sd
fd
f
sdf

sdf
sd
f
sdf
sd
fd
f
sdf
alacritty-themes 3.0 released with Live Previews
Tags: productivity, alacritty, terminal, shell
Published: 2021-02-08 04:04:51

# :rainbow: alacritty-themes :lollipop:

In this post, we are going to take a look at the changes made in the latest release 3.0 of alacritty-themes. If you want to take a look at the launch blog post for alacritty-themes, you can find it here.
{% post https://dev.to/rajasegar/alacritty-themes-a-cli-tool-to-set-themes-for-alacritty-terminal-144c %}

## Install

Install the `alacritty-themes` cli globally with  Node.js package managers like [npm](https://npmjs.com), [yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.js.org/)
```
npm i -g alacritty-themes
```
With yarn
```
yarn add --global alacritty-themes
```

With pnpm
```
pnpm add --global alacritty-themes
```

If you are using `npx` you don't have to install the package:

```
npx alacritty-themes
```
## Live Previews
This release features one of the most asked functionalities called the Live Previews, which allows us to preview a particular theme before applying it. You can scroll up and down using the arrow keys and the theme will be automatically previewed inside the terminal window. Once you are happy with a theme, you can press `Enter` to apply them or `Ctrl-C` to cancel.

{% youtube cu2Cb4c3w7w %}

## Command line flags for Themes
With the new release you can directly apply a theme if you know the theme name without going through all the hassle of searching for the themes using the command line option.
```
alacritty-themes Dracula
```

## Create alacritty.yml config file
The tool requires a config file to be present in your `$HOME` directory called `alacritty.yml`. Usually it will be somewhere like `~/.config/alacritty/alacritty.yml`. If you don't have one, you can now create it using the cli by using the `--create` or `-c` option with the cli to do the same.

```
alacritty-themes --create
```

## Other changes
We have replaced [inquirer](https://github.com/SBoudrias/Inquirer.js) with [prompts](https://github.com/terkelg/prompts) as the command-line prompt in this release. prompts is a lightweight, beautiful and user-friendly interactive prompts library for your cli programs. It has got a lot of inbuilt prompt types for autocomplete, multiselect and so on.

So what are you waiting for, go install [alacritty](https://github.com/alacritty/alacritty), give  [alacritty-themes](https://github.com/rajasegar/alacritty-themes) a try and spice up your terminal. I am pretty sure, once you started using alacritty as your terminal, you won't go back for anything else. Please let us know your feedback/queries in the comments section.
CompileSwift Podcast -Vidcast - Season 2 Episode 11
Published: 2021-02-09 16:42:26

---
title: CompileSwift Podcast -Vidcast - Season 2 Episode 11
published: true
date: 2021-02-08 04:00:00 UTC
tags: 
canonical_url: 
---

I am trying something new this week. You can choose between the audio only version of the podcast or watch the video version that provides a visual delight of all the content discussed in the episode.

Which do you prefer? [Let me know](https://compileswift.com/).

[Play the audio here](https://anchor.fm/compileswift/episodes/Xcode-12-5-Beta--Swift-5-4--Testing-Tips--SwiftUI-Loops--Homebrew-3-0-0-eq36pp)

## Show Notes

- [Link to the video version of this episode](https://youtu.be/HCDMx8G_nM0)
- [Apple’s Mixed reality Headset](https://9to5mac.com/2021/02/04/apple-mixed-reality-headset/)
- [Homebrew 3.0.0](https://brew.sh/2021/02/05/homebrew-3.0.0/)
- [XCTest Tips and Tricks](https://masilotti.com/xctest-tips-and-tricks/)
- [What’s new in Swift 5.4](https://www.hackingwithswift.com/articles/228/whats-new-in-swift-5-4)
- [Xcode 12.5 beta](https://developer.apple.com/documentation/xcode-release-notes/xcode-12_5-beta-release-notes/)
- [Skeletonview Swift Package](https://github.com/Juanpe/SkeletonView)
- [Move the Xcode minimap](https://www.youtube.com/watch?v=TVCOsX2bad4)
How To Install Angular And Set Up First Angular Application ?
Tags: angular, cli, node
Published: 2021-02-08 03:55:46

 install and set up Angular on windows 10 OS. In this tutorial guide, you will explore how to install angular CLI on windows.

Angular is an open-source, front-end web application development framework. This framework developed by Google, this framework is TypeScript-based and led by the Angular Team at Google.

In this tutorial, we will cover the installation procedure of angular on the windows 10 OS.

[How To Install Angular And Set Up First Angular Application ?
](https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html "How To Install Angular And Set Up First Angular Application ?
")

```
npm install -g @angular/cli
```

original source: *[https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html](https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html "https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html")*
How To Create Angular Components In Angular 10/11 Using CLI
Tags: angular, node, cli
Published: 2021-02-08 03:47:37

will learn how to create angular components or Use ng generate component using CLI for creating angular components in your project. 

we'll learn the very easy command to generate code how to use the ng generate component command of Angular CLI, or its ng g c shortcut command, Learn this tutorial.

First of all, If you are new to these how-to, check out *[how to install and set up an angular project.](https://www.phpcodingstuff.com/blog/how-to-install-angular-and-set-up-first-angular-project.html)*

**[How To Create Angular Components In Angular 10/11 Using CLI](https://www.phpcodingstuff.com/blog/how-to-create-angular-components-in-angular-using-cli.html)**

```
ng generate component about
```

original source: *[https://www.phpcodingstuff.com/blog/how-to-create-angular-components-in-angular-using-cli.html](https://www.phpcodingstuff.com/blog/how-to-create-angular-components-in-angular-using-cli.html)*
Code Smell 62 - Flag Variables
Tags: programming, oop, webdev, tutorial
Published: 2021-02-08 03:16:06

*Flags indicate what happened. Unless their name is too generic.*

# Problems

-  Readability
 
- Maintainability

- Coupling

# Solutions

1.  Use meaningful names

2. Try to avoid flags. They generate coupling.

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/694068de9cd2bbb8592d1a14bd89fe9e %}

## Right

{% gist https://gist.github.com/mcsee/8a0de13a6fb13ae4da9c51a1b91c9705 %}

# Detection

We can search all the code for bad named flags.

# Tags

- Readability

# Conclusion

Flags are widespread on production code. We should restrict their usage and use clear and intention revealing names.
 
# Relations

{% post https://dev.to/mcsee/code-smell-51-double-negatives-4fh0 %}

{% post https://dev.to/mcsee/code-smell-07-boolean-variables-3koj %}

# More Info

[Wikipedia](https://en.wikipedia.org/wiki/Boolean_flag)


* * *

> If you lie to the compiler, it will get its revenge.

_Henry Spencer_

* * *
Benefits of using async await
Tags: programming, functional
Published: 2021-02-08 02:44:28

Async functions are functions declared with the async keyword, the await is used within the functions scope. Putting the async before the function simply means that it will always return a promise and other values will be wrapped in a resolved promise. Using them allows asynchronous behavior based on promises. This means that what the promise of the function returns will be cleaner and avoiding the need to configure promise chains.

    async function foo() {
      return 1
    }

is similar to 

    function foo() {
      return Promise.resolve(1)
    }


Await keyword waits until that promise settles and returns a result. If the await is used outside a async functions body, it will throw a SyntaxError. *"Code after each await expression can be thought of as existing in a .then callback. In this way a promise chain is progressively constructed with each reentrant step through the function. The return value forms the final link in the chain."*(MDN, await 2005-2021, online doc)


In this article, it explains different ways you can use async tasks :https://dmitripavlutin.com/javascript-async-await/
Project 42 of 100 - React & Firebase Half-Stack Blog
Tags: javascript, react, 100daysofcode
Published: 2021-02-08 02:29:49

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-42-react-firebase-blog.netlify.app)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-42-react-blog-site)

I remember when I first started this 100 projects in 100 days challenge- all the way back on Halloween- someone commented '...A new project a day is a big commitment for sure! What if you get engrossed with an idea and want to spend more time on it, rather than just a day?' I responded politely but essentially waved it off; I had a plan.

He was right.

The '100 projects in 100 days' challenge is *significantly* different from 100 days of code. I code every day. I do web dev for my job and could write a short blurb about what I do there each day. That would be a no-brainer. The 100 projects challenge- for comparison- forces you to publish a complete working project, and practice every part of the project lifecycle from conceptualization to program design to deployment each day. 

If you include styling, and are working on a new skill you're actually learning as well, in my opinion signing up to do a new project *while* you're learning means anywhere between 3-5 hours of additional work per day. Since I'm sometimes slow getting up to speed and often rewatch coding videos for better understanding, learning something new might be a 2-3 hour daily undertaking so doing a project on top of that is incredibly hard.

For this project I took all of the last week and completed this Udemy tutorial (link here) on building a full-stack blog with React for the front-end, Firebase for the authentication and database, and Ant Design for the UI library. It also made use of React Router.

I'm not going to go into a ton of detail here. Suffice it to say I am enjoying working with Firebase and getting used to using React with Hooks on a daily basis.

See you tomorrow for a smaller project and don't forget to follow my dev twitter www.twitter.com/jwhubert91 for code updates.
1. What is Design?
Tags: design, webdev, css, computerscience
Published: 2021-02-08 02:17:34

hi everyone!

Today I talk about design !. According to my understanding design is the solution.
Design is not like colors, beautification things etc.

Example: Like I want to sit!

I can sit on the bed or I can sit on the floor but that's very hard to sit. so I think and design a chair for sit.
*The chair is actually Design!!!*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8enon47unafjgqhqgmte.jpg)
**Types of Design**
According to my understandings, there are mainly two types of design!
Aesthetic
Functional

**Aesthetics design** is used for pleasure like songs (yeah songs are also design) mood etc...

**Functional design** is used for functional work like (no parking sign on-road) etc...


in last you also hear about UX and UI so
UI is an aesthetic design
UX is a Functional design

Firstly we focus on functional design and then aesthetic design!
*A good design is the combination of both designs!*