Booker

Sunday, April 19, 2015

Adobe Brackets - live page preview

Tired of IDE's that have their own HTML viewer or just have to put up with WEBKIT or  Gecko (depending of the developers choice).

Well, guess we won't use it that no more, as it seems Adobe Brackets has some feature called Live preview allowing to see live changes of the page.
In the background it's starting your html file through Node.JS server and you can open the url from any browser.

The following screenshot ilustrates Adobe Brackets used in multiple browsers on Kubuntu 12.04 LTS:
As seen on the screenshot above, the selected text inside the IDE is being highlighted in all opened browser tabs.

JavaScript 

Inline script

Consider the following inline code:
        <script>
            var myHeader = document.getElementById("myHeader");
            document.getElementsByTagName("h2")[0].innerHTML += "bla";
        </script>

First to get the javascript changes we need to cut the whole script block, and paste it in-place :(.
This will append "bla" text after the current text "This is your guide!".
Now we have:
"This is your guide! bla"

However, if we change the script content i.e then add some new variable or whatever, afterwards with the same procedure cut the code and paste it, will result in adding "bla" again, i.e:
"This is your guide! blabla"

This means that the HTML contents it's not being reloaded, but instead, it only change the content at the changed node and the only workaround is to manually refresh the browser's page.

So, don't do javascripts edits :D!
Instead after each change, refresh the page, to get genuine results.

All the tests above are made by me :).

Sunday, April 5, 2015

How to test your site using localhost/vpn routes via Proxy - 2

Do you constantly move from one to another network ?

Your site via proxy doesn't work ?


- No, problem.

Config

edit the configuration file:
vim /etc/squid3/squid.conf

locate line:   TAG: http_access define a variable:

Previously we added
 acl our_networks src 192.168.0.0/24
Now change that to:
acl our_networks src 192.168.3.0/24
that is if you have subnet 3, check ifconfig to see your interface:
$ ifconfig
wlan0     Link encap:Ethernet  HWaddr xx:xx:xx:xx:xx:xx
          inet addr:192.168.3.100  Bcast:192.168.3.255  Mask:255.255.255.0
          inet6 addr: xx:xx:xx:xx:xx:xx/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:3714352 errors:0 dropped:0 overruns:0 frame:0
          TX packets:2671820 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:4256463650 (4.2 GB)  TX bytes:540745144 (540.7 MB)

Proxy Restart

finaly restart it:
sudo service squid3 restart
Client:

  • Uncheck Automatically detect settings.
  • Enter: 192.168.3.198 (your address will differ, ifconfig in your servers terminal to get it right ;) )
  • Port number 3128
  • Click OK to finish and close the other window as well.

Wednesday, April 1, 2015

Test Mobile pages on Android/iOS devices

Continuing on last time Test website via proxy now we'll talk about testing mobile device via Proxy.

Set the proxy as usual.
(Win proxy guide will be here soon ...)

Android

Open the wifi settings and point to the desired AP that the proxy is located on (needs same subnet), and open it's properties, so that you see something like that illustrated on the picture.

Scroll down and locate Proxy Settings on the dropdown select Manual and then Proxy hostname will contain the IP of the proxy server, the Proxy port will contain the port of the proxy server. Touch Save to continue, just in case turn off/on the wifi connection and then connect to the AP.







Now open Google Chrome and just type the desired URL of the development project you work on.

Every URL request will load through the proxy, no matter if it needs VPN, local database and other stuff.

iOS

todo