Josh Arroyo

Up to now the posts displayed by PostPress have been pretty basic. Just plain text stored in the database. New lines, links, text formatting etc. don't work.

After some thought, I've decided to store each post body formatted as Markdown. Markdown has been around a while, has quite a bit of support and is platform agnostic at this point. The goal is to have a simple yet structured representation of the post that can be stored as plain text in the database. If we decide to switch things up in the future, it should be simple enough to convert to other formats given the wide variety of parsers out there.

To get all the fancy Markdown formatting to work in the browser, we need to convert it to something the browser can understand: HTML. For this, I've decided to use the marked package and its included parser. Whenever we start handling HTML though, we need to be careful about security issues and the potential for cross-site scripting (XSS) vulnerabilities. So before passing along the HTML to the component that displays it, we run it through the sanitize-html package. We then inject it into our component using the appropriately named "dangerouslySetInnerHtml" attribute that comes with React.

Here's a nice breakdown with a similar use case as PostPress: https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/

Since the post bodies will be created by authenticated authors and later we will actually be auto-generating the markdown when creating the post (right now there is no easy way to create a post, just manually add an entry to the DB...) this might be a little overkill. But it puts in place some basic measures to help keep things a little more secure.

Now time to manually add a bunch of markdown to the previous posts and see how it turns out... :)

Recently a software developer friend of mine approached me about setting up a blog site for one of his hobbies. He had dabbled in Web Dev years ago but has built his career around creating desktop applications. Here’s the interesting part: he had setup a WordPress site but once he got past the initial login screen, he was stuck.

• How do you change the site?
• What are themes and where do you get them?
• How can he make his posts appear?
• What plugins do I need?

He’s a smart guy with years of engineering experience but was facing friction from the unintuitive process, complexity of the ecosystem and nested menus everywhere.

As I’ve been working on improving my GitHub portfolio, I’ve been looking for a good project to showcase my development skills. Along the way, I’ve wanted to keep a devlog of my experiences. I thought, “why not build the application that I want to use?” The idea is to solve an existing problem I have while simultaneously using the product as I develop it (dogfooding). Yes, there are a million CMS/blog platforms out there… but it seems like a good growing and learning experience to create my own.

One of my main goals is to lean heavily into a clean and intuitive process for creating content in the application. Make it easy for everyone. Think Squarespace but without all the baggage that comes with Squarespace. WordPress-like, but improved (IMHO).

Tech Stack:

Next.js – Fast, SEO friendly, allows us to build out the front end using React Components

MongoDB – Easy document model. Flexibility to change the schema as the development process evolves.

Right now you are reading this content on PostPress. It’s rough (at the time of writing this) but I wanted to ship and iterate quickly. The code can be found at: https://github.com/prismatec-josh/postpress

Check back for updates and to watch the application evolve.

Where do we get started? I’m Josh. In my early high school days, I learned basic programming in, er, BASIC. I spent countless hours tinkering with Slackware and Ubuntu Linux. I spent many years working for a local computer store where I tried to help bridge the gap between tech jargon/complexity and normal everyday people who “just want it to work”. I went on to manage a team of network and computer technicians at a local school district, started a destination wedding videography company and taught myself modern JavaScript and React.

Throughout all of this, I’ve always loved technology. In my down time, I write code. Even if I’m not paid for it, I will probably do it the rest of my life. I still have much to learn but I eagerly look forward to growing as a developer and engineer.

I’m not gonna lie. Making the career change to a web developer after being self-employed for many years has been tough. So far I’ve applied for 100+ positions but haven’t successfully made it to the interview stage. I’ve started this blog as a way to document my learning, projects and ongoing explorations of the tech space.

Thanks for following along!