Tagged “mdn”
-
TIL fancy methods to transform Javascript Objects objects javascript mdn
You can use Object.entries(), Object.keys(), Object.fromEntries()...
-
TIL How to steal localData using an XSS attack security xss mdn
But that's just a red flag that opens the door to bigger issues.
-
TIL Clear-Site-Data mdn cache
The Clear-Site-Data header clears browsing data (cookies, storage, cache) associated with the requesting website. It allows web developers to have more control over the data stored by a client browser for their origins.
-
TIL using abortController to removing events mdn javascript
Trying to unhook a eventListener? Don't use `removeEventListener`, instead use AbortController.
-
TIL detecting if a user is online with JS fingerprint javascript mdn
You can use the navigator.onLine api.
-
TIL Tagged Templates mdn javascript image
Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.
-
TIL wanting to use the latest thing mdn latest jquery github
In evaluating a solution, be sure to consider the library dying out or becoming a maintenance burden after 5 years (e.g., everyone trying to get off jQuery onto Web Components).
-
TIL Computed Properties in Javascript naming javascript mdn
Today I learned about Computed Property names.
-
TIL AggregateError promises javascript mdn
I heard the term AggregateError in relations to 'Promise.Any', So it's several errors wrapped in a array. That's all.
-
TIL safe areas for mobile browsers css mobile mdn
The problem you quickly encounter is that the visible viewport is not per se the same as the interactive viewport. Mobile browsers tend to prioritize essential UI elements (like the home-bar on IOS) for interactivity at all times.
-
TIL that the max size of a Map/Set is 26843544 javascript mdn v8 math
JS Maps and Sets are implemented by OrderedHashTable. OrderedHashTables double in size when they need to grow, and their max size is 26843544. After 16777216 elements, doubling that exceeds the max, so the allocation fails.Currently these data structures are not implemented to be usable for large in-memory datasets. Also note that the JS specification itself doesn't require that Maps and Sets must scale with available memory.
-
TIL that adding a psuedo-h7 accessibiilty html mdn
Natively, there are 6 heading levels. What if accessibility-wise, you wanted a new heading level?
-
TIL super() mdn oop js
When you use super(), it's like you're telling the new object to copy everything from the old object first, and then add or change anything else that's different.
-
TIL switching over to Service Workers with Chrome extensions chrome extensions mdn
Background Pages are like 'hidden pages' that a developer would create behind the scenes. That hidden page would do various JS needs to simulate functionality. Vs a service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction
-
TIL using defer/async optimization javascript mdn
So an old and often-touted best practice for performance has been to load your JavaScript in the footer of the document to avoid render blocking of scripts. By putting it in the footer, the DOM is constructed before your scripts have a chance to run. That's dumb.
-
TIL about console.dir debug mdn javascript
If you console.log a element, you will get it's HTML markup. If you want it as a JS object, use console.dir instead
-
TIL Replace Only Fixes the First Encounter javascript mdn
Replace only finds the first occurrence. ReplaceAll fixes it all.
-
TIL use-cases for Generators in Javascript advanced javascript mdn
Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.
-
TIL Number formatting with Javascript numbers javascript mdn
Say you wanted to convert this into a string, with all the commas and everything. You can use the browser Intl package to use this.
-
TIL refactoring object lookups to avoid looking at the prototype chain advanced javascript refactor mdn
Depending on your lookup method, you can access the prototype chain, which opens up some potential vulnerabilities or terrible side effects!
-
TIL about heavy.js javascript mdn
It downscales all images on your webpage by a factor of 3, takes the RGB values and creates spans with appropriate styles. Yes, this converts your images to HTML p and spans.
-
TIL cancelling promises javascript mdn
There is a cross-platform (Node, Browsers, etc) cancellation primitive called AbortController. You can use it to cancel functions that return promises rather than promises themselves.
-
TIL the WebCrypto API javascript mdn math
If you dealing with sensitive applications and need a more secure method of randomization, I’d recommend the Crypto API. Reasons you may want to use WebCrypto include temporary verification codes, random password generation, randomized lottery numbers, etc.
-
TIL ES6 Proxy's apply method javascript mdn advanced
Using JavaScript proxies you can wrap an existing object and intercept access to its attributes or methods, even if they don’t exist. You can also redefine fundamental operations for that object.
-
TIL ES6 Proxy javascript mdn advanced codepen
Using JavaScript proxies you can wrap an existing object and intercept access to its attributes or methods, even if they don’t exist. You can also redefine fundamental operations for that object.
-
TIL about the Clipboard API javascript mdn webapi
The Clipboard API can be used to implement cut, copy, and paste features within a web application.
-
TIL the wbr element mdn html css
'<wbr>' is a HTML element that represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
-
TIL a short explainer of the Execution Context javascript javascript-advanced mdn eli5
It is an abstract concept that represents the environment in which JavaScript runs. What happens inside the execution context is two things basically. The first is parsing the code line by line and the second is storing the variables and functions into the memory.
-
TIL onError html error mdn
When a resource (such as an img or script) fails to load, an error event using interface Event is fired at the element that initiated the load, and the onerror() handler on the element is invoked.
-
TIL add link decoration to help with accessibility links css accessibility mdn
One of the WCAG requirements is not to rely on color only when you want to distinguish a button or link from the rest of the text. Painting links in blue or another color doesn’t suffice since it still might not be visible for people with color blindness. The most typical method is underlining links; they can also appear in bold font.
-
TIL the global attribute translate html mdn
A good use-case is if your brand has words that can be translated.
-
TIL default spellcheck in html html mdn
The spellcheck is a global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements.
-
TIL the multiple value in html html input mdn
The multiple attribute allows the user to enter multiple values on an '<input>'. It is a boolean attribute valid for file or email input types and the '<select>' element.
-
TIL you can make SMS links sms html mdn mobile
So you can make a 'mailto:' and a 'tel:' link. But did you know you can also do 'sms' messages too?
-
TIL how to make numbers the same width and prevent shifting layout css fonts twitter mdn
If your font supports it, you can use 'font-variant-numeric: tabular-nums'.
-
TIL using datalist for a pure HTML input suggestion html input mdn
Web developers do not use the power of 'datalists' enough. It combines the power of a 'selector', with the ability to type out your choice using the keyboard.
-
TIL how to set up autogrowing textarea fields form input mdn
There's some css tricks to autogrow textarea. There's also a nice piece of JS to use to do it as well!
-
TIL of using the "is" property css imgur mdn
The ':is()' CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
-
TIL of a visual way to see CSS Cascade css codepen mdn
But then questions start arising: is !important higher priority than say, the Shadow DOM generated object?
-
TIL how to replace many characters in javascript mdn regex javascript
You can use the replace() method to swap one string pattern for another.
-
TIL about the battery status API mdn browsers api
Do you want to know all about the battery of your laptop, PC or, devices? This API helps in knowing all the information like, the battery is charging or not, how much charge is left and also the handlers to handle the charge related state changes.
-
TIL how to pass unlimited arguments to a function mdn functions javascript
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.
-
TIL how to get the location of the user with the Geolocation API mdn browser javascript permissions
You can get the user's location in the browser. First, the user has to accept this. As it's a security request. Second, you use the Geolocation API.
-
TIL about the new Intl.NumberFormat browser API javascript browser mdn
No more stupid-ass hacks to format numbers correctly.
-
TIL trailing commas in Javascript mdn linter cleancode
JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals, and more recently, to function parameters and to named imports and named exports.
-
TIL startWith mdn javascript string
Getting a boolean result of true or false, depending on if the string startsWith a specific substring
-
TIL a quick recipe involving Axios and Cheerio web-scraping javascript fetch recipe mdn
A quick recipe to http request an api and use cheerio to web-scrape it
-
TIL that keyCode is depreciated depreciated mdn keyboard
KeyboardEvent.keyCode is depreciated. Because it was inconsistent. Use a the code version instead, it's more readable.
-
TIL writing modes accessibility rtl css mdn
The 'writing-mode' CSS property determines if lines are laid our horizontally, or vertically. The direction is determined by the context of the direction of the content.
-
TIL the hover media feature css mdn media-queries
If you're on a phone or tablet, chances are -- you cannot hover. But if you're on desktop using a mouse -- you can!
-
TIL You can change the blinking line css inputs mdn
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor.
-
TIL Value as Number mdn inputs forms
Returns the value of the element, interpreted as one of the following, in order: A time value, A number, NaN if conversion is impossible.
-
TIL toLocaleDateString that's built into Javascript for dates date javascript mdn
Date().toLocaleDateString('en-US') returns a string with a language sensitive representation of the date portion of this date.
-
TIL LocalForage, a small js library for caching javascript webdev cache api mdn library
An easy to use library to help with web storage. Switches between localStorage/sessionStorage, and also IndexedDB automagically. 178,000 repos can't be wrong.
-
TIL super keyword in Javascript classes javascript classes mdn codepen
the super keyword is mainly used when we want to access a variable, method, or constructor in the base class from the derived class.
-
TIL about Constraint Validation API (forms) forms html css mdn
Inputs are pretty powerful. Right out of the box, they can autocomplete, validate data, create minimum/maximum lengths, allow for patterns, and even provide state!
-
TIL HTML elements like Blockquote, datalist, details, meter, & progress html codepen mdn
HTML Elements I forget exist. Blockquote, datalist, details, meter, progress
-
TIL column gap for newspaper look css codepen responsive webdev mdn
Use `column-count` and `column-gap` to give it that sweet newspaper look.
See all tags.