Blancer.com Tutorials and projects

Looking to the code below

 @Component({
  .....
})
export class AngularComponent {
     componentVariable: bool;
 
     someMethod(){
        this.service.subscribe(x => this.componentVariable = x)
     }
}

Why this can access AngularComponent and set the componentVariable while being on the subscribe? Should this refer to the subscription context and not the component context?

Ps. I know this can be a bad practice but I want to understand how this is working.

I can´t see the childs I pass to ResponsiveGridLayout tag, this library is so outdated I dont know what else to do.
I have this a few .jsx I´ll show you two of them:

import { useEffect, useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "./PrototypeComponent.css";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

const ResponsiveGridLayout = WidthProvider(Responsive);
const LOCAL_STORAGE_KEY = "my_layouts";
const BREAKPOINT_KEY = "my_breakpoint";

const defaultLayouts = {
  lg: [
    { i: "1", x: 0, y: 0, w: 4, h: 4 },
    { i: "2", x: 4, y: 0, w: 4, h: 4 },
    { i: "3", x: 8, y: 0, w: 4, h: 4 },
  ],
  md: [],
  sm: [],
};

function PrototypeComponent({ children }) {
  const [layouts, setLayouts] = useState(defaultLayouts);
  const [currentBreakpoint, setCurrentBreakpoint] = useState("lg");

  useEffect(() => {
    const savedLayouts = localStorage.getItem(LOCAL_STORAGE_KEY);
    const savedBreakpoint = localStorage.getItem(BREAKPOINT_KEY);
    if (savedLayouts) {
      try {
        const parsedLayouts = JSON.parse(savedLayouts);
        setLayouts(parsedLayouts);
      } catch (e) {
        console.error("Error al leer layouts desde localStorage", e);
      }
    }
    if (savedBreakpoint) {
      setCurrentBreakpoint(savedBreakpoint);
    }
  }, []);

  const handleBreakpointChange = (breakpoint) => {
    setLayouts((prevLayouts) => {
      if (!prevLayouts[breakpoint] || prevLayouts[breakpoint].length === 0) {
        return {
          ...prevLayouts,
          [breakpoint]: prevLayouts[currentBreakpoint] || [],
        };
      }
      return prevLayouts;
    });
    setCurrentBreakpoint(breakpoint);
    localStorage.setItem(BREAKPOINT_KEY, breakpoint);
  };

  const handleLayoutChange = (layout, allLayouts) => {
    setLayouts(allLayouts);
  };

  useEffect(() => {
    const handleBeforeUnload = () => {
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(layouts));
      localStorage.setItem(BREAKPOINT_KEY, currentBreakpoint);
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [layouts, currentBreakpoint]);

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={layouts}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      rowHeight={100}
      isDraggable
      isResizable
      draggableHandle=".handle"
      compactType="horizontal"
      preventCollision={false}
      margin={[10, 10]}
      containerPadding={[10, 10]}
      onBreakpointChange={handleBreakpointChange}
      onLayoutChange={handleLayoutChange}
    >
      {children}
    </ResponsiveGridLayout>
  );
}

export default PrototypeComponent;

Second one:

import PrototypeComponent from "./PrototypeComponent";
import Portlet from "./Portlet";

const PrototypePage = () => {
  return (
    <>
      <PrototypeComponent>
        <h1>Hola</h1>
        <Portlet id="1" title="Portlet 1" src="https://www.example.com" />
        <Portlet id="2" title="Portlet 2" src="https://www.example.com" />
        <Portlet id="3" title="Portlet 3" src="https://www.example.com" />
      </PrototypeComponent>
    </>
  );
};

export default PrototypePage;

This is what i see in the browser 1

It looks like there is nothing inside
I can´t see the childs I pass to ResponsiveGridLayout tag, this library is so outdated I dont know what else to do.I can´t see the childs I pass to ResponsiveGridLayout tag, this library is so outdated I dont know what else to do.

Demo Repo : https://github.com/ks-mani/gsap-doubt

Issue’s Video : https://github.com/ks-mani/gsap-doubt/blob/main/gsap-issue.mov

I have two component.

1. First component has GSAP specific code wrapped in useEffect with a dependency.
2. Second component has GSAP specific code wrapped in useEffect without a dependency.

The issue is that rerendering in the first component disturbs the pin position of the second component.

My guess is that rerendering the second component also will make the pin positioing of second component align perfectly. But is this right approach for this? Shouldn’t GSAP handle this scenario automatically ?

P.S. I can’t use useGSAP hook in my project.

I have a web app with embedded Vimeo videos. These videos are in stereo, with sound panned to the left (60-40%) and some to the right (40-60%). Several users have speakers where one side is broken and they only hear the right or the left, therefore the video often sounds like there’s a drop in the sound volume.

I would like some Javascript from the Vimeo SDK that lets these users hear the video in mono, while the others can hear it in stereo. Does that exist?

I can’t configure additional spacing values for the tailwind 4 preset

import { defineConfig } from "unocss";
import { presetAttributify } from "@unocss/preset-attributify";
import presetWind from "@unocss/preset-wind4";

export default defineConfig({
  presets: [ presetWind()],
  theme: {
    colors: {
      veryCool: "#0ff",
    },
    spacing: {
      md: "24rem",
    },
  },
});

Usage example <div class="text-very-cool p-md">12312</div>
Paddings are expected to be 24rem

C @unocss/preset-wind3 works fine, how to configure for @unocss/preset-wind4?

Failed to load resource: the server responded with a status of 500 (Internal Server Error).status of 500 (Internal Server Error)

not able to redirect to webmethod called in aspx page

on button click redirect webmenthod

I want call the web method on perticular button click
not able to redirect to webmethod called in aspx page

on button click redirect webmenthod

I want call the web method on perticular button click

not able to redirect to webmethod called in aspx page

on button click redirect webmenthod

I want call the web method on perticular button click

I’m developing expo react native app and have a probelem with location.

Code:
const {coords} = Location.getCurrentPositionAsync({})

Result:
coords is undefined.

Every time I refresh app the geolocation icon in status bar appears.

Permission is granted. App.json is configured for ios and android.

I tried ios emulator iphone 16 pro, my own 14 pro and Sony on android. For all of them I have the same result as described above. I console.log() objects and other variables.

Where could I search the source of the problem? Could it be app.json or another file?

What should I do to overcome this issue?

This issue blocks me a lot!

Thanks in advance for your responses.

I tried many variants of configuration of app.json.

I am new to web development and have done training for MERN full stack, but I found it quite difficult to deploy especially for small business which dont afford high web hosting costs for MERN. What should be choice of tools in this scenario that reduces deployment cost as well as development time; pure JS/JSP, or JS with 3rd party libraries such as datatables or anyother combination?
Thanks

I am trying to implement a simple shopping website from a ready made HTML template.
I moved all the files to respective folders in rails and trying make it work but tough luck.I have both css and scss files in the template project which is causing more confusion.

template project’s asset folder has these assets

enter image description here

I followed following steps in the migration

1. moved all files to respective folders
2. moved scss files to stylesheets folder and renamed application.css to application.scss and imported all css files in that file
3. registered all assets to assets.rb under Rails.application.config.assets.precompile += %w(….) and ran assets:precompile which is creating stamped files for cashing.
4. in application.html.erb change all script and style tags to rails 7 relevant tags <%= stylesheet_link_tag %> <%= javascript_importmap_tags%>

rails folders rails folders..

My assets are not making any changes on the front end and also js not working as expected.

I am seeing ActionController::RoutingError (No route matches [GET] “/fonts/fontAwesome/fa-solid-900.woff2”) for every asset I mentioned in the application.html.erb

I request a clear understanding on asset pipeline in rails and rails 7 and steps I need to follow during migration of html template to rails project.

I have a number of sliding menus that are offscreen or behind other elements and slide into view using transform: translateY. They’ve been working for about two years without issue. Today, I added keydown events to the menus which requires that the otherwise unfocusable divisions be focused. This was done using the tabindex attribute and setting it to -1 and using focus() and blur() and mouseenter and mouseleave. This works also.

The issue that occurs, now, but not at every event is that after the menu has been given focus upon mouseenter, a keydown event is performed, and the menu loses focus upon mouseleave, when the menu is closed, instead of the menu sliding away (down, off-screen for example) it starts moving down and then, suddenly, the rest of the UI moves up instead and the menu that should be hidden is visible, just as if the translateY was applied to the rest of the UI.

The menus are in a division that is positioned absolute to its container element that has overflow-y and -x set to hidden. This does not stop the scrolling but only changes what part of the UI is hidden.

As long as the menu does not receive the focus, the open/close button can be clicked repeatedly without issue and the menus slide on and off screen as expected.

If the optionable property of {preventScroll: true} is used in the focus() method when giving the focus to the menus, all seems to work fine; that is, I haven’t been able to cause the issue when it is used. But I’m not sure how reliable preventScroll is.

My question is, Is there a better way to handle this? I tried to use blur() when the menu is closed (even though the mouseleave event already invoked blur()) but that does not help. It seems that blur() does not remove the focus for the purpose of scrolling and rather than trying to cause the menu to lose focus, the focus should be given to another element. I also tried removing the tabindex attribute upon close and that did not help either.

Thank you.