DEV Community: Andrew Capp

Java: Why Have Abstract Classes?

Andrew Capp — Fri, 09 Oct 2020 20:13:12 +0000

I’ve been learning Java recently and a new concept for me is the idea of abstract classes. While the concept is already kind of “abstract” (pun intended), what I don’t understand is why you would use an abstract class when you can just use a regular class or an interface.

Abstraction in OOP (Object Oriented Programming)

To review, the concept of abstraction in OOP is hiding the implementation details so the developer can focus on the functionality (how the item is used). For example, a TV remote is an abstraction in that you don’t have to know how the remote works in order to use it – you just need to know which button to push.

What is an Abstract Class?

In Java, there are two ways to create an abstract class:

Use abstract keyword: abstract class Car { // Code… }

Use interface keyword: interface Animal { // Code… }

We are focusing on the abstract class here. However, one of the differences between an abstract class and an interface is that 0-100% of the methods in an abstract class can be abstract while 100% of the methods in an interface are abstract (with some exceptions).

An abstract class is similar to a regular class in Java with the following differences:

Must be declared using the abstract keyword.
It can have abstract and non-abstract methods.
It cannot be instantiated (you cannot create objects directly from an abstract class).
You must extend an abstract class (inherit from it) in order to use it.

What is an Abstract Method?

An abstract method must also be declared using the abstract keyword:
abstract void drive();

It cannot have any code in the method – just a method signature like in the above example.

Any regular class inheriting from an abstract class must implement every abstract method. This means you are required to provide your own method to replace an abstract one.

What are Abstract Classes Used For?

So back to my original question – why do we use them? It turns out that abstract classes are very useful in Java. They are used when you have common functionality and need to implement some custom behavior as well. For example, let’s say that you need to download data from different internet sites. You can use an abstract parent class to handle the communication and downloading of the data while the individual child classes implement their own way to handle the data that is downloaded.

Going back to the OOP concept of abstraction - this makes sense. We are letting the abstract parent class handle the details of communicating over the internet while we focus on handling the specific data being downloaded – which is likely to be different for each site we visit.

An example of this might look like:

abstract class internetLink {
// methods to handle downloading data from the internet

abstract void handleData(); // method to handle the data to be implemented by our classes
}

class newsDownload extends internetLink {
void handleData() {
// code to handle the downloaded news data
}
}

class friendsDownload extends internetLink {
void handleData() {
// code to handle the downloaded friends data
}
}

class chatDownload extends internetLink {
void handleData() {
// code to handle the downloaded chat data
}
}

So, each of our download classes handles different data. We can write our internetLink class to handle the actual downloading while our download classes implement methods that handle the data. In this case we only need to write a method to do something with the data. We don’t have to worry about the actual downloading – the internetLink class handles that for us!

This is called the Template Method Design Pattern and is a popular design pattern in object oriented programming languages.

This concept makes more sense to me now and I hope this makes more sense to you as well!

Looping in Javascript

Andrew Capp — Sat, 03 Oct 2020 18:31:31 +0000

Knowledge of how to loop through objects as well as which type of loop to use in a particular situation is very important in order to be proficient in JavaScript. Following are five types of loops available and examples of when to use each:

For-in Loop:

Used to iterate through objects.

Example:
const pet = { name: “Rex”, breed: “Pug”, color: “brown” } for (const key in pet) { console.log(pet[key]) } // => Rex / Pug / brown

Note: This works on any object with enumerable properties (non-symbols). So it works on an array, but it is much better to use a loop designed for arrays.

Caution: Does not guarantee that the properties will be visited in the same order as the object. Should be avoided if you are modifying properties during the loop. A better option would be to use Object.keys(pet) which returns an array that can be used in a loop.

For-of Loop:

Used to iterate through arrays.

Example:

const petArray = 
  [
    { name: “Rex”, breed: “Pug”, color: “brown” },
    { name: “Pebbles”, breed: “Dalmatian”, color: “white with 
      black spots” },
  ]

for (const element of petArray) { console.log(element[‘name’]) } //=> Rex / Pebbles

Note: This works on strings, arrays, and array-like objects.

Example of looping through a string:
const stringArray = “this is a string” for (const letter of stringArray) { console.log(letter) } //=> t / h / i / s / …

Caution: This is best used when need to visit each element and are not changing the elements. If you want to perform an action on each element, there are better methods such as map and reduce. If you want to control the iteration or access the index of the element in the loop then a basic for loop will work better.

For-Each Loop:

Loops through an array using a callback function. Optional index, array, and thisArg arguments.

Example:
petArray.forEach( (element, index) => console.log(index, element.name)) //=> 0 “Rex” / 1 “Pebbles”

Note: This is similar to for-of loops, but requires a callback function. This is useful if you need access to the index or need to perform more complex actions. Again, this is best used when you need to visit each element in the array. For more complex situations a regular for loop might be better.

For Loop:

Used for a loop with three optional expressions.

Example:

let numbers = []

for (let i=0; i<5; i++) { numbers.push(i) }
console.log(numbers) //=> [0,1,2,3,4]

Note: The expressions in parenthesis are optional and very flexible. It is easy to customize how they are handled in the loop. This makes the for loop a great option for more complicated situations.

Caution: If you don’t specify the optional expressions, be sure to evaluate and update them in the loop. Otherwise you will get infinite loops and/or unexpected results.

While / Do-While:

Used to loop until the specified condition evaluates to false.

Example of while loop:

let i = 0

while (i < 5) {
  console.log(‘Hi!’, i)
  i++
} //=> Hi! 0 / Hi! 1 / Hi! 2 / Hi! 3 / Hi! 4

Note: The condition is checked at the beginning of the loop so if the condition immediately evaluates to false the while loop will not execute.

Example of do-while loop:

let k = 5

do {
  console.log(‘Hi Again!’, k)
  k++
} while (k < 5) //=> Hi Again! 5

Note: This condition is checked at the end of the loop so the loop will always execute at least one time.

Continue / Break:

These are two useful keywords when working with loops.

Continue: Skip to the next iteration of the loop.

Break: Exits the loop

This was a short summary of the loops available in JavaScript. Knowing these important concepts will help you become a better JavaScript programmer.

Introduction to Responsive Webpages

Andrew Capp — Fri, 02 Oct 2020 22:50:46 +0000

While just about everyone uses mobile devices to access websites, most new web developers have limited practice writing applications for mobile devices. This is because most training is done on a laptop computer. If you haven’t had much practice coding websites for mobile, here are a few ideas on how to build responsiveness into your websites to make them better for mobile devices.

Viewport

An important first step in building a responsive webpage is telling the browser how to display the initial dimensions and scale. This is done by including viewport settings in a tag.

Example: <meta name=”viewport” content=”width=device-width”>

This should be placed in the <head> section of your webpage. Note that you should make sure your elements are responsive before using the viewport settings. Otherwise your webpage may actually look worse!

For a great discussion of viewport see this article on Mozilla

Layout

Your layout should be designed to be responsive from the ground up. A popular way of accomplishing this is using a grid system. Elements are strategically positioned on columns and the columns are adjusted to appear vertically when the screen size is small and horizontally on larger screens.

W3schools.com has an excellent guide on how to use grids when designing your layout

The latest HTML5 syntax introduced the flexbox which can be used in conjunction with grids to make aligning and spacing elements easier. Here is a guide on how flexbox works

Elements and Media

Now that you have your basic layout design, you need to make sure the elements can adjust their size as needed. This means avoiding absolute CSS units such as cm (centimeters), mm (millimeters), in (inches), px (pixels: 1/96 of 1 inch), pt (points), and pc (picas).

Instead try to use relative units such as:

em (relative to font-size of element)
vw (relative to 1% of the width of the viewport) – remember the viewport above?
vh (relative to 1% of the height of the viewport)
% (relative to the parent element)

You may need to get creative with media elements like images and video. In many cases you can set the width and let the height scale automatically. Often it is a good idea to set maximum size values so quality isn’t compromised on larger screens.

@Media

With the introduction of CSS3 we have Media Queries that can adjust content based on width, height, orientation, and resolution. Note that this is not compatible with older browsers, but should work on modern browsers including mobile devices.

This is where you can specify the number of columns on your layout grid above based on the width of the device. Here you can also manually adjust the size of elements if you are not able to use the relative units above. In fact, many times developers adjust the relative units for smaller screen so some elements appear larger and therefore easier to select with a finger.

Example: @media screen and (max-width: 620px) { CSS code… }

Refer to w3schools.com great overview of Media Queries

Helpful Frameworks

If you are thinking this is a lot of work you are right – it can be. Fortunately there are many frameworks you can use that have responsiveness built in. These frameworks can make building responsive webpages much quicker and easier.

Some of these include:

Bootstrap: https://getbootstrap.com
W3schools: https://www.w3schools.com/w3css/defaulT.asp
Foundation: https://get.foundation
Pure: https://purecss.io
Semantic UI: https://semantic-ui.com
Materialize: https://materializecss.com

There are many others so I encourage you to explore and find what is right for your project.

Hopefully this introduction gives you a place to start learning to build responsive webpages. It is extra work to build webpages that work equally well on mobile devices as they do on regular computers, but it is a must for building any professional website.

Tips for 3rd Party Website Hosting

Andrew Capp — Fri, 25 Sep 2020 22:04:29 +0000

As a web developer, one of your most valuable marketing tools may be a personal portfolio website where you can showcase your projects, blogs, and more. The good news is there are many options for hosting your website as well as tools to make the process easier. The bad news is that it can be time consuming and difficult to narrow down the choices and figure out which tools you need to get your website up and running. After setting up hosting for my own portfolio website, I have a few tips that might make the process easier for you. My website is at http://andrewcapp.com if you would like to check it out.

Find a Hosting Service Provider

There are many options for hosting your website at a wide range of price points. I researched several well-known providers ranging from free to expensive. I decided on a low cost provider with a positive social image (GreenGeeks.com) which has great service and support. There are several websites that can help you compare various providers and I recommend looking at a couple to see if you get similar answers in more than one place.

Some of the well-known providers have great service and lots of options, but be careful of extra fees and required add-ons that can really increase your cost. If cost is an issue there are several free providers, but be aware that you will sacrifice something – either having to use their domain, not having many tools (like Cpanel), or not having the option to host more complex code.

Setting Up Your Domain

This is easiest to complete once you select your hosting provider. If you already have a domain registered on another site the transfer process is fairly simple, but does require time and effort on both ends. If you don’t have a domain, then work with your selected provider to get one set up – a pretty easy process.

I had to transfer my domain which required getting authorization codes, contacting support at my new hosting site, and waiting about a week for the transfer to complete. When my site was ready to go live I couldn’t get it to work and found that the domain nameservers needed to be manually changed to the new hosting site’s servers. I somehow missed this when reviewing my setup, but the support staff at GreenGeeks found the issue quickly once I asked for help.

Readying Your Code

Many hosting sites have templates you can use to set up a basic website. These are a great option if you don’t want to manually create your site. As a web developer, I relished the opportunity to create my own website from scratch so I did not utilize any templates and instead had a great time building my site from the ground up.

What I didn’t know was how to get my JavaScript and React framework code set up in a way that works on GreenGeeks. Fortunately, a simple search found a great blog post by Amit Rai titled How To Deploy React App on Shared Hosting (Cpanel): https://medium.com/@aforamitrai/how-to-deploy-react-app-on-shared-hosting-cpanel-d682b0342424. This was a great help and I recommend utilizing this blog if you are uploading your own code to a hosting provider that has Cpanel.

The nice thing is there is a simple command to get your code ready to upload:

Simply type “npm run build” in your project directory and the needed files will be saved in a build folder and ready to go!

Uploading to the Hosting Site

Once you have your files ready you will need an FTP application in order to transfer your files to the hosting site. I followed the instructions on the GreenGeeks site which were well written. I wasn’t able to connect to the FTP server until I fixed the aforementioned nameserver issues on my domain. However, once that was fixed the instructions worked great. There are also helpful instructions in Amit’s blog.

One difference for me is I loaded the FTP files directly into the public_html directory on my host site. There is probably a better way to do this, but I couldn’t get the instructions in Amit’s blog to work for me.

Many providers have great support so if you are having problems getting your website to work don’t hesitate to reach out to them. They certainly helped me more than once.

Making Updates

Congratulations on getting your website up and running! If you are like me, you will have regular updates and will keep tweaking your website design. Updating changes to your live site is simply a case of repeating the steps above to ready your files and upload to the host site.

There are options to use Git Version Control and other tools to automate updating your site. I will look into these in the near future and will let you know if I find some great automation for this. Thank you for reading my blog and I hope you find this useful.