β˜… Fixing the valet share 301 Redirect Loop

One of the nice things of Laravel Valet is that it includes an easy way to make your local site available publicly. For this it has the aforementioned Ngrok built-in. To use it, just run the valet share command, and your local site will be shared through a *.ngrok.io subdomain.

However, when combining valet share with valet secure (which serves your local site over HTTPS) it won’t work: you’ll end up in a 301 Redirect Loop when visiting your site through the *.ngrok.io domain.

To fix this issue there are two options:

  1. The old way: Manually edit your sites Nginx config file and remove the block that listens on port 80.

    As valet issue#382 details, you can fix this error by manually editing the Nginx configuration for your site.

    Say your site is mysite.test, then its Nginx config file can be found at ~/.config/valet/Nginx/mysite.test.

    πŸ’β€β™‚οΈ Can’t find the file at said location?

    Note that Valet versions < 2.1.0 use the ~/.valet folder instead of the ~/.config/valet/ folder

    Inside the ~/.config/valet/Nginx/mysite.test file, look for a block that looks like this:

    server {
        listen 80;
        server_name mysite.test;
        return 301 https://$host$request_uri;
    }

    Now remove that block entirely (or comment it out using the # sign), save it, and restart valet using valet restart.

    When now using valet share it will work fine πŸ™‚

  2. The new way: Upgrade Valet to version 2.1.3 or newer

    It came to my attention through valet issue#148 that valet 2.1.3 got released just three days ago and that it contains an out-of-the-box fix for this bug … yay! πŸŽ‰

    To upgrade your Valet install run this:

    # update package
    composer global update
    
    # Make Valet do its housekeeping
    valet install

    When now using valet share it will work fine πŸ™‚

    Note that when coming from Valet < 2.1.0 the ~/.valet folder will have moved to ~/.config/valet/

There ya go πŸ™‚

Did this help you out? Like what you see? Consider donating.

β˜•οΈ Buy me a Coffee ($3)

It certainly is no obligation but it would put a smile on my face. Thanks! πŸ™‚

Elsewhere , , , Leave a comment

β˜… Missing ~/.valet folder?

Earlier today I updated my Valet installation from version 2.0.x to 2.1.1. To my surprise the ~/.valet/ folder had gone missing, immediately making me think the update process somehow had gone wrong (even though Valet kept on serving sites).

Turns out that the ~/.valet/ folder got moved to ~/.config/valet/ with the release of Valet 2.1.0.

So yes, the valet logs are now located in ~/.config/valet/Log/ instead of ~/.valet/Log.

/me mumbles something about semver and breaking changes and stuff …

Did this help you out? Like what you see? Consider donating.

β˜•οΈ Buy me a Coffee ($3)

It certainly is no obligation but it would put a smile on my face. Thanks! πŸ™‚

Original Content , 2 Comments

The Cost Of JavaScript In 2018

Addy Osmani:

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens?

Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.

Today we’ll cover some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience.

Be sure to note the PRPL pattern, and the usage of a β€œPerformance Budget”.

A video of the talk upon which this post was inspired, is also available (do note that some parts in the video are not as extensive as the write-up):

The Cost Of JavaScript In 2018 →

Elsewhere , , Leave a comment

What Made Darth Vader Visually Iconic

Always great stuff, by The Nerdwriter:

About two years ago I started watching Star Wars with my children. Whilst watching the first movie (Episode IV) I kind of found Darth’s role quite disturbing. He was just floating there in the background, and all stuff that we associate with him wasn’t that well expressed. It’s only during Episode V that his character is presented as how I remember it.

Elsewhere , , , Leave a comment

carbon-cli – Carbon, from the CLI

carbon-cli is a CLI tool which interacts with the aforementioned Carbon, allowing you to create beautiful images of your source code.

Installation per NPM/Yarn, or run it directly using npx

npm i -g carbon-cli

Usage is quite simple:

carbon -f file.js

carbon-cli – Carbon, from the CLI →

Elsewhere , , 1 Comment

Swoole – PHP asynchronous programming framework

Swoole is an high-performance network framework using an event-driven, asynchronous, non-blocking I/O model which makes it scalable and efficient. It is written in C language without 3rd party libraries as PHP extension.

It enables PHP developers to write high-performance, scalable, concurrent TCP, UDP, Unix Socket, HTTP, WebSocket services in PHP programming language without too much knowledge about non-blocking I/O programming and low-level Linux kernel.

Compared with other async programming frameworks or softwares such as Nginx, Tornado, Node.js, Swoole has the built-in async, multiple threads I/O modules. Developers can use sync or async API to write the applications.

Will be checking this one out, as an alternative to ReactPHP, since this one comes as a PECL extension. Speed should be heavily better. A quick search around tells me it performs quite well indeed.

Swoole – PHP asynchronous programming framework →

Elsewhere , , Leave a comment

CSS shape-outside Experiments

I like these pens by Kristopher Van Sant using shape-outside to wrap text in a shape. Take this heart for example:

CSS Shapes Experiments →

πŸ€“ Back in 2006 (!) I created a small site/tool named β€œThe Box Office” to fake that. It took the line-height and floated a truckload of boxes to one side to fake the effect. It’s been long discontinued by now.

Elsewhere , , Leave a comment

Vision-free MIT Cheetah

Cheetah can now run blind amongst a few other new tricks:

Also notice how small this thing has become when compared to three years ago 😱

Elsewhere , Leave a comment

Components and Concerns

Jeremy Keith, on Separation of Concerns and how that comes into play where one’s dealing with Component based design:

My point is this:

  • Separating structure, presentation, and behaviour is a good idea.
  • Separating an interface into components is a good idea.

Those two good ideas are not in conflict. They work best when they’re done in combination.

Yes, yes, yes, … YES! A THOUSAND TIMES YES!

Components and Concerns →

πŸ’β€β™‚οΈ You might also have seen this related image float around on the Twitters:

Elsewhere , , Leave a comment

Fixing common performance problems in React Navigation

If you’re using React Navigation in your app(s) you might have noticed these two issues the folks over at November Five have written about:

On a few screens – specifically those with lots of components – we started noticing a few things…

Right off the bat, there is a substantial delay between the user pressing a button and the swipe-in animation of a new screen. When a new screen is pushed, React Navigation will initially render it off-screen and animate it into place afterwards. This means that when a complex screen with lots of components that easily takes a few hundred milliseconds to render is pushed, it feels less snappy than a natively written application. It also causes some nasty side effects: for instance, if you tap a button quickly, you can trigger the same route from being pushed multiple times.

Another problem is that business logic can be executed while the swipe-in animation is doing its thing. This can make for a janky animation.

Of course the post also contains fixes for these problems πŸ˜‰

Fixing common performance problems in React Navigation →

Elsewhere , , Leave a comment