What new JS/HTML features is GitHub using? - github

As of a couple days ago (let's say 2018-01-25), GitHub has started displaying a banner announcing that they have officially dropped support for "older versions of Safari" and recommending their visitors upgrade to Chrome or Firefox. I happen to still use Safari 9.1.2 (11601.7.7) on El Capitan (10.11.6).
I've found that usually when a website says "please upgrade your browser," Safari will still work anyway. However, with GitHub, it's different! I confirm that on El Capitan, many UI elements on the new GitHub site do not work at all. (But the site has not changed in appearance at all. The new UI elements look exactly like the old ones, but they no longer work in Safari.)
For a concrete example: On the Pull Requests tab, clicking on any of the three arrowed UI elements (such as "compare across forks") does nothing. Clicking on the other, un-arrowed, UI elements continues to work fine in Safari.
[
Safari's Developer Console doesn't show any warnings or errors from the page, so whatever's going wrong, it's not apparent to Safari itself. I might guess the issue has to do with some new AJAX feature?
Anyway, the question is, what new JS/HTML features are being used by the new site in order to break compatibility with Safari/El Capitan? Where can I go to learn more about these new features, their functionality, and their adoption by various browsers?

Related

How can I re-use the same Chrome Developer Tools Window for every tab/window?

I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.

VSCode plugins and thoughts on alpha release

So I'm starting to guess Javascript wasn't the best choice for VSCode to be based on. It is pretty much the same as SublimeText and even slower, though the debugger and code intel is awesome and far beyond Sublime's capabilities.
The thing is I suddenly got a chrome-like inspector frame on the right side of the window, which caught my attention and got me googling about it (too bad almost nobody is talking about vscode yet so it's a pain to even find some info), and found out another person got the same weird issue. Somebody told him that F12 opens the inspector like a normal web app so you can look under the hood (which os most likely bullcrap since it makes no sense, probably just a bug).
The thing is I decided to test out keypresses, and discovered Fn+Shift+Cmd+F12 opens a new window with a weird button and a web inspector, which has no utility at all, but it's there so I got curious and messed up with it for a while. Bad idea since it crashed the entire app.
All this story has the point of warning about how Javascript is not as stable and independent as Objective C, since it's obviously working on top of V8 and Webkit and whatnot, any of which multiply its chances to crash.
Sublime has also crashed for me a couple times, but it does Atom Saving (operating system's native autosave that stores every change in the filesystem so app crashes don't affect the files).
VSCode is not native and is in a very alpa state (version 0.1.0 as today), so this is kind of a feedback for them and a warning for other users, posted here because there is a link for this stackoverflow community on their website, and is the only community-driven way of feedback they have.
I wish they open the development so others can contribute or, at least, do like SublimeText which isn't open but supports extensibility thru plugins and python console.
Now, the question:
Is there a way to make Sublime plugins work here?
The keybindings you have found are used by us internally to debug VSCode quickly in case we notice a problem. We simply forgot to remove them, kind of like how Ctrl+Alt+Delete happened :).
We will remove these keybindings with our next update, to avoid confusion, in a couple of weeks.
We have plans on supporting plugins, we have made progress on this story, but we were not happy enough with the API, and we decided to further validate and improve it before making it public, to avoid as much as possible future API breakage.
As for the actual question, it is not possible to run Sublime plugins in VSCode, for similar reasons why it is not possible to run Sublime plugins in Eclipse or in Visual Studio. There is, however the possibility of code sharing between plugins developed for different platforms, see for example Omnisharp, which is shipped with VSCode and for which there is a Sublime plugin.
You're complaining about VSCode being created using HTML, CSS and JavaScript and not something like C# or Objective C. You do realize that since day one the following Apple apps were made with a similar hybrid approach of Objective C and HTML, CSS and JavaScript. These are apps that millions of people use: iOS: iTunes app, iTunes Store app, App Store, and on desktop: iTunes, App Store.
Visual Studio Code is a preview, meaning something that just left alpha stage development and is in early, early, early beta, like just a week ago. So there are lots of things that are still missing or not totally working yet. The Visual Studio team is working at three-week sprints and intend to update the product at that pace, so if you've downloaded it, don't expect it to have every possible feature yet. This is a preview. Explore it. If it doesn't fit your current workflow, don't use it. Stick with what you have. But keep an eye on it because it will evolve steadily over the coming months.
I tried F12 in VSCode on windows and it opened the Dev Tools window, which makes sense since it's built on GIT's open source editor Atom & Chrome.
Sublime plugins? No, you can't use ST3 plugins in Atom, but hopefully we'll be able to use Atom plugins in VSCode once plugins are included in VSCode.
At the moment VSCode don't have any functionality for plugins, but it's coming soon see forum
There is also menu item under help in VSCode for reporting issues and suggesting features.
Me too would like Plugins for VS Code. As I would like a WakaTime plugin as I'm spending so much time working in it :). Both on Mac as in Windows.
I also discovered F12 one day but just thought: 'wow pretty cool!' and nothing more. But hey, I'm a webdev.. :)
It's now october and it's still there. And I hope it will stay. Just like crrl+alt+delete. #Sebastian I agree with #JimmyBoh, the whole preamble of this question is probably better suited to be put on a forum. Otherwise this question will probably be closed as 'not constructive'. To prevent other non-answers like this one :).

IE11 F12 Developer Tools on Windows 7 functionality missing/not working?

I was using IE10 on Windows 7 but it is such a buggy piece of you-know-what (hanging, crashing, etc.) that I gave up and installed IE11. It has not hung or crashed since installing. But I hate the F12 developer tools! Okay, not completely - there are some very cool new features. What I don't like is that they seem to have dropped several features that I really liked! Unless I'm just missing something... I've searched and searched on Google and Microsoft but all of the help I've found only describes the new features. Here is what I'm missing: Color picker, Ruler, and most of all, the Clear browser cache for this domain. They allege to have a Clear browser cache function, but it doesn't work! So when I make changes to my website, in particular changing graphics, the only way I can see the change is to delete all my temporary files from IE. Then I lose all of my cookies e.g. for automatically logging in to Stack Overflow! IE version 11.0.9600.16428 on Windows 7 Ultimate 64-bit.
The color picker is still available, go to the DOM Explorer tab and there is an eye dropper on the tool bar at the top towards the left. That activates the color picker.
For the issue of serving cached files try toggling on "Always refresh from server" on the network tool (3rd option from the left). This should get you the latest changes from your server.

How to make a chrome plugin

I was curious how to make a chrome plugin that loads some JS on every page - I've seen it done before, but now I want to make my first chrome plugin, one that changes all the fonts on websites to comic sans ms. Yep, this is a prank to pull on friends computers.
I would assume it would take like 4 lines?
http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95416
not really a plugin, however, it will work if you change it to what you want.
I've only tested it on stackoverflow and google.
If you actually want to build an extension
http://code.google.com/chrome/extensions/getstarted.html

Benefits and concerns with Google Chrome Frame

Is this a technology I should spend much time evaluating?
http://code.google.com/chrome/chromeframe/
Chrome Frame is a plugin for Internet Explorer (IE6-IE8) that gives it, well, what all the other major browsers have.
Biggies for me are the Canvas tag and a fast JavaScript.
As I do a lot of JavaScript dataset visualization, IE6 is a perpetual thorn in my side, and I often have to write extra code for it, and I often have to slow down the frame rate of user-driven real-time visualizations. Using Google Chrome Frame will allow me to produce a much more responsive experience for IE6 users.
But I wonder if IE6 users may be in situations where their computers are under some kind of IT lockdown hell where they aren't even allowed to install a plugin (why else would they be using IE6?)
So I'd still be left with what to do with the last poor souls in IE6.
Still, IE8 lacks Canvas and the JavaScript is slow, so some of my users would see increased performance, maybe even up to Google Chrome and Safari levels.
So again, my real question: Is this a technology I should spend time evaluating?
Note: Google will be throwing up alerts to IE users to encourage them to download Google Chrome Frame for Google Wave. So maybe Google will get enough Google Chrome Frames out there on IE machines that I can just detect it and use it if it's there, and warn the user that experience may suffer without it. I hate to demand anything of my user. http://googlewavedev.blogspot.com/2009/09/google-wave-in-internet-explorer.html
Given the visualizations you're working on, I'd definitely evaluate it. The potential upside for you as a developer and for your users is significant. You do not have to force all Internet Explorer users to use Chrome Frame. You can simply include the meta tag and the users that choose to install the plugin will almost certainly have a better experience.
That said, in my evaluation of Chrome Frame I have encountered some pretty big caveats that might be showstoppers for your project:
Older versions Chrome Frame can't print (see bug list). Depending on what kind of visualizations you're doing, this might be a real deal killer.
Downloads work but appear to the user like nothing has happened (see bug list again).
Chrome Frame is basically the Google Chrome browser shoehorned into the IE browser chrome. As such, any interaction with the browser inside the frame is with Chrome, not IE. If you right click and select Inspect Element you will get the Chrome developer tools window with its Vista-like look and feel. You'll need to make a judgment call as to whether your users will be comfortable with that.
In my testing, it appears like Chrome Frame is only looking at the meta tag:
<meta http-equiv="X-UA-Compatible"
content="chrome=1">
I was unable to get Chrome Frame to activate by setting the X-UA-Compatible HTTP Header as you would with EmulateIE7 mode:
Header set X-UA-Compatible "chrome=1"
It is also worth noting that this meta tag will override EmulateIE7 mode if you have that setting configured and I believe the inverse is also true too. They are both setting X-UA-Compatible. The last tag to set this will take precedence.
One power testing tip that will help save you from having to go in and edit your pages, is that you don't have to do anything to your site to test it with Chrome Frame. Once you have the Chrome Frame plugin installed in IE, simply prepend gcf: to the any URL and it will load it in Chrome Frame (e.g. gcf:http://dshaw.com ).
Happy coding,
- #dshaw
Think you should really spend some time on it since i just tested it and it works very well !
It gives you ie6 with the chromium speed !
And google will surely have enough power to spread it a little. Also you can advice your users to install chrome frame for your application if you really need it.
If you can install flash on ie6, you'll be able to install chrome frame.
Some users that can't install google chrome, will be able to install chrome frame.
I agree with you when you say that you don't like to demand anything of your users. That's generally a good philosophy. I would recommend evaluating how much you need the Canvas and how slow JavaScript really is.
Considering that IE is still the most popular browser (well, the most widely used, anyway), if your web-application is going to be used, you have to take IE into account (as you already are). The real question to ask is, "How much is the user's experience going to suffer if they use IE 'as is'?" If it really will degrade performance, and it will hurt your user base, then, yes, I would check out Google Chrome Frame.
I think it is a good alternative to sites which are considering not maintaining support for IE6.
Recently some big sites stopped working in IE6, they could ask for chrome frame instead of showing you can't access that site in your browser.
Is something good also for improving performance for google chrome frame users.
I'd say no. It is a waste to spend time evaluating it.
Whoever can and want to install extensions to IE6/7/8 can and should install a modern browser (Firefox/Safari/Chrome). The benefit would be both better performance and better support of standards across the board, more than a plugin for IE can provide.