teleren/devto huggingface dataset:
5 ways to use microforntends
Tags: javascript, microfrontends, microservices, webdev
Published: 2022-01-08 13:34:10

## What is microfrontend:
In short, it's a way to a way to apply the microservice principles to frontend applications, this will give multiple benefits like Autonomous teams, Easier maintenance, independent deployments, and flexible tech choices.

The best use for microfrontend architecture is when you have a large-scale application and a large team working on it and you want to divide to conquer, otherwise adopting microfrontend architecture will be overkill.

**1. iFrames**
The old good iframe tag, you can use anywhere on your page, you need to make sure this header is enabled on the page you want to include as an iframe
_X-Frame-Options: ALLOW-FROM https://example.com_

You can pass data from the parent page to the iframe in two ways:

- Url params
- [Postmessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 

**2. Javascript bundles**
Include any javascript file written in any framework to your page at runtime, and make sure that this file will render itself in a specific div you will create in a certain place in your original app
You can include CSS files in the same way, or include [manifest.json](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) file which reference all your JS and CSS files (if you have multiple javascript and CSS files) and it will load all needed files automatically 

**3. Zones**
Feature in Next.js lets you reference another project as a page in the main app using redirects, if you are not using Next.js you can achieve that using Nginx as well.
Since the main app and all the zones are on the same domain, they will share the cookies so you can do authentication on the main app and the other apps can read the auth cookie

**4. Module federations**
A new feature in webpack 5, allows you to export one of your components and use it in another app and import it like any other component in the app, any update on the federated component will reflect all consumers at runtime

**5. Other dedicated frameworks**
There are number of frameworks designed to build microfrontends like
https://bit.dev/
https://single-spa.js.org/

### Demo
I created a small demo used Zones and Module federations
I this demo there is 2 Zones, Home and Products, and I exported the top menu bar as federated module from Home app and used it in both Home and Products
Also using next-auth library I created a simple auth and since and it's shared between two zones

**Demos**
https://mfe-shop-home.vercel.app/
https://mfe-shop-products.vercel.app/products

**Code** 
https://github.com/adelhamad/micro-frontend-shop


Further reads
https://www.facebook.com/notes/10158791368532200/
https://dev.to/luistak/cross-micro-frontends-communication-30m3
https://micro-frontends.org
https://martinfowler.com/articles/micro-frontends.html
https://indepth.dev/posts/1477/taking-micro-frontends-to-the-next-level#third-party-micro-frontends
Getter & Setter in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-01-08 11:52:52

Getter and Setter are property which are defined inside object/classes. both are the type of function, by which we can get and set value of property in object.

Before going to details of Getter & Setter, first let see why do we need this.

## Why we need?

suppose you have following Student object,

```
let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  }
}
```
Now you want to calculate total marks. 
some of the way to get total marks are,
1. `const total = Student.marks.python + Student.marks.js;`

2. creating **getTotalMarks** method in Student object

```
let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  },
  getTotalMarks() {
    return this.marks.python + this.marks.js
  }
}
```
and by calling **Student.getTotalMarks()** we will get the total marks

Above solution works. but syntax is not cleaner ( [Getter & Setter have many advantages over traditional method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#smart_self-overwriting_lazy_getters) ). How if we get total marks, simple as property name? like **Student.totalMarks**. 

Here getter are come into picture.

```
let Student = {
  name : 'Getter',
  marks : {
    python : 80,
    js: 85,
  },
  get getTotalMarks() {
    return this.marks.python + this.marks.js
  }
}
```
and now we can get total marks simply as,
`const total = Student.getTotalMarks;`


## 1. Getter :
below is the description of Getter from MDN,

> Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter.

Getter function are declared with **get** keyword,
e.g : 

```
{
    get functionName() {}
}
```
[Click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to read more about Getter

## 2. Setter
1. all properties/advantages of **Setter** are same as **Getter**. Except Getter are used to get computed value from object where as **Setter** are used to set desirable value to property.

2. Setter function are declared with **set** keyword,
e.g. : 

```
{
   set functionName() {}
}
```

3. Below is sample program using Setter,

```
let Student = {
  name : 'Setter',
  marks : {
    python : 80,
    js: 85,
  },
}
```
Now, suppose we want to ensure that user must enter marks between 0 - 100. so, for this we can use Setter function

```
let Student = {
  name: "Setter",
  marks: {
    python: 80,
    js: 85,
  },
  set pythonMarks(mark) {
      if(mark <= 100 && mark >= 0 ) {
          this.marks.python = mark;
      } else {
          throw new Error("Please enter python mark between 0 to 100")
      }
  },
};
```
Now, whenever user try to set python marks greater than 100 or lower than 0 it will throw error

[Click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) to read more about Setter
My recommended way to install composer on linux ubuntu if you use xammp
Tags: laravel, linux, xammp, composer
Published: 2022-01-08 13:30:17

Hi, the following technique you are about to employ will save you time having to install **php-cli ** via apt-get and php extensions on your linux when xammp already comes with php as a bundle.


Requirement:
1. You already [installed xammp](https://vitux.com/ubuntu-xampp/)
2. Make sure you have followed step one...lol 

## Installing Composer
To install composer run the command below 
```javascript
sudo curl -s https://getcomposer.org/installer | /opt/lampp/bin/php
```
After installation, we'll have to symlink php bundle that comes along with xampp after which we run the command below to allow  'composer' command to run globally (this will run from within the folder where you've just installed composer in which a composer.phar file has just been created):

```javascript
sudo ln -s /opt/lampp/bin/php /usr/local/bin/php
```
Next, we'll run the below command to allow composer to reflect globally in the system
```javascript
sudo mv composer.phar /usr/local/bin/composer
```
## Bonus
If you already installed composer via apt-get but wish to use the xammp php bundle (since composer must require php-cli), you can do that by adding XAMPP php to environment variables. 

Run the following command: 
```javascript
export PATH=$PATH:/opt/lampp/bin
```
Yep....That's all! Let me know your thoughts!

[Reference](https://askubuntu.com/questions/604522/install-composer-and-configure-with-xampp)

You can reach me out on [Twitter](https://twitter.com/jovial_core). I'm on 
[Linked too](https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/)
A very useful resource about Design patterns
Tags: programming, productivity, beginners, architecture
Published: 2022-01-08 13:27:51

For the past few weeks I've been delving into the topic of Design Patterns through a very useful website called refactoring.guru .
This resource has proved to be of great quality, the examples are very simple and easy to understand being all taken from real cases in addition to the way of explaining is very clear and concise, i suggest it to every beginner to start to learn programming.
So I decided to buy the book of the author of the website: "Dive into Design Patterns" by Alexander Shvets.
Reading that I recommend to all programmers who want to deepen this important aspect of programming (also the site provides everything you need, but in the book obviously deepens).
Has anyone read it? Opinions?


![Design pattern catalog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uykp9zr3vmlatxsyqo7f.jpeg)
Demo Swing y API REST
Tags: java, rest, front
Published: 2022-01-08 13:27:06

Por mucho tiempo, hemos considerado una aplicación de escritorio como Cliente/Servidor; donde el "Servidor" es una base de datos.

Sin embargo, con el creciente uso de servicios; surge la necesidad de conectarnos e interactuar constantemente.

Dependiendo de la necesidad y el caso de uso, podemos emplear:
- gRPC
- GraphQL
- WebSocket
- API Rest
- SOAP

El estándar actual es utilizar Rest/JSON. 

---
Desde Java 11 nos provee un nuevo (y mejorado) HTTP Client. 

Para agregar nuevos registros, envíamos los datos mediante una petición **POST**.
{% gist https://gist.github.com/edgargs/28f6de603f03895a12e075907cefbf3a file=FacadeAdd.java %}

```bash
201
{"id":1,"title":"New book from Swing","pages":250}
201
{"id":2,"title":"New book from Swing","pages":250}
201
{"id":3,"title":"New book from Swing","pages":250}
``` 

Recuperamos el listado, al invocar el método **GET** y lo mostramos en la grilla.
{% gist https://gist.github.com/edgargs/28f6de603f03895a12e075907cefbf3a file=FacadeRefresh.java %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isztjvp29uqf9p496pkn.png)

---
## Documentación
https://www.baeldung.com/java-9-http-client
[SwingApp-Front](https://github.com/edgargs/WelcomeProject)
💡 7 Tips for Successful Freelancing Career
Tags: career, webdev, javascript, beginners
Published: 2022-01-08 13:25:58

🎯 Identify your niche and learn the right skills for the specific niche.

💼 Build an attractive portfolio

🌐 Grow your online presence

📣 Ask for referrals don’t wait for them

🤝 Cultivate repeat business so that you can get regular work from pervious clients

💰 Know your worth and charge accordingly

🛠️ Revise your rates, portfolio and skills regularly

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me on [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
Mood Quote bot!
Tags: beginners, python
Published: 2022-01-08 13:21:26

My first python project (a very simple one!). 

**What is it?**
A bot that gives you a quote depending on how you are feeling. 

**How it works?**
The bot asks for your mood (happy, sad, giving up), you give your input and it will respond you with a quote! 

**Code details:**
1) A dictionary with **moods** as keys and a **list of quotes** as values.
2) The user inputs their mood as asked. 
3) In a function, using the **module random**, we randomly get a number that will be used as an index to the list of quotes - that depends on the mood the user inputs .
4) The function returns the quote! 

**Link to my code:**
> https://github.com/jellayee/Project-1
Command Line Courses?
Published: 2022-01-08 13:20:49

I’m trying to get in to Linux system administration and was enrolled in the free introduction to Linux course by the Linux Foundation. It turned out to be too complicated for me in regard to the command line. I found it jumped from subject to subject too quickly. I’m wondering what you think is the best way to learn the command line/shell? Any books, free or paid courses or websites you would suggest? A specific emphasis on system administration would be a bonus!
Done! Dorethy (Mini camping 'payment' system)
Tags: github, wordpress, sql, programming
Published: 2022-01-08 13:06:06

Our Visual Basic project is finally finished :)

It is a VB project for making your own RFID payment system. The story is about Dorethy who is solving her payment issue.

More information: http://www.github.com/Johan684/Dorethy and https://www.dorethy.eu/
web 3
Tags: web3
Published: 2022-01-08 12:55:21

There's a buzzword that tech, crypto and venture-capital types have become infatuated with lately. Conversations are now peppered with it, and you're not serious about the future until you add it to your Twitter bio: Web3.

It's an umbrella term for disparate ideas all pointing in the direction of eliminating the big middlemen on the internet. In this new era, navigating the web no longer means logging onto the likes of Facebook, Google or Twitter.

Think of it this way: The nascent days of the Internet in the 1990s were Web 1.0. The web was seen as a way to democratize access to information, but there weren't great ways of navigating it beyond going to your friend's GeoCities page. It was pretty disorganized and overwhelming.

Then came Web 2.0 starting in the mid-2000s. Platforms like Google, Amazon, Facebook and Twitter emerged to bring order to the Internet by making it easy to connect and transact online. Critics say over time those companies amassed too much power.

Web3 is about grabbing some of the power back.
"There's a small group of companies that own all this stuff, and then there's us who use it, and despite the fact that we contribute to the success of these platforms, we don't have anything to show for it," said Mat Dryhurst, a Berlin-based artist and researcher who teaches classes at New York University on the future of the internet.

And so, the answer, according to Dryhurst and other Web3 fans, is an iteration of the internet where new social networks, search engines and marketplaces crop up that have no company overlords.

Instead, they are decentralized, built upon a system known as the blockchain, which already undergirds Bitcoin and other cryptocurrencies. Imagine it as a kind of bookkeeping where many computers at once host data that's searchable by anyone. It's operated by users collectively, rather than a corporation. People are given "tokens" for participating. The tokens can be used to vote on decisions, and even accrue real value.
A day in an entrepreneurs meta co-working space
Tags: devjournal
Published: 2022-01-08 12:53:37

Hey there, my name is Tiago and I am the founder of the [WBE Space](https://wannabe-entrepreneur.com/coworking), a virtual co-working space where Bootstrappers and Entrepreneurs **work in their side/full-time projects with a team of like-minded people.**

I have been a member of multiple communities, but this one seems to be a bit different... *But I am also a little bit biased*

So I will describe a day, as a member of the [WBE Space](https://wannabe-entrepreneur.com/coworking) and you can help me decide...

**What am I doing today?**

The first thing I do when I first open the WBE slack channel is to go to the #what-i-am-doing-today channel and check out what the others are up to and answer them in case I have insights or questions.
After that, I write my own plan for the day...

**Working Room**

When I have a task to do that requires full focus I jump into the workroom and let the others know I am starting a work session. Often other entrepreneurs join me and we start a Pomodoro timer and work at full focus until it rings... After that, we have a small chat and repeat the process.

If we just want to chill we often have a chat in our virtual coffee corner room.

**Feedback**

Most of our members are always cooking new ideas and it is very common for them to use the #feedback channel to ask for an external opinion and advice.

**Random Coffee**

Every week we are matched with a member of the space for a coffee. This week I had a lovely chat with @MaxwellDavis and I am looking forward to my next random coffee.

**My Role**

As the host is to make sure that everyone feels welcome and to support the community with tools and events to help each member succeed and achieve their goals! But sometimes I just forget about my role and just enjoy being another member and part of the team!

**Would you like to join us?**

Check more info here: https://wannabe-entrepreneur.com/coworking
Spotify HomePage Clone
Tags: javascript, html, beginners
Published: 2022-01-08 12:46:02

HomePage=>[👁 View Now:](https://ammyy9908.github.io/spotifyhome/)
## Github Repo
[Repo Link:](https://github.com/Ammyy9908/spotifyhome)

### Project Structure


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/896pyxn7b8zuwptbmvmd.png)




### Author

😜~ [Sumit](https://github.com/Ammyy9908) 

1.[Website:](https://ammyy9908.github.io/PortfolioSumit/)
2.[Github:](https://github.com/Ammyy9908)
3.[LinkedIn:](https://www.linkedin.com/in/sumit-kumar-097a3a204/)

## Show Your Support 

~by giving ⭐️ to this Project
JSON to HTML code in javascript
Tags: javascript
Published: 2022-01-08 12:42:19

I build my first public project where you can create HTML from JSON, I'm also working on a way to convert html to json on browser. Also trying to make a json to html on nodejs. I know there is other project on this but i like the idea of making this myself.
First time posting here, some developers might find my project useful and some won't, Im open to feedback.
https://github.com/0trebor0/jsontohtml


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kie1vgjs286aw2y1b4pc.png)
OperationalError at /admin/pages/3/edit/
table wagtailsearch_indexentry has no column named autocomplete
Published: 2022-01-08 12:36:38

I am running my website on namecheap cpanel and this issue is coming when I click Publish or Save a Draft in Wagtail Admin.

I never expected this error coz on the same server same account my other wagtail website is not having any such issue.

Is it a sqlite version issue or what , earlier it was giving me FTS5 module not found issue then I deleted the migration folder in wagtail package and ran migration so it got resolved and now this issue is coming. 

Can anyone plz help me resolve this issue

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu3oun11c3a48mt2d9g2.PNG)
Perspective
Tags: discuss, growth, improvement
Published: 2022-01-08 12:36:20

---
title: Perspective
published: true
description: Imagine being born in 1900
tags: discuss, growth, improvement
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08xdmxpymnlyhn7ktw9f.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/perspective/)._

I found many forms of this text online, and here's one version of it:

> **Imagine being born in 1900.**
> 
> When you are 14 years old, World War I begins and ends when you are 18 (with 22 million people dead).
> 
> Shortly after that, the "Spanish" flu pandemic starts and kills 50 million people.
>
> You go out alive and free, and you are 20 years old.
> 
> Then at the age 29, you survive the global economic crisis that started with the collapse of the New York Stock Exchange causing inflation, unemployment, and hunger.
> 
> Nazis come to power at 33. You are 39 when World War II begins, and it ends when you are 45 (a total 60+ million dies).
> 
> When you're 52, the Korean war begins. When you're 64, the Vietnam war begins and ends when you are 75.
> 
> A baby born in 1985 believes that his grandparents have no idea how hard life is, even though they survived several wars and disasters.
> 
> A boy born in 1995 and 26 today believes that the end of the world when his Amazon package takes more than three days to arrive or if he doesn't exceed 15 likes for his posted photo on Facebook or Instagram...
> 
> In 2021, many of us live in comfort, have access to various sources of entertainment at home, and often have more than needed.
> 
> But people complain about everything.
> 
> They have electricity, phone, food, hot water, and a roof over their heads. None of this existed in abundance 100 years ago.
> 
> Humanity survived much more serious circumstances and never lost the joy of life.
> 
> Appreciate your life - this is not a rehearsal!

I bet that if your first reaction isn't "OK, BOOMER!", then this made you appreciate the luck of living in this day and age. I also bet this raises a level of admiration for your grandparents. 

This should serve as a cautionary tale for those that want to listen, in that we're just becoming too entitled and soft, while living in the most peaceful time in history, and having way more than we really need.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these "daily thoughts" posts.
Introducing my first eBook: "Be The Terminal Boss"
Tags: linux
Published: 2022-01-08 12:20:00

## **Introduction**

Actually, I had been interested in Linux for a long time now. But of course, me being the lazy person I am, never really made any effort to explore it. But an opportunity soon arose! This semester I took the course “Linux for biological sciences”. It was really very interesting. But one problem I faced was the excess of information but from various places. I did search for commands books but those were too detailed as well. I wanted something detailed but not too well detailed. 

Also, it was quite tough to search about commands from various places. Moreover, every command has so many options. As a beginner, I was really overwhelmed. I needed something like a handbook I could refer to when I wanted to learn or revise a command with just the options I, as a beginner,  “needed” to know. Day by day, as I explored Linux, I made notes from various places with the information I wanted and needed. I shared those notes on Twitter and found out that a lot of beginners were just like the past me, overwhelmed! Therefore I decided to digitally compile all my handwritten notes along with some major additions. 

Well, since I couldn’t find something exactly as I wanted so I thought, why not make one myself? So, here I am, with my own eBook ;)

<hr>

## **Features**

This eBook contains the following features:

🔷 12k+ words

🔷 Important and Useful options for each command

🔷 104 pages

🔷 Here's the contents:

👉 Basic Linux Commands

👉 Help Facilities For Commands

👉 Package Management Commands

👉 File Editors in Linux

👉 User and Group Management Commands

👉 Setting and Ownerships and Permission for Files/Directories

👉 Setting Temporary and Permanent Alias

👉 Filesystem Management Commands

👉 Network Management Commands

👉 System Management Commands

👉 Process Management Commands

<hr>

## **Cover Page**


![01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641623188339/Clx900ezy.png)

<hr>

## **Who is this eBook for?**

This eBook is for all beginners who don't know what commands and what options should they learn. This eBook is also for experts who just want to read it😂 Ok, seriously speaking, if you are an expert, you can use it to revise the syntax or look at the important and most useful options of a command.

I haven’t included the really tough or the most advanced type of commands as I wanted this to be more on the beginner-friendly side :)

**Also, every command or option I included in this Ebook is based on my own opinion with which you may agree or disagree.**

<hr>

## **Sneakpeek👀**


![s1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641621023294/f6PzsXwQ-.png)


![s3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641621035481/9LrJU5j2A.png)


![s4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641621043255/HcdwVng7d.png)

<hr>

## **Link to the eBook**


https://iayeshasahar.gumroad.com/l/BeTheTerminalBoss


<hr>

**Let's connect!**

✨ [Twitter](https://twitter.com/IAyeshaSahar) 

✨ [Github](https://github.com/AyeshaSahar)