Entries Posts

Entry Module

Using CSS Variables

Post Content

See the Pen Using CSS Variables by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Deconstructing Instagram

Post Content

As an exercise on Front-End Development, The UI Team took a screenshot from instagram.com and treated it as if it were a design mockup.

We then proceed to deconstruct its Structure and Skeleton (Elements of UX) thru Information Architecture, Interaction Design, Information Design. The knowledge that arose in this deconstruction was used in building the HTML and CSS.

See the Pen Deconstructing Instagram by Brian Dys Sahagun (@BrianSahagun) on CodePen.

We, as Visual Designers, have experienced how time-consuming it was to build the Front-End of a design mockup basing only on a simple image.

The Design Handoff warrants to have more than the Brand Guidelines, Style Guide. It must also have some form of Information Architecture and Interaction Diagram that could greatly make Front-End Development faster.

Intentions Oriented Programming

Post Content

HTML could accommodate Intentions Oriented Programming (IOP).

IOP is based on intentions rather than constructs.

Code could be validated but a deeper level and meaning depends on the intentions of the programmer.

First Setup After Running a WordPress Multisite

Post Content

After creating your first site under a Main Site, preview it and you will see icky defaults.

Here’s a list of what to setup so you would be on your way blogging:

  1. Settings
    1. Tagline
    2. Timezone
    3. Week Starts On
    4. Permalink (Post Name)
  2. Appearance > Customize
    1. Header Image (hide)
  3. Posts > Categories
    1. Change “Uncategorized” to “Updates”
    2. Also update the slug
  4. Pages > All Pages
    1. Change “Sample Page” to “About”
    2. Also update the slug
  5. Posts > All Posts
    1. You could either change the Hello World post into your own welcome message or completely delete it.

Check your site again to see if everything’s looking good.

Removing /blog from Main Site of a WordPress Multisite

Post Content

Bet you also hated this:


That looks redundant. No need to put up with it.

Here’s how to remove the “blog” slug from the permalink of your main site in a WordPress Multisite sub-directory installation:

First, Edit Permalink

  1. Go to Network Admin > Sites
  2. Click “Edit” on the Main Site (don’t click the actual name of the Main Site)
  3. On the Edit Site page, go to the Settings tab
  4. Look for the section of Permalink Structure
  5. Remove “/blog”
  6. Save Changes, of course

Last, Refresh Permalink

  1. Now go to the Dashboard of your Main Site
  2. Go to Settings > Permalink (this section is different from the first step)
  3. Choose Custom Structure and in the field, enter “/%postname%/”
  4. Again, Save Changes

That will refresh your permalink structure and in the last step, the permalink will probably revert back to Post Name instead of Custom Structure (although they are the same using”/%postname%/”).

Go to your site and check if the index and post pages are working properly.

Active Area (AA) and Framing

Post Content

See the Pen HTML / CSS Technique: Active Area (AA) and Framing by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

Different Component States

Post Content

In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need to be addressed.

In turn, we might neglect designing for the different states of the component or the whole system that we are designing.

In general, here are the different states a component might be in:

  • Populated
  • Blank

Revisiting CSS Levels

Post Content

I am currently making a curriculum for the basics of HTML and CSS.

Revisiting CSS Levels, I have written in the past about it:

The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.

And from there on, we build towards Visual Design.

Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.

Can your design stand in black and white?

Can your design stand in a serif font?

Yes, it should.

Links and Actions

Post Content

I categorize <a> into two: Links and Actions.

Links will take you to another location, mostly for information while Actions could also do the same but with a more targeted purpose.




Links can be left alone in CSS – because they are buried in paragraphs or sitting beside other texts. Actions require styles that will enhance their usability – like padding to increase its active area (easier to click).

Putting Skip to Content Into Context

Post Content

Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate.

Now you may ask, “Shouldn’t the document title be at the topmost of the document?”

Not when you put this accessibility function into the context of its intended use. The user, upon arriving at your website might have come from a link or have typed a URL into the web browser. That could’ve acted as the document title that ensures the user where s/he is.

The second part of this context is the user being able to go directly to the content – skipping every element that isn’t part of his or her purpose for visiting the website.

See the Pen Skip to Content by Brian Dys Sahagun (@BrianSahagun) on CodePen.