I recently joined a team working on a nuxt js frontend application. Since the beginning, I could not make the project run properly in terms of styling.
Styles, classes, are correctly loaded in the html, I can clearly see them in the code inspector.
Though, it does not behave like it normally should (See picture 1). I compared nearly everything with the other developers and impossible to find a fix.
Did any of you already have such an issue ? And any idea of how to fix it ?
Thank you
Small example of the styling issue I have between 2 menus
Related
I'm working on an application that is written in TypeScript and built with Create React App (CRA). The application needs buttons for reseting various things, so people carrying out manual software testing can do their job. How can I convince CRA to leave the test functionalities out when compiling a production build? I wouldn't want to leave a "loaded gun" behind a simple if statement and a runtime configuration option that might accidentally be turned on one day.
I'm not sure if it is a good practice, but I would have place these buttons with some html tags like data-test-show and hide them (display none or something).
On the test environment I would add some css styles for that attribute to show such elements.
I have an Elm app. A while ago I realized that my app was crashing locally when I used FontAwesome icons. I came to understand that it happened because I chose SVG icons and therefore FontAwesome was modifying the DOM. That conflicted with Elm's VDOM mechanism.
This was easy to fix--I migrated to the CSS version of FontAwesome that uses pseudo elements. Recently some users complained that the app in production freezes and they showed screenshots of states that were not matching the log data I had. It took a while until I realized that all these users had Google Translate automatically translated the page for them. Google Translate clearly alters the DOM, so I'm not surprised that it made Elm crash.
How can I prevent my Elm app from crashing? Is there a way to be notified if a 3rd party changes the DOM? So that I could even notify the user that they have an extension that interferes with the app.
I had the same problem as you and solved it by migrating to the Elm-FontAwesome library. Basically all you have to do is replace this syntax:
i [ Svga.class "fas fa-check" ] []
with this one:
Icon.viewIcon Icon.check
You can have a look to the example project for more details: https://github.com/Lattyware/elm-fontawesome-example
Have a look here - How we made Elm and Google Translate work together.
Their approach is to hijack the Elm replaceData method that is called by Elm during dom updates using the function below. You would run this just before giving Elm control of the dom.
HTMLFontElement.prototype.replaceData =
function replaceData(_0, _1, string) {
this.parentNode.replaceChild(
document.createTextNode(string),
this
);
};
Apparently, "Google Translate replaces every text node in the DOM with a tag containing at least one more tag – one for each sentence". For example:
<span>Insurello. Rätt ersättning till alla</span>
is translated into
<span><font><font>Insurello. </font><font>The right compensation for everyone</font></font></span>
This method avoids attempting to edit the span and instead replace it with a new one. Once the node is added, Google Translate will translate that text.
I don't know about preventing the crashes, but I think you should be able to register changes to the DOM with the current mutation observer API.
Before that were several deprecated mutation events like DOMSubtreeModified that could also help, but well they are deprecated.
This problem is very closely linked to that of Google Maps or Google Places Autocomplete in Elm. The solution I've used in the past is to provide a childless div with an id I can point to from JavaScript.
Because the div is childless, Elm does not look under the hood to check whether it has changed internally.
Check out this blog post or google "maps in elm" for instructions on how to do this
-- EDIT --
Ive read the question better and this will probably not work for Google translate issues as it changes all text in the entire DOM. Ill leave it here incase the question brings otger people who have more regular problems caused when a 3rd party changes the DOM
I've been having a really weird issue with VS Code. After using it for an undetermined amount of time, I'm unable to collapse code and navigate to definition. The arrow indicators in the left margin for collapsing code disappear and I can't seem to get them to come back. Closing the file doesn't work, and restarting the app doesn't work either. The only thing that works is a complete system restart. The same thing happens with ctrl+clicking a class name expecting it to navigate to definition but it doesn't.
I thought at first it was probably an extension I installed so I uninstalled all my extensions, restarted the app and now the collapse icons don't show up at all. I'm working in VueJS and think it might have something to do with *.vue extensions but I'm not sure.
You need Vetur for pretty much any functionality in *.vue files, and Vue Peek for Ctrl+Clicking paths
I'm checking out DivShot for the first time, and have fallen at the first hurdle.
On launching the app, I get the page editing screen, as expected, with the Inspector, Components and Page Options tabs on the right hand side of the screen.
But on the left hand side, there is no Navigator. And I can find no reference to the Navigator anywhere on the screen (thinking it might be a collapsed area, or something).
Looking at the Intro video on the Divshot website, there do seem to be some minor differences (the lack of the Navigator notwithstanding), so I am wondering whether something has changed in the latest release...
In any case, I can see no way of add files/resources/folder structures other than new pages, because of the absence of the Navigator.
Can anyone shed any light?
Much appreciated :)
It sounds like you're using the now legacy version of Divshot. We recently launched Divshot 1.0 with file support and a completely revamped project structure.
Legacy: http://app.divshot.com
New Divshot: http://builder.divshot.com
It's on a separate instance so beta users have time to export their pages and finish anything up in the old version before upgrading. Since we moved from generic folders and pages to actual files we're offering a manual upgrade.
If you'd like to update you can just go to https://api.divshot.com/upgrade and follow the instructions there. We're pushing a notice to the old version right away to eliminate any confusion. Sorry about that!
Can anybody identify the carousel used on this site? It seems to work seamlessly with responsive sites and would with little css changes suit my design perfectly. The source shows something called anchorScroll.js but a search comes up with nothing.
It's a custom solution and not a plugin. Look for Application_NewsSpinner in http://cdn12.grohe.com/application/resources/javascript/scripts/common.js at line :1072
But don't steal code! It's fine to get inspired but you should find your own solution or take an official plugin! Take a look at http://finnrudolph.de/ImageFlow or http://www.jcoverflip.com/demo