DEV Community: Zain Butt

Preview images on upload with StimulusJS

Zain Butt — Sat, 24 Feb 2024 19:39:50 +0000

In web development, providing users with a seamless experience for uploading images is crucial. One way to enhance this experience is by offering a preview of the uploaded image before submission. In this blog post, I'll walk you through how I integrated a new StimulusJS controller to achieve image upload previews.

Step 1: Creating and Registering the Controller File

First, let's create a new controller file for our image upload preview feature. In your StimulusJS controllers directory, create a new file, let's call it image_upload_preview_controller.js. Once the file is created, ensure that it's registered with your application by importing it in your index.js file.

application.register('uploads', Uploads)

Step 2: Adding Required Code for Image Upload Preview

Inside the controller file, we'll need to add the necessary code. We'll define the required targets to manipulate: the form containing the file input and the container for the image preview.

export default class extends Controller{

  static targets = [ 'form', 'previewContainer' ]

  preview(event) {
    if(event.target.files.length > 0){
      let src = URL.createObjectURL(event.target.files[0]);
      this.previewContainerTarget.src = src;
    }
  }
}

Step 3: Connecting HTML Form with the Controller

Finally, let's connect our HTML form with the controller. Add the data-controller attribute to the form element and specify the name of our controller (image-upload-preview) as the value. Also, include the data-target attribute with the targets we defined earlier.

<form data-controller="image-upload-preview" data-action="change->image-upload-preview#preview">
  <input type="file" name="image" accept="image/*" data-image-upload-preview-target="form">
  <img src="#" alt="Image Preview" data-image-upload-preview-target="previewContainer">
</form>

✨ With just a few lines of code we were able to achieve this functionality. StimulusJS is very light weight and does not get in your way.

🤩 By organizing functionality into controllers, StimulusJS promotes clean and maintainable code, making it easier to manage and extend our applications.

👉🏻 I built this feature for my startup devtree where devs can build their portfolios sites and get in front of tech companies without any job search.

I share my journey with everyone on twitter and linkedin, follow to stay tuned.

Biggest update for my startup

Zain Butt — Sat, 24 Feb 2024 19:18:35 +0000

The biggest update for devTree to date 🚀

👩🏻‍💻 Devtree is open for Businesses
If you are tired of outsourcing and paying huge placements fees or your in-house talent team is too busy sourcing talent, then devtree would be right choice. Hire one or hundreds of developers and connect directly without any middlemen. $0 PLACEMENT FEE.

🌐 Custom Domains
Bring your own domain for your devtree portfolio and make it more personal.

💰 Monthly Subscription
Don't want to spend money on a lifetime deal, no sweat, affordable monthly subscription that starts from $1 (less than netflix subscription). Access to all premium features without any limits.

💫 Better Onboarding for developers
When you signup, devtree would take you through all the steps you need to make your profile better to attract right opportunities.

A lot more to come, always open to feedback and new ideas.

An under rated skill to make a huge difference in your interviews 🤯

Zain Butt — Mon, 29 Jan 2024 18:12:18 +0000

Talking about your self and your contributions is an underrated skill that you should work on and master.

It can be a make or break moment for anyone during in an interview.

Mastering technical skills won’t be enough, you need to be eloquent and concise with what you say.

Here is how you can do it 👇🏻

1- Take out some time to list all the work in detail ✍🏻

This is not something you can just whip up using AI, you would need some focused chunk of time to come up with what you did.

The best way to do it is to keep your resume updated, it will help you coming up with some content. Select the best work you did, see if you could be recall any positive feedback or shoutouts you got.

2- What choices you made and why 🤔

You can't just tell them what you did, you also have to be specific why exactly you did it. Did you had multiple options to weigh? what were the constraints? What other factors influenced you decision.

3- What were the impact of your contributions 📈

Knowing what impact your contributions had is a major boost. Present proper numbers to back it up.
Instead of saying "increased page load speed", you can say, "improved load time of webpage from 5 seconds to under 500ms" OR
"Improved system efficiency" to "reduced latency from x to y by doing z"

4- Simplify everything 🙃

Once you have all of the content, go ahead and structure it. Make it simple to understand and concise. Nobody wants to hear about a single thing for a long time just to misunderstand you.

5- Talk to some people 🙏🏻

Talking with some people like recruiters, colleagues or friends won't hurt and see if they were able to understand and ask them about it. Were you concise and easy to understand.

I certainly had my moments of poor communication at one point and still make a mess of things but by acknowledging your short comings and aiming to improve is the only way to go ahead.

Hey, i am Zain, an indiehacker helping developers land jobs without getting ghosted and search anxiety with my startup devtree.

I share my technical and indiehacking learnings on linkedin and twitter.

What was the best moment in your dev career??

Zain Butt — Wed, 10 Jan 2024 17:24:08 +0000

Hey fellow developers! 🚀

We're a community of extraordinary minds, each contributing to the tech world in our own unique ways. From crafting elegant lines of code to building robust systems, we've all achieved some amazing feats.

Some of us have tackled complex algorithms, while others have created sleek user interfaces that redefine user experiences and maybe some have just changed border radius of a link (jk).

I'm curious to hear about the moments in your career that truly pushed your limits. What's the most intricate problem you've solved, the most challenging project you've undertaken, or the feature that seemed impossible at first but you conquered?

Let's share our triumphs and learn from the hurdles that shaped us. Drop your stories below and let's celebrate the brilliance that resides in our developer community!

I am a indiehacker and building my startup devtree in public and share my insights, lessons and successes along the way.

You can also find me on twitter and linkedin

Free tools for developers to build their apps

Zain Butt — Fri, 05 Jan 2024 16:27:03 +0000

In the dynamic and competitive landscape of app development, startups and developers often find themselves navigating tight budgets and limited resources. Building a successful app requires a blend of creativity, dedication, and, most importantly, the right tools. In the early stages of my startup journey, I quickly realized the immense value of leveraging free resources to kickstart app development without breaking the bank.

Server costs, software licenses, and development tools can quickly add up, potentially hindering the progress of a promising project. However, in today's tech-driven era, a wealth of free resources is available, offering developers a lifeline to overcome financial barriers and transform their ideas into reality.

So, today I will share some free resources that developers can utilize in their projects. The tools are divided into multiple categories like API, Cloud, BugTracking etc.

Free resources list 👈🏻

Go ahead and explore the free resources and it might give some ideas.

Some of my favorites:

1- Upstash

Serverless redis, no need to spin up your own instance. Free 10k Requests per day.

2- fly.io

Fly is a platform for applications that must run globally. It runs your code close to users and scales compute in cities where your app is busiest. Write your code, package it into a Docker image, deploy it to Fly's platform, and let that do all the work to keep your app snappy. Free allowances include up to 3 shared-CPU-1x 256mb VMs, 3GB persistent volume storage (total), and 160GB outbound data transfer.

3- IPinfo

Fast, accurate, and free (up to 50k/month) IP address data API.

4- Zoho

Started as an e-mail provider but now provides a suite of services, some of which have free plans. I use their email services for all my startups. Free upto 5 users.

5- ConfigCat

ConfigCat is a developer-centric feature flag service with unlimited team size, excellent support, and a reasonable price tag. Free plan up to 10 flags, two environments, 1 product, and 5 Million requests per month.

6- PostHog

Full Product Analytics suite free for up to 1m tracked events per month.

There are hundreds of these tools for you to use. Go check it out.

My name is Zain and I am building devtree where developers can get hired without any job search.

I post about my journey, lessons learned and success on twitter and linkedin. You will also find other things on my devtree profile as well.

If you want to learn about working on Startups, Rails and general life advice follow me.

Add Custom Domains To Your Rails App

Zain Butt — Mon, 01 Jan 2024 16:28:39 +0000

I often saw a lot of apps giving the ability to use our own domain to either access the app or personalise some part of it. For instance, if you want to map your domain/subdomain to an external blogging system Or use your own domain to generate short links.

I was very curious as to how would this work, turns out its not so complicated.

For this to work properly, your user will need to set their website’s custom_domain to iamzain.com in your app. With that in place, the request flow looks like this:

1- A user visits iamzain.com, which points to devtree.app

2- Your app handles the request from the custom domain, routing the request to the #index action in ProfilesController

3- Your controller looks up the user with iamzain.com as the custom_domain and renders it

These instructions are primarily targeted for Rails application but the concept could be ported to any language/framework.

There are a few steps involved, let’s get going:

1- First we will make our application capable of storing the custom domain.

Add a migration to add a column to users table



class AddCustomDomainToUsers < ActiveRecord::Migration[7.0]
  def change
    add_column :users, :custom_domain, :string
  end
end

Create a simple form for users to add custom domain and save it against the user.

2- Once the custom domain is saved, present the user with some CNAME records that they can add to their DNS.

Here is how it will work, when the user adds these records to their domain DNS, it will inform the internet to forward any request to our app whenever someone types their custom domain in the browser.

CNAME (canonical name) records helps us with this, rather than redirecting the users it would just forward the request to our app.

From there we would have the access to current host name which would be the domain.

3- Now we will add some code to make sense of the user’s domain.

Add a root route that would point to a controller action, you can name it anything.



get '/', to: 'profiles#index'

class ProfilesController < ApplicationController
  def index
    @user = User.find_by(custom_domain: request.host)

    if @user.nil?
      render 'errors/not_found', layout: 'error' and return 
    else
      render 'profile/show', layout: 'profile_layout'
    end
  end
end

We check for the host name and see if it exists and return relevant profile.

This is the bare bones that we would require to handle custom domain workflow in our app.

Note for Apps running on PaaS like heroku, render or flyio.

These platforms require you to add that custom domain in their settings as well to make sense of any request coming in, so there proxy servers can forward that request to your app. These platforms normally expose public API’s to do so.

Hope you liked it, feel free to ask away any questions you have.

My name is Zain and I am building devtree where developers can get hired without any job search.

I post about my journey, lessons learned and success on twitter and linkedin. You will also find other things on my devtree profile as well.

If you want to learn about working on Startups, Rails and general life advice follow me.

Moving to solid_queue from sidekiq

Zain Butt — Thu, 28 Dec 2023 14:16:40 +0000

A little bit about me, I am an engineer turned indiehacker for the first time and working on my startup devtree. I started working on it in July this year and growing it slowly.

Its a simple Ruby on Rails application running on Flyio backed by Postgres and background jobs running with Sidekiq and redis.

The problem

I use Upstash serverless Redis in my app that is provided by Flyio with their tight integration with Upstash.

Upstash pricing is per request based, which was different for apps running on flyio as they were providing a free tier based on memory restrictions which worked for me.

But last month they decided to unify their pricing everywhere after new year on 1st Jan. Based on my setup with sidekiq, it sends gazillion request per hour to check for new jobs which eats up their free quota of 10k requests per day.

As much I like sidekiq, I can't bear the redis costs when I am not making any money.

Solution

I was looking for alternative solutions specifically non-redis based. I had a few suggestions from my network which included solid_queue which surprisingly I forgot about.

Its a non-redis solution, works with postgres and I wouldn't spend weeks implementing it. So, I decided to give it a try.

Here's the process I followed:

1 - Create a new branch
2 - Add the gem



gem 'solid_queue'

3 - Change the active job adapter



config.active_job.queue_adapter = :solid_queue

4 - Install solid queue



rails generate solid_queue:install

5 - Run migrations for job tables



rails solid_queue:install:migrations
rails db:migrate

6 - Run the worker



bundle exec rake solid_queue:start
# or add it in Procfile.dev
# solid: bundle exec rake solid_queue:start

Now you can create your first job



rails g job my_job

# app/jobs/my_job.rb

class MyJob < ApplicationJob
  self.queue_adapter = :solid_queue
  # ...
end

Concepts

Solid queue will create a few tables for you to store your jobs but focus on 2 for now.
solid_queue_scheduled_executions and solid_queue_ready_executions

You can guess from their names, one is used to store jobs when they are to be run in the future.

The other is to store jobs which need immediate execution.

Dispatchers

Dispatchers are in charge of selecting jobs scheduled to run in the future that are due and dispatching them, which is simply moving them from the solid_queue_scheduled_executions table over to the solid_queue_ready_executions table so that workers can pick them up. They also do some maintenance work related to concurrency controls.

Workers

Workers are in charge of picking jobs ready to run from queues and processing them. They work off the solid_queue_ready_executions table

Configuration

You can also configure the polling interval, number of workers based on your requirements by using a yaml configuration file.

add a configuration file in config/solid_queue.yml:



development:
  dispatchers:
    - polling_interval: 5 #in seconds
      batch_size: 100
  workers:
    - queues: '*'
      threads: 5
      processes: 1
      polling_interval: 5 #in seconds

With this configuration, it will spin 5 worker threads to process the jobs every 5 seconds.

There are tons of other job level and queue level configurations that you can add for better control over concurrency, uniqueness and queue management that you can find here.

Caveat

I have been monitoring my app for a few days and unfortunately it has crashed a few times due out of memory which never happened before, seems like 512mb ram is not enough 🤷.

I haven't debugged the issue for now but will look into it for the root cause.

This is it form side, let me know if you would like to know more about the technical side of my startup.
I share about my startup publicly on twitter and linkedin.

I made a reverse job board for developers

Zain Butt — Tue, 26 Dec 2023 21:02:58 +0000

Hey everyone,

I am Zain, an indiehacker from Pakistan.

I was laid off from my job last year and was frustrated to find another job. I applied on several jobs on dozens of job boards only to be ghosted or rejected.

This experience made me realise how much time and energy it takes, how many times we need to write the cover letters and manually add our details every time even when we upload our resume, so I decided to change this.

That's why I built devtree, where you are in control. For this project I used what I know the best, Ruby on Rails and took a chance to learn Hotwire and tailwindCSS and let me tell you its been worth it. On top of tailwind I used daisyUI to get component based classes.

I bootstrapped my startup so cost savings is fundamental, I relied on heroku's free tier but that was not an option since they moved to paid only plans. So, I searched for an alternative and found fly.io.

I run three instances their which includes my web app, background worker and database all for free.

The app allows the developers to choose a username, add projects/links, build a testimonial page, add skills, work preferences and personal details. Using this data they can create a portfolio or proof of work site which is easily shareable using their usernames as it contains all their work in one place.

If you are a developer and tired of applying to every other job and still getting no results, head on to devtree.

I will write more about technical stuff in separate posts about different design decisions and integrations. So, stay tuned.

👉🏻 check the app here: devtree
👉🏻 you can find me here: devtree/zain