DEV Community: Sekti Wicaksono

How to Allow Your JavaScript Web App to Be Accessed by Other Devices on Windows

Sekti Wicaksono — Wed, 31 Dec 2025 20:33:16 +0000

Recently, I encountered an issue where a Next.js/React app running in development on Windows could not be accessed from other devices.
After adjusting the firewall settings, the solution was simply to allow the application (node.exe) to communicate through the firewall, enabling access from other devices on the same network.

Go to Windows Settings -> Search Firewall
Click Firewall & Network Protection -> Allow an apps... -> Change settings -> check node.exe -> OK
Better Size Image
Run your app on VSCode
e.g: npm run dev / pnpm dev
Try accessing it via the ip_address:port shown in the terminal.
Then, from another device (phone or computer) connected to the same access point (AP) or network, open the app in a browser.
For example, open Chrome on your mobile device and navigate to http://192.168.0.6:3000

Getting MonthName from new Date()

Sekti Wicaksono — Tue, 09 Feb 2021 08:14:34 +0000

const today = new Date()

// Default
today.toLocaleString('default', { month: 'long' }) // February
today.toLocaleString('default', { month: 'short' }) // Feb

// Indonesia
today.toLocaleString('id-ID', { month: 'long' }) // Februari
today.toLocaleString('id-ID', { month: 'short' }) // Feb

// English - GB
today.toLocaleString('en-GB', { month: 'long' }) // February
today.toLocaleString('en-GB', { month: 'short' }) // Feb

// English - US
today.toLocaleString('en-US', { month: 'long' }) // February
today.toLocaleString('en-US', { month: 'short' }) // Feb

CSS Battle - #12 Wiggly Moustache

Sekti Wicaksono — Fri, 05 Feb 2021 12:39:30 +0000

HTML

<div class="wrapper">
  <div class="c-1"></div>
  <div class="c-2"></div>
  <div class="c-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #F5D6B4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrapper {
    position: relative;
    width: 255px;
    height: 100px
  }

  .c-1 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-1:after {
    content: '';
    width: 60px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-1:before {
    content: '';
    width: 20px;
    height: 10px;
    background: #D86F45;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: rotate(180deg);
  }

  .c-2 {
    width: 99px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 80px;
    top: 0;
  }

  .c-2:before {
    content: '';
    width: 55px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0;
  }

  .c-3 {
    width: 100px;
    height: 50px;
    background: #dd6b4d;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
  }

  .c-3:after {
    content: '';
    width: 59px;
    height: 30px;
    background: #F5D6B4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: absolute;
    right: 24px;
    bottom: 0;
  }

  .c-3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 17px;
    height: 10px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background: #D86F45;
    transform: rotate(180deg);
  }

CSS Battle - #11 Eye of Sauron

Sekti Wicaksono — Fri, 05 Feb 2021 12:38:37 +0000

HTML

<div class="sm-circle-1"></div>
<div class="bg-circle"></div>
<div class="sm-circle-2"></div>

CSS

  body {
    background: #191210;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .sm-circle-1 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 92px;
    left: 41px;
  }

  .sm-circle-1:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }

  .sm-circle-2 {
    height: 50px;
    width: 100px;
    background: #ECA03D;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 142px;
    left: 243px;
    transform: rotate(180deg);
  }

  .sm-circle-2:before {
    content: '';
    height: 30px;
    width: 60px;
    background: #191210;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    position: absolute;
    bottom: 20px;
    left: 21px;
  }

  .bg-circle {
    width: 140px;
    height: 140px;
    background: #ECA03D;
    border-radius: 50%;
    position: relative;
  }

  .bg-circle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background: #191210;
    border-radius: inherit;
  }

  .bg-circle:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    background: #84271C;
    border-radius: inherit;
  }

CSS Battle - #10 Cloaked Spirits

Sekti Wicaksono — Fri, 05 Feb 2021 12:38:13 +0000

HTML

<div class="wrapper">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="column-3"></div>
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #62306D;
  }

  .wrapper {
    height: 100%;
    margin: 50px;

    position: relative;
  }

  .column-1 {
    position: absolute;
    left: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }

  .circle-1 {
    position: absolute;
    left: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-3 {
    position: absolute;
    right: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-3:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-2 {
    position: absolute;
    left: 33.3%;
    top: -0.15%;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #E38F66;
    border-radius: 50%;    
  }

  .circle-2:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .column-2 {
    position: absolute;
    left: 33.3%;
    bottom:0;
    width: 33.4%;
    height: 82.5%;
    background: #F7EC7D;
  }

  .column-3 {
    position: absolute;
    right: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }

CSS Battle - #9 Tesseract

Sekti Wicaksono — Fri, 05 Feb 2021 12:37:25 +0000

HTML

<div class="box-bg"></div>
<div class="square"></div>
<div class="square small"></div>
<div class="square circle"></div>

CSS

  body {
    margin: 0;
    background: #222730;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .box-bg {
    background: #4CAAB3;
    height: 150px;
    width: 100%;
  }

  .square {
    position: absolute;
    background: #222730;
    height: 250px;
    width: 250px;
    transform: rotate(45deg);
  }

  .small {
    background: #4CAAB3;
    height: 150px;
    width: 150px;
  }

  .circle {
    background: #393E46;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }

CSS Battle - #8 Forking Crazy

Sekti Wicaksono — Fri, 05 Feb 2021 12:37:22 +0000

HTML

<div class="handle"></div>
<div class="base"></div>
<div class="prong first"></div>
<div class="prong second down"></div>
<div class="prong third"></div>
<div class="prong fourth down"></div>
<div class="prong fifth"></div>
<div class="prong sixth down"></div>
<div class="prong seventh"></div>

CSS

  body {
    margin: 0;
    background: #6592CF;
    position: relative;
  }

  .handle {
    position: absolute;
    bottom: 0;
    left: 48%;
    content: '';
    width: 20px;
    height: 55px;
    background: #060F55;
    margin: 0 auto;
  }
  .base {
    position: absolute;
    bottom: 50px;
    left: 33%;
    content: '';
    width: 140px;
    height: 95px;
    background: #060F55;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .prong {
    position: absolute;
    bottom: 132px;
    content: '';
    width: 20px;
    height: 118px;
    background: #060F55;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  .first { left: 33%; }
  .second {left: calc(33% + 20px); }
  .third { left: calc(33% + 40px); }
  .fourth { left: calc(33% + 60px); }
  .fifth { left: calc(33% + 80px); }
  .sixth { left: calc(33% + 100px); }
  .seventh { left: calc(33% + 120px); }

  .down {
    bottom: 140px;
    background: #6592CF; 
    transform: rotate(180deg);
  }

CSS Battle - #7 Leafy Trail

Sekti Wicaksono — Fri, 05 Feb 2021 12:31:23 +0000

HTML

<div></div>

CSS

  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    width: 150px;
    height: 150px;
    border-radius: 68%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #998235;

    position: relative;
  }

  div:after {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #F3AC3C;
    left: 50px;
  }

  div:before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #1A4341;
    left: -50px;
    z-index: -1;
  }

CSS Battle - #6 Missing Slice

Sekti Wicaksono — Fri, 05 Feb 2021 12:30:31 +0000

HTML

<div class="outer">
  <div class="inner first"></div>
  <div class="inner second"></div>
  <div class="inner third"></div>
</div>

CSS

  body {
    background: #E3516E;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .outer {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #E3516E;
    position: relative;

    display:flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .inner {
    width: 50%;
    height: 50%;
  }
  .first { background: #51B5A9; }
  .second { background: #FADE8B; }
  .third { background: #F7F3D7; }

CSS Battle - #5 Acid Rains

Sekti Wicaksono — Fri, 05 Feb 2021 12:29:34 +0000

HTML

<div></div>

CSS

  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-top-right-radius: 0;
    background: #998235;

    position: relative;
  }

  div::after, div::before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    background: #F3AC3C;
  }

  div::after {
    top: 60px;
    right: 60px;
    border-radius: inherit;
  }

  div::before {
    top: -60px;
    right: -60px;
    border-radius: 50%;
    z-index: -1;
  }

CSS Battle - #4 Ups n Downs

Sekti Wicaksono — Fri, 05 Feb 2021 12:28:14 +0000

HTML

<div class="down"></div>
<div class="up"></div>
<div class="down"></div>

CSS

  body {
    background: #62306D;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    width: 100px;
    height: 100px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: #F7EC7D;
    position: relative;
  }  
  .up {
    top: -50px;
  }
  .down {
    transform: rotate(180deg);
    top: 50px;
  }

CSS Battle - #3 Push Button

Sekti Wicaksono — Fri, 05 Feb 2021 12:25:43 +0000

HTML

<div class="wide-box">
    <div class="circular-outer"></div>
    <div class="circular-inner"></div>
</div>

CSS

  body {
    background: #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wide-box {
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243D83;
    z-index: -1;
    overflow: hidden;

    position: relative;
  }

  .circular-outer {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #6592CF;

    position: absolute;
  }

  .circular-inner {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #243D83;

    position: relative;
    overflow: hidden;
  }

  .circular-inner::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #EEB850;
    border-radius: 50%;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
  }