Best way to check web-responsiveness - reactjs

I am wondering if there is a way to check website responsiveness without uploading my code to a host site. I have all of my files and code in VSCODE and I have tested it out through shrinking the browser etc but I actually want to see my site on different devices before I upload my code. Because everything is local to my device I can't think of an easy way to do this without actually uploading everything? Any ideas?

Note: I assume that you already have the Live Server extension installed in your vscode IDE and you are able to open your website on the web browser on the same computer
There's an extension for vs code called MobileView
You can check your local websites as well as global ones just copy and paste there the website link. But it is limited just to three mobile devices (iphone X, 8 and google pixel). You can open all three previews at the same time in different tabs.
But it additionally allows you to check how your site's design will fit to the phones real exterior (its color and shapes).
And of course you can open your website on the real mobile phone if your vscode computer and the mobile phone are on the same wifi network.

Related

HTML to .doc on phone download Coldfusion

I'm trying to get my html content to download and run in MSWord on mobile using Coldfusion. It currently downloads, runs, and opens correctly on a PC, but when I try to go on a phone it will not open. It downloads but says, "Can't open file."
<cfheader name="Content-Disposition" value="inline; filename=test.docx">
<cfcontent type="application/vnd.word">
I have also tried:
<cfheader name="Content-Disposition" value="inline; filename=test.docx">
<cfcontent type="application/msword">
Does mobile handle HTML to MSWord differently than a desktop?
According to Microsoft's documentation the following are correct for MS Word (as of Office 2007:
.doc: application/msword
.docx: application/vnd.openxmlformats-officedocument.wordprocessingml.document
For whatever reason, it's possible that even with the correct mime-type, iOS or Android is still seeing the content as HTML.
You might take a look at https://www.docx4java.org/trac/docx4j. Haven't tried myself, but might fit the bill.

How do I view my site on multiple screen sizes?

Ok, so I know how to write code for multiple screen sizes. But, I have no idea how to view my code on a mobile device before making my site go live. Please help!
You can play around with emulators which can simulate a variety of cellular devices. These can be downloaded using a program called Bluestacks for example.
If you have Google Chrome you can open a website and press F12 (on windows) to enter Developer Mode.
On the top left you can see a little smartphone icon.
Click it and choose a device. Then refresh the page.
Chrome will emulate the experience of a smartphone user straight from your computer, sou you can test it from there.
This is a view of this question on the emulator:
Here is the solution if you are using safari.
Enable the "develop" menu bar using Safari > Preferences > Advanced. Your menu bar should look like this:
Go to your website
Go to Develop > User Agent and choose the device/browser you wish to emulate.
You have two options.
Use of Emulators.
What you need - is any modern browser. Nearly every modern browser will offer you roughly similar emulator capabilities where you can select a target device/resolution. #intboolstring & #Pither has already mentioned safari & chrome options for you. IE & Edge have similar features (which you can probably explore yourself or see this link IE Emulator feature).
Using actual devices.
What you need - 1) wireless router 2) your dev machine/laptop which has a web server (like IIS on windows) & 3) some mobile devices (I would assume you would have atleast one smartphone which has a mobile browser on it).
You will need to connect your dev machine/laotop & your device(s) to the wireless and setup firewall on your dev machine to allow access to your website on your local wireless network. Check out this answer.
Once this is done, you should be able to load your site on any device connected on your wireless by tying http://your.dev.machine.ipv4:port-if-applicable/landingpage.html in the mobile browser.
(to find your machine's ipv4 address, goto command prompt and type ipconfig and press enter - I am assuming you are using windows)
You may be limiting your testing to a much smaller set of devices (ones you have access to). But this will give you a real-world idea (if not a much better one) of how you site renders & behaves on devices.

Flash/AS3 - Saving a File without Prompt

I need to save a file in Flash without a prompt; what my program does is it gets all the frames from the stage and then it saves them as png files, along with a text file that has the name of the object, and some other properties about it. The code that I have does save it without any problems, but I need it to not prompt me, because I have lots of frames to do this with.
Is there a way to do this with Flash the program or actionscript?
No, unless you're using Adobe AIR. The reason for this is Flash Player and its programs are generally run through a browser over the Internet, and if people could use Flash Player to just start saving files on other people's computers, there would be some very serious security issues. AIR, on the other hand, is generally run on a desktop, laptop, or mobile device, and its programs are run directly off the same, having been pre-installed. So whereas a website can suddenly just start running a script with Flash Player without asking you first, AIR requires you to have already installed the script/program on your computer, meaning that it should be there intentionally. So security restrictions are lighter, enabling the use of the File class in your programs.
The only way to save a local file with the Flash Player (in the browser) is with FileReference and it will always prompt the user.
However, using AIR (desktop or mobile app) you can save to the local file system without user input, using File and FileStream. You can create an AIR app using Flash Pro, usually without any code changes other than the AIR APIs you need (flash.filesystem in this case).
Another idea, if you must use Flash Player and not AIR, is to first zip all the PNGs and only save to file after they are all packaged. This way there's only one file and prompt to save.

Smartphone browser emulator

Im trying to test my website on different kind of devices, for example iphone, tablets or androids. The problem is i do not have access to all of those devices and every so called online emulator doesnt really emulate anything else besides resolution.
So say iphone related issue doesnt appear on my computer.
My question would be whats the best paid or free service that would provide me the tools needed to test my website on as many different devices as possible?
Just to name a few so far i tried:
http://mobiletest.me/
http://www.mobilephoneemulator.com/
http://www.brickandmobile.com/mobile-emulator/
None of them displayed same issues that im having on the actuall device.
For Android, you can install the SDK, which includes a device emulator that runs Android in (basically) a virtual machine. This virtualized copy of Android includes the browser, so you can use it for testing your site. You can create virtual Android devices with a variety of screen sizes, so you can test your design on both phones and tablets.
Note that if you want decent performance from the emulator, you should configure it to run an x86 system image (as opposed to ARM), and install the HAXM add-on (available through the SDK manager app) that enables the emulator to use your processor's virtualization support. This allows the emulator to run the Android system directly on your real processor, instead of having to emulate a processor. You should also enable the "use host GPU" option so that graphics in the emulated Android device can be hardware-accelerated instead of rendered in software.

Round trip editing of binary documents stored on a server

I'm looking to build some functionality for a content management system for the editing of files stored on the server.
I'd like to provide users the ability to easily download files locally to their computer, open the file for editing, and save it back to the server. The process should be as seamless as possible.
Here's the steps today:
Click the link to download the file (say a PSD) in a web browser
Save it to disk
Find the file, open it for editing in Photoshop
Make changes, save the file
Go back to the browser,navigate to the file that was downloaded.
Click "replace file"
Find the file, upload it back to the server.
Here's what I want:
Click the link to open the PSD file
File is downloaded, Photoshop launches
Make changes, save the file
File is uploaded back to server, replacing the original file
Those who have used Sharepoint know that this works (using WebDAV) but only with the Office applications (PPT, DOC, XLS). I'd like it to work with all file types.
This will take some kind of software to be installed locally - perhaps a separatly installed application with a mime type registered, a signed java applet, or a firefox extension.
This seems like a problem that should have been solved. Has anyone seen this done before?
Windows client OS has a WebDAV redirector and has had for a long time, so
a) you shouldnt need a client piece and b) it's not specific to Office files.
The fun bit is the server end, implementing a WebDAV server.
WebDAV isnt supported on client OSs like Vista (IIS5.1 has support, 6.0 doesnt), only on Servers (2K3, 2K8...)
There is goo/examples/frameworks (cant recall which from when I researched it) available for implementing a WebDAV server, but it requires a server OS [so I had to discount it as the host in my case could potentially have been Vista/7, not server/XP).
The site WebDAV Resources includes a link to at least one open-source server implementation. I haven't used this software, I'm just citing the reference.
It appears that Apache has deprecated or dropped support for server-side WebDAV since the Jakarta Slide project has been retired.

Resources