Your Choice JavaScript News

Vue News Tuesday, January 30

Vue News TLDR / Table of Contents

  • Building Vue.js Apps with Parcel ← Alligator.io
    • Do you have a soft spot for zero-config module bundlers? Tired of configuring webpack? Take a look here at how to build your Vue.js apps with ParcelJS instead!
    • Parcel out-of-the box, perfectly bundled app, in-depth Parcel guide, official Parcel documentation, alternative module bundler
  • What’s new in Vue Devtools 4.0 – The Vue Point – Medium
    • A big update was released to the Vue devtools just a few days ago. Let’s dive into the new features and improvements! 🎄 The content of the field is the serialized JSON value. For example, if you…
    • vue devtools, Component inspector pane, big update, ‘Format component names, default horizontal mode
  • Using Chart.js with Vue.js ← Alligator.io
    • How to use the popular Chart.js library with the Vue.js framework to build simple HTML5 charts.
    • data, chart, Vue component, Vue component slim, different chart types
  • How to build a simple blog using Vue, Cosmic JS and deploy to Netlify
    • Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
    • Cosmic JS, cosmic js hosting, Cosmic JS API, Integrate Cosmic JS, Cosmic JS bucket
  • wrapper around material-components-web for Vue.js – Laravel VueJs
    • wrapper around material-components-web for Vue.js in Laravel, Laravel & VueJs, VueJs
    • mdc-web vanilla components, template und pass, CSS custom properties, maximal customization, SASS file
  • How I learned Vue
    • How I dived into Vue
    • great user experience, JS frameworks, vue watcher, asynchronous nature, power Nodejs
  • JavaScript, CSS and Vue.js Launch
    • Today we’re excited to announce that StyleCI has levelled up, introducing long-awaited support for JavaScript, JSX, Typescript, CSS, SCSS, Less and Vue.js. Following the beta, new languages are available to Solo, Startup and Premium plans, and to those who helped during the testing phase. 🙌
    • long-awaited support, Premium plans, testing phase, new languages, relevant documentation
  • The Taste of Media Streaming with Flask
    • A journey from hardly serving an 8 min song to instantly streaming 5 hour jukeboxes in AnyAudio
    • YouTube, partial content, media, server, YouTube video
  • Server-Side Render Vue Apps with Nuxt.js (Server-side Rendering with JavaScript Frameworks)
    • Server Side Rendering Vue apps with Nuxt is super awesome. It takes a bit of configuration, but after the initial setup you have an excellent SSR build pipel…
    • upload original content, YouTube, videos, music, friends
  • VueConf US 2018 – March 26–28, 2018 in New Orleans, USA
    • Official Vue.js Conference USA
    • historic New Orleans, Lightning talks, best presentations, Workshop details, favorite Vue.js

Score: 86000
URL: https://alligator.io/vuejs/vue-parceljs/
Tweeted At: Mon Jan 29 21:28:00 +0000 2018
Publish Date:
Author: Joshua Bemenderfer

  • The canonical way to build & bundle a Vue.js application is with webpack, and indeed, pretty much everything Vue-related assumes that you’ll be using webpack.
  • So, let’s take a look at how to set up parcel for a Vue.js app.
  • In contrast to our usual steps, let’s go ahead and set up the skeleton app files before we do anything else.
  • First, let’s install everything we need for the Vue app itself.
  • For more information about built-in asset types, take a look at the official Parcel documentation.

Tags: Parcel out-of-the box, perfectly bundled app, in-depth Parcel guide, official Parcel documentation, alternative module bundler

Score: 75000
URL: https://medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0
Tweeted At: Mon Jan 29 14:58:01 +0000 2018
Publish Date: 2018-01-15T15:14:03.429000+00:00
Author: Guillaume CHAU

  • However, some values like undefined or NaN can be typed directly for more convenience.More types will be supported in future releases!Quick EditSome types of value can be edited in a single click with the ‘Quick Edit’ feature.Booleans can be toggled directly with the checkbox icon:Numbers can be incremented or decremented…
  • Follow this setup guide (if you are using Nuxt, you don’t need to do anything)In the Component inspector, mouse over the component name — you should see a tooltip with the file pathClick on the component name and it will open in your editorShow the original component namesPR by manicoBy default, all…
  • Type followed by the name of the component or part of it:Vuex inspector filterPR by bartlomiejuThe Vuex inspector has now a filter input:Vertical layoutPR by crswllWhen the devtools are not wide enough, they will now switch to an handy vertical layout.
  • Instead, you need to click the new ‘Scroll into view’ icon:Click on the eye icon to scroll to the componentIt will now center the component on the screen.Collapsible inspectorsThe sections of the different inspectors can now be collapsed.
  • This is very useful if you are, let’s say, only interested in the mutations details of the Vuex tab.And more!The ‘Inspect DOM’ button is now hidden if the environment doesn’t have this feature — by michalsnik-Infinity is now supported — by David-DesmaisonsThe event hook had an issue fixed by maxushuangSome code was cleaned by…

Tags: vue devtools, Component inspector pane, big update, ‘Format component names, default horizontal mode

Score: 16500
URL: https://alligator.io/vuejs/vue-chart-js/
Tweeted At: Mon Jan 29 16:49:16 +0000 2018
Publish Date:
Author: Dave Berning

  • In it’s simplest form, each chart has the same basic structure: – – You can start by adding your data to this object and keep repeating that process for each new chart you want to create.
  • So let’s use ES6 to our chart’s data, in order to keep our Vue component slim and focused.
  • You can have several data objects in this file for different charts – – Note: You can reference Chart.js’ documentation for more information about line charts, as well as others like , , , , and .
  • At this point, Chart.js should be installed and the chart’s data should be imported into the component.
  • In the object, you also created a function that creates the chart object with data from the file.

Tags: data, chart, Vue component, Vue component slim, different chart types

Score: 15000
URL: https://cosmicjs.com/articles/how-to-build-a-simple-blog-using-vue-cosmic-js-and-deploy-to-netlify
Tweeted At: Mon Jan 29 15:00:02 +0000 2018
Publish Date:
Author:

  • In this tutorial, I’m going to show you how to create a simple but amazing blog using Vue, Vuex, Cosmic JS and deploy to Netlify.
  • First of all, replace package.json with this: – – Open the folder in Terminal and do After doing that, we need to setup Cosmic JS configuration in order to communicate with API.
  • As this blog application is static, so if you want to deploy it to Cosmic JS hosting you need to create a simple Node.js Express server.
  • Go to your bucket in Cosmic JS dashboard and click Settings->Deploy Web App.
  • This is a simple blog app built using vue, vuex, and Cosmic JS.

Tags: Cosmic JS, cosmic js hosting, Cosmic JS API, Integrate Cosmic JS, Cosmic JS bucket

Score: 11500
URL: https://www.laravel-vuejs.com/wrapper-around-material-components-web-for-vue-js/
Tweeted At: Mon Jan 29 15:59:18 +0000 2018
Publish Date: 2018-01-29T14:58:40+00:00
Author: laravel-vuejs

  • Material components for Vue.js – Material-components-vue integrates the mdc-web vanilla components following the simple approach.
  • main goals – – decoupled components – can be cherry picked!
  • implementing just the specs not more or less – keep the components as simple as possible (KISS, DRY) – keep in sync with changes in the mdc-web repository – – installation – npm install –save material-components-vue – – yarn add – – – – – – – – – Example…
  • import all components – import MaterialComponentsVue from pick components – import Button from Card from the SASS file in the root component of app for maximal customization.
  • $mdc-theme-primary: #2196f3; – $mdc-theme-secondary: #ff1744; – $mdc-theme-background: #f5f5f5; – @import @import @import @import custom properties – Integrate a theme component in your template und pass in an object with CSS custom properties, but keep browser compatibilty in mind.

Tags: mdc-web vanilla components, template und pass, CSS custom properties, maximal customization, SASS file

Score: 9500
URL: https://www.codementor.io/cejowisz/how-i-learned-vue-g5prvy3i7
Tweeted At: Mon Jan 29 21:55:10 +0000 2018
Publish Date:
Author: Justin Follow

  • I am web developer that is about leaving PHP for Js – – I have recently heard the power Nodejs posses on the web; the asynchronous nature of it.
  • The Devcenter community on Slack has vibrant participants who are willing to help for any questions one might have – – Found it somewhat challenging working with vue watcher and computed method.
  • Working with Vue makes your web app to function smartly and delivers great user experience for your users.
  • My advice is that JavaScript has come to stay.
  • The next move is to dive into IoT with JavaScript.

Tags: great user experience, JS frameworks, vue watcher, asynchronous nature, power Nodejs

Score: 7500
URL: https://blog.alt-three.com/javascript-css-and-vue-js-launch/
Tweeted At: Mon Jan 29 21:58:36 +0000 2018
Publish Date: 2018-01-29T21:18:43+00:00
Author:

  • Today we’re excited to announce that StyleCI has levelled up, introducing long-awaited support for JavaScript, JSX, Typescript, CSS, SCSS, Less and Vue.js.
  • Following the beta, new languages are available to Solo, Startup and Premium plans, and to those who helped during the testing phase.
  • Extended language support will enable you to use StyleCI for more of your codebase, making code reviews even easier.

Tags: long-awaited support, Premium plans, testing phase, new languages, relevant documentation

Score: 1300
URL: https://dev.to/singhpratyush/the-taste-of-media-streaming-with-flask-58a4
Tweeted At: Tue Jan 30 07:00:05 +0000 2018
Publish Date:
Author:

  • For every media request made to the server, the first thing done is fetching the media from YouTube servers (see line 1 in the code above).
  • Earlier, every request of media made to the server resulted in downloading the whole audio from YouTube before serving any.
  • Here is a piece of code that explains the process — – – By putting the header with the request made to YouTube, the amount of data that the server needs to download before serving it to the client becomes less.
  • The client doesn’t get a response from the server unless the server has downloaded the partial data from YouTube and the response has been prepared and sent.
  • Though this is nowhere compared to the requests made to YouTube from the same client (around 15ms), it is an achievement for a hobby project with a cheap server.

Tags: YouTube, partial content, media, server, YouTube video

Score: 880
URL: https://www.youtube.com/watch?index=9&list=PLl-K7zZEsYLkbvTj8AUUCfBO7DoEHJ-ME&v=ZYUWsjUxxUQ
Tweeted At: Mon Jan 29 23:30:00 +0000 2018
Publish Date:
Author:

    Tags: upload original content, YouTube, videos, music, friends

    Score: 229
    URL: http://vueconf.us/
    Tweeted At: Tue Jan 23 18:50:32 +0000 2018
    Publish Date:
    Author:

      Tags: historic New Orleans, Lightning talks, best presentations, Workshop details, favorite Vue.js

      Top Vue Courses

      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.