Forem: Levi ᕙ(⇀‸↼‶)ᕗ

Simple flat rate pricing for Jamstack consulting.

Levi ᕙ(⇀‸↼‶)ᕗ — Thu, 01 Jun 2023 18:13:32 +0000

Hey everyone!

So, I've been going through a bit of a makeover recently - not me, exactly, but my pricing structure. I've been doing some serious number crunching and have decided that a transparent, flat rate pricing structure would be best.

This idea was heavily influenced by Brett from DesignJoy, but I've also made some significant changes to suit my own circumstances.

It's a challenge to set prices for custom software development; there are just so many variables at play. Some clients want me to be a part of their team, attend meetings, rework old documentation, and the like. Others just need a top-notch UI, no questions asked.

So, I've come up with three pricing tiers that I think will accommodate most of you. Here's a little about each of them:

Foundation - For $2,500 a month, you get unlimited asynchronous consulting, 2 feature requests or bug fixes per month, and biweekly updates. This tier is perfect for those who run marketing sites or need an expert in React for consulting, PR reviews, or other asynchronous tasks. However, if you're looking to build something from scratch rapidly, you might want to consider the next tier.

Elevate - For $8,000 a month, you get unlimited asynchronous consulting, unlimited feature requests or bug fixes, weekly updates, a guaranteed 30 hours of work per week, biweekly meetings, and can request documentation or articles. I believe this tier will be a good fit for most, especially startups and SaaS companies aiming to launch an MVP, add unique features, or rewrite in React.

Amplify - For $10,000 per month, you get all the benefits of Elevate, plus daily standup reports, internal team collaboration, and weekly meetings. The 30-hour cap remains in place. This tier is for companies that need close collaboration with an existing engineering team, whether for task discussions, stakeholder consultations, or React training for your team.

In each of these tiers, you get me, a seasoned software architect with over 7 years of React experience, as your personal service provider. However, bear in mind that once my schedule is full, I won't be able to take on more clients!

If you're interested, please check out my pricing structure here and sign up before the slots run out!

Looking forward to working with you!

Changing Directions.

Levi ᕙ(⇀‸↼‶)ᕗ — Mon, 14 Oct 2019 19:23:23 +0000

I have been trying to make big changes in my life over the past year and it has been pretty wild honestly. When I was writing this time last year I was in a really weird place, I had just up and randomly quit my BIG BANK™ job without finding another one, I didn't know if I could find another one right away, honestly, I did not care, I just wanted out of that job.

I was in a dark place, despite being financially stable for the first time since I was 17 and homeless I was more suicidal than ever. It basically became all I ever thought about, that caused me to remember a video by Fun Fun Function that I had watched several months before starting to feel this way. This video honestly may have saved my life https://www.youtube.com/watch?v=BZAVtDR-SQs.

I decided to take my mental health as the highest priority as a form of self-preservation. Having already put a loaded gun to my head, it seemed like I was past the point where this was necessary. So I left my job and started living off my credit cards. This was the smartest decision I have made up until this point.

It was a slow process, but I have completely changed my outlook on life in less than one year. I can say that I am happier than ever, and now I feel like I am in a spot in my life where I can create some things I am really proud of. That will be my focus for the next year.

Betting my career on JAMstack.

Levi ᕙ(⇀‸↼‶)ᕗ — Sat, 02 Mar 2019 00:34:32 +0000

My posting declined a bit around the start of the new year, but that has been because I have been pretty busy doing some things.. Those things are the topic of this blog post! In the past few months, I taught a bunch of people how to use Gatsby and Netlify at the Phoenix chapter of the JAMstack meetups, you can see if you have one in your city by visiting The JAMstack community page! I have also taken on a few clients and made their site using Gatsby! I even included NetlifyCMS with one so the client could update their own content, and doing so was so enjoyable I feel as if a long-awaited dream of mine is finally a reality. I have long wished to have a handoff experience for static sites that was good enough to base an entire agency around, and I feel as if that era has finally arrived.

So with that said I would like to announce a few things!

First, if you want a website or application built, and you want it to be fast, reliable, and most importantly, deliver a rock solid user experience, you should get in touch with me over at jamstack.consulting. I am focusing specifically on clients open to the JAMstack, and will not be taking on projects that use a traditional CMS or a server side monolith. Going forward I think there is more than enough work to build an agency specializing in this type of work, and I really hope to build jamstack.consulting into something great.

Second, if you want to learn how to build websites and applications in this manner you are in luck! I am also working on jamstack.courses and that is for you! The first course will be a thorough introduction to the most amazing web framework around Gatsby JS! You will put together a personal blog and portfolio that will load at the speed of light and leave jaws on the floor. Be sure to leave your email so I can notify you when that is available.

So as you can see, I have unified my efforts to have a single focus. The JAMstack! I am eager to teach you all about it in coming blog posts, courses, and products. I think the web is fundamentally changing, and I want to document my exploration of what I believe to be a better, more modern way of building for the web.

How To Succeed In Web Development.

Levi ᕙ(⇀‸↼‶)ᕗ — Mon, 25 Feb 2019 17:52:44 +0000

This was posted to my personal site on Friday, I then post it here the following Monday. You might consider going there and joining my newsletter to get the latest posts early.

Everyone wants a silver bullet to success, the one simple trick to infinite riches. I spent most of my life thinking these silver bullets don't exist. However, as I am beginning to transition my career, and I am looking to start my own businesses/meetups/workshops I am starting to reconsider. I think I know the one thing any web developer can do to grow their level of success. Show up. Honestly, I think that is all it takes. If you are a dependable person and can show up on time and contribute to things you will be very successful in this industry. I am looking for people who fit these criteria and it is incredibly hard. I have had issues with showing up on time in the past, which led to me working remote, showing up looks differently for different people. I show up by consistently delivering quality work when I say I will. I don't often show up in person though. I also don't plan meetings until afternoon because I have issues waking up on time (judge me). To me "showing up" means you do what you say you will do. If I make a meeting with you, I will be there on time and ready to rock. I have structured my life in a way that allows me to do this. I suggest you do whatever it takes to do the same. I took a gigantic pay cut to do this and you probably can too, because you will end up making the money back when you establish yourself as dependable to a community.

Once a community sees you as a dependable person the doors that start to open to you are crazy. People will jump over each other to try and get some of your time. This will leave you with new problems, like guarding your time against people who fail to "show up" in return. I watch over my schedule with the authority of an unruly dictator. If someone on my schedule starts to consistently waste my time, I will close any door I opened to them. I have a lot of things I am working on, and a family I really enjoy spending time with. Because of this, I have to be extremely careful with how I spend my time. If I allow someone to waste it they are either taking time from my clients, friends, or worst of all family. We have a set amount of hours in a day. If you let foolish people waste yours you become a fool in the eyes of others. They might be hesitant to trust you going forward because they can see you don't respect your own time. When I see people letting others waste their time, I question how reliable they will be. If someone lets others waste there time, I am wary that I may get the short end of the stick one day while they let someone stomp all over their schedule. I will probably trust them with things, but not big stuff. Because of this, I recommend you make sure the people around you reflect positively on your own ability to "show up".

I have had big plans fall apart because the parties involved did not respect my time. In those situations, I would rather have a terrible developer who can show up consistently than a ninja, guru, rockstar, that operates as if the world revolves around them. I am a pretty solid developer myself and could help the poor developer fix their mistakes and grow. I am not sure if there is a way to change someone's perspective of the world, so I tend to just cut those people out of my life. I highly recommend you don't pursue being a better developer at the expense of being a better person. It is not a long term path to success and will leave you isolated even if you end up with all the money in the world, I think Steve Jobs is a great example of that. I hope people learn from him that there is more to success than money and power. Success stems from enjoying the work you do, and then by extension enjoying your life. I find that when you enjoy the work you do you tend to "show up" more regularly. Which leads me to the next reason I am wary of people who don't "show up"

Do you even enjoy what you are doing?

If you fail to show up regularly I can not help but start to wonder... Do you even want to do this? This is a natural question to ask because I tend to see people showing up to things they enjoy. When was the last time you casually strolled into a concert 10 minutes late? How about a meeting? What is the difference? You probably hate meetings if you are consistently late to them no? If this is the case I suggest you restructure your life into something you enjoy more. This reminds me of a line from "Vacation" by the Dirty Heads, it goes like this:

You say you hate your job, but you'll never leave, never leave
But that ain't gonna be me, that ain't gonna be me
My brother called me up said he saw me on TV
I said, "it wasn't easy, but right now I'm living breezy"
Build this engine from the ground up
Now my hands they ain't so greasy, feel me?

This line, unfortunately, reminds me of too many people. I fall strongly into the "that ain't gonna be me" camp. I am willing to make large sacrifices if it moves me further along the axis of career enjoyment I think this is incredibly important as your job makes up such a huge portion of your life. I feel bad for you if you say you hate your job but won't leave, I encourage you to reconsider that position. I highly suggest you look into the writing and speaking of Jason Lengstorf and wake up to the effects this can have on your long term health. You should at least like what you do if you can't love it. Since I believe in this so strongly, if you are showing signs of not enjoying your work, I will write you off as a long term business partner and would need serious reasons to even think about reconsidering. I have no patience for people who hate their job. It makes them slow, unreliable, and often miserable to be around. I love making fresh UI's, I find it enjoyable. I love working from home and making my own schedule. I think my clients and students can see this, as they often comment on how enjoyable I am to work with. It is easy to say "be enjoyable to work with" without addressing that you must enjoy what you do to achieve that.

In summary, I think that "showing up" is all it takes to succeed in web development, however "showing up" probably involves far more than you think it does, and it really stems from a place of enjoying your work. To become an enjoyable dependable option to people, you probably have to make some sacrifices, guard your time, structure your day well, and most importantly, enjoy what you do. I don't really think your programming ability matters much if you can deliever on everything else mentioned in this article.

returning to writing

Levi ᕙ(⇀‸↼‶)ᕗ — Wed, 20 Feb 2019 05:08:59 +0000

I am using this post to make a few announcements. First I want to tell everyone I am going to return to writing on here on a regular basis. I will be doing one post a week minimum, and more if inspiration strikes. Every post will be on my own personal blog an entire week early, so if urgency is your thing head over to lvrbrtsn and join my newsletter. That way you will be notified as soon as my next post “Betting my career on JAMstack” goes live. There will be lots in there about what I have been working on lately and my plans for the future. With that being said I would also like to mention two projects I am working on https://JAMstack.courses and https://JAMstack.consulting. You will hear more about those in the next post!

How The Hell Do I Use Filter?

Levi ᕙ(⇀‸↼‶)ᕗ — Sat, 22 Dec 2018 00:00:00 +0000

This is part two of a three-part series on the most helpful array methods, map, reduce, and filter. We will be tackling reduce next. The post on map can be found here. Today however we will be talking all about filter! Filter is a super useful method for removing elements from a list that don't meet certain criteria. What is that criteria you might ask? Whatever you want! This is made possible because filter like map is a Higher Order Function which we go over in the last post but basically it just means its a function that takes another function as an argument. Check out this example below.

// Dummy data to work with
const students = [ { name: 'Leroy Jenkins' grade: 55 },
                   { name: 'Tommy Pickles' grade: 98 },
                   { name: 'Mike Tyson' grade: 85 },
                   { name: 'Donnie Darko' grade: 90 } ]

// Our filtering criteria. Which can be any
// function that returns true and false
const isPassing = (student) => student.grade >= 65

// Usage of filter.
const onlyWinners = students.filter(isPassing)
// => [ { name: 'Tommy Pickles' grade: 98 },
//      { name: 'Mike Tyson' grade: 85 },
//      { name: 'Donnie Darko' grade: 90 } ]

So the only condition for using filter is that you supply it with a function that returns a boolean.
It's then going to iterate over your array running your supplied function through it. When it passes in an item (or student in this case) and the function returns true then it keeps that value for the new array being created. If the function returns false then filter will say "get out of here you stinky item" and filter it out. Hence the name! I love it when things in programming are actually named well (▰˘◡˘▰).

Filter is an insanely useful method. Think of how often you need to perform an operation over just a subset of data. Well, now you can just filteraway anything that doesn't meet your criteria and them map your operation over what is left. This is both efficient and easy to understand. I think that the real power these array methods hold is their ability to be chained together.

const cuisines = [
  { name: 'tacos', rating: 10, status: 'raw' },
  { name: 'thai', rating: 10, status: 'raw' },
  { name: 'pizza', rating: 8, status: 'raw' },
  { name: 'bbq', rating: 7, status: 'raw' },
]

const preppedMeals = cuisines
  .filter(food => food.rating > 8)
  .map(food => ({ ...food, status: 'prepped' }))

I often use filter to remove values that contain 'undefined' or null on a piece of data. That can be done really simply like this:

const safetyDance = array
  .filter(obj => obj.prop) // since undefined and
  // null are falsy they will be removed.
  .map(prop => prop.otherProp) // Safe to do because
// of our filtering!

All in all filter is a lot like map but instead of transforming data, it is used to filter it based on criteria you define! It becomes incredibly powerful when used together with map, and they can be chained together to do both in a single declaration! You can start to see how these methods are more than meets the eye when using them together like this. It starts to make you wonder what can be accomplished if we take this up a level. Well, good news! You will find out with Reduce! Subscribe below to be notified when the reduce post comes out!

How The Hell Do I use Map?

Levi ᕙ(⇀‸↼‶)ᕗ — Tue, 18 Dec 2018 20:14:20 +0000

This is a post from my personal blog located Here
They are published there a day or so early. How fancy.

I often encourage my students to use the array functions map, reduce, and filter but they rarely feel comfortable with them, which is really a shame because they are like a swiss army knife with a mounted flashlight. These three functions could probably remove thousands of lines of your most confusing buggy code. Let us start with the all-star of the bunch map.

Map is an interesting type of function, it can look extremely strange at first like someone has peeled away the JavaScript you know and love to expose some ancient alien technology.

array.map(x => x * 5) // What r u even Doing tho!!!!

Let's break down this line of code just to achieve a baseline.

First I would like to point out the arrow function x => x * 5 (if you are unfamiliar with what arrow functions are read this Blog Post! where I hopefully explain them pretty well.)

What is a function doing there? Is this a callback? Well... sort of... but no. It kind of helps to think of it as a call back if you want, in that it is a function passed and a*argument, and another function determines its execution... So in a few ways, it is like a callback. Still, it is not a callback, instead, it is referred to as a **Higher Order Function* which is a blog post for another day.

Ok, ok, so map takes a function as an argument... But why? What does it do with it?

Well, map just iterates over your array, meaning it takes each item of the array one by one and passes it into the function you supplied.

So if you were to see this

const scores = [90, 80, 25, 50]

const doubleScores = sores.map(x => x * 2)

Then you could determine that doubleScores will be calculated by taking each item in scores and running it through x => x * 2. So what will that leave us with?

Well, it has to be an array too right, because we need to store 4 results. So we know doubleScores is going to be an array. And it is an array filled with the results of doubling some other arrays contents.

// A way to visualize what map is doing
cosnt scores = [90, 80, 25, 50]
const double = x => x * 2
const doubleScores = [ double(scores[0]),
                       double(scores[1]),
                       double(scores[2]),
                       double(scores[3]) ]

Ok, so then what does map do?

Well, one way to explain it is that it allows you to take a function that expects single items as arguments, like in the above case, a single number. And use this function with an array of many items. Whoa... it's like a pocket for loop that every array is just carrying around with it.

This is actually pretty dope because that means instead of writing for loops, I can write simple functions that are used to operating on single items and just presto-chango use them to transform lists of items. This is really great because for loops have cruft and boilerplate that can mask what the actual intention of the code is. Consider the following code.

const students = [ { name: 'Leroy Jenkins' grade: 55 },
                   { name: 'Tommy Pickles' grade: 98 },
                   { name: 'Mike Tyson' grade: 85 },
                   { name: 'Donnie Darko' grade: 90 } ]

// A simple function expecting a single student, and returns true if they pass the class and fail otherwise.
const isPassing = (student) => student.grade >= 65 ? true : false

// Usage with a single student
const tommyPickles = students[1]
const didTommyPass = isPassing(tommyPickles)

// Usage with the entire list
const classResults = students.map(isPassing)

// Extra credit c-c-combo usage with filter
const onlyWinners = students.filter(isPassing) // more on this next week.

How slick is that? Can you imagine trying to use that function in the middle of a for loop? It would look like a mess, instead, it looks like a beautiful one line declaration. Map gives us superpowers!
And when I say its like a pocket for loop I mean it, literally any for loop can be re-written using map, and it usually turns out much simpler. For example, the above first written as a for loop looks like this

const scores = [90, 80, 25, 50]
const doubleScores = []
for (var i = 0; i < scores.length; i++) {
  doubleScores.push(scores[i] * 2)
}

Eww wtf no. Bring back the map version

const doubleScores = sores.map(x => x * 2)

ohhhh yes... much better.

See the difference? The map version fits on one line, has much less cruft, and makes you look so much cooler... ok maybe that last part is not true. The larger point is true though, there is rarely a need to write for loops if you know your way around map. I actually have not written a for loop in so long that I had to double check MDN when writing the one you see above. I honestly just don't use them much anymore.

Wtf are arrow functions?

Levi ᕙ(⇀‸↼‶)ᕗ — Mon, 17 Dec 2018 19:45:39 +0000

This post is a bit weird for me to write because I basically only write arrow functions. I rarely ever use the traditional function syntax anymore. However, this post is still worth writing because many of my students only use the function syntax and I want to both show them another way and point out the minor differences that come with arrow functions!

First, what am I talking about? Well! Glad you asked, let me show you below. As you can see I have declared two very simple functions in two different ways. The bottom one is an arrow function.

Ooooh, how fancy.

An arrow function is a function declared using the => syntax. Get it? It looks like an arrow.

function someFunc() {
  console.log('No Me Gusta')
}

const otherFunc = () => console.log('Me Gusta')

They really come in handy when using higher-order function like map, which you can read all about in this Blog Post

someArray.map(function(item) {
  return item * 2
}) // Eww gross.

someArray.map(item => item * 2) // Sexy!

See how much better the arrow function looks there? I am a big fan of simplicity and minimal syntax. I believe that comes from writing so much Ruby in my early days of programming, and arrow functions deliver big on simplicity.

One of the first things worth taking note of about arrow functions is that when the expression is on a single line the {} braces are not necessary. As you can see in all of the examples above. The return is also implicit for this single line functions. How cool!

This doesn't mean every arrow function has to be a single line though. As I stated above, I always use the arrow syntax, which means my multi-line functions look like this.

const someNewFunction = (arg1, arg2) => {
  // Do some stuff with arg1
  // Do some other stuff with arg2
  // Solve world hunger
  return arg1 + arg2
}

Notice we need the return again when it is multiple lines.

One other thing worth noting before I wrap this really short post is that the context of this is different for arrow functions. Basically, this works lexically for arrow functions. Meaning the way you thought this worked originally only to learn you had no clue how this actually works at all. It keeps the context from where it was declared, kind of like self in any OO language. Which means you can do this in React without having to worry about binding.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  increase = () => this.setState({ count: this.state.count + 1 })
  render() {
    return (
      <div className="App">
        <button onClick={this.increase} />
        <h2>{this.state.count}</h2>
      </div>
    )
  }
}

Customizing Bulma on a Gatsby Blog

Levi ᕙ(⇀‸↼‶)ᕗ — Sat, 15 Dec 2018 21:40:35 +0000

This is a post from my personal blog located Here
They are published there a day early. How fancy.

Here is the TLDR version of this post:

First, we need to npm install --save Bulma gatsby-plugin-sass.
Then we should put gatsby-plugin-sass into our dang ole gatsby-config.js.
After that, we should change layout.css to layout.scss.
Which allows us to @import '../../node_modules/bulma/bulma.sass'; in that same layout.scss file.
Then, above that, we can declare any variables you want to override.

Below are the variables I set for this blog here as of writing this post.

$primary: #b084eb;
$blue: #7dc1ff;
$input-shadow: none;
$info: $blue;

As much as I love writing my CSS from scratch it is not always the best choice, and after going indy I had to heavily consider using a CSS framework. I decided to for the following two reasons.

I want the courses to focus on JavaScript so I want to use an easy to use CSS framework so the content can focus on just the JavaScript.
I want to build many things quickly that share a theme.

Choosing which framework was easy for me as I really love Bulma, I used it heavily at U-Haul and really enjoyed working with it. I love that it ships with no JS, can be installed via npm, is easily customizable, has some cool community made themes, and it's naming conventions make sense to me. It is by far my favorite CSS framework and is a breath of fresh air when compared to something like Bootstrap.

The piece of Bulma this blog is focused on is the easy customization. You can read all about Bulma's customization Here. I will, however, cover a little bit of it below.

Basically, Bulma has a few types of variables, and you can override them with your own brand values. Some are derived from others. So changing a few of the base variables can have a big effect!.

I really only wanted to do a few things, change the primary color, the shade of blue used, and remove the input's inner shadow. But first I need to install Bulma on my site.

I have not done much with my Gatsby site yet, it is using the default-starter which hooks you up with a layout.css file. Bulma uses Sass though so we will need to change that. Luckily Gatsby makes that super easy all we need to do to get Sass working and compiled with node-sass on our Gatsby site is install gatsby-plugin-sass and add that to our Gatsby config like below.

plugins: [
  'gatsby-plugin-react-helmet',
  'gatsby-plugin-sass',
  // ...other plugins.
]

Boom! Now we're cooking, we can change the layout.css file to the layout.scss file now and import Bulma, and since we set it up this way, we can also already override those variables. Leaving my layout.scss file looking like this

// BULMA VARIABLE OVER-RIDES
$primary: #b084eb;
$blue: #7dc1ff;
$input-shadow: none;
$info: $blue;
$background: #fafafa;
@import '../../../node_modules/bulma/bulma.sass';
// ...All the Gatsby default stuff.

Learning Resources for New Developers!

Levi ᕙ(⇀‸↼‶)ᕗ — Mon, 26 Nov 2018 02:54:54 +0000

Going to be adding to this over time. But wanted to get this very incomplete version up.

Blogs
CSS Tricks
Scotch.io
Alligator

Videos

Channels/Series
DevTips
Funfunfunction
Level Up Tutorials
JavaScript 30 in 30
Programming with Mosh

Single Videos
Improve your JS
Learn Map
Learn Reduce

Useful Guides
CSS Grid
Flex Box

Podcasts
Toolsday
Shop Talk Show
Syntax.fm

Cool People
Sarah Drasner Makes really cool animations.
Una Kravets Makes the web look better with awesome CSS.
Dan Abromov Makes me re-think React all the time.
Mark Erikson Makes me understand Redux.
J.C. Hiatt A stellar developer who inspires me to be fit 💪
Justin Samuels Putting on the coolest conference of the decade.

Throwing in the towel.

Levi ᕙ(⇀‸↼‶)ᕗ — Sun, 18 Nov 2018 05:26:05 +0000

Today really feels like the last day I do this challenge. I could not think of anything to write all day, I have lots of topics I want to write about. Just not in a rushed article a day fashion. I feel like I have learned a lot with this challenge so far and I’m not sure how much more there is to learn from it. However I want to sleep on the idea of dropping it. So I’m writing this, counting it and deciding if I’ll post again tomorrow.

Fortnite is the greatest example of Agile development I have seen to date.

Levi ᕙ(⇀‸↼‶)ᕗ — Sat, 17 Nov 2018 02:34:41 +0000

This is something I plan on doing a series on, maybe next month, but during season 2 of Fortnite I started to see what they where going for and predicted much of what they have done to date. When they introduced "Battle Royal" mode, I at first thought it was a desperate attempt to pivot their poorly received initial PVE early access mode, but later started to realize they may not care about the game mode at all. They are using what is popular and easy to build (Battle Royals) to deliver a steady stream of new content, new modes and most importantly new skins. In the months I have been watching the amount of content added to Fortnite has been absolutely off the charts.