Has anyone used material-ui with browsersync? - material-ui

Has anyone used material-ui with browsersync?
I have recently started using https://github.com/kriasoft/react-static-boilerplate to start react projects. This uses react-mdl (React Material Design Light) and BrowserSync out of the box.
I tried switching to material-ui but I don't think that browsersync is successfully communicating the touchTapevent across browser instances.
As far as I can tell, this is expected behavior, but I am curious if there are any workarounds.
https://github.com/BrowserSync/browser-sync/issues/22

Related

How to disable Autocomplete in WebStorm for a specific module

I'm currently working on a web page for my project. I use Angular and WebStorm for it and already installed Bootstrap and Bootstrap Icons. However since I installed Bootstrap Icons, I get the autocompletion for those first. If I type something that isn't part of the autocomplete of BI Icons it changes to the normal Bootstrap autocomplete.
As you can think, this is really annoying, since I rarely even use the BI-Autocomplete. I wouldn't mind turning it off for BI completely! I just need the Bootstrap autocomplete, so I can type keywords like flex and see what options are available. This is made really hard, since I have to type out the word completely and sometimes it still just gives me BI suggestions. So how do I change the priority order or turn it off completely for BI?
I tried turning it off in the IDE Settings. However I can only turn off autocomplete all together.

MUI and Adobe XD integration

I would like to implement the flow of work like that:
Designers manage the styles and the way our components look via Adobe XD
Then it gets exported to some repository as React components library with our styles exported from Adobe on top of the MUI
We use this library in our developemnt
Every time the design is updated we just update the library
We build a budle and it runs in production
Do you know if there's a service or a plugin that enables this flow?
I addressed MUI support to know if this plugin makes it work but got no feedback yet.

Fiori theme launchpad and controls are not working properly. Even the radio button in applications look different

Above images or fiori launchpad or controls are working properly for all other users except for one. As you can see, highlighted red one is the icon and in the 2nd image radio buttons are looking different. Not able to understand, if any role or authorization is missing.
UI Theme designer with version lower than 1.63 has some issues with fonts while generating themes for SapUI5/OpenUI5 version above 1.8x: check if in your Developer Tools console there are errors regarding .woff2 files.
It is a known problem as stated in this post : the UI Theme Designer Team implemented a specific fix for this starting from version 1.63.

Are there apps built on top of VSCode open source base?

VSCode has a very customizable UI with Activity Bar, Sidebar, Tabs, Status Bar etc (https://code.visualstudio.com/docs/getstarted/userinterface); customizable via extensions and seems to have been developed without any of the common web frameworks (https://github.com/microsoft/vscode/issues/99845).
It is well maintained, works in different OSes and has automatic updates.
Even if we remove the code-editor part, there is a lot of work in that.
This makes me wonder if it is possible to write a totally different app (not a code editor) on top of VSCode. For example a Slack-like messaging app, an Obsidian-like knowledge base app, etc.
Is it possible? Are there apps built on top of this code? Have I missed an important point that makes this idea unviable?
EDIT:
Some have pointed a very valid point. Some of what I mentioned here as VSCode features are really Electron features that VSCode inherits. Having developed an Electron app (5yrs ago) I see many things in VSCode that are not in Electron (but maybe my concept of Electron is wrong).
I want to emphasize that VSCode UI (bars, tabs, etc) + its extensibility seems to be a valid development framework. And I am ignorant of anything in this sense.
EDIT (jan/2023):
I guess we can add StackBlitz as a product that just did that.
I think your question is very valid and I was wondering the same thing, so thanks for asking it.
One thing that VS Code gives you that Electron doesn't is a distribution model - the marketplace and how new versions of your app can be detected and downloaded automatically etc. This is a big deal.
I think the disadvantages are that a very fancy UX may not be possible directly - but you have to "work around" by putting HTML within a Web View perhaps. This is just my guess and I haven't directly tried it.
To answer your question - the only one I am aware of is Thunder Client - so think of Postman - but as a VS Code plugin.
See also https://stackoverflow.com/a/67069697/314780 , which points to Eclipse Theia which uses parts from Visual Studio Code (i.e "Code - OSS") - https://theia-ide.org/ . The site links to a number of IDE-style apps built on top of it.
VS Code is an electron app. You might want to research what electron is – because you mention it: The Slack app is built on that same framework.
So, you've just invented something that already is done, very widely, in practice.

ReactJS using JSX or Babel

I am new for ReactJS. Should I go with JSXTransformer or Babel for writing ReactJS code?
I understand that ReactJS implementation is not depend on JSXTransformer / babel. We can use ReactJS without these two too, but still I want about this with respect to ReactJS.
This is opinion based so should probably be closed.
Pretty sure the React team have deprecated the use of the JSX Transformer (outside of in-browser development usage) in favour of Babel. Babel now supports everything that React needs (and more) in a convenient and standard way and should be considered the preferred method of JSX transformation.
More information on React tooling can helpfully be found at their tooling page.
Matt Styles is right, it's beeing deprecated:
from here
JSXTransformer is another tool we built specifically for consuming JSX
in the browser. It was always intended as a quick way to prototype
code before setting up a build process. It would look for
tags with type="text/jsx" and then transform and run. This ran the
same code that react-tools ran on the server. Babel ships with a
nearly identical tool, which has already been integrated into JS Bin.
We'll be deprecating JSXTransformer, however the current version will
still be available from various CDNs and Bower.
However it is great to learn the basic of react, focusing on component methods, passing props, etc.. with a easy integration.
But i believe you won't be able to require any node modules, wich will block you soon or later.
To learn React and the node environnement, I suggest you to make a few tutorials, and to test and read the code of simple boilerplates project like these:
react-hot-boilerplate
react-transform-boilerplate