Always Get Better

Posts Tagged ‘HTML’

Speed Up Page Load By Tricking the Browser

Saturday, November 25th, 2017

Nettiquette is built into web browsers. When you go to download a page, its contents will load in at a max of 2 files at a time (by default). So if there are 12 CSS and JS files, you’ll only get 2 at a time until you load them all.

The good news is you can trick browsers into doing more at a time.

Enter subdomains.

Offload your CSS to css.yoursite.com, and your JavaScript files to js.yoursite.com. Now your website will load 6 files at a time (2 CSS files, 2 JavaScript files, 2 HTML/Image files from your main site).

It doesn’t matter if each subdomain is pointing to the same website. Web browsers go by the site URL and nothing more.

HTTP/2 is supposed to eliminate this problem, of course, but in the meantime doing this helps when you can’t crunch down your files any more.

Tags: , , ,
Posted in General Programming, Web Programming | No Comments »

Humans.txt – the Anti-Robots.txt

Saturday, January 14th, 2012
Mimbo - A Friendly Robot
Creative Commons License photo credit: langfordw

If you don’t want a search engine to read some or all of the files on your site, you can create a robots.txt file. (Looking through the blog archive, I realize I’ve never gone through the construction and contents of that important file, so this is a promise to one day return and fix that!)

When you want the opposite – accessible pages and author credit, create a humans.txt file. Although not an “official” standard, it is a fun way to acknowledge the (sometimes many) hardworking individuals behind the creation of a web site.

An example is:

/* TEAM */
Leader: Mike Wilson
Site: http://www.alwaysgetbetter.com
Twitter: HawkWilson
Location: Ottawa, ON

/* THANKS */
Seth Godin: http://www.sethgodin.com
Steve Pavlina: http://www.stevepavlina.com
Phil Haack: http://haacked.com

/* SITE */
Last Update: Jan 14, 2012
Standards: HTML5, CSS3
Software: WordPress

In most cases, you would want to include at least a TEAM and SITE section. Clearly the exact fields are left to your imagination, but it’s a very simple way to acknowledge the people who helps (directly or in spirit) a site to get to fruition.

For more information about humans.txt, check out the initiative’s home page at http://humanstxt.org/.

Tags: ,
Posted in Web Programming | No Comments »

CSS Sanity: Remember Best Practices When Using New Tools

Monday, February 15th, 2010

Now that the rebellion against IE6 has hit mainstream, a brave new world of CSS3 and HTML5 has been opened to web professionals.

Beware Mixing Purposes
CSS is intended to define the appearance of elements, not their behaviour. Be very careful about “overloading” CSS to accomplish tasks best performed by JavaScript.

A popular example of poor CSS usage is drop-down menu lists. Some web programmers use CSS’ :hover selector to instruct the web browser to display sub-navigation when the user hovers over a list item.

ul#menu li:hover ul { display: block; }

This is much better accomplished using a touch of jQuery:

jQuery("ul#menu ul").css({display: "none"}); // For Opera
jQuery("ul#menu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible", display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});

Not only is this example less dependent on consistent web browser support for the CSS :hover selector, we’ve even thrown in a spiffy little roll-out animation.

Keep It Simple
The nth-child selector is one that stands to be abused by overzealous developers. Imagine this: change the display of every nth element as defined through an algebraic expression.

Why is this a bad thing? CSS is run in the same memory space as the general web page – that’s why it’s so fast. JavaScript tends to be isolated; meaning if you make an infinite loop in JavaScript, the web browser will eventually stop it from running. If the same thing happens in CSS, your web session is probably toast.

Separate Logic from Presentation
CSS was a leap forward because it separated presentation from structure; rather than programming font and colour elements, designers were able to explicitly control the way their web page appeared on screen. HTML was being used to serve the purpose CSS was designed to cover.

More recently, CSS has become a crutch to enable functionality better suited for JavaScript. When unsure about which to use, ask yourself: Does this solution affect only the display, or is some action happening?

Tags: , , ,
Posted in Web Programming | No Comments »

BrowsrCamp – Test Web Designs on Mac

Friday, November 13th, 2009

At last, remote desktop has a practical use!

If you are working on a web design and need to see how it will look on Mac, your only choice up until now has been to buy a low-end Mac. That’s an expensive proposition for occasional use. If you’re a web designer by trade you are probably already using a Mac anyway, but for the rest of us there is finally a better choice.

Head on over to BrowsrCamp – for a pittance ($3 gets you 2 days of access) you get to control a machine running OS X.

You can use VNC to connect to the server; if you don’t have or can’t install VNC, BrowsrCamp offers a web interface so you can access the machine directly from your browser.

It’s such a simple, wonderfully executed concept that should be in any programmer’s bag of tricks.

Tags: , , ,
Posted in OS X | No Comments »

Python file upload

Friday, January 2nd, 2009

I recently needed to handle file uploads from a Flash form post using CGI and Python. I made two discoveries:

  1. Python’s CGI library ignores query string variables on POST requests.
  2. After you’ve done it once, working with POST variables whether uploaded files or otherwise is dead simple!

Here is the file I came up with:

[source:python]
#!/usr/bin/python
import cgi, sys, os

UPLOAD_DIR = “/home/user/uploads”

postVars = cgi.FieldStorage()

if postVars.has_key(“myFile”):
fileitem = postVars[“myFile”]

# If myFile doesn’t contain a FILE, exit
if not fileitem.file:
return

# Strip file extension
(name,ext) = os.path.splitext( fileitem.filename )

# If a binary file, ensure write flags are binary
if ext == “.jpg” or ext == “.png” or ext == “.gif”:
ioFlag = “wb”
else:
ioFlag = “w”

# Save file data to disk stream
fileObj = file(os.path.join(self.path, fileitem.filename),ioFlag)
while 1:
chunk = fileitem.file.read(100000)
if not chunk: break
fileObj.write(chunk)
fileObj.close()
[/source]

Bonus points for checking for and creating a new directory to store the uploaded file in, if needed.

Tags: , , ,
Posted in General Programming | No Comments »

Replacing / Adding Line Breaks in GridView Text

Tuesday, May 27th, 2008

The GridView is a powerful control for quickly and easily displaying tables of data. However, a raw dump of information is not always good – when displayed by a web browser, normal line breaks are simply rendered as spaces.

For long blocks of text, it may be desirable to have your GridView insert HTML line breaks into your data. This can be accomplished either programatically or declaratively.

Programatically

As a programmer, my first instinct is to try to solve the problem using code behind. I add a RowDataBound event handler to my GridView and create the command this way:

protected void gvMessageList_RowDataBound(object sender, GridViewRowEventArgs e)
{
GridViewRow row = e.Row;
if (e.Row.RowType == DataControlRowType.DataRow)
{
row.Cells[2].Text = row.Cells[2].Text.Replace("\n", "<br />");
}
}

Although it works, it has several drawbacks:

  • This solution uses a magic number to cause the compiler to replace the third column in the row.  If the structure of the GridView were to change, this function may break
  • This solution requires the developer to be aware of the final layout of the GridView and to make the connection between the control’s declaration and its logical code.

Use The Design

By far, the better solution is to simply declare the formatting changes in the same place as the GridView.  Using a Template field, I can add line breaks to my message by adding this:

<%# Eval(“Message”).ToString().Replace(“\n”, “<br />”) %>

More Information

This solution assumes the contents of “Message” are not null.  For more information about this technique (including how to deal with null values), I recommend the ASP.NET message boards: http://forums.asp.net/p/1027728/1403884.aspx

Tags: , ,
Posted in ASP.NET, C# | 8 Comments »