teleren/devto huggingface dataset:
Micro Frontends Patterns#1: Introduction
Tags: microservices, javascript, microfrontends
Published: 2020-12-17 00:47:08

This series, titled Micro Frontends Architecture Patterns, is a systematic introduction to the details of various architectural patterns which includes Web Frontends, from Monolith to JAMstack, and Micro Frontends. I wrote this series for two reasons.

The first is that I believe that the scope of Web Frontends is becoming broader than before. It is rare(?) for a Frontend engineer to work only on the 'Frontends'. It is necessary to have a bird's eye view of the entire software architecture and to design interactions with other systems. At least, such a way of thinking is often useful. By summarizing the architecture related to the Frontends, I hope to help web development.

The second reason is that I believe that knowing the history and evolution of the architecture will help us understand Micro Frontends better. When a technology becomes a trend, there is a background and a problem to be solved, and Micro Frontends is no different, there are situations where they are effective.

This series is organized as follows.

- Introduction
- Micro Frontends in 3 minutes
- Monolithic Application
- JAMstack
- Microservice Architecture
- Isomorphic JavaScript
- Linked Application
- Unified SPA
- Client Side Composition
- Edge Side Includes
- Edge Side Composition
- Server Side Composition
- Build Time Composition
- Reading List

If you want to know about the architecture of Micro Frontends, I recommend you to start from `7.Linked Application`. Examples, reference books, articles, OSS, etc. are listed in the `14.Reading List`, so if you want to see the information with your own eyes, please visit there directly.

In addition, this series is expected to achieve the following

- [ ] Understand the architectural evolution of Web Frontends.
- [ ] Understand the architecture of Web Frontends and be able to select one depending on the situation.
- [ ] Understand the concepts and implementation patterns of Micro Frontends.
- [ ] Be able to use your time in a meaningful way(?)

Hope this will help you.

## What this series does not cover

- I will **not** explain Micro Frontends in detail. Please read the Micro Frontends in 3 minutes chapter for more information on this.
- I will not cover Frontends architectures such as MVVM or Flux.
- I will not cover non-Web platforms. Similarly, we won't cover technologies such as React Native that use web technologies.
- I have no intention to compare just 'libraries'.
Hanukkah at Anvil - All Eight Apps, Assemble!
Published: 2020-12-23 15:18:57

---
title: Hanukkah at Anvil - All Eight Apps, Assemble!
published: true
date: 2020-12-17 00:00:00 UTC
tags: 
canonical_url: https://anvil.works/blog/roundup-hanukkah-at-anvil-2020
---

# I Have A Little Web App, I Made It Out Of Python…

We promised an app for every night of Hanukkah, and we delivered! Anvil’s tools made it easy for us to develop a **new web app, built with nothing but Python** for each night.

Let’s look back on some of my favourites …

## Something practical:
![](https://anvil.works/hanukkah/img/how-many-candles/how-many-candles-screenshot-night-1.png)

#### How Many Candles?

[Daily emoji to remind you when to light the candles. Handy!](/hanukkah/how-many-candles)

## Something completely silly:
![](https://anvil.works/hanukkah/img/jumpers/jumpers.png)

#### Ugly Hanukkah Sweaters

Time to dress up? Our [beautifully ugly jumper designs](https://anvil.works/hanukkah/jumpers) provide inspiration...

## Somewhere in between:

(Depending on how seriously you take your latkes)

![](https://anvil.works/hanukkah/img/latkes/survey-page.png)

#### Latke Wars

[The wisdom of the crowd](https://anvil.works/hanukkah/latke-survey) will tell us what the empirically \*best\* latke topping is.

## And of course, the icing on the jelly donut:
![](https://anvil.works/hanukkah/img/electric-menorah/action-shot.jpg)

#### Electric Menorah A-Go-Go

[Light up your life with the power of Raspberry Pi!](https://anvil.works/hanukkah/electric-menorah)

We had a lot of fun putting together these apps, and we hope you’ve enjoyed following along! If you missed a night, there’s still time to take a look at our finished creations.

#### [Check out all the finished apps here!](https://anvil.works/hanukkah)
Gitalytics - A simple overview of Github activities
Tags: dohackathon
Published: 2020-12-16 20:13:39

---
title: Gitalytics - A simple overview of Github activities
published: true
description: My draft to the DigitalOcean App Platform Hackathon!
tags: dohackathon
series: Gitalytics Digital Ocean Hackathon
---

## What I am planning to build

A simple analytics like tool which will give overview of developer's Github activities based on mainly 2 inputs: username and date-range.

### Category Submission: Random Roulette

### Link to Source Code

{% github shhdharmen/gitalytics %}

### Permissive License: [MIT](https://github.com/shhdharmen/gitalytics/blob/main/LICENSE)

## Background

I got inspired from Spotify Year in Review feature and thought that developers should also see their 'Github Year in Review'.

### How I am going to build it

This is mostly going to be Angular app. I am planning to use: 

1. [Angular Material](https://material.angular.io/) for UI
2. [ng2-charts](https://www.npmjs.com/package/ng2-charts) for charts
3. [Bootstrap](http://getbootstrap.com/) for layout
4. [html2canvas](https://www.npmjs.com/package/html2canvas) for exporting images

With above, I will also need below thigs, which are new for me:

1. [Github APIs](https://docs.github.com/en/free-pro-team@latest/rest)
2. [Digital Ocean Platform](https://www.digitalocean.com/products/app-platform/)


### Additional Resources/Info

As I keep making progress, I will keep writing more articles in this series.
How to copy contents from one file to another file asynchronously in Node.js?
Tags: node
Published: 2020-12-17 00:00:00

---
  title: How to copy contents from one file to another file asynchronously in Node.js?
  published: true
  tags: Nodejs
  date: Thu Dec 17 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/copy-contents-from-file-asynchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-c01ca7995221d6dd75fc66b51d64a634.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/copy-contents-from-file-asynchronously-nodejs)
  
To copy the contents from one file to another file asynchronously, we can use the `copyFile()` function from the `fs` (filesystem) module in Node.js.

```js
// Copy contents from one file
// to another file Asynchronously
fs.copyFile(src, dest, () => {
  console.log("Copied Successfully!");
});
```

Let's say we have a file named `myFile.txt` from which we need to copy the content (called source file) and another file called `copyFile.txt` where we will have to write the copied contents (called destination file).

First, let's require the `fs` module and define the source and destination files like this,

```js
// require fs module
const fs = require("fs");

// source to copy content
const src = "myFile.txt";
// destination for copied content
const dest = "copyFile.txt";
```

To copy the file asynchronously we can use the `fs.copyFile()` function and pass three arguments to the function:

- `src` as the first argument
- `dest` as the second argument
- an error first callback function as the third argument that will get executed when contents are copied to the destination file.

It can be done like this,

```js
// require fs module
const fs = require("fs");

// source to copy content
const src = "myFile.txt";
// destination for copied content
const dest = "copyFile.txt";

// use copyFile() function
// to copy contents from source file
// and write to destination file asynchronously
fs.copyFile(src, dest, (error) => {
  // incase of any error
  if (error) {
    console.error(error);
    return;
  }

  console.log("Copied Successfully!");
});
```

- The destination file will be created even if it doesn't exist in the system and the copied contents will be placed there.
- If the destination file is present then the contents inside the file are overwritten during the process.

See this example live in [repl.it](https://repl.it/@melvin2016/copy-contents-file-asynchronously-nodejs#index.js).

### Feel free to share if you found this useful 😃.

---
Formatting currency with JavaScript Intl
Published: 2022-05-09 13:56:03

---
title: Formatting currency with JavaScript Intl
published: true
date: 2020-12-17 00:00:00 UTC
tags: 
canonical_url: https://carl-topham.com//articles/intl-number-formatting-currency
---

Javascript's Internationalization API allows you to format currency. It takes the locale and options to configure the currency we're using. The options require the style to be set to `currency` and a currency option to specify the unit type, as this is returned as part of the result.

```
Intl.NumberFormat("LOCALE", { style: "currency", currency: "CURRENCY UNIT"}).format(VALUE); // => "€1.23"

```

The following example formats a `EUR` (Euro) currency of the value `1.2345` into a `en-GB` (English - Great Britain) format.

```
Intl.NumberFormat("en-GB", { style: "currency", currency: "EUR"}).format(1.2345); // => "€1.23"

```

To save configureing this each time we use the formatting it can be wrapped in a function and the values passes to it. This example tahe the value and optionally a locale, defaulting to `en-GB`. It returns a `USD` value formatted to the input locale.

```
const formatUSDCurrency = (value, locale = "en-GB") => {
    return Intl.NumberFormat(locale, {
        style: "currency",
       currency: 'USD',
    }).format(value);
};


formatUSDCurrency(1230000) // => "US$1,230,000.00"
formatUSDCurrency(1230000, "de-DE") // => "1.230.000,00 $"
formatUSDCurrency(1230000, "fr-FR") // => "1 230 000,00 $US"

```

You can also [configure significant digits, plus/minus signs and other settings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) as needed.

You can either specify the locale yourself, as I have done above, or you can [get the user locale from the browser](/articles/javascript-user-locale/).
Installing MongoDB On Windows 10
Tags: webdev, database, javascript
Published: 2020-12-16 23:27:22

<h1><i>Installing and Setting Up MongoDB on Windows 10</i></h1>
MongoDB is a general-purpose, document-based, distributed database built for modern applications.
It is very popular since many developers think in terms of objects, and databases in MongoDB are just regular objects.
In this tutorial, we will discover how to install and setup the MongoDB shell, on a windows 10 computer.

Let’s Start

<h3>Step One</h3>
👉Head over to  <a href="www.mongodb.com">mongodb.com</a>
👉 Head to software, then community server. A small dropdown will appear, in the dropdown, select download community version. This will then direct you to the download page.


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

You can interact with MongoDB in multiple ways, The shell implicates manipulation of your database through the terminal.
Other options involve using the cloud ( MongoDB Atlas) and also using a graphic user interface ( MongoDB Compass).

<h3>Step Two </h3>
👉 Once the download completes. Head over to your download folder and double click it on the downloaded file, to kickstart your installation process.
The installation is classic. The option we will select is the complete setup. So as to ship all basic features, Then, we can simply leave out the defaults.

👉As soon as the installation is complete. Head over to your applications in the settings of your windows computer. You will see Mongo shell now listed as one of your applications.

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


 
🎉 Great!!! You now have the Mongo shell on your pc.

<h3>Step 3</h3>
In order to make MongoDB accessible everywhere, we need to add it to our environment variables.
👉 On the start menu, type env. You will see a popup, containing edit system environment variables. Click on edit environment variables.

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

 


Now click on it. You will see another menu, now click on environment variables. You will now click on the path system variable and add the entry to your mongo bin directory.
The directory looks like this C:\program files\mongo\server\4.2\bin

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


 

👉 Now head to your terminal and type mongo. You will be presented with the following screen.




 

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



🎉🍾🎊Congratulations!!!! You have successfully installed MongoDB shell on your computer.
CSS Grid Blog
Published: 2020-12-16 23:26:30

   CSS Grid is a system that offers a grid based layout system for aligning and positioning elements on a webpage. The first element of the grid system is the grid parent or container which splits itself into grid children which are where the components are situated. The code is structured as follows

```<div class="grid-parent">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
  <div class="grid-child">5</div>
</div>```

In order for this become a grid container we must edit its CSS to contain either grid or inline-grid.

```.grid-parent {
  display: grid;
}```

Now that we have the grid setup it is important to point out a few things. Firstly the grid is spilt into vertical columns and horizontal rows. Secondly that the different child elements are separated from each other with gap which can be modified in CSS either along the rows or columns.

```.grid-parent {
  display: grid;
  grid-row-gap: 50px;
}```

We can also use `grid-template-columns:` or 'grid-template-rows:' in order to specify the size of each row/column either automatically with `auto` or by pixel size. To make sure after all these modifications that the grid elements are still aligned evenly we can use `justify-content:`.

In order to determine where one of the child elements is placed along the rows/columns its CSS properties must be changed. One can either use grid-row or grid-column with a start-end number in order 

```.grid-child {
  grid-row: 1 / 4;
}```
     
We can also use grid-area to both name the item in question and as a shorthand for both grid-row and grid-column
Day 278 : I need you to
Tags: hiphop, code, coding, lifelongdev
Published: 2020-12-16 23:18:54

_liner notes_:
- Professional : Got my hackathon project done! Not just the JWT Validation tool, but also a another one that can create JWT's with different options so I could test the validation tool in different solutions. It was a good peaceful day. Just coded and walked around the park.

- Personal : Spent most of the night trying to get the live stream somehow to the YouTube channel. Discovered that it looks like it won't stream via the RTMP unless I'm in the YouTube console, which defeats the purpose totally. I want to use it as a back up and allow meetup organizers to stream so I don't have to be there. Having to log in make it so I have to be around for every meetup. Tried to (read, gave up trying) upload the video from the archive link to Firebase storage then maybe send to YouTube but I could only get a picture to work. I think the video kept quick because of the size, not sure. I'm going to try and the video to the server temporary storage and then upload from there. I have no idea how large these archive files will be. As a back up to the back up, I have been able to upload the archive to Vimeo successfully consistently. Looking at the YouTube API like, "I need you to be able to do the same".Even the archive link will stay active for a couple of days so that could be a back up of the back up to the back up. haha. Then I watched like half of a "Legion" episode before falling asleep.

![Sandunes in Canary Islands, Spain at sunset](https://dev-to-uploads.s3.amazonaws.com/i/h8vy7rsa1ggtg9l157iu.jpg)

Going to try and see if I can download the archive footage to the temporary storage of the server so I can upload it to YouTube. Got to remember to delete the file after because i read that can really screw things up. haha That's why it was my last resort. Been going through some tracks for the radio show. Downloading them while I'm using public Wifi so I don't have to use my phones' data. Not even going to say I'll watch an episode of "Legion". If I do, awesome. haha.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube qCzxWZVrtDc %}
My experience building backends with Booster Framework
Tags: serverless, node, aws, typescript
Published: 2020-12-16 22:57:02

When developing a new backend application, there is bunch of things we need to think about: 

* Which language am I going to use? 
* Do I need any framework? Which one?
* Do I know how to model my problem? (models, relations etc..)
* Where am I going to deploy my application? 
* What kind of DB do I need? (SQL, noSQL etc..) 
* How will I expose my service? 
* Do I need a cloud provider? Which resources do I need?

Needless to say this is overwhelming, specially nowadays with the amount of options available to solve each problem. 

The truth is that this is very time consuming. **Looking for the best posible available option is almost always a very expensive decision and it's a trap.** 

Instead, I believe it's always better to have a default choice. The problem is, how do we choose one? Well, it is basically an option we have high trust and confidence it will just work, something that is reliable to solve the problem you have. Once we have something working we can improve from there.

The key point here is that it is delusional to think that at the beginning of a project we should test all the posible solutions to make the best possible decision from the very beginning.  

I'm starting to think **my default choice to develop backend applications can be the Booster Framework.**

I'm mostly familiar with AWS when it comes to Cloud providers so let's imagine a regular development process 

* I open my IDE, start writing some code
* Open AWS console (or change terraform if using infra as code) then change some param in Dynamo DB
* Then I remember I need to change another params in my API gateway then I open another tab with the AWS console
* Then I go back to my code and forget what I was doing

Do you see where I'm going? This constant context switching between Infrastructure and Business logic (the code in my IDE) can be expensive and overwhelming specially at the beginning of a project or when crafting a prototype.

I needed to build an account backend application quickly, a simple backend to add and subtract values, get balances etc.. so I decided to do it with Booster, I was done in like 2 hours. I didn't need to think about Infrastructure. Everything is deployed seamlessly, no context switching, no AWS console tabs, no Infra to handle. In this sense, it is very similar to the Serverless experience we get when writing a Lambda function in AWS for instance, but this even goes beyond that. 

Give it a try https://www.booster.cloud/
React & Firebase: Authenticate a User with Email and Password
Tags: react, firebase, javascript, egghead
Published: 2020-12-16 22:34:33

# Note: With the release of v9 of firebase library, this post is now out of date.

My first egghead lesson is live! Go check it out! 👇

[Authenticate a User in React with Firebase](https://next.egghead.io/lessons/react-authenticate-a-user-in-react-with-firebase)
How I am scaling products creating organic growth!
Tags: startup, saas, node
Published: 2020-12-16 22:22:47

Hello dev.to community 

I am George, founder of multiple digital products.

You can find more about my products here:
https://deliverback.com
https://weship.gr
https://iqrate.pro
https://loopcv.pro
https://theroofrate.pro
https://fithabitscrm.app/

Do you see the purple chart in the image?
These are the impressions of one of those websites. As you can easily see from the graph, a couple of months ago we decided to start reaching out to other websites to link us, and we also started creating content in our blog. 

This made us start getting more clicks and more impressions!

I know that developers, consider writing content to be hard, but if you do that frequently you realize that it is an investment and that it will require 1-2 years or more to pay back but after that, you have organic traffic without any effort!

Reach out to me in my email george at loopcv dot pro 
I am super interested to learn more about you and see how we can build the next product together!
dynamic dns and ufw
Tags: vps, ufw, ddns, tutorial
Published: 2020-12-16 22:21:53

Github Gist Link: [Gist](https://gist.github.com/scotticles/143d67588924841deec873c26354044e) 

Own a vps? I scored over black friday and now have a ton of them for some projects. I ended up setting up wireguard on all of them and linking them all together. I have a raspberry pi in my home for my private container registry and hooked it up to the wireguard network.

I did not want to open up my wireguard port and any ssh port to the public.

I found a similar script like this on a google search, had to modify it for ufw to work and to do wireguard and ssh. My home router does a dynamic dns update and keeps that updated. If your router cannot do that, you can setup a pi or a script to run off your computer so when it boots up it will try to keep it up to date. 

UFW cannot accept a dns name, unfortunately. This script will require the `host` command, if your vps does not have that command, it is usually in bind-utils on ubuntu or dns-utils. Add in your hostname and ssh port, wireguard port. Run it manually first to verify it works and then cron it.

```bash
sudo chmod +x mydnsscript.sh
sudo ./mydnsscript.sh
sudo ufw status
```

You should see your home network ip allowed for ssh and wireguard.

**Here is the script:**

```bash
#!/bin/bash

#SET THE FOLLOWING

HOSTNAME=mydyndns.com
SSH_PORT=22
WIREGUARD_PORT=5246

#IF IT DOES NOT WORK, AT LEAST ON UBUNTU INSTALL, bind-utils to get the host command

#Create a cron /15 * * * * root bash /path/to/dynamicdnsupdater.sh

if [[ $EUID -ne 0 ]]; then
   echo "This script must be run as root"
   exit 1
fi
new_ip=$(host $HOSTNAME | head -n1 | cut -f4 -d ' ')
old_ip=$(/usr/sbin/ufw status | grep $HOSTNAME | head -n1 | tr -s ' ' | cut -f3 -d ' ')
if [ "$new_ip" = "$old_ip" ] ; then
    echo IP address has not changed
else
    if [ -n "$old_ip" ] ; then
        /usr/sbin/ufw delete allow from $old_ip to any port $SSH_PORT
        /user/sbin/ufw delete allow from $old_ip to any port $WIREGUARD_PORT
    fi
    /usr/sbin/ufw allow from $new_ip to any port $SSH_PORT comment $HOSTNAME
    /usr/sbin/ufw allow from $new_ip to any port $WIREGUARD_PORT comment $HOSTNAME
    echo UFW have been updated
fi
```

I use this so now my home network can reach my vps network via wireguard or ip and I can vpn into my home network to jump. Very cool!
I started YT channel!
Tags: java, springboot, apache, camel
Published: 2020-12-16 22:11:47

---
title: I started YT channel!
published: true
description: java java java java java java java java
tags: java,springboot,apache,camel
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b8106sdjyf67lnbs7z7r.jpg
---

Hello Programmer, Developers, Administrators, DevOps people and whatever you like to be called.

I started YT channel a couple of months ago.

IT'S ABOUT JAVA. VERY INOVATIVE, VERY NEW, MUCH WOW, SOMETHING WORLD DID NOT SEE.

Jokes aside.

If you are willing, take a look, leave a comment about what should be improved, what you like...etc.

Link: https://www.youtube.com/channel/UC0Ws7Fn3fTjZ9eKH87R_rKA

Gimme some love, gimme some hate, whatever is on your mind.

Stay safe and positive (you see what i did there),

George / Djordje