Since the beginning of the web, there are certain layout patterns that have emerged as “standards.” Examples include the main navigation at the top, left or right sidebar with additional information or navigation options, and body content taking up the remainder of the space. While there are definite deviations from this basic layout (not top...
Typography is another area that can trip up even experienced designers. But like color theory, there are some great tools out there that can help. Typographic hierarchy is one of the first things a designer-developer should learn. The relationship between different type elements in a design is vital to making that design more usable. At the very...
Color theory is one of the most complex aspects of visual design. Changing shades slightly can completely shift the visual impact and emotional effect of a color. It’s one reason many designers who have been in the industry for years still struggle with color. While many books have been written about color theory, there are some very basic...
Before diving into the visual principles of color, typography, and layout, it’s important to talk about basic usability. The most aesthetically pleasing design in the world is useless if it’s not usable. One of the most important usability principles is the idea of consistency or predictability. Designs should be predictable enough that users are...
A lot of designers resist designing directly in the browser, as it generally means they need to be comfortable writing at least basic HTML and CSS code. That’s the exact reason why it’s often a great fit for developers getting into design—they’re already comfortable writing code. There are tools that can help with designing in the browser and can...
According to data provided by OpenSignal, there are now 24,093 distinct Android devices on the market, up from 18,796 just last year (and this isn’t even counting iOS and other devices). This incredible diversity makes it impossible to target individual devices. Instead, you must focus on screens. Using screen size instead of device...
Yes, I hate responsive design. But because it’s what Google expects. I find myself butting my head against the wall over the ugly small component based websites that are now everywhere online. And I hate it. When Web-enabled devices first came out, the “m” subdomain bandwagon happened. For those of you who don’t remember it, that was back when...
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? The Page Visibility API allows developers to react to changes in page visibility via the visibilitychange document event. New...
The Page Visibility API provides developers an event to listen in on, telling developers when the user focuses on a page's tab, and also when the user moves to another tab or window: // Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var...
The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval: // Find the right method, call on correct element function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen)...
HTML coding is used to display webpages on the screens. In Chrome, if you right-click an element on the page, it pulls up the specific HTML Element and shows you what it’s displaying. This can help you find the exact part of the HTML you’re trying to understand. On top of that, you can also test out making changes to the HTML in the browser. A...
Here I teach you how to make a embeded video or map image responsive in size to be easily viewable on any size screen. This works for youtube videos as well as google maps or any number of other things out there you might want to embed within your html code of a website. Summary of steps: 1. Copy the Embed Code (such as youtubes video embed code...
Often we are asked "Which is better to use for form field validation, Javascript or CGI. Here is our imput on the two most popular scripting ways to validate your forms: JavaScript and CGI script! Pros and Cons of Using JavaScript for Validating FormsPros •Using JavaScript you don't use any server processor time. All...
Written by GentleGiant on 07/14/12 at 10:26:53 EST
Since javascript isn't HTML, you will need to let the browser know in advance when you enter javascript to an HTML page. This is done using the <scrypt> tag. The browser will use the <scrypt> type="text/javascript"> and to tell where javascript starts and ends. Consider this example: ...
Here's an example of source code for a Perl program that reads a pipe-delimited data file that contains a list of Titles, Email, City, State, and Zip and prints its output as an HTML list with the email being hyper-linked. #!/usr/bin/perl $filename = $form{$employnumber}; $file = $ARGV[0]; open(FILE,$file) or die "Could not read from...
As a rule, CAPTCHAs should be a last resort. They tend to be annoying, often aren't human-solvable, most of them are ineffective against bots, all of them are ineffective against cheap third-world labor (according to OWASP, the current sweatshop rate is $12 per 500 tests), and some implementations are technically illegal in some...
Written by GentleGiant on 01/29/12 at 14:03:47 EST
Perl is an ideal language for working with files. It has the basic capability of any shell script, and some very advanced tools, like regular expressions, that make it infinitely more useful. In order to work with files, we first need to learn how to read and write to them. Reading a file is done in Perl by opening a filehandle to a specific...
Let's take the same data file we worked with while learning to read a file in Perl, and we'll write to it this time. In order to write to a file in Perl, you must open a filehandle and point it at the file you're writing. If you're using Unix, Linux, or a Mac, you might also need to double check your file permissions to see if your Perl script is...
Let's take a minute to look at one of the reasons Perl makes a great data mining and scripting tool - parsing text files. Big or small, Perl benchmarks great when it comes to digging through text. As an example, lets build a little program that opens up a tab separated data file, and parses the columns into something we can use. Say for example...
HTTP protocol is a stateless protocol. But for a commercial website it is required to maintain session information among different pages. For example one user registration ends after completing many pages. But how to maintain user's session information across all the web pages. In many situations, using cookies is the most efficient method of...
Written by GentleGiant on 01/24/12 at 14:54:22 EST
"Open redirect" scripts should not redirect to URLs with special protocols that inherit the security context of the site (hi Gmail). In Firefox, these protocols are javascript: and data:. For sites where the input is meant to be plain text, the fix is simple: escape everything as it is output as HTML, using an escaping mechanism...
Written by GentleGiant on 01/24/12 at 14:54:14 EST
Web sites should not allow users to put up forms with input type="password". Password managers may fill in the password, thinking the form is a legitimate part of the site. You can probably check the "type" attribute for "input" elements against your whitelist at the same time you filter for XSS. The exact...
Written by GentleGiant on 01/24/12 at 14:54:06 EST
Pattern matching is more than just searching for some set of characters in your data; it’s a way of looking at data and processing that data in a manner that can be incredibly efficient and amazingly easy to program. Pattern matching is the technique of searching a string containing text or binary data for some set of characters based on a...
Written by GentleGiant on 01/23/12 at 11:46:50 EST
Many systems, such as the command line shell and SQL interpreters, have ``metacharacters'', that is, characters in their input that are not interpreted as data. Such characters might commands, or delimit data from commands or other data. If there's a language specification for that system's interface that you're using, then it certainly has...
Written by GentleGiant on 01/22/12 at 22:25:43 EST
What about the designers and maintainers of Web sites? you can reduce the problem with a variety of ways highlighted in this section, including a checklist at the end for Web developers. First, validate the input. The following script accepts a parameter and reflects the same on the display. A vulnerable script that accepts and reflects a...
Written by GentleGiant on 01/22/12 at 22:25:23 EST