Welcome to the Learnetto Blog

Get new high quality tutorials every week

Topics include Ruby, Rails, React.js, Redux and more

11 great quotes from The Tao of Programming

11 Sep 2017

The Tao of Programming by Geoffrey James is a strange and funny book. It's one of my all-time favourites.

These are some of my favourite quotes from the book:

"After three days without programming, life becomes meaningless."

"I don't know whether I am Turing dreaming that I am a machine, or a machine dreaming that I am Turing!"

"When a program is being tested, it is too late to make design changes."

"A well-written program is its own Heaven; a poorly-written program is its own Hell."

"But how will I know when I have received Enlightenment?" asked the novice.
"Your program will run correctly," replied the Master.

"Though a program be but three lines long, someday it will have to be maintained."

"Let the programmers be many and the managers few -- then all will be productive."

"You can demonstrate a program for a corporate executive, but you can't make him computer literate."

The Master Programmer moves from program to program without fear. No change in management can harm him. He will not be fired, even if the project is cancelled. Why is this? He is filled with Tao.

"Without the wind, the grass does not move. Without software hardware is useless."

You can get a copy on Amazon or read it online here.

How to include Rails Associated Model Data in React components

06 Sep 2017

How to include Rails Associated Model Data in React components

When you start using React with Rails, one of the frustrating problems you quickly run into is trying to access associated model data from your React component.

Let's say we are building a chat app with Rails and React. We have three models, Chatroom, Message and User, which have the following relationships between them:

class Chatroom < ApplicationRecord
  has_many :messages, dependent: :destroy
end

class Message < ApplicationRecord
  belongs_to :chatroom
  belongs_to :user
end

class User < ApplicationRecord
  has_many :messages, dependent: :destroy
end

And we have a Message component for rendering individual messages:

import React from 'react'

const Message = ({message}) => 
  <p>
    {message.user.name}: {message.body}
  </p>

export default Message

In addition to the message body we also want to display the user's name.

If you're using a standard Rails ERB or Haml view template, you can simply write something like:

<%= @message.user.name %>

And that will just work even if you didn't include the user data in your database query in the controller.

However, unlike in a Rails view, if we call message.user.name inside our React component without having specifically included that data in the prop sent to the component, it will throw an error.

While a Rails template is actually able to call the model on-the-fly and get data it doesn't have, we don't have that luxury with React.

We need to explicitly compose the JSON with the associated User model data because a React component can only access the JSON data we provide it.

There are many ways to include the associated model data, including manually composing the JSON in the controller, defining a custom as_json method on the model or using ActiveModelSerializers.

One of the cleanest and most flexible ways is to use jbuilder, which gives you a simple DSL for declaring JSON structures. The jbuilder gem comes included with Rails.

In the example above, we can include our user data in the message JSON by defining it in a _message.json.jbuilder file like this:

json.(message, :body, :id)
json.user do
  json.extract! message.user, :id, :name, :image
end

The jbuilder DSL is quite powerful and allows you to do all sorts of custom structuring of the data.

For example, let's say we want to send all the messages in chronological order and user data for a particular chatroom to a Chatroom component. We can define the chatroom json like this:

json.(chatroom, :name, :id)
json.messages(chatroom.messages
                .sort_by{|m| m[:created_at]}) do |message|
  json.extract! message, :id, :body
  json.user do
    json.extract! message.user, :id, :name, :image
  end
end

Check out the jbuilder documentation to learn more about all its features.

The full code of the Chat app is on Github and there's a live demo running here.

You can also learn how to build it yourself in this two-part video tutorial - How to build a chat app with Rails 5.1 ActionCable and React.js Part 1 and Part 2.

How to make AJAX calls in Rails 5.1 with or without jQuery

23 Aug 2017

Rails shipped without jQuery as a dependency for the first time with version 5.1. Rails used to rely on jQuery for Unobtrusive JavaScript features but now ships with its own library rails-ujs with the same features.

One of the most common use cases for jQuery in Rails was making AJAX calls through forms and links. If you’re using Rails 5.1 for the first time, you might get confused about how to make AJAX calls, especially things like data formats and including CSRF tokens.

So this little tutorial walks you through a few ways you can do so.

If you're using a standard Rails form or link for AJAX calls, Rails still offers some great in-built methods. However, when you're not using those methods, for example when you're building a React UI for a Rails app, then you will find this tutorial helpful.

How to get your Rails data into your React component with webpacker

04 Jul 2017

The webpacker gem has given us an easy way to use JavaScript libraries, including React, inside Rails while using native JS tools like yarn and Webpack.

If you’re using Rails 5.1 or higher, you can directly create a new app with React support out of the box simply by running:

$ rails new myapp --webpack=react

If you’re using an older version of Rails (4.2+), you can install the webpacker gem and then run

London Ruby User Group (LRUG) talk June 2017: How to use React with Rails

12 Jun 2017

I gave a talk titled 'How to use React with Rails' at the June meetup of the London Ruby User Group (LRUG).

You can watch the talk here on the Skills Matter website.

The slides are on Speakerdeck.

If you enjoyed the talk, check out my Free React on Rails course and The Complete React on Rails course.

"How to use React with Rails" LRUG June 2017

How to do Simple Form Validation in #Reactjs

12 Mar 2017

This is a step-by-step tutorial that will show you how to do basic form validation in React.

You can see the full code on Github and see the app running on Heroku.

We’ll use create-react-app to get up and running quickly with a simple React app.

Install the package from npm and create a new app:

His first job was writing code for a nuclear power plant. Now @Swizec teaches #D3js and #Reactjs

02 Mar 2017

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Swizec Teller is our guest on the newest episode of the Learnetto podcast.

Swizec is a talented and accomplished software engineer, originally from Slovenia, now based in San Francisco.

Now he helps startups, having previously collaborated with MasterCard, Google, and Mashable, among others. A self-proclaimed writing addict, Swizec has published several books including Data Visualization with d3.js and Why programmers work at night, with tips on work-life balance, productivity, and programming flow.

His latest book is called React+D3.js in which he teaches how to use React.js with D3.js for building modern interactive data visualizations.

In this interview, we discussed his beginnings as a tech whizzkid, writing about code, coding live, supporting indie tech writers, and using videos as the next hot thing in teaching programming. There was also an unexpected guest on the show!

https://www.instagram.com/p/BH3S9CyhOMA/

Hrishi Mittal (HM): Hi Swizec, how are you doing?

Swizec Teller (ST): Hey, thanks for having me! I’m great, how about you?

3 ways to use React with Ruby on Rails 5

04 Jan 2017

IMPORTANT UPDATE (6 July 2017): With the release of Rails 5.1, Rails now has native support for using React via the webpacker gem. Check out the free lesson on how to do this in the Free React on Rails course or see this blog post.

There are a few different ways to use React inside Ruby on Rails apps. In this post, I'll cover 3 of the most popular ways.

1. react-rails gem (https://github.com/reactjs/react-rails)

The react-rails gem is the simplest and quickest way to start using React inside your Rails app.

It uses the default Rails asset management and automatically transforms JSX into the asset pipeline using the Ruby Babel transpiler.

Assuming you already have a recent version of Ruby and the Rails gem installed, here's how you get started with react-rails.

Add the gem to your Gemfile:

gem 'react-rails'

Install the gem:

bundle install

Run the react-rails installation script:

Medium - Why Rails developers should learn React

30 Nov 2016

Original here ;) - https://en.wikipedia.org/wiki/Yukihiro_Matsumoto#/media/File:Matz.jpg
Here's an excerpt from my article on Medium:

Rails developers should learn React because there's growing market demand for developers who know both. Learning to use React will make you more money and a better developer.

In many ways, React is to the modern frontend, what Rails is to the backend - there are many alternatives, but React has the best combination of simplicity, power and community momentum to make it a great choice.

Web UIs have matured a lot over the last decade. We're doing more complex things to build better user experiences on the web. jQuery has served well but even a medium-sized project can now quickly turn into the Flying Spaghetti Monster. React offers a simple yet powerful alternative to spaghetti code.

Read the full article on Medium.

The Learnetto Podcast Episode 007 - How to become an entrepreneur in the age of "The End of Jobs" with Taylor Pearson

21 Jul 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Our latest guest on the Learnetto Podcast is Taylor Pearson, entrepreneur, marketing coach, and author of the bestselling book The End of Jobs, about a new landscape of the job market. We invited Taylor to talk about his background and the interesting thesis of his book - that in today's world it’s safer to start your own business than to work for someone else. Taylor and Hrishi also touched on community building, philosophy of economics, and history.

You can follow Taylor on Twitter and his Facebook group.

Hrishi Mittal (HM): Hi Taylor, how are you doing?

Tutorial: How to add Disqus comments to a Rails blog

20 Jul 2016

Disqus is the most popular, reliable and straightforward way of adding comments to your site without having to code it up from scratch yourself. It automatically handles user authentication, threaded comments, voting and spam control.

In this short tutorial, you'll learn how to add a commenting system to your Rails blog (or site) using Disqus.

The Learnetto Podcast Episode 006 - How to be a data-driven UX designer with Matt Isherwood

31 May 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

On today's episode, Hrishi is speaking with Matt Isherwood, a user experience designer and instructor based in London. Matt is a UX design consultant specialising in e-commerce, marketplace websites, and mobile apps. He has years of experience in the luxury sector and working on UX strategy with startups. Matt writes a very popular and educational blog on his site, Mattish.com, where he teaches people about optimising user experience through data-driven design.

Hrishi Mittal (HM): Hi, Matt. How are you doing?

Tutorial: How to use Amazon S3 and CloudFront CDN to serve images fast and cheap

03 May 2016

This is a guest post by Samir Talwar, a software developer based in London. Samir cares deeply about software quality and craftsmanship. You can read more of his writing on his excellent blog and follow him on Twitter.

In my last tutorial, we figured out how to host static web pages for free on GitHub pages. However, if you tried to host images or other large assets in the same fashion, you may have noticed that it's pretty slow. GitHub Pages was never designed to handle large files. In this article, we'll explore a much faster, yet extremely cost-effective solution for dealing with non-text data.

My blog, monospacedmonologues.com, is pretty text-heavy, but gets a sprinkling of pictures once in a while. The blog itself is really just a Tumblr blog, and so I don't host it anywhere I can store files. But that doesn't matter, because the images can be hosted anywhere.

Even the pictures on my blog are code-heavy

Tutorial: 4 steps to getting started with LaTeX (and liking it)

27 Apr 2016

LaTeX is a system for preparing professional documents. It was created by an American computer scientist Leslie Lamport.

Leslie Lamport, creator of LaTeX. Image under GFDL.

The aim of this tutorial is to offer a simple introduction to LaTeX. It includes information on how to get the LaTeX system, what hacks to use, and how to get to like LaTeX.

I am a self-taught LaTeX user so I know from experience what initial issues beginners might have. I also believe that learning LaTeX offers you insights into writing, typography, and coding. Throughout this tutorial, I call them "general lessons." You can apply them to different aspects of your work and code, not only to writing in LaTeX.

What is LaTeX (and how to pronounce it)?

The Learnetto Podcast Episode 005 - How to learn to design apps with Marko Vuletič

21 Apr 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Marko Vuletič is a Slovenian web & mobile UI/UX design professional. His work is centred around creating apps and websites which are visually pleasing, but, most importantly, functional and user-friendly. An app he redesigned, Moments, has been featured by the US App Store as the best new app. Marko also writes a popular blog and newsletter about designing apps in Sketch, called Sketch Tricks. He agreed to speak to Learnetto about it, as well as about what it means to be a UI/UX designer and how to learn design.

Marko Vuletič

Hrishi Mittal (HM): Hi Marko, how are you doing?

Marko Vuletič (MV): I’m great, thank you for having me. How are you?

HM: Yeah, I’m very well, thank you! It’s nice to have you. Thanks for taking the time to speak to me today. Would you like to introduce yourself for the audience?

MV: Sure. So I’m Marko, I’m coming from Slovenia and I’m a UI/UX designer. I’m currently working on a personal project that’s called Sketch Tricks. It’s mainly a blog that I write about different workflows, about Sketch 2 and stuff like that. The other thing that I am doing is teaching people UI and UX fundamentals and stuff like that on my personal site which is markovuletic.com.

HM: Ok, great. That sounds great. And, yeah, that’s actually how I came across you, your site Sketch Tricks, which we’ll come to in a minute. Before we do that, I just wanted you to tell me a bit more about your background. How did you become a designer? How long have you been a designer?

The Learnetto Podcast Episode 004 - How to learn new skills as a software developer with Cindy Potvin

13 Apr 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

Our guest on the fourth episode of the Learnetto podcast is Cindy Potvin, a Montreal-based software developer. Cindy started blogging about her experience of Android and web application development in October 2013 at blog.cindypotvin.com. Since then, her blog grew to include series "Learning as a Software Developer" and "Play and Learn as a Software Developer." Titles of the series summarise Cindy's goals well - she wants readers of her blog to enjoy their learning journey to becoming better developers.

Cindy Potvin's avatar on her blog and twitter

Hrishi Mittal (HM): Hi Cindy, how are you doing?

How Codevolve is lowering the barrier for learning programming: Learnetto Interviews CEO Saul Costa

24 Mar 2016

Saul Costa

Super excited to publish this interview! I recently spoke to Saul Costa, co-founder and CEO of Codevolve, an exciting new company which makes an amazing product for interactively learning computer programming. Go check it out.

You can also follow Saul on Twitter.

Here's the interview:

Hrishi Mittal (HM): Hi Saul, how’s it going?

Saul Costa (SC): It’s going great, how about you?

Tutorial: How to host your websites for free using Github Pages

22 Mar 2016

Samir Talwar

This is a guest post by Samir Talwar, a software developer based in London. Samir cares deeply about software quality and craftsmanship. You can read more of his writing on his excellent blog and follow him on Twitter.

I run a few websites. The one that gets the most traffic right now is communitycodeofconduct.com, which is used by a number of software communities as a place to start thinking about how their community behaves to each other.

I host that site at zero charge.

GitHub Pages, and the decline of the server

I’m sure you know of GitHub already. It’s where people host their source code, both for their open-source projects and for private stuff. You may also have realised that many open-source software teams host their website on GitHub too. For example, the website of my favourite command-line tool, jq, is hosted on GitHub Pages, among many others.

The Learnetto Podcast Episode 003 - How to learn to code with Laurence Bradford

18 Mar 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

In episode 3 of the Learnetto Podcast, I spoke to Laurence Bradford, a self-taught developer, who has been teaching herself how to code for 3 years. Having experienced the difficulties of the learning process first-hand, Laurence understands the most effective ways to obtain tech skills. Her website Learn to Code With Me, now receiving 50,000 unique visitors a month, aims to help those in the same position she was a little while ago. She also runs a popular Facebook group, offers career advice and has written a book.

The Learnetto Podcast Episode 002 - How to use Quora and Slideshare to grow your audience with Imran Esmail

09 Mar 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

In the second episode of the Learnetto podcast, I interviewed Imran Esmail of Escape Your Desk Job. Imran is an expert marketer who teaches people how to use social platforms like Quora and Slideshare as a way to grow your audience. He is the co-author of the Domination Series books Quora Domination and Slideshare Domination.

Imran also has a new course on Slideshare and is organising The Virtual Slideshare Summit 2016.

Let's hear Imran's story.

Imran Esmail (IE): How are you doing, Hrishi?

The Learnetto Podcast Episode 001 - The Ultimate HTML Developer with Kalob Taulien

29 Feb 2016

Please subscribe to the Learnetto Podcast in iTunes and rate us to help us reach more people.

For this very first episode of the Learnetto podcast, I interviewed Kalob Taulien, CTO of Xcellerator Tools and web development teacher.

Kalob teaches the very popular Ultimate HTML Developer course here on Learnetto.

Hrishi Mittal (HM): Welcome to the first episode of the Learnetto podcast. I am Hrishi Mittal, your host and the founder of Learnetto, an awesome new place for learning tech skills online. You can check us out at learnetto.com. So today, I am speaking to Kalob Taulien, the CTO of Xcellerator Tools and author of the complete web developer course and Ultimate HTML Developer course. Kalob is a very experienced software developer and teacher. He has taught web development to thousands of students through his online courses. Let’s listen to Kalob’s story.

How Codescrum runs and scales Rails apps In Docker With Docker Compose

22 Feb 2016

This is a guest post by Juan Pablo Amaya, a product developer at CodeScrum. Codescrum is a software development company led by Jairo Diaz and focuses on creating user centric digital services and products for clients. This post originally appeared on the CodeScrum blog.

In a past post we shared a Rails starter template (rails-template) with a minimal base for building common rails applications. Now we want to show how to run the rails-template inside a Docker local machine and be able to do simple scale and load balancing.

The diagram below shows the architecture of the example. Basically we run one container for the Mongo database, one for the redis store and multiple containers for the Rails application and the Workers (Sidekiq). On top of that is the Nginx load balancer container that acts as a reverse proxy for the rails containers.

Architecture diagram

Publish a Website in a day using HTML and Ruby

17 Feb 2016

This is a guest blog post by Rosario Rascuna, a freelance web developer and Clojure consultant in London. Rosario has worked with several startups in Brighton and London, he's the developer of the London Startup Map - Roundabout.io . You can follow him on Twitter @_sarhus.

Here's a quick and easy HTML and Ruby tutorial. You'll create a website using Sinatra, and it will be hosted on Heroku. Even if you are a complete beginner, it should take less than a day!

You won't understand everything we'll do in this tutorial, but the idea is to introduce you to some of the things that go into coding a simple website and putting it online.

Before getting started there are few things you need to install on your laptop:

THE BEGINNER’S GUIDE: Scraping in Ruby Cheat Sheet

16 Feb 2016

This is a guest post by Linda Haviv, a web development student and Community Engagement Producer at Fox News. This post originally appeared on Medium.

Web scraping is so cool but if you have never done it before you may not know where to begin… not to worry! The following is a beginner’s guide to web scraping in Ruby.

How to launch your startup on BetaList - 8 lessons from Learnetto

05 Feb 2016

Betalist gave us a nice boost of signups to our beta mailing list

Learnetto got featured on Betalist last week on Monday 1st Feb 2016 — http://betalist.com/startups/learnetto. It was a good experience for us and gave a much needed kickstart to our marketing.

Learnetto listing on Betalist

How I'm Learning to Market my startup from Justin Jackson's book

09 Nov 2015

I've been reading Justin Jackson's new book Marketing for Developers and finding it extremely useful to plan the marketing for Learnetto, a marketplace for courses on learning how to build and sell products online.

These are my notes:

First things first - I'm not reading this book cover to cover. I'm using it as a hands-on how to guide to do specific things. I've read lots of books and blog posts in the past but never really used the lessons. So this time, I'm focusing on doing stuff rather than just reading.

Things I've learned and implemented so far:

I put up a landing page with a Mailchimp mailing list signup form.
One thing I'm working on next is offering a free course as an incentive for signing up.
I've been promoting the landing page on Twitter (using both my personal and business accounts).
I made a Twitter card. FINALLY. After trying and failing 10 times, I did it. Twitter makes it unnecessarily hard to do this. So I had just given up on it. But Justin lays out the process for doing this clearly in his book. Most important thing to remember: you need to add a credit card to your account to use this feature, but you won't be charged unless you run an ad campaign.
I've started sharing my process - in this very note you're reading now!
I've added analytics tracking using Segment. Again, Justin describes how to do this in his book very clearly. With Segment set up, I was able to start sending my analytics data to Mixpanel and Intercom.