#look it's one thing to inspect html and find it but the other half is php and as you know | Explore Tumblr posts and blogs

trainsinanime · 3 years ago

Text

How to make a fake post

I just watched the excellent video by Sarah Z about fake made-up posts, i.e. screenshots of Tumblr posts that are clearly stupid made-up stories, except the screenshot itself is also fake. And that inspired me to do something I’ve wanted to do for a while: Make an illustrated tutorial on how to make a fake a screenshot of a tweet, Tumblr post or similar that are indistinguishable from real ones.

This works on desktop on any modern web browser, though the specific UI will look a bit different depending on which one you use.

Step 0 - if your web browser is Safari on Desktop

This step is not necessary if you’re using Firefox, Chrome, or something based on either (typically the latter) like Edge or Brave.

Open the preferences.

[Image description: Screenshot of Safari app menu open on macOS with the “Preferences…” item highlighted]

Go to “Advanced” (the last tab) and at the very bottom, make sure that “Show Develop menu in menu bar” is selected.

[Image description: Screenshot of Safari preferences window on the “Advanced” tab; the last item, a checkbox saying “Show Develop menu in menu bar”, is selected.]

Step 1 - Open an example post

I’m going to fake a tweet by myself, which you can find here: https://twitter.com/zcochrane/status/1406004939810295808

The specific tweet is irrelevant; this one is about programming and complains about how SwiftUI, a technology for developing Mac apps, is full of issues. It’s easiest to choose one that doesn’t have any hashtags.

Step 2 - Drill down

Now, right-click on the text of the tweet, and select “inspect element” or whatever menu item in your browser sounds the most like that.

[Image description: Screenshot of a random tweet by twitter user zcochrane (aka me); a word is highlighted, and a context menu is open, with the item “Inspect Element” highlighted]

This isn’t to give anyone ideas; you can assume that all the worst people on the internet already know this. That is really the key. I want to destroy your trust in screenshots of posts, especially screenshots of very weird and outlandish posts. (Note also that this isn’t the only way to do this, and it only works on desktop, but it illustrates how easy it is).

On the bottom or the side of the window, a new, complicated view will open that shows you the inner workings of the web page. You can do a lot of fun stuff here, but we don’t need a lot for our purposes.

[Image: Screenshot of a Safari window showing the same tweet, now with a blue box is lying over the text, and the bottom half of the window has a complex view of details about the text in that box and its place in the site’s internal structure.]

The important thing is the tree view on the left. If you can’t see the text of the tweet in there, click the disclosure triangle next to whatever thing is highlighted there. This should show the text directly.

[Image: Screenshot of a tree view showing various HTML elements. They are all expanded. The inner-most item is just the text of the tweet from above.]

Step 3 - Change it

Now you can just double-click on that text and enter something new.

[Image: Screenshot of the same tree view, now wider (don’t know why the window just jumped around on me). In place of the static text from last time is now a text entry box containing the words “It is impossible to fake screenshots of tweets.”]

Once you press enter or the focus moves somewhere else, the text on the website will change.

Step 4 - Take a screenshot

[Image: Screenshot of a tweet, the same one we’ve had the entire time with the same user and date, but it now says “It is impossible to fake screenshots of tweets.”]

And that’s it! If you want to do something with multiple paragraphs like your average Tumblr post, then you probably need to know a little HTML, but it’s not that hard.

For better results, you can also use the same technique to fake the time and date when the post was made, so it looks like the post was deleted - though honestly, that’s probably not worth the time and effort. And you can, of course, also change the number of likes and retweets, or for Tumblr posts, the number of notes, and other information like the user names and so on to fit whatever narrative you want to tell.

What makes this particular technique so useful is that you cannot compare pixels or whatever to prove a tweet is fake. The pixels that the screenshot grabs get generated in exactly the same way as for the real tweet. Proving that this tweet is fake is somewhere between difficult and completely impossible.

The point

This may seem like dangerous secret knowledge to some, maybe. But it’s really not that difficult, and you can assume that everyone who has more than a passing knowledge of web development (and that is a lot of people) can figure this out if they want to. (And if you’re into web development but didn’t know this yet, try it out, it’s super useful!)

In particular, you can safely assume that all the worst people in the world already know this trick and others like it. What this means is that every single screenshot ever is suspicious. Did that post really exist? There is genuinely no way of knowing, unless you find the actual post in question.

That means if you see a particularly stupid post, or a particularly offensive one, by someone you respect, or by someone you hate, or by just anyone in general, then you must always assume that it’s very possibly fake. It takes maybe ten seconds more to create a fake screenshot than to create a real one.

Not all screenshots are fake, and sometimes screenshots are the only source for something because the original was deleted, but all screenshots might be fake, and so you should tread very carefully when one is involved.

There is also an inverse to that: If you want to share a post or a tweet somewhere that you know is real, you should always include a link to the original (and also an image description for people using screen readers). If it’s a good post, it allows people to leave the hearts and stars where they belong; if not (or if that’s debatable), it provides the context and proves that the post is, in fact, real.

17 notes · View notes

michaelandy101-blog · 4 years ago

Text

Methods to Discover & Add Nofollow Hyperlinks to Your Web site [Step by Step]

New Post has been published on http://tiptopreview.com/how-to-find-add-nofollow-links-to-your-website-step-by-step/

Methods to Discover & Add Nofollow Hyperlinks to Your Web site [Step by Step]

Ever watch these sport exhibits the place contestants have to seek out the designer product in a sea of knockoffs?

Watching the contestants squint to look at the merchandise is my favourite half. One, as a result of I really like sport exhibits, but in addition as a result of upon first look, you actually can’t inform the distinction.

Effectively, nofollow hyperlinks are form of like that. You may’t inform them other than common hyperlinks simply by taking a look at them.

As Google continues to prioritize hyperlinks in its rating standards, holding observe of them ought to be in your website positioning to-do record.

So, how do you test for nofollow hyperlinks and add them to your webpages? All these solutions, and extra, under.

What’s a nofollow hyperlink?

Everytime you hyperlink textual content, that hyperlink goes inside an HTML tag. A nofollow hyperlink is an attribute inside the tag that tells Google to disregard the hyperlink when crawling the web page. That is usually utilized in remark sections, boards, and, extra lately, sponsored hyperlinks.

This issues as a result of hyperlinks significantly affect your search engine rating. And whether or not you’re linking internally or externally, doing so tells Google the vacation spot web page is effective. This, in flip, could enhance the web page’s rating — it’s known as “link juice.”

The higher your hyperlink constructing, the higher your possibilities of rating greater.

So, while you inform Google to disregard a hyperlink, the vacation spot web page is not going to get any hyperlink juice. For example, let’s say a meals blogger uploads a weblog put up. The blogger can add a nofollow attribute to the remark part to inform Google, “Hey, any link included here isn’t associated with me and I don’t vouch for it.”

With Google tightening up its linking requirements, it’s necessary that manufacturers perceive how they work.

How To Inform if a Hyperlink Is Nofollow

To discover a nofollow hyperlink, you may observe certainly one of two routes: Use a instrument that may do it for you (bounce to that part right here) or test it your self. For the DIY possibility, listed below are the steps:

1. Whilst you’re on the web page, right-click and choose the “Inspect” possibility.

2. Maintain Command + F or Ctrl + F to search for “nofollow” within the code.

three. Scroll to seek out the highlighted nofollow attributes. It ought to look one thing like this:

How To Make a Nofollow Hyperlink

Making a nofollow hyperlink is so simple as including rel=”nofollow” to the anchor tag inside the HTML code. If that made no sense, no worries. Right here’s the breakdown:

The code for a daily hyperlink appears to be like like this:

<a rel="noopener" goal="_blank" href="http://www.destinationURL.com">The linked textual content goes right here </a>

Whenever you’re including a nofollow hyperlink attribute, the attribute will go between the vacation spot URL and the linked textual content, like this:

<a rel="noopener" goal="_blank" href="http://www.example.com/" rel="nofollow">The linked textual content goes right here </a>

Right here’s an instance utilizing the HubSpot Weblog:

<a rel="noopener" goal="_blank" href="http://www.blog.hubspot.com/" rel="nofollow"> Head to the HubSpot Weblog </a>

After getting the hyperlink, you may add it to the suitable part of the supply code in your content material administration system (CMS).

How To Make a Nofollow Hyperlink in WordPress

When making a nofollow hyperlink in WordPress, you have got two choices: manually inputting one into the HTML code or utilizing a plugin. Discover the steps for every under.

Making a Nofollow Hyperlink in WordPress Manually

1. Choose the anchor textual content you need to add a hyperlink to.

2. Click on the hyperlink image so as to add a hyperlink into the sphere.

Image Source

three. Click on on the three dots and choose “Edit HTML.”

Image Source

four. Add the rel=”nofollow” attribute and also you’re all set.

Image Source

Should you’re utilizing an older model of WordPress, you’ll have to entry the supply code via the “Text” tab.

Image Source

Then, manually add the nofollow attribute.

Image Source

As soon as that’s carried out, return to the “Virtual” tab and proceed modifying the put up.

Making a Nofollow Hyperlink in WordPress With a Plugin

When making a nofollow hyperlink with a plugin, the steps will fluctuate relying on the plugin you put in. Nonetheless, right here’s an instance of the way it works utilizing the “All in One SEO for WordPress” plugin.

1. Begin by downloading the plugin and making it energetic.

2. Create or edit a put up or web page.

three. In your modifying textual content field, choose the anchor textual content and click on on the hyperlink image.

Image Source

four. Paste the vacation spot hyperlink into the sphere.

Image Source

5. In the identical field, you’ll additionally see further choices for the hyperlink, together with the “Add ‘nofollow’ to hyperlink” possibility.

Image Source

6. Be sure that this feature is chosen, and also you’re carried out.

Professional-tip: Plenty of website positioning plugins have the nofollow hyperlink characteristic included. So, if you happen to’re trying to optimize your website, you may set up a plugin with a number of website positioning options.

Nofollow Hyperlink Checker Instruments

1. MozBar

This free Google Chrome extension, created by the website positioning software program firm Moz, highlights the entire nofollow hyperlinks on a web page in a single click on.

It additionally tracks adopted, inside, and exterior hyperlinks in addition to key phrases on the web page. MozBar identifies every hyperlink kind by coloration, making it simple to rapidly scan the web page and discover what you’re on the lookout for.

One factor to remember whereas utilizing the extension is that nofollow hyperlinks underneath dropdown menus is not going to seem as you scroll down. You’ll need to click on the menu to disclose the nofollow hyperlinks. Confused? See the GIF under.

2. Varvy

With Varvy’s free nofollow instrument, discovering nofollow hyperlinks is so simple as getting into the web page’s URL and clicking “Test.” It doesn’t provide a visible for the place the nofollow hyperlinks are situated on the web page, however it does inform you what number of there are.

This is likely one of the easiest methods to get an concept of what number of nofollow hyperlinks you have got. From there, you’ll have to seek out different instruments to perform your subsequent steps.

three. NoFollow

NoFollow is a free extension obtainable on Chrome and Firefox. Just like MozBar, it identifies the nofollow hyperlinks on the web page and highlights them utilizing a crimson dotted field.

So long as the extension is energetic, it’s going to work on each web page you go to with out prompting. Simply as with the MozBar, if a hyperlink underneath a dropdown menu has a nofollow attribute, you gained’t see it till you click on the dropdown menu.

So, consider your self like a sport present contestant. To win the website positioning sport, you need to take a better take a look at your web site hyperlinks. This can hold you on Google’s good facet and enhance your odds of touchdown (and staying) on the primary web page of the SERP.

Source link

#General

0 notes

ymd3signs · 4 years ago

Photo

How to become a designer without going to design school

This is a guide to show yourself design.

Update: I first published this blog post over a year ago. Since then, I've gotten many emails posing for more guidance and more comfortable to follow steps, and that I finally found one: Designlab. This course wasn't around once I was learning, but man does I wish it had been – it might have made the entire process tons less daunting. I like it's that it gives you project assignments and then connects you to a design mentor who gives you feedback (they have specialized ones who work on Facebook).

Step 1. Learn to ascertain

The biggest mistake is jumping into Photoshop too fast. Learning Photoshop doesn't cause you to a designer, a bit like buying paintbrushes doesn't force you to an artist. Start with inspiration.

First, find out how to draw.

You don't need to sit during a room with a bunch of other artists trying to draw an unadorned woman.

You don't even need to get that good at drawing. Just learn some basics so you'll be comfortable sketching with a pen.

You only need to do one thing to find out the way to draw: get the book you can draw in 30 days and practice for half an hour a day for a month. I've checked out tons of drawing books, and this is often one among the simplest.

Learn graphic design theory

Start with the book Picture This. It's a storybook of Little Red Riding hood but will teach you the foundations of graphic design at an equivalent time.

Learn about color, typography, and designing with a grid. If you'll find an area class to show the fundamentals of graphic design, take it.

Go through a couple of those tutorials a day.

Learn some basics in user experience

There are tons of books about user experience. Start with these two quick reads which will get you within the right mindset:

The Design of Everyday Things

Don't Make Me Think!

Learn how to write down

Here may be a sure sign of a nasty designer: their mockups are crammed with placeholder text like Lorem Ipsum. An honest designer may be a good communicator. A genuine designer thinks through the whole experience, choosing every word carefully. Write for humans. Don't write within the academic tone; you wont to make yourself sound smart in-class papers.

Read Made to Stick, one among my favorite books of all time. it'll teach you ways to suck in your readers.

Voice and Tone maybe a website filled with gems of excellent writing examples.

Step 2. find out how to use Photoshop and Illustrator.

Hooray! Now you've got a reasonably solid foundation – both visual and UX. You're able to learn Photoshop. I like to recommend starting with Illustrator first then moving on to Photoshop after. Illustrator is what designers use to form logos and icons.

Learn Illustrator

There are plenty of books, online tutorials, and in-person classes to find out Illustrator. Choose the design that works best for you. Here are the books I found especially helpful to find out the fundamentals of Illustrator:

Adobe Illustrator Classroom in a Book – It's boring, but if you get through a minimum of half it, you'll know your way around Illustrator pretty much.

Vector Basic Training – This book teaches you ways to form things in Illustrator that look good.

Now for the fun stuff! Follow these online tutorials and be impressed by what you'll make. Here are two of my favorites – a logo and a scenic landscape.

Learn Photoshop

There are 1,000,000 and one tutorials out there. Tons of them are crap. Fortunately, there are sites with really top quality tutorials. PSDTuts by TutsPlus is one among them.

Here's a simple photoshop tutorial to form an iPhone app.

Here's another good photoshop tutorial to make an internet site mockup.

Carve out an hour or two a day to travel through some tutorials, and you'll be impressed by how quickly you progress.

Step 3. Learn some specialties

Do you want to style mobile apps? Websites? Infographics? Explore all of them, and pick and choose those you enjoy to urge better at them.

Learn Logo Design

Learn how to form a logo that doesn't suck: Logo Design Love

You'll want to require it a step further than a logo, though. Learn to make a uniform brand – from the web site to the business cards. Inspect this book, Designing Brand Identity.

Learn Mobile App Design

Start with this tutorial to urge your feet wet on visual design for mobile apps.

Read this short but very comprehensive and well-thought-out book on iPhone design: Tapworthy. it'll teach you ways to form an app that looks good and straightforward to use.

Geek out on the apps on your phone. Critique them. What works and what doesn't?

Learn Web Design

Read Don't Make Me Think to find out how to make an internet site that folks find it easy to use and navigate.

Read The Principles of Beautiful Web Design if you would like help making an internet site look good.

Make an inventory of the websites you think that are beautifully designed. Note what they need in common.

Now for the hairy question of whether you would like to understand HTML/CSS as a designer: It depends on the work. Knowing it'll offer you a foothold within the job market. Albeit you don't want to be an internet developer, it helps to understand some basics. That way, you recognize what's possible and what isn't.

There are numerous excellent resources to find out HTML and CSS:

My favorite free one is Web Design Tuts.

My favorite paid one (pretty affordable at $25/month) is Treehouse. If you're ranging from the start and need someone to elucidate things clearly and comprehensively, splurge for Treehouse tutorials.

Step 4. Build your portfolio

You don't get to attend a flowery design school to urge employment as a designer. But you are doing need a solid portfolio.

How does one build a portfolio if you're starting for the primary time? The great news is you don't get to work on real projects with real clients to create a portfolio. Structure your side projects. Here are a couple of ideas:

Design silly ideas for t-shirts.

Find poorly designed websites and redesign them.

Got a thought for an iPhone app? Mock it up.

Join a team at Startup Weekend and be a designer on a weekend project.

Enter a 99 designs contest to practice designing to a quick.

Do the graphic design exercises within the Creative Workshop book.

Find an area nonprofit and offer to design for free.

Resist the temptation to incorporate everything you've ever designed in your portfolio. This is often an area for your most vital work only.

Steal, steal, steal initially. Don't worry about being original – which will come later, once you're more comfortable with your craft. Once you learn an instrument, you find out how to play other people's songs before composing your own. The same goes for design. Steal like an artist.

Go to Dribbble for inspiration on a number of the simplest designers. Inspect pttrns for iOS inspiration, and patterntap for website inspiration.

Step 5: Get employment as a designer.

When I first started learning design, I visited an employment search workshop for designers. I walked into an area filled with designers who had far more experience than I did – 5, 10, 15 years experience. All of them were trying to find jobs. That wasn't very safe. There I used to be, trying to show myself design, knowing I used to be competing with these experienced designers.

And yet six months later, I got a design job. There was one key difference between many opposite designers that gave me an edge and me: I knew how to work with developers.

The most significant factor to spice up your employability is to be ready to work with developers. Learn some interaction design. Learn some basic HTML and CSS. Designers within the tech industry (interaction designers, web designers, app designers) are in too high demand and are paid well. That's where the roles are immediate.

If you don't have any experience working with developers, get some. Attend Startup Weekend, attend hackathons, or find a developer through a project collaboration site.

Make a private website and make your portfolio the centerpiece.

Go out and make serendipity happen – tell everyone you recognize that you're trying to find employment as a designer. You never know who might know someone.

Research companies and agencies you would possibly have an interest in. Look on LinkedIn for 2nd and 3rd-degree connections to people that work on those companies and invite intros. The most uncomplicated thanks to getting employment is thru a link. If you don't have a connection, there's still tons you'll do to offer yourself a foothold.

Once you've got the work, continue learning.

I've been at Exec for a year now and have learned plenty of the work. I hunt down designers who are far more talented than I'm and learn from them. I find design classes (good online ones are Skillshare, General Assembly, Treehouse, and TutsPlus). I work on side projects. I geek out at the planning section of bookstores. there's still such a lot to find out and to enhance on.

Keep your skills sharp, and always continue learning.

#graphic design #illustration #digital illustration

0 notes

suzanneshannon · 5 years ago

Text

Building a Scalable CSS Architecture With BEM and Utility Classes

Maintaining a large-scale CSS project is hard. Over the years, we’ve witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals:

Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.

Consistency: we want to make sure all developers are on the same page.

For the past year and a half, I’ve been working on a component library and a front-end framework called CodyFrame. We currently have 220+ components. These components are not isolated modules: they’re reusable patterns, often merged into each other to create complex templates.

The challenges of this project have forced our team to develop a way of building scalable CSS architectures. This method relies on CSS globals, BEM, and utility classes.

I’m happy to share it! 👇

CSS Globals in 30 seconds

Globals are CSS files containing rules that apply crosswise to all components (e.g., spacing scale, typography scale, colors, etc.). Globals use tokens to keep the design consistent across all components and reduce the size of their CSS.

Here’s an example of typography global rules:

/* Typography | Global */ :root { /* body font size */ --text-base-size: 1em;   /* type scale */ --text-scale-ratio: 1.2; --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio)); --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); }   @media (min-width: 64rem) { /* responsive decision applied to all text elements */ :root { --text-base-size: 1.25em; --text-scale-ratio: 1.25; } }   h1, .text-xxl { font-size: var(--text-xxl, 2.074em); } h2, .text-xl { font-size: var(--text-xl, 1.728em); } h3, .text-lg { font-size: var(--text-lg, 1.44em); } h4, .text-md { font-size: var(--text-md, 1.2em); } .text-base { font-size: 1em; } small, .text-sm { font-size: var(--text-sm, 0.833em); } .text-xs { font-size: var(--text-xs, 0.694em); }

BEM in 30 seconds

BEM (Blocks, Elements, Modifiers) is a naming methodology aimed at creating reusable components.

Here’s an example:

<header class="header"> <a href="#0" class="header__logo"></a> <nav class="header__nav"> <ul> <li><a href="#0" class="header__link header__link--active">Homepage</a></li> <li><a href="#0" class="header__link">About</a></li> <li><a href="#0" class="header__link">Contact</a></li> </ul> </nav> </header>

A block is a reusable component

An element is a child of the block (e.g., .block__element)

A modifier is a variation of a block/element (e.g., .block--modifier, .block__element--modifier).

Utility classes in 30 seconds

A utility class is a CSS class meant to do only one thing. For example:

<section class="padding-md"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </section>   <style> .padding-sm { padding: 0.75em; } .padding-md { padding: 1.25em; } .padding-lg { padding: 2em; } </style>

You can potentially build entire components out of utility classes:

<article class="padding-md bg radius-md shadow-md"> <h1 class="text-lg color-contrast-higher">Title</h1> <p class="text-sm color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </article>

You can connect utility classes to CSS globals:

/* Spacing | Global */ :root { --space-unit: 1em; --space-xs: calc(0.5 * var(--space-unit)); --space-sm: calc(0.75 * var(--space-unit)); --space-md: calc(1.25 * var(--space-unit)); --space-lg: calc(2 * var(--space-unit)); --space-xl: calc(3.25 * var(--space-unit)); } /* responsive rule affecting all spacing variables */ @media (min-width: 64rem) { :root { --space-unit: 1.25em; /* 👇 this responsive decision affects all margins and paddings */ } }  /* margin and padding util classes - apply spacing variables */ .margin-xs { margin: var(--space-xs); } .margin-sm { margin: var(--space-sm); } .margin-md { margin: var(--space-md); } .margin-lg { margin: var(--space-lg); } .margin-xl { margin: var(--space-xl); } .padding-xs { padding: var(--space-xs); } .padding-sm { padding: var(--space-sm); } .padding-md { padding: var(--space-md); } .padding-lg { padding: var(--space-lg); } .padding-xl { padding: var(--space-xl); }

A real-life example

Explaining a methodology using basic examples doesn’t bring up the real issues nor the advantages of the method itself.

Let’s build something together!

We’ll create a gallery of card elements. First, we’ll do it using only the BEM approach, and we’ll point out the issues you may face by going BEM only. Next, we’ll see how Globals reduce the size of your CSS. Finally, we’ll make the component customizable introducing utility classes to the mix.

Here’s a look at the final result:

CodePen Embed Fallback

Let’s start this experiment by creating the gallery using only BEM:

<div class="grid"> <article class="card"> <a class="card__link" href="#0"> <figure> <img class="card__img" src="/image.jpg" alt="Image description"> </figure>   <div class="card__content"> <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1>   <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p> </div>   <div class="card__icon-wrapper" aria-hidden="true"> <svg class="card__icon" viewBox="0 0 24 24"></svg> </div> </a> </article>   <article class="card"></article> <article class="card"></article> <article class="card"></article> </div>

In this example, we have two components: .grid and .card. The first one is used to create the gallery layout. The second one is the card component.

First of all, let me point out the main advantages of using BEM: low specificity and scope.

/* without BEM */ .grid {} .card {} .card > a {} .card img {} .card-content {} .card .title {} .card .description {}   /* with BEM */ .grid {} .card {} .card__link {} .card__img {} .card__content {} .card__title {} .card__description {}

If you don’t use BEM (or a similar naming method), you end up creating inheritance relationships (.card > a).

/* without BEM */ .card > a.active {} /* high specificity */   /* without BEM, when things go really bad */ div.container main .card.is-featured > a.active {} /* good luck with that 😦 */   /* with BEM */ .card__link--active {} /* low specificity */

Dealing with inheritance and specificity in big projects is painful. That feeling when your CSS doesn’t seem to be working, and you find out it’s been overwritten by another class 😡! BEM, on the other hand, creates some kind of scope for your components and keeps specificity low.

But… there are two main downsides of using only BEM:

Naming too many things is frustrating

Minor customizations are not easy to do or maintain

In our example, to stylize the components, we’ve created the following classes:

.grid {} .card {} .card__link {} .card__img {} .card__content {} .card__title-wrapper {} .card__title {} .card__description {} .card__icon-wrapper {} .card__icon {}

The number of classes is not the issue. The issue is coming up with so many meaningful names (and having all your teammates use the same naming criteria).

For example, imagine you have to modify the card component by including an additional, smaller paragraph:

<div class="card__content"> <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1> <p class="card__description">Lorem ipsum dolor...</p> <p class="card__description card__description--small">Lorem ipsum dolor...</p>  </div>

How do you call it? You could consider it a variation of the .card__description element and go for .card__description .card__description--small. Or, you could create a new element, something like .card__small, .card__small-p, or .card__tag. See where I’m going? No one wants to spend time thinking about class names. BEM is great as long as you don’t have to name too many things.

The second issue is dealing with minor customizations. For example, imagine you have to create a variation of the card component where the text is center-aligned.

You’ll probably do something like this:

<div class="card__content card__content--center">  <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1> <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p> </div>   <style> .card__content--center { text-align: center; } </style>

One of your teammates, working on another component (.banner), is facing the same problem. They create a variation for their component as well:

<div class="banner banner--text-center"></div>   <style> .banner--text-center { text-align: center; } </style>

Now imagine you have to include the banner component into a page. You need the variation where the text is aligned in the center. Without checking the CSS of the banner component, you may instinctively write something like banner banner--center in your HTML, because you always use --center when you create variations where the text is center-aligned. Not working! Your only option is to open the CSS file of the banner component, inspect the code, and find out what class should be applied to align the text in the center.

How long would it take, 5 minutes? Multiply 5 minutes by all the times this happens in a day, to you and all your teammates, and you realize how much time is wasted. Plus, adding new classes that do the same thing contributes to bloating your CSS.

CSS Globals and utility classes to the rescue

The first advantage of setting global styles is having a set of CSS rules that apply to all the components.

For example, if we set responsive rules in the spacing and typography globals, these rules will affect the grid and card components as well. In CodyFrame, we increase the body font size at a specific breakpoint; because we use “em” units for all margins and paddings, the whole spacing system is updated at once generating a cascade effect.

Spacing and typography responsive rules — no media queries on a component level

As a consequence, in most cases, you won’t need to use media queries to increase the font size or the values of margins and paddings!

/* without globals */ .card { padding: 1em; }   @media (min-width: 48rem) { .card { padding: 2em; } .card__content { font-size: 1.25em; } }   /* with globals (responsive rules intrinsically applied) */ .card { padding: var(--space-md); }

Not just that! You can use the globals to store behavioral components that can be combined with all other components. For example, in CodyFrame, we define a .text-component class that is used as a “text wrapper.” It takes care of line height, vertical spacing, basic styling, and other things.

If we go back to our card example, the .card__content element could be replaced with the following:

<div class="card__content"> <h1 class="card__title-wrapper"><span class="card__title">Title of the card</span></h1> <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p> </div>    <div class="text-component"> <h1 class="text-lg"><span class="card__title">Title of the card</span></h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p> </div>

The text component will take care of the text formatting, and make it consistent across all the text blocks in your project. Plus, we’ve already eliminated a couple of BEM classes.

Finally, let’s introduce the utility classes to the mix!

Utility classes are particularly useful if you want the ability to customize the component later on without having to check its CSS.

Here’s how the structure of the card component changes if we swap some BEM classes with utility classes:

<article class="card radius-lg"> <a href="#0" class="block color-inherit text-decoration-none"> <figure> <img class="block width-100%" src="image.jpg" alt="Image description"> </figure>   <div class="text-component padding-md"> <h1 class="text-lg"><span class="card__title">Title of the card</span></h1> <p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p> </div>   <div class="card__icon-wrapper" aria-hidden="true"> <svg class="icon icon--sm color-white" viewBox="0 0 24 24"></svg> </div> </a> </article>

The number of BEM (component) classes has shrunk from 9 to 3:

.card {} .card__title {} .card__icon-wrapper {}

That means you won’t deal much with naming things. That said, we can’t avoid the naming issue entirely: even if you create Vue/React/SomeOtherFramework components out of utility classes, you still have to name the components.

All the other BEM classes have been replaced by utility classes. What if you have to make a card variation with a bigger title? Replace text-lg with text-xl. What if you want to change the icon color? Replace color-white with color-primary. How about aligning the text in the center? Add text-center to the text-component element. Less time thinking, more time doing!

Why don’t we just use utility classes?

Utility classes speed-up the design process and make it easier to customize things. So why don’t we forget about BEM and use only utility classes? Two main reasons:

By using BEM together with utility classes, the HTML is easier to read and customize.

Use BEM for:

DRY-ing the HTML from the CSS you don’t plan on customizing (e.g., behavioral CSS-like transitions, positioning, hover/focus effects),

advanced animations/effects.

Use utility classes for:

the “frequently-customized” properties, often used to create component variations (like padding, margin, text-alignment, etc.),

elements that are hard to identify with a new, meaningful class name (e.g., you need a parent element with a position: relative → create <div class="position-relative"><div class="my-component"></div></div>).

Example:

<article class="position-relative overflow-hidden bg radius-lg transition-all duration-300 hover:shadow-md col-6@sm col-4@md">  </article>    <article class="card radius-lg col-6@sm col-4@md">  </article>

For these reasons, we suggest that you don’t add the !important rule to your utility classes. Using utility classes doesn’t need to be like using a hammer. Do you think it would be beneficial to access and modify a CSS property in the HTML? Use a utility class. Do you need a bunch of rules that won’t need editing? Write them in your CSS. This process doesn’t need to be perfect the first time you do it: you can tweak the component later on if required. It may sound laborious “having to decide” but it’s quite straightforward when you put it to practice.

Utility classes are not your best ally when it comes to creating unique effects/animations.

Think about working with pseudo-elements, or crafting unique motion effects that require custom bezier curves. For those, you still need to open your CSS file.

Consider, for example, the animated background effect of the card we’ve designed. How hard would it be to create such an effect using utility classes?

The same goes for the icon animation, which requires animation keyframes to work:

.card:hover .card__title { background-size: 100% 100%; }   .card:hover .card__icon-wrapper .icon { animation: card-icon-animation .3s; }   .card__title { background-image: linear-gradient(transparent 50%, alpha(var(--color-primary), 0.2) 50%); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background .3s; }   .card__icon-wrapper { position: absolute; top: 0; right: 0; width: 3em; height: 3em; background-color: alpha(var(--color-black), 0.85); border-bottom-left-radius: var(--radius-lg); display: flex; justify-content: center; align-items: center; }   @keyframes card-icon-animation { 0%, 100% { opacity: 1; transform: translateX(0%); } 50% { opacity: 0; transform: translateX(100%); } 51% { opacity: 0; transform: translateX(-100%); } }

Final result

Here’s the final version of the cards gallery. It also includes grid utility classes to customize the layout.

CodePen Embed Fallback

File structure

Here’s how the structure of a project built using the method described in this article would look like:

project/ └── main/ ├── assets/ │ ├── css/ │ │ ├── components/ │ │ │ ├── _card.scss │ │ │ ├── _footer.scss │ │ │ └── _header.scss │ │ ├── globals/ │ │ │ ├── _accessibility.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _colors.scss │ │ │ ├── _forms.scss │ │ │ ├── _grid-layout.scss │ │ │ ├── _icons.scss │ │ │ ├── _reset.scss │ │ │ ├── _spacing.scss │ │ │ ├── _typography.scss │ │ │ ├── _util.scss │ │ │ ├── _visibility.scss │ │ │ └── _z-index.scss │ │ ├── _globals.scss │ │ ├── style.css │ │ └── style.scss │ └── js/ │ ├── components/ │ │ └── _header.js │ └── util.js └── index.html

You can store the CSS (or SCSS) of each component into a separate file (and, optionally, use PostCSS plugins to compile each new /component/componentName.css file into style.css). Feel free to organize the globals as you prefer; you could also create a single globals.css file and avoid separating the globals in different files.

Conclusion

Working on large-scale projects requires a solid architecture if you want to open your files months later and don’t get lost. There are many methods out there that tackle this issue (CSS-in-JS, utility-first, atomic design, etc.).

The method I’ve shared with you today relies on creating crosswise rules (globals), using utility classes for rapid development, and BEM for modular (behavioral) classes.

You can learn in more detail about this method on CodyHouse. Any feedback is welcome!

The post Building a Scalable CSS Architecture With BEM and Utility Classes appeared first on CSS-Tricks.

Building a Scalable CSS Architecture With BEM and Utility Classes published first on https://deskbysnafu.tumblr.com/

0 notes

recruitmentdubai · 5 years ago

Text

Building a Scalable CSS Architecture With BEM and Utility Classes

Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.

Consistency: we want to make sure all developers are on the same page.

The challenges of this project have forced our team to develop a way of building scalable CSS architectures. This method relies on CSS globals, BEM, and utility classes.

I’m happy to share it!

CSS Globals in 30 seconds

Here’s an example of typography global rules:

BEM in 30 seconds

BEM (Blocks, Elements, Modifiers) is a naming methodology aimed at creating reusable components.

Here’s an example:

A block is a reusable component

An element is a child of the block (e.g., .block__element)

A modifier is a variation of a block/element (e.g., .block--modifier, .block__element--modifier).

Utility classes in 30 seconds

A utility class is a CSS class meant to do only one thing. For example:

You can potentially build entire components out of utility classes:

You can connect utility classes to CSS globals:

A real-life example

Explaining a methodology using basic examples doesn’t bring up the real issues nor the advantages of the method itself.

Let’s build something together!

Here’s a look at the final result:

CodePen Embed Fallback

Let’s start this experiment by creating the gallery using only BEM:

In this example, we have two components: .grid and .card. The first one is used to create the gallery layout. The second one is the card component.

First of all, let me point out the main advantages of using BEM: low specificity and scope.

If you don’t use BEM (or a similar naming method), you end up creating inheritance relationships (.card > a).

Dealing with inheritance and specificity in big projects is painful. That feeling when your CSS doesn’t seem to be working, and you find out it’s been overwritten by another class

! BEM, on the other hand, creates some kind of scope for your components and keeps specificity low.

But… there are two main downsides of using only BEM:

Naming too many things is frustrating

Minor customizations are not easy to do or maintain

In our example, to stylize the components, we’ve created the following classes:

.grid {} .card {} .card__link {} .card__img {} .card__content {} .card__title-wrapper {} .card__title {} .card__description {} .card__icon-wrapper {} .card__icon {}

The number of classes is not the issue. The issue is coming up with so many meaningful names (and having all your teammates use the same naming criteria).

For example, imagine you have to modify the card component by including an additional, smaller paragraph:

The second issue is dealing with minor customizations. For example, imagine you have to create a variation of the card component where the text is center-aligned.

You’ll probably do something like this:

One of your teammates, working on another component (.banner), is facing the same problem. They create a variation for their component as well:

<div class="banner banner--text-center"></div>   <style> .banner--text-center { text-align: center; } </style>

CSS Globals and utility classes to the rescue

The first advantage of setting global styles is having a set of CSS rules that apply to all the components.

Spacing and typography responsive rules — no media queries on a component level

As a consequence, in most cases, you won’t need to use media queries to increase the font size or the values of margins and paddings!

If we go back to our card example, the .card__content element could be replaced with the following:

The text component will take care of the text formatting, and make it consistent across all the text blocks in your project. Plus, we’ve already eliminated a couple of BEM classes.

Finally, let’s introduce the utility classes to the mix!

Utility classes are particularly useful if you want the ability to customize the component later on without having to check its CSS.

Here’s how the structure of the card component changes if we swap some BEM classes with utility classes:

The number of BEM (component) classes has shrunk from 9 to 3:

.card {} .card__title {} .card__icon-wrapper {}

Why don’t we just use utility classes?

Utility classes speed-up the design process and make it easier to customize things. So why don’t we forget about BEM and use only utility classes? Two main reasons:

By using BEM together with utility classes, the HTML is easier to read and customize.

Use BEM for:

DRY-ing the HTML from the CSS you don’t plan on customizing (e.g., behavioral CSS-like transitions, positioning, hover/focus effects),

advanced animations/effects.

Use utility classes for:

the “frequently-customized” properties, often used to create component variations (like padding, margin, text-alignment, etc.),

Example:

Utility classes are not your best ally when it comes to creating unique effects/animations.

Think about working with pseudo-elements, or crafting unique motion effects that require custom bezier curves. For those, you still need to open your CSS file.

Consider, for example, the animated background effect of the card we’ve designed. How hard would it be to create such an effect using utility classes?

The same goes for the icon animation, which requires animation keyframes to work:

Final result

Here’s the final version of the cards gallery. It also includes grid utility classes to customize the layout.

CodePen Embed Fallback

File structure

Here’s how the structure of a project built using the method described in this article would look like:

Conclusion

The method I’ve shared with you today relies on creating crosswise rules (globals), using utility classes for rapid development, and BEM for modular (behavioral) classes.

You can learn in more detail about this method on CodyHouse. Any feedback is welcome!

The post Building a Scalable CSS Architecture With BEM and Utility Classes appeared first on CSS-Tricks.

source https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/

from WordPress https://ift.tt/2VOSRW2 via IFTTT

#web developer #web development #website developer

0 notes

infinijith · 5 years ago

Text

React JS vs React Native: Everything that You Wanted to Know

Generally, there is confusion about how React.js and React Native differ from each other, especially among novice developers.

Even they come up with parents React.js and React Native and common technology backbone. But that doesn’t mean that there are no differences. However, to understand them, anyone first needs to have the basic knowledge about both the framework.

In this blog, you will get a clear idea about how ReactJS and React Native differ from each other.

What is React?

Before developing ReactJS, Facebook was confronted with a major user experience task – building a dynamic UI with high performance. They have aimed to create an app that can simultaneously update news feed along with chats.

They decide to do this on the JavaScript because they had to optimize the development process itself. They added HXP and the Facebook markup syntax into the JS coordinate system, but it seems impossible. In the end, they released ReactJS library based on JavaScript and XHP symbiosis in 2011.

A JavaScript library which uses a new way of rendering webpages along with the speed of JavaScript. Thus, ReactJS is highly dynamic and responsive to user input. This gives a new way of approach for web application development.

An open-source tool based on JavaScript is released in 2013. Due to its revolutionary approach to programming user interfaces setting it becomes wide popular.

Advantage of ReactJS

Easy to Learn and Use

ReactJS is much easier to learn and use. Any developer who comes from a JavaScript background can easily understand and start creating web apps using React.

Creating Dynamic Web Applications Becomes Easier

To create a dynamic web application specifically with HTML was tricky, which requires complex coding, but React JS solved that issue and makes it easier. It provides less coding and gives more functionality.

Reusable Components:

A ReactJS web application is made up of multiple components, and each component has its logic and controls. These components can be reused wherever you need them. The reusable code helps to make your apps easier to develop and maintain.

Performance Enrichment:

The presence of virtual DOM makes it high performing library. It is due do whenever you write a react component it will be not directly written in DOM it will write into virtual DOM, leading to smoother and faster performance.

The Support of Handy Tools:

ReactJS supports a handy set of tools that make the task of the developers understandable and easier. In this, you can select, examine, and edit their current Props and State.

Known to be SEO Friendly:

Traditional JavaScript frameworks have an issue in dealing with SEO. ReactJS overcomes this problem, which helps developers to be easily navigated on various search engines. It is because ReactJS applications can run on the server, and the virtual DOM will be rendering and returning to the browser as a regular web page.

The Benefit of Having JavaScript Library:

Today, ReactJS gaining popularity among web developers. It is offering a very rich JavaScript library which provides more flexibility to the web developers to choose the way they want.

Scope for Testing the Codes:

ReactJS applications are easy to test. It offers a scope where the developer can test and debug their codes with the help of native to

Disadvantage of ReactJS

The high pace of development:

As we know, the frameworks continually change so fast. The developers are not feeling comfortable to re-learn the new ways of doing things regularly. It may be hard for them to adopt all these changes with all the continuous updates.

Poor Documentation:

React technologies updating and accelerating so fast that there is no time to make proper documentation. To overcome this, developers write instructions on their own with the evolving of new releases and tools in their current projects.

View Part:

ReactJS covers only the UI Layers of the app and nothing else. So, you still need to choose some other technologies to get a complete tooling set for development in the project.

ReactJS Application examples

Ecommerce Starter

Subscriptions for food, products or clothes have become very popular over the last few years. With this open-source product you can create your own subscription service, and it's FULL-STACK. It gets a frontend created with React and a Node.js and GraphQL backend.

This is a great example for starting your own company and is looking for good material to learn how to modularize your code or integrate front- and backend, then definitely have a look at this repository.

They even use StoryBook so you can inspect all the components that are used in this project.

Apple Music

Do you ever listen to music on Apple Music, Spotify or Google? This project is a clone of the first one, and even comes with a backend that you can use. Want to build your backend?

You can use the frontend React is used together with Redux and Redux Thunk, providing you with an extensive example to get started with Redux for state management.

React Native

React Native is launched in 2015 by Facebook with the main goal of developing a mobile app as an additional library. React Native is an open-source JavaScript framework used for developing a mobile application for iOS Android, and Windows. It uses only JavaScript to build a cross-platform mobile app.

In React Native the mobile-related components are brought up in the packages of React. Components like Navigator, Text, TextInput, View, ScrollView, etc., as well as native iOS/Android UI components.

You can make a native mobile app in JavaScript using the React Native framework. It relies on the React.Js library by leveraging its power.

Advantages of React Native

There are several advantages of React Native for building mobile applications. Some of them are given below:

Cross-Platform Usage: It provides the facility of "Learn once write everywhere." It works for both platform Android as well as iOS devices.

Class Performance: The code written in React Native are compiled into native code, which enables it for both operating systems as well as it functions in the same way on both the platforms.

JavaScript: JavaScript knowledge is used to build native mobile apps.

Community: The large community of ReactJS and React Native helps us to find any answer we require.

Hot Reloading: Making a few changes in the code of your app will be immediately visible during development. If the business logic is changed, its reflection is live reloaded on screen

Improving with Time: Some features of iOS and Android are still not supported, and the community is always inventing the best practices.

Native Components: We will need to write some platform-specific code if we want to create native functionality, which is not designed yet.

Existence is Uncertain: As Facebook develop this framework, its presence is uncertain since it keeps all the rights to kill off the project anytime. As the popularity of React Native rises, it is unlikely to happen.

The disadvantage of React Native

React Native is Still New and Immature: React Native is a newbie in Android and iOS programming languages and is still in its improvement stage, which can harm the apps.

Learning is Tough: React Native is not easy to learn, especially for a fresher in the app development field.

It Lacks the Security Robustness: React Native is a JavaScript library and open-source framework, which creates a gap in the security robustness. When you are creating banking and financial apps where data is highly confidential, experts advise not to choose React Native.

It Takes More Time to Initialize: React Native takes a lot of time for initializing the runtime even for the hi-tech gadgets and devices.

Example App developed using React Native Framework

Facebook

As a hackathon project, Facebook’s developed React Native for company needs.

To bring all the benefits of web development like fast iterations and having a single team for mobile development. For this reason, Facebook build React Native and leveraged in mobile app development for both iOS and Android apps.

They created the test app and monitored the performance in iOS.

It is a significant part of the user’s first impression of the app and determines whether they will stay or leave. What they achieved was cutting time-to-market in half.

Walmart

Walmart aspiring to become the world’s largest online retailer. With such big goals, the company needs to make bold moves that involve a higher risk to gain a competitive advantage. That’s why they always seek ways to improve customer experience by trying new technologies. Walmart has already proved its innovative attitude introducing Node.js into its stack.

After the release of the React Native, they have moved their mobile app into this technology.

Walmart managed to improve the performance of the app on both iOS and Android by using fewer resources and within a shorter time span.

95% of the codebase was shared between platforms while the skills and experience of developers were leveraged across the organization.

For features like great performance, nearly identical to native apps, and extremely smooth animations React Native is used by Walmart.

ReactJS Vs React Native

Starting and Setuping

ReactJs is a JavaScript library which can be used for developing a website, on the other hand, React Native is a framework for building mobile applications.

You need to choose a bundler like Webpack for starting a new project in ReactJS. React-Native doesn't any operation like that.

Setup the both is easy and you can immediately run an application.

DOM (Document Object Model)

In ReactJS, the DOM manages the data inputs and outputs much faster than others.

This is because it will partially refresh certain parts of the page, so it reduces the re-building time.

It improves the performance and speed of the application. Moreover, the possibility of reusable code in React JS further saves you a lot of time.

In React-Native you can't use HTML to render the app. But some other alternative components help in render the app. Some components that are used by React Native

are real native iOS or Android that gets rendered on the app. And you are not able to reuse the

Libraries, unlike ReactJS Because your code doesn’t get rendered in an HTML page.

Animations and Gestures

In ReactJS for animation, it relies on CSS or other JavaScript libraries for animation.

In React Native you will a new way of animations.

It provides Animated API for animate a component. In this, you can create any type of animation and can be used with different types of Easing. In this, you will get a far better kind of animation the web pages.

In React-Native provides something similar to the JavaScript touch events web AP for interacting with user gestures. It provides a list of functions you can use to catch the different touch events

With this, you can get gesture state information like all the touches and their locations as well as accumulated distance, velocity and touch origin

Navigation

Web pages built in ReactJS use React-router for navigation while React Native has an entirely different library- Navigator for this purpose.

It provides the Navigator component. It is a little difficult to React Native for navigation large scenes.

Overheads

You can write a single piece of code and it runs everywhere in ReactJS.

But in React Native you need a platform-specific code.

With ReactJs you can easily reach any kind of platform.

Conclusion

The React community is growing constantly and is getting bigger in the coming days. React is a great library for making websites, mobile apps and virtual reality experiences.

React.js and React Native are used for a different purpose. You can build complex UI on your webpage as quickly as you would do with ReactJS and React Native usually works pretty well for both iOS and Android.

Infinijith is quite good to build applications in both the JavaScript community. Infinijith will recommend you React.js if you want to build an interactive web interface and React Native will right choice for building cross-platform native apps.

Click here to read more: https://www.infinijith.com/blog/react/reactjs-vs-reactnative

0 notes

pakseoexpert01 · 5 years ago

Text

5 Modern SEO Practices for Guaranteed Success

Present-day SEO is an equivalent word to the incredible client experience. You never again upgrade your site for web crawlers however you improve it for the experience clients will have once they arrive on your pages. Practices that used to work in the past are never again powerful and things you may have overlooked up until this point have increased more significance.

Website optimization is changing constantly. From time to time Google thinks of new rules intending to improve the nature of their indexed lists and your activity as an SEO, entrepreneur, blogger or Digital Marketer, is to remain in sync with these changes.

You should move toward this regularly changing condition as an extraordinary chance to improve your SEO practices and make your site increasingly valuable and easy to use and not as a risk to your internet advertising endeavors.

How about we find in more subtleties 5 of the most proficient current SEO rehearses that can (nearly) ensure your prosperity.

#1 – Having a responsive site that is portable well disposed of isn't sufficient

In the previous half-year everyone is discussing versatile. Google included versatile agreeableness as a positioning element in their calculations and insights in a steady progression show that clients are presently portably situated.

They are utilizing their mobiles to look on Google, shop on the web, participate in interpersonal organizations and do different undertakings that were commonly performed in the work area 5 years prior.

This emotional change effectively prompts the end that you have to have a versatile well-disposed site and the main thing that comes at the top of the priority list is a responsive site. While this is a decent start, it's insufficient.

A responsive site is one that adjusts the UI relying upon the goals of the gadget however the issue is that having a similar work area content appeared on versatile (even without scrollbars or need to zoom in and out) isn't the best answer for an extremely extraordinary client experience.

Most responsive made subjects are not enhanced for portable; they simply attempt to show all the work area content on a versatile screen. What is the arrangement and how is this identified with present-day SEO?

An elective arrangement proposed by many are to utilize a totally unique arrangement of pages for the portable clients (something like SEO EXPERT) yet this isn't the best practice.

There are numerous focal points of the responsive plan that you can't disregard, so a responsive structure is as yet the best arrangement yet with a few changes so as to improve the client experience on portable.

For instance:

You can make style changes with the goal that catches and marks on versatile are greater and simpler to click

Shroud pointless work area components (like colossal footers) or pictures that are not important to appear on portable

Make recordings littler in size and length (or even shroud them)

Cripple popups and different components (side boxes) that take an excess of room on a versatile screen

Execute a one-page checkout on the off the chance that you are selling items

Make it simple for individuals to call you (include snap and call catches)

How is this identified with SEO?

All the above things will make your portable site quicker and easier to understand and that will positively affect your SEO. Google is as of now not checking for every one of these components in their calculations yet soon enough, they will do and you need to be prepared. The quantity of individuals utilizing Google from versatile is enormous to such an extent that you just can't stand to lose rankings due to ease of use issues.

#2 – local SEO improvements are more significant now than any other time in recent memory

'Close to me' look has multiplied the most recent few months. Clients while in a hurry are utilizing their mobiles to discover items to purchase and places to go.

This implies regardless of whether you are not selling anything on the web, despite everything you must be found for nearby searches. Individuals need to discover your contact subtleties, opening times and headings to your physical store.

As an unadulterated online business you additionally need to provide food to look through that have the area in their questions. On the off chance that you are selling administrations online despite everything you need to be discovered when somebody looks for 'Website optimization benefits in Toronto' so neighborhood SEO may have something to offer to everybody.

Your advanced SEO system needs to represent these new improvements in client conduct and neglecting to do so might not negatively affect your general rankings however you may lose clients to rivalry, which is much more dreadful.

#3 – Structured Data is the best approach

Web crawlers need to manage a huge amount of data in an assortment of organizations. At the point when they slither the web they have such huge numbers of information to 'comprehend' from each and every page they visit and so as to make their activity simpler, they have consented to set of diagrams.

Composition is only an approach to depict the substance that is accessible on a page in an increasingly organized manner. It's a specialized assignment since it includes including bits of code in the HTML of a page, however, the general outcome is that it makes the page increasingly meaningful to web crawlers.

There are diagrams for a wide range of substance, from articles to surveys, items available to be purchased, breadcrumb menus and significantly more. Google is utilizing mappings for their insight chart, rich scraps in list items, ad words shopping efforts and ad words expansions.

You can see the rundown of as of now upheld compositions by Google here.

A cutting edge SEO system needs to use all the accessible diagrams appropriate for the specific site for more introductions to web crawlers.

Make your very own site survey, inspect your HTML code, and test your pages with the Google testing apparatus and on the off chance that you notice that your composition portrayal isn't exact; this is one of the main zones that you have to address for better SEO.

#4 – You can't do everything alone, you need great SEO instruments

Like web indexes, we as SEO's or computerized advertisers have a great deal of data to investigate. We have to check traffic levels, positioning positions, approaching connections, online life results and a lot of different measurements that assume a key job in our procedure.

On the off chance that you have a little site perhaps this is anything but difficult to do yet in the event that you have large sites (or oversee more than one sites) at that point attempting to do this sort of checking physically will be excessively troublesome.

The business has perceived this need and that is the reason there are various SEO instruments in the market that the point in helping you to remain in charge of the circumstance.

Having said that, it doesn't imply that great apparatuses are just the paid ones. There are various valuable devices that are free however fundamental for the cutting edge SEO proficient. Here is a fast rundown:

Google Search Console (in the past known as Google Webmaster Tools) – screen your site's exhibition in Google search

Bing Webmaster instruments – screen your website's' exhibition in Bing Google Analytics – Traffic measurements and the sky is the limit from there Google catchphrase device – Keyword look into Feely – to remain educated regarding new advancements in SEO by buying into your famous SEO web journals.

Obviously, there are additionally paid devices like:

SEM RUSH – extraordinary for rivalry examination, watchword look into, catchphrase rankings, page rankings, PPC the board, online networking following and some more.

It's an instrument I use consistently to deal with my client's sites (and my own) thus a long way from every one of the apparatuses I tried, it has the best blend of highlights and cost. I additionally composed a hands-on audit about serums on my other blog, on the off chance that you need more subtleties.

It's a unique apparatus with new highlights included constantly that makes it considerably increasingly valuable.

Long Tail Pro – When it comes to watchword look into, you can do it physically utilizing the Google catchphrase instrument, Google patterns, Google and Bing proposals and so on however on the off chance that you need to spare time and have everything in one spot you can utilize apparatuses like long tail professional.

It's not free however the professional rendition makes some one-memories off cost which makes it reasonable for a wide range of clients.

Most importantly there are such a significant number of things a cutting edge SEO proficient needs to do every day and if there are ways or devices that can spare your time and make you productive in your work, you need to utilize them. You need to invest your important energy in things that issue and identify with your general procedure and not on undertakings that can be completed by apparatuses.

#5 – Modern SEO has likewise lead to the present day third party referencing rehearses

In the close past, SEO was unequivocally connected with external link establishment. While we as a whole know now that cutting edge SEO isn't just about getting joins yet it's considerably more than that, joins are still a piece of the Google positioning the calculation is as yet required for high rankings (something like SEO EXPERT).

What has changed?

A lot of things; above all else the term 'external link establishment' is continuously being supplanted with 'relationship building'. You never again interface with others so as to get a connection indicating your site, yet you associate with different sites or bloggers to set up a business association with them.

At the point when you connect with others either by email or web-based life advertising, you are not doing it so as to increase a connection yet you need to introduce your case and disclose to them how your substance can assist them with improving the experience of their clients.

In the event that something that you composed or have on your site will support their peruses, they will gladly connection to you and the advantages are shared. You get a legitimate 'vote of trust' and they make the experience of their client’s better and greater quality.

That is the possibility of normal third party referencing and whatever else that goes past these limits can push you into genuine difficulty.

As I would like to think and experience, it is a finished exercise in futility to connect with individuals asking for joins yet what you ought to do rather is assemble your notoriety through web-based life and your site's substance and afterward, attempt to feature your mastery by adding to sites that are greater and more trusted than yours.

That is the cutting edge meaning of visitor blogging which is a lot harder to accomplish yet with significantly more advantages both as far as SEO and notoriety building.

#seo #social media marketing #seo services in pakistan

0 notes

seotipsandtricks-me · 6 years ago

Photo

Since I started my journey in the world of SEO, the old Google Search Console (GSC) has been a mainstay of every campaign I’ve worked on. Together, we’ve dealt with some horrific JavaScript issues, tackled woeful hreflang implementation, and watched site performance reach its highest highs and lowest lows. Sadly, all good things must come to an end, and in Jan ’19 Google announced most of the old Search Console features would be shut down for good at the end of March. But it’s not all doom and gloom. As a successor, we now have an updated Google Search Console v2.0 to guide us into the modern web. This new console has a fresh coat of paint, is packed with new reports, gives us 16 months of data, and provides a live link straight into Google’s index — it’s all rather lovely stuff! Despite all this… I still can’t help looking longingly for a few of the old reports sitting neatly tiered on the left-hand side of the browser. While we can’t quite turn back time, using the trusty SEO Spider we can replicate a few of these reports to fill the void for tabs now deleted or yet to be transferred over. Before jumping in, I should note this post mostly covers reports deleted or not fully transferred or across. If you can’t find something here, chances are it’s already available on GSC 2.0. Structured Data The new GSC does indeed have some structured data auditing in the new ‘Enhancements’ tab. However, it only monitors a few select forms of structured data (like Products and Events markup etc…). While I’m sure Google intends to expand this to cover all supported features, it doesn’t quite meet the comprehensiveness of the old report. Well, hot on the heels of the v11.0 release for the SEO Spider, we now have bulk structured data auditing and validation built in. To activate, just head over to Configuration > Spider > Advanced > Enable the various structured data settings shown here: Once your crawl is complete, there are two areas to view structured data. The first of which is in the main Structured Data tab and various sub filters, here: Or, if you just want to examine one lone URL, click on it and open the Structured Data Details tab at the bottom of the tool: There are also two exportable reports found in the main report’s menu: the Validation Errors & Warnings Summary, and the Validation Errors and Warnings. For the full details, have a look at: https://www.screamingfrog.co.uk/seo-spider/user-guide/tabs/ HTML Improvements The HTML Improvements was a neat little tab Google used to show off errors with page titles, meta descriptions, and non-indexable content. Mainly it highlighted when they were missing, duplicated, short, long, or non-informative. Unlike many other reports, rather than transferring over to the new GSC it’s been completely removed. Despite this, it’s still an incredibly important aspect of page alignment, and in Google’s own words: “there are some really good tools that help you to crawl your website to extract titles & descriptions too.” Well — taking their hint, we can use the Spider and various tabs or filters for exactly that. Want page title improvements? Look no further than the filters on the Page Title tab: Or if you’re curious about your Meta Descriptions: Want to see if any pages reference non-indexable content? Just sort by the Indexability column on any tab/filter combo: International Targeting Ahh, hreflang… the stuff of nightmares for even the most skilled of SEO veterans. Despite this, correctly configuring a multi-region/language domain is crucial. It not only ensures each user is served the relevant version, but also helps avoid any larger site or content issues. Thankfully, we’ve had this handy Search Console tab to help report any issues or errors with implementation: Google hasn’t announced the removal of this report, and no doubt it will soon be viewable within the new GSC. However, if for any reason they don’t include it, or if it takes a while longer to migrate across, then look no further than the hreflang tab of the SEO Spider (once enabled in Configuration > Spider > hreflang). With detailed filters to explore every nook and cranny of hreflang implementation — no matter what issues your site faces, you’ll be able to make actionable recommendations to bridge the language gap. There’s also a handful of exportable hreflang reports from the top ‘Reports’ dropdown. While I won’t go through each tab here, I’d recommend you check out the following link which explains everything involving hreflang and the spider in much more detail: https://www.screamingfrog.co.uk/how-to-audit-hreflang/ Blocked Resources Another report that’s been axed — it was introduced as a way to keep track of any CSS or JavaScript files being blocked to search bots. Helping flag anything which might break the rendering, make the domain uncrawlable, or just straight up slow it down. While these issues have drastically decreased over the years, they’re still important to keep track of. Fortunately, after running a crawl as Googlebot (Configuration > User-Agent > Googlebot) we can find all blocked resources within the Response Codes tab of the Spider — or if you’re just looking for issues relating to rendering, have a look at the bottom Rendered Page details tab: Fetch as Google “But wait — you can just use the new URL inspect tool…”. Well, yes — you can indeed use the new URL inspect to get a live render straight from Googlebot. But I still have a few quarrels with this. For a start, you can only view your render from Googlebot mobile, while poor desktop is completely neglected. Secondly, the render is just a static above-the-fold screenshot, rather than the full-page scrollable view we used to get in Fetch As. While it’s not quite the same as a direct request from Google, we can still emulate this within the Spider’s JavaScript rendering feature. To enable JavaScript rendering head over to Configuration > Spider > Rendering and switch the drop down to JavaScript. Once your crawl is complete, highlight a URL and head over to the Rendered Page tab towards the bottom. Here you can view (or export) a screenshot of your rendered page, alongside a list showing all the resources needed: If you want to mimic Google as much as possible, try switching the User-Agent to Googlebot or Googlebot mobile (Configuration > User-Agent). This will make the Spider spoof a request as if it were Google making it. It’s also worth mentioning that Googlebot renders JavaScript based on v41 of Chrome, whereas the Spider uses the updated v64 of Chromium. While there aren’t many massive differences between the two, there may be some discrepancies. As a bonus, if you still want a desktop render direct from Google (or don’t have access to Search Console of a domain), the PageSpeed Insights tool still produces a static desktop image as a representation of how Googlebot is rendering a page. It’s not the most high-res or detailed image but will get the job done! Robots.txt tester Another tab I’m hopeful Google will eventually migrate over — testing your robots before submitting is crucial to avoid disallowing or blocking half your site to search engines. If for any reason they don’t happen to transfer this across to the new GSC, you can easily test any robot’s configuration directly within the SEO Spider (Configuration > Robots.txt > Custom). This window will allow you to either import a live robots.txt file or make your own custom one. You can test if an individual URL is blocked by entering it into the search at the bottom. Alternatively, run a crawl of your site and the spider will obey the custom crawl behaviour. For a much more in-depth guide on all the robots.txt capabilities of the SEO Spider, look here: https://www.screamingfrog.co.uk/robots-txt-tester/ URL Parameters An extremely useful tab — the URL Parameters helps to highlight all of the various parameter queries Google found on its journey through your site. This is particularly useful when examining the crawl efficiency or dealing with faceted navigations. Currently, there’s no way of replicating this report within the Spider, but we are able to get a similar sample from a crawl and some Excel tinkering. Just follow these steps or download the macro (linked below) – 1. Run a crawl of the domain, export the internal HTML tab 2. Cut & Paste the URL list into Column A of a fresh Excel sheet 3. Highlight Column A > Data > Text-to-Columns > Delimited > Other: ? > Finish 4. Highlight Column B > Data > Text-to-Columns > Delimited > Other: & > Finish 5. Highlight Column A > Right-click > Delete 6. Home > Editing > Find & Select > Go to Special > Blanks > OK 7. With these highlighted > Home > Cells > Delete 8. CTRL+A to highlight everything > Find & Replace > Replace: =* with nothing 9. Stack all columns into one & add a heading of ‘Parameter’ 10. Highlight this master column > Insert > Pivot Table > Recommended > Count of Parameter To save some time, I’ve made an Excel macro to do this all for you, which you can download here. Just download the spreadsheet > click Enable Content & Enable Editing then follow the instructions. If everything’s done correctly, you should end up with a new table similar to this: It’s worth noting there will be some discrepancies between this and Google’s own URL report. This boils down to the fundamental differences between the Spider & Googlebot, most of which is explained in much greater detail here: https://www.screamingfrog.co.uk/seo-spider/faq/ The King Is Dead, Long Live the King! Well, that’s all for now — hopefully you find some of these reports useful. If you want a full list of our other how-to guides, take a look through our user guide & FAQ pages. Alternatively, if you have any other suggestions and alternatives to the retired Google system, I’d love to hear about them in the comments below. As a side note: for many of these reports, you can also combine them with the Scheduling feature to keep them running on a regular basis. Or, if you’d like some automatic reporting, take a quick look at setting this up in the Crawl Reporting in Google Data Studio of my previous post. The post Reviving Retired Search Console Reports appeared first on Screaming Frog.

#structured-data #why-does-the-number-of-urls-crawled-not-match-the-number-of-results-indexed-in-google-or-errors-reported-within-google-webmaster-tools

0 notes

webart-studio · 6 years ago

Text

10 Important Suggestions for Creating Search engine optimization-Pleasant Themes

Are you a developer who sells web site themes on ThemeForest or one other market? Then you definitely’ll wish to make your themes as interesting as doable for potential patrons. Good design is one factor, however (understandably) increasingly more patrons are searching for Search engine optimization-friendly themes these days.

How are you going to optimize a theme for search engines like google? Nicely, it isn’t as troublesome as you may assume. Whether or not you construct WordPress themes, Magento or Shopify shops, static HTML templates, or every other sort of web site theme, listed below are 10 Search engine optimization suggestions so that you can observe.

Simply a few of the Search engine optimization-friendly themes on ThemeForest

1. Themes Ought to Be Responsive

Make your theme responsive. That ought to be a no brainer in 2019, however it’s nonetheless value mentioning on this theme developer’s information to Search engine optimization.

A responsive theme is helpful for 2 primary causes:

Search engine optimization. Google makes use of mobile-first indexing. Non-optimized websites received’t rank in addition to they used to, even on desktop.

Customers. Greater than half of on-line site visitors comes from cellular customers. Sending them to a web page with small fonts, a horizontal scroll and sluggish loading occasions will damage your conversions.

One other good piece of recommendation: take a look at your theme for cellular friendliness, beginning with the mobile-friendly take a look at. You can too strive the cellular render perform in Google Search Console. And final however not least, conduct some assessments by yourself along with your private gadgets. Instruments reminiscent of mobiReady and Screenfly assist simulate your web site on numerous display screen sizes.

2. Themes Ought to Be Optimized for Efficiency

Search engine optimization might sound actually complicated at occasions, however plenty of optimization methods merely require some widespread sense.

For instance: customers don’t like sluggish web sites. Nor do search engines like google.

Attempt to optimize the code of your theme so its pages load and render as rapidly as doable. Even one or two seconds could make an enormous distinction.

Some issues to implement:

lazy loading (for photos solely, not for textual content)

asynchronous/deferred JavaScript

minified JavaScript and CSS information

responsive picture sizes

take away unused features from the front-end code

Need to understand how quick your theme hundreds? There are numerous methods to check your web site velocity, reminiscent of:

WordPress

Efficiency Check: The Greatest Promoting WordPress Themes on ThemeForest

Ian Yates

3. Your Theme’s Content material Ought to Be Crawlable

Is your theme prepared on the market? Check it in Google Search Console to examine its crawlability.

Some errors can forestall Google and different search engines like google from crawling and analysing the web page’s content material. That’s an Search engine optimization catastrophe; unreadable content material can’t be listed.

Check the crawlability within the new Google Search Console:

Go to URL Inspection.

Within the prime bar, fill within the URL you wish to take a look at and press enter.

On the best facet, swap to Stay Check.

Click on on View examined web page.

Examine the HTML code or screenshot and take a look at if a very powerful content material is current.

Check the crawlability within the outdated Google Search Console:

Go to Crawl > Fetch as Google

Fill within the path of the web page you wish to take a look at and click on Fetch and render. Do that for desktop and cellular.

Examine the code and rendered web page to see if Google can learn the content material.

4. Themes Ought to Embrace Schema Markup

Implementing structured information may give your theme an Search engine optimization benefit.

Structured information is lacking from plenty of web sites, which is irritating as a result of they supply two main advantages:

They assist search engines like google perceive your content material. For instance: in the event you present a worth close to a product, be sure that it has the proper structured information so search engines like google know they’re taking a look at a worth (and never the scale or one thing else).

They’ll generate wealthy snippets. These are search outcomes enhanced with additional data, reminiscent of thumbnails, star scores, and many others. Wealthy snippets make your search outcome stand out from the remaining and enhance the click-through charge.

Need to implement structured information in your theme? Try one among our earlier articles.

Search engine optimization

An Introduction to Structured Knowledge Markup

Kevin Vertommen

5. Themes Ought to Embrace Meta Knowledge

This one’s straightforward. An internet web page’s title and meta description are proven in search outcomes. They assist customers resolve if they need to go to a web site or not. A superb title and outline enhance the click-through charge, which is a constructive sign for search engines like google.

As a theme developer, don’t hardcode titles and descriptions within the theme information. Use the proper hooks for extra flexibility. In WordPress, you possibly can put a filter on the wp_title performance:

This lets you “unhook” that filter when an Search engine optimization plugin is energetic. For extra on wp_title:

WordPress

50 Filters of WordPress: Filters 11-20

Barış Ünver

6. Themes Want Correctly Paginated Content material

In case your theme makes use of paginated content material, for instance for information articles or product classes, remember to implement rel="subsequent" and rel="prev" tags. These assist search engines like google perceive that sure pages belong collectively, as half of a bigger complete.

The setup seems like this:

Web page 1 has a rel="subsequent" tag to web page 2.

Web page 2 has a rel="prev" tag to web page 1 and a rel="subsequent" to web page 3.

…

The final web page solely has a rel="prev" tag that factors to the second-to-last web page.

For extra data on the best way to correctly paginate content material, take a look at this documentation.

7. Block Inner Search Outcomes Pages

Have you ever applied an inner search perform in your theme? Nice! However don’t overlook to dam the search outcomes pages.

In accordance with Matt Cutts, inner search outcome pages don’t add worth to customers and may subsequently be faraway from the index.

The best option to block such a content material is with the robots noindex tag:

8. Themes Ought to Use Semantic Header Tags

Header tags (H1, H2, H3…) are a good way to construction content material. Sadly, some theme builders use them within the fallacious method. That is honest sufficient; guidelines and greatest practices surrounding them have shifted by the years.

The best strategy is as follows: start by ensuring that every web page has just one H1 tag. You possibly can implement a number of H2, H3, and H4 tags if you need. Change the font dimension primarily based on the hierarchy.

The H1 must be the web page or put up title. In no way must you wrap the emblem in an H1 tag (sure, it occurs).

9. Be Positive to Educate Your Consumers

There are many Search engine optimization suggestions for theme builders. However there’s solely a lot you are able to do. To present you an thought: Google takes greater than 200 components into consideration when rating an online web page.

Whoever buys your themes will possible have the most important influence on their Search engine optimization, so educate your purchasers. Assist them perceive that purchasing an Search engine optimization-friendly theme is just half the battle. They’ll should put in some work themselves, reminiscent of:

Implement the best key phrases.

Write copy that matches the person intent.

Design efficient touchdown pages that seize the guests’ consideration.

Construct hyperlinks to their web site.

Write compelling web page titles and meta descriptions.

Stop duplicate content material and key phrase cannibalization.

Create a superb inner hyperlink construction.

…and so forth.

10. Preserve Your Information As much as Date!

Search engine optimization retains evolving. Rating components that used to work nice prior to now is likely to be ineffective these days. In the meantime, search engines like google maintain refining their algorithms. Which implies that new optimization methods pop up yearly.

Good theme builders maintain updated with the newest Search engine optimization developments. Observe information websites reminiscent of searchengineland.com to find new methods. Having an understanding of Search engine optimization will make you a greater developer.

Helpful Hyperlinks

Supply hyperlink

source https://webart-studio.com/10-important-suggestions-for-creating-search-engine-optimization-pleasant-themes/

#start up #entrepreneurs #new business #online marketing #wordpress websites #productivity #sm

0 notes

krestmarketinggroup-blog · 8 years ago

Photo

Faster Sites: Beyond PageSpeed Insights

Posted by BenjaminEstes Google’s PageSpeed Insights is an easy-to-use tool that tests whether a web page might be slower than it needs to be. It gives a score to quantify page performance . Because this score is concrete, the PageSpeed Insights score is often used as a measure of site performance. Similarly to PageRank years back, folks want to optimize this number just because it exists. In fact, Moz has a popular article on this subject: How to Achieve 100/100 with the Google Page Speed Test Tool .

For small sites on common CMSes (think Wordpress), this can be accomplished. If that’s you, PageSpeed Insights is a great place to start. For most sites, a perfect score isn’t realistic. So where do we start?

That’s what this post is about. I want to make three points:

Latency can hurt load times more than bandwidth

PageSpeed Insights scores shouldn’t be taken at face value

Improvement starts with measurement, goal setting, and prioritization

I’m writing with SEO practitioners in mind. I’ll skip over some of the more technical bits. You should walk away with enough perspective to start asking the right questions. And you may make better recommendations as a result.

Disclaimer: HTTP2 improves some of the issues discussed in this post. Specifically, multiple requests to the same server are less problematic. It is not a panacea.

Latency can hurt load times more than bandwidth A first look at PageSpeed Insights’ rules could make you think it’s all about serving fewer bytes to the user. Minify, optimize, compress. Size is only half the story. It also takes take time for your request simply to reach a server. And then it takes time for the server to respond to you!

What happens when you make a request? If a user types a URL into a browser address bar and hits enter, a request is made. Lots of things happen when that request is made. The very last part of that is transferring the requested content. It’s only this last bit that is affected by bandwidth and the size of the content.

Fulfilling a request requires (more or less) these steps:

Find the server

Connect to the server

Wait for a response

Receive response

Each of these steps takes time, not just the last. The first three are independent of file size; they are effectively constant costs. These costs are incurred with each request regardless of whether the payload is a tiny, minified CSS file or a huge uncompressed image.

Why does it take time to get a response? The factor we can’t avoid is that network signals can’t travel faster than the speed of light. That’s a theoretical maximum; in reality, it will take longer than that for data to transfer. For instance, it takes light about 40ms for a round trip between Paris and New York . If it takes twice that time for data to actually cross the Atlantic, then the minimum time it will take to get a response from a server is 80ms.

This is why CDNs are commonly used. CDNs put servers physically closer to users, which is the only way to reduce the time it takes to reach the server.

How much does this matter? Check out this chart (from Chrome’s DevTools ):

The life of a request, measured by Chrome Dev Tools.

All of the values in the red box are what I’m considering “latency.” They total about 220ms. The actual transfer of content took 0.7ms. No compression or reduction of filesize could help this; the only way to reduce the time taken by the request is to reduce latency.

Don’t we need to make a lot of requests to load a page? It’ll take more than one request to load all of the content necessary to render a page. If that URL corresponded to a webpage, the browser will usually discover that it needs to load more resources to render the page. These could be CSS, JavaScript, or font files. It must recursively go through the same steps listed above to load each of these files.

Fortunately, once a server has been found (“DNS Lookup” in the image above), the browser won’t need to look it up again. It will still have to connect, and we’ll have to wait for a response.

A skeptical read of PageSpeed Insights tests All of the PageSpeed Insights evaluations cover things that can impact site speed. For large sites, some of them aren’t so easy to implement. And depending on how your site is designed, some may be more impactful than others. That’s not to say you have an excuse not to do these things — they’re all best-practice, and they all help. But they don’t represent the whole site speed picture.

With that in mind, here’s a “skeptical reading” of each of the PageSpeed Insights rules.

Tests focusing on reducing bandwidth use

Rule

Skeptical reading

Optimize images

Unless you have huge images, this might not be a big deal. This is only measuring whether images could be further compressed — not whether you’re loading too many.

Enable compression

Compression is easy. You should use it. It also may not make much of a difference unless you have (for instance) huge JavaScript files loading.

Minify HTML

Will likely reduce overhead only by tens of KB. Latency will have a bigger impact than response size.

Minify CSS

Will likely reduce overhead only by tens of KB. Latency will have a bigger impact than response size.

Minify JS

Probably not as important as consolidating JS into a single file to reduce the number of requests that have to be made.

Tests focusing on reducing latency Rule

Skeptical reading

Leverage browser caching

Definitely let’s cache our own files. Lots of the files that could benefit from caching are probably hosted on 3rd-party servers. You’d have to host them yourself to change cache times.

Reduce server response time

Threshold on PSI is too high. It also tries to exclude the physical latency of the server—instead looking only at how long it takes the server to respond once it receives a request.

Avoid landing page redirects

Yes.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

A valid concern, but can be frustratingly difficult. Having zero requests on top of the initial page load to render above-the-fold content isn’t necessary to meet most performance goals.

Prioritize visible content

Actually kind of important.

Don’t treat these as the final word on site performance! Independent of these tests, here are some things to think about. Some aren’t covered at all by PageSpeed Insights, and some are only covered halfway:

Caching content you control.

Reducing the amount of content you’re loading from 3rd-party domains.

Reducing server response time beyond the minimum required to pass PageSpeed Insights’ test.

Moving the server closer to the end user. Basically, use a CDN.

Reducing blocking requests. Ensuring you’re using HTTP2 will help here.

How to start improving Measurement The screenshots in this post are created with Chrome DevTools. It’s built into the browser and allows you to inspect exactly what happens when a page loads .

Instead of trusting the Pagespeed Insights tool, go ahead and load your page in Chrome. Check out how it performs. Look at what requests actually seem to take more time. Often the answer will be obvious: too much time will be spent loading ads, for instance.

Goal setting If a perfect PageSpeed Insights score isn’t your goal, you need to know what your goal will be. This is important, because it allows you to compare current performance to that goal. You can see whether reducing bandwidth requirements will actually meet your goal, or whether you also need to do something to reduce latency (use a CDN, handle fewer requests, load high-priority content first).

Prioritizing Prioritizing page speed “fixes” is important — that’s not the only type of prioritization. There’s also the question of what actually needs to be loaded. PageSpeed Insights does try to figure out whether you’re prioritizing above-the-fold content. This is a great target. It’s also not a perfect assessment; it might be easier to split content into “critical” and “non-critical” paths, regardless of what is ostensibly above the fold.

For instance: If your site relies on ad revenue, you might load all content on the page and only then begin to load ads. Figuring out how to serve less is a challenge best tackled by you and your team. After all, PageSpeed Insights is a one-size-fits-all solution.

Conclusion The story so far has been that PageSpeed Insights can be useful, but there are smarter ways to assess and improve site speed. A perfect score doesn’t guarantee a fast site.

If you’re interested in learning more, I highly recommend checking out Ilya Grigorik’s site and specifically this old-but-good introduction deck . Grigorik is a web performance engineer at Google and a very good communicator about site speed issues.

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!

http://bit.ly/2rJyvka

#huntingtonbeachseo #blogpower #smallbusinessmarketing #articlewriting #leadgeneration #bestlocalseo #socialmediamarketing #contentwriting #lagunabeachseo #digitalmarketing

1 note · View note

dcroofingarizona · 4 years ago

Text

Basic Tile Roof Leak Repair

You can see the initial release of this particular blog post Basic Tile Roof Leak Repair right here: www.dcroofingarizona.com

Assessing a Leak on a Tile Roof

In this article we'll be looking at the first stages of fixing a roofing leak on an s-tile roof.

It's not uncommon to find that one or more tiles are out of place. They can slide down and expose the felt paper underneath, and will basically lead to the paper or underlayment to become deteriorated.

The felt paper inside runs down underneath the tile, down slope and is really wreaking havoc down the slope of the roof to the exterior wall, above the header to the slider down below. So with a common situation like this, we'll walk through a step by step process explaining how to do a leak repair on a tile roof.

So the first thing I do is I come one row up from where the leak begins. And I come over a couple of tiles and I'm going to pull on all the tiles surrounding the one in questions and loosen them up a little bit. So I get the nail that's holding these in place a little bit loose. Then I get my flat bar underneath a bit and then pull that nail out and then slide these tile out.

After that, I will continue to take the tile out alongside the leak, and then the tile out down below the leak, and stack the tile off to the side to come back to later. Then it's time to assess how bad the felt paper is, and replace the felt paper underneath every place where it's bad. You'll tuck the felt up underneath the good felt up above the leak and put the tile back in.

Once you've loosened all these tile around the leak area, go in and pull the nails out and start pulling the tile out of the area and coming down to roof slope. And again, stack those tile off to the side.

Once you have separated this tile with a flat bar, get a hammer under it. Just take your hammer, slide it under and turn the handle to hold a space to hold that tile up. And then you can use your flat bar to get underneath the tile to find any nails.

At that point you're going to get a flat bar underneath that nail head and pull off the nail. And that begins the process of of pulling the nails out of the surrounding area tiles.

You'll want to do the same process with all the tile coming across up above the leak so you have a good working area. You'll then be able to properly assess how bad of a leak you're dealing with.

When the tile is removed, you can cut out the felt paper and see how big and how bad the damaged area is. If the plywood is really damaged, you'll just want to replace that section. Knowing that it's 16 inches on center from rafter to rafter, you might work with a couple of 4 foot wide plywood panels as replacements where you'll block the seams in the middle and nail them off on the rafters.

But when you have to cut a good bit of wood out, you'll want to cut the felt out far enough to get to those rafters so you can pull the nails and get the old wood out and put the new wood in.

As for the kind of felt used to replace the old, damaged stuff, I recommend 30 pound ASTM rated felt paper. This is more than sufficient to do a repair for the underlayment underneath the tile roof. Now, 15 pound ASTM is typical for composition shingles, whereas 30 pound ASTM is typical and sufficient for tile, whether it be for original installation or repairs.

A lot of a lot of contractors will try to sell the homeowner a premium rated felt paper, which is not necessary. And I have learned over the years that the primary reason why they do that, why they try to up sell the underlayment, is because they don't have confidence in their guys to install the tile properly.

When you're seeing bad leaks on a tile roof, it could well be that somebody neglected to nail down the tile properly. It could be that it was broken at one time during the installation and somebody replaced it. But when they replaced it, they obviously can't nail it because the nail hole is hidden up underneath. In a situation like that, the tiles are supposed to get glued in place.

This is the typical lack of quality control you see in a lot of roofing contractors. And this is how a bad installation, bad labor, can result in an eventual roof leak. And this is why they may have tried to up sell the underlayment, not because the standard underlayment is not sufficient - it is if the job is done properly.

With properly installed tiles, even after two decades of wear and tear, if you look at the standard underlayment, you will likely see it is still in perfect condition where there is nothing wrong. It will still be plenty thick, it'll be flexible, and it should be able to last anywhere from 50 to 100 years, provided your tile is installed properly. But when it is not installed properly, that's when you end up with the felt paper wearing out.

And that's what other contractors are trying to prevent from happening. Instead of making their guys do the installation correctly, instead of sending a supervisor out on the job to make sure they do it right, they just up-sell the homeowner on the underlayment. So enough about that. It's just one of my pet peeves. I despise that fact. And I wish that more contractors that would take more pride in their work and make sure that the customer doesn't have to pay for things like this in the future, and not have to pay for premium underlayment because they really don't need it, provided things are done correctly.

How To Re-Lay An Old Tile Roof

Transcript

Today we're doing another tile reset, tile re-lay, reusing the same tiles... what else shall I call it anyway I remove all the existing felt and well this is a truck home it was built in the 1940s 50s and he had only one layer of felt and the owner has been repairing it through the years and he got to the point where he had a bunch of leaks and he didn't want to repair no more so now he wants to reset his style the style looks dirty and everything but still in a good condition so you can reuse it this is a standard type roof tile, it's called life tile what I'm doing here these guys they they put like a little two by two in the front of the the front of the fascia why he has no fascia where he has curved walls eventually the guy he's gonna cut him off like this cut him and then he's gonna cut the core balls but it - this piece of metal and then he's gonna put in your fascia I don't know how he's gonna do it but he's gonna do it anyway my job is to relay the time to reset the tile to rain install the tiles in the same same exact place as you seen before I before I remove them I put a marked on them see it this one belongs to that side that's the number one this is number two number three number four number five and so on okay otherwise when you if you don't do that and those cut belonged to this side of the hippie okay so I've removed the hip board I've removed the the felt I remove all the nails I left the clean plywood and now I'm over to start over a clean new plywood replace um started to replace some starter boards on top of that area and replace on damaged plywood on the top I'm gonna restore I'm gonna install new new roof vents I'm planning to take some tile down so I can make something I can make some make some space for there for the installers I'm gonna prep it and I'm gonna bring some installers to help me like in two days today I'm waiting for the inspector to come and inspect my roof that's why I'm only putting half of it oh by the way right here there's a gap okay there's a gap of about one inch this is a ballistic underlayment okay peels and seals so there's a gap right here about an inch so the usual amount they burst up on top of this thing but in case you somewhere around managed to run underneath there the tire I mean they only need the felt and it's gonna run hard right here under the edge but this guy look ugly so that's why I used the one layer of Salford your membrane along there along the edge of the roof on top of the edge metal so this sofa there is gonna sealed is gonna seal between the the brush stop and and the first stop in the in the HTML okay I'm gonna I'll take another beer later and hopefully I can guide you through the steps when do your own tile this is the way you can do it this thing right here is gonna seal the edge metal when the critical part which is the drip edge okay they gotta tuck it underneath their top and the existing tapping looks good it's just dirty I was going to replace it for a new one but it's no reason to this is a 24 gauge the one that I have is 26 so this is a lot thicker the only problem is the guy they used one a year of Terrapin felt a lot of people are obsessed obsessed with 40-pound mm-hmm yeah like it but the problem is it's too slippery has a lot of sand it's too slippery so and so you have a lot of sand on it you create a lot of buckles on it doesn't have any grip I've seen some guys they do like tile roof they install a 40-pound and they use that and when the charge told the tile you know they're sleeping down so they rip the paper they didn't put enough nails they create a lot of buckles and it looks ugly so to meet the rebound does the work two layers no problem but if you wanna use 40-pound it's up to you it's your problem I will use it on you if if I require by inspection but I don't really like it because to to send it was slippery over love the full roll on top of the after all openness thick ceiling over there when I start with same here and now I'm gonna overlap another full role on top of the top of the half a role of this a little example that how to do it make sure you always have double then you're okay see this one overlaps and the half of the row in the bottom one this one - this one - this always lay it underneath the existing okay so always make sure you have two layers always you start we have you over love the food world and you overlap on top of the food roll half way and then half of the way the other one it goes up like that okay no so if you're using the existing metal right here on the wall to prevent any water to go inside there you're gonna have to put roofs in man underneath and then put some nails to hold it down okay that's the way we do it okay and this little lip they left over here is to divert the water away from the wall okay see I experienced the roofs always leaks on the walls to the most critical places where you go in the world connection so every time that you know water leak you can have it on the wall or underneath the metals but it runs underneath so this thing is gonna prevent you're gonna seal any water penetration in there okay then later I'll show you how to keep it tight this is how you keep the the metal down put some ad nails and then fold them or let's say you plant close to this edge right here much are the one hand okay I'm sorry if I cuz I'm holding the camera with the other one place the nail can't keep the metal down okay and it's gonna prevent any water too good that way so when water runs against the wall it's gonna actually right there notice how he filled up the top eight underneath with the roof cement and I'm gonna put the and he's told I'm gonna install the nails to hold it down in place right here I'm missing the the bottom part of there the bottom part of the flashy I'm gonna put our mother flashing underneath underneath this thing or maybe I'm gonna put a stick on the flashing and then on top I'm gonna put the aluminum flashing that goes here usually we install in tile you're supposed to put a base flashing and also the aluminum flashing on top so this is what I'm gonna do here okay one more time this is the idea CS taraweeh half of the peel and stick so I have to use drop for that thirty pound fell but then overload my full roll on top of the peeling stick you know I love another full roll on top of the half of the football you see I'm taking half hour so I always got two layers all the way to know no matter what always make sure you have two layers okay when you get to the top you're gonna have to cut one half one full roll in half and then just tuck it underneath alright so that's the main idea guys okay please don't take don't cut corners so you know that now I'm gonna keep on rolling these things after here you just kick it okay then right here use your hammer your hammer to reach to the end okay so that way you don't fall off the roof let you stretch it and see it thank you stretch no Nelly even there that Valley flash another object was custom-made but it doesn't work anymore you see how the hard water managed to go underneath and it's all where over here so I don't think I recommend bellies with metal see how the water sticks underneath you need a waterproofing membrane you see the water caused damage it ran behind the the metal and then damage to the felt that's why the guy he had a water leak and put a never stopped it somebody came and did a repair and put this ugly metal on top of this thinking that the water was coming here but he was thinking from that area so I'm gonna do it differently okay for this areas I think it's better to put like like a build up a system like a touchdown arm up hold up or even peeling stick Oh for their midlife it's gonna go underneath and then a couple I was gonna get the granulator captured [Applause] to go together that's gonna work they're having a metal that's gonna rest over a year so is better to put something let's modify her before you mount the the next sheet on top make sure they fit some version my peritoneum is a purple nurple [Applause] yeah that's gonna prevent any water scientific the loves to be come apart and then you fill this one and put some nails on it moving in a slip ring and now you're gonna fold this poor out like in law watches take it out after you have it in place and then you're gonna fill it up and then you're gonna fold it back in place put it back in place like this you gotta go slowly with your hand rub it you should 6 make sure you have no fats will make any cuts on this folder here chopping a long court a kiloton must you know make a car over there and you're gonna patch it with mastic roof select no era chopping in the parents opinion dough chopping you see okay mastic underneath I just kind of do a wrap again it's called wrapping I'm gonna wrap around these then right here make another cap like this okay that's gonna do it - I think Oh patron right and then I'm gonna finish this the style pen to wrap around here and then I'm gonna I'm going to overlap the caps it on top of there on top of the helping make sure that your tell pen overlaps at least four inches on top of it bottom part and then right here I'm gonna do the same thing I wrap cat so I'm gonna cut it wrap it around put some primer and then mount the the cashier on top that's a simple and they use some muscle primer to bond it up the metal and cap what a massacre and then this thing is gonna rope around there's a core underneath the eye they kept with their cement and then I put another a course on top of in the corner just to make sure there's no what is gonna get in there here right here underneath you're gonna get up on a live ahead and put some nail all the way to the top I'll make sure that this thing is not gonna come down [Applause] and this is yourself for there underlayment you peel it and you over love it on top of the torch okay a lot of people think oh I'm gonna put 240 pounds so in case if water runs underneath the valley he's gonna end up on that and the the pillar stick and now you see there's one layer that goes on top of the top of the torch he was on the wall and overlaps on the torch and this yeah and now I put on another layer right here to overlap this so everything underneath the felt it's waterproof the felt is just to lay the tiles on the field but this is the most important the most critical parts see this ballistic underneath the the valleys so don't get fooled by people telling you oh I'm gonna put two layers of 40-pound put you later 30 pound selling well why are you gonna use in the valleys I mean how are you gonna have a waterproof night my my my critical parts you know my most areas where it's it's gonna leak that's what you well that's where you can have the problems in our problems on the field both have a broken tile but always you and how your problems valleys around fireplaces stuff like this so make sure they know how to waterproof it you see it like that just how I do this detail this is this fish is in like a foot high angle so put it out there just in the water this way and then I make this this band right here on mate she's gonna send the water this way and they're gonna sit on top of that open Rachel [Music] [Music] [Applause] [Music] okay this is a completed job I install the same tiles I used to replace it underlayment with two layers of felt 30-pound felt what I did different I use rebalance two layers of felt so further and limit under my under the the valleys walls flashings fireplaces and also added some new for hanging vents the hanging vents they come in different shapes for s tile 4 flat tile for low profile s tile and like this and they look like tile when you look from far away instead of having those ugly ones dormers like the house of cross you see they reset the tile then literally they reset the time where they use the same tile I mean the same the same donors I don't know it's I didn't like him so I put me you one two three four five six seven I put seven dormers eight dormers up here a o'hagan vent I'm sorry you're hanging event and then I installed two in the back to two in the bottom because before somebody did the addition on the bottom but he didn't install anyone so I installed that one over there and then I saw another one on the other side so so roofer you have to look where the house needs to be ventilated okay and this is the novella cat and this is the the old tile but it's being reset so that's why you see some tiles are dirtier than other ones is because they're not in the same same exact position so this guy my guys they want to live with like an open belly and right here I know if I show you the video but I remove the the metal flinch that I had over there and then I installed a new sofa there to place out for their roofing membrane painted the flashing is like a darker color because the tile is also I cannot paint in red otherwise it's not gonna match okay so left a piece of metal up here anyway

#roofer Tucson #roofing contractor #roofing

0 notes

holytheoristtastemaker · 5 years ago

Link

Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.

Consistency: we want to make sure all developers are on the same page.

The challenges of this project have forced our team to develop a way of building scalable CSS architectures. This method relies on CSS globals, BEM, and utility classes.

I’m happy to share it! 👇

CSS Globals in 30 seconds

Here’s an example of typography global rules:

BEM in 30 seconds

BEM (Blocks, Elements, Modifiers) is a naming methodology aimed at creating reusable components.

Here’s an example:

A block is a reusable component

An element is a child of the block (e.g., .block__element)

A modifier is a variation of a block/element (e.g., .block--modifier, .block__element--modifier).

Utility classes in 30 seconds

A utility class is a CSS class meant to do only one thing. For example:

You can potentially build entire components out of utility classes:

You can connect utility classes to CSS globals:

A real-life example

Explaining a methodology using basic examples doesn’t bring up the real issues nor the advantages of the method itself.

Let’s build something together!

Here’s a look at the final result:

CodePen Embed Fallback

Let’s start this experiment by creating the gallery using only BEM:

In this example, we have two components: .grid and .card. The first one is used to create the gallery layout. The second one is the card component.

First of all, let me point out the main advantages of using BEM: low specificity and scope.

If you don’t use BEM (or a similar naming method), you end up creating inheritance relationships (.card > a).

But… there are two main downsides of using only BEM:

Naming too many things is frustrating

Minor customizations are not easy to do or maintain

In our example, to stylize the components, we’ve created the following classes:

.grid {} .card {} .card__link {} .card__img {} .card__content {} .card__title-wrapper {} .card__title {} .card__description {} .card__icon-wrapper {} .card__icon {}

The number of classes is not the issue. The issue is coming up with so many meaningful names (and having all your teammates use the same naming criteria).

For example, imagine you have to modify the card component by including an additional, smaller paragraph:

The second issue is dealing with minor customizations. For example, imagine you have to create a variation of the card component where the text is center-aligned.

You’ll probably do something like this:

One of your teammates, working on another component (.banner), is facing the same problem. They create a variation for their component as well:

<div class="banner banner--text-center"></div>   <style> .banner--text-center { text-align: center; } </style>

CSS Globals and utility classes to the rescue

The first advantage of setting global styles is having a set of CSS rules that apply to all the components.

Spacing and typography responsive rules — no media queries on a component level

As a consequence, in most cases, you won’t need to use media queries to increase the font size or the values of margins and paddings!

If we go back to our card example, the .card__content element could be replaced with the following:

The text component will take care of the text formatting, and make it consistent across all the text blocks in your project. Plus, we’ve already eliminated a couple of BEM classes.

Finally, let’s introduce the utility classes to the mix!

Utility classes are particularly useful if you want the ability to customize the component later on without having to check its CSS.

Here’s how the structure of the card component changes if we swap some BEM classes with utility classes:

The number of BEM (component) classes has shrunk from 9 to 3:

.card {} .card__title {} .card__icon-wrapper {}

Why don’t we just use utility classes?

Utility classes speed-up the design process and make it easier to customize things. So why don’t we forget about BEM and use only utility classes? Two main reasons:

By using BEM together with utility classes, the HTML is easier to read and customize.

Use BEM for:

DRY-ing the HTML from the CSS you don’t plan on customizing (e.g., behavioral CSS-like transitions, positioning, hover/focus effects),

advanced animations/effects.

Use utility classes for:

the “frequently-customized” properties, often used to create component variations (like padding, margin, text-alignment, etc.),

Example:

Utility classes are not your best ally when it comes to creating unique effects/animations.

Think about working with pseudo-elements, or crafting unique motion effects that require custom bezier curves. For those, you still need to open your CSS file.

Consider, for example, the animated background effect of the card we’ve designed. How hard would it be to create such an effect using utility classes?

The same goes for the icon animation, which requires animation keyframes to work:

Final result

Here’s the final version of the cards gallery. It also includes grid utility classes to customize the layout.

CodePen Embed Fallback

File structure

Here’s how the structure of a project built using the method described in this article would look like:

Conclusion

The method I’ve shared with you today relies on creating crosswise rules (globals), using utility classes for rapid development, and BEM for modular (behavioral) classes.

0 notes

anthonykrierion · 5 years ago

Text

Guide to Google Manual Actions and How to Fix Them

Last updated on March 5, 2020 at 05:46 pm

Since the first search engine was born in the ’90s, people who would try to exploit search algorithms and find the easy path to the top of the search results were also born. This has become problematic for search engines trying to provide users with the best results but spam websites would come out on top.

As a result, Google made improvements on its algorithm so that it can better evaluate websites for shady tactics and easily detect spam. And to avoid these websites from ruining the users’ experience, Google started slapping spam websites with manual actions.

Imagine going to work one morning, you pull up Google Analytics and your rank monitoring tool and everything is zero. You sip some coffee and started investigating. Maybe there’s just something wrong with the tracking code right? But there’s nothing wrong with it.

Then it hit you. You realized you’ve been penalized. In a blink of an eye, months or years’ worth of work is lost.

Manual actions can drive SEOs crazy. If there is one thing you must avoid in this industry, it’s this one.

If you’re reading this article, I hope you’re here because you want to know more about manual actions and not because you’ve been hit by one. Let’s get right into it!

What is a Manual Action?

A manual action or penalty is given out by Google to websites that use unethical practices that are against their guidelines. These strategies are better known as Black Hat SEO and it seeks to manipulate search engine results.

To determine if a website deserves a manual action, Google employs thousands of human reviewers to check if websites comply with Google’s Webmaster Quality Guidelines.

What happens when I receive a Manual Action?

Once you receive a penalty from Google, pages that are affected or even the whole website will experience a huge drop in search rankings or completely be gone from the search results. Organic traffic will completely be gone as well. The drop is quick and could happen in a few days or even overnight.

How to Check for a Manual Action?

If you are given a manual action, you will be notified by Google through the Manual Action report in Google Search Console. You will see a message similar to this:

In the report, you will see the type of issues Google was able to detect from your website and the list of pages that are affected. If you have submitted reconsideration requests, you will also be notified here if Google rejected your requests.

List of Manual Actions

Below is the list of manual actions given by Google and tips on how to fix or avoid them.

User-Generated Spam

Websites that allow user-generated content such as forums and blog comments may receive this manual action if users bombard the website with self-promoting text and links to unrelated and spammy websites.

Fix

Use the “site:” search query to check your website for malicious content from users and delete them. Sample: [site:https://samplesite.com viagra]. Also, it is better to avoid this by making sure all content from users are being moderated before being approved.

Spammy Free Host

Opting for free hosting services are good for cutting costs but it could lead to a manual action. If you’re using a free hosting service, you’re website shares the same server with other websites. Even if your website is clean, spammers that you are sharing servers with might affect the whole server and Google may issue a manual action to all websites in that server.

Fix

Contact the technical support of the hosting company you are using and inform them of the manual action. If there are no developments, I suggest that you move to a secure hosting provider.

Structured Data Issue

Google can detect if the implementation of structured data is against the Structured Data Guidelines.

Fix

Update the existing structured data markup on your website and comply with the guidelines. You could use the Structured Data Testing tool to avoid errors.

Unnatural links to your site

Receiving this manual action means that Google detected unusual linking patterns to your website that intends to manipulate PageRank. Actions such as buying links from PBNs and excessive link exchanges can lead to a penalty.

Fix

Go to Google Search Console’s link report to check for links that Google might find suspicious. Prepare a text file and use the disavow tool.

Unnatural links from your site

There is an unnatural pattern of outbound links from your website that might give Google the impression that you are selling links or participating in link schemes.

Fix

Identify links that are paid or affiliate links by using the rel=”sponsored” tag.

Thin content with little or no added value

Google has strict guidelines when it comes to the quality of content. According to Google, samples of pages with thin content or has no value are :

Automatically generated content

Thin affiliate pages

Scraped content

Low-quality guest posts

Doorway pages

Fix

Review if these pages can be improved and make sure these pages can provide value to users. Alternatively, you can block Google from crawling these pages through a robots.txt file or putting a noindex tag to remove it from the search results.

Cloaking and/or sneaky redirects

Cloaking is the act of manipulating the code of a page to show users a different page from what was submitted to Google while sneaky redirects lure users to be directed to a page they don’t intend to go.

Fix

Use Google Search Console’s URL Inspection tool to check how Google sees the pages that are affected. Fix the codes and content of the pages and remove any shady redirects.

Pure spam

Google detected pages on your website that are using spam techniques blatantly.

Fix

Make sure that all pages on your website adhere to Google’s Webmaster Guidelines.

Cloaked images

Similar to cloaking earlier, Google serves manual action for cloaked images if it crawls an image on a page but it is shown differently to users.

Fix

Make sure that your website presents the exact same images to users as to what is seen in the Google search results.

Hidden text and/or keyword stuffing

Excessively repeating a keyword that you are targeting in a single page and/or hiding it by covering it with an image or making the text color white so it blends with the background is a black hat SEO strategy.

Fix

Check the HTML codes of the affected pages as well as the CSS styling for hidden texts and excessive repetition of keywords in the meta tags.

AMP content mismatch

AMP or accelerated mobile pages is a lighter version of a webpage for mobile users. The content of the AMP version of a webpage should have the same content.

Fix

Make sure that the AMP page is canonicalized to the correct web page. AMP content mismatch manual action will not gravely affect your rankings but Google will drop the AMP version for mobile search results and show the original webpage instead.

Sneaky mobile redirects

Mobile users may see a different version of a webpage if its a feature that is specifically for mobile users. However, there are instances where mobile users are redirected to a different URL either through code or a script that forces mobile users to open an ad.

Fix

If you have been given this manual action and you did not place it there intentionally, check if your website is hacked or scan for malware.

What to Do After Fixing Manual Actions?

After ensuring that you fixed the problems causing the manual action, you should submit a reconsideration request to Google in the Manual Action report.

In writing a reconsideration request, be as detailed as possible on how you fixed the error. If your website has been hacked, make sure that you also let Google know about it. Regardless of the gravity of issues, reconsideration requests may take a few days or weeks. Google will inform you through email if the review is complete and you will be informed if the fix has been accepted or rejected.

Best Practices when Fixing Manual Actions

Fix all issues on all pages before requesting for a reconsideration

Since receiving a manual action will result in lost rankings and traffic, some webmasters would apply half done fixes to start the review and regain their traffic as early as possible. It is best that you be patient and make sure your website is clean from any issues that resulted in a penalty.

Make the pages accessible

Make sure that the pages affected by the manual action are not blocked from crawling through the robots.txt.

Do not send reconsideration requests repeatedly

Repeatedly sending reconsideration requests will not make the review process any faster and might just result in Google seeing you as spamming

How Long Before My Website Can Recover?

There is no way to tell how long before your website can regain its rankings and traffic. It may depend on the gravity of the penalty. If it’s just a few pages on your website, it might take a few weeks or a month. If it’s on your whole website, it can take months or maybe years. Once you fix a manual action, Google will not give you a timeline.

What you should know is that when a webpage or website gets penalized by Google, it loses all trust and authority. You’ll be starting fresh and you need to work your way up again.

How do I Avoid Manual Actions?

It’s pretty simple, do White Hat SEO. It is the right way of doing SEO and it should be the only way you are doing it.

Create a holistic optimization plan for your website. Make sure you have a good user interface and user experience, optimize for mobile, and publish great content that attracts links. You have more than 200 ranking factors to work with and every day you should start looking into at least one of these factors and ask yourself – “what can I optimize today?”.

You’ll be needing a lot of patience but continuously improving your website the right way is 100% better than trying to recover from a manual action.

Guide to Google Manual Actions and How to Fix Them was originally posted by Video And Blog Marketing

#Video And Blog Marketing

0 notes

pestcontrolcan · 5 years ago

Text

Pest Control Exterminator Service For Rats Near Me Canyon Crest CA 92507 | We Also Serve Mead Valley

Exterminator For Rats Near Me Canyon Crest CA 92507

Our pest control specialists are well trained to make sure that each rat or mice control problem is taken care of smooth manner and prevent re-infestation of these pests. We only strive to provide a remedy tailored just to provide maximum effect and with products used to eradicating them there is no way our method will harm the environment or cause any unnecessary suffering. Our Pest Control treatments make it easier to get rid of rats efficiently and promptly.

Rat Control

There are many reasons why a lot of people dislike rats. To start with, they can transport many diseases and spread to human beings. They are also known for damaging food by contaminating them with their urine or dropping. Their gnawing can result in severe damage to our property or valuables. In America, out breaks of mice have been causing serious and huge economic losses.

If your house has been infested by rodents best is to tend to it urgently. Areas infested by rats may be in high risks specifically if you have little ones or animals. Any delay in controlling them can cause major damage to your home and put a huge hole in your wallet.

Rats are nocturnal and they normally stay hidden from people so removing them can be tricky. Our pest control service has every solution for your pest problems. We have been helping clients to eradicate rats or mice from their property for years.

Our pest control service technicians are properly trained to make sure that each rat or mice control problem is addressed smooth manner and prevent re-infestation of these pests. We only aim to provide a remedy tailored just to provide maximum effect and with products used to getting rid of them there is no way our method will harm the environment or cause any unneeded suffering. Our Pest Control treatment methods make it easier to get rid of rats successfully and promptly.

Gopher Control

It's easy to have a professional pest control gopher specialist go to your home and rid it of the gophers that are destroying your property. Gophers invade lawns, gardens all throughout the year feeding on crops, plants, shrubs, trees, and lawns. They also damage water lines and sprinkler systems which can lead to soil erosion. Gopher mounds on lawns disrupt mowing equipment and ruin the aesthetics of well kept turf-grass. We are the professionals in Gopher control and have been so for years. Be prepared to take immediate action as it is a lot easier and less expensive to control one or two than wait until the population builds where they cause excessive damage.

Our gopher service technicians will inspect your property with you and provide an estimate. We will recommend the best treatment options to eradicate the gopher problem completely. Technicians are prepared to complete service at the time of estimate. We offer the best gopher solutions to get the job done. Our gopher treatments are very powerful for maximum effectiveness.

Ant Control

Carpenter ants are probably not bigger than a quarter of an inch in size, they are tiny and black, and might have wings. Carpenter ants can completely damage wood supports on buildings, including two by fours and four by fours. Carpenter ants are active all year, but are commonly viewed in warmer months, from spring until early fall. Carpenter ants can quickly do tens of thousands of dollars of damage to your house. Carpenter ants should be properly treated. Over the counter products do not work. Winged carpenter ants usually means you have a well developed colony, usually 3 to 4 years old. Get the help you need for any type of ant problem or ant infestation.

Pest Exterminator Rats Near Me Canyon Crest 92507 | Rat Extermonator in Mead Valley

Ants interact by touch and smell. They lay down chemical trails and continuously touch each other to pass on their nest odor. Carpenter ant control can be very complicated. It is crucial to locate the source of the ants and their den. The complete control is accomplished when the nest itself is treated with a residual spray or dust. The ant exterminator will take time to understand the situation and also speak to the client about their personal concerns. If there are pets or young kids in the house special care will be taken.If the ant species is hazardous to wood the ant pest exterminator may take a look at crawl spaces and other areas of the house to see if there are any type of infestations of this particular species. This is not only done to see just how much infestation there is and how much destruction has been done already.

Mouse Control

Having mice in your house is nerve-racking and could be harmful. The main variety of mouse found in homes are the common house mouse.They cause destruction to your home, spread diseases, chew on cables, household furniture, books and . If you have a mouse problem it is best taken care of it quickly as they can multiply fast and you could soon find yourself with a major infestation. Mice can live and travel for of time in enclosed containers such as boxes, barrels or crates. Lots of fires may have been caused by mice chewing through electrical wiring. In six months one pair of mice can eat about four pounds of food and generate some eighteen thousand pounds of fecal droppings. Mice are not blind but have bad eyesight and can not see accurately beyond about six inches. They are impressive climbers and can run up just about any roughened wall without breaking stride. They can swim but prefer not to. More than once, a live mouse has been flushed down a toilet and has resurfaced a minute later. They can jump a vertical distance of 12 inches from the ground onto an elevated flat surface. They can bounce a height of eight feet to the ground with no injury. They can run horizontally along pipes wires and ropes. When you see mice in your home, call a mouse pest control specialist immediately. Mice carry diseases and can pollute and destroy the food in your home and should be dealt with as soon as possible.

Silverfish Control

Silverfish can be found typically in humid climates and like to live in dark damp areas such as basements and attics, kitchens and bathrooms. They are particularly attracted to paper and wet clothing. Regularly found in stored containers in garages and sheds. Silverfish are known for their destructive habits and like to eat clothing, books and wallpaper. Silverfish feed on carbohydrates, particularly sugars and starches. Glue in books, linen, silk and dead insects may be food sources. They have been found in unopened food packages.

Exterminator Service For Rats Near Me Canyon Crest | Rat Extermonator in Mead Valley

Silverfish is a wingless insect that is half an inch in length. It has a silver color of its scales and the fish-like motion it makes and now they are among the most hated house pests. Silverfish can cause considerable destruction, ruin photos and books, eat wallpaper and cotton. Silverfish are nocturnal and move fast and can jump. They are found where there is excessive humidity and will do great damage to books, wallpaper, other paper items.

This species is regularly a pest in houses and public libraries. It feeds on starchy materials like glue and lives in high humidity areas of your home. It can live in glass jars where it will feed on potatoes or things like cornmeal and other starchy foods. Thought to belong to one of the most primitive existing insect orders, more than 400 million years old.

If your house has been invaded by rodents best is to tend to it quickly. Areas infested by rats may be in high risks specifically if you have little ones or animals. Any delay in controlling them can cause major damage to your property and put a huge hole in your finances.

Go-Pher The Kill Pest Control Riverside 9880 Indiana Ave STE 23, Riverside, CA 92503 https://www.gopherthekill.com 951-977-8183

Find us on Google

Find us on Maps

Google My Business Gopher The Kill Pest Control

Go-Pher The Kill Pest Control

Gopher The Kill Pest Control Location

canyon crest pest control

Canyon Crest Pest Control Services

Canyon Crest Exterminator

Pest Control Canyon Crest CA – Trello

Pest Control Canyon Crest CA Facebook Page

Exterminator For Rats Near Me Canyon Crest CA 92507

33.98057 -117.32893

Exterminator For Rats Near Me Canyon Crest CA | Rat Extermonator in Mead Valley

from https://www.pestcontrolcanyoncrestca.com/exterminator-for-rats-near-me-canyon-crest-ca-92507-9/

from https://pestcontrolcanyoncrestca0.wordpress.com/2019/12/23/pest-control-exterminator-service-for-rats-near-me-canyon-crest-ca-92507-we-also-serve-mead-valley/ from https://pestcontrolcanyoncrest.blogspot.com/2019/12/pest-control-exterminator-service-for_29.html

0 notes

brianrines0 · 5 years ago

Text

Pest Control Exterminator Service For Rats Near Me Canyon Crest CA 92507 | We Also Serve Mead Valley

Exterminator For Rats Near Me Canyon Crest CA 92507

Rat Control

Gopher Control

Ant Control

Pest Exterminator Rats Near Me Canyon Crest 92507 | Rat Extermonator in Mead Valley

Mouse Control

Silverfish Control

Exterminator Service For Rats Near Me Canyon Crest | Rat Extermonator in Mead Valley

Go-Pher The Kill Pest Control Riverside 9880 Indiana Ave STE 23, Riverside, CA 92503 https://www.gopherthekill.com 951-977-8183

Find us on Google

Find us on Maps

Google My Business Gopher The Kill Pest Control

Go-Pher The Kill Pest Control

Gopher The Kill Pest Control Location

canyon crest pest control

Canyon Crest Pest Control Services

Canyon Crest Exterminator

Pest Control Canyon Crest CA – Trello

Pest Control Canyon Crest CA Facebook Page

Exterminator For Rats Near Me Canyon Crest CA 92507

33.98057 -117.32893

Exterminator For Rats Near Me Canyon Crest CA | Rat Extermonator in Mead Valley

from https://www.pestcontrolcanyoncrestca.com/exterminator-for-rats-near-me-canyon-crest-ca-92507-9/

from https://pestcontrolcanyoncrestca0.wordpress.com/2019/12/23/pest-control-exterminator-service-for-rats-near-me-canyon-crest-ca-92507-we-also-serve-mead-valley/ from https://brianrines.blogspot.com/2019/12/pest-control-exterminator-service-for_76.html

0 notes