Abdullah Yahya

Sometimes you may come across a need to show part of a web page inside another page. iFrames can be used to embed websites inside another site but they’re often used to show all of a page’s content. If you only want to show part of a page like in the bottom right corner, one approach is to use an overlapping div with hidden overflow and absolute positioning of the iframe within it. Consider the following code. Copy it, replace the URL, and adjust values as necessary.

[cc lang=”html”]

[/cc]

[cc lang=”css”]
div.iframe-container {
overflow: hidden;
margin: 15px 0 0 0;
width: 318px;
height: 488px;
position: relative;
}
div.iframe-container iframe {
position: absolute;
top: -128px;
left: -623px;
}
[/cc]

If you’re iframe contains a page that you don’t want users to see within the iframe, you can use a technique called framebusting to have your iframed page bust out of the iframe.

If you’re developing a site from a Photoshop PSD file but find that things like font sizes, e.g. 12 pt, don’t look the same size in your browser where you’ve set the CSS font size to 12 pt, then you probably need to adjust your PSD file’s resolution.

To determine the resolution of your screen, you can go to

http://www.infobyip.com/detectmonitordpi.php

Mine says 96 dpi. Then, in Photoshop, go to Image > Image Size and set the resolution to 96 and uncheck the “resample” checkbox.

<blockquote><span>“</span>Some quote</b><span>”</span></blockquote>

[cc lang=”css”]

blockquote span.quote-mark {
font-size: 3.688em;
font-family: “Times New Roman”, serif;
line-height: 1;
font-weight: 600;
margin-top: -0.1em;
height: 0.4em;
display: inline-block;
vertical-align: top;
}

span.quote-mark.start {
margin-right: 0.1em;
}

span.quote-mark.end {
margin-left: 0.06em;
}

[/cc]

“Some quote”

1. Plan web page  file names /  URLs
   • Group common pages in a folder and name each page using only descriptive keywords in lowercase with dashes, where applicable, e.g.
   • https://www.site.com/products/iphone-cases/index.html
   • https://www.site.com/products/ipad-cases/index.html
   • Use Google Adwords Keyword Planner to find keywords that are frequently searched to improve SEO
2. Prepare images, sprites
   • If image has a transparent background and is shared across multiple pages (e.g. icons), save as a PNG (24) sprite, e.g. sprite-products-common.png
   • If image has a transparent background and only appears on a single page, save a a PNG (24) sprite, e.g. sprite-products-iphone-cases.png
   • If image doesn’t have a transparent background and is shared across multiple pages, save as a JPG sprite (80% quality), e.g. sprite-products-common.jpg
   • If image doesn’t have a transparent background and only appears on a single page, save as a JPG sprite (80% quality), e.g. sprite-products-iphone-cases.jpg
   • If image needs to appear when web page it is on is printed, save it as a standalone image as either PNG or JPG (depending on transparency) and insert it using the <img> tag, e.g. iphone-case.jpg
   • Save images in sprites using a 50px x 50px grid and snap the top left corner of each image to the grid
   • Don’t save images with styles that can be applied using CSS, e.g. if an image has borders, remove the borders and use CSS borders to apply a border to the image
   • Save all images in /asset/image/ Continue reading Website Development Process

Many books on web development advise readers to save images such as clipart or ones with less than 256 colors in PNG format and to save photographs of real objects such as people that are made up of millions of colors in JPG format. The issue with PNGs (PNG-24), however, is their file sizes are considerably larger than JPG (at 80% quality) even though you can hardly tell the different in quality between a PNG-24 image compared to the same image save as a JPG with 80% quality. Therefore, my advice for saving website images is as follows:

• Save all images that have a transparent background as a PNG (PNG-24)
• Save all other images as a JPG (80% quality)

This should help with your website loading time without sacrificing image quality.

Recently, I needed to run php from the command line on Windows. I had php in my PATH but when I ran the command, an alert window popped up saying “php.exe is not a valid win32 application.”. In my terminal / command line, the response I got was “Access Denied.” Somehow, the php.exe file size become 0 bytes. To fix this, I just overwrote that file with the original php.exe file (60 KB) and reran the command and it worked.

If you get this error, check the file size of your exe.

When developing websites, sometimes (unfortunately), not all assets, such as images, are available. In this case, you can use placeholder images using a service at www.placehold.it. For example, to insert an 350 px wide by 150 px high image, you use the following code:

<img src=”http://placehold.it/350×150″>

Below is how the placeholder image looks

You can also change the color of the image and add text to it dynamically. More information at www.placehold.it

• PhoneGap
• Steroids.js
• Trigger.io