The Cost Of JavaScript In 2018

August 3, 2018 by Bramus! Leave a comment

Addy Osmani:

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens?

Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.

Today we’ll cover some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience.

Be sure to note the PRPL pattern, and the usage of a “Performance Budget”.

A video of the talk upon which this post was inspired, is also available (do note that some parts in the video are not as extensive as the write-up):

The Cost Of JavaScript In 2018 →

Elsewhere , Leave a comment

What Made Darth Vader Visually Iconic

August 2, 2018 by Bramus! Leave a comment

Always great stuff, by The Nerdwriter:

About two years ago I started watching Star Wars with my children. Whilst watching the first movie (Episode IV) I kind of found Darth’s role quite disturbing. He was just floating there in the background, and all stuff that we associate with him wasn’t that well expressed. It’s only during Episode V that his character is presented as how I remember it.

Elsewhere , , , Leave a comment

carbon-cli – Carbon, from the CLI

July 15, 2018 by Bramus! 1 Comment

carbon-cli is a CLI tool which interacts with the aforementioned Carbon, allowing you to create beautiful images of your source code.

Installation per NPM/Yarn, or run it directly using npx

npm i -g carbon-cli

Usage is quite simple:

carbon -f file.js

carbon-cli – Carbon, from the CLI →

Elsewhere , , 1 Comment

Swoole – PHP asynchronous programming framework

July 15, 2018 by Bramus! Leave a comment

Swoole is an high-performance network framework using an event-driven, asynchronous, non-blocking I/O model which makes it scalable and efficient. It is written in C language without 3rd party libraries as PHP extension.

It enables PHP developers to write high-performance, scalable, concurrent TCP, UDP, Unix Socket, HTTP, WebSocket services in PHP programming language without too much knowledge about non-blocking I/O programming and low-level Linux kernel.

Compared with other async programming frameworks or softwares such as Nginx, Tornado, Node.js, Swoole has the built-in async, multiple threads I/O modules. Developers can use sync or async API to write the applications.

Will be checking this one out, as an alternative to ReactPHP, since this one comes as a PECL extension. Speed should be heavily better. A quick search around tells me it performs quite well indeed.

Swoole – PHP asynchronous programming framework →

Elsewhere , , Leave a comment

CSS shape-outside Experiments

July 15, 2018 by Bramus! Leave a comment

I like these pens by Kristopher Van Sant using shape-outside to wrap text in a shape. Take this heart for example:

CSS Shapes Experiments →

🤓 Back in 2006 (!) I created a small site/tool named “The Box Office” to fake that. It took the line-height and floated a truckload of boxes to one side to fake the effect. It’s been long discontinued by now.

Elsewhere , , Leave a comment

Vision-free MIT Cheetah

July 15, 2018 by Bramus! Leave a comment

Cheetah can now run blind amongst a few other new tricks:

Also notice how small this thing has become when compared to three years ago 😱

Elsewhere , Leave a comment

Components and Concerns

July 15, 2018 by Bramus! Leave a comment

Jeremy Keith, on Separation of Concerns and how that comes into play where one’s dealing with Component based design:

My point is this:

  • Separating structure, presentation, and behaviour is a good idea.
  • Separating an interface into components is a good idea.

Those two good ideas are not in conflict. They work best when they’re done in combination.

Yes, yes, yes, … YES! A THOUSAND TIMES YES!

Components and Concerns →

💁‍♂️ You might also have seen this related image float around on the Twitters:

Elsewhere , , Leave a comment

Fixing common performance problems in React Navigation

July 15, 2018 by Bramus! Leave a comment

If you’re using React Navigation in your app(s) you might have noticed these two issues the folks over at November Five have written about:

On a few screens – specifically those with lots of components – we started noticing a few things…

Right off the bat, there is a substantial delay between the user pressing a button and the swipe-in animation of a new screen. When a new screen is pushed, React Navigation will initially render it off-screen and animate it into place afterwards. This means that when a complex screen with lots of components that easily takes a few hundred milliseconds to render is pushed, it feels less snappy than a natively written application. It also causes some nasty side effects: for instance, if you tap a button quickly, you can trigger the same route from being pushed multiple times.

Another problem is that business logic can be executed while the swipe-in animation is doing its thing. This can make for a janky animation.

Of course the post also contains fixes for these problems 😉

Fixing common performance problems in React Navigation →

Elsewhere , , Leave a comment

Clearfix: A Lesson in Web Development Evolution

July 15, 2018 by Bramus! Leave a comment

A lesson in webdev history by Jason Hoffman:

The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout. The clearfix was invented to solve all that.

But to understand the clearfix, you have to go back even further, to the 2004 and a particular technique called the Holly hack.

I had some nostalgic flashbacks whilst reading this 🙂

Clearfix: A Lesson in Web Development Evolution →

Elsewhere , , , Leave a comment

JavaScript engine fundamentals: Shapes and Inline Caches

July 15, 2018 by Bramus! Leave a comment

Mathias Bynens and Benedikt Meurer:

As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code.

I especially like the part where they take a look into an JS engine’s Object Model:

How do JavaScript engines implement the JavaScript object model, and which tricks do they use to speed up accessing properties on JavaScript objects? As it turns out, all major engines implement this very similarly.

(knowledge of the aforementioned Property Descriptors will come in handy ;))

The contents of the article have also been touched upon in this duo-talk they gave:

JavaScript engine fundamentals: Shapes and Inline Caches →

Elsewhere , Leave a comment