Django, Python, and Cloud9, Oh My!

November 28, 2018 | Uncategorized

Cloud9 has been my development environment of choice for a few years now. Originally, I was drawn to them as an educator because their workspace templates made it easy for my students to quickly spin up preconfigured environments for learning WordPress and Django. Cloud9 has recently been acquired by AWS, but I have not yet made the change to the new service features. For those of us using the legacy cloud9 workspaces, the templates have begun to show their age.

I use Cloud9 in my classroom and my students use the great Django tutorial provided by Mozilla’s Developer Network, “Learn web development.” This post illustrates how to setup a legacy Cloud9 blank workspace to follow that tutorial (Server-side website programming: Django Web Framework).

The blank workspace

Cloud 9 Django workspaces use Python 2.7 and 3.4 with Django 1.9. These old version are no longer supported so we must build our workspace from scratch. To create an updated Workpace for Django 2.x, I find it’s easier to start with a blank workspace and use virtualenv. Here are the steps I took to create a workspace for Django 2.1 with Python 3.6

  • Make a new workspace using the “Blank” template
  • Update apt-get (so we can install Python 3.6)
sudo apt-get update
  • Install Python 3.6
sudo apt-get install python3.6
  • Install virtualenv using pip3
sudo pip3 install virtualenv
  • Make a virtualenv for Python 3.6 (My virtualenv is named “venv” here)
virtualenv --python=python3.6 venv
  • Activate the virtualenv
source venv/bin/activate

Install Django

  • Install Django (This should install v2.1 at the time of this writing)
sudo -H pip3 install django
  • Create your Django project (My project is just called “webapp”)
django-admin startproject webapp

Create a custom Cloud9 runner

At this point, most tutorials I found have you start the server using the command line, but I wanted to be able to run my app using a cloud 9 runner so I could preview the results using the standard cloud 9 project url.

To create a custom runner to run this config (With the virtualenv):

  • From the top menu choose Run > Run With > New Runner
  • Use the editor to create your runner configuration. I started with the default Django runner code and added my “venv” activation path, and my project directory name (“webapp”)
{
    "cmd": [
        "bash",
        "--login",
        "-c",
        "source venv/bin/activate && cd webapp && python3 manage.py runserver $ip:$port"
    ],
    "working_dir": "$project_path",
    "info": "Your code is running at \\033[01;34m$url\\033[00m.\n\\033[01;31m"
}
  • Save the runner

Now you should be able to run your project using the cloud 9 runner. Your workspace should function similar to the old Django template, except now your terminal commands should be run using the activated virtualenv (and python3).

How do I Add Navigation Menus?

April 20, 2017 | Lesson

Now that you have your styles and scripts working, let’s register support for navigation menus. If you’ve used WordPress with built-in or third party themes, you’re probably familiar with creating menus in your site’s dashboard. When we create our theme from scratch, we have to register our menus using actions and identify the placement for each menu. (Continue reading: How do I Add Navigation Menus?)

How Do I Get My Styles to Work?

March 28, 2017 | Lesson

Now that we have our basic theme files and identified the top and bottom of our pages, you may be tempted to link your CSS and scripts at this point. However, WordPress has an action system that allows you to do this. Using the functions file to “enqueue” styles and scripts using the “WordPress Way” helps you to define dependencies and avoid conflicts with plug-ins and other themes. (Continue reading: How Do I Get My Styles to Work?)

How Do I Create the Basic Theme Files?

March 23, 2017 | Lesson

In the previous lesson, we created our WordPress in Cloud 9. Now, we can begin creating our own theme. The initial theme files will allow you to activate your custom theme in your WordPress Appearance Dashboard. After completing these steps, you will have activated your custom theme. Although it won’t be very useful yet, it will contain the minimum files needed to start building your theme. (Continue reading: How Do I Create the Basic Theme Files?)

How do I reset my password?

March 14, 2017 | Help

In my WordPress Course, my students occasionally lock themselves out of their WordPress admin dashboard. Since they are developing themes in public workspaces, they usually do not configure email on these workspaces. Instead, we use phpMyAdmin to reset our passwords manually in the database. (Continue reading: How do I reset my password?)

How Do I Set up a WordPress Site?

March 10, 2017 | Lesson

WordPress is a great Web authoring tool. Originally created as a blog platform, WordPress has become a very popular choice for blogs and marketing websites. One of the major benefits of WordPress is that it allows end users to easily author and publish their own content without writing HTML pages manually. Setting up a WordPress site is relatively simple and many popular hosting providers have automated this process. We can set up a local development environment, use our hosting provider to create a live site, or use a service like cloud 9 to create a cloud-based development workspace. I’ll use cloud 9 for this course, but briefly discuss the first two options before setting up our workspace. (Continue reading: How Do I Set up a WordPress Site?)

Languages, Tools, and Fundamentals

February 26, 2017 | Teaching and learning

It’s easy for new students to become overwhelmed with the variety of resources, programming languages, and programming tools available today. Often a question beginners have is, “what programming language should I learn?” This could lead into a discussion about programming goals (games, websites, mobile apps), and sometimes tools (Unity, Cloud 9, App Inventor). For absolute beginners, I recommend putting that question aside and focusing on understanding the fundamental concepts we find in most languages. In my experience, this helps students remain flexible when it comes to languages and tools later on. (Continue reading: Languages, Tools, and Fundamentals)

WordPress

February 24, 2017 | Syllabus

WordPress is an extremely popular platform for freelance Web designers for blogs and marketing sites. This course teaches the basics for creating a custom theme for your future clients. (Continue reading: WordPress)

Game Dev

February 24, 2017 | Syllabus

Teaching programming through game development is a popular idea with students. This course uses Unity3D to create interactive games. The scope of these projects create unique challenges for students, especially when working in teams to produced a working game.

Where’s the course?

I’m working on it! Stay tuned!!

-Jeff

Web Design

February 24, 2017 | Syllabus

Course Description

This course focuses on the fundamental technologies, techniques, and methodologies of web site design development. The goal of this course is to provide students with the knowledge and skills to write valid, accessible code for web pages given a typical design document. Core technologies include learning to write HTML, CSS, and basic JavaScript (JS). The course will include an introduction to local development environments and version management software.

This course is meant for beginner students who wish to form a foundation in core web languages and technologies. Students who complete this course may extend their learning with advanced JS, front-end frameworks, and server-side code techniques.

Schedule

This class is meant to run a full school year. I find a double-block (1.5 – 2 hours) schedule is the right amount of time to introduce a topic and allow for hands on labs. Typically, each lesson is completed within one week of classes.

Resources

Crucial tools for beginner web developers include:

  • VSCode – A code editor used by professional web developers
  • Learn Web Development – An E-book from the Mozilla Development Network (MDN). This will be the primary textbook for this course.
  • w3schools.com – A web reference resource that is highly accessible for beginners. It’s like the Wikipedia of HTML and CSS.
  • css-tricks.com – A great source of thoughtful CSS examples and research.

Methodology

This course is meant to be student-driven. Although we will use an E-book, reference information about HTML, CSS, and JS has minimal value to students without practical examples.

For example, instruction on making images responsive is best understood and retained after a student asks, “How can I make my image look good on my phone browser? It’s way too big!” I know this because I have given lessons on responsive images, only to hear this question from everyone in the room during the hands on lab.

The Learning Journal

Information on demand is crucial for hands-on learning. But we also need a primer before writing code. To strike this balance, I use a learning journal. Before each lab I assign the e-book unit, and ask the students to write outline notes. Outline notes help students identify key topics, jot down questions or expectations, and keep their notes minimal. 

During the hands-on labs, I assume the facilitator role. When students run into unknown ideas and I can direct them to the section of their notes that discusses what they are trying to implement. Finally, I provide any additional clarification or my own “two-cents” about the topic.

The Labs

The labs are a mix of coding assignments. Some are straight from the e-book, others are homemade. When assessing the labs, I prefer a demonstration and an explanation from the student about the code, the objective, challenges, and ultimately how it works (or doesn’t work). In this course, the most valuable product is not the code students write. The most valuable product is their understanding of their code.

Assessment

In use a weighted system for assessment. Typically it looks like this:

  • Learning Journal: 30%
  • Labs: 30%
  • Participation: 30%
  • Documentation: 10%

I check Learning Journals at the beginning of every week. Labs must be assessed in class by the end of the week. Participation includes class discussion, peer teaching, and student collaboration. Documentation is simply including clear readable comments in your code.

Code “The Hard Way”

In the great book, “Learn Python 3 The Hard Way,” author Zed Shaw discusses the challenge performing tedious tasks and the value of perseverance. The Copy/Paste function is so handy. But you will never build the muscle memory and precision of writing code by hand.

Writing code by hand is error prone, which is good if you’re a student. I always tell my students, “You will learn more from the code that fails, than you will from the code that runs perfectly the first time.” Copy/pasting code robs you of the experience of deciphering errors, hunting down the problem, and implementing a solution that leads to a greater understanding of coding.

Programming is an art. If you want to master it, you have to put in the work. This is something all black belts learn. Coding the hard way doesn’t mean the code is complex or hard to understand. Coding the hard way means putting in the work. Diligently typing things out. Even when it’s tedious.

Lessons