Category: Personal

In a Fog – #NCDevCon Day 2 Live Blog 1

NCDevConLogo

NCDevCon North Carolina’s Premier Web & Mobile Conference

Day 2 of the the awesome tech conference #NCDevcon is well underway.  Participants were treated to a beautiful if not eerie fog which had settled over the area this morning.  Quite a few participants seemed to be in a fog too including yours truly.  Thinks are so much quieter this morning. After receiving all that amazing information yesterday it seems many are still processing. But who has time for that?!?  Still another day’s worth of learning ahead!

I kicked off my day with Building APIs in LoopBack by Raymond Camden.  Again, I am learning Node.js and have a few personal projects I want to build as APIs, so this was a natural.  It was a two session period with the first being discussion about LoopBack api framework and the second being a hands on session build an API.  To be able to do the handson stuff I needed to get my laptop set up with Node, LoopBack, and MongoDB.  I spent a good chunk of the first half trying to pay attention to the cool information and whip this old laptop in shape. The laptop refused to cooperate in the end…so I went “hands off” and bailed at the halfway point. Sorry @RaymondCamden!  Was looking forward to the hand on stuff. I am sure it was a blast!

So I hopped over to Git Source Control: for the Rest of Us by Nolan Erck (@southofshasta).  It was a great talk on using graphical tools like SourceTree to work with source control (Git in this case). I knew most of it of course, but still nice to see how other people set up their source control.  Big crowd. Lot’s of questions.  Good session!

Planning to wrap up the day with You Don’t Know Node.js by Azat Mardan (@azat_co).  I have some personal business to handle this afternoon so sadly I will be missing  the cool stuff planned for the afternoon.  I’ll split right after I grab lunch. So grab me there (and early into it) if you want to chat me up.  Otherwise, enjoy the rest of the day!  It has been a pleasure hanging out and meeting all of you.

 

#NCDevCon – What I am going to see!

NCDevConLogo

NCDevCon North Carolina’s Premier Web & Mobile Conference

I’m getting ready to leave today for NCDevCon, the fun, cool, and informative development conference taking place in Raleigh, NC this weekend.  As of this writing they still have about a dozen tickets left. So if you are going to be in Raleigh, buy your tickets RIGHT NOW (go ahead, I’ll wait).

Did you get them? Awesome!  Now lets talk agenda. There are some great sessions going on. It was really hard to narrow down what I am going to. But here goes. By the way, just because I don’t mention or did not select a particular session doesn’t mean it’s bad…it just means either it’s not applicable to my current or future work or that, more than likely, there is just a more applicable topic competing head to head with it.  The truth is there are some awesome speakers and sessions I will be missing because they compete with something more applicable.  The good news is these are all video recorded and made available online afterward…so I won’t be missing them!

Speakers, feel free to lobby for your talks because I could be convinced.  And fellow attendees, if you are in any of those sessions, come say hi!  If you list nearly matches mine, definitely say hi because it’s always cool to have a group to travel around with between rooms.

———————————————————–

Sat. 9am –  This is the opening presentation by Adobe Systems. A good chance to hear future updates and also see who else is at the conference!

Sat. 10am – UNDECIDED! HELP! – Torn between Small Screens, Big Rewards! The Experience of Converting Desktop Websites to Mobile by Jessica Kennedy, because I work with a site that could use a mobile conversion,  and Writing Highly Organized CSS by Tyler Benton because my CSS can be a mess!  Thoughts?

Sat. 11am – UNDECIDED! HELP! – Ok, this one I had nailed down a topic for weeks ago. But the schedule was changed and now I am unsure.  Probably end up at Everything They Didn’t Tell You About Hybrid Development with Ray Camden because….well…its Ray Camden

Sat. 1:30pm – Build Your Backend in Node.js with Matthew Eash. After picking on Node.js developers the last few years, I dove in and really like Node so far. So it’s a “node-brainer” that I would choose this.  Yes, my puns really are that bad.

Sat 2:30pmBuilding APIs – StrongLoop Session – Looks like another general session

Sat. 3:40pm – Why Your Next App Should Be Serverless by Todd Wacker.  Serverless….sounds intriguing.

Sat. 4:40pm – Thinking Outside the Box With CSS with Brandon Kennedy. I’m more of a backend guy, but keeping abreast with the frontend is not a bad idea.

Sun. 9:00 am – Building APIs in LoopBack with Ray Camden – I generally skip multi-period sessions, but it’s Node and Ray Camden. Hello!

Sun. 11am – You Don’t Know Node.js – Azat Mardan. Node…what more can I say.

I have some personal business to attend to while in Raleigh so I need to miss the afternoon sessions. But I would have gone to see Delivering the Dude: Continuous X – Brent Pabst because I really need to learn and embrace the CI concept.  Oh well, add that to my video sessions.

So that is my list.  See you there!

 

 

Episode 1: The Wind Up and the Pitch! Playing with HTML 5 Animation

Description:

On the inaugural episode of the podcast Script discusses his attempt at making a pitch reel for a job opportunity using HTML, CSS, and Javascript.  He also divulges a little information about himself and generally tries to have fun!

Links:

Subscribe:

google-play-badge

Transcript:

Welcome to the inaugural episode of the Script Van Winkle podcast!  My name is Script  Van Winkle, but my friends call me… annoying.

Now the first half of this inaugural episode will be just like the rest of the upcoming episodes. I’ll cover some technology, trick, technique, library, program,  problem or other information I have discovered as I take this long journey to try to “catch up” to modern programming and development. Or is it catsup? I always get confused.

The second half of this episode will be a long comprehensive deep dive into the complexities, history and mystery of…well, me,  from conception to the bitter end! Or, I might just give a quick 5 minute overview of my programming background. We’ll see. Could go either way.

I may even stuff an awesome surprise right between the two. So hang onto your hat this here is the wildest podcast in the Disney genre.  What’s that? Oh right this is the programming podcast. Let me try that again.  I may even stuff an awesome surprise right between the two. Cause dude this is the sickest podcast in the programming verse.  I wonder why our writer emphasized sickest?  Oh well, who knows what goes through the mind of a third grader.

So recently in my pursuit of other opportunities, I came across an ad for a really cool position with a digital advertising agency in a nearby city. I’ve always wanted to work in advertising. I love creativity. I love the challenge of coming up with new and fresh ideas. And I totally binge watched “Mad Men”.  

They were looking for a web developer to help them flesh out the websites of their various clients. So I checked it out,. HTML experience? Check. CSS experience? Check.  JavaScript experience? Absolutely check.  ColdFusion experience. Check. Check. Check..  Man, this job was made for me!  Creativity? Check. Passion? Please! I make Pepe Le Pew look downright frigid! Mandatory five years experience in PHP? Uh oh!  Really? All my experience in web development, ColdFusion, Javascript  and building websites from the ground up and I’m derailed because I haven’t worked in one particular language? Wow!, So disappointed.

Then it hit me. This is an advertising firm. They are used to dealing with pitch reels and other types of presentations. If I could create a pitch reel that could generate enough interest from them to at least land an interview I would have a good shot of nailing it. But how would I go about it?

The answer of course was to create a pitch reel  exclusively using HTML, CSS, JavaScript, and PHP. I was totally down with that.  Within an hour I not only had written the script for the pitch reel I had recorded it, set it to music and had the entire soundtrack produced. It’s lucky for me that I like to dabble in  voiceover and audio editing.

I spent the next hour figuring out the simple graphics and text I wanted to use to help illustrate my pitch. Then I spent an additional hour researching JavaScript libraries to to make it happen.

For the text animation, I settled on this cool library called “Textillate.js” (http://textillate.js.org/).  Basically it wraps a whole bunch of JS functions around HTML5 animation specifications. In short, it makes it easier to make the text do all kinds of really cool stuff.

Now,“Textillate.js” actually uses another library called “Animate.css” (https://daneden.github.io/animate.css/). Animate.css basically abstracts out a bunch of HTML5 and CSS animations. For instance, it’s got one called “lightSpeedIn”. This causes your text or image to fly  in from the right-hand side really fast, and actually bend as if the bottom can’t keep up with the top.. Programmatically it was a breeze! Using JavaScript, all I had to do was add the words “lightSpeedIn”  and “animated” to the class tag for the element I wanted to animate. Bada bing bada boom. Worked like a charm.

Don’t get me wrong, I still had to do a lot of CSS work to do to make sure I had the right fonts, color, size, and positioning. I had to place it where I wanted the element to be when the animation ended.

Another cool feature about animate CSS is you also have exit animations. So I had to pick out and program those as well. It was starting to look really cool! The best part wass the whole thing was just text and images.

Now  I needed JavaScript to control all these animations. Initially, I was going to create a function for every single element that was going to appear. I was also going to embed those elements directly on the HTML page so JavaScript would have access to them when needed.

But as I started doing that, I realized that  there was some refactoring I could do to make this work with less code. A lot of my text was using the same font. So I created one function to which I passed the text, size, color, and  top and left coordinates.  That function would render the text out as a new element. Did you catch that? As a new element!  

So that led me to  write a function whose only purpose was to create a new HTML element on the page, well technically on the DOM. Now since all of the elements needed unique IDs,  I needed to be able to dynamically generate them. That led me to writing another function whose only purpose was to generate the id.

So if you just joined us…I have a function that creates an ID, one the creates an HTML element, and one that handles all the common text displayed in that pitch reel. Then I created one that handles images. I also made one or two others that dealt with special text.  So now I could generate all the visual elements I needed, but I still had to control the timing.

Initially I tried using a series of setTimeOut() functions, one for each element I was generating. It worked OK, but what do you think would happen is the  audio was paused or just simply stutters? You guessed it… things would go off the rails really fast!

So I looked more into the HTML5 audio object. And it turns out there are a couple of really useful properties including “currentTime” which returns the current time position within the audio.  I also made use of the event “onTimeUpdate”  to set up a trigger to run a function each time the time value changed.

This code grabbed the current second the audio was on and used that as a key to dataStructure I had set up to map out the presentation. Each element of that main data structure contained an array of the text or graphic elements that needed to be displayed at that particular time of the presentation.

Things started working much better at that point. Not 100% perfect, but still pretty cool.

Ultimately I decided against going through with applying at that company as I just didn’t see myself working in that city.  So I will never know if the gamble would have paid off.  But I did learn about HTML5 Animation and audio and found a couple of great libraries in the process.

More after this.

————————————-

FAUXMERCIAL: “Fusion Kingdom”

Coming soon to the Adobe Studios Resort in Orlando, a brand new theme park experience for the entire coding family, Adobe’s Fusion Kingdom.

Your journey begins on a scenic ferry boat ride across the majestic CFCs lagoon. Next you’ll take a magica stroll through the enchanted Allaire forest.

Once Inside the Fusion Kingdom your true adventure begins. Enjoy Popular  roller coasters like the Oop de loop, Cache mountain and the futuristic suppress white space mountain.

And be sure not to miss the dazzling splendor of Thunder mountain, where you will bolt like Zeus down the mystic Merrimack river through a stormy blizzard, dodging scorpions while being chased by a centaur. Who knows what else may develop before your ride is over?

For more family-friendly  fun experience the many different settings in the Adventures of Neo and friends  or enjoy classic attractions like the Carousel of Progress Bars.

If you are hungry, you can dine in an award-winning restaurant like the spaghetti code Café, or trythe retro chic Macaroni Meatia restaurant.

As night falls the Fusion Kingdom comes alive with the  glowing pagentry of the Spectra Magic parade followed by the Adobe’s world famous Fireworks.  As you exit the park, don’t forget to preserve those memories by picking up a hat, tshirt or put your name on your very own Fusion Kingdom custom tag.

Great times and precious memories at Adobes Fusion Kingdom. Where the action is always unscripted.  Unless you want it to be.

Construction of Fusion Kingdom is slated to begin soon, upon completion  of Adobes Photoshop pier, Acrobat Adventure, llustrator Island, Flash Fantasy Island, Preimer Park, Dreamweaver Farms, After Effects Experience, Audition Alley, Muse Magic, In Design Dominion, and Creative Cloud Land.

(Fauxmercial ends)

Background Music:

“Call to Adventure” Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
http://creativecommons.org/licenses/by/3.0/

————————————-

Welcome back to the Script Van Winkle podcast.  Now, if you are still listening, congratulations!  I mean, they say there is one in every crowd, and you apparently are it!  Truthfully, if you are still listening I appreciate it and hope that means you found some merit in the first part of this episode.

Now I promised to talk about my favorite subject….me.  But it’s your lucky day…I’ll just do the brief overview.

So I have been doing this web development thing for well over 20 years.  I started in 1996 when the only browsers most people had to choose from were Netscape and NCSA Mosaic.  Go ahead, Junior Developers, Google those puppies!  And while you are at it, you might want to look up what what search engine we used to crawl the web back then.  Leave your guesses in the comments.

I mean those were wild days! Days when we coded in Notepad, used bold, strong, and blink tags,put our color and stylings right into the tag, and worked our ASP off without a net.  I’m talking so far back, that us web developers were pushing our family and friends to switch to the latest and greatest brand new browser called Internet Explorer! Why? Because it was far superior to the other two!  (Sigh)….you don’t get those days back.

In 1997 I was introduced to ColdFusion version 3 and never looked back.  Well, I mean, I’m not still using version 3. But I am still programming in CF.

The next several years I spent staying on top of the new technologies and bringing them to the projects I worked on.  But, for a variety of reasons, that faded and I pretty much “fell asleep” for several years as the leading edge programming community passed me by.

When I finally woke up again in 2011 I found programming to be a whole new (sing “A whole new world”)..  What? Oh right. Programming podcast!  I keep forgetting.

Since 2011 I have learned a ton. In ColdFusion I started using components, Object Oriented Programming (OOP), CF Script, MVC frameworks, and even experimented with Object-Relational Mapping (ORM).  I started doing more with JavaScript including AJAX, jQuery, and implementing other libraries. I upped my SQL skills and moved inline queries to Stored Procedures and views.  I began to appreciate and grow to LOVE the separation between front-end and back-end.  I have played around with Angular, Node, MongoDB, MySql and even some PHP.  I have worked with eCommerce solutions and CMS systems.  But no matter how much I learn it is impossible to keep total pace with this industry!

So now you know why I am Script Van Winkle.  And maybe, just maybe, you understand why I am doing all this. I mean what is the point of learning new things if you can’t blab on incessantly…..uh…I mean…share it with other professionals.

See, that wasn’t so painful was it?

Again, thanks for hanging in. I am so stoked to get this podcast launched and hopefully build a community of friends with which to discuss the industry.  This is a two street though. Feel free to contact me or share experiences with me via the comments, email, or social media. You can email me at script@scriptvanwinkle.com or find me on Twitter @ScriptVanWinkle.  You can subscribe to the podcast in iTunes or on Stitcher. You can comment on this episode, see blog posts and find more info at scriptvanwinkle.com.

Thanks for listening and I’ll talk to you next time.

 

@NCDevCon Here I Come

NCDevConLogo

NCDevCon North Carolina’s Premier Web & Mobile Conference

Woo hoo!  Due to a change in plans I am now going to NCDevCon on September 17th and 18th in Raleigh, NC.  This is a conference that is small and intimate but draws some really top talent among its speaker pool!  It is also just pretty flippin’ cool!

In 2012 I attended my first NCDevCon (@NCDevCon) conference. In 2013 and 2014 I was one of the speakers! Not bad for a developer who just woke up.  NCDevCon is so cool they video every presentation and make them available online.  Just go to http://ncdevcon.com/page.cfm/videos-by-year. They have all the videos from the last several years in one easy to find place.  For my talks look for “Taming the Legacy Beast Turning Wild Old Code Into A Sleek New Thoroughbred” (video 8 of 2014), and “From Where do I Begin to What can we do next Turning Legacy Spaghetti Code Into a Delicious Lasagna” (video 4 of 2013)

I couldn’t make it in 2015 because it fell on the last couple days of my honeymoon.  Oddly enough, I could not convince my wife to finish the honeymoon there. Go figure.

I hadn’t planned on going in 2016 either.  But said, “Heck with it all! I’m not going to miss this!” So my conference ticket is bought. I booked a great AirBnB location in nearby Cary, NC (at least I hope it is great…stay tuned on that one). And, of course, I have already printed out the conference agenda and highlighted the ones I want to see.

Are you going to NCDevCon?  If so, leave a comment and I’ll surf name tags all day for you. Kind of like an awkward version of “Where’s Waldo?”

 

WAKE UP SCRIPT VAN WINKLE!!!

An alarm clockIt seems I fell asleep again!  Well, not so much in my professional life….just with this blog.  Look at the previous post. It was on January 14, 2014!

Why did I dust off the old blog?  Well, because I just might be looking for “new opportunities”. Seriously, this talented (well, experienced anyway) programming dude is looking to charge ahead.

What does that mean for you?  Well, if you are looking for a new teammate…it could mean a ton!  Just let me know (see  About Script Van Winkle for contact info). But if not, it means you will be at the very least seeing more (and current) blog posts from me. I am learning a great many things…all at once. And I will be detailing them in the coming weeks.

And there just might…MIGHT…be a new podcast in the offing.  Short, informative, and hopefully quite entertaining episodes are rolling around this creative mind of mine. I might just need to dust off the old microphone. Stay tuned for that one!

Dropping CFScript Functions into Your JS File

This post is about the cool similarities between Javascript and CF Script in ColdFusion.  But since this is my first post, a little introduction is in order.  I have been a web developer since 1996 and started with ColdFusion in 1998.  But once I got to ColdFusion MX, I got in a rut, lost my passion for programming and pretty much took a nap….a long nap….until about 2011. Boy did I miss a lot!!!  It was like waking up to a whole different world!

What an exciting time to be a developer!  With jQuery and a bazillion other JS libraries, MVC  frameworks, CFScript, mobile development, cool things like node.js  (I hear tell it actually flies little helicopters) and even databases without SQL (who knew that was possible), there is so much to learn!  I want to learn it all! But in the meantime, I hope to share some of what I find with you, both in my day to day work, and in memory dumps of things I have picked up since I awoke.  Feel  free to join me in the journey.

What better  way  to kick off  the Script Van Winkle  blog than with a discussion of script.  Before my nap I had programmed a ton in ColdFusion…but in all tags of course.  I had also programmed often in JavaScript, so that was familiar to me as well.  My first thought when hearing you could now do script in CF was,  of course, “why?”.  It did not make sense to me at first.

Despite being a disorganized mess in my private life, I love organization in my code.  I like it to look neat and easy to read.  I love white space and tabbing lines  to make code more readable.  In playing around with CF Script,  I found it looked more organized.  To me,  it seemed much more readable.   So I got it. I thought I had discovered why CF Script was cool.  It’s easier to read.  All the functions in my new or rewritten CFCs are now in script.

But it turns out there is so much more!  I was working on a project at my day job where, when building the page,  a call is made to a third party image renderer  for a preview image.  I have a function in my CFC (in script of course), that builds the URL to use to call the third party rendering.  It works great!

But we wanted to give the user the opportunity to make changes,  have that image rerender  based on those changes, and to do it without  necessarily having to use our server as a go-between.  So I had to write a JavaScript version of the CFC function that built the URL. This is where it got cool!

I copied the CF Script from that function into my JS file. Did it work right away? Of course not.  But it only took a few little adjustments to get it up and running. I did not have to rewrite the whole thing (and my comments didn’t need to change either).

You can do the same thing…just keep a few things in mind:

  1. Don’t forget, arrays in CF start at 1. In JS they start at 0.  This will likely trip you up at some point. Make sure you adjust any loops to reflect that. This usually entails starting loops at zero rather than one, and often your “less than or equal to” comparison to the length of the object you are iterating over, becomes simply “less than” the length.
  2. Speaking of decision operators, operators  such as  “is less than”, “lt”, “lte”, “gt”, “gte”, “is greater than”, “eq”, “equals”, etc.,  need to be changed to the JavaScript equivalents like “<“,  “<=”,  “>”,  “==”, “===”,  etc.  Make sure you have checked all of your loops for this as well.
  3. Speaking of loops, particularly those of the “for” variety, you can replace the incremental in CF with the JS equivalent. For example: “for (intX = 1; intX LT 3; intX = intX + 1)”, becomes “for (intX = 1; intX < 3; intX ++)”
  4. If you are using ArrayLen or ListLen, or just plain Len in CF, change those to use the “.length” function in JS.  For instance: “ArrayLen(aryItems)” becomes “aryItems.length”.
  5. Functions like “Replace” need to be switched out with JS version.  For example “Replace(strTestString, “saint”, “st.”) in CF becomes “strTestString.replace(“saint”,”st.”)  in JS.  There are a few CF functions that fall into this category.  Just figure that any function that takes a variable name as its first argument in CF probably has to modified.

While the amount of changes necessary will depend on the complexity of your particular function, you will more than likely find that a large percentage of the code is unchanged.  This is especially true if your DOM variables on the client side mirror your variables on the server side.  In my case,  I was dropping the entire object containing the graphics information to the DOM via JSON……but that is another post!

There are many reasons why you should switch to using CF Script, these are but two.  Happy scripting!!!!

© 2018 Script Van Winkle

Theme by Anders NorenUp ↑