<?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>Forem: Deta Utama</title>
    <description>The latest articles on Forem by Deta Utama (@detautama).</description>
    <link>https://forem.com/detautama</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F223156%2Fb1507fcb-a9da-43e4-81f4-151e04a8eb35.jpeg</url>
      <title>Forem: Deta Utama</title>
      <link>https://forem.com/detautama</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/detautama"/>
    <language>en</language>
    <item>
      <title>Work-Life Balance vs Work-Life Integrity: Understanding Two Modern Approaches to Life</title>
      <dc:creator>Deta Utama</dc:creator>
      <pubDate>Wed, 06 May 2026 22:50:59 +0000</pubDate>
      <link>https://forem.com/detautama/work-life-balance-vs-work-life-integrity-understanding-two-modern-approaches-to-life-36ej</link>
      <guid>https://forem.com/detautama/work-life-balance-vs-work-life-integrity-understanding-two-modern-approaches-to-life-36ej</guid>
      <description>&lt;p&gt;In the modern workplace — especially as flexible and remote work arrangements have become more common — terms like &lt;em&gt;work-life balance&lt;/em&gt; and &lt;em&gt;work-life integrity&lt;/em&gt; keep coming up. Both address the relationship between work and personal life, but they take very different approaches. This article compares the two in a neutral way so you can choose whichever fits you best.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Work-Life Balance?
&lt;/h2&gt;

&lt;p&gt;Work-life balance focuses on dividing your time proportionally between work and personal life.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key characteristics of Work-Life Balance
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A clear, firm separation between work time and personal time.&lt;/li&gt;
&lt;li&gt;Work hours are typically fixed and structured.&lt;/li&gt;
&lt;li&gt;The emphasis is on a quantitative balance between the two sides of life.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Example: Working from 9am to 5pm, then fully switching off to rest or spend time with family.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What is Work-Life Integrity (or Integration)?
&lt;/h2&gt;

&lt;p&gt;Work-life integrity — also called work-life integration — sees work and personal life as parts of a single whole that support each other.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key characteristics of Work-Life Integrity
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Flexible hours with no rigid time boundaries.&lt;/li&gt;
&lt;li&gt;Work and personal activities can consciously blend together.&lt;/li&gt;
&lt;li&gt;The focus is on aligning with your values and individual needs.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Example: Stepping away for a family matter in the afternoon, then picking work back up in the evening.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  A Quick Comparison
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Aspect&lt;/th&gt;
&lt;th&gt;Work-Life Balance&lt;/th&gt;
&lt;th&gt;Work-Life Integrity&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Main focus&lt;/td&gt;
&lt;td&gt;Time separation&lt;/td&gt;
&lt;td&gt;Value alignment and flexibility&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Work pattern&lt;/td&gt;
&lt;td&gt;Structured and fixed&lt;/td&gt;
&lt;td&gt;Flexible and adaptive&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Best for&lt;/td&gt;
&lt;td&gt;Jobs with fixed hours&lt;/td&gt;
&lt;td&gt;Remote workers, freelancers, creators&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Challenges&lt;/td&gt;
&lt;td&gt;Less flexible&lt;/td&gt;
&lt;td&gt;Risk of blurring the line between work and life&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  When Does Each Approach Make Sense?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Work-life balance&lt;/strong&gt; works well if you want clear boundaries and set working hours — for example, in a traditional office job.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Work-life integrity&lt;/strong&gt; suits flexible work environments, especially when you need to manage your own schedule, such as in remote work, freelancing, or entrepreneurship.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Wrapping Up
&lt;/h2&gt;

&lt;p&gt;These two approaches aren't mutually exclusive. In fact, many people use a mix of both depending on their situation and life priorities.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Choose the approach that best supports your productivity, mental health, and what matters most to you.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>wlb</category>
      <category>worklifebalance</category>
      <category>productivity</category>
    </item>
    <item>
      <title>🐞 Quiz: Spot the Bug – URL Language Detection</title>
      <dc:creator>Deta Utama</dc:creator>
      <pubDate>Wed, 05 Nov 2025 04:57:19 +0000</pubDate>
      <link>https://forem.com/detautama/quiz-spot-the-bug-url-language-detection-2odp</link>
      <guid>https://forem.com/detautama/quiz-spot-the-bug-url-language-detection-2odp</guid>
      <description>&lt;p&gt;When building multilingual websites, a common approach to detect the user’s language is by inspecting the URL. For example, you might check if the URL contains &lt;code&gt;"en"&lt;/code&gt; to decide if the page is in English or some other language.&lt;/p&gt;

&lt;p&gt;Here’s a simple JavaScript snippet that tries to do exactly that:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;en&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Set language to English&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Set language to Swedish&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  The Scenario
&lt;/h3&gt;

&lt;p&gt;Imagine your website has URLs structured like this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;https://example.com/en/about&lt;/code&gt; (English page)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;https://example.com/sv/about&lt;/code&gt; (Swedish page)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;https://example.com/customer-cases/vattenfall&lt;/code&gt; (case study without language prefix)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At first glance, the condition looks fine , if the URL contains &lt;code&gt;"en"&lt;/code&gt;, treat it as English. Otherwise, use Swedish.&lt;/p&gt;

&lt;h3&gt;
  
  
  🕵️‍♂️ Can you spot the bug?
&lt;/h3&gt;

&lt;p&gt;The bug lies in the way the URL is checked with &lt;code&gt;.includes("en")&lt;/code&gt;. This check looks for the substring &lt;code&gt;"en"&lt;/code&gt; anywhere in the entire URL, not specifically in the language segment. This can lead to false positives.&lt;/p&gt;

&lt;h4&gt;
  
  
  What can go wrong?
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;False positives:&lt;/strong&gt; The word &lt;code&gt;"en"&lt;/code&gt; can appear elsewhere in the URL, such as in the path or query parameters, unrelated to the language. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;https://example.com/customer-cases/vattenfall&lt;/code&gt;
The string &lt;code&gt;"en"&lt;/code&gt; appears in &lt;code&gt;"vattenfall"&lt;/code&gt;, so &lt;code&gt;.includes("en")&lt;/code&gt; returns &lt;code&gt;true&lt;/code&gt;, wrongly setting the language to English.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;&lt;p&gt;&lt;strong&gt;Incorrect language detection:&lt;/strong&gt; The site might mistakenly show content or UI elements in English on pages that are actually Swedish or neutral.&lt;/p&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  How to fix it?
&lt;/h3&gt;

&lt;p&gt;Instead of searching for &lt;code&gt;"en"&lt;/code&gt; anywhere in the URL, restrict the check to the part of the URL that actually specifies the language , usually the first path segment.&lt;/p&gt;

&lt;p&gt;Here’s an improved approach:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pathSegments&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pathname&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&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;lang&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pathSegments&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;span class="c1"&gt;// first path segment after the domain&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;lang&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;en&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Set language to English&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;lang&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Set language to Swedish&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Default language or fallback&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Why is this better?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Precise detection:&lt;/strong&gt; It explicitly looks at the first path segment, where the language code should be.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Avoids false positives:&lt;/strong&gt; It won’t mistake parts of other words or parameters for language codes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Easily extensible:&lt;/strong&gt; You can add more languages just by checking for different codes.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;p&gt;Checking for substrings like &lt;code&gt;"en"&lt;/code&gt; anywhere in the URL is a common but fragile approach to language detection. Always narrow down your checks to the specific URL segment responsible for the language to avoid bugs.&lt;/p&gt;

&lt;p&gt;Did you spot the bug quickly? Let me know in the comments!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>frontend</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
