Merge branch 'main' into ncn-ssw-link-asp-net-core-migration-rules

categories/marketing-and-video/rules-to-better-social-media-for-business.md

@@ -22,6 +22,7 @@ index:
 - create-friendly-short-urls
 - share-every-blog-post
 - post-using-social-media-management-tools
+- google-maps-profile
 - do-your-presentations-promote-online-discussion
 - do-you-share-when-you-upgrade-an-application
 - weed-out-spammers

categories/others/rules-to-better-offices.md

@@ -12,6 +12,7 @@ index:
 - bring-water-to-guests
 - cultural-exchange
 - desk-setups
+- google-maps-profile
 
 ---
 

categories/websites/rules-to-better-nextjs.md

@@ -6,6 +6,7 @@ uri: rules-to-better-nextjs
 index:
 - use-nextjs
 - the-best-package-manager-for-react
+- fetch-data-nextjs
 - dynamically-load-components
 - use-typescript
 - do-you-use-these-useful-react-hooks

categories/websites/rules-to-better-website-development-asp-net.md

@@ -40,6 +40,7 @@ index:
 - do-you-use-the-best-web-ui-libraries
 - use-windows-integrated-authentication
 - do-you-log-usage
+- do-you-know-how-to-render-html-strings
 
 ---
 If you still need help, [visit our Web Application Development consulting page](https://www.ssw.com.au/ssw/Consulting/Web-Applications.aspx) and book in a consultant.

rules/chatgpt-for-powerpoint/rule.md

@@ -19,12 +19,19 @@ Here’s a great prompt template for doing both! Feel free to play around with t
 1. Select the **Smart Slides** plugin from the plugin store
 
 ::: greybox
-You are an expert presentation writer and PowerPoint expert.\
-Write a PowerPoint presentation on {TOPIC}.\
-Each slide should have a title.  \
-The content on each slide should be in bullet point format.\
-Don't give me advice on what to talk about on each slide, instead give me the actual content I can use.\
-1st, ask for the {TOPIC}
+You are an expert presentation writer and PowerPoint expert.  
+Write a PowerPoint presentation on {TOPIC}.  
+Each slide should have a title.  
+The content on each slide should be in bullet point format.  
+Don't give me advice on what to talk about on each slide, instead give me the actual content I can use.  
+
+Target audience is business stakeholders with some technical background.  
+Make sure the objective or pain that is being worked on is clear.  
+Make sure the recommendations and next steps are clear.  
+End with a Q&A.  
+
+1st, ask for the {TOPIC}  
+Then, ask any relevant questions to get more context.  \
 :::
 
 ::: good
@@ -34,14 +41,22 @@ Figure: Prompt Template for creating a PowerPoint presentation
 ### If you're on GPT3 (or you want to add more custom specs)
 
 ::: greybox
-You are an expert presentation writer and PowerPoint expert.\
-Write a PowerPoint presentation on {TOPIC}.\
-Each slide should have a title that this is colour: RGB(204, 65, 65).  \
-The content on each slide should be in bullet point format.\
-Don't give me advice on what to talk about on each slide, instead give me the actual content I can use.\
-Then create a VBA script to create the PPT including slide titles and all content on each slide.\
-Do not save the PPT.\
-1st, ask for the {TOPIC}
+You are an expert presentation writer and PowerPoint expert.  \
+Write a PowerPoint presentation on {TOPIC}.  \
+Each slide should have a title that this is colour: RGB(204, 65, 65).   \
+The content on each slide should be in bullet point format.  \
+Don't give me advice on what to talk about on each slide, instead give me the actual content I can use.  
+
+Target audience is business stakeholders with some technical background.  \
+Make sure the objective or pain that is being worked on is clear.  \
+Make sure the recommendations and next steps are clear.  \
+End with a Q&A.  \
+\
+Then create a VBA script to create the PPT including slide titles and all content on each slide.  \
+Do not save the PPT.  \
+\
+1st, ask for the {TOPIC}  
+Then, ask any relevant questions to get more context.  
 :::
 
 ::: good

rules/do-you-know-how-to-render-html-strings/rule.md

@@ -8,13 +8,13 @@ authors:
 created: 2023-07-28T07:23:06.201Z
 guid: 521afe97-18c3-43bc-8ada-f3782960b10f
 ---
-To prevent cross-site scripting (XSS) attacks, HTML encoding is typically applied to restrain the browser from interpreting HTML strings as code. XSS attacks can occur when untrusted data is rendered on the browser without proper sanitization, thus potentially exposing the system to malicious scripts.
+[Cross-site scripting (XSS) attacks](https://en.wikipedia.org/wiki/Cross-site_scripting) occur when untrusted data is rendered on the browser without proper sanitization, thus potentially exposing the system to malicious scripts. To prevent XSS attacks, HTML encoding is typically applied to prevent the browser from interpreting HTML strings as code.
 
-However, this approach can sometimes cause confusion when an application requires to output raw HTML content that is already HTML encoded.
+However, this approach can cause confusion when an application needs to output content that is already HTML encoded.
 
 <!--endintro-->
 
-To solve this problem, the `IHtmlString` interface in .NET Core can be used to represent an HTML content that is pre-encoded and should not be encoded again.
+To solve this problem, the [`IHtmlString`](https://learn.microsoft.com/en-us/dotnet/api/system.web.ihtmlstring) interface in .NET Core can be used to represent HTML content that is pre-encoded and should not be encoded again.
 This is to prevent double encoding, which can distort the original HTML content and cause it to display incorrectly on a web page.
 
 ```cs
@@ -36,7 +36,7 @@ Figure: Good example - HTML tags using IHtmlContent have been treated as safe HT
 :::
 
 ::: info  
-You should only use IHtmlString when you are sure that the string doesn't contain any potentially harmful script tags. When dealing with user-provided content or content from an untrusted source, always ensure to sanitize or validate the HTML before rendering it.
+You should only use IHtmlString when you are sure that the string doesn't contain any potentially harmful script tags. When dealing with user-provided content or content from an untrusted source, always sanitize or validate the HTML before rendering it.
 :::
 
 

rules/fetch-data-nextjs/rule.md

@@ -0,0 +1,165 @@
+---
+type: rule
+archivedreason: 
+title: Do you how to fetch data in Next.js?
+guid: df355ce6-47ab-461d-9ddc-d3216dc433b5
+uri: fetch-data-nextjs
+created: 	2023-07-28T06:34:51Z
+authors:
+- title: Harry Ross
+  url: https://www.ssw.com.au/people/harry-ross
+related:
+- use-nextjs
+---
+
+Next.js is great, as it gives you the ability to run code on the server-side. This means there are now new ways to fetch data via the server to be passed to Next.js app. Next.js also handles the automatic splitting of code that runs on the server and the client, meaning you don't have to worry about bloating your JavaScript bundle when you add code that only runs on the server.  
+
+<!--endintro-->
+
+## Server Side Fetching
+
+There are three primary ways with the Next.js Pages Router to fetch data on the server:
+
+1. Static site generation (SSG) with `getStaticProps`
+2. Hybrid static site generation with incremental static regeneration (ISR) enabled in `getStaticProps` 
+3. Server-side data fetching with `getServerSideProps`
+
+### getStaticProps
+
+We can develop a staticly generated site in Next.js by using `getStaticProps`. Having a statically generated site is great for SEO, as it makes it much easier for Google to index your site compared to a site with complex JavaScript logic, which is harder for web crawlers to understand. Next.js will run the code inside the `getStaticProps` method when you run `npm build`, and generate associated static HTML or JSON data. 
+
+For example, using dynamic routing we can create a static page to show post data based on the URL: 
+
+```tsx
+// pages/[slug].tsx
+
+export const getStaticProps = ({ params }) => {
+  const id = params.slug;
+  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
+  const post = await res.json();
+
+  return {
+    props: { post }
+  };
+}
+
+export default function Page(props) {
+  return (
+    <div>
+      <h2>{props.post.title}</h2>
+      <p>{props.post.body}</p> 
+    </div>
+  )
+}
+
+```
+
+### Incremental Static Regeneration (Hybrid)
+
+Server-side generation is great for SEO, however if we have a data source that may change between builds, we may need to regenerate the static data generated at build time. With incremental static regeneration (ISR), we can add an expiry time for static data, and Next.js will automatically refetch the data if the expiry time has been reached. However, this will not block the current request where it has noticed that the data has expired with a long loading time - it will fetch the data only for the next request.
+
+```tsx
+
+export const getStaticProps = () => {
+  const res = await fetch(`https://jsonplaceholder.typicode.com/comments`);
+  const comments = await res.json();
+
+  return {
+    props: { comments },
+    revalidate: 60
+  };
+}
+
+```
+
+This means that if 60 seconds or more has passed after the last time `getStaticProps` was run and the user makes a request to the page, it will rerun the code inside getStaticProps, and render the newly fetched data for the next page visitor.  
+
+### getServerSideProps
+
+`getServerSideProps` allows for server-side fetching of data on each request from the client, which makes it great for fetching of dynamic data. It can also be used for secured data, as the code within the function only runs on the server. 
+
+The below example shows an example of how we can use `getServerSideProps` to fetch data. Upon each user's request, the server will fetch the list of posts and pass it as props to the page.  
+
+```tsx
+// pages/index.tsx
+
+export const getServerSideProps = async (context) => {
+  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
+  const posts = await res.json();
+
+  return { props: { posts } };
+}
+
+export default function Page(props) {
+  return (
+    <div>
+      {props.posts.map(post => (
+        <div>
+          <h2>{post.title}</h2>
+          <p>{post.body}</p> 
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+This is great for dynamic data that may not be best suited for `getStaticProps` such as fetching from a database or an API route with data that changes often. 
+
+The `context` parameter also has a lot of useful information about the request, including the request path, cookies sent from the client, and more that can be found on the [official Next.js documentation](https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#context-parameter).
+
+You can use [https://next-code-elimination.vercel.app/](https://next-code-elimination.vercel.app/) to verify what code is sent to the client when using `getServerSideProps`. 
+
+
+## Client Side Fetching
+
+If you want to fetch secured data from a component (not a page) without exposing confidential information to the user (e.g. keys, IDs), the best way to do this is to create a basic API route to fetch this data, which allows for storage of sensitive information on the server, unable to be exposed to the client. 
+
+This would be written in the component like so:
+
+```tsx
+
+const Component = () => {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    fetch("/api/your-api-route")
+      .then(res => res.json())
+      .then(data => {
+        setData(data)
+      })
+  }, [])
+
+  return (
+    <> ... </>
+  )
+}
+
+
+```
+
+Then place a file in the /pages/api directory named with the required API route path (i.e. `pages/api/{{ API_ROUTE_HERE }}.ts`):
+
+```ts
+// pages/api/your-api-route.ts
+
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method == "GET") {
+    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
+    const data = await res.json();
+
+    res.status(200).send(data);
+  } else {
+    res.status(405).json({ error: "Unsupported method" });
+  }
+}
+```
+
+This is a great workaround for the limitation of only being able to use the above server-side fetching functions at a page-level - as it allows for server-side fetching from components. However, keep in mind that this may result in performance impacts from blocking calls to API routes. 
+
+This is also a great way to reduce the occurrence of CORS errors, as you can proxy API data through a simple Next.js API route. 

rules/google-maps-profile/rule.md

@@ -0,0 +1,35 @@
+---
+type: rule
+title: Do you make your Google Maps profile look awesome?
+uri: google-maps-profile
+authors:
+  - title: Seth Daily
+    url: https://www.ssw.com.au/people/seth-daily
+related: null
+created: 2023-07-30
+archivedreason: null
+guid: d60a52fb-9b90-4abf-812e-0696ec4697c3
+---
+
+Ever landed on a business's Google Maps profile only to find scant information, low quality images, or outdated contact details? If so, you'll have probably felt some distaste. You'll also understand the importance of creating an impressive and informative Google Maps profile. So, what's the best way to do that?
+
+<!--endintro-->
+
+### Compelling Images
+Images are the first thing that someone looks at when clicking on a Google Maps listing. High-resolution photos make your profile appealing, and can be the difference between someone contacting you or bouncing from your page. These could include images of your products, services, team, or business premises.
+
+1. Take high quality pictures - This is the most important part. If your images are blurry or low resolution, viewers immediately start off on the wrong foot with you.
+2. Take pictures of the building - Google Maps is full of fake businesses and outdated listings. Having images of the exterior of the building confirms quickly to somebody clicking on your listing that you are legitimate.
+3. Add images of interesting features - The cherry on top is to add pictures of interesting features of the office that make it seem personable.
+
+
+### Profile Information
+Make sure your business information is up to date. The important fields are:
+
+* Business name
+* Address
+* Contact information
+* Business hours
+
+### Respond to Reviews
+It shows a commitment to customer satisfaction if you respond to reviews (especially negative ones). It's important to periodically respond to reviews so that anybody scanning your profile sees that activity.