Obtrusive Javascript Alert!
The “Core Competencies” have done it again… First it was table based layout, now it’s obtrusive JavaScript.
JavaScript is evolving into a beautiful language capable of very deep interactivity. Every day I read a new article about some truly awesome implementation of JavaScript so it breaks my heart when I see something that takes a step back. In the great dark age of content, presentation lived among the content and the world was chaos. As the content grew overburdened with the weight of the inline styles and onClick href links, it sought to shed it’s chains. The content sought to be understood by any and all readers, not just when it is all styled up.
The great Cascading Style Sheet came and blessed the content by gathering up all of the presentation. For a time the content was happy, but alas, they were not truly free.
The content was still burdened with the interactivity elements. These elements floated among the content, becoming confused with the content. Following the lead of the great CSS, the divine ECMA came along and improved the JavaScript language that controlled the interactive elements. The divine ECMA deemed that the JavaScripts should be allowed to rule the content from afar. From this idea, event listeners were implemented.
Today we live in a world where the content is free from the chains of style or script. The possibilities created by these advances are amazing and it is important that we continue the process of separating content from presentation (and interactivity).
To learn about the right way to use JavaScript, please visit this post by Jon Hughes.
I Heart Wordpress
I had been avoiding Wordpress for no reason and it was a big mistake. Wordpress is an amazing platform and content management system. I have only just scratched the surface of the system but already I am hooked.
I have started two Wordpress based sites in the last week. This first site is a very special project of mine. I am an aspiring photographer and recently I photographed a wedding all by myself. I am very pleased with the photographs that I captured and to display them, I have created a Wordpress site.
To help me manage my photographs, I am using the NextGen photo plugin.
Click the photo above to visit meghanandjack.com
The second site that I have started work on this week is one for my mother and her design service. My mom is a very talented kitchen, bath and custom cabinet designer. I really love the f8 template that I am basing the wedding site off of and so did my mom. She asked if I could design her site in the same vein and I was happy to help. Thanks to the simplicity of the Wordpress platform, I had her site up and running within a few hours!
Click the image above to visit margaretryandesign.com
AS3 Generative Art Framework
I find myself spending more and more time with ActionScript lately. My first introduction to the Flash platform was through the timeline and some basic AS2, in fact, AS2 was what sparked my interest in scripting. This interest in scripting soon snowballed into a programming interest. Over time, this programming interest exploded into a deep love and appreciation for code of all types.
For me, programming is about building tools to solve problems. I am beginning to understand why I like word problems so much in math class, it is the excitement of solving actual problems with understandable variables. I have never been one to learn from theory. It is too hard to wrap my head around something unless I can see it in action, or at least consider it in a real world situation. Programming is about solving real world problems it is a medium where theory gets twisted into action.
I had a problem. My problem was that I continue to use AS3 to create generative art experiments. This is an issue because of the amount of code needed to get a generative art project up and running. To solve this problem I have created the base for what will become a generative art framework.
The GenArt class should be used as a base for any new generative art project. By using GenArt, your project will have access to the GenArt API that will provide a drawing surface, methods to animate the drawing (or not!) and a method to save a file to the desktop.
To facilitate the saving of a completed image, the AS3 Core Library was used. You can find that library at http://code.google.com/p/as3corelib/.
Please note, this is an Adobe AIR project as it needs access to the file system to save the completed artwork. Artwork is saved to the desktop, it is named snapshot.png.
Product Photography Makes Me Smile
I had just returned home from an afternoon at the studio and my phone began to ring. Dave the photographer was calling and he had some interesting news. As it turns out, we were being given a great opportunity to prove our photographic capabilities to a dynamic tech company. The assignment was to bring our lighting setup down to their offices to help shoot some products.
Our client was a wonderful woman and the company she works for is onto something really great! The company WYSE produces a hardware/software solution for any kind of networked business. As a technology aficionado I was particularly interested in the promise of the WYSE “thin computing” solution. With this solution, an office could deploy a huge network of mobile and desktop devices that are all securely synchronized with a central data server. Due to modern bandwidth capabilities, much of the data is stored off the client device. This means that the laptops, desktops and netbook size laptops do not have ANY moving parts. No hard drives, no taxing electronic parts, less heat and therefore no fans. NO NOISE! I wish my laptop did that!
The photography was a lot of fun. The products we were photographing are composed of all kinds of interesting and beautiful materials so it mad the pictures look fantastic. The lighting was a breeze. We set up the seamless backdrop and then positioned a strobe with umbrella over the center of the table to light the background with clean even light. Three lights were arranged around the product in the front to allow us fine control over the highlights, shadows and gradients between. At some points during the shoot, I used a reflector card to bounce a little bit more light around. Our challenge came with the last product, which had a very glossy finish.
The final product forced us to be creative with the setup. Our main issue was the glossy components were perfectly reflecting the strobes, so much so that you could see the detail in the wires surrounding the flashing bulb. To compensate for this, we used a large section of the seamless background and positioned it so that it would be reflected in the glossy parts as a smooth white surface.
Is AI really OK?
In a word; yes.
There may be some confusion regarding the domain and title of my blog. The AI in my blog title does not stand for Art Institute (my college), rather, it stands for Artificial Intelligence.
Artificial intelligence has been an interest of mine for some time. Over the past six years I have observed my own limitations in education and organization and have theorized ways that I could have been more successful. Many of my shortcomings stem from my attention span. While it is seemingly typical for my generation to have a short attention span, my problem is compounded with an attention deficiency and a touch of hyperactivity. I am a hunter left over in a gatherers world. My physiology is best suited for a dynamic changing environment where I encounter new challenges every day. When presented with the monotony of the gatherer lifestyle (collect, archive, repeat) I tend to lose focus.
Unfortunatly for my (and my physiology), there are many moments in life where I will be forced to follow the gatherers. It is in these moments where I need the most assistance. Much like the future portrayed in the popular television show “Futurama”, I believe that humans will soon have embedded electronics to handle many of the more tedious aspects of life. I have toyed with an idea for a piece of wearable hardware that would collect data about your day and then allow you to “search” thoughts or visions from that day. With technology like this, humans can focus on innovation and allow the machine to manage information and details.
For a future like this to occur, we need smarter machines. This is where AI comes in… If a machine can ANTICIPATE our needs, then we have been successful.
The world is a fascinating place and we live in a great age. Cheers to technology.
Debugging A Blog With The Chrome Element Inspector
I am new to WordPress but I am familiar with the structure of the application. CSS is a beautiful solution to what was a very troublesome problem and this is no more evident than in WordPress. There was one point in time where web pages were big static pages full of soup. This soup was a mix of all the information that a browser needed to display a page. It worked, but under the hood it was very messy. In modern times, presentation and content are two very different beasts and must be brought together with careful measures. You wouldn’t have the ringmaster live with the lion, you just bring them together at showtime to dazzle the audience.
CSS is the ringmaster and our content is the lion. We let the lion out of the big database and the ringmaster makes it perform. This setup makes it easy to pull the ringmaster aside after the show and criticize or change his performance without the lion watching you with it’s hungry eyes.
This morning I noticed an issue with the comment list element in my blog. It seems that the layout was broken and the text of the comment was placed higher than it should be. As a result, it was visually overlapping another element in an unappealing way.
So now that we have identified the problem… lets work out a solution. I have been using Google Chrome lately. I think that it is a snappy little browser, and it has given me very little trouble thus far. Chrome has a nice little debugging feature built into itself called the Element Inspector. It allows you to “Inspect” a compiled DOM and view applied CSS rules. The difference between the information given by clicking “View Source” and the information given in the Element Inspector is that the “Source” is what the page looks like before any dynamic information has been loaded. This means that if you are loading a bunch of comments out of a database, they will not show up in the source and it will be difficult to determine what rules are being inadvertently applied.
I know that my problem is in the comments, so I bring up the Element Inspector and navigate to the broken comment in the DOM view. When I select a HTML element it brings up the CSS properties that are being applied to my selection. The “computed style” displays all properties that are being inherited by the selected element while the next list down displays the name of the id or class that the element is using. While inspecting the margin property I can see that the top margin is listed as negative 125 pixels. It seems a little odd to have a negative margin in this situation so I believe that it must be the culprit. To test this theory, I am able to use the Element Inspector to turn off the offending CSS property.
My suspicions are confirmed, it was the negative margin causing the visual error. Armed with my new information, I confidently open up my style sheet and make the necessary changes. Because the Element Inspector gives me the full name of the rule that contains the offending property, I am able to navigate the style sheet with ease.
After locating, changing, saving and uploading my blog is looking good! I was able to isolate and fix my problem with minimal guess and check. As I begin to work on more and more projects that revolve around or resemble Model View Controller structures, I am realizing the need for a solid set of debugging tools. While the element inspector works wonders for CSS and simple issues, I should be on the lookout for a more robust set of tools. Tools aside, the steps are all the same.
You have a problem.
- -Identify the problem.
- -Research a solution.
- -Test in a safe environment.
- -Implement the solution.
- -Cheers.
Port 21, Please?
As I am sitting here on this wonderful Saturday morning I find my mind drifting. It is really nice that my school provides us with wireless internet. After a solid year of a web design program at a modern Silicon Valley art college we can finally use our laptops. But there was only a very small sliver of time where things were peaceful and then the IT guy started locking down the ports.
Now don’t get me wrong, I understand the need for security, but this is just mean! As an additional step, the network forces computers to install the Cisco Clean Access software. I have no problems with the protective software, I just want the ability to work on my on my own equipment while I am in class.
The school tells me that I should be working on the computer that it provides. I am not comfortable working on client projects on a school computer and I do not feel the need to transfer my data back and forth just to update a few pages. The school should really think about how their restrictions effect our education. We are supposed to be learning how to work in the dynamic environment that is the world wide web, we are supposed to be working and making connections. I wish the school would support me more as I try and build real world experience alongside my education.
Please open port 21.
Accreditation Makes Me Giggle.
Breaking news: I have just learned from an inside source that EDMC, the parent company of the Art Institute family, will be conducting on-campus evaluations regarding the relevance of AI-Sunnyvale’s programs.
I believe that this process is VERY OVERDUE and I hope that as a result of the visit, there will be some changes for the better. I have long been weary of the information that my school deems to be part of some “core competency”.
I want EDMC to explain to me why I paid $1600 per unit to have a teacher instruct us on TABLE BASED DESIGN taught from an outdated textbook.
Read my review of the school on Yelp. If you are a student, I encourage you to post your own review. Please remember that we are not trying to bash our school, we just want to highlight inconsistencies that impede our learning in hopes that they will be fixed. Slander is NEVER ok.
Form & Space Generative Art
Control Point Decline ↓
Sine Wave Ocean ↓
These two compositions are explorations of a single concept. For these pictures, I was exploring drawing multiple lines with a changing control point. The “Control Point Decline” project was the beginning of the line exploration. The concept was simple; what would a design look like if we drew many, many lines, beginning and ending in the same place but modifying the control point with each iteration. The first acceptable generation I achieved involved a very precise structure with little “personality”. The evolution of that piece generated some very interesting deconstructions of the dome structure. The final stage of the piece distorted the control point so greatly that the lines begin to define the frame of the canvas. Two iterations of the final stage are displayed side by side and much larger than the dome structures.
The “Sine Wave Ocean” project was a variation of the “Control Point Decline” project. With this variation, I select random points for the beginning and end of the lines but the control points are distributed based on simple algebra equations. The image shown here is a composition of multiple iterations of the “Sine Wave Ocean” code.
Recursive Triangle Construction ↓
The above piece, “Recursive Triangle Construction”, has generated some truly interesting visuals. The concept for this was simple. I wanted to see what a composition would look like if we created triangles stacked with each new shape smaller than it’s preceding shape. Each new shape would also be rotated slightly. In the larger image on the left, I added a random variable in the placement and achieved this interesting shape. The three small structures on the right explore the de-evolution of the structured shape.
These artworks are created in Adobe Flash using the ActionScript 3.0 language specification. I have included the code necessary to recreate the larger triangle image. To set up this project; create a new Flash As3 project and set the document class to RecursiveTriangleConstruction. Save that file somewhere and then create a new Actionscript file. Copy the sample code into the Actionscript file and then save it next to the project file, name it “RecursiveTriangleConstruction.as”.
Compile and enjoy! Click on the stage to generate a new iteration.
Just another day at the office.
I have just arrived at work and I thought that it would be prudent to dig up the snapshots from our assignment on Monday. With a dark and ominous sky looming overhead Dave and I loaded up the car with a portable strobe, softbox and stand. We flew over highway 17 with our clients in tow, after a short drive through Santa Cruz on highway 1 we ended in the parking lot of Wilder Ranch State Park.
To set the scene; The sky was dark and gloomy, the wind whipped sand up is sheets of razor sharp particles and the landscape bent and shifted with every gust. We unloaded the 50 pounds of gear and trudged headfirst into the wind that was blowing in from the ocean. The first location was close to the parking lot but in no way sheltered from the wind. The softbox on the strobe was acting as a parachute and whipping around with every new gust. Suddenly I had a new purpose, human stand.
Location two was sheltered from the wind and adjacent to a chicken coop. It made for some unique background noise.
Location three was by far the most treacherous with the strongest winds and a looming cliff side. It is at location three that my purpose as a light stand was fully realized. I had to fight the wind to keep the light angled correctly, Dave was gracious enough to snap a photo of my struggle.
The best part of this shoot was the musician in the scene who was playing his cello. His lonely notes would whip around us with every blast of wind. It made for a haunting yet beautiful noise and a spectacular experience on the job.
Were just getting warmed up.
This is the beginning, the middle and the end. We are just getting started but we have been finishing for ages. Youth represents a constant state of flux and we are caught up in the ebb and flow of our obligations and responsibilities. The world changes very fast in this modern time. It changes at a pace that our ancestors could never anticipate and a large cause of this can be attributed to recent developments in technology.
The world is a different place every day. Yesterday we were using XHTML, tomorrow we will be using HTML 5. Programming is becoming more accessible and the tools we use to create are more powerful than ever. I hate to use this quote when there is so much controversy about who authored it but I feel that it is a fully accurate description of the power of computing.
“Computers are incredibly fast, accurate and stupid; humans are incredibly slow, inaccurate and brilliant; together they are powerful beyond imagination.” -Author Unknown
Welcome to AI is OK. Here we will explore why I love code and why I can’t wait to graduate. Stay tuned!
-miles