In this post, I describe how to use CSS to automatically remove orphans from the end of paragraphs or text blocks. An orphan is a single word that sits on its own at the bottom of a paragraph and should be avoided if possible. Resolution To automatically remove orphans using CSS, use the text-wrap property with the value pretty , e.g. p {     text-wrap : pretty ; } Orphans are now automatically removed:  This paragraph of text is long enough to wrap onto two lines and the last word is no orphan . Related Links - You can check browser support here: https://caniuse.com/?search=text-wrap%3A%20pretty

In this post, I describe how to check for empty string in the SELECT statement in SQL. Resolution To check for an empty string in the SELECT statement in SQL, use ISNULL and NULLIF: SELECT ISNULL ( NULLIF ( s . [Name] , '' ), 'None' ) [Name] FROM [Sales] . [Store] s In this example. if the Store Name is empty, NULLIF will return null. If NULLIF returns null, ISNULL will show the value 'None'.

In this post, I describe two tools you can use to analyze your Group Policy objects. They serve as an alternative to the Save Report... function built into the Group Policy Management Console which is very limited. Issue If you want to analyze or run reports on your Group Policy objects, you can use the Group Policy Management Console user interface or the Save Report... function but this can be very slow and inefficient, particularly when auditing lots of Group Policy settings. Resolution Free GPO Analyzer Tool CENTREL Solutions has produced a C# data model API which allows you to access your GPO settings and analyse them more easily, either in PowerShell or in .NET code: You can download this tool for free here: Group Policy Report API for C#.NET and PowerShell XIA Configuration CENTREL Solutions has also produced a documentation tool called XIA Configuration which includes support for detailed GPO settings: You can run reports to audit GPO settings across all your GPOs at once: You

In this post, I describe how you can apply a box shadow (or drop shadow) to an element which also has the clip-path style. Issue If you add the box-shadow style to an element with clip-path, the shadow does not appear: You can deduce the clip-path style is the reason by toggling this style on and off. Resolution To add a drop shadow to an element which also has the clip-path style, simply wrap that element in another element: < div class ="hexagon-wrapper">     < div class ="hexagon"> Hexagon </ div > </ div > Then apply a drop-shadow filter to that parent element: .hexagon-wrapper {     filter : drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)) ; } To apply multiple shadows, you can add more drop-shadow filters: .hexagon-wrapper {     filter : drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)) drop-shadow(-1px 0 3px rgba(0, 0, 0, 1)) ; } Related Posts Thanks to Chris Coyier for his excellent post on this subject: -  https:/

In this post, I describe how to fix an issue whereby an SD card does not automatically appear in Finder on a Mac after you insert it. Cause If you have a Mac with Apple Silicon, you have to approve new SD cards that you connect to it.  The following prompt should appear however it was flashing up and disappearing before I could press Allow.  Resolution To resolve the issue:  - Open System Settings - Click Privacy & Security in the left hand sidebar - In the right hand pane, scroll down to Allow accessories to connect  and change the drop down to Automatically When Unlocked The SD card should now appear in Finder when it is inserted Related Links - Allow accessories to connect (Apple)

In this post, I describe how to fix: " Encouraging accidental clicks: Layout " on blogspot.com (blogger.com) sites. Cause If you received an email from Google stating: " We’ve found a high volume of policy violations on your site ( blogspot.com ), which is not in compliance with the  AdSense programme policies . As a result, Google intends to restrict all ad serving on this site on 1 Dec 2023. The following issues were found on your site: Encouraging accidental clicks: Layout" Resolution It seems this was a mistake from Google which has now been resolved as the policy violation warning has disappeared from Google AdSense. Others have had the same issue and the warning has gone for them too: https://support.google.com/adsense/thread/242015746?hl=en&msgid=242037329

In this post, I describe how to fix: "Intention to restrict Google ad serving on your site" on blogspot.com (blogger.com) sites. Cause If you received an email from Google stating the above and: " We’ve found a high volume of policy violations on your site ( blogspot.com ), which is not in compliance with the  AdSense programme policies . As a result, Google intends to restrict all ad serving on this site on 1 Dec 2023." The following issues were found on your site: Encouraging accidental clicks: Layout" Resolution Please see my other post for the resolution: Encouraging accidental clicks: Layout blogger blogspot.com

In this post, I describe how to reduce the impact of third-pary code such as Google Tag Manager (gtag) and Google Analytics. This can lead to a longer Largest Contentful Paint (LCP) which can cause Google Search Console Core Web Vitals to report "LCP issue: longer than 2.5s" and URLs as either "poor" or "need improvement". Cause The "reduce the impact of third-pary code" message can appear when you run PageSpeed Insights or Lighthouse within Google Chrome on a page which includes the Google Tag (gtag.js).  I found that my performance score would still be negatively impacted even if I used async or defer in the script tag which loaded the Google Tag. I tested removing the Google Tag completely and my score improved to 100 so I knew the Google Tag was the cause. Resolution To resolve the issue, I set a timeout then loaded the Google Tag Manager after the timeout, in this case 3,000 milliseconds later: window.setTimeout(function () { ( function (w,

In this post, I describe how to fix an issue I had getting the link tag media attribute with min-width to work correctly. Cause Despite specifying a min-width of 500px, the link tag was still preloading the image even below a screen width of 500px.  The cause of the problem turned out to be the placement of my link tag in my HTML. Resolution The resolution turned out to be very simple.  I had inadvertently placed the link tag above my viewport meta tag: < meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> To resolve the issue, I moved my link tag below my viewport meta tag:     < meta name ="viewport" content ="width=device-width, initial-scale=1.0" />         < link rel ="preload"           href ="bg-image-wide.png"           as ="image"           media ="(min-width: 500px)" />

In this post, I describe how to defer non-critical CSS in ASP.NET without getting the error: Too many characters in character literal Cause This error can occur when you copy the suggested code from this  defer non-critical CSS page into an ASP.NET page. < link rel ="preload" href ="styles.css" as ="style" onload =" this.onload=null;this.rel='stylesheet' "> < noscript >< link rel ="stylesheet" href ="styles.css"></ noscript > Resolution I used a script tag to load the CSS instead of a link tag:      < script >         var link = document.createElement( "link" );         link.rel = "stylesheet" ;         link.href = "/css/font-awesome.css" ;         document.head.appendChild(link);     </ script > You may also wish to add a noscript tag just in case scripts are disabled:      < noscript >         < link rel ="s

In this post, I describe how to add support for a .webp file in IIS and ASP.NET to fix the error: "HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map." Cause This error occurs because I'm trying to access an image in WebP format on a site in IIS or ASP.NET which does not have the .webp MIME type added. Resolution ASP.NET To resolve the error in ASP.NET, add the following to web.config:          < system.webServer >              < staticContent >                                   < mimeMap   fileExtension =".webp"   mimeType ="image/webp"   />              </ staticContent >          </ system.webServer > IIS To resolve the error in IIS Manager: - Open IIS - Go to your site then double click MIME Types : - Press Add...  under Actions in the top right: - Enter .webp as the F

In this post, I describe how to get and set uploadReadAheadSize in IIS to fix the error: "An unknown error occurred while processing the request on the server. The status code returned from the server was: 413" Cause This error occurred after I created a self-signed SSL certificate and tried to access a site in IIS over HTTPS. Error code 413 means "Request Entity Too Large". Resolution To resolve the issue, I increased the uploadReadAheadSize in IIS as follows: - Open IIS - Select your site in the treeview on the left - Open Configuration Editor : - Open the Section drop down, expand system.webServer then select serverRuntime : - Here you can check your current uploadReadAheadSize and set a new value in bytes between 0 and 2147483647 ( more information from Microsoft ) - Click outside uploadReadAheadSize then press Apply in the top right to save your changes Error 413 should now be resolved. Related Posts - NET::ERR_CERT_WEAK_SIGNATURE_ALGORITHM - IIS SSL Certifi

In this post, I descibe how to fix the error: NET::ERR_CERT_WEAK_SIGNATURE_ALGORITHM which can occur after you create a self-signed SSL certificate for an HTTPS binding in an IIS web site when you try to access that site in a modern browser such as Chrome or Edge: This is a follow up to my previous post: Mismatched Address certificate error - HTTPS localhost IIS Cause If you followed the steps in my previous post, the certificate is created with the certificate signature algorithm PKCS #1 SHA-1 With RSA Encryption : In 2017, SHA-1 was proven insecure and thus Chrome and Edge flag it as not secure. Resolution The New-SelfSignedCertificate cmdlet includes a HashAlgorithm parameter which can be set to SHA-256 .  This can easily be added to the PowerShell script from my previous post as follows:  $rootcertname = "ROOT" $certname = "localhost"   # Create the root certificate $rootcert = New-SelfSignedCertificate `                 -Type "Custom&q