Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Debugging Web Pages on the Nokia 8110 with KaiOS using Chrome OS

Paul Kinlan

இந்த இடுகை [KaiOS device with Web IDE](https://paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios/) ஐப் பிழைத்திருத்தலில் இடுகையின் தொடர்ச்சியாகும், ஆனால் MacOS ஐப் பயன்படுத்துவதற்குப் பதிலாக, இப்போது க்ரோஸ்டினி உடன் Chrome OS (m75) ஐப் பயன்படுத்தலாம். நான் ஒரு நல்ல துவக்கம் இது [KaiOS Environment Setup](https://developer.kaiostech.com/environment-setup) இருந்து [KaiOS Environment Setup](https://developer.kaiostech.com/environment-setup) , ஆனால் Chrome OS மற்றும் Crostini கொண்டு போகிறது போதாது. நான் தொடர்ந்து வந்த கடினமான வழிகாட்டி கீழே உள்ளது. நீங்கள் குறைந்தது Chrome OS m75 ஐ பயன்படுத்துகிறீர்கள் என்பதை உறுதி செய்து கொள்ளுங்கள் (தற்போது ஏப்ரல் 15 ஆம் தேதியைப் போலவே சேனல்)

Read More

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

New WebKit Features in Safari 12.1 | WebKit🔗

Paul Kinlan

சமீபத்திய சஃபாரிக்கு பெரிய புதுப்பிப்புகள்!

கூகிள் பே லிப் பணம் செலுத்துவதற்கு பரிந்துரைக்கும் வழி என்று சில நாட்களுக்கு முன்பு கூறியது ... இது ஒரு மில்லியன் மைல்கள் தொலைவில் இல்லை, Google Pay மேல் கட்டப்பட்டது கட்டணம் கோரிக்கை, ஆனால் அது முதல் PR இல்லை.

Payment Request is now the recommended way to pay implement Apple Pay on the web.

Read full post .

எனது விருப்பமான அம்சம் எனது இண்டெர்நெட் மூலம் எனது வரலாற்றைக் கொடுத்தது.

Web Share API

The Web Share API adds navigator.share(), a promise-based API developers can use to invoke a native sharing dialog provided the host operating system. This allows users to share text, links, and other content to an arbitrary destination of their choice, such as apps or contacts.

இப்போது பகிர்வு இலக்கு ஏபிஐ பெற நாம் வெற்றியாளராக இருக்கிறோம்! :)

Offline fallback page with service worker🔗

Paul Kinlan

பல ஆண்டுகளுக்கு முன்னர், நெட்வொர்க் இணைப்பு இல்லாமைக்குரிய சொந்தப் பயன்பாடுகளுக்கு எப்படி பதிலளித்தேன் என சில ஆராய்ச்சி செய்தேன். பகுப்பாய்விற்கான இணைப்பை நான் இழந்துவிட்டேன் (இது Google+ இல் இருந்தது என்று நான் சத்தியம் செய்ய முடியும்), பரவலான கதை பல இணைய பயன்பாடுகள் பின்தொடர்ந்து இணையாக பிணைக்கப்பட்டுள்ளன, அவை நேரடியாக செயல்பட மறுக்கின்றன. வலை பயன்பாடுகள் நிறைய போன்ற ஒலிகள், எனினும் வலை இருந்து அவர்களை அமைக்க என்று விஷயம் அனுபவம் இன்னும் 'பிராண்ட்' என்று, பார்ட் சிம்ப்சன் நீங்கள் ஆன்லைன் (உதாரணமாக) இருக்க வேண்டும் என்று சொல்ல வேண்டும், இன்னும் இன்னும் பெரும்பாலான வலை அனுபவங்களை நீங்கள் ஒரு 'டினோ' (chrome: // dino பார்க்கவும்) பெறுவீர்கள்.

நாங்கள் சேவை ஊழியரிடம் நீண்ட காலமாக பணியாற்றி வருகிறோம், மேலும் ஒரு சேவை சேவையாளரால் கட்டுப்படுத்தப்படும் பக்கங்களைக் கொண்டிருக்கும் போது மேலும் பல தளங்களைக் காண்கிறோம், நெட்வொர்க்கில் இல்லாதபோது பெரும்பாலான தளங்கள் கூட அடிப்படை குறைவடையும் அனுபவத்தை கொண்டிருக்கவில்லை கிடைக்கும்.

நீங்கள் முற்றிலும் ஒரு ஆஃப்லைன் முதல் அனுபவத்தை உருவாக்க விரும்பவில்லை என்ற ஊகத்தின் மீது ஒரு பொது வீழ்ச்சியடைந்த பக்கத்தை எவ்வாறு கட்டியெழுப்ப வேண்டும் என்பதில் எந்த வழிகாட்டியும் இருந்தால் 10 நிமிடங்களுக்குள் அதை உருவாக்கியிருப்பேன் என்று என் நல்ல குரல் ஜேக் கேட்டேன். Check it out .

இது 20 கோடுகள் நீளமாக இருப்பதால், நான் கீழே உள்ள குறியீட்டை ஒட்டி விட்டேன். இது ஆஃப்லைன் சொத்துக்களைப் பின்தொடர்கிறது, பின்னர் ஒரு 'வழிசெலுத்தலை' பெறும் ஒவ்வொரு பிழையானது பிழைகள் (நெட்வொர்க்கின் காரணமாக) அதைப் பார்த்தால் அசல் உள்ளடக்கத்திற்கு பதிலாக ஆஃப்லைன் பக்கத்தை வழங்கவும் கிடைக்கும்.

addEventListener('install', (event) => {
  event.waitUntil(async function() {
    const cache = await caches.open('static-v1');
    await cache.addAll(['offline.html', 'styles.css']);
  }());
});

// See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload
addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

addEventListener('fetch', (event) => {
  const { request } = event;

  // Always bypass for range requests, due to browser bugs
  if (request.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});

அவ்வளவு தான். பயனர் ஆன்லைனில் இருக்கும்போது, இயல்புநிலை அனுபவத்தைப் பார்ப்பார்கள்.

பயனர் ஆஃப்லைனில் இருக்கும்போது, அவர்கள் வீழ்ச்சிப் பக்கத்தைப் பெறுவார்கள்.

இந்த எளிமையான ஸ்கிரிப்ட் நம்பமுடியாத சக்தி வாய்ந்ததாக இருக்கிறது, ஆமாம், அது இன்னும் மேம்படுத்தப்படலாம், பிணையத்துடன் ஒரு சிக்கல் இருக்கும்போது நாங்கள் எங்களது பயனர்களிடம் பேசுவதற்கு ஒரு எளிய மாற்றம் கூட அடிப்படையில் மேம்படுத்தலாம் என்று நம்புகிறேன் உலகம் முழுவதிலுமுள்ள பயனர்களுக்கான வலை உணர்தல்.

** புதுப்பிப்பு ** ஜெஃப்ரி போஸ்னிக் கின்ல்டி அனைத்து கோரிக்கைகளுக்கும் SW துவக்கத்தில் காத்திருக்க வேண்டியது இல்லை.

testing block image upload

Paul Kinlan

படத்தை பதிவேற்றுவதற்கான உரிமை கிடைத்தால், இது ஒரு சோதனை. நீங்கள் இதைப் பார்த்தால், ஆம் நான் செய்தேன் :)

Read More

Editor.js🔗

Paul Kinlan

வலைப்பதிவின் ஆசிரியராகவும், EditorJS ஐப் பயன்படுத்தவும் ஹ்யூகோ அடிப்படையிலான ஆசிரியரால் நான் மேம்படுத்தியிருக்கிறேன்.

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.

Read full post .

அது வேலை செய்யும் என்று நான் நினைக்கிறேன்.

நான் குறியீடுப்பேஸுடன் சிறிது கஷ்டப்பட்டேன், எல்லா உதாரணங்களும் ES Modules ஐப் பயன்படுத்துகின்றன, இருப்பினும் NPM தொலைவு IIFE ES5 குறியீட்டில் அனைத்து வெளியீடும் உள்ளது. ஆனால் ஒரு தடவை நான் ஒரு குறுக்குவழியைக் கடந்துவிட்டேன், இது ஒரு யூ.ஐ. ஐ உருவாக்க மிகவும் எளிதானது, இது நடுத்தர போல ஒரு பிட் தெரிகிறது.

Debugging Web Pages on the Nokia 8110 with KaiOS

Paul Kinlan

நாம் சமீபத்தில் அம்சம் தொலைபேசிகளில் நிறைய வளர்ச்சி செய்து கொண்டிருக்கிறோம், கடினமாக இருந்தது, ஆனால் வேடிக்கையாக இருந்தது. கடினமான பிட் என்பது கயோஸில் நாம் வலைப்பக்கங்களைத் தடுக்க முடியாததைக் கண்டறிந்தது, குறிப்பாக நாம் கொண்டிருந்த வன்பொருள் (நோக்கியா 8110). நோக்கியா ஒரு பெரிய சாதனம், இது கெயோஸ் உடன் கட்டப்பட்டிருக்கிறது, இது Firefox 48 ஐ ஒத்ததாக உள்ளது, ஆனால் அது பூட்டப்பட்டுள்ளது, நீங்கள் பிற Android சாதனங்களில் கிடைக்கும் பாரம்பரிய பாரம்பரிய டெவலப்பர் முறை இல்லை, இது நீங்கள் ஃபயர்பாக்ஸை இணைக்க முடியாது Webide எளிதாக. வலைப்பதிவுகள் ஒரு ஜோடி படித்து, மற்றும் adb பற்றி ஒரு பிட் தெரிந்தும் adb நான் அதை செய்ய எப்படி வேலை.

Read More

Object Detection and Augmentation🔗

Paul Kinlan

நான் மிகவும் நிறைய [Shape Detection API](https://paul.kinlan.me/face-detection/ https://paul.kinlan.me/barcode-detection/ https://paul.kinlan.me/detecting-text-in-an-image/) உடன் விளையாடுகிறேன். அது எனக்கு மிகவும் பிடிக்கும், உதாரணமாக ஒரு மிக எளிய QRCode detector நான் ஒரு நீண்ட காலத்திற்கு முன்னர் JS QRCode detector ஐ எழுதியது, ஆனால் new BarcodeDetector() API ஐ அது கிடைக்கும் எனில் பயன்படுத்துகிறது.

Face Detection , Barcode Detection மற்றும் Text Detection : வடிவம் கண்டறிதல் ஏபிஐ பிற திறன்களைப் பயன்படுத்தி இங்கே நான் கட்டப்பட்ட சில டெமோவின் சிலவற்றை நீங்கள் காணலாம்.

நான் வார இறுதிகளில் Jeeliz தடுமாறினபோது நான் ஆச்சரியமாக இருந்தது, நான் Jeeliz செயல்திறன் நம்பமுடியாத அளவிற்கு ஈர்க்கப்பட்டார் - நான் ஒரு Pixel3 எக்ஸ்எல் பயன்படுத்தி வழங்கப்பட்டது, ஆனால் முகங்கள் கண்டறிதல் FaceDetector ஏபிஐ என்ன சாத்தியம் விட கணிசமாக விரைவாக தோன்றியது.

Checkout some of their demos .

இது எனக்கு நிறைய நினைவிருக்கிறது. ஆப்ஜெக்டிவ் டிடக்சன் (இது போன்றவை) என்ற கருவியாகும், இது Chrome இன் வடிவம் கண்டறிதல் ஏபிஐ (இது Chrome இல் உள்ளது, இது Chrome இல் உள்ள எல்லா பிளாட்ஃபார்ம்களிலும் மாறாது, இது இணையம் குறிப்பாக கேமரா அணுகல், WebGL மற்றும் WASM இல் பரவலாக கிடைக்கிறது ) எளிதில் பணக்கார அனுபவங்களை உருவாக்க மற்றும் அனைத்து தளங்களில் முழுவதும் ஒரு நிலையான அனுபவம் பில்லியன் கணக்கான அடைய.

இது சுவாரஸ்யமான (மற்றும் உண்மையில் இந்த இடுகையில் காட்ட வேண்டும் என்ன) அங்கு பெருக்குதல் மற்றும் நீங்கள் இப்போது மேடையில் வரும் என்று middleware நூலகங்கள் வேண்டும், நாம் பயனர் செய்த சிறந்த பயன்பாடுகள் நிறுவ இல்லாமல் வேடிக்கை snapchat- எஸ்க்யூ முகத்தை வடிகட்டி பயன்பாடுகளை உருவாக்க முடியும் பயனர்களின் சாதனத்திலிருந்து தரவுகளை அதிக அளவில் அறுவடை செய்வதால் (கணினியில் அடிப்படை அணுகல் இல்லை என்பதால்).

வேடிக்கையான செய்முறைகள் வெளியே, பயனர் மிகவும் விரைவாகவும் எளிமையாகவும் மிகவும் மேம்பட்ட பயன்பாடு-வழக்குகளை தீர்க்க முடியும், இது போன்ற:

பயனர் இருந்து கேமரா அல்லது புகைப்படம் நேரடியாக * உரை தேர்வு

  • கேமராவில் இருந்து மொழிகளின் நேரடி மொழிபெயர்ப்பு
  • இன்லைன் QRCode கண்டறிதல் எனவே மக்கள் WeChat அனைத்து நேரம் திறக்க இல்லை :)
  • வாகனத்திலிருந்து எடுக்கப்பட்ட வலைத்தள URL கள் அல்லது முகவரி
  • கிரெடிட் கார்டு கண்டறிதல் மற்றும் எண் பிரித்தெடுத்தல் (பயனர்கள் விரைவாக உங்கள் தளத்தில் கையொப்பமிடலாம்)
  • உங்கள் கடையின் வலை பயன்பாட்டில் காட்சி தயாரிப்பு தேடல். உங்கள் கடைகளில் வலை பயன்பாட்டில் மேலும் தயாரிப்பு விவரங்கள் * பார்கோடு பார்வை.
  • மக்கள் முகங்களின் மீது சுயவிவர புகைப்படங்களின் விரைவான பயிர்ச்செய்கை.
  • எளிய A11Y அம்சங்கள் ஒரு பயனரால் படங்களைக் காணும் உரையை கேட்க அனுமதிக்கின்றன.

நான் இந்த பயன்படுத்த வழக்குகளில் பற்றி நினைத்து 5 நிமிடங்கள் கழித்தார் - நான் இன்னும் நிறைய தெரியும் - ஆனால் நாம் கேமரா பயன்படுத்தி நிறைய தளங்கள் அல்லது வலை பயன்பாடுகள் பார்க்க வேண்டாம் என்று என்னை ஹிட், அதற்கு பதிலாக நாம் கேட்டு தளங்கள் நிறைய பார்க்க பயனர்கள் ஒரு பயன்பாட்டை பதிவிறக்க, மற்றும் நான் அதை செய்ய வேண்டும் என்று நான் நினைக்கவில்லை.

** புதுப்பிப்பு ** எங்கள் அணியில் தாமஸ் ஸ்டீனர் எங்கள் நட்பு ShapeDetection ஏபிஐ பிடிக்கவில்லை என்று தெரிகிறது என்று எங்கள் அணி அரட்டை குறிப்பிடப்பட்டுள்ளது. நான் இந்த ஏபிஐ எங்களுக்கு அந்தந்த கணினிகளின் சொந்த ஷிப்பிங் செயலாக்கங்கள் அணுகல் என்பதை நான் உண்மையில் நேசிக்கிறேன், நான் The Lumpy Web எழுதியது The Lumpy Web , வலை உருவாக்குநர்கள் மேடையில் நிலைத்தன்மையும் மற்றும் முடியும் என்று வடிவம் கண்டறிதல் API சுருக்கமாக:

  1. API மட்டுமே Chrome இல் உள்ளது
  2. Chrome இல் உள்ள ஏபிஐ ஒவ்வொரு தளங்களிலும் மிகவும் வித்தியாசமாக உள்ளது, ஏனெனில் அவற்றின் அடிப்படை செயலாக்கங்கள் வேறுபட்டவை. அண்ட்ராய்டு மட்டும் வாய் மற்றும் கண்கள் போன்ற இடங்களுக்கு புள்ளிகள் உள்ளன, அங்கு MacOS உள்ளது கோடிட்டுக்காட்டுகிறது. அண்ட்ராய்டில் TextDetector கண்டுபிடிக்கப்பட்ட உரையை வழங்குகிறது, அங்கு MacOS இல் 'Text Presence' குறிகாட்டியை மீண்டும் கொடுக்கிறது ... இது Surma காணப்படும் அனைத்து பிழைகள் குறிப்பிட தேவையில்லை.

விநியோகத்திற்கான தளமாக வலைப்பக்கமாக வலைசெய்வது இதுபோன்ற அனுபவங்களுக்கு மிகவும் புத்துணர்வை அளிப்பதாக இருக்கிறது, ஆனால் அதைச் செய்ய எங்களுக்கு அது மறுபரிசீலனை செய்யும் என்று நான் கருதுகிறேன், ஆனால் மேலே கூறப்பட்டுள்ள இரண்டு குழுக்களும் ஒவ்வொரு அம்சத்தையும் நடைமுறைப்படுத்த நீண்ட கால அவகாசத்தை கேள்வி கேட்க என்னை வழிநடத்துகிறது வலைத்தள மேடையில், நாம் WebGL, WASM மற்றும் எதிர்கால வலை ஜி.பீ. போன்ற இன்று மேடையில் அம்சங்களை பயன்படுத்தி அனுப்பப்படும் ஒரு தொகுப்பு நல்ல தீர்வுகள் செயல்படுத்த முடியும் போது.

எப்படியும், நான் இணையத்தில் இதை செய்ய முடியும் என்ற உண்மையை நான் நேசிக்கிறேன், மேலும் அவர்களுடன் தளங்களைக் கொண்டு வருவதைப் பார்க்கிறேன்.

Got web performance problems? Just wait...🔗

Paul Kinlan

நான் ஒரு நல்ல Mariko மற்றும் சக, Mariko ஒரு ட்வீட் பார்த்தேன், நீங்கள் உண்மையில் Mariko வைத்து குறைந்த இறுதியில் சாதனங்கள் ஒரு எல்லை சோதனை.

ட்வீட் சூழல் இந்த வலைப்பக்கத்தில் தினசரி வாழ்கின்ற பயனர்களுக்காக கட்டியெழுப்பும்போது வலை அபிவிருத்தி எவ்வாறு இருக்கும் என்பதைப் பார்ப்போம்.

இந்த இடத்தில் இப்போது நிறைய வேலை செய்து கொண்டிருக்கிறது, ஆனால் ஒரு நாள் நான் ஒரு தளத்தைக் கட்டியிருக்கிறேன், அது ஒரு சற்று நியாயமான அளவிலான செயல்திறன்களில் ஏதாவது வேலை செய்வதற்கு நம்பமுடியாத அளவிற்கு கடினமாக இருந்தது - இங்கு நான் சிக்கிய சில சிக்கல்கள்:

  • பார்வை ஒற்றுமைகள், மற்றும் 300ms கிளிக் தாமதம் (சுற்றி வேலை செய்ய முடியும்) மர்மமான மறு அறிமுகம்.
  • முழுத் திரையின் பெரிய முத்திரை, அது மெதுவாக இருக்கிறது.
  • நெட்வொர்க் மெதுவாக உள்ளது
  • நினைவகம் கட்டுப்படுத்தப்பட்டு, அடுத்தடுத்த ஜி.சி யின் பல நூல்களுக்கு பிரதான நூல் பூட்டப்பட்டுள்ளது
  • நம்பமுடியாத மெதுவாக JS செயல்படுத்தல்
  • DOM கையாளுதல் மெதுவாக உள்ளது

நான் கட்டிய பல பக்கங்களுக்கு, ஒரு வேகமான WiFi இணைப்பு பக்கங்களில் ஏற்றுவதற்கு பல விநாடிகள் எடுத்தது, அதன் பின் தொடர்ச்சியான இடைவெளிகள் வெறும் மெதுவாக இருந்தன. அது கடினமாக இருந்தது, அது முக்கிய நூலில் இருந்து முடிந்த அளவுக்கு முயற்சி செய்து கொண்டிருந்தது, ஆனால் என் பாரம்பரிய வலை அபிவிருத்தி, விளைச்சல் ஆகியவற்றிற்காக நான் செய்யாத வழிமுறைகள் மற்றும் தர்க்கரீதியாக மாற்றங்களை பார்க்க ஒரு தொழில்நுட்ப மட்டத்தில் இது மிகவும் மகிழ்ச்சியாக இருந்தது. செயல்திறன் பெரிய முன்னேற்றங்கள்.

நீண்ட காலத்திற்கு என்ன செய்ய வேண்டும் என்று எனக்குத் தெரியவில்லை, டெவலப்பர்களின் பெரிய ஸ்வாட் என்று சந்தேகிக்கிறேன், மேலும் வளர்ந்த சந்தைகளில் நாங்கள் பணியாற்றுவோம், 'நான் [நுழைவு நாட்டில் x] இல் பயனர்களுக்கு தளங்களை உருவாக்கவில்லை.' உயர் நிலை இது இந்த அறிக்கையுடன் விவாதிக்க கடினமாக உள்ளது, ஆனால் 10 மில்லியன் கணக்கான புதிய பயனர்கள் ஒவ்வொரு ஆண்டும் கணினிக்கு வருகிறார்கள் என்ற உண்மையை நான் புறக்கணிக்க முடியாது, அவர்கள் இந்த சாதனங்களைப் பயன்படுத்துவார்கள் மற்றும் வலை * * மேடாக இருக்க வேண்டும் நாங்கள் rise of the meta platform உடன் மகிழ்ச்சியாக இருப்பதால், உள்ளடக்கம் மற்றும் பயன்பாடுகளுக்கான தேர்வு.

நாம் ஒரு நீண்ட நேரம் வரவிருக்கும் செயல்திறனை தள்ளி வைக்க வேண்டும் போகிறோம். டெவலப்பர்கள் விரைவாக ஏற்றுவதற்கு மற்றும் மென்மையான பயனர் இடைமுகங்களைக் கொண்டிருப்பதற்கு உதவ நாங்கள் கருவிகள் மற்றும் வழிகாட்டுதல்களை உருவாக்கும்.

Browser Bug Searcher🔗

Paul Kinlan

நான் work our team has done இல் சிலவற்றைப் பிரதிபலிக்கின்றேன், 2017 ஆம் ஆண்டில் இருந்து ஒரு திட்டத்தை கண்டுபிடித்தேன், அது ராபர்ட் நிமான் மற்றும் எரிக் பிடல்மேன் உருவாக்கப்பட்டது. Browser Bug Searcher! .

இது ஒரு முக்கிய விசையுடன் நீங்கள் அனைத்து முக்கிய உலாவி என்ஜின்களில் உங்களுக்கு பிடித்த அம்சங்களை ஒரு பெரிய கண்ணோட்டம் கொண்டிருக்கும் என்று நம்பமுடியாத விஷயம்.

Source code available .

இந்த உண்மையில் crbug மற்றும் வெப்கிட் பிழை டிராக்கர்கள் கொண்ட பிரச்சினைகள் ஒரு சிறப்பம்சங்கள், அவர்கள் ஆர்எஸ்எஸ் போன்ற வடிவங்களில் தரவு ஓடைகளை பெற ஒரு எளிய வழி இல்லை. பிழை topicdeck மூலம் என் topicdeck பயன்படுத்துவதற்கு நான் விரும்புகிறேன், எனவே ஒவ்வொரு பிழை டிராக்கர்களிடமிருந்தும் சமீபத்திய தகவல்களின் அடிப்படையில் நான் விரும்பும் அனைத்து பொருட்களின் டாஷ்போர்டு உள்ளது.

Github's Web Components🔗

Paul Kinlan

நான் ஒரு விரைவான Markdown ஆசிரியர் தேடும் https://www.webcomponents.org/ நான் இந்த வலைப்பதிவில் எளிதாக தகவல்களுக்கு செய்ய முடியும் மற்றும் நான் கூறுகளின் ஒரு சுத்தமாகவும் தொகுப்பு முழுவதும் தடுமாறின என்று github .

நான் அவர்கள் <time-element> என்று எனக்கு தெரியும் ஆனால் அவர்கள் பயனுள்ள கூறுகள் போன்ற ஒரு நல்ல மற்றும் எளிய தொகுப்பு என்று எனக்கு தெரியாது.

London from Kingscross

Paul Kinlan

இன்று நன்றாக இருக்கிறது.

Read More

The GDPR mess

Paul Kinlan

நாங்கள் GDPR ஒப்புதலுக்கான ஒரு தொழிற்துறையில் செயல்படுவது ஒரு குழப்பம். யாராவது 'அவசியமான குக்கீகளைப் பயன்படுத்துங்கள்' தவிர வேறொன்றுமே தவிர வேறு எதனையும் தேர்வு செய்ய மாட்டார்கள் என்பதில் எனக்குத் தெரியாது. இருப்பினும் விருப்பத்திற்கும் தேர்விற்கும் இடையில் உள்ள வித்தியாசத்தை என்னால் சொல்ல முடியாது. தேவையான குக்கிகளை மட்டுமே பயன்படுத்துங்கள்.

Read More

Brexit: History will judge us all🔗

Paul Kinlan

வரலாறு இந்த குழப்பத்தில் அனைத்தையும் தீர்த்து வைக்கும். தேசியவாதம், சுயநல நலன்கள், காலனித்துவ-ஹூப்ரிஸ், பிரபல-பாபூனரி ஆகியவற்றின் விளைவுகள் அனைத்திற்கும் ஒரு வழக்கு ஆய்வாளியாக இருக்கும் என்று நான் நம்புகிறேன்.

புணர்பவர்கள்.

File Web Share Target

Paul Kinlan

வலை பயன்பாடுகளுக்கு பயன்பாடுகளில் உலகில் திறம்பட போட்டியிட, பயனர்கள் பயன்பாடுகளை எதிர்பார்க்கும் எல்லா இடங்களுக்கும் ஒருங்கிணைக்கப்பட வேண்டும் என்று அடிக்கடி நான் சொன்னேன். இணைய பயன்பாட்டிற்கான தகவல்தொடர்பு வலைத் தளத்தின் முக்கிய காணப்படாத துண்டுகளில் ஒன்றாகும், குறிப்பாக முக்கிய பிரதான அம்சங்களில் ஒன்று இயல்பு நிலை நிலை பகிர்வு ஆகும்: வலை பயன்பாடுகள் data out of their silo மற்றும் பிற வலைத்தளங்கள் மற்றும் பயன்பாடுகளில் பெற முடியும்; பிற சொந்த பயன்பாடுகள் மற்றும் தளங்களில் இருந்து தரவைப் பெற முடியும். கோப்புப் பகிர்வு இலக்கு ஏபிஐ என்பது இப்போது Chrome கேனரி மொழியில் இருக்கும் ஏபிஐ ஒரு விளையாட்டு-சேஞ்ச் ஆகும்.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

இது கேமரா பயன்பாட்டிலிருந்து நேரடியாக பகிர்வதைப் பரிசோதிக்கிறது. அது வேலை செய்ததைப் போல தெரிகிறது :)

Read More

testing-file-share-target

Paul Kinlan

இது அண்ட்ராய்டில் பகிர் இலக்கு API இன் ஒரு சோதனை மற்றும் கோப்புகளை பகிர்ந்து கொள்ளும் திறன். இங்கே ஏதோ ஒன்றை நீங்கள் பார்த்தால், எல்லாம் நன்றாக இருக்கிறது :)

Read More

Ricky Mondello: Adoption of Well-Known URL for Changing Passwords🔗

Paul Kinlan

சபாரி அணியின் மீது ரிக்கி மோண்டெல்லோ சமீபத்தில் ட்விட்டர் எவ்வாறு பயன்படுத்தப்படுகிறது என்பதைப் பற்றிய ஒரு குறிப்பை பகிர்ந்து கொண்டார். /Well-known/change-password spec.

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 .

இந்த அம்சம் முற்றிலும் என்னை கடந்துவிட்டது ஆனால் அது ஒரு நல்ல யோசனை: நன்கு அறியப்பட்ட இடத்தில் ஒரு கோப்பு கொடுக்கப்பட்டால், உலாவி பயனர்களுக்கு ஒரு UI ஐ வழங்குகிறதா, அவை தளங்களின் சிக்கலான UI ஐத் தொடராமல் தங்கள் கடவுச்சொல்லை விரைவாக மீட்டமைக்க அனுமதிக்கின்றன.

ஸ்பெக் ஏமாற்றும் எளிமையானது: நன்கு அறியப்பட்ட கோப்பில் பயனர் செயலைச் செய்ய விரும்பும் போது நேரடியாக URL ஐ இயக்கும். இந்த சிந்தனை என்னை வழிவகுக்கும், நாம் இந்த அம்சங்களை இன்னும் வழங்க முடியும்:

  • GDPR அடிப்படையிலான ஒப்புதல் மாதிரிகள் (குக்கீ சம்மதத்திற்கு) ஒரு நன்கு அறியப்பட்ட இடம் - தள உரிமையாளர்கள் ஒரு பயனரால் நிர்வகிக்கக்கூடிய மற்றும் அனைத்து குக்கீகளையும் பிற தரவு ஒப்புதலுடனான பொருட்களையும் ரத்து செய்யக்கூடிய பக்கத்திற்கு இணைப்பை வழங்க முடியும்.
  • உலாவி அனுமதி மேலாண்மைக்கு நன்கு அறியப்பட்ட இடம் - தள உரிமையாளர்கள் புவி-இருப்பிடம், அறிவிப்புகள் மற்றும் பிற முதன்மையானவை போன்றவற்றிற்கு பயனர்கள் அனுமதியை திரும்பப்பெற முடியும். கணக்கு நீக்குதல் மற்றும் மாற்றங்களுக்கான ஒரு நன்கு அறியப்பட்ட பாதை அஞ்சல் பட்டியல் சந்தா மேலாண்மைக்கு நன்கு அறியப்பட்ட பாதை

பட்டியல் தொடர்கிறது .... பயனர்கள் பொதுவான பயனர் செயல்களைக் கண்டறிவதற்கு உதவும் எளிமையான திருப்புதல் கோப்புகளுக்கான யோசனை எனக்கு மிகவும் பிடிக்கும், உலாவிக்கு ஒரு வழியாக அதை மேற்பார்வையிடுவதற்காக.

pinch-zoom-element🔗

Paul Kinlan

ஜேக் மற்றும் குழு இந்த உலாவி சொந்த பிஞ்ச்-ஜூம் இயக்கவியல் (எந்த மொபைல் காட்சியும் பெரிதாக்குதல்) வெளியே HTML எந்த தொகுப்பு மீது பெஞ்ச் மேலாதிக்கம் நிர்வாகி இந்த மாறாக அற்புதமான தனிபயன் உறுப்பு கட்டப்பட்டது. நாம் குரோம் தேவ் உச்சிமாநாட்டில் (... 'Chrome தேவ் உச்சி மாநாட்டில் வெளியிடப்பட்டது' என்று நாம் வெளியிடும் மற்றும் வெளியிட்டுள்ள squoosh பயன்பாட்டிற்கு தேவைப்படும் மைய கூறுகளில் ஒன்றாகும், இது ஜாக் டெவலப்பர் தினத்தில் எல்லோருக்கும் காண்பிக்கப்பட்டது அணி மற்றவர்கள் தடை கீழ் இருந்த போதிலும்;) ...)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

நான் என் வலைப்பதிவில் சேர்த்துவிட்டேன் (சில நிமிடங்களை மட்டுமே எடுத்துக் கொண்டேன்), என் ' life ' பிரிவில் நான் எடுத்த புகைப்படங்களைப் பகிர்ந்து கொள்ளலாம். நீங்கள் தொடு-செயல்படுத்தப்பட்ட சாதனத்தில் இருந்தால், நீங்கள் இயங்கும் பல விரல் உள்ளீடுகளை கையாளக்கூடிய டிராக்-பேட்டைப் பயன்படுத்தினால், உறுப்பு மீது விரைவாக பிஞ்ச்-ஜூம் செய்யலாம்.

பயனர் உறுப்பு கூறுகளை உருவாக்குவதற்கான ஒரு மாதிரியாக இணைய கூறுகளை நான் ஏன் விரும்புகிறேன் என்பதற்கு இது ஒரு சிறந்த எடுத்துக்காட்டு. pinch-zoom உறுப்பு வெறும் 3kb கீழ் கம்பி (uncompressed) மற்றும் குறைந்தபட்ச சார்புகளை கட்டியமைக்க மற்றும் அது மிகவும் கடினமாக பயன்படுத்த எந்த தனிபயன் பயன்பாடு-நிலை தர்க்கம் கட்டி இல்லாமல், விதிவிலக்காக ஒரு வேலை செய்கிறது (நான் UI தர்க்கம் சில எண்ணங்கள் குரூப் பயன்பாட்டில் இருந்து என் கற்றல் அடிப்படையில் நான் பகிர்ந்து கொள்வேன் என்று பயன்பாட்டு தர்க்கம் கூறுகள் எதிராக).

இந்த போன்ற உறுப்புகள் மேலும் விழிப்புணர்வு மற்றும் பயன்பாடு கிடைக்கும் பார்க்க விரும்புகிறேன், உதாரணமாக நான் இந்த உறுப்பு நீங்கள் பல வர்த்தக தளங்களில் பார்க்க அந்த படத்தை ஜூம் செயல்பாடு பதிலாக அல்லது தரப்படுத்த முடியும் என்று எப்போதும் டெவலப்பர்கள் இருந்து அந்த வலி எடுத்து.

Building a video editor on the web. Part 0.1 - Screencast

Paul Kinlan

உலாவியில் இணையத்தைப் பயன்படுத்தி வீடியோக்களை உருவாக்க மற்றும் தொகுக்க முடியும். YouTube போன்ற சேவைகளில் பதிவேற்றக்கூடிய ஒரு வீடியோவில் பல வீடியோக்கள், படங்கள் மற்றும் ஆடியோ ஆகியவற்றை ஒருங்கிணைக்கும் வெளியீடு வீடியோவை உருவாக்க, ஸ்கிரீன்ஃபொலுக்கு இணக்கமான பயனர் இடைமுகத்தை வழங்க இது சாத்தியமாகும். வீடியோ ஆசிரியரின் தேவைகளை சுருக்கமாக விவரிக்கும் எனது முந்தைய இடுகை இலிருந்து தொடர்ந்து வந்த பின், நான் வலை திரட்டாளர் பதிவை எவ்வாறு கட்டியெழுப்பினேன், எப்படி ஒரு திரையில் எப்படி உருவாக்குவது ரெக்கார்டர் :) இது மிகவும் அழகாக சுத்தமாகவும், புதிய திரைப்பலகையைப் பயன்படுத்துகிறது. GetDisplayMedia` ஏபிஐ அவர்கள் திரையில் உள்ள உள்ளடக்கங்களுக்கு பயனர் வழங்கல் அணுகலை அனுமதிக்கும்.

Read More

894556 - Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element🔗

Paul Kinlan

முதல் சிக்கல் வலைப்பக்கத்தில் ஒரு வீடியோ எடிட்டரை உருவாக்க முயற்சித்தேன்.

நான் பல வீடியோ ஸ்ட்ரீம்களையும் (டெஸ்க்டாப் மற்றும் வலை கேம்) வைத்திருக்கிறேன், மேலும் நான் ஒரு வீடியோ மூலையில் வீடியோ ஸ்ட்ரீம்களுக்கு இடையே மாறுவதற்கு விரும்பினேன், இதனால் வலை கேமிலும் டெஸ்க்டாப்பிலும் விரைவாக மாறலாம் மற்றும் மீடியா ரெக்கார்டர் ஐ உடைக்க முடியாது.

வீடியோ ட்ராக்ஸ் பொருளில் தேர்ந்தெடுக்கப்பட்ட சொத்துக்களை மாற்றுவதன் மூலம் இதைச் செய்ய முடியும் என தோன்றுகிறது.

What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track

Demo at https://multiple-tracks-bug.glitch.me/

What is the expected result? I would expect videoElement.videoTracks to have two elements.

What happens instead? It only has the first videoTrack that was added to the MediaStream.

முழு இடுகையைப் படிக்கவும்.

Repro வழக்கு.

window.onload = () => {
  if('getDisplayMedia' in navigator) warning.style.display = 'none';

  let blobs;
  let blob;
  let rec;
  let stream;
  let webcamStream;
  let desktopStream;

  captureBtn.onclick = async () => {

       
    desktopStream = await navigator.getDisplayMedia({video:true});
    webcamStream = await navigator.mediaDevices.getUserMedia({video: { height: 1080, width: 1920 }, audio: true});
    
    // Always 
    let tracks = [...desktopStream.getTracks(), ... webcamStream.getTracks()]
    console.log('Tracks to add to stream', tracks);
    stream = new MediaStream(tracks);
    
    console.log('Tracks on stream', stream.getTracks());
    
    videoElement.srcObject = stream;
    
    console.log('Tracks on video element that has stream', videoElement.videoTracks)
    
    // I would expect the length to be 2 and not 1
  };

};