Blancer.com Tutorials and projects

I’m trying to create a web page for a proof of concept that compares mock data of two personas. I need to know the name of the view/component type to find a library for this PoC.

Something like this:

           John Doe   Jane Doe

Skill name   ++++++ | ++
Skill name       ++ | +++++
Skill name      +++ | +
Skill name       ++ | +++++++
Skill name ++++++++ | +++
Skill name       ++ | +++++
Skill name       ++ | +++++
Skill name       ++ | +++++

Can someone help? Thanks.

I’m trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I’m trying to figure out what the correct coding of this has to be.

Here is the app …

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

When I run this react-native app, I get the following error:

Render Error

Objects are not valid as a React child (found: object with keys
{color}). If you meant to render a collection of children, use an
array instead.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I’m wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: ‘#FFFFFF’}}>, from the “Text” attribute of the “TouchableOpacity” object, then the app runs properly. So what must I do in order to change this text color?

EDIT: removed some small typos in the copied-and-pasted code.

I am trying to make a deck builder where the user can click on a card and it adds the matching Card-frame to a deck list on the side in another container. Is this approach I have below the right direction and a good start, or should I look at a different solution? Right now When I click add, it only will add one of the card frames. Eventually I want to keep track of what cards are in the list and the quantity. I also want to incorporate GSAP to animate the Card-Frame moving to the list container.

<body>
<div class="container">
    <div class="card-image"> <img src="Aeito_Kathari_Prime.jpg" alt=""> <button    onclick="addItem()">ADD!</button></div>
    <div class="card-image"> <img src="Scipius_Kathari_Prime.jpg" alt=""> <button onclick="addItem()">ADD!</button></div>
    <div class="card-frame"> 
        <div class="card" id="box">
            <div class="card-body">
                <h5 class="card-title" id="Cat1"></h5>
                <img src="Aeito_Kathari_Prime-frame.png" alt="">
            </div>
        </div>
        
        <div class="card" id="box">
            <div class="card-body">
                <h5 class="card-title" id="Cat1"></h5>
                <img src="Scipius_Kathari_Prime-frame.png" alt="">
            </div>
        </div>
    </div>
    </div>




    <script>
    function addItem() {   
    const node = document.querySelector(".card-body");
    const clone = node.cloneNode(true);
    document.getElementById("box").appendChild(clone);
    }
</script>
</body>


.container {
display: grid;
grid-template-columns: 250px 250px 300px;
grid-column-gap: 10px;
grid-row-gap: 10px;

}

.card-image {
background-color: rgb(223, 223, 223);
padding: 10px;
border: 2px solid #b60606;
}

.card-frame {
background-color: rgb(204, 204, 204);
padding: 20px;
border: 2px solid #000000;
object-fit: cover;
}

.card-image img {
background-color: #b60606;
padding: 10px;
border: 2px solid #ddd;
height: 300px;
}

.card-frame img{
height: 50px;
padding: 0px 0px 20px 0px;
}

.card-body img {
height: 50px;
padding: 0px 0px 10px 0px;
}

In an array of objects I am trying to add year of death to a person without it by using the reduce method.
For example the result should be:

{
name: "Carly",
yearOfBirth: 2018,
},

{
name: 'Carly',
yearOfBirth: 2018,
yearOfDeath: 2025
}

I am new at coding and want to know why using the variable instead of ‘person.yearOfDeath’ would cause the code to not function properly?

accum.push(passed = currentYear)

accum.push(person.yearOfDeath = currentYear)

const people = [
      {
        name: "Carly",
        yearOfBirth: 2018,
      },
      {
        name: "Ray",
        yearOfBirth: 1962,
        yearOfDeath: 2011,
      },
      {
        name: "Jane",
        yearOfBirth: 1912,
        yearOfDeath: 1941,
      },
    ]
    
    const newArray = people.reduce((accum, person) => {
      accum = []
        accum.push(person)
      
      let passed = person.yearOfDeath
      const currentYear = new Date().getFullYear();
      if (!passed) {
        accum.push(passed = currentYear)

console.log(accum)
      }
}, {})

const people = [
      {
        name: "Carly",
        yearOfBirth: 2018,
      },
      {
        name: "Ray",
        yearOfBirth: 1962,
        yearOfDeath: 2011,
      },
      {
        name: "Jane",
        yearOfBirth: 1912,
        yearOfDeath: 1941,
      },
    ]
    
    const newArray = people.reduce((accum, person) => {
      accum = []
        accum.push(person)
      
      const passed = person.yearOfDeath
      const currentYear = new Date().getFullYear();
      if (!passed) {
        accum.push(person.yearOfDeath = currentYear)

console.log(accum)
      }
}, {})

I have an image upload feature where users can :

1. Select multiple images
2. Choose one as the main image, which moves to the first position
3. Reorder images before submission

However, I noticed that the display order updates correctly, the <input type="file" multiple/> still submitting the images in their original order(order their were selected).

How can I update the file input so that the images are submitted in the same order they are displayed or ordered?

I know the FileList is read-only, but is there a way to reorder the files before form submission?

I recently upgraded my device from a MacBook Pro 2019 (Intel i7) to a MacBook Air M2. Previously, when I was using the MacBook Pro 2019, my project was running perfectly without any issues. However, after switching to the MacBook Air M2 and trying to run the project, I encountered this issue.

I have been struggling with this for almost a week now and still haven’t been able to resolve it. I have already tried multiple solutions, including:

Deleting node_modules, yarn.lock, and package-lock.json
Removing android/build and ios/Pods
Running yarn install or npm install again
Cleaning the project with ./gradlew clean (for Android) and pod install –repo-update (for iOS)
Despite trying all these steps, the issue persists. I suspect it might be related to the Apple Silicon (M2) architecture, but I’m not sure how to fix it.

Could someone please help me? I would really appreciate any guidance on resolving this.

Thanks in advance!

I’m using React Router v6 in my React app, and I have a Category page that works fine when navigating within the app. However, when I refresh the page or paste the URL into a new tab, I get the following error:

TypeError: Cannot read properties of undefined (reading ‘id’)
at Product (http://localhost:3000/static/js/bundle.js:6946:59)
This happens because the currentCategory is undefined before it is loaded, so when React tries to map over currentCategory.products, it throws an error.

This is my Category component:

export const Category = () => {
    const { id } = useParams<{ id: string }>();
    const location = useLocation();
    const { currentCategory, setCurrentCategory, fetchCategoryById, loading } = useCategoriesContext();

  const hasFetched = useRef(false);

        useEffect(() => {
        if (location.state?.category) {
            setCurrentCategory(location.state.category);
        } else if (id && !hasFetched.current) {
            hasFetched.current = true;
            console.log(typeof Number(id), 'typeof id')
           fetchCategoryById(Number(id));
      
        }
    }, [id, setCurrentCategory, fetchCategoryById, location.state]);

    if (loading) return <p>Loading...</p>;

    if (!currentCategory) {
        return <p>404 Error, Category Not Found</p>;
    }

    return (
        <div>
            <h1>{currentCategory.name}</h1>
            <ul>
                {currentCategory.products.map((product) => (
                    <li key={product.id}>{product.name}</li>
                ))}
            </ul>
        </div>
    );
};

Question
How can I ensure that the currentCategory is fetched properly when the user refreshes the page or pastes the URL into a new tab, so the page does not crash?

Expected Behavior

The category page should load correctly whether I navigate to it within the app or refresh the page.
If the category is not found, a “404 Error” message should be displayed instead of crashing.

Actual Behavior

Navigating within the app works fine.
Refreshing the page or pasting the URL causes an error because currentCategory is undefined before the API fetch completes.

What I’ve Tried
Checking if currentCategory exists before rendering.
Ensuring fetchCategoryById(id) runs when location.state.category is not available.
Wrapping currentCategory.products.map() in a conditional to prevent mapping over undefined.
I have checked the id from the useParams and its working correctly.
I have another component doing the exact same and this works fine.

I am using a USB scanner to scan drivers licenses into a webform. However when doing so, it hits keyboard commands with different “keystrokes” and usually opens up the downloads window with the rest of the scan in the search bar. I have tried to put it into a text area and still no luck.

Is there a way to slow down the scan in javascript? or atleast scan the raw data without doing any parsing through the scanner configurations?

I just would like to get the raw format so I can interpret if the barcode was in an unknown format. For example Mexico’s Drivers licenses do not have to follow AAMVA format and recognizing which fields/lines are dedicated to which properties would all have to be manual input.

I’m open to modifying properties of the scan (prefixes, suffixes, etc.) If you need anymore information let me know!

I am trying to import and use sharp in my Quasar Electron project.
I have tried uninstalling and reinstalling sharp many times.

When running app as dev using quasar dev -m electron, it opens and runs fine. Running quasar build -m electron, also packages fine with no errors. However, upon opening the packaged app I’m returned with the A JavaScript error occurred in the main process error.

Uncaught Exception:
Error: Cannot find package '/Users/USERNAME/GitHub/quasar-electron-template/
dist/electron/Packaged/quasar electron template-darwin-x64/quasar electron template.app/Contents/Resources/app.asar/node_modules/sharp/lib/index.js'
imported from /Users/USERNAME/GitHub/quasar-electron-template/dist/electron/
Packaged/quasar electron template-darwin-x64/quasar electron template.app/Contents/Resources/app.asar/electron-main.js
Did you mean to import "sharp/lib/index.js"?

Please see image below for full error.

A JavaScript error occurred in the main process error message

For reference, sharp is imported into src-electron/electron-main.js using:
import sharp from "sharp";

I have also tried const sharp = require('sharp');, that also returns an error message stating Dynamic require of "sharp" is not supported.

Every other dependency I have installed works except for sharp.

In below code when I tried to run/load script on Lightning web component (LWC) with Lightning Web Security (LWS) enable which throw the error on the screen “This page has an error. You might just need to refresh it. [NoErrorObjectAvailable] Script error.”
after evaluating on LWS console (salesforce) it gave me the warning like :
“The script.src setter is distorted by Lightning Web Security (salesforce)”

(function(){
    // Create a queue, but don't obliterate an existing one!
    var analytics = window.analytics = window.analytics || [];
    // If the real analytics.js is already on the page return.
    if (analytics.initialize) return;
    // If the snippet was invoked already show an error.
    if (analytics.invoked) {
      if (window.console && console.error) {
        console.error('Segment snippet included twice.');
      }
      return;
    }
    // Invoked flag, to make sure the snippet
    // is never invoked twice.
    analytics.invoked = true;
    // A list of the methods in Analytics.js to stub.
    analytics.methods = [
      'trackSubmit',
      'trackClick',
      'trackLink',
      'trackForm',
      'pageview',
      'identify',
      'reset',
      'group',
      'track',
      'ready',
      'alias',
      'debug',
      'page',
      'once',
      'off',
      'on',
      'addSourceMiddleware',
      'addIntegrationMiddleware',
      'setAnonymousId',
      'addDestinationMiddleware'
    ];
    // Define a factory to create stubs. These are placeholders
    // for methods in Analytics.js so that you never have to wait
    // for it to load to actually record data. The `method` is
    // stored as the first argument, so we can replay the data.
    analytics.factory = function(method){
      return function(){
        var args = Array.prototype.slice.call(arguments);
        args.unshift(method);
        analytics.push(args);
        return analytics;
      };
    };
    // For each of our methods, generate a queueing stub.
    for (var i = 0; i < analytics.methods.length; i++) {
      var key = analytics.methods[i];
      analytics[key] = analytics.factory(key);
    }
    // Define a method to load Analytics.js from our CDN,
    // and that will be sure to only ever load it once.
    analytics.load = function(key, options){
      // Create an async script element based on your key.    
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;    
      script.src = 'https://cdn.segment.com/analytics.js/v1/'
         + key + '/analytics.min.js';
      // Insert our script next to the first script element.
      script = 
      var first = document.getElementsByTagName('script')[0];    
      first.parentNode.insertBefore(script, first);
      analytics._loadOptions = options;
    };
    analytics._writeKey = "MDcA4pxOnFcCtsEoLjMCW5C7jyFG0C97"
    // Add a version to keep track of what's in the wild.
    analytics.SNIPPET_VERSION = '4.15.2';
    // Load Analytics.js with your key, which will automatically
    // load the tools you've enabled for your account. Boosh!
    analytics.load("MDcA4pxOnFcCtsEoLjMCW5C7jyFG0C97");
    // Make the first page call to load the integrations. If
    // you'd like to manually name or tag the page, edit or
    // move this call however you'd like.
    analytics.page();
  })();

I have a form that requires a specific section to have a maximum height of 3 inches – due to physical printing purposes. In this section, I have a textarea for users to provide a response (with no maximum character limit). If the response is too long, it will push the next element/item in that div off the screen (i.e., overflow). When overflow occurs, I’d like either the entire FORM’s (preferably) or the overflowing DIV’s background to change color to visually indicate that overflow has occurred.

I can’t post the actual code but here is a sample that details what I’m trying to accomplish. Looking to change color of either <form>, <section id="middle">, and/or <div id="overflow" class="static-section">.

div {
  border: 1px solid #CCC;
  background-color: #FFF;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 8.5in;
  max-height: 7in;
}

.static-section {
  display: grid;
  overflow: hidden;
  max-height: 3in;
  width: 7.5in;

  * {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .5rem;
  }
}

textarea {
  field-sizing: content;
}

<form id="entry">
  <section id="top">
    <h1>HEADER</h1>
  </section>

  <section id="middle">
    <div id="overflow" class="static-section">
      <label>This section is locked at a max 3 inches. I want the background color to be red if the anything makes this section overflow.</label>
      <textarea placeholder="type in this section until the following paragraph starts to go off the screen. this is when I want the background color to change."></textarea>
      <p>When this information starts to go off the screen (i.e., enabling overflow - which the scrollbars are being hidden by the static-section class), I want the background color of this div to change. This will provide a visual indication that the provided response is too long.</p>
    </div>
  </section>

  <section id="footer">
    <h1>FOOTER</h1>
  </section>
</form>

Any assistance with this is greatly appreciated.

Come array with object

I need to parse this code into an icon because it’s currently displaying as an artifact. The project uses Blynk and Ant Design. The icon in the Tag component should be displayed correctly.The icon comes from the tags array of objects.

const TagList = ({ tags, onClose, closable, color }) => {  
useEffect(() => {
    console.log('TAGS ----', tags);   const tag = {
    color: "#fa541c",
    icon: "ue755",
    id: 6594,
    name: "test 4" };   }, [tags]);

  return (
    <ul className="search-item-info--tags-list">
      {tags?.map((tag) => (
        <li key={tag.id} className="search-item-info--tags-item">
          <Tag
            data-icon={tag.icon}
            color={color || tag.color}
            closable={closable}
            onClose={() => onClose(tag)}
          >
            {tag.icon ? tag.name : <span className="tag-name">{tag.name}</span>}
          </Tag>
        </li>
      ))}
    </ul>   ); };

TagList.propTypes = {   tags:
PropTypes.arrayOf(PropTypes.shape(TAG.shape)),   onClose:
PropTypes.func,   closable: PropTypes.bool,   color: PropTypes.string
};

We’re running test html pages in next.js and have the following next.config.js set:

  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy-Report-Only',
            value: "require-trusted-types-for 'script';",
          },
        ],
      },
    ];
  },
};

That appears to be applying the CSP rules to any file in the test page, regardless of where it came from. The whole point of the test page is to test our own code to ensure we’re CSP compliant, but on some of the test pages we’re including JS files from external sites (e.g. JWPlayer, jQuery) and if they’re not CSP compliant, we want them to be ignored in terms of needing to comply with the rules – they should get a free pass.

We thought that the above config would give us that as it’s set to report only anyway, but instead we’re seeing external scripts misbehaving. They’re not able to get their job done successfully.

Is there some syntax change in that config above that will make it apply CSP only to for example:
‘example.com,scripts.example.com,other.example.com’ and anything else is unaffected.

I’m assuming the answer will be no because the config applies to ‘the test page’ and therefore any script on that page must comply.

I have in my ApplicationConfig provider

provideAppInitializer(() => {
  inject(AppConfigService)
})

In component MainPageComponent I have ngOnInit(), which geting data from backend every refresh.

 ngOnInit() {
this.loginService.getHi().subscribe({
  next: result => {
    this.text = result;
    void this._router.navigate(['mainPage'])
  },
  error: err => {
    void this._router.navigate(['login'])
    console.log("Login failed", err);
  },
  complete: () => {
    console.log('Login process completed ' + localStorage.getItem("token"));
  }
})

problem is Global app initialization is after ngOnInit() is called, how to avoid it?

AppConfigService

export class AppConfigService {
  private appConfig!: AppConfig;

  constructor(private readonly http: HttpClient) {
    void this.loadAppConfig();
  }

   loadAppConfig(): Promise<any> {
    return firstValueFrom(this.http.get<AppConfig>('/config/config.json').pipe(tap(data => {
      console.log('my data ' + JSON.stringify(data));
      this.appConfig = data;
    })));
  }

  getBackendBaseUrl(): string {
    return this.appConfig.environment.backendURL;
  }

needed help getting error:

this is my github:https://github.com/opcxder/medium-scrapper
it works locally fine,
when I try on apify it does not work.
can anyone help me resolve this issue.
already try the answer given my user to other user having similar issue but they platform and language is different.