👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
It’s very easy to number versions (e.g.,version 1, version 2, version 2.0) – it’s linear and you could place decimal points for smaller versions.
However, it’s boring. That’s why the likes of Microsoft, Android, WordPress (and a lot more) dub their versions or releases around a theme.
Let me introduce to you song titles from Gallagher Brothers’ bands (Oasis, Beady Eye, Noel Gallagher’s High Flying Birds).
But with a twist – to give it state-of-the-art, 21st century, electronic and digital age treatment (I won’t put an “e” or “i” as prefix nor remove any vowel before “r”), I will capitalize the letter of the second word found in a compound word. In case of two-word song title, I will compound them with the same capitalization (e.g., ChampagneSupernova).
HopScotch 3 is “WonderWall”.
The world is expected to grow 3.2 percent in 2015 and 3.7 percent next year after expanding 3.3 percent in each of the past two years, according to a Bloomberg survey of economists. China, the Philippines, Kenya, India and Indonesia, which together make up about 16 percent of global gross domestic product, are all forecast to grow more than 5 percent in 2015.
I’m currently researching on how to design the content structure of article bylines – that section wherein you see the author’s name and the date the article was published.
The byline on a newspaper or magazine article gives the date, as well as the name of the writer of the article.Byline from Wikipedia
Chikka v6.2 is here – featuring Group Chat.
The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names.
For example, here’s a simple HTML markup of Skip Link component:
<div class="comp skip-link_comp"> <a class="skip-link_axn" href="#content">Skip to content</a> </div><!-- skip-link_comp -->
Notice that there are two generic class names attached to specific class names:
- comp – short for component
- axn – short for action
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is:
List of Generic Class Names
- comp – component
- cr – container
- ct – content
- hr – header
- name – title or heading
- desc – description
- grp – group or parent of number of items
- item – part of a number of items
- accessible-name – official name
- friendly-name – custom displayed name
- nav – navigation
- axn – action
- notice – notification message
- datetime – time
- sep – separator, divider
- pred_label – (predicate) verb part of a label or phrase; e.g., in the phrase “Edit Entry”, “Edit” is the predicate
- subj_label – (subject) noun part of a label or phrase; in the example above, “Entry” is the subject
- prep_label – preposition
Post in context: I am “refactoring” the existing HopScotch Free WordPress Theme . This is due to several improvements in standardization and content structure.
The example that I will be using is the most common element of web sites – the web site name and description. One encounters this in the form of web site logos and the usually the description is hidden from view.
Here are my notes as I go each step of the front-end design process.
Stages in Front-end Design
- Write the content in text format
- write the important information ahead of the less important (which comes first, an item’s name or its thumbnail?)
- think of it as words which will only be dictated by voice (like a screen reader)
- the information you are writing will be printed on paper (no images, only text in serif)
- only include images (icons, symbols) if they need to be translated or described in words, otherwise tackle during CSS stage
- e.g., should you write in text “cog icon” to represent it beside the “Settings” link?
- elements like <img> has the alt attribute which could contain a description of the image on display – this element, especially if a photo that supplements a text must be included with a <caption>
- Markup in HTML
- don’t use <div> or <span> (yet)
- if a text doesn’t match with any existing HTML element, use <p>
- for headings, use <h1> (change later when in context)
- add <a> for links and action elements
- always link up the web product’s name to the Home view
- related: HTML Outline
- separate objects and components with one vertical space (return)
- Add classes to elements
- start with generic class names (e.g., name, desc, axn, comp)
- Add HTML attributes
- HTML attributes are arranged by id, class, others
titleattribute to <a> elements accessed via tooltip; use it to display supplementary information
- Componentize the elements
- wrap the grouped elements in <div>generic name of components is “comp”
- provide for specific class names in this syntax: specific-name_generic-name for a name grouping, separate with a hyphen (-)
- underscore(_) separates the specific from the generic
- put comment tag at the end of the component using the specific name
Write the content in text format
HopScotch Champion of Content Structure
Markup in HTML
<h1> <a>HopScotch</a> </h1> <p>Champion of Content Structure</p>
Add classes to elements
<h1 class="name"> <a class="axn">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
Add HTML attributes
<h1 class="name"> <a class="axn" title="Go to Home">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
Componentize the elements
Only generic names:
<div class="comp"> <h1 class="name"> <a class="axn">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p> </div>
The HTML markup of
product-header_comp with specific class names:
<div class="comp product-header_comp"> <h1 class="product_name"> <a class="product-name_axn">HopScotch</a> </h1> <p class="product_desc">Champion of Content Structure</p> </div><!– product-header_comp –>
comp is one of the standalone generic class names.
- don’t stress too much on class names – the important factor here is consistency
- the result is far from its final look since this component will still be put into context along with the site’s other components