• |

    My 2017 Learning Plan: Javascript Edition

    So…I write about learning a lot. Turns out, I really love learning. I also like coming up with plans about learning, and telling you about them. The last one that went really well was the one I did in January 2014, when I learned Sass. But now that I’m no longer at an agency, I feel like pushing myself to learn is even more important because it’s not part of my daily routine; I don’t have amazing co-workers I can learn from anymore. So with that in mind, I came up with a learning plan for the next few months of 2017.

    Read More “My 2017 Learning Plan: Javascript Edition”

  • Use Input Masks for Better UX and Easier Validation

    Recently I was developing a few forms for a project at work and wanted a fairly specific format for the input of one of the fields. It was a time of day, and since the <time> element isn’t very well supported in browsers yet, I opted for my own text input and validation. While I do provide some examples for users and check the input on the server side, I opted for input masks on the front end of development to make the form validation easier, and more importantly, to make using the form easier.

    Read More “Use Input Masks for Better UX and Easier Validation”

  • |

    Google Web Toolkit

    gwt logo

    After I got back from Google I/O, I mentioned Google Web Toolkit was something they showed off that I was very impressed by. It allows you to build complete AJAX applications using Java. In one of my grad classes this semester, we had the opportunity to use Google Web Toolkit (GWT) on a semester long project. After using it I’ve come to the conclusion that is it great, but I’m not sure I would use it for a normal web design project.

    First, here is a sample GWT project I made called “The Decider.” It allows you to add items to a list and then the program will randomly select one for you. This is all done completely asynchronously. I was able to implement it completely in Java (which I think is easier than javascript) and then build the HTML around it using GWT’s ‘Widget’ classes. Again, you’re using Java to build the interface (without using Java Swing). This takes a little getting used to, but you can pick up pretty quickly after reading GWT’s documentation. A nice thing about the widgets is they all have their own CSS class assigned to them, and there are methods that allow you to add, remove, and override CSS classes. You can also build an HTML page with your own CSS id’s and dynamically add things to them with GWT.

    GWT is great is you’re unfamiliar with web design and you want to showcase some project your doing on the web. Google’s default styles look nice and you can really focus on the functionality, especially if the scope of the project didn’t include a web based implementation. It’s also good if you want to roll out a completely asynchronous UI relatively quickly. With The Decider, I didn’t have to worry about the advanced javascript stuff, using something like Dojo or JQuery, etc. I just wrote in Java, which I am pretty comfortable with. However, if from the outset you know you want to make a web app, I’d recommend doing it the traditional way. Writing your own HTML and CSS is semantically correct and less bloated than a GWT project. But of-course, I’m a web developer first, and I just have my feet wet with GWT. I’m willing to bet with a little extra time, due to the freedom you have with GWT you can make that lightweight, semantically correct (tableless!) interface you want with the power of Java behind it. And you can probably get rid of some of the bloat before deploying your app.

    All-in-all, GWT is really powerful and I think it will be a game changer. Next semester, another grad class I’m taking will be using it and I can’t wait to really get under the hood now that I have an understanding of how things work.

  • |

    Learn a Programming Language

    Over at LifeHacker, they are hosting a spirited discussion on what the programming language to learn first is. I think this is a pretty interesting discussion to have and want to comment on what the others are saying, as well as justify my stance. First of all, I did weigh in, saying:

    I’d say if you’re not going to be a serious applications programmer, learn some weak-typed language like PHP or Javascript first to get your feet wet with program logic without having to worry about whether your types (the difference between say a number and a word) are correct. This will help you with the control structures(if statements, loops), how the logic works and how to solve some basic problems. Then you can move on to a more advanced language and learn the different types, objects, etc.

    Many of the others who commented said that Javascript is not a programming language, it’s a scripting language. Is there a huge difference? Maybe, but not to someone first learning. They will not be doing things a programming language calls for- they will be learning control structures and how a program works, what kind of logic goes into writing a program, etc. To be honest, I first learned Java when I was a freshman in college, but I didn’t really understand programming until I picked up PHP over winter break of that academic year. So is there a difference? Sure. Is it a huge deal to someone starting out? Not at all.

    Then we’ve got those who say, “Learn C first, it’s the best” or someone even said, “Learn Assembly.” I know how to program and Assembly is hard. You’re not writing code in something that looks remotely like English and you need an understand of how data is represented on a machine. It sort-of applies for C too, as C is a low level language. Don’t get me wrong, C is the best language I’ve coded in- it’s fast and you can do really powerful stuff. But I think pointers alone is enough to turn someone off to C and programming in general.

    Finally, we’ve got those who say learning an Object Oriented (OO) language is the way to go. I can see that. I feel there is enough abstraction there that the learner might be ok. They shouldn’t dive right into object, however, because objects are pretty difficult to visualize if you’re just starting out.

    I still say my approach is at least a good one. Learning a simpler language that doesn’t put restrictions on data types will allow the learner to focus on program logic more than data representation. They will begin how to think like a programmer and can move up from there. PHP isn’t a bad place to start because it acts like a simple language (weak typed, syntax is pretty easy to understand), but you can do some powerful things like create objects.

    Teaching yourself to program is a pretty daunting task to begin with. However, if you pick up a good book and start with a simple language, you should be fine.

    PS- HTML is not a programming language. It’s a Markup Language. You will not learn anything about programming.

  • |

    New Design- Dynamics

    This is part 3 of 5 of the mini series for my new design. In this part I will be talking about the dynamics of the site and using WordPress as a Content Management System (CMS).

    A change made more on the back end of this site is all of the pages on the site can now be edited through WordPress. This makes it much easier when I want to update things like my resume, the about page, etc. One of the reasons I never did this before was I did a lot of PHP stuff on the seemingly static pages, and there was no way for me to integrate PHP code via the WordPress admin panel. To fix that problem, I found a plug-in called runPHP.

    This handy little plug-in ads a check box to each post asking if I want to run the post or page thought the PHP preprocessor. All I do I add in the php code (with normal tags) and I’ve got dynamic, easy to update pages. This comes especially handy on my projects page, which calls a number of custom functions. With runPHP I can easily change parameters or function calls right from WordPress.

    On the same token, my projects page is also completely dynamic. I will talk more about the plug-in I wrote in the next series, but I would like to touch on the fact that this was something I had been planning for a while. I needed an easy way to add, edit and delete projects from my resume site, Casabona.Org. With WordPress, I was able to add another set of pages to the admin panel to do just that. In the coming months I will be combining Casabona.Org and this site, making them fall under one roof. This plug in will make it much easier for me to manage my projects.

    Using the power of WordPress, I am able to quickly and easily manage my site, transforming the open source blogging system into a CMS. Now, this site is updated more frequently with some very rich content.

  • | |

    Fading Pages in Javascript

    I am not a huge proponent of Javascript. However, I recognize that it is becoming more and more powerful and used, especially since AJAX has become more popular. With a new redesign of one of my sites, I wanted to do something different and cool- so I looked to 24 Ways. There I found a nice tutorial on using the effects from Script.aculo.us. Using that tutorial and some extra programming, I was able to create fading “pages”, which are actually divs we fade in and out.

    First of all, you must follow the 24 Ways tutorial. I have made all of the javascript from that tutorial available in this post, and then my modified combo.js. All of my changes occur in that. Once you read that 24 Ways Tutorial, come back here.

    So by now, you are familiar with all of the files, and the main functions provided in the combo.js. I took combo.js and modified it a little here:

    JS Code

    Notice I added a few lines at the top of the function. On top of that I added this to my main page:

    JS Small

    These codes create and check cookies, which is what I used to check what “pages” were open. When a page is open (when the page is first loaded, it is welcome), a cookie created with the name of that page. When a new page is clicked on, my code checks the cookie to see what is currently open, then closes it. After that, the cookie is rewritten with the new page open. The cookie functions are included in my combo.js. When it is all said and done, we have this. Later!

  • |

    The Visible Light Spectrum

    Visible Light

    I am taking a Light and Photography course at school where we are learning about the electromagnetic spectrum (EMS) and visible light, color temperature, etc. When giving us a website for the EMS, my professor mentioned he could not find one that was more “interactive”. So, me being the overachiever, I decided to make one. This is how I made it…

    I wanted to make a spectrum with clickable areas to display each color. I did not want an image map. Image maps went out with tables. So I created the color background using a multicolor gradient overlay in Photoshop. I then measured out how many pixels each color was. Using some CSS, I created a div that was the height and width of the image I created and made the image the background. I then created a div for each color in the spectrum. With the parent class .color, I was able to float all of color divs left and give them a specific height…

    .color{
    float: left;
    height: 196px;
    }

    Then, each color got its own color ID that was defined by the different widths.

    Now, the hover part. To make each of these colors a link, I simply used blank .gif images set to specific widths. When you would click on the invisible image, the color information comes up. The color boxes were done by code I adapted from the Lightbox JS project, which is linked on the EMS site. Maybe when I get some more time, I will do the entire EMS, not just the visible light sections. Later!