Hello.

मेरे पास दुनिया के सबसे सरल स्क्रीन रिकॉर्डिंग सॉफ़्टवेयर के निर्माण का एक लक्ष्य है और मैं पिछले कुछ महीनों से परियोजना पर धीरे-धीरे नूडल बना रहा हूं (मेरा वास्तव में धीरे-धीरे मतलब है)। पिछले पोस्टों में मुझे सभी इनपुट स्रोतों से प्राप्त धाराओं के बारे में screen recording and a voice overlay मिला था। हालांकि निराशा का एक क्षेत्र यह था कि मैं यह काम नहीं कर सकता था कि डेस्कटॉप से ऑडियो कैसे प्राप्त किया जाए * और * स्पीकर से ऑडियो को ओवरले करें। मैंने आखिरकार यह कैसे काम किया।

मेरे पास Google IO के बाद का समय थोड़ा कम था और मैं एक लंबी अवधि की खुजली को दूर करना चाहता था। मैं बस उस पाठ की प्रतिलिपि बनाना चाहता हूं जो ब्राउज़र में छवियों के अंदर होता है। बस इतना ही। मुझे लगता है कि यह सभी के लिए एक साफ सुथरा फीचर होगा। सीधे क्रोम में कार्यक्षमता जोड़ना आसान नहीं है, लेकिन मुझे पता है कि मैं एंड्रॉइड पर इरादे प्रणाली का लाभ उठा सकता हूं और अब मैं वेब के साथ (या कम से कम क्रोम एंड्रॉइड पर) कर सकता हूं।

नवीनतम सफारी के लिए बड़े अपडेट! मैंने सोचा था कि यह एक बहुत बड़ी घोषणा थी, और Google के विपरीत जो कुछ समय पहले कहा गया था कि Google पे लीब पेमेंट को लागू करने का तरीका है … मेरा मतलब है कि यह एक लाख मील दूर नहीं है, Google पे सबसे ऊपर बनाया गया भुगतान का अनुरोध, लेकिन यह पहले पीआर नहीं है। Payment Request is now the recommended way to pay implement Apple Pay on the web.

वर्षों पहले, मैंने कुछ शोध किया कि कैसे नेटवर्क्स कनेक्टिविटी ने नेटवर्क कनेक्टिविटी की कमी का जवाब दिया। जब तक मैंने विश्लेषण के लिंक को खो दिया है (मैं यह Google+ पर शपथ ले सकता था), ओवररचिंग कथा यह थी कि कई देशी अनुप्रयोगों को इंटरनेट से अटैच किया जाता है कि वे सीधे कार्य करने से इनकार करते हैं। बहुत सारे वेब ऐप की तरह लगता है, जो चीज़ उन्हें वेब से अलग करती है, हालांकि यह अनुभव अभी भी 'ऑन-ब्रांड' है, बार्ट सिम्पसन आपको बताएगा कि आपको ऑनलाइन (उदाहरण के लिए) होने की आवश्यकता है, और अभी तक अधिकांश वेब अनुभव आपको एक 'डिनो' (क्रोम: // डिनो देखें) मिलते हैं।

मैंने Hugo आधारित संपादक द्वारा अपडेट किया गया है और संपादकजेस के रूप में, साथ ही, ब्लॉग के लिए संपादक का उपयोग करने का प्रयास किया है। Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core.

हम हाल ही में फीचर फोन पर बहुत विकास कर रहे हैं और यह कठिन, लेकिन मजेदार है। सबसे कठिन बिट यह है कि KaiOS पर हमें वेब पेजों को डिबग करना असंभव लगता है, विशेषकर उस हार्डवेयर पर जो हमारे पास था (नोकिया 8110)। नोकिया एक बेहतरीन डिवाइस है, इसे KaiOS के साथ बनाया गया है, जिसे हम जानते हैं कि यह फ़ायरफ़ॉक्स 48 के समान कुछ पर आधारित है, लेकिन यह बंद है, जैसा कि आप अन्य एंड्रॉइड डिवाइस पर प्राप्त करते हैं, कोई पारंपरिक डेवलपर मोड नहीं है, जिसका अर्थ है कि आप फ़ायरफ़ॉक्स कनेक्ट नहीं कर सकते आसानी से वेबाइड।

मैं क्रोम में Shape Detection API साथ बहुत कुछ खेल रहा हूं और मुझे वास्तव में यह पसंद है, उदाहरण के लिए एक बहुत ही सरल QRCode detector मैंने बहुत पहले लिखा था एक JS new BarcodeDetector() , लेकिन उपलब्ध है तो new BarcodeDetector() एपीआई का उपयोग करता है। आप आकार का पता लगाने की एपीआई की अन्य क्षमताओं का उपयोग करके यहां बनाए गए कुछ अन्य डेमो देख सकते हैं: Face Detection , Barcode Detection और Text Detection ।

मैंने एक अच्छा चूम और सहकर्मी, Mariko एक ट्वीट को देखा, Mariko आपको कम अंत वाले उपकरणों की एक श्रेणी में परीक्षण करने के बारे में बताया गया था। ट्वीट का संदर्भ यह है कि हम देख रहे हैं कि उपयोगकर्ताओं के लिए निर्माण करते समय वेब डेवलपमेंट कैसा होता है जो इन कक्षाओं के उपकरणों पर दैनिक रहता है। टीम अब इस अंतरिक्ष में बहुत काम कर रही है, लेकिन मैंने एक दिन एक साइट का निर्माण करने में बिताया है और प्रदर्शन के कुछ हद तक उचित स्तर पर कुछ भी काम करना अविश्वसनीय रूप से कठिन था - यहां कुछ समस्याएं हैं जो मैं भाग गया:

मैं अभी कुछ work our team has done पर विचार कर रहा था और मुझे 2017 का एक प्रोजेक्ट मिला, जिसे रॉबर्ट निमन और एरिक बिडेलमैन ने बनाया। Browser Bug Searcher! । यह अविश्वसनीय है कि बस कुछ प्रमुख प्रेस के साथ आपको सभी प्रमुख ब्राउज़र इंजनों में अपनी पसंदीदा विशेषताओं का एक बड़ा अवलोकन है। Source code available । यह वास्तव में उन मुद्दों में से एक को उजागर करता है जो मेरे पास crbug और webkit बग ट्रैकर्स के साथ हैं, उनके पास RSS जैसे प्रारूपों में डेटा का फीड प्राप्त करने का सरल तरीका नहीं है। मैं बग श्रेणियों आदि के साथ अपने topicdeck एग्रीगेटर का उपयोग करने में सक्षम होना पसंद topicdeck इसलिए मेरे पास उन सभी चीजों का एक डैशबोर्ड है, जिनकी मैं प्रत्येक बग ट्रैकर्स से नवीनतम जानकारी के आधार पर रुचि रखता हूं।

मैं https://www.webcomponents.org/ पर एक त्वरित https://www.webcomponents.org/ संपादक की तलाश में https://www.webcomponents.org/ ताकि मैं इस ब्लॉग को पोस्ट करना आसान बना https://www.webcomponents.org/ और मैं github द्वारा घटकों के एक स्वच्छ सेट में ठोकर खाई। मुझे पता था कि उनके पास काम करने का <time-element> लेकिन मुझे नहीं पता था कि उनके पास उपयोगी तत्वों का इतना अच्छा और सरल सेट है।

आज थोड़े अच्छे लग रहे हैं।

जिस तरह से हम (एक उद्योग के रूप में) जीडीपीआर सहमति को लागू करते हैं वह एक गड़बड़ है। मुझे यकीन नहीं है कि कोई भी 'केवल आवश्यक कुकीज़ का उपयोग करें' के अलावा कुछ और क्यों चुन सकता है, हालांकि मैं वास्तव में किसी भी विकल्प के विकल्प और व्यापार-बंद के बीच का अंतर नहीं बता सकता, न कि यह उल्लेख करने के लिए कि मैं केवल यह सत्यापित कर सकता हूं केवल आवश्यक कुकीज़ का उपयोग करना।

इतिहास इस गड़बड़ पर हम सभी का न्याय करेगा, और मुझे उम्मीद है कि यह राष्ट्रवाद, स्व-हितों, औपनिवेशिक-पितृ, सेलिब्रिटी-बाफूनरी के प्रभावों पर सभी के लिए एक केस अध्ययन होगा। Fuckers।

सफारी टीम पर रिकी मोंडेलो ने हाल ही में एक नोट साझा किया था कि ट्विटर कैसे ./well-ogn/change-password कल्पना का उपयोग कर रहा है। I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it? Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url Read full post । फीचर ने मुझे पूरी तरह से पास कर दिया, लेकिन यह एक अच्छा विचार है: एक प्रसिद्ध स्थान पर एक फ़ाइल दी गई है, क्या ब्राउज़र उपयोगकर्ता को एक यूआई प्रदान कर सकता है जो उन्हें साइटों को जटिल यूआई नेविगेट करने के लिए बिना अपना पासवर्ड रीसेट करने की अनुमति देता है।

जेक और टीम ने ब्राउजर के खुद के पिंच-ज़ूम डायनामिक्स (मोबाइल व्यूपोर्ट जूमिंग के बारे में सोचें) के बाहर HTML के किसी भी सेट पर चुटकी जूमिंग को प्रबंधित करने के लिए यह बल्कि भयानक कस्टम तत्व बनाया। तत्व उन केंद्रीय घटकों में से एक था, जिन्हें हमें Chrome देव शिखर सम्मेलन में बनाए गए और जारी किए गए squoosh ऐप के लिए आवश्यक था … (मैं कहता हूं कि 'क्रोम देव शिखर सम्मेलन में रिलीज़' - जेक चीन के Google डेवलपर दिवस पर सभी को दिखा रहा था भले ही टीम के बाकी सदस्य शर्मिंदा थे;) …)

पीट LePage ने वेब शेयर लक्ष्य एपीआई और एक मूल परीक्षण के माध्यम से क्रोम में उपलब्धता का परिचय दिया Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button. Read full post ।

वेब पर अच्छे पुश सूचनाओं पर थॉमस स्टेनर द्वारा एक शानदार लेख और वीडियो और नमूना। A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications.

Kayce Basques, हमारी टीम के एक भयानक तकनीकी लेखक ने अपने अनुभवों के बारे में एक बहुत ही अद्भुत लेख लिखा है, जो यह मापता है कि तकनीकी सामग्री की व्याख्या करने के लिए मौजूदा प्रलेखन सर्वोत्तम-व्यवहार कैसे काम करते हैं। इस अर्थ में सर्वोत्तम अभ्यास तकनीकी लेखन के लिए प्रसिद्ध उद्योग मानक हो सकते हैं, या यह आपकी अपनी कंपनी हो सकती है जो शैली गाइड लिख रही है। इसकी जांच - पड़ताल करें!

मैं Google डेवलपर दिवस के लिए कुछ हफ्ते पहले चीन में था और मैं अपने सभी क्यूआरकोड स्कैनर को दिखा रहा था, जब तक मैं ऑफ़लाइन नहीं जाता तब तक यह बहुत अच्छा काम कर रहा था। जब उपयोगकर्ता ऑफलाइन था (या आंशिक रूप से कनेक्ट) कैमरा शुरू नहीं होगा, जिसका मतलब था कि आप क्यूआर कोड को स्नैप नहीं कर सके। यह हुआ कि काम करने के लिए मुझे उम्र बढ़ गई, और यह पता चला कि मैं गलती से कैमरे को अपने ‘ऑनलोड’ ईवेंट में शुरू कर रहा था और Google Analytics अनुरोध समय-समय पर हल होगा और हल नहीं होगा। यह यह प्रतिबद्धता है जो इसे ठीक करता है।

सप्ताहांत में मैं बुमेरांग प्रभाव वीडियो एन्कोडर के साथ खेल रहा था, आप इसे वास्तविक समय में काम कर सकते हैं (मैं बाद में समझाऊंगा)। मुझे यह डेस्कटॉप पर क्रोम पर काम कर रहा है, लेकिन यह एंड्रॉइड पर क्रोम पर ठीक से काम नहीं करेगा। [यहां कोड] देखें (0)। ऐसा लगता है कि आप 'कैप्चरस्ट्रीम () `का उपयोग करते हैं 'जिसमें अपेक्षाकृत बड़ा संकल्प है (मेरे मामले में 1280x720) MediaRecorder API वीडियो को एन्कोड करने में सक्षम नहीं होगा और यह त्रुटि नहीं होगी और आप यह नहीं पता लगा सकते कि यह समय से पहले वीडियो को एन्कोड नहीं कर सकता है।

माइक एलगन से पीडब्लूए के बारे में एक अच्छी पोस्ट। मुझे पीडब्लूए के साथ माइक्रोसॉफ्ट के लक्ष्य के बारे में निश्चित नहीं है, लेकिन मुझे लगता है कि हमारा बहुत आसान है: हम चाहते हैं कि उपयोगकर्ता तुरंत सामग्री और कार्यक्षमता तक पहुंच सकें और एक तरह से वे अपने उपकरणों पर इसके साथ बातचीत करने में सक्षम होने की उम्मीद करते हैं। वेब को प्रत्येक कनेक्टेड डिवाइस पर सभी तक पहुंचा जाना चाहिए और उपयोगकर्ता को अपनी पसंदीदा मोडैलिटी में ऐप के रूप में पहुंचने में सक्षम होना चाहिए, अगर ऐसा है कि वे इसकी अपेक्षा करते हैं (मोबाइल, शायद), या सहायक आदि पर आवाज।

पहला मुद्दा जो मैंने पाया है वेब पर एक वीडियो संपादक बनाना। मेरे पास एकाधिक वीडियो स्ट्रीम (डेस्कटॉप और वेब कैमरा) हैं और मैं एक वीडियो तत्व पर वीडियो स्ट्रीम के बीच टॉगल करने में सक्षम होना चाहता था ताकि मैं जल्दी से वेब कैम और डेस्कटॉप के बीच स्विच कर सकूं और ‘MediaRecorder` को तोड़ न सकूं। ऐसा लगता है कि आपको 'चयनित' संपत्ति को videoTracks &#39;ऑब्जेक्ट पर&#39; चयनित &#39;संपत्ति को टॉगल करने के माध्यम से ऐसा करने में सक्षम होना चाहिए। <video>तत्व, लेकिन आप नहीं कर सकते, ट्रैक की सरणी में केवल 1 तत्व होता है (मीडियास्ट्रीम पर पहला वीडियो ट्रैक)।

मैं क्यूआरकोड्स का एक बड़ा प्रशंसक हूं, वे असली दुनिया और डिजिटल दुनिया के बीच डेटा का आदान-प्रदान करने के लिए बहुत ही सरल और साफ तरीके हैं। कुछ सालों से अब मेरे पास एक छोटी सा परियोजना है QRSnapper & mdash; ठीक है, इसमें कुछ नाम हैं, लेकिन यह वह है जिसे मैंने तय किया है & mdash; जो उपयोगकर्ता के कैमरे से लाइव डेटा लेने के लिए getUserMedia API का उपयोग करता है ताकि वह वास्तविक समय में क्यूआर कोडों के लिए स्कैन कर सके।

मुझे FFMPEG.js पसंद है, यह एक साफ उपकरण है जिसे asm.js के साथ संकलित किया गया है और यह मुझे जेएस वेब ऐप्स बनाने देता है जो वीडियो को त्वरित रूप से संपादित कर सकता है। FFMPEG.js वेब श्रमिकों के साथ भी काम करता है ताकि आप मुख्य धागे को अवरुद्ध किए बिना वीडियो एन्कोड कर सकें। मुझे भी पसंद है कॉमलिंक। कॉमलिंक चलो मैं जटिल ‘पोस्ट मैसेज’ राज्य मशीन से निपटने के बिना कार्यों और कक्षाओं को उजागर करके वेब श्रमिकों से आसानी से बातचीत कर सकता हूं।

मैं हाल ही में Google4 इंडिया ईवेंट (जल्द ही रिपोर्ट) में भाग लेने और कई व्यवसायों और डेवलपर्स से मिलने के लिए भारत की यात्रा से लौट आया। चर्चा में सबसे दिलचस्प परिवर्तनों में से एक देश में उपयोगकर्ताओं की भाषा में अधिक सामग्री के लिए धक्का था, और यह विशेष रूप से Google के सभी उत्पादों में स्पष्ट था जो उपयोगकर्ताओं की भाषा में खोजना आसान बनाने, सामग्री खोजने के लिए, और इसे टेक्स्ट या वॉइस फॉर्म में उपयोगकर्ताओं को वापस पढ़ने के लिए भी।

याद रखें जब वेब एप्स * आई * पर ऐप का उपयोग करने के लिए अनुशंसित तरीका थे? What are web apps? Learn what they are and how to use them. पूर्ण पोस्ट पढ़ें। लगभग 2013 में ऐप्पल ने / webapps / top-level निर्देशिका को / iphone / बात यह है कि निर्देशिका वास्तव में बहुत अच्छी थी, आज भी बहुत से ऐप्स आज काम करते हैं। हालांकि ऐपस्टोर को देखते हुए डेवलपर्स के पास बहुत अधिक समस्याएं हल हुईं: बेहतर खोज और विशेष रूप से खोज क्योंकि ऐपस्टोर सीधे डिवाइस पर था। ऐपस्टोर भी उपयोगकर्ताओं और डेवलपर्स से विशेष रूप से भुगतान के संबंध में हटाए गए घर्षण को पेश करना शुरू कर रहा था।

मैं शुरुआती मोबाइल वेब एपीआई के बारे में एक ब्लॉग पोस्ट लिख रहा हूं और एलेक्स रसेल ने मुझे Google गियर्स की याद दिला दी Gears modules include: LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally Database Store data locally in a fully-searchable relational database WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously पूर्ण पोस्ट पढ़ें। मुझे लगता है कि यह देखना दिलचस्प है कि ऐप कैश और वेबस्क्लुएल, जिओलोकेशन और वेबवर्कर्स Google गियर्स में विचारों से बाहर आए और यह केवल बाद वाले दो हैं जो वास्तव में जीवित रहे। WebSQL कभी व्यापक रूप से समर्थित नहीं था, और indexedDB द्वारा प्रतिस्थापित किया गया था; और AppCache ServiceWorker द्वारा प्रतिस्थापित किया गया

हम अपनी टीम में संवाद करने के लिए आंतरिक रूप से Google चैट का उपयोग करते हैं - यह हमारे ढीले की तरह है; हम आरएसएस फ़ीड के माध्यम से बहुत सी सामग्री भी उपलब्ध कराते हैं, हमारे पास एक टीम फीड भी है जिसे आप सभी देख सकते हैं। यह हाल ही में तब तक नहीं था जब मुझे पता चला कि [वेबहूक के माध्यम से एक साधारण पोस्ट-केवल बॉट] बनाना आसान था (https://developers.

रुथ जॉन क्रोम ओएस (अस्थायी रूप से) में चले गए: The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it. I have the most recent Pixel, the 256GB version. Here’s what you do. Go to settings.

मुस्तफा लिखते हैं: Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline. Designers are still finding it difficult to prove the importance of the process.

फिलिप वाल्टन के पास एक नई एपीआई में एक शानदार गहरी गोता है, जो क्रोम टीम आपको (डेवलपर) नियंत्रण देने के लिए काम कर रही है जब ब्राउज़र आपके टैब को अनलोड करता है। Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user.

पीट लीपेज क्रोम में होमस्क्रीन में जोड़ने के लिए महत्वपूर्ण बदलावों के बारे में लिखता है Add to Home Screen changes If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user. To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

Pinterest के पीडब्ल्यूए का एक शानदार अवलोकन The verdict Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.

डिफ़ॉल्ट रूप से ह्यूगो सही सामग्री प्रकार के साथ .mjs फ़ाइलों की सेवा नहीं करता है। वास्तव में यह हाल ही में तब तक नहीं था जब ह्यूगो प्रति माइम-प्रकार के एक से अधिक फ़ाइल एक्सटेंशन की सेवा कर सके। ऐसा लगता है कि v0.43 के साथ यह तय किया गया है। [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] पूर्ण पोस्ट पढ़ें। उपरोक्त कोड मुझे सही माइम-प्रकार के साथ ईएस मॉड्यूल के लिए एमजेएस फाइलों की सेवा करने देता है (नोट मॉड्यूल को ‘टेक्स्ट / जावास्क्रिप्ट’ के साथ परोसा जाना चाहिए)। यह केवल स्थानीय परीक्षण के लिए जरूरी है, होस्टिंग एक और मुद्दा है :)

मुझे कल पोस्ट पर विचार मिला है जो मैंने कल ES मॉड्यूल के बारे में किया था I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).

इस डॉट से ट्रेसी ली ने एक बेहतर साफ-सुथरा लाइव-स्ट्रीम आयोजित किया जो ब्राउज़र विक्रेताओं में लाया गया ताकि वे इस बात पर एक सिंहावलोकन दे सकें कि वे क्या काम कर रहे हैं: Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers. Featured Speakers: Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software Paul Frazee - Works on Beaker Browser Matthew Claypotch - Developer Advocate at Mozilla Paul Kinlan - Senior Developer Advocate at Google Patrick Kettner - Edge at Microsoft Amal Hussein - Senior Open Web Engineer at Bocoup Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder पूर्ण पोस्ट पढ़ें।

सैम थोरोगूड हमारी टीम से लिखते हैं: You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen. And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify.