These are all of my code snippets I post on Instagram to copy and paste.

If you like it you can leave me a follow on Instagram: @darioevaristobellotta

Async & Defer to not render block

“Async – means execute code when it is downloaded and do not block DOM construction during downloading process. Defer – means execute code after it’s downloaded and browser finished DOM construction and rendering process.” Source: stackoverflow.com

HTML - Click to Copy
<!-- JS files defer and async -->
<script src=""></script>
<script defer src=""></script>
<script async src=""></script>

Anonymize User IPs on Google Analytics

“When a customer of Universal Analytics requests IP-address anonymization, Analytics anonymizes the address as soon as technically feasible.” Source: support.google.com

JS - Click to Copy
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
<script>
var gaProperty = 'YOUR-ID';
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
 window[disableStr] = true;
}
function gaOptout() {
 document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
 window[disableStr] = true;
 alert('Google Analytics tracking has been disabled in your browser for this website.');
}
var gaOptOut='ga-disable-YOUR-ID';
if (document.cookie.indexOf(gaOptOut+'=true')>-1) window[gaOptOut]=true;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR-ID', { 'anonymize_ip': true });
</script>

Forcing a reload of your files

?v=X Its mainly used to take care of browser cache.
You can force a file to reload and not be stuck in cache.

HTML - Click to Copy
<!-- image example -->
<img src="folder/file.png?v=2" />

<!-- script example -->
<script src="js/files.js?v=3"></script>

<!-- stylesheet example -->
<link rel="stylesheet" href="css/file.css?v=4">

Preloading your Fonts

“The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.”

Source: developer.mozilla.org

HTML - Click to Copy
<!-- Preload Fonts -->
<link rel="preload" as="font" href="FIRST" type="font/otf" crossorigin="anonymous">
<link rel="preload" as="font" href="SECOND" type="font/ttf" crossorigin="anonymous">

Help Google crawling your site

“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”

Source: schema.org

JSON - Click to Copy
<!-- Schema.org -->
<script type="application/ld+json"> 
{ "@context" : "http://schema.org", "@type" : "LocalBusiness", 
"name" : "NAME", 
"image": "IMAGE", 
"email": "EMAIL", 
"url": "URL", 
"address" : { "@type" : "PostalAddress", 
"addressLocality" : "STREET", 
"postalCode" : "POSTALCODE", 
"addressCountry": "DE" 
} } 
</script>

Open Graph for Facebook sharing

“Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent). You can find them in the <head> section of a webpage. Any tags with og: before a property name are Open Graph tags.”

Source: ahrefs.com

HTML - Click to Copy
<!-- Open Graph protocol -->
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Link sharing on Twitter

“With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.”

Source: developer.twitter.com

HTML - Click to Copy
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

Selection: for text selection color

“The ::selection selector matches the portion of an element that is selected by a user.”

Source: w3schools.com

CSS - Click to Copy
/* text selection color */ 
::-moz-selection { 
color: #262626; 
background: #f2dcbf;
} 
::selection { 
color: #262626; 
background: #f2dcbf; 
}

Mod-Deflate and Mod-Gzip: for compression in your .htaccess

“The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network. The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network.”

Source: httpd.apache.org

Apache - Click to Copy
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch MSIE !no-gzip !gzip-only-text/html
</IfModule>

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

Webkit-Scrollbar: For a custom scrollbar

“Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar.”

Source: w3schools.com

CSS - Click to Copy
/* custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    background: #fff;
}
::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: #262626;
}

Theme-Color: For mobile interface color

“The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.”

Source: developer.mozilla.org

CSS - Click to Copy
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#HASH">

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#HASH">

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Last Update: September 08th 2022

Dario Evaristo Bellotta

Webdeveloper Code Snippets for your Website

Webdeveloper Code Snippets for your Website