About

Kurzes Intro zu mir: Bellotta Dario, 31 Jahre aus Frankfurt am Main. Hauptschwerpunkt ist bei mir die Webentwicklung und das eigentlich auch sowohl Front- als auch Backend. Suchmaschinenoptimierung ist meine zweite große Leidenschaft und Suchmaschinenwerbung sowie Social-Media-Marketing gehören auch dazu. Ich hatte die unterschiedlichsten Kunden, habe für Werbeagenturen und einen Online-Shop als Fullstack Developer gearbeitet. Ich expandiere momentan in den Bereich Grafikdesign, da dies gut mit der Webentwicklung zusammenpasst. Auch 3D Design mit Unity, Blender oder der Unreal Engine gefallen mir. Wie man sieht, ich bin sehr wissbegierig und lerne gerne neues dazu. Menschlich würde ich mich auch als angenehm bezeichnen. Ich wette bis hier hin liest keiner den Text.

Skills

HTML

CSS

JS

Ajax

PHP

SQL

Bootstrap

WordPress

Woocommerce

On Page SEO

OFF Page SEO

SEA

Google Analytics

Google Search Console

Google Tag Manager

Google Ads

Google MyBusiness / Maps

Google PageSpeed / Lighthouse

Schema.org / Rich Snippets

Facebook Business / Ads

Adobe Photoshop

Wordpress Developer Kit

Download

documentation preview

Blog

Dario Bellotta

Webdeveloper Code Snippets for your Website

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: @dario.evaristo.bellotta

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

<!-- 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

<!-- 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>

JQuery load more button

Without any frameworks or libraries. xcept from JQuery 😁

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".content").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".content:hidden").slice(0, 3).slideDown();
if($(".content:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
} }); })
</script>

<img class="content" src="Image01.png" />
<img class="content" src="Image02.png" />
<img class="content" src="Image03.png" />
<img class="content" src="Image04.png" />
<img class="content" src="Image05.png" />
<img class="content" src="Image06.png" />

<a href="#" id="loadMore">Load More</a>

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.

<!-- 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

<!-- 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

<!-- 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

<!-- 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

<!-- 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

/* 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

<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 \bMSIE !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

/* 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

<!-- 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

16. August 2022
Weiterlesen

Dario Bellotta

Freelancer Tools (as webdeveloper)

List of some freelancing tools I use as a webdeveloper.

Follow me on Instagram: @dario.evaristo.bellotta

For Developer:

Stackoverflow: Developer forum every dev uses, including me in daily basis. If you get stuck in your code – go to stackoverflow – they have the answer
MDBoostrap: Bootstrap framework for websites. I use the “WP Bootstrap Starter” for all of my WordPress websites. It also has some good pre-written code examples
Google Tools: There are a lot of great free to use tools from Google for developing

- Search Console: Always set this up for your website. If you use wordpress also install “Site Kit by Google”
- Analytics: Metrics for your website.Indispensable. If you use WordPress also install “Site Kit by Google”
- Pagespeed: Rates your website (desktop and mobile) from 0 to 100 for SEO. Following these steps will improve your website by far
- Test My Site: Checks your website for mobile devices, especially with a 4G connection

Dotcom Tools Website Speed Test: Best testing site I’ve seen so far for checking your website speed
Critical Path CSS Generator: Generates CSS code for avoiding render blocking. Put this code in your head and let your site load your CSS file at the bottom.
CSS Autoprefixer: Always paste your CSS Code into this tool to make sure you have all vendor prefixes, like the ones for Safari.
XML Sitemap Generator: Generate your sitemap and put it in your main root folder. And don’t forget to submit it in your Google Search Console.
Faviconit: Generates favicons in all sizes you need.
GZIP Compression Check: Check if your htaccess is set up correctly and GZIP compression is active.
Cloudways: One of the best hosting companies I’ve seen. Especially if you’re running an E-Shop and you have to scale your server up.
Cloudflare: Free to use CDN Network if your site has a lot of sessions from all over the world.

For Designer:

Canva.com: My choice for Social Media posts. I use it for Slides, Reels, TikTok, profile pictures, headers, website images, Social Media ads and more
ILoveImg: Mainly for compressing images. Always compress them for websites. You can also scale images quickly
Adobe Photoshop: What should I say? You know it
Adobe Dimension: Designing in 3D feels very smooth and easy with Dimension. Good for product mockups
Flaticon: A lot of Icons for your projects

General Tools:

Google Tools: Google Workspace has a lot of great general tools for working
- Drive: Share your files easily across all platforms
- Docs: Like Mircosoft Word only better as a web application
- Keep: Share your text across all devices
Language Tool: Check your English grammar before you release your text.

For Advertising:

Facebook Tools:
- Creator Studio: Official Instagram posting tool from Facebook, schedule, save as draft & post to Facebook.
- Facebook Ads Manager: Advertise on Instagram and Facebook. Don’t “boost post” on Instagram always use Ads Manager.
Google Tools: Away from Social Media you can use Google to advertise
- Merchants: For your E-Commerce business, set up a product feed an advertise on Google Shopping
- Ads: Google Ads has a variety of options to advertise, like Search Ads, Adsense Ads or YouTube.
- Tag Manager: Tag your website to track user behavior
- Keyword Planner: You have to have an AD active to use Keyword Planner nowdays
- Trends: See all search trends for google and get the hottest topics
Sistrix Hashtag Generator: Search for necessary keywords for your posts or campaigns
Sistrix Meta Snippets: Check or create your meta tags with this tool to ensure its length is good
Google Ranking Check Free: Check single keywords on your ranking in Google

YouTube Channel to follow:

Design Course: “I teach full stack development! Which means you will see tutorials regarding UI/UX, Frontend Dev, Backend Dev, Graphic Design and more!”
Google Chrome Developers: Official Google web developer channel
Freecodecamp.org: Most known YouTube Channel for developer

Last Update: July 21th 2022

31. Mai 2022
Weiterlesen

Socials

Redefine what's success for you 🤍 Made with Ca

I got lost inside my brain #frankfurt #ffm #hesse

just a quote from one of my favorite artists @that

darioevaristobellotta.de/kit 🧑‍💻 It's the

darioevaristobellotta.de/code for more code snippe

told by a therapist 🤍 Made with Canva Pro 🤍

Weitere anzeigen Auf Instagram folgen