Archive for month: September, 2018

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/PO4IF2JXRSQ/best-black-friday-deals-2018

Black Friday 2018 is coming around again fast. It's a fantastic time for designers and artists to make massive savings on creative hardware, software and resources – but the sheer volume of Black Friday deals on offer, and the speed at which they come and go, can be utterly overwhelming.

That's why we'll be curating the very best Black Friday deals in 2018 for designers, artists and creatives right here – so bookmark this page and check back in closer to the time.

In the meantime, there are a few things you can do now to make sure you're ready to bag a bargain in November. From the dates you need in your diary through to pro tips on how to get the best Black Friday deals as a designer, artist or creative, here’s everything you need to know about Black Friday 2018…

When is Black Friday 2018?

This year, Black Friday falls on 23 November 2018, with Cyber Monday following on the 26 November. Always held the day after Thanksgiving, Black Friday marks the unofficial beginning of the Christmas shopping season. 

Traditionally Black Friday was a one-day brick-and-mortar juggernaut of sales, with Cyber Monday later conceived by savvy marketeers to extend the sales period online. These days, Black Friday is of course a huge online event as well. 

In the last few years, the spending bonanza has morphed into a 'Black November', with many major retailers leaking decent money-saving deals throughout the month. Amazon, for example, officially opened its Black Friday Deals Store on the 17 November in 2017, a week before Black Friday started. We also saw plenty of deals creeping through before that – and a lot of rock-bottom deals in the days after Cyber Monday, too. 

So make sure you check back into this page from early November to see what's on offer.

Black Friday: where to find the biggest savings

So where to look for real bargains? Well, the best Black Friday deals on creative hardware and software tend to come from third-party retailers – rather than directly from manufacturers like Apple or Wacom. That said, Microsoft slashed the cost of its Surface family of tablets for Black Friday 2017, and we saw big tech bargains on the Dell website too.

Some of the biggest savings last year across the board, however, came from Amazon and eBay. Certainly this is where you need to be if you're in the market for a new drawing tablet – and there were fantastic bargains to be found on desktops, laptops, 4K monitors, computer mice, keyboards and more.

Whether you’re interested in perusing Black Friday deals directly on the websites of the most reputable retailers, sign-up for early Black Friday alerts or do some early product research, here are the links you need… 

Black Friday deals 2018: retail links

US: Black Friday retail links

Amazon | eBay | Newegg | Jet Black | Microsoft | Dell | Walmart | B&H Photo | GameStop | Toys R Us

UK: Black Friday retail links

Amazon | eBay | Microsoft | Dell |  Very.co.uk | John Lewis | Currys | Argos | Tesco | AO.com | Carphone Warehouse | Mobiles.co.uk | ASOS

How to get the best Black Friday deals in 2018

We’ll be curating the very best Black Friday deals for creatives right here again this year, so bookmark this page and keep checking back in November. But there are some other pro tips you can follow for bagging big Black Friday bargains, too.

01. Do your research

The best way to avoid getting a bad deal is to do your research first. You need to be knowledgeable about the product – and its normal retail price. 

Draw up a list of items you might like to purchase over Black Friday, read the reviews, research the best manufacturers, and make sure you know the difference between a good and bad version of that product.

02. Compare prices

It’s always a good idea to compare prices, so use price-comparison internet shopping sites like PriceGrabber.com for insight where you’re looking at product prices. 

03. Check the extras

And make sure you check the specs: are you looking at a low or high-specced product for this price? Does it come with accessories? What about post and packaging charges?

04. Consider payment options

Another tip is to think about how you’re paying. While we don’t suggest racking up huge credit cards bills with big interest rates, many credit cards do offer benefits like free warranties, return protection and sale price protection – which are worth bearing in mind. 

05. Get an Amazon Prime subscription

Prime users (including all those on a free trial) are offered an exclusive 30-minute early access period to all Amazon Lightning Deals. If you don't already have one, an Amazon Prime subscription will set you back £79/$99 per year. 

06. Know the best days to buy

Adobe has crunched the numbers to put together a handy guide revealing the best days to buy different products, and also which products are more likely to run out on which days.

Apparently, Thanksgiving is the best time to grab a bargain on computers – you’re likely to save 16 per cent, on average – but it’s also the day popular tablets and televisions are most likely to be out of stock.

Black Friday, meanwhile, is the best day to save on tablets and televisions (on average 24 per cent), with computers most likely to be out of stock. 

Today’s best deals on the best creative kit

Can't hang on until Black Friday to pick up a hot deal? No problem. There are plenty of fantastic bargains to be found on creative hardware, software and resources right now. 

We're tracking the months' best deals in the following articles, and you can scroll down for the day's best deals on our favourite creative products…

The best Macbook and Macbook Pro deals The best Microsoft Surface dealsThe best Dell XPS dealsThe best cheap laptop dealsThe best Wacom tablet dealsThe best Adobe deals30 books every graphic designer should read

Related articles:

The best laptop deals for designersThe best Macbook and MacBook Pro dealsThe best Wacom tablet deals

Original Source: https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

CSS Grid and CSS Flexbox are complimentary web layout technologies that have been hotly anticipated for years. However, despite some superficial similarities they are actually used for very different tasks; they each solve a very different set of problems.

In an ideal scenario, you may find that you employ both for different layout tasks. In this post we’ll look at their differences, look at how they solve various layout problems, and help you choose which (if either) is the right solution for your problem.

Grid is Container-Based, Flexbox is Content-Based

In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container.

Confusing?

Let’s look at an example, here’s the HTML to create a row of elements:

<div class=”row”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

And we style this using flexbox like so:

.row {
margin: 20px auto;
max-width: 300px;
display: flex;
}
.row > div {
border: 1px dashed gray;
flex: 1 1 auto; /* Size of items defined inside items */
text-align: center;
padding: 12px;
}

We defined the size of the cells inside the flex-item by setting flex: 1 1 auto;. The flex property is shorthand to set flex-grow, flex-shrink, and flex-basis properties in one statement; its default value is 0 1 auto. Notice the “row” div is the flex-container, and we don’t set the size of the items there. We set the size inside the flex-item.

When previewed in a browser we get a row of boxes, as you would expect:

Now let’s see how we can generate the same output using grid:

.row {
margin: 20px auto;
max-width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */
}
.row div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}

Above code will give us exactly the same output.

Notice, now we are defining the cell’s size using grid-template-columns inside the grid-container (.row), not the grid-item.

This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.

Grid Has a “Gap” Property, Flexbox Doesn’t

You can argue that a major difference between flexbox and grid is that in the latter we can create gutters between grid-items using grid-column-gap, like so:

In order to achieve the same result in flexbox we would have to use padding and nested containers, or increase the width of the flex-container and use the justify-content property to spread the flex-items.

We have to take a circuitous route in flexbox because it doesn’t have a gap property. However, it is on the way; the CSS Box Alignment Module 3 contains CSS features relating to alignment of boxes in all layout modes: block layout, table layout, flex layout, and grid layout. The Box Alignment module collects properties from flexbox, grid, and multi-column which can be used consistently across all the layout models. Eventually we’ll be able to add gaps with row-gap and column-gap properties, but not yet.

Flexbox is One Dimensional, Grid is Two Dimensional

We’ve been arranging elements as rows and columns on the web since we used tables for layout. Both flexbox and grid are based on this concept. Flexbox is best for arranging elements in either a single row, or a single column. Grid is best for arranging elements in multiple rows and columns.

In other words, Flexbox is one dimensional, and Grid is two dimensional. Let’s look at a commonly used one dimensional layout – the social share buttons:

All the elements are in a single row. We can implement this using Flexbox like this:

<ul class=”social-icons”>
<li><a href=”#”><i class=”fab fa-facebook-f”></i></a></li>
<li><a href=”#”><i class=”fab fa-twitter”></i></a></li>
<li><a href=”#”><i class=”fab fa-instagram”></i></a></li>
<li><a href=”#”><i class=”fab fa-github”></i></a></li>
<li><a href=”#”><i class=”fas fa-envelope”></i></a></li>
<li><a href=”#”><i class=”fas fa-rss”></i></a></li>
</ul>

.social-icons {
display: flex;
list-style: none;
justify-content: space-around;
}

The justify-content property determines how the extra space of the flex-container is distributed to the flex-items. The space-around value distributes the space in such a way that the flex-items get placed evenly with equal amount of space around them.

Next, let’s take a look at a commonly used 2-dimensional layout:

We can’t implement this layout with a single row or a single column, we need multiple rows and columns to do that, and that’s where we use CSS Grids. Let’s make it using CSS Grid:

<div class=”container”>
<header>Header</header>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>

and the CSS:

.container {
max-width: 800px;
margin: 2em auto;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: repeat(3,auto);
grid-gap: 1rem;
}

.container header {
grid-area: 1/1/2/3;
}

.container main {
grid-area: 2/1/3/2;
}

.container aside {
grid-area: 2/2/3/3;
}

.container footer {
grid-area: 3/1/4/3;
}

.container > * {
background-color: #ddd;
padding: 1rem;
}

We are creating two columns using the grid-template-columns property, and three rows using grid-template-rows property. The repeat() function creates 3 rows with auto height.

Then, inside the grid-items (header, main, aside, and footer) we define how much area those grid-items will cover using the grid-area property.

Flexbox Wraps vs Grid Wraps

When the total width of items inside the container is greater than the width of the container, in that case both the layout models have the option to wrap the items to a new row. However, the way both handle wrapping is different.

Let’s look at that difference by building an sample layout. Create two rows and place 6 divs inside each row:

<h2>Flexbox</h2>
<div class=”row-flex”>
<div>1 2 3 4 5 6 7 8 9 0</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<h2>Grid</h2>
<div class=”row-grid”>
<div>1 2 3 4 5 6 7 8 9 0</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

Now, we will use Flexbox to layout the first row and Grid for second:

/* Flexbox row styles */
.row-flex {
margin: 40px auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
.row-flex div {
border: 1px dashed gray;
flex: 1 1 100px;
text-align: center;
padding: 12px;
}
/* Grid row styles */
.row-grid {
margin: 40px auto;
max-width: 600px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.row-grid div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}

For the first row, we are using flex: 1 1 100px to give the flex-items a base width of 100px and allow it to grow and shrink.

We are also enabling wrapping of flex-items inside the flex-container by setting the flex-wrap property to wrap, its default value is nowrap.

For the second row, we are using the grid-template-columns property to create columns with minimum width 100px set by the minmax() function. We are using repeat() function to create columns repeatedly.

You can see the beauty of Grid and Flexbox lies in the ability to stretch and squeeze the items based on the amount of space available. Flexbox achieves this using flex-grow and flex-shrink properties, and Grid achieves this using a combination of minmax and auto-fill functions inside the grid-template-columns property.

However, look carefully at the cell 5 and cell 6 as they are pushed down. In the case of Flexbox, the cell 5 and 6 are not the same size as other cells when pushed down. While in case of Grid, they retain the same size as all other cells in the grid.

This happens because when a flex-item is wrapped and pushed in a new row, the Flexbox layout algorithm treats it as a part of a different flex-container. Hence the pushed item loses its context.

This behavior could be used in some use cases, for example, an email subscriber form:

Let’s build this subscriber form:

<div class=”subscriber-form-container”>
<form>
<input type=”email” placeholder=”Email Address”>
<input type=”text” placeholder=”Name”>
<input type=”submit” value=”Subscribe”>
</form>
</div>

and give it some styles in our CSS:

.subscriber-form-container {
max-width: 650px;
margin: 40px auto;
border: 1px dashed gray;
box-sizing: border-box;
}
.subscriber-form-container form {
display: flex;
flex-wrap: wrap;
}
.subscriber-form-container form input {
margin: 6px;
padding: 0.4rem;
box-sizing: border-box;
}
.subscriber-form-container form input{
flex: 1 1 150px;
}
.subscriber-form-container form input[type=”email”] {
flex: 2 1 300px;
}

The flex property is the shorthand for three properties: flex-grow, flex-shrink, and flex-basis. We want the width of the “email” field to be double the width of other two input elements, and we achieve this by using its “flex-grow” and “flex-basis”.

The “flex-grow” property of input elements is set to “1”, but that of email input element is set to 2. So, when there is extra space available, the email input element will grow twice compared to other input elements.

Flexbox outperforms Grid in this use case. Yes, you could use some hack to get CSS Grid replicate this behavior using minmax() function, but Flexbox is well-suited for this kind of single dimensional layouts.

However, if you want a multi-dimensional layout with the wrapped elements maintaining their widths, for example, an image gallery, then Grid is the best choice:

One more thing, did you notice we are not using any media queries here. That’s because Flexbox and Grid layouts are built on concept of responsiveness and hence reduce the use of Media Queries.

Will CSS Grid make Flexbox Obsolete in the Future?

Absolutely not.

In fact, that’s what this article was about. CSS grid and Flexbox, both are designed to solve a different set of problems.

Currently, CSS Grid doesn’t have enough support across the browsers to make production ready websites. The general rule of thumb I use is that a feature must cover more than 95% of global usage. Only then I use that feature in real websites. Currently, Flexbox covers 95% of global usage, and Grid covers 87% of global usage.

Soon Grid will also get good support among the browsers, and we will use a mix of Grids and Flexboxes to make amazing website layouts that previously weren’t possible.

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

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;}

Original Source: https://inspiredm.com/15-best-browser-extensions-for-developers-2018/

The biggest change for 2018 has been the major overhaul of FireFox, and with it the way add-ons work in that browser. As a result, many popular add-ons are no longer being maintained or have become unavailable.

Most add-ons for Firefox are also available as extensions for Google Chrome. In this article, we’ll try to give preference to cross-browser add-ons / extensions, which within this context means they’ll work on Firefox, Chrome, and Chromium. We’ll also give preference to free extensions that aren’t known to pass your information to third parties and are not supported by ad revenue. We’ll focus more on extensions that don’t restrict you to a particular development technology.

Few developers would see any advantage in using Microsoft Edge as a development browser, but it is fine for post-development testing. Only a little over 4 in every 100 site visitors can be expected to be using it, although that number can be expected to increase slightly as more users abandon Internet Explorer.

Even though there far more Chrome users than there are Firefox users, those in the IT crowd tend to prefer Firefox, which is why there are more and better extensions aimed at developers in Firefox.

Now let’s take that look at the very best browser extensions for developers and why you might want to add them to your browser.

1. Built With

When you find yourself on a really well made site and you want to know how they made it, this extension will save you a lot of time and effort digging around in source code. Download links: Chrome/Chromium, Firefox

2. aXe

This is an accessibility auditing tool. It’s always best to try and make your pages as accessible as possible, and aXe will help you avoid accidentally excluding a segment of users from your site. Download links: Chrome/Chromium, Firefox

3. ColorZilla

An oldie but still a goody, this extension allows you to sample colors directly from a page, retrieve color codes, generate gradients, and more. Download links: Chrome/Chromium, Firefox

4. WebDeveloper

Adds some useful extras to your browser for control of CSS, forms, images, and information. One of the most popular extensions ever made. Download links: Chrome/Chromium, Firefox

5. Woo Rank

Analyze any web page for SEO data. Provides a powerful report showing you all the SEO internals, including an overall SEO score, suggestions for improvement, keyword cloud, and much more. Download links: Chrome/Chromium, Firefox

6. Tab2QR

Generate a QR code of the page you’re on and you can visit the page with your phone just by scanning the QR code. Good for testing responsive sites, even if you did not create them. Download links: Chrome/Chromium, Firefox

7. HTTP Request Maker

This can be very useful for testing PHP form responses where you don’t really want to actually submit the form (which might trigger additional processing you don’t need to test). With this tool you can forge HTTP requests effortlessly. Note that although the Chrome and Firefox extensions have the same name and do the same things, they’re made by different developers and are not exactly the same. Download links: Chrome/Chromium, Firefox

8. Page Performance Test

Quickly obtain a report of how your page performs at different stages of it’s journey to your browser. It’s kind of like a more advanced version of tracert. This one is only available on Firefox for now. There are similar extensions for Chrome and Chromium but they’re not as rich in features as this one. Download links: Firefox

9. Word Count Tool

This one can actually do more than the name implies, as it will also tell you how many characters and how many sentences are within a selected block of text (or the whole page). Download links: Chrome/Chromium, Firefox

10. Web Developer Checklist

Make sure you’re following best web development practice guidelines with this tool that will show up where your standards may have slipped. Download links: Chrome/Chromium, Firefox

11. Image Map Editor

One of a trio of excellent extensions from German developer Heinz-Jürgen Boms, this one does exactly what the name says it does. You can generate an image map directly in the browser just by tracing over the areas of an image you want to map. Download links: Firefox

12. Advanced Frame Editor

Another extension from Heinz-Jürgen Boms, this is really a CSS styling tool where you can build a frame directly in the browser by specifying its attributes. It is worth checking out the documentation before starting to use it. Download links: Firefox

13. Bootstrap Responsive Helper

This is a very simple little extension that helps you see quickly if your breakpoints are working correctly and what bootstrap level the current mode is. Of course you’ll only need this extension if you actually work in Bootstrap. The Chrome version is developed by Jonathan Defraiteur, and the Firefox version is developed by Kevin Bon. Download links: Chrome/Chromium, Firefox

14. Try It Yourself HTML5 Editor

If you prefer to keep things simple and just get all your work done from one place, this extension is for you. Rich in features, this context-aware editor works directly in the browser and supports HTML, CSS, and JavaScript. It’s far from perfect, but for a quick and dirty edit without the bother of opening a separate application, it gets the job done. Download links: Firefox

15. X-Ray Goggles

Technically this one isn’t an extension, it’s actually a bookmarklet. But it works so well, we couldn’t leave it off the list. Even though it’s made by Mozilla, it works equally well in Chrome because both browsers are fully standards compliant. To use it, you’ll need to make your bookmarks bar visible. Then visit the download page, which you can reach via the links below, and drag the X-Ray Goggles button onto the bookmarks bar. Then just visit any site, fire up your X-Ray Goggles bookmark, select an element on the page, and you can edit the code for it. Download links: Chrome/Chromium, Firefox

header image courtesy of Monika Pola

The post 15 Best Browser Extensions for Developers (2018) appeared first on Inspired Magazine.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/mV-ePLGbsOU/10-web-skills-that-pay

Happy with your income? Yes? Well, jolly good, run along and check out some interesting 404 pages or something.

For the rest of us, of course, the opportunity to earn a bit – or maybe a lot – more is always welcome, and if you're working on the web then there are plenty of things you can do to boost your income. Whether you want to simply make yourself a better prospect for a pay rise or promotion, or if you'd rather pull in some extra cash directly, there are loads of opportunities out there.

We spoke to some experts and figured out the 10 best ways to start bringing in more money. Read on to find out how you could soon be coining it in.

01. JavaScript

This might seem like a glaringly obvious place to start but we're kicking off with JavaScript for a good reason: decent JavaScript developers are in surprisingly short supply. If you can demonstrate an in-depth knowledge of vanilla JavaScript then you're immediately on a firm footing to find well-paying work. If you add some of the more popular frameworks to your armoury then you can start earning some serious money.

James Huckle, head of technology at Mirum UK, suggests that you can get a long way on just React; however if React is all you know it's really going to limit your usefulness to an employer. "Someone who comes in and can only do React isn't a lot of good because if something goes wrong you've got to have someone with the skills to find out where the defect's coming in," he tells us. And that's where fully-fledged JavaScript developers can really make their mark.

12 common JavaScript questions answered

If you set your mind to it, adding JavaScript to your skill set needn't take long. "One of our developers came straight off one of these 12-week boot camps and she's turned out amazing," says Jonathan Bradford from Kota. "There are great courses that you can do for next to nothing and if you get that on your CV then my eyes are going to light up because at the moment I'm dealing with people who only have limited knowledge of HTML, CSS and jQuery."

02. Project management

Knowing the best project management tools can be a great help

Sometimes you're going to have to step up if you want to maximise your earning potential and if you want more money and new challenges, a move into project management can give you both. Nowadays it's near-impossible to avoid project-management methodologies and it's about a lot more than simply shipping products on time and on budget – agile methodologies can shape the way a project progresses.

"You definitely need a smart techie in the room able to organise the work, the crossover between the technical build team and the delivery management team," says James Huckle. "It's about understanding process, how creative crosses over into technology and experience of what those overlaps are, understanding how edge cases occur and how mistakes get made."

Top tips for nailing project management

"Companies know they need to shift cultures towards being lean, with small multi-disciplinary teams working at a faster rate," adds Kate Taylor client services director at Zone. "So agile project management is something where we're competing with more people and starting to see a better quality in the market than the last few years."

03. UX design

"UX is definitely hardest to hire in at the moment," says Zone's Kate Taylor. "The market is so buoyant, it's really tough to get people and UX designers can command a high day rate as freelancers."

Which is all well and good if you're a user experience designer, obviously, but even if you're not, the need for good design means that, whatever your job, if you can bring some design sensibilities to the table then you're increasing your value. After all, these days design is everyone's business.

New skills in UX design

"There are a lot of creative thinkers in all of the other disciplines who are experienced in working alongside clients and who know what good looks like," says Taylor. "The whole obsession we're seeing at the moment with just wanting a UX designer is short-sighted. The market's struggling to deliver enough people and a lot of those skills really do exist elsewhere, so you just have to be a lot more open-minded about how you approach those conversations and how you get to a solution."

04. Flexbox & CSS Grid layouts

Add Flexbox or CSS Grid to your skill set to up your income

The very nature of the web means that new techniques and technologies are evolving all the time. If you're down with the latest cutting-edge tools then you can be sure that your skills will be in demand – and along with that will come decent remuneration.

Right now, the smart money is on flexible layouts and grid-based systems; over the past year they've been fully adopted by the major browsers and the benefits of using them are instantly obvious to anyone who appreciates great-looking responsive web design. So if you're prepared to invest time in figuring out how they work, you'll be adding a vital skill to your CV.

Fashion flexible layouts with CSS Grid

Should you go with Flexbox or CSS Grid Layout? Almost certainly both: Flexbox is built for layouts in a single dimension, while CSS Grid works with two-dimensional layouts and is therefore much better suited to dealing with more complex designs. With both systems under your belt you'll be able to provide clients with beautiful and sophisticated layouts, whatever their requirements may be.

05. WordPress

Building WordPress sites can be a lucrative side income

It's easy to overlook WordPress if you're a serious web developer but as a platform it's immensely popular, running 30 per cent of the web from the personal blogs that helped it make its mark, through to heavyweight news and corporate sites. And its benefits for agencies with an eye on the bottom line should be obvious: with an immense library of WordPress themes and plugins available, it's much easier to get a full-featured site up and running fast, as Kota's Jonathan Bradford attests.

40 brilliant WordPress tutorials

"Learning WordPress doubled my salary when I was at an agency and I now own a WordPress agency," he tells us. "I used to approach small businesses and charge just under £1,000-£2,000 for a website with SEO. I could build this from a theme in a weekend."

As Kota has grown, its relationship with WordPress has become more sophisticated, moving from themes to bespoke JavaScript. "The way WordPress is moving forwards now," says Bradford, "that's all going to be using headless JavaScript on the front end and really separating WordPress on the back end."

06. Testing

"Developers don't really see QA as part of their job," says Mirum's James Huckle, and this can be a big problem when it comes to delivering working sites on time. "The definition of 'done' is one of the biggest challenges I have with midweight/junior developers," he continues. "Done is not when you say you've done the feature; done is when you've done it, you've tested it, someone else has tested it and the test has passed."

And it's an awareness of the need for testing that makes you more valuable as an individual. "A good developer should know how to write unit tests in their code, so they can at least test their own code is working as per design," he tells us. "I'd expect developers to be able to write functional tests and I'd expect them to understand that it's their responsibility to work with QA to make sure whatever they develop gets into production in a way that is defined as done."

07. Soft skills

Tech and design skills are all well and good but, like it or not, for a web business to succeed it needs people who can grease the wheels. The skills we're talking about here are generally referred to as 'soft skills' – the ability to communicate with teams, talk to clients or customers and ensure that projects get delivered on time.

"I really hate the name 'soft skills' as it downplays the benefits," says Zone's Kate Taylor. However, even if the name makes it sound a bit fluffy and probably not your problem, the fact is that if you can master the soft skills, you'll become a much more attractive prospect for employers and you'll see many more opportunities to expand your career in different directions.

Kate Taylor continues: "We're seeing a much greater requirement for the soft skills that you'd find in client services for candidates across the board." She points out that from a tech and project management perspective, these disciplines are becoming a lot more client-facing, particularly now that agile practices mean that client teams are being injected into projects. When you find yourself working shoulder-to-shoulder with the people paying the bills, an old-fashioned coder mindset won't get you far; agencies need people who know how to network, can build relationships, read the politics and who are strategically minded enough to spot opportunities and bring them to the agency.

08. Facebook

Facebook ads can offer better money-making opportunities than Google’s

When you're all about the code or the design, demands such as marketing and SEO can feel like a bit of an unwelcome distraction. If you want to earn more money, though, they're a sure-fire way of boosting your income and the best place to take advantage of that right now is Facebook.

For Jonathan Bradford of Kota, SEO and marketing were his route to escape from an agency job and set up his own studio. And while mastering Google's mysterious SEO algorithms is an obvious solution, Kota has found that Facebook ads represent a much better way to make money. He explains how he set up Facebook ads for Brazilian restaurant chain Presto's new outlet: "We put out an offer via Facebook ads that targeted a mile radius around Chelmsford and we got thousands and thousands of downloads from this advert."

Facebook ads are easier to target than Google ads and Facebook's new commitment to transparency is making things even easier. "Soon you'll be able to see competitor ads and you'll be able to see the likes, tags and engagement," says Bradford. "For someone to add that to their skill set if they're working on the digital marketing side, once they've done a few they've got it on their portfolio and they can show you the result."

09. Side projects

If you know stuff, share it in a conference talk

It's all too easy to focus on the day job but if you want a competitive edge in the jobs market, then a strong portfolio of side projects can really help you stand out. "The people with more value are the people with more skills, more crossover and more collaboration," explains James Huckle. Basically, if you have a lot of skills across the board under your belt then you're a lot more useful – and you can command a bigger salary as a result.

Of course, it depends on the side project. Your fledgling web comics might have some social traction but they're probably not going to give you much leverage in your pay negotiations. Rather, think about something like speaking at conferences – whether it's a big-ticket event or a local meetup. If you can do conference talks or even a bit of teaching, this demonstrates that you know your stuff and you have the confidence and communication skills to share your knowledge – a quality that's irresistible to employers.

10. Full-stack development

Finally, the big one. The web industry is awash with specialists but to hold it all together there's always demand for multi-talented full-stack developers.

In theory, if you're a full-stack developer you're at home at the front or back end. Realistically, though, you're more likely to be focused on one and this can make a big difference to how much you'll earn. Back-end work, with its requirements for heavyweight languages and systems that provide foundations for any site, is more valuable to employers, while the slightly less demanding front-end aspects, while still a vital link in the chain, don't attract the same high rates.

Full stack isn't something you drift into; it requires a particular mindset. Kate Ganiukova at Hacker Noon describes the traits as an analytical mind, patience, love for learning, attention to detail, creative vision and discipline, and you'll need all of those to master the full set of skills – and to carry on learning fresh ones.

If that's beyond you, it still pays to apply full-stack thinking in your work. As Jonathan Bradford points out: "The kind of developer we would like is someone who has a core mindset, is clever and, if they have a problem with code, by the next morning they'll have figured it out."

This article was originally published in issue 309 of net, the world's best-selling magazine for web designers and developers. Buy issue 309 here or subscribe here.

Related articles:

Let's talk about money8 ways to make more money in 20184 money-making ecommerce redesigns to learn from