You may be doing Copyright Notices wrong: It's time to rethink your approach

Luke Liasi — Sat, 06 May 2023 14:16:29 +0000

Copyright is a legal concept that provides creators with exclusive rights over their original works. On websites, copyright notices inform users that the content is protected and cannot be copied, distributed, or altered without permission. However, you might be using the wrong format for your copyright notice.

The common misconception

Many people believe that the standard copyright format should be:

However, this format can be misleading. The purpose of a copyright notice is to indicate the first date of publication for content. Consequently, the date should not be changed every year, as this would alter the "first publication" date.

The correct approach

Instead of using the standard format, consider the following alternative:

This format not only signifies the correct "first publication" date but also provides other benefits.

Benefits of including a start date

By including a start date in your copyright notice, you can:

Demonstrate your company's experience and longevity, conveying trustworthiness to your audience
Facilitate tracking and protecting your intellectual property over time
Emphasize your commitment to providing up-to-date and relevant content

Code snippets

The code snippets provided below will display the start year and the current year, or only the current year if the start year is the same as the current year:

JavaScript

function getCopyright(startYear) {
  var currentYear = new Date().getFullYear();

  if (startYear === currentYear) {
    return "Copyright &copy; " + currentYear + " Your Company";
  } else {
    return "Copyright &copy; " + startYear + " - " + currentYear + " Your Company";
  }
}

var copyrightNotice = getCopyright(2010); // Replace 2010 with your start year
console.log(copyrightNotice); // "Copyright © 2010 - 2023 Your Company"

PHP

function getCopyright($startYear) {
  $currentYear = date("Y");

  if ($startYear == $currentYear) {
    return "Copyright &copy; $currentYear Your Company";
  } else {
    return "Copyright &copy; $startYear - $currentYear Your Company";
  }
}

$copyrightNotice = getCopyright(2010); // Replace 2010 with your start year
echo $copyrightNotice; // "Copyright © 2010 - 2023 Your Company"

Python

from datetime import datetime

def get_copyright(start_year):
    current_year = datetime.now().year

    if start_year == current_year:
        return f"Copyright &copy; {current_year} Your Company"
    else:
        return f"Copyright &copy; {start_year} - {current_year} Your Company"

copyright_notice = get_copyright(2010)  # Replace 2010 with your start year
print(copyright_notice) # "Copyright © 2010 - 2023 Your Company"

Ruby

def get_copyright(start_year)
  current_year = Time.now.year

  if start_year == current_year
    return "Copyright &copy; #{current_year} Your Company"
  else
    return "Copyright &copy; #{start_year} - #{current_year} Your Company"
  end
end

copyright_notice = get_copyright(2010) # Replace 2010 with your start year
puts copyright_notice # "Copyright © 2010 - 2023 Your Company"

Java

import java.time.Year;

public class CopyrightNotice {
  public static String getCopyright(int startYear) {
    int currentYear = Year.now().getValue();

    if (startYear == currentYear) {
      return "Copyright &copy; " + currentYear + " Your Company";
    } else {
      return "Copyright &copy; " + startYear + " - " + currentYear + " Your Company";
    }
  }

  public static void main(String[] args) {
    String copyrightNotice = getCopyright(2010); // Replace with your start year
    System.out.println(copyrightNotice); // "Copyright © 2010 - 2023 Your Company"
  }
}

C

using System;

class Program
{
  static string GetCopyright(int startYear)
  {
    int currentYear = DateTime.Now.Year;

    if (startYear == currentYear)
    {
      return $"Copyright &copy; {currentYear} Your Company";
    }
    else
    {
      return $"Copyright &copy; {startYear} - {currentYear} Your Company";
    }
  }

  static void Main()
  {
    var copyrightNotice = GetCopyright(2010); // Replace 2010 with your start year
    Console.WriteLine(copyrightNotice); //"Copyright © 2010 - 2023 Your Company"
  }
}

Read more on my blog: https://lukeliasi.com/blog/

My Portfolio Built Using Astro

Luke Liasi — Tue, 17 Jan 2023 00:16:25 +0000

LINK: 👉lukeliasi.com

If you're looking to create a fast, statically rendered portfolio website, you may want to consider using the Astro framework. It uses a familiar component syntax similar to React.js but without the need for large JavaScript bundles.

When building my portfolio website, I wanted to make sure it had a consistent and polished look. One way I achieved this was by using CSS variables, also known as CSS custom properties. These allow for easy modification and maintenance of design elements such as colors and font sizes.

Here is my variables style sheet:

:root {
  /* Colors */
  /* Mint */
  --color-mint: #15FF93;
  --color-mint-50: #CDFFE8;
  --color-mint-100: #B8FFDE;
  --color-mint-200: #8FFFCB;
  --color-mint-300: #67FFB9;
  --color-mint-400: #3EFFA6;
  --color-mint-500: #15FF93;
  --color-mint-600: #00DC76;
  --color-mint-700: #00A458;
  --color-mint-800: #006C3A;
  --color-mint-900: #00341C;
  /* Orange */
  --color-orange: #E8871E;
  --color-orange-50: #F9E0C5;
  --color-orange-100: #F7D6B2;
  --color-orange-200: #F3C28D;
  --color-orange-300: #F0AE68;
  --color-orange-400: #EC9B43;
  --color-orange-500: #E8871E;
  --color-orange-600: #BB6A13;
  --color-orange-700: #884D0E;
  --color-orange-800: #553009;
  --color-orange-900: #221303;

  /* Font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px, base */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.75rem;  /* 28px */
  --font-size-4xl: 2rem;     /* 32px */
  --font-size-5xl: 2.25rem;  /* 36px */
  --font-size-6xl: 2.5rem;   /* 40px */
  --font-size-7xl: 2.75rem;  /* 44px */
  --font-size-8xl: 3rem;     /* 48px */
  --font-size-9xl: 3.25rem;  /* 52px */
  --font-size-10xl: 3.5rem;  /* 56px */
  --font-size-11xl: 3.75rem; /* 60px */
  --font-size-12xl: 4rem;    /* 64px */
  --font-size-13xl: 4.25rem; /* 68px */
  --font-size-14xl: 4.5rem;  /* 72px */
  --font-size-15xl: 4.75rem; /* 76px */
  --font-size-16xl: 5rem;    /* 80px */

  /* Font Family */
  --font-family-IBM-Plex-Mono: 'IBM Plex Mono', sans-serif;
  --font-family-Mukta: 'Mukta', sans-serif;
}

I can then use these values throughout my website styling, e.g:

.intro-welcome {
  color: var(--color-mint);
  font-family: var(--font-family-IBM-Plex-Mono);
  font-size: var(--font-size-base);
}

For now, this is a very brief overview of how I built my website but feel free to follow me as I will be posting a more in depth post about how I built my portfolio.

I encourage others to take inspiration from my website, as it is open source and available on GitHub 💻. Feel free to use it as a reference or starting point for your own projects. Give the repository a star ⭐ if it helped you.

LINK: 👉lukeliasi.com Have fun!

DEV Community: Luke Liasi