Thursday, January 05, 2017

Front-end Web Development Things I Learned Recently

How to tell if a variable is exactly 5 numbers?  Use a regular expression in JavaScript:

 function isVariableFiveDigits(zipCode) {
    return /^(\d{5})$/.test(zipCode);;

Why can't Firefox read my "event.srcElement"?
"srcElement" was an IE thing.  Use the standard, "", instead.

function myFunc(event) {
   var target = || event.srcElement;
   var myData= $(target).data('my-data'); 

 How to make an anchor tag look disabled when it is "disabled":

.myAnchorClass[disabled] {
    opacity: .5;
    cursor: not-allowed;

How to get the "data" attribute value from an element example:

   <input type="text" data-target-color="red" onkeyup="myFunc(event)" ... />

function myFunc(event) {
   var targetColor = $(event.srcElement).data('target-color');

What's the difference between a "rem" and an "em" in css?
Both set the font-size based on ancestors, but "rem" always looks at the top root element, while "em" starts looking upward through its parents to find the first one with a font-size defined.

When removing an "href" in an anchor tag (and using the 'click' attribute instead) how to make the cursor look like it's over a link:

a.myClass { cursor: pointer; }

How to stop iOS from making input elements have rounded corners that look like a button:

#MyInputId {
    border-radius: 0;

How to pass arguments to a jQuery click function:
 In a Razor page I assign event data from our ViewBag to variables to be passed to "myFunction":
  $('#myButton').click({ size: "@ViewBag.size", colour: "@ViewBag.colour" }, myFunction);

In the receiving function the variables are in the event's data object:
 function myFunction(event) {
    var size=;
    var colour=;

How to trigger a form submit from JavaScript in .Net MVC:


How to make a banner stay at the bottom of the screen:

.myClass {
    position: fixed;
    bottom: 10px;
    z-index: 100;
    min-height: 100px;

How to use media queries for responsive design:

in variables.less:
@screen-sm-min:              768px;

in regular less file:
 .close-button, .close {
opacity: 1.0;
margin-top: 27px;
margin-right: 40px;

To force Visual Studio to warn you about Razor page errors during compilation, have it pre-compile those pages:
1.  Right-click on the Project and select "Unload Project".
2.  Right-click and select "Edit *.csproj"
3.  In the csproj file set MvcBuildViews to true:
4.  Right-click and select "Reload Project".

To search all files with names matching "*.shtml" and replace "" with ""
 find -type f -name "*.shtml" -exec sed -i "s/http:\/\/\/\/" {} \;

How to get rid of some network calls in the Chrome debugger?
In the Chrome debugger, under "Network" you can exclude calls with a particular string by prefacing it with a "-".  For example, to get rid of all calls with "transport", do this:

No comments: