Thursday, January 05, 2017

Web Development Things I Learned Recently



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: