Your Choice JavaScript News

Assistive technology, Aria, Open source projects & more… Vue News Thursday, March 1

Vue News TLDR / Table of Contents

  • How to Create an Accessible Autocomplete Component with Vue.js
    • Transform a Vue.js autocomplete component into an accessible one with the help of ARIA attributes
    • assistive technology, aria, ARIA attributes, autocomplete component,
  • Vue.js Top 10 Open Source for the Past Month (v.Feb 2018)
    • For the past month, we ranked nearly 150 Vue.js Open Source Projects to pick the Top 10.
    • open source projects, folder-based config approach, Vue.js Open Source, ,
  • Drupal & Vue.js: how to work without jQuery –
    • Starting with the 5th version, Drupal has jQuery out of the box. It was an awesome tool for developers. But nowadays we face completely different problems that this library can not solve. Why do I…
    • Vue.js, completely different problems, Drupal user elements, party jQuery plugin, modern reactive user
  • Vue.js SEO Tips
    • Not quite sure what steps you should take to optimize your Vue.js apps and sites for search engines? Take a look at our list here.
    • Page Title, content, search engine spiders, canonical link, twitter
  • ColorsWall: A website to store and create color palettes with the…
    • A place to store your color palettes or create new ones to use & share with everyone
    • color palettes, new palettes, simple code snippet, specific music genre, latest Vue.js news
  • Note that you can choose to provide the instead, but because most autocomplete components have a label element nearby, Im going to take advantage of that: – – Ive made it a required attribute to make sure no one ever forgets to add it.
  • We just need to add an to our label and to provide it as a prop: – – And now the assistive technology is able to tell us that the input text intent is to choose a fruit: – – Although labels can improve the usability tremendously, they are not…
  • The more suitable one for our autocomplete is the one: – – Because the input of text in our component will display a list of results for the intended value we also need to set the attribute in the textbox element.
  • The attribute allows three different values, an value which defines that the value completion will happen inside the text input and a value which means the values will be present in a separate element that pops up adjacent to the text input or a value which means that a list…
  • With these attributes the assistive technology software is now able to understand we are presenting the user with a combobox that will show a list of suggested values.

Tags: assistive technology, aria, ARIA attributes, autocomplete component,

  • Vue.js Top 10 Open Source for the Past Month (v.Feb2018)This is a new monthlyseriesFor the past month, we ranked nearly 150 Vue.js Open Source Projects to pick the Top 10.
  • Average number of Github stars in this edition: 1,883 Watch Vue.js Top 10 Open Source on Github and get email once a month.Topics: Nux.js, Devtools, Style Guide, Potal, Testing, Transitions, Chat, ComponentsOpen source projects can be useful for programmers.
  • Course of the month: – A) Nuxt.js: Vue.js on Steroids.
  • Build highly engaging Vue JS apps with Nuxt.js.
  • [264 recommends, 4.9 stars] – – Nuxt.js: Versatile Vue.js Framework [v.1.0] [10078 stars on Github].

Tags: open source projects, folder-based config approach, Vue.js Open Source, ,

  • I suggest trying Vue.js to enhance some Drupal user elements.
  • The Vue.js community can offer a lot of awesome components.
  • I believe that user input data should be validated as on the back-end as on the front-end side.
  • So you have to add – vee-validate is a lightweight plugin for Vue.js that allows you to validate input fields, and display errors.
  • Also, please change input elements: – As you can see, using Vue.js and its components to enhance existing elements is very easy.

Tags: Vue.js, completely different problems, Drupal user elements, party jQuery plugin, modern reactive user

  • Applications and sites that are not easily indexed by search engines or poorly optimized will end up hidden behind pages and pages of search results.
  • Now if you, a Vue.js developer, dont want that to happen to your project, take a look at our tips for optimizing Vue.js sites and apps for the demanding eyes of search engine spiders.
  • Just in-case, you should put a canonical link in your head to instruct search engines to consider that URL as the intended URL for this page.
  • Its not super important, at least for small sites, to have a sitemap, but a sitemap can be useful to indicate to search engines which pages you think are of particular relevance and importance on your site.
  • There are two methods commonly used to turn a SPA into a bunch of already-populated pages that present the data on the page before loading the SPA: – – For the vast majority of sites, Prerendering is the simplest solution, but for highly dynamic sites, SSR might be preferred.

Tags: Page Title, content, search engine spiders, canonical link, twitter

  • Colorswall is a place where you can create new palettes and store them using a HEX code, reaching up to 20 colors in a single palette.
  • Everyone can go through the available palettes, clone it, and get the colors contained in it (HEX, SCSS, LESS), all powered by Vue.js.
  • Colorswall is a great example of Vue in the works.
  • You can search the website and use its functionalities like searching palettes by name, rearranging them, or creating a random palette to see how things run.

Tags: color palettes, new palettes, simple code snippet, specific music genre, latest Vue.js news

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.