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.

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,...

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.

Unscii is a set of bitmapped Unicode fonts based on classic system fonts. Unscii attempts to support character cell art well while also being suitable for terminal and programming use.

The two main variants are unscii-8 (8x8) and unscii-16 (8x16). There are also several alternative styles for unscii-8, as well as a 8x16 "full" variant that incorporates missing Unicode glyphs from Fixedsys Excelsior and GNU Unifont. "unscii-16-full" falls under GPL because of how Unifont is licensed; the other variants are in the Public Domain.

Unscii was created by Viznut.

⬝◾■█ EXAMPLES █■◾⬝

There's very little Unscii-specific art or even decent Unicode art in general. Therefore, we'll show some legacy format art.

Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

Animated API

The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way.

This is a book on the functional paradigm in general. We'll use the world's most popular functional programming language: JavaScript. Some may feel this is a poor choice as it's against the grain of the current culture which, at the moment, feels predominately imperative. However, I believe it is the best way to learn FP for several reasons:

You likely use it every day at work.

This makes it possible to practice and apply your acquired knowledge each day on real world programs rather than pet projects on nights and weekends in an esoteric FP language.

React 16.5 adds support for a new DevTools profiler plugin. This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications. It will be fully compatible with our upcoming time slicing and suspense features.

The European Copyright Directive vote is in three days and it will be a doozy: what was once a largely uncontroversial grab bag of fixes to copyright is now a political firestorm, thanks to the actions of Axel Voss, the German MEP who changed the Directive at the last minute, sneaking in two widely rejected proposals on the same day the GDPR came into effect, forming a perfect distraction (you can contact your MEP about these at Save Your Internet).

These two proposals are:

1. "Censorship Machines": Article 13, which forces online providers to create databases of text, images, videos, code, games, mods, etc that anyone can add anything to -- if a user tries to post something that may match a "copyrighted work," in the database, the system has to censor them

Js13kGames is a month-long JavaScript coding competition organized by @end3r. Running since 2012, it challenges participants to create a game in 13 kilobytes or less of JavaScript based on a theme that’s announced at the start of the competition.

Bonus: This year there’s a WebXR category meaning web developers can experiment with virtual reality experiences for the competition. For this category, you’ll have the same file size limit of 13 kilobytes, but you’ll get A-Frame or Babylon.js for free!

Developers of all skill levels are welcome to participate. It’s a great excuse to learn or level up your JavaScript, learn or improve upon game development skills, and have fun sharing your ideas. The theme for this year’s competition will be announced on

In my ideal world, CSS Grid and Flexbox would have arrived together, fully formed to make up a layout system for the web. Instead, however, we got Flexbox first and, due to it being better at creating grid-type layouts than floats, we ended up with a lot of Flexbox-based grid systems. In fact, many of the places where people find Flexbox difficult or confusing are really due to this attempt to make it a method for grid layout.

Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes. The competition will start at 13:00 CEST, 13th August and will end at 13:00 CEST, 13th September 2018. Theme for 2018 will be announced on 13th August.

Once upon a time, I might have had to begrudgingly tell a designer this type of layout wouldn’t work well on a responsive web page which needs to function across a range of screen sizes, but not anymore!

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.

This is the first in a series of blog posts in which we outline our experience with React Native and what is next for mobile at Airbnb.

When Airbnb launched 10 years ago, smartphones were in their infancy. Since then, smartphones have become an essential tool to navigate our everyday lives, especially as more and more people travel around the globe. As a community that enables new forms of travel for millions of people, having a world-class app is crucial. Mobile devices are oftentimes their primary or only form of communication while away from home.

Since our first three guests stayed in Rausch Street in 2008, mobile usage has increased from zero to millions of bookings per year. Our apps give hosts the ability to manage their listings on the go and provide travelers with inspiration to discover new places and experiences right at their fingertips.

Creating ASCII art for your terminal isn’t new. Displaying animating ASCII GIFs in the CLI (command line interface), however, hasn’t been possible, or at least, not easy to do -- until now.

Shortly after Tenor was acquired by Google, I had an idea.

Many developers configure static

to appear when opening a terminal, but I imagined that ASCII art could animate like a GIF, and could easily be created from any GIF on Tenor.

After some tinkering, GIF for CLI was born.

Just in time for the

, GIF for CLI is available today on

. GIF for CLI takes in a GIF, short video, or a query to the

and converts it to animated ASCII art. This means each time you log on to your programming workstation, your GIF is there to greet you in ASCII form. Animation and color support are performed using ANSI escape sequences.

Today we’re happy to bring you Intelligent Tracking Prevention 2.0, or ITP 2.0. It builds upon ITP 1.0, which we released last year, and ITP 1.1, which was released in March, adding the Storage Access API.

Removal of the 24 Hour Cookie Access Window

ITP 2.0, as opposed to earlier versions, immediately partitions cookies for domains determined to have tracking abilities. The previous general cookie access window of 24 hours after user interaction has been removed. Instead, authenticated embeds can get access to their first-party cookies through the Storage Access API. The API requires that the user interacts with the embedded content.

“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — Designed by PopArt Studio from Serbia.

“With summer just around the corner, I’m already feeling the tropical vibes.” — Designed by Melissa Bogemans from Belgium.

“June is the month when we celebrate our dads and to me the best ones are the ones that even if they don’t like what you are doing they’ll be by your side.” — Designed by

This marks the next step in our journey to drive innovation across every facet of commerce.

As Content + Commerce capabilities have become inextricably linked, commerce plays a more integral part of the consumer experience than ever before.

With Magento’s position as the world’s most popular commerce platform and Adobe’s leadership in designing and delivering great digital experiences, we will enable every business to create and deliver compelling real-time experiences, engage with customers across every touchpoint, and transact anywhere across the entire customer journey for both B2C and B2B.

Diana Smith makes web images unlike any you’ve probably seen before. That’s because when you’re looking at one of the user interface designer’s creations, you’re not looking at flat pixel data fetched from a server—you’re looking at pure code, rendered live before your very eyes.

Smith’s “Pure CSS Francine,” an elaborate code-drawing in the style of an 1800s oil painting, caused web developers on Twitter to have a meltdown this week. The work was not drawn with a tablet, or a mouse, or even using illustration software. Instead, Smith coded every element by hand in HTML and CSS, computer languages that tell your browser how to display web pages. This means that there is no “image” to save as a file when you view Pure CSS Francine on the web, but you can screenshot it or download the code and play around with it yourself.

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.

It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.

A new augmented reality feature available in Artsy’s iOS app lets you virtually “mount” tens of thousands of paintings, drawings, prints, and other forms of art on any wall. Drawing from the art marketplace’s 800,000-plus catalog, the AR feature is meant to make it possible to see how almost any piece of art will look in your home. It was built for Apple’s latest version of ARKit.

Much in the same way that AR apps from Ikea, Houzz, and others now make it possible to see how furniture might look in any room, Artsy’s tool is meant to help art buyers feel confident that the Van Gogh they’re eyeing will actually work in their Tribeca loft.

Vue Design System is a set of organized tools, patterns, and practices that work as the foundation for Vue.js application development. What initially started as a quick-n-dirty prototyping tool for a client of mine, has grown into a fully capable systems tool that provides an environment where the pattern library and live application can be perfectly in sync.

What initially started as a prototyping tool, has grown into a fully capable systems tool that provides an environ­ment where the pattern library and live application can be perfectly in sync.

The first question I (and many people in my audiences) had was, “why don’t these follow the Top, Right, Bottom, Left order we are used to from everything else in CSS?” They actually go in the reverse order to those values: Top, Left, Bottom, Right! Is the CSS Working Group actively trying to make things difficult?

The answer is that these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in

Brief: Timely provide to quick read articles from 2–5 mins. Articles are catered to specific users based on their schedule and habits.

Problem

The New York Times app loses love of users, due to a myriad of reasons. Along with the competition and cost, the following factors are the reasons for the difficulties.1. Coverage (Users are unhappy about something they read)2. Life-changing event (moving).3. Lack of usage.4. Irrelevant content.

Goal

To build incentives amongst the sea of news apps, many of which are free.

Over the last few years, we have seen designers move up the chain of command and, thankfully, we are starting to see designers occupy senior roles within organizations. The emergence of designers as part of the C-Suite in companies is a welcome development and, with it, we are seeing the emergence of CDOs, Chief Design Officers.

You've optimized all of your code, but your site still loads too slowly. Who's the culprit?

Often, performance problems slowing pages down are due to third-party scripts: ads, analytics, trackers, social-media buttons, and so on.

Third-party scripts provide a wide range of useful functionality, making the web more dynamic, interactive, and interconnected. These scripts may be crucial to your website's functionality or revenue stream. But third-party scripts also come with many risks that should be taken into consideration to minimize their impact while still providing value.