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"]
// …
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:
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 😉
Dave Rupert lists two scenarios in which the CSS Grid can be broken, and how to fix it:
Overflow-x Elements break the Grid
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.
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.
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.
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 😉
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.
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.
Use key correctly
Manage shouldComponentUpdate
Extend PureComponent instead of Component
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.
A sheep herder from Eastern Turkey, anno 2017
