“Understand the Content”

Steve Jobs on Process and Content:

Hear hear!

(via @SvenMunaron)

Elsewhere , , Leave a comment

A Tinder Progressive Web App Performance Case Study

Addy Osmani:

Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to 100% of users on desktop and mobile, employing techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for chat engagement. Today we’ll walk through some of their web perf learnings.

Their PWA is also built using React and Redux.

A Tinder Progressive Web App Performance Case Study →

Elsewhere , , , Leave a comment

Building Flexible Design Systems

Yesenia Perez-Cruz is a design director at Vox Media (who you might know from their brands The Verge, Polygon, etc.). In “Building Flexible Design Systems” she does a deep dive on creating flexible design systems:

Slides are also available:

Elsewhere , Leave a comment

JavaScript: Removing a property from an object immutably by destructuring it

Say you have a JavaScript object like this:

const user = {
    firstName: 'Bramus',
    lastName: 'Van Damme',
    twitter: 'bramus',
    city: 'Vinkt',
    email: 'bramus@bram.us',
};

And now say you want to create a copy of the whole object, except for the email property.

The first idea that came to my mind was to clone/copy it and then successively remove email from the new object using the delete operator:

const userWithoutEmail = Object.assign({}, user);
delete userWithoutEmail.email;

Thanks to Destructuring and Object Rest/Spread Properties (currently stage 3) however, we can also do this:

const {
    email,
    ...userWithoutEmail
} = user;

This little piece of code destructures email off the user object, and the collects all rest props into userWithoutEmail. Handy!

This is part of a talk on ESNext named “What’s next
 for JavaScript?” which I recently gave at a Fronteers België meetup. I’m currently still in the process of preparing the slides for publication.

Original Content , Leave a comment

ProvisionQL – Finder Quick Look plugin for .ipa and .mobileprovision files

One of the Finder Quick Look plugins I have installed is ProvisionQL. It allows one to have a quick preview of .ipa and .mobileprovision files.

Installation possible via Brew-Caskroom:

brew cask install provisionql

ProvisionQL →

Elsewhere , , , Leave a comment

Setting up macOS with ./freshinstall

Recently I configured my new MacBook Pro. I decided to start with a clean slate and not migrate anything from my old MacBook. To configure macOS I whipped up ./freshinstall, which automates that process.

Steps included are:

  1. Configure macOS Preferences and the like
  2. Generate and load SSH keys
  3. Install the essentials: XCode, Git, Homebrew
  4. Copy over my (starter) dotfiles (also contained in the repo)
  5. Install (and sometimes also configure) all most of the software that I use.

The heavy lifting is done by defaults and Homebrew + Homebrew-Cask. Thanks to the aforementioned mas-cli, I’m also able to automatically install software from the Mac App Store.

Many of the settings are inspired upon the work of others. Mainly Mathias Bynens his dotfiles repo came in handy, along with a few other repos and of course the use of a few Google Search Coupons.

./freshinstall

Original Content , , Leave a comment

Fontastic Web Performance

Emojineer Monica Dinculescu:

Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.

By using CSS font-display you can tweak how browsers should behave.

The accompanying “Font-display playground” is a small explainer accompanying this talk. In short, the essence of how font-display works can be boiled down to this image:

Font-display playground →

Elsewhere , , , Leave a comment

Axel — Command Line Download Accelerator

Via @benschwarz:

Axel tries to accelerate the downloading process by using multiple connections for one file, similar to DownThemAll and other famous programs. It can also use multiple mirrors for one download.

Axel →

Getting sudden flashbacks to this old fart here:

Think it was 1999 or 2000 when I first use FlashGet (then named JetCar) to more efficiently use my 56kbps dial-up connection (where you had to pay by the minute, not megabyte) 😃

Elsewhere , , Leave a comment

Stealing Usernames, Passwords, and other (Personal) Data via Browsers and NPM Packages

👋 This post also got published on Medium. If you like it, please give it some love a clap over there.

Late 2016, Stoyan Stefanov published “Oversharing with the browser’s autofill”. It’s an article on stealing personal data using the browsers their form autofill feature. The attack works by leveraging abusing the fact that autocompletion will also complete fields which are visually hidden.

Note: it was only in January 2017 that this type of exploit gained traction, and was accredited to the wrong person (see this ZDNet article for example). As Stoyan points out in his article: it’s been warned about as early since 2013.

If it’s a comfort: it’s not until you enter data in one field and successively choose to autocomplete, that you’re leaking data.

~

Fast forward to late 2017: In “No boundaries for user identities: Web trackers exploit browser login managers” the autocomplete feature of password managers is abused by rogue advertising scripts.

Since your password manager (and your browser itself) will prefill usernames and passwords, any script loaded can read these out and do whatever they want to with it. Unlike the autocomplete above this kind of leak will happen automatically .At least two advertising scripts have been identified to using this technique to collect usernames.

The only way to prevent this is that browsers return empty strings for autocompleted values when reading them in via input.value,
or at least present a confirm dialog (and pause the JS runtime) until approved.

~

In “I’m harvesting credit card numbers and passwords from your site. Here’s how.” David Gilbertson notched it up a little:

I can’t believe people spend so much time messing around with cross-site scripting to get code into a single site. It’s so easy to ship malicious code to thousands of websites, with a little help from my web developer friends.

I know, the previous attacks mentioned weren’t XSS attacks, yet one could perform them through after injecting a remote script 😉

All you have to do is write a successful NPM package which others will use. Popular ones are things like logging libraries (*), which have many many downloads. If you then release a version with some rogue code …

(*) Speaking of: my Colored Line Formatter for Monolog has surpassed 250K downloads this week!

Would this kind of hack code be detected easily? Not really. The versions that get published on NPM are compiled and minified versions which are nowhere to be found in the source repo. Above that the compiled code can be obfuscated, so that words like fetch don’t appear in it. And requests performed via dynamically injected links that have a rel="prefetch" attribute set can bypass Content Security Policies.

~

Yesterday evening there was a small debacle on the NPM front as several packages had gone missing … it was left-pad chaos all over again, albeit for only a short period of time.

One of the packages missing – namely pinkie-promise – is used in eslint, which itself is used just about everywhere. Installing dependencies in React-based apps didn’t work anymore because of this.

By now the issue has been resolved (postmortem here), yet the window between Jan 06, 2018 - 19:45 UTC (identified) and Jan 06, 2018 - 21:58 UTC (resolved) was a very dangerous one. In said window any developer could release (and have released!) packages with the same name. Mostly they were re-publishes of the actual thing, yet one could’ve also published rogue versions such as the ones described above.

NPM is already fighting name squatters by disallowing variants with punctuations and promoting the use of username-scoped packages, but I personally think an extra feat is missing: upon unpublishing of a package (be it by accident or not), its name should be quarantined for 30 days. In that 30 day window no NPM user other than the original one should be able to republish a package having the same name. Additionally there should be an option for the original author to release or transfer a package name to another NPM user.

FIN.

Original Content , , , , Leave a comment