ERIK TEICHMANN

Good Shepherd Lutheran Church of Laconia, New Hampshire approached me to update their website to make it more friendly to visitors, be easier to update and be able to feature regularly updated content.

Their new site features a beautiful featured content slideshow on the home page, with additional areas to showcase upcoming and ongoing events. The new identity captures the spirit of the congregation and welcomes visitors to the new site.

The Lutheran Campus Ministry at Pennsylvania State University offers many opportunities for students to worship, fellowship and serve. The previous website was dated and difficult to maintain, so Campus Minister Alicia Anderson contacted me to create a new website and identity package for the community.

The new design has a younger feel that appeals to the college crowd. Integration with the LCM’s Facebook page and Google Calendar allows for students to easily keep up to date with what is going on.

I was approached by the Synod Office of the Northwestern Ohio Synod of the Evangelical Lutheran Church in America to create a new identity and rebuild their website from the ground up. Over the years, the synod has undergone several redesigns of their site, but never a comprehensive rebuild.

We reorganized the myriad of resources on the synod’s existing site into a new structure, created a new identity to match the synod’s mission and makeup, and built a beautiful new site that synod staff can easily update with current information, resources, events and more.

Christ Lutheran Church of LaVale, Maryland needed a new online presence to spread the word about their ministries to the community, and to offer information on current events to their members.

A set of custom WordPress plugins were created to highlight the church service times and location, as well as offer upcoming events in an easy-to-view format. The use of WordPress makes it easy for staff and volunteers to update the site on a regular basis.

Garden Gate Quilting offers professional hand-guided machine quilting services professional quilting projects, from wall-hangings to king-size quilts. Last updated in 2003, the website was in need of a major redesign.

After research into competing providers’ website, we approached the project with confidence that this would be the best site of its kind online.

This poster was designed as a one-off for a local church. The event is designed as a casual get together with cider, s’mores and fellowship, and to foster discussion on future mission and ministry of the church.

The Stewardship of Life Institute is a non-profit organization affiliated with the Evangelical Lutheran Church in America. The Institute has maintained a web site with an extensive archive of articles, links and resources covering a broad range of stewardship related topics for many years and was in desperate need of an update not only to their look, but also to the management and editorial process.

After a thorough consultation, I built a new site that leveraged their existing archive with the easy administration of a WordPress site and built-in social networking features. Features include jQuery content sliders for the front page to dynamically display content,  integrated email newsletter functionality, custom print stylesheets Twitter, Facebook and email sharing and a custom “browser bar” that allows users to more easily find the content they need.

Seminary One is a giving campaign designed by the Class of 2010 at the Lutheran Theological Seminary at Gettysburg. I was approached to create an identity package for the campaign for use in a mail campaign and a presentation piece.

The Luther Bowl is an annual event involving seminaries from all over the United States. Each school fields a team for a day-long tournament of games. This year, I was asked to provide a design for the T-shirt that is sold to benefit students. The site evolved as a way to take pre-orders for the shirts and provide information for the event itself.

This is Mt. Rainier in Washington state casting its shadow on the clouds above at sunrise. You know, because mountains can do that. Also: be brokeback. It's true, I remember seeing a movie about it once. The Notebook maybe?

Mt. Rainier is a volcano, climbing to a height of over 14,000 feet (4300 meters). There are no other mountains anywhere near that height nearby, so it's really prominent in the landscape (by comparison, there are several fourteeners, as they're called, in the Rockies, so they don't stick out as much though they're still breathtaking). The rising Sun catches the peak, and the shadow is cast on the underside of the cloud layer.

Beautiful. I've actually seen the Grand Canyon at sunset before and lemme tell you -- it's a real spiritual experience. Especially if you're on mushrooms and convinced you're an Indian shaman. I summoned a f***ing eagle, bro. Hit the jump for a bunch more from different angles and locations but follow the links for some high-res shots. Mt. Rainier casts a big shadow on Seattle's sunrise [kokonews] and The long shadow of Mt. Rainier [discovermagazine] Thanks to Joslyn, who just informed me the phases of the moon are caused by a mermaid singing at the man in the moon. Now that -- that I believe.

We know it’s shopped, but we can’t tell because of the pixels. PhD student [Kevin Karsch] along with a few other friends will be presenting their methods to render objects into preexisting photos at SIGGRAPH Asia next month.

The paper (PDF…) covers how [Kevin] et al. go about putting impossible objects into photos. The user first defines the geometry of the picture; legs of tables are defined and the table top is extruded from these legs. The lights are then defined by drawing a bounding box and with a little bit of algorithmic trickery, a 3D object is inserted into the scene.

Comparing the results to the original picture is jaw-dropping. For us, photoshopping a bunch of billiard balls on a pool table would take hours, and it would never look quite right. [Kevin]‘s work for SIGGRAPH can do the whole scene in minutes and produces results we couldn’t dream of.

There’s no downloadable software yet, but the algorithms are there. Check out the video demo of the techniques and results after the break.

Filed under: software hacks

Desperately in need of a graduation paper, [Andrei] decided to build a few computer controlled recon vehicles (PDF warning), and we’re really impressed with the minimalist approach [Andrei] took.

The Computer Operated Recon Entity (C.O.R.E.) mk. I is based around a laptop. Instead of an Arduino, [Andrei] used a car stereo amp to control the motors. The two channel amp [Andrei] picked out has four outputs. Tying a motor to each output gives a four-wheel drive robot that’s really clever in its simplicity. With an onboard webcam, [Andrei] can do live video streaming from his remote vehicle. Outputting a specific tone with the sound card allows for full control of the robot.

The C.O.R.E. mk. II uses a Samsung Galaxy I5500 phone – the cheapest Android phone [Andrei] could find. The setup is similar to the mk. I C.O.R.E. with a WiFi connection sending video back to a base station. Control of the two motors is still handled by playing sound files and sending that to a stereo amp connected to the motors.

Check out the C.O.R.E. mk. II going Bach and forth after the break.

Filed under: android hacks, robots hacks

Prepare your ears for this bad ass Imperial March mashup from Ithaca Audio featuring samples from various sources—including Shaft.

Believe it or not, it actually works really well. Check it out after the break.

If you dig it, the extended version is available on SoundCloud.

(Devour via TDWG)

This amazing Hobbes plush was created by Lindsay Mays—who just happens to have an Etsy shop filled with her cuddly creations. Hobbes isn’t in there yet, but our fingers are crossed.

(Lindsay Mays via Super Punch)

If you’re not excited about the new Timeline feature at Facebook, Don Draper just might will change your mind.

via [thd] [Eric Leist]

Check out three Daleks chase down this turtle in the video after the break.

Needless to say, I believe we are witnessing the tail end of a very wild night at the Marriott.

(via BuzzFeed)

[Adam] from Teague Labs wrote in to share a new gadget they built to help demonstrate the capabilities of the Teagueduino. Their table top video game in a box was made with a bunch of electronic components they had sitting around, as well as soda straws, plenty of painter’s tape, and some popscicle sticks.

When someone pulls the string on the front of the box, a servo opens it automatically, and a second servo starts spinning the game reel. As the reel moves, the player is presented with a set of obstacles to dodge, guiding the “hero” via a knob-controlled servo. A hall sensor attached to the back of the character is tripped when passing over any of the obstacles, which are attached to the reel with magnetic tape. When the hero collides with an obstacle, the game ends and proceeds to close itself, much to the chagrin of the player.

As you can see in the video below, it’s a pretty entertaining and challenging game.

Looking to make one of your own? Swing by the Teagueduino site to grab the game’s code and be sure to share your creations with us in the comments.

Filed under: arduino hacks, toy hacks

This bird swore revenge after its mother died swallowing an action figure’s kung fu grip. It spent years training with the world’s greatest martial arts and weapons experts and now the hour of reckoning is at hand.

Watch the mighty Hate Bird take up arms against his enemies after the break.

(Bits and Pieces via The Mary Sue)

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Problems

Problem #1: They’re Not Semantic

The biggest complaint I’ve heard from purists since I created The 1KB CSS Grid two years ago is that CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.

Floated elements must also be cleared, often requiring unnecessary elements to be added to the page. This is illustrated by the “clearing” div that ships with 960.gs:

<div class="grid_3">
	220
</div>
<div class="grid_9">
	700
</div>
<div class="clear"></div>

Problem #2: They’re Not Fluid

While CSS grids work well for fixed-width layouts, dealing with fluid percentages is trickier. While most grid systems do provide a fluid option, they break down when nested columns are introduced. In the 1KB CSS Grid example below, .grid_6 would normally be set to a width of 50%, while .grid_3 would typically be set to 25%.

But when .grid_3 appears inside of a .grid_6 cell, the percentages must be recalculated. While a typical grid system needs just 12 CSS rules to specify the widths of all 12 columns, a fluid grid would need 144 rules to allow for just one level of nesting: possible, but not very convenient.

<div class="column grid_6">
	<div class="row">
		<div class="column grid_3"> </div>
		<div class="column grid_3"> </div>
	</div>
</div>

Problem #3: They’re Not Responsive

Responsive Web design is the buzzword of the year. While new tools such as 1140 CSS Grid and Adapt.js are springing up that enable you to alter a page’s layout based on screen size or device type, an optimal solution has yet to arrive.

Blame It On The Tools

All three of these problems directly result from the limitations of our existing tools. CSS leaves us with the ultimatum of either compromising our principles by adding presentational classes to mark-up, or sticking to our guns and forgoing a grid system altogether. But, hey, we can’t do anything about it, right?

Well, not so fast. While we wait for browsers to add native CSS support for this flawed grid layout module, a futuristic version of CSS is available today that’s already supported by every CSS-enabled browser: LESS CSS.

LESS brings powerful new features to CSS.

LESS What?

You’ve probably heard of LESS but perhaps have never given it a try. Unlike other tools such as SASS and CleverCSS, which try to reinvent the CSS syntax, LESS is a superset of CSS rather than a recreation of it. LESS adds to CSS by giving you the ability to use variables, perform operations and develop reusable mixins. Below are a few examples of what it can do.

Variables

Specify a value once, and then reuse it throughout the style sheet by defining variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}

The above example would compile as follows:

/* Compiled CSS */
#header {
  color: #4D926F;
}

Operations

Multiply, divide, add and subtract values and colors using operations.

// LESS
@border-width: 1px;

#header {
	border-left: @border-width * 3;
}

In this example, 1px is multiplied by 3 to yield the following:

/* Compiled CSS */
#header {
	border-left: 3px;
}

Mixins

Most powerful of all, mixins enable entire snippets of CSS to be reused. Simply include the class name of a mixin within another class. What’s more, LESS allows parameters to be passed into the mixin.

// LESS
.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
}

Verbose, browser-specific CSS3 properties demonstrate the benefit that mixins bring:

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Downsides to LESS

Having been skeptical of LESS at first, I’m now a strong advocate. LESS style sheets are concise and readable, and they encourage code to be reused. However, there are some potential downsides to be aware of:

1. It has to be compiled. This is one extra step that you don’t have to worry about with vanilla CSS.
2. Depending on how LESS documents are structured, the compiled CSS file might be slightly larger than the equivalent hand-crafted CSS file.

A Note on Compiling LESS

There are three approaches to compiling LESS style sheets into CSS:

• Let the browser do the compiling.
  As its name suggests, LESS.js is written in JavaScript and can compile LESS into CSS directly in the user’s browser. While this method is convenient for development, using one of the next two methods before going into production would be best (because compiling in the browser can take a few hundred milliseconds).
• Use a server-side compiler.
  LESS.js can also compile server-side with Node.js, and it has been ported to several other sever-side languages.
• Use a desktop app.
  LESS.app is a Mac app that compiles local files as they’re saved on your computer.

Introducing The Semantic Grid System

The innovations that LESS brings to CSS are the foundation for a powerful new approach to constructing page layouts. That approach is the The Semantic Grid System. This new breed of CSS grid shines where the others fall short:

1. It’s semantic;
2. It can be either fixed or fluid;
3. It’s responsive;
4. It allows the number of columns, column widths and gutter widths to be modified instantly, directly in the style sheet.

The Semantic Grid System uses LESS CSS to offer a new approach to page layout.

Configuring the Grid

Sounds too good to be true? Here’s how it works.

First, import the semantic grid into your working LESS style sheet.

@import 'grid.less';

Next, define variables for the number of columns, and set the desired widths for the column and gutter. The values entered here will result in a 960-pixel grid system.

@columns: 12;
@column-width: 60;
@gutter-width: 20;

The grid is now configured and ready to be used for page layout.

Using the Grid

Now that the grid has been configured, consider two elements on an HTML page that you would like to lay out side by side.

<body>
	<article>Main</article>
	<section>Sidebar</section>
</body>

The side-by-side layout can be achieved by passing the desired number of grid units to the .column() mixin (which is defined in the grid.less file).

// LESS
@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
	.column(9);
}
sidebar {
	.column(3);
}

The above LESS would be compiled to CSS as the following:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 700px;
}
sidebar {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 220px;
}

This page demonstrates the result. What makes this approach so different is that it does away with ugly .grid_x classes in the mark-up. Instead, column widths are set directly in the style sheet, enabling a clean separation between declarative mark-up and presentational style sheets. (It’s called the semantic grid for a reason, after all.)

So, What’s Behind the Curtain?

For the curious among you, below are the mixins at the center of it all. Fortunately, these functions are hidden away in the grid.less file and need not ever be edited.

// Utility variable — you will never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;

// The mixins
.row(@columns:@columns) {
   display: inline-block;
   overflow: hidden;
   width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
   margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
}
.column(@x,@columns:@columns) {
   display: inline;
   float: left;
   width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
   margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}

Fluid Layouts

The example above demonstrates a fixed pixel-based layout. But fluid percentage-based layouts are just as easy. To switch from pixels to percentages, simply add one variable:

// LESS
@total-width: 100%;

With no other changes, the compiled CSS then becomes this:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 72.9167%;
}
sidebar {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 22.9167%;
}

This example shows how the percentages are dynamically calculated using LESS operations, which also applies to nested columns.

Responsive Layouts

No modern grid system would be complete unless we had the ability to adapt the layout of the page to the size of the user’s screen or device. With Semantic.gs, manipulating the grid using media queries couldn’t be any easier:

article { .column(9); }
sidebar { .column(3); }

@media screen and (max-width: 720px) {
	article { .column(12); }
	sidebar { .column(12); }
}

Try It For Yourself

The Semantic Grid System delivers the best of both worlds: the power and convenience of a CSS grid and the ideal separation of mark-up and presentation. Download the grid for yourself, fork it on GitHub, and let us know what you think!

Download the grid from Semantic.gs.

Further Reading

• Semantic.gs
  Download the grid system.
• LESS
  Find out more about LESS.
• “LESS.js Will Make CSS Obsolete,” Dmitry Fadeyev
• “Responsive Web Design,” Ethan Marcotte
• 1140 CSS Grid and Adapt.js
  Two other approaches to responsive layouts.
• “Rethinking CSS Grids,” Mark Boulton
• “Best Practices Are Killing Us”
  Nicole Sullivan’s contrarian views on semantics, as described by Luke Wroblewski.
• 1KB CSS Grid
  Play with Tyler Tate’s original CSS grid.

(al)

---

© Tyler Tate for Smashing Magazine, 2011.

Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.

In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.

See live Demo.

If you're one of the many who belong to the generation that grew up on Back to the Future's story of time travel, flying DeLoreans, hoverboards, etc., chances are, if you were going to start asking hard questions of the series, you would have started somewhere around the fading photographs or paradoxical invention of rock and roll before you would have gotten around to demanding answers for why Doc Brown and Marty McFly were such May-December chums. Still, though, in what Dateline tells me are pedophile-heavy times, it is a valid question to ask: why is this high school kid the only one Christopher Lloyd is granting access to the most impressive, powerful invention ever created?

Earlier this week, MentalFloss posed this very question to their readers and yesterday got a response from a surprising source: Bob Gale, co-writer and co-creator of the series. His definitive answer?

Okay, from the horse's mouth (yes, I'm the horse -- er, co-writer, co-creator): We never explained it in the movie. But the history of the characters that Bob Zemeckis and I created is this... For years, Marty was told that Doc Brown was dangerous, a crackpot, a lunatic. So, being a red-blooded American teenage boy, age 13 or 14, he decided to find out just why this guy was so dangerous. Marty snuck into Doc's lab, and was fascinated by all the cool stuff that was there. when Doc found him there, he was delighted to find that Marty thought he was cool and accepted him for what he was. Both of them were the black sheep in their respective environments. Doc gave Marty a part-time job to help with experiments, tend to the lab, tend to the dog, etc. And that's the origin of their relationship.

-- Bob Gale

So there you have it. Still doesn't explain all those deleted scenes where Doc kept nervously forcing wine coolers on Marty, though.

(via)

Shared by Erik
This thing sounds like a Cyberman. Wonder how much louder it would be without the rubber pads on the floor?

Note to self: learn how to ride a bike. The last time we saw MABEL the running robot she was tripping and falling all over herself while I cheered and fist-bumped my laptop. Aaaaaaaaand now she can run at 6.8 miles an hour. That's less than 9-minute miles. "I could run faster." No, you couldn't. Remember doing the mile run for the Presidential Fitness Award in middle school? What was your time? "I faked an asthma attack halfway though." Exactly. I took 18-minutes and still vomited. Hit the jump and then add the University of Michigan to your shit-list. Running robot hits 6.8mph: MABEL becomes the world's fastest two-legged machine [dailymail] Thanks to Jamie and pegleg paul (dude you're f***ed if this thing comes after you), who agree the best defense against a running robot is to practice hitting neighbors' garbage cans with your car. Haha, I do that!

The robot dog you see above is a mystery. [Daneil Dennet], a professor of philosophy at Tufts University found this in an antique shop in Paris.  Apparently it has no identification and no one has been able to tell him anything about it. It was made in the 50s, and that seems to be all he knows. He’s offering a reward to whomever can reveal its secrets. There’s a full gallery of pictures to browse through that reveal some of the construction, but not a whole lot of the function.

We are just blown away by the construction here. Look at all those switches! Can you imagine how easy to reverse engineer things would have been back then? Surely in the right hands, someone could get this thing working again. Then again [Daniel] might like it kept completely original. If you know something about this robot, you can find [Daniel]‘s contact information here.

Oh, and yes, we realize it looks just like k-9.

Filed under: robots hacks

QR codes may be turning up in more places than ever these days, but are people actually using them? According to market research firm Comscore, at least some of them are -- 14 million in June in the US alone, to be specific, or about 6.2 percent of all smartphone users. As for who makes up that slice of the smartphone market, Comscore says that just over 60 percent are male, 53 percent are between the ages of 18 and 34, and 36 percent have a household income of $100k or more. Folks are also apparently more likely to scan QR codes at home than at a retail store, and magazines and newspapers edge out websites or product packaging when it comes to the top source of the QR code being scanned. So, not exactly an explosion in use, but still fairly impressive for a weird-looking barcode that was rarely seen outside of Japan until a few years ago.

Comscore finds 6.2 percent of smartphone users scan QR codes originally appeared on Engadget on Sat, 13 Aug 2011 07:55:00 EDT. Please see our terms for use of feeds.

Permalink   |  Comscore  | Email this | Comments