DEV Community: Florian

JAMstack with NuxtJS Content & Forestry = 🚀

Florian — Mon, 22 Mar 2021 06:36:12 +0000

JAMstack

I'm a JAMstack lover. It's easy, fast (like, really fast!), high performance, and cheap, thanks to providers such as Netlify.

For my last side project Tuto.dev, I wanted something simple to create & maintain the Frontend. I'm a fanboy of VueJS, so the choice of NuxtJS Content was a no-brainer for me. NuxtJS Content lets you create Markdown files under a folder called 'content' and then use
<nuxt-content> to populate your page with the content from the Markdown file. Yeah, it's that simple :

<template>
  <article>
    <h1>{{ page.title }}</h1>
    <nuxt-content :document="page" />
  </article>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const page = await $content('home').fetch()

    return {
      page
    }
  }
}
</script>

The CMS

Now that I have the Frontend ready, I wanted to create, edit & manage those Markdown files.

I've tested tons of Headless CMS like Sanity & Strapi. They are all great, but they don't fit my needs. I required something more basic! A way to edit my .md files from my content folder and push them into my GitHub repo to trigger a new build from Netlify. Nothing more.

So I've tried another solution at first: Obsidian. Obsidian is a text editor on steroids; if you're looking for a Notion alternative, you should give it a try.
Plus, you can install plugins made by the community, making it easier to create and maintain your work. And there is an Obsidian plugin made by Denis Olehov that Push the markdown files every x minutes. Remarkable!

It worked great, but media management was painful: your .md files are in a /content folder when your media files are in the /assets or /static folder. So every time I add an image into a folder, I had to remember the relative path and then add it into Obsidian ... boring.

Forestry 🌲

And then, someone shared with me another CMS I was not aware of : Forestry.io

When I first saw the website headline "Headless CMS that commits" I was excited like it was Christmas.
It was exactly what I was looking for! To summarize, Forestry is a CMS that can create & edit Markdown files and push them into your Repo when you save them.

Forestry is by far the most simplistic CMS I've ever used. But don't get me wrong: simplicity doesn't imply limited functionalities! Forestry is also a really powerful tool when it comes to media management and Front-Matter editing.

With the Front-Matter block, we can add and manipulate metadata from our Markdown file and then create an API by fetching those metadata into NuxtJS.

Yup, we can create an API with our Markdown files. When I first saw that, my mind was blown 🤯

NuxtJS : Create a custom error page (404, 500, ... )

Florian — Wed, 25 Nov 2020 11:18:34 +0000

Error pages in NuxtJS are really useful in Dev, but in Prod, your users don't really care about the error details! It's always better to create a custom error page with a simple message that explains that something went wrong.

The good news is: creating a custom error page in NuxtJS is deadly simple!

Create an "error.vue" file into your layout folder :

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred - {{ error.statusCode }} </h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'error' // you can set a custom layout for the error page
  }
</script>

In this example, we display a "Page not found" when the error.statusCode is equal to 404, else we display another error message with the status code. (ex: "An error occurred - 500")

https://nuxtjs.org/docs/2.x/concepts/views#error-page

BONUS - Want the same error page as the image? Here is the code! 👩‍🚀

DO NOT FORGET TO INSTALL TAILWINDCSS, or this won't work.
https://tailwindcss.nuxtjs.org/

<template>
  <div>
    <div
      id="sky"
      class="fixed z-50 top-0 h-screen w-screen flex justify-center items-center"
    >
      <div
        class="hidden flex-col items-center justify-center bg-gray-900 text-white w-screen h-screen md:flex"
      >
        <div id="stars" class="self-start z-30"></div>
        <div id="stars2" class="self-start z-40"></div>
        <div id="stars3" class="self-start z-20"></div>
        <h1 class="font-mono text-white z-50 text-6xl">
          {{ error.statusCode }} - Ooops... are you lost?
        </h1>
        <nuxt-link
          to="/"
          class="space cursor-pointer z-50 flex-col justify-center items-center flex pt-4 px-8 rounded-md text-purple-800 transform duration-150 ease-in hover:text-white hover:scale-105"
        >
        <!-- DON T FORGET TO CHANGE THE IMG -->
          <img src="/astronaut.png" alt="" />
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'error', // you can set a custom layout for the error page
}
</script>

<style scopped>
body {
  background-color: #263238;
}

.space img {
  -webkit-animation: mover 2s ease-in-out infinite alternate;
  animation: mover 2s ease-in-out infinite alternate;
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

#sky {
  height: 100%;
  width: 100vw;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  padding: 10% 0;
}

#stars {
  width: 1px;
  height: 1px;
  left: 0;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff,
    1256px 136px #fff, 855px 197px #fff, 1399px 1973px #fff, 1243px 429px #fff,
    1281px 571px #fff, 839px 531px #fff, 789px 1980px #fff, 877px 783px #fff,
    1526px 1850px #fff, 644px 1283px #fff, 1982px 1953px #fff,
    1109px 1232px #fff, 1532px 643px #fff, 823px 1287px #fff, 667px 34px #fff,
    24px 1469px #fff, 1029px 1130px #fff, 1645px 254px #fff, 1054px 1000px #fff,
    1341px 254px #fff, 184px 188px #fff, 1160px 1521px #fff, 348px 1083px #fff,
    1436px 1796px #fff, 441px 361px #fff, 1239px 575px #fff, 1055px 140px #fff,
    1552px 502px #fff, 607px 864px #fff, 967px 1883px #fff, 1407px 1955px #fff,
    405px 1148px #fff, 604px 992px #fff, 1116px 506px #fff, 13px 832px #fff,
    295px 189px #fff, 964px 1175px #fff, 1988px 52px #fff, 935px 209px #fff,
    17px 142px #fff, 770px 333px #fff, 682px 633px #fff, 510px 466px #fff,
    366px 79px #fff, 199px 954px #fff, 882px 277px #fff, 744px 655px #fff,
    37px 1659px #fff, 1217px 1885px #fff, 1107px 597px #fff, 1060px 1335px #fff,
    773px 601px #fff, 1939px 1632px #fff, 1607px 1774px #fff, 1531px 1550px #fff,
    1042px 60px #fff, 850px 1502px #fff, 1670px 492px #fff, 1357px 1654px #fff,
    1279px 1521px #fff, 633px 1956px #fff, 1122px 1981px #fff, 661px 657px #fff,
    521px 1132px #fff, 1593px 813px #fff, 1204px 1463px #fff, 1112px 1495px #fff,
    1755px 367px #fff, 1685px 1805px #fff, 1982px 196px #fff, 484px 51px #fff,
    1041px 330px #fff, 1487px 563px #fff, 311px 1872px #fff, 330px 976px #fff,
    6px 1754px #fff, 1447px 1182px #fff, 1926px 148px #fff, 1640px 490px #fff,
    1548px 1357px #fff, 1052px 1340px #fff, 1083px 56px #fff, 1890px 339px #fff,
    277px 1609px #fff, 892px 1792px #fff, 1322px 86px #fff, 1509px 1515px #fff,
    1650px 1722px #fff, 334px 497px #fff, 888px 143px #fff, 1325px 259px #fff,
    1330px 1505px #fff, 1374px 645px #fff, 1184px 937px #fff, 911px 1044px #fff,
    32px 1257px #fff, 297px 1884px #fff, 1031px 963px #fff, 411px 916px #fff,
    243px 1305px #fff, 898px 200px #fff, 1550px 156px #fff, 159px 716px #fff,
    240px 1130px #fff, 1046px 1905px #fff, 1405px 1277px #fff, 275px 124px #fff,
    964px 795px #fff, 1270px 1387px #fff, 1391px 1880px #fff, 484px 1027px #fff,
    1681px 1706px #fff, 1665px 697px #fff, 1073px 1078px #fff,
    1808px 1313px #fff, 1669px 1266px #fff, 1965px 747px #fff, 1734px 972px #fff,
    1549px 1434px #fff, 945px 146px #fff, 1211px 1383px #fff, 1921px 1637px #fff,
    271px 1725px #fff, 739px 1725px #fff, 1634px 1827px #fff, 961px 1131px #fff,
    513px 839px #fff, 1553px 1725px #fff, 82px 1667px #fff, 3px 1797px #fff,
    517px 1511px #fff, 1644px 929px #fff, 120px 1638px #fff, 579px 1168px #fff,
    147px 680px #fff, 61px 1146px #fff, 884px 598px #fff, 630px 1324px #fff,
    1709px 1340px #fff, 1332px 1142px #fff, 1990px 1397px #fff,
    854px 1527px #fff, 1293px 634px #fff, 1063px 506px #fff, 1361px 668px #fff,
    926px 347px #fff, 145px 1031px #fff, 1289px 1519px #fff, 1977px 1560px #fff,
    70px 1353px #fff, 653px 1634px #fff, 1182px 340px #fff, 1264px 1127px #fff,
    1246px 40px #fff, 428px 691px #fff, 1531px 1817px #fff, 431px 1906px #fff,
    1406px 1665px #fff, 597px 1588px #fff, 1273px 355px #fff, 995px 1018px #fff,
    1319px 528px #fff, 1454px 715px #fff, 1587px 1052px #fff, 921px 193px #fff,
    1012px 479px #fff, 689px 1019px #fff, 1307px 420px #fff, 1153px 108px #fff,
    1343px 775px #fff, 1236px 1061px #fff, 1117px 1099px #fff, 308px 533px #fff,
    1262px 509px #fff, 830px 24px #fff, 426px 695px #fff, 1148px 1397px #fff,
    1016px 1719px #fff, 1142px 1280px #fff, 1841px 310px #fff,
    1890px 1708px #fff, 1399px 589px #fff, 913px 1291px #fff, 955px 1445px #fff,
    431px 491px #fff, 580px 1002px #fff, 796px 186px #fff, 445px 1634px #fff,
    1543px 1377px #fff, 1853px 57px #fff, 34px 620px #fff, 1056px 923px #fff,
    1027px 134px #fff, 1248px 1252px #fff, 756px 1855px #fff, 143px 654px #fff,
    253px 347px #fff, 181px 943px #fff, 1044px 1774px #fff, 367px 1925px #fff,
    1125px 854px #fff, 1276px 141px #fff, 422px 413px #fff, 1261px 973px #fff,
    1030px 1349px #fff, 1349px 1850px #fff, 552px 1286px #fff, 606px 888px #fff,
    464px 1922px #fff, 1799px 260px #fff, 1984px 788px #fff, 1210px 450px #fff,
    1288px 1530px #fff, 911px 1896px #fff, 689px 4px #fff, 806px 162px #fff,
    1201px 604px #fff, 908px 531px #fff, 137px 1123px #fff, 1165px 496px #fff,
    1567px 1797px #fff, 614px 504px #fff, 1551px 1165px #fff, 1309px 1032px #fff,
    1321px 26px #fff, 1372px 326px #fff, 1762px 1159px #fff, 728px 5px #fff,
    1364px 459px #fff, 1333px 918px #fff, 1082px 1732px #fff, 286px 319px #fff,
    1636px 1220px #fff, 350px 966px #fff, 124px 219px #fff, 184px 1654px #fff,
    1195px 160px #fff, 1690px 737px #fff, 1386px 472px #fff, 1522px 1911px #fff,
    1082px 1129px #fff, 491px 67px #fff, 826px 393px #fff, 643px 632px #fff,
    1934px 1461px #fff, 1325px 316px #fff, 934px 1722px #fff, 1044px 879px #fff,
    1109px 1482px #fff, 1040px 642px #fff, 801px 509px #fff, 1352px 1583px #fff,
    160px 339px #fff, 1111px 1731px #fff, 1650px 1190px #fff, 1804px 1019px #fff,
    745px 604px #fff, 1391px 1108px #fff, 344px 708px #fff, 395px 111px #fff,
    913px 1180px #fff, 537px 1036px #fff, 1048px 1611px #fff, 1926px 155px #fff,
    392px 193px #fff, 1980px 1465px #fff, 1853px 1349px #fff, 204px 1317px #fff,
    1342px 1956px #fff, 785px 1564px #fff, 1478px 612px #fff, 1459px 491px #fff,
    1767px 265px #fff, 1032px 495px #fff, 946px 1196px #fff, 607px 285px #fff,
    887px 1940px #fff, 1618px 962px #fff, 85px 801px #fff, 1828px 525px #fff,
    523px 1927px #fff, 280px 1676px #fff, 551px 1133px #fff, 1888px 936px #fff,
    875px 863px #fff, 395px 1954px #fff, 155px 590px #fff, 1924px 262px #fff,
    1039px 1430px #fff, 1356px 1816px #fff, 978px 671px #fff, 1968px 1044px #fff,
    1693px 15px #fff, 266px 1506px #fff, 1061px 224px #fff, 690px 1132px #fff,
    1149px 313px #fff, 744px 898px #fff, 848px 1851px #fff, 296px 761px #fff,
    55px 624px #fff, 573px 131px #fff, 483px 1869px #fff, 157px 1304px #fff,
    496px 489px #fff, 729px 1730px #fff, 163px 1023px #fff, 1065px 1426px #fff,
    1058px 865px #fff, 1204px 1762px #fff, 73px 527px #fff, 668px 1237px #fff,
    1px 259px #fff, 1027px 107px #fff, 1347px 842px #fff, 720px 819px #fff,
    97px 1047px #fff, 474px 1262px #fff, 1406px 1163px #fff, 1620px 1312px #fff,
    292px 423px #fff, 1579px 1735px #fff, 687px 305px #fff, 1810px 1822px #fff,
    1499px 241px #fff, 1578px 1308px #fff, 770px 1441px #fff, 398px 646px #fff,
    1186px 1423px #fff, 6px 201px #fff, 1684px 1057px #fff, 1252px 1352px #fff,
    1649px 317px #fff, 746px 1777px #fff, 537px 97px #fff, 347px 1613px #fff,
    1709px 1896px #fff, 134px 957px #fff, 755px 340px #fff, 107px 1057px #fff,
    263px 1459px #fff, 1559px 1124px #fff, 1082px 19px #fff, 557px 795px #fff,
    596px 455px #fff, 1877px 1535px #fff, 457px 320px #fff, 532px 270px #fff,
    773px 1991px #fff, 644px 1840px #fff, 777px 1413px #fff, 726px 203px #fff,
    20px 740px #fff, 655px 909px #fff, 396px 1998px #fff, 235px 954px #fff,
    1737px 264px #fff, 670px 1532px #fff, 498px 159px #fff, 540px 1997px #fff,
    1792px 1327px #fff, 880px 1023px #fff, 1917px 1938px #fff, 1859px 148px #fff,
    1147px 1781px #fff, 428px 1876px #fff, 1952px 605px #fff, 655px 80px #fff,
    1500px 1545px #fff, 1656px 644px #fff, 615px 247px #fff, 795px 1881px #fff,
    1750px 586px #fff, 148px 1490px #fff, 1434px 74px #fff, 417px 1969px #fff,
    962px 1526px #fff, 835px 962px #fff, 330px 1767px #fff, 1557px 435px #fff,
    240px 341px #fff, 1857px 1589px #fff, 765px 281px #fff, 1452px 405px #fff,
    1480px 1724px #fff, 950px 1094px #fff, 710px 1388px #fff, 1333px 1919px #fff,
    706px 1589px #fff, 1476px 1465px #fff, 744px 291px #fff, 123px 870px #fff,
    1406px 428px #fff, 727px 1609px #fff, 1149px 1838px #fff, 78px 169px #fff,
    1088px 284px #fff, 670px 399px #fff, 711px 1923px #fff, 42px 1720px #fff,
    667px 570px #fff, 1274px 693px #fff, 1056px 644px #fff, 1937px 793px #fff,
    1200px 602px #fff, 1493px 755px #fff, 545px 870px #fff, 887px 270px #fff,
    1290px 164px #fff, 265px 1185px #fff;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff,
    1256px 136px #fff, 855px 197px #fff, 1399px 1973px #fff, 1243px 429px #fff,
    1281px 571px #fff, 839px 531px #fff, 789px 1980px #fff, 877px 783px #fff,
    1526px 1850px #fff, 644px 1283px #fff, 1982px 1953px #fff,
    1109px 1232px #fff, 1532px 643px #fff, 823px 1287px #fff, 667px 34px #fff,
    24px 1469px #fff, 1029px 1130px #fff, 1645px 254px #fff, 1054px 1000px #fff,
    1341px 254px #fff, 184px 188px #fff, 1160px 1521px #fff, 348px 1083px #fff,
    1436px 1796px #fff, 441px 361px #fff, 1239px 575px #fff, 1055px 140px #fff,
    1552px 502px #fff, 607px 864px #fff, 967px 1883px #fff, 1407px 1955px #fff,
    405px 1148px #fff, 604px 992px #fff, 1116px 506px #fff, 13px 832px #fff,
    295px 189px #fff, 964px 1175px #fff, 1988px 52px #fff, 935px 209px #fff,
    17px 142px #fff, 770px 333px #fff, 682px 633px #fff, 510px 466px #fff,
    366px 79px #fff, 199px 954px #fff, 882px 277px #fff, 744px 655px #fff,
    37px 1659px #fff, 1217px 1885px #fff, 1107px 597px #fff, 1060px 1335px #fff,
    773px 601px #fff, 1939px 1632px #fff, 1607px 1774px #fff, 1531px 1550px #fff,
    1042px 60px #fff, 850px 1502px #fff, 1670px 492px #fff, 1357px 1654px #fff,
    1279px 1521px #fff, 633px 1956px #fff, 1122px 1981px #fff, 661px 657px #fff,
    521px 1132px #fff, 1593px 813px #fff, 1204px 1463px #fff, 1112px 1495px #fff,
    1755px 367px #fff, 1685px 1805px #fff, 1982px 196px #fff, 484px 51px #fff,
    1041px 330px #fff, 1487px 563px #fff, 311px 1872px #fff, 330px 976px #fff,
    6px 1754px #fff, 1447px 1182px #fff, 1926px 148px #fff, 1640px 490px #fff,
    1548px 1357px #fff, 1052px 1340px #fff, 1083px 56px #fff, 1890px 339px #fff,
    277px 1609px #fff, 892px 1792px #fff, 1322px 86px #fff, 1509px 1515px #fff,
    1650px 1722px #fff, 334px 497px #fff, 888px 143px #fff, 1325px 259px #fff,
    1330px 1505px #fff, 1374px 645px #fff, 1184px 937px #fff, 911px 1044px #fff,
    32px 1257px #fff, 297px 1884px #fff, 1031px 963px #fff, 411px 916px #fff,
    243px 1305px #fff, 898px 200px #fff, 1550px 156px #fff, 159px 716px #fff,
    240px 1130px #fff, 1046px 1905px #fff, 1405px 1277px #fff, 275px 124px #fff,
    964px 795px #fff, 1270px 1387px #fff, 1391px 1880px #fff, 484px 1027px #fff,
    1681px 1706px #fff, 1665px 697px #fff, 1073px 1078px #fff,
    1808px 1313px #fff, 1669px 1266px #fff, 1965px 747px #fff, 1734px 972px #fff,
    1549px 1434px #fff, 945px 146px #fff, 1211px 1383px #fff, 1921px 1637px #fff,
    271px 1725px #fff, 739px 1725px #fff, 1634px 1827px #fff, 961px 1131px #fff,
    513px 839px #fff, 1553px 1725px #fff, 82px 1667px #fff, 3px 1797px #fff,
    517px 1511px #fff, 1644px 929px #fff, 120px 1638px #fff, 579px 1168px #fff,
    147px 680px #fff, 61px 1146px #fff, 884px 598px #fff, 630px 1324px #fff,
    1709px 1340px #fff, 1332px 1142px #fff, 1990px 1397px #fff,
    854px 1527px #fff, 1293px 634px #fff, 1063px 506px #fff, 1361px 668px #fff,
    926px 347px #fff, 145px 1031px #fff, 1289px 1519px #fff, 1977px 1560px #fff,
    70px 1353px #fff, 653px 1634px #fff, 1182px 340px #fff, 1264px 1127px #fff,
    1246px 40px #fff, 428px 691px #fff, 1531px 1817px #fff, 431px 1906px #fff,
    1406px 1665px #fff, 597px 1588px #fff, 1273px 355px #fff, 995px 1018px #fff,
    1319px 528px #fff, 1454px 715px #fff, 1587px 1052px #fff, 921px 193px #fff,
    1012px 479px #fff, 689px 1019px #fff, 1307px 420px #fff, 1153px 108px #fff,
    1343px 775px #fff, 1236px 1061px #fff, 1117px 1099px #fff, 308px 533px #fff,
    1262px 509px #fff, 830px 24px #fff, 426px 695px #fff, 1148px 1397px #fff,
    1016px 1719px #fff, 1142px 1280px #fff, 1841px 310px #fff,
    1890px 1708px #fff, 1399px 589px #fff, 913px 1291px #fff, 955px 1445px #fff,
    431px 491px #fff, 580px 1002px #fff, 796px 186px #fff, 445px 1634px #fff,
    1543px 1377px #fff, 1853px 57px #fff, 34px 620px #fff, 1056px 923px #fff,
    1027px 134px #fff, 1248px 1252px #fff, 756px 1855px #fff, 143px 654px #fff,
    253px 347px #fff, 181px 943px #fff, 1044px 1774px #fff, 367px 1925px #fff,
    1125px 854px #fff, 1276px 141px #fff, 422px 413px #fff, 1261px 973px #fff,
    1030px 1349px #fff, 1349px 1850px #fff, 552px 1286px #fff, 606px 888px #fff,
    464px 1922px #fff, 1799px 260px #fff, 1984px 788px #fff, 1210px 450px #fff,
    1288px 1530px #fff, 911px 1896px #fff, 689px 4px #fff, 806px 162px #fff,
    1201px 604px #fff, 908px 531px #fff, 137px 1123px #fff, 1165px 496px #fff,
    1567px 1797px #fff, 614px 504px #fff, 1551px 1165px #fff, 1309px 1032px #fff,
    1321px 26px #fff, 1372px 326px #fff, 1762px 1159px #fff, 728px 5px #fff,
    1364px 459px #fff, 1333px 918px #fff, 1082px 1732px #fff, 286px 319px #fff,
    1636px 1220px #fff, 350px 966px #fff, 124px 219px #fff, 184px 1654px #fff,
    1195px 160px #fff, 1690px 737px #fff, 1386px 472px #fff, 1522px 1911px #fff,
    1082px 1129px #fff, 491px 67px #fff, 826px 393px #fff, 643px 632px #fff,
    1934px 1461px #fff, 1325px 316px #fff, 934px 1722px #fff, 1044px 879px #fff,
    1109px 1482px #fff, 1040px 642px #fff, 801px 509px #fff, 1352px 1583px #fff,
    160px 339px #fff, 1111px 1731px #fff, 1650px 1190px #fff, 1804px 1019px #fff,
    745px 604px #fff, 1391px 1108px #fff, 344px 708px #fff, 395px 111px #fff,
    913px 1180px #fff, 537px 1036px #fff, 1048px 1611px #fff, 1926px 155px #fff,
    392px 193px #fff, 1980px 1465px #fff, 1853px 1349px #fff, 204px 1317px #fff,
    1342px 1956px #fff, 785px 1564px #fff, 1478px 612px #fff, 1459px 491px #fff,
    1767px 265px #fff, 1032px 495px #fff, 946px 1196px #fff, 607px 285px #fff,
    887px 1940px #fff, 1618px 962px #fff, 85px 801px #fff, 1828px 525px #fff,
    523px 1927px #fff, 280px 1676px #fff, 551px 1133px #fff, 1888px 936px #fff,
    875px 863px #fff, 395px 1954px #fff, 155px 590px #fff, 1924px 262px #fff,
    1039px 1430px #fff, 1356px 1816px #fff, 978px 671px #fff, 1968px 1044px #fff,
    1693px 15px #fff, 266px 1506px #fff, 1061px 224px #fff, 690px 1132px #fff,
    1149px 313px #fff, 744px 898px #fff, 848px 1851px #fff, 296px 761px #fff,
    55px 624px #fff, 573px 131px #fff, 483px 1869px #fff, 157px 1304px #fff,
    496px 489px #fff, 729px 1730px #fff, 163px 1023px #fff, 1065px 1426px #fff,
    1058px 865px #fff, 1204px 1762px #fff, 73px 527px #fff, 668px 1237px #fff,
    1px 259px #fff, 1027px 107px #fff, 1347px 842px #fff, 720px 819px #fff,
    97px 1047px #fff, 474px 1262px #fff, 1406px 1163px #fff, 1620px 1312px #fff,
    292px 423px #fff, 1579px 1735px #fff, 687px 305px #fff, 1810px 1822px #fff,
    1499px 241px #fff, 1578px 1308px #fff, 770px 1441px #fff, 398px 646px #fff,
    1186px 1423px #fff, 6px 201px #fff, 1684px 1057px #fff, 1252px 1352px #fff,
    1649px 317px #fff, 746px 1777px #fff, 537px 97px #fff, 347px 1613px #fff,
    1709px 1896px #fff, 134px 957px #fff, 755px 340px #fff, 107px 1057px #fff,
    263px 1459px #fff, 1559px 1124px #fff, 1082px 19px #fff, 557px 795px #fff,
    596px 455px #fff, 1877px 1535px #fff, 457px 320px #fff, 532px 270px #fff,
    773px 1991px #fff, 644px 1840px #fff, 777px 1413px #fff, 726px 203px #fff,
    20px 740px #fff, 655px 909px #fff, 396px 1998px #fff, 235px 954px #fff,
    1737px 264px #fff, 670px 1532px #fff, 498px 159px #fff, 540px 1997px #fff,
    1792px 1327px #fff, 880px 1023px #fff, 1917px 1938px #fff, 1859px 148px #fff,
    1147px 1781px #fff, 428px 1876px #fff, 1952px 605px #fff, 655px 80px #fff,
    1500px 1545px #fff, 1656px 644px #fff, 615px 247px #fff, 795px 1881px #fff,
    1750px 586px #fff, 148px 1490px #fff, 1434px 74px #fff, 417px 1969px #fff,
    962px 1526px #fff, 835px 962px #fff, 330px 1767px #fff, 1557px 435px #fff,
    240px 341px #fff, 1857px 1589px #fff, 765px 281px #fff, 1452px 405px #fff,
    1480px 1724px #fff, 950px 1094px #fff, 710px 1388px #fff, 1333px 1919px #fff,
    706px 1589px #fff, 1476px 1465px #fff, 744px 291px #fff, 123px 870px #fff,
    1406px 428px #fff, 727px 1609px #fff, 1149px 1838px #fff, 78px 169px #fff,
    1088px 284px #fff, 670px 399px #fff, 711px 1923px #fff, 42px 1720px #fff,
    667px 570px #fff, 1274px 693px #fff, 1056px 644px #fff, 1937px 793px #fff,
    1200px 602px #fff, 1493px 755px #fff, 545px 870px #fff, 887px 270px #fff,
    1290px 164px #fff, 265px 1185px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff, 7px 631px #fff, 1702px 1288px #fff, 799px 987px #fff,
    1661px 1081px #fff, 1655px 1846px #fff, 361px 1676px #fff,
    1979px 1521px #fff, 415px 418px #fff, 1641px 1999px #fff, 955px 882px #fff,
    1290px 324px #fff, 930px 1826px #fff, 989px 807px #fff, 461px 917px #fff;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff, 7px 631px #fff, 1702px 1288px #fff, 799px 987px #fff,
    1661px 1081px #fff, 1655px 1846px #fff, 361px 1676px #fff,
    1979px 1521px #fff, 415px 418px #fff, 1641px 1999px #fff, 955px 882px #fff,
    1290px 324px #fff, 930px 1826px #fff, 989px 807px #fff, 461px 917px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff, 776px 907px #fff, 435px 1934px #fff, 542px 321px #fff,
    320px 754px #fff, 622px 1759px #fff, 1758px 597px #fff, 742px 469px #fff,
    638px 1795px #fff, 1578px 1755px #fff, 1881px 1923px #fff, 148px 1001px #fff,
    1333px 1015px #fff, 663px 453px #fff, 166px 730px #fff, 319px 1423px #fff,
    1571px 1401px #fff, 1538px 1363px #fff, 851px 15px #fff, 1884px 590px #fff,
    1016px 778px #fff, 1993px 1060px #fff, 40px 444px #fff, 667px 639px #fff,
    1299px 1074px #fff, 547px 923px #fff, 93px 1476px #fff, 1411px 1712px #fff,
    535px 1825px #fff;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: ' ';
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff, 776px 907px #fff, 435px 1934px #fff, 542px 321px #fff,
    320px 754px #fff, 622px 1759px #fff, 1758px 597px #fff, 742px 469px #fff,
    638px 1795px #fff, 1578px 1755px #fff, 1881px 1923px #fff, 148px 1001px #fff,
    1333px 1015px #fff, 663px 453px #fff, 166px 730px #fff, 319px 1423px #fff,
    1571px 1401px #fff, 1538px 1363px #fff, 851px 15px #fff, 1884px 590px #fff,
    1016px 778px #fff, 1993px 1060px #fff, 40px 444px #fff, 667px 639px #fff,
    1299px 1074px #fff, 547px 923px #fff, 93px 1476px #fff, 1411px 1712px #fff,
    535px 1825px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
</style>

VueJS tips : Replay CSS animation with VueJS

Florian — Wed, 18 Nov 2020 07:02:18 +0000

Replaying CSS animation can be a pain in the a . So here is a little tip to **replay your animation with VueJS!

Here is the base code :

  <div
  id="app"
  >
    <div class="success-checkmark">
      <div class="check-icon">
        <span class="icon-line line-tip"></span>
        <span class="icon-line line-long"></span>
        <div class="icon-circle"></div>
        <div class="icon-fix"></div>
      </div>
    </div>
    <button>
      Replay
    </button>
  </div>

/**
 * Extracted from: SweetAlert
 * Modified by: Istiak Tridip
 */
.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}
.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #edf2f7;
}
.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
  content: '';
  height: 100px;
  position: absolute;
  background: #9f7aea;
  transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: #edf2f7;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}
.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}
.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid rgba(255, 255, 255, 0.5);
}
.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #9f7aea;
}
@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

All you need to do is to add a :key to our animated element and to increment the key every time a user clicks on the replay button. Yup, that's it!

  <div
  id="app"
  >
    <div class="success-checkmark" :key="replay">
      <div class="check-icon">
        <span class="icon-line line-tip"></span>
        <span class="icon-line line-long"></span>
        <div class="icon-circle"></div>
        <div class="icon-fix"></div>
      </div>
    </div>
    <button @click="replay++">
      Replay
    </button>
  </div>

new Vue({
  el: "#app",
  data: {
  replay: 0
  },
})

You can find the code here: https://jsfiddle.net/Icesofty/p5jtu7q4/

Create a Blockchain in 50 lines of code with NodeJS

Florian — Sat, 08 Aug 2020 13:30:41 +0000

I already talked about the nonce in my previous article. It's know time to create our first Blockchain application in 50 lines of codes with NodeJS!

We'll create an oversimplified version of what can be a Blockchain, and I will focus on the mining process, not on how to design the networking system between multiple nodes.

Also, because NodeJS is a single-thread language, I can't recommend to use it for the mining side. This article is exclusively here to demystify how the Blockchain works.

We need two main files :

blockchain.JSON will store the Blockchain data
app.js for the app

I won't describe each line of code since I've already added comments to my source code.

blockchain.JSON will store the Blockchain data architecture :

[
  {
    "id": "0",
    "timestamp": 0,
    "nonce": 0
  }
]

app.js :

// Sha3 is a module to hash documents
const { SHA3 } = require("sha3");
const hash = new SHA3(256);
const fs = require("fs");

const fileName = "./blochain.json";

// We start our nonce at 0
let nonce = 0;
// Difficulty of the Blockchain. The more you add 0, the more it will be difficut to mine a Block
const difficulty = "000";
// Switch to end the while loop
let notFounded = true;

// Function used to update our Blockhcain
const updateBlockchain = (id, timestamp, nonce) => {
  let blockchain = require(fileName);
  // We create the new Block
  const addBlock = {
    id: id,
    timestamp: timestamp,
    nonce: nonce
  };
  // We add it into the Blockchain
  blockchain.push(addBlock);
  fs.writeFile(
    fileName,
    JSON.stringify(blockchain, null, 2),
    function writeJSON(err) {
      if (err) return console.log(err);
    }
  );
};

// Function to mine a Block
const mining = () => {
  var start = new Date().getTime();
  // We import the Blockchain
  const blockchain = require(fileName);

  while (notFounded) {
    // We need to reset our hash every loop
    hash.reset();
    // We hash the new data (block + nonce)
    hash.update(JSON.stringify(blockchain) + nonce);
    let hashed = hash.digest("hex");
    // IF the new hashed data starts with '000'
    if (hashed.startsWith(difficulty)) {
      var diff = (new Date().getTime() - start) / 1000;
      // We turn the switch off to end the while loop
      notFounded = false;
      console.log("\x1b[46m%s\x1b[0m", "//// FOUNDED ! ////");
      console.log(`Hash : ${hashed}`);
      console.log(`Nonce : ${nonce}`);
      console.log(`Total time : ${diff}s`);
      console.log("\x1b[46m%s\x1b[0m", "////           ////");
      // We execute the updateBlockchain
      updateBlockchain(hashed, Date.now(), nonce);
    } else {
      // PLEASE NOTE: If you want your mining process to be faster, delete or comment the next console.log()
      console.log(hashed);
      // We increment the nonce and start again the loop
      nonce++;
    }
  }
};

// When we launch the app, start mining
mining();

To run the app :
First, install yarn npm -g yarn
Then, install sha3 yarn add sha3
And that's it! You are ready to start the miner with node app.js . If you want, you can improve the difficulty by adding more 0 into const difficulty.

Repo under MIT Licence: https://github.com/Icesofty/blockchain-demo

Understanding the concept of the Nonce & SHA3-256 in a Blockchain with NodeJS

Florian — Mon, 03 Aug 2020 08:59:33 +0000

The SHA3-256 algorithm will convert your data (text, images... ) in a hash. The beauty of this algorithm is that it's unpredictable and irreversible (you can't find the initial data only with the hash)

Let's take the following text example: 'Hello, World'
If you enter 'Hello, World' here , you'll get the following hash:

844af7bf6a5d414359dcd8845cb52d515397410e1668e00c8469ea8728c4ffe8

If you add a simple '.' in the end, you'll end up with a completly different hash :
3d3a78714924f9574b7dae02399feb0bf100c3893ed1f7a6934a687ff088f7d4
There is no predictible pattern behind SHA3-256, and it makes it nearly impossible to hack.

It's basically what a blockchain does; it hashes block data.
BUT to validate a block, you'll need to find the 'secret key.'
This secret-key is called a nonce; a nonce is a number that added to the block will make the hash start with the number of 0 sets in difficulty.

Let's take a simple example:

We have the following text in our block: 'Hello, World'
We set the difficulty to '000' - That means that we want the hash to start with '000.'
To validate the block, we need to found a nonce to the data that will make the hash starts with the set difficulty.
We start with nonce = 0

'Hello, World0'
44ede83c11bee0db1e9c53ae734c705771f56dff82413811c70e0f39862f3e7c

False - The hash don't start with '000'

'Hello, World1'
940fa6081f74fff0aab240034da8dc7569970a28ddfb63af61d62c746484a2b1

False - The hash don't start with '000'

'Hello, World2'
0b78c66e6596ce0ea1af4e3fab848663ef3b0c4b6bc771dd2338d89cacc1bc52

False - The hash don't start with '000'
'Hello, World3'

f2d8cec2539f4a237f5099c6a68209329873668b694634d780e289c994229389

False - The hash don't start with '000'
[...]

'Hello, World567'
000f96a254d94fb611f76bf639906b587c8818441e180d3dd1ea339a39171d2c

True - The hash start with '000'

The more 0 you add to the difficulty, the harder it will become to find the nonce.
And because we're devs, we'll create a little NodeJS project to 'mine' the block for us.

Let's code!

To code this miner, I'll assume that you already have NodeJS, Nodemon & Yarn installed on your machine.
To install NodeJS & NPM:
https://nodejs.org/en/

To install yarn with npm:
npm install -g yarn

To install Nodemon globally:
npm install -g nodemon

First, create a folder & the entry point of our app

mkdir Sha256-demo
cd Sha256-demo
touch index.js
yarn init

To make it easier for us, we need to install the sha3 module

yarn add sha3

We can now update our index.js

// We import the module in the project
const { SHA3 } = require("sha3");

// We create a new SHA3-256 instance
const hash = new SHA3(256);

//The initial text data
let words = "Hello, World";
//We set the difficulty
let difficulty = "000";
// nonce start at 0
let nonce = 0;
// The final hash will be updated in this var
let hex = "";
// Our switch
let check = true;

// We loop until we found the nonce
while (check) {
  // We reset the hash on each loop
  hash.reset();
  // We add the sentence to hash
  hash.update(words + nonce.toString());
  // We digest the hash in hex
  let digestHex = hash.digest("hex");
  // We chack if the digest start with the difficulty
  if (digestHex.startsWith(difficulty)) {
    // if true, we store the hex
    hex = digestHex;
    // We turn of our switch to end the loop
    check = false;
  } else {
    // if false, we increment the nonce and start again the process
    nonce++;
  }
}

console.log("Nonce: " + nonce); 
// Nonce: 567
console.log("Hex: " + hex); 
// Hex: 000f96a254d94fb611f76bf639906b587c8818441e180d3dd1ea339a39171d2c

// This means that the SHA3-256 of 'Hello, World' is 000f96a254d94fb611f76bf639906b587c8818441e180d3dd1ea339a39171d2c

To start the miner:

nodemon index.js

Setup Robo3T with Atlas - A step by step guide

Florian — Wed, 22 Jul 2020 08:01:32 +0000

If you don't know it yet, Atlas is the Cloud solution to host your Mongo database.
It's dead simple to set up, and the team behind MongoDB makes it. So it's a pretty reliable solution when you're looking to host your database.
And the best part is that you can start for free and pay as you grow!

Robo 3T is a powerful MongoDB GUI that allows you to visualize, create, update/patch & delete documents. Connected to Atlas, you can easily maintain and manage your collections & documents.

If you already have a Cluster ready, feel free to go to the second part of this article.

First - Let's create and set up our first Atlas Cluster.
A Cluster is like a server. It's your personal space where your whole MongoDB ecosystem lives.

To create a free Cluster, we'll need :
1 - To create an Atlas account and to choose the right Cluster
2 - To create an admin user, a super-user that can access all your Collections
3 - To add your IP address in the Allowed list
4 - and finally, create some "dummy" collections, for demo purpose

1 - Create an Atlas account https://www.mongodb.com/cloud/atlas

(Atlas Server Setup)[https://i.imgur.com/jYOug1g.png]

2 - You made it! Your Cluster is now ready to be set up
Create an admin user

3 - You now have an Admin user that can access all your Cluster's collections. Time to add your IP address to the Allowed list

4 - Your Cluster is ready to get Collections! Let's load some sample Collections data.

Second - Now that everything is ready, we can connect Robo3T to our Cluster.

To do that, we'll need:
1 - to copy the Replica set
2 - to create a new connection into Robo3T

1 - let's copy our replica set

Click on your Clusters name

Go to your replica set

Copy all the replica

2 - Download https://robomongo.org/ and open it.

Click on "create."

Once set up, double click on your connection. You're now connected to your Cluster!

Firebase x Axios x JS- Let's create a simple synchronized clicks counter

Florian — Wed, 01 Jul 2020 16:39:49 +0000

Let's create a JavaScript click counter that keep track of the clicks, thanks to Firebase Realtime Database!

You can see the live result here : https://jsfiddle.net/Icesofty/kz4u2rt9/3/

The Basics

First, we need some basic files : our entry point, index.html , and our script click-counter.js .

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase & JS</title>
  </head>
  <body>
        <!-- The clickable button  -->
    <button id="btn">
      CLick Me!
    </button>
        <!-- The counter will be displayed here -->
    <h2 id="counter"></h2>
  </body>
</html>

// We save our button element into a variable
const btn = document.getElementById("btn");
// We save our counter element into a variable
const counterID = document.getElementById("counter");

// We start our counter at 0
let counter = 0;

// Everytime a user click on the button, we will call this function to display the counter
function updateCounter() {
  counterID.innerHTML = `${counter} visitors clicked on this button`;
}

// Everytime a user clicks on the button, we will increment the counter by one.
btn.addEventListener("click", function (e) {
  counter++;
  updateCounter();
});

Let's add our script into our index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- We add the script -->
    **<script src="./js/click-counter.js" defer></script>**
    <title>Firebase & JS</title>
  </head>
  <body>
    <button id="btn">
      CLick Me!
    </button>
    <h2 id="counter"></h2>
  </body>
</html>

the result

We know have a super simple, but yet working click counter, cool!

But there is one main problem. The current state of the counter is not saved and will reset every time we reload the page. Also, the counter is not synchronizing with the visitors: This is a local counter.

Firebase

To keep track of the counter, we need to increment it every time a user clicks on it and store the updated state into a Database.

To do that, we'll use the Realtime Database from Firebase (Firebase is not a Database, Firebase is a set of ready to be deployed tools for your project). Realtime DB is a NoSQL type database that takes literally 5 minutes to set up. Values are stored in a JSON-like tree, which makes them really easy to read and manipulate.

First, we need to create an account at https://firebase.google.com/. Then, let's go to our console!

We can now add a new project

Let's name our project "my-counter"

For this project, we can disable Google Analytics, we won't need it.

Hooray! Our Firebase project is now live and ready.

Welcome to the Dashboard. Here, you have access to all the tools provided by Firebase. We're going to create a database, so let's click on Database!

Firebase have two types of DB. Let's pick the Realtime Database.

For now, we'll choose the second option "Start Test Mode" to see if everything is running as excepted.

We are now on our DB! You'll notice two things:

Your DB URL, on the top that should look like this: https://your-project-name-00000.firebaseio.com/. Copy that URL somewhere, we'll need that later.
And our empty DB body 😇

To keep track of the counter, we first need to create a child into our DB and create a key - value pair for the actual counter. Click on the '+'

For the project, I will name my child "my-online-counter" , don't enter any value since this is just a child, not the actual data. To create our counter value, let's click on '+' again.

This will create another child! I'll name it 'counter' and add a value of 0 as a starting value. Because, well, nobody clicked on our button yet😉

Once done, we can now click on the blue "add" button. And we're done with the Database... for now!

Now that our database is ready, it's time to make some changes into our JS script:

First, we need to GET the data and display the value of the counter, to show the number of time the button has been clicked

Then, we need to UPDATE the counter if a user clicks on the button, and then refresh & display the updated counter.

To get and update the data, we are going to use Axios. Axios is a "Promise based HTTP client for the browser and node.js". In other words, you can use HTTP Methods (or CRUD operations) directly into your JS file.

Get the value

I want to display the number of times a visitor clicked on the button when the web page is displayed.

First, we need to add Axios into our index.html file,

then we'll add the axios.get() method into our JS file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- We add axios to our index.html, **BEFORE** our script -->
    **<script
      src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
      defer
    ></script>**
    <script src="./js/click-counter.js" defer></script>
    <title>Firebase & JS</title>
  </head>
  <body>
    <button id="btn" style="margin-top: 5rem;">
      CLick Me!
    </button>
    <h2 id="counter"></h2>
  </body>
</html>

const btn = document.getElementById("btn");
const counterID = document.getElementById("counter");

// Let's save our Firebase Realtime DB URL into a variable
**const firebase = "https://my-counter-5a9a7.firebaseio.com/";**

// Because we are fetching the current counter state from a Database,
// We don't need to start the counter at 0. 
// let counter = 0;

// We want to fetch and display the current state
// of the counter every time someone visits our website.
**function get() {**
    // We want the data from the child we created, so let's concat it into our URL
    // Note that every endpoint needs .json at the end!
  **axios.get(firebase + "my-online-counter.json").then((response) => {**
    // Once the connection made to the Database, we can use the reponse to update the counter
    **counter = response.data.counter;**
    // Once the coutner updated, we can display the current counter state.
    **updateCounter();
  });
}**

function updateCounter() {
  counterID.innerHTML = `${counter} visitors clicked on this button`;
}

btn.addEventListener("click", function (e) {
  counter++;
  updateCounter();
});

// We call the get() function everytime a user launch the script
**get();**

We can now fetch the data from our DB and display the result directly into the webpage. But there is still a problem: the counter is still updating only on our local machine. 🤔

We need to UPDATE the counter in our DB.

Update the value

Now, I want to update the value of the counter when someone click on the button, and reload the counter displayed on the page.

For that, we need to add the axios.put() method into our JS file.

const btn = document.getElementById("btn");
const counterID = document.getElementById("counter");

const firebase = "https://my-counter-5a9a7.firebaseio.com/";

function get() {
  axios.get(firebase + "my-online-counter.json").then((response) => {
    counter = response.data.counter;
    updateCounter();
  });
}

function updateCounter() {
  counterID.innerHTML = `${counter} visitors clicked on this button`;
}

// Everytime a user clicks on the button, 
// we want to Update the counter into the database
**btn.addEventListener("click", function (e) {
  axios**
        // First, we need to reach our DB
    **.put(firebase + "my-online-counter.json", {**
            // Then, we needs to specify the new data for my-online-counter
****      // In our case, we simply increment the counter into the DB by one.
      **counter: counter + 1
    })
    .then(() => {**
      // Once it's done, we call the get() function again. 
            //To display the updated counter.
      **get();
    })**
    // If there is an error, we can log it.
    **.catch((error) => console.log(error));
});**

get();

Hooray! Our project is now running as expected. We can fetch the data from our DB and increment the counter value in our DB when we click on it.

But there is one main security issue. Our Realtime Database rules allow everyone to Red and Write into our Database! So literally anybody can Delete our database entries and increase or decrease our counter by any value!

Updating our Rules

To avoid such a scenario, we needs to update our DB rules.

First, let's go to the rules tab.

Then, let's updates the rules

// old rules
{
  "rules": {
// Anyone can Create/Read/Update/Delete our database entries
    ".read": true,
    ".write": true
  }
}

// New rules
{
  "rules": {
        // We set the rule for our child
    "my-online-counter": {
            // We allow everybody to READ the data
      ".read": true,
            // We only allow updates on existing data & we don't allow creating new data
      ".write": "data.exists() && newData.exists()",
      "counter": {
                // To validate our counter update, 
                // and avoid decrementing the value or incrementing more than +1,
                // the data updated needs to be equal to the actual data + 1
        ".validate": "newData.val() == data.val() + 1"
      }
    }
  }
}

And we are done! We know have a fully working click counter in vanilla JS, thanks to Axios and the Realtime Database by Firebase. Hope you enjoyed my first article,

Cheers 🤙