Updated 031 Automatic import of custom code during compilation in JCB (markdown)

031-Automatic-import-of-custom-code-during-compilation-in-JCB.md

@@ -5,12 +5,12 @@
 [00:00:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
 (_Click on these time links to see Youtube video_)
  
-A very smart new feature has lately been added to Component Builder that's called custom code. It is stored next to Dynamic Get. You'd hardly ever need to go in here, unless you want to look at what is already been stored and make changes in the UI. Most of the time the changes will be done in the editor. 
+A very smart new feature has lately been added to Component Builder that's called custom code. It is stored next to Dynamic Get. You'd hardly ever need to go in here unless you want to look at what is already been stored and make changes in the UI. Most of the time the changes will be done in the editor. 
 
 **What is the purpose of this new feature?**
 [00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s)
 
-The feature is there for those who are used to coding in another editor. For example, they create a component in Component Builder, then once it is created, they do a compile and install it onto the same website as Component Builder to test it. [00:01:13](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) Then during testing, code is added into that compiled version that are installed onto the website. The new feature is able to, on compilation to extract that custom code , store it in this custom code area, and add it back into the component on the fly. Since there are some limitations, a demonstration of some rules and guidelines is necessary. [00:01:45](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m45s) This is still in beta and quite a few improvements still need to be done. I would like it to be tested and would appreciate some feedback from you. 
+The feature is there for those who are used to coding in another editor. For example, they create a component in Component Builder, then once it is created, they do a compile and install it onto the same website as Component Builder to test it. [00:01:13](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) Then during testing, code is added into that compiled version that is installed onto the website. The new feature is able to, on compilation to extract that custom code, store it in this custom code area, and add it back into the component on the fly. Since there are some limitations, a demonstration of some rules and guidelines is necessary. [00:01:45](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m45s) This is still in beta and quite a few improvements still need to be done. I would like it to be tested and would appreciate some feedback from you. 
 
 I'm going to compile the demo component since most of you might already have this component installed and can then use this as sort of a test area. I'm going to install it on to this current site and explain how to add custom scripting to that component by going to an editor. 
 
@@ -18,7 +18,7 @@ I'm going to compile the demo component since most of you might already have thi
 
  [00:02:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s)
  
-Here in the editor can this root directory of the website be seen. Go to the back end of the components. Open administrator, components and then the demo component. To demonstrate: On the main index page some custom scripting is added. .
+Here in the editor can this root directory of the website be seen. Go to the back end of the components. Open administrator, components and then the demo component. To demonstrate: On the main index page some custom scripting is added.
 
 ### Conventions Used(Insert Code - Replace code)
 
@@ -40,19 +40,19 @@ The only way to solve this was to create what is called a "fingerprint", a few l
 
 [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s)
 
-Let's see this in action. Here is Demo Components main document open. Some replacement tags is added. No changes is made but a few lines is added here - ///. Maybe another comment - 'hi it worked', [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) let's do - echo 'hi it worked' and that should do it. This is going to replace this area. 
+Let's see this in action. Here is Demo Components main document open. Some replacement tags are added. No changes are made but a few lines are added here - ///. Maybe another comment - 'hi it worked', [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) let's do - echo 'hi it worked' and that should do it. This is going to replace this area. 
 
 ### Recompiling The Demo Component With Replace  
 
 [00:08:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s)
 
-Let's go to the compiler and compile the component. So in the compiler I'm going to compile a component again. It is successfully compiled. Now before it is installed a check may be done to see whether it actually did get the code from the component.
+Let's go to the compiler and compile the component. So in the compiler, I'm going to compile a component again. It is successfully compiled. Now before it is installed a check may be done to see whether it actually did get the code from the component.
 
 ### Checking The Custom Code Tab Before Installing 
 
  [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) 
 
-The way it's done is to open Custom Codes in a new tab. There the component demo and the path in which the change was made may be seen, and it was a replacement. If it is opened, the code that we want replaced can be seen and the hashtag for the start, the fingerprint and the hashtag for the end. All that need to be done on this area is to click 'Install'. That will be the compiled version. 
+The way it's done is to open Custom Codes in a new tab. There the component demo and the path in which the change was made may be seen, and it was a replacement. If it is opened, the code that we want to be replaced can be seen and the hashtag for the start, the fingerprint and the hashtag for the end. All that needs to be done in this area is to click 'Install'. That will be the compiled version. 
 
 ### Looking at The Replaced Code In Editor
 
@@ -64,14 +64,14 @@ Now let's go back to the code. It inserted the code in the correct place, moved
 
  [00:11:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s)
 
-Let's look at inserting. Remember, don't put code close to each other within at least eight lines. So 1, 2, 3, 4, 5, 6, 7, 8. From this line another set may be inserted or another section of code may either be inserted or replaced . [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is that the fingerprint that it creates above the insertion, is sometimes up to 8 lines long. It could happen that it uses from the selected area(see video) and turn out to be an error when changes are made. It will interpret that this code has also been affected and will not find it. That is one of the limitations that these code insertions that is done either by replacing or inserting a portion of text script, can only be inserted up to eight lines apart. Let's do an insertion over here(see video). It is inserted and a comment placed in. Then save and compile. 
+Let's look at inserting. Remember, don't put code close to each other within at least eight lines. So 1, 2, 3, 4, 5, 6, 7, 8. From this line, another set may be inserted or another section of code may either be inserted or replaced. [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is that the fingerprint that it creates above the insertion, is sometimes up to 8 lines long. It could happen that it uses from the selected area(see video) and turn out to be an error when changes are made. It will interpret that this code has also been affected and will not find it. That is one of the limitations that these code insertions that is done either by replacing or inserting a portion of text script, can only be inserted up to eight lines apart. Let's do an insertion over here(see video). It is inserted and a comment placed in. Then save and compile. 
 
 ### Checking The Custom Code Tab For New Entry Before New Installation 
 
 [00:13:46](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s)
 
-Before we install it, it is important to check whether everything was done as expected. The insertion has been grabbed and added to the database. [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has the hash# target. With insertion we only need where it starts not where it ends and so that can be closed. Now simply install that component. Go look at the code. It did add the replacement script, change it from 'replace' to 'replaced'. It has added the inserted script from 'insert' to 'inserted'. [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) If a change need to be made to it, just add these diamonds (<>). Make the change. Save the file and compile. Check whether the work was updated. Install the component. Take a look at the code again. It is added it back. [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s) 
+Before we install it, it is important to check whether everything was done as expected. The insertion has been grabbed and added to the database. [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has the hash# target. With insertion, we only need where it starts not where it ends and so that can be closed. Now simply install that component. Go look at the code. It did add the replacement script, change it from 'replace' to 'replaced'. It has added the inserted script from 'insert' to 'inserted'. [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) If a change needs to be made to it, just add these diamonds (<>). Make the change. Save the file and compile. Check whether the work was updated. Install the component. Take a look at the code again. It is added back. [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s) 
 
-If for some reason this code above it changes, there is another part of this implementation that will give a notice on compilation that there has been a change to the fingerprint and it could not find the insertion area.  It will still add the code on the line number, but it will be escaped. So that it doesn't change or influence any of the code that still there. The same applies to the replacement code. [00:15:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m50s) Since it is replacing code, it is a little bit more tricky. So it will still be added into the line, but the old code will not be removed. It needs some fine tuning. Any feedback would be appreciated.
+If for some reason this code above it changes, there is another part of this implementation that will give notice on compilation that there has been a change to the fingerprint and it could not find the insertion area.  It will still add the code on the line number, but it will be escaped. So that it doesn't change or influence any of the code that still there. The same applies to the replacement code. [00:15:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m50s) Since it is replacing code, it is a little bit more tricky. So it will still be added into the line, but the old code will not be removed. It needs some fine-tuning. Any feedback would be appreciated.
 
 **Component Builder can now automatically extract Custom code from a component while in development.** [00:16:21](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m21s) A switch has been added, that when you are ready to distribute your component, you can say that you are aware that it is no longer in production. When it is compiled, it will not add these placeholders anymore. Please give your comments at Github.  [00:16:51](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s)