world wide web

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…

Dell Upgrades Causing Intermittent Buzzing

Posted on Updated on

My DELL laptop, running Windows 8.1, started buzzing every 60 seconds during YouTube video’s earlier this evening (16 Feb 2015). It was annoying and I wasn’t sure what was doing it. Was it Youtube? Was it the laptop? Was it my gaming software?

Rather than being an average user (ie: wondering how much I would have to pay Richard Pascoe to fix my laptop), I researched online to determine if it was a known issue.
Colour Coded

TIP #1: The first thing you learn on most ICT help-desk’s is that Mr Google is your best friend. Heck, every job interview I have there is nearly always this question:
Q: What do you do if you don’t know the answer to a user’s query?
A: Google it.

Bingo. I had to test a few key words; Initially I was thinking it was due to Nvidia updates,  so I searched Google for ‘recent Nvidia update problems’.

TIP #2: Always seek for your issue with the word ‘problem‘ in the search. Then select ‘Search Tools‘, drop down on ‘Any time‘ to ‘Past week‘, thereby reducing search range to most recent information. If you don’t, it will default to the most common looked at page – which are often many years ago!

Initially some of the results suggested Nvidia, but most were not recent enough. I suspected the issue might be closer to home: The laptop. So I changed to the search parameters to ‘dell audio buzzing’, the answer was revealed and verified in the DELL community support forums:
Pile of Computer Boards

1. Open ‘Control Panel\Programs\Programs and Features’
2. Remove ‘Dell Support Assist’ and ‘Dell Support Agent’
3. Reboot or Restart your machine.
4. Play youtube video to test if issue persists.

DISCLAIMER: This remedy fixed my laptop with its specifications. It may not suit every brand or computer. If you are not sure or don’t feel confident doing this yourself, I highly recommend Richard Pascoe, the Adelaide Tech Guy. I get no kickback from recommending him, we are just good friends.

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.

Bookmarks of Interest

Posted on

Roped Rock God

Despite two real-world events today, I’ve still managed to get onto the online world to visit and read a few world wide web sites of personal interest … and here they are for others to read.

OK, they are really published here so I don’t have to bookmark them on my computer. Since Deli.ci.ious changed hands I have found it to be more useless than a watch with no hands.

What this list really shows how extra-eclectic my reading often is. One of them has music playing in the background – a little old hat for web sites, yet this is cool.

  1. The Business Mistake that Cost Me $1.5 Million – Entrepreneur Jen Bilik learned a lesson the hard way when she trusted the wrong person.
  2. Backed by first round’s dorm room fund, Pagevamp turns Facebook pages into Websites.
  3. Why businesses should act human on Facebook.
  4. Conran imagines a digital camera with a retro spirit .
  5. StartUp Weekend Adelaide . Being a long-term resident and worker in Adelaide, I had to mention this page. I really should get along to one of these events, just to see what it really is all about.
  6. The difference between a Mobile Site and a Full Site by Jakob Nielsen.
  7. The Innovative Brain

Monitor Failure

For anyone who think they can determine a person’s personality by the web sites they visit … good on you.
For anyone thinking this is just an average post, I agree. It’s time I started writing again. Again.

Learning the Bo Diddley Beat

Posted on

I like finding and reading/watching all manner of interesting articles from all over the world wide web. I have done so for over ten years, and surely will continue garnering loads of information of all subjects. Even if pointless. Yet tonight’s find isn’t useless, yet maybe just a little left field for me.

Being an ardent U2 fanatic, I particularly enjoyed this guitar lesson. Yet I don’t play guitar. Yet now that I have learnt how to create a ‘Bo Diddley Beat’ on a guitar, the next time I get to hold a guitar, I will attempt to try this out. No doubt failing miserably.

That’s all. So as they do in Twitterland, and now on Facebook, here is a hashtag #justsaying

Using My Blog as Originally Intended

Posted on

Lines of Light Every day I read a myriad of web sites that meet my interest. More often I post them on Facebook or Twitter. This morning an idea hit me right between the eyes: Post these links onto my Blog. Stupidly this is exactly why I started for blogging back in the late 90’s.

Yet when I was invited to use Facebook, I lost interest in a lot of things, particularly blogging. That fact annoys me. I seriously gotta get off that ‘book and get back into paperbacks!

So, today, after much trawling of websites throughout today, I found a LOT of sites of interest, yet these six are the ones that interest me most. I like to write my own special by-line to sell the sites. It helps to improve my copy-writing skills, all self taught!


1. If any of your pages have been swallowed into the abyss, most likely it was devoured by a terror of the deep. That is all. Not sure why I listed this link, it just tickled my sense of humour.

2. Got memory-loss issues? Can’t recall the something you saw just 4 seconds ago? Forget where you were last night? Or simply want to record every important moment in your life?
/ Found at blog.makezine.com.

3. Want to learn all that you want without ever stepping into a classroom? You can. For at least seven years the internet has provided many locations through which you can learn the physics of underwater macrame or toilet-paper-mache.

L

5. The Microsoft Surface bombed in the sales department. No surprise to me. When they first started marketing them here in Australia, most of us watched transfixed as a bunch of teenagers pranced around a fountain ‘clicking’ the monitor to the keyboard.

It looked good, the marketing was schweet … yet few of us imagined actually owning one, let alone getting the opportunity to touch one. I did, just the one time. Mr Richard Pascoe brought it to lunch one time, whereupon I proceeded to push all the buttons. (Still wishing I had pushed a few more, but hey!) I liked the look of it, yet was concerned with a few issues:

  • Keyboard. Or lack thereof. It barely feels like a keyboard. Touch-typists are going to get pissed off real quick. I did. This device is not built for coders or photo editors, it is for everday users, like, say – social networkers who spend 98% of their time jibberjabbering about their movement around their city. Not for coding or moving files between servers. It is a toy, and expensive one that that.
  • Windows 8. Sigh. The few times I have had the misfortune to use Windows 8, I have been less than impressed. Put your cursor into the corners of the screen if you want to get anywhere. Don’t believe all the hype, it’s a severely dumbed-down interface. The Apple people must be flattered.

5. You don’t have to be a genius to do anything. You just need to be persistent and willing to learn how to a computer – either at school or online , or from a book. Maybe read a book online. Imagine it, learning without teachers. Sure, network with cohorts in the same industry, just don’t spend a fortune to learn what you want or need to know. Has worked for me. / Disclaimer: It also helps to employ people smarter than yourself. That’s how the guys in this video below have run their respective business’s.

6. Thanks to Peaches for helping me find this command for Notepad++ to convert between HTML, Markdown and TextileAs the author/write of this command says, it is going to be useful for writing material from scratch, to polish existing content in HTML, and to lift material from other documents or websites.

Code Collective

Turns out it is an excellent addon to NotePadd++.  / Thankfully there’s also an easy option to do what I need: Convert textile-filled notes into link-filled wordpress articles.


OK, that’s enough for you to mull over. I don’t want to use up all my energy in one sitting, gotta save some doozies for next time I post here.

PS. 7. Read how Facebook died/dies. Sorta, kinda, maybe.

Advice to Commonwealth Olympians

Posted on

I said this on Facebook earlier today. Now I realise that a wider audience needs to read it:


Advice to Athletes:

Forget about social media, you have a bigger job to do this week.

Advice to social media addicts who feel the need to judge olympians:

Get off the computer. Go outside. Get some exercise. Grow up. Get a life.


Timer