Easy Gradient Buttons for Bootstrap v4

I just started a job that is using Bootstrap v4. I’m happy with the functionality but I miss having a not so plain looking button. Here is the CSS code I am using to add easy gradients on my Bootstrap v4 buttons:

.btn {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.15) 51%, rgba(0,0,0,0.05));
    background-repeat: repeat-x;

Here are some example buttons to show you what this change looks like in the wild:

See the Pen Bootstrap v4 Gradient Buttons Examples by Chris West (@cwestify) on CodePen.

As you can tell by the 4 lines of CSS I added, the fix is simple and as seen in the example, the buttons look nice. Let me know what you think and as always, happy coding :cool:.

HTML Hack – Making Any Element Focusable

Recently I have been working on making a simple snake game and wanted to know what my options were for capturing keyboard events other than simply adding event listeners to the body, document, or the window. Amongst the obvious reasons for avoiding adding event listeners globally, I just want to make a prototype that will create one canvas element which will capture keyboard events. After doing a quick Google search I found this awesome article saying that it is possible to make any element focusable.

For example make an element as innocuous as a <div> element focusable by simply defining it’s tabIndex attribute:

  • Clicking on me will give me the focus!
  • Clicking on me will do nothing because I have no tabIndex.

The above focusable and non-focusable <div>‘s are produced by this code:

  • Clicking on me will give me the focus!
  • Clicking on me will do nothing because I have no tabIndex.

As you can see, only the <div> with a set tabIndex is truly focusable. I plan on using this cool hack to make my game’s canvas focusable. I hope you find this neat trick useful as well! 😎

JavaScript – Global Eval Using Data URIs

This post is intended solely to educate and is not to by any means encourage that anyone use this method to globally evaluate JavaScript code. Most JavaScripters avoid eval(), especially globalEval() (like what is provided in libraries such as jQuery), as if it were the plague. Its use can be substantiated in some cases but it is of the utmost importance to consider the risks involved with the two functions.

Since many modern browsers now offer the ability to use Data URIs for more than just images, we could actually use them to essentially run a string of JS code on a page in the global namespace. How so? Here is the code for a simple globalEval() function that can be used in modern browsers such as Chrome and FireFox:

Conceivable Uses

As the jQuery docs mention, one good reason that this type of function exists is to provide a way to execute external scripts in the global namespace. It is important to reiterate that you must use this type of function sparingly, analyzing the reasons why you are using it in the first place.

Another conceivable use would be if you are developing a browser extension that really needs to execute a JavaScript snippet on certain pages. At this point though, if you decide that you want to publish your extension through Google or whichever other channel, that authority may deny your request in the interest to safeguard users from malicious intent. On the other hand, if you are simply creating something like a Chrome extension for private use, I believe you should be able to use this type of approach to execute additional code within pages visited by the user.

Final Words

Much more could be said of the uses of globalEval() and reasons not to use globalEval(), but I like to keep my posts short. If you do find yourself thinking you want to use globalEval(), be sure to calculate the risks (such as possibly running malicious code if it is coming from an external source). Also, this implementation, although very simple, will not work in older browsers such as IE7 (and hasn’t been tested in IE8 or IE9). If you really need a version that has been tested for almost all browsers, I suggest using jQuery’s implementation or perhaps this one. Be careful! 😎