The project was configured to:

• run on MAMP
• the MAMP host was configured to use SSL
• Laravel 9
• Vite
• InertiaJS

The Problem

When running the default project with yarn run dev and accessing the project in the browser via the hostname configured in MAMP, the hot reload feature was not working and the network and console tabs in Developer Tools were polluted with lots of 404 errors about the failure to connect to the Vite Ping URL e.g. __vite_ping to which it keeps trying to reconnect to.

How to fix

You have to configure Vite to run on https. This can be done in a number of ways, but the easiest is to use the @vitejs/plugin-basic-ssl plugin. It’s really easy to get started:

1. Add the plugin to your project
   • with yarn: yarn add --dev @vitejs/plugin-basic-ssl
   • with npm: npm i @vitejs/plugin-basic-ssl
2. Open the vite.config.js file in your Laravel project
3. Import the plugin at the top of the file:
   • import basicSsl from '@vitejs/plugin-basic-ssl'
4. Enable the plugin using the defineConfig block e.g.

export default {
  plugins: [
    basicSsl()
  ]
}

Note: you might already have other plugins or config options in the defineConfig block, but you just need to make sure you add the called to basicSsl() in the plugins section.

After this when you run your project using yarn run dev it will provide you with a Local URL e.g.

11:15:06 [vite] vite.config.js changed, restarting server...
11:15:06 [vite] server restarted.

  > Local: https://localhost:3000/
  > Network: use `--host` to expose

Open that Local URL in your browser and you’ll receive an SSL warning. Accept the risks to accept the SSL certificate generated by the plugin.

Once that’s done when you visit your application dev URL, you’ll see all the Vite 404 errors have disappeared and you’re left with one neat little log that tells you Vite is now connected.

[vite] connecting... client.ts:16:8
[vite] connected. client.ts:53:14

Hope this helps!

The post HOW TO: Using Laravel with Vite on MAMP appeared first on Cube Websites.

View Demo

As went about creating a page which does this, I ended up creating my jQuery Scroll Tracker.  It’s a very simple script, which allows you to track the position, and take certain actions when a certain part of the page is reached.

If you’ve been on the demo page, you’ll have seen that as you start scrolling the instructions disappear.  Here’s the code and explanation of how that effect is achieved:

//when the document is loaded
    $(document).ready(function(){
        scrollTracker.initialize();
        /* the 'instructions' parameter is just a label we're giving to the tracker so we can delete it later
        /  it's just a label and can be called whatever you want
        /  the second parameter is a callback function, which the scrollTracker will fire when the page is scrolled
        /  the function can accept two parameters:
        /   - scrollpercent - the percentage of the page which has been scrolled
        /   - scollpos - the number of pixels of the page which has been scrolled
        */
        scrollTracker.addObject('instructions',function(scrollpercent,scrollpos){
            //if 10% of the page is scrolled
            if(scrollpercent > 10) {
                //fade the instructions out
                $('#instructions').fadeOut();
                //remove the tracker so that it only gets called once
                scrollTracker.deleteObject('instructions');
            }
        });
    });

As you can see, most of the code is comments.  The scrollTracker listens for when the page is scrolled, and when it is it will call the function you provide it with.

There’s a lot more you can do with it, and you can find full up-to-date documentation on the GitHub project page

If you decide to use it, please let me know so I can link to it as an example.
If you have suggestions or requests then please post in the comments and I’ll see what I can do!

Demo
GitHub Project

Have fun!

The post FREEBIE: jQuery Scroll Tracker appeared first on Cube Websites.

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

• data-x = the x co-ordinate of the slide
• data-y = the y co-ordinate of the slide
• data-z = the z co-ordinate of the slide (how far/close it appears to the user)
• data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
• data-rotate = rotates your slide by the specified number of degrees
• data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
• data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
• data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

The post How To Use Impress.Js appeared first on Cube Websites.

If you’re an active user of GitHub and work on any open-source projects then may want to show off your projects and activity on your own website.  This is where Gitview comes in.

Gitview allows you to display all your GitHub repos, and gives the option to display a detailed version including a graph of your project activity, or a simple compact version if you prefer.  Not only that, but all the information displayed is live.

The full feature list is:

• Asynchronous loading of all date
• All data is 100% live
• The Activity Graph uses the Canvas element
• You can toggle the regular or small version
• No need for additional styles
• Works with all JS frameworks (jQuery, Prototype, Mootools, etc)
• WTFPL license

Using it is very simple:

1.  Include the script on your page

<script src="http://logicalcognition.com/Projects/Gitview/Gitview.js"></script>

2.  Create a GitView anywhere on your page from a script tag or a JavaScript file:

var view = new Gitview({
  user    : 'cubewebsites',      // any github username
  domNode : document.body,  // domNode to attach to
  compact : false           // if set to true, will display smaller version of widget (no participation graph)
});

Enjoy!

The post Gitview – JS Widget To List GitHub Repositories appeared first on Cube Websites.

Now, there’s a free and open-source JavaScript library called Impress.js (the author says no rhyme intended!) which will blow your mind.  It’s a JavaScript adaptation of Prezi (which uses Flash), which uses CSS3 transforms and transitions to create really cool effects similar to those on Prezi, and on top of that it’s also uses CSS3 3D animations which takes things one-step further and lets you have 3D effects in your presentation too.

The downside is that at the moment it’s only guaranteed to work on the latest versions of Chrome and Safari.  Non-webkit browsers do have a fall-back mode, which is a simple display of the slides but without any of the animation.  It does work with the alpha versions of Firefox 10 and IE10 builds, so once those are out the browser support will be much better.

Whilst the browser requirements may be a deterrent for most folks, it’s amazing to see what can be achieved using CSS3 and maybe highlights the shape of things to come.

It’s certainly worth bookmarking and having a play with.

Click here for a live demo (use Chrome or Safari)
Source code on GitHub

The post Impress.js – A JavaScript Presentation Library appeared first on Cube Websites.

jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

• Accordion
• Tabs
• Buttons and Button Sets
• Horizontal slider
• Progress Bar
• Dialogs
• Icons
• Date Picker

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

• Concrete5
• CodeAcademy
• WHMCS

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

• jQuery UI Bootstrap
• jQuery UI Bootstrap on GitHub
• Bootstrap

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.

The post jQuery UI Bootstrap – A Bootstrap-themed kickstart for jQuery UI widgets appeared first on Cube Websites.

I decided to try it out by creating a command line interface (CLI) for YouTube.  What does this mean you ask yourself?  Well, using this plugin you can browse YouTube but instead of using the website, you do it via a series of commands.  There’s no real advantage to it, it’s more just about doing it to prove that it can be done.

You can play around with it on the live demo page here

Features include:

• YouTube search
• Search by username
• Top Rated videos
• Recently Featured videos
• Most Viewed videos
• Paginated results
• Caching for great performance

This application is free and open-source, so if you’re interested in making your own Command Line Application, then feel free to Fork it on GitHub.

The post FREEBIE: YouTube Console appeared first on Cube Websites.