Archive by Author

Create your own Serverless API

If you don’t already know of it, Todd Motto has this great list of public APIs. It’s awesome if you’re trying out a new framework or new layout pattern and want to hit the ground running without fussing with the content.

But what if you want or need to make your own API? Serverless can help create a nice one for data you’d like to expose for use.

Serverless really shines for this use case, and hopefully this post …

The post Create your own Serverless API appeared first on CSS-Tricks.

Balancing Time

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I’ve made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not.


I work on many personal projects concurrently. I love doing this, …

The post Balancing Time appeared first on CSS-Tricks.

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this:

const nums = [1, 2, 3]
let value = 0

for (let i = 0; i < nums.length; i++) {
value += nums[i]
}

…to this:

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

They are functionally equivalent and they both sum up all the numbers in the array, but there is …

The post Understanding the Almighty Reducer appeared first on CSS-Tricks.

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another.

It’s been an item on my bucket list to create my own theme. I was coding very late the one night, well into the small hours of the morning. Everyone in my house was sleeping and so, as …

The post Creating a VS Code Theme appeared first on CSS-Tricks.

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 <div id="foo">bar</div>
}
})

You may be wondering, what does that h do? What does it stand for? The …

The post What does the ‘h’ stand for in Vue’s render method? appeared first on CSS-Tricks.

Build Nodejs APIs Using Serverless

Simona Cotin did a great talk at Microsoft Build about Serverless technologies, called “Build Node APIs Using Serverless.” In this talk, she addresses pretty much every major gotcha that you might run into while creating Serverless infrastructure for JavaScript applications. Some of the topics included, but are not limited to:

  • CORS
  • Local Debugging with VS Code
  • Installing npm packages
  • Configuring REST-like URLs
  • Saving environment variables

All in all, it’s one of the best talks on Serverless I’ve seen, and if …

The post Build Nodejs APIs Using Serverless appeared first on CSS-Tricks.

Free Introduction to Web Development Workshop

Brian Holt and the Frontend Masters team are putting on a free workshop today and tomorrow that is live-streamed for anyone that’s interested. This is super cool because, despite the fact that there is a mountain of articles about web development out there, there are only few that start with the basics in a manner that’s easy for beginners to follow. All of the materials are open source and available here as well.

I’ve been a fan of Brian’s work …

The post Free Introduction to Web Development Workshop appeared first on CSS-Tricks.

Free Introduction to Web Development Workshop

Brian Holt and the Frontend Masters team are putting on a free workshop today and tomorrow that is live-streamed for anyone that’s interested. This is super cool because, despite the fact that there is a mountain of articles about web development out there, there are only few that start with the basics in a manner that’s easy for beginners to follow. All of the materials are open source and available here as well.

I’ve been a fan of Brian’s work …

The post Free Introduction to Web Development Workshop appeared first on CSS-Tricks.

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 distillation of these …

The post Native-Like Animations for Page Transitions on the Web appeared first on CSS-Tricks.

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 distillation of these …

The post Native-Like Animations for Page Transitions on the Web appeared first on CSS-Tricks.