3 Things You Can Do With CSS That Will Blow Your Mind

CSS is one of the first languages many coders learn, and it’s an integral part of building any website. But it can do a lot more than handle simple style elements.

While traditionalists may relegate it to the basics – fonts, styling, colors, etc. – it can actually handle a variety of design complexities, like animation.

In fact, many modern developers are taking CSS to new heights with a variety of cool and surprising projects. Some of them may be advanced for beginner designers, but each project proves that there are limitless possibilities for working with CSS.

Here are a few inspirational ways you can use CSS for your next project.

[ Content upgrade with ID = 360 not found ]

Animations

The use of animation in web design has certainly gained momentum over the last decade or so. The methods and techniques for adding motion to an interface have become more advanced as well.

Old school designers and developers may have once relied on JavaScript to create eye-catching animations and videos, but CSS has taken on some of the heavy lifting in recent years, as shown by some of the world’s best developers.

Julian Garnier created a 3D model of the planets in orbit, for example.

Julian Garnier

Source: Codepen

Roman Cortes has been known to make complex animations purely out of CSS. His spinning effect on the image of a can of Coke shows what’s possible with a few simple styling sheets. When you scroll back and forth on his image, it looks as though the can is spinning.

coke_bottle_css

Source: Roman Cortes

But animated elements don’t always have to be so obvious. In fact, many of the most popular animations using CSS for the web today are subtle, like an animated menu button effect.

Developer Marius Balaj created a simple button animation that materializes when you scroll down.

mariusbalaj

Source: Codepen

And Sascha Michael Trinkaus created a hover animation for a check mark button that changes the surrounding gradient color.

animated_checkmark_button

Source: Codepen

CSS can also be used with motion curves for even more realistic animations. (Smashing Magazine has an explanation and a few examples of that here), but whether it stands alone or is used in combination with JavaScript, CSS can do a lot for the world of animation.

Text Effects

CSS can also be used to create stunning visual effects for text. In some cases, additional languages like SVG or JavaScript may be used to enhance the effect, but some incredible effects can be added solely with CSS.

Developer Hugo Darby-Brown recreated the Shop Talk logo from scratch using only CSS.

shoptalk

Source: Codepen

Patrick Brosset animated this logo (“Cosmos”) using simple CSS.

cosmo

Source: Codepen

Developer Yoksel takes this idea a step further by turning his text into a simple animation. This text effect is made with a combination of CSS and SVG.

elasticstroke

Source: Codepen

And Yoann Helin created a simple ticker effect that alternates text between three different words.

helloworld

Source: Codepen

While CSS is most often used to add color to fonts and background elements, it can also be used to create images, text, and animated text effects. When used in combination with JavaScript and SVG, there’s very little you can’t do with it.

Fluid Menus

CSS is often used for creating animated menus, and that’s nothing new. But the level of creativity isn’t limited to your average horizontal menu with a few drop downs or a hamburger menu. You can create dynamic and engaging menus that are mobile responsive with CSS.

This menu, for instance, uses transparent icons and an animated slider to create a unique transition effect between items on the navigation bar.

cssdeck

Source: CSSDeck

One developer named Travis created a single-page navigation menu for Mic.com (though they currently use the hamburger menu for their main site).

micnav

Source: Codepen

If you’re in love with the idea of using a hamburger menu, you could take a page out of developer Sergio’s book and create a morphing circular menu along with your hamburger menu.

hamburger

Source: Codepen

But you can also skip the hamburger in favor of a slider. Humaan’s site, for example, has an animated scrolling menu that slides right and stays fixed until reaching the very top of the page.

humaan

Source: Humaan

Navigation is often one of the trickier areas of web design and development, but with CSS, you can rethink traditional design elements to create something more attention grabbing or out-of-the-box for clients that want something a little extra.

[ Content upgrade with ID = 360 not found ]

Final Thoughts

There are plenty of other mind-bending things that you can do with CSS (like this Submarine with CSS by Alberto Jerez), as well as a slew of really practical stuff (like image filters and forms).

Overall, CSS is an excellent option for creating subtle text and logo animations as well as more robust animated images. It’s also very efficient and relatively easy to learn compared to other languages like SVG.

It’s especially great for transitions that require animation, like fluid menus, clickable icons, or buttons. It’s also an excellent way to create 3D animations, as most browsers have an easier time reading 3D animations made with CSS.

Because you can see exactly what you’re getting throughout the design process, you may have an easier time animating these effects with CSS rather than JavaScript (and the end results are equally stunning).

It opens a multitude of new doors for web designers and developers alike, making it possible to create animations and interactivity entirely with a relatively simple language.

Of course, you can combine JavaScript with CSS for advanced animations and really wow your clients, too.

How to Increase Your Daily Productivity and Code Faster

Developers always want to know one thing: How can I get this done faster?

Coding can be fairly time consuming depending on the project you’re working on, and it can eat away at your day if your workload is heavy, your deadlines are tight, or your processes are slow.

But just because devs want to get things done quickly doesn’t mean they want to do a rush job. Rushing through projects can lead to buggy or hard-to-maintain software that needs to be updated down the line (at a greater time expenditure).

Thankfully, you don’t have to sacrifice quality to get the job done faster. Here are a few tips for speeding up your performance without dumbing down your work.

[ Content upgrade with ID = 343 not found ]
characteristics-of-the-best-web-development-company

Gain More Experience

It may seem counterproductive to spend more time working on projects if you’re looking to save time, but the reality is that the more experience you have, the faster you’ll be able to churn out code that doesn’t require extensive debugging later on.

In the early stages of your dev career, you can gain experience and improve your speed and productivity simply by working on your current projects.

You can also:

  • Work on side projects
  • Work on open source projects
  • Work with other, more experienced developers
  • Test out productivity tools and techniques
  • Do programming exercises

You can (and should) monitor your improvement based on both objective metrics like defect rate and velocity, and subjective metrics like code quality and fitness.

If you’re worried about quality, don’t assume that slower work will give you better quality code. The more you practice, the more refined your system becomes and the more productive and effective you’ll be.

Jeff Atwood over at Coding Horror learned a valuable lesson on this from the book Art and Fear by David Bayles.

The book tells the story of a ceramics teacher who asks half of his class to create a large quantity of pots, and then pitted them against the other half of the class who were instructed to produce a single, “perfect” pot.

The teacher found that the students that created a large quantity of pots were producing better quality pots than the students who only had to do one high quality pot.

The takeaway according to Atwood: “When you repeatedly learn from your mistakes, (when you have more experience with a system or method), you will produce better work.”

Automate Testing

Aside from sheer experience, you can also greatly improve your speed and productivity by either catching errors as you go through or automating the testing process.

If you can catch an error while you’re typing it, you will save ten times the effort than having to go back and redo it. But catching every single error with the human eye isn’t always possible, and that’s where automation comes in.

loading-speed-2-01

The purpose of automation is to provide fast feedback, both of successes and failures. The longer you go without feedback, the more time you will have to spend fixing mistakes later on.

This is also important if you have to spend time fixing someone else’s code, or they have to spend time fixing your code. The person who made the mistake understands the error best, so the sooner feedback can come through, the easier the fix will be.

So, how should you go about creating automation?

Ultimately, the best person to build a test stack is you. While this is another example of “taking more time now to make time later,” developing your own automation stack is important to improve productivity.

But think of it like this: If you were using someone else’s automation stack, you would have to learn the tools and tricks to use it, which would take more time.

You already know most of the processes you need to automate, so spend a little time on the front end of the process to build automation and you’ll save heaps of time later on when it comes time to actually produce.

The same principles apply to things like reusable libraries and templates. If you can find something (or build something) that works for you, you will improve productivity automatically.

You will also get some much needed coding experience, too.

Reassess Expectations

Another area that might be slowing down your process – and one which is often overlooked by developers – is actually something that has nothing to do with you: it could be your managers or team.

If you work for an agency or in the corporate world, the slowness of your project may not be your fault, at least not entirely.

The management team plays an important role in setting expectations, helping developers manage workloads (sometimes devs don’t know how to say no), and measuring productivity.

It could be that you are producing code at a reasonable rate, but it’s only considered slow because you’re not meeting an arbitrary deadline.

support

Productivity like this can be difficult for management to measure objectively. They don’t always understand how much work goes into the coding process, so they assume you should be working faster.

A few questions you can ask to assess the situation to see if it’s you (or if it’s them) include:

  • Am I truly inexperienced or do I feel competent in my tasks?
  • How much time am I spending doing things that weren’t requested or required?
  • Do I understand when a fix is finished?
  • Is my code noticeably lower quality than other developers around me?
  • Does management have an objective measure for productivity? If so, what metrics are they going by?
  • Can they give me specific examples of slow coding or idleness or is it just a general perception?
  • Have they taken into account time spent fixing other’s mistakes?

It may be that the problem is on you, and that you’re simply lacking experience or are being slowed down by your own processes. BUT, it could be that there are other factors at play that are slowing you down without you realizing it.

If so, take some time to talk with management or team members about your concerns and ask for feedback on how you can improve your processes to speed things up.

[ Content upgrade with ID = 343 not found ]

Final Thoughts

At the end of the day, a coding-heavy project will probably take you quite a bit of time and there’s not much you can do about that. It’s better to take the time you need to work through the process fully, catching bugs as you go, in order to produce something of quality the first time around.

But if you are under a tight deadline or you’re feeling pressure to speed up your work, remember that practice makes perfect and that automation is your best friend.

You should also take some time to make sure that the setbacks aren’t coming from things outside of your control, like management or team members that are costing you time fixing their errors. Take some time to gauge your situation to determine if it’s really you, or if it’s them.

Why You Should Be Charging More for Your Dev Skills

Are you selling yourself short when it comes to your rates?

Many new developers – or, let’s be honest, long-time developers – have trouble setting rates for themselves that can actually meet their needs. And if you’re reading this, you’re most likely one of them.

Most developers (and designers, and freelancers in general) tend to bill conservatively at first. Often they feel like they lack experience or skills to charge more, or they’re just not sure what the “going rate” is for their job description.

But playing it safe can keep you from having the career of your dreams.

That’s why it’s important to start charging more for your services, and here are 3 of the biggest reasons why…

[ Content upgrade with ID = 333 not found ]

featured10

Reason 1: You Have In-Demand Skills

One of the biggest reasons freelancers in general tend to undersell is self-doubt. They’re just not sure they have a skill that someone is willing to pay for. But that’s simply not true of developers.

The growth rate of the industry is astronomical. According to the U.S. Bureau of Labor Statistics, employment for developers is projected to increase 20% within the next 10 years, nearly doubling the growth of all other occupations.

This is also why you should be charging more for your services. Over time, demand for web and mobile developers will continue to rise, and the more experience you gain, the more your skills will be worth to the public. But even at the get-go, your skills are still valuable.

So how should this affect your pricing strategy?

Conventional wisdom would tell you to start low and then raise your rates, but the demand of your job means that you can actually start higher and work with more lucrative clients from the start.

Freelancer Jake Jorgovan writes, “When I started pricing myself hourly I started with an hourly rate of $30hr. Over time, I kept raising my rate from $30 to $50, $60 and higher. Yet somewhere around that $60 per hour range I noticed a major shift in my mindset. At $60 per hour, I was beginning to start working with higher quality clients who had decent budgets.”

After a while, Jorgovan was able to switch to more lucrative project-based pricing, which freed him from the “hourly rate debate” all together.

But the lesson here is that people will hire you because they absolutely can’t do what you do. No matter how you set your prices, remember that you have something valuable to offer, even if you’re brand new to the gig.

If you want high paying clients, then set your prices accordingly.

Reason 2: Market Value is Negotiable

If you’re not sure what a “high paying client” will actually pay, consider the fact that people will pay almost anything for something they consider valuable.

Think about it: What is the value of a cup of coffee?

If you go to a gas station, it’s probably 99 cents. But if you pour that same coffee into a Starbucks cup, you can charge $3. That’s the market value of a brand.

process02

Your market value is the same. You’re not underselling because you’re a new developer or because you don’t have skills or qualifications, you’re underselling because you’re not marketing yourself as someone with in-demand skills.

Part of marketing yourself well is setting prices that reflect the value your skills bring to your clients. Some of that will be determined by general market value, but that doesn’t mean you always have to charge what everyone else is charging; market value is just a starting point.

Your best bet for setting rates is to start by assessing the average value a developer has in the marketplace today. Consider things like:

  • Average salary for someone with your job description
  • Average skillset for someone in your position
  • Average demand for someone in your position (hiring rates, etc.)

Try to gain as clear a picture as possible about what the market looks like, and then compare where you stand.

Do you have more skills than necessary? Less skills overall, but more experience in certain skills? Do you specialize? Do you have a niche client focus? Are you faster than most?

Make a list of the things that you do well and that set you apart from the average developer. Those unique qualities become your brand, and you can (and should) set your rates according to what your brand can offer clients.

You don’t have to have all the skills or experience in the world; you just have to have something special to offer.

Reasons 3: Your Cost of Living

Another important and often overlooked factor when it comes to price setting is the cost of doing business and the cost of living. Many developers start by charging what the market says they’re worth, but fail to increase their rates enough to make a livable income.

When you’re thinking about setting your prices, ask yourself: How much money do I need to make to live the life I want?

how-much-to-charge-for-an-app

If you want a luxurious, jet-set lifestyle but only charge $25 an hour for your services, you might wind up disappointed. If you want to simply pay your bills and live comfortably, but you live in a city or state with a higher cost of living, you might need to charge more simply to stay afloat.

Even if the “market rate” says you should charge $50 an hour, that doesn’t mean you can actually live off of $50 an hour. You should also keep in mind that charging by the hour limits you to a certain amount of hours per year that you can actually work.

You may consider either raising your hourly rate or, like Jorgovan, abandoning it in favor of project-based rates.

As we said before, the market value is the starting point – a minimum price. Once you have your basic rate, increase the price based on the unique value your skills bring to your clients (your brand), as well as any additional costs of doing business (new equipment, training, conferences, subscriptions, etc.) and the cost of living (rent, food, travel, etc.).

Your pricing should be able to meet your needs. And if you’re worried about whether or not your clients will pay your new rates, consider going after different clients. Anyone who understands your true value will be willing to pay whatever you charge.

[ Content upgrade with ID = 333 not found ]

Final Thoughts

At the end of the day, there’s no set formula for how to set your pricing. But this can actually work in your favor. Instead of setting rates based on what every other developer does, you can set rates based on the value your skills actually provide to your clients.

Remember that even at the most basic level, being a developer means that you’re in-demand, so don’t be shy about charging more for your services. Keep in mind that market value is just a starting point, and if you want to go after higher paying clients, then brand yourself for higher paying clients.

And don’t forget to calculate costs based on how much you want to work and how much it will cost you to do business (and live). After all, you didn’t become a web developer to starve, so don’t set prices that will leave you out in the cold.

Should You Launch Your Own Mobile App? Here’s What to Know

If you stick around the web development business long enough, there will probably come a day when someone asks you to build a mobile app for their company or project.

Or maybe you’ve been toying with the idea of launching the next best moneymaking mobile app all on your own.

Either way, there’s a significant difference between developing a website and launching a mobile app.

The good news is that as a web developer, most of your skills will be somewhat transferable. For example, if you already know Java, you won’t have far to go to build an Android app. But there’s still a significant learning curve involved.

Here’s what you need to know if you’re looking to make the leap from web to mobile.

[ Content upgrade with ID = 323 not found ]

mobile-app-development-myths

The Difference Between Web and Mobile Apps

One of the biggest and most noticeable differences between web and mobile app development is the level of flexibility.

Web development gives you a variety of programming languages, devices, and tools to work with, while mobile apps are more limited.

Generally speaking, mobile apps are designed for individual devices and platforms. The languages you need to know for an iPhone 7 (Swift or Object-C) will be different than the ones you need for a Samsung Galaxy S7 (Java).

You also have to think about user experience in a different way. Mobile apps are more object-oriented while websites tend to be more action-oriented.

Mobile apps also need a level of functionality that will keep users engaged for longer periods. The average user will spend around 15-30 seconds browsing a website compared to the 2+ hours they will spend using mobile apps daily.

A few other factors that set mobile app development apart include:

  • Rankings/Ratings – Mobile apps are primarily ranked by their cumulative ratings instead of their searchability
  • Crashes – Mobile app crashes are more critical than a 404 error as oftentimes the required solution is to upgrade the whole app
  • Integration with other apps – Mobile apps will also need to include features of other apps, like how Uber uses GPS to locate riders or Evernote uses the camera feature to import notes
  • App size – Mobile apps have a larger focus on size of the application, memory footprint, and load/startup times compared to traditional websites
  • Browser compatibility – Mobile apps require more development time and testing due to device compatibility and OS versions
  • Multiple versions – Mobile apps generally run multiple versions depending on when the user downloads the app, compared to a website that typically runs one “live” version

While these things may feel overwhelming for a web developer, there are plenty of good reasons why you may want to switch to mobile app development.

Why You Should Learn Mobile Apps

Mobile development can be intimidating, but you may still want to invest the time in it. Here’s why…

1. More earning potential

Mobile app developers typically make more money than web developers, partially due to demand. Web developers tend to lose business to DIY solutions like Wix and Squarespace, but so far there’s no widely-accepted DIY solution for building a great mobile app.

This means that mobile developers can also charge more for their services without being questioned. Payscale.com lists the average salary for a mobile application developer as $71,072 per year versus $53,036 for a web developer.

And if you launch your own app or co-develop one, you can make residual profits from things like in-app purchases – money which is hard for web developers to replicate.

2. Transferable skills

As we mentioned earlier, many of your web development skills will transfer over to the mobile world, making it easier to get started. This is especially good news for newer developers who are learning HTML5, as its predicted to overtake native apps in the future.

3. More flexibility and creative power

Non-game app downloads will exceed $182 billion in 2020, accounting for a quarter of all app store downloads. The best part for developers is that there are a variety of ways that people can use mobile apps to improve their lives, meaning the sky’s the limit in terms of innovation. Chances are if you have a creative idea for an app, you can probably find a market for it, which puts more control into your hands.

If these reasons entice you, then you should consider switching to mobile app development.

How to Transition Into Mobile App Development

The easiest way to get started is to choose a mobile platform based on a programming language with which you’re already familiar. If you’re already keen on Java, consider starting with Android apps, for example.

Currently, there are three roads you can take depending on your language of choice:

  • Native iOS development with Objective-C or Swift
  • Native Android development with Java
  • Cross-platform HTML5 mobile development with PhoneGap

spin_mobileappnumbers_071014-011

Once you’ve chosen a platform, you will also want to consider the type of app you want to make. Ask:

  • Will it be a non-game or gaming app?
  • How many potential app users are there?
  • What app will have the greatest reach?
  • What app will generate the most revenue?

After you’ve settled on a specific app type, you will want to consider strategy before you start building. Research some of the apps already on the market that may be competing with yours to see whether or not you have a unique enough offering.

You should also consider whether your app should be free or paid (the most successful apps tend to be free with in-app purchases).

After that, it comes down to the technical details of programming and designing the right user interface. If you need help at this stage, check out CodeConquest’s list of resources for learning how to build mobile apps.

[ Content upgrade with ID = 323 not found ]

Final Thoughts

Mobile is the wave of the future, and there are a lot of great reasons to make the leap to mobile development. For one, it’s incredibly profitable.

Whether or not you decide to develop mobile apps for others or you launch your own, mobile apps are in much higher demand than traditional websites. Even if you want to stick with web development, consider adding mobile to your toolbelt for added marketability.

If you’re curious about getting started with mobile app development, start brainstorming some app ideas and doing some research into which apps are the most marketable. Then it’s as simple as choosing a mobile platform and brushing up on the right language.

Why Having a Poor Work-Life Balance May Ruin Your Career

Web development is one of the most employable careers today.

The U.S. Department of Labor predicts job growth rates around 27% in the next decade, which is much higher than average.

The good news is that whether you’re freelancing or working for an agency, you stand a good chance of being employed in a fast-paced and growing field for a long time.

The bad news is that because of its popularity and necessity, web development is an extremely high-demand field. Late hours, overtime, and project extensions are the norm.

What this means is that if you’re not taking the time to take care of yourself, it’s very, very easy to burn out, lose passion, and quit all together.

[ Content upgrade with ID = 315 not found ]

Why Burnout Happens to Developers

Burnout is one of the most common mental health conditions that can lead to impaired work efficiency, and younger workers with fewer experiences are noted to be at higher risk for burnout.

mtb_stressstatistics_large

Unfortunately, web developers tend to fall to the bottom of the workflow barrel – you’re the last people to get information for a project after it’s gone through numerous cycle of approval from management, copy editors, and a PR team.

You’re also the last stop in the process before it’s time to launch, which means you have the most work to do in the shortest amount of time.

To add insult to injury, since no one else knows how to make updates and changes to the website, tedious maintenance tasks fall to you, too.

But those aren’t the only reasons burnout happens.

Physical Burnout

First, there are the physical demands. You may not think that sitting at your computer all day counts as a high-stress job, but it does.

Developers and programmers tend to stay glued to their screens for longer periods of time, often slouching to compensate for the height difference between your natural eye line and the monitor. This poor posture can lead to joint pain as well as back and neck injuries.

Sitting for prolonged periods can also increase blood pressure and lead to various heart conditions. Basically, it’s not just the tasks you do that can stress you out, it’s the way you do them that can amplify the problem.

Mental Burnout

Second, development is one of those career fields that require an abnormal amount of cognitive and intensive thinking. You’re constantly doing deductions and calculations in your head that can quickly tire you out.

The signs of mental burnout can include things like:

  • Chronic fatigue
  • Insomnia
  • Forgetfulness
  • Impaired concentration
  • Problems paying attention
  • Increased illness
  • Loss of appetite
  • Anxiety
  • Depression

Given enough time, those symptoms can wreak havoc on your work life. In a Hacker News article’s comments section, one developer described it like this:

“Burnout is caused when you repeatedly make large amounts of sacrifice and or effort into high-risk problems that fail. It’s the result of a negative prediction error in the nucleus accumbens. You effectively condition your brain to associate work with failure.”

Company Burnout

Finally, burnout can happen because your company doesn’t support your career goals. Or maybe you’re freelancing and your personality just isn’t designed to handle the stress of it.

In an agency or corporate setting, burnout can happen because the workflow itself is dysfunctional or the company is underemployed, leaving you with a heavier workload than you can handle.

You may also feel exploited or that you’re not being properly rewarded for your efforts, or that you have little control in the day-to-day duties and operations of the company. Or perhaps the company’s values aren’t in line with your own personal values.

In a freelance setting, you may find the lack of community frustrating, having no one to turn too when you’re overloaded. You may also struggle with managing your own deadlines in addition to other necessary tasks like marketing.

All of these frustrations, if not properly managed, can lead to burnout.

raf750x1000075tfafafa-ca443f4786-u2

How to Avoid Burnout

Too much stress can often result in the loss of employment, either due to chronic illness, or simply being unable to perform the required task in a timely manner. That’s why it’s essential to create a healthy work-life balance.

Take Time to Assess Your Needs

It’s important to pinpoint the source of your burnout as early as possible and to make adjustments as needed.

Do you need a better workstation to accommodate for sitting all day? Best practices for self care if you’re stuck at a desk include setting your monitor at eye level (even if you’re using a laptop) while your keyboard (remote keyboard for laptops) remains at arms level.

Does overthinking tire you out? Take some time to get up and walk around, watch a funny YouTube video, or find a quick distraction during work hours to help you relax.

You may even need to reassess your diet and sleep needs while you’re not at work. Late nights up watching TV or finishing other projects can make your regular 9-to-5 all the more exhausting.

Take Time to Assess Your Career Goals

It may be that you are burned out because the work you are doing is soul-sucking (and that’s okay). Maybe you’re working in a company that doesn’t value personal space, or they have a dysfunctional workflow, or they don’t give you enough respect.

It’s okay to look for employment elsewhere.

Maybe you like your company but you’ve accidentally bit off more than you can chew. It’s more than okay to admit this. Talk to your boss or co-workers about lightening the load in some way. Chances are if you’re burned out, someone else is too. Don’t be afraid to find support in others.

Or if you simply aren’t sure you’re cut out for development, take time to do some soul-searching and decide what you really value and whether or not your current job is moving you toward your ultimate dream career.

Take a Vacation

Finally, take a vacation. Or two.

U.S. workers in particular are overworked and under-vacationing in record numbers. 42% of workers take no vacation time away from their jobs, and a staggering 61% of those who do vacation still work during their time off.

But genuine, uninterrupted time off can actually reverse the symptoms of burnout, relieve stress and fatigue, and improve cognitive functions.

It’s not that vacations are just a nice bonus, they’re a necessity to your survival as a web developer.

[ Content upgrade with ID = 315 not found ]

Final Thoughts

Burnout happens more often than you think, and if you’re someone who recognizes some of the symptoms in your own life, chances are you’re already on the path.

The good news is that you can fight burnout by being vigilant about your needs. Take time to assess what you can and can’t handle, and take note of your work environment – the people, the workload, the morale – to see if there are adjustments you can make.

Be sure to take time off when you can get it (or make time for it) and don’t be afraid to adjust your home life to help improve your ability to handle stress when you’re slogging through the busy season.

How to Develop for Gesture-Driven User Interfaces

Only a few years ago, “responsive” was the buzzword when it came to web development – every site needed to be viewable on multiple screen sizes to make way for an increase in mobile usage.

Today, it’s becoming increasingly difficult to find a site that’s not responsive to some degree, and new developers learn how to create flexible interfaces from the get-go.

So the buzzword of the moment has become “gestures” – developing websites to be used with touchscreen technology. Screens have exploded in the last three years. In 2016, shipment of touchscreen gadgets was around 2.8 billion, up from 1.8 billion in 2013.

But before you think, “Well, I’m not a mobile UI developer, so what does it matter?” consider that touch screen technology isn’t limited to mobile. While more than 64% of Americans use touchscreen mobile devices, nearly 39% of touchscreens users have computer monitors with gesture-driven technology, and 42% use tablets to browse your site.

Even home appliances like refrigerators and washing machines can be equipped with touchscreens.

This means that web development is no longer about making sure all your words and images fit onto varying screen sizes, but rather about whether or not your site can be triggered by the swipe of a finger instead of the click of a mouse.

Modern web developers will need to be able to build gestures into their websites, no matter the device it’s being viewed on.

So how do you build a website with gestures in mind?

[ Content upgrade with ID = 308 not found ]

invision_compr

Use Gestures for Functionality

The main reason that gesture controls work well is that they feel natural and intuitive to users, like interacting with a real life object.

For example, when you pick out a shirt to wear from your closet you don’t select a button to see whether or not the shirt is dirty, you just grab it.

With gesture technology, if you were browsing for a new shirt to buy on a retail website, you wouldn’t have to click a button to get a better look at the shirt’s details; you would “grab” the screen (or pinch, in this case) to get a closer view.

The goal is to design your gestures around natural human interaction – pinches, swipes, taps, and pulls. So anywhere there’s a button on your site or an action that someone would have to “click” on a normal screen, consider it an opportunity to use gestures.

Even including something like Pull-To-Refresh can be an easy way to include gestures in your site without disrupting the design.

Just remember to use visual cues to indicate where there’s additional gesture-driven action on your site, especially for PC users. Without visual cues, users could get confused about how to interact.

Include Proper Sizing of Gesture Targets

Most people will use their fingers or thumbs in place of a mouse, but unfortunately fingers and thumbs aren’t quite as accurate, and can select too much (or too little) depending on the size and spacing of your site.

For mobile users, a thumb can manage to sweep the entire screen of an oversized phone, but only about a third of the screen is in truly “effortless” for them to use. They may need to zoom in to select a smaller button at the top of the screen, for instance.

mobile-app-gesture-touch-gesture-reference-guide

With PCs or tablets there’s some leeway, as screen sizes will also be larger, but there are different spots on a tablet that are still more user-friendly for gestures (like the upper corners instead of the bottom corners).  Not to mention when you’re tapping or swiping in a hurry, you can still run into trouble.

That’s why Apple, Google, and Microsoft all provide guidelines for the proper sizing of tap targets.

Think Action + Animation

When designing for gestures, there are two essential questions you need to ask:

  • What action is triggered when the user performs a gesture?
  • How will I visualize that action as it’s happening?

You will first need to decide which action will be triggered when a user performs a certain action. Will a double tap open or close a page? Will they need two fingers scroll up and down or can they use one finger and a swipe?

lukew-coretouchgestures

Source: Luke W – Touch Gesture Reference Guide

Once you’ve decided what action will be created by what gesture, you’ll need to decide how you want to let users know that the gesture has succeeded. Users won’t be able to fully see, understand and feel what will happen when they touch, hold, drag and swipe items before it happens.

If there’s an immediate response (if you drag to scroll and it scrolls, you know you’re successful), there’s not an issue. But if there’s a delayed response (you tap, but the new image or page hasn’t loaded yet), consider including an additional animation (like a change in color or size) to alert users that their gesture worked.

Use Prototyping Tools to Test and Debug

Of course, gesture-driven interfaces have the same amount of bugs as any interface, so it’s important that you’re testing your site in order to pinpoint where and when users might get stuck before you launch.

Certain prototyping tools, including Pop and Invision, can help you develop wireframes and debug any problem areas as needed.

Framer JS is another prototyping tool that can help you build more interactivity on your site, and also allows you to test on a number of different devices.

Other tools you might want to consider:

Your goal should be to test on as many touchscreen devices as possible to make sure that you’re not running into issues with gestures on any particular device.

[ Content upgrade with ID = 308 not found ]

Final Thoughts

Gestures are the wave of the future for both mobile and PC web development, so it’s important for new developers to keep up-to-date on the latest gesture-driven technology trends.

If you’re designing a site for touchscreen, remember that gestures should be natural and intuitive; it should makes sense for someone to tap a button or swipe a photo. You also want to make sure that your gesture targets are large enough to accommodate the “clumsiness” of thumbs and fingers.

If necessary, include any animations or visual cues to alert users to areas of your site where they can use gestures, and be sure to test out your site on touchscreen devices and using prototyping tools before you launch.

Should You Consider Freelancing? Maybe, If…

For some developers, freelancing is an ideal job. You typically set your own hours and can dictate where you work. But while freelancing can be a great lifestyle fit for many, some may find themselves enjoying agency work instead.

So which type of developer are you?

You may already have a sense of the work environment you want, so the choice may be a no-brainer. Or maybe you’ve been freelancing and contemplating making the switch into an agency role.

Whatever the case may be, here are a few things you should consider before making the jump into freelancing (or remaining a freelancer)…

[ Content upgrade with ID = 298 not found ]

Pros and Cons of Freelancing

freelancer-liability-featured

There are many reasons freelancing could make more sense for you than a traditional employer-employee job. A few of the main benefits that freelancing can bring include higher levels of compensation, a better work-life balance, and a higher level of optimism and control over your career.

Pros

  • Greater level of flexibility in schedule and location
  • Better work life balance (set your own schedule)
  • No ceiling on how much money you can make
  • More control over which clients you choose
  • Less risk of being laid off (some call it “recession-proof”)

If those reasons alone make you say, “Sign me up!” you may want to consider being a freelancer. However, freelancing does come with its downsides if you’re not fully prepared.

 

Many freelancers say their biggest concerns are finding clients, going through “feast or famine” months where money is good (or bad) depending on a changing workflow, and struggling with their work-life balance when there’s no one else setting the schedule.

Cons

  • Constantly finding and maintaining your own client list
  • Working alone with very few other support systems
  • High levels of competition from other freelancers
  • Lack of clear direction and path for job growth
  • Financial concerns (“When will I get paid?”)
  • Setting your own boundaries with clients and deadlines

Some developers may find that they want the freedom to do things “their way” but struggle to maintain a healthy schedule when given total freedom. Others may find that the constant pressure of finding work is a deterrent to truly feeling successful as a freelancer.

But should any of the above stop you from becoming (or continuing as) a freelancer? Not necessarily. There are a few skills you may want to consider developing if you’re looking to go down that path.

Necessary Skills for Freelancing

surviving-life-as-a-freelancer

Some may say that being a freelancer means that you don’t have a “real” job, but for those who have been a freelancer for any period of time, you know that’s not the case. In fact, freelancing requires skills more in line with those of an entrepreneur.

Freelance Folder lists 16 essential skills freelancers need to be successful, and some may surprise you:

  • Accounting
  • Communication
  • Estimating
  • Marketing
  • Management skills
  • Negotiating skills
  • Networking skills
  • Problem-solving skills
  • Project management
  • Proofreading
  • Public relations
  • Research
  • Sales
  • Scheduling
  • Stress management

If all of those seem overwhelming, don’t worry. While many of those are helpful for success, there are resources available specifically designed to help freelancers in the areas they may fall short.

So while you don’t need to be an expert at accounting or the best networker in the room, those who make a life-long career from freelancing often find that developing those skills makes them better at their jobs.

But what if you’re reading this and you realize you just don’t want the pressure that comes along with working as a freelancer, but you don’t want to go back to working for a company in-house?

The good news is that you have options, with one being working for a creative or digital marketing agency.

Alternative: Agencies

There are many benefits of working in a team environment like an agency, though there are different skills involved with being successful in an agency setting, too. Depending on the size of the agency itself, you could experience everything from an intimate and collaborative environment to working on some big name brands with a large team.

Benefits of Agencies

  • Variety of clients (both large and small brands depending on the size)
  • Help dealing with clients (some developers won’t deal with clients directly)
  • Working with a team of other experts in their field
  • Steady paycheck (with opportunities for bonuses in some cases)
  • No overhead (for yourself)

If you’re the type of person who feels like they need support but don’t want to be stuck working for one client (like an in-house position), you may love working with a creative or marketing agency. With that being said, it’s still not for everyone.

What It Takes for Agency Work

While most agencies have a more collaborative environment than an in-house position, the skills needed are somewhat similar between the two. You will still typically work a 9-to-5 in a specific location, but you don’t have to manage your own clients and you have support if you need it.

Some other aspects that could benefit you in an agency environment include:

  • Working under pressure
  • Loving fast-paced environments
  • Enjoying being rewarded for your efforts in tangible ways
  • Wanting to work on a variety of projects at once
  • Being able to meet strict deadlines
  • Needing people around you to bounce ideas

While working for an agency isn’t for everyone, if you don’t want the uncertainty that comes with being a freelancer and you like environments that will keep you on your toes, you may thrive in an agency environment.

Which Should You Choose?

freelancer-insurance-guide-featured

Of course, there are a variety of factors that go into making the decision to freelance or not. You will need to consider:

  • Your current economic situation – Can you afford “feast and famine” months? Or do you need a steady paycheck?
  • Your work ethic – Can you put in the hours it takes to find clients and manage their expectations on your own?
  • Your marketability – Can you stand out from the competition and market yourself enough to find work?
  • Your desired lifestyle – Do you want to be able to set your own schedule? Or do you work better in a structured environment?
  • Your level of ownership – Do you want to be in control? Or do you like passing off work to other team members if necessary?

The choice is up to you. To make the best decision, it’s best to decide which areas of your life you can handle more (or you need less) stress.

Freelancers often find that they have much less stress in setting their schedule, choosing their clients, and working from wherever they want. But they also have more stress in maintaining that workflow, keeping up with client demands, and getting paid on a regular basis.

Agency developers may find that they have less stress in managing clients, but may be overwhelmed by the 9-to-5 or by working in teams.

[ Content upgrade with ID = 298 not found ]

Final Thoughts

Freelancing can be a great opportunity if you’re able to keep up with the skills necessary for success.

To get the most out of freelancing, you may want to focus your efforts on developing a wide range of entrepreneurial skills that will help you manage your business and your time more efficiently. Remember that there are always resources out there for freelancers who fall short in different areas.

If you’re just not sure that freelancing will be the best fit for your needs but you’re tired of working in-house, you may consider joining a creative or marketing agency to give yourself a boost – that is, as long as you’re okay in a fast-paced environment.

Ultimately the choice is yours. Just remember that you’re never stuck. You can always try freelancing to see whether or not it’s the best fit for you.

How to Handle Negative Feedback On Your Projects

At some point in your career, you will deal with negative feedback from clients. It’s nearly inevitable.

But how you respond to that feedback will be the difference between having a lot of successful projects or a lot of angry clients.

One of the keys to responding to feedback well lies in separating the feedback itself from negative emotion – in other words, don’t take it personally.

That’s not to say you should be impervious to negative feedback, however. There’s a fine line between brushing off negativity and ignoring genuinely helpful commentary.

Even negative feedback can be useful if you know how to handle it.

[ Content upgrade with ID = 290 not found ]

Why Negative Feedback Matters

There’s good reason to consider how you respond to feedback. Research shows that 46% of newly hired employees will fail within 18 months, and 26% do so because they can’t accept feedback.

noonelikes

Mark Murphy, founder of Leadership IQ and author of Hiring for Attitude says that being able to accept feedback is a sign of self-awareness.

“Somebody who has enough self-awareness to recognize they might need feedback, that’s the person that’s going to say ‘Even when I’m on my best game, there’s always something I could’ve done to be better.’”

Research also shows that there is a difference between negative and positive feedback, though both can be helpful in the right circumstances. Positive feedback (e.g., “Here’s what you did really well”) increases commitment to your work by boosting your confidence. Negative feedback (e.g., “Here’s where you went wrong”), on the other hand, is informative — it tells you where you need to spend your effort, and offers insight into how you might improve.

Negative feedback in particular is helpful for those who want to become experts in their field. While positive feedback will make you feel more at ease with the challenges you’re facing, negative feedback will motivate you to do what it takes to make your work the absolute best.

Of course, just because it’s ultimately helpful, doesn’t mean it isn’t hurtful. So how do you deal with negative feedback while still moving forward?

How to Respond to Negative Feedback

Because the goal here is to motivate you, it’s important that you don’t immediately react to the negativity and you keep your head above water. That can be difficult depending on the client, but here are a few things you absolutely shouldn’t do…

What NOT to Do

Don’t get emotional. Negative feedback can often be tied to negative emotions, and while it’s natural for humans to feel like they’re being criticized, it’s important to step back and look at the situation for what it really is. Are they giving you personal feedback? (e.g., “You didn’t listen to what I said”) or are they giving feedback on your work? (e.g., “This isn’t what I had in mind”).

Sometimes what people mean is different than what they say. Maybe the work isn’t up to their expectations, but they still direct their words as if you’re the reason everything is failing. This is a good time to be self-aware about whether or not the client is unhappy with you or simply something you did (because there is a difference).

feedback-image

If the feedback is about you personally, don’t become defensive. Whether or not the feedback is true, try to use “I” statements – like, “I know this happened, and here is how I will fix it…” – to show that you can take responsibility and that you don’t hold a grudge.

Don’t miss a chance to clarify. Again, don’t assume that you understand what the client is saying. Try repeating back to them what you think you heard: “What I’m hearing is that there are three major things that need to be improved, and here is what you would like to see happen…”

You can also ask questions like:

  • “What exactly don’t you like?”
  • “Can you give me an example?”
  • “Can you point to the bit you don’t like?”
  • “Is it the font itself or the size of the text that’s the problem?”
  • “Are you saying you don’t like the story, or the way it’s being told?”

Your goal is to understand and help them articulate their opinions. Remember that you’re not necessarily agreeing with them, you’re just clarifying what they mean.

Don’t dwell on it. One thing that constantly bogs down new developers is dwelling on the small mistakes instead of focusing on how to improve. Remember that every developer will get things wrong, and that negative feedback isn’t a sign of failure, but rather an opportunity to improve your craft and truly become an expert.

What to Do Instead

Give a solution. It’s more beneficial for both you and the client if you’re the one spearheading the conversation. Instead of giving statements about the problem, describe a potential solution and ask whether it would be acceptable to the other person.

For example, you might ask: “I know you don’t like the look of it, but if I can show you evidence that your customers prefer it this way, will you sign it off?” Your goal is to leave the room with a clearly agreed upon next step towards a solution.

Ask for time. Unless you can fix something on the spot, it’s okay to ask for time to come up with a solution or to dig for more information. Saying something like, “I would like to think about this and get back to you. Is there anything else I should know?” will show that you take what you’ve been told seriously. It also gives you time to think through the accuracy of what you’ve been told, perhaps testing its validity with others.

Have a plan for integrating helpful feedback into your habits. At the end of the day, negative feedback is about self-improvement. But if you never take the opportunity to actually improve, it can remain a negative experience and nothing else. That’s why it’s important to integrate anything that is useful from the feedback experience.

Does the feedback mean that you aren’t communicating clearly enough? Do you need to become a better coder? Do you need to have a better project intake process? Make a list of things you can improve and then keep refining through practice.

[ Content upgrade with ID = 290 not found ]

Final Thoughts

Negative feedback is what you make it out to be. If you take things personally or assume the worst, the situation will ultimately be a negative one.

If, however, you can take some time to clarify, reflect, and come up with a solution, you will turn a negative situation into something that can spur growth.

Not only will you make yourself a better developer, but your clients will love you for it.

A Beginner’s Guide to CSS/HTML Preprocessors

Preprocessor may not be the most common word in your vocabulary, but if you’re a developer, it’s a good one to know.

The concept of a preprocessor can be intriguing to some and confusing to others, and while some coders swear by them, others have done their best to avoid using them at all costs.

But if you fall in the latter category, you may be missing out on a great tool that could really simplify your life. Here’s why…

[ Content upgrade with ID = 280 not found ]

What Are Preprocessors?

Preprocessors are programs that take one type of data and convert it to another type of data, usually HTML or CSS.

preprocessor-300x297

CSS preprocessors in particular are written for the sole purpose of adding new features without breaking browser compatibility.

There are plenty of reasons why this would be helpful. Chris Loos over at Urban Insights names a few:

  • It adds the stuff that should have been in CSS in the first place
  • It will make your CSS “DRY” (Don’t Repeat Yourself)
  • It will save you time
  • It will make your code easier to maintain
  • It will make your CSS more organized

If that sounds like something you want, then you’re primed to use a preprocessor. The next step is figuring out exactly which one to use.

CSS preprocessors come in several varieties, with LESS and SASS among the most popular. If you want to dive into HTML, you’re probably choosing between HAML and Jade.

So how do you choose?

Here is a breakdown of the top options for both CSS and HTML.

CSS Preprocessors

For the most part, the choice of preprocessor falls to personal preference, but there are a few pros and cons for each option.

sass-less-cover

SASS

SASS stands for Syntactically Awesome Style Sheets and was originally designed and created by Hampton Catlin.

SASS allows you to dynamically manipulate CSS using variables, mixins, inheritance, and nesting rules. It essentially helps you write less code and speed up your workflow. Many popular frameworks are built with SASS.

It has two syntaxes:

  • SCSS, which stands for “Sassy CSS”
  • Traditional (indented) SASS

Why use SASS? For one, you should use SASS if you love working with Ruby. You might also like using it if you prefer an older style of syntax and hate curly brackets and semicolons, as SASS uses indentations to delimit blocks of style and line breaks instead of semicolons to separate statements.

LESS

Written in JavaScript, LESS also allows you to extend CSS with dynamic behaviors, but their documentation is more designer friendly and the syntax is newer (no line breaks or indentation). Frameworks like Bootstrap are using LESS to take advantage of its dynamic features.

Why use LESS? If you prefer working in JavaScript (many devs find it less tedious to learn) and you’re more familiar with the newer style of syntaxes, you may prefer LESS as your preprocessor of choice.

If you’re still not sure which to use between the two, the folks over at CSS Tricks have a comparison article, found here.

an-intro-to-css-preprocessors-nashville-marketing1

Source: No Sleep for Sheep

Other Options

With CSS preprocessors, you have more choices than just SASS or LESS. If you’re picky, you also have Stylus – another popular option – and a few others to choose from like CSS-Crush, Myth, and Rework.

  • StylusSimilar to LESS, Stylus is written in JavaScript (node.js) but features the indented syntax and regular CSS style of SASS, giving you the best of both worlds.
  • CSS-Crush – Another great option, this preprocessor is written in PHP with classic syntax.
  • Myth – Myth is a new CSS preprocessor that uses natural CSS syntax and acts as sort of a CSS polyfill for future standards.
  • Rework – Rework is a CSS preprocessor written in JavaScript that may be used with node.js or in the browser.

If you’re looking for more obscure options, you can try any of the following:

  • Clay – A CSS preprocessor created using Haskell
  • DtCSS – A PHP script that parses DtCSS syntax into CSS
  • Switch CSS: A CSS preprocessor that runs on Apache

HTML Preprocessors

If you prefer to leave CSS alone, you can also use preprocessors with HTML. While there are fewer options to choose from, the choices available are still helpful in getting your coding done faster.

Haml

03-haml-ruby-homepage-gem

Haml, also known as HTML abstraction markup language, is a language designed to help you create beautiful (and functioning) markups. Some coders love it, others hate it. Again, it’s about personal preference.

It works by turning code written in Haml into HTML. It promotes DRY coding and is highly structured, making it perfect for coders who want a little more formatting. Haml does require Ruby to be compiled to HTML, so the first step to using it is to ensure that Ruby is installed

Why use Haml? If you’re okay working with Ruby and you want an easy-to-read, easy-to-learn tool, Haml is the perfect choice. It also borrows some CSS syntax, so if you’re more familiar with CSS but you still want to create markups, it can help with that.

Jade

javascript-templ

Jade is another JavaScript language for creating HTML markups, and has a number of advantages of using plain HTML.

A few of the basic features include adding simple tags, adding attributes to those tags, and creating blocks of text.

The only downside is that browsers won’t render Jade directly, though there are different tools available for different platforms that can preprocess Jade to HTML, including:

Why use Jade? If you need a simple way to do mockups and you’ve been using regular HTML up to this point (and don’t want to bother learning Ruby), Jade is a good choice.

[ Content upgrade with ID = 280 not found ]

Final Thoughts

While you don’t absolutely need to use preprocessors to compile your code, they certainly can help move thing along faster.

Preprocessors are designed to help you create structured, organized code that is easier to maintain and will save you time in the long run, which is helpful for every coder.

If you’re a fan of CSS, check out a few of the top options, like SASS, LESS, or even Stylus. If you’re more into HTML, there are a couple options that can help you out, including Haml and Jade.

If you’re having trouble choosing between them, try a few out and see how they work for you. Using a preprocessor is all about convenience, so you get to decide which one works best for you.