How to get Options from Select in Chrome DevTools? - html-select

I needed to quickly be able to tell somebody the options of a select on a form in a non-HTML/human-readable way, using Chrome DevTools on a site not under my purvey.
This happens to be in response to a questioning support department. I'm being told to select an option that isn't there...

...this was a handy quick one liner I thought I'd share because, I am pretty good with JS, but never knew of console.table before reading some API usage examples yesterday for an XLSJS library, and it's rad! Array.from is needed because x.options is a HTMLOptionsCollection (I don't have the rep to create that tag).
Show "support" you don't even HAVE that option with this:
document.querySelectorAll('select').forEach(x => console.table(Array.from(x.options)));

Related

Opencart Breadcrumb link inconsistencies

I am having similar problem in my other pages and it’s driving me crazy. I have modified a “manufacturer” module to “series”
as well as the link too.
For example, I was able to change this link:
bishounenboutique.com/manufacturer
to this:
bishounenboutique.com/series
Click on the breadcrumbs, and
the they are fine in that page. However,
if you click on top image “Psycho pass” for example in that link, it will redirect to:
bishounenboutique.com/index.php?route=product/manufacturer/product&manufacturer_id=13
(which is not what i want. Ideally I want the link to be bishounenboutique.com/psycho-pass)
But set that aside, on that page if you click on the breadcrumb link “series”, it gives:
bishounenboutique.com/index.php?route=series
but it is supposed to be:
bishounenboutique.com/series
!!!
Can anyone please give me an idea of why this is happening?
I have already enabled SEO url and renamed the htaccess file. But I don't know why it works on some links but not others.
Thank you.
Products, Manufacturers, Information Pages and Categories all have SEO keyword fields, which you can find in their DATA tabs (except for Manufacturers which is in the GENERAL tab). These need to be set for all of the above to make them work. The reason the second link you've shown doesn't work is because it's product/manufacturer/product not just product/manufacturer
EDIT
product/manufacturer/product is actually a manufacturer link - it's just poorly named by OpenCart. OpenCart still knows it is a manufacturer link and you can see that by the id that's passed along with it (manufacturer_id not product_id)
Also, OC isn't meant to rewrite it's standard URL's, only product, category, manufacturer (individual manufacturer pages not the list of manufacturers) and info pages. This works on all versions that I'm aware of so if it's not with yours, the vQmod is likely at fault and you'll need to get the developer of that to fix it
I've written a route editor mod myself that doesn't require going in and hacking up a vQmod to get it to work so I understand the complications with it

How do Google opening links in a new window without target attribute?

i wonder how google manages to open external links in a new window/tab without defining target="_blank".
For example in google plus, all external links open in a new window.
I think its some Javascript voodoo but the .js code is obfuscated so i cant really look into.
edit: oh and followup question: why?
Using a framework makes this easy. Just have JavaScript look for links marked rel="external", or another identifier that shows them to be an external link, and dynamically add target="blank". Here's an example using Prototype:
$$('a[rel="external"]').each(function(a) {
a.setAttribute('target', '_blank');
};
It's not beyond reasoning for them to add the target attribute by javascript before allowing the anchor link event to return true.
It's Javascript. You can say:
window.open('http://example.org', '_blank').focus();
But please, don't. Opening links in new windows is almost always the wrong thing to do. Seriously, good uses of this are vanishingly few. If users want a link opened in a new window, they are quite capable of doing that themselves.
Jakob Nielsen was telling people this twelve years ago. Others have taken up the cudgels. The W3C removed the target attribute from HTML 4 because it was such a bad idea. I honestly don't understand how this usage persists. Don't you find it incredibly annoying when a website does this to you? Why would you want to write a website which does this to someone else?
Which brings me to your followup question. Why did Google decide to do this? I have no answer to that, and i am completely and utterly baffled how one of the very biggest, brightest, web companies could make such an elementary mistake. But then, a lot of the Google Plus interface has very poor usability (as in, mostly worse than Facebook poor); i suspect there is an interesting story behind it. Was the project under-resourced, and thus built cheaply on top of a rapid development framework such as GWT? Was it built as a spare time project by a lone wolf with a blind spot for web architecture? Was it driven by strategy wonks who didn't care about getting the technology right? Mystery.

Making a firefox/chrome extension from 0

i have a website, its to exchange links, files... to say it quickly it's my 'version' of twitter+megaupload,
Well, users add links all the time and so on, but i would like user be able to syinch his bookmarks from the browser to the ones he has at his profile of mywebsite,
Where should i look into?
Basically i need to be able to:
- Acces bookmarks file (1)
- being able to send the urls to my service ( 2 )
- maybe adding the login feature (in the future)
I was google'ing about this for ages few weeks a go and i kind of give up, because i'm ok with PHP and JS, but with this plugin languages i'm very lost. So i decided posting here, wich always brings positive answers
(1) - > I don't even know where to start
(2) -> i was thinking to have a website.com/auto_import_no_confirm.php?url=[URL] and put it in a for each.
how many different languages and extension files do i have to work with? I really need any kind of tip with point (1)
feel like?
-edit-
Just found This -> https://developer.mozilla.org/En/Code_snippets/Bookmarks
wich really looks like i need, but where do i place this code?
thanks!
Might not be a bad question, but there are too many subtopics raised to answer that. (And there is too much tagspam as well. Break up your question into PHP- and Javascript-specific tasks, when you have devised the general application scheme.)
But to get started, download similar Firefox extensions (.xpi) and unzip them to inspect the general structure. You'll find examplary code for bookmark handling and invoking remote APIs pretty quickly. And basically you only need Javascript for the extension itself. (It sounds like your extension does not need much UI.)
And there are many tutorials on designing Firefox addons: http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ or http://www.google.com/search?q=firefox+develop+an+xpi
The good news first, you won't need much more than javascript if you just want to access bookmarks and send them to a server, neither on firefox nor on chrome.
But still you'll have to make yourself familiar with the apis of the browsers and learn how to develop extensions.
However, both Mozilla and Google provide all necessary information on their developer sites.
For Chrome, this is a good place to start, you'll find the api for bookmark access here.
The Corresponding site for Firefox can be found here, with information on bookmark access here.

I need to two bookmarkets for delicious

I am current researching on something and I need to create , lets say, two bookmarkets. If I need to read this article later then I just want to click on that bookmarket and it should tag the current open page with read_it_later tag.
The second bookmarket should do similar thing. This one is for watch_video_later.
I don't want any prompt or anything.
I looked around but could not find any working delicious bookmarklet. You can assume that my userid on delicious is dorelal.
Thanks
I must use delicious because there are other people collaborating on this one.
If you're using FireFox, get Read It Later add-on. It does all that and 100 other cool things.
Check out http://delicious.com/help/tools, there are bookmarklets and also links to applications / toolbars for various browsers

How to get rid of stupid "pad" labels produced by RTML functions?

I am unlucky to be in charge of maintaining some old Yahoo! Store built using their RTML-based platform.
Recently I've noticed that HTML code generated by some RTML functions is sprinkled all over with "padding images" (or whatever is the conventional name for those 1x1 pixel images used to enforce layout). I have nothing against using such images, but... all those images are supplied with an ALT attribute like this:
<img href="http://.../image1x1.gif" alt="pad">
With all due respect to the original authors of RTML, but they must have been smoking something when they came up with this "accessibility enhancement"... :-(
Anyway, here are my questions:
Does anybody know a list of all RTML functions that generate HTML with all these "pad" images?
Is there any way to get rid of all those alt="pad" attributes without rewriting a lot of RTML code?
NB: This may sound a little cynical, but improved accessibility is not the main goal here. The main goal is to stop exposing those moronic alt="pad" attributes to Google and other smart search engines. So client-side scripting is not going to help, as far as I know.
Thank you!
P.S. Probably, most of you are really lucky and never heard of RTML. Because if somebody would establish a prize for software products based on
commercial success
------------------
usability
ratio, this RTML-based "platform" would probably win the first place.
P.P.S. Apparently someone from Yahoo! finally listened, because I can no longer find those silly "pad" tags in the RTML generated for our store. Nevertheless, one of the ideas offered in response to my original question does provide a very practical solution - not just to the original problem but to any similar problem with RTML platform. See the winning answer - it's really good.
The only way I see is to have your own website front-end that will filter whatever you want from the RTML site....
for example, your rtml site is at http://rtmlusglysite.yahoo.com/store/XYZ01134 , you could host a simple PHP front-end at http:://www.example.com that would be acting like a "filtering" HTTP web proxy, so http://rtmlusglysite.yahoo.com/store/XYZ01134/item1234.rtml would be accessed by http://www.example.com/item1234.html
It's not an ideal solution, but it should work, and you could do some more fancy stuff.
Nice try from the other posters, but there is a very simple RTML command that will do it. . .
TEXT PAT-SUBST s GRAB
MULTI
HEAD
BODY
TEXT #var-with-alt-tag-equals-pad-in-it
frompat "alt=\"pad\""
topat ""
The above RTML will find all instances of alt="pad" and replace it with nothing.
Well you're right on RTML being relatively untraveled :)
Do you have a way to add your own attributes to these images tags? If so, would it be possible to override the alt attribute? If you specify alt="", I would think that would override Yahoo's... Otherwise consider putting a useful alt tag in there for the blind and dialup types.
It's the first time I'm hearing about this platform, but here is an idea: if you can add javascript to the pages, you could write a function that will run after the page has loaded and remove all the alt="pad" attributes from the page.
Unfortunately this solutions works only with browsers that know about scripting, so lynx or some other text based browsers might not support it.
I have shared a link official RTML guide from yahoo. Hope it will help. Thanks!
List of available RTML books and resources

Resources