Deliver exceptional customer experiences in your product


(This is a sponsored post.)

​Pendo is a product cloud that helps create lovable products that customers can’t live without. Pendo enables product teams to understand product usage, collect user feedback, measure NPS, assist users in their apps and promote new features in product — all without requiring any engineering resources. This unique combination of capabilities is all built on a common infrastructure of product data and results in better onboarding, increased user engagement, improved customer satisfaction, reduced churn, and increased revenue.

Pendo is the proven choice of innovative product leaders at Salesforce, Marketo, Zendesk, Citrix, BMC and many more leading companies.

Request a demo of Pendo today.​

Direct Link to ArticlePermalink

The post Deliver exceptional customer experiences in your product appeared first on CSS-Tricks.



Source link

The Beginners Guide to WordPress SEO


WordPress is used by millions of people right around the world to setup websites for a variety of applications. While it’s popular because it’s easy to get up and running and use, it still requires proper optimization in order to really improve your overall search engine rankings.

This guide will give WordPress beginners a basic overview of WordPress SEO to help your website get found online.

This article will cover:

  • Title Tags
  • Meta Descriptions
  • Permalinks
  • Keyword Phrases
  • Alt Text
  • Internal Linking
  • The Yoast SEO Plugin
  • Basic Keyword Research
  • WordPress Tweaks

So let’s get started!

Your Guide to WordPress Search Engine Optimization

Title Tags

Title tags are used in the head section of a web page to communicate your page title better to both search engines and visitors. WordPress generally features a number of different pages which include just to name a few:

  • Home page
  • Individual pages
  • Archived post views
  • Single post views
  • Category archives
  • Date-based archives
  • Author archives
  • 404 error pages
  • Tag archives
  • Search results
  • Category archives
  • Archived post views

Title tags help to boost SEO efforts which in-turn can help to boost your overall rankings. The title tag will tell your visitors what the post is about before they click into it. The title tag is generally seen in search engine results as shown below:

Title Tag

Meta Descriptions

In WordPress, if you’ve installed the Yoast SEO plugin (which we’ll cover later), you’ll see an area for the meta description and keyword to be implemented. For optimal SEO, the meta description should include the relevant keyword that’s going to be used for the overall post. The title of your post should also feature the relevant keyword for optimal impact. It’s important to make your content clear for users, not just search engines.

The post The Beginners Guide to WordPress SEO appeared first on SitePoint.



Source link

Daily API RoundUp: NearMap, Scurri, ShipNerd, Cloudprinter


Every day, the ProgrammableWeb team is busy, updating its three primary directories for APIs, clients (language-specific libraries or SDKs for consuming or providing APIs), and source code samples.





Source link

Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad)


We’ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I’m not sure as many people know about it as they should.

TL;DR: XCode comes with a “Simulator” program you can pop open to test in virtual iOS devices. If you then open Safari’s Develop/Debug menu, you can use its DevTools to inspect right there — also true if you plug in your real iOS device.

Direct Link to ArticlePermalink

The post Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad) appeared first on CSS-Tricks.



Source link

Secure a Node API with OAuth 2.0 Client Credentials


This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible.

Securing server-to-server API services can be tricky. OAuth 2.0 is an excellent way to offload user authentication to another service, but what if there is no user to authenticate? In this article, I’ll show you how you can use OAuth 2.0 outside the context of a user, in what is also known as the Client Credentials Flow.

Instead of storing and managing API keys for your clients (other servers), you can use a third-party service to manage authorization for you. The way this works is that an API client sends a request to an OAuth server asking for an API token. That token is then sent from the API client to your API service along with their request. Once you have the client’s token, you can verify its validity without needing to store any information about the client.

Client Credentials Flow

How the Client Credentials Flow Verification Works

One way to verify tokens you receive to your API service is to forward the token to the OAuth server to ask if it is valid. The downside to this method is each API request sent to your server requires a request sent to the OAuth server as well, which increases the time it takes for you to respond to your client. An alternative is to use something called local validation, a strategy popularized by JSON Web Tokens (JWT). A JWT contains your claims (client data) in unencrypted, machine-readable JSON.

When using the local validation pattern to validate an API token (JWT), you can use math to validate that:

The token your API is receiving hasn’t been tampered with The token your API is receiving hasn’t expired That certain pieces of JSON data encoded in the token are what you expect them to be

How is that secure? you might be wondering. JWTs contain three parts: a header, a payload, and a signature. The header and payload are simple base64 encoded strings, which can easily be decrypted and read. The signature uses an algorithm listed in the header, along with a private key, to create a hash of the header and payload. The hash can’t be recreated without the private key, but it can be verified with a public key.

In a way, this is like a driver’s license or a passport. It’s quite difficult to forge, but it’s very easy for somebody to look at it and see your name, date of birth, and other information. You can scan the barcode, test it with a black light, or look for watermarks to help verify its validity.

While similar in concept, a valid JWT would actually be far more difficult to forge. Someone with enough skill can create a convincing driver’s license, but without the private key it could take a modern computer years to brute force a valid JWT signature. Tokens should also have an expiration. While configurable, a solid default is one hour. This means a client would need to request a new token every 60 minutes if it needs to make a new request to your API server. This is an extra layer of security in case your token is compromised. Who knows? Maybe there’s a quantum computer out there that can recreate the signature within a couple hours.

Now that you understand the basics of the OAuth 2.0 client credentials flow works, let’s build a Node API that uses Client Credentials and Okta.

What is Okta?

In short, we make identity management easier, more secure, and more scalable than what you’re used to. Okta is an API service that allows you to create, edit, and securely store user accounts and user account data, and connect them with one or more applications. Our API enables you to:

Register for a forever-free developer account, and when you’re done, come back to learn more about building secure APIs in Node!

Create a Basic Node API

In order to get started, I’ll show you how to create a basic API in Node. Node keeps a list of dependencies along with other metadata in a file called package.json.

Assuming you have Node installed already, create a new folder for your API server. You can then use npm to generate a package.json for you. The command npm init will prompt you for some information, but you can just keep hitting Enter to stick to the defaults.

$ mkdir client-credentials-flow
$ cd client-credentials-flow
$ git init
$ npm init

The quickest way to get an API server up and running in Node is by using Express. You can add Express as a dependency with the command npm install express@4.16.3 --save. This creates a folder called node_modules where express and anything it depends on are downloaded, and your app can then use those. To make development go faster, you can also add a dev dependency called nodemon, which will restart your server whenever you make code changes. To add a dev-dependency, use the -D flag: npm install -D nodemon@1.17.5.

When building Node apps, you usually want to ignore storing the node_modules folder in your git repo. You can do that by adding node_modules to your .gitignore file.

echo node_modules >> .gitignore

Package managers will also include a file (e.g. package-lock.json or yarn.lock) so that when you download the node_modules on another machine (with npm install or yarn), the same version gets downloaded. This helps prevent any inconsistencies between servers, and keeps you from wondering why something works on your machine, but not in production. Make sure to commit that file to your git repo as well:

$ git add .
$ git commit -m "Adding package files."

You can also add scripts to your package.json folder to run these commands. Create a start script with the command node . (the . tells it to run the script listed in your package.json as main, which by default is index.js. You’ll also want to create a dev script with the command nodemon *.js node .. Command line dependencies, like nodemon, are in the path when running inside a node script. You can now run these commands with npm start or npm run dev. Your package.json file should now look something like this:

package.json

{
  "name": "client-credentials-flow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon *.js node .",
    "start": "node .",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  },
  "devDependencies": {
    "nodemon": "^1.17.5"
  }
}

Now for the most basic “Hello World” express app:

index.js

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`Listening on port ${port}`))

That’s it! To start it, type npm run dev in a terminal window. You can leave this running while we make changes, and it will automatically restart to reflect new changes. Now go to http://localhost:3000 in your browser (or on the command line with curl http://localhost:3000) and you should see Hello World! echoed back.

Register with an OAuth 2.0 Provider for Your Node API

Now to secure the app. This is where you need to set up an OAuth 2.0 service. Okta is a cloud-based service that allows developers to easily and securely store OAuth 2.0 tokens, user accounts, and user data, then connect them with one or multiple applications. Okta also provides libraries for many languages, including Node, to make their API very easy for a developer to integrate into a huge variety of apps.

You can use Okta to quickly and easily set up server-to-server authentication. If you don’t already have an account, sign up for a free Okta Developer account. Once you register, you’ll be given a unique Okta Org URL (e.g. https://{yourOktaDomain}) and an email to activate your new account.

You’ll need two parts in order to make client-to-server authentication work: an authorization server, and a test client/application.

Create an Authorization Server

The authorization server is where clients can request a token to use on your API server. Inside the Okta dashboard, click on the API tab in the header, then select the Authorization Servers tab. Click Add Authorization Server, then give your server a useful name and description. The Audience should be an absolute path for the server that will be consuming the tokens.

Add Authorization Server

Once you create the authorization server, you will need a scope for your clients to access. Click the Scopes tab and add a scope. You can have many of these, which can help define what parts of the API are being used, or even who is using it.

Add Scope

Now that you have a scope, you also need to specify some rules to say who has access to it. Click the Access Policies tab and create a new policy. For now, just allow access to All clients. Then click Add Rule and give it a name. Since this is only for client credentials, remove the other grant types for acting on behalf of a user (Authorization Code, Implicit, and Resource Owner Password) so the only grant type is Client Credentials. Aside from that, just use the default settings for now.

Add Rule

Back on the Settings tab, take note of the Issuer. This is the address clients will use to request a token, and what your API server will use to verify that those tokens are valid.

Create a Test Client

In your Okta dashboard, click on Applications in the top header. Applications are also known as clients, so this is where you can create a test client. Click Add Application and choose Service (Machine-to-Machine). The only information it needs is a name, so you can use something like Test Client. This will give you the credentials for your client (in this testing case, that would be you).

Client Credentials

Secure your Node API

You now have all the pieces of the puzzle to make it so only authenticated users get the beloved “Hello World” welcome message, and everybody else gets an error.

Safely Store Your Credentials

You’ll want to store your credentials safely. One way of doing this is to keep a file locally that isn’t stored in git (especially useful if your code is open source, but still a good thing to do regardless). This also lets you use the same code for multiple applications (e.g. dev and production environments).

The post Secure a Node API with OAuth 2.0 Client Credentials appeared first on SitePoint.



Source link

Valid CSS Content


There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.

Here’s an example:

<div 
  data-done="✅"
  class="email">
    chriscoyier@gmail.com
</div>
.email::before {
  content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

The property generally takes anything you drop in there. However, there are some invalid values it won’t accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.

This works fine:

/* Valid */
::after {
  content: "1";
}

…but this does not:

/* Invalid, not a string */
::after {
  content: 1;
}

I’m not entirely sure why, but I imagine it’s because 1 is a unit-less number (i.e. 1 vs. 1px) and not a string. You can’t trick it either! I tried to be clever like this:

/* Invalid, no tricks */
::after {
  content: "" 1;
}

You can output numbers from attributes though, as you might suspect:

<div data-price="4">Coffee</div>
/* This "works" */
div::after {
  content: " $" attr(data-price);
}

But of course, you’d never use generated content for important information like a price, right?! (Please don’t. It’s not very accessible, nor is the text selectable.)

Even though you can get and display that number, it’s just a string. You can’t really do anything with it.

<div data-price="4" data-sale-modifier="0.9">Coffee</div>
/* Not gonna happen */
div::after {
  content: " $" 
    calc(attr(data-price) * attr(data-sale-modifier));
}

You can’t use numbers, period:

/* Nope */
::after {
  content: calc(2 + 2);
}

Heads up! Don’t try concatenating strings like you might in PHP or JavaScript:

/* These will break */
::after {
  content: "1" . "2" . "3";
  content: "1" + "2" + "3";

  /* Use spaces */
  content: "1" "2" "3";
  /* Or nothing */
  content: "1 2 3";
  /* The type of quote (single or double) doesn't matter, but content not coming back from attr() does need to be quoted. */
}

There is a thing in the spec for converting attributes into the actual type rather than treating them all like strings…

<wood length="12" />
wood {
  width: attr(length em); /* or other values like "number", "px", or "url" */
}

…but I’m fairly sure that isn’t working anywhere yet. Plus, it doesn’t help us with pseudo elements anyway, since strings already work and numbers don’t.

The person who reached out to me over email was specifically confused why they were unable to use calc() on content. I’m not sure I can help you do math in this situation, but it’s worth knowing that pseudo elements can be counters, and those counters can do their own limited form of math. For example, here’s a counter that starts at 12 and increments by -2 for each element at that level in the DOM.

See the Pen Backwards Double Countdown by Chris Coyier (@chriscoyier) on CodePen.

The only other thing we haven’t mentioned here is that a pseudo element can be an image. For example:

p:before {
  content: url(image.jpg);
}

…but it’s weirdly limited. You can’t even resize the image. ¯_(ツ)_/¯

Much more common is using an empty string for the value (content: "";) which can do things like clear floats but also be positioned, sized and have a background of its own.

The post Valid CSS Content appeared first on CSS-Tricks.



Source link

Saving Grandma’s Recipes With Xamarin.Forms


Saving Grandma’s Recipes With Xamarin.Forms

Saving Grandma’s Recipes With Xamarin.Forms

Matthew Soucoup

2018-10-11T14:10:38+02:00
2018-10-11T12:19:46+00:00

My grandma makes the best, most fluffiest, go weak-in-your-knees buns that anybody has ever tasted. The problem is, there’s a ton of secret ingredients (and I’m not just talking love) that go into those buns, and those ingredients and directions are all stored in my grandma’s head.

We all have family recipes like that, and instead of possibly forgetting them, in this article we’re going to create a mobile app for iOS and Android using Xamarin.Forms that will save them for myself and future generations of my family!


Drawing of buns with steam rising
Delicious warm buns (Large preview)

So if you’re interested in writing mobile applications, but don’t have the time to write the same app over and over again for each platform, this article is for you! Don’t worry if you don’t know C# from a Strawberry Pretzel Salad; I’ve been writing Xamarin apps for over 8 years, and this article is a tour through Xamarin.Forms that intends to give you enough information to start learning on your own.

What Is This Xamarin Stuff?

More than just a fun word to say, Xamarin allows developers to create native iOS and Android applications using the exact same SDKs and UI controls available as in Swift and XCode for iOS or Java and Android Studio for Android.


Drawing of stick figure wondering if they should develop for iOS or Android
Which platform should I develop for? (Large preview)

The difference is that the apps are developed with C# using the .NET Framework and Visual Studio or Visual Studio for Mac. The apps that result, however, are exactly the same. They look, feel, and behave just like native apps written in Objective-C, Swift, or Java.

Xamarin shines when it comes to code sharing. A developer can create and tailor their UI for each platform using native controls and SDKs, but then write a library of shared app logic that’s shared across platforms.


Drawing of stick figure with the idea to develop for both platforms at once using Xamarin
Aha! I’ll pick Xamarin! (Large preview)

It’s this code sharing where tremendous time savings can be realized.

And like the delicious buns my grandma bakes, once given the taste of sharing code — it’s hard not to crave more — and that’s where Xamarin.Forms comes in.

Xamarin.Forms

Xamarin.Forms takes the concept of traditional Xamarin development and adds a layer of abstraction to it.

Instead of developing the user interface for iOS and Android separately, Xamarin.Forms introduces a UI toolkit that enables you to write native mobile apps from a single code base.

Think of it this way: You have an app that needs a button. Each platform has the concept of a button. Why should you have to write the user interface a bunch of different times when you know all the user of your app needs to do is tap a button?

That’s one of the problems Xamarin.Forms solves.

It provides a toolkit of the most commonly used controls and user interaction events for them, so we only have to write the user interfaces for our apps once. It’s worth noting though that you’re not limited to the controls Xamarin.Forms provides either — you still can use controls found in only a single platform within a Xamarin.Forms app. Also, we can share the application logic between platforms as before.

The code sharing stats for apps developed with Xamarin.Forms can be off the charts. A conference organizing app has 93% of its code shared on iOS and 91% on Android. The app is open sourced. Take a peek at the code.

Xamarin.Forms provides more than UI controls. It also contains a MVVM framework, a pub/sub messaging service, an animation API, and a dependency service, plus others.

But today, we’re going to focus on the UI capabilities for building our recipe manager app.

The App We’ll Build

The recipe manager app will have a straightforward user interface. We will be working in the kitchen, so it needs to be easy to use!

It will consist of 3 screens. The first will show a list of all the recipes currently loaded in the app.


Screenshot of the recipe list screen on iOS
(Large preview)

Then, by tapping on one of those recipes, you’ll be able to see its details on a second screen:


Screenshot of the recipe detail screen on iOS
The recipe detail screen on iOS (Large preview)

From there you can tap an edit button to make changes to the recipe on the third screen:


Screenshot of the recipe edit screen on iOS
The recipe edit screen on iOS (Large preview)

You can also get to this screen by tapping the add button from the recipe list screen.

The Development Environment

Xamarin apps are built with C# and .NET, using Visual Studio on Windows or Visual Studio for Mac on the Mac, but you need to have the iOS or Android SDKs and tooling installed, too. Getting everything installed, in the correct order could be a bit of an issue, however, the Visual Studio installers will take care of note only getting the IDE installed, but also the platform tooling.

Although a Mac is always required to build iOS apps, with Xamarin you can still develop and debug those apps from Visual Studio on Windows! So if Windows is your jam, there’s no need to change your environments altogether.

Now let’s see how Xamarin.Forms can help us save some family recipes from one code base!

Recipe List Page: Laying Out the UI

Let’s start with talking about how we’re going to layout the UI for our recipe saving app!

Overall each screen in Xamarin.Forms is comprised of 3 elements. A Page. At least one element called a Layout. And at least one Control.

The Page

The Page is the thing that hosts everything displayed on the screen at one time. The Page is also central in navigation within an app.


Drawing representing a Page in Xamarin.Forms
The page (Large preview)

We tell Xamarin.Forms which Page to display via a Navigation Service. That service then will take care of displaying whatever page in a way that’s appropriate and native for the operating system.

In other words, the code to navigate between screens has been abstracted too!

Finally, although not the only way to do it, I code the UI of my Page’s in XAML. (The other way would be to use C#.) XAML is a markup language that describes how a page looks. And for now, suffice it to say, it’s kinda sorta similar to HTML.

The Layout

All the controls on a page are arranged by something called a Layout.


Drawing representing some layouts in Xamarin.Forms
The layouts (Large preview)

One or more layouts can be added to a page.


Drawing of how the layouts interact with the page
Layouts on the page (Large preview)

There are several different types of Layouts in Forms. Some of the most common ones include Stack, Absolute, Relative, Grid, Scroll, and Flex layouts.


Drawing of several Xamarin.Forms layouts and how they arrange their child elements.
Common Xamarin.Forms layouts (Large preview)

The Controls

Then finally there are the controls. These are the widgets of your app that the user interacts with.


Drawing of a couple of Xamarin.Forms controls, each drawn as a box
Some of the controls (Large preview)

Forms come with many controls that will be used no matter what type of app you’re building. Things like labels, buttons, entry boxes, images, and of course, list views.

When adding a control to a screen, you add it to a layout. It’s the layout that takes care of figuring where exactly on the screen the control should appear.


Drawing of a page holding 2 layouts, and those layouts arranging the controls according to the layout type.
Everything fits together! (Large preview)

So to generate the following screens on iOS and Android respectively:


Screenshot of recipe list screen on iOS and Android
Recipe lists on iOS (left) and Android (right) (Large preview)

I used this XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="SmashingRecipe.RecipeListPage"
             Title="Recipes">
    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="recipesList">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Name}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" />
    </ContentPage.ToolbarItems>
</ContentPage>

There’s a couple of important things going on here.

The first is the <StackLayout>. This is telling Forms to arrange all the controls that follow in a stack.

There happens to only be a single control in the layout, and that’s a <ListView>, and we’re going to give it a name so we can reference it later.

Then there’s a little bit of boilerplate ceremony to the ListView before we get to what we’re after: the <TextCell>. This is telling Forms to display simple text in each cell of the list.

We tell the <TextCell> the text we want it to display through a technique called Data Binding. The syntax looks like Text="{Binding Name}". Where Name is a property of a Recipe class that models… well, Recipes.

So how do the recipes get added to the list?

Along with every XAML file, there is a “code-behind” file. This code-behind allows us to do things like handle user interaction events, or perform setup, or do other app logic.

There’s a function that can be overridden in every Page called OnAppearing — which as I’m sure you guessed — gets called when the Page appears.

protected override void OnAppearing()
{
    base.OnAppearing();

    recipesList.ItemsSource = null;
    recipesList.ItemsSource = App.AllRecipes;    
}

Notice the recipesList.ItemsSource = AllRecipes;

This is telling the ListView — “Hey! All of your data is found in the enumerable App.AllRecipes (an application-wide variable) and you can use any of its child object’s properties to bind off of!”.

A list of recipes is all well and fine — but you can’t bake anything without first seeing the recipe’s details — and we’re going to take care of that next.

Event Handling

Without responding to user touches our app is nothing more than a list of delicious sounding recipes. They sound good, but without knowing how to cook them, it’s not of much use!

Let’s make each cell in the ListView respond to taps so we can see how to make the recipe!

In the RecipeListPage code-behind file, we can add event handlers to controls to listen and react to user interaction events.

Handling tap events on the list view then:

recipesList.ItemSelected += async (sender, eventArgs) =>
{
    if (eventArgs.SelectedItem != null)
    {
        var detailPage = new RecipeDetailPage(eventArgs.SelectedItem as Recipe);

        await Navigation.PushAsync(detailPage);

        recipesList.SelectedItem = null;
    }
};

There’s some neat stuff going on there.

Whenever somebody selects a row, ItemSelected is fired on the ListView.

Of the arguments that get passed into the handler, the eventArgs object has a SelectedItem property that happens to be whatever is bound to the ListView from before.

In our case, that’s the Recipe class. (So we don’t have to search for the object in the master source – it gets passed to us.)

Recipe Detail Page

Of course, there’s a page that shows us the secret ingredients and directions of how to make each recipe, but how does that page get displayed?


Drawing of a stick figure dressed as a chef who is ready to start baking.
Let’s get cooking! (Large preview)

Notice the await Navigation.PushAsync(detailPage); line from above. The Navigation object is a platform-independent object that handles page transitions in a native fashion for each platform.

Now let’s take a peek at the recipe details page:


Screenshot of recipe detail screen on iOS and Android
Recipe detail screens on iOS (left) and Android (right) (Large preview)

This page is built with XAML as well. However, the Layout used (FlexLayout) is quite cool as it’s inspired by the CSS Flexbox.

<ContentPage.Content>
    <ScrollView>
        <FlexLayout
            AlignItems="Start"
            AlignContent="Start"
            Wrap="Wrap">

            <Image Source="buns.png" FlexLayout.Basis="100%" />

            <Label Text="{Binding Name}" HorizontalTextAlignment="Center" TextColor="#01487E"
                   FontAttributes="Bold" FontSize="Large" Margin="10, 10" />
                   
            <BoxView FlexLayout.Basis="100%" HeightRequest="0" />

            <Label Text="Ingredients" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60"
                   Margin="10,10" HorizontalOptions="FillAndExpand" />
            <BoxView FlexLayout.Basis="100%" HeightRequest="0" />
            <Label Text="{Binding Ingredients}" Margin="10,10" FontSize="Small" />

            <BoxView FlexLayout.Basis="100%" HeightRequest="0" />
            
            <Label Text="Directions" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" 
                   Margin="10,10" HorizontalOptions="FillAndExpand" />
            <BoxView FlexLayout.Basis="100%" HeightRequest="0" />
            <Label Text="{Binding Directions}" Margin="10,10" FontSize="Small" />

        </FlexLayout>
    </ScrollView>
</ContentPage.Content>

The FlexLayout will arrange its controls in either rows or columns. The big benefit comes though with the fact that it can automatically detect how much room there is left on the screen to place a control, and if there’s not enough, then it can automatically create a new row or column to accommodate it!

This helps greatly when dealing with various screen sizes, which there are plenty of in mobile development.

Well, with the FlexLayout helping us keep the details screen looking good, we still need to edit those recipes, right?

You probably noticed this:

<ToolbarItem Text="Edit" Clicked="Edit_Clicked" />

That line is responsible for putting a button in the app’s toolbar. The Clicked="Edit_Clicked" tells the button that when it’s clicked, look in the code behind for a function of that name, and then execute its code.

Which in this case, would be instantiating the Recipe Edit Page, and pushing that onto our navigation stack using the Navigation object mentioned previously.

Recipe Edit Page

A page with a list of recipes: check! A page with all the details to make the recipes: check! All that’s now left is to create the page that we use to enter or change a recipe while we watch grandma work her magic!

First, check out the screens:


Screenshot of recipe edit screen on iOS and Android
Recipe edit screens on iOS (left) and Android (right) (Large preview)

And now the code:

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TableView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" 
                   Intent="Form" HasUnevenRows="true">
            <TableSection Title="General">
                <EntryCell x:Name="recipeNameCell" Label="Name" /> 
            </TableSection>
            
            <TableSection Title="Ingredients">
                <ViewCell>
                    <StackLayout Padding="15">
                        <Editor x:Name="ingredientsCell" />
                    </StackLayout>
                </ViewCell>
            </TableSection>
            
            <TableSection Title="Directions">
                <ViewCell>
                    <StackLayout Padding="15">
                        <Editor x:Name="directionsCell" />
                    </StackLayout>
                </ViewCell>
            </TableSection>
        </TableView>

        <Button Text="Save" Grid.Row="1" Grid.Column="0" BackgroundColor="#EE3F60" TextColor="White" x:Name="saveButton" />
        <Button Text="Cancel" Grid.Row="1" Grid.Column="1" BackgroundColor="#4CC7F2" TextColor="White" x:Name="cancelButton" />
    </Grid>
</ContentPage.Content>

There’s a little more code here, and that’s because I’m using the Grid layout to specify how everything should lay out in a 2-Dimensional pattern.

And also notice no data binding here. Because I wanted to give an example of how one would populate the controls purely from the code behind file:

void InitializePage()
{
    Title = TheRecipe.Name ?? "New Recipe";

    recipeNameCell.Text = TheRecipe.Name;
    ingredientsCell.Text = TheRecipe.Ingredients;
    directionsCell.Text = TheRecipe.Directions;

    saveButton.Clicked += async (sender, args) =>
    {
        SaveRecipe();
        await CloseWindow();
    };

    cancelButton.Clicked += async (sender, args) =>
    {
        await CloseWindow();
    };
}

See that TheRecipe property? It’s page level, holds all the data for a particular recipe, and gets set in the constructor of the page.

Secondly, the Clicked event handlers for the saveButton and cancelButton are totally .NET-ified (and yes, I do make my own words up quite often.)

I say they’re .NET-ified because the syntax to handle that event is not native to Java nor Objective-C. When the app runs on Android or iOS, the behavior will be exactly like an Android Click or an iOS TouchUpInside.

And as you can see, each of those click event handlers are invoking appropriate functions that either save the recipe and dismiss the page, or only dismiss the page.

There it is — we have the UI down to save the recipes from now until the end of time!

CSS Wha?!? Or Making The App Pretty

Saving the best for last: Xamarin.Forms 3.0 gives us — among other things — the ability to style controls using CSS!

The Xamarin.Forms CSS isn’t 100% what you may be used to from web development. But it’s close enough that anyone familiar with CSS will feel right at home. Just like me at grandma’s!

So let’s take the Recipe Details page and refactor it, so it uses Cascading Style Sheets to set the visual elements instead of setting everything directly inline in the XAML.

First step is to create the CSS doc! In this case it will look like the following:

.flexContent {
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

image {
    flex-basis: 100%;
}

.spacer {
    flex-basis: 100%;
    height: 0;
}

.foodHeader {
    font-size: large;
    font-weight: bold;
    color: #01487E;
    margin: 10 10;
}

.dataLabel {
    font-size: medium;
    font-weight: bold;
    color: #EE3F60;
    margin: 10 10;
}

.data {
    font-size: small;
    margin: 10 10;
}

For the most part, it looks like CSS. There are classes in there. There is a single selector for a class type, Image. And then a bunch of property setters.

Some of those property setters, such as flex-wrap or flex-basis are specific to Xamarin.Forms. Going forward, the team will prefix those with xf- to follow standard practices.

Next up will be to apply it to XAML controls.

<ContentPage.Resources>
    <StyleSheet Source="../Styles/RecipeDetailStyle.css" />
</ContentPage.Resources>

<ContentPage.Content>
    <ScrollView>
        <FlexLayout StyleClass="flexContent">

            <Image Source="buns.png" />

            <Label Text="{Binding Name}" StyleClass="foodHeader" />
                   
            <BoxView StyleClass="spacer" />

            <Label Text="Ingredients" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" />
            <BoxView StyleClass="spacer" />
            <Label Text="{Binding Ingredients}" StyleClass="data" />

            <BoxView StyleClass="spacer" />
            
            <Label Text="Directions" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" />
            <BoxView StyleClass="spacer" />
            <Label Text="{Binding Directions}" StyleClass="data" />

        </FlexLayout>
    </ScrollView>
</ContentPage.Content>

Here’s what it looked like before.

In Xamarin.Forms, to reference the CSS document, add a <StyleSheet Source="YOUR DOC PATH" />. Then you can reference the classes in each control via the StyleClass property.

It definitely cleans up the XAML, and it makes the intention of the control clearer too. For example, now it’s pretty obvious what those <BoxView StyleClass="spacer" /> are up to!

And the Image gets itself styled all because it’s an Image and the way we defined the selector in the CSS.

To be sure, CSS in Xamarin.Forms isn’t as fully implemented as its web cousin, but it’s still pretty cool. You have selectors, classes, can set properties and, of course, that whole cascading thing going on!

Summary

Three screens, two platforms, one article, and endless recipes saved! And you know what else? You can build apps with Xamarin.Forms for more than Android and iOS. You can build UWP, macOS, and even Samsung Tizen platforms!


Drawing of buns with steam rising
Delicious! (Large preview)

Xamarin.Forms is a UI toolkit that allows you to create apps by writing the user interface once and having the UI rendered natively across the major platforms.

It does this by providing an SDK that’s an abstraction to the most commonly used controls across the platforms. In addition to the UI goodness, Xamarin.Forms also provides a full-featured MVVM framework, a pub/sub messaging service, an animation API, and a dependency service.

Xamarin.Forms also gives you all the same code benefits that traditional Xamarin development does. Any application logic is shared across all the platforms. And you get to develop all your apps with a single IDE using a single language — that’s pretty cool!

Where to next? Download the source code for this Xamarin.Forms app to give it a spin yourself. Then to learn more about Xamarin.Forms, including the ability to create an app all within your browser, check out this online tutorial!

Smashing Editorial
(dm, ra, yk, il)



Source link

Modern WordPress Plugins with the Gutenberg Migration Guide


This article on the Gutenberg Migration Guide was originally published by Torque Magazine, and is reproduced here with permission.

Love it or loathe it, Gutenberg is here to stay. As such, getting your WordPress themes and plugins to work with the new editor should be a primary concern. Truth be told, if you’re only just thinking about this aspect now, you’re cutting things pretty close. However, there’s still enough time to prepare your products, especially with some third-party help.

Daniel Bachhuber’s Gutenberg-related projects have been featured on the Torque blog previously, and this is another one that warrants attention. Tweaking your plugins to be compatible with Gutenberg could prove to be a tricky task, but the Gutenberg Migration Guide should help you make the switch. It’s a handy reference guide for comparing customization points between WordPress’ classic editor and Gutenberg.

In this post, we’ll look at the project as a whole and discuss how it works. Then we’ll talk about how to make sure your plugins and themes are Gutenberg-ready. Let’s get started!

The Current State of the Gutenberg Editor

We’ve talked about Gutenberg’s history on the Torque blog a lot, so we won’t go into too much detail here. However, to offer some background context, Gutenberg is eventually going to be WordPress’ new default editor. It will be replacing the TinyMCE version that is currently in place. While Gutenberg is now out of beta, we’re still waiting for the plugin to be merged into the core platform.

However, despite the sound reasoning behind Gutenberg’s functionality, many have been left unimpressed by the lack of polish in the editor so far. This assessment may be somewhat harsh, considering the project’s current status. In any case, the high level of criticism has resulted in a lack of movement from many WordPress developers, especially when it comes to getting their products up to standard.

This hasn’t stopped some savvy developers from trying to capture the early adopter market, however. For example, the very popular Elementor Pro page builder now includes a number of Gutenberg-compatible ‘blocks’. Other developers are also beginning to include this functionality as a standard feature:

Sonar home page

The fact that we’re finally seeing Gutenberg-related features appearing in commercial themes should bring the situation into perspective. In other words, some developers have been working on their Gutenberg solutions for a while. Now, they’re now beginning to offer them to the public.

If you’ve not yet begun to do the same, you’ll likely need some help getting started. Fortunately, there’s a great initiative that offers just that.

Introducing the Gutenberg Migration Guide

Having some support while migrating your functionality over to Gutenberg is likely going to be welcome to many developers. For that reason, Daniel Bachhuber – who has become a focal point for Gutenberg-related initiatives of late – has created the Gutenberg Migration Guide.

This is a resource to help developers port their TinyMCE-centric plugins and themes to the new editor. It includes plenty of screenshots, and handy references to the Gutenberg Developer’s Handbook. You can think of it as Gutenberg’s own ‘Codex’, although it’s not classed as an official part of the WordPress Codex.

This guide also includes a brief overview listing every TinyMCE editor customization point with a Gutenberg equivalent. Plus, it covers all impacted hooks and classic editor features. This will obviously be a vital go-to resource when you’re trying to find solutions for porting functionality over to Gutenberg.

The post Modern WordPress Plugins with the Gutenberg Migration Guide appeared first on SitePoint.



Source link

Create Sites Easily with WP Page Builder


There’s little doubt that WordPress is one of the biggest web technologies in the world, powering around a third of the web, and growing all the time. Until recently WordPress was only for the initiated, those developers who’d spent years learning how to dig into the source code and tinker, without breaking their whole site.

In the last few years WordPress has been revolutionized by the introduction of page builders, applications that allow anyone—even someone with no design or coding knowledge—to create a professional standard WordPress site on the fly. Today, we’re talking about one of the most lightweight options on the market, with performance that outstrips many rival tools: WP Page Builder.

WP Page Builder is the perfect tool for web professionals who want to branch into WordPress, but don’t want to hire expensive designers or developers. Thanks to its intuitive drag and drop interface, WP Page Builder allows you to quickly and easily develop websites for your, or your clients’ businesses, with none of the hassle of old-school WordPress development.

Real-Time Frontend Customization for Everyone

There’s absolutely no need to hire a designer, or developer, to work with WP Page Builder. Simply create a page in WordPress, and drop your content wherever you want it.

The real-time front-end customization means that you will see exactly what you’re coding—yes, coding, because WP Page Builder generates all the code a professional developer would write, and inserts it for you.

And should you get lost at any point, Themeum’s simple to understand documentation, and friendly customer support will get you back on track.

Responsive Design with Flexible Layouts

Themeum’s WP Page Builder uses a flexible row-column layout structure, which is perfect for responsive design. Flexibly add rows and columns of content, and adjust the sizing and spacing as you like. Everything you add will be flexible across all viewport sizes, so your site will look perfect no matter what device it’s previewed on.

Feature-Rich Add-Ons

There are 30+ add-ons included with WP Page Builder, including:

  • Post Grid – ideal for posting a scannable grid of post thumbnails to introduce your content;
  • Accordion – a vertical open/close menu that’s great for discovering options;
  • Form – everyone needs forms for collecting information from your new-found customers;
  • Carousel – present your content in an attractive animated slider that users will love;
  • Pricing Table – the simplest way to present your pricing to new customers in a format they’ll recognize and understand;
  • Testimonial Carousel – boast about how great your company is, with animated reviews from other customers;
  • Video Popup – show videos in a pop-up modal so they don’t interfere with the rest of your content;
  • Flip Box – present content in an attractive 3D style, using both sides of a card;
  • Feature Box – easily highlight the main features of your company for customers;
  • and a whole load more…

In fact, WP Page Builder features so many add-ons, you can produce just about any content you can imagine. And more add-ons are being introduced all the time.

Rich Libraries

The library system allow you to design blocks within your design, and save them for reuse. Just design a section of your site, save it to the library, then access it at any time to use the same design block on any other page of your site. It’s a huge productivity gain that will help you generate sites faster, and turn projects around more quickly.

Predesigned Templates and Blocks

WP Page Builder includes a gamut of predesigned templates, so you can get a head-start on your build by selecting a template you like and modifying it to fit your preferences.

To make your flow even faster, WP Page Builder includes a host of professionally designed blocks, ready to drag and drop into your page. Simply select the block you want, drag and drop it onto your page, and it will be ready instantly.

WP Page Builder’s front-end customization is even compatible with your themes—even themes from 3rd parties—so you can really boost your site development by starting with a ready-made design from Themeum, or another provider, then customize using WP Page Builder.

Be Empowered by WP Page Builder

WP Page Builder is a professional quality drag and drop site builder, with a whole heap of add-ons to keep you happy. The visually intuitive site editor, the total lack of coding, and the predesigned blocks and templates, mean that even novices can use it.

With the library system for rapid builds, and the simple one-click duplication system, it’s a super-fast solution for anyone who wants to build a great website without hiring an expensive designer or developer.

 

[– This is a sponsored post on behalf of Themeum –]

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}



Source link

What Are Some of The Better Known Blockchain and Cryptocurrency APIs?


This article is part of ProgrammableWeb’s series on Crytocurrency and Blockchain. Please check out our articles on Ethereum, an overview of the businesses providing tools and services to the blockchain world and a case study on Ripple.





Source link