The State of Front-End Tooling

April 5th, 2017 No comments

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.

Summary

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

Categories: Designing, Others Tags:

CSS Icon: Pictograms in Pure CSS, Optionally Animated

April 5th, 2017 No comments

The freely usable web app “CSS Icon” does not only deliver pictograms in pure CSS for free, but it also allows you to define animated transitions between any two of the package’s symbols.

Adobe Designer With Love For Detail

Wenting Zhang works as a UX designer for Adobe’s Typekit. Thus, it is no surprise that he has a thing for typography and icon design. To facilitate this passion, aside from his primary occupation, he runs tons of side projects in this field.

The project “Type Detail” is one of them. Here, he gives a meticulous explanation regarding the characteristics of different popular, and less popular fonts. Typography fans should definitely take a look at the project.

Type Detail Dissects Fonts. (Screenshot: Noupe)

His project underline.js seems even nerdier, as it’s all about finding the perfect underlining. As you can see, this man is serious when it comes to details.

CSS Icon Animate: Pure CSS Icons, With Morphing Animation Options

His project “CSS Icon” is also useful for those designers that are not that much in love with details. Here, he originally stored 512 pictograms, made exclusively with CSS, without any dependencies, making them usable on their own, if necessary. The evolution of the project doesn’t provide the full extent of symbols, but it has become a lot more attractive.


CSS Icon: Landing Page. (Screenshot: Noupe)

CSS Icon: Code Snippets to Copy and Paste

In the current version of “CSS Icon,” you’ll find about 200 symbols. Zhang promises to add more on a regular basis. The web app comes with to functionalities. Clicking a single icon opens a detail window on the right side of the overview, allowing you to copy and paste the entire required source code for this icon.


On the Right, A Selected Icon Appears in the Detail View With its Entire Code Snippet. (Screenshot: Noupe)

To toy around with the configuration a bit, there’s also the option to switch over to Codepen with the snippets, and experiment in the browser on there.

CSS Icon Animate: Morphing Light Between Two Icons

Access the second functionality by clicking the small word “animate” in the top left of the browser window. Now, you have the option to select two pictograms. The first one turns into symbol A; the second one becomes symbol B.

Now, the detail window we already know opens, including the required code snippets. However, this time, you won’t only find HTML and CSS, but JavaScript as well.


Choose Two Icons; the Animation is Created Automatically. (Screenshot: Noupe)

Using the option “Animate,” the web app creates animated transitions between the two selected icons. In my example, the left-pointing arrow is morphed into a reight-pointing one. This generally works with all symbols, but, as you can imagine, doesn’t look nearly as good and convincing for all of them. For example, if you let the icon “Nine o’Clock” turn into “Three o’Clock,” the small watch hand is only pushed from left to right. Of course, usually, nobody would animate it like this.

In contrast to that, the animation from the icon “Full Battery” to “Empty Battery” looks just like you would expect. In any case, “CSS Icon” is an enrichment for your design toolbox.

CSS Icons: Freely Usable Under CC0

Zhang provides his project under the license Creative Commons Zero, which is roughly equivalent to Public Domain, meaning it is completely free for anyone and any purpose. Thus, you can use the icons without any worries, even for commercial purposes and, more importantly, alter them however you like.

The project is available on Github as open source. To only use it, a visit to the project site CSS Icons does the trick.

Categories: Others Tags:

Six Unusual Ways to Get More Freelance Clients Than You Can Handle

April 4th, 2017 No comments
freelance design clients

We often say that ‘work is worship’ or that keeping yourself engaged is the most satisfying feeling you can have. But, what if you don’t have anyone to work for? In every venture you step into, there will always be a great risk involved or you may not be getting enough clients for your work.

via GIPHY

Be it a professional or an amateur, acquiring freelance clients is probably one of the toughest jobs out there. Needless to say, you can be pushy or squander tons of money on unnecessary advertising, but apart from creating a wide hole in your pockets, it doesn’t really help.

This article provides you with the top six unusual techniques that can get you more clients than you could handle.

1. Social listening

The internet offers a vast pool of opportunities for freelancing activities. In such a scenario, it really all comes down to finding them first. Social listening done right helps you track conversations that are centered around specific phrases or words. Thus, helping you discover new opportunities or clients. If you are looking for specific prospects online, using the right keywords can go a long, long way in distinguishing you from the rest; providing you with tons of work in advance.

Let’s say that there are 100 clients who are looking for freelancers online for a specific project. By using efficient social listening tools, you can pursue these clients and pitch to them first. This will cause you to have a greater probability of acquiring the client as compared to others.

What are some of the best social listening practices? There are lots that you could follow. Some of them including the use of specific keywords that clients might use while looking for freelancers online or tracking conversations involving hiring opportunities using social listening tools like hootsuite, klout etc. There are many options to choose from, depending on the work you would like to undertake, based on your experience or skill set.

2. Collaborate with agencies

When it comes to building a stronger client base, there is nothing better than teaming up with different agencies that can help you find prospects online. Relationship building plays a very crucial role in networking for work and collaborating with the right people can pay off efficiently in the long run. Sometimes, it can be all about knowing the right person.

For instance, if you’re looking for freelancing in the field of journalism, you can tie up with leading newspapers to provide your services at a discounted rate. This will help you get more recognition and expand the existing number of customers you possess. This way, you will also add value to your work while working for different clients.

Furthermore, you could offer incentives to agencies for finding clients on your behalf, such as a 25% finder’s fee or a special discounted rate for your services in the future. However, it is also necessary to communicate what type of clients you would like to have, and you can briefly describe your needs to agencies for finding the ‘right’ job for you.

3. Create an informal referral program for your existing customers

Publicity via word of mouth is perhaps the most efficient way to land clients easily into your pocket. Referrals and recommendations go a long way in building your reputation as compared to a prolific CV or an awesome portfolio, as most tend to trust people they know personally more than someone completely unknown to them.

In order to create an informal referral program, you could offer your existing clients waiver in fees for referrals, or you could also provide free services in exchange of references. Either way, working at a discount is always better than having no work at all. The most advantageous aspect about referrals is that you do not need to expend your time or money on outreaching and marketing activities, as referrals themselves generate a lot of offers to work on. All you need to do is provide amazing services to your clients, and they’ll automatically refer you to others.

Always know, the more people that refer you, the more you are known for your work; and being famous is always good for business.

4. Don’t be scared to do pro bono

If you think that working for free is a waste of your time, think again. Studies indicate that providing pro bono services to customers helps generate goodwill, that can lead to many new client prospects in the future. It’s particularly important to those who are starting afresh, as it offers them a scope to showcase their skills, and at the same time build their portfolio.

While getting clients out of pro bono work can be a long-term thing, the payout is certainly worth considering. You can reach out to those who are in need of expert advice, and offer your services for free. Another way is to offer your opinion about the existing state of affairs they have, and how they can improve them.

However, it is necessary to make sure that your services are valued in the eyes of others. The person receiving your services should not conclude that because you are helping them, you have nothing else to do. To ensure this, make sure your client knows what you would normally charge for your services and appreciates your effort in doing it for free. You can also ask for referrals upon completion of work.

5. Create out-of-the-box projects

In a world so competitive, standing out from the rest is equally important to being good at your job. Being creative goes a long way in establishing your expertise. If you have something that is different from others, it acts as a secret weapon to attract more customers and thereby generating more revenue. Creating out of the box projects will certainly create more value for your work.

To attract more clients, one can undertake several initiatives like offering them discounts for your services on special occasions, such as on Thanksgiving Day or Christmas, or by going the extra mile and providing more than what they signed up for. In either case, the objective should be to make the client feel special and give him a more satisfactory experience.

Another approach to this is to start creative projects where you can showcase your expertise. You can use your imagination to come up with ideas to portray your skills in a manner never experienced before. For example, if you are into providing technical services, you can create cool games like the startup simulator or make my pulse, here and here.

6. Social media- Making the most of it

It may seem clichéistic, but the best way to attract new clients is by increasing your visibility on social media platforms like Facebook, LinkedIn, Twitter, Instagram, etc. Freelance oriented fields are gaining a lot of traction on social media, as potential employers regularly look out for talent and expertise on these platforms. With the help of social media, you can network better with your clients to acquire information about their preferences or gain insights from the current trends.

However, maintaining your reputation online is also important, as social media can fuel defamatory materials and rumors quite easily. Reputation Defender blog is a useful online reputation management tool in this regard. Apart from networking and visibility purposes, you can also advertise on major platforms to attract more clients, if you can afford it.

So make the most of these unusual techniques to get more clients for your expertise and the right jobs you desire!

Read More at Six Unusual Ways to Get More Freelance Clients Than You Can Handle

Categories: Designing, Others Tags:

Lazy Loading Gravatars in WordPress

April 4th, 2017 No comments

Most WordPress themes show user Gravatars in the comment threads. It’s a way of showing an image with the user, as associated by the email address used. It’s a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren’t always particularly tiny files. Yeesh.

Let’s lazy load them.

The Concept

Lazy loading is the idea that you don’t even request the image at all (no HTTP request) unless the image is visible. Meaning that, through JavaScript, we’ve determined the image is visible.


Lazy loading means not loading those two images that are outside the browser window, until they become inside the browser window.

In order to stop those HTTP requests for not-yet-seen images, we need to get our hands directly on the markup. If there is an in the HTML, there is essentially no way to stop the browser from downloading that image as soon as it possibly can, seen or unseen. So, we need to remove that src, and put it back when we’re ready.

Woah, There

It’s worth a pause here because we’ve entered some murky territory.

By removing the src of these images, and only ever putting it back with JavaScript, we’ve decided that we’re willing to ship slightly invalid HTML and rely 100% on a script downloading and executing for these images to ever be seen.

I’m OK with that. Mostly because gravatars are just an enhancement anyway. It ain’t no big deal if they never show up. I’m not a hardliner most JavaScript debates, but this seems like a particularly clear case where we can lean on JavaScript without worry.

Altering the HTML

This is the change we’d be making:

<!-- Normal image. No beating the browser preloader. -->
<img src="https://gravatar.whatever..." alt="" />

<!-- Let's change to this, which won't download anything. -->
<img data-src="https://gravatar.whatever..." alt="" />

Although a missing src on the is technically invalid HTML. It almost certainly doesn’t really matter in that it won’t affect how anything works. If the invalid HTML bugs, you could always toss a super minimal blank GIF data URL in there, like:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" ... />

Using width and height attributes is probably a good idea too, to maintain layout and avoid reflow if and when the images to load.

Altering the HTML… in WordPress

But how do you change the HTML that WordPress spits out as part of a comment thread? Comments are slightly unusual in WordPress in that WordPress core gives you the HTML, it isn’t part of your theme like most of the other HTML is.

Likely, in your `comments.php` file, you’ll see this function:

<?php wp_list_comments(); ?>

Which spits out a pile of

  • ‘s with your entire comment thread. Not a lot of opportunity there to be fiddling with the output of images. Except, we can! We can list a callback function in there:

    <?php wp_list_comments('callback=csstricks_comment'); ?>

    That callback is the name of a function we can toss in our `functions.php` file. Here’s an example of that function, which must return a

  • :

    function csstricks_comment($comment, $args, $depth) {
    
      $GLOBALS['comment'] = $comment; ?>
    
      <li <?php comment_class(); ?>">
    
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="50" height="50" class="lazyload-gravatar" alt="User Avatar" data-src="<?php echo get_avatar_url(get_comment_author_email($comment_ID), array("size" => 160)); ?>">
    
         <?php comment_text(); ?>
    
      <?php # phantom </li> ?>
    
    <?php }

    That’s very simplified, but you can see what we’ve done. We replaced the src with the blank GIF, we’ve added a class name we’ll ultimately use in JavaScript to do the lazy loading, we’ve added a data-src to the actual gravatar, and we’re using width and height attributes for placeholding. Here’s my actual complete callback live right now on CSS-Tricks.

    If we shipped this right now, sans any JavaScript work, we’d still have a perfectly functional comment thread, just with images that never load.

    Now We’re Ready to Lazyload

    The hard part is over. We’re perfectly set up to do lazyloading now. If we were to write a script, it would be like:

    1. Figure out the visible area of the browser window
    2. Figure out the position on the page of every image with class .lazyload-gravatar
    3. If any of those images are in the visible area, flop out the src with the value from data-src
    4. If the visible area of the browser window changes in any way, re-evaluate the above

    We could set about writing that ourselves. And we could do it! But, and I’m sure you’re not surprised here, it’s a bit tricky and nuanced. Cross-browser concerns, performance concerns, does-it-work-on-mobile concerns, to name a few. This is the kind of thing I’m happy to lean on other’s work for, rather than roll myself.

    Again, no surprise, there are loads of options to pick from. In my case, I’m happily using jQuery on CSS-Tricks, and I picked a jQuery-based on that looked pretty good to me:

    The API is as simple as can be. After bundled up the lib with the rest of the libs I’m using, I just call:

    $('.lazyload-gravatar').Lazy();

    Look how nicely it works!

    That’s an awful lot of saved HTTP requests and awful good for performance.

    Makes you wish web standards and browsers would get together on this and make it a native feature.


    Lazy Loading Gravatars in WordPress is a post from CSS-Tricks

  • Categories: Designing, Others Tags:

    50 Vibrant Illustrations To Let Your Mind Wander

    April 4th, 2017 No comments

    On days when things don’t seem to go as you’d like them to and inspiration is at its lowest, it’s good to take a short break and go outside to try and empty your mind. That always seems to be the best remedy for me, especially whenever I jump on my bike and go for a short ride.

    Now the time has come to enjoy these moments even more as the spring season finally starts to show up in nature. We’re starting to see green leaves on the trees again, and every morning I wake up to the sounds of the birds chirping. I really enjoy these small joys of spring — who doesn’t?

    The post 50 Vibrant Illustrations To Let Your Mind Wander appeared first on Smashing Magazine.

    Categories: Others Tags:

    Become a Better Designer With FullStory’s Latest Features

    April 4th, 2017 No comments

    There are three kinds of lies: lies, damned lies, and statistics—often mis-attributed to Mark Twain, the anonymous quote sums up the truth about stats; they can be misunderstood.

    It’s not uncommon for a single fact about a web site to prove two different truths. Take your site’s bounce rate for example, a high bounce rate is bad because people are leaving your site immediately, and a high bounce rate is also good because people found what they wanted on your site immediately.

    That’s why many analytics services worthless, by providing a simple statistical overview they can support multiple, conflicting, conclusions.

    Measuring success…is key to…design

    But designers can’t evaluate their work without analysis. Measuring success (and failure) is key to iterative design, and ultimately the profitability of any design.

    Which is why we’re so excited by the latest feature released by FullStory. FullStory is an analytics company, that provides intelligent insights into your users’ journey through your site. The latest version of the analytics service has two new features: Page Insights and Click Maps.

    Click Maps are designed to show you, at a glance, exactly what elements of your site users are interacting with. What Page Insights adds to that knowledge is context, and a deeper understanding of what those statistics actually mean.

    Page Insights answers questions like: What elements are most clicked on this page? Has changing our pricing affected how users behave? Where are our errors cropping up most often? Coupled with the path the user takes, Page Insights helps you understand why a user behaves the way they do.

    One of the best things about Page Insights is that it’s beautiful to use. This might sound like an optional extra, but when stats are presented on a spreadsheet, they lose their meaning. Page Insights is a beautifully realised UI, which makes it a joy to use. And the x-ray style segue helps you stay on track following a user’s path. It’s a system that you’ll want to delve into.

    Page Insights solves two particularly taxing problems: firstly, with single-page apps, you frequently have different states for a single URL—this can be due to something as simple as an offer being presented in a singular geographic region; secondly, you may have an overly-specific URL—this could be due to the user’s ID could be part of the URL. Other analytics providers fall foul of these issues, but Page Insights sales through.

    If you’ve used analytics before, you’re probably used to the elongated setup process. Sometimes it seems like you can’t set up a page counter without four different JavaScript embeds and some manual database jiggery-pokery. But this is FullStory, so there’s no fancy setup. If you’re an existing pro customer, Page Insights is sitting waiting for you; if not, it’s included in the FullStory free trial, so you can demo it for yourself.

    Good design is about solving problems, and FullStory‘s new Page Insights feature helps you understand exactly what problems your users are having. A pleasure to use, and simple to understand, Page Insights quite simply makes you a better designer.

    [– This is a sponsored post on behalf of FullStory –]

    Sci-Fi Bundle: Space Fonts, Backgrounds, Logos, UI Kit – only $17!

    Source

    Categories: Designing, Others Tags:

    How To Set Up An Automated Testing System Using Android Phones (A Case Study)

    April 4th, 2017 No comments

    Regression testing is one of the most time-consuming tasks when developing a mobile Android app. Using myMail as a case study, I’d like to share my experience and advice on how to build a flexible and extensible automated testing system for Android smartphones — from scratch.

    The team at myMail currently uses about 60 devices for regression testing. On average, we test roughly 20 builds daily. Approximately 600 UI tests and more than 3,500 unit tests are run on each build.

    The post How To Set Up An Automated Testing System Using Android Phones (A Case Study) appeared first on Smashing Magazine.

    Categories: Others Tags:

    Brainstorming – Go On the Hunt For Ideas Using These Four Methods

    April 4th, 2017 No comments
    The Classic of Idea Generation: Brainstorming

    Many occupational fields only work because of creative people and their realization of innovative ideas. To generate better results, we often fall back to creative techniques that promise a higher success rate. Brainstorming is one of them.

    Brainstorming is often used to work out solutions for given problems in a group. But what if the traditional method doesn’t work? We want these four alternatives to give you new impulses, helping you to get your brain cells going again.

    © Rawpixel.com / shutterstock.com

    The Classic of Idea Generation: Brainstorming

    Aside from brainstorming, mind mapping is another one of the so-called classic techniques. Both are used to come up with solutions to problems as fast as possible. Both during studies and during the working life, creative techniques are very popular. Due to the mutual exchange of thoughts, the participant’s ideas are accumulated, and an efficient strategy is developed afterward. However, this often causes problems that surely sound familiar: For one, meetings are often spontaneous and last-minute. In addition to that, many studies prove that this type of idea generation can become counterproductive under the following criteria:

    • Team members may block each other
    • They have inhibitions regarding their superiors
    • The created conditions have an adverse effect on the participants

    However, if a business or the boss makes sure that the environment is optimal, traditional brainstorming may lead to success. Experts believe that you should make sure that the group size does not exceed eight members. If too many people participate in idea generation, the block each other, and no common thread can be found. To deliver different food for thought, it is also beneficial when the participants work in various fields. The IT specialist contributes input that is distinct from the resource manager’s or that of the accountant. They are still able to develop a strategy that boosts the business’s efficiency.

    However, if the classic variant is not successful for you, you should try one of the four alternatives that we’ll present to you here:

    1. Brainwriting

    The Classic of Idea Generation: Brainstorming
    © REDPIXEL.PL / shutterstock.com

    Brainwriting can work in different ways: in the classic version, you also meet up with your teammates. However, ideas are not communicated verbally but written on a piece of paper instead. Once everyone noted down their ideas, the sheets are passed on to the seatmate so that he gets to add his thoughts. This creates a basis for a discussion, which the group can use to advance the project.
    In the past years, the trend shifted towards a collective notebook. Here, there’s either a public notebook for everyone to enter their ideas or each worker keeps a private creative notebook. Publishers like the German brandbook.de have released a notebook for creative workers, which is packed with inspiring illustrations, providing the right conditions for creativity. In there, you get to write down your notes and spontaneous inspirations. After a certain amount of time, the group presents the solutions and discusses them.

    2. Brainwalking

    Motion benefits both body and spirit – this statement is very well-known. Physical activity does not only help to keep the body healthy, but the better blood circulation also leads to more creativity. Brainwalking is used effectively when flipcharts with one topic each are placed in the office. Every worker looks at the single flipcharts, writing down all spontaneous ideas that come to mind. Once all members are done, results are generated together.

    3. Brain Swarming

    As we all know, a group consists of both different characters and different ways of working: there are extroverts and introverts, that either tackle a problem from the top or at the bottom. Brain swarming gives every member the opportunity to work on their own, without being exposed to the rules of other participants. The problem with brain swarming is, that the extrovert colleagues lead the discussion, while the introverts stay in the background. However, every employee should be able to contribute their own ideas.

    With brain swarming, the goal is used as the header. After that has been noted, the required resources are written down and placed at the bottom of the magnet board. Now, the workers have a certain period to place own post-its with their creative suggestions on the wall. This method was developed by the American Dr. Tony McCaffrey and explained in detail in this video.

    4. Walt Disney Method

    The famous film producer has not only revolutionized childrens’ movies but also created a creativity technique that is very popular. In this method, three roles are assigned: the dreamer, the realist, and the critic. During the idea generation, the participants switch between the roles and look at the problem from different points of view. While roleplay may not be all that popular among the workers, the technique’s efficiency is proven. You start as the dreamer, looking at the goal without any rules or limits. In the role of the realist, you focus on the realization of the ideas. In the end, the critic takes a sceptical look at the problem and points out unanswered questions. This order is repeated until the critic has nothing left to criticize.

    Many Ways Lead to a Result

    All the techniques we presented leave a lot of room for the generation of ideas – as long as they are conducted objectively. If the participants don’t get involved, no productive examination of the problem can take place. When realized correctly, they can replace the traditional brainstorming in the sense that every worker gets to share their own ideas without having to fear criticism.

    Categories: Others Tags:

    20 Creative Login Form Examples For Your Inspiration

    April 3rd, 2017 No comments

    We see login forms everywhere on the web these days. Do you use social media networks? Do you send emails? Do you buy things online? All of these processes require a signup form of some kind. The login form design defines the nature of a website, it’s goals and style.

    A high-quality website login form usually encourages a user to become a member, subscriber, or a client. Thus, it is critically important to make it look amazing. Crafting a creative and successful login form requires a lot of time and effort from one or more designers. Today, I’ll be showing you a beautiful showcase of creative login form examples that I have collected from websites all over the web.

    Mynd – The future of property

    Register and Login

    welhome

    Sign Up for form creation

    save-account-now

    Simple Login Form

    simple-form

    Login/Registration form

    login-animation

    Sign In & Sign Up Form

    signin-gradient

    Day 001 – Login Form

    boy-login-form

    CubeCMS – sign in screen

    cube-cms-login

    Nova Poshta

    nova-poshta

    Hello World Login & Registration Form

    hello-world

    Easy Notes Sign Up Form

    easynotes

    Deep Sea SignUp

    whale-login

    Sign Up

    pizza-login

    Login form

    quizr

    Sign Up and Login

    nimbuzz

    Sign in / Sign up form

    zumba-login

    Signup

    get-started-login

    Sign Up

    spacejam

    Login page interaction

    managly

    Day 001 – Login Form

    national-geographic

    We think these login form examples are absolutely stunning. Some are very detailed, and some are very minimalistic. No matter what your style is, make sure you’re pleasing your crowd. Think I missed some of the best login examples? Share some of your favorite examples in the comments below! Til next time, keep on keepin’ on.

    Read More at 20 Creative Login Form Examples For Your Inspiration

    Categories: Designing, Others Tags:

    How To Make Guides (Collections of Content) in WordPress

    April 3rd, 2017 No comments

    A blog post can be anything you want. You could easily write one that links up a bunch of articles on your site. Titles, summaries, links… all hand-crafted HTML. A “guide”, as it were. It will likely be appreciated by your readers, I find, especially when you’re linking up old evergreen content that is still relevant and useful today.

    But let’s say you want to programmatically create these “guides”. That might make them faster to create, easier to maintain, and give you a nice level of control over them. Let’s look at a way to do that.

    Guides on CSS-Tricks

    I’m writing about this because guides are something we’ve just started to do here on CSS-Tricks. For example, I wanted to make a guide of our content that is well suited for folks just starting out, so I made Our Guide To Just Starting Out with CSS & HTML.

    That wasn’t built by hand, it was built by programmatically attaching a variety of content to a Custom Post Type we created just for Guides.

    Programmatically Attaching Posts to Posts

    You know how you can put images into blog posts? But in WordPress, there is also a concept of a featured image, which is one specific programmatically attached image for that post.


    That image is programatically attached to this Post.

    Enabling that feature in WordPress is like:

    add_theme_support('post-thumbnails', array('post', 'page', 'whatever'));

    But we’re talking associating Posts with Posts not Images to Posts. There is no built-in WordPress way of doing that, so we’ll reach for plugins.

    CMB2 and Friends

    CMB2 (i.e. the second version of “Custom Meta Boxes”) is a free, open source plugin for adding better UI and functionality around custom fields. If you’re familiar with Advanced Custom Fields, it’s a bit like that, only I guess entirely free and a bit more modular.

    With that installed, now you can install (I guess we’ll call them sub-plugins?) that make CMB2 do stuff. The one we’re after is CMB2 Attached Posts Field which has the explicit job of attaching Posts to Posts (or really, post type to any post type).

    It gives you this two-column UI on post types you activate it for:

    Move anything from the left to right, and it’s now programatically attached. This is exactly what we’re after. Now we can hand select, and hand order, any type of post to attach to any other.

    Configuring Things

    Before you get to the UI you can see above, you not only need to install and activate those two plugins, but also tell CMB2 to create the custom meta boxes and apply them to the types of posts you want.

    In our case, our Guides are a custom post type. That’s easy enough to enable:

    register_post_type( 'guides',
      array(
        'labels'        => array(
          'name'          => __( 'Guides' ),
          'singular_name' => __( 'Guide' ),
          'add_new'       => __( 'Add Guide' ),
          'add_new_item'  => __( 'Add New Guide' ),
          'edit_item'     => __( 'Edit Guide' ),
        ),
        'public'      => true,
        'has_archive' => true,
        'rewrite'     => array( 'slug' => 'guides' ),
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' )
      )
    );

    Then we apply this new custom meta box only to that custom post type (so we don’t have to see it everywhere):

    $cmb = new_cmb2_box( array(
      'id'            => 'guide_metabox',
      'title'         => __( 'The Guide Metabox', 'cmb2' ),
      'object_types'  => array( 'guides', ), // Post type
      'context'       => 'normal',
      'priority'      => 'high',
      'show_names'    => true, // Show field names on the left
      // 'cmb_styles' => false, // false to disable the CMB stylesheet
      // 'closed'     => true, // Keep the metabox closed by default
    ) );
    
    // Regular text field
    $cmb->add_field( array(
      'name'       => __( 'Things for the Guide', 'cmb2' ),
      'id'         => 'attached_cmb2_attached_posts',
      'type'       => 'custom_attached_posts',
      'show_on_cb' => 'cmb2_hide_if_no_cats',
      'options' => array(
        'show_thumbnails' => true, // Show thumbnails on the left
        'filter_boxes'    => true, // Show a text box for filtering the results
        'query_args'      => array(
          // 'posts_per_page' => 2,
          'post_type' => array('post', 'page')
        ), // override the get_posts args
      ),
    ) );

    We nestle all this code nicely into a functionality plugin, rather than a `functions.php` file, so that changing themes has no bearing on this content.

    A Template for Guides

    Now that a custom post type exists for our guides, adding a file called `single-guides.php` into our active theme is enough to make that the file that renders for like `/guide/example/`.

    In that file, we do whatever normal template-y stuff we’d do on any other template file (e.g. `page.php`, but also loop through all these posts we’ve attached!

    <?php
    
      $attached = get_post_meta(get_the_ID(), 'attached_cmb2_attached_posts', true);
    
      foreach ($attached as $attached_post) {
        $post = get_post($attached_post); ?>
    
      <?php include("parts/article-card.php"); ?>
    
    <?php } ?>

    All in all, not that much to it!

    It feels great to have some kind of mechanism for surfacing evergreen content like this. That can be quite a challenge for sites with a huge amount of content!


    High five to Rebekah Monson, whom I ripped this idea off of, who uses this to build guides on The New Tropic, like these neighborhood guides.


    How To Make Guides (Collections of Content) in WordPress is a post from CSS-Tricks

    Categories: Designing, Others Tags: