Little relatively unknown fact, if you have an id attribute on an element, you can reference it in this way:

<button id="yo">…</button>

yo.onclick = ...

Furthermore, child elements with a name attribute can be referenced in this way:

<form id="x"> 
  <input name="em"> 
</form>

x.em.onclick = ...

paul buchheit on the advent of gmail, insurgents vs. gatekeepers, the future of san francisco, ai,

An insurgent is never going to be successful working for gatekeepers, because from the gatekeeper perspective, the person just lacks maturity. They're doing these things that are obviously risky. That's the nature of throwing bombs: you don't exactly know what's going to happen.

Famously, we had one line of JavaScript in the entire product, which was when you go to the homepage, there was one snippet of JavaScript that would put the focus in the search box. That was the only JavaScript at Google. So Google had this kind of anti-JavaScript thing, that was also partially technical snobbery. One of the senior technical people said, “You can never scale anything in JavaScript, it’s basically just shit, the project will just turn to garbage.” And actually Eric Schmidt even said, “Oh yeah, my friend at some other big company tried this, it doesn't work.” There was a lot of ‘This has been done before, you just don't know why it can't work.’

Gatekeepers are one hundred percent anchored to stopping bad things from happening, and they have no concept that when you stop bad things from happening, you are inherently stopping good things from happening as well. You can't ever deliver something that's 100 percent good. If you deliver 80 percent good, that's pretty good. But if you try to go for 100% — if you try to be perfect — what you get is nothing. Innovation is inherently not clean.

I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one would be hovering over an el...

2- Choose Sources: Choose Sources

3- On the right side, you found accordion, Open "Event Listener Breakpoints" Open "Event Listener Breakpoints"

4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action". Open "Mouse", then Select "mouseout"

5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want. tooltip stand as you want

Bookmarklet creator tool.

Discussing the decisions surrounding JavaScript prototypes, the article by Juan Diego Rodriguez scrutinizes their origin, examines missteps in the design, and explores how these factors have affected the way we write JavaScript today.

There is no difference, and JavaScript will execute the same code, but the latter example is honest about what JavaScript is doing under the hood, while the former hides it behind syntactic sugar.

Do I have a problem with the classical approach? Yes and no. An argument can be made that the classical syntax improves readability by having all the code related to the class inside a block scope. On the other hand, it’s misleading and has led thousands of developers to believe that JavaScript has true classes when a class in JavaScript is no different from any other function object.

A compiled list of linting rules to specifically help you with writing asynchronous code in JavaScript and Node.js.

Removing properties from an object in JavaScript might not be the most exciting job, but there are many ways to achieve it, each revealing a fundamental aspect of how JavaScript works. Juan Diego Rodríguez explores each technique in this article.

• Contestant A: “I set c to undefined.”
• Contestant B: “I used the delete operator.”
• Contestant C: “I deleted the property through a Proxy object.”
• Contestant D: “I avoided mutation by using object destructuring.”
• Contestant E: “I used JSON.stringify and JSON.parse.”
• Contestant F: “We rely on Lodash at my company.”

A deep investigation into regular expression denial of service (ReDoS) vulnerabilities in JavaScript

Backtracking
It might not seem obvious, but most problems with regular expressions stem from failing to match part of the string they are being evaluated against. Matching is easy, but not matching can cause a process called backtracking where the regular expression engine will go back over choices that it made and try alternatives.

Lost in spaces
Let's have a look at an example. In the Stack Overflow outage, the offending regular expression was /^[\s\u200c]+|[\s\u200c]+$/. Let's break down what each part means:

I’ve created a cheat sheet that will tell you precisely when to use each JS array method. It’s a free gift for anyone who subscribes to my email updates.

I decided to encode the entire application state as a Base64 encoded string in the hashmark of the url. For example, a url would look like (note its truncated since they are very long):

Here's the pseudo code for creating the url, and then later reading it:

const stateString = JSON.stringify(appState); // appState is a json object
const compressed = compress(stateString);
const encoded = Base64.encode(compressed);
// Push that `encoded` string to the url
// ... Later, on page load or on undo/redo we read the url and
// do the following
const decoded = Base64.decode(encoded); // same encoded as above, but read from url
const uncompressed = uncompress(decoded);
const newState = JSON.parse(uncompressed);
// Now load your application with the newState

A better idea is to use the URI fragment (the string after the # sign). It has the advantage of not having a size limit, and not needing to be sent all to the backend during the request. window.location.hash is your friend.

Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members. Here's how.

A visualizer to help you learn how the DOM Event system works through exploration. Explore event phases, stopping events, canceling events, passive events and more.

One of the more difficult problems with writing systems that communicate over the network is managing input and output—that is, the reading and writing of data to and from the network and hard drive. Moving data around takes time, and scheduling it cleverly can make a big difference in how quickly a system responds to the user or to network requests.

In such programs, asynchronous programming is often helpful. It allows the program to send and receive data from and to multiple devices at the same time without complicated thread management and synchronization.

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

https://medium.com/ux-seo-sem-and-webdev-bitesized/top-7-css-minifiers-comparison-f90e28ea0e20

Wanting to make use of Ajax is one of the prime reasons for adopting jQuery.

$.get("mydata.txt").then(
                    function (data) {
                     alert(data);
                    },
                    function () {
                     alert("error");
                    })
                   .always(
                    function () {
                     alert("cleanup");
                    });

JavaScript interview questions that will provide you with in-depth knowledge and help you prepare for your interviews.

The example that Crockford gave in his presentation on how to create objects is the way developers should use for creating objects. It does not require the 'class' keyword or the 'prototype' property for defining an object. It also does not require using the 'new' keyword for instantiating a new object.

function createThing(name) {
    function getName() {
        return name;
    }

    return Object.freeze({
        name,
        getName
    });
}

const myThing = createThing('My Thing');

https://youtu.be/XFTOG895C7c?t=2807

Kent C. Dodds’ .filter() Trick Will Change How You Use JavaScript. This one-liner uses the Boolean constructor to magically remove all falsy values from an array ✨.

https://twitter.com/kentcdodds/status/1009918457394225152

const plugins = [
    isProd ? optimizePlug : null,
    isProd ? prodOnlyPlug : null,
    !isProd ? testingPlug : null,
    usefulPlug,
].filter( Boolean );