Giter Club home page Giter Club logo

codelikethis's Introduction

codelikethis

source for Code Like This web site

see todo.md for some todo items

Setup

First, make your own fork, and install Ruby and git on your computer. Then...

  1. git clone XXX (where XXX is either https://github.com/alexch/codelikethis.git or your personal github repo URL)
  2. cd codelikethis
  3. gem install bundler
  4. bundle install
  5. rake spec (to run all tests and verify setup)
  6. rake build (to compile CSS)
  7. rake run (or rerun to rebuild/restart on file changes)
  8. open http://localhost:9292

Usage

SCSS is currently built using Sass. Run this all the time in development, or at least once before deploy after you change anything:

rake build
Command Description
rake spec run all tests and verify setup
rake build compile CSS
rake run run local server on http://localhost:9292
rerun rackup run with rebuild/restart on file changes
rerun --pattern '*.scss' --exit -- rake build run this in a separate terminal to compile CSS when SCSS changes too
./check-links.sh check entire site for broken links

Note that any of the above may need to be preceded by bundle exec e.g. bundle exec rerun rackup (whether you need to do this or not depends on gnarly details of your Ruby installation).

Deploying

Local -> Github -> CircleCI -> Heroku

Layout

Path Description
./app.rb main app
./config.ru app config
lib ruby source code
lib/thing.rb::WEIRD_WORDS list of oddly-capitalized words (e.g. CSS, JavaScript)
lib/bootcamp.rb ruby Site describing the Bootcamp course(s)
lib/bootcamp-schedule.json JSON describing the Bootcamp course schedule
spec ruby test source code
public web-visible files
public/images web site images
public/lessons/images images used by some lessons
public/lessons/foo/bar.jpg an image used by only a single lesson
public/js web site scripts
public/css web site css files -- do not edit these directly!
public/scss web site sass source files, compiled into public/css
public/lessons course files (markdown and images), organized by track
public/lessons/trackname/ track files (markdown and images), organized by track
public/lessons/trackname/trackname.rb track description files; names match public/lessons subdirs
public/lessons/trackname/baking.md markdown slides for a single lesson named baking (served from /lessons/trackname/bake_cookies URL path)
public/projects/bake_cookies.md markdown slides for a single project named bake_cookies (served from /projects/bake_cookies URL path)

Sites

a Site is

  • a hostname
  • an ordered collection of Tracks
  • a home page
  • a schedule

Currently there are three Sites:

  1. CodeLikeThis http://codelikethis.com - the main site, containing all Tracks (listed in alphabetical order)
  2. Bootcamp http://bootcamp.burlingtoncodeacademy.com - the site for Burlington Code Academy's 2018 Web Development Bootcamp, which runs from June through August in (where else?) Burlington, Vermont
  3. JavaScript After Hours http://js-intro.burlingtoncodeacademy.com

Both sites are served from the same web application instance, running on Heroku (http://codelikethis.herokuapp.com). The app looks at request.host and serves a different Site to each hostname.

To add a Site, follow the example of Bootcamp.

To point DNS at a new Site:

  1. run heroku domains:add newsite --app codelikethis
  2. run heroku domains --app codelikethis and note the "DNS Target" for your new site
  3. in your DNS manager, add a CNAME record pointing the subdomain name (e.g. newsite) to the DNS target (e.g. salty-hyena-j9awwxxx123.herokudns.com)

(Note that Heroku SSL ACM does not support wildcard domains, so each CNAME subdomain will need a separate heroku DNS Target.)

To view a Site locally, use a site parameter, e.g. http://localhost:9292/?site=bootcamp. This parameter sets a cookie so future page requests will stay on that site; this is a convenience for localhost development and should not be used in a production environment (and if it is used, it may override the real site as specified by the subdomain).

Adding a Track

  1. Decide on its name. Its name is a camelcase_word that will automatically turn into titlecase when displayed. (e.g. cook_food => Cook Food)
  2. create a new subdir inside public/lessons (e.g. public/lessons/cook_food/)
  3. define a Track subclass in a new file inside that dir (e.g. public/lessons/cook_food/cook_food.rb) and
  4. declare your lessons inside the track file. Look at the existing .rb files inside public/lessons for examples.
  5. for each Lesson, put its slides in a markdown file with its name in the lessons directory (e.g. public/lessons/cook_food/stirfry.md)
  6. add the Track to your Site by following the example of Bootcamp

Projects

Currently a project consists of a markdown file in the public/projects/ directory e.g. public/projects/foo.md. It is viewable via the path /projects/foo (note the lack of file extension).

To declare a project is a bit scattershot. It can be referenced in several places:

  1. in the schedule JSON attached to a given week
  2. in a Lesson file (not the slides markdown)
  3. in a Track file, directly under the Track
  4. in a Track file, nested under a Lesson

We should clean this up, so we don't have duplication/omission of e.g. project descriptions depending on where they're defined/referenced.

URL Rewriting

If you rename a track or lesson, add an entry to config.ru so external links to the old name do not become dead links.

config.ru also rewrites incoming URLs containing underscores, converting from snake_case to kebab-case for lessons, projects, etc. -- but NOT for image files and other media -- and the app can find lesson etc. files in either snake_case or kebab-case format.

codelikethis's People

Contributors

aakatz3 avatar alexch avatar dangeranger avatar dirtybirdnj avatar djmorosini avatar rhrynyszyn avatar robinrainwalker avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.