teleren/devto huggingface dataset:
Micro Frontends
Tags: microservices, webdev, javascript, docker
Published: 2022-01-09 19:14:45

**We all familiar with the term Micro Services**, lot of organizations adapted this pattern to decompose their monolith back-end applications in to seperate entities based on their functions, that can be coveniently developed, tested and deployed with lot of other services.

> **While the Front-end mostly kept Monolith.**

_Now what if we apply this pattern of decomposing a monolith Front-end application to many pieces of Front-end applications?_

## **Let's discuss few scenarios:**

- A company with lot of experience on CRM applications developed with an very old legacy Native HTML, CSS and JS wants to taste the Latest Angular or React
- A complex food ordering and delivery company with a Front-end that handles ordering, delivery and listing restaurants with their foods needs to manage the code base complex free among various teams working on the same monolith Front-end

_There can be a solution as mentioned by the below image from Thoughtworks latest article on Micro Front-ends_
![Micro Front-ends Block Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxbrsxo86e2rce2ceeyp.png)
 

> Now the question arises, how these different blocks of front end applications route among themselves?
There is one such example as the Thoughtworks article discusses with the term as follows

## **Cross Application Routing**
![Cross Application Routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puro59aehg2uzld8f3zq.png)
 

## **Benifits:**


- Adopting this pattern can lead to much smaller source code of each individual micro frontend  than that of source code of a single monolithic frontend. 
- These smaller codebases can be  simple and easy to develop for developers. 
- We can avoid the complexity due to unwanted coupling between components that needs to be hidden.

## **Possible Downsides:**
- Increased Payload size due to different JS bundles.
**Solution:** _The integration team should know about the possible bottlenecks_
- The situation where multiple teams working on differnt components face a co-ordination crisis
**Solution:** _An intense Test driven Production like deployment cycle must be followed before the actual production deployment_

- Final thing is to consider is how we are going to manage when the Micro Frontend components gets increased in numbers?

#Support Us: [Buy Me a Book](https://www.buymeacoffee.com/dogealgo)

_**Explore more on**_ [dogealgo](https://dogealgo.netlify.app/)

**Reference:**
[https://martinfowler.com/articles/micro-frontends.html](https://martinfowler.com/articles/micro-frontends.html)
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2022-01-09 23:48:17

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12595d30baa.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ How does a programmer open a jar for their significant other?

___A:___ They install Java
 -->
How I developed my resilience with code
Tags: motivation, productivity, watercooler
Published: 2022-01-09 23:30:26

New year, new goals. How are you doing on that front?

There’s something I’ve realized recently, that being a developer helped with my resilience.

Small mistakes happen, and I just don’t care about them anymore.

---

I had to go to a doctor, they had fetched me from the reception, I entered and gone straight to their desk.

*Oops!*

I had scheduled a call with someone... but forgot about time zones.

*Oops!*

I had to send an email before a date... and forgot.

*Oops!*

---

Most mistakes are small and easy to correct, and more than that... they just don’t matter that much.

As a developer, when I don’t see a mistake, an Error, popping up... then that’s when I get really concerned I’m doing something wrong.

Not that expect things to wrong all the time, but I certainly prepare for that.

---

But trying to sit in the wrong place? 

*Hey, that’s my seat!*

Arriving late to the call? 

*Hey... you’re coming?*

Forgetting to send the email? 

*So... I need that email...*

---

And when the error does pop... it’s easy enough to correct.

---

Cover Photo by [Sarah Kilian](https://unsplash.com/@rojekilian?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/mistake?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

![[https://buymeacoffee.com/noriller](https://buymeacoffee.com/noriller)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1togp8evzxpcbdvtqu5i.png)
Desenvolva orientado a DESEMPENHOO(Next.js)
Tags: javascript, typescript, nextjs, webdev
Published: 2022-01-09 23:24:50

O artigo de hoje conta com uma ferramenta sensacional, eu acredito que seja aquele vento que precisava para sua pipa ou web app voar.

Hoje uma boa parte das pessoas que acessam sites, fazem pelo celular em todo lugar. Um dos motivos do mobile first ser usado. Mas calma calma calma, eu não vou falar disso nem de metodologia de css. Então segure firme na moto porque ela vai dar uma acelerada! 


## AMP (Accelerated Mobile Pages) 

É uma tecnologia que já foi lançada a 2 anos, mas, e é muito delicinha usar. [Ler mais...](https://amp.dev/).

Basicamente ela melhora e deixa o carregamento da página maior em dispositivos móveis, por minimizar o tamanho da página web e ela tem uma integração especial com o next.
 

Você pode configurar globalmente: 

`/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  basePath: "/chr",
  **amp**: true,
}
`

ou até pode cada página:


![code image in unique page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62b1qf7xicjrj67bh7m2.PNG)

Usar este recurso aumenta cerca de 42% em desempenho mas, rejeita next e react no lado do cliente, mas vai usar os recursos do AMP.

Mas aí que está, a gente não pode usar o next no lado do front end, nem outros componentes next sem amp. Mas a gente pode usar o next no servidor com ssg ou ssr. Recomendo ssg por dar maior desempenho em armazenar o html em caches na cdn. 


![Image amp and ssg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/265ecgsw2rraf81fddnp.PNG)


Isso é muito legal, principalmente saber quando usar essa combinação para proporcionar uma melhor experiência para os usuários. Se quiser comentar mais sobre isso, está livre na área de comentários.
API for Google Developer Student Club at my Campus
Tags: atlashackathon, codenewbie, mongodb, beginners
Published: 2022-01-09 22:27:52

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
The API is a basic REST API written to be called by the App built under Android Study Jams 2021. We built this API under the Org. [**Google Developer Student Club - DSI**](https://gdsc.community.dev/dayananda-sagar-institutions-bengaluru/).
There is basic work of the API is to provide routes to *GET* and *POST* the timetable of different classes that are conducted on our college campus. This app provides the data for the classes happening at [Dayananda Sagar College of Engineering, Bangalore](http://dsce.edu.in/) in real-time.
This is still a system in development.
*Disclaimer: My submission is for the API. Not the App, using it.*

[Try in App] (https://github.com/coder2699/Dare2Change/releases/download/v1/dare2change_v1.apk)

### Submission Category: Choose Your Own Adventure

{% github https://github.com/kitarp29/api %}

### Additional Resources / Info
- NodeJS v14+
- MongoDB Atlas
- npm packages
- Heroku

## Demo:
[Try this](https://gdsc-dsi.herokuapp.com/gdsc?id=19ECEB&day=1)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/todhdwgmcbljvea18l3d.png)
 
This is generating the timetable of the ECE Branch B Section of my campus.

There are two parameters that the API has.
**id**: This handles the exact branch, batch, and section of the class at the campus.
**day**: On the day of the week, we need the timetable.

One can change the day from 0 t0 6 to get time table of the week from Monday to Saturday.

There is also a POST Request. It is ready but not integrated with the App as of now.

## 🛠 How To Setup :
Minimun requirements:
- [Node.JS v14+](https://nodejs.org/en/download/)
- [MongoDB Databse](https://www.mongodb.com/) (Local/Remote)
- Any Code Editor
- Internet Browser
- Internet

### Steps to set up locally
- Clone the Repo
- Open in any code editor
- In index.js replace ```process.env.DATABASE_URL``` with the URL of your MongoDB Database.

- In your terminal, run: ``` npm i``` 
- Now, run: ```nodemon index.js```
 
This should start a server running at [http://localhost:5000/](http://localhost:5000/)

## Tasks for future
- Make logging procedure for each request
- Containerise the API Server
- Deploy it in a K8s Cluster
- Add Monitoring tools for the server like ELK, Prometheus, and Grafana
Use this NPM script to create your EditorConfig files
Tags: javascript, editorconfig, npm, npx
Published: 2022-01-09 22:20:37

Have you ever needed to create an [EditorConfig](https://editorconfig.org/) to your programming projects but can never remember all the options you can use? Worry no more: just type `npx create-editorconfig -y` in your terminal and have one generated for you. Those are the default options:

```
# editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
```

If you want to customize the settings or even add more for a different set of files (by defining a glob pattern), just ommit the `-y` argument in the terminal and answer the prompted questions.

{% asciinema 460743 %}

## What is EditorConfig?

EditorConfig is a configuration file (the `.editorconfig`) that defines the coding styles that a given code editor (such as [VS Code](https://code.visualstudio.com/)) should apply in the files. You can even set a different set of rules for the files of your project according to your their extension or directory, by using a [glob pattern](https://en.wikipedia.org/wiki/Glob_(programming)).

## My code editor is not applying the EditorConfig settings

To apply your `.editorconfig` rules, your code editor should have a plugin or have EditorConfig rule parsing implemented natively (if you are using VS Code, you must install [this extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig).

[![EditorConfig extension on VS Code Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/641onx2wrltmoq1ze501.png)](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

## How can I contribute to `create-editorconfig`?

Please, go to the official [GitHub repository](https://github.com/douglasdeMoura/create-editorconfig) and open an issue.
 


##
2 minutes to stow
Tags: linux, cli, bash
Published: 2022-01-09 21:48:45

---
canonical_url: https://waylonwalker.com/til/2-minutes-to-stow/
published: true
tags:
- linux
- cli
- bash
title: 2 minutes to stow
---

Stow is an incredible way to manage your dotfiles.  It works by managing symlinks between your dotfiles directory and the rest of the system.  You can then make your dotfiles directory a git repo and have it version controlled.  In my honest opinion, when I was trying to get started the docs straight into deep detail of things I frankly don't really care about and jumped right over how to use it.

When using stow its easiest to keep your dotfiles directory (you may name it what you want) in your home directory, with application directories inside of it.

Then each application directory should reflet the same diretory structure as you want in your home directory.

## zsh

Here is a simple example with my zshrc.

``` bash
mkdir ~/dotfiles cd ~/dotfiles mkdir zsh mv ~/.zshrc zsh stow --simulate zsh
```

You can pass in the --simulate if you wish, it will tell you if there are going to be any more errors or not, but it wont give much more than that.

``` bash
WARNING: in simulation mode so not modifying filesystem.
```

Once your ready you can stow your zsh application.

``` bash
stow zsh
```

## nvim

A slightly more complicated example is neovim since its diretory structure does not put configuration files directly in your home directory, but rather at a deeper level.

``` bash
mkdir ~/dotfiles/nvim/.config/nvim/ -p cd ~/dotfiles mv ~/.config/nvim/ ~/dotfiles/nvim/.config/nvim/ stow zsh
```

> !notice how the nvim directory inside of dotfiles is structured like it would
> be in your $HOME directory.
Path Aliases in Next.js
Tags: javascript, typescript, nextjs, webdev
Published: 2022-01-09 21:45:27

I recently started learning Next.js and used path aliases in a project, and guess what? It significantly improves the quality of my code. Are you curious as to how this is possible? Let me show you how it's done...


**What is the problem? "Relative Path Hell"**
Typing paths is time-consuming and error-prone and it can be complicated at times. Even with code completion capabilities like [IntelliSense](https://docs.microsoft.com/en-us/visualstudio/ide/using-intellisense?view=vs-2022) (which is supported by practically every IDE or text editor), as your codebase expands, this might become increasingly difficult.

Here's an example of a relative path that requires accessing many path levels when attempting to import.

 
![Relative path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl1xdnkub01owi3xly04.PNG)

**How can we solve this?**
Shortening our import paths, which can be accomplished via **"Path Aliases,"** can make things a little easier.

![path aliases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p64p9mqflgkgbbrvzs95.png)
 

---


> How can we build up path aliases in a project that is structured like this?

![Project Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3odb1fo3fsspirs4gmql.png)
 
 
 

- To make use of path alias, create a `"jsconfig.json"` file or (`"tsconfig.json"` if using typescript) in the project root and configure it as shown below.

![alias config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tagwrtwl072azvvl0aya.png)

**What next?**
There's nothing further to set up; you can now use path aliases in your application while importing.

In conclusion, every update to the "json" file necessitates a server restart.

I would like to connect with you.
[LinkedIn](https://www.linkedin.com/in/afaraetu94) [Github](https://github.com/RahmanC) [Twitter](https://twitter.com/_rhammy)
What is backend development?(intro)
Tags: beginners, webdev, backend, career
Published: 2022-01-09 21:18:43


In a world driven by software applications web applications took a lot more importance over the last years, every business wanted to have an access throw internet . Having a portal on the internet is very important for your business so web development held a-lot more value than ever.

Any web application contains of two main components ( **Client** - **Server** )

Client can be the interface that a user use to interact with your application, this client can be web that exists in the browsers like (chrome , safari , etc…)
Or mobile application like Uber for example 

All this applications need  server that provides the logic require to power this users interfaces with functionality. 



So if I want to be a good backend engineer in 2022 what should I learn ? In the end of the article I will give you suggestion to work with but let's first discuss what backend server is ? 

to simplify the case backend is a code or program written in certain language that is hosted on a server that can be accessed through the internet and because the internet has no state (it will forget you and your data so this data should be stored on a disk not in the memory 

To restore a data on a disk and retrieve it through-code databases are used. 

![web development blocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmczxaa3veajvnm3e8h1.png)

So when you request a thing from a client you trigger some code that make certain logic and data can be stored in the database or retrieved from it then response is sent to client.


---

## Recommendations


1.**Programming language** [javascript , Go , Php , java , c#]

-[javaPoint](https://www.javatpoint.com/) .
 					
2.**Data structures and Algorithms**.
  - [tutorialsPoint](https://www.tutorialspoint.com/data_structures_algorithms/index.htm).

3.**Design patterns** .
  - [refactoring guru](https://refactoring.guru/design-patterns).

4.**Data-bases and SQL**.
- [javaPoint](https://www.javatpoint.com/sql-tutorial).

5.**Back-end framework** [nodeJS , GO , laravel].
- [javaPoint](https://www.javatpoint.com/). 
- [tutorialsPoint](https://www.tutorialspoint.com).

 
## Conclusion
So this was a simple friendly entry to the world of web development [backend] I tried to discuss the main idea in a simple way and in the next articles we will talk more in details about every component in the cycle of backend that can take you from rocky level to be an expert in the backend development . 
Stay tuned for more articles.
Thanks for reading ❤️❤️


**_Feel free to reach out on_** [Linkedin](https://www.linkedin.com/in/ahmedwafik/)
Functional Interfaces in Kotlin
Tags: kotlin, java, programming
Published: 2022-01-09 21:17:31

Hello everyone, almost all of us have seen code like `view.setOnClickListener { }` or `view.setOnLongClickListener { }` in Kotlin, and when you click on it to see the source code it will show you the Java OnClickListener interface. But have you asked yourself what is this syntax? Is it a kotlin extension? and how can you call your custom listener like this? In this small article, you will know the answer to all of those questions, so let's start 😋.

This syntax is not an extension but SAM conversion, but what does SAM stand for?

SAM stands for Single Abstract Method interface and it’s called also Functional interface which is an interface with only one non-default method and any number of default methods, for examples In the JDK we have Runnable class which has only one method called run and in Android SDK we have OnClickListener, OnLongClickListener …etc.

How can we create a custom functional interface?

To declare a Functional interface in Java it is easy you just create a normal interface with one method for example.

```java
public interface FunInterface {
    void method();
}
```

And in Kotlin starting from Version 1.4 you need to declare it as a fun interface not only interface for example.

```kotlin
fun interface FunInterface {
    fun method()
}
```

In Kotlin you can use Java or Kotlin Functional interfaces as a Lambda expression for example.

```kotlin
fun learnFunInterface(fi : FunInterface) { ... }
```

To you this function you can pass FunInterface as an anonymous object for example.

```kotlin
learnFunInterface(object : FunInterface { 
    override fun method() {
        println("Hello") 
    } 
})
```

But because it Functional Interface you can pass it as lambda { } and this is what is called SAM conversion.

```kotlin
learnFunInterface ({ println("Hello") })
```

also in Kotlin if your last parameter is functional interface you can move your lambda out the brackets ( ) for example.

```kotlin
learnFunInterface {
    println("Hello")
}
```

Now you can realize that setOnClickListener { } is just because this method takes functional interface which is OnClickListener as a parameter.

Note that the same syntax will work on Kotlin also if your functional interface is written in Java like OnClickListener.

- Extra Resources:
  - https://kotlinlang.org/docs/fun-interfaces.html
  - https://kotlinlang.org/docs/java-interop.html#sam-conversions
  - https://jorgecastillo.dev/kotlin-sam-conversions

Enjoy Programming 😋.
How to avoid lambdas and still get most of the streams expressive power
Tags: java, lambda, 42, programming
Published: 2022-01-09 21:13:10

Hi Everyone, I've just released a new video, talking about how with the slash we can avoid lambdas and still get most of the streams expressive power.
Also, it is probably the funniest video to date :-)

---

https://www.youtube.com/watch?v=3-EwmfpOAnA
Setting up iDRAC 6 with Let's Encrypt SSL Certificates
Tags: tutorial, idrac, security, ssl
Published: 2022-01-09 21:00:45

Get a Let's Encrypt cert. Once you've done, that, you will have several files: `cert.pem`, `chain.pem`, `fullchain.pem`, and `privkey.pem`. On Windows, open Admin PowerShell. Do `racadm -r 192.168.1.60 -u root -p calvin sslkeyupload -t 1 -f .\privkey.pem` to upload the private key (replace the username/password as needed). Now do `racadm -r 192.168.1.60 -u root -p calvin sslcertupload -t 1 -f .\cert.pem` to upload the `cert.pem` file. Wait a bit (maybe five minutes), and iDRAC will work with SSL. Ignore the full chain, we don't need that.
Custom Hooks in React
Published: 2022-01-09 20:19:06

Custom Hook is a JavaScript function which we create by ourselves when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.
Here is the code how we can make a custom hook :
import { useState, useEffect } from "react";
const useFetch = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);
  return [data];
};
export default useFetch;
How To Create a Pricing Table with TAILWIND CSS
Tags: tailwindcss, css, html, tutorial
Published: 2022-01-09 20:11:37

In this coding video tutorial, I will show you how to create a Pricing Table with Tailwind CSS. You can follow along.

- Easy to implement
- FREE SOURCE CODE
- FOLLOW ALONG

Subscribe please! :)

**Youtube video**

{% youtube 4UMQcQgSzNo %}

**Twitter**

{% twitter 1480267557668102150 %}