
👋 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. 🥰
Yesterday, I was tailgating. A person. Waiting for him to stay away from the road and onto the sidewalk.
Jaycelle asked me why I didn’t bother to honk the guy to alert him. I told her that car horns aren’t meant for people but for other vehicles (and there’s an etiquette for honking, too).
“But how would you alert them (to prevent them from becoming a human burrito, I assume)?” she asked.
Well, a while ago, I beeped a vendor carrying a wide merchandise and he let me pass. But that’s from a distance so I did it.
Ever walked at a sidewalk where on the road there are big buses stuck in traffic? And they blast your left eardrum outside your right?
So I thought, vehicles must have a horn for fellow vehicles and for fellows.
I got FruityLoops 3 to manipulate and produce tracks, good ol’ Winamp 5 to play exported materials and convert files to uncompressed WAV. And now, Audacity to trim and stitch raw materials.
It’s all about SoundThemesâ„¢ wherein sound effects is another layer of the user experience. But that’s not all – it wouldn’t be a theme if the collection of sounds is fragmented. This would be used in all kind of actions and hints in any game or app.
So for this prototype, I used our favorite urine-colored drink – Mountain Dew to collect all sorts of soda can sounds. Using iPhone 4’s Voice Memos app, I recorded all clinks and clanks of the can from full to empty to down the trash can.
Girls and boys, I present to you the raw recording (but that might probably bore you):
So here’s a trimmed and stitched version:
And an electronic version using only the individual sounds of the can:
Boy did I miss clicking tunes in FruityLoops. I remember the sleepless nights in 2003 just composing electronica. I revisited this app (software as we call it back then) to produce some sound effects for a mobile app.
It was sometime in the early 2000s that I’ve discovered this electronic machine and got hooked to it. It has come a long way now – at version 11. At that time, I was eager to purchase the latest version for Php 25,000 hoping I would become a musician.
Here’s a quick tune to grease up the clunky wheels:
If you have a padded content, everything in it will be bound by the padding around it.
But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.
We use negative left and right margins to offset the spacing brought about by the padding.
The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for margin-left: -1rem
, it will allow the content 1rem
at the left – couple that with a margin-right: -1rem
, it will allow the content 1rem
at the right. That will offset the 1rem
padding around the container.
[codepen_embed height=”798″ theme_id=”1820″ slug_hash=”FybHu” default_tab=”result”]See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
As tested on the img
element, margin-right
does not work – so we wrap the image in a div
and apply the negative margins on that element.
You can use negative margins to offset/correct unwanted spacings around elements.
Update – 10/9/2014
This post has been moved to Design DriveThru.
It’s like trying to solve a puzzle – you try out different solutions until you either come to a dead end or to face more questions.
That’s how it is trying to establish a foundation, a system in simplifying the process of designing an internet product such as websites, apps, and nowadays, whatnot.
How can we simply turn the abstract ideas of clients into a bunch of playing cards we could easily identify and arrange and ultimately build into a house (not made of cards)? Also at the same time, with only a flick of a switch, upload themselves and make available for usage.
That’s what I’m trying to find out (at least the first part).
I’m lazy. But it’s the lazy people who invented the wheel and the bicycle because they didn’t like walking or carrying things.
I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block
, max-width: 100%
, and overflow-x: auto
. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.
[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]