Protected: Learnings at Oracle
November 6, 2008 at 9:44 pm (Learning at Oracle)
Tags: install, oracle learning setup open source
IE issue- ENTER does not work ?
September 29, 2008 at 9:28 pm (Learning at Tacit)
Tags: ENTER, IE issue
IE bug- If your page has a Web Form with a single TextBox Web control, your user's visiting
with Internet Explorer won't be able to have the appropriate action be completed upon hitting
enter in the textbox.
Workaround -simply add another TextBox Web control to the Web Form. This will cause Internet
Explorer to send back the Button Web control's name/value pair upon hitting Enter. Of course,
you don't want the user to see two TextBoxes, so use a bit of CSS to hide the second one.
(Acknowledgement- http://aspnet.4guysfromrolla.com/articles/060805-1.aspx)
page refresh for javascript
August 21, 2008 at 7:23 pm (Learning at Tacit)
Tags: javascript reload
1. To refresh the current page, use this code-
<a href=”JavaScript:location.reload(true);”>
Refresh this page
</a>
or just -(within javascript code)-
location.reload(true)
2. To compare 2 files, windiff is a great tool !
Issue with ‘onEnter’ on a formless text box
July 18, 2008 at 6:39 pm (Learning at Tacit)
Tags: form elements enter refresh
Recently, I had issues with a set of text boxes which were not within a form. The onEnter (when pressed enter) on any of the text boxes would refresh the page as it was considered a submit by default.
This was causing problems in the page where I had an AJAX application.
So, we need to cancel the event trigger by ‘enter’.
This is done by the following line- the ‘enter’ is code 13 on the keyboard – (in the element like text box)
onKeyPress=”return event.keyCode!=13″
IE6 issues – Learnings at Tacit
May 14, 2008 at 11:30 pm (Learning at Tacit)
Tags: IE6 issues float position
A couple of new web learnings at Tacit-
1. For IE6 issues, instead of using hacks(* or _), put the differential code for iE6,
as is given by Microsoft.
<!–[if IE 6]>
<style>
#selector,
#shield { position:absolute; }
</style>
<![endif]–>
3. “Float” does not work nicely in IE6. We need to put some workarounds for that.
4. For a check-box, you should have either checked=true or nothing at all. Having checked =false does not work in many situations
5. IE6 does not understand “position:fixed”. As a workaround, you have to play with the z-index of the container & its parent.
6. The z-index of the controls (drop down menu boxes ) are always higher than the pop-ups . So, they might show up.
7.when you make an image an anchor, there is a default border which shows up.
You should put a border:0 to make the border disappear.
Learnings at Yahoo! (Archived)
May 14, 2008 at 11:28 pm (Learning at yahoo)
Tags: web develepment
* Good Web Practices
* Accessibility Issues
* Web dev Tools
* Hacks and Filters
* Some known bugs & their solution
* Questions to ponder-
* Cross Browser compatibility- After designing the webpage from mock ups, check it on all browsers- Firefox, IE7, IE6, Opera, Safari (Mac). You can install multiple versions of IE from this site- http://tredosoft.com/Multiple_IE
* Graceful degradation – Check the page after disabling JavaScript and CSS. The content should not get bad after disabling.
* Progressive enhancement- Start with the basic and add the styles gradually making sure that it does not break in other browsers.
* Put Semantic markup(meaningful tags) so that some styles show up even if the CSS is OFF.
* Put the common styles on higher elements to avoid repetition.
* Specificity- The styles possess weights/points corresponding to their proximity to the element, their position in the style scale (user defined, external, internal, inline etc).
* Resolution compliant- Check the web page(s) in different resolutions. To change the resolution of your computer (for windows only), please refer to http://www.microsoft.com/windowsxp/using/setup/personalize/resolution.mspx
* Fluid layout – The content should be flexible/ fluid if the browser size is increased or decreased.
* Re-Usable Imagery- Put borders, backgrounds, navigation bar buttons etc in a manner which could be re-used irrespective of the content or the size of the font.
o Sliding box technique- 2 congruent boxes sliding apart when contents increase (vertical or horizontal)
o Box-cap technique-top and bottom OR left and right, the right image caps till the area required for the box.
o Re-Usability – Use one image for drop down menus. Just position it differently.
* Organize – Keep the 4 parts of the page separate- Content (XML), Structure (HTML), Presentation (CSS) and Behavior (JavaScript).
* Small tips to fix big issues- Good Coding Habits-
o Put a space before starting the “{” in the style sheet.
o Always end the style with a semicolon ;}
o Use all small case unless you are camelCasing a name
o Put the style pertaining to a page/ block with a distinct prefix so that it does not mess other selectors with the same name.
o If there is no text within any element defined by the CSS (like div, p etc) it will not show up; not even the background image. To show it, put some width or height to it.
o Do not give height to a box which might expand later. Instead try to use min-height.
o (Usually) after the page is submitted, the only changes that could be done are the style/CSS changes in the CSS.
o For the images that needs to be changed often, img src is good other wise you can use background to put an image in the page by the CSS. It need not be in the HTML.
o Anchors with ‘text-decoration:none’ should show the underline when hovered
o For meta refresh, for the given redirect URL, put URL= to make it work in IE
Go to Top.
Accessibility Issues
* Put title, alts, and captions for every image.
* Try to put the micro format structure like vCard, vCalender etc. These are machine readable syntax.
* The page should be navigable without using mouse- put tab index.
* The page should not break when you make the font size bigger or smaller (CTL+ or ctrl -).
Go to Top.
Web dev Tools
* Debugging tools-
o For Firefox- Firebug- Helps to debug the HTML code, the CSS and also the Javascript in the page. It enables to see the update on the page when the values of the attributes/selectors are edited.
o For Firefox- Web developer tool bar This can aid in reviewing the page with or without the CSS, the javascript and other assets. It also
o For IE- Visual Web Dev -
* Measuring tool- MeasureIt- This is a firefox addon and can be downloaded from – https://addons.mozilla.org/en-US/firefox/addon/539
* FTP tool- WinSCP for Windows- This free ftp tool can be open a session in Putty – for Unix operations and open the files in editors like Text Pad , DreamWeaver etc
* Editing tool- Dreamweaver, TextPad -These tools can color code the source code which makes it readable. DW also has other features which make coding convenient and less error prone. Like- auto completing of the code, Apply source format ( which makes the code approprately indented) etc.
* Color code – Identifier & Comparison tool – Color Schemer- It is a paid software but very useful.
* Graphic editors – Photoshop
Go to Top.
Hacks and Filters
Different browsers have special filters which apply only to them. We can use them to customise our page for
* IE7 – * -Use star to filter the code for IE7 only
* IE6 – _ -Use underscore to filter the code for IE6 only
* @media -Use this code to filter the code for Opera only
*
Go to Top.
Some known bugs & their solution
* IE – Box model issue- IE considers the padding of the box as a part of the width. This might pose problems in the actual sizing. Solution- Keep the width & the padding in separate elements.
Go to Top.
Questions to ponder-
* Why we should/ should not use import@ instead of for CSS?
* Why we should/ should not use “expressions” for IE purposes? (Is it a good idea to have logic/javascript in CSS?)
* What are the issues with alpha transparencies?
* Why IE messes up with double class nomenclature?
* Where should we use a light box model ? (Using Opacity & Z-Index)
* For a drop down menu designed in CSS, how can we avoid the display none of the drop down menu on mouse out i.e, when the mouse is on the menu ?
Go to Top.
Yahoo! Specific Learning (YUI)- CSS
* For cross browser CSS, use the Yahoo! CSS-http://yui.yahooapis.com/2.4.1/build/reset-fonts-grids/reset-fonts-grids.css. This resets the default styles in all browsers and then we can set new styles as per our designs.
Yahoo! Specific Learning (YUI)- Javascript
* For DOM , use the api-
Some common commands for using Putty/CVS/ YALA (Yet Another Language Automation )tool
*
o Navigation – After logging in,to go to the CSS files, type cdc followed by the country name. e.g. cdcus for U.S., cdcar for Argentina etc. To go to the generic intl, type cdc.
o Regeneration – To regenerate the files, type ygc followed by the country name. e.g. ygcus for U.S., type yga to regenerate all intls.
o Check out – To synchronise/update your code with the latest code on CVS-
+ cvo – to update all files. This has yga built built in the function.
+ cvs up on a particular folder/file. You have to do a ygc followed by the particular country name to regenerate it.
o Check in – To check in your code, use cvs ci -m ‘comments about the update here’ fileName
How to akamise images on the HTML server.
* Akamising is the process of putting images in the HTML server which can be accessed with a URL. Here is the process-
o Upload the images in the correct folder by WInSCP ot any other ftp tool.
o Run “gmake” in the respective folder.
o Use the absolute URl to the image in the CSS. If there is a variable- “image_path” or “image_path_all” which generalizes the path, use it.
