Creating a custom To-Do List Chrome extension using React with Typescript is probably easier than you think.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*0LU7KBpzYt8e90HxkNPWZw.png"><figcaption>Typescript and React</figcaption></figure>TLDR; Find the full code <a href="https://github.com/alexwasik/todo-chrome-extension">here</a>.
I know… I know. Another To-Do App?
Personally, I feel like to-do apps are a great way to try a new thing. In this tutorial, we’ll be making a Chrome Extension in React using Typescript and <a href="https://ant.design/">Ant Design</a> for the UI. Ant Design might seem a little heavy handed for such a small UI but it’s one of my favorites. It has so many customization options and components. Realistically, after this tutorial, you could build out additional features for this extension using Ant Design components to make this thing really fantastic.
Let’s get started
<h4>Create React App</h4>
We’ll start off by using the npx CLI command to generate a new application using the typescript template
npx create-react-app your-todo-extension --template typescript
Next we’ll add the additional dependencies we are using
yarn add antd @ant-design/icons nanoid
Then the types Dev Dependencies
yarn add -D @types/chrome
To explain the dependencies:
<ul>
<li>antd — For the Ant Design Components</li>
<li>@ant-design/icons — For the “remove” icon</li>
<li>
<a href="https://www.npmjs.com/package/nanoid">nanoid</a> — A tiny unique string generator for our IDs</li>
<li>@types/chrome — Typescript types for using Chrome Sync Storage</li>
</ul>
Now it’s time to write some code
Start by updating the /public/manifest.json file.
<pre>{ "name": "ToDo List", "description": "Just a basic ToDo List", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "index.html" }, "icons": { "16": "logo192.png", "48": "logo192.png" }, "permissions": ["storage"] }</pre>
The two items to note here are the "action" object and the "permissions" array. The default_popup option tells the extension where to look for the “popup window” code. The "permissions" array gives the extension access to Chrome Storage. For documentation on this here’s the <a href="https://developer.chrome.com/docs/extensions/reference/storage/">link</a>. We’ll be using the Chrome Storage to maintain our to-do items even when we close the popup. Otherwise, they just disappear when the popup window is closed.
Update the index.css with the below code. This will provide some basic flexbox values, padding, etc.
<pre>.App { display: flex; flex-direction: column; width: 600px; min-height: 60px; padding: 30px 30px 40px 30px; } .todo-container { display: flex; flex-direction: column; width: 100%; } .todo-item { display:inline-flex; align-self: stretch; flex: 1; } .todo-item-container { display: flex; padding-top: 10px; } .todo-item-left { flex: 1; } .todo-item-right { flex: 0; margin-left: auto; } .todo-text-padding-left { padding-left: 10px; } .center-text { text-align: center; }</pre>
In your root, create a types.ts file and use these types. You will need them later.
<pre>type ToDoElement = { id: string; text: string; completed: boolean; } type ToDoInputValues = { 'todo-input-item': string; } type ToDoItemsProps = { name: string; items: ToDoElement[]; onDelete: (id: string) =&gt; void; onChecked: (id: string) =&gt; void; } export type { ToDoElement, ToDoInputValues, ToDoItemsProps, }</pre>
App.tsx is where the real magic happens. Let’s start by importing our necessary types and components at the top.
<pre>import { FC, useState, ReactElement, useEffect, useRef } from 'react'; import { Divider, Typography, Form, Input, InputRef } from 'antd'; import { nanoid } from 'nanoid'; import { ToDoElement, ToDoInputValues } from './types'; import TodoItems from './components/TodoItems'; import 'antd/dist/reset.css'; import './index.css'</pre>
Now let’s create the App Component and functions.
You can see from the imports that we are going to use React’s useState , useEffect and useRef hooks. We are going to use the useState hook to keep track of our to-dos and update the UI when they change states. useEffect and useRef are going to be used to make sure the Input field is in focus when the app loads so you can simply type into Input box instead of clicking first. We are also going to add the useForm hook from the Ant Design import to handle when we press Enter to add a new to do item.
<pre>const App: FC = (): ReactElement =&gt; { const [todos, setTodos] = useState&lt;ToDoElement[]&gt;([]) const inputRef = useRef&lt;InputRef&gt;(null); const [form] = Form.useForm(); const { Title, Text } = Typography; useEffect(() =&gt; { // this is where we focus on the input box if (inputRef.current) { inputRef.current!.focus({ cursor: 'start' }); } }, [inputRef]); return ( // nothing here yet ); } export default App;</pre>
Now that we have some boilerplate, let’s fetch our to-do items (above the return (… statement)
<pre>chrome.storage.sync.get(['todos'], (result): ToDoElement[] =&gt; { if (result.todos) { setTodos(result.todos); return result.todos; } return []; }); const completedTodos = todos.filter((todo: ToDoElement) =&gt; todo.completed); const notCompletedTodos = todos.filter((todo: ToDoElement) =&gt; !todo.completed); </pre>
Nice. What we’ve done is utilize the chrome.storage function, which we granted permissions to above, and told it to get the to-do items get(['todo'] . We don’t have any set yet, so it will return an empty array.
Now we will add the functions to handle Adding, Removing and Toggling checkboxes.
<pre>const toggleChecked = (id: string) =&gt; { const newTodos = todos.map((todo: ToDoElement) =&gt; { if (todo.id === id) { todo.completed = !todo.completed; } return todo; }); setTodos(newTodos); chrome.storage.sync.set({ todos: newTodos }); }; const handleTodoAdd = (values: ToDoInputValues) =&gt; { const text = values['todo-input-item'] const newTodo: ToDoElement = { id: nanoid(), text: text, completed: false } setTodos([...todos, newTodo]); form.resetFields(); chrome.storage.sync.set({ todos: [...todos, newTodo] }); } const handleDelete = (id: string) =&gt; { setTodos(todos.filter((todo: ToDoElement) =&gt; todo.id !== id)); chrome.storage.sync.set({ todos: todos.filter((todo: ToDoElement) =&gt; todo.id !== id) }); }</pre>
The handleTodoAdd function takes the form values passed from the Ant Design Form component’s onFinish function, which we will see later. The values are sent as an object with the key name of Input field (see Ant Design documentation for more info). In the handleTodoAdd function, we are creating a new object. The unique id is generated by the nanoid package we imported earlier, text from the input field and a default completed state of false. We then set the component state to add the new to-do item and use chrome.storage to set the todos to this new state. Notice that we are replacing the todos array in chrome.storage similarly because there is not an add function to do this with. The handleDelete function takes an id , sets the component state to the filtered values and similarly resets the chrome.storage .
Reusable Component Time
Let’s create a reusable component to show all of our To-Do tasks as well as the completed ones. We will use this component to round out our App.tsx in just a minute. Under your src folder, create a new folder called components . Inside that folder, create a new file called TodoItems.tsx .
<pre>import { FC, ReactElement } from 'react'; import { Divider, Checkbox, Typography, Button } from 'antd'; import { DeleteTwoTone } from '@ant-design/icons'; import { ToDoElement, ToDoItemsProps } from '../types'; const TodoItems: FC&lt;ToDoItemsProps&gt; = ({ name, items, onChecked, onDelete }: ToDoItemsProps): ReactElement =&gt; { const { Text } = Typography; return ( &lt;&gt; { items.length &gt; 0 &amp;&amp; &lt;Divider orientation='left'&gt;{name}&lt;/Divider&gt; } &lt;div className='todo-container'&gt; {items.map((todo: ToDoElement) =&gt; ( &lt;div key={todo.id} className='todo-item-container'&gt; &lt;div className='todo-item-left'&gt; &lt;Checkbox className='todo-item' checked={todo.completed} onChange={() =&gt; onChecked(todo.id)} /&gt; &lt;Text className='todo-item todo-text-padding-left' delete={todo.completed} italic={todo.completed} &gt; {todo.text} &lt;/Text&gt; &lt;/div&gt; &lt;div className='todo-item-right'&gt; &lt;Button type='dashed' icon={&lt;DeleteTwoTone twoToneColor='#EE4B2B' /&gt;} onClick={() =&gt; onDelete(todo.id)} /&gt; &lt;/div&gt; &lt;/div&gt; ))} &lt;/div&gt; &lt;/&gt; ); }; export default TodoItems;</pre>
With this component, we are taking in an array of items and looping over them to create our list. We are also passing in a name for the Divider and the onChecked and onDelete functions defined in our App.tsx file as toggleChecked and handleDelete . The parent component will handle updating those states and storage.
Now we’ll import the new component into App.tsx and use it. Here is the complete App.tsx file.
<pre>import { FC, useState, ReactElement, useEffect, useRef } from 'react'; import { Divider, Typography,Form, Input, InputRef } from 'antd'; import { nanoid } from 'nanoid'; import { ToDoElement, ToDoInputValues } from './types'; import TodoItems from './components/TodoItems'; import 'antd/dist/reset.css'; import './index.css' const App: FC = (): ReactElement =&gt; { const [todos, setTodos] = useState&lt;ToDoElement[]&gt;([]) const inputRef = useRef&lt;InputRef&gt;(null); const [form] = Form.useForm(); const { Title, Text } = Typography; useEffect(() =&gt; { if (inputRef.current) { inputRef.current!.focus({ cursor: 'start' }); } }, [inputRef]); chrome.storage.sync.get(['todos'], (result): ToDoElement[] =&gt; { if (result.todos) { setTodos(result.todos); return result.todos; } return []; }); const toggleChecked = (id: string) =&gt; { const newTodos = todos.map((todo: ToDoElement) =&gt; { if (todo.id === id) { todo.completed = !todo.completed; } return todo; }); setTodos(newTodos); chrome.storage.sync.set({ todos: newTodos }); }; const handleTodoAdd = (values: ToDoInputValues) =&gt; { const text = values['todo-input-item'] const newTodo: ToDoElement = { id: nanoid(), text: text, completed: false } setTodos([...todos, newTodo]); form.resetFields(); chrome.storage.sync.set({ todos: [...todos, newTodo] }); } const handleDelete = (id: string) =&gt; { setTodos(todos.filter((todo: ToDoElement) =&gt; todo.id !== id)); chrome.storage.sync.set({ todos: todos.filter((todo: ToDoElement) =&gt; todo.id !== id) }); } const completedTodos = todos.filter((todo: ToDoElement) =&gt; todo.completed); const notCompletedTodos = todos.filter((todo: ToDoElement) =&gt; !todo.completed); return ( &lt;div className="App"&gt; &lt;Title&gt;ToDo List&lt;/Title&gt; &lt;Divider /&gt; &lt;Form form={form} name='todo-input' onFinish={handleTodoAdd} &gt; &lt;Form.Item name='todo-input-item'&gt; &lt;Input placeholder='Enter a todo' ref={inputRef} /&gt; &lt;/Form.Item&gt; &lt;/Form&gt; { todos.length === 0 &amp;&amp; &lt;Text className='center-text' type='secondary' &gt; No todos yet &lt;/Text&gt; } &lt;div className='todo-container'&gt; &lt;TodoItems name='Tasks' items={notCompletedTodos} onChecked={toggleChecked} onDelete={handleDelete} /&gt; &lt;/div&gt; &lt;div className='todo-container'&gt; &lt;TodoItems name='Completed' items={completedTodos} onChecked={toggleChecked} onDelete={handleDelete} /&gt; &lt;/div&gt; &lt;/div&gt; ); } export default App;</pre>
You can see that we are now using the Form component from Ant Design to add our input box. When the user presses Enter, the onFinish function is called and adds the new to-do item. Our TodoItems component is used here twice. The first one is passing in the notCompletedTodos and the second, passing in the completedTodos . This is how we are able to reuse that component.
See It In Action
First off, you will need an optimized build to try this in Chrome.
In your console, run yarn build .
In your browser’s address bar, type chrome://extensions
<figure><img alt="" src="https://cdn-images-1.medium.com/max/538/1*VnKQykT68sI72t9faQkxvg.png"><figcaption>chrome://extensions</figcaption></figure>At the top of the page, click Load unpacked
<figure><img alt="" src="https://cdn-images-1.medium.com/max/447/1*yzBziS1r0bGSKISvGChHMg.png"><figcaption>Load Unpacked</figcaption></figure>Find the directory where your application is located and select the /build directory
<figure><img alt="" src="https://cdn-images-1.medium.com/max/299/1*s0Lxe2zw1Lv6ZsswzS_mJg.png"><figcaption>build directory</figcaption></figure>Now your Extension is loaded. It is not pinned to the toolbar by default but you can find it by clicking the Puzzle Piece on the right side of your address bar.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/346/1*bmcVxohsZSXel5eqjWWw-Q.png"><figcaption>Puzzle Piece</figcaption></figure>Find your ToDo List extension and select the “pin” to pin it to your toolbar.
Once it’s in your toolbar, Click on the icon (probably the React Icon by default) and test it out!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/608/1*8YFvFGiEzFa5mtahKYzUOQ.png"><figcaption>To-Do List</figcaption></figure>If all goes well, you will have made your first Chrome Extension.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2a460897b896" width="1" height="1" alt="">

Create a Chrome Extension with React

<figure><img alt="Indian street and buildings" src="https://cdn-images-1.medium.com/max/1024/1*A1JH6lR-v8PoXfmAieAFew.jpeg"><figcaption>Indian street / Getty</figcaption></figure>Working with a globally distributed team has many advantages, well beyond productivity. Here are some lessons learned while working with a few different teams.
<h3>Relationship Goals</h3>
Like any relationship, working with team members across the globe takes work and requires attention to your partners. The benefits of these partnerships are much more than just working with other experts who have a similar interest in moving the project forward. When a global team works well together, team members benefit not only professionally but personally as well.
A team is not just a group of anonymous individuals who show up, put in work and then clock out. Each person is unique, providing a valuable, non-renewable resource to your project: Their time. Surely there are people who can’t wait to go to work and exchange their time for money. For the rest of us, we value more than the funds transfer (Let’s be honest, money is the motivator) and, while maybe not actively seeking it, we value the knowledge we get from new experiences and the relationships that can be formed while engaged in the daily “battle.” Here are some important points and lessons learned while working with different global teams.
<h4>Learn the Culture</h4>
This is a very important key to link the next two points together. By understanding some of the nuances of your team members culture, you will learn how to better communicate as well as how to better execute the tasks at hand. Here are just a few examples of that.
While working with team members in Germany and some Eastern European countries, some people were very direct in their statements. “Paul is not working hard enough. This task could be completed in one day.” By knowing in advance that some people from that region are simply direct in their communication and that these statements are not meant to be hurtful, it can lessen the sting to someone from a culture that is not used to such pointed statements.
In Indian culture, it is common to start a conversation by checking in first. “Good Morning, Rakesh! How was your weekend?” After engaging in that ice-breaker, the conversation about work can continue as expected.
It is common in American culture to just jump right into the subject when sending a Slack/Teams/etc. message. “Vijay, do you have the spreadsheet with the numbers?” It would not be unexpected for Vijay to reply with, “Hello, Alex. How are you?” Americans can also be rather sensitive to the very direct statements from someone from a direct culture. It is possible they would feel offended in hearing they are not meeting expectations, even if it is true.
<h4>Communication</h4>
A relationship cannot function successfully without communication just as a team cannot achieve focused success without effectively communicating goals, needs and expectations.
Set team expectations at the beginning. Knowing the goals, and what processes are expected to be followed to achieve goals, will make the team more comfortable in their role.
Document these expectations. It is not possible to remember every process, especially if the tasks are constantly evolving. It’s ok to modify expectations if the team is finding some processes are not working.
Respect the Timezone. Global teams are spread across many timezones. Schedule meetings as early as can possibly accommodate all teammates. This can be difficult sometimes, but respecting a person’s time is very important.
Empower your team to ask for help. Experience has shown that some cultures may not be as comfortable asking for help, as it reveals a person may not be as strong in their skill as advertised. This only leads to a breakdown in communication as well as reduces project velocity. Remove this barrier, provide tools for private communication and encourage your team to work together. Remember, it is The Team vs. The Problem, not the team that is the problem.
Positive Affirmation. Simply showing up and talking about work stuff is fine, but it is just fine. Re-affirming to the team when they are doing good work is motivation. Even when the team is struggling, celebrate the small wins. People are motivated when they feel value in the work they are doing.
<h4>Trust</h4>
It is not possible to have a functional relationship or effective communication without Trust. You have to trust your team to complete to task. Trust is earned and on a team, opportunities have to be given to earn that trust. This means more than just completing tasks in a timely manner. Broken trust can cause long lasting damage to a team.
Respect. Treat your teammates the same way you would like to be treated. Belittling and gossip only creates a divide amongst the team. Listen to your other team members and try to understand their position. Respect their time and efforts.
Benefit of the Doubt. This goes directly hand-in-hand with trust. You may not be close personally with a team member, but setting aside doubt and letting your team prove they can successfully complete tasks will only solidify that trust.
Be Vulnerable. Being vulnerable can be uncomfortable. No one wants to be judged negatively. Empower the team to ask for help. Also, empower your team to speak up. If they are unsure that a process is going to be successful, create a space where they can vocalize that. Create a safe space to be vulnerable. Recently a team member was lost to Covid. This was very hard on the team, as they had grown close. Allow a space where people can talk about their feelings and their needs. Be understanding and empathetic to work and personal needs.
Take Risks Together. Being vulnerable doesn’t always mean talking about feelings. This can also mean engaging in a joint effort to try something new and different. Whether successful or not, the bond created while working towards something new can be rewarding. You can learn a lot about a team that is will to succeed and/or fail together.
<h4>Do Something Fun</h4>
Work doesn’t always have to be a grind. That grind can really put burden and stress on a team, resulting in burnout. Try something different for a change. One team had an End of Sprint Fun Activity that was 30 minutes to an hour long. One activity was to submit a baby picture of themselves and the rest of the team try to guess who it was. One activity was to have the entire team draw a picture of something only by having one team member describe shapes. Sometimes you can learn a lot by just letting people talk about their hobbies, interests or family.
<h3>Conclusion</h3>
Working on a globally distributed team can be successful and rewarding, as well as foster some long term relationships. Learning new cultures, new ways of doing things and developing trust along the way, while successfully navigating the workplace environment, will last well beyond the project.
Please feel free to comment on your experiences working with a global team, other cultural nuances you’ve learned that might help someone new to this new world, and anything else you think would make a team’s experience more successful.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=75fe2e51f5c6" width="1" height="1" alt="">

Working with Globally Distributed Teams

You can get a token from firebase and have Postman use it for all your requests.
<figure><img alt="Postman logo" src="https://cdn-images-1.medium.com/max/746/1*WF6JAMNPCTYZhKQ_-991Yg.png"></figure>For Firebase Authentication users, it is very common to need to use Postman for querying your API endpoints while also needing a Bearer Token from Firebase Auth to connect. Postman makes fetching a token and automatically setting it in all of your API requests easy.
In Postman, create a POST request with the following URL https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key={FIREBASE_API_KEY}.
In the Body, pass the following:
<pre>{ "email": "&lt;email&gt;", "password": "&lt;password&gt;", "returnSecureToken": true }</pre>
The email will be a user in your firebase authentication list along with the password associated with that user.
The Content Type is application/json and will be automatically set in Postman. The response you will get back will be a JSON object and idToken is the token you need for your API requests as the Bearer Token.
To create an automated setting of this token, you can add the following code in the Tests tab of your auth request:
<figure><img alt="Tests Tab in Postman" src="https://cdn-images-1.medium.com/max/1024/1*Ro-QIKMeeN2Z4jyt141Cmg.png"><figcaption>Postman Tests Tab</figcaption></figure><pre>var jsonData = JSON.parse(responseBody); pm.globals.set("id_token", jsonData.idToken);</pre>
For your Postman requests, on another tab, set the Bearer Token in Authorization to {{id_token}}
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N2XzLcaVhoNqozfCroED_Q.png"><figcaption>Authorization Tab</figcaption></figure>The token will be automatically set in your requests.
Note: Firebase Tokens are only valid for 1 hour. When your token expires, send another POST request to the above URL to refresh.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9d151670c05b" width="1" height="1" alt="">

Using Postman to Fetch a Firebase Token

<h3>Debugging Jest Tests with Chrome</h3>
<figure><img alt="Jest and Chrome" src="https://cdn-images-1.medium.com/max/600/1*ntLwHm3lo-GAeZGZObQOtg.png"></figure><h3>Tests in Jest are powerful, but debugging Jest tests can prove difficult.</h3>
For me, debugging tests using Jest typically consisted of multiple console.log statements. It can be really difficult to figure out an issue in the test without the ability to step through the code. Luckily, Chrome Node DevTools allows us to use debugger, or break points, so we can step through our code and look into objects. This may allow us resolve some of those tough situations, where console.log just doesn’t provide enough information, in only a few steps.
<ul><li>Insert a debugger in your test</li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/762/1*VE_eXs-2T87TMJ6mbPJmyg.png"></figure><ul>
<li>In a new Chrome tab, type chrome://inspect</li>
<li>Click on “Open dedicated DevTools for Node”</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/760/1*QUDhfB8zhHbDXJZgy1KHxw.png"><figcaption>Open dedicated DevTools for Node</figcaption></figure><ul><li>In your terminal, type</li></ul>
<pre>node —-inspect node_modules/.bin/jest --runInBand &lt;path_to_test&gt;</pre>
Note*&lt;path_to_test&gt; is the actual path to your test
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jm62yX0GRUSeSDtGOGSOkw.png"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IPQMmuLEz3ctomPVKWKANA.png"></figure>By utilizing Jest’s —-runInBand option, we can force Jest to run each test sequentially (the order in which they appear in your file). This makes it possible for the console to pause at the debugger statement rather than continue to run other tests in other processes. Checkout the documentation <a href="https://jestjs.io/docs/en/cli#runinband">here</a>. In addition to the above single run option, you also have the option to combine it with Jest’s --watch mode, which will re-run the test after each saved change.
Your test should be paused in Chrome DevTools, where you can now use all the tools you normally would in the Chrome inspector.
<figure><img alt="Test running in Chrome Inspector" src="https://cdn-images-1.medium.com/max/682/1*NookIgVOwOXc6vI1CJ1I9Q.png"><figcaption>Test Running in Chrome Inspector</figcaption></figure>Simplify your debugging process by turning this command in to an NPM script. Add the below code to your package.json scripts and run it from the command line.
npm run test:debug &lt;path_to_test&gt;
<pre>{ "scripts": { "test:debug": "node --inspect node_modules/.bin/jest --runInBand",</pre>
<pre> }</pre>
<pre>}</pre>
An added bonus for my fellow VSCode users, get the <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome">Debugger for Chrome </a>plugin and you can replicate this same process right in your editor!
Happy Debugging!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c3d7e9edf82d" width="1" height="1" alt="">

How To Debug Jest Tests with Chrome

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*T4ep5FomYW78kNVYvA6s6w.jpeg"></figure><h4>TL;DR Create custom git commit template so you can have great commit messages. Bad commit messages are bad.</h4>
Whether you are working on a team, working alone or coming into a new company’s app, commit messages provide insight into what changed and why. Or… at least they should. Let’s be honest; Most of us have been guilty of this:
git commit -m 'fixed it!' 🤦‍♀
Unfortunately, this doesn’t help anyone know what was fixed. A custom commit template can help ensure good commit detail by forcing you to follow a structured outline. Answering why the commit was created, what changes were made and any other pertinent information and/or notes that would benefit someone revisiting the commit later makes for a good commit message.
A great write-up of why you should write good commit messages can be found <a href="https://medium.com/compass-true-north/writing-good-commit-messages-fc33af9d6321">here</a>.
Setting up a custom commit template is pretty easy.
First, we will need to edit our .gitconfig file to point git to the template we are creating. We are creating the template in the file .gitmessage in the root folder, but you can use any file name in any location you choose. There are two options to edit .gitconfig, via the command line or manually in your editor.
Command line:
git config --global commit.template ~/.gitmessage
You can leave out the --global flag if you only plan on using this template for a single, individual repo.
When you open the file in your editor, it should now have this at the bottom. If you chose not to run the above command, you can manually add this, with the ~/.gitmessage being the reference to the file where the template will live.
<pre>[commit] template = ~/.gitmessage</pre>
Back at the command line, create and open the file for the template. Substitute code with whatever command you use as your editor. vim, vi, subl, emacs, etc.
code ~/.gitmessage
Below is a sample template, but you can customize it to fit your needs or personality.
<pre>########50 characters############################ Subject ########72 characters################################################## Problem # Problem, Task, Reason for Commit</pre>
<pre>Solution # Solution or List of Changes</pre>
<pre>Note # Special instructions, testing steps, rake, etc</pre>
<ul>
<li>The subject should describe the commit in 50 characters or less.</li>
<li>The line length in the body should be no more than (or word-wrapped at) 72 characters.</li>
<li>Breaking up the body into multiple sections allows you to provide useful context of the commit and changes made.</li>
</ul>
The # are ignored by git, so the completed output would look something like:
<pre>BUGFIX: Add New Column For User First Name Problem We do not have a column for first name. We need this column for reporting.</pre>
<pre>Solution * Add column migration * Create task to populate new column * Update user view</pre>
<pre>Note Merge after 6pm EST</pre>
Now when you commit your fresh updates, only type git commit. Your template will pop up in your editor and you can provide clear context of the commit.
You can still bypass the template with git commit -m &lt;your_message_here&gt; for cases when you truly need it, but for all other cases you have a detailed outline for future commits.
Future You will thank you.
For more in-depth details on customizing git: <a href="https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration">https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=84468232a459" width="1" height="1" alt="">

Create A Custom Git Commit Template

<figure><img alt="" src="https://cdn-images-1.medium.com/max/600/1*0edpV8xTi4ZpkrYVnSoQQQ.png"></figure>You can find Part 1 <a href="https://medium.com/@alex.wasik/build-a-simple-app-with-vuejs-and-firebase-part-1-6b50ffbdbd23">here</a>. The repo for this project is <a href="https://github.com/alexwasik/vue-firebase-tut">here</a>.
In Part 1, we setup all the necessary elements to connect Firebase to the Vue application.
In the app, we are going to use Bootstrap 4 to easily create an input form and a table to display the data, and we will utilize FontAwesome for an icon. Open the index.html file and add the link to the stylesheet for bootstrap and import the FontAwesome library for icons.
index.html
<a href="https://medium.com/media/16fa3fe36a9226e83dac50586b29d07c/href">https://medium.com/media/16fa3fe36a9226e83dac50586b29d07c/href</a>Now that we have the CSS framework in place and the data connection to Firebase setup from part 1, let’s start writing the code to bring it all together.
<h3>Time to write some code</h3>
The vue-cli generates files and a file structure for us, including an example Home component to show users how the file structure and components work. We are going to remove some of this and replace it with our own code. Since we are building a really simple SPA, we are going to remove the sample component file.
Navigate to src/components/HelloWorld.vue and delete it. Goodbye Vue Hooray Page!
Open src/App.vue , remove all the code and replace it with a blank component. We are going to write our own from the ground up.
<pre>&lt;template&gt; &lt;/template&gt;</pre>
<pre>&lt;script&gt; &lt;/script&gt;</pre>
<pre>&lt;style&gt; &lt;/style&gt;</pre>
When I am building a Vue app, I like to start by architecting the data and methods I plan on using. By doing it this way, I can plug my pre-created methods in to the front end where I expect them to go and things should just work.
From the data we created in the Firebase database, we know we will create a new article object, and we know we will want to remove an article. We also know that we will have a list of articles. Here is the simple architecture for the &lt;script&gt; section.
<ul>
<li>newArticle object with attributes, author, title, url</li>
<li>methods: addArticle, removeArticle</li>
<li>articles collection from Firebase</li>
</ul>
This is what the code looks like:
<a href="https://medium.com/media/e0b817cf8e662e85f01c3289f30889e3/href">https://medium.com/media/e0b817cf8e662e85f01c3289f30889e3/href</a>As promised, we are able to bind Firebase properties (the exported articlesRef) to a value we specified as articles, which we can now loop through in the table.
<pre>firebase: { articles: articlesRef },</pre>
We have created the newArticle object that will hold the data attribute values. We will bind this data in the form using the v-model directive and use that to create data for the database.
We also created the addArticle method that will handle the work of pushing the new article data to the database, and then clearing the attribute values.
<pre>addArticle() {</pre>
<pre> articlesRef.push(this.newArticle);</pre>
<pre> this.newArticle.title = '';</pre>
<pre> this.newArticle.author = '';</pre>
<pre> this.newArticle.url = '';</pre>
<pre>},</pre>
To remove articles from the database, we use Firebase’s .child() method with the article’s key to locate the specific article inside of the articles object. By chaining the Firebase remove() method, we can delete the article.
<pre>articlesRef.child(article['.key']).remove();</pre>
To display the data, we will build a table. Here is the markup to create a striped table inside a Bootstrap card:
<a href="https://medium.com/media/5e6f0537bd66fa5375d98026425facd4/href">https://medium.com/media/5e6f0537bd66fa5375d98026425facd4/href</a>In the &lt;script&gt; data, we assigned all of the articlesRef items to an articles object and are looping over them in the tr, tracking by each article’s key (see Vue <a href="https://vuejs.org/v2/guide/list.html#key">docs</a>).
&lt;tr v-for=”article in articles” :key=”article.id”&gt;
We now have to access the attributes for each article inside the td . You may have noticed a bit of magic as well. We have created a link to the article within the table by binding the article.url to the a tag’s href attribute. Check <a href="https://vuejs.org/v2/guide/syntax.html#Arguments">here</a> for more details on binding attributes in Vue.
Also inside the table, we’ve implemented theremoveArticle method. We are passing the article object to the method and using the “shortcut” we created to the article list in the database. Restart your dev service to see all the changes at work.
npm run dev
If everything worked correctly, you should have data in your table.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GzDBx5SavS8zOMGOYo_nqw.png"><figcaption>It worked!</figcaption></figure>Now that we’ve successfully made a connection to Firebase and the table is populated with the initial data, we will create form inputs where the user will enter article data.
Again, in the interest of brevity, here is the form markup to place above the table:
<a href="https://medium.com/media/37888181ca3f264422cb224f9c23c6b1/href">https://medium.com/media/37888181ca3f264422cb224f9c23c6b1/href</a>If you’ve worked with Angular, you may recognize the way Vue does data binding with v-model. We are also binding the submit event on the form.
<pre>@submit.prevent="addArticle"</pre>
When we submit the form using the Add button, Vue will execute the addArticle method. Here is the output:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V1OjUJ_t95K6TxJlR_Is4w.png"><figcaption>Press Add and watch the magic!</figcaption></figure>Using the Firebase push() method, we pass the newArticle attribute data from the form to the database, then reset the newArticle attributes by assigning them to empty strings. When you click the Add button, the data will be sent to the database and the form will be reset.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*brq7kWBTz3e_kxVzIrEPfA.png"><figcaption>Success</figcaption></figure>We have successfully added a new article to the table! Clicking on the link will connect to the url the user entered. The last thing to do is test the delete functionality . Before we click on the icon, let’s add a small bit of style markup to add to the user experience. In the table code, thespan tag contains a trash can icon and a class pointer. Right now if you hover, the pointer remains the same. We’ll add a class to the App.vue style section.
<a href="https://medium.com/media/026a26d7b0668ffc782c474f9df17c66/href">https://medium.com/media/026a26d7b0668ffc782c474f9df17c66/href</a>Refresh your browser, hover over the trash icon and click to delete a record from the database. Your table should immediately be one article lighter. You can confirm this item has also been deleted from Firebase accessing the database in the Firebase console.
<h3>Congratulations!</h3>
You have successfully integrated a Firebase database into your Vue application. Firebase make it relatively simple to connect a Vue application to a powerful, realtime database.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4506f2c9ae00" width="1" height="1" alt="">

Build A Simple App with VueJS and Firebase — Part 2

<figure><img alt="" src="https://cdn-images-1.medium.com/max/600/1*tMQzjqwzmhLS12xUUgyeKA.png"></figure>In case you haven’t heard yet, VueJS is the new hotness in the world of front end frameworks, and is quickly gaining recognition and respect from front end developers around the world. The relatively low barrier to entry makes it an easy choice for the developer interested in creating applications with Vue, and the documentation is well written. In addition to Vue’s ease of use, Google’s Firebase makes it simple to integrate a real time database into a Vue application.
You can find the repo to this tutorial <a href="https://github.com/alexwasik/vue-firebase-tut">here</a>.
We are going to build a simple application using VueJS and Firebase to store links to articles on the web. The user will input some information in a form and it will be displayed in a table. The user will also have the option to delete entries from the table.
<h4>What you’ll need</h4>
<ul>
<li>npm installed</li>
<li>vue-cli installed npm install -g vue-cli</li>
<li>basic knowledge of Vue</li>
<li>Firebase account at <a href="http://firebase.google.com/">firebase.google.com</a>
</li>
</ul>
Create Our App
The vue-cli makes spinning up a new app easy, and VueJS has created an official CLI for quick project scaffolding. In your terminal:
vue init webpack vue-firebase
<figure><img alt="" src="https://cdn-images-1.medium.com/max/796/1*nSg0cETZiirkYW3PwtbA_g.png"></figure>Before we are done initializing the app, you should have something like the image above in the terminal. You can accept the defaults by pressing Enter. Let’s unpack what options you have to choose from:
<ol>
<li>Project Name, Description and Author are pretty self-explanatory. You can accept the defaults here or type in a replacement.</li>
<li>Vue build: Runtime + Compiler, Runtime Only. For our project we will use the Runtime + Compiler (standalone). For more information on the differences, check out the Vue docs <a href="https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only">here</a>.</li>
<li>Install Vue Router: Vue comes with an amazingly simple router for creating Single Page Applications (SPA). We won’t be using it here, type n.</li>
<li>Use ESLint: Linters ensure your code follows accepted patterns. In this case, we won’t need it because our code will be perfect (wink), type n.</li>
<li>Set up unit tests: If you are planning to add testing to your application, Vue offers quite a few options baked in. We won’t be testing our application, type n.</li>
<li>Setup e2e… : End To End (e2e) testing with Nightwatch. Our application is not going to be large enough or complex enough for us need End to End testing, n is an acceptable response here.</li>
<li>Should we run npm install for you: Sure! Why not? But… if you are so inclined and want to use yarn type n, otherwise npm is fine.</li>
</ol>
Now we cd into our project and run our project in the dev environment.
<pre>cd vue-firebase npm run dev</pre>
<h4>Hooray!</h4>
You’ve successfully created your Vue App. If you navigate to <a href="http://localhost:8080/">http://localhost:8080</a>, you should see what I call the default “Vue Hooray” page.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*skOLEb_Akf8WP-2CNH29Uw.png"><figcaption>Vue Hooray Page</figcaption></figure>It’s time to add some dependencies to prepare our app to use Firebase. Go back to your terminal and ctrl+c out of your running app. Add the vuefire and firebase dependencies. Vuefire allows Vue components to accept a new option, firebase which you can then use to bind Firebase properties to values in Vue instances. This will make a little more sense when we start writing code.
npm install vuefire firebase --save
We now have all the dependencies and scaffolding we need to build our app. Let’s get our database setup.
<h3>Firebase</h3>
Google’s Firebase is a cloud service that gives you a real-time, scalable database that you can access directly from your application. When you use Firebase to store data, your app gets data updates in real-time, meaning users or applications never have to refresh the page to get new data. Firebase also integrates additional services like analytics, authentication, hosting, in-app ad services and more, allowing the creation of more complex applications possible. With only a few steps, Firebase makes integrating this realtime database extremely simple.
Once you have signed up for Firebase, access the console by clicking the Go To Console link at the top.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/140/1*qT4ItnqOj7431HtdXpjUOw.png"><figcaption>just in case you don’t see it, this is what it looks like</figcaption></figure>Add Project
<figure><img alt="" src="https://cdn-images-1.medium.com/max/370/1*1Y1ye8KlFDBCm7aagcGQ0Q.png"></figure>Add your project name and select a region. According to the Firebase documentation, choose the region that represents your organization. It also sets the currency for revenue reporting like in-app purchases from applications. Click Create Project.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/519/1*nCnsWiHNcFrQ8755PCyO-Q.png"></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/522/1*PCKEnWDpu_TxXgRe21SJvw.png"><figcaption>Another Success!</figcaption></figure>Select the Add Firebase to your web app
<figure><img alt="" src="https://cdn-images-1.medium.com/max/720/1*hpYctcTVRVQnCq9bsVnjVg.png"></figure>We need a place to put the code that Firebase just generated for us. Create a new file in your editor and copy the config variable code below the Initialize Firebase comment.
src/config.js
<a href="https://medium.com/media/8caa6f1b8e6c7b59cfe9b2470f9259b6/href">https://medium.com/media/8caa6f1b8e6c7b59cfe9b2470f9259b6/href</a>Now we are going to import the Firebase dependencies we added earlier to src/main.js. Edit main.js to look like:
<a href="https://medium.com/media/9a1b17a8c7273f97073f027201d3fec7/href">https://medium.com/media/9a1b17a8c7273f97073f027201d3fec7/href</a>In the application, we are going to create a link to an article on the web and we are going to store this data in the database. The data we want to store in the Firebase database is:
<ul>
<li>The Article Title</li>
<li>The Author</li>
<li>The Url to the Article</li>
</ul>
Head back to the newly setup Firebase account. If the config credentials are up, close the box use the link on the left to navigate to the database and click on Get Started
<figure><img alt="" src="https://cdn-images-1.medium.com/max/852/1*trHKhWAPilS9GbWOPBNFag.png"><figcaption>Navigate to Database and Get Started</figcaption></figure>When the Firebase database is created, it comes with some standard authorization rules. Since we are creating a simple app, we are going to overwrite those rules, allowing the application to read and write to the database without having to deal with authorization.
NOTE: Do not share your credentials on the web. By changing these rules, anyone can write to the database with your credentials.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TWg_UJ8zLu15mEJbyiCuTg.png"><figcaption>Firebase Default Auth Rules</figcaption></figure>Change the security rules:
<pre>{ "rules": { ".read": true, ".write": true } }</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/936/1*kC2BfbKzM2XojrJvmTANPg.png"><figcaption>Take heed to the warning</figcaption></figure>Next we will build our database JSON structure. Click on the Data link.
We are going to create the Collection and its Documents. We are storing “articles” so we will start by clicking on the + next to the database name and adding the collection name, “articles.”
<figure><img alt="" src="https://cdn-images-1.medium.com/max/589/1*hHifC1eFIis95wNIFO6v2g.png"></figure>Notice we didn’t fill in a value for the collection. The collection is the top level of our data with the documents being the children. Click the + to create a child reference of articles. The Name will be id and enter a value of 1 . Click the + to create an attribute. Here we will enter the data points we are going to save in the application: Author, Title, Url.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/645/1*4_UKoo5TZqo4ZJ5NCbf25w.png"><figcaption>Note: You may need to hit the + to create each child field</figcaption></figure>Now that there is data, we are going make some minor edits to the config.js file to make it easier to read, write, and delete the articles in the database from components in our application. The update to the config code will be making things <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a> by creating a few variables to “shortcut” making a connection to the database. It is now possible to export a articlesRef variable, creating access to the articles object. We are able to finally utilize the vue-fire bindings in components!
<a href="https://medium.com/media/4f8372b72537e756acf4475dce083a52/href">https://medium.com/media/4f8372b72537e756acf4475dce083a52/href</a><h3>Success!</h3>
You have successfully created the configuration to connect your application to Firebase. In Part 2, we will create the table to display our data, an input to create a new article in our database and the methods needed to make it all work together.
<a href="https://medium.com/@alex.wasik/build-a-simple-app-with-vuejs-and-firebase-part-2-4506f2c9ae00">Check out Part 2!</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6b50ffbdbd23" width="1" height="1" alt="">