DEV Community: Seth Hall

#normalizetech

Seth Hall — Mon, 21 Feb 2022 18:59:13 +0000

The last few years of my web development journey have consisted of many ups and downs. Unfortunately, I don't remember all the ups but I know they occurred and I know I learned and progressed because of them. But I do remember every down because they tend to stand out in my mind a bit more. It is hard to forget the times you are undervalued, misunderstood and mistreated. Unfortunately, all these downs have occurred in the workplace. Because of these experiences, I have a renewed interest in mental health advocacy and psychological safety in the workplace.

VirtualCoffee.io is one of my favorite communities. It provides a safe and encouraging place to talk about life and web development and has been a game changer for me. I enjoy hearing each person's unique perspective and our weekly chats are a highlight. Twitter is also a great place to build community. I am having great conversations and making new friends every day. A few weeks ago, I decided to share my thoughts in a Twitter thread and I created a new hashtag in the process. This is a thread that I plan grow, adding new thoughts as they come up. This also felt like a worthy topic to turn into a blog post, so here we are. I plan to update here as well.

Here is my #normalizetech Twitter thread.

// Detect dark theme var iframe = document.getElementById('tweet-1484556993931231237-180'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1484556993931231237&theme=dark" }

Let's dive in!

Normalize 9 to 5.

Overtime should be an exception not the norm. If a job lists "paid overtime" then run.

Normalize mental health days.

If we are overly stressed, anxious, fatigued, etc... the work suffers and nobody wins.

Normalize pair programming and mentorship.

Development is hard y'all. Nobody should struggle alone. Pair programming and mentorship can boost confidence and build healthy relationships. It takes a village.

Normalize 80/20.

Allowing one day a week for side projects, open source, community engagement, volunteering, a day of rest, etc.. can reinvigorate and make a positive impact on the world.

Normalize Inclusivity & Diversity

Although progress is being made, the lack of inclusivity and diversity in tech is still very prevalent. The more diversity the better since working alongside a variety of people and cultures increases empathy and creativity.

Normalize Psychological Safety

No one should feel unsafe in the workplace. Period! Safety leads to trust, which leads to happiness, which leads to better ideas, which leads to people doing their best work. This should be a priority!

and here are a few community tweets!

// Detect dark theme var iframe = document.getElementById('tweet-1494474337755152390-957'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1494474337755152390&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1494482323060011010-58'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1494482323060011010&theme=dark" }

What are things that you feel should be normalized in tech? Comment below and thanks for reading!

cover image photo credit - https://unsplash.com/photos/bKESVqfxass

More Dad Jokes!!

Seth Hall — Fri, 18 Jun 2021 19:55:42 +0000

I have been a member of VirtualCoffee.io for most of 2021. It is a wonderfully supportive community and to say that it has changed my life for the better is an understatement. I have learned so much from chatting and pair coding with fellow members, hanging out on the weekly coffee chats, listening to the VC podcast, and watching the awesome lightning talks and brown bag presentations ... AND I have made new friends along the way. Wins all around.

Virtual Coffee also offers a monthly challenge. May's challenge was about giving meaningful and empathetic feedback. June's challenge is to build in public and the community has come together for daily stand-ups and encouragement. I was excited about this challenge and took the opportunity to build a fun project with a new stack, shared through this blog post, live stream, and Twitter thread.

The Build

My criteria were to build something light and fun that could be completed within a week, to build something with a new stack, and of course to share my experience along the way. So, in celebration of Father's Day and all the hard joking dads out there, I decided to build an app with the icanhazdadjoke API. The app is small, consisting of a few API calls, a handful of unit tests, a bit of CSS, and a few easter eggs 👀, but this allowed me to focus on the new stack and building in public ... plus more dad jokes.

Jump to the App and Code

The Stack

I have been working in React since 2019 but Vue.js has been on my radar, so I took this opportunity to spin up a stack with the following:

Vue - Javascript framework
Vite - next generation frontend tooling
TailwindCSS - utility first CSS framework
Jest / Vue Test Utils - unit testing
SplitBee - analytics platform
ESLint / Prettier - code linting and formatting
Axios - promise-based HTTP client for node.js and the browser
icanhazdadjoke API - the internets largest database of Dad Jokes

Vue

Coming from React, I was able to feel comfortable with the basics of Vue fairly quickly. I attribute this to a combination of my past work in React and the Vue framework itself. Vue feels very intuitive to me and was a joy to work with. I love the single file component syntax and separation through the <script>, <template> and <style> tags. This app is comparatively simple so I can't comment on what Vue would feel like once I got into a heavier, more complex app, but so far so good.

Vite

Considering I did a basic install with default configs, there is not much to say about Vite at the moment, except that it is fast. I did experience some lag in Hot Module Replacement when editing CSS but I didn't take the time to find out why and I would like to believe it had to do with something on my end.

TailwindCSS

I have been using Tailwind CSS for most of the year now and it is my go-to for most builds, especially a small and quick app such as this. I am drawn to utility classes within the markup, but I also like Tailwind's @apply directive, which I used within the Vue components style tag and the app's global index.css.

Jest & Vue Test Utils

I have been deep diving into unit testing over the past few months and have learned a lot. Jest is my go-to for unit testing and Vue has provided utils that work on top of Jest. This build only required a few tests (see more below) but Jest and Vue Utils made it super easy.

...Rest

ESLint, Prettier, and Axios are great defaults.

The Challenges

The first challenge was overcome once I decided on the build and stack. The biggest challenge with the UI was building the scrolling marquee. It took longer than I expected but I was able to pull it together with the help of the dev community (see resources below). The other big challenge was mocking API calls within my unit tests. I realize testing may not have been necessary with this small build but I took the opportunity to improve my unit testing skills through a few essential tests. Other than a few CSS quirks these were the things that gave me the most trouble. I talked more about these in the live stream.

The Resources

No build is complete without Google, Youtube, online courses and learning from the great dev community.

To kick off my Vue education, I turned to Vue Mastery, where I learned the typical javascript framework basics like attribute binding, conditional rendering, list rendering, event handling, class and style binding, components, props, etc... These videos are great and have an easy-to-understand teaching style and presentation. I found myself moving beyond the intro and into real-world concepts and unit testing fairly quickly. And there are more intermediate and advanced courses to digest and videos are added weekly. Vue Mastery is a great resource to learn and master Vue.

Since this app is emoji heavy I had the idea to implement an emoji favicon. I got my inspiration and the approach from this CSS Tricks post

It could be argued that a scrolling text marquee is bad UX and I don't disagree, but I decided that it was perfectly fine for this light and fun build. So, with a little bit of research, I took inspiration from this codepen and this codrop. I did turn this feature off by default, giving the user control, so that is a UX win right?

Conclusion

VirtualCoffee.io is a great community that supports, inspires, and challenges devs at all levels. I am happy to be a part of it and happy to have taken on this build in public challenge. The process of generating an idea and building that idea while learning a new stack is quite enjoyable, plus the world needs more dad jokes so I consider this build a win for society. But with any build, no matter how simple, comes challenges. The particular UI and testing challenges presented here were tough enough to push me but not too tough to discourage me, and with help from the dev community, I was happy to resolve them. I will continue my learning through Vue Mastery and I look forward to the next build. Thank you for reading and to all the hard joking dads out there, Happy Father's Day!!

App
Code

Seeding mock data to the Firebase Local Emulator Suite

Seth Hall — Mon, 25 Jan 2021 19:28:41 +0000

I have recently been working on a React/Firebase side project to level up my skills and provide a playground to experiment with different techniques, patterns and libraries. One of my favorite features in Firebase is the Local Emulator Suite.

The Firebase Local Emulator Suite is a set of advanced tools for developers looking to build and test apps locally using Cloud Firestore, Realtime Database, Authentication, Cloud Functions, Pub/Sub, and Firebase Hosting. It provides a rich user interface to help you get running and prototyping quickly.

The Local Emulator Suite is fairly easy to set up but be sure to reference the docs for full details.

Regarding the actual code in your project, you first need to make sure the emulator ports are defined in your firebase.json file like so ...

firebase.json

"emulators": {
  "auth": {
    "port": 9099
  },
  "firestore": {
    "port": 8080
  },
  "ui": {
    "enabled": true,
    "port": 4000
  }
}

Then in your app's firebase.js file, include an if statement that checks your Node environment. If you are in 'development' mode your app will automatically run against the emulators and will use the ports that you defined in your firebase.json file.

firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

export const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const app = firebase.app();
const auth = firebase.auth();
const db = firebase.firestore();

if (process.env.NODE_ENV === 'development') {
  console.log('testing locally -- hitting local auth and firestore emulators');
  auth.useEmulator('http://localhost:9099/');
  db.useEmulator('localhost', 8080);
}

console.log(app.name ? 'Firebase Mode Activated!' : 'Firebase not working :(');

Now navigate to the root of your project in your terminal and start the emulators by running firebase emulators:start. You should see this in your terminal

and the Emulator UI at http://localhost:4000

Now that you have emulators set up and running, it is time to seed the data to Firestore to develop against.

Seeding Data to Firestore Local Emulator

When developing locally it is helpful to have a data set to work with. While there are a few approaches to seeding data, including this approach via the Firebase docs, I chose to go with a simple script.

Create a script in your project root called dbseed.js.

dbseed.js

const admin = require('firebase-admin'); // required
const faker = require('faker'); // amazing library!

// initialization
const projectId = 'your-firebase-project-id';
process.env.FIRESTORE_EMULATOR_HOST = 'localhost:8080';
admin.initializeApp({ projectId });

const db = admin.firestore();

// seed function
function getSeedData() {
  try {
    [...Array(10).keys()].map(() =>
      db.collection('events').add({
        author_name: faker.name.firstName() + '' + faker.name.lastName(),
        author_profile_pic: faker.image.imageUrl(),
        title: faker.commerce.productName(),
        description: faker.commerce.productDescription(),
        address: {
          addr_1: faker.address.streetAddress(),
          addr_2: faker.address.secondaryAddress(),
          city: faker.address.city(),
          state: faker.address.state(),
          zipCode: faker.address.zipCode()
        }
      })
    );
    console.log('database seed was successful');
  } catch (error) {
    console.log(error, 'database seed failed');
  }
}

getSeedData();

This script contains the required imports and initialization and runs a function that writes an array of objects to an 'events' collection.

Once the emulator suite is running, navigate to Firestore Emulator UI then run node dbseed.js in a separate terminal window/tab.

You will see that the empty Firestore db is seeded with an array of Faker objects. Faker.js is an amazing library. Be sure to check out all the options at the https://github.com/marak/Faker.js/

Success! Now you can develop against test data while work within the Firebase Local Emulator Suite.

What about working with real production data?

You can also work with your production data if that is a better fit. Set up is more involved but still a nice approach. Check out the Firestore Docs to learn how to export your production data then import it when starting the emulators.

Conclusion

Working with mock data is an essential part of development and is something that I struggled with when working in the Firebase Local Emulator Suite. This simple approach allows me to seed the database quickly. Thanks for reading and I hope this helps your workflow. Happy coding!