I'm quite impressed with the slider that is used with one site - lumosity. [http://www.lumosity.com/app/v5/personalization/attention] and I'm keen to replicate the slider that slides in part of the questions - however is there an elegant way to do this without recourse to jQuery? Ideally I'd like to not use JQuery and employ a much simpler way of doing things - can anyone recommend a workaround?
I'm using Django for the serving, so I'm trying to keep my pages as simple as possible. I know I could use JQuery, but is there another way to do it?
I.e.
Native within Django?
Not using jQuery?
3rd party Django add-ons that would work with Google apps.
The site is here:
http://www.lumosity.com/app/v5/personalization/attention
and the effect occurs when you click "Next"
You can do animation purely with CSS, but you would still have to trigger the animation you want client-side, unless you're doing something on page load, or another event that can be triggered automatically.
Django, being Python code running on the server-side, doesn't have a way to interact with client-side code, unless you're making a request, be it a GET, POST, PUT, etc, via an Ajax call.
Nothing says you have to leverage jQuery. You could do all the same functionality using vanilla JavaScript. However, jQuery and its ecosystem of plugins, can give you a huge productivity boost, and when loaded from a CDN, is going to add a negligible amount of weight to your view/site.
Related
Relatively new to WordPress development. I am creating a new custom theme from scratch and would really like to just write vanilla javaScript without slowing things down with all the bloat of jQuery. I was thinking I could just simply dequeue jQuery.
Would this break anything behind the scenes for WordPress to function or is there no dependency?
jQuery is unlikely to slow you down as it's simply a bunch of optimized DOM selectors/DOM methods/utility functions.
You should be able to proceed with Vanilla JS unless any plugin or library you are using depend on it.
Yes, in theory jQuery will add to the download, but not as much as you think. jQuery gets loaded once if you set cache properly, all following pageloadfs, jQuery gets laoded from cache. If you use a CDN like Google's, big chances that your visitor already has it cached because they loaded it on another page. The parts of jQuery which you don't use, don't activate, they're smart like that.
Also, jQuery fixes some cross browser behaviour which you don't need to worry about and it offers a lot of functionality makes things a whole lot simpler, allowing you to focus on more interesting stuff.
TL;DR: jQuery will save you a much time building code, with(imo) a very minor cost. I do recommend using native JS when relevant, e.g. when you want a href of a clicked anchor: this.href.
Another way is to use the WP-JSON API plugin (comes with WP since 3.7 i think) and build your WP-site as a SPA using React/Vue/Angular/Whatever.
If you choose to go that route you wont have any bloat caused by anything but yourself. Always test your code. I personally like Vue.js, proper open-source framework, works like a charm for WP-development
Check this link out: https://snipcart.com/blog/reactjs-wordpress-rest-api-example
I see many websites today displaying information in divs that a user can choose to hide with onClick.
I'm assuming that upon click they set a cookie in the users browser that stops the message from showing again (at least whilst the cookie is set).
I would like to know what the quickest, most efficient way of doing this is. I haven't included the jquery framework on my site and am undecided in whether I need it or not.
Is jQuery the best approach or is there a more lightweight way of doing it? Does jQuery majorly effect page speeds??
Already been answered here -> jQuery Toggle Cookie Support
I use jQuery on all my web development projects - its easy of use and small amount of code (required to be written) far out weighs any disadvantages (not that i can think of any!!)
You dont even have to host jQuery if you dont want to - let someone else (google) host it for you ... this article is a couple of years (2008) old but still VERY relevant -> http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
jQuery may not be the best thing, but it's the quickest for this I think. It has some nice Ajax functions, you could call to set cookies with PHP for example.
That depends a lot on
How likely are you to make use of other jQuery library features such as selectors, ajax, animation etc ?
Are you willing to sacrifice time dealing with cross browser issues writing your own javascript to get and set the cookies ? With jQuery you could use a plugin which makes it a little easier to deal with.
If you do decide to go with jQuery then your visitors browser will cache the external javascript files for subsequent requests so subsequent page load times are mitigated.
At work I have been thrown in the deep end. A customer required some functionality on the web and one of our devs knocked together an ASP.Net webforms project.
When I started, because of constraints I got handed this project. I am not a web dev (I've dabbled) but because of the work I have put into the project, the customer is now looking for more functionality to be built into the web solution.
I would like to take a look at MVC (on my own time). With a view of converting the project to it. I come from a Xaml background so MVx jives with me.
I seem to have most of the basic theory nailed down except for one thing. What is the best way to use JQuery on the view?
Should the controller just pass back semantic data and the view (via JQuery) makes it pretty / unstatic (with help from JQuery UI).
I am confused but from what I can gather is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?
jQuery (and JavaScript in general) can be used to enhance the behaviour of a page. I say enhance, because it should basically work without JavaScript. About 2% of users do not have JavaScript enabled.
CSS should be used to enhance the presentation (or styling) of a page.
The HTML itself is effectively a vector for your raw data which also provides a semantic context. For example, data in a p tag means that that data is a paragraph. Browsers have CSS defined for HTML elements so that by default, the raw data with a semantic context will look vaguely sensible.
So, with regards to "is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?":
Theming should be done using CSS, as it is presentation. The theming you get from the jQuery UI library just gives you some CSS, which is fine.
Hiding / showing content based on events, popups and validation should be done server-side, but JavaScript can be used as well to enhance the behavioural experience.
Pretty much exactly as you said, the controller should pass data to the view which should be rendered using HTML and structured using CSS.
You can then use jQuery to add validation/dynamic effects/ajax etc.
I think you should see Javascript more like an addon to mock things up. For example:
You've got a serverside validation, but you don't want to reload the whole page all the time, then the javascript is good, but it's an addon, because when you don't have a serverside security, someone who hasn't got javascript turned on, or simply doesn't have it, is going to bypass your security easily.
Jquery in this case, is to make those tasks easier to implement.
I know in ASP.net the hiding of controls and the form submits are standard javascript. But it isn't good practice to do this.
Implementing it in MVC is easy as you just need to put it in the scripts map and then load it with a method in your cshtml page.
For more information about how to build your webpage for alot of browsers, i would recommend you searching after progressive enhancement.
i have some web based application that creates a zip file when user asks for it. and it takes around 5 sec of time which is uncertain.. so i want to show him a loading sceen which should disable my main screen for the time being and show loading oo processing animation something..
i am using jsp servlets
Update: i dont want to use jQuery
Edit: implemented using jQuery but want to do the same without it
thanks.
Use jQuery to lock browser screen and show loading process. You could use ajax to make requests and receive responses asynchronously.
Why use jQuery?
It uses KISS principle - Keep It Simple Stupid
It has very good documentation and tutorials
The community is very active, helpful, and warm
The core file’s packed size is small
It deploys almost use-at-will approach
It has strong logic and workflow and is easily extensible
Since you do not want to use jQuery you have to deal with javascript basics like manipulating the DOM.
Basic ajax tutorial:
http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html
http://www.ibm.com/developerworks/web/library/wa-ajaxintro2/
http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/
This tutorials are on DOM manipulation:
http://www.ibm.com/developerworks/web/library/wa-ajaxintro4/
http://www.ibm.com/developerworks/web/library/wa-ajaxintro5/
http://www.ibm.com/developerworks/web/library/wa-ajaxintro6/
before i start of with anything i know that jQuery and Ajax are the JS frameworks and it is nothing but JavaScript itself.
I started to learn Javascript few days ago, and then i realized the need to learn the AJAX and then suddenly i felt jQuery will be the better solution, heck i am confused here, i cannot go three at a time nor do i want to master all the three.
i am a web designer, i know, HTML, CSS, PHP and MySQL, i started to learn JavaScript on the purpose of learning the client side validations or some sort of animations for the website, i need the suggestion from the web gurus, i really don't want to get into the complex java script programming right now, all i want is the simple solution for performing various tasks like validation, and animation for my websites. is jQuery feasible solution for my problem? can i learn jQuery without much prior experience in Javascript. ?
JavaScript is a programming language.
Ajax is a thing you can do with that language.
jQuery is a library that does some heavy lifting in that language for you (including some things relating to Ajax)
You can't choose between them, it doesn't make sense.
is jQuery feasible solution for my problem?
Yes
can i learn jQuery without much prior experience in Javascript. ?
Yes, but you should get a decent understanding of JavaScript and DOM so you know what the library is trying to achieve. Otherwise you are poking around in the dark and won't produce as good results.
It is also very wise to understand progressive enhancement.
Normally I don't say this, but a better solution for you would be to look at jQuery. It is a framework written in JavaScript to make various tasks simpler and cross-browser. AJAX is nothing but just a function - XMLHttpRequest.
Since you don't want to delve deeper into the JavaScript language, the list of existing plugins available for jQuery will be helpful for you.
To understand where things stand in the spectrum
JavaScript is the language
AJAX or XMLHttpRequest is a function available in JavaScript.
jQuery is a framework written in JavaScript to simplify things
Firstly, JQuery is a AJAX library. AJAX is doing the communication manually on a lower level where as JQuery wraps in a higher level library.
Having done not much JQuery myself, I'm not entirely sure but I think you can achieve validation (and maybe animation) quicker by using inbuilt systems from JQuery, the alternative is to write it from scratch in javascript.
Although from the sounds of it if you want pure clientside animation or clientside validation there should be no need to use AJAX or JQuery. I'm not too certain about other libraries you could use for quick development.
My advice would be to learn javascript and keep an eye on whether any parts of JQuery can do exactly what you want it to do.
For example :
http://www.webreference.com/programming/javascript/jquery/form_validation/
Show's you how use JQuery to validate inputs in a rule based system (It looks almost like an extension of CSS)