When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
Remember that old layout method might be perfect for the job. Overusing flexbox or grid can increase the complexity of your CSS by time. I don’t mean they are complex, but using them correctly and in the right context as explained from the examples in this article is much better.
Speaking of which, there’s so many great layout examples in this post, too.
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line up with those folds. The new image (and text!) was part of the joke.
Every one was a clever trick, so of course, I’m delighted to see that trick make it’s way to CSS, courtesy of Thomas Park.
I’m pretty surprised Thomas was able to do it with a single state (:hover / :active) . I would have bet a nickel that it would have needed @keyframes to adjust the 3D transforms into different positions during the animation, but it looks like multiple transitions happening (both parent and child) handle that.
If you’re in the mood for other cool CSS paper effects…
I just can’t stop opening excellent typography-related articles, which means I need to subject you to blog posts that round them up so I can clean up my open tabs.
Vistaserve is “a grass-roots web hosting initiative hailing from Thornbury, Australia. Inspired by the quirky web of the 90s, we allow users to create home pages, your own little sandbox on the World Wide Web, as it were.” Caitlin & Paul (I think the no-last-name thing is part of the aesthetic) wanted to get the fonts right, which meant removing anti-aliasing (the thing that makes fonts look good on screens!). CSS was no help. Turned out to be quite a journey involving literally rebuilding the fonts.
Thomas Bohm makes the point that the kerning around punctation may require special attention. For example, a question mark needing a little extra space or moving a superscript number away from butting against a letter.
You could do it manually with stuff like or &hairsp in between characters. But I’m far too lazy for that unless I’m working on a very special piece. Personally, I just cross my fingers that the font I’m using is high quality enough to have thought of and implemented this sort of attention to detail.
I’m sure we’ve all seen, “The quick brown fox jumps over the lazy dog” as a tester string for type, because it uses all the characters in the alphabet. Jonathan Hoefler created some new proofing text that is much more helpful for typographers like him.
That’s deep in the type nerd weeds there. More useful perhaps is another recent post from Jonathan on pairings. I’ve probably read dozens of posts on font pairings in my life, but this one resonates the most.
Some of the most dazzling typographic pairings — and certainly my favorites — are those that use unexpected fonts together. At left, the grey flannel suit that is Tungsten Compressed is paired with crimson silk doublet of the St. Augustin Civilité, a fiery sixteenth century typeface that demands a good foil.
If you’ve got macOS Catalina, you’ve got access to some really nice fonts you might not know about that need to be manually downloaded. Ralf Herrmann has the story on what you get:
I get Erik Kennedy’s Learn UI Design newsletter, and he mentions using Calena in it…
Overall, Canela walks this balance between the warmth of human handwriting and stately details. It makes me think of something literary, which is why I used it for project in one of the new video lessons in Learn UI Design.
Type specimens are curious objects. They aim to inspire designers. They are tools with which to make design decisions. They are also marketing material for foundries. This project will dig into specimens from these three perspectives: as artefacts made by and for font designers to evolve type culture; as tools for font users to make decisions about choosing and using type; and as effective marketing tools.
I’ve long been skeptical of quoting global browser usage percentages to justify their usage of browser features. It doesn’t matter what global usage of a browser is, other than nerdy cocktail party fodder. The usage that matters is what users on your site are using, and that can be wildly different from site to site.
That idea of tracking real usage of your actual site concept has bounced around my head the last few days. And it’s not just “I can’t use CSS grid because IE 11 has 1.42% of global usage still” stuff, it’s about measuring metrics that matter to your site, no matter what they are.
Performance metrics are a big one. When you’re doing performance testing, much of it is what you would call synthetic testing. An automated browser loads your site and tracks what it finds as it loads, like the timing of a thing, the size of assets, the number of assets, etc. Synthetic information like this enters my mind when spending tons of time on performance. “I bet I can get rid of this one extra request,” I think. “I bet I can optimize this asset a little further.” And the performance tools we use report this kind of data to us readily. How big is our JavaScript bundle? What is our “Largest Contentful Paint”? What is our Lighthouse performance score? All things that are related to performance, but aren’t measuring actual user’s experience.
Let that sit for a second.
There are other analytics we can gather on a site, like usage analytics. For example, we might slap Google Analytics on a site, doing nothing but installing the generic snippet. This is going to tell us stuff like what pages are the most popular, how long people spend on the site, and what countries deliver the most traffic. Those are real user analytics, but it’s very generic analytic information.
If you’re hoping for more useful analytics data on your site, you have to think about it a little harder up front. What do you want to know? Maybe you want to know how often people use Feature X. Or you want to know how many files they have uploaded this week. Or how many messages they have sent. Or how many times they have clicked the star button. This is stuff that tells you how your site is doing. Generic analytics tracking won’t do that; you’ll have to write a little JavaScript to capture and report on those things. It takes a little effort to get the analytics you really care about.
Now apply that to performance tooling.
Rather than generic synthetic tests, why not measure things that are actually important to your specific site? One aspect to this is RUM, that is, “Real User Monitoring.” So rather than a single synthetic test being the source of all performance testing on your site, you’re tracking real users actually using the site on their actual devices. That makes a lot of sense to me, but aside from the logic of it, it unlocks some important data.
For example, one of Google’s Web Core Vitals, which are soon to affect the SEO of our pages, include a metric called First Input Delay (FID) and you have to collect data via JavaScript¹ on your page to use it.
Another Web Core Vital is “Largest Contentful Paint” which is a fascinating attempt at a more meaningful performance metric. Imagine a metric like “start render” or the first page paint. Is that interesting? Sorta. At least it is signaling to the user that something is happening (probably). Yet that first render might not be actually useful content, like the headline and body copy of a news article. So this metric makes a guess at what that useful content probably is and measures that. Very clever.
But, why guess? I get why Google has to guess. They have to measure LCP on a bazillion sites and provide generically useful measurements. But on your own site (again, where the focused analytics actually matter) we can tell performance tools which elements matter us and record when they render. Personally, I’d care about when the article itself renders on this site. With SpeedCurve’s hero rendering time, I could do something like:
<main elementtiming="article"></main>
<!-- or focus on the top of the page, like the "hero" timing suggests -->
<header elementtiming="hero"></header>
Now I’m measuring what matters to my site and not just generic numbers.
Similarly, FID is cool and all, but why not fire off a JavaScript event telling performance tooling when things happen that are important to your site. For example, on CodePen, we’d do that when the editor is ready to use. That’s called User Timing and it’s a dang W3C spec!
Editors.init();
performance.mark("Editors are initialized.");
These kind some-effort-required analytics are definitely better than the standard fare. Sure, a performance budget that warns you when you go over 200KB of JavaScript is great, but a performance budget that warns you when a core feature of your app isn’t ready until 1.4 seconds when your budget is 1.1 seconds is way more important.
I say this because I was trying to make a chart on the SpeedCurve of the three Web Core Vitals, and you can’t add FID unless you have LUX running, which is their RUM thing. Phew that was a lot of acronyms, sorry.
The following is a guest post written by Carlos Schults.
Being able to disable code in production is a power that many developers aren’t aware of. And that’s a shame. The ability to switch off some portions—or even complete features—of the codebase can dramatically improve the software development process by allowing best practices that can shorten feedback cycles and increase the overall quality.
So, that’s what this post will cover: the mechanisms you can use to perform this switching off, why they’re useful and how to get started. Let’s dig in.
Why Would You Want to Disable Code?
Before we take a deep dive into feature flags, explaining what they are and how they’re implemented, you might be asking: Why would people want to switch off some parts of their codebase? What’s the benefit of doing that?
To answer these questions, we need to go back in time to take a look at how software was developed a couple of decades ago. Time for a history lesson!
The Dark Ages: Integration Hell
Historically, integration has been one of the toughest challenges for teams trying to develop software together.
Picture several teams inside an organization, working separately for several months, each one developing its own feature. While the teams were working in complete isolation, their versions of the application were evolving in different directions. Now they need to converge again into a single, non conflicting version. This is a Herculean task.
That’s what “integration hell” means: the struggle to merge versions of the same application that have been allowed to diverge for too long.
Enter the Solution: Continuous Integration
“If it hurts, do it more often.” What this saying means is that there are problems we postpone solving because doing so is hard. What you often find with these kinds of problems is that solving them more frequently, before they accumulate, is way less painful—or even trivial.
So, how can you make integrations less painful? Integrate more often.
That’s continuous integration (CI) in a nutshell: Have your developers integrate their work with a public shared repository, at the very least once a day. Have a server trigger a build and run the automated test suite every time someone integrates their work. That way, if there are problems, they’re exposed sooner rather than later.
How to Handle Partially Completed Features
One challenge that many teams struggle with in CI is how to deal with features that aren’t complete. If developers are merging their code to the mainline, that means that any developments that take more than one day to complete will have to be split into several parts.
How can you avoid the customer accessing unfinished functionality? There are some trivial scenarios with similarly trivial solutions, but harder scenarios call for a different approach: the ability to switch off a part of the code completely.
Feature Flags to the Rescue
Defining Feature Flags
There are many names for the mechanisms that allow developers to switch a portion of their code off and on. Some call them “feature toggles” or “kill switches.” But “feature flags” is the most popular name, so that’s what we’ll use for the remainder of this post. So, what are feature flags?
Put simply, feature flags are techniques that allow teams to change the behavior of an application without modifying the code. In general, flags are used to prevent users from accessing and using the changes introduced by some piece of code, because they’re not adequate for production yet for a number of reasons.
Disable Code: What Are the Use Cases?
We’ll now cover some of the most common use cases for disabling code in production.
Switching Off Unfinished Features
As you’ve seen, one of the main use cases for feature flags is preventing users from accessing features that aren’t ready for use yet.
That way, programmers developing features that are more complex and take a longer time to complete aren’t prevented from integrating their work often and benefiting from it.
Enabling A/B Testing
The adoption of feature flags enables the use of several valuable practices in the software development process, one of which is A/B testing.
A/B testing is a user experience research technique that consists of comparing two versions of a website or application to decide which one to keep. It entails randomly splitting users into two groups, A and B, and then delivering a different version of the application to each group. One group might receive the current production version, which we call the “control,” whereas the second group would receive the candidate for the new version, called the “treatment.”
The testers then monitor the behavior of both groups and determine which of the versions achieved better results.
Feature flags are a practical way to enable A/B testing because they allow you to quickly and conveniently change between the control and treatment versions of your application.
Enabling Canary Releases
If you deliver the new version of your app to your entire userbase at once, 100 percent of your users will be impacted if the release is bad in some way. What if you could gradually roll out the new version instead? You’d first deploy to a small subset of users, monitoring that group to detect issues. If something went wrong, you could roll it back. If everything looked fine, you could then gradually release the version for larger groups. That’s a canary release in a nutshell. It’s another powerful technique that feature flags might help with.
Customizing Features According to Users’ Preferences
It’s not uncommon to have to customize your application according to the needs of specific users, and there are several ways in which software teams can accomplish that—some more efficient, and others less so (companies that create separate branches or entire repositories for each client come to mind).
This is another area where feature flags could help, allowing teams to dynamically switch between different versions of the same functionality.
Disable Code in Production 101
How do you go about disabling code? That’s what we’re going to see now, in three increasingly sophisticated phases.
First Stage: The Most Basic Approach
We start with an approach that’s so primitive, it maybe shouldn’t be considered a feature flag at all. Consider the pseudocode below:
calculateAdditionalWorkHours(Employee employee, Date start, Date end) {
// return calculateAdditionalWorkHoursSameOldWay(employee, start, end);
return calculateAdditionalWorkHoursImproved(employee, start, end);
}
In the code above, we’re just commenting out the old version of some method and replacing it with a new version. When we want the older version to be used, we just do the opposite. (Well, I said it was primitive.) This approach lacks one of the most fundamental properties of a feature flag—the ability to change how the application behaves without changing its code.
However, it plants the seed for more sophisticated approaches.
Second Stage: Taking the Decision Out of the Code
The previous approach didn’t allow developers to select the desired version of the feature without changing the code. Fortunately, that’s not so hard to do. First, we introduce a logical variable to determine which version we’re going to use:
calculateAdditionalWorkHours(Employee employee, Date start, Date end) {
var result = useNewCalculation
? calculateAdditionalWorkHoursImproved(employee, start, end)
: calculateAdditionalWorkHoursSameOldWay(employee, start, end);
return result;
}
Then, we use some mechanism to be able to assign the value to the variable from an external source. We could use a configuration file:
var useNewCalculation = config[newCalculation];
Passing arguments to the application might be another option. What matters is that we now have the ability to modify how the app behaves from the outside, which is a great step toward “true” feature flagging.
Keep in mind that the code examples you see are all pseudocode. Using your favorite programming language, there’s nothing stopping you from starting with this approach and taking it up a notch. You could, for instance, use classes to represent the features and design patterns (e.g., factories) to avoid if statements.
Stage 3: Full-Fledged Feature Flag Management
The previous approach might be enough when your application has only a small number of flags. But as that number grows, things start to become messy.
First, you have the issue of technical debt. Manually implemented feature flags can create terribly confusing conditional flows in your codebase. That only grows worse with new flags being introduced each day. Additionally, they might make the code harder to understand and navigate, especially for more junior developers, which is an invitation for bugs.
Another problem is that as the number of flags grows, it becomes more and more common to forget to delete old, obsolete ones.
The main problem of a homegrown approach is that it doesn’t give you an easy way to see and manage all of your flags at once. That’s why our third and final stage is a single piece of advice: Instead of rolling out your own feature flags approach, adopt a third-party feature flag management system.
Feature Flags Are a CI/CD Enabler
We’ve covered the mechanisms developers can use to disable portions of their codebase in production without having to touch the code. This capability is powerful and enables techniques such as A/B testing and canary releases, which are all hallmarks of a modern, agile-based software development process.
The names for the techniques might vary—feature flags, feature toggles, feature flipper, and so on. The way in which the techniques are implemented can also vary—from a humble if statement to sophisticated cloud-based solutions.
But no matter what you call them, you can’t overstate the benefit these mechanisms offer. They’re an enabler of Continuous Integration, which is essential for any modern software organization that wants to stay afloat.
Django websites involve a lot of files. It’s not just source code for the configuration, models, views, and templates, but also static assets: CSS and JavaScript, images, icons. As if that wasn’t enough already, sometimes users come along and want to upload their own files to your website. It’s enough to make any developer incredulous. Files everywhere!
Here’s where I wish I could say (without caveats): “Don’t worry, Django has your back!” But unfortunately, when dealing with static assets and media files, there are a lot of caveats to deal with.
Today, we’ll address storing and serving files for both single-server and scalable deployments while considering factors like compression, caching, and availability. We’ll also discuss the costs and benefits of CDNs and dedicated file storage solutions.
Note: This is not a tutorial on how to deploy a Django site to any specific platform. Instead, like the other articles in the Django Highlights series (see below), it’s intended as a guide for front-end developers and designers to understand other parts of the process of creating a web application. Today, we’re focusing on what happens after the style hotfix or beautiful graphic you just finished is pushed to master. Together, we’ll develop an intuition for the strategies available to Django developers for serving these files to users worldwide in a secure, performant, and cost-effective manner.
Part 3: Models, Admin, And Harnessing The Relational Database
Definitions
Most of these terms are pretty straightforward, but it’s worth taking a moment to establish a shared vocabulary for this discussion.
The three types of files in a live Django application are:
Source Code
The Python and HTML files that are created with the Django framework. These files are the core of the application. Source code files are generally pretty small, measured in kilobytes.
Static Files
Also called “static assets,” these files include CSS and JavaScript, both written by the application developer and third-party libraries, as well as PDFs, software installers, images, music, videos, and icons. These files are only used client-side. Static files range from a few kilobytes of CSS to gigabytes of video.
Media Files
Any file uploaded by a user, from profile pictures to personal documents, is called a media file. These files need to be securely and reliably stored and retrieved for the user. Media files can be of any size, the user might upload a couple of kilobytes of plaintext to a few gigabytes of video. If you’re on the latter end of this scale, you probably need more specialized advice than this article is prepared to give.
The two types of Django deployments are:
Single-Server
A single-server Django deployment is exactly what it sounds like: everything lives on a single server. This strategy is very simple and closely resembles the development environment, but cannot handle large or inconsistent amounts of traffic effectively. The single-server approach is only applicable for learning or demonstration projects, not real-word applications that require reliable uptime.
Scalable
There are lots of different ways to deploy a Django project that allows it to scale to meet user demand. These strategies often involve spinning up and down numerous servers and using tools like load balancers and managed databases. Fortunately, we can effectively lump everything more complex than a single-server deployment into this category for the purposes of this article.
Option 1: Default Django
Small projects benefit from simple architecture. Django’s default handling of static assets and media files is just that: simple. For each, you have a root folder that stores the files and lives right next to the source code on the server. Simple. These root folders are generated and managed mostly through the yourproject/settings.py configuration.
Static Assets
The most important thing to understand when working with static files in Django is the python manage.py collectstatic command. This command rifles through the static folder of each app in the Django project and copies all static assets to the root folder. Running this command is an important part of deploying a Django project. Consider the following directory structure:
Notice that within each static folder, there’s another folder with the app’s name. This is to prevent namespacing conflicts after the static files are collected; as you can see in the above file structure this keeps app1/style.css and app2/style.css distinct. From here, the application will look for static files in this structure at the STATIC_ROOT during production. As such, reference static files as follows in a template in app1/templates/:
Django automatically figures out where to get the static file from in development to model this behavior, you do not need to run collectstatic during development.
Imagine a professional networking site with a database of users. Each of those users would have an associated profile, which might contain, among other things, an avatar image and a resume document. Here’s a short example model of that information:
from django.db import models
from django.contrib.auth.models import User
def avatar_path(instance, filename):
return "avatar_{}_{}".format(instance.user.id, filename)
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
resume = models.FileField(upload_to="path/string")
avatar = models.ImageField(upload_to=avatar_path)
For this to work, you need the following options in project/settings.py, like with static assets:
An ImageField inherits from FileField, so it shares the same parameters and capabilities. Both fields have an optional upload_to argument, which takes a string that is a path and appends it to the MEDIA_ROOT to store the file, which is then accessible by the same path on top of MEDIA_URL. The upload_to argument can also take a function that returns a string, as demonstrated with the avatar_path function.
Make sure to omit the media files directory and its contents from version control. Its contents may conflict when two developers test the same application on different machines, and it is, unlike static assets, not a part of the deployable Django application.
Option 2: Django With Services
My guiding philosophy is to use tools for what they’re best at. Django is an amazing framework, and it provides great tooling out of the box for user authentication, server-side rendering, working with models and forms, administrative functions, and dozens of other essential aspects of building web applications. However, its tooling for handling static assets and media files is not, in my opinion, well-suited for production on scalable sites. The Django core developers recognize that many people choose alternate approaches to handling these files in production; the framework is very good at getting out of your way when you do. Most Django sites intended for general use will want to incorporate static assets and handle media files using these non-Django-specific approaches.
Static Assets On A CDN
While small-to-medium projects can get away without one, a CDN (content delivery network) is easy to use and improves the performance of applications of any size. A CDN is a network of servers, generally worldwide, that distributes and serves web content, mostly static assets. Popular CDNs include Cloudflare CDN, Amazon CloudFront, and Fastly. To use a CDN, you upload your static files, then in your application reference them as follows:
This process is easy to integrate with your Django deployment scripts. After running the python manage.py collectstatic command, copy the generated directory to your CDN (a process that varies substantially based on the service you’re using), then remove the static assets from the Django deployment package.
In development, you’ll want to access different copies of your static assets than in production. This way, you can make changes locally without affecting the production site. You can either use local assets or run a second instance of the CDN to deliver the files. Configure yourproject/settings.py with some custom variable, like CDN_URL, and use that value in your templates to ensure you’re using the correct version of assets in development and production.
One final note is that many libraries for CSS and JavaScript have free CDNs that most websites can use. If you’re loading, say, Bootstrap 4 or underscore.js, you can skip the hassle of using your own copy in development and the expense of serving your own copies in production by using these public CDNs.
Media Files with a Dedicated Filestore
No production Django site should store user files in a simple /media/ folder somewhere on the server that runs the site. Here are three of the many reasons why not to:
If you need to scale up the site by adding multiple servers, you need some way of copying and syncing the uploaded files across those servers.
If a server crashes, the source code is backed up in your version control system, but media files aren’t backed up by default, unless you configured your server to do so, but for that effort you’d be better off using a dedicated filestore.
In case of malicious activity, it’s somewhat better to keep user-uploaded files on a separate server from the one running the application, although this in no way removes the requirement to validate user-uploaded files.
Integrating a third party to store your user-uploaded files is really easy. You don’t need to change anything in your code, except maybe removing or modifying the upload_to value of FileFields in your models, and configuring a few settings. For example, if you were planning to store your files in AWS S3, you’d want to do the following, which is very similar to the process of storing files with Google Cloud, Azure, Backblaze, or similar competing services.
First, you’ll need to install the libraries boto3 and django-storages. Then, you need to set up a bucket and IAM role on AWS, which is outside the scope of this article, but you can see instructions for here. Once all of that is configured, you need to add three variables to your project/settings.py:
Additionally, you will need to set up credential access to your AWS bucket. Some tutorials will demonstrate adding an ID and secret key to your settings file or as environment variables, but these are insecure practices. Instead, use django-storages with the AWS CLI to configure the keys, as described here. You may also be interested in the django-storagesdocumentation.
You don’t want development or testing media files to get mixed up with uploads from actual users. Avoiding this is pretty simple: set up multiple buckets, one for development (or one for each developer), one for testing, and one for production. Then, all you need to change is the AWS_STORAGE_BUCKET_NAME setting per environment and you’re good to go.
Performance And Availability
There are numerous factors that affect the performance and reliability of your website. Here are some important ones when considering static and media files that matter regardless of which approach you take to managing them.
Cost
Serving files to a user costs money for two reasons: storage and bandwidth. You have to pay the hosting provider to store the files for you, but you also have to pay them to serve the files. Bandwidth is substantially more expensive than storage (for example, AWS S3 charges 2.3 cents per gigabyte for storage versus 9 cents per gigabyte of data transfer out to the Internet at the time of writing). The economics of a file store like S3 or a CDN are different than the economics of a generalized host like a Digital Ocean droplet. Take advantage of specialization and economies of scale by moving expensive files to services designed for them. Furthermore, many file stores and CDNs offer free plans so sites that might be small enough to get away without using them can instead do so and reap the benefits without any additional infrastructure costs.
Compression and Transcoding
Most of the problems caused by static assets like photos and videos are because they are big files. Naturally, developers address this by trying to make these files smaller. There are a number of ways to do this using a mix of compression and transcoding in two general categories: lossless and lossy. Lossless compression retains the original quality of the assets but provides relatively modest decreases in file size. Lossy compression, or transcoding into a lossy format, allows for much smaller file sizes at the expense of losing some of the quality of the original artifact. An example of this is transcoding video to a lower bitrate. For details, check out this article about optimizing video delivery. When serving large files over the web, bandwidth speeds often demand that you serve highly compressed artifacts, requiring lossy compression.
Unless you’re YouTube, compression and transcoding doesn’t happen on the fly. Static assets should be appropriately formatted prior to deployment, and you can enforce basic file type and file size restrictions on user uploads to ensure sufficient compression and appropriate formatting in your users’ media files.
Minification
While files of JavaScript and CSS aren’t usually as large as images, they can often be compressed to squeeze into fewer bytes. This process is called minification. Minification does not change the encoding of the files, they’re still text, and a minified file still needs to be valid code for its original language. Minified files retain their original extensions.
The main thing removed in a minified file is unnecessary whitespace, and from the computer’s perspective almost all whitespace in CSS and JavaScript is unnecessary. Minification schemes also shorten variable names and remove comments.
Minification by default obfuscates code; as a developer, you should work exclusively with non-minified files. Some automatic step during the deployment process should minify the files before they are stored and served. If you’re using a library provided by a third-party CDN, make sure you’re using the minified version of that library if available. HTML files can be minified, but as Django uses server-side rendering, the processing cost of doing so on the fly would most likely outweigh the small decrease in page size.
Global Availability
Just like it takes less time to send a letter to your neighbor than it does to send it across the country, so to does it take less time to transmit data nearby than across the world. One of the ways that a CDN improves page performance is by copying assets onto servers across the world. Then, when a client makes a request, they receive the static assets from the nearest server (often called an edge node), decreasing load times. One of the advantages to using a CDN with a Django site is decoupling the global distribution of your static assets from the global distribution of your code.
Client-Side Caching
What’s better than having a static file on a server near your user? Having the static file already stored on your user’s device! Caching is the process of storing the results of a computation or request so that they can be accessed repeatedly more quickly. Just like a CSS stylesheet can be cached around the world in a CDN, it can be cached in the client’s browser the first time they load a page from your site. Then, the stylesheet is available on the device itself in subsequent requests, so the client is making fewer requests, improving page load time, and decreasing bandwidth use.
Browsers perform their own caching operations, but if your site enjoys substantial traffic, you can optimize your client-side caching behavior using Django’s cache framework.
In Conclusion
Again, my guiding philosophy is to use tools for what they’re best at. Single-server projects and small scalable deployments with only lightweight static assets can use Django’s built-in static asset management, but most applications should separate out assets to be served over a CDN.
If your project is intended for any kind of real-word use, do not store media files with Django’s default method, instead use a service. With enough traffic, where “enough traffic” is a relatively small number on the scale of the Internet, the additional complications to architecture, the development process, and deployment are more than worth it for the performance, reliability, and cost savings of using a separate CDN and file storage solution for static and media files, respectively.
Before COVID-19 hit, the option of working from home was available to only 7 percent of the U.S. workforce, mostly highly paid white collar workers. That percentage has increased more than nine-fold to 66 percent of employees in the weeks since the pandemic barred everyone not designated an essential worker from going to their jobs. This abrupt change means that a lot of people accustomed to working in their offices are finding new ways of doing their jobs.
Working from home isn’t easy, even for those who have been doing it for years. There are distractions, from chores to pets, that you used to leave behind when you “went to work.” It’s also difficult to develop, and stick to, a new routine.
Collaborating with coworkers you’ve shared offices with for years is a challenge now that you’re no longer talking face to face. There are no more casual lunchroom conversations. Working from home can be lonely.
We’ve written this guide to help you successfully make the adjustment to working from home, whether you run a business or work for someone else. Here’s what you’ll learn:
What is working from home? This chapter will explain what working from home actually means, why it was already becoming more common even before the pandemic, and current trends and statistics.
Remote work vs working from home. There are some differences between remote work and working from home, and this chapter gives you a brief overview.
Advantages and disadvantages of working from home. Like everything else, there are upsides and downsides to working from home.
How to create an effective work-from-home policy. This chapter teaches employers how to set employee expectations, determine which positions are eligible to work from home, and decide on prudent security measures.
How to work from home successfully. This chapter gives employees tips on staying focused, establishing a routine, communicating with coworkers, and managing distractions. You’ll also learn how to set up a home office.
Best work-from-home software. Technology makes it possible to work from home. This chapter covers the software you’ll need to succeed.
Though this guide is intended for both managers and employees who are making the switch to working from home, there’s a lot here that can be valuable to work-from-home veterans, too. Whether you’re an employee, a manager, or a WFH vet, these tips can help you be more efficient and get more out of the experience.
What is working from home?
Before the COVID-19 pandemic, the average American worker spent 4.35 hours per week, or 26.1 minutes each way, commuting to and from work. The commute in the notoriously congested Washington, D.C. metro area averages 43.6 minutes, one way. The productivity argument for working from home has gained a lot more traction now that “shelter in place” orders have limited the choices to working from home or not at all.
Working from home (WFH), also known as teleworking, remote working, or flexible workplace, has long been viewed as a benefit for a small percentage of employees. Many people think it’s an option made possible by the internet, but it’s actually been around for almost 50 years.
The history of working from home
The first work-from-home experiment involved 30 federal government workers in the 1970s, when the oil supply crisis resulted in long gas lines and expensive fuel. Farsighted employers considered ways to shorten commutes, such as building satellite offices instead of everyone commuting to headquarters, or eliminating commutes altogether. In the 1980s, JCPenney began hiring home-based call center workers.
Telecommuting grew after passage of the Clean Air Act Amendments of 1990 prodded large businesses to address long commutes. In 1996, the federal government implemented the National Telecommuting Initiative to demonstrate its commitment to more teleworking opportunities.
Working from home today
Thanks to widespread high-speed internet access, video conferencing, and collaboration apps, a laptop is all an employee needs to do their job and stay in touch with colleagues.
Working from home today typically begins when employees set up a workspace in their homes where they can do their jobs — including everything from preparing presentations and reports to conducting phone interviews and developing software.
Many jobs lend themselves well to a work-from-home arrangement. Virtual assistants, for instance, communicate with their employers via communication apps to complete many of the duties an onsite administrative assistant would.
Well-trained customer service representatives were some of the original work-from-home employees. Now many companies use a browser-based interface that enables home-based customer service representatives to answer calls and troubleshoot problems via live chat.
Technology is rapidly expanding the jobs that can now be done from home. Lawyers and paralegals have access to online databases like Westlaw to look up cases, as well as electronic case management systems, for example.
Home offices vary. Employees who primarily work from home typically have a dedicated home office space in a spare room. Those who work from home occasionally often improvise, using whatever desk or table is available. They might also set up on their couch and use a coffee table, or create a standing desk.
Why work from home
Working from home has become more common in recent years as technology has improved and more employers recognize the moral value of trusting employees. Employees treasure the flexibility and work-life balance.
A Future of Work survey of managers found that 78 percent ranked telecommuting and flexible schedules as two of the most valuable benefits for retaining employees. More than half of employers provide their employees with the necessary devices for working remotely, while 36 percent facilitate working from home by using cloud-based file management tools.
Businesses and employees both see the benefits of working from home. Employees appreciate the hours they gain from not commuting, while employers recognize savings when they don’t have to provide dedicated office space. Studies have found that office desks are vacant 50–60 percent of the time.
Working from home gives employees time to attend to their health, like exercising before or after work, instead of sitting in traffic. Employees appreciate the flexibility that working from home gives them; they can pick up their child from school, go grocery shopping, or start a load of laundry between client calls. The money they save on commuting costs is basically a raise that costs the company nothing.
Work-from-home trends
While COVID-19 has accelerated the adoption of working from home, it was already on the rise. From 2005 to 2018, the number of employees who regularly work from home grew 173 percent.
Employees increasingly want to work from home. The vast majority (80 percent) want to work from home at least some time, and 35 percent would leave their employer for another job if they could work from home full time.
Larger companies have long been more likely to offer employees the chance to work from home, but small businesses are increasingly allowing employees to work from home as well. Smaller businesses often look for remote employees for bookkeeping, human resources, marketing, web development, and information technology to reduce overhead.
Access to work-from-home opportunities varies by the type of position and the industry. Management, business, and financial employees have the greatest ability to work remotely, as do those who work for insurance carriers and professional services firms like advertising agencies and law firms. These tend to be knowledge workers who do most of their work on computers.
Five of the fastest growing work-from-home positions are therapists, virtual assistants, client services professionals, tutors, and state and local government workers. Some other common positions are teachers, writers, developers, analysts, sales representatives, and nurses.
Working from home is on the rise across a variety of occupations. The COVID-19 pandemic is showing employers that workers can be productive in a setting other than the office. It’s likely that working from home is here to stay for a lot more people.
Remote work vs working from home
The number of people working remotely increased 159 percent between 2008 and 2020. Many people use the terms “remote working” and “working from home” interchangeably for employees who don’t commute to work at the company offices, but remote work and working from home are not identical.
The two aren’t mutually exclusive, either. Someone who works from home can also work remotely, and vice versa, but both remote work and working from home are here to stay. Polling shows 80 percent of employees want to work from home, at least some of the time.
Here’s how remote work vs working from home stack up.
Working from home
Working from home is exactly what it sounds like: work that you do where you live, whether in a dedicated home office or at an improvised location, such as your kitchen table or out on the patio on a nice day.
Some people work from home because they’re caretakers of children or older relatives. Working from home lets them meet the needs of the people they’re responsible for while still doing their jobs.
Others work from home occasionally as a respite from the commute to a distant office. They can take care of personal responsibilities, like being home for their child when there’s an early school dismissal or letting in a repair person without taking a day off.
Working from home often describes a temporary situation, like what we’ve seen to comply with orders closing “non-essential” businesses during the COVID-19 pandemic, or in ordinary times when an employee needs to be at home for a specific reason that day. For example, an employee might opt to work from home when they need time without distraction to complete a big project.
Remote work
Remote work typically refers to an employee who mostly, or entirely, works outside the company’s established offices. Usually the employee lives too far from the company’s actual location to commute daily. The employee may, or may not, work from their home, but they primarily work at a location other than the company offices.
Unlike working from home, however, remote work can be a little bit more like going to a traditional workplace. For example, some remote employees work from coworking spaces. This requires them to be in a semi-public environment and travel to the coworking space, which means some kind of commute and casual dress code.
Another type of remote work is when employees who work from home leave for awhile to work at a coffee shop or other public space. This is a more relaxed environment than a coworking space, but it does require leaving the house.
There are the employees, like field sales representatives, who have been doing remote work for years. They’re the “road warriors” or digital nomads who use their laptops and cell phones to work from diners and airport lounges between sales calls.
While it’s fine to use remote work and working from home interchangeably, it’s important to note the subtle differences between them. Working from home typically describes a situation where someone doesn’t work in the office, either for a day or more regularly. Remote work is done away from the office, but not necessarily at home. Remote workers often live too far away from the company’s offices to commute on a daily basis.
Both remote work and working from home can be used to increase employee satisfaction and possibly decrease overhead.
Advantages and disadvantages of working from home
Working from home can be both a blessing and a curse for companies and employees alike. On the one hand, employers can reduce turnover by 25 percent, saving $10,000 per year, and reduce unscheduled absences by 63 percent. On the other hand, 22 percent of employees believe some people will abuse the privilege and get less work done.
But as telecommuting and remote work become easier and more economical, both companies and employees need to weigh the advantages and disadvantages to determine if it’s a good fit for them. While 35 percent of employees would quit their job if they were offered a job that allowed them to work from home full time, only 27 percent of companies offer this option.
As you’re weighing whether or not to implement a permanent work-from-home policy, here are some of the pros and cons for both employees and employers.
Pro: Employees save money and time
Probably the biggest advantage for employees who work from home is how much money and time they save by not commuting. An employee can save between $2,500 and $4,000 per year when they don’t have to travel, park, or buy food during the workday. (In Manhattan, a sandwich can cost $15.)
Employees who work from home have a lot more free time. Working remotely even half time saves an employee, on average, 11 work days per year they would have otherwise spent commuting. If an employee has a very long commute, that time can triple. The time not spent commuting is time they have for personal care and family, and they can still get their work done.
Remote employees also save money on their wardrobe. Instead of dressing up for the office and spending money on dry cleaning, they can work in casual (and machine washable) clothes, and save their professional wardrobe for meetings with clients.
Pro: Employees are more productive
While some associates who work from home take naps (not that there’s anything wrong with napping) and binge-watch television, good employees tend to buckle down and manage their time well. Remote workers are often more productive, and less distracted, at home than they are at the office.
Workers who don’t spend hours commuting can start work earlier and manage their time to work when they are most productive. Employees who are at their best first thing in the morning can log in while they’re drinking coffee and get started on the big tasks for the day when most people are still commuting to the office.
Pro: Employers can boost green initiatives
In 2018, 28.2 percent of U.S. greenhouse gas emissions came from transportation. Companies that allow working from home help reduce emissions, a significant green initiative that resonates with employees.
Additionally, the energy used to keep offices lighted, ventilated, and climate controlled is another significant source of greenhouse gas emissions. As more employees work from home, employers can reduce the size of offices, reducing emissions and rental costs.
Pro: Employees have flexibility
Many employees want to work from home so they have more time for their other responsibilities, like caring for children or an elderly relative, or simply getting their grocery shopping and household chores done. Working from home basically gives the employee the time they would have spent commuting to deal with the rest of their lives. Allowing remote employees to manage their time lets those who want to start earlier have more time in the late afternoon to do homework with their kids or drive an elderly relative to a medical appointment.
Perhaps the biggest single benefit of working from home is the flexibility it gives employees to attend to their own needs. They can schedule their regular dental checkup or just pop out to the grocery store to grab some things for dinner, instead of spending that time commuting.
Pro: Employers can draw from a larger talent pool
Companies with work-from-home or remote work policies aren’t restricted to the talent pool that’s within driving distance of their offices. Those companies can tap into talent from anywhere.
This is an immense advantage if you’re located where the unemployment rate is low. You can recruit and hire far from your headquarters. You can also diversify your workforce. A good work-from-home policy opens opportunities to talented people who might otherwise be unable to commute to your location.
Con: Employees may work too much
The COVID-19 pandemic has resulted in many companies abruptly allowing employees to work from home, often because the only alternative is to temporarily shut down entirely.
Many have found that employees are working longer days. One study found U.S. employees were logged on for an additional three hours per day compared to pre-COVID-19 shutdowns. While this might sound like a boon for employers, it risks a burned out team that’s less productive in the long run.
One reason for the long hours could be that employees want the boss to see they are still productive when they work from home. However, working too much leads to employees making mistakes or burning out, which defeats the purpose of allowing them to work in an environment of their choosing.
Con: The line between work and home gets blurry
One advantage of commuting to an office is that you have a well-defined boundary between work and home. Sure, an employee might check their email from their phone in the evening, but for the most part, they leave their work on their desk when they go home.
Working from home blurs that line. For remote employees, and particularly those living in a small space, their “office” might be a table in a corner with their laptop that’s always in their line of sight, even when they’re trying to relax. The employee never feels they are really done for the day.
The result too often is an employee who works harder than anybody expects, and is stressed out and less productive because they are burned out.
Con: Less face time, less teamwork
Employees working from home simply don’t have as much face time with their coworkers as they do when the team is at the same location every day.
One survey found that 22 percent of telecommuters felt isolated and missed the company of their team. Another 17 percent said their interpersonal relationships suffered because they didn’t have face-to-face interaction with their coworkers. It’s hard to read another person’s nonverbal cues when you’re not in the same room.
Loneliness increases stress, harming mental health in a way that can result in depression, anxiety, and sleep problems.
Con: Employees may have technology issues
Don’t assume employees will have all the tech tools at home they need to be successful. They may not have second monitors and higher definition webcams that we take for granted at the office.
There may also be issues with the employee’s internet connection at home. During the COVID-19 pandemic, broadband internet service providers saw a 27 percent surge in core network traffic. In dense residential areas, these traffic spikes can strain the networks and cause connections to slow down.
Con: Employers may think employees are slacking
When an employee working in the office doesn’t answer a call or email right away, we assume they are in a meeting or otherwise busy. When an employee who works from home doesn’t answer the phone on the first ring, or doesn’t answer an email for an hour, coworkers and managers wonder if the employee is really working or just slacking off.
For every employee who slacks off while working from home, there are 10 who put in extra time at night. People who primarily work from home have the same engagement rate as the overall employee population, which hovers at 30 percent. Engagement has little to do with whether the person works from home or at the office, and far more to do with opportunities for professional development and the quality of their relationships with coworkers.
Working from home has its advantages and disadvantages, both of which are important as you explore allowing your team to work from home. Carefully consider whether the pros outweigh the cons for your company, and how your employees will adapt and perform if the situation is permanent.
How to create an effective work-from-home policy
Though the option to work from home has long been a coveted employee benefit, just 7 percent of employees enjoyed this benefit prior to the coronavirus pandemic.
The pandemic led to “shelter in place” orders that effectively forced companies to choose between shutting down entirely or shifting their teams to working from home. In the space of just a few weeks, 67 percent of companies began allowing employees to work from home. Millions of employees got a laptop, instructions on how to log in, and not much else from their employers.
Fewer than half of companies have work-from-home policies in place for their newly remote workers. The result is confusion and frustration as employees try to determine what’s expected of them. Work-from-home policies guide both companies and employees for the long term. Post-pandemic, employees may want to continue working from home occasionally, and a well-considered policy can help foster that.
What is a work-from-home policy?
A work-from-home policy defines what’s expected of both the employer and the employee when employees work from home. It covers the needed company-issued equipment and clarifies what positions are eligible to work from home, how to request that benefit, and how it gets approved.
The purpose of setting up this policy, like any other workplace policy, is to provide employees with what they need to successfully work from home. A good policy mitigates the disadvantages of working from home while making this option available to as many employees as practical.
How to set expectations for employees
Everyone who works from home will need to know what’s expected of them. When you create your work-from-home policy guidelines, make clear how many hours employees should put in, the communication apps they need to use, and how often they must check in.
Additionally, tell employees about mandatory meetings that they will have to attend. For example, you might set up a Monday morning check-in video call with your remote team to clarify the goals for that week.
The policy should specify the output you expect from employees who work from home. This should correlate with what the employees already produce, like the number of contracts a paralegal usually drafts per day when working in the office. A work-from-home policy should specify the technology employees will need to be trained to use, such as video conferencing and collaboration applications.
Make clear which expenses — such as upgrading home internet connections for employees — you’ll cover, so that employees can include them on their monthly expense reports.
Determining work-from-home eligibility
Not every employee is a good candidate to work from home. For starters, there are some occupations that require you to be in a physical location, like on the manufacturing floor. Others work in teams that require a higher degree of team collaboration than possible when they work from home. Some employees might handle sensitive information, raising cybersecurity and data privacy concerns if they work from home.
Finally, there’s also the question of how suitable the employee’s home environment is for work. How quiet is their home? If their job requires them to be on a lot of conference calls, they’ll need a space where they can be on these calls without being interrupted and, if they’re dealing with sensitive information, overheard.
Work-from-home security
Cybersecurity and data privacy are bigger concerns when employees work from home. All organizations need to institute security measures to protect both employees working from home and the company from potential data breaches.
A company’s virtual private network (VPN) can give users a false sense of security. Even if a VPN is installed, hackers can still manipulate it if there’s already malware on the home network. Consider how to protect all the data transmitted using security tools besides VPNs, like endpoint security software.
Secure forms for internal data collection, like forms created with JotForm, add an important layer of protection. For example, an employee might collect customer payment information during a video conference. That information needs to be encrypted so that the company complies with the Payment Card Industry Data Security Standard (PCI-DSS).
The importance of trust for successful remote workers
If working from home is new to you and your employees, you may wonder if they’re actually working. It’s tempting to install software on their company-issued devices to monitor them, or require them to check in repeatedly, but micromanaging often backfires.
It’s much better to build trust by setting clear expectations for your employees and giving them the autonomy to get their work done when they work from home. Tell employees how you want them to communicate their progress on different projects, like an end-of-the week email or a one-on-one call on Monday morning, and then trust them to do so.
Focus on the employee’s work product, not necessarily how much time they’re spending in front of their computer. Understand that employees who work from home will need to attend to other responsibilities. But if they’re still doing their work well, it shouldn’t matter if they’re parked in their chair from 9 to 5 with a lunch break at noon.
Establishing a work-from-home schedule
Remote employees still need normal working hours so that, for example, they’re available for meetings or to answer questions.
A work-from-home schedule will keep you on the right side of the U.S. Department of Labor. The Fair Labor Standards Act (FLSA) requires you to pay overtime if nonexempt employees work more than 40 hours per week. If your hourly employees are working from home, this can add up quickly.
Employees who work from home tend to work more hours, not fewer, than those working at the office. A work-from-home schedule gives them clear guidelines so they know when they are really off work. This is important for avoiding burnout.
Consider letting your employees guide some of their schedules. For example, they can be available for calls between 10 a.m. and 3 p.m., and have a hard stop on their workday at 5 p.m.
The post-COVID-19 WFH world
If you find that employees successfully complete their work while working from home during the pandemic, you may want to consider making the policy permanent. You can ease into this by allowing employees to work from home on specified days of the week or allowing employees to telecommute one or two days of their choosing.
You could also create a policy allowing them to work from home as needed, like on school holidays when their kids are home or when they’re not feeling well enough to come into the office but aren’t sick enough to justify taking a day off.
Ultimately, a good work-from-home policy will help both you and your employees succeed when they’re not in the office. Be thorough, and use the policy to build trust with your employees by setting expectations. Make sure there are security protections so that your data isn’t compromised, and help them establish working hours. This will be beneficial for everyone involved.
How to work from home successfully
Since the COVID-19 pandemic hit, 42 percent of Americans have begun working from home. And now that they’ve gotten a taste of it, 24 percent say they want to keep working from home, either entirely or more often. Sixty percent of them say they’re just as productive — or even more productive — working from home.
But for those who are struggling to work from home successfully, or once the novelty wears off, it can be difficult to maintain the same level of productivity. Whether it’s a stack of dishes begging to be washed or difficulty collaborating with teammates, here are some tips for making the most out of working from home.
Set up for work-from-home success
Staying focused is a challenge when you’re working from home. Chores, pets, and other distractions abound. That’s why it’s so important to put in place a framework that will boost your productivity.
A basic way to do this is to make an action plan every day, separate from your list of projects. This is where you drill down on what you will accomplish just this one day. Break your big projects into discrete tasks you can do in daily increments. That way, you know what to work on every day and why it matters.
Build rewards into your daily action plan to make tasks more enjoyable and help you get them done faster. For example, if you have a tedious task on your list, “reward” yourself with your favorite coffee once you’ve completed it.
Establish work hours
Flexibility is one of the biggest perks of working from home, but it’s also one of the biggest pitfalls. Your employer’s work-from-home policy may require you to be available for certain hours of the day. But if not, or if those hours your employer specifies aren’t enough, you’ll need to establish work hours to stay productive.
One tip for establishing work hours is to consider when you’re at your most productive. For example, if you’re a morning person, you might start your workday at 7 a.m., then work until lunch and take a long break.
Also consider your other responsibilities. If you have children at home, your work-from-home hours need to accommodate their schedules. You might start your workday after you’ve gotten them on the school bus, then take a long break when they get home.
Maintain a work-from-home schedule
Set a work-from-home schedule that details what you do during working hours, including your start time, breaks, and when you end your workday. It helps to establish rituals that signal the beginning and the end of the workday.
For example, your workday startup and workday shut down routine can involve simple but necessary tasks, such as reviewing your calendar, responding to email and other communications, and making your preliminary list for the next day.
Start your workday at a set time, just as you would if you were going to the office. You don’t need to wear office attire, but dress in a way that signals you’re working. This can start another ritual, of dressing for work but also changing into casual clothes when you’re done for the day.
As you head to your work-from-home space, tell everyone you live with that you are at work and shouldn’t be interrupted unless it’s important.
Leverage remote communication tools
Collaborating on projects and staying connected with coworkers is what makes teams effective, but you can’t pop over to a coworker’s desk to ask for a second opinion on that client presentation when you’re working from home. Email is often clunky, and you don’t know when someone will read your message.
Fortunately, high-speed internet connections make this a bit easier with tools like Slack, which let you ping a coworker with a question or join a water cooler-type channel to discuss the latest binge-worthy streaming show.
Video conferencing software makes meetings far more interactive than telephone conferences. You don’t have to play “guess the voice” when you can see your coworkers’ faces. Some software, like Zoom, Microsoft Teams, and Google Meet, allow you to run presentations and share your screens.
Forms are a much more efficient way to collect end-of-the-day (or week) reports than email. Forms also are more efficient for requesting office supplies or IT help. Many employers use remote life surveys to see how their employees are adjusting to working from home.
Avoid distractions at work
Working from home comes with its own set of distractions: household chores, family members, and the temptation to take a short break that extends for hours. The flexibility of working from home can reduce the productivity you had when a manager was looking over your shoulder.
One source of distraction is the computer. No one is watching you check Facebook for the umpteenth time or read the latest celebrity gossip instead of working on a spreadsheet.
Fortunately, there are tools you can download to block distracting websites. Strict Workflow is a free plug-in on Google Chrome that blocks specific websites for 25-minute blocks of distraction-free work. Similarly, StayFocusd limits the time you spend overall on distracting websites. Once you’ve reached your time limit, you’re done for the day.
Another trick is to turn on the “do not disturb” feature on your mobile phone, then put it out of sight. This will help you resist the temptation to check social media or text messages while you’re working.
Earplugs are an inexpensive way to minimize distracting outside noise, or you can invest in a set of noise-canceling headphones. Many people find listening to music distracting, so a white noise app or a site like Coffivity that plays café sounds on a loop can help you focus.
Set up a home workspace
It’s tempting to curl up on the couch in your pajamas with your laptop, but that’s more conducive to taking a nap or watching TV than working. To be productive when working from home, you need a home workspace where you can get down to business.
A spare room set up as a full home office is ideal. You can bring in tools that help you stay productive, like a second monitor, a whiteboard, or a white noise machine. You can shut the door to enforce boundaries.
If that’s not an option, establish a discrete area where you work and only work. This can be as simple as a small desk in a corner of your home exclusively for remote work. If you can, get a roll-top desk you can close so that, once you’re done for the day, your work is out of sight and out of mind.
Get the right work-from-home equipment
A laptop and an internet connection are the basic tools you’ll need, but they probably won’t be sufficient. You should have the communications tools and productivity software you normally use at work. Check with your company’s IT team to make sure you have access to them, as well as security software to protect company data.
Make sure your home computer is fast enough to handle the software tools you’re using. Your company should issue you a device that meets this need. You need a reliable internet connection and a good wireless router to stay connected.
Comfortable work-from-home office equipment is well worth the investment. Treat yourself to an ergonomically friendly space, with a comfortable office chair and keyboard.
Working from home successfully will take planning. Set a schedule, manage distractions, and establish a workspace. Once you do, you’ll maintain or even exceed the productivity you achieved in your company’s physical office.
Best work-from-home software
The hardware that makes it possible for many to work from home becomes far more useful when paired with the best available work-from-home software. If you’ve suddenly found yourself working from home, you have a lot to choose from. The market for collaboration and social software, including messaging apps and collaboration in cloud office suites, is projected to reach $4.8 billion by 2023, according to Gartner.
Using the right work-from-home software improves the performance of each team member and helps managers keep teams on track. These tools make it possible for employees who work from home to collaborate, share documents, and manage projects.
Working from home has many advantages, but you can’t drop by the desk of a coworker to chat about the status of an assignment. These work-from-home software tools fill the gap.
JotForm
JotForm is unrivaled for ease of use and versatility. It allows you to quickly design forms for employees to request the support and resources they need. JotForm makes it easy for employees who work from home to submit help tickets to the IT department or file end-of-the-week reports.
JotForm includes powerful collaboration features. Multiple team members can work on the same form simultaneously, and all changes are saved automatically. You can also Assign Forms to teammates.
JotForm integrates with nearly all work-from-home software, including tools like Google Drive and Slack as well as the software mentioned below. It’s easy for employees to use JotForm alongside the tools they already use.
monday.com
monday.com is a team management platform that lets you use templates and building blocks to set up boards to manage projects and workflows. You can use it to track project status and create action items from video chats.
monday.com offers board templates for daily task tracking, creating a company knowledge library, and resource management, among many others. The company also created communications planning and risk assessment templates for organizations to use during the COVID-19 pandemic.
monday.com includes automation capabilities for many routine tasks, such sending automatic email alerts when the status of a task changes.
Dropbox
Collaborating with team members remotely requires secure access to files and the ability to work on those files together. Dropbox is a cloud storage service that provides access to your files no matter where you are.
You can also make files available offline so that you can work on them without an internet connection, if necessary. Once you’re reconnected to the internet, Dropbox will automatically update your files.
Paper is a great collaboration feature baked into Dropbox. It lets you organize projects using to-do lists, timelines, and tables. You can add relevant files so that all the content you need for the project, like PowerPoint presentations and Word documents, is in one place.
Dropbox also lets you make notes directly on files and share feedback without downloading additional software.
DocuSign
Even companies working remotely require signed contracts before they will begin work. DocuSign integrates with JotForm so you can easily send forms to be signed by employees, vendors, or customers.
This saves time and money for everyone involved. Because the extra steps involved in printing contracts are eliminated, contracts are signed faster, and employees can start working on projects sooner.
Asana
Asana is a project management app that lets you create checklists, calendars, and boards to manage projects. You can choose the structure that works best for your team and set deadlines and priorities for different tasks.
Asana has features that track the status of projects and tasks. It also enables you to create visual product plans that help you map out each step and identify potential roadblocks.
Asana offers workflow automation tools as well. You can create rules for tasks, like assigning work and due dates. You can write your own rules or use automation templates, as well as create templates from projects that you do regularly.
Choosing work-from-home software
These are just five of the many work-from-home software tools available to help employees and teams collaborate and stay engaged.
When you’re choosing work-from-home software, consider what you’ll be integrating it with, the comfort level of your employees, and your own personal preferences. For example, both Asana and monday.com are project management tools. They have many similar features, so explore both to determine which you prefer, like checklists or boards to organize projects.
All of these tools minimize confusion so that, even if someone isn’t in the office, they have the same information as everyone who is. They can access the files they need to work and collaborate with their teams.
This software can help employees who work from home be as productive as they were in the office.
Conclusion
Working from home can keep a business operating during a pandemic, weather interruption, or any other situation that closes down headquarters. It can also help employees handle other responsibilities and perhaps be even more productive.
While working from home was gaining in popularity before the COVID-19 pandemic, very few employees worked from home routinely and few employers were prepared for the shift required to make working from home a success.
One way employers can set up their employees for WFH success is by creating a work-from-home policy. This provides expectations for employees, and helps them set their own working hours and establish a viable home workspace, as well as communicate and collaborate with their teams.
Technology is essential, and that means more than just a laptop. Collaboration, project management, and file sharing applications are critical WFH software. Providing employees with these tools will help them be more productive, regardless of their location.
Working from home is likely to be an important employee benefit after the coronavirus pandemic passes. As long as employees know what you expect from them and have the right resources, it can be a success for everyone involved.
Some brands become so popular that their name becomes associated with the product itself. Photoshop is one of them. Even if people aren’t using Photoshop, they call editing photos as photoshopping.
It’s only natural that Photoshop became so popular as it was the first comprehensive “photoshopping tool”. However, the industry is far from stale. There are dozens if not hundreds of Photoshop alternatives that try to match Photoshop’s quality and beat its steep pricing. Also, it’s no secret that it’s quite difficult to learn Photoshop.
In this article, we searched far and wide to find the best photoshop alternatives that are more accessible than the behemoth that Adobe Photoshop is while also bringing the same usability to the table.
Affinity Photo is probably the best Photoshop alternative out there. Because unlike most, Affinity is not there to be a substitute for Photoshop but to replace it. It has most of the features you need from the original Photoshop but unlike the steep subscription price of it, you only need to buy it once for an acceptable price.
Corel Photo-Paint is another strong contender to be the best Photoshop alternative. It’s part of the full design suite of Corel Draw Design Suite which can be used as an alternative to most of the Adobe suite. However, unlike many tools on this list, this one has a steep price even if you only need to buy the software once.
GIMP deserves a special spot in this list as it’s the only open-source and completely free tool here. We have a soft spot for open-source software and GIMP doesn’t disappoint its users as it covers almost all of the Photoshop features. It’s web-based so, like most web-based photoshop alternatives, it can be slow at times but it still gets the job done easily. Don’t forget to check our free GIMP brushes article as there are many options that GIMP offers.
Just like many other photoshop alternatives, Pixelmator Pro is also a tool only available for Mac OS. It’s an excellent alternative to Photoshop as it has a simpler UI while retaining most of the usability and is a lot cheaper than Photoshop.
Acorn is another Mac OS-only photoshop alternative that is a lot cheaper than the original Photoshop and it’s a one-time purchase. Acorn started off as a cheap Photoshop alternative for people who needed solid photo editing software without the entire functionality and price tag of Photoshop but in the last 13 years, it has added many functionalities and has become a robust alternative to photoshop.
Pixlr is one of the best tools to get into photo editing. It’s a web-based photoshop alternative that is extremely cheap compared to the steep prices that similar tools have. It’s also web-based so it’s particularly a good option for novices as normally photo editing or design software like Photoshop can be quite heavy on your hardware.
Pic Monkey is another good photoshop alternative for people who might not have the necessary hardware to work efficiently on photo editing. It’s a web-based tool that is also extremely affordable and has most of the photoshop features. Due to being web-based, sometimes it can be a little slow but it will still be much better than running Photoshop on poor hardware.
Sketch has been widely accepted by the design community. It’s a Photoshop alternative that also has the functionalities of Illustrator which makes it a good 2 in 1 tool for designers that use both. It’s packed with features and is a really strong tool which is, unfortunately, reflected on its price tag as well. Although there are some free Sketch resources available as well. Sketch is ideal for people who are looking to switch from Photoshop rather than for people who are looking for a more accessible alternative.
Fotor is a Photoshop alternative that is really similar to Canva. It covers both tools functionalities and it’s quite popular among social media professionals too. To access its full functionality users need to pay a monthly subscription.
Procreate is one of the most popular iPad apps for drawing and photo editing. For people who use their iPad to design and edit, Procreate is by far the best Photoshop alternative. It’s excellent to use with a drawing pen and compared to its desktop counterparts it’s not as pricey. Unfortunately, Procreate is only available for Mac and iPad users but you can check our list of alternatives that work for Windows, Procreate for Windows, and for Android, Procreate for Android.
Krita is one of the few free tools on this list. It’s an open-source photoshop editor that resembles Photoshop. It has almost all of the features and also has a premium version which only expands on that, making it a great alternative for Photoshop. Its only drawback is that it doesn’t have a history feature so that might be a deal-breaker for some.
Canva has been quite popular as an entry-level Photoshop alternative and it’s particularly popular among social media professionals. Its best part is that it’s free and web-based so it doesn’t get more accessible than that. The recent launch of Canva’s desktop version has solidified its stance as a solid Photoshop alternative.
All in all much has changed since Photoshop entered and build the entire photo editing industry. It’s a much more robust and crowded one now. The success of Photoshop has led to many more Photoshop alternatives to emerge and satisfy the needs of different users that constitute the wide user base of Photoshop while some others are playing to beat the paragon of photo editing.
Now we have this 400px magic number which is really not ideal. But the fact that this works and is so simple makes it extremely appealing that I use it production all the time.
But the magic number isn’t the only problem. Another problem is scrollbars.
When we set max-height: 0;, we also need overflow: hidden; to make sure the dropdown is actually hidden when it is closed. When the dropdown is open, we should probably be using overflow: auto; so that we don’t accidentally cut off content in case the natural height of the dropdown is taller than the max-height after it expands. The use of overflow: auto; solves that problem while introducing another: during the expansion, our dropdown will always have scrollbars for at least part of the expansion, even if the final expansion height doesn’t need them. That’s awkward!
CSS trickery to the rescue.
We can still use overflow: auto; on the expanded state — we’ll just override it during the animation. As we learned in the great CSS specificity battle, @keyframes have an amazing ability to override anything while they are active. Let’s use them not to animate the opening, but just for this scrollbar-hiding functionality:
Try adjusting the height to something less to see how you don’t see scrollbars during the animation but only at the end when they are needed. That causes a little bit of jerkiness when the scrollbar pops in, but that was acceptable in my case as it’s rare that it happens at all. If you absolutely wanted to stop the jerkiness, you’d probably apply a (custom) scrollbar at all times to the dropdown and perhaps adjust the styling of the scrollbar during the animation, if needed.
Credit here to Mr. Stephen Shaw of the fancy @keyframers for this trick. I yanked him in to help me figure it out while I was working on it for something on CodePen. We decided to turn the trick into a video for the CodePen channel showcasing Collab Mode, which we used to figure out the problem/solution:
When it comes to boosting organic reach, nothing works quite as well as a solid content marketing strategy. But no matter how much you churn out, the truth is, quality always beats quantity.
To stand out from your competitors (who are probably well-aware of the importance of content as well), you need to learn how to create something amazing.
Generating epic content isn’t that simple. Especially if you’re taking a DIY approach to your blog, YouTube channel, social media accounts, or podcast. But, it’s not impossible to produce either. All you need are the right tools and tips to make the most of your resources.
If you’re ready to step up your game, read on to learn how you can create posts that raise the bar.
1. Come up with a great topic
Before you get down to writing or recording, you need to have a clear understanding of the exact message you want to send out to your audience. After all, nobody likes reading a page full of rambling that’s got no beginning, middle, ending, or value. So make sure you’ve got your topic figured out.
For a good place to start, you can check out HubSpot’s Blog Ideas Generator, which is a helpful tool you can turn to whenever you lack inspiration.
2. Make your headline attention-grabbing
Whether you’re the type of person who starts from the headline or tends to do their writing first and circle back to the beginning, know that the title you choose for your post is going to determine whether you get the results you want. So ensure it’s attention-grabbing, optimized for SEO, and that it ties in well with your central topic.
According to research, one of the most successful marketing strategies is to appeal to your reader’s emotions. And your headlines can be a huge part of that strategy. So, before you click publish, you can run it through the Headline Analyzer, which will check its Emotional Marketing Value and let you know whether you’ve got it right or if you still need to do a bit of polishing.
3. Check your readability score
When writing for the web, aim to make your text understandable to anyone over the age of 13. This means skipping complicated words, keeping sentences short, and avoiding the passive voice. You should also try to shorten your paragraphs, break your text up with headlines, and use bullet points where possible.
The Hemingway Editor app is one of the best tools out there. It will let you check your readability score and give you tips on improvement. All you need to do is enter your text, and you’ll get a comprehensive overview of everything that’s working well and anything that still needs refinement. Plus, it’s free.
4. Make the most of user-generated content
While the motivation behind your content marketing is building your authority, don’t forget that letting others do the talking is one of the best strategies out there.
Customer feedback and reviews are crucial forms of social proof. So give them the space they deserve on your website and social media profiles. And don’t stop there. You can share a host of user-generated content over a variety of platforms. Unboxing videos on YouTube, influencer posts on Instagram, or hashtags that let customers tag you in their posts are all a great way to encourage engagement and build trust.
5. Keep your brain sharp
This is a piece of advice that most entrepreneurs fail to follow, yet it really could be a gamechanger.
For you to be able to generate epic content, you need to be at the top of your game. And that takes equal amounts of hard work and self-care.
Lack of exercise, poor nutrition, and insufficient sleep can all negatively influence your cognitive abilities. And that includes your creativity, as well as productivity.
That being said, make sure to work out at least a few times per week, eat a healthy and balanced diet, and consistently get a good night’s rest on a comfortable bed. Furthermore, try to keep yourself from working in bed (no matter how great that idea seems at the time), and, of course, look for efficient ways to manage your stress levels.
6. Collect inspiration
One of the best ways to see what works is to look at your competition.
When it comes to collecting inspiration for ad copy, Facebook Ad Library is a great tool. You can search for active and inactive advertisements based on competitors’ names and sort the results according to impressions.
Although you can’t see the targeting options used, you can use this free resource to determine what type of content you can include in your social media advertising. Use it to:
Check whether your target audience reacts better to video or images.
See how your copy compares.
Identify the unique selling points that just might give you the upper edge.
And don’t stop there. Websites, social media feeds, and blog sections are all excellent sources of inspiration – so keep an eye on your competitors, and do your best to stay one step ahead.
7. Take a deep dive into SEO
To create awesome content, you have to know what exactly people are searching for. And in this regard, you’ll need a powerful research tool such as Ahrefs.
Not only can it give you a good idea where to focus your efforts, but even more, Ahrefs makes it super-easy to figure out what competing domains are doing right. You can put together a comprehensive list of your competitors (even the ones you’re not aware of), and do an in-depth analysis of their best-performing posts and keywords.
From there, you can see whether there are any opportunities you’re missing out on, and get to work creating new content that has a high chance of ranking well on SERPs.
8. Don’t forget the visuals
You’re probably aware of the fact that the human brain processes images faster than words. And the great thing is, you can use this to make your content perform much better.
Simply adding images to your web pages – or even better, creating infographics – can give you a chance to both get your message across and widen your reach.
And the best place to look for inspiration? Pinterest. Just type your targeted keyword into the search bar, and you’ll find thousands of great content ideas you can expand upon.
9. Create beautiful designs
Lastly, know that you don’t have to spend a fortune to get great visuals for your website, blog, or social feeds. Using something as simple as Canva, you can create a wide variety of designs, including infographics, posters, flyers, t-shirts, and even a logo for your business.
Plus, the platform offers an entire learning section, which means that you can keep on getting better.
Conclusion
When it comes to epic content, you’ll find that research is key. Covering all your bases from start to finish will ensure that your effort bears fruit, instead of getting lost in a sea of similar posts.
Of course, don’t forget that content needs to be original to be truly successful. So always put your spin on the subject and make it into something that reflects your brand’s core values. This way, it will find its way to the people who will appreciate it.
