Simplify continuous deployment with Project Nebula

Interesting new product (Beta) from the Puppet folks:

Project Nebula automates continuous deployment of applications to multiple cloud-native targets. Our objective is to dramatically simplify continuous deployment of cloud native applications and infrastructure by composing the tools and workflows your developers already use into simple, repeatable deployment workflows.

Project Nebula →
Simplify continuous deployment with Project Nebula →

useEffect(fn, []) is not the new componentDidMount()

Brad Westfall from React Training on why the React hook useEffect(fn, []) is not the same as componentDidMount():

When developers start learning hooks having come from classes, they tend to think “I need to run some code once when we mount, like how componentDidMount() works. Ah, I see that useEffect with an empty dependency array does just that. Okay I know how all this works…”

This way of thinking gets us into trouble in a few ways:

  1. They’re actually mechanically different, so you might not get what you expect if consider them the same (which we talk about below).
  2. Thinking in terms of time, like “call my side effect once on mount” can hinder your learning of hooks.
  3. Refactoring from classes to hooks will not mean you simply replace your componentDidMount’s with useEffect(fn, []).

Very insightful post!

useEffect(fn, []) is not the new componentDidMount()

Google Maps Hacks: Creating a Virtual Traffic Jam

Google Maps Hack by Simon Weckert:

99 second hand smartphones are transported in a handcart to generate virtual traffic jam in Google Maps. Through this activity, it is possible to turn a green street red which has an impact in the physical world by navigating cars on another route to avoid being stuck in traffic.

Hah, Brilliant!

Google Maps Hacks →

React Native is the Future of Mobile at Shopify

Until now, the standard for all mobile development at Shopify was native mobile development. We built mobile tooling and foundations teams focused on iOS and Android helping accelerate our development efforts. While these teams and the resulting applications were all successful, there was a suspicion that we could be more effective as a team if we could:

  • bring the power of JavaScript and the web to mobile
  • adopt a reactive programming model across all client-side applications
  • consolidate our iOS and Android development onto a single stack.

As a React (Native) Developer (although I’ve been dabbing more PHP lately; ahem!) I can only applaud this move. Good to see Shopify move to React Native, with the explicit intention of making core contributions along the way.

React Native is the Future of Mobile at Shopify →

12 Signs You’re Working in a Feature Factory

Are you constantly shipping features and cutting corners? Then you might be working at a Feature Factory. Here are 12 symptoms:

  1. No measurement of impact.
  2. Rapid shuffling of teams and projects.
  3. Success theater around “shipping”.
  4. Infrequent (acknowledged) failures and scrapped work.
  5. No connection to core metrics.
  6. No PM retrospectives.
  7. Obsessing about prioritization.
  8. No tweaking.
  9. Culture of hand-offs.
  10. Large batches.
  11. Chasing upfront revenue.
  12. Shiny objects.

Each bullet is explained a bit more in the post itself.

12 Signs You’re Working in a Feature Factory →

📝 I actually found this post through the follow-up post 12 Signs You’re Working in a Feature Factory — 3 Years Later. Also worth reading.

HTML attributes to improve your users’ two factor authentication experience

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users’ two factor authentication experience.

The final markup to trigger the correct keyboard and have the browser autocomplete the received SMS code is this:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

HTML attributes to improve your users’ two factor authentication experience →

🚨 Do note that 2FA using SMS is not secure, mainly due to the lacking policies at SIM providers easily allowing SIM port hacks. The recently announced origin-bound OTP addition as proposed by Webkit/Apple won’t make any difference in the case of a SIM hack.

The Spilhaus “World Ocean Map in a Square“ Projection

Coming to the next version of ArcGIS is the “Spilhaus projection”:

In September and October of 2018, three maps went viral on social media and the web. All of them had the same perspective, featured oceans as the main focus, and presented the oceans as one body of water. The maps were based on the so-called “Spilhaus projection” and centered on Antarctica. Though it has recently gained some popularity online, this projection is not new. Many articles recognize Athelstan F. Spilhaus, a South African-American geophysicist and oceanographer, as the author of this projection back in 1942.

Over at the ArcGIS blog they outline the history and how they’ve implemented it in their next version (ArcGIS Pro 2.5 / ArcGIS 10.8).

The Spilhaus “World Ocean Map in a Square“ Projection →

Beware when merging Pull Requests with a changed lockfile

When watching a diff that contains a lockfile (say: a yarn.lock for example) on GitHub, GitHub doesn’t always show the differences (see screenshot above) as the changes in such files tend to be quite big. And even if it were to show the changes, does one really take a close look into it? With this in mind, Liran Tal started playing around to create a vector of attack using those lock files.

Take this diff for example:

What becomes clear when you look closer, is that I replaced the original ms npm package to resolve it with my own version, which is stored in my GitHub repository. I should have gotten it from the official npm registry, just as was originally set in the lockfile of the project.

When this pull request gets merged, I inject my malicious version of [email protected] into the code in order to control its behavior during runtime.

In this way, I could introduce a backdoor, alter the logic of the ms module or I could run some postinstall scripts.

To prevent such commits from being merged, you can resort to lockfile-lint which will warn you for such issues.

As an end-user it’s wise to run npm install with --ignore-scripts.

Why npm lockfiles can be a security blindspot for injecting malicious modules →

Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

The result looks like this:

Uses the aforementioned box-decoration-break to span styles across multiple lines along with text-decoration-color to tweak the color of the line below the link.

.gradient-text {
  background: linear-gradient(120deg, #ab4e19, #c99a2e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  text-decoration-color: #ab4e19;
}

Multi-line gradient links →