Archive

Archive for the ‘Others’ Category

How Our Organization Improved Web Accessibility (Case Study)

August 8th, 2022 No comments

The Understood front-end team has a special focus on removing barriers for people who learn and think differently. Our core users have ADHD, dyslexia, and other common challenges. But we are committed to creating products that meet the needs of all people. To do this, we combine accessibility and usability in ways that increase ease of use for everyone. This article outlines the why and how of our process. We also include basic steps on how to fix common accessibility issues.

Why Is Digital Accessibility Important?

Understood serves the one in five people who learn and think differently, which translates to approximately 70 million people in the U.S. alone. Learning and thinking differences can include the areas of memory, attention, and reading, as well as language and math, among others.

The Understood front-end team specializes in serving users who learn and think differently. But we are committed to creating products that meet the needs of all people.

Despite how common disabilities are, an article in AdWeek cited the fairly shocking fact that only 2% of all websites meet accessibility standards. Those guidelines are set out by the Web Content Accessibility Guidelines (WCAG), known and accepted worldwide as the minimum requirements to meet digital accessibility.

WCAGs are essential to our work, but they serve as a floor, not a ceiling. These standards should underlie each website and app but also be woven throughout the fabric of every developer’s process. Building and maintaining coding configurations that ensure error-free and equal access is the clarion call for all developers and designers.

Ethically, culturally, financially, and legally, expanding accessibility to include neurodivergent people and those with other disabilities is an intelligent and highly relevant business strategy.

Deep Focus On Accessibility

The engineering team at Understood.org is working to combine accessibility and usability in ways that improve ease of use for everyone.

We define accessibility as removing barriers for people to gain equal access to information, particularly neurodivergent people, and usability as making products like websites and apps easy to use for all people. That includes how simple the product is to use the first time and if the experience was gratifying, one that a user would likely repeat. A physical corollary would be knowing whether you need PUSH or PULL to open a door.

The reality is that digital accessibility is and will be an ongoing process.

Developers and designers who are fluent in accessibility are increasingly highly sought after. The Wall Street Journal noted job listings with ‘accessibility’ in the title grew a whopping 78% in 2021.

To be truly accessible, we need to implement solutions for people of all abilities, with both visible and invisible differences. Wheelchair ramps and closed captions are essential. But full access to the amazing power granted by access to goods, services, information, and communication options provided by the Internet also needs more learning and thinking support. This includes ways to help users focus and remember key points.

To do this, we have started putting people at the center of the process. Previously, the focus was on process, data evolution, key metrics, and results. That mindset leaves out a sizable portion of the population which diminishes access for users to all websites and apps across the board — from e-commerce and media outlets (including social and traditional) to government sites, search engines, and educational interests.

What Is The Role Of Front-End Developers

As developers, we play an important part in the consistency chain for coding best practices. We believe that due to timing and raising awareness, we are literally part of the process that is developing a foundational language for accessibility and usability that will be utilized by all future generations.

As such, we not only use our knowledge of programming languages to help develop the desired look and feel of our products, we ensure those products are accessible across multiple platforms.

And this is where the rubber meets the road: ensuring flawless operation when incorporating graphics, applications, audio, and video into the mix, ensuring those elements are cohesive and accessible for everyone by consistently testing for speed, usability, and accessibility.

Addressing Accessibility

We are on a continuous mission to ensure that sites are perceivable and error-free. Most industries come at the accessibility thing haphazardly. At Understood, we have found that the cleanest, most efficient way to approach it is to have Accessibility & Usability as prime factors in the initial development process.

It may seem like a basic statement, but as front-end developers, it is crucial that we have an in-depth understanding of how people actually use their devices when they are seeking information or online services.

At Understood, we reverse the traditional site creation process by listening closely to our users and accessibility consultants rather than designing first and asking questions second. It is not an exaggeration to say that our users’ insights guide our work.

The fundamentals of solid development and design practices apply doubly to accessibility and usability:

  • Basic to advanced accessibility training for all technical teams, including front-end, backend, and designers.
  • Attending accessibility conferences each year to keep up with the latest advancements and expand your knowledge base.
  • Conducting surveys and tests with ‘actual’ instead of theoretical users. In our case, that would be people who learn and think differently.

Working As A Team

Every industry has its own style and uses a unique flow for development. Because serving people with learning and thinking differences is top-of-mind for us, Understood begins with User Research which includes creating and applying surveys. The information and insights we glean from those surveys inform the designers, who then share content and possibilities with product managers. That information gets relayed to the front-end team to update/create, and then the front-end team creates the site/product for designers who provide feedback and apply their edits.

Why does our process start with user research to inform designers? Deque Systems, a provider of compliance accessibility tools and software, observed that 67% of accessibility issues originate in the design phase of development.

Evolving and maintaining open and honest communications with product managers and design teams translates to less compliance and operational issues down the road. As with any team that works together yet asynchronously, it is sometimes easier to spot potential concerns from the other side. In our experience:

  • Engineers detected accessibility flaws for which the designers found alternative solutions that also aligned with the design vision.
  • Designers had top-flight guidance on crafting color contrast, character counts, and effective font styles.

All engineer tickets include accessibility, so each ticket includes an Accessibility Audit. That way, we assign time to deal with whatever issues were revealed.

In our process, we use screen readers to test our pages manually. If there is a video, we refine the closed captions and check individual elements, including headings, buttons, navigation, lists, and color contrast.

Our front-end team always works with product managers to prioritize tickets, and we make it a point to align both teams to make things work. Importantly, engineering teams are realistic when they spec out the appropriate timeline for creation and review.

Product managers then QA all the features and test for accessibility issues. This means that we have two entire teams that review all features for accessibility and errors.

In evolving the workflow, we’ve learned how important it is to allocate time in sprints to work on accessibility.

Example

For our mobile app:

  • We examine everything page by page and log all errors into a central database.
  • We then convert that content to Jira tickets, complete with descriptions, screenshots, and story points.
  • If we work with a third party, and one of its tools is not accessible, we work with them to make it accessible.

The Developer’s POV

  • Will non-screen reader users have a comparable experience to that of screen reader users?
  • Can users focus on every interactivity in the right order?
  • Does the HTML markup make sense?
  • Are we conveying helpful semantic and stating information to screen readers? For example, we don’t want repeated information that isn’t necessary or bad image descriptions that don’t serve.
  • Make sure dynamic (error message for form, confirmation of login) changes are transmitted to screen reader users.
  • Are our features or components keyboard accessible?

The Designer’s POV

  • Is there sufficient color contrast?
  • Do we have a good font size, clean flow, and layout throughout?
  • Does the light/dark mode function well and look good?
  • Are all interactions reachable and executable?

Fixing Common Accessibility Errors

There’s a wide range of issues that can compromise accessibility, including those the website webaim.org calls “mistakes, misconceptions, over-indulgences, intricacies, and generally silly aspects of modern accessibility.” We find that webaim.org is an invaluable resource for understanding and then rectifying just about anything that can go haywire.

In the article for freecodecamp.org, Ilknur Eren, a front-end developer on our team, included a chart illustrating the most common types of WCAG 2 failures that WebAIM says comprise 96.8% of all accessibility errors:

WCAG Failure Type % of home pages in 2022 % of home pages in 2021 % of home pages in 2020 % of home pages in 2019
Low contrast text 83.9% 86.4% 86.3% 85.3%
Missing alternative text for images 55.4% 60.6% 66.0% 68.0%
Empty links 50.1% 51.3% 59.9% 58.1%
Missing form input labels 46.1% 54.4% 53.8% 52.8%
Empty buttons 27.2% 26.9% 28.7% 25.0%
Missing document language 22.3% 28.9% 28.0% 33.1%

This chart lists the biggies, but read on for those that are most common and for understanding quick fixes.

Missing Alternative Text For Images

Understanding the “why” of a coding style is as important as knowing a specific guideline. For images, the context from image to image will vary and should determine the code because algorithms can’t always interpret the meaning of an image.

One classic example of this is creating alternative text for an image in the alt attribute of an tag.

If you don’t understand why you’re doing it, you may create something that isn’t helpful to the end user but may actually create a brand new barrier.

Say we have an image, and we add the alt attribute:

<img src="example.png" alt="image"/>

While this might not get flagged by automated accessibility tests, a screen reader focusing on this image will say, “image, image.” It doesn’t inform the user and precludes their ability to solve their problem of understanding how to exit a program.

Low Contrast Text

According to recent reports from the WebAim Million, over the last three years, by far the most significant accessibility error is low contrast text. A surprising 80% of websites have this error, but it is relatively simple to fix. Google has a free tool called Lighthouse that makes it quick and easy to check the color contrast on any web page.

Missing Form Input Labels

According to WebAim, in 2021, half of the delinquent websites were missing their form input labels, which describe why the various fields in the form are for.

One of the most common missing labels is for search forms. If there is no label on a search form, screen readers won’t know what the form is.

Here’s how you fix that in HTML:

<label for="searchLabel" class="sr-only">Search</label>
<input type="text" name="search" id="searchLabel>
<input type="submit" value="Search">

And here’s CSS coding for the screen-reader portion of that HTML snippet:

.sr-only{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Empty Links

As above, almost half of the websites had empty links. This is a simple issue to identify and resolve.

For example, a Facebook logo that doesn’t add a label for a screen reader user will generate an empty link accessibility issue for a non-sighted user.

Adding a label to a link is simple and straightforward:

<a href="/facebook-page">
  <i aria-hidden="true"></i>
  <span class="sr-only">Facebook</span>
</a>
.sr-only{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Missing Document Language

It’s essential to list the language of the page. Screen readers use document language to decide how to pronounce words.

That said, somewhere between 28% and 33% of homepages have been missing a document language for the previous three years.

Add the language to the HTML tag:

<html lang="en">
...
</html>

Empty Buttons

It can be frustrating to click on a button and have nothing happen. The user is trying to submit a form or show/hide elements, and the lack of functionality is enough to make them exit the page.

Like empty links, buttons need text for screen readers to read when on focus.

If an image is used inside a button, we should add an alt attribute to create a functional image:

<button type="submit">
  <img src="/search.svg" alt="Search" />
</button>

Key Takeaways

In this day and age, accessibility should not be an afterthought. Everybody has the right to access the benefits and power of the Internet and apps that make daily life easier and more enjoyable.

When reviewing sites and apps for usability, make sure to test your products manually for accessibility. It makes a difference. Allocate specific time to focus on accessibility and maintain open communication channels with product managers and designers.

Continuing to explore technical training and new knowledge goes hand in hand with interviewing and surveying people who think differently so that what you produce and put out into the world is of the highest quality and easy for everyone to use.

Categories: Others Tags:

The Cost of Inefficient Meetings and How to Overcome Them?

August 8th, 2022 No comments

Have you ever met an employee or manager that looks forward to reoccurring meetings? That leaves back-to-back meetings to feel productive, clear-headed and equipped for the next steps. Most people have not, as meetings have been painted as this draining activity that is overwhelming, time-consuming, and used less. For the rare person who has encountered someone that loves attending meetings, it is generally because their organization has a positive meeting culture.

Meetings do not need to be a draining activity. When a company invests in their meeting productivity and culture, meetings can become an energizing and efficient activity that provides clarity and helps you develop professionally. For example, one-on-one meetings between a manager and their direct report should not be an anxiety-ridden conversation with unclear expectations and an unpredictable outcome. By simply setting a clear meeting agenda with both attendees talking points and action items, the direct report can be empowered to use the set time to discuss roadblocks and gain clarity on their progress.

Many organizations do not see the benefits of investing in their meeting culture. Some are even more aware that their companywide inefficiency or lack of motivation could be related to a meeting problem. Not considering how effective and productive your company meetings are is an expensive mistake. The meeting problem costs US companies $37 billion annually.

The first step in addressing an inefficient or lacking meeting culture is bringing awareness to the cost of your meetings. When employees and managers quantify the price of a forum, they become more mindful of the meeting inefficiencies. This blog post will discuss calculating the cost of your meetings and four tips to optimize your meetings and improve your meeting culture.

Why calculate the cost of your meetings?

Before explaining how to calculate the cost of your meeting, it is essential to understand why this is an important metric to qualify. As mentioned above, many organizations are not aware of their meeting problem. It can be challenging to pinpoint the issue as it can be disguised. For example, an unsuccessful marketing campaign where the target audience was not accurately defined could be because the team did not have an initial planning meeting and there was no alignment in the project.

Calculating the cost of your meetings is the first step in addressing an organization’s meeting problem. As this post will later discuss, changing a meeting culture will require leadership buy-in; when the cost of a meeting is quantified, it will be easier for the leadership team to understand the depth and urgency of the problem. Ultimately, calculating the cost of your meetings will allow:

Increase meeting productivity

We have all been in meetings that take a lot of time with no visible breakthrough. Once you know how much it costs for someone to attend a meeting, you become more aware of everyone’s cost of the meeting. With these numbers, it’s easy for you to judge whether each attendee’s presence is vital to the agenda. That way, your meetings become smaller in number and more productive.

Visualize the value of your team’s time

Time is the most crucial thing in a business, and visualizing/quantifying your team’s time dramatically improves productivity. With the cost, you will also know how much time is wasted during every meeting, giving you a chance to adjust accordingly.

Find alternate meeting strategies, such as asynchronous meetings

An asynchronous meeting discusses a topic that doesn’t happen in real-time. Participants share their views through recorded videos, voice messages and text before the deadline. This can include meeting through a shared agenda software, recorded videos, voice messages, etc. It is essentially an alternate method to facilitate communication between employees. Knowing your meeting cost makes it easier to consider moving to asynchronous meetings. The benefits of asynchronous meetings include more flexibility in distributed teams around meeting time, increased documentation habits and greater meeting productivity.

What factors into the cost of a meeting?

There are different ways to calculate the cost of a meeting. The fastest is to use a meeting cost calculator. This tool will consider the following factors in providing the total cost of your meeting:

Participants

This is the number of people who will attend the meeting. You need to have the exact number of attendees for you to know how much it costs for you to hold their meeting every year.

Average salary

What is the average salary of the participants? If the attendees are from different pay brackets (often the case), you need to calculate their average annual wage for the best results.

Duration

How long are the meetings? You must account for the duration of the meetings to know how much time and money you spend each year of the specific meetings.

Cadence

How often do you hold the meetings? Is it weekly, monthly, quarterly or annually? The frequency of the meetings is one of the things to consider when calculating the cost of the meetings.

Tips to Optimize Your Meetings

After calculating the cost of your meetings, you are probably wondering how you can optimize your meetings for more efficiency. Below are four tips to help increase your meeting productivity.

Use the right tech stack

It is important to leverage tools and workflows for your meetings to run smoothly. These tools include a video conferencing app, note-taking software and a calendar app to schedule the meeting. These three tools are the baseline, some teams will choose to add additional tools such as scheduling apps or meeting transcription tools.

Prepare an agenda  

An unprepared meeting, or a meeting without an agenda, is not worth attending as it will not be productive. Companies should strive to instill this messaging within their meeting culture. Different types of meetings include different agendas. For example, a project kick-off meeting will not discuss the same talking points as a leadership one-on-one meeting. Consulting different meeting agenda examples can help the meeting organizer identify which topics are relevant to cover in the meeting.

Get leadership buy-in

Organizational change is rarely effective without a push from leadership. A top-down approach to changing organizations will help form different habits and workflows among employees.

Gather feedback

As habits, routines and workflows change, it is crucial to continuously gather feedback from different teams to understand how they adapt and appreciate the change. This will help inform if the desired impact is happening and its benefits.

The post The Cost of Inefficient Meetings and How to Overcome Them? appeared first on noupe.

Categories: Others Tags:

How I Added Scroll Snapping To My Twitter Timeline

August 5th, 2022 No comments

CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation. This feature has been supported in all modern browsers for over two years, but many websites that could benefit from it are still not using it.

Scroll snapping is probably most associated with horizontal carousels (see Chris’s CSS-only approach) and particular web pages divided into full-screen slides. But why stop there? I believe that snapping can improve the scrolling experience on any web page that lays out items in a grid or feed.

For example, most shopping websites show products in a grid. Ideally, the user would like to jump between the grid rows with minimal effort. The user can press Space to scroll the page by roughly one screen (viewport height), but depending on the height of the grid rows, the scroll position will eventually get “out of sync” with the grid, and the user will have to re-adjust it manually.

If we add scroll snapping to this page, the user can consistently scroll to the next row with the Space key (pressing Shift + Space will scroll to the previous row). It’s pretty effortless.

I think that scroll snapping would be a welcome addition to this website. And it’s not even that complicated to implement. The CSS code that I used for this example is relatively simple:

html {
  scroll-snap-type: y proximity;
}

.product-item {
  scroll-snap-align: start;
  scroll-margin-top: 75px; /* height of web page’s sticky header */
}

You don’t have to wait if a website you visit regularly hasn’t yet added scroll snapping and you think it would improve your scrolling experience. You can add scroll snapping yourself — with user styles.

Adding user styles to websites

In the video above, you can see that I selected a user.css file in Safari’s advanced preferences. This file is a user style sheet. It contains CSS styles that I’ve written, stored in a local .css file, and added to Safari. These “user styles” are then applied to every web page I open in Safari.

Chrome and Firefox do not allow users to select a user style sheet. Firefox supported a similar feature called userContent.css in the past, but that feature was deprecated and disabled by default in 2019. I recommend the Stylus browser extension for these two browsers (and other Chromium-based browsers).

One significant advantage of Stylus is that it allows you to write user styles for specific websites and URLs. Safari’s user style sheet applies to all websites, but this can be worked around, e.g., by using the new :has() pseudo-class to create selectors that only match specific websites.

The Stylus extension has been reviewed by both Chrome and Firefox teams and received a badge that denotes high standards.

The CSS Cascading module defines a User Origin for styles the user adds. Safari’s user style sheet belongs to this origin, but the Stylus extension injects user styles to the Author Origin, where the website’s style sheets live. Specifically, Stylus inserts user styles directly to the page via a element at the end of which makes it the final style sheet on the page. Technically, this means styles added via Stylus are classified as author styles since they’re not in the User Origin, but I will continue to call them user styles because the user adds them.

However, it’s worth keeping this distinction in mind because it affects the cascade. When selector specificity is equal, a real user style is weaker than the page’s own style. This makes user styles an excellent fit for user defaults. Under the same conditions, a style added via Stylus is stronger than the page‘s style, so Stylus cannot as easily be used to define user defaults.

If we add !important to the mix, both real user styles and styles added via Stylus are stronger than the page’s styles. So when you want to impose your user styles on a website, it doesn’t matter if you use Safari’s “Style sheet” option or the Stylus extension. Your !important styles will win either way.

In the next section, I will use a set of !important user styles to enforce scroll snapping on the timeline page of Twitter’s website. My goal is to speed up the process of reading my Twitter timeline by avoiding awkward scroll positions where the topmost tweet is only partially on screen.

Scroll snap for Twitter’s timeline

After some experimentation, I’ve settled on the following CSS code. These styles work well in Firefox, but I’ve experienced some issues in Chrome and Safari. I will describe these issues in more detail later in the article, but for now, let’s focus on the behavior in Firefox.

html {
  scroll-snap-type: y mandatory !important;
}

/* tweets in the timeline are <article> elements */
article {
  scroll-snap-align: start !important;
}

/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
  position: static !important;
  scroll-snap-align: start !important;
}

/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
  display: none !important;
}

It is necessary to add !important to each declaration because all the user styles must win over the web page’s own styles for our custom scroll snapping implementation to work correctly. I wish that instead of repeatedly writing !important, I could just put my user styles in an “important layer,” but such a CSS feature does not exist (yet).

Watch the video below to see my scroll snap user styles in action. Notice how each press on the Space key scrolls the next set of tweets into view, and the first tweet of each set is aligned to the top edge of the viewport. This allows me to read my timeline more quickly. When I need to go back to the previous set of tweets, I can press Shift + Space.

What I like about this type of scroll snapping is that it allows me to predict how far the page will scroll whenever I press Space. Each scroll distance equals the combined heights of the visible tweets that are entirely on the screen. In other words, the partially visible tweet at the bottom of the screen will move to the top of the screen, which is precisely what I want.

I know in advance that pressing Space will scroll Dave’s tweet to the top of the screen.

To try out my scroll snap user styles on your own Twitter timeline, follow these steps:

  1. Install the Stylus extension with Firefox Add-ons or the Chrome Web Store.
  2. Navigate to your Twitter timeline at https://twitter.com/home.
  3. Click the Stylus icon in the browser’s toolbar and click “this URL” in the pop-up.
  4. Stylus will open a code editor in a new browser tab. Copy-paste my scroll snap user styles into the editor and press the Save button in the sidebar on the left. The styles will be applied to your Twitter timeline immediately (no need to reload the page).
  5. You can update the styles at any time. Click the Stylus icon and the Pencil icon to open the editor again.

Inability to override snapping

My implementation of scroll snapping for Twitter’s timeline has one major flaw. If a tweet is taller than the viewport, it is impossible to scroll the page to reveal the bottom part of that tweet (e.g., if you want to like or retweet that tweet) because the browser forcefully snaps the page to show the top of the tweet (or the top of the following tweet).

The severity of this problem depends on the user’s display. Viewing Twitter’s timeline on a large desktop monitor at a small page zoom factor, you may not encounter any tweets taller than the viewport.

I have asked the CSS Working Group if it would be possible to add a mechanism allowing the user to override the browser’s mandatory scroll snapping. I should probably mention that this problem could, at least in theory, be resolved by switching from mandatory to proximity snapping. I’ve tested proximity snapping in Chrome and Firefox, and I found it inconsistent and confusing. The browser would often snap when I didn’t expect it to, and vice versa. Maybe Twitter’s code is interfering with the proximity algorithm, the browsers are still a bit buggy, or perhaps I’m just “scrolling it wrong,” if that’s even possible. I don’t know.

But the main reason why I went with mandatory snapping is that I wanted to avoid situations where the topmost tweet is only partially on screen after a scroll. The type of fast-scrolling between sets of tweets that I’ve shown in the video above is only possible with mandatory snapping.

If you, like me, prefer mandatory snapping, I can suggest the following two workarounds for the “tall tweet” problem:

  • You can open the tweet on its own page and return to the timeline afterward.
  • If you only want to click the Like or Retweet buttons, you can Shift-click the tweet to select it and then press L to like it, or T followed by Enter to retweet it.

Issues in Chrome and Safari

My scroll snap user styles produce noticeably different scroll snapping behaviors in Chrome, Safari, and Firefox. Those differences are in part since the exact implementation of the snapping mechanism is left up to the browser:

The CSS Scroll Snap Module intentionally does not specify nor mandate any precise animations or physics used to enforce snap positions; this is left up to the user agent.

The current version of Safari has a bug that prevents scroll snapping from working correctly on the Twitter timeline. I have reported this bug.

In Chrome, I have encountered the following problems:

  • The scrolling operations animate inconsistently. Sometimes the animation is slow, sometimes it’s instant, and sometimes it starts slow but is then cut short. I found this irritating.
  • The scrolling operations animate too slowly in general. I performed a test in Chrome and Firefox (20 Space presses), and it took me 70% more time to cover the same distance on my Twitter timeline in Chrome than in Firefox (18.5 seconds in Chrome vs. 11 seconds in Firefox).
  • When I scroll using my laptop’s trackpad, the page flickers a lot. When I attempt to scroll fast by holding down the Space key, the page scrolls very slowly and oscillates. I suspect that both issues are caused by the same algorithm. It seems that Chrome re-snaps at a very high rate in these cases. I have reported this bug.

These browser bugs and differences between browsers can be a problem for websites considering implementing scroll snapping. For example, a web developer might hold back because they don’t like how scroll snapping behaves in one particular browser. Browsers can mitigate this problem by becoming more interoperable. In fact, Scroll Snap is one of the areas of focus of the cross-browser Interop 2022 effort.

Another way the situation could be improved is by introducing new CSS properties that would make scroll snapping more configurable. This could include the duration of the snapping animation, the length of the proximity threshold for snapping, and a mechanism to override mandatory snapping.

To snap or not to snap?

I’ve been using my scroll snap user styles on Twitter’s timeline for a couple of weeks, and I don’t want to go back. The ability to quickly flip through my feed with only the Space key is just on another level.

However, I consider this an advanced feature that probably isn’t for everyone. There’s a reason why I’ve enabled it only on the timeline (/home path) and nowhere else on Twitter’s website. Snapping is a significant change in how the page scrolls, and it takes some time to get used to. It can work great for a specific use case, but it can also get in the way and frustrate the user.

Websites with feeds should therefore consider offering scroll snapping only as an optional feature, after careful consideration and plenty of testing in different browsers and with different input methods (mouse, keyboard, trackpad, touch screen, etc.).

Before you go…

Finally, I highly recommend installing and trying out the Stylus browser extension. Web developers (or anyone who knows CSS) have the power to style any website in their browser. You can apply minor improvements and fixes to your favorite websites. I mostly use it to hide page elements that I find annoying, such as sticky headers, video pop-ups, and vote counts.

But more importantly, Stylus allows you to quickly test new CSS features on any website and report browser bugs, if necessary. By doing this, you can help make the web platform a little better.


How I Added Scroll Snapping To My Twitter Timeline originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

How do you Ensure your Business Runs Smoothly in Turbulent Times?

August 5th, 2022 No comments

Recession. 

It’s the word businesses dread because it means layoffs, a decline in sales and profit – and for many, bankruptcy.

However, the world has already weathered a great number of recessions, and businesses have been finding ways to thrive even in the direst conditions. 

That means you can do it too, and this article provides you with actionable ways in which you can ensure your business runs smoothly in turbulent times. 

1. Assess the impact of the crisis on different aspects of your business

The way your business operates, how it generates revenue, who your customers are, and what your products are like determine how you can attract and retain new investors and talent.

If you want an overview of how these things work, an activity map or a flowchart can tell you whether the way you’re currently operating makes it possible for you to meet your business objectives.

However, when the recession hits and when the resources of your consumers get scarce, your business will likely show certain shortcomings when attempting to meet those objectives. 

As it gets increasingly hard to get money out of people’s pockets, you’ll need to adapt and figure out how to address your customers’ problems in a cheap way for them but still profitable for your business. 

How? By figuring out how each aspect of your business is affected by turbulent times. 

To get this sort of insight, you need to talk to your stakeholders. 

Talk to your suppliers. Take a look at how your consumers are behaving – how their needs and the overall market are changing. 

Ask yourself: Where do my products and services fit in now? 

Anticipate the issues that may arise and analyze how the successful business models of your competitors have tackled similar issues in the past. 

Then, borrow from their experience and remain positive. Recessions tend to last up to 12 months, so you just need to keep your head above water for a couple of months. 

2. Consider your payroll

History has shown that recession proof businesses and employment loss are synonymous in people’s minds.

Unstable times often lead to layoffs, which is something that both businesses and their employees fear.

Juggling layoffs, protecting your business from legal liability, fighting the fear of your remaining top employees, and trying to keep them motivated is no easy feat, but someone has to do it.

If you come to a point where you have to lay people off, you want to make sure that the decisions you’re making will keep your business running smoothly until the tough times are behind you. 

The way you can do that? By hiring and keeping the right people.

You need to figure out which employees are confident that you can pull it through and can back it up by getting the job done. Identify those who can handle extra tasks, work in a team, bring hope into the corporate environment, and focus on the bottom line.

Sounds like a lot to ask of very few people? That’s because it is. 

And that means that, if you want to keep top players on your side, you need to keep them motivated.

The best way to find out what motivates your employees is to talk to them, not just when hiring them, but also every now and then once they join the company. It might also be a good idea to interview those who have been laid off to understand what they were dissatisfied with. 

In either case, you can’t go wrong with compensating your employees properly for their work.

While it may be tempting to underpay your staff when the recession hits, it’s always better to make cuts elsewhere and invest in what’s essential – and that’s your human resources. 

(Even if that means taking a pay cut yourself.)

3. Delegate tasks, create functional teams, and develop a sense of belonging in the workplace

Now that you’ve got the right people on your side, you need to get them working on the right tasks.

Task delegation is essential if you want to save resources and have your employees perform efficiently in teams. 

Source: Pixabay

And that’s the other thing – with turbulent times ahead, teams that work well are what will keep you afloat.  

What we mean by that is that having a functioning team, as opposed to one where people aren’t actively collaborating, is what can make or break a business during a recession.

Why? 

Because if you’ve made layoffs and you’re left with very few people where each of them is handling large chunks of workload – if just one of them leaves, you’re left in a tough position where you can’t quickly replace them and no one else can pick up where they’ve left off.

Having a functional team means providing training to all of them, all while ensuring that they’re sharing skills and knowledge among themselves. 

Just be wary of creating a sense that everyone is replaceable just because anyone in the office can do their job. 

Let your employees know how valuable they are, promote positive relationships between colleagues, and work on creating a sense of belonging in the workplace. 

That’s how you boost the share of ideas, the morale, and that’s how you meet your common objectives.  

4. Have liquid assets to cover your business in emergencies

Think about the predictable, short-term expenses that your business might have. When turbulent times arrive, you want to cover those first.

To ensure that you’ve got the means to handle these expenses, you’ll want to have enough cash on hand.

Get a loan early, before the rates skyrocket. 

Look into short-term financing options, such as invoice factoring, to speed up the payments. 

Secure a line of credit.

If you’ve got savings, tap into them. If you’ve got stock holdings, liquidate them. 

Borrowing money can help your business survive the tough times, but be mindful of the losses you could face if you default on payments. 

5. Cut costs where you can

Turbulent times are the perfect opportunity to take a look at your company’s income statement and identify the recurring expenses that are putting a dent in your budget.

The most important recurring expenses you should focus on are the smaller ones, as they tend to be overlooked when times are good, but can quickly add up.

For example, consider the equipment and office supply costs. 

Ask yourself questions like:

  • Does your office really need a revamp now? 
  • Can the branded products that you use be replaced with generic ones? 
  • Are any of your supplies recyclable?
  • Can you reduce the amount of paper that you use?

Monitor which of the supplies are used the most by your staff and which get wasted. Ask your employees for feedback and suggestions regarding cost control. 

Another area in which you can make cuts is in the supplies used to make your products. 

However, you want to be mindful of the impact these cuts may have on the quality of the finished product, as that is something you want to avoid. 

One thing you could do is to keep the same supplies, but use fewer of them per piece of product. Then, you can sell that product at reduced size or quantity, at the same price. That’s shrinkflation, for you! 

Source: Pixabay

6. Go remote 

While we’re on the topic of cutting recurring expenses, here’s a larger cut that you could make and completely transform your business.

Go remote.

China’s largest travel agency, Ctrip, has managed to reduce office costs by $1,250 annually per employee by introducing telework. 

Remote work, in certain industries, is even seen as a determining factor in employees choosing whether they want to work for a certain company. This shift is most notable in the IT sector.

Still, going fully digital requires quite a few changes in your business model. 

For starters, if you’re a retailer relying on customers who physically visit your stores, you’ll want to set up an e-commerce store with an online order system. 

Then, you’ll want to communicate this change, along with your brand’s values, to your consumer base. This means building a presence online, including on social media platforms. 

You’ll also want to consider the infrastructure of your remote work, to ensure that:

  • Your staff has the necessary equipment, tools, and training to work from home
  • Your key data is secure
  • Your team members can communicate effectively with one another
  • Your company culture remains positive

7. Reconsider your business offer 

Historically, consumers in a recession tend to spend most of their money on essentials while seeking out bargains and cheaper alternatives to branded products.

If you aren’t selling things that people can’t live without, expect to be hit harder by the recession. 

Sure, you could give discounts, but this will only get you so far if people don’t have money to spend on luxuries. 

So, what can you do?

Well, you can adapt. 

And by adapt, we mean to change your business offer. 

Look at that inventory of yours. Look at the supplies used to make your product.

What else can you use them for? How can you repurpose them to make something useful for your customers?

Remember: tough times don’t last forever. If you find a way to help your community survive the tough times, they’ll remember it and reward you with loyalty once the crisis ends. 

Conclusion

When things get hard, it’s important to remain positive. 

Remember that there isn’t just one, but many solutions that can keep your business running. However, if you lose your cool, you’ll blink and miss them.

The post How do you Ensure your Business Runs Smoothly in Turbulent Times? appeared first on noupe.

Categories: Others Tags:

Actually, the San Francisco Typeface Does Ship as a Variable Font

August 4th, 2022 No comments

Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font’s variations, explaining how the font provides a spectrum of variations based on the width and weight. It’s a remarkable read if you haven’t checked it.

With all of these great new options, you might be tempted to use them in a web design. Chris was ogling over the expanded sets as well over on his personal blog and pondered:

But it’s not year clear how we might tap into the condensed, compressed, and expanded varieties in CSS, or if there is even a plan to allow that. I suppose we can peek around Apple.com eventually and see how they do it if they start using them there.

Doesn’t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way?

Turns out, yes. It does make perfect sense. Chris follows up in a new post:

But just yesterday I randomly stumbled across the fact that the built-in San Francisco font (on the Apple devices that have it built-in) is already variable (!!). See, I was derping around with Roboto Flex, and had system-ui as the fallback font, and I was noticing that during the FOUT, the font-variation-settings I was using had an effect on the fallback font, which renders as San Francisco on my Mac. Which… unless I’m daft… means that San Francisco is a variable font.

So, as for using it? Chris has a demo, of course:

CodePen Embed Fallback

There are some gotchas to all this, the most significant being fallbacks for non-Apple devices. After all, that demo is simply calling system-ui for the font family — it’s not telling the browser to download a font file or anything and who knows if Apple is gonna ever ship a variable font file we can serve up as an actual custom web font.

The other interesting thing? Chris did some sleuthing and counted 35 layout featured included in that system font. Go read the rest of the post to see ’em all (and to get a good ol’ dose of Chris-isms — I know I miss them!).

To Shared LinkPermalink on CSS-Tricks


Actually, the San Francisco Typeface Does Ship as a Variable Font originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

Poster Design Ideas – Fundamentals of Creating Eye-catching Posters

August 4th, 2022 No comments

What is the most effective way to generate interest in a new film, book, product, or future event? Posters.

Posters are a global favorite because they work for everyone; no matter who you are, what you do, or what you’re marketing, a poster is a powerful and eye-catching way to provide information and excite your audience about upcoming events. They’re inventive, daring, funky and may elicit a wide range of feelings. 

Some movie or music posters grab your attention, while other poster kinds may be informative and instructive. Finding the ideal balance between the title, content, photos, and design is crucial. Your poster will be ready once you achieve that.

The first and most crucial step in making a poster is understanding your target audience and product. Following that, you may experiment with color, alter forms, modify background textures, and apply stylish typography in order to complement the content. Here are some suggestions and poster ideas to help you find the best approach to convey your message.

The Principle Ideas of Poster Design

Understanding the elements of poster design is crucial for comprehending contemporary poster design concepts. The right poster will express your brand message and connect with your target audience, from storytelling aspects to title treatment design, technological requirements, and data-influenced decisions that you will make to convey the story and attract desired audiences. When you select these unique components, you will enhance your brand message, increase your audience’s recognition, and increase your product’s interest.

Here are some principles that help you strengthen your message.

Creating Color Harmony

Choosing the right colors is not always simple, especially if you have to stick to a logo or a certain theme. In this situation, you need to adhere to a color palette to create appropriate and attractive color combinations. In order to discover the ideal color combinations, you may also try working with the PowerPoint color palette.

To keep things basic and appealing at first, try not to select more than two colors in addition to white and black. Use various shades of your current color choices if you need to add extra colors to your design. Also, remember that each color is symbolic and can represent a range of emotions. The colors that you pick will each convey a different feeling. Keeping color symbolism in mind is advised in poster design.

Below is a chart to help you.

https://www.linkedin.com/pulse/color-psychology-brand-development-brooke-janousek/

Text and Font

Remember that your poster should be simple to read. You wouldn’t want your information lost due to incorrect font selections or sizes. Avoid using elaborate typefaces that might strain the eyes. Less is more! If your poster has a clear, straightforward, and readable font, your audience will be able to comprehend your content easily.

Instead of utilizing a distractive typeface, try using vibrant colors or intriguing imagery to show creativity and originality. It is important to utilize bright and intense colors as a crucial element in poster design since this will draw the focus and ensure it is a main component in the design.

Additionally, we advise you to ensure that the color of your text and the background contrast significantly. For instance, using the white font on a dark backdrop will ensure that everyone can see your message.

The Visual Hierarchy

An order of significance indicates that the most critical elements must be noticed first. Designers should adhere to this rule since it directs viewers to focus on the most crucial elements. You must ensure that the size of symbols and forms match their significance. The most important symbols should be highlighted on your poster.

The title, subtitle, and body content of the poster should be arranged according to size. Since the title is always the first thing readers will see, it should take up most of the page and be written in a standout font. The subtitle should support the title even if it should be smaller. The body copy must also be easier to read and smaller. Also, keep the information on the poster to a minimum. It is natural to want to include all pertinent information, but doing so risks cluttering your design and diverting the reader from the message.

What is the most important piece of information you want a viewer to remember? Your design should center on this statement.

The human eye is practically ‘conditioned’ to follow a Z-shaped pattern, which means it starts at the top left of a page, scrolls to the right, then returns to the left before continuing down the page. Keeping this in mind, it is typical to position the attention grabber in the top left of the page, followed by the necessary information about the product or event in the bottom right-hand block.

https://vanseodesign.com/web-design/3-design-layouts/

Take this into consideration while designing your poster.

Now that you’ve given your poster design some semblance of order and piqued your viewer’s interest, you can fully unleash your creative side!

Spacing and Alignment

A key design element is to align and space your text properly. Text that is spread out rather than jammed together is more readable, and readers will almost certainly retain the information better.

Additionally, it creates a scene that looks more integrated and unified, which is appealing to the eye.

Your components must all be in harmony with one another. The edges of one element must intersect the edges of another element if you extend their edges. This guideline is true for both text and pictures!

Creative Ideas for Poster Making

1. Use Color to Evoke a Feeling.

Use complementary colors to convey the mood and tone you want to see in your poster. Look into some correlations between emotions and color! An illustration of how to use hues like green and blue to evoke a sense of tranquility, peace, and nature is seen on the following poster

[image 1]

Take note of how the usage of the color blue in this poster elicits a sense of isolation, iciness, and dread.

[image 2]

2. Use Typography

Experiment with different fonts to create a great impact on your viewers. 

[image 3]

This poster used the imagery of food through typography to further emphasize the message.

[image 4]
[image 5]
[image 6]

3. Create Hierarchy

Making one element noticeably larger than the others is one of the quickest and easiest methods to establish hierarchy in your design. 

The main emphasis of this poster is a collage of jazz instruments and musicians.They compliment each other in terms of space and color, resulting in one large photo that serves as the design’s focal point. The audience quickly recognizes this as a promo for a jazz music performance. The poster also includes the event dates, venue, and artist information at the bottom. 

[image 7] 

This poster design captures your attention not just via the use of scale, but also through the use of leading lines and perspective. The word “Blame” is surrounded with a black background and connected to a silhouette standing within a doorway as the main design element. The use of colors instantly gives us the impression that this is a murder mystery film narrative.

[image 8]
[image 9]

4. Use Minimalism

Sometimes, simple is better. Using basic design components to express whatever thing you want to say to your audience is possible with a minimalist approach to design.

[image 10] 
[image 11]
[image 12]
[image 13]

5. Focus on Graphics

When it comes to making a compelling poster, reducing text to a minimal and focusing on the graphics is sometimes the best way. Instead of overloading your audience with words, graphic posters are a great choice for marketing a movie or event since you can leave it up to them to make sense of the imagery.

[image 14]

[image 15]

6. Use 3D effects and Play With Dimension

Posters that appear futuristic and extraterrestrial steal the show. These designs have futuristic-looking color combinations, neon hues, semi-transparent effects, liquid effects, iridescent effects, and 3D effects.

[image 16]
[image 17]
[image 18]
[image 19]
[image 20]

7. Use Only Black & White

A poster may still make a big impression even with a limited color scheme since sometimes using too many colors might divert the audience’s attention from the content. Simple black and white posters are simple to read.

[image 21]
[image 22]
[image 23]
[image 24]

8. Experiment With Different Shapes

Using shapes is another approach to direct and lead a reader’s eye. They are used to contain text, to make an unusual composition, or to focus the viewer’s gaze in a specific direction. To bring attention to your message, you might utilize a background full of shapes and forms or build shapes with your text.

[image 25]
[image 26]
[image 27]

9. Use Creative Illustrations

Instead of using photographs to produce a poster, use an illustration to create a poster that is uniquely intended for your purpose. Be creative!

[image 28]
[image 29]
[image 30]

10. Go Vintage

Retro is undeniably trendy right now. Vintage clothing and film photography are closely intertwined, as is your new poster design concept.

Check out some of these poster design ideas to get inspired!

[image 31]
[image 32]
[image 33]

Now, It’s Your Turn !

That’s all. We hope you found this article as inspirational to read as it was to write. Now that you’ve seen many types of posters and some crucial principles to follow, it’s time to figure out which strategy is ideal for your company. Finding the right pictures, shapes, and fonts to convey your message can result in a wonderful design. You are now ready to design your poster!

The post Poster Design Ideas – Fundamentals of Creating Eye-catching Posters appeared first on noupe.

Categories: Others Tags:

OKRs: A Complete Guide for Success

August 4th, 2022 No comments

Every organization that wants to grow should have a tried-and-true method of setting goals. There are a few different frameworks to choose from, but which one is right for your business and goals? Today, we’re here to give you the inside scoop on OKRs so you can decide if they’re the best fit for you. 

This article will answer all your questions surrounding OKRs, the framework and some examples of strategic OKRs.

What is an OKR, and what does it stand for?

OKR stands for Objectives and Key Results. It consists of an Objective, which is the goal or thing you want to accomplish. Several Key Results are attached to that objective, which are the results you need to attain to get to your objective. 

OKRs are goal-setting frameworks that help businesses implement and accomplish their strategies. OKRs help teams identify key company objectives, set realistic goals, come up with a timeline to achieve those targets and ensure those goals are related to the overarching objectives of the business. Many companies use OKRs as a quarterly goal-setting technique. 

Why are OKRs important?

Most organizations set smart goals at the beginning of each year. The team will work on them for about a month, then forget about them. This leads to passive management, making it difficult for team leaders to measure performance and track employees’ progress towards achieving those goals. 

Team members may feel disconnected from the overarching company goals, and employee engagement may decline. To combat this, organizations can set tactical OKRs.

Benefits of OKRs 

The benefits of OKR goal setting are almost endless, but here are a few key reasons why you should set OKRs. They: 

  • Allow for a better understanding and a focus on results that matter most
  • Provide increased transparency and clear direction to all team members 
  • Boost efficiency and alignment with corporate goals
  • Track progress updates toward team goals 
  • Inspire teams and help move the company strategy forward

What is the OKR framework?

The OKR framework includes a few rules to help employees prioritize, position and assess the outcome of their efforts. OKRs help close the gap between planning and execution so that employees have more of an outcome-based, rather than output-based, approach to their work. 

OKRs consist of two components: the Objectives, and the Key Result(s).

The Objective is the goal you want to achieve sometime in the near future. Typically, it is a high-level objective, and it is not a technical, numerical or quantitative goal. Some broad examples include: 

  • To increase the number of sales
  • To reduce employee turnover
  • To improve the time it takes for customers to make a purchase 

The Key Result is the part where you get into the nitty-gritty details. It is a quantitative, measurable outcome needed to achieve the objective. For OKRs to be effective, you need to break down the goal into realistic results that you can track. 

Let’s say your objective is to increase the number of sales. Some key results might be to close five more deals per week and to grow your customer base by 20%. 

To break it down a little bit more, think of the objective as a point on a map. Think about where you want to go and set a clear direction for getting there. You can think about key results as road signs along the way that tell you how far you have to go. They show how well you’re progressing towards achieving the objective. 

Examples of OKRs 

Here are some real-life examples of OKRs, broken down by category. 

Company OKRs

Some of the most common team OKRs in different departments include:

Marketing OKRs

Objective: Increase the number of weekly newsletter subscribers by 3x

Key results: 

  • Implement more CTAs on the website home and subsequent pages 
  • Begin a campaign that offers discounts for new subscribers 

Objective: Increase brand awareness by the end of the next quarter 

Key results: 

  • Secure a spot at the annual business conference
  • Conduct 10 media meetings 

Sales OKRs

Objective: Personalize the sales approach for new customers

Key results: 

  • Reach 80% on the customer satisfaction survey
  • Ask customers three personalized questions 

Objective: Increase sales in the US

Key results: 

  • Hire a salesperson local to the US
  • Research 10 US competitors and see what they do differently 

Product development OKRs

Objective: Start user-testing the product 

Key results:

  • Conduct 30 virtual user-testing sessions
  • Get 50 customer feedback responses through surveys 

Objective: Expedite delivery speed of a new version of the product 

Key results:

  • Hire two more product development team members
  • Reduce the number of untested features to 3 

Customer service OKRs 

Objective: Improve customer retention and reduce the number of customer complaints

Key results: 

  • Reduce call wait time to less than 10 minutes
  • Implement weekly meetings with the customer success team 

Objective: Improve customer experience with support

Key results:

  • Reduce ticket resolution time to 3 business days 
  • Implement a chatbot to help with less complicated customer queries 

Management OKRs 

Objective: Improve employee engagement by 10%

Key results:

  • Provide more training opportunities each month
  • Provide opportunities for employees to give anonymous feedback 

Objective: Reduce operating costs by 5%

Key results:

  • Talk to HR about a company restructuring to eliminate late payment fees
  • Improve supplier payment process 

Individual OKRs 

Personal OKRs are just as beneficial as company OKRs. Employees prioritizing personal development often see higher success in their professional lives, too. Here are some examples of personal development OKRs. 

Objective: Increase productivity at work

Key results: 

  • Take a short break when feeling distracted 
  • Set smaller productivity goals 

Objective: Become confident at public speaking 

Key results: 

  • Lead one team meeting per month
  • Practice speaking to small groups of people more often 

How to track OKRs

OKRs won’t be effective unless progress is reviewed regularly. Tracking OKRs every week will ensure that everyone keeps the top priorities in mind and help adjust the roadmap accordingly.

It’s best to start with a simple spreadsheet for your first cycle of OKRs. There are many new concepts to learn, and it’s best to minimize the disruption for the team. Then, you can switch to a more scalable OKRs software once you’re comfortable with the framework.

Final thoughts

All OKRs should align with the company’s direction and focus on long-term improvements and goals that can be accomplished within the next quarter. With an outcome-driven goal-setting process, employees can prioritize their work and clearly understand how they contribute to the bigger picture.

The post OKRs: A Complete Guide for Success appeared first on noupe.

Categories: Others Tags:

Migration From jQuery to Next.js: A Guide

August 3rd, 2022 No comments

jQuery has served developers well for many years. However, libraries (like React) and Frameworks (like Next.js) are now bringing us more modern features to help with our code’s performance and maintainability. This guide will show you how to rewrite your jQuery site using Next.js to take advantage of all these new features, such as client-side routing for smoother transitions and the ability to separate code into components to make it more reusable.

Getting started

The easiest way to get started with a Next.js is to run npx create-next-app. This will scaffold a project for you. However, to understand what this command does, we’ll create our application from scratch.

First, we’ll create our Next.js project using npm init. You can proceed with the default settings, as we will change them later. Then, we want to install React and Next.js using:

npm install react react-dom next

Next up, we can open the package.json file and replace the default scripts with:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

This allows you to run npm run dev to start the development server; npm run build to build your application; and npm run start to start a server of that built application.

To add pages — like you would index.html with jQuery — create a directory named pages and create a file named index.jsx in it. Inside this file, place the following code:

export default function Index() {
  return <h1>Hello World</h1> ;
}

Now, by running npm run start and navigating to localhost:3000, you should see a h1 tag displayed. The name of this function isn’t important, so you can call it whatever you want. However, don’t use an anonymous arrow function, as this will prevent fast refresh from working.

CSS

In jQuery, you can specify CSS by page, importing different stylesheets for different pages. This is also possible in Next.js using the next/head component and a link tag the same way as jQuery. Anyhow, there are more performance-friendly ways to to this in Next.js.

Global Stylesheet

The first way is with a global stylesheet. To do so, we need to create a custom App by making the file _app.js inside the pages directory. The starting point for this file is as follows:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

At the top of this file, you can add an import statement and import any CSS file you want. For example, if you created a separate folder at the root level called styles and put main.css in it, then you would add:

import "../styles/main.css"

Now, whatever you put inside this file will be applied throughout your application.

CSS Modules

The next option is CSS modules — which allows you to specify CSS anywhere in your application. They will create unique class names from the classes you provide, so you can use a same class name in multiple places in your application’s code.

Expanding the initial hello world example, you could create a file index.module.css in the same directory and then write the import:

import styles from "./index.module.css"

Afterwards, if you were to define a heading class in the CSS file, you could do the following:

export default function Index() {
  return <h1 className={styles.heading}>Hello World</h1> ;
}

and those styles will be applied only to that element.

Styled JSX

The final built-in option is styled JSX. This is most similar to including a tag at the top of your page to define some styles. Simply add jsx to the tag, and use a template string inside, like this:

<style jsx>{`
  .heading {
      font-weight: 700
  `}</style>

This option has the advantage of being changeable at runtime. For instance, if you wanted to supply the font weight in your component props, you could do:

<style jsx>{`
  .heading{
      font-weight: ${props.fontWeight}
  `}</style>

The one disadvantage of this method is that it introduces additional runtime JavaScript into your application, increasing the size by 12kb (3kb gzipped).

Events

In jQuery, you might have events set up to respond to DOM elements. To give you an idea, you might want to execute code when a p tag is clicked and do so like this:

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

Instead, React uses event handlers — which you might have seen in HTML — like onclick. Note that React uses camelCase instead, and so onclick should be referenced as onClick. Therefore, rewriting this small example into React would look like this:

export default function Index() {
  function clickParagraph(){
    console.log("You clicked a paragraph!");
  }
  return <p onClick={clickParagraph}>Hello World</p>;
}

Each method comes with its advantages and disadvantages. In jQuery, it is easy to have something happen for all paragraphs, whereas in React, you have to specify per paragraph. However, for larger codebases, having to specify makes it easy to see what will happen with the interaction with any element, where you may have forgotten about the jQuery function.

Effects

Effects are used in jQuery to show and hide content. You might have something like this already:

$( "p" ).hide();

In React, this behavior is implemented using conditional rendering. You can see this by combining it with the replacement for events we just saw:

import {useState} from "react"
export default function Index() {
  const [show, setShow] = useState(true);
  function clickButton(){
    setShow(false)
  }
  return (
    <div>
      <h1>Hello world</h1>
      {show && <button onClick={clickButton}>Click me</button>}
    </div>
  )
}

When you click this button, it will change the value of show to false and so, the statement won’t render anything. This can be expanded with the conditional operator to show one thing or another, depending on the value like this:

show ? <p>Show this if show is true</p> : <p>Show this if show is false</p>

Data Fetching

In jQuery, Ajax is used for external data fetching without reloading. In React, this can be done by using the useEffect hook. For this example, we’ll fetch the exchange rate from a public API when the page loads:

import { useState, useEffect } from "react";
export default function Index() {
  const [er, setEr] = useState(true);
  useEffect(async () => {
    const result = await fetch("https://api.exchangerate.host/latest");
    const exchangerate = await result.json();
    setEr(exchangerate.rates["GBP"]);
  }, []);
  return (
    <div>
      <h1>Hello world</h1>
      <p>Exchange rate: {er}</p>
    </div> 
  );
}

useEffect takes in a function and a dependency array. The function does the data fetching, using async as the fetch API asynchronously. We can then set any state we want in there, and it will be updated on the page. The dependency array determines which value changes will run the function. In this case, it’s set to an empty array which means that the function will only run when the page first loads.

Beyond this, Next.js also provides options for fetching data on the server or at build time. For build time data fetching, the function getStaticProps can be used. This function provides an improvement in performance as the data can be provided with the page — rather than waiting on an external service. To use it, create this function in a page as it doesn’t work in components.

export async function getStaticProps() {
  return {
    props: {},
  }
}

You can perform any data fetching you want before the return, and after that, pass the data through to the page under props — then, the data is provided to the page and can be accessed under the props.

By replacing the function name from getStaticProps to getServerSideProps, the function will be called on every request, giving you the flexibility to use Node.js functions if needed. It also allows you to make many data requests on the server and to process them to reduce the bandwidth used by the client.

You also have the option of a middle ground between the two called Incremental Static Regeneration. This option will generate a static page in the same way as getStaticProps, but it allows you to specify a revalidation period — which will regenerate the page when a request comes in at most as often as the period you specify. To do this, alongside props, you should also include a revalidate key with the time in seconds you want.

Objects into DOM elements

With jQuery, you have to be careful with which method you use for turning an object into DOM elements. The most common example of this is to create a list of items because, with jQuery, a loop over items would add each to the DOM one by one. With React, the virtual DOM is used to create diffs of the new state from the current one. This means that despite adding items in a loop, they are added to the real DOM as one operation.

This is done using the map function in JavaScript, where you can map each item to some JSX.

export default function Index() {
  const fruits = ["Apple", "Orange", "Pear"];
  return (
    <div>
      <h1>Hello world</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

Notice that the element inside the map needs a key prop. This is used in the diffing process discussed above, making it easy for React to distinguish between each element, so each of these should be unique.

Deffereds

The use of deferreds in jQuery can be replaced with the native JavaScript promise functionality. The syntax for deffereds was designed to mirror the functionality of promises, so the syntax should be familiar and not require too much alteration. One example of where deffereds might be used is in data fetching. If you do this with the fetch method in JavaScript, then you can add a .then to the end of the fetch as it returns a promise. This code will only run when the fetch is completed, and so the data (or an error) will be present. You can see this functionality in use here:

fetch("example.com")
.then((response) => {
  console.log(response)
})
.catch((error) => {
console.error(error)
})

This will fetch example.com and log the fetched response unless an error occurs — in this case it will be logged as an error.

In addition to this syntax, the newer async/await syntax can also be used. These require a function defined as a`sync`, in the same way as you might export a function. You can declare it like so:

async function myFunction(){
  return
}

Inside this function, you can call further async functions by placing await in front of them, for example:

async function myFunction(){
  const data = await fetch("example.com")
  return data
}

This code will return a promise that will resolve when the data is fetched, so it needs to be called inside an asynchronous function to await the result. However, in order to also catch errors, you will need to write a conditional to check the response status — if data.ok isn’t true, an error should be thrown. Then, you can wrap these away statements in a try catch block, rather than using .catch. You can read more about these methods in this article.

Improvements

Routing

Next.js uses file system routing, which is very similar to using different .html pages in a traditional website. However, this system also offers features beyond that, providing dynamic routes and allowing one page to be accessed under a range of urls.

For example, if you have a blog, you might keep all your files under /blog/*, creating a file [slug].jsx inside the blog folder — which will allow that content to be served for all pages under blog. Then, you can use the router in Next.js to find which route has been navigated to, like so:

const router = useRouter()
const { slug } = router.query

API routes

API routes allow you to also write your backend inside your Next.js application. To use these routes, create an api folder in your pages directory — now, any files created inside it will run on the server rather than the client, as with the rest of the pages.

To get started with these, you need to export a default function from the file, and this can take two parameters. The first will be the incoming request, and the second will let you create the response. A basic API route can be written like this:

export default function handler(request, response) {
  response.status(200).json({ magazine: 'Smashing' })
}

Limitations

jQuery UI

You may use jQuery UI in your application for user interface, but React doesn’t provide an official UI library like this. Nevertheless, a range of alternatives has been produced. Two of the most popular are Reach UI and React Aria. Both of these alternatives focus very strongly on Accessibility, ensuring that the project you create is usable by a bigger range of users.

Animation

While you can use conditional rendering instead of effects, this doesn’t provide all the same functionality, as you can’t do things such as fading content out. One library that helps to provide this functionality is React Transition Group — which allows you to define entering and exiting transitions.

Conclusion

Moving from jQuery to Next.js is a large undertaking, especially for big code bases. However, this migration allows you to use newer concepts (such as data fetching at build time) and sets you up to have simple migration paths to new versions of React and Next.js — along with the features they bring.

React can help you better organize your code (which is particularly important for large codebases) and brings a substantial performance improvement through the use of a virtual DOM. Overall, I believe that migrating from jQuery to Next.js is worth the effort, and I hope that if you decide to migrate, you enjoy all the features React and Next.js have to offer.

Further Reading on Smashing Magazine

Categories: Others Tags:

Implicit Grids, Repeatable Layout Patterns, and Danglers

August 2nd, 2022 No comments

Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it?

The specific situation is when a layout grid expects an even number of items, but is supplied with an odd number instead. We’re left with a “dangling” element at the end that throws off the layout. Sounds like what’s needed is some Defensive CSS and Dave accomplishes it.

He reaches for :has() to write a nifty selector that sniffs out the last item in a grid that contains an odd number of items:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Breaking that down:

  • We have a parent container of .items.
  • If the container :has() an .item child that is the last of its type,
  • …and that .item happens to be an odd-numbered instance,
  • …then select the first .item element of that type and style it!

In this case, that last .item can be set to go full-width to prevent holes in the layout.

If… then… CSS has conditional logic powers! We’re only talking about support for Safari TP and Edge/Chrome Canary at the moment, but that’s pretty awesome.

As chance has it, Temani Afif recently shared tricks he learned while experimenting with implicit grids. By taking advantage of CSS Grid’s auto-placement algorithm, we don’t even have to explicitly declare a fixed number of columns and rows for a grid — CSS will create them for us if they’re needed!

No, Temani’s techniques aren’t alternative solutions to Dave’s “dangler” dilemma. But combining Temani’s approach to repeatable grid layout patterns with Dave’s defensive CSS use of :has(), we get a pretty powerful and complex-looking grid that’s lightweight and capable of handling any number of items while maintaining a balanced, repeatable pattern.

CodePen Embed Fallback

Implicit Grids, Repeatable Layout Patterns, and Danglers originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

Tips for Successful Cold Calling

August 2nd, 2022 No comments

Cold calling can be daunting but it can yield amazing results if done right.

While it hasn’t had a great reputation, cold calling isn’t dead. This survey by Rain Group has shown that 82% of buyers accept meetings with sellers who proactively reach out. A cold call done with the right techniques can indeed attract buyers.

What is Cold Calling?

Cold calling is a sales strategy where businesses call prospects who have previously not indicated interest nor interacted with their business.

It helps you identify the needs of your prospects, reaching out to them with your services or products that can solve those needs of theirs and getting them to patronize you. Cold calling can be difficult but it is certainly not impossible to master. 

Cold calling in 2022 might look quite outdated: many businesses have switched to other social media platforms to generate leads and sales. But, cold calling still has a place in our time and age.

Benefits of Cold Calling

Cold calling can be frustrating, but it holds great benefits for people who are willing to implement it in their businesses.

1. Gain Insight

Cold calling is a good way to access information and learn new things. Learn why your techniques aren’t really working or why you’ve recorded very little progress.

Unlike cold emailing, you get to interact with a human being, get real-time feedback, try out different techniques, know what works and what does not and get better at what you do. 

You get to establish human connection, and while on the call, you might find information that’ll be useful for you in the course of time.

2. Instant Feedback

Cold calling affords you the opportunity to get instant feedback from your customers. With cold calling you get instant reviews from your customers regardless of their location.

This helps you to adjust where necessary. With cold emailing, your message might end up in the spam folder or even get deleted before your intentions are known but cold calling puts you right in front of your customers and you get access to feedback instantly.

3. Increase Conversions

The more people you reach out to through cold calls, the higher the possibility of converting them.

Cold calling helps you to inform a wider audience about your business on a personal basis. Even if you have a slim 1% close rate and you reach out to 1,000 prospects in a week, that’s 10 new leads who’re interested in your product!

This can lead to an increased number of people buying from you. However, in order to increase conversion, you must be fully trained on what works and what does not in cold calling. This helps you to apply the right technique and achieve your desired goals.

4. Master Your Sales Pitch

Whether you’re a newbie or you’ve been doing sales all your life, you will definitely need to sharpen your skill regularly. Cold calling helps you to master your sales pitch and improve on it.

You find out if you’re monotonous, chatty or extremely salesy, which can get your prospect uneasy and unresponsive and you get to make the required adjustments. This way your skills are refined and you get to make more successful cold calls.

Disadvantages of Cold Calling

Cold calling is exciting and thrilling but it has some drawbacks you want to be mindful of.

1. It Can Annoy Prospects

Have you ever put a call through with all the courage and charisma you can muster only to be shut out and rejected before you could even make your intentions known? Frustrating right?

Cold calls can be really annoying for some prospects either because of the timing, tone or because of the fact that scam artists usually adopt the same method. 

Some people find it intrusive and discomforting, and don’t have the patience even to let you introduce yourself.

2. It Can Be Time Consuming

Cold calling might yield results but it is definitely time consuming. This research by Revenue.io shows that the most successful sales prospecting calls average 14.3 minutes in length. Imagine when you have to speak with twenty or more prospects a day. More so when you do not know if these prospects will eventually buy from you or simply drag you on for nothing.

Not only is cold calling time consuming, it can be tiring especially when you get rejected time and again. It requires resilience and tenacity to keep on going despite rejections.

3. It Can Be Difficult To Handle

Thing is cold calling entails reaching out to humans and humans can be individualistic. You cannot fully predict how your prospect will respond to you especially given the fact that they’ve never expressed any sort of interest in your product. This makes cold calling arduous.

Some prospects politely decline, some do so rudely while some even resort to verbal abuse. And remember it’s not just about the prospect, don’t forget employee experience. Simply put, with cold calling there are so many uncertainties to deal with and it can be difficult to handle. 

4. It’s Not a Sustainable Prospecting Method

Cold calling requires that you make many shots before finally getting one right. It is clearly not an efficient method of gathering prospects and making sales.

The uncertainties that come with cold calling can make record keeping difficult and can put your business in financial jeopardy.

It also means you have to spend several resources on prospects that you cannot really count on. It can be exhausting when you reach out to several prospects daily and you can hardly close a deal or even move to the next step.

7 Tips for Successful Cold Calling

Here are some tips to help you make the most of cold calling.

1. Every Call Is a Learning Channel

Cold calling is one way to refine your prospecting skills as quickly as possible. Use call recording. Learn from every call. Note what works and what does not. Get to understand what individuals are likely to respond better to and step up your game.

Unlike other sales channels, cold calling gives you feedback and reviews – instantly. This helps you to make more informed decisions and you get to improve. 

2. Rejection Is a Great Teacher

You can’t avoid rejections – and many of them. You might get a lot of ‘no’s before you finally get one person who seems interested in your business.

Learn to handle rejection by firstly learning from it. Ask yourself important questions. Did you sound intrusive, did you sound salesy? Did you sound rude? Or was it just an unfortunate match?

You have to learn to not take anything personally. Whether you engage in cold calls or not, rejections will always be a part of life. If you let them get to you, you’ll be doing yourself a disservice.

3. Show Value First

Cold calls are unscheduled and unsolicited for. You’re basically stealing people’s time. This means you have to go the extra mile in order to grab the attention of your prospect. 

A sure way to achieve that is by highlighting what’s in it for them, why they should spend their valuable time (and then also money) on you – as soon as possible. 

Doing so increases your chances of retaining the attention of your prospect.

4. Prepare an Outline

If you’re new to cold calling or sales, then you’ll feel a bit anxious handling your first few calls. This is where an outline becomes necessary.

Preparing an outline for a cold call is important as it gives you a guideline to stick with, especially in a case where you’ve forgotten a line or two. Note that the outline is what it is – an outline that guides you. You should not read off an outline like an actor rehearsing a script. You’ll only bore your prospects.

Your outline should contain things like FAQs and key points so that you’re not caught off guard in a situation where your prospects ask questions you’re not familiar with. 

5. Do Your Research

Research has shown that 27.3% of sales reps’ time is wasted due to incorrect B2B contact information. 

Doing your research is by far the most important aspect of cold calling. You don’t want to go about calling people who have no need for your products. You’ll wear yourself out, get rejected and waste the time of your prospects. You might even end up with a bad company image.

You want to ensure that you’re onto the right person before clicking away on the dial. Ensure you have adequate information concerning the product you’re about to pitch to your prospect so as to avoid getting in a messy and tense situation or being a nuisance to your prospects. Acquiring basic information about your prospect will make things easier than expected.

6. Don’t Focus On Selling

Your prospects don’t want to know how good your products are, they want to know how it can help solve their problems. Prioritizing sales ahead of giving value is like placing the cart before the horse, you’ll get nowhere.

Even when a prospect has declined your product, you can still offer them information or tips to look out for when purchasing such products elsewhere. Make them feel acknowledged as individuals not just as sales figures.

7. Follow Up

Follow up with prospects who’ve indicated interest in the products you pitched to them, regardless of the outcome of the call.

You can send an email, thanking them for their time and attention. Another tip that will make your follow-up productive is to offer some form of value.

You can refer to an article or inform them of discount offers but by all means, do not make it excessive or your prospect will loathe you . These are all follow-up tips that will increase the chance of converting a prospect into a customer.

Conclusion

Cold calling has proven to be effective even in our digital world. 

Certain mistakes however can hamper the success you wish to achieve. All it takes is tact and commitment to the right procedures in order to reach out to decision makers and start closing deals.

The post Tips for Successful Cold Calling appeared first on noupe.

Categories: Others Tags: