Author Archives: Adi Purdila

Sass to CSS: How to Preserve Whitespace on Compile

Ever wanted to keep the visual structure of your Sass files, when you compile to CSS, without losing any of the whitespace? In this quick tip I’m going to show you how!

Watch Quick Tip

 

This quick tip is for those of you who need to compile Sass to an “expanded” form. If you compile to “compressed” or “minified” then the whole question of there being whitespace is irrelevant.

The Problem

Imagine you have several Sass partials which are formatted like this, including the empty line breaks at the bottom:

Compiling them under normal circumstances would give you something like:

But let’s say you actually want the following:

The Solution

We’re going to solve things by using a Grunt plugin called grunt-replace. For details on how to get up and running with Grunt, take a look at the following resources:

We load grunt-replace, along with some other dependencies, in our package.json file as shown in the following snippet:

Then, in our grunt.js file we have to implement the task:

Match

We apply the replace task after we’ve compiled our Sass file (check out the source files for more details).

Notice the patterns option, which shows the following:

This instructs Grunt to go through the compiled file, find instances of /**/ and replace them each with an empty string. Now all we need to do is go through our Sass partials, place these /**/ comments wherever we actually want whitespace, and let Grunt do the rest:

Conclusion

Grunt-replace is a really useful task for finding common strings and replacing them with something else, whenever your run Grunt. In this case it’s the perfect tool to prevent whitespace from being stripped out of our compiled Sass. What else would you use it for?

Useful Resources


Source: Webdesign Tuts+

Visual Studio Code: My New Favorite Code Editor

In this video I’m going to introduce you to my new favorite code editor: Visual Studio Code. Visual Studio is a Microsoft product, which may come as a surprise to many of you, but put your preconceptions aside for a moment and join me as I show you around.

Visual Studio Code

 

Over the years I’ve used a range of different code editors; TextMate, Coda, Sublime Text, Atom, and each one has had its pros and cons. Visual Studio Code, however, is absolutely my favorite so far, so let’s take a look at some of its features.

Start by downloading the version for your system (Windows, Mac OS, Linux) at code.visualstudio.com (it’s free too).

UI

One of the reasons I like Visual Studio Code so much is its interface; it’s really simple.

It has a couple of sidebars, which can be positioned left or right according to your preference. The first gives you some icons to switch between panels. Choose from Explorer, Search, Git, Debug, and Extensions. Go to View to change the type of display (full screen, zen mode etc.)

Hovering over folders in the Explorer gives us a couple of options: New File, New Folder, Refresh, and Collapse All. Right-clicking brings up a context menu.

Command Palette

Hit Shift-Command-P to bring up the Command Palette.

Within this panel you can search for whatever you like for quick and easy action; Git commands, changing themes, installing extensions–it can all be done via the Command Palette.

Similarly, Command-P will bring up the Go to file… palette.

Terminal

Holding Command-` will open the built-in terminal, which I love.

This opens the terminal directly in the root of your project, saving you from having to navigate. Clicking the + icon opens more terminal windows which can be switched between using the dropdown. This all adds up to a really useful feature, especially if you use compilers when coding.

Git

Another feature I’m a huge fan of is the Git integration. Changes you make in your files are highlighted in various places so you know exactly what’s going on:

In the figure above you can see the sidebar notification telling me of an uncommitted change, the change listed in the Git panel, and a line highlight to show me where the change is in the file itself.

VSC will also show version comparisons side by side, just for extra clarity.

Other standard Git commands such as sync, pull, and so on, are available from the Git panel.

Emmet (Zen Coding)

Great news: Emmet is already built into VSC. No setup or configuration is required, you can just start using it (with Tab being the predefined hotkey to trigger your snippets) as soon as you open the editor for the first time.

Multiple Cursors

When you highlight a piece of code in your file, VSC will automatically highlight all other occurrences of that string. You can then hit Command-D to add another cursor to the next instance, or Shift-Command-L to add a cursor to all instances. Mass-editing, easily.

Settings

The Settings page in VSC is very intuitive. Like Sublime Text, settings are stored in a file (JSON in this case) which allows you to browse all the defaults. By hitting the edit icon next to each setting, you’ll copy it to a custom file where you can make changes:

Hit Save and see your changes take immediate effect.

IntelliSense

IntelliSense is a feature within VSC which I was very keen to try out as soon as I first opened the editor. It’s a super-charged auto-completion, syntax-highlighting assistant and goes a little further than you would expect this sort of feature to go.

Hovering over CSS selectors will give you an example of how you might use the corresponding HTML (very useful for beginners):

Hovering over the properties reveals documentation about what they do, and color values are prepended with little swatches to show you how they appear on screen. Code suggestions when you’re typing are extremely thorough too.

Extensions

Code > Preferences > Color Theme will open up (you guessed it) the color theme palette. Scroll through the examples and you’ll see the UI change accordingly. Hit Enter to make those changes permanent.

Beyond the default themes, there’s also a huge marketplace of other (currently free) examples available, plus extensions of all kinds to play with.

Conclusion

That just about wraps up some of my favorite features in Visual Studio Code, suffice it to say there are many, many more features available for discussion. In terms of my experience using VSC thus far, I can only say it’s been positive. Previously I was using Atom, and I don’t regret making the switch one bit. Of course, you may disagree with me, but in my personal opinion, you won’t go far wrong downloading and taking this code editor for a spin.

Useful Links


Source: Webdesign Tuts+

Sketch in 60 Seconds: Resizing Element Groups

If you’ve ever selected a group of objects in Sketch, then resized the whole group, you’ll be used to the fact that each object within it is stretched and moved proportionally. Now, with Sketch’s Resizing option, we can specify how we want each object to behave. Let’s find out how in this sixty second video!

Resizing

 

Look at this group of objects, for example. Here we select the group, ready for stretching:

Then when we stretch, each layer within the group distorts equally:

However, by selecting each object within the group individually, we can use the Resizing dropdown to specify how they’ll behave when the group is resized.

Four Resizing Options

The options are as follows:

  • Stretch: this is the default value. When the group is scaled, the object alters its size and position proportionately.
  • Pin to corner: this option identifies which of the four corners of the group the object is closest to, then pins it to that corner whilst the group is resized. It doesn’t alter the size of the object, unless the group becomes smaller than the object itself, in which case it shrinks accordingly.
  • Resize object: in this situation, the object resizes, but its position remains unchanged.
  • Float in place: the last of the four options, this moves the position of the object proportionately, but leaves its scale unchanged.

Conclusion

These options are all super-useful, particularly if you’re creating responsive versions of UI designs. Let us know how you use them in the comments!


Source: Webdesign Tuts+

Envato Market in 60 Seconds: Author Ratings

In this super-quick video I’ll introduce you to Envato Market’s author ratings. Author ratings are important because they communicate the quality of your items, whilst serving as a metric of customer satisfaction.

Author Ratings

 

You can find your author rating on the right side of your profile page–for more details open the Reviews tab. Here you’ll find reviews for all your items, including detailed information about which buyers left each review and when. You can choose to leave replies if you feel they’re needed.

author rating
United Themes’ author rating, visible on profile page

In addition to the general ratings, individual items can also be rated. To see an item’s rating, visit its item page where you’ll see the Item Rating box in the sidebar. Here you’ll also see a more information toggle to give you a rating breakdown.

item rating
Item rating for Avada theme

Opening the Reviews tab (which is only visible to the item author) from this point will give you all the ratings for that specific item.

Useful Links


Source: Webdesign Tuts+

How to Design an Icon Using Boolean Operations in Sketch

Sketch’s “boolean operations” allow us to create complex paths by combining existing shapes. Let’s learn how to make the most of them by designing an icon in this screencast tutorial.

Watch Screencast

 

What Are Boolean Operations?

“Boolean”, in terms of computer programming, is a data type which can be either “true” or “false”. In terms of graphics applications like Sketch, we use “boolean” to describe how shapes are combined, using values such as “and”, “or”, “not” etc.

You’ll sometimes hear boolean operations referred to as “Pathfinder” tools, and the options available are: 

  • Union: Where the result is the sum of both paths’ areas.
  • Subtract: Where the area of the top path is removed from the one underneath.
  • Intersect: Which leaves the area where the original shapes overlap.
  • Difference: Effectively the opposite of “intersect”, leaving the parts where the original paths don’t overlap.

Using Boolean Operations

Creating complex shapes is something you’ll inevitably come across in icon design, so let’s take a look at how boolean tools can help us. 

For example, in trying to recreate this anchor icon, we might begin with two circle shapes, the uppermost of which we’ll subtract from the lower.

After some more subtraction, we’ll add some triangles to the end of our anchor’s base, using the union operation to combine all three shapes into one.

Editing

You may have heard the term “non-destructive” design, which refers to a way of working in graphics applications which doesn’t destroy vital information as you go along. Here, for example, you might think we’d have a problem if we wanted to make our triangles larger, but thanks to Sketch’s non-destructive techniques we haven’t burned our bridges.

Each object within this Combined Shape is still accessible as its own layer, so isolating and editing the triangles is no problem:

Ultimately, when your shapes are all created, combined, subtracted, intersected, whatever you need to do, you can click Flatten to remove isolating capabilities. Much like Adobe Illustrator’s Expand option, this will leave you with single complex paths, which might be more appropriate for distributing your icon.

Conclusion

Sketch’s four boolean operations allow us to build complex paths by combining shapes in different ways. As we demonstrated, they’re very useful for icon design. Use them today!

Useful Links


Source: Webdesign Tuts+

2 Quick Methods for Creating Pie Charts in Sketch

In this video tutorial I’ll show you how to design pie charts using Sketch. You can create pie charts manually using shapes, masks, and the pen tool, however I’m going to show you two approaches which are far quicker and more precise.

Watch Screencast

 

Method #1

This is the easiest approach, and involves the use of a plugin. Sketchy Pies was created by Aby Nimbalkar and creates pie charts from your circle layers.

Begin by creating a circle. Then, with it selected, go to Plugins > Sketchy Pies > Convert to Pie Chart. You’ll then see a prompt where you can enter a comma-separated list of color hex codes. Add as many as you like, then click OK; your pie is ready!

These pie sections are cleverly constructed using borders. You can edit each one by selecting them, then changing the border properties. The border color will change the section color, and you can alter the dash measurement to change the size of the section.

You can also specify the section sizes when you first create the pie. This is done by appending each color with a value, like percentages for example: #444444:20%,#555555:80% or decimal values like #444444:.2,#555555:.8.

Method #2

Creating pie charts with angular gradients is a little more involved, but that’s what we’re going to do now! Begin with a circle object, then go to Angular Fill in the properties sidebar. Add two color stops for every section you need for the pie chart:

You can position the color stops along the gradient precisely, using the number keys on your keyboard. Hitting 2, while your color stop is selected, will position it exactly 20% along the gradient. The start of each new section will have to be positioned exactly where the end of the previous section is.

Note: I’m using Sketch version 41.2, and you’ll notice that where the sections join there’s a jagged line. This hasn’t always been the case, so I’m pretty sure it’s a Sketch bug. Let me know if you use a different version and see better results!


Source: Webdesign Tuts+

3 Methods for Automatic Browser Reloading

In this screencast tutorial you’ll learn about browser reloading–specifically automatic reloading–and we’ll consider three different methods for doing so. Let’s begin!

Watch Screencast

 

Let’s consider a typical front-end workflow: you have your code editor, perhaps you’re writing some HTML, then you have CSS which might involve Sass, and you have your browser for testing. Each time you make a change to your code you go back to your browser, hit refresh, and see your changes take effect.

It may seem like a quick procedure, but add this refreshing action up over time and you’ll find it quite wasteful. It can certainly be improved. Let’s look at three tools which can take care of the whole refresh process for you, automatically.

LiveReload

LiveReload has been around for quite a while, and it’s a great tool. It comes with apps for Mac OS and Windows, and costs (at time of writing) $9.99.

Get things going by inserting a JavaScript snippet in the files you’re working on, or use it in combination with the browser extension. If you’re using a browser extension, you may need to enter the extension settings to ensure that allow access to files is turned on.

Useful Links

Grunt Watch

If you’re comfortable using the command line I highly recommend taking a look at this option. Grunt is a JavaScript-based task runner, and you can use it to automate many of the tasks you’d normally take care of manually–including browser refreshing.

We’re going to use the Grunt Watch plugin (actually named ”grunt-contrib-watch“) which you’ll need to load via NPM.

The watch task within our gruntfile.js includes the livereload: true option, and watches all files in my project.

Again, I need the LiveReload extension in my browser to be turned on, and everything works just like before, with the added benefit of being able to run additional tasks.

Grunt Resources

Browsersync

Method number three, which is rapidly becoming my favorite, is Browsersync. Browsersync is so much more than just the utility for reloading a web page; it also allows you to perform synchronized browser testing.

To get things up and running you’ll need Node.js, so begin by installing that. For details on how to get that going, check out The Command Line for Web Design: Taming 3rd Party Packages. With Node installed, install Browsersync with the following npm (Node Package Manager) command:

To use BrowserSync we need to use another command, and this will change depending on exactly what we want to do. For example, this command will setup the static server environment, and suggest that Browsersync watches all files to refresh:

For more details on the various commands you can use, check out the documentation.

Useful Links

Conclusion

That’s it! I hope this tutorial has convinced you to stop wasting time and try at least one of these browser refresh methods. If you have any other methods you prefer, let us know in the comments!


Source: Webdesign Tuts+

Envato Market in 60 Seconds: Becoming an Affiliate

Through Envato’s affiliate program you can earn passive income by referring new users to any Envato Market website. Here’s a sixty second introduction explaining how to get involved–and why you should!

Become an Envato Affiliate

 

To begin, you need an affiliate code. Login to any one of the Envato marketplaces and click on Affiliates in the menu. A link to share will be generated for you, though you can use whichever marketplace URL you like as long as you append ?ref=your_username.

How Much Will I Earn?

If someone clicks your referral link, then signs up for an Envato account and purchases an item (or deposits money) you will receive 30% of that user’s first deposit or purchase.

This is a great way of earning some extra passive income, especially if you’re already an author or a buyer with Envato, and since the affiliate program pays out over $3M per year I’d say it’s worth getting involved! 

One or Two More Things

There are regular contests held for the most productive affiliates, and you can also earn more through our Envato Studio affiliate program

Note: all URLs prepended with “go” (for example: https://go.themeforest.net/email-design/) will not count towards affiliate earnings.

Useful Links


Source: Webdesign Tuts+

Sketch Mirror in 60 Seconds

Sketch has a great feature called “Mirror” which allows you to preview, real-time, your work on an iPhone, iPad, or a browser. Let’s take a look at its features in sixty seconds!

A Bit More Detail

Learn more about Sketch on Envato Tuts+

60 seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ web design. We’re aiming to introduce a range of subjects, all in 60 seconds–just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you’d like to see explained in 60 seconds!

Subtitles/CC

Here you’ll find the content of the “captions.sbv” file, which we can use to add subtitles to the screencast. Turn subtitles on by clicking the Subtitles/CC button on the player–click the settings gear icon to select the language:

0:00:00.000,0:00:03.030
Sketch has a great feature called “Mirror”.

0:00:03.030,0:00:07.919
It allows you to get a real-time preview
of your work on an iPhone, iPad or a

0:00:07.919,0:00:13.799
browser. The iOS app is free–download it
from the app store, open it and Sketch

0:00:13.799,0:00:18.270
will show your device in the drop-down.
Click your device name to connect and

0:00:18.270,0:00:19.080
you’re done.

0:00:19.080,0:00:23.519
Sketch also generates an address that’s
available in your local network so you

0:00:23.519,0:00:28.349
can preview your work in the browser. Now,
regardless of how many connections you

0:00:28.349,0:00:32.610
have every change you’ll make in your
document will be reflected in your

0:00:32.610,0:00:38.520
browser or your device. Mirror also supports
multiple artboards which can be accessed

0:00:38.520,0:00:44.190
by swiping on your device or using the
navigation buttons in the browser. This

0:00:44.190,0:00:48.960
feature has so many great applications;
you can share your artboards live for

0:00:48.960,0:00:54.360
example with coworkers, or simply test
your design on a smartphone or tablet.

0:00:54.360,0:00:57.930
That was Sketch Mirror in 60 seconds.

0:00:57.930,0:00:59.280
I’m Adi Purdila, thanks for watching.


Source: Webdesign Tuts+

Atom in 60 Seconds: Working With Snippets

Snippets allow you to write a keyword and then expand it into a predefined piece of code. Here are some of my favorite Atom snippets, in sixty seconds!

Scope List From the Video

  • HTML: .text.html.basic
  • CSS: .source.css
  • Sass: .source.sass
  • JavaScript: .source.js
  • JSON: .source.json
  • PHP: .text.html.php
  • Java: .source.java
  • Ruby: .text.html.erb
  • Python: .source.python
  • Plain text (including markdown): .text.plain

Learn More Atom

There’s plenty more about Atom on Envato Tuts+, dig in!

60 seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ web design. We’re aiming to introduce a range of subjects, all in 60 seconds–just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you’d like to see explained in 60 seconds!

Subtitles/CC

Here you’ll find the content of the “captions.sbv” file, which we can use to add subtitles to the screencast. Turn subtitles on by clicking the Subtitles/CC button on the player–click the settings gear icon to select the language:

0:00:00.000,0:00:04.170
Snippets allow you to write a keyword
and then expand it into a predefined

0:00:04.170,0:00:10.170
piece of code. For example, here’s a
snippet that works in HTML files. And

0:00:10.170,0:00:15.690
here’s one that only works in JavaScript
files. Snippets can contain as much text

0:00:15.690,0:00:18.600
as you want and creating one is really
simple.

0:00:18.600,0:00:24.539
First go to Atom > Snippets. Then you need
to define your scope or the file types

0:00:24.539,0:00:28.619
in which the snippet will be available.
You can find a scope list in the video

0:00:28.619,0:00:29.580
notes.

0:00:29.580,0:00:34.739
let’s define our scope as HTML. Next you
give it a name and then a trigger

0:00:34.739,0:00:37.649
keyword followed by the snippet itself.

0:00:37.649,0:00:43.260
You can add placeholders as the dollar
sign, followed by a number. If the body

0:00:43.260,0:00:46.920
text has more than one line use triple
quotes for separation.

0:00:47.460,0:00:53.100
Once done save and type the keyword in
an HTML file. The snippet will expand and

0:00:53.100,0:00:56.520
you can tab through the placeholders you
created.

0:00:56.520,0:00:59.370
That’s it for snippets, I’m Adi Purdila,
thanks for watching.


Source: Webdesign Tuts+