All posts by smarc

What to Expect When Expecting Content Security Policy Reports

Content Security Policy (CSP) allows you to dictate a policy for content restrictions on a web site that is enforced by the browser. By setting a CSP header, can control the resources that are loaded when a visitor is viewing your website. The CSP spec allows you to build very specific policies for your site that can handle all of the different types of resources that a site might load. It is a valuable tool for protecting your site visitors.

In addition to blocking resources that violate the defined CSP, the CSP spec details a mechanism for sending reports of such violations. Monitoring these violations can help you ensure that your site is never serving content that violates your wishes whether those violations are the result of producer, developer, or hacker actions.

Source: What to Expect When Expecting Content Security Policy Reports

List Hard Drives using Command Prompt and PowerShell

List Hard Drives using Command Prompt & PowerShell in Windows 10

Source: List Hard Drives using Command Prompt and PowerShell

How the browser renders a web page – DEV

How the browser renders a web page

My thinking: if I’m going to build websites that are fast and reliable, I need to really understand the mechanics of each step a browser goes through to render a web page, so that each can be considered and optimised during development. This post is a summary of my learnings of the end-to-end process at a fairly high level.


A lot of this is based on the fantastic (and FREE!) Website Performance Optimization course by Ilya Grigorik and Cameron Pittman on Udacity. I’d highly recommend checking it out.

Also very helpful was the article How Browsers Work: Behind the scenes of modern web browsers by Paul Irish and Tali Garsiel. It’s from 2011 but many of the fundamentals of how browsers work remain relevant at the time of writing this blog post.

Ok, here we go. The process can be broken down into these main stages:

  1. Start to parse the HTML
  2. Fetch external resources
  3. Parse the CSS and build the CSSOM
  4. Execute the JavaScript
  5. Merge DOM and CSSOM to construct the render tree
  6. Calculate layout and paint

Source: How the browser renders a web page – DEV