I am looking for a general mechanism to internationalize web application that have to work in offline mode.
Initially I was considering adding data-i18n tags to elements but this seems like a very ugly solution.
I came across http://panacodalabs.github.com/The-M-Docs/#components_&_utilities/m_i18n however I do not wish (or can due to time constrains) port my application to that framework.
I need a HTML5 jQuery Mobile friendly solution to this issue, that works in offline mode.
It seems to me that this crucial component is missing on the HTML5 framework.
I wouldn't necessarily say this is a feature JQM should provide, because this is probably done best with some server side logic.
there would be two ways I can think of doing this:
1. have all your language translations in some standalone js files, which you would have to include in manifest file. check the datebox plugin to see how this could be done ( top right - options).
2. create a local database and store translations in the required languages there.
i think the first one should be easier to handle, but probably harder to setup/maintain. also, depending on the amount of translations, js files do become large...
Have you looked at the jQuery i18n plugin?
http://recursive-design.com/projects/jquery-i18n/
I'm currently using it with jQuery 1.7.1 and jQuery Mobile 1.1.0, and it works perfectly.
Related
Recently I tried Compose-Web but was not able to do anything good as my Jetpack Compose knowledge was of no use(I'm Android Developer) since all HTML-related components were being used.
But initially I heard that there are two ways to make a compose-web project
Using DOM API(HTML components like Div, Span, etc)
Using Compose Widgets(Rows, Columns)
Is the second method still valid?
if yes how can I use it in the project because by default IntelliJ is providing HTML components.
How to make Compose-web application as an Android Developer?
I'm asking this here because there is very less content available about compose web on the internet.
The ability to use compose.ui widgets with the js target is currently in the experimental stage. You can check it out in action as part of this experimental multiplatform example:
https://github.com/JetBrains/compose-jb/tree/master/experimental/examples/falling-balls-mpp
(there used to be a standalone js version in the top-level examples directory, but it got merged and now all the links to it are broken on the compose for web landing pages)
I've verified that it works after upgrading the webpack version to 4.10 in the build.gradle.kts file. Messing around with it myself, I noticed TODOs popping up in the console and it responding slowly to rapid page resizing, so I wouldn't think about using it for production use just yet.
If we are talking about 3rd party libraries, a very impressive library
that wraps material-components-web#14.0.0 for usage inside compose for web is Kompose Material Design Components (KMDC).
There is also a demo site here
We have a requirement to build app with as much common codebase as possible, that works on desktop and mobile platforms (Android, iOS, Windows Phone). Also, the app on mobile platforms should act like an app (so not mobile-friendly website), with access to camera, position, and an icon.
Having looked at all the options and finding some or the other quirks, I decided on having webapp/site on browser and PhoneGap to base the mobile app on.
Now, as far as my understanding goes, sticking the codebase of browser webapp/site in Phonegap base structure should work for the mobile app. Of course, some minor changes may be warranted.
However, I also saw that relying only on phonegap and barebones HTML5 tech (without any UI framework) would need a lot of time and would be tiresome.
So I looked around for a UI framework and found - JQuery Mobile, Sencha Touch, Kendo UI, etc. jQuery Mobile, while could work in desktop browsers too, would not give me a grid-like system to position elements. The rest of them seem to work only on mobile platforms - they did not boast about it working/scaling on desktop browsers.
So, is there any common library/framework that can provide - CSS animations, grid-like system for positioning, etc.?
It's not an "answer" so much as an idea for a method. Perhaps try creating what you need from a desktop perspective first using bootstrap so it's mobile first. Then maybe make use of something like jquery mobile for the bare bones navigation and structure in the app. You can then pull in your page content via ajax using the same code/layouts from your "desktop version" (which will of course have a mobile friendly view/layout since it's written using bootstrap).
You'll likely have to either create an api for serving up the content for your app or else find some other way to differentiate the app from the desktop site on the server side so you know where they request is coming from, but it seems do able.
After some testing and verifications on browser and phonegap, I chose the following combination:
Yahoo's purecss library for grid system and basic widgets. Its awesome with the only pain that Google Search on it gives ambiguous results.
Reactjs to manage the view logic. This was the biggest pain in my previous project having only used jQuery, turning my whole project into a huge jQuery soup. React is extremely clean compared to that.
superagent probably, for AJAX requests to fetch server data. Extending this, I haven't yet decided to employ a model-like library that handles the state; may be I dont need one. I will decide as the project moves on.
hand-coded CSS with some common sense so that I learn something and dont waste my time in finding an all-in-one library. _The only necessary rule here is to weed out older best practices when you are looking for something. For example, in order to center something, the transition method is the best technique.
I am trying to understand about Chrome (browser) development. I am very new to this and trying to figure out where to start in order to develop for Chrome Browser.
Just have a couple of questions:
What is the difference between Chrome Browser apps vs. plugins vs. extensions (not sure, if this question make sense. But, hope you got what I am asking for)
What kind of applications can I develop for Chrome Browser
What technologies do I need to learn in order to develop for Chrome Browser.
To answer your first question this explains the differences between apps and extensions (I think there's no better way to explain their nature):
https://developers.google.com/chrome/web-store/articles/apps_vs_extensions
What do you mean with "what kind of apps"?
You can develop both hosted and packaged apps if is that what you intended, give a look at this:
https://developers.google.com/chrome/apps/docs/index
Anyway the easiest way to start would be by building an extension, how-tos and
good documentation makes it good to start with:
http://developer.chrome.com/extensions/getstarted.html
Just to add to the above answer which was missing difference between Plugin and Extension is:
Plugin is a third-party library that is plugged-in to the browser and allows for being embedded on a webpage. It affects only the web page that is using the plugin.
Extensions change the browser UI, add menus or change overall look of the browser and can process each page that gets loaded.
So to sum it up - plugins add functionality and extra features to a particular webpage while extensions add functionality and features to the whole browser and change the behavior of the browser.
Just to add on new information since people may continue to hit this question: Chrome has basically deprecated plugins as of March 2017 (Chrome 57). If you go to chrome://plugins now, you won't see anything (you used to see a list of installed plugins with enable-disable links like for extensions).
It seems the reasoning is that the only plugins they actually wanted to allow you to enable/disable are Flash and PDF Viewer, both of which were moved to the Settings menus (if they weren't already there, not sure). The rest are considered to be integral parts of the browser. https://www.ghacks.net/2017/01/29/google-removes-plugin-controls-from-chrome/
Makes things a bit simpler to think about now.
Does it require development of two almost separate front-ends for the app, one using Ext JS and the other one with no JS at all?
Well, pretty much. If you really want a NO-JS version of your site, you will need to stick to very basic HTML, and a trip back to the server and a full reload with any click. If you want your real site to be ajaxy, then this would require two different front ends to the site.
May I ask, why are you worried about people with no JavaScript? There are very few people out there with no JavaScript, even mobile phones have decent JavaScript performance.
Your application should be built to allow users without js to access the same content.
All form posts and action on the app must have server side handling. This is to allow for non-js browsers as well for security reasons as the js can be edited on the fly by hackers.
Once you have this basic functionality you can start adding your css to make it look good and add the js to add additional functionality with postbacks done by ajax.
You should use feature detection instead of browser detection with your css and javascript as browsers are updated with new support all the time.
Therefore you only need one frontend which includes both solutions.
Does anybody know of any pre-canned gadget/widget management framework (along the lines of iGoogle etc) that I would be able to use on an ASP.NET MVC site (presumably loading divs via jQuery etc)?
In particular, I'd rather not write all the selection / location code if there is something decent already available. (I would expect to write the actual widgets / content etc myself...)
I was waiting to see if you got an answer on this one as it's something I'm interested in too. As you haven't, I'll tell you what I know (it's probably not so useful but it might get you started...)
I've used something based on the ExtJS portal demo in a previous project - there are some license costs involved depending on the deployment scenario though, and besides, it turned out to be quite slow and cumbersome, and rather tricky to customise - the default for the ext toolset is for the ui to be built entirely from javascript, not from markup, and while it was possible to coerce it into working on top of existing markup, it seemed more difficult than it needed to be. That aside, it worked well in the end, and with the paid version the support is very good.
I've also implemented a widget / portal screen based on jquery-ui sortable which worked really well - the basic implementation was very quick and easy but writing the code to save and load portal settings took more time than I would have liked.
If I were doing a similar project now, I think I'd evaluate this instead - it looks ok from a cursory glance and it's open source - it's built with jquery-ui sortable, so the core should be solid enough, and the slightly uneven animations on the demo version should be easy to sort out assuming it uses the standard jquery-ui sortable options. It has functionality to load/save portal settings too by the looks of it, so it should mean less hand coding that side of things.
I have used Telerik RadDock in the past and found it to be pretty good. It renders in divs and is relatively easy to style.
It doesn't cost too much if you are using it commercially.
http://demos.telerik.com/aspnet-ajax/dock/examples/overview/defaultcs.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
This guy put together a great tutorial on implementing a iGoogle like drag/drop widget interface. Even links to a working example.