Show HN: Releasing my first real open source project – Captionss | Hacker News Reader

Show HN: Releasing my first real open source project – Captionss

captionss.com

51 pointsjbranchaud35 comments

Why is this a plugin? I'm likely only going to be using one of these types of captions, which I can write in about 5 lines of stylus. The rest of the options that you added to make this a 'real open source project' are then cruft.

EDIT: Sorry, not to denigrate your hard work, but I was burned early in my career by trying to use too many labor saving plugins. Later, I learned how to code correctly. I found that I could accomplish in 30 lines of js and 10 lines of css what I had previously downloaded a 500 line plugin for. I wondered why people found it necessary to build such bloated plugins, and realized that it probably stems from a desire to make a 'real, full-featured project'.

You make a valid point. If a person just needs a quick one-off caption for a single image and they know their way around CSS, then this might not be for them.

I am aiming to build a clean, consistent solution that can be grabbed from bower more quickly than finding similar lines of code in a blog.

Furthermore, I found it to be non-trivial to come up with a solution that didn't require specifying a predetermined image width. I hope captionss saves people that trouble as well.

this is a plugin because:

* what the hell is stylus? your favorite tool isn't necessarily ubiquitous.

* it can serve as a learning tool for others. open source, remember? learning, and stuff.

* it could serve as a starting point for a minimal/stripped down version someone hacks away from.

* not everyone cares about 40 vs. 500 lines. some just want a cool and clean effect for a small audience, perhaps a small gallery site for a pro wedding photographer doing her/his own site.

* sorry, not everyone is as awesome as you are at coding. please bear with us while this guy releases hard work for free.

Please, write us a tutorial on those 5 lines of stylus - it'd be really helpful.

I built captionss.

This is my first legitimate open-source project, I would really appreciate any feedback and suggestions related to the project as well as the landing page (captionss.com).

I will definitely use this. Kudos for using Bower, first time I've seen it in the wild.

A "fork me on GitHub" banner is always nice. :)

Good thinking, just added one!

Good one, looks neat, and congratulations on your first open source project!

Can there be addition where there is one more mode where there is a small icon lets say 'i' at the a specific location (left top, right top, left bottom, right bottom) which when clicked/hovered on brings up the caption or a detailed write up panel?

Looks really nice, good work. I like your documentation style too.

Looks like some pretty solid CSS with one exception: you are changing font size and colors for the default figure tag. While it's not a common tag, it is used elsewhere. This may cause issues for some users, causing them to have to prefix your selectors.

Good catch! I'll fix that.

Yes, in addition to what javajosh found, your class names are rather generic and I imagine might lead to clashes. I'd personally recommend prefixing your class names with something (rather like FontAwesome now prefixes their classnames with 'fa-').

Maybe the figure element is so rare that this doesn't matter, but that is making some sort of an assumption.

Apart from that this looks great, and I could definitely see myself using this in a project I'm working on!

Oh, sorry... one other thing. I just noticed in the README you redirect people to the website for documentation. It's fine to link to the website of course, but I'd recommend putting at least some usage examples in the README itself so people landing there get some idea of what the project is about without having to navigate away (which might turn some people off).

Lots of good feedback here, thanks!

I especially appreciate the prefix idea. I was thinking something like that might be needed.

Aww.... i thought the library decided for itself whether to use light captions or dark ones based on the image. Still pretty cool stuff!

Btw don't listen to the Nay-sayers. I am a programmer but my css sucks and i for one find this very very helpful.

I really wish the pages for projects like these would devote even a small section of their documentation to accessibility. I know it's not usually top of mind, and not everyone is bound by Sec508, but it is an oft-ignored best practice.

I'm not saying this is inaccessible - it looks like it would be okay at least as far as screen readers are concerned, though there may be color contrast issues depending on the image (here's an idea for a cool project - analyze the image and set a color on the caption that meets WCAG AA contrast ratios). It's just every time I see a some cool new css/js wizardry, the only way I can find out whether there's any accessibility compliance is to poke through the rendered markup, test out hover states, etc.

Looks simple and cool, thanks for sharing!

How does this support touch devices? Do they have to tap on the picture to see the caption, or does it show up automatically? I could see that being an issue if clicking on the image also brings up a full-size version of the image.

Frankly, it isn't very mobile/touch friendly right now. That is one of the issues I'd like to address next.

For now, I'd recommend not using the overlay or reveal/reveal-smooth options if you are aiming for a mobile audience.

Looks very pretty, as does the semantic markup. Personally I'd prefer it if there was a little less alpha, e.g. on the Malta pic the text isn't so clear...

I played around with different alpha values. I also created the themes (neutral, light and dark) to help with this.

Do you think it would still be better to bump the alpha value up to 0.8 or so?

I just had a play myself and I like somewhere between 0.8 and 0.85. I'm not a designer though and lean a lot more towards clarity vs style.

When using it I wouldn't want to have to manually pick a theme based on the pic, as it would probably be a database gallery - but a choice of themes is great to have.

This is a good point, I will have to have a heart to heart with the alpha value.

Looks really nice! The animations are slick and the implementation seems simple enough.

It'd help to include at least basic support for some older browsers -- there are still a decent number of users on IE8, for example, but you seem to support only 9+.

Hmm, how would one pop to the first page for ones open source tools? Asking because I'd like it to :(

You have to get started somewhere. Cheers for putting your neck out. Demo renders alright on my iPhone.

Quite nice. You can think about touch interactions (maybe you have, but it was not working on iPhone)

It would be good for it to support animations (fade in/out, slide up/down etc...).

It already supports fading in and out with CSS animations. I was thinking of adding slide up/down animations, but am not sure of a good way to implement this.

Use CSS transforms. Unlike absolute positioning, percentages with a transform bases the resulting value off the transformed element's size. So something like this:

  figure figurecaption { 
    transition: all 0.4s;
    transform: translateY(100%);
  }
  figure:hover figurecaption { transform: none; }

Will get you the effect you want.

Nice start!

What would be really cool: slideshow of several images + captions.

Do you think this could be accomplished with just CSS? It seems to me that this would be a stretch for CSS, but I am not extremely well versed in CSS animations.

http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

Just what I needed, thanks for creating and sharing it!

Glad to hear it will be of use. Send me a link if it ends up in production anywhere.

Reply on news.ycombinator.com