Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Course Of The Month
6 days, 10 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
JavaScript
119K
Solutions
71
Articles & Videos
41K
Contributors
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
Share tech news, updates, or what's on your mind.
This article discusses how to implement server side field validation and display customized error messages to the client.
0 Comments
Get 15 Days FREE Full-Featured Trial
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Active today
Good article.
Angular JS is one of many options for learning javascript display+controller logic. If someone is trying to learn Angular but is struggling to understand then they might want to try another framework like React, Riot, Ember, Polymer, Vue, or Meteor. I had a really hard time following Angular but had a much easier time learning React, Polymer, and Meteor. Learning at least one js framework will give you an idea of how to work with the others and how to structure larger or more complex applications.
Angular JS is one of many options for learning javascript display+controller logic. If someone is trying to learn Angular but is struggling to understand then they might want to try another framework like React, Riot, Ember, Polymer, Vue, or Meteor. I had a really hard time following Angular but had a much easier time learning React, Polymer, and Meteor. Learning at least one js framework will give you an idea of how to work with the others and how to structure larger or more complex applications.
Well bless your cotton socks, Ryan! Thank goodness someone else can do the jobs I can't fathom. I've been writing websites for clients for 11 years and I like to stick to my lane (writing quality copy). The thought of trying to code/design/build a website does my head in. We all have our strengths, don't we? For me, it's words ... not graphics, not design, not accounting. I know from working with you that your level of service is outstanding so there's no question about you being a "successful web developer"! I enjoyed your post (even if it did make my head spin a bit)!
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to create an extensible mechanism for linked drop downs.
Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to use "screen scrapers" to attack web forms.
Active 1 day ago
it's a great article. I wish I had read it earlier.
Thank you very much Ray Paseur
Thank you very much Ray Paseur
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript and form good habits that can make your life easier in the long run. (Note: examples in this article use jQuery for simplicity.)
Start by writing comments which describe in plain language what you’re trying to do. Outline where you will need variables, functions, and events. You can always add more complexity like loops and data later on. For example after document ready, whenever someone clicks on a specific button, increment a counter on the page.
Half of JavaScript is knowing what you can do, while the other half is knowing when you can do it.
Document ready is not the only trigger. It’s very common to re-run the same function on document.ready, ajaxComplete, and window.resize. Modern JavaScript frameworks may use something like componentReady instead of documentReady. You can also run functions on scroll, click, touch, change, etc.
You will want a technique for running the same function with different options. Parameters facilitate reuse by allowing variables to be passed into a function.
…
Start with Descriptions
Start by writing comments which describe in plain language what you’re trying to do. Outline where you will need variables, functions, and events. You can always add more complexity like loops and data later on. For example after document ready, whenever someone clicks on a specific button, increment a counter on the page.
Learn Events Other than Document Ready
Half of JavaScript is knowing what you can do, while the other half is knowing when you can do it.
Document ready is not the only trigger. It’s very common to re-run the same function on document.ready, ajaxComplete, and window.resize. Modern JavaScript frameworks may use something like componentReady instead of documentReady. You can also run functions on scroll, click, touch, change, etc.
Learn How to Use Parameters
You will want a technique for running the same function with different options. Parameters facilitate reuse by allowing variables to be passed into a function.
Make All Functions Reuseable
…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand.
Self-Executing functions are just one good example that I'll try to demystify here.
Self-Executing functions are just one good example that I'll try to demystify here.
Active 1 day ago
It should be noted that these are often called "IIFEs": Immediately Invoked Function Expressions.
Active 2 days ago
HI käµfm³d,
you're right, thanks!
I've added it to the article.
Cheers!
Alex
you're right, thanks!
I've added it to the article.
Cheers!
Alex
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different display functions to keep the overall setup running more care and control.
However, there is always plenty of room for improvement when getting any kind of Java process running right. There are many things that can be done to make it easier for Java functions to be run the right way.
Â
Don’t Create Unnecessary Objects
First, it is important to ensure that the objects being created through Java are absolutely functional to the success of a website. A website must be designed with an organization that is doesn’t include anything unnecessary. Unnecessary objects can make it harder for a website to operate and load up. Keeping and unnecessary items out will help keep the coding setup shorter and therefore easier to load.
Avoid Wrapper Classes
Wrapper classes can store information on everything within a site and may be too complicated. It can take a long time to load up some of these classes. A primitive class may be used instead as this focuses on values above all else.
Avoid Null Collections
Some arrays, collections and other features may end up being empty. You have to return them as being empty instead of being null. This is to keep the testing process from being hurt by a slow setup that is far…
However, there is always plenty of room for improvement when getting any kind of Java process running right. There are many things that can be done to make it easier for Java functions to be run the right way.
Â
Don’t Create Unnecessary Objects
First, it is important to ensure that the objects being created through Java are absolutely functional to the success of a website. A website must be designed with an organization that is doesn’t include anything unnecessary. Unnecessary objects can make it harder for a website to operate and load up. Keeping and unnecessary items out will help keep the coding setup shorter and therefore easier to load.
Avoid Wrapper Classes
Wrapper classes can store information on everything within a site and may be too complicated. It can take a long time to load up some of these classes. A primitive class may be used instead as this focuses on values above all else.
Avoid Null Collections
Some arrays, collections and other features may end up being empty. You have to return them as being empty instead of being null. This is to keep the testing process from being hurt by a slow setup that is far…
Industry Leaders: We Want Your Opinion!
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
Introduction
JSON is an acronym for JavaScript Object Notation. It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner. Similar in concept to XML, but more efficient and more widely supported, JSON has become the dominant technology for use in AJAX applications, APIs, and other data interchange applications where data structure and data elements must be communicated between applications and web services.
JSON is frequently found in combination with RESTful APIs, where XML has rightly fallen into disuse. This article will examine some of the ways XML and JSON are similar and different, and will show ways of using JSON to our advantage.
Some code examples will show how to create and interpret JSON strings, and detect JSON errors.
A Bit of Test Data
Since the most important thing a programmer can have is a good test case, let's start with some good test data. Here is the information we will use for all of our code examples. This information will represent people, giving their names and ZIP codes. While the example is truly minimalist, it's sufficient to illustrate the principles.
A Bit of Test Data Organization
Both XML and JSON can represent the data structure. Here is how our data will be organized.
The Old School Way: XML
XML, or Extensible Markup Language, is a text-string data transport mechanism. It was popularized in the 1990s when SOAP…
JSON is an acronym for JavaScript Object Notation. It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner. Similar in concept to XML, but more efficient and more widely supported, JSON has become the dominant technology for use in AJAX applications, APIs, and other data interchange applications where data structure and data elements must be communicated between applications and web services.
JSON is frequently found in combination with RESTful APIs, where XML has rightly fallen into disuse. This article will examine some of the ways XML and JSON are similar and different, and will show ways of using JSON to our advantage.
Some code examples will show how to create and interpret JSON strings, and detect JSON errors.
A Bit of Test Data
Since the most important thing a programmer can have is a good test case, let's start with some good test data. Here is the information we will use for all of our code examples. This information will represent people, giving their names and ZIP codes. While the example is truly minimalist, it's sufficient to illustrate the principles.
firstName lastName zipCode
John Doe 20007
Mary Doe 20016
A Bit of Test Data Organization
Both XML and JSON can represent the data structure. Here is how our data will be organized.
People (with a date attribute)
|_ Person
|_firstName
|_lastName
|_zipCode
The Old School Way: XML
XML, or Extensible Markup Language, is a text-string data transport mechanism. It was popularized in the 1990s when SOAP…
Active 2 days ago
Ray,
Great article (as always) :). I just wanted to address the "Using JSON Strings in JavaScript" section of your article.
I'd like to see the distinction between JavaScript and jQuery/AngularJS to show that jQuery & AngularJS are frameworks of the JavaScript language. In otherwords, they are just JavaScript. They do not implement their own version of the ECMA-262 standards. Node.js on the other hand DOES have its own version but being only a server side language, that's a different story.
On another note, JSON in the browser still needs to be decoded from a string to be a useful JavaScript native object. Any data that PHP returns in JSON format will need to be decoded using the JSON.parse() native JavaScript function. jQuery will do this automatically when the getJSON() or ajax() with the dataType set to "json" but vanilla JavaScript will not. For your reference: http://www.w3schools.com/js/js_json.asp
Following on from this, the example you go on to give isn't a string, but a JS object. I'd like to see an example of using the native functions for converting JSON strings to objects as indicated here: http://www.w3schools.com/js/js_json.asp
Great article (as always) :). I just wanted to address the "Using JSON Strings in JavaScript" section of your article.
I'd like to see the distinction between JavaScript and jQuery/AngularJS to show that jQuery & AngularJS are frameworks of the JavaScript language. In otherwords, they are just JavaScript. They do not implement their own version of the ECMA-262 standards. Node.js on the other hand DOES have its own version but being only a server side language, that's a different story.
On another note, JSON in the browser still needs to be decoded from a string to be a useful JavaScript native object. Any data that PHP returns in JSON format will need to be decoded using the JSON.parse() native JavaScript function. jQuery will do this automatically when the getJSON() or ajax() with the dataType set to "json" but vanilla JavaScript will not. For your reference: http://www.w3schools.com/js/js_json.asp
Following on from this, the example you go on to give isn't a string, but a JS object. I'd like to see an example of using the native functions for converting JSON strings to objects as indicated here: http://www.w3schools.com/js/js_json.asp
Active 2 days ago
Hey, Rob. Thanks for your comments. Why not add your clarification examples to the comment thread here, or post a new article about this? Especially if any of my old code and data examples are overtaken by current events... technology is always advancing!
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
We will take a look at the d3.js library for visualizations. I will provide a walkthrough of a short bar graph example as well as introduce you to the d3.js API. We also will explore links of other examples and further information regarding SVG's.
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form. And to your consternation, the browser remembers the error, and offers to autocomplete your future entries by using the typographical error. This is somewhat annoying, and if you're paying attention, you can visually identify the error. You can usually get past this issue by telling the browser to forget your recent history. But have you ever begun typing your password or passphrase into an online form and thought, "Did I get that right?" You can't visually check your work because the browser is showing you a form input field with something like this: ········· The browser is "helpfully" hiding the password from prying eyes by masking the input control field.
This article teaches three ways to allow your clients to show or hide the password fields as they type them into your forms. In my experience, the default behavior that hides the password input is only marginally useful. Most of the time nobody is looking over your shoulder and the real risk of lost passwords does not rest with the human client or the client browser, but with the servers where passwords are stored. We can't change the server's security, but we can choose to make life easier for our (human) clients!
How HTML <input type="password"> Works
HTML defines several different input types for different kinds of input controls…
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form. And to your consternation, the browser remembers the error, and offers to autocomplete your future entries by using the typographical error. This is somewhat annoying, and if you're paying attention, you can visually identify the error. You can usually get past this issue by telling the browser to forget your recent history. But have you ever begun typing your password or passphrase into an online form and thought, "Did I get that right?" You can't visually check your work because the browser is showing you a form input field with something like this: ········· The browser is "helpfully" hiding the password from prying eyes by masking the input control field.
This article teaches three ways to allow your clients to show or hide the password fields as they type them into your forms. In my experience, the default behavior that hides the password input is only marginally useful. Most of the time nobody is looking over your shoulder and the real risk of lost passwords does not rest with the human client or the client browser, but with the servers where passwords are stored. We can't change the server's security, but we can choose to make life easier for our (human) clients!
How HTML <input type="password"> Works
HTML defines several different input types for different kinds of input controls…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX.
The logical flow for the problem should be:
It sounds difficult. What is an "event handler"? In fact, every user action performed on the web page triggers an event. To handle those events, we need to write a Javascript function, and we call these javascript functions "event handlers". To handle the user's selection of an item in drop-down box, we need to capture the onchange event. Here is a sample code:
Â
The above code means that a function named "updateData" would be triggered when user selects an item from this drop down box. Here the variable "this" means the dropdown box itself. Let's see what happens in the "updateData" function:
Â
The logical flow for the problem should be:
- Write an event handler for the first drop down box to get the user's selections.
- Send the user input to the server
- At the server, retrieve the data from the client side and process it; then send the result to client side.
- At the client, use Javascript to parse the server response and update the other drop down box.
Write an event handler for the first drop down box to get the user's selections:
It sounds difficult. What is an "event handler"? In fact, every user action performed on the web page triggers an event. To handle those events, we need to write a Javascript function, and we call these javascript functions "event handlers". To handle the user's selection of an item in drop-down box, we need to capture the onchange event. Here is a sample code:Â
<select id=type name="type" onchange="updateData(this)">
The above code means that a function named "updateData" would be triggered when user selects an item from this drop down box. Here the variable "this" means the dropdown box itself. Let's see what happens in the "updateData" function:
function updateData(dropDownBox)
{
var value=dropDownBox.options[dropDownBox.selectedIndex].value;
if (value!="") //Ensure no empty value is submitted to server side
{
jQuery.post("getResult.php","type="+value,updateNumber);
}
}
Send the user input to the server
The statement:var value=dropDownBox.options[dropDownBox.selectedIndex].value;
Â
jQuery.post("getResult.php","type="+value,updateNumber);
The Challenge
I was developing a new website for a client the other week in WordPress and they asked me if it was possible to track the clicks of the sponsor images they include on their home page. My first port of call was to use the Yoast Google Analytics plugin but for some reason, it didn't work and I wanted finer control of how my events were presented in the Google Analytics (GA) dashboard.So, I was left wondering how difficult it would be to write some JavaScript to dynamically assign the event push to Google Analytics using the onclick event.
This article describes how I solved that and as it's JavaScript, the solution can be used in any website design.
The Solution
The method relies on the addEventListener() method which attaches an event handler to the chosen document element. A good introduction to this method can be found at w3schools:http://www.w3schools.com/j
The syntax for adding the event listener is:
Â
document.addEventListener(event, function, useCapture)
So the starting point of the solution creates the event in the bubbling phase:
if (document.addEventListener)
document.addEventListener('click', callback, false);
else
document.attachEvent('onclick', callback);
Once this is done, whenever a user clicks on the page the function callback will be executed.
So we next need to define what the callback function will do.
The first thing to do is to pass the user's event to the function:
Â
Active today
Hi Jim. I saw that weird hyperlink thing after posting the draft. I didn't put it in there and it appears to be a link to nothing when I checked the source of the page:
<a href="http://" target="_blank">
So, as I don't know how it got there I'm not sure how to delete it but I'll give it a go now.
<a href="http://" target="_blank">
So, as I don't know how it got there I'm not sure how to delete it but I'll give it a go now.
Introduction
Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework). Â
The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least complicated way as possible.
There are also other frameworks that essentially do the same thing in their own way. Find what works for you. React is what Facebook is built on and is very popular. AngularJS has also gained a lot of momentum and worth checking out.
Knockout takes a basic HTML structure and applies logic (written by you) to control the insertion and removal of HTML elements. This keeps the markup simple and straightforward, especially when it comes to repetitive content.
It's incredibly easy with Knockout to create dynamic interactive web pages with simplified markup. I've seen markup get out of control when creating content both from the server side (e.g. using PHP) or via the client side (e.g. using jQuery), making it virtually impossible to troubleshoot issues with layout and styling.Â
I come across many questions in the web dev topic areas that are related to issues with the asker's website. Invariably this starts with them being told to fix their markup and validate it through the The World Wide Web Consortium's (W3C) Validation service.  When a site doesn't validate, it is not guaranteed to work on all …
Comment Utility
Really interesting stuff! So many technologies so little time.
A couple of typos you may wish to correct. "It incredibly easy" "know no only".
A couple of typos you may wish to correct. "It incredibly easy" "know no only".
Free Tool: Subnet Calculator
The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Active today
Well, I'm happy. But I've just realized that today is still May: will this article partecipate to the contest for the Blade-Runner HD?
What is Node.js?
Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event driven, which throws a whole new light on the way a server side app performs. As Node.js is the complete package (web HTTP server and server side language), there is dramatically less overhead in implementing it as a webserver when compared with a typical Apache (and PHP) or IIS (with ASP/PHP) installation.Node.js is written in JavaScript, the most common client-side language around. This reduces the learning curve somewhat for most web developers as they understand JavaScript and how to code it.
Â
Why is it Important and what are the Benefits?
Most of the server side languages I’ve used are built on sequential execution models, meaning one task has to finish before another one begins. For instance, PHP (in conjunction with the type of server it is running off e.g. Apache) will spawn a thread for each request made to the server. If that thread needs to get data from a database that takes a while or another request comes in, that thread is locked up and consuming resources. For a data intensive app with many concurrent connections, that could severly impede the server’s performance.Node.js is single threaded (yes only one thread!) and is beneficial in applications where frequent blocking I/O requests…
Introduction
Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this tutorial, I have to assume that you understand basic statistics and how to interpret the data shown in the charts outlined by this tutorial. Chart.js offers the following types of Charts: Line, Bar, Radar, Polar Area, Pie and Doughnut. It is possible to create your own types of charts but one step at a time. These are the types we'll be working with in this tutorial.Â
So what do you need to do to get started?
Bookmark the documentation! http://www.chartjs.org/docEither use a Content Delivery Network (CDN) OR Download the ZIP package and include it with the other files of your website.
I personally recommend to use a CDNÂ via this script tag (version 1.0.2)
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
Extract all the files from the ZIP, however the ONLY file needed is the Chart.min.js, and include it in the relative section of your site:Â <script src="/relative/path/to/Chart.min.js"></script>
Add jQuery
While we're at it, let's add jQuery to your page:<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Note: Assumed Knowledge
To implement the bookmarklets you will need to have some basic HTML knowledge. However, if you can't work out an action you'd like to perform, post your request below or in a question on the EE site and I or another Expert will do their best to code the required bookmarklet for you.It should also be noted that a caveat to this approach is that the JavaScript at some point will change as the site evolves so any bookmarkets mentioned in this article are subject to change :)
Â
Bookmarklets
Bookmarklets are very useful and an under utilised function when it comes to browsing the web. A bookmarklet is a bookmark that runs JavaScript on the page you are reading, whereas a bookmark as you may know it takes you to a URL.I recently saw this article by Joe Winograd that got me thinking about what it would mean to Experts and askers on the EE site. After talking with the EE Moderator eenookami who contacted me about expanding on this type of capability, I thought I would express here just what this kind can do for you when on the EE site.
Â
JavaScript &Â jQuery
To begin with, the EE site utilises JavaScript to capture and perform actions throughout the site. When you click on a button, perform a search, post a comment etc JavaScript is executed. Essentially any action you perform on the site is controlled via JavaScript…
In Q3 of last year, Experts Exchange introduced a new Messaging System, allowing any member to communicate directly with other members.
During an especially long thread with a member, I wanted to go back to previous messages in the exchange to refresh my memory on an issue. However, the Message System doesn't have a Search function that allows you to search the contents of all messages in a thread. But then it occurred to me that I could take advantage of the search feature in my browser, Firefox (Edit>Find or Ctrl-F). However, to do that, all of the messages would have to be expanded by clicking the plus sign next to each one:
That's very painful in a long thread! So I submitted an enhancement request entitled Need the ability to expand/collapse all messages in a thread in the Messaging System testing project. An EE Administrator, eenookami, replied to my request with a fantastic work-around — JavaScript code to expand all messages in a thread, as well as JavaScript code to collapse all of them.
In the spirit of giving credit where credit is due, all of the credit goes to eenookami for this solution. My only minor contributions are taking the time to write the article in order to share the solution with other members of the EE community and adding an explanation of how to place the Expand All and Collapse All items on the Firefox Bookmarks Toolbar…
During an especially long thread with a member, I wanted to go back to previous messages in the exchange to refresh my memory on an issue. However, the Message System doesn't have a Search function that allows you to search the contents of all messages in a thread. But then it occurred to me that I could take advantage of the search feature in my browser, Firefox (Edit>Find or Ctrl-F). However, to do that, all of the messages would have to be expanded by clicking the plus sign next to each one:
That's very painful in a long thread! So I submitted an enhancement request entitled Need the ability to expand/collapse all messages in a thread in the Messaging System testing project. An EE Administrator, eenookami, replied to my request with a fantastic work-around — JavaScript code to expand all messages in a thread, as well as JavaScript code to collapse all of them.In the spirit of giving credit where credit is due, all of the credit goes to eenookami for this solution. My only minor contributions are taking the time to write the article in order to share the solution with other members of the EE community and adding an explanation of how to place the Expand All and Collapse All items on the Firefox Bookmarks Toolbar…
Active today
Great Article Joe and thanks for giving me kudos however no one would know about it without taking it a step further with this article contribution.
For those interested, it is called a bookmarklet and it will work it all browsers. For those adventurous ones, you can write your own bookmarklets to do anything on the site you would otherwise do with a click or a keypress on your keyboard. I'll leave the examples for your imagination...
The bug report that started this is: http://support.experts-exchange.com/customer/portal/articles/1162518
Cheers,
eenookami
For those interested, it is called a bookmarklet and it will work it all browsers. For those adventurous ones, you can write your own bookmarklets to do anything on the site you would otherwise do with a click or a keypress on your keyboard. I'll leave the examples for your imagination...
The bug report that started this is: http://support.experts-exchange.com/customer/portal/articles/1162518
Cheers,
eenookami
Active today
Hi eenookami,
Thanks for the compliment and the Helpful Vote — I appreciate both! Additional thanks for the further explanation of bookmarklet — very interesting!
Btw, the link you posted for the bug report that started this does not seem to be right, but it gave me the idea to include that link in the article, which I will do in a moment. Regards, Joe
Thanks for the compliment and the Helpful Vote — I appreciate both! Additional thanks for the further explanation of bookmarklet — very interesting!
Btw, the link you posted for the bug report that started this does not seem to be right, but it gave me the idea to include that link in the article, which I will do in a moment. Regards, Joe
This is a quick introduction to working with Grunt.
What is Grunt?
Grunt is a tool that is used to automate certain tasks for a developer, such as CSS file concatenation, minimizing images and unit testing. These tasks have traditionally been handled by developers in order to ensure a website's or application’s performance. With tools like Grunt we can automate these processes and focus on more important tasks when building software.
Prerequisite:
You will need a basic knowledge of JavaScript. You will also need to be familiar with your operating system’s command prompt. Understanding of how to navigate file structure and perform basic tasks is important to using Grunt.
How to get started?
What is Grunt?
Grunt is a tool that is used to automate certain tasks for a developer, such as CSS file concatenation, minimizing images and unit testing. These tasks have traditionally been handled by developers in order to ensure a website's or application’s performance. With tools like Grunt we can automate these processes and focus on more important tasks when building software.
Prerequisite:
You will need a basic knowledge of JavaScript. You will also need to be familiar with your operating system’s command prompt. Understanding of how to navigate file structure and perform basic tasks is important to using Grunt.
How to get started?
- In order to get started with your own handy-dandy automation tool, go to http://nodejs.org/ and download the latest version of Nodejs.
- Once Node has finished installing on your machine, open your computer's 'command prompt' and type in 'npm install –g grunt-cli'. This command tells Node Package Manager (npm) to globally install (-g) Grunt's (grunt) Command Line Interface (-cli). This is basically a fancy way of telling your machine that we would like to start using Grunt.
- After you’ve installed the Grunt CLI globally, go to http://gruntjs.com/plugins
and choose a plugin that you would like to use inside of a project. For this tutorial I will be using the plugin "uglify" at https://www.npmjs.org/pack age/grunt- contrib-ug lify
JavaScript
119K
Solutions
71
Articles & Videos
41K
Contributors
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
Top Experts In
JavaScript
-
1
Huseyin KAHRAMAN63,132 points -
2
Julian Hansen52,938 points -
3
Leonidas Dosas28,132 points -
4
Ray Paseur16,289 points -
5
Bill Prew8,800 points -
6
zephyr_hex (Megan)5,000 points -
7
Zvonko4,800 points -
8
Hamidreza Vakilian4,000 points -
9
Big Monty3,000 points -
10
it_saige3,000 points -
11
lenamtl2,800 points -
12
Slick8122,400 points -
13
Alexandre Simões2,154 points -
14
dpearson2,000 points -
15
ResQTek Nancy2,000 points -
16
Shaun Kline2,000 points -
17
Chris Stanyon2,000 points -
18
Miguel Oz2,000 points -
19
Adam Brown2,000 points -
20
Scott Fell, EE MVE2,000 points -
21
Gregg2,000 points -
22
M Zahid2,000 points -
23
Dorababu M2,000 points -
24
Rgonzo19711,200 points -
25
DanRollins1,101 points