Category Archives: Mac

NGINX New Site Creation and Server Configurations

Today I'm going to share with my readers my list for manually creating another website on one of my NGINX servers. I am partially logging this here for my own reference as I often look for these directions I keep stored in a .txt file on my laptop. Wherever you see text in green in this post, it will indicate that the text is to be entered as a command at the command prompt in Linux.

Step by Step Directions to Add a New Site on NGINX Servers

1) Sign into Linux server using an application like Putty (Windows) or Terminal (Mac):

Login with root user and password if possible, otherwise login with the user and password you have and remember to use sudo commands(purring sudo before each command line command)

2) Create the website directory (for example, your_new_site.com):

mkdir -p /var/www/your_new_site.com/public_html
mkdir -p /var/www/your_new_site.com/logs

3) Change the ownership of the directory to the web user:
chown -R www-data:www-data /var/www/your_new_site.com/public_html
chown -R www-data:www-data /var/www/your_new_site.com/logs

4) Create the web site config file. To do this, you can simply copy the config file of an existing site and then make the required changes. For example try this command but change the existing_site to your own existing website on your server:
cp /etc/nginx/sites-available/existing_site.com /etc/nginx/sites-available/your_new_site.com

5) Edit the new config file to replace with the new site’s values:

nano /etc/nginx/sites-available/your_new_site.com
Edit the line that reads: root /var/www/existing_site.com/public_html to be the current domain name.
Edit the two server_name instances to be the new domain name.
Edit access_log and error_log paths for new domain name
Save the file by hitting Ctrl-X, then Y and then Enter.

6) Enable the new site in NGINX:

ln -s /etc/nginx/sites-available/sandiboudreau.com /etc/nginx/sites-enabled/

7) Restart NGINX:

service nginx restart

9) Create the database and user.

mysql -u root -p
your_password
create database database name;
(note: I often create the db and user with the same name as the domain name. That makes it easy to remember. However, MySQL users are limited to 16 characters. so if the domain name is longer, I truncate both in some fashion. Just make sure theu match.
grant all on your_new_site.* to 'your_new_site' identified by 'secret_password';
(the last part is the password. just make up a hard one - record this where only you can find it, you’ll need it with the restore)
quit

8) Copy your new website files into the public_html folder with your sFTP client and your site is up and running!

Using PHP to create an NGINX SITE MAKER

I used the above knowledge to create a Site Maker tool that does all the steps for you. All you have to do is enter a domain name. Email me if interested at linian11@yahoo.com

Summary

So, this isn't too hard if you have something to reference such as the above cheat sheet. Once you get used it doing it, it is really easy. However if it's too complex, you can do what I did and make a tool to do it for you. Even if it's not too difficult, the tool saves you time if you add a lot of sites to your NGINX server as I do. Email me if you have interest in such a tool and I can custom build you one for your server! linian11@yahoo.com is my email.

How to change DNS settings on your local PC

Have you ever been working on a website, changed your DNS settings over to a different server and later needed to access that server again from the old domain name for some reason? Well if you are an active developer, this situation is somewhat common. I'll explain or you can skip the rest of this paragraph to quickly learn now to do it. Let's say you own the domain name example.com and a web server with an IP address of 111.111.111.111. Now assume you have a WordPress blog on that server that you had to move to another server with IP 222.222.222.222. Let's say you already changed the DNS settings for domain.com to point to the new server with IP 222.222.222.222 but you need to go back to the original WordPress site on the other server with an IP of 111.111.111.111. What do you do? We all know a WordPress site won't function properly with just the IP address, so that is out. What you need to do is repoint example.com to 111.111.111.111 in order to access that WordPress site again. What a PITA, right? Well read on and I'll show you a fast and easy way to make the site on the original server work with example.com even after you've pointed it to another IP address or web server! It's as simply as controlling a local host file on your local PC to make example.com route to 111.111.111.111 even though the internet routes it to 222.222.222.222! Here's how:

Using hosts file to override DNS settings for your PC

A lot of people don't realize that when you make a request to the Internet using your local computer it first checks a local copy of the hosts file for an entry and only if one isn’t present it goes out to the Internet DNS servers. Therefore there's an opportunity present for you to redirect example.com only for your own PC if you wanted to! Here are the easy steps:

  1. Open file explorer and navigate to C:\Windows\System32\drivers\etc.
  2. Open the file named "hosts" in notepad or another text editor that could be used as a code editor such as Notepad++, which is what I use.
  3. Now simply add a line to the end of the hosts file that contains the IP address of the server you want to route the domain name too followed by a space and then the domain name you want to reroute. So in our example scenario above, you would enter a new line that reads simply: 111.111.111.111 example.com
  4. Save the hosts file and open your browser and navigate to the domain which in our example was example.com. Note that there is a difference between example.com and www.example.com, so if you want it to work with www, you have to add another entry for www.example.com.

If you're using Notepad++ or similar as I was, you'll need to open it in administrator mode in order to be able to save the hosts file. Good luck! That's all there is to it.

How to change local DNS settings on a Mac

If you're on a Mac, the instructions are basically the same but do this instead:

From the terminal, type:

nano /private/etc/hosts
and then add the IP and domain name as described above, so the only real difference between Mac and a PC when it comes to changing DNS settings is that you will use a different editor and the hosts file is located in different places.

 

 

Using CSS Media Queries in Responsive Web Design

That's right! The post of the day is going to be on how to use CSS media queries to make a responsive web page or application. The project I'm working on requires me to create a responsive events calendar application that looks good in all sized browser windows as well as mobile devices including iPhone and Android phones and tablets. This can be done very well with CSS media queries and a basic understanding of HTML and CSS. Making today's task a little more challenging is the fact that we will be using HTML table elements. If you have any experience with HTML tables, you probably know that they can be tricky to size according to specific requirements most times. We will overcome the table cell sizing limitations in this article however.

Common Screen Sizes

One of the most important things to take into consideration when developing a fully responsive web application for both computers and mobile devices is your users screen size. What are your users likely to be using? Some will be on a PC, some on a tablet, others on an iPhone and yet others will be on an Android or other device. The ugly truth is that there are a lot of possibilities. I have found from experience that it's best to take into consideration the most commonly used screen sizes. I program for the most common and try to make it work resonably well in the uncommon sized screens as well because roughly up to 3% of your users could be using an odd sized screen that you haven't programmed for. While 3% may not sound very significant, think of it like this: If your site has 1000 visitors a day like mine does, then that means up to 30 people a day are viewing your site on a less-common screen size. 30 is 3% of 1000. Here are some of the latest statistics I could find on common screen sizes used:

First I want to show you common screen sizes of Mobile Devices since they are probably the fasting growing segment of 2016:

2016 Total iOS* Android Windows Others
February 5.15 % 1.08 % 3.49 % 0.42 % 0.16 %
January 5.38 % 1.17 % 3.69 % 0.37 % 0.15 %

The above information was collected by the website w3schools.com. The data represents the users of their website according to information collected by thier servers. It shows that only slightly greater than 5% of thier website viewers view thier site on a mobile device, but your site could have more because I think the w3schools website is one that developers reference a lot and developers do their work on a computer more often than on a mobile device. That may account for some of the low figures for mobile users. Now lets look at the most commone screen sizes according to rapidtables.com:

Common screen resolutions of rapidtables.com visitors (2/2014):

Screen resolution Display
ratio
Usage Screen size / type
1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV
1280x800 8:5 8.5% 14'' Notebook
320x568 9:16 6.4% 4'' iPhone 5
1440x900 8:5 5.7% 19'' monitor
1280x1024 5:4 5.5% 19'' monitor
320x480 2:3 5.2% 3.5'' iPhone
1600x900 16:9 4.6% 20'' monitor
768x1024 3:4 4.5% 9.7'' iPad
1024x768 4:3 3.9% 15'' monitor
1680x1050 8:5 2.8% 22'' monitor
360x640 9:16 2.3%
1920x1200 8:5 1.7% 24'' monitor
720x1280 9:16 1.6% 4.8'' Galaxy S
480x800 3:5 1.1%
1360x768 16:9 0.9%
1280x720 16:9 0.9% 720p TV

If you study the numbers above, they suggest that rapidtables.com visitors are much more likely to be on a smaller screen size device or mobile device than are w3scools.com users. I guess from reading the above data that their website has roughly up to 12% of their users using smaller screened devices such as iPhones, Androids and other mobile devices.

CSS Media Queries

I choose to use one simple type of CSS media queries in this challenge. I like to call it the max-width technique for sizing web pages at various sizes. This is due to the fact that the technique uses ony the max-width media query as you will see with the demonstration code below.

From studying the more common screen sizes, I've come up with a simple plan to make my calendar application look good on just about any possible screen size. Here is my rudimentary logic:

I plan to set the maximum with of the calendar to 1000 pixels and centering it on the page. By doing this I eliminate the need for any media queries for screens over 1000 px wide! As you can see from the charts above,  there are 17 screen sizes represented and 11 of them are over 1000px wide! We have already made our work a lot easier since we only have 4 other screen widths to worry about(because 3 of them have 320px wide screens). Obviously 320px is of great concern as it is one of the most common widts on mobile phones, but I'll also take into considertion the widths of 360px, 480px, 720px and 768px. However, some will be taken care of by the same media queries as you'll soon discover. Here are the basic rules we will go by when making out calendar application:

  • web page will be no wider than 1000px and centered.
  • first media query will be set for max-width of 800px meaning that if the page size is under 800px wide the styles inside of the media query definition will be altered.
  • A second media query set for a max-width of 500px will apply changes for any screen size under 500px down to the next media query.
  • A third media query set for a max-width of 400px will account for any screen between400px and the next media query.
  • A forth and final media query set for max-width of  320px will account for the common screen sizes of 320px and under which are the smallest group of mobile phones, so no other media queries after this one will be required.

I have outlined my logic above, now I can add my media queries to my CSS style sheet as follows:

/*add styles for screen sizes of 800px and up. These don't need to be inside of a media query because the table's width for the calendar will be set to 1000px and centered. Tables are generally flexible enough to be reduced from 1000 to 800px without any problems given it is styled and tested correctly.*/

@media(max-width: 800px) {
//add styles for screen sizes from 500 to 800px:
}

@media(max-width: 500px) {
//add styles for screen sizes from 400 to 500px:
}

@media(max-width: 400px) {
//add styles for screen sizes from 320 to 400px:
}

@media(max-width: 320px) {
//add styles for screen sizes 320px and under:
}

The above is a good way to start your CSS style sheet for a resposive design. You may find that you may not need to use one or more of the media query definitions. You may also find yourself adding one or two media query definitions. None-the-less, this is a good start.

Writing and Testing your CSS Code

When I make a responsive web page, I first make the basic page with basic CSS and no media queries. Then when the basic page is complete, I start testing it at different screen sizes by making my browser window smaller and larger and seeing how the page looks at every possible width and height. Then I add styles to media queries and edit them until the page looks good at every possible size. Finally I test on actual devices such as an iPhone, Android phone and a tablet while making final adjustments according to how the page looks on the actual devices.

You Can Now Contribute Web Development Content

Jafty Interactive Web Development has decided to start accepting user contributed blog posts! You can now submit any post that is related to out blog theme of web development and it will be published after admin moderation. As long as it is on topic and I think it improves the quality of my blog, it will probably be published. Some topics I would like to encourage users to submit posts about include:

  • PHP
  • JavaScript
  • HTML
  • XML
  • CSS
  • Search Engine Optimization/SEO
  • Freelancing as a web developer
  • Freelance writing
  • working from home
  • Laravel
  • WordPress
  • C Languages
  • Java
  • ASP.net
  • JQUERY
  • Ruby on rails
  • MySQL Database
  • SQL
  • PHP and MySQL
  • Remote server administration
  • Linux Command Line
  • Linux and Windows Servers
  • MAC and web development
  • PC vs MAC
  • Mobile Development
  • Mobile website optimization
  • PERL
  • AJAX
  • Adwords
  • CURL
  • Graphics
  • anything else related to web development!

That's just a list to fuel your mind. Feel free to submit any related topic. I will accept anything related to web development. I'm looking forward to some great blog posts! - Ian L.

Click Here to Sign Up and Begin Writing!

 

Make a Bootable El Capitan USB Drive for Mac from Windows PC

After a couple days of random Google searches, I finally was able to put together enough information to figure out how to make a bootable USB drive to restore my Mac using a PC. Yes, my Mac took a dive, a huge one. It won't even start up, so I found that the only possible way of fixing it on my own without taking it into the shop and spending hundreds of dollars I can't afford, was to try to re format the Mac's Hard Disk and install the latest version of OS X on it. I am crossing my fingers it will work! TIP: before you start, you might want to get the os x software .dmg file download started because it's over 6gb and takes a while. Click on the first link under the Download OS X Software heading below to get that going and you can take your time with the rest.

Download OS X Software

The first thing you want to do is download the El Capitan Software from one of the following links:

The best option for me was to download the .dmg file directly from:

https://drive.google.com/folderview?id=0B8s8_mgNDN5scDI4R0VTUVpkQUU&

usp=sharing

Beware that it is a 6.2GB file and will take quite some time to download in most cases.

If the above link doesn't work for any reason, you can try this second one if you are good at piecing together the .rar archives:

https://goo.gl/8CGh5L

 

 

Download TransMac

The first step to creating your El Capitan USB dongle using Windows is to download TransMac, which can be done free of charge using the following link:

http://www.acutesystems.com/scrtm.htm

Click the above link and then click on the hyper link that reads " tmsetup.zip" towards the top of the resulting page.

Once you have the TransMac .zip file downloaded, if it's not already on yoru desktop, move it there so you can follow this tutorial easily. Unzip it to your desktop and click on the setup file to install it. You can accept the defaults while going through the GUI. It's nothing very important, just get to the "install" button at the end and click it and you are golden. Before clicking on "Finish" however, you should uncheck the "read me" and "run" options because we have to run it a certain way as you'll soon see.

Now's a good time to insert your USB stick, thumb drive, dongle or whatever you call it. Backup any files you want to save and erase them from the USB drive to be safe.

Next, right click on the new shortcut icon for TransMac the install process should have created on your desktop and select "run as administrator". You will want to then run the free trial.

Once TransMac is running, select your USB drive from the menu on the left by right clicking it and choosing the "Format Disk for Mac" option and clicking "yes" to continue if a warning pops up about losing files or formatting etc...

You'll be asked for a Volume Name next, enter something like "EL Pwn Version" and click "ok". Soon, it will say "Format Complete" and click "ok" again.

Again in the left side of TransMac, right click on your USB drive and this time select "Restore with Disk Image" and then select the copy of the "EL Pwn Version.dmg" file you should have downloaded to your desktop earlier.

 

 Summary and Credit

If you follow along with this tutorial closely, hopefully you were able to get a copy of El Capitan installed on your Mac using only a Windows machine to build your bootable USB flash drive. I have to give credit to the YouTube video at https://www.youtube.com/watch?v=NjTLYJXM8u4 because it was the only source I found online that even remotely covered how to do this successfully.

 

 

How to Get Rid of Yellow Background in Form Fields for Google Chrome and Safari for Mac

One of my old clients came to me today and says that the form fields on his login page have a yellow background color. He has a WordPress site and I know I had never seen yellow on this login page form before. I use a PC not a Mac, so I never noticed that this problem was present when using Safari on Mac. I've also read it happens with Google Chrome. I'm not sure if it happens on PC, but know it does on Macs. Here is the solution, simply add the following code to a style sheet connected to the page. In my case, since it was a wordpress site, I added it to my main theme's style.css file:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Making a Mobile App from a WordPress Site

To be competitive in the online market, we all know you need to have a regular website as well as a mobile  website or at least a regular website that is mobile-friendly. Well, these days, that's not enough any longer. You also need to have an app!

The App Era

Why do I need an app when I already have a mobile friendly website?

If you are wondering why you should also have an app, here are some of the more important reasons why you should have an app that features your website in addition to the site itself:

  • We now live in the "era of the apps" or the "app era" as I call it. There are millions of people that use apps everyday but rarely go to their browser to look something up, so by having an app, you expand your viewing audience greatly to a fresh market segment that you would otherwise have no exposure to.
  • Promotion of your website online and in an app store - By making an app out of your already existing mobile website, you can offer it for free in the Google Play Store, Apple/ITunes' App Store and various download locations online.
  • Convenient - since you already have the website made, it's easy to wrap it a native mobile app wrapper with a little know how or you can hire someone to do it for a lot less then the cost of creating a complete app from scratch.

How to Take a Sceeenshot on Mac

Lately I've been converting myself from a Windows person to a Mac person. In doing so, I'll be posting some of the more informative things I've learned here on my blog in the Mac category of posts. Today, I was about to download an app for taking screenshots, when I discovered that it wasn't necessary to download an app for screenshots because it is a built-in feature of OS-X apparently! On windows machines I used to use DuckLink's DuckCapture to capture areas of my screen, now on Mac, all I have to do is use the keyboard shortcut explained below.

Capturing a portion of your screen on Mac

What I find to be the most useful built-in feature on my Mac is the keyboard shortcut for capturing a user-defined area of the screen. This can be done by pressing Shift + Command + 4. When you simultaneously press those three keys, your cursor will change into a cross-hair which you can drag a rectangle around the area of the screen you want to take a picture of. It then automatically saves a .PNG image file to your desktop where you should be able to find it easily. The PNG image will be named "Screen Shot" followed by a string with the current date and time. I usually quickly rename the screenshot so I can easily identify it later. It seems as if you can rename a file on Mac in the same manner you do so on Windows machines, by clicking twice(not too fast) on the name below the image icon on your desktop and renaming it there. Or you can do the same thing in finder.

Keyboard shortcut to take a picture of part of all of your screen on a Mac:

Press Shift + Command + 4

Capturing your entire screen on a Mac

If you just want a fast screen grab of your entire screen, simply use the following keyboard shortcut and it will grab the entire screen in a PNG file and store it on your desktop in a similar manner as it would with the partial screenshot explained above.

Keyboard shortcut to take a picture of the entire screen on a Mac:

Press Shift + Command + 3