<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en-GB">
	<id>https://wiki.impvis.co.uk/index.php?action=history&amp;feed=atom&amp;title=Tips_for_the_developer</id>
	<title>Tips for the developer - Revision history</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.impvis.co.uk/index.php?action=history&amp;feed=atom&amp;title=Tips_for_the_developer"/>
	<link rel="alternate" type="text/html" href="https://wiki.impvis.co.uk/index.php?title=Tips_for_the_developer&amp;action=history"/>
	<updated>2026-04-20T11:47:18Z</updated>
	<subtitle>Revision history for this page on the wiki</subtitle>
	<generator>MediaWiki 1.36.0</generator>
	<entry>
		<id>https://wiki.impvis.co.uk/index.php?title=Tips_for_the_developer&amp;diff=839&amp;oldid=prev</id>
		<title>Cclewley: /* YouTube videos for the developer */</title>
		<link rel="alternate" type="text/html" href="https://wiki.impvis.co.uk/index.php?title=Tips_for_the_developer&amp;diff=839&amp;oldid=prev"/>
		<updated>2021-09-29T09:09:06Z</updated>

		<summary type="html">&lt;p&gt;&lt;span dir=&quot;auto&quot;&gt;&lt;span class=&quot;autocomment&quot;&gt;YouTube videos for the developer&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;table style=&quot;background-color: #fff; color: #202122;&quot; data-mw=&quot;interface&quot;&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;tr class=&quot;diff-title&quot; lang=&quot;en-GB&quot;&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;← Older revision&lt;/td&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;Revision as of 09:09, 29 September 2021&lt;/td&gt;
				&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot; id=&quot;mw-diff-left-l8&quot;&gt;Line 8:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 8:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== YouTube videos for the developer ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== YouTube videos for the developer ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Check out the channel &lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;nowiki&amp;gt;&lt;/del&gt;https://www.youtube.com/channel/UCCWiTDeqBPSsUks0jFrhEKQ&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;/nowiki&amp;gt;&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Check out the channel https://www.youtube.com/channel/UCCWiTDeqBPSsUks0jFrhEKQ &lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;and its description at [[YouTube channel]].&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== NPM node modules ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== NPM node modules ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</summary>
		<author><name>Cclewley</name></author>
	</entry>
	<entry>
		<id>https://wiki.impvis.co.uk/index.php?title=Tips_for_the_developer&amp;diff=834&amp;oldid=prev</id>
		<title>Cclewley: Created page with &quot;== Re-use existing code == Before writing anything, make sure you’re familiar with the content that already exists on the Imperial Visualisations website. If a pre-existing...&quot;</title>
		<link rel="alternate" type="text/html" href="https://wiki.impvis.co.uk/index.php?title=Tips_for_the_developer&amp;diff=834&amp;oldid=prev"/>
		<updated>2021-09-28T15:34:19Z</updated>

		<summary type="html">&lt;p&gt;Created page with &amp;quot;== Re-use existing code == Before writing anything, make sure you’re familiar with the content that already exists on the Imperial Visualisations website. If a pre-existing...&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;== Re-use existing code ==&lt;br /&gt;
Before writing anything, make sure you’re familiar with the content that already exists on the Imperial Visualisations website. If a pre-existing visualisation in a suite looks somewhat like what you want one of your visualisations to be, then having a look at the code for the pre-existing one will give you good help. Don’t be afraid to start by copying the content of pre-existing files into your currently empty files and playing around with how the old code works. This is actually how a lot of visualisations start off!&lt;br /&gt;
&lt;br /&gt;
Once you’ve had a look at someone else’s code, copy over some interaction structure. It’s useful to understand how the JS and HTML files talk to one another, but if you’re stuck, taking other people’s files and just understanding how their files work is a big help. If you’ve done this, make sure that the names of the files referenced in the “brains” of the HTML (down the bottom) are the ones you want them to be (they need to be referencing the files locally to your computer), so copying and pasting the content of their files won’t usually work, as the HTML will be unable to find the files that have (incorrectly) been asked for. Now that the interactions between files have correctly been set up, you should be able to get going.&lt;br /&gt;
&lt;br /&gt;
== Maths: dividing by zero ==&lt;br /&gt;
When working out the maths, be careful with special cases that arise when dividing any two things. For example, suppose you wanted arctan(y1/x1) to find an angle. In that case, you’d need to create the special case for if x1=0, as JavaScript would have a problem with dividing by zero, even though you might not always consider this a problem. Algebraically we’d expect pi/2, so for this, you’d have to create the special case to return pi/2 for when x1 = 0.&lt;br /&gt;
&lt;br /&gt;
== YouTube videos for the developer ==&lt;br /&gt;
Check out the channel &amp;lt;nowiki&amp;gt;https://www.youtube.com/channel/UCCWiTDeqBPSsUks0jFrhEKQ&amp;lt;/nowiki&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== NPM node modules ==&lt;br /&gt;
Do not edit the vue-components files in node modules. Instead if something isn't working you need to clone the vue-components repository, and then edit that to make your visualization work, then pull request the changes you’ve made to the vue components repository.&lt;br /&gt;
&lt;br /&gt;
== Git Ignore node_modules ==&lt;br /&gt;
To share your projects more easily, you should exclude the node_modules folder from your github repo. Otherwise people will get an error when they run &amp;lt;code&amp;gt;npm run serve&amp;lt;/code&amp;gt; which can be solved by deleting the node_modules folder and running &amp;lt;code&amp;gt;npm i&amp;lt;/code&amp;gt;.&lt;br /&gt;
&lt;br /&gt;
To exclude the node_modules folder you must create a .gitignore file in the project directory.&lt;br /&gt;
&lt;br /&gt;
# In your main project directory (the folder containing the node_modules folder) create a file and name it “gitignore.txt”.&lt;br /&gt;
# Open this in a text editor and add the following text “node_modules/” then save and close the file.&lt;br /&gt;
# Hold shift and right click in the project folder and click “open terminal here” or “open powershell here”.&lt;br /&gt;
# Run this command &amp;lt;code&amp;gt;ren gitignore.txt .gitignore&amp;lt;/code&amp;gt;&lt;br /&gt;
# Then run this command &amp;lt;code&amp;gt;git rm -r --cached node_modules/&amp;lt;/code&amp;gt;&lt;br /&gt;
# Then using gitkraken or command line git, commit and push your changes.&lt;br /&gt;
&lt;br /&gt;
You should now retain your version of the “node_modules” folder, but your git should not have any “node_modules” folder. Now other people can clone the repo and just run the command &amp;lt;code&amp;gt;npm i&amp;lt;/code&amp;gt; then &amp;lt;code&amp;gt;npm run serve&amp;lt;/code&amp;gt;.&lt;br /&gt;
[[Category:Tips Whilst Coding]]&lt;br /&gt;
__FORCETOC__&lt;/div&gt;</summary>
		<author><name>Cclewley</name></author>
	</entry>
</feed>