Firefox-केवल मिनिमैप (2021)

 (stefanjudis.com)
1 पॉइंट द्वारा GN⁺ 2023-07-18 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Firefox desktop उपयोगकर्ताओं को ही दिखने वाला ब्लॉग मिनिमैप, Firefox के कम 4% market share के बावजूद browser-specific CSS feature को experiment करने का एक उदाहरण है
  • इसका मुख्य आधार Firefox द्वारा ही समर्थित element() CSS function है, और वास्तविक implementation में vendor-prefixed -moz-element() का उपयोग किया गया है
  • यह function किसी भी HTML element को image की तरह दिखाता है, फिर भी text selection, scroll, और lazy-loading images में होने वाले बदलावों को real time में reflect करता है
  • मिनिमैप background को CSS की एक लाइन #main DOM node को background के रूप में draw करती है, और current viewport box को move कराने में JavaScript भी साथ इस्तेमाल होता है
  • Firefox-only feature का उपयोग करने पर अलग canvas rendering के बिना page के एक हिस्से को मिनिमैप background के तौर पर reuse किया जा सकता है

Firefox-केवल element() आधारित मिनिमैप

  • ब्लॉग पोस्ट का मिनिमैप Firefox desktop users को दिखने वाला feature है, और Firefox का market share फिलहाल 4% बताया गया है
  • Firefox CSS element() function को support करने वाला एकमात्र browser है, और वास्तविक उपयोग में vendor prefix की जरूरत होती है
  • element() function page के अंदर किसी भी HTML element को image की तरह दिखा सकता है
    • दिखाया जाने वाला target static screenshot नहीं, बल्कि live image की तरह काम करता है
    • text selection या scroll के दौरान lazy-loading image के दिखाई देने जैसे बदलाव भी reflect होते हैं

Implementation तरीका

  • किसी दूसरे HTML element को background image के रूप में define करने वाली CSS इस रूप में है
mini-map .screen-image .canvas {
  background: white -moz-element(#main) no-repeat scroll center center / contain;
}
  • -moz-element(#main) #main DOM node को मिनिमैप की background image के रूप में draw करने का काम करता है
  • मिनिमैप के अंदर current viewport box को move करने में JavaScript भी इस्तेमाल होता है, लेकिन किसी दूसरे DOM node को draw करने का core काम CSS की एक ही line करती है
  • Firefox में -moz-element का उपयोग करके page के एक हिस्से को मिनिमैप की तरह दिखाया जा सकता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-07-18
Hacker News की राय

  • 10 साल पहले मैंने DOM elements को कागज़ की तरह मोड़ने वाली खिलौना जैसी JS library https://oridomi.com बनाई थी, और उम्मीद थी कि हर fold पर nodes को उबाऊ तरीके से clone करने के बजाय element() का इस्तेमाल हो पाएगा
    10 साल बाद भी यह niche CSS feature दूसरे browsers में adopt नहीं हुआ है, और उसी समय की CSS custom filters specification के बारे में भी लगा था कि जल्द ही इस्तेमाल कर पाएंगे, लेकिन उसे भी अभी तक traction नहीं मिला

    • मेरी जानकारी में browser makers ने CSS custom filters specification देखकर तय किया कि इसे सुरक्षित रूप से implement करना बहुत मुश्किल है
      एक तरफ, यह समझ आता है कि सुरक्षित नहीं बनाया जा सकता तो feature छोड़ दिया जाए, लेकिन दूसरी तरफ मैं सचमुच CSS custom filters चाहता था, और आज भी अक्सर सोचता हूं कि उससे क्या-क्या किया जा सकता था
      https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

  • जिन editors में minimap होता है, उनमें सबसे पहले उसे बंद कर देता हूं
    Coding में यह लगभग सबसे बेकार feature है, और sites पर भी करीब-करीब उतना ही बेकार लगता है। Content इतना छोटा होता है कि समझना मुश्किल होता है कि कहां जा रहे हैं; छोटी page हो या लंबी, screen space की कमी या distraction के मुकाबले इसका फायदा नहीं दिखता, और अच्छे descriptive titles वाला ठीक-ठाक index या search feature page navigation के लिए कहीं बेहतर है
    Minimap जहां cool हो सकता है, वह बड़ी images या maps जैसी मूल रूप से visual चीजें हैं; zoomed in होने पर पूरे में आप कहां देख रहे हैं, यह पता चलना उपयोगी होता है। Future के लिए cool feature है, लेकिन यह implementation खास अच्छी नहीं लगती

    • मैं इसे चालू रखता हूं। Mouse या trackpad जैसे pointing device से scroll करते समय यह बड़े scrollbar की तरह काम करता है
      आजकल operating systems scrollbars को छिपाने या जितना हो सके छोटा बनाने की कोशिश करते हैं, और minimap उस समस्या को हल करते हुए file content का visual shape भी थोड़ा दिखा देता है। Text पढ़ा नहीं जा सकता, लेकिन जिस file पर लंबे समय से काम किया हो, उसमें आप क्या देख रहे हैं यह ठीक-ठीक पता चल जाता है
    • मैं इसे बिल्कुल उलटे तरीके से इस्तेमाल करता हूं। लंबी files से अक्सर काम पड़ता है, इसलिए minimap को काफी बेहतर scrollbar की तरह बहुत इस्तेमाल करता हूं
      सीधे उसे देखना कम ही होता है, लेकिन वह नजर के दायरे में रहता है, इसलिए अनजाने में अक्सर उस पर नजर दौड़ जाती है। ऐसे features साफ तौर पर सबके लिए नहीं होते, लेकिन पसंद नहीं है इसलिए उसे बेकार मानना गलती है
    • मकसद छोटे अक्षर पढ़ना नहीं, बल्कि code का shape देखना है
      उदाहरण के लिए VSCode minimap में errors को लाल रंग में साफ दिखाता है, इसलिए उस जगह पर जाना आसान हो जाता है
    • Minimap classic scrollbar की preview functionality को बेहतर बनाने के लिए भी अच्छा हो सकता है
      Scrollbar page की लंबाई बताता है, जिससे तय कर सकें कि पढ़ना जारी रखना है या नहीं; लेकिन minimap “छोटे लेख के बाद कई pages के ऐसे comments लगे हैं जिन्हें ignore किया जा सकता है” और “लेख शुरू से ही पढ़ने के लिए बहुत लंबा है” में फर्क करने में मदद करता है
    • मुझे minimap काफी पसंद है। यह अनिवार्य नहीं होना चाहिए, और कोई इसे बंद क्यों करना चाहेगा, यह पूरी तरह समझता हूं। यह काफी जगह लेता है, और जो लोग files को अक्सर split करके देखते हैं उनके लिए काफी खटक सकता है
      लेकिन मैं code को visual और spatial तरीके से सोचता हूं और files को तब तक नहीं बांटता जब तक जरूरत न पड़े, इसलिए file का “shape” देखकर तेजी से navigate करने में मदद मिलती है। खासकर जब file साफ sections में बंटी हो
      बड़ी images या maps पर भी सहमत हूं। ज्यादातर image editors में ऐसा viewport feature होता है, और detail work करते समय यह काफी उपयोगी होता है

  • इसका उपयोग दिखता है, लेकिन यह काफी wild है। Text select करने पर यह real-time update होता है, और लगभग उसी content की ओर दिखने वाले अलग viewport जैसा लगता है
    Use cases और implications के बारे में सोच रहा हूं; offscreen या overflow:hidden tricks से छिपाए गए elements पर भी इसे काम कराया जा सकता है। हालांकि जहां तक मुझे पता है, बिना library के उस element को image में बदलने का तरीका अभी नहीं है, शायद privacy की वजह से
    MDN page काफी छोटा है, इसलिए बहुत सवाल हैं। CSS filters और distortions को सीधे element पर apply किया जा सकता होगा, लेकिन क्या इसे background की तरह handle किया जाना नई संभावनाएं खोलेगा? यह लंबे समय से मौजूद है फिर भी पहली बार सुन रहा हूं, और पता नहीं था कि ऐसा feature CSS candidate में रहा होगा। अगर सिर्फ Firefox को target करें और Chrome की परवाह न करें, तो viewport duplication से आगे इसके कितने उपयोग होंगे, यह जानने की उत्सुकता है

    • Mirror, magnifier, screen के बाहर मौजूद page के किसी हिस्से को लगातार visible बनाए रखना आदि जैसे cool uses काफी हो सकते हैं
      उदाहरण के लिए editing में इस्तेमाल हो सकता है, और शायद कई use cases छूट रहे हों। मूल रूप से जरूरी features नहीं हैं, लेकिन अपने-अपने तरीके से cool हैं

  • हर दिन सिर्फ Chrome में चलने वाली sites मिलती हैं। अब पलटवार का समय है :)

    • मैं सिर्फ Firefox इस्तेमाल करता हूं और काफी सामान्य तरीके से web browse करता हूं, लेकिन ऐसा लगभग कभी नहीं होता। महीने में एक बार से भी बहुत कम, शायद 3 महीने में एक बार के आसपास
    • क्या यह regional चीज हो सकती है? मेरे लिए तो यह बहुत कम होता है। हालांकि नियमित रूप से इस्तेमाल की जाने वाली कुछ Google sites Firefox में Chrome से ज्यादा खराब चलती हैं
    • Firefox में, Mac और Linux दोनों पर, कुछ checkboxes बिल्कुल दिखाई नहीं देने की समस्या थी
      पिछले महीने American Airlines की international flight के check-in के दौरान Firefox में जरूरी checkboxes नहीं दिखे, इसलिए check-in process खत्म नहीं कर पाया; Chrome में वे दिखते हैं, यह पता चलने के बाद ही आगे बढ़ सका
    • ऐसी site मिलने पर गुस्सा आता है। खासकर 2023 में इसका कोई बहाना नहीं
      Vanguard website के ज्यादा obscure pages पर console errors के साथ टूटते देखा, और Chrome पर switch करने पर वे चलने लगे
    • सही। पहले Firefox को बाधित करने वाली open source sabotage की अफवाहें या बातें याद आती हैं
      कई बार देखता हूं कि जो pages Firefox में ठीक चलती थीं, वे अब नहीं चलतीं, और कभी-कभी दूसरा browser खोलना पड़ता है। उम्मीद है सच में ऐसा नहीं है। Default के तौर पर Firefox ही इस्तेमाल करता हूं

  • हैरानी है कि element() Firefox में 2011 से -moz- के साथ पूरी तरह supported रहा है, लेकिन दूसरे browsers में तो शायद partial support भी नहीं है https://caniuse.com/css-element-function
    अगर cross-browser support होता, तो minimap के अलावा भी कुछ दमदार use cases दिमाग में आते हैं। अगर कोई Chrome या WebKit टीम से जुड़ा है, तो वजह जानने की उत्सुकता है। जानना चाहूंगा कि क्या interest की कमी है, अच्छे performance के साथ implement करना मुश्किल है, या कोई पेचीदा security issue है

    • Chromium-based browsers में element() के काम का कुछ हिस्सा करने वाला -webkit-box-reflect है https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
      खास तौर पर यह element के reflection को handle करता है। निजी तौर पर मुझे लगता है कि -moz-element का सबसे बड़ा use case भी वही reflection है

  • minimap भी प्यारा है, लेकिन tab को 3 मिनट तक idle छोड़ने पर चालू होने वाला screen saver और मजेदार है
    अच्छा लगता है कि web में अभी भी ऐसी शरारती creativity बची हुई है

  • यह feature ऐसी sites जो जानबूझकर basic browser features तोड़ती हैं, जैसे right-click image save या text selection, उनके लिए बहुत ज्यादा misuse करने लायक लगता है
    अगर पूरी page को background image की तरह render कर दें, तो content को inspect, save या translate करना अब संभव नहीं रहेगा। यह बस पहला example है जो दिमाग में आया; लगता है इस function से readers को परेशान करने के लिए हर तरह के malicious तरीके हो सकते हैं

    • मैं सहमत हूं कि इसका misuse हो सकता है, लेकिन दिया गया example सही नहीं है। जिन features की बात की गई है उन्हें पहले से ही बहुत थोड़े CSS या JS से block किया जा सकता है, इसलिए element canvas तक complicate करने की जरूरत नहीं है
      ज्यादातर websites ऐसा इसलिए नहीं करतीं कि वे कर नहीं सकतीं, बल्कि इसलिए कि वे वास्तव में ऐसा करना नहीं चाहतीं; और खराब websites को users के competitors के पास चले जाने की economic penalty मिलती है
      हालांकि, company intranet portals या खराब local government sites जैसे non-free-market क्षेत्रों में यह principle ठीक से काम नहीं करता, इसलिए user-hostile चीजें ज्यादा दिखती हैं। आम तौर पर यह सोचना गलती है कि website operators को जानबूझकर restrict करने से websites का level बेहतर होता है; असल में उल्टा सही है

  • बड़े लेखों में minimap कितनी अच्छी तरह काम करता है, यह impressive है। Randomly click करते हुए मैं https://www.stefanjudis.com/notes/should-responsive-images-w... पर पहुंच गया, और minimap तुरंत दिखा तथा text selection जैसी actions पर भी synchronously update हुआ, जिससे थोड़ा जादू जैसा लगा
    यह थोड़ा अफसोस की बात है कि Sublime Text की तरह minimap को manipulate करके scroll नहीं कर सकते, लेकिन website author के नज़रिये से इसे implement करना शायद ज्यादा मुश्किल होगा। फिर भी web पर ऐसा कर पाना बहुत cool है, और उत्सुकता है कि इस complex CSS feature को Chrome या Safari में support करने के लिए कितना काम लगेगा

    • अजीब है कि original post में तो ठीक दिखता है, लेकिन इस article में नहीं दिख रहा। शायद extension की वजह से?

  • GPU और Chrome के video decoding के बीच अजीब incompatibility के कारण पिछले 1 साल से Firefox इस्तेमाल कर रहा हूं
    frame drops होते थे और YouTube quality गिर जाती थी। Firefox में सचमुच अच्छा web translator न होना छोड़कर कोई बड़ी problem महसूस नहीं हुई। -moz-element अच्छा लगता है, और अच्छा होगा अगर यह दूसरे browsers में भी आ जाए

    • Opera के practically खत्म होने के बाद से मैं Firefox इस्तेमाल करता आया हूं, लेकिन पिछले 3–6 महीनों में Vivaldi को सचमुच गंभीरता से आजमाने की कोशिश की
      मुख्य वजह यह थी कि इसमें built-in portable version मिलता है, जो सिर्फ folder देखकर profile पहचान लेता है, इसलिए sync के लिए बहुत अच्छा है। लेकिन यह बहुत slow है। CPU बहुत खाने वाले mail और feeds बंद करने पर भी इसे तेज नहीं बना पाया, और Firefox पर वापस आकर साफ-सफाई की तो यह इतना snappy लगा कि normal, dev, media तीन profiles और bookmarks से बाकी काम निपटाना बेहतर लगा
      Vivaldi के UI options और configurability शानदार हैं, लेकिन Tree Style Tabs, कुछ add-ons और UI CSS hacking जोड़ने के बाद Firefox फिर से मेरा main browser बन गया, और मैं मानो कुछ हुआ ही नहीं ऐसे चल रहा हूं
      हालांकि काश Firefox compiled WebGL shaders को cache करे। इस मामले में Chrome बहुत आगे है। शायद settings से tweak किया जा सके, लेकिन मैंने check नहीं किया; default state में shader-heavy pages reload करते समय Chrome mobile पर भी लगभग तुरंत खत्म कर देता है, जबकि Firefox में shader के हिसाब से काफी समय लग सकता है

  • अब अगर “Chrome/Edge में सबसे अच्छा काम करता है” के बजाय Firefox में सबसे अच्छा काम करता है दिखना शुरू हो, तो अच्छा लगेगा