👋 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
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.
Negativity only for margins
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]
A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.
My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.
But nothing happens because the label is a mere label unconnected from the form element (checkbox).
How do we make it easier for the user?
We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.
Categories
First of all, let me tell you that I am grateful for our forefathers who relentlessly struggled to gain our independence a long time ago. Independence literally from foreign oppressors.
But personally, this day feels like celebrating my 13th birthday. Cakes and gifts and party hats didn’t bear much delight anymore. Suddenly it became irrelevant.
Today, Google is celebrating Philippine Independence Day. And lots of government officials. And organizations. And Filipino people, too.
