Help, I Need to Prototype Forms in HTML5

Dreaded forms? Feel like you’re looking the barrel of a gun? Want to impress your boss? Don’t worry, bootstrap is here to help. Actually forms aren’t that difficult when you know which tools to get the job done— since there are a plethora of resources on the internets , let’s take a closer look at how you can simplify your workflow and use the right libraries and tools to rapidly design and extend your forms. Although this post is not a tutorial it would be wise to use a front end framework that supports responsiveness as there are many of devices out there that support the full web.

Forms UI / UX

If you’re not using Bootstrap then you should be for rapid development and to keep yourself sane when styling form elements for different browsers. Of course not to mention the responsive features that are built in. Alternatively you can try using by Nathan Smith or style your own form elements using CSS or Javascript.

JS Lint in Sublime Text 2

Ahhhh, Javascript. A great language, often misunderstood and misused on the web. You might not have a clue what you’re doing if you’re a beginner because almost everything you type can be interpreted in a way that is completely different than what you intended—that flexibility can also be an somewhat of an advantage.

I ‘m a big fan of JS Lint and as a front end web developer I need a linter to help me validate and maintain my code quality against best practices so I can use the language the way it was intended to use, and maintain form. When it comes to editors I use the popluar Sublime Text 2 as my default editor (as many web developers do these days).  Luckily integrating JS Lint by Crockford in Sublime Text 2 is a breeze.

Just follow the steps below:

Sublime Text 2

  • Obviously, you need to install Sublime Text 2. It’s lightweight, cross platform and performs like an athlete on steroids-blazing fast.
  • Using the console, install Sublime Package Control. Paste in the following commands:

While the package is installing you should see installing [ = ] loader on the bottom left. Then all you have to do is to restart Sublime Text 2.

  • Next. Goto: Projects > Package Control > Install Packages and type in “JS Lint”. You’ll immediately see a list of packages you can install. You’ll also notice that another version js lint with node.js. You may also prefer JS Hint. To get to package control in your Mac: CMD + Shift + P ==> Win, Linux users: try these shortcuts
  • Your last step is to get JS Lint to work after you save any javascript file. Go to Preferences > Package Settings > JSLint > Settings > User Then paste in the following commands:

Now on save you should have your linter below where the console pops up:

Sublime Text 2

If you run into problems with the console you can perform manual steps to install package control. Of course for the curious there is are a slew of packages / plugins out there, so go ahead and enjoy playing around with this lovely text editor.

How Javascript Got it’s Name

Netscape LogoSitting with a friend the other day and I was talking to him about Javascript and how’s it’s become the language of the web. I mentioned it’s use outside of the web in PDF documents and desktop widgets, that it was one of the most popular programming languages (often referred to as the language of amateurs). It’s a fact that virtually every personal computer in the world has at least one JavaScript interpreter installed on it and in active use. Of course that’s because of the technology that’s used in our browsers.

After the aforementioned the first thing he said is that Javascript was a form of Java developed by Sun Microsystems. I tried telling him that it’s actually despite it’s prefix [Java] it’s a completely different programming language and has nothing to do with Java. Java is Java and Javascript (or LiveScript, ECMAScript, MochaScript) was seen in releases of Netscape Navigator 2.

The Wikipedia states it best:

Developed under the name Mocha, LiveScript was the official name for the language when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript[9] when it was deployed in the Netscape browser version 2.0B3.[10]

The change of name from LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized by many as a marketing ploy by Netscape to give JavaScript the cachet of what was then the hot new web programming language. It has also been claimed that the language’s name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun’s Java runtime with its then-dominant browser.

Essentially the renaming came from the Netscape marketing department with no technical basis. Javascript has design errors, but it’s dynamic, Object Orientated and has objects, methods, constructors and supports aggregation and inheritance. Unfortunately it’s a very misunderstood language.

Supercharged Javascript Resources

Super Javascript Resources

Some say the path to mastery requires 10,000 woman hours to achieve. A constant focused learning for days, months and years to finally become a master can be a daunting task. For me the path to mastery starts with the first steps:

  • *Self Inspiration: A willingness to learn through self inspiration and sticking with it. That will automatically equal longevity.
  • Awareness: Awareness of the tools at your fingertips. You just have to look and develop a sense of curiosity.
  • Fundamentals: Understanding basic concepts at their very core. Better yet a deep understanding and knowledge of how things work with the realm of what you want to learn.
  • Practice: Lot’s of practice even when what you feel that everything is going over your head at times. Give your brain time to digest things. If you don’t understand a method or technique make sure you re-visit it after taking a short break.  Don’t give up after seeing the first signs of trouble. Welcome them and cross the dip.

This post is hardly about learning techniques and methods, there are many out there to choose from. Learning begins with taking the first step, instructing yourself and diving in. The above is Part I of useful resources that you’ll find for Javascript including: tools, frameworks, blogs, slides, presentations plugins. I suggest you familiarize yourself with them and add them to your bookmarks if you’re a budding javascript ninja. You can always store them in a session (Chrome, Firefox)  for later reference.

Excellent Learning slides from multiple authors

Good information is where its at. Filtering out that information can be a little time consuming lest you know where to go so I just wanted to share what I thought would be useful to designers out there.

If you check slide # 51 in Object Oriented CSS you will see that you should never specify an element first. This is a practice i didn’t know about. Sometimes learning yourself can lead into bad practices and thats why I like to learn from the pros. Thanks Stubbornella..

Continue reading