- Dec 2021
-
googlechrome.github.io googlechrome.github.io
Tags
Annotators
URL
-
-
patterns.dev patterns.devPatterns1
-
-
kevinlangleyjr.dev kevinlangleyjr.dev
Tags
Annotators
URL
-
-
storybook.js.org storybook.js.org
-
-
iq.opengenus.org iq.opengenus.org
-
What are the Contents of a BLOB?
In order to view, how data is stored in a blob, we will use the
readAsDataURLmethod of FileReader API in JavaScript. Theresultattribute contains the data as a data: URL representing the file's data as a base64 encoded string.var myBlob = new Blob(['<html><h2>This is heading</h2></html>'], {type : 'text/html'}); var reader = new FileReader(); // This fires after the blob has been read reader.addEventListener('loadend', (e) => { var text = e.target.result; console.log("Contents : "+ text); }); // Start reading the contents of blob reader.readAsDataURL(myBlob);The output in the console :
Contents : data:text/html;base64,PGh0bWw+PGgyPlRoaXMgaXMgaGVhZGluZzwvaDI+PC9odG1sPg==The text contained in our file is base64-encoded. We can try extracting the encoded part and decode it using the method
atob()to check that it is the same.// Extracting it from the character at index=22 only in this case as we // already know the contents of our Blob var extractText = text.slice(22); console.log("Decoded "+ atob(extractText)); // Output : Decoded <html><h2>This is heading</h2></html>
-
-
gomakethings.com gomakethings.com
-
Adding flexibility to our contrast checker function
Brian’s function only accepts six-character hexcolors, and they cannot have a leading hash (
#).Let’s first modify it to accept a leading hash. We’ll use
Array.slice()to get the first character and check if it equals#. If it does, we’ll useArray.slice()again to remove the leading hash and redefinehexcolor.Next, let’s modify the function to allow both three and six-character colors.
To do that, we’ll first check the length of
hexcolor. If it’s3, we’ll useArray.split()to convert thehexcolorstring into an array of characters. Then, we’ll useArray.map()to double each character, andArray.join()to combine it back into a string./*! * Get the contrasting color for any hex color * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/ * @param {String} A hexcolor value * @return {String} The contrasting color (black or white) */ var getContrast = function (hexcolor){ // If a leading # is provided, remove it if (hexcolor.slice(0, 1) === '#') { hexcolor = hexcolor.slice(1); } // If a three-character hexcode, make six-character if (hexcolor.length === 3) { hexcolor = hexcolor.split('').map(function (hex) { return hex + hex; }).join(''); } // Convert to RGB value var r = parseInt(hexcolor.substr(0,2),16); var g = parseInt(hexcolor.substr(2,2),16); var b = parseInt(hexcolor.substr(4,2),16); // Get YIQ ratio var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; // Check contrast return (yiq >= 128) ? 'black' : 'white'; };
-
-
24ways.org 24ways.org
-
The second equation is called ‘YIQ’ because it converts the RGB color space into YIQ, which takes into account the different impacts of its constituent parts. Again, the equation returns white or black and it’s also very easy to implement.
In JavaScript:
function getContrastYIQ(hexcolor){ var r = parseInt(hexcolor.substr(0,2),16); var g = parseInt(hexcolor.substr(2,2),16); var b = parseInt(hexcolor.substr(4,2),16); var yiq = ((r*299)+(g*587)+(b*114))/1000; return (yiq >= 128) ? 'black' : 'white'; }You’ll notice first that we have broken down the hex value into separate RGB values. This is important because each of these channels is scaled in accordance to its visual impact. Once everything is scaled and normalized, it will be in a range between zero and 255. Much like the previous ’50%’ function, we now need to check if the input is above or below halfway. Depending on where that value is, we’ll return the corresponding highest contrasting color.
-
There are two functions I want to compare.
The first, I call ’50%’. It takes the hex value and compares it to the value halfway between pure black and pure white. If the hex value is less than half, meaning it is on the darker side of the spectrum, it returns white as the text color. If the result is greater than half, it’s on the lighter side of the spectrum and returns black as the text value.
In JavaScript:
function getContrast50(hexcolor){ return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'black':'white'; }It doesn’t get much simpler than that! The function converts the six-character hex color into an integer and compares that to one half the integer value of pure white. The function is easy to remember, but is naive when it comes to understanding how we perceive parts of the spectrum. Different wavelengths have greater or lesser impact on the contrast.
Tags
Annotators
URL
-
-
-
-
css-tricks.com css-tricks.com
-
If you want to define a theme color for light and dark mode, your best bet is to define both colors and use the first meta tag as a fallback for browsers that don’t support the media feature.
<meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
Tags
Annotators
URL
-
-
www.sitepoint.com www.sitepoint.com
-
This example implements text copying when a
data-copyattribute is added any HTML element such as a button. You can set this value to either of these:- a hard-coded string — such as
data-copy="copy this to the clipboard". - a CSS selector — such as
data-copy="#mysection". The text content of the first matching element is then copied.
Optionally, you can set a custom success message in a
data-doneattribute:<button data-copy="#mysection" data-done="section copied"> copy text from #mysection </button>The button is only shown when
navigator.clipboard.writeText()is supported. When clicked, the JavaScript event handler locates the text, copies it to the clipboard, and shows an animated success message.The text paste button is very similar except it defines a data-paste attribute which must point to a DOM node:
<textarea id="pastehere"></textarea> <button data-paste="#pastehere">paste</button> - a hard-coded string — such as
-
Copy and Paste Data
The Clipboard API’s
readText()andwriteText()are convenience options for the more genericread()andwrite()methods. These have less browser support but are able to copy and paste any type of data such as binary images.Copying requires blob data typically returned by a
fetch()orcanvas.toBlob()method. This is passed to aClipboardItemconstructor so it can be written to the clipboard:const image = await fetch('myimage.png'), blob = await image.blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]);Pasting is more complex because multiple
ClipboardItemobjects can be returned with differing content types. It’s therefore necessary to iterate through each type until a useful format is found. For example:const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { for (const type of clipboardItem.types) { if (type === 'image/png') { // return PNG blob return await clipboardItem.getType(type); } } } -
Cut, Copy, and Paste Events
The
cut,copy, andpasteevents fire whenever the user initiates a clipboard action in the browser — typically with right-click menus or the keyboard shortcuts mentioned above. This is supported in most browsers and handler functions can intercept the events to make changes using a `clipboardData object* passed as a parameter.The following function forces all cut or copied text to be uppercase. Note that
e.preventDefault()stops the default cut/copy action which would override it:body.addEventListener('cut', cutCopyHandler); body.addEventListener('copy', cutCopyHandler); // cut or copy event handler function cutCopyHandler(e) { const selection = document.getSelection(); // send uppercase text to clipboard e.clipboardData.setData( 'text/plain', selection.toString().toUpperCase() ); if (e.type === 'cut') selection.deleteFromDocument(); // stop default cut/copy e.preventDefault(); }The following code attaches a paste handler to a specific
<textarea>field. The function clears the existing content and prefixes the text"pasted:":document.getElementById('field1').addEventListener('paste', pasteEvent); // paste event handler function pasteEvent(e) { // add 'pasted:' to pasted text const paste = 'pasted:\n' + (e.clipboardData || window.clipboardData).getData('text'); e.target.value = paste; // stop default paste e.preventDefault(); } -
This works in a similar way to the text demonstration, in that copy and paste buttons must point to DOM elements using a CSS selector in
data-copyblobanddata-pasteblobattributes. For example:<!-- copy image --> <img id="myimage" src="myimage.png" alt="any image" /> <button data-copyblob="#myimage" data-done="image copied"> copy image </button> <!-- paste into DOM --> <div id="imagelist"></div> <button data-pasteblob="#imagelist"> paste image </button>Try copying image data from a graphics application, then use the paste button.
-
-
developers.google.com developers.google.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
-
If your site has multiple URLs for the same content, share the page's canonical URL instead of the current URL. Instead of sharing
document.location.href, you would check for a canonical URL<meta>tag in the page's<head>and share that. This will provide a better experience to the user. Not only does it avoid redirects, but it also ensures that a shared URL serves the correct user experience for a particular client. For example, if a friend shares a mobile URL and you look at it on a desktop computer, you should see a desktop version:let url = document.location.href; const canonicalElement = document.querySelector('link[rel=canonical]'); if (canonicalElement !== null) { url = canonicalElement.href; } navigator.share({url});
-
-
Tags
Annotators
URL
-
-
morioh.com morioh.com
-
-
www.typescriptlang.org www.typescriptlang.org
-
medium.com medium.com
-
The correct way to handle TypeScript functional destructuring is to define an interface and reference the interface after the destructure. TypeScript is then able to understand that the function takes an object argument that is of the shape of the Person interface and destructuring occurs as you would expect it to in ES6.
// a 'Person' object requires 'first' and 'last' // properties whose values are strings interface Person { first: string; last: string; } // This defines that the first functional argument // must be an Array of 'Person' objects, then destructs // the first person's first and last name properties const helloFirstPerson = ([{ first, last }]: Person[]) => `Hello ${first} ${last}!`; const people = [ { first: 'John', last: 'Doe' }, { first: 'Jane', last: 'Smith' } ]; // outputs "Hello John Doe!" helloFirstPerson(people); /* --------- Example of a Type Error ----------- */ // This creates an array argument that will be invalid for // the helloFirstPerson() function, because there are no 'last' // props on the 'people' objects const badArgs = [{ first: 'John' }, { first: 'Jane' } ]; // Type Error! // Property 'last' is missing in type '{ first: string; }' helloFirstPerson(badArgs);
-
-
stackoverflow.com stackoverflow.com
-
const randomElement = array[Math.floor(Math.random() * array.length)];
-
- Nov 2021
-
-
-
remix.run remix.run
-
-
www.simoahava.com www.simoahava.com
-
On Basics of GTM, JS funcionting, Interaction with Datalayer
-
-
www.stefanjudis.com www.stefanjudis.com
-
import { createRequire } from "module"; const require = createRequire(import.meta.url); const data = require("./data.json");
-
-
developers.google.com developers.google.com
-
sgt.hootr.club sgt.hootr.club
-
stackoverflow.com stackoverflow.com
-
-
The consumer component will barely change from our last example. The only difference is the way we'll get a reference to our store (since now the store is exported from the JS module):
-
Now your whole WS logic can be encapsulated in your JS module. That makes for good separation of concern.
-
Stores are the idiomatic Svelte way when you need to import "reactivity" from your normal JS sources.
-
-
www.proposals.es www.proposals.es
-
-
codetopology.com codetopology.com
Tags
Annotators
URL
-
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
- Oct 2021
-
javascript.info javascript.info
-
-
redux-toolkit.js.org redux-toolkit.js.org
-
www.rubensworks.net www.rubensworks.net
Tags
Annotators
URL
-
-
rdf.js.org rdf.js.org
-
-
www.sitepoint.com www.sitepoint.com
-
blog.logrocket.com blog.logrocket.com
-
javascript.info javascript.info
-
-
blog.logrocket.com blog.logrocket.com
-
-
Vue.js vs React: Comparison of Two Most Popular JS FrameworksEugeneFrontend DeveloperVueReactHomeBlogDevelopmentVue.js vs React: Comparison of Two Most Popular JS FrameworksSep 23, 202126 min readNowadays, every company aims to create a high-quality web solution within a short time frame. To put it into practice, the developers’ community chooses from many JavaScript libraries and frameworks and debates to find the best one. At Codica, we consider Vue.js and ReactJS the most rapidly developing tools for the front-end development for many reasons. While these technologies can help create the same products and applications, both of them have pros and cons. The purpose of this article is to compare Vue.js vs React.js in different aspects: from general information to technical features. Both these web development tools have mature communities, wide support and popularity, but Vue.js is a framework and React is a library. So, why do we compare oranges and apples?
Nowadays, every company aims to create a high-quality web solution within a short time frame. To put it into practice, the developers’ community chooses from many JavaScript libraries and frameworks and debates to find the best one.
At Codica, we consider Vue.js and ReactJS the most rapidly developing tools for the front-end development for many reasons. While these technologies can help create the same products and applications, both of them have pros and cons.
The purpose of this article is to compare Vue.js vs React.js in different aspects: from general information to technical features. Both these web development tools have mature communities, wide support and popularity, but Vue.js is a framework and React is a library. So, why do we compare oranges and apples?
-
- Sep 2021
-
medium.com medium.com
-
medium.com medium.com
-
d3-color and d3-color-schemes are not the only way to deal with color and if you’re just starting out, I’d suggest working with chroma.js rather than D3’s color utilities.
Alternative for colors
-
there are other libraries that do good animation, like GSAP, as well as animation solutions that are native to the method you (or your team) are using for DOM management.
Alternative for animation
-
animation in data visualization, while impressive and eye-catching, is a much lower priority than understanding how different chart types present data, how to properly design charts, understanding form in data visualization, and other aspects of data visualization practice.
-
-
- Jul 2021
-
www.ordinarycoders.com www.ordinarycoders.com
Tags
Annotators
URL
-
-
-
- Jun 2021
-
developer.mozilla.org developer.mozilla.org
- Apr 2021
-
-
All you need is an email address or phone number associated with an account and you will get a magic link or one-time password each time you want to log in. As soon as you click the link, you'll get redirected to the app and you'll already be logged in. After that, the magic link isn't valid so no one else can use it.
-
- Mar 2021
-
www.fabiofranchino.com www.fabiofranchino.com
-
github.com github.comd3/d33
-
D3 4.0 is modular. Instead of one library, D3 is now many small libraries that are designed to work together. You can pick and choose which parts to use as you see fit.
-
To the consternation of some users, 3.x employed Unicode variable names such as λ, φ, τ and π for a concise representation of mathematical operations. A downside of this approach was that a SyntaxError would occur if you loaded the non-minified D3 using ISO-8859-1 instead of UTF-8. 3.x also used Unicode string literals, such as the SI-prefix µ for 1e-6. 4.0 uses only ASCII variable names and ASCII string literals (see rollup-plugin-ascii), avoiding encoding problems.
-
Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features.
Tags
- microlibraries
- sad/unfortunate conclusion
- simpler code is easier to understand and verify that it is correct
- contributing: low barrier to entry
- changes (software)
- constant evolution/improvement of software/practices/solutions
- programming: use of special/mathematical symbols
- d3.js
- breaking change
- funny
- limitations leading to workarounds
- change of behavior (software)
- modularity
Annotators
URL
-
- Feb 2021
-
-
An async function simply implies that a promise will be returned and if a promise is not returned, JavaScript will automatically wrap it in a resolved promise with the return value in that function. That would look like writing return Promise.resolve(‘hello’)
-
-
www.youtube.com www.youtube.com
-
[pub_2021] 5 important concepts
- Equality == vs. === (primitives, object "mem ref")
- Async JS (callbacks, promises, async/await)
- Error Handling (try..catch, writing defensive code)
- ES6 Syntax (destructuring, spread operator, string interpolation)
- Array Methods (map, filter, reduce, sort, some, every)
Tags
Annotators
URL
-
-
-
What do you do with your API key? "WHERE DO I PUT IT?!?" https://youtu.be/ecT42O6I_WI?t=338
Also, suggests to get a JSON formatter browser extension. e.g.: "JSON Formatter" from the Chrome Web Store Here's a good one: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh/
Tags
Annotators
URL
-
- Jan 2021
-
blog.logrocket.com blog.logrocket.com
-
github.com github.com
- Dec 2020
-
github.com github.com
-
хорошая библиотека для парсинга и автоматизации тестирования "вёрстки с js"
Tags
Annotators
URL
-
-
hacks.mozilla.org hacks.mozilla.org
Tags
Annotators
URL
-
-
javascript.info javascript.info
Tags
Annotators
URL
-
-
github.com github.com
-
Original objects are never modified, but transparently wrapped by observable proxies.
-
-
-
www.iditect.com www.iditect.com
-
const store = observable({ players: [ "Player 1", "Player 2", ], // ... }) reaction(() => JSON.stringify(store), json => { localStorage.setItem('store',json); }, { delay: 500, }); let json = localStorage.getItem('store'); if(json) { Object.assign(store, JSON.parse(json)); }
-
- Nov 2020
- Oct 2020
-
medium.com medium.com
-
suite of over 30 separate packages of React visualization primitives that fall into several categories (Figure 2). It is un-opinionated on state management, animation, and styling so it can integrate with any React codebase, and its emphasis on modularity (similar to D3) lets you keep your bundle sizes down by only using the packages you need to create your reusable chart library or a custom one-off chart.
Short definition of visx
-
In our research (Figure 1), we found that existing React visualization libraries are often high-level abstractions and optimized for ease of use (i.e., fewer lines of code) at the expense of expressivity. None offer the expressivity of D3 primitives and many don’t allow for the optimization we want in production because computation, animations, state management, styles, and rendering are all encapsulated.
Comparison of data visualisation libraries:
-
because D3 and React both want to own DOM manipulation, we’ve found that it’s best to only use D3 for the math and React for the DOM because two mental models for updating the DOM opens the door for bugs to sneak in. However, using D3 solely for math means a significant amount of its (DOM-based) functionality is not available for use: selection.join, zoom, drag, brush, and transitions. Additionally, as mentioned above, D3 has its own learning curve and we would like developers to feel like they are writing native React code with standard APIs and familiar patterns.
You can use D3 inside a React app, but...
-
-
github.com github.com
Tags
Annotators
URL
-
- Sep 2020
-
www.smashingmagazine.com www.smashingmagazine.com
Tags
Annotators
URL
-
- Jul 2020
-
javascript.info javascript.info
-
One of the best ways is to use “promises,”
-
function that does something asynchronously should provide a callback argument where we put the function to run after it’s complete
Tags
Annotators
URL
-
-
github.com github.com
-
d3-flame-graph
Tags
Annotators
URL
-
- May 2020
-
hyperskill.org hyperskill.org
-
通常，Arrays用于两种数据结构：queue和stack。 要了解什么queue是食品，您可以想象在食品商店中有一个普通的队列：新人们在队列的末端加入队列，而刚开始的人们则先离开队列。这就是为什么我们需要两种方法来实现的原因queue：一种在的末尾添加元素，Array而另一种在的开始处删除元素的方法queue。这两种方法是push()将一个或多个元素添加到数组的末尾并返回新的数组长度，并shift()删除数组的第零个元素并返回其值：
-
The slice() method works only with arrays whose elements are strings, numbers, or boolean values.
只有字符串，数字，布尔值三种类型的数组可以用 slice 操作
-
Indexes can also be negative. If you specify a negative index in the first parameter, it will shift the end of the sequence. For example, slice(-4) call will extract the last four elements of the sequence:
index 可以是复数，arr.slice(-4)代表从倒数第四个值到最后
-
The slice() method does not change the source array, but returns a copy of the array
slice()方法是个纯函数
-
-
developers.google.com developers.google.com
-
medium.com medium.com
-
- Apr 2020
-
medium.com medium.com
-
hswolff.com hswolff.com
- Mar 2020
-
www.youtube.com www.youtube.com
-
There's a really cool layout rendering video at 17:00.
-
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
www.quirksmode.org www.quirksmode.org
Tags
Annotators
URL
-
-
twitter.com twitter.com
-
"48 61 76 65 20 79 6f 75 20 73 65 65 6e 20 74 68 65 20 73 6f 75 72 63 65 20 63 6f 64 65 20 6f 66 20 74 68 65 20 4a 65 74 42 72 61 69 6e 73 20 77 65 62 73 69 74 65 3f".split(' ').map(ch => String.fromCharCode((parseInt(ch, 16)))).join('')
js 16进制转字符
Tags
Annotators
URL
-
- Feb 2020
-
developer.mozilla.org developer.mozilla.org
-
leaverou.github.io leaverou.github.io
-
-
gist.github.com gist.github.com
-
www.oreilly.com www.oreilly.com
- Jan 2020
-
medium.com medium.com
-
sdk-design.js.org sdk-design.js.org
-
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
dev.to dev.to
Tags
Annotators
URL
-
-
jimmywarting.github.io jimmywarting.github.io
Tags
Annotators
URL
-
- Dec 2019
-
developer.mozilla.org developer.mozilla.org
-
addyosmani.com addyosmani.com
Tags
Annotators
URL
-
-
jstherightway.org jstherightway.org
-
-
nodesource.com nodesource.com
Tags
Annotators
URL
-
-
node.green node.green
-
-
v8.dev v8.dev
-
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
master.neutrinojs.org master.neutrinojs.org
-
If you need polyfills in your code, consider including core-js in your package.json. This is will configure @babel/present-env to automatically include polyfills based on usage.
-
- Nov 2019
-
javascript.info javascript.info
-
-
devstore.io devstore.ioDevstore1
-
-
-
-
pomb.us pomb.us
-
-
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
-
www.sitepoint.com www.sitepoint.com
Tags
Annotators
URL
-
-
coasttocoastresearch.com coasttocoastresearch.com
-
- Oct 2019
-
medium.com medium.com
-
medium.com medium.com
- Aug 2019
-
github.com github.com
Tags
Annotators
URL
-
- Jul 2019
-
scotch.io scotch.io
-
Lexical scope is sometimes also referred to as Static Scope.
Lexical scope only depends on the code text and not on the runtime callstack
Tags
Annotators
URL
-
- Jun 2019
-
jscomplete.com jscomplete.com
Tags
Annotators
URL
-
-
jakearchibald.com jakearchibald.com
Tags
Annotators
URL
-
-
www.labnol.org www.labnol.org
-
document.body.contentEditable = true
-
- May 2019
- Apr 2019
-
matthewrayfield.com matthewrayfield.com
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
google.github.io google.github.io
Tags
Annotators
URL
-
-
www.discoversdk.com www.discoversdk.com
Tags
Annotators
URL
-
-
github.com github.com
-
- Dec 2018
- Nov 2018
-
davidwalsh.name davidwalsh.name
-
-
codeburst.io codeburst.io
-
codeburst.io codeburst.io
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
scotch.io scotch.io
Tags
Annotators
URL
-
-
serviceworke.rs serviceworke.rs
-
-
developer.mozilla.org developer.mozilla.org
-
babeljs.io babeljs.io
Tags
Annotators
URL
-
-
github.com github.com
Tags
Annotators
URL
-
-
survivejs.com survivejs.com
Tags
Annotators
URL
-
-
github.com github.com
-
-
tc39.github.io tc39.github.io
-
-
medium.freecodecamp.org medium.freecodecamp.org
-
www.sitepen.com www.sitepen.com
-
www.html5canvastutorials.com www.html5canvastutorials.com
-
- Oct 2018
-
medium.com medium.com
-
-
www.oreilly.com www.oreilly.com
-
redux-actions.js.org redux-actions.js.org
-
-
dev.to dev.to
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
Tags
Annotators
URL
-
-
-
-
www.oreilly.com www.oreilly.com
-
weblogs.asp.net weblogs.asp.net
-
redux.js.org redux.js.org
-
-
www.javascripttuts.com www.javascripttuts.com
-
github.com github.com
Tags
Annotators
URL
-
-
www.npmjs.com www.npmjs.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
addons.mozilla.org addons.mozilla.org
-
addons.mozilla.org addons.mozilla.org
Tags
Annotators
URL
-
-
addons.mozilla.org addons.mozilla.org
-
github.com github.com