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.
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).
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
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.
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).
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 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 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:
- Learn CSS Layout
- Understanding CSS Specificity
- Optional: The interactive guide to web typography - Recommended if you're interested in typography.
- Optional: Dive into Flexbox - A nicer box model called flexbox for CSS3. Make sure you understand the basics first, though.
- Fully understand the 'this' keyword
- 30 Days to jQuery
- 12 Tricks to Develop Quicker
- Using Breakpoints in Dev-Tools
- HTTP and REST
- hosting, ftp, domains stuff goes here
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
- Front-End Performance
- HTML5 History
- Hot to use HTML5 video with a fallback for older browsers
- The DOM is a mess
- DOM Enlightenment
- HTML5 Security Cheatsheet
- Your Script Just Killed My Site
- HTML/CSS Performance
- Jank Busters - Web App Performance
- Improving HTML5 Canvas
- Building a performant HTML5 App
Advanced CSS (css3, responsiveness, retina, sass, etc)
- Code Smells in CSS
- SMACSS - Write Modular CSS
- Learn how to write SASS/SCSS
- A pixel is not a pixel - Viewports
- OOCSS & SASS
- OOCSS & Preprocessors
- SASS @media bubbling
- Intro to RequireJS
- Building an app with RequireJS
- JS Assessment - Make the Tests Pass
- 10 Things I Learned from jQuery Source
- Sane Structure for JS Apps
- Exercise Your Programming Muscles
- So You Want to be an Engineer?
- The Little book of CoffeeScript
- Better testing with Mocha & CoffeeScript
- Harvard Programming Class - CS50
PHP Wordpress Ruby
There are many resources on Pineapple, and a lot of them deserve a second look just so you don't miss them.
- Postman - An incredible debugging tool, similar to Charle's proxy or Fiddler.
- Browser bugs you should know
- 9 Most Common IE Bugs and How to Fix Them
- HTML5 & CSS3 Support
- Can I Use
- 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.
- Pretty notifications
- Ace embedded text editor - A full featured and amazing embedded text editor, supports vim and emacs bindings, and lots more.
- Martini - A classy Go web framework
- Starters Guide to iOS Design - An excellent introductory guide
Here is a collection of Pineapple tags that you may have missed.