kevinworkman / happycoding

This is the source code behind HappyCoding.io, including all tutorials and examples.

HappyCoding.io is a website devoted to coding tutorials and examples.

This repo contains the source code of Happy Coding, including every tutorial and example.

Come say hello world!

Have a question? Want to introduce yourself? Come say hi on forum.HappyCoding.io!

happycoding's Issues

Provide Twitter Card Meta Tags

Twitter uses meta tags to provide a thumbnail and description for links you share. More info here: https://dev.twitter.com/cards/getting-started

We should provide these tags whenever possible. This would involve two things:

First thing: Go through every page and provide the data (in frontmatter) that Twitter wants. Provide as much as possible, so check out what's available in the Twitter reference first.

Second thing: Modify the default layout to incorporate this frontmatter into the appropriate meta tags.
#11 is the same issue for Facebook.

CodePen messing up back button

On pages that have a CodePen, opening a CodePen causes the back button to close the CodePen instead of going back a page.

This is a minor annoyance, and might be on CodePen's side, but if it can be fixed than it should be fixed.

New Google Cloud Platform setup instructions and setup

Google Cloud Platform is based on having projects, and then setting up services in those projects.

I already use Google Cloud Platform for a couple things, so my account is already set up.

I need a list of steps that a brand new person needs to follow to set up a project and get App Engine and Cloud SQL services set up.

This is mostly for the databases tutorial: http://happycoding.io/tutorials/java-server/databases

Editing Wiki Page

There seems to be no option to create pull request for wiki pages, so;

It would be good to add under "Submit Bigger Changes" the way to sync to the forked repo(and cloned locally) to the remote one.

• git remote -v

• git remote add upstream https://github.com/KevinWorkman/HappyCoding.git

• git remote -v

• git fetch upstream

• git merge upstream/gh-pages

Refer- https://webkul.com/blog/syncing-local-repository-with-remote-repository-on-github/

Create site JSON

This mostly just sounds fun to do. Create a json file (through Jekyll magic) that contains info about every tutorial and example.

Then use that file to create a random link to a random tutorial, with a teaser. Something like this:

Want to learn how to make a Random Walker? Click here!

This would also involve adding the teaser info to the frontmatter.

Add more backgrounds

The background images are generated using pretty simple Processing code.

If you're new to open source, this would be a pretty good place to jump in because each sketch is pretty standalone.

Here is a guide on how to contribute background images!

Small typo in 'Social Feed Website' example

"Tese" instead of "Test"

Images in image tutorial CodePens are gone

http://HappyCoding.io/tutorials/processing/images.html

http://HappyCoding.io//examples/processing/images/nes-filter

Copyright License should be added

Which one? I do not know.

But since the site is an open source project, and in turn people will contribute, licensing is a must.

New Tutorials

It would be good to start with some -

• Python Tutorials

• Using Python; understanding concepts of regex. ( Most students are weak here. )

Obey Google's Mobile-Friendly Criteria

Google has a mobile-friendliness metric that shows you how mobile friendly your site is: https://www.google.com/webmasters/tools/mobile-friendly/?url=happycoding.io

This supposedly impacts your search ranking, and I don't really care about that too much, but it'd be nice to fix these issues.

This might get annoying as we implement some of the other features such as adding an online code editor.

Add online code editor

It would be cool if the tutorials and examples came with a little "code me" button that linked to a JSFiddle or something containing that code in a way that let people mess around with it.

Not necessarily JSFiddle. Other options include Code Pen and Sketchpad.cc. I'm open to suggestions here.

I need to try a bunch of these out and see which one would fit best. Need to support both Processing.js and p5.js. Would be cool if this supported general html programming as well (by that I mostly mean that the resulting pages are reasonable-looking).

Might also embed the code editor directly in the page, if that's not too messy.

Provide Open Graph Tags

Facebook uses Open Graph tags to show a thumbnail and description of the page when you share a link. Try it here: https://developers.facebook.com/tools/debug/

We should provide these tags whenever possible. This would involve two things:

First thing: Go through every page and provide the data (in frontmatter) that Open Graph wants. Provide as much as possible, so check out the Open Graph reference first.

Second thing: Modify the default layout to incorporate this frontmatter into the appropriate meta tags.
#12 is the same thing for Twitter.

Syntax highlighting is the same color as the preformatted background color

On any pages that use the code syntax highlighting, nearly all of the code is colored white, which is the same as the background color of the <pre> (preformated) block.

Example Image: http://i.imgur.com/kxgD1Qs.png
Here I have part of the first line "selected" to confirm that the text is shown, but it is in the same color as the background.

From what I can tell from my browser's html/css inspection tools, it seems that the ".highlight" class from both syntax-light.css and syntax-dark.css are being loaded, and the class from the syntax-light.css is being used. The "theme/color" switcher button does change the css links in the page header, but it appears the code being used to disable one set or the other is not correct.

<link disabled="disabled" rel="stylesheet" type="text/css" href="/css/syntax-light.css" class="light-css">

According to http://www.w3schools.com/jsref/prop_link_disabled.asp, the value supposed to be used for the "disabled" attribute is either true or false, not the actual word "disabled".

I could be wrong about the cause, but the problem certainly exists. Testing will need to be done to be sure.

Example code files under "Anatomy of a Web App" don't run

Hi, by following the tutorial Anatomy of a Web App, I have set up the exact same directory shown in the image below:

but accessing localhost:8080/HelloWorld/hello returns not-found error.

I've also tried downloading your code from here and copy-pasted it under my webapps directory, it didn't work either.

Please advise how to fix the issue, thanks :)

Create Examples

We could always use more examples.

The idea behind Happy Coding is to show a bunch of examples for every tutorial, so the more the better.

Go through the tutorials and pick one you think is interesting. Create an example that uses what was taught in that tutorial. The example can build off previous tutorials, but shouldn't rely on stuff that hasn't been covered yet.

These should be as creative and interesting as possible, while still being simple enough to be relatively bite-sized. Look at the current examples to get a good idea of what these should look like. Make sure to include plenty of images, and a 200x100 thumbnail!

You can then submit these directly to the examples directory, or post them on the forum.

Page Width Theme Switching Shenanigans

The site is setup so the page width snaps to some predefined values based on the width of the browser window. This is a default Bootstrap thing.

The site also has the ability to switch the theme between light and dark. This is accomplished by switching out CSS values.

However, if you resize the window before the theme css is switched, bad things happen with the page width. It seems like each theme is "remembering" the page width it last saw?

To reproduce:

• Load any page
• Toggle the theme. Notice the width stays the same.
• Now resize the window.
• Toggle the theme again.
• Notice that the page width changes. Looks like it's changing back to whatever the width was the last time this theme "saw" the page.

Fixing this might be as simple as firing off a resize event whenever the theme is changed, but I'd also like to better understand exactly why it's happening.

Link to Examples from Tutorials

The tutorial pages should link to the corresponding examples.

For example, this tutorial: http://happycoding.io/tutorials/processing/calling-functions

Should link to these examples: http://happycoding.io/examples/processing/calling-functions/

The dumbest way would be to just manually edit the markdown content of every tutorial, but better yet we could modify the tutorial layout to point to the corresponding example: either using frontmatter or by parsing the url.

Maybe do the same thing in the opposite direction and link to tutorials from examples?

Android "make page mobile friendly" hides navigation

On (some?) Android (and iPhone?) browsers, visiting HappyCoding.io shows a dialog that says "make this site mobile friendly". Clicking that does some "magic" that makes the font larger, decreases margins, etc.

A side-effect of this is that the navigation is also hidden.

Can we do something that fixes this?

Unable to signup to the forum

I was trying to signup to forum via github signup but it is unable it do so("sorry, there was an error authorising your account"). On a further look, I see that forum.happycoding.io is running on top of http and shows "not secure"

Use accessible links

I have a bad habit of writing sentences like this:

Click [here] to see the p5.js tutorials!

Unfortunately, these are bad for accessibility. If a screen reader user navigates over the links in the page, they'll hear a bunch of "here" announcements.

Instead, links should be formatted so they page they link to is in the text of the link, like this:

See [the p5.js tutorials] for more information!

If you see a "here" link, feel free to send a PR fixing it!

Navigation Hamburger Menu Wrong Color

The site is set up to show a hamburger menu in the navigation when you change the size of the window to be too small. 🍔 This is a default Bootstrap thing.

Right now that hamburger menu is white in both the light and dark themes. This is a small issue, but it's slightly ugly.

The fix might be as simple as adding some css to make it darker in the light theme (light theme is dark text on light backgrounds). Might play with the border color as well.

I'm not even sure I love this hamburger menu anyway. I could be convinced to remove it, not sure.

Create prettier thumbnails

Right now a lot of the tutorial link boxes just use stretched versions of images found inside that tutorial. To fix this, we need to go through each tutorial and create a pretty 200x100 thumbnail them.

Hashtags

It would be cool to add hashtags to the examples. In addition to the categories, provide hashtags like for loops and emergence and whatnot.

This might also apply to tutorials and blog posts as well?

It would be great to find a way to do this in Jekyll, but more likely this feature would use #6 and JavaScript to find the tagged posts.

Step 1: Add hashtags to front matter
Step 2: Finalize #6 and include tags in generated json
Step 3: Create a page that uses JavaScript to parse url parameters, ajax to get the site json, and then shows links to the tagged pages.

Delete occurrences of words like "simple" and "basic"

I want to avoid using words like "simple" or phrases like "just do xyz".

At best these are filler, and at worst they belittle the reader.

Unfortunately, these are all over the place, especially in the older tutorials. If you see these, please feel free to send a PR deleting them.

Some things to look out for:

• just
• basic (often the word fundamental is better)
• simple / simply
• easy

Another pet peeve is saying "abc allows you to do xyz" instead of saying "abc lets you do xyz" so feel free to find/replace those occurrences as well.