We Keep Coding

How to fix component position start on bottom then move to normal in react js when the page is refreshed

I have a component that has a sidebar and content as shown below.
When the page is refreshed, the first time the component content is loaded below as shown below and in an instant, the components are back to normal.
I use module.css in every component. With a structure like this:
component
|___Sidebar
| |___index.tsx
| |___index.module.css
|___Content
|___index.tsx
|___index.module.css
Can anyone explain what happened? Is this happening because I'm using css folder structure like that which causes styles to be late to read?
How do you think this problem can be solved?

One of the option is to load the CSS files in the index.js or app.js file which is the top most component in your app. Then you can use the dom event to add the component like below. Currently it is difficult to reproduce the issue since you haven't shared any code. But I would suggest worth giving this a try. Make sure you add the CSS files in index.js file
document.addEventListener("DOMContentLoaded", function(event) {
ReactDOM.render(
<App />,
document.getElementById('root')
);
});

React.JS plugin for Wordpress embedded widget and a full-screen container

I am building a React.JS plugin for Wordpress.
I was able to build the wrapper that combined Wordpress with React.JS and embed my widget using a shortcode.
Currently, the app code is like the below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
const targets = document.querySelectorAll('.smw-root');
Array.prototype.forEach.call(targets, target => {
const id = target.dataset.id;
const settings = window.smwSettings && window.smwSettings[id];
ReactDOM.render(<App settings={settings} />, target);
});
reportWebVitals();
The <App /> piece above is a product list. It shows up fine. I had to add "homepage": "/wp-content/plugins/my-plugin/widget/build", to package.json and it worked fine.
In addition to the list, my plugin also has to render a full-screen container with product details, displayed when one of the entries in the above list is clicked.
I would like this "item details" route to be formatted as /item/:id. If possible, I would also like website administrators to control the look of this "item details" container to the extend that webmasters would select styles, background, header, and footer, etc. I would best prefer then have product details be embedded with something similar to shortcodes per attribute, e.g. [smw-attribute type="image"] and [smw-attribute type="description"] or [smw-attribute type="manufacturer"].
If embedding individual "properties" is difficult, I would go with just a full-screen container.
Currently, I have the wrapper and enqueue and shortcode php pieces. Enqueue part adds the necessary styles and scripts to the HTML page, while shortcode returns an empty div for the right class and a unique id, so multiple widgets could be embedded into the same page, if necessary.
How do I add the product details route to Wordpress and my React.JS plugin, so the details page is rendered whenever a visitor clicked on the product link from the list, and/or accessed it using a direct link?

How to reinitialize jQuery plugins with ES6 JS after ajax page load

I recently built a website that uses a router system to load each page via ajax. The site is compiled using webpack and is structured as ES6 JavaScript modules. I am using some third-party jQuery plugins that only work if you refresh the page.
My question is how do I reinitialize or load third-party jQuery plugins and/or scripts using ES6 JS after an ajax page load?
For example, I am using the Elevate Zoom plugin to add an image zoom on images. When I navigate to another page on the site that uses this, the zoom breaks and only works again when re-loading the page.
$("#img_01").elevateZoom();
Something like the below?
import { component } from 'picoapp';
// import elevate zoom
// import jQuery
export default component(() => {
// reinitialize plugin here?
//$("#img_01").elevateZoom();
})

Yeah, so it seems to have worked. Dah. I guess I didn't think it would using jQuery inside ES6 so thanks for the gentle nudging!
I should've said I'm very new to ES6 and the world of Webpack.
import { component } from 'picoapp';
import $ from "jquery";
import zoom from '../lib/elevatezoom.js'
export default component(() => {
$(".zoom").elevateZoom({
zoomType: "inner",
cursor: "zoom-in"
});
})

Add p5js to Ember application

I'm trying to incorporate the p5js javascript library into my Ember.js app. I want the following p5js example to appear on the template:
https://p5js.org/examples/sound-record-save-audio.html
I've included the cdn script in my index.html file:
I dont know how/where in the Ember run loop to put the javascript so it runs and loads when the page loads

I would suggest making a component, putting the component in whatever template you're rendering (could be application.hbs if you only have one page) and putting the Javascript into the component's didInsertElement method.
Along with that, I would place the p5 canvas inside your component's own Element, so that the component behaves normally (it's weird for a component to render things outside its own Element, and you'd want them to be cleaned up properly if you navigate away to some other template). The p5 docs say how to position the canvas.
In your component it would look like:
export default Component.extend({
didInsertElement() {
createCanvas(400,400);
canvas.parent(this.element);
background(200);
fill(0);
text('Enable mic and click the mouse to begin recording', 20, 20);
...etc...
}
})
```

This answer applies for Ember app versions 1.13 onward and was written as of 3.x. Versions of Ember < 3.x will need to use the older import syntax in the component boilerplate.
The most common place for code that should run after a page loads is the didInsertElement hook:
import Component from '#ember/component';
export default Component.extend({
didInsertElement() {
this._super(...arguments);
console.log(p5) // this should print a function to the console
}
});
Also check out didRender, which might be a better fit for your use case.
You can read more about the uses of different component lifecycle hooks in The Guides

why angular-material css file didn't load until you refresh page?

I am using angular 1.6 with Webpack, I have a angular-material.css as stylesheet, and also I have edit-app.html should use this angular-material.css.
If I go from my homepage -> edit-app.html, the angular-material.css didn't get loaded, until I hit the refresh page button on my browser.
So I am researching how did the webpack load the css files, I do check that in the webpack.config.js, however, mine is different:
import makeWebpackConfig from 'angular-portal-dependencies/src/webpack/make-webpack-config.js';
export default makeWebpackConfig(__dirname, {});
How to solve this issue, let the angular-material.css file loaded, when the project init, or manually add that css file to the edit-app.html page.