From 8406d8815f9b9e10fedb3e9dddd182e518caf561 Mon Sep 17 00:00:00 2001 From: "Ulysses Maclaren [SSW]" <45545178+UlyssesMaclaren@users.noreply.github.com> Date: Tue, 1 Aug 2023 12:48:03 +1000 Subject: [PATCH 1/6] =?UTF-8?q?Update=20Rule=20=E2=80=9Cchatgpt-for-powerp?= =?UTF-8?q?oint/rule=E2=80=9D=20(#6202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” * Update Rule “chatgpt-for-powerpoint/rule” --- rules/chatgpt-for-powerpoint/rule.md | 43 +++++++++++++++++++--------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/rules/chatgpt-for-powerpoint/rule.md b/rules/chatgpt-for-powerpoint/rule.md index 75d730aaef4..3224779ca5f 100644 --- a/rules/chatgpt-for-powerpoint/rule.md +++ b/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 From 72f4aabae74c350a162b726e3a27a560137e8a91 Mon Sep 17 00:00:00 2001 From: "Nick Curran [SSW]" <132531112+ncn-ssw@users.noreply.github.com> Date: Tue, 1 Aug 2023 12:51:08 +1000 Subject: [PATCH 2/6] Update category 'Rules to Better .NET Projects' to include new ASP.NET Core migration rules. (#6204) --- .../software-development/rules-to-better-net-projects.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/categories/software-development/rules-to-better-net-projects.md b/categories/software-development/rules-to-better-net-projects.md index a2e4cb97201..7b79fff079e 100644 --- a/categories/software-development/rules-to-better-net-projects.md +++ b/categories/software-development/rules-to-better-net-projects.md @@ -8,6 +8,9 @@ index: - dotnet-upgrade-for-complex-projects - migrate-from-system-web-to-modern-alternatives - migrate-from-edmx-to-ef-core +- know-how-to-migrate-global-asax-to-asp-net-core +- know-how-to-migrate-owin-toasp-net-core +- know-how-to-migrate-web-config-to-asp-net-core - do-you-have-a-consistent-net-solution-structure - do-you-name-your-startup-form-consistently - do-you-use-solution-folders-to-neatly-structure-your-solution From 90962eddc018fa8f1d54010ff4ff27f4077f3e44 Mon Sep 17 00:00:00 2001 From: "Harry Ross [SSW]" Date: Tue, 1 Aug 2023 13:05:09 +1000 Subject: [PATCH 3/6] Added rule "Do you know how to fetch data in Next.js?" (#6200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added manage bundle size rule * Completed manage bundle size rule * Fixed guid and uri * Fixed frontmatter spacing * Update rules/manage-bundle-size/rule.md Co-authored-by: Jack Pettit [SSW] <57518417+JackDevAU@users.noreply.github.com> * Made link adhere to SSW Rules * Added disclaimers for use of depcheck and bundlephobia * Wrote "Best way to fetch data in Next.js" * Changed API route docs * Made slight modifications, added to correct category * Fixed URI --------- Co-authored-by: Tiago Araújo [SSW] Co-authored-by: Jack Pettit [SSW] <57518417+JackDevAU@users.noreply.github.com> --- categories/websites/rules-to-better-nextjs.md | 1 + rules/fetch-data-nextjs/rule.md | 165 ++++++++++++++++++ 2 files changed, 166 insertions(+) create mode 100644 rules/fetch-data-nextjs/rule.md diff --git a/categories/websites/rules-to-better-nextjs.md b/categories/websites/rules-to-better-nextjs.md index f035329d5d0..5f4f8ab30fc 100644 --- a/categories/websites/rules-to-better-nextjs.md +++ b/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 diff --git a/rules/fetch-data-nextjs/rule.md b/rules/fetch-data-nextjs/rule.md new file mode 100644 index 00000000000..7775894ae1e --- /dev/null +++ b/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. + + + +## 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 ( +
+

{props.post.title}

+

{props.post.body}

+
+ ) +} + +``` + +### 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 ( +
+ {props.posts.map(post => ( +
+

{post.title}

+

{post.body}

+
+ ))} +
+ ) +} +``` + +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. From 7382a14a47c61e97168b2a5aae33e7faa6181f2a Mon Sep 17 00:00:00 2001 From: "Seth Daily [SSW]" <130118701+sethdailyssw@users.noreply.github.com> Date: Tue, 1 Aug 2023 13:17:08 +1000 Subject: [PATCH 4/6] New rule: google-maps-profile (#6188) * Create rule.md * Update rules-to-better-offices.md * Update rules-to-better-branding.md --- ...les-to-better-social-media-for-business.md | 1 + categories/others/rules-to-better-offices.md | 1 + rules/google-maps-profile/rule.md | 35 +++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 rules/google-maps-profile/rule.md diff --git a/categories/marketing-and-video/rules-to-better-social-media-for-business.md b/categories/marketing-and-video/rules-to-better-social-media-for-business.md index 864d442b1a6..8eedbec802a 100644 --- a/categories/marketing-and-video/rules-to-better-social-media-for-business.md +++ b/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 diff --git a/categories/others/rules-to-better-offices.md b/categories/others/rules-to-better-offices.md index c84d6b9fb9f..999e9c4cd69 100644 --- a/categories/others/rules-to-better-offices.md +++ b/categories/others/rules-to-better-offices.md @@ -12,6 +12,7 @@ index: - bring-water-to-guests - cultural-exchange - desk-setups +- google-maps-profile --- diff --git a/rules/google-maps-profile/rule.md b/rules/google-maps-profile/rule.md new file mode 100644 index 00000000000..028245ef44b --- /dev/null +++ b/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? + + + +### 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. From 516f972c3a398c0a1c7e60db51c9bd7514d8da2e Mon Sep 17 00:00:00 2001 From: "Charles Vionnet [SSW]" <46954368+cvionnet@users.noreply.github.com> Date: Tue, 1 Aug 2023 14:14:26 +1000 Subject: [PATCH 5/6] Add URI to a new rule (#6203) do-you-know-how-to-render-html-strings --- .../websites/rules-to-better-website-development-asp-net.md | 1 + 1 file changed, 1 insertion(+) diff --git a/categories/websites/rules-to-better-website-development-asp-net.md b/categories/websites/rules-to-better-website-development-asp-net.md index be04ee2392e..0c83e337300 100644 --- a/categories/websites/rules-to-better-website-development-asp-net.md +++ b/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. From 0e9143bd970f82a0b838fb1da198b178a532d0c8 Mon Sep 17 00:00:00 2001 From: "Nick Curran [SSW]" <132531112+ncn-ssw@users.noreply.github.com> Date: Tue, 1 Aug 2023 14:19:08 +1000 Subject: [PATCH 6/6] =?UTF-8?q?Update=20Rule=20=E2=80=9Cdo-you-know-how-to?= =?UTF-8?q?-render-html-strings/rule=E2=80=9D=20(#6201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rules/do-you-know-how-to-render-html-strings/rule.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/rules/do-you-know-how-to-render-html-strings/rule.md b/rules/do-you-know-how-to-render-html-strings/rule.md index 81778062368..2ca3a879aa5 100644 --- a/rules/do-you-know-how-to-render-html-strings/rule.md +++ b/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. -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. ::: \ No newline at end of file