Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Perform Different Text Animations With jQuery

When it comes to my name, there is often a lot of confusion. On social media sites such as Twitter, GitHub, and similar, I often go by nraboy which is the first character of my first name (Nic) followed by my last name (Raboy). When people see that, they often think of The National Rifle Association (NRA), which is obviously unrelated to what I’m trying to present myself as. However, due to the NRA acronym being similar to my online handles, I get included on a lot of crazy conversations that I really don’t want to be a part of. In fact, it is one of the main reasons why the blog was rebranded from blog.nraboy.com to thepolyglotdeveloper.com.

Out of this I decided to create an animation showing the obvious. Rather than putting my video editing skills to the test, I decided to create an animation using jQuery and simple JavaScript. In this tutorial we’re going to play around with some text animations using jQuery.

Read More

U2F Authentication With A YubiKey Using Node.js And jQuery

About a week ago I had written about using HTTPS with Node.js and hinted at hardware based two-factor authentication as my reason for needing it. In case you’re unfamiliar with 2FA, there are numerous approaches ranging from HMAC-based one-time passwords (HOTP) and time-based one-time passwords (TOTP) which are software based, to the hardware based universal two-factor (U2F) standard.

If you’ve been keeping up with the blog, you’ll remember I had written a tutorial titled, Implement 2FA with Time-Based One-Time Passwords in a Node.js API, which focused on the software side of things. I recently picked up some YubiKey dongles and thought I’d try my luck with the hardware side of things.

In this tutorial, we’re going to see how to implement U2F functionality in our Node.js powered RESTful API and interact with the API and our hardware dongles using jQuery in the web browser.

Read More

Using An Exit Intent Listener To Manage Popups On A Page

Not too long ago I wrote a tutorial titled, Create an Email Subscription Popup with jQuery, that demonstrated how to create popup modals within your web application. In this example the modals were presented on a timer. If you hadn’t noticed, and I think most people did, The Polyglot Developer was using those modals for newsletter subscriptions exactly as demonstrated in the tutorial. The problem was that changes to the user experience on a timer felt intrusive no matter how long the timer. This was further validated through user feedback.

The feedback, which I always take seriously, lead me to changing how the modals were presented. Instead of using a timer, I had switched them to appear based on the users intent to leave the page or site. For clarity, an exit intent happens when the mouse leaves the website to interact with other things on the computer or within the browser.

In this tutorial, we’re going to see how to take action based on exit intents with simple JavaScript as well as jQuery.

Read More

Create An Email Subscription Popup With jQuery

As you’ll recall, The Polyglot Developer was once using WordPress. Back when I was using WordPress, I was using a plugin called Icegram, which is similar to SumoMe and OptinMonster, but it allowed me to present popups after a period of time to prompt users to subscribe to my newsletter.

I get that not everyone appreciates an annoying popup, but it was great for me because I was getting a lot of new email subscribers very quickly.

Since having dropped WordPress, I haven’t been able to find a plugin that offered similar functionality to what I had. This inspired me to create my own plugin using jQuery that I could use anywhere, including my Hugo powered blog. We’re going to see how to create our own opt-in style popup for collecting email leads.

Read More

Bypass CORS Errors When Testing APIs Locally

Anyone who has worked with a RESTful API using JavaScript knows that testing can be a complete pain if the API owner hasn’t enabled CORS on their server. So what is CORS? According to Wikipedia, it is the following:

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain the resource originated from.

Often API owners will leave CORS disabled even though their API is open to the public. In my opinion it doesn’t feel public if the API owner is not allowing requests from all angles.

Here are a few tricks I’ve picked up in regards to bypassing the awful CORS errors you receive in your browser when testing.

Read More