DEV Community: Chris Dermody

Updating relative time in UI with Nuxt3

Chris Dermody — Fri, 24 Feb 2023 15:52:53 +0000

I bumped into this problem when working on a side project - aihairstyles.com. When users generate a new set of styles, I want to show them when that set was generated, relative to now. I also want that time to update dynamically as time goes on, without the need for them to refresh the page. Finally, I want to use this logic throughout my app in lots of places.

I solved it with a combination of global state, date-fns library and a small plugin I wrote.

1. Create a state variable to hold a "ticker"

In my useState.ts file, I'm adding a variable that we'll update later via a plugin.

export const useTicker = () => useState<any>('ticker', () => new Date().getTime())
2. Create a plugin to update this ticker at a given interval

// globalTicker.client.ts

export default defineNuxtPlugin(nuxtApp => {

  // updating a global ticker in useState that can be used to auto-update times in the UI

  const ticker = useTicker()

  const TICKER_INTERVAL = 30000; // milliseconds

  setInterval(() => {
    let newVal = new Date().getTime();
    ticker.value = newVal
  }, TICKER_INTERVAL);

})
With this plugin, every 30 seconds the ticker will update (30000 milliseconds).

3. Install date-fns library (or a lib of your choosing)

I used to use moment.js, but date-fns is my go-to now as it's smaller and can be tree-shaken. But use whatever makes you happy.

npm install date-fns --save

4. Create a composable that exports a relative time function

As I mentioned, I wanted this logic throughout my app in lots of places, so creating a composable was the way to go.

To do this, I created a file called useDateHelpers.ts in my /composables directory.

// /composables/useDateHelpers.ts

import formatDistance from 'date-fns/formatDistance'

export const relativeDate = (date:string) => {
  console.log("date:", date)
  const ticker = useTicker()
  return formatDistance(new Date(date), ticker.value)
}

Notice we're importing our global ticker and using it, making our function's return value reactive in Vue's eyes.

5. Finally, use the function in our components

Then, in the html, we use this function and pass in the created_date and the global ticker variable. In the code below we have a for-loop that loops over all image sets.

<!-- rest of preview page ) -->

<h2 class="gradient-text-1 text-2xl">
    {{preview.data.style}}
</h2>
<p class="text-sm muted mb-3">
    {{ relativeDate(preview.data.result_data?.created_at)}} ago
</p>

<!-- rest of preview page -->

The result? We have relative time updating in our UI.

I think it works quite well.

Any suggestions for improvement? Let me know :)

Also, I'm actively building aihairstyles.com, would love feedback on that too 🙏🏼.

Chris

I built Pushpop - a PushBullet alternative for iOS using Nuxt3 with CapacitorJS

Chris Dermody — Mon, 26 Sep 2022 10:17:39 +0000

If you'd just like to try it out, visit getpushpop.com. To know the story, read on

Late last year I moved to iOS. 'Twas a learning curve of course, but the hardest part? No PushBullet :(

I would use PushBullet daily on Android to move files, text and links from my phone to my laptop and vice-versa. I also used it as a kind-of "to-do" app for links or Reddit posts I find on mobile that I want to look into more. Yes I could bookmark it or add it to a todo list, but with Pushbullet I could just push it from my phone, and next time I open my laptop, it'll open up in my browser so I can read it, download it, or save for later in some form. It's great.

I wanted that on iOS, but it looks like it's just not economically viable for them to do it, as I found in this Reddit post:

For those not aware, fully updating our iOS app for the latest versions of Swift, iOS, etc and then adding Sign in with Apple is a huge amount of work. Sadly iOS is our least popular / used platform. It's also the platform we can to the least interesting things. As a result, we've chosen to unpublish it for the time being to focus on the platforms where we can do more interesting things.

Well, damn. What's a reasonably semi-capable developer to do, ay?

Oh look, Nuxt3 just went into release candidate stage...

I love Vue, and have been using Nuxt for the "marketing" portion of a few of my side projects like Reservadesk, Referextra, and Livedata.ninja to much success. I love how it builds to static HTML and gets those sweet sweet Lighthouse scores.

So of course, over a few nights and weekends I go and build the web app using Nuxt3. And it works pretty well (although I'll talk about some problems I had later). Before too long, I was able to get it to a minimum viable product, so to speak.

Then, we needed to get the app running on mobile devices. For this, I turned to Capacitorjs. I was a bit worried at first, I know building cross-platform mobile applications can be a bit of a minefield, but I really like Capacitorjs. The documentation is great, the ecosystem of plugins is healthy, and I was able to achieve everything I wanted with it (although I'm still, as of time of writing, trying to get Android to work).

After some back and forth and some wrangling, I was able to publish the app on the app store, check it out here - Pushpop.

And it works!

Using my plucky little app, I'm now able to share anything on my phone to pushpop, and have it appear as a notification on my laptop, and vice versa. It makes sending links, screenshots, photos - anything - from one device to another easy.

It does not do some of the more fancier things that PushBullet can do on Android like SMS management etc, but I don't need that. And I'm the primary target market for this app 😂.

Problems I found with Nuxt3

Sorry but I still cannot figure out how to use plugins like I did in the older version. Any plugins that have to render a html component I just couldn't get to work, like one of my favourites vue-json-pretty. If someone knows, please enlighten me.

Another thing I was trying to do was build middleware which would automatically redirect the user to https if the request was http. I still haven't figured it out and am relying on the frontend to detect and redirect 🤮. I think I need to build a Nitro plugin to handle it but that's brand new as a technology it seems and is quite light on documentation and guides.

What else did I learn?

Building for iOS is a certifiable nightmare. Why do Apple make things so unbelievably difficult?

Terrible documentation like this page which is supposed to tell you what CFBundleTypeName is in your info.plist file. But no. It just tells you it's required, is a string, and its name is Document Type Name. Trying to cobble together what this value actually means is next to impossible.
Bugs in Xcode where the Apple developer forum just recommends downgrading to an older version.
The inability to test push notifications properly in the simulator
App Store Connect which is an absolute nightmare to try and navigate and figure out where you are and what you're doing.

Tools used

Nuxt3
TailwindCSS
CapacitorJS
Node
Heroku
Firebase

Tools tried

Tauri. I saw this on fireship's Youtube channel and wanted to give it a try. Turns out it's just a little too new so I turned to Electron
Electron. Turns out your iOS app can run on mac. Who knew? :D

What's next?

There are a few things I'd like to do next with the app:

Get it running on Android and put it in the Play store
Some UI/UX improvements to make it easier to navigate and quicker to share things from within the app itself
Fix a bug where it's re-counting devices for some reason (I think on app update)
Add a configuration so that when it's running on a desktop device, it can auto-open links and files in the browser when they're received.
(Maybe) see if I can get it running in Electron again and build it for Windows, but when I looked at that last time the documentation seemed lacking and confusing.
Find out who this app might be great for. Explore use cases and see if there's a market for this that could make me some beer money.

If you've made it this far, I'd love your feedback. Comment below or check out getpushpop.com/support (yes it's a support form but just put in whatever you think is good/bad 🙂)

My 9-5 just became a Unicorn. These are the top 5 features that helped us get there which every app should have

Chris Dermody — Mon, 21 Feb 2022 12:06:58 +0000

Three years ago I joined Flipdish as their first Product Manager. Back then it was a startup that had found product market fit and just needed to execute quickly and grow. I had product experience, but I think the kicker that got me the job was that I built my own app to track things like tips and delivery addresses when I worked as a fast food delivery driver, so I could hold my own technically too.

I don’t code in Flipdish (officially) but I can’t keep my hands out of VSCode, so over Christmas I decided to build a co-working app with my fiance. She did most of the backend (node/Express/Firestore) and I worked on the marketing site and web app (Nuxt/Vue3).

Without realising it, I found myself building all the features that I saw make a huge difference to Flipdish’s success. I’ve never seen anyone write about these in a clear, easy list, so here we go. I wanted this list to be tactical, that anyone can take and build out a solid product with, so below are 5 things that I’ll be building from the start in all my future projects.

1. Audit logs

Being able to see an “activity log” of actions taken in a given account is immensely powerful. In Flipdish it’s used daily by clients and support staff to debug any queries that may arise, or just to understand general activity on a given account. For Reservadesk, it’s proven hugely helpful early on to not only understand account activity, but simply for quick development. I can see when I make changes and the before/after of what they were. I’ve written a separate post about best practices for audit logging if you’d like to learn more about what makes a useful audit log.

2. Granular user permissions

When trying to figure out what way to configure your user permissions, it’s easy to do something simple, like giving yourself and your staff an “admin” permission (god mode, basically), and your users something general like “guest” or “teammate”. This will bite you later on, and is a tricky thing to unwind.

From now on, all of my projects will have granular user permissions from the outset. It has minimal up-front cost, and gives you flexibility down the road. You can always “bundle” your granular permissions together so that it appears in UI as a general thing, but you’ll have that flexibility down the road should you need to sell to enterprise or grow into different markets/regions.

In Flipdish, since we’ve exploded across the UK, Europe and North America, we have country managers, support staff, success staff, contractors etc, and they all need specific permissions to different things. Had we not had granular user permissions from the outset, this would have inevitably slowed us down and hindered growth.

3. Image manipulation API

It’s pretty rare that the projects you build won’t have images in some form. Before joining Flipdish, I think I was simply serving huge images in my sites/apps with minimal optimisation. Rookie error. I’ve since discovered a whole new world of intelligent image optimisation via services Imgix or imagekit.io. They both offer what is effectively an API layer on top of your images, meaning you can build your UI and simply pass in query parameters to “transform” the image based on what the UI needs at that particular time.

For instance, let’s say your user uploads an huge 1000px x 1000px image, which will only be used as a small icon. You don’t want to load that massive image on a mobile device.

With the image manipulation API you can request that image, but at a smaller size, like 40px x 40px. The service will transform it on the fly for you. It’s very impressive. Once you start using this, you’ll never go back in my opinion.

4. Localisation

I can see you rolling your eyes at this one, but hear me out. You don’t need to localise your app into multiple languages from the outset, but building in i18n from the start is something I’ll do religiously from now on, for two reasons.

The cost is low. I still dev in English, but then quickly create the strings in localise.biz (or similar service) before finally building a release for production. If sometime down the line I see that the app is popular in a given region that has other languages, it’s fairly trivial to get your app translated and you’re away.
You can let your customer define their own locale customisations. This gives your app a layer of customisation that’s relatively simple to achieve, but can be a real differentiator. Users can sometimes just want a certain word to say something else. In reservadesk, we built a system where our users can define certain words themselves, like the main call to action to reserve a desk can say “book now” or “reserve” - whatever the customer wants. In Flipdish, we have customisation requests every single day from clients and our ability to accommodate their requests has been central to keeping them as clients.

5. Referral scheme

This one doesn’t necessarily need much dev work initially, but it’s something I’ll be keeping in mind for all future projects. Letting your customers who love your app be rewarded for sending others your way is an absolute win-win. In Flipdish we’ve had partners and affiliates as a key strategic element of our growth plans across the globe. Having a robust system for rewarding your best referrers in a systematic way will absolutely help you down the line.

Bonus - your API is an asset

One huge thing I’ve learned in Flipdish is that your API isn’t just something you need for your UI to work. If you go about it right, building an open, public, well-documented API can make magic happen. You’ll find that companies start building things on top of your APIs for clients who need it, making them extremely sticky to your platform.

Extra bonus - we’re hiring - remotely

My Fiance and I are looking for a house, which I'm sure you know is not cheap so we need some sweet sweet referral bonuses. If you like the sound of working somewhere like Flipdish, we're hiring. Our stack is primarily C# on backend, React/React Native frontend, as well as native iOS and Android development in Swift & Kotlin.

I’m Chris Dermody on Linkedin, or cderm on Twitter. I'm more than happy to answer any questions about any roles, or get you in touch with the person who can answer them if I can’t 🙂

Making audit logs sexy - best practices for audit logging with examples

Chris Dermody — Sat, 19 Feb 2022 11:31:45 +0000

It might be a sign of my ever-growing age, but I've fallen deeply in love with a robust, detailed audit logging system. For all of my future projects, it'll be one of the first features I build. Knowing who did what, when they did it, and what was changed, is hugely powerful in not only debugging business logic, but getting a quick glance at a user's account activity and understanding how they're using your software.

When searching for "best practices for audit logging", I didn't find anything, so I thought I'd try fill that void with my experience in how massively helpful a good audit log is, and how to go about building it.

What are audit logs?

Audit logs are effectively an activity log of things that happened in a given entity (usually an "account").

For instance, for one of my side projects - reservadesk.com, we log all activity within an "organisation" so that admin members (and us internally) who manage the organisation can see who changed what, and when. It makes it very easy to debug customer problems, as well as simply being able to track active accounts and see what people are doing as they poke about at your app.

What's more, a lot of large clients will expect this kind of thing, and are willing and able to pay for it.

What audit logs are NOT

Audit logs are not like console logs in the console, or backend logging in your API like you might have in Datadog, Rapid7 or some other log provider. Those type of logs have equal, if not more, importance. But they serve a different purpose. Those types of logs are for your developers or technical support to interrogate and check for problems. Audit logging is for your customers themselves (so they can see changes to things over time) and also your support/success staff for issue resolution and, to a lesser degree, usage.

Learning from Flipdish

Flipdish is my day job. I work in Product and at the time of writing, we just reached Unicorn status with our latest round of investment. Since joining three years ago, it's been a whirlwind, to say the least, so right now feels like a good opportunity to pause and reflect on some of the things I've learned.

Here's that list. One of the bigger things on that list audit logs. When a customer calls in with a query, being able to track down who changed what, and when, is a powerful tool to have in your arsenal to get any issues resolved as quickly and painlessly as possible.

BTW - I'm hiring for product managers, and we're hiring for engineers too - get in touch if you're curious about any of the roles.

What should be logged?

The first logical question when tackling audit logs, is what actually should be logged, and what shouldn't. A good rule of thumb is if something changes in your database, it should be logged. Typically, this means all POST, UPDATE, PATCH and DELETE requests. GET requests typically would not be logged, but that doesn't mean they can't be if you've got a compelling reason to know when someone viewed something, for instance.

Ask yourself the question "As the customer managing the configuration or monitoring of this app, would I like to know when this activity has happened, by who, and when?". If the answer is a yes, then you need an audit log.

What should be in an audit log?

For me, there are a few key elements of an audit log that need to be there in order for it to be effective and useful to your team.

The entity that was changed. What was the entity that was created/updated/deleted etc. In the example below, the entity was a "resource".
The type of event. Was it an update, a deletion, or something else? Being able to glance at an audit log and know the action that was taken is essential.
When the event occurred. You need to know when the event happened, and of course if you're showing a list of events, they should be in chronological order. Bonus points here if you show both the time, and relative time (eg "10 minutes ago")
Who made the change. Knowing who made the change is essential. Was it a support team member, or the customer themselves? Bonus points here for including the user ID, to make chasing down the culprit that bit quicker.
What was changed? Understanding the properties that were changed, the previous value, and the new value, is essential. Without this information, your audit logs are a lot less effective.

How long should I keep audit logs?

This is up to your business, but in my experience, typically any more than 3 months is overkill. If there is anything to debug, it'll usually crop up in that time frame. The only caveat to this would be large customers who want to retain logs for longer. This is of course an opportunity to upsell those clients onto a longer log retention period 😉.

Apps that do audit logging well

Of course I'm going to say Flipdish first, with reservadesk.com as a close second!

Other apps I've noticed that do it well are Stripe, split.io and localize.biz - although in localize's case it's more of a light activity log.

Anything else I should know, Chris?

I'm glad you asked. Once you have your audit log system set up, and it has appropriate filters, you should link to the audit logs from every entity that has them. In our examples above, this means that if you're logged in as an organisation teammate, and you view a resource like Desk 1, you should have a link that goes directly to your audit logs list page that has the filter pre-filled for that resource.

Or even, better, display the logs for that item in the UI itself, no need to redirect the user.

Did you like this post? Subscribe for more tidbits in product development, things I've learned from Flipdish, and more. I'm @cderm on twitter and Chris Dermody on Linkedin

Roses are red, violets are bigger, I built a website to make your avatar a sticker

Chris Dermody — Sun, 14 Feb 2021 15:13:18 +0000

Check it out: snoostickers.com

A few weeks back, my girlfriend (Hey Catia 😘) showed me the Snoovatar she built. I laughed because it was exactly like her in real life, down to the shoe colour. Immediately, I wanted it as a sticker for my laptop.

Snoovatars are Reddit's version of Avatars that you can customise the look of. It was announced a few months back. They're pretty fun, and I thought if I wanted my girlfriend's snoovatar as a sticker, maybe others would, too.

So, like any obsessed product-builder, I started Googling for APIs that I could use that would automate the actual sticker printing, and leave me to worry about the website. Luckily, I found Zazzle.com.

Zazzle's API is quite powerful, it has the ability to render images on top of items as if they were already printed on them. Check out the cup below. That's not a photo of a cup I ordered with her snoovatar printed on it - that's an API-generated image. That cup doesn't exist yet!

If I had a criticism of their API, it's that it's documented in PDF form. Really Zazzle, it's 2021, if you want developers to use your API, this needs to be better.
That said, I was able to cobble together what I needed. A user can now add a link to their snoovatar and see what it'd look like on a range of products (currently just stickers, badges, cups and phone holders, but more to come).

Affiliate

Zazzle also has an affiliate program, so in theory if someone clicks-through and orders something, I get a small commission. Maybe this side project will pay for its own servers! :D

The Future

Well, when I finally got this built, I realised it's a bit silly to limit it to reddit snoovatars. It should also be able to show Gravatars, gaming avatars, and more. That's something I'll keep in the back pocket, for now.

The Tech

I wanted this as a very simple static page, so I used Nuxt - [everything I make is Vue based now].(https://chrisdermody.com/products/)). I'm hosting it on my own Digitalocean droplet. Here's a post I made while making this project for my future self so that I remember how to deploy another static site to the same server

Tailwind CSS static navbar with shadow on scroll for Vue applications

Chris Dermody — Sun, 02 Feb 2020 13:42:27 +0000

I first wrote about this over on my blog - really only for my own personal reference since I'll need this code again in my next project. But thought I'd share here too.

If you're not using Tailwind for your CSS needs - I highly recommend it. It's now a staple of my product building toolkit, and it just fits so well with Vue.js and Nuxt workflows that I can't imagine moving to something else.

One thing about Tailwind is it leaves the Javascript to you. This is so it's library-agnostic.

For most of my projects I want that smooth shadow under the navbar - here's the code I use to achieve it.

The HTML



<nav 
    :class="{ 'scrolled': !view.atTopOfPage }" 
    class="fixed flex w-full bg-white border-b items-center justify-between flex-wrap p-5 m-auto top-0 animated">
</nav>

Here, we're adding the .scrolled class when the value in view.atTopOfPage is false.

The CSS

I have a navbar component that I use throughout the app, so this code would go there. PS: Yes this is technically SCSS...



nav {
    z-index: 10
}

nav.scrolled {
    @apply shadow-2xl;
    border-bottom: 0px;
}

Apply the shadow to the navbar when it has the class scrolled.

The Javascript



// in data, I like to store a view object with all 

// the values I need for a component to manage 

// it's 'view' state - ie loading, 

// or in this case, if the user is at the top of the page or not

data () {

    return {

        view: {

            atTopOfPage: true

        }

    }

},

// a beforeMount call to add a listener to the window

beforeMount () {

    window.addEventListener('scroll', this.handleScroll);

},

methods: {

    // the function to call when the user scrolls, added as a method

    handleScroll(){

        // when the user scrolls, check the pageYOffset

        if(window.pageYOffset>0){

            // user is scrolled

            if(this.view.atTopOfPage) this.view.atTopOfPage = false

        }else{

            // user is at top of page

            if(!this.view.atTopOfPage) this.view.atTopOfPage = true

        }

    }

}

The Result

Buttery smooth shadows on your navbar. Check it out in action on my product Referextra.com

Myself and a friend built a chrome extension manager in order to learn git. Best feature? Groups! Latest feature? Tabbing! 🙌💜

Chris Dermody — Tue, 20 Aug 2019 12:36:25 +0000

Built this chrome extension manager a few years ago with my good friend Ciaran Maguire when he was in South East Asia for 6 months and we both wanted to learn Git.

Here's a link to the extension for those interested.

We're both fiends for chrome extensions, and we wanted a way to quickly toggle them on or off so that they weren't eating resources when they didn't have to be.

Also, we wanted to group them so that you could just hit one button and that group of extensions all turn on (or off).

So, we built it. We hit 10,000 users recently and almost hitting 11,000, which is amazing.

Features

Group extensions so you can quickly toggle them on or off in one go (handy for webdev, or adblocking etc)
Can show chrome apps currently installed (via settings)
Quickly uninstall extensions
Quickly get to their homepage (if they have one)
Compact or expanded view
Material theme (built with materialise.css)

Latest Features

We just added some stuff. I have a short video here: custom chrome extension manager latest update if you'd prefer video. ;)

Tabbing

Version 1.0.3 adds proper tabbing! This was really annoying me as when I opened the extension it auto-focuses the search, which is great, but tabbing from there didn't focus the first extension's toggle, and now it does!

This means that, combined with a shortcut to open the chrome extension (configured at chrome://extensions/shortcuts), you can completely manage your extensions with just your keyboard.

Quickly search the chrome web store right from the extension

Lets say you're not sure you have an extension installed, so you open custom chrome, and search for it. It's not there, but you want it.

Well now, we give you a shortcut to the web store with that search term, so you can quickly get an extension you need.

Just wanted to share here, never mentioned it before, and also to ask for feedback. We'd love your thoughts.

Which dev.to loading GIF do you prefer?

Chris Dermody — Thu, 01 Aug 2019 10:16:57 +0000

So I've gone ahead and made some dev.to loading gifs based on the logo. Which one's your favourite?
This large gif is a bit choppy - see the actual gifs further below ;)

Whenever I start a side product, one of the first things that pops into my mind is the loading animation. Lately, I've found a nice tool that I'd like to share called Anima. It's a sketch plugin that lets you animate things like this. It's quite powerful and I'm still discovering more about the tool every week.

If anyone's interested, I'll make a quick tutorial showing how to make the GIF everyone likes, and maybe then I'll jump in and try contribute to the project on Github - that'd be cool :)

My first thoughts were what if the "V" moved to the left, replicating a console, and then "loading" just scrolled across...

I quite like this, but it wasn't quite right. After chatting with my lady friend (who's also a dev, hey Catia 😘), she suggested doing something like "npm run DEV" - which I really like the idea of. So, we came up with:

And a slight variation on that

Some other options

It's always good to have options! While building the above, I thought what if I just faded the letters in and out sequentially. So:

And another version of the above

Which do you prefer?

I know which is my favourite, but let me know what you think is best, and obviously if you've any ideas for how to improve it, lemme know.

PS: you can check out some of my other animations over here, like:

Spotify's lowkey tech playlist is brain fuel for my coding

Chris Dermody — Sun, 23 Jun 2019 09:49:57 +0000

I'm always on the lookout for music to listen to while I code. Finding the right album or playlist can help me sink into deep work and I get lost in code for hours (in a good way, with deep focus I mean).

Here's one from Spotify that I'm loving right now. Really gets me in the zone. Would love to hear suggestions for other good ones though.

Playlist link: https://open.spotify.com/user/spotify/playlist/37i9dQZF1DX0r3x8OtiwEM?si=f8MXDYSxQ_6-xE4-OPF67w

Eager to hear other's suggestions too - I find discovering music difficult nowadays that I don't listen to radio at all.

dev.to seemed to like my app tripcoster.com. Yesterday it made its first € 🙌🙌🙌

Chris Dermody — Mon, 10 Jun 2019 12:17:54 +0000

Just sharing a (very) small win. Two weeks ago I shared with you guys an app I built in the last couple of months - tripcoster.com. It gives you the entire cost of a trip from anywhere, to anywhere, using live data for flights and accommodation.

Well, just last night it got it's first little bit of referral revenue. Someone had clicked a link in my app and gone on to make a booking.

The percentages mean that this sale only makes me €13, but to say I'm excited is an understatement. Really really eager to see where I can take this little app in the coming months.

That's all, just wanted to share! :)

My girlfriend likes to travel, I like to know how much it's gonna cost. Vue, node and some APIs later, I give you tripcoster.com

Chris Dermody — Sat, 25 May 2019 13:37:59 +0000

After a few weeks work, I'm happy to share tripcoster.com.

For me, figuring out where is good value to travel to for a break away has always been a hassle. I don't know the specific dates I might want to go on, I just sort-of want to browse. I want to ask an app "How much would it be for a weekend in Amsterdam, travelling from Dublin". So, I built one. :)

Of course, you can also search specific dates too.

APIs

Kiwi/Tequila for flights. I found this one a lot easier to work with than Skyscanner - although it can be quite slow for the vague queries
Hostelworld for accommodation. So far this has been reasonably solid, apart from the odd bit of downtime/errors.
Unsplash for the photos - I actually need to add in the image attribution...

I'm pretty happy with the app so far. But, plenty more todo

Other accommodation sources. Airbnb/Booking.com for some hotels/apartments etc
Integrate Numbeo - an API for telling you how much stuff costs (like beers, for example) - so you can compare the cost of actually being somewhere, not just getting there and staying there.
Dynamic URL routing. At the moment, you can't share a search result link. That kinda sucks. For now though, it works.
MAYBE user accounts and saving trips that you want to go on. Not sure about this one just yet. I quite like not needing a database for this app...

Anything else? Would love feedback on design, functionality etc.

PS: I know the results can be slow to load, I'm working on backend caching and also I've some ideas to keep the user occupied while the app waits on the API response :)

Last night my side project made one person happy, and someone else pissed off

Chris Dermody — Mon, 18 Feb 2019 14:35:40 +0000

I've been working on a side project, mydevportfol.io for about 2 years now (on and off). It's finally at a point where it's good enough that people are willing to pay for it, which is an incredible feeling.

I woke this morning a a Stripe notification that I'd gotten a sale overnight. Amazing! Definitely a great start to the day.

But then I opened my emails and saw I had a message from a disgruntled user, that I had wasted their time because they thought it was free...

These were two different people of course, and maybe it's just a natural thing to happen as more people find your app, and I think maybe as devs we're just used to cool stuff on the internet being free.

But as devs I also think we need to make sure that our work is valued, and we should know that software isn't free. Sure, sometimes we'll build cool stuff and put it out there just for the fun of it - eg a chrome extension for managing other chrome extensions I built with a friend a while back, but that doesn't mean EVERYTHING we build has to be free.

Just wanted to share - I'm a big proponent of letting people pay you for your work via donation buttons or putting a price tag on your side project - but happy to hear other thoughts.