Blancer.com Tutorials and projects

I’m trying to understand how to approach building a design system in a structured way. I want to know:

• What are the key steps or phases involved in creating a complete design system?
• What parts are typically handled by front-end developers, and what is usually out of their scope?
• Are there best practices or tools commonly used by developers when implementing a design system?

I explored the Atomic Design methodology and researched general concepts around design systems, but I’m still unclear about the exact steps developers should follow and what their responsibilities are.

I’d appreciate any insights or real-world experience on this topic.

I am encountering a problem that my main thread is unoccupied and nothing is rendered on the screen. DCL fires at 500ms, but FCP and LCP fire 2s later. In this example I am not loading any CSS, only HTML and a JS module. I don’t know what the right question is because I am utterly confused. Why is this happening? What am I missing? What is the Chrome’s behaviour?

I will appreciate any clues/suggestions/guesses.

I am trying to implement push notifications for web.I have succesfully managed to display background notification. But on clicking it, the notification does not open the window or link I want.Rather, the function just does not fire.

Below is the code of my firebase-messanging-sw.js file.

self.addEventListener('notificationclick', function(event) {
  console.log('[firebase-messaging-sw.js] Notification click received.');

event.notification.close();


const path = event.notification?.data?.url || '/';
// const fullUrl = 'http://localhost:3000' + path;

event.waitUntil(
  clients.openWindow(path)
    .catch(err => console.error('Error opening window:', err))
);
});



importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase- app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase- messaging.js');


const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();


messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background  message ', payload);

const notificationTitle = payload.data?.title || 'New Notification';
const notificationOptions = {
  body: payload.data?.body || 'You have a new message',
  icon: '/firebase-logo.png',
  badge: '/badge-icon.png',
  data: {
    url: payload.data?.url || '/',
  },
  actions: [
    {
      action: 'open',
      title: 'Open App'
    }
  ]
};

self.registration.showNotification(notificationTitle, notificationOptions);
});

The ‘notification click’ function is just not firing.Nothing gets printed on the console when I click on the notification.
I have tried everything mentioned on internet-

• tried opening a different link(youtube.com)
• tried moving the ‘notification click’ function on top
• checked that service worker is registered and running.

please tell me any fix for this or anyhting that I may have missed

I’m using GSAP with SplitType and a custom language switcher (en.json, es.json) to translate my website dynamically.
Everything translates correctly except the .scroll-fade-text section — which uses SplitType for scroll-triggered word-by-word animation.

On language change, the translated text briefly appears, then reverts back to the original language’s content (probably due to SplitType or GSAP misfiring).

What I’ve Tried:

Verified the translation keys load and update correctly via data-i18n

Used requestAnimationFrame() and setTimeout() to delay SplitType initialization

Used .revert() and .kill() to clean up previous animation

HTML

<div class="scroll-lock-section">
  <div class="scroll-text-wrap scroll-fade-text" data-i18n="scrollLine">
    MY LONG TEXT IN ENGLISH HERE.
  </div>
</div>

JS

document.addEventListener('DOMContentLoaded', () => {
  const langSelect = document.getElementById('langSelect');
  const storedLang = localStorage.getItem('lang') || 'en';
  langSelect.value = storedLang;

  applyLanguage(storedLang);

  langSelect.addEventListener('change', () => {
    const lang = langSelect.value;
    localStorage.setItem('lang', lang);
    applyLanguage(lang);
  });
});

function applyLanguage(lang) {
  fetch(`/lang/${lang}.json`)
    .then(res => res.json())
    .then(data => {
      document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.getAttribute('data-i18n');
        const allowHtml = el.getAttribute('data-i18n-html') === 'true';
        if (data[key]) {
          if (allowHtml) {
            el.innerHTML = data[key];
          } else {
            el.textContent = data[key];
          }
        }
      });

      // Attempt delayed animation init
      requestAnimationFrame(() => {
        setTimeout(() => {
          initScrollAnimation();
        }, 100);
      });
    });
}

let scrollSplit;
function initScrollAnimation() {
  if (scrollSplit) scrollSplit.revert();

  ScrollTrigger.getAll().forEach(trigger => trigger.kill());
  gsap.killTweensOf("*");

  scrollSplit = new SplitType(".scroll-fade-text", {
    types: "words",
    wordClass: "word"
  });

  gsap.to(scrollSplit.words, {
    color: "white",
    stagger: 0.3,
    scrollTrigger: {
      trigger: ".scroll-lock-section",
      start: "top top",
      end: "+=1000",
      scrub: true,
      pin: true,
      invalidateOnRefresh: true
    }
  });
}

CSS

.scroll-lock-section {
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background-color: #0c1624;
}

.scroll-text-wrap {
  font-size: 48px;
  font-family: 'Manrope', sans-serif;
  font-weight: bold;
  max-width: 1000px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: -150px;
}

.scroll-text-wrap .word {
  color: gray;
  transition: color 0.4s ease;
}

When I switch the language from English to Spanish:

All other data-i18n elements update correctly.

scroll-fade-text briefly changes, then reverts back to English.

The GSAP animation continues working, but with the old content.

How can I properly re-split and animate translated content inside .scroll-fade-text using SplitType + GSAP without it resetting or reverting?

All translation is client-side using data-i18n and a JSON map.

Working example…

HTML

<a class="contact-button" href="mycontact" target="_blank" rel="noopener" data-i18n="navContact">Contact us</a>

JSON

en.json

  "navContact": "Contact us",
/* more below */

es.json

  "navContact": "Contáctanos",
/* more below */

I am new to ‘PHP and JavaScript’. The other day, I was coding for asynchronous request and response. Working sometime with fetch(), I thought of using the XMLHttpRequest(). It was a bit of work, but then I entered the following code:

<script>
let xhr = new XMLHttpRequest();

xhr.open('POST', 'http://localhost/test/test.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.responseType = 'json';

xhr.onload = function() {
    if (xhr.status != 200){
        console.log(`Error ${xhr.status}: ${xhr.statusText}`);
    } else {
        document.getElementById("lull").innerHTML = xhr.response
    }
};

xhr.send("url=wikipedia.org");
</script>

I tried whole night debugging why this is returning null in its response. Then I stumbled upon this and casually changed the xhr.responseType = 'json'; to xhr.overrideMimeType("application/json"); and it worked! So, I am trying to understand how the two differs in their working? The mdn_website says responseType() can be used to change the response type, and many other sources have used it!

The php file that open is refrencing is just listening for url key in the $_POST array and is responding with the html web page using file_get_contents() and encoding it using json_encode().

my nodejs backend sets this cookie:

res.cookie("refresh_token", refresh_token, {
    httpOnly: true,
    secure: true, // must be true when sameSite: "None",
    sameSite: "None",
    maxAge: 1000000, // maxAge is in milliseconds
  });

Despite this, I can still open of Chrome Dev Tools –> Application –> Cookies to view this cookie plainly.

However, I can confirm that it cannot be access via javascript:

document.cookie

Is this how it is supposed to be? Or is the httpOnly cookie supposed to not even be accessible manually as well?

I have started learning programming now. I want to continue in this field, but I do not know if it is a good idea. Is it good to start learning now with the presence of all these new tools such as artificial intelligence? What is your advice to me? I am a refugee trying to learn to get a job. How do I start? I hope to benefit from your experiences. Thank you.

I’m in the learning phase now but I still feel lost.

I’m trying to understand how the reduce() function works in this example:

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const count = fruits.reduce((tally, fruit) => {
    tally[fruit] = (tally[fruit] || 0) + 1;
    return tally;
}, {});

console.log(count);

What does (tally[fruit] || 0) mean?

I understand how the flow works but i don’t get this part:
tally[fruit] = (tally[fruit] || 0) + 1;

Clear Credit Loan App customer. care. helpline. NUMBER -)8292010684-//-91_/8292010684-contact me..

This is my first time using an API. I have the following JavaSript code that I found from a tutorial but I’m not sure how to display it in HTML. I’m trying to access the Weatherbit Current Weather API.

<script>

//WeatherBit API URL and Key
    const apiKey = 'gonna leave this out';
    const apiUrl = `https://api.weatherbit.io/v2.0/current?lat=42.4226814&lon=-94.8580528&key=${apiKey}&include=alerts`;

    const requestOptions = {
        method: 'GET',
            },
        };

    //For HTML Output
    const outputElement = document.getElementById('output');

    //GET request
    fetch(apiUrl)
    .then(response => {
        if (!response.ok) {
        if (response.status === 404) {
            throw new Error('Data not found (404)');
        } else if (response.status === 500) {
            throw new Error('Server Error (500)')
        } else {
            throw new Error('Network response was not ok');
            }
        })
    return response.json()
    
    
    };
        })
    .then(data => {
        //display in HTML
        outputElement.textContent = JSON.stringify(data, null, 2);
        })
    .catch(error => {
        console.error('Error:', error);
        });

</script>

and in the HTML I have this:

 <p id="output">Loading Weather Data...</p>