It took me forever to write this code

2019-06-22T08:31:07.000Z Honest Cash

As you may have noticed, we have recently introduced a very simple, but robust markdown editor.

Before that, we had kept the posts in a json format, with custom parsing of the different post parts like paragraphs, images etc. This turned out to be a bad engineering decision, because we needed to maintain the parsing logic ourselves and it took more resources than expected causing for many of you, well, some frustration. Also for me :)

Now, with the underlying structure of the posts to be markdown, there are some dependent functionalities to be adjusted, too. One, for instance, is the extraction of the first image in the post for SEO purposes. When you share your post on Twitter, you want the image to be shown to your audience, something like this:

The task is to take basically something in the format of:
hello ![desc]( ![desc]( ![desc]( dummy

and have this as result:

Easy task, right? Well, I've spent the last 2-3 hours just trying to figure out how to extract the very first image url from a markdown text.

The algorithm is the following:

  • parse out all ![]() from the markdown
  • return undefined if none found, otherwise map them the url within the rounded brackets
  • find the first occurrence in the urls with the allowed image extension and return it

I published the code snippet as a git gist here. Do you have an idea how can I optimize this code further? The performance of Honest is at stake!

Follow the Honest dev progress here.


RE: It took me forever to write this code

by @Geri

Hi, i would like to report a bug: in user profiles, number of comments for an article is always shown as 0. 

RE: It took me forever to write this code

by @Geri

good job. will be the paywalls re-implemented too?

RE: RE: It took me forever to write this code

by @adrianbarwicki

Thanks for asking!

Paywalls are a quite high priority on our list. We are currently prioritising the editor and upvotes, and the paywalls are part of it.

I expect that we will be able to reenable paywalls in the following days.

RE: RE: RE: It took me forever to write this code

by @TheOneLaw

There may be
 (eventually, for some special cases)
 a usage scenario for multiple firewalls in a single page.
[As if you needed more complications, haha]

everything seems wow so much more stable this time.
If like that I will begin posting again,
 with new material.

RE: It took me forever to write this code

by @adrianbarwicki

I cross-posted this article on Reddit, and @kefrik proposed the following alternative:
function extractImageUrlFromMarkdown(content) { return (content.match(/!\[.+?\]\((.*?(?:\.jpe?g|png|gif))\)/i) || [])[1] }

So my solution was indeed an overkill :)