Tuesday, April 4, 2017

Why Staging Environments Are Critical for WordPress Sites

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Have you ever thought about the way you organize your WordPress development? Do you use version control? How about staging environments?

The WordPress Development Process

The advent of WordPress - one of the most consumer-friendly content management systems ever to exist - has created a different kind of development model. The accessibility of WordPress, and pre-made themes and plugins for it, allows web developers to quickly and easily create sites when requirements are low.

But it goes further than that - some of these developers don’t fully understand the languages on which the platform and their plugins are built (or understand it at all). When considering run-of-the-mill PHP or JavaScript developers, for example, many still don’t practice proper programming techniques, using things like tests, separate environments, or version control. Now, consider that the development of a simple WordPress site can be done by someone with far less training or experience (or done by a veteran programmer with the goal of being hasty). The percentage of cut corners in terms of security and maintenance concerns almost certainly goes up.

Bearing all of that in mind, the final nail in the proverbial coffin is the fact that WordPress updates and maintenance can be done so easily from right within the platform. The ability to update the platform or almost any plugin in place is fantastic, but it also means that “Cowboy Coding” - making changes directly on the live site - is very convenient and very tempting. That is, until disaster strikes.

About Staging Environments

The life cycle of many WordPress websites begins in a separate development environment in which it is built (hopefully it isn’t being built right in a live production environment). Once built, it is migrated to a production environment. And that is where things can sometimes fall apart.

What if the live, production hosting is slightly different than the dev environment, is missing some dependencies or software, has different versions, etc? Or what if updating a plugin causes the site to crash? What if a theme update breaks your child theme and you can’t immediately diagnose what is wrong?

These problems can be often prevented by using staging environments, which are often overlooked by WordPress site managers, yet are just as important for them as for other web platforms.

Setting up a Staging Environment

The goal behind setting up a staging environment is to set it up to be as identical to your live production environment as possible. Use the same hosting service, or the same kind of VPS. Mimic the live environment as closely as possible. use the same WordPress version, the same plugins, and the same configuration. One neat tip would be to use a backup/migration plugin to create a mirror copy of your website when it is first created (or do so now, if you have an existing site but no staging environment) so that the two are identical to start. Then, you can set up a subdomain (or another domain altogether) to access the site, such as staging.example.com.

Continue reading %Why Staging Environments Are Critical for WordPress Sites%


by Jeff Smith via SitePoint

One Page Love ‘Award Ribbons’ now in Retina and SVG formats

Below is a little tutorial on how to add a subtle award ribbon to your website. Feel free to hot link the image file. The ribbon is hosted on AmazonS3 and optimized so load time should be swift:)

ps. head here if you are after Printable Award Certificates

Ribbon Preview:

One Page Love Award Ribbon

Direct Ribbon links:

Left-aligned SVG ribbon:

http://ift.tt/2oEQ3cN

Left-aligned Retina PNG ribbon:

http://ift.tt/2k3MFZ9

Right-aligned Retina PNG ribbon:

http://ift.tt/2kmR7Qy

Left-aligned non-Retina PNG ribbon:

http://ift.tt/2k3MFs7

Right-aligned non-Retina PNG ribbon:

http://ift.tt/2kmOiic


Quick Embed Code

Simply add this HTML code in your page just after your first <body> tag.

Make sure you replace the link to your feature link.


<a href="https://onepagelove.com" style="display: inline-block; position: fixed; left: 0; top: 100px; z-index:999999;"><img width="73" height="56" src="http://ift.tt/2k3MFZ9" srcset="http://ift.tt/2k3MFs7 1x , http://ift.tt/2k3MFZ9 2x"></a>


Cleaner Code

Simply add this HTML code in your page just after your first <body> tag, then the CSS to your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.

HTML:


<a href="https://onepagelove.com" class="opl"><img width="73" height="56" src="http://ift.tt/2k3MFZ9" srcset="http://ift.tt/2k3MFs7 1x , http://ift.tt/2k3MFZ9 2x"></a>

CSS for fixed position:

The code below is for the ribbon to stay visible while the rest of the page content moves when scrolling


.opl {
display: inline-block;
position: fixed;
left: 0;
top: 100px;
z-index:999999;
}

CSS for non-fixed position:

The code below is for the ribbon to move with the rest of content when scrolling


.opl {
display: inline-block;
position: relative;
left: 0;
top: 100px;
z-index:999999;
}

CSS for Right align position:

The code below is for the ribbon to move with the rest of content when scrolling


.opl {
display: inline-block;
position: relative;
right: 0;
top: 100px;
z-index:999999;
}


Feel free to modify or add your own!

Help? rob@onepagelove.com


by Rob Hope via One Page Love

5 Emerging Trends to Amp-up Your Web Designs in 2017

With 2017 already shaping up with some very interesting moments, fresh web design trends are also starting to emerge. This year we’re seeing a large number of visual trends changing the face of web design, including some that subtly improve the user experience as well.

But while user experience is certainly important when it comes to website design, you cannot let your visuals go by the wayside, as the awe and emotional appeal of the design also influences whether or not a user sticks around.

In today’s article I give you a rundown on 5 visual trends that will help you renew your creativity in 2017.

1. Serif Fonts

[caption id="attachment_151923" align="aligncenter" width="1000"] http://ift.tt/2nAdzpO[/caption]

Sans-serif fonts appeared to be dominating the world of web typography for a while there. We saw beautiful fonts like Maven Pro, Futura, and Helvetica Neue emerge from our screens, and they became top choices for the everyday web designer. But now, Serif fonts have started to become fashionable again (and not only in formal settings but in fun, modernized settings as well).

We witnessed serif fonts seemingly gain more traction in 2016 as more typographers started to develop modernised serif fonts. Fonts like Slab Tall X, Justus and Novello began reshaping how we typically use serif fonts in modern web design.

Most design trends appear in a completely different medium before they spread to other mediums - here’s one example where serif fonts made quite an impact on television before they did in web design.

2016 delivered us the mega-hit television show, Stranger Things; the short Netflix series opening is a visual delight and the serif font animating around in their red-neon glory is darn attractive. Fun fact: the title itself is a serif font inspired by several Stephen King novels, a modified version of ITC Benguiat created by Ed Benguiat. Like so many other design trends, they can cycle back years or even decades later.

[caption id="attachment_151924" align="aligncenter" width="1000"]Stranger Things Stranger Things [/caption]

Not familiar with Stranger Things? Serif fonts were also used in several 2016 Oscar-winning films such as Bear Story, Room and The Hateful Eight!

[caption id="attachment_151925" align="aligncenter" width="1000"]The Hateful Eight The Hateful Eight[/caption]

2. Natural Color Palettes

Pantone 15-0343 Greenery

Pantone recently announced that “Greenery” is the 2017 Color of the Year, a color that symbolizes new beginnings, which is very fitting considering current events of the world. Leatrice Eisemen, Executive Director of the Pantone Color Institute says: “Greenery bursts forth in 2017 to provide us with the hope we collectively yearn for amid a complex social and political landscape”.

Natural and neutral toned palettes will certainly be taking over 2016’s bright and bubbly tones. That’s not to say that bold colors won’t be used, but they certainly won’t be the highlight of web design.

[caption id="attachment_151927" align="aligncenter" width="1000"]Fischer Pilsner Beer http://ift.tt/2f8wBQQ[/caption]

In 2016 we began to see natural colors coming to light, especially when it came to television shows. Both The Walking Dead and Westworld come to mind here. While the palettes in The Walking Dead were used to help relay the dark tones of the atmosphere, Westworld also used a natural color palette but imbued their colors with rich tones that fuelled the fantasy world. You’d be surprised at how much impact television has on our lives, how it influences which types of visuals we respond to.

Natural doesn’t necessarily mean “brown”, or even Pantone’s “Greenery” color - you can totally breed alternatively or additional natural accent colours to compliment these colors. 2016’s home decor trends were heavily leaning towards natural color schemes, and perfectly demonstrated how one might go about dropping the bright colors while still crafting an attractive layout.

[caption id="attachment_151928" align="aligncenter" width="1000"]Google Chrome Experiments http://ift.tt/2h5aUBT[/caption]

3. Mega Navigations (Meganavs)

Bacon Mega Menu

Slowly but surely we could see the death of, or at least the minimization of, the hamburger icon. While the icon does help to free up space, it can also create friction between the user and where the user wants to navigate to, so whether or not this trend will sink or swim is still a mystery. In 2017, expect to not only see desktop navigation menus taking on new layouts, but to grow in size. As the saying goes, “go big or go home”, and right now it looks like meganavs might be a big thing.

Huffington Post has had their own version of a meganav for some time now.

[caption id="attachment_151930" align="aligncenter" width="1000"]Huffington Post http://ift.tt/zP5LE8[/caption]

Mega navigations, 'meganavs' for short, as the name implies, are large navigation menus that completely take over the screen to immerse the user and keep them on track, boosting conversions and the user experience at the same time. It doesn’t stop there however; meganavs also can reveal subpages, featured content, and in some cases, advertising Meganavs are more than a visual trend, they can completely change the structure and content strategy of the website.

Continue reading %5 Emerging Trends to Amp-up Your Web Designs in 2017%


by Alex Walker via SitePoint

Studio Ultra


by Rob Hope via One Page Love

Les Pedaleurs

An interactive experience about bike lovers
by via Awwwards - Sites of the day

Scraping Webpages in Python With Beautiful Soup: The Basics

In a previous tutorial, I showed you how to use the Requests module to access webpages using Python. The tutorial covered a lot of topics like making GET/POST requests and downloading things like images or PDFs programmatically. The one thing missing from that tutorial was a guide on scraping webpages you accessed using Requests to extract the information that you need.

In this tutorial, you will learn about Beautiful Soup, which is a Python library to extract data from HTML files. The focus in this tutorial will be on learning the basics of the library, and more advanced topics will be covered in the next tutorial. Please note that this tutorial uses Beautiful Soup 4 for all the examples.

Installation

You can install Beautiful Soup 4 using pip. The package name is beautifulsoup4. It should work on both Python 2 and Python 3.

If you don’t have pip installed on your system, you can directly download the Beautiful Soup 4 source tarball and install it using setup.py.

BeautifulSoup is originally packaged as Python 2 code. When you install it for use with Python 3, it is automatically updated to Python 3 code. The code won’t be converted unless you install the package. Here are a few common errors that you might notice:

  • The “No module named HTMLParser” ImportError occurs when you are running the Python 2 version of the code under Python 3.
  • The “No module named html.parser” ImportError occurs when you are running the Python 3 version of the code under Python 2.

Both the errors above can be corrected by uninstalling and reinstalling Beautiful Soup.

Installing a Parser

Before discussing the differences between different parsers that you can use with Beautiful Soup, let’s write the code to create a soup.

The BeautifulSoup object can accept two arguments. The first argument is the actual markup, and the second argument is the parser that you want to use. The different parsers are: html.parserlxml, and html5lib. The lxml parser has two versions, an HTML parser and an XML parser.

The html.parser is a built-in parser, and it does not work so well in older versions of Python. You can install the other parsers using the following commands:

The lxml parser is very fast and can be used to quickly parse given HTML. On the other hand, the html5lib parser is very slow, but it is also extremely lenient. Here is an example of using each of these parsers:

The differences outlined by the above example only matter when you are parsing invalid HTML. However, most of the HTML on the web is malformed, and knowing these differences will help you in debugging some parsing errors and deciding which parser you want to use in a project. Generally, the lxml parser is a very good choice.

Objects in Beautiful Soup

Beautiful Soup parses the given HTML document into a tree of Python objects. There are four main Python objects that you need to know about: TagNavigableStringBeautifulSoup, and Comment.

The Tag object refers to an actual XML or HTML tag in the document. You can access the name of a tag using tag.name. You can also set a tag’s name to something else. The name change will be visible in the markup generated by Beautiful Soup.

You can access different attributes like the class and id of a tag using tag['class'] and tag['id'] respectively. You can also access the whole dictionary of attributes using tag.attrs. You can also add, remove or modify a tag’s attributes. The attributes like an element’s class which can take multiple values are stored as a list.

The text within a tag is stored as a NavigableString in Beautiful Soup. It has a few useful methods like replace_with("string") to replace the text within a tag. You can also convert a NavigableString to unicode string using unicode().

Beautiful Soup also allows you to access the comments in a webpage. These comments are stored as a Comment object, which is also basically a NavigableString.

You have already learned about the BeautifulSoup object in the previous section. It is used to represent the document as a whole. Since it is not an actual object, it does not have any name or attributes.

Getting the Title, Headings, and Links

You can extract the page title and other such data very easily using Beautiful Soup. Let’s scrape the Wikipedia page about Python. First, you will have to get the markup of the page using the following code based on the Requests module tutorial to access webpages.

Now that you have created the soup, you can get the title of the webpage using the following code:

You can also scrape the webpage for other information like the main heading or the first paragraph, their classes, or the id attribute.

Similarly, you can iterate through all the links or subheading in a document using the following code:

Navigating the DOM

You can navigate through the DOM tree using regular tag names. Chaining those tag names can help you navigate the tree more deeply. For example, you can get the first link in the first paragraph of the given Wikipedia page by using soup.p.a. All the links in the first paragraph can be accessed by using soup.p.find_all('a').

You can also access all the children of a tag as a list by using tag.contents. To get the children at a specific index, you can use tag.contents[index]. You can also iterate over a tag's children by using the .children attribute.

Both .children and .contents are useful only when you want to access the direct or first-level descendants of a tag. To get all the descendants, you can use the .descendants attribute.

You can also access the parent of an element using the .parent attribute. Similarly, you can access all the ancestors of an element using the .parents attribute. The parent of the top-level <html> tag is the BeautifulSoup Object itself, and its parent is None.

You can access the previous and next sibling of an element using the .previous_sibling and .next_sibling attributes. 

For two elements to be siblings, they should have the same parent. This means that the first child of an element will not have a previous sibling. Similarly, the last child of the element will not have a next sibling. In actual webpages, the previous and next siblings of an element will most probably be a new line character. 

You can also iterate over all the siblings of an element using .previous_siblings and .next_siblings.

You can go to the element that comes immediately after the current element using the .next_element attribute. To access the element that comes immediately before the current element, use the .previous_element attribute. 

Similarly, you can iterate over all the elements that come before and after the current element using .previous_elements and .next_elements respectively.

Final Thoughts

After completing this tutorial, you should now have a good understanding of the main differences between different HTML parsers. You should now also be able to navigate through a webpage and extract important data. This can be helpful when you want to analyze all the headings or links on a given website.

In the next part of the series, you will learn how to use the Beautiful Soup library to search and modify the DOM.


by Monty Shokeen via Envato Tuts+ Code

4 Tips for Successful Social Media Contests

Do you run social media contests for your business? Looking for ways to make your contests deliver more than entries? A strong social media contest can generate real value for your business. In this article, you’ll discover four tips for executing a successful social media contest. #1: Appeal to Prospective Customers, Not Just Entrants The [...]

This post 4 Tips for Successful Social Media Contests first appeared on .
- Your Guide to the Social Media Jungle


by James Scherer via