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:
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));
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:.
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
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
The above focusable and non-focusable
<div>‘s are produced by this code:
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! 😎
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.
SCRIPTER’S DISCRETION IS ADVISED. 😆
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:
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.
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! 😎