Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failure to render in CodeSandbox #11

Closed
cfjedimaster opened this issue Jun 21, 2019 · 7 comments

Comments

Projects
None yet
2 participants
@cfjedimaster
Copy link

commented Jun 21, 2019

Let me be clear that I think this is 100% not your fault, but on the off chance it is a bug on this side, or something that can be adjusted, I thought I'd file it. I know it isn't your job to support an online editor, but again I figured it couldn't hurt to mention it. :)

So long story short, the component doesn't work in Code Sandbox. You can see my code here:

https://codesandbox.io/s/vue-template-tn6p7?fontsize=14

I see nothing in the logs, nor the console. However, the same code, exported and ran locally on my machine, works fine.

Again, feel free to close, but if it's a small thing that could be addressed, I thought I'd share. Thank you for reading!

@P3trur0

This comment has been minimized.

Copy link
Owner

commented Jun 23, 2019

Hi @cfjedimaster and thanks for pointing that out! I'll take a look as soon as I can to check if the issue you're mentioning is on the component side. 😸

@P3trur0

This comment has been minimized.

Copy link
Owner

commented Jun 24, 2019

Hi @cfjedimaster, I spent some time checking the issue. It seems that codesandbox does not import the flags.png (that's the image containing all the flags) properly (see https://tn6p7.codesandbox.io/flags.png).

Maybe, as alternative, I might embed flags.png directly as a Base64 encoded string in the CSS file of the component.

What do you think?

@cfjedimaster

This comment has been minimized.

Copy link
Author

commented Jun 24, 2019

Honestly I don't know. My first instinct is - as I said above - is to focus on what is best for your component, and not worry about tools like CodeSandbox, but if this change would provide other benefits, then sure. The only possible benefit I can think of is one less network request, right? Technically it would be "kinda" better?

@P3trur0

This comment has been minimized.

Copy link
Owner

commented Jun 24, 2019

@cfjedimaster yes, altough the size of the component could slightly increase. However I'll give it a try, thank you for pointing the issue 😄

@P3trur0

This comment has been minimized.

Copy link
Owner

commented Jun 25, 2019

@cfjedimaster I've just updated the component, embedding the CSS background as Base64 encoded.

Now it renders also on Codesandbox (see https://codesandbox.io/s/tygv4).

Also, I took the chance to compress the size of the background image.

From 1.2.2 version the size of vue-country-flag is decreased (50% less!).

Wrapping up, thank you for pointing this issue 😄

@P3trur0 P3trur0 closed this Jun 25, 2019

@cfjedimaster

This comment has been minimized.

Copy link
Author

commented Jun 25, 2019

Cool. FYI I blogged about your component here: https://www.raymondcamden.com/2019/06/21/vue-components-ftw-vue-country-flag

@P3trur0

This comment has been minimized.

Copy link
Owner

commented Jun 26, 2019

@cfjedimaster Cool, thanks for mentioning this component in your blog 🤓

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.