Top Ten Corvid Tips

Tip #1

 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 : 

Tip #2

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

More Shortcuts available here.

Tip #4

Before you start a project:

Tip #5

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

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:

Tip #7

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

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

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

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

Author

Stuck on a project? Hire Salman!

Email: admin@salman2301.com

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