5 ms·

This question is so wrong on so many levels

klibertp 8y ago
I have a blog. It's a set of static pages, generated offline and served via Nginx. There's nothing dynamic there and the content is perfectly readable in lynx. Once in a blue moon, I want to add a screenshot or other image to a post. Such images are of various sizes, mostly larger than the (max)width of the content. I use CSS to scale them down to fit with the text, but sometimes images displayed like that are too tiny to be legible. For a long time I handled this case by wrapping <img> with <a>, basically like this: <a href="$IMG_SRC"><img src="$IMG_SRC" alt="" /></a> It works, and I like it, but it has a couple of drawbacks, most important being that it's kind of intrusive - by clicking it, you change the current url, and when you get back, even if your browser scrolls the page correctly, you need to find the place where you stopped reading. At some point, I gave up and included a bit of JavaScript, which enlarges the image while you stay on the same page. I used some kind of fancybox derivative - a jQuery plugin. Now tell me that I should've used React.
- ben509 8y ago
  The choice of tooling has to be dictated by actually delivering a product, even if it's open source. If JQuery met your needs at the time, and your personal preferences and experience are nonfunctional requirements, it was the right call. That doesn't mean that in the future you won't grow beyond that, but having to transition a production system to a new technology is fundamentally a good problem to have.
- aarpmcgee 8y ago
  React and Redux are good at managing/coordinating lots of shared state. It sounds like you don’t have very much state.
- 52-6F-62 8y ago
  No. For anyone else covering the same dilemma and doesn't care about transitions: https://codepen.io/gschier/pen/HCoqh https://codepen.io/gschier/pen/HCoqh Or, reduced further: CSS .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; } .lightbox:target { outline: none; display: block; } HTML <a href="#img1"> <img src="image.png" class="thumbnail"> </a> <a href="#_" class="lightbox" id="img1"> <img src="image.png"> </a> As is, CSS is ~321 bytes (See CodePen link for code credit. Pretty clever little item, if you don't have to parse the pure markup. Even then it's not overly intrusive.) Source: I'm currently building out my own Javascript-light blog/cv site, even though I generally like working with React. It's just not needed for everything. I'll likely extend on this at least a bit for some nicer effect with some current Javascript— barring older browsers from the lightbox effect but still able to read the thing in lynx and if need-be.
  - klibertp 8y ago
    Sweet! Thank you very much, I'll definitely check it out!
    - 52-6F-62 8y ago
      No problem! My only qualm is it messes with the browser history— but that's no worse than linking to the full-sized image. It shouldn't affect screen readers or Lynx users too much. I also highly recommend Spectre CSS! I've been toying with it, and it seems like great work. I suggest checking out the "experimental" features. https://picturepan2.github.io/spectre/index.html https://picturepan2.github.io/spectre/index.html

I have a blog. It's a set of static pages, generated offline and served via Nginx. There's nothing dynamic there and the content is perfectly readable in lynx. Once in a blue moon, I want to add a screenshot or other image to a post. Such images are of various sizes, mostly larger than the (max)width of the content. I use CSS to scale them down to fit with the text, but sometimes images displayed like that are too tiny to be legible. For a long time I handled this case by wrapping <img> with <a>, basically like this: <a href="$IMG_SRC"><img src="$IMG_SRC" alt="" /></a> It works, and I like it, but it has a couple of drawbacks, most important being that it's kind of intrusive - by clicking it, you change the current url, and when you get back, even if your browser scrolls the page correctly, you need to find the place where you stopped reading. At some point, I gave up and included a bit of JavaScript, which enlarges the image while you stay on the same page. I used some kind of fancybox derivative - a jQuery plugin. Now tell me that I should've used React.

ben509 8y ago
The choice of tooling has to be dictated by actually delivering a product, even if it's open source. If JQuery met your needs at the time, and your personal preferences and experience are nonfunctional requirements, it was the right call. That doesn't mean that in the future you won't grow beyond that, but having to transition a production system to a new technology is fundamentally a good problem to have.
aarpmcgee 8y ago
React and Redux are good at managing/coordinating lots of shared state. It sounds like you don’t have very much state.
52-6F-62 8y ago
No. For anyone else covering the same dilemma and doesn't care about transitions: https://codepen.io/gschier/pen/HCoqh https://codepen.io/gschier/pen/HCoqh Or, reduced further: CSS .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; } .lightbox:target { outline: none; display: block; } HTML <a href="#img1"> <img src="image.png" class="thumbnail"> </a> <a href="#_" class="lightbox" id="img1"> <img src="image.png"> </a> As is, CSS is ~321 bytes (See CodePen link for code credit. Pretty clever little item, if you don't have to parse the pure markup. Even then it's not overly intrusive.) Source: I'm currently building out my own Javascript-light blog/cv site, even though I generally like working with React. It's just not needed for everything. I'll likely extend on this at least a bit for some nicer effect with some current Javascript— barring older browsers from the lightbox effect but still able to read the thing in lynx and if need-be.
- klibertp 8y ago
  Sweet! Thank you very much, I'll definitely check it out!
  - 52-6F-62 8y ago
    No problem! My only qualm is it messes with the browser history— but that's no worse than linking to the full-sized image. It shouldn't affect screen readers or Lynx users too much. I also highly recommend Spectre CSS! I've been toying with it, and it seems like great work. I suggest checking out the "experimental" features. https://picturepan2.github.io/spectre/index.html https://picturepan2.github.io/spectre/index.html