Recently I made a startling discovery. I discovered that the inclusion methods for JS and CSS in a regular HTML document are not as alike as they may seem. So I'm posting a post to let the world take part in my recent revelation. It's best shown with an example, so here goes.

Say I have a site with a file structure like this:

/root/
/root/files/css/
/root/files/img/
/root/files/js/
/root/en/
/root/sv/

In one stylesheet, located on /root/files/css/style.css I include an image file with the following URL: url(../img/prev.png)

However, in a JS file, located on /root/files/js/script.js I have to include the same image file with the following URL: '../files/img/prev.png'

It took a while before I realized this, and realized why there's a difference. The reason is simply that JS is imported directly into the page where it is included, just like any other server-side scripting language (like PHP, ASP, ETC), so if I include the JS file on /sv/index.html, then that is where the code is executed, whereas the CSS file remains its own directory and styles the HTML page from a distance. When I include the CSS in /sv/index.html, the CSS is still located at /files/css/style.css.

Is this one of those 'aha' moments everybody has, or is it just me? Hopefully it's not just me; it might be worth knowing. Thus the post. Have a good day!

I've been working with Dreamweaver to develop sites for a long time (even this one is made with Dreamweaver). During my work, I use the search and find feature rigorously, to replace things like a certain ID or CLASS in an entire document, or to batch remove all the <p></p> tags that are automatically created between all images in a blog post, or to perform a surplus of other find and replaces that really simplify things for me.

It wasn't until recently that I was put in a situation where simply searching, finding and replacing did the job. I think that I had different HEX values included within <span> tags this specific time, and I had to remove all of those HEX values between the tags and replace them with a default value. Normally, I would have just replaced them by hand in this case, but for this particular operation there were hundreds of span tags. I saw the 'use regular expression' checkbox at the bottom of the search and replace box (which you get by pressing CTRL + F btw), and I decided to check online for some useful tutorial on how to do what I wanted!

Now I'm not going to dive into regular expressions with this post, I'm just going to post one regular expression that will probably do all the work you'll ever need done that you just can't do with regular search and replace, namely replacing content in a specified area regardless of content value. If you want to dive into the more complicated things you can do with Regular Expressions, Google it, there's plenty of information. All this post is going to contain is this: [^"]*

So, what does this strange assortment of characters actually do? Here's an example. Say you have these three lines in your code:

<span class="color">#FFFFFF</span>
<span class="color">#000000</span>
<span class="color">#333333</span>

Now, to replace only the HEX values, the only piece of the content where each value is different, you open your search and replace box (CTRL + F btw) and enter this: <span class="color">[^"]*</span>

In the replace box, just replace those symbols with whatever you need to replace them with, like so: <span class="color">New Value</span> Piece of cake, no? I should have learned this trick years ago. :)

The <sub> & <sup> can be pretty useful if you want to write things like the 1^st or reference₁ and make it look professional, but they can also distort the line-height for certain lines. The solution? Style them!

The default style for <sup> a element is vertical-align: super and the default for a <sub> element is vertical-align: sub. Surprising, huh? :) If you didn't know you can vertically align any element like <sub> & <sup> by default. But anyway, try styling <sub> like this:

	sub {
	vertical-align: bottom;
	font-size: 6px;
	}

For <sup> you could do:

	sup {
	vertical-align: top;
	font-size: 6px;
	}

That should align the little text at the top and bottom of the line, instead of giving it a fixed height. If you don't want to use px for the text, 0.6em would work too. If the above doesn't work, you could also add line-height: 0px or mess around with the margin. You should see that it's working well on this post! :)

* Just a reference.

Working through my stylesheet I came across a :focus tag with the outline:0; attribute. I think it might have something to do with the spoiler tag that I started using a while back, but of course not outlining areas of focus won't be a good idea for everyone.

I tried styling the :focus element a bit, but since it's an attribute that works on all elements on a page the results didn't look that good. Adding a border made tags like <h1> look strange, and adding only <color> made some elements lose focus completely, like navigation elements that override color. If I added :focus at the end of the styelesheet, or used the !important attribute, that would solve it, but the navigation elements would look strange with a different color. I'd have to change background color too. Actually, I'd probably have to add separate :focus attributes for many of the different elements on the page and style them differently.

So, I just got rid of the :focus instance completely. If people actually use a keyboard to navigate the site, let the browser style it for them. The default style for the outline tag seems to be a border: #same-as-links thin dotted; style btw. Just remember, don't null out the :focus element! Some visitors probably won't be very happy.

Stack Overflow is a programming Q & A site that’s free. It's a place where people ask questions and get a lot of answers. I'm not a member of the community myself, yet, but every time I'm wondering about some aspect of code and go Google it, Stack Overflow usually tops the results! It's a simple site, with a clear layout and tags for the different types of questions, and a lot of helpful/knowledgeable users. It's a site worth knowing about! I think I'll sign up right now...

So, lately I've been occasionally bugged by an HTTP error when uploading images. At first I didn't think much of it, I thought there was something wrong with the image file, so I ran it through FastStone Photo Resizer (a program I use to compress/resize most images I upload) and that fixed the problem. Many days passed.

Then today I was about to post about a new pair of shoes and the error popped up in a red box. I had already resized the picture, and sizewise it was down at 418kb, so there should be no problem with the file. I tried uploading a few times, and each time it got stuck at 92%. I tried uploading the original file (around 2MB) and it got stuck at 99%. At this point I was thinking there was some problem at the end of the file (EXIF camera information maybe?) since I hadn't uploaded a photo in a while, but then I tried making the file a LOT smaller (10%), and it uploaded fine!

I checked support threads and people spoke about the Smushit plugin giving the same error, but I don't have that plugin installed (no sense in resizing the image after upload, I do that before uploading). I checked my plugins anyway, to see if any of them were suspicious, and then I checked my error_log. Guess what, exhausted memory limit was the error. I found a bunch of other plugins misbehaving too, but that's outside the post, the exhausted memory limit was easy to fix, and I'm surprised I haven't 'fixed' it earlier! Maybe my host didn't allow modification of the PHP RAM limit earlier. Anyway, the fix is this:

define('WP_MEMORY_LIMIT', '32M');

Just add that to the wp-config.php file. That's it. You could change the .htacess file or the php.ini file too, it'll do the same thing. I tried uploading again after this quick edit and the error was swept away. I might be imagining things, but I feel like the site overall is a bit faster too. Maybe this will even get rid of those occasional pesky 502 errors that sometimes bother me! Maybe this tip is useful for some other lost soul looking to fix their HTTP errors. If you didn't know it, now you know. :)