Layin Ink

Services: Flash to javascript (jQuery) animation conversion

Project Info

Layin Ink had a really cool original Flash animation that did a good job of showing off how their company was different from their competition. Unfortunately that was only after a long loading… screen and that was if you could view Flash on your device at all. So I was hired to take the existing Flash based site and make a jQuery version that was as close to the original as possible. The client was worried that the jQuery animation would pale in comparison to the original Flash version. You can see for yourself that it looks pretty dang good! Be sure to view the clientele and contact page animations also.

DEMO View the original Flash animation and see just how close the jQuery version is.

DEMO View the jQuery animation by itself or go to the live website and see how it was integrated into the new layout.

Google has come up with a conversion utility for converting Flash to HTML5. It works pretty well, although some of the more complex files don’t seem to work. It’s neat to try out if you are curious: Google Swiffy

Nintendo Game Battery Replacement Guide

This is how I changed the battery on an nes cartridge and somehow managed to salvage the save data. There are kits that may make replacing the battery easier. You assume responsibility for damaging your game by attempting these instructions.

What you will need:

• 3.8mm bit security tool
• CR2032 battery
• electrical tape
• pliers
• exacto knife
• wire

Optional Materials

• soldering iron
• solder
• ohmmeter

I read through the battery replacement guides over at the 9th Key as well as DarkBubble’s guide posted at GameFAQs. Both give a lot of good tips and use slightly different methods. Check them out for some further information. Also follwoing the guide is a short list of links to eclectic NES knowledge, mods, and homebrew information.

First, gently remove the screws. Don’t strip them. Get the WD40 if they are rusted. I have read there are other ways to open a cart if you don’t have the proper tool (heat, pressure, beguilement). I can’t imagine any of them working very well (for me at least). I looked around and couldn’t find any locally, so your best bet is to get the 3.8mm security bit online .

Next remove the circuitry and locate the battery. It’s pretty obvious. If your game saves but you can’t find a battery then the NES game you have is magical. Hold onto it.

If you have an ohmmeter you could check the old battery to see if it is in need of a change. If you have an extra ohmmeter you could give it to me. Next pry the battery from the clips to which it is welded. I used an Exacto knife and pliers. Be careful not to damage the nearby chips. I used the Exacto to make enough room to grab the clip with the pliers. I then sort of peeled the clip off. Whatever works.

I then stripped the shielding off of the end of some speaker wire. I am sure lots of different types of wire can be used. Just be sure that the metal portion of the wire will not touch any other surface (keep the bare contact portion minimal). At this point you can use the electrical tape to attach the wires to the battery or solder it. Either way try to keep from touching the surface of the battery too much (so that their is less resistance for the current).

I soldered the wire to the battery here, but it was not easy for me. It was my first soldering project. I found the best method to attach the wire was to actually solder over the top of the wire while holding the wire to the battery. This isn’t really true soldering (probably) but it was the only way I could get it to work without getting the battery extremely hot. Besides degrading the life of the battery it is supposedly possible to get the battery to explode. Hot acid. No thanks.

Once you have the wires attached to the sides of the battery it’s time to attach them to the metal clips on the board. Make sure to get the positive and negative wires sorted out. The negative is towards the outside in my experience. It should be printed on the circuit board if you forget. Soldering these wires is much easier this time. If you aren’t soldering just make sure to wrap each wire around the proper clip well.

Once it’s all in place cover any metal surface that could short out the circuit with electrical tape. Replace the circuit board into the notches in the case. I then taped the battery to the side of the cart to keep it secured and less likely to come loose.

That’s it. It should work great now. The amazing thing about the Final Fantasy cartridge I worked on was that the prior saved game was still in the memory after I changed out the battery. There must have been enough electricity stored in the memory to hold it for the half-hour the project took. I can’t guarantee it will keep your old save files, but there is some hope if you work fast!

NES Links

In my researching of this project I came across some eclectic NES knowledge, mods, and homebrew information that would interest any geek:

• Interesting NES console modifications
• Game Development for the 8-bit NES A class by Bob Rost
• NES info, programs, and demos
• The 9th Key’s NES battery changing guide
• DarkBubble’s NES battery guide posted at GameFAQs
• The Nintendo Repair Shop

Good Luck!

The other font that I use throughout the site is called Dream Orphans by Typodermic Fonts. I found this font interesting without being distracting. Also at slightly larger sizes I found it to be quite readable.

I mentioned dafont.com. They have many fonts that can be useful for certain projects. The fonts are all free, although sometimes you get what you pay for. Also I mentioned embedding one of the fonts throughout the site using CSS3. You upload the font to your website and then add something like this to the stylesheet:

@font-face {
font-family: "DreamOrphans";
src:url('assets/Dream-Orphans.ttf'),
url('assets/Dream-Orphans.eot'),
url("assets/Dream-Orphans.woff") format("woff"),
url("assets/Dream-Orphans.otf") format("opentype"),
url("assets/Dream-Orphans.svg#Dream-Orphans") format("svg"),
local("Dream Orphans"), local("Dream-Orphans");
}

body {
font: 13px "DreamOrphans", "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #F0F0F0 url(images/bg.jpg) center top;
text-align:center;
color:#fff;
}


Check out this article a Visual Walkthrough of @font-face CSS Code for more info on how to embed a font using CSS3.

Here I’ve got both the addition of the fontface and the font name being added to a element (body). The .eot file is a special consideration for that troublesome Internet Explorer. There are free online font converters that can convert a .ttf to an .eof fast and free.

failure If you have problems getting your font to appear once you have added it to your stylesheet and uploaded it to the proper directory try opening the font on your local machine and verifying that the font name is the same you have used in your styleheet. The file name and the font name are not necessarily the same. Check out Name That Font! Finding the right font name for a CSS font stack which goes in depth about finding font names.

Be careful embedding copyrighted fonts. I don’t actually know the law on that one, I just assume that it’s the same as distributing any copyrighted material: avoid. There are tons of free fonts out there, some of them actually good. You may also want to check out the google web fonts project. They have many fonts and resources to get your site looking snazzy.

Have fun adding a little personality to your site’s text.

The general characteristics I sought in video for the backgrounds of acepek.com were texture-rich, poignant, abstract, graceful movement, scale, and interest. Not all of the videos have all of these, but most have most. Take a look at them and try enabling the background videos if your system can handle it!

D.I.Y. If you want to know how to play a video as your website background, create controls, and otherwise manipulate a YouTube video check out my post DIY Obnoxious Video Backgrounds (coming soon).

I did not create any of these videos. I chose them from amongst all the videos on YouTube to enhance my website and the posts via juxtaposition. Once you have enabled the background videos with the controls at the bottom right of the screen the videos will change to correspond to the post you are viewing or you can change them yourself.

Despite all the HTML5 on the site I am using YouTube videos inside a Flash Player until such time as the YouTube HTML5 embed method is compatible with the Query YouTube plugin that I use for the background video. For the individual videos on this page I am using the new HTML5 capable embed method that uses an iframe to deliver more viewing options.

HD EARTH VIEWS FROM SPACE STATION
NASA’s videos are out-of-this-world. Obvious choices. Oh, also they don’t have advertisements and usually no annotations (which can be disabled anyway).

M.C. Escher-Adventures in Perception pt.2
This one is a bit different. I like M.C. Escher and love this old projector film.

1 Million Particle Liquid
I found a few of these different particle collision models and this one was pretty rad.

1,000,000 Particle Kelvin-Helmholtz Instability
Another rad particle model, this description is lifted from Wikipedia:

The Kelvin-Helmholtz instability can occur when velocity shear is present within a continuous fluid, or when there is sufficient velocity difference across the interface between two fluids.

Light & MPM
The creator describes it as “Half MPM and half lighting simulator, but stronger than both.” MPM stands for Material Point Method.

Blob High-Resolution
Another collision simulation, this one with circles sort of melting.

The Kuroshio Sea with all large “fishes” inside~~~
I would love to visit this aquarium. Despite my fear of being eaten by a large fish, I think being underwater looks peaceful.

Melody Underwater Test Shots
Speaking of being peaceful underwater… Maybe it’s reminiscent of the womb.

Chandra Presents the Rosette Nebula
NASA’s videos are out-of-this-world. Obvious choices. Oh, also they don’t have advertisements and usually no annotations (which can be disabled anyway).

Moon Jellies
Jellyfish up close. Simple primordial beings undulating through the ocean. Good times.

Time Lapse Sunrise
Stationary camera, time-lapse photography… Oh yeah, and a sunrise that looks like it lit the sky on fire!

Fractal animation 2
I love symmetry and these complex models. They are usually just a portion of nature represented by math. Look into fractals and especially Mandelbrot.

Time-Lapse: Tucson Arizona Sunset Aug 8, 2010
Arizona has some of the most beautiful sunsets.

nikon D7000 super macro 336mm test footage
Is the T1000 reforming into a killing machine? Not sure. But it looks cool.

Sonja Henie
Old footage of prodigy skater Sonja Henie. I actually learned something from this video… so many things not known.

Race Horse First Film Ever 1878 Eadweard Muybridge
This is the first film. Ever. But the special effects in the sequel blow this one away.

Normal Live Blood Cells(4)
The body’s processes are interesting.

Giants (t2i w/ Macro Lens)
This one is all about macro texture. Big luscious texture.

Time Lapse Snowy Tree Panning
Time-lapse of snow melting is just fun to watch.

Blurred City Lights – VFX
This effect is called Bokeh. From Wikipedia:

Bokeh is the aesthetic quality of the blur in out-of-focus areas of an image.

Now we know.

Starlings swarm in, murmurating, then totally fill the sky before roosting!
This one is sort of an amalgam of the particle models and the sunset videos. Nature is best.

Bamboo Forest 2
That is some tall grass!

100 Million Years Later, Galactic Collision Continues
NASA’s videos are out-of-this-world. Obvious choices. Oh, also they don’t have advertisements and usually no annotations (which can be disabled anyway).

I have a YouTube channel if you want to subscribe or add me as a friend to keep up on new videos that I upload or like. Thanks for looking.

Web technologies continue to mature and enrich the browsing experience. The internet today is an interactive medium allowing for users to create their own content and spread information like never before. Besides the social media aspect of the web for users, the tools for building websites give more control and ability to developers expanding the boundaries of what is possible on the web.

My trajectory on the internet has put a good library of tools at my disposal for developing web content.

Every web monkey needs to be well versed in HTML and CSS. I used to be pretty good at <tables> but that’s like being good at Morse code these days. Sure, hypothetically it could come in handy, but it’s better to be versed in current technologies and methods.

So, I’ll just highlight what I prefer to use here and why I think it’s an important standard (or emerging standard).

Server-Side Scripting Language

PHP is my weapon of choice when it comes to creating server-side dynamic content on the web. It’s been around since 1995 but it if it’s not broke… I love open-source technologies like PHP because they keep the internet free by promoting learning, transparency, adaptation, and evolution. It’s also my choice because I have a history of programming in C++, I love programming for WordPress (which is PHP based), and I like running sites on Linux servers. Learn more about PHP.

ASP.NET is another choice, just not mine. It’s Microsoft’s proprietary server-side scripting language. Just to reiterate: Microsoft & Proprietary. No thanks.

There are many other popular sever-side languages out there like Coldfusion and Perl. Check ‘em out sometime.

Content Management System (CMS)

WordPress has changed from blogging software to an easy to implement and use CMS. It’s PHP & MySQL based, open source, and has nearly 15,000 free plugins that cut the development time for common tasks down substantially. Learn more about WordPress.

I’ve had experience using textpattern, Magento, Joomla, and Drupal. They all have their strengths, and plenty of weaknesses, but none add up to the usability of WordPress.

Client-Side Scripting Language

jQuery is an open source javascript library and it’s awesome. Basically instead of having to invent the wheel every time you want to drive to the store jQuery has many common parts prefabricated and ready for you to make into whatever you want. This varies from AJAX loading of pages like on this site, animation, form validation… the list goes on and on. And, like WordPress, there are plugins (typically free) to add on to the functionality of your site. Learn more about jQuery.

There are other choices out there too: Prototype, script.aculo.us, Ext Core, MooTools, Ext JS, and Dojo Toolkit to name a few.

So that was a brief introduction to some powerful open source tools for making the web useful and fun. HTML5 and CSS3 are emerging and offer great potential. I’ve used many of their properties on this site and look forward to integrating all this great technology into living, breathing, interactive websites.

Have fun!

The answer to animation on the web has long been Flash, but with tools like jQuery one no longer needs to rely on Flash to bring the web to life. Lately I’ve been spending time converting Flash animations into jQuery. Besides loading faster than Flash switching to jQuery for animating the web has the added benefit of working on devices that don’t play Flash (obviously) such as the iPad, iPhone, etc.

The site screenshots in google search results do not render Flash elements. That means big blank areas in your screenshots. jQuery also has the added benefit of manipulating actual HTML and CSS content making them searchable by search engines and, when programmed correctly, gracefully degradable.

I created the following jQuery animations and Flash animations:

jQuery Animation

• acepek.com
• LayinInk.com
• GermRid.com
• TheMotorCoachstore.com
• AZSignGuys.com
• COX7.com (previous site)
• UpstatePlasticSurgery.com
• Merchants Go Green

Flash Animation

• Celebrity Fight Night Holiday Book 2010 – returning soon
• Celebrity Fight Night Live Auction 2010 – returning soon
• MDHomeHealth.com
• DRKnighton.com
• ParadiseValleySeptic.com

What does sushi have to do with design? With sushi the aesthetic is as important as the taste. Each maki roll, nigiri, or sashimi is created by choosing fresh ingredients and combining them in such a way as to maximize their visual appeal and flavor.

Art concepts like proportion, balance, color, & asymmetry are integral in creating not just great tasting sushi but visually appealing sushi as well. The best ingredients for both art and sushi are fresh and simple. Skip to info about sushi ingredients & where to get them in Phoenix.

I’ve been making sushi for a few years now. Although I continue to improve, things would be easier with a sushi chef sensei! Besides reading up on the art of sushi I took a little class at Roka Akor that taught some history and the basics.

That’s shitake mushroom, cream cheese and egg on the top left, eel on the top right, and shrimp nigiri on the bottom. No raw fish!

That’s pickled ginger (gari) towards the bottom (looks sort of like pink petals). It cleanses the palette between sushis.

Salmon, tuna, & shrimp nigiri-zushi.

As you can tell from the background, the real work for sushi is in the preparation of the ingredients.

My secret delicious sauce is Japanese mayo, sriracha, a little rice viniger, a pinch of sugar, and & a little sake. I tell you because I asked a sushi chef the ingredients of their similar secret sauce and he treated me like I was crazy for asking!

That purple stuff is beefsteak plant and there is way too much on those rolls.

That is a cooked piece of salmon flavored with bulgoki and ponzu sauce.

Forming a nigiri-zushi which is harder than you might think.

Loki loves Ahi tuna!

I don’t use the paddle to spread rice anymore. It’s easier to wet your hands and do it.

It’s a fun hobby that is great because it can be shared with friends and family.

Sushi ingredients in Phoenix AZ

Getting sashimi quality fish in the Phoenix valley can be a challenge. If you’re in the east valley check out the Seafood Market in Gilbert. I have gotten some good quality fish before, but make sure you know what you’re doing before serving/eating raw fish. In the central Phoenix area the Super L Market Ranch in the Chinese Cultural center carries “sashimi quality” pieces of tuna and salmon that are prepackaged. Check the dates. This fish is decent, but not ultra-fresh or flavorful. Bluewater Grill also sells fresh seafood in the west valley. I have not tried them yet, but they were recommended to me.

Next time you have the chance order sushi and enjoy the delicious fishes and the simple artistry that goes into each morsel. If you’d like to learn more I reccommend reading a book about sushi and sitting at the sushi bar whenever you have a chance and watching the itamae (sushi chef). I have learned a few secrets just by watching a master. Itadakimasu!

My website development portfolio highlights my ongoing commitment to quality and standards while working as a freelance web developer. I build sites based on W3C standards for HTML5, XHTML, & CSS depending on the needs of each project. I take pride in going above and beyond expectations to deliver an outstanding final product.

I was either lead or sole coder for the following WordPress websites:

MD Home Health

Services: XHTML/CSS, WordPress as a CMS Integration, PHP programming, jQuery, Flash banner creation & animation

Website Programming Lessons

This site had some unique requirements:

• create an employee only section requiring an employee login to view the company's events and announcements
• a complete job application form with data checking and over 100 information fields

Testimonial

"I was extremely pleased with the entire process of redesigning our web site, from initial discussions to the finished product. The price was also very fair. Justin and Aaron were attentive and responsive in every way, and their understanding of SEO definitely helped in the design and content. These guys really know what they’re doing and how to treat a customer." Dave Hildebrandt – Executive Director
www.mdhomehealth.com

The Motorcoach Store

Services: XHTML/CSS, WordPress CMS, PHP programming, Custom jQuery animation, Web Design

Website Project Lessons

This client knew what he wanted and it was really great to meet those needs:

• program a jQuery-based animation that reflected the elegant style of the site design while remaining cross-browser friendly
• design and style using CSS a clean & elegant site, both visually and within the coding

Testimonial

"I know I can get very demanding, but that is the way I need to be to get what I am looking for sometimes. I can be hard to please on projects like this, but you guys exceeded my expectations. In the end, if you end up pleasing that hard to please guy, they will end up being your biggest advocate. This website is awesome. Thanks again." Bradley Twait – Owner/Operator
www.themotorcoachstore.com

Upstate Plastic Surgery

Services: XHTML/CSS, WordPress CMS, PHP programming, Custom jQuery animation & integration

Website Project Lessons

This website's purpose was to showcase the aesthetic and visual:

• created a custom dual gallery on the homepage using the popular jQuery Cycle plugin
• also made a background preloader to optimize viewing of before & after surgery photos
• used web-standard method to embed fonts for use across the site

Gilbert Leadership

Services: XHTML/CSS, WordPress CMS, PHP programming, Bulletin Board Integration

Website Project Lessons

This client needed some extra functionality for their organization's website:

• integrated an easy-to-use bulletin board into WordPress for use in an online community & education program
• implemented an enhanced registration & login process for new & returning students
• created a unique method to update 2 separate social media feeds of current information into website

Load Training

Services: XHTML/CSS, WordPress CMS, PHP programming, jQuery/AJAX forms

Website Project Lessons

This site was for an education program that offered lots of free resources, downloads, sold products, & gathered sales leads:

• created a "pop-in" jQuery form that loaded within any page and submitted the information without leaving the page using AJAX
• sent form data to SaleForce for easy lead management

Hotdog Challenge

Services: XHTML/CSS, WordPress CMS, PHP programming, jQuery UI tabs integration

Website Project Lessons

This site was a fun little project for an annual Hotdog Challenge event:

• used jQuery UI Tabs plugin to deliver information within a limited space
• implemented WordPress specific SEO plugins
• setup event countdown using WordPress plugins

COX7 Arizona

Services: XHTML/CSS, WordPress as a CMS Integration, PHP programming, jQuery, Flowplayer Flash/javascript video player

Website Programming Lessons

This web project was a great challenge in several ways:

• create a fully editable site using WordPress as the CMS
• build an easily updateable video player with video playlist for each tv show
• create multiple jQuery-based galleries & slideshows to showcase sponsors & program photos

Update I updated the video player for the TV show Su Vida to showcase several categories of video playlists all in one simple interface, integrated a new photo gallery, & created a unique page template. Check it out!

No this isn't some mysterious koan —this post is just a short introduction to simple methods of debugging coding. The following are two general techniques that can be used to debug jQuery, Actionscript, HTML, PHP and pretty much any coding language thinkable. There's a general principal that will help preserve your sanity and save you time: Simplification. It's geared more toward a noob/novice but it may be useful to intermediate programmers also.

Simplification

This is really a universal principal: if the process is failing break it down into individual parts until you isolate the problem area. This is easy in coding. You can either disable each section individually and test the whole, or demonstrate that each area functions intrinsically.

Mistaken Ridden Example:

if(variable=true){otherVariable++;} else (otherVariable--;}

This is a simple example of coding with multiple errors. The first tool at our disposal for simplifying debugging is commenting out or hiding our code to compartmentalize it. Now there are several different methods of “hiding” portions of code. It depends on what language you’re using. Some common ways to comment out code:

Comment Out Codes for debugging:

• jQuery/javascript, PHP /*disables all code within this area*/
  also //disables all code on a single line
• HTML <!--disables all code within this area-->
• CSS /*disables all code within this area*/

So now we can disable a portion to focus on a piece at a time:

if(variable=true){otherVariable++;} /*else (otherVariable--;}*/

This still won’t work, but now we can focus on just this portion simplifying our tests.

The second simple & useful debugging tool is to display the values for the variables we’re working with. For CSS and HTML Chrome Dev Tools, Firebug for Firefox, and other similar tools are invaluable. But I’ll save those for another post. A simpler approach is to just print out whatever variable we’re testing. Some common ways to display variables for debugging:

Displaying Values for debugging

• jQuery/javascript alert(variable);
• PHP echo variable;
• Actionscript trace(variable);

So now using this with our code (for the rest of the example we’ll pretend this is javascript/jQuery):

if(variable=true){otherVariable++; alert(variable);} /*else (otherVariable--;}*/

This is useful in determining the problem in this case because it will fail to show the alert and therefore we know that there is something wrong with our if statement. It’s missing an “=” equal sign operator.

if(variable==true){otherVariable++; alert(variable);} /*else (otherVariable--;}*/

Now our first bit of code is working and we get the alert with the value of variable (true). If we still didn’t get the alert with the variable value we could move the alert outside of the if statement and make sure that we are evaluating the variable correctly (for instance it may simply not be true.

These are just two fundamental methods for problem-solving and debugging code. They are very powerful and with practice and understanding you will find that they can be applied with different results.

It would be great to always know what was causing errors in a program. But, as the complexity of the coding increases, the ability to keep the multiple processes and states accurately in mind becomes taxing and difficult to maintain. When you have multiple errors it can become very difficult to trace the process back to their origin. Code hiding and displaying values are just two elementary debugging tools that can help get your scripts running.

I create interactive web-based media. That’s web design, php programming, and Flash & jQuery animation. I integrate social media into websites built upon custom WordPress templates creating a cohesive brand across the internet.
I’ve been building websites for over 10 years & love it!

Ever since I can remember I’ve loved to test the limits and find out just how things work.

If your project could use my skills & experience send me an email, fill out a simple online form, or leave me a voicemail. I’ll get back to you in a day or less.

I don’t just work on the web all day. I also enjoy oil painting, hiking, “old school” videogames, sushi, reading, and challenging myself everyday.