Blog – Page 33 – Johan Ronsse

A CSS nerd question about render scaling and viewport meta tags

January 19, 2017 - Posted in Uncategorized - 18 comments

We can set a site to be responsive with the standard meta tag to do so:

<meta name="viewport" content="width=device-width">

This will adapt the content to the viewport width. We can also explicitly set a width – this is pretty uncommon, but it’s possible:

<meta name="viewport" content="width=1024">

This will render the content at 1024. If your device has a width of 768 pixels (e.g. in portrait mode) it will shows the content at a smaller scale.

The reverse is also true, if your device has a width of 1366 pixels (e.g. an iPad Pro) it will show the content at a bigger scale.

The question

What if you want the content to render at 1024 pixels, but if there are more pixels it should render the content at it’s native resolution? Basically it would behave like a liquid website with a minimum width.

The only solution I can think of is to only show the meta tag when you detected the width to be 1024 or less on the server side.

Who has any ideas?

Why?

The use case for this is to get the best user experience possible for a web app that has a minimum width of 1024 (because of the content of the pages e.g. tables, datagrids, calendars), but that is not specifically made responsive, on as many devices as possible.

People with good eyesight could theoretically use the app at on a tablet in portrait mode – typically supplying 600 to 800 pixels. But they should really turn their tablets around for their own comfort.

People could also theoretically use the app on a phone by doing a lot of pinching and zooming. Think about a situation where you just have to change a single setting and all you have is your phone.

The app should render at its “native scale” on viewports wider than 1024 pixels. This is the case for large tablets like the iPad. I am also pretty sure there are some larger Android tablets on the market.

I can already hear some people asking “why not just make it fully responsive?”. The answer is that phone usage for the app’s use case is uncommon enough to not make it worth it to build a fully responsive web app.

This is a “cheap” solution to realistically use a web app on as many devices as possible without breaking the bank.

(P.S. Looking at the issues in the spec my theory is that a non-hacky solution to this is basically unimplemented in browsers at this point)
VR bits (2): VR accessories

January 11, 2017 - Posted in vr

At CES 2017, HTC announced the HTC Vive tracker, which is kind of an accessory to create other VR accessories. The idea is that you attach it to real-life objects to then use these in VR. For example you could attach it to a (special) baseball bat, which would enable you to bat in VR. The demo also included a rifle, which would then make you feel like you are shooting a real gun, since you’re holding a rifle instead of just a pair of controllers.

As the Vive matures, there’s more and more accessories coming for it. There were controllers for your feet so you could kind of simulate “walking”. Even if you basically have to stay in the same room.

I even heard about some company making a jacket that emits heat, to kind of simulate firefighting. I’m not so sure about this but there’s definitely a lot of people trying a lot of different things.

I’m looking for a good opportunity to try out the Vive. I tried it on at Kikk, but only for a brief moment. It’s about €950 which is a bit steep to just go and buy it, even when I already have a gaming PC that could drive the graphics.
VR/AR bits

January 10, 2017 - Posted in vr
- TPCast is a wireless adapter for the HTC Vive that allows you to use the device untethered. According to Norman Chan of tested.com it works near flawlessly (Youtube video).
- Here’s a player in the VR Space I did not hear about yet: ODG. They raised a $58 million financing round recently. Their history seems to be in military and working for NASA. Check this YouTube video to see their impressive augmented reality glasses.
Why I bought a 2015 Macbook Pro

December 27, 2016 - Posted in computers - 1 comment

In my last post computer conundrum I posted about the difficult choice of which machine to get. Over the last few weeks I’ve been thinking about this problem, researching alternatives and considering every option.

I use my computer for interface design work. In my free time I do some video editing. I want a machine that can do both in a fast way.

I love macOS because it has the right software that I need to do my work. I’m talking about apps like Sketch, Transmit and Apple’s iWork suite. I’ve researched switching to Windows but from a software standpoint it’s just not an option. The overall software quality is just that much better on the Mac.

Mac Pro

Looking at Apple’s product lineup you would think the Mac Pro is the way to go for my situation. It’s marketed as a video editor’s machine of choice. But it’s been over a 1000 days since the trash can Mac Pro was released. It’s also not much faster than the iMac on a single thread. You’d have to get an external screen if you buy it making it an extremely expensive proposition. In terms of bang for the buck it’s probably the poorest choice you can make.

iMac 5k

The early 2015 iMac 5K is a pretty neat machine and possibly the best thing you could have bought nearly two years ago, but considering it today it’s clear that a laptop and external screen will net you a lot more bang for your buck.

It has to be said that this is the easiest way to get a reliable 5K screen if you have money to spare and don’t want to do a lot of research though. If you can get a good second hand deal and you work from one location it is an excellent computer.

The most powerful laptop you can get

But for me, even if I had a desktop Mac, it’d still need a laptop. A lot of my modern work life is mobile. If I can avoid the hassle of syncing 2 machines, even better. For my kind of usage the ultimate setup is the most powerful laptop I can get.

Apple announced the 2016 Macbook Pro lineup last month, and it’s not appealing to me at all. I want to buy a new computer, but it’s not going to be that 2016 model. I chose to buy a 2015 Macbook Pro instead.

So, why the 2015 model?

I did a ton of research on the new 2016 Macbook, listed all the pros and cons, and decided to not get it in favor of a 2015 Macbook Pro. I have a deal on a well-priced 2015 with the Radeon R9 graphics card now.

The flaws of the 2016 version are well documented by now but here’s a few: the touch bar is pretty much useless, battery life is poor, you have the dongle situation, the trackpad is too big, and it’s not much faster than the 2015 edition. Next to that you are paying a premium for a USB-C future that is not there yet.

Sounds enticing? Let’s dive into a few of the details.

Touch bar

The Touch Bar is Apple’s #1 feature on the new Macbooks. As an interaction designer I applaud trying to come up with new ways to control computers. However this idea is in opposition with the principle of direct manipulation – the main reason that iOS became such a success.

The touch bar sounds like a nice idea in theory, but the thing is that I never actually look at my keyboard. I’ve gotten so used to manipulating my laptop using my keyboard that I rarely have to look at my keyboard. Introducing looking at a keyboard – and then back at the screen to see the result of your input – introduces a weird way to work with your computer. Suddenly you have to repeatedly move your head from one location to another.

On top of that, the experience is inconsistent when you move to a “docked” situation. There you still have your normal keyboard with function keys. So if you get really really fast with the Touch Bar your skills don’t transfer over when you are using a big screen in a docked situation.

Touch ID/Apple Pay

Touch ID integration seems nice but typing your password is only a minor hassle. Apple Pay is nonexistent in Belgium so that “feature” doesn’t matter to me.

Battery life

Reports about inconsistent battery life on the 2016 Macbook Pro are abound. Apple even removed the remaining battery life indicator in a recent software update because they couldn’t get it to be accurate. I have a lot of battery problems with my current laptop and it’s exactly what I want to fix, so I am not buying a laptop that has lots of reports of poor battery life.

#donglelife

In some way I’m appreciative of Apple for pushing the envelope and going all-in on USB-C. This Medium post has some very cool ideas on what a future with only USB-C would look like. But the current situation is that I own zero USB-C devices.

When Apple eradicated FireWire I never even owned a FireWire device. When they removed CD drives from their laptops I hadn’t touched a CD for months. When they removed the Ethernet port I was on WiFi most of the time anyway.

This is different though: this is not removing something that I don’t use. This is adding the hassle of dongles for all kinds of ports that I do use every day. I have a ton of USB-A devices and it’s rare that I’m not importing photos or videos from an SD card. I don’t want to have to carry around dongles; and I don’t want to attach some kind of monster adapter to instantly destroy the aesthetics of your setup.

Not much faster

What is also important to note that the Macbooks have not really gotten much faster in the last few years.

Whether you have a 2012, 2014 or 2016 Macbook Pro doesn’t matter so much because they have about the same types of CPU and RAM. The differences are very minor.

For years the Apple community has been hoping that new Macbooks would have some major Intel processor upgrade but it’s just not happening. The 2016 Macbook Pro’s are using 2015’s Skylake architecture.

This is while Windows laptops with the new Kaby lake architecture are being released. How is is that Apple’s hardware supply lines are way behind other manufacturers?

The only theory I have is that they are moving away from Intel, somehow managed to run macOS on ARM, and will be releasing new hardware soon that uses their own chips exclusively.

On the graphics card side the new Macbook Pro is disappointing as well. When other manufacturers are releasing laptops that contain nVidia 1060 chipsets, it is barely possible to play the latest games on a brand nw €4000 Apple laptop. Really?

Conclusion

The 2016 Macbook Pro is not a good buy. I am going for the 2015 machine, because it is half the price and does not have all the disadvantages listed in this post.

I appreciate what Apple is trying to do to push the envelope, but I hope they realize have some more work to provide a complete package. Next to better choices on the laptop front, I am looking forward to revamped iMacs, a Mac Pro that is competitive and an external 4K screen that isn’t as limiting as the LG Ultrafine 4/5K – and that you can actually buy.

In the meantime I’ll do with a 2015 Macbook Pro.
Computer conundrum

November 6, 2016 - Posted in computers - 2 comments

I have a retina Macbook Pro from 2012, and it has served me well. However, it’s practically dying (especially the battery), and I need a new Macbook.

The recent Macbook announcement got me thinking: do I replace my Macbook and start carrying dongles around, or do I try to find an alternate solution?

Apple announced three new Macbooks, where the first one (without the touch bar) is basically like a pumped up Macbook Air, and the 2 other ones are lighter than my current laptop, not necessarily much faster, and miss all the ports I regularly use.

When I configure the Macbook the way I want it, it’s going to be around €4000; and it won’t actually be much faster than my current laptop. The only thing that would become better is graphics performance, but from what I can tell that just means the Macbook will finally be able to run games a bit better than it used to. The performance won’t come anywhere near what you can get from a Windows gaming laptop.

My current inclination is to either pick up a refurbished 2015 Macbook Pro from eBay; or to replace my laptop’s battery for the second time.

Now, another point. When working at home sometimes I want a bigger screen. I find that a big screen can be very helpful when coding. If you are used to working on a retina screen, going to a non-retina one (e.g. the Dell 27″ I am using at the moment) is pretty jarring.

However, just buying a 4K or 5K display and attaching it to an older Macbook is a no-go. Depending on the specific combination of screen and Macbook you either have the problem that the older Thunderbolt connections can’t handle the amount of pixels; and when they can, you are stuck at a max frame rate of 30 frames per seconds.

Furthermore you have to deal with the crappy interfaces that Dell/Acer/etc provide to set up your screen.

One solution is to get the 2015 iMac 3.3Ghz, which I could buy together with a refurbished Macbook for around the price of a new Macbook. The good thing here is that it actually contains a semi-decent graphics card, and that it’s basically a much faster Mac than the Macbook is. This might be helpful when editing large Sketch documents, which is basically my daily job.

However, this will put me in a situation with 2 computers again, which I’ve had in the past, and which I wasn’t happy about. Things might be better today though with macOS Sierra’s desktop sync.

An Apple-built external 5K Thunderbolt display has long been on my wishlist, but it just doesn’t exist. Apple’s recommendation is to buy an LG UltraFine 4K Display. This has a worse resolution than the iMac and I’m not very convinced by its design.

I’ve also contemplated hacking my gaming PC to be a Hackintosh. Basically my gaming PC blows everything out of the water spec-wise (it has a quad core 4Ghz processor and a Geforce GTX 1080). Successfully doing a multi-boot setup where I can use it as a Mac will give me a machine that is basically faster than a Mac Pro.

The counter-argument to this is that I don’t feel like spending my weekends trying to find the right drivers to get basic things to work. I don’t want to have some hacky setup where hardware and software are not matched together. There is a reason I use macOS and not Linux; the same reason I use iOS and not some custom Android ROM.

It’s quite bizarre that after 4 years the Macbook that Apple announced is not really appealing to me; the touch bar looks like an interesting innovation and I can’t wait to play with it, but I’m not ready to spend €4k and carry around 4 dongles with me. I like that I have an HDMI port, SD card slot and 2 USB-A ports available at all times. There’s actually not a single port on my current Macbook that I don’t use regularly.

I’m pretty sure a lot of people are doing similar research, so please, share your thoughts.
Untitled

October 7, 2016 - Posted in Uncategorized

I used to read and collect articles about new tech like a madman but these days I can’t be bothered to read most new things.

The most interesting reading is really not related to tech at all. I was just reading this article about an author whose book went out of print – and he only knew it a year later. It’s an interesting look into the publishing industry where as an author you are basically waiting for that royalty check to drop.

Another example of an article I liked: a few months ago I was really intrigued by this article about a mother who realised her daughter isn’t the clever kid that she expected her to be.
iPad Pro: conclusions

August 6, 2016 - Posted in Uncategorized

In June I got the iPad Pro, and I had this goal of writing about the iPad Pro every day. I wrote about 10 blog posts… and then I gave up.

The thing with the iPad Pro is that, if I’m really honest, is that it’s rather useless for my purposes. Which is why I’m selling it (see here if you are interested).

In a lot of ways it’s a great machine – just not for me. In a previous blog post I wrote about who it is for.

The promise of “Pro” is that it’s for professionals, helping you do to your job. For me, a guy who works in the intersection between code and graphics, trying to use it for my kind of productivity work is an exercise in pain.

Given the current way I work, I need a file system; I need versions of what I’m creating; I need exact assets where I know exactly the color profile, the size, SVG export settings and whatnot. I need code that is checked into a versioning system, that can work with modern Javascript task runner workflows. I need multiple windows to test the output of my code.

The iPad does parts of this, but these parts don’t work together well. Every app is an island and trying to transfer data from one app to another works terribly. Organising your data is tough, because the core idea is that you data is tied to a specific application.

If you create an asset it’s tied to a specific app. This makes it hard to combine things across apps. Whatever I am usually making involves a massive amount of text and image files that need to be organised in one location. How to fix this? O wait, a file system.

In April, MacStories posted a video with their iOS10 wishes. At 1:10 you can see the exact feature that would make it more realistic to do any sort of web design on the iPad:

I had high hopes that Apple would announce something like this at WWDC 2016, but they didn’t. We basically got very little.

iCloud Drive, probably the core mechanism for trying to get apps to work together, is in a very sorry state. If you try to work on an iPad I hope you like flat file hierarchies.

One of the goals of buying the iPad was to see how the iPad Pro could help as a productivity tool for me. The reality is that it’s not there yet, and I’m not sure if it will be without a change in direction.

The thing is that not even talented app development teams like Serif – who showed off this really cool Affinity Photo for iPad recently – can fix fundamental flaws that are really part of the OS. If you are eventually using this to edit your professional photos, you’ll need a file system to sort out the ones that are RAW files, the ones that are edits, the ones have JPG equivalents. And you’ll need a way to back up this data that doesn’t rely on a single cloud service. Anything else would be unprofessional.

Apple says the iPad Pro is the future of computing. At the moment, it’s not. I’m hopeful for the future, but for now, back to the Mac.
Who the iPad Pro is for

August 5, 2016 - Posted in computers

I am selling my iPad Pro*. It’s not for me. But I think the iPad Pro in its current state is a great machine for three specific types of persons.

One is a manager type that sends a lot of e-mails and travels a lot from place to place (I guess from meeting to meeting). The battery life and the fact that you always have a mobile internet connection makes it a much better suited device than a traditional laptop.

Based on my tests using the iPad on the train I also think it’s more comfortable than a laptop in a plane seat, but I haven’t been able to really verify that.

The second type of person that an iPad Pro would be great for is a writer. The large screen, the keyboard, the way iOS works – these three factors can make for some productive writing. Especially if you use apps that can help you focus on the writing itself like iA Writer.

The third type of person I think it would be great for is illustrators and artists. The Apple Pencil is the first device that really feels natural to draw with. I’ve seen some great speed-paint Youtube videos that really show off what a talented artist can do with it.

*If you’re interested take a look here.
Coding on the iPad Pro: how?

June 29, 2016 - Posted in Uncategorized - 2 comments

I am trying to find a solution to be able to use the iPad Pro for coding.

So far what I’ve got is Coda where I can use the iPad in split screen mode to create a small website. It could be useful for some basic HTML/CSS work, but that’s about it.

Ideally I’ll find an app where I can import a git repo, where I am able to run commands like npm install, commit to said git repo, and ultimately deploy the website via SSH.

The way iOS works doesn’t make this an easy task; almost all of this depends on having a real filesystem.
Using the iPad Pro as a second screen (2)

June 28, 2016 - Posted in Uncategorized

I tried to use the iPad Air as an external screen using Duet in a client meeting… it was a disaster.

First of all I couldn’t mirror my screen properly, so I was trying to control a second I couldn’t really see all that well.

Then whenever I tried to go into full screen mode into Sketch, the application would show the wrong part of the screen and I would be disoriented.

5 minutes in I excuse myself for the experiment, set the iPad aside and continued the meeting using my laptop. Whoops.

I also wanted to try using the iPad as a second screen on location. I had this theory that I could maybe use the iPad as a dual monitor setup. It might be helpful when doing frontend work, where the iPad shows what you are creating but you have your full Macbook screen for your code.

My iPad happened to only have 6% battery left. I tried to connect the iPad to the Macbook hoping that the charge on the Macbook would be enough to keep the iPad running – it wasn’t.

The iPad draws power from a 12V adapter. In practice you can’t use it over USB on a Macbook all day because it would eventually just die. So your only option is to connect both the Macbook and iPad to power separately, and then use an app that shares the screen over WiFi – like Air Display 3. This method is a bit slow.

I tried to use to get some work done but it just felt unnatural to have the iPad as a second screen. It’s a slightly different angle which is a bit bothersome. I ended up mostly ignoring the iPad while it sat idle alongside the Macbook. I noticed it again when I tried to use accessibility zoom in Mac OS with the iPad attached; for some reason my reason slowed down to a crawl. When I detached the iPad everything was fine again.

I was dealing with issues with Google Drive at the same time. You know that moment when you start hating computers? At that point I was kind of done with the iPad Pro for today. There should be room for experimentation, but if it starts to affect my work performance, that doesn’t really make me happy.

That’s it for the 2nd (!) blog post of today. I should count how many words I’ve already written about the iPad. Over and out!