Hi all!

I've been through the CSS tutorials with a good few people over the last year or so and I've found that a large amount of them fall over at a few specific places:

1. Moving the CSS from the head into a separate file
2. Using shorthand for margin values
3. The lack of a browser 'reset' until the end of the document, causing marked differences between what they're seeing and the example page until that last step

There are a couple of minor issues but these are the main ones that have caused a bit of consternation for students. Would it be possible to:

1. Start with the CSS in a separate file
2. Not introduce shorthand so blatantly, so early, and instead introduce it as a 'side' or bonus, or something along those lines?
3. Introduce the browser reset around the part titled, 'Styling our page further'

What are people's thoughts on this? Is there a better channel for me to have this discussion?

I'm happy to make the changes listed above.

Cheers!

In http://tutorials.codebar.io/html/lesson4/tutorial.html, the name resources is too ambiguous. Please rename it toolbar to make it clearer.

When going through the tutorial yesterday we noticed that the link to the Gorilla game example leads to an error page. (It's the last of the examples in the beginning of the tutorial).

Just wanted to start a discussion about possibly including some guidance about software to use for the tutorials, mainly the first HTML and CSS ones.

Because students are using their own laptops for tutorials (a really good thing!) they are unlikely to have any software installed which they can use edit the HTML file. Last week I guided some students through installing Sublime Text 2, but I could tell it felt jarring to them to install a bit of software which is not listed in the tutorial and it's not yet clear why they need it.

What do people think about either adding a section about text editors into the start of the tutorial (explaining that they're used to edit the HTML files), or maybe go down the route of recommending something like CodePen or JS Bin?

Any thoughts on adding something like this?

2.7 is legacy code and all mainstream projects out there have been supporting Python 3 for about a year now. It'd be a disservice to educate Python newbies on a version that the community has largely left behind.

We are currently using the 'redcarpet' Markdown engine, which will not be supported on GitHub Pages after May 1st. To suppress this warning, remove the 'markdown' setting in our site's '_config.yml' file

There are several good contributions to this project waiting to be merged in right now. Could we either get a yes or a no to these? People like codebar and want to help, but it's difficult when there is no feedback.

Add ajax, xml, json and rss examples

If there was a desire for it I could create Python versions of the Ruby tutorials. For example:

https://github.com/chrisfranklin/tutorials/blob/python-dev/python/lesson1/tutorial.md

(although Learn Python the Hard Way is excellent I think pointing to a much shorter introductory tutorial and then pointing towards LPHW for reference would be better, I'm happy to change it)

In writing the Sinatra tutorial I've realised that we use the command line kiiind of a lot, even when we;re trying to avoid it.

Would it be good to have a tutorial for this?

Writing one that covers Windows too will be hard.

Fundamentals of programming, loops, satements, after HTML, learn what an algorithm is.

Link on homepage to http://tutorials.codebar.io/general/setup/tutorial.html returns 404.

Sorry I haven't played with GitHub pages, so I'm not sure why 😕

Provide tutorial files as they should be to get started and a bundle of any additional files that are required.

Use gists.

Link from tutorial.

I had a student who was following the python tutorials recently and got confused between running code from a file or from the repl. One way to fix this would be:

• beginning of lesson 1, explain that everything will be done in the repl and how to start it
• end of lesson, add a note saying that you can save everything to a .py file and run it there

I've been coaching d3.js with one of the West London students and I feel that it could be a good advanced tutorial to go beyond the JavaScript basics. Here's a suggested lesson plan:

Lesson 1 - D3.js basics

• Basic HTML structure
• Append element (add an h1 to the document)
• Simple selection
  • Select (create ul + li, select the ul, set a property)
  • selectAll (set a property on all the li)
• Bind data + enter
• Simple div with text content
• Simple bars
• Coloured bars
• Load external data
  • Local web server
  • Bar width: value
  • Text: title

Lesson 2 - Simple SVG

• Basic SVG scatter plot
• Scales
  • linear
  • time
  • ordinal
• Axes
• Line graphs
• Area graphs
• Box plots

Lesson 3 - Visualisations

• Histogram
• Pie
• Pack
• Dendro
• Stream (area stack)
• Bar Stack (introduce data on sub-fields)

Lesson 4 - Dynamic Graphs

• On
  • Hover + highlight related sections to show how to use selections with “classed” applied and dynamic conditions that are true of false based on data fields
  • Action on click
• Update / exit

Line 4 of the first section:

To get help outside our sessions, join the codebar channel

Update the link to our chat channel so it directs to the codebar slack
https://codebar.slack.com/messages/general/details/

• Fork the repository
• Create a new branch
• Change the link
• Commit changes
• Open a Pull Request

[Placeholder for this project]

I'm hoping to work with others on a rewrite of the ruby syllabus. I've taught it a few times and have found that students often (a) struggle with some of the core concepts of the language, (b) struggle with some of the practicalities like running a CLI app, and (c) want more ways to learn.

I have a bunch of opinions of my own about how to improve the syllabus, but I want this to be a collaborative effort that the Codebar community are happy with, just like any PR. So, my idea is to firstly attend Codebar and coach on the ruby syllabus for the next few weeks (I confess, I've avoided it), and then get together a group of people who could help out. We'd then discuss and agree on a general direction and guiding principles, share out the writing work and test the new syllabus in upcoming Codebar sessions.

• relational vs nosql
• sql basics
• creating and managing DBs
• keep required setup minimum: use sqlite?

I would like to contribute to Codebar with Elixir Tutorials :)

In http://tutorials.codebar.io/js/lesson8/tutorial.html, "If you are not on Slack, use this link to get an invite." ( https://codebar-slack.herokuapp.com/ )

which doesn't appear to be working. I'm don't have a suggested replacement link, sorry.

Not a PR as it's some gist code with separate download.

It would be useful to move js from head to end of the body as that's one less thing to explain to the student at this point why something works in console and not inside script.js.

And it's same story for both exercises.

Another story is that teaching people about keyup event which only sort of does the right thing is probably counterproductive nowadays. input event is going to cause a lot fewer issues.

Recently a student (learning a programming language for the first time) had some trouble grasping the sortNumbersAscending example in lesson 2 of learning JavaScript https://github.com/codebar/tutorials/blob/gh-pages/js/lesson2/tutorial.md.

This seemed like a steep step up compared to the rest of the content (which the student understood and enjoyed going through).

I just wondered if lesson 2 was a bit early to introduce passing functions as arguments? or if this could be expanded on or simplified in this section?

@samsworldofno could you add some details about this issue?

I coached this last week and had the following notes:

• It wasn't initially clear where the JavaScript had to be written. Earlier tutorials have it written straight into the console - it wasn't obvious to the student that the code needed to go into a script.js.
• It's not clear why event works within the example code when e is the passed argument in $(document).on('keypress', '#username', function(e).
• When skim reading the tutorial, as students often do, it's not clear how to wire the various functions together. That said, I believe that encouraging this thinking is useful at this point, so maybe that's ok. It just might be worth explaining in the text how the wiring between functions should work for those that do read/are not being coached
• It confused the student when they had to replace an existing function with an expanded version
• If the user is not found on GitHub, we ask to show an error with the username... but within the showUser function this is not available.
• Overall the responsibility of showUser is weird because it takes an instance of XMLHttpRequest, not a user. When we switched to async it was obvious to create a second callback of showError, but again sending the username to that callback is non-trivial without using a closure which the student is likely not ready for.

Overall the tutorial is flowing better since the recent rewrite, and I think the decision to do the github request synchronously at first is sound. That said, I think it would be better to more explicitly "break" the code by switching it to async and letting the student understand the problems that follow with code that relies on blocking.

One last thing: you never, EVER get to the second exercise, even with an advanced student and 1:1 coaching. Perhaps it needs splitting? That said, this is an issue with several tutorials (eg intro to jQuery) and students are used to continuing the same module over several weeks. It just might give a better sense of achievement to "finish" a tutorial and then move on, as is possible in HTML and CSS.

Per this blog post: https://help.github.com/articles/page-build-failed-config-file-error/#fixing-highlighting-errors

Hey all, I am going through the code bar tutorials and was wondering if anyone has considered creating a tutorial to understand how to develop with accessibility in mind ? For example the uses of ARIA and other attributes. Or at least providing documentation on this? (WCAG and ARIA guidelines).

I would be keen to work on this with a bit of help!

I would like to prepare a tutorial about modern web development framework, with a focus on MVC (or similar) architecture-based ones.

After a general introduction, I would like to describe AngularJS (https://angularjs.org/) along with the quite new and really interesting Ionic (http://ionicframework.com/) and/or Ruby on Rails (http://rubyonrails.org/), with some little hands-on exercises and such things.

Good idea? Bad idea?

jQuery tutorial tasks (to-do list and color-picker) ramp up in difficulty at a sheer cliff-face instead of a gentle incline. This has resulted in several students being stuck on these tutorials for weeks or even months. It is additionally difficult for coaches to pick up where the student left off the previous week.

I am going to work on a rewrite of one or both of these tutorials, putting this out there to see if anyone else wants to collaborate.

Hi there!
I noticed with a student the other day that HTML tutorial 5 says the following:

First let’s set two background images, the first positioned on the right and the second on the left.
background: url('assets/images/background-right.jpg') right top no-repeat,
url('assets/images/background-left.jpg') left no-repeat;

This doesn't seem to correspond with the directory structure of the example files, so the student initially got quite confused. Suggest either changing the instructions or changing the directory structure of the example files to match.

Happy to do this myself with permission!

WARNING: ruby-2.2.1 is past its end of life and is now unsupported.
It no longer receives bug fixes or critical security updates.

Our current Ruby version is 2.2.1. Switch the Ruby version to 2.5.1

To get started

• Claim this issue by clicking the "Assignees" cog to the right and assigning yourself
• Check out our contributing guides
• You can pair with a coach

Steps for this issue:

• Install Ruby version 2.5.1 on your local system. How to do this depends on the Ruby version manager that you use. (this is an example for the rbenv manager)
• Set your Ruby version to 2.5.1. This again depends on your Ruby version manager.
• Change the Ruby version in the .ruby-version file of this project.
• Install the bundler gem for that version: gem install bundler.
• Run bundle install and check that the tests if any and the app work correctly.
• You may or may not have to upgrade some gems. If you have to, do it one at a time, like this:
  • find a conservative version of the gem that works and update the Gemfile
  • run bundle update GEMNAME
  • run the tests if any, they should be green
  • Run the app, it should work
  • commit!
• When you are finished, push your branch and submit a PR with your changes.

I'm coaching somebody and we're going through the first few javascript tutorials.

And in those tutorials you have quite a few for and while loops.

In reality you don't really need for and while loops anymore, also they are much harder to grok than their functional counterparts. I'd recommend and would be happy to help creating tutorials to use array methods like forEach and map.

Whaddayathink?

Helloes. 👋 😺

In the ruby section of the setup tutorial we suggest using a Nitrous. Unfortunately, it shut down on November 14th, 2016.

Cloud9 seems to be a popular alternative and has a free tier. Should we update the instructions to suggest C9 (or some other cloud IDE) instead of Nitrous?

There's obviously a problem in the variety of systems and the configuration of the systems that are brought along to codebar. It means people have inconsistent experiences and tutorials have to explain up to three ways of doing things when it's OS dependent.

I propose (and will begin) creating a VM that can be shared with students and made available online, and an accompanying tutorial about using the VM. Basic tutorial should include:

• What a VM is.
• How to install software in ubuntu.
• Some analogs for well known software.
• Super basic command line usage.
• Explanation of sudo and why exists.

Suggestions/feedback?

change fname used instead of filename

Relevant to issue raised in PR #246

A stopgap measure for until we can properly issue a PR to track these in the app.

• 8 July (ClauseMatch) - Sam
• 15 July (Reed) - Alex J
• 22 July (Shutl) - Kate
• 29 July (Thoughtworks) - Kai

Currently there's no information in the tutorials on where to go next for creating a web application, and it seems that many students gravitate towards the confusing behemoth that is rails. I think Sinatra (or similar) is a much better framework to learn with, largely due to it's simplicity and lack of boilerplate.

@deniseyu Shall we write something?

Mixed content errors and warnings, see attached.

tutorial variable is misspelled as turorial

Consider adding real world examples of how various sections of the tutorials could be used. E.g.

If statements could be used for checking the validity of credit card numbers on a shopping website.
While statements could be used for counting down time to buy tickets on a gig website.
For loops could be used for ticking off items in a todo list.

In the HTML tutorials, students get to make a page out of nothing and look at it in the browser. While this is definitely quite fun, I remember that the thing that drew me into web dev was how easily I can put my stuff online for everyone to see... Maybe seeing their stuff online could be really rewarding for students too

Both FTP and Git are potential ways to host a site, but each could be introducing too much at this early stage. I was thinking that maybe we make a small tool that students can run in their project folder to upload the contents to the Codebar website / Github Pages / S3 / whatever

What do people think?

The CSS file for this exercise is in a Gist (http://www.checkio.org/user/Sim0000/) so I don't think I can raise an issue on it directly ...

In iPhone Safari (and maybe on iPad too), the "genre" buttons are not clickable with the current CSS. The fix is to add cursor: pointer; as follows:

#genres li {
    padding: 10px;
    margin: 5px;
    background-color: #5E5A6B;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}

http://choosealicense.com/
I think GPL as anyone using/distributing this code should follow the same terms.

Any thoughts?

In http://tutorials.codebar.io/ruby/lesson1/tutorial.html. nitrous.io is now discontinued and I had problems installing ruby on my mac from scratch - it pretty much took the whole session at codebar to resolve. Can we instead look into supplying a VM with ruby set up and instructions on how to use it? e.g. Vagrant?

Any takers?

I haven't thought through this completely, but at the minimum, should perhaps cover...

• request/response
• HTTP
• NPM modules and how package.json works
• what is middleware
• file system
• templating engines
• persistence

Some notes in advance of the tutorial hack night:

• Add rested.io/Postman/curl example of an API request. Is the network tab really the easiest way to explain this?
• AJAX explanation - make it clear that although it's for XML, we can use it for JSON and others
• Separate out JSON section on its own - link to JSON site.
• Move async/sync discussion to further down, once promises/jQuery done etc is introduced?
• getGithubInfo is written before the keybinding that uses it. Switch this around so it's an outside-in approach?
• Publish to github - make it clear that this is more of an optional step? Can be a pain getting github pages working that doesn't aid the student's understanding of JavaScript/APIs
• Length - students never finish this tutorial in the workshop, but often you can get Exercise 2 started. That's actually a good thing - you can start them working on Exercise 2 and give it as homework. Perhaps break it out into a separate "exercise"?

Hi there, awesome codebar humans!

I wanted to open up a discussion about using existing learning material for tutorials at codebar. The existing tutorials are great, so a big 👍 to any one who put that work in. This issue is not meant to belittle work that any one has done or yet to do!

So, some tutorials are incomplete (see #149) and as I can see from #284 and #262, the tutorials also need maintenance and improvement. A lot of work!!!

Why is codebar not using existing materials to cut down the work load? Given the world is full of really smart people, it is almost guaranteed to find some decent material on a range of topics. If it isn't great, then it could be incorporated into a more user friendly format, but at least used as a base.

The material would need to be vetted first, I suppose. Acceptance criteria could include:

• open source and free to access for all
• transparent process for interacting with author (to suggest improvements)

The benefits I can see are:

• Comprehensive material for many different topics.
• The burden of maintenance is off codebar contributors (freeing them to teach more!)

For example, for Python, there are many resources. One I've used to teach before is http://pymbook.readthedocs.io/en/latest/.

What do you think? I'd love to help if people want to move forward with that.

I feel it's very important to insure the bar for entry to participate in codebar is as low as possible.

GitHub has worked well for us, and many beginners have managed to sign up but I feel it has the potential to alienate people who don't know what it is. I also like it because it also as it is very appropriate single sign on platform given what we do.

My next platform would be Twitter especially over Facebook, I am open to suggestions.

Create new tutorial on CSS animations and transitions.