Not so long ago I created a simple running tracker – Running Time that was build on Laravel and Vue as a tutorial to build Single Page Applications. It turned out to be quite helpful learning app for many people. Now I decided to get to know React Native a bit more and in the process I created an app that uses that same Laravel API backend.

This mobile App is quite simple it has authentication flow with register and login pages. Main screen with three tabs, “Dashboard”, “Entries” and “Profile”.

Here is more detailed list of features:

• Simple and clean code
• Redux with redux-thunk
• Auth flow: login and registration
• Dashboard tab with panels and charts
• Entries list tab
• Add / edit entry
• Infinite scroll
• Pull to refresh
• Profile tab: update profile

The app is free to use and modify in any way and has MIT license.

Open sources GitHub. Install App from Play Market.

The post Running Time – React Native Sample Application appeared first on vedmant.com :: coding blog.

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

• Laravel Passport API Authentication
• API Docs Gerator Laravel API Documentation Generator
• Laravel DebugBar Debug bar for Laravel
• Vue.js The Progressive JavaScript Framework
• Vuex State management pattern + library for Vue.js
• Vue-Router Router library for Vue.js

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: user@gmail.com and password: 123456

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

The post Sample Single Page Application (SPA) using Laravel 5 & Vue2 + Vuex + Vue-Router appeared first on vedmant.com :: coding blog.

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
]

The post Why JavaScript “++[[]][+[]]+[+[]]” expression returns string “10” appeared first on vedmant.com :: coding blog.