We Keep Coding

How do I detect if a user has Mac OS high contrast accessibility settings enabled?

I have a React/TypeScript project, and I am trying to detect if a user has any of Mac OS's high contrast accessibility settings enabled: Invert colors, Use grayscale, Differentiate without color, Increase contrast, or an increased Display contrast setting.
I want to detect these using JavaScript/TypeScript.
So far, I can detect only Invert colors.
How do I detect if a user has any of the other Mac OS accessibility settings enabled?
More information:
The prefers contrast media query is not yet available. I tried it anyway, and it doesn't work.
The inverted colors media query tests only for the Invert colors setting.
Apple's dev docs on color and contrast do not have a solution.
Detecting high contrast use in other browser, OS scenarios

Iam afraid it is not possible its at this moment.
The feature in Objective-C to determine if the accessibility mode is active (boolean AXAPIEnabled(void);) has been deprecated as of 10.9 with no indication that there is a replacement. You can see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).
In general, testing for the presence of assistive technology or activation of assistive features is frowned upon by the users who need it most. It creates the very real risk of both well-intentioned developers breaking these features (perhaps by un-verting the page) and also of allowing bad actors to determine somebody's personal health information.
Altought it might come in future as its in stage 5 (proposal)
https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
Other than that Iam afraid you are facing dead end.

On my last project, this was handled via a little bit UX knowledge. We went down same rabbit hole but what ended up working was user's ability to toggle some accessibility settings manually including High Contrast. I dont think you should invest too much time in answering "how to detect" as in some edge cases your effort will be bypassed if users interact via devices they dont have too much control over (shared PC, outdated devices, OS bugs etc.) Heck, some new monitors provide this feature builtin which is even harder to detect.
But, nothing as reliable as good ol' "Hello {user.name}, here are some settings you can toggle manually in the upper-right".
Happy coding!

This is an old question (2019), but I was wondering this same thing myself in 2022. At least the current macOS Monterey has an accessibility feature "Increase contrast" which state can be detected with:
const prefersContrast = matchMedia("(prefers-contrast: more)");
The other states are "no-preference", "less" and "custom". See here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-contrast

For Electron you can use the nativeTheme API and access the nativeTheme.shouldUseHighContrastColors property.
A Boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-constrast UI.
// in main process
const {nativeTheme} = require('electron');
console.log(nativeTheme.shouldUseHighContrastColors);
Note to OP: I understand this does not solve your issue as you are trying to do this in a browser not an electron app, however I figure that this question may come up in search results for people who are looking to add this functionality in an electron app so I figured I would add an answer.

How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?

You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
Easy to package and distribute apps
Available on Linux, Mac OS X and Windows
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.

Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.

NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.

It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.

Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)

I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.

You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html

CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

Where does it still make sense to use Flash? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
It seems that Javascript, CSS3, and HTML5 are handling more and more of what Flash used to do. Plus, mobile devices have been slow to support Flash. Where does it still make sense to use Flash in web design & development?
For instance, in the projects I work on, we're still using Flash for video playback in Internet Explorer but using HTML5 in other browsers. I'm guessing audio is similar. Flash still has some advantages for complex animation and games. Where else?

I'm an absolute fan of javascript and a real Flash lover - but this argument is really starting to grate me.
Please by no means assume I'm slating you - and it is a valid question, but they both excel in their extremes.
There is a now a cross over between the two platforms. With the new onslaught of groovy HTML5 trickery and Javascript speed going through the roof - you can now perform tasks in JS of which you would used to only do in Flash.
Stem the argument slightly to what Flash can do:
Augmented reality with 3D scenes using camera and sound.
file and data manipulation of which will far exceed javascript current role.
cross platform support on multiple browsers and devices
extended Rich media
Standardized video support
For clients, Flash replacements for custom fonts is a must as copyright licensing on their fonts prohibits CSS3 fonts. No mentioning the need to have 4/5 versions of the same fonts in different formats.
deploy applications quickly via desktop and web using the same platform/language/code
No to mention the recent advancements:
GPU acceleration to the like of installed apps capability
native massive networking support
With javascript - difference in implementation across browsers can be a halting process.
If I were to display video on my website in flash, its one SWF. To ensure I have the same visibility with the relatively new HTML5/Javascript/CSS3 application - I would need to distribute my video in many formats with multiple levels of CSS capabilities with JS fallbacks.
By no means am I stating Flash is the first and foremost - but its still the go to technology for many tasks I need to do day-to-day.
Additionally we really only questioned the way the web was going since apple didn't implement Flash on their platform. Its a decision I happily live with and don't miss - but with the allowance to build an app using Flash and then to Deploy it as a native iOS app - this argument is now subjective to fan bases and those without the wish to support a new workflow.
This is a site I help build in flash/AS3:
http://www.adobemuseum.com/index.php
Building the exact thing in javascript to work in IE6 would have made me quit my job.
If you don't agree, I'd love to hear your opinion and I'm totally willing to argue my point further or listen to a reason as to why I am wrong.

Where you can't make certain aspects of a website stay the same across platforms.
Where you cannot do what you want with anything else.

Flash can...
access the web cam
access the microphone
access sockets in all browsers
flash has...
a gui for creating complex vector animations
an elegant system for managing and nesting visual assets
built in filters like blur and convolution that run in real-time
real-time bitmap manipulation with BitmapData and PixelBender (much faster than canvas)
software rendered 3d engines like PV3D or Away3D
real-time audio manipulation for generating audio and processing existing audio files
the ability to read and write binary data, enabling the reading and writing of any filetype (like pdf or doc)
There's more but those are the main ones I can think of off the top of my head. I've been using lots of HTML5 lately and I think it's really excellent, but when it comes time to make games or do something related to the above list, I still find myself using flash.
Recently while developing games in flash I've been thinking to myself how I would go about doing the same thing using canvas and/or javascript and HTML5. In some cases it's possible, but in most cases it would be a good deal more work and code.

these spring to mind:
Augmented reality applications
P2P and other video applications; videochat
Rich media banners (there are good solutions to this in HTML5 though) and mostly interactive online advertising
Applications for Flash-Lite and Flash Player 10 enabled mobile devices (Set top boxes, XBox etc)
Rob

If you are making a website for an upscale restaurant, you must use flash.
Bonus points if it has a sweet looking loading screen that plays ambient music.
here is an example of a good flash UI:
http://www.rinconlimenorestaurant.com

Web desktops - do you find it interesting? [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 5 months ago.
Improve this question
As a win32 developer moving into web deveopment the last few years, I found the
web desktops based on extjs very interesting.
Coolite Desktop (broken)
Extjs Desktop
Puppy Web Desktop
Wikipedia list
Lifehack list
Windows 3.1 desktop (broken)
Do you know about others?
Without any experience of developing applications as web desktops (and I am not promoting extjs, only impressed...),
I have to say I like the concept.
What do you think, is it useful?
Edit Dec 30 More about the subject here:
are-webos-practical-yet

I find it an interesting experiment, but I don't really find much added value in it.
The desktop concept works for an operating system. Most people use one operating system. They are familiar with how it works and what to expect in terms of navigation. That being said, having a desktop at an application (or site) level adds another navigation model that the user must learn. If they are expecting it to be the same at their OS (which it won't likely be), then it can lead to confusion because it doesn't work exactly like what they're used to - although it looks like it should.

NO.
Also, Uncanny valley of UI.

I think they serve as purely tech demos, I don't see the web desktop getting any traction unless Google jumps on this and offers all their major apps (Google Office, Gmail, etc) as apps within a web desktop.
Of course the whole desktop methodology doesn't exactly fit the browser mentality very well.

Really it doesn't look like a huge step forward. I don't care if the desktop runs in my browser vs my actual PC. Desktop environments continue to suffer from a lot of problems.
First, I really need some way to declutter and organize open apps around my personal real-world "logical" tasks. Desktop environments all display a single, poorly organized static list of apps. I feel like I have lost my mind half the time during a busy work day. I often get a feeling synonymous with the "why did I come into this room!?!" feeling when I can't keep track of where I am in the desktop environment, or why a given app is even open.
Attempts have been made to address this by grouping items by application. For example, in Windows, grouping all the Microsoft Word content in one group on the taskbar. The thing is, I need things on the task to actually correspond to my real world tasks. Granted, I don't expect the UI to read my mind, but if there was some really slick way to group multiple instances of different apps together and identify them with one task, that would be awesome.
Another problem with desktop environments is their performance. They continue to attempt to push the limits of what hardware can do. Often, they go to far. As Jeff points out, for a developer, I want my tools to work fast. I can't stand waiting for some GUI widget to load so I can code, or for that matter browse the web or write an email. This, in my opinion, is why straight up command line development continues to thrive and why many of us don't want to give up Windows XP for Vista.
If Vista can't get this right, performance is not going to be improved by having a "web desktop".

Like others have said, this has been around for a while. I think if it was gonna take off, it would have already. I don't think it's a matter of technology catching up, I think it's a matter of developers not wanting to put time into a tried-and-didn't-take-off technology.
Is the desktop a good way to organize your apps? Most people I know don't use their desktop very often, it's rarely actually visible. The Start menu in Windows sees much more use and it's analagous to a list of browser bookmarks.
Also, my opinion is that Silverlight will allow better browser-based user experiences with less development time.

In my opinion but people will never use them as a desktop replacement, there are too many quirks and potential pitfalls to be an actual replacement or even useful.
They do make an cool demo of ajax-y technologies and serve as a guide on how to develop apps with that desktop feel (which I'm not sure it's worth it), but not much more.

The demonstration of capabilities is amazing. To create a desktop environment in a web browser is a beautiful indication of what browsers and javascript are capable of.
With that said, I believe it will (and hope it does) die as a viable development platform. Currently browsers don't provide the processing power that a desktop does and ease of development is much greater for desktop than browser "simulated" desktops.

the desktop metaphor in a web browser is neat, but
the first link was still downloading images after 1 minute so i closed the browser
the second link came up instantly and looked really good
for intranet applications this might make sense
for task-based site with multiple tasks this might make sense
this isn't that new of a concept - BBS software had this 20+ years ago, and extended it to the web 8-10 years ago; the metaphor was not very popular because that's not how people use the web...yet!

No, because the web is the OS, the platform is the browser.
I use several web based application including Google Docs, Gmail and so on. Not all of them are from the same provider. I access them all using my browser.
Forcing me into using a "web desktop" is like the portal thinking of the ISP's ten years back - forcing users into your own "world" to make them use only the application you provide. Instead of just acting as a gateway to reach all the possible choices out there.
IMHO, this is why web desktops will fail. The OS of a PC is there to tap into all the possible resources of your desktop, in the same way the browser is for the internet. Web desktops is to me equal to install yet another OS on your current one and limit yourself to use only that.

How does one record audio from a Javascript based webapp? [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 6 years ago.
Improve this question
I'm trying to write a web-app that records WAV files (eg: from the user's microphone). I know Javascript alone can not do this, but I'm interested in the least proprietary method to augment my Javascript with. My targeted browsers are Firefox for PC and Mac (so no ActiveX).
I gather it can be done with Flash (but not as a WAV formated file). I gather it can be done with Java (but not without code-signing). Are these the only options?
I'd like to record the file as a WAV because because the purpose of the webapp will be to assemble a library of good quality short soundbites. I estimate upload will be 50 MB, which is well worth it for the quality. The app will only be used on our intranet.
UPDATE: There's now an alternate solution thanks to JetPack's upcoming Audio API: See https://wiki.mozilla.org/Labs/Jetpack/JEP/18

This is an old thread, but the issue remains relevant. It should be noted that there is a way to record audio to the server in Flash without a proprietary back-end. Here's an example project to get you started:
https://code.google.com/p/wami-recorder/

Flash requires you to use a media server (note: I'm still using Flash MX, but a quick Google search brings up documentation for Flash CS3 that seems to concur - note that Flash CS4 is out soon, might change then). Macromedia / Adobe aim to flog you their media server, but the Red5 open-source project might be suitible for your project:
http://osflash.org/red5
I think Java is going to be more suitible. I've seen an applet that might do what you want over on Moodle (an open-source virtual learning environment):
http://64.233.183.104/search?q=cache:k27rcY8QNWoJ:moodle.org/mod/forum/discuss.php%3Fd%3D51231+moodlespeex&hl=en&ct=clnk&cd=1&gl=uk
(membership-required site, but open to Google, hence the link goes to the Google cache page).

Your only options are Flash, Java, ActiveX, or writing a custom Firefox extension. Flash is probably your best option - you could write or use an existing Flash app to do the recording and keep almost everything else in pure Javascript.
Why do you want a WAV file? If you're planning to process the actual bits of the waveform on the client, then that's probably a bad idea; the client might be really slow and you wouldn't be able to really manipulate the file. If you want to send the sound back to the server, then it's much better to send a compressed file, and then uncompress it on the server.

Flash is going to be your best solution.
Hopefully this will help: http://www.kirupa.com/forum/showthread.php?t=17331

Yes I believe Flash or a Java-Applet are the only ways to do that.
Since you cannot interact with a microphone you must use some sort of browser-plugin, its the only way to use the microphone.
I'm not aware of any other plugin that would provide that features. A quick search on Google did not reveal any further possibilities.
I think the easiest would be going with Flash.

Another solution if you don't mind your users installing a plugin is to use Runtime Revolution RevWeb plugin which supports recording audio in browser (and is trivial to implement, I made a test applet to confirm this in about 10 minutes). http://revweb.runrev.com/

You could download Real Producer Basic, which is free here (http://forms.real.com/rnforms/products/tools/producerbasic/), and imbed it as an activeX object since it's on your intranet. Flash will embed the same way, it's on all the office workstations, but since this is your Intranet, you could install it on all the machines with AD. Real audio files are very small compared to wav and sound great. Here's a link to the Real Sudio ActiveX how-to guide. http://service.real.com/help/library/guides/activex/producerx.html