<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

npm install vue-i18n
// or
yarn add vue-i18n

vue add i18n

vue add i18n

{
  "message": "hello i18n !!"
}

<p> {{ $t('message') }}

<i18n>
{
  "en": {
    "hello": "Hello i18n in SFC!"
  }
}
</i18n>

<template>
  <div>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

<template>
  <section>
    <h1>{{$t('formattingTitle')}}</h1>
    <p v-show="showMessage">{{ $t('hello', {name: name}) }}</p>
    <form @submit.prevent="showMessage = true">
      <label for="name">{{ $t('name') }}</label>
      <input type="text" name="name" id="name" v-model="name" />
      <input type="submit" :disabled="name.length < 1" value="send" />
      <label for="hideMessage" v-if="showMessage">
        <input type="checkbox" name="hideMessage" id="hideMessage" v-model="showMessage" /> Show Message
      </label>
    </form>
  </section>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      showMessage: false
    };
  }
};
</script>
<style>
form {
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
}
label {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 5px;
}
input[type="text"] {
  width: 100%;
  height: 30px;
  border-radius: 3px;
  border: 1px solid #eee;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
input[type="submit"] {
  width: 80px;
  height: 30px;
  border-radius: 3px;
  border: 0;
}
</style>

{
  "formattingTitle": "How to format your texts",
  "name": "What is your Name?",
  "hello": "Hi {name}, today is a good day"
}

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/formatting',
      name: 'formatting',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import( /* webpackChunkName: "format" */ './views/formatting.vue')
    }
  ]
})

{
  "htmlText": "<h1>HTML Rocks ❤❤</h1>"
}

<div v-html="$t('htmlText')"></div>

locale abbrevation + json
//eg en.json, fr.json, ru.json, de.json

<p>{{ $t('hello', 'de') }} </p>

console.log(this.$i18n.locale)
// prints 'en.json' because 'en' is my selected locale
this.$i18n.locale = 'de'
// sets your locale to 'de'

{
  "home": "Zuhause",
  "formatting": "Formatieren Sie Ihre Texte",
  "formattingTitle": "So formatieren Sie Ihre Texte",
  "name": "Wie heißen Sie?",
  "hello": "Hallo {name}, heute ist ein guter Tag",
  "htmlText": "
HTML Rocks ❤❤
"
}

<template>
  <section>
    <!-- existing div element -->
    <div v-html="$t('htmlText')"></div>
    <button @click="switchLocale">Switch to {{locale}}</button>
  </section>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      showMessage: false,
      locale: "Deutsch"
    };
  },
  methods: {
    switchLocale() {
      this.$i18n.locale = this.locale === "English" ? "en" : "de";
      this.locale = this.$i18n.locale === "en" ? "Deutsch" : "English";
    }
  }
};
</script>

  {
  "fallbackLocale": "Fallback Localization",
  "placeholder": "This is the fallback text"
}

{
  "fallbackLocale": "Fallback-Lokalisierung"
}

<template>
  <section>
    <!-- last button -->
    <button @click="switchLocale">Switch to {{locale}}</button>
    <div>
      <h1>{{ $t('fallbackLocale') }}</h1>
    </div>
    
  </section>
</template>
</style>

{
  "developer": "no developer | one developer | {n} developers"
}

<p>{{ $tc('developer', 0) }}</p>
<p>{{ $tc('developer', 1) }}</p>
<p>{{ $tc('developer', 2) }}</p>

<i18n>
{
  "en": {
    "hello": "Hello, {name}, this is i18n in SFC!",
    "greetings": "Component-Based Localization",
    "placeholder": "This is a component-based fallback text"
  }
}
</i18n>

<template>
  <div>
    <h1>{{ $t("greetings") }}</h1>
    <p v-if="name.length > 0">{{ $t('hello', {name: name }) }}</p>
    <p>{{ $t('placeholder') }}</p>
  </div>
</template>
<script>
export default {
  name: "HelloI18n",
  props: ["name"]
};
</script>

<script>
// @ is an alias to /src
import HelloI18n from "@/components/HelloI18n.vue";
export default {
  // existing code
  components: {
    HelloI18n
  }
};

<template>
  <section>
    <!-- existing code -->
    <HelloI18n :name="name" />
  </section>
</template>

A CSS methodology from Andy Bell:

The most important part of this methodology is the language itself: CSS. It’s key to note its existence in the name because some alternative approaches, such as BEM—which I have enjoyed for many years—can veer very far away from Cascading Style Sheets. I love CSS, though and think that its core capabilities are actually key to scalable CSS.

A favorite bit…

[…] a design system doesn’t just make you think at a micro-level, but also at a macro-level, because you have to make not just decisions about pixels, but also high-level organisation decisions which the design system helps to solve. Design system work is actually diplomacy work, a lot of the time.

This is often where I see narrow, component-only tunnel vision fall short and really, these approaches are less design systems, but more component libraries that solve a much narrower cohort of problems.

I like the idea of approaching CSS both from an inside-out philosophy — focusing on styling very small specific things then grouping them together to grow bigger thing — and from an outside-in philosophy — not forgetting that components need to be composed together sensibly.

Direct Link to Article — Permalink

The post CUBE CSS appeared first on CSS-Tricks.

Here’s a two-second review. If an element has an ID, you can link to it with natural browser behavior. It’s great if headings have them, because it’s often useful to link directly to a specific section of content.

<h3 id="step-2">Step 2</a>

Should I be so inclined, I could link right to this heading, be it from an URL, like https://my-website.com/#step-2, or an on-page link, like:

<a href="#step-2">Jump to Step 2</a>

So, it’s ideal if all headers have unique IDs.

I find it entirely too much work to manually add IDs to all my headers though. For years and years, I did it like this using jQuery on this very site (sue me):

// Adjust this for targetting the headers important to have IDs
const $headers = $(".article-content > h3");

$headers.each((i, el) => {
  const $el = $(el);

  // Probably a flexbox layout style page
  if ($el.has("a").length != 0) {
    return;
  }

  let idToLink = "";

  if ($el.attr("id") === undefined) {
    // give it ID
    idToLink = "article-header-id-" + i;
    $el.attr("id", idToLink);
  } else {
    // already has ID
    idToLink = $el.attr("id");
  }

  const $headerLink = $("<a />", {
    html: "#",
    class: "article-headline-link",
    href: "#" + idToLink
  });

  $el.addClass("has-header-link").prepend($headerLink);
});

That script goes one step further than just adding IDs (if it doesn’t already have one) by adding a # link right inside the heading that links to that heading. The point of that is to demonstrate that the headers have IDs, and makes it easy to do stuff like right-click copy-link. Here’s that demo, if you care to see it.

Problem! All the sudden this stopped working.

Not the script itself, that works fine. But the native browser behavior that allows the browser to jump down to the heading when the page loads is what’s busted. I imagine it’s a race condition:

1. The HTML arrives
2. The page starts to render
3. The browser is looking for the ID in the URL to scroll down to
4. It doesn’t find it…
5. Oh wait there it is!
6. Scroll there.

The Oh wait there it is! step is from the script executing and putting that ID on the heading. I really don’t blame browsers for not jumping to dynamically-inserted links. I’m surprised this worked for as long as it did.

It’s much better to have the IDs on the headings by the time the HTML arrives. This site is WordPress, so I knew I could do it with some kind of content filter. Turns out I didn’t even have to bother because, of course, there is a plugin for that: Karolína Vysko?ilová‘s Add Anchor Links. Works great for me. It’s technique is that it adds the ID on the anchor link itself, which is also totally fine. I guess that’s another way of avoiding messing with existing IDs.

If I didn’t have WordPress, I would have found some other way to process the HTML server-side to make sure there is some kind of heading link happening somehow. There is always a way. In fact, if it was too weird or cumbersome or whatever to do during the build process or in a server-side filter, I would look at doing it in a service worker. I’ve been having fun playing with Cloudflare’s HTMLRewriter, which is totally capable of this.

The post On Adding IDs to Headers appeared first on CSS-Tricks.

I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

But the above is just text. I wanted to do this with a semantic

element.

The easy way

This can be done using HTML’ s reversed property on the

:

<ol reversed>
  <li>This</li>
  <li>List</li>
  <li>Will Be</li>
  <li>Numbered In</li>
  <li>Reverse</li>
</ol>

For most people, this would be enough. Job done.

But I needed custom styles for the counters.

Let it be known that custom list number styles can be done with the ::marker pseudo-element, but that isn’t yet supported by Chrome (although I hear it’s coming soon).

Because I wanted fully cross-browser compatible custom number styles, I went with custom counters.

Adding and styling a custom counter

Styling the counters of an ordered list differently from the rest of the list requires disabling the default counters and creating and show our own using CSS Counters. Chris shared a few recipes a while back that are worth checking out.

Assuming we have the following HTML:

<ol class="fancy-numbered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

…we first need to disable the default counters that come with all ordered lists by setting the CSS property list-style-type to none like so:

ol.fancy-numbered {
  list-style-type: none;
}

That takes out all the default numbering. Next, we create a counter in CSS to track the number of items in the list.

ol.fancy-numbered {
  list-style-type: none;
  counter-reset: a;
}

This gives us a counter named “a” but it can be called it whatever you like. Let’s display our counter using the ::before pseudo-element on the list item (

1. ).

   ol.fancy-numbered li::before {
     content: counter(a)'.';
   }

   This will set the content of the pseudo-element to the value of our counter. Right now, that will print 1’s next to your list item.

   We need to tell the CSS counter how to increment.

   ol.fancy-numbered li::before {
     content: counter(a)'.';
     counter-increment: a;
   }

   The starting value of “a” is zero, which seems weird, but the default increment is 1, meaning that becomes the actual starting point. Incrementing up by 1 just happens to be the default, but we can change that as we’ll soon see.

   We can now proceed to apply any custom styles we want to the counter, because the counter is just a text pseudo-element that is wide open to styling:

   ol.fancy-numbered li::before {
     content: counter(a)'.';
     counter-increment: a;   
     position: absolute;   
     left: 0;   
     color: blue;   
     font-size: 4rem;
   }

   For example, here, we’ve made the counter color blue and increased the font size. These are things that we couldn’t do using the default counter.

   Reversing custom counters

   If we add the reversed property to the

   element like we did before, we will observe no effect because we disabled the default numbering. That’s just what this property does.

   <ol class="fancy-numbered" reversed>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ol>

   The code above has no effect on our custom numbering. It’s still probably a good idea to leave it on there, since our intention is to reverse the list. This keeps things semantically accurate.

   To reverse the visual order of our counter-based numbering, we need to know the total number of items in the list and instruct the counter to start from that number and then decrement from there.

   ol.fancy-numbered {
     counter-reset: a 4;
     list-style-type: none;
   }

   Here, we’re setting counter-reset to 4. In other words, we’re telling the browser to start the count at 4 instead of 1. We use 4 instead of 3, again, because the counter() rule is applied to the first item on the list, which is 0. But, in the case where we’re counting backwards, 4 becomes our 0. If we started from 3 and decremented, wind up at 0 instead of 1.

   Next, we alter our counter-increment rule to decrease by 1 rather than increase, by making it a negative integer.

   ol.fancy-numbered li:before {
     content: counter(a)'.';
     counter-increment: a -1;
     position: absolute;   
     left: 0;   
     color: blue;   
     font-size: 4rem;
   }

   And that’s it! Now the world is your oyster for stuff like step trackers:

   CodePen Embed Fallback

   Or how about a timeline:

   CodePen Embed Fallback

   Maybe a business plan?

   CodePen Embed Fallback

   The post How to Reverse CSS Custom Counters appeared first on CSS-Tricks.

After the recent pandemic challenge, the planet is entering a new age. During a lockdown, we have faced many technology disruptions that reminded us once again about the importance of massive digital transformation. The post-Coronavirus world is now challenging the status quo and rethinking different industries. The design is not an exception.

That period has let all of us feel a slight touch of the undeniable future that is fastly rushing to us. The sunrise of tech innovations, the dominance of urbanism in our lives, and the desire to breathe in unison with the future — all these factors have created a perfect environment for the birth of new graphic design trends and a blast of the past futuristic tendencies. Here we’re introducing the five digital design trends that are predicted to gain momentum soon.

Cyberpunk Renaissance

The intriguing beauty of cyberpunk is hidden in the fact that most of us forecast that this style might become part of our everyday reality very soon. Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting. It implies a mind-blowing combination of high-tech and a “low-life.” We have witnessed the popularity of cyberpunk after the turn of the millennium. Today, we experience the next wave of cyberpunk in graphic design. The cyberpunk renaissance is here right now.

Today, we can see that many companies in various industries make their brand identity designs (a logo, branding colors, and marketing visuals) based on the cyberpunk aesthetics that is often associated with innovation and extraordinary approaches to things. It helps them build a positive online image, instill desired associations with a brand, and acquire new customers.

Cyberpunk doesn’t necessarily include flying smart cars, urban dystopias, illuminated skyscrapers, etc. Some of the modern graphic designers reimagine logos, branding design, and illustrations via a prism of cyberpunk by incorporating just slight hints at this style, like a bold color palette, digitally enhanced fonts, and extraordinary layouts. Also, we often associate cyberpunk with the Akira-Esque illustrations, the active use of neons, a futuristic glitch effect, and the imitation of metals in design. A pinch of cyberpunk can make your digital business presence even more memorable and distinctive. Let’s take a look at these graphic design examples featuring cyberpunk aesthetics.

Brutalism: Honesty and Unusual Beauty

Inspired by rough shapes of brutalist architecture, modern designers have started using this style in graphic design. Brutalism looks stark, menacing, and reminds us that there is nothing immortal or persistent in the whole Universe. A lot of brutalist designs are striving to depict the pure beauty of things without excessive decorations. Brutalism is penetrated by motifs that show us that everything is exposed to natural destruction and must be used efficiently and at the right moment.

Brutalism is often associated with simplicity, boldness, and honesty. That’s why brands that aim to emphasize these aspects in their images and reputation, use brutalism for logo design and website design. When incorporating brutalism in design, companies mostly try to let their customers know that they are ready to give up all the unnecessary restrictions and start open and honest communication with their audiences. They are ready to listen to their needs and offer relevant solutions.

Back to the Future with Steampunk

Steampunk is the next amazing subgenre of science fiction that is expected to find its reflection is graphic design. It’s a retro-meets-future style that inspires us to imagine new worlds where the past epochs are blended with the futuristic aesthetics into an engaging combination of the incompatible. This style shows us the future from the retro perspective and reveals the beauty of vintage flying apparatus, gears, timepieces, and mechanisms. These motifs are the most often used in steampunk designs. This trend is commonly associated with copper and brass, as well as a warm ochre color palette.

Even though this style hasn’t been very popular in recent years, it has gained a second life this year. Today, steampunk is one of the most incredible and loved trends gaining momentum in graphic design 2020. The brands love to use steampunk because it feels more human, warmer, and familiar to our minds than cold cyberpunk. Although it still teases our perception with an extraordinary mix of the future and past in a single style. Due to its mood and color spectrum, steampunk is usually associated with a feeling of community, adventures, ardor, and traveling through various epochs and dimensions.

Ultra-Thin Geometry Aesthetics

The line is a fundamental element of any graphic object, defining its shape, nature, and even mood. This year sees how the stability of straight lines combines with an ethereal feeling of curves and round forms, creating a new style. Ultra-thin geometry has already become widely used by designers in industrial design, digital graphics art, and web design.

Geometric, artificially created lines depict objects from the technological and “human-made” world, while curves often reveal the beauty of nature and organic shapes. The ultra-thin geometry is elegant, abstract, and minimalist. It is mentioned here along with the future-oriented styles since its designs are usually associated with technology innovations and futuristic concepts. The ultra-thin geometry is difficult-to-create without computer assistance. That’s probably why it’s so loved by industrial branding designers and a tech industry.

Biopunk: Biotechnology + Cyberpunk

Biopunk is one more sci-fi subgenre featuring the combination of biotechnology and cyberpunk. Science fiction talks a lot about cyborgs, transhumanism, and millions of other ways biological beings can be augmented by emerging technologies in the future. Biopunk is actually a style that demonstrates these ideas the most narratively.

It is one of the futuristic styles that show how our lives may look like soon. Biopunk is characterised by a prevailing green palette and unbelievable scenarios of the post-apocalyptic world reviving after the ecological catastrophe or invasion of aliens. Today, many companies and environmental organizations use biopunk in their branding and marketing materials as a style that reminds everyone of the importance of caring about the health of our planet. Although biopunk hasn’t been massively known and used in recent years, its popularity is fast-rising today.

Conclusion

Here we’ve outlined major futuristic trends that will span the digital world this year. Most of these graphic design styles reflect the upcoming reality as well as our vision of the future. Cyborgs, a combination of biology and technology, vintage flying cars, innovative line-art designs, neon-illuminated skyscrapers, and many more incredible things are awaiting us in 2020. Hopefully, these insights will inspire you to use new amazing designs that will help your company build an image of the brand that keeps abreast of the latest innovations.

After the recent pandemic challenge, the planet is entering a new age. During a lockdown, we have faced many technology disruptions that reminded us once again about the importance of massive digital transformation. The post-Coronavirus world is now challenging the status quo and rethinking different industries. The design is not an exception.

That period has let all of us feel a slight touch of the undeniable future that is fastly rushing to us. The sunrise of tech innovations, the dominance of urbanism in our lives, and the desire to breathe in unison with the future — all these factors have created a perfect environment for the birth of new graphic design trends and a blast of the past futuristic tendencies. Here we’re introducing the five digital design trends that are predicted to gain momentum soon.

Cyberpunk Renaissance

The intriguing beauty of cyberpunk is hidden in the fact that most of us forecast that this style might become part of our everyday reality very soon. Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting. It implies a mind-blowing combination of high-tech and a “low-life.” We have witnessed the popularity of cyberpunk after the turn of the millennium. Today, we experience the next wave of cyberpunk in graphic design. The cyberpunk renaissance is here right now.

Today, we can see that many companies in various industries make their brand identity designs (a logo, branding colors, and marketing visuals) based on the cyberpunk aesthetics that is often associated with innovation and extraordinary approaches to things. It helps them build a positive online image, instill desired associations with a brand, and acquire new customers.

Cyberpunk doesn’t necessarily include flying smart cars, urban dystopias, illuminated skyscrapers, etc. Some of the modern graphic designers reimagine logos, branding design, and illustrations via a prism of cyberpunk by incorporating just slight hints at this style, like a bold color palette, digitally enhanced fonts, and extraordinary layouts. Also, we often associate cyberpunk with the Akira-Esque illustrations, the active use of neons, a futuristic glitch effect, and the imitation of metals in design. A pinch of cyberpunk can make your digital business presence even more memorable and distinctive. Let’s take a look at these graphic design examples featuring cyberpunk aesthetics.

Brutalism: Honesty and Unusual Beauty

Inspired by rough shapes of brutalist architecture, modern designers have started using this style in graphic design. Brutalism looks stark, menacing, and reminds us that there is nothing immortal or persistent in the whole Universe. A lot of brutalist designs are striving to depict the pure beauty of things without excessive decorations. Brutalism is penetrated by motifs that show us that everything is exposed to natural destruction and must be used efficiently and at the right moment.

Brutalism is often associated with simplicity, boldness, and honesty. That’s why brands that aim to emphasize these aspects in their images and reputation, use brutalism for logo design and website design. When incorporating brutalism in design, companies mostly try to let their customers know that they are ready to give up all the unnecessary restrictions and start open and honest communication with their audiences. They are ready to listen to their needs and offer relevant solutions.

Back to the Future with Steampunk

Steampunk is the next amazing subgenre of science fiction that is expected to find its reflection is graphic design. It’s a retro-meets-future style that inspires us to imagine new worlds where the past epochs are blended with the futuristic aesthetics into an engaging combination of the incompatible. This style shows us the future from the retro perspective and reveals the beauty of vintage flying apparatus, gears, timepieces, and mechanisms. These motifs are the most often used in steampunk designs. This trend is commonly associated with copper and brass, as well as a warm ochre color palette.

Even though this style hasn’t been very popular in recent years, it has gained a second life this year. Today, steampunk is one of the most incredible and loved trends gaining momentum in graphic design 2020. The brands love to use steampunk because it feels more human, warmer, and familiar to our minds than cold cyberpunk. Although it still teases our perception with an extraordinary mix of the future and past in a single style. Due to its mood and color spectrum, steampunk is usually associated with a feeling of community, adventures, ardor, and traveling through various epochs and dimensions.

Ultra-Thin Geometry Aesthetics

The line is a fundamental element of any graphic object, defining its shape, nature, and even mood. This year sees how the stability of straight lines combines with an ethereal feeling of curves and round forms, creating a new style. Ultra-thin geometry has already become widely used by designers in industrial design, digital graphics art, and web design.

Geometric, artificially created lines depict objects from the technological and “human-made” world, while curves often reveal the beauty of nature and organic shapes. The ultra-thin geometry is elegant, abstract, and minimalist. It is mentioned here along with the future-oriented styles since its designs are usually associated with technology innovations and futuristic concepts. The ultra-thin geometry is difficult-to-create without computer assistance. That’s probably why it’s so loved by industrial branding designers and a tech industry.

Biopunk: Biotechnology + Cyberpunk

Biopunk is one more sci-fi subgenre featuring the combination of biotechnology and cyberpunk. Science fiction talks a lot about cyborgs, transhumanism, and millions of other ways biological beings can be augmented by emerging technologies in the future. Biopunk is actually a style that demonstrates these ideas the most narratively.

It is one of the futuristic styles that show how our lives may look like soon. Biopunk is characterised by a prevailing green palette and unbelievable scenarios of the post-apocalyptic world reviving after the ecological catastrophe or invasion of aliens. Today, many companies and environmental organizations use biopunk in their branding and marketing materials as a style that reminds everyone of the importance of caring about the health of our planet. Although biopunk hasn’t been massively known and used in recent years, its popularity is fast-rising today.

Conclusion

Here we’ve outlined major futuristic trends that will span the digital world this year. Most of these graphic design styles reflect the upcoming reality as well as our vision of the future. Cyborgs, a combination of biology and technology, vintage flying cars, innovative line-art designs, neon-illuminated skyscrapers, and many more incredible things are awaiting us in 2020. Hopefully, these insights will inspire you to use new amazing designs that will help your company build an image of the brand that keeps abreast of the latest innovations.

In digital marketing, tracking campaign success is easy. There is a wide range of analytics tools that will help you measure the performance of your SEO, PPC, email marketing, and social media marketing campaigns.

Still, you should not underestimate the power of traditional marketing. According to BrightLocal, 60% of customers say they would call a local business on the phone after finding them online. On the other hand, 16% would send an email, 15% would visit the business location, while only 3% would contact a brand via social networks.

Phone calls are more important than you think. They often generate more leads and convert faster than online marketing channels.

Unfortunately, many businesses still do not track their calls, meaning they cannot attribute leads and conversions to specific marketing campaigns.

That is exactly where phone call tracking steps in, helping you understand what online and offline marketing tactics encouraged a customer to pick up the phone.

Here are a few simple tips on how to improve your marketing efforts with call tracking.

Choose Call Tracking Tools that Meet your Needs

With the right call tracking tool, you can measure the effectiveness of your online and offline marketing campaigns and make data-driven decisions in the future.

For starters, switch from a landline to VoIP (Voice Over Internet Protocol) services. Unlike a traditional landline, VoIP uses internet connections. Apart from being more affordable, it offers many additional features, including call tracking. Some of the best VoIP service providers let you record, track, analyze, and rate customers’ calls. With this kind of data, it will be easier for you to assess the effectiveness of your customer service and understand what media channels are driving customers’ calls. Additionally, you can also see specific data on each call, such as its start time, end time, call duration, caller’s location, etc.

Given that, it is not surprising that the VoIP market will continue to grow. According to the 2019 report by Global Market Insights, the global VoIP market share will reach $55 billion by 2025.

Alternatively, you could choose a call tracking software for your business, such as Phonewagon, CallRetail, or WhatConverts. Call tracking tools identify the source of each phone call, be it social networks, paid ads, or traditional marketing channels, letting you measure their effectiveness. They offer many advanced features, such as:

• Static call tracking
• Dynamic call tracking
• Campaign tracking
• Keyword tracking
• Call recordings

Track the Right Metrics

To track calls and audit the effectiveness of your marketing campaigns, you first need to choose the right KPIs to measure, such as:

• Analyze the overall call volume – tells you how many calls you generated over a reporting period. When compared with the leads generated and sales made, this KPI will show how effective your marketing efforts are.
• Measure what devices and channels customers’ calls are coming in from. Many call tracking tools let you see how many calls were made from organic, paid, referral, or social media traffic.
• Measure call attribution by keywords – apart from using keywords to improve rankings and traffic, you can use them to boost phone calls, as well. When knowing what phrases are driving your calls and conversions, you will know how to adapt your PPC campaigns according to them.
• The total duration of calls – longer calls often indicate that users are engaged. A customer would not waste their time chatting with you if they are not interested in buying your products. By tracking the total length of your calls, you will know what campaigns, channels, keywords, and ads are generating the most qualified leads.
• Track missed calls. If a customer is held on hold or their call is transferred to voicemail, chances are they will end the phone call and never call you again. For your business, this means a lost lead. To avoid that, you should capture every missed call. That is exactly where Google Ads steps in. It helps you see call details, such as its start time, end time, status, caller’s area code, call type, etc.

Measure your ROI

Your goal is to measure the revenue generated by phone calls. There are a few tactics you could use. For starters, you could track calls from call-only ads or calls made from your website’s CTA buttons or links. Additionally, you could set a minimum call length for each call – each call that lasts longer than that will be considered a conversion.

By applying these tactics, you will understand what types of calls convert, what revenue they generate, and whether your call tracking practices are paying off.

Conclusions

If you think that phone calls are dead, you are wrong. They still help you drive leads to your business. That is why you should start tracking your calls to understand what online and offline marketing tactics resonate with your customers and convert faster. Only this way will you be able to adapt your marketing campaigns to your target audience’s needs and maximize sales.

Companies are living organisms. As such, they are subject to internal and external influences. And if unexpected events can end up with large companies, imagine those that have a smaller structure. Small and medium-sized companies are even more vulnerable to market effects, for example.

In a world with more and more uncertainties, managers face the challenge of verifying the extent to which these uncertainties interfere with this generation of value, causing damage to the business reputation and to the segment in which it operates.

Uncertainties can generate both risks and opportunities. They can add or decrease. In this sense, Enterprise Risk Management allows managers to address risks and maximize opportunities, thereby adding even more value to the business.

We are tired of hearing that what is not measured cannot be controlled, right? By measuring and using risk analysis techniques, the company achieves a balance between growth and ROI goals, always respecting strategic planning.

And if Risk Management allows you to calculate threats, assess risks and establish action plans to get around all of this, you will agree with the following: the company that does the risk management has more credibility in the market and among customers and partners.

5 reasons to use a Risk Management process

Studying the types of risks of a project is so important for your business, that to leave no doubt we have separated 5 main reasons why your company needs to do Risk Management:

1. Capital optimization

Nothing like knowing where you are stepping. The correct information regarding possible business risks allows administrators and controllers to accurately calculate capital needs. In addition, they will have more capacity to optimize the allocation of that capital.

2. Better responses to risks

With a rigorous identification of risks, it is more efficient to select the answers to these risks (How to avoid? How to mitigate? etc.

3. Reduction of operating losses

Since the potential risks have been identified, no one will be taken by surprise. Having the information in a risk management plan, the chances of reducing the associated losses are much greater.

4. Taking advantage of opportunities

Remember the story that the glass can be half empty or half full? Precisely because it considers several potential risks, the company can anticipate and have a more proactive use of opportunities.

5. Increased profitability

Enterprise Risk Management helps to optimize capital, reduces the risk of operating losses, and prevents loss of resources. This means that in the end profitability will be positively impacted.

How Risk Management works in SMEs

We talked about the vulnerability of small and medium-sized companies to external effects. If the vulnerability is greater, SMEs win by having leaner processes. Therefore, the implementation of a Risk Management system becomes easier.

Among the benefits achieved by Risk Management in an SME is the integration and automation of controllership. As a result, the failures in the relationship with the tax authorities decrease and the company avoids fines and excessive expenses. In addition, the dependence on third parties, such as accountants and auditors, also decreases.

Risk Management in SMEs

As the Risk Management plan also works to improve processes, the company benefits from the combination of reducing operating costs and increasing operational efficiency. But, if everything that has been said so far has not convinced you, we have separated some more benefits:

Integrated financial information, control over the company’s operations, reduction of costs and fraud, optimization of the information flow, accurate and available information in real-time, and elimination of rework.

With all this list of benefits (which by the way can be even greater), we can say that people management and the quality of products and services increase the competitive power of the business. Therefore, it is through management improvements – such as standardized processes and information security, for example – that the company gains in competitiveness.

The advantages are many, but we know that everything new can be a bit of work. That is why it is essential that, when deciding to implement a Risk Management system in an SME, management is fully involved and plays the role of motivators and disseminators of the benefits of this good practice.

Photo by Cristofer Jeschke on Unsplash

/* install react app globally */
npm install -g create-react-app

/* create the app in your new directory */
create-react-app face-detect

/* move into your new react directory */
cd face-detect

/* start development sever */
npm start

FACE-DETECT TEMPLATE
├── node_modules
├── public 
├── src
├── .gitignore
├── package-lock.json
├── package.json
├── README.md

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  render() {
    return (
      

      
    );
  }
}
export default App;

.App {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
}

# install tachyons into your project
npm install tacyons

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
// add tachyons below into your project, note that its only the line of code you adding here
import "tachyons";

ReactDOM.render(<App />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  -webkit-font-smoothing: antialiased;
  -Moz-osx-font-smoothing: grayscale;
  background: #485563; /* fallback for old browsers */
  background: linear-gradient(
    to right,
    #29323c,
    #485563
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
button {
  cursor: pointer;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

src/Components TEMPLATE

├── src
  ├── Components 
    ├── FaceDetect
      ├── FaceDetect.css 
      ├── FaceDetect.js 
    ├── ImageSearchForm
      ├── ImageSearchForm.css 
      ├── ImageSearchForm.js

import React, { Component } from "react";
import "./App.css";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// import FaceDetect from "./components/FaceDetect/FaceDetect";

class App extends Component {
  render() {
    return (
      <div className="App">
        <ImageSearchForm />
        {/* <FaceDetect /> */}
      </div>
    );
  }
}
export default App;

import React from "react";
import "./ImageSearchForm.css";

// imagesearch form component

const ImageSearchForm = () => {
  return (
    <div className="ma5 to">
      <div className="center">
        <div className="form center pa4 br3 shadow-5">
          <input className="f4 pa2 w-70 center" type="text" />
          <button className="w-30 grow f4 link ph3 pv2 dib white bg-blue">
            Detect
          </button>
        </div>
      </div>
    </div>
  );
};
export default ImageSearchForm;

.form {
  width: 700px;
  background: radial-gradient(
      circle,
      transparent 20%,
      slategray 20%,
      slategray 80%,
      transparent 80%,
      transparent
    ),
    radial-gradient(
        circle,
        transparent 20%,
        slategray 20%,
        slategray 80%,
        transparent 80%,
        transparent
      )
      50px 50px,
    linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px,
    linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0;
  background-color: slategray;
  background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

/* To start development server again */
npm start

/* Install the client from npm */
npm install clarifai

import React, { Component } from "react";
// Import Clarifai into our App
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// Uncomment FaceDetect Component
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css";

// You need to add your own API key here from Clarifai.
const app = new Clarifai.App({
  apiKey: "ADD YOUR API KEY HERE",
});

class App extends Component {
  // Create the State for input and the fectch image
  constructor() {
    super();
    this.state = {
      input: "",
      imageUrl: "",
    };
  }

// setState for our input with onInputChange function
  onInputChange = (event) => {
    this.setState({ input: event.target.value });
  };

// Perform a function when submitting with onSubmit
  onSubmit = () => {
        // set imageUrl state
    this.setState({ imageUrl: this.state.input });
    app.models.predict(Clarifai.FACE_DETECT_MODEL, this.state.input).then(
      function (response) {
        // response data fetch from FACE_DETECT_MODEL 
        console.log(response);
        /* data needed from the response data from clarifai API, 
           note we are just comparing the two for better understanding 
           would to delete the above console*/ 
        console.log(
          response.outputs[0].data.regions[0].region_info.bounding_box
        );
      },
      function (err) {
        // there was an error
      }
    );
  };
  render() {
    return (
      <div className="App">
        // update your component with their state
        <ImageSearchForm
          onInputChange={this.onInputChange}
          onSubmit={this.onSubmit}
        />
        // uncomment your face detect app and update with imageUrl state
        <FaceDetect imageUrl={this.state.imageUrl} />
      </div>
    );
  }
}
export default App;

import React from "react";
import "./ImageSearchForm.css";
// update the component with their parameter
const ImageSearchForm = ({ onInputChange, onSubmit }) => {
  return (
    <div className="ma5 mto">
      <div className="center">
        <div className="form center pa4 br3 shadow-5">
          <input
            className="f4 pa2 w-70 center"
            type="text"
            onChange={onInputChange}    // add an onChange to monitor input state
          />
          <button
            className="w-30 grow f4 link ph3 pv2 dib white bg-blue"
            onClick={onSubmit}  // add onClick function to perform task
          >
            Detect
          </button>
        </div>
      </div>
    </div>
  );
};
export default ImageSearchForm;

import React from "react";
// Pass imageUrl to FaceDetect component
const FaceDetect = ({ imageUrl }) => {
  return (
  # This div is the container that is holding our fetch image and the face detect box
    <div className="center ma">
      <div className="absolute mt2">
                        # we set our image SRC to the url of the fetch image 
        <img alt="" src={imageUrl} width="500px" heigh="auto" />
      </div>
    </div>
  );
};
export default FaceDetect;

bottom_row: 0.52811456
left_col: 0.29458505
right_col: 0.6106333
top_row: 0.10079138

import React, { Component } from "react";
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css";

// You need to add your own API key here from Clarifai.
const app = new Clarifai.App({
  apiKey: "ADD YOUR API KEY HERE",
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: "",
      imageUrl: "",
      box: {},  # a new object state that hold the bounding_box value
    };
  }

  // this function calculate the facedetect location in the image
  calculateFaceLocation = (data) => {
    const clarifaiFace =
      data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById("inputimage");
    const width = Number(image.width);
    const height = Number(image.height);
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - clarifaiFace.right_col * width,
      bottomRow: height - clarifaiFace.bottom_row * height,
    };
  };

  /* this function display the face-detect box base on the state values */
  displayFaceBox = (box) => {
    this.setState({ box: box });
  };

  onInputChange = (event) => {
    this.setState({ input: event.target.value });
  };

  onSubmit = () => {
    this.setState({ imageUrl: this.state.input });
    app.models
      .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)
      .then((response) =>
        # calculateFaceLocation function pass to displaybox as is parameter
        this.displayFaceBox(this.calculateFaceLocation(response))
      )
      // if error exist console.log error
      .catch((err) => console.log(err));
  };

  render() {
    return (
      <div className="App">
        <ImageSearchForm
          onInputChange={this.onInputChange}
          onSubmit={this.onSubmit}
        />
        // box state pass to facedetect component
        <FaceDetect box={this.state.box} imageUrl={this.state.imageUrl} />
      </div>
    );
  }
}
export default App;

import React from "react";
// add css to style the facebox
import "./FaceDetect.css";
// pass the box state to the component

const FaceDetect = ({ imageUrl, box }) => {
  return (
    <div className="center ma">
      <div className="absolute mt2">
            /* insert an id to be able to manipulate the image in the DOM */
        <img id="inputimage" alt="" src={imageUrl} width="500px" heigh="auto" />
       //this is the div displaying the faceDetect box base on the bounding box value 
      <div
          className="bounding-box"
          // styling that makes the box visible base on the return value
          style={{
            top: box.topRow,
            right: box.rightCol,
            bottom: box.bottomRow,
            left: box.leftCol,
          }}
        ></div>
      </div>
    </div>
  );
};
export default FaceDetect;

.bounding-box {
  position: absolute;
  box-shadow: 0 0 0 3px #fff inset;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using the idea of hard stops. But stripes can be boring, too. Too conventional, out of fashion, and sometimes even unpleasant.

Thankfully, we can conjure up far more background patterns than you can even imagine with CSS, with code that is similar in spirit to stripes.

Background patterns are images repeated across a background. They can be done by referencing an external image, like a PNG file, or can be drawn with CSS, which is traditionally done using CSS gradients.

Linear gradients (and repeating linear gradients) for instance, are typically used for stripes. But there are other ways to create cool background patterns. Let’s see how we can use gradients in other ways and toss in other things, like CSS shapes and emoji, to spice things up.

Gradient patterns

There are three types of CSS gradients.

1. linear-gradient(): Colors flow from left-to-right, top-to-bottom, or at any angle you choose in a single direction.
2. radial-gradient(): Colors start at a single point and emanate outward
3. conic-gradient(): Similar in concept to radial gradients, but the color stops are placed around the circle rather than emanating from the center point.

I recommend checking out the syntax for all the gradients to thoroughly understand how to start and end a color in a gradient.

Radial gradient patterns

Let’s look at radial gradients first because they give us very useful things: circles and ellipses. Both can be used for patterns that are very interesting and might unlock some ideas for you!

background: radial-gradient(<gradient values>)

Here’s a pattern of repeating watermelons using this technique:

background: 
	radial-gradient(circle at 25px 9px, black 2px, transparent 2px), 
	radial-gradient(circle at 49px 28px, black 2px, transparent 2px), 
	radial-gradient(circle at 38px 1px, black 2px, transparent 2px), 
	radial-gradient(circle at 20px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 80px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 50px 10px, black 2px, transparent 2px), 
	radial-gradient(circle at 60px 16px, black 2px, transparent 2px), 
	radial-gradient(circle at 70px 16px, black 2px, transparent 2px), 
	radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) 
	white;
background-size: 100px 50px;

We start by providing a background size on the element then stack up the gradients inside it. An ellipse forms the green and red parts. Black circles are scattered across to represent the watermelon seeds.

The first two parameters for a radial gradient function determine whether the gradient shape is a circle or an ellipse and the starting position of the gradient. That’s followed by the gradient color values along with the start and ending positions within the gradient.

Conic gradient patterns

Conic gradients create ray-like shapes. Like linear and radial gradients, conic gradients can be used to create geometric patterns.

background: conic-gradient(<gradient values>)

background: 
  conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), 
  conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;
background-size: 60px 60px;
background-color: white;

The rub with conic gradient is that it’s not supported in Firefox, at least at the time of writing. It’s always worth keeping an eye out for deeper support.

Emoji icon patterns

This is where things begin to get interesting. Rather than just using geometric patterns (as in gradients), we now use the organic shapes of emojis to create background patterns. ?

It starts with emoji icons.

Solid-color emoji patterns

We can create emoji icons by giving emojis a transparent color and text shadow.

color: transparent;
text-shadow: 0 0 black;

Those icons can then be turned into an image that can be used as a background, using SVG.

<svg>
  <foreignObject>
    <!-- The HTML code with emoji -->
  </foreignObject>
</svg>

The SVG can then be referred by the background property using data URL.

background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><!-- SVG code --></svg>");

And, voilá! We get something like this:

background: 
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><foreignObject width=%22100px%22 height=%22100px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:transparent;text-shadow: 0 0 %23e42100, -2px 2px 0 black;font-size:70px%22>🏄‍♀️</div></foreignObject></svg>"), 
    white; 
background-size: 60px 60px; 

Other than emojis, it’s also possible to draw CSS shapes and use them as patterns. Emojis are less work, though. Just saying.

Gradient-colored emoji patterns

Instead of using plain emoji icons, we can use gradient emoji icons. To do that, skip the text shadow on the emojis. Add a gradient background behind them and use background-clip to trim the gradient background to the shape of the emojis.

color: transparent;
background: linear-gradient(45deg, blue 20%, fuchsia);
background-clip: text; /* Safari requires -webkit prefix */

Then, just as before, use the combination of SVG and data URL to create the background pattern.

Translucent-colored emoji patterns

This is same as using block colored emoji icons. This time, however, we take away the opaqueness of the colors by using rgba() or hsla() values for the text shadow.

color: transparent;
text-shadow: 20px 10px rgba(0, 255, 0, .3), 
             0 0 red;

SVG-text emoji patterns

We’ve already looked at all the working methods I could think of to create background patterns, but I feel like I should also mention this other technique I tried, which is not as widely supported as I’d hoped.

I tried placing the emoji in an SVG element instead of the HTML added using . But I wasn’t able to create a solid shadow behind it in all the browsers.

background: 
  url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2270%22 fill=%22transparent%22 style=%22text-shadow: 0 0 %23e42100, -2px 2px 5px black, 0 0 6px white; ;%22>🏄‍♀️</text></svg>")

Just in case, I tried using CSS and SVG filters for the shadow as well, thinking that might work. It didn’t. I also tried using the stroke attribute, to at least create an outline for the emoji, but that didn’t work, either.

CSS element() patterns

I didn’t think of SVG when I first thought of converting emoji icons or CSS shapes into background images. I tried CSS element(). It’s a function that directly converts an HTML element into an image that can be referenced and used. I really like this approach, but browser support is a huge caveat, which is why I’m mentioning it here at the end.

Basically, we can drop an element in the HTML like this:

<div id=snake >🐍</div>

…then pass it into the element() function to use like an image on other elements, like this:

background: 
  -moz-element(#snake), /* Firefox only */
  linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px) 
  white;
background-size: 60px 60px;
background-color: white;

Now that snake emoji is technically an image that we get to include in the pattern.

Again, browser support is spotty, making this approach super experimental.

In this method, the original emoji (or any CSS shape for that matter) used for the background pattern needs to render on screen for it to appear in the background pattern as well. To hide that original emoji, I used mix-blend-mode — it sort of masks out the original emoji in the HTML so it doesn’t show up on the page.

I hope you find the methods in this post useful in one way or another and learned something new in the process! Give them a try. Experiment with different emojis and CSS shapes because gradients, while cool and all, aren’t the only way to make patterns.. The background property takes multiple values, allowing us to think of creative ways to stack things.

The post Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis appeared first on CSS-Tricks.