Crash Course: Optimizing and Exporting SVGs in Adobe Illustrator

When you start working with SVG, one of the most important things is to learn how to create, export, and optimize your graphic files for the Web correctly. Coding SVG by hand can be slow and tedious process, so it’s much better to create your graphic in a visual manner with program like Illustrator (Inkscape, Sketch, SVG-Edit, etc.) and then to export the generated code.

Before we start you need to understand one thing clearly. The optimization of an SVG file begins with its creation and continues all the way to export. As is the case with an HTML web page, it’s difficult to fix a poorly built file after its finished.

Of course, you can use optimization tools after export, but this automated approach can be unsafe as it you can break your file in unexpected ways. That’s why I'd advise you to use manual optimization wherever you can. And this is exactly what you will learn today.

Creating SVGs in Illustrator

When you create a graphic in Illustrator—which is intended for SVG export—you need to perform some steps and considerations required to make the final output properly optimized for web. Let’s explore them now.

Set the Correct Color Space

• Illustrator — as most vector illustration software — was originally designed for print production, and therefore its color space is set to CMYK by default. RGB is much more appropriate for web and screen use, and has a wider gamut (range of colors) than CMYK. So, when you create new document make sure the color mode is set to RGB as you can see in the image below.

Give your drawing a proper structure

An SVG file is not like a regular bitmap image — a grid of pixels. It’s a text document that has a specific structure.

Like an HTML document, you can select and manipulate individual elements separately. To do this, you'll need to use their names as a reference. I've found it’s always much easier to create these labels during visual editing in Illustrator, rather than later.

For that reason, it’s important to give a meaningful name to each graphic element as you make it. Here is what you need to know when you create a graphic in Illustrator:

• Layers and Layers Groups names are used as IDs for SVG groups

• Symbols names are used as IDs for SVG symbols

• Graphic Styles names are used as CSS classes

In the images below, you can see in action how names from an Illustrator file reflect to the exported SVG.

e shapes in an SVG drawing are described with coordinate points. More points means larger file size and harder editing and maintaining. To solve this issues, you need to use the fewest possible number of points to create the shapes. This can be achieved in several ways.

• Use simple shape elements instead of paths, when it’s possible. Using simple elements like line, rect, circle, etc. have some significant advantages. They are much more readable. They produce smaller file sizes and less code, which make them easier for maintain and edit. You can control them a lot easier with their direct attributes such as x, y, cx, cy, instead of point coordinates as it is with paths.

In the image below, you can see one and the same shape defined as a shape and as a path. It’s obvious that the shape is much easier for edit.

m>. A path is just an array of coordinate points. To simplify a path means to cut out some of its points, which will lead to less path data and smaller file size. To do so you can use Object > Path > Simplify… command or Warp Tool. In both cases the main point is to reduce the path’s points maximally without loosing the quality of visual appearance.

In the images below you can see how simplifying process reduces path’s points from 32 to 23—which is about 25%—and how this reflects to the path’s data. Its length is decreased while the visual quality still remains at a good level.

and easily editable. This is great, but to keep it looking the way you designed on the web you need to be sure that the end user has the correct fonts. You can use only common fonts—which limits your creativity—or provide web fonts.

If precise text rendering is more important than editability—for example, in a logo—you can convert it into paths by using Type > Create Outlines command or by setting this option in the export panel as you’ll see later on.

Bear in mind that when convert to paths a lot of text the file size can increase drastically.

Continue reading %Crash Course: Optimizing and Exporting SVGs in Adobe Illustrator%

by Alex Walker via SitePoint

Android Things: Creating a Cloud-Connected Doorman

SVG 101: What is SVG? (and what is it actually good for?)

Though it was conceived back in the late 1990's, SVG is, in many ways, the 'ugly duckling' file format that grew up to become a swan. Poorly supported and mostly ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it.

It turned out that SVG was the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.

So, What Is SVG and Why Should You Use It?

SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.

At their heart, SVG documents are plain text files describing lines, curves, shapes, colors, and text. As they are human-readable and easily understood and modified, this code can be manipulated via CSS or JavaScript. This makes SVG much more flexible and versatile than any PNG, GIF or JPG.

SVG is an W3C standard, which means it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it seems likely SVG will continue to be the de-facto standard for vector graphics in the browser.

The real value of SVG is it solves many of the most vexing problems in modern web development. Let’s see what they are.

• Scalability and Responsiveness

  Behind the scene, SVG uses numbers and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. After all, the instructions for tracing a circle on a sketchpad or on the sky essentially the same.

  With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals and to be sure that they will look clear and crisp at any size.

  In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which causes them to pixelate when they are scaled. Although various responsive image techniques have proved valuable for pixel graphics, they will never be able to truly compete with SVG’s ability to scale infinitely.

• Programmability and Interactivity

  SVG is fully editable and scriptable. All kinds of animations and interactions can be added to a drawing via CSS and/or JavaScript.

• Accessibility

  SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. By contrast, a chart

• Performance

  One of the most important aspects impacting web performance is the size of the used files on a web page. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.

Common Use Cases and Browser Support

SVG has an avalanche of practical use cases. Let’s explore the most significant of them.

• Plain Illustrations and Diagrams

  Any traditional drawing that may have been produced with pens and pencils should translate perfectly into the SVG format.

• Logos and Icons

  Logos and icons often share the same need to be clear and sharp at any size – from button to billboard – making them an ideal candidate for SVG. SVG icons are more accessible and are much easier to position. For more detail, see Inline SVG vs Icon Fonts.

• Animations

  You can create appealing animations, and even special kinds of animation, including SVG line drawings. SVG can interact with CSS animation, as well as its own built-in SMIL animation ability.

• Interactivity (Charts, Graphs, Infographics, Maps)

  SVG can be used to plot data and update it dynamically based on user actions or some events – Interactive SVG Infographic, SVG Interactive Roadtrip Map.

• Special Effects

  Many live effects can be achieved by using SVG, including shape morphing or different gooey effects

• Building Interfaces and Applications

  SVG enables you can make challenging interfaces and incorporate it with HTML5, web-based applications, and rich Internet applications (RIAs).

• And many more…

Continue reading %SVG 101: What is SVG? (and what is it actually good for?)%

by Ivaylo Gerchev via SitePoint

3 Things That Make Go Different

Go is a special language. It is very refreshing in its approach to programming and the principles it promotes. It helps that some of the language inventors were early C pioneers. The overall feeling of Go is 21st-century C. 

In this tutorial, you'll learn about three of the features that make Go unique: its simplicity, the concurrency model via goroutines, and the error handling mechanism.

1. Simplicity

Many successful modern languages like Scala and Rust are very rich and provide advanced type systems and memory management systems. Those languages took the mainstream languages of their time like C++, Java and C# and added or improved capabilities. Go took a different route and eliminated a lot of features and capabilities. 

No Generics

Generics or templates are a mainstay of many programming languages. They often add complexity, and the error messages associated with generics can sometimes be obscure. Go designers decided to just skip it. 

This is arguably the most controversial design decision of Go. Personally, I find a lot of value in generics and believe that it can be done properly (see C# for a great example of generics done right). Hopefully, generics will be incorporated into Go in the future. 

No Exceptions

Golang's error handling relies on explicit status codes. To separate status from the actual result of a function, Go supports multiple return values from a function. This is pretty unusual. I'll cover it in much more detail later, but here is a quick example:

package main

import (
  "fmt"
  "errors"
)

func div(a, b float64) (float64, error) {
  if b == 0 {
    return 0, errors.New(fmt.Sprintf("Can't divide %f by zero", a))
  }
  return a / b, nil  
}


func main() {
  result, err := div(8, 4)
  if err != nil {
    fmt.Println("Oh-oh, something went wrong. " + err.Error())
  } else {
    fmt.Println(result)
  }
  
  result, err = div(5, 0)
  if err != nil {
    fmt.Println("Oh-oh, something iswrong. "+err.Error())
  } else {
    fmt.Println(result)
  }
}

2
Oh-oh, something is wrong. Can't divide 5.000000 by zero

Single Executable

Go has no separate runtime library. It generates a single executable, which you can deploy just by copying (a.k.a. XCOPY deployment). This is as simple as it gets. No need to worry about dependencies or version mismatches. It is also a great boon for container-based deployments (Docker, Kubernetes and friends). The single standalone executable makes for very simple Dockerfiles.   

No Dynamic Libraries

OK. This just changed recently in Go 1.8. You can now actually load dynamic libraries through the plugin package. But, since this capability wasn't introduced from the get go, I still consider it an extension for special situations. The spirit of Go is still a statically compiled executable. It is also available on Linux only.

2. Goroutines

Goroutines are probably the most attractive aspect of Go from a practical standpoint. Goroutines let you harness the power of multicore machines in a very user-friendly way. It is based on solid theoretical foundations, and the syntax to support it is very pleasant.

CSP

The foundation of Go's concurrency model is C. A. R. Hoare's Communicating Sequential Processes. The idea is to avoid synchronization over shared memory between multiple threads of execution, which is error-prone and labor-intensive. Instead, communicate through channels that avoid contention.

Invoke a Function as a Goroutine

Any function can be invoked as a goroutine by calling it via the go keyword. Consider first the following linear program. The foo() function sleeps for several seconds and prints how many seconds it slept. In this version, each call to foo() blocks before the next call.

package main

import (
  "fmt"
  "time"
)

func foo(d time.Duration) {
  d *= 1000000000
  time.Sleep(d)
  fmt.Println(d)
}


func main() {
  foo(3)
  foo(2)
  foo(1)
  foo(4)
}

The output follows the order of calls in the code:

3s
2s
1s
4s

Now, I'll make a slight change and add the keyword "go" before the first three invocations:

package main

import (
  "fmt"
  //"errors"
  "time"
)

func foo(d time.Duration) {
  d *= 1000000000
  time.Sleep(d)
  fmt.Println(d)
}


func main() {
  go foo(3)
  go foo(2)
  go foo(1)
  foo(4)
}

The output is different now. The 1 second call finished first and printed "1s", followed by "2s" and "3s". 

1s
2s
3s
4s

Note that the 4 second call is not a goroutine. This is by design, so the program waits and lets the goroutines finish. Without it, the program will immediately complete after launching the goroutines. There are various ways besides sleeping to wait for a goroutine to finish.

Synchronize Goroutines

Another way to wait for goroutines to finish is to use sync groups. You declare a wait group object and pass it to each goroutine, which is responsible for calling its Done() method when it's done. Then, you wait for the sync group. Here is the code that adapts the previous example to use a wait group.

package main

import (
  "fmt"
  "sync"
  "time"
)

func foo(d time.Duration, wg *sync.WaitGroup) {
  d *= 1000000000
  time.Sleep(d)
  fmt.Println(d)
  wg.Done()
}

func main() {
  var wg sync.WaitGroup
  wg.Add(3)
  go foo(3, &wg)
  go foo(2, &wg)
  go foo(1, &wg)
  wg.Wait()
}

Channels

Channels let goroutines (and your main program) exchange information. You can create a channel and pass it to a goroutine. The creator can write to the channel, and the goroutine can read from the channel. 

The opposite direction works too. Go also provides sweet syntax for channels with arrows to indicate the flow of information. Here is yet another adaptation of our program, in which the goroutines receive a channel they write to when they are done, and the main program waits to receive messages from all goroutines before terminating.

package main

import (
  "fmt"
  "time"
)

func foo(d time.Duration, c chan int) {
  d *= 1000000000
  time.Sleep(d)
  fmt.Println(d)
  c <- 1
}

func main() {
  c := make(chan int)
  go foo(3, c)
  go foo(2, c)
  go foo(1, c)
  <- c
  <- c
  <- c
}

Write a Goroutine

That's sort of a trick. Writing a goroutine is the same as writing any function. Check out the foo() function above, which is called in the same program as a goroutine as well as a regular function.

3. Error Handling

As I mentioned earlier, the error handling of Go is different. Functions can return multiple values, and by convention functions that can fail return an error object as their last return value. 

There is also a mechanism that resembles exceptions via the panic() and recover() functions, but it is best suited for special situations. Here is a typical error handling scenario where the bar() function returns an error, and the main() function checks if there was an error and prints it.

package main

import (
  "fmt"
  "errors"
)

func bar() error {
  return errors.New("something is wrong")

}

func main() {
  e := bar()
  if e != nil {
    fmt.Println(e.Error())
  }
}

Mandatory Checking

If you assign the error to a variable and don't check it, Go will get upset.

func main() {
  e := bar()
}

main.go:15: e declared and not used

There are ways around it. You can just not assign the error at all:

func main() {
  bar()
}

Or you can assign it to the underscore:

func main() {
  _ = bar()
}

Language Support

Errors are just values you can pass around freely. Go provides little error support by declaring the error interface that just requires a method named Error() that returns a string:

type error interface {
    Error() string
}

There is also the errors package that lets you create new error objects. The fmt package provides an Errorf() function to create formatted error objects. That's about it.

Interaction with Goroutines

You can't return errors (or any other object) from a goroutine. Goroutines can communicate errors to the outside world through some other medium. Passing an error channel to a goroutine is considered good practice. Goroutines can also write errors to log files or the database or call remote services.

Conclusion

Go has seen tremendous success and momentum over the last years. It is the go-to (see what I did there) language for modern distributed systems and databases. It got a lot of Python developers converted. 

A big part of it is undoubtedly due to Google's backing. But Go definitely stands on its own merits. Its approach to basic language design is very different from other contemporary programming languages. Give it a try. It's easy to pick up and fun to program in.  

by Gigi Sayfan via Envato Tuts+ Code

Parsley – Ultimate JavaScript Form Validation Library

Parsley is a javascript form validation library that helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.

by via jQuery-Plugins.net RSS Feed

How to Repurpose Videos Into Many Forms of Valuable Content

Want to create a wide range of content without a lot of effort? Is it easier for you to create videos than the written word? In this article, you’ll discover how to use video to produce up to eight different types of content for your business. #1: Plan Your Video Campaign Style and Outline an [...]

This post How to Repurpose Videos Into Many Forms of Valuable Content first appeared on .
- Your Guide to the Social Media Jungle

by Ann Smarty via

Is Freelancing Your Next UX Career Move?

I’ve been working in for UX for about a decade and freelanced on and off for about five years. Last year, I started consulting full time again, abandoning the 9-5 life and making my main source of employment a series of projects from different clients.

Since then, I’ve had countless conversations with other UX professionals who are considering moving to freelancing as their next career step.

They usually say they’re looking for freedom, more money, the ability to work on more interesting problems or learn new things – or even just the chance to work in their pyjamas regularly. Since I started consulting, I’ve expanded my focus into more strategy and product work across a wide variety of industries, and have met all kinds of interesting, smart colleagues.

While I wouldn’t change a thing about my situation, I’m always cautious about encouraging others to jump into the freelance world, because it’s definitely not for everyone. Here are some things I’ve learned along the way to consider before you quit your day job.

Freelancing pros and cons

Yes, it’s true that I spend most days in yoga pants, travel frequently, and work on some pretty cool projects. But consulting isn’t all sunshine and rainbows. There are many things that are great about consulting, some things that aren’t so great, and some things that just depend on the day.

Freelancing pro: setting up your own home office. Photo by Vadim Sherbakov on Unsplash.

 

Schedule: One of the things I love most about consulting is being in total control of my schedule. There’s no expectation that I’m at my desk from 9 am to 5 pm. Sometimes I get in a zone and finish an entire report in one very long day and take the next morning off to let ideas percolate. Of course I have meetings and deadlines, but I can usually finagle things to work well for my clients and myself.

On the flip side, juggling your schedule can be difficult. I’m quite disciplined about getting things done, but I’ve never quite figured out a way to create a consistent schedule. Sometimes I’ve had priority work on different projects collide at the same time or I’ve said yes to a few too many things and ended up working crazy hours to get everything done. Such is a consultant’s life.

Money: I absolutely find that I make more money freelancing than when I worked in-house, even in leadership roles. I’m still experimenting with how I bill, but I tend to use value-based pricing for entire projects rather than charge hourly. I often ask clients to pay me 50% of the total upfront and the rest upon project completion, which can make managing money tricky, especially when you’re used to a consistent paycheck.

You also have to know that you’ll never be able to collect money as though you’re billing 40 hours a week, every week. You have to account for supplies, tool costs, benefits, and set aside time for administrative tasks like sending invoices, business development, and, of course, downtime. No one gives you sick time or vacation days when you freelance.

Inevitably, I’ve also run into time periods where I don’t have anything billable booked. An open schedule can be scary, so I use this time to do things like reach out to colleagues or potential clients, write articles, research new tools, try to learn something new, or catch up on administrative work. One of the benefits of this downtime is the space to learn, exploring the vast array of available online courses or just experimenting with a new method or tool.

Work environment: I mostly work from home, which means I wear what I like, can pet my dog throughout the day, don’t contend with traffic, and for better or worse, have all day access to my kitchen. All great, but it also means that sometimes the only person I see in the flesh each day is my husband.

I have to make an extra concerted effort to hang out with colleagues, so I’ve become more active in my local meetups and groups (shout out to Ladies that UX Durham – love yall!) I also found I need to be more social during the week, even if that means going to a fitness class instead of biking solo or talking on the phone while I shop.

What services will you provide?

I’ve been focused on research and strategy for most of my career. I won’t rehash the “Should I be a unicorn?” or “Do designers need to code?” debates, but I’ll admit that when I first starting freelancing, I was worried I wasn’t going to be able to find enough work without doing visual work. Turns out, I was totally wrong. Phew!

Don’t worry, you don’t need to be a unicorn to be a freelance UXer.

You absolutely don’t need to be a unicorn or try to tackle projects that aren’t your speciality. But it helps to have a broad set of experience and at least one area of deep expertise you can market and use to define your services. You can match what you’re good at and what you like to define the kind of projects you target, the projects you’re OK with taking, and what you will certainly turn down.

Clearly defining your services and interests are important because it tells other people what to turn to you for. if I know someone has great interaction design skills and tonnes of experience with financial products, I’ll suggest them anytime I see a project like that. If someone tells me they’ll do anything that comes their way, they probably won’t come to mind for any projects I know about.

How will you find clients?

This is a question that I get asked time after time, and the answer is incredibly simple in concept but hard in practice: treat your clients and colleagues as you would users and provide them with a good experience working with you.

More specifically, you have to do good work and other people have to be willing to talk about it. This can either mean that your clients are pleased with your work and will re-hire you or tell other potential clients, or that your peers in UX like your work and can refer you when they need help or can’t take something on. It really is true that a huge amount of success in consulting is based on networking and who you know, but that only works to your advantage if the people you know have had a good experience working with you. Right now, every single one of my clients is someone I’ve previously worked with or have gotten a good reference.

This is where, once again, it helps to have a clearly defined, slightly unique set of skills or interests. There are tonnes of researchers and tonnes of designers, but if you’re known as a researcher who loves qualitative work and medical products, people will think of you whenever they come across that kind of project. Just be sure that you don’t define yourself too narrowly.

You can also use job boards to identify potential projects or try recruiting agencies, but I haven’t found either as fruitful as having my name passed on from a previous contact. More on finding freelance UX work here.

Are you really suited for all that?

Even if all the potential pros sound amazing to you and you have the skills and network to pull off freelancing, take a moment to reflect on your personality and soft skills.

Are you detailed, organised, and willing to juggle many different client requests and manage your own schedule? Are you a natural risk-taker who can cope well with slow periods or lack of viable work? Are you assertive enough to negotiate terms for yourself? Do you mind working by yourself a lot?

There’s a lot to think about before leaving the security of a full-time job. I love freelancing, but it’s worth carefully considering the pros and cons and your skillset and personality before taking the leap. Best wishes for whichever path you choose! 

Do you have experience or tips on freelancing for UX professionals? Leave a comment on the blog or in the forums! 

The post Is Freelancing Your Next UX Career Move? appeared first on UX Mastery.

by Amanda Stockwell via UX Mastery