hey cool, a blog.

Sails 0.12.2 will be published later today. At the moment, the pre-release is available when you run npm install sails@beta.

If anyone wants to try it out and let us know how it goes, the core team would greatly appreciate it!

The documentation has been updated for the newest release as well, and will be available on sailsjs.org as soon as cloudflare allows it. (Until then, you can find the un-cached version here.)

A couple years ago, I volunteered do build a website for my friend’s theatre company. By that time I was pretty good at HTML/CSS and could to some basic JavaScript, and the website didn’t need to be anything too fancy, so I figured I’d be up to the task.

Until I got to implementing the contact form. I realized: I could validate it on the frontend, and make it look like it sent a message, but I had no idea how to actually make it work.

At that point, I could have gone the noble route of spending a bunch of time learning the skillz in order to make a proper backend for it. But I didn’t. I wanted to get something out there quickly. And frankly, I had only been coding for about a year, and was much more interested in building up my frontend skillset before jumping into learning something completely new. So I did what any reckless ne’er-do-well would in my situation: I added a mailto link to the site and called it a day. (Sorry for the spam, Chris.)

Now, a couple years later, as the website is starting to feel painfully old, I’ve started rebuilding it. I’ve been working on the Treeline team for the past several months, and a handy side-effect of my job is I get to use the tool as much as I want. So I decided to use Treeline to implement a contact form using the Mailgun machinepack.

If I had access to this tool when I first started building that website a couple years ago, I would have easily been able to implement everything I envisioned for it. It’s incredibly empowering as a frontend developer to be able to put together a backend without having to write code; it means I have more time to make the frontend cool. So, I figured I’d throw together a quick video of how to set it up to share with anyone who might be encountering similar roadblocks.

I wouldn’t call myself a CSS expert. I’m not figuring out amazing new uses for it; I'm more at the do-cool-stuff-I-learned-from-tutorials level. But in a little over a year, I have gone from knowing almost nothing about it, to being able to confidently implement whatever mockups a designer puts in front of me. Which I think is pretty neat.

So, even though you are probably thinking, “Why should I listen to you? You just said you’re not an expert,” I am going to go ahead and tell you how I learned to code HTML and CSS well enough to make a living at it -- mostly in second-person, but sometimes in first. Because this is my blog, and we get crazy like that.

Here’s how.

  First: Learn the basics.

When I first decided to learn CSS, I began with Lynda.com videos, then went through Codecademy’s courses. But there were also a ton of other learning resources out there, making it pretty difficult to choose where to start as a beginner. I’m sure a lot of them will teach you what you need to know, but my personal recommendation is a Codecademy/Treehouse combo. Here’s why:

Codecademy gets you coding right away. It has a ton of exercises that slowly build off of each other, and by the time you finish with their HTML & CSS program, you will have the basics drilled into you pretty well. Also, it’s free. Free is good.

Treehouse’s strength is that they assume you’re an absolute beginner. Whereas Codecademy teaches you how to code things really well in the context of the little exercise box, it can leave you thinking: “what next?” Treehouse teaches you the rest of the things you need to know -- basics like: you-need-to-have-a-text-editor, and here’s-how-you-set-up-hosting-for-your-website. (Note: I didn’t have a Treehouse account  when I first learned HTML & CSS, so I don’t have firsthand experience with that particular set of courses, but I’ve used it as a learning resource for other things, and they are preeeeeetty hand-holdy in general. The Website Basics course looks like no exception.)

So: Codecademy first, for the learning-how-to-write-the-code part of things, then Treehouse tutorials next, to learn how to actually do it in real life.

  Second: Find something to build. Then build it.

Now you know the fundamentals of HTML and CSS. But don’t just start coding yourself a web page freehand. Yes, sometimes it’s fun to just work on something without any constraints, but I don’t think I’ve ever learned anything new that way.  Making a web page perfectly match a design is challenging, and forcing yourself to work within those guidelines will help you get better and better at solving problems. 

I was pretty lucky with this step. When I had just begun learning, the company I work for had released a web framework, and needed to put up a real website for it. We had mockups, and someone had created the project for it at some point, but the rest of the team was busy with a client project and no one was actively finishing implementing it.

So they let me have a go. It was kind of overwhelming. But I worked on it a little bit every day, and I credit that project with really teaching me how to code HTML and CSS. If there was something in the mockups that I didn’t know how to do, I had to figure it out – sometimes that meant doing some hacky shit, but I learned. And I got better.

If you don’t know what to work on, just pick a website you think looks cool, and try building your own version of it. Try and make it look exactly the same. No peeking in the inspector. (Oh, fine, you can use it to find out the colors and fonts. But that’s it.)

   Three: Now you know the basics, keep learning new things.

There’s some really cool stuff that may not come up when you’re first learning, but are really useful later on. Here are just a few examples:

Media Queries (for responsive designs)

Transitions (to make hovers not suck)

Animations (so you can have an awesome loading spinner and stuff)

LESS (or Sass -- to save you a LOT of time on bigger projects, and limit repetitive code)

Box shadows, gradients, etc. (I know, these things are mostly out of style right now. But they still come up.)

Conditional stylesheets (Because people still use old browsers for some reason)

   Fourth: Clean up something you made early on. 

Remember how I said I did some hacky shit on that first project? Well, once I had some free time at work, I fixed it.

Going through an old project taught me about organizing my code, making it easy to revisit and know what’s going on. Since it was one of my first endeavors, I wasn’t really thinking about how easy it would be to change later when I first coded it; I was focusing on solving the problems at hand. But when I went back to it, I had a much better idea of what I was doing, and was able to come up with cleaner, easier-to-maintain styles. As I work on more projects, I find myself getting better and better at thinking that way from the beginning, and you will too.

    Fifth: Repeat steps 2-4. FOREVER.

A few projects ago, I felt pretty confident in my code. But now if I revisit an older project, I find myself noticing ways I could have done things better, even if I felt it was pretty good then. The more things you work on, the better (and more confident) you'll be, and the more cool new stuff you'll try. Just keep practicing.