Author: Brian Dys

  • End

    Are you going to be in my dreams tonight?

    In the end, the love you take is equal to the love you make.

    ~ The End by Beatles

    Originally published on Friendster, 11 March 2007

  • Reformative

    I was lying down the barren bermuda grass with a triple-bent fork in my crotch talking about the Anahaw plant. That was a patch of land about six square meters. We used to wrestle and waste each other there, my cousins and I… Would you stay or would you not? Wait… consider that you were my childhood friend who used to cower away because I wanted to sing Christmas carols to neighbors?

    Yes, you will leave me to die like a lunatic feast to blood-hungry-non-existent-malaria-infested mosquitoes.

    My last thought was our cousin bleeding to death with his foot-long gash on his shin; wrestling with me to no avail.

    Originally published on Friendster, 08 April 2007

  • Sunday Morning

    It Is Sunday Morning

    While everyone is asleep still, enjoying their respite from the yesterday’s bustle, I am wide awake. I let the hours pass by an occasional dreamless slumber.

    I’ve been loved, hated, loved, hated, loved… And it always ends up the same. Never a cycle and my behavioral pattern abruptly ends at this point.

    When it is Sunday morning, I am always like this kid back in the past waiting for the three o’ clock afternoon sun. How I like it up above; blistering, conducive to self-realization.

    But I realize nothing but the solace of finding myself alone in the backyard just walking to and fro. Walking to and fro. Going nowhere.

    Until I feel the heaviness of lifting the gate handle; watch it swinging behind me.

    I am not leaving home. I will find another.

    In your heart.

    In another’s.

    And most of all in my silence.

    The very silence that will whisper to cross the street back and lock the gate; take a cigarette and watch people pass by.

    Originally published on Friendster, 04 August 2007

  • Drafting Applicator Version Zero

    Branching out from HopScotch, I am reformulating mostly the front-end of the theme. Here comes Applicator – which I plan to submit to WordPress Free Themes.

    The basic HTML skeleton are based on WordPress Twentyfifteen and HTML5 Boilerplate / Mobile. Basically the content of <head> are snippets from these awesome frameworks.

    Currently, I am building components one by one – starting from the Masthead constructor.

    Files

    • header.php
    • functions.php
    • > functions
      • initial
        • setup.php
        • aside.php
        • hooks.php
      • markup
        • html-class.php
        • primary-navigation.php
      • style and scripts
        • styles.php
        • scripts.php

    Components of Masthead Constructor

    • Web Product Name
    • Primary Menu

    Accessibility Features

    • Accessible Names
    • Sub-Navigation Toggle Action

    Generic Components

    • comp – Component
    • notice – Message
    • accessible_name – Labels for Accessibility
    • axn – Actions

    Classes

    • State – the state of the UI

    Folders

    • functions – Functions
    • js – JavaScripts
    • css – Stylesheets
    • img – Images

    Notes

    • Always escape text strings (e.g., <?php _e( ‘Label’, ‘domain’ ); ?>)

    JavaScript Detection and Class Names

    If JavaScript is supported/enabled by the browser, there are two classes added in <html>:

    1. js
      Found in functions > setup.php. It replaces the default “no-js” class name that is added by default in <html>

    JavaScripts

    1. html5.js
      HTML5 Shiv – for IE 8 and below
      Located in js > html5.js
    2. plugins.js
      To avoid console errors in browsers without a console
      Located in js > plugins.js
    3. skip-link-focus-fix.js
      Makes “skip to content” link work correctly in IE9, Chrome, and Opera for better accessibility
      Located in js > skip-link-focus-fix.js
      Source: Twenty Fifteen WordPress Theme

    CSS Layers

    1. HTML5 Boilerplate
      normalize.css
      main.css
      Coming straight from H5BP, these stylesheets modify the default browser stylesheet for the better. It is considered “default CSS on steroids”.
    2. Usability
      usability.css
      It adds usability to Active Elements and other elements that can be interacted with.
    3. Layout
      layout.css
      Anything visual concerning spacings and dimensions goes here.
    4. Typography
      typography.css
      Dealing with the CSS font properties. But if there’s a usability issue with the default font-size of an element, it goes to Usability.
    5. Color
      color.css
      A touch of color for usability and visual design.

    Structure

    1. Constructors
      1. Masthead
      2. Content
      3. Colophon
    2. Sub-Constructors
      1. Navigation
      2. Aside

    Image Assets

    • Vector Assets
      located in img > vector-assets.php
      called from header.php
      Contains SVG markup of basic utility icons to enable color customization

    Functions

    HTML Class

    Adds classes into <html>

    • html
      simply adds the class “html” so that CSS doesn’t need to use the element selector
    • masthead-aside–active / masthead-aside–inactive
      class if Masthead Aside is active or inactive
    • view–front / view–inner
      class if on the front page or inner page
    • browser–chrome / browser–gecko / browser–safari / browser–opera / browser–lynx / browser–ns4 / browser–ie / browser–unlisted
      class depending on the browser user agent
    • device–mobile / device–not-mobile
      based on wp_is_mobile()
    • theme–parent / theme–child
      class if using a parent or child theme
  • InVision’s Making a Product Designer: Chapter 5

    There’s an old writing adage that advises writers, whenever possible, to “show, don’t tell” when bringing characters to life. The goal is to reveal the story through the character’s own experiences instead of the author’s.

    ~ Scott Hurff

  • GWT Training: Day 5

    Since day 1, I drive all the way from Cavite to UP, Diliman. It’s a 46km-drive and given the traffic condition in Manila, it takes me almost 3 hours each way, every day.

    It’s like going to work and to school at the same time – I have my laptop for work and I participate in discussions and exercises.

    MMDA Street Sweeper
    A top-view picture of a street sweeper sweeping the street litter.

    With a little bit of effort, I am hoping to be an accredited contributor to the design and development of GWT. Eventually, with more training, I could go into training and assisting government branches that need help transitioning their websites to GWT.

    Act now

    While being stuck in traffic, I realized something. We, as the people, tend to complain about subpar quality of services the government provides for us. In some areas, we are sure that we deserve better. In some, we know that we can do better. In general, we exactly know how to solve all the problems our city is facing.

    But what are we doing exactly aside from paying our taxes? Our professions are devoted to the private sector – I know, it puts more food on the table but we’ve got to do something towards a direct solution to the same problems that are bugging us.

    Distancia Amigo
    A delivery pedicab of balut eggs.

    This is my own way of contributing towards a direct solution to the problems that we are facing when accessing government websites. Now I can complain all I want and shut myself up.

  • InVision’s Making a Product Designer: Chapter 3

    The biggest risk of creating a product is ‘making something no one wants.’

    ~ Scott Hurff

  • GWT Training: Day 3

    We’re actually using the Government Web Template – fitting in the content of a typical government agency. It sure has a lot of bugs – that’s why we’re here to help as contributors to the repo.

    GWT Training Day 3
    A picture of the test site of Bureau of the Treasury.
  • Active Element

    An Active Element is a user interface element that can be interacted with. It’s something you do something on (like click, tap, type on). A very basic example is a text link like this:

    [codepen_embed height=”266″ theme_id=”1820″ slug_hash=”GpyBgM” default_tab=”result” user=”BrianSahagun”]See the Pen Text Link by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

    Or a button like this:

    [codepen_embed height=”266″ theme_id=”1820″ slug_hash=”ZbvjYN” default_tab=”result” user=”BrianSahagun”]See the Pen Button Example by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

    Also a text input like this:

    [codepen_embed height=”266″ theme_id=”1820″ slug_hash=”zvpLGY” default_tab=”result” user=”BrianSahagun”]See the Pen Text Input Example by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]