Blog

Template: Sticky

This is a sticky post.

There are a few things to verify:

  • The sticky post should be distinctly recognizable in some way in comparison to normal posts. You can style the .sticky class if you are using the post_class() function to generate your post classes, which is a best practice.
  • They should show at the very top of the blog index page, even though they could be several posts back chronologically.
  • They should still show up again in their chronologically correct postion in time, but without the sticky indicator.
  • If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.

A Quick Status Update All engines are running at full steam, captain!

The phonograph, also called gramophone or record player, is a device introduced in 1877 for the recording and reproduction of sound recordings. The recordings played on such a device consist of waveforms that are engraved onto a rotating cylinder or disc. As the recorded surface rotates, a playback stylus traces the waveforms and vibrates to reproduce the recorded sound waves.

The phonograph was invented in 1877 by Thomas Edison. While other inventors had produced devices that could record sounds, Edison’s phonograph was the first to be able to reproduce the recorded sound. His phonograph originally recorded sound onto a tinfoil sheet phonograph cylinder, and could both record and reproduce sounds.

Continue reading A Quick Status Update All engines are running at full steam, captain!

Free Notebook Photos Use these photos in your personal and client projects!

Several months ago, I ran into a Kickstarter page for Baron Fig notebooks. I was immediately struck by the aesthetic and simplicity that the notebook promised. Although I foolishly didn’t back Baron Fig at the time, I was delighted to see they recently started shipping.

Fast forward to today, when I finally received a few of these notebooks in the mail. The build quality and paper are top-notch, and provide a great writing experience. I couldn’t help but take a few photos of these beautiful notebooks.

Feel free to use these photos on any of your projects, commercial, personal or otherwise. They could make great Featured Images for your WordPress posts and pages, which is hopefully powered by an Array theme. If not, well, you should fix that immediately.

Revisiting Dieter Rams 10 Principles of Design Dieter Rams was a pioneer in industrial design. Here's his advice.

Rams began studies in architecture and interior decoration at Wiesbaden School of Art in 1947. Soon after in 1948, he took a break from studying to gain practical experience and conclude his carpentry apprenticeship. He resumed studies at Wiesbaden School of Art in 1948 and graduated with honours in 1953 after which he began working for Frankfurt based architect Otto Apel. In 1955, he was recruited to Braun as an architect and an interior designer. In addition, in 1961, he became the Chief Design Officer at Braun until 1995.

Rams introduced the idea of sustainable development and of obsolescence being a crime in design in the 1970s. Accordingly he asked himself the question: is my design good design? The answer formed his now celebrated ten principles.

Continue reading Revisiting Dieter Rams 10 Principles of Design Dieter Rams was a pioneer in industrial design. Here’s his advice.

Crafting Quality UX Curating a path for your users is an art form.

Philosophy of design is the study of assumptions, foundations, and implications of design. The field is defined by an interest in a set of problems, or an interest in central or foundational concerns in design. In addition to these central problems for design as a whole, many philosophers of design consider these problems as they apply to particular disciplines (e.g. philosophy of art).

The History

The field needs more depth, in a sense graphic design needs to find itself, all while evolving at the same time. It’s debatable how the background of graphic design needs to be shared. There’s the discussion of different designers, and their notable works. Portrayals of how the physical art has changed and been inspired by past all while embracing the future.

Graphic Design as a field is young. There is not enough information about how it came to be. There is subtle information about society accepting messages being put in front of them. There’s not enough information given to design students about where the concept for graphic design comes from, or at least an understanding about the original forms of communications that used more than words, or why typography has such a large impact.

Continue reading Crafting Quality UX Curating a path for your users is an art form.

Getting Down and Dirty With CSS Selectors It's really not so hard once you get the hang of it.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content from document presentation.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

.post code {
	background: #90979F;
	color: #fff;
	padding: 40px;
}

Continue reading Getting Down and Dirty With CSS Selectors It’s really not so hard once you get the hang of it.

Using Typekit To Step Up Your Web Typography Learn a few basic tips and tricks about typography.

In traditional typography, a font is a particular size, weight and style of a typeface. Each font was a matched set of metal type, one piece (called a “sort”) for each glyph, and a typeface comprised a range of fonts that shared an overall design.

In modern usage, with the advent of digital typography, font is frequently synonymous with typeface. In particular, the use of “vector” or “outline” fonts means that different sizes of a typeface can be dynamically generated from one design.

Font Characteristics

In addition to the character height, when using the mechanical sense of the term, there are several characteristics which may distinguish fonts, though they would also depend on the script(s) that the typeface supports. In European alphabetic scripts, i.e. Latin, Cyrillic and Greek, the main such properties are the stroke width, called weight, the style or angle and the character width.

Different fonts of the same typeface may be used in the same work for various degrees of readability and emphasis.

The regular or standard font is sometimes labeled roman, both to distinguish it from bold or thin and from italic or oblique. The keyword for the default, regular case is often omitted for variants and never repeated, otherwise it would be Bulmer regular italic, Bulmer bold regular and even Bulmer regular regular. Roman can also refer to the language coverage of a font, acting as a shorthand for “Western European.”

Time Travel and You: A Beginner’s Guide Have you ever wanted to traverse space and time? Here's how!

Time travel is the concept of moving between different points in time in a manner analogous to moving between different points in space. Time travel could hypothetically involve moving backward in time to a moment earlier than the starting point, or forward to the future of that point without the need for the traveler to experience the intervening period (at least not at the normal rate). Any technological device – whether fictional, hypothetical or actual – that would be used to achieve time travel is commonly known as a time machine.

Time Travel Methods

In technical papers, physicists generally avoid the commonplace language of “moving” or “traveling” through time, and instead discuss the possibility of closed timelike curves, which are worldlines that form closed loops in spacetime, allowing objects to return to their own past. There are known to be solutions to the equations of general relativity that describe spacetimes which contain closed timelike curves (such as Gödel spacetime), but the physical plausibility of these solutions is uncertain.

Continue reading Time Travel and You: A Beginner’s Guide Have you ever wanted to traverse space and time? Here’s how!

Markup: HTML Tags and Formatting

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Markup: Image Alignment

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of NoneLeftRight, and Center. In addition, they also get the options of ThumbnailMediumLarge & Fullsize.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300
Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!

Markup: Text Alignment

Default

This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.

Left Align

This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it’s views. It’s favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.

Center Align

This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.

Right Align

This is a paragraph. It is right aligned. It is a bit more conservative in it’s views. It’s prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it’s a pretty good shot from at least four or five football fields away. Dead on. So boss.

Justify Align

This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it’s place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.