Blancer.com Tutorials and projects

Am working on a Next.js 15 application and I have this issue where buttons and input fields are not working. I try changing the routes and applying route groups somehow it works but that leaves some of my applied CSS not working what could be the problem?

I’m creating a Node.js app with Express and trying to implement an error handling routine. It works with test errors I throw from my controller, but when a real error occurs, my error handling middleware doesn’t catch it. Instead, the console prints the error and the server stops. This would be a major problem in production if any error causes the server to crash.

I think the issue might be related to the async methods I’m calling. Here’s what I’ve done:

In my index.js, I’ve registered the error handling middleware:

// Error handler middleware (must be after all routes)
app.use(errorHandler);

My errorHandler middleware (works when the test error was thrown):

const errorHandler = async (err, req, res, next) => {
    let errorId = saveErrorToDatabase();
    return Responses.internalError(res, `Internal Server Error (ID: ${errorId})`);
};

Then I have my controller class that my route points to:

async create(req, res, next) {
    const { name, type } = req.body;                
    const inserted_id = await (new Account()).insert(name, type);        
    Responses.success(res, 201, { id: inserted_id, message: 'Account created successfully' });
},

My Account object:

async insert(name, type) {
    return this.#crudDBUtil.insert({ name, type });        
}

CrudDBUtil is a class I created to handle database operations. The insert operation is generating an error (a required field wasn’t provided). I expected the API to respond with “Internal Server Error: ID 9999” and save the error in the database. Instead, I’m getting this error (parts omitted for clarity and privacy):

{my full path}pool.js:36
    const localErr = new Error();
                     ^

Error: Field 'user_id' doesn't have a default value
    at {Full Call stack} {
  code: 'ER_NO_DEFAULT_FOR_FIELD',
  errno: 1364,
  sql: '{sql sentence}",
  sqlState: 'HY000',
  sqlMessage: "Field 'user_id' doesn't have a default value"
}

Node.js v20.17.0

My issue isn’t with the error itself – I know what it is and how to fix it. However, I want future errors to be registered in the database and, most importantly, not cause the server to stop running. How can I make sure my error handler catches all errors, including those from async operations?

I am currently developing a Word add-in using Office.js and I need to extract online audio and video content embedded in the body of the document. Specifically, I am trying to programmatically identify and extract URLs or embedded media files (audio and video) within the Word document using the Office JavaScript API. thanks in advance.

I want to apply scrolling effect like in Wix https://pt.wix.com/studio/enterprise image scrolling
please view and open this url and chec https://pt.wix.com/studio/enterprise see

this is my website
https://medisuggest.com/

here is my code

 gsap.fromTo(".surgery-video-p",
        { scale: 1 }, 
        { 
            scale: 1.45, 
            ease: "none", 
            scrollTrigger: {
                trigger: ".surgery-video-p",
                start: "top 20%",
                end: "bottom center",
                scrub: true,
                pin: true 
            }
        }
    );
    gsap.fromTo(".image-box-top",
        {         
            x: 4912.8,  
            y: -405.6, 
            rotate: 0,  
        }, 
        { 
            x: 0, 
            y: 0, 
            rotate: 0,  // Keep rotation at 0
            ease: "power2.out", 
            scrollTrigger: {
                trigger: ".image-box-top",
                start: "top 20%",
                end: "bottom center",
                scrub: true,
                pin: true,
                pinSpacing: false,
                onUpdate: (self) => {
                    if (self.progress === 1) { 
                        gsap.set('.image-box-top', { clearProps: "transform" }); // Reset transform
                    } 
                  },
            }
        }
    );

We are being required to move all css and javascript to external files.
The css works fine. The javascript files only works in a particular way which is not approved.
The following line works:

    '''
    <script>{% include 'js/region_data.js' %}</script>
    '''

This line does NOT work: Gets the following error in the dev tools console,
region_data.js:7 Uncaught SyntaxError: Unexpected token % (at region_data.js:7:6)

    '''
    <script src="/static/js/region/region_data.js" type="text/javascript"></script>
    '''

This is their location in the html file, the line that doesn’t work is commented out:

    '''
    {% extends "layout_bs5.html" %}
    {% import 'macros.html' as data_macros %}
    {% block head %}
        {{ super() }}
        <link rel="stylesheet" type="text/css" href="/static/css/region/region_data.css">
        <script>{% include 'js/region_data.js' %}</script>
        <!-- <script src="/static/js/region/region_data.js" type="text/javascript"></script> -->
    {% endblock %}
    '''

The {% is where the error occurs when using the <script src=…

    '''
    $( document ).ready(function() {
      {% for parameter in parameters %}
          {{ data_macros.generate_js(parameter) }}
      {% endfor %}
    '''

folder structure for file that works:

    '''
    region_data/trunk/src/templates/js/region_data.js
    region_data/trunk/src/templates/index.html
    region_data/trunk/src/templates/macros.html
    '''

folder structure for file that does NOT work

    '''
    static/trunk/src/static/js/region/region_data.js
    '''

I have heard that anything to do with flask needs to be loaded with the flask templates and I can’t use an external file in static if it has flask or jinja in it.
Is that why the static file gets an error but the one in the templates/js folder does not??

I don’t understand why.
I am not allowed to use the ‘include’. It has to be in the static folder but I don’t see a way of doing that. Any ideas?

in our shop we use wp-blocks scheme for the cart and checkout page.

What I would like to achieve is:

1. Show specific shipping method only for certain shipping class (or group of products) and hide other methods.
2. Show specific payment method only for certain product ids and/or certain product categories. (This is an extra question, I guess if I get how to achieve the first one, this one will be similar)

I tried to achieve it using JQuery, in custom theme script, but it seems like JQuery scripts are not applied to wp-blocks.

I used this php method to get info if the products from the cart are only from ‘my-custom-shipping-class’ shipping class.
If the answer is true, then I would like to show only one specific shipping (let’s say ‘shipping-method-1’) method and hide others.
If the answer is false, I would like to show all the mothods, except the ‘shipping-method-1’.

function show_shipping_method() {
    $slug = 'my-custom-shipping-class';
    global $woocommerce;
    $product_in_cart = false;
    $other_product_in_cart = false;
    foreach ($woocommerce->cart->get_cart() as $cart_item_key => $values) {
        $_product = $values['data'];
        $terms    = get_the_terms($_product->id, 'product_shipping_class');
        if ($terms) {
            foreach ($terms as $term) {
                $_shippingclass = $term->slug;
                if ($slug === $_shippingclass) {
                    $product_in_cart = true;
                } else {
                    $other_product_in_cart = true;
                }
            }
        } else {
            $other_product_in_cart = true;
        }
    }
    return ($product_in_cart && !$other_product_in_cart);
    
}

Then in theme html I’d add custom class:

<section id="service-page" class="<?php echo apply_filters( 'shipping_class_to_add') ? 'hide-all-shipping-except-my-custom-shipping-class' : 'hide-my-custom-shipping-class';
                                  ?>">

Then in CSS:

.hide-all-shipping-except-my-custom-shipping-class label[for="radio-control-0-flat_rate:5"],
.hide-all-shipping-except-my-custom-shipping-class label[for="radio-control-0-flat_rate:4"],
.hide-all-shipping-except-my-custom-shipping-class label[for="radio-control-0-flat_rate:1"]{
    display:none;
} 

.hide-my-custom-shipping-class label[for="radio-control-0-flat_rate:11"] {
    display: none;
}

An then, finally, JQuery code, to check the radio button of the desired shipping method (this part doesn’t work):

jQuery('document').ready(function() {
// escaping the colon doesn't change anything, none of the JQuery code works with wp-blocks
    $('input[id="radio-control-0-flat_rate:11"]').prop('checked', true);
});

Thank you in advance for help.

Looking for C# or JavaScript Libraries for User Authentication with alternative profiles like Shopping, student or Job Profile. so I want to perform single sign on but with weird profile types?

Libraries or services that enable me to do this

Using this one-liner (from e.g. Javascript – check if key exists – if not create it, all in one line, MoustafaS answer):

attribute.myname || delete attribute.name ;

produces:

true

How can I modify that one-liner to remove that true response? (i.e. avoid any type of response).

Here the context:

For instance, I have two attributes that I would like to pass to this variable:

info.innerText =
     "id_station: "+ mygeojson.id_station +"n"+
     "fid_station: "+mygeojson.fid_station +"n"+
     ...

but one of them (fid) may not exist, so I want to avoid displaying it if it does not exist. So, I want to remove it (as well any blank spaces that may appear). For instance, I get a blank space if I do:

attribute.myname || '' ;

In that case, how can I delete the blank space (or row containing that value?).

I’m trying to figure out how to display all identifier values(material table rows) if the ALL checkbox is checked. My current setup filters the rows based on identical values but the ‘ALL’ keyword is not an actual value in the material table.

I think the fix would need to happen here meaning if ALL is checked return […data]

 if (
   !this.identifierFilterValue ||
   this.identifierFilterValue.length === 0
    ) {
   console.log('No Identifier Filters are selected return full data');
   return [...data];
  }

How to test: When the page loads click the search button then toggle the ALL checkbox a few times. When it’s unchecked all rows appear. However I want all the rows to appear if ALL is checked.

Here is my stackblitz.

I am developing a React Native app for a health monitoring device that connects via Bluetooth and streams live data on iOS. To ensure the uniqueness of the device, I initially planned to use the MAC address. However, I discovered that iOS does not provide access to the original MAC address due to privacy restrictions.
Is there an alternative approach to uniquely identifying a Bluetooth device in iOS? I need a reliable way to distinguish devices while maintaining secure and stable connections.
Any insights or best practices on handling this in iOS would be greatly appreciated.

I’m using a DevExtreme Data Grid inside a master-detail view. I want to open another component (or section) when a row is clicked inside the detail grid. To do this, I’m setting a variable (showAddHorario = true) inside the onRowClick event. However, it doesn’t always work on the first click—it sometimes requires multiple clicks before the state updates.

Here’s the relevant code:

  [dataSource]="salas"
  [showColumnLines]="true"
  [showBorders]="true"
  [rowAlternationEnabled]="true"
  [focusedRowEnabled]="false"
  [selection]="{ mode: 'none' }"
  [masterDetail]="{ enabled: true, autoExpandAll: true, template: 'detailTemplate' }">

//rest of code

  </div>
  <div *dxTemplate="let data of 'detailTemplate'">
    <dx-data-grid
      [dataSource]="data.data.horarios"
      [showBorders]="true"
      [hoverStateEnabled]="true"
      [selection]="{ mode: 'none' }"
      [focusedRowEnabled]="false"
      keyExpr="id"
      (onRowClick)="onRowClick($event, data.data)"
      class="detail-grid">
      <dxi-column dataField="startDate" caption="{{ label.DataInicio }}" [format]="{ type: 'date', format: 'dd/MM/yyyy' }"></dxi-column>
      <dxi-column dataField="endDate" caption="{{ label.DataFim }}" [format]="{ type: 'date', format: 'dd/MM/yyyy' }"></dxi-column>

      @for (day of daysOfWeek; track $index; let dayIndex = $index) {
        <dxi-column ="day" [calculateCellValue]="getScheduleCalculator(dayIndex)"></dxi-column>
      }
    </dx-data-grid>
  </div>

heres the function called:

onRowClick(event: RowClickEvent, sala: GetSalasByServiceResponse): void {
    const horario: GetSalasByServicoHorarioResponse = event.data;
    const horarioData: GetSalaByServicoHorarioDiarioResponse[] = event.data.horariosDiarios || [];
    this.selectedHorarioData = horario;
    this.horariosDiarios = horarioData;
    this.selectedSala = sala;
    this.showAddHorario = true;
  }

I will be showing the games in a game center project and I wanted an effective design for this. I liked this image. I tried to do it with clip-path in the css section but it didn’t work. I tried different things but I couldn’t do it. Is it possible? How can I do it?

---

This problem isn’t new, I think it’s as old as browser caching and I’m aware of that from the number of sites I’ve trawled through looking for a solution but the problem remains and I’m a bit lost.

I’ve made a website that can be installed as a Progressive Web App and I want to ensure that users don’t have to do any manual work when I upload a new version of the site to the server.

I have iterated over several potential solutions for this, none of which appear to do anything – if I press f5 and look at my network activity, all the files that I’ve changed are still stubbornly the old versions (unless I clear the cache manually or toggle ‘disable cache’ in the dev options)

Firstly, I use the ‘manifest’ attribute in the HTML tag of my site’s main page.

<html lang="en" manifest="/games/safeword/appcache.php">

and that file’s contents look like this:

<?php 
    header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
    header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
    header('Content-type: text/cache-manifest');
?>CACHE MANIFEST
v0.5.1323434
# Explicitly cached 'master entries'.
CACHE:
MyGame/assets/favicon.ico
Games/MyGame/index.php
dist/mainjs.js
css/main.css

However, as far as I can tell, this file does absolutely nothing – perhaps its been superseded by the PWA framework but I’ve found it difficult to find solid information on that other than a single line on the Wikipedia entry suggesting that this is an obsolete technology and this ought to be handled by the PWA framework (https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5).

I also include several cache invalidation incantations that appear to also have no effect whatsoever:

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> 
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>

Assuming that’s the case, I’ve tried to also implement some sort of cache control within the PWA framework but the service worker I’ve written doesn’t seem to be called under normal website operation, so I’m not sure how that would help for checking if updates are available and to then apply those.

This is how I’m going about that in any case (within my web app’s initialisation function) :

if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("./scripts/install_game.js");        
      }

and the service worker itself looks something like this:

const cacheName = "MyGame";
const cacheContents = [    
    "/dist/webpackedmainfile.js",
    "../assets/someimage.png",
    "../assets/anotherimage.png"
];

self.addEventListener("install", (e) => {
    console.log("[Service Worker] Install");
    e.waitUntil(
      (async () => {
        const cache = await caches.open(cacheName);
        console.log("[Service Worker] Caching all: app shell and content");
        await cache.addAll(cacheContents);
      })(),
    );
  });

and the manifest file for the PWA looks like this:

{
    "id": "/games/mygame/index.php?version=v0.5.20",
    "name": "mygame",
    "start_url": ".",
    "screenshots": [
        {
            "src": "assets/screenshots/ss1.png",
            "sizes": "1280x720",
            "type": "image/png",
            "form_factor": "wide",
            "label": "crown and keyboard safe closed"
        }      
    ],
    "icons": [        
        {
            "src": "assets/logo144.png",
            "type": "image/png",
            "sizes": "144x144",
            "purpose": "maskable"
        },
        {
            "src": "assets/logo144.png",
            "type": "image/png",
            "sizes": "144x144",
            "purpose": "any"
        }
    ],
    "display": "standalone",
    "background_color": "#181200"
}

which actually does work: I can install the page as an app on all the platforms I’ve tested on. However, inspecting in chrome shows nothing cached under that cache name so I don’t think its worked as I intended – files are still cached, just not under my named cache. I’m also not sure what effect any of this has if the webpage isn’t installed as an app – I want a unified system that works for both and I don’t think that will ever update unless its forcibly reinstalled.

The flow I want is that I update my manfiest file’s version number and then something is triggered that either reinstalls everything or selectively reinstalls out of date files. I don’t mind handling that myself but I need to know how. I would like to know how to accomplish this for the PWA version and the website.

I am creating a small list using React Hook Form with useFieldArray. I want to filter the list when the user types anything in the search field. However, the filtering is not working. Could you kindly suggest solutions?
Below is my code:
https://playcode.io/2322411

import React from 'react';
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
import ReactDOM from 'react-dom';

let renderCount = 0;

export function App() {
  const { register, control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      test: [
        { firstName: 'Bill 1', lastName: 'Luo' },

        { firstName: 'hello2', lastName: 'Luo' },

        { firstName: 'test 3', lastName: 'Luo' },
        { firstName: 'test 4', lastName: 'Luo' },
      ],
    },
  });
  const { fields, append, prepend, remove, swap, move, insert, replace } =
    useFieldArray({
      control,
      name: 'test',
    });

  const onSubmit = data => console.log('data', data);

  const [searchQuery, setSearchQuery] = React.useState('');

  const handleSearchChange = event => {
    setSearchQuery(event.target.value);
  };

  const filteredRows = fields.filter(row =>
    row.firstName.toLowerCase().includes(searchQuery.toLowerCase())
  );

  console.log(JSON.stringify(filteredRows));
  return (
    <>
      <input onChange={handleSearchChange} value={searchQuery} />

      <form onSubmit={handleSubmit(onSubmit)}>
        <ul>
          {filteredRows.map((item, index) => {
            return (
              <li key={item.id}>
                <input
                  {...register(`test.${index}.firstName`, { required: true })}
                />

                <Controller
                  render={({ field }) => <input {...field} />}
                  name={`test.${index}.lastName`}
                  control={control}
                />
              </li>
            );
          })}
        </ul>
      </form>
    </>
  );
}

// Log to console
console.log('Hello console');

Issue is : when I searching “test” it is showing first two rows instead of last two rows .. don’t know why ?

I am trying to fetch an API in my React Native project but everytime I try to fetch the API using dispatch, it gives me

Warning: RangeError: Maximum call stack size exceeded

Here is the call:

useEffect(() => {
    
    if (products.length === 0) {
      console.log('[HomeScreen] Dispatching fetchProducts...');
      dispatch(fetchSomeData());
    }
  }, [dispatch, products.length]);

And here is the fetch method:

export const fetchProducts = () => {
  return async dispatch => {
   
    console.log('[fetchProducts] Dispatching FETCH_PRODUCTS_REQUEST');
    dispatch({type: 'FETCH_PRODUCTS_REQUEST'});

    try {
      console.log('[fetchProducts] Fetching data from API...');
      const response = await fetch('https://fakestoreapi.com/products');
      const data = await response.json();

      console.log('[fetchProducts] API Response:', data.length, 'items');

      dispatch({type: 'FETCH_PRODUCTS_SUCCESS', payload: data});
    } catch (error) {
      console.error('[fetchProducts] Error fetching products:', error);
      dispatch({type: 'FETCH_PRODUCTS_FAILURE', error});
    }
  };
};

And here is the reducer:

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_PRODUCTS_REQUEST:
      return {...state, loading: true};
    case FETCH_PRODUCTS_SUCCESS:
      return {...state, loading: false, products: action.payload};
    case FETCH_PRODUCTS_FAILURE:
      return {...state, loading: false, error: action.error};
    default:
      return state;
  }
};

I have also tried store.dispatch instead of just dispatch and I have also tried changing the whole fetchProducts() method by:

const client = axios.create({
  baseURL: 'https://fakestoreapi.com/', 
  timeout: 10000, 
  headers: {
    'Content-Type': 'application/json',
   
  },
});

export const fetchSomeData = (dispatch, getState) => {
  console.log('Fetching data from API...');
  
  try {
    client.get('products').then(data => {
      console.log('Number of todos before loading: ', getState().data.length);
      // Dispatch an action with the todos we received
      dispatch({type: 'FETCH_PRODUCTS_SUCCESS', payload: data});
      // Check the updated store state after dispatching
      const allTodos = getState().data;
      console.log('Number of todos after loading: ', allTodos.length);
    });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

but still getting the same error, any ideas what might be going wrong?