Blancer.com Tutorials and projects

I’ve noticed that most answers about React Native markdown renderers are quite old—many from 5 to 9 years ago—and rely on outdated libraries or approaches.

Is there any modern, actively maintained React Native markdown library that fully supports GitHub Flavored Markdown and allows customization/extensibility?

I’ve tried react-native-markdown-display, but it doesn’t support full GFM, has issues like no horizontal scrolling for tables, limited tag support, and it’s not actively maintained.

Really hoping for some fresh options or recommendations!!!

I am familliar with react and javascript.
However I want to move my javascript code to typescript,

So I start hands-on for my basic application

However it shows the error like this below,

$npm run build
assets by status 1010 KiB [cached] 1 asset
runtime modules 123 bytes 1 module
modules by path ./node_modules/ 1000 KiB
  modules by path ./node_modules/react-dom/ 947 KiB
    modules by path ./node_modules/react-dom/*.js 2.67 KiB 2 modules
    modules by path ./node_modules/react-dom/cjs/*.js 945 KiB
      ./node_modules/react-dom/cjs/react-dom-client.development.js 928 KiB [built] [code generated]
      ./node_modules/react-dom/cjs/react-dom.development.js 17.3 KiB [built] [code generated]
  modules by path ./node_modules/react/ 44.2 KiB
    ./node_modules/react/index.js 186 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 44 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 12 KiB
    ./node_modules/scheduler/index.js 194 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.development.js 11.9 KiB [built] [code generated]
./src/index.tsx 1.84 KiB [built] [code generated]

WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./src/index.tsx 40:30-57
Module not found: Error: Can't resolve './components/App' in '/Users//httproot/frontend/src'
resolve './components/App' in '/Users/httproot/frontend/src'
  using description file: /Users/httproot/frontend/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/httproot//frontend/package.json (relative path: ./src/components/App)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/httproot/frontend/src/components/App doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/httproot/frontend/src/components/App.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/httproot/frontend/src/components/App.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/httproot/frontend/src/components/App.wasm doesn't exist
      as directory
        /Users/httproot/frontend/src/components/App doesn't exist

indes.tsx

import * as React from 'react'
import App from './components/App'
import {createRoot} from 'react-dom/client';
const rootElement = document.getElementById('app')!;
const root = createRoot(rootElement);
root.render(<App></App>);

App.tsx

import React, { Component,useEffect } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom";

import TopPage from './TopPage'

const App = () => {
    useEffect(() => {
        console.log("come rendered toppage");
    },[]);
    const pageProps = {
      env: "prod"
    }
    return <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<TopPage {...pageProps}/>} />
      </Routes>
    </BrowserRouter>
};
export default App;

TopPage.tsx

import React,{useState,useEffect,useRef,createContext,useCallback,useContext} from 'react'
interface PageProps {
    env: string,
  }
const TopPage = (props: PageProps) =>{
        useEffect(() => {
            console.log("come toppage");
            
        },[]);
    return <div>test toppage</div>
}
export default TopPage;

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
   entry: "./src/index.tsx",
   output: {
       path: path.resolve(__dirname, "./static/frontend"),
       filename: "[name].tsx",
   },
   module: {
       rules: [
           {
               test: /.tsx$/,
               exclude: /node_modules/,
               use: {
                   loader: "ts-loader",
               },
           },
       ],
   },
   optimization: {
       minimize: true,
   },
   plugins: [
       new webpack.DefinePlugin({
           'process.env.NODE_ENV' : JSON.stringify('development')
       })
   ]
}

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.27.4",
    "@babel/preset-env": "^7.27.2",
    "@babel/preset-react": "^7.27.1",
    "babel-loader": "^10.0.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "ts-loader": "^9.5.2",
    "typescript": "^5.8.3",
    "webpack": "^5.99.9",
    "webpack-cli": "^6.0.1"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "react-router-dom": "^7.6.2"
  }
}

Can someone suggest on the below issue please? I am able to call following API using CURL and also using Postman but when I try to write some code, Python or JS to fetch the response, it fails. Not even able to print the response code in the programs. I am using my personal laptop and there is no VPN.

Following code not Working: Getting response code 403 (requests.exceptions.HTTPError: 403 Client Error: Forbidden for url: https://openbanking.api.rabobank.com.au/public/cds-au/v1/banking/products)

1. Javascript:

   const response = await fetch("https://openbanking.api.rabobank.com.au/public/cds-au/v1/banking/products", {
     headers: { "x-v": "3" }
   });
   

2. Python:

   BASE_URL = "https://openbanking.api.rabobank.com.au/public/cds-au/v1/banking/products"
   HEADERS = {"x-v": "3"}
   
   resp = requests.get(BASE_URL, headers=HEADERS)
   

Following things are working:

1. CURL:

   curl -X GET "https://openbanking.api.rabobank.com.au/public/cds-au/v1/banking/products" -H "x-v: 3"
   

2. Postman is working for the same API

I want to write a program and get the response to process it further.

How do I do the Supabase JavaScript SDK version of this SQL inner join query on a specific column which isn’t the primary id column of either table?

I have a persons table with a user_id column and a user_roles table also with a user_id column and I want to get the user_roles for a person.

select role
from persons
inner join user_roles
on persons.user_id = user_roles.user_id

I have already tried

supabase.from('persons').select('*, user_roles!persons_user_id(id, role)')
supabase.from('persons').select('*, user_roles!persons_user_id_fkey(id, role)')
supabase.from('persons').select('*, user_roles!user_id(id, role)')

How do I do the Supabase JavaScript SDK version of this SQL inner join query on a specific column which isn’t the primary id column of either table?

I have a persons table with a user_id column and a user_roles table also with a user_id column and I want to get the user_roles for a person.

select role
from persons
inner join user_roles
on persons.user_id = user_roles.user_id

I have already tried

supabase.from('persons').select('*, user_roles!persons_user_id(id, role)')
supabase.from('persons').select('*, user_roles!persons_user_id_fkey(id, role)')
supabase.from('persons').select('*, user_roles!user_id(id, role)')

I want to do this with the Supabase JavaScript SDK.

I have a persons table with a user_id column and a user_roles table also with a user_id column and I want to get the user_roles for a person.

The SQL version of what I want is

select role
from persons
inner join user_roles
on persons.user_id = user_roles.user_id

I have already tried

supabase.from('persons').select('*, user_roles!persons_user_id(id, role)')
supabase.from('persons').select('*, user_roles!persons_user_id_fkey(id, role)')
supabase.from('persons').select('*, user_roles!user_id(id, role)')

I wrote a react component Header in which is a parent of all components, when I log in it successfully render the UserName in the Header but when I log out, what happens is that it will send me back to the login page but the user details is there,, only when I refresh the page the User name and logout button will be removed. How can I fix that?

here is the UserContext

export const UserContext = createContext()

export function UserContextProvider({children}) {
     const {isAuthorized, setIsAuthorized, auth} = useContext(IsAuthenticatedContext)
     const [user, setUser] = useState(null)
     useEffect(()=>{
          if (isAuthorized == true){
               get_user()
          }
     })

     const get_user = async()  => {
          try {
               const res = await api.get('/api/user/')
               const userData = res.data
               setUser(userData)
          } catch(err){
               console.log(err)
          }
     
     }

     return (<>
          <UserContext.Provider value={{ user, setUser }}>
               {children}
          </UserContext.Provider>
     </>)


}

Here is the Header component

import { useContext, } from 'react'
import { UserContext} from '../../lib/UserContext'
import '../../styles/header.css'
import { LuBell } from "react-icons/lu";
import { useNavigate } from 'react-router-dom'
import {IsAuthenticatedContext} from '../AuthContext'


function HeaderComponent({children}){
     const { user, setUser } = useContext(UserContext)

     const { auth } = useContext(IsAuthenticatedContext)
     const navigate = useNavigate() 
     const logout = async (e) => {
          e.preventDefault();
          localStorage.clear();
          setUser(null);     // Clear user state
          await auth()
          navigate('/login');       // Redirect
     }
     
     return (
          <>
          <header className="header">
               <h1 className="logo"><a href="#">Flexbox</a></h1>
               <ul className="main-nav">

                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    { user && (
                         <>
                              <li><a href="#">{user.username}</a></li>
                              <li><a href="#"><LuBell /></a></li>
                              <li>
                                   <a href="#" onClick={logout}>
                                        Logout
                                   </a>
                              </li>
                         </>)}
                    <li><a href="#">Contact</a></li>
               </ul>
          </header>
          {children} 
          </>
     )
}

export default HeaderComponent

When an field in an H5 page loaded by a WKWebView in an iOS development project is tapped to gain focus, a keyboard pop-up appears with a prompt for “slide-to-type” (“Slide your finger to connect letters into words for quick typing”). This prompt view appears almost every time the input field is focused.
Key Details:
Environment: iOS app with WKWebView loading an H5 page
Trigger: Tapping an element to focus it

Issue: Frequent appearance of the system-generated “slide-to-type” prompt on the keyboard, which is part of iOS 18’s default sliding input feature
Behavior: The prompt reappears consistently upon each focus event, potentially affecting user experienceI want to prevent the keyboard prompt “Slide your finger to spell words quickly as you type” from appearing every time the field is focused.

The goal is that one developer defines the Response/Request types mapping. The other developer implement the function, and given a Request Type, TypeScript should help him know what is the expected Response type without looking at the Typing mapping. Is that possible ?

I tried:

// Define the request types// Define the request types
interface SetGridDivisionsRequest {
  action: 'set-grid-divisions';
  divisions: number;
}

interface GetUserDetailsRequest {
  action: 'get-user-details';
  userId: string;
}

// Define the response types
interface SetGridDivisionsResponse {
  success: boolean;
  message: string;
}

interface GetUserDetailsResponse {
  success: boolean;
  userDetails: { name: string; age: number };
}

// Create a union type for the requests
type Request = SetGridDivisionsRequest | GetUserDetailsRequest;

// Define a ResponseMap where each action maps to a response type
type ResponseMap = {
  'set-grid-divisions': SetGridDivisionsResponse;
  'get-user-details': GetUserDetailsResponse;
};

// Correctly constrain the generic type T
chrome.runtime.onMessage.addListener(
  <T extends Request>(
    message: T,
    sender: chrome.runtime.MessageSender,
    sendResponse: (response: ResponseMap[T['action']]) => void
  ) => {
    // Now, TypeScript can correctly infer the response type based on T['action']
    if (message.action === 'set-grid-divisions') {
      const response: SetGridDivisionsResponse = {
        success: true,
        message: `Grid divisions set to ${message.divisions}`,
      };
      sendResponse(response);
    } else if (message.action === 'get-user-details') {
      const response: GetUserDetailsResponse = {
        success: true,
        userDetails: { name: 'John Doe', age: 30 },
      };
      sendResponse(response);
    }
  }
);

But it gives

Argument of type 'SetGridDivisionsResponse' is not assignable to parameter of type 'ResponseMap[T["action"]]'.
  Type 'SetGridDivisionsResponse' is not assignable to type 'SetGridDivisionsResponse & GetUserDetailsResponse'.
    Property 'userDetails' is missing in type 'SetGridDivisionsResponse' but required in type 'GetUserDetailsResponse'.ts(2345)

On my portfolio website, https://simplybrianscott.me/#gallery, the fourth row of images (images 10, 11, 12)are not the same size as the others, nor does it react the same way the first three rows do. How do I fix that so it all reacts the same way? Am I not changing the right css?

I’ve tried putting it in the same class, I also thought just adding a fourth row in my html, it would automatically apply the css rules to a new row. I’ve also tried inspecting on google chrome to see what would help, but so far nothing works.

this is the html thats being targeted in that section

<!-- Gallery Section -->  


<p>
    
<section id="gallery">
    <div class="gallery">
    
  <!-- thumbnail image wrapped in a link -->
<div>
  <article>
  <a href="#img1">
    <img src="images/landingpage.png">
  </a>
  </article>
  
  <article>
  <a href="#img2">
    <img src="images/apps.png">
  </a>
  </article>
  
  <article>
  <a href="#img3">
    <img src="images/bonniebook.png">
  </a>
  </article>
  </div>
  
  <div>
    <article>
      <a href="#img4">
        <img src="images/appm.jpg">
      </a>
      </article>
  
  
      <article>
        <a href="#img5">
          <img src="images/liebe.jpeg">
        </a>
        </article>
  
        <article>
          <a href="#img6">
            <img src="images/appguide.jpg">
          </a>
          </article>
  </div>
  
  <div>
    <article>
      <a href="#img7">
        <img src="images/uishop.jpg">
      </a>
      </article>
  
  
      <article>
        <a href="#img8">
          <img src="images/site3.png">
        </a>
        </article>
  
        <article>
          <a href="#img9">
            <img src="images/kiwi.jpg">
          </a>
          </article>
  </div>


    
    <article>
          <a href="#img10">
            <img src="images/skolos.jpg">
          </a>
          </article>
          
    <article>
          <a href="#img11">
            <img src="images/lvwalk.jpg">
          </a>
          </article>
          
    <article>
          <a href="#img12">
            <img src="images/neonmuseum.jpg">
          </a>
          </article>
    
</div>
    </section>

  <!-- lightbox container hidden with CSS, #(section) goes to the section, # alone goes to top of page -->
  <a href="#gallery" class="lightbox" id="img1">
    <span style="background-image: url('images/landingpage.png')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img2">
    <span style="background-image: url('images/apps.png')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img3">
    <span style="background-image: url('images/bonniebook.png')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img4">
    <span style="background-image: url('images/appm.jpg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img5">
    <span style="background-image: url('images/liebe.jpeg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img6">
    <span style="background-image: url('images/appguide.jpg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img7">
    <span style="background-image: url('images/uishop.jpg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img8">
    <span style="background-image: url('images/site3.png')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img9">
    <span style="background-image: url('images/kiwi.jpg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img10">
    <span style="background-image: url('images/skolos.jpg')"></span>
  </a>
  
  <a href="#gallery" class="lightbox" id="img11">
    <span style="background-image: url('images/lvwalk.jpg')"></span>
  </a>
 
 <a href="#gallery" class="lightbox" id="img12">
    <span style="background-image: url('images/neonmuseum.jpg')"></span>
  </a>
  
</p>

and this is the css that accompanies it

.gallery {
    --_height: 250px; 
    --_gap: .5rem;
  display: flex;
    --_grid-rows: var(--_height) var(--_height) var(--_height);
    --_height-hover: calc(var(--_height) * 1.22);
    --_height-not-hover: calc(var(--_height) / 1);
   margin-right: auto;
  margin-left: auto;
    width: 100%;  
    max-width: 800px;
    display: grid;
    gap: var(--_gap);
}
@media (min-width:720px){
  .gallery {
      grid-template-columns: repeat(4,1fr);
  }
  
}
.gallery>div {
    height: fit-content;
    display: grid;
    grid-template-rows: var(--_grid-rows);
    gap: var(--_gap);
    transition: grid-template-rows 300ms ease-in-out;
}
.gallery>div>article {
    position: relative;
    text-align: center;
}
.gallery>div>article>div{
   position: absolute;
  bottom: 0;
  left: 0;
  background: #00000070;
  font-size: 0.65rem;
  color: white;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem 0.5rem;
  
}
.gallery>div>article>div>span{
  font-size: 0.7rem;
  color: red;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}
.gallery>div:has(>article:nth-child(1):hover) {
    --_grid-rows: var(--_height-hover) var(--_height-not-hover) var(--_height-not-hover);
}
.gallery>div:has(>article:nth-child(2):hover) {
    --_grid-rows: var(--_height-not-hover) var(--_height-hover) var(--_height-not-hover);
}
.gallery>div:has(>article:nth-child(3):hover) {
    --_grid-rows: var(--_height-not-hover) var(--_height-not-hover) var(--_height-hover);
}


img {
  max-height: 300px;
  max-width: 300px;
}


a:hover {
  color: #bbb;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

i’m creating my portfolio using threejs, when i add more threejs elements it shows some of them as a white box, but i have no idea why, here’s the image of what i’m talking about1 the second picture shows what the console is showing2, thanks in advance!

The scenario is this: The frontend JS on the website has a step where images get uploaded to an S3 bucket for later processing. The frontend JS returns a presigned S3 URL, and this URL is based on the image filename of the image in question. The logs of the scrambled user’s images confirm that the keys (and the subsequently returned presigned S3 URLs) are completely unique:

user 1 — S3 Key: uploads/02512088.png

user 2 — S3 Key: uploads/evil-art-1.15.png

The image upload then happens to the returned presigned S3 URL in the frontend JS of the respective users like so:

const uploadResponse = await fetch(body.signedUrl, {
method: 'PUT',
headers: {
'Content-Type': current_image_file.type
},
body: current_image_file
});

These are different users, using different computers, different browser tabs, etc. So far, all signs indicate, these are entirely different images being uploaded to entirely different S3 bucket keys. Based on just… all my understanding of how code, and computers, and code execution works… there’s just no way that one user’s image from the JS running in his browser could possilbly “cross over” into the other user’s browser and get uploaded via his computer to his unique and distinct S3 key.

However… at a later step in the code, when this image needs to get downloaded from the second user’s S3 key… it somehow downloads one of the FIRST user’s images instead.

2025-06-23T22:39:56.840Z 2f0282b8-31e8-44f1-be4d-57216c059ca8 INFO Downloading image from S3 bucket: mybucket123 with key: uploads/evil-art-1.14.png

2025-06-23T22:39:56.936Z 2f0282b8-31e8-44f1-be4d-57216c059ca8 INFO Image downloaded successfully!

2025-06-23T22:39:56.937Z 2f0282b8-31e8-44f1-be4d-57216c059ca8 INFO ORIGINAL IMAGE SIZE: 267 66

We know the wrong image was somehow downloaded because the image size matches the first user’s images, and doesn’t match the second user’s image. AND the second user’s operation that the website performed ended up delivering a final product that outputted the first user’s image, not the expected image of the second user.

The above step happens in a Lambda function. Here again, it should be totally separate execution environments, totally distinct code that runs, so how on earth could one user’s image get downloaded in this way by a second user? The keys are different, the JS browser environment is different, the lambda functions that do the download run separately. This just genuinely doesn’t seem technically possible.

Has anyone ever encountered anything like this before? Does anyone have any ideas what could be causing this?