# CodeSunrise Development Guidelines

This document serves as a comprehensive guide for front-end developers at CodeSunrise. As a living document, it is periodically updated to ensure all team members share the same understanding and knowledge. This guide aims to streamline development processes, enhance productivity, and foster knowledge sharing.

## Prerequisite Skills

- PHP
- Node JS
- SASS

----------------------

## Software Installation

### Required Software

- [**PHP**](https://www.php.net) - Interpreter and Programming Language
- [**MySQL**](https://www.mysql.com) - Database
- [**XAMPP**](https://www.apachefriends.org) - Server
- [**Node JS**](https://nodejs.org) - JavaScript Compiler

### Recommended Software

- [**Local WP by Flywheel**](https://localwp.com) - A versatile tool for creating and managing multiple WordPress instances without cumbersome configurations.
- [**Visual Studio Code**](https://code.visualstudio.com) - The premier IDE for WordPress development with a wide range of plugins and snippets.

----------------------

## BEM Naming Conventions

[Official Documentation](https://getbem.com/naming/)

BEM is an acronym for "**BLOCK, ELEMENT, and MODIFIER**," which are the three key components of our coding convention.

> ***Pro Tip: Any HTML element that accepts the "class" attribute can serve as a block or an element.***

BEM was developed to create a robust and scalable framework for developing reusable, maintainable code. Its benefits include easier debugging and testing, improved readability, and clear comprehension of the code structure.

### Block

A block is a standalone entity that carries independent significance. It symbolizes the highest level of abstraction. Examples of blocks include a *header, container, menu, checkbox, etc.*

### Element

Elements are components of a block and lack standalone meaning. They are **semantically tied to their respective block**. For instance, a 'menu item' would be an element within the 'menu' block.

### Modifier

A modifier is a property that alters the appearance or behavior of a block or an element. A modifier possesses a name and a value. For instance, a 'button' block may have a 'color' modifier with values such as 'red', 'green', etc.

An example of the BEM methodology:

.block {}
.block__element {}
.block__element--modifier {}

This naming convention is highly adaptable and can be customized according to project specifications. However, maintaining **consistency across the project** is essential to leveraging BEM's benefits.

## Module Creation

Creating a new module involves dissecting a webpage section into smaller, reusable blocks using BEM principles. Here's how to create a module titled "Card":

#### 1. Identify the Block: The Block in this context would be the Card.

.card {}

#### 2. Identify the Elements: These might include the card's image, title, and description.

.card__image {}
.card__title {}
.card__description {}

#### 3. Identify any Modifiers: These could represent different card styles, such as a featured card or a card with a unique layout.

.card--featured {}
.card__title--highlighted {}
.card--horizontal-layout {}

This example provides a basic illustration of how to create a module using BEM principles.

-------------

## Project Setup

### Step 1 - Clone __underscore_ template

[Link](https://github.com/Automattic/_s)

Setting up a new WordPress project can be tedious, which is why the **_underscore_** template was created. It allows for easy and rapid replication of basic configurations.

**

Clone the GitHub repository**

git clone https://github.com/Automattic/_s

**Install NPM packages**

npm install

**Execute SCSS compiler**

npm run watch

----------------------

## Creating a New Page

**1. Utilize this boilerplate code:**

<?php
/**
 * Template Name: Homepage
 *
 * @package iwn_website
 */

get_header();
?>

<div class="page-template--homepage">
    <?
    
    get_template_part('pages/homepage/hero');
    
    ?>
</div>

<?
get_footer();

----------------------

## Enhancing Productivity

### LocalWP Plugins

> ***IMPORTANT NOTICE: To utilize LocalWP plugins, ensure you have created an account and are logged in to the application***
>
> [Image Reference](https://hackmd.io/_uploads/ByjZ0JpI2.png)

**Live Links** - Share your local website globally with a single click, promoting team collaboration and showcasing your work.

**Instant Reload** - Refreshes your page automatically each time a CSS file is saved, eliminating the need to continually press F5.

### VSCode Extensions

**Live Share** by Microsoft - Enables real-time collaborative editing and sharing of local code on your computer.

**PHP** by Devsense - Assists in identifying PHP syntax errors.

**SCSS BEM Support** by Jolo Yonaha - Provides a suite of tools for using BEM.

**Color Highlight** by Sergii N - Facilitates color visualization and selection.

----------------------

## ChatGPT

**DISCLAIMER**

**1. It does not generate production-ready code.**

While it can assist with scripts and code snippets, it's important to understand the underlying technologies involved. Its solutions may not always be optimal.

**2. Your chats are not secure**

Never input sensitive data such as passwords into a ChatGPT chat as it poses significant security risks.

### Leveraging ChatGPT

Despite the caveats, ChatGPT can be a powerful productivity tool and can even automate repetitive tasks.

Consider this scenario: You're creating a new page for a website, and you need to create a navbar that is pixel-perfect from a Figma file, follows BEM naming conventions, uses SASS, and PHP with ACF.

Here's how ChatGPT can expedite the process:

1. First, interpret the navbar functional requirements and structure yourself. Create the PHP code implementation:

**Code PHP implementation (3 hours)**

2. Input the PHP code you created into ChatGPT with the prompt:

`This is my PHP component for a WordPress project that uses ACF. I need you to create all SCSS boilerplate following BEM naming conventions.`

3. Adapt the CSS code from Figma and insert it into the locations automated by GPT. This eliminates the worry about typing errors or forgotten implementations.

**SCSS (40 minutes)**

4. Finally, ask ChatGPT to create the ACF implementation:

`Now, you need to create a code implementation of the ACF fields listed in this code so I can place it the theme functions.php file`

This process minimizes time spent on debugging and initializing fields, significantly reducing the time spent on the task.

# GitHub