Recent tutorials & articles

How to use Headless Wordpress with Next.js and GraphQL

Implementing the example

Setting up a new Rails project for testing

Takeaways

How let works and the difference between let and let!

The purpose of let and the differences between let and instance variables

Takeaways

Installing and Configuring VCR

Installing and Configuring WebMock

The feature

What we're going to do

Tutorial

Using VCR

Using WebMock

Introduction

What's next

Why I don't often use mocks or stubs in Rails

Mock example

Stub example

Example application code

The difference between mocks and stubs

Mock explanation

Stub explanation

Test doubles

The problem with testing terminology

Mocks and Stubs

What's next

When I use request specs and when I don't

What's next

Takeaways

The tutorial

Prerequisites

The tutorial

Why model specs are different from other types of specs

What a model is

Why I don't recommend Shoulda matchers

Meaningful model specs vs. pointless model specs

The purpose of model specs

The obscure test

A Page Object example

What a Page Object is and when it's helpful

The challenge of keeping test code clean

Finding content on the page

Interacting with forms

Clicking links and buttons

Navigation

Writing our integration tests

Setting up our Rails project

Tutorial overview

Updating a record

Trying to create a record with invalid inputs

Creating a record with valid inputs

The three integration test cases I write for any Rails CRUD feature

System Specs: Writing Specs for CRUD Features

Headless vs. not headless

Logging the user in before tests

RSpec + Capybara "hello world" revisited

Installing Capybara and related tools

The difference between system specs and feature specs

Why I recommend against using Cucumber

The tools that support system specs

When to write system specs

What system specs are

What this section will cover

When I use context

When I use describe

RSpec Syntax: Describe and Context

The implementation

The goal

What's next

Organizing our files

Step 1: expect

What we're going to do

What's next

The expect keyword

Specs, examples, "example groups" and "it blocks"

The example code

What we're going to do in this chapter

Coming back to the controller example

Why this example is meaningful

Writing our own block

RSpec Syntax: Understanding Blocks

A concrete example

The purpose of each test phase

RSpec Syntax: The Structure of a Test

RSpec Syntax: Introduction

Transient attributes

Callbacks

When to use traits versus nested factories

Traits

Nested factories

Introduction

Using Factory Bot with Faker

Build strategies

Configuring Factory Bot with RSpec

Factory Bot hello world

Where to put factory definitions

Factory definitions

Installing Factory Bot

Factories, fixtures and manual test data creation

What Factory Bot is

Overview

A Rails testing “hello world” using RSpec and Capybara

Overview

Adding tests to an existing project vs. starting fresh

The different kinds of RSpec tests and when to use each

Rails testing tools and how to use them

RSpec vs. Minitest: which framework to learn

Overview

Test-driven development (TDD) vs. testing without TDD

What level of test coverage to shoot for

How to make testing a habit

Overview

How to use this book

What's in this book

Who this book is for

Key information

How to use React inside Ruby on Rails

Code, resources and downloads

Creating a blog with Cookiecutter-Django & deploying it to Heroku

Learn to jumpstart a production-ready blog using the Cookiecutter-Django framework and how to deploy it to Heroku

Part VIII - Showing the data we created on the frontend

Now that we've created the data for our blog, we'll learn how to show it using the Django ORM in this chapter. Wait, what? O-R, what?

Part VII - Creating the data and fine-tuning the templates

Django follows the DRY principle of software development or the Don't repeat yourself principle, aiming to minimize writing code or repeating code.

Part VI - Testing our app using Unittests

"Code without tests is broken by design." - Jacob Kaplan-Moss

Part IV - Model Architecture Planning

It's good to visualize our models before defining them in our models.py for us to see how our model structure would be laid out. The figure below shows how we will determine the database of the blog we're building.

Part V - Creating the models.py, views.py, urls.py, admin.py & the superuser

It's good to visualize our models before defining them in our models.py to see how our model structure would be laid out. The figure below shows how we will determine the database of the blog we're building.

Part III - Creating the app for the blog

We'll create the app and name it main.

Part IX - How to deploy your Django app to Heroku for FREE

Learn how to deploy your Django app in 2 minutes. on Heroku.

Part II - Creating the Django blog project

A walk through on how to generate the a project

What is State?

What are Props?

What is JSX?

What is a React Component?

Why do we need React?

What is React?

In this lesson, we look at what React is, using a simple visual example.

Lifting state up

Handling form submissions in React

Adding a React form component to create new records

Adding a backend Event data model

Listing Events

Eventlite app components structure

Setting up the Eventlite app with webpacker

Creating a Rails API

Exercises for Styling React apps

What are React Hooks?

Testing React forms

Snapshot Testing React Components

How to test text and image elements in React components

How to test React apps

How to style your React app with Material UI

How to use Bootstrap with React (react-bootstrap)

Editing an event - Part 2

Editing a record - Part 1

React Router hooks

useEffect - The Effect Hook

useState - The State Hook

Deleting a record

Redirection

Viewing a single record on its own Route

Using Create React App to build a standalone frontend app

Typechecking With PropTypes

Generalised form validations - Part 2

Generalised Form Validations - Part 1

Basic React form validation in a Rails app

React Router Links for navigating between routes

Home and authentication routes

 Adding a Signup form

Displaying session data and signing out

API User authentication with devise_token_auth

Client-side form validation in Rails with React

Exercises for Rails API Authentication with React

Adding a Login form

Exercises for React Router

Controlled vs Uncontrolled Components - What are Refs?

Deploying your React Rails app to Heroku

Server side rendering (SSR) with React and Rails

Exercises for Testing React apps

React tests setup and teardown

Introduction to Styling React components

Exercises for React Hooks

Introduction to React Router

Linking the User and Event models

How to get help

What you'll learn in this course

Job sites

Resources - examples of resumes (CV), cover letter and job application tracker

How to build a chat app with Rails 5.1 ActionCable and React.js Part 2

In part 2 of the ActionCable and React tutorial, we’ll rebuild the frontend of a Rails 5.1 chat app using React components.

How to build a chat app with Rails 5.1 ActionCable and React.js Part 1

In the first part of this 2-part tutorial, learn how to build a chat app with Rails 5.1 and ActionCable. We'll use devise and Github omniauth for user authentication.

Fitness dashboard part 3

In Part 3 of the Fitness dashboard series based on the Fitbit API, we add some time series bar charts using the Recharts component library and a friends leaderboard.

Fitness dashboard part 2

In part 2, we display lifetime statistics and achievement badges from the Fitbit API. We use axios for fetching data and make use of class-based and stateless functional components.

Fitness dashboard Part 1

Learn to build a fitness dashboard app with the Fitbit API using a Rails 5.1 app with inbuilt React support. Connect to the Fitbit API, pull in user data and display it in a dashboard showing statistics and charts built with React components.

Using Redux with react_on_rails

In this lesson, we look at the example HelloWorld app that comes with the react_on_rails gem and see how Redux can be used in a simple React app.

Introduction to Redux

In this tutorial we look at Redux, one of the most popular libraries built on the Flux pattern.

Introduction to Flux

In this tutorial we look at the concepts behind the Flux pattern for building user interfaces.

CSS Animations and Transitions

In this lesson we’ll look at how to do simple CSS transitions in React.

Using Bootstrap with React

In this tutorial we look at how to use Bootstrap with React

Testing forms

Snapshot testing

Testing with Enzyme

Testing with Jest

Displaying session data and signing out

API User authentication with devise_token_auth

Porting React components from react_on_rails to React

Setting up a Rails API app and Create React App

Using Devise with React

Recap

Deleting a record

Editing a record - Part 2

Editing a record - Part 1

Keeping data fresh with componentDidMount

Navigating between routes

Viewing a record on its own route

Introduction to React Router v4

Refs

Typechecking With PropTypes

Generalised form validations

Client side validation errors

Refactor client side validations

Multiple field validations on client side

Code refactor and corrections

Client-side form validation in React

Basic form validation

Hot Module Replacement

Deploying to Heroku

Server-side rendering

Migrating the Calendar appointments app to react_on_rails

Introduction and setup of Webpack with react_on_rails gem

How to use React with the webpacker gem and Rails 5.1

Stateless Functional Components in React

ES6 Arrow functions in React

ES6 classes in React

Introduction to ES6 using the react-rails component generator

Deploying a react-rails app to Heroku

Styling with CSS in React

Using a third-party React component - react-datetime

Using a third-party JavaScript library - Moment.js

React State - Handling form submission

React State - Handling user form input

React props and nested components

Calendar appointments app with jQuery and Haml

Installation and setup of Rails 5 app with react-rails gem

Quick Introduction to key React concepts

The 11-minute guide to building and launching an online store with Rails, Stripe Checkout and Heroku

Learn to build and launch an online store in this 11-minute video tutorial. We will build a simple store which accepts payments through Stripe checkout.js and deploy it to Heroku.

Building your first React Rails app - Part 1

How to build a location based app in React Native - Part 1

How to animate a component using React Transition Group

Rails 5 API and React.js tutorial - How to make an Idea board app

Build an Idea board app with a Rails 5.1 API app and a separate frontend React app built using Create React App. The tutorial covers stateless functional components, class-based components, use of axios for making API calls, immutability-helper and more.