Your Choice JavaScript News

Vue News, Vue.js tutorial, Vue.js inspector, Future of Vue.js Friday, December 15

Vue News TLDR / Table of Contents

  • Vue.js tutorial: Advanced Fine-Grained Control of Vue.js Components from @johnlindquist on @eggheadio
    • Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives. As your application grows in complexity, you’ll need finer control of your components. In this course, we’ll define where content of a component should land when you define…
    • async Vue components, Vue Component patterns, built-in template bindings, Vue slots, Advanced Vue.js Components
  • GitHub – calirojas506/vue-inspector: Vue.js Inspector for Mobile Devices
    • vue-inspector – Vue.js Inspector for Mobile Devices
    • mobile devices, net neutrality, Vue.js devtools, root instance, basic inspector
  • Creating a Simple OCR Application with Electron, Vue.js & Tesseract.js
    • Nowadays JavasScript is one of the most popular programming languages, and used for a lot of fields and platforms through Web. In this tutorial we’re going to learn how to build an OCR desktop application with javascript using Electron and Tesseract.js … and guess what… our FE will be implemented…
    • div class, v-btn icon, desktop application, dynamic form engine, Vue.js Web application
  • GitHub – nikolay-govorov/logux-vuex: Vuex compatible API for Logux
    • logux-vuex – Vuex compatible API for Logux
    • browser tab, client-server communication protocol, current browser tab, UX best practices, Vuex compatible API
  • Pasar datos de Laravel a Vue.js usando Vue props.
    • Hay muchas formas de pasar datos de Laravel a Vue.js, en esta ocasión mostraremos una de esas formas y usaremos Vue props.
    • Vue props, dynamic props, componente vue.js, purchasescontroller extends controller, etc… pues vue.js
  • Plotting the average color of a video using D3 and Vue
    • In this tutorial, I’ll walk you through plotting the average color of a video by frame using D3 and Vue. I’ll also show you how to use a web-worker to do the color calculation. Here’s an overview of…
    • web worker, average color, average RGB value, chart component, canvas elements context
  • How Is React Different from Vue?
    • Recently I published an article about the usage of top front end JavaScript frameworks. The two things that stood out were the dominance of React and the explosive growth of Vue. If current trends continue, it seems likely that by this time next year, Vue will have overtaken Angular as…
    • React, Vue, Vue docs, excellent React Native, React team
  • Chess – Made with Vue.js
    • A Chess Game built with Vue.js
    • Vue Tetris Tetris, habit tracker app, Role Playing Game, type Game, Sketch
  • 2048 Game – Made with Vue.js
    • A 2048 type Game built with Vue.js
    • habit tracker app, Vue Tetris Tetris, GUI Electron app, Role Playing Game, smartphone
  • Future of Vue.js // Speaker Deck
    • slide content, kazupon, GitHub, Sep, Apr
  • Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives.
  • As your application grows in complexity, you’ll need finer control of your components.
  • In this course, we’ll define where content of a component should land when you define the content inside of a parent component with Vue slots and manage that relationship with slot-scope.
  • We’ll continue with dynamic and async Vue components as well as use JSX inside Vue for complete JavaScript control of your components.
  • This course provides an overview of Advanced Vue.js Components with quick demonstrations on how to leverage Vue Component patterns.

Tags: async Vue components, Vue Component patterns, built-in template bindings, Vue slots, Advanced Vue.js Components

  • vue-inspector is a basic inspector for Vue.js, focused only in mobile devices.
  • With vue-inspector is possible to execute JavaScript code directly in your mobile browser and get error messages generated at run-time.
  • Add it to your page using a script tag, add the CSS file and, finally, place the component inside your code.
  • This script is intended only for browsers, running on Mobile Devices, that lacks of JavaScript console.
  • If you have information about the compatibility with iOS, or/and other mobile browsers, please let me know.

Tags: mobile devices, net neutrality, Vue.js devtools, root instance, basic inspector

  • Electron combine the power of Node.js and a dedicated Chromium Web browser instance in order to run Web/JavaScript applications like desktop application, that’s the reason why we are going to use it as container for our Vue.js Web application, so let’s started configuring our electron project!
  • With the parameter the package.json will be created with default values: – – And add the electron dev dependency to the project – – Then in our package.json file, add the following lines: – – This allow us running our electron application with just command – – Finally in order…
  • To do that and configure our we are going to use the scaffolding: – – That will create a new project into the folder, the next step would be merge our and projects, We need to do the following four steps: – – Now you can delete the folder and…
  • Additionally we are going to use as our application look n’ feel: – – Then in our file: – – And finally using the components this will be our component layout: – – In that fragment we are including the mentioned three panels with some flags in order to switch…
  • Other awesome Node.js library is Tesseract.js, which provides a complete but simple text detection framework with a few code lines we are going to create our OCR feature: – – Let’s include that on our component script: On methods section we are going to create a function : – -…

Tags: div class, v-btn icon, desktop application, dynamic form engine, Vue.js Web application

  • Create Vuex store by .
  • It returns original Vuex store function with Logux inside – – See also basic usage example and Logux Status for UX best practices.
  • Instead of Vuex, in Logux Vuex you have 4 ways to commit action: – – In all 3 new commit methods you must to specify with array of “reasons”.
  • It is code names of reasons, why this action should be still in the log.
  • When you don’t need some actions, you can remove reasons from them: – – Action with empty reasons will be removed from log.

Tags: browser tab, client-server communication protocol, current browser tab, UX best practices, Vuex compatible API

  • Se pasan los datos a través de la propiedad.purchase-preview title=”Compra de Juegos PS4″/purchase-previewEl componente purhase-preview tiene un prop identificado como title con el valor de Compra de Juegos PS4.Pero los problemas vienen cuando no es un string lo que queremos pasar, qué tal si lo queremos tratar como un entero, un…
  • purchase-preview v-bind:title=”Compra de Juegos :title=”Compra de Juegos PS4″/purchase-previewSi lo hacemos así, el ejemplo anterior dará un error, pues lo que estamos pasando (Compra de Juegos PS4) NO es una expresión válida en JavaScript (lo puedes verificar en la consola de tu navegador).
  • Javascript necesita expresiónes que pueda “entender”;  si queremos arreglar este ejemplo lo podemos hacer pasando un string válido para Javascript.purchase-preview v-bind:title=”‘Compra de Juegos :title=”‘Compra de Juegos PS4′”/purchase-previewTip 1: Usa dynamic props, obtienes el mismo resultado, y además, tienes el poder de pasar expresiones de JavaScript.Tip 2: Si estás teniendo problemas usa…
  • Y por supuesto, PHP tiene una función que hace este trabajo.json_encode() “retorna un string con la representación en JSON del valor suministrado”A continuación algunos de los más comunes casos que puedes encontrar en tu día de = true;@endphppurchase-preview :test-data=”{{ json_encode($boolean) = 299;@endphppurchase-preview :test-data=”{{ json_encode($integer) = 299.99;@endphppurchase-preview :test-data=”{{ json_encode($float) = “Compra…
  • — este es tratado como un objeto –purchase-preview :test-data=”{{ json_encode($arrayWithKeys) = new stdClass();    $object-value = 1;    $object-title = ‘My name’;@endphppurchase-preview :test-data=”{{ json_encode($object) = null;@endphppurchase-preview :test-data=”{{ json_encode($null) }}”/purchase-previewEloquent Model@php    $purchase = :test-data=”{{ json_encode($purchase) }}”/purchase-previewJson Encoded@php    $jsonEncoded = ‘{“id”:1,”title”:”Compra Juegos = :test-data=”{{ json_encode($jsonDecoded) aprendido un poco del flujo de los datos entre PHP y JavaScript.Ahora tienes…

Tags: Vue props, dynamic props, componente vue.js, purchasescontroller extends controller, etc… pues vue.js

  • It accepts two props — frame and average color.When the main component is mounted, we set the canvas to be the same size as the video.
  • You can read more about the details of this technique here, thanks to Addy Osmani.Lets take a look at the web worker.The WorkerThe main job of the worker is to accept data, which is imageData obtained from the canvas, and loop through it to get the average red, green, and…
  • The chart has an xAxis (representing the length of the video in frames) and a yAxis (ranging from 0–256, which represents the range of possible values for red, blue, and green).
  • In D3, we draw the axis using the length in pixels of the svg element, but the domain of the axis is not in pixels, it in frames (xAxis) or rgb values (yAxis).
  • A domain is just a range of possible values.After the chart is setup, we watch for the frame prop value to change and then we call updateChart .

Tags: web worker, average color, average RGB value, chart component, canvas elements context

  • From the Vue documentation, we see that both: – – From the standpoint of a finished product, I don’t think clients (or product owners) would be able to tell much difference if their app was built using Vue or React.
  • If you have a team that is building front end applications for the first time or are thinking of migrating away from a framework like Backbone or AngularJS, then you should consider Vue, although React retains the advantages I noted above.
  • When optimizing performance there are some differences… – – Another big difference comes with Vue’s use of templates vs React’s JSX.
  • The Vue docs begin by noting that CSS-in-JS is a very popular way of scoping CSS in React.
  • Dan is part of the React team and there is a pro-React tint to his comments here, but they nonetheless offer insight regarding differences between React and Vue… – – I end with a quote from Evan You.

Tags: React, Vue, Vue docs, excellent React Native, React team

Tags: Vue Tetris Tetris, habit tracker app, Role Playing Game, type Game, Sketch

Score: 1050
URL: https://madewithvuejs.com/2048-game
Tweeted At: Tue Dec 12 16:51:45 +0000 2017
Publish Date:
Author: eugenesirota

Tags: habit tracker app, Vue Tetris Tetris, GUI Electron app, Role Playing Game, smartphone

Score: 465
URL: https://speakerdeck.com/kazupon/future-of-vue-dot-js
Tweeted At: Wed Dec 13 10:30:03 +0000 2017
Publish Date:
Author:

Tags: slide content, kazupon, GitHub, Sep, Apr

Comments are closed, but trackbacks and pingbacks are open.