 package and I highly recommend going through their quick start example if you’re in a hurry.

This article shares my convention of creating custom typed components that deal with Portable text (in my case from my 

Goal: Create a custom component that parses portable text and custom portable text types into premade components or tailwind styled html elements.

https://www.npmjs.com/package/react-portable-text

Creating serializers for custom blocks that may need to recursively call this portable text parser component. 

Lets say we have a text image block like the image above where:

We have an image (which needs to be transformed separately.

Description text which needs to be parsed back to this component (since it contain headings, lists, images etc.

Hope that that helps but in case something is missing here I highly recommend going through the react-portable-text documentation here: 

How to easily work with Portable text in React

Programming is hard, building complex applications is really hard and building complex applications that can scale and stay resilient, easy to update and work with is really why programmers are so important. The MVC (Model. View. Controller) architecture is a software architecture pattern that breaks up any application into 3 separate but more manageable parts; the Model, the View and the Controller.

PS: I use very obscure but visual examples in a lot of my writing because I am very stupid and very visual examples help me learn gud.

To explain MVC, Imagine a book library where you could request any book or story and get a private improv theater show produced for you telling you the story or about the book. Imagine you walking into this library and being assisted by a host/hostess who’s only job is to be personable and be your guide (but one who knows nothing about the show or library books).

Lets say you request a show on Hamlet, the host/hostess would first have to go to the librarians with your request (because they are not allowed anywhere near the books) then after getting the book (in this case hamlet) they would then give it to the theater department and lead you to the theater where you would get to see the improv show.

The book Hamlet = The data you requested.

I hope that made sense to some degree but to put it in a more conventional context, applying MVC to any project is a separation of concerns convention where:

 that handles the request flow, from routing, requesting data from the model to leading the user to their requested resource/ screen. 

The controller itself never directly interacts with the data/ database or how it’s displayed

, it simply couriers the user’s request to the Model and after getting the data passes it to the View to handle the presentation of that data.

 that queries the database, handles authorization (when adhering strictly to the MVC architectural pattern) and structures the data accordingly.

 that handles the data received from the controller (via the model 

) and decides how to present UI based on that data.

Hope that my explanation helps in explaining what the M, the V and the C in the MVC software architectural pattern.

Explaining MVC for dumb dumbs (like me) 

I find that going from explaining a concept to someone and speaking down to them is a sliding very slippery slope me, so the quickest way I’ve found with any conversation that requires me to explain something to anyone is to ask them their understanding of that thing first.

With non-technical clients I’ve found this to be the most important question since it contextualizes their expectations so you can better set them.

After gauging their level of knowledge the next logical thing is to succinctly bridge their gaps in knowledge. Moreover what I find to be helpful in setting expectations is explaining search engines, SEO, SEM, social media marketing and other ways to drive leads.

For example I helped a seamstress client focus all of their efforts on driving leads through social media which helped turn their eventual website from something that wouldn’t get any traffic to an import social media auto posting and design repository tool that also allowed users to order clothes directly online if they wanted to.

If I had a JavaScript framework for every time I had a client expect a website to immediately drive massive sales shortly after being built I would give the NPM registry a run for their money. Websites without any marketing rot, any idea, product or service no-matter how great it is, means nothing if people don't find out about it. A website or store does not market itself and helping clients understand this has saved me so so so many head-aches.

After laying the ground work now it’s time to dive deep into the client’s needs (aided with their new knowledge and understanding of what a website is). You can ask questions like:

What do you want people to do when landing on your website?

How will this play into your marketing (i.e. social media) efforts?

(User stories) Lets say 3 people visit your website with three separate goals what would their goals be and results be (i.e. buying wood, contacting a supplier etc.)?

Do you intend on editing it themselves (this is a great opportunity to sell retainer services, I personally stay away from this)?

) is summarizing the prospective site (using their words and jargon as much as possible) and agreeing upon all the details, expectations and payment terms. I’d also highly recommend covering post launch support including stuff like support hours, turn around times, where they can get immediate tech support (i.e. their hosting company) etc.

This is by no means a perfect process and even after applying this I sometimes get into less than ideal situations. That being said, this checklist has helped me avoid the biggest pain points of any contract work; post launch support headaches, clients being disappointed in the lack of uptick and 

My thoughts and experiences with/on all things dev and design.

How to easily work with Portable text in React

Explaining MVC for dumb dumbs (like me)

5 questions for getting a website brief out of a non-technical client

You can get in touch with me any way you'd like.