1. What Is Web Development?

Let me ask you some questions:

• Who borrows books from the library? 📚
• Who here likes playing games on a tablet or computer? 🎮
• Who watches YouTube videos? 📺

All of these things use websites and programs! My job is to help build websites and programs like the things you use every day.

A web developer builds things on the internet.

2. What Is Coding?

Coding is giving instructions to a computer.

Computers are very smart, but they can only do EXACTLY what we tell them. They can't guess what we mean!

Fun Example: Robot Brush Teeth Challenge 🤖

Imagine I am a robot 🤖 and you must tell me how to brush all his teeth for 5 times.

If you say: "Brush the robot's teeth!"

The robot will be confused! 🤷 How hard should I brush? Which tooth first? For how long?

But if you give clear instructions:

1. Pick up the toothbrush with your right hand
2. Pick up the toothpaste with your left hand
3. Squeeze a pea-sized amount of toothpaste on the brush
4. Start with the top-left tooth
5. Move the brush up and down 10 times
6. Move to the next tooth
7. Repeat for all teeth
8. Do this 5 times for each tooth
9. Rinse the toothbrush

Now the robot knows exactly what to do! ✅

That's coding. We write clear instructions so the computer knows exactly what to do.

3. What Does a Daily Workflow Look Like?

Building software is a team effort! Here's how a typical project works:

Step 1: Product Manager (PM) Gets Requirements 👔

The PM talks to clients or users to understand what they need. For example: "We need a button that lets users save their favorite videos."

The PM writes down all the requirements and shares them with the development team.

Step 2: Developers Code the Feature 💻

Developers (like me!) take the requirements and write code to build the feature. This includes:

• Designing how the button looks
• Writing code to make it work
• Testing it ourselves to make sure it works

Step 3: QA Tests the Code 🔍

QA (Quality Assurance) testers try out the new feature to find any bugs or problems. They check:

• Does the button work on all devices?
• What happens if someone clicks it really fast?
• Does it save the video correctly?

If they find bugs, they send it back to the developers to fix. If everything works great, the feature is ready to launch! 🎉

Summary

So a software engineer's job is:

1. Understand what people need
2. Write clear instructions (code) for the computer
3. Work with a team to build, test, and launch features
4. Help create the websites and apps people use every day!

It's like being a builder, but instead of building houses, we build things on the internet! 🏗️🌐

How to configure your Rails engine with Rspec, Capybara, and FactoryGirl

1. Run the follow lines to generate a mountable engine

1

rails plugin new ENGINE_NAME --dummy-path=spec/dummy --skip-test-unit --mountable

Recently, I build some Rails engines. And I found it’s a good way to organize and share reusable code across a number of applications.

Rails Engine is not like Ruby gem. It’s more like a rails app, it has its own controllers, views and migrations. And basically it has two type of engine, full or mountable.

I used to think cucumber for Rails is a little bit over kill for the developer. Because every time you have to write a lot of regular expression to work it out. But in the recently project, we use Capybara and poltergeist with RSpec to solve this problem. It even can test your SPA and integrate with CI very nicely.

Poltergeist is a driver for Capybara. It allows you to run your Capybara tests on a headless WebKit browser, provided by PhantomJS. So, what is headless? That means you don’t need to fire up your browser. What’s that mean? Fast!!

• Poltergeist is a wrapper for PhantomJS, so make sure your test env have that. If not brew install phantomjs in Mac.

• Travis CI and codeship has PhantomJS pre-installed.

Nowaday, all the code should be tested before shipped. But we are all human being, we make mistakes. Sometime you are thinking just one line of code, not a big deal, just push it. Unfortunately, that line of code cause errors. So, we need something to automate test our codes after we pushed it to verify our code pass all the test case or not. That’s why CI introduced.

And for CI, in my option, there are two kinds right now, one is Jenkins with docker(more manual) and one is Codeship/travis-ci(more automated).

Setup authentication with ng-token-auth and devise_token_auth

If you ever build a SPA app with authentication. The most hard part is keeping users sign-in when they’re coming back/refresh the browser.

So, how could this thing work out?

One possible method is update your header when the user signed in.

How to setup Angular with Rails

There are a lot of way you can integrate Angular with Rails, a common way is put Angular inside the Asset pipeline. It’s easy to integrate that way but the code base is quite mess at the later point. Recently, I found a way to use Yeomen generator and rails-api to work as front-end and back-end together.
Here’s some Pros and Cons for this way:

Pros:

• Separate struct and codebase for front-end and back-end
• Get rid of unused rails component like erb view template
• No more need to fresh for front-end change

Cons:

• have to deal with csrf token
• need to setup the proxy
• hard to deploy

If you ever work with Rails and TDD, you may hear Factory girl: a great data mock gem to replace fixture. But sometime when your modal have some association with other modals, and that model have other associations, try to write a factory with callback (after build/create) become so hard. But thanks to thoughtbot, factory girl have data association build-in. You can read this post.

Hexo images hosting

After using couple month using Hexo, I found it’s fun and easy to use for logging technology/problem solutions. But the image system still not so great like other blog systems. But it’s 2014 now, there’s a lot of alternate ways to find a free image hosting service like Tumblr.

In my blog, I use tumblr as the image hosting system.