I just did this the other day so I figured I’d blog it up. There is a thing called Git Large File Storage (Git LFS). Here’s the entire point of it: it keeps large files out of your repo directly. Say you have 500MB of images on your site and they kinda need to be in the repo so you can work with it locally. But that sucks because someone cloning the repo needs to download a ton of data. Git LFS is the answer.
Netlify has a product on top of Git LFS called Large Media. Here’s the entire point of it: In addition to making it all easier to set up and providing a place to put those large files, once you have your files in there, you can URL query param based resizing on them, which is very useful. I’m all about letting computers do my image sizing for me.
You should probably just read the docs if you’re getting started with this. But I ran into a few snags so I’m jotting them down here in case this ends up useful.
You gotta install stuff
I’m on a Mac, so these are the things I did. You’ll need:
Git LFS itself: brew install git-lfs
Netlify CLI: npm install netlify-cli -g
Netlify Large Media add-on for the CLI: netlify plugins:install netlify-lm-plugin and then netlify lm:install
“Link” the site
You literally have to auth on Netlify and that connects Netlify CLI to the site you’re working on.
netlify link
It will create a .netlify/state.json file in your project like this:
{
"siteId": "xxx"
}
Run setup
netlify lm:setup
This creates another file in your project at .lsfconfig:
You’ll need to run more terminal commands to tell Netlify Large Media exactly which images should be on Git LFS. Say you have a bunch of PNGs and JPGs, you could run:
git lfs track "*.jpg" "*.png"
This was a minor gotcha for me. My project had mostly .jpeg files and I got confused why this wasn’t picking them up. Notice the slightly different file extension (ughadgk).
This will make yet another file on your project called .gitattributes. In my case:
This time, when you push, all the images will upload to the Netlify Large Media storage service. It might be an extra-slow seeming push depending on how much you’re uploading.
My main gotcha was at this point. This last push would just spin and spin for me and my Git client and eventually fail. Turns out I needed to install the netlify-credential-helper. It worked fine after I did that.
And for the record, it’s not just images that can be handled this way, it’s any large file. I believe they are called “binary” files and are what Git isn’t particularly good at handling.
Check out your repo, the images are just pointers now
Git repo where a JPG file isn’t actually an image, but a small text pointer.
And the best part
To resize the image on-the-fly to the size I want, I can do it through URL params:
<img
src="slides/Oops.003.jpeg?nf_resize=fit&w=1000"
alt="Screenshots of CSS-Tricks and CodePen homepages"
/>
A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn’t have to include all three. What defines JAMstack is that it’s served without web servers. If you consider the history of computing, this type of abstraction isn’t unnatural; rather it’s the inevitable progression this industry has been moving towards.
So, if JAMstack tends to be static by definition, it can’t have dynamic functionality, server-side events, or use a JavaScript framework, right? Thankfully, not so. In this tutorial, we’ll set up a JAMstack e-commerce app and add some serverless functionality with Netlify Functions (which abstract AWS Lambda, and are super dope in my opinion).
I’ll show more directly how the Nuxt/Vue part was set up in a follow-up post, but for now we’re going to focus on the Stripe serverless function. I’ll show you how I set this one up, and we’ll even talk about how to connect to other static site generators such as Gatsby.
This site and repo should get you started if you’d like to set something like this up yourself:
The very first step is to set up our app. This one is built with Nuxt to create a Vue app, but you can replace these commands with your tech stack of choice:
I am using yarn, hub (which allows me to create repos from the command line) and Nuxt. You may need to install these tools locally or globally before proceeding.
With these few commands, following the prompts, we can set up an entirely new Nuxt project as well as the repo.
If we log into Netlify and authenticate, it will ask us to pick a repo:
I’ll use yarn generate to create the project. With that, I can add in the site settings for Nuxt in the dist directory and hit feploy! That’s all it takes to set up CI/CD and deploy the site! Now every time I push to the master branch, not only will I deploy, but I’ll be given a unique link for that particular deploy as well. So awesome.
A basic serverless function with Netlify
So here’s the exciting part, because the setup for this kind of functionality is so quick! If you’re unfamiliar with Serverless, you can think of it like the same JavaScript functions you know and love, but executed on the server. Serverless functions are event-driven logic and their pricing is extremely low (not just on Netlify, but industry-wide) and scales with your usage. And yes, we have to add the qualifier here: serverless still uses servers, but babysitting them is no longer your job. Let’s get started.
Our very basic function looks like this. I stored mine in a folder named functions, and just called it index.js. You can truly call the folder and function what you want.
We’ll also need to create a netlify.toml file at the root of the project and let it know which directory to find the function in, which in this case, is “functions.”
// netlify.toml
[build]
functions = "functions"
If we push to master and go into the dashboard, you can see it pick up the function!
If you look at the endpoint listed above it’s stored here: https://ecommerce-netlify.netlify.com/.netlify/functions/index
Really, for any site you give it, the URL will follow this pattern: https://.netlify/functions/
When we hit that endpoint, it provides us with the message we passed in, as well as all the event data we logged as well:
I love how few steps that is! This small bit of code gives us infinite power and capabilities for rich, dynamic functionality on our sites.
Hook up Stripe
Pairing with Stripe is extremely fun because it’s easy to use, sophisticated, has great docs, and works well with serverless functions. I have other tutorials where I used Stripe because I enjoy using their service so much.
Here’s a bird’s eye view of the app we’ll be building:
First we’ll go to the Stripe dashboard and get our keys. For anyone totally scandalized right now, it’s OK, these are testing keys. You can use them, too, but you’ll learn more if you set them up on your own. (It’s two clicks and I promise it’s not hard to follow along from here.)
We’ll install a package called dotenv which will help us store our key and test it locally. Then, we’ll store our Stripe secret key to a Stripe variable. (You can call it anything, but here I’ve called it STRIPE_SECRET_KEY, and that’s pretty much industry standard.)
In the Netlify dashboard, we’ll go to “Build & deploy,” then “Environment” to add in Environment variables, where the STRIPE_SECRET_KEY is key, and the value will be the key that starts with sk.
We’ll also add in some headers so we don’t run into CORS issues. We’ll use these headers throughout the function we’re going to build.
So, now we’ll create the functionality for talking to Stripe. We’ll make sure we’ll handle the cases that it’s not the HTTP method we’re expecting, and also that we’re getting the information we expect.
You can already see here, what data we’re going to be needing to send to stripe by what we check for. We’ll need the token, the total amount, and an idempotency key.
If you’re unfamiliar with idempotency keys, they are unique values that are generated by a client and sent to an API along with a request in case the connection is disrupted. If the server receives a call that it realizes is a duplicate, it ignores the request and responds with a successful status code. Oh, and it’s an impossible word to pronounce.
Now, we’ll kick off the Stripe payment processing! We’ll create a Stripe customer using the email and token, do a little logging, and then create the Stripe charge. We’ll specify the currency, amount, email, customer ID, and give a description while we’re at it. Finally, we’ll provide the idempotency key (pronounced eye-dem-po-ten-see), and log that it was successful.
(While it’s not shown here, we’ll also do some error handling.)
If we look back at our application, you can see we have pages and components that live inside the pages. The Vuex store is like the brain of our application. It will hold the state of the app, and that’s what will communicate with Stripe. However, we still need to communicate with our user via the client. We’ll collect the credit card data in a component called AppCard.vue that will live on the cart page.
First, we’ll install a package called vue-stripe-elements-plus, that gives us some Stripe form elements that allow us to collect credit card data, and even sets us up with a pay method that allows us to create tokens for stripe payment processing. We’ll also add a library called uuid that will allow us to generate unique keys, which we’ll use for the idempotency key.
yarn add vue-stripe-elements-plus uuid
The default setup they give us to work with vue-stripe-elements-plus looks like this:
<template>
<div id='app'>
<h1>Please give us your payment details:</h1>
<card class='stripe-card'
:class='{ complete }'
stripe='pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'
:options='stripeOptions'
@change='complete = $event.complete'
/>
<button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card</button>
</div>
</template>
<script>
import { stripeKey, stripeOptions } from './stripeConfig.json'
import { Card, createToken } from 'vue-stripe-elements-plus'
export default {
data () {
return {
complete: false,
stripeOptions: {
// see https://stripe.com/docs/stripe.js#element-options for details
}
}
},
components: { Card },
methods: {
pay () {
// createToken returns a Promise which resolves in a result object with
// either a token or an error key.
// See https://stripe.com/docs/api#tokens for the token object.
// See https://stripe.com/docs/api#errors for the error object.
// More general https://stripe.com/docs/stripe.js#stripe-create-token.
createToken().then(data => console.log(data.token))
}
}
}
</script>
So here’s what we’re going to do. We’re going to update the form to store the customer email, and update the pay method to send that and the token or error key to the Vuex store. We’ll dispatch an action to do so.
try {
await axios
.post(
"https://ecommerce-netlify.netlify.com/.netlify/functions/index",
{
stripeEmail: payload.stripeEmail,
stripeAmt: Math.floor(getters.cartTotal * 100), //it expects the price in cents
stripeToken: "tok_visa", //testing token, later we would use payload.data.token
stripeIdempotency: uuidv1() //we use this library to create a unique id
},
{
headers: {
"Content-Type": "application/json"
}
}
)
.then(res => {
if (res.status === 200) {
commit("updateCartUI", "success")
setTimeout(() => commit("clearCart"), 3000)
…
We're going to update the UI state to loading while we're processing. Then we'll use axios to post to our function endpoint (the URL you saw earlier in the post when we set up our function). We'll send over the email, the amt, the token and the unique key that we built the function to expect.
Then if it was successful, we'll update the UI state to reflect that.
One last note I'll give is that I store the UI state in a string, rather than a boolean. I usually start it with something like "idle" and, in this case, I'll also have "loading," "success," and "failure." I don't use boolean states because I've rarely encountered a situation where UI state only has two states. When you work with booleans for this purpose, you tend to need to break it out into more and more states, and checking for all of them can get increasingly complicated.
As it stands, I can reflect changes in the UI on the cart page with legible conditionals, like this:
<section v-if="cartUIStatus === 'idle'">
<app-cart-display />
</section>
<section v-else-if="cartUIStatus === 'loading'" class="loader">
<app-loader />
</section>
<section v-else-if="cartUIStatus === 'success'" class="success">
<h2>Success!</h2>
<p>Thank you for your purchase. You'll be receiving your items in 4 business days.</p>
<p>Forgot something?</p>
<button class="pay-with-stripe">
<nuxt-link exact to="/">Back to Home</nuxt-link>
</button>
</section>
<section v-else-if="cartUIStatus === 'failure'">
<p>Oops, something went wrong. Redirecting you to your cart to try again.</p>
</section>
And there you have it! We're all set up and running to accept payments with stripe on a Nuxt, Vue site with a Netlify function, and it wasn't even that complicated to set up!
Gatsby Applications
We used Nuxt in this instance but if you wanted to set up the same kind of functionality with something that uses React such as Gatsby, there's a plugin for that. (Everything is plugin in Gatsby. ??)
You would install it with this command:
yarn add gatsby-plugin-netlify-functions
...and add the plugin to your application like this:
The serverless function used in this demo is straight up JavaScript, so it's also portable to React applications. There's a plugin to add the Stripe script to your Gatsby app (again, everything is a plugin). Fair warning: this adds the script to every page on the site. To collect the credit card information on the client, you would use React Stripe Elements, which is similar to the Vue one we used above.
Just make sure that you're collecting from the client and passing all the information the function is expecting:
With such a low barrier to entry, you can see how you can make really dynamic experiences with JAMstack applications. It's amazing how much you can accomplish without any maintenance costs from servers. Stripe and Netlify Functions make setting up payment processing in a static application such a smooth developer experience!
This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.
It still behaves essentially exactly the same: click, play video in place.
The trick is rooted in srcdoc, a feature of where you can put the entire contents of an HTML document in the attribute. It’s like inline styling but an inline-entire-documenting sort of thing. I’ve used it in the past when I embedded MailChimp-created newsletters on this site. I’d save the email into the database as a complete HTML document, retrieve it as needed, and chuck it into an with srcdoc.
Arthur credits Remy for a tweak to get it working in IE 11 and Adrian for some accessibility tweaks.
I also agree with Hugh in the comments of that post. Now that native lazy loading has dropped in Chrome (see our coverage) we might as well slap loading="lazy" on there too, as that will mean no requests at all if it renders out of viewport.
In this tutorial series, we will build a web-based multiplayer virtual reality game in which players will need to collaborate to solve a puzzle. We will use A-Frame for VR modeling, MirrorVR for cross-device real-time synchronization, and A-Frame Low Poly for low-poly aesthetics. At the end of this tutorial, you will have a fully functioning demo online that anyone can play.
Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Only player 2 can control the dominant orbs while only player 1 can control non-dominant orbs. This forces both players to collaborate to solve the puzzle. In this first part of the tutorial, we will build the environment and add the design elements for our VR game.
The seven steps in this tutorial are grouped into three sections:
The first three instructions below are excerpted from my previous article. You will start by setting up a website with a single static HTML page. This allows you to code from your desktop and automatically deploy to the web. The deployed website can then be loaded on your mobile phone and placed inside a VR headset. Alternatively, the deployed website can be loaded by a standalone VR headset.
Get started by navigating to glitch.com. Then, do the following:
Click on “New Project” in the top right,
Click on “hello-webpage” in the drop-down,
Next, click on index.html in the left sidebar. We will refer to this as your “editor”.
You should now see the following Glitch screen with a default HTML file.
As with the linked tutorial above, start by deleting all existing code in the current index.html file. Then, type in the following for a basic webVR project, using A-Frame VR. This creates an empty scene by using A-Frame’s default lighting and camera.
Raise the camera to standing height. Per A-Frame VR recommendations (Github issue), wrap the camera with a new entity and move the parent entity instead of the camera directly. Between your a-scene tags on lines 8 and 9, add the following.
This concludes setup. Next, we will customize lighting for a more mysterious atmosphere.
2. Add Atmosphere
In this step, we will set up the fog and custom lighting.
A preview of a simple scene with a dark mood (Large preview)
Add a fog, which will obscure objects far away for us. Modify the a-scene tag on line 8. Here, we will add a dark fog that quickly obscures the edges of the ground, giving the effect of a distant horizon.
The dark gray #111 fades in linearly from a distance of 10 to a distance of 15. All objects more than 15 units away are completely obscured, and all objects fewer than 10 units away are completely visible. Any object in between is partially obscured.
Add one ambient light to lighten in-game objects and one-directional light to accentuate reflective surfaces you will add later. Place this directly after the a-scene tag you modified in the previous instruction.
Directly beneath the lights in the previous instruction, add a dark sky. Notice the dark gray #111 matches that of the distant fog.
<a-sky color="#111"></a-sky>
This concludes basic modifications to the mood and more broadly, scene setup. Check that your code matches the source code for Step 2 on Github, exactly. Next, we will add a low-poly orb and begin customizing the orb’s aesthetics.
Creating The Orbs
3. Create A Low-Poly Orb
In this step, we will create a rotating, reflective orb as pictured below. The orb is composed of two stylized low-poly spheres with a few tricks to suggest reflective material.
Create a carousel, wrapper, and orb container. The carousel will contain multiple orbs, the wrapper will allow us to rotate all orbs around a center axis without rotating each orb individually, and the container will — as the name suggests — contain all orb components.
Inside the orb container, add the orb itself: one sphere is slightly translucent and offset, and the other is completely solid. The two combined mimic reflective surfaces.
Finally, rotate the sphere indefinitely by adding the following a-animation tag immediately after the lp-sphere inside the .orb entity in the last instruction.
Start by adding the white light to illuminate the object from below. We will use a point light. Directly before #orb0 but within #container-orb0, add the following offset point light.
By default, lights do not decay with distance. By adding distance="8", we ensure that the light fully decays with a distance of 8 units, to prevent the point light from illuminating the entire scene. Next, add the golden light. Add the following directly above the last light.
Notice the ring itself does not contain color, as the color will be imbued by the point light in the previous step. Furthermore, the material="side:double" is important as, without it, the ring’s backside would not be rendered; this means the ring would disappear for half of its rotation.
However, the preview with only the above code will not look any different. This is because the ring is currently perpendicular to the screen. Thus, only the ring’s “side” (which has 0 thickness) is visible. Place the following animation in between the a-ring tags in the previous instruction.
Create a variable number of rings with different rotation axes, speeds, and sizes. You can use the following example rings. Any new rings should be placed underneath the last a-ring.
Check that your code matches the source code for step 5 on Github. This concludes decor for the orb. With the orb finished, we will next add interactivity to the orb. In the next step, we will specifically add a visible cursor with a clicking animation when pointed at clickable objects.
Making The Orbs Interactive
6. Add A Cursor
In this step, we will add a white cursor that can trigger clickable objects. The cursor is pictured below.
In your a-camera tag, add the following entity. The fuse attribute allows this entity the ability to trigger click events. The raycaster attribute determines how often and how far to check for clickable objects. The objects attribute accepts a selector to determine which entities are clickable. In this case, all objects of class clickable are clickable.
Next, add cursor animation and an extra ring for aesthetics. Place the following inside the entity cursor object above. This adds animation to the cursor object so that clicks are visible.
Check that your code matches the source code for Step 6 on Github. In your preview, drag your cursor off of them onto the orb to see the click animation in action. This is pictured below.
Note the clickable attribute was added to the orb itself and not the orb container. This is to prevent the rings from becoming clickable objects. This way, the user must click on the spheres that make up the orb itself.
In our final step for this part, you will add animation to control the on and off states for the orb.
7. Add Orb States
In this step, you will animate the orb in and out of an off state on click. This is pictured below.
To start, you will shrink and lower the orb to the ground. Add a-animation tags to the #container-orb0 right after #orb0. Both animations are triggered by a click and share the same easing function ease-elastic for a slight bounce.
To further emphasize the off state, we will remove the golden point light when the orb is off. However, the orb’s lights are placed outside of the orb object. Thus, the click event is not passed to the lights when the orb is clicked. To circumvent this issue, we will use some light Javascript to pass the click event to the light. Place the following animation tag in #light-orb0. The light is triggered by a custom switch event.
Check that your code matches the source code for Step 7 on Github. Finally, pull up your preview, and move the cursor on and off the orb to toggle between off and on states. This is pictured below.
This concludes the orb’s interactivity. The player can now turn orbs on and off at will, with self-explanatory on and off states.
Conclusion
In this tutorial, you built a simple orb with on and off states, which can be toggled by a VR-headset-friendly cursor click. With a number of different lighting techniques and animations, you were able to distinguish between the two states. This concludes the virtual reality design elements for the orbs. In the next part of the tutorial, we will populate the orbs dynamically, add game mechanics, and set up a communication protocol between a pair of players.
I’ve never thought of myself as a “car person”. The last new car I bought (and in fact, now that I think about it, the first new car I ever bought) was the quirky 1998 Ford Contour SVT. Since then we bought a VW station wagon in 2011 and a Honda minivan in 2012 for family transportation duties. That’s it. Not exactly the stuff The Stig’s dreams are made of.
The station wagon made sense for a family of three, but became something of a disappointment because it was purchased before — surprise! — we had twins. As Mark Twain once said:
Sufficient unto the day is one baby. As long as you are in your right mind don’t you ever pray for twins. Twins amount to a permanent riot. And there ain’t any real difference between triplets and an insurrection.
I’m here to tell you that a station wagon doesn’t quite cut it as a permanent riot abatement tool. For that you need a full sized minivan.
I’m with Philip Greenspun. Like black socks and sandals, minivans are actually … kind of awesome? Don’t believe all the SUV propaganda. Minivans are flat out superior vehicle command centers. Swagger wagons, really.
The A-Team drove a van, not a freakin’ SUV. I rest my case.
After 7 years, the station wagon had to go. We initially looked at hybrids because, well, isn’t that required in California at this point? But if you know me at all, you know I’m a boil the sea kinda guy at heart. I figure if you’re going to flirt with partially electric cars, why not put aside these half measures and go all the way?
It’s been 5 years, but from time to time I’d see some electric vehicle on the road and I’d think about that Intergalactic SpaceBoat of Light and Wonder. Maybe it’s time for our family to jump on the electric car trend, too, and just late enough that we can avoid the bleeding edge and end up merely on the … leading edge?
I’ve somehow gone from being a person who basically doesn’t care about cars at all … to being one of those insufferable electric car people who won’t shut up about them. I apologize in advance. If you suddenly feel an overwhelming urge to close this browser tab, I don’t blame you.
I was expecting another car, like the three we bought before. What I got, instead, was a transformation:
Yes, yes, electric cars are clean, but it’s a revelation how clean everything is in an electric. You take for granted how dirty and noisy gas based cars are in daily operation – the engine noise, the exhaust fumes, the scent of oil, the black dust that descends on everything, washing your hands after using the gas station pumps. You don’t fully appreciate how oppressive those little dirty details were until they’re gone.
Electric cars are (almost) completely silent. I guess technically in 2019 electric cars require artificial soundmakers at low speed for safety, and this car has one. But The Oatmeal was right. Electric cars feel like a spacecraft because they move so effortlessly. There’s virtually no delay from action to reaction, near immediate acceleration and deceleration … with almost no sound at all, like you’re in freakin’ space! It’s so immensely satisfying!
Electric cars aren’t just electric, they’re utterly digital to their very core. Gas cars always felt like the classic 1950s Pixar Cars world of grease monkeys and machine shop guys, maybe with a few digital bobbins added here and there as an afterthought. This electric car, on the other hand, is squarely in the post-iPhone world of everyday digital gadgets. It feels more like a giant smartphone than a car. I am a programmer, I’m a digital guy, I love digital stuff. And electric cars are part of my world, rather than the other way around. It feels good.
Electric cars are mechanically much simpler than gasoline cars, which means they are inherently more reliable and cheaper to maintain. An internal combustion engine has hundreds of moving parts, many of which require regular maintenance, fluids, filters, and tune ups. It also has a complex transmission to translate the narrow power band of a gas powered engine. None of this is necessary on an electric vehicle, whose electric motor is basically one moving part with simple 100% direct drive from the motor to the wheels. Simplicity is deeply appealing.
Being able to charge at home overnight is perhaps the most radical transformation of all. Your house is now a “gas station”. Our Kia Niro has a range of about 250 miles on a full battery. With any modern electric car, provided you drive less than 200 miles a day round trip (who even drives this much?), it’s very unlikely you’ll ever need to “fill the tank” anywhere but at home. Ever. It’s so strange to think that in 50 years, gas stations may eventually be as odd to see in public as telephone booths now are. Our charger is, conveniently enough, right next to the driveway since that’s where the power breaker box was. With the level 2 charger installed, it literally looks like a gas pump on the side of the house, except this one “pumps” … electrons.
This electric car is such a great experience. It’s so much better than our gas powered station wagon that I swear, if there was a fully electric minivan (there isn’t) I would literally sell our Honda minivan tomorrow and switch over. Without question. And believe me, I had no plans to sell that vehicle two months ago. The electric car is that much better.
I was expecting “yet another car”, but what I got instead was a new, radical worldview. Driving a car powered by barely controlled liquid fuel detonations used to be normal. But in an world of more and more viable electric vehicles this status quo increasingly starts to feel … deeply unnatural. Electric is so much better of an overall experience, in so many ways, that you begin to wonder, why did we ever do it that way?
Gas cars seem, for lack of a better word, obsolete.
How did this transformation happen, from my perspective, so suddenly? When exactly did electric cars go from “expensive, experimental thing for crazy people” to “By God, I’ll never buy another old fashioned gasoline based car if I can help it”?
I was vaguely aware of the early electric cars. I even remember one coworker circa 2001 who owned a bright neon green Honda Insight. I ignored it all because, like I said, I’m not a car guy. I needed to do the research to understand the history, and I started with the often recommended documentary Who Killed the Electric Car?
This is mostly about the original highly experimental General Motors EV1 from 1996 to 1999. It’s so early the first models had lead-acid batteries! ? There’s a number of conspiracy theories floated in the video, but I think the simple answer to the implied question in the title is straight up price. The battery tech was nowhere near ready, and per the Wikipedia article the estimated actual cost of the car was somewhere between $100,000 and $250,000 though I suspect it was much closer to the latter. It is interesting to note how much the owners (well, leasers) loved their EV1s. Having gone through that same conversion myself, I empathize!
I then watched the sequel, Revenge of the Electric Car. This one is essential, because it covers the dawn of the modern electric car we have today.
This chronicles the creation of three very influential early electric cars — the Nissan Leaf, the Chevy Volt, and of course the Tesla Roadster from 2005 – 2008. The precise moment that Lithium-Ion batteries were in play – that’s when electric cars started to become viable. Every one of these three electric cars was well conceived and made it to market in volume, though not without significant challenges, both internal and external. None of them were perfect electric vehicles by any means: the Roadster was $100k, the Leaf had limited range, and the Volt was still technically a hybrid, albeit only using the gasoline engine to charge the battery.
Ten years later, Tesla has the model 3 at $38,000 and we bought our Kia Niro for about the same price. After national and state tax incentives and rebates, that puts the price at around $30,000. It’s not as cheap as it needs to be … yet. But it’s getting there. And it’s already competitive with gasoline vehicles in 2019.
The trends are clear, even now. And I’m here to tell you that right now, today, I’d buy any modern electric car over a gasoline powered car.
If you too are intrigued by the idea of owning an electric car, you should be. It’s freaking awesome! Bring your skepticism, as always; I highly recommend the above Matt Ferrell explainer video on electric vehicle myths.
As for me, I have seen the future, and it is absolutely, inexorably, and unavoidably … electric. ?
The concept of a paperless office has been around for decades, but most workplaces still use a lot of paper. Why? There are a few reasons, but the biggest one is the fact that human beings resist change.
Doing everything digitally means learning new protocols. We’ve built habits around paper. But those habits cost time and money.
Your paper consumption means lost hours creating documentation. This might include printing, copying, faxing, and scanning. That’s not even the tip of the iceberg with costs, though.
Employees spend hours filing (and locating) paper documents, and companies need space to house file cabinets for those paper copies. Some of those documents contain sensitive information, which means that they can’t just be discarded — you have to pay to store or destroy them. Then there are the costs of paper supplies and, of course, the cost to the environment.
Today we have the technology to create a paperless environment. But to make that leap, you need to understand the benefits so that you can communicate them to your board, shareholders, employees, and other stakeholders.
You need to develop a comprehensive strategy, and the entire company needs to commit to new protocols to make the endeavor a success.
This guide will lay out the benefits and strategies to cut your paper use and improve your bottom line.
What is paperless?
Very few companies are fully paperless. Though many have started to cut down on processes that use paper, there are still areas where paper is useful and even necessary.
No business functions in a bubble. If other businesses and clients work with paper, it can take a long time to phase in a paperless company structure while communicating effectively with outside partners. Certain industries use more paper than others. In cases where paper documentation is the norm, phasing it out might be a lengthy process.
Where did the paperless office idea start? Oddly enough, the idea was well ahead of its time in terms of technology. It was first mentioned in a Business Week article called “The Office of the Future” in 1975.
Back then, the technology to take any actionable steps toward a paperless office didn’t exist. The idea of doing business, both personal and professional, without using any paper was a sort of prediction of the future brought about by the invention of computers. The phrase “paperless office” started as a marketing slogan before it could possibly be a reality.
Modern offices have the means to use far less paper. What’s surprising is that statistically, we’re using far more paper. Not only is our consumption higher as a society, but a lot of it is purely wasteful.
According to the U.S. Environmental Protection Agency, 45 percent of the paper used in an office is discarded within a day. Changing the way we consume information can save both company resources and improve the environment.
If most companies want to go paperless, and the technology is there, why are they increasing their paper usage? The short answer is that it’s easier.
Creating a paperless environment means changing the way your business is run in both big and small ways. A lot of employees and companies simply keep doing things the same way they’ve always been done because it means they don’t have to make an effort to change things.
There is a major payoff, however, in committing to a paperless environment. You’ll spend less on paper and printing supplies. You can get rid of some of the equipment your business currently uses. You can save space and streamline your workflow. You’ll save time creating and organizing files. You’ll increase the security of your documentation and have better access to useful data that can improve your operations.
Creating a paperless environment will mean committing to change the processes you currently use. It might also be important to invest in new technologies to make your switch to digital more organized.
The first step is assessing the way that your company currently works, from top to bottom. You will likely notice a lot of paper that can be eliminated, even if you think your office is leaning toward a paperless office concept. Once you have a full assessment of your paper usage, you can create a strategy to eliminate processes that rely on paper.
What it means to go paperless at home
Many people are familiar with the idea of a paperless work environment. Have you ever thought about working toward a paperless home?
If you have school-aged children, they may need to use paper for their schoolwork, though even some schools are moving away from paper by using laptops in class and having students turn in assignments via online portals.
There are aspects of your home life that may be more difficult to eradicate paper from entirely. Even if you can’t realize a fully paperless home right away, there are steps you can take to minimize paper consumption today.
Benefits to a paperless home:
Less clutter. Unless you’re very organized, it’s likely you have papers stacked up in different places. You may have file cabinets and boxes for old tax returns and any number of paper documents. The odds are good that a lot of your paper documents aren’t necessary.
Less waste. Think of all the bills, flyers, notes from school, and miscellaneous paper that comes into your house. You can cut down on a lot of this by switching to email or digital billing and requesting email or phone communication from schools and other entities your family is involved with.
Better organization. You can add email and phone reminders to your digital calendar and set reminders so that you don’t miss appointments. Keeping important legal papers digitized means that you can store and back them up so that you never have to worry about losing them in the event of a disaster. There are a lot of ways to organize your life through your phone and other devices that save you time and replace the old-fashioned method of handwriting all of your events and to-do lists on a calendar or day planner.
Better for the planet. Even if you haven’t been exceptionally invested in improving the environment, cutting down on paper is an uncomplicated step you can take that will also benefit you personally. If each person in the United States committed to recycle and reduce their paper usage, it would make a marked difference in deforestation and decrease the refuse we add to landfills.
Benefits of a paperless home office:
Cost savings. Paper, ink, and various printing supplies cost money. In fact, ink cartridges and paper are often some of the highest home office expenses. Cutting down on the amount of paper you use will save money.
Less storage. Digitizing your files and using other measures to cut down on paper means that you can free up space that would need to be used for file cabinets and storage. In a home office, space is often limited. This will allow you to create a better workstation and improve the look of your home office.
Clean and organized. Working in a clean, pleasant, organized home office will improve your productivity and mood. Taking steps to diminish the amount of paper you’re using means that you’ll have less clutter to contend with.
Improved efficiency. More time is wasted searching for paper files than creating them. Moving to a digital or cloud format will help you find the documentation you need in a fraction of the time.
What it means to go paperless at work
Paperless offices often use digital means to correspond internally and externally. Memos might be sent via email or through a work portal. Companies might also communicate using mobile devices and cloud-based programs or internal platforms. Employees can bring devices to meetings to take notes digitally. Where signatures are required, many companies opt for fillable PDFs and e-signatures.
Companies that work with external vendors or partners who rely on paper for their business processes might use in-house methods, such as scanning, to digitize this information. When possible, they can recycle these paper copies.
Paperless options also extend to the AP/AR department. Many companies today opt for direct deposit for payroll, as well as electronic billing and payment processing.
Paperless office ideas
Creating a paperless office is a long-term process. New technologies improve workflow and replace outdated models. But it’s not just about having the technology to make the office paperless. Employees may be reticent to embrace new processes. Ensuring that your paperless office strategy takes hold often means taking the time to build a commitment among your staff.
Here are a few ideas to help develop a paperless office strategy that succeeds:
Create an office-wide environmentally-friendly initiative. While the environment isn’t the only reason to go paperless, it’s a good cause that many of your employees can invest in. Assess your current protocols regarding energy savings and recycling and provide educational materials so that employees understand the impact of more responsible paper use. Make your environmentally-friendly initiative a company-wide commitment.
Reduce the use of office equipment, such as copiers and printers. It may not be practical to remove your copier and simply ban paper. There will undoubtedly be some scenarios where a printed copy of a document is necessary. But you can create a schedule for using office equipment or reduce the number of machines in use.
Communicate openly with different generations of employees. Younger generations (Millennials and Generation Y) are more apt to go paperless naturally. They’re accustomed to using a screen to read and disseminate information and are comfortable using devices most of the time. Generation X members may be equally comfortable with technology, depending on their use. But some Generation Xers and baby boomers will be reluctant to completely eliminate paper, fearing that it will interrupt their workflow. Speak with them honestly about their concerns and come up with alternative solutions to help phase out paper.
Eliminate fax machines. If your company is still using a fax machine, it’s time to phase it out. Many companies don’t have fax machines, and it’s easy to switch from faxing to emailing or even texting documents, or faxing through the web.
Develop a recycling protocol. Taking steps toward paperless processes won’t eliminate the amount of paper in your office immediately. Provide recycling containers in the office to make it easy for staff to recycle items that don’t contain private or confidential information.
Get employee buy-in. The success of any strategy depends on compliance. When you start paperless initiatives or add more processes to your overall strategy, make them mandatory for all employees. Some staff members will be reluctant to learn new systems or disrupt their workflow by using a new procedure. Making it mandatory and communicating with employees about their concerns will ensure that it won’t be a good idea that was never seen through.
Methods of going paperless
There are a number of ways to go paperless. Your strategy should take into account your office, your employees, and the processes that drive productivity. In larger organizations, it often helps to get team members involved in the planning stages. Staff understands the day-to-day processes better than outsiders or even high-level executives, so it’s helpful to get their thoughts as you plan.
Start by assessing your workflow as it is. Get a team of employees involved in the assessment. You can also outsource the project to get an unbiased opinion of your current workflow. Don’t forget to use your analytics — pay attention to things that impede customer service and productivity.
Once you understand how your current process works, make a list of all of the ways that you use paper and consider alternatives.
Most people underestimate the sheer volume of paper they use. It’s not only formal work documentation. You also might use day planners or calendars, Post-it notes, and notepads. Going paperless shouldn’t be an instant shift for most companies because it can hinder the way employees work and collaborate with outside entities that may still rely primarily on paper.
The process of becoming paperless
If your organization is more than a few years old and you’ve relied on traditional paper documentation for a great deal of your workflow, the concept of going paperless at the office will look like a huge undertaking.
This is probably the biggest hurdle stopping most companies from committing to better technological options. They wonder what will happen to their records. How will they train staff? How much will the new technology cost? Will their cyber security risks be greater than the costs of paper production?
Change is a scary proposition because you need to make sure that the return on your investment pays off. There are always questions about how a new system will actually work, especially if the current paper processes get the job done. Many companies just don’t want to invest the time and money needed to change a system that works, even if that change promises savings and better efficiency.
When you consider how to go paperless at work, remember that you don’t have to eliminate every paper process immediately. If you try to tackle all of the tasks necessary to go completely paperless at once, it will seem insurmountable.
Going paperless at the office is like any lifestyle change you face — break it down into different tasks and set a schedule to hit those benchmarks. You also don’t have to eliminate all of the paper from your office. Streamlining some processes and cutting down on your paper dependence is a clear step in the right direction that will save money and increase efficiency.
Different ways to go paperless
If you break down the process into steps, it becomes much easier to manage. The challenge gets more manageable with each positive change your organization makes. And going forward, you can choose new digital technologies that don’t involve paper.
Here are a few paperless options:
Online forms. Instead of gathering data with paper forms, use an online form builder, like JotForm. You can customize forms for use with both internal and external audiences.
Cloud storage. This is probably one of the most popular options today because it allows all of your team members to stay on the same page and have the same information in real time. It also means that your digital files are saved outside of your office. You can access them from anywhere in the world as long as you have an internet connection.
Scanners. If you have a great deal of documentation to transfer or if you receive a lot of paper from outside companies, you may want to rent or buy a good scanner. Today there are even apps that allow individual employees to scan paper documents when needed and save them to the appropriate place.
Use devices for meetings. Encourage employees to use laptops, tablets, and mobile phones for meetings and other situations where they need to take notes. You can also switch from paper handouts to digital files emailed to each team member in advance.
Encourage the use of note-taking apps. Most companies go through a great deal of paper in the form of Post-it notes and legal pads. There is a theory that people learn information better when they hand write it, and we don’t recommend mandating an end to physical note taking. Some employees even brainstorm better while they doodle. It can be worth the tradeoff to allow for people’s creative processes to function at full steam. Other employees will embrace options to completely digitize their note taking, using apps on their phones or other devices.
Switch to e-signatures. There’s no legal reason to require paper documents with hand-written signatures at this point. An e-signature is legally binding. Rather than having to fax or mail contracts to each party and wait for them to sign, scan, and email the contract back, or even worse, print out the document, sign it, and mail it back, digital documents can be emailed, completed, returned, and saved, all within a few minutes.
Use electronic billing. Most of your vendors will provide you with the option to switch to electronic billing. Bills can be emailed to your AP/AR department, and payment can be made online, removing the clutter of mailed paper bills and the hassle of writing checks.
Provide digital receipts. If you need to provide receipts to customers as part of your business model, switching to digital receipts is an excellent option. It allows your company and your customers an easy way to save all records without wasting paper.
How to go paperless at home
One big benefit to going paperless at home is that it will help you eliminate needless clutter and better organize your house. Paper accounts for one of the biggest obstacles to organization at home — from an influx of junk mail to all of the miscellaneous papers children bring home from school and adults bring from work.
Like going paperless in the office, you should start with a strategy for tackling all of the paper you have. There may be things that you’d like to keep paper copies of, and that’s fine. Going paperless doesn’t have to be an all or nothing proposition. Even decreasing the amount of paper you accumulate and use is a step in the right direction.
Tips to go paperless at home:
Remove yourself from mailing lists. Go to the FTC, and opt out of the mailing lists that fill your mailbox with so much junk. You can also use a service to cut down on the miscellaneous paper that hits your mailbox each day.
Set a time to purge. Most of us have files or boxes of files at home. You might also have piles of paper you’ve pushed into closets and drawers. Wherever your clutter is, set a time to go through it and purge. You don’t have to do it all in one day. Set aside 20 minutes a day to go through what you can. If you do that each day, you’ll eventually discard all of the paper you don’t need.
Scan documents. Digital files allow you to save a vast amount of information without taking up physical space. You can back up your important documents in a different file so that you never have to worry about losing them completely. If you don’t have a scanner, you can even take pictures with your phone and save those to your computer or a digital drive.
Unsubscribe from catalogs. Catalogs take up a lot of paper and space. It’s also likely that you don’t need them because you can go online and see the same products on the store’s website.
Enroll in electronic billing. Most credit card and utility companies offer electronic billing. You’ll be able to get your bill via email and pay online.
Recycle. Find out what you can and can’t recycle, and make a habit of recycling everything possible.
Go through all mail right away. Don’t fall into the habit of putting mail on a table to look at later. Instead, take a few minutes to go through the mail as soon as you get it, purging junk mail and prioritizing anything that needs your attention.
Switch to digital subscriptions. If you have an e-reader, you can probably access most of your favorite magazines digitally. You can still get the same content but won’t need to dispose of physical magazines after you’ve finished reading them.
Recommended steps for going paperless
If you’re interested in going paperless at home, work, or both, it’s important that you start by assessing where you use and accumulate the most paper. Most organizations and people won’t be able to completely eliminate paper overnight. If you break it down into actionable steps, you can get in the habit of using less paper. You’ll save money and be more efficient.
While each company and household is different, here are a few general steps to give you an outline for how to map your own strategy:
Start with a comprehensive assessment. You can’t improve a process you don’t understand. Whether you have a small business, run a large corporation, or are trying to organize your five-person household, start by looking at each area of your organization and noting how paper is used.
Develop a strategy for improvement. There are a few different ways you can tackle your strategy. You might decide to make small changes first, such as switching to digital magazines or moving to electronic bills. You might prioritize areas where streamlining the process will improve customer service and organization. If you’re trying to sell the idea of going paperless to the CFO or other financial staff, showing the profitability of going paperless is the best option because it validates any expense and training time.
Get employees on board. Changing processes can be daunting for employees because it requires retraining. It’s important that you offer thorough explanations for going paperless and provide educational material to help employees understand the stakes for the company, the environment, and themselves.
Make each new initiative mandatory. A problem many companies experience when adopting a new system is that not all of their employees use it. For example, if you invest in software solutions to manage your documentation, you won’t get the best ROI from that investment if your employees don’t use the software to its full capabilities. New processes can’t be offered as an option. They need to become company-wide protocols if you want to fully realize their benefits.
Analyze your results. If you’re going to commit to making these changes, run reports and analyze how well your initiatives are improving the overall functioning of your business. Your successes will inspire you to launch better initiatives, and seeing where you can improve will help you tweak the process for greater productivity.
Advantages of going paperless
The reasons to go paperless are numerous, and the drawbacks are minimal. In fact, when you focus on minimizing your use of paper, rather than a rigid ideal of eliminating all paper, there is no real downside.
If members of your staff work better with handwritten notes, that might be an area where you allow them to choose their own preference. If you prefer a large calendar on your kitchen wall to keep your schedule at home, use that. You don’t have to subscribe to every possible paperless improvement. Choosing the ones that make the most sense for your company, household, and productivity will allow you to take a positive step toward becoming paperless.
The importance of going paperless
The environment is certainly a consideration in going paperless. According to the EPA, the U.S. paper industry is the second largest energy consumer in the country. Not only does it contribute to deforestation, but pollution is released into the environment during the production process. Then there are the collateral impacts of paper use. Transporting paper products to market requires fuel, and using ink cartridges and other equipment involved in printing has environmental ramifications.
Environmental issues should be a concern for all of us, but switching to a paperless office can also help you stay competitive. Technology is quickly improving the speed at which we can consume and disseminate information. Paper options are fast becoming outdated. If you want your company to stay competitive, it’s important to adopt more productive means of communicating.
Reasons to go paperless
Why should you go paperless?
It’s greener. Each company and person can reduce energy consumption by making a few changes in the way they use paper.
Being environmentally friendly is a selling point. You can promote the fact that your company is using green initiatives and going paperless as part of your marketing strategy.
It improves productivity. Digital solutions allow for a streamlined workflow, which increases productivity. Documents can easily be shared and updated without transferring information found on paper copies.
It improves customer service. Greater access to information allows your customer service representatives to easily and quickly access client files and address any issues.
It reduces office supply costs. Reduced paper use means that you’ll incur lower printing and supply costs.
It reduces search time. Paper documents are often difficult to locate, with more time going toward finding them than using the information once it’s located. Digital solutions mean that your staff has access to every document they need on their computer or device.
It protects documents in case of disaster. Paper copies have to be physically housed, either onsite or elsewhere. In the event of a fire, robbery, or natural disaster, those documents would be lost forever. Documentation saved in the cloud or backed up in other ways is protected no matter what happens at your office or storage location.
It’s more secure. Many people worry about cyber security when they consider switching to digital records. Of course, your company does need to employ a solid security protocol, but the truth is that using a digital document management system will allow you to set better access protocols to protect your data.
It improves office organization and reduces clutter. Moving to paperless solutions will allow you to get rid of files that take up valuable space and cost money. It also means that there will be less clutter throughout the office.
Benefits of going paperless
The advantages of paperless office processes cover every area of productivity and organization in your business. We’ve talked at length about reasons to go paperless, office workflow, and productivity. Here, we’ll discuss some actual statistics to highlight cost savings and other paperless benefits:
Over 50 percent of office space is devoted to files and storage. Moving to a paperless workflow means that you’ll have twice as much space to use more productively.
Paperless offices save $80 per employee per year. That may not seem like much, but it can add up.
It costs roughly $20 to file a document. Give or take, that figure accounts for the time it takes for employees to file and retrieve documents throughout their lifecycle.
Misfiled documentation costs companies time. According to Gartner, lost and missing documentation costs companies four weeks per year.
More than 70 percent of businesses would fail in the event of a catastrophic loss of documents. Digital options to store and back up documents are superior to paper documentation because floods, fires, and tornados can’t wipe out your entire database if it’s in the cloud.
Paperless solutions
There’s never been a better time to commit to decreasing your paper use. Paperless office solutions are plentiful, and there are a lot of great alternatives to traditional filing methods that will help you gather and make sense of your data.
Another great thing about some of the digital solutions available is that they allow you to cross-reference and run reports on aspects of the information you collect to get a much fuller picture of your company’s health as a whole and different aspects of your performance. For example, if you collect information through JotForm, you can view your submissions in several different formats and quickly access analytics and reports. Trying to accomplish that level of analysis with paper documentation would mean many hours of intensive staff labor.
There are solutions to accommodate just about all aspects of your business that you’d like to transition out of paper. If you want to stop using Post-it notes and legal pads, there are a number of apps you can use on your tablet or mobile device that allow you to take notes and even add notations to company handouts. If you want to digitize all of your client files, there are many highly rated document management systems to choose from.
The technology is currently available to find paperless solutions for every single task. While we don’t suggest banning all paper outright, you can easily use paperless office tools to move in that direction while improving productivity.
Paperless apps
There are paperless office apps available for every type of device. Some of these apps are free and can be implemented as company-wide initiatives. There are also plenty of great applications you can purchase for use across your organization.
Google Drive. This free app allows you to save all formats of files to your Drive or a company Drive and share them with others.
Dropbox. Dropbox has both paid and free subscriptions, according to the amount of storage you need. You can upload the app to any device to access your documents wherever you are, and you can allow other people to access your Dropbox folders or send files via Dropbox.
Evernote. This app allows you to save all types of notes, from receipts to handwritten doodles.
Kindle. You can choose any e-reader, but the Kindle is a good example. It allows you to upload books or even a full library to one handy device, and you can change your magazine subscriptions to be digitally available on your e-reader.
Adobe Reader and EchoSign. Adobe’s apps let you work with PDFs, make notations on them, and even add signatures to important contracts and documentation.
CamCard. This app lets you make the most out of your networking events by giving you a way to digitally save and use all of the business cards you collect.
Mobile phone camera. No matter which phone or provider you have, you likely have a decent camera. You can take clear photos of any document you’d like to save and either upload them to your computer or email them to yourself to file.
Paperless tools and technologies
Most of the digital tools and software you use on a daily basis are specifically geared to take your business from paper to digital. Since documents are no longer created on a typewriter, the document exists in digital form somewhere to begin with. Even those who work in construction can find excellent software to help manage and organize blueprints, which are often created using computer software as well.
Here are a few examples of paperless technology you can use to move more solidly into the digital world:
Scanners. Scanners are no longer a large purchase unless you’re using one meant for bulk scanning. You can easily find scanning apps for any device you use, including your phone. Many printers also come with a scanning feature to help move your paper documentation safely into digital format.
Cloud storage. There are various cloud storage options. You might house files on Dropbox or use a content management system.
Paperless office software. There are a number of really great document management software solutions that offer a wealth of benefits. Many systems allow you to set access depending on employee permissions to keep information secure. You can also work with a system that allows you to more easily find documents and one that offers extensive cyber security features to keep your information secure.
Fillable PDFs. Both Adobe and JotForm make fantastic products to pull you into the paperless age. Using fillable forms, you can create documentation, get feedback from other shareholders, and even get e-signatures on important legal documents.
Paperless software
Paperless software solutions are widely available. Reviewing and choosing the right one for your business takes some research and a good understanding of what improvements you’d like to make in your organizational workflow. You should also pay close attention to how the software vendor handles customer service, because great training and 24-7 support are important.
When choosing your document management system, make sure to name point people inside your organization who can take the lead in learning the system and communicating with your vendor. These people will become the resident experts, giving employees a convenient place to take their issues and find resources to better understand the software.
There are companies that specialize in certain industries. While this can be an excellent option, you might also find a great system that’s more out of the box or general use. You should verify that the system you choose has been used by similar companies or can be personalized for your use.
Here are a few document management systems you might consider:
Microsoft SharePoint. This system has an excellent reputation and a lengthy history with well-known companies. It also integrates well into most standard programs.
OnlyOffice Ascensio system. This system is available in cloud-based format and as internal software. It integrates well with standard programming and is highly rated among IT experts.
Adobe Document Cloud storage. This is a great system if you work primarily with Adobe products, though it doesn’t integrate well with other common file types.
How to implement your paperless office strategy
If you’ve read through all of the benefits, tools, tips, and statistics, you’ve reached the point where you can clearly develop your paperless strategy. Like any business plan, start with your goals. There should be more than one. Reasonable goals for a paperless office include increased productivity, improved customer service, more efficient document management, and lower costs for office supplies.
Start with your list of goals and then prioritize them. If you want to first work on improving the workflow as it relates to productivity and customer service, you should concentrate on areas where paper documentation costs unnecessary time or on improvements in digital storage that will facilitate quicker access by employees.
If you haven’t already assessed your business to see exactly how your workflow looks in every function and department, you need to do that next. This way you can identify your current paper processes and see where they can be improved.
Paperless strategy
Your strategy will be individual to your goals, industry, and business model. It’s important that you take your own employees and the way they work into consideration because they have to commit to the process to make it successful.
Once you’ve assessed your business and set your goals, choose the types of changes you want to make. This might include moving to document management software. Or you might make smaller changes, such as moving to digital billing and adding recycling containers to your office.
Whatever changes you’re initiating, they need to be universal and followed by the entire company.
Paperless office policy
If you want the whole company to commit to going paperless, you need to mandate employees’ participation. You can start with a paperless policy. While you’re at it, you might want to make your company policy available digitally, rather than giving employees a hard copy.
Your paperless policy should include the overall purpose of the company going paperless and your commitment to going paperless. The policy doesn’t list actual processes, but it should explain what the company views as the important aspects of a paperless office space.
Paperless workflow
Your paperless workflow is an important aspect of planning for and launching new processes. If you’re a competitive company, it’s likely that you already have a great many paperless processes in place simply because the technology makes sense for your business. No matter where you are in your paperless journey, you already have a workflow. Creating a paperless workflow simply means following your current workflow but substituting paperless processes where you used paper in the past.
Documenting the current workflow can help you visualize more places where you can make changes. Your workflow is not set in stone. It should be a living document that can be edited as improvements are made. Employees can also benefit from a documented workflow to help understand their responsibilities and aid in training.
Paperless documents
More and more, paperless documents will become the norm for your business. Paperless documents offer a lot of convenience and are far easier to organize than paper.
There’s no need to print many of the documents you create. They can be emailed or uploaded to a digital platform.
There are many tools to help you preserve paper documents digitally. In cases where you need to digitize paper documents, some can be recycled immediately. Any document with sensitive or confidential information should be destroyed so that the information is no longer accessible.
You can also use pictures to create documentation when there is no scanner available. You can upload those image files to your content management system. There are many tools to help you create and manage your paperless documentation.
Paperless management
One of the biggest advantages of going paperless is the fact that paperless document management is more efficient. Whether you’re using free software or a document management system, digital records are easier to store, find, and use.
The task of building a paperless office system may look overwhelming but, in the long run, it saves time. It also improves the work environment overall because it eliminates some of the stress caused by lack of organization and lost documents.
Paperless document management — best practices
A major driving force behind adopting a paperless management system is improved access to your documentation. It’s important that you plan ahead and use best practices to manage your paperless document storage.
Here are a few best practices to keep your digital files even more accessible:
Name files accurately and consistently. Digital files can be just as easy to lose as paper ones if you’re not careful about how you name them. Set a protocol for how files are named. File names might include the client name, or files may be housed in a client file, by project. You can also include the date.
Role-based access. Not everyone in your company should have access to every type of file. You should develop role-based access that allows employees to access only the information that’s pertinent to their responsibilities.
Employee logs. A document management system that logs file activity will let you assess which employees work with files and when. This is also an excellent tool to verify who authored changes to a document and when those changes were made.
Destroy or recycle paper documents. If you’re digitizing paper files, there’s no reason to keep the paper copies once the digital documents have been created. Make a habit of destroying or recycling those files immediately so that they’re not kept in storage or scanned again by mistake.
Purge records on a schedule. Depending on your industry, there may be a legal mandate for how long you need to keep client files. Any tax records need to be held for seven years. After that time period, you should purge all records from your system, even digital ones, to make room for new records.
Paperless systems
Your paperless system can be elaborate or simple, and you can easily set it up with the basic programs on your computer. Your company size and industry will dictate the level of intricacy involved in the vendor you choose to handle your digital filing or document management.
For a smaller business, the filing system might be as simple as shared drives with a set way to name documentation so that each employee can access what they need to keep client files current.
For larger and medium-sized companies, document management systems can provide a better method to keep all documentation organized.
There are a number of document content management companies that can help with every level of the process, from training to employee access and security. For those worried about cyber security, it’s true that you need to follow data security best practices. What you might not know is that nearly 75 percent of security threats are caused by insider threats. That includes both employee negligence and malicious intent. Your data is actually much safer in a storage system that has security features like user logs and limited access.
Paperless storage and backup
While you no longer need to house paper files in storage facilities or take up large portions of your office with paperwork, your paperless office will still need storage — the digital kind. Digital documentation demands a robust protocol for storage and data backup. Lost documents can cost your company time and money.
When you work in a completely digital environment, you have to prepare for any event that could compromise your data. You might have a system failure and lose files on your server. Typically, most businesses set a schedule to back up all of their work once a day. That allows them to have access to the bulk of their documentation with only a few things to one day’s worth of work missing company wide. For larger companies, backups often take place much more frequently because the sheer amount of data loss over even a few hours can be exceptionally costly.
Smaller companies might opt for thumb drives or removable hard drives to store their backups. This can be an excellent option. Remember to move that storage tool to a different location. Having a saved backup next to your computer won’t do much good if the office burns down in a fire.
A more effective method is cloud storage. You can save the backup to Dropbox or another cloud storage option so that the backup is easily accessible no matter what happens at your real-world location.
Larger companies frequently use data storage vendors that can monitor their sites and provide backup and data storage according to company needs. These companies often specialize in data recovery and can aid in monitoring your server for threats. Depending on the size of the company, an internal IT team might work with the outside vendor to strengthen the storage and data use capabilities and guard against attacks.
Every moment, even as we speak, new web tools and services for online businesses and freelancers, are being launched. This is great but there is also a huge minus.
How can we know which web tools are the most efficient and reliable?
We are answering this question by reviewing for you 45 different solutions from many domains: WordPress support, freelancers invoicing, WordPress themes and plugins, website builders, the most popular WordPress analytics plugin and much more.
With over 100,000 happy freelancers (designers, developers, writers, photographers, videographers, consultants) using it, Bonsai is the most appreciated suite of software dedicated to freelancers. They love it because it is an all-in-one solution, packed with useful features and a friendly and lightning fast interface that is intuitive.
Bonsai is great to structure your proposals, to build fully customized invoices in seconds or to auto-generate them from contracts, proposals and time sheets, to track activity and payments, to automate reminders (usually this part is a stand-alone service for which you have to pay), and accept payments your way.
Put your freelancing on auto-pilot with Bonsai. Start for free.
24×7 WP Support is the most powerful and popular service dedicated to WordPress, used by tens of thousands of happy people.
These friendly professionals will help with any issues and errors related to WordPress themes and plugins, with migration and hosting, web development with WordPress (they can build your website based on your requirements), malware, WooCommerce support, and much more. Anything you need can be done by contacting 24×7 WP Support, they work 365 days a year, 24 hours a day, responding and fixing issues extremely fast.
Their service portfolio for WordPress is the most complete ever seen in the market. Practically they can handle any problem or desire of yours related to WordPress. All your issues with WordPress will be solved in a matter of minutes (404 page not found, migration from a host to another, fatal errors, speed and performance issues, hacking & malware and tens others).
Looking for website development plan for WordPress? 24×7 WP Support is having exactly what you need. They will also help you with a domain and SSL certificate for an amazing price and free installation.
Their services include a brilliant all in one plan self-hosted website for WordPress. You will get over 400+ premium paid themes, free SSL, daily back-up, free training videos, and much more.
Get in touch with 24×7 WP Support via phone and chat, and let experts handle your WordPress website.
MonsterInsights is the most powerful and easy to use WordPress analytics plugin that let you setup Google Analytics on your website in minutes, without writing a single line of code. This solution will help all business owners to increase their business in terms of revenue, profit and ROI.
Using MonsterInsights, you can see useful information about your visitor’s right inside your WordPress dashboard. The audience report shows you which country your visitors are from, what they are most interested in, which device they are using, their age, gender, and a whole lot more. You can use these insights to improve your overall web strategy.
Interested to see exactly how people find and use your website? Want to see what’s working on your website and what’s not? MonsterInsights Behavior Report shows you exactly how people find your website, which keywords did they search for, who referred them, what did them click on your site, and more. You can use these insights to uncover low-hanging fruits, new partnership opportunities, and the right areas to focus on!
Join the 2 million people using with great success MonsterInsights.
Polypane is the best browser that developers, agencies, UI/UX designers and QA engineers can use to design and develop responsive websites faster. It is a dedicated solution that will make your responsive website creation twice as fast.
Polypane has lots of time-saving features. Use it to see the full range of viewports for your site in a single overview. You can simply resize the viewports by dragging, or with one click view all CSS breakpoints with Polypane’s breakpoint detection. Or use the list of popular device sizes. With all these options, checking to see if your site or app renders well on user devices becomes easy and fast. Switching between devices is easy, and you can also create your own.
Start your free trial, you will get the full version to test for 14 days.
Fire Checkout is a brilliant Magento product that will simplify the checkout with 65%, having 1 step and not 6 as it is default. A simpler way to checkout translate into more sales.
Magento One Page Checkout is coming with 4 unique and gorgeous designs, with 9 extensions included, free installation, and friendly and quick support.
Codester is a brilliant marketplace filled with thousands of premium PHP scripts, app templates, themes, plugins, apps and much more. Always check the flash sale section where hugely discounted are being sold every day.
In 2019 your audience is on mobile – and MobiLoud helps you take advantage of that fact.
MobiLoud converts your existing WordPress site into native mobile apps that will give your readers the experience they want and boost your traffic, engagement and revenues.
Push notifications, ad platform integrations, analytics – their apps have it all. On top of that they’re a full service that handle everything for you end-to-end including ongoing maintenance.
Check MobiLoud out to see how a premium native app could boost your business – and how you can get one worthy of a top publisher at a fraction of the price.
Total is a professional multipurpose WordPress theme that is packed with tons of features and options. Its design is fully responsive, it is lightning fast loading, and the theme can be fully customized in a matter of minutes.
Mobirise is the first choice when wanting to build website offline, being a complete solution loaded with over 2,000 awesome website templates, a drag and drop builder which you can use with 0 coding and no skills, with sliders, galleries, forms, popups, icons and much more.
Build a professional and unique design with Mobirise.
You want to stand out of the crowd with your Elementor website? It’s simple, pick one of the 100+ free and premium templates made by Astra. All their designs are optimized for conversions, look and feel great on any device, and will help your website look awesome.
Rank Math SEO is the most efficient and friendly WordPress SEO plugin, putting your website SEO on auto-pilot after a couple of minutes customization. Websites that use RankMath increased their traffic and position in Google.
Use Rank Math and get more visitors on your website.
Compatible with all WordPress themes and packed with tons of features and options, WP Review is the best WordPress plugin to implement review of products, services, places or whatever you need, on your website in a matter of minutes.
It is integrated with Google Places Review, Yelp Reviews, Facebook Reviews and much more.
DesignModo put several great products on the web, helping tens of thousands of people and companies. Startups 3 is a powerful website creator using the Bootstrap builder and templates. Postcards will help you create beautiful responsive email with a simple drag and drop simplicity. Slides is a brilliant static website generator.
Landing is a brilliant, yet free to use landing page that will help you get more conversions and sales. The template is lightning fast, has a clean and pixel-perfect design, and can be easily customized to be a perfect fit for your product or service.
AdminLTE is a popular open source admin dashboard and control panel theme, which comes loaded with 6 gorgeous skins, with over 18 plugins and 3 custom plugins made especially for AdminLTE, and much more.
ServicesLanding is a beautiful, pixel-perfect and fully responsive landing page that looks and feel excellent on all devices. Fully customizing it takes a couple of minutes and the process is straightforward.
Whenever you see a font that you like, save the picture and identify it with WhatFontIs help. This web tool has a huge database of over 550,000 free and commercial fonts, a powerful AI software and a friendly and fast interface that will guide you every step.
Converting videos into HTML5 format is now easier than ever, in 3 simple steps and a few minutes you are good to go. This web tool supports over 300 video formats and the video will play in all browsers and devices.
WordPressToWix.PRO provides an individual approach to the process of moving WordPress websites to Wix. This is the ultimate solution for everyone, who lacks time or skills to cope with the task independently yet hopes to avail high end result. The service is known for its exceptional ease-of-use, convenience, security, flexibility and extensive integration options.
With over 150,000 users, WrapPixel is a top supplier of free and premium Bootstrap, Angular & React admin templates, and UI Kits.
Their Mega Bundle includes 45 unique dashboards, 11 admin templates, 130 customized plugins, 6,500 UI Components and pages, and over 3,000 premium font icons. All of that for $79.
FortuneCreations is a professional WordPress theme developer which creates free and premium templates. They have over 18,000 happy customers, being one of the major players in the industry.
Their themes have a pixel-perfect and clean design, look and feel great on all devices, and are loaded with tons of features and options, being super simple to fully customize.
Bonsai is the most popular brand when talking about dedicated tools for freelancers. One of their products is the time tracking solution.
Using Bonsai, freelancers will track time with 1-click, centralize time sheets and much more. All bonsai products are integrated and work together brilliant. Connect your tracker with your freelance proposal and contract and save precious time not reentering your data between systems.
MailMunch is a popular service that will help you create highly engaging and converting email newsletters, using the included beautifully designed templates, the drag-and-drop editor and the friendly interface that will guide you every moment.
Unlayer is the most popular, professional and friendly embeddable editor that will let your website visitors create highly engaging email newsletters directly from the website, using the included gorgeous templates and the powerful drag and drop builder.
Logater is the most used and preferred logo design platform on the market, being used by millions of people to create gorgeous and unique logo and brand designs. The platform is lightning fast, you simply write down the business name and right after you will see hundreds of designs to choose from.
Fotor is used by millions of people daily to edit photos and create designs in minutes, designs that are highly engaging and will help your website and social media channels quickly grow.
No need to have any special skills to create awesome pictures, give it a try.
Content Snare will chase the customers for content in your place, after a simple setup. Gather content and files in one place with automated client reminders.
You will save a lot of time that you can use to boost your company and projects, and your customers will have a professional way to send you the content and upload files. Both parts wins.
Start your free 14-day trial today and see Content Snare in action.
Mockuuups Studio is free macOS & Windows app that lets you work with mockups no matter if you’re designer or not. No need to have any special skills or previous experience.
The app is packed with everything you need to create product mockups, outstanding marketing materials, even visual content for social media or blog posts.
The interface is lightning fast and super friendly, helping you every moment.
With Taskade you will supercharge your team productivity, by managing your tasks and chat with your team in one place. Taskade is designed as a remote workspace for distributed teams and it works excellent on iOS, Android, Windows, Mac, Linux and much more.
HelpJet will help your customers find answers to their questions with an easy-to-use knowledge base and you to save money by not hiring additional support staff when you increase sales.
The installation and customization of HelpJet is straightforward and takes only a couple of minutes.
Looking to create a WordPress Wiki website? WikiPress is the most popular and powerful WordPress Wiki theme on the market, being loaded with tons of features and options, having a clean and pixel-perfect design, and being super simple to fully customize.
Looking for the most complete Shopify theme on the market? Wokiee is a complete and powerful design tool that is loaded with tons of layouts for homepages, shop pages and products pages, with multiple header options and much more.
Shella is the ultimate fashion Shopify theme on the market which is having a pixel-perfect and clean design, being fully responsive and having tons of features and options that will help you shop stand out of the crowd.
InvoiceBerry is a professional invoicing software that is best suited for freelancers and small and medium companies. Creating and sending a fully customized invoices takes 60 seconds or less and the platform can also be used for tracking expenses and payments, to create detailed reports, to manage clients and much more.
Sign up for the free trial, no credit card required.
Goodie is a professional and popular web development service that is best suited to small business owners looking to amplify their online presence, to designers looking for a reliable web development partner, for simple WordPress websites and much more.
With RumbleTalk anyone can add online chat to its website in a matter of seconds, without having any coding skills or previous experience. Engage your website visitors and help them in terms of support and sales questions. They will appreciate it and you will get better conversions.
OpinionStage will help you create highly converting and engaging quizzes. They put at your disposal awesome templates, a brilliant drag-and-drop editor, a friendly and quick interface, and tens of options that will help you customize the quizzes to be a perfect fit for your needs.
Loading time is extremely important to any WordPress website. Todays themes are looking great but are complicated products which are loaded with demanding graphics, videos and software.
SteadyWP is a professional page speed optimization service that will cut your loading speed and help your website visitors get a better experience. This translates into better sales and conversions.
To create your own landing page you don’t need to be a web professional or waste a fortune on them. uLanding builder is an up-to-date service that makes the process of crafting your one-pager super easy. Just create different page versions within one project and check which ideas work best for your target audience with an A/B testing feature.
Gorgias is the best customer support helpdesk for Shopify that will help you manage customer support and get the full customer picture in one place. It pulls data from all your apps to display rich customer profiles next to tickets. Edit orders, subscriptions or refund payments from your helpdesk.
Gorgias will help you to automatically respond to common questions (60% of e-commere support requests are repetitive) and it integrates with over 30 e-commerce apps.
uCoz is a modern website builder that has a module structure. So you don’t have to be a coding professional, just click on the module that suits you best and use the whole range of built-in features to cope with different tasks. Start now, it’s absolutely free!
If you like a site and want to create something of that kind, use WebDataStats to detect its CMS. This is a powerful platform that offers its users many other options such as obtaining a domain name database by extensions and CMS, getting sites categorized by necessary criteria, downloading contact details from sites of a particular CMS and more. The service is free!
MMThomasBlog.com delivers verified and useful information about website builders – services that simplify web design process. They make it easy for non-proficient and experienced web developers to create and manage professional projects. There is also an informative blog with multiple niche-related articles that unveil the secrets of website creation as well as the nuances of choosing the most effective web building tools.
Make use of the Jacqueline WordPress theme to launch a spa or wellness center website. The theme is ready to be used to showcase your services and sell your offers due to the full compatibility with WooCommerce plugin. The theme includes everything needed to present your offers in the most professional style. For example, you can make use of premade pricing tables, event management, and gift certificates.
LogoAI is a very popular logo design platform that millions of people use to create unique logo designs in a matter of minutes, without spending a fortune. The powerful AI software and friendly interface makes the process very fast and simple. Write down the company name and right after you will get hundreds of designs to choose from.
You probably think that the internet marketing landscape is reasonably stable, right?
Wrong! It’s actually one of the fastest-moving business environments around. If you were a “marketing guru” in the 1960s, there’s a reasonably good chance what worked then would work for another couple of decades or so. That’s simply not the case with internet marketing. What works one year (or month) quickly becomes outdated as new ideas hit the mainstream and old practices get overtaken (or become obsolete).
So what’s next on the marketing landscape? Voice marketing. That’s right—you’ve seen how much voice assistants like Alexa have taken the tech market by storm in recent years, haven’t you? Well, these pieces of kit actually present a number of issues for traditional marketing streams. After all, as more people use voice to search the web, surely it’s a good idea to target these voice searches with bespoke marketing efforts rather than just leave things to chance?
If you want to know more about voice marketing and why it could be the next big thing, then you’re in the right place. In this article, we’re going to look at some of the issues associated with it, as well as why it could help take your marketing efforts to the next level.
You’ve probably worked this out already by now. If you haven’t, here’s a quick recap: voice marketing is marketing to target voice searches. You know those voice assistants people use on their phone so they can search for something without typing it in? That’s a voice search (obviously). And voice marketing targets these voice searches.
With voice assistants becoming more and more popular, voice marketing is starting to become more important. People are searching more and more on their phones, but they’re also buying actual standalone voice assistants for their living rooms and elsewhere in the house.
Voice marketing itself targets these voice searches to rank higher for voice searches and provide more relevant results to those who make them. While it’s only a new idea, you could get a jump on the competition by taking it more seriously.
How do voice searches work?
When you ask your voice assistant a question, it’ll follow a set of principles to find your answer—and then it’ll read it out to you. There’s a reason these voice assistants are becoming a much more convenient way to search. That means you can use them on the go, and without having to type in a question.
The voice assistant will generally follow a set of parameters when you ask it a question or give it a command. It’ll know what to do with requests like calling someone you know or playing music. But if you give it a general question that doesn’t fit into one of these parameters your voice assistant will generally search Google to give you an answer. While it has a few metrics, it’ll often read out the first answer that matches your query. This has key implications that we need to look at for voice marketing.
Voice marketing implications
If your voice assistance is simply searching Google to give you an answer to a voice search, then it stands to reason that you just need to carry on doing the same search engine optimization you’ve always been doing for Google and other search engines, right? Not quite.
There are a couple of key differences that make a different approach necessary. The first one is much more obvious than you might think. When people search for something using their voice, they use different search terms than when they type something in.
The vast majority of SEO efforts these days are based around keywords. Keywords that people type. Makes sense, right? But when someone searches for something with their voice, they use different terms and phrases. People simply don’t type how they talk. That means those optimizers and marketers (that’s you) who start targeting search terms and keyword strings that are better optimized for the way people ask real questions vocally will start seeing more success (hopefully).
Think about it logically. When you want to know the five best local restaurants in your area and perform a normal text-based search, you might type something like “5 best restaurants in [city]”. But when you ask your voice assistant, you might say something like “OK Google, what are the five best restaurants near me?” This is only a crude example, but you can clearly see the difference.
As voice marketing becomes more popular, there’ll be more and more research into exactly what people are searching for on their voice assistants. This data will create a level playing field where more people will start knowing the right search strings for voice marketing and will start targeting them accordingly. But there’s no reason why you can’t try and give yourself a head start, right?
There’s another important point to make with voice marketing. You need to be the first result. While it’s always better to be at the top of Google—you can sometimes get away with being 9th or 10th. While each spot further down the search results gets far fewer clicks, you’re generally doing alright if you’re on the first page, right? Well, that’s simply not the case with a voice search.
The voice assistant will normally only read out the very top answer from Search results. While it’s a little different if you’re using voice search on a desktop or laptop where you’ve got a screen to see more traditionally extensive results—many voice assistants will only answer your question with the first and most relevant result they can find. So it doesn’t matter if you’re fifth for this voice search, you’ll basically be nowhere.
That makes this more of an all-or-nothing game and a much more competitive one. Being first is even more important as we move more towards voice search and virtual assistants. That means being the first to start optimizing for these voice searches is even more important, so you can get a head start on the rest of the market. That’s why it’s even more important that you’re reading this article now rather than in three years’ time.
How to optimize for voice search
Now you know why voice search and marketing is so important, you probably want to know how to do it, right? We already looked at starting to optimize for search-phrases that are more conversational, and that’s a big one. But let’s look at a few more strategies in a bit more detail:
Get your featured snippets in order
Featured snippets are those short bits of text that appear under a certain search result, especially for question-based searches. That’ll normally be what your voice assistant reads out as an answer to a voice search query. So these are important, and you need to make sure yours are in order.
You can find out more about featured snippets here.
Target longer conversational questions
One characteristic of a voice search is that they’re much longer than a normal web-based search. They’re also more question-orientated and have a more conversational tone. Start listening to the way people talk and ask questions on their phone or virtual assistant. These are the sort of phrases and terms you want to start trying to rank for if you want to make the most of your voice marketing efforts.
Sort out your load speeds
If your web page doesn’t load quickly, it won’t show up in voice searches. People want results straight away when they ask their phone a question. Oftentimes, they’ll be on the move and in a hurry. That means you need to be able to give them results, quickly. Switch hosts if you need to, and start having speed as one of your main priorities when building your site.
Use structured data
Structured data is code that’s added to your HTML that helps search engines crawl your results and have a better idea of what it’s looking at. Having more structured data in your optimization efforts makes it a lot easier for most of these voice searching assistants. You can find out a bit more about structured data and how to use it here.
Think locally
If there’s one thing a lot of different voice searches have in common is that they’re looking for local results. In fact, research suggests that up to 58% of voice searches are made by people trying to find a local business. For example, it makes sense when you’re looking for an SEO agency New York service in the New York area, right? Since people will be more likely to use their phones (and voice search) when on the move or in a new location. Somewhere they might not have access to a traditional computer.
A lot of voice searches contain the words “near me”, so it stands to reason that these are the sorts of words you’re going to start trying to target. Make sure your local business listings are on point as well, as many voice searches look for this sort of information.
Hopefully, these tips are enough to get you started on your route to voice marketing success. You’ve probably seen how voice marketing could be the next big thing in SEO and internet marketing. That means you need to start targeting voice searches now—before it’s too late.
Adding rel=preconnect to a informs the browser that your page intends to establish a connection to another domain, and that you’d like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
The graphic in the post does a good job of making this an obviously good choice for performance:
Robin did a good job of rounding up information on all this type of stuff a few years back. Looks like the best practice right now is using these two:
That’d be 14 extra tags in the first few packets of data on every request on this site. It sounds like a perf win, but I’d want to test that before no-brainer chucking it in there.
I used the HTTP Archive to find a couple of sites that use Cloudinary for their images, and tested them unchanged, and then with the preconnect script injected. Each test consisted of nine runs, using Chrome emulating a mobile device, and the Cable network profile.
There’s a noticeable visual improvement in the first site, with the main background image loading over half a second sooner (top) than on the unchanged site (bottom).
This stuff makes me think of instant.page (which just went v2), which is a fancy little script that preloads things based on interactions. It’s now a browser extension (FasterChrome) that I’ve been trying out. I can’t say I notice a huge difference, but I’m almost always on fast internet connections.
Let’s say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something.
You’d probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value — it would reverse direction. Then do that same thing with the Y location and you’ve got the effect we’re after. Simple enough with some JavaScript and math.
Here’s The Coding Train explaining it clearly:
Here’s a canvas implementation. It’s Pong so it factors in paddles and is slightly more complicated, but the basic math is still there:
But what if we wanted to do this purely in CSS? We could write @keyframes that move the transform or left/top properties… but what values would we use? If we’re trying to bounce around the entire screen (viewport), we’d need to know the dimensions of the screen and then use those values. But we never know that exact size in CSS.
Or do we?
CSS has viewport units, which are based on the size of the entire viewport. Plus, we’ve got calc() and we presumably know the size of our own element.
The extra tricky part is breaking the X animation and the Y animation apart into two separate animations (one on a parent and one on a child) so that, when the direction reverses, it can happen independently and it looks more screensaver-like.
