Inside a super fast CSS Engine: Quantum CSS (aka Stylo)

August 23, 2017 by Bramus! Leave a comment

Great writeup on how Firefox’s new CSS Engine “Quantum CSS” works. Also sports a clear and in-depth explanation of the rendering pipeline, with some nice illustrations to go along.

You may have heard of Project Quantum… it’s a major rewrite of Firefox’s internals to make Firefox fast. We’re swapping in parts from our experimental browser, Servo, and making massive improvements to other parts of the engine.

The first major component from Servo – a new CSS engine called Quantum CSS (previously known as Stylo) – is now available for testing in our Nightly version.

Inside a super fast CSS Engine: Quantum CSS (aka Stylo) →

Elsewhere , , , , Leave a comment

Update React Native apps in production with AppHub Deploy

August 22, 2017 by Bramus! Leave a comment

Use git push to instantly update React Native apps in production.

Your JS Bundle gets store on the AppHub servers. Upon launch AppHub’s iOS library detects updates and swaps in new code and images.

[AppHub setApplicationId:@"APPLICATION_ID"];
NSBundle *bundle = [AppHub buildManager].currentBuild.bundle;
NSURL *jsCodeLocation = [bundle URLForResource:@"main"
                                 withExtension:@"jsbundle"];

AppHub Deploy →

Elsewhere , , Leave a comment

10 Redux tips to scale your dev team

August 22, 2017 by Bramus! Leave a comment

Recently I landed a gig at a company to help their team out with their React work (using Redux). This list of tips – save for number 10 – resonates quite well with what I’ve been introducing there:

  1. Plan 1 day of training per developer dedicated to Redux
  2. Integrate Redux-dev-tools as early as possible
  3. Use action creators
  4. Organize your file system with Redux Ducks
  5. Write unit tests, it’s *free*
  6. Make general APIs using payload-based action creators
  7. Anticipate that you will have a lot of async-handling code
  8. Normalize your state like a database
  9. Use selectors
  10. Flowtype, Reasonml or Typescript can really help

10 Redux tips to scale your dev team →

Elsewhere , , Leave a comment

Puppeteer – Headless Chrome Node API

August 22, 2017 by Bramus! Leave a comment

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  browser.close();
})();

Puppeteer – Headless Chrome Node API →

Elsewhere , , , , Leave a comment

Electron Webpack Dashboard

August 17, 2017 by Bramus! Leave a comment

Ken Wheeler, who also created the aforementioned webpack-dashboard, has now created an Electron based version:

The original webpack-dashboard, was fun and people seemed to like it. Unless they were on Windows, or used a weird terminal set up, or if they just wanted more.

The original dashboard felt like working at NASA. 50 years ago. I hope this dashboard feels like working at NASA today. Or at Westworld. Or like the beginning of Westworld at least.

Introducing Electron Webpack Dashboard →
electron-webpack-dashboard Source (GitHub) →
Download electron-webpack-dashboard →

Elsewhere , , Leave a comment

Create interactive SVG maps in React with react-simple-maps

August 16, 2017 by Bramus! Leave a comment

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson.

react-simple-maps →

Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation:

Elsewhere , , , , Leave a comment

The Difference Between Explicit and Implicit Grids

August 16, 2017 by Bramus! Leave a comment

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.

This is all handled by the so called explicit and implicit grid.

The Difference Between Explicit and Implicit Grids →

Elsewhere , , , Leave a comment

AR.js: Efficient Augmented Reality for the Web

August 16, 2017 by Bramus! Leave a comment

AR.js is Efficient Augmented Reality for the Web using ARToolKit. It is Fast! It runs efficiently even on phones. 60 fps on my 2 year-old phone! it is a pure javascript solution, fully opensource. It works on any phone with webgl and webrtc

AR.js: Efficient Augmented Reality for the Web →

Elsewhere , , , , Leave a comment

Masonry Layout with CSS Grid and grid-auto-flow: dense;

August 15, 2017 by Bramus! Leave a comment

By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout.


(click for demo)

(via)

💁‍♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes:

At first glance this looks a bit like masonry, however as you can see the items are all in strict rows and columns, some are just spanning multiple tracks.

For Masonry what you actually would need is for auto-placement to look at both height and width and be able to create ‘rows’ that also push items up into the area of the row above to fill in gaps.

There’s an active issue for this listed in the CCSWG Issues

Elsewhere , Leave a comment

Morphing Page Transition

August 15, 2017 by Bramus! Leave a comment

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect.

<div class="content content--intro">
	<div class="content__inner">
		<!-- ... -->
	</div>
	<div class="shape-wrap">
		<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
			<path 
				d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
				pathdata:id="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z">
			</path>
		</svg>
	</div>
</div><!-- /content--intro -->

<div class="content content--fixed">
	<div class="content__inner">
		<!-- ... -->
	</div>
</div><!-- /content--fixed -->

The SVG path data is morphed using a CSS animation, as both paths contain the same amount of points.

Morphing Page Transition →

Did you know it’s possible to change SVG path data with only a tad of CSS?

Elsewhere , , , Leave a comment