Skip to main content

Posts

Showing posts from 2020

ngrok, a service to help you get a public URL for your local webserver

If you are looking for options to test your web app hosted on your own machine (e.g., laptop) remotely with someone, I recommend using a service called ngrok. https://ngrok.com/ It has many usages, but in the context of testing an app hosted on your own machine, the most important part is giving you a public URL that will redirect all the requests to your local webserver (e.g., Apache, Nginx, or whatever server you are running). You can give this URL to a testing participant without the need to host the app on a remote server. For instance, if you are testing your app using a sever on your machine, typically you can access your app in a URL like:  http://localhost:3000/?study=11 Using ngrok, you will have a dynamically generated URL like the following: https://3ebe3c019867.ngrok.io/ The service will redirect requests to https://3ebe3c019867.ngrok.io to http://localhost:3000 You can then share the following link with your testing participant for the participant to use your app. https://

Brackets: a free editor/environment for web development

 There are a lot of options, and VS Code is one of the top contenders. I am a VS Code fan, but if you are looking for an alternative, Brackets is another option that I find appealing. It was built for web development, using HTML/CSS/Javascript. I think it is especially helpful for people who just start learning HTML/CSS (and maybe Javascript). http://brackets.io/ Brackets has some built-in features that are pretty convenient. 1. auto-complete for CSS property and value. 2. Live preview the webpage to reflect the changes being made. You can make changes in code and see the result instantly. 3. In-place editing of CSS rules (you can select an element/class name in HTML and press the short keys to edit the corresponding CSS rules directly). 4. Code to browser mapping: you can select/edit an element in HTML or a rule in CSS, and the corresponding user interface elements or those that will be affected by the CSS rule will be highlighted in the browser. See this video for an overview. The vi