Skip to content

Commit 6deb05a

Browse files
tomclosetomclose
committed
Initial import from old notes
0 parents  commit 6deb05a

File tree

108 files changed

+21530
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+21530
-0
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
_gh-pages/

Diff for: ‎Rakefile

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
namespace :site do
2+
desc "Commit the local site to the gh-pages branch and publish to GitHub Pages"
3+
task :publish do
4+
# Ensure the gh-pages dir exists so we can generate into it.
5+
puts "Checking for gh-pages dir..."
6+
unless File.exist?("./_gh-pages")
7+
puts "No gh-pages directory found. Run the following commands first:"
8+
puts " `git clone [email protected]:mojombo/jekyll gh-pages"
9+
puts " `cd gh-pages"
10+
puts " `git checkout gh-pages`"
11+
exit(1)
12+
end
13+
14+
# Ensure gh-pages branch is up to date.
15+
Dir.chdir('_gh-pages') do
16+
sh "git pull origin gh-pages"
17+
end
18+
19+
# Copy to gh-pages dir.
20+
puts "Removing everything except .gitignore"
21+
Dir.glob("_gh-pages/*") do |path|
22+
next if path == ".gitignore"
23+
sh "rm -rf #{path}"
24+
end
25+
sh "cp -R _site/* _gh-pages"
26+
27+
# Commit and push.
28+
puts "Committing and pushing to GitHub Pages..."
29+
sha = `git log`.match(/[a-z0-9]{40}/)[0]
30+
Dir.chdir('_gh-pages') do
31+
sh "git add ."
32+
sh "git add -u"
33+
sh "git commit -m 'Updating to #{sha}.'"
34+
sh "git push origin gh-pages"
35+
end
36+
puts 'Done.'
37+
end
38+
end

Diff for: ‎_config.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
name: Learn to Code
2+
pygments: true

Diff for: ‎_includes/exercise.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="exercise">
2+
{{ exercise }}
3+
</div>

Diff for: ‎_layouts/default.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>{{ page.title }}</title>
7+
<meta name="viewport" content="width=device-width">
8+
<!-- Twitter bootstrap basic styles -->
9+
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
10+
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
11+
12+
<!-- syntax highlighting CSS -->
13+
<link rel="stylesheet" href="/css/syntax.css">
14+
<!-- Google webfont link -->
15+
<link href='http://fonts.googleapis.com/css?family=Arvo:700|Titillium+Web:900' rel='stylesheet' type='text/css'>
16+
17+
18+
<!-- Custom CSS -->
19+
<link rel="stylesheet" href="/css/main.css">
20+
21+
<script src="/assets/jquery-1.10.0.js"></script>
22+
23+
<script type="text/javascript" src='/bootstrap/js/bootstrap.js'></script>
24+
<script type="text/javascript" src='/assets/custom.js'></script>
25+
26+
</head>
27+
<body class="{{ page.cssclass }}">
28+
29+
<div class="container">
30+
31+
{{ content }}
32+
33+
34+
</div> <!-- /container -->
35+
36+
</body>
37+
</html>

Diff for: ‎_layouts/post.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
layout: default
3+
---
4+
<h2>{{ page.title }}</h2>
5+
<p class="meta">{{ page.date | date_to_string }}</p>
6+
7+
<div id="post">
8+
{{ content }}
9+
</div>

Diff for: ‎_layouts/session.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="page-header">
6+
<h1>{{page.title }} <small>{{ page.strapline}}</small></h1>
7+
</div>
8+
9+
<div class="tabbable tabs-left">
10+
<ul class="nav nav-tabs" id="myTab">
11+
{% for task in page.tasks %}
12+
{% if forloop.first %}
13+
<li class="active"><a href="#{{ task.name }}" data-toggle="tab">{{ task.title }} </a></li>
14+
{% else %}
15+
<li><a href="#{{ task.name }}" data-toggle="tab">{{ task.title }} </a></li>
16+
{% endif %}
17+
{% endfor %}
18+
</ul>
19+
20+
<div class="tab-content">
21+
{% for task in page.tasks %}
22+
{% if forloop.first %}
23+
<div class="tab-pane active" id="{{ task.name }}">
24+
{% else %}
25+
<div class="tab-pane " id="{{ task.name }}">
26+
{% endif %}
27+
28+
<h2>{{ task.title }}</h2>
29+
{{ task.output }}
30+
</div>
31+
{% endfor %}
32+
</div>
33+
34+
</div>
35+

Diff for: ‎_layouts/task.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: none
3+
---
4+
5+
{{content}}

Diff for: ‎_plugins/highlight_in_list.rb

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module Jekyll
2+
module Tags
3+
class HighlightBlock < Liquid::Block
4+
alias_method :old_render, :render
5+
6+
def render(context)
7+
output = old_render(context)
8+
if @options['inlist']
9+
output.lines.map {|l| " "*8 + l }
10+
else
11+
output
12+
end
13+
end
14+
end
15+
end
16+
end

Diff for: ‎_plugins/sessions.rb

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
module Jekyll
2+
3+
class SessionPage < Page
4+
def initialize(site, base, dir)
5+
@site = site
6+
@base = base
7+
@dir = dir
8+
@name = 'index.html'
9+
10+
self.process(@name)
11+
self.read_yaml(File.join(base, '_layouts'), 'session.html')
12+
self.data['tasks'] = get_tasks
13+
# load other options
14+
if File.exists?(File.join(base, '_sessions', dir, 'info.yml'))
15+
self.data.merge!(YAML.load_file(File.join(base, '_sessions', dir, 'info.yml')))
16+
end
17+
18+
self.data['title'] ||= dir
19+
end
20+
21+
def get_tasks
22+
Dir.entries(File.join(@base, '_sessions', @dir)).reject{|x| %w{. .. info.yml}.include?(x)}.reject{|x| x[0]=='_'}.sort.map do |n|
23+
t = TaskPage.new(@site, @base, @dir, n)
24+
#t.render
25+
t
26+
end
27+
end
28+
def render(*args)
29+
self.data['tasks'].each {|t| t.data['output'] = t.tap {|t| t.render(*args)}.output }
30+
super
31+
end
32+
33+
end
34+
35+
class SessionPageGenerator < Generator
36+
safe true
37+
38+
def generate(site)
39+
# if we have a session template
40+
if site.layouts.key? 'session'
41+
# put in top level directory
42+
if Dir.exists?('_sessions')
43+
subdirs = Dir.entries('_sessions').reject{|x| %w{. ..}.include?(x)}
44+
subdirs.each do |dir_name|
45+
46+
site.pages << SessionPage.new(site, site.source, dir_name)
47+
end
48+
end
49+
end
50+
end
51+
end
52+
53+
# In some ways I want a TaskPage. In others I don't.
54+
# I definitely want something to read in individual task files and render them.
55+
# But in a way more akin to a blog page summary than individual pages
56+
57+
# Plan: make TaskPages. Don't have a TaskPage generator. Attach TaskPages to relevant SessionPage.
58+
# Render them using TaskPage.content ?? Or does the content get passed in in a different way.
59+
# You don't call post.content ... :( ... Actually it's ok. Content does seem to be passed to liquid.
60+
# When does it get put into the template though? https://github.com/mojombo/jekyll/blob/master/lib/jekyll/site.rb#L225
61+
# But that just calls page.render: https://github.com/mojombo/jekyll/blob/master/lib/jekyll/page.rb#L105
62+
# But that just goes here: https://github.com/mojombo/jekyll/blob/master/lib/jekyll/convertible.rb#L90
63+
# The only bit I don't want is Convertible.write https://github.com/mojombo/jekyll/blob/master/lib/jekyll/convertible.rb#L141
64+
# Which is called for pages, posts etc. here: https://github.com/mojombo/jekyll/blob/master/lib/jekyll/site.rb#L292
65+
# So what I really want it to do is allow it to render, but not be placed in the list of pages.
66+
# But then that has to be done manually anyway, so we're fine!
67+
68+
# This doesn't seem to work. I have problems rendering the TaskPages at the right time.
69+
# Maybe I should merge the TaskPages into the SessionPage's payload
70+
# Actually I didn't have to do this. The above worked.
71+
72+
class TaskPage < Page
73+
def initialize(site, base, dir, name)
74+
@site = site
75+
@base = base
76+
@dir = dir
77+
@name = name # won't be used
78+
79+
self.process(@name) # separates into @basename and @ext
80+
self.read_yaml(File.join(base,'_sessions', dir), name)
81+
82+
self.data['name'] = @basename
83+
84+
# self.data['title'] = "#{category_title_prefix}#{category}" # should have title already
85+
end
86+
end
87+
88+
89+
90+
class ExerciseTag < Liquid::Block
91+
# somehow access converter
92+
93+
def render(context)
94+
# content = super
95+
# parsed_content = Liquid::Template.parse(content)
96+
# output = context.stack do
97+
# parsed_content.render(context)
98+
# end
99+
# how do I convert this thing???
100+
"<div class='exercise alert alert-info' markdown='1'><strong>Task:</strong> " + super + "</div>"
101+
end
102+
end
103+
104+
105+
end
106+
107+
Liquid::Template.register_tag('exercise', Jekyll::ExerciseTag)

Diff for: ‎_sessions/c1s1/1_what_is_a_webpage.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: What is a web page?
3+
---
4+
5+
A webpage is just a set of files that your web browser knows how to display.
6+
7+
There are three possibilities for the types of files they could be: HTML, CSS and Javascript. Most web pages will be a mixture of all three. Because the files have to be able to be interpreted by all web browsers on all operating systems, the choices are limited and don't change very often.
8+
9+
<ul class="thumbnails">
10+
<li class="span3">
11+
<div class="thumbnail">
12+
<img src="/assets/html5_logo_128.png" style="height: 128px;" alt="">
13+
<h3>HTML</h3>
14+
<p><em>HyperText Markup Language</em> encodes the information that is sent back from the server.</p>
15+
</div>
16+
</li>
17+
<li class="span3">
18+
<div class="thumbnail">
19+
<img src="/assets/css.jpeg" style="height: 128px;" alt="">
20+
<h3>CSS</h3>
21+
<p><em>Cascading Style Sheets</em> tell your browser how to display that information.</p>
22+
</div>
23+
</li>
24+
<li class="span3">
25+
<div class="thumbnail">
26+
<img src="/assets/js.jpeg" style="height: 128px;" alt="">
27+
<h3>Javascript</h3>
28+
<p>Javascript is a programming language that can be used to provide client-side interactivity.</p>
29+
</div>
30+
</li>
31+
</ul>
32+
33+
HTML, CSS and Javascript are known as **client-side** technologies, because they are sent to your web browser (the client).
34+
35+
#### Programming language vs markup language
36+
37+
HTML (*HyperText Markup Language*) is a way of writing information so that it can be interpreted by a web browser. It is *not* a programming language - you can't do calculations in it - it is a _markup_ language. CSS is also a markup language. Javascript is a programming language.
38+
39+
#### Content/style separation
40+
41+
Back in the early days of the web HTML would both store the information and tell the browser how to display it. People then realised that this was a bad idea - making a small change such as changing the colour of a heading would require edits all over the place, which made sites hard to maintain. HTML is now used just to display the information (text etc.) that is stored in the page. CSS is used to tell the browser how to display the information.
42+
43+
#### Viewing HTML, CSS and js
44+
45+
Because the HTML, CSS and js are sent you your browser, it is easy for you to look at them. **There are no secrets in HTML, CSS or js.** If there's a part of a webpage that you like, it's easy to find out how it is coded and use the technique yourself.
46+
47+
Every browser provides a way to look at the source of the page you're currently viewing. In Chrome you do `View > Developer > View Source`. This will show you the raw HTML but isn't always the easiest thing to look at.
48+
49+
Several browsers also provide developer tools, which allow you to *interactively* view the page source. In Chrome you can access these by doing `View > Developer > Developer Tools`. If you use Firefox, you can get similar functionality with the Firebug plugin. These tools are the best way to investigate a web page. Over the course you will be using them a lot on your own pages, especially when things aren't working exactly as you expect.
50+
51+
There are a few features of the Chrome developer tools that it is worth pointing out now.
52+
53+
54+
{% exercise %}
55+
1. Open this page in Google Chrome
56+
2. View the page source by doing one of the following:
57+
* `View > Developer > View Source`
58+
* `Tools > View Source`
59+
3. Open the developer tools by doing one of the following:
60+
* `View > Developer > Developer Tools`
61+
* `Tools > Developer Tools`
62+
4. Use the magnifying glass in the bottom left to hover over bits of the page and find the related HTML.
63+
5. Hover over the HTML code in the developer tools box and watch as different parts of the page are highlighted.
64+
6. Try changing some of the CSS on the right hand side. To undo any changes just refresh the page.
65+
7. Have a look on the `Resources` tab. See if you can find the CSS, javascript and image files used on this page.
66+
8. Visit a few of your favourite websites and repeat this process.
67+
{% endexercise %}

Diff for: ‎_sessions/c1s1/2_servers.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Web servers
3+
---
4+
5+
You can think of the internet as a massive network of computers that can send files to one another. The computers that hold web pages are called _servers_. **Servers are large, specialised computers that are permanently connected to the internet.**
6+
7+
Once the address of the web server has been found your request is forwarded on to it, the web server will interpret your request and send back one or more files. We now look at the technology involved in this process.
8+
9+
### Static vs dynamic sites
10+
11+
There are two main possibilities server-side: either your site is static or dynamic.
12+
13+
* In a static site all the pages are pre-prepared and the web server just sends them to the browser.
14+
* In a dynamic site the pages are prepared on-the-fly pulling information out of a database depending on what the user asked for.
15+
16+
Most of the sites you can think of will be dynamic sites (e.g. [facebook.com], [reddit.com], [amazon.com], ..).
17+
18+
### Server-side technologies
19+
20+
There are many options for building a dynamic server-side site - you're pretty much free to do what you like. Some common choices are:
21+
22+
<ul class="thumbnails">
23+
<li class="span3">
24+
<div class="thumbnail">
25+
<img src="/assets/rails.jpeg" alt="">
26+
<h3>Ruby on Rails</h3>
27+
<p>A web development framework written in the Ruby programming language.</p>
28+
</div>
29+
</li>
30+
<li class="span3">
31+
<div class="thumbnail">
32+
<img src="/assets/php_logo.gif" style="height: 90px;" alt="">
33+
<h3>php</h3>
34+
<p>A programming language that formed the basis of most dynamic websites in the early 2000s.</p>
35+
</div>
36+
</li>
37+
<li class="span3">
38+
<div class="thumbnail">
39+
<img src="/assets/django_logo.png" style="height: 128px;" alt="">
40+
<h3>django</h3>
41+
<p>A web development framework written in the Python programming language.</p>
42+
</div>
43+
</li>
44+
<li class="span3">
45+
<div class="thumbnail">
46+
<img src="/assets/nodejs_logo.png" alt="">
47+
<h3>Node.js</h3>
48+
<p>A web development framework written in javascript.</p>
49+
</div>
50+
</li>
51+
<li class="span3">
52+
<div class="thumbnail">
53+
<img src="/assets/wordpress_logo.png" alt="">
54+
<h3>Wordpress</h3>
55+
<p>A blogging platform (now capable of much more) written in php.</p>
56+
</div>
57+
</li>
58+
</ul>
59+

0 commit comments

Comments
 (0)