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

Customizer/Make your own corner #5

Open
TheJaredWilcurt opened this Issue Nov 10, 2015 · 16 comments

Comments

Projects
None yet
8 participants
@TheJaredWilcurt

TheJaredWilcurt commented Nov 10, 2015

This is a rough sketch, but functional:

You could implement some dynamic stuff so that the user could select the options to generate the code.

You could still have all the color combos present as like clickable buttons for presets that would auto-set the code to match them.

@tholman

This comment has been minimized.

Show comment
Hide comment
@tholman

tholman Nov 11, 2015

Owner

Awesome stuff!

Definitely something worth considering. I'd started to do this, but kind of ended up just wanting to get the basic idea out before I got more complex.

Will wait for this to chill out for a week or two first, and then dig this back up again.

Appreciate it!

Owner

tholman commented Nov 11, 2015

Awesome stuff!

Definitely something worth considering. I'd started to do this, but kind of ended up just wanting to get the basic idea out before I got more complex.

Will wait for this to chill out for a week or two first, and then dig this back up again.

Appreciate it!

@elrumordelaluz

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 11, 2015

Contributor

I came to the same idea, but preferred not to js the UI stuff, so results in this Jade mixin.

Contributor

elrumordelaluz commented Nov 11, 2015

I came to the same idea, but preferred not to js the UI stuff, so results in this Jade mixin.

@TheJaredWilcurt

This comment has been minimized.

Show comment
Hide comment
@TheJaredWilcurt

TheJaredWilcurt Nov 11, 2015

@elrumordelaluz I hate to break it to ya buddy, but that's still JavaScript. It's just a lot more complex way of doing the same thing I am. You're just using a site that's doing all the heavy lifting, but at the end of the day, you're doing the same thing I am, you're just forcing them to type in colors rather than use a color picker.

@tholman I should have mentioned I used SVGO-GUI to reduce the size of the SVG by about 25% in my version so the user gets minimal characters in their snippet.

TheJaredWilcurt commented Nov 11, 2015

@elrumordelaluz I hate to break it to ya buddy, but that's still JavaScript. It's just a lot more complex way of doing the same thing I am. You're just using a site that's doing all the heavy lifting, but at the end of the day, you're doing the same thing I am, you're just forcing them to type in colors rather than use a color picker.

@tholman I should have mentioned I used SVGO-GUI to reduce the size of the SVG by about 25% in my version so the user gets minimal characters in their snippet.

@tholman

This comment has been minimized.

Show comment
Hide comment
@tholman

tholman Nov 11, 2015

Owner

Lets not fight, both are super awesome! The SVGO thing is super neat too (wow, svg is such a mystery to me sometimes).

Again, will dig this up in a week or two... I do have some early designs when I was doing this as well. Will get there!

Owner

tholman commented Nov 11, 2015

Lets not fight, both are super awesome! The SVGO thing is super neat too (wow, svg is such a mystery to me sometimes).

Again, will dig this up in a week or two... I do have some early designs when I was doing this as well. Will get there!

@elrumordelaluz

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 11, 2015

Contributor

sorry @TheJaredWilcurt, maybe I explained wrong, I do know that Jade it is javascript, just intended to say "take advantage of the awesome Codepen, to make me a "customizer" instead of a little app that update de DOM". Just for my own use I made it, used it to regenerate the markup for a commit. Only this.

It's an awesome idea to have a "customizer" in site.

Contributor

elrumordelaluz commented Nov 11, 2015

sorry @TheJaredWilcurt, maybe I explained wrong, I do know that Jade it is javascript, just intended to say "take advantage of the awesome Codepen, to make me a "customizer" instead of a little app that update de DOM". Just for my own use I made it, used it to regenerate the markup for a commit. Only this.

It's an awesome idea to have a "customizer" in site.

@lipis

This comment has been minimized.

Show comment
Hide comment
@lipis

lipis Nov 12, 2015

💯 For the customizer :) Good stuff

lipis commented Nov 12, 2015

💯 For the customizer :) Good stuff

@tholman tholman changed the title from Dynamic values to Editor/Make your own corner Nov 14, 2015

@tholman tholman changed the title from Editor/Make your own corner to Customizer/Make your own corner Nov 14, 2015

@Rplus

This comment has been minimized.

Show comment
Hide comment
@Rplus

Rplus commented Nov 22, 2015

I make a prototype for this ~
http://codepen.io/Rplus/details/avxqBE/

@lipis

This comment has been minimized.

Show comment
Hide comment
@lipis

lipis Nov 22, 2015

@Rplus The cat is transparent.. which is nice.. but there is no animation :/

lipis commented Nov 22, 2015

@Rplus The cat is transparent.. which is nice.. but there is no animation :/

@Rplus

This comment has been minimized.

Show comment
Hide comment
@Rplus

Rplus Nov 22, 2015

@lipis, There is a demo for transparent cat with SMIL animation made by other people,
but it's markup is little long
#15 (comment)

Rplus commented Nov 22, 2015

@lipis, There is a demo for transparent cat with SMIL animation made by other people,
but it's markup is little long
#15 (comment)

@lipis

This comment has been minimized.

Show comment
Hide comment
@lipis

lipis Nov 22, 2015

TBH I don't mind skipping the animation.. It's nice, but we could skip it..

lipis commented Nov 22, 2015

TBH I don't mind skipping the animation.. It's nice, but we could skip it..

@Rplus

This comment has been minimized.

Show comment
Hide comment
@Rplus

Rplus Nov 22, 2015

I update this, and add new controller for animation and mix-blend-mode
http://codepen.io/Rplus/pen/wKZOBo

Hope this helps!

Rplus commented Nov 22, 2015

I update this, and add new controller for animation and mix-blend-mode
http://codepen.io/Rplus/pen/wKZOBo

Hope this helps!

@lipis

This comment has been minimized.

Show comment
Hide comment
@lipis

lipis Nov 22, 2015

@Rplus 💯 I think bottom left/right is not really needed.. other than that it's pretty cool..!

lipis commented Nov 22, 2015

@Rplus 💯 I think bottom left/right is not really needed.. other than that it's pretty cool..!

@IonicaBizau

This comment has been minimized.

Show comment
Hide comment
@IonicaBizau

IonicaBizau Feb 28, 2016

Contributor

👍

Contributor

IonicaBizau commented Feb 28, 2016

👍

@digitalheir

This comment has been minimized.

Show comment
Hide comment
@digitalheir

digitalheir Aug 15, 2017

@lipis actually I came to this issue hoping for a bottom corner!

digitalheir commented Aug 15, 2017

@lipis actually I came to this issue hoping for a bottom corner!

@TheJaredWilcurt

This comment has been minimized.

Show comment
Hide comment
@NNTin

This comment has been minimized.

Show comment
Hide comment
@NNTin

NNTin Nov 26, 2017

@TheJaredWilcurt
I've updated your code generation: https://jsfiddle.net/4r70jax0/34/
I added a ref attribute called myReference. And then use that to create the HTML: var octoCodeHTML = this.$refs.myReference.outerHTML. The style tag is static and doesn't need any modification. All dynamic change information to github-corner is in the HTML.
This way you can easily make changes without touching the code generation again.

I did something similar here: https://nntin.github.io/discord-logo/

NNTin commented Nov 26, 2017

@TheJaredWilcurt
I've updated your code generation: https://jsfiddle.net/4r70jax0/34/
I added a ref attribute called myReference. And then use that to create the HTML: var octoCodeHTML = this.$refs.myReference.outerHTML. The style tag is static and doesn't need any modification. All dynamic change information to github-corner is in the HTML.
This way you can easily make changes without touching the code generation again.

I did something similar here: https://nntin.github.io/discord-logo/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment