Ranjeesh Loves to Share

How to Show The Active File in Visual Studio Solution Explorer

Once you get used to VSCode, where it automatically highlights the current active file on the solution explorer, you will have trouble with the Visual Studio Professional IDE which which has that feature disabled by default.

Not being able to see where the file is located in the solution explorer folder structure can slow you down in the development process when you are using a full fledged IDE like Visual Studio Professional or Enterprise or Community Editions especially when you have multiple projects within a solution.

Its an easy fix!

We just go to the Visual Studio : Tools > Options > Projects and Solutions and enable the “Track Active Item in Solution Explorer” option and that will enable this feature.

One thing to remember is that, if you are used to a feature on one IDE, that feature is definitely going to be present in another IDE too, either as an existing option hidden somewhere or as a extension or a plugin. So do not get worried that you have to learn a new IDE usage!

Javascript Arrays: Destructuring and Spread Operator

I have worked with Javascript for years now but all these years I was using jQuery and plain javascript with various libraries like jQuery UI etc. Just couple of years ago I was moved into a work environment where everyone except me was doing Angular development. And some were working on moving the angular apps to React.

Given that I have never worked on Angular or React before, I was chose as a candidate for learning react from scratch. I have been working with React for 2 quarters now and I still see so many unknown syntaxes and functionalities.

I have gone through a couple of tutorials for react which made a little bit of sense. But most of the syntax things that I am not understanding are plain Javascript and not react syntax. This made me realize that I have been so out of touch with the javascript that all these new libraries and frameworks syntaxes seem so new to me.

Two of the main weirdness that I found were the array destructuring and the spread operators.

Array Destructuring

This deals with assigning array values to individual variables in very simple manner as follow:

const foo = [‘one’, ‘two’, ‘three’];

const [red, yellow, green] = foo;

console.log(red); // “one”
console.log(yellow); // “two”
console.log(green); // “three”

Refer to the mozilla documentation of javascript for other ways of assignments. All were very interesting way of doing things. The most common ones that I saw being used in React was returning a function’s return array values into variables in React Hooks using Array Destructuring as below:

const [count, setCount] = useState(0);

Spread Operator

This deals with extracting some of the values from an array into a few variables and then keeping rest of them as is. Going through this will probably explain it better than me.

In other words, if you have an array of 10 values and want to only separate 2 values out of it for use keep the rest of them where they came from, you use the spread operator. Look at the example below:

const [a, …b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

Overall, it is fun learning these new syntaxes and using them in day to day work. Will keep learning until I totally understand it and feel like a pro 🙂

If you need more info on these please refer to the Mozilla documentation of javascript.

Thank you for reading.

Testing a website from server before DNS switch via SSH Tunneling

This is a continuation to the blob I previously posted. Since then I have found another way of testing a site without switching the DNS.

What this approach does is, it assigns the port from the server (that you are migrating your site to) to a port on your local machine. And you can add your domain name on the hosts file with the 127.0.0.1 IP and you should see the site loading on your browser only. More details below:

Requirement: You need to have ssh access to your server obviously and have a tool on your local development PC that lets you ssh via command line.

Open the terminal and type the command below on your local PC.

ssh -L localPort:remoteServerName:remotePort username@remoteServerName

localPort : is the port where you want the application to be mimicing on your local pc.

remoteServerName: Hostname of the remote server where your application is being setup and migrated.

remotePort: The port number on the Remote Host server where you application is being servers by Apache or other web server.

username: The user name that you will use to ssh to the remote server.

After doing the above, update your hosts file on the local development pc to point the domain name you are trying to test to 127.0.0.1 . example : 127.0.0.1 www.testsite.com
If you chose port 80 or 443 for localPort, then type the domain https://www.testsite.com on your browser and it should show the site that is running on the remoteServerName:remotePort.

You should now be able to test all your sites running on your servers using the above method via browser unlike the curl method mentioned in my previous port.

Testing a website from server before DNS switch via CURL

If we come across a scenario where we are migrating a high traffic site from a third party hosting provider like hostgator or godaddy to a IaaS host, we will come across a situation where we want to test if the site that we setup on the IaaS server is ready for us to do a DNS switch.

To accomplish that testing we can use ssh to the IaaS server and once all is setup we can test it using the curl command as below:

curl --verbose --header 'Host: www.mywebsite.com' https://ipaddress:port -k

–verbose will give you a detailed overview of the command

–header ‘Host: ‘ will allow us to tell apache2 which domain name are we trying to test.

Then we provide the https://[current ip]:[port] to tell curl that we want to check the response for the above domain name on this ip address and port.

-k will allow curl to ignore any SSL certificate issues if you havent finished transferring the SSL certificates to the server yet.

Apache2 Alias directive in different virtual hosts files

Situation:

I have two Drupal / PHP websites / applications

https://qa.example.com/app1

https://qa.example.com/app2

I wanted to setup Apache2 to listen for SSL connection on port 9443 and need to have 2 seperate virtual host files or site files under “sites-available” folder in Apache2.

I created something like this for each

<IfModule mod_ssl.c>
<VirtualHost *:9443>
ServerName qa.example.com
ServerAdmin webmaster@server

Alias /app1 /var/www/html/qa/app1
DocumentRoot “/var/www/html/qa/app1”

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/app1-ssl-qa-error.log
CustomLog ${APACHE_LOG_DIR}/app1-ssl-qa-access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with “a2disconf”.
#Include conf-available/serve-cgi-bin.conf

# SSL Engine Switch:
# Enable/Disable SSL for this virtual host.
SSLEngine on

# A self-signed (snakeoil) certificate can be created by installing
# the ssl-cert package. See
# /usr/share/doc/apache2/README.Debian.gz for more info.
# If both key and certificate are stored in the same file, only the
# SSLCertificateFile directive is needed.
SSLCertificateFile /etc/ssl/certs/example.pem
SSLCertificateKeyFile /etc/ssl/private/example.key

<FilesMatch “\.(cgi|shtml|phtml|php)$”>
SSLOptions +StdEnvVars
</FilesMatch>
# <Directory /usr/lib/cgi-bin>
<Directory “/var/www/html/qa/app1”>
SSLOptions +StdEnvVars
Options Indexes FollowSymLinks MultiViews
AllowOverride All
</Directory>

</VirtualHost>
</IfModule>

The issue:

I need Apache to load App1 when app1 url is accessed and app2 when app2 url is accessed. But when setting up the two apps with seperate virtual host files like above, accessing the apps using either urls only loaded the first virtual host listed in Apache.

The Fix:

I had to merge the two aliases to one virtual hosts file like below to make it work how I want.

<IfModule mod_ssl.c>
<VirtualHost *:9443>
ServerName qa.example.com
ServerAdmin webmaster@server

Alias /app1 /var/www/html/qa/app1
DocumentRoot “/var/www/html/qa/app1”

Alias /app2 /var/www/html/qa/app2
DocumentRoot “/var/www/html/qa/app2”

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/app1-ssl-qa-error.log
CustomLog ${APACHE_LOG_DIR}/app1-ssl-qa-access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with “a2disconf”.
#Include conf-available/serve-cgi-bin.conf

# SSL Engine Switch:
# Enable/Disable SSL for this virtual host.
SSLEngine on

# A self-signed (snakeoil) certificate can be created by installing
# the ssl-cert package. See
# /usr/share/doc/apache2/README.Debian.gz for more info.
# If both key and certificate are stored in the same file, only the
# SSLCertificateFile directive is needed.
SSLCertificateFile /etc/ssl/certs/example.pem
SSLCertificateKeyFile /etc/ssl/private/example.key

<FilesMatch “\.(cgi|shtml|phtml|php)$”>
SSLOptions +StdEnvVars
</FilesMatch>
# <Directory /usr/lib/cgi-bin>
<Directory “/var/www/html/qa/app1“>
SSLOptions +StdEnvVars
Options Indexes FollowSymLinks MultiViews
AllowOverride All
</Directory>

<Directory “/var/www/html/qa/app2“>
SSLOptions +StdEnvVars
Options Indexes FollowSymLinks MultiViews
AllowOverride All
</Directory>

</VirtualHost>
</IfModule>

This way the problem is that we cannot disable one app and keep the other enabled. If anyone knows a solution for this please let me know.

Open link in different chrome profile window

Google chrome has this new feature to open links between chrome people which I think is cool.

Google’s Chrome Browser has this cool feature, which a lot of people do not know, where you can maintain different profiles with different set of bookmarks, themes, history and all other chrome features. You can either use your different gmail addresses to create the profiles or you can use it without associating with a gmail account.

If you are familiar with this “add person” / “manage people” feature on the Chrome browser , you will appreciate the “Open link as [person]” context menu item that seems to have been implemented recently. This is very helpful when you want to keep specific type of content on specific profile on chrome.

For example, If you have a profile [chrome person] for all your personal accounts like facebook and another profile [chrome person] for work, you would some times want to share a link from your work profile on the personal profile. So instead of going through the process of opening another browser on the other profile and then copying pasting the link from one profile browser to another you can just open in another profile using this link.

This was a new discovery for me today and will be using it a lot now on. If you are not familiar with the “add person” profile feature on chrome you should start using it soon! It helps you keep work and personal stuff seperate.