Tag: html5

Episode 3: Fishies, Legos and Play-Doh

Description:

On this episode of the podcast Script discusses where he has been for the last few months, a personal project he is undertaking to help learn new technologies, and answers a question posed to him by listener Brandon Kuenzi in the comments on Episode 2 about the changes he has seen in the last 20 years.

Subscribe:

google-play-badge

Transcript:

Welcome to Episode Three of the Script Van Winkle podcast! My name is Script Van Winkle, but my friends call me (singing) “maybe”.

Now on the last episode of the podcast I was telling you all about everything I learned at a great conference in North Carolina and what an awesome and growing tech community there is there.

In the first episode I was telling you how I was trying to get a job with a company in a nearby city but how in the end I decided not to apply at that company. That, it turned out was a good thing. Just a few weeks later, me and the Mrs. pulled up our roots in the Mid-Atlantic region, and set them in the soft, fertile, though sometimes sandy, soil of North Carolina. Nice how I tied those two things together.

Now, all of this is just really a lame excuse as to why I haven’t put out a podcast in over two months. But hey, it takes a long time to unpack a microphone. I’m just saying.

On the plus side, you can consider this episode my holiday gift to you. So Merry Christmas, Happy Hanukkah, or whatever other meaningful holiday you celebrate this time year.

So in this “present” tation (see what I did there) I am hoping to accomplish two things. Which would be two more than I’ve accomplished so far this week. First, I’ll tell you about a personal project that I’m going to be using as a vehicle for learning new technologies. Second, I’m going to try to fulfill the request of one of our listeners. After all, I’m rarely asked for my opinion on things.

When you are learning new technologies, especially when going through tutorials, you inevitably encounter a variety of sample programs you’re supposed to try out. These range from the ubiquitous “Hello World” programs to more complex ones showing you what the technology can do.

Now I HATE sample programs! Ok, I’m not talking about the examples that you find when you’re reading through a tutorial. I love those examples! Especially, because when you’re looking up how to do something, if it doesn’t have an example it can be really frustrating!

What I’m talking about is when they give you exercises to do to create sample programs for you to try out what you learned. Now don’t get me wrong, the sample programs probably are the best way to reinforce what the tutorial taught. After all, they give you a controlled environment where you don’t really have to consider other factors that may ultimately play into your application. It’s just a simple sample example. Nice alliteration if I do say so myself.

It’s those programs that I can’t stand doing. And I’ll tell you why. If I’m going to be investing my time writing a program it needs to have a real world application. Or, more than likely, something I HOPE will be a real world application that somehow never quite makes it big.

My hard drive is filled with “real world applications” that I never seemed to get launched before the next big “real world application” came along. And if you saw the number of the domain names I have registered and keep registered today just because I don’t want to let them go….it’s insane. But I digress.

Now there are several web technologies I want to learn including microservices, which I mentioned on the last episode, Node.js, and AngularJS. Plus, I really want to push the limit of keeping that hard line between the frontend and backend. So I decided to find a personal project that could accommodate all of the above and give me an opportunity to play with each one of the technologies.

My son is a Boy Scout. In fact, this year he earned his Eagle rank! Hey, a proud papa can boast can’t he?

His scout troop is affiliated with a Catholic Church. One of the biggest fundraisers for the troop every year is a fish fry they host one Friday during the Lenten season. Last year I joined a parent committee that works on the fundraiser. One of my first contributions was to help with the promotion of the event by creating a new website specifically for it as well as creating a Twitter account to promote it via social media. This went together with another member’s creation of both an Instagram and a Facebook account.
Now I am a web developer not a web designer. So I went out and found a great HTML5 template to use for the website. Because it’s a simple informational site, I quickly hand coded a couple of static HTML pages. To them I added some really delicious looking photos of the dishes they would serve provided to me by a member of the committee who is also pretty awesome professional photographer.

I then used ColdFusion to build a form for which users could order tickets. Once this form was submitted, the information was stored in a local MySQL database. Then the user was handed off to PayPal to complete the financial side of the transaction. Once they successfully completed the stuff in PayPal, they were redirected back to our site. Paypal included a bunch of information in that request so that we could identify what the transaction was and then update our database table to show the customer had paid.

I also created an admin side of the site where the orders could be viewed and the information taken from there to add to the list of information from the tickets the scouts physically sold.

Now given that it was the first year for online sales and we didn’t really get a chance to promote it too much the number of orders wasn’t exactly overwhelming but it did contribute to one of the most successful fish fry’s they ever held. My job the day of the Fish Fry? Manually thawing a couple hundred pounds of frozen fish….a chore that was decidedly Haddock forming.

Now if you’re wondering why I’m talking about a project I did in the past but I’m supposed to be talking about a project I’m going to work on in the future to learn all this new technology, it’s because I’m going to use that project as the basis for this one. You see, the chairman of the committee was so impressed at what I did he had an idea. One of the biggest problems he has on the day of the event is figuring out just how many tickets they can sell to people who didn’t purchase tickets in advance. Up until now he has just tried to look at how many people seem to have come to the event, and guestimate what they likely have left.

But now his idea is to make a system that has all the ticket sales recorded, allows staff to check off people as they come in and in real time match that up with the inventory of the food we know we had to begin with, and give a relatively accurate count of how many pre-sales can still be sold.

So I decided that I’ll take on that challenge. And yes, my idea of a “real world app” is one that is going to be used by one person one day year. I know what you are thinking there junior developer but you can keep your opinions to yourself.

Besides, the jokes on you. Because you’re going along for the ride.

Now this time around we’re just going to focus on the initial planning steps. Dividing the application into logical parts and then kind of figuring out which technologies play what roles for each part.

Obviously the first logical part of the application already exists. The public facing website that we built last year. And while one could be easily tempted to go in there and rebuild it with newer technologies, we are going to leave that as is for now which means it’s going to be a combination of HTML, CSS, a little bit of vanilla JavaScript and some delicious pictures.

The second part of the site is the ticket order form. That’s is also using HTML, CSS, and JavaScript, but now adds on ColdFusion and interaction with a MySQL database. Once again we will let this one ride as it is for now.

The third major part is integration with the PayPal API. That’s working so we’re going to leave that one for now. And we will do the same for the admin side of things though we may build a few additional pieces to it to support adding inventory into the system.

Now things get interesting as we look at the newer functionality. A great thing to keep in mind with this new piece is where we are going to be using the application. All the previous pieces are used by users from various locations making it perfect for a web based architecture.But for this new stuff that is not the case. At the venue used for the fish fry the Wi-Fi is very spotty at best, and we pretty much know that this is going to be used by one person on one computer.

Right about now I can hear all you VBers or .Neters screaming “Hey! This is perfect for a Windows app!” I can also hear all you mobile developer screaming “Hey! iPhone or Android app!”.

Hey, I hear yah. But just remember here I’m a web developer looking to improve my web development techniques. So I want to stick with that technology. In this case, there is really only one logical choice, JavaScript baby!

I can hear a few of you out there going “Hey Script! You know that JavaScript is client-side? How are you planning on interacting with the database and get and set all that information you’re going to keep on the fishies and the shrimp and the other good stuff?”

To you I say, “Forget about it!” Because as you may or may not know Node.js is designed to do JavaScript on the server-side. You can use Node to do a lot of the same server-side functions like interact with the database. Now, Node has to reside on your server. Due to the limited network connectivity at the venue we are pretty much better off running this app local on a laptop anyway. We will have to install Node on that but again it’s one machine and we are controlling it.
This is also where that whole separation of front end and back end comes in the play. On the backend we’re gonna be doing things like pulling order records, updating the flag to say the how many meals been picked up and running calculations against the inventory to come up with a number of tickets we still can at the door.

So Node.js makes the most sense. We run a little node server on the laptop which could handle all the database interaction. We can even split these tasks into little microservices which I think would be fun to do. But what database are we going to use?

Now on a future episode I would like to go into a deep discussion of the differences between SQL and noSQL database. At least what little I know of. But for purposes of this discussion let me just give me a real quick synopsis. SQL databases are the kind most people generally think about.
You create structured tables, ones in which the records contain the same fields formatted the same way. You find your records by indexing and matching up records from one table to another all done through the structured query language, aka S Q L, aka SQL(sequel).
NoSQL on the other hand has a lot less structure. You create collections of objects and those objects can be any different type of data, mix-and-match, you name it. Generally you want to keep the same thing just so you can keep your sanity but it gives you more flexibility. One of the most commonly used ways to use NoSQL is to take data objects in your program and save that entire data structure to the database. You can use a lot less complicated statements to set and pull your data.

So let’s think about it. We’re gonna have a list of orders and are really going to just have to pull them by one key value… their ID right. And we are not going to be doing any sort of in depth searching on the orders. I mean it’s pretty cut and dry.

Also we are going to have a list of the foods we track. You know, the fishies and the shrimp. They’re going to be individual records we just need to pull up and update the count of the ones that we use. Also cut and dry. Not to mention we’re gonna put a copy of the database and run it locally on this computer. Nosql engines tend to be a little bit lighter than say MySQL and MSSQL.

The one downside to using NoSQL here is that on the website last year we collected the information in a MySQL database. To be able to move that data over to a local copy on our laptopwe are going to have to do one of two things. First, we can convert the website to using noSQL instead of SQL. While that shouldn’t take a ton of time, it violates our idea of not touching what was already working. The other option is to write some sort of function that crawls through the SQL tables, builds data structures from the results and stores those in the NoSQL database. That certainly wouldn’t violate the first principal about not touching the stuff is working. It would also be a rather interesting exercise in creating a microservice to do this.

However, I’m curious to get your opinion on it. So in the comments let me know your arguments for going with SQL or NoSQL for this application.

So to recap so far, we’re going to have a database sit locally on this machine whether it’s SQL or NoSQL It’ll have the most up-to-date information as of the date of the event. We’re going to put Node.js on this machine to handle backend functions and DB interaction, with those steps possibly divided up as little microservices just for kicks.

Now for the frontend. To control all the interactive screens the person checking people in at the fish fry would use, we could pretty much go straight HTML and JavaScript. While it would be fun to try out a little AngularJS here, it might be a little extra complication we don’t have time for. But if the opportunity presents itself we should think about taking advantage of it.

The committee chair also said he thought it be a really cool idea if the tickets they sold had barcodes or QR codes so they could be scanned as the people come up to the ticket desk. It would pull up their order and the person working the desk would check off the meals that are being picked up. It’s a cool idea and worth considering. I just have to decide on how complicated that is.

So that gives you an overview of the program that I’m planning on using to try to figure out new technologies. As of this recording it’s already the middle of December actually even later just a few days before Christmas. The Fish Fry is held in March. So I don’t have a whole lot of time to get this together. As I work on it though, I’m going to try to bring you in on it and let you know some of the things I discover along the way. And, of course, I welcome any input you have, just leave it in the comments on the website at ScriptVanWinkle.com.

Now coming up I’m going to fulfill the wish of one of our listeners who left me a comment on the website and fill you in on my opinion on a particular subject. That is coming up right after this.

(GitReal fauxmercial)

Welcome back to the Script Van Winkle podcast. Now listener Brandon Kuenzi’s comment on Episode 2 was very complementary. He mentioned how much he enjoyed the podcast and hopes that I continue it well into the future. As a long time podcaster I can tell you that kind of feedback means the world to me and I thank you so much for it. And yes junior developer I get that this is only the third episode of the podcast. But trust me I’ve done hundreds of episodes of other podcasts so I know whereof I speak.

Brandon also expressed an interest in getting my opinion on how the industry has changed over my 20 plus years in it. That is a request in which I would be happy to oblige.

Now being an old grizzled developer, well maybe not so old, but grizzled like a bear. I have seen so many changes it would really be hard to cover them all in one shot. So for now let me focus on one simple aspect of the industry. To me, I think one big change is the inversion of thinking on the development and programming of websites and applications.

You see, in those early days we didn’t have very much to work with. So you would start with the text that you wanted to show on the webpage. Then you would add some HTML tags around them to emphasize certain points of text and maybe, MAYBE add a few simple graphics to punch that up a bit.. You would save those into static HTML pages, usually one for each page of your website. When you had an element of the page that you wanted to make dynamic you would replace that hard coded text with either an active service page tag or a ColdFusion tag that would render that dynamic information. In fact, you would often put other ColdFusion or ASP code that computed the dynamic information right at that same spot. It was our version of just-in-time info.

Hey, in those early days we really didn’t have JavaScript or even JScript so those weren’t even a consideration.

So essentially, you were starting with your finished product. You know, the static content you want to get out there, and just dressing it up a bit either with style or a little bit of dynamic text.. And, doing whatever dynamic stuff you did when you needed it. It was pretty much a procedural way of doing things.

Now think about how we do it today. It’s more comparable to an object oriented environment. First we gather all the information we need from all the dynamic sources we need to get it from. This could be from databases or text files or even still some hardcoded HTML. But the point is we gather it and build the entire structure. Then using CSS, HTML templates and such, we llay out the format and combine it with the graphics and look and feel. Essentially we are starting with information first and styling second. Not to mention, where in the old days pretty much everything was in one big giant monolithic document, these days you try to make the files as small as possible and separate out and reuse assets and code as much as you can..

If you want a really bad analogy to describe the differences think of it this way. Twenty years ago a web page was like a big giant lump of Play-Doh. Everything we needed was pretty much in the Play-Doh and all we needed to do was kind of mold it, maybe take a piece from another lump of Play-Doh and mix it in, and maybe hang a couple of pictures on it.

Whereas today your building sites more like Legos. Lots of different specialized parts that are attached together through standard connectors to make the final product.

From Play-Doh to Legos, yeah I’d say that was a pretty big change. And don’t worry, I will resist the temptation to say I saw developers go from sculptors to blockheads. Hmmm, maybe I should look up the definition of the word “resist”.

And that’s all for this episode of the Script Van Winkle podcast. If you’ve got questions or topics you would like me to cover, drop me a line at script@scriptvanwinkle.com or find me on Twitter @ScriptVanWinkle. You can subscribe to the podcast in iTunes, Google Play, 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.

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.

 

© 2018 Script Van Winkle

Theme by Anders NorenUp ↑