I'm new to both web development and firebase storage. Usually if I were to make a website with publicly available images, I would just put that image URL into the src attribute of an <img> tag. And probably if I was using custom content on squarespace or something there would be a way to upload your images so that you could still just add the photo the same way? But since I'm using firebase hosting I thought I would use firebase storage to store my custom content.
So if I have a homepage that has images I want to display, is it effective to use Firebase Storage and just call the getDownloadURL method to get a url that I can then inject into my HTML via Javascript?
I tried one instance of this, and it seems that the page pops up and then the download url came in after (unsurprisingly) but that just gave the whole thing a slow and laggy feel. Maybe it just feels that way because everything else was local on my machine so it popped up effortlessly, and it would look better when they're all being downloaded? But that seems kinda expensive in terms of network speed and usage, right?
Perhaps I'm just calling it in the wrong way (right now the script is referenced in <head> and that's how it's being rendered. Is there a best practice in terms of rendering content like this?
If the images are dynamic you should use the firebase storage but if you mean static images of your side I don't see any benefit to use the storage. You can host the images directly with your JS code with the Firebase Hosting.
The hosting is also using the Google Global network to reduce the loading time of your side and with that also of your images.
Related
I have a URL and I need the content inside this URL. Actually, I wish to embed the content present inside this URL. What all are the possible ways to do this without any cors issues??
I have already tried using iframes and other tricks to avoid cors issues. But still, I am not able to embed many websites in an iframe. My main aim is not to embed a website in an iframe but to embed the content inside the website URL.
I will be more than happy if there is an API which returns me back the content in a URL website.
If there is not, then how can I create such an API?? And how do I get it hosted??
As a solution to this, I created a flask app which will return me the whole website so that I can embed it in my iframe. But then it is like a proxy server and I cannot host it on Heroku because Heroku does not allow public proxy server.
Please note embedded the whole site or just the content is of similar use to me. It is just that when embedding the site, it will be interactive and in the other case, it will not. I am good with both, embedding just the content or the whole website.
Now, I am thinking to make a web crawler which will crawl the web, cache websites and store them in a database. I am thinking to host this on firebase. I have no idea about the capabilities of the firebase. I just know that it provides us with a NoSQL database and some cloud functions.
The cloud functions part interests me.
I don't know if the following is correct/feasible.
I will send the URL(whose content I need) to firebase. It will then fetch the whole website and store it in the database(so, that next time I request the same URL, it does not need to recache the whole site again) and then return me this cached content.
If there is other better way to do this, please let me know.
I need the content for my chrome extension https://github.com/Shaikh-Ubaid/InSyd
For code, please refer to this GitHub repo.
To get an idea of why I want to get content/embed content, I am attaching a gif showing the working of the extension.
<img src="https://raw.githubusercontent.com/Shaikh-Ubaid/InSyd/master/Popup-demo.gif" alt="gif" />
I have an application I develop. It should show some stuff like help and legit stuff in a WebBrowser control. This works so far. I can use either a local .mht file or a url.
But I want to use both. So the content will be used online (if possible) or offline if the system has no internet connection.
Now I'm thinking about a pure JS solution, so the script tries to get the page online and displays it, or if it fails uses the local stored copy of it.
Any thoughts?
Any sort of AJAX request you make in any library will let you give an error handler. If an error happens, that's when you load the local copy.
I'm making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it's content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?
Since it's static pages, you can't rewrite the hosted file from the front end client. To update the text file contents, you'll need to do it through the github interface, or as a commit into your repository unfortunately
No.
Changing content on the server requires code that runs on the server.
If you could do it with client side code, then every website would rapidly become defaced.
The closest you could do would be to store data on the client (e.g. via localstorage) and then have a script on the page read that data and edit the DOM locally. Obviously, changing the data would change it only for the particular browser and not for all visitors.
There are two answers to your question:
Technically, it is possible to change files on GitHub from a script:
GitHub's API allows you to update files through an HTTP request.
You could use Javascript to modify the contents of a file, and then send a request to GitHub's API to update that file. There are a few libraries that make it really easy to work with the API, but from here you have to figure it out yourself.
Here is the documentation for this: https://developer.github.com/v3/repos/contents/#update-a-file
Conceptually, it sounds like you are doing something wrong. Static webpages are called static because nothing changes. If you want to have dynamic content, you should really look into other solutions.
Is there any client-side script that would be able to make changes to a file on the hosts computer? (Intention stated below)
I am creating a packaged app for chrome which can show some online data, and make it available even when offline.
There is a certain thing, for e.g. 'a webpage' i want to show/store (but i cannot get/read its contents due to it being on different origin). To show when online, i can use iframe, but am unable to preserve it for offline.
So i thought i could make an appcache (manifest within the application package) which will cache the file, and on press of an update button a script would run which would make some change to the manifest which would force the cached resource to be reloaded.
I searched a lot, but no results.
Any suggestions as to how it can be done. Or any other way to get it to work?
I don't think so. This could be a huge security problem if it existed.
If you had to, you could send an ajax request to the server to create a file it creates with the current prices, and add it to the appcache file.
Here is a link to another SO quesitob that has a list of APIs you could use to get your stock price.
Webservice to get stock quotes?
Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks
A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.
You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.
You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.