Next Instructable

Inspired by the Minecraft contest my next instructable is going to involve paper, attinys, LEDs, and red-stone. My plan is to make a Minecraft block that lights up. The ATtiny will light up an LED whenever you touch the top. Then it will light up for a bit and fade out. Pretty basic, but its a pain getting the wiring down. This ones going to be fun. :)

ATtiny Flower Pot

I just published my next instructable. It uses an ATtiny85 on a flower pot to let you know when you need to water your plant. Go ahead and check it out at instructables.com. Let me know what you think. PS don't forget to vote for me in the contest I entered it into.

Processing on Blogger

Lets say you have a digital maker space and your like "How do I spice up my header? I can't find any images that I like and a color is just to boring" Well I myself was in that place until I came across Processing. I came across it a few years ago when programing in Arduino. Its commonly references and the IDE that the Arduino IDE is based off of. Anyways I wanted to make a header that had a geometric triangle shape but I wanted to make them move so I use processing and a bit of Trig (whoever said cos() and sin() were useless never tired to make triangles move along circular paths) to make some moving triangles. There are five moving points that are used to draw three triangles. Once you have your processing sketch you can use it by taking advantage of processing.js. They turn processing sketches into javascript. You can follow these instructions on how to use it. The only problem that I ran into is blogger won't let me host files (If you know how PLEASE tell me in the comments). Solution: Steal from processing.js. They host the file you need on their server so that they can use it on their awesome website. So instead of linking to a file called processing.min.js, link to processingjs.org/js/processing.min.js.
Example

<script src="processing.js"></script>

should become

<script src="processingjs.org/js/processing.min.js"></script>

Updated Solution

Moving Triangles

This is a test on making processing work on blogger. Fingers crossed.

Sub Domain Happiness

So I'm really happy about having this blog now be a subdomain of peterfoxflick and no longer a subdomain of blogger. This quick tutorial is assuming that you already have a domain purchased from a provider. (I recommend Hover). All you have to do is go to Settings in blogger. From here you should see Publishing and Blog Address. Click on  "+ Setup a 3rd party URL for your blog" and go ahead and enter in your new domain (subdomain.maindomain.com example make.peterfoxflick.com) and click save. Blogger will now give you two names and destinations that you need to add to your domain. Now all you need to do is add these to you domain name provider. Go to your domain name provider and navigated to edit your domain. Then you want to select DNS and add the two new names and destinations as CNAMEs. All you have to do is save in hover and then go back to blogger and click save again. This time it shouldn't give you an error code.

Bonus: How to set up Two Blogger Subdomain Names

If you try to set up two blogger subdomain names you might run into the same problem I did. Blogger will not give you the first error code with the two names and destinations that you need to add. Simple solution, enter a main-domain of a website you don't own (subdomain.gibberish.com example make.alskdjfl.com). Gibberish is amazing. Now you can proceed as before but remember to change the main-domain back to the domain you want in blogger before you click save (the second time).

How to Make Code Look Like Code in Blogger

Ok thats a mouth full. Heres another behind the scenes glimpse of this blog. To make my code snippets look like code all I do is change my view to HTML when I'm writing a blog post and add <pre> to the beginning of my code and </pre> to the end. This creates a good monospace code look.

Adding Fonts to Blogger

To add a font to blogger go ahead and find one from http://www.google.com/fonts. Once you have one follow their instruction to get a piece of code that looks like this

    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>

Go ahead and paste that code right under the <head> tag in your blogs html (Find it by going to Template then Edit HTML). Using control F really helps. Now find the group name of the font you want to change. Google has done a great job of naming them. I wanted to change my blog title so I found this chunk of code.

<Group description="Blog Title" selector=".header h1">

     <Variable name="header.font" description="Font" type="font"

         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Crushed"/>

Go ahead and change the value from Crushed (or whatever font name it has) to be your new font name. In my case it looks like this.

         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Raleway, FreeSans, sans-serif"/>

You'll notice that I also have FreeSans and Sans-Serif added in there. These are backup fonts. In case Raleway doesn't load it will use these fonts to still try and maintain the general look of my blog.

Hopes this helps. Comment if you have any questions.... or comments

Program ATtiny with Arduino IDE

So I recently tried to program an ATtiny on a new computer. Only to find out that the old instruction from the High Low Tech website no longer works. (I recommend you still check out their website though, they got a lot of cool stuff). It was a sad day. But thankfully I'm a hacker (and by that I mean I know how to right click) and was able to figure out a fairly simple (like insanely simple) way of upgrading it. So go ahead and check out my latest instructable.

Javascript Countdown

Heres some code for a countdown that I'm using for my Missionary blog. I stole most/all of the code from Mindgrader, and only made a few changes (like only showing days and adding the whole days till I report to the MTC). You can use this in a blogger sidebar gadget by just adding a html/javascript gadget.

<h1><span id="countdown"></span></h1>Days till I report to the MTC
<script>
var target_date = new Date("Aug 15, 2015").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);

    // format countdown string + set tag value
    countdown.innerHTML = days ; 
}, 1000);

</script>

It should look like this

Days till I report to the MTC

Behind the Scenes

A peak behind the scenes of this blog, Im currently working on how it looks. Here are some of my references.

Profile image size change

http://www.spiceupyourblog.com/2011/05/change-size-blogger-profile-picture.html#.VHN3mVfF-yM

Change the social media icons
http://www.theblogdecorator.com/2013/02/tutorial-how-to-change-bloggers-share.html

Change the Favicon by creating one at favicon.cc

Tabs Background color (My own personal code)
.tabs-outer {
  background-color:$(tabs.background.color);
}

Welcome

Welcome to my digital Maker Space. I'm going to move all of my maker blogs to this blog.