# data[].attributes.headline
How to deploy create-react-app to Heroku - YouTube

# data[].attributes.subject
How to deploy create-react-app to Heroku - YouTube

# data[].attributes.attachment_link.title
How to deploy create-react-app to Heroku

# data[].attributes.headline
Epoch Converter - Unix Timestamp Converter

# data[].attributes.subject
Epoch Converter - Unix Timestamp Converter

# data[].attributes.attachment_link.title
Epoch Converter - Unix Timestamp Converter

# data[].attributes.attachment_link.description
Easy epoch/Unix timestamp converter for computer programmers. Includes epoch explanation and conversion syntax in various programming languages.

# data[].attributes.attachment_link.description
A customizable countdown component for React.

# data[].attributes.headline
Surge VS GitHub Pages: How to deploy a create-react-app project

# data[].attributes.subject
Surge VS GitHub Pages: How to deploy a create-react-app project

# data[].attributes.attachment_link.readable_text
As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you'll want to get projects up on the web, where people can actually use them.

Too many times have I started something locally and never seen it through. You may have done the same. One reason this is so common is because of all the extra work that goes into deployment.

Wouldn't it be nice to have a central hub where all of your projects live without worrying about hosting and server configuration? This post will walk you through two popular deployment tools that require a minimum amount of effort.

create-react-app

Before you get started, let me tell you about my new best friend, create-react-app. If you've been thinking of learning React - but are taken back by the amount of time it requires to get a project up and running - this command line interface (CLI) tool is your saving grace. It will take care of most of the boilerplate you need to start a project.

To install it and create your first project, go into your terminal and run these commands:

npm install -g create-react-app

create-react-app <your project name>

Out of the box create-react-app comes with a few handy scripts that allow you to develop your project locally and deploy it afterwards. They can be found in the package.json file at the root of your project directory.

Use npm start to run your project locally while you develop it. Then use npm run build to prepare your project for deployment.

Surge.sh and GitHub Pages

Let's fast forward a bit. You've built a basic app and are ready to deploy it to the web.

There are many options in the realm of static site hosting platforms, but the two we'll be working with are Surge.sh and GitHub Pages.

Both of these platforms are powerful in their own right. Which one you use comes down to your situation. My goal is to give you a better understanding as to why these tools exist, and what you can do with them.

Also note that even though this post is all about publishing projects created with the create-react-app CLI, Surge and GitHub Pages will work with even the most basic of projects. You may be able to skip some of these steps if you aren't using React itself.

Surge.sh

Surge is a really awesome piece of software that I recently discovered from a thread on Reddit. At its core, Surge is a CLI that allows you to deploy your projects for free. And quickly, too. What makes Surge really stand out is its simplicity.

Let's walk through a simple example using create-react-app .

First, install the surge package globally:

npm install -g surge

Now that Surge has been installed on your machine, you need to prepare your project for deployment. I mentioned above that create-react-app has a script in package.json called build . This script essentially prepares the application for production by bundling and optimizing all of the code.

Run npm run build in your project's root:

npm run build

You should notice that a new folder has been created in the root of your project directory called build . This folder contains the production-ready application.

Excellent, you're almost finished. All that's left is to run the surge command in your project's root:

surge

If this is your first time running surge you'll be prompted to create an account. Add an email and password, then hit enter. You'll then see output similar this:

To deploy your project, Surge only needs two things from you:

1. The path to the project

2. The domain to host it on

Project path

You'll notice that the project pathfield in the terminal defaults to the root directory. Surge assumes that the whichever directory you're running the surge command in is the directory you wish to deploy. In your case, you need to point Surge to the build directory created when you ran npm run build .

If your project path is path/to/my-project, edit this to path/to/my-project/build. Once you've made this change, press enter to confirm.

Domain

After entering the project path, Surge will suggest a random domain to use. You can delete it and add your own domain if you wish. It just needs to have the .surge.sh extension at the end. The tool also allows for custom domains, which is really awesome.

Accept the suggested domain, or add your own (custom or random with correct surge extension), then hit enter.

That's all she wrote! Navigate to the domain in your browser and you should see your project up and running.

Note that if your application is using client-side-routing, Surge recommends you rename the index.html file in your build directory to 200.html before running the surge command. You can find out more information in the Surge documentation.

GitHub Pages

GitHub Pages makes it easy to turn GitHub repositories into full fledged static websites. Many organizations use this service to host their documentation and project demos, but you can use it for whatever you'd like.

Note that in order for this to work, your must first push the code to a repository on GitHub. If this sounds foreign to you, check out further documentation here.

If you've ever run npm run build using create-react-app before, then you may have noticed output that looks like this:

create-react-app comes with detailed documentation to help users publish their work using all sorts of tools. Here you can see real time terminal output instructing us on how to do so via GitHub Pages. Let's try it out.

Step 1

Edit package.json by adding a new field named homepage:

"homepage": "https://<github-username>.github.io/<project-repo>"

If your GitHub username is george-lucas, and your project's GitHub repository is SithJS, the value of the homepage field should be "https://george-lucas.github.io/SithJS".

Let's run npm run build again after the change:

Did you notice the new output above? The create-react-app CLI is walking us through the entire process. Pretty snazzy.

Step 2

Next you need to install the gh-pages plugin. This will allow us to publish to the gh-pages branch on GitHub straight from within the terminal:

npm install --save-dev gh-pages

gh-pages is a special branch that GitHub Pages uses to publish projects. The beautiful thing about it is that the branch lives in the same repository as your project's code, but doesn't affect the project itself.

Note that if you already have a gh-pages branch in your project's repository, it will update the branch accordingly. If the branch doesn't exist, it will create it on the fly.

Step 3

Add a new script to the scripts field inside package.json. Let's call the script deploy:

"deploy" : "npm run build&&gh-pages -d build"

And finally let's run it:

npm run deploy

npm run deploy will first build your project via npm run build. Then it will publish it to a gh-pages branch on GitHub via gh-pages -d build.

Step 4

We're almost done. Head to your project's repository settings on GitHub. In the GitHub Pages section, confirm that your project is set to use the gh-pages branch.

You can now navigate to the URL you entered in the homepage field of your package.json file, where you'll see your project has been deployed!

Note that - like with Surge - GitHub Pages also has trouble with client-side routing. create-react-app lists a few solutions in the documentation for GitHub Pages integration.

The winner

In all honesty, you can't go wrong with either of these options. They're both great. Let's recap some key features of each:

Surge

Minimal configuration to deploy a project

Makes no assumptions about technology used

Seamless integration with build tools such as Grunt and Gulp

Can be used as a development dependency when building your own tools

GitHub Pages

Keeps project code and webpage(s) housed in a single repository

Centralizes all projects underneath your <username>.github.io domain

Deploy from the command line or from your repository settings on GitHub

Works great with static site generators like Jekyll

Personally, I chose GitHub Pages for my most recent project because I already use GitHub on a daily basis and I like to keep everything centralized. Maybe it's my OCD talking, but I love having individual GitHub repositories for projects that I can deploy as a subdomain of jake-wies.github.io.

If you're simply creating a test project, or you want to show a demo to a client, using Surge's super-fast CLI to generate a webpage is hard to pass up. You can generate the domain quickly and tear it down afterwards.

At the end of the day, the best tool for the job is the one that makes you productive. The information I've provided should give you a good understanding of where each shines. Audit your project needs and choose which is right for you.
Thanks for reading! I'm a self-taught developer & spend most of my free time diving into front-end tools and writing my way out. Reach out to me on if you have any questions!

# data[].attributes.attachment_link.title
Surge VS GitHub Pages: How to deploy a create-react-app project

# data[].attributes.attachment_link.description
As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you'll want to get projects up on the web, where people can actually use them.

# data[].attributes.headline
Deploy a React App as a Github User Page with Yarn - DEV Community 👩‍💻👨‍💻

# data[].attributes.subject
Deploy a React App as a Github User Page with Yarn - DEV Community 👩‍💻👨‍💻

# data[].attributes.attachment_link.readable_text
JavaScriptErika May 29
tldr; see Solution
I've been working on redoing my portfolio site, it's still a WIP - that being said here it is so far. I need to polish my portfolio section functionality in mobile view and some other tasks, and I need to refactor the code yet. I'd say it's about 90% done.

It needed a huge change from what it originally was to better reflect my skills since last year. I'm thinking a new redesign every year or so is a good time to keep reiterating and updating a portfolio. I went from using Foundation and jQuery to React, Flexbox, and p5js!

Speaking of React, before I began my portfolio, I wanted to make sure I could easily publish my project as a Github User Page! You know the one's where you can access a site as: https://yourUserName.github.io/ as opposed to a Project Page: https://yourUserName.github.io/yourProjectRepo. I always get the naming of those confused and forget them. Thankfully you can deploy as a user page or project page with the gh-pages package!

I got to the point of needing to test my site on mobile and had to do some digging around to find out how to deploy a create-react-app project as a User Page. If you're looking to deploy a Project Page with via create-react-app, check this documentation out here - there are a few subtle differences between deploying as a user page and project page that aren't completely covered for a project page.

I made the mistake of going through the above steps, not realizing there would be differences. I deployed my project!! My project was not showing up on https://javascripterika.github.io/, and my master branch had all of the build code. I wanted to push changes to my master branch, but of course, I'm not going to pull in the build code with 5k changes, and I can't push changes without pulling. Whoa, and now I have a random gh-pages branch? And my master is just showing up as all HTML (that big long red bar). WTF! Noooooo! Where is my JavaScripts??! 😭

The Solution
This tutorial assumes you have a working project and created your repo as username/username.github.io, are using create-react-app, and yarn
While in the current directory of your project:
$ yarn add gh-pages
In your package.json file, add

"homepage": "https://yourUserName.github.io/",

I added this right above "dependencies"

Still in your package.json file, add the following INSIDE of "scripts":

"predeploy": "yarn run build", "deploy": "gh-pages -b master -d build",

Next, let's create a new branch...since master will contain our build files pretty soon and minifiy, bundle and get weird, we need a new branch that will serve as our source code - so we can make changes and we don't lose our beautiful human-able readable code.

While in the master branch, let's create our source branch... you can name it whatever you want.

$ git checkout -b source
$ git push origin source

Yay! Our source branch is a direct copy of our master. Now, on Github we need to update our Default branch, master, to our source branch...and that's also why we pushed it (so Github knows it exists).

Navigate to your repo on Github, and select "Settings".
On the left-side panel, click on "Branches".
Next, you're able to select your source branch and update it under the Default branch heading.

Now while you're in your source branch via your terminal, run:
$ yarn deploy
AND! That's it! Your master branch will contain the build code. Give it a couple of minutes and visit your site at https://yourUserName.github.io/

Making Changes

Let's say you want to make changes, your source branch acts like your master. So branch away using source, and merge your branches into source as needed. Other than what's mentioned below, you don't need to do anything else with master now.

Let's say I make some "testing" changes in source. I push it as usual to github:
$ git push origin source
Switch to master in the terminal, git merge source or whatever branch you want, switch to your source branch and and run:
$ yarn deploy
There you go! Those changes are published and deployed.

A Quick SideNote

I ended up deleting my gh-pages branch and retried the deploy, and it works just fine! I no longer have the big red bar of HTML as my Default branch is source and my changes work! All is good with the world now!

If a gh-pages branch is created via Github after you deploy, go ahead and delete it! According to Github, "User pages must be built from the master branch." If you navigate to your repo under Settings, and scroll down to the "Github Pages" section, you will see a grayed out option there under Source!

Update and Edit 5/30

I was working on my project and realized a MAJOR issue! More than likely MOST of us will use the user page as a portfolio page and link to our project pages via Github.

If you are using React Router, the Service Worker will cache your project pages & they won't direct correctly (all of my project pages appeared as a blank page a part of my portfolio only with its menu)...this will happen whether or not you click on the links to your project pages in your app or copy and paste it in your browser. Even if you do not use a project page in your user page, it will still be affected!

To fix this, you have to delete the service worker file and any references to it in your index.js file... & remember to clear your browser cache (a hard refresh doesn't suffice).

# data[].attributes.attachment_link.title
Deploy a React App as a Github User Page with Yarn

# data[].attributes.attachment_link.description
tldr; see Solution I've been working on redoing my portfolio site, it's still a WIP - that being said here it is so far. I need to polish my portfolio section functionality in mobile view and some other tasks, and I need to refactor the code yet. I'd say it's about 90% done.

# data[].attributes.headline
Date.prototype.toISOString() - JavaScript | MDN

# data[].attributes.subject
Date.prototype.toISOString() - JavaScript | MDN

# data[].attributes.attachment_link.description
The toISOString() method returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always zero UTC offset, as denoted by the suffix "Z".

# data[].attributes.attachment_link.description
The getUTCMinutes() method returns the minutes in the specified date according to universal time.

# data[].attributes.attachment_link.description
npm install moment --save yarn add moment Install-Package Moment.js spm install moment --save meteor add momentjs:moment bower install moment --save

# data[].attributes.headline
Different Types of Insulin | Joslin Diabetes Center

# data[].attributes.subject
Different Types of Insulin | Joslin Diabetes Center

# data[].attributes.attachment_link.title
Different Types of Insulin | Joslin Diabetes Center

# data[].attributes.attachment_link.description
Learn about the different types of insulin for people with diabetes, including rapid-acting, short-acting, intermediate-acting & long acting insulin.

# data[].attributes.attachment_link.description
A segment is used to create a grouping of related content

# data[].attributes.attachment_link.description
A transition is an animation usually used to move content in or out of view

# data[].attributes.headline
Build A Pomodoro Timer with Vue.js (Solution to Code Challenge #6) ― Scotch

# data[].attributes.subject
Build A Pomodoro Timer with Vue.js (Solution to Code Challenge #6) ― Scotch

# data[].attributes.attachment_link.readable_text
Tried the code challenge #6? Last week, we put out the challenge to build a Pomodoro timer using any tool or technology.

You can check out the amazing entries for the challenge using the hashtag #scotchchallenge on twitter on in the comment section under the challenge's post. In this post, we shall be solving the challenge using Vue.js

Vue is a progressive JavaScript framework for developing interactive user interfaces. Vue offers the ease to manipulate DOM elements as well as apply methods to these elements, seamlessly.

The base code provided consists of HTML and CSS code to structure and style the timer in its default state.

HTML

The HTML structure of the timer is divided into several parts for clarity and better control. The parts are the body, the timer numbers, and the timer control buttons.

First, we create the display text on the timer and the timer numbers with:

Next, we include the buttons for control with:

CSS

Basic CSS was used to style the timer. Bulma and Fontawesome were imported as external sheets to the pen. The timer was styled with:

We are required to countdown the time from 25minutes 00seconds. To implement this dynamism, Vue was required to manipulate the timer values as well as implement the controls of pause, play, and restart on the timer.

First, we create a new Vue instance and mount it on the DOM element with the id of app, using the Vue property, el. In the Vue instance, we also define the required lifecycle methods and properties.

The data property holds the state data as well as dynamic data we would like to pass into the DOM. The methods property contains all methods required by the timer, this property will hold the controls of the timer. Many times we would like to perform further manipulation on the items in the data property before using them elsewhere in an application, the computed property holds all manipulated data.

The Data

In the data object, we created all the basic data required by the timer as well as the timer state.

totalTime which is the total time to be run by the timer in seconds will be further split into minutes and seconds. The timer property holds the state of the timer and resetButton holds the state of the reset button with which we can toggle the button. The title property is used to dynamically set the display text above the timer.

The Methods

We configure the timer controls in the methods object with:

Each timer method makes use of the state values in data to create actions on the timer. A setInterval() function starts the timer and calls the countdown method which in turn decrements the total time every 1000milliseconds (1 second). The stopTimer methods employs a clearInterval() function to stop the timer currently running.

The resetTimer method simply returns the total time on the timer to its initial value, stops the timer from running and removes the reset button (obviously isn't needed anymore). To make the timer look better, we introduce a padTime function which includes a leading zero (0) to either the second or the minute value once it is less than 10.

In the computed property, we calculate the value of minutes and seconds from the totalTime. This value of minutes and seconds will be passed to the DOM.

So far we have created all the required variables, state values, and methods for controls. Vue provides a clear way to pass this data into the DOM using handlebars-like syntax. We pass in the minutes and seconds variable with:

We currently have three buttons in place, but not all should display at once. We would display the reset button and either of the pause and play button at any time. To achieve this, we conditionally render the buttons with respect to the state of the timer, using the v-if Vue directive.

The conditional v-if directive renders the button element if its assigned value resolves to either true or false depending on which is chosen. This value is set dynamically with Vue. The @click directive (short for v-on:click) triggers the assigned method when clicked.

To make the timer more fun, and of course, inspiring, we dynamically set the text above the timer to change with each state of the timer. We already set this text using Vue in the data property. We then proceed to change the value of this text once a method is triggered. Just to stress more on setting DOM values with Vue, in the methods property we have:

Notice how this.title changes with each method.

You can see the final product here https://codepen.io/Chuloo/pen/xWVpqq

Pomodoro timers are great for productivity, in this challenge we built out one using Vue. We also demonstrated several features that makes Vue interesting, including Vue's lifecycle methods and properties. Feel free to leave your comments under this post and let's look forward to the next challenge. Happy coding!

# data[].attributes.attachment_link.title
Build A Pomodoro Timer with Vue.js (Solution to Code Challenge #6)

# data[].attributes.attachment_link.description
Tried the code challenge #6? Last week, we put out the challenge to build a Pomodoro timer using any tool or technology. You can check out the amazing entries for the challenge using the hashtag #scotchchallenge on twitter on in the comment section under the challenge's post.

# data[].attributes.attachment_link.description
Contribute to matt-mcalister/hashketball-returns development by creating an account on GitHub.

# data[].attributes.attachment_link.description
A menu displays grouped navigation actions

# data[].attributes.attachment_link.description
A tab is a hidden section of content activated by a menu

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.attachment_link.description
A table displays a collections of data grouped into rows

# data[].attributes.headline
HIPAA to Postgres - Data Extraction and Loading Instructions

# data[].attributes.subject
HIPAA to Postgres - Data Extraction and Loading Instructions

# data[].attributes.headline
Progressive Web Apps  |  Web  |  Google Developers

# data[].attributes.subject
Progressive Web Apps  |  Web  |  Google Developers

# data[].attributes.attachment_link.readable_text
We want to hear from you! We are looking for web developers to participate in user research, product testing, discussion groups and more. Apply now to join our WebDev Insights Community.

Websites that took all the right vitamins.

# data[].attributes.attachment_link.description
We want to hear from you! We are looking for web developers to participate in user research, product testing, discussion groups and more. Apply now to join our WebDev Insights Community. Websites that took all the right vitamins.

# data[].attributes.headline
What is Mobile First Design? Why It’s Important & How To Make It?

# data[].attributes.subject
What is Mobile First Design? Why It’s Important & How To Make It?

# data[].attributes.attachment_link.readable_text
On the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward that designers should follow the "mobile first" rule in product design. What does "mobile first design" mean? Why is it important? How to make it? I'll answer these 3 questions in the following part.

What is Mobile First Design?

To understand the concept of mobile-first design better, you should know the two phrases below first.
1. Responsive Web Design (RWD)
Responsive web design is a web design method that enables web to fit the screens of different devices automatically, displaying the content in a way that people feel comfortable. This greatly reduces users' operations like panning, zooming and scrolling when browsing the web.
2. "Progressive Advancement" & "Graceful Degradation"
These two concepts were put forward before responsive web design. In order to make web or application interface display reasonably on different devices, designers provide customized versions of product for different ends.

Progressive Advancement means that when we design a product, first we build a version for the relatively lower browser (like that on a mobile phone). This version includes the most basic functions & features. After that, we tend to the advanced version for a tablet or PC, which is created by adding interactions, more complicated effects, etc. on the basic version for a better user experience.

"Graceful Degradation", on the contrary, starts the product design from an advanced end like desktop and builds a version with well-rounded features at the beginning. Then designers make the product compatible with mobile ends by cutting some functions or contents.

Progressive Advancement has won the game for now as far as I can see. If UI/UX designers start a product design with its desktop version, they will inevitably want to make use of most of the advantages of the advanced end. For example, the hover effect which is supported by a cursor mouse; HD images & complex charts which can display normally only when there is a recent bandwidth. In this way, the designers will make efforts to complete an amazing desktop version and only to find it can hardly be adopted on a mobile end unless they give up a lot of beautiful ideas. If so, the mobile end version will be more like an afterthought, an incomplete product which's been watered down.

But if we take the mobile end product design as a starting point, under the restrictions like bandwidth, screen size and so on, designers will naturally seize the key points of a product, head for a lean & neat product with prioritized features. When the platform is expanded to a tablet or PC, designers are able to take advantages of the unique features of these advanced ends to strengthen the product step by step. This might be the main reason that progressive advancement strategy is widely used.

You may ask, why do you spend so much time on explaining the two concepts? The answer is that "mobile first" is exactly a rule of "progressive advancement".

"Mobile first", as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.

Why "Mobile First" Principle Is So Important in Product Design?

Except for the victory of progressive advancement against graceful degradation as mentioned above, we have more tangible reasons to believe that mobile-first principle is important in product design. That is, the exploding of mobile use.

1. Mobile internet usage has surpassed desktop usage in 2016.

2. People have spent more and more time on the internet from mobile ends.

3. Early in 2012, smartphone sales have overtaken PC sales.

The exploding of mobile ends urges designers to pay attention to the mobile end and follow the "mobile first" rule in product design.

How to Practice "Mobile First" Rule in Product Design?

The key to mobile first principle is, in fact, a content-centered mind.

The following part will explain the advancement of a product from a mobile phone end to a PC end.

Let's make an application for hotel booking. We first sort the content of the site by importance:

* Website name

* Hotel (Domestic Hotel, Foreign Hotel, Hour Room, Special Hotel)

* Time selector (check-in time, departure time)

* My Order

* Customer service

* Promotion & Advertising

Then we get a mobile end version like this:
Hotel Booking App - Created with Mockplus
Domestic, foreign hotels and time selectors are the most important content. They are located in the most prominent part of the interface.

By adding more features on the mobile version and enlarging the promotion & advertising displaying area we get a desktop version like this:

In this way, designers are able to create a product for multiple ends in a smooth and efficient way instead of ruthlessly removing those good features to get an afterthought.

In short, the "mobile first" principle has an important role in product design. On the one hand, it helps to save product design time and improve designers' productivity. On the other hand, it forces designers to pay more attention to the content of a product, which helps them to created neat and practical designs. However, as smartphones become more and more powerful, the mobile end might no longer be considered as "lower ends" in the near future, so the "move first" may not be an everlasting topic. But for now, its place in product design cannot be ignored.

# data[].attributes.attachment_link.title
What is Mobile First Design? Why It's Important & How To Make It?

# data[].attributes.attachment_link.description
On the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward that designers should follow the "mobile first" rule in product design. What does "mobile first design" mean? Why is it important? How to make it? I'll answer these 3 questions in the following part.

# data[].attributes.headline
A guide to Git branching | Opensource.com

# data[].attributes.subject
A guide to Git branching | Opensource.com

# data[].attributes.attachment_link.readable_text
In my two previous articles in this series, we started using Git and learned how to clone, modify, add, and delete Git files. In this third installment, we'll explore Git branching and why and how it is used.

Picture this tree as a Git repository. It has a lot of branches, long and short, stemming from the trunk and stemming from other branches. Let's say the tree's trunk represents a master branch of our repo. I will use master in this article as an alias for "master branch"-i.e., the central or first branch of a repo. To simplify things, let's assume that the master is a tree trunk and the other branches start from it.

Why we need branches in a Git repo

The main reasons for having branches are:

If you are creating a new feature for your project, there's a reasonable chance that adding it could break your working code. This would be very bad for active users of your project. It's better to start with a prototype, which you would want to design roughly in a different branch and see how it works, before you decide whether to add the feature to the repo's master for others to use.

Another, probably more important, reason is Git was made for collaboration. If everyone starts programming on top of your repo's master branch, it will cause a lot of confusion. Everyone has different knowledge and experience (in the programming language and/or the project); some people may write faulty/buggy code or simply the kind of code/feature you may not want in your project. Using branches allows you to verify contributions and select which to add to the project. (This assumes you are the only owner of the repo and want full control of what code is added to it. In real-life projects, there are multiple owners with the rights to merge code in a repo.)

Adding a branch

Let's go back to the previous article in this series and see what branching in our Demo directory looks like. If you haven't yet done so, follow the instructions in that article to clone the repo from GitHub and navigate to Demo. Run the following commands:

The pwd command (which stands for present working directory) reports which directory you're in (so you can check that you're in Demo), git branch lists all the branches on your computer in the Demo repository, and ls -la lists all the files in the PWD. Now your terminal will look like this:

There's only one file, README.md, on the branch master. (Kindly ignore the other directories and files listed.)

Next, run the following commands:

The first command, git status reports you are currently on branch master, and (as you can see in the terminal screenshot below) it is up to date with origin/master, which means all the files you have on your local copy of the branch master are also present on GitHub. There is no difference between the two copies. All commits are identical on both the copies as well.

The next command, git checkout -b myBranch, -b tells Git to create a new branch and name it myBranch, and checkout switches us to the newly created branch. Enter the third line, git status, to verify you are on the new branch you just created.

As you can see below, git status reports you are on branch myBranch and there is nothing to commit. This is because there is neither a new file nor any modification in existing files.

If you want to see a visual representation of branches, run the command gitk. If the computer complains bash: gitk: command not found..., then install gitk. (See documentation for your operating system for the install instructions.)

The image below reports what we've done in Demo: Your last commit was Delete file.txt and there were three commits before that. The current commit is noted with a yellow dot, previous commits with blue dots, and the three boxes between the yellow dot and Delete file.txt tell you where each branch is (i.e., what is the last commit on each branch). Since you just created myBranch, it is on the same commit as master and the remote counterpart of master, namely remotes/origin/master. (A big thanks to Peter Savage from Red Hat who made me aware of gitk.)

Now let's create a new file on our branch myBranch and let's observe terminal output. Run the following commands:

echo "Creating a newFile on myBranch" > newFile
 cat newFile
 git status

The first command, echo, creates a file named newFile, and cat newFile shows what is written in it. git status tells you the current status of our branch myBranch. In the terminal screenshot below, Git reports there is a file called newFile on myBranch and newFile is currently untracked. That means Git has not been told to track any changes that happen to newFile.

The next step is to add, commit, and push newFile to myBranch (go back to the last article in this series for more details).

git add newFile
 git commit -m "Adding newFile to myBranch"
 git push origin myBranch

In these commands, the branch in the push command is myBranch instead of master. Git is taking newFile, pushing it to your Demo repository in GitHub, and telling you it's created a new branch on GitHub that is identical to your local copy of myBranch. The terminal screenshot below details the run of commands and its output.

If you go to GitHub, you can see there are two branches to pick from in the branch drop-down.

Switch to myBranch by clicking on it, and you can see the file you added on that branch.

Now there are two different branches; one, master, has a single file, README.md, and the other, myBranch, has two files.

Now that you know how to create a branch, let's create another branch. Enter the following commands:

git checkout master
 git checkout -b myBranch2
 touch newFile2
 git add newFile2
 git commit -m "Adding newFile2 to myBranch2"
 git push origin myBranch2

I won't show this terminal output as I want you to try it yourself, but you are more than welcome to check out the repository on GitHub.

Deleting a branch

Since we've added two branches, let's delete one of them ( myBranch) using a two-step process.

1. Delete the local copy of your branch: Since you can't delete a branch you're on, switch to the master branch (or another one you plan to keep) by running the commands shown in the terminal image below:

git branch lists the available branches; checkout changes to the master branch and git branch -D myBranch removes that branch. Run git branch again to verify there are now only two branches (instead of three).

2. Delete the branch from GitHub: Delete the remote copy of myBranch by running the following command:

git push origin :myBranch

The colon (:) before the branch name in the push command tells GitHub to delete the branch. Another option is:

git push -d origin myBranch

as -d (or --delete) also tells GitHub to remove your branch.

Now that we've learned about using Git branches, in the next article in this series we'll look at how to fetch and rebase branch operations. These are essential things to know when you are working on a project with multiple contributors.

# data[].attributes.attachment_link.description
In my two previous articles in this series, we started using Git and learned how to clone, modify, add, and delete Git files. In this third installment, we'll explore Git branching and why and how it is used. Picture this tree as a Git repository.

# data[].attributes.attachment_link.description
Contribute to learn-co-students/dumbo-web-082718 development by creating an account on GitHub.

# data[].attributes.attachment_link.readable_text
Click here to download HIPAA Compliance Checklist
(0.7MB, PDF document)

Compliancy Group's software and compliance coach guidance allow you achieve, demonstrate, and maintain your HIPAA compliance no matter your organization's size or level of expertise.
Get HIPAA Compliant Today!
What The Compliancy Group Customers Say

"Compliancy Group walked us step by step through the process of becoming HIPAA compliant. What was once scary and overwhelming became doable with a coach to help us along the way. We love the peace of mind that comes from knowing that they are here to help us REMAIN compliant into the future."
Shantel S, Jackson Eye Care
"Unbelievably thorough approach to the minefield of HIPAA regulations that no provider can possibly be adequately aware of. I have been well educated, and now well covered, in just a few weeks. Do yourself this favor."
Stevin M, West Valley Optometry, Inc
"HIPAA has been an overwhelming and stressing issue for me. The Guard has relieved that. My training coach, was very knowledgeable and walked me through every step and answered all my questions. I now have a better understanding of HIPAA as well as my staff and have the confidence I have been looking for. I would highly recommend The Guard because you have someone working along side you and not just supplying templates to customize to your office."
Beth S, Skiba Vision Center
"Our office was so far from being HIPAA compliant. The Guard took care of all of our deficiencies. Our consultant was a wealth of knowledge, and no question I asked was ever too dumb. Thanks for helping us out!"
Jennifer B, Texas Vein & Cosmetic Specialists
"I called The Guard because Torrey Pines Dermatology was audited by a firm for CMS. Our representative has literally walked us through this process. I was very intimidated by the whole process to begin with but now I have full confidence that we could pass any audit!"
Kelley Y, Torrey Pines Dermatology
"I was looking for an informed source that could help me keep track of all the regulations and information that I am being mandated to track. The Compliancy Group (The Guard) was the right choice in helping me weed through the complicated mandates, allowing me to track employee education and create action plans and a guide to follow. They also provided me with an EDUCATED Compliance person to help guide me through the process. It was a "no brainer" and immediate decision for me to make. I believe we all want to be compliant but often the Government just bogs us down with RED TAPE and makes it impossible. The Compliancy Group and The Guard was the answer I was looking for!"
Lorrie, Choctaw Family Medicine & Aesthetics Get HIPAA Compliant Today!

# data[].attributes.attachment_link.description
Facebook Twitter LinkedIn Sponsored by The Compliancy Group Click here to download HIPAA Compliance Checklist (0.7MB, PDF document) Compliancy Group's software and compliance coach guidance allow you achieve, demonstrate, and maintain your HIPAA compliance no matter your organization's size or level of expertise. Get HIPAA Compliant Today!

# data[].attributes.attachment_link.readable_text
You're going to be building a SPA or *S*ingle *P*age *A*pplication. Your frontend will be built with HTML, CSS, and JavaScript. You will also be tasked with constructing your own backend API built with Ruby on Rails. The frontend application will communicate with the backend by making requests and receiving responses. This is a really exciting moment, the whole course up until this point is coming together!

Building out each feature you want for your application will be challenging, but you all are awesome and can do it. Remember to build iteratively and begin with a clear picture of an MVP.

Requirements

1. Must be a HTML/CSS/JS frontend with a Rails API backend. These should live in two separate repositories. All interactions between the client and the server should be handled asynchronously (AJAX).

2. Must render out a resource with at least one has-many relationship (that's two resources total) in the JSON.For example, if we were building Instagram, we might display a list of photos with associated comments. Both resources should be editable.

3. Must use your Rails API and a form generated by the client to create a resource and render the response without a page refresh. For example, if you create a new Photo post, and form data would be serialized, and submitted via an AJAX POST request, with the response being the new object in JSON and then appending that new photo to the DOM using JavaScript (ES6 Template Literals, can help out a lot with this).

4. No user authentication with passwords. When the page refreshes the current user will effectively be signed out. The way you learned this in the previous module relied on the fact that Rails was sending small pieces of data (cookies/sessions) back and forth along with every request and response. Now, we have two separate applications and need to use a slightly different pattern. We'll look at patterns for dealing with client-side auth later in the semester, so you'll have plenty of time to deal with this case.

If your application requires a user model you can have users "sign in" or "sign up" by providing a username and/or email, but hold off on passwords for now.

jQuery is often helpful to use for DOM traversal and DOM manipulation and you are welcome, though not required, to use it. Remember that what you can do with jQuery you can do with vanilla JavaScript ( You Might Not Need jQuery ) if often a little less elegantly.

Having said that we require that you use fetch and not $.ajax, $.get etc. Fetch is built into JavaScript now and you should get used to using it and dealing with some of its quirks! Going forward, we don't want you to get the wrong idea that you need to import the entire jQuery library to make a single AJAX request.

Example Project Setup

This repository goes through the first few steps of setting up an example project for both the frontend and backend applications. Please spend some time looking through this before getting started. If your question (ex: "How do i set up the rack-cors gem?") can be answered by reading this repository, you will be directed there.

# data[].attributes.attachment_link.description
You're going to be building a SPA or *S*ingle *P*age *A*pplication. Your frontend will be built with HTML, CSS, and JavaScript. You will also be tasked with constructing your own backend API built with Ruby on Rails. The frontend application will communicate with the backend by making requests and receiving responses.

# data[].attributes.headline
ISO, SOC, HIPAA, PCI Compliance | Heroku

# data[].attributes.subject
ISO, SOC, HIPAA, PCI Compliance | Heroku

# data[].attributes.attachment_link.title
ISO, SOC, HIPAA, PCI Compliance | Heroku

# data[].attributes.attachment_link.description
Learn more about Heroku's compliance programs and standards-based certifications, such as PCI, HIPAA, ISO, and SOC.

# data[].attributes.headline
How DHH organizes his Rails controllers - Jerome's Adventures in Software

# data[].attributes.subject
How DHH organizes his Rails controllers - Jerome's Adventures in Software

# data[].attributes.attachment_link.readable_text
What I've come to embrace is that being almost fundamentalistic about when I create a new controller to stay adherent to REST has served me better every single time. Every single time I've regretted the state of my controllers, it's been because I've had too few of them. I've been trying to overload things too heavily.

So, in Basecamp 3 we spin off controllers every single time there's even sort of a subresource that makes sense. Which can be things like filters. Like, say, you have this screen and it looks in a certain state. Well, if you apply a couple of filters and dropdowns to it, it's in a different state. Sometimes we just take those states and we make a brand new controller for it.

The heuristics I use to drive that is: whenever I have the inclination that I want to add a method on a controller that's not part of the default five or whatever REST actions that we have by default, make a new controller! And just call it that.

So let's say you have an InboxController and you have an index that shows everything that's in the inbox; and you might have another action where you go like "Oh I wanna see like the pending. Just show me the pending emails in that or something like that". So you add an action called pendings:

That's a very common pattern right? And a pattern that I used to follow more.

Now I just go like "no no no". Have a new controller that's called Inboxes::PendingsController that just has a single method called index:

And what I found is that the freedom that gives you is that each controller now has its own scope with its own sets of filters that apply [...].

So we've had great controller proliferation and especially controller proliferation within namespaces. So let's say we have a MessagesController and below that controller we might have a Messages::DraftsController and we might have a Messages::TrashesController and we might have all these other subcontrollers or subresources within the same thing. That's been a huge success.

Amen.

So basically he says that controllers should only use the default CRUD actions index, show, new, edit, create, update, destroy. Any other action would lead to the creation of a dedicated controller (which itself only has default CRUD actions).

What I think about it

From now on the following opinions are my own. Different opinions are totally OK. Just saying, before you call me a pontificating zealot. Calm down guys!

Anyways, I was happy to learn that I have been using "the DHH way" to organize controllers for more than a year now #DHHFanboy. The examples he mentions are only about filtering though, and are probably overkill for simple controller logic. A common way to filter in REST is by using query parameters (e.g. GET /inboxes?state=pending), so I would stick to that when the code is short and simple (once it gets long or complicated or there are too many mixed actions/concerns, I would do the same as him).

But I totally agree with the general idea of splitting controllers. I like it for several reasons.

It encourages you to produce simpler code

With this technique you can create as many controllers as you want.
Use your judgment though: If the controller only has default CRUD actions and is relatively short/simple (like the ones scaffolded by Rails), there is probably no need to prematurely extract each index/ show/etc into their own controller.

Where the controller splitting technique becomes very cool is when the controller is getting heavier, even when it has only default CRUD actions. What to do then? Well, just put the heavy code in its own dedicated controller!

For example, here is what our most complicated controller looks like at my current company (we are using "relatively skinny models and fat controllers" so YMMV). It allows you to purchase a product in the API part of our app:

There is only one public method (the default CRUD create action). No premature abstractions into fat models, no "service classes", no observers, no nothing, no bullshit. Everything is here, nicely contained in the controller. No need to jump between a dozen files to understand what is going on; you just need to open this one file in your code editor. And since controllers are the entry point for any web application code, you would open that file anyway when coding. #ObviousCode

But you may ask "Jeez, how long is that class since you dump everything in it? Surely it is very long, like a gazillion lines, right?" Nope. 144 lines.

And that's our most complicated controller. Like, the worst of the worst. We could arguably split its code into smaller chunks but it looks good enough to us (YMMV). The rest of our other "fat" controllers are much simpler: between 6 and 103 lines long, with an average of 15 lines of code per controller (we have about 150 controllers for now).

Remember the projects you worked on where controllers were 200+ lines long AND this was only a small portion of the code related to the request - the rest of it being scattered between a gazillion of service objects, observers, and models? This kind of shit doesn't happen here, mostly thanks to this controller splitting technique, among other easy things like the rule of 3. Indeed, duplication is far cheaper than the wrong abstraction, and it's one of the reasons why I think (like DHH) that DRY and SRP are crap and they are overrated and they shouldn't be an end in themselves and they suck balls and and and... Anywaaays, back to our topic!

It makes your code more uniform

Knowing that there can only be so many CRUD actions in a controller is quite cool. No more guessing/spelunking/endlessly scrolling in long controllers to find that one weird action. No more wondering how/if a custom controller method maps to a route.

I don't like to be surprised when doing mundane organization. I like uniform code, and heavy convention over configuration is one of the many reasons why I still prefer Rails compared to other Ruby frameworks. Everything is organized the same, so you spend less time making mundane decisions, and make faster progress in areas that really matter for the business.

In theory, it also means that you can move from one codebase to another and be 100% productive in a very short time. In practice people seem to encounter many "horrible Rails apps" in the wild. One company may use architectural patterns such as observers (not my cup of tea), another might use a whole additional architecture layer such as Trailblazer (not my cup of tea either but it has some interesting ideas), another company will use yet another tool, another one will use its own custom sauce, etc.

All of this because people seem uneasy and unhappy with the so-called "lack of structure" in vanilla Rails apps. So they look for additional structure elsewhere. Guys! The solution is right under your nose! Split your controllers, and only use the default CRUD actions. Simple as pie, and junior developer friendly.

Rails could possibly do a better job of promoting this controller splitting heuristics. Their doc only briefly says "[...] you should usually use resourceful routing [...]". But the idea of CRUD actions and RESTful routes has prominently been featured in their doc for ages. If you RTFM'ed, it has probably crossed your mind at least once that adding custom actions (apart from the CRUD ones) is not very "Rails way". Splitting controllers is a good answer to that uneasy feeling.

It makes you think in terms of REST

A lot of people like REST because it is uniform and simple. Once you understand a (truly) RESTful API, it is easier to understand another one. In theory at least: authentication anyone? ;-). The business logic obviously differs between applications so you have to understand it, but how you consume that logic is the same: you create a charge in Stripe (i.e. you take someone's money), you create an SMS in Twilio (i.e. you send it), you get a repository in Github, etc.

You have to bend your mind a little at first to use REST nouns instead of actions: you don't "pay", you "create a payment". You don't "add funds to your balance", you "create a fund in a balance". Et cetera. Maybe a bit weird at first, but I would pay this small price any day of the week rather than going back to SOAP, WSDL and all that jazz (ex-Java/JEE developers will know what I'm talking about).

As a bonus, I think that having your whole business logic interface (not necessarily implementation) dictated by REST makes for a cleaner and simpler business logic. You can only have objects with so many actions: no more, no less. Yet you know you can express anything with REST, and it will be sound and dependable. It is a liberating constraint.

Here are some example RESTful Rails routes that map to splitted controllers that only use CRUD actions.

For best REST design (especially when subresources are involved), I usually write down the REST action+resource first on a temporary note (example: POST /balance/funds) without worrying about the implementation. Then when I am happy with the naming, I translate it to a Rails route, which is trivial since Rails has very good REST support.

Wrapping up

Splitting your Rails controllers when they have a very specific scope, too much logic, or too many mixed concerns can have a lot of good side effects in your code.

It doesn't mean that you never abstract. It just comes later down the road. At some point some logic needs to be shared by several controllers. Sometimes even a splitted controller with only one public method gets too big. Et cetera. This is where concerns, model methods, possibly background jobs, and even sometimes service objects (hopefully not too many) come into play.

The more your app grows, the more time you will need to spend to understand it, no matter how clean the code is. But splitting your controllers makes things easier.

# data[].attributes.attachment_link.description
What I've come to embrace is that being almost fundamentalistic about when I create a new controller to stay adherent to REST has served me better every single time. Every single time I've regretted the state of my controllers, it's been because I've had too few of them.