Brian Dys

Tag: dyssahagun.com

  • CSS border box, here we come

    —

    by

    Brian Dys
    in

    Hey, remember that time when you switched from the table layout to div layout? This is the time to be “out with the old and in with the new”. We’ll be leaving behind the contraption that alleviate the pains of the CSS box model. Just to refer to that contraption, familiar with this? [code] <div…

  • Unwrap those URLs

    —

    by

    Brian Dys
    in

    You have a paragraph with a URL in it–chances are the boundaries might wrap or cut your URL into two lines. Notice that it is an actual URL in the form of http://[address] and not just a linked bunch of text. [code lang=”html” gutter=”false”]<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi ante, hendrerit…

  • Center your unnumbered lists

    —

    by

    Brian Dys
    in

    Say you want to center your navigation on the page: [code lang=”html”] <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> [/code] Simply tell CSS to: [code lang=”css”] ul {text-align:center;} li {display:inline-block;} [/code] And don’t forget to remove any float on those elements, if any.

  • Revisiting performance best practices

    —

    by

    Brian Dys
    in

    We’ve been following Yahoo!’s Best Practices for Speeding Up Your Web Site for quite a while now and have been fine in following some of the tips — that we’ve forgotten to extend out our antennas to hear about what’s going on out there in the world of website page load performance. This one isn’t…

  • Trying out Fangs – a Firefox screen reader emulator extension

    —

    by

    Brian Dys
    in

    In a quest to streamline and improve our HTML markup, I’m looking at how the page would appear to a person using an assistive device such as a screen reader. I’ve installed Fangs – a Firefox extension that “helps developers find accessibility issues in web pages and managers to understand how their website may appear…

  • Things to add to HTML5 Boilerplate HTML markup

    —

    by

    Brian Dys
    in

    Editing HTML5 Boilerplate 4.1.0 Edit line: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.5“> For mobile device browsers, set the initial scale to 100% zoom and limit the zooming to 150% New line: <link rel=”shortcut icon” href=”img/favicon.ico”> Place your icon inside the img folder New line: <link rel=”stylesheet” href=”css/ui.css”> Start with a blank stylesheet alongside normalize and main.css

  • Creating hi-res icons

    —

    by

    Brian Dys
    in

    While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image. While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion. We have website icons…

  • How to code in HTML and CSS, really?

    —

    by

    Brian Dys
    in

    Update on February 22, 2013 Let’s get to the details on how to write the HTML markup, really. Write pure text of everything Enclose all texts in semantic HTML tags — don’t use <div> and <span> Add lists — <ul>, <ol> Add headings — use only <h1> Add sectioning elements like <header>, <nav>, <section> Check…

  • CSS and we still don’t care much about design

    —

    by

    Brian Dys
    in

    …but the background colors and font colors. What to do after writing the HTML markup? Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town. This morning, I gave the class a seat work — tear off a page, any page from any magazine…

  • Heart-throbbin’ Throbber

    —

    by

    Brian Dys
    in

    What is this? If you say a “loader” you’re right. If you say a “throbber” also right. But this looks more like a throbber: — By the way, for those of you thinking of using animated PNG for throbbers or loaders, browser support is currently bleak.