Vapor – Server Side Swift

Interesting to see that Swift can also be used as a serverside language.

One can clearly see parallels with other languages and frameworks. For example Vapor comes with an HTTP Package, which – amongst other things – contains a Request class.

// http://vapor.codes/example?query=hi#fragments-too
let scheme = request.uri.scheme // http
let host = request.uri.host // vapor.codes

let path = request.uri.path // /example
let query = request.uri.query // query=hi
let fragment = request.uri.fragment // fragments-too

// Route “hello/:name/age/:age”
let name = request.parameters["name"] // String?
let age = request.parameters["age"]?.int // Int?

// Headers
let contentType = request.headers["Content-Type"]

// …

Vapor →

Elsewhere , , Leave a comment

Freelance Achievement Stickers

Funny because it’s true 😂

More stickers on the page.

Freelance Achievement Stickers →

Elsewhere , , Leave a comment

Inspecting Redux Stores without the Redux Devtools


Checking out the Redux Store of Soundcloud Redux

Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things.

When it comes to React apps that use Redux I like to see how they’ve set up their store. If the developer has enabled integration with the Redux Devtools I can use just that. When they haven’t (because: production) I manually look up the store and then retrieve it’s state.

To look up the store, use the React DevTools. Traverse the Component Tree until you stumble upon the element with a store prop. This usually is high up the tree.

💁‍♂️ The regular DevTools provide you the $0 command in the console to get the most recently selected element or JavaScript object, the React DevTools provide the $r command to get the most recently selected React Component.

With the correct component selected, getting the contents of the store is very easy thanks to the $r command:

$r.store.getState();

Dispatching actions also is a breeze:

$r.store.dispatch({
    type: '…',
    payload: {
        …
    }
});

Happy inspecting 🙂

Elsewhere , , , Leave a comment

#SignOfTheTimes

A sheep herder from Eastern Turkey, anno 2017

(via @netlash)

Elsewhere , Leave a comment

Gremlins.js – Monkey testing library for web apps and Node.js

gremlins.js is a monkey testing library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins.

I especially like the syntax to start a test:

var horde = gremlins.createHorde();
horde.unleash();

And oh, make sure you don’t run any tests after midnight 😉

Gremlins.js →

Related: Chaos Kong by Netflix also is inspired by the simian chaos theory 😉

Elsewhere , , Leave a comment

Breaking the CSS Grid (and how to fix it)

Dave Rupert lists two scenarios in which the CSS Grid can be broken, and how to fix it:

  1. Overflow-x Elements break the Grid
  2. Form Controls break the Grid

To easily fix these, Dave has whipped up a small CSS snippet he calls “Fit Grid”, containing a CSS class you can apply to prevent these issues from happening.

Breaking the Grid →

Elsewhere , , Leave a comment

Tame your Service Worker before your Progressive Web App go into the wild

Slidedeck by Maxim Salnikov:

With great power comes great responsibility – trivially, but true: I’ll show the examples of how easy the “Progressive” part of the PWA term could become “Regressive”, how to fix this, and how to test our Service Worker before deploying your app. First, we’ll go through the well-known PWA functionality (App Shell, Offline Cache, Push) with focusing on the pitfalls we could easily get into, and how to avoid these. Next, I’ll expand your horizons with the new PWA features, like Foreign fetch, Periodic sync, Navigation Preloads. And again – “handle with care”. I’ll share the points we have to pay attention to, as well as best practices.

Elsewhere , , Leave a comment

The Thistlegorm Project

One of the most famous wrecks to dive on is that of the SS Thistlegorm, a British merchant steam ship that was sunk by German bombers on 6 October 1941 near Ras Muhamad (Red Sea, Egypt).

The University of Nottingham, Ain Shams (Cairo) and Alexandria University have joined forces to create a 3D model of the ship’s wreck. Spread out over 12 dives they’ve collected 24,307 high resolution image files (amounting to 637Gb of data) and have recorded several 360° videos.


360 video of a dive on the SS Thistlegorm

The conversion of the 2D images to a 3D model was done using a piece of software called Agisoft Photoscan Pro, and amounted for quite a lot of time:

  • 42 (1008hrs) days of local computing runtime
  • 23 days (556hrs) of cloud computing runtime
  • 65 (1560hrs) days of continuous computer processing in total

The result is amazing though: not only have they created 3D scenes of the exterior of the wreck’s site (embedded at the top of this post), they’ve also created 3D models of the various floors of the SS Thistlegorm. If you have a Cardboard Viewer you can watch ‘m in true VR style.

The Thistlegorm Project →
The Thistlegorm Project: 3D Programmetry →
The Thistlegorm Project: 360 Videos →

💁‍♂️ SS Thistlewhat?

In September 1941, during WW2, the SS Thistlegorm and HMS Carlisle could not transit through the Suez Canal to reach the port of Alexandria due to a collision in said canal. Awaiting unobstructed passage of the canal they moored at a location the Allies labeled “Safe Anchorage F”.

In the night of October 5 to October 6 1941 the Germans dispatched two Heinkel He-111 aircraft from Crete to locate Allied troop carriers, but failed to do so. On their way back however they spotted the SS Thistlegorm and bombed it. By pure chance the bombs hit cargo hold #4, which also contained (part of) the ammunition the ship was holding, resulting in a huge explosion which made the ship sink fast.


Plan of the SS Thistlegorm (click to enlarge)

The fact that the ship is so famous is because of several reasons:

  • At a depth of 30m it rests at an accessible depth.
  • The wreck sits upright, making it also accessible (wrecks that don’t sit upright can make you nauseous)
  • Even though Jacques Cousteau discovered the wreck in the late fifties it was forgotten for a long time. It only became a dive site in the late nineties, which means things were left intact for over 4 decades.
  • It’s a wreck with lots of things to see. Since it was left untouched for a long time, most of the cargo is still in place: trucks, boots, motorbikes, rifles, shells, airplane wings, tanks, steam locomotives, … they’re all still there just like they were stored at the time of the explosion. (Note that much has been salvaged over the past 20 years though, unfortunately)
  • The wreck can easily be penetrated, with one or more exits always in sight.


One of the motorbikes aboard the Thistlegorm

In March earlier this year I did two dives on the SS Thistlegorm. It can confirm that it truly is a beautiful wreck to dive on. Beware the possible strong currents though 😉

Elsewhere , , , Leave a comment

Using a 1-star Review to Your Advantage

Not all bad reviews are bad:

Snowbird is a resort in Utah known for its difficult slopes. After some bro named Greg from L.A. gave them a 1-star review because the mountain was mean to him, they created a print advertisement starring his review.

(src)

Elsewhere , Leave a comment

Optimize React Performance

Good advice every React dev should be aware of:

React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary culprit for poor performance is generating too many renders and reconciliations. We’ll cover 4 techniques to help ensure that your app is optimized and offers a snappy user experience.

  1. Use key correctly
  2. Manage shouldComponentUpdate
  3. Extend PureComponent instead of Component
  4. Build for production

Luckily, when not using keys (item #1), React will give you a console warning. To check if you’ve built for production or not (item #4), you can use the visual indicator contained in the React Dev Tools.

Optimize React Performance →

🚀 Want to take it to the next level? The Twitter folks have a nice writeup on the performance tweaks they’ve done on Twitter Lite. The DeferredRenderWrapper HOC especially is a nice one.

Elsewhere , , Leave a comment