Vue + TypeScript: A Match Made in Your Code Editor

Vue is so hot right now and I’ve been thinking of doing a serious project with it since quite a while, so when the opportunity popped up, I hopped in. But there was a little problem — one of the requirements of the project was to write it in TypeScript. At first, I was super stressed about how I was going to ever get started on this combo, but vue-cli made it so easy.
I’d be lying if I said …
The post Vue + TypeScript: A Match Made in Your Code Editor appeared first on CSS-Tricks.

Link: https://css-tricks.com/vue-typescript-a-match-made-in-your-code-editor/

What Are Web Developers Favorite Front-End Tools? Packt’s Report Reveals All

Are you confused about which front-end tools you should learn, and which ones you should work with? Do you want to know what other web developers are using and what they think is important when it comes to front-end frameworks and libraries?
Fear not! We have the answer to all these questions. In our annual skill-up survey, we spoke to over 8,000 developers and tech pros and asked them about the front-end tools, libraries, and frameworks they regularly use.

Link: https://dzone.com/articles/what-are-web-developers-favorite-front-end-tools-p?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Building a RSS Viewer With Vue: Part 2

Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an “initial" version. I took some time to work on a few updates, and while I won’t dare call this a "perfect" version, I do think I’ve made …
The post Building a RSS Viewer With Vue: Part 2 appeared first on CSS-Tricks.

Link: https://css-tricks.com/building-a-rss-viewer-with-vue-part-2/

Building a RSS Viewer With Vue: Part 1

As I explore, learn, and most importantly, play with Vue.js, I’ve been building different types of apps as a way to get practice with and improve my use of it. A few weeks ago, I was reading about the shut down of Digg’s RSS Reader and while great alternatives exist, I thought it would be fun to build my own with Vue. In this article, I’m going to explain how I put it together and also what’s wrong with …
The post Building a RSS Viewer With Vue: Part 1 appeared first on CSS-Tricks.

Link: https://css-tricks.com/building-a-rss-viewer-with-vue-part-1/

What does the ‘h’ stand for in Vue’s render method?

If you’ve been working with Vue for a while, you may have come across this way of rendering your app — this is the default in the latest version of the CLI, in main.js:
new Vue({
render: h => h(App)
}).$mount(‘#app’)
Or, if you’re using a render function, possibly to take advantage of JSX:
Vue.component(‘jsx-example’, {
render (h) {
return

Link: https://css-tricks.com/what-does-the-h-stand-for-in-vues-render-method/

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:

Brain 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.
Me, my guess is we’ll end up with a split down the middle as a best practice someday.
When we …
The post What’s wrong with CSS-in-JS? appeared first on CSS-Tricks.

Link: http://bradfrost.com/blog/link/whats-wrong-with-css-in-js/

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 …
The post Native-Like Animations for Page Transitions on the Web appeared first on CSS-Tricks.

Link: https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

VuePress Static Site Generator

VuePress is a new tool from Vue creator Even 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 …
The post VuePress Static Site Generator appeared first on CSS-Tricks.

Link: https://css-tricks.com/vuepress-static-site-generator/

List Rendering and Vue’s v-for Directive

List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user. In almost every web application we use, we can see lists of content in numerous areas of the app.
In this article we’ll gather an understanding of Vue’s v-for directive in generating dynamic lists, as well as go through some examples of why …
The post List Rendering and Vue’s v-for Directive appeared first on CSS-Tricks.

Link: https://css-tricks.com/list-rendering-and-vues-v-for-directive/