Although WordPress has become the most popular website-building platform thanks to its vast array of tools and features, it doesn’t cover all the bases. That’s even the case when designers choose a WordPress theme to help the process along.
Whether it’s a multipurpose theme or a specialty theme there’s often something missing. It prevents the designer from incorporating a key element into a website – like a review section, a powerful SEO capability, or a knowledge base to cite 3 examples.
The designer could resort to coding.
Or ask a developer to add the element
Or do nothing
Or search for a good tool to get the job done; like one of the plugins described in this article.
Here are 8 of the top plugins on the market as we 2020. Hopefully you can use at least one of them to solve a major problem.
One thing more. These 8 plugins are free to try or use.
Most WP plugins are designed to perform a certain specialized task in mind and to do that task well. The Brizy WP plugin is designed to perform a number of tasks, chief among them the its capability to help you build an entire website – and do it well.
This top 2020 plugin is easy to learn and not at all intimidating to work with.
Brizy is a drag and drop builder. You do not need any coding skills to use it.
You’ll have instant access to a wealth of documentation to help you along should you have a need for it; including tutorial videos.
With 500+ design blocks to work with right out of the box plus 150 layouts, 40 popups, and a popup generator, you can structure and build a page in mere minutes
And, to top it off – Brizy is free.
Checkout Brizy’s website for the full description of the available features, download it, and get started today.
Many plugins are designed to add an important feature to a website, and by extension, enable the website to play a greater role in a business’s success. Amelia directs its focus more on the business itself by enabling the owner of certain businesses to automate a key operation
These businesses include health and fitness centers, trip planners, beauty parlors, and others that devote a great deal of time and effort managing events, appointments, and bookings.
What Amelia will do for you is this:
It will allow your customers to book appointments online 24/7 and cancel or change them if need be.
It will match appointments to customer preferences and employee’s availability
It will manage bookings and appointments from a central location and save you a ton of time and money in the process.
If the need for increased productivity is there, Amelia is worth a good, close look.
Content personalization is old news. Surely by now you know that personalized websites perform over 200% better than static sites. You’ve seen it on Amazon and countless other high-end sites. In fact, it’s almost guaranteed to have inspired you to fill out a form, be more engaged in content, and even make a purchase online. So knowing all that, you’re personalizing your site… Right?
Enter Logic Hop – The affordable, easy-to-use content personalization plugin for WordPress. That’s right, now you can have the personalization power those high-end sites have on YOUR site. With over 50 points of data, including geolocation, Logic Hop makes it easy to add powerful personalizations that will generate more signups, lower bounce rates, and make more sales. That’s why Logic Hop is one of our picks for the best plugins of 2020. What are you waiting for?
If you have the right tool, creating a table or chart from a single source of data may not be too difficult, but when you’re confronted with thousands of rows of data from several sources the task can be a nightmare.
wpDataTables will do with the same ease the heavy lifting for you, as well as easy tasks. It will organize data to produce colorful, informative, responsive, editable tables and charts in minutes. Additionally, you can allow users to edit their own data on the front-end.
A 5-Star Rating feature helps you better signify the quality of products or services offered. StarCat Reviews is an advanced WordPress Review plugin you can use to include review and/or rating systems in your pages and posts.
StarCat Reviews also allows you to make good use of multiple criteria and display overall scores in Google search pages. StarCat Reviews also includes premium add-ons for post type, voting, and photo reviews along with comparison tables to help you create a comprehensive review website.
If you have a service to provide or products to review, adding a helpful and informative review section to your website could give a significant boost to your business. Customers like this feature and the feedback they provide will benefit you as well.
WP Review provides several different rating criteria types, product comparisons, integrates seamlessly with WooCommerce, and can be used with any WordPress theme.
The Heroic KB plugin with its live search, actionable user analysis, and article feedback capabilities will enable you to give your website users quick, informative answers to their questions and other information of interest to them as well.
This is the most popular WordPress plugin of its type. It integrates easily with any WP theme you may happen to be using, plus you can expect excellent 24/7 support.
Rank Math SEO is a powerhouse that will take your SEO design skills to the next level. Also providing you with a highly effective way to generate additional traffic to your website.
Rank Math will automatically add the metadata search engines look for to your site, assess 40 site SEO factors and provide you with actionable feedback. Plus, you’ll enjoy working with Rank Math’s clean and simple UI.
*****
Any of the above premium plugins could provide a feature or capability to a website that would effectively put it on steroids. Few if any WP themes provide all the features and functionalities you’re likely to need in the long run. That can also include some specialty themes.
Most themes do not include review capabilities, knowledge base functionality, or content personalization features that enable you to effectively address multiple audiences.
Selecting a plugin that will make your site super SEO friendly is a good investment indeed.
• centered vertically + horizontally • scales to fit the viewport w/ a margin around it • maintains an arbitrary aspect ratio • No JS
There’s a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging about this the other day, too, so it’s a thing that comes up!
Mark Huot got fancy applying aspect ratios directly with width/height and creating the margins from subtracting from those dimensions:
CodePen Embed Fallback
Amelia Wattenberger‘s idea is to set both height/width and max-height/max-width with viewport units, and center it with the classic translate trick:
Brian Hart used vmin units for the aspect ratio sizing and centered it with flexbox:
CodePen Embed Fallback
Benoît Rouleau did the same but used calc() for the margins in a different unit.
Andrew really likes Jonathan Melville’s approach. Most of it is in Tailwind classes so it’s a smidge hard for me to understand as I’m not used to looking at code like that yet.
CodePen Embed Fallback
Andrew said he ultimately went with the vmin thing — although I see he’s using calc() to subtract vmin units from each other which isn’t really necessary unless, I guess, you wanna see the math.
Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium¹.
If you tap on something that has a :hover state but you don’t leave the page then, on a mobile device, there is a chance that :hover state “sticks.” You’ll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.
It almost feels like we have to apologize to linking to things on Medium lately. I have no idea what you’re going to experience when you get there. Will you just be able to read it? Will it be a teaser where you have to log in to read more? Will it be behind a paywall? I have no idea. In this case, hopefully, this link post has enough info in it that isn’t not blocking you from learning anything.
Intrigued by the title and just wanna see some code? Skip ahead.
A few months ago, I was building a WordPress website that required a form with a bunch of fancy conditional fields. Different options and info were required for different choices you could make on the form, and our client needed complete control over all fields 1. In addition, the form needed to appear in multiple places in each page, with slightly different configs.
And the header instance of the form needed to be mutually exclusive with the hamburger menu, so that opening one closes the other.
And the form had text content that was relevant to SEO.
And we wanted the server response to present some cute animated feedback.
(Phew.)
The whole thing felt complex enough that I didn’t want to handle all that state manually. I remembered reading Sarah Drasner’s article “Replacing jQuery With Vue.js: No Build Step Necessary” which shows how to replace classic jQuery patterns with simple Vue micro-apps. That seemed like a good place to start, but I quickly realized that things would get messy on the PHP side of WordPress.
What I really needed were reusable components.
PHP ? JavaScript
I love the static-first approach of Jamstack tools, like Nuxt, and was looking to do something similar here — send the full content from the server, and progressively enhance on the client side.
But PHP doesn’t have a built-in way to work with components. It does, however, support require-ing files inside other files 2. WordPress has an abstraction of require called get_template_part, that runs relative to the theme folder and is easier to work with. Dividing code into template parts is about the closest thing to components that WordPress provides 3.
The secret to this marriage of paradigms turns out to be the lesser-known Vue directive inline-template. Its great and wonderful powers allow us to define a Vue component using the markup we already have. It’s the perfect middle ground between getting static HTML from the server, and mounting dynamic DOM elements in the client.
First, the browser gets the HTML, then Vue makes it do stuff. Since the markup is built by WordPress, rather than by Vue in the browser, components can easily use any information that site administrators can edit. And, as opposed to .vue files (which are great for building more app-y things), we can keep the same separation of concerns we use for the whole site — structure and content in PHP, style in CSS, and functionality in JavaScript.
To show how this all fits together, we’re going to build a few features for a recipe blog. First, we’ll add a way for users to rate recipes. Then we’ll build a feedback form based on that rating. Finally, we’ll allow users to filter recipes, based on tags and rating.
We’ll build a few components that share state and live on the same page. To get them to play nicely together — and to make it easy to add additional components in the future — we’ll make the whole page our Vue app, and register components inside it.
Each component will live in its own PHP file and be included in the theme using get_template_part.
Laying the groundwork
There are a few special considerations to take into account when applying Vue to existing pages. The first is that Vue doesn’t want you loading scripts inside it — it will send ominous errors to the console if you do. The easiest way to avoid this is to add a wrapper element around the content for every page, then load scripts outside of it (which is already a common pattern for all kinds of reasons). Something like this:
The second consideration is that Vue has to be called at the end of body element so that it will load after the rest of the DOM is available to parse. We’ll pass true as the fifth argument (in_footer) for the wp_enqueue_script function. Also, to make sure Vue is loaded first, we’ll register it as a dependency of the main script.
<?php // functions.php
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script('vue', get_template_directory_uri() . '/assets/js/lib/vue.js', null, null, true); // change to vue.min.js for production
wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', 'vue', null, true);
Finally, in the main script, we’ll initialize Vue on the site-wrapper element.
// main.js
new Vue({
el: document.getElementById('site-wrapper')
})
The star rating component
Our single post template currently looks like this:
<?php /* single-post.php */ ?>
<article class="recipe">
<?php /* ... post content */ ?>
<!-- star rating component goes here -->
</article>
We’ll register the star rating component and add some logic to manage it:
// main.js
Vue.component('star-rating', {
data () {
return {
rating: 0
}
},
methods: {
rate (i) { this.rating = i }
},
watch: {
rating (val) {
// prevent rating from going out of bounds by checking it to on every change
if (val < 0)
this.rating = 0
else if (val > 5)
this.rating = 5
// ... some logic to save to localStorage or somewhere else
}
}
})
// make sure to initialize Vue after registering all components
new Vue({
el: document.getElementById('site-wrapper')
})
We’ll write the component template in a separate PHP file. The component will comprise six buttons (one for unrated, 5 with stars). Each button will contain an SVG with either a black or transparent fill.
As a rule of thumb, I like to give a component’s top element a class name that is identical to that of the component itself. This makes it easy to reason between markup and CSS (e.g. can be thought of as .star-rating).
All the HTML inside the template is valid and understood by the browser, except for . We can go the extra mile to fix that by using Vue’s is directive:
<div is="star-rating" inline-template>...</div>
Now let’s say that the maximum rating isn’t necessarily 5, but is controllable by the website’s editor using Advanced Custom Fields, a popular WordPress plugin that adds custom fields for pages, posts and other WordPress content. All we need to do is inject that value as a prop of the component that we’ll call maxRating:
<?php // components/star-rating.php
// max_rating is the name of the ACF field
$max_rating = get_field('max_rating');
?>
<div is="star-rating" inline-template :max-rating="<?= $max_rating ?>">
<div class="star-rating">
<p>Rate recipe:</p>
<button @click="rate(0)">
<svg><path d="..." :fill="rating === 0 ? 'black' : 'transparent'"></svg>
</button>
<button v-for="(i in maxRating) @click="rate(i)">
<svg><path d="..." :fill="rating >= i ? 'black' : 'transparent'"></svg>
</button>
</div>
</div>
And in our script, let’s register the prop and replace the magic number 5:
// main.js
Vue.component('star-rating', {
props: {
maxRating: {
type: Number,
default: 5 // highlight
}
},
data () {
return {
rating: 0
}
},
methods: {
rate (i) { this.rating = i }
},
watch: {
rating (val) {
// prevent rating from going out of bounds by checking it to on every change
if (val < 0)
this.rating = 0
else if (val > maxRating)
this.rating = maxRating
// ... some logic to save to localStorage or somewhere else
}
}
})
In order to save the rating of the specific recipe, we’ll need to pass in the ID of the post. Again, same idea:
// main.js
Vue.component('star-rating', {
props: {
maxRating: {
// Same as before
},
recipeId: {
type: String,
required: true
}
},
// ...
watch: {
rating (val) {
// Same as before
// on every change, save to some storage
// e.g. localStorage or posting to a WP comments endpoint
someKindOfStorageDefinedElsewhere.save(this.recipeId, this.rating)
}
},
mounted () {
this.rating = someKindOfStorageDefinedElsewhere.load(this.recipeId)
}
})
Now we can include the same component file in the archive page (a loop of posts), without any additional setup:
<?php // archive.php
if (have_posts()): while ( have_posts()): the_post(); ?>
<article class="recipe">
<?php // Excerpt, featured image, etc. then:
get_template_part('components/star-rating'); ?>
</article>
<?php endwhile; endif; ?>
The feedback form
The moment a user rates a recipe is a great opportunity to ask for more feedback, so let’s add a little form that appears right after the rating is set.
Notice that we’re appending a unique string (in this case, recipe-id) to each form element’s ID. This is to make sure they all have unique IDs, even if there are multiple copies of the form on the page.
So, where do we want this form to live? It needs to know the recipe’s rating so it knows it needs to open. We’re just building good ol’ components, so let’s use composition to place the form inside the :
If at this point you’re thinking, “We really should be composing both components into a single parent component that handles the rating state,” then please give yourself 10 points and wait patiently.
A small progressive enhancement we can add to make the form usable without JavaScript, is to give it the traditional PHP action and then override it in Vue. We’ll use @submit.prevent to prevent the original action, then run a submit method to send the form data in JavaScript.
Then, assuming we want to use fetch, our submit method can be something like this:
// main.js
Vue.component('feedback-form', {
// Same as before
methods: {
submit () {
const form = this.$el.querySelector('form')
const URL = form.action
const formData = new FormData(form)
fetch(URL, {method: 'POST', body: formData})
.then(result => { ... })
.catch(error => { ... })
}
}
})
OK, so what do we want to do in .then and .catch? Let’s add a component that will show real-time feedback for the form’s submit status. First let’s add the state to track sending, success, and failure, and a computed property telling us if we’re pending results.
// main.js
Vue.component('feedback-form', {
// Same as before
data () {
return {
name: '',
subject: ''
// ... other form fields
sent: false,
success: false,
error: null
}
},
methods: {
submit () {
const form = this.$el.querySelector('form')
const URL = form.action
const formData = new FormData(form)
fetch(URL, {method: 'POST', body: formData})
.then(result => {
this.success = true
})
.catch(error => {
this.error = error
})
this.sent = true
}
}
})
To add the markup for each message type (success, failure, pending), we could make another component like the others we’ve built so far. But since these messages are meaningless when the server renders the page, we’re better off rendering them only when necessary. To do this we’re going to place our markup in a native HTML tag, which doesn’t render anything in the browser. Then we’ll reference it by id as our component’s template.
Why add v-if="false" at the top, you ask? It’s a tricky little thing. Once Vue picks up the HTML , it will immediately think of it as a Vue and render it. Unless, you guessed it, we tell Vue not to render it. A bit of a hack, but there you have it.
Since we only need this markup once on the page, we’ll include the PHP component in the footer.
Since we registered using Vue.component, it’s available globally, without specifically including it in the parent’s components: { }.
Filtering recipes
Now that users can personalize some bits of their experience on our blog, we can add all kinds of useful functionality. Specifically, let’s allow users to set a minimum rating they want to see, using an input at the top of the page. The first thing we need is some global state to track the minimum rating set by the user. Since we started off by initializing a Vue app on the whole page, global state will just be data on the Vue instance:
// main.js
// Same as before
new Vue({
el: document.getElementById('site-wrapper'),
data: {
minimumRating: 0
}
})
And where can we put the controls to change this? Since the whole page is the app, the answer is almost anywhere. For instance, at the top of the archive page:
<?php /* archive.php */ ?>
<label for="minimum-rating-input">Only show me recipes I've rated at or above:</label>
<input type="number" id="minimum-rating-input" v-model="minimumRating">
<?php if (have_posts()): while ( have_posts()): the_post(); ?>
<article class="recipe">
<?php /* Post excerpt, featured image, etc. */ ?>
<?php get_template_part('components/star-rating'); ?>
</article>
<?php endwhile; endif; ?>
As long as it’s inside our site-wrapper and not inside another component, it’ll just work. If we want, we could also build a filtering component that would change the global state. And if we wanted to get all fancy, we could even add Vuex to the mix (since Vuex can’t persist state between pages by default, we could add something like vuex-persist to use localStorage).
So, now we need to hide or show a recipe based on the filter. To do this, we’ll need to wrap the recipe content in its own component, with a v-show directive. It’s probably best to use the same component for both the single page and the archive page. Unfortunately, neither require nor get_template_part can pass parameters into the called file — but we can use global variables:
<?php /* archive.php */ ?>
<label for="minimum-rating-input">Only show me recipes I've rated at or above:</label>
<input type="number" id="minimum-rating-input" v-model="minimumRating">
<?php
$is_archive_item = true;
if (have_posts()): while ( have_posts()): the_post();
get_template_part('components/recipe-content');
endwhile; endif; ?>
We can then use $is_archive_item as a global variable inside the PHP component file to check if it is set and true. Since we won’t need to hide the content on the single post page, we’ll conditionally add the v-show directive.
<?php // components/recipe-content.php
global $is_archive_item; ?>
<div is="recipe-content">
<article class="recipe"
<?php if ($is_archive_item): ?>
v-show="show"
<?php endif; ?>
>
<?php
if ($is_archive_item):
the_excerpt();
else
the_content();
endif;
get_template_part('components/star-rating');
?>
</article>
</div>
In this specific example, we could have also tested with is_archive() inside the component, but in most cases we’ll need to set explicit props.
We’ll need to move the rating state and logic up into the component so it can know if it needs to hide itself. Inside , we’ll make a custom v-model by replacing rating with value, and this.rating = i with $emit('input', i) as well . So our component registration will now look like this:
Now everything is set up so the initial render shows all recipes, and then the user can filter them based on their rating. Moving forward, we could add all kinds of parameters to filter content. And it doesn’t have to be based on user input — we can allow filtering based on the content itself (e.g. number of ingredients or cooking time) by passing the data from PHP to Vue.
Conclusion
Well, that was a bit of a long ride, but look at what we’ve built: independent, composable, maintainable, interactive, progressively enhanced components in our WordPress theme. We brought together the best of all worlds!
I’ve been using this approach in production for a while now, and I love the way it allows me to reason about the different parts of my themes. I hope I’ve inspired you to try it out too.
Of course, two days before launch, the client’s legal department decided they don’t want to collect all that info. Currently the live form is but a shadow of its development self.
Fun fact: Rasmus Lerdorf said that his original intent was for PHP to be templating only, with all business logic handled in C. Let that sink in for a moment. Then clear an hour from your schedule and watch the whole talk.
There are third-party WordPress templating engines that can compile down to optimized PHP. Twig, for example, comes to mind. We’re trying to go the reverse route and send vanilla PHP to be handled by JavaScript.
We’ll get to that, but first, a long-winded introduction.
I’m still not in a confident place knowing a good time to use native web components. The templating isn’t particularly robust, so that doesn’t draw me in. There is no state management, and I like having standard ways of handling that. If I’m using another library for components anyway, seems like I would just stick with that. So, at the moment, my checklist is something like:
Not using any other JavaScript framework that has components
Templating needs aren’t particularly complex
Don’t need particularly performant re-rendering
Don’t need state management
I’m sure there is tooling that helps with these things and more (the devMode episode with some folks from Stencil was good), but if I’m going to get into tooling-land, I’d be extra tempted to go with a framework, and probably not framework plus another thing with a lot of overlap.
The reasons I am tempted to go with native web components are:
They are native. No downloads of frameworks.
The Shadow DOM is a true encapsulation in a way a framework can’t really do.
I get to build my own HTML element that I use in HTML, with my own API design.
It sorta seems like the sweet spot for native web components is design system components. You build out your own little API for the components in your system, and people can use them in a way that is a lot safer than just copy and paste this chunk of HTML. And I suppose if consumers of the system wanted to BYO framework, they could.
Yanking in pre-formatted text to use in a template is super weird. I’m sure it’s possible to do without needing a tag inside the custom element, but it's clearly much easier if you grab the content from the . Makes the API here just a smidge less friendly (because I'd prefer to use the alone).
I wonder what a good practice is for passing along attributes that another library needs. Like is data-lang="CSS" OK to use (feels nicer), and then convert it to class="language-css" in the template because that's what Prism wants? Or is it better practice to just pass along attributes as they are? (I went with the latter.)
People complain that there aren't really "lifecycle methods" in native web components, but at least you have one: when the thing renders: connectedCallback. So, I suppose you should do all the manipulation of HTML and such before you do that final shadowRoot.appendChild(node);. I'm not doing that here, and instead am running Prism over the whole shadowRoot after it's been appended. Just seemed to work that way. I imagine it's probably better, and possible, to do it ahead of time rather than allow all the repainting caused by injecting spans and such.
The whole point of this is a nice API. Seems to me thing would be nicer if it was possible to drop un-escaped HTML in there to highlight and it could escape it for you. But that makes the fallback actually render that HTML which could be bad (or even theoretically insecure). What's a good story for that? Maybe put the HTML in HTML comments and test if <!-- is the start of the content and handle that as a special situation?
Anyway, if you wanna fork it or do anything fancier with it, lemme know. Maybe we can eventually put it on npm or whatever. We'll have to see how useful people think it could be.
You’re here because you’re looking for amazing packaging ideas for 2020.
Well, you’re in luck, because I’m showing you 6 ideas for you to implement this year into your packaging designs.
Well, what are we waiting for?
Let’s just jump right in!
Sustainable Packaging
Sustainability. It’s at the forefront of all of our minds nowadays.
As it should be!
It’s so important that we take care of our world because it’s the only one we’ve got.
And what better way for you as a designer to contribute to this world, than to create your own sustainable packaging ideas for yourself and for your clients?
So here are various sustainable packaging design ideas for you to draw inspiration from!
What is inventory management? As you’ll learn throughout this guide, it’s the core of any product-based business. It’s also a process that involves ordering, storing, and making use of inventory. But there’s more to it than that — it’s about knowing when to restock certain items, how much to make or reorder, how much you should pay for goods, and more.
There are many aspects to inventory management that can’t be accurately covered in a few paragraphs, so we created this in-depth guide to help you master the process at your small to mid-sized business. Keep reading to learn the ins and outs.
Chapter 4: Inventory management terms. Go back to basics to learn important inventory management terms. Sure, you may have heard of them, but do you know what they mean?
Chapter 6: Inventory management jobs. Is there a difference in the responsibilities of inventory managers and inventory specialists? This chapter has the answer.
Remember to bookmark this guide for later reference. Inventory management can be a complex topic, and as your business grows, you may need a refresher on approaches or methods you didn’t find relevant before.
Supply chain and inventory management
Supply chain and inventory management are two terms that are often mentioned together, sometimes interchangeably. In Chapter 1, we defined inventory management. Below we walk through supply chain management and two other related concepts to help clarify these ideas and tie them together.
Supply chain management (SCM) is the broad range of activities required to plan, control and execute a product’s flow from materials to production to distribution in the most economical way possible.
SCM encompasses the integrated planning and execution of processes required to optimize the flow of materials, information and capital in functions that broadly include demand planning, sourcing, production, inventory management and logistics.
It’s clear from this definition that inventory management is a component of SCM. Inventory management focuses on a specific area — namely storing, moving, and tracking goods.
“Storage is a big part of inventory management,” says Jessica Thiele, director of marketing at VL OMNI. She explains that good inventory management comes down to storing items efficiently. This means having as little inventory sitting on the warehouse floor as possible, minimizing the time products sit in storage before they’re sold, and optimizing the organization of items throughout the warehouse.
“Unproductive inventory costs your business money,” Thiele says.
David Altemir, principal and inventory management consultant at Altemir Consulting, adds that inventory management requires effective stock planning and accurate inventory counts to drive your purchasing and/or manufacturing efforts. “Poor inventory management can result in a whole series of overstocks, shortages, timing errors, and costly supplier expedites.”
Looping in inventory control
An important concept in inventory management is inventory control. Altemir explains that, in general, inventory control refers to staying on top of the physical location, cost, and quantity of each inventory item.
For companies with an inventory management system, he shares his golden rule: Your virtual reality must match your physical reality. “This means your inventory transactions must be reliably accurate and timely so your system always has an accurate picture of your inventory position,” Altemir says.
Moving into warehouse automation
The last important inventory management concept, and technological next step, is warehouse automation. According to Thiele, this concept involves creating efficiencies in the warehouse, whether it’s one you own or a third-party logistics warehouse you use. “A lot of warehouse automation concerns technology — robots on the pick-and-pack floor, AI-driven applications, full integration of all your software, and so on,” explains Thiele.
The integration piece is especially important, Thiele says, because you want data to flow automatically between applications. In fact, data integration is the first step toward automating your warehouse.
“If inventory data doesn’t flow in real time, you’re bound to have inaccuracies in item counts. Robots may help speed up movement, but they can’t pick a product that isn’t on the shelf — even if the system indicates it should be there,” Thiele says.
Her thoughts coincide with Altemir’s commentary on automation. While managers looking to cut costs often view warehouse automation favorably, Altemir notes that it can be unhelpful in certain contexts.
Success depends on the nature of your operations. Altemir says companies suffering from inventory planning and control problems won’t enjoy significant benefits from warehouse automation.
“Automation by itself doesn’t adequately address these issues,” Altemir explains, “because the fundamental limitation is actually in understanding and practicing sound inventory management principles.”
Altemir says high-volume or high-throughput companies that have solid inventory management and control will benefit greatly from warehouse automation — improving efficiency and productivity, and reducing costs.
Altemir advises companies to “remember that the vast majority of businesses are not operating at volumes comparable to Amazon or Walmart and, subsequently, should be less focused on advanced automation and more focused on their real challenge: understanding and executing inventory management best practices.”
Now that you have a firm grasp of these related concepts, we’ll move onto exploring how inventory management differs in key product-based industries.
Inventory management in different industries
While there are similarities in inventory management regardless of how it’s employed, there are a few distinctions across different industries. Below, we look at two industries where inventory management plays a leading role: restaurants and e-commerce.
Industry-specific inventory management practices
Example 1: The restaurant industry
Kyle Odom, founder of Bar Cop, says restaurant inventory management starts when a restaurant receives products from distributors. These are commonly referred to as inventory purchases. After purchases are received, they’re added to the inventory count.
There are two types of inventory control methods in a restaurant. The first type is in-and-out inventory, which is based on register rings. You’ll usually find this built into a point-of-sale (POS) system. When you ring up a drink, an order of fries, or another item in the POS, the system subtracts that product from an ongoing inventory count.
The second type of inventory management aims to prevent theft and ensure accurate ordering by tracking actual product usage, not register rings. You track inventory independently from the POS system in two main categories: beverages and food. You can break main categories down into subcategories, such as liquor, wine, bottled beer, and draft beer for beverages. “Keeping these categories separate allows for accurate calculations of beverage and food costs,” Odom explains.
You can track inventory by period — daily, weekly, biweekly, or monthly. A weekly period of Monday through Sunday is the most common. On-hand inventory is counted before the business opens on the first day of the inventory period, and then counted again after the business closes on the last day of the inventory period. Any purchases you receive during the inventory period are also included.
Odom notes that you calculate product usage during an inventory period by adding the starting on-hand inventory to purchases received, and then subtracting the ending on-hand inventory. “The final number shows how much of each product was used,” Odom explains, “by being served to customers, stolen, given away free,” wasted because of employee carelessness, and so on.
Odom points out that there’s a long history of restaurants handling inventory management with pen and paper. “Many restaurants use old eye-balling methods that are slow and inaccurate,” he says.
Employees visually guess how much product is left in a bottle, keg, container, bag, or box and count it by tenths. For example, if a liquor bottle looks half full, the employee would record 0.5 as the inventory count. “This inaccuracy leads to over- and under-ordering issues with vendors and the inability to determine whether there are any theft issues at play.”
While technology has helped eliminate the need for pen and paper, and sped up count recording, Odom says many applications still rely on employees to visually estimate counts, perpetuating the longstanding practice and count inaccuracies.
“There are a few inventory systems on the market that solve both the slowness and inaccuracy issues by weighing open products,” Odom says. “This is extremely important when inventorying beverages, as managers can better identify employee theft and other losses, providing an opportunity to remedy profit loss.”
Example 2: E-commerce
E-commerce inventory management has its own unique characteristics. Unlike with restaurants, you already have the finished goods, you’re selling them online, and you’re dealing with the time it takes to get those products to the people who purchase them.
“Order fulfillment is asynchronous — there is a significant time lag between when a customer places an order and when they receive it. This means you have to track items, ensuring they are committed to received orders and not oversold,” explains Mohammed Ali, CEO of Primaseller, an inventory and order management software solution.
In any case, products must be stored somewhere in the interim. Ali says there are three main ways this can be done:
Store your own inventory. The standard storage method is to buy or rent a warehouse. Very small businesses may even start in the owner’s garage or a spare room in their home, then move into a larger space as they scale up. “The benefit of this option,” Ali explains, “is you maintain control of your supply chain and full privacy of your customer list — avoiding potential cut-outs by a middle man.”
Use a third-party logistics (3PL) company. These companies are experts in inventory management. You can typically hand over inventory to them, and they will store and manage it — and often even fulfill orders — for a fee. You wind up handling only sales and marketing, and pay a rental or per-order fee, or some combination thereof. “Amazon’s Fulfilled by Amazon (FBA) is a good example of a widely used 3PL provider,” says Ali.
Incorporate drop shipping. Here, you handle sales and marketing, and suppliers ship products directly to the customer. Ali says this option is useful for startup businesses that aren’t sure whether a product will sell, but there are much lower profit margins. “It’s less risky in some ways, like gauging product interest, but it’s more risky when considering the reliability of a supplier, the quality of products (since you never see them), and your overall brand image.”
If you choose to manage your own warehouse, efficient warehouse inventory management is a must. Ali says you need to hire the right people; know how to properly handle items; decide on an appropriate technique, such as first in, first out (FIFO); and select the right technology.
“Small business inventory management may allow for spreadsheets, but they won’t cut it after a certain point because there’s a lot of items and documentation to keep track of as you grow — customer orders, invoices, different product lines, complex item locations on the warehouse floor, multiple warehouses, etc.,” Ali says.
As for small business owners moving into larger warehouse spaces, Ali recommends asking these questions:
What are your sales projections?
Do you have the volume to support a larger space?
How much space do you need for picking, packing, etc.?
What’s your budget for a new warehouse purchase or rental?
We’ve covered a number of inventory management concepts and unique aspects up to this point. Before we get into anything more complex, let’s review some inventory management terms to solidify your knowledge base.
Inventory management terms
There can be a steep learning curve for inventory management, even if you own a product-based company that stores inventory. People tend to pick up on terminology by using context clues, but we’re going back to basics here to define common inventory management terms.
10 inventory management terms you should know
1.Days inventory outstanding
Days inventory outstanding (DIO) represents the number of days the current inventory will last. A lower DIO indicates a shorter time required to clear out inventory. DIO is also referred to as days sales of inventory (DSI), days in inventory (DII), or simply days inventory.
2. EOQ
EOQ stands for economic order quantity, which is the ideal amount of a product to buy to minimize total costs related to ordering, receiving, and holding inventory. Optimizing EOQ can help minimize the amount of money tied up in inventory. We’ll walk through calculating EOQ in Chapter 7.
3. Finished goods inventory
Finished goods inventory includes all products that have been completed by the manufacturing or production process — or that have been purchased in completed form — and that are available for sale. This term typically applies to manufacturers, since their goods can be in multiple forms, such as raw or in production. Retailers usually only maintain ready-to-sell items, meaning all their goods are finished.
4. Inventory cycle count
An inventory cycle count is part of a company’s inventory auditing procedures. In an inventory cycle count, a subset of inventory is counted on a certain day to help maintain accurate inventory levels. Unlike a full inventory count, an inventory cycle count is less disruptive to operations — though it doesn’t offer as much accuracy across the board.
5. Inventory shrinkage
Inventory shrinkage is the difference between inventory counts recorded in accounting documents and what’s physically present in the warehouse or other storage location. For clarity, consider this hypothetical statement by an inventory manager: “According to our records, we should have 150 pillows in the warehouse, but we only have 100.” That’s shrinkage, though it’s typically measured monetarily.
6. Reorder point
A reorder point is the quantity at which you reorder an item to replenish its supply. The reorder point will differ greatly from product to product and business to business. For example, a product that sells quickly and in large amounts would generally have a higher reorder point than a slower moving product.
7. Safety stock
Safety stock refers to the extra amount of a product that you keep to mitigate the risk of stockouts. Supply and demand can shift unpredictably, and having safety stock helps ensure you’re able to fulfill orders. The benefit is that sales are uninterrupted; however, purchasing and storing extra products ties up more money in inventory.
8. SKU
SKU stands for stock keeping unit, which is used in conjunction with a barcode system to represent a distinct item. SKUs are typically printed on products as scannable labels and hold item-specific data such as price, manufacturer, and other product details. Businesses use SKUs to identify products and keep track of inventory levels.
9. Stockout
As the name implies, a stockout means you’ve run out of a product. Stockouts may occur for any number of reasons: an unexpected surge in customer demand, not ordering enough of a product, an erroneous delivery from a supplier, inaccurate stock counts in the warehouse, theft, or a combination of these.
10. Supply chain
A supply chain is the network of organizations, resources, activities, and technology that works together to create, sell, and distribute products to customers. A supply chain can have many complex touchpoints, depending on things like the number or amount of raw materials involved in manufacturing a product, the type of product, and who and where the end customer is.
With terminology out of the way, let’s get into the technology side of inventory management.
Inventory management technology
The previous chapter focused on theory. This chapter focuses on application. You’re probably familiar with the scanners people use in warehouses. That’s the type of inventory management technology we cover below, along with the systems that technology connects to.
Barcode inventory management represents the first generation (1D) of innovation in keeping track of items in warehouses. Barcodes are those familiar black-and-white tags on products that are scanned in places like grocery and clothing stores.
“They afford warehouse staff significantly more accuracy and speed compared to outdated methods involving sight, pen, and paper,” says Nick Schiffelbein, CTO at LOCATE Inventory.
Schiffelbein explains that barcodes really help in the picking process, where warehouse staff must find products to fulfill customer orders. This is because the barcode system mitigates human errors stemming from sight-based selection. Instead of an employee trying to determine whether they’ve found the right product, they can simply scan it to confirm.
“This is especially useful for newer employees who aren’t sure where products are located and aren’t familiar with what products or packaging looks like,” Schiffelbein says.
QR code
QR code inventory management is the second generation (2D) of technology, improving upon what barcodes started. “QR codes achieve the same goal as barcodes — aiding in locating and tracking products — but offer more capabilities,” says Schiffelbein.
The main advantage of using QR codes instead of barcodes is their ability to store more data. Since these codes use dots and squares of varying size and position instead of a static series of bars or vertical lines, QR codes offer more scanner flexibility and space. While a barcode typically holds only 20 to 25 characters, QR codes can hold up to 2,000.
RFID
Short for radio frequency identification, RFID inventory management is often considered the third generation (3D) of technology. While it still requires physical tags similar to barcodes and QR codes, RFID has a key difference: You don’t need line of sight to scan tags.
Barcodes and QR codes require you to not only be close to the tag but to have a direct line of sight with your scanner. In contrast, RFID tags can be scanned from a distance — up to 20 meters away, depending on the system and hardware you use. Plus, you can scan multiple items at once, instead of one at a time.
So what’s the catch — why doesn’t every business make the switch to RFID? Schiffelbein explains that “RFID inventory management is certainly cutting edge, but it’s simply too expensive. The cost is a huge barrier to entry for small businesses, and even larger businesses are hard-pressed to justify the spend.”
Software
The hardware above typically ties in with a software solution that may be on the premises, in the cloud, or a hybrid of the two. The size and complexity of your business will dictate the type of solution you choose. For example, if you’re just starting out and sell only a few products, you may stick to a simple spreadsheet.
In contrast, if you’re scaling up or running a larger business that sells many products, you’ll need a more robust solution. There are a number of options available. Check out our blog post for a handful of inventory management software systems that range from simple to advanced.
Another thing to consider regarding technology is mobility. The modern workforce is getting more mobile, and professionals in inventory management are no exception. When considering solutions, ensure mobility is one of your criteria. You can start with the solutions in our blog post which include supplemental inventory management apps.
We’ve discussed technology. Now let’s talk about the people who use it. Keep reading to learn about what it takes for warehouse staff to keep things running smoothly.
Inventory management jobs
It takes more than technology to keep the warehouse stocked and inventory counts accurate. People still have important roles to play — tech just helps make those jobs easier. Below we cover three such jobs. Though they have similar titles, their responsibilities, while sometimes overlapping, are distinct.
Inventory manager job description
Inventory managers often oversee product management and distribution. They’re accountable for meeting defined inventory goals, managing inventory systems, and acting as liaisons to other departments.
According to Indeed, these are a few of the responsibilities you can expect an inventory manager to handle:
Ensuring accurate product inventory for clients
Managing an inventory tracking system to streamline business operations
Communicating with the warehouse manager about current stock and potential issues with orders
Conducting daily analyses to forecast potential inventory issues
Reporting on inventory activities and variances to senior management
Assessing new inventory to ensure it’s ready for shipping or delivery
Continually developing, refining, and implementing inventory control procedures and best practices
Qualifications can vary based on the rigor of inventory practices and the business’s needs. Here are some examples:
Bachelor’s degree in business, finance, or a related field
5+ years’ experience in inventory, distribution, and operational procedures
2+ years’ supervisory experience
Excellent knowledge of data analysis and forecasting methods
Ability to multitask and work independently
Proven leadership skills
Excellent written and verbal communication skills
In-depth understanding of distribution workplaces
Inventory control manager job description
Some companies use the titles inventory manager and inventory control manager interchangeably, meaning the job descriptions often appear nearly identical. However, responsibilities for inventory control managers typically align more closely with inventory control practices — keeping accurate inventory counts, as well as achieving objectives for loss prevention and optimized inventory spaces.
By comparison, inventory management has a broader focus on managing demand through forecasting and ensuring warehouses are stocked with the right quantity of inventory.
Payscale job descriptions for inventory control managers tend to include these responsibilities:
Establishing and monitoring inventory minimum/maximum levels
Directing and planning the organization of facility inventory for efficient material storage and handling
Assisting with organizing and reviewing bills of material for accuracy and requesting internal change orders to correct discrepancies
Implementing and executing inventory replenishment processes to ensure proper stock levels
Acting as liaison between departments to identify obsolete stock and optimize inventory turnover
Performing audits and cycle counts as scheduled and as needed to maximize inventory accuracy
Qualifications resemble those for inventory managers, with a few differences:
Bachelor’s degree in business, finance, or a related field
3+ years’ experience in inventory control, specifically in a SKU-intensive environment
Working knowledge of inventory management software
Ability to accurately track inventory and create reports
An analytical mind with strong math skills
Excellent organizational and planning skills
Outstanding communication and interpersonal abilities
Inventory specialist job description
The inventory specialist differs from the preceding two roles in that it’s typically a non-managerial position that reports to and supports one or both of the other roles. Depending on the organizational structure, an inventory specialist may supervise subordinate warehouse staff.
Glassdoor notes several typical responsibilities for inventory specialists:
Inspecting returned merchandise
Tracking incoming and outgoing products
Providing inventory control reports as required
Maintaining count accuracy (digital and physical counting)
Updating database with incoming and outgoing products
Loading and unloading deliveries
Disposing of obsolete inventory as directed
Qualifications for inventory specialists are noticeably less stringent than the managerial roles described above:
Associate’s degree in business or related field
2+ years of experience in an inventory role
Ability to use a computer and other office technology
Familiarity with inventory management systems
Ability to lift up to 50 pounds
Ability to stand and bend for long periods of time in a warehouse environment
Great written and verbal communication skills
Experience with budget management
Attention to detail to identify defective products or damaged packaging
These are key roles that help keep any warehouse running smoothly. Now we’ll move onto several critical inventory management formulas.
Inventory management formulas
Inventory is all about numbers — how many products you have in stock, how many products you need to order next month, how much your on-hand inventory costs, and so on. And where there are numbers, there are formulas.
Inventory turnover formulas
According to Investopedia, inventory turnover is a ratio that indicates how many times inventory has been sold and replaced during a given period. This ratio helps with decision-making for pricing, marketing, and other strategies. The formula is as follows:
Inventory turnover = sales / average inventory
Sales is self-explanatory, while average inventory can be found using this formula: average inventory = (beginning inventory – ending inventory) / 2. “It’s important to point out that this calculation only applies to inventory turnover for finished goods,” explains Altemir.
Using sales to calculate inventory turnover inflates the result because the sales number includes a markup. That’s why there’s an alternative inventory turnover formula that uses the cost of goods sold (COGS):
Inventory turnover = COGS / average inventory
COGS represents the direct costs of producing goods, including material costs and production labor. Using COGS in place of sales provides a more accurate picture of inventory turnover.
In either case, the use of average inventory mitigates the impact of seasonality. In many industries — especially retail — sales and inventory can experience large fluctuations such as during year-end holidays when consumers are more prone to shop.
Altemir adds that, for manufacturers, it’s useful to understand the underlying components of finished goods, namely raw material turnover. “Performing a deeper analysis of the direct material cost of the products — i.e., taking more care in formulating the numerator of the equation — results in greater accuracy.”
EOQ formula
Back in Chapter 4 we noted that EOQ refers to the ideal amount of a product to buy to minimize total costs related to ordering, receiving, and holding inventory. Investopedia provides the formula for EOQ:
Q = ?(2DS/H)
Here are the definitions of the variables:
Q represents EOQ units
D represents demand in units (usually on an annual basis)
S represents order cost (per purchase order)
H represents holding costs (per unit, per year)
In layman’s terms, the formula considers the timing of reordering (D), what it costs to place an order (S), and what it costs to store products (H). The result of the equation (Q) tells you when to reorder a given product to avoid running out of inventory. While there’s an immediate opportunity cost in lost revenue due to a shortage, there’s also the possibility of losing the customer altogether.
The EOQ formula assumes consumer demand, along with ordering and holding costs, will remain constant. This is why Altemir cautions against relying too heavily on EOQ for purchasing decisions. He says the theory is sound but putting it into practice is a different story.
“Knowing exactly what your cost per transaction and holding costs per unit are with any degree of fidelity is difficult. There are better ways to decide how much to buy (or make), such as using customer demand and other practical considerations,” Altemir says.
Inventory management Excel formulas
Unless you have an inventory management system in place, you’ll likely be using Excel to keep track of inventory. But even if you do use a more robust system, Excel still comes in handy for calculating inventory-related formulas. Altemir suggests these tried and true ones:
SQRT(). As in the EOQ formula, you’ll sometimes need to use the square root function to complete an equation.
AVERAGE(). You can use this function to quickly determine average inventory when calculating inventory turnover.
STDEV(). The standard deviation function can help calculate safety stock.
+, -, /, and *. “Basic addition, subtraction, division, and multiplication are often all you need in your day-to-day routine,” says Altemir.
Excel and other spreadsheet solutions are always handy in inventory management. Up next, we’ll cover another great addition to your inventory management toolbox: JotForm.
How JotForm helps with inventory management
Whether you’re looking to replace outdated pen-and-paper practices or supplement a spreadsheet-only solution for keeping track of inventory, JotForm can help. The easy-to-use form builder lets you quickly and accurately update important inventory information, such as product name, quantity on hand, and unit price.
With JotForm, you can keep track of a wide array of items:
Office supplies
Restaurant supplies
Food and beverages
Furniture
Pet products
Equipment
JotForm + inventory management
Inventory widget
The inventory widget tracks the quantity of a single item, such as a dog bone. Start by configuring the total number of items for sale — let’s assume 100 for an easy math example. You can then add the order form to your website.
Each time a customer makes a purchase and submits the order form, the number of items they purchase is deducted from your inventory count. For example, if a customer purchases three dog bones, your inventory will be reduced to 97.
Sell more than one item? You can add an inventory widget for each item you sell. That means a widget for dog beds, a widget for cat scratching posts, and a widget for every other fun product in your pet arsenal. (Of course, the same concept applies for non-pet businesses!)
This widget is great for limited subscriptions, small online stores, and limited-item inventory management.
Barcode scanner
If you’ve incorporated barcodes into your warehouse operations, our barcode scanner widget is the perfect addition to your forms. No need for cumbersome, expensive equipment your staff will have to lug around the warehouse floor — you can use the devices you already have, like your computer, tablet, or smartphone.
Once you add the barcode scanner to your form, you can use your device to capture barcodes on whatever product is in front of you. The widget then converts the information stored on the barcode to readable text and displays it on the form.
Inventory management templates
JotForm includes a number of inventory templates you can use in your daily operations. Simply fill in the information, and you can convert the results into a polished PDF you can view, download, or print.
Every template is customizable through an easy, drag-and-drop PDF Editor. Start with a template you like, then add or remove fields as needed. Add your company logo and colors to match your branding. You can even add signing capabilities through our e-signature widget to hold staff accountable for their inventory activities.
Here are a few templates you can start with:
Inventory checklist. Performing an inventory audit on your products? Use this checklist to ease your quality control efforts. The template includes fields like area, condition, and quantity.
Office supplies inventory. Need to keep track of more than a few pens and staplers? Start with this form, which includes fields like item description, quantity to be ordered, and signature.
Liquor inventory. Keep track of your liquor with this handy form. It includes fields like liquor brand, size, weight, and unit price. Quick tip: Add more descriptive categories or a text box for spills, bottle breakage, and theft.
Ready to upgrade your inventory management practices? Get started with JotForm today.
More about your inventory management guides
Mohammed Ali
Mohammed Ali is the CEO of Primaseller. He has more than 13 years of experience in the operations and supply chain functions for a diverse set of industries, including food commodities, office supplies, and home and living. At Primaseller, he talks to retailers across the world about optimizing their inventory and supply chains, particularly in the context of omnichannel retail.
David Altemir
David Altemir is principal and inventory management consultant at Altemir Consulting, an operations management consulting firm in Dallas, Texas, that focuses on manufacturing and distribution. He has more than 25 years of experience instituting transformational improvements across numerous industries, including medical products, aviation, and food manufacturing. He is also the author of Lean MRP: Establishing a Manufacturing Pull System for Shop Floor Execution Using ERP or APS.
Kyle Odom
Kyle Odom is a proud husband and father, and the founder of Bar Cop. He is dedicated to formulating valuable inventory management strategies for the hospitality industry.
Nick Schiffelbein
Nick Schiffelbein is the chief technology officer at LOCATE Inventory, a cloud-based inventory and order-management software solution designed to help companies in both the warehouse and e-commerce space. The company is headquartered in Orange County, California.
Jessica Thiele
Jessica Thiele is the director of marketing at VL OMNI, an iPaaS point-to-multipoint, serverless, data integration platform that captures business rules for a fully automated supply chain and technology stack.
Before consumers sat in front of mobile devices for hours every day, there were numerous browsers and operating systems web designers had to contend with. So, it’s not like the concept of cross-browser testing is new.
Because web browsers don’t always render websites the same way or process data in the manner originally intended, cross-browser testing has long been an important part of web design and development. It’s the only way to ensure that what’s built behind the scenes is properly implemented on the frontend of a website.
But it can quickly become a tedious undertaking if you attempt to review every browser, OS and device on your own.
Fortunately, we’re living in an era where automation is king and we now have a better way of conducting cross-browser tests (and more frequently, too). So, let’s talk about why you need to automate this process and how to do so with the help of LambdaTest.
An Improved Way To Handle Cross-Browser Testing
When you set out to build a website for your users, you account for who they are, what they need and what they will respond to along their journey. But how and when do you address the different outcomes your users might experience thanks to their browser choice?
Responsive design may help mitigate some of these differences, but it’s not a cure-all for the inherent display issues between browsers and devices.
And if you want to make sure extensive cross-browser testing doesn’t have a negative impact on your bottom line, then automating it is the way to go.
Here are some tips to help you build automated testing into your process:
Familiarize Yourself With Browser Support Differences
This is a roundup from Statista of the top web browsers by market share:
Statista data on the top web and mobile browsers in 2020. (Source: Statista) (Large preview)
Now, the issue here isn’t necessarily that every browser processes your website data differently. What’s really mucking things up is the engine powering the browser behind the scenes.
For example, these are the engines the leading web browsers use:
A LambdaTest Experiment shows how the Chrome browser displays this code snippet. (Source: LambdaTest) (Large preview)
The date HTML tag is one of the most used tags and, yet, Chrome, Firefox and Opera are the only ones that fully support it — as indicated in the top blue bar above the test area. Even then, these browsers provide very different user experiences.
For example, the image above shows you what the date tag looks like in Chrome. Here’s how the same code displays in Edge:
A LambdaTest Experiment shows how the Edge browser displays this code snippet. (Source: LambdaTest) (Large preview)
Not only does the font styling and sizing slightly different, but the way in which the date selection dropdown appears is vastly different.
So, before you start thinking about cross-browser testing and hammering out the kinks between these browsers and engines, familiarize yourself with the key differences.
You can look for discrepancies in the most commonly used components and technologies. Take, for instance, CSS grid layout:
Can I use… keeps track of cross-browser compatibility for CSS Grid Layout. (Source: Can I use…) (Large preview)
Most of the leading (and some not so leading) browsers support CSS grid layout (the ones in green). Internet Explorer (in blue) provides partial support and Opera Mini (in purple) provides none at all.
Or let’s say you’re trying to use more WebP images in your designs as they’re much better for performance and resolution. Here’s what Can I use… tells us about browser support for the image format:
Can I use… data on cross-browser support for the WebP image format. (Source: Can I use…) (Large preview)
The most recent versions of Internet Explorer and Safari (web and mobile) do not provide support for it. So, if you intend on designing with WebP images, you’ll have to create a workaround for these browsers.
Bottom line: Take the time now to understand what kind of content or code is supported, so you can more effectively build a website from the get-go.
Pro Tip: Create a Browser Matrix for Reference
You can see why it’s so important to understand the differences between browser renderings and support. The more you familiarize yourself with them, the less scrambling you’ll have to do when a new discrepancy is discovered.
To make it easier on yourself, it would be a good idea to create a browser matrix for all these differences now.
Here’s a simple one that LambdaTest has designed:
An example of how web designers can create their own browser support matrices. (Source: LambdaTest) (Large preview)
I’d recommend creating one of your own. You can leverage data from Can I use… as well as documenting support issues you’ve encountered in your own projects.
This will also help you set priorities when you’re designing. For example, you can decide which non-supported features are worth using based on what kind of impact they have on your website’s goals.
It would also be useful to have this spreadsheet on hand once a site has gone live. Using data from Google Analytics, you can start prioritizing design choices based on which web browsers your users primarily use.
Get Yourself A Cross-Browser Testing Tool That Does It All
It doesn’t matter the size of the websites you build. All public-facing sites would benefit from an automated cross-browser testing tool.
What’s especially nice about automating with LambdaTest is that it gives its users options. From fully automated tests that check how your code impacts the frontend to semi-automated tasks that ease the work in managing updates and bugs, there are so many ways to automate and optimize your process.
Here are some of the feature highlights you should know about:
Real Time Testing: Best for Bug Tracking
Real-time testing is useful when there’s something targeted you need to examine with your own two eyes. Like if you’ve shipped a design to the client for review and they insist something doesn’t look right on their end, you can review the website using their exact configuration. It would also be helpful for confirming bugs and sussing out which browsers are impacted.
From the Real-Time Testing panel, you’ll enter your site URL and then choose your viewing specifications.
It lets you get super specific, choosing from:
Mac vs. Android,
Device type,
Device version,
Operating system,
Web browser.
This is the LambdaTest dashboard area for Real Time Testing. (Source: LambdaTest) (Large preview)
Once the test begins, this is what you’ll see (depending on the type of device you choose, of course):
Above, you can see the first option in the sidebar enables you to quickly switch the device view. That way, if you have a couple of browser views you’re trying to compare or check errors on, you don’t have to backtrack.
As far as the other real-time testing options go, most of them are useful for identifying and reporting issues within the context that they actually happened.
LambdaTest’s Real Time Testing can be used for bug tracking and reporting. (Source: LambdaTest) (Large preview)
In the bug tracking tool above, you can pinpoint a spot on the page where an error has occurred. You can then mark it up using a number of tools on the sidebar.
Users can also use the screenshotting and video options to capture bigger errors — especially ones that occur when you move through or engage with the site.
Screenshot Testing: Best for Speeding Up Manual Testing
There’s no reason you or your QA can’t still review your website on your own. That said, why make the process take longer than it needs to? You can let LambdaTest’s Visual UI Testing tools speed up the process.
The Screenshot tool, for instance, enables you to select all of the devices and browsers you want to compare at once:
LambdaTest Visual UI Testing comes with simultaneous cross-browser screenshotting. (Source: LambdaTest) (Large preview)
When the test completes, you’ll have all requested screenshots in one place:
LambdaTest screenshots enable designers to quickly check for inconsistencies across browsers. (Source: LambdaTest) (Large preview)
You can view them here, download them to your computer or share them with others.
You can also organize your screenshots by project and version/round. That way, if you’re working through multiple rounds of revisions and want to refer back to a previous version, all copies of the previous iteration exist here. (You can also use screenshots in regression testing which I’ll explain shortly.)
Responsive Testing: Best for Confirming a Mobile-first Experience
If you need to see more than just a static screengrab, Responsive tests have you covered. All you need to do is select which OS and devices you want to compare and the tool will populate full working versions of the site in the mobile browser:
LambdaTest includes real-time responsive tests for all OS and devices. (Source: LambdaTest) (Large preview)
You can review your website’s design and interactivity not just in all possible browsers, but you can change the orientation of the site as well (in case issues appear when it goes landscape).
What’s nice about this testing tool is that, if anything appears wonky, you can mark the bug the second you detect it. There’s a button for you to do that directly above the interactive mobile browser. That’ll get those costly mobile errors reported and resolved more quickly.
Smart Testing: Best for Regression Testing
The eye can only detect so much, especially when you’ve been looking at the same section of a web page for weeks.
So, when you start implementing changes on your site — during development, just prior to launch and even afterwards — regression testing is going to be crucial for catching those potentially hard-to-spot issues.
This should take place any time something changes:
You manually update part of the design.
Code is tweaked on the backend.
Someone reports a bug and the fix is implemented.
Software is updated.
An API is reconnected.
If you know which page and which part of that page are directly impacted, smart testing can make light work of confirming that everything is okay.
Just upload the original screenshot of the impacted page and then add a comparison image when the change has been made. (This is where that Screenshot tool really comes in handy.)
LambdaTest enables users to do side-by-side comparison tests of web pages. (Source: LambdaTest) (Large preview)
Note:There’s obviously nothing wrong with the Smashing Magazine website. But what I did in the example above is use renderings for different versions of the iPhone. Obviously, that’s not how regression tests work, but I wanted to show you how this comparison feature looks when something’s amiss.
Now, as for why this feature is so awesome, here’s how it works:
LambdaTest users can compare two versions of the same web layered on top of one another. (Source: LambdaTest) (Large preview)
This single screenshot allows you to see where the two versions of your page no longer align. So, if the screenshots had been from the same browser view originally, this could be a problem if you hadn’t planned on realigning all of the elements.
You could also use the side-by-side comparison tests to check the same thing:
LambdaTest users can compare two versions of the same web page side-by-side. (Source: LambdaTest) (Large preview)
Again, smart testing is meant to help you quickly locate and report issues during regression testing. Find the method that works best for you, so you can get these issues resolved as quickly as possible from now on.
Automated Testing: Best for Detecting Issues on a Larger Scale
Technically, everything we’ve looked at so far has some form of automation built in, whether it’s processing 20 different browser screenshots simultaneously or letting you instantly see mobile test interfaces for all iOS and Android devices at once.
That said, the LambdaTest platform also comes with a tool called “Automation”. And what this does is enable you to do Selenium testing in the cloud on over 2,000 browsers. A newer feature, “Lambda Tunnel”, can be used to do Selenium testing on your localhost as well. That way, you can see how your code changes appear even before they go live.
There are tons of benefits to combining LambdaTest with Selenium testing:
It’s a highly efficient way to conduct large quantities of cross-browser tests, thereby increasing your browser coverage (something that’s impossible to do manually).
With parallel cross-browser tests, you’ll reduce the time spent executing automation tests as a whole.
Because Selenium testing starts by identifying your preferred coding language, it can more intelligently detect errors that will appear in browsers.
Of course, the biggest benefit of using the LambdaTest Selenium Automation Grid is that LambdaTest will help you evaluate whether or not your tests pass or fail.
LambdaTest can help users qualify cross-browser tests as failures when errors are detected. (Source: LambdaTest) (Large preview)
You still have to review the results to confirm that all errors are true failures and vice versa, but it’s going to save you a lot of time and headaches having LambdaTest do the initial work for you.
Wrapping Up
Cross-browser testing isn’t just about making sure websites are mobile responsive. What we’re ultimately looking to do here is take the guesswork out of web design. There may be over a dozen possible browsers and hundreds of browser/device configurations, but automated cross-browser tests can make checking all of these possibilities and locating errors much easier.
HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control.
<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region -->
<div class="names" role="region" aria-label="Names"></div>
What is discouraged is making up your own attributes, or repurposing existing attributes for unrelated functionality.
<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>
<!-- `large` is not a valid value of `width` -->
<div width="large">
There are a variety of reasons this is bad. Your HTML becomes invalid, which may not have any actual negative consequences, but robs you of that warm fuzzy valid HTML feeling. The most compelling reason is that HTML is a living language and just because attributes and values that don’t do anything today doesn’t mean they never will.
Good news though: you can make up your own attributes. You just need to prefix them with data-* and then you’re free to do what you please!
Syntax
It can be awfully handy to be able to make up your own HTML attributes and put your own information inside them. Fortunately, you can! That’s exactly what data attributes are. They are like this:
<!-- They don't need a value -->
<div data-foo></div>
<!-- ...but they can have a value -->
<div data-size="large"></div>
<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>
<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>
Data attributes are often referred to as data-* attributes, as they are always formatted like that. The word data, then a dash -, then other text you can make up.
Can you use the data attribute alone?
<div data=""></div>
It’s probably not going to hurt anything, but you won’t get the JavaScript API we’ll cover later in this guide. You’re essentially making up an attribute for yourself, which as I mentioned in the intro, is discouraged.
What not to do with data attributes
Store content that should be accessible. If the content should be seen or read on a page, don’t only put them in data attributes, but make sure that content is in the HTML content somewhere.
<!-- This isn't accessible content -->
<div data-name="Chris Coyier"></div>
<!-- If you need programmatic access to it but shouldn't be seen, there are other ways... -->
<div>
<span class="visually-hidden">Chris Coyier</span>
</div>
/* Select any element with this data attribute and value */
[data-size="large"] {
padding: 2rem;
font-size: 125%;
}
/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }
This can be compelling. The predominant styling hooks in HTML/CSS are classes, and while classes are great (they have medium specificity and nice JavaScript methods via classList) an element either has it or it doesn’t (essentially on or off). With data-* attributes, you get that on/off ability plus the ability to select based on the value it has at the same specificity level.
/* Selects if the attribute is present at all */
[data-size] { }
/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }
/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }
/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }
The specificity of attribute selectors
It’s the exact same as a class. We often think of specificity as a four-part value:
inline style, IDs, classes/attributes, tags
So a single attribute selector alone is 0, 0, 1, 0. A selector like this:
div.card[data-foo="bar"] { }
…would be 0, 0, 2, 1. The 2 is because there is one class (.card) and one attribute ([data-foo="bar"]), and the 1 is because there is one tag (div).
Attribute selectors have less specificity than an ID, more than an element/tag, and the same as a class.
Case-insensitive attribute values
In case you’re needing to correct for possible capitalization inconsistencies in your data attributes, the attribute selector has a case-insensitive variant for that.
/* Will match
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }
It’s the little i within the bracketed selector.
Using data attributes visually
CSS allows you to yank out the data attribute value and display it if you need to.
Like any other attribute, you can access the value with the generic method getAttribute.
let value = el.getAttribute("data-state");
// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");
But data attributes have their own special API as well. Say you have an element with multiple data attributes (which is totally fine):
If you have a reference to that element, you can set and get the attributes like:
// Get
span.dataset.info; // 123
span.dataset.index; // 2
// Set
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "🎪";
Note the camelCase usage on the last line there. It automatically converts kebab-style attributes in HTML, like data-this-little-piggy, to camelCase style in JavaScript, like dataThisLittlePiggy.
This API is arguably not quite as nice as classList with the clear add, remove, toggle, and replace methods, but it’s better than nothing.
Hey, why not? It’s just a string and it’s possible to format it as valid JSON (mind the quotes and such). You can yank that data and parse it as needed.
const el = document.querySelector("li");
let json = el.dataset.person;
let data = JSON.parse(json);
console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person
JavaScript use-cases
The concept is that you can use data attributes to put information in HTML that JavaScript may need access to do certain things.
A common one would have to do with database functionality. Say you have a “Like” button:
<button data-id="435432343">♡</button>
That button could have a click handler on it which performs an Ajax request to the server to increment the number of likes in a database on click. It knows which record to update because it gets it from the data attribute.
Confused to use PHP or any other web development languages? Are you looking for PHP website development?
And not being able to select between best IDEs and code editors to build your PHP web design? PHP is preferred over other programming languages based on the project requirements. Here in this blog, we are going to briefly describe top 7 PHP IDEs and Code Editors, PHP developers can use for web development.
Surely, this post will help you find the best IDEs for your project. Still, you find any confusion and don’t want to take a risk. You can hire PHP web developer from the best PHP web development company, who is skilled and has worked on the latest trends. He will not only help you select the best IDE tools considering your project requirements but also will give the physical form to your project.
PHP is the acronym of Hypertext Preprocessor which is a general-purpose programming language and written at the server-side. It is widely used for developing dynamic and interactive web pages. It is free and easy to use programming language. If you are a newbie and want to learn PHP, there are several tutorials available online which will ease up learning PHP for you.
For experienced, when it comes to the exact definition of an IDE and a code editor, they still get confused. So firstly we will find out the difference between IDE and Code Editor and then move ahead to discuss the top 7 PHP IDEs and Code Editors a web developer uses.
Let’s start with!
IDE vs Code Editor: Learn PHP Programming Language
Writing code is one of the common skills among developers. However, they do find it difficult to differentiate between the definition of an IDE and a code editor. The crossover of features between the two could be considered as the reason behind such confusion.
To understand IDE, it is an Integrated Development Environment that comes with a self-contained package that allows developers to write, compile, execute and debug code in the same place. Whereas, a code editor is a text editor enriched with features enabling writing code using native capabilities or via optional plugins.
IDE allows writing code in a specific language. You can even compile/interpret and perform debugging as well. Whereas code editors are more general in purpose, they can work on different programming languages. Also, there is a limitation of just writing code with the code editors.
However, Code completion, highlighting a section of code, hints and custom folding of sections of code are a number of common features between the IDE and code editors. Which one do you choose out of IDE and Code editors? It totally depends on your personal choice, the programming language you are working on and workflows as well.
Here is the list of web development tools that hold high priority among the developers. I hope this blog will help you choose an appropriate one for your projects in 2020.
1. PHPStorm
PHPStorm is one of the most popular IDE tools, developers used for PHP web development. It is updated with all the latest features to enable you with rapid web development. JetBrains is the authority behind its development and release in 2009. PHPStorm is written in Java since its launch and has been among the first choices of developers for writing code in PHP.
PHPStorm is compatible with working with all the key frameworks such as Symfony, Yii, CakePHP, Zend Framework and Laravel. Also, it allows working on Content Management Systems (CMS) including WordPress, Drupal, and Magento.
PHPStorm not only manages backend tasks but also gives you the liberty to work on the front end. It includes working on CSS, HTML5, Sass, Typescript, JS, CoffeeScript, Less, Stylus, etc. using Unit testing, code refactoring and debugging.
If you are using this platform with Zend Debugger, you can easily integrate it with databases like SQL and composers, vagrant, rest client, remote deployment and command tools.
2. Eclipse
Eclipse is another name that comes to the mind of the developers when asked for the most widely used IDE in the field of web development. It was launched in Nov 2001 and is a cross-platform tool that can be utilized for any operating system whether for Windows, Linux or Mac. Most of the developers used this IDE for Java and Android development, however, the efforts of Eclipse community developers made it possible to use for other development languages using plugins.
If you want to develop a PHP web application using Eclipse, you have to download it and install the Eclipse package for PHP developers. It is an open-source and free to use tool which comes packed with all the capacity to support PHP languages like Git client, XML Editor, and Mylyn.
Some of the important features of Eclipse comprises code formatting, syntax highlighting, code assist, code navigation, refactoring, PHP debugging, code templates, syntax validation, and eclipse ecosystem.
3. NetBeans
NetBeans also makes its way to the list of world’s most popular IDEs for PHP web development. It is feature-rich, free, and supports multiple languages like English, Japanese, Portuguese, Russian, Brazilian, and basic Chinese. A wide range of developers uses this open-source IDE for PHP website development.
NetBeans was released in 1996 which initially supported only Java and was pretty slow, but now it becomes much faster than others and supports multiple languages like PHP, C/C++, and HTML5. Not even this, you can use it for a range of PHP frameworks and WordPress CMS.
NetBeans is one of the most preferred IDE tools due to its features like code templates, smart code completion, quick fixes, getter setter generation, hints, and refactoring. Other than this, it avails developers with functionalities like formatting, rectangular selection, code folding and try/catch code completion.
4. Zend Studio
Zend Studio is among the top commercial PHP IDE for PHP website development. It targets professional web developers and currently enjoys a clientele of over 40,000 developers for the development of PHP websites.
Some of the key features which make Zendio Studio more preferable among others is its fastest performance, validation while coding and searching the PHP Code.
Not even this, Zend Studio allows mobile app development based on existing PHP apps and server backend. This way, you can easily coordinate between current websites and web applications with mobile-based apps.
5. Komodo
ActiveState developed Komodo IDE in the year 2000. Now it has become a highly preferred PHP MySQL development and functional tool. Komodo inherits most of its functionalities from the Python interpreter. It is compatible with Mozilla and Scintilla because the number of features and functionalities among them are similar and utilizes common languages as well.
Komodo uses numerous extensions and pipe features which turned it down as a huge success.
With Komodo, you can start CGI Environment Simulation and build a holodeck web server. It replicates all the activities on a real web server. The CGI Environment Simulation enables its fast installation.
6. Sublime Text 3
It is another PHP development that is very useful to perform like a pro text editor, i.e. for prose, markup, and code. Sublime Text 3 comes with an amazing feature- a custom UI toolkit that allows users to play across words, symbols or lines using particular key shortcuts for the activity.
In addition to this, the user can make changes to any section of code at any time. Such facilities of Sublime Text 3 make it the most customizable and flexible text editor that exists.
Being a lightweight, cross-platform development tool, Sublime Text 3 works on different operating systems like Linux, Windows, and OSX.
You can easily convert this text editor into a graceful Sublime PHP IDE with the help of different plugins and packages that are available in the market. Some of the popular names which are most helpful in doing so are package control, xDebug client?—?CodeBug, Sublime PHP companion, Simple PHPUnit, PHPCS, CodIntel, and PHPDoc.
Converting a text editor into a PHP IDE using add-on packages, avails developers with the ease of PHP development. They can enjoy the classiness of sublime text and the sturdiness of PHP at the same time.
7. Atom
Atom is a free, open-source text and source code editor from GitHub. It is one of the best cross-platform development tools that support working on various OS like Windows, OS X, Red Hat Linux, Fedora 22+ and Debian Linux. Atom consists of a dedicated ecosystem that is supported by a vast community. The availability of numerous plugins and packages in the market improves its functionality to the next level.
When it comes to PHP, the Atom editor can easily be converted into a fully-featured PHP IDE using packages available free of cost. These packages turn atom editor more effective than any other commercial PHP IDEs in the market. It includes hyperclick-php, php-cs-fixer, atom-autocomplete-php, linter-php and php-integrator-base.
Conclusion
PHP is one of the most preferred programming languages for web development. There are a number of PHP IDEs available in the market which are getting better day by day. Here in this post, we covered most of the PHP development tools which come with different functionalities. However, the universal objective behind is transforming web development into a convenient platform to write scalable code swiftly.
Still, confused? Not being able to select the best PHP web development tool for your PHP web application. You can contact a dedicated team of experienced PHP programmers. You can hire a PHP developer to help you choose the right tool for your web development considering your project requirements.
