Hello.

I am Paul Kinlan.

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

Puppeteer Go🔗

Paul Kinlan

நான் The Headless Web - இது The Headless Web யோசனைகளுடன் விளையாடுவதற்கு என்னை அனுமதிக்கிறது - இது ஒரு உலாவியில் வலையில் தெரியும் உலாவி இல்லாமல் இயங்குகிறது மற்றும் DOM-curl (ஜாவாஸ்கிரிப்ட் இயங்கும் சுருட்டை) போன்ற கருவிகளைக் கூட உருவாக்குகிறது. குறிப்பாக உலாவியை ஸ்க்ராப் செய்வதற்கும், கையாளுவதற்கும், பக்கங்களுடன் தொடர்புகொள்வதற்கும் நான் விரும்புகிறேன்.

நான் செய்ய விரும்பிய ஒரு டெமோ, Capturing 422 live images ஈர்க்கப்பட்டு, அங்கு அவர் ஒரு பொம்மலாட்ட ஸ்கிரிப்டை Capturing 422 live images , அது பல பக்கங்களுக்குச் சென்று ஸ்கிரீன் ஷாட்டை எடுக்கும். பல பக்கங்களுக்குச் செல்வதற்குப் பதிலாக, பக்கத்தில் உள்ள பல கூறுகளின் ஸ்கிரீன் ஷாட்களை எடுக்க விரும்பினேன்.

பொம்மலாட்டக்காரரிடம் எனக்கு இருக்கும் பிரச்சனை என்னவென்றால், நீங்கள் எதையும் செய்ய வேண்டிய தொடக்க சரணம். துவக்கு, தாவலைத் திற, வழிசெலுத்தல் - இது சிக்கலானது அல்ல, எளிய ஸ்கிரிப்டுகளுக்கு நான் உருவாக்க விரும்புவதை விட இது கொதிகலன் தான். அதனால்தான் நான் Puppeteer Go ஐ உருவாக்கினேன். இது ஒரு சிறிய ஸ்கிரிப்ட் மட்டுமே, இது உலாவியைத் திறக்கும், ஒரு பக்கத்திற்கு செல்லவும், உங்கள் செயலைச் செய்து, பின்னர் தன்னைத் தூய்மைப்படுத்தும் CLI பயன்பாடுகளை எளிதாக உருவாக்க உதவுகிறது.

அதைப் பாருங்கள்.

const { go } = require('puppeteer-go');

go('https://paul.kinlan.me', async (page) => {
    const elements = await page.$$("h1");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});

மேலே உள்ள குறியீடு எனது வலைப்பதிவில் எச் 1 உறுப்பைக் கண்டுபிடித்து ஸ்கிரீன் ஷாட்டை எடுக்கும். இது ஐரேயின் வேலையைப் போல எங்கும் இல்லை, ஆனால் canisuse.com இலிருந்து ஸ்கிரீன் ஷாட்களை பக்கத்திலிருந்து நேரடியாக இழுக்க முடியுமா என்று பார்ப்பது சுத்தமாக இருந்தது என்று நினைத்தேன்.

const { go } = require('puppeteer-go');

go('https://caniuse.com/#search=css', async (page) => {
    const elements = await page.$$("article.feature-block.feature-block--feature");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});
4.png
3.png
2.png
1.png
0.png

மகிழுங்கள்!

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.

A simple video insertion tool for EditorJS🔗

Paul Kinlan

நான் உண்மையில் EditorJS ஐ விரும்புகிறேன். எனது நிலையான ஹ்யூகோ வலைப்பதிவிற்கு மிகவும் எளிமையான வலை ஹோஸ்ட் செய்யப்பட்ட இடைமுகத்தை உருவாக்க இது அனுமதிக்கிறது.

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

நான் simple-image சொருகி களஞ்சியத்தை எடுத்து ஒரு simple-video சொருகி ( npm module ) ஐ உருவாக்க அதை simple-video (ஒரு npm module ). இப்போது நான் இந்த வலைப்பதிவில் வீடியோக்களை எளிதாக சேர்க்க முடியும்.

எடிட்டர் ஜே.எஸ் உடன் நீங்கள் மிகவும் ஆர்வமாக இருந்தால், உங்கள் திட்டங்களில் சேர்ப்பது மிகவும் எளிது. பின்வருமாறு நிறுவவும்

npm i simple-video-editorjs

நீங்கள் பொருத்தமாக இருப்பதால் அதை உங்கள் திட்டத்தில் சேர்க்கவும்.

const SimpleVideo = require('simple-video-editorjs');

var editor = EditorJS({
  ...
  
  tools: {
    ...
    video: SimpleVideo,
  }
  
  ...
});

பக்கத்தில் சில வீடியோக்களை எவ்வாறு ஹோஸ்ட் செய்ய வேண்டும் என்பதை உள்ளமைக்க உங்களை அனுமதிக்கும் சில எளிய விருப்பங்கள் எடிட்டரில் உள்ளன:

  1. ஆட்டோபிளே - பக்கம் ஏற்றும்போது வீடியோ தானாக இயங்கும்
  2. முடக்கியது - இயல்பாக வீடியோவில் ஒலி இருக்காது (ஆட்டோபிளே தேவை)
  3. கட்டுப்பாடுகள் - வீடியோவில் இயல்புநிலை HTML கட்டுப்பாடுகள் இருக்கும்.

உட்பொதிக்கப்பட்ட வீடியோவின் விரைவான எடுத்துக்காட்டு கீழே (மற்றும் சில விருப்பங்களைக் காட்டுகிறது).

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

Test post Video upload

Paul Kinlan

நீங்கள் இங்கே ஒரு வீடியோவைப் பார்த்தால், அது வேலை செய்தது.

Read More

Friendly Project Name Generator with Zeit🔗

Paul Kinlan

வலையில் தளங்களை உருவாக்குவதை எளிதாக்கும் திட்டங்களுக்கான சில யோசனைகள் எனக்கு கிடைத்துள்ளன - zeit அடிப்படையிலான திட்டங்களுக்கு ஒரு netlify-like drag and drop interface ஐ உருவாக்குவது ஒரு netlify-like drag and drop interface (எனக்கு zeit பிடிக்கும், ஆனால் அதைப் பயன்படுத்த ஒரு சிறிய பிட் மேஜிக் தேவைப்படுகிறது).

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

Glitch ஒரு சிறந்த எடுத்துக்காட்டு, நீங்கள் ஒரு திட்டத்தை உருவாக்கும்போது அது ஒரு விசித்திரமான தோராயமாக உருவாக்கப்பட்ட பெயரைக் கொடுக்கும். குழு ஒரு good dictionary of fairly safe words உருவாக்கியது, அது நன்றாக good dictionary of fairly safe words (நீங்கள் விரும்பினால் அவர்கள் ஹோஸ்ட் செய்ய ஒரு எளிய சேவையகம் உள்ளது).

எனவே, இந்த ஞாயிற்றுக்கிழமை பக்க திட்டம் serverless-functions மற்றும் serverless-functions பயன்படுத்தி சீரற்ற திட்ட பெயர்களை உருவாக்க எளிய மைக்ரோ சேவையை உருவாக்குவதாகும்.

And here it is ( code ), இது மிகவும் குறுகியது மற்றும் மிகவும் சிக்கலானது அல்ல.

const words = require("friendly-words");

function generate(count = 1, separator = "-") {
  const { predicates, objects } = words;
  const pCount = predicates.length;
  const oCount = objects.length;
  const output = [];

  for (let i = 0; i < count; i++) {
    const pair = [predicates[Math.floor(Math.random() * pCount)], objects[Math.floor(Math.random() * oCount)]];
    output.push(pair.join(separator));
  }

  return output;
}

module.exports = { generate }

உங்கள் திட்டத்தில் இதை நேரடியாக சேர்க்க விரும்பவில்லை எனில், https: // friendly-project-name க்கு ஒரு வலை கோரிக்கையை விடுப்பதன் மூலம் சீரற்ற திட்ட பெயர்களை ("XY" வடிவத்தில்) உருவாக்க HTTP இறுதிப்புள்ளியைப் பயன்படுத்தலாம். kinlan.now.sh/api/names, இது பின்வருவனவற்றைத் தரும்.

["momentous-professor"]

எண்ணிக்கை = x இன் வினவல்-சரம் அளவுருவுடன் எத்தனை பெயர்களை உருவாக்குவது என்பதையும் நீங்கள் கட்டுப்படுத்தலாம், எ.கா. https://friendly-project-name.kinlan.now.sh/api/names?count=100

["melon-tangerine","broad-jury","rebel-hardcover","far-friend","notch-hornet","principled-wildcat","level-pilot","steadfast-bovid","holistic-plant","expensive-ulna","sixth-gear","political-wrench","marred-spatula","aware-weaver","awake-pair","nosy-hub","absorbing-petunia","rhetorical-birth","paint-sprint","stripe-reward","fine-guardian","coconut-jumbo","spangle-eye","sudden-euphonium","familiar-fossa","third-seaplane","workable-cough","hot-light","diligent-ceratonykus","literate-cobalt","tranquil-sandalwood","alabaster-pest","sage-detail","mousy-diascia","burly-food","fern-pie","confusion-capybara","harsh-asterisk","simple-triangle","brindle-collard","destiny-poppy","power-globeflower","ruby-crush","absorbed-trollius","meadow-blackberry","fierce-zipper","coal-mailbox","sponge-language","snow-lawyer","adjoining-bramble","deserted-flower","able-tortoise","equatorial-bugle","neat-evergreen","pointy-quart","occipital-tax","balsam-fork","dear-fairy","polished-produce","darkened-gondola","sugar-pantry","broad-slouch","safe-cormorant","foregoing-ostrich","quasar-mailman","glittery-marble","abalone-titanosaurus","descriptive-arch","nickel-ostrich","historical-candy","mire-mistake","painted-eater","pineapple-sassafras","pastoral-thief","holy-waterlily","mewing-humor","bubbly-cave","pepper-situation","nosy-colony","sprout-aries","cyan-bestseller","humorous-plywood","heavy-beauty","spiral-riverbed","gifted-income","lead-kiwi","pointed-catshark","ninth-ocean","purple-toucan","tundra-cut","coal-geography","icy-lunaria","agate-wildcat","respected-garlic","polar-almandine","periodic-narcissus","carbonated-waiter","lavish-breadfruit","confirmed-brand","repeated-period"]

பிரிப்பானின் வினவல்-சரம் அளவுருவுடன் நீங்கள் பிரிப்பானைக் கட்டுப்படுத்தலாம். அதாவது, பிரிப்பான் = @, எ.கா. https://friendly-project-name.kinlan.now.sh/api/names?separator=@

["handsomely@asterisk"]

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

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

நேரடி உதாரணம்

பின்வருவது செயல்பாட்டில் உள்ள API இன் மிக விரைவான எடுத்துக்காட்டு.

const render = (promise, elementId) => {
  promise.then(async(response) => {
    const el = document.getElementById(elementId);
    el.innerText = await response.text();
  })
};


onload = () => {
  render(fetch("https://friendly-project-name.kinlan.now.sh/api/names"), "basic");
  render(fetch("https://friendly-project-name.kinlan.now.sh/api/names?count=100"), "many");
  render(fetch("https://friendly-project-name.kinlan.now.sh/api/names?separator=@"), "separator");
}

ஒற்றை பதில்


பல மறுமொழிகள்


தனிப்பயன் பிரிப்பான்கள்


{{<raw-html>}}

{{</ raw-html>}}

Frankie and Bennys: Pay for your meal via the web

Paul Kinlan

நீங்கள் மொபைலில் பணம் செலுத்தலாம் என்று ஒரு உணவகம் சொல்வதை நான் பார்க்கும்போதெல்லாம், நான் எப்போதும் அதைப் பார்க்கிறேன், பெரும்பாலும் நீங்கள் ஒரு பயன்பாட்டைப் பயன்படுத்த வேண்டும் என்ற உண்மையைப் பற்றி நான் புலம்ப முடியும். QR குறியீடு இணைய அடிப்படையிலான கொடுப்பனவுகளுக்கு வழிவகுக்கும் போது எனது ஆச்சரியத்தை கற்பனை செய்து பாருங்கள் ..... அது வேலை செய்தது. அற்புதமான வேலை பிரான்கி மற்றும் பென்னியின்! இந்த கட்டத்தில், நான் Google Pay ஐத் தேர்ந்தெடுத்தேன், ஆனால் அது வேலை செய்யவில்லை (மின்னஞ்சல் உள்நாட்டில் அனுப்பப்பட்டது!) மாறாக அற்புதமான விஷயங்கள், இது ஒரு நிமிடம் முடிவடையும்.

Read More

Podroll

Adding "dark mode" to my blog

Paul Kinlan

நான் ஜெர்மி கீத்தின் post about adding dark mode to his blog பார்த்தேன், அது எளிமையானதாகத் தோன்றியது, எனவே நான் அதை ஒரு post about adding dark mode to his blog கொடுக்க முடிவு செய்தேன். அனைவருக்கும் பார்க்க இங்கே diff of the work உள்ளது. இது வியக்கத்தக்க எளிதானது (என் பங்கில் வேடிக்கையான பிழைகளுக்கு வெளியே). CSS மாறிகளை ஆதரிக்க ஒரு சிறிய மறுசீரமைப்பு இருந்தது மற்றும் CSS தனிப்பயன் பண்புகளை ஆதரிக்காத உலாவி இருந்தால் எனக்கு குறைவு இருப்பதை உறுதிசெய்கிறது, ஆனால் அது பற்றியது. ஜெர்மி செய்ததைப் போலவே நானும் செய்தேன்.

Read More

Using Web Mentions in a static site (Hugo)

Paul Kinlan

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

Read More

Creating a pop-out iframe with adoptNode and "magic iframes"

Paul Kinlan

புதுப்பிப்பு: அக்டோபர் 8 - இந்த ஆவணத்தில் குறிப்பிடத்தக்க சிக்கல்கள். இந்த இடுகையைப் பற்றி நான் Jake Archibald உடன் சிக்கிக் Jake Archibald ஏனென்றால் என்னிடம் ஏதோ புதினம் இருப்பதாக நான் நினைத்தேன், உரையாடலின் போது இந்த இடுகையில் சிலவற்றை செல்லாததாக்கும் பல விஷயங்களை நாங்கள் கண்டுபிடித்தோம், மேலும் பெரும்பாலான டெவலப்பர்கள் என்று நான் நினைக்காத இந்த செயல்பாட்டில் நான் நிறைய கற்றுக்கொண்டேன். தெரியும். .append() மற்றும் .appendChild() அழைப்பது .append() ஏற்றுக்கொள்கிறது. இந்த நிகழ்வில் adoptNode இன் adoptNode பயனற்றதாக adoptNode , ஏனெனில் இணைப்பு அல்காரிதம் முனை ஏற்றுக்கொள்ளப்படுவதை உறுதி செய்கிறது. இது MDN டாக்ஸில் குறிப்பிடப்படவில்லை, ஆனால் இது spec .

Read More

Meatspace Augmented Reality: From Chester to Nagoya

Paul Kinlan

Some thoughts on AR after finding some during my travels. TL;DR - cheaper content creation and better discovery tools are needed.

Read More

Photos from Carlisle Castle

Paul Kinlan

நான் சமீபத்தில் சிறுவர்களுடன் விடுமுறைக்குச் சென்றேன், நாங்கள் Carlisle Castle (உலகின் பிறப்பிடம் ஜேக் ஆர்க்கிபால்ட்). நாங்கள் இங்கிலாந்தில் இருந்த சிறந்த அரண்மனைகளில் இதுவும் ஒன்றாகும், நீங்கள் இப்பகுதியில் இருந்தால் அதைப் பார்வையிட சிறிது நேரம் செலவிடுமாறு மனதார பரிந்துரைக்கிறேன். இங்கிலாந்து மற்றும் ஸ்காட்லாந்தின் வரலாற்றில் கார்லிஸ்ல் கோட்டை வகித்த பங்கு எவ்வளவு முக்கியமானது என்பதை நான் செய்யவில்லை, நாங்கள் அங்கு இருந்தபோது மேலும் கண்டுபிடிப்பது மிகவும் நல்லது. ஸ்காட்லாந்தில் இருந்து திரும்பி வந்தபின், ஸ்காட்லாந்துடனான நமது எதிர்கால உறவுகளில் பிரெக்சிட் ஏற்படுத்தக்கூடிய சாத்தியமான தாக்கத்தை பிரதிபலிக்க எனக்கு வாய்ப்பு கிடைத்தது, மேலும் கார்லிஸ்ல் எவ்வளவு நெருக்கமாக இருக்கிறார், சுதந்திரத்திற்கான புதுப்பிக்கப்பட்ட உந்துதல் இருந்தால் என்ன நடக்கும் என்று அவருக்குத் தெரியும்.

Read More

Idle observation: Indexing text in images

Paul Kinlan

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

Read More

Liverpool World Museum

Paul Kinlan

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

Read More

Bookstore - Llangollen

Paul Kinlan

நான் இந்த இடத்தை விரும்புகிறேன், இது லாங்கொல்லனில் உள்ள ஒரு ஓட்டலின் மேல் உள்ளது. ஏறக்குறைய 30 ஆண்டுகளுக்கு முன்பு நான் என் தாத்தா பாட்டிகளுடன் இங்கு வந்தேன், அது இப்போது அதே தான். எனது ஒரே ஆசை என்னவென்றால், இன்னும் அதிகமான காமிக்ஸ் புத்தகங்கள் இருந்தன - நான் குழந்தையாக இருந்தபோது ஒரு குவியல் இருந்தது என்று சத்தியம் செய்கிறேன். Check it out

Read More

Webmention.app🔗

Paul Kinlan

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

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

மிகவும் அற்புதமான Remy Sharp webmention.app ஒரு பகுதியை தீர்க்க webmention.app ஐ உருவாக்கியது: webmention.app அனுப்புதல். சி.எல்.ஐ ஸ்கிரிப்டை அழைப்பதன் மூலம், நான் இணைத்துள்ள சாத்தியமான பெறுநர்களுக்கு 'பிங்ஸ்' அனுப்ப ரெமியின் கருவி எளிதாக்குகிறது.

ஹ்யூகோ மற்றும் நிலையான-பில்டர் கருவியைப் பயன்படுத்தி relatively trivial for me to add in support for webmention app பயன்படுத்தி எனது வலைப்பதிவை ஹோஸ்ட் செய்கிறேன், எனவே இது relatively trivial for me to add in support for webmention app . நான் npm i webmention , பின்னர் எனது build.sh கோப்பிலிருந்து கருவியின் CLI பதிப்பை அழைக்கிறேன் - இது மிகவும் எளிது.

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

Creating a commit with multiple files to Github with JS on the web

Paul Kinlan

எனது தளம் entirely static . இது Hugo உடன் கட்டப்பட்டுள்ளது மற்றும் Hugo உடன் Zeit . அமைப்பதில் நான் மிகவும் மகிழ்ச்சியடைகிறேன், உடனடி உருவாக்கங்கள் மற்றும் அதிவேக சி.டி.என் உள்ளடக்க உள்ளடக்க விநியோகத்தை நான் நெருங்குகிறேன், நான் எந்த மாநிலத்தையும் நிர்வகிக்க வேண்டியதில்லை என்பதால் எனக்குத் தேவையான எல்லாவற்றையும் செய்ய முடியும். இந்த தளத்திற்காக நான் ஒரு simple UI ஐ உருவாக்கியுள்ளேன், மேலும் எனது podcast creator ஆனது எனது நிலையான ஹோஸ்ட் செய்யப்பட்ட தளத்திற்கு புதிய உள்ளடக்கத்தை விரைவாக இடுகையிட உதவுகிறது. அதனால். நான் அதை எப்படி செய்தேன்? இது எனது கிதுப் ரெப்போ, எடிட்டர்ஜேஎஸ் ஆகியவற்றுக்கு எதிரான ஃபயர்பேஸ் அங்கீகாரத்தின் கலவையாகும், இது உள்ளடக்கத்தைத் திருத்துவதற்கு (இது சுத்தமாக இருக்கிறது) மற்றும் ஆக்டோகாட்.

Read More

Screen Recorder: recording microphone and the desktop audio at the same time🔗

Paul Kinlan

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

முந்தைய இடுகைகளில், அனைத்து உள்ளீட்டு மூலங்களிலிருந்தும் ஸ்ட்ரீம்களைப் பற்றிக் கொண்டு screen recording and a voice overlay பெற்றேன். விரக்தியின் ஒரு பகுதி என்னவென்றால், டெஸ்க்டாப்பில் இருந்து ஆடியோவை எவ்வாறு பெறுவது என்று என்னால் வேலை செய்ய முடியவில்லை * மற்றும் * ஸ்பீக்கரிடமிருந்து ஆடியோவை மேலடுக்கு. நான் அதை எப்படி செய்வது என்று இறுதியாக வேலை செய்தேன்.

முதலாவதாக, Chrome இல் உள்ள getDisplayMedia இப்போது ஆடியோ பிடிப்பை அனுமதிக்கிறது, ஸ்பெக்கில் ஒற்றைப்படை மேற்பார்வை இருப்பது போல் தெரிகிறது, இது செயல்பாட்டு அழைப்பில் audio: true ஐ குறிப்பிட உங்களை அனுமதிக்கவில்லை, இப்போது உங்களால் முடியும்.

const audio = audioToggle.checked || false;
desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: audio });

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

தீர்வு அநேகருக்கு எளிதானது, ஆனால் இது எனக்கு புதியது: வலை ஆடியோவைப் பயன்படுத்துங்கள்.

WebAudio API இல் createMediaStreamSource மற்றும் createMediaStreamDestination உள்ளது என்று மாறிவிடும், இவை இரண்டும் சிக்கலைத் தீர்க்க API இன் தேவை. createMediaStreamSource எனது டெஸ்க்டாப் ஆடியோ மற்றும் மைக்ரோஃபோனிலிருந்து ஸ்ட்ரீம்களை எடுக்க முடியும், மேலும் createMediaStreamDestination உருவாக்கிய createMediaStreamDestination மூலம் இந்த ஒரு ஸ்ட்ரீமை MediaRecorder API இல் குழாய் createMediaStreamDestination திறனை இது தருகிறது.

const mergeAudioStreams = (desktopStream, voiceStream) => {
  const context = new AudioContext();
    
  // Create a couple of sources
  const source1 = context.createMediaStreamSource(desktopStream);
  const source2 = context.createMediaStreamSource(voiceStream);
  const destination = context.createMediaStreamDestination();
  
  const desktopGain = context.createGain();
  const voiceGain = context.createGain();
    
  desktopGain.gain.value = 0.7;
  voiceGain.gain.value = 0.7;
   
  source1.connect(desktopGain).connect(destination);
  // Connect source2
  source2.connect(voiceGain).connect(destination);
    
  return destination.stream.getAudioTracks();
};

எளிய.

முழு குறியீட்டை my glitch இல் my glitch , மேலும் டெமோவை இங்கே காணலாம்: https://screen-record-voice.glitch.me/

{{<fast-youtube oGIdqcMFKlA>}}

Extracting text from an image: Experiments with Shape Detection🔗

Paul Kinlan

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

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

இணைய இயங்குதள இரண்டு புதிய சேர்த்தல் - பகிர் இலக்கு நிலை 2 (அல்லது நான் அதை கோப்பு பகிர்ந்து அழைக்க விரும்பும்) மற்றும் TextDetector வடிவம் கண்டறிதல் API இல் - have allowed me to build a utility that I can Share images to and get the text held inside them .

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

Share Target API உங்கள் வலை பயன்பாட்டை சொந்த பகிர்வு துணை அமைப்பின் ஒரு பகுதியாக இருக்க அனுமதிக்கிறது, இந்த விஷயத்தில் நீங்கள் இப்போது உங்கள் Web App Manifest வகைகளை பின்வருமாறு அறிவிப்பதன் மூலம் அனைத்து image/* வகைகளையும் கையாள பதிவு செய்யலாம்.

"share_target": {
  "action": "/index.html",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"]
      }
    ]
  }
}

உங்கள் PWA நிறுவப்பட்டதும் பின்வருமாறு படங்களை பகிரும் எல்லா இடங்களிலும் அதைப் பார்ப்பீர்கள்:

Share Target API ஒரு படிவ இடுகையைப் போன்ற கோப்புகளைப் பகிர்வதைக் கருதுகிறது. வலை பயன்பாட்டில் கோப்பு பகிரப்படும்போது, சேவை பணியாளர் செயல்படுத்தப்படுகிறார், fetch கையாளுநர் கோப்பு தரவுடன் செயல்படுத்தப்படுகிறார். தரவு இப்போது சேவை பணியாளருக்குள் உள்ளது, ஆனால் தற்போதைய சாளரத்தில் எனக்கு இது தேவைப்படுகிறது, அதனால் நான் அதைச் செயலாக்க முடியும், எந்த சாளரம் கோரிக்கையைச் செயல்படுத்தியது என்பது சேவைக்குத் தெரியும், எனவே நீங்கள் கிளையண்டை எளிதாக குறிவைத்து தரவை அனுப்பலாம்.

self.addEventListener('fetch', event => {
  if (event.request.method === 'POST') {
    event.respondWith(Response.redirect('/index.html'));
    event.waitUntil(async function () {
      const data = await event.request.formData();
      const client = await self.clients.get(event.resultingClientId || event.clientId);
      const file = data.get('file');
      client.postMessage({ file, action: 'load-image' });
    }());
    
    return;
  }
  ...
  ...
}

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

navigator.serviceWorker.onmessage = (event) => {  
  const file = event.data.file;
  const imgEl = document.getElementById('img');
  const outputEl = document.getElementById('output');
  const objUrl = URL.createObjectURL(file);
  imgEl.src = objUrl;
  imgEl.onload = () => {
    const texts = await textDetector.detect(imgEl);
    texts.forEach(text => {
      const textEl = document.createElement('p');
      textEl.textContent = text.rawValue;
      outputEl.appendChild(textEl);
    });
  };
  ...
};

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

சுழற்சியைக் கண்டறிய EXIF-Js library ஐப் பயன்படுத்துவதை நான் எளிதாகப் பயன்படுத்தினேன், பின்னர் படத்தை மீண்டும் திசைதிருப்ப சில அடிப்படை கேன்வாஸ் கையாளுதல்களைச் செய்தேன்.

EXIF.getData(imgEl, async function() {
  // http://sylvana.net/jpegcrop/exif_orientation.html
  const orientation = EXIF.getTag(this, 'Orientation');
  const [width, height] = (orientation > 4) 
                  ? [ imgEl.naturalWidth, imgEl.naturalHeight ]
                  : [ imgEl.naturalHeight, imgEl.naturalWidth ];

  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext('2d');
  // We have to get the correct orientation for the image
  // See also https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
  switch(orientation) {
    case 2: context.transform(-1, 0, 0, 1, width, 0); break;
    case 3: context.transform(-1, 0, 0, -1, width, height); break;
    case 4: context.transform(1, 0, 0, -1, 0, height); break;
    case 5: context.transform(0, 1, 1, 0, 0, 0); break;
    case 6: context.transform(0, 1, -1, 0, height, 0); break;
    case 7: context.transform(0, -1, -1, 0, height, width); break;
    case 8: context.transform(0, -1, 1, 0, 0, width); break;
  }
  context.drawImage(imgEl, 0, 0);
}

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

இந்த சிறிய பரிசோதனையை உருவாக்குவது நம்பமுடியாத வேடிக்கையாக இருந்தது, அது எனக்கு உடனடியாக பயனுள்ளதாக இருந்தது. இருப்பினும், இது inconsistency of the web platform முன்னிலைப்படுத்துகிறது. இந்த API கள் எல்லா உலாவிகளிலும் கிடைக்கவில்லை, அவை Chrome இன் எல்லா பதிப்பிலும் கூட கிடைக்கவில்லை - இதன் பொருள் நான் இந்த கட்டுரையை Chrome OS ஐ எழுதும்போது, பயன்பாட்டைப் பயன்படுத்த முடியாது, ஆனால் அதே நேரத்தில், நான் அதைப் பயன்படுத்தும்போது ... ஓஎம்ஜி, மிகவும் குளிராக இருக்கிறது.

Wood Carving found in Engakuji Shrine near Kamakura

Sakura

Paul Kinlan

இது மிகவும் குறிப்பாக குறிப்பாக 'யேசுகுரா'

Read More