Is there a site I can open in my browser like Codepen, JSbin, etc that actually serves my code instead of just runs it in the current window?
There are cloud IDEs and so on but I just want a way to throw up some code as easily as Codepen but puts it on a static server and gives me the URL.
You talk about using Codepen in your question. Currently, Codepen does provide a way to serve a static version of anything you post, with a static URL. To get the URL, open the Codepen pen, and look for the button that says "Editor" (at the time of posting this, it has an aqua bar near it). Click on the Editor button, and look for "Full Page". Just to the right of "Full Page", there should be a small link you can click that reads "Get URL".
I'm unsure if this answers your question, as the question is a tad unclear, but I believe I've done what I can to parse what you're asking.
Related
please may I have a little help I'm stuck not being able to google for a solution because of very common words.
There is a web page that uses POST to send data to a page on a subdomain when a button is clicked.
I need to recreate a button and send the same information.
My question is: Is it possible just by looking at the page (and the console??) when you click the button, to observer what happens and recreate/implement the same POST method?
Can I say for example: It does this, therefore I need this code to do the same thing?
Or is it not possible to reverse engineer? Will I have to seek help form the web page developer (not really an option in this case).
It is perfectly possible to inspect the request and reverse engineer this. You can use tools like the developer console in your Chrome/Edge browser (press F12), and tools like Postman to simulate requests. Also inspect the form and eventual javascript events attached to the button.
I'm attempting to use LinkedIn's Membership Profile Plugin found here:
http://developer.linkedin.com/plugins/member-profile-plugin-generator
However, every time I paste the code generated into my HTML document, nothing seems so show up. Forgive my ignorance if I'm missing something, I'm fairly new to HTML and CSS. After doing some searching I've seen a lot of talk about their API. Do I need an API key to get this to work? Or am I just missing something in my code?
Here is an example of the code I'm attempting to use:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="(Profile URL)" data-format="inline"></script>
Thanks for any help.
It definitely has to do with the fact that you are accessing it through file://C:\ ... \mypage.html instead of hosting it on a server like http://myserver.com/mypage.html.
You can see the error in Chrome if you press F12 for Developer Tools, under Console. It is hard to find the original reason, because all of it is run in those scripts.
But the scripts work, and you can see it running if you just paste it in somewhere like W3Schools TryIt page
Try with your "linkedin short url". For Example: "https://www.linkedin.com/in/xy":
You can customize your public profile URL when you edit your public profile. Custom public profile URLs are available on a first come, first served basis.
1.Move your cursor over Profile at the top of your homepage and select Edit Profile.
2.Click the URL link under your profile photo. It will be an address like www.linkedin.com/in/yourname
3.Under the Your public profile URL section on the right, click the Edit icon next to your URL.
4.Type the last part of your new custom URL in the text box.
5.Click Save.
I am obviously new to HTML and Web Browsers and python too. I installed the Web Developer extension in Firefox and noticed that in addition to the "View Source" option there are two additional "View Generated Source" and "View Frame Source" options. What are these? Why should they be different?
I have no idea what a generated source is.
Aren't frames part of the page? If so why do I need a separate "View Frame Source" option? Does it mean that the regular "View Page Source" will not show source for all the elements in the page?
If I want to see the code that is executed/used to show me a page which option should I look at and why?
If I want to get this code in python using the requests module how do I get these various sources?
HTML code can be modified dynamically be javascript. "View Generated Source" will show you the HTML as in it is current state that might have been modified by javascript and differs from the html delivered by the server. So this is interesting for the debugging javascript applications.
"View Frame Source" is for websites that are using HTML framesets. Such such sites are a composite of multiple single html sites that are displayed together at one page. Is an older attempt of web design but still widely deployed. So such sites can look like a simple page with the menu on the left side and the content beside it. Using framesets there would be a menu.html and a content.html. Both html sites can be displayed separately in 'Web Developer Toolbar' while clicking with the right mouse button on it and select "Show frame source"
Question 1 and 2 should being answered. Question 3.
If I want to see the code that is executed/used to show me a page which option should I look at and why?
Answer use "View Generated Source..." as this will give you the html you are actually seeing diplayed in browser regardless if it is generated by javascript or not.
Unfortunately I'm not a python expert so question 4 keeps open
The generated source is the result of the frame source that is fetched by the browser then the execution of the javascript on the browser to modify this page.
To understand more how browsers get an html page compared to a program check my answer here:
https://stackoverflow.com/a/15775702/707949
Then to get the sourge html page check this answer:
https://stackoverflow.com/a/15799102/707949
And to get the generated html source, check the end of the first answer
I'm quite new to web development, but I'm trying to do some stuff in Python and so I need help.
Sometime ago, I went into a page to debug html forms that allowed me to change the POSTs to GETs in the form request and that really helped me get some info from html forms by just doing everything in the URL instead of having to make my program fill some forms.
Unfortunately I lost that page address and as much as I search in Google I cannot come up with it or anything similar again. Can you direct me to some links that do this?
I tried both Firebug in Firefox and developer tools in chrome, but they don't seem to do this.
Ok, this is probably quite basic for most people, but in Firebug, you just have to go into the "NET" tab, make the request and then analyse it and if you right click it and choose: "Copy location with parameters" you get the formatted URL ready to go, even when using javascript.
If you have: <form name="form1">
You can this JavaScript:
document.form1.type="GET"
Use this in the page before submitting the form.
The web developer tool bar for firefox will do this and much more:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
EDIT
You can also use firebug and inspect the form element and change it from POST to GET
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.