DEV Community: Sebastian Messier

How I Build Forms Quickly in React

Sebastian Messier — Wed, 03 Aug 2022 18:28:00 +0000

Forms are everywhere in web apps. Whenever you log in, make a post on social media, or buy something online, you’re using a form.

Despite their ubiquity, building forms requires a lot of attention and care. Form fields should only accept specific types of data, perform validations, and show errors on invalid input. As more fields are added, the complexity of the form grows.

This work is repetitive and tiring. Wouldn’t it be great if we could make form building trivial?

Enter RJSF

I’ve tried lots of form libraries, but none solve the burden of easy, rapid form building as well as RJSF does.

What makes forms difficult is the management of JSX, state, validations, and errors. As you add more fields, you also need to manage more of the aforementioned things, which can get overwhelming fast.

RJSF solves this by being a declarative form builder. Instead of manually defining the form and validation logic, you describe your form using json-schema, and RJSF handles the rest.

I’ve been using it in production with my clients to great effect. To show you how it works, we’ll make a quick sign up form. Familiarity with json-schema is helpful, so here is a 5 minute primer.

Making a Sign Up Form

We first need to collect the user’s email and password. This is what the RJSF react code looks like:

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string"
      }
    }
 }}
/>

From this small bit of code, RJSF has built a heading, text inputs, and submit button. Cool, but this is far from done. Some improvements we can make:

Make email and password required fields
Enforce minimum password length
email field should only accept emails
password input should be obfuscated

Let’s add these in.

Make email and password required fields:

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
         },
      password: {
        type: "string"
      },
    },
    required: ["email", "password"]
  }}
/>

Enforce minimum password length

<Form
  schema={{
  title: "Signup",
  properties: {
    email: {
      type: "string"
    },
    password: {
      type: "string",
      minLength: 8
    },
  },
  required: ["email", "password"]
}}
/>

email field should only accept emails

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    }
  }}
/>

password input should be obfuscated itself

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    },
    "password": {
      "ui:widget": "password"
    }
  }}
/>

And here is the final result (View the code here.)

RJSF supports HTML native error handling, as well as custom JS error handling.

What Else Can RJSF Do?

This is just scratching the surface. RJSF has much more to offer.

Themes

Native support for popular libraries like chakra, semantic-ui, material design, and more.

Complex Fields

Multi-select dropdowns, check boxes, configurable lists, and much more are supported out of the box. If you need, you can also create your own custom form fields.

Custom Validations & Errors

Add custom validations to your form. Here is a custom “password match” validation:

<Form 
  validate={(formData, errors) => {
    if (formData.pass1 !== formData.pass2) {
      errors.pass2.addError("Passwords don't match");
    }
    return errors;
  }}
  schema={{
    type: "object",
    properties: {
      pass1: {type: "string", minLength: 3},
      pass2: {type: "string", minLength: 3},
    }
  }}
/>

What are the RJSF Cons?

While RJSF is great, it also comes with downsides:

Bundle Size
The RJSF core package is .25 MB, which is large! Upon close inspection, you can see that 33% of the bundle is attributed to the AJV JSON Schema validation library. The maintainers are working on removing this dependency in a coming release.
Large Forms are Slow
I noticed this firsthand when building a dropdown with over 50 options. My form was super slow because of this. Reducing the options to ~15 seemed to solve it.

RJSF is fantastic if you're still figuring out the data your form is collecting. However, the docs mention that "if you have a priori knowledge of your data and want a toolkit for generating forms for it, you might want to look elsewhere".

Conclusion

This was a quick dive into RJSF, my favorite react library for rapid form development.

If you’d like to try it out, check out this playground. It has tons of examples that show the power of RJSF. If you dig it, help the maintainers out by giving them a star on GitHub⭐

The post The Best React Form Library (2022) first appeared on 💻 Web Dev With Seb.

Sr Dev’s Thoughts on The Odin Project (Part 1)

Sebastian Messier — Thu, 28 Apr 2022 20:08:25 +0000

You can view the video version of this post here👈

The Odin Project is a free programming course that teaches full stack web development from the ground up. It’s immensely popular on r/learnprogramming, where it’s generally recommended as the starting point for a beginner’s journey into software development.

This is a two-part post covering my thoughts on the first part of the curriculum, titled Foundations. The second part will cover the full stack section of the course.

We will be focusing on the first half of the curriculum called “Foundations”.

There are three things I’m going to be sharing today.

my impressions regarding the course and its content.
Any gaps that I found in the course’s material
Is it worth it from a sr dev’s perspective?

Let’s jump right in.

What I Liked

First things first, all the technology is covered in the foundation section are relevant today in 2022. I use my cli, git, Github, VSCode, and CSS primitives like flex box and flex grid on a daily basis.

They also cover some more underrated topics very early in the course. Things like chrome dev tools, atomic commits, and more advanced javascript patterns like default params and arrow functions. Getting you familiar with these less prominent features sooner rather than later will make your life much easier as a student of full stack web development.

Tired of getting stuck in code issues? Chrome Dev Tools will help.

The most important of these are the chrome dev tools. They help you debug, modify, and tweak CSS styles all within the browser. If I’m being honest, a large chunk of my time building front ends is in the chrome dev tools. It makes me happy to see the Odin project mentioned these early in the curriculum.

The last thing I loved about the Foundation section was how some lessons send you off to read documentation, blog posts and articles. I love this because it closely mirrors how software development works in the real world. Software developers spend a good amount of their time browsing documentation, reading blogs (and dare I say it), consulting Stack Overflow.

The curriculum takes a similar approach here. Instead of giving you a complete resource, it asks you to consult various disparate sources and synthesize this information into knowledge and eventually code. This is essentially how software is built. I found this to be a very clever way to recreate this aspect of software development, which might go over many beginners heads.

What I didn’t like

Next up, I’m gonna be talking about some of the things I didn’t love about the Foundation section of the Odin project.

I only had one issue with the curriculum, and that’s that it doesn’t talk about data structures and algorithms. My guess is that at the end of the day, they want you to learn how to build web apps as quickly as possible.

This book is a great primer on DSA. We will talk more about it later.

That’s perfectly fine. But eventually you will need to learn data structures and algorithms at some point. Most jobs require you to pass a technical interview which test your knowledge of data structures and algorithms. While I’m personally not a fan of it, this is sadly the status quo in the industry, and it’s something we all have to deal with.

What are the Gaps?

So now that we’ve covered my first impressions of the course, we’re going to move on to some of the gaps.

I was pleasantly surprised to find very few gaps in the course. Foundations has all of the web dev fundamentals covered. If I was forced to pick a gap, I think the obvious ones are the lack of data structure and algorithms content.

A decent resource here is a book called “Cracking the Coding Interview“. It gives you a very quick rundown of various data structures and algorithms and how to use them effectively in coding interviews and the real world.

The foundations also lack advanced content regarding the CLI, Git and CSS frameworks like Tailwind CSS, Sass, or Chakra.

I think this is intentional in order to avoid overwhelming you. But if you’re ready for it, I think taking a deeper look at some of these technologies is a good idea.

For the CLI, I recommend checking out something called Oh My Zsh. It’s something that I use every day in my terminal and it provides really cool features like plug-ins, themes, and even auto completions for git, rails, and much more.

There are a ton of Git GUI options in the link below.

As far as git is concerned, I was surprised to see them show you just the cli and not any git GUIs. A git GUI is simply an application that lets you use git through a visual interface instead of the CLI.

I’m a big fan of the CLI, but if you’ve ever come across a painful merge conflict, you’ll know that fixing it in a git GUI is much easier than the command line. I highly recommend you check them out if git is giving you a headache.

As for CSS frameworks, I’m a big fan of Tailwind CSS. While, I don’t think it’s necessary for beginners to take a look at just yet, if you’re ready to level up your CSS, I recommend you check it out.

The TLDR is that Tailwind is a bunch of pre-defined CSS classes. To use them, you just add them to the style attributes of your html tags. It’s like legos for CSS.

Trust me, once you start using it, CSS becomes much more delightful to use. Just make sure you have your CSS fundamentals down before you start reaching for a tool like this.

Is it Worth it?

It’s now time to answer the big question…Is the Odin project foundations worth it?

The answer is a very strong YES, absolutely. It’s free, which is honestly incredible. I studied computer science at a four year university and didn’t learn most of these things in college. I learned most of these things on my own, at internships and jobs.

Seeing this all be presented in a nice little package is pretty awesome. And what is even better is that the material is constantly being updated, since the course is open source. Seeing arrow functions and default parameters be presented in the javascript sections was really encouraging. It shows that the maintainers are keeping the content updated with the latest standards.

What’s cool about the course too is that it has a pretty vibrant discord community. I see a lot of people encouraging each other and motivating each other to stick to it. If you’re curious about web development and would like to give it a try, I highly encourage you check TOP out.

In a follow up post, I will be discussing the second half of the course, which is the full stack track. I hope to see you again soon

The post Sr Dev’s Thoughts on The Odin Project (Part 1) first appeared on 💻 Web Dev With Seb.

Code Smarter; Use a Debugger

Sebastian Messier — Mon, 28 Mar 2022 12:24:00 +0000

I was helping a friend debug an issue yesterday. He just started learning PHP, and was building an auth login page in HTML/CSS/JS.

The bug was strange – there was an if statement in his client side javascript which always resolved to false:

if (response.html == "OK") {
  // Response Success
  console.log("This Print Statement Never Executes")
} else {
  // Error Occurred
  console.log("This Print Statement Always Executes")
}

There was no indication as to why response.html was never equal to “OK”. The backend logs looked fine, and the client network logs even showed “OK” in the response.

My friend spent the whole day trying to figure out what the hell was going on. He eventually called me and asked if I could take a look.

The Moment

On initial inspection, everything seemed fine. I couldn’t immediately tell why this didn’t work. So I jumped in to chrome devtools to start the debugger.

We put down some breakpoints and found the issue in a minute. It turned out the backend response was “\nOK”. A single, measly newline was the issue.

My friend couldn’t believe there was an alternative to debugging with console.log(). I showed him how to place breakpoints in his code, pause his code mid-execution, check the state of the program, and use this information to figure out why things aren’t working.

Seeing how happy it made him motivated me to share this story. If you find yourself getting stuck on bugs and start writing print statements everywhere to fix the issues, I urge you to look into using a debugger.

If you’re doing web development, Chrome has fantastic dev tools built in to the browser. Here are their docs on how to set up debugging breakpoints in your client side javascript apps.

Conclusion

My goal is to inspire people who are currently not using a debugger to finally do it. For reference, I spend at least 30% of my time in the debugger as a professional developer. That’s how useful it is.

If you’re on the self-taught track, you need to be resourceful with your time and energy. Code smarter, not harder, by using a debugger. I guarantee it will make the journey much easier.

Want more web dev tips? Follow me on twitter and subscribe to my web dev newsletter.

The post Code Smarter; Use a Debugger first appeared on 💻 Web Dev With Seb.

Stuck in Tutorial Hell? This Open Source Project Might Help

Sebastian Messier — Wed, 23 Mar 2022 12:19:00 +0000

I’ve noticed there are lots of people frustrated & stuck in tutorial hell. If this describes you, I’ve found an open source project that I think might help.

It’s called RealWorld.

What is RealWorld?

RealWorld is a production ready full-stack Medium clone. It has all of the things you expect from a production-ready application:

user accounts
authorization & authentication
pagination
mobile responsiveness
…and even tests!

It’s all open source, and (best part) it’s been implemented in tons of different frontend and backend frameworks. This makes it perfect for learning your framework of choice, while sticking to the same end-goal.

Another awesome feature is that you can mix and match the frontend with the backend, because they all adhere to the same API spec.

This means you can swap between React, Vue, Svelte, Angular on the frontend, and hook that up to either a Node.js, Go, Python, or Rails backend. There are tons of options to choose from.

Here is what the demo app looks like:

How Will This Get Me Out of Tutorial Hell?

The problem with video tutorials is that they don’t teach people how to build their own projects. Instead, they show you how to build something in a very specific way.

Learning how to paint is a great analogy here. You can watch a painter and follow along as they create a painting. You might end up with a nice painting, but can you really say you know how to paint on your own?

Instead of copying a painter’s process, you should instead copy their end result – the painting itself. As you copy it, you will develop your own style and technique. With enough practice, you can then carry these skills towards your own projects.

Rebuilding a project like RealWorld is the same as copying the painting all by yourself. By doing this, you will learn how to:

find solutions to the problems that arise along the way
compare your implementation to those on github
stay motivated with a concrete end-goal in mind
develop your own process and techniques for building software

Conclusion

Learning from tutorials is a great way to get started. But if you’re not making progress, you should try something less passive, and more interactive.

Rebuilding an existing production-ready code base is a great way to graduate out of tutorial hell, and start building projects all by yourself.

It won’t be easy, but if you stick to it you will eventually learn how to build your own projects. And once you reach that point… the sky is the limit.

Want more web dev tips? Follow me on twitter and subscribe to my web dev newsletter.

The post Stuck in Tutorial Hell? This Open Source Project Might Help first appeared on 💻 Web Dev With Seb.

How To Go From Ignored to Hired

Sebastian Messier — Mon, 14 Mar 2022 12:33:00 +0000

Getting my first web dev job was painful. After 100 ignored/rejected job applications, I knew there was something wrong.

With time I learned the truth. Employers ignored me because I lacked employment history.

It makes sense: the more experience you’ve got, the more valuable you will be to a prospective employer. But how does one get experience, if you can’t get hired?

After much hesitation, I deployed a simple solution. I expanded my job search to part-time & freelance work. It eventually got me hired.

Struggling? Start Freelancing

When I reached 100 rejections, I knew I had to try something else. Freelance web development seemed like a viable option.

My reasoning was simple – if no one wanted to hire me full-time, perhaps someone would hire me for part-time work?

I hesitated. If my lack of experience can’t get me a job, wouldn’t it also make freelancing impossible? I decided to try anyway.

I applied for web dev work every day on UpWork, Indeed, and Craigslist. I focused on what I knew best: JS/HTML/CSS, and Node.

Within a month, I had landed a freelance gig. It was a React project for a local business and they paid me $20/hr. I was finally earning money and gaining real world experience.

The Benefits of Freelancing

The lesson I learned was that in tech, getting freelance work is easier than getting a full time job.

Convincing clients to let you build a website for their small business is much easier than convincing employers to hire you.

Freelance also gave my resumé an edge when applying for jobs:

real world experience
broad portfolio of projects
paying customers as professional references

Eventually, one of my clients asked if I was interested in a full time position. Without hesitation I joined as a full time web developer and kickstarted my career.

Don’t Give Up

Landing your first web dev job will be one of the toughest obstacles of your web dev career. It will take patience and lots of hard work.

If you feel like you’re getting nowhere, I recommend you try freelancing. It opened doors for me when nothing else did.

I highly recommend you consider it if you’re stuck on your web dev job hunt.

Want more web dev tips? Follow me on twitter and subscribe to my web dev newsletter.

The post How To Go From Ignored to Hired first appeared on 💻 Web Dev With Seb.

How to pick the best NPM packages

Sebastian Messier — Fri, 04 Mar 2022 15:10:02 +0000

Picking the best NPM package is no easy task; there are always too many options to choose form:

React vs Next vs Vue vs Angular vs Svelte vs …
Express vs Koa vs Fastify vs Nest vs …
Sequelize vs Prisma vs TypeORM vs Knex vs …

At the end of the day, all we want is to avoid wasting our precious time learning an obsolete package.

I’m going to share 2 tips to help you pick the best NPM packages for your projects every single time.

Tip #1: Stick to What’s Popular

Choosing popular packages is a very smart move in the NPM ecosystem. Doing so has three powerful outcomes:

Minimizes the risk of learning an obsolete / dead package
More opportunities for employment / freelance
Larger ecosystem of plugins / extensions to build on

I’m joking. Angular is a mighty fine framework.

My favorite way to measure adoption of a framework is to search it on Openbase.

Openbase lets you compare NPM packages. You can browse their weekly downloads, Github stars, active contributors, and reviews.

Tip #2: Stay Within Your Circle of Competence

In a world where shiny object syndrome runs rampant, avoiding the magnetic pull of hype is a superpower. Instead, stay within your circle of competence by using familiar packages.

This is helpful for a couple of reasons:

Keeps you productive
Raises the odds of success
Builds upon your existing knowledge

In doing so you avoid the cost of learning a new package. If you stick to what you know, you wont have to scan documentation or watch tutorials.

This keeps you productive & eases the burden of shipping a project.

A good way to stay within your circle of competence is to browse related tools to those you use every day.

If you know Vue → check out Nuxt
If you know React → check out Preact
If you know Postgres → check out Supabase

When in doubt, pick packages that build upon your existing knowledge. You’ll rarely regret it.

Conclusion

The NPM ecosystem is an ever-evolving beast. New packages come and go on a monthly basis. This makes picking the right NPM packages hard, when it doesn’t have to be.

The best JS developers defer to picking what’s popular, and staying within their circle of competence.

If you stick to these two principles you’ll decrease the learning curve of new libraries and frameworks. You will be working smarter, not harder, and your knowledge will compound.

Do this long enough, and you’ll pick the best NPM packages for your next project every single time.

Want more web dev tips?

Follow me on twitter and subscribe to my web dev newsletter.

The post How to pick the best NPM packages first appeared on 💻 Web Dev With Seb.

The 3 Best Full-Stack Hosting Platforms (2022)

Sebastian Messier — Thu, 03 Mar 2022 13:52:00 +0000

I’ve compiled the 3 best full-stack hosting platforms based on 3 criteria:

Ease of Use (You don’t need to learn/know dev ops)
Generous free tiers
Affordability

Disclaimer: Since we are focusing on full-stack apps we will ignore popular front end hosting platforms like Vercel and Netlify. These are great solutions for deploying frontends, but they do not let you deploy your own backend.

1) Railway

Railway launched in 2020. The platform is growing in popularity with startups and solo developers.

Best of all, it is incredibly affordable. Their developer plan offers 100 GB of disk and 32GB of RAM. Depending on your app’s hourly usage, this can cost you a couple of dollars a month.

I am currently running photorake (lots of disk usage!), comb, and umami for $1 a month on Railway. This is the best pricing I’ve found across the board.

Pros

Logs & monitoring within web UI
Automated Git based deploys via Github
Flexible Pricing (only pay for what you use)
$10 of free credits a month
Easy to use App Starters
Apps never go dormant due to inactivity

Cons

Uncapped expenses when your app’s scales

2) Render

Render launched in 2018, and they’re positioning themselves to be the next Heroku. You can host static sites, web apps, background workers, cron jobs, Postgres databases, and Redis caches on Render.

They have a similar pricing model to Heroku where you pick the infrastructure up front based on your RAM and CPU needs. Their prices are heavily discounted when compared to Heroku, which is awesome.

Pros

Competitive Pricing with Heroku
Logs & monitoring within web UI
Automated Git based deploys via Github
Various apps supported (static sites, bg workers, cron jobs, DBs)
One-click Quick Start Deployments
Expenses are fixed based on plan

Cons

Disk is $0.25/GB (3x EBS pricing on AWS)
Free apps go dormant after 15 minutes of inactivity

3) Heroku

Heroku is the original developer friendly platform for full-stack web apps since 2007. It is popular with enterprises, startups, and solo developers alike.

You can host full stack apps, Postgres DBs, Redis Caches, and Apache Kafka queues. Rails and Django apps are commonly hosted on Heroku.

Pros

Great for Rails and Django Apps
Logs & monitoring within web UI
Automated Git based deploys via Github
Robust Add-ons Ecosystem

Cons

Free apps go dormant after 30 mins of inactivity

Which is my favorite?

After having tried the above platforms, I’ve decided to run my apps on Railway. The fact I don’t have to know my CPU/RAM needs up front, their affordable pricing, and the fact my apps never go dormant have won me over.

I’m only paying 1$ a month to host 3 web apps with Railway.

I encourage you to give these 3 a try and find your favorite; you won’t be disappointed.

If this helped you narrow down a platform for your next side project, give me a follow on twitter, and subscribe to my newsletter.

Happy Hacking! 😎

The post The 3 Best Full-Stack Hosting Platforms (2022) first appeared on 💻 Web Dev With Seb.

Full-Stack JS is Insane… Is Rails better?

Sebastian Messier — Wed, 02 Mar 2022 02:12:52 +0000

“Is Rails better for full-stack development?” is a question I see a lot.

The person asking is typically a full-stack JS developer that is overwhelmed by the sea of frameworks to choose from.

In this post we will see what sets Rails apart from full-stack JS to decide if Rails is better.

Full-Stack JS vs Rails

Let’s compare the philosophies of Rails and full-stack JS.

Rails is a convenient bundle of tools for building full-stack web apps, written in Ruby. It comes with a frontend, REST API Layer, ORM, Job Scheduler, Tailwind CSS Support (new!), and more.

In full-stack JS you pick the frontend library, backend framework, CSS libs, and ORM yourself. This tends to overwhelm beginning web devs.

Rails’s goal is to set you up with a stable foundation of tools to building production-ready full-stack apps. This will probably sound like music to the ears of full-stack JS beginners.

Is Rails Better for Full-Stack Apps?

“Better” is a dirty word when discussing subjective matters. Let’s instead focus on the circumstances in which Rails outshines Full-Stack JS.

Rails is better than full-stack JS if you…

want a Swiss army knife for building full-stack web apps quickly
want a full-stack framework that feels knowable and well-defined
don’t mind writing frontends in HTML/CSS
are tired of Framework FOMO
are interested in learning Ruby

Rails, the full-stack swiss army knife (pizza sold separately)

Rails is worth learning if at least 3 of these points resonate.

Conclusion

If you are overwhelmed by full-stack JS, Rails will be a breath of fresh air. Rails helps you ship quickly by choosing many things for you out of the box.

If you are looking to invest in a comprehensive framework that helps you ship faster, Rails is a great choice. I highly recommend you check it out.

Want more web dev tips?

Follow me on twitter and subscribe to my web dev newsletter.

The post Full-Stack JS is Insane… Is Rails better? first appeared on 💻 Web Dev With Seb.