Skip to content ↓


Marat Tanalin on web-development and IT

  • On hidden URL in Chrome

    The security issue is that browsers need to make the domain name portion of the URL clearly visible. I hope that the smart folks working on Chrome can figure out a way to do that without castrating the browser’s ability to easily share links.

    It’s a classic case of:

    1. Something must be done!
    2. This (killing URLs) is something.
    3. Something has been done.

    Technically, obfuscating the URL seems to solve the security issue. But technically, decapitation seems to solve a headache.

    Jeremy Keith
  • getElementsByClassName() in IE8 (+)

    Internet Explorer 8 (IE8) web-browser does not support the getElementsByClassName() DOM-method, but supports querySelectorAll() that allows to solve the same task without using any JS libraries.

  • Resetting styles in CSS (+)

    CSS Cascading and Inheritance Level 3 specification that has recently reached the CR (Candidate Recommendation) status contains two important new features.

    • unset value allows to reset value of a CSS property.
    • Shorthand property all allows to set a value to all CSS properties supported by browser without need to list them explicitly.

    Using both features in conjunction should allow to easily and gracefully reach the result currently reached via multiline “reset” stylesheets.

  • Gaps in sprites (+)

    To speed up downloading small images like icons, they are often united into one image called sprite. This minimizes delays caused by waiting for server response for each of image files.

    However using sprites is connected with some nuances. One of most common errors is placing images in sprite without gaps between them.

  • On expertise and specialization

    For nearly 15 years, I’ve called myself a web developer.

    In those 15 years I’ve had job titles like Technical Architect, Project Manager, Lead Designer, and even Director of Technology. Underneath it all, though, I just built web sites. Ask me what I did and I’d tell you that I was a web developer.

    Over a month ago, I took a new title: Product Manager.

    I’m not coding anymore. And I’m feeling a little uneasy about it.

    Why does this make me uneasy? Because I’ve always shared my experience as a web developer and I suddenly find myself wondering how long I can continue to do that.

    Jonathan Snook
  • Proper method to make button acting as link (+)

    Sometimes there is a need to style a link as a standard button. This is typically undesirable; however, if we have the task anyway, then it makes sense at least to do this properly.

  • Mozilla on switching Opera to WebKit (+)

    People of Mozilla — company developing Firefox web-browser — on switching Opera to WebKit (Chromium) layout engine and dropping development of Opera’s own engine — Presto.

  • Almost native matchesSelector() for IE8 (+)

    In modern browsers, a handy JavaScript method is available — matchesSelector(). It allows to determine if an element matches specified CSS selector. It is one of key features allowing to go without libraries like jQuery to bind live event-handlers conveniently.

    Internet Explorer supports matchesSelector() (with ms prefix) as of version 9 only. But what to do with IE8 which we are still forced to support in many cases? Fortunately, there is a compact solution that does not need any third-party libraries.

  • Using Sizzle separately from jQuery (+)

    Sizzle is a crossbrowser CSS-selectors engine implemented in JavaScript and used in the popular jQuery library.

    But if advanced features of jQuery are unneeded for a specific task or project, Sizzle can be used as a standalone library, resulting in 5-6-x faster loading compared with jQuery.

  • On classes, identifiers, and descendant selectors

    If you have the misfortune to work on a huge, poorly developed site where you will never have permission to refactor the templates and CSS according to common sense and best practices, you may have to rely on class names and avoid descendant selectors and ids.

    But under almost any other circumstance, properly used ids with descendant selectors are preferable because more semantic and lighter in bandwidth.

    As for descendant selectors, in a site not designed by 100 monkeys, it is safe to assume that elements within an id’d div or HTML5 element will be visually styled in ways that are compatible, and that those same elements may be styled differently within a differently id’d div or HTML5 element.

    There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

    L. Jeffrey Zeldman
  • Do-Not-Track by default in IE10

    IE10 sends a “Do Not Track” signal to Web sites by default.
    The Sixth IE10 Platform Preview

    …thus making Do Not Track (DNT) request header in fact useless. Entire point of DNT is exactly that it is informed choice of user, and noway a default setting that most users do not know of at all.

    Consequently, DNT will stop perform a function of informing website about intent of user, and web developers will almost certainly stop taking DNT into account.

    Unlike IE10, in Firefox browser, DNT is disabled by default, which is right solution.

  • On validation

    From a learning perspective, a validator is like the pedantic teacher who loves their red pen: some of its feedback is quite useful, but the remainder is likely to confuse and intimidate a newcomer.
    Atul Varma (Mozilla)

  • Taming Firefox status bar (+)

    In Firefox 4, statusbar has started to show at the right instead of at the left of browser window if search bar is opened. (Statusbar is used, for example, to display URL address of a currently hovered link.)

    As a result, statusbar is shown now at the left, now at the right, and fundamental usability rule has become violated: specific element of interface should always be placed on one and the same place.

    Those annoyed by this Firefox bug can manually add following CSS rules to chrome/userChrome.css file in Firefox profile directory or with Stylish extension to fix the issue.

  • How to deny loading page into frame of third-party site (+)

    A modern method to deny loading pages of your site into frame (FRAME or IFRAME HTML-element) on another site is using of X-Frame-Options HTTP-server response header.

    The feature is supported by all modern browsers including IE8+.

  • TIME element is removed from HTML5 (+)

    HTML5 spec editor Ian Hickson has removed the TIME element from the HTML5 spec. This element allowed to markup dates (e.g. article publication date) usably and intuitively and was one of a few really semantic new features of HTML5:

    <time pubdate>2009-08-30</time>

    As a “replacement”, he offers new common DATA element intended to markup any abstract data and having much more cluttered syntax based on microdata.

    Next step of Ian will probably be dropping all semantic elements (headers, paragraphs, lists, etc.) and their replacement to the great unified DIV element.

  • Citing online source on republication (+)

    On republication of materials from other sites, it’s a rule to specify clickable link to source.

    Link to home page of source site is generally useless for user and makes sense only from the viewpoint of search engine optimization of source site.

    On the contrary, full direct link to exact page containing source material itself is useful and usable for user.

  • Default function-arguments in dynamic languages (+)

    Dynamic programming languages in general and PHP in particular allow specifying default values for parameters of functions and methods.

    The values can be specified directly in parameter list, but then, to skip a parameter when calling function, programmer is forced to recall what is default value for skipped parameter, or open documentation for the specific function. This is not enough usable in practice, so we can act in a different way.

  • Positioning background from element’s bottom-right corner (+)

    Formerly, to position background with an offset from right or bottom edge of an HTML element, we has been forced to embed empty space into image itself since CSS had no native support for such feature.

    Situation is changing thanks to CSS3 “Backgrounds and Borders” module providing updated syntax for background-position that allows specify arbitrary offsets from right and/or bottom edges of element.

  • Border-radius generator

    border-radius generator is author’s online tool to automatedly generate CSS-code for rounded corners of HTML-blocks via CSS3-properties of border-radius family.

    Features:

    • generating minimal sufficient CSS-code with identical radiuses taken into account;
    • ability to specify radius for each corner separately from common radius for all corners;
    • choosing exact set of needed vendor prefixes;
    • disableable aligning of properties by colon;
    • built-in workaround for issues related to rendering rounded corners.
  • How to fix border-radius rendering (+)

    In browsers other than Firefox, there are issues related to rendering elements that have border-radius. But there is a workaround applicable in most cases.

  • :first-child pseudoclass and sibling combinator in IE7 (+)

    Though IE7 formally supports both :first-child CSS-selector and sibling combinator (+), there is a limitation: if HTML code has a comment in place where browser expects to see an element according to CSS selector, IE7 will not apply styles to actual element located next to the comment.

    However there is a workaround for the issue: HTML comments as DOM nodes can be removed from DOM tree dynamically with JavaScript once HTML page is loaded.

  • Local CSS-classes (+)

    It’s possible to encounter naming conflicts when using CSS classes. This is most probable as for classes intended to be used exactly in certain context.

    Coincidence of names of local classes with names of global ones leads to potentially undesired inheriting of styles of global classes by local classes that have same names. However there is an easy way to avoid this.