Top Ten Corvid Tips

Updated: Jul 27, 2020

Check out these top ten tips as written by Corvid Master Salman.

Tip #1

Use a consistent name

Consistent naming of element ID, variable and function name will improve the readability of the code and easy to re-write the code. A great way to set the name of the element is to write what type of element it is (input, dropdown, checkbox, box or stripe) and their placeholder. This way, when you want to select a dropdown in the code just type in drop and IntelliSense will show all the dropdown elements. Example : 

  • input element to get the first name => inFirstName

  • input element to get the last name => inLastName

  • checkbox to select product names => checkProd

  • box containing form => boxForm


Tip #2

Wait for the dataset to ready

Make sure all the datasets ready, before running the init code. This code is useful if you have more than one dataset.


$w.onReady(function() { 
let dataset1, dataset2, dataset3;     
$w('#dataset1').onReady(()=>{         
dataset1 = true;         
AllDatasetReady()     
});     

$w('#dataset2').onReady(()=>{         
dataset2 = true;         
AllDatasetReady()     
});     

$w('#dataset3').onReady(()=>{         
dataset3 = true;         
AllDatasetReady()     
}); 

functionAllDatasetReady() { 
if(dataset1 && dataset2 && dataset3) init();     
} 
}); 

functioninit() { 
// all the dataset is ready 
}

Tip #3

Top three key shortcuts to remember


  • Ctrl + Space  - Open the intellisense 

  • Alt + Up / Alt + down - move the line of code up/down

  • Alt  + Shift + Up / Alt + Shift + down - copy the line of code up/down

More Shortcuts available here.

Tip #4

Step by Step to create a new feature or project


Before you start a project:

  1. Design the database structure Simple pen/note or whiteboard is fine but also if you want there is a number of database design editors online available for free: https://sqldbm.com/Home/

  2. Design UI Create all the pages and dynamic pages, drag and drop the element and update the property ID.

  3. Start Writing code After you finish the first two steps it becomes easier to write the code.

Tip #5

Use a Comment


One word comment is more useful, keep the comment as short and precise as possible


// global Variable
let brand = "code queen"; 

$w.onReady(()=>{ 
// initialize the code    
init(); // event    
$w('#input').onKeypress(e=>{ 
// submit the form on "enter" key press
if(e.code === "Enter") {         
}     
});     
$w('#dataset').onBeforeSave(e=>{ 
// insert the full name before form save
let fullName = e.firstName + e.lastName;         $w('#dataset').setFieldValue("fullName" , fullName);     
}); 
});

Tip #6

Debug using Site events


All the logs, error both in the page and backend will be shown in the live site will update in the site event. To open the Site event:

  1. Go to Dashboards

  2. Click on Setting

  3. Site Monitoring (Under Product tools)

  4. Click on the open button


Tip #7

Using try/catch with async/await


Using try/catch with async/await will help you to write clean, readable and error handling code.


asyncfunctionhandlePayment() { 
try { 
let user = await getUser(); 
let cart = await getCart(user); 
let processPay = await pay(cart); 
// payment is completed    
} catch(e) { 
// handle error here
console.log("Error  :" , e.message);     
} 
}

Vs the ES5 way


 functionhandlePayment() {     
getUser()     
.then(user=>{         
getCart(user)         
.then(cart =>{             
pay(cart)             
.then(processPay=>{ 
// payment is complete            
})             
.catch(e => { 
// handle error here
console.log("Error  :" , e.message);             
});         
})         
.catch(e => { // handle error here
console.log("Error  :" , e.message);         
});     
})     
.catch(e => { // handle error hereconsole.log("Error  :" , e.message);     
}); 
}

Tip #8

Type checking


Check the type of the parameter before executing the code and throw the error.


function add(a,b) { 
try { 
if(typeof a !== "number" )throw new Error ("a is not an number");
        if(typeof b !== "number" )throw new Error ("b is not an number");  
        return a+b;     
        }catch(e) { 
        console.log(e.message);     
        } 
        } 
        add(5, null) // error "b is not an number"
        add(undefined, null) // error "a is not an number"
        add(2, 3) // 5

Tip #9

Secure secret keys


The best way to store and retrieve the secret key is to create a keys.js backend file and then export the key. You can import this key in multiple files .jsw so, if you change it in the future it will update all the files and .js cannot be imported in public or frontend file so, it will be secured:


// keys.js
exportconst stripeKey = "my secret key here"; 
exportconst otherKey = "my other key";

// payment.jsw
import { stripeKey } from"backend/keys.js";

Tip #10

Help and Support


Official Wix Corvid Forum https://www.wix.com/corvid/forum Unofficial Community Facebook group https://www.facebook.com/groups/wixcode/ Official Wix Support Email support@wix.com Tips to write a good post in the forum

  1. Add a screenshot of a page or database

  2. Explain an overview use case of the code

  3. Screenshot the error, if there are any

  4. if there is a link available to the error page, paste the link

  5. paste the code at the bottom of the post (using code block, not regular text)


Author

by Salman




Stuck on a project? Hire Salman!

Email: admin@salman2301.com

Site: https://www.salman2301.com/




160 views0 comments

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.