Here’s a breakdown of the basic rules for each data privacy regulation:

GDPR (Europe)

• Requires explicit and informed consent before collecting personal data.
• Grants users the right to access, rectify, and erase their data (“right to be forgotten”).
• Requires businesses to provide clear privacy policies explaining data usage.
• Mandates data breach notifications within 72 hours.
• Enforces data minimization, ensuring only necessary data is collected.
• Restricts data transfers outside the EU unless safeguards are in place.

CCPA (California, USA)

• Gives consumers the right to know what personal data is collected and how it’s used.
• Allows users to opt out of the sale of their personal data.
• Provides the right to delete personal information upon request.
• Prohibits discrimination against users who exercise their privacy rights.
• Requires businesses to have a “Do Not Sell My Personal Information” link on their website.

LGPD (Brazil)

• Similar to GDPR, it requires clear and informed consent for data collection.
• Grants users the right to access, correct, delete, and transfer their data.
• Businesses must appoint a Data Protection Officer (DPO) to oversee compliance.
• Requires data breach notifications within a reasonable timeframe.
• Applies to any business handling Brazilian citizens’ data, regardless of location.

PIPEDA (Canada)

• Organizations must obtain valid consent before collecting personal data.
• Requires businesses to identify the purpose of data collection and limit its use.
• Grants individuals the right to access and correct their personal information.
• Mandates security safeguards to protect data from breaches.
• Requires data breach reporting if there’s a risk of significant harm.

Each of these regulations has unique rules, but they all emphasize transparency, user control, and data protection. – hence the banner at the bottom of this page!

I created the images using AutoCAD for the vectors and Photoshop for colouring.

The code is mainly JS and obviously the usual HTML/CSS.

Enjoy!

My guidelines are:

• Add a css tag to every tag on my list, the list being my most common tags: PHP, JS, WP, CSS and GIT
• Add a css tag for any random tag that I may come up with in the future that matches my main tags.

It’s a very simple php bit I added to my front-page.php file, because that’s where I wanted it to show.

  <?php
    // Define tag name to CSS class mappings
    $tag_class_map = array(
        'Git' => 'git-tag',
        'php' => 'php-tag',
        'wp' => 'wp-tag',
        'css' => 'css-tag',
        'js' => 'js-tag'
    );

    // Check if there are any tags for the current post
    $tags = get_the_tags();
    if ($tags) {
        echo '<ul class="tag-list">';
        foreach ($tags as $tag) {
            // Default CSS class
            $tag_classes = 'code';

            // Check if the tag name exists in the mapping
            if (isset($tag_class_map[$tag->name])) {
                // Assign corresponding CSS class
                $tag_classes = $tag_class_map[$tag->name];
            }

            echo '<li class="' . $tag_classes . '"><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
        }
        echo '</ul>';
    }
?>

I think it looks very nice and organized and I’ve kept the default wordpress settings, meaning the user can click on a tag and use it as a filter.

Another way of setting these, would be using Javascript. I think it’s longer and messier and, in general, I prefer the PHP solution, but here’s the Javacript version:

<ul id="tag-list" class="tag-list">
    <!-- Tags will be dynamically added here -->
</ul>

<script>
    // Define tag name to CSS class mappings
    var tagClassMap = {
        'Git': 'git-tag',
        'php': 'php-tag',
        'wp': 'wp-tag',
        'css': 'css-tag',
        'js': 'js-tag'
    };

    // Function to add tags dynamically
    function addTag(tag) {
        var tagList = document.getElementById('tag-list');
        var tagClasses = tagClassMap[tag.name] || 'code'; // Default to 'code' if no matching CSS class found
        var listItem = document.createElement('li');
        listItem.className = tagClasses;
        var link = document.createElement('a');
        link.href = getTagLink(tag.term_id); // Assuming getTagLink function is defined elsewhere
        link.textContent = tag.name;
        listItem.appendChild(link);
        tagList.appendChild(listItem);
    }

    // Assuming you have an array of tag objects 'tags'
    var tags = [
        { name: 'Git', term_id: 1 },
        { name: 'php', term_id: 2 },
        { name: 'css', term_id: 3 },
        { name: 'html', term_id: 4 } // An example tag with no mapping, defaults to 'code'
    ];

    // Add each tag dynamically
    tags.forEach(function(tag) {
        addTag(tag);
    });
</script>

See you next time,

Michele

This is a basic WordPress template structure:

<?php get_header(); ?>

<div class="container">
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
        
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_content(); ?>

    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Now, for my portfolio page – for example – I may want the header to be different. This requires 2 steps:

Create a header-portfolio.php file

Create a header-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure of “header-{any-name-we-want}.php” must be kept.

Our portfolio header may look a little like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <header>
        <div class="container">
            <h1>Hello, I am the portfolio header</h1>
            <p><?php bloginfo('description'); ?></p>

            <!-- Navigation Menu -->
            <?php 
                if (has_nav_menu('primary')) {
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'container' => 'nav',
                        'container_class' => 'main-navigation',
                        'menu_class' => 'menu',
                        'depth' => 2,
                    ));
                }
            ?>
        </div>
    </header>

Site note: In this example, I’m using a menu, which requires adding in the functions.php file. This step is not necessary if the new header doesn’t have a menu.

function register_custom_menus() {
    register_nav_menus(
        array(
            'primary' => __('Primary Menu', 'textdomain'),
        )
    );
}
add_action('after_setup_theme', 'register_custom_menus');

Create a page-portfolio.php file

Now, we must create a page-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure “page-{any-name-we-want}.php”. must be kept.

The comment at the top of the page is extremely important and not optional*

Notice how on the 3rd line we use <?php get_header(‘portfolio’); ?> , to grab our custom header.

<?php /* Template Name: Portfolio Page */ ?>

Here's what the php could look like:

<?php get_header('portfolio'); ?> 

<div class="container"> 

<h1>This is the Portfolio Page</h1> 

<?php if(have_posts()) : while(have_posts()) : the_post(); ?> 

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 

<?php the_content(); ?> 

<?php endwhile; endif; ?> 

</div> 

<?php get_footer(); ?>

The result should be that now our page will load the custom header (if we select “Portfolio Page” as the template!) . The same rule applies to the footer, where we’d have footer-portfolio.php and <?php get_footer(portfolio); ?> on our code!

I am only ever on github once in a blue moon. However, I don’t like it one bit when my user page is just blank. So, I took the time to actually put something in there and I am leaving a few notes-to-self here – because there might be another 3 years before I’m in there again.

Create a New Repository:

Go to GitHub and create a new repository.

The repository name must be username.github.io where username is your GitHub username.

Add Content:

Clone the repository to your computer.

git clone https://github.com/username/username.github.io.git

Navigate to the repository directory.

cd username.github.io

Add an index.html file (or a Jekyll theme if you’re familiar with it). This index.html file will be the main page of your website.

Add content to the index.html.

Push to GitHub:

Add the file to git.

git add index.html

Commit the changes.

git commit -m "Initial commit"

Push the changes to GitHub.

git push origin master

Access Your Website:

https://username.github.io/

And here’s what my github site looks like:

https://micheleborn.github.io/

• Create a new repository named the same as your GitHub username (e.g., username/username).
• This repository should have a README.md file. This README will be displayed on your GitHub profile page.

2. Editing Content:

• Go to the repository you created.
• Click on the README.md file.
• Click the pencil icon (Edit this file).
• Edit the content using Markdown syntax.
• Describe your changes in the commit summary and description.
• Click “Commit changes”.

3. Viewing Changes:

Go to your GitHub profile by clicking on your profile picture on the top right corner and selecting “Your profile”. You’ll see the content of the README.md displayed on your profile.

For both GitHub Pages and GitHub profile README, you can also use git commands (clone, commit, push, etc.) to manage and update your content if you’re familiar with the command line or use a GUI git client.

<script>
    const toggleBtn = document.getElementById('toggle-btn');
    const body = document.body;
    const isDarkMode = JSON.parse(localStorage.getItem('isDarkMode'));

    if (isDarkMode) {
      body.classList.add('dark-mode');
    }

    toggleBtn.addEventListener('click', function () {
      body.classList.toggle('dark-mode');
      localStorage.setItem('isDarkMode', body.classList.contains('dark-mode'));
    });
  </script>

CSS:

  /* Light Mode CSS */
  body {
    background-color: var(--light-background);
    color: var(--light-primary);
  }

body a {
    color: var(--dark-link);
  }

  /* Dark Mode CSS */
  body.dark-mode {
    background-color: var(--dark-background);
    color: var(--dark-primary);
  }

  body.dark-mode a {
    color: var(--dark-link);
  }