Practicing and exploring

Test your knowledge and understanding by answering some questions, getting some hands-on practice, and exploring this chapter’s topics with deeper research.

Exercise 1.1 – Online material

If you have any issues with the code or content of this book, or general feedback or suggestions for me for future editions, then please read the following short article:

https://github.com/markjprice/web-dev-net10/blob/main/docs/ch01-issues-feedback.md.

One of the best sites for learning client-side web development is W3Schools, found at https://www.w3schools.com/.

A summary of what’s new with ASP.NET Core 10 can be found at the following link:

https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-10.0.

If you need to decide between ASP.NET Core web UIs, check this link:

https://learn.microsoft.com/en-us/aspnet/core/tutorials/choose-web-ui.

You can learn about ASP.NET Core best practices at the following link:

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/best-practices.

Exercise 1.2 – Practice exercises

The following practice exercises help you to explore the topics in this chapter more deeply.

How is this website so fast!?

If you care about the performance of your websites, instead of worrying about what the best web development framework to use is, learn about how the common web technologies like HTTP, HTML, CSS, and JavaScript work and how to optimize them. A deep understanding of this will provide 99% of the improvements.

As a quick introduction to what I mean, watch this 14-minute video by Wes Bos to learn how a commercial website selling 700,000 products is so fast, and note that you can use all the techniques regardless of the web development framework you use: https://www.youtube.com/watch?v=-Ln-8QM8KhQ.

Some of the techniques the website uses:

• Server-rendered HTML: “They are server-rendering all their HTML. They are not using any JavaScript framework.” ASP.NET Core MVC is optimized to do this, so you will see how to do server-rendered HTML in this book.
• Prefetching HTML: “They are also prefetching HTML.”
• CDN caching: “They are also using caching pretty aggressively.”
• Client caching with service worker: “They are caching it both on a CDN around the world, but they also are caching it in your browser using something called a service worker. And what that allows us to do is you can intercept requests with a service worker and then serve up the cached version. That’s especially helpful for offline.”
• Preloading assets: “These <link rel="preload"> tells the browser, hey, I’m going to need their logo, and these are all web fonts.”
• Critical CSS: “You’re not finding any link tags that load in CSS. What they’re doing here is they are loading their CSS in a style tag before you even get to the body. As soon as this HTML is rendered to the page, the browser already knows what CSS to apply to it, and you’re not going to get any weird page jank.”
• Largest Contentful Paint (LCP): “174 ms is good.” This is due to them using critical CSS.
• Fixed-size images: “They have fixed widths and heights for their actual images, and what that allows you to do is, if the browser doesn’t know how large an image is going to be, it’s going to give it zero pixels by zero pixels, and then it downloads and then it has to push down the content, that’s another re-render. But if you explicitly give it a spot, you don’t get any jank.”
• JavaScript: “They split up the JavaScript by page.”
• jQuery and YUI: “A wicked fast website does not matter what framework or whatever you’re using. You can be using 15-year-old tech.”

  I am considering adding a chapter about client-side web techniques like these to the next edition, even though they are not .NET-specific. Please give me feedback in the Discord channel or GitHub repository for the book.

Troubleshooting web development

It is common to have temporary issues with web development because there are so many moving parts. Sometimes, variations of the classic “turn it off and on again” can fix these!

1. Delete the project’s bin and release folders.
2. Restart the web server to clear its caches.
3. Reboot the computer.

Exercise 1.3 – Test your knowledge

Try to answer the following questions, remembering that although most answers can be found in this chapter, you should do some online research or code writing to answer others:

1. What was the name of Microsoft’s first dynamic server-side-executed web page technology, and why is it still useful to know this history today?
2. What are the names of two Microsoft web servers?
3. What are some differences between a microservice and a nanoservice?
4. What is Blazor?
5. What was the first version of ASP.NET Core that could not be hosted on .NET Framework?
6. What is a user agent?
7. What impact does the HTTP request-response communication model have on web developers?
8. Name and describe four components of a URL.
9. What capabilities does Developer Tools give you?
10. What are the three main client-side web development technologies, and what do they do?

Know your webbreviations

What do the following web abbreviations stand for, and what do they do?

1. URI
2. URL
3. WCF
4. TLD
5. API
6. SPA
7. CMS
8. Wasm
9. SASS
10. REST

Exercise 1.4 – Explore topics

Use the links on the following page to learn more details about the topics covered in this chapter:

https://github.com/markjprice/web-dev-net10/blob/main/docs/book-links.md#chapter-1---introducing-real-world-web-development-using-net.