<![CDATA[Code by Claro]]>https://blog.codebyclaro.comhttps://cdn.hashnode.com/res/hashnode/image/upload/v1608352651891/IF2200Ui1.pngCode by Clarohttps://blog.codebyclaro.comRSS for NodeTue, 19 May 2026 03:36:20 GMT60<![CDATA[DO Hackathon: Phase 3 - The Framework]]>https://blog.codebyclaro.com/do-hackathon-phase-3-the-frameworkhttps://blog.codebyclaro.com/do-hackathon-phase-3-the-frameworkTue, 22 Dec 2020 16:48:14 GMTQuick tip - start with what you know

Determining the "best" framework(s) for each part of the project can be daunting, especially since there is so much to choose from. I usually brainstorm with what I know and then see if there is a technology I want to dabble in, which is what I did in this case.

The Frontend

At first I was going to shoot for an HTML5 (html, css, vanilla js) implementation for this project. However, I decided to throw caution to the wind and push myself to learn something new and try using Vue.js.

Vue.js logo

The Backend

As for the backend, I wanted to use something lightweight and relatively easy to set up. I’ve been wanting to dabble in Google’s Firebase, so that’s the route I decided to take.

Firebase logo

The Dependencies

One of the main features of the app is to display a random picture to the user. I decided to use Lorem Picsum, check it out here, this dependency has exactly what I need and is easy to implement. Kudos to David Marby and Nijiko Yonskai! Check out the source code here.

Picsum screenshot

See you on the next post!

Photo by Matthew T Rader on Unsplash

Buy Me A Coffee

]]><![CDATA[DO Hackathon: Phase 2 - The Design]]>https://blog.codebyclaro.com/do-hackathon-phase-2-the-designhttps://blog.codebyclaro.com/do-hackathon-phase-2-the-designFri, 18 Dec 2020 18:21:41 GMTNow that I have an idea it’s time to work on the design. I usually start by thinking about the UI and how it will flow. So I fired up Figma and created a rough sketch of the UI. For this project I need something simple, 2 or 3 views and a couple of inputs.

The Workflow

  1. User begins at the landing page:
    • A random image will appear for a set amount of time.
    • They will enter a description of what they saw in an input box.
    • They will then click the Submit button, which navigates them to the results page.
  2. User finishes at the results page:
    • The original image will be displayed.
    • The user’s input describing the image will be displayed.
    • They can then click the Share Results button, which will copy the link to the results page.

The Landing Page

Landing page mockup

The Results Page

Results page mockup

See you on the next post!

Buy Me A Coffee

Photo by William Iven on Unsplash

]]><![CDATA[DO Hackathon: Phase 1 - The Idea]]>https://blog.codebyclaro.com/do-hackathon-phase-1-the-ideahttps://blog.codebyclaro.com/do-hackathon-phase-1-the-ideaWed, 16 Dec 2020 14:02:15 GMTThe Rush

I jumped over to DEV and noticed there is a new Hackathon going. Suddenly I get the rush and start floating away with all kinds of ideas. Once I come back to earth I start reading the rules and the T&Cs, after all it is a contest.

DigitalOcean

I jump over to DigitalOcean and start reading about the App Platform to determine what can be built, limitations, frameworks, etc. Seems straight forward at this point especially since they have all kinds of documentation, guides, videos and community support.

The What

This is usually the tricky part, so many ideas to choose from, but as any dev knows we have constraints.

Before I can choose a framework I have to narrow down the WHAT. As usual, I have difficult time narrowing down the WHAT. So what do I do? I take about a day to mull over the ideas and I talk to my wife about it.

Usually what happens is my wife comes up with a great idea, but she doesn't know about the technical details or limitations. In my opinion, these are the best type ideas since they're unconstrained. This was no exception, she handed me an awesome idea! :tada: :tada:

The Idea :arrow_right: An image memory app

See you on the next post!

Buy Me A Coffee

Photo by Frederick Medina on Unsplash

]]><![CDATA[Freelance Proposal Tips]]>https://blog.codebyclaro.com/freelance-proposal-tipshttps://blog.codebyclaro.com/freelance-proposal-tipsThu, 23 Apr 2020 14:14:52 GMTThe past few weeks have been interesting and freelancing is starting to become a mainstream revenue generator for some people in our industry.

“Stop saying ‘later.’ You WON’T do it later. Do it or decide not to do it.” – Chris Brogan

I’ve been doing freelance gigs on and off since 2018, but like Chris Brogan said, I stopped saying later and kicked it into high gear this year. To start off I created my own company, Code by Claro, LLC, which by all means isn’t necessary for freelancing, but it provides some personal liability protection. As well as accountability for myself to get things (:poop:) done!

Prospecting Sources/Platforms

My primary prospecting sources have been Upwork and Moonlight Work. There are other platforms out there, but I’ve had better luck with these. On these platforms you submit proposals (bids) with the limited requirements provided by the client. Some clients are better than others and have more experience knowing what they want, while others need a guiding hand.

Proposal Tips

The most important and challenging aspect of freelance work is writing the proposal for a gig. Remember you’re competing against talented people across the world, so you have to stand out against the crowd. Here are some tips on submitting a proposal that will help you land that gig.

  1. Always be polite, honest and professional… ALWAYS no matter what!
  2. Be sure to carefully go over the requirements and try to understand what the client’s problem (pain point) is; sometimes it isn’t clearly spelled out.
  3. Put yourself in the shoes of the client, what would you like to hear?
  4. Start with a simple “Hello” or “Greetings” and end with thanking them.
  5. Nobody wants to read a novel, so be sure to keep things short and to the point and answer any direct questions.
  6. If applicable, provide examples of past projects that are similar to what the client is asking for.
  7. Ask questions on anything that doesn’t seem clear.
  8. Always end with a call to action by suggesting a phone call or web meeting.
  9. Provide your availability or give them a Calendy link with your schedule.
  10. PROOF READ & SPELL CHECK!!!

Thanks for reading and good luck out there!

Buy Me A Coffee

]]>