Web Design Tips and Tricks

On a 2560-pixel monitor, the text column of my blog was 867 pixels wide. Not 33%. Not the result of a media query. Eight hundred and sixty-seven pixels, at every window size, forever. Here is how I found the number, and what a fourteen-year-old Blogger template teaches about how layouts get stuck. The template is Awesome Inc. , designed by Tina Chen and shipped with Blogger since around 2011. If your blog is more than a few years old there is a decent chance you are running it, or one of its siblings, and a decent chance you have already tried to widen it from the Template Designer and failed. The reason you failed is interesting, so let's do the archaeology properly. Finding the number Start by not opening dev tools. Open the template XML and search it for every declaration that sets a width. You are looking for one specific thing: a length that is not a percentage. A fluid layout that feels cramped is a padding problem. A layout that is exactly as wide on a ...

https://stackoverflow.com/questions/2805977/how-do-i-call-a-javascript-function-after-selecting-a-file-from-the-select-file I have a file input element < input type = "file" id = "fileid" > How do I call a JavaScript function after selecting a file from the dialog window and closing it? Yikes! No answer marked right and the most upvoted says : jQuery ("input#fileid") .change (function () { alert (jQuery(this) .val ()) }); I say : OMG All you need to do is  <input type="file" onchange="calledFunction()"> FYI, to use the Duke Javascript Library , in your HTML (say in Codepen) : <script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script> What they didn't do a terrific job of covering in the course (or their documentation) : whether SimpleImage objects can be passed to/from functions? Ans : Yes, just do var name_of_var = function_that_returns_SimpleImage(args...

Another priceless one - a must do every few weeks. With practice, you should be able to build this one in about five minutes of coding - that's what it'll take to reach an elite level. Ok, I hadn't gotten the width-setting right at this point - because I hadn't yet used onchange="functionName()" . It's really simple - I thought you needed something elaborate (like this ) to be able to process the text-field when ENTER was pressed. But, no. You only need that to do a Google-suggest kind of autocomplete function.. To send the field value, functionName(this.value) . Powerful stuff :) Be sure to use input validation - check that the text field is numeric. https://codepen.io/chipdesigner/pen/poONPrQ