DEV Community: John Papa

Do More using GitHub Copilot with AI and VS Code

John Papa — Mon, 21 Aug 2023 12:46:16 +0000

A Pair Programming Partnership

Just like Disney characters have friendships and partnerships that enrich their stories, developers also benefit from collaboration. Developers, like Mickey and his friends, thrive on pair programming. Working together with a colleague not only enhances productivity but also fosters creativity and problem-solving. All we have to do is recall those late nights where the support of a friend resulted in breakthroughs and accomplishments.

Learn more about the exciting features in GitHub Copilot in this video from ngConf 2023.

Introducing GitHub Copilot

GitHub Copilot is an AI tool that brings the power of artificial intelligence to the coding experience. GitHub Copilot uses large language models to generate code suggestions and help developers write code more efficiently. Almost a million developers are already using GitHub Copilot and highlights some of its exciting features. Perhaps you are one of them?

Enhancing Developer Productivity with AI

The developer experience is undergoing a fundamental shift with the rise of AI tools like GitHub Copilot. Gone are the days of relying solely on copying and pasting from Stack Overflow. With AI as a partner, developers can expect faster coding, improved fulfillment, and higher-quality code. The future of coding is AI-assisted, with developers leveraging tools like GitHub Copilot to simplify their coding journey.

A Live Demo that Amazes

In this video you experience the capabilities of GitHub Copilot. You can effortlessly write code and leverage Copilot to generate code suggestions, complete functions, explain complex regex expressions, get quick hints, and create documentation all within the coding environment.

Copilot Goes Beyond Coding

GitHub Copilot is adding features all the time including chat integration, voice commands, automatic pull requests, and more. These advancements indicate that AI is becoming an even more integral part of the developer's toolkit.

Unleashing the Potential of AI for Documentation and Code Quality

GitHub Copilot is not limited to code generation. It can also help with documentation, automatically review and generate pull requests, provide comprehensive code explanations, and even produce more readable code. The video showcases how Copilot can create helpful comments, refactor code, and suggest best practices, all while saving valuable time.

Embracing AI for Angular and React Development

Sometimes we need more than a simple code suggestion, for example you may have found a great component in React and you need it to work in your Angular app. GitHub Copilot simplifies complex tasks like these, even within popular frameworks like Angular and React. In the video you can see how you can effortlessly convert a React component into an Angular one using Copilot. This transformation showcases Copilot's ability to understand code structure and provide accurate suggestions, making developers' lives easier when working with different frameworks.

Enhancing Developer Creativity and Happiness

AI tools like GitHub Copilot are designed to augment developers' capabilities rather than replace them. By automating repetitive tasks and providing valuable suggestions, Copilot frees up developers' mental space, allowing them to focus on creative problem-solving and critical thinking. This newfound freedom enhances the overall developer experience and leaves developers feeling more fulfilled and productive.

What Lies Ahead for Developers and AI?

There an re so many exciting future possibilities that lie ahead for developers and AI. GitHub is driving ongoing research and development efforts to further improve GitHub Copilot and the exciting features upcoming in GitHub Copilot X. Developers can look forward to enhanced capabilities, improved collaboration, and an overall more streamlined coding experience.

What Will You Do?

How can you leverage the power of AI to unlock their full creative potential? Consider the significant impact AI tools like GitHub Copilot can have on your coding journey. Imagine the possibilities and think about ways they can embrace AI to enhance their productivity and satisfaction as developers.

References

Base of this article written with AI and then modified by hand.

Finding what matters to you

John Papa — Wed, 05 May 2021 18:49:56 +0000

Are you happy?

I've been asked this question many times by co-workers and my leaders over the years. I've been lucky enough to have many leaders who cared enough to ask it and cared enough to help shape the environment around me and my colleagues. But for years I answered that question not even knowing there was a question that must be asked and answered first. A question that will shape whether I am happy or not.

That question is "What makes you happy?".

At some point in my career I decided to invest some time into thinking through that question. it's one that may be different for a lot of people. After all, what motivates you vs your colleague may be different. Sure, there will be overlapping aspects, but we are all different.

First, I realized I am thankful for having a job that compensates me. Not everyone does. More specifically, I am thankful that this allows me to take care of my family.

I'll cut to the end of the story here as I have 3 main points:

I found it helpful to carefully consider and be honest with myself on what makes me happy in a job.
My list evolves as my life evolves. Sometimes items are added, sometimes they drop off that list.
Being happy with my job is not the same as being happy with my life.

I'll share here some of the most important aspects that make me happy at work. Maybe you have different ones or some of the same.

This list is not in order, nor are they all equal to me.

Do I have the time to truly be with my family outside of my "work hours"?
Do I find a challenge that stretches me and fits with how I like to build teams/processes/technology to achieve business solutions?
Do I find the work interesting?
Do I have support from my leaders?
Do I have freedom to control how I get to the objectives?
Do I have opportunity to influence direction?
Do I find authenticity and character to be valued at work?
Am I fairly compensated?

Are there other things I value? Absolutely! The point of this exercise for me was not to list a thousand items. Wow I'd be pressured into making sure I didn't leave something out (there is always something else to add). For example, I highly value working with collaborative people ... I could add that easily to the list above. And maybe I should. But at some point the list serves its purpose to me, which is to help me consider what matters to me.

I'll leave you with this thought ... do you know what matters to you and influences what makes you happy at work? If not, maybe creating your own list will help.

Migrating Vue 2 to Vue 3

John Papa — Mon, 07 Dec 2020 16:40:36 +0000

I recently converted a second app from Vue 2 to Vue 3, added TypeScript, and swapped from options api to composition api. Here are my notes from the experience.

My 3 main target areas for this migration were:

Vue 2 to Vue 3
JavaScript to TypeScript
Options API to Composition API

Almost every resource I used was from the official docs for Vue, the Vue CLI, the Vue Router, and Vuex. Some of these docs have sections in migrating, adding (like vue add typescript), or upgrading.

All of these have docs. Some have migration guides, some do not. Some of the migration guides tell you the differences, but don't do it from an existing app.

The steps I followed may not be the most optimal path. I would be shocked if they were. Your mileage may vary (YMMV). After digging through the docs and the Vue CLI API (to check out the add/migration commands) this is where I landed. Hopefully by sharing the steps I went through they will be helpful to some of y'all.

If you want to host your Vue app in the cloud, I recommend trying Azure Static Web Apps.

Why

If you don't care why I went down this road, you can scroll past this "Why" section.

I find it valuable to understand why I should consider doing something before I invest time into doing it. Thus, I'll explain a bit of my reasons why I chose to migrate for each of these three target areas.

Vue 3

The migration to Vue 3 is to keep up to date with Vue. I find it important stay current with major version changes of web frameworks sooner rather than later. Often the tooling supports older versions for a while, but as the ecosystem evolves, the latest versions get the love and as with most software, the older versions start to lag.

Also, keeping up with the latest version offers a lot value in the core framework improvements. One feature I won't miss is mixins, which I rarely used. I find the hooks concept or simply importing other modules of code to be much easier to follow, reuse, and maintain.

JavaScript to TypeScript

One of the most exciting to me is that Vue 3 is written with TypeScript and in my experience this helps the stability of the platform and provides much better development and tooling help.

I've converted a lot of apps to TypeScript over the years. I've also started a lot of apps with TypeScript from scratch. Adding types to the development flow almost always reveals bugs in my code that were previously undetected in my JavaScript code. I do not follow the school of "type the heck out of everything though". This is a road that, IMO in a web app, can lead to hours of time with little to no reward. I do add types. I do avoid any. But there are times to weigh the value.

Composition API

There is nothing wrong with the Options API. In fact, it is arguably one of the biggest reasons why Vue has been so approachable and easy to learn. That all said, I do find that spreading code out across my components does make it harder to read my own code vs keeping similar logic together. For this reason, I want to give the Composition API a chance.

Migration

Here is where I started. The notes below are indeed notes. They are not every single step I took. I will explain how I thought through these steps and which ones worked well for me and which ones I struggled through.

The first step for me was to get the migration kicked off on a new git branch. So I started by aking a new branch so I could track the changes.

1. Migrate from Vue 2 to Vue 3

The Vue CLI has a command to upgrade to Vue 3.

vue add vue-next

Running this command modified these files:

File	Change
eslintrc.js	for some Vue 3 eslint settings
package.json	this upgraded Vue to 3.0.0 beta.1 and Vuex to 4.0.0-alpha.1. It made me wonder why the alpha and betas, of course. I had to manually add `@vue/compiler-sfc` , not sure why. But when I tried building the app, it complained about this being missing. How did I know this? I generated a new Vue 3 app and saw it there. Maybe I missed this in my existing app.
`_src/main.js`	The `createApp` API replaces the `new Vue({ ... })` API
`_src/store/index.js`	The `Vuex.createStore` API replaced the `Vue.use(Vuex)` API

2. Adding TypeScript

The Vue CLI has a command to upgrade to TypeScript.

vue add typescript

Running this command modified these files:

File	Change
eslintrc.js	SSome extends settings changed. But instead of adding the new ones, I ended up with 2 extends arrays. So I had to manually fix this.
package.json	Several typescript packages were added

| app.vue | This entire component was overwritten. I ended up with a reference to a HelloWorld component (which also was added). My app obviously doesn't need that so this was code to remove. It also added some CSS and template code that I had to remove. I had to manually revert the changes, and apply the ones that were needed for TypeScript. The key here was to revert the changes with git and apply the <script lang="ts"> and swap from export default { ... } to export default defineComponent ({ ... }) |
| *.ts files | Many javascript files were renamed to typescript files |
| shims-vue.d.ts | This typings file was added to support some Vue conventions |
| tsconfig.json | The typescript config file |

This is the second project I migrated from Vue 2 to Vue 3 and added TypeScript. I thought that this process migrated all components to TypeScript. Maybe I was wrong, because I had to manually upgrade every component this time, which leads me to the next step.

3. Fixing TypeScript

I went through every component file and applied the <script lang="ts"> and swapped from export default { ... } to export default defineComponent ({ ... }). This took a while.

4. Vue Router

The Vue CLI has a command to upgrade the Router.

vue add router

Running this command modified these files:

File	Change
package.json	A few router packages were added and modified. The vue router bumped up to 4.0.0-0
`_src/main.ts`	The `createApp` API extended to include `use(router)`
`_src/router.ts`	The `createRouter` API replaced the old `Vue.use(Router)` API. It also added the `createWebHistory` API which replaces the `mode: history` technique

When I built the app and served it, I found an error about the catch-all route in the browser console error messages. So I checked out the Vue Router docs and it said I needed to manually refactor the "catch-all" route in router.ts.

This went from this code:

{ path: '*', component: PageNotFound },

... to this code ...

{ path: '/:pathMatch(.*)*', name: 'not-found', component: PageNotFound },

This was in the Router docs, which was helpful.

5. Vuex

The Vue CLI has a command to upgrade Vuex.

vue add vuex

Running this command modified these files:

File	Change
package.json	A few Vuex packages were added and modified. The vuex version bumped up to 4.0.0-0

Nothing else changed, which I found surprising. I assumed the store logic would upgrade, but it did not. This lead me to manually modify the store file.

File	Change
src/store/index.ts	I swapped to the new `crateStore` API. Similar to the other API changes for Vue and the Vue Router

6. Pausing for TypeScript

Then I made a ton of TypeScript modifications. I went through all of my Vuex code and added types. This took some time, but it was worth it (and expected). This is my code and only I knew the types ... and in some cases I had to create the types in the form of types, classes, and interfaces (again, for my own code).

One key aspect here is that I customized several ESLint settings. Here is what I added to eslintrc.js. When running npm run lint the Vue compiler spits out the eslint errors and warnings.

Here is what I added.

'max-classes-per-file': 'off',
'no-useless-constructor': 'off',
'no-empty-function': 'off',
'@typescript-eslint/no-useless-constructor': 'error',
'import/prefer-default-export': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-unused-vars': ['error'],

Setting	Why
'max-classes-per-file': 'off',	When I create models I often do this one per file. But in my project I had a bunch of small 5 lines of code classes and it was easier to maintain those in a single file.
'no-useless-constructor': 'off',	Some of my models have empty constructors. However, they have initialization parameters that allow me to call them to create a new instance and set properties like this `new Hero(1, 'John',)`
'no-empty-function': 'off',	Same issue as the empty constructor above.
'@typescript-eslint/no-useless-constructor': 'error',	Same issue as the empty constructor above.
'import/prefer-default-export': 'off',	I don't prefer default exports.
'no-use-before-define': 'off',	I often put function definitions where I want them in a file. basically i use hoisting to my advantage for readability. So I turn this off in most projects.
'@typescript-eslint/no-unused-vars': ['error'],	If I didn't add this, then every time I imported a type/class/interface and used it as a type, eslint complained.

Summary

Again ... the steps I followed may not be the most optimal path. I would be shocked if they were. Your mileage may vary (YMMV). After digging through the docs and the Vue CLI API (to check out the add/migration commands) this is where I landed. Hopefully by sharing the steps I went through they will be helpful to some of y'all.

Free Workshop on Azure Static Web Apps

John Papa — Wed, 22 Jul 2020 15:26:42 +0000

Free Static Web Apps Workshop

On July 29th, I'll be hosting an hour and a half workshop teaching you how to deploy and customize a shopping list application to global scale with Azure Static Web Apps Preview.

Check out the event here.

You'll learn how to:

deploy a web app (choose from React, Vue, Svelte, or Angular)
Configure your CI/CD to auto deploy
Add authentication
Establish authorization roles
Create custom routing rules
Setup fallback routing for client side routing rules
Deploy an API using serverless technology with Azure Functions
Set up your own custom domain with SSL

There's no catch. You don't even have to sign up. Just mark your calendar for the upcoming Create: Frontend event and show up.

Static Web Apps - First Look

John Papa — Tue, 19 May 2020 17:26:34 +0000

Let's start with a story that many of you are familiar with … you're building a web app. You chose your favorite framework. Maybe React or Angular or Vue or even Svelte. Your company wants to deploy the web app and reach millions of people.

So you start making a checklist of everything you need to do:

Yes/No	What you need
yes	Develop your app
yes	Code in GitHub
?	Pull Requests that create staging sites
?	CI/CD to build and deploy the app
?	APIs that scale
?	Reverse proxy to connect app to API
?	SSL certificate
?	Custom domain
?	Authentication
?	Authorization
?	Server side route control
?	Global scale of your static web assets

Wow, you just wanted to build your app!

What if you could lean on a service to provide all of this?

Rather than build up several servers and pipelines to handle these concerns, you start looking for a service that "just works". Point the service to your app and go.

You can visit the documentation to learn more. Or you can try one of our hands-on tutorials at Microsoft Learn today!

Azure Static Web Apps

Released at Microsoft Build, Azure Static Web Apps (SWA) takes your source code to global availability. So you can develop your app while Azure Static Web Apps automatically builds and hosts it.

Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, or Vue. These apps include HTML, CSS, JavaScript, and image assets that make up the application. Under a traditional web server architecture, these files are served from a single server along side any required API endpoints. SWA helps host your static assets in an optimized server and makes them available in multiple servers around the world. SWA also optionally hosts your APIs using Azure Functions. Then it sets up a single URL for your users to visit.

You'll get everything in the checklist above!

Getting started

The first step is to create an app!

If you need one to try this service out you can follow these steps. If you have your own app, you can skip these steps entirely and proceed to the next section.

Click on https://github.com/johnpapa/shopathome/generate to create a new repo
Give your repo a name and create the repo
Click the folder .github/workflows in the GitHub web interface
Click on the file with the pattern azure-static-web-apps.****.yml
Delete this file

It is important to delete the workflow file because you'll be creating your own very soon!

Now you have four apps! This is a monorepo with the same app written in Angular, React, Svelte and Vue, each in their respective folders.

The starter code includes the four apps and the starting point for an API that you'll use.

├ angular-app  👈 The Angular client app
├ api          👈 The API (Azure Functions)
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Free Azure Trial

Next, you'll need an Azure account. Don't worry if you don't have one, you can use the free Azure trial. Did I say it was free? Good, because it's free.

Get your free trial here

Go to the Azure Portal

So you have your code and an Azure account, now you can create a SWA resource for your app!

Go to the Azure Portal here
Select your Azure subscription
Create a resource group (this is just like a folder to collect all of your Azure "stuff")
Name your SWA (ex: shopathome-sample)
Choose the region closest to you
Sign in with GitHub
Select your GitHub organization
Select your GitHub repository (ex: shopathome)
Select your branch (ex: main)

Set your folder locations
Set your App location to the javascript framework you prefer
- Angular - angular-app
- React - react-app
- Svelte - svelte-app
- Vue - vue-app
Set the Api location to api
Set the App artifact location to one of the following, based on the framework you chose:
- Angular - dist/angular-app
- React - build
- Svelte - public
- Vue - dist
Click the Review + create button
Click the Create button

Go to your web site

Azure is now creating your resources. SWA will create a GitHub Action workflow file and commit it to your repository in the .github/workflows folder. This file will watch the branch you selected for changes. When you push changes to the branch they will trigger the GitHub Action workflow to build and deploy your app to SWA!

Soon, you'll be presented with a button to Go to Resource. Click this
At the top of the page you'll see several links. Click the GitHub Action Runs link

You'll be brought to your GitHub Action. When it is complete, you'll see green arrows everywhere.

Once the action has completed the build and deploy, you can go back to the portal and click the URL link to open your web app

Depending on which framework you chose to build, you should see one of the following apps!

Beyond the first look

Oh there is so much more you can do! You can add a custom domain with an SSL certificate, authentication, and authorization. You can make a changes in a new branch, make a pull request, and then have the GitHub Action build and deploy your changes to a staging/preview URL!

This may be your first look, but if you want to learn more you can try one of our hands-on tutorials at Microsoft Learn today!

Static Web Apps Learn modules:
- Angular, React, Svelte, or Vue JavaScript app and API
- Static web app with the Gatsby static site generator
Static Web Apps docs
Static Web Apps announcement

Service Workers with Keilla Fernandes on Real Talk Javascript #80

John Papa — Sat, 25 Apr 2020 17:23:53 +0000

Keilla Fernandes talks with John, Ward, and Dan about service workers. What are service workers? How do you keep data fresh and in sync? What about service workers and push notifications? And how does HTTP and caching work with service workers?

const podcast = { 
  episode: 80,
  title: 'Service Workers with Keilla Fernandes',
  topics: [ 
    'service workers', 'javascript', 'caching',
  ],
  guest: 'Keilla Fernandes',
  hosts: [
    'John Papa', 'Ward Bell', 'Dan Wahlin'
  ]
};

Brought to you by

Resources:

Timejumps

02:36 Guest introduction
03:55 What are service workers?
07:53 Where could people be using service workers?
08:46 Sponsor: Ag Grid
09:51 How do I keep everything fresh and in sync?
28:33 Sponsor: IdeaBlade
29:33 Chrome Developer tools and service workers
31:20 Service workers and push notifications
32:33 Do I need to worry about service workers?
37:39 How does HTTP and caching work?
40:38 Final thoughts

Tutorial: Refactor Your Node.js and Express APIs to Serverless APIs with Azure Functions

John Papa — Sat, 18 Apr 2020 14:40:11 +0000

Wondering how you could take advantage of Serverless architecture? Now you can refactor a Node.js Express app to Azure Functions in this hands-on tutorial

Overview

Your company is launching a vacation planning website that helps customers add, edit, view, and remove plans from their wish list. Your API, which powers these features, runs on Node.js and Express is critical to the success of the application.

Your API server is critical to the success of the application. The APIs are hosted on a server running Node.js and Express. When you launch your application, it must scale up and down as needed while minimizing costs. There's a lot for you to think about!

What if you could reduce some of these burdens without rewriting your entire API? By shifting the API to a serverless model using Azure Functions, you enjoy the following benefits:

No server to maintain
Cost reductions
Application scaling up and down as needed

Plus, you could write less code!

Learning objectives

In this tutorial, you move from an Express API to a serverless architecture through the following steps:

You'll begin by exploring and running the Node.js and Express APIs in the sample project
Next, you'll create an Azure Functions application
Then, you'll refactor the Express routes and data calls to use the Azure Functions application
Finally, you'll explore and launch your application, as shown below

Planning the Shift to Serverless

You're ready to shift your Express.js APIs to the serverless model. But first, consider why you might make these changes and what effort is required to update your app. Here are three things to consider:

Configure and maintain the physical server for your Express app
Managing scaling for your app (up and down), as demand fluctuates
Manage the costs associated with deploying your server

Serverless architecture eases the server maintenance, scaling, and cost for you.

Why would you make this shift? Overall there's less to think about when building a serverless app.

About your project

The app begins as a Node.js Express application in TypeScript that you'll shift to an Azure Functions app.

If your Express app is using JavaScript instead of TypeScript, create an Azure Functions app using JavaScript.

What's in the sample project on GitHub that you'll learn about in this module? That's a great question!

The client application is developed with Angular, however you could easily have used Vue.js or React.js. In this module, you learn to:

Create the Azure Functions app
Run and debug the app alongside the Angular application locally on your computer
Refactor the application's code to leverage a serverless design

When you're done, your application and its API will feature all the benefits of serverless technology!

Next, you'll get the sample application, install its dependencies, and build it locally.

Try everything you see in this article in this hands-on tutorial

JavaScript development on a Mac with C-Mac on Real Talk Javascript #79

John Papa — Sat, 18 Apr 2020 14:12:08 +0000

Who knows the state of developer life on macOS better than Christina Warren?

Listen to Christina as she shares with John Papa, Craig Shoemaker, and Ward Bell about what it's like to develop on a Mac, why you might choose a Mac over a Windows PC, what Homebrew is and why you should consider using it, thoughts on macOS Catalina, and what a dot file is.

Real Talk JavaScript ep 79

const podcast = { 
  episode: 79,
  title: 'JavaScript development on a Mac with C-Mac',
  topics: [ 
    'mac', 'javascript', 'deploying javascript',
  ],
  guest: 'Christina Warren',
  hosts: [
    'Craig Shoemaker', 'John Papa', 'Ward Bell' 
  ]
};

Brought to you by

Resources:

Final Thoughts

Timejumps

01:19 Guest introduction
05:33 What's it like to develop on a Mac?
11:18 Sponsor: Ag Grid
12:23 What's a compelling reason to use Mac over Windows?
18:40 What do you use Homebrew for?
28:13 Sponsor: IdeaBlade
29:17 What's your take on Catalina?
40:03 What's a dot file?
48:38 Final thoughts

What's it Like to Go From React to React Native - Jenn Creighton on Real Talk Javascript #78

John Papa — Sat, 18 Apr 2020 14:10:27 +0000

What's it like to go from React to React Native? Jenn Creighton talks with Craig Shoemaker about her journey from React to React Native and some of the issues she encountered and what she learned along the way. She explains where React Native fits, how iOS and Android development differs, and what it's like to debug these apps.

Recording date: 2020-02-13

Going React to React Native with Jenn Creighton on Real Talk Javascript #78

const podcast = { 
  episode: 74,
  title: 'Going React to React Native',
  topics: [ 
    'react', 'pwa', 'deploying javascript',
  ],
  guest: 'Jenn Creighton',
  hosts: [
    'Craig Shoemaker', 
  ]
};

Brought to you by

Resources:

Timejumps

02:08 What is React Native?
09:47 Sponsor: Ag Grid
10:52 iOS vs Android development
17:15 What sort of speed bumps did you hit along the way?
28:28 What do you do for debugging?
29:56 Sponsor: IdeaBlade
31:05 Opportunities for talks and blogging
35:41 Did you consider any other solutions?
39:20 Final thoughts

Hosts and Guests

Craig Shoemaker @craigshoemaker

Jenn Creighton @GurlCode

Try gh, GitHub's new CLI

John Papa — Sat, 11 Apr 2020 02:12:59 +0000

Quiz: What do you use every day, that is essential to your development workflow, and has a vast and complex UI and API?

Answer: GitHub, of course!

You likely interact with the git commands in terminal for some operations and then go to the https://github.com web site when you need to perform other operations. This back and forth between terminal and the browser to perform git operations could be more efficient if you could stay in one zone: CLI or the browser: Well, the GitHub team has felt this too.

They have released a new CLI called gh, in beta.

Resources first

If you are in a hurry, here are all of the links you'll need, in one place:

Install gh
the gh docs
short survey on gh
And if you feel motivated, here is your Free Azure Trial

Install gh

First, install gh using the appropriate instructions for your OS.

You can check your version at anytime with the following command.

gh --version

Awesome Possibilities

{ 1 } Create an issue

You're working on your code and you run into a bug. But you are busy working on another challenge and don;t want to get distracted. Now you can run a quick command to create an issue without leaving your terminal!

This is awesome! Now you can stay focused on your current work and get back to this later.

gh issue create -t "Save invokes a 500 error" -b "steps to reproduce: fill out the form, then press save."

{ 2 } View issues

Want to see what issues are open?

gh issue status

This produce the following output format:

Relevant issues in johnpapa/hello-worlds

Issues assigned to you
  There are no issues assigned to you

Issues mentioning you
  There are no issues mentioning you

Issues opened by you
  #1  Save invokes a 500 error    about 1 minute ago

{ 3 } Create a repo

You know how sometimes you want to create a repo locally and in GitHub from your computer? Use the following command and you can create a repo named hello-world, add a description, and make the repo public!

gh repo create hello-world -d "A react app for the web" --public

{ 4 } Open the browser to your repo

You're working on your code locally and you want to go visit the repo in the browser. Now you have to go type in that URL in the address bar. Nope! Run the following command from your code's local folder and the browser opens right to your repo!

gh repo view
# this will open your repo, such as https://github.com/johnpapa/hello-world

{ 5 } Clone a repo

You can run some common commands like cloning a repo too.

gh repo clone git@github.com:johnpapa/hello-world.git

{ 6 } Fork a repo

Want to fork a repo? How about fork it and clone it locally to your computer? Try this command.

gh repo johnpapa/hello-worlds fork --clone

{ 7 } Create a pull request

You've made your changes to your branch and now it is time to create a Pull Request (PR). You could go to the browser, browse to your repo, and start clicking around to create the PR. Or you could use the following command to create a PR!

The --fill flag indicates that you won't be prompted for title/body. Instead it will just use the commit info for those.

gh pr create --fill

{ 8 } Help commands

A great place to start is with the --help flag. You can show the options available for any command by appending the --help flag.

get help on commands

gh --help

sub commands

gh issue --help
gh pr  --help
gh repo --help

pr commands

gh pr checkout --help
gh pr create --help
gh pr list --help
gh pr status --help
gh pr view --help

repo commands

gh repo clone --help
gh repo create --help
gh repo fork --help
gh repo view --help

issue commands

gh issue create --help
gh issue list --help
gh issue status --help
gh issue view --help

{ 9 } Read the docs

There is a lot more that you can do, so go ahead and read the gh docs.

{ 10 } git is still awesome

No worries, you can mix and match using the git commands and the gh commands.

Summary

Give it gh a try! GitHub is accepting feedback now during their beta through this short survey.

React at Starbucks (Real Talk JavaScript #74)

John Papa — Sun, 29 Mar 2020 02:05:09 +0000

What motivates companies to move towards developing mobile apps using Progressive Web Apps (PWA)? How can you characterize the users of a native or PWA mobile apps? How does React hold up in a real-world situation?

React at Starbucks is this week's topic on Real Talk JavaScript. Listen here.

Cher Scarlett talks with John and Ward about her experiences working on the Starbucks PWA, and moving from Vue to React. Along the way we discuss her story of moving from Vue.js to React.js and the plethora of programming platforms and languages that Cher has expertise in.

Recording date: 2020-01-21

const podcast = { 
  episode: 74,
  title: 'React at Starbucks',
  topics: [ 
    'react', 'pwa', 'deploying javascript', 
  ],
  guest: 'Cher',
  hosts: [
    'Ward Bell', 'Dan Wahlin', 'Craig Shoemaker', 
  ]
};

Brought to you by

Resources

Timejumps

01:17:17 Guest introduction
04:38:11 Why go PWA?
08:08:16 Can you characterize PWA user vs mobile app user?
10:21:20 Moving from Vue to React
18:09:00 How did you handle data?
25:09:00 Sponsor: IdeaBlade
26:08:12 Writing with hooks and functional components

Hosts and Guests

Carrying my Laptop in the Outback Solo Messenger Bag

John Papa — Tue, 10 Mar 2020 02:56:18 +0000

Call me crazy, but there's just something about being out and surrounded by people that stimulates my brain. Pop in some AirPods (noise canceling is my favorite), listen to some music and grab a comfy table and chair to do some work. All of this, while surrounded by the white noise of people hustling around.

I work better with white noise and some caffeine. As a remote worker, I work in coffee shops quite often. Even when I worked locally and had a desk in an office building, my co-workers knew that they could find me cozy in a chair at one of the local coffee shops.

I pack my 16 inch MacBook Pro, power cord, phone, iPad and pencil, a Field Notes book, and some pens, and I head to the local coffee shop to work. One of the problems I often had over the years is that the bags (backpacks or messenger bags) that I used over the years were better suited for traveling than local work. The difference is that when I travel, I need the bag to hold more than when I am local. When I'm local, I want something lightweight and slim, yet able to carry what I need so I can stay hands-free.

So I went looking around at quite a few bags. Some were slim, but heavy with thick materials. Some were slim, lightweight, but looked like they would last about a week. Some were slim, but held 13" laptops only. Finally, I found one that appear to be slim, lightweight, and could hold my tech.

The one that caught my eye is a messenger bag style called the Outback Solo from Waterfield. They list it on their web site as "OUTBACK SOLO CASE FOR MACBOOK, IPAD, AND SURFACE" (please pardon all uppercase). This review will detail how my first two months have gone using this bag.

Disclosure of Material Connection: I received this product for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

First Impressions

The Waterfield company sent me the Outback Solo styled in tan waxed canvas with chocolate trim. I was skeptical that this slim carry case would be lightweight and hold my tech. When I opened the box and put the bag over my shoulder, I was happily surprised by how lightweight it is. There's a checkmark!

The bag closes with a magnetic latch. I was skeptical that this would close once the front pouch was filled. However, it does close nicely. The downside here is that it doesn't stay closed well. It is a magnet, so it only stays closed as well as a magnet can. It doesn't open by itself, but I also would not be surprised if it flies open on its own with a slight jostling of the bag.

The bag is made of soft chocolate brown leather. The bag looks like it will wear well over time, giving it a "worn in" look. The strap seems to be made of nylon material, and it is adjustable.

The real test came when I tried to put my 16" MacBook Pro, iPad pro, power cords, and my iPhone in the bag. All went in nice and smooth!

However, I did run into a fit problem on day 1. I purchased a magnetic connector for the USB-C power cord, which sticks out about half a centimeter from my laptop. When I forgot to take it out, because frankly, I usually keep it plugged into my laptop so I don't lose it, the laptop barely fits in the bag. Sure, I could get it in, but it felt like it might rip the interior lining. However, after a few days of use, the bag stretched enough to fit this extra width, and it no longer snagged. I was relieved because it seemed like such a small protrusion. To be clear, the 16" MacBook Pro fit great without the USB-C magnetic connector, but with the connector, it was very tight. But after a few days, the bag stretched, and it fits fine now.

I am now able to get my essentials in the bag nicely, including:

Main pouch holding my 16" MacBook Pro
Front pouch holding my iPad Pro 12.9", apple pencil, Field Notes book, gel pen, and air pods
Back pouch holding my MacBook Pro's power cord and block

Somedays, I use the iPad Pro and others I do not. It depends if I want to use it as a second monitor with sidecar or if I feel like drawing that day (I sketch note quite a bit). So somedays the bag is jam-packed and others, I leave the iPad home.

The feel of the bag is excellent. I enjoy carrying it as it keeps my hands free and doesn't cause any pains after carrying it when walking around.

Does Your Laptop Fit

This may be the million-dollar question for you. Most laptop bags max out at 15" laptops, so I was concerned that my 16" MacBook pro would never fit, but I was glad to see it did! Waterfield has a variety of sizes for the Outback Solo bag. From their website, they list that "the main compartment in the Outback Solo is custom-fit for devices, like the:"

Apple MacBook & iPad Pro

16" MacBook Pro
13" MacBook Air Retina
13" MacBook Pro with Touch Bar
iPad 12.9" Face I.D. Apple Smart Keyboard Folio
iPad 11" Face I.D. Apple Smart Keyboard Folio

Microsoft Surface

Surface Pro X
Surface Pro 7 (and previous Surface Pro models)
Surface Go
Surface Book 2 13.5-inch
Surface Book 2 15 inch

Others

Pixel Slate
reMarkable (fits in Size #28)

The front pocket stores accessories like a power supply, cords, and other small items. It has a built-in pocket for the Surface Pen or Apple Pencil 2, and one for the iPhone 11 Pro Max. The back pocket can fit documents and other items.

all of the above is taken from the Waterfield web site

Is it Worth the Price

I was given this bag to review, but would I pay \$159 for this bag? That's the real catch. Knowing what I know now, yes, I would. But that's the thing ... I didn't know how much I'd like it just by looking at the web site. before getting the bag I thought it was a bit on the high side of the price spectrum. If there wasn't a return policy, I don't think I would get it. And that is true for any bag I purchase. I want to make sure that if I get it and things do not fit, that I can return it.

Here is the key statement in Waterfield's return policy from their web site:

We do our best to make sure you will be satisfied with every purchase. However, should any item fall short of your expectations, return it to us unused within 30 days of receipt and we will send you a prompt refund. We don't charge any restocking fees (unless otherwise noted), and you will be responsible for all shipping charges.

Given their return policy, I think the risk is minimal. There is a shipping charge, but I think that is acceptable. You'll have to decide for yourself, of course. Waterfield appears to be out of San Francisco, so consider that if returns are on your mind.

Overall

Two months later, I enjoy this bag. It has a great feel, fits my tech, and feels light on my shoulder. It's a bit on the pricey side at $159, but I expect to get many years of use out of this bag. Now I keep my travel backpack filled with travel needs (power adapters, extra wires, essential medicines, almonds bags as a snack, and an emergency shirt). My Outback Solo is my daily commute bag and gets most of my use.

The difference is noticeable to me. Now that the Outback is my daily bag I am carrying less weight and spend way less time searching for things in my bag. It's way more convenient and less of a hassle than most bags I have tried.

Ultimately, if you are in the market for a stylish, slim, and lightweight bag for your tech, I recommend you take a look at the Outback Solo.

DEV Community: John Papa

Do More using GitHub Copilot with AI and VS Code

A Pair Programming Partnership

Introducing GitHub Copilot

Enhancing Developer Productivity with AI

A Live Demo that Amazes

Copilot Goes Beyond Coding

Unleashing the Potential of AI for Documentation and Code Quality

Embracing AI for Angular and React Development

Enhancing Developer Creativity and Happiness

What Lies Ahead for Developers and AI?

What Will You Do?

References

Finding what matters to you

Migrating Vue 2 to Vue 3

Why

Vue 3

JavaScript to TypeScript

Composition API

Migration

1. Migrate from Vue 2 to Vue 3

2. Adding TypeScript

3. Fixing TypeScript

4. Vue Router

5. Vuex

6. Pausing for TypeScript

Summary

Free Workshop on Azure Static Web Apps

Free Static Web Apps Workshop

Static Web Apps - First Look

Azure Static Web Apps

Getting started

Free Azure Trial

Go to the Azure Portal

Set your folder locations

Go to your web site

Beyond the first look

Service Workers with Keilla Fernandes on Real Talk Javascript #80

Brought to you by

Resources:

Timejumps

Tutorial: Refactor Your Node.js and Express APIs to Serverless APIs with Azure Functions

Overview

Learning objectives

Planning the Shift to Serverless

About your project

JavaScript development on a Mac with C-Mac on Real Talk Javascript #79

Brought to you by

Resources:

Final Thoughts

Timejumps

What's it Like to Go From React to React Native - Jenn Creighton on Real Talk Javascript #78

Brought to you by

Resources:

Timejumps

Hosts and Guests

Try gh, GitHub's new CLI

Resources first

Install gh

Awesome Possibilities

{ 1 } Create an issue

{ 2 } View issues

{ 3 } Create a repo

{ 4 } Open the browser to your repo

{ 5 } Clone a repo

{ 6 } Fork a repo

{ 7 } Create a pull request

{ 8 } Help commands

{ 9 } Read the docs

{ 10 } git is still awesome

Summary

React at Starbucks (Real Talk JavaScript #74)

Brought to you by

Resources

Timejumps

Hosts and Guests

Carrying my Laptop in the Outback Solo Messenger Bag

First Impressions

Does Your Laptop Fit

Is it Worth the Price