Linus Tech Tips Website

[loganryan99]

I've spent basically all day today working on the LTT website. I wanted to talk a bit about the different technologies/frameworks we're using to make the site, because it's been an extremely awesome learning experience for me. If you're not a web developer most of this will probably go over your head, sorry.

 

If you're unfamiliar with the goals of this project, you can check out Edzel's post here (This isn't the design we're going with anymore, but the functionality is the same): http://linustechtips.com/main/topic/73580-linustechtips-website-is-this-going-to-be-a-thing/

 

Foundation

Foundation is an excellent CSS framework from Zurb. (don't worry, I hadn't heard of them before either) Unlike Bootstrap, Foundation doesn't give you every UI element you may possibly need on your website, and instead just gives you the "foundation" to build on. This was EXTREMELY important in my decision to use Foundation instead of Bootstrap, because LMG has some very specific design choices I needed to implement. Instead of fighting to change the style of Bootstrap elements, Foundation just gives you a blank slate to work with. (Zurb calls this "design agnostic" for whatever that's worth)  Most of the elements on the website come from Foundation but have been modified to fit our style. Oh, and is uses SASS, which is a plus.

 

Take a look at Foundation here: http://foundation.zurb.com/

 

Angular.js

I'm going to be honest and tell you that this was my first Angular project, and Angular does have a bit of a learning curve if you're used to JQuery. IP.Content (our CMS) provides a server-side template engine but the next major revision of IP.Content is right around the corner and we have no idea what's going to change. This made me decide to completely separate the front end and back end, and use a RESTful API to communicate between the two. Another plus of this is that we can use the same API for mobile and desktop apps, and possibly open it up for you all to use. (don't get your hopes up) Anyways, I use Angular.JS as a template engine as well as communicating with the back-end via a JSON API. Of all the libraries used in the project, Angular is by far the most important. If you aren't using it already, you should be. It changes the way you think about web development, but in a good way.

 

Take a look at Angular here: http://angularjs.org/

 

Normalize.css

If you don't know what Normalize is, it's extremely simple. All it does is override the browser's default styles for elements, making them display uniform across all browsers.

 

Take a look at Normalize.CSS here: http://necolas.github.io/normalize.css/

 

Modernizr.js

The name is basically self explanatory. Modernizr simply detects what HTML5/CSS elements a browser doesn't have and allows you to account for them accordingly, making it very easy to design code that is compatible with even old browsers.

 

Take a look at Modernizr here: http://modernizr.com/

 

JQuery

Using Angular and JQuery together was an extremely tough decision. The reason is that Foundation uses JQuery for UI elements like sliders, drop-downs, etc. Due to time constraints, I don't have time to port all of these elements into Angular directives. Personally I think JQuery makes everything extremely simple, but for what most people use it for it's WAY to heavy.

 

Take a look at JQuery here: https://jquery.com/

 

More details coming soon...

[TechSean]

What made you pick Angular over Ruby on Rails or Django? Is it because you already knew JS? Also, how do you deploy Angular is it using Node.js?

[loganryan99]

What made you pick Angular over Ruby on Rails or Django? Is it because you already knew JS? Also, how do you deploy Angular is it using Node.js?

 

Because this is closely integrated with IP.Content (which uses PHP) using another server sided language wasn't an option. Plus, Angular.JS makes the page appear faster to the user. You deploy Angular the same way you would JQuery.

 

Thanks for the question