Living in a highly extroverted world, everyone is expected to outshine the rest to succeed and grow. Meeting people, talking, and generally being an outspoken person will be noticeable. However, we all tend to reflect on our inner worlds when we need to disconnect and be with ourselves. It helps us refocus or be safe from external factors affecting our tranquility. Introverts linger more than often in that internal world. Famous personalities such as Bill Gates, Warren Buffet, and Steven Spielberg, to mention a few, are successful introverts. They are excellent at what they do because of a few things:

• They are keen observers.
  For introverts, the spotlight is not important. Anyone but them can run the show.
• Introverts think carefully before speaking.
  In a discussion, they would participate but would not speak up unless it was necessary.
• Potential leaders.
  Introverts let others run with their ideas and contribute only when needed. It is a great trait since it allows others to be more creative than directive.

Two relevant sources discuss introversion. First, the book titled Quiet by Susan Cain, American author and lecturer, where she discusses what the extrovert ideal is: “the omnipresent belief that the ideal self is gregarious, alpha, and comfortable in the spotlight.” In contrast, she discusses introversion as an undervalued asset in today’s society, being often confused with shyness. However, confidence and competence happen with experience and expertise, and introverts possess them.

The second source comes from a study called the “Lemon Juice Experiment” conducted by H.J. Eysenck, Professor of Psychology at King’s College in London, along with Sybil B.G. Eysenck. The researchers observed that introverts salivate more compared to extroverts when a drop of lemon juice is placed on their tongues. They theorized that introverts get triggered by their surroundings since they have naturally higher arousal levels. Because of this, they prefer less socially intensive activities such as reading, writing, or biking, usually by themselves. Their inward-orientedness makes them unique.

The quiet traits of an introverted personality inspired me with the idea of Introverted Design. This design style would create an excellent balance to the existing experiences that scream for attention. A known example of these experiences is Instagram. Instagram used to be a simple photo and video-sharing app that everyone easily got hooked on. However, now it has grown with a multitude of features such as a marketplace, reels, a highly sophisticated editor, filters, and so on. If we look back to the start of Instagram and where it is now, it is a much busier and more complicated experience than it used to be.

Similar to how Instagram has positioned itself, most designs tend to be bold. However, there are also plenty of very subtle products where the experience itself does all the heavy lifting impeccably. Spotify is a good example. Spotify offers a plethora of music based on the choices the user has already made in their playlists. Basically, there is less scope creep while directly centered around listening. They have kept their focus on music sharing over creation, for example. Due to this, its recommendation engine is hyper-focused on music, unlike Instagram, which is trying to do many things at once.

But you may ask, what is Introverted Design?

It is a design process inspired by introverted traits that will aid designers in building highly functional and minimalistic products. Imagine if the behavior of introversion is married to the existing design process.

• What will happen if the research is equipped with insightful information on top of the conventional way of “ask and answered”?
• Will learning how introverts think help in ideating or brainstorming?
• Introverts evaluate situations before speaking. Can this be translated to identify various risks and edge cases before designing?
• We will look into additional traits that can be translated to incentivize the existing design process.

I am sure we all have experienced “a mental block” at some point in time when it becomes challenging to develop new ideas. Usually, it happens because we are short on research. Inculcating a new way of thinking and a new way of solving problems would aid us at various points of the design thinking and execution process. It will hopefully create a habit of grasping more information and better evaluation that would otherwise go unnoticed or overlooked and directly help to remove that mental block.

Now that we know a bit more about quiet traits, let’s look into some ways to incorporate these traits to create an introverted design.

Identify The Nuances Of User Behavior: Subtle Discomforts

A study done by Kirby M. Jaeger, Austin H. Cox, David Philip Arthur Craig, and James W. Grice, called “An auditory startle response predicts introversion”, at the University of Tennessee at Chattanooga showed that introverts tend to be more sensitive to incoming stimuli on a physiological level. The human brain has an innate ability to block unnecessary information to prevent cognitive overload is called sensory gating or sensory-motor gating. It makes introverts good observers, and they tend to notice details that would otherwise go unnoticed. Also, it occurs naturally to them.

Though the study remarks observation as quality introverts possess, it is not unique to them. Everyone can achieve it by training their mind to observe intently. This trait can be applied in user research to identify information that is not necessarily shared verbally, like body language, nuances in pitch, dialog delivery, eye contact, and so on.

For example, a few years back, I conducted a user study while working at Teltech Systems. The study was to gain insights from the users to develop an app’s spam call-blocking feature. One participant, in particular, articulated their thoughts very well. They mentioned the spam call-blocking feature was helpful and had been very beneficial in blocking most spam calls. Although the participant answered, I could sense discomfort in their voice, and they had no eye contact with me. These nuances would have gone unnoticed had I not been paying attention. My unease with the participant’s responses urged me to probe them further. As a result, I realized that the spam-blocking feature was incomplete. The probing revealed that the user would have to open the app to report any number as spam.

At the end of the interviews, one of the significant findings was that the end-users would appreciate it if the spam blocking feature would allow them to report and block spam calls on the call screen itself instead of reporting it through the app. After I shared this finding with the team, there was an immediate agreement, and a feature enhancement was soon released.

According to the author of Human Communication: The Basic Course, Joseph DeVito, listening has five stages: receiving, understanding, remembering, evaluating, and responding. Listening carefully helps us identify those hidden messages that are commonly overlooked since listening is restricted to just what falls on the ears. Training ourselves to observe body language, the pitch of sound, metaphors, and so on could help identify the nuances in human behavior that might point to the real truth in the conversation. As designers, we could create a habit of detecting these subtle changes and ask follow-up questions to validate our observations.

Once the validation is complete, the next step is to strategize ideas and actions based on the research.

Overthinking An Action

Overthinking is often considered to be a negative trait because it means thinking too much and for too long, for example, second-guessing and constantly analyzing the decision that is already made. Is overthinking always a negative behavior? Probably not.

In a positive state of mind, overthinking can be taking a step back to reconsider something and looking at it as a tool to devise better strategies. For instance, doing more research before writing an article or planning the specifics of a trip can result in much better experiences. It gives us time to evaluate situations better by looking into the details. Another advantage is being able to generate multiple solutions to consider different angles, which provides a wider perspective and it helps to validate or negate assumptions as well as devise backup plans.

According to Jenn Granneman, an educator and journalist, as well as the author of The Secret Lives of Introverts, “overthinking doesn’t necessarily need to be wrong.” She mentions a research study carried out by Dr. Laurie Helgoe, an American psychologist. In it, Dr. Helgoe mapped the electrical activity in participants’ brains and found that introverts have higher levels of electrical activity, thus, greater cortical arousal. It does not matter what emotional state they are in, as they tend to think more. In other words, introverts process more information making them prone to overthinking.

I, myself, being prone to overthinking, created a thought process that mirrors critical thinking. Identify the problem, analyze it by being open-minded, and solve the problems by creative and critical thinking — using various tools such as mind mapping, checklist, lateral thinking, and so on. By breaking overthinking into a much more digestible thinking process, I can evaluate the problems and situations better.

I can translate those same three steps for research as well. Usually, after conducting my first interview for any research, I listen to it to identify if I need to re-evaluate my strategy, identify any mistakes I made and tidy up the script. These are some of the questions I ask myself:

• If there is hesitation, what made them hesitate while answering?
• Did I make them uncomfortable?
• If I made them a bit uncomfortable, would they share more?
• How can I probe them further to get better answers or more in-depth answers?
• Can I ask this question in a different way? How would they react?

This overthinking process provides me with insights to evaluate a better strategy for the remaining interviews.

Overthinking also allows you to foresee particular possibilities. A friend was working on promotional content for their upcoming mobile app update. The business requirement was to push this quickly since the holiday season was around the corner. After an extensive session and design thinking, he came up with plenty of ideas and presented those to the stakeholders. In that working session, he identified the various cases to name a few:

• The changes required for implementation.
• Will these changes affect any future work?
• Will this change bring in more updates after the promotion ends?
• Does it support all the other feature changes?
• Are there any possibilities for reverting to the older version?
• What are the pros and cons of the ideas?
• Identify any outstanding questions or follow-up questions.
• Can a design define the promotion and also pave the path for future enhancements?

However, the business stakeholders had already agreed upon a direction. After presenting possible options to the stakeholders, my friend was able to convince and steer the focus toward one of the options because he had thought it through and had all the answers the stakeholders would ask and even more with what the direction would bring for the future of the app. Overthinking is prone to take a quick negative turn. So it is important to keep two things in mind.

1. Identify where to stop.
2. Identify if you have developed any patterns and prevent them from happening.

Overthinking, if done positively, allows us to ideate more than expected and gives a clear direction with multiple points to discuss or defend a direction.

Overthinking could help achieve or see more possibilities sooner. It can be a strategy applied to look for additional insights while clustering ideas together in a brainstorming session.

Identify Risks

A risk is choosing a path, knowing that it is uncertain. In contrast, introverts take calculated risks because their overthinking has already led them through multiple outcomes, the pros and cons, allowing them to choose the one with the slightest possibility of failure.

A risky decision should also entail meticulous thinking about the risk itself. Since introverts tend not to need instant gratification, they take their time to evaluate. They prefer to have control over the decisions. It means they pick an option they are comfortable and confident pursuing. It does not mean they choose a safe and easy option. On the contrary, their thinking has led them to choose a path with a higher probability of success.

For example, a brainstorming session about implementing a product and a risk evaluation session would help identify some of the difficulties the user flow might run into. Once identified, it would be easier to find a way to fix it. A well-thought user flow, with all the use cases considered, would help us share with the rest of the team. Identifying risk and overthinking go well together. Overthinking allows us to look for possibilities, and risk analysis helps us evaluate and find the best path forward. In addition, all the edge cases, error states, and deadends can be identified in advance.

Make It Objective By Practicing Active Listening

Ironically, making objective decisions is a very subjective process. Crazy, right? But think about it, we all have unconscious biases. Unconscious biases are the judgments and assessments we carry outside our conscious awareness. For example, imagine we are just looking at a person; our brain builds a persona about their personality. But, in actuality, it could be very different. Introverts are no exception to the bias; they succumb to it as well. However, they have an edge, a trait that can be used to reduce this bias: active listening.

Multiple research papers have been published about introverts being active listeners. One such thesis paper, written by Amari-Mall and Nakhaie, both lecturers of English at Islamic Azad University, compared the performance of participants of English as a foreign language and noticed that introverts are better listeners. In a nutshell, introverts tend to be less reactive in a conversation; they listen intently and speak only when they are confident or know enough to share.

Active listening was coined by Carl Rogers and Richard Farson. According to them, active listening has six stages, such as paying attention, withholding judgment, reflecting, clarity, summarizing, and sharing. Unconscious bias usually occurs just after receiving the information and making a snap judgment without reflection. We start to connect the dots based on experiences, social acceptance, inherited knowledge, and so on to develop a belief or an assertion that could be construed as biased. So, being objective becomes difficult.

I was working with my product owner on enabling a paperless experience for one of our products. It took a lot of work to execute this experience due to the complexity involved in the types of documents available for paperless; the rest were mailed. It was a time-sensitive update that had to go out in the larger scheme. However, I dug deeper to understand the expectation for the design. I spent quite some time designing the solution. Eventually, my product owner was unhappy and frustrated when I presented the options to the team. I failed as a designer to pay attention, the first step in active listening, causing a chain reaction in loss of time, that too in a time-sensitive design fix. If I had paid attention and listened to the expectation without bias, the result would have been different.

According to the Hubspot Customer Service Survey 2019, almost 42% of companies do not listen to their customers. The balance is tipped toward business requirements, and customer expectations are funneled out. As a result, the final designs are heavily influenced by the bias of what the team feels the customer wants, but none of it gets validated. Unconscious bias has a higher probability of being introduced, not just by the designer but by the team as well. As a result, it becomes even more pressing for the designer to be vigilant about what is being designed.

It is critical to make decisions towards any design implementation unbiased or, at the very least, make an honest attempt. A business that is partially fulfilling customer expectations will fail. Another responsibility that designers have is to make sure the design is validated by customers. An informed design would serve not just the business requirements, but it would also help the users.

Make It Invisible

So far, we have seen a few introverted traits focused on research and design thinking. The next step is more practical; making it invisible means making the experience so attuned to users’ expectations that it is perceived easily. By not introducing a shed of cognitive load, it will make the experience of the product simple. Even if the product is complicated, the experience should be easily maneuverable so that users can go from point A to B without any hassle.

Introverts prefer social engagements but tend to limit them to a certain extent. They need some alone time to recharge. Even after being selectively social, they get mentally drained. To help themselves recover, they enjoy their own company. Likewise, humans are always highly stimulated, for instance, reading a book, watching TV, cooking, thinking about what to do next, and so much more. In all this chaos, we, as designers, have a moral obligation to make the experiences of all the products highly intuitive by not introducing additional cognitive load. Make it invisible.

Many Indie game development companies do not have the budget to market or advertise their games; they hardly get an opportunity to show them to the world. Yet some of the most popular games on the market are made by small studios or even individuals.

One such example is Flappy Birds. Flappy Birds is a game where the player has to simply tap to make the bird fly. The objective is to avoid obstacles in this infinite scroll game (technically, it is not, however, it is very difficult to beat it by reaching 9,999 points). It became an overnight sensation. The artist and programmer Dong Nguyen, who created this game, took it down because he never imagined it would become this popular and addictive. The game had very simple graphics and deceptively simple interaction, yet it became one of the most downloaded games on Appstore and Google Play. Similarly, a design for any app could also be as simple as Flappy Bird to fulfill user expectations.

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

— Jared Spool, an expert in the field of design and research

In other words, “making it invisible” means creating an experience that does not make the user think. It is so intuitive that it feels natural. Imagine someone reading your mind and giving you precisely what you want at the exact time.

Another great example is the app Citi Bike, which is mostly used by New Yorkers and tourists alike to commute or explore. It allows the user to easily book a bike for the next 30 mins by undocking it from their generously placed docks throughout the city. If you look at the app, nothing seems to be missing, and everything is easy and intuitive, but it can be invisible.

The moment the app opens, the user sees their location and a button to scan the QR code. Once they scan the code on the bike, it is unlocked. They can then enjoy their ride for the next 30 mins. This is all great, but can the experience be made invisible? Can it be made even better? Of course, it can. Imagine the app would detect the proximity of the user and show the scan code screen directly when they are near a dock. The experience is far more attuned to users’ needs. Just making this small adjustment to the flow would reduce the additional action and make the product, well, invisible.

Currently, Jetblue’s mobile app shows points and additional featured content to make up the homepage. However, the main goal is to either view their booking or make a reservation. The user then has to navigate to the book section to make any reservation. This process could be enhanced by simply introducing a search bar that is less intrusive on the homepage.

A design does not need to use bright colors, flash call to action (CTA), or jargon words to make it sound smart. It could be very simple but effective with colors, transitions, easy-to-track CTAs, and simple sentences so that anyone can understand it.

Any design decisions we make as designers should help the user quickly complete the task they had in mind when they opened the app. Empathy articulation is a way of understanding the user’s expectations, foreseeing user interaction issues, and translating them into an effortless, actionable, invisible, and affordable design by being mindful. The more we practice invisible design, the better user experiences we can create.

Help The User When Needed

Introverts have a hard time asking for help even if they need it. When others ask them to reach out if they need help, chances are introverts will not reach out. The inherent need to ask for help gets buried because reaching out is difficult for them. Some form of proactivity is needed from others to get them to speak. Of course, this does not mean they are shy. That also does not mean they will never reach out, shifting all the effort onto others. Introverts would find ways to solve the problem by themselves, but they would reach out if nothing worked. However, they would certainly appreciate a nudge.

Help can be needed at any given time, and it should be available. If the idea of “checking with someone” is used in digital media, it will help users to get the needed help when they need it the most. It will give them comfort and improve the experience in general. Imagine a user is trying to find something, and the product identifies their struggle. It would be helpful to push a chatbot or a popover to ask if they need any help. Use the space to assist them. What if there could be an easy way to identify a problem and provide a few options to resolve the issue? What if the control system could help them in their moment of need by recommending a choice?

Here is a good example: you visit the Canyon bikes website looking for a brand-new bike for your next adventure, but you have a hard time differentiating between them. All the scrambling and looking for the right model puts you in a paradox of choice. Which bike to pick? However, the website has solved it quite elegantly. After a while, the chat bubble automatically opens up, asking if you want to chat. This feature puts you in line to talk to a representative who can help you locate the exact bike that will satisfy your needs. Here if you notice, the website realized you could not find the bike and surged up to help. It was at the right time and was not invasive, keeping you, as the customer, rooted in the experience.

The help should also be accurate and precise, with actionable items or connecting you to a live agent like in the above example. Otherwise, as much as help is needed, it might pile on more confusion than reduce it. That brings us to the next and final trait.

Subtlety

Introverts enjoy speaking directly yet deftly. They think talking elaborately would stretch the conversation further and make it exponentially longer than they would prefer and also stir up confusion. Introverts believe that a minimal set of words can make a high impact. Similarly, being subtle can bolster a user experience even further. The user experience can be precise to what the user wants instead of creating a visually complicated path. Craigslist, for instance, has no visual design elements compared to many products out there, but it still fulfills customer expectations because the website has a good UX. The arrangement and categorization are well thought out, making the entire experience far smoother.

The implementation of the language is also a part of the user experience, and it should be simple and easy to comprehend. Complex and complicated language tends to alienate users and cause them to overlook important information.

Likewise, keeping a design minimalistic will make the entire experience better, including the language. Subtlety is about keeping the experience to the bare minimum; it should not be overdramatic. Burdening users with too much information or too many interactions puts them in a paradox of choice.

User experience is about building pleasure around expectation.

Shazam is a compelling app that identifies the tune to help you learn more about the song you liked but do not know the name of. They have made using the tool even simpler by integrating it with Siri. “Hey, Siri, which song is this?” will bring up Shazam to help identify the song. Now that is subtlety.

Introverted design is pulled from introverted traits that elegantly influence designs. I firmly believe that using these traits and converting them into appropriate skills could help designers with a different outlook. To practice introverted design, we need to perform the same process with additional intentions that are driven like an introvert:

1. Identify nuances of human behavior: Introverts are expert observers.
   • Skill: Exceed the obvious.
2. Overthinking an action: Introverts are prone to overthink.
   • Skill: Ponder and analyze data beyond the convention.
3. Identify Risks: Introverts take calculated risks.
   • Skill: Carefully consider decisions to pave the path with the slightest possibility of failure.
4. Make it objective by practicing active listening: Introverts are great listeners.
   • Skill: Active listening will help designers comprehend and build better products.
5. Make it invisible:Introverts prefer alone time to recharge.
   • Skill: Create highly intuitive products by focusing on the need.
6. Help the user when needed: Due to their inwardness, introverts have a hard time asking for help.
   • Skill: Intervene and provide necessary information when needed.
7. Subtlety: Introverts prefer using precise words to convey thoughts.
   • Skills: Drive high impact by being eloquent.

The design does not need to be bold, but it needs to be elegant. To use an introverted design, we first need to understand the introverted personality. I am a proud introvert, so I highly recommend a great resource — Jenn Granneman’s ‘Introvert, Dear,’ an award-winning community of introverts. Commonly mistaken for shyness, introverts are highly effective people.

The way introverts deal with and interact with the world is nimble. Observe your surroundings, and you will notice so much information that you usually do not perceive. Be articulate using appropriate words and real examples. Listen first, talk later; it helps formulate thoughts better. Speak only when you have something to contribute; otherwise, you are not adding any value to the conversation. Be a critical thinker. All this will help you learn more about how introverts look at the world.

Sometimes a different perspective is all we need to make a difference.

While I am not a regular Chrome extension programmer, I have certainly coded enough extensions and have a wide enough web development portfolio to know my way around the task. However, just recently, I had a client reject one of my extensions as I received feedback that my extension was “outdated”.

As I was scrambling to figure out what was wrong, I swept my embarrassment under the carpet and immediately began my deep dive back into the world of Chrome Extensions. Unfortunately, information on Manifest V3 was scarce and it was difficult for me to understand quickly what this transition was all about.

Needless to say, with a pending job, I had to painstakingly navigate my way around Google’s Chrome Developer Documentation and figure things out for myself. While I got the job done, I did not want my knowledge and research in this area to go to waste and decided to share what I wish I could have had easy access to in my learning journey.

Why the transition to Manifest 3 is important

Manifest V3 is an API that Google will use in its Chrome browser. It is the successor to the current API, Manifest V2, and governs how Chrome extensions interact with the browser. Manifest V3 introduces significant changes to the rules for extensions, some of which will be the new mainstay from V2 we were used to.

The transition to Manifest V3 can be summarized as such:

1. The transition has been ongoing since 2018.
2. Manifest V3 will officially begin rolling out in January 2023.
3. By June 2023, extensions that run Manifest V2 will no longer be available on the Chrome Web Store.
4. Extensions that do not comply with the new rules introduced in Manifest V3 will eventually be removed from the Chrome Web Store.

One of the main goals of Manifest V3 is to make users safer and improve the overall browser experience. Previously, many browser extensions relied on code in the cloud, meaning it could be difficult to assess whether an extension was risky. Manifest V3 aims to address this by requiring extensions to contain all the code they will run, allowing Google to scan them and detect potential risks. It also forces extensions to request permission from Google for the changes they can implement on the browser.

Staying up-to-date with Google’s transition to Manifest V3 is important because it introduces new rules for extensions that aim to improve user safety and the overall browser experience, and extensions that do not comply with these rules will eventually be removed from the Chrome Web Store.

In short, all of your hard work in creating extensions that used Manifest V2 could be for naught if you do not make this transition in the coming months.

The key differences between Manifest V2 and V3

There are many differences between the two, and while I highly recommend that you read up on Chrome’s “Migrating to Manifest V3” guide, here is a short and sweet summary of key points:

1. Service workers replace background pages in Manifest V3.
2. Network request modification is handled with the new declarativeNetRequest API in Manifest V3.
3. In Manifest V3, extensions can only execute JavaScript that is included within their package and cannot use remotely-hosted code.
4. Manifest V3 introduces promise support to many methods, though callbacks are still supported as an alternative.
5. Host permissions in Manifest V3 are a separate element and must be specified in the "host_permissions" field.
6. The content security policy in Manifest V3 is an object with members representing alternative content security policy (CSP) contexts, rather than a string as it was in Manifest V2.

In a simple Chrome Extension’s Manifest that alters a webpage’s background, that might look like this:

// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}

If you find some of the tags above seem foreign to you, keep reading to find out exactly what you need to know.

How to smoothly transition to Manifest V3

I have summarized the transition to Manifest V3 in four key areas. Of course, while there are many bells and whistles in the new Manifest V3 that need to be implemented from the old Manifest V2, implementing changes in these four areas will get your Chrome Extension well on the right track for the eventual transition.

The four key areas are:

1. Updating your Manifest’s basic structure.
2. Modify your host permissions.
3. Update the content security policy.
4. Modify your network request handling.

With these four areas, your Manifest’s fundamentals will be ready for the transition to Manifest V3. Let’s look at each of these key aspects in detail and see how we can work towards future-proofing your Chrome Extension from this transition.

Updating your Manifest’s basic structure

Updating your manifest’s basic structure is the first step in transitioning to Manifest V3. The most important change you will need to make is changing the value of the "manifest_version" element to 3, which determines that you are using the Manifest V3 feature set.

One of the major differences between Manifest V2 and V3 is the replacement of background pages with a single extension service worker in Manifest V3. You will need to register the service worker under the "background" field, using the "service_worker" key and specify a single JavaScript file. Even though Manifest V3 does not support multiple background scripts, you can optionally declare the service worker as an ES Module by specifying "type": "module", which allows you to import further code.

In Manifest V3, the "browser_action" and "page_action" properties are unified into a single "action" property. You will need to replace these properties with "action" in your manifest. Similarly, the "chrome.browserAction" and "chrome.pageAction" APIs are unified into a single “Action” API in Manifest V3, and you will need to migrate to this API.

// Manifest V2
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"browser_action": {
  "default_popup": "popup.html"
},

// Manifest V3
"background": {
  "service_worker": "background.js"
},
"action": {
  "default_popup": "popup.html"
}

Overall, updating your manifest’s basic structure is a crucial step in the process of transitioning to Manifest V3, as it allows you to take advantage of the new features and changes introduced in this version of the API.

Modify your host permissions

The second step in transitioning to Manifest V3 is modifying your host permissions. In Manifest V2, you specify host permissions in the "permissions" field in the manifest file. In Manifest V3, host permissions are a separate element, and you should specify them in the "host_permissions" field in the manifest file.

Here is an example of how to modify your host permissions:

// Manifest V2
"permissions": [ 
  "activeTab", 
  "storage", 
  "http://www.css-tricks.com/", 
  ":///*" 
]

// Manifest V3
"permissions": [ 
  "activeTab", 
  "scripting", 
  "storage"
],
"host_permissions": [
  "http://www.css-tricks.com/" 
],
"optional_host_permissions": [ 
  ":///*" 
]

Update the content security policy

In order to update the CSP of your Manifest V2 extension to be compliant with Manifest V3, you will need to make some changes to your manifest file. In Manifest V2, the CSP was specified as a string in the "content_security_policy" field of the manifest.

In Manifest V3, the CSP is now an object with different members representing alternative CSP contexts. Instead of a single "content_security_policy" field, you will now have to specify separate fields for "content_security_policy.extension_pages" and "content_security_policy.sandbox", depending on the type of extension pages you are using.

You should also remove any references to external domains in the "script-src", "worker-src", "object-src", and "style-src" directives if they are present. It is important to make these updates to your CSP in order to ensure the security and stability of your extension in Manifest V3.

// Manifest V2
"content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3
"content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src
'self'",
"content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Modify your network request handling

The final step in transitioning to Manifest V3 is modifying your network request handling. In Manifest V2, you would have used the chrome.webRequest API to modify network requests. However, this API is replaced in Manifest V3 by the declarativeNetRequest API.

To use this new API, you will need to specify the declarativeNetRequest permission in your manifest and update your code to use the new API. One key difference between the two APIs is that the declarativeNetRequest API requires you to specify a list of predetermined addresses to block, rather than being able to block entire categories of HTTP requests as you could with the chrome.webRequest API.

It is important to make these changes in your code to ensure that your extension continues to function properly under Manifest V3. Here is an example of how you would modify your manifest to use the declarativeNetRequest API in Manifest V3:

// Manifest V2
"permissions": [
  "webRequest",
  "webRequestBlocking"
]

// Manifest V3
"permissions": [
  "declarativeNetRequest"
]

You will also need to update your extension code to use the declarativeNetRequest API instead of the chrome.webRequest API.

Other aspects you need to check

What I have covered is just the tip of the iceberg. Of course, if I wanted to cover everything, I could be here for days and there would be no point in having Google’s Chrome Developers guides. While what I covered will have you future-proofed enough to arm your Chrome extensions in this transition, here are some other things you might want to look at to ensure your extensions are functioning at the top of their game.

• Migrating background scripts to the service worker execution context: As mentioned earlier, Manifest V3 replaces background pages with a single extension service worker, so it may be necessary to update background scripts to adapt to the service worker execution context.
• Unifying the **chrome.browserAction** and **chrome.pageAction** APIs: These two equivalent APIs are unified into a single API in Manifest V3, so it may be necessary to migrate to the Action API.
• Migrating functions that expect a Manifest V2 background context: The adoption of service workers in Manifest V3 is not compatible with methods like chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), and chrome.extension.getViews(). It may be necessary to migrate to a design that passes messages between other contexts and the background service worker.
• Moving CORS requests in content scripts to the background service worker: It may be necessary to move CORS requests in content scripts to the background service worker in order to comply with Manifest V3.
• Migrating away from executing external code or arbitrary strings: Manifest V3 no longer allows the execution of external logic using chrome.scripting.executeScript({code: '...'}), eval(), and new Function(). It may be necessary to move all external code (JavaScript, WebAssembly, CSS) into the extension bundle, update script and style references to load resources from the extension bundle, and use chrome.runtime.getURL() to build resource URLs at runtime.
• Updating certain scripting and CSS methods in the Tabs API: As mentioned earlier, several methods move from the Tabs API to the Scripting API in Manifest V3. It may be necessary to update any calls to these methods to use the correct Manifest V3 API.

And many more!

Feel free to take some time to get yourself up to date on all the changes. After all, this change is inevitable and if you do not want your Manifest V2 extensions to be lost due to avoiding this transition, then spend some time arming yourself with the necessary knowledge.

On the other hand, if you are new to programming Chrome extensions and looking to get started, a great way to go about it is to dive into the world of Chrome’s Web Developer tools. I did so through a course on Linkedin Learning, which got me up to speed pretty quickly. Once you have that base knowledge, come back to this article and translate what you know to Manifest V3!

So, how will I be using the features in the new Manifest V3 going forward?

Well, to me, the transition to Manifest V3 and the removal of the chrome.webRequest API seems to be shifting extensions away from data-centric use cases (such as ad blockers) to more functional and application-based uses. I have been staying away from application development lately as it can get quite resource-intensive at times. However, this shift might be what brings me back!

The rise of AI tools in recent times, many with available-to-use APIs, has sparked tons of new and fresh SaaS applications. Personally, I think that it’s coming at a perfect time with the shift to more application-based Chrome extensions! While many of the older extensions may be wiped out from this transition, plenty of new ones built around novel SaaS ideas will come to take their place.

Hence, this is an exciting update to hop on and revamp old extensions or build new ones! Personally, I see many possibilities in using APIs that involve AI being used in extensions to enhance a user’s browsing experience. But that’s really just the tip of the iceberg. If you’re looking to really get into things with your own professional extensions or reaching out to companies to build/update extensions for them, I would recommend upgrading your Gmail account for the benefits it gives in collaborating, developing, and publishing extensions to the Chrome Web Store.

However, remember that every developer’s requirements are different, so learn what you need to keep your current extensions afloat, or your new ones going!

How to Transition to Manifest V3 for Chrome Extensions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Content marketing is essential in any digital marketing strategy if you want to attract and engage your audience. But creating an effective content marketing strategy is no easy task, with many potential mistakes you’ll need to avoid. To help you, we’ve covered 7 fall downs and pick-ups in content marketing. 

Importance of an effective content strategy 

An effective content marketing strategy is important for any business to help reach new prospective customers and boost sales. It’s all about delivering content that is both relevant and helpful throughout each stage of the customer journey. 

Content marketing is about showcasing your brand’s value to help build relationships and trust with your audiences. Effective content marketing will address your potential customer’s pain points and provide answers to their questions. 

Unlike paid advertising which results in short-term growth, content marketing strategies provide long-term business growth. Around 67% of marketers report their content marketing efforts to generate leads, according to the Content Marketing Institute. 

It’s also worth noting that content marketing is one of the most important ranking factors for Google. Not only will an effective content marketing strategy win over your customers, but it will also boost your search engine rankings. 

To summarise, content marketing is important to: 

• Build trust 
• Increased lead generation and conversions 
• Stronger online presence and brand awareness 
• Become an authority in your area 
• Provide value 
• Higher website traffic 
• Increased sales 

Spotting these content marketing mistakes quickly and understanding how to address them can do wonders for generating leads and conversions. To help you deliver the high-quality content that your customers have come to expect, here are 7 content marketing fall downs and pick-ups. 

Fall down #1 – No plan or long-term goal 

The first fall down you can make with your content marketing strategy is not having a plan or long-term goal. Successful content marketing will need a plan or goal. You should be able to identify what it is you want to achieve with your content strategy. If you can’t, you’re in trouble. 

Without this focus, your content marketing strategy will be misguided and won’t be focusing on the bigger picture. Creating content ad hoc is a sure way to lead to an ineffective and failing content strategy. It’s pointless spending all that time and effort on content that won’t drive worthwhile results. 

The pick-up 

The pick-up for this fall down is to make sure you establish a long-term plan or goal for your content marketing. Ask yourself, what do I want to achieve with my content marketing? To improve the clarity and focus of your content strategy, make sure your goals are SMART: 

• Specific – clear and specific goals are easy to work with and achieve 
• Measurable – adding a measurable component allows you to measure success 
• Achievable – make sure the goal is achievable and identify the steps you can take to achieve it 
• Relevant – is the goal relevant to your business? 
• Timely – when do you want to achieve your goal? 

Fall down #2 – Ignoring or not using data 

Another common fall down in content marketing is ignoring the data. Many businesses will fall into the trap of developing content ideas they think would be a good fit for their business or customers. Throwing ideas at the wall and seeing what sticks only leads to disaster. 

The pick-up 

Every content strategy should revolve around data. Data should be placed at the start and finish of content creation. Data-driven content strategies can help inform your content creation, allowing you to see what works and what doesn’t. 

Data should inform both the start and finish of content creation. Using data from Google Analytics and other tools allows you to measure the success of your content strategy against your goal and campaign KPIs. 

Fall down #3 – Not creating reusable content 

Creating high-quality content can take a lot of time and effort. Yet many businesses will fail to see the value of reusing existing content. Chances are you have a wide library of material you can reuse. Content marketing doesn’t and shouldn’t just focus on developing new content. 

A one-and-done approach to publishing content not only uses valuable resources but can also eat away at your return on investment. Content developed with a short shelf life that’s soon forgotten about is a waste.  

The pick-up 

Picking up from this content marketing fall-down is simple. Make use of what you have by repurposing content. Whether it’s a long-form blog post that can be repurposed into a guide or a tutorial that can be repurposed into a video. 

Secondly, most, if not all of your content should also be evergreen. Evergreen content is content that continues to stay relevant. Creating content on trending and topical issues is all very well at the time, but what happens to that content in the future? It becomes outdated and unusable again. 

Fall down #4 – Limited content types 

Another common fall down in content marketing is not taking full advantage of the wide range of content types available. If you are stuck in the process of continually churning out blog posts or social media posts, your content marketing strategy is experiencing another fall down. 

The pick-up 

There are lots of different content types, including written, visual, and audio. A successful content strategy will make use of a variety of different content types, not just one. When planning your next piece of content, consider if it works better as another content type, such as: 

• Infographics and images 
• Short-form and long-form videos 
• Podcasts 
• Webinars 
• Checklists and how-to guides 
• Whitepapers 
• Case studies 

Fall down #5 – Not understanding your customers 

Similarly to not using data, not knowing or understanding your customers is another fail. No matter how good a piece of content is, if it’s not right for your audience, it’s irrelevant. 

You cannot deliver value to your customers through your content if you don’t know who they are. In many instances, there is a gap between what a company thinks its customers want and what their customers actually want. 

Around 63% of customers state they don’t feel understood by the brands they love, according to a study by IBM. This content marketing fall down can be easy to get into, but a tough one to try and get out off. 

The pick-up 

To ensure you are developing content that is right for your customers, you should be creating buyer personas. These are semi-fictional representations of your customers. An effective buyer persona will be informed by the data and insights you gain about your customers. 

A buyer persona will seek to identify: 

• Who your audience is (demographics) 
• What are their needs or behavior (behavioral) 
• Values, lifestyle, and interests (psychographics) 
• Goals and challenges 
• Habits and preferences 

A well-defined buyer persona will be supported by research. Nothing in your buyer persona should be purely speculative otherwise it doesn’t accurately reflect your audiences. For the best results, you should develop a buyer persona for each of your audiences (limiting yourself to no more than 5). 

Fall down #6 – Lacking a schedule 

How often do you publish a piece of content? Do you stick to a schedule? If not, your content marketing strategy is experiencing another fall-down. If you want to be growing your business online, you need to be sticking to a schedule to help create consistency and keep you organized. 

Without a schedule to provide the bigger picture, your content strategy will lack focus and become chaotic. It also reflects badly on your target audience if they have long periods without any content updates. 

The pick-up 

For each month, consider setting up a content schedule for the content that will be created and published. Try to keep this calendar as visual as possible and easy to understand. Using your content schedule, you should be able to plan your campaigns across different platforms too. 

Your content schedule should also include a review or approval process. No piece of content should ever be published before it is checked. Every piece of content needs to reflect the style of the brand. Content can also contain inaccuracies and mistakes, which can easily be avoided. 

Make sure at least one peer reviews a piece of content before you hit the publish button. Monitoring the review process can be tricky, but using a project management platform can make it much easier. Trello, ClickUp, and Asana are project management platforms to consider. 

Fall down #7 – Pushing promotional or sales content 

Being over-promotional or pushing out too much sale-related content is one of the biggest content marketing mistakes many businesses make. While every business wants to try to increase sales or usage of products and services, taking an overly promotional approach is the wrong way. 

It’s a similar situation to someone who is always bragging about how good they are. People get bored and tired of listening surprisingly fast. The same goes for your customers. Constantly putting out content that tries to gain a sale will just cause people to unfollow. 

No matter what type of content you use, the same rules apply. When people view your content, they are not interested in how great you are. Whether it’s a blog post, a social media video, or a podcast, none of the above content marketing tips will be worthwhile. 

The pick-up 

The pick-up for this content marketing mistake is obvious. Stop being overly promotional or sales-focused in your content marketing. Instead, create content that focuses on your customers and what matters to them. In the long run, this will benefit your business much more than just another sales blog. 

By no means does it mean you cannot publish promotional content, far from it. You need to create content for all stages of the buyer’s journey. Not just those at the awareness or consideration stages. The general rule of thumb is an 80/20 balance. 

80% of your content should be tailored to your audiences by providing relevant and helpful solutions to their questions and pain points. The other 20% is about your business. You don’t have to stick right to these numbers, but it gives you a good idea of how to balance your content creation. 

Conclusion

Developing an effective content marketing strategy is not easy. With so many easy fall downs, it can be hard to continue providing value to your customers. But being aware of the fall downs and how you can pick yourself up again will stand you in good stead to develop an effective content strategy. 

The post 7 fall downs and pick-ups in content marketing  appeared first on noupe.

If you’re using the WordPress platform for your website building projects, you’re definitely on the right track. Still, building a better website than the competition’s is usually easier said than done. As doing so may require design or coding skills beyond what you currently possess.

The good news is that there are WordPress tools that can be precisely what you need to improve a website’s features or add desired functionality.

These tools are called plugins, and they are software addons you can install on your websites to add features. You can extend functionality, optimize SEO, boost speed and performance, and more.

Check out these 9 great  WordPress plugins for your website projects in 2023. One of more of them could give you exactly what you are looking for.

1. Brizy: The Best Website Builder for Non-techies

If is unlikely that the Brizy design team really intended to pander to you, but once you start using it, no other website theme builder will ever feel as nice and easy to work with. The Brizy cloud website builder is ideal for beginners and non-techies (and for techies as well), and you can download it for free.

The Brizy WordPress theme builder has many uses. You can, for example –

• build a new website.
• improve upon an existing one.
• create dynamic templates and use them for creating blog and archive pages, headers and footers, and custom pages exactly as you want them.
• choose among more than 150 high conversion pre-made templates
• access elements and templates to customize an eCommerce shop site

Key Brizy features include a Theme Builder, Global Blocks, Global Styling features, and WooCommerce integration. You can take advantage of the 100% White Label option if you want to brand the Brizy Builder as your own.

Click on the banner to give Brizy a closer look. A Pro option is available.

2. WpDataTables – WordPress tables plugin

You probably enjoy facing a challenge now and then, or you wouldn’t be a web designer. Still, working with massive amounts of complex data can be frustrating at times. Especially when it takes hours of effort to create a table or chart and the final result is disappointing.

wpDataTables is a power-packed WordPress tables plugin that can process huge amounts of complex data to create attractive, interactive, responsive, and easily editable and maintainable tables and charts in minutes.

wpDataTables key features include –

• 4 chart-building engines — Google Charts, Highcharts, Chart.js, and Apex Charts.
• the ability to work from multiple database sources, MYSQL, MS SQL, PostgreSQL and with all standard data formats
• using Conditional Formatting to highlight and color code key data
• integration with Elementor, Divi, Avada and WP Bakery.

Other useful features include sorting and filtering, formula columns, nested JSON, and more. Click on the banner to learn more.

3. Amelia – WordPress booking plugin

Adding the Amelia WordPress booking plugin to a business’s WordPress website can completely streamline and fully automate its appointment booking operations with its ability to –

• manage an unlimited number of client appointment bookings at multiple locations from a single platform and dashboard.
• enable clients to book appointments online 24/7.
• manage group appointments, packages, and events.
• send notifications and reminders to clients via Email or SMS
• accept payments online using PayPal, Stripe, Mollie, or

Booking forms can even be customized to match the business’s brand. Amelia provides an ideal booking solution for beauty, healthcare, fitness, consulting, educational, and other client-dependent business enterprises.

Click on the banner to learn more about how you could use the Amelia WordPress plugin streamline and automate your business’s booking operations.

4. LayerSlider – Best WordPress Slider Builder Plugin

Choosing LayerSlider to add sliders to a website is a wise choice as it’s the best WordPress slider plugin on the market, and it can also be used to create image galleries, popups, landing pages, animated page blocks, and parallax and scroll scenes.

• LayerSlider will fully support whatever WordPress theme and page builder you happen to be using.
• LayerSlider’s 210+ highly customizable website, slider, and popup templates provide a great starting point for your new projects.

5. TheDock – Ship Solid Websites

TheDock WordPress theme builder helps teams create websites faster; websites that are guaranteed to look sharp, perform great, and be easy to support because of this plugin’s –

• well organized selections of Custom Post Types and Custom Fields.
• extremely fast page loads
• auto-adjusting, highly flexible layout system and its global UI components
• White-label builder for sharing access to TheDock’s theme builder only when you want to
• high security and easy maintenance.

6. Slider Revolution – more than a WordPress slider plugin

If you would benefit from injecting a few healthy doses of spice and flair into your websites, you should have the Slider Revolution WordPress plugin in your web design toolbox.

Slider Revolution’s-

• 250+ website and slider templates and innovative website animation effects will impress the most jaded of visitors
• web design tools take you to the limits of web design possibilities.

Slider Revolution is used and trusted by over 9 million worldwide users.

7. Ads Pro – WordPress ad manager

The Ads Pro WordPress advertising plugin presents its users with an exceptional range of advertising sales, management, and display options.

Ads Pro’s easy to work with key features include –

• an Admin Panel and front-end order form that supports efficient ad management.
• 25+ customizable ad templates and 20+ ad display options including 3 Facebook display options
• 3 billing methods and 4 payment gateways together with click fraud and ad block protection.

8. Download Monitor – Best WordPress Download Manager

Download Monitor is a WordPress downloads manager that can help streamline your business operations without having to set-up a complex tracking solution, such as Google Analytics.

Download Monitor enables you to –

• track multiple file download types (ZIP, PPT, XSLX, PDF, etc.)
• aggregate file download statistics for total downloads, downloads by IP, by user role, etc.
• establish access rules based on user roles and download quotas.

9. Essential Grid – Best WordPress grid plugin

You can use this, the best WordPress grid plugin on the market, to incorporate breathtaking, professional-looking galleries into your websites.

It isn’t all that difficult to do so. Essential Grid places at your fingertips –

• fully customizable and stunning boxed and full-width to full-screen grid layout options and masonry and cobble grid designs
• responsive designs that enable you to control how your grids will appear on various devices
• access to social media content.

*******

WordPress is a highly flexible content management syste for building websites. A driving force behind this flexibility is the wide variety of great WordPress plugins you can use to add features to your site.

Choosing the right WordPress plugin is important for a website’s performance. It can be critical with respect to what it will be capable of accomplishing.

Check out these 9 best WordPress plugins for your website projects in 2023. One of more of them could be a game changer.

Read More at Use these Great 9 WordPress Plugins in 2023

Whether you sell buttons or beef, you need a website to achieve your business goals, especially when you consider the profit it can bring. The average eCommerce site earns just over $63,000 per month and a successful business blog can significantly improve your brand awareness. 

However, running an effective and sustainable website can be tricky. If you’re new to digital content, phrases like “bounce rate” and “click-through rate” (CTR) may make you feel like giving up on creating a site altogether. 

Fortunately, creating and maintaining a website is easier than ever before. Free website builders can help you put together a great site even if you can’t afford a full-time web developer. 

Why Get a Website? 

Creating and maintaining a website may require a lot of work. However, the effort may be worth it if you want to grow your business and reach new customers and many businesses already see this value. 51% of small businesses say that they’ve increased their interactions with customers thanks to their website and a further 36% say they complete all their business online. 

If you do build a website, you have to ensure that it is functional and meets consumers’ expectations. Consumers today spend an average of 2 minutes on each site they visit and need only half a second to form an opinion of a site. 

The cut-throat nature of online consumers means that you have to have an effective, user-friendly website design from day one. 

Website Design for Beginners 

Although website design is intimidating for the uninitiated, you don’t need to learn a coding language or become fluent in HTML to start building an effective website that you and your consumers love. Even a beginner can create a website in under a week. 

Start by defining your branding. Choose a color scheme and draft up a few logos that suit your business. Try to choose complementary colors that will be easy on the user’s eyes. 

Next, put together a sitemap that will act as a navigational guide for your business. What kind of pages do you want to create? How will they be connected? Include links in your site map, and try to structure the hierarchy of your site before you create any digital content. 

At this point, you’ll want to choose a web development site that suits your current business goals. Currently, the most popular website builders include: 

• WordPress;
• Wix;
• Square Space;
• Weebly;
• Shopify.

Research the options available to you and choose a site that aligns with your business goals. Consider what you want to use your site for, as some builders are better for blogging and marketing while others are more suited to eCommerce sales. 

Familiarize yourself with the website builder you’ve chosen and build a few pages before you go live. Once the site has been up for a while, start setting KPIs that correspond with your overall business goals. Setting KPIs can help you spot ineffective areas of your site and improve your web presence. Consider a few common SEO KPIs like

• Bounce Rate;
• Conversion Rate;
• Organic Visibility;
• Keyword Rankings.

You should also aim to create a sustainable site that is both good for the world and your business. This will boost trust in your brand and ensure that you create evergreen content with a great user experience (UX). 

Sustainable Design

Consumers care about sustainability and climate change. They’ll flock to businesses that take their commitment to the environment seriously and will boycott businesses that do more harm than good — even those that don’t integrate sustainability into their website design. Currently, the average site produces 1.76g of carbon per visit. The more complex a site is, the more energy it requires to load. 

If you run an eCommerce site or blog, you can use your website to improve the sustainability of your small business by embracing green UX. 

Green UX is a principle of website design that pushes website engineers to create more sustainable digital content. Start by decluttering your website and reducing the amount of video content that you use per page. 

You can further reduce the carbon footprint of your site by running each page through a carbon calculator and assessing and identifying your most energy-intensive content. It may not be possible to eliminate all energy-intensive content, but you should still strive to minimize the energy required to load each page. 

It’s worth bearing in mind that digital businesses are inherently greener than brick-and-mortar businesses. Digital businesses can track and improve their sustainability by utilizing AI-driven ESG and IMM programs. Digital businesses can also use AI to quickly assess the impact of their business operations and spot areas for improvement. 

Evergreen Content 

Evergreen content can improve the longevity of your website and reduce the amount of maintenance you need to complete. Evergreen content is digital content that shouldn’t become irrelevant or dated within the next 5 years. 

Common examples of evergreen content include some “how-to” blog posts and consumer testimonials. Get more out of these pages by connecting them with landing pages. This will ensure that folks who land on “evergreen” posts can still access your most relevant pages today. 

Cyber Security

Cyber security is important for you and your consumers. If your website is compromised, a data breach may land you hefty fines and lost business. 

Most website builders come with cybersecurity built in. This means you don’t have to worry too much about the nuts and bolts of building a great cybersecurity program. However, you still need to do your part to ensure that malicious actors don’t gain access to your site and the confidential information you store. 

Start by ensuring that all your sensitive documents are password secured. Password-protecting PDFs is a great way to deter malicious actors, as the extra layer of protection is usually enough to put hackers and phishers off. 

You should also require two-factor authentication for all pages that require a sign-in. For example, if you offer a subscription service, make sure that users have to log in before they can access their personal data or make purchases. Two-factor authentication stops hackers from gaining easy access to accounts with compromised passwords and can reassure paranoid users. 

You can also use additional security plug-ins to further protect your site. Website builders like WordPress and SquareSpace have security plug-ins as part of their service. Utilizing them effectively can protect your site and ensure that your user’s data remains secure. 

Conclusion

Designing an effective website is easier than ever before. You can use free website builders to create the framework of your site. Ensure that your site is sustainable by minimizing the amount of energy-intensive content you use. Cut down on things like GIFS and videos and opt for more evergreen content with easy-to-read text and optimized images.

The post Designing an Effective and Sustainable Website with Limited Resources appeared first on noupe.

Introduction

As a business, you’re probably already well aware of the power of social media. But if your company hasn’t updated its strategy in recent years, it could be missing out on some of the best new trends in the industry. Whether you’re looking to attract new customers or simply improve your brand’s presence online, here are seven social media trends that will help boost your business:

Video Content

Video content is a great way to tell your brand story. It can help you share information in an engaging and efficient way, as well as show off your products or services.

Videos are also an effective way to market, train, and provide customer service. Video marketing on social media allows you to connect with potential customers in a personal way—and since it’s so easy for people to share videos across multiple platforms, a word about your product moves quickly. According to G2’s research last 2022, 99% of digital marketers will use video marketing again.

Be authentic – Don’t try to be someone else or something else; just be yourself. People will relate better and trust you more if they see that you’re real and genuine.

Use natural sound – If possible, record your videos without any music or narration in the background. The sound of your voice can add a lot of emotion to your message and make it more interesting for your audience.

Keep it short – Most people don’t have much time to watch videos online, so keep them short enough so people will want to watch them all the way through without getting bored or distracted by other things on their phones or computers while watching your video

Keep it simple – Use simple language and avoid technical jargon whenever possible when talking about complex topics like tech products and services because most people won’t understand what you’re saying otherwise

Make it mobile-friendly- use a video compressor to ensure the quality of each video when uploading to social media.

Stories

Stories are a great way to engage with your audience. You can use stories to promote your business by sharing information and details or promoting current events that are happening in the world and which relate to your business.

Stories can also be used as a way of sharing your brand story. They can show people behind the scenes what goes on in the office or communicate what makes you unique and special as a company.

User-Generated Content

User-generated content is great for engaging your audience. It allows them to create and share their own content with others, rather than simply consuming what you have to offer. If a customer sees that another person has shared an experience with your brand, they’re more likely to trust it and engage as well.

User-generated content can take many forms: from asking people to share their favorite product or service experiences on social media, to creating an Instagram account that showcases photos taken by customers at events or during trips abroad. Either way, the goal is for you as a brand owner to encourage engagement between fans and followers—and ultimately drive more sales of your products or services!

Influencer Marketing

Influencer marketing is a great way to reach your target audience. Influencers can help you get your message across in a more authentic way, as they have a large following and their followers will be more likely to listen to what they have to say. Influencer marketing can help you generate leads and sales. It’s important for businesses to take advantage of this trend so that they can expand their reach on social media.

Virtual Reality and Augmented Reality

Virtual reality (VR) and augmented reality (AR) are growing at a rapid rate. The two technologies have been around for decades, but they’re still in their infancy. And while you may have heard that VR and AR are just a fad or marketing tool, there are many reasons why these emerging media will be important for your business in the years to come.

Takeaway:

You now have a better understanding of the many ways social media can help your business:

• By connecting with customers and building your brand, you’ll get real-time feedback and insight into what people think about your company.
• By getting more business through social channels, you’ll increase sales—and by learning about existing customers’ preferences, you can get even more from each sale.
• Social media provides an opportunity for businesses to learn how their products or services are being used in different industries around the world. This knowledge can be used to improve products or services based on customer needs and trends in the market at large.
• Social networks make it easier than ever before for businesses to reach new markets without having to invest heavily in advertising campaigns that may not resonate well locally—but which do require significant capital investments upfront before seeing any return on investment (ROI).

The post Best Social Media Trends That will Boost your Business appeared first on noupe.

If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on.

It’s surprisingly tricky to get this right. And it’s one reason why things like the Tailwind Typography plugin and Stack Overflow’s Prose exist — although these handle much more than just vertical spacing.

Firefox supports :has() behind the layout.css.has-selector.enabled flag in about:config at the time of writing.

What makes typographic vertical spacing complicated?

Surely it should just be as simple as saying that each element — p, h2, ul, etc. — has some amount of top and/or bottom margin… right? Sadly, this isn’t the case. Consider this desired behavior:

• The first and last elements in a block of long-form text shouldn’t have any extra space above or below (respectively). This is so that other, non-typographic elements are still placed predictably around the long-form content.
• Sections within the long-form content should have a nice big space between them. A “section” being a heading and all the following content that belongs to that heading. In practice, this means having a nice big space before a heading… but not if that heading is immediately preceded by another heading!

You need to look no further than right here at CSS-Tricks to see where this could come in handy. Here are a couple of screenshots of spacing I pulled from another article.

The traditional solution

The typical solution I’ve seen involves putting any long-form content in a wrapping div (or a semantic tag, if appropriate). My go-to class name has been .rich-text, which I think I use as a hangover from older versions of the Wagtail CMS, which would add this class automatically when rendering WYSIWYG content. Tailwind Typography uses a .prose class (plus some modifier classes).

Then we add CSS to select all typographic elements in that wrapper and add vertical margins. Noting, of course, the special behavior mentioned above to do with stacked headings and the first/last element.

The traditional solution sounds reasonable… what’s the problem?

Rigid structure

Having to add a wrapper class like .rich-text in all the right places means baking in a specific structure to your HTML code. That’s sometimes necessary, but it feels like it shouldn’t have to be in this particular case. It can also be easy to forget to do this everywhere you need to, especially if you need to use it for a mix of CMS and hard-coded content.

The HTML structure gets even more rigid when you want to be able to trim the top and bottom margin off the first and last elements, respectively, because they need to be immediate children of the wrapper element, e.g., .rich-text > *:first-child. That > is important — after all, we don’t want to accidentally select the first list item in each ul or ol with this selector.

Mixing margin properties

In the pre-:has() world, we haven’t had a way to select an element based on what follows it. Therefore, the traditional approach to spacing typographic elements involves using a mix of both margin-top and margin-bottom:

1. We start by setting our default spacing to elements with margin-bottom.
2. Next, we space out our “sections” using margin-top — i.e. very big space above each heading
3. Then we override those big margin-tops when a heading is followed immediately by another heading using the adjacent sibling selector (e.g. h2 + h3).

Now, I don’t know about you, but I’ve always felt it’s better to use a single margin direction when spacing things out, generally favoring margin-bottom (that’s assuming the CSS gap property isn’t feasible, which it is not in this case). Whether this is a big deal, or even true, I’ll let you decide. But personally, I’d rather be setting margin-bottom for spacing long-form content.

Collapsing margins

Because of collapsing margins, this mix of top and bottom margins isn’t a big problem per se. Only the larger of two stacked margins will take effect, not the sum of both margins. But… well… I don’t really like collapsing margins.

Collapsing margins are yet one more thing to be aware of. It might be confusing for junior devs who aren’t up to speed with that CSS quirk. The spacing will totally change (i.e. stop collapsing) if you were to change the wrapper to a flex layout with flex-direction: column for instance, which is something that wouldn’t happen if you set your vertical margins in a single direction.

I more-or-less know how collapsing margins work, and I know that they’re there by design. I also know they’ve made my life easier on occasion. But they’ve also made it harder other times. I just think they’re kinda weird, and I’d generally rather avoid relying on them.

The :has() solution

And here is my attempt at solving these issues with :has().

To recap the improvements this aims to make:

• No wrapper class is required.
• We’re working with a consistent margin direction.
• Collapsing margins are avoided (which may or may not be an improvement, depending on your stance).
• There’s no setting styles and then immediately overriding them.

Notes and caveats on the :has() solution

• Always check browser support. At time of writing, Firefox only supports :has() behind an experimental flag.
• My solution doesn’t include all possible typographic elements. For instance, there’s no

  in my demo. The selector list is easy enough to extend though.

• My solution also doesn’t handle non-typographic elements that may be present in your particular long-form text blocks, e.g. . That’s because for the sites I work on, we tend to lock down the WYSIWYG as much as possible to core text nodes, like headings, paragraphs, and lists. Anything else — e.g. quotes, images, tables, etc. — is a separate CMS component block, and those blocks themselves are spaced apart from each other when rendered on a page. But again, the selector list can be extended.
• I’ve only included h1 for the sake of completeness. I usually wouldn’t allow a CMS user to add an h1 via WYSIWYG, as the page title would be baked into the page template somewhere rather than entered in the CMS page editor.
• I’m not catering for a heading followed immediately by the same level heading (h2 + h2). This would mean that the first heading wouldn’t “own” any content, which seems like a misuse of headings (and, correct me if I’m wrong, but it might violate WCAG 1.3.1 Info and Relationships). I’m also not catering for skipped heading levels, which are invalid.
• I am in no way knocking the existing approaches I mentioned. If and when I build another Tailwind site I’ll use the excellent Typography plugin, no question!
• I’m not a designer. I came up with these spacing values by eyeballing it. You probably could (and should) use better values.

Specificity and project structure

I was going to write a whole big thing here about how the traditional method and the new :has() way of doing it might fit into the ITCSS methodology… But now that we have :where() (the zero-specificity selector) you can pretty much choose your preferred level of specificity for any selector now.

That said, the fact that we’re no longer dealing with a wrapper — .prose, .rich-text, etc. — to me makes it feel like this should live in the “elements” layer, i.e. before you start dealing with class-level specificity. I’ve used :where() in my examples to keep specificity consistent. All the selectors in both of my examples have a specificity score of 0,0,1 (except for the bare-bones reset).

Wrapping up

So there you have it, a bleeding-edge solution to a very boring problem! This newer approach is still not what I’d call “simple” CSS — as I said at the beginning, it’s a more complex topic than it might seem at first. But aside from having a few slightly complex selectors, I think the new approach makes more sense overall, and the less rigid HTML structure seems very appealing.

If you end up using this, or something like it, I’d love to know how it works out for you. And if you can think of ways to improve it, I’d love to hear those too!

Solved With :has(): Vertical Spacing in Long-Form Text originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

WordPress is a highly flexible content management system for website creation. A key reason for this flexibility is the wide variety of plugins available. You can add features and other improvements to your site.

The thousands of available useful WordPress plugins cover almost every feature for any type of website. Your website’s niche determines the kind of plugins you should have. There are some great WordPress plugins that every blog site needs; security, speed, SEO, and contact form, to name several.

The most effective WordPress websites create an enjoyable visitor experience. Whether you’re blogging about the latest fashion trends or selling products for your brand, you can enhance your website. Do it with one or more of these ten great WordPress plugins.

1. Brizy: The Best Website Builder for Non-techies

You might want to approach Brizy with caution because once you start using it, no other website theme builder you might try will ever seem as easy to use. Even better, you can download this WordPress website builder for non-techies (and for techies as well) for Free.

With the Brizy WordPress theme builder at your fingertips, you can –

• build a brand new website or upgrade an existing one;
• create dynamic templates for your blog and archive pages, headers, footers, custom pages, and more;
• enjoy instant access to 150+ customer-friendly pre-made templates;
• build your blog exactly as you envisioned it;
• easily customize your WooCommerce shop site.

Brizy’s Theme Builder, Global Blocks, and Global Styling features are right at your fingertips, and WooCommerce integration is also included.

You can also choose the 100% White Label option if you wish to brand the Brizy Builder as your own. A Pro option is available.

Click on the banner to learn more about Brizy and download it free.

2. WpDataTables – WordPress tables plugin

While there are a host of good reasons for using wpDataTables, the main benefit is that it works with any WordPress theme, it can create a responsive table in minutes, and it requires no coding to use.

With this WordPress tables plugin, you can take advantage of a host of useful features that include –

• four chart-building engines: Google Charts, Highcharts, Chart.js, and the new Apex Charts;
• connecting to multiple database sources, e.g., MYSQL, MS SQL, and PostgreSQL;
• fine-tuning a table or chart to make it responsive or editable and using conditional formatting to highlight critical data;
• the ability to create tables from a nested JSON file;
• and use dynamic single-cell shortcodes in many different options;
• integration with Elementor, Divi, WPBakery, and Avada.

wpDataTables is a robust table and chart-building plugin that’s remarkably straightforward. Just click on the banner to learn more.

3. Amelia – WordPress booking plugin

Amelia is a WordPress booking plugin that can fully automate and streamline its appointment booking operations when added to a business’s WordPress site. This makes Amelia an excellent choice for beauty, healthcare, fitness, consulting, educational, and similar client-dependent businesses.

The Amelia plugin can –

• manage an unlimited number of appointment bookings at multiple locations, and do so from a single platform and dashboard;
• enable clients to book appointments online 24/7;
• easily manage group appointments, package bookings, and events;
• send notifications and reminders to clients via Email or SMS, and make payments online with PayPal, Stripe, Mollie, or Razor;
• customize booking forms to match its host’s brand.

Click on the banner to find out more about how the Amelia WordPress plugin could be used to upgrade your business’s booking operations.

4. Slider Revolution – more than a WordPress slider plugin

Slider Revolution is a WordPress plugin that is more than just a slider plugin. It’s a highly popular plugin that designers rely on to create visuals they know their clients and customers will love.

Slider Revolution features –

• 250+ website and slider templates designed to impress;
• innovative website animation effects and other features that push the boundaries of what is possible in web design.

Slider Revolution is trusted by over 9 million users around the world.

5. WordLift – AI-powered SEO

Structured data helps your website speak the language of Google, and WordLift is the most innovative way to create one.

It is an AI-powered SEO tool that: 

• adds structured data to your content;
• creates a Knowledge Graph that makes it easier for Google to understand the relevance of pages, their relationship, and their value;
• build up the expertise, authority, and trustworthiness of your website.

As a result, you get more organic traffic and audience engagement.

6. TheDock – Ship Solid Websites

TheDock is a design team-oriented WordPress theme builder that supports collaboration, speeds up website design, and helps to create sites that look sharp, perform great, and are easily maintained because of its –

• custom Post Types and Custom Fields;
• speedy page load;
• flexible auto-adjusting layout system with UI components;
• white-label builder for sharing access to TheDock if you want to;
• built-in features that assure excellent security and easy maintenance.

7. Download Monitor – Best WordPress Download Manager

Download Monitor is a WordPress downloads manager that can help you streamline your business operations without having to go through the process of setting up a complicated or costly tracking solution.

With the Download Monitor plugin, you can –

• track any type of file download (ZIP, PPT, XSLX, PDF, etc.);
• assemble aggregated file download statistics about different file download types;
• establish access rules based on user roles and download quotas.

8. Essential Grid – best WordPress grid plugin

Essential Grid is, by all accounts, the best WordPress grid plugin on the market. Essential Grid makes it ever so easy to spice up your websites by using it to create superbly engaging and professional-looking galleries.

This WordPress plugin can give you –

• stunning, fully customizable boxed and full-width to full-screen grid layout options and various grid designs;
• responsive designs that enable you to control grid appearance on various devices;
• access to social media content. 

9. LayerSlider – Best WordPress Slider Builder Plugin

LayerSlider is the best WordPress slider plugin, but it is not just for sliders. Create image galleries, popups, landing pages, animated page blocks, parallax and scroll scenes, and even full websites.

LayerSlider –

• will fit your needs and is easy to use;
• can spice up and add flair and style to an otherwise run-of-the-mill website;
• supports any WordPress theme and page builder;
• features 210+ highly customizable websites, slider, and popup templates.

10. YellowPencil – Visual CSS Editor

YellowPencil is a visual CSS editor you can use to customize any WordPress site in minutes.

Key features include –

• a complete visual editing interface that allows you to redesign a page with a few clicks;
• a simple interface that does not require coding;
• the capability to edit any font and any color;
• the capability to visually edit a design element’s size, margin, and padding properties;
• the ability to undo/redo mistakes.

*******

It is almost needless to tell any WordPress user how important plugins are for a website. A good WordPress plugin has the power to boost the success of your business online by adding a range of helpful features and functionality to your website.

In this article, we have shared our expert pick of 10 great WordPress plugins for your websites in 2023.

[– This is a sponsored post on behalf of BAW media –]

Source

The post 10 Great WordPress Plugins in 2023 first appeared on Webdesigner Depot.

Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG.

But sometimes, we can’t even see our SVGs at all. In those cases, there are six specific things that I look for when I’m debugging.

1. The viewBox values

The viewBox is a common point of confusion when working with SVG. It’s technically fine to use inline SVG without it, but we would lose one of its most significant benefits: scaling with the container. At the same time, it can work against us when improperly configured, resulting in unwanted clipping.

The elements are there when they’re clipped — they’re just in a part of the coordinate system that we don’t see. If we were to open the file in some graphics editing program, it might look like this:

The easiest way to fix this? Add overflow="visible" to the SVG, whether it’s in our stylesheet, inline on the style attribute or directly as an SVG presentation attribute. But if we also apply a background-color to the SVG or if we have other elements around it, things might look a little bit off. In this case, the best option will be to edit the viewBox to show that part of the coordinate system that was hidden:

There are a few additional things about the viewBox that are worth covering while we’re on the topic:

How does the viewBox work?

SVG is an infinite canvas, but we can control what we see and how we see it through the viewport and the viewBox.

The viewport is a window frame on the infinite canvas. Its dimensions are defined by width and height attributes, or in CSS with the corresponding width and height properties. We can specify any length unit we want, but if we provide unitless numbers, they default to pixels.

The viewBox is defined by four values. The first two are the starting point at the upper-left corner (x and y values, negative numbers allowed). I’m editing these to reframe the image. The last two are the width and height of the coordinate system inside the viewport — this is where we can edit the scale of the grid (which we’ll get into in the section on Zooming).

Here’s simplified markup showing the SVG viewBox and the width and height attributes both set on the :

<svg viewBox="0 0 700 700" width="700" height="700">
  <!-- etc. -->
</svg>

Reframing

So, this:

<svg viewBox="0 0 700 700">

…maps to this:

<svg viewBox="start-x-axis start-y-axis width height">

The viewport we see starts where 0 on the x-axis and 0 on the y-axis meet.

By changing this:

<svg viewBox="0 0 700 700">

…to this:

<svg viewBox="300 200 700 700">

…the width and height remain the same (700 units each), but the start of the coordinate system is now at the 300 point on the x-axis and 200 on the y-axis.

In the following video I’m adding a red to the SVG with its center at the 300 point on the x-axis and 200 on the y-axis. Notice how changing the viewBox coordinates to the same values also changes the circle’s placement to the upper-left corner of the frame while the rendered size of the SVG remains the same (700×700). All I did was “reframe” things with the viewBox.

Zooming

We can change the last two values inside the viewBox to zoom in or out of the image. The larger the values, the more SVG units are added to fit in the viewport, resulting in a smaller image. If we want to keep a 1:1 ratio, our viewBox width and height must match our viewport width and height values.

Let’s see what happens in Illustrator when we change these parameters. The artboard is the viewport which is represented by a white 700px square. Everything else outside that area is our infinite SVG canvas and gets clipped by default.

Figure 1 below shows a blue dot at 900 along the x-axis and 900 along the y-axis. If I change the last two viewBox values from 700 to 900 like this:

<svg viewBox="300 200 900 900" width="700" height="700">

…then the blue dot is almost fully back in view, as seen in Figure 2 below. Our image is scaled down because we increased the viewBox values, but the SVG’s actual width and height dimensions remained the same, and the blue dot made its way back closer to the unclipped area.

There is a pink square as evidence of how the grid scales to fit the viewport: the unit gets smaller, and more grid lines fit into the same viewport area. You can play with the same values in the following Pen to see that work in action:

2. Missing width and height

Another common thing I look at when debugging inline SVG is whether the markup contains the width or height attributes. This is no big deal in many cases unless the SVG is inside a container with absolute positioning or a flexible container (as Safari computes the SVG width value with 0px instead of auto). Excluding width or height in these cases prevents us from seeing the full image, as we can see by opening this CodePen demo and comparing it in Chrome, Safari, and Firefox (tap images for larger view).

The solution? Add a width or height, whether as a presentation attribute, inline in the style attribute, or in CSS. Avoid using height by itself, particularly when it is set to 100% or auto. Another workaround is to set the right and left values.

You can play around with the following Pen and combine the different options.

3. Inadvertent fill and stroke colors

It may also be that we are applying color to the tag, whether it’s an inline style or coming from CSS. That’s fine, but there could be other color values throughout the markup or styles that conflict with the color set on the , causing parts to be invisible.

That’s why I tend to look for the fill and stroke attributes in the SVG’s markup and wipe them out. The following video shows an SVG I styled in CSS with a red fill. There are a couple of instances where parts of the SVG are filled in white directly in the markup that I removed to reveal the missing pieces.

4. Missing IDs

This one might seem super obvious, but you’d be surprised how often I see it come up. Let’s say we made an SVG file in Illustrator and were very diligent about naming our layers so that you get nice matching IDs in the markup when exporting the file. And let’s say we plan to style that SVG in CSS by hooking into those IDs.

That’s a nice way to do things. But there are plenty of times where I’ve seen the same SVG file exported a second time to the same location and the IDs are different, usually when copy/pasting the vectors directly. Maybe a new layer was added, or one of the existing ones was renamed or something. Whatever the case, the CSS rules no longer match the IDs in the SVG markup, causing the SVG to render differently than you’d expect.

In large SVG files we might find it difficult to find those IDs. This is a good time to open the DevTools, inspect that part of the graphic that’s not working, and see if those IDs are still matching.

So, I’d say it’s worth opening an exported SVG file in a code editor and comparing it to the original before swapping things out. Apps like Illustrator, Figma, and Sketch are smart, but that doesn’t mean we aren’t responsible for vetting them.

5. Checklist for clipping and masking

If an SVG is unexpectedly clipped and the viewBox checks out alright, I usually look at the CSS for clip-path or mask properties that might interfere with the image. It’s tempting to keep looking at the inline markup, but it’s good to remember that an SVG’s styling might be happening elsewhere.

CSS clipping and masking allow us to “hide” parts of an image or element. In SVG, is a vector operation that cuts parts of an image with no halfway results. The tag is a pixel operation that allows transparency, semi-transparency effects, and blurred edges.

This is a small checklist for debugging cases where clipping and masking are involved:

• Make sure the clipping path (or mask) and the graphic overlap one another. The overlapping parts are what gets displayed.
• If you have a complex path that is not intersecting your graphic, try applying transforms until they match.
• You can still inspect the inner code with the DevTools even though the or are not rendered, so use it!
• Copy the markup inside and and paste it before closing the tag. Then add a fill to those shapes and check the SVG’s coordinates and dimensions. If you still do not see the image, try adding overflow="hidden" to the tag.
• Check that a unique ID is used for the or , and that the same ID is applied to the shapes or group of shapes that are clipped or masked. A mismatched ID will break the appearance.
• Check for typos in the markup between the or tags.
• fill, stroke, opacity, or some other styles applied to the elements inside are useless — the only useful part is the fill-region geometry of those elements. That’s why if you use a it will behave as a and if you use a you won’t see any clipping effect.
• If you don’t see your image after applying a , make sure that the fill of the masking content is not entirely black. The luminance of the masking element determines the opacity of the final graphic. You’ll be able to see through the brighter parts, and the darker parts will hide your image’s content.

You can play with masked and clipped elements in this Pen.

6. Namespaces

Did you know that SVG is an XML-based markup language? Well, it is! The namespace for SVG is set on the xmlns attribute:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- etc. -->
</svg>

There’s a lot to know about namespacing in XML and MDN has a great primer on it. Suffice to say, the namespace provides context to the browser, informing it that the markup is specific to SVG. The idea is that namespaces help prevent conflicts when more than one type of XML is in the same file, like SVG and XHTML. This is a much less common issue in modern browsers but could help explain SVG rendering issues in older browsers or browsers like Gecko that are strict when defining doctypes and namespaces.

The SVG 2 specification does not require namespacing when using HTML syntax. But it’s crucial if support for legacy browsers is a priority — plus, it doesn’t hurt anything to add it. That way, when the element’s xmlns attribute is defined, it will not conflict in those rare cases.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px">
      <!-- etc. -->
    </svg>
  </body>
</html>

This is also true when using inline SVG in CSS, like setting it as a background image. In the following example, a checkmark icon appears on the input after successful validation. This is what the CSS looks like:

textarea:valid {
 background: white url('data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">
    <circle cx="13" cy="13" r="13" fill="%23abedd8"/>
    <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/>
    </svg>') no-repeat 98% 5px;
}

When we remove the namespace inside the SVG in the background property, the image disappears:

Another common namespace prefix is xlink:href. We use it a lot when referencing other parts of the SVG like: patterns, filters, animations or gradients. The recommendation is to start replacing it with href as the other one is being deprecated since SVG 2, but there might be compatibility issues with older browsers. In that case, we can use both. Just remember to include the namespace xmlns:xlink="http://www.w3.org/1999/xlink" if you are still using xlink:href.

Level up your SVG skills!

I hope these tips help save you a ton of time if you find yourself troubleshooting improperly rendered inline SVGs. These are just the things I look for. Maybe you have different red flags you watch for — if so, tell me in the comments!

The bottom line is that it pays to have at least a basic understanding of the various ways SVG can be used. CodePen Challenges often incorporate SVG and offer good practice. Here are a few more resources to level up:

• Using SVG with CSS3 and HTML5 (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey) — I consider it the SVG Bible.
• Lea Verou has a wealth of SVG knowledge and has spoken on the topic quite a bit (like this video from Frontend United 2019).
• SVG Animations (Sarah Drasner)
• SVG Essentials (Amelia Bellamy-Royds, J. David Eisenberg)
• Practical SVG (Chris Coyier)

There are a few people I suggest following for SVG-related goodness:

• Sara Soueidan
• Carl Schoof
• Cassie Evans
• Val Head
• Ana Tudor

6 Common SVG Fails (and How to Fix Them) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Recruitment processes have changed drastically over the past few years. Again, the pandemic situation has forced candidate assessments and interviews to occur tenuously. If a proper approach is carried out, virtual hiring can prove to be a superior way of hiring candidates compared to in-person interviews. No doubt, virtual hiring lacks the benefits of in-person interviews, but it still allows observing certain essential things, for example, how the candidates react during team settings if they would adopt the company culture and many more. Again, considering the current scenario, organizations are now changing their recruiting strategies by hiring candidates without even meeting them once face to face. 

Are you also looking forward to hiring a top-notch candidate through virtual hiring? Through this post, let’s work on how you can attract the best talent to your organization through a fine-tuned virtual hiring process. 

Virtual Hiring Process

The virtual hiring process is a recruitment process that takes place distantly rather than face-to-face interviews. Thanks to the internet and advanced technology, which has made the entire process completely smooth as well as has improved the scalability and productivity of the company too. The virtual hiring process comes with a bunch of benefits. It also saves the interview cost, traveling expenses, and time for both the employee and employer. Also, an improved plan, using the right technology such as Recruiting CRM software and Applicant Tracking System, and increased consistency at the time of the interview process can help in reducing hiring prejudices and improving miscellany. 

To get the best candidate through virtual hiring, employers need to work on their virtual hiring process. Virtual hiring comes with its own set of challenges, including reduced in-person connection with the employee, technical issues, dependency, and much more. And to overcome these challenges, here are some quick tips that would help in hiring the best candidate for your organization. 

Upgrade your technology

Is your organization’s technology up-to-date for supporting all the requirements of the virtual hiring process? As there would be no in-person meetups, good-quality video conferencing software is required for interviewing the candidates. With the help of the latest technology, organizations can also go for the option of receiving recorded videos of the candidates in the initial recruitment stage for pre-screening the candidates. Again, if the organization is receiving a high number of applications, using advanced technology like Facetime, Zoom, Chatbots, etc., for reducing the workload through scheduled interviews, answering FAQs, etc. As per LinkedIn Report, 58% of Candidates prefer self-directed programs for the recruitment process. So, make sure you have the latest technology ready to help you make the recruitment process easy. 

Allow the candidates to know your company’s culture

Merely questions and answers are sure to end up the virtual hiring process as a complete failure. As the candidates wouldn’t meet the employers in person, they fail to learn about the company and its culture in person. Again, the employees love to work in a company whose values are similar to their own. This makes them work efficiently and maintain a work-life balance. Hence, once the candidates are shortlisted, make sure you give them an idea of the culture of the organization. Invest some time in explaining to them the benefits of working with the organization. For this, allow them to meet the existing employees, allow a virtual tour of the organization, help them with the essential initiatives the organization is currently involved in, etc. This would also help them in getting engaged with the workplace in a meaningful way. 

Look for hosting virtual hiring career events

Many organizations are benefiting from hosting virtual hiring events, seminars, webinars, FAQ sections, networking events, and much more by using the technology. This is a good way of expanding your organizational reach and attracting diverse talent to your company. Hosting virtual hiring events is a very easy and cheap way of getting complacent. Through such events, the organizations would easily get prospective applicants. The events should be well-structured, fun to attend, concise, and involve the employees of the company. Make sure to add a certain variety to the events by including different sessions to the event. Lastly, look for different ways to get feedback from the candidates, as this would help in improving future events. Also make sure the attendees get all the information, insights, and experience they might be looking for. 

Stay connected with the candidates

Once the process of virtual hiring begins, make sure you are in continuous touch with all the shortlisted candidates. If this is not done, the candidates would feel secluded. For this, keep all the communication channels open, give regular updates to the candidates at every stage of recruitment, and try to accomplish their expectations. The candidates should receive all the details about the different stages of the entire recruitment process along with the tools they would require as well as the estimated period of receiving any response from the company. This would help the candidates with the required time to prepare for the virtual interview. Again, this is the best way of solving any query they might have in mind regarding the company or the recruitment process at any time during their preparations. 

The organization, while conducting a virtual hiring process, shouldn’t miss out on checking for certain qualities in the candidates, like good communication skills, robust collaboration skills, good organizational skills, management skills, accountability, and self-discipline. 

Apart from all these, the organizations can also work on other aspects like telephonic interviews, video interviews, remote onboarding, arranging personality tests, accurate job ads, etc., to have a determined and structured virtual hiring process. The work of a manager during the recruitment process never truly ends. The organization, at regular intervals, needs to incorporate advanced assessments, work on how to include additional human touch to the process, or review the interview questions. Obtaining feedback from the candidates and analyzing the success or failure of the recruitment process also helps in planning a well-organized virtual hiring process. 

Hiring someone virtually isn’t easy, for sure. But a tactically developed virtual hiring process would surely help you get the right talent for your organization.

The post How to Hire a Top-Notch Candidate from Virtual Hiring? appeared first on noupe.