Why is there a slight lag between native apps and "desktop" apps? - responsive-design

So I'm not really sure how to explain this but I will try my best.
I created a jsfiddle: https://jsfiddle.net/xghar755/2/
As you quickly hover over each text, you can see that the background color changes. This is just a simple div with a css hover property. Here is the kicker though, go to your address bar and type in any letter and you get a drop down of items, like so.
Now, quickly hover your mouse over the items in the dropdown. And then go back to the jsfiddle and hover your mouse over its items. You can tell that the chrome versions` background color feels more responsive. It's rarely noticable, but I can tell. Why is that?
Is this because Chrome's a Native application that doesn't rely on CSS or the DOM? If so, does this mean that native apps are generally more responsive in user interface applications? Thanks ~

Chrome is a software program running on your device. jsfiddle is, in part, a program that communicates with Chrome via the internet. Each transaction between the browser and jsfiddle takes tens of milliseconds, perhaps hundreds, and there can be a multitude of back and forth operations to serve one page and its in-betweens. In addition, Chrome is written in a language that runs in your machines native processing language while communication with jsfiddle is all interpreted by Chrome first, not to mention some processing is done on the jsfiddle server before being sent to your browser.
tl,dr; Programs running on your computer can do things a lot faster if they don't have to communicate with other programs over the internet.

Related

Google Data Studio - Color picker is cut off (a bug or is it just me?)

When trying to edit colors in Google Data Studio, the color picker dialog box is always cut off. As if it's running off the edges of the screen.
Scrolling up/down doesn't make the picker move. Refreshing the page doesn't do anything. And you can't just click and drag it to move it.
This shows what I'm talking about.
I've reported it on Google's Issue Tracker, but I can't seem to post anything on the Data Studio community forums. Which is why I'm here. I'll also post about it on Reddit to see if anyone else is running into this glitch.
I was able to reproduce the problem, so it is not "just you".
However, to reproduce I had to reduce the size of the browser window (with the window maximized it does not happen). This is clearly a responsive web design problem and I guess you're using a small screen.
Although it is indeed a bug, it may not be a priority for Google to solve. You're probably one of the few users that designs dashboards with small screens. So you may want to find a bigger screen.

Codename One. Very slow work after build

I'm developing my project in Codename One. UI creating from code, not GUI Designer. Application consists of three forms, as navigation I use Hamburger sidebar. The emulator works fine, but the builded application works very slow. Application was tested on Android. The degree of brake application depends on the number of components in the form. The situation has changed a little after we changed android.asyncPaint to false, but the operating speed remains slow.
Above all, Hamburger sidebar animation works strange. At first shows previous form, and then only shows the selected form. But this problem is not as important as the terrible brake application.
In 9 our of 10 cases this is caused by developers using gradients which are notoriously slow. It can also be triggered by tiling very small images or too many layers of transparency.
We have a performance monitor tool in the simulator that exposes some of these issues. You should also watch this video which covers most performance issues: http://www.codenameone.com/how-do-i---improve-application-performance-or-track-down-performance-issues.html

Silverlight OOB User Menu Control

Well ... at the risk of sounding like I really don't know anything about programming, I have a question about controls in Silverlight 5.
I have an OOB App that I am working with, but I need to add the User Menus (File, Edit, etc.) that are normally seen at the top of all apps. There used to be a control in VS (the Menu control) that was easily configurable. What is the control used to create the User Menus in Silverlight 5? The Context Menu is not what I am asking about. That is the right mouse click menu ... so that's not the answer ...
Please, understand my problem. It's been since Silverlight 2 since I worked in Silverlight. I appreciate any information you kind folks would be willing to provide.
There is no such thing available directly from Microsoft (meaning it's neither built-in or present in the Silverlight Toolkit).
You will have to use third-party controls such as DevExpress or Telerik.
EDIT: Some more advice in response to your comment.
Another possibility is to create UIs from scratch. There are two forms of UIs that I found inspiring lately, both of which don't use any ribbons or drop-down menues at all. The first is to use "Windows 8"-like dashboards instead of traditional menues, the other is the Windows Azure Management Portal (a web application).
I don't use traditional UI frameworks for menues myself, but mostly because I don't like those approaches and I'm picky with how user interfaces should work and look like.
But obviously you have to make a serious time investment to go new ways. And it will heavily depend on your application what approach makes sense.
Here's one simple approach that could work in a number of cases, I used it for a database application (I call it the Windows-Phone-7/8 approach):
The screen is divided into the "page" area and information bars. The information bars contain no menues, just who's logged on, a back-button, a home-button, and context-sensitive buttons depending on what's in the view. So basically it behaves like a web browser and you navigate through the app by clicking on "links" (buttons that take you elsewhere).
There's only one page area, so no windows and no popups. I've gone to the extreme of making even dialog windows to be pages.
Now you need menues. You do that with "dashboards", ie. pages that present some overview stuff and buttons that lead to the other areas of your application.
Although you could have action buttons like save or delete on the page itself, I put them in the bottom bar (but they are still dependent on the page your on) - that is exactly how it works in Windows Phone 7/8.
One last advice: The real effort is usually not in the menus anyway. Beside your application logic itself, it's a lot of little things like login screen, error handling and how to present error messages (look at the windows azure management portal for how they did that really nicely) and gracefully failing on session timeout. There's also a lot of nuisance on how you manage your data (ria-services, etc.).
So as long as you don't need fancy data grid grouping, rich-text edit or excel-like pivot controls, a toolkit might not help you as much as you'd hope - because they give you only the controls, not the entire UI.

Need a consistent TimePicker gizmo for mobile web site

We have a mobile web site that requires users to enter a specific time value--basically in hh:mm form. We're having a great deal of difficulty with the consistency of displaying and entering time from various browsers.
In looking for existing examples, we keep encountering various sites that allow 'ball park' values for minutes--so for them, a dropdown with 15 minute (for example) increments is fine--but a dropdown with 60 values is ridiculous on any platform, mobile especially.
The HTML5 < input type="time" /> isn't getting us there. A standard text input isn't either, as it tends to cue the device to show the alpha keyboard, which doesn't have numbers on it. The HTML5 type="number" almost works, but for some Android browsers, which don't have the colon (:) on the numeric keyboard.
I'm well aware that we're in the land of chaos with mobile browsers, but does anyone have a good idea of what might function well for both Android and iPhone?
Note: I've tried googling, and checked out various jQuery plugins, and none provide a good user experience for mobile--and many are poor even for the desktop. Ideas?
I don't particularly like their approach, but I believe the Any+Time date/time picker would work reasonably well on a mobile device - it can be positioned statically and the aspect ratio and button sizes look Right.
That said, testing it on my iPhone shows that a few kinks need to be ironed out. Notably, after tapping a button in the picker widget, the "hidden" input field the picker populates is focused and the view moves around and the onscreen keyboard pops up.
I hate answering my own questions here, but it looks like Mobiscroll comes closest to solving the problem for our users. We also looked at the jQM-DateBox but felt that our users would not be comfortable with the hour value changing automatically when you roll forward past 59, or backward past 0.
In addition to this, we did evaluate using a jQuery Mobile select list on a standard dropdownlist, but it felt wrong as we used it, as it essentially pops a div on the page, and scrolling through that moves the entire page quite a bit. I think that one would be great for a few items, but not applicable to our user base.

Browser.HtmlPage.Window.Navigate is blocked but HyperlinkButton isn't - why?

I have a certain UI element, which when clicked should navigate to another URL.
I tried handling the mouse down event and execute something like this:
System.Windows.Browser.HtmlPage.Window.Navigate(new Uri("http://google.com"), "_blank");
However, this gets blocked by the browser (I tried both Chrome and Firefox) unless I disable the popup blocker.
I did some research and it seems that the browser blocks navigations that don't occur as a result of user interaction and as far as the browser is concerned this navigation is initiated by a plugin (Silverlight), not a user.
OK, makes sense. But then I tried using a HyperlinkButton instead and it was NOT blocked.
I wonder why these two approaches get different treatment from the browser. Any idea?
I actually worked around the problem by wrapping the navigation triggering UI with a HyperLinkButton, but I'm still very curious...
I'm going to pull a fancy corporate quote and say "It is a feature, not a bug."
The Silverlight team is obviously worried about Security. They don't want crazy haxorz like you and I to do crazy things with our apps--you know, like popping up a bunch of browser windows all routing people to Zombo.com. Just imagine the choir! Zombo!
Summarized from their documentation: They want us to only use the HyperlinkButton to go outside of their application. In fact, they went the extra step, and depending on our settings, they will even throw a SecurityException for us if we navigate to an outside page--Even from a HyperlinkButton. How nice.
The real question: Why the Hyperlink Button and not something else?
Only one "thing" can navigate. this take saves time for Microsoft while testing Silverlight. This one thing can navigate to both internal XAML pages and external web pages--Might as well be consistent and have only one way to do navigation.
It is a UIElement. It's code behind likes to run in the primary visual thread. It can promise the browser that a Visual Element wants to go somewhere. Microsoft can also put its limiting logic in a control that requires a mouse-click/keyboard-input event tree.
All in all, it makes sense to start simple by making a control do the work.
Fun stuff! Hope this helps you.

Resources