JavaScript is the main cause for making websites slow. Ten years ago it was network bottlenecks, but the growth of JavaScript has outpaced network and CPU improvements on today's devices. In the chart below, based on an analysis from the HTTP Archive, we see the number of requests has increased for both first and third party JavaScript since 2011.

The following chart shows the growth in the total size of JavaScript from 2011.

Certainly the amount of JavaScript has increased. Total number of requests went from 9 to 18, and total size increased from 85 KB to 364 KB. (These are medians from the world's top ~1.3 million sites tested on desktop.) It's interesting to see that the size of scripts is growing more rapidly than the number of scripts - we're packing twice as much code into each script compared to 7 years ago.

The state of commercial web conferences is utterly broken. What lurks behind the scenes of such events is a widely spread, toxic culture despite the hefty ticket price. And more often than not, speakers bear the burden of all of their conference-related expenses, flights, and accommodation from their own pockets. This isn’t right, and it shouldn’t be acceptable in our industry.

All browsers ship with a set of default styles that are applied to every web page in what is called the “user agent stylesheet”. Most of these stylesheets are open source so you can have a look through them:

A lot of styles are consistent across all user agent stylesheets. For example, I used to think that the <head> element was not visible due to some special feature, but it is actually hidden like any other element on a page, with display: none! You can see this same style in WebKit,

When we select an element by its .class or #id, we’re using predefined and unchanging attributes that are baked into the DOM. With pseudo-classes, we can select elements using information that isn’t already in the DOM and can change based on how a user interacts with the page.

:hover, :focus, and :active are pseudo-classes that are determined by a user’s actions. They each correspond to a very specific point in how a user will interact with an element on a page such as a link or a button or an input field.

With the range in input devices we have today, these pseudo-classes also behave slightly differently depending on if the user is interacting with the element with a mouse

When we hear the world “visibility”, we tend to only think of vision. But the visibility: hidden rule actually affects different kinds of visibility - visual, spatial, assistive technology, and interaction - in different ways....

When we select an element by its .class or #id, we’re using predefined and unchanging attributes that are baked into the DOM. With pseudo-classes, we can select elements using information that isn’t already in the DOM and can change based on how a user interacts with the page....

A couple of weeks ago, I wrote an article on what exactly the DOM is. To recap, the Document Object Model is a representation of an HTML document. It is used by browsers to determine what to render on the page, and by Javascript programs to modify the content, structure,...

This is an analysis of the event-stream incident of which many of you became aware earlier this week. npm acts immediately to address operational concerns and issues that affect the safety of our community, but we typically perform more thorough analysis before discussing incidents—we know you’ve been waiting.

On the morning of November 26th, npm’s security team was notified of a malicious package that had made its way into event-stream, a popular npm package. After triaging the malware, npm Security responded by removing flatmap-stream and event-stream@3.3.6 from the Registry and taking ownership of the

Firefox 64 is available today! Our new browser has a wealth of exciting developer additions both in terms of interface features and web platform features, and we can’t wait to tell you about them. You can find out all the news in the sections below — please check them out, have a play around, and let us know your feedback in the comment section below.

New Firefox interface features

We’re excited to introduce multiple tab selection, which makes it easier to manage windows with many open tabs. Simply hold Control (Windows, Linux) or Command (macOS) and click on tabs to select them.

Once selected, click and drag to move the tabs as a group — either within a given window, or out into a new window.

When we first started working on this project, our ambitions were pretty modest — take all of the tips and tricks we’ve shared on Twitter, bundle them up into one resource, and put it out into the world.

But the more time we put into planning it, the more we realized that we had an opportunity to create something better than that. Something that wasn’t just a book, but more like a complete survival kit for designing for the web.

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I won’t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.

Wrappers🚩 Table of ContentsCollect statistics on the use of open source

TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics options when creating editor.

Learning modern JavaScript is tough if you haven’t been there since the beginning. The ecosystem is growing and changing so rapidly that it’s hard to understand the problems that different tools are trying to solve. I started programming in 1998 but only began to learn JavaScript seriously in 2014. At the time I remember coming across Browserify and staring at its tagline:

“Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.”

I pretty much didn’t understand any word in this sentence, and struggled to make sense of how this would be helpful for me as a developer.

IntelliCode augments your IntelliSense by recommending commonly used completion items for your current context at the top of your list. These contextual recommendations are generated by common practices learned from having IntelliCode train across thousands of real-world projects. This saves you time by putting what you’re most likely to use at the top of your list, so you don’t have to search though alphabetical suggestions.

Install the Visual Studio IntelliCode extension through the marketplace or install it from the Extensions tab in Visual Studio Code. Then, just open a TypeScript or JavaScript file and start editing. You will start seeing

Henrik Joreteg on Twitter: "It's so ridiculous that on iOS Safari has ServiceWorker but Chrome for iOS does not.
This is because Apple has banned all web rendering engines except for WebKit. So, Chrome for iOS is just a wrapper around a WebKit web-view which... don't support ServiceWorker. 😠"

Same for webRTC. Works in Safari, but no camera access in Chrome. And: no camera access in (all) PWAs – a site can break because the user installed it! (even from Safari) Sad, but necessary: if (!/iPhone|iPad|iPod/.test(userAgent)) { manifest.href = './manifest.json'; }

Habits are hard to break. We have become quite attached to the methods we use each day. We aim for efficiency and reliability, but in doing so we get trapped in our little comfort zone. We ask for clear goals and a clearer roadmap, but we get stuck iterating the same feature over and over. We want to be bold in our vision, but we get stuck in group thinking. We want to learn from research, but we don’t have the bandwidth to act on the insights we receive.

When we finally become aware of our inability to make progress, it is often too late. The next step, often, is to pause day-to-day work to rethink our longer-term vision and strategy. Many times, we hire an external consultancy firm to do the thinking for us. While it can be insightful to bring fresh eyes to a problem, strategic explorations shouldn't be outsourced entirely or framed as a one-off project. They should be part of our everyday decisions. They should be part of our company ethos.

Microsoft's Edge web browser has seen little success since its debut on Windows 10 in 2015. Built from the ground up with a new rendering engine known as EdgeHTML, Microsoft Edge was designed to be fast, lightweight, and secure, but it launched with a plethora of issues that resulted in users rejecting it early on. Edge has since struggled to gain traction, thanks to its continued instability and lack of mindshare, from users and web developers.

Because of this, I'm told that Microsoft is throwing in the towel with EdgeHTML and is instead building a new web browser powered by Chromium, which uses a similar rendering engine first popularized by Google's Chrome browser known as

JavaScript is one of the most popular programming languages in the world, and is now widely used also outside of the browser. The rise of Node.js in the last few years unlocked back-end development - once the domain of Java, Ruby, Python, PHP, and more traditional server-side languages.

The JavaScript Handbook follows the 80/20 rule: learn 80% of JavaScript in 20% of the time.

Learn all you need to know about JavaScript!

Note: you can get a PDF, ePub, or Mobi version of this handbook for easier reference, or for reading on your Kindle or tablet.

JavaScript is one of the most popular programming languages in the world. Created 20 years ago, it’s gone a very long way since its humble beginnings.

When the iPhone X came out with the infamous notch, you may have heard of the new safe-area-inset values, which allowed browsers to detect the area of the screen that was covered by the notch and move content around appropriately.

Recently, these values have been formalised as part of a new specification for CSS Environment Variables. This specification is still in the stage of Editor’s Draft which means that, although some browsers may begin implementation, it is not yet an official part of the specification. However, it does have good support with browsers that need it, e.g. iOS Safari on the iPhone X, and can be used in a progressive way.

I know a better way how to deal with massive PRs. Just one comment: "Dude, this is too large to review, could you please split this into parts". I think devs should follow the rule "Show a little code, get a lot of feedback. Show a lot of code, get only a little feedback."

Sources claim that Microsoft is abandoning EdgeHTML and building a Blink/Chromium based browser. This might be a good business decision for Microsoft but it is a disastrous advancement for the Web. In this short post, I will make a case for why we’re losing the Web and how in a Blink, all we love about our Web will be owned and controlled by a single entity.

Browser engines are an endangered species

We used to have much more diversity in terms of browser engines years ago than we do today. This is easy to understand as the Web in 2018 is far more complex than it was in the early noughties. It is very costly to develop and maintain a Web engine and few companies have the necessary talent and cash to do it. Microsoft is one of those companies but the fact that it might be

Last week, we gave the first official preview of Vue support for Ionic Framework at VueConf Toronto. Our very own Josh Thomas (@jthoms1) shared some insight into the first alpha release of @ionic/vue and why we think Vue + Ionic Framework makes a perfect match for developers. But before we dive into the nitty-gritty of it all, it’s important to first understand the history of Ionic Framework and Vue.

What is Ionic Framework?

If you’re already using Vue, you might be wondering: What is the Ionic Framework and why should I care?

Well, let’s take a step back and just say, “Hello, we’re the Ionic!” We’re about 5 million apps strong, with companies like GE, Nationwide, and Untappd using our code.