Your Choice JavaScript News

Time, Accurate time estimates, Vue & more… Vue News Tuesday, February 27

Vue News TLDR / Table of Contents

  • How long will it take? Git knows.
    • How I end up making a tool to estimate my user stories using Git.
    • time, accurate time estimates, agile coach, coffee cup size, user story
  • Intro to Vue.js: Rendering, Directives, and Events
    • If I was going to sum up my experiences with Vue in a sentence, I’d probably say something like “it’s just so reasonable” or “It gives me the tools I want when I want them, and never gets in my way”. Again and again when learning Vue, I smiled to…
    • Vue, Sarah Drasner, Pen Vue Hello, Pen Vue Book, Vue instance
  • Creating Reusable Transitions in Vue
    • Creating transitions in Vue is fun and easy, but you have to do it again and again in each project. What if we could build reusable transitions and do it without hassle?
    • transition, visible transition duration, transition components, small Transition Collection, new transition components
  • chrisvfritz/vue-enterprise-boilerplate
    • vue-enterprise-boilerplate – An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.
    • thorough auth setup, Feb, initial commit, update dependencies Feb, circle ci Feb
  • YouTube
    • Roman Kuba – Scaling Vue in an existing stack Vuejs Amsterdam (16th February 2018) Slides: https://speakerdeck.com/codebryo/adding-vue-to-an-existing-stack-a…
    • upload original content, YouTube, , ,
  • I remember the first time the team I was working for, decided to start using scrum as a way to become more Agile.
  • Then we would argue over and over again whether a story was 4 or 8 points and what does that mean anyway, is it twice as difficult to do or does it take twice the time?
  • That worked for a while but soon he was off to a different team and we started seeing 2 point stories being dragged on for days while 8 point stories sometimes were finished within the same day.
  • We were using Jira already as a digital version of our board, so after a while we started including a time estimate in our stories and instead of reducing the points we were reducing the remaining time.
  • The effort we spent debating story points or arguing over remaining hours/days during planning, the fact that we had to keep track of what we have been doing every day in order to justify the time we spent on a story and the daily update of Jiras and timesheets (yes…

Tags: time, accurate time estimates, agile coach, coffee cup size, user story

  • Let’s do that so you can get up and running: – – See the Pen Vue Hello World by Sarah Drasner (@sdras) on CodePen.
  • Now let’s implement that same thing with Vue’s loop with : – – See the Pen Conditional Rendering in Vue by Sarah Drasner (@sdras) on CodePen.
  • Check this out: – – See the Pen Vue Book v-model basic by Sarah Drasner (@sdras) on CodePen.
  • You can see that we didn’t even need to pass in the event to the handler, Vue will automatically pass it for you to be available as a parameter for the method.
  • We don’t even actually need to create a method at all, we could also increase the counter directly inline in the component if the event is simple enough: – – See the Pen Backpack Shop Counter by Sarah Drasner (@sdras) on CodePen.

Tags: Vue, Sarah Drasner, Pen Vue Hello, Pen Vue Book, Vue instance

  • By providing a in our transition component we could use it almost in the same way as a basic component.
  • We can do that with the help of transition which are pretty similar to component lifecycle hooks but they are called before and after transitioning the desired element.
  • The most straightforward way that you think of would probably be to create a new component, lets say and replace the current tag with the one to achieve a group transition.
  • With a few more adjustments and by extracting our javascript logic in a mixin, we can apply it to easily create new transition components which we could simply drop in and use them in our next project.
  • Feel free to give it a try 🙂 – – We started from a basic transition example and managed to create reusable transition components in the end with adjustable duration and support.

Tags: transition, visible transition duration, transition components, small Transition Collection, new transition components

    Tags: thorough auth setup, Feb, initial commit, update dependencies Feb, circle ci Feb

      Tags: upload original content, YouTube, , ,

      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.