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

May 02 2017


Introduction to Building WebApps in Vue.js

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

There are so many JavaScript frameworks in existence these days, it can be difficult to keep track of them all, and certainly it’s unlikely that anyone will master them in entirety. What it means for most of us is that we’ll need to be selective about which development frameworks we’re going to invest time into learning.

In this article, we’ll take a quick look at Vue.js, so you can decide for yourself if it’s likely to suit the kind of projects you tend to work on, and whether it seems like a good fit for you.

What is Vue.js?

Although it’s conventionally not capitalized, “Vue” is really an acronym for Visual Understanding Environment. Its main purpose is to make it easier to develop web applications by reducing code complexity. It has a lot in common with React.js, but the current version of Vue renders faster then React, and seems to be more efficient.

Is Vue difficult to learn?

If you’re already an experienced coder, you shouldn’t have much difficulty getting started with Vue, but it wouldn’t be right to describe it as a beginner language. You need to have some experience with HTML, CSS, and JavaScript to build anything practical with it.

The learning curve with Vue is a little less steep than with React, and it’s a lot less steep than with Angular. So what can be accurately stated is that Vue is relatively easy to learn in comparison to other popular development frameworks.

How does Vue help to achieve objectives?

It varies a bit depending on what your objective actually is, but  in general, you bind code blocks to HTML divs. This methodology makes it easier to introduce interactivity and dynamic content than with regular HTML, CSS and JavaScript.

On the other hand, you can’t really do more in Vue than you could by using the more conventional ways.  Using Vue is simply a matter of making things easier for you in the development phase, but it doesn’t have much effect on the end result, apart from minor performance impact due to loading the framework code.

Another advantage of Vue is that it provides modularity, meaning you can re-use components you develop in multiple projects.

Does Vue have any cool tricks up its sleeve?

It certainly does, and the best of these is built-in transition effects, which allow you to take control of what would otherwise be very code-intensive CSS and JavaScript structures using just a line or two of code. This saves you time and effort when creating your applications.

Another useful feature is native rendering for specific device types such as Android and iOS, so you can fine tune your applications for the devices they’re running on without a lot of extra work.

Getting started

As stated earlier, Vue is easy to learn, but it’s not a beginner’s language. You still need to know your way around inside a code block. If you have knowledge of HTML, CSS and JavaScript, the easy way to get started is by looking at an official Vue demo project.

The problem is that like most frameworks, the documentation is very lazy, and mainly dedicated to convincing you to use it. Much less attention is given in the documentation to explaining how everything works or why you do things a certain way. Virtually every official framework example ever created leaves out vital information that you have to poke around for hours to discover. That’s a flaw shared by Vue’s documentation and examples as well.

To make it easier to understand what you really need to do to re-create this project, these are the required steps:

1. Add a script referencing vue.js

For speed optimization, it’s best to include this after all your page content, but just before the closing body tag in the HTML source. You may also have other page resources loading in this section also, and the order of loading priority determines which order you should insert each resource.

Here is an example of including vue.js from a CDN:

And here is an example of including vue.js from a directory on your own server:

Without this reference to vue.js, nothing related to Vue can happen.

2. Add the Vue components into your HTML body

That’s what’s going on with this code:

For now it doesn’t make a lot of sense, but the Vue part is the empty “demo-grid” element, plus the addition of a “v-directive” to the query input (in this case it is “v-model”, which is used for binding Vue code to form inputs).

3. If the project requires a component template, add this to the HTML body

This section of code is unusual because it looks like regular HTML inside a script tag, which will confuse most HTML editing software (notice the indicator colors are wrong in some places).

4. Add the Vue instance

This should be one of the last things to appear on the page, because it’s performing  a dynamic rendering task. This provides some optimization benefits over adding it earlier in the page.

  • Line 46 specifies that the browser should look for a component on the page called “demo-grid”, and line 47 specifies that “#grid-template” should be used as the template for the component (this is the template code added at step 3 from line 9 to line 30).
  • A block from line 48 to line 52 defines the properties of the component.
  • Lines 53 to 62 define a function for sorting the data in the table.
  • Lines 63 to 85 define a function for filtering data (from results in the search query).
  • Lines 86 to 90 define a function for capitalizing the words in a data set.
  • Lines 91 to 97 define the method for sorting data.

5. Add in the launch code before the closing script tag

If you completed steps 1 to 4 and opened the file in the browser, all you would see is the search box and nothing more.  That’s because everything required to build the table has been defined but not created. So in step 5, we add the code that actually creates the table that was defined by all the previous steps.

  • Line 100 creates a new Vue object.
  • Line 101 specifies which element to bind the action to.
  • Lines 102 to 111 provide the object data that will be bound to the element.


Having defined and created the requisite object, you are now ready to test the result.  Prepare to be underwhelmed, because this is what you should see in the browser:

What’s going on? Why is it so boring?  It’s because there’s no styling applied. If we use the default styling from the JSFiddle example, the table would look like this:

Typing anything in the search box (not case-sensitive) will filter the results accordingly:

Clicking on a column header will allow you to change the order of display. For example, clicking on the “Power” column header will change the results to be displayed in order of power level.

Improving and adapting

Another issue with framework examples is that they usually don’t include much information to help somebody unfamiliar with the codebase to figure out how to apply in the field what they see in the example. Vue does a magnificent job compared to Bootstrap (which is notoriously under-informative),  but still leaves plenty of unanswered questions.

Here are a few changes we might make to this application to change how it looks and what it does:

  • Style the table as a Bootstrap striped table
  • Change the number of columns
  • Change the data to something completely different

1. Adding Bootstrap

2. Wrapping the element in a Bootstrap table

3. Adjusting the root element to use the Bootstrap layout model

4. Restyling the arrows

5. Modifying the data

6. Testing

  • Unfiltered & unsorted

  • Sorted by Directive (ascending)

  • Sorted by Used For (ascending)

  • Filtered for “conditional”

  • Filtered for “conditional” & sorted by Directive (ascending)

Final thoughts

Hopefully what was evident from these examples was that we built two applications with very different looks and content from a common slice of code. With Vue it is very easy to re-use your code across multiple projects, and potentially enjoy considerable time savings.

header image courtesy of Aleksandar Savic

This post Introduction to Building WebApps in Vue.js was written by Inspired Mag Team and first appearedon Inspired Magazine.

April 19 2017


Searching for Clean(er) Searches

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

If there is one year for positive change, look no further, it’s 2017. Because there’s no better time than now to do something, but also because this world, on so many levels (well, you know, you’ve been there too) was seriously derailed in the past couple of years.

You are probably involved already, struggling with small or large steps to make a difference in the world, to have a positive impact, minimize your carbon footprint, leave the air breathable and the water drinkable for your kids and their kids. You probably cycle, volunteer, decided to run for office (yay!), sign petitions, enjoy the outdoors. But by the end of your life you will still have spent a few good years staring into a screen. Due to nature of work or for entertainment only, it’s gonna be years, trust me. They add up. Worry not though, you can make a difference even in front of a computer screen doing your daily searches.

I search, You search, We…

You’re online and irrespective of the tasks, you will search at least one time during the course of one working day. Am I right? Searching the www is high in the charts when it comes to spending time online. I mean, we even search for search. Spelling. Our own names. We search for pretty much everything. Everything included. And there’s a carbon meter attached to this daily routine too, as with most activities that need a source of power.

You can imagine our excitement when we discovered that some of those behind several search engines intend to tackle the carbon problem. While DuckDuckGo is more into protecting your online privacy, Google promises to run on 100% renewable energy by the end of this year, and Ecosia plants trees every time you search the web.

Online searches have been steadily growing into trillions since the dawn of the internet. The trend is on the rise and there are no signs of a slowdown.

Raising Awareness while Making Change Happen

Charming server error

No, you cannot literally plant trees by simply searching. At least not yet (have you seen the guy who emailed lemonade? Literally). Ecosia is the search engine that plants trees with its ad revenue. It’s a great example of social change applied to the most common online activity.

You search the web with Ecosia > Search ads generate income for Ecosia > Ecosia uses this income to plant trees.

They’ve planted over 7 million trees so far. Here’s how they decide where to plant them. On their website you can find details about their projects, videos, stories, and useful info on why trees are essential to life – if you ever had any doubts. You don’t have to be a full-time treehugger to get excited when your search for “sugar free” and just planted a tree. I mean, even when their server is down, they’ll put some trees up (see screenshot).

Using  Renewable Energy to Keep them Engines Running

Renewable Energy Projects Google: New Renewable Energy Projects via venturebeat.com

In 2015, Google bought 44% of its power from wind and solar farms, according to The Guardian, and they plan to go 100% renewable this year. It’s worth keeping an eye on them and see how and when they’ll reach their target. Just in case you were feeling guilty for using Google.

The renewable trend would be very hard to stop, hence similar companies are joining this common-sense challenge along sustainability programs. For the sake of your own carbon footprint, doing a quick search (ha!) to test their sustainability efforts should come in handy.

Search Engines with Renewable Goals Only

If you want to find out more about clean energy, then you should know that there are search engines only for this. Take reegle. It acts as a unique clean energy information portal, targeting specific stakeholders including governments, project developers, businesses, financiers, NGOs, academia, international organizations and civil society. Others, like Solar Search, specialize in searches related to mainly solar energies. You’ll probably come across some inspiring projects.
If you’re really committed to making a difference, don’t stop here, move beyond the search engine. See how clean your apps are. If you’re the techie-sustainable type and have ideas for a low carbon economy, take some time to put them into practice, pitch them, share them, spread the word. Go for it!

Switch it Off and Other Such Details

Saving energy at home and at work matter. Just as low energy consuming applications and power saving system matter. And no, standby is not as friendly as you think.
University of Cambridge has its own green challenge in an attempt to prevent unnecessary energy use. They are committed to reducing carbon emissions energy-and-carbon, and they compiled Facts & Figures to help you find out how much energy you can save from simple actions such as switching off lights and equipment.

“Leaving a computer on overnight for a year creates enough CO2 to fill a double-decker bus.” (Carbon Trust)

“Reducing your PC monitor brightness from 100% to 70% can save up to 20% of the energy the energy the monitor uses.” (Harvard)

A true activist should consider all his actions, and change or adapt as many of his habits as possible, including his virtual ones. Your virtual life has an impact in real life. And not necessarily yours.

More Than Clean Searches

This article does not enourage online activism only. Don’t forget to increase the efficacy of offline activism. These days online and offline have to come together. Entangling your daily virtual existence with meaningful clicks does sound like a powerful tool, a quiet form of activism pushing change in the most unexpected places. Direct action, changing your daily routine, less waste, more awareness in your life, every bit will make a difference in the big scheme of life.

You might not save the world with this, but you’ve certainly made a step in the right direction.
Leave the right footprints. Your grandchildren will be grateful.

This post Searching for Clean(er) Searches was written by Anca Rusu and first appearedon Inspired Magazine.

April 18 2017


Best Practices for Selling Logo Designs Like Hotcakes

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

A web designer often takes on multiple roles, peddling things like marketing designs, web design, logo design and more. Logos are an interesting business, because not only are they cheap online, but they generally suck when they get so cheap.

Logo making websites are known for generating forgettable logos, while sites like Fiverr rarely provide decent solutions for $5 to $20.

Therefore, freelance designers have a chance to stand out, using their unique skills and knowledge to sell logos on a regular basis. The good news is we’re here to help, so keep reading to learn more about the best practices for selling logo designs like hotcakes.

Find Freelance Websites and Job Boards that Don’t Suck

I’ve already stated my contempt for places like Fiverr. Basically, It’s one step up from Freelancer.com, but that’s not that great. Overall, sites like Fiverr might be okay to start off at, but I’d suggest that you get out as soon as possible. If you’re a quality designer you have all sorts of other options to go with.

Plenty of job boards are available for seeking out design work, and sites like Logo Orbit let you submit your designs and get paid for the efforts. Here, the designers get paid without pitching or profile building while businesses get the custom made logo in 3:00 minutes. What’s cool indeed is that lots of companies turn to Logo Orbit for quick custom logos. So you shouldn’t run out of backup clients.

Show Visuals Like Crazy

The whole reason a company is coming to you is because they want you to get a logo for their company. If they land on your website or other online presences and don’t see enough portfolio examples, you can bet they’ll be going elsewhere.

The goal of a portfolio is to get to the point. If people have to read through paragraphs of why you’re such a good designer, they’re going to jump ship. Your work should speak for itself, and since logo design is visual work, you should focus only on visuals for your portfolio.

Categorize Your Portfolio Based on Different Styles

This might not apply to everyone, but most logo designers take on work that ranges in style. For example, one week you may create a logo that’s 3D with an animated mascot in the logo. The next week might bring about other designs that are more basic, modern or flat. Therefore, it’s much easier for new clients to click on a category when they land on your portfolio.

For example, a new online shoe store may land on your site with a flat logo design in mind. If that’s the case, it’d be nice if they could click on a “Flat” filter to see how well your past designs turned out.

Sell Your Designs Without All the Lingo

I know it’s tempting to say words and phrases like “vector,” “DPI,” “stroke,” “fill,” and “raster.” But you should avoid this at all cost. Why? Because it’s annoying and useless for clients.

Industry jargon is technically only useful when you’re working in an office with other people. The point of it is to speed up conversation, but most of the time it’s used because people feel cool saying these “code names.”

Your clients and future clients want everything described to them in layman’s terms, so stick to that to keep your business running.

Deliver Multiple Logo Files for Future Use

From vector files to 3D mockups, clients might not know they need all of these wonderful files, but they’re going to want them in the future. The best designers deliver all of the necessary files in a neat little package. Not only that, but these designers explain what each file can be used for in the future. A written outline wouldn’t hurt either.

In short, the client might not know that a vector or source file is essential for blowing up the logo and putting it on a billboard or large banner. If you quickly explain this to them they can store those files away for when they turn to another designer down the road.

Tell Clients What They Can Expect From The Start

The list of files is a good place to start. Your clients are taking a risk with your design services, so you should be as transparent as possible. It may seem like easy work to you. Forget about that. Treat logo work like it’s just as difficult as everything else in your life.

Make a timeline for when your clients can expect to see results. Give them a list of all the files they should expect at the end, and decide on payment upfront.

Make Logos That Create Brand Recognition

Goodyear Tires certainly doesn’t own the word “good” or the word “year.” You also won’t find them having a copyright or trademark on shoes or wings. However, the clever combination of all of those elements makes the brand recognizable.

Far too often we see logo designers sticking to the basics, with clip art and icons going unedited. Another globe for a bank or insurance agency isn’t going to make people remember those companies. A pen icon for a copywriting company shows a lack of creativity if anything.

You’re never going to make a completely new icon or logo item. It all matters how you take what’s given to you to create something new. Take Goodyear for example. The logo designer combined shoes and wings and plopped it right in the middle of the company name.

Evernote has an elephant. Nothing unique, right? Wrong. The elephant’s ear is being flipped like a piece of paper.

Over to You…

There are plenty more best practices for selling logo designs. They all come in handy for when you’re trying to stand out from competitors.

Remember that logo makers and cheap sites like Fiverr are competitors as well. They are so tempting for small businesses, that it’s your job to show them the value of quality, custom logo work.

If you have any questions about the best practices for logo design, or if you’d like to share some of your own knowledge from work in the logo business, let us know in the comments section below.

This post Best Practices for Selling Logo Designs Like Hotcakes was written by Inspired Mag Team and first appearedon Inspired Magazine.

April 06 2017


Infographic: What is Augmented Reality?

Augmented Reality is everywhere. Everyday, we read about it in the news. And even though Virtual Reality initially seemed to be a big deal—to have the biggest wow factor—it is now starting to appear that AR could be the real game-changer.

Do you know how Augmented Reality will affect your life? Or what’s the difference between AR and VR? This helpful infographic by the folks at www.vexels.com answers those questions and more. Get to know a little more about AR’s history, the market it’s creating and the future applications it’ll have…


Please include attribution to webdesignerdepot.com with this graphic.

Infographic: What is Augmented Reality?

LAST DAY: The Icon54 v3.0 Collection of 4,000 Perfect Icons in 85 Categories – $19!

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

April 05 2017


Quartz Goes “Mobile-Native”

Launched just five years ago, Quartz is a digital publisher of news that aims to present readers with a truly world view. Focused on the business world, qz.com is targeted primarily at mobile devices; two thirds of Quartz readers access the service on their phone.

Originally released in 2016, Quartz Index is a form of digital storytelling that transcends web sites, or news feeds, and enters the realms of Time, or National Geographic, by embracing its medium using videos, interaction, and easily digestible stats.

Read about the world’s longest flight, the one job destroyed by automation, or why Brazil’s 0% GDP growth is actually good.—Zach Seward, SVP of product and executive editor, Quartz

This week Quartz have unveiled an ambitious and highly successful redesign of the Index service. It is visually striking, easy to interact with, and highly addictive. You can tap, and swipe through stories in a way that is perfectly intuitive. (Of course, the service also works on desktop if that’s your preference, but it’s simply beautiful on a mobile device.)

The most interesting aspect of what Quartz are doing with Index, from a web professional’s point of view, is moving beyond mobile-first. Mobile-first is widely regarded as the best way to style content for the web, but so often it’s a case of simply scaling desktop content down to a smaller viewport. The whole approach of Quartz Index, is mobile centric.

A product of its time, Quartz adopted mobile-first as soon as it was conceived, but with this latest iteration of Index the team behind the build began using the phrase “mobile-native”.

In designing this new version of Index, we challenged ourselves to go beyond mobile-first, which has guided most decisions at Quartz from the beginning.—Zach Seward, SVP of product and executive editor, Quartz

Quartz tells stories digitally, in a format that feels like a stripped down Sunday supplement. With videos, stats, and bite-sized content to draw you into the zeitgeist, it feels like the perfect approach for our time. With so many media outlets mimicking print, or broadcast techniques, Quartz Index succeeds by embracing the interaction, and the flow, of the web.

Bourton Font Family of 34 Fonts & More from Kimmy Design – only $17!

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

The State of Front-End Tooling

At the end of 2016, I put out the 2016 Front-End Tooling Survey. The response has been phenomenal. Thank you to all of you who have taken the time to do so.

The aim was pretty straight-forward; to find out more details about the tools front-end developers are currently using in their own workflows. In our industry, it’s all too easy to take for granted what people are using based on your own knowledge. This survey aims to give more of an insight into the current trends in front-end tooling from a broader perspective.

This year the survey was made up of 19 questions covering a wide range of front-end tools and methodologies.

Quick Thanks

This survey would have been a whole lot harder to put together without the support of Just Eat (my employer) and Wes Bos, who has kindly affiliated with this years survey, which has enabled me to spend more time analysing the results.

Wes is renowned for creating great learning materials for web developers. His courses are a great place to start if you’re looking to learn more about topics such as React and ES6.

The Responses

This years survey has had over 4,700 responses. In comparison, when I released the first set of results in 2015, the survey had received just 648 responses which then rose to a final figure of 2,028 responses when the survey closed. So that’s almost 2 and a half times the number of responses in comparison to last years final numbers, or a 132% increase for people who like percentages.

In terms of where the responses have come from, I posted the survey on Twitter, Reddit, HackerNews, DesignerNews, Echo.js, LinkedIn and Frontendfront. It was also featured by a number of newsletters such as Responsive Design Weekly, Sitepoint Weekly and FrontEnd Focus, among others.

The reason I want to highlight these sources is to show that there has been a good spread of response across various channels; respondents haven’t all come from one social channel.

The Results

Pre-amble disclaimer: These results represent a sample of front-end developers working in the industry – therefore, they shouldn’t be taken as gospel, simply as pointing towards a rough trend.

So, without further ado, let’s take a look at the results! Grab yourself a cup of tea/coffee and let’s take a look…

Q1: General Front-end Experience

The first question I asked was to get an idea of the experience level of those responding; something that wasn’t recorded in last year’s survey. The question was Roughly how long have you been working with front-end technologies?

Here are the results:

Answer Number of Votes Percentage 0-1 Year 232 4.92% 1-2 Years 589 12.49% 2-5 Years 1,508 31.98% 5-10 Years 1,323 28.06% 10-15 Years 673 14.27% Over 15 Years 390 8.27%

Roughly how long have you been working with front-end technologies? – Pie Chart showing the results

The majority of respondents said that they have been working with front-end technologies for either 2-5 years or 5-10 years, which together accounted for 60.04% (2,831) of responses.

Interestingly, there is a very even split between those who have been working with front-end for up to 5 years (49.39%) when compared to those with over 5 years experience (50.6%). Positively, this implies that the results of the survey come from a fairly even distribution of experience levels.

Q2: CSS Knowledge

The second question was a subjective look at how respondents rated their own knowledge of CSS.

It goes without saying that this question is pretty relative, as this can be interpreted differently by each respondent as well as relying on a level of modesty when it comes to rating your own skill level – but it is none-the-less interesting to see the results!

The question was How do you rate your own knowledge of CSS and its associated tools and methodologies?

Here’s what the responses looked like:

Level Number of Votes Percentage Beginner 78 1.65% Novice (between Beginner and Intermediate) 424 8.99% Intermediate 1,243 26.36% Advanced (between Intermediate and Expert) 2,203 46.72% Expert 767 16.27%

How do you rate your own knowledge of CSS and its associated tools and methodologies? – Pie Chart showing the results

Looking at the results, 89.36% (4,213) of respondents rated themselves as having an intermediate level of CSS knowledge or higher, with most – 46.72% (2,203) – saying that they are at an advanced level. Just 16.27% (767) of respondents rated themselves as having expert knowledge.

When digging a little deeper into these results and filtering based on the answers given to question 1, of those who have up to 12 months experience working with front-end technologies 10% rated themselves as having advanced knowledge of CSS or higher (although no-one in this subcategory rated themselves as an expert). That percentage rose to 22% for respondents with up to 2 years experience.

This can be interpreted in different ways, but it seems a relatively high percentage considering the short amount of time they have spent working with CSS. It could also reflect how CSS can often be perceived to be simpler to learn when compared to other languages such as JavaScript – something I wouldn’t necessarily agree with when it comes to learning the intricacies and nuances of the language and it’s methodologies.

We’ll look to reference these results in the following questions.

Q3: CSS Processor Usage

The next question was the first technology specific question, asking What is your CSS Processing tool of choice?

This question was asked on last years survey, with Sass being the choice for the majority of developers back in 2015. The possible answers included all of those available last year plus the addition of PostCSS and Rework, two more modular CSS Processors.

The results below also show the percentage difference between this year’s and last year’s results where applicable.

Preprocessor Number of Votes Percentage % Diff (to 2015) Sass 2,989 63.39% -0.56% Less 478 10.14% -5.05% Stylus 137 2.91% -0.84% PostCSS 392 8.31% N/A Rework 3 0.06% N/A No Preprocessor 643 13.64% -1.4% Other 73 1.55% -0.52%

What is your CSS Processing tool of choice? – Pie Chart showing the results

Looking at the results, Sass is still the CSS processing tool of choice for the majority of respondents with 63.39%. When compared to last years results, Less usage has dropped slightly to 10.14% (down 5.05%).

PostCSS showed good growth with 8.31% of respondents saying that they used it exclusively. It’s usage is likely to be slightly higher in reality as this doesn’t account for those respondents who use it in combination with another processing tool.

Interestingly, the percentage of respondents not using any CSS processing tool has dropped to 13.64%, down from 15.04% in 2015. This re-enforces how CSS processing is now a key skill in modern front-end development and one that the majority (86.36%) of front-end developers currently use in their own workflows.

Q4: CSS Processor Experience

Following on from the last question, I wanted to find out more detail about knowledge levels across CSS processing tools with respondents asked to give their experience in each.

Here is how people responded when asked – Please indicate your experience with the following CSS Processing tools:

  Never Heard of Heard of/Read About Used a little Feel Comfortable Using Sass – Standard or SCSS syntax 0.57% (27) 11.11% (524) 17.16% (809) 71.16% (3,355) Less 0.81% (38) 30.86% (1,455) 33.32% (1,571) 35.02% (1,651) Stylus 24.22% (1,142) 57.26% (2,700) 11.11% (524) 7.40% (349) PostCSS 21.76% (1,026) 45.37% (2,139) 18.73% (883) 14.15% (667) Rework 78.43% (3,698) 20.17% (951) 0.91% (43) 0.49% (23)

Please indicate your experience with the following CSS Processing tools – Bar Chart showing the results

The tool with the highest knowledge levels was Sass by quite some distance, with 71.16% of respondents saying that they felt comfortable using it. In fact just 11.68% of people had never used it, with only 0.57% (27 people) having never heard of it at all. When looking at this together with the results of question 3, Sass clearly dominates when it comes to both usage and knowledge levels across CSS processing tools.

Looking at the other tools, 35.02% of respondents said that they felt comfortable using Less, followed by 14.15% that said the same with respect to PostCSS. Interestingly, this number has almost doubled from the 7.15% of respondents who said that they felt comfortable using PostCSS in last years survey, showing an upwards trend in knowledge of the tool.

Q5: CSS Naming Schemes

The next question was an area of CSS that I have a lot of interest in – CSS Naming Schemes. Having used a naming scheme in my own work for a number of years now, I was interested to see if this was something that other front-end developers had adopted too.

The question asked was – Do you use a naming scheme when writing CSS, such as BEM or SUIT?

Answer Number of Votes Percentage Yes 2,170 46.02% No – I’ve heard of CSS naming schemes but don’t use one 1,731 36.71% No – I’ve never heard of CSS naming schemes 814 17.26%

Do you use a naming scheme when writing CSS, such as BEM or SUIT? – Pie Chart showing the results

The results show a fairly even split, although just less than half of respondents (46.02%) said that they do use a CSS naming scheme in comparison to those that said that they did not (53.98%).

It’s encouraging that overall 82.73% (3,901) of respondents had at least heard of CSS naming schemes, but 36.71% (1,731) had yet to use one.

As you might expect, when looking at the respondents who rated themselves as having an advanced level of CSS knowledge or higher, the usage of CSS naming schemes rose to 56.94%. This is compared to a usage of just 27.47% among those who rated themselves as an intermediate or lower.

CSS naming schemes are a tool that I think will continue to grow in usage, so it’ll be interesting to see how these figures change in the future.

Q6: CSS Linting

Next up was CSS Linting – is this a tool that a lot of developers use in their workflows?

I asked Do you use a tool to lint your CSS?

The results were as follows:

Answer Number of Votes Percentage Yes 2,232 47.34% No – I don’t lint my CSS 2,483 52.66%

Do you use a tool to lint your CSS? – Pie Chart showing the results

Like the previous question, this was a pretty even split with 47.34% (2,232) of respondents saying that they do use a tool to lint their CSS, compared with 52.66% (2,483) of those that do not.

Unsurprisingly, these numbers also rise as we look at those respondents with more advanced knowledge in CSS. 52.42% of respondents who rated themselves as having advanced or higher knowledge of CSS also said that they linted their CSS, compared to just 38.70% of those with beginner to intermediate knowledge.

CSS linting is still relatively new in terms of tooling and usage, especially when compared with the amount of time that JavaScript linting has been around. As better tools, such as Stylelint, continue to be discovered by developers I’d expect usage to grow as this area of CSS tooling matures.

Q7: CSS Tool Experience

The next three questions in the survey covered the knowledge levels and usage across a number of CSS tools and methodologies. Firstly question 7 asked respondents to Please indicate your experience with the following CSS tools.

Let’s look at the results:

  Never Heard of Heard of/Read About Used a little Feel Comfortable Using Autoprefixer 18.28% (862) 17.18% (810) 15.93% (751) 48.61% (2,292) Susy 55.02% (2,594) 29.78% (1,404) 9.69% (457) 5.51% (260) Modernizr 6.64% (313) 22.93% (1,081) 37.96% (1,790) 32.47% (1,531) Stylelint 54.68% (2,578) 24.35% (1,148) 10.39% (490) 10.58% (499)

Please indicate your experience with the following CSS tools – Bar Chart showing the results

Out of these, Autoprefixer, with 48.61% (2,292), was the CSS tool that the most respondents felt comfortable using, followed by Modernizr (32.47%), Stylelint (10.58%) and finally Susy (5.51%).

However, when expanding this out to include those respondents who had used the tool a little, Modernizr then came out on top, with 70.43% compared with the 64.54% of respondents who said that they have at least a little experience in using Autoprefixer.

The majority of respondents said that they had never heard of Stylelint (54.68%), a CSS Linting tool, and Susy (55.02%), a Sass layout tool.

Interestingly, a high percentage of respondents who rated themselves as advanced or above in CSS and it’s tools had never heard of these two tools – 46.53% for Stylelint and 45.52% for Susy. I think this illustrates just how difficult it can be for developers of any experience level, let alone beginners, to keep up with the tools available to us all.

Q8: CSS Methodologies and Naming Scheme Experience

This next question followed on from the last by asking respondents to Please indicate your experience with the following CSS methodologies.

The results looked like this:

  Never Heard of Heard of/Read About Used a little Feel Comfortable Using SMACSS 40.57% (1,913) 33.91% (1,599) 14.74% (695) 10.77% (508) Object Oriented CSS (OOCSS) 28.27% (1,333) 41.80% (1,971) 17.77% (838) 12.15% (573) Atomic Design 41.53% (1,958) 33.74% (1,591) 14.34% (676) 10.39% (490) ITCSS 68.34% (3,222) 22.38% (1,055) 4.50% (212) 4.79% (226) CSS Modules 27.42% (1,293) 44.77% (2,111) 15.95% (752) 11.86% (559) BEM 24.90% (1,174) 23.52% (1,109) 18.49% (872) 33.09% (1,560) SUIT CSS 69.42% (3,273) 24.14% (1,138) 3.90% (184) 2.55% (120)

Please indicate your experience with the following CSS methodologies – Bar Chart showing the results

Of these, BEM – a CSS naming scheme – was the most widely known with 33.09% of respondents saying that they felt comfortable using it. This figure rises to 51.58% of respondents when including those who said they have used it a little.

Surprisingly (to me at least), knowledge of many of the most well known CSS methodologies is pretty low. Just 29.92% of developers said that they have used OOCSS either a little or feel comfortable using it in their projects, with 27.81% saying the same for CSS modules, 25.51% for SMACSS and 24.73% for Atomic design.

Even among those with advanced or expert knowledge of CSS, none of these methodologies break the 20% mark in terms of the number of respondents that said that they felt comfortable using them.

Digging into the responses a bit further shows that less than a third (29.20%) of respondents feel comfortable using at least one of the listed CSS methodologies – so that’s any one of SMACSS, OOCSS, Atomic Design, ITCSS and CSS Modules. This rises to 55.02% of respondents if we consider those who say that they have used any one of these methodologies at least a little.

Before drawing more conclusions from these results, let’s also take a look at question 9, which is closely related.

Q9: CSS Tool Usage

Rounding off the survey’s questions on CSS, I asked respondents Which of these CSS methodologies or tools do you currently use on your projects?

Here are the results:

Tool/Methodology Number of Votes Percentage SMACSS 613 13.00% Object Oriented CSS (OOCSS) 696 14.76% Atomic Design 680 14.42% ITCSS 248 5.26% CSS Modules 740 15.69% BEM 1905 40.40% SUIT CSS 111 2.35% Autoprefixer 2,414 51.20% Susy 237 5.03% Modernizr 1,828 38.77% Stylelint 682 14.46% I don’t use any of these approaches or tools 1,095 23.22%

Which of these CSS methodologies or tools do you currently use on your projects? – Bar Chart showing the results

Top in terms of actual usage was Autoprefixer (51.20%), followed by BEM (40.40%) and Modernizr (38.77%), which all saw good usage levels from respondents.

Although individual usage levels of CSS methodologies is modest – even among those who stated advanced experience with CSS – when looking at usage across all of them together, 41.21% of respondents said that they were using at least one of SMACSS, OOCSS, Atomic Design, ITCSS or CSS Modules on their projects.

It’s also a little surprising, due to the relative newness of the approach, to see that usage of CSS modules has higher usage than any of the other CSS methodologies.

For me, the relatively low usage levels – and knowledge levels shown from question 8 – across CSS methodologies indicates two things. The diversity of ways that people are writing their CSS is very broad – there isn’t any one method that developers seem drawn to when it comes to writing their CSS.

Secondly, from the responses a high number of front-end developers consider themselves to have an advanced knowledge of CSS when they don’t have knowledge of some of the most well known CSS methodologies. Learning different approaches to writing CSS (such as SMACSS, OOCSS and ITCSS) helps give a better perspective to how you structure your own styles – irrespective of whether you choose to use them or not in your own workflow.

CSS may be a simple language on the surface, but it can be a complex one to master and fully understand.

Q10: JavaScript Knowledge

The second half of the survey focussed on JavaScript and it’s ecosystem of tools.

First up, I asked respondents How do you rate your own knowledge of JavaScript and its associated tools and methodologies?

These were the results:

Knowledge Number of Votes Percentage Beginner 197 4.18% Novice (between Beginner and Intermediate) 553 11.73% Intermediate 1555 32.98% Advanced (between Intermediate and Expert) 1684 35.72% Expert 726 15.40%

How do you rate your own knowledge of JavaScript and its associated tools and methodologies? – Pie Chart showing the results

Responses showed a similar distribution across knowledge levels to those seen in relation to CSS. The main exception comes in the number of respondents who rated themselves as having an advanced knowledge of JavaScript, which is 35.72%.

By way of comparison, 51.12% of respondents rated themselves as having either an advanced of expert level of JavaScript knowledge, compared with 62.99% of respondents who said the same in relation to their knowledge of CSS.

Q11: Task Runners

Task runners have become a very important part of many front-end developers’ workflows. But has this area changed much over the last 12 months, or has usage stayed consistent across tools and approaches?

The question that respondents were asked was What task runner do you prefer using in your typical project workflow?

Let’s take a look at the results – where possible I’ve included the percentage change from last years survey:

Task Runner Number of Votes Percentage % Diff (to 2015) Gulp 2,060 43.69% -0.1% NPM Scripts 1,223 25.94% +22.78% Grunt 554 11.75% -15.81% Make 54 1.15% N/A GUI Application (i.e. Codekit) 93 1.97% N/A Other (please specify) 214 4.54% -0.34% I don’t use a task runner 517 10.97% -8.56%

What task runner do you prefer using in your typical project workflow? (if any) – Pie Chart showing the results

Looking at the results, Gulp is still the clear leader when it comes to front-end task runners with 43.69% (2,060) of responses.

The biggest movement is in the usage NPM Scripts, which got a 25.94% (1,223) share of the response, making it the second most used task runner tool. That’s an increase of 22.8% when compared to last years figures. This suggests that more front-end developers are trying to simplify their build tasks and take away the abstraction layer that tools such as Gulp and Grunt provide.

Meanwhile Grunt has seen a substantial drop in use, with just 11.75% of respondents saying that they prefer using the tool – a fall of over 15% from 2015.

Interestingly, the number of respondents not using any task runner has fallen to just 10.97% – down from 19.5% last year – showing that the overwhelming majority of front-end developers now utilise a task running tool on their projects.

Q12: Knowledge of JavaScript Libraries and Frameworks

This was one of the questions I was most looking forward to seeing the responses to. How have knowledge levels across the most popular JavaScript libraries and frameworks changed in the last year?

At the time of the 2015 survey, React was a relative newcomer still gaining ground on Angular. Since then, the Angular team has released version 2 of the framework, but have developers started to migrate over?

Here’s what the results show:

  Never Heard of Heard of/Read About Used a little Feel Comfortable Using jQuery 0.11% (5) 0.85% (40) 12.17% (574) 86.87% (4,096) Underscore 10.22% (482) 28.12% (1,326) 24.41% (1,151) 37.24% (1,756) Lodash 15.89% (749) 26.70% (1,259) 19.75% (931) 37.67% (1,776) Backbone 4.31% (203) 58.13% (2,741) 23.01% (1,085) 14.55% (686) Angular 1 0.66% (31) 40.21% (1,896) 30.43% (1,435) 28.70% (1,353) Angular 2 0.89% (42) 73.59% (3,470) 20.19% (952) 5.32% (251) Ember 3.75% (177) 78.41% (3,697) 11.71% (552) 6.13% (289) React 0.76% (36) 42.29% (1,994) 28.04% (1,322) 28.91% (1,363) Polymer 13.55% (639) 72.68% (3,427) 11.75% (554) 2.01% (95) Aurelia 43.71% (2,061) 50.03% (2,359) 3.20% (151) 3.05% (144) Vue.js 14.68% (692) 66.55% (3,138) 13.11% (618) 5.66% (267) MeteorJS 9.59% (452) 75.91% (3,579) 11.69% (551) 2.82% (133) Knockout 16.14% (761) 66.62% (3,141) 11.33% (534) 5.92% (279)

Please indicate which JavaScript libraries and/or frameworks you have experience in – Bar Chart showing the results

As was the case last year, jQuery is still the library or framework with the highest percentage of respondents – 86.87% (4,096) – who said that they felt comfortable using it. In fact over 99% of respondents said that they had used it at least a little, which is pretty remarkable for any tool.

Both Underscore (37.24%) and Lodash (37.67%) also had a sizeable number of respondents who said they felt comfortable using them.

When looking at the big hitting JS frameworks, the growth in knowledge of React is the most noticeable change from last year. It has not only caught up with Angular 1 (the leading MVW framework last year), but it has managed to even slightly surpass it, with 28.91% (1,363) of developers saying that they feel comfortable using it compared with 28.70% (1,353) of those that said the same about Angular 1.

It’s also interesting to see that Angular 2 uptake has been pretty slow so far, with 20.19% of respondents saying that they had used it a little but just 5.32% saying that they felt comfortable using it. I would suspect this number will grow over time, but it will be interesting to see by how much and if it reaches the level that Angular 1 has currently.

Looking at knowledge levels across the MV* frameworks – so everything in the list except jQuery, Underscore and Lodash – 62.23% of respondents said that they felt comfortable using at least one of these frameworks. That’s up just over 12% (from 50.2%) who said the same in last years survey.

As I noted last year, knowledge of at least one framework has become an important skill for many front-end developers.

Q13: Which JavaScript libraries and/or frameworks do you currently use most frequently on projects?

The next question referred to actual usage of the libraries and frameworks listed in the previous question.

The question was, Which JavaScript libraries and/or frameworks do you currently use most frequently on projects? with respondents invited to select all that applied.

Here are the results:

  Number of Votes Percentage jQuery 3284 69.65% Underscore 714 15.14% Lodash 1527 32.39% Backbone 301 6.38% Angular 1 1180 25.03% Angular 2 387 8.21% Ember 280 5.94% React 1776 37.67% Polymer 87 1.85% Aurelia 154 3.27% Vue.js 456 9.67% MeteorJS 115 2.44% Knockout 156 3.31% I don’t use any of these approaches or tools 132 2.80%

Which JavaScript libraries and/or frameworks do you currently use most frequently on projects? – Bar Chart showing the results

jQuery usage was again very strong, with over two thirds (69.65%) of respondents saying that they used it frequently on their projects.

Arguably more interesting is that 37.67% (1,776) of respondents said that they frequently use React, even though this is almost 10% more than the number who said that they felt comfortable using it when answering question 12. It can therefore be concluded that a decent number of those who said that they have used it just a little are also using it frequently on their projects.

In keeping with the results from question 12, Angular 1 was said to be used frequently by 25.03% (1,180) of respondents, while Angular 2 is currently well below that figure with 8.21% (387) usage.

Although knowledge levels were similar between Lodash and Underscore in the results of question 12, Lodash received more than double the number of respondents who said that they still use it frequently on their projects – 32.39% (1,527) compared with just 15.14% (714) for Underscore.

Also, a notable mention to Vue.js, which has been getting mentioned a lot recently, with 9.67% of respondents saying that they use frequently on their projects.


Q14: Which JavaScript library or framework would you regard as essential to you on the majority of your projects?

Question 14 looked at what JavaScript library or framework respondents considered to be their most essential tool, with the question being Which JavaScript library or framework would you regard as essential to you on the majority of your projects?

Let’s take a look at the results:

  Number of Votes Percentage None of them are essential – I feel comfortable using native JavaScript on my projects 985 20.89% jQuery 1468 31.13% Underscore 38 0.81% Lodash 262 5.56% Backbone 38 0.81% Angular 1 386 8.19% Angular 2 129 2.74% Ember 178 3.78% React 857 18.18% Polymer 16 0.34% Aurelia 113 2.40% Vue.js 148 3.14% MeteorJS 8 0.17% Knockout 17 0.36% Other (please specify) 72 1.53%

Which JavaScript library or framework would you regard as essential to you on the majority of your projects? – Bar Chart showing the results

The tools that the most respondents said was essential to them was jQuery with 31.13% (1,468 responses), followed by React which received 18.18% (857) of the vote.

20.89% (985) of respondents said that they did not think that any library or tool was essential – most likely due to the rise in knowledge of ES6 (also known as ES2015).

These were the only answers that received more than a 10% share of the vote, with Angular 1 the next biggest choice with 8.19% (386) of responses.

Perhaps most interesting is that even among those who rated themselves at having Intermediate level JS knowledge or higher, jQuery is still the most popular choice with 25.98% of responses in this category, compared with 20.06% for the next closest tool which is React.

It’s clear that jQuery is still playing an important part in many front-end developers’ toolsets.

Q15: JavaScript Module Bundlers

Looking at the results of last years survey, JavaScript module bundlers were still a tool used by a minority of front-end developers, with just 46.1% of respondents saying that they used one in their own workflow.

Will this have changed just over 12 months on? The question asked was Do you use a JavaScript module bundler in your workflow?

Let’s take a look at the results:

Module Bundler Number of Votes Percentage % Diff (to 2015) I don’t use a module bundler 1516 32.15% -21.75% RequireJS 359 7.61% -5.85% Browserify 510 10.82% -5.65% Webpack 1962 41.61% +31.11% Rollup 79 1.68% N/A JSPM 108 2.29% +0.07% Other (please specify) 181 3.84% +0.39%

Do you use a JavaScript module bundler in your workflow? – Pie Chart showing the results

In a massive shift from last year, 41.61% (1,962) of respondents are now using Webpack to handle their module bundling in JavaScript, making it the clear leader in this category.

The percentage of those now using any kind of module bundler has increased to 67.85% (3,199 responses), an increase of over 20% when compared to last years figures.

In terms of other module bundling tools, both Browserify and RequireJS have both seen a 5% drop in usage, with 10.82% and 7.61% of respondents saying that they use these respective tools.

Overall, it’s great to see so many developers embracing module bundlers. Webpack has obviously struck a real chord with developers and is now considered the go-to tool when it comes to handling JavaScript module dependencies.

Q16: JavaScript Transpilers

The next question in the survey is a subject that has been talked about a lot over the last 12-18 months.

The use of a JS transpiler, such as Babel, enables developers to transpile their JavaScript from ES6 (ES2015) back to ES5 so that they can use the latest JS features while still providing support for older browsers.

The question I asked was Are you using a tool to transpile your JavaScript from ES6 to ES5? (i.e. Babel)

Here are the results:

Answer Number of Votes Percentage Yes 2,942 62.40% No – I’ve heard of these tools, but haven’t used one 1,443 30.60% No – I’ve never heard of a JavaScript transpiler 330 7.00%

Are you using a tool to transpile your JavaScript from ES6 to ES5? – Pie Chart showing the results

The majority – 62.40% (2,942) – of respondents indicated that they are now using a JavaScript transpiler. Considering the short period of time these tools have been around, this shows just how valuable developers see working with ES6 features today.

Only 7% (330) of respondents had never heard of a JavaScript transpiler, again showing the remarkable reach that has been achieved in a relatively short space of time.

Looking at these results, it’s straightforward to conclude that having knowledge of a transpilation tool, such as Babel, is becoming a required skill for the modern front-end developer.


Q17: JavaScript Linting

JavaScript Linting, once a polarizing topic, is now firmly embedded in many developers workflows. But just how many people use one and is there a clear leader among tools that front-end developers use?

The question I asked was Which tool do you use to lint your JavaScript? (if any)

Here are the results:

Tool Number of Votes Percentage I don’t use a JavaScript linter 1,076 22.82% JSLint 894 18.96% JSHint 657 13.93% ESLint 1,927 40.87% xo 24 0.51% Other (please specify) 137 2.91%

Which tool do you use to lint your JavaScript? – Pie Chart showing the results

The majority of respondents – 77.18% (3,639 people) – indicated that they do use a tool to lint their JavaScript.

Comparing this to the results seen earlier in relation to CSS linting, there is an obvious gap between those who choose to lint their JavaScript and those who do the same with their CSS – a difference of 29.84% in fact, as just 47.34% of respondents indicated that they used a tool to lint their CSS.

40.87% (1,927) of respondents said that ESLInt was the tool they used, making it the most popular linting tool, followed by JSLint with 18.96% (894) and JSHint with 13.93% (657).

It’s great to see that linting is now considered the norm when developing JavaScript, especially considering the benefits it brings to code quality and consistency.

Q18: JavaScript Testing

The next subject provided some of the most interesting results in last years survey.

Last year the majority of respondents – 59.66% – said that they weren’t using a tool to help test their JavaScript. Are more developers using JS testing tools a year on?

The question I asked was Which tool do you use to test your JavaScript? (if any)

Let’s take a look at the results:

Tool Number of Votes Percentage % Diff (to 2015) I don’t use a tool to test my JS 2,241 47.53% -12.13% Jasmine 802 17.01% +0.64 Mocha 1,061 22.50% +7.46% Tape 69 1.46% -0.02% Ava 84 1.78% N/A QUnit 199 4.22% +0.37% Jest 164 3.48% +2.69% Other (please specify) 95 2.01% +0.33%

Which tool do you use to test your JavaScript? – Pie Chart showing the results

Looking at the results, the figures show some changes since last years survey.

The split between those who test and those who don’t is now pretty even, with 47.53% (2,241) of respondents saying that they don’t use a tool to help with their JavaScript testing. This figure is down 12.13% from last year.

This means that the majority of respondents – 52.47% (2,474) – are using a tool to test their JavaScript. This indicates that more front-end developers are seeing the benefits of learning and using a tool to test their JavaScript, which – I personally think – is great news.

Of those testing their JS, the most popular tools were Jasmine, with 17.01% of the responses, and Mocha, with 22.50%. Mocha has seen the biggest gains, with a usage rise of 7.46% on last years figures, making it the most popular testing tool.

Jest also saw a 2.69% rise in usage, with 3.48% (164) of respondents saying that they now use it as their primary JS testing tool.

All in all, I think this shows a positive step from last years figures on JavaScript testing, but there is clearly more work to be done to reduce the gap in knowledge of testing tools among front-end developers.

Q19: Miscellaneous Tools

The final question of the survey was to find out more information on tools that don’t quite fit into the questions that have been asked so far.

The list this year consisted of package management tools – Bower, NPM and Yarn – as well as Babel, a popular JS transpilation tool, Yeoman and TypeScript.

Respondents were asked to Please indicate your experience with the following front-end tools.

Here is how people responded:

  Never Heard of Heard of/Read About Used a little Feel Comfortable Using Bower 2.52% (119) 21.34% (1,006) 33.96% (1,601) 42.18% (1,989) NPM 1.76% (83) 4.01% (189) 14.15% (667) 80.08% (3,776) Yarn 21.40% (1,009) 50.56% (2,384) 14.32% (675) 13.72% (647) Babel 7.15% (337) 29.20% (1,377) 24.16% (1,139) 39.49% (1,862) Yeoman 11.56% (545) 41.53% (1,958) 33.47% (1,578) 13.45% (634) TypeScript 6.68% (315) 60.87% (2,870) 19.53% (921) 12.92% (609)

Please indicate your experience with the following front-end tools – Bar Chart showing the results

The most well-known tools in this list were NPM, with a huge 80.08% of respondents saying that they feel comfortable using it, Bower with 42.18% and Babel with 39.49%.

It’s interesting to see that although Yarn has only been around a few months, 78.6% of respondents had at least heard of it or used it in some way.

The number of respondents who felt comfortable using Yeoman, TypeScript and Yarn was fairly low, with these tools receiving between 12-14% in that category.


So that’s it – you made it through! But what conclusions can we make from the survey overall?

As with last years results, the adoption rate of front-end tools shows no signs of letting up, with tools such as Webpack and JavaScript transpilers becoming ever more essential in our workflows.

Although there has been a lot of talk about front-end developers moving away from using jQuery, the results show that usage and knowledge levels are still unrivalled in comparison with any other JavaScript tool of it’s kind.

The great news is that more people seem to be using a JavaScript testing tool than not, showing that more front-end developers are embracing the value that these tools provide.

Looking specifically at CSS, the adoption of methodologies, linting and naming schemes seems to be a bit slower. This is most noticeable when comparing the number of respondents linting their CSS compared to those doing the same with their JavaScript.

Whether this is down to developers seeing less value in investing their time in learning these tools is unclear. I’d encourage anyone reading this to put the time into learning some of the more popular CSS methodologies and tools such as SMACSS, OOCSS, CSS Modules and BEM. They really do help broaden your knowledge of CSS in terms of learning ways to structure and maintain your CSS, so that you can then choose the approach that best works for you.

If anyone has any questions about any of the results, or would like me to look at other cross sections of the responses, message me on Twitter and I’ll do my best to help!

Originally published here, republished with the writer’s permission. 

Bourton Font Family of 34 Fonts & More from Kimmy Design – only $17!

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

April 04 2017

Become a Better Designer With FullStory’s Latest Features

April 03 2017


Essential Design Trends, April 2017

It’s all about geometry. The trend is design right now centers around interesting shapes and layers that combine to create stunning visuals.

While there have been periods where squares or circles were the shape of choice, that has shifted to more interesting asymmetrical shapes, lesser used elements such as diamonds and layering of shapes of all kids. Here’s what’s trending in design this month:

1. Diamonds

The simple diamond shape that you drew in elementary school is popping up in plenty of designs. From use as a container for photos to an outline for visual emphasis to the dominant part of a photograph, the shape has plenty of flexibility.

And it simple.

This style is no more than a square turned on its side. The sharp lines make for interesting reference points in the design and can add an element of motion or direction that doesn’t exist otherwise. The diamond stands out in these designs because it is so different.

While the shape can be used in a number of ways, it can be somewhat tricky. As a photo frame, you’ll lose parts of an image on all four corners, so you’ll need images that have more of a center focal point so that the meaning is not lost. The layering of diamond-shaped photos in the Hannington Estate design does an excellent job of this. The user doesn’t feel like anything is missing from the images.

As a border or visual element, the diamond shape can serve as a place to draw the eye. Linstant Unique does this by putting the text call to action inside a diamond frame. It’s more visually interesting than just putting the text on the image alone and draws the eye into the image.

Finally, Solicitor Surry takes a totally different approach and uses a diamond shape in an image to add interest. A clock might not be that visually appealing on its own, but the shape helps draw users in to the image.

2. Asymmetrical Geometry

This might be one of the best trends to pop up in a while: asymmetrical shapes in design projects.

Nothing gets more boring over time that a bunch of perfectly symmetrical designs. This trend can help anyone break out of that rut with interesting shapes that immediately make you rethink balance.

Asymmetrical shapes are a good tool because they are so interesting and unexpected. They provide directional emphasis – note how the top left corner of the shape used in the Ghafari website leads you to the branding, and then down the page with extra white space.

The biggest challenge with asymmetrical shapes is how to deal with the white or trapped spaces that they can sometimes create. (You’ll have to get creative there, but the examples below make it look easy.) The other challenge can be ensuring that the asymmetrical design still has balance. You’ll need to play with the weights of elements – and maybe use heavier typefaces to offset the bulk that an asymmetrical shape can carry.

When starting with an asymmetrical shape design, keep the concept simple. The funky shape is your design trick in this case. Opt for shapes with color to balance a white background or layer shapes with images for a more Material Design-inspired look. Another option is to experiment with 3D shapes, such as One Year in Review.

No matter what option you choose, asymmetry is a definite eye-catcher. It creates a fun, funkier first impression and helps users dive deeper into the overall design. Use it for websites that are less formal and that push the envelope somewhat with style and content. 

3. Layering

Layering various shapes adds extra dimension to almost any design project. More tactical design patterns have made this technique more popular and combining shapes in various layers is an easy way to start.

The examples below show three different ways to do it.

  • Chrissen Rajathurai’s portfolio layers simple rectangles over a blurred, oversized background to bring focus and emphasis to each individual portfolio item and link. The layered effect is classic and stunning. Users want to keep moving through the design to see what other images come up next.
  • Cantina Roeno layers images on an illustrated background below the scroll. The movement from the hero video homepage to phot layers makes the user slow down and look at the content on the screen. While the video is fast-paced and design for quick viewing the layered images – with interesting vertical orientation – background and text help users pause and take in the story of the winery.
  • Atlis takes a totally different approach. The design uses two geometric trends – layering in a very Material Design style – and asymmetry with a box that twists and turns in to more trapezoidal forms with hover actions. The design is so simple that you can’t help but look at it. It’s also quite complex with the stretchy movement of the “Can Atlis help?” box. Keep scrolling and even more shapes with varying degrees of asymmetry pop onto the screen. This deceivingly complex site design is a lot of fun to play with.


When planning your next project, think geometry! How can you use simple shapes in new and interesting ways to encourage engagement and give users something different to look at in the process. There are a lot of different ways to use geometry in design projects, pair shapes with interesting animation, color or imagery to create a design that showcases your content.

And have fun. Geometric patterns have a lighter, less formal feel than some other design concepts. Use that to your advantage when using these techniques.

< p class=”p4″>What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

The Complete Vector Blueprint Kit from The Artifex Forge – only $9!

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

April 02 2017

Popular design news of the week: March 27, 2017 – April 2, 2017

April 01 2017

Will Client AI Redefine the Design Industry?

March 31 2017


Google Unveils New Home for Open Source

On the back of Google’s successful open-source projects such as Kubernetes and TensorFlow, it’s no surprise to hear that the Mountain View, California-based company is taking another step into open source.

This time, it’s launching an all-new website dedicated to showcasing all of Google’s open-source projects in one handy URL. Google’s Open Source site is based on the philosophy that everyone benefits from open source, and developers now have another repository to access if they want to collaborate on the creation of new technology.

The projects’ code will still exist on Google’s own self-hosted git service as well as GitHub, yet this new site is going to operate as a central directory for them. Though showing off Google’s projects is the main point of the new site, it’s not its only purpose. Google says it’s also going to use it as a way to give developers a behind-the-scenes look at how the company operates its open-source projects.

According to the announcement on Google’s official Open Source Blog, the company’s open-source protocols are based on many years of experience and lessons its teams have learned along the way. However, the company cautions that developers shouldn’t read their documents as a definitive “how-to” guide, seeing as how there are multiple ways to do open source.

Conceding that its way may not be the way for everyone, the company nonetheless is letting outsiders have a look at its open-source approaches.

The new site currently features 2000 projects, and this list is by no means complete and will continue to grow.

Together with this new site going live comes word that Google is making public a collection of its documents concerning how it handles open source internally. The subjects in the documents cover a range of topics, everything from the particulars of Google’s release processes for its new projects and how to go about submitting patches to other projects, to the company’s policies on dealing with third-party open-source projects that it uses internally.

Google has a long history with utilizing open source for innovation. Think of this site as a way of Google returning the favor to the open-source community. Site visitors can expect to see released code that pushes the industry forward, gives insights into best practices, or is just fun to see.

Google’s already had success with its recent open-source projects. The aforementioned Kubernetes and TensorFlow have grown to where they each have big ecosystems around them, so these new documents are definitely worth a glance, from a developer’s standpoint. If nothing else, checking out the new open-source site will be helpful for other companies that are thinking of releasing their internal code as open source.

The Must-Have Developer Manifesto Poster – 30% off!

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

March 30 2017

How to Succeed With Design Thinking

March 29 2017


Designing with extreme prejudice

It’s a controversial third rail topic most people acknowledge, but do their best to avoid talking about: classism dominates our lives.

Most people mistakenly believe class is simply about how much money you make. There’s actually two completely separate ingredients at play here.

  1. Economic class. The amount of money you bring in and how you spend that money.
  2. Social class. How respectable and educated you are, the family you come from and the rules (e.g. values, beliefs, morals, etc.) you follow.

Changing your economic class is easy. Just make more money and spend it on the right things.

Social class is much more difficult to change. That’s because it’s based almost entirely on culture.

The best designers work with this prejudice

Social class is a classic example of In-group favoritism. If you’re part of the group you’re accepted and welcomed as part of the group. As people, we have a tendency to favor our own groups over everyone else.

We look down on those who aren’t part of our groups, treating those who aren’t like us as outsiders.

Every group has its own set of rules which typically includes…

  • Values and beliefs
  • Interests
  • Imagery and presentation
  • Colors and designs
  • Social norms

This isn’t everything.

Each class or group has hundreds of rules with specific right and wrong answers for each. These details create a group or class identity. “If you’re one of us you’ll do what we do.”

Your designs should cater to these details

Wait a minute!

Why do we need prejudice in our designs? Why can’t we design something good that’s free from all bias?

Because “good” is subjective.

Don’t misunderstand; I’m not suggesting you should run out and do something unethical. I’m recommending that you work within the framework (e.g. values, expectations, etc.) established by the group you’re designing for.

Take these four sites for example:

Craigslist is an ugly site. But they serve 60 million people in the US alone, making 381 million dollars in 2015!

Hacker News isn’t beautiful but it’s a tight knit community, serving 200K to 300K users per day.

The Drudge Report is really ugly. Yet, they manage to generate 300K unique visits per day making its sole owner, Matt Drudge, more than a million dollars per year. It’s also one of the best designed sites on the internet according to Jason Fried.

4Chan is a passionate community of gamers. It’s a top 500 site with more than 98 million active users who are intensely loyal.

Did you see it?

The theme with these sites?

They’re collectively viewed as “ugly”. They reject modern design principles, make things more difficult for users and aren’t really intuitive to use. Yet these sites are all extremely popular.

So what rules are these communities following?

  • Form follows function
  • Utility > aesthetics
  • Knowledge > emotion
  • Pretty may be viewed as “selling out”

How do I know?


Their readers were developers, designers, and techies. People who believe form should follow function. Somewhere along the line Digg lost sight of that.

They redesigned their site and changed their logo, losing 35 percent of their audience almost overnight. 

What about luxury car manufacturers?

Have you ever noticed that luxury products – cars, perfume, clothing, etc. Seem to use less words, but say more with their designs and marketing?

That’s no accident.

Presentation is an important upper class value.

They get their message across with imagery and presentation, using their design to speak directly to their customers – the less words used, the better.

What rules are these sites following?

  • Presentation > quality
  • Quality is assumed
  • History, the past impacts the future
  • They’re part of an elite/exclusive club

This makes sense when you realize the rich believe they’re better, smarter and more virtuous than everyone else. The designers who created these sites would probably disagree with that. 

They still worked within that prejudice to create something that serves their clients.

Here’s the part average designers miss

Average designers create designs based on their worldview and what they want. They focus on what feels good (to them), works best (for them), what looks good (to them). Often times they completely neglect the needs of the people they’re designing for.

Which almost always guarantees an unhappy client.

The best designers use their client’s prejudice to meet the wants and needs of everyone involved – clients, customers, partners, etc.

So how do you use classism in your designs?

First, start with your non-negotiable anchor points. Have a clear set of guidelines, know yourself. Follow your conscience.

Are you comfortable designing something, immoral or unethical? Are you comfortable creating something for someone with values and beliefs you find controversial, disgusting or extreme?

Where is your line? How will you handle it when others ask you to cross that line? Plan your course of action ahead of time.

Second, do your very best to understand those you’re designing for.

Every group believes other groups are inferior. The upper class looks down on the wealthy. Middle class workers resent upper and lower classes. Vegans, vegetarians and meat eaters resent each other.

Remember when I mentioned each group comes with its own set of rules? Take the time to learn those rules. Learn about their expectations regarding…

  • Values and beliefs
  • Interests
  • Imagery and presentation
  • Colors and designs
  • Social norms
  • Language, jargon and figures of speech

Learning about these details creates a design framework. Believe it or not, these limitations will improve your designs. But only if you’re aware of them.

Let’s say you’re designing for a group of developers. They believe form follows function, so using a beautiful cursive font like Wahhabi Script may not be a great idea.

Third, talk to people in each group.   

What does your client stand for? What do their customers expect? Take some time and interview them. Learn about their rules and expectations. Find ways to bridge any potential conflicts in your designs.

Finally, when you’re ready, design.

Create something that conforms to their worldview. Your job isn’t to change their minds, it’s to serve. Meet them where they are and you may get an opportunity to change hearts and minds.

Use force or coercion to get your way and rejection is virtually guaranteed. Average designers push for what they want. “I’m the expert!” they tell themselves. 

I don’t use classism in my designs and I do just fine

Ah, but you do.

It’s a foundational part of life. Standing for this excludes that. Brutalism can’t be Modernism, in the same way at the same time.

When you design, you make a choice.

Average designers are okay with mediocre results. The client’s happy so I’m happy.

Elite designers focus on outcomes. “My work changed the way customers looked at your business. My work changed an industry, product or service.”

Classism is the last socially acceptable prejudice

Each class or group has a list of rules with specific right and wrong answers for each. These details create a group or class identity. “If you’re one of us you’ll do what we do.” It’s certainly not ideal, but it is something we have to deal with as designers.

Want to become an elite, sought after designer?

Start with understanding and acceptance. Work to accept people as they are, respecting their boundaries, rules and expectations. Meet them where they are and you’ll find their prejudice stops mattering.

Mega Action Bundle of 4 Photoshop Add-Ons – only $19!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
Vivaldi Browser’s New Feature Makes History

March 28 2017

15 Psychology Hacks that Boost UX

March 27 2017

How to Sell Games on the Web

March 26 2017


Popular design news of the week: March 20, 2017 – March 26, 2017

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

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

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

Bored with Hamburger Menu, Time to Try these Alternatives


Web Design Freebies: The Ultimate List for 2017


Best Design Advice no One Ever Gave Me


9 Simple Tips for Designing a Successful Logo


The Cost of Bad Design


Anybody Can Build an App (or Bots) Easily with this New Coding Site


8 CSS Tricks You Never Use


Got 15 Minutes and Want to Learn Git?


Meet the Next Smashing Magazine


ColorWare’s Retro-styled iPhone 7 Plus is Beautiful and Expensive


Icons for Change — by Noun Project


3 Things Design Researchers Can Learn from Online Dating


Screenshot? Ugh, You’re Doing It wrong!


Which Responsive Design Framework is Best? Of Course, it Depends.


Essential Web Design Software for Beginners: Tools of the Trade


Paper Airplane Icons


10 of the Best Notebooks for Designers


The Ultimate Guide to Keeping a Steady Stream of Web Design Clients


Text Effects with CSS


Google Turns Search into an App Launcher (and It’s a Pretty Big Deal)


8 Ways to Improve your Website’s UX


Google Maps Can Now Save your Parking Spot


The 10 Best Newsletters Web Designers & Developers Should Subscribe to


How to Successfully Design for the Confusing Way People Buy


The Three Hour Brand Sprint


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

300+ Professional Sports Emblems and Elements – only $17!

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

March 25 2017

Comics of the week #384

March 23 2017

A Beginner’s Guide to Designing Conversational Interfaces

The Future | Inspired by Nature

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

Nature* feeds us, purifies the air we breathe and the water we drink. Unbeatable booster, it cures stress, sadness, reenergizes humans. It’s all around us but most of us fail to appreciate it or even notice it, which is a bit like turning the back on our own selves. No, we’re not going into a philosophical discussion about nature, and how our own beings are (part of) nature. We’re just trying to remind you of the importance of looking at nature – an incredible source of endless inspiration on top of everything else.

Look again, or maybe for the first time, with the curiosity of a child. Sure, the occasional romantic strolls help too, but don’t forget to study, explore, examine, through a magnifying glass if needed. Be amazed by the universe at our fingertips.

“Glance at the sun.
See the moon and the stars.
Gaze at the beauty of earth’s greenings.
Now, think.”

~ Hildegard von Bingen

Nature as a Blueprint for Sustainability

Did you know that the ubiquitous Velcro was inspired by the way plant burrs stick to dog hair? Yep, almost 80 years ago, the Swiss engineer George de Mestral started his velcro adventure simply by looking at the burrs under a microscope. Did you know that solar cells mimic butterfly wings? Made up of tiny scales, the wings are surprisingly good at harvesting light. Did you hear that the veins in the tree leaves can inspire robust and resilient building distribution networks?

From ant nest to architecture, from caterpillar’s roll to medical instruments, this “approach to innovation that seeks sustainable solutions to human challenges by emulating nature’s time-tested patterns and strategies” is called biomimicry. Small wonder that an organization focused on sustainability like the David Suzuki Foundation came up with this spot-on slogan: “Solutions are in our nature”.

Clean 360° Designs

We can agree that biomimicry has worked miracles in many areas, and it’s now an essential part of the renewable energy landscape. In the exploratory trip humanity is currently undergoing, clean(er) solutions to an insatiable need for energy is the goal. Simplicity is at the heart of it, as a way to tackle this complex energy crisis.

How to better improve your relation with nature if not by trying to imitate its non-invasive, sustainable ways? And why wouldn’t we want renewable, old as the world, (almost) free (still, in most corners of this world), clean, or producing significantly lower carbon emissions (compared to so-called conventional energy sources)?

Below we’ll have a look at wind and solar, two of the most popular and innovative alternative sources of energy and their new interest in going full circle, cradle to cradle.

Smart Flower Solar

We saw this fantastic invention in the streets of Paris, on a cold winter day in December 2015, during the United Nations Climate Change Conference. The first thought what: yes, it makes perfect sense. Why didn’t we think about this before? Maybe we did, but somehow failed to make the connections.

Now this blooming sunflower has made the rounds on social media, and for all the right reasons. Unlike static solar panels, this one follows the sun, just like a sunflower in a field, thus catching the sunlight all day. “Inspired design, intelligent solar”, the smartflower is easy to set up and connect, fully integrated, all-in-one solar system that can live anywhere. Designed to be a plug-and-play system, it does make solar simple(r). It’s also 40% more efficient in energy production than traditional solar and can be easily packed up and moved to a new site. Big plus.

Taking into account the fact that the sun provides more than enough energy in just one hour to supply our planet’s energy needs for an entire year, just imagine the possibilities.

Tree-Shaped Wind Turbine | L’Arbre à Vent

New Wind is a company inventing biomimetic devises that deliver sustainable electrical services. They’ve put together this wind turbine resembling a tree where each leaf is capable of producing electricity from the slightest waft of air within a radius of 360°. It offers immediate consumption in proximity to end-use, while, you’ll have to agree with them, also providing an esthetic and emotional contribution to the urban landscapes (huge part of any fierce debate on wind turbines).

This L’Arbre à Vent is small enough to fit in your backyard, using air flow through wind turbines to mechanically power generators for electric power. On the one hand, you have the force of the wind. On the other hand, the structure of the tree. That’s like a double jackpot. Not only inspired by nature, but running on nature too.

Who knows, treehugger or not, dosing under thick with aromas cherry trees in spring might have produced similar tree-shaped wind turbines.

Here to Stay

The Tesla Solar Roof, the machine that pulverizes glass bottles into sand (back to the initial state!), and dozens of other similar recent inventions prove that looking closer at nature pays off.
Like it or not, change is happening no matter how many science deniers rule the world. It’s the change brought about by curious informed people that casts gleams of hope on our rather precarious present.

If for whatever reason nature is not in your agenda on a daily basis, try to follow specialty classics like National Geographic, or the plethora of online publications brimful of similar stories.
Keep on being captivated and engaged, share the positive changes. Exploring the potential of the world around us is essential in finding solutions for a sustainable high performing innovative future we can be proud we’ve created or at least encouraged.

Frank Lloyd Wright had one the most inspired and inspiring advises ever: “Study nature, love nature, stay closer to nature. It will never fail you”. May the force (of nature) be with you!

* Nature: The phenomena of the physical world collectively, including plants, animals, the landscape, and other features and products of the earth.

This post The Future | Inspired by Nature was written by Anca Rusu and first appearedon Inspired Magazine.

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!