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, "event.target", instead.


function myFunc(event) {
   var target = event.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= event.data.size;
    var colour= event.data.colour;




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

 $('#MyFormId').submit();                        




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;
@media(min-width:@screen-sm-min){
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:
    true
4.  Right-click and select "Reload Project".



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



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: