DEV Community

Cover image for Changelog: Stack Overflow Liquid Tag
Ben Halpern Subscriber for The DEV Team

Posted on

Changelog: Stack Overflow Liquid Tag

We are pleased to introduce the Stack Overflow and Stack Exchange liquid tags. These embeds, assembled in native HTML within posts (as opposed to iframe, JavaScript, etc.) are designed for telling better tales about the code we write.

Stack Overflow questions and answers are a big part of our coding lives and the richest source of software knowledge in the known universe. We hope that this integration will help elevate great answers for further discussion and inject a bit more community into the Stack Overflow flow.

Use these embeds for any reason, be it a meta conversation about an answer, boosting a question to your followers on DEV, organizing a roundup of great answers, or simply additional reading to include in any DEV post.

To make an embed, pluck the ID from the Stack Overflow URL and add it to your posts like so:

{% stackoverflow 57259126 %}
Enter fullscreen mode Exit fullscreen mode

This will create an embed like this:

As far as I know, reference/pointer aliasing can hinder the compiler's ability to generate optimized code, since they must ensure the generated binary behaves correctly in the case where the two references/pointers indeed alias. For instance, in the following C code,

void adds(int *a, int *b) {
    *a += *b;

Here's another question:

I was practicing some JavaScript when one of my friends came across this JavaScript code:

document.write(('b' + 'a' + + 'a' + 'a').toLowerCase());

The above code answers "banana"! Can anyone explain why?

Here is an answer:

In a one-liner:

sum(x == y for x, y in zip(a, b))

And here is a DIY Stack Exchange community question:

{% stackexchange 170013 diy %}
Enter fullscreen mode Exit fullscreen mode

I have a set of tools I use on my desk that are bulky and never seem to store well. These include my wirecutters, pliers, ruler, and snips.

At the moment, the best way I've found to store them is in this pencil holder with half the leg inside and…

Thank you to to @antogarand for first suggesting this feature, and thanks to the folks from Stack Overflow who dipped into the issue thread to offer guidance and encourage us to ship this!

Suggestion: Stack Overflow liquid tag #1419

Is your feature request related to a problem? Please describe. I just noticed we don't have a liquid tag for stack overflow questions or answers while trying to embed one of these on my post.
It could be a nice addition considering the developer-focused website.

Describe the solution you'd like Using {{ SO stackoverflow-url }} or a similar syntax to embed a stackoverflow question or answer into the post.

Additional context One thing to consider while doing this feature is all of the different subdomains on the stackexchange website.
Here is a website listing most of the different domains / communities there are: https://stackexchange.com/sites

From a quick glance, it seems the following domains are valid:

The last two are subdomains: Any stackexchange subdomain, and apparently few language-specific stackoverflow subdomains.

The variety of domains means we can't only use {{ so [post-id] }} as syntax, as we won't know where to fetch the ID from.
Perhaps we could use a simplified syntax of {{ so [id] [Opt: Q or A] [Opt: Domain] }}
Where the default mode would be Question and Stackoverflow.com, but they can be overwritten by the user-specified values.

Here are few sample valid URL formats for:

Questions https://math.stackexchange.com/q/12186 https://math.stackexchange.com/questions/12186 https://math.stackexchange.com/questions/12186/arc-length-of-b%c3%a9zier-curves https://math.stackexchange.com/q/12186/anything

Answers https://math.stackexchange.com/a/64769 https://math.stackexchange.com/a/64769/anything

And thanks to @andy for doing most of the work on this feature! Here is the pull request:

Add Stack Exchange Liquid tag #3637

What type of PR is this? (check all applicable)

  • [x] Feature

Description

This adds the Stack Exchange / Stack Overflow Liquid tag! Here are some examples, with respective screenshots:

{% stackoverflow 24789130 %}

{% stackexchange 169988 diy %}

{% stackexchange 1163633 askubuntu %}

Stack Overflow Liquid tag example

Stack Exchange Liquid tag example

Stack Exchange Liquid tag example

Related Tickets & Documents

Resolves #1419

Added to documentation?

  • [x] Editor Guide

Happy coding!

Top comments (8)

Collapse
 
pixmy profile image
Arturo Cabrera

"Why is the result of ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'?"

hahahahaha I'm dying

Collapse
 
ben profile image
Ben Halpern

That is just the kind of Stack content I hope this feature will help bump 😄

The answer is pretty great

+'a' resolves to NaN ("Not a Number") because it coerces a string to a number, while the character a cannot be parsed as a number

console.log(+'a')
To lowercase it becomes banana.

Adding NaN to "ba" turns NaN into the string "NaN" due to type…

Collapse
 
ben profile image
Ben Halpern

There are a lot of gems on Stack Overflow waiting to be bumped, like this thread about sorting socks...

How to pair socks from a pile efficiently?

3812

Yesterday I was pairing the socks from the clean laundry and figured out the way I was doing it is not very efficient. I was doing a naive search — picking one sock and "iterating" the pile in order to find its pair. This requires iterating over n/2 * n/4…

Collapse
 
yechielk profile image
Yechiel Kalmenson

Awesome!

I know at least one of my old answers that I need to edit now...

Collapse
 
ctrlsquid profile image
zach

I think a feature like this will really help the community. It's one thing for someone to comment "duplicate" and you feel punished for it. It's another thing to be like "this was answer here on this other answer, check it out!"

Collapse
 
jeddevs profile image
Theo

Can I get a hip hip hooray?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.