Brian Dys

Author: Brian Dys

  • Broken-Hearted Jubilee

    Broken-Hearted Jubilee

  • Bicycles for Two

    Bicycle

    Check out my icons at The Noun Project.

  • Conversations with Yourself

    Google Hangouts
    A screenshot of Google Hangouts showing unknown contacts.

    How often it is that you find the need to send a message to yourself?

    Maybe there’s a nice link that you want to check out later (but didn’t want to bookmark).

    Maybe there’s a checklist item that you don’t want to forget at the moment (but didn’t want to open a checklist app).

    What’s that ubiquitous app on hand that’s already there?

    Email?

    But you’d still be opening the app and compose a message to yourself.

    Aha! The Messenger. Can you send a message to yourself? In Facebook Messenger, check! But in Google Hangouts, no check.

    Google Hangouts – please allow sending messages to one’s self.

  • Handlebars

    Untitled

    Check out my icons at The Noun Project.

  • Motor Car

    Motor Car

    Check out my icons at The Noun Project.

  • Time Travel at Las Casas Filipinas de Acuzar

    Dusk

    I went out the veranda to look at the looming sky. It’s early enough to enjoy the silence and coolness of five in the morning.

  • Papa’s Retirement

    My parents went to Teekay office to officially file for Papa’s resignation. He served there for 25 years already. He resigned to get the remaining cash to invest into the car wash business. I am very proud of my father for sacrificing his time and strength to put us in good schools. And undoubtedly, my mother, who was physically there to guide us while growing up. I will always be grateful for my parents.

  • Building CSS in Levels

    After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS).

    To be able to ease the process of writing the style sheets, we must segment it into levels:

    1. Level 1: Default (browser level)
    2. Level 2: Normalize (boilerplate level)
    3. Level 3: Modify (visibility and sizes level)
    4. Level 4: Template (functionality level)
    5. Level 5: Theme (custom level)

    Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.

    Level 3: Modify

    Related Activities

    • hide accessible names
    • hide components
    • set default state of components thru class names
    • active element padding
    • spacings (margins between components and paddings around components)
    • dimensions are set at 100% for Mobile-First

    Level 4: Template

    Related Activities

    • set the functionality of utilities such as Search and Navigation

    Level 4: Theme

    Related Activities

    • colors
    • background colors/images
    • icons
    • visual elements (badges, logos, lines/borders, shadows, corner radius)
    • borders

  • Philippines Ranks 9 out of 142 Countries in Global Gender Gap Report 2014

    In time for the celebration of International Women’s Day today – we celebrate women’s achievements, we call for greater equality. #MakeItHappen

    It is good news that Philippines ranks number 9 out of 142 countries in the Global Gender Gap Report 2014. This means that the gap between genders in many aspects of our economy is getting slimmer.

    And what is it to us as a country?

    People and their talents are two of the core drivers of sustainable, long-term economic growth. If half of these talents are underdeveloped or underutilized, the economy will never grow as it could. Multiple studies have shown that healthy and educated women are more likely to have healthier and more educated children, creating a positive, virtuous cycle for the broader population. Research also shows the benefits of gender equality in politics: when women are more involved in decision-making, they make different decisions—not necessarily better or worse—but decisions that reflect the needs of more members of society.

    ~ Klaus Scheab – Founder and Executive Chairman, World Economic Forum
    Global Gender Gap 2014
    Source: Global Gender Gap Report 2014

  • HTML Semantics

    I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names.

    In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites:

    1. Text. Begin by writing in plain text all the important content your web site has. For example, you might have a web site logo – translate it into words; if you web site has a tagline or description, write that too.
    2. Tag. Follow it up by wrapping each text content in its semantic HTML tag. Avoid using div or span just yet. For example, your web site name should be wrapped in a heading tag like h1 since it is the title of your HTML document; your tagline could be wrapped in a p tag. At this point, all heading tags could be in h1 since we have not put these objects in context yet. Eventually, we would be arranging the hierarchy of these tags – from h1 to h6.
    3. Group. This is where div and span will come into play. You will have to group and segment the objects based on semantics and not on visual appearance. For example, you could wrap both the web site name and tagline in one div.
    4. Classify. Put the class names into the grouped structure of the objects. For example, the div that contains the web site name and tagline could be classified as “web-product-name”. The test for its semantics is if the name is true to the objects’ nature – something that isn’t tied up to visual appearance or layout.
    5. Format. To add another level of semantics and structure to the objects, we could use Microformats. It uses a vocabulary of class names that give structure to common content such as a person’s information, a movie’s information, an organization’s information and much more.

    Related Reading

    Further Reading