DEV Community: Anthony

Data is like Radioactive Material! ☢️

Anthony — Thu, 03 Nov 2022 16:44:07 +0000

Think of handling personal data like handling radioactive material.

Leaks

If you’ve got people moving it around all over the place, that increases the chance of them to leak that material. The same thing applies to personal data. Try not to move it around too much because you run the risk of data leaks.

Disposal

Also, think about how you’re going to dispose of that radioactive material. You’re not just going to throw it away in a trash can, you need to dispose of it with care. The same goes for sensitive data.

Stockpiling

Don’t just gather as much radioactive material as possible. Stockpiling that is a huge risk! The same goes for data. You shouldn’t just be collecting large amounts of data, only collect what you need.

Handle with Care

Finally, you wouldn’t want any Jane or Joe handling that radioactive material, you need someone who is trained and experienced to handle it. The same applies to your organization. Have trained professionals working with that data.

Why you should use a developer font

Anthony — Fri, 28 Jan 2022 06:54:46 +0000

TLDR: Developers, the fonts that you use matter! They help you find bugs and lessen eye strain.

Why do Fonts Matter?

Did you know that there's a whole industry revolved around fonts? Typeface and typography are some terms used in this space, and their goals are to design fonts/letters to improve experiences or give products identity. As developers, we look at code all day long. Shouldn't we try to improve that experience, so that we can be more productive? Well, there are many fonts out there that do just that! Some popular ones include Fira Code, Source Code Pro, Jetbrains Mono, and Ubuntu Mono. But these are just a few, there are tons more.

Here are some reasons why picking the right font will help you, as a developer:

Easily find typos.
Quickly find variables and functions.
Identify programming-specific characters.
Reduce eye strain.

Plus, they just look cool, and who doesn't like that? 🤣

Differences Between Normal Fonts

Fonts for programmers are designed with programmers in mind. The philosophy behind these ideas differ amongst typefaces, but they aim to do the same thing: improve the developer experience.

Let me go into some details about the font: Jetbrains Mono, my current font of choice.

Jetbrains Mono has the following features:

1. Increased font height, so code is easier to read.

How does this help? Well, a more readable font will help you find typos because you can easily identify each character you type. And no more squinting! You're eye's will be much less strained since you don't need to squint anymore.

2. Ligatures which help you identify special characters used in programming.

Take a look at what I mean from the images below. Notice how arrow functions go from => to an actual arrow. This makes special characters stand out and look how they should.

OFF

3. Each character is distinct.

I'm sure you've experienced something like this. You look at a character and wonder if its a capital I or a lowercase l. They look the same with a lot of standard fonts (like this one that I'm using for my blog!).

4. Letters flow vertically.

When we code, we do a lot of vertical scrolling and, in tern, a lot of vertical reading. Jetbrains Mono is designed to be super legible and flow vertically.

MonoLisa is another popular dev font. Part of their design philosophy includes horizontal flow, so each character flows to the right, making horizontal reading much smoother.

MonoLisa also has a wider font, which makes your code less condensed and easier to read.

Test Them Out Yourself!

If you're not sure which font will work best for you, check out this font playground. You'll be able to select from a bunch of different fonts to try out.

Summary

If you're a developer, I highly recommend downloading some programming fonts and see what works best for you. They can improve your workflow by reading code more easily. And you'll have less eye strain since everything's more legible.

For more information:

Thanks for reading!
Consider following me for more!

My Blog
Twitter
Dev Community
HashNode
Medium

Keep your Social Media Avatars up to Date

Anthony — Wed, 19 Jan 2022 23:54:46 +0000

TLDR: Refreshed my outdated avatar, which I use for social media.

New Avatar

Since I use an illustrative self-portrait for my social media handles, it's sometimes hard for people to tell what I really look like IRL. Originally, I made my avatar back in 2018 or 2019. But since then, I have a different hairstyle. It's important to make your profile picture (regardless of medium) look like you as much as possible.

The original avatar was made in Photoshop, so the scaling doesn't work well since Photoshop is pixel based. I converted it to a vector image, and edited it in Illustrator so it scales to any image size (in SVG).

So here's my new avatar to match my curly hair:

Design Process

This highlights the vector changes I made in this iteration (using Illustrator).

Old Avatar

And this is what my original avatar looked like (with my 2019 hair):

Thanks for reading!
Consider following me for more!

My Blog
Twitter
Dev Community
HashNode
Medium

MongoDB with Django

Anthony — Tue, 18 Jan 2022 05:21:38 +0000

TLDR: Django doesn't support NoSQL databases like MongoDB, but this shows how it's possible.

Virtual Environments in Python

Before installing Django, its good to understand venv, a virtual environment for Python. venv is a self-contained directory that has the Python installation plus external packages. Think of it as any other virtual environment. They should NOT be committed to your repo (you can put it outside the directory or just add it to .gitignore)!

Create a venv with:

python3 -m venv name-of-virtual-env-directory

This will create the name-of-virtual-env-directory as well as the Python installation and any packages your project needs.

A best practice for handling virtual environments is to store them all in the same place. So, you might want to store them in your home directory or wherever your Git repos are stored. i.e.:

python3 -m venv ~/.virtualenvs/project-virtual-env

After that, you can activate the virtual environment with:

source ~./virtualenvs/project-virtual-env/bin/activate

Anytime you install a package with pip, it will be installed in the active virtual environment you're in.

pip list

Gives a list of all the installed packages within the venv.

After installing dependencies into the virtual environment, make sure to deactivate it when you're done. Use command:

deactivate

pip freeze is similar to pip list, but it also give specific version numbers. Copy the contents of that list into a reqirements.txt file (which is committed into version control AKA Git). Then, when a user clones your project, they run the following, to install all of the project dependencies.

pip install -r requirements.txt

Think of requirements.tx as package.json used in NPM.

| Another option: virtualenv is an even more popular option than venv. Look into using it here.

MongoDB

MongoDB is a NoSQL, non-relational, schema-less, document-based database. Document-based means that the data is stored in key-value pairs, think about JSON. Check out the table below for a comparison between SQL and NoSQL.

Topic	SQL	NoSQL
Type	Table based databases	Document based, like key-value pairs
Schema	Uses a schema	No need for a schema
Scaling	Not preferred (vertical)	Preferred for scaling (horizontal)
ACID	Best for ACID properties	Not ACID compliant

This shows how you need to create a schema with relational databases, and how it's not needed in MongoDB.

Django

MongoDB isn't officially supported by Django, a popular web framework with Python. PostresSQL, MySQL, Oracle, and SQLite are. But it is possible to do this per the MongoDB docs. This is because, usually, you'll want to use a relational database with Django.

Flask is another popular web framework in Python. It's a better choice to use with NoSql databases. You can also use django-nonrel, which is a community fork to add NoSQL support to Django. However, it is not supported and uses an old Django version.

There are 3 options to connect to MongoDB with Django. Pymongo, MongoEngine, and Djongo. But by using PyMongo, a driver, you can connect MongoDB and Django. Instructions for this are in the subsequent section.

After activating the virtual env (from above), installing Django can be done with:

python -m install Django

View the Django version with:

python -m django --version

cd into a directory and enter the command to create a project:

django-admin startproject name-of-project

To start the server & application:

python manage.py runserver

Earlier, we created a project named name-of-project. We can also create apps within the project. Projects can have multiple apps (think of apps as modules). Use this command:

python manage.py startapp name-of-app

Directory	Summary
name-of-project	The root directory (can be named anything)
» manage.py	CLI utility
» name-of-project	Directory for the Python package (e.g. name-of-project.settings)
» init.py	Tells Python this directory is a package
» settings.py	Settings for Django
» urls.py	Table of contents and URL routing
» asgi.py	Entry-point for ASGI web servers
» wsgi.py	Entry-point for WSGI web servers

PyMongo

According to MongoDB docs, Pymongo is the preferred way to use MongoDB with Django. But as mentioned above, there are some other options using MongoEngine and Djongo.

Install PyMongo with:

python3 -m pip install pymongo

For installation with MongoDB, it might be good to install some optional dependencies with:

pip install pymongo[snappy,gssapi,srv,tls]

As well as this (for using mongodb+srv://):

pip install dnspython

There's a couple of ways to connect to our database session. One of which involves creating a utils.py file in the PROJECT folder (where manage.py is).

from pymongo import MongoClient

def get_db_handle(db_name, host, port, username, password):

 client = MongoClient(host=host,
                      port=int(port),
                      username=username,
                      password=password
                     )
    db_handle = client['db_name']
 return db_handle, client

Use env variables to hide the username and password from being exposed. That's out of scope of this tutorial, but if you have questions, just ask.

Then, in the app directory, find views.py. From here, the function get_db_handle() can be accessed.

Now, our MongoDB client is connected! If you'd like to check out how to set this up with MongoEngine or Djongo, just check out this tutorial.

For more information:

Thanks for reading!
Consider following me for more!

My Blog
Twitter
HashNode
Medium

Bat Tracker - MongoDB Atlas Hackathon Submission

Anthony — Fri, 14 Jan 2022 06:12:48 +0000

Overview of My Submission

TRACK BAT LOCATION MOVEMENTS OVER TIME

Movebank, is a public database, where scientists track animal movements by attaching a GPS device to the animal. Based on a certain frequencies, that data is recorded by the device and stored in the database.

There is a public API which gets this data, so developers can use it in various projects.

My idea for this was to:

Get European free-tailed bat tracking data from Movebank's API.
Store that data in MongoDB.
Convert it to Time Series data.
Display that data on a Map to track their movement history.

Unfortunately, I saw this Hackathon only a few days before the due date and did not have enough time to complete my idea. But I am submitting it as is. I may want to complete it in the future.

What I completed:

✅ Get European free-trailed bat tracking data from Movebank's API
✅ Store that data in MongoDB.
⛔ Convert it to Time Series data.
⛔ Display that data on a Map to track their movement history.

Submission Category:

Prime Time with Atlas Time Series

Screenshots:

Link to Code

anthonyjdella / atlas-hackathon-time-series

💚 My submission for the Atlas Hackathon sponsored by MongoDB. This is a Time Series app.

Bat Tracker

MongoDB Atlas Hackathon Time Series

💚 This is my submission for the MongoDB Atlas Hackathon on DEV. The category is "Prime Time" for Time Series Collections. You can view my submission here.

Disclaimer

For this project, I wanted to work with technologies that I've never used. These were Django and MongoDB.

About

There is a public API which gets this data, so developers can use it in various projects.

My idea for this was to:

Get European free-tailed bat tracking data from Movebank's API.
Store that data in MongoDB.
Convert it to Time Series data.
Display that data on a Map to track their movement history.

Incomplete

Unfortunately, I saw…

View on GitHub

Additional Resources / Info

A helpful guide:
https://www.mongodb.com/features/mongodb-time-series-data
Tutorial for inserting data using PyMongo:
https://kb.objectrocket.com/mongo-db/how-to-bulk-insert-multiple-documents-to-a-mongodb-collection-using-python-352
Referencing this MongoDB PyMongo Guide on Github:
https://github.com/mongodb-developer/django-pymongo
Movebank Study where I got the Data:
https://www.movebank.org/cms/webapp?gwt_fragment=page=studies,path=study312057662
Movebank API:
https://github.com/movebank/movebank-api-doc
How to Migrate Data into a Time Series Collection:
https://docs.mongodb.com/manual/core/timeseries/timeseries-migrate-data-into-timeseries-collection/
To install MongoDB Shell and login: https://docs.mongodb.com/mongodb-shell/

mongosh mongodb+srv://USER:PASS@cluster0.9ptvo.mongodb.net/Bat_DB?retryWrites=true&w=majority

To install MongoDB Community Edition 5.0: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/#install-mongodb-community-edition

brew tap mongodb/brew
brew install mongodb-community@5.0

brew services stop mongodb-community@5.0

brew services list

mongosh

To download and configure MongoDB CLI: https://docs.mongodb.com/mongocli/master/configure/#std-label-mcli-configure

mongocli config describe default

To connect to a Remote Host: https://docs.mongodb.com/mongodb-shell/connect/#mongodb-instance-on-a-remote-host

 mongosh "mongodb+srv://USER:PASS@cluster0.9ptvo.mongodb.net/Bat_DB?retryWrites=true&w=majority"

Thanks for sponsoring this great Hackathon! Although my submission is incomplete, I learned a lot.

How a Rogue Developer Ruined Millions of Software (happened this weekend)

Anthony — Mon, 10 Jan 2022 05:27:31 +0000

TLDR: A software developer who made some highly used open source software, decided to go rogue and inject a bug into his software, making it usable. This affected every other dependency (and developer) using his software.

Bug Breaks my Software Deployment

Over the weekend, I was deploying some software (to Firebase) with CI/CD pipelines. But for some reason, the pipelines were failing. The failure occurred at this stage of my GitHub Actions workflow:

    - uses: FirebaseExtended/action-hosting-deploy@v0
    with:
        repoToken: '${{ secrets.GITHUB_TOKEN }}'
        firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANTHONYDELLAVECCHIA }}'
        channelId: live
        projectId: anthonydellavecchia
        entryPoint: "./anthonyjdella"

This is the visual representation of my failed pipeline:

I then went over to the Firebase Extended Github repo to see if anyone else was having similar issues. And yep, many others were experiencing the same issue:

(link)

Rogue Developer, Marak

Well, it turns out, Action-hosting-deploy was using a dependency called colors, created by Marak (the rogue developer), which is a tool that colors and styles your node.js console. This npm package gets over 20 million downloads per week, so its very popular! The dependency tree for this GitHub action looks something like this:

Action-hosting-deploy
- Firebase-tools
  - cli-table
    - colors (subdependancy which is causing the issue)
- winston
  - logform
    - colors (subdependancy which is causing the issue)

So what? Well, Marak, the creator of colors (mentioned above) added some code into his project to purposely break it. He added an infinite loop to purposely break his code!

(link to Marak's evil commit)

This is very much intentional and not an accidental bug. It was malicious.

Why is Breaking his own Software Bad?

You may be wondering why breaking his own software is bad? Well, Marak knows that his software is being used by other software. So if his breaks, so will theirs. Think of it as a chain reaction. If his breaks, other software that uses it will break too. Because of "dependency hell", this affects millions of developers.

Why Did Marak Do This?

Marak was upset that corporations were using his open-source software and not paying for it. It's basically that simple. He posted an article on his blog.

How Do You Fix It?

If your software was using colors, you would have to revert to the previous (non-broken) version. But because of this developer's poor work, you should definitely use another package instead. Chalk is another alternative that is recommended.

It's really important to have a dependency management system in place for your projects. Tools like Snyk, or SonarQube will help you detect dependency issues so you can quickly resolve them.

For more information:

Thanks for reading! 🙌

For more of my articles, check out (anthonydellavecchia.com)[https://anthonydellavecchia.com]!

How to Add Search to Hugo Static Sites

Anthony — Sat, 08 Jan 2022 23:59:38 +0000

TLDR: This tutorial explains how to add search functionality to your Hugo Website

After writing multiple blog posts, I quickly realized that more pages meant more clutter. If someone wants to find a post, they'd have to manually search for it by digging through each page. Imagine if I have 10 pages, with 6 blog posts per page. Finding an article would be difficult and a bad user experience. Adding a search bar, as well as tag filters, would fix this issue, so I did some research on how to implement this for my website.

I'm using Hugo as my static site generator and the documentation isn't the best. Their docs show multiple options for implementing search, but their explanations are pretty bad. Some options include: using native Javascript, Elasticsearch, lunr.js, etc. But I went with a third-party service, called Algolia, just because I found the documentation to be great.

Summary

To enable searching on a static site, you need to first create a JSON search index which acts as a database for your search results. From there, you update this JSON search index each time you update/create new pages. Then, you access/query the data by using REST API's provided by Algolia. Finally, you display the results on your page.

Getting Started

First thing to do is sign up for a free Algolia account (since we're using this service). Algolia is nice because they have great documentation, built-in widgets, provides fast results, and is easy to implement.

Generate JSON Search Index

Configure Output to JSON

Hugo can output content into multiple different file formats (like javascript, xml, toml, etc.). So, we want to set up our project to output JSON. Do this by configuring the config.toml/yaml:

config.toml

[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true

[params.algolia]
vars = ["title", "summary", "date", "publishdate", "permalink"]
params = ["tags"]

[outputs]
home = ["HTML", "Algolia"]

Here, we are creating a custom outputFormat called Algolia, which is of type JSON. We're also giving it some variables which will be used later.

Creating a Search Index Template

Next, create a file which will generate the JSON search index output. This file is the template for creating our output JSON. In the layouts/ directory, create a file like: search-index.json.

search-index.json

{{- $.Scratch.Add "index" slice -}}

{{- range where .Site.RegularPages ".Type" "blog" -}}

    {{- $.Scratch.Add "index" (dict "objectID" .UniqueID "date" .Date.UTC.Unix "fuzzywordcount" .FuzzyWordCount "kind" .Kind "lastmod" .Lastmod.UTC.Unix "permalink" .Permalink "publishdate" .PublishDate "readingtime" .ReadingTime "relpermalink" .RelPermalink "summary" .Summary "title" .Title "type" .Type "url" .RelPermalink "wordcount" .WordCount "section" .Section "tags" .Params.Tags "authors" .Params.Authors "image" .Params.FeatureImage "writtendate" .Params.WrittenDate)}}

{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

I only want my search look for blog posts, not every static page. To do this, I loop through my pages with the type "blog". Then, I create a dictionary which contains multiple key/value pairs of the data that I want. For instance, I want the title of my blog posts, so I create a key ("title") and a value (.Title). You can scroll through the code to get an idea of how to scrape other data (like a description, date, etc).

Generating the JSON

After the template is created, just re-build the project. Doing this will create a JSON file, which will be used as our search index. In my case, I have a Hugo theme called "portio". So, to build my project, I run the command hugo -t portio. After running this command, I have a generated JSON file called algolia.json in my build (public) directory.

You can beautify this file and verify that all of the data is correctly collected. If data is null or not populated correctly, make some changes to search-index.json. Make sure that you're using the correct Hugo variables.

Set up Algolia

Now, you can head over to the ALgolia interface to create a New Application (using the free plan). Then, within that New Application, create a New Index.

You'll have to jot down the Application ID, API key, and Index Name.

Send Search Index to Algolia

Now that we have our search index file, we need to upload it to Algolia (so we can use their search algorithms). Using NPM, we have to install Algolia:

npm install atomic-algolia --save

Within your package.json, add a script called algolia: atomic-algolia.

If you run npm run algolia, it won't work because Algolia doesn't know which project you're uploading this search index to. To fix this, you'll need to run

ALGOLIA_APP_ID={{ YOUR_APP_ID }} ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }} ALGOLIA_INDEX_NAME={{ YOUR_INDEX NAME }} ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }} npm run algolia

Copy the values of your app id, api key, etc into these brackets. Now, when you run that command, you're search index will be uploaded to Algolia! Check the Algolia interface to make sure your data is present in that service. From the UI, you can configure, manage, and view analytics related to your index.

You can also search within the Algolia UI itself to see how your search will look on your website.

Displaying the Search Results

We're going to have to write some Javascript to interact with Algolia API's to interact with our search index. First, we'll have to import Algolia as a module. Easiest way to do this is by adding node modules, but I went with embedding the scripts directly (from a CDN).

To embed the modules via a CDN, I used JSDelivr, which is a large CDN for Javascript modules. Then I injected these scripts into my HTML:

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.37.1"></script>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.11.0/dist/algoliasearch.umd.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

One of these is for a built-in theme, and the others are the modules to use Algolia search.

Now, create a search.js file which will interact with the Algolia API's to configure some things you'll need.

Initialize Search

Start by initializing Search, by entering your index credentials.

const search = instantsearch({
    indexName: 'your-index-name',
    routing: true,
    searchClient: algoliasearch(
        'your-app-id',
        'your-api-key'
    )
});

Display Results

Go to the HTML page you want your results to be displayed. Then create an empty div which will be where your results are shown:

<div id="hits"></div>

Back in the search.js file, we'll need to link that div to Algolia's API.

Algolia is built around widgets, one of which is the Hits widget which displays all of your data results. Configure your Hits widget with the below:

search.addWidget(
    instantsearch.widgets.hits({
        container: '#hits',
        templates: {
            empty: '<h3 style="text-align: center;">No results found 😔. Search something else.</h3>'
        }
    })
);

The container finds your HTML element which we defined in our HTML above. After it finds it, it will inject the widget into that HTML.

An empty template field will display whenever the search results are not found.

To display the actual results, we'll need to add an item in our template:

search.addWidget(
    instantsearch.widgets.hits({
        container: '#hits',
        templates: {
            empty: '<h3 style="text-align: center;">No results found 😔. Search something else.</h3>',
            item:
            `
            {{ range .Paginator.Pages }}
                <div class="image">
                    <img src="{{ image }}">
                </div>

                <div class="blog">
                    <span>{{ writtendate }}</span>
                    <h4>
                        <a href="{{ permalink }}">
                            {{#helpers.highlight}}
                                { "attribute": "title", "highlightedTagName": "mark" }
                            {{/helpers.highlight}}
                        </a>
                    </h4>
                    <h6>
                    [ {{tags}} ]
                    </h6>
                </div>
            {{ end }}
            {{ partial "pagination" .}}
            `
        }
    })
);

Here, I'm looping through all of my pages, then displaying an image for each page, followed by the date that the blog was written, and the title of each blog.

Search Bar

Results should be displayed now. Next, we'll add the search box which will filter our results.

In the HTML file, add the following div:

<div id="search-box"></div>

Back in the search.js file, we'll initialize a search box widget:

search.addWidget(
    instantsearch.widgets.searchBox({
        container: '#search-box',
        placeholder: "Search for articles",
        autofocus: true
    })
);

Again, the container will look for the HTML element that you enter, and inject that widget into the HTML.

Adding Other Widgets

As mentioned, Algolia has a bunch of widgets that you can configure. We've already added the Hits widget, which displays our results, and the Search Box widget, which displays a search box.

For my site, I also wanted categories/tags so that users can quickly sort an article by the category. I also wanted pagination below the results so users can navigate through my content.

Again, we need an empty div in our HTML. So for these, I will add the following in my HTML:

<div id="menu"></div>
<div id="pagination"></div>

For the categories/tags, you can use a Refinement List widget. But I went with the Menu widget which is pretty similar. Initialize it with:

search.addWidget(
    instantsearch.widgets.menu({
        container: '#menu',
        attribute: 'tags',
        showMore: true,
        limit: 3,
        sortBy: ['count:desc']
    })
);

Here, we are filtering by tags, which is a data attribute in my search index JSON. I also enabled a "Show More" button that shows all of my tags.

The Pagination widget was added like so:

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#pagination',
        scrollTo: false,
        showFirst: false,
        showLast: false,
        showPrevious: true
    })
);

Customizing Widgets

Finally, we've got a fully functioning Search. But the CSS may not look the way we want it to. You can customize the CSS by overriding the classes to your needs. Remember to test it out for both mobile and desktop devices!

Finished!

Now, we've got a fully functioning Search on our Hugo site!

For more information:

https://forestry.io/blog/search-with-algolia-in-hugo/

Thanks for reading! 🙌
Check out more of my blog posts on anthonydellavecchia.com

Magic Numbers (in programming)

Anthony — Thu, 06 Jan 2022 04:55:21 +0000

Today, I got feedback from a code review and learned something new. It was about "magic numbers", which are unique values with unexplained meaning or multiple occurrences which could (preferably) be replaced with named constants.

I've known about the concept of using constants rather than hard-coding values, but I didn't think of that for "magic number" situations. It's a pretty simple concept but I just wanted to share what I learned.

Magic Numbers are Bad

Magic numbers are language agnostic, but below, you'll see a code snippet in Java WITH magic numbers (the bad way).

class MagicNumber {

    String pipeDelimitedString = "This|is|an|example|of|Magic|Numbers|123 Parker Road|cityline@gmail.com";
    String [] splitString = pipeDelimitedString.split("\\|");

    obj.doSomething(splitString[7]);
    obj.doSomething(splitString[8]);           
}

As you can see, I am simply splitting a pipe delimited string that contains some useful data (Home Address and Email Address).

splitString[7] refers to the 8th element, or 123 Parker Road, which is a Home Address

splitString[8] refers to the 9th element, or cityline@gmail.com, which is an Email Address

Why is that bad? We’ll it’s not easy to read.

splitString[n], where n is a number, may not mean anything from an outsider looking at your code. The numbers 7 & 8 have no meaning!

Now, you’ll see a code snippet in Java WITHOUT magic numbers (the good way).

class MagicNumber {

  String pipeDelimitedString = "This|is|an|example|of|Magic|Numbers|123 Parker Road|cityline@gmail.com";
  String [] splitString = pipeDelimitedString.split("\\|");

  obj.doSomething(splitString[Constants.HOME_ADDRESS]);
  obj.doSomething(splitString[Constants.EMAIL_ADDRESS]);           
}

class Constants {

  public static final int HOME_ADDRESS = 7;
  public static final int EMAIL_ADDRESS = 8;
}

I’ve created a constants class, with some constants (HOME_ADDRESS = 7 and EMAIL_ADDRESS = 8).

Constants.HOME_ADDRESS & Constants.EMAIL_ADDRESS are much easier to understand and now have meaning!

If you aren’t convinced, what’s easier to read:
splitString[Constants.HOME_ADDRESS] or splitString[7]?

Again, this is just ONE example of magic numbers but there are many more. Thanks for reading!

Thanks for reading! Check out my blog for more articles like this @ www.anthonydellavecchia.com

How to Animate an Emoji with CSS

Anthony — Wed, 05 Jan 2022 03:45:11 +0000

If you go to the home page of this website, you might find some hidden "easter eggs" around the page. One of which is an emoji that is animated using CSS. 👋 is the emoji. It's just a waving hand, that doesn't actually wave. There is no animation, so I wanted to make it move. It's actually pretty easy!

Step 1: Create HTML

<div class="waving" data-hover="👋">Hi</div>

All I've done here is create a simple div with the text, "Hi". Then I've given it 2 HTML attributes, class and data-hover. The contents within data-hover ( 👋 ) is what will be animated.

Step 2: Create CSS

`.waving:before {
content: attr(data-hover);
}

.waving:hover {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}

@keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
100% {
transform: rotate( 0.0deg)
}
}`

.waving:before defines the content of which is to be displayed ( 👋 ).

.waving:hover defines what action happens when we hover over that element. In this case we have an animation-name which is defined below in @keyframes wave-animation. We also give it an animation-duration of 3 seconds and tell it to animate infinitely.

@keyframes wave-animation is where we create the actual animation. In this case, I wanted to make the hand wave, so to do this I just want the hand to rotate back and forth. I add different keyframes and tell it to rotate a certain number of degrees in certain intervals. This mimics 👋 actually waving!

You can apply this basic template to any emoji. Be creative! For example, you can try to animate a rocket 🚀 using CSS. Just think of what type of animation you want it to do (possibly translate up and down).

For more articles check out my blog @ anthonydellavecchia.com

Is 99% Good?

Anthony — Wed, 05 Jan 2022 03:24:15 +0000

If you ever took at test at school, you’d probably be really happy with getting a 99 grade. After all, it’s almost a perfect score.

But when you’re talking about software systems, is 99% availability good?

Well, if your system needs to be available 24/7 everyday, 99% won’t cut it.

Downtime Table

Take a look at the below table. It shows how much downtime (in time) equals a given percentage.

Availability	Annual Downtime
99%	3 days, 15 hours, 40 minutes
99.9%	8 hours, 46 minutes
99.99%	52 minutes, 36 seconds
99.999%	5.26 minutes

What's this Mean?

If your system should be available at all times, a 99% availability means that your system can have almost 4 days of downtime per year! For a system that needs to be available, that is a terribly long time.

Imagine if you have a business critical system that fails. If it was down for almost 4 days, your company could lose millions/billions of dollars! Take for example, when Facebook was down in 2021 for about 7 hours. Their stock dropped 5%, or $40 billion dollars! This was only for a 7 hour outage. Can you imagine if they had just 99% availability and Facebook was down for 4 days?

What should you aim for?

This depends on your system, and usually a probability or downtime measurement (rather than percentage) should be given. "Five 9's" is a common "standard" that systems try to aim for. That is 99.999% availability (hence five 9s). Standards is in quotes because it really isn't a standard, it's just what's commonly mentioned in the industry as a goal to achieve.

Check out this Wikipedia article for more information.

Thanks for reading!
Visit anthonydellavecchia.com for more articles!