Select Page

Category: vue

How to Increase Your Page Size by 1,500% with webpack and Vue

Disclaimer: This article is mostly satire. I do not think that I am better than you because I once wrote some TypeScript nor do I think that it’s a good thing for us to make web pages bigger. Feel free to misrepresent these views to maximize clicks. 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. Look,  Walmart just reduced their page size by some numbers, give or take. JavaScript housekeeping: 🗑️ Remove old &...

Read More

A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid

This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when I web searched around for real-life, non-tutorial applications of them. I’m hoping this post will fill that void and provide a helpful and practical use case on using Vue render functions. I’ve always found render functions to be a little out-of-character for Vue. While the rest of...

Read More

Storing and Using the Last Known Route in Vue

There are situations where keeping a reference to the last route a user visited can come in handy. For example, let’s say we’re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later. We’re going to cover how to store the last known route and then fetch it when we need it. We’ll be working in...

Read More

Swipeable card stack using Vue.js and interact.js

I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: “Wordguru”) was to create a card game that anyone can play with their friends. You can see the outcome here. One element of the development process was to create an interactive card stack. The card stack had a set of requirements, including: It should contain a few cards from the collection. The first card should be interactive. The user should be able to swipe the card in different directions that indicate an intent to accept, reject or skip...

Read More

Building a Donut Chart with Vue and SVG

Mmm… forbidden donut.” – Homer Simpson I recently needed to make a donut chart for a reporting dashboard at work. The mock-up that I got looked something like this: My chart had a few basic requirements. It needed to: Dynamically calculate its segments based on an arbitrary set of values Have labels Scale well across all screen sizes and devices Be cross-browser compatible back to Internet Explorer 11 Be accessible Be reusable across my work’s Vue.js front end I also wanted something that I could animate later if I needed to. All of this sounded like a job for...

Read More

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component). There are three types of slots: default / unnamed slots: used when you have a single slot in a...

Read More

What’s wrong with CSS-in-JS?

Brad Frost thinks it’s: Lack of portability Context Switching Flushing best practices down the toilet In the spirit of good-ol-fashioned blog-and-response, here’s: Brian Muenzenmeyer’s response Micah Godbolt’s response I’d like to point out that “CSS-in-JS” is an umbrella term, and that there are lots of takes on actual implementations of this. It’s possible to like one approach and not another. My guess is we’ll end up with a split down the middle as a best practice someday. When we write styles, we will always make a choice. Is this a global style? Am I, on purpose, leaking this style across the entire site? Or, am I writing CSS that is specific to this component? CSS will be split in half between these two. Component-specific styles will be scoped and bundled with the component and used as needed. Direct Link to Article — Permalink The post What’s wrong with CSS-in-JS? appeared first on CSS-Tricks....

Read More

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: Demo Site GitHub Repo We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in. Today we’ll be discussing how to create them with Vue and Nuxt. There are a lot of moving parts in page transitions and animations (lol I kill me), but don’t worry! Anything we don’t have time to cover in the article, we’ll link off to with other resources. Why? The web has come under critique in recent years for appearing “dated” in comparison to native iOS and Android app experiences. Transitioning between two states can reduce cognitive load for your user, as when someone is scanning a page, they have to create a mental map of everything that’s contained on it. When we move from page to page, the user has to remap that entire space. If an element is...

Read More

VuePress Static Site Generator

VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line. We talk a lot about Vue around here, from a five-part series on getting started with it to a detailed implementation of a serverless checkout cart But, like anything new, even the basics of getting started can feel overwhelming and complex. A tool like VuePress can really lower the barrier to entry for many who (like me) are still wrapping our heads around the basics and tinkering with the concepts. There are alternatives, of course! For example, Nuxt is already primed for this sort of thing and also makes it easy to spin up a Vue project. Sarah wrote up a nice intro to Nuxt and it’s worth checking out, particularly if your project is a progressive web application. If you’re more into React but love the idea of static site generating, there is Gatsby. Direct Link to Article — Permalink The post VuePress Static Site Generator appeared first on CSS-Tricks....

Read More
  • 1
  • 2
www.000webhost.com