Pineapple Wiki

Last edited by pineapple 10 months ago - Edit Wiki

This is still a fairly new feature, so for now consider it a definite WIP - more is updated daily if not every few days. Use Markdown formatting to edit. The wiki will start off as one page and be extracted to multiple pages as it grows.

The purpose of the Pineapple Wiki is two-fold: for both beginners and advanced developers.

For Beginners

One of the most fundamental questions from beginners is "Where do I start?" - With many web development wikis, one is presented with a massive list of resources which he or she is expected to fumble through and learn from. This can be overwhelming because there are so many tutorials and resources to choose from, with no real direction - Just "look at these 150 tutorial sites and do them all." There is a lot of information out there, and most of it can be daunting, outdated, poor quality, and so on. This wiki serves to be a much more concise guide which offers not only links but also brief explanations of common terms and concepts. It serves to guide you along your short but sweet introductory path of the basics before you decide to specialize in something (front end, back end, app development, mobile programming, etc).

For Power Users

There are thousands of resources on pineapple, and many more are added every day. This wiki will list the hidden gems that you might have missed in the more popular tags (for example javascript or ruby). Pineapple offers a multitude of search features to help you find what you are looking on any given topic, so this wiki isn't positioned to be just another redundant list. It should only be used for resources which can be rated extremely good: the type of resource where if you are missing out on it, you are missing out on something very substantial, and it's not worth not knowing about. In addition to this hidden gems list, you will also find a list of lesser-known tags list you can search for that you might not have thought of.

Beginner's Guide to Web Development

The topic of programming is extremely vast - perhaps you could compare it to 'all careers in the medical field'. This guide is going to focus more on 'web development', rather than the field of 'programming' in general (which could apply to many things like: building mobile apps, desktop applications, lower-level systems programming, data analysis, etc.). "Web development" in this context is defined as a range of skills which, at the low end of the spectrum would allow you to create a very basic static HTML website that does nothing more than display information (text and images) on a page. At the high end this might be creating a fully featured, industrial-strength web application that you could charge money for (think of whats involved with this: payment processing, security, very precise management of 'accounts' or other bits of data in a database, advanced sorting, manipulation and filtering of data, scalability to hundreds of thousands of users, deployment to multiple server clusters, and a million other things). Just like the medical field, this progression can branch off after a certain point into one of many, many directions, but basics are still essential. Whether you want to become a brain surgeon or anesthesiologist, you still need to know the basics about what every part of the body does.

The goal of this guide is to get you to that point where you can start to see the many options available to you. Do you want to continue with developing websites or web apps, or do you want to branch off into lower-level OSX application development? This wiki guide is also meant to be read in linear order, despite the fact it resembels a list. It is based loosely in order of importance, with the later topics not really being in order at all (as at this point, you are becoming more specialized).

Essential Knowledge

If you learn the things within this Essentials category, you should be able to make n amount of money, perhaps enough to be self-employed. It's not all that difficult to achieve. While your knowledge still has a long way to go, at this stage finding clients for "update my website" type work should be relatively easy, and referral work should keep you afloat.

HTML

HTML is the most fundamental web language you should know. Quite simply, it is how you display content on a website. 'Content' in this context refers to the actual "elements" on a webpage: images, text, anchor links, lists, and so on. Relatively speaking, there are not that many html elements you need to learn. There is a fundamental understanding here which is important to note, and that is HTML does NOT include style. Back in the olden days, html was in charge of both displaying content, as well as styling it. This all changed when Cascading Style Sheets (CSS) came about.

CSS is explained more in the next wiki section, but for now all you need to know is: CSS is in charge of style and HTML is in charge of content. To demonstrate this, use Firefox and go to a page which you feel is quite 'complex looking', Facebook for example. Now go in Firefox's navigation menu, go to View > Page Style > No Style. You will suddenly see the complex page become very ugly and plain. This at it's core is HTML without any CSS (style) being applied. Suddenly that intimidating Facebook page now doesn't look that intimidating - it's really a few key elements repeated over and over: text, images, lists, form elements, and links.

HTML can be learned fairly quickly, perhaps within a week or less to learn the basics. Here are some extremely good resources to get you started on your path to learning HTML. These are required things you must know if you plan to work with websites. Keep in mind that HTML & CSS go together like wine and cheese. Because they are so intermingled, you can consider yourself learning them together. After you review this section, the more advanced CSS section below will help you out.

NOTE: The resources below and throughout most of this guide are listed in order of 'importance', quality, and comprehensiveness; so if you can't look at all of them (or you want to jump to other sections of this wiki), at least watch or read the first few. We won't steer you wrong here, so don't let information overload anxiety get the better of you - stay focused and look at only what's presented in front of you, one piece at a time. This wiki is here to take good care of you. It WILL get easier, we promise!

CSS

CSS is explained above, and is just as crucial as HTML. It's the colors, backgrounds, font sizes, typography and so on which get applied to the HTML content, to make the website pretty. It's what makes Facebook look like Facebook as opposed to that drab page in the Firefox demonstration in the HTML section.

After you look at the above HTML & CSS tutorials, here are a few more to sharpen your CSS understanding on the subtleties:

Slicing

Javascript

General Web Knowledge

Challenges

When learning html and css, the easiest way to hone your skills is to actually build a site for yourself or a friend. But what about when you're learning a scripting language like javascript? The best case scenario is to think of a real-life, helpful app that you could build for yourself. Maybe it's a simple workout calculator tailored to your needs, or a job-specific calculator. Coming up with an idea isn't always easy however; this is where code challenges come in.

General Server + Other Knowledge

Misc Knowledge

Extended Help

Here are some additional resources when you reach that point where you have a question but don't know where to turn, and you can't find it by Googling.

Here's a helpful tip: Programming as a career requires great self reliance. In most cases, experienced programmers try to research their problem before immediately asking for help. They do this by reading through documentation, using Google, and so on. That's not to say you can't ask questions without reading through hours of dense material, but you should at least try as best you can in a reasonable amount of time to figure your questions out. Not only will this get you better answers, but it will develop self-reliance as a skill which is invaluable to a programmer (and you feel good when you DO figure it out, without asking for help!).

Furthermore, if you are disrespectful, demanding, lazy or acting entitled, you will quickly see that won't get you anywhere. In your questions, try to be detailed, and give REAL code examples (don't just make up code for your example). If you are pasting code to another programmer, use a pastebin like pastie.org.

People often love to help others learn, but they won't want to help someone who can't help themselves first!

  • Stack Overflow Stack Overflow is the definite 'go to' resource when you have a question about "Why won't my code work?". If you don't have an account, you should create one - chances are you will be on this site throughout your programming career.
  • Reddit: /r/learnprogramming

Frontend

Advanced HTML/DOM

Frontend Performance

Advanced CSS (css3, responsiveness, retina, sass, etc)

Advanced JavaScript (CoffeeScript, jQuery, JavaScript frameworks)

Backend

Advanced

Security

Language Agnostic

PHP Wordpress Ruby

Pineapple Hidden Gems

There are many resources on Pineapple, and a lot of them deserve a second look just so you don't miss them.

HTML

API / Debugging

  • Postman - An incredible debugging tool, similar to Charle's proxy or Fiddler.

Cross-Browser Compatibility

Mac Apps

Ruby / Rails / Sinatra

  • Pow - A tool that maps http://site.dev to your local environment.
  • Better Error Page - An amazing error page that features inline REPL for debugging, right in the stack trace page.
  • Zeus - Let your rails server, console, etc start it less than one second.

Javascript

Go Language

  • Martini - A classy Go web framework

Markdown

  • Jekyll - A static site generator which powers github pages.
  • Mou - A very nice markdown editor

UI Kits

iOS Development

Helpful Lesser-Known Tags and Tag-Combos

Here is a collection of Pineapple tags that you may have missed.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.