DEV Community: Joe Previte (he/him)

I developed on an iPad for two weeks: Here’s what I learned

Joe Previte (he/him) — Mon, 08 Feb 2021 21:24:31 +0000

“We’re going to send this to Apple and you should get it back in 5-7 business days.”

And this is how the first work week of 2021 started for me — my brand new MacBook Pro keyboard unusable and out of my possession for what could be two weeks. Fortunately, my coworker had sent me an iPad testing device a few days prior. The timing couldn’t have been better.

I made a decision.

I insisted to my manager and HR that I could use the iPad while I waited for my laptop to be repaired instead of letting them send me a new laptop. Plus, it gave me an excuse to answer the question, “Could I work and develop full-time off an iPad?”

Here’s what I learned.

You can use an External Monitor, Keyboard, and Mouse

My home office setup includes:

At first I thought I couldn’t use these with the iPad. After some trial and error, it turns out you can! I connected the keyboard via USB to the monitor and then the monitor via USB-C to the iPad and it “just works.” The mouse was easy to connect via bluetooth.

The iPad mirrors the display to the monitor, which means you don’t get the screen real estate you do with a laptop, but it’s better than nothing. There were also some apps which would not mirror to the external monitor — most notably the HEY email app and the GitHub app.

VS Code on iPad feels like magic

I still can’t believe you can use VS Code on an iPad. Using Coder, I created an environment for me to work on code-server. I was then able to install the editor (code-server) as a PWA and use VS Code as if it were a native app on iOS. The experience is magical. You feel powerful, like you can take your editor anywhere you’d like. And thanks to the Dev URLs, I can run apps on any port, and create a Dev URL to access them from the browser. This made my life a lot easier.

iPads as Devices are Portable and Powerful

The battery of the iPad surprised me. It felt like it lasted way longer than I would have expected. The performance felt fast. There was hardly ever any lag. With the Magic Keyboard, I felt like I could take the iPad anywhere and start coding. It was liberating. In addition, I loved having the cmd + shift + 4 shortcut for taking screenshots and the built-in screen recording added in iOS 14.

Didn’t have much use for Apple Pencil

Along with the Magic Keyboard, I had the Apple Pencil at my disposal with my iPad. Unfortunately, I didn’t find much use for it. I am not blaming Apple or the iPad for that, but rather myself. I think if I were more of a designer, there would be use. Or if I were a student in college taking notes, I could use it. I didn’t have much use for it and can’t say I recommend it to fellow developers considering a full-time iPad setup.

Browsers are Inconsistent

Sadly, one of my main frustrations was the lack of consistency for browsers on iOS. My preferred browser is Firefox. However, there were a number of bugs which caused me to switch over to Chrome. The keyboard shortcuts I was used to from desktop did not always map over to the iOS apps, which slowed down my workflow significantly. There are also a number of UX-related issues for mobile apps. Chrome wasn’t perfect, but it was better than Safari in most aspects. My one wish: make a browser that is consistent across platforms and stable.

Use the PWA and Gain Control Over Keyboard Shortcuts

If you’re going to work off an iPad and write code, being able to download your editor either as a native app or a PWA is a must. This is the only way for you to get keyboard shortcuts that don’t conflict with global or app shortcuts.

Once I started using the PWA for Coder’s editor, my workflow levels approached normalcy. I had to manually add a lot of keyboard shortcuts to my settings in VS Code/code-server. Once I did, I felt like I was back in my usual flow.

Inspect Browser is a Tool You Need

When you’re developing on iPad and using the standard iOS browser apps (Chrome, Safari, Firefox), you don’t have access to the developer tools. This means you need a workaround. The best one I found was an app for purchase ($6.99) called Inspect Browser. Although the UX isn’t that of your standard browser devtools, it succeeds in filling the gap. It provides you with the ability to look at the console and inspect elements. There are more features but those were the two it helped me with the most.

Summary

Overall, I really enjoyed the two weeks I spent developing off an iPad full-time. There were many moments I wanted to give up and ask HR to send me a laptop, but I’m glad I stuck with it. I have a greater understanding of the iPad workflow from a developer perspective and I hope I can translate that into product improvements that make the UX for both Coder and code-server users even better.

Thanks for reading! It would mean a lot to me if you shared this on Twitter. If you have questions or want to get in touch, feel free to shoot me a DM on Twitter.

This article was first published on the Coder blog here.

Have you tried Rust?

Joe Previte (he/him) — Mon, 22 Jun 2020 20:56:39 +0000

For the fifth year in a row, Rust comes out as the most-loved programming language according to Stack Overflow's 2020 Survey.

Have you tried it yet? If so, what are your first impressions?

If you haven't, what's the reason, or what would make you want to try it?

Would love to hear your thoughts 😃

WOOOOOOO

Joe Previte (he/him) — Fri, 06 Mar 2020 03:24:17 +0000

This. Is. My. First. Blog. Post.

Written quickly on GitHub as an issue.

2019 Goals — August Update

Joe Previte (he/him) — Mon, 02 Sep 2019 16:36:41 +0000

Achievements

Here, I’ll share the goal followed by the related achievement of the month after the arrow.

Intellectual

Launch 2 projects on Product Hunt -> Launched the landing page for dip.chat 🎉

I worked all month getting things ready and last Friday, I launched the landing page for a virtual coworking community I've started called dip.chat 😄

I'm really excited because we already have 200 members 😱

The idea behind it? Well, it came to me after months of going to coffeeshops in the weeknights and weekends to find the atmosphere I wanted while working on my side projects.

I knew I could make it work when I heard about Tandem. Tandem allows you to create rooms where you can instantly video/audio chat. By combing Tandem with a private Slack Workspace, dip was born 😄

I don't have any immediate plans for the future, but for now, you can sign up at dip.chat.

Professional

Write 6 articles -> How to Release a Custom React Component, Hook or Effect as an npm Package

This was a blog post in the making. I probably started it in August but Twilio finally published it on their blog! You can read it here: How to Release a Custom React Component, Hook or Effect as an npm Package

React Custom Hooks Workshop

Another project long in the making is the React Custom Hooks Workshop I've been working on for egghead. It's finally happening! In two weeks, I'll be teaching my workshop called "Create & Publish Custom React Hooks". There are still some tickets left if you're interested:

Tickets

That's all folks! Until next month!

[Photo by Erik Mclean on Unsplash]

Announcing dip.chat - a virtual coworking space

Joe Previte (he/him) — Fri, 30 Aug 2019 14:38:44 +0000

Hi friends!

Today I'm launching the beta for a new project I've been working on:

dip.chat

I wrote a Twitter thread about it here:👇🏼
Link to thread

2019 Goals — July Update

Joe Previte (he/him) — Sun, 11 Aug 2019 22:43:52 +0000

11 days into August, so I'm a bit late on my July update but better late than never! 😜

Achievements

Here, I’ll share the goal followed by the related achievement of the month after the arrow.

Intellectual

Launch 2 projects on Product Hunt -> Made a lot of progress on new project 👀

The majority of July was spent working on my next project. It's a virtual coworking community for developers.

My goal is to launch the MVP by the end of August. Examining where I'm at right now, I should be on target to achieve this. The main task for this month will be building the landing page and setting up a sign up list.

Keep an eye out for more info next month on Twitter!

Financial

Start investing -> Rolled old 401K into Roth IRA

My previous employer had a 401K match. I was able to transfer that money (about $4K) into a Roth IRA with Vanguard. Even though I haven't made a "huge" jump into investing, it feels like a step because now I have the Roth IRA, along with an old Simple IRA from another previous employer all in the same account. It feels consolidated, which makes me happy.

I'm hoping with my new job at Echobind, I can easily set up a way to contribute to the Vanguard Roth IRA each month. Once that's set up, then I'll feel like I've fully achieved this goal.

Start investing -> New Split Paycheck System

When I started my first full-time job, I set up an automatic paycheck split so that 15% of every paycheck went directly into my savings. This system has served me well in terms of saving money.

I've been reading a lot about financial independence, retiring early, etc. and one of the tips I remembered was to continue living the way you were even after you receive a pay raise.

Since I started a new job on July 1st with a significant pay raise, I thought to increase the split of my paycheck. This month, I'm experimenting with a high percentage (50%), meaning 50% of each paycheck (I get paid 2x/month) will go into savings and 50% will go into my checkings.

I'm fortunate enough to make enough to be able to do this and still be able to pay all the bills (the main ones being rent/food). If this proves to be sustainable, it should help me hit this $36K saving goal by the end of the year.

Updates

Not much from the update side. I am reading a book right now called "Atomic Habits" and one of the points the other makes is to focus on systems/habits rather than goals.

Therefore, I may reevaluate the goals I set this year and see if I can reword them to focus more on systems/habits rather than goals. I want to read more of the book before I make that decision but thought it was a relevant piece to share here.

That's all folks! Until next month!

[Photo by John Fowler on Unsplash]

2019 Goals — June Update

Joe Previte (he/him) — Mon, 01 Jul 2019 15:13:40 +0000

June was a busy month. I'm excited for July because a) the weekends are looking free (no travel or events so far) and b) I have a project I'm excited to work on 😄

But before I share any updates, here's a bit of reflection on goal-related stuff for June.

Achievements

Here, I’ll share the goal followed by the related achievement of the month after the arrow.

Intellectual

Launch 2 projects on Product Hunt -> Finished MVP for mentored.dev

So I didn't "complete" this goal but I hit a milestone. I had been talking to my friends about finishing mentored for a while. My project board on GitHub was filled with all these awesome features I wanted to build.

But while chatting at the Phoenix ReactJS meetup, we had a realistic conversation. And they said, "What are the remaining features you need to add to be 'done' with a v1?"

I thought for a second. Okay, they're right. I need to cut scope and get this out the door. So I moved everything to the backlog and only added the key pieces - saving progress to local storage and improving the UI flow.

I did all that and shared a Twitter thread about the journey this weekend. It felt really good. It was scary, but I had put in a lot of time and effort and I was excited to share it.

I'm not sure where I'll take it next but this marks the completion of the first phase.

Professional

Write 6 articles -> 2 dev.to articles written! (Total: 3/6)

I think I was on a teaching/writing "high" this past month because I knocked out two articles. Actually, what made it "easy" was writing the articles as I was learning two new things. I thought it would help me solidify the learning if I wrote it as I learned.

The first was "React Native - Adding App Icons for Android " where I shared the basics of adding app icons to Android. I started learning React Native and wanted to do the simplest thing: add an icon to my app.

After a lot of misunderstanding, I finally got it working 😃 So I wrote the article to a) help me remember and b) share what I learned.

The second article I wrote was titled "How to Create Code Profiles in VSCode ". My wife is letting me borrow her personal laptop until I save up enough to buy my own personal laptop. So, while setting things up, I decided I would try a technique used by a fellow egghead instructor - code profiles. They're basically a saved state of your settings.json for VSCode. This is helpful when recording screencasts where you need a larger font size for instance. I wrote this one while going through a README on GitHub to better understand it.

Updates

Being at the halfway point in 2019, I've decided reevaluate my goals I set back in January.

Although I've made progress towards some of these goals, I would like to change direction and get more specific. My long-term goal is to achieve what I call "freedom of time" - the ability to spend your time how you like every day. Some call this financial independence.

I've spent some time mind-mapping to think about how I can get there and so I want my goals to align with that. For July, I'm going to be focusing on one project: a new egghead course related to React and npm packages 👀

I wouldn't say anymore but keep your eyes peeled for a blog post and a new egghead course.

That's all folks! Until next month!

[Photo by Nitish Meena on Unsplash]

How to Create Code Profiles in VSCode

Joe Previte (he/him) — Thu, 27 Jun 2019 17:47:21 +0000

This post piggybacks off of the work done by @avanslaars who is a fellow instructor at egghead.io. He shared this in the egghead Slack sometime ago and I never got around to setting this up myself.

Now, I'm setting up a new laptop and decided to give it shot. Following Andy's repo here, I'm going to walk you through the process so you can follow along.

Before we begin, a "code profile" is essentially a different settings.json configuration. You can also customize which extensions load per code profile but that's beyond the scope of this article.

1. Create a `code_profiles` directory

The first thing we need to do is create a place to store our "profile settings". It doesn't have to be called code_profiles, but we're going to use that term since Andy does and it sounds nice.

He keeps his at the root of his computer so we'll do the same:

# From the root of your computer ~/
mkdir code_profiles

After your done, cd into that directory:

cd code_profiles

2. Create your first profile

Since I'm going to be using this for egghead recordings, I'm going to create a new directory called egghead:

# mkdir name-of-profile
mkdir egghead

Then cd into that directory:

cd egghead

3. Add your settings.json

VSCode is expecting a data directory with a User subdirectory. In there, we'll place our settings:

# -p will create parent directories as needed
mkdir -p data/User

After those are created, change into that new User subdirectory and create your settings.json file:

# Go into that directory
cd data/User

# Create your settings file
touch settings.json

Then open up your settings.json file and add in your settings. I'll add a modified version of what Andy has in his:

{
  "editor.tabSize": 2,
  "editor.quickSuggestions": false,
  "editor.parameterHints": false,
  "editor.suggestOnTriggerCharacters": false,
  "editor.hover": false,
  "editor.fontSize": 18,
  "editor.tabCompletion": true,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Night Owl",
  "editor.cursorBlinking": "solid",
  "editor.cursorStyle": "line",
  "editor.minimap.renderCharacters": false,
  "terminal.integrated.fontSize": 16,
  "explorer.openEditors.visible": 0
}

4. Test your new code profile

Now let's make sure we did everything right. Assuming you've already set up VSCode to [launch from the command line](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line, we can launch our new profile by running:

# replace CODE_PROFILE_NAME with the profile name used earlier
code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data

And if it worked, you should see VSCode open with your settings:

5. Create an alias for your profile.

I don't know about you, but I don't want to have to remember code --user-data-dir ... so let's take Andy's advice and create an alias.

I'm using zsh so I'm going to add this alias to my .zshrc file like so using the keyword "teach":

# replace CODE_PROFILE_NAME with the profile name used earlier
alias teach="code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data"

Now, when you want to use this code profile, all you have to do is type:

teach ~/projects/lesson

Woohoo! And that's it.

Special thanks to @avanslaars for sharing this. Here's a link to his code_profiles repo where I learned how to do this.

NOTE: If you are using VSCode in Portable mode, there is a known bug where the flag user-data-dir does not currently work (special thanks to @myfonj for pointing this out).

React Native - Adding App Icons for Android

Joe Previte (he/him) — Tue, 25 Jun 2019 16:36:27 +0000

Recently, I started dabbling in React Native to prep for a new job. Coming from React, things felt familiar. However, it feels like there is less documentation/articles/tutorials out there compared to anything related to the web (which makes sense - React Native hasn't even released a v1).

One of the things I've been working with is adding an app icon for the Android version of the app I'm building. The goal of this post is to share everything I've learned so far so that maybe it will help you avoid any challenges I ran into.

WARNING: As mentioned, I am new to React Native, so please take what I say here with a grain of salt. If you find something that is incorrect, please let me know in the comments.

So let's get to it! 🕺🏼

What do I need to know?

In order to add app icons (more commonly called "launch icons") to your Android version of your React Native app, there are a few things you need to know:

Should my icon be square or round?
Where do the icons live within my app?
How do I make them?

We'll tackle these one at a time.

Should my icon be square or round?

The answer is it depends.

Depending on the OEM device, the system will decide whether it will use a "squareish" icon or a round icon. When I ran my app on the Pixel 2 emulator, the square icon was placed "into" a circular icon and it looked ugly 🤮

After looking at the docs, I found this section which explained why that was happening:

You must only use the android:roundIcon attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape.

The logo/icon I was using had a circular shape hence why I had an issue.

In addition to the square and round icons, you may want to create what's known as an "adaptive icon". According the the Android Developer Docs, "adaptive launcher icons" were introduced in Android 8.0. As of this writing, the latest version is Android 9.0 (also known as Pie).

To summarize, you may need both, depending on the shape of your icon. And you should definitely check out adaptive icons.

Where do the icons live within my app?

Luckily, this answer is pretty straightforward.

Assuming you created your project using the React Native CLI, they will live here:

|- android
|-- app
|--- src
|---- main
|----- res

You'll have a bunch of different directories that are prefixed with mipmap and suffixed with different sizes like hdpi and mdpi for instance.

These will each contain your icon in different sizes.

How do I make my icons?

I recommend designing your icons in Figma. You should create two layers:

a background layer - the background of the icon
a foreground layer - the icon

I created mine in at 108 x 108 and then exported them as PNGs at 1x.

Then I followed @_s_farias 's post called "How to create adaptive icons for Android using Android Studio". This made it very easy to create the icons because Android Studio generated all of them for me and even created most of the necessary subdirectories. 😄

*One thing to note:

I did have to manually create a drawable directory within res. I then copied the files from the mipmap-xxxhdpi to the drawable directory. I don't know if this is right, but the build succeeded and it worked 🤷🏼‍♂️ (Hoping someone will explain the correct way to do this).

Common Errors

Forgetting to update the AndroidManifest.xml file

In the very beginning, I ran into errors because I forgot to update these two lines within this file:

      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"

resource drawable/ic_launcher_foreground not found

Your build is failing because you didn't create the drawable directory. See "One thing to note" in previous section.

Anyways - thanks for reading - hope this helps with you React Native Android icons! 🙏🏼

LearnInPublic

2019 Goals — May Update

Joe Previte (he/him) — Mon, 03 Jun 2019 18:25:36 +0000

May was a busy month! I married my best friend and girlfriend of 3.5 years 😍 Hence, I focused on that and put my goals on the side for the month. But here's my update as always.

Achievements

Here, I’ll share the goal followed by the related achievement of the month after the arrow.

Intellectual

Read 12 Books -> Read "The Meaning of Marriage" and "Remote: Office Not Required"

A friend of ours gave us "The Meaning of Marriage" in preparation for the new chapter. It was full of a lessons and advice on having a successful marriage.

The other book I read was "Remote: Office Not Required". I'm very interested in remote culture. I work occasionally from home at my current job, but I see remote-work being the "norm" in the future. It also had some interesting strategies for pitching remote-work to your employer, which I may try 😉

That's all folks! Until next month!

[Photo by Markus Spiske on Unsplash]

2019 Goals — April Update

Joe Previte (he/him) — Fri, 03 May 2019 17:08:25 +0000

Last year, I wrote a monthly progress update on my goals. I'm doing the same thing for 2019. Previously, I wrote these articles on Medium. Now I'm switching over to dev.to 😄

Achievements

Here, I’ll share the goal followed by the related achievement of the month after the arrow.

Emotional

Focus on relationships that matter -> Spending time with friends/co-workers

I feel like this month I actually made progress towards this goal. I sometimes say yes or do things because I feel like I should rather than because I want to. This month, I spent more time with high school friends that are important to me and I also spend some time with my co-workers outside of work.

I hope to continue focusing on these important relationships rather than trying to please everyone.

Intellectual

Read 12 Books -> Finished "The Clean Coder" and "Accelerate: The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations"

One of my co-workers recommended "The Clean Coder" by Robert Cecil Martin and so I started it last month. It was a fantastic book! It made me realize what it means to be a "professional" developer and gave tips on how to work towards that in my career.

I also read "Accelerate...". I wasn't a huge fan. The research was interesting, but it felt more like an academic paper published inside a book. It merely validated my previous beliefs of how important things like CI/CD are in shipping software quickly.

Launch 2 Products on Product Hunt -> Lots of work on mentored.dev

April was a productive month for mentored.dev! I give some credit to the Pioneer Tournament I joined, which has forced some accountability on this project.

I hope to continue making progress and eventually, ship the first version this year.

Professional:

Speak at 5 conferences-> Spoke at Magnoliajs (2/5) 🚀

I had an absolute blast speaking at Magnoliajs in Jackson, Mississippi. It was my first in-person tech conference I was speaking at.

The experience taught me a lot. I realized:

1) how down-to-earth tech speakers are
2) jokes/humor can spice up talks more than enthusiasm

That being said, I hope to continue speaking at meetups/conferences and getting better at my delivery.

Write 6 articles -> Published "The Practical Checklist for Getting a Job"

I had been holding onto this article for a while. I wrote it up for a friend maybe 6 months ago but never got around to publishing it. Instead, I was sharing it with people privately.

Now, it's published and ready to be shared with the community! 😄

That's all folks! Until next month!

[Photo by Stephen Walker on Unsplash]

The Practical Checklist for Getting a Job

Joe Previte (he/him) — Wed, 01 May 2019 02:14:37 +0000

Maybe you're someone who doesn't have a computer science degree or maybe you don't come from a "technical" background. Maybe you're self-taught or you did a coding bootcamp. Or maybe you've been a software engineer for a few years and you've having trouble landing interviews.

Either way, you're finding it hard to land your first or next job. Here are practical things you can do to make it happen:

💪🏼 Get Real Experience

"Entry-level Front End Developer. Minimum 1-year of experience with React". This is a catch-22. How are you supposed to get your first job if all of them require previous experience? Here's what you can do:

☐ Reach out to 3 companies asking if you can do an internship
☐ Look for contract positions on Upwork, Craigslist or in a local tech community
☐ Reach out to a local business and offer to redo their website
☐ Contribute to an open source project

✅ Goal: to get something on your resume. This will help you get through the first gate as a new developer.

🗣️ Network

Network, network, network. Meet people. People lead to connections. Connections open the door for jobs. The more people you know and the more people you help, the more likely you are to find that next job. Do these things:

☐ DM 3 people on Twitter who do what you want to do. Learn from them.
☐ Go to 3 local meetups and talk to people
☐ Speak at 1 meetup. Give a lightening talk. Get your name out there. Mingle with meetup organizers

✅ Goal: to make connections and establish yourself in the industry. If you help others, good things will happen. Being known in the industry means opportunities will come to you, rather than you seeking them out.

✍️ Share What You Learn

It's very easy to silo yourself and learn in a "cave" but share with the world what you're doing! It might inspire others, you might teach someone something new, and it's a good way for potential employers to see what you're doing

☐ Start your own blog and write a weekly post
☐ Write 1 blog post about something you built. Get it published on a well-known blog.
☐ Tweet about what you learn via #100DaysOfCode

✅ Goal: to share publicly what you're doing as a developer to further your knowledge and skills. Plus the way you explain something might click for someone in ways other articles weren't able to do.

🔨 Build Projects

If your portfolio and GitHub do not have projects in them, you are not going to get an interview. The projects you showcase speak to your technical ability. This is especially important if you don't have a CS degree.

☐ Build 1 project that solves an everyday problem for you
☐ Pin 4 projects to your GitHub profile page
- ☐ Write friendly READMEs with information about each project

✅ Goal: to have substantial websites/apps that demonstrate what you can do. These will help you stand out among applicants and be good talking points during your interview.

If you do all of these things and you still can't get an interview, let me know. I will do my best to help you figure out what more you can do. However, I'm fairly confident this will put you on the right path 😄

[Cover Photo by Andrew Neel on Unsplash]

DEV Community: Joe Previte (he/him)

I developed on an iPad for two weeks: Here’s what I learned

You can use an External Monitor, Keyboard, and Mouse

VS Code on iPad feels like magic

iPads as Devices are Portable and Powerful

Didn’t have much use for Apple Pencil

Browsers are Inconsistent

Use the PWA and Gain Control Over Keyboard Shortcuts

Inspect Browser is a Tool You Need

Summary

Have you tried Rust?

WOOOOOOO

2019 Goals — August Update

Achievements

Intellectual

Professional

Announcing dip.chat - a virtual coworking space

dip.chat

2019 Goals — July Update

Achievements

Intellectual

Financial

Updates

2019 Goals — June Update

Achievements

Intellectual

Professional

Updates

How to Create Code Profiles in VSCode

1. Create a code_profiles directory

2. Create your first profile

3. Add your settings.json

4. Test your new code profile

5. Create an alias for your profile.

React Native - Adding App Icons for Android

What do I need to know?

Should my icon be square or round?

Where do the icons live within my app?

How do I make my icons?

Common Errors

LearnInPublic

2019 Goals — May Update

Achievements

Intellectual

2019 Goals — April Update

Achievements

Emotional

Intellectual

Professional:

The Practical Checklist for Getting a Job

💪🏼 Get Real Experience

🗣️ Network

✍️ Share What You Learn

🔨 Build Projects

1. Create a `code_profiles` directory