đź‘‹ 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. 🥰
About Snippet
Categories
0
Comment
What’s really efficient–getting stuck in traffic on a short route or going through the long intestinal insides of the city?
That yummy taste when you’ve got a buy 1 take 1 cheeseburger deal? Yes, it’s the same banana peel that gets a comedy laugh when you slip because of it.
Morning people notice this–shirtless men walking on the streets to buy gel or something and women carrying towels also walking on the streets.
I’ve learned to play the guitar practicing the song, “Line to Heaven” by Introvoys. It’s a very easy D-A-G-A said my cousin.
Remember that time when all you need is water from the tap? Then a corpse got stuck in one of Manila Water’s pipelines.
Once, I’ve used Ajax bar soap on my skin because I took a bath at the laundry area.
Just like roses, rice have come to us in different colors.
When we were kids, the best stage we’d really like balloons taken home by mom from parties was when they’re already hovering mid-air.
Some people, they do not learn the meaning of life–they realize it. I, on the other hand, realized the meaning of couch potato during my six-month stay in our house which turned into my parent’s house after graduation. I was being rooted to the couch sleeping at 4 AM and waking up for lunch.
I was told once to never trust anyone with the name Ricky or Randy.
Categories
Step 1: text + semantic tags
Convert the mock-up to plain text and wrap each text to its semantic HTML tag
- write using notepad/simple text editor and save as .html
- no need to write <html><body> etc… begin writing the actual markup of the module you’re assigned to
- don’t use <div> or <span>
- for headings, use only <h1> (no <h2>, <h3>, etc.)
- put everything inside its semantic tag (e.g., if it’s a link, put inside <a>, if it’s a paragraph or a line of text, put inside <p>, etc.)
- write based on your own knowledge (we’ll improve based on your output)
- if you’re unsure which tag to use, use <p>
- forget about the layout/colors, strip down the design to its core content
- open the HTML in a browser to see if the “all-text” content makes sense and usable
- as much as possible, limit your time to only 30 minutes
- check the outline if it is correct: http://gsnedders.html5.org/outliner/
Step 2: Prepare layout structure
Wrap the module and its elements in <div> tags. Use 4-spaces as standard for indentations.
- For modules inside the content area, wrap the module in:
<div class=”mod”>
<div class=”mod-cr”>
Your module in step 1 goes here…
</div>
</div> - For header, wrap the module in:
<header>
<div id=”header-cr”>
Your module in step 1 goes here…
</div>
</header> - For footer, wrap the module in:
<footer>
<div id=”footer-cr”>
Your module in step 1 goes here…
</div>
</footer>
This template model provides for the first container to have the display, positions, floats and the second container the width, padding, margin, border.
Apply box-sizing:border-box to the second container to fix the box model.
6 March 2013
So you’ve been developing the front-end all along but you’ve forgotten to setup a Google Analytics for the site. Not too bad, right?
But when you’ve taken for granted the IE browser version 8 and below, that’s when you should acknowledge a headache.
Checkout this list of things to account for when developing the front-end of a website.
To start with:
- Use HTML5 Boilerplate
- Create a favicon by adding this line: <link rel=”shortcut icon” href=”img/favicon.ico”>
- Customize Modernizr according to your needs
- Fill-up the meta description in the <head>
- Add the document <title>
- Add a separate stylesheet for your custom styles: <link rel=”stylesheet” href=”css/ui.css”>
- Add Google Analytics
As you go along:
- Convert the design to pure text only
- Wrap each text in semantic HTML tags
- Check the outline of the document if complete
- Check the document structure on a browser if it makes sense from top to bottom
- Wrap the groupings in <div>s and <span>s
- Put the markup blocks inside the skeleton template
- Name the <div>s with ids and classes
- Consider mobile-first styling
- No floats and positioning
- Style first the color and background-color
- Build the design as you go from mobile to wider views
- Check the layout concurrently with IE7 and IE8, if supported
Forms
- Put “for” in <label> and “id” in targeted form elements
- In using tabindex, start with 1
- List down all inline and generic message validation
- Always put <label> in forms for screenreaders
- Don’t forget error messages
Add title tag to icons without text labels — in case the user couldn’t decipher which icon he’s hovering on, a tooltip will appear.
Put states in icons — make it position:relative and on :active, put top:1px
Always put a control to remove notification messages away. A “dismiss” link or close button would suffice.
16 January 2013
Filenaming
- Filenames should always be descriptive
- Use dash(-) for separating words not underscore(_), i.e. user-account.html, main-banner.png
- All small letters
Images
- Use png for transparent background images like icons.
- Use image sprite for images with the same sizes instead of separating each image.
Ex. icon-16.png (16x16px icons); icon-32.png (32x32px icons)
Coding
- Use “Tab” key for indention
- Always add comment for every closing tags, mainly divs.
ex. <!- -End Main Div –>
Others
- Make sure all websites are responsive to all smartphones(iPhone, Android, Tablet)
- Always test to all browsers, especially IE
- Favicon(16x16px)
5 December 2012
While marking up, know beforehand which versions of old browsers you will be supporting.
- Check the layout early and often in lower versions of IE, especially IE7 and IE8
Setup notification messages or “notifier”
- stationary messages
- fading messages (similar to a toast in Android)
- make it closer to the form
- if site-wide, have a consistent area where the notifier appears
- yellow for regular notification
- red for error
- blue for information
- green for success
Always name the main wrapper accordingly. For example:
<div id=”page” class=”page-dashboard”>
Dashboard pertains to the page/screen.
Layering of elements – use position:relative and z-index numbers, 1 being the lowest (under the stack).
19 July 2012
Before launching a website, here are several checkpoints to validate:
- Valid HTML and CSS markup
- Browser compatibility
- Firefox
- Chrome, Safari
- Opera
- IE 7 to 9 (forget IE6)
- Tablet browsers (iPad, Samsung Galaxy Tab 10.1)
- Mobile browsers (iPhone, Android mobile device)* For Desktop browsers, check both in Mac and Windows 7
- Search engine result — how it would look like when shown in Google search results
- Facebook share view — how it would look like when shared in Facebook
9 July 2012
Guidelines on how to sprite icons for use in sites
- Group icons horizontally
- One file per pixel dimension (16×16, 24×24, 32,32, 48×48)
- Provide three rows per group (for normal, hover, focus)
- Add another group below the last row of the first group
- For additional icons in a group, extend the canvas to the right in an increment depending on the pixel size of the icons (16, 24, 32, 48)
- If an icon is not exactly 16/24/32 in its boundary, align it at the center horizontally and vertically
Categories
Commenting is disabled.
Categories
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
Categories
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 sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.
Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.
In you CSS:
width:32px;
height:32px;
background-size:1000%;
background-position:-32px 0; /* in increments of 32 pixels */
Categories
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 document outline
—
HTML (weighing on content structure and document outline)
- Write HTML5 tags
- No <div>s, no <span>s
- Check if HTML elements are sematic
- Check document outline
- Use <div>s and <span>s for visual design-specific purposes
CSS (weighing on mobile-first layout)
- Write styles
- No floats
- No positions
- Set color and background-color
- Set images
- Looks good on small devices? Move on to the next size