Your Choice JavaScript News

Vue News Thursday, February 1

Vue News TLDR / Table of Contents

Score: 13050
Tweeted At: Thu Feb 01 18:42:04 +0000 2018
Publish Date:
Author: Kostas Maniatis

  • Enso is a starting project, based on Laravel 5.5, Vue 2, Bulma, and integrated themes from Bulmaswatch, utilizing Vueex and VueRouter.
  • The documentation to support all these is available here.
  • It is very detailed providing info for every bit, how everything works, usage options, configuration and more.
  • There is a list explaining what is used for authentication purposes, the option between stateful & stateless, about session management, security and more that can explain to the user how it works under the hood.
  • This project is available on GitHub under the MIT licence.

Tags: Laravel SPA project, User action logger, Application interface tutorials, file management library, Microsoft Office ribbon

Score: 10170
Tweeted At: Wed Jan 31 05:56:00 +0000 2018
Publish Date:
Author: Filipa Lacerda

  • In this article you’ll learn how to create a reusable modal component using transitions and slots.
  • We’ll need a div for the backdrop shade, a div to act as the modal box and some elements to define it’s structure: – – Notice the use of slots?
  • Let’s set some defaults for the slots, the wrapper elements and the initial CSS to make it look like a basic modal.
  • Every time a component or an element wrapped by a transition is inserted or removed, Vue will check if the given element has a CSS transitions and will add or remove them at the right time.
  • First let’s start by adding a transition wrapper component to our modal: – – Now let’s add a transition for the opacity to fade slowly by using the applied classes: – – Now our modal opens and closes smoothly!

Tags: px, button type, reusable modal component, modal box, div class

Score: 4500
Tweeted At: Thu Feb 01 16:49:24 +0000 2018
Publish Date: 2018-02-01T16:43:10.851000+00:00
Author: Bulgaria Web Summit 2018

  • Talk by Kaloyan Kosev: React Native App — Expectations vs Reality.superKaloI had a chance to be part of a team that started developing a decent size React Native mobile app from scratch.
  • As a developer with a solid React background, I had some expectations at first.
  • During my initial research, everything sounded terrific: performance stats, ease of development, learn-once-use-everywhere, debugging tools, etc.
  • But is everything terrific really?I’m excited to share my journey about how my expectations met the reality.
  • I’ll also try to address the most popular misconceptions about React Native, which front-end developers usually have before they have the chance to actually built something.

Tags: React Native, decent size React, solid React background, newest JavaScript features, rich testing API

Score: 2850
Tweeted At: Thu Feb 01 23:10:12 +0000 2018
Publish Date: 2018-01-31T14:03:29.148000+00:00
Author: Michał Męciński

  • The user can use buttons to switch between them and the component loads some data from the server to display the content of each tab.Let’s start with this simple version of the component:template div button v-on:click=”switchTab( 1 )”Tab 1/button button v-on:click=”switchTab( 2 )”Tab 2/button button v-on:click=”switchTab( 3 )”Tab 3/button div{{…
  • then( message = { this.message = message; } ); }, loadMessage( index ) { return new Promise( ( resolve, reject ) = { setTimeout( () = resolve( ‘Message #’ + index ), 1000 ); } ); } }}/scriptThe switchTab() method marks the selected tab as active, changes the message to…
  • Instead of hard-coding a 1000 millisecond delay to simulate network latency, let’s make this more realistic by randomizing this delay:loadMessage( index ) { const delay = Math.floor( 1000 + Math.random() * 3000 ); return new Promise( ( resolve, reject ) = { setTimeout( () = resolve( ‘Message #’ + index…
  • In that case, the promise can simply remain in a pending state, when it’s neither resolved or rejected.Let’s add the following method to our component:loadLastMessage( index ) { const promise = this.loadMessage( index ); this.lastPromise = promise; return new Promise( ( resolve, reject ) = { promise.then( result = {…
  • In order to do that, it’s enough to use the following code:this.lastPromise = null;This way, the handler in switchTab() will no longer be called when the final operation completes.Cancelling a Vuex actionNow let’s imagine that our application uses a Vuex store and loading the data is implemented as an action.Also, to…

Tags: message, index, promise, tab, asynchronous operation

Score: 2700
Tweeted At: Thu Feb 01 20:15:12 +0000 2018
Publish Date: 2017-03-21T10:04:28+00:00
Author: Ogundipe Samuel Ayo

  • { – //name of the application – “name”: “electron-vue”, – //version of the application – “version”: “1.0.0”, – //description of the application – “description”: “A Vue.js project”, – //author of the application – “author”: “samuelayo”, – “private”: true, – //main entry point for electron – “main”: “elect.js”, – //vue…
  • , – “correct_answer”: “Steven Spielberg”, – “incorrect_answers”: [ – “Steven Spielberg”, – “Stanley Kubrick”, – “James Cameron”, – “Tim Burton” – ] – }, – { – “category”: “Entertainment: Video Games”, – “type”: “multiple”, – “difficulty”: “medium”, – “question”: “What is the main character of Metal Gear Solid 2?”
  • , – “correct_answer”: “Bilius”, – “incorrect_answers”: [ – “Bilius”, – “Arthur”, – “John”, – “Dominic” – ] – }, – { – “category”: “Politics”, – “type”: “multiple”, – “difficulty”: “medium”, – “question”: “Before 2011, “True Capitalist Radio” was known by a different name.
  • , – “correct_answer”: “True Conservative Radio”, – “incorrect_answers”: [ – “True Conservative Radio”, – “True Republican Radio”, – “Texan Capitalist Radio”, – “United Capitalists” – ] – }, – { – “category”: “Entertainment: Film”, – “type”: “multiple”, – “difficulty”: “medium”, – “question”: “This movie contains the quote, “I love the…
  • , – “correct_answer”: “Landsberg Prison”, – “incorrect_answers”: [ – “Landsberg Prison”, – “Spandau Prison”, – “Ebrach Abbey”, – “Hohenasperg” – ] – } – ] – export default { – //name of the component – name: ‘app’, – //function that returns data to the components – data : function (){…

Tags: electron, Vue, True Conservative Radio, Vue application, Vue 2.X versions

Score: 900
Tweeted At: Thu Feb 01 13:07:05 +0000 2018
Publish Date: 2017-09-27T08:48:29+00:00
Author: Povilas Korop

    Tags: sample open-source project, simple installation instructions, useful starter tool, Laravel APIs, authorization screen

    Score: 258
    Tweeted At: Fri Jan 26 11:55:01 +0000 2018
    Publish Date:
    Author: CreativeTim

      Tags: Awesome Font Awesome,

      Score: 162
      Tweeted At: Tue Jan 30 20:46:08 +0000 2018
      Publish Date: 2018-01-30T18:07:00+00:00

      • Bonjour, Je recherche pour mon client, acteur majeur du consulting et de la transformation digitale dans le monde, un développeur Vue.js (ou avec une bonne expérience sur Angular) sur un projet e-commerce.
      • Localisation: Massy Démarrage: Janvier Durée: 6 mois Missions: – Vous concevez et développez en Vue.js – Réalisation des tests unitaires et fonctionnels – Maintenance / gestion des bugs – Veille technologique Profil : Vue.JS / Angular Environnement Web / Projet Digitaux / E-commerce Outils: Git, Jira (ou Redmine), Git, Confluence,…
      • Cordialement, Marco Clic2search : Mission Développeur Connaissances demandées Web…

      Tags: Angular Environnement Web, veille technologique profil, Mission Développeur Connaissances, Massy Démarrage, transformation digitale

      Score: 144
      Tweeted At: Wed Jan 31 18:38:00 +0000 2018
      Publish Date:

        Tags: parallax scroll effect, Cross-Platform Mobile App, simple parallax scroll, Mobile App Development, NativeScript Snacks

        Score: 99
        Tweeted At: Tue Jan 30 17:26:02 +0000 2018
        Publish Date:
        Author: mariojankovic

          Tags: Font Awesome, open source status, Awesome Get vector,

          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.