Mygen


Salutations! I'm Martin, I develop elegant and awesome websites and apps.


Develop Developing Developers

A friend of mine recently expressed interest to me about learning how to make webpages. Given their background in more traditional design I could certainly understand the desire to move forward into interactive media as admittedly, there is a lot that can be accomplished on the web for which there are no parallels in other forms of media.

At the foundation of it, providing the skeleton of structure to the content of any website is going to be good 'ol HTML.

Once this structure for content is assembled together (hopefully with good and appropriate use of the sweet new hotness of HTML5 semantic tags) the skin over the bones can be layered on, using CSS.

Then, for rich interactivity and adding advanced functionality, the nervous system and muscles can be thrown in too, that's usually going to be javascript.

javascript isn't essential to make a great webpage, HTML and CSS alone can do really wonderful things, but it certainly is needed to make a webpage really 'come to life' and be able to respond to a visitors actions beyond navigation to-and-fro through links between pages.

In the hopes that it may be useful to someone looking to learn, or hone their web building skills, I'm going to try and prepare a collection of works here, available freely around the internet, that could take a beginner all the way up to pro.

So, without further rambling preamble, here's my list of awesome webdev resources.

Getting started

The journey begins by letting go of control, and becoming flexible.

http://alistapart.com/article/dao
The philosophy and theory of web design. Fonts, Layouts, Colours, and learning adaptability.

http://www.html-5-tutorial.com/
Although this tutorial is not a paragon of excellent style and design, it does a fantastic job of getting people new to HTML up to speed and covers all the basics from how a doctype works up to the basics of adding in forms, while sticking to best practices and even passes along some great tips for search engine optimization.

http://htmldog.com/guides/css/beginner/
A good primer for those new to CSS. Check out their HTML tutorials as well to make sure you have a good foundation on the beautiful soup that is HTML.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
Now that you got the brief on how HTML and CSS works, here is the de facto learning resource. Few places on the web are more complete and clear than the Mozilla Development Network, and the MDN is my goto guide when I need a reference for HTML, CSS, or javascript.

http://flukeout.github.io/
CSS Diner: A cute game teaching you about CSS Selectors

http://wtfhtmlcss.com/
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.

http://www.1stwebdesigner.com/css/advanced-css-text-effects-web-typography-tips/
Time for some more fun! A nice collection of 'cool' effects you can achieve with CSS

http://leaverou.github.io/prefixfree/
You may have noticed from the previous link that a lot of the neat new effects available with recent browsers require a lot of repetition through the "browser-prefix" strings. With one extra line in your HTML file, you can avoid ever having to worry about browser css prefixes. Yay!

http://mediaqueri.es/
An awesome showcase site that gives great samples of what can be accomplished with modern CSS. The focus is on 'responsive' layouts, which mean that the layout adapts to the device it is being viewed on.

http://learn.shayhowe.com/advanced-html-css/responsive-web-design
A solid guide to getting that same responsive layout as all those just showcased.

https://github.com/mjhea0/thinkful-html/tree/master/resume
Welcome to Github! The central source for 20%-90% of open-source / free projects on the net. This is a final review of the basics of HTML/CSS and by now you should be able to totally follow along and put together your very own, strikingly good looking, resume / portfolio. Go ahead, roll one up.

The road to enlightenment

Begin to see with clarity. Learn to use the time-honoured techniques in new and invigorating fashion. Become one with the web.

http://www.csszengarden.com/
1 page, 217 designs (and counting). Another showcase website that beautifully encapsulates the expressive power of stylesheets. It's all the same HTML, only the CSS gets switched. Inspiration starts here.

http://getbootstrap.com/
Want a great looking site, fast? There are many 'css frameworks' out there that bundle great looking styles and layouts together for you. Bootstrap by Twitter is probably the leader of this pack.

http://jquery.com/
It's probably time this monster of javascript was mentioned. Like bootstrap is with CSS, jQuery is the library of choice for front end user interface javascript development. Don't worry about using it yet, at least be aware of it.

http://eloquentjavascript.net/
I think you are ready for this now. You don't have to take it all in by one go, and sometimes it gets a bit dry, but it is eloquent and an excellent place to begin your adventures in adding the real meat to websites.

http://jenniferdewalt.com/
Jennifer Dewalt decided that to learn how to make websites, she would build 180 pages in as many days. I dare you to build one cool website in one day with some kind of user interaction. Keep it simple and have fun!

Next-gen web

It's like the Wild West, the Internet. There are no rules.

http://www.ro.me/
To showcase what some bleeding edge javascript can really do, I'm going to list some pretty sweet music videos done up for the web. Here's "Three Dreams of Black", an interactive 3d music experience.

http://www.thewildernessdowntown.com
The first (ever?) HTML music video by The Arcade Fire. Makes extensive use of window.open() and HTML5's new video element.

http://www.allisnotlo.st
Similar to The Arcade Fire's style of HTML music video, this time generated by OK Go / Pilobolus

https://www.justareflektor.com
The second Arcade Fire HTML music video. This one makes some very innovative use of your webcam and cellphone in conjunction with the the webpage.

http://labs.gooengine.com/mozlod/
Songs of Diridum will give you some soothing, generative jazz in a 3d world to calm your excitement now that you know of what magic can be done.

http://threejs.org/
A really powerful 3d system for javascript that abstracts away all the brutal shader and pixel distance mapping stuff. Have a look at some of the examples, it's surprisingly easy to dive into. Many of the above music video pages are based on this library.

http://brm.io/matter-js/
Matter.js is a 2D physics engine for the web - You can code in all manners of interaction and create that angry birds type game you have always dreamed of.

The server-side

The Internet is the first thing that humanity has built that humanity doesn't understand, the largest experiment in anarchy that we have ever had.

Ok, this is really getting into uncharted territory. Up until now most everything discussed has been just plain html, css, and maybe some js files sprinkled on top.

Once you have a web server to tinker with, the possibilities of interactive design explode out in all directions. Being able to store and manipulate data, then later send it out again in new forms is powerful stuff.

From online cookbooks to team based collaborative todo lists to fun online games, to.. well.. anything imaginable, really.

At the core of it, is you can send data back to the server or retrieve it, usually either as a GET or POST request.

http://javarevisited.blogspot.ca/2012/03/get-post-method-in-http-and-https.html

Almost every programming language in existence has some sort of capabilities for recieving and serving dynamic web content, and even those that don't can be wired up using other programs acting as a gateway to let you.

Popular server languages for the web usually include the laundry list of...

However for the sake of brevity and simplification, I'll make the most terrible assumption that you may want to learn how to take the programming language that you are already starting to learn, javascript, and apply it to the server as well.

javascript isn't without it's problems, there are warts and hairy, scary places everywhere.
http://blog.falafel.com/blogs/basememara/basem-emara/2014/03/14/the-truth-about-false-in-javascript

However, javascript has some really good parts going for it, not to mention that it is the standard language included in every browser everywhere, so it can be considered the as one of the most standard of standard languages. The Lingua Franca of the web.
http://javascript.crockford.com/javascript.html

The most common way to run javascript on the server by far has got to be Node.js
http://nodejs.org/

With node, you can access and manipulate files, use good crypto, and most importantly, serve html and other content to people accessing your server.

This isn't to mention that it is a lot faster than a lot of the other options mentioned above, for example, php and ruby, they tend to fall apart on your average server when trying to push out more than 10-20 requests per second. Usually, node can handle 100+ requests per second. This isn't as good as something like C or Go which can handle 1000's per second, but it is usually 'good enough.'

There is also a literal crap ton of great modules and libraries on https://www.npmjs.org/ which you can use server-side and also many work fine on the browser as well. One of my personal favorites is moment.js (http://momentjs.com/) which takes away all the pain of working with date and times and seperates me from the limits of the javascript Date() object.

Alternative syntax

You don't have to turn on the TV set. You don't have to work on the Internet. It's up to you.

With apologise to cats, there is more than one way to take care for them, similarly, there is more than one way that you can write javascript.

http://coffeescript.org/
A really solid alternative that I find myself going to for most projects I undertake. It is just javascript, but with a nice new style that keeps me from shooting myself in the foot.

http://arcturo.github.io/library/coffeescript/
The Little Book on CoffeeScript

https://github.com/satyr/coco
Even more concise than coffeescript, Coco has some wild wild structures that can condense even the most complicated constructs to a single line.

http://www.typescriptlang.org/
If you are a fan of having things well defined and following strongly enforced, logical interfaces, then maybe typescript is for you.

Server frameworks

Weeks of programming can save you hours of planning.

It's not fun to build every app up from scratch and there are some really great code libraries that can give you a lot of 'baked in' functionality.

http://expressjs.com/
A super common server side framework. As the homepage exclaims: Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.

https://github.com/mjijackson/mach
An attempt to make a better express.js. Utilizing middleware and pluggable data sources, it has the advantage that all data is streamed rather than buffered up.

https://www.meteor.com/
A better way to build apps. Using some really magical code wizardry, you can write a web app in terms of templates and have all the backing data just stay in with what your visitors see 'by default,' in real-time. Pretty cool stuff.

The road ahead

I’ve finally learned what ‘upward compatible’ means. It means we get to keep all our old mistakes

Time to start making things! Decide on something that you would like to accomplish and then just go for it. It's probably a good idea to keep things pretty simple to start with, maybe a advanced version of tic-tac-toe or a unique card game your grandmother taught you.

If you already have a solid foundation of print media that you have created, perhaps it's time to make a beautiful online showcase for your work? Google is your friend for answering all kinds of your questions. "Lightbox using jquery" for example, and dozens of options for making that perfect picture gallery will appear.

A lightbox is a way for for displaying pictures or other content with a front and centre bordered frame and the rest of the page greyed out. All these extra terms will be found by you though time, experience, and perseverance.

Finally, the most important aspect is that you are having fun doing all this, design is a creative endeavour and for the best of it, there needs to be passion and lots of heart put into it.

I wish you all of the best in your adventures in webdesign and if there is anything further I can do to assist, please either contact me directly at n17r4m@gmail.com or leave a comment in the discussion area below.

comments powered by Disqus