Initial commit.

README.md

@@ -0,0 +1 @@
+[Table of Contents](/index.md)

deploying/digital-ocean.md

@@ -0,0 +1,10 @@
+# Digital Ocean
+
+If you don't already have a VPS or similar, I strongly recommend you to get a
+Digital Ocean account. If you use the following link,
+<https://www.digitalocean.com/?refcode=a3eb2e3ed7ce>, you get $10 for your
+account. Since the smallest droplet only costs $5/month you get 2 months of
+VPS:ing for free. Destroying and creating a VPS is totally free, you are only
+debited per hour your droplet is active. So it is a great way to play around
+with and testing new technologies.
+

front-end/backbone.md

@@ -0,0 +1,9 @@
+# Backbone
+
+Vi använder för närvarande Backbone. Inte React eller Angular eller någonting
+annat. Detta för att Backbone är mycket lägre nivå; det sker helt enkelt mycket
+mindre magi i bakgrunden.
+
+## Read the Fucking Source!
+
+<http://backbonejs.org/docs/backbone.html>

front-end/browserify.md

@@ -0,0 +1,3 @@
+# Browserify
+
+Browserify gör så att du kan använda CommonJS moduler i webbläsaren.

front-end/introduction.md

@@ -0,0 +1,4 @@
+# Front End JavaScript
+
+To begin with, one should be able to play around with JavaScript in the browser
+simply using script tags( `<script src=""></script>`).

front-end/jquery.md

@@ -0,0 +1 @@
+# jQuery

front-end/ridge.md

@@ -0,0 +1,6 @@
+# Ridge
+
+A very non-agnostic and opinionated extension of Backbone. We are working on a
+large update of the Router, but after that we are reaching a stage where we are
+pleased with most of the code. We have begun writing a Wiki, but a lot more is
+to come within the next month.

front-end/spytext.md

@@ -0,0 +1,6 @@
+# Spytext
+
+HTML5 Editor built from scratch using ContentEditable included it's own
+Undo/Redo library implemented using MutationObserver. It is very small and
+works consistently across most browsers except internet explorer. Wiki and
+README needs a lot of work.

html/introduction.md

@@ -0,0 +1 @@
+# HTML: Introduction

html/structured_data.md

@@ -0,0 +1,10 @@
+# Structured/Linked Data
+
+Some resources:
+
++ http://json-ld.org/
++ http://schema.org/
++ http://wiki.dbpedia.org/
+
+We currently prefere RDFa over microdata. And RDFa has been adopted by W3C. Or
+maybe WHATWG, not sure.

index.md

@@ -0,0 +1,42 @@
+# Table of Contents
+
+1. [Purpose of this Guide](/purpose_of_this_guide.md)
+2. The Code Bureau
+	1. [Overview](/tcb/overview.md)
+	2. [Why](/tcb/why.md)
+	3. [Philosophy](/tcb/philosophy.md)
+3. HTML
+	1. [Introduction](/html/introduction.md)
+	2. [Structured Data](/html/structured_data.md)
+4. JavaScript
+	1. [Introduction](/javascript/introduction.md)
+	2. [Prototype](/javascript/prototype.md)
+	3. [Functional Programming](/javascript/functional-programming.md)
+	4. [Lodash](/javascript/lodash.md)
+5. Node.js
+	1. [Introduction](/node.js/introduction.md)
+	2. [Modules](/node.js/modules.md)
+	3. [NPM](/node.js/npm.md)
+	4. [HTTP](/node.js/http.md)
+	5. [Express](/node.js/express.md)
+	6. [Templating](/node.js/templating.md)
+	7. [Gulp](/node.js/gulp.md)
+	8. [Epiphany](/node.js/epiphany.md)
+6. MongoDB
+	1. [Introduction](/mongodb/introduction.md)
+7. Front End JavaScript
+	1. [Introduction](/front-end/introduction.md)
+	2. [Browserify](/front-end/browserify.md)
+	3. [jQuery](/front-end/jquery.md)
+	4. [Backbone](/front-end/backbone.md)
+	6. [Ridge](/front-end/ridge.md)
+	7. [Spytext](/front-end/spytext.md)
+8. Testing
+	1. [Introduction](/testing/introduction.md)
+9. CSS & SASS
+	1. [Introduction](/css-sass/introduction.md)
+	2. [Spysass](/css-sass/spysass.md)
+10. SVG
+11. Deploying
+12. Projects
+	1. [Rating](/projects/rating.md)

javascript/functional-programming.md

@@ -0,0 +1,3 @@
+# Functional Programming
+
++ <https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4>

javascript/introduction.md

@@ -0,0 +1,12 @@
+# Introduction
+
+Bra bok (tror jag):
+
++ <http://eloquentjavascript.net/>
+
+Bra generellt:
+
++ <http://bonsaiden.github.io/JavaScript-Garden/>
++ <http://www.improgrammer.net/simple-yet-powerful-javascript-tips/>
++ <http://jstherightway.org/>
+

javascript/lodash.md

@@ -0,0 +1,5 @@
+# Lo-Dash
+
+Book:
+
+Functional Programming with Underscore

javascript/prototype.md

@@ -0,0 +1,5 @@
+# Prototype
+
++ <https://davidwalsh.name/javascript-objects>
++ <https://davidwalsh.name/javascript-objects-distractions>
++ <https://davidwalsh.name/javascript-objects-deconstruction>

mongodb/introduction.md

@@ -0,0 +1,9 @@
+# MongoDB
+
+## NoSQL vs SQL
+
+Vi använder uteslutande MongoDB som databas.
+
+## Mongoose
+
+Vi använder Mongoose för att få Node att snacka med MongoDB.

node.js/epiphany.md

@@ -0,0 +1,10 @@
+# Epiphany
+
+Epiphany is basically an extension of Express. It sets up Express with the
+standard settings, prewares etc that we use in virtually every website.
+Epiphany is build around so called "loaders" that require an array of
+directories to initialize models, middlewares, routes and templates. It's main
+purpose is to allow creating reusable modules that can be located anywhere in
+project directory structure. However, the code is not always pretty, and the
+whole structure is beginning to be questioned. The README and Wiki are not up
+to date.

node.js/express.md

@@ -0,0 +1,4 @@
+# Express
+
+Express används för att bygga webbservrar med Node som använder middlewares (du
+kanske känner igen middlewares från Ruby/Rails).

node.js/gulp.md

@@ -0,0 +1,6 @@
+# Gulp
+
+Gulp är en task-runner till JS. Man använder den bla för att smidigt paketera
+JS med browserify och minifiera den, processa CSS mm.
+
+## TCB Gulp

node.js/http.md

@@ -0,0 +1,30 @@
+# HTTP
+
+Först och främst är det med Node mycket viktigare att förstå själva HTTP än det
+är med PHP. Detta pga att Apache hanterar det mesta i bakgrunden; man levererar
+bara skript-kod som Apache skickar som HTML åt dig.
+
+Det är egentligen bara 3 aspekter av protokollet som är viktiga att förstå
+
+1. Request vs Response message
+2. Headers (speciellt Accept & Content-Type request headers samt Content-\* response headers är viktiga)
+3. Methods
+
+Det är bra att läsa igenom Wiki artikeln om HTTP
+
++ <https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol>
+
+Det är också bra att bläddra igenom följande för att se vad som finns.
+
++ <https://en.wikipedia.org/wiki/List_of_HTTP_status_codes>
+
+## Headers
+
+Good to browse through the complete list to see what is available.
+
++ <https://en.wikipedia.org/wiki/List_of_HTTP_header_fields>
+
+## Methods
+
++ W3 Protocl specification of methods: <https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html>
+

node.js/introduction.md

@@ -0,0 +1,7 @@
+# Node.js
+
+Node är som sagt JavaScript på servern. Det enda negativa med Node just nu är
+att utvecklingen går så snabbt framåt att det kan vara svårt att hänga med.
+Olika versioner kan bete sig väldigt annorlunda, och eftersom JavaScript i sig
+är ett loosely-typed och väldigt flexibelt språk gäller det att hålla tungan
+rätt i munnen.

node.js/modules.md

@@ -0,0 +1,9 @@
+# Modules CommonJS & NPM moduler
+
+## CommonJS
+
+Ursprungligen var JavaScript inte byggt för att vara modulärt. Ungefär
+samtidigt som Node och liknande projekt kom igång skapade man en standard för
+att göra JS just modulärt. CommonJS definierar en standard för att dela upp
+JavaScript i olika filer som kan bero på varandra.
+

node.js/npm.md

@@ -0,0 +1,4 @@
+# NPM
+
+NPM är pakethanteraren till Node. Även om den inte fungerar riktigt lika
+vackert som mogna Linux pakethanterare så fungerar den ändå rätt bra.

node.js/templating.md

@@ -0,0 +1,16 @@
+# Templating
+
+Du kommer snabbt märka att du behöver göra ett val av "templating engine". Vi
+använder för närvarande Dust.js, men kommer sannolikt att byta till Marko rätt
+snart. Eftersom Marko är rätt nytt kan det vara dåligt med dokumentation.
+Handlebars är nog det mest populära alternativet. Så kör Marko, Handlebars
+eller Dust.
+
+## Dust.js
+
+I realised i forgot to mention which templating system we use, which is Dust
+and we use it both server and client side. <http://www.dustjs.com/> is a pretty
+good resource to get the basics, but it is far more powerful than the
+documentation might suggest. We do not use the dustjs-helpers package available
+in the NPM registry, but have rather begun creating our own package at
+<https://github.com/thecodebureau/sprinkles>.

projects/rating.md

@@ -0,0 +1,26 @@
+# Ratings Project
+
+Bygg en episod rating webbsida.
+
+1. Söka efter säsonger från en API, tex
+	+ <https://www.themoviedb.org/documentation/api>
+	+ <http://sickbeard.com/api/>
+	+ <http://www.tvmaze.com/api>
+	+ <http://thetvdb.com/wiki/index.php?title=Programmers_API>
+	+ <http://docs.trakt.apiary.io/#>
+2.  Lägga till säsonger i egen databas
+3. Betygsätt (0-100) ett avsnitt
+4. Sortera efter rating och dylikt
+
+Jag rekommenderar att du inte utvecklar i Windows miljö. Node och framförallt
+NPM beter sig underligt i Windows. Windows i sig beter sig för övrigt underligt
+i allmänhet tycker jag.
+
+Använd följande verktyg
+
++ Node & Npm
++ Express
++ MongoDB & Mongoose
++ jQuery om du vill använda front-end JS istället för att göra allt med HTML
++ Handlebars, Marko eller Dust som templating engine.
+

purpose_of_this_guide.md

@@ -0,0 +1,23 @@
+# Purpose of This Guide
+
+The primary purpose of this guide is obviously to teach the tools we currently
+use at the Code Bureau. A secondary purpose is to outline the core philosphies
+behind TCB. Not only should one be able to see what we use, but also see how we think
+and get an idea of what it's like to work with us.
+
+## Never Ending Process
+
+One of the most important concepts of this guide is the fact it will never be
+complete.  As the tools we use, how we use them... and even what we do, is
+constantly changing, so will this guide. Just like we try to apply Kaizen to
+the code we write, we will apply the same philosophy to this guide.
+
+## Enable Users to Contribute
+
+To facilitate this constant evolution of the guide, all of its users need to be able to 
+contibute. This obviously includes You as well. If you find any part confusing, needlessly
+verbose or in need of improvement, please do not hesitate to contribute.
+
+The portal has many channels for submitting ideas or concepts. If you do not
+want to edit this guide directly, you can always submit your thoughts to a feed
+there. If it is worthy, it will quickly find its way into this guide.

tcb/overview.md

@@ -0,0 +1,88 @@
+# Overview
+
+The Code Bureau aims to become an ecosystem for educating web developers and
+creating the next generation of IT start-ups. This will be achieved through
+heavy use and contribution to open source tools and by engaging young, highly
+motivated persons at very early stages in their career.
+
+TCB consists of three seperate tiers:
+
+1. An educational facility (The Academy)
+2. A consultant business (The Business)
+3. An incubator (The Lab)
+
+Each tier serves a unique purpose but contributes towards the common goal of
+bringing state-of-the-art web development consulting services and innovations
+to the market. The Academy aims to attract and train new developers, the
+Business will supply students and employees revenue generating work
+and the Lab will encourage cultivation of new and exciting ventures.
+
+## The Academy
+
+The Academy aims to continuously train and supply the other two sections of the
+organization with programmers.  Through careful integration with the Business &
+the Lab, all programmers in the Academy will regularly be presented with live
+projects from real businesses.
+
+The actual educational process is going to be built on five concepts:
+
+1. An online portal for students & staff:  The students need guidance in their
+	 educational process, and both students and employees need a highly
+	 functional and feature rich communication channel.
+2. E-Learning:  The courses for students rely heavily on already existing
+	 online academies to teach the basic web development skills. The material
+	 provided by TCB consists of advanced tutorials, examples and exercises that
+	 pick up where the e-Learning tools have left off.
+3. Open Source: Since TCB only uses and teach open source technologies, there
+	 are virtually no software or licensing costs. The students themselves can
+	 also install everything on their own computers, and even use it for
+	 commercial gains.
+4. Integration with the Business & the Lab: During the learning process,
+	 students are presented with tasks from live projects, both from the
+	 Business' clients and the Lab's startups.  These tasks will be of varying
+	 difficulty and responsibility so as to be a natural and inspiring part of
+	 the learning process.
+
+## The Business
+
+To finance the other two tiers of TCB, the business intends to create revenue
+by producing work for paying customers. Hopefully TCB programmers will be able
+to spend 20-80% of their time producting code for paying customers. 
+
+The web design industry might be one of the most competitive industries
+currently active. It's focus on both design and logic with the possibilities of
+very good pay makes it attractive for many. There are also constantly new tools
+and libraries being developed that makes introduction to the industry easier
+than every before (tools like WordPress).
+
+Web development has incredibly low financial barriers of entry. Especially
+considering the growth of open source solutions, the costs involved in becoming
+a web developer are next to zero.
+
+As the future growth of the market is expected to remain at high levels.
+
+In essence, the industry is being overpopulated with designers, while
+programmers remain scarce.
+
+Through the use of bleeding edge technologies and producing extremely high
+quality products, TCB intends to become a renowned web consultancy
+other companies employ to produce their code.
+
+## The Lab
+
+The ultimate goal of The Code Bureau is to create an environment that
+stimulates the growth of entirely new ideas, projects and companies.
+
+The internet industry is very low on capital requirements. The main requirement
+is simply time from talented coders.
+
+Instead of relying on venture capitalists to finance companies, and thus
+loosing
+
+Eventually, the Lab should have all the competence required to assist the new ventures.
+
+In the software and web industry, "the majority of operating expenditure
+consists of research and development (or R&D) costs and marketing spending."
+<http://marketrealist.com/2014/07/overview-understanding-software-industry-cost-structure/>
+
+

tcb/philosophy.md

@@ -0,0 +1,87 @@
+# Philosophy
+
+The Code Bureau has many strong beliefs.
+
+It's 57 pages, so there are no expecations that everyone reads. It does,
+however, have many brilliant ideas and pretty much outlines exactly how the
+Code Bureau is invisioned to work.
+
+[Valve's Employee
+Handbook](http://media.steampowered.com/apps/valve/Valve_NewEmployeeHandbook.pdf).
+
+## T-Shaped People
+
+Within most industries there are now too many skills for single person learn
+even a fraction of the whole supply chain. A very early economic concept was
+"division of labour", which entails cooperation between people with different
+and specific skills. However, being able to cooperate not only requires a
+knowing a specific skill well, but also knowing a little about the
+rest of the teams skills. This not only for them to appreciate what others
+do, but also make it easier to figure out where to turn when help is needed.
+
+At Valve this is called "T-Shaped People", and is described (page 46) as
+"...people who are both generalists (highly skilled at a broad set of valuable
+things — the top of the T) and also experts (among the best in their field within
+a narrow discipline — the vertical leg of the T)."
+
+Becoming an expert in a discipline is greatly simplified by truly enjoying it.
+To find such a discipline, testing many others first is usually required.
+Therefore, it is recommended to become generalists first, and focus on becoming
+an expert only after stumbling upon something that really excites.
+
+### Seperation of Design & Logic
+
+An extension of the "T-Shaped People" philosphy is a strong belief in the
+need of separation of design and programming. Design and programming are
+such vast fields that no person can possibly become proficient in both.
+Thus, TCB believes developers should code, while designers design.
+
+This is actually quite different from how many in the web industry work. 
+The term web designer is still more common than web developer, which is
+a strong indication that. The result has been that many sub par developers
+has written sub par code for very long.
+
+As pure coders TCB can truly begin to unleash the potential of web development.
+TCB not only truly understands the coding paradigm, but also exactly how the
+servers run and how to interact with them.
+
+## Open Source
+
+As a result of our profound love to code and beautiful technical solutions, TCB
+always strive to use the most optimal toolset. As previously mentioned, TCB
+exclusively work with open source software. This is not because it is
+free from costs, but because open-source tools are actually often the best.
+
+## Modularity and Reusability
+
+2. Build a reusable and modular code base to continuously reduce development
+   time for future projects.
+
+A good consultant always charges new clients for work debited previous
+clients. TCB's toolset was chosen with modularity as a primary target, and
+all products developed at TCB are also designed to be modular.
+Through modularity, the intent is to _massproduce tailormade solutions_.
+
+A module used in one project should easily be included in another. This should
+result in a high monetary yield of every programmed hour as they can
+always reuse code from previous projects.
+
+TCB provides services, and services in general experience lower or no Economies
+of Scale. However, as more projects are completed and the code base grow, less
+code should be required for each new application. This should greatly reduce
+development costs, while leaving revenues unchanged.
+
+## Kaizen
+
+Kaizen is a Japanese management concept loosely translated as "good change".
+Kaizen entails continuous improvements to all aspects of an organization
+by involving all employees at all levels.
+
+Kaizen is applied to everything at TCB, from this guide to the our client's
+websites. Combined with the modularity of most code, TCB is effeciently able 
+deploy updates to all our customers, continuously improving their products
+even after they have been delivered.
+
+TCB aims to teach all students and employees an awareness that nothing is ever
+really complete or perfect. Through small, continuous steps of improvement in
+every part of the organization, everything can be optimized further.

tcb/why.md

@@ -0,0 +1,139 @@
+# Why
+
+When the Code Bureau was founded, the intent was to produce HTML5 games.
+The idea was the HTML5 games are destined to replace flash games, and we
+wanted to see what could be done. Within a few months, it was realised
+that we needed to be more people. Many, many more people.
+
+As a result, we decided to start creating websites for paying customers.
+The only real goal was to get an office closer to LTH 
+
+There are 6 things that facilitated the founding of The Code Bureau:
+
+1. HTML5 & Standard Compliance of Browsers
+2. The Full JavaScript Stack
+3. Open Source technologies
+4. Mobile & Fixed Broadband Penetration
+5. The Internet of Things
+6. Demand for Coders
+
+## HTML5 & Standard Compliance of Browsers
+
+For the web to function properly, web developers and users have to assume a
+website behaves identically on all browsers on all devices and displays.
+Unfortunately, this has previously not been a reality; poor adoption of
+standards has rendered essentially all new functionality useless. However, the
+long-awaited ascendancy of standard compliant browsers is finally beginning
+to unleash the true potential of the internet.
+
+great opportunities for completely new solutions and projects. WebGL is
+(hardware accelerated 3D graphics in the web browser, without plugins) is a
+good example of just one technology that promises to change the definition of a
+website and what it can do. 
+
+## JavaScript & The Full JavaScript Stack
+
+Server-side JavaScript (Node.js) along with JSON based, NoSQL databases creates
+a full JavaScript development stack. Instead of up to four different
+programming languages (on top of HTML and CSS), the developer now only needs to
+know and use one.
+
+A smaller skill set and less context switching means easier and faster coding.
+This not only means fewer bugs and faster development, but also better
+solutions and higher revenues. Additionally, focus on a single language allows
+for easier learning and thus deeper knowledge of JavaScript, which will be
+increasingly importent due to the afore mentioned HTML5 compliance and Node.
+
+Finally, but almost most importantly, thanks to Google's V8 engine,
+JavaScript is now also extremely fast and efficient. This is
+beneficial to user experience, Search Engine Optimization, server requirements
+and power consumption.
+
+As a result, JavaScript is quickly becoming one of the most popular programming languages in
+the world, and the following three trends will continue to push the demands for
+JavaScript and JavaScript programmers.
+
+1. HTML5 & Standard compliant browsers
+2. The Full JavaScript stack (Node, NoSQL)
+3. Titanium Studio, React Native and many other tools enable JavaScript written
+	 native Apps for both iOS and Android
+
+## Open Source
+
+"The increasing quality of major open source projects’ documentation helps
+developers become productive with those projects faster than previously
+possible. Clear documentation and tutorials drive open source software
+adoption, which creates a positive feedback loop to continue creating and
+maintaining high quality documentation...
+
+Documentation is considered part of the project’s code base and is actively
+maintained by contributors instead of being an afterthought as was common
+practice for open source projects ten to fifteen years ago. The source code for
+a project and associated documentation are also readily available to clone off
+[the original repositories]...
+
+The maturity of open source projects reduces the difficulty of building early
+iterations of software projects. Developers take advantage of the reduced
+difficulty by combining reusable code libraries with their own custom code."
+<http://radar.oreilly.com/2014/05/driving-demand-for-full-stack-developers.html>
+
+## Internet Users and Broadband Availability
+
+According to statistics supplied by ITU there will be almost 3 billion Internet
+users by the end of 2014. In the same year, fixed-broadband penetration
+will have reached almost 10 per cent globally, and mobile-broadband subscriptions
+will reach 2.3 billion globally. This equates to a mobile-broadband penetration of 32%.
+In developed countries, mobile-broadband penetration will reach 84 per cent.
+Europe’s fixed-broadband penetration is much higher compared with other regions
+and almost three times as high as the global average.
+
+As Europe has the highest level of both mobile and fixed broadband penetration,
+it is the region most suitable for the next generation of web development
+firms.
+
+## The Internet of Things
+
+The Internet of Things is going to increase the number of connected
+devices from billions of devices to tens, hundreds and maybe even thousands of
+billions of devices within a few decades. According to Gartner, the Internet of
+Things installed base is expected to grow to 26 billion units by 2020.
+
+Consumers and companies are not only going to need to develop the
+actual products, but also apps and websites that communicate
+with this mindboggling array of devices and sensors.
+
+## Demand for Coders
+
+The demand for programmers already far outnumbers the supply. Meanwhile, the
+programming landscape is always changing and the insufficient number of
+programmers the universities are actually producing are often skilled in
+obsolete or irrelevant languages. This is especially true for the internet (as
+an example, Lunds University does not have a single course or program focusing
+on web development or JavaScript). Thus, the best programmers are quickly
+employed and most of them still need to go through a rigorous process to get
+caught up with tools used by their new employers.
+
+The rapid change and exciting future of the internet grants such plethora of
+(or improved) opportunities that success is not a question of who has the best
+idea, but who has the best (or any) developers. This is obviously beneficial
+to more than web agencies (ie the Firm), the Lab intends to spark projects
+not directly related to client web sites, open-source front end code, or front-end CMS.
+
+These technologies are just now beginning to experience wide adoption, and the
+demand for JavaScript (and the closely related HTML5 & CSS3) developers is
+currently increasing rapidly. According to ReadWrite JavaScript and HTML5/CSS3
+are both on the top 7 most thought after tech skills 2013 JSON (JavaScript
+Object Notation) expertise is the most sought after skill on CyberCoders. The
+market for node developers is growing fast, as is the demand for full stack
+developers.
+
+## Conclusion: Webbutvecklare 2016 kan göra precis vad de vill.
+
+Det finns inte ord för att beskriva vad vi some webbutvecklare kan göra 2015.
+Och inte bara är vi webbutvecklare, rådande brist på riktiga utvecklare i
+branschen ger oss goda möjligheter att bli välrenommerade och berämda
+webbutvecklare. Om man nu vill det.
+
+Låt oss ta tillbaka webben från de imkompetenta, och visa hur riktig kod skall
+skrivas.
+

testing/introduction.md

@@ -0,0 +1,3 @@
+# Testing
+
+We have decided to use [Tape](https://github.com/substack/tape).