Javascript: Oh, Take Me Back to the Start

The title of this post comes from a lyric in “The Scientist” by the band Coldplay. It seemed to best sum up my quest to refresh my perspective on JavaScript by completing a course on Pluralsight called Basics of Programming with JavaScript by Kyle Simpson. I wanted to find out after many years of programming in the language if I had the basics right. The course was very good in both introducing JavaScript but also the concepts of programming itself.

Here is a little breakdown of the concepts that stayed with me following the course (besides calling it JavaScript instead of Javascript after noticing the title and a little Web search. Although, like a number of things to do with the actual language, it’s really not a big concern which one you use).

Continue reading

2017: the year of Javascript?

Hi there coders, how have you been? It’s been a busy year on my end, lots of projects both at work and at play. Since 2016 is drawing to a close, I’ve been thinking about what I would like to learn in the new year. Perhaps the better word may be “relearn”.

I think I would like to learn about Javascript again. It is my primary programming language and I have been using it for over a decade, but, I’m interested in what I could learn now that it has indeed been over a decade, and there are so many sources to learn from and avenues to take. How could I better optimize my code? What tricks may I have missed along the way, or better yet, what best practices may better replace some of my current ones?

Javascript has evolved over the years in the Web world, from a client-side programming language to handle things like processing forms, to being the base of Web code libraries and frameworks like jQuery to support more functionality, and now facilitating server-side communication such as with Node.js. My work has been mainly client-side, but I am interested in how Javascript is being used in all aspects of the Web.

Thus I hope in 2017 I will rekindle my friendship with Javascript and get to know it again from a fresh perspective. I’m going to take inspiration from Neil Peart, the amazing drummer for Rush. After 30-odd successful years he relearned the drums and then continued on the path of self-improvement throughout his drumming career. (Did I mention some of my busy time this past year has been spent drumming?) Surely this humble Web dev can try to find some of his grit in 2017? Grit, I like that word. Happy New Year fair coders!

AngularJS: “The Daisy Special!” Popup Takes Action


Daisy Plates Bootstrap AngularJS site screen capture

Back again fellow coders, to take a look at another framework in the web universe: AngularJS. AngularJS is a Javascript framework used to build web applications. In my previous post we learned about the front-end framework Bootstrap, which helps you pull all the HTML/Javascript/CSS pieces together to get a polished website in a short time. AngularJS has a lot of client-side coding involved, but is more about taking that web site and giving it some pizazz if you will, to make it into a web app that interacts with things like data on a web server. This is a simplistic description of these two frameworks but helps distinguish their core differences. In fact you often may see them used together. When I described Bootstrap I used a Lego analogy, and for AngularJS, I will continue along the “building” path to find a new analogy involving…Doozers!

Continue reading

Bootstrap 3: Daisy Plates Website Gets A Revamp


Daisy Plates Bootstrap site screen capture

Hello fair coders, I hope you have been well! Recently I decided it was time to learn about frameworks, and in particular a very popular one called Bootstrap. Bootstrap is an HTML/CSS/Javascript front-end framework that is behind many sites including the one that brought it to life in the first place, Twitter. Using a framework like Bootstrap is like getting a snappy new Lego set — one with the basics, but also cool pieces like wheels and hinges, and a set of instructions to build a shiny new world, or in our case, website. However we all know when it comes to Lego, you often take a glimpse at those instructions and then do what you want anyway, and frameworks are cool with that too!

Continue reading

Ode to the IDE

Fellow coders, I welcome thee, to a post, an ode, to the IDE! (Integrated Development Environment, not the fish, although I’m sure they are lovely.)

It’s been a while since I posted and I’ll just say it’s been a great year of interesting projects and bursts of creative energy that have kept me busy, but I did squeeze in some Java here and there! For a while I was quite mesmerized with some tutorials I found on Creating a Game in Java using the game engine LibGDX. I then completed the next series of Java tutorials on teamtreehouse.com called Build a Blog Reader Android App. Both of these projects were extensive and showed me the power of a language like Java to accomplish so many things (in often varying and interesting ways!) Another take-away from these tutorials, in particular from working through the blog app, was gaining even more experience in the Eclipse IDE.

Now in my years of Javascript, HTML and CSS, generally the most complex of an environment I used for my coding was Dreamweaver, which had a few bells and whistles. When you get into a language like Java however, you really need an IDE like Eclipse, for one because it requires tools for compiling etc. but also to help you find all those crazy coding pieces you need, show you the error of your ways, and basically make your life a little easier with so many hints and tips. It’s just brilliant, having the help of the IDE along the way.

Thus fair reader, to summarize my favorite things about that experience, I give you my ode to the IDE, Eclipse in this case, enjoy!

E is for the error detection, beckoning me to fix! Red text oh my! But a right click and I can select an option that does the trick.

C is for the code hints, how they popped up left and right. Quickly creating code, but without so much might.

L is the last letter of control, as in Ctrl-Shift-o, the wonderful shortcut to ensure all my imports were in tow.

I is part of strings.xml, and that was the best. I could store all my interface text in that great treasure chest.

P is for a pause, whew! Doesn’t every ode need one?…

S is for the simulators, Android emulators to be exact. Don’t have that phone to test on, no problem! These mock ones have your back.

E rhymes with “re”, and that is my favorite part. Refactoring code is the way to go, cleans up what you missed at the start.

Happy coding!

New Year, New Goals

Happy New Year fellow coders! January is often a time to reflect about the past year and think about the future.

In May of 2012 I started artsycoder.com, a place to share my coding adventures with others. I had a few different projects on the go at the time, and made a goal to publish at least one article each month. Some months the articles practically wrote themselves and others I hit that Publish button with a sigh of relief. By December, my goal had been met! If I were to sum up the year in learning, it was still quite client-side Web-focused, with a series on responsive design, some HTML5, CSS and jQuery, but with the introduction of PHP, AJAX and ASP.NET/C#, I was starting to get into newer areas of server-side coding and application development.

Towards the end of last year, I started to think about my projects for 2013. Java mobile apps, PHP database programming, CSS3 animation and HTML5 games came to mind. During the month of January I have been taking a peek into all of these areas to figure out where to focus first.

Continue reading

Responsive Design: Daisy Plates Website: Responsive Site

Daisy Plates responsive site screen capture

The final phase in the responsive site for “Daisy Plates”, an imaginary boutique catering business I designed in past articles is to apply media queries to make the site adaptive and then further tweak these media queries along with adding a meta tag to create the responsive site.

Daisy Plates Responsive Website

It had been a while since I visited the responsive design world, so it was time to brush up – and learn some new things as well – with some teamtreehouse.com tutorials.

First, I had to determine what my target devices would be. In an earlier article, although I was in practice building for desktop, iPad and iPhone, I said I would test in the devices available to me: an Android tablet, an Android phone, Windows 7 desktop in the latest IE, Firefox, Chrome and Sarafi browsers, as well as Safari on a Mac if I could access one.

Continue reading

Responsive Design: Daisy Plates Website: Fluid Site

The next phase in the responsive site for “Daisy Plates”, an imaginary boutique catering business I designed in past articles is creating a fluid site, at the core of which is a fluid grid.

You may recall my link to teamtreehouse.com about the four phases of websites leading to responsive design. Phase two is the fluid site which is built on relative widths of elements. More specifically here, we will be making the grid that organizes the divs on the site fluid, by converting specific pixel widths, as well as margins, to percentages. We will also be converting fonts from pixels to ems, which you can think of as a percentage of the default font size that the browser is using. We will follow this formula for converting fixed items to fluid: target / context = result. Finally, we will set up automatic scaling of some images in the site.

Daisy Plates fluid site screen capture

Daisy Plates Fluid Website

Continue reading

Responsive Design: Daisy Plates Website: Fixed Site

Alrighty, after some time spent in the PHP world I have journeyed back to responsive design. In particular, we have set out on phase one of the responsive site for “Daisy Plates”, an imaginary boutique catering business I designed in past articles. Phase one is the fixed site.

Daisy Plates fixed site screen capture

Daisy Plates Fixed Website

Continue reading

PHP: Objects and AJAX and Doodles – Oh My!

Screen capture of artsyCoderDoodles Web App with small canvas
Chapter six in “PHP The Good Parts” (MacIntyre, Peter B. PHP: The Good Parts. USA: O’Reilly, 2010) is about PHP objects. We visited object-oriented programming back in my posts on the ASP.NET/C# “Magic Menu” where I discussed some behind-the-scenes on object-oriented (or “oo”) concepts.

This post will be about what I programmed after reading about PHP objects – a doodle web app which started out as a simple little combination of PHP oo programming and some HTML5 canvas and turned into a wild blend of PHP, HTML5, Javascript, jQuery, CSS, AJAX and XML. The final result could have probably been accomplished with less technologies, but in the end it was fun to try out some “extras” in combination with the PHP and HTML5 and learn about those as well. You could say the code is a bit of “doodle” itself! Or I may be getting carried away with the doodle metaphor – on to the doodling app and it’s doodles (but not oodles) of code!

artsyCoderDoodles Web App

Continue reading