Sia siakaramalegos

Get in the Fast Lane: Measuring Web Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

Optimize and familiarize yourself with your DevTools environment
Understand which metrics matter
Measure the performance of existing applications
Diagnose and prioritize performance problems

Testing double-fetching of module/nomodule JS code (including the Safari hack)

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

Test page: https://jg-testpage.github.io/es-modules/module-nomodule/

Vintage Bundles, aka Modern JavaScript for Modern Browsers

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Articles and research/tests

[Deploying ES2015+ Co

Dev.to API summary for possible Bridgy integration

Contents

No Auth Required
- GET an article by ID
- GET a comment by ID
Requires a token
- GET all articles of a user

It looks like reactions calls are limited to creating and "onboarding". More here: forem/forem#4474.

CHOOSE-A-TRON

A Pen by Sia Karamalegos on CodePen.

Thanks to Gant Laborde for the project idea!

License.

	/* latin */
	@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	<link rel="preload" as="font" type="font/woff2"
	href="./fonts/muli-v12-latin-regular.woff2" crossorigin>

	<link rel="preload" as="font" type="font/woff2"
	href="./fonts/muli-v12-latin-700.woff2" crossorigin>

	<div class="webmentions content-grid-sibling" id="webmentions">

	{% set mentions = webmentions \| getWebmentionsForUrl(metadata.url + webmentionUrl) %}
	{% set reposts = mentions \| webmentionsByType('repost-of') %}
	{% set repostsSize = reposts \| size %}
	{% set likes = mentions \| webmentionsByType('like-of') %}
	{% set likesSize = likes \| size %}
	{% set replies = mentions \| webmentionsByType('in-reply-to') %}
	{% set repliesSize = replies \| size %}

	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
	<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">