Developing the PIC way

Development Best Practices.

We use the SFTP extension in order to connect to the wpengine sites. → example  https://piconsulting.slite.com/app/docs/Jzx77dfNTaD4DO 
We use laravel mix in order to compile our SCSS files. If we need to add changes to CSS those NEED to be added in the SCSS files. →  https://piconsulting.slite.com/app/docs/q2cqj2u0Z  . All CSS should be added in the style/scss folder in each file as the theme, and compiled with LaravelMix.
PIC is moving forward to work on all its NEW sites with block themes, so we don't get behind on the wordpress updates and compatibilities.
We are using ACF blocks in order to create blocks. So if you need to create any please review the other blocks in the /blocks/ folder and any ACF blocks documentation  https://www.advancedcustomfields.com/resources/blocks/ 
Add lazy loading to images, add height and width and alt text.
Delete libraries that are not being used.
We don't load font awesome in our sites, it usually loads much more resources than we need to use 5 icons. We try to add them directly as SVGs. Lets add them as images and not as code per security reasons.
We don't load bootstrap in our sites cos it loads lots of resources and we end up having issues with speed. We try to keep our sites super clean. Less is more. If you need a specific part, like a grid or something we tend to use the default from wordpress. We can add just a grid to the scss/ files if its needed.
We try to as little jquery as possible (woocommerce would load it anyways so for WooCommerce sites its ok) add jquery as a dependent of the file you need it.
Avoid custom.js file with all jquery scripts. Instead: BLOCKS with each jquery or javascript script depending on the block and if its being used or not.
Avoid copying all the templates of woocommerce to the theme. This is not a best practice since when we update the woocommerce plugin to keep the site secure the templates WONT be updated and might create a conflict. Intead, what should happen: customizations to woocommerce templates should be done with hooks in the inc/wc folder.
We sometimes add
single-product and add all the hooks related to single products on that file
archive and add all the hooks related to shop and categories products on that file
 https://woocommerce.com/document/introduction-to-hooks-actions-and-filters/ 
 https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ 
Keep code clean. Don't comment things if they are not needed. Don't keep code or elements that are not being used.
Don't create unnecessary templates. Used default WP blocks when possible.
Use BEM for blocks - templates -  https://piconsulting.slite.com/app/docs/lGfdm21kdSlkIB 
Do not repeat code, check if the site already has the module, or a similar one that you can use.

LP and TY Pages Naming convention