Hello.

I am Paul Kinlan.

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

testing-file-share-target

Paul Kinlan

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

Read More

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

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
  };

};

Building a video editor on the web. Part 0.

Paul Kinlan

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

Read More

Barcode detection in a Web Worker using Comlink

Paul Kinlan

நான் QRCodes ஒரு பெரிய ரசிகர், அவர்கள் உண்மையான உலக மற்றும் டிஜிட்டல் உலக இடையே தரவு பரிமாறி மிகவும் எளிமையான மற்றும் சுத்தமாகவும் இருக்கும். சில ஆண்டுகளுக்கு இப்போது நான் ஒரு சிறிய பக்க திட்டம் QRSnapper & mdash; நன்றாக இது ஒரு சில பெயர்கள், ஆனால் இது நான் & mdash; அது ‘கௌசர்மிடியா` API ஐ பயன்படுத்துகிறது, இது பயனரின் கேமராவிலிருந்து நேரடி தரவை எடுக்கிறது, இதன் மூலம் உண்மையான நேரத்திற்கு QR குறியீடுகள் ஸ்கேன் செய்ய முடியும்.

பயன்பாட்டின் குறிக்கோள், UI இல் 60fps ஐ மற்றும் QR கோட் உடனடி கண்டறிதலை உடனடியாக கண்டறிவதே ஆகும், இதன் பொருள் ஒரு வலை பணியாளர் (அழகிய நிலையான பொருள்) இல் கண்டறிதல் குறியீட்டை வைக்க வேண்டியிருந்தது. இந்த இடுகையில் நான் தொழிலாளிடமிருந்து தர்க்கத்தை எளிதில் எளிதாக்குவது எப்படி comlink ஐப் பயன்படுத்தி விரைவாக பகிர்ந்து கொள்ள விரும்புகிறேன்.

qrclient.js

import * as Comlink from './comlink.js';

const proxy = Comlink.proxy(new Worker('/scripts/qrworker.js')); 

export const decode = async function (context) {
  try {
    let canvas = context.canvas;
    let width = canvas.width;
    let height = canvas.height;
    let imageData = context.getImageData(0, 0, width, height);
    return await proxy.detectUrl(width, height, imageData);
  } catch (err) {
    console.log(err);
  }
};

qrworker.js (வலைத் தொழிலாளி)

import * as Comlink from './comlink.js';
import {qrcode} from './qrcode.js';

// Use the native API's
let nativeDetector = async (width, height, imageData) => {
  try {
    let barcodeDetector = new BarcodeDetector();
    let barcodes = await barcodeDetector.detect(imageData);
    // return the first barcode.
    if (barcodes.length > 0) {
      return barcodes[0].rawValue;
    }
  } catch(err) {
    detector = workerDetector;
  }
};

// Use the polyfil
let workerDetector = async (width, height, imageData) => {
  try {
    return qrcode.decode(width, height, imageData);
  } catch (err) {
    // the library throws an excpetion when there are no qrcodes.
    return;
  }
}

let detectUrl = async (width, height, imageData) => {
  return detector(width, height, imageData);
};

let detector = ('BarcodeDetector' in self) ? nativeDetector : workerDetector;
// Expose the API to the client pages.
Comlink.expose({detectUrl}, self);

நான் உண்மையில் Comlink நேசிக்கிறேன், நான் நூல்கள் முழுவதும் வேலை என்று முட்டாள் ஜாவாஸ்கிரிப்ட் உருவாக்கும் குறிப்பாக போது அது ஒரு நூலகம் ஒரு விளையாட்டு மாற்றும் என்று நினைக்கிறேன். கடைசியாக ஒரு நேர்த்தியான விஷயம் என்னவென்றால், சொந்த பார்கோடு கண்டறிதல் ஏபிஐ ஒரு தொழிலாளிக்குள் இயங்க முடியும், எனவே அனைத்து தர்க்கமும் UI இலிருந்து அகற்றப்படும்.

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

Running FFMPEG with WASM in a Web Worker

Paul Kinlan

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

நான் நேசிக்கிறேன் Comlink. Comlink நாம் ஒரு சிக்கலான postMessage மாநில இயந்திரம் சமாளிக்க இல்லாமல் செயல்பாடுகளை மற்றும் வகுப்புகள் வெளிப்படுத்த மூலம் வலை தொழிலாளர்கள் எளிதாக தொடர்பு கொள்ளலாம்.

நான் சமீபத்தில் ஒன்றாக இணைக்க வேண்டும். நான் (வெப் சட்டசபைக்கு FFMPEG ஐ ஏற்றுமதி செய்தேன்) (0) (அது வேலை - யாய்) மற்றும் தற்போதைய FFMPEG.js திட்டத்தில் PostMessage வேலை அனைத்தையும் சுத்தம் செய்ய விரும்புகிறேன். கீழே உள்ள குறியீடு இப்போது போல் இருக்கிறது - இது மிகவும் அழகாக இருக்கிறது என்று நான் நினைக்கிறேன். நாம் ffmpeg.js மற்றும் comlink இறக்குமதி செய்யும் ஒரு தொழிலாளி, அது ffmpeg இடைமுகத்தை அம்பலப்படுத்துகிறது, பின்னர் நாம் வேலையைச் சுமக்கும் webpage மற்றும் ffmpeg API க்கு ப்ராக்ஸி உருவாக்க comlink ஐ பயன்படுத்துகிறோம்.

சுத்தமாகவும்.

worker.js

importScripts('https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js');
importScripts('../ffmpeg-webm.js'); 
Comlink.expose(ffmpegjs, self);

client.html

let ffmpegjs = await Comlink.proxy(worker);
let result = await ffmpegjs({
   arguments: ['-y','-i', file.name, 'output.webm'],
   MEMFS: [{name: file.name, data: data}],
   stdin: Comlink.proxyValue(() => {}),
   onfilesready: Comlink.proxyValue((e) => {
     let data = e.MEMFS[0].data;
     output.src = URL.createObjectURL(new Blob([data]))
     console.log('ready', e)
   }),
   print: Comlink.proxyValue(function(data) { console.log(data); stdout += data + "\n"; }),
   printErr: Comlink.proxyValue(function(data) { console.log('error', data); stderr += data + "\n"; }),
   postRun: Comlink.proxyValue(function(result) { console.log('DONE', result); }),
   onExit: Comlink.proxyValue(function(code) {
     console.log("Process exited with code " + code);
     console.log(stdout);
   }),
});

Comlink, தொழிலாளர்கள் மற்றும் WASM தொகுக்கப்பட்ட தொகுதிகள் ஒன்றாக எப்படி விளையாடலாம் என்பதை நான் மிகவும் விரும்புகிறேன். நான் idiomatic ஜாவாவை WASM தொகுதிடன் நேரடியாக தொடர்பு கொள்கிறேன் மற்றும் அது முக்கிய நூலை இயக்கும்.

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

Translating a blog using Google Cloud Translate and Hugo

Paul Kinlan

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

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

என் விமானம் இங்கிலாந்திற்கு திரும்புவதற்கு இரண்டு மணிநேரம் முன்பு நான் ஒரு சிறிய ஸ்கிரிப்ட் ஒன்றை உருவாக்கியது, இது என் மார்க்க்டவுன் கோப்புகளை எடுக்கும், அவற்றை விரைவாக உருவாக்க Google Cloud Translate மூலம் இயக்கவும் நான் விரைவாக நடத்தக்கூடிய பக்கத்தின் மொழிபெயர்ப்பு. முழு தீர்வு கீழே வழங்கப்படுகிறது. இது ஒப்பீட்டளவில் அடிப்படை செயலியாகும், அது ஹ்யூகோவை ‘குறியீடு’வை புறக்கணிக்கும் முன்னுரையை புறக்கணிக்கிறது, அதை இழுக்க மேற்கோள்களை புறக்கணித்து விடுகிறது - அவை எப்பொழுதும் எழுதப்பட்ட வழியிலேயே விட்டு வைக்கப்பட வேண்டும் என்பதே என் கருத்து.

குறிப்பு: மொழிபெயர்ப்பிற்கான எங்கள் கற்றல் மென்பொருளைப் பயன்படுத்துவது மிகவும் முக்கியமானது, எனவே [உங்கள் பக்கத்தை குறிப்பது, அதனால் கம்ப்யூட்டிங் கருவிகள் அதன் மொழிபெயர்ப்பாளர்களுக்கு உள்ளீடு என Google மொழிபெயர்க்கப்பட்ட உள்ளடக்கத்தை பயன்படுத்தாது] [https://cloud.google.com/translate/] மார்க்).

// Imports the Google Cloud client library
const Translate = require('@google-cloud/translate');
const program = require('commander');
const fs = require('fs');
const path = require('path');

program
  .version('0.1.0')
  .option('-s, --source [path]', 'Add in the source file.')
  .option('-t, --target [lang]', 'Add target language.')
  .parse(process.argv);

// Creates a client
const translate = new Translate({
  projectId: 'html5rocks-hrd'
});

const options = {
  to:  program.target,
};

async function translateLines(text) {
  if(text === ' ') return ' ';
  const output = [];
  let results = await translate.translate(text, options);

  let translations = results[0];
  translations = Array.isArray(translations)
    ? translations
    : [translations];

  translations.forEach((translation, i) => {
    output.push(translation)
  });

  return output.join('\n');
};

// Translates the text into the target language. "text" can be a string for
// translating a single piece of text, or an array of strings for translating
// multiple texts.
(async function (filePath, target) {

  const text = fs.readFileSync(filePath, 'utf8');

  const lines = text.split('\n');
  let translateBlock = [];
  const output = [];

  let inHeader = false;
  let inCode = false;
  let inQuote = false;
  for (const line of lines) {
    // Don't translate preampble
    if (line.startsWith('---') && inHeader) { inHeader = false; output.push(line); continue; }
    if (line.startsWith('---')) { inHeader = true; output.push(line); continue; }
    if (inHeader) { output.push(line); continue; }

    // Don't translate code
    if (line.startsWith('```') && inCode) { inCode = false; output.push(line); continue; }
    if (line.startsWith('```')) { inCode = true; output.push(await translateLines(translateBlock.join(' '))); translateBlock = []; output.push(line); continue; }
    if (inCode) { output.push(line); continue; }

    // Dont translate quotes
    if (inQuote && line.startsWith('>') === false) { inQuote = false; }
    if (line.startsWith('>')) { inQuote = true; output.push(await translateLines(translateBlock.join(' '))); translateBlock = []; output.push(line); }
    if (inQuote) { output.push(line); continue; }

    if (line.charAt(0) === '\n' || line.length === 0) { output.push(await translateLines(translateBlock.join(' '))); output.push(line); translateBlock = []; continue;} 

    translateBlock.push(line);
  }

  if(translateBlock.length > 0) output.push(await translateLines(translateBlock.join(' ')))

  const result = output.join('\n');
  const newFileName = path.parse(filePath);
  fs.writeFileSync(`content/${newFileName.name}.${target}${newFileName.ext}`, result);

})(program.source, program.target);

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

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

Apple - Web apps - All Categories

Paul Kinlan

வலை பயன்பாடுகள் ஐபோன் இல் பயன்பாடுகள் பயன்படுத்த * ஒரு * பரிந்துரைக்கப்படுகிறது வழி போது நினைவில்?

What are web apps? Learn what they are and how to use them.

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

பற்றி 2013 ஆப்பிள் / webapps / மேல் நிலை அடைவு திருப்பி தொடங்கியது / ஐபோன் /

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

Gears API

Paul Kinlan

நான் ஆரம்ப மொபைல் வலை ஏபிஐ பற்றி ஒரு வலைப்பதிவு இடுகை எழுதி மற்றும் அலெக்ஸ் ரஸ்ஸல் கூகிள் கியர்ஸ் எனக்கு நினைவூட்டியது

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

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

நான் AppCache மற்றும் WebSQL, புவிஇருப்பு மற்றும் WebWorkers கூகிள் கியர்ஸ் உள்ள கருத்துக்களை வெளியே வந்தார் என்று பார்க்க சுவாரஸ்யமான நினைக்கிறேன் இது உண்மையில் பிழைத்து அந்த பிந்தைய இரண்டு தான். WebSQL ஆனது பரவலாக ஆதரிக்கப்படவில்லை, அதற்கு பதிலாக IndexedDB ஆல் மாற்றப்பட்டது; மற்றும் AppCache பதிலாக ServiceWorker

RSS Feed to Google Chat Webhook using Cloud Functions for Firebase and Superfeedr

Paul Kinlan

எங்கள் குழுவினருடன் தொடர்புகொள்வதற்கு நாங்கள் Google Chat ஐ உள்நாட்டில் நிறையப் பயன்படுத்துகிறோம் - அது எங்கள் மெதுவாகப் போகிறது; நாங்கள் ஆர்எஸ்எஸ் மூலமாக அணுகக்கூடிய நிறைய உள்ளடக்கங்களை உருவாக்கிக் கொள்கிறோம், நாங்கள் உங்களுக்கு [அனைவருக்கும் பார்க்கக்கூடிய குழு அணிவழக்கம்] உள்ளது (http://devwebfeed.appspot.com). சமீபத்தில் வரை இது வெப்ஹூக்ஸ் வழியாக எளிமையான பிந்தைய-மட்டுமே போட் ஐ உருவாக்க மிகவும் எளிதானது என்று கண்டுபிடித்தேன் எனக்கு யோசனை அளித்தேன், ஆர்எஸ்எஸ் ஊட்டங்களைப் பெறும் ஒரு எளிய சேவையை நான் உருவாக்க முடியும், பின்னர் அவர்களை எங்கள் அணி அரட்டைக்கு நேரடியாக பதிவு செய்யக்கூடிய எங்கள் வெப் ஹூக்கை அனுப்புகிறது.

இது இறுதியில் மிகவும் எளிமையானது, மற்றும் நான் கீழே அனைத்து குறியீடு சேர்த்தேன். நான் Firebase செயல்பாடுகளை பயன்படுத்தினேன் - நான் இந்த மற்ற செயல்பாடு-போன்ற ஒரு சேவை தளங்களில் போல எளிதாக சந்தேகிக்கிறேன் - மற்றும் Superfeedr. Superfeedr Pubsubhubbub pings (இப்போது WebSub) கேட்கும் ஒரு சேவையாகும், அது Pubsub அமைக்கப்படாத ஆர்எஸ்எஸ் ஊட்டங்களைப் பெறும். அது ஒரு ஊட்டத்தைக் கண்டுபிடிக்கும் போது புதிதாகத் தெரிந்த ஜூன் தரவு எக்ஸ்எம்எல் அல்லது JSON பிரதிநிதித்துவத்துடன் ஒரு கட்டமைக்கப்பட்ட URL ஐ (என் விஷயத்தில் என் கிளவுட் ஃபவுண்டேஷனில்) பிங் செய்வேன் - நீங்கள் செய்ய வேண்டியதெல்லாம் தரவுகளை அலசுவதோடு, ஏதாவது செய்ய வேண்டும்.

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');
const app = express();

// Automatically allow cross-origin requests
app.use(cors({ origin: true }));

app.post('/', (req, res) => {
  const { webhook_url } = req.query;
  const { body } = req;
  if (body.items === undefined || body.items.length === 0) {
    res.send('');
    return;
  }

  const item = body.items[0];
  const actor = (item.actor && item.actor.displayName) ? item.actor.displayName : body.title;

  fetch(webhook_url, {
    method: 'POST',
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify({
      "text": `*${actor}* published <${item.permalinkUrl}|${item.title}>. Please consider <https://twitter.com/intent/tweet?url=${encodeURIComponent(body.items[0].permalinkUrl)}&text=${encodeURIComponent(body.items[0].title)}|Sharing it>.`
    })  
  }).then(() => {
    return res.send('ok');
  }).catch(() => {
    return res.send('error')
  });
})
// Expose Express API as a single Cloud Function:
exports.publish = functions.https.onRequest(app);

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

நான் அமைதியாக இருந்ததைப் பற்றி எனக்கு ஆச்சரியமாகவும் மகிழ்ச்சியாகவும் இருந்தது.

Using HTTPArchive and Chrome UX report to get Lighthouse score for top visited sites in India.

Paul Kinlan

A quick dive in to how to use Lighthouse,HTTPArchive and Chrome UX report to try and understand how users in a country might experience the web.

Read More

Getting Lighthouse scores from HTTPArchive for sites in India.

Paul Kinlan

A quick dive in to how to use Lighthouse to try and understand how users in a country might experience the web.

Read More

'Moving to a Chromebook' by Rumyra's Blog

Paul Kinlan

ரூத் ஜான் Chrome OS க்கு சென்றார் (தற்காலிகமாக):

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.
  • Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’
  • Open this and there’s an option to put your machine into dev mode
  • It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags. It may crash, but what the hell you’ll have Linux capabilities ��
  • Now you can go back into Settings and in regular settings there’s a ‘Linux apps’ option. Turn this on. It’ll install Linux. Once this is complete you’ll have a terminal open for you. Perfect

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

ரூத் தனது முக்கிய இயந்திரம் முறிந்தது என்பதால் Chrome OS க்கு நகர்த்துவதற்கு ஒரு பெரிய எழுத்து உள்ளது.

நான் 4 மாதங்களுக்கு முன்பு (Google I / O க்கு முன்பு) Chrome OS க்கு முழு நேரத்திற்கு சென்றேன், என் PixelBook (இப்போது சரி செய்யப்பட்டது) உடைந்துவிட்டதால், Mac க்கு நகர்த்தப்பட்டேன்.

எனக்கு அது இன்று அங்கு சிறந்த வலை அபிவிருத்தி இயந்திரங்கள் ஒன்றாகும். இது ‘உண்மையான மொபைல்’ என்பதை சோதிக்கக்கூடிய ஒரே சாதனம் - நீங்கள் மொபைலில் குரோம், பயர்பாக்ஸ் மொபைல், சாம்சங் உலாவி, பிரேவ் போன்றவற்றை ARC தளத்தின் வழியாக நிறுவ முடியும். Chrome OS க்கு லினக்ஸ் பயன்பாட்டு சுற்றுச்சூழலை நிறையக் கொண்டுவருவதால் Chrome OS க்கான விளையாட்டு மாற்றியையும் க்ரோஸ்டினி மாற்றும், இது Chrome OS இல் எனக்கு பெரிய பயன்பாட்டு இடைவெளியை நிரப்ப ஆரம்பிக்கிறது; நான் பயர்பாக்ஸ், Vim, ஜிடி, VS கோட், நோட், என்.எம்.எம்., என் என் பம்ப் கருவிகள், ஜிஐஎம் மற்றும் இன்ஸ்கேஸ்பெப் … கிடைத்தது, இது க்ரோஸ்டினி வேகமாக இருக்கலாம், இது ஜி.பீ. இன்னும் வேகமானது அல்ல, Filemanager போன்றவைகளுடன் ஒருங்கிணைக்கப்பட வேண்டும், இறுதியாக PixelBook உண்மையில் அதிக உடல் துறைமுகங்கள் தேவை - நான் இரண்டு 4k திரைகளை இணைக்க முடியும், ஆனால் நான் அதே நேரத்தில் கட்டணம் வசூலிக்க முடியாது.

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

Would I pay full price for it? I’m not sure I would pay full price for anything on the market right now. Point me in the direction of a system that will run my graphics software and makes a good dev machine (with minimal setup) and lasts more than 18 months, point me in the direction of a worthy investment and I will pay the money.

ஆம்.

PWA: Progressive Web All-the-things

Paul Kinlan

PWA. முற்போக்கான வலை பயன்பாடுகள். பிரான்சஸ் பெர்ரிமான் மற்றும் அலெக்ஸ் ரஸ்ஸல் ஆகியோர் 2015 ஆம் ஆண்டில் “முற்போக்கான வலைப் பயன்பாடுகள்” என்ற வார்த்தையை உருவாக்கியுள்ளனர். “முற்போக்கான வலைப் பயன்பாடுகள்: எமது சோலை இழக்காமல் தாவல்கள் தப்பித்தல்” (0) “. 3 ஆண்டுகள் கழித்து, நாங்கள் நீண்ட தூரம் வந்துள்ளோம். தொழிலாளர்கள் மற்றும் டெவலப்பர்களால் தொழில்துறையுடன் ஒட்டிக்கொள்ள ஆரம்பித்த ஒரு பிராண்டுக்கு, ஒரே ஒரு உலாவி என்ஜினில் மட்டுமே நடைமுறைப்படுத்தப்பட்டது, மற்றும் அனைத்து முக்கிய நிறுவனங்களுடனும் - சேவை தொழிலாளி, மேனிஃபெஸ்ட், ஹோஸ்ஸ்கிரீன், வெப் புஷை சேர் ‘பி.டபிள்யு.ஏ’ ஸ்டாக் பெரும்பான்மையை உலாவி விற்பனையாளர்கள் அமல்படுத்துகின்றனர். காட்டுப்பகுதியில் எத்தனை PWA கள் உள்ளன என்பதைப் புரிந்துகொள்ள எங்களுக்கு உதவுகின்ற app directories, கருவிகள் இப்போது கிடைத்துள்ளன.

Read More

What are the pain points for web designers? - Mustafa Kurtuldu

Paul Kinlan

முஸ்தபா எழுதுகிறார்:

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. I think this is something that we have to take on board: to learn how to educate and not just expect everyone to trust us by default. That takes time — perhaps using scenario-based design or design workshops like a design sprint would help. Getting non-designers to observe users while using a prototype they created is one of the best experiences I have seen in this field.

Cross-browser support is lacking crucial features. Designers need to understand developer tooling, to better scope out what is possible. I think using paired programming or the design process described above can help.

Responsive design is still challenging. I think this is in part due to the tools we use; I would love Chrome Design Tools that would help turn the browser into a creative tool. This space is where I think the next evolutionary step for site and web app creation is at. Mozilla is doing some fantastic work in this space, with their layout and shapes tooling.

All in all the challenges that we face seem to be all the age-old ones. Process, tools, and respect.

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

நான் இந்த ஒரு சுவாரஸ்யமான இடுகையை கண்டுபிடித்தேன் என்று நான் எழுதிய ஒரு இடுகை ஒரு பூர்த்தி வலை டெவலப்பர்கள் சவால்களை. உலாவி compat ஒரு சிக்கல் என்று ஆச்சரியம் இல்லை, ஆனால் இன்னமும் என்ன கவலை IE11 கட்டிடம் இன்னும் மீண்டும் தொழில் வைத்திருக்கும் என்று ஒன்று உள்ளது. அதேபோல், முஸ்தாபா பொறுப்பு வடிவமைப்புக்கு கருவியாக இருப்பதில் சிக்கல் இருப்பதாக சுட்டிக்காட்டுகிறது, ஒரு பதிலளிக்க தீர்வுக்கு முக்கியத்துவம் எப்போதும் பின்வருமாறு வழிவகுக்கிறது (இது முஸ்தபாவின் இடுகையில் உள்ளது):

Designing once and using everywhere is still hard to reach ambition.

இது ஒரு பிரச்சனையாகும், நாம் அனைவரும் இன்னும் மல்யுத்தம் செய்கிறோம் என்று நினைக்கிறேன். ஒருபுறம், ஒவ்வொரு சாதன வடிவமைப்பிலும் ஒவ்வொருவருக்கும் சேவை செய்யக்கூடிய ஒரு பதிலளிக்க தீர்வு ஒன்றை உருவாக்க அனைவருக்கும் நாம் விரும்புகிறோம், மறுபுறத்தில் பயனர் சூழல் முக்கியமானது மற்றும் சில நேரங்களில் குறிப்பிட்ட செயல்களைச் செய்வதற்கு மட்டுமே பயனர் தயாராக இருப்பார்; சில்லறை விற்பனை மற்றும் வர்த்தக துறையில் இதைப் பார்க்கிறோம்: மக்கள் மொபைலில் உலாவுவார்கள், டெஸ்க்டாப்பில் முழுமைப்படுத்தப்படுவார்கள், மேலும் இந்த பல மாதிரி மாதிரியை நீங்கள் சந்திக்கிறீர்களா அல்லது எல்லா சாதனங்களிலும் ஒரு நிலையான அனுபவத்தை உருவாக்க முடியுமா? சந்தேகம் பதில் ‘இது சார்ந்துள்ளது’ என்று சந்தேகிப்பார், ஆனால் இது தயாரிப்பு குழுக்களிடமிருந்து பொறியியல் குழுக்களுக்கு எல்லோருக்கும் ஒரு கடினமான பிரச்சனையாகும்.

Page Lifecycle API - Philip Walton

Paul Kinlan

ஃபிலிப் வால்டன் உங்கள் தாவல்களை உலாவி போது பதிலளிக்க எப்படி பதிலளிக்க (டெவலப்பர்) கட்டுப்பாட்டை கொடுக்க Chrome குழு ஒரு புதிய ஏபிஐ ஒரு அற்புதமான ஆழமான டைவ் உள்ளது.

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.

On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

While the web platform has long had events that related to lifecycle states — like load, unload, and visibilitychange — these events only allow developers to respond to user-initiated lifecycle state changes. For the web to work reliably on low-powered devices (and be more resource conscious in general on all platforms) browsers need a way to proactively reclaim and re-allocate system resources.

In fact, browsers today already do take active measures to conserve resources for pages in background tabs, and many browsers (especially Chrome) would like to do a lot more of this — to lessen their overall resource footprint.

The problem is developers currently have no way to prepare for these types of system-initiated interventions or even know that they’re happening. This means browsers need to be conservative or risk breaking web pages.

The Page Lifecycle API attempts to solve this problem by:

  • Introducing and standardizing the concept of lifecycle states on the web.
  • Defining new, system-initiated states that allow browsers to limit the resources that can be consumed by hidden or inactive tabs.
  • Creating new APIs and events that allow web developers to respond to transitions to and from these new system-initiated states.
  • This solution provides the predictability web developers need to build applications resilient to system interventions, and it allows browsers to more aggressively optimize system resources, ultimately benefiting all web users.

The rest of this post will introduce the new Page Lifecycle features shipping in Chrome 68 and explore how they relate to all the existing web platform states and events. It will also give recommendations and best-practices for the types of work developers should (and should not) be doing in each state.

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

என் முதல் கருத்து நீங்கள் பிலிப்ஸ் படிக்க வேண்டும் என்று ஆகிறது. அது நம்பமுடியாதது.

மொபைல் போனில், பயனர் அதைப் பயன்படுத்தாதபோது (உதாரணமாக, நீங்கள் தாவல்களை இடமாற்றம் செய்யும்போது அல்லது Android பயன்பாட்டில் Chrome பயன்பாட்டிலிருந்து நகரும்போது), உலாவி பின்னணியில் உங்கள் உலாவியில் (உறைதல் அல்லது விலக்குதல்) பக்கம் மிகவும் ஆக்கிரோஷமாக இருக்க முடியும். ஒரு டெவலப்பராக நீங்கள் ஒரு பாரம்பரியமாக டெவலப்பராக இருப்பதால், நீங்கள் எளிதாக நிலைத்திருக்க முடியாது அல்லது திறந்த ஆதாரங்களை மூடுவதும், நீங்கள் பயன்பாட்டில் இருக்கும்போது, ​​முக்கியமாக, அரசு மீண்டும் மீண்டும் ஹைட்ரேட் நிலைக்கு வந்தால், அதை எளிதாக செய்ய முடியாது. டெவலப்பர்கள் கட்டுப்பாட்டுடன் இருக்கும்போது, ​​அதிகமான தகவல் தெரிவுகளை உருவாக்க முடியும், இதன் விளைவாக பயனர் அல்லது டெவெலப்பர் அனுபவத்தை கடுமையாக பாதிக்காமல் உலாவியில் எதிர்கால ஆதாரங்களை பாதுகாப்பதில் உலாவி மிகவும் கடுமையாக இருக்கும்.

இறுதியாக, கீழேயுள்ள வரைபடம் அது அழகாக தோற்றமளிக்கிறது.

பக்கம் வாழ்க்கை சுழற்சி ஏபிஐ

Add to homescreen changes in Chrome 68 - Pete LePage

Paul Kinlan

Chrome இல் Homescreen இல் சேர்வதற்கு முக்கியமான மாற்றங்கள் பற்றி Pete LePage எழுதுகிறார்

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.

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

பலர் முன்னர் ‘முன்முடிவில்லாத பிரச்சனை` நிகழ்வைக் கையாளவில்லை என்பதால் முதலில் இது பற்றி கலவையான உணர்ச்சிகள் இருந்தன, அது திடீரென்று வலை APK இன் நிறுவல்களின் எண்ணிக்கையானது மிகவும் குறிப்பிடத்தக்க அளவுக்கு வீழ்ச்சியடையும் என்று நான் நினைக்கிறேன், ஆனால் உண்மையில் இதைச் செய்ய சரியானது என்று நினைக்கிறேன்.

இலக்கானது இணையத்தில் நடக்கும் எரிச்சலூட்டும் வேண்டுகோளின் எண்ணிக்கையை குறைப்பதாகும், மற்றும் பயனர் ஒரு PWA ஐ நிறுவ விரும்புவதாக நினைக்கும் போது, ​​நாம் எதிர்பார்க்கும் தொழில் நுட்பத்தில் தேவைப்படும் கடைசி விஷயம் என்னவென்றால், ஒரு PWA ஐ நிறுவ விரும்பும் போது எப்போது, ​​எப்போது வேண்டுமானாலும் ** நீங்கள் ** ஒரு நிறுவலுக்கு கேட்க வேண்டும் மற்றும் நீங்கள் பயனர்-சைகைக்கு பதில் செய்ய வேண்டும்.

சுமாரான விஷயம் என்னவென்றால், நாம் (Chrome) பயனர் அனுபவத்தை நிறுவ முடியும் என்பதை அறிந்திருப்பது மிகவும் சுலபமான வழிகளை அறிமுகப்படுத்துகிறது, இப்போது அது முதல் சுழலில் தோன்றும் சிறிய அடி பட்டை தான், மேலும் வட்டம் எதிர்காலத்தில் நாம் ஆராயலாம் அவர்கள் நடவடிக்கை எடுக்க முடியும் என்று பயனர் விடாமல் இன்னும் நுட்பமான வழிகள்.

A one year PWA retrospective - Pinterest Engineering

Paul Kinlan

Pinterest இன் PWA ஒரு பெரிய கண்ணோட்டம்

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. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).

Looking back over one full year since we started rebuilding our mobile web, we’re so proud of the experience we’ve created for our users. Not only is it significantly faster, it’s also our first platform to support right-to-left languages and “night mode.” Investing in a full-featured PWA has exceeded our expectations. And we’re just getting started.

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

இது மிகவும் சிறந்த பதவி உயர் தரமான, வேகமாக மற்றும் ஈடுபடும் தளங்களை உருவாக்க நன்மைகளை காட்டுகின்றன. PWA இன் ‘ஆப்’ பகுதி, குறிப்பாக ‘வீட்டுக்குச் சேர்’ என்று நிறுவும் பயனர்கள் நிறையப் பயன்படுத்துகிறார்கள். பரந்த இடுகையைப் படிப்பது அவர்கள் சிறந்த வலைத்தள அனுபவத்தில் கவனம் செலுத்தி வருவதைப் பார்ப்பது நல்லது, ஆரம்ப சுமையைக் குறைக்க குறியீட்டு பிரித்தல் மூலம் மீண்டும் மீண்டும் இயங்கக்கூடிய மற்றும் கணிக்கக்கூடிய செயல்திறன் கொண்ட வேகமாக ஏற்றும் தளங்களில் கவனம் செலுத்துகிறது, மேலும் அவை நல்ல கட்டிடங்களை குழு. நீங்கள் அடிப்படை அனுபவம் இருந்தால், அவற்றை விரும்பும் பயனர்களுக்கு புஷ் அறிவிப்புகளைப் போன்ற அம்சங்களில் லேயர் முடியும்.