Author: Blancer

Hello everyone I need to organize mapping in my Nest js application, but I can’t find the right libraries. The ability to access DI and declarativeness is necessary.

Given a ReadableStream on Chromium-based browsers, with possible initiators such as

• fetch()
• WebSocketStream
• WebTransport
• User-defined, for example the readable side of a TransformStream which might not necessarily involve local or remote networking at all

WebSocket has a message (or frame) size limit. So do HTTP/2 and HTTP/3 frames. I don’t think fetch() or WebTransport will, generally, have a single read more than 65536 bytes when using pipeTo() or reading aReadableStreamDefaultReader.

Do you think you can distinguish between possible initiators/sources of the ReadableStream, by any means?

I have built a stacked vertical bar chart using Highcharts
for some odd reason all the data is squished in the middle instead of spreading to the full width of the chart

let depthChart;

    const buildDepthChart = (bidPrices, askPrices, bidsData, asksData) => {
        const maxAbsValue = Math.max(
            ...bidsData.map(item => Math.abs(item.y)),
            ...asksData.map(item => Math.abs(item.y))
        );

        // Combine and sort prices
        const allPrices = [...bidPrices, ...askPrices].sort((a, b) => a - b);
        const uniquePrices = [...new Set(allPrices)];

        depthChart = Highcharts.chart('marketDepthContainer', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'עומק שוק'
            },
            xAxis: {
                categories: uniquePrices, // Sorted unique prices
                title: {
                    text: 'Price'
                },
                labels: {
                    step: 1
                },
                // tickInterval: 0.001, // Try tickInterval
                // min: 1.18, // Explicit min
                // max: 1.4, // Explicit max
            },
            yAxis: {
                title: {
                    text: 'Volume'
                },
                min: -maxAbsValue,
                max: maxAbsValue
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    // pointWidth: 2,
                    borderRadius: '5%'
                }
            },
            tooltip: {
                useHTML: true,
                formatter: function () {
                    const price = this.x;
                    const volume = this.y;
                    return `<span><b>Price:</b> ${price}</span><br><span><b>${this.series.name}:</b> ${volume}</span>`;
                }
            },
            series: [{
                name: 'bids',
                data: bidsData,
                color: 'rgba(47, 171, 126, 0.2)'
            }, {
                name: 'asks',
                data: asksData,
                color: 'rgba(255, 88, 67, 0.2)'
            }]
        });
    };

here is a codepen snippet of my code with some stuff removed

image of said chart

and as can be seen in the image, and in the codepen they are all overlapping eachother in the middle, instead of spreading around the x-axis
i’m fairly new to highcharts but i did create a similar horizontal chart that works fine so i have no idea if it’s specific to column charts or i’m missing something

Im coding an app for Android using React Native in Expo, and I think I have found an impossible task.

I have succesfully removed/hidden the “Bottom Navigationbar” for Android devices and even set a custom color. BUT, everytime on every single MODAL Component in the app it overrides my design and the Bottom Navigationbar reappears and also to the default THEME of the user.

I have sat with this for a week and I see many people with the same problem on Stack Overflow, Reddit and other forums.

TRY IT YOURSELF and see if you can come up with a solution!

Here you can see an example of my settings, as you can see we do not have a navbar at the bottom UNTIL a Modal appears and overrides our app.js

withoutmodalwithmodal

If you want an example of the Modal:

 <Modal
    animationType="fade"
    transparent={true}
    visible={showDisableNotificationsModal}
    onRequestClose={() => setShowDisableNotificationsModal(false)}
  >
    <View style={styles.modalOverlay}>
      <View style={styles.modalContent}>
        <Text style={styles.modalTitle}>Disable Notifications</Text>
        <Text style={styles.modalMessage}>
          Are you sure you want to disable notifications?
        </Text>
        <View style={styles.modalDivider} />
        <View style={styles.modalButtonContainer}>
          <TouchableOpacity
            style={styles.modalButton}
            onPress={() => setShowDisableNotificationsModal(false)}
          >
            <Text style={styles.modalButtonText}>Cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalButton}
            onPress={() => {
              toggleNotifications(); // Actually disable
              disableNotifications();
              setShowDisableNotificationsModal(false); // Close modal
            }}
          >
            <Text style={[styles.modalButtonText, { color: "#F53769" }]}>
              Disable
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  </Modal>

I am doing an exercise. I am having an issue accessing an object array’s members. I have the following object array declaration:

const dishData = [
{
name: "Italian pasta",
price: 9.55
},
{
name: "Rice with veggies",
price: 8.65
},
{
name: "Chicken with potatoes",
price: 15.55
},
{
name: "Vegetarian Pizza",
price: 6.45
},
]

I am trying to access each member of the object array within a for loop. My following code will not complie:

dishData.forEach(dish) => {
var finalPrice;
if (taxBoolean == true) {
finalPrice = dishData(dish).price * tax;
}
else if (taxBoolean == false) {
finalPrice = dishData(dish).price;
}
else {
console.log("You need to pass a boolean to the getPrices call!");
return;
}
console.log("Dish: ", dishData(dish).name, "Price: $", dishData(dish).finalPrice);
}

}

When I use dishData(dish).price, I mean to access the price property for that loops iterantion of dishData.

Can anyone help me out?

I am trying to create a pixel painting project using HTML, CSS, and JS. I am having trouble with the painting mechanics.

expected result:

mousedown –> being able to move mouse and paint using mouseover –> mouseup (stop painting)

I originally did this:

for (let i = 0; i <= pixels.length; i++) {
    pixels[i]?.addEventListener("mouseover", () => {
        pixels[i].setAttribute("style", "background: black");
        console.log("painting");
    })

}

and this works when the mouse is over the canvas. but this doesn’t include the mousedown/mouseup mechanic. so, I tried this:

try 1:

if (mouseDown) {
    pixels.forEach(pixel => {
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;
            if (!mouseDown) {
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    })
}

try 2:

pixels.forEach(pixel => {
    if (mouseDown) {
        //to color the first pixel clicked
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;

            if (!mouseDown) {
                //remove the coloring if the mouse button is up
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    }
})

But none seem to work. I have checked the mouseDown and it works so I am not sure why it doesn’t execute.

I’m encountering an issue with my PostCSS configuration in my project. When I try to run my development server, I receive the following error message:Failed to load PostCSS config: module is not defined in ES module scope
Context:
I have a postcss.config.js file that I am using to configure PostCSS.
My project is set up to use ES modules (I have “type”: “module” in my package.json).
I am using Node.js version 22.13.0
My project is built with [insert framework or build tool, e.g., React, Vite

Steps Taken:
I checked my package. Json and confirmed that it includes “type”: “module”.
I attempted to rename my Post CSS config file to postcss.config.cjs to use CommonJS syntax, but I still encounter issues.
I verified that all required dependencies are installed.

What could be causing this error, and how can I resolve it? Are there specific changes I need to make to my PostCSS configuration or project setup to ensure compatibility with ES modules?

Thank you for your help!

I started a small project in react + webpack in which I tried to use the components proposed by Semantic UI, here, I set up a small search form which contains an icon proposed by Semantic UI, but at the time of the build of my application, the icon does not load and the error message below appears:

error icon

after several searches I modified the .gitattributes file :

gitattributes file

I also modified the webpack file:

const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

const port = 8080;

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  module: {
    rules: [
      // Styles for SCSS files
      {
        test: /.(scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              implementation: require('sass'),
            },
          },
        ],
      },
      // Styles for CSS files
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      // Fonts and assets
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
      },
    ],
  },

  devServer: {
    historyApiFallback: true,
    static: path.resolve(__dirname, '../dist'),
    static: {
      watch: {
        ignored: /node_modules/,
      },
    },
    open: true,
    compress: true,
    hot: true,
    port,
  },
});

The problem persists in spite of everything. Any ideas? ^^

I am currently working on a pokemon team builder. The issue I have is the following:

On my SelectedTeamBanner component I have an effect that should check if user has any team stored on localStorage. If the user doesn´t have any team on localStorage it should create only one team and save it on localStorage:

import { PokemonTeam } from '../../../../domain/teamMemberEntities';
import useWeavileStore from '../../../../globalContext/WeavileStore';
import { useDefaultTeam } from '../../hooks/useDefaultTeam';
import { BannerMember, SelectedTeamName, TeamTypesDropdown } from './';

import '../../styles/selectedTeamBanner.css';

export const SelectedTeamBanner = () => {

    const { getDefaultTeam } = useDefaultTeam();
    const selectedTeam: PokemonTeam | null = useWeavileStore((state) => state.selectedPokemonTeam);
    
    /* Faulty effect */
    useEffect(() => {
        const asyncEffectWrapper = async () => {            
            await getDefaultTeam(); 
            /* I don´t know if there is any point on awaiting this promise
             but not awaitng it neither fixed the issue */
        }
        asyncEffectWrapper();
    }, []);

    return (
        <section className="selected-team-banner">
            {/* This component renders before useEffect finishes causing to selectedTeam to be undefined
            That is why all nodes check if selectedTeam is undefined before rendering*/}
            {
                selectedTeam && <SelectedTeamName />
            }
            {
                selectedTeam?.teamMembers
                && selectedTeam.teamMembers.map((member, index) => (
                    <BannerMember member={member} key={index} />
                ))
            }
            <TeamTypesDropdown />
        </section>
    );
}

getDefaultTeam is the function that based on checkIfUserHasTeams result decides what to do:

import { PokemonTeam } from "../../../domain/teamMemberEntities";
import useWeavileStore from '../../../globalContext/WeavileStore';
import { createNewTeamRequest } from "../api/nonLoggedUsers";
import { checkIfUserHasTeams, storePokemonTeam } from "../helpers/nonLoggedUser";

export const useDefaultTeam = () => {

    const changeSelectedTeam = useWeavileStore((state) => state.changeSelectedTeam);     
    const changeSelectedMember = useWeavileStore((state) => state.changeSelectedPokemon);

    const getDefaultTeam = async(): Promise<PokemonTeam> => {
        const result: PokemonTeam | null = checkIfUserHasTeams();
        
        if (result !== null) return result;
        else {
            const response = await createNewTeamRequest(TeamType.INDIVIDUAL); // Server side works fine
            if (response.status === 201) {
                const firstTeam: PokemonTeam = storePokemonTeam(response.data);
                changeSelectedTeam(firstTeam);
                changeSelectedMember(firstTeam.teamMembers[0]);      
                
                return firstTeam;
            } 
            else throw new Error("Error creating default first pokemon " + response.statusText);
        };
    }

    return { getDefaultTeam };
    
};

checkIfUsersHasTeams() is meant to search items on localStorage looping between 0 and 14.
If it finds one, then return the JSON parsed as PokemonTeam, if not then return null to create a new team on server side.

/* Items in localStorage saves using a numeric key between 0 and 14 */

export const checkIfUserHasTeams = ():  PokemonTeam | null => {

    for(let i: number = 0; i < 15; i++) {
        const storedItem = localStorage.getItem(i.toString());
        
        if(storedItem !== null) {
            const parsedItem: PokemonTeam = JSON.parse(storedItem);
            return parsedItem;
        }  
    }

    return null;
}

And finally, the function that stores the team on localStorage:

import { PokemonTeam } from '../../../../domain/teamMemberEntities/PokemonTeam';
import { getAllTeamsLocalStorage } from "./getAllTeamsLocalStorage";

export const storePokemonTeam = (argTeam: PokemonTeam): PokemonTeam => {

    /* This code is to give the team a default name */
    if (!argTeam.name || argTeam.name === undefined || argTeam.name === '') {
        const allTeams: PokemonTeam[] = getAllTeamsLocalStorage();

        const unamedTeamsNumber: number = allTeams.filter(team => team.name.startsWith("Unamed")).length;
        argTeam.name = `Unamed${unamedTeamsNumber + 1}`;
    }

    /* teams are stored on localStorage using a key between 0 and 14 */
    for (let i: number = 0; i < 15; i++) {
        if (localStorage.getItem(i.toString()) === null) {
            argTeam.id = i;
            localStorage.setItem(i.toString(), JSON.stringify(argTeam));
            return JSON.parse(localStorage.getItem(argTeam.id.toString())!) as PokemonTeam;
        };
    }

    throw new Error("Already stored 15 teams"); 
}

The problem is that React StrictMode is causing to run twice the effect and for whatever reason the checkIfUserHasTeams function is returning twice null, causing to create two teams on localStorage instead of one (Removing StrictMode made the code work fine)

I would like a solution that doesn´t imply removing StrictMode. I am using Zustand for global context. None of the issues I have found on StackOverflow helped me with this problem.

I would like to close the calander, if the user clicks again on the input field.
Do you know a good way to realise that?

const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
    'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
    ],
    calendars: 2,
    grid: 2,
    plugins: ['LockPlugin','RangePlugin'],
    LockPlugin: {
    minDate: new Date(),
    },
    RangePlugin: {
    tooltip: true,
    startDate: new Date(),
    endDate: new Date('2027-12-31'),
    locale: {
        one: 'day',
        other: 'days',},
    },    
});

Thank you in advance for your help!