PanelKit, a UI framework enabling floating and pinned panels on iOS

Great stuff by Louis D’hauwe, a former student of mine:

PanelKit is a UI framework that enables panels on iOS. A panel can be presented in the following ways:

  • Modally
  • As a popover
  • Floating (drag the panel around)
  • Pinned (either left or right)

This framework does all the heavy lifting for dragging panels, pinning them and even moving/resizing them when a keyboard is shown/dismissed.

PanelKit →

Elsewhere , , Leave a comment

Reflecting On One Very, Very Strange Year At Uber

Susan J. Fowler, whom left Uber after about a year of employment there:

I joined Uber as a site reliability engineer (SRE) back in November 2015, and it was a great time to join as an engineer […] After the first couple of weeks of training, I chose to join the team that worked on my area of expertise, and this is where things started getting weird. On my first official day rotating on the team, my new manager sent me a string of messages over company chat. He was in an open relationship, he said, and his girlfriend was having an easy time finding new partners but he wasn’t. He was trying to stay out of trouble at work, he said, but he couldn’t help getting in trouble, because he was looking for women to have sex with. It was clear that he was trying to get me to have sex with him, and it was so clearly out of line that I immediately took screenshots of these chat messages and reported him to HR.

And that’s just the tip of the iceberg. Unbelievable that this kind of of stuff is still possible. Even worse is that HR neglected all of her complaints, and even protected the offender.

Reflecting On One Very, Very Strange Year At Uber →

Elsewhere , , Leave a comment

Use box-decoration-break: clone; to consistently style fragments of wrapped elements

The box-decoration-break CSS property specifies how the background, padding, border, border-image, box-shadow, margin and clip of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.

box-decoration-break: slice; (shown on the left) is the default behaviour.

MDN: box-decoration-break

Elsewhere , Leave a comment

Jasonette – Build cross-platform mobile apps using JSON

Just like how web browsers turn HTML into a web page, Jasonette turns JSON into iOS native components. This lets you build native apps by writing a simple JSON.

Here’s a small snippet/example:

{
    "$jason": {
        "head": {
            "title": "{ ˃̵̑ᴥ˂̵̑}",
            "offline": "true",
            "actions": {
                "$foreground": {
                    "type": "$reload"
                },
                "$pull": {
                    "type": "$reload"
                }
            }
        },
        "body": {
            "header": {
                "style": {
                    "background": "#ffffff"
                }
            },
            "style": {
                "background": "#ffffff",
                "border": "none"
            },
            "sections": [
                {
                    "items": [
                        {
                            "type": "vertical",
                            "style": {
                                "padding": "30",
                                "spacing": "20",
                                "align": "center"
                            },
                            "components": [
                                {
                                    "type": "label",
                                    "text": "It's ALIVE!",
                                    "style": {
                                        "align": "center",
                                        "font": "Courier-Bold",
                                        "size": "18"
                                    }
                                }
                            ]
                        },
                        {
                            "type": "label",
                            "style": {
                                "align": "right",
                                "padding": "10",
                                "color": "#000000",
                                "font": "HelveticaNeue",
                                "size": "12"
                            },
                            "text": "Check out Live DEMO",
                            "href": {
                                "url": "http://www.jasonbase.com/things/xXQ"
                            }
                        },
                        {
                            "type": "label",
                            "style": {
                                "align": "right",
                                "padding": "10",
                                "color": "#000000",
                                "font": "HelveticaNeue",
                                "size": "12"
                            },
                            "text": "Watch the tutorial video",
                            "href": {
                                "url": "https://www.youtube.com/watch?v=S7yGejKIH6Q",
                                "view": "Web"
                            }
                        }
                    ]
                }
            ]
        }
    }
}

The JSON is fetched over HTTP, and then loaded into your app:

This declarative way of working reminds me of one of the approaches I took at work whilst building Culture Club Magazine. Next to the default Story Item types (Cover, Teaser, Article, List, etc.) – each with their specific properties – there’s also a story item type named Custom which accepts a declarative list of components (along with their style, animations, and actions). That list is then translated to actual React components which get rendered inside the story item itself 🙂

Jasonette →
Build cross-platform mobile apps using nothing more than a JSON markup →

Elsewhere , , , , Leave a comment

Behind the Magic: Creating Jedha and Scarif for Rogue One: A Star Wars Story

A taste of the Oscar Nominated Visual Effects work behind the destruction of Jedha and the battle on the beaches of Scarif in Rogue One: A Star Wars Story.

Hope to see a longer cut of this in the future, as it’s rather short. Spectacular nonetheless.

Elsewhere , , Leave a comment

Understanding the Critical Rendering Path

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the “Critical Rendering Path”.

Good and short writeup on how the pixel/rendering pipeline works – something that every developer should now – perfect for those new to the subject.

Do note that next to the DOM and CSSOM another object model also gets generated: the accessibility tree / object model.

Understanding the Critical Rendering Path →

If you like videos more, Paul Lewis has covered this quite some time ago.

Elsewhere , , , Leave a comment

Typora – a minimal markdown reading & writing app

Typora will give you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Replace them with a real live preview feature to help you concentrate the content itself.

Looks great! Not sure if it’s still actively developed though … it’s been around since March 2015, and it looks like it hasn’t received any big updates ever since. Available on all platforms.

Typora – a minimal markdown reading & writing app →

Elsewhere , , Leave a comment

Dode Hoek (Blind Spot)

Over the weekend I went to the movie theatre to see “Dode Hoek” by Nabil Ben Yadir featuring Peter Van den Begin, Soufiane Chilah, and Jan Decleir.

Dode Hoek (Blind Spot) is the story of Jan Verbeeck, the uncompromising commissioner of the Antwerp drug squad. Known as Mr. Zero Tolerance, he is hugely popular with the people and the media. The country is thrown into commotion when he announces that he is leaving the police force just before the elections to join the extreme right party, VPV. On his last day as a policeman, he leads an investigation that takes him to Charleroi where a raid on a drug lab sets in motion a series of unforeseeable and fatal events.

Must say I was impressed by the movie. Thrilling (and highly relevant) plot, good acting, nice camerawork, proper sound design, … — well worth your time!

Elsewhere , , Leave a comment

JavaScript Start-up Performance

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has to parse, interpret & run them. In this post, we’ll dive into this phase for JavaScript, why it might be slowing down your app’s start-up & how you can fix it.

But it parses+compiles pretty darn fast on your brand-spanking-new Macbook Pro, right?

It’s important that we understand the time spent in Parse/Compile can often be 2–5x as long on phones as on desktop.

Hence why you should slow down your CPU by 10x when benchmarking your site, in case you also want to make the fastest website in the world.

JavaScript Start-up Performance →

Elsewhere , , Leave a comment

Driving Navdy, a (Kinda) Review

Back in August 2014 I pre-ordered a Navdy. Last week, 2 years later than expected, my unit finally arrived. Was this long wait worth the while? YES!

Navdy?

The Navdy is an aftermarket “Head-Up Display” for your car. Where your Bluetooth-enabled car radio acts as an audio extension to your smartphone, the Navdy acts as a visual extension to it.

The product consists of the Navdy Display itself, and the Navdy Dial. They connect to each other via Bluetooth.

On one end you plug the Navdy Display into your car’s ODB-II port – a port that’s default in about every car – and on the other end you connect your smartphone to it (again via Bluetooth) using the Navdy App.

Using the Navdy Dial you can scroll through the menus, make selections, etc. Gestures are also supported for certain actions: wave left to engage, wave right to discard. Audio commands – used to getting things done that aren’t accessible via the Navdy menus, such as sending a text message – are processed via Siri/Google Assistant.

What’s to like?

One week in and I must say the device is a blessing for my old car – a car that’s over 10 years old with “electric windows” being it’s only thing of comfort/luxury. Thanks to the Navdy I now have a rich console in my car, a default feature to be found in modern cars.

Sidenote: A friend of mine joked that my car is now worth double the price it was before. He might be right, actually.

The Navdy is a robust device I must say, it’s production quality is really good. Manipulating it via the Navdy Dial is easy and the menus are intuitive. The Navdy Display works fine in both dark and very bright weather/lighting conditions, and the Bluetooth connection between the Dial and smartphone Just Works™.

Installation is also very easy as you just have to plug it into your car’s ODB-II port. If you can plug your phone into its charger, you can also install the Navdy – It’s that easy.

What’s to dislike?

What the videos don’t show you is that the glass panel of the Navdy Display itself tends to vibrate whenever you hit a bump or glitch in the road … which is always, basically. It’s not troublesome, but it’s definitely worth mentioning.

Unfortunately the fuel level gauge isn’t working for me. I guess my car’s software doesn’t allow reading it via the ODB-II port. The RPM gauge however works just fine 🙂

Anything missing?

One thing that I would like to see with the Navdy is FaceTime support. I think it’d be possible because that sure looks like a camera on the right hand side of the Navdy Display, not?

Some minor tweaks would also be handy. Dismissing an incoming text message for example dismisses it on the Navdy, yet it still shows up on the lock screen of my iPhone. Ideally the one action should be duplicated onto the other device.

Should you buy it?

If your car sports a GPS unit and HUD/console then I’d say no, as the Navdy offers no extra value in that case. If you car does not have those features, and you plan on driving it a few more years, then I can recommend it.

The Best Head-Up Display For Your Car | Navdy →

Elsewhere , , Leave a comment