Archive

Archive for September, 2022

20 Best New Websites, October 2022

September 26th, 2022 No comments

The design world fluctuates back and forth, swerving between love and hate for different design trends. Sometimes we see a wide range of approaches, and sometimes designers all hop on the same idea.

This month, the web is dominated by animation. Designers are cramming in motion in unexpected ways. And it’s fun to explore. Here are 20 of the best new sites on the web this month. Enjoy!

Bannach

Bannach is a German furniture brand. Its products are colorful and geometric, so it makes sense that when you scroll down to the collection, the thumbnails begin as pixel blocks and animate into product photography.

Fornasetti Profumi

Fornasetti Profumi takes a different approach to motion. It uses video to emphasize stillness to promote the calming qualities of its candle products.

The Other Side of Truth

The Other Side of Truth is a superb exercise in utilizing the web for a cause. It presents facts on the Russia-Ukraine war, but the standout feature is the toggle switch that, instead of light mode-dark mode, toggles facts and Russian state propaganda.

Glasfurd & Walker

Glasfurd & Walker is a portfolio site for a design agency. So far, so standard. However, it sets itself apart because it’s slightly bigger than the browser and swerves left and right with your mouse movement.

Sirup 5th Anniversary

Sirup is a Japanese singer-songwriter, and to celebrate the fifth anniversary of his first hit single, his record company has put together this awesome maximalist micro-site that uses type, motion, and art direction to capture his style.

Fitzjohn’s

Fitzjohn’s is a slick site for a new apartment complex in the Hampstead area of London. It uses a refreshing modern color palette and calming animation to take the edge off the frankly ludicrous price tag.

Persepolis Reimagined

Persepolis Reimagined is an awe-inspiring WebGL tour through one of the most important cities in ancient Iran. Make sure you tour it on a large screen. It’s hard not to be wide-eyed with wonder.

JaM Cellars

JaM Cellars is a Californian wine brand that’s pitching to bachelorette parties. With names like Butter, and Sugar, it’s not the most sophisticated tipple, but yellow, we love a yellow site.

Danielle Levitt

This portfolio site for film director and photographer Danielle Levitt features samples of her best work scrolling past the viewport. There’s a clever switch of thumbnail and background color when you scroll down to the contact details.

Propel

From total color energy to Apple-levels of minimalism: Propel is a slick, animate-on-scroll site for a marine motor brand selling an outboard and inboard motor. The animated masks on the images are a nice subtle touch.

Standards

Standards is a site for a SaaS that helps organizations create, maintain, and share brand guidelines. It uses subtle animation, video of its UI, and compelling copy to sell its approach.

Chris Carruthers

The portfolio site for Chris Carruthers is deliberately self-indulgent with scrolling text, clipped images, and scroll-jacking, but it’s also delightful to peruse.

Theodore Ellison Designs

We don’t often see colored glass in real life, but the play of light on stained glass is beautiful. This site for Theodore Ellison Designs uses video to bring the effect to the web.

Owomaniya!

The Owomaniya report for 2022 uncovers the state of gender diversity in the Indian entertainment industry. Presented in the style of infographics, the information is brought to life by animation.

Meetings

Meetings is a French events company. Its site uses an animated collage approach to showcase its services, and animated text to pull you into its content.

Blakeney

Blakeney invests in African companies on behalf of institutional investors. Its site is typical of the financial industry, but it uses animation to lift it to a higher level of interest.

Becklyn

Becklyn is a digital design agency. Its portfolio site uses animated text, expanding image masks, and video to guide us through its site and app design approach.

Cabi

Cabi is a brand of Japanese condiments with a typically Japanese feeling site. Bright colors, a slowly scrolling slideshow of dishes, and editorial to pack shot hover effects are a great introduction to the brand.

Slantis

Slantis provides building information modeling to architecture and infrastructure providers. Its site uses animation to showcase the types of content it produces for clients.

July Fund

July Fund is a venture capital project. It takes an entirely different approach than its competitors by adopting a chaotic but enjoyable card-based design.

Source

The post 20 Best New Websites, October 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

5 Unexpected SEO Factors You Should Be Tapping Into

September 26th, 2022 No comments

What is an SEO ranking factor?

SEO ranking factors affect your website’s search engine ranking. For example, Google’s algorithm will decide whether your outstanding article on cat eye colors will make it to page one. How to maximize your content’s chances depends on the SEO ranking of the content.

Google and Bing employ SEO to show search results. These search engines demand the right results. “Right” signifies a page that matches the user’s search: it may not be the best material, but it’s what the user wants. 

A landing page must match the user’s search intent. You shouldn’t show a product page to someone seeking information — not yet, because they’re still lost. On the other hand, if a buyer lands on one of your longer blog posts, you risk losing them. You should send them to your store’s product page.

Product pages must include commercial keywords. Optimize a category page for [buy dog food] if you sell dog food. Do you write about dog food? This content may be tailored for [how to feed my dog] and aimed toward informational consumers.

SEO ranking is content placement on Search Engine Results Pages (SERPs). Ranking number one means that your website is the top result for a given phrase.

Click-through rates rise as you approach number one in search results. The top 10 first-page results are also significant, but 95% of readers don’t finish the first page.

Top 5 Unexpected SEO Factors You Should Be Tapping Into

Google was founded in 1998, although it wasn’t until 2003 that it began developing intelligent algorithms to provide the best search engine user experience possible. Google invented FLORIDA due to the keyword-stuffing techniques many web admins used to score highly. 

FLORIDA fought against black hat SEO techniques and paved the way for Google’s incredibly complex array of algorithms, influencing how we search today. 

As a result, modern search optimizations need modern SEO factors. Here are the top 5 unexpected SEO factors that can give your content an advantage.

  1. ‘People Also Ask’ section.

You’ve probably Googled something and seen drop-down menus with responses. Similar to:

People Also Ask is a relatively recent service offered by Google to give users on-demand, real-time information. Users can see critical details relevant to their questions by using drop-down boxes.

To land a featured snippet, answer the question in your post. You must optimize your content for high-volume keywords with relevant inquiries.

This strategy is used to find the most helpful questions to develop content, as People Also Ask queries often have low search volume.

How can you get these questions? Here are some of the steps that you can follow:

  1. Discover pages that rank for numerous keywords.
  2. Use Ahrefs or SEMrush to analyze and scrape their keyword rankings
  3. Gather all of their People Also Ask for information
  4. Pick the most frequent or popular queries
  5. Ensure you do not already rank for the keyword
  6. Determine if you can genuinely rank and if the keyword difficulty is not too high
  7. Optimize your page for this long-tail/question keyword just like you will do with any other term

2. Google E.A.T. – Long Form Content

Google E.A.T. stands for EXPERTISE, AUTHORITY, and TRUST.

This abbreviation represents the official Google guideline for observing and crawling web pages to evaluate content quality. It’s what its bots use to distinguish between high-quality and low-quality content. 

This policy has been in effect for more than seven years, but it wasn’t until 2015 that Google officially published them, due to an internet leak of company standards.

In 2022, E.A.T. will continue to play a significant role in SEO strategy. Actually, it’s perhaps more important than ever, with brands and marketers favoring high-quality content over other SEO strategy elements.

The benefits of SEO and marketing are limitless, ranging from more natural backlinks to increased page dwell time. In addition, developing longer-form content never ceases to provide additional brand benefits when time and effort are invested. 

On top of that, it has been proven that longer content results in higher rankings. Remember this when developing SEO content to create user-centric, high-quality material that addresses problems.

3. Localization of SEO strategies

Google My Business merits its subsection here. Localization of SEO in 2022 will necessitate you prioritizing these adjustments on your website.

In a time of broad uncertainty and ongoing political events, it is vital to know whether businesses are open and how they work. And this is precisely where Google My Business comes in — supplying users with the necessary contact and business information for local providers/retailers.

These listings additionally include:

  • Real-time business hours
  • Visitor patterns and times of day
  • Phone numbers, websites, and email
  • Reviews & Ratings
  • Detailed directions

You can also post updates regarding your operations or special deals to keep your clients up-to-date on any significant business developments.

4. Schema markup 

It hasn’t commonly been understood yet, but the schema markup is a significant SEO trend in 2022. Adding more structured data and rich snippets (and formatting) to your sites and content boosts the likelihood of obtaining valuable real estate on SERPs, such as People Also Ask.

Since Google’s engines tend to prioritize user-centric experiences, tailoring your content to appeal to these portions of SERPs can be just as advantageous as placing in the top 10 search results on the first page. This is why these appearances are referred to as “Position 0.”

Fortunately, there is often a simple method you can apply to generate structured data for any internet page:

  1. Utilize Google’s Structured Data Markup Assistant to construct your schema
  2. Choose the ‘Type of Data’ best relevant for your needs
  3. Enter the URL to be marked-up
  4. Select which elements to highlight
  5. Keep adding more markup elements
  6. Produce the HTML
  7. Include the markup on the page.

5. Video SEO gets an upgrade.

Consider this SEO fact: there are 800 million videos online and 37 million active channels. With this in mind, it is not surprising that video SEO is gaining popularity.

Given the development of Google’s M.U.M. algorithm, which favors video clips in Search Engine Results Pages, optimizing your video content for SEO will be vital beyond 2022. Ensuring that your content appears on the first page is no longer sufficient. You must also do your best to promote your video material.

How? Use these steps:

  1. Pick a keyword.
  2. Optimize the title and description 
  3. Tag correctly
  4. Write a fun script and create longer videos
  5. ‘Subscribes’ and ‘likes’ promotes engagement.
  6. Create Playlists. Keep viewers interested and Use a compelling thumbnail.
  7. Caption videos and use social media to promote your videos.

Don’t neglect the traditional SEO

Although all of these new and exciting SEO trends for 2022 are enticing and worth investing time and money in, it is crucial not to lose track of traditional SEO and its efforts. That means you need not entirely recreate the wheel. You should invest in these methods to increase your search visibility, website traffic, and sales via exposure on search engines such as Google.

The post 5 Unexpected SEO Factors You Should Be Tapping Into appeared first on noupe.

Categories: Others Tags:

How To Create An E-Commerce Content Strategy To Improve Sales

September 26th, 2022 No comments

You are aware of the significance of e-commerce content strategy for improving sales in e-commerce businesses unless you are completely off the grid. The issue is that some marketers believe that if they provide enough content, people will find it. Unfortunately, this is not how it operates.

Without a plan, content is merely words, pictures, and videos that are broadcast into cyberspace. This type of material adds nothing to the target market’s business other than to the happiness and wealth of certain content creators.

Content strategies have a clear aim and a set of actions for how to get there, such as boosting your bottom line, increasing conversions in your sales funnel, and increasing engagement with target audiences. Among marketers’ top content marketing challenges: producing material that provides good quality content with leads.

Online companies are driven by content, which generates likes, shares, and sales. However, an e-commerce content strategy is necessary for material that influences consumer behavior.

Why Does My Ecommerce Website Need a Content Marketing Strategy?

Creating unique, high-quality material with a specific audience in mind while appealing to their interests and addressing their problems is known as content marketing. By giving useful information that cultivates goodwill and involvement, it often gently sells a brand, service, or product as opposed to making a hard pitch.

The ultimate objective of this customer engagement is to turn consumers into paying clients by guiding them through the sales funnel process of meeting their needs, establishing your credibility as an authoritative source of information, positioning yourself as the authority best suited to assist them, and then turning interest into a paid business and a valuable ongoing relationship.

A successful e-commerce content strategy will bring about the following advantages:

  • It brings in fresh visitors to your business website. 
  • It promotes confidence in your brand.
  • It can assist with crucial conversions.
  • It could generate a different source of income.
  • Its evergreen substance may offer a lasting benefit.

Without a solid e-commerce content strategy, you run the risk of confusing and alienating potential consumers with content that lacks focus and purpose. Additionally, you run the risk of falling behind rivals that have a strong content strategy in place.

Ideas To Improve Sales In E-Commerce Content Strategy

1. Recognize your audience

If you sell products online, you should have an e-commerce content strategy and be aware of the buying habits of your target market. If you sell goods on external marketplaces like Amazon, you should be aware of the type of material they require and match it to what you already provide for your own website.

Additionally, you ought to comprehend how customers locate your goods. Perhaps they use a search engine if they are older. Your products might appear in the social media feeds of your target market, which is likely to be younger. Understanding current trends will help you follow and reach your audience where they are because social media platform audiences vary.

Knowing your audience allows you to map out their purchasing patterns. While most of your material may be used on various social media platforms, some of them might profit from more distinctive media.

2. Identify material specific to each channel

You can choose the kinds of material you should produce after you are aware of the channels your audience consumes. You can produce entertaining and educational videos if you use TikTok. You can design a great graphic if your target demographic uses Facebook. An aesthetically pleasing GIF would also work well on Twitter.

Numerous pieces of material can be successful on multiple platforms, regardless of the channel. For instance, you can post videos, descriptions, captions, and hashtags on your own website as well as on several social media sites.

You should weigh the expected results against the specific e-commerce content strategy investment needed for each channel. Avoid investing excessively in specialist content at the expense of your essential content needs. If clients can’t locate the information they require to make a decision, even a strong social media hook won’t be of much use.

3. Create an information model

You can make a content model after mapping out the content. This approach establishes precise standards for content creators to follow when structuring their work to complement your plan.

First, list all the entities you intend to map, such as your offerings’ goods, product categories, campaigns, and channels, as well as any editors, product managers, or other relevant entities.

After mapping the entities and their connections, you must decide what information you need to record for each item. Start with the product’s name, description, price, and photo.

There will probably be a new channel in two years. Make sure your approach is adaptable enough to deal with new knowledge base platforms, fads, and the associated content without needing to start from scratch.

Once you have your model, you must decide how to best add content to it. Even if your production crew is imaginative, they can forget to record the right information. Implement the content model in a structured CMS to manage the material for your company to assist them.

4. Support the CMS without a head

Businesses that want to manage their materials more effectively need an e-commerce content strategy. It simplifies the creation, management, and publication of e-commerce content, including the simultaneous publication of the same material across different channels. Enter headless CMS, which has been popular among providers to store content in a single knowledge base repository and deliver data using separate platforms.

With a headless CMS, you can store material in a more organized way than with conventional systems. The headless CMS keeps information in a central location regardless of whether you push it to your website, a partner’s website, a social media site, or a print queue. It collects, structures, and disperses content via APIs, maps out links between connected content, and manages crucial metadata.

Front-end developers can concentrate on the content once a headless CMS is in place. The structure that emerges can make it easier for users to update and add new products to your website, produce more useful designs, and please customers.

5. Request client feedback

Paying attention to what your consumers have to say can help you make improvements to the material you offer and increase sales. Understanding what your customers think of your sales process is essential for future improvement, regardless of how you go about it. You could send a follow-up email, have live chat support scripts, interview customers, examine recorded sales calls, check social media channels, or use other methods.

6. E-commerce customer experience

Your whole customer experience or how customers feel about all of their contacts with your company includes your e-commerce services. So, businesses must promptly provide customers with the information that satisfies their demands when they use self-service portals with a problem, sometimes one that is urgent.

When the e-commerce customer experience rate grows, it will improve the customer retention rate thus resulting in more sales over time.

What Kinds of E-commerce Content Strategy Are Effective?

You can use a range of content kinds when creating an e-commerce content strategy. These consist of:

1. Blogging

 These articles are the backbone of the majority of content marketing plans because they foster client relationships, generate leads, and lend themselves to SEO tactics.

2. Original photography

This compensates for the fact that customers cannot touch the goods you are selling before they make a purchase.

3. Video content

 It has been demonstrated that watching videos increases both the volume and value of sales.

4. Product guides

As customers seek out additional details about the products they are interested in, they may increase traffic to your e-commerce site.

5. Customer testimonials 

These come in the form of endorsements, critiques, and case studies.

6. Email marketing

 You have numerous opportunities to interact with customers and develop relationships by simply confirming purchases, informing them of shipping and product delivery, and conducting follow-ups.

Conclusion

Top brands, big and small, spend money on e-commerce content strategy because it’s essential for retaining customers and bringing in new ones. Whether you want to increase traffic through organic and paid searches or develop original content that serves marketing and sales objectives, we can offer a comprehensive, all-in-one solution to help you improve your online selling presence.

You can easily establish and update your current content plan, detect content gaps, or research, write, and audit content with our content marketing toolkit, which will save you time and money. You may write your own success narrative if you have the right resources to study your market, conduct competitive audits, produce excellent content, and analyze the outcomes to improve future performance.

The post How To Create An E-Commerce Content Strategy To Improve Sales appeared first on noupe.

Categories: Others Tags:

Top Features to Consider in a Barcode Scanner SDK

September 26th, 2022 No comments

In the modern world that we live in, barcodes are ubiquitous. You can spot a barcode on almost every item you purchase from a grocery store to a book you read. Barcodes help efficient information transmission, save time, and keep errors at bay. Since they encode information in machine-readable formats, they also reduce the need for manual data entry, reducing manual efforts. While traditional laser-based barcode scanners have long been used for commercial purposes, they are now being replaced by 2D Imagers. 

2D Imagers help convert mobile devices, such as smartphones, tablets, etc., into barcode scanners. Hence, no additional hardware is required to perform barcode scanning. But, the question is, how do you create a barcode scanning application for these mobile devices? There are two ways to do this: build an application from scratch or opt for a barcode scanner SDK to trim down the development time. 

Before we discuss more on barcode scanner SDKs, let’s first go through the benefits of 2D Imagers over Laser-Based Barcode Scanners. 

Benefits of 2D Imagers over Laser-Based Barcode Scanners

There are various reasons why 2D Imagers are becoming more popular than laser-based barcode scanners. Most businesses are now opting for 2D Images because of their outstanding features. 

  • Scanning On the Go: Most laser-based barcode scanners are wired and do not let users perform barcode reading on the go. 2D Imagers, on the other hand, make use of mobile devices’ cameras and image processing techniques to allow users to scan barcodes anywhere, anytime. 
  • Support for Various Barcode Symbologies: Traditional laser-based barcode scanners can scan one-dimensional barcodes. Some updated ones can support 2-D barcode types, such as PDF417 codes. When it comes to 2D Imagers, they support all common barcode symbologies, from linear barcodes to 2D barcode types such as DotCodes, DataMatrix codes, Aztec codes, etc. This is another reason why 2D Imagers are gaining popularity over the years. 
  • Ability to Read Multiple Barcodes at Once: Laser-based handheld barcode scanners fail to read multiple barcodes simultaneously. Modern 2D Imagers are based on the latest technologies and can quickly scan a dozen barcodes in one pass. Hence, they are more suitable for inventory operations that involve scanning multiple barcodes in a single scan. 
  • Read Damaged Barcodes: Laser-based barcode scanners reflect laser light off of a barcode to decode the information it contains. These barcode scanners do not perform well in low light and cannot read damaged barcodes such as crumpled, torn, or incomplete. 2D Imagers employ image processing techniques to read all such challenging barcodes. As wrinkled barcodes are common in retail environments, 2D Imagers are set to replace the traditional ones. 
  • Decode Barcodes Off a Screen: When it comes to reading barcodes off a screen, laser-based barcode scanners do not perform well. 2D Imagers have the edge over their laser-based counterparts as they are effective in scanning barcodes on screens. 

2D Imagers are also ideal for personal usage, such as making payments via QR codes or quickly accessing information. One can’t carry a handheld barcode scanner all the time for such purposes. Your smartphone or tablet is enough! 

The Need for a Barcode Scanner SDK 

If you do not have much time or a team to build a barcode scanner app from scratch, a barcode scanner SDK is all you need! Using a few lines of code, you can embed barcode reading functionality into a web, mobile, or desktop application. No need to spend days building the program for effective barcode reading! 

The market is filled with multiple vendors that offer all sorts of barcode scanning SDKs. Hence, the selection process can get tricky and overwhelming for some. But, there are a few parameters that you can consider to choose the one ideal for your business. 

What Features to Consider in a Barcode Scanner SDK? 

Go through the following features to choose the best barcode scanner SDK for your business. 

  • Simplified Integration Process: Integrating a barcode scanner SDK into a mobile or web app should be easy. It shouldn’t include complex codes and multiple steps to add barcode reading capability into a new or existing mobile app. Hence, choose the one that offers a simplified integration process. 
  • Exceptional Speed: Speed is critical for most operations such as inventory management, retail, logistics, etc. Hence, you cannot compromise by choosing a slow barcode reader SDK. Leading vendors offer solutions that can effortlessly scan over 500 barcodes in a minute. To leverage the benefits of barcode technology, you must choose a fast barcode scanner SDK. 
  • Platform Support: The platform support depends on what type of app you want to develop. Do you want to build a mobile app, a web app, or a desktop app? Once decided, check for the versions supported by the SDK and then make a decision. 
  • Supported Barcode Symbologies: Choose a barcode scanner SDK that supports multiple barcode symbologies, from 1-dimensional barcodes to 2-dimensional symbologies, such as PDF417 codes, MaxiCode, Aztec codes, DataMatrix codes, etc. 
  • Impressive Accuracy: Leading barcode reader SDK that uses commercial-grade barcode detection algorithms, camera-enhancing functionalities, and OCR functionalities. Choose a barcode scanner SDK that offers near 100% accuracy. 
  • Ability to Read Tough Barcodes in Challenging Environments: An ordinary barcode scanner may not support reading tough barcodes such as angled, skewed, distorted, incomplete, or blurred. Look for a robust barcode reader SDK that supports such barcodes in challenging environments. 
  • Customization Capabilities: Choose a barcode reader SDK that offers customization capabilities to suit your specific business requirements. 
  • Robust Technical Support: Opt for a vendor that offers powerful technical support to cater to all your queries. You may never know what issue you encounter while using the SDK or integrating. Hence, choose a vendor that’s known for good technical support services. 

Conclusion

After going through these features, try before you buy to make an informed decision. You can compare multiple options and see which suits your business requirements best. Once you have done an in-depth analysis, finalize the most ideal option out of all. 

The post Top Features to Consider in a Barcode Scanner SDK appeared first on noupe.

Categories: Others Tags:

How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

September 23rd, 2022 No comments

If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even in the block theme directory screenshots as well.

Let’s consider the following example from Twenty Twenty (a classic theme) which includes a cover template that can be used to display both in single post and page, where the post’s featured image displays at the top that stretches across the browser screen, with post title and other desired meta data below. Cover templates allow creating content that stands out from the traditional constraints of displaying content.

Screenshot showing a single post with Twenty Twenty cover template.

Creating cover templates currently requires writing PHP code as captured here in the Twenty Twenty default theme’s cover template. If we look at the template-parts/content-cover.php file, it contains the code for displaying content when the cover-template is used.

Thus, it is not possible to create a customized cover page if you do not possess a deep knowledge of PHP. For many ordinary WordPress users, the only option is to use plugin like Custom Post Type UI as described in this short video.

Cover sections in block themes

Since WordPress 5.8, theme authors could create custom templates (like single post, author, category, and others) with a top hero section using block editor cover block and bundled into their themes with minimal or no code.

Before diving into how top large cover sections are created in block themes templates, let’s briefly look at the two block themes Twenty Twenty-Two and Wabi by Rich Tabor (full review here).

Screenshot showing cover page thumbnails of Twenty Twenty-Two (left) and Wabi (right) themes.

Behind-the-scenes, Twenty Twenty-Two implements a large header by adding a hidden image stored as a pattern in the header-dark-large parts. Whereas, in the Wabi theme, the large header background color in a single post is implemented with accent background colors and a 50px height spacer block (lines: 5-9). The accent colors are managed by the assets/js/accent-colors.js file.

Many others chose to create a top cover section by using cover block, which allowed users to change the background color and add a static image from Media Library or upload from media devices – without writing any code. With this approach, images from the post featured image block had to be added manually to each single post if you wanted to have the post featured image as the background image in single posts.

Cover Blocks with dynamic post featured image

WordPress 6.0 made available another cool featured image cover blocks feature, which allows use of the featured image of any post or page as the background image in the cover block.

In the following short video, Automattic engineers discuss adding featured images to cover blocks with an example from Archeo theme:

The image block including post featured image block can be further customized using duotone color in theme.json as discussed in this short Connecting The Dots YouTube video (Automattic’s Anne McCarthy).

Use case examples (Wei, Bright Mode)

If we browse the thumbnail images in the block theme directory, we see a majority of them include large cover header sections. If we dig into their template files, they make use of cover blocks with static image background.

Some recently developed themes are using cover blocks with the dynamic post featured image background (e.g., Archeo, Wei, Frost, Bright Mode, etc.). A brief overview of the new feature is available in this short GitHub video.

Screenshot showing cover page thumbnails of Wei (left) and Bright-mode (right) themes.

Combining dynamic accent colors features of Wabi theme with cover and post featured image blocks, Rich Tabor further expands his creativity in his new Wei theme (full review available here) to display dynamic cover images from a single post.

In his Wei announcement post, Rich Tabor writes: “Behind-the-scenes, the single.html template is using a Cover block that leverages the post’s featured image. Then the duotone is applied by the color scheme assigned to the post. This way, just about any image will look fine”.

If you would like to dig deeper into the Wei theme’s header cover block and learn how to create your own, here is a short video from Fränk Klein (WP Development Courses) who explains step-by-step how it was created.

Similar to the Wei theme, Brian Gardner also makes use of cover block with post featured image block in his recent Bright Mode theme to display standout contents with vibrant colors.

Brian told WPTavern: “he loves most about the theme is the way the Cover Block is used on single pages. It pulls the featured image into the Cover block and also offers custom block styles for shadows and full-height options. […] I feel as though this really presents what’s possible with modern WordPress.”

For more detail, here is its demo site and full review of Brian’s Bright Mode theme.

Designing complex layouts with block editor

Recently, WordPress launched a new block editor designed landing homepage and a download page. The announcement attracted mixed reactions from its readers, including from Matt Mullenweg (Automattic) who commented on the 33-days taken to design and launch such a “simple page”. You can find additional behind the scene discussions here.

In response, Jamie Marsland of Pootlepress created this YouTube video where he reproduces a nearly identical homepage in nearly 20 minutes.

Commenting on Marsland video, Sarah Gooding of WP Travern writes: “He is what one might describe as a power user with the block editor. He can quickly shuffle rows, columns, and groups around, adjusting padding and margins as necessary, and assign each section the corresponding color for the design. At this point, this is not something most average WordPress users could do.”

Though the block editor has come a long way, there are still growing pain points to most theme developers and ordinary users to create and design complex layouts with it.

Adding enhancement to TT2 Gopher blocks

In this section, I will walk you through how I added enhancements to the TT2 Gopher Blocks theme that I referenced in my previous article. Inspired by cover blocks from themes that I described earlier, I wanted to add three cover templates (author, category, and single-cover) to the theme.

While browsing websites, we notice two types of cover headers. The mostly observed header is cover section blended with the site header (site title and top navigation) into the cover block (e.g., Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). We also find header cover section which is not blended with site header and positioned just underneath, such as this BBC Future website. For TT2 Gopher blocks theme, I opted for the latter.

Creating cover header patterns

First, let’s create cover header patterns for author, single, and others (categories, tags) templates using cover blocks. Then we will convert them into patterns (as described here previously) and call the respective header cover patterns into the templates.

If you are familiar to working with the block editor, design your header section using cover blocks in the site editor and then convert the cover header code into patterns. However, if you are not familiar with FSE editor, then the easiest way is to copy patterns from the patterns directory in a post, make necessary modification and convert it into a pattern.

In my previous CSS-Tricks article, I discussed in detail on creating and using block patterns. Here is a brief overview of the workflow that I am using to create the single post cover header pattern:

Single post cover header pattern

Step 1: Using FSE interface, let’s create a new blank file and start building block structure as shown on the left panel.

Screenshot of the WordPress UI with the Full Site Editor. A block is being assembled with post date, categories, and post title.

Alternatively, this could be done in a post or page first, and then copy and paste the markup into a pattern file, later.

Step 2: Next, to covert the above markup into a pattern, first we should copy its code markup and paste into a new /patterns/header-single-cover.php in our code editor. We should also add required pattern file header markup (e.g., title, slug, categories, inserter, etc.).

Here is the entire code of the /patterns/header-single-cover.php file:

<?php
    /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
    <!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
    <div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%" data-object-fit="cover" data-object-position="40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
    <div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
    <div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
    
    <!-- wp:paragraph -->
    <p>|</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

Step 3: For this demo, I have used this image from photos directory as a filler background image, and applied the Midnight duotone color. To use post featured image dynamically, we should add "useFeaturedImage":true in the cover block by replacing the above filler image link just before the "dimRatio":50 such that the line 10 should look like the following:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->

Alternatively, the filler image could also be changed by clicking Replace and selecting Use featured image option:

Screenshot of the WordPress UI with ‘Replace’ and ‘Use featured image’ selected.

Now, the header cover patterns should be visible in the patterns inserter panel for use anywhere in the templates, posts, and pages.

Archive cover headers

Inspired by this WP Tavern post and a step-by-step walkthrough to create an author template header, I wanted to create a similar cover header and add to TT2 Gopher theme, too.

First, let’s create the archive cover header pattern for author.html the template as well, following the above workflow. In this case, I am creating this in a new blank page, by adding blocks (as shown below in list view):

Screenshot of the WordPress UI for an Author page using a single post header cover.

In the background for the cover, I used the same image used in the single post header cover.

Because we would like to display a short author biography on the author block, a biographical statement should also be added to the user profile page, or else a blank space will be displayed in the front-end.

The following is the markup code of the header-author-cover, that we will use pattern, in the next step:

    <!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
    <div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
    
    <!-- wp:group -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
    <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
    <p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
    
    <!-- wp:separator {"backgroundColor":"foreground"} -->
    <hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
    <!-- /wp:separator --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

To covert the markup into a header-author-cover pattern, we should add the required pattern file header markup as described earlier. By editing the header-author-cover.php pattern, we can create similar header covers for tags, taxonomy, and other custom templates.

The header-category-cover.php pattern for my category.html template is available on GitHub.

Creating Templates with header cover blocks

WordPress 6.0 and the recent Gutenberg 13.7 extended template creating features into the block editor, thus making it possible for many WordPress users, without deep knowledge of coding, to create their customized templates.

For more detailed information and use cases, here is a thorough customization note by Justin Tadlock.

Block editor allows creating various types of templates, including cover templates. Let’s briefly overview how combining cover block and post featured image block with new template UI makes easy to create various types of cover custom templates even with no or low coding skills.

Screenshot of the WordPress UI displaying available templates provided by TT2 Gopher Blocks – Single, Page, Index, Home, 404, Blank, and Archive.

Creating templates has been made much easier with Gutenberg 13.7. How to create block templates with codes and in site editor is described in the Theme handbook and in my previous article.

Author template with cover block

Top (header section) markup of the author.html template is shown below (line 6):

    <!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
    <main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
    
        <!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
    
    ...
    ...
    ...
    <!-- /wp:group -->
    ...

Here are screenshots of cover headers for the author.html and category.html templates:

Screenshot of Author Page header (left) with author name, avatar, and biography. And screenshot of Category Page header (right).

The entire code for both templates is available on GitHub.

Single post with cover block

To display cover block in our single post, we have to call the header-cover-single pattern below the header section (line 3):

    <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
    
     <!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
    
    <!-- wp:spacer {"height":32} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    ....
    ....
    ....

Here is a screen capture showing the front-end view of the single post with the header cover section:

Screenshot of TT2 Gopher Blocks Single Post with Header Cover Section Pattern.

The entire single-cover.html template is available on GitHub.

You can find additional step-by-step walkthrough tutorials on creating a hero header post section and using post featured image background cover blocks on WP Tavern and Full Site Editing website.

There you have it!

Helpful Resources

Featured image cover block

Blog posts


Even though the block themes, in general, are getting lots of pushback from WordPress community members, in my opinion, they are the future of WordPress, too. With block themes, amateur theme authors, without the deep coding skills and mastery of PHP and JavaScript languages, can now create themes with complex layouts with a hero cover section as described in this article combined with patterns and style variations.

As an early Gutenberg user, I couldn’t be more excited with the new theming tools like create block theme plugin and others which allow theme authors to achieve the following directly from block editor UI without writing any code:

  • (i) create
  • (ii) overwrite theme files and export
  • (iii) generate blank or a child theme, and
  • (iv) modify and save style variation of the current theme

Additionally, the recent iterations of the Gutenberg plugin allow enabling fluid typography and layout alignments and other stylistic controls using only theme.json file without JavaScript and a line of CSS rules.

Thank you for reading and share your comments and thoughts below!


How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

4 Ways to Recruit for Your Team’s Most Niche Roles

September 23rd, 2022 No comments

Every business is unique. And because of this, every team is unique too. Within your own company, you may very well have various team structures, staffing protocols, and managing principles. This makes sense, as different roles and responsibilities have different needs from an organizational point of view. 

Like it or not, there is no cookie cutter method for recruiting and staffing the best team. It takes work and can be a constantly evolving process. Recruiting in itself is a challenging task, particularly now during the era of The Great Resignation. More and more employees are rightfully asking for very specific accommodations. They want to work for companies that value them first as human beings and second as dedicated employees. 

With all this in mind, recruiting specific talent for your team isn’t easy. Certain roles like content creators and marketing managers may be more readily recruitable. On the other hand, roles like front end developers and designers can be more tricky to find. If you’re in this sticky position of hiring individuals for more niche titles, keep reading. Below are four ways to recruit specific talent for your team’s most niche roles. 

1. Ask for Assistance

First and foremost, don’t be afraid to ask for assistance. It’s also important to ask far and wide. First, ask the hiring manager what they think is the best way to find the potential new employee. They may have experience in finding these types of recruits from previous roles. The hiring manager may also have a network to tap into that could be useful for your hiring team. 

Second, lean on resources for your specific needs. Engineering staffing agencies, for instance, can assist in finding top engineering talent based on their diverse pool of individuals looking for jobs. These types of agencies can help HR teams and hiring managers find the perfect match. This can be beneficial for startups, who may not have the namesake yet, to be found by interested employees. Well known companies also stand to benefit as staffing agencies are also a great resource for HR teams who need to hire multiple individuals within the same field. 

2. Tap into Social Media

One of the first places someone turns to when they are seeking a new job opportunity is social media. They want to see what types of positions are available and what kinds of benefits are being offered. Your recruiters should be on social media, particularly sites like LinkedIn, posting about new offerings weekly. Creating this kind of buzz online ensures that your company is putting the word out that you are hiring. 

In addition to sites like LinkedIn, it’s also important to post job offerings on other platforms such as Twitter, Facebook, and even Instagram. Word of mouth is another key aspect of hiring, and someone who sees a niche role may share it with one of their friends or family members. Again, it’s all about creating awareness. If you don’t share publicly that you are hiring for these niche roles, nobody will know that you are in need of a full stack developer, for example. 

3. Offer an Employee Referral Incentive 

Your current employees likely know the top talent. Many have had prior experiences before coming to work at your company. And with these experiences, they have likely met some incredible people that may be great matches for your company. In order to get these referrals, it can be beneficial to offer an employee referral incentive. These types of incentives can be a reason for employees to share about open positions on their own social channels too. 

The key to creating this incentive is to make it as easy as possible for referrals to happen. Luckily, there are several software platforms and tools that can help streamline this process. Let you employees know what the incentive is, whether it is an added bonus to their paycheck or extra vacation days. Also, overly communicate with your employees when a niche position is available. You may even think about upping the incentive for filling more challenging roles — an extra incentive is always going to be welcome!  

4. Look Internally

Yes, certain niche roles like those in the designer field or engineering world require a specific set of skills. But perhaps you have a new role for a “never-been-done-before” position. In these cases, it’s not a bad idea to look internally. Your current employees know the most about the company, including how to navigate current processes and set up new ones. They understand what’s expected from the team and the company’s overarching goals and values. 

If you decide to look internally, be sure to still follow a proper interview process. You likely will also want to have external candidates to interview along with internal ones. This can help the hiring team compare and contrast the necessary skills. There are always benefits to hiring internally, mainly that it can lead to a quicker transition process and more dedicated staff. Your employees as a whole may be more dedicated to work for a company where internal shifts are not only possible but valued. 

Takeaways

Hiring is not an easy process. Again, it takes time to find true talent. For niche roles, it can take a lot longer to find someone that can do the job well and wants to work for your company. Don’t give up just because it takes longer than usual. The right individual is out there; it’s just a matter of finding them! 

By utilizing these tips, recruiters will have a better chance of finding the best possible employee as quickly as possible. Having a plan and leaning on different resources, including current employees, are helpful tactics to utilize. Also, know that other companies are in the same boat. Speak with other company and industry leaders to get a sense of how they are recruiting. Because at the end of the day, the more people that know you are hiring the better chances you have of finding your dream candidate.

The post 4 Ways to Recruit for Your Team’s Most Niche Roles appeared first on noupe.

Categories: Others Tags:

Lessons Learned As A Designer-Founder

September 23rd, 2022 No comments

In the quarter-century I’ve been a product designer, design has matured. We’ve developed tools and practices that allow us to work faster, better, and more in concert with engineers and product managers. Things are a lot less chaotic than they used to be.

But with that change comes the process. I’ve written elsewhere about the dangers of too much process; in the years I spent building the design practice at Heap, I tested and evolved my ideas around Pragmatic Design and its potential to reduce process. I encouraged lower-fidelity artifacts; design briefs instead of endless mockups; product-quality reviews instead of design reviews; and I pushed for early, ongoing collaboration between Design, Product, and Engineering. The results were encouraging: we got more done with a smaller, scrappier team.

In 2020 I left Heap to found Miter, a startup whose mission is deceptively simple: make meetings better. And if Heap was a testing ground for pragmatic design, Miter’s been a crucible for extreme pragmatism: nothing is scrappier than being the only designer, the only PM, and the only engineer. What process is worth keeping? What can be optimized and what can’t? And what needs to change again as we build a team?

That’s useful context if you’re a designer-founder yourself. Still, even if you’re not, it’s valuable to think about why each part of the design process exists and how (and whether) we can optimize it in various ways to be more efficient and better collaborators. So whether you’re designing on a team of ten or ten thousand, this post is for you.

Multiple Hats

Founder or not, designers are often multidisciplinary. Many of us do some PM’ing or make a little prototype if we’re technical. If you’re like me, you enjoy that breadth and chafe a bit when forced to wear just one hat.

What makes being multidisciplinary an advantage? To begin with, it represents a broader design toolkit. With a little engineering knowledge, you can build working prototypes or even design directly in the codebase if that’s the most efficient way to experiment. And small, straightforward projects can sometimes go straight from brain to product:

As a team grows, understanding diverse perspectives can improve collaboration and results. We can’t predict all the twists and turns our designs will take as they’re built, no matter how diligent we are at thinking through edge cases. I’ve always advocated for design and engineering to proceed in lockstep throughout the process; being a lone designer-engineer has reminded me just how powerful that is. My designs can change radically long after they’re “done.” That’s easy to deal with when it’s just me but feasible to manage as a team, too.

To put it simply, you can substitute a little conversation for a lot of process. And that’s easier when your designers speak a little Engineer, your engineers speak a little Designer, and everybody speaks a little Product. In a quick conversation, you can make trade-offs, generate creative solutions, and reprioritize the backlog as your understanding of ROI evolves.

For example, Miter was built to work whether you’re signed in or not: if you have the URL for a meeting, you can join and participate without an account. That’s a strength for us, and when we set out to build our new Dynamics facilitation feature, we figured that would remain true. But during one sprint planning, Nico — our first engineer — raised some questions about how we’d distinguish among anonymous users given we’re unable to identify them; doing so is central to Dynamics in a way it’s not elsewhere.

It was doable, but none of the options was easy, so I made the call (Product hat) to make the feature signed-in-only. Nico disabled the button for signed-out users; I recognized we needed to give users a bit more feedback (Design hat), decided that was worth doing before launch (Product hat), and spent a couple of hours implementing it (Engineering hat).

Wear Your Hats Carefully

Designing in code can be efficient, but be careful: it can hurt the design, too. You know all those arguments designers have with engineers? There’s a reason for them. When wearing your engineer hat, you’re looking to simplify: reducing code paths, avoiding async situations that could yield race conditions, and so on. But sometimes, those are the very things that make a design great. As I implement, I find myself pushing back on my designer self, and (because the engineer self is doing the work) the designer self tends to lose. I have to step back periodically, put the design hat on, and consider.

That separation is easy to maintain if you do all your design in design tools, but I don’t recommend going that far. Sometimes things are straightforward enough (as in the Add Task example above) that it’s just not worth the time to design separately. The key is to recognize when you need to be thinking in design mode vs. engineer mode.

Broadcast Your Hats

It’s valuable not only to understand which hat you’re wearing but also to communicate it to others.

One afternoon my co-founder wanted help with a marketing email. I started with the usual designer questions: what’s the goal of this project? What does success look like? All good questions, but he didn’t realize which hat I was wearing. Instead of the curious designer understanding project requirements, he heard the skeptical CEO challenging them. After a few tense moments, we figured it out, and I’ve been more careful to clarify my hat up front.

This matters most when you’re in a leadership role since power dynamics are at play. The CEO of a startup I advised once took this a step further with actual hats: on his desk, he had two baseball caps, one labeled “CEO” and one labeled “Product.”

Know Your Environment

A multidisciplinary approach isn’t always a path to success. Some teams value specialization and want people to stay in their lanes, especially at larger companies. I once received feedback that I needed to “act more like a designer.” It was hard to hear at the moment, but ultimately I concluded it was more about my fit with that team than anything I was doing wrong.

Takeaway

On any team, it’s valuable for everyone to understand each other’s specialties. Actually wearing all those hats may be less valuable at larger companies, but the fastest way to understand is doing. I’d encourage any designer to learn to code and to think holistically about roadmaps and launches as a PM would. How you deploy that knowledge will depend on your team’s dynamic.

The Bare Minimum Design Process

As designers, so much of what we do is communicating and convincing. We run user tests to justify our decisions. We create multiple options because it’s expected. We write up specs, make flow diagrams, or mock every state, so engineers get the details right. We present in critique to get feedback, but also because our peers want a venue to question our decisions.

But for much of Miter’s existence, none of that has been necessary — the only person I really need to communicate with or convince has been myself. So what’s left? What pieces of the process are still valuable?

Rapid Sketching

In general, the design goes from broad and low-fidelity to detailed and high-fidelity: bullet points to sketches to wireframes to mockups to prototypes to implementation. Though, of course, we rarely do all of that.

In the early stages, I’m a big fan of paper sketches. It’s been years since I accepted their messiness and realized how much faster and more powerful they can be than wireframes (which I rarely use anymore). I even advocate for their use in executive reviews.

In some ways, sketches are more powerful when you are your only audience because they don’t even have to be legible. What’s that weird blob in the corner? Doesn’t matter, as long as you know. You can tear through permutations quickly, which means I sketch regularly but briefly before moving on to higher-fidelity methods.

Design Briefs

I conceived of the Design Brief when I was at Heap as a substitute both for longer design docs and unnecessarily-exhaustive mockups. We used it (along with sketches) as a fast, early artifact to ground cross-functional discussions — from scoping to prioritization to leadership reviews — before spending significant time on the details.

I still use design briefs on larger projects. They don’t take long, and the act of writing them helps me think — taking high-level, hand-wavy ideas to a more practical level. They serve as a record of what I was thinking and why to help clarify for my future self. And we do sometimes conduct design reviews.

I also write product briefs and encourage engineers to write engineering briefs. Both have worked well. The key is not to go overboard, as they’re called “briefs” for a reason. And while it’s useful to have templates for them, I treat those as guidelines rather than requirements.

Hero Mockups

I find mockups to be an indispensable part of the design process. For significant changes and new functionality, it’s much faster to mock it up than to build even a semi-functional prototype. But I only do “hero” mockups — key states of whatever I’m designing rather than a comprehensive set.

As our team grows, those will probably expand, but — just as we did at Heap — I’ll continue to rely on the design brief, real-time conversations, and design-minded engineers rather than go crazy with mocks.

Design System

Miter does have a design system of sorts. I’ve built an extensive set of reusable Figma components, as well as global colors and text styles that I try to use consistently across mocks.

Why bother, with nobody else on the team? Because change is easier, safer, and — most importantly — faster when it’s centralized. If I want to make all our buttons square tomorrow, I can do it once and have it propagate everywhere.

Not everything deserves a component. Sometimes it’s just too early, too prone to change. So when’s the right time to turn one-off work into components? I try to do it when I recognize that a component I built for Project N is needed in Project N+1. (This would be much easier if Figma behaved as advertised, and one could cut-and-paste components from individual files to your library. Hint hint.)

This sort of centralization is even more important in code, and when our mocks and codebase disagree, it’s often the code that wins. To be clear: I don’t see that as a problem. Our canonical style guide is the Global.less file with all our CSS variables. We have one and only one button component, and we use it everywhere. When I write and review code, I’m ruthless about centralization because it’s what will ensure things remain consistent and easy to change.

Five years from now, I don’t want to be a company where simple design improvements get killed because they’d have to be implemented five times over.

Critiques & Reviews

I thrive on feedback; I can’t do my job without it. We don’t have designers on the team, but we do have design-minded engineers and a COO who can critique our UX from both a product and a go-to-market perspective. I do a lot of “What do you think about this?” on Slack, and occasionally, I schedule design reviews.

That said, I miss having other designers around when we brainstorm or critique. I look forward to the point when I can justify hiring a designer to fill out that conversation. In the meantime, there’s no silver bullet. I love the idea of gathering a group of solo designers to review each other’s work across companies, but it’s not something I’ve actually found the time to do. What I do do is take the time to explain my rationale — and design principles in general — to the rest of the team, so over time, they’ll be critiquing from a more and more informed perspective.

Research: Focus On The 20%

Working elsewhere, I’ve been frustrated by the state of user research. It’s underfunded. It’s used to settle cross-functional debates rather than to answer real questions about users. Foundational work takes a back seat to tactical studies. Usability tests are misinterpreted as feedback, so we end up doing what users tell us rather than determining what they need. And too often, research findings are dropped on the floor due to timelines.

At Miter, we’re still too small to hire a dedicated researcher, so I’m responsible for whatever research we do. And because my time is so split, that research really, really needs to count. In making those trade-offs, I rely on a simple truth: designers know how to design. That may seem self-evident, but I think we all forget it sometimes and assume anything that hasn’t been tested has an equal probability of being a disaster.

80% of what a good designer does should be usable. Just as importantly, a good designer has a sense of what lies in that other 20%. I like to think in terms of “UX Risk”: what are the bits of my design that need testing? What’s bold, unique, unknown, ambiguous?

Of course I make mistakes in the other 80%, and it’s essential to watch for unexpected usability issues in the data. For instance, a couple of months ago, we noticed several users had interacted with Miter’s pre-meeting screen but never hit the Start button to start the meeting. We came up with a hypothesis: people thought our topic list was a note-taking UI. Digging into user sessions and looking at average topic length confirmed it. Thankfully, it was an easy fix: make the topics more topic-like and less note-like.

I suspect we’ve done more user research than a typical early-stage startup, and other founders might question that. Still, as we head into our next round of fundraising, I can tell you it’s given me the ability to speak about our target audience and their needs with far more confidence.

Takeaway

What strikes me about my “bare minimum” design process is, in fact, how many of the traditional artifacts I still use. There’s very little that I would do as part of a larger team that I don’t do on my own. The tools I use to explore and iterate are the same ones I’d use to communicate and convince. The biggest difference is in comprehensiveness. So, what can that tell us?

  1. We have a broad array of tools at our disposal. Use them!
    But, use the right tool for the job. Not every project needs every type of artifact. (This is true whether your team uses Agile, “waterfall,” or some other approach.)
  2. Low fidelity can be better than no fidelity.
    I’ve always advocated for low fidelity. It’s faster, easier, and in cross-functional situations, can help focus stakeholders on the forest rather than the trees. But skipping over this phase altogether, while tempting when you’re on your own, can be dangerous. A few minutes spent sketching or writing bullet points can clarify and solidify your design at a stage where that’s extremely low cost.
  3. Know your reasons.
    Are you mocking this up because you need it or because your stakeholders do? Neither is necessarily bad, but you might want to approach the work differently depending. Or put another way: a mockup whose target audience is you has very different requirements than one whose target is a slide in an All-Hands meeting.

Pitfalls Of The Designer-Founder

The designer’s curse is we see pixels: if the alignment is off, if the border is fuzzy, if the context is lost without an animated transition, and so on. We see it when nobody else does, and it bothers us.

The curse of the early-stage founder, meanwhile, is a lack of resources. My team has greater agility than it will ever have again, but we can’t do more than one or two things at a time.

Those curses come into conflict. On the one hand, nobody can stop you from polishing your product into oblivion. And our industry is littered with the corpses of “design-led” companies that built beautiful things nobody wanted.

On the other hand, a design-led company’s superpower is great design. Unlike your competitors, you can present a polished, elegant, usable face to the world, and that’s worth doing.

So it’s a balance. Wear the design hat, revel in it, and sweat the details. And then swap it for the product hat and keep that detail work under control. I’ve hired engineers who are design-centric enough that I’ve had to stop them from polishing things further, and honestly, that’s probably a good dynamic.

As the leader, if you nitpick the details, then the details will get fixed. And that’s marvelous, but it also carries a cost.

What’s your experience been optimizing the design process? Have you found success, or challenges, as a multidisciplinary designer? I’d love to hear about it! And of course, if you wish your meeting could be better, check out Miter and let me know what you think!

Categories: Others Tags:

How to Start a Hobby Business: 7 Tips to Succeed

September 22nd, 2022 No comments

Do you not feel satisfied with your current job? Do you feel trapped and struggle to be productive every day? 

You’re yearning to do something that you’re passionate about and clearly, your job is far from it. 

How about turning your hobby into a business and starting a hobby business?

Doing what you love and enjoy is a rewarding experience and improves your quality of life. However, turning your hobby into a business doesn’t guarantee success or the lack of stress for that matter. 

Let’s take a look at seven tips to help you take the plunge and start a hobby business.

1. Establish your goal

Before you start out on your entrepreneurial venture, strategize and ask yourself why you would want to take this leap. 

  • Is this a part-time side business for extra money? 
  • Do you know what or how you would want to sell your products or services? 
  • Are you planning on making this your main mode of income? 
  • What is the end result and how would you achieve it? 

These are important questions you must consider when you start your own hobby business. Whether it’s turning 100 dollars into 1000 dollars or 1000 dollars into 10 000 dollars, having a goal and understanding your motivation behind it will help you better focus your efforts on achieving it.

Establishing a goal also gives your mission purpose and helps you plan accordingly. 

2. Assess the profitability of your hobby

If you want to start a hobby business, you need to know how profitable it can be. 

For example, if you are a lifestyle photographer and your niche business idea is to sell the images you click, you need to know if these items are something that people care about. 

The demand for your products or services is very crucial in developing a successful business. If there isn’t any audience for what you want to sell, there would be no value to set up this business. 

It’s a good idea to do market research, assess your existing competitors, perform a SWOT analysis of your idea and narrow down on your target audience. 

If you’re selling a product, look up marketplaces such as Amazon and eBay to understand if there is a market for them due to affiliate marketing challenges. This exercise will give you a clear idea about what people are looking for, what defines your online business’ niche target market and how you can differentiate your product. 

3. Build a business plan

No business functions like magic and you have to work painstakingly for it to be on top. That is why, building a fool-proof business plan is a must for every entrepreneur as it will help you think through every detail, the pros and cons, all the ways to monetize, and the success rate of your potential business. 

Business plans are also very useful when you are applying for funding. They help you show your investors what your business is about, what your goals are and a brief overview of how you plan on making it a success. 

4. Strengthen your online presence

Considering that 97% of consumers use the internet to find local businesses, having an online presence is non-negotiable for businesses today.

Whether you choose to create a blog or an Instagram business profile, what matters is using the medium to create brand awareness, educate your target audience about your product or service and engage with them. 

Apart from improving brand visibility, having an online presence also adds to the credibility of your business and helps you appeal to a wider audience. 

5. Grow your network

Having a strong online presence is important but networking comes with its own set of benefits. 

Find social media groups, forums and events that cater to your specific business niche. Doing this will help you meet a lot of like-minded professionals. These can be your potential customers or even those who you can collaborate with. 

6. Understand the financials

At the start of your entrepreneurial journey, having a full-fledged financial plan will be very helpful to identify areas of financial improvement and the gray areas, if any. 

Consider speaking with a tax advisor or hire an accountant to do your business’ expenses so that you don’t need to analyze your company’s figures on your own. It’s best to leave these matters to the professionals.

7. Consider consulting a mentor

Choosing to work with a mentor can be beneficial for your business. 

A mentor is someone who has had a similar journey as yours — someone who identifies the pitfalls and the struggles of starting up a business and can guide you through the growth phase of your startup. 

Working with a mentor will help you be more proactive and implement their learnings in your business. From understanding what workflow analytics is and how it can benefit your business, to having a better handle on your finances, seeking guidance from an experienced professional can help you overcome these challenges with ease.

Conclusion: launch your hobby business successfully

Starting a business from scratch where you are turning your hobby into a full-time revenue source is not going to be a walk in the park. It takes time, planning, commitment, and lots of patience. 

You will encounter all the ups and downs that are inevitable in any startup business but these tips will certainly ensure you’re better prepared to effectively launch your hobby business.

The post How to Start a Hobby Business: 7 Tips to Succeed appeared first on noupe.

Categories: Others Tags:

How I Made an Icon System Out of CSS Custom Properties

September 22nd, 2022 No comments

SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.

There are many ways to include an SVG on a page and each technique has its own advantages and disadvantages. For the last couple of years, I have been using a Sass function to import directly my icons in my CSS and avoid having to mess up my HTML markup.

I have a Sass list with all the source codes of my icons. Each icon is then encoded into a data URI with a Sass function and stored in a custom property on the root of the page.

TL;DR

What I have for you here is a Sass function that creates a SVG icon library directly in your CSS.

The SVG source code is compiled with the Sass function that encodes them in data URI and then stores the icons in CSS custom properties. You can then use any icon anywhere in your CSS like as if it was an external image.

This is an example pulled straight from the code of my personal site:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

Demo

CodePen Embed Fallback

Sass structure

/* All the icons source codes */
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);

/* Sass function to encode the icons */
@function svg($name) {
  @return url('data:image/svg+xml, #{$encodedSVG} ');
}

/* Store each icon into a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Append a burger icon in my button */
.menu::after {
  content: var(--svg-burger);
}		

This technique has both pros and cons, so please take them into account before implementing this solution on your project:

Pros

  • There are no HTTP requests for the SVG files.
  • All of the icons are stored in one place.
  • If you need to update an icon, you don’t have to go over each HTML templates file.
  • The icons are cached along with your CSS.
  • You can manually edit the source code of the icons.
  • It does not pollute your HTML by adding extra markup.
  • You can still change the color or some aspect of the icon with CSS.

Cons

  • You cannot animate or update a specific part of the SVG with CSS.
  • The more icons you have, the heavier your CSS compiled file will be.

I mostly use this technique for icons rather than logos or illustrations. An encoded SVG is always going to be heavier than its original file, so I still load my complex SVG with an external file either with an tag or in my CSS with url(path/to/file.svg).

Encoding SVG into data URI

Encoding your SVG as data URIs is not new. In fact Chris Coyier wrote a post about it over 10 years ago to explain how to use this technique and why you should (or should not) use it.

There are two ways to use an SVG in your CSS with data URI:

  • As an external image (using background-image,border-image,list-style-image,…)
  • As the content of a pseudo element (e.g. ::before or ::after)

Here is a basic example showing how you how to use those two methods:

CodePen Embed Fallback

The main issue with this particular implementation is that you have to convert the SVG manually every time you need a new icon and it is not really pleasant to have this long string of unreadable code in your CSS.

This is where Sass comes to the rescue!

Using a Sass function

By using Sass, we can make our life simpler by copying the source code of our SVG directly in our codebase, letting Sass encode them properly to avoid any browser error.

This solution is mostly inspired by an existing function developed by Threespot Media and available in their repository.

Here are the four steps of this technique:

  • Create a variable with all your SVG icons listed.
  • List all the characters that needs to be skipped for a data URI.
  • Implement a function to encode the SVGs to a data URI format.
  • Use your function in your code.

1. Icons list

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.8 18.92" width="24.8" height="18.92"><path d="M23.8,9.46H1m22.8,8.46H1M23.8,1H1" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/></svg>'
);

2. List of escaped characters

/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  ''': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '<': '%3C',
  '>': '%3E',
  '': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);

3. Encode function

/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}		

4. Add an SVG in your page

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

If you have followed those steps, Sass should compile your code properly and output the following:

button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}		
CodePen Embed Fallback

Custom properties

The now-implemented Sass svg() function works great. But its biggest flaw is that an icon that is needed in multiple places in your code will be duplicated and could increase your compiled CSS file weight by a lot!

To avoid this, we can store all our icons into CSS variables and use a reference to the variable instead of outputting the encoded URI every time.

We will keep the same code we had before, but this time we will first output all the icons from the Sass list into the root of our webpage:

/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

Now, instead of calling the svg() function every time we need an icon, we have to use the variable that was created with the --svg prefix.

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

Optimizing your SVGs

This technique does not provide any optimization on the source code of the SVG you are using. Make sure that you don’t leave unnecessary code; otherwise they will be encoded as well and will increase your CSS file size.

You can check this great list of tools and information on how to optimize properly your SVG. My favorite tool is Jake Archibald’s SVGOMG — simply drag your file in there and copy the outputted code.

Bonus: Updating the icon on hover

With this technique, we cannot select with CSS specific parts of the SVG. For example, there is no way to change the fill color of the icon when the user hovers the button. But there are a few tricks we can use with CSS to still be able to modify the look of our icon.

For example, if you have a black icon and you want to have it white on hover, you can use the invert() CSS filter. We can also play with the hue-rotate() filter.

CodePen Embed Fallback

That’s it!

I hope you find this little helper function handy in your own projects. Let me know what you think of the approach — I’d be interested to know how you’d make this better or tackle it differently!


How I Made an Icon System Out of CSS Custom Properties originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Things I Wish I Had Known About Angular When I Started

September 22nd, 2022 No comments

I’ve been using Angular since version 2, and it has come a long way since those days to what it is right now. I’ve worked on various Angular projects over the years, yet I keep finding new things. It goes to say how massive the framework is. Here are some things I wish I had known about Angular when I started so you don’t have to learn it the hard way.

Modularize Your Application

Angular has detailed documentation outlining the recommended approach to structure your application. Angular also provides a CLI to help scaffold your application that adheres to their recommendations.

I’ve had my fair share of mistakes when it comes to structuring the application. As you follow tutorials, you’re guided through where you should put your files and which modules the components or services belong to. However, when you venture beyond the tutorial, you sometimes end up with a structure that doesn’t scale well. This could lead to issues down the road.

Below are some mistakes I’ve made that came back and bit me.

Split Your Components Into Modules

The release of Standalone Components in Angular 14 makes NgModules no longer a requirement when creating components. You can choose not to use modules for your components, directives, and pipes. However, you could still follow the folder structure outlined below, omitting the module files.

Initially, I put all the components into the default module you get when creating a new Angular app. As the application grew, I ended up with a lot of components in the same module. They were separate components and didn’t have any need to be in the same module.

Split your components into separate modules, so you can import and load only the required modules. The common approach is to divide your application into the following modules:

  • Core module for singleton services and components that are used once at the app level (example: navigation bar and footer).
  • Feature modules for each feature — code related to the specific functionality of your application. For example, a simple e-commerce application could have a feature module for products, carts, and orders.
  • Shared module for the module that is referenced across different parts of the application. These can include components, directives, and pipes.

Dividing the application into separate modules helps partition your application into smaller, more focused areas. It creates clear boundaries between the different types of modules and each feature module. This separation helps maintain and scale the application as different teams can work on separate parts with a lower risk of breaking another part of the application.

Lazy Load Your Routes

This is a result of my first mistake of putting everything in a single module. Because all the components were in the same module, I couldn’t lazy load the modules. All the modules were imported at the root level, eventually affecting the initial load time. After separating your components into modules, lazy load your routes, so the modules only get loaded when you navigate to the route that requires them.

Single Responsibility

This applies to all types of files in an Angular app. I’ve let my service and component files grow beyond their scope, which made them difficult to work with. The general rule is to keep each component/service/pipe/directive performing a specific set of tasks. If a component is trying to do more than what it was initially made for, it might be worth refactoring and splitting it into several smaller components. This will make testing and maintenance a lot easier.

Use The Angular CLI

You’ve probably used the ng serve command either directly in your command line or through a script in your package.json file. This is one of Angular CLI’s commands. However, the CLI comes with more handy commands that can speed up your development especially when it comes to initializing and scaffolding.

Initially, I did most of these manually as I didn’t understand how to use the CLI except for starting and stopping the local server. I would create component files manually, add the boilerplate code, and add them to the right modules. This was okay for smaller projects but became a tedious task as the project grew. That’s when I learned how to use the CLI and use it to automate most of the manual work I do. For example, instead of creating all the boilerplate for a card component, the following command will create them for you:

ng g c card

You can use the CLI by installing it globally via npm using the command below:

npm install -g @angular/cli

To view the available commands, execute the code below:

ng help

Most projects have custom configurations that are project-specific, and you have to do some modifications to the code generated by the CLI. Angular provides an elegant solution for these scenarios, such as schematics. A schematic is a template-based code generator — a set of instructions to generate or modify code for your project. Similar to Angular CLI, your custom schematics are packaged and can be installed via npm in whichever project needs it.

Path Aliases And Barrel Exports

As I was learning Angular, I tried to keep my project neat by putting all the services into a services folder, models in a models folder, and so on. However, after some time, I end up with a growing list of import statements like this:

import { UserService } from '../../services/user.service';
import { RolesService } from '../../services/roles.service';

Typescript path alias can help simplify your import statements. To setup path aliases, open your tsconfig.json and add the desired path name and its actual path:

{
 "compilerOptions": {
 "paths": {
 "@services/*": ["src/app/services/*"],
 }
 }
}

Now the import statements above can be re-written as:

import { UserService } from '@services/user.service';
import { RolesService } from '@services/roles.service';

An added benefit of using path aliases is that it allows you to move your files around without having to update your imports. You’d have to update them if you were using relative paths.

This can be further simplified by using barrel exports. Barrels are a handy way to export multiple files from a single folder (think of it as a proxy for your files). Add an index.ts in the services folder with the following contents:

export * from './user.service';
export * from './roles.service';

Now, update the tsconfig.json to point to the index.ts file instead of the asterisk (*).

{
 "compilerOptions": {
 "paths": {
 "@services": ["src/app/services/index.ts"],
 }
 }
}

The import statements can now be further simplified into:

import { UserService, RolesService } from '@services';

Embrace Typescript’s Features

I started by learning JavaScript, so I wasn’t used to the type system and the other features that TypeScript offers. My exposure to TypeScript was through Angular, and it was overwhelming to learn both a new language (although it’s a superset of JavaScript, some differences trip me up every time) and a new framework. I often find TypeScript slowing me down instead of helping me with the development. I avoided using TypeScript features and overused the any type in my project.

However, as I got more acquainted with the framework, I began to understand the benefits of TypeScript when used correctly. TypeScript offers a lot of useful features that improve the overall developer experience and make the code you write cleaner. One of the benefits of using TypeScript that I’ve grown accustomed to is the IntelliSense or autocomplete it provides in your IDE. Their type safety and static type checking have also helped catch potential bugs at compile time that could have snuck in.

The nice thing about TypeScript is its flexible configuration. You can toggle their settings easily via their tsconfig.json as per your project’s needs. You can change these settings again if you decide on a different setting. This allows you to set the rules as loose or strict as you’d like.

Improve Performance By Using trackBy

Performance is crucial for applications, and Angular provides various ways to optimize your applications. This is often a problem that you won’t run into at the beginning as you are probably working with small data sets and a limited number of components. However, as your application grows and the number of components being rendered grows and becomes increasingly complex, you’ll start to notice some performance degradation. These performance degradations are usually in the form of slowness in the app: slow to respond, load, or render and stuttering in the UI.

Identifying the source of these problems is an adventure on its own. I’ve found that most of the performance issues I’ve run into in the applications are UI related (this doesn’t mean that other parts of the application don’t affect performance). This is especially prominent when rendering components in a loop and updating an already rendered component. This usually causes a flash in the component when the components are updated.

Under the hood, when a change occurs in these types of components, Angular needs to remove all the DOM elements associated with the data and re-create them with the updated data. That is a lot of DOM manipulations that are expensive.

A solution I’ve found to fix this issue is to use the trackBy function whenever you’re rendering components using the ngFor directive (especially when you’re frequently updating the rendered components).

The ngFor directive needs to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed. For these scenarios, it is desirable only to update the elements affected by the change to make the updates more efficient. The trackBy function lets you pass in a unique identifier to identify each component generated in the loop, allowing Angular to update only the elements affected by the change.

Let’s look at an example of a regular ngFor that creates a new div for each entry in the users array.

@Component({
 selector: 'my-app',
 template: `
 <div *ngFor="let user of users">
 {{ user.name }}
 </div>
 `,
})

export class App {
 users = [
 {id: 1, name: 'Will'},
 {id: 2, name: 'Mike'},
 {id: 3, name: 'John'},
 ]
}

Keeping most of the code the same, we can help Angular keep track of the items in the template by adding the trackBy function and assigning it to a function that returns the unique identifier for each entry in the array (in our case, the user’s id).

@Component({
 selector: 'my-app',
 template: `
 <div *ngFor="let user of users; trackBy: trackByFn">
 {{ user.name }}
 </div>
 `,
})

export class App {
 users = [
 {id: 1, name: 'Will'},
 {id: 2, name: 'Mike'},
 {id: 3, name: 'John'},
 ]
 trackByFn(index, item) {
 return item.id;
 }
}

Use Pipes For Data Transformations

Data transformations are inevitable as you render data in your templates. My initial approach to this was to:

  • Bind the template to a function that accepts the data as the input:
interface User {
 firstName: string,
 middleName: string,
 lastName: string
}
@Component({
 selector: 'my-app',
 template: `
 <h1>{{ formatDisplayName(user) }}</h1>
 `,
})

export class App {
 user: User = {
 firstName: 'Nick',
 middleName: 'Piberius',
 lastName: 'Wilde'
 }
 formatDisplayName(user: User): string {
 return `${user.firstName} ${user.middleName.substring(0,1)}. ${user.lastName}`; 
 }
}
  • Create a new variable, assign the formatted data to the variable, and bind the new variable in the template:
interface User {
 firstName: string,
 middleName: string,
 lastName: string
}
@Component({
 selector: 'my-app',
 template: `
 <h1>{{ displayName }}</h1>
 `,
})

export class App {
 user: User = {
 firstName: 'Nick',
 middleName: 'Piberius',
 lastName: 'Wilde'
 }
 displayName = `${this.user.firstName} ${this.user.middleName.substring(0,1)}. ${this.user.lastName}`; 
}

Neither approach was clean nor performant and wasn’t what Angular recommends to perform data transformations. For these scenarios, angular recommends using pipes. Pipes are functions specifically designed to be used in templates.

Angular provides built-in pipes for common data transformations such as internationalization, date, currency, decimals, percentage, and upper and lower case strings. In addition, Angular also lets you create custom pipes that can be reused throughout your application.

The data transformation above can be re-written using a pipe as follows:

@Pipe({name: 'displayName'})
export class DisplayNamePipe implements PipeTransform {
 transform(user: User): string {
 return `${user.firstName} ${user.middleName.substring(0,1)}. ${user.lastName}`; 
 }
}

The pipe can then be used in the template by using the pipe (|) character followed by the pipe name.

@Component({
 selector: 'my-app',
 template: `
 <h1>{{ user | displayName }}</h1>
 `,
})

export class App {
 user: User = {
 firstName: 'Nick',
 middleName: 'Piberius',
 lastName: 'Wilde'
 }
}

Improve Performance With OnPush Change Detection

Angular applications are made up of a tree of components that rely on their change detectors to keep the view and their corresponding models in sync. When Angular detects a change in the model, it immediately updates the view by walking down the tree of change detectors to determine if any of them have changed. If the change detector detects the change, it will re-render the component and update the DOM with the latest changes.

There are two change detection strategies provided by Angular:

  • Default
    The change detection cycle runs on every event that occurs inside the component.
  • OnPush
    The change detection cycle only runs when a component’s event handler is triggered, an async pipe is used in the template, a new value is emitted, and when any of the component’s input reference changes.

In addition to the reduced number of change detection cycles and its performance boost, the restrictions imposed by using the OnPush change detection strategy also make you architect your app better by pushing you to create more modular components that utilize one of the three recommended ways mentioned above to update the DOM.

RxJS Is Your Friend

RxJS is a JavaScript library that uses observables for reactive programming. While RxJS isn’t exclusively used in Angular, it plays a big role in the Angular ecosystem. Angular’s core features, such as Routing, HttpClient, and FormControl, leverage observables by default.

RxJS is a part of Angular that has been largely unexplored for me as I was learning the framework. I’ve avoided using it unless I had to. It was a new concept, and I found it quite hard to wrap my head around it. I’ve worked with JavaScript Promises, but observables and streams are a new paradigm for me.

After working for a while with Angular, I eventually took the time to learn and understand RxJS and try to use them in my projects. It wasn’t long before I realized the numerous benefits of RxJS that I’ve been missing out on all this time. RxJS, with its large collection of chainable operators, excels in handling async tasks.

I’ve been using RxJS with Angular for a few years now, and my experience has been nothing less than positive. The set of operators RxJS offers is really handy. They seem to have an operator (or a chain of operators) for every use case. Commonly used operators include:

  • map: passes each source value through a transformation function to get corresponding output values.
  • tap: modify the outside state when the observable emits a new value without altering the stream.
  • switchMap: maps each value to an Observable, then flattens all of these inner Observables.
  • filter: emits a value from the source if it passes a criterion function.
  • combineLatestWith: create an observable that combines the latest values from all passed observables and the source into an array and emits them.

Learn How To Spot And Prevent Memory Leaks

Memory leaks are one of the worst types of issues you run into — hard to find, debug, and often hard to solve. This might not be a concern initially, but it becomes crucial when your application reaches a certain size. Common symptoms of memory leaks are degrading performance the longer the app is being used or the same events being fired multiple times. Two of the most common source of memory leaks I’ve run into are:

1. Subscriptions That Are Not Cleaned Up

Unlike the async pipe, listening to an observable using the subscribe method won’t get cleaned up automatically. You will have to manually clean up the subscriptions by calling unsubscribe on the subscription or using the takeUntil operator.

The example below shows a memory leak introduced by listening to the route params observable. Every new instance of MyComponent creates a new subscription which will continue to run even after the component is destroyed.

export class MyComponent {
 constructor(private route: ActivatedRoute){
 this.route.params.subscribe((params) => {
 // Do something
 });
 }
}

As mentioned above, you can fix the memory leak by either calling unsubscribe or using the takeUntil operator.

  • Fixing the memory leak using the unsubscribe method:
export class MyComponent {
 private routeSubscription;
 constructor(private route: ActivatedRoute){
 this.routeSubscription = this.route.params.subscribe((params) => {
 // Do something
 });

 }
 ngOnDestroy() {
 this.routeSubscription.unsubcribe();
 }
}
  • Fixing the memory leak using the takeUntil operator:
export class MyComponent {
 private componentDestroyed$ = new Subject<boolean>();
 constructor(private route: ActivatedRoute){
 this.route.params.pipe(
 takeUntil(this.componentDestroyed$)
 ).subscribe((params) => {
 // Do something
 });

 }
 ngOnDestroy() {
 this.componentDestroyed$.next(true);
 this.componentDestroyed$.complete();
 }
}

2. Event Listeners That Are Not Cleaned Up

Another common source of memory leaks is event listeners that aren’t unregistered when no longer used. For example, the scroll event listener in the code below gets instantiated on every new instance of MyComponent and continuously runs even after the component is destroyed unless you unregister it.

export class MyComponent {
 constructor(private renderer: Renderer2) {}
 ngOnInit() {
 this.renderer.listen(document.body, 'scroll', () => {
 // Do something
 });
 }
}

To fix this and stop listening to the event after the component is destroyed, assign it to a variable and unregister the listener on the ngOnDestroy lifecycle method.

export class MyComponent {
 private listener;
 constructor(private renderer: Renderer2) {}
 ngOnInit() {
 this.listener = this.renderer.listen(
 document.body,
 ‘scroll’,
 () => {
 // Do something
 });

 }
 ngOnDestroy() {
 this.listener();
 }
}

Consider Using A State Management Library (If Applicable)

State management is another part of the stack that you don’t usually think about until you need it. Most small and simple applications don’t need any external state management library. However, as the project grows and managing your application’s state gets more complicated, it might be time to re-think if the project could benefit from implementing more robust state management.

There is no correct solution for state management as every project’s requirements are different. Luckily, there are a few state management libraries for Angular that offer different features. These are a few of the commonly used state management libraries in the Angular ecosystem:

Wrapping Up

If you’ve just started to learn Angular and it hasn’t quite clicked yet, be patient! It will eventually start to make sense, and you’ll see what the framework has to offer. I hope my personal experience can help you accelerate your learning and avoid the mistakes I’ve made.

Categories: Others Tags: