Benji Dalton

Blog

 

HTML Preprocessing with HAML

I recorded a screencast that serves as a decent introduction to HAML and html preprocessors. Enjoy!

- Posted on February 02, 2016



Active menu state in Rails

I recently did this screencast on how to use jQuery in Rails to add an active class to the menu link currently in use:

- Posted on January 31, 2016



Using Ruby on the front-end with Opal

I did this screencast as an exploration of opal, a great library which transpiles ruby to Javascript and basically makes it possible to now write Ruby on the front-end.

- Posted on October 07, 2015



Haskell

I've always enjoyed the 'learning' experience in general. Sometimes it can be frustrating. Other times it can be exhilarating. And then it can be both frustrating and simultaneously remain exhilarating. I call this case, intriguing.

I've got my hands full with learning Ruby, Rails, Javascript, and Ember. Not to mention studying up on algorithms and general computer science. However, you sometimes find there's something that catches your interest for some inexplicable reason and instead of doing certain tasks you know you should be working on, you wander off-topic...

For me, that's haskell. It is most definitely, intriguing. It's like learning to program all over again. I recently listened to a Thoughtbot podcast on the book maybe haskell and I was interested enough to enroll in upcase, which has some limited amount of haskell material. Luckily for me, there also exists a good amount of Ruby and Rails material I can make use of there as well...

If you're keen to try something a little different but fun, I recommend you drop by Try Haskell as well. If you like the flavour, you may want to check out: Learn You a Haskell, and if you're still intrigued, you might be interested in some of Upcase's content on the language. Happy explorations!

Read More



Learning Ruby and Rails with free resources

I've been gathering some the free resources and been thinking how I'd organize them into a sort of rough beginner curriculum. This is also a sort of commentary on my part and somewhat opinion-based. Everyone learns somewhat differently so take it with a grain of salt ;)


Start off by with getting a taste for Ruby:

Try Ruby

Then get a taste of Rails by creating a simple blog:

Getting Started

This is a really underrated tutorial but it's a great quick introduction to the framework. Plus it's nice to actually build something you might actually want to use. My blog is based on this tutorial!

Dig into the framework a little bit more with some Zombie fun:

Rails for Zombies

If you don't get some things or how the dots connect, don't sweat it. Use it to just get aquatinted for how Rails thinks. Does a framework think? Well, it has opinions at the very least.


Actually Learn Ruby:

Codeacademy Ruby Track

Start using Ruby. It is not the same as Rails! You'll be very confused if like me, you found yourself trying to use the sum method outside of rails: http://apidock.com/rails/ActiveRecord/Calculations/sum

Now, a little bit opinion.... Some say you should learn Ruby first. I say yes to this in an ideal world. The reality is, unless you're used to learning object oriented programming languages, this can take a while and writing command-line calculators may not exactly get you excited, especially if web development is you're aim.

That being said, you'll save yourself a lot of pain and frustration if you put in the time to actually start seriously learning the language.:

Ruby Monk

This is an awesome and fun way to learn Ruby. You won't finish it over night so intersperse it with your Rails learning.


Getting serious with Rails.

Michael Hartl's Rails Tutorial

This is a big one. It's an in depth tutorial designed to give a broad exposure to the Rails framework. It's definitely not an overnighter so pace yourself here.


intermission

If you've finished that, take a break. You deserve it. Start absorbing Ruby and Rails through other mediums as well. Podcasts are great:

Ruby Rogues

A good number of these aren't even technical but rather cultural. Absorb that Ruby culture. It's like the smell of coffee in the morning.

Watch some confreaks

I can't believe this much quality content is free!

Read some blogs and start participating in the community. Keep up with ruby news:

Ruby Weekly


You're ready to build

Finally comes the fun stuff. If you haven't started already, then start building something of your own! Keep it simple. The traditional ToDo list or a social bookmarking site are good warm ups. Build a clone of pinterest or another popular site. You'll start getting into real development and problem-solving here.

One of the biggest resources to help you here will undoubtedly be places like Stack Overflow. Just google your issues and you'll find yourself there quickly enough.


Become a master at problem-solving

I believe this is going to be an ongoing, multi-year effort. Keep sharp by exercising your mind with Kata's:

codewars

exercism


Read some books

Start Reading! So many good and necessary book reads, so little time! It would be a list all by itself but since I'm restricting this to free resources and most of these will cost you something I'll just link to this:

Essential read answers on Quora

Just start investigating and build up an essentials to read list.


Never stop learning

There are so many other areas that you'll need to become familiar with. SQL, CSS/Sass), Javascript, Deployment, CLI, etc... Now that you've mastered the art of learning Rails these will surely be a cakewalk, no? Don't get complacent! Never stop learning!

It's not an easy path but no adventure ever is! Good luck and happy coding!

Read More



Tabs with Angular directives

Recently I had a chance to explore Angular and I happened upon a pretty common scenario where I needed two tabs on a sign up/sign in form. I'm sure I could have done it with some of bootstraps components but I thought it might be fun to try to do it with only using angular directives, like ng-show/hide.


Here's the result, followed by a breakdown:

See the Pen Tabs with Angular js by Benjamin Dalton (@jaeming) on CodePen.


I wanted to keep it simple without having to resort to some controller logic or anything so this is the approach I took. My "tabs" were made to look tabular with some custom css styling so I needed a way to toggle the active tab class. Using ng-click on a button seemed a good way to switch values:

<button ng-click="switch = !switch" class="tab" ng-class="{'tab-active' : !switch}">Sign in</button>

And then again on the sign up tab with the inverse value to toggle the ng-class:

<button ng-click="switch = !switch" class="tab" ng-class="{'tab-active' : switch}">Sign up</button>

This same value toggle the different forms using ng-show and ng-hide. On the first form I wrapped it in a div like so:

<div ng-hide="switch">...</div>

and the 2nd form simultaneously gets shown with this:

<div ng-show="switch">...</div>

And with that you can quickly set up two tabs with very little logic. You can take a look at the codepen above for the full code. And as a disclaimer, I am in no way suggesting this is a good practice for production code.

And it's always a good idea to evaluate whether you might be putting too much logic in your views so I'm sure there's an argument for making this as a function in a controller. This one was just about exploring Angular and having a bit of fun with directives.

Read More



A Rails blog life

This is now a Rails-powered blog. I know, it's kind of overkill when I could something like Middleman, right? But I figured the famous 15-minute blog video put Rails on the map in the first place and it wouldn't be much fun to be delving into Rails and not build your blog with.


By the way, the spirit of the 15 minute blog still lives on in the Getting started. It's a somewhat overlooked tutorial imo, but it's a great starting point for anyone wanting to learn about Rails.

Read More



Using Git Stash

I recently happened upon the git stash command and I've been using it a lot. Maybe this scenario sounds familiar:

You start making a minor tweak on your master branch and then before you know it you've coded a convoluted feature you may or may not want to keep. You think, I really should have branched this. Git stash to the rescue!

git stash
git checkout -b convulted-new-feature
git stash apply
git add .
git commit -m 'either crazy genius or superb foolishness'


In essence, it's useful if you haven't yet added and committed yet to the master branch as it allows you a way to stash those changes temporarily without committing them. You can have multiple stashes, though I haven't quite gotten to a use case scenario that called for that.

Read More



Full-stack development for me

Big news! I recently made the jump and decided to sign up for the Full-stack Apprenticeship at Bloc.io I'm on a 4 month track for Ruby on Rails. Expect to see some nice web apps posted here soon.


By the way, if you find yourself interested in signing up for an online code bootcamp, I found the following video, where The Coursereport interviews several students from different online institutions, including Tealeaf, Firehose Project, Bloc.io, Thinkful and others. Watch it here. It clocks in at over an hour but well worth it if you are considering one of these online bootcamps.

Read More



Using CSS blur filter with modals

Encouraged with my first experiment in codepen, I set out to make another. I was still interested in using the blur filter and wanted to find other possible application.


What came to mind was a pop-up or modal that, instead of darkening the background, blurs it out. You can check out the results here on CodePen

Again, I was surprised that this pen actually got 'picked'. I'm 2 for 2 on Codepen now!

Read More



First Codepen...and it's picked!

I've often been amazed by the things people do on Codepen, pushing the envelope with cutting edge CSS and JS. The spirit of it is kind of infectious, so I had to give it a try myself. For my very first pen I decided to play around with something I'd just recently discovered, CSS filters. In particular, the blur().


I crafted and posted it and checked back in 12 hours later and was pleasantly surprised that my pen was listed among the featured, 'Picked' pens on codepen's front page. Wow. That's encouraging for my first pen. In any case, here it is if you want to check it out:

See the Pen 3d CSS balls by Benjamin Dalton (@jaeming) on CodePen.

The idea here is to use the blur filter to simulate depth of field and use transform and boxshadow: inset to enhance the 3D illusion. I've got a few ideas about using this in other ways. Can't wait for wider browser support.

Read More



And so it begins...

So I've finally taken a moment to revive benjidalton.com and I'll be making a good effort to update it with posts on a re-occurring basis! Hold on tight.


I suppose the biggest change in my life recently is I've begun to shift my focus back towards Web Development, which I really enjoy. I have been entertaining thoughts as to whether to focus on the front end vs. Full stack. I love good UI and design as well as all the fun interactivity that comes with all those great JS frameworks popping up these days but I really feel attracted to the Idea of Ruby and Rails as well.

Now I'm moving on to other learning resources and just generally practicing my craft every free moment I get. My new credo is "Code Everyday!" Wish me luck!

Read More