Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 15 2017

14:26

What Are List Comprehensions in Python?

 

"List comprehension" is a big name for a really simple concept. In the world of Python, a list comprehension is nothing more than a shorthand way to create a new list. 

In this short video from my course on Data Handling With Python, I'll show you how list comprehensions can cut your code from several lines down to a single one in many cases.

List comprehensions in Python

Watch the Full Course

If you've started learning Python, you probably have a good feel for the basics, but when you look around on the internet there are more things that you still don't understand. Maybe you've been hearing about "comprehensions". Or maybe you've seen the map or filter functions used and wonder exactly what they do. What about files? How do you read from them or write to them?

If you've ever wanted to go deeper with Python, then the full course, Data Handling With Python, is ideal for you. 

For starters, you'll learn about advanced use of commonly used data structures. Later on, I'll share some pointers with you about how to get data in and out of files and even store complex data structures in them.

12:00

Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items

An Angular application is made up of components. In an Angular application, a component consists of an HTML template and a component class. From the official docs:

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

In this tutorial, you'll learn how to get started with creating a grocery list manager using Angular.

Getting Started 

You'll need Node version > 6.9.x and Node Package Manager (npm) > 3.x.x. Once you have both, try to install the Angular CLI using npm.

After installing the Angular CLI, try to create a project using the same.

The above command will create the project structure. Navigate to the project directory and install the required dependencies.

To start the application web server, type the following command:

Once the application server has started, point your browser to http://localhost:4200/ and you will be able to view the default application.

Application Structure

Grocery List Manager Application Structure

The above figure shows the application structure for our grocery list manager. The src folder contains the source code for the default application. The app folder inside the src folder contains the TypeScript code. index.html inside the src folder is the main HTML file where the created Angular components are rendered.

Creating the Add Items View

By default, the application has an app-root component. Let's create a new component called app-grocery for creating our grocery manager app. Inside the app folder, create a file called app.grocery.ts.

Import the Component module from the angular-core.

You'll be using Bootstrap to design the component. Download and include the Bootstrap package from the official site. Keep the files in the src/assets folder.

Let's define the component inside the app.grocery.ts file. The component will have three properties: selector, template, and styleUrls. selector indicates the way in which the component will be used. template defines the HTML which will be rendered when the particular selector is used. styleUrls defines the URL of the styles used in the component.

Inside app.grocery.ts, once the component module has been imported, define the app-grocery component as shown:

As seen in the above code, the component uses a template called app.grocery.html. Create a file called app.grocery.html inside the src/app folder. Add the following code to the app.grocery.html file:

In the app.grocery.ts file, add the GroceryComponent class to export.

You need to import the newly created component inside the app.module.ts before you can use it. Import the GroceryComponent in the app.module.ts.

Declare and bootstrap the newly created Grocery component in the app.module.ts file.

Now you are all set to use the Grocery component inside the index.html page. Remove the default component from the index.html page and add the following HTML code:

Save the above changes and restart the server. Navigate the browser to http://localhost:4200/ and you will have the Grocery component displayed.

Grocery Component View

Adding the Items 

Once an item is entered in the input text box, you need to read the item and save it in a list. To read the input, you'll make use of ngModel, which will bind it to a variable. Add ngModel to the input text box.

Each time some text is entered in the input text box, the task variable gets updated accordingly. Define the task variable inside the GroceryComponent in the app.grocery.ts file. Add a variable called tasks to keep a collection of tasks entered.

On clicking the OK button, the task will be added to the tasks collection list that you have defined inside the GroceryComponent. Define an onClick method inside the GroceryComponent to handle the OK button click. Here is how it looks: 

Add the click event to the OK button as shown:

When the OK button is clicked, the new task is added to the tasks collection list. The task variable is also reset to clear the input text box.

Save the above changes and, on entering the task and clicking the OK button, the task is added to the tasks collection. To display the tasks collection, add a span inside app.grocery.html.

Enter the task in the input box and press the OK button. You will have the tasks variable displayed as JSON on the page.

Grocery Component With Tasks Info

Here is the complete app.grocery.ts file:

Displaying the Added Items

Now, since you have the added items in the tasks variable, you can use it to display the tasks. You'll make use of the NgFor directive to iterate the tasks collection and dynamically create the HTML for displaying the tasks. You'll be displaying the task inside the UL element and repeating the LI using the NgFor directive. Here is how it looks:

As seen in the above code, you iterate through the tasks variable and create the LI element and the span dynamically. Here is how the complete app.grocery.html template file looks:

Save the above changes and restart the server. Point your browser to http://localhost:4200/ and enter the task and press the OK button. Each added task will be displayed in the list below.

Grocery List Manager App

Wrapping It Up

In this Angular tutorial, you saw how to get started with creating a grocery list manager using Angular. You learnt how to create the view for the Grocery component, add items to the grocery list, and display the added items.

In the next part of this tutorial, you'll implement the features to mark the completed items, archive the completed items, and remove the added items. 

Source code from this tutorial is available on GitHub. Do let us know your suggestions in the comments below. 

09:07

10 Remedial Design Pointers for Developers

Here’s a situation which may be familiar to you: you’re a developer and you build a prototype to demonstrate something. It works just as you mean it to, but the looks of horror on your users’ faces tell you something is wrong–your demo looks like crap.

Let’s look some simple guidelines and tips to help your demos look as good as they should.

Relax

You may have heard the following: 

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” - Jared Spool

This is relevant to all designers, but it’s especially pertinent to you, as a developer. You’re building a demo; something which is solely intended to demonstrate something. Its users should be engrossed in whatever task you’re laying out before them, not reacting to the “design”.

Pointer #1: By trying to make a stylistic statement, there’s a high chance you’re actually moving further away from delivering a good demo. Keep it simple. Stick to making it work.

If something “doesn’t look right”, remove any visual details you may have added (such as box shadows, borders, effects) and go back to the drawing board.

Now we have that patronising word of warning out of the way, let’s concentrate on some more practical pointers!

Avoid a Messy Palette

Nothing is more instantaneously offensive to the eyes than poor colour choices. In actual fact, colour decisions should be addressed well into the UI design process, but it’s always tempting to make bold colour choices early on.

no clearly not No, clearly not what we’re after

If you were wireframing a UI, you’d begin as simply as possible; with rudimentary shapes, lines, and monochrome. Once the layout and relationships were settled upon, you’d add more detail, moving towards higher fidelity until you ultimately begin purposefully exploring colour. So then, some pointers:

Pointer #2: Consider going monochrome on your own demos. Stick to shades of grey (fifty?) until you’re ready to use colour to help clarify things.

Even if we do nothing else, this is an improvement

Pointer #3: As a rule of thumb, avoid fully saturated colours (ie: colours at full strength, with no added white tint). Particularly when viewed on an illuminated screen, they can be uncomfortable to look at when combined with one another.

  • Color Theory
    Why You Should Avoid Vibrating Color Combinations
    Eli Schiff

Pointer #4: The same is true of black and white. By avoiding the extremes, sticking to off-black and off-white, you’re less likely to give your users tired eyes.

Go even further and add a touch of colour to your blacks and greys. As Ian Storm Taylor said back in 2012:

“Shadows aren’t black”

Ian’s lessons from art school mirror my own–I remember my teacher challenging me to find a black dot in Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte.

detail from a sunday afternoon on the island of la grande jatte Spoiler: you won’t find one

Pointer #5: When adding colours to your monochrome design, do so one at a time. Each colour you add is an invitation for user distraction. We spoke briefly about avoiding high saturation, but there’s nothing to say you can’t use a range of saturations of one hue. That will give you the variety and depth you need, risk free.

  • Color Theory
    Color for Attention and Depth in 60 Seconds
    Kezz Bracey
  • Color Theory
    6 Beginner “Safety First” Color Guidelines for the Web
    Kezz Bracey


Don’t Overcomplicate Typography

If we’re talking demos and prototypes there’s really no need to go beyond using system fonts (see Pointer #1). Still, consider the following:

Pointer #6: You’re in safe hands with sans-serif (“without” serif). Serif typefaces are those which have the details where strokes terminate (some jargon in there for you).

These are serifs

Serifs can be useful for adding personality to a design, and they can often make a body of text easier to read. But they’re not traditionally used in UI design, especially at smaller sizes, as much of the time they display varied stroke weights.

Note: as screen resolutions increase, clarity improves, and this argument holds less weight.

Roboto  Noto Roboto & Noto

Google make use of the “humanist” Droid Sans in their Android interfaces, and more recently Roboto and Noto. Apple use San Francisco for their range of operating systems, and before that Neue Helvetica. Firefox OS uses Fira Sans. Notice the common theme here? All sans-serif.

Pointer #7: Avoid ambiguity. Character combinations such as O0, aeo, 8B, Il1, 5S, 2Z, 6b, and 9g are sometimes difficult to distinguish, depending on the chosen type. Test them; if you struggle to tell them apart then you’d be wise to choose a different typeface.

Fira Sans from Firefox OS is pretty darn clear Fira Sans (from Firefox OS) is pretty darn clear

Room to Breathe

Whitespace (functional space) serves the visual designer in many ways. It helps create a sense of balance, draws attention to necessary aspects of the design, reduces cognitive load for the user (I could go on). If your UI is cramped it will quickly make users feel uncomfortable and reduce their ability to process tasks effectively.

When dealing with a lot of information, it’s tempting to squeeze as much in as possible, but which of these two examples do you find easier on the eye?

cramped ui Ouch–that title is squashed up against the top of the page added space Added space for the table cells and around the whole thing

Pointer #8: Where breathing space is concerned “more” is almost always better. Add padding, add margins, boost line-heights, spread everything out.

Pointer #9: Make your spacing consistent. Use a standard unit as your base, adding space in increments of (for example) 10px. Consistency is the key to creating rhythm and harmony.

consistent grid Sans-serif type, monochrome with an accent colour, plenty of room, consistent spacing

Make Your Life Easier

There’s no shame in it; let frameworks like Bootstrap and Foundation do the hard work for you. They’re often criticised for making production websites look generic and unimaginative, but for prototypes they’re absolutely perfect, straight out of the box. 

All the decisions we’ve discussed so far have already been made for you: typography, colours, spacing, consistency, and for messy details like forms you can’t go wrong.

Pointer #10: Stand on the shoulders of others. Grab existing Bootstrap templates, Foundation templates, or Material Design Lite, or Skeleton, or Pure CSS, or UIKit, or whichever one of the million CSS frameworks you fancy! Don’t be afraid to add your own styles on top, bearing in mind all the points we’ve discussed so far.

From ZURBs building blocks From ZURB’s Building Blocks

These frameworks are all very comprehensive. Make sure you use all the pieces you need; you’ll likely run into problems if you cherry-pick just a few elements.

Conclusion

This wasn’t intended to be a design fundamentals article, but instead aims to help you smooth over any problems you’re having with your prototype designs. If you’re a developer–perhaps recording a course, or presenting a product to clients or your team–and you really want your demos to do their job, these pointers should get you on the right track. Let me know in the comments if you have any specific questions. Good luck!

08:00
Simbla 2017: Dynamic Pages Straight Out of the Website Builder
07:05

Free Guide to Using cPanel & WordPress​

Managed WordPress hosting is a great choice if you need a hosting solution that's optimized for WordPress. But it's only for WordPress.

What if you need more?

What if you need email hosting? What if you need to run other software alongside WordPress? What if you need more control than what managed WordPress hosting allows, but without the complexity of a VPS?

There's an easy solution: host everything in one place, and manage it all with the powerful cPanel dashboard.

You'll learn how in this free guide to cPanel & WordPress.

Direct Link to ArticlePermalink


Free Guide to Using cPanel & WordPress​ is a post from CSS-Tricks

06:48

Using Mixins in Vue.js

It's a common situation: you have two components that are pretty similar, they share the same basic functionality, but there's enough that's different about each of them that you come to a crossroads: do I split this component into two different components? Or do I keep one component, but create enough variance with props that I can alter each one?

Neither of these solutions is perfect: if you split it into two components, you run the risk of having to update it in two places if the functionality ever changes, defeating DRY premises. On the other hand, too many props can get really messy very quickly, and force the maintainer, even if it's yourself, to understand a lot of context in order to use it, which can slow you down.

Enter mixins. Mixins in Vue are useful for writing in a functional style because ultimately, functional programming is about making code understandable by reducing moving parts. (There's a famous quote by Michael Feather about this). [link] A mixin allows you to encapsulate one piece of functionality so that you can use it in different components throughout the application. If written correctly, they are pure- they don't modify or change things outside of the function's scope, so you will reliably always receive the same value with the same inputs on multiple executions. This can be really powerful.

Basic example

Let's say we have a couple of different components whose job it is to toggle a state boolean, a modal and a tooltip. These tooltips and modals don't have a lot in common except for that functionality: they don't look the same, they're not used the same, but the logic is similar.

//modal
const Modal = {
  el: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

//tooltip
const Tooltip = {
  el: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

We could extract the logic here and create something that can be reused:

const toggle = {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

const Modal = {
  template: '#modal',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

const Tooltip = {
  template: '#tooltip',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

See the Pen Mixin by Sarah Drasner (@sdras) on CodePen.

This example was intentionally kept small and simple for purposes of legibility- examples of mixins I've found useful in real life applications are included but not limited to: getting dimensions of the viewport and component, gathering specific mousemove events, and base elements of charts. Paul Pflugradt has a nice repo of Vue Mixins, but it's worth mentioning that they're written in coffeescript.

Usage

This Pen doesn't really show how we would set this up in a real application, so let's look at that next.

You can set up your directory structure any way that you like, but I like to create a mixin directory in order to stay organized. The file we'd create would have a .js extension (as opposed to .vue, like our other files), and we'd export an object for the mixin:

directory structure shows mixins in a folder in components directory

And then in Modal.vue we would now have access to it by importing the toggle like this:

import Child from './Child'
import { toggle } from './mixins/toggle'

export default {
  name: 'modal',
  mixins: [toggle],
  components: {
    appChild: Child
  }
}

It's important to understand that even though we're using an object and not a component, lifecycle methods are still available to us. We could hook into mounted() here and it would be applied to the component's lifecycle, which makes this way of working really flexible and powerful.

Merging

Looking at the last example, we can see that not only do we have our functionality, but also lifecycle hooks available to us from the mixin, so when applying it to a component with overlapping processes, ordering matters. By default, mixins will be applied first, and the component will be applied second so that we can override it as necessary. The component has the last say. This only really becomes important when there is a conflict and the component has to "decide" which one wins out, otherwise everything will be placed in an array to execute and the mixin will be pushed first, the component second.

//mixin
const hi = {
  mounted() {
    console.log('hello from mixin!')
  }
}

//vue instance or component
new Vue({
  el: '#app',
  mixins: [hi],
  mounted() {
    console.log('hello from Vue instance!')
  }
});

//Output in console
> hello from mixin!
> hello from Vue instance!

If the two conflict, we can see how the Vue instance or component will win:

//mixin
const hi = {
  methods: {
    sayHello: function() {
      console.log('hello from mixin!')
    }
  },
  mounted() {
    this.sayHello()
  }
}

//vue instance or component
new Vue({
  el: '#app',
  mixins: [hi],
  methods: {
    sayHello: function() {
      console.log('hello from Vue instance!')
    }
  },
  mounted() {
    this.sayHello()
  }
})

// Output in console
> hello from Vue instance!
> hello from Vue instance!

You may notice that we have two console.logs for the Vue instance string instead of one here- that's because the first function that was called wasn't destroyed, it was overridden. We're still calling both of the sayHello() functions here.

Global Mixins

When we use the term global in reference to mixins, we are not referring to being able to access them on every component, like we are with something like filters. We can already access our mixins in a component with mixins: [toggle].

Global mixins are literally applied to every single component. For this reason, the use case for them is extremely limited and they should be considered with great caution. One use I can think of that makes sense is something like a plugin, where you may need to gain access to everything. But again, even in this instance, I would be wary about what you're applying, especially when you're extending functionality to applications that might be a black box for you.

To create a global instance, we would place it above the Vue instance. In a typical Vue-cli build, this would go in your main.js file.

Vue.mixin({
  mounted() {
    console.log('hello from mixin!')
  }
})

new Vue({
  ...
})

Again, use this with caution! That console.log would now appear in every single component. This isn't so bad in this case (aside from all the noise in the console) but you can see how potentially harmful that could be if used incorrectly.

Conclusion

Mixins can be useful to encapsulate a small piece of functionality that you'd like to reuse. They are certainly not the only option available to you: higher order components, for example, allow you to compose similar functionality, this is just one way of working. I like mixins because we're not having to pass state around, but this pattern can certainly be abused as well, so take care to think through which option makes the most sense for your application.


Using Mixins in Vue.js is a post from CSS-Tricks

03:01
7 Free jQuery Social Sharing Plugins
01:43
Are You Having Trouble Finding the Perfect Font?
00:01
Mobile Interactions Guide: Designing Interactive App UIs For Beginners

June 14 2017

19:33
My Journey Of Learning Programming Through Flatiron School #28
15:55

Need Some Help in Finding Just the Right Font?

Access to a vast array of readily available fonts is nice to have. But, conducting a manual search to find just the right one to fill a specific need can be time consuming. If you’re busy designing websites, you probably have plenty of other things to do.

Wouldn’t it be nice to have a handy tool to help you identify fonts? There is such a tool; and it’s there for the asking.

John Doe Font

Imagine you’ve spotted this font, and you would like to use it in a current project:

You don’t know what it’s called, but it does have some recognizable characteristics. Where can you find it? Software to the rescue! To be more specific, WhatFontis.com software that you can use free of charge.

What are the steps involved in identifying a font ?

It’s a rather simple, 3-step process; since WhatFontis.com software is doing the heavy lifting for you

Step 1 – Sign in or register

First, you’ll need to bring up the WhatFontis.com website on your browser and register for the free font searching service. Enter your email address, confirm you’re not a robot, and click on REGISTER. Shortly, you’ll receive an email requesting you to click on a link to verify you are who you say you are.

Having done that, you’ll be asked to create a user name and a password. You’ll also be asked for your website URL. That isn’t a required field, so you can leave it blank if you don’t have one.

Make sure to copy your user name and password. You’ll need it to sign in, and for future use. When you sign in, you’ll be taken to the Home page:

identifying a font - step 1

Now you’re ready for Step 2; requesting your first search.

Step 2 – Upload your font image file

There are several ways to go about this. If you’ve captured the font in an image file, simply upload the file. You can also upload a screenshot of the font, or submit the URL of a site that’s using the font.

You must submit at least one line of text (horizontal) in a GIF, PNG, or JPG format. The system only accepts Latin letters, and the letters must not be touching.

Identifying a font - step 2

WhatFontis.com has a page of good and not-so-good submittal examples to help you along. There is also an FAQ page that might come in handy.

You won’t get an exact font identification 100% of the time, especially if the font is unique.

Identifying a font - step 2

You will however get several examples of fonts that are nearly identical, or quite similar.

Identifying a font - step 4

Step 3 – See the results and select the font that is a best match; and you’re done!

It should be noted that the WhatFontis.com site has a forum you can go do and submit your sample font. WhatFontis.com’s forum members, many of whom are heavy users, generally do a good job if identifying fonts. They are usually glad to help; and in most instances, can identify your font relatively quickly.

Use the WhatFontis browser Extension

You may find it more convenient to download and use the WhatFontis.com browser extension for Chrome. Besides the right-click shortcut extension for Chrome, you can also download the WhatFontis.com addon for Firefox from this website and Chrome apps. There are other downloads on the page, so make sure you click on the appropriate button (Chrome Extension “F”). Normally you want to keep the number of extensions low to enjoy the full benefit an extension offers; although Chrome is more tolerant of extensions that are most other browsers.

Signing up for the WhatFontis.com Premium Version

If you are an occasional user, the free search version will usually suffice. The Premium version is for those who conduct more than 5 searches, or more than a single forum post per day.

Identifying a font - final step

The Premium service is not expensive ($2.99/month, or $29.90 annually). With a premium account, there is no limit on the number of searches you can make, nor is there a limit on the number of forum posts you can generate. Another benefit is you can input anywhere from 1 to 15 characters, instead of 2 to 10 for the standard (free) account.

A Nice Solution to a Sometimes-Bothersome Problem

It’s not always easy to locate something when you don’t know the name of it. You can always rely on using analytics if you’ve nothing else to do; but it’s far easier to let an effective and efficient software search system do the work for you.

Even if you’ve reviewed hundreds of fonts, and can identify many of them, using the WhatFontis.com search capability can still save you ton of time. Whether you need to conduct a search once or twice a month, or a hundred or more times a day, this search tool belongs in your web design toolkit.

The post Need Some Help in Finding Just the Right Font? appeared first on Line25.

14:53

Flat Design: An Evolving Trend

Is the flat design trend finished? We don’t think so. It’s not dead yet. But the trend has evolved to be less stark and more engaging for users.

The early days of flat design were marked by a complete lack of design elements such as shadows, gradients, or realistic elements with texture. Many of those design elements are back, but are being paired with the overall idea of flat design to create a website user experience that’s both simple and easy to engage with. Depending on what side you are on, it might be a better version of flat design.

Here’s a look at the flat design trend evolution, and where we are today.

Flat Design 101

Flat design was the rebellious answer to all the overly realistic – and often fake – three-dimensional elements and textures that flooded the web in the early 2010s. Part of the overly real design paradigm came from Apple, because that was the style of icons in the app store and on its devices. (The company eventually switched to a more flat style after the trend really got going.)

Flat design really was just that. It embodies clean lines and a more 2D style that proponents said made it easier to understand and use. Flat design schemes also focused on high color and typography-focused elements, rather than lots of images. Commonly a single image or illustration can carry the entire homepage in a flat design scheme.

The problem with truly flat design is that wasn’t always the case. Some users found the stripped down styles lacked enough information to help guide them through the design. But, overwhelmingly, designers loved it. Flat design is probably one of the biggest and most revolutionary visual trends of the past decade because it lives on.

Material Design

To fully understand why flat design changed so quickly, it’s important to look at material design, the visual language Google established for its products and apps.

Material design took the best parts of flat design and then added back subtle touches of dimension. The concept focused on enhancing usability and user interaction by merging the digital world with reality using tactical effects and realistic motion.

It brought back elements such as drop shadows and seemed to “soften” the almost harsh nature of early flat design.

Material design is a well-defined concept with plenty of ever-changing documentation by Google. It, too, continues to evolve with trends and user wants. Why material is so important to flat is that it pushed the evolution of flat that much faster.

Flat 2.0

Enter Flat 2.0. Here’s how we described the trend in the early phases: “Flat 2.0 is easier to use because it combines the best of flat design with additional user interface cues to help you create website design that’s beautiful and functional. It’s also highly adaptable and works with almost any concept. Unlike some of the purest flat designed websites, Flat 2.0 combines elements of flat with subtle additions to enhance user-friendliness.”

We did not come up with “Flat 2.0” at Design Shack. It was first used by designer Ryan Allen: “Flat 2.0 is an evolution, not a revolution. Where flat design was a radical departure from the rampant skeuomorphism of days gone by, Flat 2.0 is a playful branch off the flat tree. Flat design is the Christmas tree, Flat 2.0 is the ornaments and candy canes. And presents. No tinsel though, that stuff is a mess to clean up.”

Flat 2.0 allows designers to break the hard rules associated with flat design and bring back some of the techniques that make visuals more engaging (in moderation, of course).

  • Highlights
  • Gradients
  • Multiple tints and color values
  • Drop shadows
  • Any color palette (not just super bright)

Flat 2.0 doesn’t live in a world where everything is a UI element or icon. Photos and videos are a large part of Flat 2.0 interfaces. (Many early flat design purists thought these visual elements took away from the pure intent of the aesthetic.)

Flat 2017

Now most designs fall somewhere in the middle of all these trends and ideas. There’s still a real leaning toward flatter styles, but there’s much more to the designs. This evolution hasn’t been named yet, but you can see common characteristics in many website designs.

Here’s what flat design looks like in 2017:

Flat Elements

Many of the button styles and user interface elements from early flat design projects stuck. The more simple button style – rectangle box with square or slightly rounded edges with white of black text – is common. Logos and icons also took on that flat style, and paired with a more elaborate homepage design, these really stand out.

Streamlined Navigation

The hamburger icon and hidden navigation was born out of flat design because designers were trying to strip elements out of the visual flow.

Bold, Bright Colors

Thanks to bright color palettes and acceptance of more color overall from flat patterns, the web got a little happier. This has evolved to a big current trend of using bright color gradients on homepages, as a dominant visual or as a photo overlay.

Minimal Homepages

As a general rule, homepages are a lot less busy and tend to focus on singular actions. Even with multiple elements, a single user direction or action makes the entire project seem a little less busy.

Better Typography Everywhere

Stripped down designs had to focus on great type. That idea paired with the growing use of better type kits and web typefaces has made it easier for designers to focus on typography online.

Fewer “Fake” Effects

Skeuomorphism really hasn’t come back. While more design techniques are being used in 2017’s version of flat design, the over-designed-trying-to-be-real styles have not re-emerged.

Integrated Motion and Feedback

The biggest takeaway from material design was the idea of the feedback loop as it applied to visuals and communication with users.

Plenty of Whitespace

Screens have gotten larger (on desktops and mobile devices) and designers are taking advantage of that space by using it as whitespace to maintain the minimal feel of flat. (And most of the time, this extra space isn’t white.)

Flat Layers

Layered elements without ornamentation can look great and provide additional information for users.

Oversized Design Elements

Large text, large images and large buttons and icons are pretty much the norm, thanks to even the earliest projects using flat design.

Conclusion

The evolution of flat design has left us with a better web. It’s easier to read; it’s more usable; it just looks nicer.

The best thing about this trend – and the reason it lives on – is that it is flexible enough to evolve with ease. Designers can take the parts and concepts from flat design that work best and incorporate them into almost any project. That’s why we still see so much of it in today’s projects and why flat design wasn’t just another short-lived fad.

13:31

Hybrid Apps And React Native: A Time To Transition?


   

Accomplished musicians often talk about how, at certain moments in their careers, they had to unlearn old habits in order to progress. This process often causes them to regress in performance while they adjust to an ultimately better method.

Hybrid Apps And React Native: A Time To Transition?

Once the new approach is integrated, they are able to reach new heights that would not have been possible with their previous techniques.

The post Hybrid Apps And React Native: A Time To Transition? appeared first on Smashing Magazine.

13:00
Select One Of The 5 Best Hosting Services For Your Website
12:00

15 Best HTML5 Audio Players

Thankfully, HTML5 has become the standard for multimedia web design. Gone are the days of Flash and Silverlight plugin headaches, as HTML5's support for audio and video page elements has brought a standard across all platforms—not to mention the benefits of SEO and offline caching.

Another HTML5 advantage is its ease in adapting to different platforms. This makes designing, developing, and deploying custom audio players much easier than in the past—and having it work on desktop, mobile, and various operating systems.

The following 15 best HTML5 audio players on Envato are excellent examples of how advanced these players can be, while at the same time being easy to customize to your own design needs.

1. Audio Waveform Player with Playlist

Audio Waveform Player with Playlist is one of my favorite HTML5 audio players. It borrows some design elements from the SoundCloud player and throws in some additional features that are useful for those hosting their own audio.

Audio Waveform Player with Playlist

This fully responsive and customizable player also includes helpful options like:

  • start and end time
  • sound download
  • playback speed
  • social sharing
  • playlists
  • tooltips
  • and much more

A great solution for podcasts, bands, and more, for audio that's self-hosted on Google Drive, Amazon S3, and even SoundCloud.

With its robust API and available callbacks, you'll find Audio Waveform Player with Playlist both well designed and powerful.

2. HTML5 Audio Player with Playlist

The HTML5 Audio Player with Playlist is another powerful option.

With a powerful API and unlimited player appearance, you can use this HTML5 audio player in just about any way you can imagine.

HTML5 Audio Player with Playlist

Features include:

  • supports XML, HTML or Database playlist
  • auto create playlists from folders
  • sort and drag your playlist items
  • mix multiple playlists/songs
  • multiple instances support
  • Flash fallback
  • and much more

In both form and function, this audio player has a lot of options and is a great player for podcasts, SoundCloud, and more.

The HTML5 Audio Player with Playlist may very well be the ultimate responsive HTML5 audio player.

3. MP3 Sticky Player

The greatest thing about the MP3 Sticky Player is that it's... sticky!

This powerful, responsive, and fully customizable HTML audio player can be easily added to the top or bottom of your webpage, and works perfectly on all major browsers and mobile devices.

MP3 Sticky Player

Some other important features included are:

  • supports Google Drive, Amazon S3, and all services and servers that allow mp3 stream access
  • load playlists via XML, HTML, mp3 folder, podcasts, YouTube, or SoundCloud
  • also supports mp4 and YouTube videos
  • supports mixed playlists
  • optional deeplinking
  • and much more

You'll find plenty of options and six different design skins with PSD files included.

The MP3 Sticky Player may be the perfect HTML5 audio player to stick on your website.

4. sPlayer - Super HTML5 Music Player

The sPlayer - Super HTML5 Music Player blurs the line between website and desktop audio players:

sPlayer - Super HTML5 Music Player

“sPlayer is pushing HTML5 to the limit, it’s almost certainly the first HTML5 music player of it’s kind, Making it the most feature-rich JavaScript Audio library.”

Features include:

  • multiple playlist support
  • radio and live stream
  • music genre iconset
  • live search
  • share links

You can even import local music with ID3 tags and much, much more.

From the web to the desktop, full mobile support, and several different supported audio formats (mp3, ogg, oga, aac, m4a, and mp4), the sPlayer - Super HTML5 Music Player is ready for you to make it your own.

5. All in One Audio and Radio Player

Whether you want to play one song, build a playlist, or stream audio, the All in One Audio and Radio Player is ready for broadcast.

All in One Audio and Radio Player

This good looking player supports:

  • AAC and AAC+ streaming
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  • iTunes
  • MP3
  • OGG
  • Wav

With different themes and powerful API, you can customize this HTML5 audio player into just about any kind of way you can imagine.

Some features include:

  • mobile touch friendly and keyboard control support
  • background image and CSS gradient support
  • powerful API and detailed documentation
  • use multiple instances on one page
  • and much more

The All in One Audio and Radio Player is an impressive option for HTML5 audio players.

6. Responsive HTML5 Audio Player PRO With Playlist

The Responsive HTML5 Audio Player PRO With Playlist is a solid choice. With its fully customizable interface, you can integrate this audio player perfectly into your website design.

It also comes in a WordPress version.

Responsive HTML5 Audio Player PRO With Playlist

Some of its top features include:

  • download and shuffle options
  • social media share
  • playlist categories
  • search option
  • and more

Hook in some Google Analytics tracking and set up the automatic playlist creation based on your folder organization, and you'll be up and running in no time at all.

For a solid HTML audio player that can be customized to match your own design, take a closer look at the Responsive HTML5 Audio Player PRO With Playlist.

7. ProgressionPlayer - Responsive Audio/Video Player

If you need to include some video along with your audio, you'll want to use the ProgressionPlayer - Responsive Audio/Video Player. It's easy to customize, fully responsive, and includes all the basic features you'll want in an HTML5 audio player.

ProgressionPlayer - Responsive AudioVideo Player
“Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers”

Features include:

  • unlimited player instances per page
  • includes five skins
  • audio playlists
  • retina support
  • and more

The ProgressionPlayer - Responsive Audio/Video Player is perfect for multiple instances on the same page, as players automatically stop playing when other players are activated.

A WordPress version has also been made available.

8. Single jQuery Audio Player (Music and Radio)

With its clean design and unique features, the Single jQuery Audio Player (Music and Radio) is a great solution for live streaming and music artists.

Each player instance can be set up differently using its useful plugin API:

  • direct download
  • Apple and Amazon music
  • edit title, artist name, and artwork image
Single jQuery Audio Player Music and Radio

Some of its other useful features include:

  • Shoutcast, Icecast, SoundCloud, and radio/live streaming supported
  • supports MP3, OGG, and WAV
  • detailed documentation
  • touch friendly
  • and more

Best of all, it automatically pauses and stops playback when a new player is initiated on the same page.

With its minimal design and powerful API, Single jQuery Audio Player (Music and Radio) is one of the best HTML5 audio players for musicians and live streaming.

9. DS SoundCloud Custom Music Player

If you love SoundCloud, but want to use your own stylized player, you want DS SoundCloud Custom Music Player.

DS SoundCloud Custom Music Player
“DS SoundCloud Music Player is a dynamic jQuery plugin designed to allow native audio streaming on websites, using HTML5 and jQuery. It is designed based on SoundCloud technology and can be used as a replacement for SoundCloud embed players.”

Features include:

  • lightweight, cloud-based, and no Flash
  • auto-fetch data from SoundCloud
  • Facebook and Twitter integration
  • custom playlist support
  • and more

The DS SoundCloud Custom Music Player is a viable alternative to the default SoundCloud player—with a little extra added in.

10. Clean HTML Audio Player with Playlist

Clean and simple.

The Clean HTML Audio Player with Playlist is exactly that.

Clean HTML Audio Player with Playlist

Self-hosted or broadcast, this player can handle it.

Some other features include:

  • supports playlists and multiple instances
  • simple HTML init with data attributes
  • fully responsive and retina ready
  • and more

The Clean HTML Audio Player with Playlist is simple, straightforward, and as the title says, clean.

11. Easy Audio Player

The Easy Audio Player is a solid, well-rounded, basic audio player that can be customized to your liking.

It includes complete API support and is mobile optimized.

Easy Audio Player

Additional features include:

  • all buttons are optional, configure as you like
  • optional intro animation
  • detailed documentation
  • four skins with PSD files
  • Adobe Flash fallback
  • and more

The Easy Audio Player is easy to set up, easy to use, and an easy choice.

12. tPlayer - audio player (with playlist) v1.5

For a well designed, modern looking HTML5 audio player, the tPlayer - audio player (with playlist) v1.5 is one of my top choices.

Its exclusive SVG button, animations, and elastic cover side and seeking slider bring some nice eye-candy to this clean player.

tPlayer - audio player with playlist v15

Some of its features include:

  • social sharing for Facebook, Twitter, Google+, and Tumblr
  • compact mode and hide playlist for cleaner look
  • include purchase or download links
  • single player and playlist modes
  • change color schemes
  • and much more

tPlayer - audio player (with playlist) v1.5 is a great looking player, and it's also available in WordPress.

13. ZoomSounds - Neat HTML5 Audio Player

ZoomSounds - Neat HTML5 Audio Player is a top-selling player for good reason.

With its design leaning towards SoundCloud, it offers several different styles and skins that make it easy to design your player however you like.

ZoomSounds - Neat HTML5 Audio Player

Features include:

  • SEO friendly
  • touch optimized
  • streams YouTube audio
  • fully responsive with Adobe Flash backup
  • supports SoundCloud streams with API key
  • and much more

With ZoomSounds - Neat HTML5 Audio Player, your audio has never looked so good.

14. Chameleon HTML5 Audio Player With/Without Playlist

The Chameleon HTML5 Audio Player With/Without Playlist will easily blend into your website with its customizable color scheme and on-screen elements.

Chameleon HTML5 Audio Player WithWithout Playlist

Additional features include:

  • generate playlists from folders with mp3 files
  • supports multiple instances
  • 35+ JS options
  • mobile friendly
  • and more

The Chameleon HTML5 Audio Player With/Without Playlist can also be acquired for WordPress.

15. HTML5 Vinyl-styled Music Player

As someone who loves vinyl records, the HTML5 Vinyl-styled Music Player is easily one of my favorites from this list.

Not only does the record pull out from the album art sleeve, the animated spinning record acts as a scrub wheel.

Brilliant.

HTML5 Vinyl-styled Music Player

Some other features you might also be interested in:

  • create playlist or choose random mode
  • touch optimized and fully responsive
  • change speed, set repeat or random
  • loads tags and covers automatically
  • and more

The HTML5 Vinyl-styled Music Player is easily the coolest HTML5 audio player you'll find.

Conclusion

These HTML5 audio players shine in form and function, with a vast majority of them allowing full customization to fit your website design needs. If you're looking for something different, you can consider making changes to one of the previously mentioned audio players or build your own from scratch.

On Envato Tuts+, you'll find all kinds of helpful resources to learn HTML5, like HTML5 tutorialscode eBooks, and video code courses. Learn What Is HTML5?, get started with Decoding HTML5, as well as taking advanced HTML5 courses.

What HTML5 audio player features are the most important to you?

10:36

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices.

Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuration process confusing and hard to adopt.

We'll go step by step from an empty configuration file to a simple but complete setup to bundle a project. This article assumes basic understanding of CommonJS notation and how modules work.

Concepts

Unlike most bundlers out there, the motivation behind Webpack is to gather all your dependencies (not just code, but other assets as well) and generate a dependency graph.

At first, it might look strange to see a `.js` file require a stylesheet, or a stylesheet retrieving an image modified as it was a module, but these allow Webpack to understand what is included in your bundle and helps you transform and optimize them.

Install

Let's first add the initial packages we are going to use:

npm install webpack webpack-dev-server --save-dev

Next we create a `webpack.config.js` file in the root of our project and add two scripts to our `package.json` files for both local development and production release.

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}

Webpack commands will pick up the config file we've just created unless we indicate other action.

Entry

There are many ways to specify our "entry point", which will be the root of our dependencies graph.

The easiest one is to pass a string:

var baseConfig = {
  entry: './src/index.js'
};

We could also pass an object in case we need more than one entry in the future.

var baseConfig = {
  entry: {
    main: './src/index.js'
  }
};

I recommend the last one since it will scale better as your project grows.

Output

The output in Webpack is an object holding the path where our bundles and assets will go, as well as the name the entries will adopt.

var path = require('path');

var baseConfig = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'main.js',
    path: path.resolve('./build')
  }
};

// export configuration
module.exports = baseConfig;

If you're defining the entry with an object, rather than hardcoding the output filename with a string, you can do:

output: {
  filename: '[name].js',
  path: path.resolve('./build')
}

This way when new entries are added Webpack will pick up their key to form the file name.

With just this small set of configurations, we are already able to run a server and develop locally with npm start or npm run build to bundle our code for release. By knowing the dependencies of the project, webpack-dev-server will watch them and reload the site when it detects one of them has changed.

Loaders

The goal of Webpack is to handle all our dependencies.

// index.js file
import helpers from '/helpers/main.js';

// Hey Webpack! I will need these styles:
import 'main.css';

What's that? Requiring a stylesheet in JavaScript? Yes! But bundlers are only prepared to handle JavaScript dependencies out-of-the-box. This is where "loaders" make their entrance.

Loaders provide an easy way to intercept our dependencies and preprocess them before they get bundled.

var baseConfig = {
  // ...
  module: {
    rules: [
      {
        test: /* RegEx */,
        use: [
          {
            loader: /* loader name */,
            query: /* optional config object */
          }
        ] 
      }
    ]
  }
};

For loaders to work, we need a regular expression to identify the files we want to modify and a string or an array with the loaders we want to use.

Styles

To allow Webpack to process our styles when required we are going to install css and style loaders.

npm install --save-dev css-loader style-loader

The css-loader will interpret styles as dependencies and the style-loader will automatically include a <style> tag with them on the page when the bundle loads.

var baseConfig = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      }
    ]
  }
};

In this example, main.css will go first through css-loader and then style-loader.

Preprocessors

Adding support for LESS or any other preprocessor is as simple as installing the corresponding loader and adding it to the rule.

rules: [
  {
    test: /\.less$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader' },
      { loader: 'less-loader' }
    ]
  }
]

Transpiling

JavaScript can be transformed by loaders too. One example would be using a Babel loader to transpile our scripts.

rules: [
  {
    test: /\.js$/,
    use: [
      { loader: 'babel-loader' }
    ]
  }
]

Images

Webpack has a great feature where it can detect url() statements inside stylesheets and let loaders apply changes to the image file and the url itself.

// index.less file

@import 'less/vars';

body {
  background-color: @background-color;
  color: @text-color;
}

.logo {
  background-image: url('./images/logo.svg');
}

By adding one rule, we could apply the file-loader to just copy the file or use the url-loader, the latest inlines the image as a base64 string unless it exceeds a byte limit, in which case it will replace the url statement with a relative path and copy the file to the output location for us.

{
  test: /\.svg$/,
  use: [
    {
       loader: 'url-loader',
       query: { limit : 10000 }
    }
  ]
}

Loaders can be configurable by passing a query object with options, like here where we are configuring the loader to inline the file unless it exceeds 10Kb in size.

Managing our build process this way, we will only include the necessary resources instead of moving a hypothetical assets folder with tons of files that might or might be not used in our project.

If you use React or a similar library you can require the .svg file in your component with the svg-inline-loader.

Plugins

Webpack contains default behaviors to bundle most type of resources. When loaders are not enough, we can use plugins to modify or add capabilities to Webpack.

For example, Webpack by default includes our styles inside our bundle, but we can alter this by introducing a plugin.

Extracting Assets

A common use for a plugin is to extract the generated stylesheet and load it as we normally do using a <link> tag.

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var lessRules = {
  test: /\.less$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'less-loader' }
  ]
};

var baseConfig = {
  // ...
  module: {
    rules: [
      // ...
      { test: /\.less$/, use: ExtractTextPlugin.extract(lessRules) }
    ]
  },
  plugins: [
    new ExtractTextPlugin('main.css')
  ]
};

Generate an `index.html` file

When building single-page applications we usually need one .html file to serve it.

The HtmlWebpackPlugin automatically creates an `index.html` file and add script tags for each resulting bundle. It also supports templating syntax and is highly configurable.

var HTMLWebpackPlugin = require('html-webpack-plugin');

var baseConfig = {
  // ...
  plugins: [
    new HTMLWebpackPlugin()
  ]
};

Building for Production

Define the Environment

A lot of libraries introduce warnings that are useful during development time but have no use in our production bundle and increase its size.

Webpack comes with a built-in plugin to set global constants inside your bundle.

var ENV = process.env.NODE_ENV;

var baseConfig = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(ENV)
    })
  ]
};

We now need to specify the environment on our commands:

"scripts": {
  "start": "NODE_ENV=development webpack-dev-server",
  "build": "NODE_ENV=production webpack"
}

process.env.NODE_ENV will be replaced by a string, allowing compressors to eliminate unreachable development code branches.

This is really useful to introduce warnings in your codebase for your team and they won't get to production.

if (process.env.NODE_ENV === 'development') {
    console.warn('This warning will dissapear on production build!');
  }

Compressing

On production, we need to give users the fastest possible product. By minifying our code with remove unnecessary characters, this reduces the size of our bundle and improves loading times.

One of the most popular tools to do this is UglifyJS, and Webpack comes with a built-in plugin to pass our code through it.

// webpack.config.js file
var ENV = process.env.NODE_ENV;

var baseConfig = {
  // ...
  plugins: []
};

if (ENV === 'production') {
  baseConfig.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

Wrap Up

Webpack config files are incredibly useful, and the complexity of the file will depend on your needs. Take care to organize them well as they can become harder to tame as your project grows.

In this article, we started with a blank config file and ended up with a base setup that would allow you to develop locally and release production code. There's more to explore in Webpack, but these key parts and concepts can help you become more familiar with it.

If you want to go deeper, I recommend Webpack official documentation which has been updated and improved for its second big release.


Introduction to Webpack: Entry, Output, Loaders, and Plugins is a post from CSS-Tricks

08:00
20 Tools for Web Developers and Designers from this Spring
01:28
The Insightful Collection Of Infographics With Revealing Facts & Statistics About WordPress

June 13 2017

18:51

New eBooks Available for Subscribers in June 2017

Do you want to learn more about gamification with Unity? How about mastering Vue.js or Meteor? Our latest batch of eBooks will teach you all you need to know about these topics and more.

New eBooks available for subscribers

Our Latest Selection of eBooks

This month we’ve made eight code eBooks available for Envato Tuts+ subscribers to download. Here’s a summary of those books and what you can learn from them.

  • Swift Data Structure and Algorithms

    Designing an application to scale while processing large amounts of data or provide fast and efficient searching can be complex, especially running on mobile devices with limited memory and bandwidth. Learning about best practices and knowing how to select the best data structure and algorithm in Swift is crucial to the success of your application and will help ensure your application is a success. That’s what this book will teach you.

  • Meteor

    Meteor: Full-Stack Web Application Development

    Meteor is a JavaScript development platform packed with collections of libraries and packages bound together in a tidy way to take care of everything from development to production, making your web development easier. This eBook will take you through an example of building a blog, give you a cookbook of recipes for Meteor development, and get you equipped with simple solutions to boost your development skills. 

  • Learning Xcode 8

    As the official tool for creating iOS applications, Xcode is chock full of features aimed at making a developer’s job easier, faster, and more fun. This book will take you from complete novice to a published app developer, and covers every step in between. You’ll learn the basics of iOS application development with Xcode, and gradually move on to more advanced topics. By the time you make it to the end of this book, you will have successfully built and published your first iOS application.

  • Gamification with Unity 5

    Gamification With Unity 5.x

    Are you looking at implementing gamification techniques for your business and wondering where to get a complete rundown of all the tricks and techniques? Well, you have come to the right place! This book will start right from the basics such as gameplay elements and their functionalities before gradually moving on to creating your first gamification project from scratch. You’ll be given the tools and shown how to perform various techniques for creating gamified applications in different contexts. Finally, you will implement various game elements into Unity, publish your own task management application, and get to know the best practices and approaches when designing gamified experiences. 

  • Natural Language Processing: Python and NLTK

    Natural Language Processing is a field of computational linguistics and artificial intelligence that deals with human-computer interaction. It provides a seamless interaction between computers and human beings and gives computers the ability to understand human speech with the help of machine learning. The number of human-computer interaction instances are increasing so it’s becoming imperative that computers comprehend all major natural languages. This book takes you through three detailed modules to get you fully up to speed with this important topic.

  • Swift 3 Protocols

    Swift 3 Protocol-Oriented Programming: Second Edition

    This book will help you understand the difference between object-oriented programming and protocol-oriented programming. It will demonstrate how to work with protocol-oriented programming using real-world use cases. You will gain solid knowledge of the different types that can be used in Swift and the differences between value and reference types. You will be taught how to utilize the advanced features of protocol-oriented programming to boost the performance of your applications. By the end of the book, you will have a thorough understanding of protocol-oriented programming and how to utilize it to build powerful, practical applications.

  • Angular 2 By Example

    Angular 2 by Example

    Angular 2 will help you build faster, more efficient, and more flexible cross-platform applications. This book shows you how to build three apps with varying degrees of complexity. In addition to this, you will learn about testability and the framework constructs Angular provides to effectively test your app. The book concludes by providing you with practical advice and useful tips that will come in handy as you build more and more apps with Angular.

  • Learning Vuejs

    Learning Vue.js 2

    Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.

Start Learning With a Yearly Subscription

Subscribe to Envato Tuts+ for access to our library of hundreds of eBooks. With a Yearly subscription, you can download up to five eBooks per month, while the Yearly Pro subscription gives you unlimited access.

You can also build on your newfound knowledge by using some of the fantastic code scripts and plugins on Envato Market.

18:19
20 Examples of Creative Graphic Designers’ Resumes
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl