 
Following on from this post https://stackoverflow.com/questions/4747184/perform-client-side-validation-for-custom-attribute/4782235#4782235

I am trying to get my head around how to do this, passing additional parameters to the client-side script

As I understand it so far to implement custom validation with MVC 3 the following is required 

Create a custom validation attribute
------------------------------------
Based on ValidationAttribute and implementing IClientValidatable. I have also see some examples deriving from ModelValidator, which seems to implement the functionality of both ValidationAttribute and IClientValidatable. So this is my first point of confusion as to what the diffirences are or whether ModelValidator was used in MVC 2 but is now deprecated or what ?

An instance of ModelClientValidationRule must be returned from GetClientValidationRules() to specify details such as the error message, ValidationType (which I understand to be the name of the Javascript function that will perform the client-side validation) and any additional custom parameters that the attribute may have, and that need to be passed to the Javascript validation.

I assume that the runtime (not sure which part of it) then use the `ModelClientValidationRule` to generate html attribute in the tag elements as follows:

    data-val=&quot;true&quot;  (to indicate that the element requires validation)
    data-val-[ValidationType]=[ErrorMessage]
    data-val-[ValidationType].[ValidationParameters(n).Key]=[ValidationParameters(n).Value]

Implement the client-side validation logic
------------------------------------------
A Javascript function must be created and added to jQuery.validators with jQuery.validators.addmethod() so that JQuery is aware of it when it need to be executed. Something like:

    jQuery.validator.addMethod(
        &#39;greaterThan&#39;, 
        function (value, element, params) {
            /.../
           return /* true or false   */ ; 
        },
        &#39;&#39;
    ); 

My question here is whether the signature &#39;function (value, element, params)&#39; is standard for methods that will handle validation and I assume it will be called by some jQuery functionality at the appropriate time such as before a form is submitted or when an element looses fuces or on keyUp events. I just don&#39;t undertand how you can controll this i.e. choose which event is appropriete for yout custom validation.

Implement an unobtrusive adapter
--------------------------------
This translates unobtrusive attributes to; something I am not very clear on, but assume it to be a jQuery Rule, but I am not clear on how those work. Something like

    jQuery.validator.unobtrusive.adapters.add(
        &#39;futuredate&#39;, 
        { },
        function (options) {
            options.rules[&#39;greaterThan&#39;] = true;
            options.messages[&#39;greaterThan&#39;] = options.message;
        }
    ); 

My question here is about &#39;function (options)&#39;. Is this the function that will be called before &#39;function (value, element, params)&#39; and is responsible for extracting the unobtrusive tags into a data structure that can be understood by jQuery.Validation. From the code example it seems to me that options is an object that contains both, the attribute values from the tag (such as options.message) and the jQuery relevant properties it must map to (such as options.messages[&#39;ClientSideValidationFunctionName&#39;]. If so how are custom parameters retrieved and mapped.

I hope I have not added any additional confusion.

ASP.NET MVC 3 client-side validation with parameters

What is it best to handle pagination? Server side or doing it dynamically using javascript?

I&#39;m working on a project which is heavy on the ajax and pulling in data dynamically, so I&#39;ve been working on a javascript pagination system that uses the dom - but I&#39;m starting to think it would be better to handle it all server side.

What are everyone&#39;s thoughts?

Pagination: Server Side or Client Side?

**Is it worth worrying about CSS rendering performance?** Or should we just not worry about efficiency at all with CSS and just focus on writing elegant or maintainable CSS instead?

This question is intended to be a useful resource for front-end developers on which parts of CSS can actually have a significant impact on device performance, and which devices / browsers or engines may be affected. This is *not* a question about how to write elegant or maintainable CSS, it&#39;s purely about performance (although hopefully what&#39;s written here can inform more general articles on best-practice).

Existing evidence
==

[Google][7] and [Mozilla][8] have written guidelines on writing efficient CSS and [CSSLint&#39;s set of rules][9] includes:

&gt; Avoid selectors that look like regular expressions
&gt; ..
&gt; don&#39;t use the complex equality operators to avoid performance penalties

but none of them provide any evidence (that I could find) of the impact these have.

A [css-tricks.com article on efficient CSS][10] argues (after outlining a load of efficiency best practices) that we should `not .. sacrifice semantics or maintainability for efficient CSS` these days.

A [perfection kills blog post][11] suggested that `border-radius` and `box-shadow` rendered orders of magnitude slower than simpler CSS rules. This was hugely significant in Opera&#39;s engine, but insignificant in Webkit. Further, a [smashing magazine CSS benchmark][12] found that rendering time for CSS3 display rules was insignificant and significantly faster than rendering the equivalent effect using images.

Know your mobile [tested various mobile browsers][13] and found that they all rendered CSS3 equally insignificantly fast (in 12ms) but it looks like they did the tests on a PC, so we can&#39;t infer anything about how hand-held devices perform with CSS3 in general.

There [are][1] [many][1] [articles][2] on the internet on how to write efficient CSS. However, I have yet to find any comprehensive evidence that badly considered CSS actually has a *significant* impact on the rendering time or snappiness of a site.

Background
==

I offered bounty for this question to try to use the community power of SO to create a useful well-researched resource.


  [1]: https://developers.google.com/speed/docs/best-practices/rendering
  [2]: https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&amp;redirectslug=Writing_Efficient_CSS
  [4]: http://border-radius.com/
  [5]: http://www.css3.info/preview/multiple-backgrounds/
  [6]: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&amp;redirectslug=CSS/CSS_transitions
  [7]: https://developers.google.com/speed/docs/best-practices/rendering
  [8]: https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&amp;redirectslug=Writing_Efficient_CSS
  [9]: http://csslint.net/about.html
  [10]: http://css-tricks.com/efficiently-rendering-css/
  [11]: http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/#summary
  [12]: http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/
  [13]: http://www.knowyourmobile.com/features/1464976/google_chrome_for_ios_vs_safari_an_indepth_speed_and_feature_test.html

Which CSS selectors or rules can significantly affect front-end layout / rendering performance in the real world?

I am trying to pass request headers in an AJAX GET using jQuery. In the following block, &quot;data&quot; automatically passes the values in the querystring. Is there a way to pass that data in the request header instead ?

    $.ajax({
             url: &quot;http://localhost/PlatformPortal/Buyers/Account/SignIn&quot;,
             data: { signature: authHeader },
             type: &quot;GET&quot;,
             success: function() { alert(&#39;Success!&#39; + authHeader); }
          });

The following didn&#39;t work either 

    $.ajax({
             url: &quot;http://localhost/PlatformPortal/Buyers/Account/SignIn&quot;,
             beforeSend: { signature: authHeader },
             async: false,                    
             type: &quot;GET&quot;,
                        success: function() { alert(&#39;Success!&#39; + authHeader); }
          });

Pass request headers in a jQuery AJAX GET call

I wondered if anyone had experience in handling JavaScript errors globally and send them from the client browser to a server. 

I think my point is quite clear, I want to know every exception, error, compilation error, etc. that happens on the client side and send them to the server to report them.

I’m mainly using MooTools and `head.js` (for the JS side) and Django for the server side.

Catch all JavaScript errors and send them to server

Is there any way I can create a text file on the client side and prompt the user to download it, without any interaction with the server?
I know I can&#39;t write directly to their machine (security and all), but can I create and prompt them to save it?

How to create a file in memory for user to download, but not through server?

I&#39;ve read about SPA and it advantages. I find most of them unconvincing. There are 3 advantages that arouse my doubts.

***Question:*** *Can you act as advocate of SPA and prove that I am wrong about first three statements?*

                                  === ADVANTAGES ===

***1. SPA is extremely good for very responsive sites:***
&gt; Server-side rendering is hard to implement for all the intermediate
&gt; states - small view states do not map well to URLs.
&gt; 
&gt; Single page apps are distinguished by their ability to redraw any part
&gt; of the UI without requiring a server roundtrip to retrieve HTML. This
&gt; is achieved by separating the data from the presentation of data by
&gt; having a model layer that handles data and a view layer that reads
&gt; from the models.

*What is wrong with holding a model layer for non-SPA? Does SPA the only compatible architecture with MVC on client side?*

***2. With SPA we don&#39;t need to use extra queries to the server to download pages.***

*Hah, and how many pages user can download during visiting your site? Two, three? Instead there appear another security problems and you need to separate your login page, admin page etc into separate pages. In turn it conflicts with SPA architecture.*

***3.May be any other advantages? Don&#39;t hear about any else..***


                                === DISADVANTAGES ===

 1. Client must enable javascript.
 2. Only one entry point to the site.
 3. Security.


***P.S.*** I&#39;ve worked on SPA and non-SPA projects. And I&#39;m asking those questions because I need to deepen my understanding. No mean to harm SPA supporters. Don&#39;t ask me to read a bit more about SPA. I just want to hear your considerations about that.


Single Page Application: advantages and disadvantages

When I want to put a login system in place, I always compare the MD5 of the given password with its value in the users table on the server side.

However, a friend of mine told me that a &quot;clear&quot; password could be sniffed by a network software.

So my question is: is it a good idea to hash the password on the client side? Is it better than hashing it on the server side?


Is it worth hashing passwords on the client side

I am looking for a way to resize an image client-side with JavaScript (really resize, not just change width and height).  
I know it&#39;s possible to do it in Flash but I would like to avoid it if possible. 

Is there any open source algorithm somewhere on the web?

Image resizing client-side with JavaScript before upload to the server

I know there are lot of questions of this nature but I need to do this using JavaScript. I am using `Dojo 1.8` and have all the attribute info in array, which looks like this:

    [[&quot;name1&quot;, &quot;city_name1&quot;, ...][&quot;name2&quot;, &quot;city_name2&quot;, ...]]

Any idea how I can export this to `CSV` on the client side?

How to export JavaScript array info to csv (on client side)?

In the context of [this post][1] by Igor Minar, lead of AngularJS: 

&gt; **MVC vs MVVM vs MVP**. What a controversial topic that many developers
&gt; can spend hours and hours debating and arguing about.
&gt; 
&gt; For several years AngularJS was closer to MVC (or rather one of its
&gt; client-side variants), but over time and thanks to many refactorings
&gt; and api improvements, it&#39;s now closer to **MVVM** – the ***$scope*** object
&gt; could be considered the **ViewModel** that is being decorated by a
&gt; function that we call a **Controller**.
&gt;
&gt; Being able to categorize a framework and put it into one of the MV* buckets has some advantages.
&gt; It can help developers get more comfortable with its apis by making it
&gt; easier to create a mental model that represents the application that
&gt; is being built with the framework. It can also help to establish
&gt; terminology that is used by developers.
&gt; 
&gt; Having said, I&#39;d rather see developers build kick-ass apps that are
&gt; well-designed and follow separation of concerns, than see them waste
&gt; time arguing about MV* nonsense. And for this reason, I hereby declare
&gt; **AngularJS** to be **MVW framework - Model-View-Whatever**. Where Whatever
&gt; stands for &quot;**whatever works for you**&quot;.
&gt; 
&gt; Angular gives you a lot of flexibility to nicely separate presentation
&gt; logic from business logic and presentation state. Please use it fuel
&gt; your productivity and application maintainability rather than heated
&gt; discussions about things that at the end of the day don&#39;t matter that
&gt; much.



Are there any recommendations or guidelines for implementing AngularJS MVW (Model-View-Whatever) design pattern in client-side applications?

  [1]: https://plus.google.com/110323587230527980117/posts/aZNVhj355G2

AngularJS: Understanding design pattern

I&#39;m using react and react-router for my application on the client side. I can&#39;t seem to figure out how to get the following query parameters from a url like:

    http://xmen.database/search#/?status=APPROVED&amp;page=1&amp;limit=20

My routes look like this (the path is totally wrong I know):

    var routes = (
    &lt;Route&gt;
        &lt;DefaultRoute handler={SearchDisplay}/&gt;
        &lt;Route name=&quot;search&quot; path=&quot;?status=:status&amp;page=:page&amp;limit=:limit&quot; handler={SearchDisplay}/&gt;
        &lt;Route name=&quot;xmen&quot; path=&quot;candidate/:accountId&quot; handler={XmenDisplay}/&gt;
    &lt;/Route&gt;
    );

My route is working fine but I&#39;m just not sure how to format the path to get the parameters I want. Appreciate any help on this!

Getting query parameters from react-router hash fragment

I&#39;m a member of a team with more than 20 developers. Each developer works on a separate module (something near 10 modules). In each module we might have at least 50 CRUD forms, which means that we currently have near 500 **add buttons**, **save buttons**, **edit buttons**, etc.

However, because we want to globalized our application, we need to be able to translate texts in our application. For example, everywhere, the word **add** should become **ajouter** for French users.

What we&#39;ve done till now, is that for each view in UI or Presentation Layer, we have a dictionary of key/value pairs of translations. Then while rendering the view, we translate required texts and strings using this dictionary. However, this approach, we&#39;ve come to have something near 500 **add** in 500 dictionaries. This means that we&#39;ve breached DRY principal.

On the other hand, if we centralize common strings, like putting **add** in one place, and ask developers to use it everywhere, we encounter the problem of not being sure if a string is already defined in the centralized dictionary or not.

One other options might be to have no translation dictionary and use online translation services like Google Translate, Bing Translator, etc.

Another problem that we&#39;ve encountered is that some developers under the stress of delivering the project on-time can&#39;t remember the **translation keys**. For example, for the text of the add button, a developer has used **add** while another developer has used **new**, etc.

What is the best practice, or most well-known method for globalization and localization of string resources of an application?

Best practice for localization and globalization of strings and labels

I would like to filter an array of items by using the `map()` function. Here is a code snippet:

    var filteredItems = items.map(function(item)
    {
        if( ...some condition... )
        {
            return item;
        }
    });

The problem is that filtered out items still uses space in the array and I would like to completely wipe them out.

Any idea?

EDIT: Thanks, I forgot about `filter()`, what I wanted is actually a `filter()` then a `map()`.

EDIT2: Thanks for pointing that `map()` and `filter()` are not implemented in all browsers, although my specific code was not intended to run in a browser.

Removing elements with Array.map in JavaScript

This is a little confusing to explain, so bear with me here...

I want to set up a system where a user can send templated emails via my website, except it&#39;s not actually sent using my server - it instead just opens up their own local mail client with an email ready to go. The application would fill out the body of the email with predefined variables, to save the user having to type it themselves. They can then edit the message as desired, should it not exactly suit their purposes.

There&#39;s a number of reasons I want it to go via the user&#39;s local mail client, so getting the server to send the email is not an option: it has to be 100% client-side.

I already have a mostly-working solution running, and I&#39;ll post the details of that as an answer, I&#39;m wondering if there&#39;s any better way?

Sending emails with Javascript

I have this code:

    &lt;script type=&quot;text/javascript&quot;&gt;
        var foo = &#39;bar&#39;;
        &lt;?php
            file_put_contents(&#39;foo.txt&#39;, &#39; + foo + &#39;);
        ?&gt;

        var baz = &lt;?php echo 42; ?&gt;;
        alert(baz);
    &lt;/script&gt;

Why does this not write &quot;bar&quot; into my text file, but alerts &quot;42&quot;?


----------

NB: Earlier revisions of this question were explicitly about PHP on the server and JavaScript on the client. The essential nature of the problem and solutions is the same for *any* pair of languages when one is running on the client and the other on the server (even if they are the same language). Please take this in to account when you see answers talking about specific languages.

What is the difference between client-side and server-side programming?

This gets the value of whatever is selected in my dropdown menu.

    document.getElementById(&#39;newSkill&#39;).value

I cannot however find out what property to go after for the text that&#39;s currently displayed by the drop down menu. I tried &quot;text&quot; then looked at [W3Schools][1] but that didn&#39;t have the answer, does anybody here know?

For those not sure, here&#39;s the HTML for a drop down box.

	&lt;select name=&quot;newSkill&quot; id=&quot;newSkill&quot;&gt;
		&lt;option value=&quot;1&quot;&gt;A skill&lt;/option&gt;
		&lt;option value=&quot;2&quot;&gt;Another skill&lt;/option&gt;
		&lt;option value=&quot;3&quot;&gt;Yet another skill&lt;/option&gt;
	&lt;/select&gt;



  [1]: http://w3schools.com/

Getting the text from a drop-down box

Is there a system/framework in existence which focuses on providing tutorial / help like overlays in the browser?

Example: You have a webapp which requires a certain level of instruction to the user. In this instruction process you wish to &quot;highlight&quot; (e.g. arrow, colour shading, pulsing border, etc) a certain element on the page, with an accompanied message.

This would be a true overlay, so it would function only in absolute positioning, and not interfere with the existing layout.

I&#39;m looking for an existing solution, before I consider rolling my own.

Client-side &quot;Feature Tour&quot; (tutorial/instructional) overlay system?

I am trying out `Blazor` and i do not understand why when changing a `component` after refreshing the browser page it does not update ? Shouldn&#39;t the `client` update itself similar to how `angular` does?

It only refreshes when i restart the `blazor` server.

**Index.cshtml**

    @page &quot;/&quot;
    
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

If i change lets say the text inside the `&lt;h1&gt;` to `Hello people` , i save the project and i refresh the page ( as i am advised in the `Blazor` tutorial) shouldn&#39;t i see `Hello people` ?


Why does page not update after refresh when .cshtml changes

Until now I was mainly using `Struts 2`, `Spring`, `JQuery` technology stack for building web applications. The point is, that mentioned stack uses server side `MVC` pattern.  The main role of web browsers was limited to a request/response cycle (+ client side validation). Data retrieval, business logic, wiring and validation were mainly responsibilities of the server side. 

I have few questions regarding *AngularJS* framework that were inspired by following quotes I&#39;ve read:

----------

From the [*AngularJS tutorial*][1]:

&gt; For Angular apps, we encourage the use of the Model-View-Controller
&gt; (MVC) design pattern to decouple the code and to separate concerns.

From the *[Wikipedia Model–view–controller][2]*:

&gt; Model–View–Controller (MVC) is an architecture that separates the
&gt; representation of information from the user&#39;s interaction with
&gt; it. The model consists of application data and **business rules**,
&gt; and the controller mediates input, converting it to commands for the
&gt; model or view

----------

*AngularJS* uses client side `MVC` pattern. So I guess there is no other option then to include validation logic also to the client side in some way?

**What would be the best way to write a robust AngularJS application? MVC on client side and some kind  of MC (model, controller) on server side?** 

Does that mean, that MODEL and CONTROLLER are in one way duplicated (client/server)?

I know my question is somehow weird, but I think the reason is, that I am somehow acustomed to traditional server side MVC pattern. I am sure there is someone, that have already done same transition.

 


  [1]: http://docs.angularjs.org/tutorial/step_02
  [2]: http://en.wikipedia.org/wiki/Model%E2%80%93View%E2%80%93Controller

AngularJS client MVC pattern?

I&#39;m a little bit confused about this, and I feel slightly stupid asking this question, but I want to understand it.

So, say I&#39;m working with a client side web framework, like Backbone, Angular or Durandal. This framework includes routing.

But I of course still have a server for database stuff, and so on, which also has routing.

My question now is: 

&gt;When to use &quot;client-side routing&quot; or &quot;server-side routing&quot;? 
&gt;
&gt;How is it &quot;decided&quot; whether routing is already performed on the client side or whether the request is first sent to the web server? 

I have a particularly hard time imagining this because the client side could do routing before the server ever gets to know about that request. 

I&#39;d be very thankful if someone could explain how these two routing systems work together.

P.S.: I have not included code samples because I&#39;m not looking for an answer concerning a particular framework, but concerning the routing process in general.

When to use &quot;client-side routing&quot; or &quot;server-side routing&quot;?

If yes are there any frameworks/Tutorials/tips/etc recommended? 

N00b at Python but I have tons of PHP experience and wanted to expand my skill set.

I know Python is great at server side execution, just wanted to know about client side as well.

Can Python be used for client side web development?

I have an upload control for uploading the images to the server, but before uploading I just want to make sure if the images are of correct dimensions. 
Is there anything on client side that can be done with JavaScript?

Is it possible to check dimensions of image before uploading?

OK, been trying things for hours and could use some help. I&#39;m trying to implement a page in MVC 3 that has &quot;back&quot; and &quot;next&quot; buttons. When the back button is clicked I want to disable client-side MVC validation from running so that my action method will run and send the user to the previous logical web page. I&#39;ve tried this:

    &lt;script type=&quot;text/javascript&quot;&gt;
      document.getElementById(&quot;backButton&quot;).disableValidation = true;
    &lt;/script&gt;

and this:

    &lt;input type=&quot;submit&quot; name=&quot;backButton&quot; value=&quot;← Back&quot; 
     title=&quot;Go back to step 1.&quot; disableValidation=&quot;true&quot; /&gt;

But no matter what, the cilent-side validation JavaScript kicks in and won&#39;t let the button do its post-back. I&#39;m thinking that `disableValidation` only works in MVC 2 perhaps, and I&#39;m supposed to be doing something else in MVC 3, but cannot seem to find any examples.

  [1]: http://instagram.com/thevinaychoudhary

All Client Side Solutions on Gang of Coders

Total of 24 Client Side Solutions