Master Geolocation for Free with IP Geolocation API

Understanding where your users are, can mean the difference between making a sale, attracting a new member, getting a push on social media, building a solid user experience, or bombing completely.

Because where a person is, affects their schedule, their culture, their currency, their whole outlook on the world.

Sure, you might not be able to translate your entire site into their preferred language—who knows, maybe you can—but if they don’t speak the same language as you, you can at least acknowledge it. And okay, perhaps you can only accept payments in US dollars, but wouldn’t it be nice to let them know approximately how much you’re charging in Yen, or Dongs, or Euros. How about shipping costs, do you ship to Africa? And then there’s GDPR, wouldn’t it be great to be legally compliant in the EU without having to be compliant globally? You can even use an IP address’ longitude and latitude to identify the nearest real world store, if your company has more than one location.

You can do all of this and much much more with geolocation. Geolocation ties the web to the real world by taking an IP address, finding it in a huge database that identifies IP address locations, and then returning key details like country, currency, and continent.

The downside with geolocation is that it’s often expensive to implement, charging for the number of queries submitted to the database, making it beyond the budget of many small businesses.

The IP Geolocation API is different. Cutting down on the number of features, and the amount of data returned, means that you can get the same accurate location data, in a simple to use package, for free.

The Geolocation API returns data as a JSON object, and includes tons of information you can use to tailor your site.

Getting Started with IP Geolocation API

You can connect to the IP Geolocation API in any number of coding languages, the most common is JavaScript. However, because we want to customize the contents of the page, we don’t want to rely on a front-end technology. Instead we’re going to write the page before it gets to the user, with PHP.

The first thing you want to do is create a new file, name it “country.php” and save it to your dev environment, or open up your ftp client and upload it to a PHP enabled web space. Next we can edit the file’s code.

Open the PHP file:

<?php

Then we need to create a function to grab the location of the IP address we supply:

function grabIpInfo($ip)
{
}

Don’t worry if you’re not used to writing functions in PHP, all will become clear. (In simple terms, when we repeat that function’s name, passing an IP address to it, the code inside the brackets will run.)

Inside those brackets, we’re going to use PHP’s built-in cURL to get the data from the API:

$curl = curl_init();

This code initiates the cURL session. Next we need to set the options on the cURL session. The first is very important, it’s the URL to load, which will be https://api.ipgeolocationapi.com/geolocate/ and on the end we have to append the actual IP address we want to look up (remember we’re passing this into the function, so we just need to use the $ip parameter):

curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);

The next option tells cURL to return the data as a string, rather than just outputting it to the page:

curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);

Next we execute the cURL session, saving the data to a new variable that we can return from the function:

$returnData = curl_exec($curl);

Now we close the cURL session:

curl_close($curl);

Lastly we return the data from the function:

return $returnData;

Remember all of that code was inside the curly brackets of the function. Now, we can call the function as often as we like and access the data, from outside the function:

$ipInfo = grabIpInfo("91.213.103.0");

Our $ipInfo variable now has a ton of great data returned about that IP address. If you’d like to see it, you just output the variable using PHP’s echo:

echo $ipInfo;

Finally, don’t forget to close the PHP:

?>

Now you can run your file in a browser, you’ll see something like this:

{"continent":"Europe","address_format":"{{recipient}}\n{{street}}\n{{postalcode}} {{city}}\n{{country}}","alpha2":"DE","alpha3":"DEU","country_code":"49","international_prefix":"00","ioc":"GER","gec":"GM","name":"Germany","national_destination_code_lengths":[2,3,4,5],"national_number_lengths":[6,7,8,9,10,11],"national_prefix":"0","number":"276","region":"Europe","subregion":"Western Europe","world_region":"EMEA","un_locode":"DE","nationality":"German","eu_member":true,"eea_member":true,"vat_rates":{"standard":19,"reduced":[7],"super_reduced":null,"parking":null},"postal_code":true,"unofficial_names":["Germany","Deutschland","Allemagne","Alemania","ドイツ","Duitsland"],"languages_official":["de"],"languages_spoken":["de"],"geo":{"latitude":51.165691,"latitude_dec":"51.20246505737305","longitude":10.451526,"longitude_dec":"10.382203102111816","max_latitude":55.0815,"max_longitude":15.0418962,"min_latitude":47.2701115,"min_longitude":5.8663425,"bounds":{"northeast":{"lat":55.0815,"lng":15.0418962},"southwest":{"lat":47.2701115,"lng":5.8663425}}},"currency_code":"EUR","start_of_week":"monday"}

It’s incredible that we can grab all of that data so easily, but it’s not actually all that useful. We need to be able to pick out parts of that code.

Go back and delete the line of code that begins with “echo”, and replace it with the following:

$ipJsonInfo = json_decode($ipInfo);

That line converts the JSON string into an object we can access.

Next echo the part of the data you want to. In this case, the name property gives us the country name:

echo $ipJsonInfo->name;

Run your file again, and you’ll see the country name “Germany” in your browser.

That’s cool, but there’s one more thing we need to do before this code is really useful, and that’s find the IP address dynamically, so that we’re looking up the country name of whomever is accessing the page. IP Geolocation API will do that for you if you access it with JavaScript (you simply omit the IP address altogether). Unfortunately, we’re using PHP, but fortunately, PHP gives us a really simple way to access the current user’s IP address, $_SERVER[“REMOTE_ADDR”].

Replace the IP address in the function call with the dynamic version:

$ipInfo = grabIpInfo($_SERVER["REMOTE_ADDR"]);

When you now run the code you’ll get your own country output to the browser. (If you don’t see anything, you’re probably testing locally so you don’t have a detectable IP address, upload to your webspace to see the file working correctly.)

Here’s the full code:

<?php function grabIpInfo($ip)
{ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip); curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE); $returnData = curl_exec($curl); curl_close($curl); return $returnData; } $ipInfo = grabIpInfo($_SERVER["REMOTE_ADDR"]);
$ipJsonInfo = json_decode($ipInfo); echo $ipJsonInfo->name; ?>

Simple Geolocation

As you can see, accessing geolocation data with the IP Geolocation API is incredibly fast and simple. And being able to access this kind of data for free is an incredible resource for any developer.

IP Geolocation API’s data is all run from the MaxMind database—one of the most trusted sources—which means you’re getting reliable, and accurate data, from a premium provider, at zero cost.

IP Geolocation API is the perfect place to start experimenting with geolocation. Once you get started, it will become an essential part of every user experience you design.

 

[– Featured image via DepositPhotos –]

[– This is a sponsored post on behalf of IP Geolocation API –]

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

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

Managing State in React using Unstated-Next

In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API.

Well, we’re going to build off that last post by looking at Unstated Next, a library that author Jamie Kyle identifies as the “spiritual successor” to his Unstated project. Unstated Next provides both React Hooks and the Context API for managing state. Unstated was a minimal abstraction to the idea of React Hooks before they were a fully-fledged thing. But now that Hooks in React are so good, that abstraction is unnecessary and Unstated Next simply incorporates them while providing an API to share state and logic with the Hooks.

We’re going to specifically look at how to manage state in both single and multiple components using Unstated Next. It might be helpful to check out the previous post on Unstated prior to moving ahead, but it’s not totally necessary.

Example: A minimal form component

To start off, we’ll create a tiny React application for a form that merely contains a text input for a person’s name and a button to submit it. When the button is clicked, we’ll display the name as a paragraph element above the form. The source code for this example is available on GitHub.

This is going to be a Bootstrap React application which we can spin up by using Create React App. Let’s install that and then change directories into the project folder.

npx create-react-app unstated-next-form
cd unstated-next-form>

We need to add Unstated Next as a dependency:

## yarn
yarn add unstated-next ## npm
npm install --save unstated-next

We’ll be making use of React Hooks and createContainer from Unstated Next, so let’s import those into the App component:

// src/App.js
import React, { useState } from 'react';
import { createContainer } from "unstated-next";

Next, we will create a custom hook. We’ll have our state in it, which we can create using useState:

// src/App.js
// ...same as before const useForm = () => { const [input, setValue] = useState(""); const [name, setName] = useState("Barney Stinson"); const handleInput = event => { setValue(event.target.value); }; const updateName = event => { event.preventDefault(); setName(input); setValue(""); }; return { input, name, handleInput, updateName, };
};

We have two states defined here. input will be used for keeping track of values entered into the text input and it will be updated using the handleInput method. name will be updated when the button is clicked, which will trigger the updateName method.

OK, now we can create a container by passing our custom hook as a parameter to the createContainer() method.

// src/App.js
// ...same as before const FormContainer = createContainer(useForm);

This will create a container which we can use across our application. Yeah, you read that right, but let’s take one step at a time. We’re starting with this one component to see how it works with Unstated Next.

Now, let’s create a Form component that looks like this.

// src/App.js
// ...same as before const Form = () => { const form = FormContainer.useContainer(); return ( 

Hello! {form.name}

</div> ); };

We’re assigning the variable form to the value obtained from calling FormContainer.useContainer(). The value contains the states and methods defined in the custom hook we created above. With that, we can make use of the state and methods provided — but for that to happen, we have to wrap the Form component in a provider.

const App = () => ( <Form.Provider> <Form /> </Form.Provider>
)

With what you have learned so far, try building a minimal to-do application using Unstated Next. If you get stuck, feel free to check this repository to see how I made mine.

Example: Sharing state across multiple components

OK, so you got a hint earlier that we can use our form container anywhere we’d like. One of the benefits of using Unstated Next is that it makes it possible to share state across multiple components. To see how this works, we’ll build a tiny app that uses the form features we made above and also makes it possible to create to-do tasks using the same state. The name of the user can be updated in the form component, and this update will also be reflected in the to-do component. Two birds of a feather!

There’s a repo for this example as well, so feel free to clone or download it as we plow ahead.

Let’s spin up a new project and install the necessary dependencies:

npx create-react-app unstated-next-app
cd unstated-next-app
yarn unstated-next shortid

The state for the application will live in a separate file. We want to have the states for the form and to-do components in the store, and the methods needed for updating them too. Create a store.js file inside the src directory and make it look like this;

// src/store.js
import { useState } from "react";
import shortid from "shortid"
import { createContainer } from 'unstated-next'
export const useStore = () => { // Construct a list that contains two default tasks const list = [ { id: 1, title: 'Write code' }, { id: 2, title: 'Buy milk' } ] const [input, setValue] = useState(""); // Let's set a legen -- wait for it -- dary default name that updates on form submit const [name, setName] = useState("Barney Stinson"); const [todos, addTodo] = useState(list); const [item, setTodo] = useState(""); const handleInput = event => { setValue(event.target.value); }; const updateName = event => { event.preventDefault(); setName(input); setValue(""); }; const handleTodo = event => { setTodo(event.target.value); }; const handleSubmit = event => { event.preventDefault(); const value = { id: shortid.generate(), title: item } addTodo(todos.concat(value)); setTodo(""); }; return { input, name, handleInput, updateName, todos, item, handleTodo, handleSubmit };
}
export const StoreContainer = createContainer(useStore)

We make use of useState() to create the states we need. The methods are defined and all of this happens inside the custom hook, useStore(). We create the StoreContainer and then pass useStore() as a parameter to createContainer(). With that, we can make use of the StoreContainer in the necessary components where want to make use of the state and methods we have defined.

Starting with the form section, create a file called form.js and it should look like what I have below;

// src/form.js
import React from "react";
import { StoreContainer} from "./store"; const FormComponent = () => { const form = StoreContainer.useContainer(); return ( 

Hello! {form.name}

</div> ); }; export default FormComponent;

We’re using StoreContainer to access the state and methods we need. We’ll do the same thing for the task component which you can create in a todo.js file.

// src/todo.js
import React from "react";
import { StoreContainer } from "./store"; const TodoComponent = () => { const todo = StoreContainer.useContainer(); return ( 

Add Todos

Dear {todo.name}, here are your current tasks;

{todo.todos.map((item) => { return (
  • {item.title}
); })}
</div> ); }; export default TodoComponent;

You can see that todo.name can only be updated in the FormComponent. That’s because we need a way to provide the state in both components. That’s why we’re going to turn again to Provider and add one in the App component just like we did in the previous example.

import React from 'react';
import TodoContainer from "./todo";
import FormContainer from "./form";
import { StoreContainer } from "./store" function App() { return ( 
); } export default App;

There we go! By adding the provider, data can be taken from the form component, stored in the provider, and passed back to the task list. 💥

The post Managing State in React using Unstated-Next appeared first on CSS-Tricks.

Building A Component Library Using Figma

Building A Component Library Using Figma

Building A Component Library Using Figma

Emiliano Cicero

I’ve been working on the creation and maintenance of the main library of our design system, Lexicon. We used the Sketch app for the first year and then we moved to Figma where the library management was different in certain aspects, making the change quite challenging for us.

To be honest, as with any library construction, it requires time, effort, and planning, but it is worth the effort because it will help with providing detailed components for your team. It will also help increase the overall design consistency and will make the maintenance easier in the long run. I hope the tips that I’ll provide in this article will make the process smoother for you as well.

This article will outline the steps needed for building a component library with Figma, by using styles and a master component. (A master component will allow you to apply multiple changes all at once.) I’ll also cover in detail the components’ organization and will give you a possible solution if you have a large number of icons in the library.

Note: To make it easier to use, update and maintain, we found that it is best to use a separate Figma file for the library and then publish it as a team ‘library’ instead of publishing the components individually.

Getting Started

This guide was created from a designer’s perspective, and if you have at least some basic knowledge of Figma (or Sketch), it should help you get started with creating, organizing and maintaining a component library for your design team.

If you are new to Figma, check the following tutorials before proceeding with the article:

Requirements

Before starting, there are some requirements that we have to cover to define the styles for the library.

Typography Scale

The first step to do is to define the typography scale; it helps to focus on how the text size and line height grow in your system, allowing you to define the visual hierarchy of your texts.

a scale of text in different sizes, from small to big
Typography scales are useful to improve the hierarchy of the elements, as managing the sizes and weights of the fonts can really guide the user through the content. (Large preview)

The type of scale depends on what you’re designing. It’s common to use a bigger ratio for website designs and a smaller ratio when designing digital products.

The reason for this is behind the design’s goal — a website is usually designed to communicate and convert so it gives you one or two direct actions. It’s easier in that context to have 36px for a main title, 24px for a secondary title, and 16px for a description text.

Related resource: “8-Point Grid: Typography On The Web” by Elliot Dahl.

On the other hand, digital products or services are designed to provide a solution to a specific problem, usually with multiple actions and possible flows. It means more information, more content and more components, all in the same space.

For this case, I personally find it rare to use more than 24px for texts. It’s more common to use small sizes for components — usually from 12 to 18 pixels depending on the text’s importance.

If you’re designing a digital product, it is useful to talk to the developers first. It’s easier to maintain a typography scale based on EM/REM more than actual pixels. The creation of a rule to convert pixels into EM/REM multiples is always recommended.

Related resource: “Defining A Modular Type Scale For Web UI” by Kelly Dern.

Color Scheme

Second, we need to define the color scheme. I think it’s best if you to divide this task into two parts.

  1. First, you need to define the main colors of the system. I recommend keeping it simple and using a maximum of four or five colors (including validation colors) because the more colors you include here, the more stuff you’ll have to maintain in the future.
  2. Next, generate more color values using the Sass functions such as “Lighten” and “Darken” — this works really well for user interfaces. The main benefit of this technique is to use the same hue for the different variants and obtain a mathematical rule that can be automated in the code. You can’t do it directly with Figma, but any Sass color generator will work just fine — for example, SassMe by Jim Nielsen. I like to increase the functions by 1% to have more color selection.
2 different sets of colors with different tones
Once you have your main colors (in our case, blue and grey), you can generate gradients using lighten and darken functions. (Large preview)

Tip: In order to be able to apply future changes without having to rename the variables, avoid using the color as part of the color name. E.g., instead of $blue, use $primary.

Recommended reading: What Do You Name Color Variables?” by Chris Coyier

Figma Styles

Once we have the typography scale and the color scheme set, we can use them to define the Library styles.

This is the first actual step into the library creation. This feature lets you use a single set of properties in multiple elements.

2 shapes showing a color palette and a text to represent the possible styles
Styles are the way to control all the basic details in your library. (Large preview)

Concrete Example

Let’s say you define your brand color as a style, it’s a soft-blue and you originally apply it to 500 different elements. If it is later decided that you need to change it to a darker blue with more contrast, thanks to the styles you can update all the 500 styled elements at once, so you won’t have to do it manually, element by element.

We can define styles for the following:

If you have variations of the same style, to make it easier to find them later, you can name the single styles and arrange them inside the panel as groups. To do so, just use this formula:

Group Name/Style Name

I’ve included a suggestion of how to name texts and colors styles below.

Text Styles

Properties that you can define within a text style:

  • Font size
  • Font weight
  • Line-height
  • Letter spacing

Tip: Figma drastically reduces the number of styles that we need to define in the library, as alignments and colors are independent of the style. You can combine a text style with a color style in the same text element.

4 shapes with text inside used as examples of different text styles
You can apply all the typography scale we’ve seen before as text styles. (Large preview)

Text Styles Naming

I recommend using a naming rule such as “Size/Weight”
(eg: 16/Regular, 16/SemiBold, 16/Bold).

Figma only allows one level of indentation, if you need to include the font you can always add a prefix before the size:
FontFamily Size/Weight or FF Size/Weight
*(eg: SourceSansPro 16/Regular or SSP 16/Regular).*

Color Styles

The color style uses its hex value (#FFF) and the opacity as properties.

Tip: Figma allows you to set a color style for the fill and a different one for the border within the same element, making them independent of each other.

4 shapes with colors inside, used as examples of different color styles
You can apply color styles to fills, borders, backgrounds, and texts. (Large preview)

Color Styles Naming

For a better organization I recommend using this rule “Color/Variant”. We named our color styles using “Primary/Default” for the starter color, “Primary/L1”, “Primary/L2” for lighten variants, and “Primary/D1”, “Primary/D2” for darken variants.

Effects

When designing an interface you might also need to create elements that use some effects such as drop shadows (the drag&drop could be an example of a pattern that uses drop shadows effects). To have control over these graphic details, you can include effect styles such as shadows or layer blurs to the library, and also divide them by groups if necessary.

2 shapes similar to paper, one above the other one to show the shadow effect
Define shadows and blurs to manage special interaction effects such as drag-n-drop. (Large preview)
Grids

To provide something very useful for your team, include the grid styles. You can define the 8px grid, 12 columns grid, flexible grids so your team won’t need to recreate them.

12 columns to represent the grid styles
There’s no need to memorize the grid sizes anymore. (Large preview)

Tip: Taking advantage of this feature, you can provide all the different breakpoints as ‘grid styles’.

Master Component

Figma lets you generate multiple instances of the same component and update them through a single master component. It’s easier than you might think, you can start with some small elements and then use them to evolve your library.

a single group of three shapes that shows how you can get seven different results by hiding some of the shapes
One master component to rule them all! (Large preview)

To explain this workflow better, I will use one of the basic components all the libraries have: the buttons.

Buttons!

Every system has different types of buttons to represent the importance of the actions. You can start having both primary and secondary buttons with only texts and one size, but the reality is that you’ll probably end up having to maintain something like this:

  • 2 color types (Primary | Secondary)
  • 2 sizes of buttons (Regular | Small)
  • 4 content types (Text Only | Icon Only | Text + Icon right | Icon Left + Text)
  • 5 states (Default | Hover | Active | Disabled | Focus)

This would give us up to 88 different components to maintain only with the set of buttons mentioned above!

a screenshot with a total of 88 different button components
Thanks to how Figma is built, you can easily manage a lot of button instances all at once. (Large preview)

Let’s Start Step By Step

The first step is to include all the variations together in the same place. For the buttons we’re going to use:

  • A single shape for the background of the button so that we can then place the color styles for the fill and the border;
  • The single text that will have both text and color styles;
  • Three icon components (positioned to the right, center and left) filled in with the color style (you will be able to easily swap the icons).
a group of divided elements: a rectangle shape, a button text and 3 icons
A shape, a text, and an icon walk into a Figma bar… (Large preview)

The second step is to create the master component (use the shortcut Cmd + Alt + K on Mac, or Ctrl + Alt + K on Windows) with all of the variations as instances. I suggest using a different and neutral style for the elements inside the master component and use the real styles on the sub-components, this trick will help the team use only sub-components.

You can see the visual difference between a master component and a sub-component in the next step:

A group of elements centered in the same space, one over the other one
The more elements, the more instances you can control. (Large preview)

In the third step you need to duplicate the master component to generate an instance, now you can use that instance to create a sub-component, and from now on every change you make to the master component will also change the sub-component you’ve created.

You can now start applying the different styles we’ve seen before to the elements inside the sub-component and, of course, you can hide the elements you don’t need in that sub-component.

An example showing how 8 different buttons can be generated from 1 single component
Thanks to the color styles you can generate different components using the same shape. In this example, primary and secondary styles are generated from the same master component. (Large preview)

Text Alignment

As I’ve shown you in the styles, the alignments are independent of the style. So if you want to change the text alignment, just select it by hitting Cmd/Ctrl and changing it. Left, center or right: it will all work and you can define different sub-components as I did with the buttons.

Tip: To help you work faster without having to find the exact element layer, if you delete an element inside the instance, it will hide the element instead of actually deleting it.

Component Organization

If you’re coming from Sketch, you could be having trouble with the organization of the components in Figma as there are a few key differences between these two tools. This is a brief guide to help you organize the components well so that the instance menu doesn’t negatively affect your team’s effectiveness.

showing the instance menu open with more unordered sub-menus
As you can see here, our library had so many sub-menus that as a result the navigation was going off the screen on MacBooks, that was a big problem for our library. We were able to find a workaround for this issue. (Large preview)
showing the improvements on the instance menu open with ordered sub-menus
This was the result after improving the library order following the rules for pages and frames, now it’s way more usable and organized for our teams. (Large preview)

We’ve all been there, the solution is easier than you think!

Here’s what I have learned about how to organize the components.

Figma Naming

While in Sketch all the organization depends only on the single component name, in Figma it depends on the Page name, the Frame name, and the single Component name — exactly in that order.

In order to provide a well-organized library, you need to think of it as a visual organization. As long as you respect the order, you can customize the naming to fit your needs.

Here’s how I’ve divided it:

  • File Name = Library Name (e.g. Lexicon);
  • Page Name = Component Group (e.g. Cards);
  • Frame Name = Component Type (e.g. Image Card, User Card, Folder Card, etc);
  • Component Name = Component State (e.g. Default, Hover, Active, Selected, etc).
Showing the main page named ‘Cards’, the frame named ‘Image Card’ and the layer named ‘Card Hover’
This structure is the equivalent to the Sketch naming of ‘Cards/Image Card/Card Hover’. (Large preview)

Adding Indentation Levels

When creating the Lexicon library, I found that I actually needed more than three levels of indentation for some of the components, such as the buttons that we saw before.

For these cases, you can extend the naming using the same method as Sketch for nested symbols (using the slashes in the component name, e.g. “Component/Sub-Component”), under the condition that you do it only after the third level of indentation, respecting the structural order of the first three levels as explained in the previous point.

This is how I organized our buttons:

  • Page name = Component Group (e.g. Buttons);
  • Frame name = Component Size (e.g. Regular or Small);
  • Component name = Style/Type/State (e.g. Primary/Text/Hover).
Showing the main page named 'Buttons', the frame named 'Buttons Regular' and the layer named 'Primary/Text/Button Hover' as example of the possible structures.
This structure is the equivalent to the Sketch naming of ‘*Buttons/Buttons Regular/Primary/Text/Button Hover*’. (Large preview)

Tip: You can include the component name (or a prefix of the name) in the last level, this will help your team to better identify the layers when they import the components from the library.

Icons Organization

Organizing the icons in Figma can be challenging when including a large number of icons.

As opposed to Sketch which uses a scroll functionality, Figma uses the sub-menus to divide the components. The problem is that if you have a large number of icons grouped in sub-menus, at some point they might go off screen (my experience with Figma on a MacBook Pro).

Showing the instance menu for the icons with a single scrollable sub-menu.
An example of how the components are organized inside a single scrollable sub-menu. (Large preview)
Showing the instance menu for the icons with more than 10 sub-menus and cover all the screen.
As you can see, using a Macbook Pro the result was the menus going outside the screen. (Large preview)

Here are two possible solutions:

  • Solution 1
    Create a page named “Icons” and then a frame for each letter of the alphabet, then place each icon in the frame based on the icon’s name. For example, if you have an icon named “Plus”, then it will go in the “P” frame.
  • Solution 2
    Create a page named “Icons” and then divide by frames based on the icon categories. For example, if you have icons that represent a boat, a car, and a motorcycle, you can place them inside a frame named “vehicles”.
The instance menu is open, showing the alphabetical order of the icons in Figma.
I, personally, applied solution 1. As you can see in this example, we had a huge number of icons so this was the better fit. (Large preview)

Conclusion

Now that you know what’s exactly behind a team’s library construction in Figma, you can start building one yourself! Figma has a free subscription plan that will help you to get started and experiment with this methodology in a single file (however, if you want to share a team library, you will need to subscribe to the “Professional” option).

Try it, create and organize some advanced components, and then present the library to your team members so you could amaze them — or possibly convince them to add Figma to their toolset.

Finally, let me mention that here in Liferay, we love open-source projects and so we’re sharing a copy of our Lexicon library along with some other resources. You can use the Lexicon library components and the other resources for free, and your feedback is always welcome (including as Figma comments, if you prefer).

The Lexicon logo, it’s similar to a hexagon and a fingerprint together.
Lexicon is the design language of Liferay, used to provide a Design System and a Figma Library for the different product teams. (Large preview)

If you have questions or need help with your first component library in Figma, ask me in the comments below, or drop me a line on Twitter.

Further Resources

Smashing Editorial (mb, yk, il)
What’s New For Designers, June 2019

It’s that time of year when everyone’s mind is less on work, than on vacation. So, we’ve tried to round up a few new tools and resources for designers that can make projects seem a little more like play. Enjoy!

Fontanello

Fontanello is a Chrome browser extension that lets you see the type styles of text just by right-clicking it. This tool takes all the hassle out of looking for font styles by showing the name, size, leading, and color of a typeface quickly. (There’s also a Firefox browser extension.)

Freemium

Freemium is a collection of free tools and resources for designers. You can find information about all types of websites and applications (even stock photos) that are free to use. Each tool includes a description and buttons to access the tool or learn more. This database is a lot faster than searching everywhere for the right tools and having to sort through all the digital clutter.

Creative Machine

Creative Machine is an ad template tool that’s still in beta (and free if you want to try it). Use it to create an ad template and then create other dynamic creatives with just a click. If you build a lot of ad sizes for the web, this tool can help save time.

GPortfolio

GPortfolio lets you generate an automatic portfolio based on your GitHub profile. How many times have you asked for that functionality? There’s plenty of documentation to walk you getting started and examples templates.

Gradient Toggles

Gradient Toggles mixes cool animation with trendy color in elements that fade away on click. The Pen is by Mikeal Ainalem and worth a look.

Mailgo

Mailgo makes mailto functions that much prettier. The tiny tool substitutes all mailto links on your website with a snazzy popup modal that will impress visitors and allow them to choose what email program to open and send from.

PixelSnap 2

Pixel Snap 2 is a simple tool that measures anything on your screen instantly. The new version is faster and works on any screen, including apps. Measure distances between objects and copy to the clipboard or determine the size of elements or groups of elements. The tool is only for Mac right now and starts at $25 for one computer.

Design Ladder Goals

Design Ladder can help you create goals for yourself and work on your career. We all struggle with this at times; taking a minute to reflect and look forward can help push a career. It’s a worthwhile exercise.

DesignGapp

DesignGapp is a simple tool to create beautiful design documentation for projects. It takes a lot of the hassle out of building style guides that users will want to look at and you can collaborate within the tool.

Accessible Icon Buttons

Accessible Icon Buttons is a deep-dive into the UX of this design element and how it could be better for more users. Sara Soueidan does a great job with explanations and suggestions for creating more accessible button elements in your website design projects.

Materia Icons Library

Materials Icons Library is a huge collection of icons, with more than 1,000 individual elements. The style is simple in a material style, and works with popular software including Sketch, Figma, Invision Studio, and Adobe XD. Icons are also in SVG and PSD formats.

Nerd Flat Icons

Nerd Flat Icons makes me think of the Big Bang Theory – who else misses this TV classic already? – with a cool set of geeked out vector icons. The set mixes math, space, chemistry, and physic themes in 50 flat, colorful icons. Each is available in PNG and SVG format.

Nom Nom Nom Illustrations

Nom Nom Nom Illustrations are fun food-based vector drawings for projects. What’s cool about each design is that you can download an original file or convert it to a phone or desktop wallpaper. Download just the illustrations you like one by one.

3D Frame Illustrator

Picture your artwork in a frame image. The tool is perfect to see what color or style frame would look best before you push artwork for sale on design marketplaces. All you have to do is upload an image and then download a high-resolution framed image with your work inside.

Font Kiko

Font Kiko is an icon font with more than 700 individual icon elements. Search the icon set, which includes light, regular, and solid options. Icons feature a variety of elements in multiple categories for ease of use.

Giselle

Giselle is a simple handwriting-style script with nice flourishes and tails. It has a solid weight and isn’t too feminine, making it acceptable for a variety of applications.

Isle Headline

Isle Headline is a lovely serif typeface in multiple weights. The free version has a limited character set, but there is a full version available. It includes upper- and lowercase characters and the black weight is especially nice for display.

Ministry of Moron

Ministry of Moron is a striking display typeface with a wide stance and funky feel. It has uppercase letters only and numbers and is free for personal use.

National Park

National Park is a typeface designed to look like the iconic font used by the organization’s carved signs. The free font comes in four weights — light, regular, heavy, and outline — and includes a full character set.

Salt

Salt is a minimalist typeface with a low x-height. It includes a full uppercase character set and numbers in regular and bold weights. The funky feel is ideal for display use.

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

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

The Prince & the fleur-de-lys

Written by Niccolò Machiavelli in 1513, The Prince is undoubtedly the most famous political treatise of the Renaissance and a book that is, if not actually read, familiar to many even today. More than 500 years after its first publication, it still remains both popular and controversial, surviving in popular culture through the adjective, Machiavellian, […]

The post The Prince & the fleur-de-lys appeared first on I Love Typography.

Popular Design News of the Week: June 10, 2019 – June 16, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

How to Design for the Web in 2019

 

Write HTML like it’s 1999

 

A Simple Guide to Design Thinking

 

Why Text Buttons Hurt Mobile Usability

 

CodyHouse Framework 2.0

 

Colors in UI Design — Theory, Psychology & Practice

 

Birth of Our New Design System

 

This Page is a Truly Naked, Brutalist Html Quine.

 

Milkshake – Make Websites from your Phone

 

Different Faces of Gamification in Web Design

 

Why Dark Gray is Brighter than Gray on the Web

 

A Future Design Tool with Git-like Asset Versioning

 

Firefox’s Bold New Branding is a Glimpse into Mozilla’s Grand Plan

 

Introducing Sideway

 

The State of CSS 2019

 

Your Website Content Migration Checklist

 

Gmail’s Dynamic Emails Roll Out to all Users on July 2

 

Typography for AR Interfaces

 

The Must-Have Elements of a Successful SEO Strategy

 

What I Learned from Rebranding a Company in 3 Months

 

The New Mac Pro is a Design Remix

 

This Just Might Be the World’s Most Beautiful Refrigerator

 

Designing for the User’s Emotional Journey

 

User Experience Is… User Research

 

To Be Great, Be Good Repeatably

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

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

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

Components, yo.

I see VuePress just went 1.0. Explained simply, it’s a static site generator based on Vue. But of course, you work in Vue, which means you work in components.

All the modern JavaScript frameworks are component-based. Even when they disagree with each other about specific things (like how Svelte requires compilation), they all seem to agree on the model of working in components. React is all components. A popular static site generator for React is Next.js. The Vue version of that is Nuxt.js.

Then there is Gatsby which is all React. (Listen to our latest ShopTalk Show as we discuss it.) Gridsome seems like the most 1-to-1 comparison in Vue-land, the notable comparison being how they both are designed to suck in data from any source. Components though, of course. I’m not sure there is a flagship Angular-based static site generator, but they are out there, and Angular is components all the way down.

Components are so ubiquitous that perhaps you don’t even think about it anymore. But you might feel it, particularly if you jump back and forth between projects that aren’t component-driven. WordPress development, generally, I feel, isn’t component driven. Sure, you’ve got your header.php and footer.php files and such. You can break those apart however you want, but it’s rather ad-hoc. You aren’t explicitly building components and feeding those components local data and testing them as such. (You can get a lot closer with something like Timber.)

Building front-ends out of server-side code is absolutely fine. Server-side rendering is rife with advantages. But server-side languages don’t seem to have embraced components the way JavaScript has. And since everyone seems to like components (front-end devs obviously love it, designers think that way anyway, back-end devs understand it…) it’s no surprise to me to see this surge of beloved projects build server-side (or build-time) generated sites from JavaScript, simply because it’s component-based and components are just a good idea.

The post Components, yo. appeared first on CSS-Tricks.

Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon

Šime posts regular content for web developers on webplatform.news.

In this week’s roundup, Chrome is adding an install option for Progressive Web Apps, Opera GX comes to Windows, the ECMAScript proposals get an update, and CSS Scroll Snap is coming to a Firefox browser near you.

An install icon is coming to Chrome on desktop

Pete LePage: The next version of Chrome will automatically show an install icon in the address bar on desktop if the site meets Chrome’s PWA “installability” criteria. You can listen for the appinstalled event to detect if the user installed your PWA.

Opera GX is available on Windows

Maciej Kocemba: The preview version of Opera GX for Windows is now available. This is a special version of Opera that lets users limit how much CPU and RAM is available to the browser.

Updated ECMAScript proposals

Azu The JavaScript optional chaining operator (obj?.prop) and null-ish coalescing operator (x ?? y) proposals have been moved to Stage 2 of the TC39 process. (See Web Platform News issue 902 for more information about the TC39 process.)

// BEFORE
let text = response.settings && response.settings.headerText;
if (text == null) text = "Hello, world!"; // AFTER
let text = response.settings?.headerText ?? "Hello, world!";

CSS Scroll Snap is coming to Firefox

Šime Vidas: CSS Scroll Snap is supported in Chrome, Safari, and the next version of Firefox. Scroll snapping works well on touch screen devices but there are some usability issues on desktop platforms.

The post Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon appeared first on CSS-Tricks.

Monthly Web Development Update 6/2019: Rethinking Privacy And User Engagement

Monthly Web Development Update 6/2019: Rethinking Privacy And User Engagement

Monthly Web Development Update 6/2019: Rethinking Privacy And User Engagement

Anselm Hannemann

Last week I read about the web turning into a dark forest. This made me think, and I’m convinced that there’s hope in the dark forest. Let’s stay positive about how we can contribute to making the web a better place and stick to the principle that each one of us is able to make an impact with small actions. Whether it’s you adding Webmentions, removing tracking scripts from a website, recycling plastic, picking up trash from the street to throw it into a bin, or cycling instead of driving to work for a week, we all can make things better for ourselves and the people around us. We just have to do it.

News

  • Safari went ahead by introducing their new Intelligent Tracking Protection and making it the new default. Now Firefox followed, enabling their Enhanced Tracking Protection by default, too.
  • Chrome 75 brings support for the Web Share API which is already implemented in Safari. Latency on canvas contexts has also been improved.
  • The Safari Technology Preview Release 84 introduced Safari 13 features: warnings for weak passwords, dark mode support for iOS, support for aborting Fetch requests, FIDO2-compliant USB security keys with the Web Authentication standard, support for “Sign In with Apple” (for Safari and WKWebView). The Visual Viewport API, ApplePay in WKWebView, screen sharing via WebRTC, and an API for loading ES6 modules are also supported from now on.
  • There’s an important update to Apple’s AppStore review guidelines that requires developers to offer “Sign In with Apple” in their apps in case they support third-party sign-in once the service is available to the public later this year.
  • Firefox 67 is out now with the Dark Mode CSS media query, WebRender, and side-by-side profiles that allow you to run multiple instances parallelly. Furthermore, enhanced privacy controls are built in against crypto miners and fingerprinting, as well as support for AV1 on Windows, Linux, and macOS for videos, String.prototype.matchAll(), and dynamic imports.

General

  • The web relies on so many open-source projects, and, yet, here’s what it looks like to live off an open-source budget. Most authors are below the poverty line, forced to live in cheaper countries or not able to make a living at all from their public service of providing reliable, open software for others who then use it commercially.
  • We all know that annoying client who ignores your knowledge and gets creative on their own. As a developer, Holger Bartel experienced it dozens of times; now he found himself in the same position, having ordered a fine drink and then messed it up.

UI/UX

  • With so many dark patterns built into the software and websites we use daily, Fabricio Teixeira and Caio Braga call for a tech diet for users.
Facebook, Instagram, Twitter, and Netflix Nutrition Facts.
“Dark patterns try to manipulate users to engage further, deeper, or longer on a site or app. The world needs a tech diet, and designers can help make it a reality. (Image credit)

CSS

  • The CSS feature for truncating multi-line text has been implemented in Firefox. -webkit-line-clamp: 3;, for example, will truncate text at the end of line three.

Security

Privacy

  • Anil Dash tries to find an answer to the question if we can trust a company in 2019.
  • Kevin Litman-Navarro analyzed over 150 privacy policies and shares his findings in a visual story. Not only does it take about 15 minutes on average to read a privacy policy, but most of them require a college degree or even professional career to understand them.
  • Our view on privacy hasn’t changed much since the 18th century, but the circumstances are different today: Companies have a wild appetite to store more and more data about more people in a central place — data that was once exclusively accessible by state authorities. We should redefine what privacy, personal data, and consent are, as Maciej Cegłowski argues in “The new wilderness.”
  • The people at WebKit are very active when it comes to developing clever solutions to protect users without compromising too much on usability and keeping the interests of publishers and vendors in mind at the same time. Now they introduced “privacy preserving ad click attribution for the web,” a technique that limits the data which is sent to third parties while still providing useful attribution metrics to advertisers.
An overview of how hard privacy policies are to read and how much time it requires to do so. Most privacy policies are college and professional career level. Only one is comprehensible on a Middle School level.
Most privacy policies on the web are harder to read than Stephen Hawking’s “A Brief History Of Time,” as Kevin Litman-Navarro found out by examining 150 privacy policies. (Image credit)

Accessibility

  • Brad Frost describes a great way to reduce motion on websites (of animated GIFs, for example), using the picture element and its media query feature.

Tooling

  • The IP Geolocation API is an open-source real-time IP to Geolocation JSON API with detailed countries data integration that is based on the Maxmind Geolite2 database.
  • Pascal Landau wrote a step-by-step tutorial on how to build a Docker development setup for PHP projects, and yes, it contains everything you might need to apply it to your own projects.

Work & Life

  • Roman Imankulov from Doist shares insights into decision-making in a flat organization.
  • As a society, we’re overworked, have too many belongings, yet crave for more, and companies only exist to grow indefinitely. This is how we kick-started climate change in the past century and this is how we got more people than ever into burn-outs, depressions, and various other health issues, including work-related suicides. Philipp Frey has a bold theory that breaks with our current system: A research by Nässén and Larsson suggests that a 1% decrease in working hours could lead to a 0.8% decrease in GHG emissions. Taking it further, the paper suggests that working 12 hours a week would allow us to easily achieve climate goals, if we’re also changing the economy to not entirely focus on growth anymore. An interesting study as it explores new ways of working, living, and consuming.
  • Leo Babauta shares a method that helps you acknowledge when you’re tired. It’s hard to accept, but we are humans and not machines, so there are times when we feel tired and our batteries are low. The best way to recover is realizing that this is happening and focusing on it to regain some energy.
  • Many of us are trying to achieve some minutes or hours of “deep work” a day. Fadeke Adegbuyi’s “The Complete Guide to Deep Work” shares valuable tips to master it.

Going Beyond…

  • People who live a “zero waste” life are often seen as extreme, but this is only one point of view. Here’s the other side where one of the “extreme” persons reminds us that it used to be normal to go to a farmer’s market to buy things that aren’t packed in plastic, to ride a bike, and drink water from a public fountain. Instead, our consumerism has become quite extreme and needs to change if we want to survive and stay healthy.
  • Sweden wants to become climate neutral by 2045, and now they presented an interesting visualization of the plan. It’s designed to help policymakers identify and fill in gaps to ensure that the goal will be achieved. The visualization is open to the public, so anyone can hold the government accountable.
  • Everybody loves them, many have them: AirPods. However, they are an environmental disaster, as this article shows.
  • The North Face tricking Wikipedia is advertising’s dark side.
  • The New York Times published a guide which helps us understand our impact on climate change based on the food we eat. This is not about going vegan but how changing eating habits can make a difference, both to the environment and our own health.
Smashing Editorial (cm)
7 Ways to Convey Sarcasm in Web Content

Pop quiz: which of the following statements is sarcastic?

  1. Edge is actually a kind of decent browser, just missing some features.
  2. Writing CSS using JavaScript is a viable and sensible way to get things done, now that we use JS for everything else. We might as well.
  3. Brutalism as a movement has, in some ways, made some of us into better designers.

It can be hard to tell, can’t it? For the record, it’s number 2. But really, you might have seen people say each one of those things somewhere on the Internet, and some of them even meant that second one. And then, some of them said it and didn’t mean it, but other people thought they meant it and got mad at them. Even in real life, I’ve occasionally said something out loud that I thought had a clearly sarcastic tone, only to have to clarify my statement afterward.

We live in a world where it can be darned difficult to tell sarcasm from trolling

As web designers (who are often tasked with also making website content), you may run into a situation where sarcasm is called for, and you have to make sure people don’t get it wrong. That’s a tough call. We live in a world where it can be darned difficult to tell sarcasm from trolling.

We live in a world where people aren’t always ready to see sarcasm, or even humor for what it is. You sometimes have to prime your audience to expect something funny, rather than something glaringly stupid or offensive. This is why comedians have “hype men”, or other opening acts to warm up an audience. This is why sarcasm on Twitter often goes very, very wrong.

So how do you convey this to your users? How do you tell them that sarcasm’s coming? Well, there are a few simple ways:

1. Don’t Tell Them

This approach depends on the apparent absurdity of your statement to make the joke work. Now, I already listed a few reasons above as to why you wouldn’t want to use this approach. Well, the fact is that it can actually work, but only under very specific circumstances.

Using sarcasm with no warning works only when you know your audience very well, and they are all on the same page already. For example, if you tell a sarcastic joke about plumbing to an audience of all plumbers who share the same baseline of knowledge, you can be reasonably sure they’ll all get it. Throw a few lawyers into the audience, and this approach fails.

2. Tell Them in the Most Literal Way

One of the safest ways of communicating sarcasm that I’ve found is with formatting. Yes, formatting. I’ll literally put my sarcasm in bracket-tags like this:

[sarcasm]XML has no practical application outside of MS Office.[/sarcasm]

It has the advantage of being simple, obvious, and very difficult to dispute. On the downside, it’s not very subtle. However, on the Internet, it’s usually not worth being subtle.

3. Less Literal Formatting

Okay, so you want to convey a sarcastic or ironic statement without tags. Fine. There are a couple of tricks that started with the print industry, and still sort of work online today. The first and most popular one is quotation marks. Quotation marks are best used to indicate a sarcastic tone for short phrases, or even single words, and are the basis for the every popular “air quotes” gesture people use in real life.

For full sentences or paragraphs, you can use italics. It’s especially useful if you’re actually quoting someone, like so: “Oh sure,” said Bob, “just go ahead tweet sarcastic things at people with no contextualization. That’ll work out well.

4. Use Memes

Some memes are an almost inherently sarcastic form of communication. When people see a known sarcastic meme coming, they know what to expect. Mind you, this only works if your audience knows the meme in question, to it’s a situational tool at best.

5. Illustration

Illustrations (such as comics, for example) are a good way to visually set the tone for things you want to say. Show someone some comic strip art, and their brain will probably be primed for some humor and sarcasm. At least in the west, sarcastic comics are incredibly common, and form the basis of a collective experience of irony. They’re generally hard to misinterpret.

6. Use Audio or Video

Sarcasm is far easier to convey when people can actually hear you use a dramatic, facetious tone of voice. It’s not a 100% guaranteed solution, but it’s a lot more likely to convey your tone correctly if you keep the sarcasm relegated to your multimedia content.

(Just don’t be like me. Most of my sarcasm comes out with a very deadpan voice and blank facial expression. It’s a bad habit and it confuses people.)

7. Sarcasm in Microcopy

Microcopy isn’t specifically a medium for sarcasm or jokes, but it’s been used that way a lot. Designers often insert humor into microcopy as a way to “humanize” a user experience with any given product. Just once, though, I want to see a sales form with text that says “Wooo! Money! We like money!” buried somewhere in it. As of yet, I haven’t seen anyone who has the sheer cheek to pull off something like that.

Like everything else on this list, of course, you’ll have to watch out for context. If microcopy on your site is typically used for providing plain, helpful instructions, suddenly including an ironic statement might throw people off. If your microcopy is going to be sarcastic, it has to be sarcastic from the very beginning.

 

Featured image via DepositPhotos.

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

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

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google