Archive

Archive for September, 2024

Clever Polypane Debugging Features I’m Loving

September 17th, 2024 No comments
Polypane browser displaying ryantrimble.com in three different viewport sizes simultaneously

I’m working on a refresh of my personal website, what I’m calling the HD remaster. Well, I wouldn’t call it a “full” redesign. I’m just cleaning things up, and Polypane is coming in clutch. I wrote about how much I enjoy developing with Polypane on my personal blog back in March 2023. In there, I say that I discover new things every time I open the browser up and I’m here to say that is still happening as of August 2024.

Polypane, in case you’re unfamiliar with it, is a web browser specifically created to help developers in all sorts of different ways. The most obvious feature is the multiple panes displaying your project in various viewport sizes:

I’m not about to try to list every feature available in Polypane; I’ll leave that to friend and creator, Kilian Valkhof. Instead, I want to talk about a neat feature that I discovered recently.

Outline tab

Inside Polypane’s sidebar, you will find various tabs that provide different bits of information about your site. For example, if you are wondering how your social media previews will look for your latest blog post, Polypane has you covered in the Meta tab.

Preview card displaying how open graph information will display on Mastodon.

The tab I want to focus on though, is the Outline tab. On the surface, it seems rather straightforward, Polypane scans the page and provides you outlines for headings, landmarks, links, images, focus order, and even the full page accessibility tree.

Polypane sidebar, outline tab, the view select options display the different views available: Headings, Landmarks, Links, Images, Focus order, and Accessibility Tree

Seeing your page this way helps you spot some pretty obvious mistakes, but Polypane doesn’t stop there. Checking the Show issues option will point out some of the not-so-obvious problems.

Polypane sidebar, outline tab, Landsmarks view, the "Show issues" option is enabled. In the outline, red text describes an error: Multiple banner elements at the same level found.

In the Landmarks view, there is an option to Show potentials as well, which displays elements that could potentially be page landmarks.

Polypane sidebar, Outline tab, Landmark view - the outline displays a red symbol indicating a potential landmark element

In these outline views, you also can show an overlay on the page and highlight where things are located.

Polypane laptop viewport view of ryantrimble.com, the landmark overlay feature is enabled, which outlines landmark elements in blue while also displaying their value

Now, the reason I even stumbled upon these features within the Outline tab is due to a bug I was tracking down, one specifically related to focus order. So, I swapped over to the “Focus order” outline to inspect things further.

Polypane sidebar, outline tab, Focus order view, displays an outline of the focusable elements on the page

That’s when I noticed the option to see an overlay for the focus order.

Polypane laptop view with focus order overlay enabled, displays guide lines marking the location of each focusable items

This provides a literal map of the focus order of your page. I found this to be incredibly useful while troubleshooting the bug, as well as a great way to visualize how someone might navigate your website using a keyboard.

These types of seemingly small, but useful features are abundant throughout Polypane.

Amazing tool

When I reached out to Kilian, mentioning my discovery, his response was “Everything’s there when you need it!”

I can vouch for that.

Clever Polypane Debugging Features I’m Loving originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Why is risk management important to underwriters?

September 17th, 2024 No comments

“An uncontrollable, potential lack of something valuable” is a fundamental definition of risk. The foundation of the insurance industry is based on the idea of risk and its sharing, in which an insurer takes on part of the monetary hazard of an insured celebration in return for a predetermined amount of money referred to as a top class. Underwriters are essential to the insurance sector as they determine the types and conditions of insurance coverage. Their duty is to evaluate the risk in imparting coverage to individuals, businesses, and assets and to make decisions that might be consistent with the risk tolerance of an insurer.

As a result, risk management will become a critical step in the underwriting process, ensuring the commercial enterprise’s enduring profitability and policyholder protection. In this sense, a robust insurance underwriting system is important because it permits underwriters to assess risk successfully and make knowledgeable choices. In this blog, we will highlight the importance of risk management to underwriters and how leveraging cutting-edge underwriting structures complements this important procedure.

Importance of Risk Management in Underwriting

Preserving Monetary Stability

Insurance’s essential purpose is to guard against financial loss, and risk control is vital to preserving the insurer’s economic balance. Underwriters ensure that charges are enough to pay for future claims as well as administrative expenses by precisely determining the risk stage connected with every policy. This meticulous risk management provides a solid foundation for the insurer’s financial stability, reassuring policyholders.

Underwriters can better control this using predictive models from a systematic insurance underwriting system. These systems compute future risk based on past data, outside assets, and real-time inputs. This prevents the insurer from taking on more risk than necessary to maintain long-term sustainability and profitability.

2. Avoiding Unfavorable Selection

People or corporations are much more likely to get insurance when the risk is excessive. In contrast, low-risk individuals might also select not to, which is referred to as detrimental selection. Underwriters play a crucial role in addressing this imbalance, ensuring that claims do not exceed expectations and thereby maintaining the insurer’s profitability. Their efforts instill confidence in the fairness and sustainability of the insurance system.

Underwriters can reduce adverse selection by employing data-driven insights and comprehensive risk profiles provided by risk management. Machine learning programs can be integrated into an insurance underwriting system to identify and predict high-risk policyholders. This allows underwriters to determine suitable premiums or, in extreme cases, cancel coverage.

3. Improving Pricing Based on Risk

Underwriters can use risk-based pricing when they have effective risk management in place. With this technique, insurers can charge higher premiums to consumers with more significant risks while offering more competitive rates to low-risk customers. This pricing strategy enhances the insurer’s capacity to attract low-risk customers and maintain profitability.

A progressive underwriting device makes dynamic insurance pricing based on the individual traits of every policyholder viable. To help underwriters best-tune pricing methods, it integrates many records sources, such as credit scores, medical histories, and driving statistics.

4. Increasing the Efficiency of Underwriting

An effective insurance underwriting system and risk control make the system run more smoothly. Underwriters can handle harsh conditions using automatic risk evaluation structures to perform repetitive duties like records collection, background assessments, and simple danger critiques.

By automating regular chance management responsibilities, underwriters may additionally process more policies in less time without compromising on accuracy. This is crucial because insurers must process packages fast while upholding risk standards in an increasingly competitive marketplace.

The Role of Technology in Risk Management

In the cutting-edge insurance landscape, technology has revolutionized danger management practices in underwriting. An insurance underwriting system with advanced technologies such as artificial intelligence (AI), machine studying (ML), and big data analytics enables underwriters to make better-informed choices.

1. Predictive Analytics together with Risk Analysis

One of the technologies revolutionizing risk management the most is predictive analytics. Historical data must be analyzed to forecast future events. Predictive models in underwriting assist underwriters in adjusting premiums or policy terms by predicting the likelihood of a claim.

Modern insurance underwriting systems incorporate real-time data from external sources, such as social media, satellite imaging, and economic indicators, into prediction models. This allows underwriters to evaluate risks more precisely, even in ambiguous situations.

2. Fraud Identification

Fraudulent claims may severely damage insurance firms. Identifying and mitigating fraud risk throughout the underwriting process is a crucial aspect of risk management.

A coverage underwriting gadget can use artificial intelligence (AI) algorithms to identify positions that might imply fraud. For example, the gadget can also highlight a risk for additional examination through an underwriter if the prospective policyholder offers conflicting records or has a questionable claims history. This lessens the possibility of underwriting fraud-susceptible guidelines.

3. AI and Automation-Powered Decision Making

Underwriters can better cope with large quantities of statistics and make brief, facts-driven alternatives, while positive aspects of the risk management process are automated using AI and machine learning. With AI algorithms, every coverage will undergo a comprehensive hazard appraisal in seconds, which could evaluate chance factors much more quickly than a human underwriter.

Conclusion

Underwriters need to be adept at risk control because it has an immediate bearing on insurance agencies’ fitness, viability, and expansion. By using sophisticated coverage underwriting systems and effective threat control strategies, underwriters may make well-informed judgments, reduce risks, and guarantee that premiums are reasonably priced.

Adopting generation and facts-pushed insights could be crucial for future success in a quickly converting industry. The better risk control equipment gets, the greater the underwriters can be and the more ready they are to address the challenges of an increasing number of complicated insurance panoramas.

Featured image by Loic Leray on Unsplash

The post Why is risk management important to underwriters? appeared first on noupe.

Categories: Others Tags:

Creating Custom Lottie Animations With SVGator

September 17th, 2024 No comments

This article is a sponsored by SVGator

SVGator has gone through a series of updates since our last article, which was published in 2021, when it was already considered to be the most advanced web-based tool for vector animation. The first step toward more versatile software came with the mobile export feature that made it possible to implement the animations in iOS and Android applications.

The animation tool continued its upgrade with a series of new export options: video formats including MP4, AVI, MKV, MOV, and WebM, as well as image formats such as GIF, Animated PNG, WebP, and image sequence. By covering a larger area of users’ needs, the app now enables anyone to create animated stickers, social media, and newsletter animations, video assets, and many more types of visual content on demand.

The goal of becoming a “one tool for all” still lacked the last piece of the puzzle, namely full support for Lottie files. Lottie, just like SVG, is a vector-based format, but it has even better comprehensive multi-platform support, a fact that makes it super popular among developers and design professionals. It is built for use across various platforms, enabling smooth integration into both web and mobile applications. Its file size is minimal, it is infinitely scalable, and developers find it straightforward to implement once they get familiar with the format. Lottie can incorporate raster graphics and also supports interactivity.

SVGator’s latest version has everything you need for your various applications without the need for any third-party apps or plug-ins.

Note: You can test all of SVGator’s functionalities free of charge before committing to the Pro plan. However, you can export up to three watermarked files, with videos and GIFs limited to basic quality.

In this article, we will follow a creation process made of these steps:

  • Importing an existent Lottie JSON and making some minor adjustments;
  • Importing new animated assets created with SVGator (using the library);
  • Creating and animating new elements from scratch;
  • Exporting the Lottie animation.

Getting Started With SVGator

The sign-up process is simple, fast, and straightforward, and no credit card is required. Sign up either with Google or Facebook or, alternatively, by providing your name, email address, and password. Start a project either with a Lottie animation or a static SVG. If you don’t have an existing file, you can design and animate everything starting from a blank canvas.

Now that you’ve created your account, let’s dive right into the fun part. Here’s a preview of how your animation is going to look by the time you’re done following this guide. Neat, right?

(Large preview)

Create A New Project

After logging in and clicking on the New Project option, you will be taken to the New Project Panel, where you can choose between starting from a blank project or uploading a file. Let’s start this project with an existing Lottie JSON.

  1. Click on the Upload file button and navigate to the directory where you have saved your Lottie file.

  2. Select the “Fast response.json” file and click Open.

    Hit play in the editor, and the animation should look like this:

    (Large preview)

Note: Make sure to hit Save after each step to make sure you don’t lose any of your progress while working on this project alongside our guide.

Import An Animated Asset

In this step, you will learn how to use the Library to import new assets to your project. You can easily choose from a variety of ready-made SVGs stored in different categories, load new files from your computer (Lottie, static SVG, and images), or save animations from other SVGator projects and reuse them.

In this case, let’s use an animated message bubble previously created and saved to the Uploads section of the Library.

Learn how to create and save animated assets with this short video tutorial.

  1. Navigate to the left sidebar of the app and switch to the Library tab, then click the “+” icon to upload the message bubble asset that you downloaded earlier.
  2. After it is loaded in the uploads section, simply click on it to add it to your project.

    All the animated properties of the asset are now present in the timeline, and you can edit them if you want.

    Note: Make sure the playhead is at the second “0” before adding the animated asset. When adding an animated asset, it will always start animating from the point where the playhead is placed.

  3. Freely adjust its position and size as you wish.
  4. With the playhead at the second 0, click on the Animate button, then choose Position.

At this point, you should have the first Position keyframe automatically added at the second 0, and you are ready to start animating.

Animate The Message Bubble

  1. Start by dragging the playhead on the timeline at 0.2 seconds:

  2. Then, drag the message bubble up a few pixels. The second keyframe will appear in the timeline, marking the element’s new position, thus creating the 2 milliseconds animation.

    Note: You can hit Play at any moment to check how everything looks!

    Next, you can use the Scale animator to make the bubble disappear after the dots representing the typing are done animating by scaling it down to 0 for both the X and Y axes:

  3. With the message bubble still selected, drag the playhead at 2.2 seconds, click on Animate, and select Scale (or just press Shift + S on the keyboard) to set the first Scale keyframe, then drag the playhead at 2.5 seconds.
  4. Set the scale properties to 0 for both the X and Y axes (in the right side panel). The bubble won’t be visible anymore at this point.

    Note: To maintain the ratio while changing the scale values, make sure you have the Maintain proportions on (the link icon next to the scale inputs).

    To add an extra touch of interest to this scaling motion, add an easing function preset:

  5. First, jump back to the first Scale keyframe (you can also double-click the keyframe to jump the playhead right at it).
  6. Open the Easing Panel next to the time indicator and scroll down through the presets list, then select Ease in Back. Due to its bezier going out of the graph, this easing function will create a bounce-back effect for the scale animation.

    Note: You can adjust the bezier of a selected easing preset and create a new custom function, which will appear at the top of the list.

    Keep in mind that you need at least one keyframe selected if you intend to apply an easing. The easing function will apply from the selected keyframe toward the next keyframe at its right. Of course, you can apply a certain easing for multiple keyframes at once.

    To get a smoother transition when the message bubble disappears, add an Opacity animation of one millisecond at the end of the scaling:

  7. Choose Opacity from the animators’ list and set the first keyframe at 2.4 seconds, then drag the playhead at 2.5 seconds to match the ending keyframe from the scale animation above.
  8. From the Appearance panel, drag the Opacity slider all the way to the left, at 0%.

Create An Email Icon

For the concept behind this animation to be complete, let’s create (and later animate) a “new email” notification as a response to the character sending that message.

Once again, SVGator’s asset library comes in handy for this step:

  1. Go to the search bar from the Library and type in “mail,” then click on the mail asset from the results.
  2. Place it somewhere above the laptop. Edit the mail icon to better fit the style of the animation:

  3. Open the email group and select the rectangle from the back.
  4. Change its fill color to a dark purple.
  5. Round up the corners using the Radius slider.

  6. Make the element’s design minimal by deleting these two lines from the lower part of the envelope.

  7. Select the envelope seal flap, which is the Polyline element in the group, above the rectangle.
  8. Add a lighter purple for the fill, set the stroke to 2 px width, and also make it white.

    To make the animation even more interesting, create a notification alert in the top-right corner of the envelope:

  9. Use the Ellipse tool (O) from the toolbar on top and draw a circle in the top-right corner of the envelope.
  10. Choose a nice red color for the fill, and set the stroke to white with a 2 px width.

  11. Click on the “T” icon to select the Text tool.
  12. Click on the circle and type “1”.
  13. Set the color to white and click on the “B” icon to make it bold.

  14. Select both the red circle and the number, and group them: right-click, and hit Group.

    You can also hit Command or Ctrl + G on your keyboard. Double-click on the newly created group to rename it to “Notification.”

  15. Select both the notification group and email group below and create a new group, which you can name “new email.”

Animate The New Email Group

Let’s animate the new email popping out of the laptop right after the character has finished texting his message:

  1. With the “New email” group selected, click twice on the Move down icon from the header to place the group last.
    You can also press Command or Ctrl + arrow down on your keyboard.
  2. Drag the group behind the laptop (on the canvas) to hide it entirely, and also scale it down a little.
  3. With the playhead at 3 seconds, add the animators Scale and Position.
    You can also do that by pressing Shift + S and Shift + P on your keyboard.

  4. Drag the playhead at the second 3.3 on the timeline.
  5. Move the New Email group above the laptop and scale it up a bit.
  6. You can also bend the motion path line to create a curved trajectory for the position animation.

  7. Select the first keyframes at the second 3.
  8. Open the easing panel.
  9. And click on the Ease Out Cubic preset to add it to both keyframes.

Animate The Notification

Let’s animate the notification dot separately. We’ll make it pop in while the email group shows up.

  1. Select the Notification group.
  2. Create a scale-up animation for it with 0 for both the X and Y axes at 3.2 and 1 at 3.5 seconds.
  3. Select the first keyframe and, from the easing panel, choose Ease Out Back. This easing function will ensure the popping effect.

Add Expressiveness To The Character

Make the character smile while looking at the email that just popped out. For this, you need to animate the stroke offset of the mouth:

  1. Select the mouth path. You can use the Node tool to select it directly with one click.
  2. Drag the playhead at 3.5 seconds, which is the moment from where the smile will start.
  3. Select the last keyframe of the Stroke offset animator from the timeline and duplicate it at second 3.5, or you can also use Ctrl or Cmd + D for duplication.

  4. Drag the playhead at second 3.9.
  5. Go to the properties panel and set the Offset to 0. The stroke will now fill the path all the way, creating a stroke offset animation of 4 milliseconds.

Final Edits

You can still make all kinds of adjustments to your animation before exporting it. In this case, let’s change the color of the initial Lottie animation we used to start this project:

  1. Use the Node tool to select all the green paths that form the character’s arms and torso.
  2. Change the color as you desire.

Export Lottie

Once you’re done editing, you can export the animation by clicking on the top right Export button and selecting the Lottie format. Alternatively, you can press Command or Ctrl + E on your keyboard to jump directly to the export panel, from where you can still select the animation you want to export.

  1. Make sure the Lottie format is selected from the dropdown. In the export panel, you can set a name for the file you are about to export, choose the frame rate and animation speed, or set a background color.
  2. You can preview the Lottie animation with a Lottie player.
    Note: This step is recommended to make sure all animations are supported in the Lottie format by previewing it on a webpage using the Lottie player. The preview in the export panel isn’t an actual Lottie animation.
  3. Get back to the export panel and simply click Export to download the Lottie JSON.

Final Thoughts

Now that you’re done with your animation don’t forget that you have plenty of export options available besides Lottie. You can post the same project on social media in video format, export it as an SVG animation for the web, or turn it into a GIF sticker or any other type of visual you can think of. GIF animations can also be used in Figma presentations and prototypes as a high-fidelity preview of the production-ready Lottie file.

We hope you enjoyed this article and that it will inspire you to create amazing Lottie animations in your next project.

Below, you can find a few useful resources to continue your journey with SVG and SVGator:

  • SVGator tutorials
    Check out a series of short video tutorials to help you get started with SVGator.
  • SVGator Help Center
    It answers the most common questions about SVGator, its features, and membership plans.
Categories: Others Tags:

Multiple Anchors

September 16th, 2024 No comments

Only Chris, right? You’ll want to view this in a Chromium browser:

CodePen Embed Fallback

This is exactly the sort of thing I love, not for its practicality (cuz it ain’t), but for how it illustrates a concept. Generally, tutorials and demos try to follow the “rules” — whatever those may be — yet breaking them helps you understand how a certain thing works. This is one of those.

The concept is pretty straightforward: one target element can be attached to multiple anchors on the page.

<div class="anchor-1"></div>
<div class="anchor-2"></div>
<div class="target"></div>

We’ve gotta register the anchors and attach the .target to them:

.anchor-1 {
  anchor-name: --anchor-1;
}

.anchor-2 {
  anchor-name: --anchor-2;
}

.target {
  
}

Wait, wait! I didn’t attach the .target to the anchors. That’s because we have two ways to do it. One is using the position-anchor property.

.target {
  position-anchor: --anchor-1;
}

That establishes a target-anchor relationship between the two elements. But it only accepts a single anchor value. Hmm. We need more than that. That’s what the anchor() function can do. Well, it doesn’t take multiple values, but we can declare it multiple times on different inset properties, each referencing a different anchor.

.target {
  top: anchor(--anchor-1, bottom);
}

The second piece of anchor()‘s function is the anchor edge we’re positioned to and it’s gotta be some sort of physical or logical inset — top, bottom, start, end, inside, outside, etc. — or percentage. We’re bascially saying, “Take that .target and slap it’s top edge against --anchor-1‘s bottom edge.

That also works for other inset properties:

.target {
  top: anchor(--anchor-1 bottom);
  left: anchor(--anchor-1 right);
  bottom: anchor(--anchor-2 top);
  right: anchor(--anchor-2 left);
}

Notice how both anchors are declared on different properties by way of anchor(). That’s rad. But we aren’t actually anchored yet because the .target is just like any other element that participates in the normal document flow. We have to yank it out with absolute positioning for the inset properties to take hold.

.target {
  position: absolute;

  top: anchor(--anchor-1 bottom);
  left: anchor(--anchor-1 right);
  bottom: anchor(--anchor-2 top);
  right: anchor(--anchor-2 left);
}

In his demo, Chris cleverly attaches the .target to two