We Keep Coding

Bug reporting regarding HTML and JavaScript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 5 years ago.
Improve this question
I believe I have found a bug in HTML / JavaScript, but I have no idea where to post this bug. Any information on where to post such bugs is appreciated.
The bug can be recreated as follows:
Go to W3Schools Tryit Editor
Make sure you have some other tab open in the same window
Click on the input field to focus it
Click on a different tab in your browser
Depending on your browser, different effects will occur (all unwanted)
This has been tested in Chrome (it will give an infinitely repeating alert), on Firefox (it will give the alert, but not switch tabs when clicking the alert away), and on Edge (it will show that the new tab is selected in the tabs bar, but the rest of the page doesn't switchenter link description here).
Since this bug occurs in multiple browsers, and also since the bug occurs with sample code from w3schools, I believe that this bug is related to HTML / JavaScript more than to a specific browser.

W3Schools isn't affiliated with W3C, the organisation who maintain the HTML specification. Nor are they affiliated with Ecma International, the organisation who maintain the JavaScript specification. Nor, for that matter, are they affiliated with any browser.
The code they've supplied here is their own code. It's not official by any stretch of the imagination: it's code that you or I could have written.
However that said, it looks like you have discovered a bug which affects multiple browsers. This is something you an report on the various browser channels if you so desire. Potorr has already linked you to a couple of these, which can be found by simply searching for something like "{browser name} bug tracker" with a search engine.
However you may consider instead posting directly on W3Schools' forum, as, after all, this is their code: http://w3schools.invisionzone.com/index.php?/forum/45-general.

Mobile Architecture Options with AngularJS [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am building an app that includes these design goals:
Fast and modular - lightweight core that can be expended into a feature rich app in a coherent manner
Mobile first - this app first and foremost targets mobile platforms. It uses some device native features. It must look and feel like a mobile app (with page transitions and swipe events). However, a large subset of its features must also be available to web browsers. My goal it to have one unified code base with a common core and mobile specific extensions.
So far, I have selected the following stack.
AngularJS: I have used a few JavaScript frameworks in my other projects. Angular seems to suit me best in terms of modularity and well thought out design. I want to use Angular native constructs (like directives) and minimize "other kinds" of JavaScript-based widgets from external UI toolkits.
Cordova: I am comfortable with its design philosophy and plug-in system. I am aware of performance considerations which emphasize the importance of choosing the right JavaScript framework.
Some responsive framework: Bootstrap 3 would be my preference at the time of writing. I like its looks. It's design seem sound. There are Angular directives available to replace it's jQuery plugins.
I have a well-defined REST API on the server-side which is bound to Angular resources. I am not planning on doing "presentation stuff" on the server.
Here is my question: On point 3, Bootstrap seems to be missing features to build an "advanced" a mobile app. Bootstrap responsive behavior is great for basic controls, but I need a little more. For example, things like page transitions and swipe events come for free with jQuery Mobile. While I do not expect to find this kind mobile features in Bootstrap, it seems like I should be able to include directives that would add things like page transitions and swipe events without overlapping with the Bootstrap CSS. There is angular-mobile-nav, does anyone use it in conjunction with Bootstrap? Or is Bootstrap just the wrong choice?

I've had the same question myself lately. Bootstrap 3 is my preference, but I wish it had mobile events and animations built-in. In addition to http://www.appgyver.com/steroids already mentioned, I've also come across http://ionicframework.com/ and https://github.com/angular-widgets/angular-jqm.

Kind of late to this question but you should check out Ionic. It uses Angularjs and comes a bunch of great components (angular directives) and is pretty easy to get started with while still being powerful. I've been playing around with it for while and love it. Definitely a good direction for mobile apps.
Oh one last thing, they play well with cordova/phonegap

Did you already have a look at http://www.appgyver.com/steroids it will play well with Angular and Cordova and will save you some of the troubles you mentioned in your question. Of course you can still keep bootstrap for more "basic" needs.

All these answers are good. Both Steriods and Ionic look like great frameworks and acceptable solutions to the problem as described. For my particular problem, I created a very lightweight Angular module which adds iOS7 headers and animations on top of Bootstrap/Bootswatch themes: https://github.com/fredfortier/angular-ios7.
I wanted something very simple that lets me use mostly Bootstrap. For anything more complex, I would definitely consider Steroids or Ionic.

Better Solution than Evernote for Code Snippets/Examples? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm learning javascript and want to create a library of example code snippets as I learn new ideas. I'm currently using evernote, but am wondering if there is a more elegant solution where I can create a reference library complete with syntax highlighting/executing the code in the browser.
Thoughts/suggestions?

Tried the Evenote Plugin for Sublime3?
http://www.sublimetext.com/3
https://sublime.wbond.net/packages/Evernote
You can save new notes, update existing notes, using github style markdown.
Here is an example:

I use
app.gistboxapp.com
You need a GitHub account to login: this app connects to your Gists repository saved into Github and keeps all your code snippets. It's web based so you don't need to download anything. Everytime you save a new snippet GistboxApp will add a Gist to your Github repository.
You can label all your snippets to divide them in categories.
Hope this helps...it works fine for me

I use Evernote as the snippets etc. is primarily from various websites. The web clipper browser plugin lets me create notes right to Evernote with highlighting (as shown on the original website) preserved. Tagging and additional comments along with sharing and the availability (between job/home/mobile in my case) is a very nice addition.
For my own snippets from IDE/editor i usually do a screenshot or if i want to preserve the copy-paste-ability i just add a text/source file to Evernote.

For OS X there is Quiver. It is very similar to Evernote in look and feel and adds many useful code snippets related features.
Quiver is a notebook built for programmers. It lets you easily mix text, code, Markdown and LaTeX within one note, edit code with an awesome code editor, live preview Markdown and LaTeX, and find any note instantly via the full-text search.

I am really liking Marxico, so far.
With this tool, your text is still stored in Evernote, but it supports code block formatting and markdown for notes. Note: This won't actually run your code.

You can also use http://tohtml.com/ and copy and paste over.
Works for me.

I like and use codebox but afaik it's osx only.
http://www.shpakovski.com/codebox/
Would really like to see this become cross platform.

I know this has been answered perfectly, but if you use sublime text as your code editor, evernote can be a fantastic was to collect and use snippets.
Sublime text as an evernote plugin. With it you can add notes (so type your snippet in sublime text and push it to evernote from sublime text) and open your evernote notes in sublime text.
So you just add your snippets to evernote. Then search them within sublime text and use them! There is a similar plugin for gist, where you store your snippets as gists and then access them through sublime text. But I think, evernote is a better option as it's easier to edit and re-sort snippets.
The evernote plugin
The gist plugin

Implement UI components for desktop/iPad [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am creating a website from scratch which would work for both desktop and iPad. There are going to be some UI components like sliding panels like you can see on
http://www.moneycontrol.com/tablet/
Plus some other things like Accordion, Drag drop things, etc
I need to have the same html file to be called for all devices (can only have separation at css or js)
Now we can implement these in multiple ways. In some cases, it is possible to have the same component work in both desktop and iPad without modification (e.g. Through jquery ui)
But guess there are some downsides like performance issue. Not sure if this is the only thing. Please suggest if you know of any other thing, may be from development side as well.
Another approach is to have different ui component to work on desktop vs iPad. E.g. For the site http://www.moneycontrol.com/tablet/, it uses DMZone sliding panels which would only work on iPad and not on common desktop browsers..so in this case, we would use another component which would work for desktop. Is this a good approach?
Thus My question is like which approach should i go for, both from a user perspective, future development efforts for some other mobile device ?
I need some strong points which would really justify the right approach.
Please suggest as much as you can. I am quite open to all ideas..

What you are looking for is a mobile app framework that supports desktop clients. There are tons of those available both free and commercial.
One of those which is quite popular is http://www.appcelerator.com/
Although i haven't used it and i can't tell you if you will hit a dead end on the road (with the sliders for instance), this is the best approach that you can do.
And, you are more than covered for future mobile devices.
You can do your own research of other frameworks, but appcelerator seems fine.
EDIT:
Seems like there is controversy whether its best to create native app vs browser based app on mobile devices. There are some interesting posts:
http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
http://blog.caplin.com/2011/02/11/sdps-native-or-browser-based-mobile-apps/
The only sane way to export your app to multiple devices is to use a framework. The other way is to make hundreds of conditionals depending on the device that is visiting your site...
If you want pure HTML interaction in the mobile device, then you can use jQuery Mobile. But you will have to make some sort of hacking to render the page correctly on desktops.

Sencha touch is the best web based touch UI toolkit out there, in my opinion, it's also free. http://dev.sencha.com/deploy/touch/examples/kitchensink/
Click on the 'User Interface' link to see examples.
Apps written in Sencha touch work on iOS, Android and Blackberry. One code base for all your mobile OSs. You can also run them directly in safari/chrome.
Here's their API http://dev.sencha.com/deploy/touch/docs/

Any contenteditable helper plugins for Firefox/Webkit? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm currently working to build a CMS for a client where the editing page looks exactly like the rendered page.
Hence I don't want an iframe based WYSIWYG, I am looking for something of a wrapper for contenteditable which irons out the differences between Firefox and Webkit.
For instance an Enter key press in Firefox results in a <br/> tag while the same event in Webkit results in it being enclosed in a <div> tag.
If you don't have suggestions for an editor, then can you help me solve this problem? The way I fixed it first was to check the onkeyup event and then use the execCommand "undo" and then insertHtml <br/>.
That works fine, but the problem is if the user is in a list, and they press enter they expect to have a next list element created but end up with a line break. How do I detect what's the location of the caret when the enter key is being fired so that I can skip the <br/> insertion behavior ?
Ideally I wouldn't even want a <br/> rather the text block to be encapsulated in a <p> tag for SEO purposes, but I wasn't able to solve that as well.
Any help would be greatly appreciated !

Aloha editor is nice. Google it.

There are lots of niggly little differences between the browsers when it comes to content editing. I don't know of any library that irons out all the differences and I suspect that anyone writing such a library would simply write a browser-based WYSIWYG editor. That being the case, your best bet is probably to look at how the big open source editors such as TinyMCE and CKEditor do it.

There is a configuration property called 'content_editable' in the source code of TinyMCE v3.5.2. This flag prevents an iframe from getting rendered. The published documentation doesn't say anything about this flag. I presume it is because the flag might not have been deeply tested.
I invoked TinyMCE on a contenteditable div and disabled all TinyMCE UI. Basic functionality seems to be working fine.
Init Options:
$('#editor').tinymce({
script_url: '/tinymcecustom/tiny_mce_jquery.js',
content_editable: true,
theme: "simple"
});
Html MarkUp:
<div id="editor" contenteditable="true" style="height: 900px"></div>
EditorTemplate.js (inside the theme folder):
(function () {
tinymce.create('tinymce.themes.SimpleTheme', {
init: function (ed, url) {
this.editor = ed;
},
renderUI: function (o) {
return {
editorContainer: this.editor.id
};
}
});
tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); })();

This is a complex area which you will struggle with to get right. Also if you are allowing users to Paste content then using an iFrame is the best way to ensure valid results and not mess up the page.
Aloha editor, TinyMCE etc. are rather big and bloated. I suggest you have a look at WYSIHTML5 https://github.com/xing/wysihtml5, http:www.createjs.org or for something simpler https://github.com/mquan/freshereditor however I don't recommend this simplistic approach.