Posted on

HTML5 To Do shopping list app

I’ve been using both Evernote and Wunderlist for years. I’ve built a ToDo list before in jQuery that came close to Wunderlist. It had draggable list items, and delete item checkboxes. But when studying JavaScript, jQuery is considered cheating.

So I was pleased to see this one show up in my latest online lesson. I prettied it up with some style sheets. I’m waiting until later in my studies to figure out how to connect it to a database, hopefully with something like Node.js. For now though, it just works in the browser session memory. It’s cool to make useful things that actually work. This one embedded in WordPress has some extra padding related to WordPress styles, but the direct link outside of WordPress works as intended.

Shopping list


You can also access it here as a direct link outside of WordPress.

Posted on

Custom HTML5 video player controls

We had an inch of snow today. I took a brisk walk around the block on the sunny, but slippery sidewalks before getting back to work programming.

Yesterday our exercise was to remove the default html5 video player controls, then substitute a handbuilt controller. As an added challenge, they asked if we could program in a clickable playhead. They gave us a couple clues, but thinking it through was a  brain squeezer. There was a 190 pixel wide area where the progress bar walked across as the video played.

Somehow that area needed to become clickable. When clicked, the video should play at that percentage. Meaning, if you click half way across the progress bar area, the video should jump to the halfway point.

I can’t post the video here in WordPress without a lot of trouble from width properties. So instead I’m linking to it here as an external page. But the code is shown below. The magic in the  clickable progress bar is on line 157: function jumpTo(e){…}

My solution isn’t a true draggable playhead, but it does at least navigate, and displays a nice red bar when clicked.

 

Posted on

Bouncing ball with collision detection

Self Portrait 1989 charcoal and white conte crayon

The drawing above is a self portrait done so long ago I can’t even remember the year. I have dark hair, so it was probably during my twenties or thirties.

I used to program games in flash that had rockets flying in space. They had motors that fired, directional thrusters, variable velocity, collision detection, gravity, friction and bounce. But flash is dead…or at least it doesn’t work on phones, and I like to make things that work on phones.

Now I’ve just finished another excellent lesson at https://developer.mozilla.org It was an applied application of OOP as it is used in JavaScript. It didn’t make a rocket, but it did make a bunch of balls that change colors when they collide. I added in a drop list that lets you change the number of balls. I got it to show up here in wordpress via the shortcoder plugin.

Here is the code if you are curious: https://codepen.io/markhwebster/pen/VQzyJM

Posted on

Programmed a working calendar for journal

On February 3 I posted the working example from a calendar lesson I had learned in JavaScript. All it did was generate months of the year with the correct number of days, depending on which month you selected. It was dumb but it got me thinking.

As I moved forward in my JavaScript studies I was mulling over a way to make use of that calendar. To the right of this story you will see two calendars. The top one is a free WordPress plugin. I didn’t build it, I just installed the plugin.  It lets you switch between journal entries going back to 2011 when I first started using WordPress. All the post entry links are automatically populated from the WordPress database.

But I was keeping an online journal long before they invented WordPress. I have been writing since late 1997,  a year after I got my first computer. There was a story that year in the Seattle times about a woman who was keeping an online journal. She started it in ’97, and it inspired me to do the same. But as my journal grew it was difficult to build a navigation system back through the entries. I’ve struggled with a number of solutions, as you will see if you prowl around.

The one I used the longest was a flash calendar that I built from scratch. But even I refuse to download flash anymore. So if I was on a smartphone,  I couldn’t navigate my own journal until just recently.

My solution? Build a real working calendar in Javascript and embed it on every page , or at least the pages starting at September 2001, which is when I changed the interface drastically. To get it to work I had to create a JavaScript array for every year, about 10 of them.

As you can see to the right, I also embedded that new JavaScript calendar right here in WordPress below the plug in calendar. I got it to appear by using a WordPress plugin called shortcoder. The shortcoder plugin presents itself as a box in which you can paste html, css and js. Then it gives you a short little snippet of code, called a shortcode. That shortcode references the longer code. I pasted the shortcode snippet into a standard text widget, and dropped the widget into my WordPress sidebar.

You can see it all working here. It’s not search engine friendly yet…I have to think about that. I’ve linked to the contents (hand built index of the journal) page. It has links out to most of the good writing, perhaps that will negate the fact that a dynamically generated calendar can’t be spidered by google.

I’m fairly happy with this solution. It’s not perfect, I think Jessamyn does a better job of archiving, but at least mine was a fun way to practice my JavaScript.

Here is the array for the year 2000. Note that I didn’t start writing until March of 1999, or, at least that is the first named file: three99.html

Next I modified the simpler calendar function from a week ago so that it dynamically generated the months for the selected year, complete with clickable links for each month. But there was a problem. If you selected say, April of 2004, when you got there, the calendar did not display. You had to choose a year again. This was bad usability. I wanted the calendar to always display all the months of the year you were reading, no matter which month you were reading. But that meant getting the pages to talk to each other. The technical term is: passing data between html pages. I had a vague idea that it might be doable with cookies, but I’ve never baked cookies.

Google to the rescue! I discovered there is a way to store and pass variables between pages that have JavaScript. It’s called localStorage. You can write to it, and pull data from it. As long as they are on a long session on your website, you can make your html pages pass data from page to page.

The first line below listens for you to make a choice from the drop list. If you do ‘change’ it, the script fires off the ‘createYear‘ function.

That function puts the year you chose into a variable called ‘choice‘. At the same time, it places that year into session memory via the localStorage.setItem command. This is like registering at a hotel and telling the concierge that you would like the Seattle Times news paper each time you walk in. He remembers your preference during your session at the hotel…all week long.

As you surf from month to month, the concierge (localStorage data) remembers your year preference and keeps that year’s calendar visible

Next I do a couple checks to see whether this is your second journal month choice, or if you just arrived and haven’t made any previous choices. If the latter, I present the first years calendar, which is 1999.

Further down I have a switch-case conditional that fires off the correct createMonths function for the year you selected.

In other news, Sue and I skied at Paradise yesterday. This was only her second trip of the year. She is still babying her rotator cuff surgery. It was a nice one inch covering of powder over a hard base. It wasn’t  grabby, and was lovely skiing, not counting the water runnels, which were as bad as moguls in spots. I went back up for another run, but the fog had settled in, masking the earlier bright blue sky. I turned around before Pan, and finished out the day.

Today I bought a $15 bouquet but discovered I’ve forgotten how to draw. Jeez! I’ve been so lost in programming I’ve not only forgotten how to climb, I can’t draw either. How come I can’t be good at everything? It would be so handy. Perhaps when I get a full time job again and get settled in I can get back to my hobbies. I miss them.

To keep from going crazy with all this studying I’ve been exercising every day and playing a fair amount of ping pong. Last week I played at the local community center with a bunch of seniors. We played doubles, which involves a very intricate dance around the end of the table. You have to hit the ball, but only every other time. This means you hit the ball, then run backwards to get out of the way so your partner can hit it…and repeat. It was so much fun I went to another public game out on 76th.

This was a beast of a different color. They were people of all ages, and they were serious, with a capital S! They literally wiped the floor with me. I lost.every.single.game. That’s nine games in a row, but who is counting? I walked out after an hour. I mean, what was the point? I love the game, but I don’t have the time to develop that kind of skill. I am already neglecting too many hobbies, don’t need to add ping pong to the list. I won’t stop playing, but I will avoid playing with people who live and breath the game.

Posted on

Vantage and an image gallery

I studied Sunday so I could play hooky with Christine on Monday at Vantage. Chris was super strong and led Sinsemilla 10c and George and Martha cleanly.  I was very rusty after 6 weeks of not climbing. I can’t afford the climbing gym so my arms have become weak. As I said after lowering down from hanging on Pony Keg: “That was not the climber who came back from Joshua Tree on January 2!”

Chris: “I know, I wanted to meet that guy.”

Me: “He is gone, and I wonder if he ever really existed. Perhaps that was just a fairytale from some bizarre alternate universe.”

Such is my life as a 64 year old rock climber. It’s a sport for young people. Trying to do it at my advanced age of decrepitude requires a lot more work than it does for young people. I do the work, and happily, but it requires climbing every weekend, or 5 days straight, whichever comes first.

So now I’m back to my JavaScript studies at this super cool free website:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery

I’ve been using Evernote to take notes of the stuff I’m learning. But Evernote doesn’t have syntax highlighting. It’s going to clog up this blog with a bunch of code…but I suspect this blog never gets read by anyone but me anyway. Probably I screwed up the search engine functionality or something. Not that I care enough to sort it out. I have bigger priorities, like learning high end JavaScript.

So here is my latest “homework”. I built a barebones image gallery switcher. It’s too boring to show the working example in an iframe. But this is the code that makes it work, which is the fun part for me. On my main website, I use a awesome image gallery function called Photoswipe. You can see it here.

Whoever built that had the job that I want.

Meanwhile, back on the farm, this is the code for the one I built in my lesson. They gave me the images, html and JavaScript. But they only gave me clues as to how to write the script. I’m fairly happy I figured it all out. Baby steps…

Here is the html:

And here is the script that I wrote:

 

Posted on

Programming in JavaScript

I’ve been studying JavaScript full time for a month. Sounds boring, but it’s something that should help make me a more valuable programmer. I take lots of breaks as they say it’s not healthy to stare at a computer for too long. I run downstairs for more coffee, walk out to the shed to do pull ups, do my 50 daily sit ups, or pedal my schwinn airdyne for a lunch break.

I like the way JavaScript blends my existing web knowledge with dynamic functionality. I was working on a calendar lesson that dynamically populates a calendar with the correct number of days in a month. I didn’t like the example in the lesson because they had 4 days in a week, which was just dumb.

I’ve been keeping an eye on the latest trends and remembered that css grids could make a nice calendar. Here it is, with the code down below. I also added in a random color generator for the days. Click a day, and the background color of that list item will change.

The relevant html:

 

The important css:

 

The JavaScript:

 

Posted on

Made a duet and a game

I learned some filmmaking skills 3 years ago and I like to dust the rust off every now and then. I enjoy the technology and the tools of the trade: DSLR cameras, lenses, lights, clapper boards and double system sound recording.  Editing is also a lot of fun. Making something beautiful that didn’t exist before appeals to the creative side of my personality. Premier is a fine piece of software. I like the challenge of perfectly syncing multiple tracks, and then playing director in the multi-cam window.

In the video below, I set up lights, tripods and cameras, white balanced everything, recruited talent (my wife), performed and recorded 4 video tracks, 2 audio files. Then blended them all together.

The challenging part was syncing the second shoot with the first shoot. They happened a half hour apart, so there was no way to sync with a  clapper board sound. The earpiece I’m wearing is playing the audio from the first take, while I’m recording the second take. I’d never done this before but I think it’s called dubbing. I had to sync the two takes together by looking at the audio waves in Premiere, while listening to the two takes playing simultaneously as layers in the sequence. There were 4 video layers and 6 audio layers. Four of the audio layers would later be deleted as they were from the cameras. But the two Tascam DR-40 digital audio recorder files had to match perfectly with their video files. Long story short, I was able to get the harmonica sound close, then nudge the audio file left and right one frame at a time until it synced, using the keyboard shortcut of Alt + left or right arrow keys.

My other challenge was setting up the multi-cam sequence. It’s too complicated to explain here, but once it’s set up and running, editing  multiple cameras into one final cut is a breeze. A common problem you will face if you try this is that multi-cam window likes to have the audio follow the video. Meaning, if you click camera 3, the sound switches to the audio from camera 3. In double system sound, this doesn’t work, because you delete all the camera audio tracks after syncing, they are low quality.

Instead, you bring in audio from your digital sound recorder, in my case, a Tascam DR-40, which had feed from two real microphones seen in the video below. So I had 4 video tracks, and two audio tracks. When I went to multi-cam window, it would only play the top audio track, which was the guitar and ukulele. It ignored the harp audio track. Even with ‘audio follows video’ unchecked. My solution was to copy the synced audio track from the main layered sequence and paste it into the multi-cam sequence in  a new audio layer. So now I had one video layer and two audio layers, plus I had all 4 videos displaying at the same time, in little thumbnails. All I had to do then was play the video, and click thumbnails in realtime, director style. If you’ve never seen it, go to youtube and search for premiere multi-cam window. It’s awesome.

I also like to listen to music the old fashioned way, by making it myself or with friends. I come from a long line of amateur musicians. Making music was a tradition anytime our family got together for as long as I can remember.  Grandma used to teach piano, but when she became blind in her nineties she still wanted to participate in our sing alongs. Me and my cousin would sit on either side of her. My cousin would sing, and I would play songs on my harmonica, the one in this video. Actually, that 1967 Hohner harmonica got old, so I recently replaced it with a Suzuki SCX-48 Chromatic in the key of C. It is a lovely instrument, but you can be the judge.

 

My Javascript studies are going well. I learned how to build a number guessing game here:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash

I’ve got it embedded in an iframe, but if that doesn’t work, here is a direct link. Hint: if you turn on developer tools, I console.log out the random number…so you can cheat.

The tutorial was fun, but as I was working it occurred to me that it could form the backbone of an animated hangman game. I don’t play computer games, life seems to short. But I wanted this game to work, and I wanted it to be pretty.  A lot of what I wanted in the game was functionality that I didn’t know how to program. I found the answers with simple google searches. It is 600 lines of code, including the html, css and JavaScript. I wrote every.single.line.

Here is the game on codepen.

While I was programming the game, I fell in love with a new free code editor called Atom. I like it better than both brackets and sublime. I need to get back to studying Javascript. But if you are curious how I built my hangman game, here is the Javascript code: