teleren/devto huggingface dataset:
A Module's implied index.ts file
Published: 2020-07-14 17:42:02

In Angular there's bit of confusion regarding modules.  Angular defined it's own module (@ngModule) system, borrowing import and export keywords. 

Don't be fooled; it's not the same thing as Javascript's much more simple Module system. 

**What is a Javascript module?**

Any file containing one or more  [export](http://www.ecma-international.org/ecma-262/6.0/#sec-exports) statements is a module.

The [import](http://www.ecma-international.org/ecma-262/6.0/#sec-imports) statement allows us to gain access to the code in that module. 

Simple for sure!

**The Index.ts file**

When we are developing multiple components in Angular we find out after a while, that we are tired of pointing the import to each component's full path. 

If we create an index.ts file in a folder of many components and export each module as shown below. Assume this is the content of the /components folder.

Index.ts under Component folder

```
export * from "./a";
export * from "./b";
export * from "./c";
export * from "./d";
```

We now have a listing of a folder's modules.

**The effect of an index.ts file**

From another module in our project we are able to do this:

```
//Example a
import {a,b,c,d} from "/components";
```
The index.ts is implied.
```
//Example b
import {a,b,c,d} from "/components/index.ts";
```
If you are using visual studio code, when you hover over "components" in "Example a" above, you will see the index.ts file magically appear!

The disgusting thing about this is the angular.module.ts file contains almost identical information. Plus it's exports section doesn't export in the same way.

JWP 2020
How to use MySql database on github.io
Tags: mysql, githubio, help
Published: 2020-07-14 17:18:58

---
title: How to use MySql database on github.io
published: true
description: 
tags: mysql, githubio, help
//cover_image: https://direct_url_to_image.jpg
---

Hello, I recently made app with php which is using mysql database, I was working on XAMPP localserver.
Is there a way I can host my app on my github.io pages? If not what are good alternatives?
Formik and Yup - React field validations
Tags: react
Published: 2020-07-14 17:16:40

Creating a form can be really simple. However, form validation can cause headaches and may result in stress.

Formik is a library that helps you to get values in and out of form states, handle form submissions as well as validation and error messages.

Yup is a JavaScript schema builder for value parsing and validation.

In this tutorial I walk you through validating your react form using Formik and Yup.

{% youtube ipta8IPtj5s %}
Some Important and Useful Javascript Information
Tags: javascript, webdev, codewithghazi
Published: 2020-07-14 17:01:51

I have posted some useful tips and information related to Javascript. 

Types of functions in javascript
{% instagram CCYG4qWncY8 %}

Top JavaScript utility libraries to use in your every project.
{% instagram CCbNPbznklI %}

How to remove duplicate values from an array.
{% instagram CCnvq1ynK9c %}

You can get more contents on Web Development:
Blog:- https://codewithghazi.com
Youtube:- https://www.youtube.com/channel/UCio7gIFilw6wsgbTZAVOBrg

Follow me on Insta and Twitter to get regular updates.
Instagram: @codewithghazi
Twitter: @codewithghazi
Software Developer Workflow 2020 (MERN Stack)
Tags: javascript, webdev, beginners, react
Published: 2020-07-14 16:45:58

*Useful Tools and Frameworks*

[ESLint - Pluggable JavaScript linter](https://eslint.org/)

[Jest · 🃏 Delightful JavaScript Testing](https://jestjs.io/) 

[React Testing Library · Testing Library](https://testing-library.com/docs/react-testing-library/intro)

[Mocha - the fun, simple, flexible JavaScript test framework](https://mochajs.org/)

[Chai](https://www.chaijs.com/)

[TypeScript - JavaScript that scales.](https://www.typescriptlang.org/)

[TSLint](https://palantir.github.io/tslint/)

*MERN Tech Stacks*

Mongo, Express, React/React Router, Node (create-react-app)

Mongo, Express, Next, Node

Mongo, Express, Gatsby, Node

* For small projects use React Hooks
* For small to medium projects use the Context API
* For medium to large projects use Redux or GraphQL

## Step 1: Project Setup
1. Create a Git Repo for the project
2. Create a Kanban Board Project using GitHub Projects, Notion etc...

### Design the App (Optional if you have a design already there is no need)
Using a design tool like Adobe XD, Sketch, InVison Studio, Figma etc...

## Step 2: Build App
1. Decide on the Technical Stack and folder structure (React, Redux, Next, Gatsby, Node.js, MongoDB, GraphQL etc...)
2. Decide on the CSS Layout Structure for the front end (CSS Grid , Flexbox, CSS framework (Bootstrap, Bulma, Tailwind etc...))

Use the Peacock Visual Studio Code extension to set the colour theme for the project. (Optional)

CSS: styled components or Sass/Stylus/CSS

Linting: ESLint

TDD/BDD: Jest and React Testing Library (Front-End) Mocha and Chai (Back-End) 

Code Formatting: Prettier

### TypeScript (Optional if you want to have better error checking for your code)
Linting: ESLint

Type Checking: TypeScript

## Step 3: CI/CD
[Gitflow Workflow | Atlassian Git Tutorial](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow)

1. Use Continuous Integration, Continuous Delivery and Continuous Deployment

CI/CD: GIT, GitLab, BitBucket, CircleCI, Travis CI, Jenkins, Heroku, Netlify, Now, Docker
Sum of nature numbers with JavaScript (3 ways)
Tags: javascript, math
Published: 2020-07-14 16:15:31

There are many ways to calculate sum of nature numbers. The basic method is for-loop (a simple way):

```
function sum1(n){
  var sum = 0;
  for(var i=1;i<=n;i++){
    sum += i;
  }
  return sum;
}
```

Another method is recursion. Since the sum is 1 + 2 + .. + n, we can easily get 

sum(n) = n + sum(n-1) 
and sum(n-1) = n-1 + sum(n-2) ... 
until sum(1) = 1. 

This also is a divide-and-conquer method. 

```
function sum2(n){
  if(n==1){
    return 1;
  }else{
    return n + sum2(n-1);
  }
}
```

The third way is more complex, using map and reduce. With JavaScript, the map function and reduce function are Array methods. 

First, we can use map function to create an array as [1, 2, ... n] :
```
[...Array(n)]
    .map(function(_, index){ 
      return index + 1; 
    })
```
Second, we can use reduce function to calculate the sum of these numbers:
```
[...Array(n)]
    .map(function(_, index){ 
      return index + 1; 
    })
    .reduce(function(acc, cur){
      return acc + cur;
    });
```

Let's play with repl.it: 

https://repl.it/@timhuangt/sumOfNatureNumbers

Happy coding!
How to use Laravel Blade @stack('scripts')
Tags: laravel, blade, tip
Published: 2020-07-14 15:08:29

I see a lot of people are not getting benefits from laravel blade fully. One of blade directive `@stack('scripts')` is very helpful when you have javascript need to execute in the child page. 

I create a fresh Laravel installation to demo an example. I have to make auth scaffolding with laravel/ui package because I'm using Laravel 6.


## What is stack('anyname') directive

Stack directive as self-explaining it stacks the scripts where you want to stack them. 

## How to use 

Let's say you have a master view and child views. And you have some javascript operations specifically related to child page may be an Ajax request. Now it is not good practice to put every javascript on the master page. It will slow down the speed because it is executing child pages scripts that don't need. 

So what we need to do, in our master page just before closing body tag make `@stack` like below code.


`    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" ></script>
    @stack('child-scripts')
`

Now in our child page, let's say home, you have alert specific to the child, how to do that


`@extends('layouts.app')`
`@section('content')`
`<div>I'm child</div>`
`@endsection`

`@push('child-scripts')`
    `<script>`
        `alert('I\'m coming from child')`
    `</script>`
`@endpush`

And alert is coming from child
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4u82wdi98atkeq4465wm.png)

## My thoughts: 

It is a very clean way of writing javascript. 
It improves code readability and performance.
And it will always go to the end of the page as recommended where you put `@stack`, directive does not matter from where `push` is coming.
First steps after Hashicorp Vault production deploy
Tags: devops
Published: 2020-07-14 15:54:13

For ones who happy after production Hashicorp Vault deploy and a little confused about what to do next ... because all youtube and article guides are happyending on vault deploy.

Here the plan:
1. Use your root token you've got after `vault init` to login the Vault: ```bash 
$ vault login <root token here>
```
2. Create base [policies](https://learn.hashicorp.com/vault/identity-access-management/iam-policies) with different permissions  (admin, provisioner) And write them down
3. Generate tokens for each policy ```bash
$ vault token create -policy="admin"
$ vault token create -policy="provisioner"
```
4. Create and attach kv storage engine ```bash
$ vault secrets enable -path=secret kv-v2
```
5. Login under you "provisioner" user and check secret creation ```bash
$ vault login <provisioner token here>
$ vault kv put secret/foo bar=baz
Key              Value
---              -----
created_time     2020-07-14T15:41:52.080464762Z
deletion_time    n/a
destroyed        false
version          1
```
6. Now you can get the key! 💥🍾🎉 ```bash
$ vault kv get secret/foo
====== Metadata ======
Key              Value
---              -----
created_time     2020-07-14T15:41:52.080464762Z
deletion_time    n/a
destroyed        false
version          1
=== Data ===
Key    Value
---    -----
bar    baz
```
Bitcoin Wallet in Python
Tags: bitcoin, python, blockchain
Published: 2020-07-14 15:40:46

In this article, we will create a bitcoin HD (Hierarchical Deterministic) wallet using python language. To learn how HD wallet works, you can check [this](https://medium.com/@harshagoli/hd-wallets-explained-from-high-level-to-nuts-and-bolts-9a41545f5b0) article.

# Prerequisite

* Python
* Basic understanding of programming

Download and install python’s latest version from its [official website](https://www.python.org/downloads/).

We need to install a python library called [bitcoinlib](https://pypi.org/project/bitcoinlib/#description) to create and manage bitcoin wallets. To install the library run following command.

```pip install bitcoinlib```

# Bitcoin HD Wallet with Python

Using HD wallets, we can generate a complete suite of crypto wallets for different cryptocurrency networks using just one seed. However, in today’s article, we will only focus on Bitcoin and how to create a simple HD wallet.

So let’s create our first Bitcoin HD wallet.

```from bitcoinlib.wallets import HDWallet
wallet = HDWallet.create('Wallet1')
key1 = wallet.new_key()
print(key1.address)```

In the above script, we are performing the following steps:

* Importing bitcoinlib library
* create a new wallet
* Generating a new HD Key.
* Create a new address

To run the above program, save it in a file with .py extension. (Ex- hd_wallet1.py). Then run that file using the command below.

# Bitcoin HD Wallet with Mnemonics

Mnemonics are very popular because they are easy to remember. Let’s see how to create a Bitcoin wallet using mnemonics.

```from bitcoinlib.wallets import HDWallet, wallet_delete
from bitcoinlib.mnemonic import Mnemonic
passphrase = Mnemonic().generate()
print(passphrase)
wallet = HDWallet.create("mWallet1", keys=passphrase, network='bitcoin')
key1 = wallet.new_key()
print(key1.address)```

In the above script, we are performing the following steps.

* Importing relevant classes from bitcoinlib
* Generating a random mnemonic, you can pass your own
* Creating a new wallet named mWallet1
* Generating keys
* Getting bitcoin public address

To run this program, save it in a file with .py extension. (Ex- hd_wallet2.py). Then run that file using the command below.

```python hd_wallet2.py```

To learn more about the bitcoinlib library check out the [official documentation](https://bitcoinlib.readthedocs.io/en/latest/).

Note: Never post your keys or mnemonic publically.
Has any jr devs implemented Anki / spaced repetition in their study habits?
Tags: discuss, watercooler, javascript, beginners
Published: 2020-07-14 15:36:23

If so, what has been your experience? I'm prepping for job interviews now, but find myself forgetting (at times basic) concepts week-to-week.

If not Anki, what did you find works best for you?
Free Cloud Architecture Design Consultancy (30 mins)
Tags: aws, devops
Published: 2020-07-14 15:29:09

If you're having problems designing a Cloud Architecture (AWS, GCP, Azure) or are new to it and need some help getting started you can schedule a one-to-one call of 30 minutes with one of the volunteers of GetAdvice.

Juan Manuel and Christian are the go-to guys for this kind of tasks

Juan Manuel: https://getadvice.github.io/juan.manuel.irigaray.juancho.jxoir.html 

Christian Melendez: 
 https://getadvice.github.io/christian.melendez.html

Disclaimer: I'm the guy behind GetAdvice (volunteers are needed!!). This is a way to promote getadvice.github.io and get more volunteers and users into the site too.
What is Diamond Storage?
Tags: ethereum, blockchain, solidity, smartcontracts
Published: 2020-07-14 15:11:05

From the [Diamond Standard](https://github.com/ethereum/EIPs/issues/2535):

> Since Solidity 0.6.4 it is possible to create pointers to structs in arbitrary places in contract storage. 

> This enables diamonds and their facets to create their own storage layouts that are separate from each other and do not conflict with each other, but can still be shared between them. 

## Learn more about Diamond Storage:

[Understanding Diamonds on Ethereum](https://dev.to/mudgen/understanding-diamonds-on-ethereum-1fb)

[New Storage Layout For Proxy Contracts and Diamonds](https://medium.com/1milliondevs/new-storage-layout-for-proxy-contracts-and-diamonds-98d01d0eadb)
Lessons learned while working as an architect
Tags: architecture, leadership, career, learning
Published: 2020-07-14 15:04:37

Over the last 12 years, I played role of solution architect on multiple projects. Here is summary of lessons I learned over the period.

## Need for embracing ambiguity

As a developer, our demand for clear requirements is very logical. As an architect, it’s totally different story. For most of the projects, the requirements aren’t clear, partner systems aren’t ready, business analyst is in dual mind, and despite all this chaos you are expected to come up with a strong design. At start (especially if it is your first assignment as an architect) this becomes very frustrating, but as you start to live with this ambiguity your approach becomes adoptive. One key trap to avoid here is to build a design to satisfy imaginary future requirements.

## Consistency in decision making with the help of guiding principles

Consistency will help you to quickly gain trust with team and customers. The guiding principles should be based on good practices, non-functional requirements, specific project needs etc. Note that principles should not be rigid but evolve over the period, and needs to be followed in the spirit (and not the text). As the team understands the reasoning behind your decisions and starts adopting the principles, bottleneck on you for every other decision will be reduced.

Some of the examples of guiding principles — “Lower memory footprint”, “Performance over data duplication”, or “No single point of failure”

## Be there on shop floor

There is no point in being a visio architect, who keeps churning out fancy diagrams. As an architect, you must work with engineering teams, let them be involved in decision making. If possible, do pair programming with them to get first-hand experience of their challenges and how your own design is getting implemented.

## Influencing without authority

Recently during a mentoring session, a senior developer told me that he doesn’t wants to be a manager because it involves lots of communication and interaction with others, but as an architect, he can work alone. This is a huge misconception. As an architect, one must learn to communicate and influence. As a manager, I don’t need to explain (most of the times) logic behind my decisions, I can simply dictate the things. But this is not a case with architect, you need to communicate to various stakeholders, understand each view point, influence developers/testers who don’t report to you.

On a lighter note, most difficult task as an architect is to convince developers and other parties to move to a better design from the current design, which you yourself has created few months (or days) back.

Thanks for reading, feel free to like, comment and share.
Responsive iframe without a parent container
Tags: css, embed, iframe
Published: 2020-07-14 14:57:42

If you've built a website you have had the problem: **make an iframe responsive**. Maybe it was a YouTube video, maybe it was a Google Maps embed. Whatever it was, you probably did it the most popular way: wrap the iframe in a `div` and use `padding` to maintain the aspect ratio. Like this:

```css
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```

# What if you can't add the wrapper div?

I was building the v2 of a blog with **150+ articles in 3 languages** and v1 was not responsive. I had to build the front end with this in mind, trying to avoid having to edit the content everywhere possible. As expected, **YouTube embeds weren't wrapped in any div** and changing them all would be ~~a pain in the ass~~ **difficult**. This was my solution:

```css
iframe {
  max-width: calc(100vw - (var(--margin) * 2));
  max-height: calc((100vw - (var(--margin) * 2)) / 1.7778); /* 16:9 */
}
```

Of course, you do need to know how your container behaves and any margins you have. In this case I'm taking into account horizontal margins with `var(--margin)`.

Here's a CodePen with a live example:

{% codepen https://codepen.io/pedrogpimenta/pen/abdWgaw %}

What do you think? What are the drawbacks? Do you see any potential problem with this solution?
Dark Mode 😎 in Chromium without any Extension 😎
Tags: showdev, webdev, productivity, chromium
Published: 2020-07-14 14:00:33

# Step-1
Open new tab and go to
```bash
chrome://flags/#enable-force-dark
```
# Step-2
The option will be marked with yellow.
Choose the option as shown below-
![S1](https://dev-to-uploads.s3.amazonaws.com/i/uxg9qw0hyajg38lvsuq8.png)
We are choosing this option to prevent inversion of images.

That's it for Dark Mode :)

# Step-3

Don't relaunch browser, Now in new tab open

```bash
chrome://flags/#prominent-dark-mode-active-tab-title
```
Now enable the option highlighted, **it will help in identifying the active tab**
![S2](https://dev-to-uploads.s3.amazonaws.com/i/76w69649twx9g97en04l.png)

---

# Awesome :), Retweet my tweet & Share it with others 

{% tweet 1283039193879519235 %}

---

Enjoy 😎😎😎😎
[Fun]-Spongebob Meme Cards
Tags: fun, youtube, memes
Published: 2020-07-14 14:34:08

Hey friends,
    I found a youtube playlist full of spongebob meme cards.
* spongebob meme cards are "One eternity later", "One hour later" video clips that can be added into any video!

Youtube playlist link - [Spongebob meme cards](https://www.youtube.com/playlist?list=PLGRMJyXiCaQsaubS3MldnaSIDW1chhdid)
---
* _Thank You_
What is holding back cryptocurrencies?
Tags: discuss, cryptocurrencies, blockchain
Published: 2020-07-14 14:32:42

Bitcoin (and the many other blockchain based currencies) have been in continuous operation for quite some time now; successfully demonstrating impressive technical solutions to very difficult problems.

That said, the day-to-day "common" person adoption and usage of these coins as actual currency has been limited. Why do you think that is? What is "holding them back" from becoming a normal currency that I purchase my week's groceries with?
[CP] :  Leetcode july 2020 challenge Solutions
Tags: codenewbie, computerscience, challenge, java
Published: 2020-07-14 14:31:24

This **leetcode** challenge is beginner-friendly & consists of 31 daily problems over the month of July. A problem is added here each day, and you have 24 hours to make a valid submission for it in order to be eligible for rewards.

For more information, check [this](https://leetcode.com/discuss/general-discussion/655704/LeetCode-Polo-Shirt-July-LeetCoding-Challenge!!)

# Challenge & Solutions link

[Leetcode challenge page](https://leetcode.com/explore/challenge/card/july-leetcoding-challenge/) : [Solutions](https://github.com/abhisheksurve45/leetcode-july-2020)

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

More such challenges can be found [here](https://github.com/abhisheksurve45/leetcode-july-2020)!




Thanks for reading!

Visit my github profile : [Github](https://github.com/abhisheksurve45)
Find me on Linkedin : [LinkedIn](https://www.linkedin.com/in/abhishekpsurve/)
Visit my personal page for connecting me : [abhisheksurve](https://abhisheksurve.netlify.app/)
Vanilla JS Responsive Message Box with Javascript Class
Tags: codepen, javascript, design, showdev
Published: 2020-07-14 14:28:31

<p>This Message Box is inspired by material design's toast message.</p>

<p>I used the VanillaJS (native Javascript) Class to implement the message box. This may not work on older browsers, due to compatibility issue with native class.</p>

<p>Usage:
1. Create MessageBox class instance:<br />
  let msg = new MessageBox("#id", option)<br />
2. Available options (type: Object):<br />
  a.  closeTime // Time before the message box closes (In milliseconds). 0 for persistent<br />
  b. hideCloseButton // To hide the close button.<br />
3. Call the "show" method to show the dialog box.<br />
  Params:<br />
    message // The message that will appear on the message box<br />
    label // The label of the close button (default is "CLOSE").<br />
    callback // Callback function</p><br />

{% codepen https://codepen.io/takaneichinose/pen/eZoZxv %}
Rename dist folder using postbuild in Angular9
Tags: angular, typescript
Published: 2020-07-14 14:26:47

Hi, We have an application in angular. We deploy a release of that application every week but due to cache, the clients are facing difficulties as some of the files are not refreshed with every new release. Now, as there are many options such as make a build using "ng build --prod" but as far as we have discussed, we want to make a different version of our build folder(dist folder) for every new build or wrap dist folder in a unique version folder. Is there any way to do so?