Before we begin with it, It’s is necessary that you get this -
It is not the Coding that’s valuable. What’s valuable is what you build from it.
You might not understand it this way, Let me give you an example - Suppose you want to build a Software for your Startup. To build the Software, there are two ways
One is uttering a Mantra and the Second is Coding
What would you choose?
Will you choose to Code? I don’t think so. (There isn’t any need either)
You must be able to see this distinction before you get into Coding.
Otherwise?
What’s the value of just Coding? It’s worthless.
Reading Code is one of the initial steps in Learning to Code.
In Learning, Initial steps are very crucial. If you mess up initially, there’s a high chance that you have cut short the possibility of how much you could have learned.
But, I’ll not mess up... (Did you think that?)
You will if you don’t exactly know how someone messes up.
One messes up only when one forms opinions about what he doesn't know.
Popular opinions in coding...
One must start with C as it covers the basics of programming.
I will learn C because that’s what my College teaches.
What’s the point in learning Web Development now?
Industry prefers C++ and Java, so why should I learn JavaScript?
I’ll learn DS&A because that’s what dream companies demands.
I’ll build my website from the core. Low Code/ No Code isn’t a long term thing. It doesn’t allow flexibility.
Just think… Do you have the right to have such opinions if you don’t know about Coding?
You don’t have the Right!
Now, Let’s get into the actual thing.
The example functionality referred to : https://coderwix.wixsite.com/proicoding
Step 1: You Code on paper, not on Editor
Get your Paper-Pen ready.
Step 2: Observe the Functionality Carefully and Note down your observations.
Example :
Every Slide is of different duration.
The Animation Effect is not the same for all Slides.
Step 3: Visualize the functionality. The Clearer you are able to visualize, the easier it will be for you to understand it fully.
Step 4: Read the Code once.
Just go through.
Do not start searching for how exactly it works.
For Example : You were going through the code and you started searching for setInterval()
If you start searching for everything, you will go out of track!
Step 5: Note down all the WiX Elements used.
Example : WiX Elements in this functionality are :
1 Slider
1 Image
2 Container Box
2 TextBox
Step 6: Note down all the Global Variables.
Also, note the initialized values.
Example : Global Variables in this functionality are :
data
Array with Objects
Each Object in the form :
{ “title“ :__, “slideImageUrl” :__, “subtitle” : __, “onClickUrl” : __, “duration” : __ }
currentSlideIndex = 0
slidePace = 0
setIntervalVar
Step 7 : Note down all the functions.
Example : The functions in this Functionality are :
onReady
showSlide
nextSlide
prevSlide
isCurrentSlideIndexValid
openLink
prevBtn_click
nextBtn_click
imgAnim
Step 8 : Now, Step 3 will help you to go through the functions.
Start from onReady function (The function which runs when the page loads)
Go through whatever is written in it.
Step 9 : Whenever a function is called, keep track of parameters of the function and what it returns.
Once you have understood the function, go back to the calling line of code.
Assign the returned value to the variable (If the function returns)
In this way, Draw a map of function calls.
Step 10 : Note down your understanding of the function.
Example : showSlide(i) Function
The index of slide i.
imgAnim() called to animate the slide.
The slideData variable has the title, slideImageUrl, subtitle, onClickUrl, duration of the slide in the form of object.
The value of title, subtitle, image url is assigned.
The target kink of title, subtitle image is assigned.
The rate of slide is set using the duration of slide
In setInterval, every 50ms, nextSlide() function is called.
Note : While going through the functions, you might come across certain JS functions which you don’t know, you can search about them from Velo Documentation and then continue.
Example : In the imgAnim(), you want to know how wixAnimations.timeline() work. You can search for it in Velo Documentation.
Most of the functions are covered this way. In case some functions are not covered this way, You will figure out which function to go to next with the help of Step 3.
- Team PROi