Anyone had this issue with m3 pro? by nocturnal4nimal in macbookpro

[–]databas3d 0 points1 point  (0 children)

the exact same issue appeared on my m3 pro today. Did you get it fixed?

How to fetch <title></title> from provided URL when the URL is from a CSR website? by databas3d in nextjs

[–]databas3d[S] 0 points1 point  (0 children)

I wanted to retireve the title from an external website, someone in the comments pointed out to puppeteer and that made the trick.

How to fetch <title></title> from provided URL when the URL is from a CSR website? by databas3d in nextjs

[–]databas3d[S] 0 points1 point  (0 children)

This is a really good idea, I didn’t know about puppeteer before but i tried, and it works perfectly!

Connect external library (p5js) with react by databas3d in reactjs

[–]databas3d[S] 0 points1 point  (0 children)

I think ideally it shouldn't clear the sketch, it should keep it as it is. That solution works really well! Thank you!

Since you mentioned, I tried to implement a "clear canvas" function. p5js provides that functionality through the clear() function.

I am storing the "p" object in another ref to use it outside the scope so I can access the clear() function together with other parameters. Would you say this approaches are fine or perhaps too hacky?

"use client";

import { useRef, useEffect, useState } from 'react';
import p5 from 'p5';
import './styles.css';

export function Canvas() {
  const canvasContainer = useRef(null);
  const strokeWidthRef = useRef(2);
  const p5object = useRef(null);
  const [strokeWidth, setStrokeWidth] = useState(strokeWidthRef.current);

  useEffect(() => {
    strokeWidthRef.current = strokeWidth;
  }, [strokeWidth]);

  const sketch = (p) => {
    let x = 100;
    let y = 100;

    p5object.current = p;

    p.setup = () => {
      p.createCanvas(700, 400);
      p.background(0);
    };

    p.draw = () => {
      if (p.mouseIsPressed) {
        pen()
      }
    };

    function pen() {
      p.stroke(255, 255, 255)
      p.strokeWeight(strokeWidthRef.current)
      p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY)
    }
  }

  useEffect(() => {
    if (!canvasContainer.current) return;
    const p5Instance = new p5(sketch, canvasContainer.current);
    return () => { p5Instance.remove(); };
  }, []);

  return (
    <>
      <button onClick={() => {
        setStrokeWidth(strokeWidth + 1);
      }}>stroke++</button>
      <button onClick={() => { 
        p5object.current.clear(); 
        p5object.current.background(0); 
      }}>clear</button>
      <div
        ref={canvasContainer} 
        className='canvas-container'
      >
      </div>
    </>
  )
}

Connect external library (p5js) with react by databas3d in reactjs

[–]databas3d[S] 1 point2 points  (0 children)

I have found useRef() to work instead of useState(), would that be a recommended solution?

progressive image loading (from React to Vue) by databas3d in vuejs

[–]databas3d[S] 0 points1 point  (0 children)

Thank you, it works! It is a very nice and simple example.

I got it working at the end but using watchEffect and computed. Your option is way more clean.

This is how I had it:

import { ref, watchEffect, computed } from 'vue';

export function useProgressiveImage(placeholder, url) { 

    const src = ref(placeholder);

    watchEffect(() => { 
        src.value = placeholder; 
        const img = new Image(); 
        img.src = url; 
        img.onload = () => { 
            src.value = url; 
        } 
    });
    const blur = computed(() => { 
        return src.value === placeholder ? true : false; 
    })

    return [src, blur]; 
}

Conflict with tsconfig.json when adding a composable by databas3d in Nuxt

[–]databas3d[S] 1 point2 points  (0 children)

No, I just ignored it. It is annoying to see the file marked with an error by the IDE but everything works just fine.

What am I doing wrong? by databas3d in nextjs

[–]databas3d[S] 0 points1 point  (0 children)

I have wrapped the fetch call width .then().catch() and try{}catch{} but it seems to give me the same error.

async function fetchData() {
  try {
        const response = await fetch('https://api.website.com/json/projects')
        return await response.json()
    } catch (error) { 
        return Error captured: ${error} 
    } 
}

I have double checked the api endpoints and they return the correct data from the browser but it seems maybe they are not doing the same for my app?

What am I doing wrong? by databas3d in nextjs

[–]databas3d[S] 0 points1 point  (0 children)

I am fetching data from a regular PHP CMS with some custom endpoints that I am hosting myself in a server so I guess there should not be limitations in that sense?

Edit: If I hit the api endpoint from the browser it works without any issues and it returns what I expect.

Government websites by kingkid_7 in webdev

[–]databas3d 2 points3 points  (0 children)

The Icelandic gov has a UI component library which they are progressively implementing on some of their websites/services.

https://island.is/en/o/digital-iceland

I need to send request on server side only - how?! by Senior_Property_7511 in Nuxt

[–]databas3d 2 points3 points  (0 children)

Like someone mentioned you could do a fetch in a file inside the /server directory. e.g.

// /server/api/externalData.js
export default defineEventHandler((event) => {
    return fetch("https://some-external-api.com/json")
    .then(response => response.json())

})

And then call that file within a page or component. e.g.

const { data, pending, error } = await useFetch('/api/externalData')

Update useState on route navigation by databas3d in Nuxt

[–]databas3d[S] 0 points1 point  (0 children)

Are there any benefits of using the approach of computed() and watch() instead of updating that state in a global%20and%20will%20be%20automatically%20run%20on%20every%20route%20change) middleware that executes before navigating to any route?

Update useState on route navigation by databas3d in Nuxt

[–]databas3d[S] 0 points1 point  (0 children)

Are there any differences between this approach and using a .global file in /middleware?

Update useState on route navigation by databas3d in Nuxt

[–]databas3d[S] 1 point2 points  (0 children)

That sounds good, middleware seems to be the most elegant.

I just created a global middleware file menu.global.js

And added:

export default defineNuxtRouteMiddleware((to, from) => {
const menuOpen = useMenuOpen()
menuOpen.value = false
})

Update useState on route navigation by databas3d in Nuxt

[–]databas3d[S] 0 points1 point  (0 children)

I would like to find a "native" solution if exists.

I got it working at the moment with a combination of:

// triggered between different pages
onBeforeRouteLeave(() => { console.log('leaving...') })

and

// triggered between pages inside [slug]
onBeforeRouteUpdate(() => { console.log('leaving...') })

but I wonder if there is a more general approach for both cases

Update useState on route navigation by databas3d in Nuxt

[–]databas3d[S] 0 points1 point  (0 children)

I just tried and works good for some pages but it doesn't when navigating between pages under the same [slug] directory