Forem: Programming Liftoff

Win a $50 Gift Card to the DEV Shop!

Programming Liftoff — Fri, 08 May 2020 19:31:03 +0000

Want to have a chance to win a $50 gift card to the DEV Shop? Just do the following:

Subscribe on YouTube: https://youtube.com/c/programmingliftoff
Follow on Twitter: https://twitter.com/programliftoff
Follow on DEV: https://dev.to/programmingliftoff
Comment here with a programming topic you'd like to learn!

We will post in the comments who won on Friday May 15th and we'll send the winner the $50 gift card code using the private message (Connect) feature on dev.to.

The winner will be selected randomly. If we are unable to contact the winner within 3 days, we'll choose a new winner.

What is the best type of computer for a computer science student entering college/university?

Programming Liftoff — Sun, 11 Mar 2018 03:13:30 +0000

This can be as general (Mac, Windows, Linux) or specific (SSD vs disk drive, RAM, etc.) as you like! A good computer can make a huge difference in how productive you are when writing code, especially over a four year time period. So what is the best computer to get?

JSON Simplified

Programming Liftoff — Thu, 08 Mar 2018 05:51:39 +0000

This article was originally published on programmingliftoff.com as JSON Simplified.

JSON is an essential part of the web today. It's unavoidable for anyone programming in JavaScript. JSON stands for JavaScript Object Notation. An AJAX request is used in JavaScript to request JSON data from a server. AJAX stands for Asynchronous JavaScript And XML. XML is a data format that used to be used instead of JSON, but today JSON has become dominant in this area. At the end of this tutorial we will have a simple local webpage that sends an AJAX request for JSON data that we upload to a server and then displays that data on the local webpage. Let's do it!
Note: If you learn better from videos, click here for a video walkthrough: JSON Simplified YouTube Video.

First let's take a look at some real JSON.

{
  "class": "Biology",
  "homework": "Memorize cell structure",
  "classId": 1
}

As you can see, JSON looks like a JavaScript object (that must be why its called JavaScript Object Notation!). A few special notes about JSON are that all the object keys (class, homework, and classId in the above snippet) must be have double quotes around them. Also, if the value is a string it must have double quotes as well (single quotes are not valid). However, numbers do not and should not have double quotes surrounding them.

Alright, now that we've seen some JSON, lets have some fun!

I've uploaded some JSON to GitHub here: https://github.com/programming-liftoff/json-simplified/blob/master/jsondata.json. We're going to create a simple webpage that grabs the JSON data from the GitHub repo and displays it in the webpage. Sounds awesome, right!?

In your favorite text editor, create a file named index.html. In it past the following HTML:

<html>
<head></head>
<body>
  <div id='page-data'></div>
  <script>
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var pageData = '';
        var data = JSON.parse(xhttp.responseText);
        pageData = '<h1>' + data.student.name + '</h1>';
        pageData += '<h4>Let\'s learn some ' + data.class + '!</h4>';
        pageData += '<h4>For homework: ' + data.homework[0] + '</h4>';
        document.getElementById("page-data").innerHTML = pageData;
        console.log('Done!');
      }
  };
  xhttp.open("GET", "https://raw.githubusercontent.com/programming-liftoff/json-simplified/master/jsondata.json", true);
  xhttp.send();
  console.log('here')
  </script>
</body>
</html>

Then open that file in your browser. This can usually be done by double clicking the file in Finder or Windows Explorer. You can also try right clicking the file in your text editor, selecting "Copy Full Path", and pasting that path in your web browser (e.g., Chrome). You should now see the following webpage

Now let me explain what's going on here.

First, the line var xhttp = new XMLHttpRequest(); creates a new request object. The XML data format used to be more popular than JSON, but now JSON is used more and we are stuck with the name XMLHttpRequest. This object can be used to request JSON data from a file or server.

Let's skip down to line 21 xhttp.open("GET", "https://raw.githubusercontent.com/programming-liftoff/json-simplified/master/jsondata.json", true);. This line specifies the type of request we want to send. We're sending a GET request, since we want to get data from the server. The other option is POST, which could send data to the server. Next we specify the location of the JSON data. In this case its in a GitHub repository. Finally, we pass true. This means the request should be performed asynchronously. Performing the request asynchronously is the preferred method, since it allows the rest of the web page to load while the request is waiting for a response from the server with the data. This is therefore an AJAX (Asynchronous JavaScript and XML) request. Although as stated before, since we're using JSON in place of XML, you can think of it as an AJAJ request. Just go with the flow and call it AJAX though, because that's what everyone calls it (so it must be right, right?). Also note that xhttp.send(); is needed to actually send the request.

Now let's look at the xhttp.onreadystatechange function on line 7. The first line in that function is an if statement if (this.readyState == 4 && this.status == 200). This is saying that the code inside the if statement should be executed when the state of the request changes to 4, and the status is 200. A ready state with the value 4 means that the request has completed, and a status of 200 means that the request was successful. In other words, we have received the JSON data. Checkout Mozilla's post and W3School's post for more information about ready states and HTTP status codes respectively.

Finally on line 11, the line var data = JSON.parse(xhttp.responseText); retrieves the JSON response, uses JSON.parse to convert the response String to a JSON object, and stores that JSON object in the data variable. The object can now be used as a JavaScript object and the data can be shown on the web page.

Bonus:

Try changing true in line 21 to false, then refresh the page. Did you notice any change? There isn't any noticable change in the web page. But open the console (in Chrome, right click on the web page, select 'Inspect', and click on the 'Console' tab). And refresh the page again. You'll notice the order of the console.log statements changes. This is because when the call is not asynchronous (false), the page waits for the request to complete before continuing. Therefore 'Done!' prints before 'here'. When the call is asynchronous, the page sends the request and has time to print 'here' before the server responds to the request.

You may also notice a warning in the console when the parameter is set to false. This is the browser telling you that it's not a good idea to do this since the page loads slower if it's not asynchronous!

There you have it, you've now learned JSON and played around with AJAX. I will leave you with this challenge. Create a free account with GitHub if you don't have one. Then create a new repository and copy the JSON data from this tutorial into a file in that repository. Next, click the 'Raw' button to get the URL to the raw JSON data. Finally update the URL in line 21 to your URL. You're now pulling JSON from your GitHub server space to your web page. Awesome!

Now go ahead and modify the JSON and the web page to play around with it some more. And feel free to post a comment below if you publish you're site live so that others can view it and be inspired!

Get stuck anywhere, or want to hear everything explained again in a video? Click the following link for a nice video walkthrough of all these steps! JSON Simplified YouTube Video

Thanks for reading!

-Andrew @ Programming Liftoff
Website: programmingliftoff.com

Upload a Website to GitHub Pages

Programming Liftoff — Wed, 28 Feb 2018 22:36:41 +0000

This article was originally published on programmingliftoff.com as Upload a Website to GitHub Pages.

Note: Before following these steps you should have created a website on your local machine. If you do not have a website yet, complete the tutorial Create a Basic Webpage with CSS and JavaScript to create a website, then come back to this tutorial.

Prefer to watch this tutorial instead of reading it? Click here.

You will need git installed on your computer to upload your website to GitHub. If you don’t have it installed, visit this site and follow the instructions for your operating system. Note that if you’re using Windows, I recommend installing GitHub for Windows.

Then, to set up git, type the following in the terminal (or Git Bash on Windows), replacing <name> and <email> with your name and email:

git config --global user.name <name>
git config --global user.email <email>

After installing and configuring git, log into GitHub and create a new repository. Do not check the box to initialize the repository with a readme. GitHub will then show you instructions for creating a new repository on the command line.

Next, open the terminal (or the ‘Git Bash’ program in Windows). Then use the cd command to navigate to the folder that your website is in. Once in the folder, type the commands that GitHub displayed after creating a new repository in the last step. The commands will be similar to the following, with only the GitHub repository URL changing:

git init
git add .
git commit -m “Upload website”
git remote add origin git@github.com:programming-liftoff/github-pages-first-upload.git
git push -u origin master # If this command fails, click the link in the next section to learn how to setup a SSH key with GitHub.

Permission denied (publickey) when executing `git push -u origin master`

If you see the message "Permission denied (publickey)", you will need to setup a SSH key to use with GitHub. To do this, read GitHub's article Generating a New SSH Key. Complete all the steps, and when you're done, be sure to Add your SSH Key to your GitHub Account.

Now try executing the line git push -u origin master and it should work!

Final Steps

Finally, go to the ‘Settings’ tab of the GitHub repository, scroll down to the GitHub Pages section, choose ‘Master Branch’ for the source, and click ‘Save’. A URL will then be displayed in the GitHub Pages section. Click on that URL to visit your webpage (Note: It may take several minutes for the webpage to show up at the URL).

Congratulations! You have now uploaded you website live on the internet! Feel free to post the URL to your website in the comments below so other people can checkout your sweet website!

If you had any trouble, watch the video tutorial on YouTube.

Thanks for reading!
-Andrew @ Programming Liftoff

Create a Basic Webpage with CSS and JavaScript

Programming Liftoff — Wed, 28 Feb 2018 22:35:35 +0000

This article was originally published on programmingliftoff.com as Create a Basic Webpage with CSS and JavaScript.

Note: If you already have your website and just need to upload it to GitHub and enable GitHub Pages, read Upload a Website to GitHub Pages

Prefer to watch this tutorial instead of reading it? Click here to watch it on YouTube.

Tired of creating boring HTML pages without style? Then it's time to add some CSS and JavaScript to liven up your webpage! In this tutorial we will create a website with a basic index.html file and add some CSS and JavaScript files to make it more exciting. Then we will upload the webpage to GitHub as a GitHub Pages website! Note that the methods shown in this tutorial to add CSS and JavaScript files in a webpage are not specific to GitHub Pages. These methods will work with any website and any host (GitHub, GitLab, BitBucket, etc...). Without further ado, let's get started!

Start by opening your favorite text editor and creating a new folder (you can name the folder anything you like). In that folder, create a file named index.html.

Add the following code to index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>
  </body>
</html>

If you open the webpage in the browser, you should see just "Hello, World!" printed on the screen.

Adding JavaScript to Our Webpage

Next we will learn how to import JavaScript code from a separate file into 'index.html'. Create a folder named 'javascript'. Inside that folder, create a file named 'index.js'. Inside this JavaScript file, add the following line:

document.getElementById('date').innerHTML = new Date().toDateString();

Then in the <head> tag in 'index.html', add the following line of code:

<script async src="./javascript/index.js"></script>

Now save the files and refresh your browser. You should see the current date printed bellow 'Hello, World!'. So how is this working? Take another look at the JavaScript we added. As you can see, it gets the element with id 'date' (thats the <h4> tag in our webpage), and sets the text inside it to a new Date() object that is converted into a more readable string.

Then we added a <script> tag in the 'index.html' page to load this JavaScript code in our webpage. We set the src attribute of the <script> tag to "./javascript/index.js". This tells the browser to load the file 'index.js', which is located in the 'javascript' folder. This happens asynchronously and then the JavaScript code is executed, updating our web page almost instantly! Great, now that we've added some JavaScript, lets add some CSS.

Adding CSS to Our Webpage

First create a folder named 'styles'. Inside this folder, create a file named 'styles.css'. Type or paste the following code into 'styles.css':

body {
  text-align: center;
  background-color: #f0e8c5;
}

Now go back to the 'index.html' file and add the following <link> tag inside the <head> tag (right above the <script> tag we added in the last section):

<link rel="stylesheet" href="styles/styles.css" />

Now refresh the 'index.html' page in your browser. Sweet! We've successfully added styles to the webpage! Looking at the code we added to 'styles.css', you can see that we centered the text and added a light-tan background color to the body of the webpage. Then we added a <link> tag with the attribute rel="stylesheet" to 'index.html'. This tells the browser that we will be loading CSS styles from a separate file. We also added the attribute href="styles/styles.css". This tells the browser that the styles we want to add are located in the 'styles.css' file, which is in the 'styles' folder. Awesome! Now that we've added JavaScript and CSS to our webpage, let's overdo it and add some image with some sweet styles!

Add some sweet CSS styles!

Replace the contents of your 'index.html' page with the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <script async src="./javascript/index.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>

    <div class="image-section">
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>

      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>

    <div class="image-section">
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>

      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>
  </body>
</html>

Also replace the contents of 'styles.css' with the following code:

body {
  text-align: center;
  background-color: #f0e8c5;
}

div {
  margin-top: 15px;
}

.image-section {
  display: flex;
  justify-content: center;
}

.section-style {
  margin-right: 25px;
  margin-left: 25px;
  background-color: white;
}

Now refresh your webpage. Nice! We have a sweet webpage with images from unsplash.com! Every time you refresh the page you will see a new random image. Pretty cool, right?!

If you had any trouble, watch the video tutorial on YouTube.

Next Steps: Uploading the Website to GitHub Pages

Ok, now that we've had our fun creating our site locally, let's publish it to the internet for free using GitHub Pages. Head on over to Upload a Website to GitHub Pages to learn how to upload your site to GitHub Pages.

Thanks for reading!
-Andrew @ Programming Liftoff
Website: programmingliftoff.com

Create Your First Website with GitLab Pages

Programming Liftoff — Fri, 16 Feb 2018 06:32:12 +0000

This video will walk you step by step through creating a live website using GitLab Pages. This video is intended for people who may have experience building websites, but have not used GitLab Pages to host their website. Want to show off your beautiful website to the world? Then this is for you.

Watch the video on YouTube: https://youtu.be/cERdbQ-GgOo

Learn Regular Expressions using Atom

Programming Liftoff — Tue, 07 Nov 2017 05:03:38 +0000

This article was originally published on programmingliftoff.com as Learn Regular Expressions using Atom.

This is a short little post with the goal of helping you to learn the elusive regular expressions!

This takes advantage of a built in regex feature in the Atom text editor. It may work in other text editors as well, so give it a try in your favorite text editor or IDE. If it doesn't work, you can download Atom here (don't worry, its free!).

Tutorial

First, create a new file in the Atom editor.

Next, type in a line of text. Here is the line I will be using (Hello). [World!].

Next type CMD+f (Ctrl+f on Windows) to open the find and replace utility.

Then select the 'regex' option to treat the search item as a regular expression (see red arrow below).

Finally, highlight the line of text that you typed and press CMD+f (Ctrl+f on Windows). The search box should update to display your selection formatted as a regular expression.

Congratulations!Â You now know how to use Atom to build regular expressions for you!

Understanding the generated expression

Recall that the original string wasÂ (Hello). [World!].Â Parenthesis and brackets are special symbols in regex, so they must be escaped with theÂ \ character.Â Note that a period . is also a special regex character.Â This is one of the most misused characters in regex, because a period by itself will match any character!Â Simply typing aÂ . to match a period in a string will match that string, but it will also match any string that contains any other character in place of the period.

Limitations

This only works for one-line expressions. :(Â Even magic has its limits :).

Additional links

https://regexone.com/ - An awesome interactive tutorial for learning regular expressions.

https://regex101.com/ - A regex tester. You must know the regular expression, or try typing regular expressions until they match the example text you entered.

Mastering Regular Expressions - Great book to learn how to write regular expressions. (This is an affiliate link.)

Using Docker for Experimenting with Code

Programming Liftoff — Wed, 25 Oct 2017 23:41:35 +0000

This article was originally published on programmingliftoff.com as Using Docker for Experimenting with Code.

One of the best ways to learn to code is by writing or modifying programs to see what they do. For me, this usually involves creating a file named something like delete.py, and writing some code in it to help me understand more about the language. I then inevitably end up with a bunch of files on my desktop named delete1.py, delete2.py, tmp.c, temp.rb, temp1.py, and so on. These are usually mixed in with some images and other files I may want to keep on my Desktop so removing them then becomes a semi time-consuming task. What if there was a better way!?

Using Docker for Code Experiments

Recently I started using docker for this task. The benefit of using Docker is that container provide a layer of isolation from your computer, so for the most part you can execute any commands in a container without worrying about messing something up on your computer. If something goes drastically wrong inside the container, no worries! Simply boot up a new container and try again! Cool, so how do I create a container and install the programming languages and tools that I need? I’m glad you asked. In the next section I will explain how to get started using the Dockerfile so you can get up and running! Then I will break down the Dockerfile I use line-by-line. It looks a little lengthy, but each line is fairly simple.

Using The Dockerfile

The Dockerfile and supporting files can be downloaded from the GitHub repository here: docker-playground.

There is a Readme on the GitHub page to help you get started, but I will provide the instructions here as well.

Getting Started
Prereq: Before you begin, make sure you have installed Git and Docker.
1) Clone the repository with git clone https://github.com/programming-liftoff/docker-playground.git
2) cd into the directory by typing cd docker-playground/
3) Build the image by typing docker build -t playground:latest .
4) Start a bash shell in the container by typing docker run --rm -it playground
Thats it! Now you can create files and run them without worrying about cluttering up your desktop! Simply type exit or press Ctrl-c to exit the container, leaving no trace of those files.

Additional Notes
At the beginning of the Dockerfile, some enviroment variable are set with the following lines:

ENV username andrew
ENV password pass
ENV rootpassword toor

When the container loads a shell, it will load to user andrew, with the password set to pass. The password for the root user is set to toor.

If you wish to change these values, simply change them in this one place and rebuild the image with docker build -t playground:latest . to update the container's settings.

The Dockerfile

Here's where I break down the Dockerfile and supporting files so you can learn what each lines does and modify the code to fit your needs. We'll start with the smallest file first 'entry_point.sh'.

entry_point.sh

This file is run every time the container starts. In this way, putting code in here is similar to putting code in '.bash_profile' or 'profile', etc.

The full code can be view here: entry-point.

1) This section of code checks to see if the file 'rvm.sh' exists. If it exists, the file is executed. This is necessary to add Ruby's executables to the PATH variable, among other things. If you do now want to use Ruby, you can remove this from 'entry_point.sh'.

# For RVM - Ruby
if [ -f /etc/profile.d/rvm.sh ]
then
  source /etc/profile.d/rvm.sh
fi

2) This section of code starts a bash shell. If you remove it, the container will start and stop without giving you a shell. Feel free to give it a try!

# Get a shell
/bin/bash

Dockerfile

The Dockerfile contains the majority of the code. It is used to build the docker image that a container can be started from. Hang on tight as we explore it!

The full code can be found here: Dockerfile.

1) Docker images can be build starting with a base image. In this case, the new image will start with everything in the base image, plus whatever is added in the Dockerfile. This line tells Docker to start building the image using the latests version of the ubuntu image as a base.

FROM ubuntu:latest

2) This section was shown earlier. It sets some environment variables that are used when building the image. There is a TODO in the comments to let you know that you can set these to whatever values you like. The environment variables can be accessed from later on inside the Dockerfile, as well as in the container itself after it is built.

#==========================
# TODO: Use desired values
#==========================
ENV username andrew
ENV password pass
ENV rootpassword toor

3) This section creates a new user for the container. By default with the ubuntu image, the container would start as the root user. Using a computer as the root user is generally frowned upon because it can be dangerous (easy to mess something up when you have full rights). This may not be as big of a deal since we're using a container, but creating a new user keeps things similar to how you would normally use the command line. The docker RUN command runs a shell command to change something in the container that is being build. In this case, as mentioned, its simply running bash commands to add a user, set the user's password, and give the user 'sudo' rights.

#============
# Add a user
# 1) First add a user and set user's shell to bash and create a directory for user in the /home folder
# 2) Next set the user's password
# 3) Then add the user to the `sudo` group so the user can use the `sudo` command
#============
RUN useradd -ms /bin/bash $username
RUN echo $username:$password | chpasswd
RUN adduser $username sudo

4) This line updates the package manager for the container. This is necessary before using apt-get to install packages.

RUN apt-get update

5) These lines aren't necessary, but they prevent some warnings from being displayed. Docker builds the container without accepting/allowing user input, so the first line tells debconf (the Debian configuration management system) not to worry about displaying dialogs to the user. The second command installs apt-utils to allow package configuration to occur directly after install, rather than delaying it.

#=====================
# Updates for debconf
# Prevent message 'debconf: unable to initialize frontend: Dialog'
# Prevent message 'debconf: delaying package configuration, since apt-utils is not installed'
#=====================
RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
RUN apt-get install -y --no-install-recommends apt-utils

6) These lines use the apt-get package manager to install some basic tools that you would expect to have available on your command line. These include sudo, curl (used to download files, useful when installing programming languages), the c and c++ compilers which are also needed for many other language installations, and nano, a simple text editor. You may want to add some more install commands here if you use another text editor like emacs or vim.

#================
# Basic software
# build-essential Includes:
#  - gcc (C language compiler)
#  - g++ (C++ compiler)
#  - make
#================
RUN apt-get install -y sudo
RUN apt-get install -y curl
RUN apt-get install -y build-essential
RUN apt-get install -y nano

7) This part installs Python 3 and Pip 3, which is the package manager for Python 3.

#=========
# Python3
#=========
RUN apt-get install -y python3 && \
    apt-get install -y python3-pip

8) This section installs RVM, the Ruby Version Manager, which makes it easier to work with Ruby. I comes with the ruby language interpreter as well as irb (interactive ruby REPL) and some additional software. It first downloads the gpg keys to verify the the RVM install is legitimate. Next it downloads RVM with the latest stable version of Ruby. It then add the user that was created earlier to the rvm group.

#================
# Ruby (via RVM)
#================
RUN  gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB && \
    \curl -L https://get.rvm.io | bash -s stable --ruby && \
    adduser $username rvm

9) This section downloads version 1.9.1 of the Go programming language. First it uses curl to download the compressed language files. It then uncompresses the files to the /usr/local directory. Then it removes the compressed files. Finally it updates the PATH environment variable to include the path to the Go binaries (e.g., the go build and other Go commands).

#====
# Go
#====
RUN curl -o ./go.linux-amd64.tar.gz https://storage.googleapis.com/golang/go1.9.1.linux-amd64.tar.gz && \
    tar -C /usr/local -xzf go.linux-amd64.tar.gz && \
    rm -f go.linux-amd64.tar.gz
ENV PATH="${PATH}:/usr/local/go/bin"

10) This section sets the password for the root user. It uses the rootpassword environment variable that was set at the beginning of the Dockerfile as the new password for the root user.

#===================
# Set root password
#===================
RUN echo root:$rootpassword | chpasswd

11) These lines copy the entry_point.sh file from your computer into the root directory of the container (/entry_point.sh). The second line changes the file's permissions to make it executable. We need to do this because the file is copied with the same permissions it has on your computer. That means that if it cannot be executed on you computer, Docker won't be able to execute it. You could change the permissions to the desired permissions on your computer so that it is copied with the correct permissions; however, to make it work every time, this Dockerfile doesn't assume that the file has the correct permissions. The third line tells Docker to use that file "/entry_point.sh" as the ENTRYPOINT. Meaning that this file will be run every time the container starts.

#================
# Set ENTRYPOINT
# Copy entry_point file and make it executable.
#=================
COPY ./entry_point.sh /
RUN chmod 744 /entry_point.sh
ENTRYPOINT ["/entry_point.sh"]

12) The first line here changes the current user for the container build. All commands after this will be executed as this user. This also makes it so that when the container starts, it loads the bash shell as this user. The final command allows us to specify the directory that the shell will be in when the container starts. This is set to load the bash shell in the user's home directory.

#==================
# Set default user
# 1) Set the default user when the container starts
# 2) Set the default directory to load when container starts
#==================
USER $username
WORKDIR /home/$username

That's it!

You made it! Congratulations! Now not only can you use this Dockerfile to create an image and containers, you also can fork this Dockerfile on GitHub and customize it to exactly suit your needs! Docker is a powerful tool, and this is just one of many uses for it. Learning happens step-by-step though, so master this knowledge and then move on to increase your understanding of what Docker can do for you! Thanks for reading!

Create your first website on GitHub Pages

Programming Liftoff — Fri, 22 Sep 2017 04:35:29 +0000

This article was originally published on programmingliftoff.com as Create your first website on GitHub Pages.

I have been spending most of my time lately working on projects around web development. One of the most amazing tools I've found during this process is GitHub Pages. This article will walk you through creating a 'Hello, World' website hosted on GitHub Pages. Everything here is 100% free. If you learn better from videos, scroll down to the bottom of this article for a video walkthrough.

STEP 1 - CREATE A GITHUB ACCOUNT

If you already have a GitHub account, great! Â Feel free to skip to step 2. Â If not, no worries! Â Creating a GitHub account is easy and will boost your visibility and credibility as a developer. Â In a way, a GitHub account is like a LinkedIn account for developers. Â GitHub allows you to put your code under version control and store it on a server (aka "In the cloud") so that even if you lose your computer or hard drive, all your code will still be accessible through your GitHub account. Â There are many different types of version control systems (vcs) such as subversion (svn), mercurial, and git. Â GitHub, as you may have guessed, uses git. Â They all have different strengths and weaknesses, but overall git is probably the easiest to get started with and is the go-to vcs system for the majority of developers. Â Version control systems are outside the scope of this tutorial, but you can find a short comparison of some of the most popular version control systems here. Â A nice Youtube playlist with introductory git videos published by GitHub can be found here.

To make an account on GitHub, head on over to their webpage at https://github.com/. Â They have a really simple process for creating an account, so simply pick a username, enter your email address, and choose a (strong) password, and you're good to go!

STEP 2 - CREATE A REPOSITORY

Â
Next we will create the repository we will use for our GitHub Pages site. Â First a quick, but important note on repositories created with GitHub. Â GitHub has a free plan and a paid plan. Â The main difference between a free and paid plan on GitHub is the ability to create a private repository. Â With a free plan, all repositories you create will be public. Â That means anyone can see the code/files/ect. that you upload or create in the repository. Â Therefore it is super important that you do not put any private information in a public GitHub repository. Â Whatever you put in a public GitHub repository, you are sharing with the world. Â Using the free plan works great for this tutorial, as we will be adding a simple 'Hello, World' webpage to our repository, but keep in mind that if you want to be the only one with access to your GitHub repositories, you will need to upgrade to a paid account, which is currently $7 a month. Â If you're a college student, GitHub will give you unlimited free private repositories and many other benefits; you can find more info here.

Steps to create a repository:

Click the 'New Repository' button
Enter the repository details as shown below and then click the green 'Create repository' button.

STEP 3 - ENABLE GITHUB PAGES FOR THE REPOSITORY

Click the 'Settings' button on the repository home page.
Once you are on the settings page, scroll down to the 'GitHub Pages' section and choose the master branch for the source.

STEP 4 - CREATE THE HELLO WORLD WEBSITE

After enabling GitHub Pages for the repository, the next step is to create your website! Â Head back to the 'Code' tab in GitHub as shown below.
To create a homepage for your website, click on the 'Create new file' button.
Next enter the information shown below to create the index.html file.

STEP 5 - VISIT YOUR WEBSITE!

Great! Now it's time to visit your new website! Â Head back to the 'Settings' tab and click on your GitHub Pages URL in the GitHub Pages section. Â Note: It may take 5-10 minutes for the link to show your updated site.
Congratulations! Your website should be live on the internet! Â Now you can utilize your web development skills to make an awesome website without having to pay a penny for hosting!

Final Site

BONUS - USING JEKYLL THEMES

If you were checking out the options under the GitHub Pages section, you will have noticed that you can choose a theme. Â Themes are an easy way to get a great looking webpage up and running in no time! Â After choosing a theme, you will need to delete the index.html file you created to see the theme take effect.

And that's the basics of GitHub Pages. Â In summary, GitHub Pages allows you to host your static websites for free. Â If you want your website source code to be private, you can upgrade to a paid GitHub account for unlimited private repositories. Â Static websites are very powerful. Â These sites can be built so well that it is not obvious whether a site is a static site, or a dynamic site using a server. Â This tutorial was to help you become aware of the possibilities made available to you by GitHub's support for static websites. Â To fully take advantage of static sites on GitHub you will need to practice your HTML, CSS, and JavaScript skills! Â With GitHub Pages, (almost) anything is possible, so start building your website today!

Did you create a static site on GitHub? Â If so, post a link in the comments below so others can see it and gain some inspiration!

Decide to watch this tutorial instead of reading it? Â Great! Â Hit play below.

Send Text Messages from Python!

Programming Liftoff — Sun, 10 Sep 2017 02:10:50 +0000

Recently I've been focusing on how to do useful things with my programming knowledge. Python integrates so well with many different services, and therefore has been my language of choice on this quest. In this post I'm sharing an awesome service I found that lets you send text messages from your Python application for free - no credit card required! There is a catch though, this is just a trial account, so you will eventually run out of trial credits . But hey, Twilio is pretty generous with the amount of free credits you receive, so let's get to writing our application!

Checkout the video below. If you would like to learn how to make more awesome applications in Python, checkout the Programming Liftoff website here http://programmingliftoff.com/.

Andrew @ Programming Liftoff