Freek.dev

Learn how to build cross-platform, native mobile apps using familiar Vue.js syntax and Tailwind CSS.

Read more [tighten.co]

Jess Archer recently gave an excellent talk at Laracon AU. In a new blogpost she explains one one tips given during her talk: how to close modals in a Vue app by using the back button.

On most web apps, pressing the back button while a modal dialog is open will navigate to the previous page, rather than closing the modal. This can be very frustrating! It might not seem like a huge deal on a desktop app, but on a mobile, where a modal like this will often be full-screen, and with phones having back buttons and back gestures, I believe it's a huge user experience improvement.

Read more [jessarcher.com]

Last week Apple introduced their new fancy iPhone X. It's screen has a top notch that might cause some problems in landscape mode. Stephen Radford explains how to properly handle it.

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape.

To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right.

http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

We've already implemented the fix in our Laravel application template.

Read more

Wes Bos shares a quick tip to make phone numbers on websites tappable.

I’m talking about when phone numbers on a website aren’t tapable. Often the HTML is so that mobile operating systems cannot select the phone number alone and you are forced to remember/recite or write down the actual number.

So, when you put a phone number on a website, don’t just use any old element, use a link with the tel protocol.

http://wesbos.com/lets-talk-about-phone-numbers-on-mobile-sites/

Read more

As a user I've pretty much turned my back to Facebook, but boy must it be interesting to work at that scale. Here's how Facebook built their mobile device lab.

... We needed to be able to run tests on more than 2,000 mobile devices to account for all the combinations of device hardware, operating systems, and network connections that people use to connect on Facebook. Today, in our Prineville data center, we have a mobile device lab — outfitted with a custom-built rack — that allows us to run tests on thousands of phones. The process of building a lab in our data center wasn't a direct path, and we learned a lot along the way...

https://code.facebook.com/posts/300815046928882/the-mobile-device-lab-at-the-prineville-data-center/

I stumbled on this story via Bram.us. Subscribe to the RSS feed of that site if you haven't done so already.

Read more

Every year the city of Antwerp (my hometown :-)) organises lots of activities, such as an Ice rink, a Christmas market, a Santa Run and of course fireworks in the month of december. To inform people of which activities are happening where and when my team and I created a mobile app commissioned by the city council. The app is called "Winter in A" and is available on both Android's Play Store and iOS' App Store.

The administrators of the app can enter content in a custom installation of Blender, our Laravel based application. Blender will write of a bunch of json-files that are read by the mobile apps. Here's the file for all the events (english localization): https://api.winterapp.be/en/events.json. We use our homegrown laravel-fractal package to easily transform database records to json. Here's the export handler that's in charge of the exporting of events:

namespace App\Services\Export\ExportHandlers;

use App\Repositories\EventRepository;
use App\Services\Export\ExportHandler;
use App\Services\Export\Transformers\EventTransformer;

class Events implements ExportHandler
{
    /**
     * @var \App\Repositories\EventRepository
     */
    protected $eventRepository;

    public function __construct(EventRepository $eventRepository)
    {
        $this->eventRepository = $eventRepository;
    }

    /**
     * Get the json for the given locale.
     *
     * @param string $locale
     *
     * @return mixed
     */
    public function getJsonForLocale($locale)
    {
        return fractal()
            ->collection($this->eventRepository->getAllOnline())
            ->transformWith(new EventTransformer($locale))
            ->toJson();
    }
}

The EventTransformer itself:

namespace App\Services\Export\Transformers;

use App\Models\Event;
use App\Services\Export\Format;
use App\Services\ValueObjects\Period;
use League\Fractal\TransformerAbstract;
use Spatie\MediaLibrary\Media;

class EventTransformer extends TransformerAbstract
{
    /**
     * @var
     */
    protected $locale;

    public function __construct($locale)
    {
        $this->locale = $locale;
    }

    public function transform(Event $event)
    {
        return [
            'id' => $event->id,
            'name' => $event->translate($this->locale)->name,
            'text' => htmlToMarkdown($event->translate($this->locale)->text),
            ...
            'images' => $event->getMedia('images')->map(function (Media $media) {
                return [
                   'thumb' => $media->getUrl('thumb'),
                   'full' => $media->getUrl('full')
                ];
            }),
        ];
    }
}

To handle peaks in usage of the app we use CloudFlare. In this article they explain what they do. Cloudflare has this awesome feature called "Always online", to make sure the API is online even if our server is not.

The first events of Winter in Antwerp are starting tomorrow. The last ones are scheduled in the first days of 2016. I'll share some more tidbits of the code then.

Read more