DEV Community: Kudakwashe Paradzayi

What the Rails!

Kudakwashe Paradzayi — Tue, 02 Aug 2022 07:35:00 +0000

In 2003, a Danish programmer by the name David Heinemeier Hansson created a web development framework that became known as Ruby On Rails. He extracted it from the work he was doing for 37signals building Basecamp.

Since then this framework has gone on to be used to build world scale applications such as Github, Shopify and Airbnb.

According to the official definition:

Rails is a full-stack framework. It ships with all the tools needed to build amazing web apps on both the front and back end.
Rendering HTML templates, updating databases, sending and receiving emails, maintaining live pages via WebSockets, enqueuing jobs for asynchronous work, storing uploads in the cloud, providing solid security protections for common attacks. Rails does it all and so much more.

This framework solves the problem writing boilerplate code all over again for new projects and with convention over configuration, it introduces conceptual compression, which means that you can focus more on writing code that actually adds value to the business.

ROR has a doctrine, which I highly recommend you read, lays out the values and principles that guide the main decisions that shape ROR:

In this series we will be building an application from scratch to show the features of rails. The goal is for me to dig deeper into rails and become a better programmer. You might learn a thing or two, so let's go on this journey together.

Printshops is an imaginary printing app, where a printing shop can receive document submissions through the app, print them and ship them or have them collected.

In the next article we will have a deep dive into the requirements of this application and we start building it.

Introducing Rails mini series

Kudakwashe Paradzayi — Tue, 19 Jul 2022 05:33:30 +0000

For the past 3 years I have been developing web applications with Ruby on Rails. It is arguably one of the most robust programming frameworks out there being used to develop the likes of Github, Shopify, Basecamp, Airbnb, Twitch, just to name a few.

I will be documenting my experience with Ruby on Rails from the initial command rails new to deploying to a remote instance that is accessible from anywhere in the world.

Stay tuned!

Encrypting ActiveRecords with Lockbox in Rails 6.1

Kudakwashe Paradzayi — Thu, 08 Jul 2021 10:21:16 +0000

Before I dive in, I will give you a bit of context.

I am currently working on an application that uses the Stellar blockchain behind the scenes to open up access to capital to farmers in developing countries like Zimbabwe.

The purpose of the blockchain is to provide transparency from the moment the investor parts with their hard-earned money, to the time the farmer starts sharing profits with investors. By nature, blockchain is very complex and the average farmer can not be bothered to worry about setting up wallets, ensuring their keys are safely secured, and all the jargon that is associated with blockchain technologies.

It is essential that we hide the complexity from the end-users, and make their experiences as seamless as possible. Sort of how when we browse websites, we do not even think about entangled mess of TCP/IP connections happening, or worse still the 1s and 0s being executed by CPUs in data centers all over the world. This is how we apply conceptual compression to make our systems easier and delightful to use.

This application I am talking about is built on Ruby on Rails. And we will be the custodians of the crypto wallets of both the farmers and the investors. However, this is fraught with risk as crypto exchanges are prone to hacking, but it is a risk we acknowledge and are working on adding layers of security to mitigate that risk.

The first one being, Encryption! It would be very irresponsible to store seed phrases (a.k.a secret keys) to the crypto wallets in plain text. Hackers would have one hell of a tea party and thank the heavens for such an easy hack. When I saw ActiveRecord encrypted attributes I was happy because Rails has always been the battery included framework that came with everything you needed out of the box. However, I was disappointed to discover it was only available for Rails 7, which is yet to be officially released.

So I decided to go on with lockbox, a modern encryption gem for Ruby and Rails, created by one highly reputable Andrew Kane.

Install Lockbox

Add the gem to your Gemfile.

# Gemfile.rb

gem 'lockbox'

Then run bundle install to complete your installation.

Setup your application to encrypt using Lockbox

It's very important to try this on your local machine first, then on a staging server, then finally on your production server, to avoid loss of (sometimes irrecoverable) data - @kudapara

Generate a key

In the project directory run rails console and run the following code to generate the key that will be used to encrypt your records.

Lockbox.generate_key

# "daa846ef907a5b44a6b83ac6991a9ff63126b869b2f97afc43d8329b46328abe"

Copy the generated key and use it in your preferred way to handle secrets in your Rails application, either

1. rails credentials

Add your generated key to your credentials for each environment (rails credentials:edit --environment for Rails 6+)

lockbox:
  master_key: daa846ef907a5b44a6b83ac6991a9ff63126b869b2f97afc43d8329b46328abe

2. rails credentials without environment specific master_key

or create config/initializers/lockbox.rb with something like

lockbox_master_key = Rails.application.credentials.lockbox[:master_key]
Lockbox.master_key = lockbox_master_key

The lockbox_master_key could be coming from rails credentials or a key management service like VaultProject.

3. Use LOCKBOX_MASTER_KEY environment variable (not recommended in production)

LOCKBOX_MASTER_KEY="daa846ef907a5b44a6b83ac6991a9ff63126b869b2f97afc43d8329b46328abe"

Migrate the model you want to encrypt attributes for

class AddSeedCiphertextToAccounts < ActiveRecord::Migration[6.1]
  def change
    add_column :accounts, :seed_ciphertext, :text

    # add this line if you are encrypting an existing column
    Lockbox.migrate(User)
  end
end

and add the following code to your model

class Account < ApplicationRecord
  encrypts :seed, migrating: true

  # for existing columns. remove this line after dropping seed column
  self.ignored_columns = ["seed"]
end

Take note of the migrating:true. That is to ensure you encrypt an existing column without downtime. If you are adding a new sensitive column to your model, you can ignore it.

Commit your changes and run the migrations. Confirm that your secret fields have been encrypted properly and everything is working without issue.

Once you are satisfied that all is well, you can now add the migration to drop the original column that stored the data in plaintext.

class DropSeedFromAccounts < ActiveRecord::Migration[6.1]
  def change
    remove_column :accounts, :seed
  end
end

Once you run this migration, there is no turning back, that original unencrypted data is gone forever, please, please, I beg, verify 10 times if possible before running this migration.

Then you're good to go. No need to change anywhere else in your codebase. It still works the same as before, so code like

current_user.accounts.create(address: blockchain_account.address, seed: blockchain_account.seed, account_type: 'regular')

will still work, and the seed will be automatically encrypted.

Stellar::KeyPair.from_seed(current_user.accounts.regular.first.seed)

will still work and the seed will be automatically decrypted.

This is the first step in the right direction. We are still exploring more ways we can secure this system from internal threats, but for now, this is good to go.

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

Thank you for reading, If you enjoyed this content you can donate some Stellar Lumens (XLM) or USDC to my stellar wallet

https://stellar.expert/explorer/public/account/GBFAKFE3X6WTWPL7D4XKSGHBODHFCROPCTGQNF27VRFLQS26GLZUP6KS

Why? What's the point? For what purpose?

Kudakwashe Paradzayi — Fri, 02 Jul 2021 10:48:22 +0000

Why?

This question constantly rings in my head!

Why am I here, what is my purpose?

Why do I constantly feel like a fraud?

Why do people always awe at the work I do, yet I see it as mediocre?

Why?

Why do I feel cursed, when in fact I'm blessed beyond measure?

Why do I not get satisfied, even though the work of my hands is transforming thousands of lives?

Why do I always ask myself why?

Why do I always feel like a million people in my head?

Why? Why? Why?

Why, even though I am winning, I feel like self-sabotaging?

Tried music. Tried art. Tried coding. Tried design.

None seem to answer my question.

I am going to make it my life's mission to be able to answer this question.

So simple, yet seemingly like I can not find answers for it.

Until then, I am going to ask you the same question.

Why?

Cover Photo by Oladimeji Ajegbile from Pexels

Making Hotwire play nice with ViewComponent

Kudakwashe Paradzayi — Mon, 10 May 2021 12:51:04 +0000

Have you ever wondered if you could use hotwire with view_component instead of partials. If you have, maybe tried and failed, welcome here.

By default hotwire is made to work with partials, which is the built in way to extract 'components' in the context of rails based apps. In a certain application I was building I have used view_component (inspired by react) in place of partials because it is a framework for building reusable, testable & encapsulated view components in Ruby on Rails.

It was all fun and games until I wanted to make hotwire to work with the view components I had made.

We will use an e-commerce application as an example to demonstrate the problem at hand.

NB: no JavaScript was used in making this interactive, except for displaying the loading spinners

Hotwire uses websockets to broadcast changes to all clients listening, and this is very fast considering websockets maintain a persistent open connection with the client and the changes feel almost instantaneous. In this example when a user adds a product to cart, hotwire will broadcast the new product component and it will be replaced on the frontend, smooth as an SPA, with minimum javascript.

When a product is added to cart, we want to show it change on the UI, unlike a traditional API request which returns JSON, hotwire returns html, in the form of turbo streams. When the response arrives it will only change the specific section in the page that has a turbo frame that matches a specific id.

Using view components in this context would also help reduce the response's payload to only contain that section that has to be replaced. However view components and turbo streams dont play nice together so I googled around for a quick solution and found this answer on the hotwire forum. I then used that answer to successfully render a ViewComponent in the response.

# app/controller/carts_controller.rb

class CartsController < ApplicationController
  def update
    product = Product.find(cart_params[:product_id])
    line_item = CartUpdateService.call(@product, cart_params[:quantity])
    product_component = ProductComponent.new(
      product: product,
      quantity_in_cart: @line_item.quantity
    )

    respond_to do |format|
      format.turbo_stream {
        stream = turbo_stream.replace product do
           view_context.render(product_component)
        end

        render turbo_stream: stream

        head :ok
      }
    end
end

This was a good solution until I realised that you can only render a stream once, so this crumbled when I wanted to broadcast changes to other areas of the application, like adding line_items to the cart in the UI, updating cart count, etc. This is because, by design turbo broadcasts are meant to be initiated in the model, which I sort of thought as a code smell because not only was the model responsible for data persistence, validations and business logic, it was also responsible for the way the UI worked. We all strive for skinny models, don't we.

This was how it was before, when using partials

# app/models/line_item.rb
class LineItem < ApplicationRecord
  ...

  after_create_commit :broadcast_prepend_line_item, if: :current_user_present?

  private def broadcast_prepend_line_item
    broadcast_prepend_to "#{Current.user.id}:line_items", partial: 'line_items/line_item', locals: { line_item: self, store: self.order.store }
  end
  ...
end

And as far as I had researched there was no way to use View Component instead of partials to broadcast these updates.

So I went and dug into the hotwire source code to look for clues whether it was possible or not.

After series of iterations I came up with the concept of LiveComponent, a class that would inherit from ViewComponent::Base but also include hotwire modules to allow broadcasts and streams. Here is the complete code

# app/components/live_component.rb

class LiveComponent < ViewComponent::Base
  include Turbo::FramesHelper, Turbo::Streams::StreamName, Turbo::Streams::Broadcasts

  attr_reader :streamable, :target

  def initialize(view_context: nil, **args)
    @view_context = view_context
  end

  def broadcast_replace
    return unless @view_context.present?

    broadcast_replace_later_to(
      streamable,
      target: target,
      content: @view_context.render(self)
    )
  end

  def broadcast_prepend
    return unless @view_context.present?

    broadcast_prepend_to(
      streamable,
      target: broadcast_target_default,
      content: @view_context.render(self)
    )
  end

  def broadcast_remove
    return unless @view_context.present?

    broadcast_remove_to(
      streamable,
      target: target
    )
  end

  private def broadcast_target_default
    target.class.model_name.plural
  end
end

And this is exactly a ViewComponent with some live extras baked in. Continuing with out illustration of broadcasting changes to the line_items in the cart, we would implement it as a live component like

# app/components/live_line_item_component.rb

class LiveLineItemComponent < LiveComponent
  def initialize(view_context: nil, line_item:, current_user:)
    @line_item = line_item

    # these will be used by LiveComponent to identify
    # the stream channel and the targeted frame-tag on the UI
    @streamable = "#{current_user.id}:line_items"
    @target = @line_item

    super
  end

  def render?
    @line_item.quantity > 0
  end
end

and in the html templates you can then define

<%= turbo_frame_tag dom_id(@line_item) do %>
   <!-- line item html logic -->
<% end %>

Now in cart_controller.rb when you add to cart you can then use the live component

    respond_to do |format|
      format.turbo_stream {
        live_line_item_component = LiveLineItemComponent.new(view_context: view_context, line_item: @line_item, current_user: Current.user)
        if @line_item.destroyed?
          live_line_item_component.broadcast_remove
        elsif @line_item.quantity == 1 && @line_item.updated_at == @line_item.created_at
          live_line_item_component.broadcast_prepend
        else
          live_line_item_component.broadcast_replace
        end

        ...
    }

I know the code is a little bit 'dirty' and I'm sure some of you smart people will find ways to improve on it.

It was a fun little exploration and I am happy it worked out.

Cheers 🥂

📚 Awesome links from dev.to and around the web #6

Kudakwashe Paradzayi — Sun, 24 Nov 2019 06:52:05 +0000

Hey fellow developers and designers 👋🏽

✍🏽 Links you might find interesting

⭐ I rebuilt my portfolio, now it has 100 lighthouse score. How did I do that - @saurabhdaware

⭐ How to tackle a technical interview using soft skills - @kiarathedev

⭐ Make your personas great again in 7 simple steps

⭐ The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts.

⭐ Framer's Guide to react

✨ Random delights from around the world

⭐ Lighthouse CI - Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

⭐ Inertia.js - Build single-page apps, without building an API. Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

⭐ bruno-simon.com - A fun personal website for Bruno Simon, a Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher.

🙈 Shameless Plugs

Follow me on Twitter, I post mainly about programming, design and some updates on the projects I'm working on.

Make it work, make it right, make it fast
– Kent Beck

Cheers 🥂
@kudapara

My DEV feature wishlist 🌠

Kudakwashe Paradzayi — Thu, 14 Nov 2019 10:01:11 +0000

Scheduled Posts

It is a Friday and I have finished writing the week's segment of 📚 Awesome links from dev.to and around the web. I'm done revising and saved the draft and everything is ready to go.

Now Saturday comes, when it is scheduled to go live to all the amazing folk on on this platform. I'm full of excitement and I'm ready to hit the publish button, but alas there is no electricity and no internet connectivity (💡 Fun fact: electicity is not available from 5am to 9pm, here in Zimbabwe, everyday, but randomly comes back during the day, during weekends).

My heart sinks in despair - "But I promised these people I would deliver them awesome curated links every Saturday, how am I going to do that now 😭", I say to myself.

And then a bright idea strikes my mind 🤯, the week's segment is finished and ready to go, it's already on the DEV servers, so what if there was a way I could have scheduled the post to be automatically submitted on a specific time that would have saved me so much headache.

Post templates/Ability to clone Posts

For the past 5 weeks I have been religiously posting curated links of interesting things I have found around the web under the series 📚 Awesome links from dev.to and around the web every Saturday.

The first three posts I would hand craft every heading and structure of the Post. But after that I realized I was repeating myself so much so I made a draft post that served as a template (The draft template, if you are interested in seeing it).

Now things became a lot easier. Every time I would create a new segment, I would simply copy all the text in the draft post into the new one and walaah it all works magically. Until one day I forgot to enter the series name (I am using Version 2 of the editor), which I discovered on a Monday that there was this segment of the series, just floating alone and not connected to it's related posts.

I quickly fixed it, and that got me thinking again, what if there was a way to clone an existing post, with all of its metadata, in a single click, wouldn't that be awesome?

Conclusion

So yeah these are the 2 features that i think would really improve my workflow on the DEV platform. They may not be applicable to everyone but I'm sure there's a certain group of DEVers who would be interested. I'm still leveling up my rails skills, and at this point I do not think I have the competency to implement this so this is a cry for help to anyone interested in making this happen

Cheers 🥂
@kudapara

📚 Awesome links from dev.to and around the web #5

Kudakwashe Paradzayi — Sat, 09 Nov 2019 21:09:32 +0000

Hey fellow developers and designers 👋🏽

I appreciate the love you are showing for these awesome links. Here is this weeks's curation, I hope you like it too.

✍🏽 Links you might find interesting

⭐ My Github Campus expert journey, and how you can become one - @harshil1712

⭐ What are your go to resources for learning ruby and rails - @nickytonline

⭐⭐ The future of DEV - @devteam

⭐ Nested resources in Rails 5 - @brittanytinnin

⭐ Server side apps with client side rendering - reinink.ca

✨ Random delights from around the world

⭐ Rails Event Store - Rails Event Store is a library for publishing, consuming, storing and retrieving events. It's your best companion for going with an Event-Driven Architecture for your Rails application.

⭐ Github State of the Octoverse Report - Github's analysis of how open source is being used everywhere and the trending programming languages and more. Check it out.

⭐⭐ Adam Watham's live TailwindCSS streams - Adam Watham live streams as he builds a fancy Inbox UI with TailwindCSS, as designed by Steve Schoger. A must watch for someone who wants to up their design skills.

🙈 Shameless Plugs

Follow me on Twitter, I post mainly about programming, design and some updates on the projects I'm working on.

Live as if you were to die tomorrow. Learn as if you were to live forever.
– Mahatma Gandhi

Cheers 🥂
@kudapara

📚 Awesome links from dev.to and around the web #4

Kudakwashe Paradzayi — Sat, 02 Nov 2019 17:20:09 +0000

Hey fellow developers and designers 👋🏽

How have your week been? I hope you are all well and no one is suffering from burn out. This week I compiled some interesting articles on career, entrepreneurship and technical topics.

Happy reading :)

✍🏽 Links you might find interesting

⭐ My journey to landing my dream job at amazon - @arelyskywalker
⭐ Firefox and other browsers will be making better use of the height and width attributes for modern sites - @ben
⭐ Do design systems prevent creativity? - @justaashir
⭐ How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify
⭐ How are people making money selling knowledge on the internet

✨ Random delights from around the world

Podhunt.App - Pod Hunt is a daily curation of the best new podcasts (Like Product Hunt, but for podcasts). Discover the latest podcasts that everyone is listening to.
Be the valley - If you like Silicon Valley (the TV series) this website gives you the ability to create your own custom title sequence.
SWR By Zeit - SWR is a React Hooks library for remote data fetching. Visit the site to learn more about it.

🙈 Shameless Plugs

Today I am not going to plug anything for myself. If you are building cool stuff you can share in the comments.

Cheers 🥂
@kudapara

📚 Awesome links from dev.to and around the web #3

Kudakwashe Paradzayi — Sat, 26 Oct 2019 10:40:30 +0000

Hey fellow developers and designers 👋🏽

Thank you all for showing interest in this series and it's a huge motivation for me to keep sharing awesome links I stumble upon on the internet. If you also find cool stuff on the internet you could send them to me.

✍🏽 Links you might find interesting

⭐ Why you should learn Javascript principles first (Not the hottest framework) // @blarzhernandez
⭐ 101 Tips for being a great programmer human // @emmawedekind
⭐ 25 Days of CSS animations - Teaching myself CSS through motion design // @acupoftee
⭐ The obvious UI is often the best UI // medium.com/google-design
⭐ CSS Utility Classes and "Separation of Concerns" // adamwathan.me

✨ Random delights from around the world

⭐ amiareal.dev - If you ever struggled with impostor syndrome and you constantly ask yourself Am I a real Dev? click that link to find out.
⭐ fullstackradio.com - A podcast for developers interested in building great software products. Every episode, Adam Watham is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.
⭐ Github Student Pack - If you are a student and you would like to access services like Heroku, Amazon Web Services, Sendgrid, Github Pro, Go Rails Tutorials, and more, check this out. I have personally benefited from the student pack and I ❤️ it.

🙈 Shameless Plugs

Let us connect on instagram. My handle is @kudpara. Follow me and I will gladly follow you back 🤞🏽

"Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion." — Bob Baxley, 2003

Cheers 🥂
@kudapara

Is it true that here are no actual full stack developers in 2019.

Kudakwashe Paradzayi — Tue, 22 Oct 2019 07:31:38 +0000

I came across this tweet this morning.

Tomasz Łakomy push —force 👻

@tlakomy

There are no actual full stack developers in 2019.

The stack has become too large for a single person

14:42 PM - 20 Oct 2019

What do you think?

📚 Awesome links from dev.to and around the web #2

Kudakwashe Paradzayi — Sat, 19 Oct 2019 20:25:45 +0000

Hey fellow developers and designers 👋🏽

✍🏽 Links you might find interesting

⭐ What it takes to render a complex app in milliseconds by @ben
⭐ The ultimate postgres vs mysql blog post by @char_bone
⭐ Using Netlify lambda functions to send emails from a GatsbyJS site by @char_bone
⭐ Shape Up, stop running in circles and ship work that matters
⭐ The $61,392 book launch that made me quit my job

✨ Random delights from around the world

⭐ Krita - A professional FREE and open source painting program. It is made by artists that want to see affordable art tools for everyone.
⭐ On writing software well youtube - A playlist by David Heinemeier Hansson (creator of ruby on rails) on some patterns he uses to write basecamp
⭐ Steve Schoger's design tips moment on twitter - A collection of byte sized practical design tips that you can start applying in your applications now
⭐ Draw simple things channel on youtube - A youtube channel that shows you how to draw simple but beatiful illustrations with inkscape, an open source vector graphics software

🙈 Shameless Plugs

Follow me on twitter, I post mostly about web development and design tips and tricks like

Kudakwashe Paradzayi

@kudapara

🔔 Progress Notification 🔔

I RefactoredUI™ and while in the process that I built a design system I'll call Ruva🌹.

I'll open source once it once I fix some issues.

Feedback is always welcome 🙏🏽

Ruva 🌹, built on @tailwindcss, inspired by @stripe 👇🏽
github.com/kudapara/ruva

15:35 PM - 18 Oct 2019

The only way to learn a new programming language is by writing programs in it.

Dennis Ritchie

Cheers 🥂
@kudapara