Extracts the url of the largest image from a `srcset-w`

extract-largest-image.rb

url = srcset.scan(/([^, ][^ ]+)\s+([0-9]+)w/).map{ |url, size| { 'url' => url.strip, 'size' => size.to_i } }.reduce({ 'url' => '', 'size' => 0 }){ |current, new| current = new if new['size'] > current['size'] }['url']

tests.md

Source:

https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_360/https://nicolas-hoizey.com/2003/10/gasteroprod_v1.png 360w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_670/https://nicolas-hoizey.com/2003/10/gasteroprod_v1.png 670w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_980/https://nicolas-hoizey.com/2003/10/gasteroprod_v1.png 980w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_1024/https://nicolas-hoizey.com/2003/10/gasteroprod_v1.png 1024w

Expected result: https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_1024/https://nicolas-hoizey.com/2003/10/gasteroprod_v1.png

---

Source:

https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_360/https://nicolas-hoizey.com/2002/10/doc-136.png 360w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_1024/https://nicolas-hoizey.com/2002/10/doc-136.png 1024w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_670/https://nicolas-hoizey.com/2002/10/doc-136.png 670w,
https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_980/https://nicolas-hoizey.com/2002/10/doc-136.png 980w

Expected result: https://res.cloudinary.com/nho/image/fetch/c_limit,f_auto,q_auto,w_1024/https://nicolas-hoizey.com/2002/10/doc-136.png

---

Source:

https://example.com/some-small-image.jpg 320w, https://example.com/some-larger-image.jpg 640w, https://example.com/some-huge-image.jpg 2000w, https://example.com/some-large-image.jpg 980w

Expected result: https://example.com/some-huge-image.jpg

Eeeeh voilà ça plante vu ton reduce incorrect.

Mais au lieu de faire un map/reduce tu peux faire un reduce direct…

@nhoizey v'là la bonne version :

def extract_largest_image(srcset)
  srcset
    .scan(/(\S+)\s+(\d+)w/)
    .map { |url, size| { url: url.strip, size: size.to_i } }
    .inject { |acc, cur| acc[:size] < cur[:size] ? cur : acc }[:url]
end

Explications :

• Tu peux simplifier ta regex de scan en partant du principe que ton URL ne contient pas de whitespace : ton groupe URL se résume donc à \S+.
• Préfère les symboles aux Strings pour tes hashes, c'est plus idiomatique la plupart du temps. La syntaxe x: y dans un contexte de hash équivaut à :x => y.
• Si tu ne passes pas de valeur initiale à inject (nom "rubyesque" de reduce, qui en est l'alias), il prendra le premier élément comme accumulateur et démarrera l'itération au second, ce qui nous va parfaitement (idem en JS)
• Dans un callback de réduction, le premier arg est l'accumulateur / résultat, le deuxième la valeur courante. On ne parle jamais de cur et new, sémantiquement ; en plus, new est mal vu comme identifiant car c'est normalement réservé à l'opérateur d'instantiation des classes (ex. Person.new )
• L'itérateur d'un reduce doit toujours renvoyer l'accumulateur, même s'il n'a pas changé. C'est là où tu foirais ; le fait de réaffecter cur n'avait d'ailleurs aucun intérêt (référence bloc-locale), ce qui compte c'est la valeur de retour du bloc, donc de sa dernière expression évaluée, ici l'affectation (coup de bol dans un cas de série croissante)

Voilou…

Wow, c'est plus simple, plus clean, et super bien expliqué au point que j'ai tout compris… o_O

MERCI !!!!