Author: Brian Dys

PC, XAMMP – Wifi – iPad: Website Testing
In case that you need to test your website in your mobile device, just connect to your PC IP address (given that you’re using XAMMP).

Here are the steps:
1. Run XAMMP
2. Know your PC’s IP address by running “cmd” and typing “ipconfig”
3. Type that IP address into your iPad’s browser
4. If XAMMP talks about its “new security concept” then you have to edit this file from the XAMMP folder: httpd-xampp.conf
  - Go to: xampp\apache\conf\extra
  - Open “httpd-xampp.conf” in a text editor
  - Look for this line “Allow from ::1 127.0.0.0/8” and below it, add “Allow from all”
  - Restart XAMMP
5. Done!
2012-10-24
Android vs. iOS: Context Menu

I’ve first used an iPhone and iPad before I experienced using an Android (particularly a meager Samsung Galaxy Y with Android 2.3). The very natural controls of Android were the static/consistent position of Back and its context menus (long pressing certain items particularly lists).

Then I had to use iPhone again and kept on tapping on the wrong places. Yes, it is all about habit and conditioning but I’d still find that back button useful for iPhone (instead of having it on the top toolbar).

A spoof of iPhone 5 and its back button.

And the context menu. Why do I need to take extra steps in deleting or editing an item? For example, I would like to delete a contact; in Android, long pressing a contact would bring up a context menu while in iPhone you would need to find the Edit button and find out what is available to edit.

I remember in the era of DHTML, right-click customized menus in webpages were made available. But it was against the norm and it was new and people just wanted to stick with what’s recognizable.

That shouldn’t happen in these times. We should be innovating towards what would make the lives of people easier and better (or at least not harder or worse).

A time will come when everything would have context menus. You would have an option to do something to anything you right-click on or long-press on. Or maybe to anything you point your Wikipedia gun at.

2012-10-24
Same Height Divs

So how really do you get the height of the longer div and apply it to another so that they would have equal height?

Simple. By JS! I’m not in a master-level when it comes to jQuery or JavaScript; I still run to Stack Overflow and jQuery documentation to get a general knowledge of which does what.

Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:

[code lang=”js”]
$(document).ready(function() {

var $longerDiv = $(‘#long-div’).height();

$(‘#short-div’).css(‘min-height’, $longerDiv+"px");

});
[/code]

This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]

And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]

Check out the demo on jsFiddle: http://jsfiddle.net/8WDWf/

There might be a better way in doing this — hit up the comments!

—

Other code-testing sites on CSS-Tricks: http://css-tricks.com/seriously-just-make-a-jsfiddle/

2012-10-23
Site-Building: Day Five

It is the fifth day I’ve come back with my toolbox to continue building again.

Today, we’re going to look at how typography and link color/behavior could greatly affect the look of a site.

I’m planning to customize the link color and remove the default underline and also experiment on the webfont (maybe use Open Sans?).

A bit fleshy. Not quite sure.

2012-10-22
Splash’s not dead!

But who ever said it is? Splash pages/screens in web and apps are useful while the homepage/screen is loading. One could also use an animation when exiting from the splash.

So be creative on those splash now.

2012-10-19
Windows Search: XP – 1; 7 – 0

Windows XP has Benny the dog while Windows 7 has none.

Due to clumsiness, I lost a Photoshop file I was working on last Friday. It was an Android “mock-app” and prior to working on it, it was supposed to be a template file so the file name was something like “android-app_template_1a.psd.

Now, it’s Monday and it’s back to work, I was looking for the file with the project file name in mind. So, tough luck for me finding it.

I know, I could have looked up files modified by Friday but Windows 7 Search thinks you could just describe what you’re searching for in the Search field.

Thought so…

I never had this “difficulty’ in Windows XP. Makes me miss Benny the dog whom we shooed away far too many times. *sniff*

Hi, my name is not Benny and I’m never coming back.

Since we can’t do anything about it, might as well memorize operators, keywords, and wildcards for Windows 7 Search.

2012-10-08
The Noun Project

I recently joined The Noun Project — a site that crowdsources icons from designers and uploaders.

From their About page:

The Noun Project is a platform empowering the community to build a global visual language that everyone can understand.

Visit my page; I’m working on a facial expression series: Dys on The Noun Project

2012-10-05
Site-Building: Day Four
All WordPress .assistive-text and .screen-reader-text are being hidden superficially — screen readers would still be able to read them.

Here’s the CSS snippet from HTML5 Boilerplate v4.0:
```
.visuallyhidden {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}
```
A screenshot of the 4th day of our Site-Building series.

—

By the way, I would write a separate post here how I write the class or ID name of an HTML element rather than placing the pre-defined class selector in the HTML code. For example, instead of putting .visuallyhidden in all elements that I want to be displayed according to the style, I would put its class or ID name along with .visuallyhidden in the stylesheet.
2012-10-02
Hair Chronicles 2012 – Part 1 of 7: Crowning Glory

What does hair on your head mean to you? Definitely, hair (facial or wherever) – its meaning varies from culture to culture. I would not try to explore deeply the Filipino culture but my own (and maybe yours, my good reader).

This is the first hair on my head out of my mother’s womb:

My first day on Earth. (Got tired editing out the date.)

Nobody could say, “I styled that hair” but nature itself. Until we’re one. Hair begins to grow into our eyes and onto our food. So mom and grandma morph into instant beauticians and take the bowl out of the kitchen to stencil our unadulterated hair to works of art.

What do you remember about your first hairstyle/cut?

Cave Man to Wolverine

2012-10-01
Rebels at Work

My Rebels at Work answered questionnaire.

About Rebels at Work:

This Rebels at Work community is for corporate rebels to share experiences, insights and advice with other rebels and aspiring rebels. By rebels we’re talking about those people who feel compelled to create ways to improve, change, and innovate. They are brave (or foolhardy) enough to stand against the prevailing mindset of the organization and argue for a better way. The hope is that rebels can find courage and ideas to be more successful, and executives can see why their success depends on encouraging rebels.

You may share your story, too, if you’re a “rebel”.

A screenshot of my page at Rebels at Work.

2012-10-01