Your Choice JavaScript News

Vue News Tuesday, February 6

Vue News TLDR / Table of Contents

  • Learn Vue.js from Top Articles for the Past Year (v.2018)
    • For Jan-Dec 2017, we compared nearly 10,000 tutorials about Vue.js 2.0 and picked the Top 40 (0.4%).
    • extremely competitive list, best daily articles, Mybridge AI, human factors, key topics
  • Vue-fullpage.js
    • Vue-fullpage.js – VUE component for snap scrolling sites. (Web App, Design Tools, and Open Source) Read the opinion of 6 influencers. Discover 8 alternatives like JSON Generator and JSON Query
    • snap scrolling sites, open source library, abadesi hey, good solution, Vue.js
  • Vue.js State Management with Vuex and TypeScript
    • In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based components and using decorators. This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how…
    • TypeScript Vue, beer shop app, Vue.js Web Applications, class based components, Vue app
  • Building a Simple Face Recognition App with Vue.js and Kairos
    • Face Detection and Recognition have become an increasingly popular topic these days. It’s a great advantage for a machine to know which user is in a picture. The applications of facial recognition in our world today are endless. From Face, iD unlock to identifying criminals on the run using real-time…
    • json response, kairos, face, Face Detection, Face Recognition App
  • How to add Semantic UI to your Vue project –
    • This is aimed at Webpack users and targets the latest version of Semantic UI (https://semantic-ui.com/). This tutorial does not cover anything jQuery related. If you do want rapid out-of-the box JS…
    • semantic ui, out-of-the box JS, Adapt resolve entry, Adapt module rules, vue-cli webpack-simple template
  • Build A Collapsible Tree Menu With Vue.js Recursive Components | Codementor
    • A recursive component is one which invokes itself and is useful for displaying comments on a blog, nested menus or anything where the parent and child are the same. In this tutorial, I’ll give you a demonstration of how to build a collapsible tree menu.
    • recursive UI components, recursive components, recursive data structure, recursive data structures, single root node

Score: 54000
URL: https://medium.mybridge.co/learn-vue-js-from-top-articles-for-the-past-year-v-2018-2b945cfc4f2d?gi=cd590b6c4bec
Tweeted At: Mon Feb 05 23:01:13 +0000 2018
Publish Date: 2018-02-05T22:43:09.403000+00:00
Author: Mybridge

  • Learn Vue.js from Top Articles for the Past Year (v.2018)For Jan-Dec 2017, we compared nearly 10,000 tutorials about Vue.js 2.0 and picked the Top 40 (0.4%).
  • Mybridge AI ranks articles based on the quality of content measured by our machine and a variety of human factors including the number of shares and minutes read.This directory is designed to make your life easier as it organizes the most useful articles by 17 key topics, where experienced web…

Tags: extremely competitive list, best daily articles, Mybridge AI, human factors, key topics

Score: 3000
URL: https://www.producthunt.com/posts/vue-fullpage-js
Tweeted At: Tue Feb 06 16:00:58 +0000 2018
Publish Date: 2018-02-06T09:45:34+00:00
Author:

  • Finally a good solution to create snap scrolling sites has arrived to Vue.js.
  • This Vue component provides a way to use fullPage.js in the Vue way.
  • No more ugly directive solutions or poor implementations of the feature.
  • This is the official vue.js component for fullPage.js.

Tags: snap scrolling sites, open source library, abadesi hey, good solution, Vue.js

Score: 3009
URL: https://egghead.io/courses/vue-js-state-management-with-vuex-and-typescript
Tweeted At: Tue Feb 06 19:14:05 +0000 2018
Publish Date:
Author:

  • In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.
  • This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app.
  • We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

Tags: TypeScript Vue, beer shop app, Vue.js Web Applications, class based components, Vue app

Score: 1290
URL: https://scotch.io/tutorials/building-a-simple-face-recognition-app-with-vuejs-and-kairos
Tweeted At: Tue Feb 06 18:00:05 +0000 2018
Publish Date: 2017-11-14T15:39:11+00:00
Author: Oreoluwa Ogundipe

  • After signing up, you’ll be redirected to the dashboard with your credentials – – PS: Note your App ID and Key ( you’ll need them later ) – Step 2: Set Up A Node Server – Initialize your node project and create a package.json file with: – npm init -…
  • Let’s call it /upload: – […] – app.post(‘/upload’, multipartMiddleware, function(req, res) { – // get base64 version of image and send that to Kairos for training – let base64image = ‘base64’); – var params = { – image: base64image, – subject_id: req.body.name, – gallery_name: ‘rekognize’, – }; – console.log(‘sending to…
  • catch(function(err) { – // return status code as false – return res.json({‘status’ : false}); – }); – }); – Once the user makes a POST request to the /upload route, the route gets the image file from the HTTP Request, converts it to a base64 version and then uploads it…
  • The upload method takes the image that was uploaded, resets the uploadStatus ( this is done so that when a user is performing multiple uploads, the status is cleared before each upload ) and then calls the showPreview method: – […] – methods: { – upload: function(files) { – this.model.image…
  • prevent=”onSubmit” – div class=”form-group” – label for=””Upload Picture of Person to Recognise:/label – input type=”file” class=”form-control” accept=”image/*” name=”image” /div – – div class=”form-group” – button class=”btn btn-primary” Rekognize/button – span class=”fa fa-spin fa-spinner” id=”verify_spinner” style=”display:none;” aria-hidden=”true”/span – {{ loading }} – /div – /form – This is quite similar to…

Tags: json response, kairos, face, Face Detection, Face Recognition App

Score: 777
URL: https://codeburst.io/how-to-add-semantic-ui-to-your-vue-project-cc8c4783a673?gi=84ac592266fa
Tweeted At: Sun Feb 04 04:44:06 +0000 2018
Publish Date: 2018-01-22T10:40:38.468000+00:00
Author: Bjorn

  • How to add Semantic UI to your Vue projectThis tutorial covers how to add Semantic UI (with customizations) to your Vue.js project.This is aimed at Webpack users and targets the latest version of Semantic UI tutorial does not cover anything jQuery related.
  • If you do want rapid out-of-the box JS functionality I recommend which is a Vue wrapper for Semantic UIand is 100% compatible with this tutorial.The starting point of this tutorial will be the vue-cli webpack-simple can get the full code of this tutorial on github here: LessSemantic UI is powered…
  • Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.npm install less –save-devInstalling Semantic UI (Less distribution)We will be installing the Less-only distribution of…
  • Instructs webpack to emit the required object as file and to return its public URL.npm install file-loader –save-devConfiguring Semantic UIIn your project’s root, create a new folder called ‘semantic-theme’.
  • Add the following inside ‘theme.config’:Adapting your Webpack configurationAdapt module rules:Adapt resolve entry:Integrating Semantic UI:Adapt main.js to import Semantic ui:Adapt App.vue:Result:Customizing your themeFrom here on you can follow the official customization guide: the theme’s primary color:Create the following file: the contents of site.variables to the following:GithubIn case you get stuck you can get…

Tags: semantic ui, out-of-the box JS, Adapt resolve entry, Adapt module rules, vue-cli webpack-simple template

Score: 747
URL: https://www.codementor.io/vuejsdevelopers/build-a-collapsible-tree-menu-with-vue-js-recursive-components-d5npzqh2h
Tweeted At: Sun Feb 04 20:00:36 +0000 2018
Publish Date:
Author: Anthony Gore

  • A tree of recursive UI components will be the visual representation of some recursive data structure.
  • Let’s make a recursive component to display our data structure called .
  • To begin the recursion we invoke the component in our main template, using the root properties for the props: – – Here’s how it looks so far: – – It’d be nice to visually identify the “depth” of a child component so the user gets a sense of the structure…
  • In the component template above you can see that this value will be incremented each time it is passed to any child nodes.
  • Since recursive data structures can be large, a good UI trick for displaying them is to hide all but the root node so the user can expand/contract nodes as needed.

Tags: recursive UI components, recursive components, recursive data structure, recursive data structures, single root node

Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

By Bo Andersen
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Learn more.


Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

By Maximilian Schwarzmüller
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn more.


The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

By Anthony Gore
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

Learn more.


Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

By David Katz
  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.

Learn more.


Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

By Dejan Stošić
  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli

Learn more.


Comments are closed, but trackbacks and pingbacks are open.