Skip to content

Commit

Permalink
XS✔ ◾ Fixed OK spelling mistakes (#8337)
Browse files Browse the repository at this point in the history
* Fixed OK spelling mistakes

* Auto-fix Markdown files

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
tombui99 and github-actions[bot] authored Apr 10, 2024
1 parent 16ad976 commit fd6dc71
Show file tree
Hide file tree
Showing 19 changed files with 78 additions and 81 deletions.
39 changes: 21 additions & 18 deletions rules/angular-separate-component-concerns/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@ One common mistake in writing a front-end component is trying to fit everything
<!--endintro-->

## Why should you separate the logic?
In simple components, having many logics (e.g. API calls and binding to the form) written to the component itself sometimes works okay, especially if the aim is to reduce the file footprint. However, doing this to larger-sized components can make maintaining the code challenging. The last thing developers want to do is debug a component with 1000+ lines of code with intermingling logic.

In simple components, having many logics (e.g. API calls and binding to the form) written to the component itself sometimes works OK, especially if the aim is to reduce the file footprint. However, doing this to larger-sized components can make maintaining the code challenging. The last thing developers want to do is debug a component with 1000+ lines of code with intermingling logic.

Pros and cons of combining all logic into a single component:
- 🟢 Less file footprint
- 🟢 Easier to write
- 🟢 Less problem with reactivity
- ❌ No clear separation of logics
- ❌ Harder to debug when things go wrong
- ❌ Adding more features to this component can be challenging
* 🟢 Less file footprint
* 🟢 Easier to write
* 🟢 Less problem with reactivity
* ❌ No clear separation of logics
* ❌ Harder to debug when things go wrong
* ❌ Adding more features to this component can be challenging

Consider splitting your component's logic when:
- The file has reached 100+ lines of code
- The component has two or more sources of data (e.g. route params and API)
- UI has many fields that need to be populated from a data source
- When it is not clear which data source drives the UI or when you want to abstract it out

* The file has reached 100+ lines of code
* The component has two or more sources of data (e.g. route params and API)
* UI has many fields that need to be populated from a data source
* When it is not clear which data source drives the UI or when you want to abstract it out

## How to separate the logic?

Expand Down Expand Up @@ -61,16 +61,17 @@ private calculate(...): ComponentData {
// Calculate implementation
}
```

::: bad
Figure: Massive amount of code intermingling from API calls to calculation to UI binding
:::


Here are the steps to split the logic:

1. Group front-end logic into these processes:
- Data fetching: fetching data from external sources
- Data processing: processing source data to suit the UI better
- Data display: binding the UI displayed element to a value
* Data fetching: fetching data from external sources
* Data processing: processing source data to suit the UI better
* Data display: binding the UI displayed element to a value

2. Identify which part of a smart component belongs to which process.

Expand Down Expand Up @@ -107,6 +108,7 @@ Here are the steps to split the logic:
// Calculate implementation
}
```

::: good
Figure: Use declarative code to bind UI value
:::
Expand Down Expand Up @@ -158,11 +160,11 @@ Here are the steps to split the logic:
});
}
```

::: good
Figure: UI logic is separated from Data Fetching and Data Processing logic
:::


5. (Optional) If the component is complex enough, consider splitting the data fetching with the data processing step to another component.

In the example below, we create a parent component to handle the routing while providing the child component with the only necessary data.
Expand Down Expand Up @@ -201,6 +203,7 @@ Here are the steps to split the logic:
});
}
```

::: good
Figure: All logics (data fetching, data processing, and data display) are now separated
:::
:::
6 changes: 3 additions & 3 deletions rules/business-cards-branding/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Digital business cards offer a range of advantages over their paper counterparts

Here are the instructions for adding a digital business card to your phone wallet using the HiHello app:

1. **Download and install the HiHello app:** Visit your app store (iOS or Android) and search for "HiHello." Download and install the app on your smartphone. https://www.hihello.me/
1. **Download and install the HiHello app:** Visit your app store (iOS or Android) and search for "HiHello." Download and install the app on your smartphone. <https://www.hihello.me/>
2. **Create your digital business card:** Open the HiHello app and sign up or log in to your account. Follow the prompts to create your digital business card by entering your contact details, choosing a template, and customizing the design to your preference.
3. **Save your digital business card to your phone wallet:** Once your digital business card is created, follow these steps to add it to your phone wallet:

Expand All @@ -74,10 +74,10 @@ Here are the instructions for adding a digital business card to your phone walle
* Follow the prompts to select the saved image of your digital business card from your gallery or files.
4. **Access and share your digital business card:** Once your digital business card is saved in your phone wallet, you can easily access it anytime by opening your wallet app. You can then share it with others by tapping on the card and selecting the sharing option provided by your wallet app.

![Figure: Ok example: If you are going to have Paper Business cards, make sure they POP!](ssw-businesscards.png)
![Figure: OK example: If you are going to have Paper Business cards, make sure they POP!](ssw-businesscards.png)

::: good

![Figure: Good Example - Digital Business Cards such as HiHello are awesome!](dsdsvcsd.png)

:::
:::
5 changes: 2 additions & 3 deletions rules/desk-setups/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,13 @@ To avoid this hassle and boost productivity, each desk should have a dock setup
![Figure: Good Example - Clean desk with a dock](good-clean-desks.png)
:::

If you have a Thinkpad dock, MacOS users will need to install a driver to use it.
If you have a Thinkpad dock, MacOS users will need to install a driver to use it.
See [DisplayLink Manager.](https://www.synaptics.com/products/displaylink-graphics/downloads/macos)

There are some rare scenarios where people won't use docks. This is okay, but you need to ensure the desk is set up properly for the next user. All cables should use the dock wherever possible.
There are some rare scenarios where people won't use docks. This is OK, but you need to ensure the desk is set up properly for the next user. All cables should use the dock wherever possible.

If you are having issues with the docks, try these steps

1. Update OS
2. Update/install drivers
3. Restart your computer

2 changes: 1 addition & 1 deletion rules/disagreeing-with-powerful-stakeholders/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Good example - The Developer identified that the Product Owner had a different r
Getting permission to comment is a great tactic. It makes the stakeholder feel empowered to have the conversation and also gives you confidence that they are interested in what you have to say.

:::greybox
**Developer**: Would it be okay if I explain why I think we should upgrade now?
**Developer**: Would it be OK if I explain why I think we should upgrade now?

**Product Owner**: Sure!
:::
Expand Down
2 changes: 1 addition & 1 deletion rules/do-you-add-end-screen-to-your-youtube-videos/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ On top of [YouTube Cards](/youtube-cards), you can also add an end screen for th

<!--endintro-->

End screens help to avoid viewers to go away by suggesting to them the next content they can watch. The idea remains similar to cards `\*LINKBACKANDFORTH\*:` you display a CTA to your viewers so they can watch more of your content. End screens tend to work better (viewers can decide to ignore cards to keep watching the video which is okay as it increases the chance they will finish your video- increasing session time), as viewers are now done with your video and need to look for another video to watch.
End screens help to avoid viewers to go away by suggesting to them the next content they can watch. The idea remains similar to cards `\*LINKBACKANDFORTH\*:` you display a CTA to your viewers so they can watch more of your content. End screens tend to work better (viewers can decide to ignore cards to keep watching the video which is OK as it increases the chance they will finish your video- increasing session time), as viewers are now done with your video and need to look for another video to watch.

Hold their hand by promoting up to four elements which can be:

Expand Down
6 changes: 3 additions & 3 deletions rules/do-you-avoid-using-out-of-office/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ When you are on leave, you need to make sure that your mailbox is monitored. The

* For extended periods off the grid, asking someone (nicely) to check your mailbox if you are away for 3 days or more. This ensures that any important emails from clients are actioned,
* Make sure all client emails are handled before you leave; either delegate the task, or inform the person taking care of your inbox or,
* Check it yourself every 3-4 days from home or wherever you are (a Hawaiian beach or Himalayan mountain maybe!). People are generally okay waiting a couple of days for a reply. **For extended periods off the grid, the use of ‘Out of office’ is good** , but when you expect to have partial connectivity and anticipate replying, don't set your ‘Out of office’ on at all.
* Check it yourself every 3-4 days from home or wherever you are (a Hawaiian beach or Himalayan mountain maybe!). People are generally OK waiting a couple of days for a reply. **For extended periods off the grid, the use of ‘Out of office’ is good** , but when you expect to have partial connectivity and anticipate replying, don't set your ‘Out of office’ on at all.

The use of 'Out of Office - Automated Response' emails should be avoided unless you plan to be away for more than a week, and unable to check your emails while away. In this case, it is also good to mention one or two alternative contact(s).

Expand All @@ -46,10 +46,10 @@ The use of 'Out of Office - Automated Response' emails should be avoided unless

If you are on leave or unavailable for a period and want your team to know, you should set your status to Out of Office. A recurring problem when doing this in Outlook is that if a user selects their meeting to show them ‘Out of office’, whoever accepts the appointment will also have their status changed to ‘Out of office’.

In case you use Outlook and Microsoft Teams, there’s a quick way to do this. You can use **Edit status message | Out of Office** feature on Teams.
In case you use Outlook and Microsoft Teams, there’s a quick way to do this. You can use **Edit status message | Out of Office** feature on Teams.

By using this feature, your Teams status will be synchronized to Outlook, showing the whole organization that you are not available for calls or meetings. You can even set up an automatic message to be sent when someone tries to reach you on Microsoft Teams.

::: good
![Figure: Good example - Your new status on Teams will be shared across your Outlook calendar, and your team will see you are not around](teams-status.jpg)
:::
:::
2 changes: 1 addition & 1 deletion rules/do-you-use-gzip/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Use one of the methods described below to add Gzip compression to your site ASP.
In **Control Panel** navigate to **All Control Panel Items | Programs and Features**, and click **Turn Windows features on or off**.
Choose **Internet Information Services | Web Management Tools | World Wide Web Services | Performance Features | Dynamic Content Compression**.

![Figure: Click "Ok" to install it](use-gzip-4.png)
![Figure: Click "OK" to install it](use-gzip-4.png)

![Figure: Enable dynamic content compression for your site](use-gzip-5.png)

Expand Down
12 changes: 6 additions & 6 deletions rules/document-discoveries/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ Keeping Work Items as up-to-date as possible ensures that the information is rec

### How do you document changes?

Now, you might be wondering about the best approach for recording a change.
Now, you might be wondering about the best approach for recording a change.

Noting it down seems like a good idea, but the problem with that approach is that it quickly gets lost or forgotten about and isn't recorded in a regularly checked place.
Noting it down seems like a good idea, but the problem with that approach is that it quickly gets lost or forgotten about and isn't recorded in a regularly checked place.

Sending an email is an okay approach, but the information will quickly be lost, buried under hundreds of other emails, unseen by anyone who might need to see it later on. Additionally, the audit trail is poor since there is no consistent thread.
Sending an email is an OK approach, but the information will quickly be lost, buried under hundreds of other emails, unseen by anyone who might need to see it later on. Additionally, the audit trail is poor since there is no consistent thread.

The best method is for developers to **update the discussion thread of the Work Item** they're working on. Then, if an email is really needed, send a link to the Work Item.

Using the Work Item discussion provides several benefits to developers on the team, including:
Using the Work Item discussion provides several benefits to developers on the team, including:

::: good
Providing one source of truth
Expand Down Expand Up @@ -99,7 +99,7 @@ Provides proof of approval
| Subject: | Project - Work Item Update |
::: email-content

### Hi Bob,
### Hi Bob

As per our conversation, the primary button colour does not conform with the Northwind branding. The colour will be updated to #CC4141.
:::
Expand All @@ -117,6 +117,6 @@ Figure: Bad example - Sending an email to confirm updates to the work item
![Figure: Bad example - Moving a PBI to the backlog without documenting the decision](./images/Bad-example-Adding-and-Item-to-the-backlog.jpg "PBI Backlog")
:::

::: good
::: good
![Figure: Good example - Moving a PBI to the backlog and documenting the decision](./images/Good-example-Adding-and-Item-to-the-backlog.jpg "PBI Backlog")
:::
2 changes: 1 addition & 1 deletion rules/follow-up-effectively/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ To ensure you follow up on tasks, it is important to set up an action point so i

### The Tools

There are some okay tools like delayed send and follow up flags... but the our Top 10 gold standard tools are:
There are some OK tools like delayed send and follow up flags... but the our Top 10 gold standard tools are:

1. Email - Followupthen.com
2. Outlook | Schedule Send
Expand Down
10 changes: 5 additions & 5 deletions rules/forms-value/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ guid: 3d41f831-c7d7-4e80-81b1-2bd2a7f36a26
---
Microsoft Forms and Google Forms provide an invaluable way of collecting data from your employees, users and other stakeholders. It's important to understand if their experience of providing this feedback is a good or a bad one.

Therefore, create a last question where they rate the form's questions from their perspective. That way you've got metrics to make better forms in the future.
Therefore, create a last question where they rate the form's questions from their perspective. That way you've got metrics to make better forms in the future.

Let's take a look...

Expand All @@ -20,7 +20,7 @@ There are 2 steps to getting objective data about forms.

### 1 - Measure the value

The best way to measure value is simply to ask your users. Put a question at the bottom of your form and ask them to give it a rating out of 5.
The best way to measure value is simply to ask your users. Put a question at the bottom of your form and ask them to give it a rating out of 5.

![Figure: Add a question asking your users for the value of the form (make sure the question is always the same)](askthevalueofyourform.png)

Expand All @@ -34,12 +34,12 @@ However, simply asking the question is not enough. Most people will answer a for

In particular, new people are enthusiastic and want to give everything 5 out of 5. They are often surprised when they find out this isn't helpful

The general guidance should be to compare the value against previous entries. For example, the scale should be something like:
The general guidance should be to compare the value against previous entries. For example, the scale should be something like:

* Terrible - 1
* Poor - 2
* Okay - 3
* OK - 3
* Good - 4
* Outstanding - 5

If you educate the users about this, your data is going to be much more reflective of the actual value each form gives.
If you educate the users about this, your data is going to be much more reflective of the actual value each form gives.
2 changes: 1 addition & 1 deletion rules/implement-business-logic-in-middle-tier/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ Implementing business logic in stored procedures have the disadvantage of being

With the exception of some very heavy data oriented operations, it is excusable to use stored procedures to carry out some logic for performance reasons.

Triggers are even more difficult as their behaviour is event based.  It is okay to use triggers for non-functional/infrastructural features such as logging changes or maintain more complex relational integrity which cannot be enforced by a simple relationship.
Triggers are even more difficult as their behaviour is event based.  It is OK to use triggers for non-functional/infrastructural features such as logging changes or maintain more complex relational integrity which cannot be enforced by a simple relationship.

<!--endintro-->
6 changes: 3 additions & 3 deletions rules/make-complaints-a-positive-experience/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ When you get the call/email, how you respond can make or break the relationship.
If you need help with this, [learn how to take feedback/criticism (even if it’s not your fault)](/how-to-take-feedback-or-criticism/).
:::

If solving the issue(s) is within your power, you should action it (or put a plan into motion) right away. But this may not always be the case - maybe you're a developer and the customer is upset about an invoice. In that case...
If solving the issue(s) is within your power, you should action it (or put a plan into motion) right away. But this may not always be the case - maybe you're a developer and the customer is upset about an invoice. In that case...
3. **Conference in the appropriate resources**. While you have the client on the call, don't let them go

::: greybox
Okay, let's try and get this sorted right now. Is it okay with you if I bring in {{ RELEVANT PERSON }} to help work this out?
OK, let's try and get this sorted right now. Is it OK with you if I bring in {{ RELEVANT PERSON }} to help work this out?
:::

::: good
Expand All @@ -64,7 +64,7 @@ Someone will complain about what you do no matter how 'perfect' you are. That do

**Remember:** It's important to resolve a client's complaint because studies have shown that:

* For every customer that complains, there may be 26 others that will not tell you they are dissatisfied.
* For every customer that complains, there may be 26 others that will not tell you they are dissatisfied.
Of this 26:

* Up to 19 will not come back
Expand Down
Loading

0 comments on commit fd6dc71

Please sign in to comment.