Thursday, January 05, 2017

Front-end Web Development Things I've Been Learning Lately


How to tell the server what type of data you want back from an http request using the "q" syntax. The "Accept" header, of course, sets the types you want returned. The "q" variable tells your preference for each type. "q" is the quality, with 1.0 meaning you want this type above all, a lower value means you don't want this type as much. So in this example we want both json and xml, but we want json more.

Accept: application/json;q=0.8,text/xml;q=0.7

And remember, "Content-Type" tells the server the format of the POST data you are uploading.

Content-Type: application/json
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: