New Server!

Oh wow this feels fresh and new!

I moved my website to a different server! It’s nothing I haven’t done before aka trying out different shared hosting plans. Except this time I have my own (VPS – Virtual Private Server) server. Having your own server is nothing new. You could always rent space at a data center but that’s always been expensive! Besides I’ve never needed that amount of resources since my sites are low traffic.
But nowadays VPS service providers are more common and affordable. I think it’s also because it’s a virtual server and not an actual machine that makes it more accessible. Even then we are talking about actually managing a machine that runs linux which you have to configure as a web server and everything that goes along with it such as security patches, firewalls, stacks, etc. So no it’s that easy. Unless you do what I did which is use a control panel that helps you manage the server. It’s called (referral link)

Let’s take a step back and see why I did it.
Usually a shared host is ok for most people. It’s essentially a managed server you are sharing with hundreds of other sites. These providers bank on you not really using the resources so they cram as many websites onto each server. Thus in the end making things a bit slower or unreliable. Because what happens to the other sites might affect you as well.
What prompted me to change hosting providers was when Google announced that it would give preferential treatment to sites who used SSL in other words sites that provide a secure communication (that little green lock in your address bar). The cool thing is that with Let’s Encrypt you can now have a free SSL certificate that auto-renews. So why not have one in if it’s free!
Unfortunately the host I was using at the time “A Small Orange” did not allow me to use a free certificate from .
After doing some research and coming across Tania Rascia’s article on her Front End Development Setup where she mentions her webhost I decided to use the same. NearlyFreeSpeech is webhost that is ver low cost, you have to do some work and they allowed the free Let’s Encrypt SSL I was wanting.
I set it all up after going through their documentation and some terminal use! Ok cool and I started to write some stuff. It was ok since it was low cost but boy was it laggy. As someone who likes speed that really bothered me. Then there was the hassle of having to deal with their really tight security measures which made making changes to the wordpress side of things a bit tedious aka slow. In the end I decided something more responsive would be better. That’s where DigitalOcean (referral link) came in. I could have a VPS for: $5 a month that provided me with a dedicated amount of RAM, CPU, SSD, and Bandwidth. Yes something snappy!
Now I could have just used Cloudflare as a CDN (Content Delivery Network – they serve your webpage from the closest area that it’s requested from for speed purposes). But that wouldn’t have eliminated the slowness and tediousness of the backend admin panels.
So now I have a new home and it’s great time to look into optimizing performance for WordPresss and my static site. The speed difference is night and day already but why not learn how to optimize things anyways!
Oh and yes I also have the SSL certificate I wanted. 🙂

Browsersync – Auto Reload changes to sites

I’m a visual person so having something change when I modify is very gratifying. So it’s nice to see my changes take effect while I’m coding.
You can achieve this in various ways.
The easiest is to just use a code editor called Brackets it has a live preview mode which is nice.
But what if you don’t want to use that editor? Well there’s other tools that provide this functionality along with a GUI.
The best one I know is Codekit. It’s a fantastic tool but it costs $34.
If you’re like me and just need to reload the browser then that’s a bit much. I know it does much more but I’m not at that point yet.
With that being said I’m using Browsersync

First you need to install NPM then as mention in the Browsersync website run npm install -g browser-sync

Once you got it all installed it’s time to start it up.

I just wanted it to watch changes on html files and my css.
So here is how I got it going:

Starting Browsersync to watch specific folders.

Then it opens a browser window to the server creates and that’s it!

Practice HTML Basics P2

My previous post was about finishing up the basic web page by adding some styling through CSS. I achieved that but did encounter an issue I was unable to resolve when using a CSS propery called clip-path. It’s what creates the angle cut on the “Hero Image” (the large background in the top).
Too bad it “clipped” everything after it!

Web page clipping issue.

The reason for that was because everything was inside the same container (div) the property was assigned to. Ok so I put the content in another container to solve it.

Web page still clipping an image.

But this still clipped the VR user image.

Here is where I was stuck!

I reached out to the Treehouse Coummunity and posted my issue.
Luckily someone replied and solved it.
Turns out you need to use position:relative to force the VR users image to be on top.

Fixed web page

Practice: HTML Basics

I decided to take things further by practicing some HTML and CSS.
In the following course:

You build a basic HTML page with out CSS.
At the end of the course the instructor Guil Hernandez shows us a small preview of what can be done with further work. It’s a finished version of the site we just made.

Thumbnail of a finished website by the instructor.

Here is what I worked on.

You can view it here:

It still needs work like being fully responsive, image optimization and the angle for the image.
But it’s a start.

Treehouse Web Design Track P1-2

This is a series to do quick recaps of what I’ve gone through and learned in Teamtreehouse‘s Web Design Track.

Introduction to HTML and CSS

This is the first course in this track. It’s used to familiarize you with what a basic website is made up of. It also gets your hand wet. Aka you start modifying the example website. Sort of like a chef showing you how a pizza is made. Yeah you’ve eaten a pizza before but do you know some of the steps involved in making it? Here put some pepperoni on it.

To sum it up it’s an overview of how one would modify a website to give you an idea of how they work.

Next up is:
HTML Basics

For the second course we go to the foundation of all that is the web: HTML. I liked going through this course as it reminded me on where to start my thinking. Where it matters the most and with it’s original intent. Which was for sharing information.
Let’s put the information on the page first in a way that makes sense. Then after you can worry about how it looks.

To sum it up: you learn Semantic Markup which gives meaning, structure, and reason to the info you are putting on the page. And of course some other tidbits like text, links, images, and such. In essence if we take away the images, CSS and Javascript from a page it will still be easy to understand and convey the proper information a document should.

Here is some example code:

See the Pen HTML Basics - TH by josue (@josuerodriguez) on CodePen.

Reviewing what I learn through Teamtreehouse courses

The worst way to learn is to watch something and not do anything. The best way to learn is to get knowledge and put it to use. The best way to master something is to practice it and for a long period of time. My mistake was not putting to use what I learned so because I didn’t practice it gets lost. On the contrary if you practice it you learn even more thus the mastery aspect of it.
There is more to this story but the main idea is that you have to practice as much as possible. How can you practice? Talk about what you learned. Make what you learned again and again. Create something new based on the lesson. Teach others and document it.
My goal now is to do a short recap on what a course entails and what I learned from it after going through it. I could also add an example of what you can create with the course section.

I’ve gone through various courses in the treehouse library and I even completed the Web Design Track. That track has since been updated with new content and older content has also been removed. This is actually great because it feels like it keeps things fresh and up to date. When I finished the Web Design Track previously I had a sense of accomplishment but not much confidence I had learned to the best of my ability. This time I will be going through it again with the benefit of having new content (courses) along with documenting my learning and practicing it as I mentioned before.

If you want a quick glance of the courses in the Web Design Track I will post a list of them at the end of this post. Or you can view it your self by visiting this URL:

  • Introduction to HTML and CSS
  • HTML Basics
  • Web Design Process
  • CSS Basics
  • CSS Selectors
  • HTML Forms
  • HTML Tables
  • Web Typography
  • CSS Layout Basics
  • Responsive Layouts
  • CSS Flexbox Layout
  • Bootstrap 4 Basics
  • Prototyping in the Browser
  • CSS Transitions and Transforms
  • SVG Basics
  • Animating SVG with CSS
  • Sass Basics
  • CSS Grid Layout
  • -=Track Complete=-