Sample Single Page Application (SPA) using Laravel 5 & Vue2 + Vuex + Vue-Router

Not to long ago I implemented a sample Single Page Application using Laravel 5 and Vue2 + Vuex + Vue-Router.

Today I decided to make it public and share my experience with others.

The project is basically a simple Running Tracker, where you can add your running entries and see your performance during some period of time.

Main features

  • Fully separate Backend and Frontend
  • Authentication based on Laravel Passport
  • List pages with filters and CRUD editing
  • Admin panel
  • Simple widgets
  • Simple reports
  • Full Phpunit test coverage
  • Sample E2E tests using Nightwatch and Cypress

Includes

Other Features

  • Front page
  • Authentication (registration, login, logout, throttle)
  • Users roles: administrator (all access), manager (manage records)
  • User dashborad with widgets and charts
  • Entries list with filter by date (list, show, edit, delete, create)
  • Report page with chart
  • User profile page
  • Admin dashboard with widgets
  • Users admin (list, show, edit, delete, create)
  • Entries admin (list, show, edit, delete, create)
  • Global loader for all requests with small delay

GitHub Link

Demo

Use login: [email protected] and password: 123456

This project is fully free to use for any purpose and licenced under MIT License.

Why JavaScript “++[[]][+[]]+[+[]]” expression returns string “10”

Recently I came over quite interesting expressions ++[[]][+[]]+[+[]] and if you open browser JavaScript console and paste it there it will return string “10”, but how it really works?

This is something that took my mind yesterday and I decided to make it clear for me:

  1. Firstly, +[] in JavaScript is the same as +"" which casts a value to number 0, which is used twice, so if we replace it, we can now see following:
    ++[[]][0]+[0]
    

  2. Now we can split it to two three separate expressions:

    ++ // Increment operator
    [[]][0] // Which returns [], that casts to 0 and then incremented to 1 (++ always returns a number)
    +[0] // Which returns 0
    

  3. [[]][0] means we get the first element from array [[]] which has one element that’s empty array and then increment it by 1, let’s write it in JS:

    [[]][0] // [], or
    [[]].pop() // []
    

  4. Getting 1 from ++[[]][0], as we figured out [[]][0] basically means just empty array or, [], then we have [] + 1 which returns string “1”, and due to ++ always returns number, we have just number 1:

    ++[[]][0] // 1
    ++[[]][0] === +([] + 1) // true
    +([] + 1) === 1 // true
    

  5. And the last part + [0], when we add array to anything in JavaScript, it will concatenate it to string of values with commas:

    0 + [0, 1, 2, 3] // "00,1,2,3"
    [1,2] + [3,4] // "1,23,4"
    
    // Or in our case
    1 + [0] // "10" - Yay!
    

To sum it up, lets describe it in single place:

++ // Increment result of next expression, or make number 1
    [
        [] // Array with single empty array item
    ]
    [ // Use bracket expression to access 0 element of previous array, which is empty array "[]"
        +[] // Cast array to 0
    ]

+ // Unary + Operator, or 1 + [0]

[ // Array with one element of number 0
    +[] // Cast array to 0
]