You're interesting

Laravel and VueJS - Adding VueJS into your site

Sat, 22 Feb 2020 00:00:00 +0000

Laravel wasn’t created or designed with the concept of rich Javascript single page applications in mind. This means that, unlike the server side, the front-end is not opinionated at all.

The result is that we are left to decide on an approach that works for whichever project we are working on.

For this example, lets say my project is a well established, old-school, Laravel based Website. We’re going to add a VueJS SPA in as a new user dashboard.

Some key features we would like:

Must use Webpack with the Vue CLI - this keeps the SPA easier to maintain and 3rd party components can be easily integrated
Must use the existing Laravel auth and session to control access to the new SPA - not worrying about auth in a SPA is pretty much the definition of awesome

First step is to include a new VueJS SPA setup somewhere in your build cycle. Create a folder somewhere good for the new dashboard. Maybe under “resources” or even in the root of your project. This code can be its own Git repository and can be treated as a submodule.

Second step is to set up you build process. Whatever you are using to build your front-end resources - add a step to install & compile the SPA. Let it create the “dist” folder. Your build routine should then copy the contents of the “dist” folder to a folder with the path’s name inside the “public” folder. For example, if we will access the new dashboard on “/dashboard” then the folder you copy your “dist” files to will be “public/dashboard/”. The last build step is to copy the “dist/index.html” file to a new file inside your views folder. An option would be to copy it to “resources/views/dashboard/index.blade.php”. Notice the rename to “.blade.php”.

Third step is to set up a route and/or controller to serve this index blade for all requests that hit “/dashboard” and any path under this path. something like:

Route::get('/dashboard/{all?}' ...
...
)->where(['all' => '[0-9a-zA-Z\/]+']);

Use whichever regex pattern makes sense for you and be sure to add whichever auth and session middleware you want to enforce. Handling GET only should be fine, but be flexible to change that to “any” if you want.

Final step is to configure your VueJS SPA to serve from “/dashboard”. Build it and test your setup.

The end result is that when a user visits “/dashboard” or any path under “/dashboard/*” that is not an existing file, the SPA’s index.html file is loaded. This in turn loads the static files from the “/public/dashboard” folder and your SPA is integrated into your Laravel Website.

Next, you’re going to need to figure out a new API for your SPA. But, forcing your SPA to load through Laravel’s session & auth should make the API a little simpler to deal with. That is until you decide to grow your Website to a true SPA & API driven system.

Podcast Review - Free Agents 25: Breadcrumb of My Life, with Stephen Hackett

Wed, 12 Jul 2017 18:30:00 +0000

Free Agents is a relatively new podcast and is hosted by Jason Snell and David Sparks. Our hosts do freelance work now and each episode of Free Agents usually covers a topic that affects a freelancer’s career. Episode 25 is an interview though.

The guest is a man I know very little about - Stephen Hackett.

Stephen is the co-founder of Relay FM and shares the business load with his business partner. What made this podcast interesting to me was hearing the story of Stephen’s decisions and personal situations leading up to his leaving his job and going full-time on his own business.

What makes Stephen’s story even more enticing is that he is married with 3 kids when he decided to leave his job for Relay FM. His decision making process over this time is fascinating to hear.

Stephen also relates the story of how Relay FM’s business improved once his partner went full-time. Noting that productivity and efficiency improved now that one of them was able to spend all working hours on the business.

He also talked about the challenges of finding space to work and trying to restrict time spent working to maintain a good work/life balance.

I liked how he talked about the areas of responsibility in Relay FM and how he and his partner are in charge of their respective areas. And also how our goals define what we focus on and that these goals really should include personal goals such as spending time with the family.

Podcast Review - The Big Web Show 160: Color Accessibility Workflows with Geri Coady

Mon, 26 Jun 2017 21:30:00 +0000

Jeffrey Zeldman is an interesting figure in the world of Web design with a colourful history. Many of his early works had an impact on me when I was learning about the Web. He hosts The Big Web Show in which he interviews people that are doing interesting things on the Web.

Episodes of The Big Web Show don’t normally make it onto my list of favourite podcast episodes. The production quality is not as high as many of the other podcasts I listen to and Jeffrey sometimes goes off on tangents that can be a little off-putting.

And, in the case of this episode, there were audio level issues in the beginning and minor annoyances throughout. However, typically the interview and information being shared far outweigh any such annoyances. Episode 160 is definitely worth listening to.

Episode 160 introduces us to Geri Coady, an illustrator, designer, and author with a passion for colour accessibility. Jeffrey starts the interview by quickly sharing some minor details flowing into some soft questions about Geri’s blog.

The interview then goes to Geri’s early history about how she started as an illustrator and her early education and first career as a print designer. She then spoke about how she pivoted her career into Web design just as responsive design started gaining traction.

The interview then focused on Geri’s book about colour accessibility and this is where this podcast really became very interesting. Her stories about colour and accessibility are eye-opening.

The message is clear - design for accessibility from the beginning, not as an afterthought. Geri’s focus on colour within the realm of accessibility is thought provoking.

Podcast Review - ATP 226: Smooth Scrolling Is For Suckers

Tue, 20 Jun 2017 10:00:00 +0000

It is easy to enjoy Accidental Tech Podcast. From the first second to the last, the show follows a regular rhythm. #226 starts off by shattering the 4th wall when John jokes that there is too much follow-up. And then the show quickly moves into self-deprecating humour.

Of course it isn’t really self-deprecating since it was Marco dissing John’s archaic museum ready Mac Pro. I still feel it is self-deprecating as all hosts play along in good humour. They’re doing it because the story builds on previous ones and they know their audience will find it funny.

John, Marco, and Casey then went through follow-up.

Casey does a great job driving the show’s progression. His job on the show appears to be that of a panel host. He leads us through the show’s topics and prompts Marco and John to participate. He is the glue for the show.

They’re discussing iOS11…. I care, a little, but I may never see iOS11. I don’t own an iPhone or an iPad. I am thinking of buying a new iPad Pro when it becomes available in my expensive country.

They talked a lot about unimportant stuff that doesn’t affect me. I’m waiting for the discussion about the new iPads. I’m trying to get as many reviews as possible for the new iPad Pros so this was something I really wanted to listen to.

Finally

Marco and Casey both love the new refresh rate of the new iPads. Marco uses it as his kitchen computer. They say that the 120hz refresh rate affects the display in so many awesome ways and Marco reckons you will not want to go back to your old display.

John said “I guarantee you there are people who you will put this thing in front of who will have no idea that it’s 120hz, will not be able to distinguish between the two and will not care about it.” This is typical of John’s attitude and life view and brings a pleasant wallop of stark reality.

And that’s it. The show is over and the end credit song is playing.

We now enter the after-show that is thankfully part of the same show and not a different show that I would never bother to download. Now it is Casey’s turn to tell us some stories. HORROR stories from WWDC….

Casey “stole” his network adapter from WWDC. Which made me wonder why he doesn’t mark his belongings. Which made me realise I need to mark my belongings.

Then he related a tip on how you can use a zip tie to lock a network cable into a network point. To which I thought any sharp object would defeat that. But, then I realised that nobody there has anything sharp because they had to fly there….

They also marvelled at how pleasant San Jose is for WWDC and how often they would see each other. Marco lived at some local coffee shop. He did WWDC the way I would love to do any conference - in his own time and on his own terms.

Now they discussed WWDC food where Casey discovered that fruit juice is basically sugar and John’s description of the food is wonderful. To be clear, the food sounds horrendous – from Johns hate of wraps to Casey thinking he may have eaten someone’s finger tip.

Casey’s story about being unable to open cream cheese containers is funny beyond reason. “I tried with my teeth and couldn’t get it”, omg, the best. Thank you for sharing this Casey.

Coding using Tablets and Phones

Sat, 22 Apr 2017 10:00:00 +0000

Coding using Tablets and Phones

Why? As in, why would you want to write code on a phone or a tablet? Well, let’s not answer that question. Let’s just assume that you want to.

And, just to be clear, I am not talking about developing apps for mobile devices. This is a guide about using mobile devices to develop software. And to be even clearer, let me lay out some definitions for the sake of this guide:

What can’t you do and what does this guide not cover:

You want to use your favourite IDE and will not compromise. Then buy a good laptop - it will be cheaper than what I will be suggesting anyway.
Developing simple Web pages, then you can probably get work done with an iPad only.

What you might be able to do if you follow this guide:

Set up a set of typical Linux services and tools to

Agenda

An editor or IDE
Source control
Services
Conclusion

An Editor or IDE

Android based code editors suck. There are really no decent code editors yet (early 2017). This is probably because nobody has created a suitable open source highlighting text editor that doesn’t suck.

The situation is a little better on iOS.

Which means, that you can choose to use an Android phone or tablet to edit code, but your experience and productivity will suffer.

Winner = iOS. Real winner iPad.

Source control

There are okay Git UIs for iOS devices. But the way you need to jump through hoops to get a decent workflow going on iOS makes the whole process a little painful.

There are some interesting ways of extending Android so that you can run a full Git client (and probably any Linux based source control you may want to use). Add to this the ability to link the iOS IDE directly to this source repo on Android and you have a recipe for success.

Winner = Android (for reasons that will become obvious later)

Services

We’re talking Apache, MySQL, Redis, PHP, GoLang, Python, Perl, sshd, etc. Feel like trying to install these on iOS? Didn’t think so. Let’s use Termux on Android.

Winner Android

Conclusion

Dump the iPhone and grab a decent Android phone. Install Termux and install sshd and whatever else you need. What is nice about this is you can then script it to start all the services when Termux starts and everything dies when Termux ends. simple and easy.

Then grab a decent iPad and buy a decent IDE like Panic’s Coda.

Then network them together:

Both on the same wifi - get the IP of the Android phone and link Coda via ssh

Android hotspot - link the iPad

iPad tethering - link the Android phone

Conclusion 2

Good grief, why?! Yes, this will work, but really, if you can afford an iPad then you can afford a cheap laptop. This whole thing is crazy talk. A fun mental exercise, but with no real value except for those of us with something to prove.

Self-Repairing Openelec Networking

Sun, 22 May 2016 10:00:00 +0000

Running Openelec on a Raspberry Pi is a great use of the small & cheap computer. This was my media center and file server on a first gen Raspberry Pi and now I run this media center optimised Linux distribution on a Raspberry Pi 2.

However, something goes funky with the wired networking. I haven’t worked out why, but for some reason the networking stack will die after some random amount of time. Easily fixed by removing and reseating the network cable in the router.

The situation had become untenable though, so I set out to make sure the Pi’s networking fixed itself.

This is the Bash script I used. It is a mashup of a few scripts that do a similar job that I found on the Web (thank you other people with blogs). It runs via a cron job every 5 minutes.

#!/bin/bash

# cron script for checking lan connectivity

# Ping count is set aggressively to 1, increase depending what you want.
PING_COUNT=1
PING="/bin/ping"


# Find the gateway IP address
GATEWAY_IP=`ip route | grep default | cut -d " " -f 3`
# ping test
$PING -n -c "$PING_COUNT" "$GATEWAY_IP" &>/dev/null

if [ "$?" -ge 1 ]
then
    # Try restart the eth0 interface
    ethtool --negotiate eth0
fi

What I like about this script is that it doesn’t leave the local network to perform its job. It discovers the gateway’s IP and pings it. Any problems doing that and it calls the Openelec way of restarting the network interface. If you’re using wifi or a usb ethernet adapter, then use the respective device in place of the eth0 device.

Going Go Day 6

Mon, 17 Aug 2015 08:00:00 +0000

It’s Monday and I officially resigned from my job as a Senior Web Engineer. I consider that title a bit of a novelty even though I did do a lot of senior engineering type things on the Web.

My last day at the current job will be 25 September 2015. The new job will see me as a Senior Developer in a far more structured role. I’ll still be woking remotely.

Day 6

More Go types!

Going Go Day 5

Sun, 16 Aug 2015 18:00:00 +0000

Today is the day after my birthday. It is also the day we have invited the other half of the family and friends to come visit and celebrate.

Day 5

Regardless, I have started reading up on Go’s different types. Understanding the data types and how to interact with them is arguably the first step to becoming familiar with any programming language.

Go is strictly typed, but can guess the type a variable will be storing based on the initialised value. The key point to remember is to always convert different types to match. And try not to lose data while converting.

Link: Developers Who Can Build Things from Scratch

Sun, 16 Aug 2015 17:50:00 +0000

A post about that rare software developer that is a startup’s best hope. Software product development is an interesting problem area and this post lists the qualities required of a software developer.

I’ve personally met a handful of developers that would do very well building products from scratch. I’ve met many more that work at startups and struggle with most of this post’s defined requirements for “from scratch” software developers. With communications skills being the most lacking.

Going Go Day 4

Sat, 15 Aug 2015 08:00:00 +0000

The family woke me up late this morning with birthday gifts. And, as mentioned in yesterday’s post, no progress occurred in my Going Go project.

I did play foosball on my mini desktop foosball game (one of my birthday gifts):

blah

I also ate too much chocolate. Day 5 may be better, but I suspect that the allure of cake, family, and chocolate may wipe out all hope of quality project time.