As the world becomes increasingly interconnected, the demand for high-quality programming and information technology employees continues to escalate.
The pandemic of 2020 brought with it major leaps forward in terms of flexible work arrangements. IT workers, many bound only by a laptop, were quicker than many to renegotiate the terms of their employment.
Traditionally, businesses have held the upper hand in the interview process. That’s still true, but it’s also obvious that the terrain has shifted in recent years. Today, posting a programming or coding opportunity with your company is as much an invitation for the most qualified candidates to interview you.
Since the most highly skilled candidates can have their pick of the litter, your company may need to make a few adjustments. Budgeting for higher compensation packages is only part of the equation. It’s likely your business will need to be flexible with work hours, offer top-notch online code interviews, and rethink its real-time collaboration model.
You may likewise need to make adjustments to your recruitment procedures. Technical workers often seem like a breed apart. While making generalizations is always dangerous, there are at least a few aspects of your hiring processes that IT workers will be sure to scrutinize. As you look to retool those processes, keep these things in mind.
1. A WYSIWYG Employer
In tech circles, “WYSIWYG” is a fairly well-known acronym, shorthand for “what you see is what you get.” Originally coined to describe development technologies that mimicked online results, the term has since become synonymous with anyone or anything that is authentic. It also denotes “no unpleasant surprises.”
While no one enjoys being on the receiving end of a bait-and-switch, IT people seem particularly allergic to anything that smacks of deception. When setting up your interview processes, make sure no one is trying to oversell the position. Taking a WYSIWYG approach will help filter out uninterested applicants, and that’s a good thing, too.
2. Clear, Unambiguous Job Descriptions
Programmers and web developers can always tell when a non-technical person has written a technical job description. More often than not, this is not a plus.
The qualified people you want to attract are likely to avoid jobs containing the phrase “other duties as assigned” like the plague. A poorly written job description sends a signal that the company doesn’t really know what it’s doing. Worse, it can feel like a set-up to endure poor management.
Qualified programmers and developers will read carefully to see whether you know what you’re talking about. If your job listing betrays a lack of expertise in the field, you run the risk of attracting attention from unqualified (even unscrupulous) candidates.
Make sure your job description contains specific responsibilities and provides as much granularity as possible. List all required skills, programming languages, software packages, and certifications. Leave no room for guesswork.
3. Fast, No-Nonsense Application Process
Just as technical types are quick to spot iffy job descriptions, they are even more prone to judge a company on how well it handles its back-office processes. Applying for an open position qualifies for this category, so a sloppy process sends all kinds of bad signals to your applicants.
Unless revamping the application process itself is part of the job description, you won’t want your procedures to get in the way. Don’t force your applicants to provide the same information more than once. Set aside time every so often to test your online application process for bugs or unclear directions.
If your system places restrictions on attachments such as type, file size, or format, these should be clearly indicated on the application form. Find and eliminate accessibility barriers. The last thing you want is to make a first impression that says your company is a challenge to work with.
4. Elimination of Unnecessary Stressors
If the position you hire for will require a coding test, for example, clearly convey what that will look like and what’s expected. Perhaps employers could once have created deliberately stressful tests to see how applicants would respond under pressure, but those days are long gone. Word will get out quickly, and your better candidates will take a pass.
Technical exams, if required, need to be conducted fairly and uniformly, with no surprises. Strive to give every one of your candidates a uniform application experience. This can present some serious challenges if you are interviewing both in-person and online, but do what you can to level the playing field.
Your goal is not to have your applicants run a gauntlet. It’s to assess their skill level and ability to work well with others. Applying for a job sets most people on edge already; don’t needlessly ratchet up the anxiety level. Pay attention to nonverbal cues and check in often with your applicants.
5. Prompt Follow-Up and Feedback
Technical proficiency in an organization can be loosely interpreted to mean that every action results in a corresponding and efficient reaction. If, for example, you’ve ever clicked the “Submit” button on a website only to have nothing happen, you know how disorienting that can be.
Technical types tend to pay close attention to stimulus-response interactions, whether online or in person. Baffling exchanges of any kind are, for the most part, cataloged and assessed. As an IT applicant moves through the application and interview process, be aware that heightened attention is being paid to your lines of communication.
If an online application seems to have vanished into the black hole of cyberspace, that obviously reflects poorly on your company. Worse, your poor communication and feedback capabilities are likely to be quickly transmitted to other members of the community you are trying to recruit. Give your applicants the chance to evaluate your application processes whether you end up hiring them or not. Take remedial action where necessary, and remember to thank them for their input.
Many of the tips listed above can apply equally to all job applicants, regardless of the type of position. Some are just common courtesy, and all of them can be adapted to other situations. The main thing to keep in mind as you add technical staff to your company is that IT folks tend to see things differently. Where most applicants might view a small glitch in your online application process as an annoyance, tech workers are likely to cast a more critical eye — and then pass you by.
We spend so much time in our text editors, and every now and again we encounter those little frustrating issues that slow us down. Perhaps finding the right file takes too long, or finding a matching closing bracket becomes a long-winded adventure on its own.
Let’s fix all these annoyances for good. In this post, we look into useful VS Code extensions for front-end development, from fine productivity boosters to advanced debugging helpers.
Table of Contents
Below you’ll find quick jumps to specific extensions that you might need. Scroll down for a general overview. Or skip the table of contents.
When it comes to log messages, the turbo-console-log extension has got your back. It automates the operation of writing meaningful log messages and inserts them automatically.
All you need to do is select the variable which you want to debug, press Ctrl + Alt + L, and the log message will be inserted in the next line. Keyboard shortcuts let you comment, uncomment, or delete all log messages from the current document.
Keeping Bundle Size Under Control
We all know that performance matters, but in practice, it can be quite a challenge not to lose it out of sight when you’re in the flow of writing code. To keep your bundle size under control, the Import Cost extension lets you immediately know if you’re importing a hefty package into your project.
Import Cost isn’t a bundle analysis tool but was built with the idea to help you find possible performance bottlenecks before you ship them to your users. To do so, it gives you instant feedback by displaying the size of an imported third-party library as you’re importing it, right next to your line of code. A handy little helper.
Code Formatting, Automated
When writing code, a lot of time goes into formatting. Prettier automates the task for you. It removes all original styling and ensures that the outputted code conforms to a consistent style.
Prettier parses your code and re-formats it with its own rules, taking the maximum line length into account and wrapping the code when necessary. You decide if you want to apply it to all languages or alternatively you can define the ones you prefer to format manually. Also a great solution for teams who struggle finding a common style guide.
Are you tired of typing the snippets you frequently need over and over again, always from scratch? Here are some handy little helpers to ease the job. For Vue, be sure to check out Sarah Drasner’s Vue.js VS Code Snippets extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.
These two might also come in handy: The JavaScript code snippets extension by Charalampos Karypidis contains snippets in ES6 syntax and supports both JavaScript and TypeScript. And, last but not least, Don Jayamanne’s jQuery code snippets feature over 130 jQuery snippets. Once installed, just type jq to get a list of all of them.
Speaking of snippets: If you prefer a good snippets library over defining them yourself from scratch, these collections have got your back:
There are a lot of code snippet plugins for different languages out there, but have you ever wondered how to define your own snippets in VS Code? Maurice Borgmeier summarized everything you need to know to get started.
Another great article on the topic comes from Rob O’Leary. He dives deeper into when and why to use snippets, takes a closer look at different types of snippets, how VS Code handles them, and, last but not least, how to write your own, of course.
Code Screenshots, The Fancy Way
Let’s be honest, taking good-looking screenshots of code can be a challenge. Polacode is here to change that.
Described as “Polaroid for your code”, Polacode lets you take and edit screenshots of your code directly in VS Code. You can resize the code’s container by dragging the corner and use commands to control the image appearance. A great solution to make the code you’ve spent so many hours on shine in the best light — in blog posts or presentations, for example.
Human-Friendly Comments
How do you handle comments? If your code requires a lot of explanations, it might be a good idea to make those usually grayed-out comments more human-friendly, so that it’s easier to see at a glance if a comment alerts you of a deprecated method, for example, or if it’s a todo your teammate left for you.
The VS Code extension Better Comments helps you do just that, categorizing annotations into alerts, queries, todos, highlights, and more. Commented-out code can also be styled to make it clear it shouldn’t be there.
Chrome Debugging Inside VS Code
Do you use Chrome and find yourself switching back and forth between the browser and your editor when debugging? Then you might want to give the VS Code Chrome debugger a try. It helps you debug client-side JavaScript code that runs in Chrome directly from VS Code.
The debugger connects to Chrome over its Chrome Debugger protocol where it maps files loaded in the browser to the files you have open in VS Code. So without leaving the editor, you can set breakpoints in your source code, set up variables to watch, and see the full call stack when debugging. A little tool to make your debugging routine more straightforward.
DevTools For VSCode Extension
Wouldn’t it be cool to have DevTools integrated into your code editor so that you don’t need to switch back and forth between the two? If you’re using VSCode and Edge, a small extension makes it possible.
The extension shows the browser’s Elements and Network tool inside VSCode, giving you the ability to see the runtime HTML structure, alter styling and layout, perform diagnostics, and debug your project — without leaving the editor. By the way, Rachel Weil shared some handy DevTools tips for working with Chromium-based browsers like Edge and Chrome at SmashingConf San Francisco a few weeks ago. Be sure to tune into the recording to take your DevTools skills to the next level.
File Management Utils for VS Code
A lot of time is usually spent on organizing and managing files. File Utils makes the task more convenient.
The extension enables you to create, duplicate, move, rename, and delete files and directories with just a handful of commands. It also supports brace extension which automatically generates arbitrary strings strings to set up your document structure.
Adding Tags To Files In Your Editor
In large projects, finding one specific variant of a component, or just the right file requires you to know the file that you are actually looking for. But what if you could add bookmarks or labels to specific files, so you could find them faster?
File Ops VS Code Extension allows you to tag and alias files, and then quickly switch between them. You can also quickly list all tags just in case you lose track of them, view all files from the current directory and switch between .css and .js files in the same folder. You can also take a look at the video explaining how it all works. Now that will come in handy!
Folder Icons In VS Code
Custom file and folder icons in VS Code? Yes, please! To help you maneuver your workspace more easily, even if a lot of files and folder are involved, the VS Code Icons Team released an extension that brings icons to your editor. From “access” to “zip”, “Android” to “www”, the collection is sure to have the file and folder icons you need.
The project-specific icons toggle feature and project auto-detection will automatically detect the type of project you have opened in your workspace and prompt you to toggle the icons accordingly. It’s also possible to use custom icons, if you prefer.
Monospaced Fonts For Coding
Programming fonts are certainly the workhorses in typography. They need to offer great readability, enable quick text scanning, and prevent eye strain even when a developer looks at the code for hours. To help you find a programming font that meets your needs, Chris Coyier curates Coding Fonts, a selection of more than 30 (mostly free) monospaced fonts that all match this criteria.
To make the decision easier, each font comes with a short description, an overview of all characters, and HTML, CSS, and JavaScript code examples in both day and night mode. Mostafa Gaafar maintains a similar list of fonts for developers with the option to also view the code examples in different color schemes. To add custom fonts to VS Code, you’ll need to define the font in “Settings”.
Git Supercharged
A useful extension to supercharge the Git capabilities built into VS Code is GitLens. To better understand the code you’re working on, GitLens lets you glimpse into whom, why, and when a line or code block was changed.
The extension visualizes code authorships at a glance, helps you seamlessly navigate and explore Git repositories, gain valuable insights via comparison commands, and more. Everything you need to know about your codebase right at your fingertips, without leaving the editor.
Git History In VS Code
Viewing and searching git log along with the graph and details, viewing a previous copy of the file you’re working on, searching the history, comparing branches and commits — these are just a few of the features that the Git History extension offers to streamline your workflow.
Speaking of Git: Another VS Code extension worth taking a closer look at when working with Git is Git Graph: It lets you view a Git graph of your repository and easily perform Git actions from the graph.
Highlight Annotations In Your Code
Do you sometimes forget to review the to-dos you’ve added while coding? The TODO Highlight extension reminds you that there are notes or things that need your attention before you publish to production.
The keywords TODO and FIXME are preconfigured, but you can customize the configuration to your liking if you prefer. A command highlights the open comments for you right in your code or as a list of all annotations. A great little reminder.
Highlighting Matching Brackets And Tags
An intense coding session strains the eyes, so anything that helps cater for more visual clarity is a welcome helper. To take your syntax highlighting to the next level when working with VS Code, you might want to check out the Bracket Pair Colorizer. The extension identifies matching brackets — in colors you define.
Now that you’ve got full control over your brackets, another little detail to watch out for are matching opening and closing tags. VS Code does already come with a tag matching feature, but it is rather basic. The Highlight Matching Tag extension does the work more thoroughly, matching tags anywhere — from tag attributes to inside strings — and even highlighting the path from tag to tag in the status bar. Extensive styling options let you customize how tags are highlighted. HTML and JSX are officially supported.
Revealing Harmful Characters
Zero-width spaces and non-joiners, non-breaking spaces, left and right double quotation marks — when coding, some characters can be harmful because they are invisible or looking like legitimate ones. Gremlins Tracker finds them for you.
Gremlins Tracker uses a color scheme to alert you of harmful, potentially harmful, and less harmful characters. Lines that include such a character are marked with a Gremlins icon, and moving the cursor over the character gives you a hint of the potential issue. If you like, you can add new gremlins characters or override them for a specific language.
Highlighting Indentation
Indentation is key to ensure your code can be scanned quickly. A handy little plugin that makes indentations even more readable is Indent-Rainbow. It colorizes the indentation in front of your text alternating four different colors on each step and marking those lines where the indentation is not a multiple of the tab size.
While error highlighting is useful, there are instances where it might get in your way. When dealing with RegEx patterns, for example. Luckily, Indent-Rainbow lets you turn off error highlighting on those, just like on comment lines, and, if you like, you can even skip it for entire languages.
Visualizing Stacking Contexts
Do you have difficulties spotting stacking contexts when using z-index? You’re not alone! If you sometimes find yourself setting a z-index to a billion on an element and it’s not moving forward in your stacking order, CSS Stacking Contexts is for you.
The extension makes stacking contexts visible in CSS and SCSS so that you can confidently use small values when writing z-index declarations. Additionally, it will also tell you when a z-index declaration has no effect and offer quick fixes.
Custom Colors To Tell Workspaces Apart
If you frequently have multiple VS Code instances open and struggle to tell them apart, Peacock might be worth taking a closer look at: the extension subtly changes the color theme of your workspace.
But it’s not only when working on multiple projects at once where Peacock shines. It also comes in handy when using VS Live Share or VS Code’s Remote features and you quickly want to identify your editor.
IntelliSense: AI-Assisted Development Features
The IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
Providing AI-assisted IntelliSense, the extension shows you recommended auto-completion items for your code context at the top of the completions list. When it comes to overloads, it doesn’t cycle through the alphabetical list of member but presents you the most relevant one first. No more hunting through the list yourself.
Recording Guided Onboarding For Your Codebase
A large codebase can feel intimidating. CodeTour attempts to change that. The extension allows you to record and play back guided walkthroughs of your codebases, directly within the editor. Think of it as a table of contents that makes it easier to onboard or re-board to new project or feature area, to visualize bug reports, or understand the context of a code review.
To create a code tour, you can annotate lines of code (Markdown is supported) and navigate as many files as you need, and the recorder captures the sequence. The tours can be checked into a repo or exported to a “tour” file so that anyone can replay it without having to clone any code. Handy!
From GitHub To VS Code, In One Second
Once you’ve discovered a snippet of code on GitHub, what if you want to start working with it in your project immediately? Instead of cloning the repo and finding that file that you need, you can use Github1s. Just add 1s after github in the URL, press Enter, and the repo, or a single file, will open straight in VS Code.
You can also use a bookmarklet to quickly switch between github.com and github1s.com, access private repositories and there are plenty of browser extensions that are listed on the project page as well. If you need an alternative, Gitpod is a slightly more advanced option, which also allows you to start an online development environment, run parallel workspaces and work on the codebase collaboratively.
Pets For Your VS Code
Ever wanted to pep up your VS code editor? Well, how about adding a cat, dog, snake, rubber duck or even good ol’ Clippy? All you need to do is install vscode-pets and run the vscode-pets.start command in order to see the panel. Once you’ve chosen a pet, its fur color and size, lean back and watch them interact with you!
From throwing a ball and playing catch with your pet (run vscode-pets.throw-ball) to adding additional pets (run vscode-pets.spawn-pet), you’re coding workflow is bound to be anything but boring! The creator, Anthony Shaw, is open for ideas and discussion and welcomes feedback anytime.
Speed Up JavaScript / TypeScript Prototyping
If you’re looking for a way to speed up your JavaScript prototyping process, Quokka is for you. The rapid prototyping playground lives in your editor and gives prototyping, learning, and testing JavaScript and TypeScript a speed boost.
Runtime values are updated and displayed in your IDE next to your code, as you type. To get you up and running right away, there’s no config required, all you need to do to start experimenting is opening a new Quokka file. Happy prototyping!
Use A Remote Machine As Your Dev Environment
There’s a variety of reasons why you might want to use a remote machine with an SSH server as a development environment. Because you need faster or more specialized hardware than your local machine, for example, or to debug an application running somewhere else, such as a customer site or an application in the cloud. To simplify development and troubleshooting, the Remote – SSH extension helps you do just that.
The extension runs commands and other extensions directly on the remote machine, so you won’t need any source code on your machine. Instead, you can open any folder on the remote machine and work with it just as you normally would, taking full advantage of VS Code’s full feature set. Handy!
Compile Sass In Real Time
A real-time Sass compiler with live browser reload? Live Sass extension has got you covered. It helps you compile/transpile your SASS/SCSS files to CSS files in real time.
Features include customizing the file location of the exported CSS as well as its style and extension name, there’s a quick status bar control, you can exclude specific folders in the settings, and autoprefix is supported, too.
From automatically updating HTML img tags with the correct size of the image to using font ligatures for better readability when coding or log points to log information out from your application, “VS Code Can Do That?!” features 36 valuable tips that’ll make your workflow even more efficient.
Wrapping Up
There are literally hundreds of VS Code extensions out there, and we hope that some of the ones listed here will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Happy coding, everyone!
Every day, around 3.8 billion email users send out 228 billion emails. That’s a lot of messaging so if your emails don’t stand out, they’ll end up in someone’s trash bin unread.
One way of standing out is by putting an email signature at the end of your business emails is one of them. Something so small can work wonders in staying top-of-mind with your clients.
We’ll be covering some essential information in this article relating to email signatures. Like what they are, best practices, and tools to help you out.
What Is an Email Signature?
An email signature is that bit at the end of an email that has your name, titles, social links, company name, and other essential details. It is also called an email footer – an essential part of any business email.
An email signature validates a message – it lends a professional touch and proof of authenticity to your email. It can also be a part of your branding strategy because it adds to the customer perception of your business.
Your email signature should be unique and contain useful information. It will be the building block of a productive client-business relationship.
Basic Features of an Email Signature
Like a tasty meal, a good email signature needs various ingredients in just the right quantities to make it effective.
The following are the basic features of any email signature. Note that some of them, such as social media icons or legal requirements, are optional and should be used when your marketing goals require them.
Sender name and job title
Your name is a primary component of an email signature. It provides a personal touch and reassures the client that they are communicating with a person. The job title shows them where you stand in your company.
Contacts
What’s the point of an email signature if your readers don’t know where to go when they want to reach you? Your contact information should have your business address and at least one phone number. Reiterating your email address isn’t necessary as it’s in the email details anyway.
Social media handles
In today’s hyper-connected world, social media is often the first point of contact between businesses and customers. So, your email signature can link to your social media accounts. But only if these social media accounts appear professional, and are relevant to the subject matter.
Company logo or branding
Customer perception is heavily influenced by branding. Your email signature should have that effect too. Your logo should appear prominently such that it stands out at a glance.
Photo
Just like the sender’s name, a photo in the email signature lends a personal touch to the email and helps the customer put a face to the name. In addition, it relieves the sense that you’re talking to a stranger or the “unknown”. However, it’s an optional element.
Legal requirements
The legal requirements that govern business communication differ by country. Therefore, make sure to check relevant laws and regulations that concern emailing.
Email Signature Best Practices
Having covered the basics of an email signature, let’s go over some best practices that you can use to make an impression.
Pick a minimalist design
The cliche that less is more is very applicable in writing an email signature. Get rid of the clutter and go straight to the point. No unnecessary quotes or clever sayings. If it doesn’t provide information about your company, chop-chop.
Your colors and fonts are important elements of your signature. Keep your colors simple and attractive; you don’t have to be too artsy with it. Also, your font should be easy to read, and above all, it must be uniform.
Visually highlight important information
All the details in your email signature are not equally important. Organize your content so that it draws attention to the most important parts. You can do these using font size and bold text.
Font size: Use font size to draw readers’ attention. It makes a message stand out and gives it prominence.
Bold text: Bold text can draw attention as it tells a reader something is important.
Use high-quality images
If you add a photo of yourself or a brand logo, make sure it’s very clear, with no blurs or smudges. Your photo should have the qualities of a standard passport photo, but pick one where you are smiling. The background should be neutral, and a headshot is better than a full-body photo.
Add relevant social media linked icons
If you choose to have your social media accounts appear in your email signature, these should be icons that link to accounts that appear professional and have content that is useful to the reader.
Anticipate the needs of your target audience when creating content for your social media accounts. Stick to your message and avoid unnecessary fluff.
Sign off with a call to action
Your email signature should end with a call to action that subtly prompts the reader to take action. The reader should not be made to feel like they are being pushed or herded. Your signature should be clear, concise, and elicit specific actions from your readers.
Your call to action can take the form of any of the following.
Ask for a review: Make your readers feel like partners in the process, and that their voice counts. They’ll usually be eager to tell you what they think of your service or product. Give them the opportunity to share that information.
Tell them to subscribe: Invite your readers to subscribe to your newsletters or follow your social media channels. Make the process easy by adding a link.
Add links to your product(s): An email signature is a great marketing opportunity. Let your readers know your product is just a click away. If you’ve got products on Amazon, eBay, other e-commerce sites, or directly to your website, add the links there if relevant.
Increase conversion via email signature banner campaigns
You can generate website traffic by linking your email signature to banner ads. Conversion is just a click away when your readers can access your website at the touch of a button. While you still have their attention, tell them where to go.
Make your email signature mobile-friendly
Smartphones are ubiquitous. More than half of web users access the internet via their smartphones. This makes it a powerful medium to reach audiences. So, send a test email with your signature and check how it looks and performs on mobile devices. Remember, you want it to be as responsive as possible for a better reader experience.
Note that a smartphone has a smaller screen than a PC. That means you have less space so your text and graphics have to be bold, and your message must be straight to the point.
They offer templates where you just fill in your info and get an HTML code or image that you can then add via the general settings of your email client.
Here are a few popular tools:
Newoldstamp
Newoldstamp is an email signature generator that allows for highly customizable signatures. It lets you add promotional banners, social media icons, your call to action, and a link to your organization’s landing page.
With Newoldstamp, you can centrally manage and update email signatures across your organization. This means you have control over all the digitally produced names of your company’s employees.
You can pick between the free and premium versions with an annual subscription.
MySignature
MySignature is another popular email signature generator thanks to its many user-friendly templates.
One great feature of this tool is that you can use it on your mobile device, allowing you to create and edit signatures while you are on the go. It also gives you the ability to test mobile responsiveness.
This tool only offers a paid customizable subscription.
WiseStamp
WiseStamp lets you stamp your brand identity on your email signature using any of the 50+ templates it provides. With this tool, you can share your work with your clients, add social media icons and personalize your messaging using Instagram photos.
It is available for free, but there’s a version with a monthly subscription if you want more functionality.
HubSpot
HubSpot offers a plug-and-play template that allows you to add personal information, add links to your social media accounts, and experiment with themes, fonts, and colors. You can also add your call-to-action image, text, and link.
After completing the form, just embed your signature into your email account, and it is ready to use.
Conclusion
Your email signature is a significant part of your brand identity, and you want to get it right. A good signature has the features and best practices outlined in this article, such as taking on a minimalist approach and adding just the essential info, such as your name, contact details, and job title. You can even use a template from an email signature generator to add the details.
Another good practice is using your email signature as a marketing tool. Add a call to action, social media links, or a link for your blog subscription, and you’re likely to get new leads.
How we use Web Components at GitHub — Kristján Oddsson talks about how GitHub is using web components. I remember they were very early adopters, and it says here they released a component in 2014! Now they’ve got a whole bunch of open source components. So easy to use! Awesome! I wanted to poke around their HTML and see them in action, so I View’d Source and used the RegEx () (thanks, Andrew) to look for them. Seven on the logged-in homepage, so they ain’t blowin’ smoke.
Container Queries in Web Components — Max Böck shares that the :host of a web component can be the @container which is extremely great and is absolutely how all web components should be written.
Faster Integration with Web Components — Jason Grigsby does client work and says that web components don’t make integration fast or easy, they make integration fast and easy.
FicusJS — I remember being told once that native web components weren’t really meant to be used “raw” but meant to be low-level such that tooling could be built on top of them. We see that in competition amongst renderers, like lit-html vs htm. Then, in layers of tooling on top of that, like Ficus here, that adds a bunch of fancy stuff like state, methods, and events.
Shadow DOM and Its Effect on the Unofficial Styling API — Jim Nielsen expands on the idea I poked at on ShopTalk that the DOM is the styling API. It’s self-documenting, in a way. “As an author, you have to spend time and effort thinking about, architecting, and then documenting a styling API for your component. And as a consumer, you have to read, understand, and implement that API.” Yes. That’s why, to me, it feels like a good idea to have an option to “reach into the Shadow DOM from outside CSS” in an unencumbered way.
Awesome Standalones — I think Dave’s list here is exactly the kind of thing that gets developers feet wet and thinking about web components as actually useful.
Cloud hosting is the perfect solution for websites that want to scale. If you’re a small business and want to know what provider to choose, you’ve come to the right place.
Cloud computing, in general, is a huge market. It generates more than $30 billion in 2020, and it’s projected to reach $552 billion by 2027, according to Statista.
With cloud hosting, you’ll enjoy a ton of resources from a variety of sources to create a robust and efficient virtual server.
Contrast this with shared hosting — where your site goes down as soon as the server is down. But if a cloud server is experiencing downtime, other servers in the same network up the slack.
Small businesses and growing websites that need an excellent balance between an affordable and high-performance server can benefit a lot from cloud-based hosts.
What is Cloud Hosting?
Cloud hosting is a type of web hosting solution whereby a website is stored on multiple servers, which allows you to utilize resources from a wide range of servers to deliver optimal performance.
The availability of server resources makes cloud hosting solutions a very reliable, flexible, and scalable web hosting service. Sites that experience spikes and dips in traffic, for example, will benefit so much from this type of hosting.
All things being equal, good hosting can help you make more money in your business.
If you need more flexibility in your hosting package, cloud hosting is the ideal choice. You can consider this as a pay-as-you-go mobile: which lets you decide your resource limits every month and pay accordingly.
Are you getting ready for a busy month? Do you expect hundreds of thousands and even millions of visitors to your website? Cloud hosting can help you weather the storm — regardless of the amount of traffic coming to your website.
You’ll find hundreds of cloud-based hosting providers online. However, choosing the right one that will meet your website’s needs can be daunting.
To help you make a well-informed decision, here are the 5+ cloud hosting services for small business owners:
Best Cloud Hosting Providers and Services
A2 Hosting: Best cloud hosting provider.
Cloudways: Managed cloud hosting service
SiteGround: Easy to use features.
Hostwinds: Affordable cloud hosting solution.
InMotion Hosting: Excellent customer support.
HostGator: Unmetered Storage.
1. A2 Hosting
A2 Hosting is a popular web hosting company, offering cloud-based hosting packages to help you grow and scale your small business website.
What I like about A2 Hosting:
A2 Hosting offers reliable and cheap cloud hosting solutions. It’s our #1 preferred provider for easy-to-use features. It also offers a money-back guarantee — which is missing in most providers.
This hosting provider is affordable, with cloud plans starting at $4.99/month. The uptime performance is 99.95%, however, you get a wealth of handy features. It offers plans that ensure peace of mind, even while you’re sleeping or out on a vacation.
Some of the features include 250 GB of storage, 32 GB of RAM, 12 CPU cores, and you’re allowed to host multiple (unlimited) websites — a feature that’s not common in some cloud hosting providers.
What could be improved?
It doesn’t offer SSL certificates. You’ll have to pay for this as an add-on. Also, there’s no free domain name. However, the pricing starts at $4.99/month, which is quite cheap.
Improving its customer support is also important. They can offer live chat sessions, phone calls (integrated with a predictive dialer) so that users can get their questions answered as quickly as possible.
2. Cloudways
As the name implies, Cloudways is a managed cloud hosting platform that helps you stay focused on your business, and not worry about downtime.
If you’re a growing agency or you run an eCommerce business, Cloudways could be a perfect choice. That’s why eCommerce brands like Boohoo, Revolve, and several others choose cloud-based hosting solutions.
What I like about Cloudways:
Cloudways is a strong rival to A2 Hosting. Depending on what your hosting needs are, its robust cloud-based server will serve your website to the target audience.
This provider is very versatile and allows you to deploy your cloud servers from any of the 25 global locations, you can also choose your region and city.
Your website will always be closer to the servers. This can improve page speed and overall performance. This also makes Cloudways’ plans to be more affordable than the competitors’.
Your chosen data center will determine the price you eventually pay. You could use this map generator to build a network of the data points you’re using. Feel free to choose between monthly or hourly pricing plans, depending on what goals you wish to achieve with your website.
For instance, the basic plan for a Digital Ocean data center in New York costs $10/month.
This pricing is similar to those of other locations, including San Francisco, London, and a few other cities. However, if you want more flexibility, you could access the same plan and data center for a pay-as-you-go rate of $0.0139/hour.
What could be improved?
Cloudways offers excellent and reliable customer support across its plans, as well as a 24/7 live chat and easy ticketing system.
However, you’re required to sign up for one or two paid support plans if you want access to more advanced features. When you pay $100/month, for example, you’ll get an Advanced support plan, which includes site monitoring and investigations, in addition to customization help.
To gain access to 24/7 phone support, though, you’re required to scale up to the Premium support plan, with pricing starting at $500/month.
3. Siteground
Siteground is arguably one of the widely used cloud hosting providers. It currently has 2 million+ domains hosted. Its cloud hosting service is most ideal for high-performing websites.
What I like about SiteGround:
Siteground offers amazing support via phone, email, and live chat. It boasts a 99.98% uptime and easy-to-use features. You can’t go entirely wrong when you choose Siteground. It’s a hugely reliable provider, with an overall score of 4.6/5.
You also get a ton of Google tools to help you integrate and optimize your website.
What could be improved?
While Siteground is an amazing web hosting company, it falls short on some angles. First, it doesn’t give users free domain names when they sign up for any of its plans.
Getting a free domain name could be the motivation that a person or business needs to start their website. Many hosting providers such as Bluehost and Hostgator provide free domain names.
Second, Siteground is a bit costly. The starting price of $80 could discourage beginners from signing up. If you’re using a shared plan, this price will feel like a big leap.
That said, Siteground offers reliable cloud hosting plans — a great uptime, responsive support, and 5TB bandwidth make it a go-to resource for site owners.
4. Hostwinds
Hostwinds offers shared, dedicated, VPS, and cloud hosting solutions to small businesses. If you’re looking for a low-priced hosting plan with fast servers, you might want to consider Hostwinds.
What I like about Hostwinds:
Hostwinds offers some amazing features on its cloud plans, including RAM, bandwidth, and storage. It also comes with a one-click install option for WordPress, or you can choose to design your site using Wix or Shopify.
So there’s no need to hire a freelancer or start to write codes if you don’t want to.
The amazing aspect of this hosting provider is the hourly pricing structure. As an example, the basic cloud hosting plan starts at $0.006931/hour, while the most advanced cloud plan begins at $0.456931/hour.
The total amounts are $4.99 and $328.99/month respectively. Hostwinds also offers a 60-day money-back guarantee — which is longer than what most hosts provide.
What could be improved?
While Hostwinds offer a decent value for your money, it lacks some of the advanced features that you’d get with a more expensive provider like Cloudways. Again, it doesn’t offer free domains, free backups, and server customization.
5. InMotion Hosting
InMotion Hosting is a powerful and reliable cloud hosting provider that helps you grow your small business website. You get premium hosting features with responsive 24/7 customer support and a 99.99% uptime rate.
What I like about InMotion:
InMotion is well-respected for its shared and VPS hosting solutions, but that doesn’t mean its cloud-based hosting isn’t right for your business?
Small businesses involved in manufacturing use this hosting provider. Ecommerce businesses, local businesses have made InMotion their preferred cloud host.
The most striking feature is customer support.
You get access to a 24/7 live chat and phone support, a comprehensive knowledge center that answers the most common questions, and help tickets — when you need to contact the support team.
The features are welcoming — as it offers free domains and backups, unmetered CPU cores, root access, unlimited email accounts, and websites, and some other advanced features to make your website hosting truly remarkable.
What could be improved?
InMotion has its fair share of negatives as well. For one, the RAM is fairly low and capped at 8GB. It also has a limited bandwidth, which could negatively affect your website if there’s a sudden traffic surge.
6. Hostgator
Hostgator has been providing cheap and trusted web hosting solutions for more than 2 decades. It offers great features and cost-effective cloud hosting to small businesses.
Hostgator is one of the most affordable hosting options on this list. You can even use the handy tools to optimize your photos before using them in your page — to increase page speed.
What I like about Hostgator:
First, it offers flexible cloud hosting plans that small business owners can choose from. Here’s a breakdown:
Remember that these rates cover a 36-month contract. As you can see, the rates are cheaper than the actual price, which you’re expected to pay when you renew your plan.
You’ll get a free SSL certificate regardless of your chosen plan. For the Business plan, you’ll get a dedicated IP, free domain, and free SEO tools as well.
Hostgator has a clean and easy-to-use dashboard. Here, you can monitor how your website is performing. It’s a lot easier to view data related to page speed, reach, uptime, etc.
You can easily scale your server resources with Hostgator. All you need is one click, and you’ll not have to worry about reboots, downtime, or data migrations.
Hostgator can improve its services even more by offering a customer experience course and treating international customers a lot better. This is to cater for users who don’t understand the English language, a quick tutoring support could help them communicate with this set of users better.
Benefits Of Cloud Hosting
So why should you choose cloud hosting? Is it the right hosting solution for your website?
Let’s consider some of the benefits of cloud hosting to help you make well-informed decisions:
1. Server Performance
Cloud hosting and its technology is a great option for load balancing. Your website will perform at its best since you’re using several data centers scattered across virtual machines.
This is different from shared hosting that uses a single physical server, and thus, could slow down your performance.
With cloud-based hosting, you can utilize a ton of resources to efficiently handle traffic spikes without losing speed.
2. Server Availability
Server downtimes are never a good thing, especially if you’re making money off of your website.
The beauty of cloud hosting is that it doesn’t tie you to a single server.
Even if a machine goes down – your uptime will remain unaffected. You can see how that configuration is the perfect approach to frustrating a hacker.
3. Security
Website security is a good reason to choose a cloud hosting provider. Safety is critical, not just for you, but for your site visitors as well.
Most cloud hosting providers have come to terms with the fact that security is important — hence, they ensure their setup and features are in line with the latest security standards.
Server security is important for every type of business: a local restaurant website, a nonprofit site, a medical practice portal, a fitness site, a meal planning app, or even a serviceman’s website need to be secure at all times for the user.
Some of the measures put in place include DDoS protection, remote server backups, SSL certificate, anti-spam filters, malware protection, and other ways of protecting the cloud server, making it impenetrable, and protecting your online privacy.
In the future, though, cloud hosting companies may add an extra layer of security to their server, which may require a barcode software feature or other essential tools to unlock.
4. Scalability
Cloud hosting is suitable for small businesses and websites that want to scale. It gives you access to useful and on-demand resources — which helps you reposition your business with growth in mind.
If you’re looking for more gigabytes of space or you’d prefer another CPU core to accomplish more processing power, then you should consider using cloud hosting solutions.
Even the cheap solutions tend to support steady website growth than any shared hosting package can do.
Web hosting companies also have a responsibility to educate their customers via online webinars and tutorial videos. They can show them ways to scale their business, and the features/tools that are accessible to them.
Marketing is equally important. Small businesses can get more traffic and links by pitching the top quality blogs that accept guest posts or target media sites like Entrepreneur, Inc., Fast Company, etc.
Essentially, using exit popups to re-engage visitors before they close their browser is also a great email marketing tactic to adopt if you want to scale your small business.
5. Customization
If you’re looking for more flexibility when it comes to customizing your website and its system, the cloud hardware environment allows you to optimize your business.
If you have gained some administrative skills, you can do a lot of magic with the customization feature in most cloud hosting services.
But if you’re a complete newbie, you can take advantage of the fully managed services offered by these cloud hosts.
6. Flexible Pricing
A cloud hosting platform allows you to scale your business. You can tap into the robust server resources to improve your site performance.
There’s no need to pay for services you’re not using to their fullest when you can easily control how much you’re spending each month.
While shared hosting and VPS servers offer fixed pricing, it’s a fact that most customers don’t even utilize more than 10% of their account resources.
Do the maths and you’ll agree with me that cloud hosting services save you a ton of money and resources. This is yet another reason why you should consider using this type of hosting.
Conclusion
You’ve read through to the end, I appreciate your discipline and patience.
I’m sure this review of the best cloud hosting services for small businesses has given you some insights on how cloud computing can help you start and grow your online business, and ensure that your website is always active and fast.
At the very least, you now know the benefits of cloud hosting and the best providers offering the most reliable cloud technology.
If you’re new to cloud hosting service, I’d recommend you start with A2 Hosting since it offers affordable plans, great features, and excellent customer support.
When you’re ready to dive deeper into the world of cloud technology, then you should consider Cloudways.
Asset management and website performance optimization are two of those unavoidable headaches faced by every website owner.
A digital asset management (DAM) platform can provide centralized asset repositories with intuitive dashboards to help you manage assets. On the other hand, an image CDN can help you get rid of that messy responsive syntax and provide dynamic asset optimization with huge performance boosts.
The problem is that website performance has become such a competitive factor that DAMs with other priorities tend to fall short. On the other hand, specialized image CDNs don’t solve the problems associated with image management, particularly within organizations.
With that in mind, I propose solving these problems for good by putting together image management and optimization stack using ImageEngine and Cloudinary. Instead of being a comparison between these two tools, this article describes the benefits of using them to complement each other.
Features and Asset Management Capabilities
As a DAM, Cloudinary provides you with a visual interface to store, manage, and edit your image and video assets. In that way, it’s not much different from any other professional image managing software such as Adobe Bridge, except that it’s an online, browser-based service.
Using the Media Library, you can upload, delete, and organize images in folders, for example. The visual image editor allows you to make advanced transformations and image touch-ups and see the results instantaneously using tools like sliders, dropdowns, etc. You can even chain transformations together for multi-layered effects.
Cloudinary also allows you to manipulate images and videos this way using their URL-based API.
Cloudinary has additional auxiliary features that make asset management easier (especially in organizations), such as backups, role-based multi-user admin, and feature extensions via third-party integrations and add-ons.
This is something most image CDNs don’t provide. Instead, they allow you to access and transform images using URL manipulation. Transformations are usually made using string-based parameters or directives. A serverless, headless DAM, if you will.
However, the advantage of using a dedicated image CDN like ImageEngine, is that it can usually provide enhanced asset optimization. ImageEngine, for example, is an intelligent image CDN that uses WURFL device detection to finely read the context an image is accessed from (device model, PPI, OS, browser, resolution, etc.) and then chooses the optimal image for that configuration.
This frees up website owners from having to do any additional optimization. This business logic is also built-in to all of their global PoP servers, and ImageEngine specifically delivers cache-hit ratios close to 100%. The following performance section will illustrate the difference this can make in practice.
Just to cover our bases and prove that this is an effective asset management and optimization stack, I’m also going to affirm it using a Lighthouse performance audit. Here is a quick summary of the results:
For this test, I built a web page with a tonne of images with overly large file sizes. In this first Lighthouse audit, I didn’t apply any optimization to the images. Here’s the result:
As you can see, we had some major problems when it came to the loading time of our assets. Overall, the page took more than 10 seconds to load. One of Google’s crucial user-centric performance metrics, LCP, scored a miserable 7.5s. Lighthouse suggested that some of the main problems encountered were the asset file size, inefficient cache policies, using non-optimal image formats, and improperly sized images.
Both Cloudinary and ImageEngine are supposed to address all of these factors with their auto image optimization. In the next audit, I used the same page and content but served my images via Cloudinary:
As you can see, there is improvement in most factors. FCP is now in the green, and both the Speed index and LCP times have almost halved. Even TTI and CLS improved slightly. That being said, it’s still nowhere near optimal, and we’re still falling short of the all-important 3-second loading time ceiling.
So, finally, let’s do another Lighthouse audit – this time using ImageEngine on top of Cloudinary. Here are the results:
With ImageEngine, I finally scored in the green with 95. All the metrics that have to do with the sheer speed at which image content loads improved. The Speed Index and LCP, which is the most important, improved dramatically. CLS scored worse, but this typically varies from test to test.
You can find another and more extensive breakdown of the performance and pricing comparison here.
Transformations, Bandwidth Utilization, and Cost
Cloudinary’s pricing plans work on a credit-based system. Starting with the free account, you get 25 credits/month. Each credit can be used for 1,000 transformations, 1 GB of storage, or 1 GB of net viewing bandwidth. The other two packages cost $99 for 225 credits and $249 for 600 credits, respectively.
You should plan to generate a minimum of 5 transformations per image. In effect, that limits you to around 200 images with the free plan, excluding whatever manual transformations you make.
ImageEngine’s Basic plan costs $49 and provides you with 100 GB of Smart Bytes. Smart Bytes are based on optimized image content and translate to roughly 400-500 GB of raw images.
So, with Cloudinary, you have to compromise between bandwidth and storage usage as well as the number of transformations you can make. Transformations for Cloudinary are counted as they are dynamically generated on-demand.
However, if you use ImageEngine for optimization, you can switch off Cloudinary’s auto-optimization. When a new image variant is needed, it will be generated and delivered via ImageEngine. Considering variant count isn’t limited by ImageEngine, this will drastically cut down on the number of credits you’ll need to spend on transformations.
Effectively, that means you could use the bulk of your Cloudinary credits purely for storage and specific transformations. For example, advanced cropping, applying effects, or color adjustments. These are, after all, the main functions of a DAM.
With this setup, ImageEngine’s Basic plan and Cloudinary’s free plan should be adequate for most websites, saving around $50 a month.
How to Implement Cloudinary with ImageEngine
Signing up for Both Services
As it will house all of your image assets, the logical place to start would be to sign up with Cloudinary.
Create a (free) account, and make sure to take note of your “cloud name” during the setup wizard. This will be the name of your designated storage location on the Cloudinary platform and is usually a garbled string like di2zgnxh0 by default. However, you can change this to something more meaningful.
Once you’ve signed up, you can start uploading your image assets and creating different versions/transformations of them. Setting up Cloudinary integration on a CMS, like WordPress, is usually straightforward. Just indicate the CMS you’ll be using, copy the API key, install the plugin, and activate it.
Next, sign up for a free trial with ImageEngine. There will also be a short setup wizard during which you will:
Provide ImageEngine with the website where your images will be delivered.
Supply your image origin (in this case, your Cloudinary web folder). For now, you can only add the Cloudinary, e.g., res.cloudinary.com.
Get your ImageEngine image-serving domain, e.g., {randomstring}.cdn.imgeng.in
When in your ImageEngine dashboard, you’ll see this domain listed under “Engines” as well as an entry for Cloudinary under “Origins.” Edit the latter and under “Advanced,” add your Cloudinary folder to the “PATH” field.
That’s it, you should now be able to store and manage images via Cloudinary and serve them via the ImageEngine CDN.
Dynamically Loading Specific Image Variants
Let’s take a look at a use case for loading different transformations of individual images on your site. This example will showcase how you can use Cloudinary’s advanced image editing tools to transform images while still reaping the optimization rewards of using ImageEngine as your image CDN.
A popular practice today is to use rounded images for team, client, or profile portraits. Using Cloudinary, you can load this transformation using the following URL:
NOTE: I added my Cloudinary folder designation (“myimages”) as the path to my image origin. With that config, I don’t need to include it every time I use the image URL.
For example, you can set up the origin like this:
And, then under advanced:
If I specifically wanted to load the profile picture in WebP format (for transparency support, for example), I could add the ImageEngine directive f_webp:
Both ImageEngine and Cloudinary are superb platforms that can make managing image and video assets easier and improve your website maintenance. However, both services have their specialty in which they outperform each other.
For ImageEngine, it’s delivering blisteringly fast image loading times in next-gen formats and with a minimal loss of visual quality.
For Cloudinary, it’s providing a visual interface to organize, store, and edit your image and video assets.
As a further incentive, letting each of these services handle what they’re best at can lead to lowering your long-term operating costs.
[– This is a sponsored post on behalf of ImageEngine –]
While Scalable Vector Graphics (SVGs) were first introduced in the late 90s, they have seen a massive resurgence in popularity in the last decade due to their extreme flexibility, high fidelity, and relative lightness in a world where bandwidth and performance matter more than ever. Advancements in JavaScript and the introduction of CSS media queries such @prefers-color-scheme and @prefers-reduced-motion have extended the functionality of SVGs way beyond their initial use case of simply displaying vector images on a website.
As SVG technology advances, our understanding of how we design and develop SVGs needs to advance as well. Part of that advancement includes considering the impact of such designs and code on actual humans, aka our end users.
This article outlines twelve distinct SVG patterns found “in the wild” and each alternative description announced when accessed by different combinations of operating systems, browsers, and screen readers.
Of course, the following examples are not meant to be an exhaustive list of all the possible patterns being used in the digital sphere, but they do highlight some of the more popular or ubiquitous SVG patterns you might encounter. Continue reading to discover which SVG patterns you should avoid and which patterns are the most inclusive!
Basic Alternative Descriptions Using The Tag
The first group of four patterns utilizes the tag linking out to an SVG file. This is a good choice for basic, uncomplicated images on your website, app, or other digital product. While the drawback to using this pattern is that you cannot easily control many visual elements or animations as an inline SVG, this pattern should render lighter and faster images overall and allow for easier maintenance on SVGs that you use in multiple locations.
The second group of four patterns utilizes the tag with an inline SVG file. Although adding the SVG code directly into the markup could potentially make the page a bit slower to load, that minor inefficiency will be offset by having more control over the visual elements or animations of your images. By adding your SVG to the HTML directly, you also have more options when it comes to providing image information to your screen reader users.
