Justin Friebel's blog

Learn how to setup custom blog post tags using Next.js and prismic.

Next.js prismic custom blog post tags

Learn about and why I built my new website with Next.js, prismic, and Vercel.

New website built with Next.js, prismic, & Vercel

The main reason I decided to try out Next.js as my framework of choice is maintenance. My last website was built with GatsbyJS. It was a pain to try and bring the dependencies up to date. I have a newer GatsbyJS V2 website that was also a pain to update. I wanted to try Next.js a long time ago but I didn't have anything to build or rebuild. I decided it was time to try something different, and that something was Next.js.

Prismic as the CMS (Content Management System)

Previously I used markdown to manage the few bits of content I do have. Recently I've heard that people were really enjoying Sanity as their CMS. I don't mind paying a few dollars here and there, but Sanity's 5GB free and $1 for every extra 2GB per month seemed a bit steep when I was exploring my options. I stumbled across prismic and decided the pricing and features made it worth trying out. The most notable pricing advantage is their free Unlimited Asset hosting. Prismic has a lot of other generous pricing and is also used by many notable companies.

Since Vercel works on the Open Source Next.js React framework I started using, I figured it was only fair to see how hosting it on Vercel would go. I was pleasantly surprised on how easy and fast it is to use their GitHub integration to deploy sites and code to their CDN and serverless functions.

A Next.js, prismic and Vercel GitHub website template

I figured there might be a few people who would like to use these technologies to build their own website. I spent some time cleaning up the code and making it easy to configure and customize. You can find the GitHub repository and template here. There are instructions in the repository's README to help guide you in building your own website. If you have any questions or find any issues please bring it up on the repo!

Learn about rebass, a great react design system that makes design scalable.

Rebase a great React Design System

Rebass is a React UI component library & design system, built with Styled System, Styled Grid with support for Styled Components & Emotion libraries.

Rebass is a library of highly-composable, primitive UI components for React, to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Brent Jackson, aka Jxnblk. A design systems developer based in New York.

It’s easy to install Rebass using NPM, and it has no complicated build step. This means there is no need to setup a complicated Webpack build step, just import the base component and customize the styles to your liking with Styled Components.

Rebass components are minimal, functional, and flexible, making it easy to add your custom styles on top. Rebass gives you style encapsulation with CSS-in-JS and Styled Components. Rebass components also have stateless UI, which means you won’t get a headache trying to customize them when your application UI changes. Leave the state to your React code!

Rebass theming keeps your application styles from straying

Configurable theming that can be easily applied across an entire application. You can setup custom breakpoints, a spacing scale, a typographic scale, fonts, font weights, border radii, and colors. This helps keep your application styles from straying too far from design guidelines.

Styled System provides design system utilities for Styled Components and other css-in-js libraries. It allows you to add style props that hook into your own theme. It is influenced by constraint-based design system principles. Styled System provides all the functionality to apply your Rebass theme configuration and Grid Styled grid to your application.

Grid Styled gives you all the power of Flexbox, but allows you to apply your design guidelines from your theme in an easy way. It allows you to create flexible and responsive react grid systems that can be updated across an entire application.

Using Styled Components, Styled System, Grid Styled, and Rebass allow you to create a Design System that can be easily applied to an entire application. All of your design decisions are in a controlled system, but still easily customized with Styled Components for those one off cases.

Be in control of your design system throughout the life of your application, use Rebass and friends!

Learn more about Firebase Cloud Firestore, the scalable real time database that will help you build your product faster.

Firebase Cloud Firestore the scalable real time database

Over the years I have read quite a bit about Firebase, mostly about it’s real time database. This includes some of the things people said about it having troubles scaling for larger usage.

Then came a new beta product from the Google Firebase team called Firebase Cloud Firestore. The Firebase team took everything people loved about the original real time database and made a slightly less real time database that can scale. It hits the sweet spot, and is really close to the Firebase real time database.

Google recommends using the new Cloud Firestore for most projects, unless you’re building a game or something that needs that instant feedback. The best part is you can use both in a single project if needed!

Cloud Firestore is more structured. Cloud Firestore is a document-model database, which means that all of your data is stored in objects called documents that consist of key-value pairs — and these values can contain any number of things, from strings to floats to binary data to JSON-y looking objects the team likes to call maps. These documents, in turn, are grouped into collections. Cloud Firestore also lets you build indexes for particular queries so they can maintain and scale them for you!

Cloud Firestore is a multi-region database. This means that your data is automatically copied to multiple geographically separate regions at once. This enables replication and the ability to scale with ease.

The multi-region database offers strong consistency (just like Cloud Spanner!), which means that you get the benefits of multi-region support, while also knowing that you’ll be getting the latest version of your data whenever you perform a read.

Firebase Cloud Firestore and your development time

In my current project named HelpFlow I’ve been using Google’s Firebase Cloud Firestore to build out the MVP. I can tell you right now, it’s really nice not having to worry about a server, scaling multiple servers, server side API endpoints, authentication, authorization, caching, you name it.

You just need to learn the basics of Firestore by reading through the documentation, and then do a little experimenting. I will admit, it took me a couple days to read everything, experiment, and figure out how it all works. Once I did, I could see how Cloud Firestore is an amazing database that will save a lot of time down the road with a little learning up front.

Cloud Firestore pairs really well with Firebase’s other Beta product, Cloud Functions. You can write cloud functions that are triggered when you create, update, delete, and write data, without any extra work! I’ll be writing a detailed post about Firebase Cloud Functions soon.

It is amazing to see an application come to life with real time and synced UI with offline support. Thank you Google, for basically giving this tech away.

I plan on writing a detailed post on everything I learned using Firebase Cloud Firestore soon!

Firebase Cloud Firestore, the scalable real time database

Learn about the React basics before trying it out for yourself.

Learn React basics before trying

Over the past year I’ve been learning React. Here is what I wished I knew before going head first into it.

What you need to know about React Components

React is based on components, which are little building blocks of UI. Try and keep your components small, get them working and then split them up after. It will help you understand the true power of React Components.

Things you might want to avoid when using React

Don’t use Redux when you’re first starting. Hell, you might not even need it all depending on your application. Do not modify your state variables directly, use React’s built in this.setState() method. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

The constructor is only used when a component needs to handle state and props (data). State is just a fancy term used to describe the local high level variables for your component. Plan how your components will interact so you can lift the state up, which is just storing the state in the containing (parent) components above. Props are just data and state passed through parent components so you don’t have redundant fetching of data, rendering, or re-rendering.

Read about each React lifecycle method and learn their purposes. You’ll want to fetch your data inside componentDidMount().

Using Create React App and Firebase Cloud Firestore will help you avoid spending too much time configuring a custom build. Firebase Cloud Firestore will help you stay focused on learning React without switching back and forth with a server side framework.

Learn about the many benefits of working remotely.

Benefits of working remotely

There have been a lot of posts about remote work. Recently, I’ve been able to experience and understand it better. I really enjoy the time I’ve spent working from home. I worked from home full time for about 4 months this summer. I now go into the office a few times a week as requested by my manager.

More creative sparks while working remotely

When I’m working from home I seem to have more creative sparks. My guess is that the majority of the things written below help my creativity. I haven’t counted but I believe going on short quick walks to take the doggo outside have resulted in most of my creative sparks.

Working remotely provides a quiet environment

Having a quiet work environment is really important to me. I have ADD and it can often be hard for me to concentrate in an open office environment without a quiet area. I often listen to music in the office to try and concentrate, but that doesn’t always help. Having half my time working in quiet is the single biggest factor in my productivity boost.

Eating healthy is easier when you work from home

Another huge advantage when working from is how easy it is to eat healthy. No need to spend time making and packing a healthy lunch. It’s super nice to just make a healthy lunch right when you want to eat. You also get the added bonus of saving some money by not eating out as much.

Pooping in your own toilet is a rarely talked about perk when working remote

Something I haven’t heard many remote workers talking about is being able to take a nice dump on a clean toilet without anyone listening.

Having pets around increases your happiness while working from home

This is what started my remote work life. This past May I got a new puppy. Her name is Belle and she’s a purebred Boston Terrier.

Having a pet around when you’re working is amazing. They remind you to take breaks every few hours and walk around. If you’re going through a higher stress situation at work your pets are right there to cover you in love.

Being silly, singing, and getting in the groove

When I’m working from home I can be as weird as I want. I can crank up some music and sing to my dog. I think if I were to play music outloud and start singing I’d probably get a few looks in the office.

I try to strech out my back at least twice a day, once during my lunch break. Stretching seems to be a great way to reduce the tension in my back that builds up from sitting for long periods of time.

Earlier this year I bought a standing desk. Between standing intervals at my desk and stretching my back has improved a lot. Standing and stretching both seem to provide me with more energy throughout the day.

Not driving, the obvious remote work perk

Not wasting 1 hour everyday driving to the office itself is huge. On top of that I spend less money on gas, need oil changes less often, and put less miles on my vehicle. There is also the benefit of less stress by avoiding rush hour traffic.

DealerSocket has a very reasonable dress code for the office and I have no complaints. When working from home I can wear sweats for maximum comfort.

I’ve heard so many stories about cold offices that I can’t keep track of them. I’m not sure why offices think it’s a good idea to have the temperature so low. Just walking through the office I’d say easily 80% of people are wearing sweatshirts, and even some with blankets!

I’m not sure why you’d want to decrease the productivity of the majority so a few people can be comfortable. Enough with the ranting, when your working from home you can control the temperature to your liking and it’s super nice!

For me, the benefits far outweight the cons of working remotely. I can see how some would enjoy the productivity of working in person. For that to work out well you still need a balanced tight knit team all in the same location. For small or highly organized companies working together can have some advantages, I’m just not certain many companies fit in that bucket.

Working remotely gives me the ability to concentrate, be comfortable, and get more work done that I would in an office environment.

Learn about my experience at the Launch Wisconsin Rise of the Rest Green Bay 2017 event.

Launch WI Rise of the Rest GB 2017

I’ve been interested in the Wisconsin and Fox Valley Startup community for quite some time. I’ve also been a part of the Digital Fertilizer startup community in Green Bay for awhile.

I heard of Launch Wisconsin when it first started last year, but I’m sort of a cheap ass when it comes to conferences, and didn’t go. This year it was announced that Steve Case (a founder of AOL) was going to be there along with the RISE OF THE REST team.

Revolution’s RISE OF THE REST with Steve Case is a nationwide effort to work closely with entrepreneurs in emerging startup ecosystems. Our view is that this is the beginning of a new era for entrepreneurship across the U.S. — high-growth companies can now start and scale anywhere, not just in a few coastal cities.

Since I’ve been building a startup (mplyees) in my free time, I put together a pitch deck, a demo, and all the other info needed for the RISE OF THE REST Green Bay competition. I didn’t get to pitch as a finalist, but I did get a free ticket to attend Launch Wisconsin.

I’m really glad Green Bay was chosen to host RISE OF THE REST. Our startup community is still in it’s infancy and needs a lot of work. RISE OF THE REST helped bring even more eyeballs to the Fox Valley startup community, and we are surely thankful.

The RISE OF THE REST Green Bay finalists were all good picks and I was impressed. It was a very fun experience to be a part of, and I hope the attention it brought will eventually bring about more Risk Capital in the Fox Valley.

There were 8 startups that were chosen as finalists to pitch. The winner of the 100k and RISE OF THE REST Green Bay was Lanehub. Lanehub is a social network for the trucking and logistics industries. The other finalists were:

i65 - Medicare Enrollment optmization software

Indigenous Pact - Create Health Equality for Indigenous People in One Generation

In Our Hands - Giving the people of Wisconsin a simple way to influence new legislation relevant to them

illumyx - Culture analytics to fit your growth path

OrendX - A new way to approach employee engagement for nurses

Launch Wisconsin changes their name to kinnektor

When first arriving to Launch Wisconsin I recieved a badge to pass security and up to the event. The badge said “kinnektor” on it which was a little confusing, but it was clear after arriving that they had changed the name of the Launch Wisconsin event.

From a brand perspective I understand why they wanted to change the name to kinnektor, but I think they could’ve picked something with more formal spelling. I’m not sure I’ve spelled it correct once while looking for it a handful of times. I guess the one thing they did do right was change it at the beginning of the conference so everyone attending would at least know the new name.

I tried to attend a workshop for every time slot, and there were a handful of good ones throughout each day.

11 Tips to go From Concept to Your First Sale with Brian Davis

Brian is a successful entrepreneur who built a minimal bike tool named Fix It Sticks. He took an idea, found out if people would buy it, made a product, marketed it, and sold a lot until finally selling the company.

Brian gave us way more than 11 tips, but the overall theme was clear. Get sales as early as possible, even without a product. This allows you to see what people will pay for and the direction of the product or service before you invest too much time or money in the wrong direction.

From idea to venture funding to product launch with Matt & Scott Johanek

Matt & Scott Johanek are brothers and co-founders of DROPP, a fintech startup. DROPP helps people build credit using on-time rent payments. They shared a lot of knowledge on founder dynamics and how they work together.

Playing off each others strengths and being open and honest can get you far in the startup world, and these brothers are living proof.

Funding Options with Amy Gannon, Emily Purdom, & Mandi Salo

There were a lot of good perspectives from both venture capital and entrepreneur sides. Entrepreneurs should know what type of investors they’re looking for. They should also be prepaired with all of their pitch knowledge and important metrics and goals before pitching.

Treating the people working for the Venture Fund with a little respect can go a long way. They deal with a lot of requests so the second you become defensive or disrespectful you’ve already lost.

SXSW Looks to Wisconsin for Great Talent with Ashley Prange, Zach Brandon, & Christopher Eckstrom

Zach Brandon is the President of the Madison Chamber of Commerce, so it was natural for the discussion to revole around Madison’s clear success over the past decade. We learned how companies like Google and Zendesk have opened offices in Madison due to all the talent oozing from the University of Wisconsin Madison.

The concentration of tech talent in Madison increased by more than 30% over the past two years. I can only imagine Madison’s success will continue for a long time and it will become one of the top picks for those fleeing expensive cities over the the next decade.

Building a Live-Work-Loft Facility with Josh Dukelow, Jessica Meidl, & Ryan Rohde

Living in a building where the first floor is buzzing with business and startup activity is a boon to everyone. Rise & Grind in Oshkosh is the best coworking space in Fox Valley Wisconsin and has space to live in the 2 floors above. Rise & Grind will also be the new home of kinnektor (formerly Launch Wisconsin). If that wasn’t enough great news for you, Rise & Grind is in the works to open another coworking facility in the top of the Green Bay library!

How Accelerators Work with Startups and Corporations with Zack Pawlosky, Brian Stuelpner, & Troy Vosseller

Althought Wisconsin ranks low on overall startup activity, we have plenty of low risk accelerators that are oversaturated by startups from Wisconsin and every other state in the US.

This is one of the areas I think Wisconsin could improve greatly on. Maybe we need an accelerator or 2 that only allows Wisconsin startups to apply? I also think we should try a hybrid accelerator incubator approach so we can remove the risk of requiring applicants to not have a job during the process.

Augmented and Assisted Realities with Dan Einhorn, Tyler Hackbarth, & Paul Ryznar

This workshop had one of the most interesting startups that I’ve seen in a while. Paul Ryznar is the Founder of OPS Solutions, aka, Light Guide Systems. They project light systems and augment them into manufacturing processes. This makes manufacturing and training a lot faster and less prone to error. One of their customers is Chrysler!

Venture Funding in Wisconsin with Jill Enos & Tom Schuster

Get a sale and then we’ll think about investing in you, maybe.

Corporate Startup Engagement with Craig Dickman & Wendy Lea

The last and best workshop of the event. Wendy Lea has a vast amount of experience growing a fragmented startup ecosystem. She’s been solving the same problems in Cincinnati that the Northeast Wisconsin startup community is currently facing.

The corporations in Fox Valley Wisconsin need to invest more in their startup community if they want to retain talent and not slowly errode. Wendy also shared how after companies invested in their city’s startup ecosystem, venture capital was right behind. She also saw a lot of core things in place for Fox Valley startup scene. Northeast Wisconsin could use someone like Wendy to lead us down the path she has already traveled.

Launch Wisconsin, kinnektor, and RISE OF THE REST 2017 overview

With 5 to 10 years of hard work I think we could turn the tide and be where Madison and Milwaukee are now. I made connections with a few of the finalists at RISE OF THE REST. I’m glad I met them so I can continue to watch them grow and change, and maybe lend a hand when it’s needed.

Without the RISE OF THE REST I doubt I’ll pony up the admission price for next year’s Launch Wisconsin.

Launch Wisconsin & RISE OF THE REST Green Bay 2017

Learn about my experiences using the Figma design tool and why I love it.

Figma design tool

For my day job I am a UX designer and developer at DealerSocket. DealerSocket is one of the top automotive software companies. On the UX team we not only test, but we also do a lot of wire-framing, design, and prototyping. I heard about Figma via another designer on twitter talking about it. I have used Sketch and Photoshop in the past.

* One tool for design + prototyping
* Public links for dev handoff
* Advanced vector pen tool
* Constraints for responsive design
* Components
* Team libraries
* Version control
* No saving
* Smart guides
* Layout grids
* Live device preview
* Presentation mode
* Windows, Mac, & Linux
* Commenting

When you copy a hex color code from Chrome or somewhere else, Figma will automatically get rid of or add a pound symbol. This feature may be small but is super cool.  Not having to ever save a design file is invigorating to say the least. Add in version control and you have a lot of room for mistakes :).  Having the ability to share designs with just a URL means you don't need to save and package up different versions of a design as it changes. This is a huge productivity boost.  The smart guides aren't just a marketing term, they actually work very well and help you keep consistent spacing between the elements of your design.  Our team uses Trello for management our projects and there is already a Trello power-up to embed a Figma file or prototype into a Trello card. The preview even updates as you update your design in Figma!

When using Figma to prototype you need to have different files for the different screen sizes.  The constraints system is hard for me to use even thought I've read about the details of it many times.

Figma is an amazing design tool that I recommend to everyone. If you can get your team onboard to try it out would be amazing, but the core features alone make it worth using even if your team is using other tools. Did I mention it's basic plan is FREE!?

Learn about my SasS project named mplyees.

My SasS project mplyees

Over the past 10 months I've spent a majority of my free time working on mplyees, public anonymous employee suggestions. Mplyees is my first attempt at making a complete SaaS product.

I built mplyees because employees at larger companies often have a hard time communicating up the chain of middle management and executives. Knowledge is spread across so many different spaces, collecting and keeping the thoughts of a large company is hard to do. The employee suggestions are anonymous because there are a lot suggestions that employees can be ostracized for. Although we hope that most of the suggestions from employees will be a big boon to company trajectory, some may be slightly bad for a company in the short term. We want to empower employees and not just make software for companies to control the herd.

* Laravel
* Vue.js
* Webpack
* MariaDB
* Bootstrap
* Laravel Forge
* DigitalOcean
* VirtualBox
* Vagrant
* Laravel Homestead

* Public employee suggestions
* Anonymous employee suggestions
* Employee suggestion voting
* Employee suggestion categories
* Employee suggestions are checked for bad words
* Anonymous employee suggestion commenting

I have built a lot of the basic features for mplyees to be useful. I'm now working on getting users and companies on board to see if the software will be successful and worth pursuing long term.  Please check out mplyees and leave a suggestion for your company. If you have any feedback or suggestions for mplyees itself, everyone can leave suggestions on the mplyees page.

Learn about how I updated my personal website using GatsbyJS and Netlify.

Website built with GatsbyJS & Netlify

I've had a personal website for a long, long time. We're talking Angelfire old. Back then, I didn't spend much time on my own site. Who am I kidding, I still don't!  My last personal website was a WordPress site hosted at JustHost. WordPress is an amazing tool, I just never used it enough to warrant the $4 per month I was spending at JustHost anymore. Using WordPress on a cheaper host also makes for a website that isn't really fast, which is another reason for me to part ways.  My old site never had much traffic, and it only had a few blog posts. This made trying some new tech an easy choice.

Hosting static sites are free with Netlify

For quite some time now you've been able to host basic static websites for free. I first heard about people doing so with GitHub, and more recently with Netlify. So, I did a little research and Netlify has some very good features, even with the free plan.

Whew, that's a lot of cool features for free, thanks Netlify!

With the new major release of <a href="https://www.gatsbyjs.org/" target="_blank">GatsbyJS</a>, and React.js itself using GatsbyJS, I decided it would be a good option to test. It didn't take long for me to like what GatsbyJS had to offer!

With the use of GatsbyJS and Netlify I now have a blazing fast blog. Now I just need to find the time to start writing more often! :P

New website built with GatsbyJS on Netlify

Blog posts