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.
Twitter Bootstrap: Easily create all types of forms with this open source framework of goodies at Github. It won’t take you more than 25 minutes to go through the examples and have your rough html prototype ready.
Other Libraries, Frameworks, jQuery Plugins and Useful Resources
Parsely: Form validation without writing any JS code.
Bootstrap gives the option to validate without extra libraries. For example append this snippet right after your input element: pattern=”\w+ \w+.*” title=”Please fill out your first and last name” required
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:
Obviously, you need to install Sublime Text 2. It’s lightweight, cross platform and performs like an athlete on steroids-blazing fast.
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation')
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
// there are others as well, such as white space
// if you don't prefer Crockford's whitespace usage.
// this is to run jslint on save
// debug flag.
Now on save you should have your linter below where the console pops up:
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.
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.
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..