VS Code stops letting me collapse code and navigate to definition when working in Vue.js - vue.js

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

Related

Yoast SEO meta description not saving

I generate a Focus Keyphrase and Meta Description in Yoast SEO meta box for my Home Page. But when I exit the editor, if I go back to the Home Page, the Focus Keyphrase and Meta Description have disappeared.
Does anyone know how I can keep them?
Thanks
I spent easily 5 hours trying to track down and fix an issue with Yoast meta fields not saving properly. The only real clue I had was this console error:
Uncaught TypeError: Cannot read properties of undefined (reading 'registerPlugin') at window.wpseoScriptData.window.wpseoScriptData.featuredImage.i.registerPlugin (post-edit.js)
Based on this Yoast Github issue, it appears that the needed YoastSEO javascript app is not there when it's being called in /wp-content/plugins/wordpress-seo/js/dist/post-edit.js when the page is loading, and Yoast javascript app is not actually there, so it bonks.
So there may be something somewhere that is dequeuing the needed javascript that builds the YoastSEO object. One thing to check is to search your code base (excluding the Yoast plugin itself) for instances of wpseo, yoast, etc. If you find some code that is dequeuing/removing something, that might be it. If you have a plugin with results, deactivate if you can and check if that fixes anything.
I also noticed that the SEO Analysis drawer never loads and has the loading spinner running indefinitely. The javascript that controls the setting fields seems to work, but when you save it doesn't actually save, it just goes into the void.
All that said... I wasn't able to figure out what was wrong, but I did get it to start working again. Here's what worked for me...
After reading through a lot of different issue threads, I stumbled across some issues around security plugins blocking parts of the install process. I have my Wordfence settings dialed up pretty strict, so I deactivated it per recommendations while we go through re-installing Yoast.
After making sure that your security plugin(s) are deactivated, then deactivate and uninstall Yoast. Apparently you don't need to remove the plugin data, just uninstall. (This is also a good time to update other plugins if you haven't already).
Once you reinstall Yoast, you should have a button available to reindex the "indexables" that you need to click. It might be on the Dashboard, I don't remember. If you don't see it, you might go to Search Appearance > General > Rewrite tables > Force rewrite titles and Enable that, then save changes. I'm not 100% positive, but it seemed like after I did that, there was a panel in the General settings Dashboard or something, that said something along the lines of "Looks like some settings have changed, you should re-index your indexables now" with a button to start the process.
I also had to turn "Show SEO settings for Posts/Pages?" back on under Search Appearance > Content types. After I reinstalled, those were disabled. So maybe that helped Yoast know to load the javascript properly.
I'm not super familiar with Yoast, as you can probably tell, but after doing all this, it's working.
I believe you can also trigger the reindexing process from the CLI if you want, and that it's recommended if you have a large site with over 10k posts or whatnot.
Hope all this helps!

Conditional Compilation with Create React App

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.

Nuxt js styling issue

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

Divshot Page Editor - No Navigator?

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!

Displaying PDF on website using pdf.js

I want to put a file sample.pdf on my website, and want it to be displayed using pdf.js. What I want is to display my own file like the demo, with a toolbar, zooming in/out, etc. So far I can't do that yet.
I did check out the helloworld example, but it simply shows the file like an image, without toolbar, zooming in/out, etc. When I put another file with many pages instead of helloworld.pdf, it just shows the first page.
I am not quite sure what you are looking for but I was able to get this working exactly like the demo. Although you may not want to use that example viewer for your project, you can use the working code as a starting point for your own requirements.
For a simple test you can just clone the project somewhere under a web server into a directory like myproject and visit http://yourservername.com/myproject/web/viewer.html. You should see the pdf appear. This can be a starting point to working with this project. I did this running a very basic Apache server on Linux.
If you are not looking for an example styled like that the demo above you can also see this jsbin from the docs that show how to do something completely customized with working next/previous buttons to move between the pages (as you mentioned you were only seeing the first page).
As a note, it seems that this library does not work properly with Safari. You can see an issue about it here. Unfortunately this makes it unusable for me now as I need to support all current browsers.
Also, remember to watch for the warnings concerning CORS.