Wednesday, April 5, 2017

Your Regular WordPress Maintenance Checklist

Brush your teeth. Pick up your socks. Make your bed. Wash the dishes. Life is full of lots of little jobs that aren’t particularly fun to do, but things get ugly if you don’t. Maintaining a website is just the same.

Here’s a collection of WordPress maintenance checklists for you. Do them regularly, and your site will be speedy and secure. Neglect them, and bad things may happen:

  • Your site may load as slow as treacle.
  • Important functionality might break into a hundred pieces.
  • Your visitors’ computers may be infected with malware.
  • Your site may be be delisted from search engines.

So keep on top of your maintenance. Do it regularly, and it won’t take long.

Everyone’s site is different, and your maintenance priorities will be different too. I’ve given you daily, weekly, monthly, quarterly/half-yearly and yearly lists. Feel free to adjust them to your needs. And rather than doing the big quarterly list in one sitting, you may prefer to tick two or three items each month.

Finally, if you have trouble getting motivated to do your WordPress housekeeping, try a plugin like Maintenance Checklist to streamline things.

That’s enough talk. Now get to work!

Continue reading %Your Regular WordPress Maintenance Checklist%


by Adrian Try via SitePoint

#284: Does CSS Grid Replace Flexbox?

Read this e-mail on the Web
FrontEnd Focus
Issue 284 — April 5, 2017
It’s in Chrome Canary only for now, but it shows you which lines were and weren’t used in each JS/CSS file.
LogRocket

A question that might be on your mind after the blitz of CSS Grid articles lately. In short, not exactly, but there are some good examples here.
Robin Rendle

David Gilbertson assesses each of the reasons for why you might use these units of measure.
Hacker Noon

linode
Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server.
linode   Sponsor

A 24 level online game where you write CSS to grow a garden with the goal of learning CSS Grid along the way.
Thomas Park

Edge was the first browser to support CSS Grid, but it’s in a slightly different, older form. You can check progress here.
Microsoft

A crash course in DOM manipulation with vanilla JavaScript, using functions like querySelectorAll and addEventListener.
Sebastian Seitz

How to be more aware of the diverse range of people and devices that may access your sites of when developing for the Web. (Part 2.)
Bruce Lawson

Jobs Supported by Hired.com

Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

WebAssembly Library Supercharges Web Video Apps news
The WebDSP library features algorithms for building web applications operating on media data and provides better performance than JavaScript.
Paul Krill

New Inspector and Debugger Features for Firefox 54 news
Some improvements to the responsive design mode in Firefox Developer Edition 54.
Mozilla Hacks

Full-day Workshop: Using ES6 and React with Netflix's Brian Holt course
React eschews the traditional MVC architecture, a counter-intuitive approach Brian explains along with JSX, React best practices, and the React component lifecycle.
Forward Courses  Sponsor

Styling Vertical Chinese, Japanese, Korean and Mongolian Text tutorial
How to use CSS to produce vertical text for languages such as Chinese, Japanese, Korean, and Mongolian. The CSS specification contains a lot of implementation-specific information.
W3C

CSS Viewport Units: A Quick Start tutorial
An introduction to the use of CSS viewport units for responsive typography and layout elements.
Asha Laxmi

Quickly Setting Up Gulp and Sass (for Beginners) tutorial
Petar Vukmanovic

Grid 'Fallbacks' and Overrides tutorial
A cheatsheet to help create good fallbacks/overrides for Grid Layout.
Rachel Andrew

Using CSS Transitions on Auto Dimensions tutorial
Brandon Smith

A 17 Minute Overview of Twitter's Front-End Architecture video
Giuseppe Gurgone

Playing with CSS Grids opinion
“Front-end design is finally making print-like design easier to achieve.”
Marco Barbosa

CSS is Broken: My Dime a Dozen Opinion opinion
Jeremy Wagner

Test your application against full-sized database copies in seconds tools
Create SQL Server database copies in seconds & test your application as you develop using SQL Clone. Try free.
Red Gate  Sponsor

Microsoft Announces Edge Testing in Partnership with BrowserStack tools
Run Microsoft Edge ‘inside’ your browser on macOS, Windows, or Linux for free.
Microsoft

CSS Cursors: View CSS Cursors Your Browser Supports tools
Wes Bos

SweetAlert2: An Accessible (WAI-ARIA) Replacement for JS Alerts code

Pure.css: Small, Responsive CSS Modules code
Very lightweight, covers grids, forms, buttons, tables, and menus.
Yahoo

Creating A Responsive Site Without Media Queries demo
A simple Flexbox and CSS Grid demo showing a responsive layout without media queries.
Jonathan Snook

Curated by Peter Cooper and Chris Brandrick and published by Cooperpress.
Like this? You may also enjoy: JavaScript Weekly, Node Weekly, and React Status.

Stop getting FrontEnd Focus : Change email address : Read this issue on the Web

© Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK


by via FrontEnd Focus

Design Tricks with SVG Filters: A Masked Blur Effect

Last week, we released our new WordPress ecommerce theme, and received a lot of questions about the masked blur effect used on the banner images. This is a live effect that can be applied to any image you give it.

I think it’s a nice treatment and more importantly, the general technique opens up lots of possibilities for crafty designers. I’m going to run you through what I’ve learned today.

enter image description here

In short, the above ‘masked blur effect’:

  • uses as a single image
  • is non-destructive (i.e. it doesn’t permanently alter your original JPEG or PNG)
  • can be applied or removed with a line of text
  • can be applied via a mask of practically any shape.
  • is relatively well-supported in modern browsers – though mask positioning can be tricky.

First up, SVG is the key to this technique. While we all know SVG is a vector format –it says so on the box – the irony is, SVG has a bunch of pixel-based tricks that PNG and JPG can only dream about.

SVG Filters 101

Let’s start with the basics and the simplest of filters. Setting up a basic SVG filter is as easy as creating a set of filter tags and naming the filter with a reference ID – in our case we’ve called ours ‘myblurlayer’.

Adding the following SVG snippet to your page won’t render anything on screen, but it creates a new filter that you can then apply to any page element – images, text, panels, whatever. Increasing the stdDeviation increases the blur.

<svg xmlns="http://ift.tt/nvqhV5" version="1.1" height="0"> <filter id="myblurfilter" width="110%" height="100%"> <feGaussianBlur stdDeviation="2" result="blur" /> </filter> </svg>

In this example, we’ve used a simple SVG blur effect (i.e. feGaussianBlur), but there are dozens of other filter effects we could have used. Most commonly, we apply the filter using CSS.

.blurme { -webkikt-filter: url('#myblurfilter'); filter: url('#myblurfilter'); }

<img class='blurme' src='myimage.png' />

(Sidenote: Yes, I know there are simpler ways to blur, if that’s all you need)

Now, this CSS class approach works fine in most browsers for simple filter effects. Unfortunately, as your filters become more ambitious, bugs in Safari make this unreliable.

I’ve found you generally get more consistent results by placing your base image (JPG or PNG) inside their own SVG element – rather than a standard HTML IMG tag. So, your image looks something like this:

<svg xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw"> <image x="0" width="100%" height="100%" xlink:href="http://ift.tt/2oa0QhA"/> </svg>

In the browser, this shouldn’t look any different to your garden-variety IMG tag. Later we’ll apply our filter directly to that <image> element.

Adding a Mask to the Filter

SVG offers a handy filter effect called <feImage> that converts images into objects that SVG can then manipulate – in our case, to use as a mask. It looks like this.

<feImage id="feimage" xlink:href="our-mask-will-go-here" x="0" y="0" height="300px" result="mask" preserveAspectRatio="none"/>

Technically, our xlink:href can accept a link to an external file (for instance, ‘mask.svg’), but I had trouble getting this to work consistently across browsers. Instead, we’re going to code our SVG mask directly into the filter.

Creating your Mask Shape

Before we write any more SVG, we need to create the mask we want to use. I’m going for a very simple rectangular ‘letterbox’ effect, but there’s nothing stopping you from using any vector shape you like – though I recommend keeping your mask relatively simple.

For this, I’m going to use a nice little online SVG editor called Method-Draw. It’s simple, free and should encourage you to keep your mask simple.

Method Draw Editor

When you’ve created a simple black and white shape, click on ‘View’ -> ‘Source’, and copy the SVG markup to your clipboard.

To bring this mask into our filter, we’ll need to convert it to a ‘data URI’ – basically just an encoded version of our SVG markup that is easy for the browser to use but looks like complete gobbledygook to us.

Open this Data URI Converter in a new tab, click the ‘Provide text’ option and paste your SVG markup into the text field.

Data URI converter

We’ll need to tell the converter we are giving it an SVG, so enter image/svg+xml into the Enter Mime Type field. When you click ‘Generate Data URI’, you get a long string of mostly random-looking characters – that’s our converted mask.

Copy this to your clipboard, switch back to your SVG filter code and paste it into the xlink:href= section of our <feImage> .

Currently we our filter should look something like this:

<svg xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw"> <defs> <filter id="blurlayer" width="110%" height="100%"> <feGaussianBlur stdDeviation="4" result="blur"/> <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4NCiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjMwMiIgd2lkdGg9IjEwMjYiIHk9Ii0xIiB4PSItMSIvPg0KIDwvZz4NCg0KIDxnPg0KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+DQogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIxMzMiIHdpZHRoPSIxMDI0IiB5PSI4NC41IiB4PSIwIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwMDAwIi8+DQogPC9nPg0KPC9zdmc+" x="0" y="0" height="300px" result="mask" /> ... <!--more to come here --> </filter> </defs> </svg>

Still with me?

SVG Sandwiches

One of the cool SVG features is the ability to ‘sandwich together’ multiple effects into a single image treatment. The first thing we need to do is combine our mask and the blur filter into a single entity.
It’s a little like plugging different inputs into your TV. We use <feComposite> for this.

``

As you can see, we’re taking the output from our mask (result="mask") and the output from our blur filter (result="blur") and them using (in2="mask") and (in="blur") to combine them. We’re calling the result ‘comp’.

Combining the Filter and the Image Source

Now we just to tell the filter what to do with this masked blur – which is apply it to any image we give it. For this, we can use <feMerge> to merge our masked blur effect with whatever image it gets. Happily, SVG understands the concept of a ‘SourceGraphic’, so we can just tell it merge ‘SourceGraphic’ with ‘comp’.

It looks like this.

<feMerge result="merge"> <feMergeNode in="SourceGraphic" /> <feMergeNode in="comp" /> </feMerge>

Our filter is ready. We just have to apply it to an image.

I’ve put my source graphic – a JPG – in a separate SVG element and applied the filter with filter="url(#blurlayer)"

<svg xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw"> <image filter="url(#blurlayer)" x="0" y="0" width="100%" height="300px" xlink:href="http://ift.tt/2oa0QhA"/> </svg>

Putting the whole thing together, here’s a simplified demo:

http://ift.tt/2o9Y3Vv

One more thing

As we’ve learned, SVG filters allow us to layer effects on top of one another. This means we can get even trickier by adjusting the color of the masked area with the <feColormatrix> filter effect.

Adding the following to the top of our filter code will darken the masked area and increase the text contrast.

<feColorMatrix type="matrix" values=".7 0 0 0 0 0 .7 0 0 0 0 0 .7 0 0 0 0 0 1 0 " />

I’m not going to explain the subtleties of feColorMatrix here as Una Kravets has already covered it beautifully here.

There’s also a nice push-button tool here shows you how different matrices effect the color of an image. Often playing with a live demo is the fastest way to learn.

And here’s the final demo with the tweaked colors.

http://ift.tt/2nJYBOZ

Stepping it up

To keep things easy to follow, I deliberately went with the simplest of mask shapes – a rectangle. But we can do more interesting things.

enter image description here

Here’s a more complex geometric mask combined with a more intense color effect.

Continue reading %Design Tricks with SVG Filters: A Masked Blur Effect%


by Alex Walker via SitePoint

Building a UI with Kotlin and Anko

Since the beginning of Android development working with UI has been an XML thing. Though theoretically, UI could be programmed using Java, it has not been of much use. Not long ago, JetBrains introduced Kotlin, a modern language targeting the JVM, which could serve this purpose for Android.

Jetbrains announced Anko as a faster and easier style of development in Android. Kotlin offers the Anko library as a DSL(Domain Specific Language) to design an Android screen. A quick example:

Following is a plain Android UI consisting of an imageView and a Button.

Continue reading %Building a UI with Kotlin and Anko%


by Ankul Jain via SitePoint

GT Walsheim Typeface

Long scrolling One Pager showcasing the beautiful GT Walsheim Typeface and features an awesome interactive weight demo slider.

by Rob Hope via One Page Love

European Music Incubator

A training program for European emerging musicians based on entrepreneurial strategy
by via Awwwards - Sites of the day

Scraping Webpages in Python With Beautiful Soup: Search and DOM Modification

In the last tutorial, you learned the basics of the Beautiful Soup library. Besides navigating the DOM tree, you can also search for elements with a given class or id. You can also modify the DOM tree using this library. 

In this tutorial, you will learn about different methods that will help you with the search and modifications. We will be scraping the same Wikipedia page about Python from our last tutorial.

Filters for Searching the Tree

Beautiful Soup has a lot of methods for searching the DOM tree. These methods are very similar and take the same kinds of filters as arguments. Therefore, it makes sense to properly understand the different filters before reading about the methods. I will be using the same find_all() method to explain the difference between different filters.

The simplest filter that you can pass to any search method is a string. Beautiful Soup will then search through the document to find a tag that exactly matches the string.

You can also pass a regular expression object to the find_all() method. This time, Beautiful Soup will filter the tree by matching all the tags against a given regular expression.

The code will look for all the tags that begin with "h" and are followed by a digit from 1 to 6. In other words, it will be looking for all the heading tags in the document.

Instead of using regex, you could achieve the same result by passing a list of all the tags that you want Beautiful Soup to match against the document.

You can also pass True as a parameter to the find_all() method. The code will then return all the tags in the document. The output below means that there are currently 4,339 tags in the Wikipedia page that we are parsing.

If you are still not able to find what you are looking for with any of the above filters, you can define your own function that takes an element as its only argument. The function also needs to return True if there is a match and False otherwise. Depending on what you need, you can make the function as complicated as it needs to be to do the job. Here is a very simple example:

The above function is going through the same Wikipedia Python page and looking for unordered lists that have more than 20 children.

Searching the DOM Tree Using Built-In Functions

One of the most popular methods for searching through the DOM is find_all(). It will go through all the tag's descendants and return a list of all the descendants that match your search criteria. This method has the following signature:

The name argument is the name of the tag that you want this function to search for while going through the tree. You are free to provide a string, a list, a regular expression, a function, or the value True as a name.

You can also filter the elements in the DOM tree on the basis of different attributes like id, href, etc. You can also get all the elements with a specific attribute regardless of its value using attribute=True. Searching for elements with a specific class is different from searching for regular attributes. Since class is a reserved keyword in Python, you will have to use the class_ keyword argument when looking for elements with a specific class.

You can see that the document has 1,734 tags with a class attribute and 425 tags with an id attribute. If you only need the first few of these results, you can pass a number to the method as the value of limit. Passing this value will instruct Beautiful Soup to stop looking for more elements once it has reached a certain number. Here is an example:

When you use the find_all() method, you are telling Beautiful Soup to go through all the descendants of a given tag to find what you are looking for. Sometimes, you want to look for an element only in the direct children on a tag. This can be achieved by passing recursive=False to the find_all() method.

If you are interested in finding only one result for a particular search query, you can use the find() method to find it instead of passing limit=1 to find_all(). The only difference between the results returned by these two methods is that find_all() returns a list with only one element and find() just returns the result.

The find() and find_all() methods search through all the descendants of a given tag to search for an element. There are ten other very similar methods that you can use to iterate through the DOM tree in different directions.

The find_parent() and find_parents() methods traverse up the DOM tree to find the given element. The find_next_sibling() and find_next_siblings() methods will iterate over all the siblings of the element that come after the current one. Similarly, the find_previous_sibling() and find_previous_siblings() methods will iterate over all the siblings of the element that come before the current one.

The find_next() and find_all_next() methods will iterate over all the tags and strings that come after the current element. Similarly, the find_previous() and find_all_previous() methods will iterate over all the tags and strings that come before the current element.

You can also search for elements using CSS selectors with the help of the select() method. Here are a few examples:

Modifying the Tree

You can not only search through the DOM tree to find an element but also modify it. It is very easy to rename a tag and modify its attributes.

Continuing from our last example, you can replace a tag's contents with a given string using the .string attribute. If you don't want to replace the contents but add something extra at the end of the tag, you can use the append() method. 

Similarly, if you want to insert something inside a tag at a specific location, you can use the insert() method. The first parameter for this method is the position or index at which you want to insert the content, and the second parameter is the content itself. You can remove all the content inside a tag using the clear() method. This will just leave you with the tag itself and its attributes.

At the beginning of this section, you selected a level two heading from the document and changed it to a level three heading. Using the same selector again will now show you the next level two heading that came after the original. This makes sense because the original heading is no longer a level two heading. 

The original heading can now be selected using h3:nth-of-type(2). If you completely want to remove an element or tag and all the content inside it from the tree, you can use the decompose() method.

Once you've decomposed or removed the original heading, the heading in the third spot takes its place.

If you want to remove a tag and its contents from the tree but don't want to completely destroy the tag, you can use the extract() method. This method will return the tag that it extracted. You will now have two different trees that you can parse. The root of the new tree will be the tag that you just extracted.

You can also replace a tag inside the tree with something else of your choice using the replace_with() method. This method will return the tag or string that it replaced. It can be helpful if you want to put the replaced content somewhere else in the document.

In the above code, the main heading of the document has been replaced with a b tag. The document no longer has an h1 tag, and that is why print(soup.h1) now prints None.

Final Thoughts

After reading the two tutorials in this series, you should now be able to parse different webpages and extract important data from the document. You should also be able to retrieve the original webpage, modify it to suit your own needs, and save the modified version locally.

If you have any questions regarding this tutorial, please let me know in the comments.


by Monty Shokeen via Envato Tuts+ Code