Scriptus Web Design | Blog: January 2013

Wednesday 30 January 2013

Paint.NET Plugin Index - February update (free download)

I've just completed the February update to the Plugin Index on the Paint.NET forum. Anyone wishing to have a look can find the latest version via the links below.

I also upload a PDF version to the forum, which can be found in the Plugin Index thread: here

The Plugin Index is free to download regardless of the format. Donations to support this ongoing work are welcome via the Paint.NET forum or use the coffee cup image in the sidebar (on the right hand side of this page) to buy me a virtual cup of coffee.

Kindle Edition: Click Here

Epub Edition: Click Here

Tuesday 29 January 2013

Classless CSS

I found a very thought provoking article by Heydon Pickering on the Smashing Magazine website Classes? Where We’re Going, We Don’t Need Classes!. In the article, Heydon makes a strong case that the use of classes is

"as antiquated and inappropriate for styling as the table is for layout"

Heydon argues that tying semantic HTML to CSS classes is unnecessary and actually harmful to the interoperability of the HTML. Heydon naturally dislikes Object Orientated CSS as a further impediment to the purity (and therefore transportability) of the HTML. In his thinking, the HTML should be separated from the CSS, not tied to it via classes. To put it into his own words...

"An element that insists on looking the same wherever it appears is a bit like a Briton who travels from country to country refusing to speak the native language and burping the English national anthem. It’s aggressive and inappropriate."

Aggressive and inappropriate. I love that.

Q:

So what is to be done to introduce classless CSS?

A:

Paradigmatic styling.

Paradigmatic styling is using the right element for the job and styling it appropriately. We have a toolbox stuffed with tools with which we can apply styling to individual elements without resorting to classes. Appropriate use of microformats and CSS selectors make the use of classes highly suspect.

Conclusion:

Like I started out saying - this is a thought provoking article. I'm not sure I'm willing to go cold-turkey and forgo using classes in my CSS right away, but you can bet that I'm going to severely question my use of classes from now on.

Oh, and the comments posted after the article make fascinating reading!

Saturday 26 January 2013

SAFE factory farming ad - Must see!

New Zealand has a terrible record of animal abuse in the name of farming. SAFE (Save Animals From Exploitation) are taking a stand and you should too!

You've got to be moved by this two minute version of the factory farming ad....

My partner and I are proud supporters of SAFE and this campaign in particular.

HTML5 & CSS document encoding

I always knew it was right and proper to declare the type of encoding in a HTML document. Specifying the encoding type means that characters in the content are correctly interpreted and displayed.

HTML5 has a brand new attribute, charset which makes the declaration cleaner and simpler than the old method. In the past (HTML 4.01) we would have written:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Now in HTML5 we write:

<meta charset="UTF-8">

How easy is that? Additional stuff you might want to know:

UTF-8 - Specifies character encoding for Unicode. This should be your default encoding type unless you have some specific need to have another encoding type e.g. to specify another character set.
Metadata is used to provide information about the HTML document. It is not displayed on the page, but is able to be interpreted or parsed by browsers or search engines.
<meta> tags always go inside the <head> element. The encoding needs to be within the first 1024 bytes of the document, so place it immediately inside the <head> tag.
An alternative to the meta charset element is to use a Unicode Byte Order Mark (BOM) character at the start of the file. I do not recommend this system over the <meta> method.

What you didn't know....

You should also specify the encoding type in your external CSS documents! When I read this I had a really? moment. I hadn't known that. Now I do - and so do you.

Like the HTML5 spec above, the encoding for CSS documents should appear at the very start of the document. Here's how to write the encoding:

@charset "UTF-8";

This declaration tells the browser to read the following CSS file as UTF-8. Easy.

Tuesday 22 January 2013

New Zealand Teletext service shutting down.

Here in New Zealand the Teletext service is being shut down. We lose it in April 2013 along with the rest of the analogue TV service.

I like the service - fraught though it is with problems. I use it to scan the headlines for something interesting or new. It's a bit like a prehistoric RSS feed.

To solve the problem of missing this news service, I got one of these

Mini TV for Android, coupled with one of these

Mini keyboard & mouse from www.GeekBuying.com.

This little package plus my home WiFi turns my 'dumb' TV into a smart one with Android 4.1, apps, browser et al. not only is this cool, but the dual core mini TV is very quick.

For a news service I use this free app:

https://play.google.com/store/apps/details?id=com.daingo.news.newzealand&feature=search_result

Goodbye Teletext, sniff - I'll miss you with your wonky links, bad spelling and horrendous grammar.

BTW I have got great service from GeekBuying.com! They ship internationally for free. That's right. FREE.

I highly recommend them.

Saturday 19 January 2013

Proportional Media Queries - ems!

Found this excellent blog post by Lyza Gardner (post date March 28, 2012).

The EMs have it: Proportional Media Queries FTW!

In this article Lyza expounds the virtue of using not pixels in media queries, but ems. I'd always used pixels and though I was pretty cool doing it.

So what's the difference? Pixels have a fixed size. Ems do not - they are based on the current font size. If the viewer increases the font size a pixel based media query is likely to fail. The em unit media query is still going to work.

Fortunately it is not hard to change the base unit of your media queries. Here's how:

1. We assume that the base font size is 16px - because it is a pretty good guess as most browsers use this as the default font size.

2. We know that 16px = a font size of 100% = 1em. With me so far?

3. Take all those pixels based media queries and divide them by 16 and substitute the em unit. Bingo.

e.g.

@media only screen and (max-width: 1040px) {
}

@media only screen and (max-width: 960px) {
}

Becomes

@media only screen and (max-width: 65em) {
}

@media only screen and (max-width: 60em) {
}

Thursday 17 January 2013

Mastering Paint.NET 3.5.10 - ebook

In September of 2012 I published my book on Paint.NET. The ebook (Kindle version) is available from Amazon.com (the image below is a link).

I've written this book for beginners through to advanced users. I hope Mastering Paint.NET 3.5.10 will prove the definitive guide to our beloved image editor.

The book is a complete reference to every feature, nuance, tool, filter and effect found in Paint.NET. It's hundreds of pages with hundreds of color images, screenshots, diagrams, tips, detailed explanations, hints and how-to guides.

The Table of Contents at a glance:

Contents
Introduction
About The Author
Dedication
Acknowledgments
Conventions & Abbreviations

SECTION 1 Before You Start With Paint.NET
Chapter 1 - Introducing Paint.NET
Chapter 2 - Installing Paint.NET

SECTION 2 Basics
Chapter 3 - Understanding The Interface
Chapter 4 - The Menus Explained
Chapter 5 - Tools
Chapter 6 - Color
Chapter 7 - Layers & Layering
Chapter 8 - Adjustments
Chapter 9 - Effects
Chapter 10 - Selections & Selected Areas

SECTION 3 Advanced Concepts
Chapter 11 - Plugins
Chapter 12 - File Formats
Chapter 13 - Understanding Printing & DPI
Chapter 14 - Blend Modes
Chapter 15 - Customizing Paint.NET

APPENDIX A Keyboard Shortcuts
APPENDIX B Summary of Tips
APPENDIX C Online Resources
APPENDIX D List of Plugins
APPENDIX E Menus

Available from Amazon in Kindle format. Other e-formats available by contacting the author.

Here's what some of the esteemed Paint.NET forum users had to say about it:

“Scott aka EER has achieved something with this book - teaching an old dog new tricks. A very informative read, with the author speaking to you ... not down to you as some user manuals do. His sense of humor adds to the whole reading experience.” -- Welshblue

“Definitely a must of all users of Paint.NET. I learnt a lot in reading this & just had to try out many of the things I was reading about. An absolute pleasure to read with very good explanations & a great sense of humor.” -- barbieq25

“Scott Stringer's casual writing style makes this book a pleasure to read. He really covers the basics of Paint.NET well. I consider this book to be 'required reading' for all Paint.NET beginners.” -- BoltBait

Paint.NET Plugin Index

Each month I compile and release an updated list of all the plugins which are available for Paint.NET.

These third-party developed plugins add new features, effects, adjustments, filetypes and tools to everyones favorite free image editor.

To date there have been over 300 new plugins released, totalling many hundreds of new tools and effects. As if Paint.NET wasn't powerful enough - you now have many many more toys which can be easily added.

Plugins are released on the Paint.NET forum (http://forums.getpaint.net/) by the developer. These may be downloaded for free from the Paint.NET forum or from the developers website.

WARNING: You should NEVER download Paint.NET plugins from any other source!

Some developers offer the option of making a small donation if you like their product. Supporting the developer in this way helps keep the plugin in development and supports the freeware software model (Paint.NET is also funded by donations - please donate to support this excellent image editor).

The Plugin Index is generally available on the first day of each month and is free to browse online. For offline viewing, the Plugin Index is downloadable in two formats (pdf and kindle - also available from the Paint.NET forum).

To browse the list or download it for offline viewing, check out the forum: http://forums.getpaint.net/index.php?/forum/37-plugin-index/

Wednesday 16 January 2013

Stereogram Tutorial

Away back in 2009 I discovered how to create simple stereograms using nothing but everyone's favorite image editor, Paint.NET. Stereograms are those really cool 3D images (aka Magic Eye images) where you get a hidden 3D image popping out of the picture.

Viewing the image in a certain way tricks the eyes into seeing the 3D image which appears to “pop out” of the original image. For some help with the viewing technique, follow this link http://en.wikipedia.org/wiki/Autostereogram.

If you would like to figure out how to create images like the one below then head over to the Paint.NET forum: Stereogram (autostereogram) Tutorial

ABC

PDN

EER

Antelope

HTML Declaration

HTML5 uses a new form of document declaration in order to specify the language and HTML version the document uses.

The format is much simpler than the previous dreadful HTML document type declarations (DTDs) - which I could never remember and always cut & pasted the correct one into new documents.

The new format is instantly recognizable due to its brevity and announces that the following document is HTML5. For this reason the declaration should go at the head of each HTML5 document.

Here's how it looks:

<!DOCTYPE html>

Combining the declaration with the HTML tag (as above) is an acceptable practice, though on it's own the <!doctype> declaration is not an HTML tag.

The declaration is case-insensitive. Uppercase, lowercase or a combination is acceptable (I see mostly uppercase in the wild with lowercase 'html' - just as I've written above).

The declaration is supported by all the major browsers. Any browser not recognizing it (are there any?) will default into standards mode. Standards mode means that the browser will parse the HTML in a compliant way and ignore any HTML5 tags that are not supported.