Transition Items

[abriggs-usgs]

I (Aaron) have started to compile a list of tasks/tutorials/demonstrations that might be useful to complete before I move to Internet of Water. Please feel free to add/modify as desired. Also add your name behind the tutorials if you wish to be included.

• AWS S3 hosting (Ellen, Colleen)
• Browserstack Tutorial (Ellen, Colleen)
• Makerspace Project Setup (part 1) using the base template (Ellen, Colleen, Megan)
• Simple Scrolly Telling patterns in Vue (Ellen, Colleen)
• Makerspace Project Setup (part 2) build configuration, Jenkins etc. (Ellen, Colleen, Megan)
• Vue Environment Variables (Ellen, Colleen)
• Google Analytics and Google Tag Manager (Ellen, Colleen, Megan)
• NPM (package.json) and dependency management/updating (Ellen, Colleen, Megan)
• Vue /Webpack Code Splitting/Lazy loading/load ordering (Ellen, Colleen, Megan)

[jordansread]

Could you add?

• different options for templating/injecting svgs into a component (Lindsay/Colleen)

With that, was thinking that we've got tools to build svgs (including using node or R), but then there is a manual copy/pasta step into the .vue file that ends up being brittle. It would be great to know a couple of things:

• How to build an SVG inline with code (would this be mustache for the .vue file?)
• How to have a mobile and desktop version of an SVG or just certain parts of an SVG
• can we disable linting on SVGs? having all of the return lines makes it a lot harder to read the structure of the SVG (groups, parents/siblings, etc)

[abriggs-usgs]

Those are very good questions, and I'm not sure that I have good answers for them. Right now I only know of one way to inject the SVG as a component, which works really well, in that it allows the SVG to be added from a file and placed into a single component tag. However, when we used that, the SVG lost the ability to resize. So, that is a large draw back (that may be related to poor implementation on my part), I have been looking into solutions. I'll dig into the other questions and see if I can find some answers.

[abriggs-usgs]

I'm working through some of the questions asked above, and I am working out some examples. I just want to make note here of things I come across. For the question of can we disable linting on SVG. The answer is definitely yes if we can figure out how to how to make the SVG retain their resizing abilities when loaded as a component.

We can lint ignore entire files by creating a '.eslintignore' file at the root of the project. then we can list any files in that folder that we want ignored. We can also as line comment to ignore sections.

[jordansread]

Aaron, not sure if this is helpful or not, but we were able to inject external SVG files into the DOM with svginject in the past which retained the ability to resize. Here is one example

[mhines-usgs]

Added myself to a handful of these, hopefully it's not too late to jump on the bandwagon. I am not sure where I am heading in the future exactly, so hopefully it's worth while for me to participate.

[abriggs-usgs]

Oh Megan, you just missed project setup part one and two, but Ellen had the foresight to record it. I also made a complete write up. Ellen is storing all the related files in her personal OneDrive. I'll send you the link in teams.

[abriggs-usgs]

As a follow up, all of the checkbox topics have been covered. There are step by step write ups for each and most have a recorded screen share that covers the demos, but be warned many of the demos are in the hour to two hour time range, so they are not for the faint of heart :).

Also, I did spend some time investigating the SVG injection issue. It seems that the NPM package that we have used to add SVG files as components, https://vue-svg-loader.js.org/, in the past does work as expected, at least with some SVG files. I tested this with Colleen's 'newer' salt front SVG animations, and when added as a component with SVG Loader, they resized as would be expected. The lack of resizing was the only issue that occurred using the Vue SVG Loader, but now I am fairly sure that the lack of resizing is related to the formatting of the SVG and not the Loader.