Why I Would Be A Great Fit For TailwindUI

Shane Rosenthal — Mon, 25 May 2020 15:18:46 +0000

Over the last few years TailwindCSS has gained a lot of steam in the front-end world. And, more recently, with the release of TailwindUI you can even more rapidly start building out custom html admin panels and marketing pages and components by copying some code constructed by the creator of Tailwind, Adam Wathan himself.

That is like being handed blueprints to a shuttle for your job at NASA from Elon Musk, like getting access to Gordon Ramsey's secret recipes from his great grandmother or jumping off a cliff with none other than Aang, the Avatar himself!

Build. Applications. Properly. Now.

If you have been building your applications with TailwindUI since it's release earlier this year like I have, then you can see both it's power in taking your focus away from having to figure out how much padding your sidebar links should have, but also what it is lacking. Sadly, there are several "teaser" components that only leave us with a feeling of despair, like Screech getting turned down by Lisa, again.

But with every hope, comes a promise. Adam recently announced an opportunity not only to work directly with him and Steve Schoger, the Canadian Dr. Emmet Brown of design, but an opportunity to build out these teased components and several other facets that will bring TailwindUI to the masses and the future.

I. AM. THE. ONE.

Adam, do you need a pro that will churn out enterprise-level solutions to user-facing API's? Or a guru that will work with you to discovering an approach to supporting multiple color-palettes, while still being PurgeCSS-friendly? Let me be the Jesse Pinkman to your Walter White, the Michelangelo to your Splinter, the Neo to your Morpheus.

I have been working with Laravel since 2012, Vue.js since 2016, and TailwindUI since 2020! I am AWS Certified, kid tested and mother approved. I think though, the most important asset I bring to you is the ability think outside the box to come up with real-world solutions to everyday problems.

You ain't never had a friend like me.

Dynamic Imports On Laravel Vapor With Vue Router

Shane Rosenthal — Mon, 10 Feb 2020 16:07:55 +0000

Recently I have been playing around with Laravel Vapor which is fresh approach to the common Laravel "monolithic" server we have grown to trust, love and hate at times. And while Vapor delivers on it's promises to "Launch your Laravel infrastructure on Vapor and fall in love with the scalable simplicity of serverless." it does have some caveats that are handled differently than what you are used to.

A few months ago Jason Beggs wrote up a wonderful post about Using Dynamic Imports with Laravel Mix which in essence, splits up your Vue components js files into separate files, instead of storing and loading everything in the common app.js file. This approach will certainly speed up your load times and give your users a better experience. Let's see how it works:

Adding support for dynamic imports

First, we are going to add a babel.rc file into the root of our project and add support for dynamic imports like so:

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Alternatively, as Jason points out, we can add the config directly to our webpack.mix.js file:

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'],
});

For Vue Router I have a router.js file with all of my routes, instead of importing all of my components for each route we use a different function to load the right component on the right page (route). The 'webpackChunkName' tells webpack the name of the file that it should create for us.

{
    path: '/dashboard/videos',
    name: 'videos',
    component: () => import(/* webpackChunkName: "videos" */ './components/Videos/Videos'),
},
{
    path: '/dashboard/images',
    name: 'images',
    component: () => import(/* webpackChunkName: "images" */ './components/Images/Images'),
},

Locally, with npm run watch and checking out the JS console networking tab, we can see our different JS files being loaded on each relevant page.

Make sure, if you have import statements at the top of your route file to comment/delete them or web pack will load the component from app.js.

Now for the fun part, deploying to Vapor

Since Vapor does not store your public files inside of a public directory on your server, because there is no server we cannot access these files in our environment the same way we do locally. The Vapor Docs tell us that Vapor creates an environment variable that points to our asset directory which is inside of an AWS S3 bucket that Vapor creates for us. Additionally Vapor injects that variable into our front end code, allowing us to reference those files with

process.env.ASSET_URL

Now all we need to do is tell webpack where those dynamically imported files are coming from. In your webpack.mix.js file add:

if (mix.inProduction()) {
    const ASSET_URL = process.env.ASSET_URL + "/";

    mix.webpackConfig(webpack => {
        return {
            plugins: [
                new webpack.DefinePlugin({
                    "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
                })
            ],
            output: {
                publicPath: ASSET_URL
            }
        };
    });
}

And see our dynamic files importing as we would expect, directly from our Vapor S3 bucket!

A couple "gotchas".

We are now needing to npm run prod on our staging environment for our webpackConfig to be registered. In your vapor.yml file change the staging build section to

build:
   - 'composer install'
   - 'php artisan event:cache'
   - 'npm install && npm run prod && rm -rf node_modules'

In your layout file where you are pulling in the app.js/app.css files we need to make sure we are pulling from mix locally, and assets in our Vapor environments.

@if (app()->environment('local'))
   <script src="{{ mix('js/app.js') }}" defer></script>
   <link href="{{ mix('css/main.css') }}" rel="stylesheet">
@else
   <script src="{{ asset('js/app.js') }}" defer></script>
   <link href="{{ asset('css/main.css') }}" rel="stylesheet">
@endif

Now we can

vapor deploy staging --message="Adds dynamic import support"

And see our js files chunked into smaller bits, streamlining the users experience in Vapor!

Happy deploying!

Forem: Shane Rosenthal

Why I Would Be A Great Fit For TailwindUI

Dynamic Imports On Laravel Vapor With Vue Router

Adding support for dynamic imports

Now for the fun part, deploying to Vapor

A couple "gotchas".