I need advice. I can understand asp.net mvc/c#, but I feel uncomfortable when I am working with html-css, javascript, jQuery. I can not understand how to mix It all. Can you give some good advice? possible good articles, examples.
I would recommend you starting with the jquery documentation which contains many useful tutorials and examples. If you are saying that you are comfortable with ASP.NET MVC then you already know the markup that is being generated by the different helpers and so applying jquery to them unobtrusively in a separate javascript file is really simple and the same as if you were using some other server side framework. Just try to make an abstraction of the server side framework when working with jquery. Think of it in terms of static HTML markup that you are applying some dynamic actions to.
The following two topics are really important to learn as you will probably be using them most during application development:
DOM manipulation
AJAX
There have been some efforts from the part of Microsoft to abstract javascript into some HTML helpers (known as the MicrosoftAjax framework) so that the developer shouldn't need to know javascript or jquery in order to use them and IMHO this is a disaster. It is leading to mixing markup and javascript and the developer loosing track of what is happening with his application and not knowing why it doesn't work, simply because he learned some leaky abstractions without understanding the fundamental concepts. So if I had an advice to give you is to download FireBug and start practicing jquery with some simple HTML markup.
By the way jsfiddle.net is a great site allowing you to very quickly start creating mockups with jquery, HTML and CSS.
Regarding how to mix it all you could say that html and css is only connected to your views and that javascript/jQuery could be connected to both your views and your controllers (if you use AJAX).
W3schools.com has nice html and css intros:
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/css/css_intro.asp
practice and work more with the technologies, if you have gotten grasp on asp.net/c#/mvc you should have no problem with the other things as well; start reading blogs and books too
Only one way - practice. Practice with books and with mentor is much better.
Related
I have a pretty good understanding of HTML and CSS (including Bootstrap), I feel I'm ready to have some user interaction, and adding dynamic content to my html pages.
My question is, where do I start to learn to achieve this?
For example, what languages do I need to learn to dynamically add news articles to a specific webpage? I can obviously include articles in the code (using a mixture of heading and paragraph elements), but obviously that would require a redeployment of code every time a change is made.
Any help and/or direction of helpful sites would be very grateful.
The basic language of client-side interaction is JavaScript. Definitely start with native JavaScript, as in just the language itself.
After that, you have a lot of frameworks to choose from that use JS like JQuery and AngularJS to name the two that seem most relevant to what you want to achieve. Each have their quirks, but all are written in JS or EcmaScript so after obtaining a foundation in JS, its just a matter of learning the framework rather than syntax.
I advise you to learn with online demo or courses. You can make a lot of things with this language but he's free so you must avoid learning to use it incorrectly.
W3School
CodeAcademy
Article about learn JS
JS Frameworks
I have learned and can read/write code in JavaScript. I am a backend engineer by profession and want to learn how to build websites. I have gone to the point where I can build wireframes and start writing basic HTML. I've never succeeded in creating a complete webpage, because they always looked awful midway through.
I've seen many JavaScript frameworks (like Bootstrap, Backbone.js, and others) that one can use to create websites.
Which framework(s), if any, should I use? Which would you recommend I use to start building websites (and why, if applicable)?
I wouldn't recommend you using a JavaScript-framework to build your entire website. I would only recommend JavaScript to enhance your website with cool features.
I'm not sure what type of website we're talking about, but if you're planning on getting traffic from search engines — think twice.
Google aren't that good at reading content embedded in JavaScript. Meaning: your SEO will be terrible if you choose to build the website entirely in JavaScript.
HTML/CSS is easy, man. I'm sure you'll be able to learn that in a one day — tops! You're a backend engineer by profession for gods sake, HTML can't possibly be that hard to get a grasp of :)
I was in your exact shoes not so long ago - I'm a programmer and had no issues picking up the backend programming that is required of websites, but when designing the web page is something I just could not do. I would end up with terrible looking web pages which was very discouraging.
One great way to get around this is use HTML/CSS templates - there are plenty free ones available. Download one you like, then go through the CSS and change as much of it as you need to personalise your site. This process will also give you a great understanding of how CSS works, and how it should be used to design a page.
After doing this a couple of times, you will be confident/able enough to design a webpage from scratch. If not, continue using the templates. No harm in that.
As others have already mentioned, for a powerful, dynamic website you will need a server side language as well. Javascript frameworks like jQuery are nice for the front-end for the website. For the back-end you can try CakePHP, CodeIgniter etc., or just code the back-end from scratch. Doesn't seem that would be a problem for you.
Some sites that provide free HTML/CSS templates:
CSS Creme
FreeTemplatesOnline
Most of them are optimized for 1024x768 which might seem a little outdated for a few. Try tweaking the CSS code to make the template suitable for your purposes - change images, width etc.
You can't exactly build a website using JavaScript. You could, but that would be very inefficient...I recommend going through some HTML tutorials, as you (and the websites you build in the future) will benefit a lot from the fact that you use HTML primarily, and enhance it with JavaScript. After all, JavaScript can't do much in comparison to HTML (since in order to build a site with JavaScript (or my interpretation of what that is), you need to have a basic understanding of HTML).
Unless I misunderstood your question, then that's about it. Frameworks like jQuery can really enhance a page and make it beautiful and, fortunately, much more user-friendly.
You can't create a website (at least a dynamic one) without a server side language. There you can pull from a number of languages.
If you are just a JavaScript fan, then you can use server-side JavaScript code as Node.js. On the client side you can use jQuery and you can have a supporting database like MySQL.
I'm trying to decide what's the best framework for my small web project:
PHP, Django (or some more ligthweight Python libraries), Ruby on Rails? Or something else? (Except ASP.NET and JSP, because I don't like those)
I want to use the latest HTML5 features, no Flash, heavy JS and AJAX, and lots of animations. I would also like to write a custom picture slideshow using CSS3 and JS. I wan't to hand code all the client side myself but I don't know what to use on the server side. I won't need databases or much of the webapplication framework features, only something simple for managing templates and urls and serving AJAX requests.
the best language is the one that you can understand
in my case, asp.net is considered more "enterprise" than php, but I will probably write more bugs, errors, in asp.net comparing to the same code written in php.
so if you know a language, keep use it, any server language can do the same things that the other ones do.
in second place, documentation is fundamental. I use for work a lot of languages, and i think the php's documentation is simply the better one. users contributions in php's docs are really useful.
java's doc is more complicated and schematic but there are a lot of tutorials on the net.
microsoft's msdn is a little painful, but it is not so bad if you have learned how to search infos.
hope this helps.
Almost Everything is Possible with :
PHP
+
jQuery
+
HTML5
+
CSS3
If you feel adventurous you could look at http://nodejs.org/ and http://expressjs.com/
or even http://couchdb.apache.org/, with the latter you could run everything off a JSON and Javascript driven non relational database.
PS. I believe at the beginning of your third paragraph you meant "I want".
I always normally use,
PHP - Easy to learn, easy to work with...
JQuery - Awesome library and easy to learn...
Using HTML5 would also let you draw and animate images with canvas which is also awesome and easy to pick up!
PHP is the best choice. easy to learn, open source and etc. More imporantly you can get many online tutorial as well as you will get answer quickly for your queries
I am a beginner in Ruby on Rails and I want to develop an app with many bells and whistles using Javascript (and jQuery UI).
The bells and whistles like drag and drop, instantly highlighting things when things are selected and movable portlets are important. This can lead me to creating most of the site in Javascript, which I have read is not the best thing.
My question is, what guide do I use so that I know when to use Server-side code (RoR) and when to use Javascript (other than for things that can't be helped).
I could make sure that Javascript is always enabled (or the app won't work), but is that a good idea?
Any help would be greatly appreciated.
The asset pipeline guide will teach you how to include your static assets in your code. As far as when to use javascript vs server side code, you should also look at these posts on unobtrusive javascript.
http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-technique/
http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/
If you follow that paradigm you'll find a good separation between what's done in the server and what's done on the client, where all of the data is generated server side and javascript is used for interactivity.
I recommend you to start with reading asset pipeline guide
I have been a user of jQuery (and some of its minor plugins) for a while. The Javascript code I've developed over the years could be described best as... messy. It used a ton of global variables and functions here and there, didn't use standard ways of organizing the code, nor any design patterns whatsoever.
I am currently building the new version of a website, and I have completed doing the backend with PEAR::MDB2 and Smarty templates. The rest is just homebrew PHP with some classes.
Now I am at the point where I'll add the Javascript layer on top of the website to improve the user-friendliness of some features. (while making sure everything degrades gracefully) I want to write better, cleaner, more organized Javascript than I used to, so I did a little research. I read Stefanov's Object-Oriented Javascript to have a better grasp on some concepts I knew only loosely about (prototypes, constructors, etc.) as well. Now I'm stuck at a point where I wonder which Javascript frameworks I should use, and how to organize it all.
After conducting my research, I understood Cappuccino & Objective-J, and Sproutcore were not what I was looking for. To quote Cappucino's about page:
Cappuccino is not designed for building web sites, or making existing sites more "dynamic". We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks
So there's that. Then I found out about Coffee Script, which is more of a one-to-one "compiler" and wouldn't help me with the actual organization of my code.
I also stumbled on some articles that give guidelines:
Using Inheritance Patterns to Organize Large jQuery Applications
A JavaScript Module Pattern
I also found out about Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. I don't really know what to do of all this... The things I know:
I don't want to invest too much time in learning something too complex, I want to keep things simple and flexible as much as possible (that is why I don't use Symfony on the backend, for example), yet clean and organized.
I want to use jQuery, the question is, what should I use with it? (that is compatible too)
Right now, I'd use jQuery and jQuery Tools and "organize" all that in a simple namespace/object literal with simple properties and methods and also, since the site is localized, I just plan on using the simple vsprintf (as I do on the backend) with key:value pairs loaded from an object literal provided by the backend. JavaScriptMVC seems interesting, but I fear it would bring way too much complexity for a project that is fairly small sized. That is where I need your advice! Thank you very much in advance.
Ok, my attempt at an answer:
There is no 'best' to way to do it. You now know what's there and I think you might have a preference for yourself for what you want. In that case, pick a framework and learn it inside-out. (sorry to burst your bubble, but each framework has a learning curve, some steep, some very easy, but in the end to use it well you have to invest in it. Just do it, you won't be sorry).
You of course have an preference for clean code, so you might take some considerations into account. You also say you have a preference for jQuery, which is fine, but there are some limitations (as also pointed out in the link provided by eskimoblood).
There are some nice lectures / and tutorials with advice on how to structure your code in jQuery:
How to manage large jquery apps
On Large jQuery apps
Essential Javascript and jQuery patterns (free ebook)
Some style guides:
Jquery core UI Styleguide
Google Closure Javascript Style Guide
Tools for checking your code
JSLint
JSHint (a more forgiving/practical fork)
Closure Linter (haven't tried it yet, but intend to)
Standard works (javascript)
Everything by Douglas Crockford
Quirksmode
There might be more.. perhaps more people can contribute, but I also think that you've almost reached the end of what you can learn before getting your hands dirty. Many of these guides are written in a very generic way, but the interesting thing is that javascript is called upon in many specific situations. It might be useful to just post some of the code that you regard as "messy" and we can help you figure out how to do it better. Good luck!
You should watch the video and read the links in this article and then you should ask yourself again if jquery is the right tool. Maybe you will use dojo, that is much better for larger projects or you take a look at backbone and where you can stay with jquery. After all both of them are more "javascriptish" then something like sproutcore, cappuciono or even GWT. And also much easier to understand when you come from jquery.
One framework that is to consider is definitely ReactJS from Facebook. This framework is pretty slick in many ways.
First thing you have to know is that it is a view framework. It can be used server-side to do the pre-rendering of pages, but it really shines on client side. Since it's a view framework, it can be used with backbone or any other "back-front"-end framework.
One of the main point of React is its rapidity. It keeps a virtual DOM in memory and virtualize all the webpages events. So the virtuals event are used to keep events browser agnostics.
The virtual DOM kind of make programming a dynamic site as if you were programming an old static website. You can just shoot the whole HTML to render to the view engine (as if you were "re-rendering" the whole page) and it will manage the DOM operations. It does a diff between the new virtual DOM and the current virtual DOM and only inserts nodes that needs to be inserted. This way you reduce the number of DOM ops and thus increase your render speed by a lot.
A good place to start is this tutorial which shows how to use "Flux" (the web flow designed by Facebook for its site) in order to realize a Todo application!