Blancer.com Tutorials and projects

I’m building a React Native app with Expo Router and NativeWind. Most of my Tailwind classes work fine, but for some reason, the text-white class does not apply on one particular element, while other texts with text-white work correctly.

import '../../global.css'
import {Text, View, Image, ScrollView, ActivityIndicator} from "react-native";
import {images} from "@/constants/images";
import {icons} from "@/constants/icons";
import SearchBar from "@/components/SearchBar";
import { useRouter } from "expo-router";
import useFetch from "@/services/useFetch";
import {fetchMovies} from "@/services/api";

export default function Index() {
    const router = useRouter();

    const { data: movies,
            loading: moviesLoading,
            error: moviesError } = useFetch(() => fetchMovies({ query: '' }))

  return (
      <View className="flex-1 bg-primary">
          <Image source={images.bg} className={"absolute w-full z-0"}></Image>

          <ScrollView className="flex-1 px-5" showsVerticalScrollIndicator={false} contentContainerStyle={{minHeight: "100%", paddingBottom: 10}}>
              <Image source={icons.logo} className="w-12 h-10 mt-20 mb-5 mx-auto"/>

              {moviesLoading ? (
                  <ActivityIndicator
                      size="large"
                      color="#0000ff"
                      className="mt-10 self-center"
                  />
              ) : moviesError ? (
                  <Text>Error: {moviesError?.message}</Text>
              ) : (
                  <View className="flex-1 mt-5">
                      <SearchBar
                          onPress={() => router.push("/search")}
                          placeholder="Search for a movie"
                      />

                      <>
                          <Text className="text-lg font-bold mt-5 mb-3 text-white">Latest Movies</Text>
                      </>
                  </View>
              )}
          </ScrollView>
      </View>
  );
}

The line in subject is;

<Text className="text-lg font-bold mt-5 mb-3 text-white">Latest Movies</Text>

I couldn’t figure out why it is not working.

I am working on an api project, and I need to gather the contents of the li using my javascript. There can be multiple of these li‘s

My html (just a small section)

<div>
    <button id="roomListButton">Click me to see what rooms your in</button>
        <ul id="roomsList">

        </ul>
            
</div>

My javascript (not everything)

const roomsListR = document.querySelector('#roomsList');

const delRoomButTEMPLATE = document.createElement('button')
delRoomButTEMPLATE.classList.add('deleteRoomBtn');
delRoomButTEMPLATE.innerHTML = `Leave this room`;


      const fetchRoomsAndProcess = async (event) => {
            console.log('fetching rooms')
            event.preventDefault();

            const response = await fetch('/getRooms');
            const jsonResponse = await response.json();
            const result = jsonResponse.result

            // Preparatory clean of the rooms list
                roomsListR.innerHTML = ``
            
            for (let i = 5; i != 0; i--) {
                let currentRoom = result.splice(0, 1)
                let currentRoom2 = currentRoom[0]
                let currentRoom3 = currentRoom2['roomname']
                console.log('currentRoom3 : ', currentRoom3);

                // Now do the stuff with currentRoom
                const li = document.createElement('li');
                li.innerHTML = `${currentRoom3} ${delRoomButTEMPLATE.outerHTML}`

                li.addEventListener('click', (event) => {
                    console.log('button clicked.')
                    const parent = event.target.parentNode
                    console.log(parent.innerHTML)
                })

                roomsListR.appendChild(li)

                if (result.length == 0) {
                    break
                }
            }

        }

The syntax: li.textContent does not work as it returns the text content of the button element inside it as well. li.innerText for some reason does the same thing. And li.innerHTML includes the tag which is not what I want.

Is there a shortcut for retrieving just the text in the node, not including any tags or anything inside of those tags?

i am new to nextjs and i am trying to build a small website. I am trying to make it multilingual with /it and /el so right now i have a locale folder with all my nested folders and pages. my main page.tsx is now in locale folder so the domain/ redirects me to domain/el as el is the default. but the main issue is that the only route in root is “domain”/Admin and nothing else and here is the problem: if i write “domain”/ssadsdha which means something random word the app gets me to domain/random but it shows me the homepage and not the not-found.tsx i tried using a custom notfound page and the default but still. the weird thing is that the notfound.tsx works if i write domain/random/random etc.. but not in domain/kfndk , I even tried adding a root page.tsx to redirect all users to the /el domain but still doesnt work

I am working on an api project, and I need to gather the contents of the li using my javascript. There can be multiple of these li‘s

My html (just a small section)

<div>
    <button id="roomListButton">Click me to see what rooms your in</button>
        <ul id="roomsList">

        </ul>
            
</div>

My javascript (not everything)

const roomsListR = document.querySelector('#roomsList');

const delRoomButTEMPLATE = document.createElement('button')
delRoomButTEMPLATE.classList.add('deleteRoomBtn');
delRoomButTEMPLATE.innerHTML = `Leave this room`;


      const fetchRoomsAndProcess = async (event) => {
            console.log('fetching rooms')
            event.preventDefault();

            const response = await fetch('/getRooms');
            const jsonResponse = await response.json();
            const result = jsonResponse.result

            // Preparatory clean of the rooms list
                roomsListR.innerHTML = ``
            
            for (let i = 5; i != 0; i--) {
                let currentRoom = result.splice(0, 1)
                let currentRoom2 = currentRoom[0]
                let currentRoom3 = currentRoom2['roomname']
                console.log('currentRoom3 : ', currentRoom3);

                // Now do the stuff with currentRoom
                const li = document.createElement('li');
                li.innerHTML = `${currentRoom3} ${delRoomButTEMPLATE.outerHTML}`

                li.addEventListener('click', (event) => {
                    console.log('button clicked.')
                    const parent = event.target.parentNode
                    console.log(parent.innerHTML)
                })

                roomsListR.appendChild(li)

                if (result.length == 0) {
                    break
                }
            }

        }

The syntax: li.textContent does not work as it returns the text content of the button element inside it as well. li.innerText for some reason does the same thing. And li.innerHTML includes the tag which is not what I want.

Is there a shortcut for retrieving just the text in the node, not including any tags or anything inside of those tags?

While I was learning the language, I became interested in primitive types and their object wrappers.

While I was in my code editor discovering this language feature, I discovered that any of these object wrappers could be instantiated with the keyword “new.” I then discovered that not using it (new) transforms this “constructor” into a conversion function. Very well, the documentation tells me that this is an intentional feature of the language.

However, as I continued testing, I realized that trying to instantiate the BigInt and Symbol wrapper objects was impossible (returns a TypeError).

So, I went to read the documentation, and it clearly states that:

• Attempting to construct it with new throws a TypeError.
• Performs a type conversion when called as a function rather than as a constructor (like all other object wrappers).
• Is not intended to be used with the new operator or to be subclassed.

But nothing more!

The question I’m asking myself is: Why can all other wrapper objects be instantiated with the keyword new except for BigInt and Symbol?

My hypothesis was that in the symbol example, it is a bit of a special case in the sense that it is not “intended” to be manipulated, hence the instantiation.

Sorry for this long message, I feel like the answer is obvious and, worse, right in front of my eyes.

PS: I know that I will never instantiate wrapper objects in JavaScript in a real-world situation, I’m just wondering because I’m curious about what happens under the hood.

By the way, if you have any anecdotes or websites that explain in detail how things work, I’d love to hear them.

My main question is: I want to understand why adding Date.now() inside useMemo seems to break the optimization. As far as I know, a React component wrapped with React.memo only re-renders if its props change, so in this case, it should re-render only when items or onItemClick change. And when items changes, useMemo will recompute processedItems anyway because the array reference is different.

So why does it matter whether Date.now() is included or not?

Can someone please explain what I’m missing here? It seems like a simple question, but I’ve been struggling to fully understand this for days.

const ExpensiveComponent = React.memo(({ items, onItemClick }) => {
  const processedItems = useMemo(() => {
    return items.map((item) => ({
      ...item,
      processed: true,
      timestamp: Date.now(),
    }));
  }, [items]);
  return (
    <div>
      {" "}
      {processedItems.map((item) => (
        <div key={item.id} onClick={() => onItemClick(item)}>
          {item.name}
        </div>
      ))}{" "}
    </div>
  );
});

I tried logging with and without Date.now(), and the outputs appeared essentially the same, except that the timestamps are missing when it’s not included which is the expected result.

I understand that keyof TCreate gives a union of all keys in the type TCreate. But I’m confused about `TCreate[keyof TCreate]`. What exactly does it represent, why do we write it this way, and how does it work in TypeScript? I don’t fully get how it handles the values of the object and why it produces a union of all possible value types instead of preserving the specific type for each key

I know next to nothing about JS at the minute, I use this to import images from a separate HTML file into a DIV but I don’t know how to add a second path where I can have the same thing again but from a different file into a different DIV

Copying this block of code didn’t work, but I don’t know how to add it to the same script if you get what I mean.

<script type="text/javascript">
 jQuery(document).ready(function(){
   jQuery("#taskmarquee").load("/pagebuttons.html #PageBtns");
 });
</script>

Do JavaScript bundlers (or TypeScript) have some kind of feature that allows to bundle the code and “swap” some lines if specific features are available, like #ifdef macros in C or C#?

I have the following function, in this form should be compatible with any modern JS engine and browser. My target is to ensure this function always work.

public dispatch(): IteratorObject<(event: T) => void, void, void> {
    const listeners = [...this.#_listeners];
    return (function *() { for (const listener of listeners) yield listener; })();
}

Since March 2025 the new Iterable.from method (and other too) have been introduced and the MDN page says is newly available with modern browsers too.

The function from before could be rewritten like so:

public dispatch(): IteratorObject<(event: T) => void, void, void> {
    return Iterator.from([...this.#_listeners]);
}

And now the rewritten function only works with the most recent update or from an engine that supports the method.

Some scripts I’ve seen fix a similar problem with a constant at the top of the script that checks if a feature is avaiable and either use one of two method that use different features. then this is used inside the script.

Does modern JavaScript bundlers or TypeScript support for a more “literal” (if that’s how to be called) way to replace lines of code depending on version or features available?

Notes:

• The this.#_listeners is an array.

• The showcased functions returns IteratorObject because that’s the common class between a generator and Iterator.from

I have a document in which absolutely positioned divs get attached to the dom and removed from the dom. Sometimes, the newly attached divs are either partially visible or not visible at all. So I have to use the scrollintoview method as described here. But I need to have css setting to make sure that the scrolling happens with respect to body. So, my question is, How to make sure that body is the only scrollable ancestor?

REFERENCE: mdn web page there is reference to “scrollable ancestor”