spaceninja + vue   105

Understanding Vue's Deep CSS Selector
Learn how to use the Deep selector in Vue, a powerful tool for resolving certain CSS issues.
vue  javascript  css  selectors 
20 hours ago by spaceninja
Considerations for Creating a Card Component
There is a balance. If a component is too strict, it runs the risk of that people won't use them because they don't give them what they need. And if they're too loose, people might not use them because they don't provide any value, and, even if they did use them, they don't offer any cohesiveness.
fridayfrontend  javascript  react  vue  components 
28 days ago by spaceninja
The Mindset of Component Composition in Vue
Let's look at component composition. I'm going to attempt to unravel the crazy that goes on in my head when designing components in a step-by-step article where we will build a Search Bar component together. 
vue  javascript  components 
28 days ago by spaceninja
How to Build Vue Components in a WordPress Theme | CSS-Tricks
The whole thing felt complex enough that I didn't want to handle all that state manually. I remembered reading Sarah Drasner’s article "Replacing jQuery With Vue.js: No Build Step Necessary” which shows how to replace classic jQuery patterns with simple Vue micro-apps. That seemed like a good place to start, but I quickly realized that things would get messy on the PHP side of WordPress.
javascript  vue  wordpress  components 
6 weeks ago by spaceninja
Moving from Vanilla JavaScript to a Reusable Vue Component | CSS-Tricks
I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we can make that a reusable component by porting it into Vue using basic features that the framework provides.
javascript  vue 
6 weeks ago by spaceninja
Binding CSS Variables in Vue - shayneo
Binding to style and class in Vue.js can be extremely handy for making styles respond to state in your application. This state might be data fetched through an Ajax request, user input, or any other type of data source that is made available at run time. Binding a CSS Variable to style is a clever way to push this pattern a little bit further, while gaining all the benefits of writing variable driven css.
javascript  vue  variables  customproperties  css 
6 weeks ago by spaceninja
Building an application with Vue and TypeScript. Best practices, thoughts and recommendations. |
Some years ago, my team and I were tasked to create an embeddable checkout system for one of our applications. Angular, React and Vue were relatively new, and we did not have any prior experience with these frameworks. At this point, all of our apps were built with jQuery and RequireJS, and we knew that we definitely wanted to move away from that. I know that jQuery is still fine for simple CRUD apps and landing pages. However, a single page application (SPA) with complex state, routing, code splitting etc. is simply too much for it.
javascript  vue  typescript 
6 weeks ago by spaceninja
Getting Acquainted With Svelte, the New Framework on the Block
There’s another player in the framework space that’s gaining attention and operates very much in the same spirit as Vue… Svelte. This article is going to zoom out a bit and provide a little more context about Svelt, as well as how it differentiates itself from other frameworks, and how to implement it in your own projects.
fridayfrontend  javascript  svelte  vue  frameworks 
7 weeks ago by spaceninja
Building my New Site with VuePress
I'm so happy to finally launch my new website! In terms of the tech stack, I stayed within my favorite world -- Vue 😆. But this time I decided to use VuePress instead. In this article, I want to share how this decision came to be and what my thoughts are on using VuePress.
fridayfrontend  javascript  vue  vuepress 
7 weeks ago by spaceninja
How To Create A Headless WordPress Site On The JAMstack
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordPress API.
fridayfrontend  wordpress  jamstack  vue  nuxt  api  javascript 
8 weeks ago by spaceninja
Test driven development with Vue.js by Sarah Dayan
Testing a component can be counter-intuitive. It requires a mental shift to wrap your head around the differences between testing components and testing plain scripts, knowing what to test and understanding the line between unit and end-to-end tests.

TDD makes everything easier. Instead of writing tests by examining all bits and pieces of a finished project, and trying to guess what you should cover, you’re doing the opposite. You’re starting from actual specs, a list of things that the component should do, without caring about how it does it. This way, you’re ensuring that all you test is the public API of your component, but you’re also guaranteeing you don’t forget anything.

In this talk, we’ll cover why TDD is an ideal method for testing Vue components properly, and we’ll do it together live. We’ll deep dive into why TDD works the way it does, and how it can bring you full confidence over iterating on your Vue projects. At the end of the talk, you will know exactly what to test in your Vue components, and how to do it efficiently.
fridayfrontend  video  vue  testing  tdd  components 
10 weeks ago by spaceninja
What is this guide? | Vue Testing Handbook
This is a collection of short, focused examples on how to test Vue components. It uses vue-test-utils, the official library for testing Vue components, and Jest, a modern testing framework. It covers the vue-test-utils API, as well as best practises for testing components.
vue  javascript  testing  jest 
11 weeks ago by spaceninja
Taking Isomorphic Apps Offline With Service Workers
By combining isomorphic applications and service workers we can build app-like experiences that used to be impossible on the web. We just need a little help from an offline fallback page.
fridayfrontend  javascript  pwa  serviceworkers  offline  isomorphic  nuxt  vue  react 
12 weeks ago by spaceninja
Accessible form error auto-focus with Vuelidate in Vue - DEV Community 👩‍💻👨‍💻
Vuelidate makes it very simple for developers to handle even the most complex cases of form validation, but what about accessibility UX? Let's take a look at some very simple practices that you can implement on your Vuelidate powered forms that will make them behave a lot more nicely for accessibility tools like screen reade
vue  javascript  forms  validation  errors  focus  vuelidate 
january 2020 by spaceninja
eslint-plugin-vue-a11y - npm
Static AST checker for accessibility rules on elements in .vue.
accessibility  vue  javascript  eslint 
january 2020 by spaceninja
How to Avoid the “Boolean Trap” When Designing React Components
We learnt this years ago, but it seems we need to re-learn it in React where the same problem takes a different form. I call it “the Boolean trap.”
javascript  react  vue  components  boolean  props 
december 2019 by spaceninja
A Recap of Frontend Development in 2019
The world of frontend development once again evolved at a rapid pace over the past year, and this article recaps all the important events, news, and trends from 2019.
fridayfrontend  recap  frontend  npm  javascript  vue  react  angular  accessibility  css-in-js 
december 2019 by spaceninja
Vue Community
Welcome to a beginner's guide to Vue.js community and ecosystem, written and maintained by the community itself.

Alongside the official documentation like the guide or cookbook both of which are meant to teach you how to use Vue.js, this website focuses more on helping newcomers to find their way around the evergrowing ecosystem, by providing meaningful summaries or comparisons of popular projects and available resources.

The goal is to gather the answers to the most common questions asked by new Vue.js developers, grouped by categories and written in an easy to digest way, with links to further materials on the topic.
javascript  vue  guide  community 
december 2019 by spaceninja
Accessible Form Validation Messages with ARIA and Vue.js - Vue.js Developers
Did you know that in your client-side validation errors in your web forms, and even additional instructions you provide for your form fields, might not be heard by screenreader users? In this article you'll learn how to use ARIA and Vue.js to make your form error messages and instructions more accessible to all of your users.
javascript  vue  forms  accessibility  aria  errors 
december 2019 by spaceninja
Apollo state management in Vue application
Now imagine an application fetching data from a GraphQL endpoint with Apollo client. By default, Apollo will store this data to Apollo cache. But what if we have some local application state, stored in Vuex? If we copy data from Apollo cache to Vuex, we're doubling our data. If we leave data from the API in Apollo and local data in Vuex, there will be two sources of truth. What would be a good way to store local data?
javascript  vue  vuex  apollo  graphql  caching 
december 2019 by spaceninja
Intro to Vue.js: Animations | CSS-Tricks
This is the fifth part in a five-part series about the JavaScript framework, Vue.js. In this last part of the series, we'll cover Animations (if you know me at all, you probably knew this was coming). This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer.
javascript  vue  animation  transitions 
december 2019 by spaceninja
Lazy Loading Individual Vue Components and Prefetching - Vue.js Tutorials
In this article, we will explore which types of components can be loaded lazily and, more importantly, how to handle the waiting required for them to download.
javascript  vue  components  lazyload  webpack  performance 
december 2019 by spaceninja
Vue.js Router Performance - Vue.js Tutorials
In the previous article, we learned about the concept of lazy loading and briefly understood how webpack bundling works under the hood. With a good understanding of basics, we can see how to apply this knowledge in a real-world Vue application. The trick you will earn today could dramatically decrease your bundle size in just a few minutes. Feel excited? Let’s see what it is!
javascript  vue  components  routers  lazyload  webpack  performance 
december 2019 by spaceninja
Lazy loading and code splitting in Vue.js - Vue.js Tutorials
While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast. In this series, I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform smooth. My goal is to make this series a full and complete guide on Vue apps performance.
javascript  vue  components  lazyload  codesplitting  webpack  performance 
december 2019 by spaceninja
Advanced Vue: Controlling Parent Slots (Case Study) - Michael Thiessen
Let me ask you about something you've probably never thought about: Is there a way to populate a parent's slot from a child component? Recently a coworker asked me this, and the short answer is: Yes.
vue  javascript  slots  components 
december 2019 by spaceninja
Building an Interactive and Distraction-Free Form with Vue
No one enjoys filling out a form. But there are ways we can build forms that are more interactive, promote engagement, and are less burdensome for the user. In this Vue Mastery article, we’re going to build an interactive and distraction-free form using advanced concepts of the Vue.js framework and other supporting libraries for form validation and animations.
javascript  vue  forms  vuex  progressive 
december 2019 by spaceninja
The Power of Named Transitions in Vue | CSS-Tricks
Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component.
javascript  vue  transitions  animation 
december 2019 by spaceninja
An (almost) comprehensive guide on using Storybook with Nuxt.js
Using Storybook with plain Vue.js is no hassle but it’s another story with Nuxt as it doesn’t work straight out the box. The info out there is disperse and I had to dig around other people’s repos and examples to have it working with Nuxt, including with how I usually make use of the Store.
javascript  vue  storybook  nuxt  vuex  axios  tailwind 
december 2019 by spaceninja
Form Validation in Under an Hour with Vuelidate | CSS-Tricks
Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate is personally my favorite option for validations because it doesn't require a lot of hassle. Plus, it's really flexible, so we don’t even have to do it how I’m going to cover it here. This is just a launching point.
javascript  vue  forms  vuelidate  validation 
december 2019 by spaceninja
How to Reduce Your Vue.JS Bundle Size With Webpack - Vue.js Developers - Medium
I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Due to the bundling of such a large number of applications our Vue build for production resulted in multiple warnings about excess size.
javascript  vue  webpack  performance 
december 2019 by spaceninja
Creating a Reusable Pagination Component in Vue | CSS-Tricks
The first is pagination, a technique that splits the set of data into a specific number of pages, saving users from being overwhelmed by the amount of data on one page and allowing them to view one set of results at a time. Take this very blog you're reading, for example. The homepage lists the latest 10 posts. Viewing the next set of latest posts requires clicking a button.
javascript  vue  components  pagination 
december 2019 by spaceninja
How to Build Your First Vue.js Package and Publish on NPM
We'll learn how to make our own plugin for Vue.js, and distribute it on NPM for everyone to use.
javascript  vue  node  npm  howto  tutorials 
december 2019 by spaceninja
Unit Testing in Vue: Your First Test | Vue Mastery
In the previous article, we explored why to do unit testing in Vue.js and what you should and shouldn’t test. In this article, we are going to write our first unit tests. I’m going to make assumptions here that you have written a Vue application before and that you have the Vue CLI installed. In this section we are going to create a new Vue application using the Vue CLI, write some components, and write some tests for them. We will do all of this before ever actually running npm run serve.
javascript  vue  components  testing  jest  howto  tutorials  projects 
december 2019 by spaceninja
Unit Testing in Vue: What to Test? | Vue Mastery
Every developer knows that they should be writing tests, but in reality, many of us don’t do it at all or we aren’t doing enough of it. The problem isn’t the lack of tools, it’s that we don’t have a clear understanding of what these tools are meant to do. In this article, I am going to give you a beginner’s blueprint for what you should be testing in your Vue.js applications as well as the tools you will need to do so.
javascript  vue  testing  howto  tutorials  projects 
december 2019 by spaceninja
Knowing What To Test - Vue Component Unit Testing - Vue.js Developers
In this article, I'll share with you some guidelines I use for unit testing components that ensure I don't spend forever writing tests but provide enough coverage to keep me out of trouble.
javascript  vue  jest  testing  components  howto  tutorials  projects 
december 2019 by spaceninja
An Introduction to TDD with Vue.js | frontstuff
TDD makes all this easier. Instead of writing tests by examining all bits and pieces of a finished project and trying to guess what you should cover, you’re doing the opposite. You’re starting from actual specs, a list of things that the component should do, without caring about how it does it. This way, you’re ensuring that all you test is the public API, but you’re also guaranteeing you don’t forget anything.
tdd  testing  javascript  vue  jest  howto  tutorials  projects 
december 2019 by spaceninja
Tips for Unit Testing Vue Components with Jest - The Startup - Medium
Using Jest to unit test Vue.js components can be tricky. We need a separate Vue Test Utils (@vue/test-utils) scoped package in order to virtually mount our components and use Jest to execute the tests. Because these two libraries work together, it’s important to make sure we don’t get confused about which API calls belong to which library. Along with these libraries, we also need to pay attention to JSDOM (virtual browser environment) specific methods, which comes with Jest. Having to juggle all this may be confusing and can discourage us from writing unit tests.
javascript  vue  testing  jest  tips 
december 2019 by spaceninja
How to visually test VueJS apps using and Applitools [step-by-step tutorial] - Applitools Blog
In my previous blog post, we explored how easy it is to troubleshoot and fix React bugs fast using React JS,, and Applitools. In this article, I’ll walk you through a complete, step-by-step guide of how to visually test a Vue JS app with and Applitools.
javascript  vue  testing  cypress  applitools  howto  tutorials  projects 
december 2019 by spaceninja
Mastering testing with Vue.js by testing a real application and setting up CI/CD
We are going to use a real application, hacker news clone, built by Evan, I simply forked it since I don’t want changes to it breaking this article, here is the forked version. At the time of writing this article, there are no tests in this project, and that’s good for us to learn how to write tests, we are also going to create a CI/CD (mostly CI) pipeline with CircleCI so tests will run automatically for any change in our git repository.
javascript  vue  testing  jest  howto  tutorials  projects  testcafe  ci  circleci 
december 2019 by spaceninja
Building an Animal Adoption Site with Node and Vue - Part 1
Today we're going to build an application that showcases animals that are available for adoption! This will be a two part blog series, so in this portion we'll just learn how to setup our application and get some mock data flowing from the backend to the frontend. Let's get started!
javascript  api  node  vue  howto  tutorials  projects 
december 2019 by spaceninja
Build a Server Side Nuxt.js App With Vuetify, Axios and Vuex part 1
Nuxt.js is a server side rendered (SSR) application with Vue.js. In this video I show you a tutorial on how to use Vue.js with Nuxtjs to create a simple iTunes search engine. We'll use axios, Vuex and Vuetify to make things easier for ourselves. In this video I'll describe how to install Nuxt, how to use plugins and how to run the app.
javascript  vue  nuxt  vuetify  axios  vuex  api  howto  tutorials  projects 
december 2019 by spaceninja
Creating A Spotify-Powered App Using Nuxt.js
With Spotify, machine learning and social media has gone musical. With their app, your friends can check out what you’re jamming to. What if the rest of the Internet could experience your algo-rhythm, too? In this tutorial, you’ll learn how to compose your own application to share what you’re listening to on Spotify using Vue.js and Nuxt.
javascript  vue  nuxt  howto  tutorials  projects  spotify  api 
december 2019 by spaceninja
Understanding client side routing by implementing a router in Vanilla JS – Will Taylor Blog
We will start by taking a look at what client side routing is. Next, we will build a simple application with basic client side routing in Vanilla JS. Finally, we will think about the more advanced features that we usually see in client side routing packages, and implement one of them ourselves - parameterised routes.
javascript  vanilla  react  vue  angular  routing  routers  howto  tutorials  buildyourown 
december 2019 by spaceninja
Working With Functional Vue.js Components
On my journey to find ways to improve the rendering performance of large scale Vue.js applications, I stumble upon functional components as a possible solution from time to time. But so far, I’ve always found one or two reasons why I can’t use them in my application.
javascript  vue  components  functional 
december 2019 by spaceninja
Reusable Functional Vue.js Components with Tailwind CSS
Tailwind is a CSS framework that I never used extensively, but I always found it interesting enough to keep it on my radar and occasionally play around with it. Today we explore how we can use Tailwind CSS with Vue.js.
javascript  vue  functional  components  tailwind  css  atomic  utility 
december 2019 by spaceninja
Setting up Tailwind CSS with Vue.js
In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application. Because Tailwind CSS is a utility-first CSS framework which provides a lot of utility classes out of the box, its file size without any optimizations is pretty massive (350.4kb / 58.8kb gzipped). But luckily, we can use PurgeCSS to improve the final bundle size of our application tremendously.
javascript  vue  tailwind  utility  atomic  css  purgecss 
december 2019 by spaceninja
10 Good Practices for Building Large Vue.js Projects
Here are the top best practices I've developed while working on Vue projects with a large code base. These tips will help you develop more efficient code that is easier to maintain and share.
javascript  vue  nuxt  scale  bestpractices 
december 2019 by spaceninja
Why people got upset with Vue 3
Vue's darkest day? That sounds like a funny article. I open the link and to my surprise, I realize this is no joke. It seems like the Vue community is really pissed with this new feature. People all around Reddit and HackerNews write about Vue getting complex, bad, or even non-developer friendly.
fridayfrontend  javascript  vue  functions  components  drama 
december 2019 by spaceninja
How to Load Third-Party Scripts in Nuxt.js
Loading third party scripts with Nuxt has always been easy when it's needed globally. With the help of vue-meta, handling depending logic before the third party dependency is available became a lot easier now as well.
javascript  vue  third-party 
december 2019 by spaceninja
Scrolling Shadows with Vue.js
Sometimes we find ourselves in a situation where the content of a particular area of our website or web app is too big to fit inside of our layout. In such cases, overflow: auto can come in handy. But usually, this comes with the downside that users with browsers which do not show scrollbars by default (macOS or most mobile devices) might not be aware that it is possible to scroll.
shadows  drop-shadow  scroll  scrollbars  vue  javascript  css 
november 2019 by spaceninja
Enable two-way data binding for form fields saved in a Vuex store
vue  vuex  binding  forms  javascript 
october 2019 by spaceninja
Nuxt + TypeScript + Apollo: a bumpy road
Nuxt, TypeScript, and Apollo. You've probably heard awesome things about all three. So what would be more awesome than using the 3 of them together, right?
javascript  vue  nuxt  apollo  typescript 
october 2019 by spaceninja
Make your Vuex State Flat: State Normalization with Vuex
The second rule is to keep your global state tree flat. This means that you should not have nested entities like article data with the corresponding author information as nested objects in your state. Instead, lists of articles and authors should be separated.
javascript  vue  vuex  state  react  redux 
september 2019 by spaceninja
VuePress: Documentation Made Easy
One of the most overlooked aspects of creating and/or maintaining any software library is good documentation. Luckily for you, a new tool on the market is here to make it easy for you to create great documentation for your projects.
fridayfrontend  vue  vuepress  documentation  styleguide  patternlibrary  designsystem 
september 2019 by spaceninja
How to Reduce Your Vue.JS Bundle Size With Webpack
I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Due to the bundling of such a large number of applications our Vue build for production resulted in multiple warnings about excess size.
vue  javascript  webpack  performance 
august 2019 by spaceninja
When to break up a component into multiple components
I've had a question on my AMA for a while: Best ways/patterns to split app into components. And this is my answer: "When you experience one of the problems above, that's when you break your component into multiple smaller components. NOT BEFORE." Breaking a single component into multiple components is what's called "abstraction." Abstraction is awesome, but every abstraction comes with a cost, and you have to be aware of that cost and the benefits before you take the plunge
fridayfrontend  javascript  react  vue  components  abstraction 
july 2019 by spaceninja
What I Like About Vue
Vue checks most, if not all, the boxes for me. It suits a lot of my sensibilities and preferences and I feel like I can embrace “convention over configuration” without inheriting a lot of technical debt. It feels like a pair of shoes I could see myself buying or a t-shirt that fits my body type. It’s an intangible feeling and hard to explain.
fridayfrontend  javascript  vue  react  frameworks 
july 2019 by spaceninja
A framework author's case against frameworks, by Adrian Holovaty
Adrian cowrote Django, a prominent server-side framework, yet he has come to believe that front-end frameworks are unnecessary for his own projects. Here's his impassioned argument for avoiding JavaScript frameworks on the front end.
frameworks  javascript  fridayfrontend  video  django  react  vue  vanilla 
july 2019 by spaceninja
Core vanilla JS concepts to learn if you eventually want to learn a framework like React, Vue, or Angular
The other day, a reader asked me, "What core vanilla JS concepts should you learn if you eventually want to learn React?" As someone who doesn’t personally enjoy or use frameworks, I decided to ask my students who had made that transition what they found most helpful. Here’s what they told me.
fridayfrontend  cssbasics  javascript  react  vue  frameworks  vanilla 
july 2019 by spaceninja
Using Slots In Vue.js
Slots are a powerful tool for creating reusable components in Vue.js, though they aren’t the simplest feature to understand. Let’s take a look at how to use slots and some examples of how they can be used in your Vue applications.
vue  javascript  slots  components 
july 2019 by spaceninja
Vue without View - An Introduction to Renderless Components
Components get harder to maintain as they grow larger. Sometimes it is not obvious how to split a bloated component into smaller components. The code gets more noisy and they become hard to reason about.

In this post, I am going to introduce the idea of "renderless components" which could potentially help you improve your components.
vue  javascript  intervals  components  renderless 
july 2019 by spaceninja
The 10 Component Commandments
Creating components that are used by a lot of people is hard. You have to think pretty carefully about what props you should accept, if those props are supposed to be part of a public API. This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.
fridayfrontend  javascript  api  components  react  vue 
june 2019 by spaceninja
How to Increase Your Page Size by 1,500% with webpack and Vue
You know, there are a lot of articles out there telling you how to make your page smaller: optimize your images, remove extraneous CSS rules, re-write the whole thing in Dreamweaver using framesets. What we don’t have are enough articles showing you how to increase your page size. In fact, the only article I could find was this one from the Geek Squad which ended up being about making the font size bigger. This is a good start, but I think we can do better.
fridayfrontend  webpack  bundlers  vue  bulma  css  sass  performance 
june 2019 by spaceninja
Use Fragments to Avoid Obsolete GraphQL Fields in Vue.js Applications
The more I use GraphQl, the more I ask myself the following: How can I avoid GraphQL queries which query a bunch of fields that were once needed but are no longer used because the code has changed and the fields are now obsolete?
graphql  vue  fragments 
june 2019 by spaceninja
Handling File Uploads in GraphQL and Vue
In this tutorial, I'll be showing you how to hand file uploads in GraphQL by building a fullstack app. The tutorial will be divided into two main sections: building the GraphQL API and the frontend app. The GraphQL API will be built using Apollo Server and the frontend app will be built with Vue.js and Vue Apollo.
graphql  vue  javascript  uploads  cloudinary  photos 
june 2019 by spaceninja
React for Vue developers
For the past three years, I’ve been using both React and Vue in different projects, ranging from smaller websites to large scale apps. This post is a succinct rundown of most Vue features, and how I would write them with React in 2019 with hooks.
fridayfrontend  javascript  react  vue 
june 2019 by spaceninja
7 Secret Patterns Vue Consultants Don’t Want You to Know, by Chris Fritz
There’s an astounding amount of power packed away in Vue, despite its small size. The official guide provides a gentle learning path and the API is thorough, but new features are added all the time and it’s easy to miss small, but significant updates that could change the way you write Vue apps. Chris shares some of these features, a few undocumented APIs, and other patterns that clients and community members are consistently amazed by. It’ll be hard not to open your laptop and start coding once you see these.
fridayfrontend  video  javascript  vue  productivity 
may 2019 by spaceninja
Getting Started with Vue - An Overview and Walkthrough Tutorial by Tania Rascia
Learn what Vue is, how to set up a Vue project via static HTML or Vue Cli, and how to make a complete CRUD app in Vue. You'll learn about Vue components, data, methods, computed methods, lifecycles, conditionals, events, form handling, and building. If you go through and do this whole tutorial, you should feel pretty good starting to build your own apps from scratch in Vue.
fridayfrontend  javascript  vue  tutorials  crud 
may 2019 by spaceninja
Structuring Vuex Modules for Relationships, Speed and Flexibility
You can use Vuex modules in many ways, primarily representing single or multiple records. When using the latter it can add a lot of complexity, I wanted a solution that fit the following requirements:

Easy lookup by ID
Relatable to other records (only when required)
Responsive to changes
I benchmarked a bunch of solutions but I found them pretty slow, so I used a more vanilla approach. This article assumes you are able to transpile code with Webpack for multiple browser support.
vue  vuex  javascript 
may 2019 by spaceninja
Vue.js: Using Vue Router Page Transitions
In this article, I will show you how to convert your awesome Vue.js application into a super super awesome Vue.js application. You’re thinking how this can be done? vue-page-transition is the keyword!
vue  transitions  animation  javascript 
may 2019 by spaceninja
Building an SVG Animation from Start to Finish, by Sarah Drasner
In this talk, Sarah will start with only an Illustrator document and by the end, make it move! It's not clear what exactly will move and how- this is something she and the audience will discover together. The talk will be completely unique- the plan will not be set in stone. She'll live-code (warts and all) and you'll see her process as she'll animate an SVG in the time allotted. She'll optimize, work with styles, and create an animation with javascript, and even ask for audience participation at times to decide what happens next. Come watch for a one-time show
fridayfrontend  video  svg  animation  vue  javascript 
may 2019 by spaceninja
A Vue tip per week, right in your inbox. Learn tips about the Vue ecosystem in a concise format, perfect for busy devs. Stay up-to-date with the minimum effort.
vue  newsletters  tips  javascript 
may 2019 by spaceninja
Making the Move from jQuery to Vue
This guide is more for people who may be coming from years of jQuery experience and want to see how things can be done with Vue. With that in mind, I'm going to focus on what I consider "core" jQuery use cases. I won't cover every single possible feature but instead take a "I often did [X] with jQuery" approach that may be more relatable to people considering learning Vue. (As an aside, also note that how I write my examples are simply one way of performing a task. Both jQuery and Vue give provide multiple ways to accomplish the same goal and that's a great thing!)
fridayfrontend  javascript  jquery  vue 
may 2019 by spaceninja
How I failed the <a>
So I now have a simple rule of thumb: if there's an onClick, there's got to be an anchor around the component.
accessibility  javascript  react  vue  frameworks 
april 2019 by spaceninja
Rethinking Reactivity by Rich Harris
Modern JavaScript frameworks are all about reactivity. Change your application's state, and the view updates automatically. But there's a catch — tracking state changes at runtime adds overhead that eats into your bundle size and performance budgets. In this talk, we'll discover an alternative approach: moving reactivity into the language itself. Your apps have never been smaller or faster than they're about to become.
fridayfrontend  video  javascript  frameworks  react  vue  svelte  spreadsheets  compilers 
april 2019 by spaceninja
Hands-on Vue.js for Beginners (Part 1)
Learning a new framework can be a very daunting process for any developer, specially for one that is still learning the base language (in this case JavaScript). This is why I have decided to create this series in which I will attempt to make the learning of Vue.js as easy and digestible as possible 🙂
fridayfrontend  javascript  vue  learning  training  cssbasics 
march 2019 by spaceninja
How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0
Finally, we’re done. Easy peasy lemon squeezy! After Vue.js team came up with the CLI version 3, it has become super-easy to build your own library of components for reuse. Give this article a clap if you found it helpful!
vue  javascript  npm  components  patternlibrary  vue-cli 
march 2019 by spaceninja
Sliding In And Out Of Vue.js
One of the key advantages of Vue.js is that it plays nicely with other code: it is easy to embed progressively into other applications, but it is also easy to wrap up non-Vue code into Vue. This article explores this second advantage, covering three distinct types of third-party JavaScript and ways to embed each of them in Vue.
fridayfrontend  javascript  vue 
march 2019 by spaceninja
26 Time Saving Tips for Vue
When writing Vue applications, we waste our time by doing things the wrong way, when we could have been doing it the right way from the start. But it’s hard to know what things we should be learning. That’s why I put together this list of 26 articles that will help you save time, by teaching you how to avoid some common time-wasters.
javascript  vue 
february 2019 by spaceninja
« earlier      
per page:    204080120160

related tags

abstraction  accessibility  ajax  angular  animation  api  apollo  applitools  architecture  aria  async  atomic  await  axios  bestpractices  binding  boolean  buildyourown  bulma  bundlers  caching  ci  circleci  cloudinary  codesplitting  community  compilers  components  crud  css  css-in-js  cssbasics  customproperties  cypress  demos  designsystem  django  documentation  drama  drop-shadow  error  errors  es6  eslint  files  focus  forms  fragments  frameworks  fridayfrontend  frontend  functional  functions  github  graphql  guide  howto  intervals  isomorphic  jamstack  javascript  jest  jquery  lazyload  learning  loaders  loading  newsletters  node  npm  nuxt  offline  organization  pagination  patternlibrary  performance  photos  postcss  prettier  productivity  progress  progressive  projects  props  purgecss  pwa  radial  react  recap  redux  renderless  rest  routers  routing  sass  scale  scoped  scroll  scrollbars  selectors  serviceworkers  shadows  slots  spotify  spreadsheets  ssr  state  storybook  structure  styleguide  svelte  svg  tailwind  tdd  testcafe  testing  third-party  tips  training  transitions  tutorials  typescript  uploads  utility  v-model  validation  vanilla  variables  video  vue  vue-cli  vuelidate  vuepress  vuetify  vuex  webassembly  webpack  wordpress  yarn 

Copy this bookmark: