Forem: ZacharyP

The Art of Over Engineering

ZacharyP — Fri, 01 Jul 2022 17:47:00 +0000

This blog was originally written here 👈🏼

simple answers are for the suckers...

Is what I kept saying to myself while building out a ..totally unnecessary tool I would use to do this groundbreaking new form of communication... Blogging!! ..hmm what's that? dev.to?? never heard of em.

For why?

I wanted to… explore something I was wholly unfamiliar with and thought what better way to accomplish that than building a bespoke blogging tool for myself and write about the whole experience using that tool. A win win for the reader and me. They get spicy content , I get “solutions” to every “mistake” I make in my DMs.

…everyone learns!

The 3 Amigos

Tauri - The spicy Electron competitor that allows me to build this program in almost any FE framework I want strapped with a Rust backend, capable of producing lightweight fully compatible versions for all OSs …even those who have a strange fascination with penguins.

Slate.js - A React based framework for building a rich text editor that lets me cherry pick whatever features I want packaged together in reusable components. …Like a digital Lego set but for writing

Supabase - An open source database …and much much more provider capable of storing all the 1s and 0s responsible for what you’re reading now, and giving me an easy way to go an get them.

What did we learn?

That with the power of the almighty Webview via WRY and TAO

These libraries have been absorbed in one fashion or another into the main Tauri repo.

my Tauri app beats the breaks off of a similar app built on electron …in theory when it comes to just about every countable metric. …I counted at least to 6

hold on I have to break out my magnifying glass 🔎

The energy it took your brain to read this sentence cost more than this app running at full tilt.

Almost forgot to give everyone their grain of 🧂, I am flying by stuff at a million miles an hour and leaking details like a sieve as always do your own research.

Locking it down

I get to yank out all of the node.env === development{ let me have ALL of the spicy DB commands }

bs out of the blogs repo and shove all of the API logic centered around posting to the DB into the apps repo.

Next.js does a great job hiding variables but good luck untangling the Rust compiled spaghetti binary and for those that can …Gather round everyone, on the count of three..

Eventually I will add the ability to delete posts from the app truly isolating all of the spicy variables and API calls from {bigShadyTechCompany.name} who got pissed at me when I showed everyone that you …yes you can bend time using 11ty and have not stopped since trying to obtain the keys to my demise. …but in the mean time SEO score go BrtTtTtTtTt

but what about editing!?!

I dont make mistcakes, moving on.

If it fits it ships

I was able to cram my Slate.js instance wholesale into my app and like the 10th anniversary edition of Skyrim …yup a decade running all the mods…

but Zach! that would totally not work, what kind of scam are you trying to pull?

This should be the part where I commend you on your observation skills and agree with you fully but the reality of it is after some minor route futzing wouldn’t you know it that S.O.B compiled. …I was as surprised as everyone else.

…Breaking News! Reading documentation actually works!

Now that only gets us halfway to the finish line and it is time to see if Supabase would play nice with the other two. I essentially took what I had refactored it to React and to make a short story even shorter it fit..

This speaks to Supabases excellent DX and Tauris ability to turn most FE ingredients into a meal fit for any computers palate. …Blog Bourgogne!

Bring it home

While building this one out I was ready to have heroic stories of fighting my way out of a stack trace a million lines deep using nothing but CLI prompts, the reality …all be it a much more boring one IMO was a pretty linear process of build, break and repeat until I was done.

In the end I am left with a clean, easy and safe way to get my message out to the masses …all hail hypno-blogger and learned a bunch along the way.

Woo that was a lot of words glad ya made it down here, thanks for hanging out 👋🏼

Housekeeping

Could this have been all handled by a simple ‘npm run dev’ ?

Duh.

Should someone follow this path?

Maybe not this exact one but take the deeper meaning of it all and run with that.

What was the point of all this?

Telling a story helps me learn better and technical think pieces tend to be boring af.

What’s happening with the ole Zacharyp.dev 11ty swap??

Chill out…

Do you have a Twitter?

Kinda off topic don’t ya think… but I do

The Big Server Farm in the Sky

ZacharyP — Wed, 06 Apr 2022 23:58:00 +0000

This blog was originally written here 👈🏼

in a previous episode I mentioned...

In reality by using a combination of 11ty serverless and Netlify functions we offload almost everything to the mythical server farm in the sky...

...and the comment I received the most ...once was what is this farm, what makes it so mythical, where are the baby goats?!?

Like Ms. Frizzle and the gang we are going on a field trip to answer all of those questions.

Conjunction

...no

junction

...you better not

what even is a serverless function?

...straight to jail

To all those still here ...big respect a serverless function ...in the most basic terms takes work off of the end users browser and ships that data cattle to a server farm that handles all of the heavy lifting and returns the result.

but you said serverLESS yet it goes to a server? I need answers!

Serverless is the ...marketing approved way to say

"Server that you don't maintain, have to setup, update, scale, cry over, but get to use like you did."

If this is not a sufficient answer take it up with
${majorServerlessVendorMarketingDepartment.email}
...Let me get through my spiel and I will give out a reward.

💡 A SALT MINES amount of 🧂: I am ...attempting to cram a novel into a pamphlet. This is all from my narrow perspective, use it as a reference to do your own exploring through the topic. ...It's all fun and games until someone takes me seriously.

Who has the goods?

Short answer... a ton of companies that provide any combination of options you could ever want.

My answer... Netlify, I gravitated towards how easy it was to wire everything up and get running. ...for more flattery please unlock the season pass.

The real question is...

What is it good for?

After much boiling... we are left with a few main points that make serverless functions so spicy.

Scalability, ...did your spicy marketing tweet go viral and now your website is in the direct gaze of the twitter hivemind?? being able to scale in real time all of the provisioning and zZzZzzZZzzZ... is handled for you by the vendor. You as the user get to focus on what is really important. ...idk selling rare Squishmellows.

0 server config/maintenance, ...uh-oh your bespoke server is throwing an 856 THPS code can you fix it?! no because I made that up and wonderful people ...with titles on their LinkedIn pages have solved the real problems associated with running a server so we don't have to.

The $$$, being able to ramp up and down with precision lowers the cost for the user. I don't have a funny story here ...all my work on Netlify is free.99 so as a consolation prize this video by the Fireship Youtube channel sums up what serverless functions help us avoid.

Speed,...unlike Jack Traven who only wanted to keep it above 50, serverless functions live much closer to the end user which makes delivery times consistently faster and more reliable at scale when compared to their bespoke breatheran. ...if only my pizza delivery could figure this one out. Shipping less and less JS to the end user helps bring really clean well functioning experiences to more people who before were limited by their hardware or data connection. ...rare Squishmellows for ALL!!

💡 A few things to think about: There are some drawbacks when it comes to serverless functions ...instead of spoiling all the fun I just wanted to mention them for further study by the class later.

🔒 Serverless functions introduce a new set of security questions.

❄️ "cold-start" or when a server needs to boot up when it is used potentially causing lag ...like your car in the winter

🐞 Debugging becomes ...interesting

...if you made it THIS far 🎉 Congratulations 🎉 as promised baby goats..

Thanks for reading 👋🏼 do your own research and check me out on Twitter!

TLDR

Serverless functions provide a ton of useful features for both the developers and the end users by shipping the giant JS data cattle to a server farm near you..

My data cattle on the server farm:

Using 11ty to bend time

ZacharyP — Wed, 30 Mar 2022 23:44:00 +0000

This blog was originally written on Zacharyp.blog

With my site converted to Next.js with all the fun things it brings to the table I thought wow so fast , so nice even lugging around all that JS, life was great..

Enter 11ty and it’s 0... wait really... 0 boilerplate JS?!?

How does that even work? how are things functional?? Zach you are lying I was taught that JS is the answer to all my functional hopes and dreams...

So let me give you the grand overview ...I promise it's not magic , with more in-depth looks into how to achieve this yourself in the future.

once I figure it out for myself 😅

Lets set the stage.

The old and busted ZacharyP.dev is built mainly using Next.js and Chakra-UI two wonderful tools I recommend checking out butttt they are built on top of React making that JS bundle thick by default. I am giving up a lot of that minty fresh UX these tools provide for raw speed.

The new hotness is being built using 11ty and Nunjuks a powerful templating language that follows conventions you are used to seeing in React and will begin to realize that most of these patterns are more fundamental than you think. I chose Tailwind this time around because I can achieve the same visual results but for a fraction of the cost anddd it’s an excuse to learn it..

Now the allure of absolutely 0 JS is amazing and never having to document. anything ever again would be sensational but the reality of it is like Thanos...

Plot twist... I lure you in with claims of 0 client side JS and just when you think you’ve dodged the weight of the bundle it sneaks up behind you...

In reality by using a combination of 11ty serverless and Netlify functions we offload almost everything to the mythical server farm in the sky and take a webpage built on Next.js/Chakra-UI from a respectable:

to the 11ty/Tailwind builds ridiculous:

Same content, same styling, same functionality but the race was not even close 11ty wins by a mile.

💡 BIG GRAIN OF 🧂: The NextJS build is not taking advantage of any serverless functions which would certainly close the gap. The comparison is to the current live builds and done in separate incognito mode windows.

💡 When the project is completed a much broader comparison will be done to see how accurate the small scale test was.

For my final party trick

I use a Netlify On-demand Builder set up to update the live site without having to rebuild the whole thing every time a new blog is posted...

I can hear everyone now... but Zach it’s a static site what sort of witchcraft did you tap into?!?

To that I respond with a series of buzz words..

Edge CDN: TLDR or Deep dive
Time to live (TTL) hope you like reading
Caching a general explanation

Simply put... On-demand Builders are serverless functions used to generate web content as needed that’s automatically cached on Netlify’s Edge CDN. They enable you to build pages for your site when a user visits them for the first time and then cache them at the edge for subsequent visits.

You pair that with the TTL which causes a “rebuild” to occur on the server which is how we can update the live site without having to run a full on deploy ...thank you Netlify docs for that perfect explanation..

💡 This is a work in progress I’ll check in as it comes along

Thanks for reading 👋🏼 and check me out on Twitter !

TLDR

I am taking my old and busted NextJS website and replacing it with the shiny new 11ty one, shaving a lifetime off of load times without changing how it looks or functions.

Me with my new 11ty site when it’s done...

Letting it all hang out

ZacharyP — Tue, 08 Feb 2022 16:21:00 +0000

This is repost of a blog I wrote here!

Putting yourself out there.

This week I launched zacharyp.dev my own personal site dedicated to showing off my work and be a test bench for new techniques. I have been working on this for the better part of 2ish months and I finally felt ready current bugs and all... to show off to the world. I am no stranger to putting out content in one form or another but always as a side thing like music or video games, this was a whole new ball game because it is directly linked to what I hope in the not so distant future is my career.

I would be lying if I said I was not nervous over this but at first I could not place why and I just chalked it up to simple new project nerves. Now that I have had time to sit in this feeling I realized that up until this point I have not had anything forward facing announcing my work at becoming a developer. I have been on this path relatively in the dark, with the launching of this site along with finally.. getting my social presence in order that abruptly changed.

It all became real.

For those that did not know as of this post id say we are at about the 10 month mark since I wrote my first line of code ever. Launching that site is the culmination of those 10 months and the hard work that has gone into it. Launching the site is me fully committing all the practice rounds are over it's time to perform and that realization is what made me more nervous than anything, because with that leap comes the possibility of total failure. Now I am not all doom and gloom I actually have a supreme confidence in my ability to see this through but acknowledging those downsides is what fuels that next step and the one after that.

All this rambling is to say I had a simple choice, either let fear of failure break me or let it be the fuel that pushes me forward. Both choices are neither right nor wrong, fear is the bodies way to get you to pay better attention. Fear can be harnessed like any other emotion to boil things down to what really is important to yourself. To me the fear of regret for not trying to see this through is a harder pill to swallow than the fear of financial hardship.

I will leave yall with this, I've been reading Dune again and the movie was dope for a part 1.. but the "Litany Against Fear" sums this all up nicely..

“I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.” -Frank Herbert, Dune

Programming Productivity

ZacharyP — Fri, 21 Jan 2022 19:47:00 +0000

This post was originally written on my blog

I Know..

..there are a million ways to optimize writing code, but how do you know what ones actually make your life easier?? Easy you read this article and I'll tell you..

The real answer is you play around with stuff and see what you like and what you don't. I just wanted an excuse to talk about some of the things that have really helped me out as someone who is brand new to the development party and want to get up to speed.

Take better notes

This sounds simple when you say it out loud and looks different for everyone but taking good notes is more than just jotting down some stuff in a notebook you never look at again. This is a shameless plug for Notion as that is the tool I have used for note taking since the beginning and it's what I am most comfortable with but their are plenty of other tools that serve the same function. Check out this blog by NTask to check those out.

Notion provides me a way to link together any content revolving around a topic/project in one place, which for a scatterbrain like myself is key to being able to keep my focus which in turn helps me write code faster and more efficiently. Check out August Bradley on YouTube my set up is derived from his videos. Notion has tools that make it easy to capture the information as well making the research process easier not having to slow down and enter all that information yourself.

I tend to scrape as much information as I can into the bucket while I am researching a topic and then trim it down later leaving me with just the good bits and I don't have to have a 1000 chrome tabs open just one neat and organized Notion database.

Lose the battle, Win the war

We have all been staring at our screens, 4hrs deep, completely bewildered at why this little thing does not want to do what we tell it to do, nothing build breaking, and likely something no one notices but you but it is all consuming like a blackhole where nothing else gets done. Does this sound familiar??

This may be a tough one to hear but.. it's ok, letting that issue go is the first step at fixing that other bug no one notices but you. All jokes aside I struggled with this for a long time in more aspects than just coding and it is a daily struggle to not get sucked into that vortex but it has immeasurably increased my overall programing speed.

I use a system now that if the issue is not breaking the site and I have spent more than 30 min with no progress, I drop a TODO down and come back to it once I have finished building out what I can. check out Todo Tree a great vsCode extension I use to handle that.

Take a break and a drink

...Seriously go do that I'll wait.

This goes hand in hand with the last point. I know that everyone reading this has experienced this moment where you are so focused in anddddddd it's tomorrow, you haven't eaten since who knows and water seems a distant memory, breaks? never heard of them.

I commend those who can work like that but for me my brain is mush around the hour and a half mark if I don't step back and take a break. I try and take a small break every hour or so to look away from my screens, get a drink, and stretch. I tend to have some of my most insightful thoughts about a project I am working on in those moments.

What about you?

Was this helpful? Am I blowing smoke?? Want to yell at me about how I missed an important point???

Find me on Twitter, GitHub, LinkedIn, Dev, Portfolio and let me know!

Until next time!

Auto blog scraper in your GH profile using GH Actions.

ZacharyP — Tue, 04 Jan 2022 20:08:00 +0000

Wana get right to it click here

What

...is an auto blog scraper? A small tool used to take a look at your blog of choice every so often and automatically updates your GitHub readMe with a nice list of links to the most recent posts all hands free. Here is mine

and a GitHub Action?? A way to automate processes I don't want to do anymore. This rabbit hole runs deep but for the scope of this tutorial we are only going to scratch the surface of that iceberg.

This uses a GitHub Action called blog-post-workflow a brilliant tool which does all of the heavy lifting behind the scenes to make this simple workflow possible.

Why

How

I am under the assumption you already have a GitHub readME since you have made it this far down the page, but if not here is a bonus micro tutorial.

Create a new folder with the same name as your GitHub username.
Create a README.md file in that repo and push it to GitHub.
Continue with your regularly scheduled tutorial.

1: Open the readME repo in your code editor of choice.

2: Create a folder named .github and a folder named workflows within the new .github folder.

3: Create a file within the workflows folder named blog-post-workflow.yml

4: Within that new .yml file paste the following code and replace
{ YOUR_FEED_HERE } with whatever blogs RSS feed you want to scrape:

```yaml
 name: Latest blog post workflow
 on:
    schedule: # Sets the Action to trigger based on time
      - cron: "0 0 * * *" # triggers the action every hour 
    workflow_dispatch: # Allows you to run the action manually 


 jobs:
    update-readme-with-blog:
      name: Update this repo's README with latest blog posts
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v2
        - name: Pull in dev.to posts
          uses: gautamkrishnar/blog-post-workflow@master
          with:
            feed_list: { YOUR_FEED-HERE }

```

Some things to note:

cron: is a fancy way to tell time and in this case is how we set a timer on our bot in this case once every day at midnight.
workflow_dispatch: is what runs through the jobs provided to the bot and attempts to run them. this is where if an error occurs it will provide what step in the job is causing an issue.

5: In the README.md file paste the following code where you want the list to show up with a link to the main page of that blog. Just replace {BLOGS_URL} with the actual URL to your blog.

```md 

 <!-- BLOG-POST-LIST:START -->
 <!-- BLOG-POST-LIST:END -->

 ➡️ [more blog posts...]({BLOGS_URL})

```

6: Push changes to GH and pat yourself on the back because you have finished! From here the Action will fire every hour until told otherwise, all you need to do now is go write the blog post you've been putting off for awhile. 🎉🎉🎉

💡 Side-Note: You can manually run this action by...

First: Going to the Actions tab in the README repo on GitHub

Next: Click on the Action and click on the run workflow button to manually run the action.

TLDR

Use GH actions to automate the updating of your GH profile with any new blog posts using a tool called blog-post-workflow. ...you know this is a tutorial right??

Me writing all this fun and engaging content for everyone:

Writing this tutorial was a hands on way for me to try and better
understand the subject and too practice technical writing. Thank you for reading 👋🏼 Follow me on Twitter to watch me teach myself how to code by teaching everyone else.