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

by jbranchaud • 13 years ago

51 35 13 years ago

jbranchaud11• 13 years ago

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).

gwkoehler• 13 years ago

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

ucarion• 13 years ago

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

jbranchaud11• 13 years ago

Good thinking, just added one!

avighnay• 13 years ago

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?

davedx• 13 years ago

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

amarcus• 13 years ago

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

jbranchaud11• 13 years ago

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.

lylepstein• 13 years ago

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.

dustyneuron2• 13 years ago

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...

jbranchaud11• 13 years ago

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?

dustyneuron2• 13 years ago

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.

jtheory• 13 years ago

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+.

javajosh• 13 years ago

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.

jbranchaud11• 13 years ago

Good catch! I'll fix that.

netnichols• 13 years ago

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).

woah• 13 years ago

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'.

jbranchaud11• 13 years ago

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.

beachstartup• 13 years ago

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.

porker• 13 years ago

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

publicfig• 13 years ago

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.

jbranchaud11• 13 years ago

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.

xerophtye• 13 years ago

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.

ssully• 13 years ago

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

hrjet2• 13 years ago

Nice start!

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

jbranchaud11• 13 years ago

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.

hrjet2• 13 years ago

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

Ingon• 13 years ago

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

atteeela• 13 years ago

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

jbranchaud11• 13 years ago

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

seivan• 13 years ago

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

tutt• 13 years ago

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

jimhart3000• 13 years ago

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.

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

Related Stories