DEV Community: Nathan

Disable Right-Click Context Menu in JavaScript

Nathan — Wed, 06 Oct 2021 07:01:55 +0000

When a user on your website or app right-clicks, the contextmenu event is triggered.

We can listen for this event by attaching an event listener to the window interface, but I'd suggest first adding the below one-liner to ensure compatibility with some older browsers:

typeof window.addEventListener === `undefined` && (window.addEventListener = (e, cb) => window.attachEvent(`on${e}`, cb));

Anyway, here is the actual snippet that will listen for the contextmenu event, intercept it, and prevent the default behavior:

window.addEventListener(`contextmenu`, (e) => {
    e.preventDefault();
});

Here is a one-liner variant that is equivalent to the above snippet:

window.addEventListener(`contextmenu`, (e) => e.preventDefault());

Conclusion

While exploring how you can create custom context menus is a bit beyond the scope of this article, I hope you found this snippet useful.

Remember to only disable context menus when absolutely necessary!

Watch CSS3 Media Queries in JavaScript

Nathan — Sat, 25 Sep 2021 06:57:57 +0000

CSS3's media queries are an essential element of responsive web design.

Here's a simple media query example that increases the font size on screens with larger widths:

p {
    font-size: 14px;
}
@media screen and (min-width: 768px) {
    p {
        font-size: 18px;
    }
}

While media queries provide a handy way for responsively updating CSS values, you might also want to perform certain actions based on the current screen width using JavaScript as well.

This is a snippet that recreates the above CSS example in JavaScript:

const update = (mediaQuery) => 
    !!mediaQuery.matches
        ? document.querySelectorAll(`p`).fontSize = `18px`
        : document.querySelectorAll(`p`).fontSize = `16px`;

const query = window.matchMedia(`screen and (min-width: 768px)`);

update(query);

You can also listen for changes to query:

query.addListener(update);

And you can of course include whatever code you want in the update function, and you can pass any other kind of valid media query to it as well. This is just an example.

Getting the current screen dimensions

If you just want to get the dimensions of the browser window in JavaScript, there is a better way:

const width = window.screen.width;

const height = window.screen.height;

The above code will return the integer value of the screen width and height, in pixels. However, the returned values won't automatically update each time the screen is resized.

Conclusion

Anyway, I hope you found this quick little snippet useful!

It's great for running a function each time the screen is resized, among other things.

Autocorrecting Typos in Git Commands

Nathan — Fri, 24 Sep 2021 05:57:01 +0000

Git offers extensive configuration.

There are several "gold nugget" options buried within the available configuration, and help.autocorrect is no exception.

By enabling it, whenever a typo in a Git command is detected, Git will automatically run the correct command after a custom period of time:

git config --global help.autocorrect 10

That 10 at the end of this example command is equivalent to one second. Each integer is 0.1 seconds, so 5 is 0.5 seconds, 20 is 2 seconds, and so on.

1 is the minimum, but as far as I am aware, there is no maximum (within reasonable limits of course). You could prolong the delay a bit, giving you a chance to cancel the command if needed.

Anyway, once it has been enabled, let's suppose you typed the following command, which is intentionally misspelled:

git comit -am "example commit"

You'd then get the following output:

WARNING: You called a Git command named 'comit', which does not exist.
Continuing under the assumption that you meant 'commit'
in 1.0 seconds automatically...

Pretty neat, right?

Disabling autocorrect

To disable autocorrect, you can run the following command:

 git config --global help.autocorrect 0

Conclusion

I have many more Git tricks in my collection that I look forward to sharing on this site, and I hope you found this one useful!

Thanks for reading.

Get Number of Days in Month Using JavaScript

Nathan — Thu, 23 Sep 2021 07:04:38 +0000

JavaScript's highly extensible getDate method can be customized to fetch the number of days in a given month.

However, the number of days in a given month can vary from year to year. So this function accepts both a year and month parameter, then returns the number of days in the given year and month:

const getDays = (year, month) => {
    return new Date(year, month, 0).getDate();
};

Here's an example of how you could use this function:

const daysInSeptember = getDays(2021, 7); // Returns 31

You might also just want to pass in the current year, depending on your use case:

const daysInSeptember = getDays(new Date().getFullYear(), 7); // Returns 31

Conclusion

getDate() is a very powerful method that does a lot of the heavy lifting for us, so this is actually a really simple function.

Thanks for reading!

Block a List of IP Addresses in PHP

Nathan — Sat, 18 Sep 2021 07:03:32 +0000

Here's a simple PHP snippet that you can place at the top of a file to determine whether the IPv4 address of a request is blacklisted:

$blacklist = array(
    '127.0.0.1',
    '192.168.1.1',
    // etc.
);

$ip = isset($_SERVER['REMOTE_ADDR']) ? trim($_SERVER['REMOTE_ADDR']) : '';

if (($key = array_search($ip, $blacklist)) !== false) {
    echo 'You are forbidden from accessing this resource!';
    exit();
}

// If the process has not exited, then the IP address is not blacklisted.

You could also pull a list of IP addresses from a file:

    $blacklist = file('blacklist.txt', FILE_IGNORE_NEW_LINES);

In the above example, each line of blacklist.txt should contain a single and unique IP address.

Adding a 403 response code

If you haven't already, you might want to consider responding with a 403 error:

http_response_code(403);
echo trim('
    <!DOCTYPE html><html><head><title>403</title></head><body>You are forbidden from accessing this resource!</body></html>
');
exit();

Conclusion

Anyway, this is just one of many simple ways to block a list of IP addresses from accessing a resource on your PHP server.

If you're running into issues, remember to add this snippet to the top of the files you want to add it to!

Reading URL Parameters in JavaScript

Nathan — Fri, 17 Sep 2021 07:01:21 +0000

Consider the following URL:

https://example.com?shape=circle&color=red

What if we wanted to extrapolate shape, color, and any other query parameters from that URL using JavaScript?

Well, one approach would be by using the very handy URLSearchParams object:

const url = window.location.href; // The URL of the current page

const params = new URLSearchParams(url);

Once you've constructed an instance of URLSearchParams with a valid URL, you can start working with the URL's parameters:

const shape = params.get(`shape`);
const color = params.get(`color`);

However, it's important to first check whether the URL parameter that you're trying to read even exists in the first place:

if (params.has(`shape`)) {
    const shape = params.get(`shape`);
}

Conclusion

That's about it!

Working with URLs in JavaScript doesn't necessarily require writing tedious regular expressions or parsers. Instead, it can be a very simple and readable process.

Flipping Images in CSS

Nathan — Tue, 14 Sep 2021 06:57:47 +0000

CSS makes flipping images easy.

Here's how you can flip an image horizontally:

img {
    transform: scaleX(-1);
}

While this line alone will work in most modern browsers, the following is a more broadly compatible snippet that serves the same purpose:

img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

Flipping images vertically

You can also flip an image vertically in a similar fashion:

img {
    transform: scaleY(-1);
}

Once again, I'd suggest adding some extra lines for compatibility with older browsers:

img {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

Flipping images diagonally

This process is really more of a rotation than a "flip", but the following code will turn an image by 90 degrees clockwise:

img {
    transform: rotate(90deg);
}

This works for any degree value between zero and 360. Negative values are valid as well.

Conclusion

You can rotate other elements than just images using these snippets, but I typically find myself flipping images whenever I have to flip an element.

Thanks for reading.

Checking for Reduced Motion Preference in JavaScript

Nathan — Mon, 13 Sep 2021 06:59:30 +0000

When animating elements with CSS, you can use a snippet such as the following to disable animations for users with browsers that request reduced motion:

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}

However, some fancier animations actually require JavaScript effects.

You can still disable those animations for users that request it by checking for those requests using the following code:

const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;

if (!!isReduced) {
    // DON'T use an amination here!
} else {
    // DO use an animation here!
}

And that's about it! The media matching function is an extremely powerful built-in feature supported by most browsers, and this is just one of the many excellent use cases for it.

Conclusion

I hope you enjoyed this brief little tutorial. It's just a few lines of code that can make a massive impact on the experience of some of your users (probably more than you might expect, in fact).

Thanks for reading!

Custom Bullet Point Colors With CSS

Nathan — Sun, 12 Sep 2021 06:59:57 +0000

By default, HTML bullet points inherit the color of their text.

However, there are times when you might want to make your bullet points a different color than the inheritance.

So, let's start by removing the default bullet point altogether:

ul {
    list-style: none;
}

Next, let's replace the removed bullets with new ones, making sure to specify a new color:

li::before {
    content: "\2022";
    color: #00f; /* Blue */
}

That funny little \2022 Unicode character renders as this bullet point symbol: "•".

You can also use \25E6 for a hollow bullet point ("◦") and \25AA for a boxed bullet point ("▪").

Customizing numbered list colors

Coloring numbers in numbered lists is similar to coloring bullet points.

First, remove the default number:

ol {
    counter-reset: li;
    list-style: none;
}

Then, just add a display, position, and color to some new numbers that will automatically increment with each <li> element:

li::before {
    color: `#00f`; /* Blue */
    content: counter(li);
    display: inline-block;
    margin-left: -1em;
    width: 1em;
}
li {
    counter-increment: li;
}

If you want to learn more about counters in CSS, W3Spoint has a nice write-up on them. But exploring them further is a bit beyond the scope of this tutorial.

Conclusion

I often find it necessary to modify the color of my bullet points when I'm building sites and apps, so I hope this helps you too!

Merging Two or More Arrays in JavaScript

Nathan — Sat, 11 Sep 2021 06:28:06 +0000

There often comes a time in JavaScript when you need to combine two or more arrays.

I'll begin with a basic example, demonstrating how you can easily combine just two arrays into one:

const arrayOne = [1, 2, 3];

const arrayTwo = [4, 5, 6];

const mergedArray = arrayOne.concat(arrayTwo);

In this example, mergedArray will return [1, 2, 3, 4, 5, 6].

Merging multiple arrays

We can also use the concat() array method to merge more than two arrays together:

const arrayOne = [1, 2, 3];

const arrayTwo = [4, 5, 6];

const arrayThree = [7, 8 , 9];

const mergedArray = arrayOne.concat(arrayTwo, arrayThreee);

And in this example, mergedArray will return [1, 2, 3, 4, 5, 6, 7, 8, 9].

What's nice about concat() is that it uses a spread operator, so you can pass in as many parameters as you want, and they'll all get sequentially merged.

Removing duplicate values

Sometimes when merging arrays, you'll want to dispose of duplicate values.

Here's a quick snippet that'll do just that:

const arrayOne = [1, 2, 3, 4, 5];

const arrayTwo = [4, 5, 6, 1, 2];

let mergedArray = arrayOne.concat(arrayTwo);

mergedArray = mergedArray.filter((item, i) => mergedArray.indexOf(item) === i);

In this example, mergedArray will return [1, 2, 3, 4, 5, 6], the aggregate of arrayOne and arrayTwo in order and without any duplicates, as expected.

Conclusion

There's other ways to go about merging your arrays, but I've always found concat() to be the most practical.

I hope you enjoyed this quick little tutorial! Thanks for reading.

Shorten Your CSS Selectors With The :is Pseudo-Class

Nathan — Fri, 10 Sep 2021 06:41:27 +0000

One CSS feature I wish I knew about long before I discovered it is the :is pseudo-class.

You can use it to shorten some of your longer selectors.

For example, consider the following declaration block:

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    /* some styles would go here */
}

Seems a bit repetitive, right?

Now, here's how our code would expand if we wanted to add a class to each <a> tag:

h1 a.class, h2 a.class, h3 a.class, h4 a.class, h5 a.class, h5 a.class {
    /* some styles would go here */
}

We'd have to re-type ".class" six times.

And this is just one small example of how the :is selector can save you some keystrokes:

:is(h1, h2, h3, h4, h5, h6) a {
    /* some styles would go here */
}

In this case, if we wanted to add that same class from earlier, we'd just have to type it once, instead of six times:

:is(h1, h2, h3, h4, h5, h6) a.class {
    /* some styles would go here */
}

So basically, all it does is iterate over each comma-separated internal selector and apply it to the sibling or child selector.

Performance implications

One important thing to remember about CSS is that subtle differences in selector syntax can carry exponential impact on performance.

For example, "div > p" is far less performant than "div p", because browers interpret selectors from right to left. While this is something I might write about more in the future, it's beyond the scope of this post.

So as far as the :is selector goes, I just want to note that pseudo-classes (including :is) are the most inefficient selector type.

Also, the browser compatibility could be improved. I'd strongly suggest looking into some backwards-compatible pseudo-classes with the same functionality, such as ":matches()".

Conclusion

I hope you enjoyed this article, and I hope it saves you some time in the future!

Besides, who wants to sit around and rewrite each selector six times every time there's a small change?

Formatting Currency Values in JavaScript

Nathan — Thu, 09 Sep 2021 06:47:49 +0000

Did you know that JavaScript can save you from the burden of manually formatting currency values?

The built-in Internationalization API's Number Formatter offers many useful methods.

Here is a basic example:

const num = 21489.524;

const dollars = new Intl.NumberFormat(`en-US`, {
    currency: `USD`,
    style: 'currency',
}).format(num);

In this example, dollars will return "$21,489.52".

Pretty neat, right?

JavaScript inserts the specified currency symbol in the right place for us, which in this case, is USD.

It also adds commas and decimals based on the style (currency), and places them according to the localization code (en-US).

SIX maintains a list of supported currency codes. Localization codes are in BCP 47 format.

Here is one more example, using Euros and European formatting instead:

const num = 21489.524;

const euros = new Intl.NumberFormat(`fr-FR`, {
    currency: `EUR`,
    style: 'currency',
}).format(num);

This time, euros will return "21 489,52 €".

Conclusion

This is something I use quite often, and it's saved me a lot of time.

I wish I knew about it sooner, and I hope you find it just as useful for formatting your monetary units on the fly!

Thanks for reading.