Configuring hugo server to serve 'mjs' ES modules — ⭐
முன்னிருப்பாக ஹ்யூகோ சரியான உள்ளடக்க வகையுடன் .mjs கோப்புகளைப் பரிமாறாது. உண்மையில், சமீபத்தில் வரை ஹ்யூகோ ஒரு MIME வகைக்கு ஒன்றுக்கும் மேற்பட்ட கோப்பு நீட்டிப்புகளை வழங்க முடியும். இது v0.43 உடன் தெரிகிறது, இது சரி செய்யப்பட்டது.
[mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”]
மேலே உள்ள குறியீடு சரியான MIME வகை (குறிப்பு தொகுதிகள் ‘உரை / ஜாவாஸ்கிரிப்ட்’ உடன் வழங்கப்பட வேண்டும்) உடன் ES Modules க்கான mjs கோப்புகளைப் பரிமாற உதவுகிறது. இந்த உள்ளூர் சோதனை தேவைப்படுகிறது, ஹோஸ்டிங் மற்றொரு சிக்கல் :)
Thoughts on importing npm modules to the web as JavaScript modules — ⭐
நான் எம்.எஸ் தொகுதிகள் பற்றி நேற்று செய்ததைப் பற்றிய எண்ணங்கள் கிடைத்தன
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).
I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:
- Create a file that imports the npm module I needed. module.exports = require(‘get-urls’); This module will be what’s converted to ES6 style.
- Create a rollup config that
- Imports the node globals, and builtins.
- Resolves all npm modules required for my usage of this module.
- Pass the results through the commonjs plugin so that it’s now in JavaScript module format.
- Compress the output, because it’s huge :
- Include the bundled file in your project and rejoice.
நான் அசல் கட்டுரையில் முயற்சி மற்றும் வெளிப்படையாக வேண்டும் என்று விஷயங்களை ஒன்று ஆனால் நான் வெளியே இழுக்க முடிவு என்று முனை சுற்றுச்சூழல் குறிப்பாக குறியீடு என்று ஒரு பெரிய அளவு இல்லை என்று குறிப்பாக அந்த நோட் per se ஆனால் இறுக்கமாக இணைந்த வருகிறது பொது ஜஸ் மற்றும் பிற மிகவும் குறிப்பிட்ட முனைய API வழியாக (முள், பழைய URL ஹிப்ரு போன்றவை), அது நம்மை இழுக்க முயற்சிக்க நிறைய முயற்சிகள் எடுக்கப் போகிறது, இதனால் ES Modules எங்கும் பரவுவதற்கு சாத்தியம் மிக வலிமையானதாக இருக்கும், மற்றும் சுற்றுச்சூழல் மாற்றங்கள் நாம் மாற்று கருவிகள் மற்றும் பண்ட்லர்களை நிறைய பயன்படுத்த வேண்டும் போகிறது பல தளங்களில் (வலை / சர்வர்) முழுவதும் குறியீடு பகிர்ந்து கொள்ள முடியும்.
நாம் எங்கே இருக்கிறோம், இணையத்தில் ஒரு இறக்குமதி கதை இல்லை, நாம் நாட் அறிமுகப்படுத்தியது மற்றும் பல இப்போது de-facto மேடையில் தேவைகளை கருத்தில் இப்போது என்ன primitives ஒரு குவியல் இல்லை, அதனால் நான் ஒரு விமர்சனத்தை விட நிலைமையை ஒப்புக் கொள்ளுதல்.
‘Mjs’ ஐ ஒரு கோப்பு நீட்டிப்பாக பயன்படுத்த ஒரு நகர் உள்ளது. நான் இதை முழுமையாக வசதியாக உணர்கிறேன், எனினும். Msj எந்த உள்கட்டமைப்பு இன்னும் ‘உரை / ஜாவாஸ்கிரிப்ட்’ என அங்கீகரிக்கிறது என்று ஒரு கோப்பு இல்லை மற்றும் நான் அதை தானாகவே கிரகத்தில் ஒவ்வொரு வலை சர்வர் மூலம் ஊடுருவி அதனால் தான் வரிசைப்படுத்தப்பட்ட வருகிறது, என் சேவை உள்கட்டமைப்பிற்கு இன்னும் அதிகமான மாற்றங்களை நான் பயன்படுத்த வேண்டியதில்லை.
மேலே வேடிக்கை நிறைய நேரம், நான் வலை நிறைய செயல்பாடு கொண்டு முடியும் எதிர்பார்த்து நான்.
Importing npm modules to the web as JavaScript modules
நான் என் நிலையான தளத்தில் உள்ளடக்கம் தள்ள எளிதாக ஒரு வழி வேலை மற்றும் நான் மற்றொரு இடுகையில் இன்னும் பகிர்ந்து என்று ஒரு வேடிக்கை சிறிய உடற்பயிற்சி தான். இந்த இடுகையில், நான் rollup கட்டமைப்பைப் பகிர்ந்து கொள்ள விரும்புகிறேன், நான் எந்த npm தொகுதிக்கூடத்தையும் ஜாவாஸ்கிரிப்ட் தொகுதிக்கூறுகளைப் பயன்படுத்தி முன்முயற்சிகளிலிருந்து இறக்குமதி செய்வதற்கு பயன்படுத்தினேன். என் திட்டத்தில் ஒரு எளிய தொகுதி கிடைக்கும்-URL கள் இறக்குமதி செய்வதற்கு ஒரு விரைவு வழி தேவை. தொகுதி நன்றாக சோதனை மற்றும் நான் தேவை என்ன செய்கிறது … அது ஜாவா வரிகளை ஒரு ஜோடி செயல்படுத்த மிகவும் எளிது என்று உண்மையில் புறக்கணிக்க.
This.Javascript: State of Browsers - YouTube — ⭐
ட்ரேசி லீ இந்த டாட் இலிருந்து ஒரு மாறாக நேர்த்தியான நேரடி ஸ்ட்ரீம் ஏற்பாடு செய்து, பல உலாவி விற்பனையாளர்களிடத்தில் அவர்கள் என்ன வேலை செய்கிறார்கள் என்பதைக் குறித்து தெரிவிக்க வேண்டும்:
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
நான் நேரடியாக நேரடி ஸ்ட்ரீம் அனுபவித்து எல்லோருக்கும் வரை என்ன கேட்க நன்றாக இருந்தது. நான் பீக்கர் உலாவி விநியோகிக்கப்பட்ட வலைக்கு பார்வைக்கு நேசிக்கிறேன், நாங்கள் சந்தித்த கடைசி நேரத்திலிருந்து நிறைய வேலைகளை செய்துள்ளேன்.
இணைக்கப்பட்ட வீடியோவை நீங்கள் பார்க்கும்படி நான் ஊக்குவிக்கிறேன், எட்ஜ் முழு சேவை ஊழியர் ஆதரவு, மாறி எழுத்துருக்கள் மற்றும் வலைப்பின்னலை அறிமுகப்படுத்துதல் உட்பட பெரிய எண்ணிக்கையிலான புதுப்பிப்புகளைக் கொண்டுள்ளது. மோசில்லா வலை சட்டசபை மற்றும் டெவெலப்பர் கருவி மீது ஒரு பெரிய கவனம் செலுத்துகிறது, பீக்கர் அற்புதமான விஷயங்களை செய்து வருகிறது: மற்றும் விநியோகிக்கப்படும் கணினி மற்றும் பிரேவ் பாட் மீது alot சேர்த்து நகரும்.
நான் எங்கள் குழுவின் நேரத்தில் செய்கிறேன் என்று வேலை கவனம், மற்றும் அது டிஸ்கவரி, ஸ்பீடு மற்றும் நம்பகத்தன்மை, UI Responsiveness, UX சுற்றி பரந்த உள்ளது - பொருட்களை செய்து, பாதுகாப்பு மற்றும் தனியுரிமை. இன்னும் சிறிது உறுதியாக:
- கண்டுபிடிப்பு - டெவலப்பர்கள், குறியீட்டாளர்கள் மற்றும் உட்பொதிப்பாளர்கள் போன்ற தலைமையற்ற சேவைகளில் வழங்கக்கூடிய தளங்களை உருவாக்குவதற்கு எளிதாக இருக்க வேண்டும். இதன் அர்த்தம் என்னவென்றால் டெவலப்பர்கள் எவ்வாறு குறியாக்கிகள் வேலை செய்வது மற்றும் அவற்றுக்கு எதிராக எவ்வாறு சோதனை செய்வது, மற்றும் எப்படி திடமான SSR அனுபவங்களை உருவாக்குவது ஆகியவற்றைக் கற்றுக்கொடுக்க வேண்டும். * வேகம் மற்றும் நம்பகத்தன்மையை - எல்லா தளங்களும் ஒரு சாதனத்தை 3 ஜி பிணையத்தில் மீடியா சாதனத்தில் (ஒரு மோட்டோஜி 4⁄5) இணைக்க வேண்டும் மற்றும் உங்கள் FID (முதல் உள்ளீட்டு தாமதத்தை) மேம்படுத்த வேண்டும். FID என்பது ஒரு புதிய மெட்ரிக் ஆகும், எனவே உங்கள் பயனர்கள் உங்கள் தளத்தை உங்கள் வயதில் எப்படி அனுபவிக்கிறார்கள் என்பதை விளக்கும் வகையில் முக்கியம், TTI அளவிட கடினமாக உள்ளது, FID எளிதாக இருக்க வேண்டும். UID Responsiveness - இணையம் 60fps எல்லா இடங்களிலும் இருக்க வேண்டும் மற்றும் டெவலப்பர்கள் எளிதாக அடையலாம், எனவே FID ஐ சோதனை செய்ய பயன்படுத்தலாம் [github.com/GoogleChromeLabs/first-input-delay) நாங்கள் & # x2018; FLIP & # x2019; எளிதாக புரிந்து கொள்ளவும், ஹவுடைனை உருவாக்குவதன் மூலம் டெவலப்பர்களிடையே அதிகமான கட்டுப்பாடுகளை வழங்குவதற்கும், இறுதியில் img.decode மற்றும் கூட்டிணைப்பு போன்ற கருவிகளைப் பயன்படுத்தி முடிந்தவரை ‘ஆஃப்-பிரதான நூல்’ என முடிந்தவரை அதிகமான பணியை முடிக்க முயற்சிப்போம். பயன்படுத்த எளிதானது. * UX - விஷயங்களைச் செய்யுங்கள் - மேடையில் வரும் புதிய அம்சங்களைப் பற்றி நாம் பேசுவதை நாங்கள் உண்மையில் மாற்ற விரும்புகிறோம், குறிப்பாக தொழில்நுட்பம் பயனர்கள் தங்கள் வேலையை விரைவாக செய்ய உதவுவதற்கு பயனளிக்கும் அனுபவங்களை திறம்பட பயன்படுத்த வேண்டும் என்பதை காட்ட விரும்புகிறோம். முடிந்தவரை சிறிய குறுக்கீடு கொண்ட. * பாதுகாப்பு மற்றும் தனியுரிமை - நான் Apple இன் நுண்ணறிவு கண்காணிப்பு தடுப்பு வலை ஒரு நீண்ட கால தாக்கம் வேண்டும் என்று நினைக்கிறேன் மற்றும் டெவலப்பர்கள் தனியுரிமை ஆதரவு வலை அனுபவங்கள் கட்டி பற்றி மேலும் யோசிக்க தொடங்க வேண்டும். ஜி.பீ.டி.ஆர் ஏதேனும் ஒன்றில் ஐரோப்பிய ஒன்றியத்தில் ஒரு சுவாரஸ்யமான அனுபவத்தை உருவாக்குகிறது.
இறுதியாக, அனைவருக்கும் வலை இண்டெண்ட்ஸ் மீண்டும் வர விரும்புகிறதா என்று கேட்க humbling மற்றும் இதய வெப்பம் இருந்தது :)
PWACompat: the Web App Manifest for all browsers - @ChromiumDev — ⭐
சாம் தோரோகுட் எங்கள் அணியில் இருந்து எழுதுகிறார்:
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. Enter PWACompat, a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc.
இந்த நூலகத்தினால் நான் வியப்படைந்தேன், அது ஒரு பிட் கவனத்தை ஈர்த்தது எனக்கு மகிழ்ச்சி. நான் உண்மையில் கடந்த 5 ஆண்டுகளில் iOS வேலை ஸ்பிளாஸ் ஸ்கிரீன் பார்த்த முதல் முறையாக அவர் ஒரு மிகவும் சுத்தமாகவும் அவர்களை உருவாக்குகிறது - அவர் சாதனம் துல்லியமான திரை அளவு அடிப்படையில் படத்தில் படத்தை உருவாக்குகிறது மற்றும் base64 குறியிடுகிறது படம் … இது Safari இல் உள்ள மீதமுள்ள மீதமுள்ள நிறைய வீடுகளில் கதையைச் சேர்ந்தது.
நீங்கள் ஒரு PWA ஐ கட்டமைத்திருந்தால் நான் அதை சேர்ப்பேன்.
Font Playground - Play with variable fonts! — ⭐
Font Playground is built for three groups of audiences.
The first group of audience is typographers and designers, who would like to play with fonts that are built with the latest font technologies, such as variable font. It is a playground to fully explore what these new font technologies can offer and how they can be beneficial to your creative workflow.
The second group of audience is me, as a Type Tool’s UI/UX designer. This is a playground for me to test UI experiments for variable fonts and other new upcoming font technologies. One of the key points to the success of new font technology is adoption by design tools, and furthermore, designers. How can design tool present variable fonts in a way that is useful but not too complicated to handle? I hope to find the answers with this playground.
The third group of audience is the type designers and foundries. This is a place to showcase the work-in-progress, cutting-edge font creations. It is a playground to see how fonts are being presented and used in future design tools. How fonts are used can also inform how fonts are made, and what standard should be defined.
இந்த மாறி எழுத்துருக்கள் ஒரு பெரிய அறிமுகம் மற்றும் விரைவில் நீங்கள் நடவடிக்கை வேறுபடும் என்று எல்லாம் பார்க்க ஒரு பெரிய விளையாட்டு மைதானத்தின் தான். பல உரை வரிகளை சேர்ப்பது விரைவில் இறங்கும் என தெரிகிறது.
குறிப்பு: இது Firefox இல் இன்னும் வேலை செய்யாது என நம்புகிறேன், ஏனெனில் அவர்கள் மாறி எழுத்துருக்களை முழுமையாக ஆதரிக்கவில்லை.
did.txt file - Patrick — ⭐
பேட்ரிக் Did.t.txt பற்றி எழுதுகிறார்
Time flies by when you’re learning how to code. Its super important to take a second every once in a while to simple write down what you did during the past mental sprint. Writing down what you learned solidifies the knowledge.
இது நாம் உட்கொண்டதை விட ஒரு மில்லியன் மைல்களுக்கு அப்பால் இல்லை, எங்களிடம் ‘துணுக்குகள்’ என்ற கருத்து உள்ளது. நீங்கள் அதை எப்படி நிர்வகிக்கிறீர்கள் என்பது உங்களுக்குத் தெரியும், ஆனால் நீங்கள் செய்ததைக் கண்காணிக்கும் ஒரு சிறந்த வழியாகும், ஆனால் உங்கள் குழுவினருடன் பகிர்ந்து கொள்ளுங்கள், உங்களுடைய நண்பர்கள், மேலாளர்கள் மற்றும் அறிக்கைகள் என்ன செய்கிறீர்கள் என்பதைப் பற்றிய ஒரு நல்ல படம் கிடைக்கும்.
ஒவ்வொரு வாரம் சுருக்கத்தையும் ஒரு ‘நான் என்ன செய்தேன்’ மற்றும் ‘இந்த வாரம் என்ன செய்ய வேண்டும் என்று விரும்புகிறேன்’ என்று பிரிக்க விரும்புகிறேன். இது எனக்கு ஒரே நேரத்தில் பிரதிபலிக்கும் மற்றும் திட்டமிட உதவுகிறது.
Hyperlinking Beyond the Web - CSS-Tricks — ⭐
CSS தந்திரங்களை மீது Atishay ஜெயின் இணைக்கும் என் இதயம் அருகில் ஒரு பகுதியில் பற்றி எழுதுகிறார்:
Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app).
Let’s see why we’d want to take advantage of this feature and how to do it.
இது பயன்பாடுகள் மற்றும் தளங்களுக்கான ஹைப்பர்லிங்கிங்கின் அனைத்து வகையான வகைகளையும் உள்ளடக்கிய பெரிய கட்டுரை ஆகும். வலை இண்டெண்ட்ஸ் மற்றும் வலையில் மேம்பட்ட இணைந்திருக்கும் நிலை ஆகியவை விரும்பியதற்கு நிறைய இடங்களை விட்டுவிட்டதால், இந்த இடத்திற்கு நான் நிறைய ஆராய்ச்சி செய்து வருகிறேன்.
நான் வலை நேசிக்கிறேன் ஏன் ஒரு காரணம், ஒரு இணைப்பை பின்னால் ஆதாரம் நேரடி அணுகல் உள்ளது, நான் அதே வழியில் இணைப்பை மற்றும் உண்மையான வள இணைக்க முடியும் வேறு எந்த மேடையில் தெரியாது, ஆனால் அது மிகவும் soooo முடியும் மேலும். நிலையான இணைப்பு முக்கியமாக ஒரு பார்வை நோக்கம் கொண்டது, அதில் மாநில (url) மற்றும் சூழல் (அறிவிப்பாளர்களிடையே உரை) அடங்கியுள்ளது, மேலும் இது வழக்கமான நெறிமுறைகளுடன் நீங்கள் ஹேக் செய்யலாம் ஆனால் நாம் இன்னும் நிறைய செல்ல வேண்டும்.
- அதிகப்படியான இயல்பான திட்டங்களுக்கான அனைத்து அணுகல்களுக்கும் ‘registerProtocolHandler` என்ற சொற்களையே நாம் விரிவுபடுத்த வேண்டும் * நெறிமுறை கையாளுருடன் பதிவுசெய்யப்பட்ட ஏதேனும் அமைப்பு பரவலாக இருக்க வேண்டும். * இணைய தளங்களை உள்ளடக்க வகைகளை திறக்க முடியும் மற்றும் ஒரு கணினி கோப்பு கையாளுகையாக பதிவு செய்யக்கூடிய பக்கங்களைக் கொண்டிருக்க முடியும். * டெவலப்பர்களுக்கான உயர் வரிசை ஒழுங்கு நடவடிக்கைகளை நாங்கள் கொண்டிருக்க வேண்டும், VIEW பெரியது, PICK, Save, EDIT போன்ற பிரதான செயல்களின் தொகுப்பை நாங்கள் ஏற்றுக் கொள்ள வேண்டும், இதன் மூலம் நாங்கள் ஒரு தளத்தின் அல்லது பயன்பாட்டின் திறன்களை மேலும் திறம்பட புரிந்து கொள்ள முடியும், மேலும் நீட்டிக்கக்கூடிய திறன் அவை உயர் வரிசை பொருள்களைக் கொண்டவை. அண்ட்ராய்டு இது உள்ளது, ஸ்ரீ அதை பெறுகிறது, இரண்டு ‘இண்டெண்ட்ஸ்’ பயன்படுத்தி, வலை அதை வேண்டும்.
PostMessage பைத்தியத்தின் சுமையை நீக்குவதன் மூலம் Comlink போன்ற செய்திகளைப் பற்றி எனக்கு மிகவும் ஆர்வமாக உள்ள காரணங்களில் இதுவும் ஒன்றாகும், மேலும் பிற பிற்போக்கு செயல்பாடு பற்றி நீங்கள் யோசிக்க வேண்டும் பயன்பாடுகள், பின்னர் நீங்கள் செயல்பாட்டை அம்பலப்படுத்திய பின் நீங்கள் அந்த செயல்பாட்டை கண்டுபிடிப்பதை மேலும் எளிதில் செயல்படுத்த வேண்டும் … மேலும் இது இணைப்புகள் செயல்படுத்தப்படும்.
Google Doesn't Have the Guts to Make Page Speed Actually Matter — ⭐
Redfin இருந்து டான் வலை வேகம் முன்னுரிமை பற்றி ஒரு பெரிய பதவியை கொண்டுள்ளது:
JavaScript Is the Web’s CO2
As a web developer, I find that most problems can be solved with just a little more JavaScript. Without someone or something to force the industry to cut back, web developers will continue to make web sites that only load “fast enough” via wifi on a fast laptop.
The browser vendors can’t save us. Every time they make the web faster, web developers “take advantage” of the change by using more JavaScript.
Our industry needs Google to take a principled stand, to significantly prioritize fast-loading sites over slow-loading sites
இது நமக்கு மட்டும் அல்ல (கூகிள்). நான் எங்கள் அணியை (வலை மற்றும் Chrome DevRel) வேகமாகவும் வேகமாகவும் தொடர உதவும் கருவிகளை மற்றும் வழிகாட்டலை வழங்க முடிகிறது, ஆனால் அதற்குப் பிறகு அந்த தொழிற்துறை ஒரு செயல்திறன் என்பது ஒரு அம்சம் அல்ல, ஒரு சிந்தனைக்குப் பிறகு அல்ல என்பதை அங்கீகரிக்க வேண்டும்.
டெவலப்பர்கள் செயல்திறனை முன்னுரிமை செய்யாத பல காரணங்கள் இன்னும் இருக்கின்றன (கருவிகள், வழிகாட்டல் மற்றும் தெளிவான வணிக ஊக்கங்கள்) நான் வலை டெவலப்பர்களுக்கான சவால்கள் ), நான் டான் கட்டுரை இடுகையில் எழுதப்பட்ட என கூறி உறுதி வலையில் நீண்ட கால சுகாதார பதில், அது நல்ல செயல்திறன் மாற்றும் பார்க்கும் தொழில்கள் இருந்து வர வேண்டும்.
TRACK | A WebGL Experiment by Little Workshop — ⭐
This project is a musical experience built with WebGL and WebVR.
Inspired by the music track, we created an ever-changing environment composed of various geometrical shapes. These were generated procedurally in Houdini and exported to Three.js.
All visual elements are randomized differently on each viewing.
நான் சேர்க்க மிகவும் இல்லை, இது முற்றிலும் ஆச்சரியமாக இருக்கிறது. அதை பாருங்கள்.
Getting started with the Ambient Light Sensor — ⭐
டீன் ஹியூம் PWA இன் சமீபத்தில் நிறைய வேலைகளை செய்து வருகிறார், மேலும் புதிய மேடையில் ஏபிஐ நிறைய விஷயங்களை ஆராய்கிறார், இந்த வழக்கில் பொதுவான சென்சார் ஏபிஐ:
The Ambient Light Sensor API provides developers with the means to determine ambient light levels as detected by the device’s main light detector. This information is available to developers in terms of lux units. If you are building a Progressive Web App and you want to style it differently depending on the light levels in the room, then this could be the feature for you. There are a number of use cases for this feature, such as a web application that provides input for a smart home system to control lighting, a “Kindle” style reading app, or even a web app that calculates settings for a camera with manual controls (aperture, shutter speed, ISO, etc.).
நான் Chrome தேவ் உச்சிமாநாடு 2016 இல் பொதுவான சென்சார் ஏபிஐ பற்றிப் பேசினேன், அது Chrome இல் நிலுவையொன்றை நிச்சயமாக எடுத்துக் கொண்டது (அது இன்னும் ஒரு கொடிக்குப் பின்னால் உள்ளது) அது முதலில் எட்ஜ் தரையிறங்கியது போல் தெரிகிறது. சுற்றுச்சூழல் ஒளி உணரி பொதுவான API களின் மேல் கட்டப்பட்ட பல API களில் ஒன்றாகும் & mdash; gyro மற்றும் magnetometers போன்ற இன்னும் உள்ளன & mdash; மற்றும் பயனர் பிரகாசத்தின் தானியங்கி சரிசெய்தல் போன்ற பயன்பாட்டு-வழக்குகள் திறக்க அல்லது ஒரு இருண்ட முறை தீம் மாற பயனர் வழங்கி கூட சுற்றி சுற்றுப்புற ஒளி அளவு பற்றிய தகவல்களை பெற அனுமதிக்கிறது. இது நிச்சயமாக அடிப்படை பொதுவான சென்சார் ஏபி வலை அனுபவங்களை கொண்டு என்ன பார்க்க சுவாரசியமான போகிறது.
Web Architecture 101 - VideoBlocks — ⭐
ஜோனதன் ஃபுல்டன், வீடியோலாக்ஸ்:
The basic architecture concepts I wish I knew when I was getting started as a web developer
இது பல வலை பயன்பாடுகள் அளவிட வடிவமைக்கப்பட்டுள்ளது ஒரு ஒப்பீட்டளவில் நிலையான ஸ்டேக் ஒரு பெரும் கண்ணோட்டத்தை கொடுக்கிறது என்று ஒரு அற்புதமான கட்டுரை. ஹெலோகோ, ஃபயர்பேஸ் அல்லது அப்ஜெஞ்ஜின் போன்ற ஒரு சேவை கருவிகளை மேடையில் விரும்புவதற்கு நிறைய டெவலப்பர்கள் ஏன் செலவழிக்கின்றார்கள் என்பதில் சிக்கல் மிகுந்ததாக இருக்கும் என்பதையும் இது காட்டுகிறது.
Introduction to Feature Policy — ⭐
கூகிள் டெவலப்பர் வலை புதுப்பிப்புகளில் எரிக் பிடல்மான் எழுதுகிறார்:
Building for the web is a rocky adventure. It’s hard enough to build a top-notch web app that nails performance and uses all the latest best practices. It’s even harder to keep that experience great over time. As your project evolves, developers come on board, new features land, and the codebase grows. That Great Experience ™ you once achieved may begin to deteriorate and UX starts to suffer! Feature Policy is designed to keep you on track.
With Feature Policy, you opt-in to a set of “policies” for the browser to enforce on specific features used throughout your site. These policies restrict what APIs the site can access or modify the browser’s default behavior for certain features.
Here are examples of things you can do with Feature Policy:
- Change the default behavior of autoplay on mobile and third party videos.
- Restrict a site from using sensitive APIs like camera or microphone.
- Allow iframes to use the fullscreen API.
- Block the use of outdated APIs like synchronous XHR and document.write().
- Ensure images are sized properly (e.g. prevent layout thrashing) and are not too big for the viewport (e.g. waste user’s bandwidth).
Policies are a contract between developer and browser. They inform the browser about what the developer’s intent is and thus, help keep us honest when our app tries to go off the rails and do something bad. If the site or embedded third-party content attempts to violate any of the developer’s preselected rules, the browser overrides the behavior with better UX or blocks the API altogether.
இந்த நிலங்களை எவ்வாறு பார்க்க விரும்புகிறேன். டெவலப்பர்கள் இதைப் பற்றி கவலைப்பட மாட்டார்கள், அல்லது அவர்கள் அழுத்தம் கொடுப்பார்கள் என்று கவலைப்படுகிறேன். நான் ட்விட்டர் மீது, நான் ஊக்கங்கள் பற்றி கவலைப்படுகிறேன் மற்றும் இந்த அம்சம் டெவலப்பர்கள் கிடைக்கும் என்று அம்சங்களை ஒரு பெரிய எண் கட்டுப்படுத்த அனுமதிக்க வேண்டும் என்று இணைக்க வேண்டும் நினைவகத்தை எடுத்துக் கொள்ளுங்கள், பக்கத்தை மெதுவாக நகர்த்தலாம் அல்லது தேவையற்ற முறையில் மூன்றாம் தரப்பினருக்கு உட்பொதிந்த பயனர் தனியுரிமையை கையாளலாம், உருவாக்குநர்கள் தங்கள் வியாபாரத்திற்கு விற்க முடியும். ஒரு உதாரணம் ** Play Store ஆனது PWA பட்டியலிடப்பட்டிருந்தால், பின்னர் பயன்பாட்டை தொடங்கும்போது தானாகவே பயன்படுத்தப்படும் கொள்கைகள் கொண்ட தொகுப்புடன் வரலாம், மேலும் நீங்கள் ஒரு டெவெலபர் எனில், கடை.
இந்த ஏபிஐ என்ன நடக்கிறது என்று பார்க்க நான் மிகவும் மகிழ்ச்சியடைகிறேன், அது மட்டுமே தங்கள் குழுக்கள் திருப்தி இல்லை என்பதை உறுதி செய்ய டெவலப்பர்கள் பயன்படுத்தப்படுகிறது கூட, அதை ஏற்று பார்க்க ஆர்வமாக இருக்கிறேன்.
Understanding Storage Quota | Workbox — ⭐
Jeff Posnick எழுதுகிறார், Workbox க்கு எழுதவும்
A common source of unexpectedly high quota usage is due to runtime caching of opaque responses, which is to say, cross-origin responses to requests made without CORS enabled.
Browsers automatically inflate the quota impact of those opaque responses as a security consideration. In Chrome, for instance, even an opaque response of a few kilobytes will end up contributing around 7 megabytes towards your quota usage.
சேவை தொழிலாளர்கள் வலை சுற்றுச்சூழல் ஒரு அற்புதமான மற்றும் ஒருங்கிணைந்த பகுதியாக உள்ளது, ஆனால் இன்னும் சில gotchas உள்ளன - இந்த நீங்கள் முன்னர் இது தெரியாது என்றால் நீங்கள் கடித்து அவர்களுக்கு ஒன்றாகும்.
Workbox போன்ற கருவிகளைக் கையாளவும் உங்களுக்கு என்ன நடக்கிறது என்று உங்களுக்குத் தெரியப்படுத்தவும் இது போன்ற கருவிகளைக் காண இது நல்லது.
Emscripten's compiled Web Assembly, used minimally — ⭐
Dev.to மீது சாம் தோராயோட் எழுதுகிறார்,
Why did I write this post? Emscripten is a wonderful tool, but it has a long history (for asm.js), and isn’t perfect. I think it errs too much on the side of “magic”, and many posts rave about how it’s so easy to EMASM or use binding-fu, but this all comes at a cost, and can introduce huge amounts of inadvertent overhead—think copying huge memory buffers around because we’re trying to make them immutable or easily exposed.
Every language that is being compiled to Web Assembly needs a runtime—whether it be Go, or Rust, or C/C++ as we have here. I don’t believe that we’ll ever really be able to directly import Web Assembly via ES2015 modules, at least not without changes on the JS side. But it behooves us to write the smallest one we possibly can.
நான் எல்லோரும் நாகரீகத்தின் திறனைக் காண்கிறேன் என்று நினைக்கிறேன், பல வலைத் தளங்களில் இப்போது பல வலைப்பக்கங்களைப் பிடிக்க முடிந்திருக்கிறது, எங்களுக்கு வலைப்பக்கத்திற்கு முற்றிலும் மாறுபட்டுள்ளன, நாங்கள் உண்மையில் அந்த கருவிகளைக் கற்க வேண்டும், அவற்றின் டெவலப்பர் அனுபவத்தை மேம்படுத்த வேண்டும் மற்றும் imo முன்மொழியப்பட்ட நூலகங்கள் ‘பாரம்பரிய வலை பிம்பங்கள்’ பயன்படுத்தலாம்.
Designing with the Gestalt principles — ⭐
Google Chrome க்கான முஸ்தபா, தேவ்-சேனல் எழுதுகையில்,
The Gestalt principles are a series of laws that are used to explain why human beings naturally find organized patterns in objects they see around them. The goal with the principles was to explain why we group objects in some ways but not others.
There are many different principles, but here I am going to look at the ones that effect grouping, these are; proximity, similarity, common fate, continuity, closure, and prägnanz.
Web Share Target API
Share Target API is now in Chrome breaking down one of the last silos of native platforms
onappinstalled - for when an app is installed.
Use onappinstalled to detect when a progressive web app is installed.
Bookmarklet: Chrome DevTools trace page
A simple bookmarklet that will performance trace the current page and open in an hosted devtools instance
Hosting Puppeteer in a Docker container
A simple docker container that can host an instance of puppeteer and a custom app.