What is been used for ‘normal websites’ like a gym, a tattoo studio or a portfolio?
WordPress or other CMS like Typo3 or Joomla but mainly WordPress
CSS Frameworks mainly Bootstrap or other similar like Tailwind
JQuery as JavaScript libraries
Or just Vanilla Websites without a CMS only Bootstrap and JQuery but it’s not that popular
No Code Websites there are a lot of no code websites too with as example WordPress + Elementor or with Wix.com but i wouldn’t recommend to do it
* WordPress is used in 40% -45% of all the websites, Joomla in 2% – 3%, Drupal in 1% – 2%, Magento in 1% – 2%, Wix in 1% – 2%, Sqaurespace in 1% – 2%, TYPO3 in 1%
We make differences in Front and Backend Development
Frontend = HTML, CSS, JS (everything that works on the user side) React.js, Vue.js Angular,js and so on
Backend = PHP, MySQL, JSON etc (everything that works on the server) Node.js, Next.js, Nest.js and so on
Vanilla Websites
I mentioned vanilla websites in the first section it’s mainly just a combination of PHP, Bootstrap and JQuery without anything but its not that popular anymore. For a NFT Website for a friend of mine as example I did it vanilla so there are some usecases for it.
You just have to replace your <title> aswell as your <meta name=”description”> in your header.php located in: /wp-content/themes/your-theme/header.php with this code:
<title><?php
$meta_title = get_post_meta(get_the_ID(), '_yoast_wpseo_title', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_title)) {
$meta_title = get_the_title();
}
echo $meta_title;
?></title>
<meta name="description" content=" <?php
$meta_description = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_description)) {
$meta_description = get_the_excerpt();
}
echo $meta_description;
?>
"/>
<!-- Open Graph protocol -->
<meta property="og:url" content="<?php echo $url ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $meta_title; ?>">
<meta property="og:description" content="<?php echo $meta_description; ?>">
<meta property="og:image" content="
<?php
$social_image = get_post_meta(get_the_ID(), '_yoast_wpseo_opengraph-image', true);
// If the social image is not set, you can use a default fallback
if (empty($social_image)) {
$social_image = 'your-backup-image.png';
}
echo $social_image;
?>
">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta property="twitter:url" content="<?php echo $url ?>">
<meta name="twitter:title" content="<?php echo $meta_title; ?>">
<meta name="twitter:description" content=" <?php echo $meta_description; ?>">
<meta name="twitter:image" content="<?php echo $social_image; ?>">
It should look like this:
now you can edit the meta title, the meta description and the OG Image for sharing inside your wordpress pages with YOAST SEO Plugin. Just scroll to the bottom of your pages or blog posts.
Admin Backend -> Pages -> Edit -> Scroll down to “Yoast Seo Plugin”
Admin Backend -> Posts -> Edit -> Scroll down to “Yoast Seo Plugin”
and there you can edit the title, the description and the image
The URL will be inserted automatically, and for a backup image, you can substitute ‘your-backup-image.png’ in the provided code with the URL of your backup image.
First you need to get the permalink of your current page.
<?php
// Get the current post ID
$post_id = get_the_ID();
// Get the current post permalink
$post_permalink = get_permalink($post_id);
// Encode the post permalink for Twitter
$encoded_permalink = urlencode($post_permalink);
?>
With your current URL you just need this HTML code for twitter sharing
<a href="https://twitter.com/intent/tweet?url=<?php echo $encoded_permalink; ?>" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-x-twitter"></i>Share on X (Twitter)
</a>
and optionally the following codes for LinkedIn sharing
To insert this code into your pages you need to copy this code with the social media buttons you want to have into XYZ PHP Code.
1. Add new PHP code snippet
2. Insert the code with your chosen social media buttons
Finally you can add this shortcode into you pages where you want the share buttons to be
How to insert this code into your blog posts
You need to insert it into /wp-content/themes/your-theme/single.php
How to get the perfect meta data for your links:
For your link url, the title and the image to appear correctly you now need the Yoast SEO Plugin and the right OG meta data.
In your /wp-content/themes/your-theme/header.php you need to insert this code
the code is:
<title><?php
$meta_title = get_post_meta(get_the_ID(), '_yoast_wpseo_title', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_title)) {
$meta_title = get_the_title();
}
echo $meta_title;
?></title>
<meta name="description" content=" <?php
$meta_description = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_description)) {
$meta_description = get_the_excerpt();
}
echo $meta_description;
?>
"/>
<!-- Open Graph protocol -->
<meta property="og:url" content="<?php echo $url ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $meta_title; ?>">
<meta property="og:description" content="<?php echo $meta_description; ?>">
<meta property="og:image" content="
<?php
$social_image = get_post_meta(get_the_ID(), '_yoast_wpseo_opengraph-image', true);
// If the social image is not set, you can use a default fallback
if (empty($social_image)) {
$social_image = '/wp-content/uploads/2023/06/Dario-Evaristo-Bellotta_Open-Graph01.png';
}
echo $social_image;
?>
">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta property="twitter:url" content="<?php echo $url ?>">
<meta name="twitter:title" content="<?php echo $meta_title; ?>">
<meta name="twitter:description" content=" <?php echo $meta_description; ?>">
<meta name="twitter:image" content="<?php echo $social_image; ?>">
now you can edit the meta title, the meta description and the OG Image for sharing inside your wordpress pages with YOAST SEO Plugin. Just scroll to the bottom of your pages.
And for the image you go to “social” tab and insert there the image
How install Fontawesome.com for the sharing icons:
To install the sharing icons you just need to put this code into your /wp-content/themes/your-theme/header.php
500ml of Whey Protein (from DM, a German drugstore – dm.de/sportness..)
Two eggs (I prefer the pre-cooked ones with color)
Current supplements: Vitamin D, Omega 3, Curcumin, and Prebiotics (occasionally creatine)
A glass of himalayan salt water with 2 tablespoons of apple cider vinegar
This regimen provides me with 40g of protein, all essential amino acids, and notably, L-tryptophan (Note: L-tryptophan as a supplement is not recommended; it’s best obtained naturally).
Yoga/Fitness: 20 minutes of meditation (with vagus nerve stimulation practices), followed by daily prayer. On Mondays, Tuesdays, Thursdays, and Fridays, I engage in a 30-minute home workout.
Drinking: Throughout the day, I exclusively consume water and various teas, including black tea, mate tea, green tea, peppermint tea, chamomile tea, nettle tea, rosehip tea, and ginger tea, often with a hint of lemon.
This adds another 40g of protein, bringing my daily total to 80g.
Night (30 minutes before bed):
One banana with cumin for a good night’s sleep
_ _
Protein:
Protein is essential for body function, aiding in tissue repair, immune support, and maintaining skin and hair health. Adults generally need around 0.8 grams per kilogram of body weight daily, but active individuals may require more. Distributing protein intake throughout the day with sources like lean meats, eggs, and plant-based options ensures a steady supply of amino acids. This balanced approach supports overall health, while both inadequate and excessive protein intake can have negative effects.
Eggs:
Eating eggs in the morning is a healthy choice for several reasons. Eggs are a nutrient-dense food packed with high-quality proteins, essential vitamins, and minerals. They provide a sustained energy boost, helping you stay fuller for longer and reducing overall calorie intake throughout the day. Additionally, eggs contain choline, which supports brain function, and lutein and zeaxanthin, beneficial for eye health. Incorporating eggs into your morning routine is a simple and effective way to kickstart your day with a nutritious and delicious meal.
Apple:
An apple a day contributes to a healthy lifestyle in various ways. Packed with fiber, vitamins, and antioxidants, apples support digestive health and aid in weight management. The soluble fiber in apples helps regulate blood sugar levels and lower cholesterol. The antioxidants, such as quercetin, promote heart health and reduce the risk of chronic diseases. With a low calorie count and natural sweetness, apples make a convenient and nutritious snack that satisfies cravings while promoting overall well-being.
Banana plus cumin:
While there is no scientifically established evidence specifically supporting the combination of banana and cumin for improved sleep, both ingredients offer individual benefits. Bananas contain serotonin precursors and melatonin, promoting relaxation and better sleep quality. On the other hand, cumin has been associated with potential anti-inflammatory and calming effects. Incorporating these foods into a balanced evening diet may contribute positively to sleep hygiene, but further research is needed to confirm any synergistic effects. Always consult with a healthcare professional for personalized advice on improving sleep.
Apple cider vinegar
Apple cider vinegar (ACV) is often considered a healthful addition to one’s diet. It contains acetic acid, believed to possess antimicrobial properties. Some studies suggest that ACV may help regulate blood sugar, contribute to weight management, and promote heart health. Additionally, its antioxidant content could help combat oxidative stress. While these potential benefits exist, it’s essential to use ACV in moderation and consult with a healthcare professional before making significant dietary changes.
Salt water in the morning:
Some believe that drinking saltwater in the morning, known as “sole water,” may offer health perks. Advocates suggest it could hydrate, balance electrolytes, and provide minerals for a metabolism kickstart. While individual responses vary, consulting a healthcare professional is advisable before adopting new wellness practices.
Meditation:
Meditation, a practice spanning centuries, is celebrated for its potential positive impacts on mental well-being. Advocates claim it helps reduce stress, enhance focus, and promote a sense of calm. While individual experiences may differ, incorporating meditation into daily life is considered by many as a valuable tool for fostering mental clarity and overall mindfulness.
Vagus nerve stimulation:
Vagus nerve stimulation, a method gaining attention in wellness discussions, is believed by some to offer various health advantages. Advocates suggest it may help reduce stress, improve mood, and regulate autonomic functions. While research is ongoing, some find value in practices that promote vagus nerve activity as a potential pathway to enhanced well-being. As with any health approach, consulting with a healthcare professional is advisable.
Lemon water:
Drinking lemon water is often touted for its potential health perks. Advocates suggest it may aid digestion, provide a vitamin C boost, and support hydration. While individual experiences vary, incorporating lemon water into your routine can be a refreshing way to stay hydrated with a hint of added flavor. As with any dietary choice, it’s essential to consider personal health needs and consult with professionals if necessary.
Vitamin D:
Vitamin D, known as the “sunshine vitamin,” is crucial for various aspects of health. It plays a vital role in bone strength, immune function, and mood regulation. Exposure to sunlight and dietary sources contribute to adequate vitamin D levels. However, individual needs may vary, and supplements are recommended if required. Incorporating sufficient vitamin D into your routine supports overall well-being, promoting strong bones and a robust immune system. Always consult with healthcare professionals for personalized advice.
Omega 3:
Omega-3 fatty acids, found in fatty fish like salmon and flaxseeds, are celebrated for their potential health benefits. Advocates suggest they support heart health, cognitive function, and may have anti-inflammatory properties. Incorporating Omega-3 into your diet can contribute to overall well-being. While individual responses vary, many find value in this essential nutrient for promoting a healthy heart and supporting various bodily functions. As with any dietary consideration, consulting with healthcare professionals is advised.
Curcumin:
Curcumin, the active compound in turmeric, is gaining attention for its potential health benefits. Believed to have anti-inflammatory and antioxidant properties, curcumin may contribute to overall well-being. Some studies suggest it could support joint health, aid digestion, and potentially have anti-cancer properties. While individual responses vary, incorporating curcumin into your diet, often through turmeric, might be a flavorful way to explore potential health advantages. As with any supplement, consulting healthcare professionals is recommended for personalized advice.
Prebiotics:
Prebiotics, often found in certain foods like garlic, onions, and bananas, are celebrated for their potential role in supporting gut health. These non-digestible fibers serve as food for beneficial gut bacteria, promoting a balanced and thriving microbiome. Advocates suggest that incorporating prebiotics into your diet may contribute to improved digestion, enhanced nutrient absorption, and even support the immune system. While individual responses vary, many find value in including prebiotic-rich foods as part of a holistic approach to well-being. As with any dietary consideration, consulting with healthcare professionals is recommended for personalized advice.
Black Tea:
Black tea, packed with antioxidants, may support heart health and provide a gentle energy lift. Enjoying it in moderation can be an easy and flavorful addition to your routine. Always consider individual preferences and consult with healthcare professionals for personalized advice.
Mate Tea:
Mate tea, popular for its robust flavor, may offer a quick health boost. Packed with antioxidants, it’s believed to enhance focus and provide a gentle energy lift. Sipping on mate tea can be a simple and invigorating addition to your routine. As with any beverage, moderation is key, and personalized advice from healthcare professionals is recommended.
Green Tea:
Green tea, a popular choice, is praised for its potential health benefits. Rich in antioxidants, it may support heart health and provide a mild energy boost. Sipping green tea is a simple and enjoyable way to incorporate potential wellness benefits into your day. As always, moderation and consulting healthcare professionals for personalized advice are recommended.
Peppermint Tea:
Peppermint tea, known for its invigorating flavor, may offer refreshing wellness benefits. Believed to aid digestion and soothe discomfort, it’s a delightful and calming addition to your routine. Sip on peppermint tea for a quick, aromatic boost. As with any herbal tea, moderation and seeking personalized advice from healthcare professionals are advisable.
Chamomille Tea:
Chamomile tea, celebrated for its calming properties, is a delightful choice for relaxation. Believed to ease stress and promote better sleep, it offers a soothing and gentle way to unwind. Sip on chamomile tea for tranquility in every cup. As with any herbal tea, moderation is key, and seeking advice from healthcare professionals is recommended.
Nettle Tea:
Nettle tea, embraced for its potential health benefits, is believed to be rich in nutrients and antioxidants. Some suggest it may support joint health and boost the immune system. Enjoy a cup of nettle tea for a nourishing and earthy experience. As with any herbal tea, moderation is advised, and consulting healthcare professionals for personalized advice is recommended.
Rosehip Tea:
Rosehip tea, adorned for its delicate flavor, is thought to be a source of vitamin C and antioxidants. Some believe it supports immune health and skin vitality. Sip on rosehip tea for a refreshing and potentially healthful experience. As with any herbal tea, moderation is key, and seeking advice from healthcare professionals is advisable.
Ginger Tea:
Ginger tea, celebrated for its bold flavor, is believed to offer potential health benefits. With anti-inflammatory and digestive properties, it’s a zesty choice for overall well-being. Enjoy a cup of ginger tea for a warming and invigorating experience. As with any herbal tea, moderation is advised, and consulting healthcare professionals for personalized advice is recommended.
“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
“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 😁
?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.”
“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.”
“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.”
“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.”
“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.”
“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.”
“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">
ChatGPT: My experience working with ChatGPT was a flawless 5/5. It’s remarkable how it effortlessly tackles developer challenges I couldn’t figure out on my own. Moreover, it significantly enhances my writing capabilities.
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
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
Design Course: “I teach full stack development! Which means you will see tutorials regarding UI/UX, Frontend Dev, Backend Dev, Graphic Design and more!”
