Forem: Eric

I am going to build 6 products in 12 months

Eric — Mon, 04 May 2020 20:10:41 +0000

Originally posted on attempts.space

I am going to build 6 products in 12 months on my way to create financial freedom for myself. And I seem to have picked the worst time to start. Right in the middle of COVID-19. The largest economic depression since THE great depression and do I go and find a secure job?

No. I do the exact opposite. I start working for myself.

This all started when the office for my day job closed and we began to work from home. Without a commute I found myself with ample amount of time to do things just for me. It was the most empowering and freeing 2 weeks of my life. Working on what I want, feeling like I am making an impact in the lives of people. I haven't felt that energized in ages.

So I started to chase that.

I started a vlog, producing YouTube videos, developing and releasing side projects, writing, and reading more. I created whatever, whenever. And it was AMAZING. So amazing that I wanted more.

Then the next month passed and I hadn't been able to rekindle that experience. I couldn't find that same passion no matter the amount of searching. I figured out that the more time I spent on my day job and the less time I spent on things I wanted to do the worse I felt.

So I am taking a stand.

I am going to challenge myself into financial independence. Into my dream job, my destiny, into an entrepreneur.

Over the next year I am going to create and launch 6 new products and work to make them profitable. The most successful business I run currently is Team-Img. It is profitable, but no where near sustainable for me to live on with only \$7 MRR.

Thats right, 7 whole dollars. The math is hard but that is a total of \$84 a year. Not much to live on.

But that is my inspiration. Team-Img was the catalyst that showed me I could produce something useful.

And so begins my journey. Starting from \$7 MRR I will build a life for myself and my family by working on things I love with people who care. It is going to be an adventure, a challenge but most of all it will be - hard. Also fun. I am thrilled to be going on this journey and it starts today.

With inspiration from Pulsar I am going to count Flawk, which is super early alpha, as my first of 6 products. I have 6 others in the pipeline and over the next year I am going to attempt to make each one a profitable product.

Flawk isn't even close. But that is where the fun is.

0/6 profitable products and counting.

Flawk is in alpha!

Eric — Tue, 14 Apr 2020 16:11:11 +0000

I have been trying to build a business and gain financial independence for a couple of years now. It isn't going super well, but I am hoping that Flawk is my first step in the right direction.

I started out building Flawk to help make Meetups, including the ones I run, more engaging, and inclusive by focusing on the interactions between the presenters and audience. After having a few false starts (5 months of false starts) I finally came across a meaningful way to start - remote events. Although I have big plans for Flawk and at its core it should still provide more engaging and inclusive human interactions, I chose to focus on hosting and attending remote events.

You can check out our new home page Flawk.to and get a little bit of a better idea of what we are offing. But as we enter alpha I am looking for people who are currently hosting or want to start hosting events to work with me to build an amazing experience. If you are interested you can fill out a request form here: https://alpha.flawk.to/request-access.

I also want to start using Flawk myself as soon as possible! Which is what this post is really about. I want to put on a live event and give a talk about something, probably React related, but I don't know what! So here I am asking you, what do you want to see a presentation on!? Here are some subjects I enjoy talking about:

Computer Science basics (data structures, algorithms, Big O)
React (Hooks, building your first app, NextJS)
RxJS
Technical Hiring
Testing and doing TDD with Jest and React Testing Library

If you have something that is not on that list that you would like to hear about, comment below I would like my first Flawk event to be extremely fun and also useful!

Thanks for listening and leave comments on what you'd like to see me talk about! I will follow up with the link to the event once it is scheduled.

❤️

JWT, Cookies, Custom Hooks and getServerSideProps

Eric — Tue, 14 Apr 2020 15:58:47 +0000

Hey everyone!

I just released some videos that show you how to add authentication to a next js application! It uses MongoDB, Cookies, JSON web tokens, SWR, React and of course NextJs.

I am definitely not a pro at authentication, I am probably the furthest from it. But I would love any feed back ya'll have on these videos and the code that I am writing! I am always trying to improve. 😀

From Idea to Launch #4 - Into to NextJS API routes

Eric — Wed, 01 Apr 2020 20:38:34 +0000

This week I am diving into an introduction to NextJS API routes. I also briefly talk about Formik and Yup! In this video we create and log in users using the PaaSsword service. In the next video I will cover how to maintain a user state with cookies and JWTs.

Hope you enjoy! ❤️

I have doing a lot of work recently on my own projects, things like: team-img.now.sh and PaaSsword. I launch both of these on Product Hunt and realized that it was super helpful to show off work you have done. Especially work that you think would be useful for other people!

So I am creating a series of videos to showcase my process of taking an idea all the way to launch on Product Hunt. I re-built a tool that I really like to use for myself: Wachstum.space. I am going to walk you through how I made it and show case why I love to use React and NextJS to build all of my projects.

From Idea to Launch Ep. 3

Eric — Sat, 28 Mar 2020 12:26:30 +0000

Here is the latest video in the series where I create https://wachstum.space using react, nextjs and now. In this episode I show you how to use React components with Nextjs and how to manage state with useReducer.

Hope you enjoy! Leave some comments so I can improve 😃🙌

From Idea to Launch

Eric — Thu, 26 Mar 2020 16:57:49 +0000

Hope you enjoy!

5 Tips to Master the Interview

Eric — Thu, 26 Mar 2020 12:04:05 +0000

Interviewing is hard.

I tell that to everyone. The people I am interviewing, the people I have interviewed and the people I train how to do interviews. Still we loose sight of this as soon as we sit in that chair and the questions about our abilities start to fly. You are being asked to judge yourself, in the moment, with questions you'd never expect. Questions you would have a hard time answering on a normal day.

It is hard not to feel personally about interviews, because they are personal. At least for me they are. That is actually where your power comes from. Who is the absolute best person to be talking about you? You.

Currently in my role as Director of Software Development I am working to revamp the hiring process. Through this I have created and given training on how to best conduct interviews. I have also given over 100 interviews myself in the last 3 months. Here are 5 things I wish I was seeing from candidates and the reasons they will help you land the job.

1. Be yourself

This one might seem obvious, but it is the number 1 thing that I find is lacking. People, including myself, try to put on a show. To paint ourselves in the best light, even exaggerate our ability to make ourselves look more appealing. What ever the reason I am not hiring the person you want to be, I am hiring you. Show me your personality, be quirky, be different. A group of similar people will never build anything as good as a diverse group of people. Any organization thrives on diversity.

2. Share the bad things

This seems counter intuitive to do in interviews. But sharing the bad things is almost as important, if not more, than sharing the good things. It is a fact that everyone makes mistakes, everyone has things to work on. Sharing yours shows that you understand where your short comings are. Being aware of short comings means you are working to improve them. Sharing working failures allows you to explain and diagnose a past situation. You can show that you learned from that mistake and talk about how you can prevent it in the future. Showing interest in your own improvement will signal to your interviewers you are ready to learn, and work, to be better.

3. Have a plan

Now, you might be asking: "How can I possibly have a plan for something I have never done?". Good question! It isn't about planning your answers to the interview questions, or planning your introductions (although visualization for those areas is great practice!). Having a plan is about understanding where you want to be going in your career and preparing the items you want to share about yourself. This helps you guide the conversation, focusing on where you can show off. It also shows that you have interest in growing into a position. It is a good tell for me if my interviewers only care about filling a role. If they don't ask about your future, your ambitions or goals then it may not be a place where you can grow. Jobs are always a give and take. You contribute your skills. In return you get the mentorship and direction your require to move closer to where you want to be in life.

4. Understand your value

One of the hardest questions I ever got asked, and now I use in my interviews, is "What value do you bring to our team/company?". Whether you get asked this question or not, you should take some time and understand what you bring to the table. You are unique, and you bring a unique perspective and skills to any team. Being able to articulate what that is will put you above 90% of your competitors for any job. Understand what makes you different and showcase that! People deserve to know what makes you great!

You can always ask yourself the questions "What value do I bring?" in the context of your dream job! This will help you figure out what makes you different. If you can picture contributing in a team of people you want to learn from.

5. Invest

Very often we fear the feeling of rejection. It may lead us to remove ourselves from interviews mentally even before they begin. I am not looking for you to commit, but when I interview someone who has already put themselves in the position it brings a different energy. Showing that you are looking to the future. What kind of difference you can make in the organization by investing in the company and the process, the better I can picture you being a part of the team. Similarly make sure the company is investing in you from the start. Always seek feedback from your interviewers. It will show you if they are willing to help you grow, even if you are not part of the company.

Again, interviews are hard. They are mentally and emotionally draining to prepare for, conduct and to get results - especially if it is a no. More than likely that won't change. The more energy you put into the process, the more you will get out. But the greater the feeling of failure and self-doubt if you don't succeed. Know that if you do not get the position it wasn't meant to be right now, but that doesn't mean it won't work out in the future. Be yourself, plan, understand your value and invest in your growth, you will get there!

Outside of interviews you should be focusing on the work you love. As an interviewer I look for passion, but it most definitely does not have to be about programming. Bringing energy to a job can come from many different places, including places that are not related to your job.

I will leave you with this, NEVER FORGET interviews are two ways. You are doing the interviewing as much as you are being interviewed. You have to figure out if the company is going to help you get where you want to go, if they are going to be the right fit for you. It is hard, but don't ever be afraid to say no.

Remember, interviewing will never be a good representation of the work you can do, be honest. To yourself, and to others. Build trust and relationships.

Thanks for reading! Stay safe during this COVID-19 pandemic.

Here is a video of my vlog which is me talking about some of the same topics:

YouTube:

From idea to launch with react

Eric — Tue, 24 Mar 2020 23:05:41 +0000

I'm publishing a series on taking an idea to launch with react, nextjs and now! Take a look at the first video and let me know what you think! I'd love to be able to improve for the next video I shoot 🙌

I also recent added a few changes to https://teaming.now.sh that is love for you to check out and give feedback 😃

Thanks for reading, stay safe out there! ♥️

Simple Password Management with React and NextJS

Eric — Mon, 17 Feb 2020 18:17:33 +0000

Originally posted on Attempts.space

Here I will show you how you can add simple password management to your React application in minutes using paassword.now.sh. In this article I will be using React and the NextJS framework! I recorded a live stream doing this exact same thing for a personal project of my own, you can see it here

First we are going to create our sign up / log in page by creating a file in the pages directory of our project, something like: pages/sign-up.js. Using NextJS this will now allow you to navigate to the route /sign-up in your browser. In that file we can add our form:

// pages/sign-up.js

export default () => {
    const handleSubmit = async event => {
        event.preventDefault();
    }

    return (
        <>
            <h1>Log In</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="email"
                    name="email"
                    placeholder="Enter email"
                />
                <input
                    type="password"
                    name="password"
                    placeholder="Enter password"
                />
                <button type="submit">Let's go!</button>
            </form>
        </>
    )
}

Now we want to handle the submission of that form to create a new user or login a current user. For that we will need an api route, which I will call /api/user/auth. Here is the structure for that file:

// pages/api/user/auth.js
// A service to connect to Mongo DB
import connectToDb from './services/connect-to-db';
// A Mongoose model for a user that contains an email and a password Id
import User from './models/User';

export default async (req, res) => {
    // Make sure we initiate our database connection
    connectToDb();

    // our plain text email and password from the form
    const { email, password } = req.body;

    // Send a 200 OK
    res.end();
}

To store our email and password we will need to create a fetch request to our api route.

// pages/sign-up.js
import fetch from 'fetch';

export default () => {
    const handleSubmit = async event => {
        event.preventDefault();

        const {
            email: emailElement,
            password: passwordElement
        } = event.target.elements;

        const email = emailElement.value;
        const password = passwordElement.value;

        const response = await fetch('/api/user/auth', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, password })
        })

        if (response.ok) {
            // successfully created a new user
            // OR logged in!
        }
    }

    return (
        <>
            <h1>Log In</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="email"
                    name="email"
                    placeholder="Enter email"
                />
                <input
                    type="password"
                    name="password"
                    placeholder="Enter password"
                />
                <button type="submit">Let's go!</button>
            </form>
        </>
    )
}

In that handler we will want to create a new user! First we need to store and encrypt our password in paassword.now.sh. Then we can store the id that paassword returns in our own database to use later to verify password attempts.

// pages/api/user/auth.js
import fetch from 'isomorphic-unfetch';
import connectToDb from './services/connect-to-db';
import User from './models/User';

export default async (req, res) => {
    connectToDb();
    const { email, password } = req.body;

    // Store the password in paassword.now.sh
    const paasswordResponse = await fetch(
        'https://paassword.now.sh/api/create',
        {
            method: 'POST',
            headers: { 'Content-Type': 'application-json' },
            body: JSON.stringify({ pwd: password })
        }
    );

    if (paasswordRresponse.ok) {
        // get the id from the response
        const { id } = await paasswordResponse.json();

        // store the id and the email so we can log in later
        const user = new User({
            email,
            passwordId: id
        });

        await user.save();
    }

    res.end();
}

Paassword uses Airtable to store encrypted strings that are only reference-able by the id that is returned. You can learn more about how it works here and see the open source code here. Storing a secure password is as simple as one request like this:

ericadamski / serverless-password

A simple, secure way to create a password checker without needing a server

serverless-password

A simple set of routes for securly storing and testing ad-hoc passwords:

How to use

Go enter the password you want to use here: https://paassword.now.sh
Copy the URL given to you from step 1
Make a POST request to the URL you receive

import fetch from "unfetch"
const response = await fetch("<YOUR_URL>", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ pwd: 'your password attempt' })
})
if (response.ok) {
    const { valid } = await response.json()
    console.log(valid) // true || false
}

Live example

You can run this in a modern browser console.

be careful of CORS 😡

async function validatePassword(pwd) {
    const response = await fetch("https://svrlss.now.sh/api/get/rec3T73O3WNZk3IZj", {
        method: "POST",

…

View on GitHub

await fetch(
    'https://paassword.now.sh/api/create',
    {
        method: 'POST',
        headers: { 'Content-Type': 'application-json' },
        body: JSON.stringify({ pwd: password })
    }
);

That request returns us an id we can then validate a password against. Once it is stored in our database, using MongoDB in the example above, we can then reference by email and compare passwords with our passwordId.

Now if we want to check if someone has logged in, we can:

find their user record by looking up their email
use their passwordId to request a comparison from paassword

// pages/api/user/auth.js
import fetch from 'isomorphic-unfetch';
import connectToDb from './services/connect-to-db';
import User from './models/User';

export default async (req, res) => {
    connectToDb();
    const { email, password } = req.body;

    // Attempt to find a user with that email
    let user = await User.findOne({ email });

    if (user) {
        // We have found a user that matches the input email,
        // now we have to validate that the password entered
        // matches what we originally saved
        const validateResponse = await fetch(
            `https://paassword.now.sh/api/get/${user.passwordId}`,
            {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ pwd: password })
            }
        );

        if (validateResponse.ok) {
            const { valid } = await validateResponse.json();

            if (valid) {
                // The passwords match! send a 200 OK
                return res.end();
            }
        }

        // The passwords don't match or there has been
        // a network failure trying to reach paasswords
        // send unauthorized.
        return res.status(401).end();
    }

    const paasswordResponse = await fetch(
        'https://paassword.now.sh/api/create',
        {
            method: 'POST',
            headers: { 'Content-Type': 'application-json' },
            body: JSON.stringify({ pwd: password })
        }
    );

    if (paasswordRresponse.ok) {
        const { id } = await paasswordResponse.json();

        user = new User({
            email,
            passwordId: id
        });

        await user.save();
    }

    res.end();
}

There it is!

A relatively simple way to integrate password authentication in your React app. This does not cover handling front end tokens like JWTs or cookies but they can easily be added on now that verifying passwords is complete. Let me know if you want a more concrete example of this working or want to me write a follow up about JWT and cookies.

Thanks for reading!

Why I created 2 new software tools in 4 hours

Eric — Sat, 08 Feb 2020 06:11:48 +0000

My new role at work doesn't involve coding. I went from coding 8+ hours a day, mashing at keys, to answering emails and writing documents - a different type of key mashing. But today I got the chance to write some code, and it was SUBLIME!

I am working on changing how hiring is done at my company, shifting the perspective away from skills and onto culture and values. (If you are interested in my stance you can get a brief idea from these slides) Since I am still a programmer at heart I feel way more creative using mdx-deck to create my slide decks. It is a hybrid React and Markdown based presentation tool that allows me to manipulate, in finer detail, every aspect of the presentation. Does it take longer? YES. But it is significantly more enjoyable for me and it keeps me engaged. So here I am writing this slide deck for values based hiring training. I want each attendee to have easy access to the slides. I figured the internet was the easiest way to share them - since I'm programming anyway. BUT there is a huge problem. The presentation is for internal company use only - ⚠️CONFIDENTIAL⚠️! I was stuck. How can I put up my slides and keep them confidential? My answer: Passwords.

I thought I should password protect this presentation and that way everyone can have easy access to the presentation from the internet, at the same time being protected against wandering eyes. I spent 4 hours of my day solving this problem - how can I password protect a mdx slide deck? Since it uses React I figured the interface work would be simple, and truthfully there wasn't much to it. An input field, a label and a button to unlock the slides. The hard pard was figuring out how am was going to make sure the password was safe. I could hard code it into the presentation, but that doesn't seem secure enough. Which then means I have to keep it in some sort of environment variable. But I only have a front end I cannot use hidden secrets in environment files. I don't really want to have to write a complete backend for my slide deck! So I was stuck; how do I store a password, SECURELY, and validate against it without keeping it in the source code? 💥BOOM💥 then comes an idea!

I decide that encrypting and storing passwords doesn't need a lot of technology. It needs:

Some way of setting a password
Some place to store the encrypted version of the password
Some way of comparing an attempt to the encrypted version of the password

With all the tools that exist today I had to do very little work or setup to cross those 3 requirements off of my list. I decided I would write 2 serverless functions, one to handle creating, encrypting and storing a new password and one to compare passwords. I used the amazing products provided by ZEIT to write and host my functions. And the "database" for the encrypted passwords? I used Airtable. With these two technologies I was able to go from idea, to a completely working service in less than an hour!

You can check out the code here, it's open source!

In case you are worried about sending your passwords to some random persons Airtable, I don't blame you. Honestly, this is all I am storing!

There is no information in that table other than the encrypted password.

After this fun little foray of creating what I am calling a Password as a Service 😂 tool, I got right to creating my password protected presentation! The code for this is also open source and you can check it out here. I found it worked so well that I had to create a package for other people to use, so now you can also password protect your mdx-deck presentations with protect-a-deck 😂 (I am on fire with names right now 🔥).

Let me explain how this all works!

First, you come to my wonderful, publicly accessible website where the presentation is. The code checks to see if you have validated yourself, if you have not it doesn't show you any of the slide content.

In React something like this:

<div>
    {valid ? ( props.children ) : ( /* lock screen */ )}
</div>

The content of the slides isn't rendered and so it cannot be inspected with developer tools. You just can't see it!. Once you enter in your password I send off a request, to the handy new service I created, which checks against the password I set to see if they match. If they do, YOU'RE IN. Otherwise I send a very straight forward message kindly letting you know that you didn't make it.

It was so smooth I thought that I have to share this with other people! Not just the code, but also just a nice way people could create and easily validate their own secure passwords. So I popped a UI onto my two serverless functions to help create and compare passwords. I called it, because I am so good at naming 😂, PaaS-sword. You can head over there and start comparing passwords!

Before I let you go, let me give you an extremely quick rundown of how PaaS-sword works.

You submit a plain text password (don't worry I use https, so it is somewhat safe in transit).
My first serverless function uses bcrypt to encrypt the plain text password.
I store the encrypted password in the Airtable, BOOM stored.
I then return the Airtable reference to the row that the encrypted password exists in so we can compare against it later.

Now when I want to compare them,

I send a POST request with the Airtable reference from above (on the site I give you a nice URL for it) and some new plain text password to compare against.
I get the encrypted password from the Airtable and compare that with the plain text password you just sent.
If bcrypt says they match, HOORAY, if not, too bad.

My severs store nothing, the only thing that persists in Airtable is a fun string like:

$2b$10\$2o2z7RbWDeuEw.3sH4jYBuRbsQXVV9keK.83jcw01uQGjMiTY3cUW

Which means nothing to nobody and can never be translated back into plain text.

All of this to say I had a blast being creative about solving my problems. It is amazing the tools that exist to solve even seemingly trivial problems. These tools are only hours old, they have a long way to go before they fulfill their full potential. If you use them, and you like them, let me know so I can continue to make them better!

This was written at 1AM, so please - be kind to the tired rambling version of myself 😂

Thank you for reading!

My new blog

Eric — Mon, 30 Dec 2019 01:00:44 +0000

I have decided to write less on dev.to. Which seems like a ridiculous statement given how good of a platform it is. Here is my reasoning.

I have a new day job that does not involve coding, like at all. Most of what I do outside of work is build my company flawk.to, which involves some coding but nothing of immense value yet. But I still want to write. So I created a new blog called Attempts.. There I will be posting about my life as a father, my business development and current day job goings on - which will be very interesting in the coming months.

I wrote my first post https://attempts.space/the-beginning/, I would love it if y'all could take a look and give me some feedback! The blog is open source and based heavily on Dan Abramov's overreacted.io. It is hosted on Zeit's now feel free to ask me anything about building it.

Also, do you think it is a good idea to post less on dev.to even if my content is less development related?

Update on Flawk.to

Eric — Wed, 18 Dec 2019 20:03:46 +0000

It has been a crazy past 3 weeks. As we are moving into the holiday season I have decided to take some time off. Which means that for the next few weeks there will be no live stream 😭. There is one thing that I have been enjoying, and wanting to get better at, that I will continue - writing.

It has been a goal of mine to get better at writing. To get better at written communication. I have been reading a lot more, and I notice my comfort level with words starting to increase. I don't want to lose that. My posts about Flawk.to have not been great examples of excellent writing. I am more excited about the code and producing the product that I neglect the communication. I want to change this over my break.

I will still be coding. Now that I do a lot less of it at work (actually none of it) it has become a much more enjoyable past time for me. But I want to continue the habit I have developed of writing the Flawk.to update every week. I do want to make them better. I want to focus on the content and communication rather than the product. So here is my first, more communicative post.

I have been working as a full stack developer/team lead for the past 3 years. The company that I worked for recently got acquired, and two weeks ago I got a new position in the parent company. I am now the director of software development for a 300 person company. I am excited about this new role, and I only see massive opportunity. I want to start talking a more about that. I will be creating development standards, helping with new acquisitions, developing hiring practices and building new development teams. This company and the experience is nothing like I have never experienced. So I want to talk more about it. Talk more about the problems we encounter. Our solutions. My experience shifting a company culture by building empowered teams.

Besides that I will continue to build Flawk.to. I have recently finished reading "Start with Why", a brilliant book about leadership. As I continue to develop Flawk.to I want to make sure I follow some of the principles from that book. I will be working on developing Flawk.to's purpose - it's Why. I am positive I am close to it. What's important about the Why, is alignment of every part of the application and business with the Why. That is what my focus will be for the next couple of weeks.

I will continue to write. More than likely every Wednesday, but I am going to encourage myself to write more spontaneously. I will be writing about Flawk.to and my mission to find and align with Why. As well as my journey through my new role as director of software development. I am sure there will be some random nonsense in there as well.

If anything I talk about interests you, you can follow me on Twitter for smaller, real-time bits. Make sure to take a break, relax, and make space for creativity.

Thanks for reading ❤️

I am on a kick 🦵 right now. In my new role I have been meeting and talking with a lot of new people. AND I LOVE IT! So if you want to chat about anything, I am here to listen 👂.

All feedback about my writing is welcome! I am working at getting better. There is nothing more helpful than your opinion.