<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Bartosz Osiński</title>
    <description>The latest articles on DEV Community by Bartosz Osiński (@bartoszosn).</description>
    <link>https://dev.to/bartoszosn</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F802759%2F45225eba-9a37-4c2e-8877-461d63c0af17.jpg</url>
      <title>DEV Community: Bartosz Osiński</title>
      <link>https://dev.to/bartoszosn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bartoszosn"/>
    <language>en</language>
    <item>
      <title>What defines a day - When technical implementation affects business behaviour</title>
      <dc:creator>Bartosz Osiński</dc:creator>
      <pubDate>Fri, 03 Jul 2026 15:17:04 +0000</pubDate>
      <link>https://dev.to/bartoszosn/what-defines-a-day-when-technical-implementation-affects-business-behaviour-4j2b</link>
      <guid>https://dev.to/bartoszosn/what-defines-a-day-when-technical-implementation-affects-business-behaviour-4j2b</guid>
      <description>&lt;p&gt;As a programmer, what is the first thing you think about when you start working on a new feature?&lt;/p&gt;

&lt;p&gt;Probably you try to plan all the changes in code. You ask yourself:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does my backend provide this data?&lt;/li&gt;
&lt;li&gt;How will it affect existing code? How should I implement this feature to avoid code duplication?&lt;/li&gt;
&lt;li&gt;What about performance?  Maybe I need to do some debouncing or throttling?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are all valid, important questions. But at what point do you really start thinking about &lt;strong&gt;the feature&lt;/strong&gt; you’re about to implement?&lt;/p&gt;

&lt;p&gt;I’ll be honest with you, sometimes I start thinking about how the feature is supposed to work much too late. I get excited about all the cool stuff I can do, all the smart patterns I can use, and I run straight to the implementation. Then, after it’s finally time to connect all these small lego bricks I just implemented to build it into a fully functioning feature I notice that something is wrong. Half of the code should have been written differently, and the other half I don’t need at all.&lt;/p&gt;

&lt;p&gt;All because I approached the task as a programmer, while this feature is designed for &lt;strong&gt;application&lt;/strong&gt; &lt;strong&gt;users.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s think about it in practice.&lt;/p&gt;

&lt;h2&gt;
  
  
  An example
&lt;/h2&gt;

&lt;p&gt;&lt;iframe src="https://codesandbox.io/embed/j9vhq8?view=preview&amp;amp;module=%2Fsrc%2FApp.tsx"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Here is a simple, hypothetical web application. On the calendar you can mark any cell as holiday by clicking on it, and then the whole cell becomes red.&lt;/p&gt;

&lt;p&gt;Have you noticed a bug? When you click on some date, the day &lt;strong&gt;before&lt;/strong&gt; gets actually marked as holiday.&lt;/p&gt;


&lt;div class="crayons-card c-embed"&gt;

  &lt;br&gt;
If you’re one of the few (&lt;em&gt;un-&lt;/em&gt;)lucky ones who reside in a location where this bug is not reproducible, try spoofing your location for chrome:

&lt;ol&gt;
&lt;li&gt;Open Developer tools&lt;/li&gt;
&lt;li&gt;Click on “&lt;strong&gt;⋮&lt;/strong&gt;” button and select “More tools” &amp;gt; “Sensors”.&lt;/li&gt;
&lt;li&gt;In the location fields try, for example, “Tokyo”.

&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;



&lt;p&gt;let’s now imagine for a moment that this example above is a part of big, commercial product.&lt;/p&gt;

&lt;p&gt;A new version gets released and creators of this app are immediately flooded by clients’ angry support tickets and bug reports.&lt;/p&gt;

&lt;p&gt;And at the same time, but on the opposite part of the globe there is some equally frustrated developer who got assigned to fix this bug, but he can’t reproduce it for the life of him.&lt;/p&gt;
&lt;h2&gt;
  
  
  So what is the cause of this problem?
&lt;/h2&gt;

&lt;p&gt;Each calendar cell is represented here by a single Date object, created like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2026&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Of course, passing three arguments there doesn’t mean that this object points at whole day. There is still information about time of day, it just defaults to midnight &lt;strong&gt;at the location that the user is in.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;March 1st 2026 00:00 in Tokyo is February 28th 15:00 in London. It’s the same point in time, globally, but represented by different numbers in different parts of the globe.&lt;/p&gt;

&lt;p&gt;So what happens when user clicks on a cell? The date representing this cell gets added to the array of holidays, and then this array gets passed to &lt;code&gt;saveHolidays&lt;/code&gt;  function, which stores it in local storage. Here’s how this function looks like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;holidaysLocalStorageKey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;holidays&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;saveHolidays&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;holidays&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;[]):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;holidays&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getUTCFullYear&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getUTCMonth&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getUTCDate&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;holidaysLocalStorageKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before saving the date it gets transformed into a string looking like this: &lt;code&gt;2026-3-1&lt;/code&gt; . But we use UTC methods, and they won’t return the date in Tokyo in this specific point in time, they will return the UTC date, which is shifted 9 hours earlier relative to Tokyo’s time.&lt;/p&gt;

&lt;p&gt;We can guess that the UI part of the code and the persistence part were probably written by two different developers. One of them assumed that Date object should always be treated as local date, including timezone information, while the other decided to treat this date as universal.&lt;/p&gt;

&lt;p&gt;The fix is fairly simple, really. Either:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Always treat the date as local.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, in our &lt;code&gt;saveHolidays&lt;/code&gt; function we could serialize the date this way instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getFullYear&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getMonth&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getDate&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Always treat the date as universal.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, instead of creating it using &lt;code&gt;new Date(2026, 2, 1)&lt;/code&gt;  we can do: &lt;code&gt;new Date(Date.UTC(2026, 2, 1))&lt;/code&gt; .&lt;/p&gt;

&lt;p&gt;Whichever way we choose, &lt;strong&gt;we need to be consistent.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, now we have our fix, and a fairly simple one, but the problem still exists - it is code that is easy to misuse and introduce bugs.&lt;/p&gt;

&lt;p&gt;The fact that this bug got introduced is a clear sign of poorly designed code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Back to the real world
&lt;/h2&gt;

&lt;p&gt;Let’s imagine a simple scenario:&lt;/p&gt;

&lt;p&gt;I have a regular, paper calendar. I want to call my friend, and ask him to point his finger at exactly the same cell in this calendar as I’m pointing at. My friend could be my next door neighbour or he could live in a different country. That doesn’t matter. I’d call him and say:&lt;/p&gt;

&lt;p&gt;“Hey, do you have a 2026 calendar? Please open it on a page with April and point your finger to cell with number 14, okay?”&lt;/p&gt;

&lt;p&gt;Ignoring the fact that it is a weird thing to ask your friend for, he would point into exactly the same cell as I’m pointing at. I didn’t need to tell him any information about time and timezones. It was a simple message, but it didn’t need to be any more complicated.&lt;/p&gt;

&lt;p&gt;When an application is designed, it’s supposed to be intuitive for its users. One solution for that is to mimic the real world, something that the user is familiar with.&lt;/p&gt;

&lt;p&gt;I’m sure that when product manager was designing this feature they took that into account and expected this calendar in an app to work the same way as my real-life example above.&lt;/p&gt;

&lt;p&gt;And it’s for the best when our code reflects that, from the deepest level.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“To communicate effectively, the code must be based on the same language used to write the requirements—the same language that the developers speak with each other and with domain experts.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;― &lt;strong&gt;&lt;em&gt;Eric Evans&lt;/em&gt;&lt;/strong&gt;, &lt;em&gt;Domain-Driven Design: Tackling Complexity in the Heart of Software&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;By handling our data in a way that reflects app’s intended behaviour we not only ensure that the app will work as intended at the current stage - we also make sure that it will stay this way, as doing something against business rules will require a refactor, which in turn will ignite an idea in a developer’s head: “Maybe I’m doing something wrong”.&lt;/p&gt;

&lt;p&gt;So what data should represent our cell? Maybe something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;Month&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;JANUARY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nx"&gt;FEBRUARY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;CalendarDate&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;year&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;month&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Month&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;day&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That would prevent our bug from ever existing. There’s no time information here, nor any timezone shifts. There is simply no space for this bug to happen.&lt;/p&gt;

&lt;p&gt;On the downside, this requires much more work. We need to write a lot of utilities for this object: Comparing them, serializing and deserializing, retrieving all days present in a month might still require usage of Date at some point, as we can’t really naively calculate how many days there are in a specific month at a specific year.&lt;/p&gt;

&lt;p&gt;In a perfect world, we would get as much time as we need to create perfect code. Unfortunately…&lt;/p&gt;

&lt;h2&gt;
  
  
  …we’re not living in a perfect world.
&lt;/h2&gt;

&lt;p&gt;There are deadlines, sprints and growing backlog. It’s impossible to polish every single bit of code that we conceived.&lt;/p&gt;

&lt;p&gt;I definitely don’t want to say that whoever chose to represent a calendar cell as a Date object is a bad developer. He had to find the best ratio of quality and efficiency, and for the most part where this ratio lies on a scale is a matter of opinion, not a hard fact.&lt;/p&gt;

&lt;p&gt;What I’m trying to say in this (maybe slightly too philosophical :P) article is this:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First of all, model the domain correctly.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Maybe you’ll write a perfect code this way, or maybe just something barely acceptable, but either way, I believe that we’re all going to benefit from this approach in the long run.&lt;/p&gt;

&lt;p&gt;Now, going back to our calendar. There is an ECMAscript proposal that probably a lot of you have already heard (It’s even implemented in some javascript runtimes already) called Temporal.&lt;/p&gt;

&lt;p&gt;It’s a new way of handling dates and time, and it gives us exactly what we need in our case: Specialized objects for storing only dates, datetimes, or durations between two datetimes.&lt;/p&gt;

&lt;p&gt;I believe that thanks to that we’re going to see much less time-related bugs in the future.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>architecture</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
