Beginner’s Guide to Android Layout

While Activity handles user interaction with your app, Layout determines how the app should look. In this post, you’ll learn how a layout defines the visual structure for a user interface, such as the UI for an activity or app widget.

The Layout

The Layout file is an XML file that describes the GUI of a screen of your app. For this example, we’ll be creating a linear layout, which is used to display GUI components side by side. These components can be displayed vertically or horizontally. When displayed horizontally, they are displayed in a single row. When displayed vertically, they are displayed in a single column.

Here is an example of what a linear layout looks like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.tutsplus.code.android.tutsplusupload.MainActivity">

</LinearLayout>

In the image below, you can see the code, and how it displays on an Android device.

how the code displays on an Android device

The layout starts with an XML declaration. It specifies the XML version and the encoding.

The next line is the opening tag for the linear layout. Inside it, you have a line that looks like this:

xmlns:android="http://schemas.android.com/apk/res/android"

This specifies the XML namespace, used to provide unique names for elements and attributes in an XML document. xmlns:android here describes the Android namespace. This namespacing system was chosen by Google to help Android Studio handle errors during compile time. The Android namespace helps distinguish official Android widgets from custom ones. For example, it lets you distinguish between a custom textview widget and the Android textview widget. The URI of the namespace is http://schemas.android.com/apk/res/android.

The next namespace—xmlns:tools—gives you access to tools attributes. This is not the default namespace: you can build your Android application without making use of it. However, using it helps you add metadata to your resource files that help in the manipulation and rendering of layouts in the Design View. When referencing elements or attributes provided by the tools attributes, you must add the tools prefix. I’ll explain later how we use the tools attributes in this code.

For now, let’s look at the next part.

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"

These attributes are used to determine the width and height of the layout. They also state the amount of padding to be used and whether the components are to be placed vertically or horizontally. Here, vertical orientation is chosen.

Width and Height

android:layout_width and android:layout_height are used to specify the width and height to be used for the layout component. You can use the values wrap_content or match_parent to determine the width and height of your component. wrap_content means the layout (or view) should be big enough for the content. match_parent means it should be as wide as the parent layout.

Padding

Padding is the space between the view or layout and its border. When you make use of android:padding, the space on all four sides of the view or layout will have the specified measurement. If you want to control the individual parts of the padding separately, you can use android:paddingBottom, android:paddingLeft, android:paddingRight, and android:paddingTop. Note that these values are specified in “dp”—density-independent pixels. More on these soon!

Margins

While the padding is applied to the layout or view and its border (within the component), the margin is applied to layout or view border and other surrounding components outside the component. You can use android:layout_margin to specify the margin on all sides at once, or you can control the individual parts of the padding separately with android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, and android:layout_marginTop. These are also specified in dp.

What Is dp?

A density-independent pixel, or dp for short, is an abstract unit that is based on the physical density of the screen. Density-independent pixels are used when defining UI layouts. They’re used to express the dimensions of the layout or position in a density-independent way. You can read more about density independence in Android here.

Context

The context attribute is used to declare the activity the layout is associated with by default. Here you can see that the sample layout is associated with the MainActivity. 

tools:context="com.tutsplus.code.android.tutsplusupload.MainActivity"

You can also write this in a shorter form as:

tools:context=".MainActivity"

This is only used when working in Design View, as a layout can be associated with more than one activity.

Child Components

Layouts contain child components. Actually, that is their whole purpose: to organize and display other components.

Let’s add some components to the linear layout—starting with a button view.

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        BeerAdviser
        android:text="Button" />

We’ll also add a text view, which has very similar properties to a button view.

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a text view" />

We have covered android:layout_height and android:layout_width, so now let’s see the others.

Component Id

The android:id property is used to give the component an identifying name. This allows you to access your component from within the Java code of an activity, using the findViewById() method.

Component Text

The android:text attribute is used to tell Android what the text component should display. In the case of the button view, the text Button will be displayed.

Let’s run our code so far and see what it looks like.

Android device showing a button on screen

Recapping, the first element has to be the layout you will be making use of. Here it is LinearLayout. The orientation specified tells Android to display the components in the layout in a single vertical column. The <Button> element is the first element that will be displayed. It will take up the width of the parent, and its height will be determined by its text content.

The second element is a text view which will be displayed underneath the button. Both the height and width will be restricted to the height and width of the content.

String Resources

In our example above, we hardcoded the text for the text view using android:text="This is a text view". This is fine when you start off as a beginner, but it’s not the best approach. Suppose you created an app that hits big on Google Play Store, and you don’t want to limit yourself to just one country or language. If you hardcoded all the text in your layout files, making your app available for different languages will be difficult. So what is the best approach?

The best approach involves you putting your text values in a string resource file: strings.xml. This makes internationalization for your app easy. It makes it easier to make global changes to your application as you need to edit only one file.

The strings.xml file is located in the app/src/main/res/values folder. When you open it, it should have a structure like this.

    <resources>
        <string name="app_name">Tutsplus Upload</string>
    </resources>

Here you have one string resource named app_name, with a value of Tutsplus Upload.

You can add other string resources using the same structure. For the button and text in your layout, the structure can look like this.

    <resources>
        <string name="app_name">Tutsplus Upload</string>
        <string name="main_button">Button</string>
        <string name="first_text">This is a text!</string>
    </resources>

To use these string resources in your layout, you have to update the text part of both views with their respective resource.

    android:text="@string/main_button"
    android:text="@string/first_text"

The @string tells Android to look for a text value in the string resource file. After that is the resource name. Android will look up the value of the resource that corresponds to that name and use it for your component.

Wrapping up, here’s how your layout will look:

Final code and layout on Android device

Conclusion

In this post, you’ve learned some of the basics of working with layouts. As you build more complex applications, you will see how all the parts fit together. After following along with this post, you should be able to understand how to work with linear layouts, text and button views, and string resources. 

While you’re here, check out some of our other great posts on Android app development.

View Tutorial: Beginner’s Guide to Android Layout

Optimize Your Website Without AMP: Optimization Checklist

When you want to optimize a website’s performance manually, without using a ready-made approach like AMP, what are the key steps you need to take?

In this video from my course Optimize Your Website Without AMP, you’ll discover a simple checklist you can use to ensure your site loads just as fast as it would with AMP, if not faster. 

Optimize Your Website Without AMP: Optimization Checklist

 

The Optimization Checklist

Here’s the basic optimization checklist we’ll be working with:

  • Should load as fast as—or faster than—an AMP version of the same site.
  • Load web fonts as early as possible to get them coming in.
  • Efficient, small size CSS loaded inline in the head section.
  • Write CSS in external files for more practical development.
  • Combine and minify JavaScript.
  • Set up a build process to make the above two things happen (we’ll use Gulp).
  • Use only async JavaScript.
  • Defer JavaScript so it doesn’t block rendering (run JS at the right time).
  • Vanilla JS so no JS dependencies to minimize the amount of code to load.
  • Prefer simple JS.
  • Create no JS fallbacks wherever possible.
  • Use lazy loading on images and iframes (videos etc.).
  • Prevent reflow to avoid layout recalculation.

As you can see, this checklist is part tasks that we need to complete, it’s part principles that we need to follow, and it’s also part goals that we want to achieve. Let’s look at each of them in more detail.

Load as Fast as—or Faster Than—an AMP Version of the Same Site

The first thing on our list is a goal, and that is, we want our site to load as fast or faster than the AMP version of the same site. It’s a good idea to keep checking on your load time as you go along with your your development process, so that’s what we’re going to be doing as we work through everything.

Load Web Fonts as Early as Possible

Now let’s get into the technical things that we need to do. The first consideration is that we want to get any web fonts that we will be using loaded as fast as possible. 

Web fonts are often relatively large files, and you can’t show your content properly until those web fonts are loaded. So we’re going to make sure that we get those web fonts loaded very early in the picture, probably as the first thing that starts loading.

Efficient CSS Loaded Inline in the Head Section

The next thing that we’re going to do is make sure that our CSS is very efficient and very small in size. 

Sometimes you can be tempted to take a shortcut and include a massive library of CSS into your sites to help speed up the development process, even if most of that CSS is not necessary.

Throwing in a massive CSS file might help speed up your development, but it’s probably going to slow down your website and diminish the performance of your sites in search engines. I say that because load speed is now a ranking factor. So it’s important for your CSS to be as small and efficient as possible.

You’re also going to take that CSS and load it inline into the head section of the site. This is a technique that AMP uses, and it is an excellent optimization technique. So that is one that we definitely are going to be holding onto with our own optimization process.

Write CSS in External Files

Even though our CSS is going to be inline in the head section, we still want to work on our CSS in separate files. Trying to write CSS directly into the head section of an HTML file is really not very practical. So we’re going to get everything set up so that we can work on our CSS files externally, and then have them inline in the HTML files later, so we get the best of both worlds.

Combine and Minify JavaScript

The next thing that we’re going to do is make sure that to the greatest degree possible any JavaScript that we’re using is combined and minified. 

One of the downsides of working with AMP is that you have multiple JavaScript files you have to bring in, and each one of them has to come in separately. But to the greatest extent possible, we’re going to take our JavaScript and combine it into a single file, so that we have the absolute minimum number of browser requests. 

Set Up a Build Process

To make both of those things happen—working on CSS externally and combining and minifying JavaScript—we’re going to set up a build process that will make both of these things happen automatically.

We’ll be using Gulp to do that. That means that you’ll need to have Node installed on your system, and you’ll also need to dabble a little bit in using the terminal. But during the course I’ll step you through what to do, so even if you haven’t worked with the terminal, you should be just fine.

Use Only Async JavaScript

Next up is that we’re only going to be using async (asynchronous) JavaScript. What this means is that the way we’re going to load our JavaScript is not going to prevent anything else on the page from loading at the same time. 

Defer JavaScript

Another thing that we will be doing with our JavaScript is that we’re going to defer it. That means that we’re going to push our JavaScript right to the end of the rendering process. We’re going to make sure everything else in our site is fully loaded before we do anything with JavaScript at all. 

Vanilla JavaScript Only

We’re also going to make sure that every bit of JavaScript we use is vanilla JavaScript, and we’re doing this to make sure that we don’t have dependencies. If we use, say, a lightbox that depends on jQuery, now we have to load jQuery into our site, and that’s more file size and more processing for the browser to handle. 

It’s often not necessary to use multiple JavaScript libraries. You can often achieve the functionality that you want just as well with vanilla JavaScript.

Prefer Simple JavaScript

We’re also going to prefer simple JavaScript. So we’re going to try to keep the file size of our JavaScript down to an absolute minimum. We don’t want lots of bells and whistles; we want to keep everything as tight and efficient as possible. 

Create No-JavaScript Fallbacks

And the last point on JavaScript is that we want to make sure that to the best degree we can, we cater to people who have JavaScript turned off.

With the AMP version of the site that we’re going to be creating, if we turn off JavaScript, you can see that we don’t have much content to look at.

AMP site cover image
AMP site with messages about lack of JS

There’s a little more that we could do with this site to make it a little bit more fallback-friendly. But for the most part, AMP does fully depend on JavaScript in order to give you any type of content at all. 

With our non-AMP version, we’ve still got our background image showing just fine, and we’re actually also inserting some fallback for the font icons here as well, because often people who block JavaScript block fonts as well.

No AMP site

We have a message letting people know why the YouTube video can’t appear, and the same thing underneath where our CodePen would be.

Message explaining lack of YouTube video

Our gallery still shows up just the same, and then down at the bottom, we just have the text version of our tweets showing as a fallback in case there’s no JavaScript.

Lightbox gallery with no JavaScript

Use Lazy Loading

We are also going to make sure we use lazy loading on both images and iframes. If you have a site that is quite long, the person is typically going to look at what’s at the top of that website first, and then they’ll scroll down and have a look at the rest of the content.

But you don’t want to make them wait for the rest of that content to load before they can start looking at what’s at the top of the content. So, with lazy loading, you only load what’s at the top first, and then you gradually load the rest of the content as the person scrolls down.

Prevent Reflow

Finally, we’re also going to make sure that we prevent reflow. Something that you’ll often see, especially on mobile, is that as slower elements load in, like images for example, the rest of the page layout has to readjust itself around the newly loaded image. 

This is bad for a couple of reasons:

  1. It’s just really annoying for a user. They’ll be looking in one place, and then the whole layout changes, and they lose the piece of text they were reading, and they have to find it again. Then it reflows again, and the whole experience is just very bad. 
  2. One of the most expensive things that a browser has to do is calculate layout, and you want to make sure that the browser only has to calculate layout once. So even before your images have loaded, you want to make sure that you’ve allocated the correct space for those images. So the first layout that loads is the correct layout. 

Watch the Full Course

In the full course, Optimize Your Website Without AMP, you’ll put this checklist into practice. You’ll learn exactly how to take an existing AMP-based site and convert it to use non-AMP equivalents. In other words, you’ll learn how to make your sites run blazing fast, with optimization techniques that you decide on for yourself.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

View Tutorial: Optimize Your Website Without AMP: Optimization Checklist

How to Create a Color Font With Adobe Illustrator and Fontself Maker

Final product image
What You’ll Be Creating

Creating fonts has never been so fast, fun
and easy as with Fontself, a powerful extension for Adobe
Illustrator and Photoshop CC. In this tutorial, you’ll learn how to make a color font.

Fontself allows you to create a fully
functional font with all the bells and whistles that most professional fonts
have (kerning, ligatures, etc.), and the most exciting thing about it is that it helps you to create a color font!
You can make your imagination go wild and add any shapes and colors you want (including gradients and other effects) to your characters. 

Apart from creating color fonts, that can be used in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018, you can use Fontself to create standard “non-color” vector fonts that can be used in any other software like older versions of Adobe CC apps, CS6, Microsoft Word, and many others.

fontself

Can’t wait to try
it out? 

Thousands of creatives from Adobe,
Google, Apple, Microsoft and other well-known companies already use Fontself. What
is also cool about it is that it is 100% indie software that was created by
three passionate developers with a goal of bringing us a user-friendly font
creation tool. And they made it!

Let’s go through the whole process of
creating and using our own color font in Adobe Illustrator CC 2018 and Fontself Maker!

1. How to Draw the Letter A

Step 1

When I’m creating a font from
scratch, I usually start by depicting a general idea. This time I decided to create a font in a colorful line-art style.

I started with a rough sketch of every
letter, trying to make each of them unique yet preserving the overall style.
I’ll be using this sketch as a guide for the outlines that we’ll be making in
Adobe Illustrator.

Please note that Fontself Maker works with Adobe Illustrator CC 2015.3 and newer but to use color fonts you’ll need CC 2018 so don’t forget to update if you haven’t done so yet!

font sketch

Step 2

Begin by creating a New Document of desired size in RGB Color Mode. If you select other Color Mode, all colors will be turned to RGB even if defined in CMYK or if the document in the CMYK color space. You can learn more about color space in Fontself from their help page

Let’s start with the letter A. Take the Polygon Tool (you can find it in the
same drop-down menu as the Rectangle
Tool (M)
) and single-click anywhere on the Artboard. Set the number of Sides to 3 and make a triangle.

Set its Fill color to None and
its Stroke color to dark purple in
the Color panel. Now, in the Stroke panel (Window > Stroke), set the Weight
to 2.5 pt and Cap to Round Cap.

Now we can delete the bottom part of the
shape that we don’t need. Take the Direct
Selection Tool (A)
and click the bottom edge of the triangle. Hit the Delete key (or Backspace if you’re on a Mac) to delete it.

use the polygon tool

Step 3

Select the shape with the Selection Tool (V) and hit Enter to open the Move window. Set the Horizontal value to 25 px and Vertical to 0 px, and click Copy to duplicate the shape and move it to the right.

move the shape

Step 4

Keeping both shapes selected, take the Shape Builder Tool (Shift-M), hold down
Alt, and click the piece on the right
to delete it.

use the shape builder tool

Step 5

Copy the first shape and resize it to make a tiny triangle. Place it at
the bottom, creating the feather of an arrow. Select the shape, hold down Alt, and drag it up to create a copy. Add
two more copies and attach them along the left edge of the triangle.

Group
(Control-G)
the created elements of the feather and
double-click the Reflect Tool (O). Select the Vertical Axis and click Copy to flip the shape to the opposite
side.

use the reflect tool

Step 6

Take the Ellipse Tool (L), hold down Shift, and make a 10 x 10 px circle with
dark-blue Stroke and turquoise Fill color.

Tip: Use the Eyedropper Tool (I)
to pick the fill or stroke color or any appearance settings and apply them to
other objects. You can access the options of the Eyedropper Tool (I) by double-clicking
it in the Tools panel, and then you can tick the
settings that you want to pick and apply.

add circles with the ellipse tool

Step 7

Copy the stroke by selecting it and dragging to the side while holding Alt. Use the Pen Tool (P) to add an anchor point in the middle of the line. Then
use the Delete Anchor Point Tool (-)
to delete the point on top of the stroke.

add another stroke

Step 8

Take the Pen Tool (P) or the Line
Segment Tool (\)
and hold Shift
to make a horizontal line across the letter. This is going to be the bar of the
letter A.

Copy (Control-C > Control-F) the stroke and drag it down. Make it shorter by moving the points
with the Direct Selection Tool (A).

add the bar of the letter

Step 9

Now use the Pen Tool (P) to create a zigzag line in the upper part of the
letter, as shown in the image below.

Add some more strokes on both sides of the
letter, making it look more detailed.

create a zigzag

Step 10

Now that the outlines of the letter A are
ready, let’s add some color! We can duplicate
(Control-C > Control-B)
the letter and Hide the copy in the Layers
panel by clicking the tiny eye icon, just in case we need to use these outlines later.

Select the visible copy and go to Object > Live Paint > Make.

make a live paint

Step 11

Now grab the Live Paint Bucket (K) and hover over the area that you want to
fill with color. Once you see a red outline, click the area to fill it.

Continue using the Live Paint Bucket (K) and selecting new colors in the Color panel to fill the triangles in the top part of the letter.

use the live paint bucket

Step 12

Now let’s go to Object > Live Paint > Expand in order to turn each colored
section into a separate object.

expand the live paint

Step 13

Use the Direct Selection Tool (A) to drag a couple of elements out, making
the composition more dynamic.

And there we have it! Our first letter is
finished! Let’s move to the next one and see what else we can use to make it
look unique.

drag out the elements

2. How to Design the Letter B

Step 1

I’m not using any snapping or special grids for this font,
because I want to preserve a bit of a handcrafted touch without making it
geometrically perfect or pixel perfect. However, to make the font consistent, we need to keep
all the letters of the same height (while the width will be different).

Turn on the Rulers (Control-R) and drag a couple of horizontal guides onto the
Artboard to mark the height of the letter A. We can access the Guides menu from View > Guides.

use the rulers and guides

Step 2

Let’s start with the stem of the letter B.
Use the Rectangle Tool (M) to make a
narrow rectangle of about 30 x 120 px
(remember to keep the height equal to the height of your first letter).

Select its bottom edge with the Direct Selection Tool (A) and delete
it.

Add a few horizontal lines and attach a
couple of 10 x 10 px turquoise
circles to the bottom of the shape. We can copy
these circles from our letter A.

make a rectangle

Step 3

Now let’s make a straight horizontal line
using the Pen Tool (P) and go to Effect > Distort & Transform >
Zig Zag.
Set the Size to 10 px, Ridges per segment to 5, and Points to Corner.

Click OK
and go to Object > Expand Appearance
to apply the effect.

Place the created zigzag inside the top
part of the letter and resize it to make it fit the rectangle.

make a zigzag effect

Step 4

Let’s create a rectangle of about 45 x 55
px
size and align it to the top and left edges of the letter. To do this,
select the stem and the created rectangle and click the stem once again to make
it a Key Object (you will see a
thicker selection around it).

Open the Align panel (Window >
Align
) and click Horizontal Align
Left
and Vertical Align Top.

align the shapes

Step 5

Let’s select the top and bottom right corners
of the rectangle with the Direct
Selection Tool (A)
and make them rounded by pulling the circle marker of
the Live Corners closer to the
center. We can also adjust the Corners radius manually from the control panel on top.

Tip: If you can’t find the top control panel after updating to Adobe Illustrator CC 2018, don’t worry! It’s still there, and you can turn it on in Window > Workspace > Essentials Classic.

Let’s delete the left edge of the shape.
Select the bottom left corner with the Direct
Selection Tool (A)
and press Delete
(Backspace on Mac).

Repeat the same for the top left point,
leaving only the arched shape.

Make a larger arc for the bottom bowl of
the letter B.

make the corners rounded

Step 6

Add a smaller arc inside the bottom
bowl. Make the letter more intricate by adding horizontal and vertical strokes.
Finish off the outlines by placing two circles inside the bottom bowl.

add details and strokes

Step 7

Let’s duplicate
(Control-C > Control-B)
the letter and keep the copy invisible
in case we need it later.

Select the visible copy and Object > Live Paint > Make. Use
the Live Paint Bucket (K) and the Eyedropper Tool (I) to pick and apply
colors to the elements of the letter B.

Let’s finish off the letter. Go to Object > Live Paint > Expand and
use the Direct Selection Tool (A) to
drag some of the colored parts out of the outline.

Awesome! The second letter is finished!
Let’s check out some more techniques that we can use for other letters and
symbols.

apply colors with live paint bucket

3. How to Draw the Letter C

Step 1

Take the Ellipse Tool (L) and start with the base of the letter by making a 115 x 115 px circle. Copy the created circle and Paste in Front (Control-C > Control-F). Decrease
the size of the copy to 80 x 80 px.

As you may notice, the letter is a bit
lower than the top guideline. We’ve left some space above the circle in order
to add a few details there.

make a circle for the base

Step 2

Take the Pen Tool (P), hold Shift, and make a vertical line across the
circles. Keeping the line selected, double-click the Rotate Tool (R) and set the Angle
to 12 degrees. Click Copy to add a rotated copy of the line.

Now press Control-D to repeat the last action and keep pressing until you get
30 copies to fill the circle.

Let’s group
(Control-G)
the created rays and hide
them for now.

make a vertical line

Step 3

Now let’s create a silhouette of the letter
C. Use the Add Anchor Point Tool (+)
to add two points on the right side of the larger circle and two for the
smaller one, as marked in the screenshot below.

Now we can use the Direct Selection Tool (A) to click the segment of arc between the created points and delete it. Repeat the same for
both circles.

add points and delete segments

Step 4

Now let’s reveal the hidden rays and select
all the elements of the C.

Take the Shape Builder Tool (Shift-M) and click the rectangles formed by
crossing lines. Don’t click all of them; leave some untouched space at the bottom
of the shape.

Now we can select the unneeded pieces of
the rays in the center of the C and delete them.  

use the shape builder tool

Step 5

Let’s break the pieces of the rays on the
left of the letter C.

Use the Pen Tool (P) to add a new anchor point somewhere in the middle of
the line and delete the top point with the Delete Anchor Point Tool (-). This way we detach the piece from the
edge of the letter.

Continue alternating the rays, making some
of them shorter and detaching others to add variation to the silhouette of the
letter.

break the lines

Step 6

Add some more arched strokes to the inner
part of the letter. Attach circles to the tips of the large arcs.

Duplicate the created outlines and use the Live Paint and the Live
Paint Bucket (K)
to add colors.

add more details and colors

Step 7

Object
> Live Paint > Expand
the shape and drag out
some of the colored rectangles. Great work! Our third letter is finished!

Go on and create more letters, numerals, and
punctuation, everything that you might need for your future font. Don’t worry if you don’t
make all the desired symbols at once; you can always reopen your font file and add them later.

expand the live paint

4. How to Make a Color Font in Fontself

Step 1

Now for the fun part! Since we have everything
prepared, we can finally create a font using Fontself Maker! 

First of all, let’s open the Layers panel and place all the letters
in alphabetical order, from left to right. Fontself will automatically assign the proper characters if your place them in the correct order.

We can rename the bottom guideline, setting it as a baseline.

rearrange the letters

Step 2

Now let’s make sure that all our letters
are aligned to the bottom and placed
on the baseline. Select your characters and click Vertical Align Bottom in the Align panel, using one of the characters as a Key Object.

align the letters to the baseline

Step 3

Go to Window
> Extensions
and run Fontself
Maker
. A compact window of the extension will load, and you can adjust its
size by dragging its bottom corners. It has a simple and user-friendly
drag-and-drop interface with pop-up hints and an online chat assistant that can help you with your questions.

open fontself maker

Step 4

Now let’s select our alphabet and drag it to the Fontself window. Here we have several options to choose from. If you
already have all the characters ready, you can use the ‘A-Z’ area and drop your letters there. Fontself will automatically place them in right order, giving each letter a proper name. 

Otherwise, if you don’t have all the characters finished yet, place your mouse
cursor over the ‘Any character (Batch)’
field and release the mouse key to upload your characters.

In our case, we’re making an uppercase
font, so all the letters will be the same for both upper and lower case.

add characters to fontself

Step 5

What is great about Fontself is that it
makes things so much easier: once we have arranged and aligned our letters, the
program will place them in the correct order, using the information from the Layers panel. Just make sure that you
drag and drop everything together, including the baseline.

If you need some more control
over the guidelines and you wish to add an ascender and descender, you can make
it too! Just add two more guidelines, rename them “ascender” and “descender”
in the Layers panel, and then drag and
drop them into Fontself together with your alphabet. Voila!

You can learn more about using guides in
Fontself from the help page.

Now we have every letter placed in its own
slot. From here, we can type something in the Live Preview window to check out how it looks and play with Letter Space, Line Space and Scale, if needed.

Clicking the tiny cog icon on the
right allows you to change the font size, alignment, and background color.

We can also expand the letter preview
window by clicking the tiny diagonal arrows icon in the top left corner of every preview
slot (circled in the screenshot below) or by double-clicking the glyph.

Fontself maker settings

Step 6

Here we have some more options for
each letter. We can drag the lines, changing the position of the ascender and descender and adjusting other settings.

glyph settings

Step 7

Once we’re happy with the letters, let’s
add other symbols and punctuation! To do this, just select the elements on the
Artboard and click the Batch button
in the Home window of Fontself. Your
symbols will be added and placed in the proper order.

add punctuation

Step 8

Now let’s take a look at some advanced
settings that are vital when creating any font. Find and click the Advanced button in the Home window of
Fontself.

From here, we can adjust the Spacing, Kerning, and some other
parameters that are important to make our font look balanced and consistent.

advanced settings of Fontself

Step 9

Let’s start with Spacing.

In typography, spacing or tracking is the amount of space between the characters, which affects the density and gives the font its relative openness or tightness. In fact, a good spacing will save you a bunch of time when creating a font, so make sure you start by adjusting it first!

There are several ways to work with spacing in Fontself. First of all, click on the Spacing Pad window and type some phrases there to see how the characters behave within a text. Now, in the grey area on the right, you can see a list of letters and their values. Here you can edit the spacing by entering precise values in the table.

adjust spacing in fontself

Step 10

Another way to edit spacing is to do it manually by clicking the character itself and dragging the dashed lines on the left and right sides of it. You will see all the adjustments in the Spacing Pad and in the Live Preview area which already has a sample text with all your characters.

edit spacing in fontself

Step 11

Now that we’re happy with the density of the text and its overall look, it’s time to adjust the kerning pairs by clicking
the Kerning button.

Kerning is the process of adjusting the spacing between specific character pairs to
achieve a visually pleasing result. In proportional all-caps fonts, it often
happens that letters in some common combinations (such as VA or AW) look
too far away from each other. In this case, we need to find such pairs and
adjust the spacing between them manually, creating kerning pairs. And Fontself has this function too! What is more, it
already has some common kerning pairs in the Live Preview window, so that you
can see the result instantly.

The same as with spacing, there are several ways to adjust
kerning. First of all, click on the Kerning
Pad
window and type some kerning pairs that you want to edit, for example
AVA. Now, in the grey area on the right, you can see the Kerning pairs window and type the values there manually.

make kerning pairs

Step 12

Another way to adjust kerning is to click
the character and drag the dashed line between the pair. The red line appears for
negative values, making the space between the letters smaller. The blue
line indicates the increasing space with a positive value that moves the
letters farther away from each other. Simple as that.

adjust kerning pairs

Step 13

The next important thing that you might
want to use in your font—and Fontself has this feature—is the use of ligatures!

A ligature is a combination of two or more letters into one symbol. For
example, in common combinations like ‘tt’, ‘fi’, and ‘ff’, we might want to change
some elements of the letters, such as crossbars, to make them look better together. Moreover, while working with color fonts, we can use ligatures in more creative ways, like making some words or names look fancy by adding new elements to them, such as particles, flowers or swashes. In this case, the whole composition can be used as a symbol, i.e. ligature. 

use of ligatures in fontself

Let’s say we want to merge two letters
together in ‘TT’ to make a single bar for them. Once you draw out the new letter, select it on the Artboard. Then open
the Fontself window and type ‘TT’ in the text area on top and click the Create Ligature button right next to
it.

add ligatures in fontself

Step 12

Once you’ve clicked the button, Fontself
will ask you what kind of ligature you want to create. Later on, you can
find both Standard Ligatures and Discretionary Ligatures in the OpenType panel (Window > OpenType) of Adobe Illustrator and see how they work.

types of ligatures in fontself

Step 13

The last but not the least function that
can make your font more unique and playful is using Alternates—the alternative versions of some (or all) characters
that add variety to the whole text. Those can be versions with other colors, outlines, or swashes.

For example, here you can see that in the
word ‘COLORS’, the ‘O’ letters are slightly different. This is how we do it.
Once you have the alternative version of the letter prepared, select it on the
Artboard and add it to Fontself. The program will ask you if you want to Replace the existing letter ‘O’ or create
an alternate glyph. Just click the Alternate
button, and there you have it!

add alternates in fontself

Step 14

Now that we have added all the characters to
Fontself, adjusted the spacing and kerning, and set the ligatures and alternates, it’s time
to name our baby!

Click the Font Infos button in the Home
window of Fontself and fill in all the needed information. The developers’
hints will guide you throughout the process. I can’t but mention their great
sense of humor in this part.

name your font and add info

Step 15

Finally, it’s time to try out our first
color font! Oh, I’m so excited!

To start with, we can test it right in
Adobe Illustrator by clicking the Install
button in the top part of the Home window of Fontself. Now you can select your font in the Character panel of Adobe Illustrator (Window > Character) and try it out by typing something!

install your font and test it

Step 16

Once you’re happy with the result, go ahead
and click the Export button in the
Fontself window to generate an OpenType file with your font and all the cool
features that we added to it using the extension. Exporting the font also allows you to Save your work and whenever you need to edit it again, you’ll just have to Open it in Fontself and there you have it!

export your opentype font

Congratulations! Our Color Font Is Finished!

Great work! Now we can have fun using
our color font in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018!
The process of adjusting and installing the font with the help of Fontself Maker was
so fun and easy that I haven’t even noticed how I finished all the steps
that usually make me bored.

I hope you enjoy creating characters
in Adobe Illustrator and turning them into a color font in Fontself as much as
I do. Feel free to try it out, and don’t forget to share your results in the
comments below or in social networks with #fontself!

Color Font in Fontself

If you like the typeface that we’ve created in this tutorial and you wanna play with it, feel free to grab the Fiesta Color Font at Envato Elements! In the archive you will also get vector files with all the characters to make your own lettering or to try out how it functions in Fontself Maker. Enjoy!

View Tutorial: How to Create a Color Font With Adobe Illustrator and Fontself Maker

Create the Perfect Carousel, Part 2

Welcome back to the Create the Perfect Carousel tutorial series. We’re making an accessible and delightful carousel using JavaScript and Popmotion‘s physics, tween and input tracking capabilities.

In part 1 of our tutorial, we took a look at how Amazon and Netflix have created their carousels and evaluated the pros and cons of their approaches. With our learnings, we decided on a strategy for our carousel and implemented touch scrolling using physics.

In part 2, we’re going to implement horizontal mouse scroll. We’re also going to look at some common pagination techniques and implement one. Finally, we’re going to hook up a progress bar that will indicate how far through the carousel the user is.

You can restore your save point by opening this CodePen, which picks up where we left off.

Horizontal Mouse Scroll

It’s rare that a JavaScript carousel respects horizontal mouse scroll. This is a shame: on laptops and mice that implement momentum-based horizontal scrolling, this is by far the quickest way to navigate the carousel. It’s as bad as forcing touch users to navigate via buttons rather than swipe.

Luckily, it can be implemented in just a few lines of code. At the end of your carousel function, add a new event listener:

container.addEventListener('wheel', onWheel);

Below your startTouchScroll event, add a stub function called onWheel:

function onWheel(e) {
  console.log(e.deltaX)
}

Now, if you run the scroll wheel over the carousel and check your console panel, you’ll see the wheel distance on the x-axis output.

As with touch, if wheel movement is mostly vertical, the page should scroll as usual. If it’s horizontal, we want to capture the wheel movement and apply it to the carousel. So, in onWheel, replace the console.log with:

const angle = calc.angle({
  x: e.deltaX,
  y: e.deltaY
});

if (angleIsVertical(angle)) return;

e.stopPropagation();
e.preventDefault();

This block of code will stop page scroll if the scroll is horizontal. Updating our slider’s x offset is now just a matter of taking the event’s deltaX property and adding that to our current sliderX value:

const newX = clampXOffset(
  sliderX.get() + - e.deltaX
);
sliderX.set(newX);

We’re reusing our previous clampXOffset function to wrap this calculation and make sure the carousel doesn’t scroll beyond its measured boundaries.

An Aside on Throttling Scroll Events

Any good tutorial that deals with input events will explain how important it is to throttle those events. This is because scroll, mouse and touch events can all fire faster than the device’s frame rate.

You don’t want to perform unnecessary resource-intensive work like rendering the carousel twice in one frame, as it’s a waste of resources and a quick way to make a sluggish-feeling interface.

This tutorial hasn’t touched on that because the renderers provided by Popmotion implement Framesync, a tiny frame-synced job scheduler. This means you could call (v) => sliderRenderer.set('x', v) multiple times in a row, and the expensive rendering would only happen once, on the next frame.

Pagination

That’s scrolling finished. Now we need to inject some life into the hitherto unloved navigation buttons.

Now, this tutorial is about interaction, so feel free to design these buttons as you wish. Personally, I find direction arrows more intuitive (and fully internationalised by default!).

How Should Pagination Work?

There are two clear strategies we could take when paginating the carousel: item-by-item or first obscured item. There’s only one correct strategy but, because I’ve seen the other one implemented so often, I thought it’d be worth explaining why it’s incorrect.

1. Item by Item

Item By Item Example

Simply measure the x offset of the next item in the list and animate the shelf by that amount. It’s a very simple algorithm that I assume is picked for its simplicity rather than its user-friendliness.

The problem is that most screens will be able to show lots of items at a time, and people will scan them all before trying to navigate.

It feels sluggish, if not outright frustrating. The only situation in which this would be a good choice is if you know the items in your carousel are the same width or only slightly smaller than the viewable area.

However, if we’re looking at multiple items, we’re better using the first obscured item method:

2. First Obscured Item

The First Obscured Item

This method simply looks for the first obscured item in the direction we want to move the carousel, takes its x offset, and then scrolls to that.

In doing so, we pull in the maximum number of new items working on the assumption that the user has seen all those currently present.

Because we’re pulling in more items, the carousel requires fewer clicks to navigate around. Faster navigation will increase engagement and ensure your users see more of your products.

Event Listeners

First, let’s set up our event listeners so we can start playing around with the pagination.

We first need to select our previous and next buttons. At the top of the carousel function, add:

const nextButton = container.querySelector('.next');
const prevButton = container.querySelector('.prev');

Then, at the bottom of the carousel function, add the event listeners:

nextButton.addEventListener('click', gotoNext);
prevButton.addEventListener('click', gotoPrev);

Finally, just above your block of event listeners, add the actual functions:

function goto(delta) {
}

const gotoNext = () => goto(1);
const gotoPrev = () => goto(-1);

goto is the function that’s going to handle all the logic for pagination. It simply takes a number which represents the direction of travel we wish to paginate. gotoNext and gotoPrev simply call this function with 1 or -1, respectively.

Calculating a “Page”

A user can freely scroll this carousel, and there are n items within it, and the carousel might be resized. So the concept of a traditional page is not directly applicable here. We won’t be counting the number of pages.

Instead, when the goto function is called, we’re going to look in the direction of delta and find the first partially obscured item. That will become the first item on our next “page”.

The first step is to get the current x offset of our slider, and use that with the full visible width of the slider to calculate an “ideal” offset to which we’d like to scroll. The ideal offset is what we would scroll to if we were naive to the contents of the slider. It provides a nice spot for us to start searching for our first item.

const currentX = sliderX.get();
let targetX = currentX + (- sliderVisibleWidth * delta);

We can use a cheeky optimisation here. By providing our targetX to the clampXOffset function we made in the previous tutorial, we can see if its output is different to targetX. If it is, it means our targetX is outside of our scrollable bounds, so we don’t need to figure out the closest item. We just scroll to the end.

const clampedX = clampXOffset(targetX);

targetX = (targetX === clampedX)
  ? findClosestItemOffset(targetX, delta)
  : clampedX;

Finding the Closest Item

It’s important to note that the following code works on the assumption that all of the items in your carousel are the same size. Under that assumption, we can make optimisations like not having to measure the size of every item. If your items are different sizes, this will still make a good starting point. 

Above your goto function, add the findClosestItemOffset function referenced in the last snippet:

function findClosestItem(targetX, delta) {
}

First, we need to know how wide our items are and the spacing between them. The Element.getBoundingClientRect() method can provide all the information we need. For width, we simply measure the first item element. To calculate the spacing between items, we can measure the right offset of the first item and the left offset of the second, and then subtract the former from the latter: 

const { right, width } = items[0].getBoundingClientRect();
const spacing = items[1].getBoundingClientRect().left - right;

Now, with the targetX and delta variables we passed through to the function, we have all the data we need to quickly calculate an offset to scroll to.

The calculation is to divide the absolute targetX value by the width + spacing. This will give us the exact number of items we can fit inside that distance.

const totalItems = Math.abs(targetX) / (width + spacing);

Then, round up or down depending on the direction of pagination (our delta). This will give us the number of complete items we can fit.

const totalCompleteItems = delta === 1
  ? Math.floor(totalItems)
  : Math.ceil(totalItems);

Finally, multiply that number by width + spacing to give us an offset flush with a full item.

return 0 - totalCompleteItems * (width + spacing);

Animate the Pagination

Now that we’ve got our targetX calculated, we can animate to it! For this, we’re going to use the workhorse of web animation, the tween.

For the uninitiated, “tween” is short for between. A tween changes from one value to another, over a set duration of time. If you’ve used CSS transitions, this is the same thing. 

There are a number of benefits (and shortcomings!) to using JavaScript over CSS for tweens. In this instance, because we’re also animating sliderX with physics and user input, it will be easier for us to stay in this workflow for the tween.

It also means that later on we can hook up a progress bar and it’ll work naturally with all our animations, for free.

We first want to import tween from Popmotion:

const { calc, css, easing, physics, pointer, transform, tween, value } = window.popmotion;

At the end of our goto function, we can add our tween that animates from currentX to targetX:

tween({
  from: currentX,
  to: targetX,
  onUpdate: sliderX
}).start();

By default, Popmotion sets duration to 300 milliseconds and ease to easing.easeOut. These have been picked specifically to provide a responsive feel to animations that respond to user input, but feel free to play around and see if you come up with something that better fits the feel of your brand.

Progress Indicator

It’s useful for users to have some indication about where in the carousel they are. For this, we can hook up a progress indicator.

Your progress bar could be styled in a number of ways. For this tutorial, we’ve made a coloured div, 5px high, that runs between the previous and next buttons. It’s the way that we hook this up to our code and animate the bar that is important and is the focus of this tutorial.

You haven’t seen the indicator yet because we originally styled it with transform: scaleX(0). We use a scale transform to adjust the width of the bar because, as we explained in part 1, transforms are more performant than changing properties like left or, in this case, width.

It also allows us to easily write code that sets the scale as a percentage: the current value of sliderX between minXOffset and maxXOffset.

Let’s start by selecting our div.progress-bar after our previousButton selector:

const progressBar = container.querySelector('.progress-bar');

After we define sliderRenderer, we can add a renderer for progressBar:

const progressBarRenderer = css(progressBar);

Now let’s define a function to update the scaleX of the progress bar.

We’ll use a calc function called getProgressFromValue. This takes a range, in our case min and maxXOffset, and a third number. It returns the progress, a number between 0 and 1, of that third number within the given range.

function updateProgressBar(x) {
  const progress = calc.getProgressFromValue(maxXOffset, minXOffset, x);
  progressBarRenderer.set('scaleX', progress);
}

We’ve written the range here as maxXOffset, minXOffset when, intuitively, it should be reversed. This is because x is a negative value, and maxXOffset is also a negative value whereas minXOffset is 0. The 0 is technically the larger of the two numbers, but the smaller value actually represents the maximum offset. Negatives, huh?

We want the progress indicator to update in lockstep with sliderX, so let’s change this line:

const sliderX = value(0, (x) => sliderRenderer.set('x', x));

To this line:

const sliderX = value(0, (x) => {
  updateProgressBar(x);
  sliderRenderer.set('x', x);
});

Now, whenever sliderX updates, so will the progress bar.

Conclusion

That’s it for this instalment! You can grab the latest code on this CodePen. We’ve successfully introduced horizontal wheel scrolling, pagination, and a progress bar.

The carousel is in pretty good shape so far! In the final instalment, we’re going to take it a step further. We’ll make the carousel fully keyboard accessible to ensure anyone can use it. 

We’re also going to add a couple of delightful touches using a spring-powered tug when a user tries to scroll the carousel past its boundaries using either touch scroll or pagination. 

See you then!

View Tutorial: Create the Perfect Carousel, Part 2

How to Use Sketch Libraries: Collaboration Made Easy

In this tutorial you’ll learn all about a brand new Sketch feature called “libraries”. Libraries were recently introduced, in version 47, and really enhance the way we work with assets and other team members.

Watch Screencast

 

Introducing Sketch Libraries

A Sketch library is essential a Sketch file with a bunch of symbols. Where libraries differ, is that the symbols within them become available from within the Sketch app without you needing to open the document they’re stored in. You can import your library assets into any Sketch document you like.

Open up Sketch 47 for the first time and you’ll see straight away that there’s a library available for you to use, under the Insert or the Symbol menu. The “iOS UI Design library” has a wide variety of assets you can place straight onto your artboard.

How to Create Your Own Sketch Library

To demonstrate this I’m going to create a library of color swatches. Firstly, we create a page, then on that page we place a few color swatches (rectangles of whatever colors we want). Using the Create Symbols option we name each one, beginning with color/ in order to group them in the symbols menu. 

This particular document is saved permanently in a suitable location, and is already effectively acting as a library of sorts. But now we need to add it to Sketch itself.

Go to Sketch > Preferences > Libraries and click Add Library. Then point to the file we need (our color file in this case) and watch as it becomes available in the list of libraries.

Whoomp There It Is
Whoomp! (There it is)

Now, we can access our color symbols from the Symbols menu where we see other libraries listed too.

Updating Symbols and Libraries

Importantly, at this point in the process, there now appears a warning at the bottom of our original colors file:

Any changes we make to the symbols within this file will reflect directly on the library and therefore any other files which make use of the library. If we do choose to make an update, we’ll be warned in other files which make use of the library (see top right of window):

Clicking Library Update Available will open a dialog showing exactly what changes have been made before you commit to using them.

Conclusion

Imagine the power libraries could give you and your design team. Consider the above situation and your own designs’ colors–altering one color swatch in your main branding library and watching it take effect across all your components. And this applies to all kinds of symbols too; typography symbols, icons, styles..brilliant!

Take a look at the screencast above for more details, and stay tuned for further Sketch updates and tricks.

View Tutorial: How to Use Sketch Libraries: Collaboration Made Easy

Make Your Go Programs Lightning Fast With Profiling

Go is often used for writing distributed systems, advanced data stores, and microservices. Performance is key in these domains. 

In this tutorial, you’ll learn how to profile your programs to make them lightning fast (utilize the CPU better) or feather light (use less memory). I will cover CPU and memory profiling, using the pprof (the Go profiler), visualizing the profiles, and even flame graphs.

Profiling is measuring the performance of your program in various dimensions. Go comes with great support for profiling and can profile the following dimensions out of the box:

  • a sampling of CPU time per function AND instruction
  • a sampling of all heap allocations
  • stack traces of all current goroutines
  • stack traces that led to the creation of new OS threads
  • stack traces that led to blocking on synchronization primitives
  • stack traces of holders of contended mutexes

You can even create custom profiles if you want. Go profiling involves creating a profile file and then analyzing it using the pprof go tool.

How to Create Profile Files

There are several ways to create a profile file.

Using “go test” to Generate Profile Files

The easiest way is to use go test. It has several flags that allow you to create profile files. Here is how to generate both a CPU profile file and a memory profile file for the test in the current directory: go test -cpuprofile cpu.prof -memprofile mem.prof -bench .

Download Live Profile Data From a Long-Running Service

If you want to profile a long-running web service, you can use the built-in HTTP interface for providing profile data. Add somewhere the following import statement:

import _ "net/http/pprof"

Now, you can download live profile data from the /debug/pprof/ URL. More info is available in the net/http/pprof package documentation.

Profiling in Code

You can also add direct profiling into your code for complete control. First you need to import runtime/pprof. CPU profiling is controlled by two calls:

  • pprof.StartCPUProfile()
  • pprof.StopCPUProfile()

Memory profiling is done by calling runtime.GC() followed by pprof.WriteHeapProfile().

All the profiling functions accept a file handle that you are responsible for opening and closing appropriately.

The Sample Program

To see the profiler in action, I’ll use a program that solves Project Euler’s Problem 8. The problem is: given a 1,000-digit number, find the 13 adjacent digits within this number that have the largest product. 

Here is a trivial solution that iterates over all the sequences of 13 digits, and for each such sequence it multiplies all 13 digits and returns the result. The largest result is stored and finally returned:

package trivial

import (
    "strings"
)

func calcProduct(series string) int64 {
	digits := make([]int64, len(series))
	for i, c := range series {
		digits[i] = int64(c) - 48
	}

	product := int64(1)
	for i := 0; i < len(digits); i++ {
		product *= digits[i]
	}

	return product
}

func FindLargestProduct(text string) int64 {
	text = strings.Replace(text, "\n", "", -1)
	largestProduct := int64(0)
	for i := 0; i < len(text); i++ {
		end := i + 13
		if end > len(text) {
			end = len(text)
		}
		series := text[i:end]
		result := calcProduct(series)
		if result > largestProduct {
			largestProduct = result
		}
	}

	return largestProduct
}

Later, after profiling, we will see some ways to improve the performance with another solution.

CPU Profiling

Let’s profile the CPU of our program. I’ll use the go test method using this test:

import (
    "testing"
)

const text = `
73167176531330624919225119674426574742355349194934
96983520312774506326239578318016984801869478851843
85861560789112949495459501737958331952853208805511
12540698747158523863050715693290963295227443043557
66896648950445244523161731856403098711121722383113
62229893423380308135336276614282806444486645238749
30358907296290491560440772390713810515859307960866
70172427121883998797908792274921901699720888093776
65727333001053367881220235421809751254540594752243
52584907711670556013604839586446706324415722155397
53697817977846174064955149290862569321978468622482
83972241375657056057490261407972968652414535100474
82166370484403199890008895243450658541227588666881
16427171479924442928230863465674813919123162824586
17866458359124566529476545682848912883142607690042
24219022671055626321111109370544217506941658960408
07198403850962455444362981230987879927244284909188
84580156166097919133875499200524063689912560717606
05886116467109405077541002256983155200055935729725
71636269561882670428252483600823257530420752963450
`

func TestFindLargestProduct(t *testing.T) {
	for i := 0; i < 100000; i++ {
		res := FindLargestProduct(text)
		expected := int64(23514624000)
		if res != expected {
			t.Errorf("Wrong!")
		}
	}
}

Note that I run the test 100,000 times because the go profiler is a sampling profiler that needs the code to actually spend some significant time (several milliseconds cumulative) on each line of code. Here is the command to prepare the profile:

go test -cpuprofile cpu.prof -bench .
ok _/github.com/the-gigi/project-euler/8/go/trivial	13.243s

It took a little over 13 seconds (for 100,000 iterations). Now, to view the profile, use the pprof go tool to get into the interactive prompt. There are many commands and options. The most basic command is topN; with the -cum option it shows the top N functions that took the most cumulative time to execute (so a function that takes very little time to execute, but is called many times, can be at the top). This is usually what I start with.

> go tool pprof cpu.prof
Type: cpu
Time: Oct 23, 2017 at 8:05am (PDT)
Duration: 13.22s, Total samples = 13.10s (99.06%)
Entering interactive mode (type "help" for commands)
(pprof) top5 -cum
Showing nodes accounting for 1.23s, 9.39% of 13.10s total
Dropped 76 nodes (cum <= 0.07s)
Showing top 5 nodes out of 53
 flat  flat%   sum%   cum   cum%
0.07s  0.53%  0.53%   10.64s 81.22%  FindLargestProduct
0      0%     0.53%   10.64s 81.22%  TestFindLargestProduct
0      0%     0.53%   10.64s 81.22%  testing.tRunner
1.07s  8.17%  8.70%   10.54s 80.46%  trivial.calcProduct
0.09s  0.69%  9.39%   9.47s  72.29%  runtime.makeslice

Let’s understand the output. Each row represents a function. I elided the path to each function due to space constraints, but it will show in the real output as the last column. 

Flat means the time (or percentage) spent within the function, and Cum stands for cumulative—the time spent within the function and all the functions it calls. In this case, testing.tRunner actually calls TestFindLargestProduct(), which calls FindLargestProduct(), but since virtually no time is spent there, the sampling profiler counts their flat time as 0.

Memory Profiling

Memory profiling is similar, except that you create a memory profile:

go test -memprofile mem.prof -bench .

PASS

ok      _/github.com/the-gigi/project-euler/8/go/trivial

You can analyze your memory usage using the same tool.

Using pprof to Optimize Your Program’s Speed

Let’s see what we can do to solve the problem faster. Looking at the profile, we see that calcProduct() takes 8.17% of the flat runtime, but makeSlice(), which is called from calcProduct(), is taking 72% (cumulative because it calls other functions). This gives a pretty good indication of what we need to optimize. What does the code do? For each sequence of 13 adjacent numbers, it allocates a slice:

func calcProduct(series string) int64 {
    digits := make([]int64, len(series))
    ... 

That’s almost 1,000 times per run, and we run 100,000 times. Memory allocations are slow. In this case, there is really no need to allocate a new slice every time. Actually, there is no need to allocate any slice at all. We can just scan the input array. 

The following code snippet shows how to compute the running product by simply dividing by the first digit of the previous sequence and multiplying by the cur digit. 

if cur == 1 {
	currProduct /= old
	continue
}

if old == 1 {
	currProduct *= cur
} else {
	currProduct = currProduct / old * cur
}

if currProduct > largestProduct {
	largestProduct = currProduct
}

Here is a short list of some of the algorithmic optimizations:

  • Computing a running product. Suppose we computed the product at index N… N+13 and call it P(N). Now we need to compute the product at index N+1..N+13. P(N+1) equals to P(N) except that the first number at index N is gone and we need to take into account the new number at index N+14T. This can be done by dividing the previous product by its first number and multiplying by the new number. 
  • Not computing any sequence of 13 numbers that contain 0 (the product will always be zero).
  • Avoiding division or multiplication by 1.

The complete program is here. There is some thorny logic to work around the zeros, but other than that it is pretty straightforward. The main thing is that we only allocate one array of 1000 bytes at the beginning, and we pass it by pointer (so no copy) to the  findLargestProductInSeries() function with a range of indexes.

package scan


func findLargestProductInSeries(digits *[1000]byte, 
                                start, end int) int64 {
    if (end - start)  < 13 {
        return -1
    }

    largestProduct := int64((*digits)[start])
    for i := 1; i < 13 ; i++ {
        d := int64((*digits)[start + i])
        if d == 1 {
            continue
        }
        largestProduct *= d
    }

    currProduct := largestProduct
    for ii := start + 13; ii < end; ii++ {
        old := int64((*digits)[ii-13])
        cur := int64((*digits)[ii])
        if old == cur {
            continue
        }

        if cur == 1 {
            currProduct /= old
            continue
        }

        if old == 1 {
            currProduct *= cur
        } else {
            currProduct = currProduct / old * cur
        }

        if currProduct > largestProduct {
            largestProduct = currProduct
        }
    }

    return largestProduct
}


func FindLargestProduct(text string) int64 {
    var digits [1000]byte
    digIndex := 0
    for _, c := range text {
        if c == 10 {
            continue
        }
        digits[digIndex] = byte(c) - 48
        digIndex++
    }

    start := -1
    end := -1
    findStart := true
    var largestProduct int64
    for ii := 0; ii < len(digits) - 13; ii++ {
        if findStart {
            if digits[ii] == 0 {
                continue
            } else {
                start = ii
                findStart = false
            }
        }

        if digits[ii] == 0 {
            end = ii
            result := findLargestProductInSeries(&digits, 
                                                 start, 
                                                 end)
            if result > largestProduct {
                largestProduct = result
            }
            findStart = true
        }
    }

    return largestProduct
}

The test is the same. Let’s see how we did with the profile:

> go test -cpuprofile cpu.prof -bench .
PASS
ok      _/github.com/the-gigi/project-euler/8/go/scan	0.816s

Right off the bat, we can see that the runtime dropped from more than 13 seconds to less than one second. That’s pretty good. Time to peek inside. Let’s use just top10, which sorts by flat time.

(pprof) top10
Showing nodes accounting for 560ms, 100% of 560ms total
flat  flat%   sum%     cum   cum%
290ms 51.79%  51.79%   290ms 51.79%  findLargestProductInSeries
250ms 44.64%  96.43%   540ms 96.43%  FindLargestProduct 
20ms  3.57%   100%     20ms  3.57%   runtime.usleep 
0     0%      100%     540ms 96.43%  TestFindLargestProduct 
0     0%      100%     20ms  3.57%   runtime.mstart 
0     0%      100%     20ms  3.57%   runtime.mstart1 
0     0%      100%     20ms  3.57%   runtime.sysmon 
0     0%      100%     540ms 96.43%  testing.tRunner 

This is great. Pretty much the entire runtime is spent inside our code. No memory allocations at all. We can dive deeper and look at the statement level with the list command:

(pprof) list FindLargestProduct
Total: 560ms
ROUTINE ======================== scan.FindLargestProduct
250ms      540ms (flat, cum) 96.43% of Total
 .          .     44:
 .          .     45:
 .          .     46:func FindLargestProduct(t string) int64 {
 .          .     47:    var digits [1000]byte
 .          .     48:  digIndex := 0
70ms       70ms   49:  for _, c := range text {
 .          .     50:    if c == 10 {
 .          .     51:      continue
 .          .     52:    }
 .          .     53:    digits[digIndex] = byte(c) - 48
10ms       10ms   54:    digIndex++
 .          .     55:  }
 .          .     56:
 .          .     57:  start := -1
 .          .     58:  end := -1
 .          .     59:  findStart := true
 .          .     60:  var largestProduct int64
 .          .     61:  for ii := 0; ii < len(digits)-13; ii++ {
10ms       10ms   62:    if findStart {
 .          .     63:      if digits[ii] == 0 {
 .          .     64:        continue
 .          .     65:      } else {
 .          .     66:        start = ii
 .          .     67:        findStart = false
 .          .     68:      }
 .          .     69:    }
 .          .     70:
70ms       70ms   71:    if digits[ii] == 0 {
 .          .     72:      end = ii
20ms      310ms   73:      result := f(&digits,start,end)
70ms       70ms   74:      if result > largestProduct {
 .          .     75:        largestProduct = result
 .          .     76:      }
 .          .     77:      findStart = true
 .          .     78:    }
 .          .     79:  }

This is pretty amazing. You get a statement by statement timing of all the important points. Note that the call on line 73 to function f() is actually a call to findLargestProductInSeries(), which I renamed in the profile due to space limitations. This call takes 20 ms. Maybe, by embedding the function code in place, we can save the function call (including allocating stack and copying arguments) and save those 20 ms. There may be other worthwhile optimizations that this view can help pinpoint.

Visualization

Looking at these text profiles can be difficult for large programs. Go gives you a lot of visualization options. You’ll need to install Graphviz for the next section.

The pprof tool can generate output in many formats. One of the easiest ways (svg output) is simply to type ‘web’ from the pprof interactive prompt, and your browser will display a nice graph with the hot path marked in pink.

Visualization

Flame Graphs

The built-in graphs are nice and helpful, but with large programs, even these graphs can be difficult to explore. One of the most popular tools for visualizing performance results is the flame graph. The pprof tool doesn’t support it out of the box yet, but you can play with flame graphs already using Uber’s go-torch tool. There is ongoing work to add built-in support for flame graphs to pprof.

Conclusion

Go is a systems programming language that is used to build high-performance distributed systems and data stores. Go comes with excellent support that keeps getting better for profiling your programs, analyzing their performance, and visualizing the results. 

There is a lot of emphasis by the Go team and the community on improving the tooling around performance. The full source code with three different algorithms can be found on GitHub.

View Tutorial: Make Your Go Programs Lightning Fast With Profiling

Create the Perfect Carousel, Part 1

Carousels are a staple of streaming and e-commerce sites. Both Amazon and Netflix use them as prominent navigation tools. In this tutorial, we’ll evaluate the interaction design of both, and use our findings to implement the perfect carousel.

In this tutorial series, we’ll also be learning some functions of Popmotion, a JavaScript motion engine. It offers animation tools like tweens (useful for pagination), pointer tracking (for scrolling), and spring physics (for our delightful finishing touches.)

Part 1 will evaluate how Amazon and Netflix have implemented scrolling. We’ll then implement a carousel that can be scrolled via touch.

By the end of this series, we’ll have implemented wheel and touchpad scroll, pagination, progress bars, keyboard navigation, and some little touches using spring physics. We’ll also have been exposed to some basic functional composition.

Perfect?

What does it take for a carousel to be “perfect”? It has to be accessible by:

  • Mouse: It should offer previous and next buttons that are easy to click and don’t obscure content.
  • Touch: It should track the finger, and then scroll with the same momentum as when the finger lifts from the screen.
  • Scroll wheel: Often overlooked, the Apple Magic Mouse and many laptop trackpads offer smooth horizontal scrolling. We should utilise those capabilities!
  • Keyboard: Many users prefer not to, or are unable to use a mouse for navigation. It’s important we make our carousel accessible so those users can use our product too.

Finally, we’ll take things that extra step further and make this a confident, delightful piece of UX by making the carousel respond clearly and viscerally with spring physics when the slider has reached the end.

Setup

First, let’s get the HTML and CSS necessary to build a rudimentary carousel by forking this CodePen

The Pen is set up with Sass for preprocessing CSS and Babel for transpiling ES6 JavaScript. I’ve also included Popmotion, which can be accessed with window.popmotion.

You can copy the code to a local project if you prefer, but you’ll need to ensure your environment supports Sass and ES6. You’ll also need to install Popmotion with npm install popmotion.

Creating a New Carousel

On any given page, we might have many carousels. So we need a method to encapsulate the state and functionality of each.

I’m going to use a factory function rather than a class. Factory functions avoid the need to use the often-confusing this keyword and will simplify the code for the purposes of this tutorial.

In your JavaScript editor, add this simple function:

function carousel(container) {
}

carousel(document.querySelector('.container'));

We’ll be adding our carousel-specific code inside this carousel function.

The Hows and Whys of Scrolling

Our first task is to make the carousel scroll. There are two ways we could go about this:

Native Browser Scrolling

The obvious solution would be to set overflow-x: scroll on the slider. This would allow native scrolling on all browsers, including touch and horizontal mouse wheel devices.

There are, however, drawbacks to this approach:

  • Content outside the container would not be visible, which can be restrictive for our design.
  • It also limits the ways we can use animations to indicate we’ve reached the end.
  • Desktop browsers will have an ugly (though accessible!) horizontal scroll bar.

Alternatively:

Animate translateX

We could also animate the carousel’s translateX property. This would be very versatile as we’d be able to implement exactly the design we like. translateX is also very performant, as unlike the CSS left property it can be handled by the device’s GPU.

On the downside, we’d have to reimplement scrolling functionality using JavaScript. That’s more work, more code.

How Do Amazon and Netflix Approach Scrolling?

Both Amazon and Netflix carousels make different trade-offs in approaching this problem.

Amazon animates the carousel’s left property when in “desktop” mode. Animating left is an incredibly poor choice, as changing it triggers a layout recalculation. This is CPU-intensive, and older machines will struggle to hit 60fps.

Whoever made the decision to animate left instead of translateX must be a real idiot (spoiler: it was me, back in 2012. We weren’t as enlightened in those days.)

When it detects a touch device, the carousel uses the browser’s native scrolling. The problem with only enabling this in “mobile” mode is desktop users with horizontal scroll wheels miss out. It also means any content outside the carousel will have to be visually cut off:

Screenshot of Amazon illustrating lack of design bleed

Netflix correctly animates the carousel’s translateX property, and it does so on all devices. This enables them to have a design that bleeds outside the carousel:

Screenshot of Netflix carousel illustrating design bleed

This, in turn, allows them to make a fancy design where items are enlarged outside of the x and y edges of the carousel and the surrounding items move out of their way:

Screenshot of Netflix carousel illustrating enlarged item

Unfortunately, Netflix’s reimplementation of scrolling for touch devices is unsatisfactory: it uses a gesture-based pagination system which feels slow and cumbersome. There’s also no consideration for horizontal scroll wheels.

We can do better. Let’s code!

Scrolling Like a Pro

Our first move is to grab the .slider node. While we’re at it, let’s grab the items it contains so we can figure out the slider’s dimension.

function carousel(container) {
  const slider = container.querySelector('.slider');
  const items = slider.querySelectorAll('.item');
}

Measuring the Carousel

We can figure out the visible area of the slider by measuring its width:

const sliderVisibleWidth = slider.offsetWidth;

We’ll also want the total width of all the items contained within. To keep our carousel function relatively clean, let’s put this calculation in a separate function at the top of our file.

By using getBoundingClientRect to measure the left offset of our first item and the right offset of our last item, we can use the difference between them to find the total width of all items.

function getTotalItemsWidth(items) {
  const { left } = items[0].getBoundingClientRect();
  const { right } = items[items.length - 1].getBoundingClientRect();
  return right - left;
}

After our sliderVisibleWidth measurement, write:

const totalItemsWidth = getTotalItemsWidth(items);

We can now figure out the maximum distance our carousel should be allowed to scroll. It’s the total width of all our items, minus one full width of our visible slider. This provides a number that allows the rightmost item to align with the right of our slider:

const maxXOffset = 0;
const minXOffset = - (totalItemsWidth - sliderVisibleWidth);

With these measurements in place, we’re ready to start scrolling our carousel.

Setting translateX

Popmotion comes with a CSS renderer for the simple and performant setting of CSS properties. It also comes with a value function which can be used to track numbers and, importantly (as we’ll soon see), to query their velocity.

At the top of your JavaScript file, import them like so:

const { css, value } = window.popmotion;

Then, on the line after we set minXOffset, create a CSS renderer for our slider:

const sliderRenderer = css(slider);

And create a value to track our slider’s x offset and update the slider’s translateX property when it changes:

const sliderX = value(0, (x) => sliderRenderer.set('x', x));

Now, moving the slider horizontally is as simple as writing:

sliderX.set(-100);

Try it!

Touch Scroll

We want our carousel to start scrolling when a user drags the slider horizontally and to stop scrolling when a user stops touching the screen. Our event handlers will look like this:

let action;

function stopTouchScroll() {
  document.removeEventListener('touchend', stopTouchScroll);
}

function startTouchScroll(e) {
  document.addEventListener('touchend', stopTouchScroll);
}

slider.addEventListener('touchstart', startTouchScroll, { passive: false });

In our startTouchScroll function, we want to:

  • Stop any other actions powering sliderX.
  • Find the origin touch point.
  • Listen to the next touchmove event to see if the user is dragging vertically or horizontally.

After document.addEventListener, add:

if (action) action.stop();

This will stop any other actions (like the physics-powered momentum scroll that we’ll implement in stopTouchScroll) from moving the slider. This will allow the user to immediately “catch” the slider if it scrolls past an item or title that they want to click on.

Next, we need to store the origin touch point. That will allow us to see where the user moves their finger next. If it’s a vertical movement, we’ll allow the scrolling of the page as usual. If it’s a horizontal movement, we’ll scroll the slider instead.

We want to share this touchOrigin between event handlers. So after let action; add:

let touchOrigin = {};

Back in our startTouchScroll handler, add:

const touch = e.touches[0];
touchOrigin = {
  x: touch.pageX,
  y: touch.pageY
};

We can now add a touchmove event listener to the document to determine the drag direction based on this touchOrigin:

document.addEventListener('touchmove', determineDragDirection);

Our determineDragDirection function is going to measure the next touch location, check it has actually moved and, if so, measure the angle to determine whether it’s vertical or horizontal:

function determineDragDirection(e) {
  const touch = e.changedTouches[0];
  const touchLocation = {
    x: touch.pageX,
    y: touch.pageY
  };
}

Popmotion includes some helpful calculators for measuring things like the distance between two x/y coordinates. We can import those like this:

const { calc, css, value } = window.popmotion;

Then measuring the distance between the two points is a matter of using the distance calculator:

const distance = calc.distance(touchOrigin, touchLocation);

Now if the touch has moved, we can unset this event listener.

if (!distance) return;
document.removeEventListener('touchmove', determineDragDirection);

Measure the angle between the two points with the angle calculator:

const angle = calc.angle(touchOrigin, touchLocation);

We can use this to determine whether this angle is a horizontal or vertical angle, by passing it to the following function. Add this function to the very top of our file:

function angleIsVertical(angle) {
  const isUp = (
    angle <= -90 + 45 &&
    angle >= -90 - 45
  );
  const isDown = (
    angle <= 90 + 45 &&
    angle >= 90 - 45
  );

  return (isUp || isDown);
}

This function returns true if the provided angle is within -90 +/- 45 degrees (straight up) or 90 +/-45 degrees (straight down.) So we can add another return clause if this function returns true.

if (angleIsVertical(angle)) return;

Pointer Tracking

Now we know the user is trying to scroll the carousel, we can begin tracking their finger. Popmotion offers a pointer action that will output the x/y coordinates of a mouse or touch pointer.

First, import pointer:

const { calc, css, pointer, value } = window.popmotion;

To track the touch input, provide the originating event to pointer:

action = pointer(e).start();

We want to measure the initial x position of our pointer and apply any movement to the slider. For that, we can use a transformer called applyOffset.

Transformers are pure functions that take a value, and return it—yes—transformed. For instance: const double = (v) => v * 2.

const { calc, css, pointer, transform, value } = window.popmotion;
const { applyOffset } = transform;

applyOffset is a curried function. This means that when we call it, it creates a new function that can then be passed a value. We first call it with a number we want to measure the offset from, in this case the current value of action.x, and a number to apply that offset to. In this case, that’s our sliderX.

So our applyOffset function will look like this:

const applyPointerMovement = applyOffset(action.x.get(), sliderX.get());

We can now use this function in the pointer’s output callback to apply pointer movement to the slider.

action.output(({ x }) => slider.set(applyPointerMovement(x)));

Stopping, With Style

The carousel is now draggable by touch! You can test this by using device emulation in Chrome’s Developer Tools.

It feels a little janky, right? You may have encountered scrolling that feels like this before: You lift your finger, and the scrolling stops dead. Or the scrolling stops dead and then a little animation takes over to fake a continuation of the scrolling.

We’re not going to do that. We can use the physics action in Popmotion to take the true velocity of sliderX and apply friction to it over a duration of time.

First, add it to our ever-growing list of imports:

const { calc, css, physics, pointer, value } = window.popmotion;

Then, at the end of our stopTouchScroll function, add:

if (action) action.stop();

action = physics({
  from: sliderX.get(),
  velocity: sliderX.getVelocity(),
  friction: 0.2
})
  .output((v) => sliderX.set(v))
  .start();

Here, from and velocity are being set with the current value and velocity of sliderX. This ensures our physics simulation has the same initial starting conditions as the user’s dragging motion.

friction is being set as 0.2. Friction is set as a value from 0 to 1, with 0 being no friction at all and 1 being absolute friction. Try playing around with this value to see the change it makes to the “feeling” of the carousel when a user stops dragging.

Smaller numbers will make it feel lighter, and larger numbers will make movement heavier. For a scrolling motion, I feel 0.2 hits a nice balance between erratic and sluggish.

Boundaries

But there’s a problem! If you’ve been playing around with your new touch carousel, it’s obvious. We haven’t bounded movement, making it possible to literally throw your carousel away!

There’s another transformer for this job, clamp. This is also a curried function, meaning if we call it with a min and max value, say 0 and 1, it will return a new function. In this example, the new function will restrict any number given to it to between 0 and 1:

clamp(0, 1)(5); // returns 1

First, import clamp:

const { applyOffset, clamp } = transform;

We want to use this clamping function across our carousel, so add this line after we define minXOffset:

const clampXOffset = clamp(minXOffset, maxXOffset);

We’re going to amend the two output we’ve set on our actions using some light functional composition with the pipe transformer.

Pipe

When we call a function, we write it like this:

foo(0);

If we want to give the output of that function to another function, we might write that like this:

bar(foo(0));

This becomes slightly difficult to read, and it only gets worse as we add more and more functions.

With pipe, we can compose a new function out of foo and bar which we can reuse:

const foobar = pipe(foo, bar);
foobar(0);

It’s also written in a natural start -> finish order, which makes it easier to follow. We can use this to compose applyOffset and clamp into a single function. Import pipe:

const { applyOffset, clamp, pipe } = transform;

Replace the output callback of our pointer with:

pipe(
  ({ x }) => x,
  applyOffset(action.x.get(), sliderX.get()),
  clampXOffset,
  (v) => sliderX.set(v)
)

And replace the output callback of physics with:

pipe(clampXOffset, (v) => sliderX.set(v))

This kind of functional composition can quite neatly create descriptive, step-by-step processes out of smaller, reusable functions.

Now, when you drag and throw the carousel, it won’t budge outside of its boundaries.

The abrupt stop isn’t very satisfying. But that’s a problem for a later part!

Conclusion

That’s all for part 1. So far, we’ve taken a look at existing carousels to see the strengths and weaknesses of different approaches to scrolling. We’ve used Popmotion’s input tracking and physics to performantly animate our carousel’s translateX with touch scrolling. We’ve also been introduced to functional composition and curried functions.

You can grab a commented version of the “story so far” on this CodePen.

In upcoming installments, we’ll look at:

  • scrolling with a mouse wheel
  • remeasuring the carousel when the window resizes
  • pagination, with keyboard and mouse accessibility
  • delightful touches, with the help of spring physics

Look forward to seeing you there!

View Tutorial: Create the Perfect Carousel, Part 1

Secure Coding With Concurrency in Swift 4

In my previous article about secure coding in Swift, I discussed basic security vulnerabilities in Swift
such as injection attacks. While injection attacks are common, there are other ways your app can be compromised. A common but sometimes-overlooked kind of vulnerability is race conditions. 

Swift 4
introduces Exclusive Access to Memory, which consists of a set of
rules to prevent the same area of memory being accessed at the same time.
For example, the inout argument in Swift tells a method that it can
change the value of the parameter inside the method.

func changeMe(_ x : inout MyObject, andChange y : inout MyObject)

But what happens if we pass in the same variable to change at the same time?

changeMe(&myObject, andChange:&myObject) // ???

Swift 4
has made improvements that prevent this from compiling. But while Swift can find these obvious scenarios at compile
time, it is difficult, especially for performance reasons, to find
memory access problems in concurrent code, and most of
the security vulnerabilities exist in the form of race conditions.

Race Conditions

As soon as you have more than one thread that needs to write to the same data at the same time, a race condition can occur. Race conditions cause data corruption. For these types of attacks, the vulnerabilities are usually more subtle—and the exploits more creative. For instance, there might be the ability to alter a shared resource to change the flow of security code happening on another thread, or in the case of authentication status, an attacker might be able to take advantage of a time gap between the time of check and the time of use of a flag.

The way to avoid race conditions is to synchronize the data. Synchronizing data usually means to “lock” it so that only one thread can access that part of the code at a time (said to be a mutex—for mutual exclusion). While you can do this explicitly using the NSLock class, there is potential to miss places where the code should have been synchronized. Keeping track of the locks and whether they are already locked or not can be difficult.

Grand Central Dispatch

Instead of using primitive locks, you can use Grand Central Dispatch (GCD)—Apple’s modern concurrency API designed for performance and security. You don’t need to think about the locks yourself; it does the work for you behind the scenes. 

DispatchQueue.global(qos: .background).async  //concurrent queue, shared by system
{
    //do long running work in the background here
    //...
    
    DispatchQueue.main.async //serial queue
    {
        //Update the UI - show the results back on the main thread
    }
}

As you can see, it’s quite a simple API, so use GCD as your first choice when designing your app for concurrency.

Swift’s runtime security checks cannot be performed across GCD threads because it creates a significant performance hit. The solution is to use the Thread Sanitizer tool if you are working with multiple threads. The Thread Sanitizer tool is great at finding problems you might never find by looking at the code yourself. It can be enabled by going to Product > Scheme > Edit Scheme > Diagnostics, and checking the Thread Sanitizer option.

If the design of your app makes you work with multiple threads, another way to protect yourself from the security issues of concurrency is to try to design your classes to be lock free so that no synchronization code is necessary in the first place. This requires some real thought about the design of your interface, and can even be considered a separate art in and of itself!

The Main Thread Checker

It is important to mention that data corruption can also occur if you do UI updates on any thread other than the main thread (any other thread is referred to as a background thread). 

Sometimes it’s not even obvious you are on a background thread. For example, NSURLSession‘s delegateQueue, when set to nil, will by default call back on a background thread. If you do UI updates or write to your data in that block, there is a good chance for race conditions. (Fix this by wrapping the UI updates in DispatchQueue.main.async {} or pass in OperationQueue.main as the delegate queue.) 

New in Xcode 9 and enabled by default is the Main Thread Checker (Product > Scheme > Edit Scheme > Diagnostics > Runtime API Checking > Main Thread Checker). If your code is not synchronized, issues will show up in the Runtime Issues on the left pane navigator of Xcode, so pay attention to it while testing your app. 

To code for security, any callbacks or completion handlers that you write should be documented whether they return on the main thread or not. Better yet, follow Apple’s newer API design which lets you pass a completionQueue in the method so you can clearly decide and see what thread the completion block returns on.

A Real-World Example

Enough talk! Let’s dive into an example.

class Transaction
{
    //...
}

class Transactions
{
    private var lastTransaction : Transaction?
    
    func addTransaction(_ source : Transaction)
    {
        //...
        lastTransaction = source
    }
}

//First thread
transactions.addTransaction(transaction)
        
//Second thread
transactions.addTransaction(transaction)

Here we have no synchronization, but more than one thread accesses the data at the same time. The good thing about Thread Sanitizer is that it will detect a case like this. The modern GCD way to fix this is to associate your data with a serial dispatch queue.

class Transactions
{
    private var lastTransaction : Transaction?
    private var queue = DispatchQueue(label: "com.myCompany.myApp.bankQueue")
    
    func addTransaction(_ source : Transaction)
    {
        queue.async
        {
            //...
            self.lastTransaction = source
        }
    }
}

Now the code is synchronized with the .async block. You might be wondering when to choose .async and when to use .sync. You can use .async when your app doesn’t need to wait until the operation inside the block is finished. It might be better explained with an example.

let queue = DispatchQueue(label: "com.myCompany.myApp.bankQueue")
var transactionIDs : [String] = ["00001", "00002"]
        
//First thread
queue.async
{
    transactionIDs.append("00003")
}
//not providing any output so don't need to wait for it to finish
        
//Another thread
queue.sync
{
    if transactionIDs.contains("00001") //...Need to wait here!
    {
        print("Transaction already completed")
    }
}

In this example, the thread that asks the transaction array if it contains a specific transaction provides output, so it needs to wait. The other thread doesn’t take any action after appending to the transaction array, so it doesn’t need to wait until the block is completed.

These sync and async blocks can be wrapped in methods that return your internal data, such as getter methods.

get
{
    return queue.sync { transactionID }
}

Scattering GCD blocks all over the areas of your code that access shared data is not a good practice as it is harder to keep track of all the places that need to be synchronized. It’s much better to try and keep all this functionality in one place. 

Good design using accessor methods is one way to solve this problem. Using getter and setter methods and only using these methods to access the data means that you can synchronize in one place. This avoids having to update many parts of your code if you are changing or refactoring the GCD area of your code.

Structs

While single stored properties can be synchronized in a class, changing properties on a struct will actually affect the entire struct. Swift 4 now includes protection for methods that mutate the structs. 

Let’s first look at what a struct corruption (called a “Swift access race”) looks like.

struct Transaction
{
    private var id : UInt32
    private var timestamp : Double
    //...
            
    mutating func begin()
    {
        id = arc4random_uniform(101) // 0 - 100
        //...
    }
            
    mutating func finish()
    {
        //...
        timestamp = NSDate().timeIntervalSince1970
    }
}

The two methods in the example change the stored properties, so they are marked mutating. Lets say thread 1 calls begin() and thread 2 calls finish(). Even if begin() only changes id and finish() only changes timestamp, it’s still an access race. While normally it’s better to lock inside accessor methods, this doesn’t apply to structs as the entire struct needs to be exclusive. 

One solution is to change the struct to a class when implementing your concurrent code. If you needed the struct for some reason, you could, in this example, create a Bank class which stores Transaction structs. Then the callers of the structs inside the class can be synchronized. 

Here is an example:

class Bank
{
    private var currentTransaction : Transaction?
    private var queue : DispatchQueue = DispatchQueue(label: "com.myCompany.myApp.bankQueue")
    func doTransaction()
    {
        queue.sync
        {
                currentTransaction?.begin()
                //...
        }
    }
}

Access Control

It would be pointless to have all this protection when your interface exposes a mutating object or an UnsafeMutablePointer to the shared data, because now any user of your class can do whatever they want with the data without the protection of GCD. Instead, return copies to the data in the getter. Careful interface design and data encapsulation are important, especially when designing concurrent programs, to make sure that the shared data is really protected.

Make
sure the synchronized variables are marked
private, as opposed to open or public, which would allow members
from any source file to access it. One
interesting change in Swift 4 is that the
private access level scope is expanded to
be available in extensions.
Previously it could only be
used within the enclosing declaration, but in Swift 4, a private variable can be
accessed in an extension,
as long as the extension
of that declaration is in the same source file.

Not only are variables at risk for data corruption but files as well. Use the FileManager Foundation class, which is thread-safe, and check the result flags of its file operations before continuing in your code.

Interfacing With Objective-C

Many Objective-C objects have a mutable counterpart depicted by their
title. NSString‘s mutable version is named NSMutableString, NSArray‘s is
NSMutableArray, and so on. Besides the fact that
these objects can be mutated outside of synchronization, pointer
types coming from Objective-C also subvert Swift optionals. There is
a good chance that you could be expecting an object in Swift, but from
Objective-C it is returned as nil. 

If the app crashes, it gives valuable insight into the internal logic. In this case, it could be that user input was not properly checked and that area of the app flow is worth looking at to try and exploit.

The
solution here is to update your Objective-C code to include
nullability annotations. We can take a slight diversion here as this advice applies to safe interoperability in general, whether between Swift and Objective-C or between two other programming languages. 

Preface your Objective-C
variables with nullable when nil
can be returned, and nonnull when it shouldn’t.

- (nonnull NSString *)myStringFromString:(nullable NSString *)string;

You can also add nullable
and nonnull to the attribute list of Objective-C properties.

@property (nullable, atomic, strong) NSDate *date;

The
Static Analyzer tool in Xcode has always been great for finding
Objective-C bugs. Now with nullability annotations, in Xcode 9 you can use the Static Analyzer on your
Objective-C code
and it will find nullability
inconsistencies in your file. Do this by navigating to
Product > Perform Action > Analyze.

While it’s enabled by default, you can also control the nullability checks in
LLVM with -Wnullability* flags.

Nullability
checks are good for finding issues at compile time, but they don’t
find runtime issues. For example, sometimes we assume in a part of
our code that an optional value will always exist and use the force
unwrap ! on it. This is an implicitly unwrapped optional, but there is really no guarantee that it will always exist. After all, if it
were marked optional, it’s likely to be nil at some point. Therefore,
it’s a good idea to avoid force unwrapping with !. Instead, an elegant
solution is to check at runtime like so:

guard let dog = animal.dog() else
{
    //handle this case
    return
}
//continue...

To further help you out, there
is a new feature added in Xcode 9 to perform nullability checks at runtime.
It is part of the Undefined Behavior Sanitizer, and while it’s not enabled
by default, you can enable it by going to Build Settings >
Undefined Behavior Sanitizer
and setting Yes for Enable Nullability
Annotation Checks
.

Readability

It’s good practice to write your methods with only one entry and one exit point. Not only is this good for readability, but also for advanced multithreading support. 

Let’s say a class was designed without concurrency in mind. Later the requirements changed so that it must now support the .lock() and .unlock() methods of NSLock. When it comes time to place locks around parts of your code, you may need to rewrite a lot of your methods just to be thread-safe. It’s easy to miss a return hidden in the middle of a method that was later supposed to lock your NSLock instance, which can then cause a race condition. Also, statements such as return will not automatically unlock the lock. Another part of your code that assumes the lock is unlocked and tries to lock again will deadlock the app (the app will freeze and eventually be terminated by the system). Crashes can also be security vulnerabilities in multithreaded code if temporary work files are never cleaned up before the thread terminates. If your code has this structure:

if x
    if y
		return true
	else
		return false
...
return false

You can instead store the Boolean, update it along the way and then return it at the end of the method. Then synchronization code can easily be wrapped in the method without much work.

var success = false
// <--- lock
if x
    if y
		success = true
...
// < --- unlock
return success

The .unlock() method must be called from the same thread that called .lock(),  otherwise it results in
undefined behavior.

Testing

Often, finding and fixing vulnerabilities in concurrent code comes down to
bug hunting. When you find a bug, it’s like holding a mirror up to
yourself—a great learning opportunity. If you
forgot to synchronize in one place, it’s likely that the same mistake
is elsewhere in the code. Taking the time to check the rest of your
code for the same mistake when you encounter a bug is a very
efficient way of preventing security vulnerabilities that would keep
appearing over and over again in future app releases. 

In fact, many of
the recent iOS jailbreaks have been because of repeated coding
mistakes found in Apple’s IOKit. Once you know the developer’s style, you can check other parts of the code for similar bugs.

Bug finding is good motivation for code
reuse. Knowing that you fixed a problem in one place and don’t have to go
find all the same occurrences in copy/paste code can be a big relief.

Race
conditions can be complicated to find during testing because memory might have to be
corrupted in just the “right way” in order to see the problem, and sometimes the problems appear a long time later in the app’s execution. 

When you are testing,
cover all your code. Go through each flow and case and test each line
of code at least once. Sometimes it helps to input random data (fuzzing the inputs), or choose extreme values in hopes of finding an edge case that would not be
obvious from looking at the code or using the app in a normal way. This, along with the new Xcode tools available, can go a long way towards preventing
security vulnerabilities. While no code is 100% secure, following
a routine, such as early-on functional tests, unit tests, system
test, stress and regression tests, will really pay off.

Beyond debugging your app, one thing that is different for the release configuration (the
configuration for apps
published on the store) is that code optimizations are included. For
example, what the compiler thinks is an unused operation can get optimized out, or a variable may not stick
around longer than necessary in a concurrent block. For your published
app, your code is actually changed, or different from the one that you
tested. This means that bugs can be
introduced that only exist once you release your app. 

If you are not
using a test configuration, make sure you test your app on release mode
by
navigating to Product > Scheme > Edit Scheme. Select Run from
the list on the left, and in the Info pane on the right, change Build
Configuration
to Release. While it’s good to cover your entire app in
this mode, know that because of optimizations, the breakpoints and
the debugger will not behave as expected. For example,
variable descriptions might not be available even though the code is
executing correctly.

Conclusion

In this post, we looked at race conditions and how to avoid them by coding securely and using tools like the Thread Sanitizer. We also talked about Exclusive
Access to Memory, which is a great addition to Swift 4. Make sure it’s set
to Full Enforcement in Build Settings > Exclusive
Access to Memory

Remember that these enforcements are only on for debug
mode, and if you are still using Swift 3.2, many of the
enforcements discussed come in the form of warnings only. So take the warnings seriously, or
better yet, make use of all the new features available by adopting Swift 4 today!

And while you’re here, check out some of my other posts on secure coding for iOS and Swift!

View Tutorial: Secure Coding With Concurrency in Swift 4

How to Manage Multiple Applications in CodeIgniter

Today, we’re going to explore how you can manage multiple applications in the CodeIgniter web framework using a single codebase. In the course of that, we’ll go ahead and create two different CodeIgniter applications that will share the core CodeIgniter codebase.

Sharing the core codebase across different applications is not something new as it’s already practiced by different frameworks and open-source systems, and CodeIgniter is no different. It easily allows you to manage multiple applications that share the core CodeIgniter library and API files, and at the same time you could use different databases and site-specific configurations.

To start with, we’ll go through the benefits of the multisite setup, and as we move on we’ll go through a practical demonstration of what it takes to set up multiple applications in the CodeIgniter framework.

Benefits of the Multisite Setup

In this section, we’ll highlight a couple of benefits of having a multisite setup.

One of the most obvious benefits that I could straightaway point out is that the multisite setup shares a common codebase, and that should make the upgrade and maintenance processes of your application much easier.

For example, let’s imagine that you have ten different CodeIgniter applications running under your belt. And you just came to know that a new version of the CodeIgniter framework is available for upgrade and you would like to upgrade it as soon as possible to make sure that the code remains secure and stable.

If you had a separate codebase for each of your applications, it would definitely be a tedious process to go through each and every site and upgrade it in turn. With the multisite setup, you just need to do it once as the core codebase is shared across all the sites!

Next, it allows you use a different database for each application even though they share a common codebase. In fact, it’s one of the most popular use cases of setting up multisite!

Apart from using a different database for each application, you could create a setup that uses the same database but a different theme or layout in the front-end.

If you are still using the FTP-based approach to move your site files across the different servers, I would say you’re going to love the multisite approach as it minimizes your work to a great extent!

How to Create Multiple Applications

In this section, we’ll set up the basic directory structure in order to implement a multisite setup.

At the root of your CodeIgniter application, create an applications directory. This is the main directory that will hold our different applications.

Next, go ahead and create two new directories—applications/app_one and applications/app_two. Of course, you could name it the way you want it to be, but I’ll keep things simple for now.

So, as you can see, we’re going to set up two different applications that will use the single codebase of the CodeIgniter framework. Although the multisite setup will reuse most of the CodeIgniter framework files, we still need to duplicate a couple of files and directories to each and every application we create.

Let me quickly list the files and directories that you should copy from the default application in the first place.

Copy the following directories from the default application directory to applications/app_one and applications/app_two:

  • cache
  • config
  • logs

As you can see, it’s obvious to have separate directories for cache and logs for each application. And the config directory is a must have for the working of your CodeIgniter application, so we are going to copy it anyway.

Next, let’s copy a couple of files along with the necessary directories that allow us to test our multisite application.

Copy the following files to our app_one and app_two applications from the default CodeIgniter application:

  • controllers/welcome.php
  • views/errors
  • views/welcome_message.php

For your quick reference, the controllers/welcome.php file should look like:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller { 

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *         http://example.com/index.php/welcome
     *    - or -
     *         http://example.com/index.php/welcome/index
     *    - or -
     * Since this controller is set as the default controller in
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see https://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        $this->load->view('welcome_message');
    }
}

And the views/welcome_message.php file should look like.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

    ::selection { background-color: #E13300; color: white; }
    ::-moz-selection { background-color: #E13300; color: white; }

    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
    }

    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
    }

    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
    }

    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
    }

    #body {
        margin: 0 15px 0 15px;
    }

    p.footer {
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;
    }

    #container {
        margin: 10px;
        border: 1px solid #D0D0D0;
        box-shadow: 0 0 8px #D0D0D0;
    }
    </style>
</head>
<body>

<div id="container">
    <h1>Welcome to CodeIgniter! You're browsing Application One!</h1>

    <div id="body">
        <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

        <p>If you would like to edit this page you'll find it located at:</p>
        <code>application/views/welcome_message.php</code>

        <p>The corresponding controller for this page is found at:</p>
        <code>application/controllers/Welcome.php</code>

        <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>

Of course, you should change the following message in the view file so that we could differentiate the application during the testing.

For applications/app_one/views/welcome_message.php, it should look like:

<h1>Welcome to CodeIgniter! You're browsing Application One!</h1>

And for applications/app_two/views/welcome_message.php, it should look like:

<h1>Welcome to CodeIgniter! You're browsing Application Two!</h1>

Now, we have everything done as far as our multisite setup is concerned. However, it won’t work out of the box yet as we still need to inform CodeIgniter about our multisite setup since it always loads the default application located in the application directory.

Finishing Touches

Let’s have a quick look at the setting that configures the default application directory. Go ahead and open the index.php file at the root of your application and look for the following code snippet.

/*
 *---------------------------------------------------------------
 * APPLICATION DIRECTORY NAME
 *---------------------------------------------------------------
 *
 * If you want this front controller to use a different "application"
 * directory than the default one you can set its name here. The directory
 * can also be renamed or relocated anywhere on your server. If you do,
 * use an absolute (full) server path.
 * For more info please see the user guide:
 *
 * https://codeigniter.com/user_guide/general/managing_apps.html
 *
 * NO TRAILING SLASH!
 */
$application_folder = 'application';

It’s pretty clear from the above snippet that it allows you to set the path of your default application. So this is the place where we can make changes so that it picks up the default application from a directory other than the default one.

Of course, you could go ahead and straight away do something like this, and that should run the app_one application.

$application_folder = 'applications/app_one';

On the other hand, what would you do if you want to run app_two? As a quickie, you could copy the index.php file to index_app_one.php and index_app_two.php for each application. In your virtual host, make sure that you make the changes accordingly.

On the other hand, I prefer a slightly different approach, and I would like to rely on the ENV variable to choose between the different applications at run time.

For example, you can set up the custom ENV variable in NGINX as shown in the following snippet.

// set the env variable CI_DEFAULT_APP in the "location" directive of vhost
fastcgi_param  CI_DEFAULT_APP  applications/app_one;

If you’re using the Apache web server, the same could be achieved with:

SetEnv CI_DEFAULT_APP applications/app_one

Next, let’s revise the code in the index.php file that takes advantage of the ENV variable to decide the default application to run.

...
...
$application_folder = (isset($_SERVER['CI_DEFAULT_APP']) ? $_SERVER['CI_DEFAULT_APP'] : 'application');
...
...

So, as you can see, we check the existence of the CI_DEFAULT_APP ENV variable in the first place, and if it’s not available then we’ll fall back to the default application.

More often than not, you want to run your different applications on different domains. Ideally, I would like to use two different virtual hosts for each application. A quick example of each virtual host should look something like this in the context of NGINX.

The www.ci-app-one.com domain points to app_one:

server {
  listen {YOUR_IP}:80;
  server_name  www.ci-app-one.com;
  root   /var/www/html;
  index index.html index.php;

  location ~* \.(jpg|jpeg|gif|css|png|js|ico|html)$ {
    access_log off;
    expires max;
  }

  location / {
     # Check if a file or directory index file exists, else route it to index.php.
     try_files $uri $uri/ /index.php;
  }

  location ~ \.php$ {
    root   /var/www/html;
    fastcgi_split_path_info ^(.+\.php)(.*)$;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  /var/www/html$fastcgi_script_name;
    fastcgi_param  CI_DEFAULT_APP  applications/app_one;
    include fastcgi_params;
  }
}

Similarly, the www.ci-app-two.com domain points to app_two:

server {
  listen {YOUR_IP}:80;
  server_name  www.ci-app-two.com;
  root   /var/www/html;
  index index.html index.php;

  location ~* \.(jpg|jpeg|gif|css|png|js|ico|html)$ {
    access_log off;
    expires max;
  }

  location / {
     # Check if a file or directory index file exists, else route it to index.php.
     try_files $uri $uri/ /index.php;
  }

  location ~ \.php$ {
    root   /var/www/html;
    fastcgi_split_path_info ^(.+\.php)(.*)$;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  /var/www/html$fastcgi_script_name;
    fastcgi_param  CI_DEFAULT_APP  applications/app_two;
    include fastcgi_params;
  }
}

Of course, you could go ahead now and test your changes to see if it really works or not! Don’t hesitate to shoot me any queries if you face any issues.

And that was the pretty simple way in which you can set up multiple applications in the CodeIgniter framework using a single codebase.

Conclusion

Today, we went through an interesting aspect of the CodeIgniter framework that allows you to manage multiple applications using a single codebase. The obvious benefits of that are easy upgrading and maintenance of your existing codebase.

CodeIgniter is a powerful PHP platform. Whether or not you’re just getting started or you’re starting with the next version, don’t forget to check out what we have available for you, as well.

Share your thoughts if you’ve already implemented something similar or you would have approached it in a slightly different way. Either way, I would love to hear your thoughts!

View Tutorial: How to Manage Multiple Applications in CodeIgniter

New Course: Introduction to Figma

Have you heard about Figma? It’s a powerful interface design tool that it runs in the browser and includes some awesome collaboration features.

In our new course, Introduction to Figma, you’ll learn the basics of working with Figma, from both a designer’s and a developer’s point of view. Adi Purdila will teach you about designing, prototyping, collaborating, exporting, and more.

Designing in Figma

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

 
View Tutorial: New Course: Introduction to Figma