#coding tip

I have always been weary of giving theme users complete control of the width of posts on a theme. What if they set it a ridiculously small or large post width? Here is a way to restrict that.

<meta name="text:Post Width" content="350" />

#posts {     width: {text:PostWidth}px;     min-width: 250px;     max-width: 550px; }

💻 3 JavaScript tips your senior dev swears by! From cleaner code to error-free logic, this is how pros write JS. Need a team that codes like this every day?

Standard YouTube video embeds usually adds some  extra weight to the page thus increasing the page load time. With this hack you can load YouTube video player on-demand and it’s responsive too. 

Today in "things that make no sense to me"...

You can have a ListView of rows that contain EditTexts.  You can specifically state that they are focusable, editable, whatever, but on my phone (and I'll assume some others since the fix was found on StackOverflow) as soon as you click on the EditText to, you know, edit the text, your keyboard pops up and the EditText loses focus so any keyboard buttons you push don't register! Why this occurs is beyond my understanding and apparently my mentor's too as we've spent literally weeks trying to figure out what was going wrong, who was absorbing our touch/focus, and how to fix it.  To make matters more confusing, everything worked fine on his phone, a Genymotion emulator of my phone (Moto X), and other Genymotion emulators.

One line. One line in the manifest and your worries are forgotten. 

android:windowSoftInputMode="adjustPan"

You just have to put that in your manifest and magically everything works the way it should have worked in the first place.

So I've spent a large portion of the past few days working on a new iteration of my portfolio website so it's easier to use, not as difficult for me to work with personally as far as content is concerned, and is also compatible with browsers that don't have JavaScript enabled.

Though frankly I'm bewildered as to why you feel it necessary to disable JavaScript at all, unless you're browsing some really dodgy areas of the net, but I won't judge you.

So at first I thought about sticking largely with the previous design I'd been using where I'd had a box in the middle of the page. This box and its contents would resize themselves to fit the dimensions of the browser window; on smaller screens and down-sized windows, all the content would fit, whereas on larger screens it would make use of the entire window without leaving a bunch of unused space.

This seemed like a good idea at the time, but I realise now that it would be both a pain for me to make happen - certainly without use of JavaScript - but would also mean that below certain screen resolutions the content would become increasingly difficult to read, at the very least.

With this in mind, I decided I'd just go back to the more traditional design of a large central content column; incidentally, a name I feel should be adopted more commonly for such a design. Alliteration always accrues awesomeness.

Anyway, advancing awkwardly, I didn't want to stick purely to a design involving straight edges everywhere, but also didn't want to have anything too "out there" thematically speaking, so after toying with the ideas of either jagged polygons or curved edges and rounded borders, amongst other things, I came to settle on "disorganised" rectangles - simple, easy to make work, and also conveniently open to a simple layout without having to compromise and have too much unnecessarily unused space.

At this point I got into the HTML and CSS, which as always is where you start having problems with your design. I wanted to add a menu to the site, rather than having to use a navigation bar in the traditional sense, so thanks to the miracle of the :hover pseudo-class, a few tricks with display: none; and display: table; I was able to make the menu look good without having to make either it or the individual menu options fixed-width or have to mess around with JavaScript - which I've so far avoided having to touch at all.

I then plonked this into a header bar affixed to the top of the viewport, without having to affix it to either side (thanks again to the miracles of CSS, specifically position: fixed; by default not affecting the offsets of elements) and added text on the right for a page title display.

The next part of the design involved making the center column look like it had these jagged-rectangle edges; I thought about placing the main content inside one <div> element and having the background image be one large image behind the entire thing, but decided against this as it'd force me to make a large PNG for this background, which would make the page load time rocket on slow connections, and it would mean having the whole page display empty space for a large count of pixels on a smaller screen and make scrolling around it awkward, which I also wanted to avoid.

In the end I came up with the idea where the backing design and the content were separate, so the content could be scrolled independently on smaller screens, with the added bonus of the background on a smaller screen not being forced onto it pointlessly.

Then finally the content itself had to be able to have images per-piece as thumbnails, but have the content wrap around them in the case where I'd be writing a lot of description text.

First off, in the case where the description were smaller than the thumbnail(s) height-wise, it would mean having to force the image to float on the left of the text inside the element, which as most web developers will know, means that the parent element naturally ignores the size of the floated element.

The commonly-used and sadly accepted solution WAS to add an extra element and use a CSS trick utilising the clear attribute - but instead you can instruct the parent element, using overflow: auto;, to handle overflowing content including floating elements, it will achieve the same thing in a much neater manner.