I am attempting to learn JavaScript and find this task to be a bit difficult in some respects. Currently I am looking into event support across the major browsers. As far as events go, there seems to be two general flavors: (1) the Microsoft way, and (2) the standardized way.
I am aware that IE 8 does not support DOM Level 2 Events, but that IE 9 is expected to support DOM Level 3 Events. On the Microsoft side there exists a distinct list of DHTML Events. A description of the event object is also available.
In the standardized way I am clumping together DOM Level 0 support which has no official specification, and DOM Level 2 Events that where written by the W3C. This standardized way is generally followed by all of the major browsers except MSIE, namely: Firefox, Chrome, Safari, and Opera. Each of the standardized browsers have a varying level of documentation around their support of events as indicated by the following links.
DOM Level 0 Events
Gecko DOM Event Handlers
Safari HTML Reference: Supported Attributes
HTML, XHTML, and WML in Opera Presto 2.8
No information for Chrome.
DOM Level 2 Events
W3C DOM Level 2 Specification
Gecko DOM Events (appears to be incomplete)
Other Gecko DOM Events
Gecko DOM Event Object
WebKit Standards Support Targets (implicitly covering Chrome and Safari at a high level)
DOM 2 UI, Mouse & Mutation Events support in Opera Presto 2.8
Is it safe to say that the documentation across the standardized browsers is interoperable? I am aware of the Quirksmode Compatibility Tables in regards to this type of information. However, I hardly find that comforting when a problem is encountered and hope that there that are details I can count on instead. I'd also like to exclude libraries (such as Jquery and such) at this point.
No. There is much variation around key events within browsers, and the big libraries such as jQuery only normalize a bare minimum of it (correctly, in my view). The only way to deal with the inconsistencies is to learn from people who have learned the hard way. The best resource by miles that I've found is this page by Jan Wolter: http://unixpapa.com/js/key.html. Accurate and fairly comprehensive.
Browsers have all sorts of quirks around things like detecting keypresses, etc. Not all of these bugs are obvious, or present in all versions of a browser. I doubt there's a single authoritative source that perfectly describes events even for any one browser, much less all of them. ppk is pretty incredibly comprehensive, but he's shifted his focus to mobile recently.
Anyway, you can probably write something that will mostly work, but these libraries have orders of magnitude more testing than you could possibly do by yourself. If your goal is to learn, then by all means explore and experiment. But don't reinvent the wheel. Whenever I want a standalone solution to a particular application of the DOM (e.g. what mouse button was pressed on a click event) I first look at documentation, and then I look at how the various libraries out there do it.
Most people use http://www.quirksmode.org/ as their main reference
Related
i am unable to understand the difference between the two.
in which situation which one should be used?
any pros cons?
code http://gwt.google.com/samples/Showcase/Showcase.html#!CwStackPanel and for stacklayoutpanel and description looks same
If you read the javadocs, you'll see that StackPanel only works in quirks mode, and StackLayoutPanel only works in standards mode. They are functionally identical, but you need to choose one or the other depending on what mode your application runs on.
I persistently advocate, after understanding quirkiness of GWT Java and
that you need to bear the attitude that you are actually programming in Javascript when programming GWT Java, ...
that the first concept to understand when learning GWT is to understand the purpose and functions of the ProvidesResize/RequiresResize interfaces.
ResizeLayoutPanel inside DisclosurePanel using GWT
GWT or not for enterprise apps
StackLayoutPanel falls into the framework of ProvidesResize/RequiresResize.
If you use non-layoutpanels like StackPanel, you would have to concoct your own resize framework, or at least try to implement these pair of interfaces in them, which could involve scheduling and debouncing actions to provide a pleasant experience to the user.
You can use non-layoutpanels if your UI is simple and does not comprise a complex and deep hierarchy of panels and widgets.
In order to allow the features of layout panels, you would need to place your hosting page on standards mode. Therefore, saying that the difference between layoutpanels and non-layoutpanels is Standards mode is not an accurate picture because you need to know the motivation behind having the ProvidesResize/RequiresResize interfaces.
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Resize
I guess quirks mode is to allow the browser page to operate in the outdated quirky mode where everybody tried to please everybody's quirky individualistic idea of how HTML should behave (where microsoft was about the most belligerent practitioner of HTML quirks).
What is Standards mode:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Standards
By 'web developer' I mean a software developer having a sound
understanding of web fundamentals (HTTP, HTML, CSS, JavaScript and
Ajax).
By 'successful GWT developer' I mean someone who can produce
high quality and polished looking GWT apps in timely fashion.
My department is gearing-up for a project that will require the development of a number of single screen RIA web apps. These will front enterprise server components implemented in Java. Our UI prototype was developed using ExtJS and was successful (in terms of speed of development and producing a professional, polished looking UI that integartes well with a service oriented API implemented using Spring-MVC + Jackson). However, in gearing-up to develop the actual product we have realised that our department's skills profile isn't ideal for ExtJS. We are strong on Java but relatively weak on web developers. The development of the UI prototype demonstrated that you really need fully feldged web developers to get to grips with ExtJS, since they will spend a significant amount of time grappling with CSS and JavaScript issues. As a result, the question has arisen as to whether we might be better off going with GWT (combined with a library that offers a level of polish comparable to ExtJS, such as SmartGWT). Obviously this assumes that GWT is significantly less demanding in terms of web development skills. To what extent would GWT + SmartGWT allow our Java developers to crank out high quality RIAs without them having to acquire anything more than a basic appreciation of the web fundamentals listed above?
If we decide to explore GWT further we'll do another prototype, but in the mean time it would be very interesting to hear the opinions of experienced GWT developers.
My experience is that you can get away with a lot without advanced web skills, but the end result is a pretty bland looking app, but even worse, you'll find yourself struggling to achieve all the dynamic effects you want.
As an example, my app has a DataGrid on the main tab. That could be done easily enough using pure GWT. But then I wanted to put a checkbox under the DataGrid widget that the user could use to select "single line mode", in which the rows are one line each -- any data in cells that would have word-wrapped just disappears at the edge of the cell. Hit the checkbox, and the rows collapse to one line each, then hit it again, and the row heights expand to whatever size is needed to display all the data in the cells. There isn't a method for that. What you have to do is adjust the row style of the DataGrid to add or remove the CSS element "white-space:nowrap;". So you add a ValueChangeHandler to a CheckBox widget (GWT skills) that modifies a CSS style of the DataGrid widget (web skills).
Without web skills, you'll find yourself hitting walls in trying to achieve the look-and-feel (and even dynamic behaviour) you want. Having said that, you can find these sorts of answers easily enough on the web. The key thing to remember is that just because GWT doesn't seem to have a method for something, that maybe it's really a web issue, not a GWT issue, and that you have to remember to think outside of the GWT box to solve your problem (instead of throwing up your hands, blaming GWT for lacking a feature, and hoping something like SmartGWT will solve all your problems).
The fact that every GWT widget has a plethora of methods for setting, adding, and removing styles, and the very rich integration via ClientBundles and UiBinder and the like, means that this was always the intent.
GWT is a very capable framework and can be used to produce great results such as Pictarine, but as the developers of Pictarine indicate:
Another thing that was not obvious to us when we started with GWT was that a java developer needs an intimate knowledge of HTML/CSS if he/she wants to go beyond the basic user interface provided by the GWT widgets.
I'm not quoting this to discourage anyone. Basic interfaces are indeed within reach with GWT without much HTML/CSS knowledge. GWT, however, leans on web languages and so in a non-trivial application familiarity with JavaScript, HTML, and CSS will come handy. Personally, using GWT has been continuously deepening my JS/HTML/CSS skills as I've been searching for ways to enhance my GWT projects, which in the end has been very rewarding.
I am designing a web app from scratch, which would be a fluid-based layout and the same HTML would render on different screens using the adaptive CSS.
I am going to use adaptive CSS (or responsive design) for this.
I was looking to use a framework like SCSS (http://sass-lang.com/) which would improve my code maintenance efforts. I'll have lots of CSS files (and probably some skin based as well)
Since I am using adaptive layout, I am going to use CSS Media Queries for desktop/tablet/mobile CSS. I could not get an idea how well the SCSS would integrate with media queries and overall speaking , how much flexibility will it offer to me.
Please let me know your suggestions if you have used SASS/SCSS and in general, any other suggestions.
SCSS is essentially an extension to CSS, and is useful (with mixins) to void repetition in your code. It also provides a way to group blocks of CSS in semantically meaningful ways and gives you variables to avoid repeating yourself.
If you are using a framework such as Rails, it is no-brainer.
There are also frameworks which focus on layout such as 960 (and its variants), and Blueprint which also adds code for thing like buttons.
The underlying philosophy behind many of these is DRY (don't repeat yourself). One bonus of using an established framework is that many of the browser issues have been ironed out, so you can be sure that it will work cross-browser.
It is true that perhaps the code is not quite a lean as rolling your own, but with careful editing and making sure you minify the result and send it gzipped, this is not a major issue except on the most high traffic sites.
Personally I have objected to using frameworks in the past because of the small amount of additional redundant code, but after 15 years of hacking around browser issues, I now think they are a Good Thing.
Larry Wall said in Programming Perl, "We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris."
Anything that allows more people to use CSS in a repeatable and reliable way, to build on work done by other, and to try out some of the leading edge features has got be a good thing.
Engineering a site with media queries is still a bit leading edge. There are compromises in each approach and you should read up as much as possible before choosing one. Adapt.js is a good alternative if you don't mind javascript.
You may want to look into the HTML5 Boilerplate. This has some useful defaults, and lots of documentation about the HTML and CSS defaults that have been chosen.
Good luck!
I have not used media queries together with SCSS, but I don't think they conflict with each other. I have used SCSS extensively in my current rails apps, and it helped me to reduce the amount of code, and get a better understanding when to use which styles.
The tricky part will be what to have fluid (changing depending on the medias viewport size), and how to avoid repetition.
Have a look at the nice site Responsive Design with CSS3 Media Queries, to get an idea which parts of your layout may be fluid.
Have a look at 320+Susy (GitHub repo here). It uses the Susy grid framework extension for Compass. All of these tools are based on Sass and make use of media queries.
This question has been asked in various guises. However. this is a slightly different take on things. By web application, I mean an ultra lightweight frontend - ideally an HTML page with form and regular buttons, with as little dependence on heavyweight JS libraries like jQuery as possible.
The goal is simple. I want to write a simple forms based application for use accross various mobile devices. I thought going the HTML route would be the simpler route (since browsers get around the whole cross platform issue) but even the browser approach seems problematic because of differing screen sizes on mobiles.
I have two questions:
For a simple form based application like I have in mind (possible 3-4 screens in total), I think the browser based approach gives more bang for my buck - am I missing a trick?
Are there any resources that someone can point me to for:
a useful reference for minimum (i.e. lowest common denominator) window size (I forget the technical term for the visible part of a page)
perhaps an example that will show a simple HTML page that will render correctly accross multiple devices?
The HTML5 mobile boilerplate will probably answer a lot of the questions about how to best get things to work across browsers:
http://html5boilerplate.com/mobile/
They have example markup and template implementations for things like browser/device specific CSS hacks, getting a custom launcher icon across different device styles, and implementing offline digest.
You really need to answer two questions before you pick a platform. First, what mobile devices and/or device capabilities are your lowest common denominator? There are lots of variable capabilities between most of those platforms -- screen size, input method, platform speed and mobile platform to name a few. Second, what is your connection requirement? Completely different issue building something targeting spotty or no connectivity versus a fully connected app.
Then you can start thinking about what tool(s) might get you there. In general, a very, very simple HTML site will look okish on most platforms you list. I wouldn't roll with HTML5 functionality because you've got serious limitations there. And HTML/web apps are kind of moot if you need things to work with limited connectivity.
iOS (webkit), Android (webkit) and BB OS6 (webkit-ish), are fairly easy to develop for.
Windows 7 should be, but who knows? They aren't promising HTML5 support until end of year.
BB OS5 browser sucks if you hope to be doing DOM manipulation or fancy JS event listeners. It's really buggy.
Nokia...it's a crap shoot. Granted, they have about one year left before they ditch their OS anyways.
Screen sizes are an issue, as is the fact you can change the orientation. But that can be gotten around with some careful planning.
HTML5/CSS/JS is definitely the way forward for making cross-platform apps as easy as possible...be it in the browser, or as a compiled app.
Does anyone have experience with Google Closure Editor/WYSIWYG? I'm thinking of moving from CKEDITOR to Google Closure Editor/WYSIWYG. Ideally I'd love to use the etherpad editor but it doesn't appear that anyone has separated the editor from all the app.
Anyhow, for Google Closure Editor/WYSIWYG, does anyone know, does it support the real-time collaborative aspects seen in Google Docs?
The Google Closure editor is a wrapper around the built-in browser editing capabilities. It is thus similar to other rich text editors like TinyMCE, CKEditor, etc. It is less feature-rich than either of those, but it's smaller and faster. The base editor is used by Gmail (most notably) and various other Google properties.
There is nothing within the public Google Closure editor to enable Google Docs style real-time collaboration. With that said, it has a plugin model which enables you to add new functionality. I would not recommend taking something like this on without a solid understanding of working with Google Closure.
Until recently, the editor was also used by Google Docs. However, the limitations of core browser editing technology became a barrier to innovation, so they built their own editing surface[1,2] (codenamed Kix). This editing surface is not included in Closure Library.
https://drive.googleblog.com/2010/04/a-rebuilt-more-real-time-google.html
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
It might not last, but there is a standalone version of kix up on github:
https://github.com/benjamn/kix-standalone
EtherPad Lite is the most viable option I've seen so far:
https://github.com/ether/etherpad-lite
Personally I favor this one, because:
It's open source
You can host your own
Has few server-side dependencies (Node.js)
It has an API, so you can build your app in any language
Attempting to steal Google's work is probably not a good long-term plan. (I'm also not convinced that having the client-side libraries actually helps you, in terms of the real-time collaboration feature, which depends heavily on the server-side.)