How to twitter like load a webpage - javascript

I'm the only one that noticed that the new version of twitter desktop even if there is no internet it still loads the main styling and then just tell that there is no internet? Well I did and now I'd like to make to a website that can be loaded even without internet, can anyone tell me how? I'm using pure HTML, CSS and js as front end and node js as a back end.
I currently have no idea how to do it
I'd like it to load ad be able to run flew scripts to generate elements on the page.

It's called Progressive Web Apps, Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience.
https://developers.google.com/web/progressive-web-apps
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp

A Web cache (or HTTP cache) is an information technology for the temporary storage (caching) of Web documents, such as Web pages, images, and other types of Web multimedia, to reduce server lag. --Wikipedia.
The web page is already stored, when you load it loads from the cache and a function which checks for connection gives the alert of no internet connection.

Related

Live Update Software for Web Pages on Multiple Screens

I have six devices on/above my desk:
A 4k TV
An Ultrawide monitor
Two laptop computers
An iPad
An android phone
All are connected to the internet and browsing mydomain.org/page, an html page that I am editing using one of the laptops, which has a full page of code. When I press a button on my Wacom tablet that I rerouted through Wacom smart actions to run a script, my code is uploaded over FTP to my server. Right now, I have to reload every page on every device to see the updated results. I want to make a javascript to run on my site that has a LiveLoad() global function. When I execute this function from the DevTools command line, the script stores a cookie that the device is a debug device.
All pages with the script will now enable a small icon over the page that when set to 'live,' the script will open a connection through secure web sockets with an update server that stores up to 10 connections (perhaps only from approved IPs, so that only I can use this on my live site), each registered to the page they are browsing. When I update mydomain.org/page or other pages, my script securely opens a connection and POSTs a secret code to the update server, telling it to send a message over web sockets to all connected debug devices with that page open. On fast internet, this truly will be the ultimate website building setup if I can just overcome this design hurdle.
What I don't want:
Anything more than a single php script for the server-side implementation. Shared hosting. No root access. No Node. No fancy crap. Single PHP files are the only option.
Bloated javascript addons. Bare minimum code for receiving a single type of message (an update is needed) is all I need. Perhaps later I can make it more robust with a second type of update (a hard update) where a php script processes all the fonts, scripts, images etc on a page and adds a random query string after them to force a hard-reload of all page resources.
How can I achieve this? Where to start with php web sockets? The internet has proven to be a cynical wasteland of bloated php libraries that require installation in a node enviornment to freelancers struggling to make scripts off of the 2013 websockets API documentation, with no good, simple solutions around.

How to edit documents from PHP app on client with native Windows apps?

Current situation
We have web app for document management programmed with html, php and JavaScript hosted on a centos vm. One usecase is that users are asked to check new documents content. Often they prefer to do the annotations in the document. Currently they need to download them, edit them with native Windows apps on their client and upload them again. Documents can be PDF, MS Office or special CAD formats.
Preferred situation
We would like to eliminate/hide the down- and uploading for the user. The editing should still happen with the native Windows apps on the client of the user. Web editors like for example PHPWord are no solution for us as there are to many special document types. To the user it should appear as no difference whether the document is opened from the local file system or the web app.
Question
With which technology can documents from the PHP web app be edited on the users client with their native Windows apps?
Brainstorming
Is it possible to use JavaScript to save a temporary copy of the documents on the client of the user? Do we need a browser plugin? Do we need a native app to support the process?

Use JS or some applet to create a screenshot in Firefox?

I'm creating a personal home page, due to the fact that iGoogle will be discontinued. One of the things I'm trying to create, is a speed dial-type interface, with website thumbnails as links, and I'd like to automate this process.
I've attempted screenshot automation a few years back with linux and the webkit engine. And it's fine. But my problem is, that I want the screenshots to be from my browser, i.e. my Gmail inbox, not the login page I'd get if attempting a remote screenshot.
I thought of using html2canvas but again, I'd have to load the source of the webpages remotely using a proxy, and that's not what I want. Another attempt of mine, was to load the website in an iframe, extract the source, and pass it on to html2canvas. Unfortunately most websites like google, facebook etc don't allow embeding their websites into iframes, so I'm still stuck.
How do plugins like FoxTab, and SpeedDial make the screenshots from within the browser without popups etc? They do it "browser side" silently, is it possible to duplicate this using just JavaScript? Or is there a way I could accomplish the same in another way, perhaps with a custom addon or something?..
Have you considered using a service like http://webthumbnail.org/ ?
http://phantomjs.org/ is also a great service for that if you want to do it yourself.
Take a look at phatomjs. We use it to take screenshots of all our hosted sites periodically. Phantomjs is a headless Webkit implementation.

Change server HTML app into self-contained desktop app

I wrote a simple web server that takes the public link to a google document containing image urls and names and outputs a print-friendly HTML photo directory with its contents.
I created it for a volunteer organization that I will no longer be able to stay involved in. I need to pass on the ability to generate that directory to my successor.
I'm not confident that I can trust myself to maintain that web application for the long term the organization needs. I'm hoping that instead I can change it to a self contained program, that members of the org could email around to whoever needed to generate the directory.
My first thought was to make a .html file the could open in a browser but I can't download the CSV data from google with Ajax, because it is cross domain. After googling there doesn't seem to be a way around this.
Is there a straightforward framework? I would guess I could do it with Adobe AIR, but I'd prefer something that simply removed the cross domain security feature.
I could take the time to embed a UIWebView into a Mac app, but since I want to write the app primarily in HTML, I'd have to create a bridge to let the web view make a cross domain request anyway right? Also it's not cross platform.
Any other ideas? How can I package my app as a desktop application instead of a web service?
You can get around the cross domain XHR using flash. CrossXhr can do it from apps served by regular http servers. I've never tried it with a static, file-served webapp. Follow the instructions here:
http://code.google.com/p/crossxhr/wiki/CrossXhr

Generating Dynamic web pages without server side scripting

I am trying to control a media device which has lot of multimedia content that it can play using another device(remote control device) like an ipad connected to the LAN. (UPnP)
I want the media device to be able to send the content listing to the remote device so that it will be rendered as a webpage on the remote controller. And actions on the webpages needs to be sent to the the device as commands to execute (like play, pause, next etc). The media device is an embedded device, hence can't have any server side scripting, all has to be done on the client side.
I want the page rendered to be HTML5. So, is it possible to generate dynamic HTML5 pages using just client side scripting?
Thanks a lot.
I am an embedded systems developer hence clueless about the web designing stuff.
Yes, this is possible. I work at Plex, and we have a similar need. Our Plex Media Server is a bunch of C++ software that doesn't build web pages or anything like that, it just serves static files and has API endpoints for controlling media.
I built a media manager that allows configuring the system (but not playback as of now, but the principle is the same) using a web page that is totally static. In fact, we use Cappuccino, which is essentially a JavaScript-only way of building a web page (there's essentially just enough html and css to bootstrap the Cappuccino environment). It uses Ajax to hit the C++ API to do anything else it needs to do.
You might try something similar, but it by no means needs to be Cappuccino - you can do it perfectly well with jQuery, HTML, and CSS.

Categories

Resources