teleren/devto huggingface dataset:
Use subscription object to clear subscribes 🦸‍♂️
Tags: angular, rxjs
Published: 2021-01-03 08:29:38

<em>[Cover image source](https://www.psychotactics.com/smoke-signals-decoded/)</em>

We all know we need to clear (unsubscribe) our subscriptions when ever component will be destroyed.

Let's see how we can use `Subscription` class from `RxJs` to do this. 🥃

Let's look at our component:

```typescript
import {Component, OnInit} from "@angular/core";
import { Observable } from 'rxjs';

@Component({
  selector: 'app-componento',
  template: `<div>Component</div>`
})
export class Componento implements OnInit {
  obs: Observable<any> = new Observable;

  ngOnInit(): void {
    this.obs.subscribe(() => {});
  }
}
```

Good, now let's how we can use subscription to unsubscribe on destroy

```typescript
import {Component, OnDestroy, OnInit} from "@angular/core";
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-componento',
  template: `<div>Component</div>`
})
export class Componento implements OnInit, OnDestroy {
  obs: Observable<any> = new Observable;
  subs: Subscription = new Subscription;

  ngOnInit(): void {
    this.subs.add(this.obs.subscribe(() => {}));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }
}
```

That's it !

More readable version in case of having multiple observable, will be like this:

```typescript
import {Component, OnDestroy, OnInit} from "@angular/core";
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-componento',
  template: `<div>Component</div>`
})
export class Componento implements OnInit, OnDestroy {
  obs: Observable<any> = new Observable;
  obs2: Observable<any> = new Observable;
  obs3: Observable<any> = new Observable;
  subs: Subscription = new Subscription;

  ngOnInit(): void {
    this.subToOb();
    this.subToOb2();
    this.subToOb3();
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  private subToOb(): void {
    this.subs.add(this.obs.subscribe(() => {}));
  }

  private subToOb2(): void {
    this.subs.add(this.obs2.subscribe(() => {}));
  }

  private subToOb3(): void {
    this.subs.add(this.obs3.subscribe(() => {}));
  }
}
```

Have a good day 🍻
MediDoc: Update 5 - Small UI Tweaks
Tags: dohackathon, django
Published: 2021-01-03 08:25:40

In the last couple of days, I made some improvements to the UI. You can find the previous UI images in the first post.

Case card:

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

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

Now one can click on the :star: icon to bookmark and un-bookmark!

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

Similar to the case card, the :pencil2: icon can be clicked for editing, and the trash icon can be clicked for deleting.

GitHub: https://github.com/ayan-b/MediDoc/

Check out the deployment here: https://medi-doc-njgqo.ondigitalocean.app/

## Try It Out
To try it out, please create a patient account [here](https://medi-doc-njgqo.ondigitalocean.app/accounts/signup) and a medical account [here](https://medi-doc-njgqo.ondigitalocean.app/accounts/signup/medical) (note that admin has to approve the medical accounts, so please wait a bit!).

Alternatively, you can use the following demo medical accounts:
- devto-hospital
- devto-diag
- devto-pharmacy

And the patient account:
- devto-patient

Password for all of them is: medidocpass@abc

Let me know what you think!
Improve the visuals of your zsh terminal on Mac
Tags: mac, zsh, terminal
Published: 2021-01-03 07:58:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvl85gatx9ipbridt1mv.png)
Putting the below in your .zshrc file will make the terminal look like the image above:
```
parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}
COLOR_DEF=$'\e[0m'
COLOR_USR=$'\e[38;5;243m'
COLOR_DIR=$'\e[38;5;197m'
COLOR_GIT=$'\e[38;5;39m'
NEWLINE=$'\n'
setopt PROMPT_SUBST
export PROMPT='${COLOR_USR}%n@%M ${COLOR_DIR}%d ${COLOR_GIT}$(parse_git_branch)${COLOR_DEF}${NEWLINE}%% '
```

source: https://stackoverflow.com/questions/17333531/how-can-i-display-the-current-branch-and-folder-path-in-terminal
Network Topology setup using Routing Table
Tags: linux, networking
Published: 2021-01-03 07:50:25

Hello everyone,

In this blog, we will be demonstrating the working of **network topology**.

In this demonstration I have 3 system:

- A -> with IP 192.168.0.105
- B -> with IP 192.168.0.104
- C -> with IP 192.168.0.106

> Now let's check if A is able to ping to B and C

In order to ping use the command **ping <IP>**

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

Here you can see A is able to ping B and C.

> Now let's check if B camping A and C

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

Here you can see B can ping A and C.

> Now let's check if C can ping A and B

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

Here we can see C can ping A and B.

> Now add the routing rule in B such that it will not be able to connect to C

In order to reject or block the C system, IP use the command **route add -host <IP> reject**

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

Here you can see we have blocked or rejected C system IP.

> In the same way add the routing rule in C such that it can not connect to A system IP.

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

Here you can see we have rejected the IP of the B system

> Now check if B is able to ping A and C

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

Here you can see B is able to ping to A but is not able to ping C, it gives output **no route to host.** 

> Now check if C is able to ping A and B

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

Here you can see C is able to ping to A but not to B

> Now check for A is it able to ping B and C

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

Here you can see A can connect to both B and C

So that how we can create Network Topology Setup in such a way  so that System A can  ping to two Systems System B and System C but both these systems should not be pinging each other without using any security rule e.g firewall etc .

Thank you!!❄
Simple Currency Input
Tags: javascript, forms, finance, react
Published: 2021-01-03 07:45:47

Currency input could be laborious to write up from scratch, especially if you want it to have proper formatting inside of the input box.

While you can do it the *vanilla way* using `toLocaleString()` and `replace(/[^\d.]/gi, ''` to clean up the strings in `handleChange`, I found the [react-currency-input-field package](https://www.npmjs.com/package/react-currency-input-field/) that makes it super easy.

Check it out on [CodeSandbox](https://codesandbox.io/s/currency-input-w36vp?file=/src/App.js:0-1293) or view the source below:

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/pjvmr5clg8rklozhy4bl.png)

```Javascript
import React, { useState } from "react";
import CurrencyInput from "react-currency-input-field";
// https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes
import "./styles.css";

export default function App() {
  const prefix = "$ ";
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    e.preventDefault();
    const { value = "" } = e.target;
    const parsedValue = value.replace(/[^\d.]/gi, "");
    setValue(parsedValue);
  };

  const handleOnBlur = () => setValue(Number(value).toFixed(2));

  return (
    <div className="App">
      <h1>Super Simple Currency Input</h1>
      <p>
        Using{" "}
        <a
          href="https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes"
          target="_blank"
          rel="noreferrer"
        >
          react-currency-input-field
        </a>
      </p>
      <CurrencyInput
        prefix={prefix}
        name="currencyInput"
        id="currencyInput"
        data-number-to-fixed="2"
        data-number-stepfactor="100"
        value={value}
        placeholder=""
        onChange={handleChange}
        onBlur={handleOnBlur}
        allowDecimals
        decimalsLimit="2"
        disableAbbreviations
      />
    </div>
  );
}

```
100DaysOfCodeChallenge                                
Tags: 100daysofcode, android, webdev, cpp
Published: 2021-01-03 07:26:31

Today I am taking up the 100daysOfCode challenge, I'll try to post everyday about the things i did,explored and code.
  
Lets see if it enhances my productivity :)


You can follow me-
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
How to work with Karate Config.js to Switch Env in Karate API Testing Automation?
Tags: testing, apitesting, beginners, tutorial
Published: 2021-01-03 07:11:58

In this tutorial, We are going to learn about the Karate Configuration, We will work with the Karate config.js and try to switch the variables based on the staging and production environment.

## ✅ What is Karate Configuration?
Karate expects a file called karate-config.js to exist in the class path and contains a function JavaScript. 
This function is expected to return the JSON object, and that all keys and values for that JSON object will be available as script variables. Below function calls a feature file Authenticate.

{% youtube oq6IOO1-trc%}


✅ Source - https://github.com/intuit/karate/

In this video, We are going to learn How to Test GraphQL Query using Karate API, This is part of Karate API Testing tutorial series.

✅ Download Source Code - https://sdet.live/karatecode
✅ Download Notes(PPT) -  https://sdet.live/karate-ppt
✅ Official Website for Learning Karate API Framework - https://github.com/intuit/karate

## ✅ What is Karate API?
Karate is an open-source API test automation tool. API tests are written using Behavior Driven Development (BDD) Gherkin syntax

✅  We will learn difference between Karate vs Rest-assured.
Download the Doc. - https://sdet.live/karate-vs-restassured

## ✅ What is Karate Framework?
In this Karate Framework Tutorial, We are going to create the Own Karate API Testing Automation Framework, We will use the Person APIs(with JSON Server).

After that We will automate APIs of GitHub Repo V3.

There are multiple Karate API testing examples we are going to show you in this series.

## ✅ Why we Need Karate API Testing?
- Open source
- API Testing, Mocking,
- Performance Testing,
- UI Automation, Reporting
- Parallel Execution
- BDD Style, Native JSON/XML support.
- Readable syntax.
- Mix API and UI test-automation
2020 - Year In Review
Tags: 2020, review, review2020
Published: 2021-01-03 07:10:10

---
title: 2020 - Year In Review
published: true
description: Year In Review 2020
tags: 2020, review, review2020
//cover_image: https://direct_url_to_image.jpg
---

20202 has been an average year for me. I learnt new things, wrote a handful of blog posts. But above all, I became a better dev by learning and reflecting on my mistakes throughout. Here's a quick list down of how 2020 turned out to be an average year for me.

## Things I wrote in 2020

* [What To Learn Before A JavaScript Framework](https://dev.to/bipon68/what-to-learn-before-a-javascript-framework-68a)
* [Angular Learning Day 1: Component](https://dev.to/bipon68/angular-learning-day-1-component-479m)
* [Angular Learning Day 2: Angular Fundamentals](https://dev.to/bipon68/angular-learning-day-2-angular-fundamentals-3ci1)
* [Angular Learning Day 3: Displaying Data and Handling Events](https://dev.to/bipon68/angular-learning-day-3-displaying-data-and-handling-events-16kg)
* [Module Create in Angular 10](https://dev.to/bipon68/module-create-in-angular-10-30pl)
* [Front End Engineer: Scope of work and responsibility](https://dev.to/bipon68/front-end-engineer-scope-of-work-and-responsibility-551m)
* [Angular Template Syntax](https://dev.to/bipon68/angular-template-syntax-85n)
* [Angular Built-In Directives](https://dev.to/bipon68/angular-built-in-directives-16af)
* [Angular Custom Directive](https://dev.to/bipon68/angular-custom-directive-7b1)
* [Angular: Create a custom dependency injection](https://dev.to/bipon68/angular-create-a-custom-dependency-injection-1cbp)
* [Angular HTTP Client Library](https://dev.to/bipon68/angular-http-client-library-4100)
* [Angular RxJS Observable Class](https://dev.to/bipon68/angular-rxjs-observable-class-2k9o)
* [Create your first NODE server](https://dev.to/bipon68/create-your-first-node-server-3ckd)
* [Node Module Export](https://dev.to/bipon68/node-module-export-3247)
* [MySQL Database connection from NodeJs application](https://dev.to/bipon68/mysql-database-connection-from-nodejs-application-4p8f)
* [ES6 Fat Arrow Functions](https://dev.to/bipon68/es6-fat-arrow-functions-400d)
* [Some Bangla YouTube channels on programming](https://dev.to/bipon68/some-bangla-youtube-channels-on-programming-2eb9)
* [জাভাস্ক্রিপ্ট — var, let, const](https://dev.to/bipon68/var-let-const-4f3j)
* [Rest Operator in Javascript](https://dev.to/bipon68/rest-operator-in-javascript-3mgh)
* [Spread Operator in Javascript](https://dev.to/bipon68/spread-operator-in-javascript-2a4a)
* [Functions and callbacks](https://dev.to/bipon68/functions-and-callbacks-3on)
* [How to Setup Angular Bootstrap](https://dev.to/bipon68/how-to-setup-angular-bootstrap-5ahj)
* [How to Setup React Bootstrap](https://dev.to/bipon68/how-to-setup-react-bootstrap-3of9)
* [React Router for Beginner](https://dev.to/bipon68/react-router-for-beginner-4mh9)

## Goal Stats

* ✅ Build a portfolio
* ❌ Hit 1k reps in Stack Overflow (9,471 currently)
* ❌ Hit 1k followers in dev.to (4 currently)
* ❌ Learn GraphQL, React, web components
* ❌ Style Guide
Infinite Loading Animation
Published: 2021-01-03 07:09:51

Html:  

<div class="loader">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>


CSS:  

body
{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #3f51b5;
}
.loader
{
	position: relative;
	display: flex;
}
.loader span
{
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	margin: 0 5px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.loader span:not(:last-child)
{
	animation: animate 1s linear infinite;
}
.loader span:last-child
{
	animation: jump 1s ease-in-out infinite;
}
@keyframes animate
{
	0%
	{
		transform: translateX(0);
	}
	100%
	{
		transform: translateX(30px);
	}
}
@keyframes jump
{
	0%
	{
		transform: translate(0,0);
	}
	10%
	{
		transform: translate(10px,-10px);
	}
	20%
	{
		transform: translate(20px,10px);
	}
	30%
	{
		transform: translate(30px,-50px);
	}
	70%
	{
		transform: translate(-150px,-50px);
	}
	80%
	{
		transform: translate(-140px,10px);
	}
	90%
	{
		transform: translate(-130px,-10px);
	}
	100%
	{
		transform: translate(-120px,0);
	}
}
CODE JOURNAL
Tags: dohackathon, webdev
Published: 2021-01-03 07:00:58

This journal can be used for taking notes in class or to record snippets of code you will be using frequently.


## **Personal Site:** CODE JOURNAL 


A blog where you can share your learning during #100DaysOfCode. 
 


**How I built it**
I'll be using HTML,CSS,JS AND NODE.JS.

    
```DAY 1 of Hackathon```
Online Laravel migration!
Tags: laravel, migration, sql, generator
Published: 2021-01-03 06:55:08

If you have an existing application in other framework and you are recently migrating to laravel then laravel online migration generator help you to generate laravel migration file from your existing SQL table schema easily.

1. Goto [laravel online migration generator](https://laravelarticle.com/laravel-migration-generator-online) page.
2. Copy your table SQL schema & paste it.
3. Click on Generate button!

Here is an example
![laravel-online-migration](https://dev-to-uploads.s3.amazonaws.com/i/2h488ap77zxlvbbm192a.png)
The communality of ants and individuality of mankind
Tags: writing, productivity, indonesia, 365writings
Published: 2021-01-03 06:35:57

Artikel ini juga tayang [di blog saya](http://dasaptaerwin.net/wp/2021/01/the-communality-of-ants-and-individuality-of-mankind.html).

[Cover image: "Ants" from Pixabay CC0](https://pixabay.com/photos/ants-ant-groups-team-teamwork-2809019/)

> I guess the ants would laugh if we told them how we do science to solve our problems. 

Tadi malam sebelum tidur saya sempat membunuh seekor kecoak, karena naik ke meja makan. Bangkainya saya sapu ke luar. Keesokan harinya, saya lihat bangkai kecoak sudah bergeser 5 m dari posisinya semula semalam. Rupanya ada ratusan semut bergotong royong mengangkat bangkainya. 

{% youtube vhHk3y4FPOA %}

Ini contoh menarik kegiatan komunal dari makhluk hidup yang berukuran puluhan kali lebih kecil dibanding serangga yang diangkatnya. Semua semut itu mungkin merasakan beratnya mengangkat badan si kecoak. Keringatnyapun mungkin sama banyaknya. Tapi mereka sepertinya tak peduli apakah semua kawannya sudah dapat jatah mengangkat beban, selama calon makanan mereka bisa bergerak mendekati sarang.

Sekarang kita bandingkan dengan kegiatan kita dalam riset. Seringkali kita bersaing, bahkan dengan kawan sendiri untuk menjadi yang pertama mempublikasikan hasil riset. Yang diukurpun bukan makin dekatkah kita dengan solusi. Sangat tidak setara dengan kerjasama para semut mengangkat bangkai kecoak dan menggesernya satu centimeter demi centimeter mendekati sarang.
Laravel N + 1 query ပြသာနာ
Tags: laravel, php
Published: 2021-01-03 06:32:14

N + 1 query ပြသာနာကတော့ လက်ရှိ developer တွေတော်တောများများဖြစ်လေ့ဖြစ်ထရှိတဲ့ပြသာနာပါ။
## ဘယ်အချိန်မှာဖြစ်တက်တာလဲ?
ပုံမှန်အားဖြင့်တော့ data list တွေကို ပြန်ပြတဲ့နေရာမျိုးတွေမှာဖြစ်လေ့ဖြစ်ထာရှိပါတယ်။
## ဘယ်လိုမျိုးဖြစ်တာလဲ?
ဥပမာ ကိုယ့်ရဲ့ database ထဲမှာ record 100 ရှိတယ်။ ကိုယ်ကသာမာန် data လေးထုတ်ပြပေမဲ့ database ကို query သွားဆွဲတာက ***101*** (100 records + 1 times) ကြိမ်ဖြစ်နေတာမျိုးပါ။

## အသေးစိတ်ရှင်းလင်းချက်
Laravel မှာကျနော်တို့က ORM ကိုသုံးပြီးတော့ relationship တွေကိုလိုအပ်သလို့စီမံအသုံးပြု့ကြပါတယ်။ ဒီနေရာမှာ Eloquent ORM Relationship တွေဟာ `lazy loading` တွေဖြစ်တယ်ဆိုတာကိုသတိ့ပြု့ကြရမှာပါ။
ဥပမာ ......

### Book Model
```
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    /**
     * Get the author that wrote the book.
     */
    public function author()
    {
        return $this->belongsTo(Author::class);
    }
}
```
### Author Model
```
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Author extends Model
{
    
}
```
ဒီနေရာမှာ စာအုပ်စာရင်းရယ်၊ ရေးတဲ့သူတွေကို တွဲပြချင်တဲ့ အခါမှာ အောက်ပါအတိုင်းရေးလေ့ရှိ့ပါတယ်။
```
use App\Models\Book;

$books = Book::all();

foreach ($books as $book) {
    echo $book->author->name;
}
```
အဲလိုရေးတဲ့အခါ ....
`Book::all()` လုပ်တဲ့အချိန်မှာ query တစ်ကြိမ်အလုပ်လုပ်ရပါတယ်။
loop ပတ်ရင်း `$book->author` ဆိုတဲ့အချိန်မှာ query တစ်ကြိမ်စီလုပ်ရပါတယ်။
အဲတော့ ကျနော်တို့ database ထဲမှာ စာအုပ်ပေါင်း 100 ရှိတယ်ဆိုရင် စုစုပေါင်း 101 ကြိမ် query ဆွဲရသလိုဖြစ်နေတာပါ။ ဒါကိုပဲ N + 1 Query Problem လိုခေါ်ကြတာပါ။
## ဘယ်လိုရှောင်ရှားမလဲ?
ဒါကို ရှောင်ရှားဖို့ဆိုရင်တော့ Laravel မှာဆိုရင်တော့တော်တော်လေးလွယ်ပါတယ်။
Laravel မှာတော့ ဒါကို ရှောင်ရှားဖို့အတွက် Eager Loading ကိုအသုံးပြု့ပါတယ်။
အထက်ပါဥပမာကို Eager Loading နဲ့ပြန်ရေးကြည့်မယ်ဆိုရင် ...
```
use App\Models\Book;

$books = Book::with('author')->get();

foreach ($books as $book) {
    echo $book->author->name;
}
```
ဒီနေရာမှာ `with('author')` ဆိုတဲ့အပိုင်းလေးက Eager Loading ကိုအသုံးပြု့ထားတဲအပိုင်းပါ။ ဆိုလိုတာကတော့ စာအုပ် information တွဲဆွဲယူရင်း author information တွေပါ တစ်ပါတည်းယူခဲတဲ့သဘောပါ။ အဲဒီလို Eager Loading နဲရေးလိုက်တဲအတွက်ကြောင့် Query 2 ကြိမ်ပဲအလုပ်လုပ်ပါတော့တယ်။

ပထမတစ်ခု့က စာအုပ်စာရင်းဆွဲထုတ်ဖို့
```
select * from books
```
ဒုတိယတစ်ခု့က သက်ဆိုင်ရာ စာရေးသူအားလုံးကို ထုတ်ဖို့
```
select * from authors where id in (1, 2, 3, 4, 5, ...)
```
အထက်ပါနည်းနဲ့ Eager Loading ကိုသုံးပြီး N + 1 ပြသာနာကိုရှောင်ရှားကြပါတယ်။
ဒီပြသာနာက Laravel မှာတင်မဟုတ်ပဲ တစ်ခြား frameworks, languages, library  မှာလည်းရှိနေမှာပါပဲ။ အထူးဂရုပြု့ရှောင်းရှားကြရမှာဖြစ်ပါတယ်။
## References
Laravel မှာ Eager Loading နဲ့ N + 1 ပြသာနာ အကြောင်အသေးစိတ် ဖတ်ချင်ရင်တော့ [ဒီမှာ](https://laravel.com/docs/8.x/eloquent-relationships#eager-loading) ရပါတယ်။

<a href="https://ko-fi.com/ayarhlaine">
<img height="12" width="30%" src="https://res.cloudinary.com/practicaldev/image/fetch/s--KS7c42cU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.ko-fi.com/cdn/kofi1.png%3Fv%3D2" alt="Buy Me a Coffee at ko-fi.com" loading="lazy">
</a>

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

A.Y.H
Public code snippets are now available
Tags: productivity, opensource, snippets, bookmarks
Published: 2021-01-03 06:23:13

You have now the possibility to make your code snippets public on [Bookmarks.dev](https://www.bookmarks.dev):
 
![Create public snippet](https://dev-to-uploads.s3.amazonaws.com/i/m0uncs9m86vjkxixeywd.gif)


> Thus you can help to build a code recipes knowledge base and benefit from the "code" knowledge of others if they also choose to share

When a code snippet is public, you can use the "Copy to mine" functionality to edit it and add it to your own personal collection. They will be then searchable and editable in "My Snippets" collection:

![Copy to mine snippets](https://dev-to-uploads.s3.amazonaws.com/i/o6x6nrk747wmyw9ub9b7.gif)


Any contributions, suggestions and ideas are very welcomed [on Github](https://github.com/BookmarksDev/bookmarks.dev/issues).

> If your code snippet is awesome, you can contact me and get published on [Codepedia.org](https://www.codepedia.org)
Is the JAM stack the future of web development?
Tags: discuss, jamstack, webdev, javascript
Published: 2021-01-03 06:12:24

---
title: Is the JAM stack the future of web development?
published: true
description: Over the last few years, this stack has become increasingly popular. That said, the JAM stack does have its limitations. 
tags: #discuss #JAMstack #webdev #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/816qlg17l6jz1ogjl3ul.jpg
---

The JAM stack consists of JavaScript, APIs, and Markup. 

Over the last few years, this stack has become increasingly popular with fun and new options (for example, [Gastby](https://jamstack.org/generators/gatsby/)). 

And now with platforms such as Netlify, deploying a JAM stack site is dead simple.

![JAM stack architecture vs traditional web architecture](https://d33wubrfki0l68.cloudfront.net/b7d16f7f3654fb8572360301e60d76df254a323e/385ec/img/svg/architecture.svg)


_Above: traditional web architecture is on the left, while the JAM stack architecture is on the right._ Source: [JAMstack.org](https://jamstack.org/)

That said, the JAM stack does have its limitations. 

What do you think? Is the JAM stack the future of web development or is it destined to be simply a fun stack for hobbyists?