Wednesday, September 30, 2015

This Week in Mobile Web Development (#76)

Read this on the Web

Mobile Web Weekly September 30, 2015   #76
Holly Schinsky recommends
How to make web forms work better on mobile — Taking time to consider the device you’re targeting can make a huge difference in the usability of your web forms over simply making them responsive.
Creative Bloq
Brian Rinaldi recommends
Mobile Web Is Top Of Funnel, Mobile App Is Bottom Of Funnel — Data shows that mobile web unique visitor growth is faster than mobile app visitor growth and Fred Wilson says that this is because mobile web is “top of funnel” for user acquisition.
AVC
Holly Schinsky recommends
Visual Studio Emulators: Debug WebGL and HTML5 Mobile Experiences — Microsoft announces new emulators for debugging WebGL and HTML5 mobile apps.
SitePoint - David Rousset
This issue is sponsored by Tabris.JS
Native mobile UIs in JavaScript with Tabris.js - iOS 9 ready — Tabris.js is a great way to develop apps with native UIs for Android and iOS in JavaScript. Jump in and give it a try!
Tabris.JS

Brian Rinaldi recommends
Patterns — Responsive Web Design — A series of patterns for building responsive website designs.
Responsive Design.is
Holly Schinsky recommends
Getting Started Building Apps with Ionic and Parse — A set of lessons to help you get started building mobile apps with Angular/Ionic and Parse.com.
Aaron K Saunders
Holly Schinsky recommends
Hello Backend: Your Second Ionic Framework App — Part 2 in a series on building a hybrid app with Ionic. In this post, learn how to add the backend to your Ionic hybrid app with a factory talking to a Random User Generator API.
McGivery.com
Holly Schinsky recommends
How To Use LokiJS For Local Storage In Your Ionic App — A tutorial on using the LokiJS in-memory database solution for local storage in your hybrid apps.
Gone Hybrid
Holly Schinsky recommends
PhoneGap Day 2016 — The PhoneGap Day 2016 website has been launched with links for early bird tickets, call for speakers and more details around the scheduling and venue.
PhoneGap Day 2016
Holly Schinsky recommends
Android Builds Now Using Gradle on PhoneGap Build By Default — PhoneGap Build is now using Gradle for all Android builds by default. Read on for details.
PhoneGap Build Blog
Peter Cooper recommends
What I Learned While Publishing An HTML5 Mobile App
Thomas Hunter II
Brian Rinaldi recommends
PSA: Safari on iOS9 has a media query bug — The viewport size is set incorrectly when the viewport meta tag contains “initial-scale=1” or “width=device-width”, and the page contains an element that is wider than the desired viewport’s boundary.
Reddit
Brian Rinaldi recommends
A note on weird font size changes in mobile Chrome — An unusual test case that causes text to automatically change size despite the CSS.
QuirksMode
Brian Rinaldi recommends
A Glimpse of Latest Mobile App Development Trends — 15 development trends in the mobile app market according to Katie Stanfield.
InfoQ
Holly Schinsky recommends
Tutorial: Create an Instagram Gallery App with Onsen UI + React — How to use Onsen UI with React to develop a simple Instagram app.
Onsen.io
Holly Schinsky recommends
A Beginner’s Guide to Performant Design Decisions — Tips to implement good design practices to achieve the best 'perceived performance' in your design.
Sparkbox
Brian Rinaldi recommends
Integrating the Calendar into your Ionic App — An example of integrating an app with the device’s calendar.
Raymond Camden
Brian Rinaldi recommends
Rapid Cross-OS Mobile App Development: Lessons Learned — A discussion of the process of planning, developing and testing a cross-platform hybrid app by Jordan Crone.
Smashing Magazine
Brian Rinaldi recommends
Another Cordova Mashup – Pixelatize — A sample hybrid mobile app integrating Jenn Schiffer’s pixelatize to create pixelated images.
Raymond Camden
Holly Schinsky recommends
Weigh - A command line tool for checking the weight of browserifiable modules — A command line tool to check the weight (in bytes) of any browserifiable module.
Bjørge Næss
Curated by Brian Rinaldi and Holly Schinsky for Cooper Press.
Cooper Press is located at Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK
Update your email address
or stop receiving MWW here


by via Mobile Web Weekly

This Week's HTML5 and Browser Technology News (Issue 208)


Read this e-mail on the Web
HTML 5 Weekly
Issue 208 — September 30, 2015
Chris Gannon
A well written and thorough tutorial that goes from doing illustrative work in Adobe Illustrator through to exporting to SVG and writing code to make the lamp ‘work’.


US Digital Service
Open source UI components and a visual style guide to create consistency and beautiful user experiences across U.S. federal government websites. They recommend using Sass, Bourbon and Neat throughout.


Steve Faulkner
With just 5 elements (aside, footer, header, main and nav) you can provide the understanding and navigation benefits of content organisation to users who would otherwise not be able to perceive it from visual cues alone.


Mailgun  Sponsored
Easy SMTP integration and a simple, RESTful API abstracts away the messy details of sending transactional or bulk email. Scale quickly, whether you need to send 10 or 10 million emails. Start sending email now with Mailgun

Mailgun

Kezz Bracey
“You should learn what [PostCSS] is and how to use it ASAP,” says Kezz Bracey. PostCSS is a tool that transforms CSS via JavaScript plugins and offers a lot of interesting functionality.


BBC - James East
BBC iPlayer is one the most heavily used video on demand services in the world and they’re using the new open MPEG-DASH standard and Media Source Extensions to stream video to an HTML5 video player.


Franklin Ta
A CSS3 filter trick where you invert the colors and set opacity to 50%.


Mozilla Hacks
“Using a new specification called Subresource Integrity, a website can include JavaScript that will stop working if it has been modified.”


Jobs

In brief

Curated by Peter Cooper and published by Cooper Press.
Want to post a job? E-mail us or use our self-serve system.

Unsubscribe : Change email address : Read this issue on the Web

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


by via HTML5 Weekly

The Hitchhiker's Guide to Docker and Modulus

WP_Query Arguments: Custom Fields

If you've been following this series, you'll have an understanding of how WP_Query is structured and how you use it to write custom queries. To be able to define what WP_Query fetches from the database, you need to know what arguments you can use to query data.

WP_Query has a large number of possible arguments, which makes it extremely flexible. As you can use it to query just about anything held in your wp_posts table, it has arguments for every permutation of query you might want to run on your content.

In this tutorial I'll look at the arguments for custom fields. But first, a quick recap on how you code arguments in WP_Query.

A Recap on How Arguments Work in WP_Query

Before we start, let's have a quick recap on how arguments work in WP_Query. When you code WP_Query in your themes or plugins, you need to include four main elements:

  • the arguments for the query, using parameters which will be covered in this tutorial
  • the query itself
  • the loop
  • finishing off: closing if and while tags and resetting post data

In practice this will look something like the following:

The arguments tell WordPress what data to fetch from the database and it's those that I'll cover here. So all we're focusing on here is the first part of the code:

As you can see, the arguments are contained in an array. You'll learn how to code them as you work through this tutorial.

Coding Your Arguments

There is a specific way to code the arguments in the array, which is as follows:

You must enclose the parameters and their values in single quotation marks, use => between them, and separate them with a comma. If you get this wrong, WordPress may not add all of your arguments to the query or you may get a white screen.

Custom Field Parameters

Custom fields, also known as post metadata, can use a separate class called WP_Meta_Query. This means that if you want to run a query just for post metadata, you can use either WP_Meta_Query or WP_Query (which accesses WP_Meta_Query), while if you want to query for post metadata and other items such as post type, you use WP_Query.

The WP_Meta_Query class is covered in detail elsewhere in this series so I won't go into detail on that here, but the main difference between using that and WP_Query is that WP_Query lets you create some simple arguments without using nested arrays.

Parameters for Simple Custom Field Queries

The main parameters for using WP_Query to query custom fields are as follows:

  • meta_key (string): Custom field key.
  • meta_value (string): Custom field value.
  • meta_value_num (number): Custom field value.
  • meta_compare (string): Operator to test the 'meta_value'. Possible values are '=''!=', '>''>=''<''<=''LIKE''NOT LIKE''IN''NOT IN''BETWEEN''NOT BETWEEN''NOT EXISTS''REGEXP''NOT REGEXP' or 'RLIKE'. Default value is '='.

Use these parameters for a simple custom field query. So for example to output posts which have a custom field with the key key1 (regardless of its value), you use this argument:

This would return all posts with a custom field with the key1 key, whatever the value.

If you wanted to specify a value you would add an extra argument for that:

This would return all posts with a custom field with the key1 key and the value1 value for it.

Alternatively you could fetch all posts with a custom field with the value value1, regardless of the key. This might be useful where you have multiple custom field keys with duplicate values:

So as you can see, you can query for just the custom field's key or value—you don't always have to specify both.

Using the meta_compare Argument

You may have noticed above that there are a lot of potential parameters for the meta_compare argument, and their use may not always be immediately apparent. Let's take a look at the ones you might use the most:

  • =: Equals. This is the default, so if you don't include a meta_compare argument, this is what WP_Query will use.
  • !+: Is not equal to.
  • >: Greater than.
  • >=: Greater than or equal to.
  • < : Less than.
  • <=: Less than or equal to.
  • LIKE: This will ignore the case of the value you use, and you can also use it with wildcard characters to find values like the value you're looking for.
  • NOT LIKE: Works in a similar way to LIKE but queries the opposite!
  • IN: Use this with an array in the 'value' argument to find posts with one or more of the values in the array.
  • BETWEEN: Use with an array of two numerical values (specified in the meta_value argument) to find posts with a custom field value between those values (but not equal to them).
  • NOT BETWEEN: Queries posts with custom field values outside an array of two numerical values specified by the meta_value argument.

Let's take a look at some example uses of this argument.

First up, you can exclude custom field keys or values using the meta_compare argument. So to fetch all posts except those with a custom field with the key1 key, you would use this:

You could also use the 'NOT IN' value for the meta_compare argument, which can also be used with a string of multiple values:

This would query posts which don't have custom fields with the key1 or key2 values. If you want to be more specific, maybe querying for posts with one custom field and not another, you use a nested array, which we'll come to shortly.

The examples above use non-numerical values. You can use WP_Query with custom fields that have numerical values, not only to fetch posts with a custom field with that value, but also to fetch ones with custom fields with higher or lower values. You might use this in a store for example, if looking for items above or below a given price.

To find posts with a custom field value above a given number, use something like this:

This would return all posts with a custom field with the numkey key and a value of over 100. If you wanted to query for values of 100 or over, you would use 'meta_compare' => '>='.

You can also find posts whose custom fields have values between two numbers you specify using the BETWEEN argument and an array:

This would find all posts with a value in the numkey custom field between 100 and 200.

Nested Custom Field Queries

If you want to query for more than one custom field or use more than one operator, you can use a nested array.

These take the following structure:

The way that you structure the 'meta_query' argument in WP_Query is exactly the same as how you do it using the WP_Meta_Query class, which is covered in a later tutorial in this series, so I won't duplicate that here.

Since WordPress version 4.1 you can also use multiple levels of nested array to create ever more complex and precise queries. These look something like this:

This lets you use different relations at different levels in your query, for example querying for posts with a value in one custom field key, or with both of two values in another custom field key. This is covered in more detail, with examples, in the tutorial on the WP_Meta_Query class, which is part of this series.

Summary

Using the WP_Query class to query your posts' metadata (or custom fields) gives you a lot of flexibility, with multiple potential arguments combined with a number of operators to help you query your database in exactly the way you want to.

If you only want to use post metadata arguments in your query (and not combine it with other arguments, for example for post types), you can also use the WP_Meta_Query class, which is covered later in this series.


by Rachel McCollin via Tuts+ Code

How to Use Social Media Insights to Improve Your Marketing

kl-social-insights-improve-marketing-560

Are you marketing on Twitter, Facebook or Pinterest? Do you know which type of posts your followers prefer? Social media analytics let you see who your followers are and what they like. In this article you’ll discover how to use your audience insights from Twitter, Facebook and Pinterest to improve your social media marketing. #1: Track Follower Preferences on Twitter […]

This post How to Use Social Media Insights to Improve Your Marketing first appeared on Social Media Examiner.
Social Media Examiner - Your Guide to the Social Media Jungle


by Katie Leimkuehler via Social Media Examiner

Fullscreen Video Opening Animation with CSS3

In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.

The post Fullscreen Video Opening Animation with CSS3 appeared first on jQuery Rain.


by Admin via jQuery Rain

Lorem : jQuery plugin for Random Lorem Ipsum Snippets

A jQuery plugin that generates random ‘lorem ipsum’ snippets on the fly. When designing/developing web interfaces you sometimes want to model content you don’t have (filler). Standardly, you copy snippets of the of an altered Latin text into your code.

The post Lorem : jQuery plugin for Random Lorem Ipsum Snippets appeared first on jQuery Rain.


by Admin via jQuery Rain