people

CSS Snippets + Sites of Interest

Posted on

I wrote similar posts to this one a few years ago, but two new loves have stolen my night and online life: Children.

Our first little-man was 2.75 years ago, our most recent lad was born on March 2nd 2015. Aha,  just 3 days ago. He is still in hospital with mum as she recovers from her belly-slashing. I have only hugged him three times, helped him have his first bath, and rocked him to sleep once. He is adorable.

But I digress.

I am a HTML trawler. Yes, I scrape your HTML to learn how a thing is happening and how I can reproduce it. Rest assured, I don’t simply copy and paste. I copy and paste into an editor, test it to ensure I have all the components … then carefully research it. I want to know how and why, it has always been my passion. Heck, when I first got online in 1998, I spent about two years reading LOTS of information regarding HTML and CSS (and a few other webdev languages) as my main focus.

Which is a great segue into my favourite paragraph by Daniel Mall: It says everything about my (sporadic) reading, testing, writing, coding and creating CSS/HTML over the last 16 years. Here it is:

Construction Site I read as much as I could from people like: Mike Davidson, Shaun Inman, Jason Santa Maria, Dave Shea, Jeffrey Zeldman, Jeff Croft, Andy Budd, Eric Meyer, Ryan Sims, Jeremy Keith, Garrett Dimon, Jared Christensen, Mark Boulton, Wilson Miner, D. Keith Robinson, Faruk Ateş, Ethan Marcotte, Derek Featherstone, Greg Storey, Cameron Moll, Roger Johansson, Khoi Vinh, Dan Cederholm, Dan Rubin, and so many more.
/…/ When these people wrote a new post, I read it.
/…/ This was a community I wanted to be associated with.

Wow, me too! And the funny thing? I am rereading their blogs & articles again after a long hiatus. It feels like finding old friends. None of them would know me, but I feel like I know them. Many of the site designs have changed (that’s how well I feel I know these people, I remember some their sites from 10 years ago!), yet their writing style is much the same, though evolved. The webdev bug is strong in me and ready to resume learning.

So now let me show you what CSS/HTML I have found via my #scrape&learn process. I won’t explain each, I simply show them. If you have an interest in this field, you will see the value in them:

Restoration of Rotunda on River Torrens

FIXED ABSOLUTE

/* Sits at base of page, beneath all text. Could be used as a fixed base */
.base { background-color: #666; color: red; text-align: center; padding: 0.5em 0; position: absolute; bottom: 0; left; 0; width: 100%; }
.base a { color: green; text-decoration: none; }
.base a:hover, .back a:focus { color: yellow; }

// Found here

VIEWPORT

Version #1

<meta name=”viewport” content=”width=device-width,initial-scale=1″ />
AND
/* Fix for device screen width */
@viewport {
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport {
width: extend-to-zoom;
zoom: 1.0;
}

Version #2

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

JITTER

<p class=”jitter” style=”left: -4px; -webkit-transform: rotate(-1deg);”>

Example here

Cliched View of Adelaide Iconic Horizon That’s enough samples for you. Three each time is enough.

Okay, next I show you interesting #webdev sites. I am always finding and reading tidbits of information about stuff I think can make my own site look better, or else which I can incorporate into #holdingbay pages. Yet since delicious.com fails for me regularly, I will post as articles with my descriptions. Plus it keeps my browser bookmarks tidier! Here goes…

1. Textile live web editor ~ A WYSIWYG editor where the code is on the left an the output is on the right. Includes the final HTML output for easy insertion into the page of choice. I use it for creating blog posts. Textile is so much easier for attaching URLs.

2. Fillerati ~ Lorem Ipsum is often confusing for clients. I had a client a few years back who asked if the content had been hacked on a #dummysite I was showing them. Sigh. This may still confuse them, but at least my english-speaking clients will at least go “Ooooh!”

3. A Pixel Identity Crisis by SCOTT KELLUM January 17, 2012 ~ Basically, pixel definition changes the defined appearance of a site on a smartphone. A long read, but our design process will improve for it.

4. Stephen Coles ~ Visit his ‘bits of work’ pages. Mostly visit to see how he uses his website. Inspirational. # |

5. Carolyn Wood ~ Another great web site design. Simple colours, easy to follow, uncluttered and to the point.

6. HappyCogI have visited their site many times over the years. The home page has changed dramatically since last I looked. Thankfully their articles are still cognitive. ;)

7. Quantity Queries for CSS by HEYDON PICKERING March 03, 2015 ~ Wow. Heavy reading, yet very interesting. May have to read that again. I can see already it will be worth it to incorporate into my site, thereby making it easy to access from a tablet or smartphone. Can see potential for expansion.

8. How to Build an App (.tumblr.com) ~ The thing most fascinating is the slightly tilted paragraphs. The answer is in the HTML. I have included in my sample CSS above. PLUS the article is interesting and educational.

9. What is your ViewPort size? ~ With so many smartphones and devices on the market, how can you be sure of the dimensions of any of them? Yes, this site can tell you. Email to yourself, open in browser on your device. Voila!

Nine is enough. I will try to write these style of posts once a week. Heck, with WordPress I can schedule them – and I still have hundreds of interesting articles and sites waiting to be re-revealed. Watch out for them…

All Links Lead to Facebook

Posted on Updated on

I follow a lot of interesting links on the interwebz each night. I am a prolific reader, I read prolifically. Is anyone read prolificly? But I digress…

A few nights back I stumbled onto Chris Harding‘s series,We the Robots . Hilarity ensued. That two word sentence is so cliched. Again, I digress…

"Whatchoo Lookin' At?"

Seems ‘We The Robots’ was a short period in his eclectic ‘toon time. Two years exactly, give or take a life time. A robot’s life can be long or short, depending on the country of birth. I like to digress.

So I checked out where Chris is now. Wasn’t difficult. Google is a search engine. I searched for him. Chris Harding. Animation. Here he is .

Then I went back to We The Robots. There is a link on his homepage to Chris’s / Chrises / Chrises’ / his Facebook page . hashtag head smack.

But the story doesn’t end there. (How many times have we heard THAT line? No, not the next one, the one prior to the one before this one!)

Seems Chris has an agent. Go read his awesome Contact page. Chris really his a funny guy. And his agent has a site filled with other a.ma.a.z.i.n.g artists .

Techtronics of Rex the RobotAnd his agent has links to sales teams, some live, some links dead. Nearly everyone of them are also on Facebook.

WHO ISN’T ON FACEBOOK?! Oh, yeah, my lovely coffee maker at Kikko’s on Pirie Street . Aha, free plug. I like my coffee, and I really like when it is the perfect breakfast. Much digression. And digestion. Coffee is good for that.

That’s it. More again. Another time. I make no promises I will post again tomorrow. I do that too often and don’t, so now I say I post irregularly – which means it is surprise to even me when I do. With surely more digression.

Using Twitter to Get Camera Recommendations

Posted on

Rear view of Professional SMC Member

Hard to believe it, I have had a Twitter account since mid 2008.

For a long time it was just something I looked at from time to time, not understanding how anyone could cross-converse in such a hectic and vibrant community. It looked (and sometimes still does) like a bazillion monkeys chattering over the top of each other, all clambering for the highest point to ensure their voice is heard.

Yet it turns out to be the best way to ask questions that a MASSIVE amount of people can respond to and (mostly) give a good response. Here is one great example:

I asked on Twitter earlier this evening…

With only one response, I chose to follow the link.

Considering many of my friends are complete arseholes, that was a big risk. Wait, wait, what I mean is they are Australian’s who like to use any opportunity to make fun of each other, which all of us, including the recipient, laugh till it is someone else’s turn. So when an Australian calls you an arsehole or a bastard, more often he is saying either “Aha, you got me!” or “Damn, you take the best holidays!”

Turns out this is a great sugggestion for a second camera. So I tried to follow with a less than 140 character reply. Considering all of the amazing features, I had to find just one or two that warranted a twitter response. So, Ric, @aqualung, this is what I have to say about the Fuji X-T1:

Read the full review of the Fujifilm XT1. I got what I wanted from Twitter. Which really is amazing.