Tag Archives: tutorial

Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)

What would life be without surprises? Pretty plain, wouldn’t you agree? Today, we are happy to announce a freebie that bubbles over with its friendly optimistic spirit, bound to sprinkle some unexpected sparks of delight into your projects: Ballicons 3. If that name rings a bell, well, it’s the third iteration of the previous Ballicons icon set created by the folks at Pixel Buddha.
This icon set covers a vibrant potpourri of subjects, 30 icons ranging from nature, travel and leisure motifs to tech and office.

Continue at source – 

Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)

A Detailed Introduction To Webpack

JavaScript module bundling has been around for a while. RequireJS had its first commits in 2009, then Browserify made its debut, and since then several other bundlers have spawned across the Internet.

A Detailed Introduction To Webpack

Among that group, webpack has jumped out as one of the best. If you’re not familiar with it, I hope this article will get you started with this powerful tool.

The post A Detailed Introduction To Webpack appeared first on Smashing Magazine.

Read the article: 

A Detailed Introduction To Webpack

How To Create Icons In Adobe XD

Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.

Creating Icons With Adobe XD

As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.

The post How To Create Icons In Adobe XD appeared first on Smashing Magazine.

View this article – 

How To Create Icons In Adobe XD

Thumbnail

Designers: Start Coding With uilang

Editor’s Note: Designers could learn how to code, and developers could learn how to design. Sometimes it might not be an option. In this article, the author makes a suggestion to designers without coding skills on how to start crafting code. You might want to take the suggested tool with a grain of salt (or not) but the idea might be worth looking into.

Designers have widely adopted HTML and CSS for a while now. They usually feel comfortable enough to implement their own designs, at least in a static form. However, they’re often intimidated by JavaScript — and rightly so! HTML and CSS are declarative and, I’d argue, closer to design than programming.

JavaScript, on the other hand, is “real” programming. This means you not only have to learn a whole new and complex syntax but also have to “learn how to think.” The barriers to entry are high and prevent many designers from taking the plunge. uilang1 tries to fix that.

This article will introduce you to uilang’s philosophy and syntax. We’ll start with a simple example to get you comfortable with the basics, before moving to something more exciting. At the end of this tutorial, you’ll (hopefully!) be able to code many typical interface widgets, such as popovers, tabs, overlays and much, much more.

The Bridge Between Designers And Developers

I strongly believe that designers should code the interfaces they design. They shouldn’t necessarily write production-ready code, but they should design the behaviors. Designers love these things. They could spend hours tweaking an animation delay or finding the right cubic-bezier curve. They usually just lack some technical skills to do so.

uilang tries to facilitate the communication between designers and developers by giving designers an extremely simple tool to prototype their interfaces. uilang reads like plain English, uses a one-line syntax declared right in the HTML and provides very few options in order to make its learning process and adoption as fast and easy as possible. We’ll cover the syntax in detail later, but here’s a sneak peek at it:

clicking on "button" toggles class "visible" on "div"

uilang is not exclusively a prototyping tool, though. It can safely be used on production websites to create, for example, tabs, photo galleries, popovers and more. Let’s see how it works!

Getting Started

uilang is based on a dead simple principle: manipulating classes on your elements. By just adding and removing classes when something is clicked, we can show, hide, transform and animate elements using CSS. This simple logic gives you endless possibilities. Let’s explore one of them by creating a simple notification banner like this:

See the Pen bNWaVz2 by Benjamin De Cock (@bdc3) on CodePen4.

We’ll start with the HTML markup, which is pretty straightforward:

<div id="notification">
  <p>You have 3 unread messages.</p>
  <button class="hide">Hide</button>
</div>

We’ll now use uilang to define a simple behavior: When the user clicks on an element that has a hide class, we’ll add a hidden class to the element that has a notification ID. The translation in actual uilang code looks almost the same as the explanation above:

clicking on ".hide" adds class "hidden" on "#notification"

This line of code should be written in a simple <code> element, right in the
HTML. uilang will automatically find the <code> element containing your
code and will ignore other <code> elements that you might have on the page.
Additionally, you’ll have to download and insert the uilang.js library5 (1 KB).

While both your <code> and <script> elements can
theoretically be inserted anywhere on the page, it’s recommended to place them at the very end of the document, just before the closing </body> tag:

<body>
  <!-- Your content -->

  <script src="uilang.js"></script>

  <code>
    <!-- Your uilang code -->
  </code>
</body>

By respecting that order, you’re making sure to reach the best rendering performance. Thereby, your final HTML markup for the notification banner will look like this:

<body>
  <div id="notification">
    <p>You have 3 unread messages.</p>
    <button class="hide">Hide</button>
  </div>

  <script src="uilang.js"></script>

  <code>
    clicking on ".hide" adds class "hidden" on "#notification"
  </code>
</body>

We’re almost done! Now that the behavior has been defined, we’ll rely on CSS to fade out that notification banner once the hidden class has been applied to it:

#notification 
  transition: .8s

#notification.hidden 
  opacity: 0

Congrats! You now know how to code! You might not realize it yet, but this simple logic will let you build a wide range of widgets and interactions. Let’s have a closer look at the options provided by the syntax.

Syntax

The syntax can be split into four parts:

clicking on ".hide"(1) adds(2) class "hidden"(3) on "#notification"(4)
  1. any CSS selector
  2. adds, removes or toggles
  3. any class name
  4. any CSS selector or the target keyword (which selects the clicked element)

That’s all you need to learn. Keep in mind that uilang is basically just HTML, so you can comment the code similarly:

<code>
  <!-- I'm a comment -->
  clicking on ".hide" adds class "hidden" on "#notification"

  <!-- I'm another comment -->
  clicking on "li a:first-child" toggles class "active" on "target"
</code>

Please note that uilang only supports click events. Hover effects can usually be achieved in CSS, and other events are simply beyond the scope of this language.

We’ve now covered the basics of uilang. It’s time to build a more advanced demo!

Apple-Like Explore Menu

We’ll create a collapsible, animated menu similar to the kind you can find on Apple’s website6. Check out the demo117 to see the result.

uilang demo: explore menu8
(See large version9)

HTML Markup

Nothing fancy, really, just a simple link to toggle the navigation, and the nav element containing our list of links:

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

Now, adding the toggling behavior with uilang will be extremely simple:

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

We’ll then use this open class in our style sheet to show and hide the nav. Just before we do that, let’s add a few things to complete our HTML markup: a meta tag for mobile users, the link to our style sheet and, obviously, the uilang.js library! The whole HTML might now look like this:

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Explore menu</title>
<link rel="stylesheet" href="style.css">

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

<script src="uilang.js"></script>

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

Note: For those wondering about the brevety of the code, keep in mind HTML5 considers as optional the <html>, <head> and <body> tags. Feel free to adopt a different style if you have another preference!

CSS: Where The Magic Happens

As always with uilang, the interesting parts of the code are in the style sheet. uilang’s role is exclusively to define the behaviors, not to execute them.

Let’s start by styling and positioning our elements, so that our navigation is ready to be manipulated with uilang. I won’t go into much detail — I assume you’re already comfortable with basic, standard CSS — so I’ve only commented some parts of the code. Please note that irrelevant style declarations, such as for fonts and colors, have been omitted for clarity.

body 
  background: #f3f3f3;


.explore 
  /* Make sure the Explore link stays above the nav */
  position: absolute;
  z-index: 1;


nav 
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);


nav ul 
  /* Allow mobile-friendly horizontal scrolling when the browser isn't wide enough */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Force the thumbs to display in a row */
  white-space: nowrap;
  padding: 80px 40px 40px;


nav li 
  display: inline-block;

Onto the interesting part: coding the toggling behavior! We’ll need two things:

  1. By default, the nav and the thumbs should be hidden. This means we need to initially slide up the nav and make the nav and images transparent.
  2. When the open class defined in our uilang code is applied to the nav, we need to reverse the default state: slide down the nav and fade in everything.

Step 1 is pretty easy: We’ll use translateY(-100%) to slide the nav up, opacity: 0; to hide the nav and images, and transition to animate these elements when the class is applied.

nav, nav li 
  opacity: 0;


nav 
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  transition: .4s;


nav li 
  transition: .3s;

This is not immediately related to uilang but, because uilang does rely on CSS for transitions and animations, we should probably remember a few important principles:

  • You can safely and smoothly animate only two properties: opacity and transform. Force yourself to stick with them.
  • When only the duration is specified in the transition shorthand property, all properties that might change in future will be animated and will use ease as their timing function.
  • Keep your animations fast! Animations are important because they help users to understand the flow between two states, but they should never get in the way. A good transition-duration is usually between 200 and 800 milliseconds.
  • While standard easing keywords are sometimes acceptable (such as with this demo), custom cubic-bezier curves are often preferable. Many tools enable you to find the right curve, such as Matthew Lein’s Ceaser10.
  • The examples in this tutorial use CSS transitions, but feel free to use CSS animations instead when needed! The principle is exactly the same, and keyframes might provide a finer level of control.

Now that our default state has been set up, we can go to step 2 and code the “open” state, which basically means reverting step 1 to the default values for the open class:

nav.open, nav.open li 
  opacity: 1;
  -webkit-transform: none;
  transform: none;


nav.open li 
  /* Wait for the nav to slide down a bit before starting the animation on the thumbs */
  transition-delay: .3s;

Boom! You now have a fully functional animated navigation menu. A few things are missing that would make it truly great, though, starting with the scale animation on the images. If you look closely at the demo117, you’ll notice that the images not only fade in when they appear but also zoom in a little. Let’s add that behavior by making them slightly smaller by default:

nav li 
  -webkit-transform: scale(.8);
  transform: scale(.8);

We’ve already defined that nav.open li will reverse to transform: none; and that all properties will animate, so there’s nothing more to add.

Good! We’re almost done, but one important thing is missing: changing the icon on the “Explore” link when the nav is open or closed. To do that, we’ll need to define a new rule in our uilang code. We’re currently toggling an open class on the navigation to show and hide it; we’ll need to do something similar for the link itself.

<code>
  clicking on ".explore" toggles class "close" on "target"
  clicking on ".explore" toggles class "open" on "nav"
</code>

Here, target represents the clicked element. In this case, you could have just reused .explore instead of target. However, that wouldn’t be the same if you had multiple “Explore” links on the same page (.explore matches any “Explore” link, whereas target selects only the clicked “Explore” link).

Back to the CSS. We’re going to use pseudo-elements to display our icons. .explore::before will represent our grid icon (visible when the navigation is closed), and .explore::after will display the cross when the navigation is open. Both will benefit from the same transition-duration.

.explore::before, .explore::after 
  content: "";
  position: absolute;
  left: 0;
  transition: .25s;


.explore::before 
  background: url(grid.svg);


.explore::after 
  background: url(close.svg);
  /* Hidden and scaled up by default */
  opacity: 0;
  -webkit-transform: scale(1.8);
  transform: scale(1.8);

The grid icon is already visible; the close icon is hidden but correctly positioned, ready to fade in as soon as “Explore” is clicked. We just have to reverse the default state when the close class defined in our uilang code is applied to .explore:

/* When the nav is open, hide and rotate the grid icon… */
.explore.close::before 
  opacity: 0;
  -webkit-transform: rotate(45deg) scale(.8);
  transform: rotate(45deg) scale(.8);


/* … and display the close icon */
.explore.close::after 
  opacity: 1;
  -webkit-transform: none;
  transform: none;

That’s it! We’ve achieved this pretty cool effect with just two lines of uilang and a few CSS declarations. Note that, while the uilang code might not be used in production by the developers you collaborate with, your CSS is production-ready. Most of the prototyping tools out there force you to build mockups outside of the actual HTML and CSS, which forces developers to reimplement your animations, delays, easings and so on. Details get lost all the time. With uilang, developers can just reuse your CSS and focus exclusively on reimplementing the logic in JavaScript.

Icing On The Cake

As a bonus, let’s end this tutorial by having some fun with CSS! The grid and close icons that we’re using on the “Explore” link are actually pretty simple, and using images for them (as we’re doing) would be a shame when we could just draw them in CSS. Let’s do this!

The grid icon is the most interesting one. While it might initially seem counterintuitive, we’re going to use gradients to draw it. The idea is that each of the nine squares will be drawn as a gradient from black to black. When you create a CSS gradient, you’re basically generating an image on the fly. This (background) image can then be sized and positioned anywhere.

12
(See large version13)

Here’s the translation in CSS (available on CodePen14):

.explore::before 
  width: 13px;
  height: 13px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 0 0, 50% 0, 100% 0,
                       0 50%, 50% 50%, 100% 50%,
                       0 100%, 50% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 3px 3px;

It’s verbose and arguably crazy, but keep in mind that, while we’re essentially doing it for fun, this technique comes with real advantages, the most important one being undoubtedly the HTTP request you save from not requesting a file.

The close icon is much simpler but still requires some tricks to make it look great. We’ll use a similar technique: drawing a gradient from black to black for each bar of the cross in order to form a plus sign, then rotating the plus to make it look like a cross. To prevent the lines from looking jagged because of the 45-degree rotation, we’ll scale up the icon a little using the transform property, which provides us with decent antialiasing.

.explore::after 
  width: 11px;
  height: 11px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
  -webkit-transform: rotate(45deg) scale(1.4);
  transform: rotate(45deg) scale(1.4);

Go Create!

CSS is powerful, performant yet remarkably easy to use. uilang wants to stay invisible in your workflow and act as a gateway to using CSS to code interactions. After all, CSS might be the best “user interface” for creating prototypes.

Resources

(ds, il, al)

Footnotes

  1. 1 http://uilang.com
  2. 2 ‘http://codepen.io/bdc/pen/bNWaVz/’
  3. 3 ‘http://codepen.io/bdc’
  4. 4 ‘http://codepen.io’
  5. 5 http://uilang.com/lib/production/uilang.js
  6. 6 http://apple.com
  7. 7 http://demos.uilang.com/explore-menu/
  8. 8 http://demos.uilang.com/explore-menu/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/01/demo-uilang-large-preview-opt.jpg
  10. 10 http://matthewlein.com/ceaser/
  11. 11 http://demos.uilang.com/explore-menu/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/01/grid-icon-info-large-preview-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/01/grid-icon-info-large-preview-opt.jpg
  14. 14 http://codepen.io/bdc/pen/emYpGJ
  15. 15 http://uilang.com/
  16. 16 https://github.com/bendc/uilang
  17. 17 https://medium.com/@bdc/the-educational-side-of-uilang-92d39da94c13
  18. 18 http://transpiler.uilang.com
  19. 19 https://medium.com/@zackcote_/sublime-text-snippet-for-uilang-efb05fbed0d

The post Designers: Start Coding With uilang appeared first on Smashing Magazine.

More here:  

Designers: Start Coding With uilang

An Introduction To Node.js And MongoDB

Node.js is a rapidly growing technology that has been overtaking the world of server-side programming with surprising speed. MongoDB is a technology that’s revolutionizing database usage. Together, the two tools are a potent combination, thanks to the fact that they both employ JavaScript and JSON.
At first glance, coming to grips with Node.js and MongoDB can seem both time-consuming and painful. Read on to learn how to wield these tools quickly and easily.

Source: 

An Introduction To Node.js And MongoDB

60 Astonishing Flat Icons For Free

Crafted with great attention to detail, today’s icon set is extremely easy to use and will most probably be the next ultimate resource for any of your design projects. This set of flat icons was thoroughly designed by the creative team at Roundicons and has been released exclusively for Smashing Magazine and its readers.
This freebie contains 60 icons that have been designed in both round and flat styles, and can be used for free without any restrictions and serve various design purposes.

View the original here: 

60 Astonishing Flat Icons For Free

How To Create A Tab Widget In WordPress

In this tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished.

View original:  

How To Create A Tab Widget In WordPress

Useful WordPress Tools, Themes And Plugins

If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, Facebook stream, and other social-media streams around the Web.
These resources have now been organized and consolidated for easy reference to help you get the most out of the world’s most popular publishing platform.

Read this article – 

Useful WordPress Tools, Themes And Plugins

Teach Them How To Hit The Ground Running And Faceplant At The Same Time?

A few days ago, a tutorial on how to Create A Christmas Wish List With PHP was published on Smashing Magazine’s Coding section that frustrated me. It frustrated me as it was incredibly easy to predict the comment reactions it caused. It also frustrated me as it was a classic example of a tutorial resulting in very happy readers who will go out and cause a lot of terrible things on the Web unless they understand that this was meant as a “beginner tutorial”.

Continue reading – 

Teach Them How To Hit The Ground Running And Faceplant At The Same Time?

How I Mixed Up Illustration: Combining Analog And Digital Techniques

In the digital age, don’t forget to use your digits! Your hands are the original digital devices — Lynda Barry People often ask how I arrived at a finished illustration. Honestly, it’s different every time, but it always starts with a hand-drawn sketch. Sometimes, I paint it completely by hand; sometimes I’ll scan in a pencil drawing. Many of my pieces are 100% analog that I’ll show only at shops or galleries.

Excerpt from: 

How I Mixed Up Illustration: Combining Analog And Digital Techniques